/* ============================================================
   GAMING LOUNGE SYSTEM — v4
   Aesthetic: Warm editorial · Quiet authority · Breathing space
   Palette: Off-white base · Deep forest green accent · Warm neutrals
   Typography: Cormorant Garamond (display) + DM Sans (body) + DM Mono (data)
   ============================================================ */

/* ── Google Fonts loaded in header.php ── */

:root {
  /* ── Base surfaces ── */
  --paper:        #faf8f4;
  --paper-warm:   #f5f1ea;
  --paper-deep:   #ede8df;
  --white:        #ffffff;

  /* ── Ink ── */
  --ink:          #1a1714;
  --ink-mid:      #3d3832;
  --ink-soft:     #6b6560;
  --ink-dim:      #9e9690;
  --ink-ghost:    #c8c3bb;
  --border:       #e4dfd7;
  --border-soft:  #ede9e2;

  /* ── Forest green accent ── */
  --green:        #2d5a3d;
  --green-mid:    #3d7a53;
  --green-light:  rgba(45, 90, 61, 0.08);
  --green-glow:   rgba(45, 90, 61, 0.15);

  /* ── Status colours (muted, warm) ── */
  --status-blue:  #3a6ea8;
  --status-red:   #b84040;
  --status-amber: #b87c28;
  --status-green: #2d6b42;

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Spacing ── */
  --section-pad:  120px;
  --container:    1180px;
  --pad:          28px;

  /* ── Radius ── */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ── Shadows — warm, not cold ── */
  --sh-xs: 0 1px 4px rgba(26,23,20,0.06);
  --sh-sm: 0 2px 12px rgba(26,23,20,0.07);
  --sh-md: 0 6px 28px rgba(26,23,20,0.09);
  --sh-lg: 0 16px 56px rgba(26,23,20,0.11);
  --sh-xl: 0 32px 80px rgba(26,23,20,0.13);
  --sh-green: 0 8px 32px rgba(45,90,61,0.18);

  /* ── Transitions ── */
  --t:      0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--green); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--green-mid); }
ul   { list-style: none; }

/* ── Container ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ── Typography ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.12;
  color: var(--ink);
  font-weight: 600;
}
h1 { font-size: clamp(42px, 6vw, 76px); letter-spacing: -1px; font-weight: 500; }
h2 { font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.5px; font-weight: 500; }
h3 { font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -0.3px; }
h4 { font-size: 18px; font-weight: 600; font-family: var(--font-body); }
p  { font-size: 17px; line-height: 1.78; color: var(--ink-soft); }

/* ── Section label ── */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--green);
  margin-bottom: 20px;
}
.label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--green);
  display: block;
}

/* ── Section ── */
.section { padding: var(--section-pad) 0; }
.section--warm { background: var(--paper-warm); }
.section--deep { background: var(--paper-deep); }

.section__header { text-align: center; margin-bottom: 72px; }
.section__header h2 { margin-bottom: 18px; }
.section__header p {
  font-size: 19px;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.72;
}

/* ── Divider ── */
.divider {
  width: 40px;
  height: 1px;
  background: var(--green);
  margin: 24px auto;
  opacity: 0.5;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--t);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.btn--primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  box-shadow: 0 4px 16px rgba(45,90,61,0.22);
}
.btn--primary:hover {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(45,90,61,0.28);
}
.btn--primary:active { transform: translateY(0); }

.btn--outline {
  background: transparent;
  color: var(--ink-mid);
  border-color: var(--border);
}
.btn--outline:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-light);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn--ghost:hover { color: var(--green); }

.btn--whatsapp {
  background: #25D366;
  color: var(--white);
  border-color: #25D366;
}
.btn--whatsapp:hover {
  background: #1fb958;
  border-color: #1fb958;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.28);
}

.btn--lg  { font-size: 16px; padding: 18px 36px; }
.btn--sm  { font-size: 13px; padding: 10px 20px; }
.btn--full { width: 100%; justify-content: center; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 22px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.4s ease;
}
.site-header.scrolled {
  background: rgba(250,248,244,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-soft);
  padding: 16px 0;
  box-shadow: var(--sh-xs);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo__mark {
  width: 36px; height: 36px;
  background: var(--green);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.site-logo__text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1;
}
.site-logo__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Nav links */
.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--t);
  letter-spacing: 0.1px;
}
.site-nav a:hover,
.site-nav a.nav-active { color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 12px; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: all var(--t);
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  z-index: 999;
  flex-direction: column;
  padding: 100px 28px 40px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.38s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu.active { opacity: 1; transform: translateX(0); }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
  display: block;
  transition: color var(--t);
}
.mobile-menu a:hover { color: var(--green); }
.mobile-menu .btn { margin-top: 28px; width: 100%; justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
  overflow-x: clip;
  background: var(--paper);
}

/* Subtle warm texture dot pattern */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,23,20,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 70% 40%, black 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 10%, transparent 65%);
}

/* Warm blush glow top-right */
.hero__glow {
  position: absolute;
  top: -15%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(45,90,61,0.05) 0%, transparent 65%);
  pointer-events: none;
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Hero content */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--green);
  margin-bottom: 28px;
}
.hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.7); }
}

.hero h1 {
  margin-bottom: 28px;
  line-height: 1.08;
  max-width: 520px;
}
.hero h1 em {
  font-style: italic;
  color: var(--green);
}
/* Force "PS | Gaming Lounge" onto one line, scale down if needed */
.hero__h1-line1 {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(28px, 4.2vw, 64px);
}

.hero__sub {
  font-size: 18px;
  line-height: 1.78;
  color: var(--ink-soft);
  margin-bottom: 40px;
  max-width: 480px;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Trust strip */
.hero__trust {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid var(--border-soft);
}
.hero__trust-stat {}
.hero__trust-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 4px;
}
.hero__trust-label {
  font-size: 12px;
  color: var(--ink-dim);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.hero__trust-div { width: 1px; height: 36px; background: var(--border); }

/* ── Phone visual ── */
.hero__visual {
  position: relative;
  z-index: 2;
  overflow: visible;
  /* Bug Fix 1: Align to right so mockup bleeds toward viewport edge */
  display: flex;
  justify-content: flex-end;
  /* Extend slightly past the container to bleed right */
  margin-right: calc(-1 * var(--container-px, 48px));
}

.phone-wrap {
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}

/* Phone frame — light, warm */
.phone-frame {
  background: var(--paper-warm);
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    var(--sh-xl),
    0 0 0 1px rgba(26,23,20,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.9s cubic-bezier(0.4,0,0.2,1);
}
.phone-frame:hover {
  transform: perspective(1200px) rotateY(-1deg) rotateX(0deg);
}

.phone-screen {
  background: var(--paper);
  border-radius: 36px;
  overflow: hidden;
  aspect-ratio: 9/18;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
}

/* Phone UI — light theme */
.pui-bar {
  background: var(--white);
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.pui-bar__name {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.pui-bar__shift {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--green);
  background: var(--green-light);
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid rgba(45,90,61,0.18);
}

.pui-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 10px 6px;
  flex-shrink: 0;
}
.pui-stat {
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  padding: 10px;
  border: 1px solid var(--border-soft);
}
.pui-stat__lbl {
  font-size: 8px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
  font-family: var(--font-body);
}
.pui-stat__val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.pui-stat__val--green { color: var(--green); }
.pui-stat__val--red   { color: var(--status-red); }

.pui-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px 10px 10px;
  flex: 1;
}
.pui-console {
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 10px;
  border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 5px;
  border-left: 2px solid transparent;
}
.pui-console--session { border-left-color: var(--status-blue); }
.pui-console--free    { border-left-color: var(--green); }

.pui-console__name {
  font-size: 8px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--font-body);
}
.pui-console__status { display: flex; align-items: center; gap: 4px; }
.pui-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pui-dot--blue  { background: var(--status-blue);  animation: blink 2s infinite; }
.pui-dot--green { background: var(--green); animation: blink 2.8s infinite 0.6s; }

@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

.pui-console__state { font-size: 9px; font-weight: 600; color: var(--ink-soft); }
.pui-console__state--blue  { color: var(--status-blue); }
.pui-console__state--green { color: var(--green); }
.pui-console__game { font-size: 8px; color: var(--ink-ghost); }
.pui-timer {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.3px;
  margin-top: auto;
}
.pui-timer--dim { color: var(--ink-ghost); font-size: 12px; }

/* Float cards — warm paper */
.float-card {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  box-shadow: var(--sh-md);
  z-index: 3;
}
.float-card--shift   { top: 5%;   right: -80px; min-width: 185px; }
.float-card--revenue { bottom: 10%; left: -80px; min-width: 172px; }
.float-card--balance { bottom: 36%; right: -76px; min-width: 165px; }

.float-card__top {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 9px;
}
.float-card__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.float-card__dot--green { background: var(--green); }
.float-card__dot--blue  { background: var(--status-blue); }
.float-card__dot--amber { background: var(--status-amber); }
.float-card__dot--red   { background: var(--status-red); }

.float-card__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-body);
}
.float-card__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 4px;
}
.float-card__sub { font-size: 11px; color: var(--ink-dim); }
.float-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  margin-top: 6px;
  font-family: var(--font-body);
}
.float-card__tag--green { background: var(--green-light); color: var(--green); }
.float-card__tag--blue  { background: rgba(58,110,168,0.08); color: var(--status-blue); }
.float-card__tag--amber { background: rgba(184,124,40,0.08); color: var(--status-amber); }

/* ============================================================
   WHAT CHANGES — reframe cards on warm background
   ============================================================ */
.reframe { background: var(--paper-warm); }
.reframe-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }

.reframe-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--sh-xs);
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}
.reframe-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.reframe-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.reframe-card:hover::before { transform: scaleX(1); }

.reframe-card__num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  color: var(--border);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -2px;
}
.reframe-card h3 { font-size: 20px; margin-bottom: 12px; }
.reframe-card p  { font-size: 15px; line-height: 1.68; }

/* ============================================================
   SOLUTION — Dashboard preview
   ============================================================ */
.solution { background: var(--paper); }

/* Dashboard mockup — light theme */
.dash-preview {
  margin: 52px 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.dash-topbar {
  background: var(--paper-warm);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.dash-topbar__dots { display: flex; gap: 6px; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot--r { background: #e5a0a0; }
.dash-dot--a { background: #e5cfa0; }
.dash-dot--g { background: #a0c9a8; }
.dash-topbar__title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.3px;
}
.dash-topbar__date { font-family: var(--font-mono); font-size: 10px; color: var(--ink-ghost); }

.dash-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
}
.d-stat {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 16px;
}
.d-stat__lbl {
  font-size: 9px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.d-stat__val {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 4px;
}
.d-stat__chg { font-size: 10px; color: var(--green); font-family: var(--font-mono); }

.dash-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.d-panel {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 16px;
}
.d-panel__title {
  font-size: 10px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
}
.d-bars { display: flex; align-items: flex-end; gap: 6px; height: 85px; }
.d-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 12px; }
.d-bar--g { background: rgba(45,90,61,0.35); }
.d-bar--a { background: rgba(45,90,61,0.6); }

.d-console-rows { display: flex; flex-direction: column; gap: 8px; }
.d-console-row { display: flex; align-items: center; justify-content: space-between; }
.d-console-row__name { font-size: 11px; color: var(--ink-soft); }
.d-console-row__bar {
  flex: 1; height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 10px;
}
.d-console-row__fill { height: 100%; border-radius: 2px; background: var(--green); }
.d-console-row__val { font-family: var(--font-mono); font-size: 11px; color: var(--green); }

.solution-points {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
  margin-top: 16px;
}
.sol-point { display: flex; gap: 14px; align-items: flex-start; }
.sol-point__icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--green-light);
  border: 1px solid rgba(45,90,61,0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sol-point h4 { font-size: 15px; margin-bottom: 5px; }
.sol-point p  { font-size: 14px; line-height: 1.55; }

/* ============================================================
   FEATURES — alternating layout
   ============================================================ */
.features-wrap { background: var(--paper); }

.feat-block { padding: 88px 0; border-bottom: 1px solid var(--border-soft); }
.feat-block:last-child { border-bottom: none; }
.feat-block--warm { background: var(--paper-warm); }

.feat-block .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.feat-block--flip .container { direction: rtl; }
.feat-block--flip .container > * { direction: ltr; }

.feat__label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.feat__label-line { width: 22px; height: 1px; background: var(--green); }
.feat__label-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--font-body);
}

.feat h3 { font-size: clamp(24px,2.8vw,32px); margin-bottom: 20px; line-height: 1.18; }
.feat__body { font-size: 16px; color: var(--ink-soft); line-height: 1.78; margin-bottom: 30px; }

.feat__points { display: flex; flex-direction: column; gap: 12px; }
.feat__point {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 15px; color: var(--ink-mid); line-height: 1.5; font-weight: 400;
}
.feat__point-check {
  width: 18px; height: 18px;
  background: var(--green-light);
  border: 1px solid rgba(45,90,61,0.2);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}

/* Feature mockup — light theme */
.feat-mockup {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  aspect-ratio: 4/3;
  display: flex; flex-direction: column;
}
.fm-header {
  background: var(--paper-warm);
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.fm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.fm-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 9px; }

/* Console cards in mockup */
.fm-console-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.fm-card {
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-left: 2px solid transparent;
}
.fm-card--active  { border-left-color: var(--status-blue); }
.fm-card--free    { border-left-color: var(--green); }
.fm-card--offline { border-left-color: var(--border); }

.fm-card__lbl { font-size: 9px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 7px; }
.fm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 600;
  padding: 2px 7px; border-radius: 100px; margin-bottom: 6px;
}
.fm-badge--blue  { background: rgba(58,110,168,0.08); color: var(--status-blue); }
.fm-badge--green { background: var(--green-light); color: var(--green); }
.fm-badge--grey  { background: var(--paper-deep); color: var(--ink-ghost); }

.fm-game { font-size: 9px; color: var(--ink-ghost); margin-bottom: 5px; }
.fm-timer {
  font-family: var(--font-mono);
  font-size: 17px; font-weight: 500;
  color: var(--ink);
}
.fm-timer--dim   { font-size: 12px; color: var(--ink-ghost); }
.fm-timer--green { color: var(--green); }

/* Shift flow */
.shift-flow { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sf-step {
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border-soft);
}
.sf-step--active {
  border-color: rgba(45,90,61,0.25);
  background: var(--green-light);
}
.sf-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green-light);
  border: 1px solid rgba(45,90,61,0.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px; color: var(--green);
  flex-shrink: 0;
}
.sf-title { font-size: 11px; font-weight: 600; color: var(--ink); margin-bottom: 1px; }
.sf-sub   { font-size: 10px; color: var(--ink-dim); }
.sf-time  { font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); margin-left: auto; }

/* Reconcile rows */
.fm-reconcile { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.fm-rec-row {
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border-soft);
}
.fm-rec-label { font-size: 11px; color: var(--ink-dim); }
.fm-rec-val   { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.fm-rec-val--green { color: var(--green); }
.fm-rec-val--red   { color: var(--status-red); }

.fm-banner {
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600;
}
.fm-banner--green {
  background: var(--green-light);
  border: 1px solid rgba(45,90,61,0.18);
  color: var(--green);
}
.fm-banner--amber {
  background: rgba(184,124,40,0.07);
  border: 1px solid rgba(184,124,40,0.2);
  color: var(--status-amber);
}

/* Debt list */
.fm-debt-list { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.fm-debt-row {
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border-soft);
  border-left: 2px solid;
}
.fm-debt-row:nth-child(1) { border-left-color: var(--green); }
.fm-debt-row:nth-child(2) { border-left-color: var(--status-amber); }
.fm-debt-row:nth-child(3) { border-left-color: var(--status-red); }
.fm-debt-name  { font-size: 12px; font-weight: 600; color: var(--ink-mid); }
.fm-debt-phone { font-size: 9px; color: var(--ink-dim); margin-top: 1px; }
.fm-debt-amt   { font-family: var(--font-mono); font-size: 13px; color: var(--status-red); }
.fm-debt-age   { font-size: 9px; padding: 2px 6px; border-radius: 100px; font-weight: 600; }
.fm-debt-age--new { background: var(--green-light); color: var(--green); }
.fm-debt-age--mid { background: rgba(184,124,40,0.08); color: var(--status-amber); }
.fm-debt-age--old { background: rgba(184,64,64,0.08); color: var(--status-red); }

/* ============================================================
   TIMESTAMP — Feature spotlight
   ============================================================ */
.timestamp-section {
  background: var(--paper-deep);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
/* Faint leaf-vein texture */
.timestamp-section::before {
  content: '';
  position: absolute;
  top: -60%; right: -20%;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(45,90,61,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.ts-content .label { margin-bottom: 20px; }
.ts-content h2 { margin-bottom: 22px; }
.ts-content p  { margin-bottom: 32px; max-width: 450px; }
.ts-points { display: flex; flex-direction: column; gap: 22px; margin-bottom: 40px; }
.ts-point { display: flex; gap: 18px; align-items: flex-start; }
.ts-point__icon {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ts-point h4 { font-size: 15px; margin-bottom: 5px; }
.ts-point p  { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; max-width: none; }

/* Timestamp activity panel */
.ts-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.ts-panel-header {
  background: var(--paper-warm);
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.tsp-title { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.tsp-live {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--green);
  background: var(--green-light);
  padding: 3px 8px; border-radius: 100px;
  border: 1px solid rgba(45,90,61,0.18);
}
.tsp-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: breathe 2.5s infinite; }

.ts-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ts-log {
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.ts-log-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.ts-log-row:last-child { border-bottom: none; }
.ts-log-time { font-family: var(--font-mono); font-size: 10px; color: var(--status-blue); min-width: 44px; flex-shrink: 0; }
.ts-log-action { font-size: 11px; font-weight: 600; color: var(--ink-mid); }
.ts-log-detail { font-size: 10px; color: var(--ink-dim); margin-top: 1px; }
.ts-log-amount { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--green); flex-shrink: 0; }

.ts-totals {
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  padding: 14px;
  border: 1px solid var(--border-soft);
  display: flex; gap: 14px;
}
.ts-total-item { flex: 1; text-align: center; }
.ts-total-lbl { font-size: 9px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; font-family: var(--font-mono); }
.ts-total-val { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.ts-total-val--green { color: var(--green); }
.ts-total-val--red   { color: var(--status-red); }
.ts-total-val--blue  { color: var(--status-blue); }
.ts-total-div { width: 1px; background: var(--border-soft); align-self: stretch; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.hiw { background: var(--paper-warm); }

.steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 48px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 34px;
  left: calc(16.66% + 20px);
  right: calc(16.66% + 20px);
  height: 1px;
  background: var(--border);
}

.step { text-align: center; padding: 0 16px; }
.step__num {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  margin: 0 auto 24px;
  position: relative; z-index: 1;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  color: var(--ink);
  transition: all var(--t);
}
.step:hover .step__num {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: var(--sh-green);
  transform: scale(1.06);
}
.step h3 { font-size: 20px; margin-bottom: 14px; }
.step p  { font-size: 15px; line-height: 1.68; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials { background: var(--paper); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}

.testi-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--sh-xs);
  transition: all var(--t);
  display: flex; flex-direction: column;
  position: relative;
}
.testi-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }

.testi-card__quote-mark {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.6;
  color: var(--green);
  opacity: 0.18;
  margin-bottom: 20px;
  font-weight: 700;
  display: block;
}

.testi-card__outcome {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}
.testi-card__outcome span { color: var(--green); }

.testi-card__body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin-bottom: 28px;
  flex: 1;
}

.testi-card__author { display: flex; align-items: center; gap: 14px; }
.testi-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-light);
  border: 2px solid rgba(45,90,61,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--green);
  flex-shrink: 0;
}
.testi-card__name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.testi-card__lounge { font-size: 12px; color: var(--ink-dim); }

/* Testimonial featured — spans context */
.testi-card--featured {
  background: var(--green);
  border-color: var(--green);
}
.testi-card--featured .testi-card__quote-mark { color: var(--white); opacity: 0.2; }
.testi-card--featured .testi-card__outcome { color: var(--white); }
.testi-card--featured .testi-card__outcome span { color: rgba(255,255,255,0.7); }
.testi-card--featured .testi-card__body { color: rgba(255,255,255,0.75); }
.testi-card--featured .testi-card__name { color: var(--white); }
.testi-card--featured .testi-card__lounge { color: rgba(255,255,255,0.6); }
.testi-card--featured .testi-card__avatar {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
  color: var(--white);
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing { background: var(--paper-warm); }

.pricing-banner-wrap { text-align: center; margin-bottom: 52px; }
.pricing-setup-note {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 24px;
  font-size: 15px;
  color: var(--ink-soft);
  box-shadow: var(--sh-xs);
}
.pricing-setup-note strong { color: var(--ink); }

.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: start; margin-bottom: 56px; }

.p-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 38px 32px;
  position: relative;
  transition: all var(--t);
  box-shadow: var(--sh-xs);
}
.p-card:hover { box-shadow: var(--sh-md); transform: translateY(-4px); }

.p-card--featured {
  border-color: var(--green);
  box-shadow: var(--sh-green);
  transform: scale(1.02);
}
.p-card--featured:hover { transform: scale(1.02) translateY(-4px); }

.p-badge {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--green); color: var(--white);
  font-size: 10px; font-weight: 600;
  padding: 4px 18px; border-radius: 100px;
  letter-spacing: 1.5px; text-transform: uppercase;
  white-space: nowrap; font-family: var(--font-body);
}

.p-card__tier {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--ink-dim); margin-bottom: 18px;
  font-family: var(--font-body);
}

.p-card__price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 6px;
}
.p-card__currency { font-size: 18px; font-weight: 600; color: var(--ink-soft); font-family: var(--font-body); }
.p-card__amount {
  font-family: var(--font-display);
  font-size: 48px; font-weight: 600;
  color: var(--ink); letter-spacing: -2px; line-height: 1;
}
.p-card__period { font-size: 14px; color: var(--ink-dim); }

.p-card__tagline { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); margin-bottom: 22px; }
.p-card__desc {
  font-size: 14px; color: var(--ink-soft); line-height: 1.65;
  padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); margin-bottom: 22px;
}

.p-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.p-feature {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--ink-mid); font-weight: 400; line-height: 1.45;
}
.p-feature::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; font-size: 12px; margin-top: 1px; }
.p-feature--highlight { color: var(--green); font-weight: 500; }
.p-feature--highlight::before { display: none; }

.p-caveats { margin-bottom: 24px; }
.p-caveat { font-size: 12px; color: var(--ink-ghost); margin-bottom: 5px; padding-left: 14px; position: relative; }
.p-caveat::before { content: '·'; position: absolute; left: 4px; }

/* Comparison table */
.pricing-compare { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white); box-shadow: var(--sh-xs); }
.p-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.p-compare-table thead tr { background: var(--paper-warm); border-bottom: 1px solid var(--border); }
.p-compare-table th { padding: 16px 20px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; }
.p-compare-table th:first-child { text-align: left; }
.p-compare-table th.featured { color: var(--green); }
.p-compare-table td { padding: 13px 20px; text-align: center; color: var(--ink-soft); border-bottom: 1px solid var(--border-soft); }
.p-compare-table td:first-child { text-align: left; font-weight: 500; color: var(--ink); }
.p-compare-table tr:last-child td { border-bottom: none; }
.p-compare-table td.featured { color: var(--green); font-weight: 600; background: rgba(45,90,61,0.03); }
.p-compare-table td.yes { color: var(--green); font-weight: 600; }
.p-compare-table td.no  { color: var(--ink-ghost); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: var(--paper); }

.faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }
.faq-intro h2 { margin-bottom: 18px; }
.faq-intro p  { margin-bottom: 32px; }

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.faq-item.active { border-color: rgba(45,90,61,0.3); box-shadow: var(--sh-xs); }

.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  cursor: pointer; font-size: 15px; font-weight: 500;
  color: var(--ink);
  transition: background var(--t);
  width: 100%; text-align: left; border: none;
  background: transparent; font-family: var(--font-body); line-height: 1.4;
}
.faq-question:hover { background: var(--paper-warm); }

.faq-icon {
  width: 26px; height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--ink-soft); font-size: 14px;
  transition: all var(--t);
}
.faq-item.active .faq-icon {
  background: var(--green); border-color: var(--green);
  color: var(--white); transform: rotate(45deg);
}

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-answer { max-height: 400px; }
.faq-answer p { padding: 0 22px 20px; font-size: 15px; line-height: 1.72; color: var(--ink-soft); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: var(--section-pad) 0;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(45,90,61,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.final-cta::after {
  content: '';
  position: absolute;
  bottom: -20%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(45,90,61,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 1; text-align: center; }
.final-cta .label { color: rgba(255,255,255,0.45); }
.final-cta .label::before { background: rgba(255,255,255,0.35); }
.final-cta h2 { color: var(--white); font-size: clamp(34px,4.5vw,58px); margin-bottom: 20px; }
.final-cta p  { font-size: 19px; max-width: 500px; margin: 0 auto 44px; color: rgba(255,255,255,0.55); }

.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.cta-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; margin-top: 60px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.cta-stat { text-align: center; }
.cta-stat__num {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 600;
  color: var(--white); letter-spacing: -0.8px;
  line-height: 1; margin-bottom: 6px;
}
.cta-stat__lbl { font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 500; letter-spacing: 0.5px; }
.cta-stat-div { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #0f0d0a;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 72px 0 32px;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }

.footer-brand__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-bottom: 18px; }
.footer-brand__logo-mark { width: 34px; height: 34px; background: var(--green); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; }
.footer-brand__logo-text { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--white); }
.footer-brand p { font-size: 14px; line-height: 1.68; margin-bottom: 22px; max-width: 250px; color: rgba(255,255,255,0.38); }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 34px; height: 34px; background: rgba(255,255,255,0.06); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none; transition: background var(--t); }
.footer-social a:hover { background: rgba(255,255,255,0.12); }
.footer-col h4 { font-family: var(--font-body); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.8px; color: rgba(255,255,255,0.3); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 14px; color: rgba(255,255,255,0.42); text-decoration: none; transition: color var(--t); }
.footer-col ul li a:hover { color: rgba(255,255,255,0.82); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.22); margin: 0; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.22); text-decoration: none; transition: color var(--t); }
.footer-bottom-links a:hover { color: rgba(255,255,255,0.6); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(26,23,20,0.7); backdrop-filter: blur(6px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 44px; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; position: relative; transform: translateY(20px) scale(0.98); transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1); box-shadow: var(--sh-xl); }
.modal-overlay.active .modal { transform: translateY(0) scale(1); }
.modal__close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; background: var(--paper-warm); border: 1px solid var(--border-soft); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); transition: all var(--t); }
.modal__close:hover { background: var(--paper-deep); color: var(--ink); }
.modal__header { text-align: center; margin-bottom: 32px; }
.modal__icon { font-size: 36px; margin-bottom: 12px; display: block; }
.modal__header h2 { font-size: 26px; margin-bottom: 10px; }
.modal__header p  { font-size: 15px; color: var(--ink-soft); }
.modal__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-mid); margin-bottom: 7px; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 1px; }
.form-label span { color: var(--status-red); }
.form-control { width: 100%; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--paper-warm); font-family: var(--font-body); font-size: 15px; color: var(--ink); transition: border-color var(--t); outline: none; }
.form-control:focus { border-color: var(--green); background: var(--white); box-shadow: 0 0 0 3px rgba(45,90,61,0.08); }
.form-control::placeholder { color: var(--ink-ghost); }
select.form-control { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l3 3 3-3' stroke='%239e9690' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; appearance: none; }
textarea.form-control { resize: vertical; min-height: 100px; }
.form-message { padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; margin-top: 14px; display: none; }
.form-message--success { background: var(--green-light); color: var(--green); border: 1px solid rgba(45,90,61,0.2); }
.form-message--error   { background: rgba(184,64,64,0.07); color: var(--status-red); border: 1px solid rgba(184,64,64,0.2); }
.modal__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-dim); font-size: 12px; }
.modal__divider::before, .modal__divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }

/* ============================================================
   UTILITIES
   ============================================================ */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--green); transform-origin: left; transform: scaleX(0); z-index: 10000; transition: none; }
.scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.3; pointer-events: none; }
.scroll-indicator__line { width: 1px; height: 42px; background: linear-gradient(to bottom, transparent, var(--ink-ghost)); }
.scroll-indicator__dot  { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-ghost); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.float-cta { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(80px); z-index: 800; opacity: 0; transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease; pointer-events: none; display: none; }
.float-cta.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
@media (max-width: 768px) { .float-cta { display: block; } }
.float-cta .btn { box-shadow: 0 8px 32px rgba(45,90,61,0.32); }

.cta-strip { text-align: center; padding: 52px 0 0; }
.cta-strip p { font-size: 17px; margin-bottom: 22px; color: var(--ink-soft); }

.sticky-wa { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 54px; height: 54px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.38); text-decoration: none; transition: all var(--t); }
.sticky-wa:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37,211,102,0.46); }
.sticky-wa__tooltip { position: absolute; right: 64px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 500; padding: 7px 13px; border-radius: var(--r-sm); white-space: nowrap; opacity: 0; transform: translateX(8px); transition: all var(--t); pointer-events: none; }
.sticky-wa:hover .sticky-wa__tooltip { opacity: 1; transform: translateX(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-pad: 88px; }
  .hero .container       { grid-template-columns: 1fr; gap: 60px; }
  .hero__visual          { order: -1; }
  .phone-wrap            { max-width: 250px; }
  .float-card            { display: none; }
  .feat-block .container { grid-template-columns: 1fr; gap: 44px; }
  .feat-block--flip .container { direction: ltr; }
  .reframe-grid          { grid-template-columns: 1fr; }
  .pricing-grid          { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto 56px; }
  .p-card--featured      { transform: scale(1); }
  .ts-grid               { grid-template-columns: 1fr; gap: 52px; }
  .faq-grid              { grid-template-columns: 1fr; }
  .solution-points       { grid-template-columns: 1fr; }
  .dash-stats            { grid-template-columns: repeat(2,1fr); }
  .dash-row              { grid-template-columns: 1fr; }
  .footer-grid           { grid-template-columns: 1fr 1fr; gap: 36px; }
  .testimonials-grid     { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 768px) {
  :root { --section-pad: 68px; --pad: 20px; }
  .site-nav, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
  .hero h1 { letter-spacing: -0.5px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__trust { flex-wrap: wrap; gap: 18px; }
  .hero__trust-div { display: none; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 300px; justify-content: center; }
  .cta-stats { gap: 24px; }
  .modal__form-row { grid-template-columns: 1fr; }
  .modal { padding: 30px 22px; }
  .testimonials-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  h1 { letter-spacing: -0.3px; }
  .btn { font-size: 14px; padding: 14px 24px; }
  .p-card { padding: 28px 22px; }
}

/* ============================================================
   EXTENSION — v5  (desktop hero · dark mockups · LP · modal)
   All new rules. No !important overrides of base classes.
   Dark theme applied via .dark-mock wrapper class only.
   ============================================================ */

/* ── Reveal fix: CSS also responds to .visible (added by main.js)
      and .revealed (added by inline script) ── */
.reveal.visible,
.reveal.revealed {
  opacity: 1;
  transform: none !important;
}

/* ============================================================
   DESKTOP HERO — monitor frame
   ============================================================ */

.desktop-wrap {
  position: relative;
  /* Bug Fix 1: Remove auto-centering that created the right gap.
     Let it fill the grid column naturally, aligned right. */
  max-width: 600px;
  margin: 0 0 0 auto; /* right-align within the visual column */
  width: 100%;
}

.desktop-wrap .float-card--shift   { top: -4%;  right: -70px; }
.desktop-wrap .float-card--revenue { bottom: 8%; left: -70px; }
.desktop-wrap .float-card--balance { bottom: 34%; right: -66px; }

.desktop-frame {
  filter: drop-shadow(0 24px 64px rgba(0,0,0,0.28));
}

.desktop-screen {
  background: #0f1117;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.09);
  display: flex;
  flex-direction: column;
  min-height: 340px;
}

.desktop-stand {
  width: 60px;
  height: 26px;
  background: #1a1e2a;
  margin: 0 auto;
  border-left: 1.5px solid rgba(255,255,255,0.06);
  border-right: 1.5px solid rgba(255,255,255,0.06);
}

.desktop-base {
  width: 120px;
  height: 8px;
  background: #1a1e2a;
  margin: 0 auto;
  border-radius: 0 0 8px 8px;
  border: 1.5px solid rgba(255,255,255,0.06);
  border-top: none;
}

/* Dark nav bar */
.dui-nav {
  background: #161b27;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.dui-nav__brand {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: #e8f0fe;
  white-space: nowrap;
}
.dui-nav__items { display: flex; gap: 2px; flex: 1; }
.dui-nav__item {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-body);
}
.dui-nav__item--active { color: #e8f0fe; background: rgba(255,255,255,0.07); }
.dui-nav__shift {
  font-size: 9px;
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(74,222,128,0.1);
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid rgba(74,222,128,0.2);
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
}
.dui-shift-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink 2s infinite;
}

/* Dark stat cards row */
.dui-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  padding: 10px 12px 6px;
  flex-shrink: 0;
}
.dui-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 8px 10px;
  border-top: 2px solid transparent;
}
.dui-stat--green  { border-top-color: #4ade80; }
.dui-stat--blue   { border-top-color: #60a5fa; }
.dui-stat--amber  { border-top-color: #fbbf24; }
.dui-stat--purple { border-top-color: #a78bfa; }
.dui-stat__lbl {
  font-size: 8px;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
  margin-bottom: 3px;
}
.dui-stat__val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #e8f0fe;
}
.dui-stat__chg { font-size: 8px; color: rgba(255,255,255,0.3); margin-top: 2px; }

.dui-section-label {
  font-size: 9px;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 12px 2px;
  font-family: var(--font-body);
}

/* Dark console grid */
.dui-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  padding: 0 12px 12px;
  flex: 1;
}
.dui-console {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dui-console--active { background: rgba(96,165,250,0.07); border-color: rgba(96,165,250,0.2); }
.dui-console--free   { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.15); }
.dui-console--offline { opacity: 0.45; }
.dui-console__header { display: flex; align-items: center; justify-content: space-between; gap: 3px; margin-bottom: 2px; }
.dui-console__name { font-size: 8px; color: rgba(255,255,255,0.45); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.4px; }
.dui-badge { font-size: 8px; font-weight: 600; padding: 2px 5px; border-radius: 3px; font-family: var(--font-body); white-space: nowrap; }
.dui-badge--blue  { background: rgba(96,165,250,0.15); color: #93c5fd; }
.dui-badge--green { background: rgba(74,222,128,0.12); color: #86efac; }
.dui-badge--grey  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.28); }
.dui-console__game { font-size: 8px; color: rgba(255,255,255,0.3); font-family: var(--font-body); }
.dui-timer {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: #60a5fa;
  letter-spacing: 0.5px;
  margin-top: auto;
  padding-top: 4px;
}
.dui-timer--dim { color: rgba(255,255,255,0.18); font-size: 11px; }
.dui-console__cost { font-size: 7px; color: rgba(255,255,255,0.18); font-family: var(--font-body); }

/* ============================================================
   FEATURE MOCKUPS — dark theme via .dark-mock on feat-mockup
   These override ONLY when .dark-mock is present — no conflict
   with original .feat-mockup light styles
   ============================================================ */

.feat-mockup.dark-mock {
  background: #0f1117;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 16px 48px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04);
}
.feat-mockup.dark-mock .fm-header {
  background: #161b27;
  border-bottom-color: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.45);
}
.feat-mockup.dark-mock .fm-dot { background: #4ade80; }
.feat-mockup.dark-mock .fm-body { background: #0f1117; }

/* Console cards inside dark mock */
.feat-mockup.dark-mock .fm-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid rgba(255,255,255,0.12);
}
.feat-mockup.dark-mock .fm-card--active {
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.18);
  border-left-color: #60a5fa;
}
.feat-mockup.dark-mock .fm-card--free {
  background: rgba(74,222,128,0.06);
  border-color: rgba(74,222,128,0.15);
  border-left-color: #4ade80;
}
.feat-mockup.dark-mock .fm-card--offline { opacity: 0.4; }
.feat-mockup.dark-mock .fm-card__lbl { color: rgba(255,255,255,0.38); }

/* Badges */
.feat-mockup.dark-mock .fm-badge--blue  { background: rgba(96,165,250,0.15); color: #93c5fd; }
.feat-mockup.dark-mock .fm-badge--green { background: rgba(74,222,128,0.12); color: #86efac; }
.feat-mockup.dark-mock .fm-badge--grey  { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.28); }

.feat-mockup.dark-mock .fm-game { color: rgba(255,255,255,0.28); }

/* Timers */
.feat-mockup.dark-mock .fm-timer       { color: #60a5fa; }
.feat-mockup.dark-mock .fm-timer--dim  { color: rgba(255,255,255,0.2); }
.feat-mockup.dark-mock .fm-timer--green { color: #4ade80; }

/* Timestamp stamp lines (new in v5) */
.fm-stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.32);
  margin-top: 3px;
  letter-spacing: 0.2px;
}
.fm-stamp--dim { color: rgba(255,255,255,0.15); }

/* ============================================================
   SHIFT MOCKUP — fmsb-* (built for dark-mock context)
   ============================================================ */

.fm-shift-body { padding: 12px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }

.fmsb-summary { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.fmsb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 9px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
}
.fmsb-row--deduct { background: rgba(239,68,68,0.07); }
.fmsb-row--float  { background: rgba(74,222,128,0.06); }
.fmsb-lbl { font-size: 10px; color: rgba(255,255,255,0.5); font-family: var(--font-body); }
.fmsb-val { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); }
.fmsb-val--red { color: #fca5a5; }

.fmsb-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 7px 0; }

.fmsb-compare { display: flex; flex-direction: column; gap: 3px; }
.fmsb-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 9px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
}
.fmsb-compare-lbl { font-size: 10px; color: rgba(255,255,255,0.45); font-family: var(--font-body); }
.fmsb-compare-val { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #e8f0fe; }

/* Banners inside dark mock */
.feat-mockup.dark-mock .fm-banner--green {
  background: rgba(74,222,128,0.1);
  border-color: rgba(74,222,128,0.2);
  color: #86efac;
}
.feat-mockup.dark-mock .fm-banner--amber {
  background: rgba(251,191,36,0.1);
  border-color: rgba(251,191,36,0.2);
  color: #fcd34d;
}

/* ============================================================
   OUTSTANDING BALANCES MOCKUP — fmdb-* (dark-mock context)
   ============================================================ */

.fm-debt-body { padding: 0 !important; }

.fmdb-list { display: flex; flex-direction: column; }
.fmdb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 12px;
}
.fmdb-row--alert { background: rgba(239,68,68,0.05); }
.fmdb-left  { flex: 1; min-width: 0; }
.fmdb-right { text-align: right; flex-shrink: 0; }
.fmdb-name  { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.88); font-family: var(--font-body); margin-bottom: 2px; }
.fmdb-meta  { font-size: 9px; color: rgba(255,255,255,0.32); font-family: var(--font-body); }
.fmdb-amt   { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.82); margin-bottom: 3px; }
.fmdb-amt--red { color: #fca5a5; }
.fmdb-age   { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 100px; font-family: var(--font-body); display: inline-block; }
.fmdb-age--new { background: rgba(74,222,128,0.15); color: #86efac; }
.fmdb-age--mid { background: rgba(251,191,36,0.15); color: #fcd34d; }
.fmdb-age--old { background: rgba(239,68,68,0.15);  color: #fca5a5; }

.fmdb-footer { padding: 10px 14px; background: rgba(0,0,0,0.18); }
.fmdb-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fmdb-total-lbl { font-size: 9px; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.8px; font-family: var(--font-body); }
.fmdb-total-val { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fbbf24; }
.fmdb-alert { font-size: 10px; color: #fca5a5; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); border-radius: 4px; padding: 5px 9px; font-family: var(--font-body); }

/* ============================================================
   SYSTEM DASHBOARD — dark override (The System section)
   ============================================================ */

.dash-preview {
  background: #0f1117;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 20px 56px rgba(0,0,0,0.28);
}
.dash-topbar {
  background: #161b27;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dash-topbar__title { color: rgba(255,255,255,0.65); }
.dash-topbar__date  { color: rgba(255,255,255,0.28); }
.dash-dot--r { background: #ff5f57; }
.dash-dot--a { background: #ffbd2e; }
.dash-dot--g { background: #28c840; }
.dash-body   { background: #0f1117; padding: 14px; }
.d-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.d-stat__lbl { color: rgba(255,255,255,0.32); }
.d-stat__val { color: #e8f0fe; }
.d-stat__chg { color: rgba(255,255,255,0.28); }
.d-panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.d-panel__title { color: rgba(255,255,255,0.38); }
.d-bar--g { background: #4ade80; }
.d-bar--a { background: #60a5fa; }
.d-console-row__name { color: rgba(255,255,255,0.45); }
.d-console-row__bar  { background: rgba(255,255,255,0.07); }
.d-console-row__fill { background: linear-gradient(90deg,#60a5fa,#818cf8); }
.d-console-row__val  { color: rgba(255,255,255,0.55); }

/* ============================================================
   LANDING PAGE — text-only redesign
   ============================================================ */

.landing-page-feature {
  background: var(--paper-warm);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.lp-header {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}
.lp-lead { font-size: 18px; color: var(--ink-mid); line-height: 1.7; margin-top: 18px; }

.lp-cards {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  margin-bottom: 44px;
}
.lp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  transition: box-shadow var(--t), transform var(--t);
}
.lp-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.lp-card__icon { font-size: 22px; margin-bottom: 12px; }
.lp-card h4 { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.lp-card p  { font-size: 13px; color: var(--ink-soft); line-height: 1.58; }

.lp-plan-strip {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.lp-plan-item   { flex: 1; padding: 18px 22px; display: flex; flex-direction: column; gap: 5px; }
.lp-plan-divider { width: 1px; background: var(--border-soft); flex-shrink: 0; }
.lp-plan-badge  { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px; letter-spacing: 0.3px; width: fit-content; }
.lp-plan-badge--green  { background: var(--green-light); color: var(--green); border: 1px solid rgba(45,90,61,0.15); }
.lp-plan-badge--outline { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); }
.lp-plan-badge--muted  { background: var(--paper-deep); color: var(--ink-dim); border: 1px solid var(--border-soft); }
.lp-plan-desc   { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }

/* ============================================================
   WIZARD MODAL
   ============================================================ */

.modal--wizard {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}

.wiz-progress {
  padding: 18px 30px 14px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--border-soft);
}
.wiz-progress__track {
  height: 3px;
  background: var(--border);
  border-radius: 100px;
  margin-bottom: 13px;
  overflow: hidden;
}
.wiz-progress__fill {
  height: 100%;
  background: var(--green);
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  width: 0%;
}
.wiz-steps { display: flex; gap: 8px; align-items: center; }
.wiz-step-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  font-family: var(--font-body);
  background: var(--border);
  color: var(--ink-dim);
  transition: background var(--t), color var(--t);
  flex-shrink: 0;
}
.wiz-step-dot--active { background: var(--green); color: var(--white); }
.wiz-step-dot--done   { background: var(--green-light); color: var(--green); }

.wiz-panel .modal__header {
  padding: 22px 30px 18px;
  border-bottom: 1px solid var(--border-soft);
  margin: 0;
}
.wiz-body {
  padding: 22px 30px;
  max-height: 52vh;
  overflow-y: auto;
}
.wiz-footer {
  padding: 18px 30px;
  border-top: 1px solid var(--border-soft);
  background: var(--paper-warm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wiz-footer--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  padding: 11px 18px;
  font-size: 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  transition: background var(--t);
}
.btn--ghost:hover { background: var(--paper-deep); }
.wiz-back-btn { align-self: center; margin-top: 2px; }

/* Plan cards */
.plan-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.plan-card {
  position: relative;
  cursor: pointer;
  border-radius: var(--r-md);
  border: 2px solid var(--border);
  transition: border-color var(--t), box-shadow var(--t);
  display: block;
}
.plan-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.plan-card:hover     { border-color: var(--green-mid); }
.plan-card--selected { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-light); }
.plan-card--popular  { border-color: var(--green); }

.plan-card__badge {
  position: absolute;
  top: -1px; right: 14px;
  background: var(--green);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 0 0 6px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
}
.plan-card__inner { display: flex; align-items: center; gap: 14px; padding: 13px 15px; }
.plan-card__head  { flex: 0 0 auto; min-width: 145px; }
.plan-card__name  { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 3px; font-family: var(--font-body); }
.plan-card__price { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1; }
.plan-card__price span { font-size: 13px; color: var(--ink-soft); }
.plan-card__usd   { font-size: 10px; color: var(--ink-dim); font-family: var(--font-mono); margin-top: 2px; }
.plan-card__feats { list-style: none; flex: 1; border-left: 1px solid var(--border-soft); padding-left: 14px; display: flex; flex-direction: column; gap: 3px; }
.plan-card__feats li { font-size: 12px; color: var(--ink-soft); font-family: var(--font-body); line-height: 1.4; }
.plan-card__feats li::before { content: "· "; color: var(--green); font-weight: 700; }

/* Add-on rows */
.addon-row {
  padding: 11px 12px;
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 4px;
}
.addon-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.addon-toggle input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--green); flex-shrink: 0; cursor: pointer; }
.addon-toggle__body { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 8px; }
.addon-toggle__title { font-size: 13px; font-weight: 600; color: var(--ink); display: block; font-family: var(--font-body); }
.addon-toggle__desc  { font-size: 11px; color: var(--ink-soft); font-family: var(--font-body); }
.addon-toggle__price { text-align: right; flex-shrink: 0; }
.addon-price-strike  { font-size: 10px; color: var(--ink-dim); text-decoration: line-through; display: block; font-family: var(--font-mono); }
.addon-price-final   { font-size: 14px; font-weight: 700; color: var(--ink); font-family: var(--font-mono); display: block; }
.addon-price-tag     { display: inline-block; font-size: 9px; font-weight: 700; background: var(--green-light); color: var(--green); padding: 2px 6px; border-radius: 3px; font-family: var(--font-body); margin-top: 2px; }
.addon-row--included { border-color: rgba(45,90,61,0.2); background: var(--green-light); }
.addon-included { display: flex; align-items: flex-start; gap: 10px; }
.addon-included__icon { width: 20px; height: 20px; background: var(--green); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.addon-included__title { font-size: 13px; font-weight: 600; color: var(--green); font-family: var(--font-body); margin-bottom: 2px; }
.addon-included__desc  { font-size: 11px; color: var(--ink-mid); font-family: var(--font-body); }

/* Step 3 recap */
.wiz-recap { background: var(--paper-warm); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; margin-bottom: 18px; }
.wiz-recap__row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; font-family: var(--font-body); }
.wiz-recap__row:last-child { border-bottom: none; }
.wiz-recap__row span   { color: var(--ink-soft); }
.wiz-recap__row strong { color: var(--ink); text-align: right; }

/* ============================================================
   RESPONSIVE — new elements
   ============================================================ */

@media (max-width: 1024px) {
  .desktop-wrap             { max-width: 420px; }
  .desktop-wrap .float-card { display: none; }
  .dui-stats                { grid-template-columns: repeat(2,1fr); }
  .dui-grid                 { grid-template-columns: repeat(2,1fr); }
  .lp-cards                 { grid-template-columns: repeat(2,1fr); }
  .lp-plan-strip            { flex-direction: column; }
  .lp-plan-divider          { width: 100%; height: 1px; }
}

@media (max-width: 768px) {
  .desktop-wrap { max-width: 340px; }
}

@media (max-width: 600px) {
  .wiz-body               { max-height: 55vh; padding: 18px 20px; }
  .wiz-panel .modal__header { padding: 18px 20px; }
  .wiz-footer             { padding: 16px 20px; }
  .wiz-progress           { padding: 14px 20px 12px; }
  .plan-card__inner       { flex-direction: column; align-items: flex-start; gap: 9px; }
  .plan-card__feats       { border-left: none; padding-left: 0; border-top: 1px solid var(--border-soft); padding-top: 7px; }
  .addon-toggle__body     { flex-direction: column; align-items: flex-start; }
  .addon-toggle__price    { text-align: left; }
  .lp-cards               { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .desktop-wrap { max-width: 100%; }
  .dui-stats    { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   REPORTS MOCKUP — fm-report-* (inside dark-mock context)
   ============================================================ */

.fm-report-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px !important;
}

.fm-report-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.fm-report-kpi {
  border-radius: 5px;
  padding: 10px 11px;
  border-top: 2px solid transparent;
}
.fm-report-kpi--green { background: rgba(74,222,128,0.07); border-color: #4ade80; }
.fm-report-kpi--blue  { background: rgba(96,165,250,0.07); border-color: #60a5fa; }

.fm-report-val {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: #4ade80;
  margin-top: 5px;
}
.fm-report-val--blue { color: #60a5fa; }

.fm-report-chart {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 5px;
  padding: 10px 11px;
}

.fm-report-chart-title {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: var(--font-body);
  margin-bottom: 8px;
}

.fm-report-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 52px;
  margin-bottom: 5px;
}

.fm-rbar {
  flex: 1;
  background: rgba(74,222,128,0.35);
  border-radius: 2px 2px 0 0;
  min-width: 8px;
}
.fm-rbar--hi { background: #4ade80; }

.fm-report-days {
  display: flex;
  justify-content: space-around;
}
.fm-report-days span {
  font-size: 8px;
  color: rgba(255,255,255,0.25);
  font-family: var(--font-body);
}

.fm-report-consoles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 2px;
}

.fm-report-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fm-report-row__name {
  font-size: 9px;
  color: rgba(255,255,255,0.42);
  font-family: var(--font-body);
  min-width: 68px;
}
.fm-report-row__bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
}
.fm-report-row__fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #60a5fa, #818cf8);
}
.fm-report-row__val {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.45);
}

/* ============================================================
   MOBILE RESPONSIVENESS — Comprehensive Fix
   Fixes: hero images, feature mockups, pricing banner,
   desktop hero mockup, all section layouts
   ============================================================ */

/* ── Shared: ensure images and mockups are fluid ── */
.feat-mockup,
.desktop-wrap,
.phone-wrap,
.dash-preview {
  width: 100%;
}

/* ── Pricing setup note — wrap properly on mobile ── */
.pricing-setup-note {
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding: 14px 18px;
}
.pricing-setup-fee {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
  box-shadow: var(--sh-xs);
  line-height: 1.6;
}
.setup-fee-icon { flex-shrink: 0; }
.setup-fee-desc { color: var(--ink-soft); }
.usd-note { color: var(--ink-dim); font-weight: 400; }
.p-card__usd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); margin-bottom: 6px; }
.p-feature--addon { color: var(--green-mid); font-style: italic; }

@media (max-width: 1100px) {
  /* Desktop hero — scale down gracefully */
  .desktop-wrap {
    max-width: 460px;
  }
  .dui-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dui-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  /* Feature mockups — ensure full width, min-height so content shows */
  .feat-mockup {
    min-height: 280px;
    width: 100%;
  }

  /* Desktop hero collapses cleanly */
  .desktop-wrap {
    max-width: 480px;
    margin: 0 auto;
  }

  /* lp-cards go 2-column on tablet */
  .lp-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* pricing-setup-note wraps */
  .pricing-setup-note {
    font-size: 14px;
  }
  .pricing-setup-fee {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  /* Hero: stack layout, visual first */
  .hero .container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero__content {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__visual {
    order: 1;
    width: 100%;
  }
  .hero__sub {
    max-width: 100%;
    text-align: center;
  }
  .hero__eyebrow {
    justify-content: center;
  }
  .hero__trust {
    justify-content: center;
  }

  /* Desktop hero visual: shrink monitor to fit */
  .desktop-wrap {
    max-width: 100%;
    padding: 0;
  }
  .desktop-screen {
    min-height: 220px;
  }
  .dui-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 8px 10px;
  }
  .dui-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 8px 8px 4px;
  }
  .dui-timer {
    font-size: 13px;
  }
  .dui-nav__items {
    display: none;
  }

  /* Feature blocks: full-width mockups */
  .feat-block .container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .feat-mockup {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 260px;
  }
  .feat-block--flip .container {
    direction: ltr;
  }

  /* Features section console grid — 2-col on mobile */
  .fm-console-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Timestamp section */
  .ts-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ts-visual {
    width: 100%;
  }

  /* Reframe grid — single column */
  .reframe-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .reframe-card {
    padding: 28px 24px;
  }

  /* Solution points — stack */
  .solution-points {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Dashboard: simplify */
  .dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-row {
    grid-template-columns: 1fr;
  }

  /* Landing page cards — 1 col */
  .lp-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lp-plan-strip {
    flex-direction: column;
    border-radius: var(--r-md);
  }
  .lp-plan-divider {
    width: 100%;
    height: 1px;
  }
  .lp-plan-item {
    padding: 16px 18px;
  }

  /* Pricing: full-width single col */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 16px;
  }
  .p-card--featured {
    transform: scale(1);
  }
  .pricing-setup-note {
    font-size: 13px;
    padding: 12px 16px;
    text-align: left;
    justify-content: flex-start;
  }
  .pricing-setup-fee {
    font-size: 13px;
  }

  /* Comparison table: scroll horizontally */
  .pricing-compare {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .p-compare-table {
    min-width: 480px;
  }

  /* FAQ */
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* Modal: full-width on small screens */
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }
  .modal {
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .modal--wizard {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .wiz-body {
    max-height: 45vh;
    overflow-y: auto;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Hero visual: ultra compact */
  .desktop-screen {
    min-height: 180px;
  }
  .dui-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    padding: 0 6px 8px;
  }
  .dui-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    padding: 6px 6px 3px;
  }
  .dui-stat__val {
    font-size: 11px;
  }
  .dui-timer {
    font-size: 12px;
  }
  .dui-console__name,
  .dui-console__game,
  .dui-console__cost {
    font-size: 7px;
  }
  .dui-badge {
    font-size: 7px;
    padding: 1px 4px;
  }

  /* Feature mockups: maintain ratio, scrollable if needed */
  .feat-mockup {
    aspect-ratio: 3 / 2;
    min-height: 220px;
  }

  /* Pricing setup note: wrap text neatly */
  .pricing-setup-note {
    display: block;
    text-align: left;
  }
  .pricing-setup-note br {
    display: none;
  }

  /* Pricing cards */
  .p-card {
    padding: 24px 18px;
  }
  .p-card__amount {
    font-size: 38px;
  }

  /* Footer: single column */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Reframe cards */
  .reframe-card {
    padding: 24px 20px;
  }
  .reframe-card__num {
    font-size: 38px;
  }

  /* Steps */
  .steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .steps::before {
    display: none;
  }

  /* Testimonials */
  .testi-card {
    padding: 28px 24px;
  }

  /* CTA stats */
  .cta-stats {
    gap: 20px;
    flex-wrap: wrap;
  }
  .cta-stat-div {
    display: none;
  }

  /* Modal: tighter */
  .modal {
    padding: 24px 16px;
  }
  .modal__form-row {
    grid-template-columns: 1fr;
  }
  .wiz-body {
    padding: 14px 16px;
    max-height: 50vh;
  }
  .wiz-footer {
    padding: 14px 16px;
  }
  .wiz-progress {
    padding: 14px 16px 12px;
  }
  .plan-card__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .plan-card__feats {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-soft);
    padding-top: 8px;
    width: 100%;
  }
  .plan-card__head {
    min-width: unset;
  }

  /* Section headers */
  .section__header {
    margin-bottom: 48px;
  }
  .section__header p {
    font-size: 16px;
  }
}

/* ── Extra: prevent horizontal overflow site-wide ── */
.container,
.hero .container,
.feat-block .container {
  overflow-x: hidden;
}


/* ============================================================
   WIZARD MODAL — v2  (replaces old wiz-* rules)
   Elegant, theme-matched, smooth slide transitions
   ============================================================ */

/* Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal card */
.wiz-modal {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 32px 80px rgba(26,23,20,0.22), 0 0 0 1px rgba(26,23,20,0.04);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.active .wiz-modal {
  transform: translateY(0) scale(1);
}

/* Close button */
.wiz-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-dim);
  transition: background var(--t), color var(--t), transform var(--t);
  z-index: 10;
  flex-shrink: 0;
}
.wiz-modal__close:hover { background: var(--paper-deep); color: var(--ink); transform: rotate(90deg); }
.wiz-modal__close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Header band */
.wiz-modal__head {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--border-soft);
  padding: 20px 24px 16px;
  flex-shrink: 0;
}
.wiz-brand {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 18px;
}
.wiz-brand__mark {
  width: 28px; height: 28px;
  background: var(--green);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wiz-brand__name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.2px;
}

/* Step indicator */
.wiz-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}
.wiz-stepper__step {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.wiz-stepper__num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper-deep);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  color: var(--ink-dim);
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.wiz-stepper__label {
  font-size: 12px; font-weight: 500;
  color: var(--ink-dim);
  font-family: var(--font-body);
  transition: color 0.3s ease;
  white-space: nowrap;
}
.wiz-stepper__line {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 10px;
  min-width: 20px;
}
.wiz-stepper__step--active .wiz-stepper__num {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(45,90,61,0.28);
}
.wiz-stepper__step--active .wiz-stepper__label { color: var(--ink); font-weight: 600; }
.wiz-stepper__step--done .wiz-stepper__num {
  background: rgba(45,90,61,0.1);
  border-color: rgba(45,90,61,0.25);
  color: var(--green);
}
.wiz-stepper__step--done .wiz-stepper__num::after { content: '✓'; font-size: 11px; }
.wiz-stepper__step--done .wiz-stepper__num { font-size: 0; }
.wiz-stepper__step--done .wiz-stepper__label { color: var(--green); }

/* Progress fill */
.wiz-modal__progress {
  height: 2px;
  background: var(--border-soft);
  flex-shrink: 0;
}
.wiz-modal__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  border-radius: 0 2px 2px 0;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panels wrapper */
.wiz-panels {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Individual panel */
.wiz-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.wiz-panel[hidden] { display: none; }

.wiz-panel__body {
  flex: 1;
  padding: 28px 28px 0;
  overflow-y: auto;
  min-height: 0;
}

.wiz-panel__intro { margin-bottom: 24px; }
.wiz-panel__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.4px;
  margin-bottom: 7px; line-height: 1.2;
}
.wiz-panel__sub {
  font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0;
}

.wiz-panel__foot {
  padding: 20px 28px 24px;
  background: var(--white);
  border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0;
}
.wiz-panel__foot--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.wiz-panel__assurance {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-dim);
  margin: 0; line-height: 1.4;
}

/* Fields */
.wiz-fields { display: flex; flex-direction: column; gap: 0; }
.wiz-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.wiz-field {
  margin-bottom: 16px;
  position: relative;
}
.wiz-field__label {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--ink-mid);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 7px;
  font-family: var(--font-body);
}
.wiz-field__label abbr { text-decoration: none; color: var(--status-red); }
.wiz-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-dim); font-size: 11px; }

.wiz-field__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--paper-warm);
  font-family: var(--font-body);
  font-size: 15px; color: var(--ink);
  outline: none;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  -webkit-appearance: none;
}
.wiz-field__input:focus {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(45,90,61,0.1);
}
.wiz-field__input::placeholder { color: var(--ink-ghost); }
.wiz-field__input--select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 8l3 3 3-3' stroke='%239e9690' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
}
.wiz-field__input--ta { resize: vertical; min-height: 88px; }

/* Error state */
.wiz-field--error .wiz-field__input {
  border-color: var(--status-red);
  background: rgba(184,64,64,0.03);
}
.wiz-field--error .wiz-field__input:focus {
  box-shadow: 0 0 0 3px rgba(184,64,64,0.1);
}
.wiz-field__err {
  display: block;
  font-size: 12px; color: var(--status-red);
  margin-top: 5px; min-height: 1em;
  font-family: var(--font-body);
}

/* Shake animation */
@keyframes wizShake {
  0%, 100% { transform: translateX(0); }
  18%  { transform: translateX(-5px); }
  36%  { transform: translateX(5px); }
  54%  { transform: translateX(-4px); }
  72%  { transform: translateX(3px); }
  90%  { transform: translateX(-2px); }
}
.wiz-shake { animation: wizShake 0.38s cubic-bezier(0.36,0.07,0.19,0.97); }

/* Plan cards */
.wiz-plans { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wiz-plan {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  position: relative;
  overflow: visible;
}
.wiz-plan:hover { border-color: var(--green-mid); background: var(--paper-warm); }
.wiz-plan--popular { border-color: rgba(45,90,61,0.4); }
.wiz-plan--selected {
  border-color: var(--green);
  background: rgba(45,90,61,0.03);
  box-shadow: 0 0 0 3px rgba(45,90,61,0.1);
}
.wiz-plan__badge {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--green); color: var(--white);
  font-size: 9px; font-weight: 700;
  padding: 3px 10px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: 0.8px;
  font-family: var(--font-body);
}
.wiz-plan__radio { position: absolute; opacity: 0; pointer-events: none; }
.wiz-plan__inner {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
}
.wiz-plan__check {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.22s ease;
  position: relative;
}
.wiz-plan--selected .wiz-plan__check {
  border-color: var(--green);
  background: var(--green);
}
.wiz-plan--selected .wiz-plan__check::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
}
.wiz-plan__info { flex: 1; min-width: 0; }
.wiz-plan__name {
  font-size: 14px; font-weight: 600;
  color: var(--ink); font-family: var(--font-body);
  margin-bottom: 3px;
}
.wiz-plan__feats {
  font-size: 11px; color: var(--ink-dim);
  font-family: var(--font-body); line-height: 1.4;
}
.wiz-plan__price { text-align: right; flex-shrink: 0; }
.wiz-plan__amount {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.3px; line-height: 1.2;
}
.wiz-plan__amount span { font-size: 12px; color: var(--ink-dim); font-family: var(--font-body); }
.wiz-plan__usd { font-size: 10px; color: var(--ink-dim); font-family: var(--font-mono); }

.wiz-plan__err {
  display: block;
  font-size: 12px; color: var(--status-red);
  margin-bottom: 10px; min-height: 1em;
  font-family: var(--font-body);
  opacity: 0; transition: opacity 0.2s ease;
}
.wiz-plan__err--visible { opacity: 1; }

/* Add-on row */
.wiz-addon {
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.wiz-addon__toggle {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.wiz-addon__cb { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
.wiz-addon__box { /* fallback, not used directly */ }
.wiz-addon__text { flex: 1; }
.wiz-addon__name { display: block; font-size: 13px; font-weight: 600; color: var(--ink); font-family: var(--font-body); }
.wiz-addon__desc { display: block; font-size: 11px; color: var(--ink-dim); font-family: var(--font-body); }
.wiz-addon__price { text-align: right; flex-shrink: 0; }
.wiz-addon__strike { font-size: 10px; color: var(--ink-ghost); font-family: var(--font-mono); text-decoration: line-through; display: block; }
.wiz-addon__final { font-size: 14px; font-weight: 700; color: var(--ink); font-family: var(--font-mono); display: block; }
.wiz-addon__tag { display: inline-block; font-size: 9px; font-weight: 700; background: var(--green-light); color: var(--green); padding: 2px 6px; border-radius: 3px; font-family: var(--font-body); margin-top: 2px; font-style: normal; }

/* Included banner */
.wiz-included {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--green-light);
  border: 1px solid rgba(45,90,61,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px; color: var(--ink-mid);
  font-family: var(--font-body);
  margin-bottom: 10px;
  line-height: 1.5;
}
.wiz-included[hidden],
.wiz-addon[hidden] { display: none !important; }
.wiz-included svg { flex-shrink: 0; margin-top: 1px; }
.wiz-included strong { color: var(--green); }

/* Summary card */
.wiz-summary {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.wiz-summary__row {
  display: flex; align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-body);
}
.wiz-summary__row:last-child { border-bottom: none; }
.wiz-summary__key {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-dim); flex-shrink: 0;
}
.wiz-summary__val {
  font-size: 14px; color: var(--ink);
  font-weight: 500; text-align: right;
}
.wiz-summary__tag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 100px;
  background: var(--paper-deep); color: var(--ink-soft);
  margin-left: 6px; font-family: var(--font-body);
  font-style: normal; vertical-align: middle;
}
.wiz-summary__tag--green { background: var(--green-light); color: var(--green); }

/* Buttons */
.wiz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  padding: 13px 24px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.24s ease;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.wiz-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.wiz-btn--primary {
  background: var(--green); color: var(--white); border-color: var(--green);
  width: 100%;
  box-shadow: 0 4px 14px rgba(45,90,61,0.22);
}
.wiz-btn--primary:hover {
  background: var(--green-mid); border-color: var(--green-mid);
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(45,90,61,0.3);
}
.wiz-btn--primary:active { transform: translateY(0); }

.wiz-btn--ghost {
  background: transparent; color: var(--ink-soft); border-color: var(--border);
  font-size: 13px; padding: 11px 18px;
}
.wiz-btn--ghost:hover { background: var(--paper-warm); color: var(--ink); }

.wiz-btn--wa {
  background: #25D366 !important; color: #ffffff !important; border-color: #25D366 !important;
  width: 100%;
  box-shadow: 0 4px 14px rgba(37,211,102,0.25);
  font-size: 15px; font-weight: 600;
  position: relative; z-index: 2;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.wiz-btn--wa svg { fill: #ffffff !important; color: #ffffff !important; }
.wiz-btn--wa:hover {
  background: #1fb958 !important; border-color: #1fb958 !important;
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,0.35);
}

/* ── Mobile responsiveness for wizard ── */
@media (max-width: 600px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .wiz-modal {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    transform: translateY(40px) scale(1);
  }
  .modal-overlay.active .wiz-modal { transform: translateY(0) scale(1); }
  .wiz-modal__head { padding: 18px 20px 14px; }
  .wiz-brand { margin-bottom: 14px; }
  .wiz-stepper__label { display: none; }
  .wiz-panel__body { padding: 18px 16px 0; }
  .wiz-panel__foot { padding: 14px 16px 24px; flex-shrink: 0; }
  .wiz-panel__foot--row { gap: 10px; }
  .wiz-row { grid-template-columns: 1fr; gap: 0; }
  .wiz-btn { font-size: 14px; padding: 12px 18px; }
  .wiz-btn--wa { font-size: 14px !important; padding: 13px 20px; width: 100% !important; }
  .wiz-plan__inner { gap: 10px; }
  .wiz-plan__feats { font-size: 12px; }
}

@media (max-width: 380px) {
  .wiz-plan__inner { flex-wrap: wrap; }
  .wiz-plan__price { text-align: left; }
  .wiz-stepper__line { min-width: 12px; margin: 0 6px; }
}

/* ── Live timer pulse on active cards ── */
.fm-timer.is-live { position: relative; }

/* ── Demo Credentials Panel ── */
.demo-credentials {
  margin-top: 48px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.demo-credentials__header {
  text-align: center;
  margin-bottom: 32px;
}
.demo-credentials__badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid rgba(45,90,61,0.15);
  margin-bottom: 12px;
}
.demo-credentials__intro {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}
.demo-credentials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.demo-credentials__card {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 24px;
}
.demo-credentials__role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.demo-credentials__url {
  margin-bottom: 20px;
}
.demo-credentials__url a {
  font-size: 13px;
  color: var(--green);
  font-family: var(--font-mono);
  text-decoration: none;
  word-break: break-all;
}
.demo-credentials__url a:hover { text-decoration: underline; }
.demo-credentials__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.demo-credentials__field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--white);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.demo-credentials__key {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}
.demo-credentials__val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: none;
  padding: 0;
  letter-spacing: 0.03em;
}
.demo-credentials__btn {
  display: block;
  text-align: center;
  padding: 11px 18px;
  background: var(--green);
  color: var(--white);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t);
  letter-spacing: 0.01em;
}
.demo-credentials__btn:hover { background: var(--green-mid); }
.demo-credentials__note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  margin: 0;
  letter-spacing: 0.01em;
}

@media (max-width: 600px) {
  .demo-credentials { padding: 24px 20px; }
  .demo-credentials__grid { grid-template-columns: 1fr; }
}

/* ── New hybrid pricing additions (v2.5.2+) ──────────────────────────── */
.p-card__example {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 18px;
  border: 1px solid var(--border-soft);
}
.p-card__example-label {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.p-card__example-val {
  font-family: var(--font-mono);
  color: var(--ink-mid);
  font-weight: 500;
  font-size: 12px;
}
.p-card--featured .p-card__example {
  background: rgba(45,90,61,0.08);
  border-color: rgba(45,90,61,0.15);
}
.p-card--featured .p-card__example-val { color: var(--green); }

/* Adjust period font size for formula display */
.p-card__amount { font-size: 36px; } /* reduce for formula pricing */
.p-card__period { font-size: 13px; color: var(--ink-dim); display: block; margin-top: 2px; }

/* Demo credentials panel CSS (for How It Works section) */
.demo-credentials__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--green-light);
  color: var(--green);
  border: 1px solid rgba(45,90,61,0.2);
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════
   v2.5.3 — PRICING CARDS: Stripped essentials (Decision 1)
   Cards now only show tier name + one-line differentiator.
   Tagline elevated to be the primary descriptor.
   ═══════════════════════════════════════════════════════ */
.p-card__tagline {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-style: italic;
    color: var(--ink-soft) !important;
    margin-bottom: 28px !important;
    line-height: 1.3;
    letter-spacing: 0;
}
.p-card--featured .p-card__tagline {
    color: var(--green) !important;
}
.p-card__tier {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: var(--ink) !important;
    margin-bottom: 10px !important;
}

/* Calculator section (v2.5.3 two-column) — ensure stepper button spring animation */
.price-calc__btn {
    transition: background var(--t), color var(--t), transform var(--t-spring) !important;
}
.price-calc__btn:active {
    transform: scale(0.92);
}