@font-face {
  font-family: 'Cal Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cal-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist.woff2') format('woff2');
}

  :root {
    --h: 45;
    --c: 0.14;
    --bg:        #042D24;
    --bg-alt:    #f8f2eb;
    --bg-card:   #fffdfa;
    --ink:       #FFFFFF;
    --ink-soft:  #FFFFFF;
    --ink-mute:  #bdbdbd;
    --rule:      #e2ddd7;
    --rule-2:    #d0c9c2;
    --primary:   #DAFF99;
    --primary-2: #DAFF99;
    --primary-tint: #ffe4d6;
    --sage:      #688368;
    --sage-tint: #dceedc;
    --danger:    #b84e44;
    --dark:      #15110d;
    --dark-2:    #231e1b;
    --on-dark:   #f5f1ec;

    --display: "Cal Sans", ui-sans-serif, system-ui, sans-serif;
    --sans:    "Geist", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;

    --maxw: 1180px;
    --pad: clamp(18px, 4vw, 40px);
    --radius: 14px;
    --radius-lg: 22px;
  }

  /* Light-bg sections: locally flip --ink to dark green so all text inheriting via var(--ink) is readable */
  .bg-alt,
  .bg-cream,
  .how-vc,
  .how-vd,
  .how-vdt,
  .how-vdtm,
  .how-vh,
  .easy-steps,
  .t-card {
    --ink: #042D24;
    --ink-soft: #042D24;
    --ink-mute: rgba(4, 45, 36, 0.65);
    color: var(--ink);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 100px; }
  body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  a { color: inherit; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  img { max-width: 100%; display: block; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin: 0;
    text-wrap: balance;
  }
  h1 { font-size: clamp(42px, 8vw, 88px); }
  h2 { font-size: clamp(32px, 5.5vw, 56px); }
  h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; font-family: var(--sans); letter-spacing: -0.01em; }
  p  { margin: 0; text-wrap: pretty; }

  .eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: "";
    width: 22px; height: 1px; background: currentColor; opacity: 0.5;
  }

  /* ============ NAV — floating liquid-glass pill ============ */
  .nav {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: calc(100% - 2 * var(--pad));
    max-width: var(--maxw);
    z-index: 50;
    height: 62px;
    border-radius: 999px;
    background: rgba(4, 45, 36, 0.35);
    -webkit-backdrop-filter: saturate(140%) blur(21px);
    backdrop-filter: saturate(140%) blur(21px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background .2s;
  }
  .nav.scrolled { background: rgba(4, 45, 36, 0.55); }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 24px;
  }
  /* Push main content below the floating nav (nav height 62 + top offset 20) */
  main { padding-top: 82px; }
  /* Desktop: 20px taller nav (82px) — more breathing room above/below the logo+links */
  @media (min-width: 761px) {
    .nav { height: 82px; }
    main { padding-top: 102px; }
    .nav .nav-links { font-size: 16px; }
    .nav .nav-links .nav-cta { font-size: 16px; }
  }
  .logo {
    font-family: var(--display);
    font-size: 21px; font-weight: 500; letter-spacing: -0.015em;
    display: inline-flex; align-items: center; gap: 9px;
    text-decoration: none;
  }
  .logo-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
  }

  /* Animated header logo (V6 overlap): Review → star → Answered → check */
  .nav .logo { align-items: flex-start; gap: 0; }
  .nav .logo .logo-pair {
    display: inline-flex;
    align-items: flex-start;
  }
  .nav .logo .logo-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: -5px;
    margin-top: 2px;
    opacity: 0;
    animation: logoFadeIn 0.35s ease-out forwards;
  }
  .nav .logo .logo-pair--b {
    opacity: 0;
    animation: logoFadeIn 0.35s ease-out forwards;
  }
  .nav .logo .logo-icon--star { animation-delay: 0.5s; }
  .nav .logo .logo-pair--b { animation-delay: 1.7s; }
  .nav .logo .logo-icon--check { animation-delay: 2.2s; width: 13px; height: 13px; }
  @keyframes logoFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .nav-links {
    display: flex; gap: 28px; align-items: center;
    font-size: 14.5px;
  }
  .nav-links a { text-decoration: none; color: var(--ink-soft); }
  .nav-links a:not(.nav-cta):hover { color: #DAFF99; text-decoration: underline; }
  a.nav-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    background: #FFFFFF;
    color: #042D24;
    border-radius: 999px;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    transition: transform .15s, background .2s;
  }
  a.nav-cta:hover { background: var(--primary-2); color: #042D24; transform: translateY(-1px); }
  @media (max-width: 760px) {
    .nav-links a:not(.nav-cta) { display: none; }
    /* Fade in the Get started CTA 0.85s after the logo animation finishes
       (matches the gap between star icon completing and Answered starting: 1.7s − 0.85s) */
    .nav-links .nav-cta {
      opacity: 0;
      animation: logoFadeIn 0.4s ease-out forwards;
      animation-delay: 3.4s;
    }
  }

  /* ============ BUTTONS ============ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 22px;
    border-radius: 999px;
    font-weight: 500; font-size: 16px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s, background .2s;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--ink);
    color: var(--bg);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--ink) 50%, transparent) inset,
                0 10px 24px -12px color-mix(in oklab, var(--ink) 60%, transparent);
  }
  .btn-primary:hover { background: var(--primary-2); transform: translateY(-1px); }
  .hero-cta-row .btn-primary {
    background: #FFFFFF;
    color: #042D24;
  }
  .hero-cta-row .btn-primary:hover {
    background: var(--primary-2);
    color: #02594E;
    transform: translateY(-1px);
  }
  .btn-accent {
    background: #042D24;
    color: #fff;
    box-shadow: 0 10px 28px -12px color-mix(in oklab, #042D24 75%, transparent);
  }
  .btn-accent:hover { background: #DAFF99; color: #042D24; transform: translateY(-1px); }
  .btn-ghost {
    color: var(--ink);
    border: 1px solid var(--rule-2);
  }
  .btn-ghost:hover { background: var(--bg-card); }

  /* ============ HERO ============ */
  .hero {
    position: relative;
    padding: clamp(44px, 8vw, 96px) 0 clamp(40px, 6vw, 80px);
    overflow: hidden;
  }
  .hero-wrap { position: relative; }
  .hero h1.hero-headline {
    font-size: clamp(44px, 8vw, 96px);
    font-weight: 900;
    font-synthesis-weight: auto;
    letter-spacing: -0.035em;
    max-width: 16ch;
    line-height: 0.98;
  }
  .hero-headline .hl {
    background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, var(--primary) 28%, transparent) 55% 85%, transparent 85%);
    padding: 0 .05em;
  }
  .hero-headline .underline {
    position: relative;
    display: inline-block;
  }
  .hero-headline .underline::after {
    content:"";
    position: absolute;
    left: 0; right: 2%;
    bottom: -0.02em;
    height: 8px;
    background: var(--primary);
    border-radius: 4px;
    transform: skewY(-1.5deg);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(24px, 5vw, 72px);
    align-items: start;
    margin-top: clamp(28px, 4vw, 48px);
  }
  @media (min-width: 901px) {
    .hero-wrap { position: relative; }
    .hero-visual {
      position: absolute;
      right: 0;
      top: 0;
      width: 42%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      pointer-events: none;
      z-index: 2;
    }
    .hero-visual > * { pointer-events: auto; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { max-width: 58%; }
  }
  /* Mobile-only finale CTA inside the phone — hidden on desktop. */
  .phone-mobile-cta { display: none; }

  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .hero h1.hero-headline {
      font-size: clamp(48px, 13vw, 76px);
      max-width: none;
    }
    /* Mobile hero order: h1 + eyebrow stay above the grid; inside the grid
       we lift hero-copy + hero-visual children with `display: contents` and
       arrange them: subtitle → 3 bullets → phone (the rest moves into the
       phone via .phone-mobile-cta). */
    .hero-copy,
    .hero-visual { display: contents; }
    .hero-copy .hero-sub { order: -4; }
    .hero-copy .hero-check { order: -3; margin-top: 0; }
    .hero-visual .phone { order: -2; }

    /* The original below-phone CTA + trust + rating are moved INSIDE the
       phone on mobile (see .phone-mobile-cta), so hide the originals. */
    .hero-copy .hero-cta-row,
    .hero-copy .hero-trust,
    .hero-copy .hero-rating { display: none; }

    /* Restore the full phone chrome on mobile — uncropped, no mask, no
       squared corners. Default 9/19 aspect-ratio is preserved so the phone
       is tall enough to fit the full response text + the in-phone CTA
       without overlap. */
    .hero-visual .phone {
      max-width: 480px;
    }
    .hero-visual .phone-tilt {
      transform: rotate(2deg);
      transition: none;
    }
    .hero-visual .phone-tilt:hover {
      transform: rotate(2deg);
    }
    /* On mobile, stop .phone-demo from greedily filling all remaining
       vertical space — that's what creates the empty gap between the
       response card and the CTA. With flex:0 the demo takes the natural
       height of the gscene, the CTA sits right under it, and any leftover
       phone-screen height becomes a small bit of white at the bottom. */
    .hero-visual .phone .phone-demo {
      flex: 0 0 auto;
      min-height: 0;
    }

    /* ---- In-phone finale CTA ---- */
    .phone-mobile-cta {
      /* In flow as the last flex child of .phone-screen — sits AFTER the
         gscene content, never overlaps the response text. The phone-screen
         is overflow:hidden, so this is naturally clipped to the rounded
         bottom of the device. */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      padding: 18px 22px 22px;
      flex: 0 0 auto;
      pointer-events: none;
      z-index: 5;
    }
    .phone-screen.is-finale .phone-mobile-cta { pointer-events: auto; }

    /* Button — matches the global .btn (padding 15px 22px, font 16px / 500,
       pill radius), inverted: dark green bg, white text. */
    .phone-mobile-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      background: #042D24;
      color: #fff;
      font-family: var(--sans);
      font-size: 16px;
      font-weight: 500;
      padding: 15px 22px;
      border-radius: 999px;
      text-decoration: none;
      white-space: nowrap;
      box-shadow: 0 10px 24px -12px rgba(4, 45, 36, 0.55);
    }
    .phone-mobile-cta-btn svg { flex-shrink: 0; }

    /* Trust line — matches .hero-trust (12px / 0.04em). */
    .phone-mobile-cta-trust {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px 14px;
      color: #042D24;
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: 0.04em;
    }
    .phone-mobile-cta-trust .dot {
      width: 3px; height: 3px;
      border-radius: 50%;
      /* Use a half-transparent color instead of `opacity: 0.5` — opacity on
         the dot would override the parent `> span { opacity: 0 }` baseline
         and leave the dots visible during the whole animation. */
      background: color-mix(in oklab, currentColor 50%, transparent);
    }

    /* Rating — matches .hero-rating (score 34/16, stars 18x18, sub 13). */
    .phone-mobile-cta-rating {
      display: flex;
      align-items: center;
      gap: 14px;
      color: #042D24;
    }
    .phone-mobile-cta-rating .score {
      font-family: var(--display);
      font-size: 34px;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .phone-mobile-cta-rating .den {
      font-size: 16px;
      color: rgba(4, 45, 36, 0.55);
      font-family: var(--sans);
      letter-spacing: 0.04em;
      margin-left: 2px;
    }
    .phone-mobile-cta-rating-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .phone-mobile-cta-rating .r-stars {
      display: inline-flex;
      gap: 2px;
      color: oklch(0.72 0.15 75);
    }
    .phone-mobile-cta-rating .r-stars svg { width: 18px; height: 18px; }
    .phone-mobile-cta-rating .r-sub {
      font-size: 13px;
      color: rgba(4, 45, 36, 0.65);
      font-family: var(--sans);
      letter-spacing: 0.02em;
    }

    /* Initial hidden states — children fade up sequentially when
       .phone-screen gets .is-finale (added by JS at the end of the
       hero animation). */
    .phone-mobile-cta-btn,
    .phone-mobile-cta-trust > span,
    .phone-mobile-cta-rating {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .phone-screen.is-finale .phone-mobile-cta-btn {
      opacity: 1; transform: translateY(0);
      transition-delay: 0.1s;
    }
    /* Trust line: 1st/2nd children at 1s, 3rd/4th at 1.4s, 5th at 1.8s
       (children alternate text → dot → text → dot → text). */
    .phone-screen.is-finale .phone-mobile-cta-trust > span:nth-child(1),
    .phone-screen.is-finale .phone-mobile-cta-trust > span:nth-child(2) {
      opacity: 1; transform: translateY(0);
      transition-delay: 1.1s;
    }
    .phone-screen.is-finale .phone-mobile-cta-trust > span:nth-child(3),
    .phone-screen.is-finale .phone-mobile-cta-trust > span:nth-child(4) {
      opacity: 1; transform: translateY(0);
      transition-delay: 1.5s;
    }
    .phone-screen.is-finale .phone-mobile-cta-trust > span:nth-child(5) {
      opacity: 1; transform: translateY(0);
      transition-delay: 1.9s;
    }
    .phone-screen.is-finale .phone-mobile-cta-rating {
      opacity: 1; transform: translateY(0);
      transition-delay: 2.5s;
    }
  }

  .hero-check {
    list-style: none; padding: 0; margin: 22px 0 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .hero-check li {
    display: flex; align-items: center; gap: 12px;
    font-size: 16.5px; color: var(--ink);
  }
  .hero-check .chk {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ink); color: var(--bg);
    display: grid; place-items: center; flex-shrink: 0;
  }
  .hero-check .chk svg { width: 12px; height: 12px; }

  .hero-rating {
    margin-top: 26px;
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
  }
  .hero-rating .score {
    font-family: var(--display);
    font-size: 34px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1;
  }
  .hero-rating .score .den { font-size: 16px; color: var(--ink-mute); font-family: var(--sans); letter-spacing: 0.04em; margin-left: 2px; }
  .hero-rating .r-stars { display: inline-flex; gap: 2px; color: oklch(0.72 0.15 75); }
  .hero-rating .r-stars svg { width: 18px; height: 18px; }
  .hero-rating .r-sub { font-size: 13px; color: var(--ink-mute); font-family: var(--sans); letter-spacing: 0.02em; }
  @media (max-width: 900px) {
    .hero-rating { justify-content: center; text-align: center; }
  }

  .phone-tilt {
    transform: rotate(8deg);
    transform-origin: 50% 55%;
    filter: drop-shadow(0 50px 60px rgba(0,0,0,.18));
    transition: transform .5s ease;
  }
  .phone-tilt:hover { transform: rotate(5deg) translateY(-4px); }
  @media (max-width: 900px) {
    .phone-tilt { transform: rotate(5deg); }
  }
  .hero h1 {
    font-size: clamp(44px, 7.4vw, 92px);
    letter-spacing: -0.03em;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--primary);
    font-weight: 400;
  }
  .hero .strike {
    display: inline-block;
    position: relative;
  }
  .hero .strike::after {
    content: "";
    position: absolute; left: -2%; right: -2%; top: 56%;
    height: 6px; background: var(--primary);
    transform: skewY(-2deg);
    opacity: 0.85;
  }
  .hero-sub {
    margin-top: 22px;
    font-size: clamp(16.5px, 1.8vw, 19px);
    color: var(--ink-soft);
    max-width: 46ch;
  }
  .hero-cta-row {
    margin-top: 30px;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  }
  @media (max-width: 900px) {
    .hero-cta-row { justify-content: center; }
    .hero-trust { justify-content: center; }
  }
  .hero-trust {
    margin-top: 18px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  }
  .hero-trust .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

  /* Phone mock */
  .phone {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    aspect-ratio: 9 / 19;
    background: #111;
    border-radius: 44px;
    padding: 10px;
    box-shadow:
      0 0 0 1.5px oklch(0.28 0.01 60),
      0 40px 80px -30px rgba(0,0,0,.35),
      0 10px 30px -12px rgba(0,0,0,.25);
  }
  .phone-notch {
    position: absolute; top: 18px; left: 50%;
    transform: translateX(-50%);
    width: 92px; height: 26px;
    background: #000; border-radius: 999px;
    z-index: 3;
  }
  .phone-screen {
    width: 100%; height: 100%;
    background: var(--bg-card);
    border-radius: 36px;
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
  }
  .phone-status {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 26px 6px;
    font-family: var(--sans);
    font-size: 13px; font-weight: 600;
    color: var(--ink);
  }
  .phone-status .status-right { display: inline-flex; gap: 5px; align-items: center; }
  .phone-appbar {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
  }
  .phone-title {
    font-weight: 600; font-size: 15px;
    flex: 1;
  }
  .phone-count {
    font-family: var(--sans); font-size: 11px;
    color: var(--ink-mute);
    padding: 3px 8px;
    background: var(--bg-alt);
    border-radius: 999px;
  }
  .phone-biz {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--rule);
  }
  .biz-name {
    font-family: var(--display);
    font-size: 20px; letter-spacing: -0.015em;
    font-weight: 500;
  }
  .biz-meta {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-mute);
  }
  .biz-meta .rating { color: var(--ink); font-weight: 600; }
  .stars-inline { display: inline-flex; gap: 1px; color: oklch(0.72 0.15 75); }
  .stars-inline svg { width: 11px; height: 11px; }
  .phone-feed {
    padding: 14px 18px 18px;
    flex: 1;
    overflow: hidden;
  }
  .p-review { display: flex; flex-direction: column; gap: 8px; }
  .p-head { display: flex; align-items: center; gap: 10px; }
  .p-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-weight: 600; font-size: 11.5px;
  }
  .p-avatar.a1 { background: oklch(0.58 0.14 260); }
  .p-avatar.owner { background: var(--primary); font-size: 10px; }
  .p-who { display: flex; flex-direction: column; line-height: 1.1; }
  .p-name { font-weight: 600; font-size: 13px; color: var(--ink); }
  .p-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; font-family: var(--sans); letter-spacing: 0.02em; }
  .p-stars { display: inline-flex; gap: 1px; color: oklch(0.72 0.15 75); }
  .p-stars svg { width: 12px; height: 12px; }
  .p-body { font-size: 13px; line-height: 1.5; color: var(--ink); margin: 0; }
  .p-actions {
    display: flex; gap: 14px;
    margin-top: 4px;
    font-size: 11.5px; color: var(--ink-mute);
    font-weight: 500;
  }
  .p-reply {
    margin-top: 8px;
    padding: 12px 12px 12px;
    background: linear-gradient(180deg, color-mix(in oklab, var(--primary-tint) 65%, var(--bg-card)), var(--bg-card));
    border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--rule));
    border-radius: 12px;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
  }
  .p-reply::before {
    content: "";
    position: absolute; left: 18px; top: -7px;
    width: 12px; height: 12px;
    background: inherit;
    border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--rule));
    border-right: 0; border-bottom: 0;
    transform: rotate(45deg);
    background: color-mix(in oklab, var(--primary-tint) 65%, var(--bg-card));
  }
  .p-reply-head { display: flex; align-items: center; gap: 10px; }
  .p-reply .p-name { color: var(--primary-2); }
  .phone-pin {
    position: absolute;
    bottom: 14px; left: 14px; right: 14px;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; font-family: var(--sans); letter-spacing: 0.04em;
    box-shadow: 0 14px 28px -14px rgba(0,0,0,.5);
  }
  .phone-pin .pin-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

  @media (max-width: 900px) {
    .phone { max-width: 300px; margin-top: 8px; }
  }

  /* ============ PHONE — GOOGLE REVIEWS UI ============ */
  .phone-screen { background: #fff; color: #202124; font-family: var(--sans); }
  .phone-screen .phone-status { color: #202124; }

  .g-tabs {
    display: flex;
    padding: 0 4px;
    border-bottom: 1px solid #e8eaed;
    font-size: 12.5px; font-weight: 500;
  }
  .g-tab {
    flex: 1;
    text-align: center;
    padding: 11px 4px 10px;
    border-bottom: 3px solid transparent;
    color: #5f6368;
  }
  .g-tab.active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
    font-weight: 600;
  }

  .g-rating {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 14px 10px;
  }
  .g-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .g-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #5f6368; line-height: 1; }
  .g-bar-num { width: 8px; text-align: right; flex-shrink: 0; }
  .g-bar-track {
    flex: 1; height: 7px; background: #e8eaed; border-radius: 4px; overflow: hidden;
  }
  .g-bar-fill { display: block; height: 100%; background: #fabb05; border-radius: 4px; }
  .g-score { text-align: center; flex-shrink: 0; min-width: 84px; }
  .g-score-num { font-size: 32px; font-weight: 600; line-height: 1; color: #202124; letter-spacing: -0.02em; }
  .g-score-stars { display: inline-flex; margin-top: 6px; gap: 1px; color: #fabb05; }
  .g-score-stars svg { width: 11px; height: 11px; display: block; }
  .g-score-count { font-size: 10px; color: #5f6368; margin-top: 4px; white-space: nowrap; }

  .g-toolbar {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 2px 14px 4px;
  }
  .g-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 12px;
    border: 1px solid #dadce0;
    border-radius: 999px;
    background: #fff;
    font-size: 11.5px; color: #5f6368; font-weight: 500;
    cursor: pointer;
  }
  .g-pill-icon { width: 28px; padding: 0; justify-content: center; }
  .g-pill svg { width: 13px; height: 13px; display: block; }

  .g-review {
    padding: 12px 14px 4px;
    border-top: 1px solid #e8eaed;
  }
  .g-review-head {
    display: grid;
    grid-template-columns: 32px 1fr 16px;
    column-gap: 10px;
    align-items: center;
    margin-bottom: 8px;
  }
  .g-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #5f6368, #3c4043);
    color: #fff;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  }
  .g-review-name { font-size: 12px; font-weight: 600; color: #202124; letter-spacing: 0.02em; }
  .g-review-meta { font-size: 10px; color: #5f6368; margin-top: 2px; line-height: 1.3; }
  .g-review-more { color: #5f6368; display: inline-flex; align-items: center; justify-content: center; }
  .g-review-more svg { width: 14px; height: 14px; display: block; }

  .g-review-stars-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
  }
  .g-stars { display: inline-flex; gap: 1px; color: #fabb05; }
  .g-stars svg { width: 11px; height: 11px; display: block; }
  .g-review-date { font-size: 10.5px; color: #5f6368; }

  .g-review-body {
    font-size: 11.5px; line-height: 1.5; color: #202124;
    margin: 0 0 8px;
  }
  .g-more {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
  }

  .g-review-actions {
    display: flex; gap: 22px;
    padding: 4px 0 8px;
  }
  .g-action {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: #202124; font-weight: 500;
  }
  .g-action svg { width: 14px; height: 14px; display: block; color: #5f6368; }

  .g-response {
    margin: 0 14px 14px;
    padding-left: 10px;
    border-left: 2px solid #dadce0;
  }
  .g-response-head {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px;
  }
  .g-response-head strong { font-weight: 600; font-size: 11.5px; color: #202124; }
  .g-response-body {
    font-size: 11.5px; line-height: 1.5; color: #202124;
    margin: 0;
  }

  .review-stack {
    position: relative;
    padding: 20px 0;
  }
  .review-card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    box-shadow:
      0 1px 0 rgba(255,255,255,.8) inset,
      0 30px 60px -35px color-mix(in oklab, var(--ink) 60%, transparent),
      0 8px 20px -16px color-mix(in oklab, var(--ink) 40%, transparent);
    position: relative;
  }
  .review-card + .review-card { margin-top: 14px; }
  .review-card.reply {
    margin-left: clamp(22px, 6%, 56px);
    background: linear-gradient(180deg, color-mix(in oklab, var(--primary-tint) 60%, var(--bg-card)) 0%, var(--bg-card) 70%);
    border-color: color-mix(in oklab, var(--primary) 25%, var(--rule));
  }
  .review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-weight: 600; font-size: 14px;
    letter-spacing: 0.02em;
  }
  .avatar.a1 { background: oklch(0.58 0.14 260); }
  .avatar.a2 { background: oklch(0.60 0.14 20); }
  .avatar.owner { background: var(--primary); }
  .avatar.owner::after {
    content: ""; position: absolute; /* for visual clarity */
  }
  .review-who { display: flex; flex-direction: column; }
  .review-name { font-weight: 600; font-size: 15px; line-height: 1.1; }
  .review-meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; font-family: var(--sans); }
  .stars { display: inline-flex; gap: 2px; color: oklch(0.72 0.15 75); margin-left: auto; }
  .stars svg { width: 15px; height: 15px; }
  .review-body { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
  .review-body.reply-body::before {
    content: "Owner's reply";
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-2);
    margin-bottom: 6px;
  }
  .reply-badge {
    position: absolute;
    top: -14px; left: 24px;
    background: var(--sage);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .reply-badge svg { width: 12px; height: 12px; }
  .typing {
    display: inline-flex; gap: 3px; align-items: center;
    font-family: var(--sans); font-size: 11.5px; color: var(--ink-mute);
    margin-top: 8px;
  }
  .typing .dots { display: inline-flex; gap: 3px; }
  .typing .dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); animation: blink 1.2s infinite; }
  .typing .dots span:nth-child(2) { animation-delay: .2s; }
  .typing .dots span:nth-child(3) { animation-delay: .4s; }
  @keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

  /* ============ SECTION ============ */
  section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
  .section-head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 56px); }
  .section-head h2 { margin-top: 14px; }
  .section-head p { margin-top: 18px; color: var(--ink-soft); font-size: clamp(16px, 1.6vw, 18.5px); max-width: 56ch; }

  .bg-alt { background: var(--bg-alt); border-block: 1px solid var(--rule); }
  .bg-cream { background: oklch(0.96 0.022 70); }

  /* ============ COST SECTION ============ */
  .cost {
    position: relative;
  }
  /* ============ COST CARD IMAGE (V1/V2 test) ============ */
  /* Layering: image (bottom) → color gradient overlay in bottom 1/3 (middle) → text (top) */
  .cost-card-wrap { margin-block: clamp(32px, 4vw, 48px); }
  .cost-card-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    min-height: clamp(420px, 48vw, 560px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 30px 60px -32px color-mix(in oklab, var(--ink) 50%, transparent);
  }
  .cost-card-img .cost-text {
    padding: clamp(24px, 3.2vw, 44px);
    position: relative;
    z-index: 2;
  }
  .cost-card-img .big-number {
    font-size: clamp(52px, 7vw, 88px);
    line-height: 0.9;
    margin: 0;
  }
  .cost-card-img .cost-caption {
    margin-top: 14px;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.5;
    max-width: 56ch;
  }

  /* V1 — dark color, bottom 1/3 gradient (0% → 50%), light text */
  .cost-card-img.v1 {
    background:
      linear-gradient(180deg, transparent 0%, transparent 67%, rgba(20,18,14,0.5) 100%),
      url('assets/bg-number.webp') center / cover no-repeat;
    color: #fff;
  }
  .cost-card-img.v1 .big-number { color: #fff; }
  .cost-card-img.v1 .big-number .unit { color: rgba(255,255,255,0.62); }
  .cost-card-img.v1 .cost-caption { color: rgba(255,255,255,0.92); }
  .cost-card-img.v1 .cost-caption strong { color: #fff; }

  /* ============ COST CARD VIDEO (V2) ============ */
  /* Contained rounded card with muted autoplay video background */
  .cost-card-video {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    min-height: clamp(420px, 48vw, 560px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background: #1a1812; /* fallback while video loads */
    box-shadow: 0 30px 60px -32px color-mix(in oklab, var(--ink) 50%, transparent);
  }
  .cost-card-video > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .cost-card-video::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  .cost-card-video .cost-text {
    position: relative;
    z-index: 2;
    padding: clamp(24px, 3.2vw, 44px);
  }
  .cost-card-video .big-number {
    font-size: clamp(52px, 7vw, 88px);
    line-height: 0.9;
    margin: 0;
    color: #fff;
  }
  .cost-card-video .big-number .unit { color: rgba(255,255,255,0.62); }
  .cost-card-video .cost-caption {
    margin-top: 14px;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.5;
    max-width: 56ch;
    color: rgba(255,255,255,0.92);
  }
  .cost-card-video .cost-caption strong { color: #fff; }
  .cost-card-video .cost-attrib {
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.62);
  }
  .cost-cta-wrap {
    /* Mobile clamps at 32px; desktop scales up to 78px (~30px more than before). */
    margin-top: clamp(32px, 7vw, 78px);
    text-align: center;
  }
  .cost-cta-wrap .btn {
    padding: 15px 40px;
  }
  .cost-cta-sub {
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
  }

  /* V2 — dark gradient over video, light text (mirrors V1 colorway) */
  .cost-card-video.v2::before {
    background: linear-gradient(180deg,
      transparent 0%,
      transparent 45%,
      rgba(20,18,14,0.70) 100%);
  }

  /* Reduced-motion users: hide video, solid dark card remains */
  @media (prefers-reduced-motion: reduce) {
    .cost-card-video > video { display: none; }
  }

  /* Variant label strips (temporary — remove when a variant is chosen) */
  .cost-variant-label {
    max-width: 1180px; margin: 0 auto; padding: 56px var(--pad) 0;
    display: flex; gap: 20px; align-items: baseline;
    border-top: 1px dashed var(--rule);
  }
  .cost-variant-label:first-of-type { border-top: 0; }
  .cost-variant-label h3 {
    font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--primary-2); margin: 0; flex-shrink: 0;
  }
  .cost-variant-label p {
    margin: 0; color: var(--ink-mute); font-size: 13.5px; max-width: 62ch;
  }
  @media (max-width: 640px) {
    .cost-variant-label { flex-direction: column; gap: 6px; padding-top: 40px; }
  }

  .cost-lead {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: end;
  }
  @media (max-width: 820px) { .cost-lead { grid-template-columns: 1fr; } }

  .big-number {
    font-family: var(--display);
    font-size: clamp(86px, 16vw, 184px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ink);
    font-weight: 500;
    font-style: italic;
  }
  .big-number .unit {
    font-size: 0.38em;
    font-style: normal;
    color: var(--ink-mute);
    font-family: var(--sans);
    letter-spacing: 0.06em;
    vertical-align: top;
    margin-left: 16px;
  }
  .big-number .caret {
    color: var(--danger);
    font-style: normal;
    margin-right: 6px;
  }
  .cost-caption {
    font-size: 17px; color: var(--ink-soft); max-width: 36ch;
  }
  .cost-caption strong { color: var(--ink); font-weight: 600; }

  /* Stat cards — same image-card treatment as V1: photo bg + dark gradient + light text */
  .stat-row {
    margin-top: clamp(32px, 5vw, 56px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  @media (max-width: 780px) { .stat-row { grid-template-columns: 1fr; } }

  .stat-row .stat {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    min-height: clamp(340px, 34vw, 440px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 2.2vw, 32px);
    color: #fff;
    box-shadow: 0 24px 50px -28px color-mix(in oklab, var(--ink) 55%, transparent);
  }
  .stat-row .stat:nth-child(1) {
    background:
      linear-gradient(180deg, transparent 0%, transparent 50%, rgba(20,18,14,0.78) 100%),
      url('assets/owner_1.webp') center / cover no-repeat;
  }
  .stat-row .stat:nth-child(2) {
    background:
      linear-gradient(180deg, transparent 0%, transparent 50%, rgba(20,18,14,0.78) 100%),
      url('assets/owner_2.webp') center / cover no-repeat;
  }
  .stat-row .stat:nth-child(3) {
    background:
      linear-gradient(180deg, transparent 0%, transparent 50%, rgba(20,18,14,0.78) 100%),
      url('assets/owner_3.webp') center / cover no-repeat;
  }

  .stat-row .stat-num {
    font-family: var(--display);
    font-size: clamp(40px, 5.5vw, 56px);
    letter-spacing: -0.03em;
    line-height: 1;
    font-weight: 500;
    color: #fff;
  }
  .stat-row .stat-num .pct { color: #fff; }
  .stat-row .stat-label {
    margin-top: 10px;
    font-size: 15.5px;
    color: rgba(255,255,255,0.92);
    max-width: 26ch;
  }
  .stat-row .stat-src {
    margin-top: 10px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
  }

  /* Text-mode stat row — restores the original text layout (V3 uses this for side-by-side comparison) */
  .stat-row.text {
    gap: 0;
    border-top: 1px solid var(--rule);
  }
  .stat-row.text .stat,
  .stat-row.text .stat:nth-child(1),
  .stat-row.text .stat:nth-child(2),
  .stat-row.text .stat:nth-child(3) {
    position: static;
    overflow: visible;
    border-radius: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 26px 0 26px 26px;
    color: var(--ink);
    box-shadow: none;
    background: none;
    border-right: 1px solid var(--rule);
  }
  .stat-row.text .stat:first-child { padding-left: 0; }
  .stat-row.text .stat:last-child { border-right: 0; }
  @media (max-width: 780px) {
    .stat-row.text .stat,
    .stat-row.text .stat:nth-child(1),
    .stat-row.text .stat:nth-child(2),
    .stat-row.text .stat:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--rule); padding: 24px 0; }
    .stat-row.text .stat:last-child { border-bottom: 0; }
  }
  .stat-row.text .stat-num { color: var(--ink); font-size: 33px; }
  .stat-row.text .stat-num .pct {
    color: #042D24;
    font-size: 88px;
    font-style: italic;
    margin-right: 16px;
  }
  .stat-row.text .stat-label {
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 26px;
    margin-top: 50px;
    max-width: 32ch;
  }
  .stat-row.text .stat-src { color: var(--ink-mute); margin-top: 20px; text-align: right; }
  .stat-row.text .stat-src img { display: inline-block; margin-right: 20px; }

  /* Logo source attribution — replaces WiserReview / Reputation.com / Industry data text */
  .stat-src img {
    width: 125px;
    height: auto;
    display: block;
  }

  
  /* ============ Cost V2 — each stat in its own bordered box ============ */
  .cost-v2 .stat-row.text {
    border-top: 0;
    gap: 50px;
  }
  .cost-v2 .stat-row.text .stat,
  .cost-v2 .stat-row.text .stat:nth-child(1),
  .cost-v2 .stat-row.text .stat:nth-child(2),
  .cost-v2 .stat-row.text .stat:nth-child(3) {
    border: 1px solid var(--rule);
    border-radius: 22px;
    padding: clamp(24px, 2.8vw, 32px);
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  /* Align each row across all 3 boxes: numbers on top, labels right below, logos pinned to bottom */
  .cost-v2 .stat-row.text .stat-num { flex: 0 0 auto; }
  .cost-v2 .stat-row.text .stat-num .pct {
    font-size: clamp(32px, 5.5vw, 56px);
    margin-right: 12px;
  }
  .cost-v2 .stat-row.text .stat-label { flex: 1 1 auto; margin-top: 50px; }
  .cost-v2 .stat-row.text .stat-src { flex: 0 0 auto; margin-top: 20px; }

  @media (max-width: 780px) {
    .cost-v2 .stat-row.text { gap: 24px; }
    .cost-v2 .stat-row.text .stat,
    .cost-v2 .stat-row.text .stat:nth-child(1),
    .cost-v2 .stat-row.text .stat:nth-child(2),
    .cost-v2 .stat-row.text .stat:nth-child(3) {
      border: 1px solid var(--rule);
      border-radius: 22px;
      padding: clamp(24px, 2.8vw, 32px);
    }
    .cost-v2 .stat-row.text .stat-num .pct { font-size: 52px; }
    .cost-v2 .stat-row.text .stat-label { margin-top: 30px; }
  }

  /* ============ Cost V3 — no bg, no border; thin dividers; card 1 = nationwide heading + USA map ============ */
  .cost-v3 .stat-row.text { border-top: 0; gap: 0; }
  .cost-v3 .stat-row.text .stat,
  .cost-v3 .stat-row.text .stat:nth-child(1),
  .cost-v3 .stat-row.text .stat:nth-child(2),
  .cost-v3 .stat-row.text .stat:nth-child(3) {
    background: transparent;
    border: 0;
    border-radius: 0;
    border-right: 1px solid var(--rule);
    padding: clamp(24px, 2.8vw, 32px);
    display: flex;
    flex-direction: column;
  }
  .cost-v3 .stat-row.text .stat:first-child { padding-left: 0; }
  .cost-v3 .stat-row.text .stat:last-child { border-right: 0; padding-right: 0; }
  /* Desktop: no divider between card 1 and card 2 (between USA and 89%) */
  .cost-v3 .stat-row.text .stat:nth-child(1) { border-right: 0; }

  /* Cards 2 and 3: number + label + logo all bottom-anchored, 16px gaps (match card 1 heading→body) */
  .cost-v3 .stat-row.text .stat-num { flex: 0 0 auto; margin-top: auto; }
  .cost-v3 .stat-row.text .stat-num .pct {
    font-size: clamp(32px, 5.5vw, 56px);
    margin-right: 12px;
  }
  .cost-v3 .stat-row.text .stat-label { flex: 0 0 auto; margin-top: 16px; }
  .cost-v3 .stat-row.text .stat-src { flex: 0 0 auto; margin-top: 16px; }

  /* Card 1: nationwide heading + body (16px gap), USA map pinned to bottom */
  .cost-v3 .stat-nat-heading {
    font-family: var(--display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
  }
  .cost-v3 .stat-nat-body {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .cost-v3 .stat-nat-map {
    margin-top: auto;
    padding-top: clamp(32px, 4vw, 56px);
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
  }

  @media (max-width: 780px) {
    /* Horizontal inset mirrors the video overlay's cost-text padding so the mobile
       USA map + right-side stat cards sit at the same margin as the text on the video above.
       The nationwide heading and body keep the original wrap-edge alignment. */
    .cost-v3 .stat-row.text .stat,
    .cost-v3 .stat-row.text .stat:nth-child(1),
    .cost-v3 .stat-row.text .stat:nth-child(2),
    .cost-v3 .stat-row.text .stat:nth-child(3) {
      border-right: 0;
      border-bottom: 1px solid var(--rule);
      padding: 24px clamp(24px, 3.2vw, 44px);
    }
    .cost-v3 .stat-row.text .stat:last-child { border-bottom: 0; }
    .cost-v3 .stat-row.text .stat:first-child {
      padding: 80px 0 24px;
      border-bottom: 0;
    }
    /* Only the USA map inside the first-child picks up the video-text inset */
    .cost-v3 .stat-nat-map {
      max-width: none;
      padding-left: clamp(24px, 3.2vw, 44px);
      padding-right: clamp(24px, 3.2vw, 44px);
    }
    .cost-v3 .stat-row.text .stat-num .pct { font-size: 52px; }
    .cost-v3 .stat-row.text .stat-label { margin-top: 30px; }
    .cost-v3 .stat-row.text .stat-src { margin-top: 30px; }
  }

  /* ============ Cost V4 — extends V3; adds 4 stat cards in a 3×2 grid, USA spans 2 rows ============ */
  .cost-v4 .stat-row.text { grid-template-rows: 1fr 1fr; }
  .cost-v4 .stat-row.text .stat:nth-child(1) { grid-row: 1 / span 2; }
  /* Right-edge top-row cell (3): strip border-right & padding-right (V3's :last-child only matches card 5 now) */
  .cost-v4 .stat-row.text .stat:nth-child(3) {
    border-right: 0;
    padding-right: 0;
  }
  /* Horizontal divider between the two right-side rows */
  .cost-v4 .stat-row.text .stat:nth-child(2),
  .cost-v4 .stat-row.text .stat:nth-child(3) {
    border-bottom: 1px solid var(--rule);
  }

  @media (max-width: 780px) {
    .cost-v4 .stat-row.text { grid-template-rows: auto; }
    .cost-v4 .stat-row.text .stat:nth-child(1) { grid-row: auto; }
    /* Cards 4 & 5: same 80% narrow-card treatment as V3's cards 2 & 3 */
    .cost-v4 .stat-row.text .stat:nth-child(4),
    .cost-v4 .stat-row.text .stat:nth-child(5) {
      max-width: 80%;
      margin-left: auto;
      margin-right: auto;
    }
    /* Card 4 gets a bottom divider (V3 only lists cards 1-3 explicitly; card 5 is last-child → no border) */
    .cost-v4 .stat-row.text .stat:nth-child(4) {
      border-bottom: 1px solid var(--rule);
    }
  }

  /* ============ EASY STEPS — 1-2-3 onboarding (dark section, 3 colorful cards) ============ */
  .easy-steps {
    background: #042D24;
    padding-block: clamp(60px, 8vw, 120px) 0;
  }
  .easy-steps .section-head h2,
  .easy-steps .section-head p,
  .easy-steps .section-head .eyebrow { color: #fff; }
  .easy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
    margin-top: clamp(32px, 5vw, 56px);
  }
  @media (max-width: 820px) {
    .easy-grid { grid-template-columns: 1fr; gap: 30px; }

    /* Pin a tighter card height matching the final state. Completed block sits directly
       under the interactive element with a small 22px gap (matching title→input spacing)
       instead of being pushed to the card's bottom by margin-top:auto. */
    .easy-col { min-height: 290px; }
    .easy-col .easy-completed { margin-top: 22px; }

    /* Steps 2 and 3 on mobile: only the coloured card background is visible at first.
       The inner content (label + title + connect box) fades in once the previous step
       finishes and JS adds .is-revealed. */
    .easy-col.easy-step-2 .easy-step-label,
    .easy-col.easy-step-2 .easy-step-title,
    .easy-col.easy-step-2 .easy-connect,
    .easy-col.easy-step-3 .easy-step-label,
    .easy-col.easy-step-3 .easy-step-title,
    .easy-col.easy-step-3 .easy-step3-icon {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .easy-col.easy-step-2.is-revealed .easy-step-label,
    .easy-col.easy-step-2.is-revealed .easy-step-title,
    .easy-col.easy-step-2.is-revealed .easy-connect,
    .easy-col.easy-step-3.is-revealed .easy-step-label,
    .easy-col.easy-step-3.is-revealed .easy-step-title,
    .easy-col.easy-step-3.is-revealed .easy-step3-icon {
      opacity: 1;
    }
  }
  .easy-col {
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    color: var(--ink);
  }
  .easy-col:nth-child(1) { background: #FFEBE0; }
  .easy-col:nth-child(2) { background: #DCD7FF; }
  .easy-col:nth-child(3) { background: #DAEAFD; }

  /* ============ Easy Step 1 — interactive URL-submit demo ============ */
  .easy-col.easy-step-1 { position: relative; overflow: hidden; }
  .easy-step-label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(4, 45, 36, 0.55);
    margin-bottom: 10px;
  }
  .easy-step-title {
    font-family: var(--display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 22px 0;
    color: var(--ink);
  }
  .easy-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 4px;
  }
  .easy-input-wrap {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(4, 45, 36, 0.22);
    border-radius: 10px;
    background: #fff;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
  }
  .easy-input-text {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .easy-input-caret {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: var(--ink);
    margin-left: 1px;
    opacity: 0;
    animation: easyCaretBlink 0.7s steps(2) infinite;
  }
  .easy-col.easy-step-1.is-running .easy-input-caret { opacity: 1; }
  @keyframes easyCaretBlink {
    50% { opacity: 0; }
  }
  .easy-submit {
    padding: 12px 18px;
    background: #042D24;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, background 0.2s;
  }
  /* Animated cursor arrow */
  .easy-cursor {
    position: absolute;
    width: 28px; height: 28px;
    top: 18%; left: 78%;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    color: #042D24;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.22));
    transition: top 0.9s cubic-bezier(0.4,0,0.2,1),
                left 0.9s cubic-bezier(0.4,0,0.2,1),
                opacity 0.35s ease-out;
  }
  .easy-cursor svg { width: 100%; height: 100%; display: block; }
  /* Completed block (revealed after submit) — pinned to the bottom of the card via
     margin-top:auto so Step 1 and Step 2 Completed blocks share the same baseline
     regardless of how their titles wrap. */
  .easy-completed {
    margin-top: auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
  }
  .easy-completed-title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14.5px;
    margin-bottom: 4px;
    color: #042D24;
  }
  .easy-check-icon {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    margin: 0 2px 0 1px;
  }
  .easy-completed-desc {
    font-family: var(--sans);
    font-size: 13.5px;
    color: rgba(4, 45, 36, 0.7);
    line-height: 1.5;
    margin: 0;
  }

  /* Animation states — triggered by .is-running class via IntersectionObserver */
  /* Cursor: fade in → move to input → stay while typing → move to button → fade out */
  .easy-col.easy-step-1.is-running .easy-cursor {
    animation: easyCursorPath 7s ease-in-out forwards;
    animation-delay: 0.3s;
  }
  @keyframes easyCursorPath {
    0%   { opacity: 0; top: 18%; left: 78%; }
    6%   { opacity: 1; top: 18%; left: 78%; }
    20%  { opacity: 1; top: 50%; left: 38%; }   /* arrived at input */
    60%  { opacity: 1; top: 50%; left: 38%; }   /* wait while typing */
    72%  { opacity: 1; top: 50%; left: 82%; }   /* arrived at button */
    80%  { opacity: 1; top: 50%; left: 82%; }   /* click */
    86%  { opacity: 0; top: 50%; left: 82%; }   /* fade out */
    100% { opacity: 0; top: 50%; left: 82%; }
  }
  /* Typing animation: max-width grows from 0 to full text width, steps per character */
  .easy-col.easy-step-1.is-running .easy-input-text {
    animation: easyType 2.5s steps(17, end) forwards;
    animation-delay: 1.7s;
  }
  @keyframes easyType {
    from { max-width: 0; }
    to   { max-width: 17ch; }
  }
  /* Submit button press */
  .easy-col.easy-step-1.is-running .easy-submit {
    animation: easyPress 0.3s ease-out forwards;
    animation-delay: 5.9s;
  }
  @keyframes easyPress {
    0%   { transform: none;          background: #042D24; }
    40%  { transform: scale(0.94);   background: #0a4a3c; }
    100% { transform: none;          background: #042D24; }
  }
  /* Completed reveal */
  .easy-col.easy-step-1.is-running .easy-completed {
    animation: easyCompletedIn 0.5s ease-out forwards;
    animation-delay: 6.4s;
  }
  @keyframes easyCompletedIn {
    to { opacity: 1; transform: none; max-height: 200px; }
  }

  /* ============ Easy Step 2 — Google Profile connect demo ============ */
  .easy-col.easy-step-2 { position: relative; overflow: hidden; }
  .easy-connect {
    background: #fff;
    border-radius: 10px;
    padding: 4px 16px;
    border: 1px solid rgba(4, 45, 36, 0.1);
    box-shadow: 0 1px 3px rgba(4, 45, 36, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .easy-connect-logos {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .easy-connect-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(4, 45, 36, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(4, 45, 36, 0.06);
  }
  .easy-connect-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .easy-connect-dash {
    width: 16px;
    height: 2px;
    background: rgba(4, 45, 36, 0.28);
    border-radius: 1px;
  }
  .easy-connect-body {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 200px;
    overflow: hidden;
  }
  .easy-connect-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .easy-connect-text {
    font-family: var(--sans);
    font-size: 13px;
    color: rgba(4, 45, 36, 0.72);
    text-align: center;
    margin: 0 0 14px 0;
    line-height: 1.45;
    max-width: 240px;
  }
  .easy-connect-actions {
    display: flex;
    gap: 28px;
    align-items: center;
  }
  .easy-connect-link {
    background: none;
    border: 0;
    padding: 4px 6px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: #1a73e8;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.2s;
  }
  .easy-connect-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.3);
    color: #0a7f48;
    pointer-events: none;
  }
  .easy-connect-check svg {
    width: 64px;
    height: 64px;
  }

  /* Cursor: 1.2s after is-running → fade in at top-right, travel to Continue, click, fade */
  .easy-col.easy-step-2 .easy-cursor { top: 12%; left: 82%; }
  .easy-col.easy-step-2.is-running .easy-cursor {
    animation: easyCursorPath2 2.3s ease-in-out forwards;
    animation-delay: 1.2s;
  }
  @keyframes easyCursorPath2 {
    0%   { opacity: 0; top: 12%; left: 82%; }
    15%  { opacity: 1; top: 12%; left: 82%; }
    55%  { opacity: 1; top: 78%; left: 65%; }
    75%  { opacity: 1; top: 78%; left: 65%; }
    92%  { opacity: 0; top: 78%; left: 65%; }
    100% { opacity: 0; top: 78%; left: 65%; }
  }
  /* Continue press at click moment */
  .easy-col.easy-step-2.is-running .easy-connect-continue {
    animation: easyConnectPress 0.3s ease-out forwards;
    animation-delay: 2.85s;
  }
  @keyframes easyConnectPress {
    0%   { transform: none;         opacity: 1; }
    40%  { transform: scale(0.86);  opacity: 0.75; }
    100% { transform: none;         opacity: 1; }
  }
  /* Text + links fade out together */
  .easy-col.easy-step-2.is-running .easy-connect-controls {
    animation: easyConnectControlsOut 0.35s ease-out forwards;
    animation-delay: 3.2s;
  }
  @keyframes easyConnectControlsOut {
    to { opacity: 0; transform: scale(0.9); }
  }
  /* Check bounces in */
  .easy-col.easy-step-2.is-running .easy-connect-check {
    animation: easyCheckBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 3.45s;
  }
  @keyframes easyCheckBounce {
    0%   { opacity: 0; transform: scale(0.3); }
    55%  { opacity: 1; transform: scale(1.2); }
    78%  { opacity: 1; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
  }
  /* After the check has landed: collapse the body + tighten logos gap so the white
     box matches the height of Step 1's input field. */
  .easy-col.easy-step-2.is-running .easy-connect-body {
    animation: easyConnectBodyCollapse 0.45s ease-out forwards;
    animation-delay: 4.65s;
  }
  @keyframes easyConnectBodyCollapse {
    to { max-height: 0; opacity: 0; }
  }
  .easy-col.easy-step-2.is-running .easy-connect-logos {
    animation: easyConnectLogosTighten 0.45s ease-out forwards;
    animation-delay: 4.65s;
  }
  @keyframes easyConnectLogosTighten {
    to { margin-bottom: 0; }
  }
  /* Completed reveal — after the white box has finished shrinking */
  .easy-col.easy-step-2.is-running .easy-completed {
    animation: easyCompletedIn 0.5s ease-out forwards;
    animation-delay: 5.2s;
  }
  /* Step 3's Completed reveal fires once the card itself is revealed. */
  .easy-col.easy-step-3.is-revealed .easy-completed {
    animation: easyCompletedIn 0.5s ease-out forwards;
    animation-delay: 0.4s;
  }

  /* ============ Easy Step 3 — check-in-circle draw animation ============ */
  /* Same 44px height as Step 1's input and Step 2's final white logo box. */
  .easy-step3-icon {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .easy-step3-icon svg {
    width: 44px;
    height: 44px;
  }
  .easy-step3-icon-check {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
  }
  .easy-step3-icon-circle {
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    transform-origin: center;
    transform: rotate(-90deg);
  }
  /* On reveal: check draws first, then the circle forms around it */
  .easy-col.easy-step-3.is-revealed .easy-step3-icon-check {
    animation: step3CheckDraw 0.5s ease-out 0.4s forwards;
  }
  .easy-col.easy-step-3.is-revealed .easy-step3-icon-circle {
    animation: step3CircleDraw 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.0s forwards;
  }
  @keyframes step3CheckDraw {
    to { stroke-dashoffset: 0; }
  }
  @keyframes step3CircleDraw {
    to { stroke-dashoffset: 0; }
  }

  /* ============ Easy Steps sequential reveal (desktop only) ============ */
  /* On desktop, boxes 2 and 3 are hidden until their turn. On mobile they show normally. */
  @media (min-width: 821px) {
    /* Pin the grid row to a fixed height so nothing shifts while Step 2 animates —
       the row is locked regardless of the intrinsic heights of the cards inside. */
    .easy-grid { grid-template-rows: 380px; }
    .easy-col  { height: 380px; }

    .easy-col.easy-step-2,
    .easy-col.easy-step-3 {
      opacity: 0;
      transform: translateY(16px);
      pointer-events: none;
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .easy-col.easy-step-2.is-revealed,
    .easy-col.easy-step-3.is-revealed {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
  }

  /* ============ HOW IT WORKS ============ */
  .how {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
  }
  @media (max-width: 860px) { .how { grid-template-columns: 1fr; } }

  .how-you, .how-us {
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    border: 1px solid var(--rule);
  }
  .how-you {
    background: var(--bg-card);
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 100%;
  }
  .how-us {
    background: var(--bg-card);
    padding: 28px;
    position: relative;
  }
  .how-label {
    font-family: var(--sans);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
  }
  .how-label .pill {
    padding: 3px 8px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 4px;
    letter-spacing: 0.04em;
  }
  .how-you .you-step {
    font-family: var(--display);
    font-size: clamp(26px, 3.3vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-top: 10px;
  }
  .you-foot {
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--ink-mute);
    font-family: var(--sans);
  }
  .step-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .step {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px dashed var(--rule);
  }
  .step:last-child { border-bottom: 0; padding-bottom: 4px; }
  .step-idx {
    font-family: var(--sans); font-size: 12px;
    color: var(--ink-mute);
    padding-top: 4px;
  }
  .step-title { font-weight: 600; font-size: 16.5px; letter-spacing: -0.005em; }
  .step-desc { color: var(--ink-soft); font-size: 14.5px; margin-top: 4px; line-height: 1.5; }
  .step-icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary-2);
    display: grid; place-items: center;
  }
  .step-icon svg { width: 16px; height: 16px; }
  .step.qc .step-icon { background: var(--sage-tint); color: oklch(0.35 0.06 145); }

  .sample-reply {
    margin-top: 24px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, color-mix(in oklab, var(--primary-tint) 50%, var(--bg-card)), var(--bg-card));
    border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--rule));
    border-radius: 14px;
    font-size: 14.5px;
    color: var(--ink);
  }
  .sample-reply .tag {
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--primary-2);
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  }

  /* ============ HOW IT WORKS — V2 (5-step linear flow) ============ */
  .steps-v2 {
    list-style: none;
    padding: 0;
    margin: clamp(32px, 5vw, 56px) auto 0;
    max-width: 860px;
  }
  .step-v2 {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding-block: 18px;
  }
  .step-v2-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .step-v2-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-card);
    border: 1.5px solid var(--rule-2);
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0;
  }
  .step-v2:not(:last-child) .step-v2-rail::after {
    content: "";
    flex: 1;
    width: 2px;
    background: var(--rule);
    margin-top: 8px;
    margin-bottom: -18px;
  }
  .step-v2-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 4px;
  }
  .step-v2-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
  }
  .step-v2-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 500;
  }
  .step-v2-tag--you { background: var(--ink); color: #fff; }
  .step-v2-tag--us { background: var(--primary); color: #fff; }
  .step-v2-tag--time {
    background: var(--bg-card);
    color: var(--ink-soft);
    border: 1px solid var(--rule);
  }
  .step-v2-title {
    font-family: var(--display);
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
    color: var(--ink);
  }
  .step-v2-desc {
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0;
    max-width: 60ch;
  }

  /* Hero step — multi-agent QC, the real differentiator */
  .step-v2.is-hero .step-v2-num {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 24%, transparent);
  }
  .step-v2.is-hero .step-v2-body {
    background: var(--bg-card);
    border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--rule));
    border-radius: var(--radius);
    padding: 18px 20px 20px;
    margin-bottom: 4px;
  }

  /* Three-agent visual inside Step 3 body */
  .qc-agents {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
  }
  @media (max-width: 640px) {
    .qc-agents { grid-template-columns: 1fr; }
  }
  .qc-agent {
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--primary-tint) 55%, var(--bg-card));
    border: 1px solid color-mix(in oklab, var(--primary) 20%, var(--rule));
  }
  .qc-agent-label {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }
  .qc-agent-label::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
  }
  .qc-agent-name {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--ink);
  }

  @media (max-width: 720px) {
    .step-v2 { grid-template-columns: 40px 1fr; gap: 14px; }
    .step-v2-num { width: 34px; height: 34px; font-size: 14px; }
  }

  /* ============ HOW IT WORKS — V3 (5-step + animated scenes) ============ */
  .steps-v3 {
    list-style: none;
    padding: 0;
    margin: clamp(32px, 5vw, 56px) auto 0;
    max-width: 1080px;
  }
  .step-v3 {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding-block: 18px;
    max-width: 860px;
    margin-inline: auto;
  }
  .step-v3.is-scene { max-width: 1080px; }
  .step-v3-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .step-v3-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-card);
    border: 1.5px solid var(--rule-2);
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    color: #042D24;
    flex-shrink: 0;
  }
  .step-v3:not(:last-child) .step-v3-rail::after {
    content: "";
    flex: 1;
    width: 2px;
    background: var(--rule);
    margin-top: 8px;
    margin-bottom: -18px;
  }
  .step-v3-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 4px;
  }
  .step-v3.is-scene .step-v3-body {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.35fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: start;
  }
  @media (max-width: 900px) {
    .step-v3.is-scene .step-v3-body { grid-template-columns: 1fr; }
  }
  .step-v3-info { display: flex; flex-direction: column; gap: 8px; }
  .step-v3-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
  .step-v3-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 500;
  }
  .step-v3-tag--you { background: var(--ink); color: #fff; }
  .step-v3-tag--us { background: var(--primary); color: #fff; }
  .step-v3-tag--time {
    background: var(--bg-card);
    color: #042D24;
    border: 1px solid var(--rule);
  }
  .step-v3-title {
    font-family: var(--display);
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
    color: var(--ink);
  }
  .step-v3-desc {
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0;
    max-width: 56ch;
  }
  @media (max-width: 720px) {
    .step-v3 { grid-template-columns: 40px 1fr; gap: 14px; }
    .step-v3-num { width: 34px; height: 34px; font-size: 14px; }
  }

  
/* ============ Variant C — Colorful cards on white section ============ */
  .how-vc { background: #FFFFFF; padding-block: clamp(60px, 8vw, 120px); }
  .how-vc .step-v3-rail::after { display: none !important; }
  .how-vc .step-v3 {
    border: 0;
    border-radius: 60px;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
    margin-block: clamp(28px, 4vw, 48px);
    max-width: 1080px;
  }
  .how-vc .step-v3:nth-child(1) { background: #DAFF99; }
  .how-vc .step-v3:nth-child(2) { background: #DCD7FF; }
  .how-vc .step-v3:nth-child(3) { background: #DAEAFD; }
  .how-vc .step-v3:nth-child(4) { background: #FFEBE0; }

  
  /* ============ Variant D — Colorful cards + pill labels + arrows ============ */
  .how-vd { background: #042D24; padding-block: clamp(60px, 8vw, 120px); }
  .how-vd .section-head h2,
  .how-vd .section-head p { color: #fff; }
  .how-vd .steps-v3 { counter-reset: stepd; }
  .how-vd .step-v3-rail { display: none; }
  .how-vd .step-v3 {
    counter-increment: stepd;
    grid-template-columns: 1fr;
    gap: 0;
    border: 0;
    border-radius: 60px;
    padding: clamp(48px, 6vw, 72px) clamp(28px, 4vw, 48px) clamp(32px, 5vw, 56px);
    margin-top: clamp(100px, 13vw, 150px);
    max-width: 1080px;
    position: relative;
  }
  .how-vd .step-v3:first-child { margin-top: clamp(40px, 6vw, 80px); }
  .how-vd .step-v3:nth-child(1) { background: #DAFF99; }
  .how-vd .step-v3:nth-child(2) { background: #DCD7FF; }
  .how-vd .step-v3:nth-child(3) { background: #DAEAFD; }
  .how-vd .step-v3:nth-child(4) { background: #FFEBE0; }
  .how-vd .step-v3::before {
    content: "";
    position: absolute;
    top: clamp(-24px, -2.5vw, -14px);
    left: clamp(20px, 3vw, 48px);
    background: #02594E;
    color: #fff;
    padding: 0.28em 0.8em;
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing: -0.02em;
    line-height: 1.2;
    z-index: 2;
    white-space: nowrap;
  }
  .how-vd .step-v3:nth-child(1)::before { content: "WEEKLY REFRESH"; }
  .how-vd .step-v3:nth-child(2)::before { content: "DAILY MONITORING"; }
  .how-vd .step-v3:nth-child(3)::before { content: "PROOFREADING"; }
  .how-vd .step-v3:nth-child(4)::before { content: "GOING LIVE"; }
  .how-vd .step-v3:not(:first-child)::after {
    content: "";
    position: absolute;
    top: clamp(-130px, -12vw, -88px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(44px, 5vw, 56px);
    height: clamp(44px, 5vw, 56px);
    border-radius: 50%;
    background: #FDC068;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302594E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M19 12l-7 7-7-7'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
  }

  /* ============ Variant D-top — pill labels ABOVE cards, no arrows ============ */
  .how-vdt { background: #042D24; padding-block: clamp(60px, 8vw, 120px); }
  .how-vdt .section-head h2,
  .how-vdt .section-head p { color: #fff; }
  .how-vdt .steps-v3 { counter-reset: stepd; }
  .how-vdt .step-v3-rail { display: none; }
  .how-vdt .step-v3 {
    counter-increment: stepd;
    grid-template-columns: 1fr;
    gap: 0;
    border: 0;
    border-radius: 60px;
    padding: clamp(48px, 6vw, 72px) clamp(28px, 4vw, 48px) clamp(32px, 5vw, 56px);
    margin-top: clamp(230px, 26vw, 270px);
    max-width: 1080px;
    position: relative;
  }
  .how-vdt .step-v3:first-child { margin-top: calc(clamp(110px, 14vw, 140px) + 100px); }
  .how-vdt .step-v3:nth-child(1) { background: #DAFF99; }
  .how-vdt .step-v3:nth-child(2) { background: #DCD7FF; }
  .how-vdt .step-v3:nth-child(3) { background: #DAEAFD; }
  .how-vdt .step-v3:nth-child(4) { background: #FFEBE0; }
  /* V-Dtop label = real element (added via HTML) — replaces former ::before pill */
  .how-vdt .step-v3::before { content: none; }
  .how-vdt .step-v3-label {
    position: absolute;
    top: -75px;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    padding: 20px 50px;
    border-radius: 60px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
  }
  .how-vdt .step-v3-label-top {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .how-vdt .step-v3-label-num {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .how-vdt .step-v3-label-line {
    flex: 1;
    height: 1px;
    background: var(--ink);
  }
  .how-vdt .step-v3-label-text {
    font-family: var(--display);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .how-vdt .step-v3:nth-child(1) .step-v3-label { background: #DAFF99; }
  .how-vdt .step-v3:nth-child(2) .step-v3-label { background: #DCD7FF; }
  .how-vdt .step-v3:nth-child(3) .step-v3-label { background: #DAEAFD; }
  .how-vdt .step-v3:nth-child(4) .step-v3-label { background: #FFEBE0; }

  /* ============ Variant D-top-merged — label content baked INTO each box ============ */
  .how-vdtm { background: #042D24; padding-block: clamp(60px, 8vw, 120px); }
  .how-vdtm .how-cta-wrap {
    margin-top: clamp(48px, 6vw, 80px);
    text-align: center;
  }
  .how-vdtm .how-cta-lead {
    font-family: var(--display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 28px 0;
  }
  .how-vdtm .how-cta-btn {
    background: #fff;
    color: #042D24;
    padding: 15px 40px;
  }
  .how-vdtm .how-cta-btn:hover {
    background: #DAFF99;
    color: #042D24;
    transform: translateY(-1px);
  }
  .how-vdtm .how-cta-sub {
    margin: 14px 0 0;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.62);
  }
  .how-vdtm .section-head h2,
  .how-vdtm .section-head p,
  .how-vdtm .section-head .eyebrow { color: #fff; }
  .how-vdtm .step-v3-tag--us { background: #042D24; color: #fff; }
  .how-vdtm .step-v3-tag--you { background: #042D24; color: #fff; }
  .how-vdtm .steps-v3 { counter-reset: stepd; }
  .how-vdtm .step-v3-rail { display: none; }
  .how-vdtm .step-v3 {
    counter-increment: stepd;
    grid-template-columns: 1fr;
    gap: 0;
    border: 0;
    border-radius: 60px;
    padding: clamp(40px, 5vw, 60px) clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
    margin-top: clamp(32px, 5vw, 56px);
    max-width: 1080px;
    position: relative;
  }
  .how-vdtm .step-v3:first-child { margin-top: clamp(32px, 5vw, 56px); }
  .how-vdtm .step-v3:nth-child(1) { background: #F1F4F8; }
  .how-vdtm .step-v3:nth-child(2) { background: #DAFF99; }
  .how-vdtm .step-v3:nth-child(3) { background: #DCD7FF; }
  .how-vdtm .step-v3:nth-child(4) { background: #FFEBE0; }
  .how-vdtm .step-v3:nth-child(5) { background: #DAEAFD; }
  /* Label is now inline at the top of the box — no absolute float, no own bg */
  .how-vdtm .step-v3::before { content: none; }
  .how-vdtm .step-v3-label {
    position: static;
    transform: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: clamp(24px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .how-vdtm .step-v3-label-top {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .how-vdtm .step-v3-label-num {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .how-vdtm .step-v3-label-line {
    flex: 1;
    height: 1px;
    background: var(--ink);
  }
  .how-vdtm .step-v3-label-text {
    font-family: var(--display);
    font-size: clamp(44px, 5.5vw, 72px);
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
  }


/* ============ Variant G — Stacked layout, left-aligned ============ */
  .how-vg .step-v3.is-scene { max-width: 860px; }
  .how-vg .step-v3.is-scene .step-v3-body { grid-template-columns: 1fr; }
  .how-vg .gscene { max-width: 600px; }

  
  /* ============ Variant H — Time labels as pill (based on D) ============ */
  .how-vh { background: #FFFFFF; padding-block: clamp(60px, 8vw, 120px); }
  .how-vh .step-v3-rail { display: none; }
  .how-vh .step-v3 {
    grid-template-columns: 1fr;
    gap: 0;
    border: 0;
    border-radius: 60px;
    padding: clamp(48px, 6vw, 72px) clamp(28px, 4vw, 48px) clamp(32px, 5vw, 56px);
    margin-top: clamp(100px, 13vw, 150px);
    max-width: 1080px;
    position: relative;
  }
  .how-vh .step-v3:first-child { margin-top: clamp(40px, 6vw, 80px); }
  .how-vh .step-v3:nth-child(1) { background: #DAFF99; }
  .how-vh .step-v3:nth-child(2) { background: #DCD7FF; }
  .how-vh .step-v3:nth-child(3) { background: #DAEAFD; }
  .how-vh .step-v3:nth-child(4) { background: #FFEBE0; }
  .how-vh .step-v3::before {
    position: absolute;
    top: clamp(-24px, -2.5vw, -14px);
    left: clamp(20px, 3vw, 48px);
    background: #02594E;
    color: #fff;
    padding: 0.28em 0.8em;
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing: -0.02em;
    line-height: 1.2;
    z-index: 2;
    white-space: nowrap;
  }
  .how-vh .steps-v3 > .step-v3:nth-child(1)::before { content: "~1–2 hours · weekly refresh"; }
  .how-vh .steps-v3 > .step-v3:nth-child(2)::before { content: "Every 30 seconds"; }
  .how-vh .steps-v3 > .step-v3:nth-child(3)::before { content: "After every draft"; }
  .how-vh .steps-v3 > .step-v3:nth-child(4)::before { content: "Once approved"; }
  .how-vh .step-v3:not(:first-child)::after {
    content: "";
    position: absolute;
    top: clamp(-130px, -12vw, -88px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(44px, 5vw, 56px);
    height: clamp(44px, 5vw, 56px);
    border-radius: 50%;
    background: #FDC068;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302594E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M19 12l-7 7-7-7'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
  }

  /* ============ GSCENE (animated Google review card for steps 3 & 4) ============ */
  .gscene {
    position: relative;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: var(--radius-lg);
    padding: 22px 24px 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px -45px color-mix(in oklab, var(--ink) 50%, transparent),
                0 12px 28px -18px color-mix(in oklab, var(--ink) 40%, transparent);
    font-family: var(--sans);
    color: #202124;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .gscene.is-card-ready { opacity: 1; transform: translateY(0); }
  .gscene[data-scene="qc"] { min-height: 460px; }
  /* Google-review card is a 2-col grid: avatar column + content column, with a thread-line connector */
  .gscene-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    row-gap: 8px;
  }

  /* Connector line between reviewer and owner avatars (Google thread style) */
  .gscene-thread-line {
    grid-column: 1;
    grid-row: 1 / 5;
    width: 2px;
    background: #e8eaed;
    justify-self: center;
    align-self: stretch;
    margin-bottom: -8px;   /* bridge the 8px row-gap so line meets the owner avatar */
    z-index: 0;
  }

  .gscene-av {
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 600;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 2;
  }
  .gscene-av--reviewer {
    grid-column: 1;
    grid-row: 1;
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #5f6368, #3c4043);
    font-size: 13px;
    align-self: start;
  }
  .gscene-av--owner {
    grid-column: 1;
    grid-row: 5;
    width: 40px; height: 40px;
    background: #202124;
    font-size: 13px;
    align-self: start;
    margin-top: 2px;
  }
  .gscene-av-check {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 14px; height: 14px;
    background: #1a73e8;
    border-radius: 50%;
    border: 2px solid #fff;
    display: grid;
    place-items: center;
    color: #fff;
  }
  .gscene-av-check svg { width: 8px; height: 8px; }
  .gscene-av-logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .gscene-rhead {
    grid-column: 2; grid-row: 1;
    align-self: center;
  }
  .gscene-rhead .gscene-name {
    color: #1a73e8;
    text-decoration: none;
    cursor: pointer;
    display: block;
  }
  .gscene-owner-meta {
    grid-column: 2; grid-row: 5;
    align-self: center;
  }
  .gscene-owner-meta .gscene-name { color: #202124; }

  .gscene-name { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #202124; line-height: 1.2; }
  .gscene-meta { font-size: 12px; color: #5f6368; margin-top: 2px; }

  .gscene-stars-row {
    grid-column: 2; grid-row: 2;
    display: flex; align-items: center; gap: 10px;
  }
  .gscene-stars { display: inline-flex; gap: 1px; color: #fabb05; }
  .gscene-stars svg { width: 13px; height: 13px; display: block; }
  .gscene-date { font-size: 12px; color: #5f6368; }
  .gscene-body {
    grid-column: 2; grid-row: 3;
    font-size: 14px; line-height: 1.55; color: #202124; margin: 0;
  }
  .gscene-more-link { color: #1a73e8; text-decoration: none; font-weight: 500; }
  .gscene-actions {
    grid-column: 2; grid-row: 4;
    display: flex; gap: 24px; padding: 4px 0 2px;
    font-size: 13px; color: #202124; font-weight: 500;
  }
  .gscene-actions span { display: inline-flex; align-items: center; gap: 6px; }
  .gscene-actions svg { width: 15px; height: 15px; color: #5f6368; }

  /* Blue-bordered reply box with cut-out "Replying publicly" label (Google Business Profile style) */
  .gscene-response {
    grid-column: 2; grid-row: 6;
    position: relative;
    border: 2px solid #1a73e8;
    border-radius: 10px;
    padding: 16px 18px 26px;
    margin-top: 6px;
    background: #fff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .gscene.is-response-ready .gscene-response,
  .gscene[data-scene="qc"] .gscene-response,
  .gscene[data-scene="publish"] .gscene-response { opacity: 1; transform: translateY(0); }
  .gscene-response-label {
    position: absolute;
    top: -8px;
    left: 14px;
    padding: 0 6px;
    background: #fff;
    color: #1a73e8;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    font-family: var(--sans);
  }
  .gscene-response-counter {
    position: absolute;
    right: 12px; bottom: 6px;
    font-size: 11.5px;
    color: #70757a;
    font-family: var(--sans);
  }
  .gscene-response-body {
    font-size: 14px; line-height: 1.55;
    margin: 0;
    min-height: 1.6em;
    color: #202124;
  }

  /* Both v1 and v2 share the same grid cell — the cell sizes to max(v1, v2),
     matching the response box to Panel 4's natural body height (no forced whitespace). */
  .gscene-response-stack {
    display: grid;
    grid-template-areas: "stack";
  }
  .gscene-response-stack .gscene-response-body {
    grid-area: stack;
    margin: 0;
  }
  .gscene-response-stack .gscene-v2 {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
  }
  .gscene.is-rewritten .gscene-response-stack .gscene-v1 {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .gscene.is-rewritten .gscene-response-stack .gscene-v2 {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .gscene-mark {
    position: relative;
    background: color-mix(in oklab, var(--mark-color, #fabb05) 18%, transparent);
    padding: 2px 4px;
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1.5px solid color-mix(in oklab, var(--mark-color, #fabb05) 55%, transparent);
  }
  .gscene-mark--tone { --mark-color: oklch(0.48 0.10 155); }
  .gscene-mark--specificity { --mark-color: oklch(0.50 0.13 245); }
  .gscene-mark--voice { --mark-color: oklch(0.50 0.13 330); }
  .gscene-mark-label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: -2px;
    background: var(--mark-color);
    color: #fff;
    font-size: 10px;
    font-family: var(--sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 3;
  }
  .gscene-mark-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 10px;
    border: 4px solid transparent;
    border-top-color: var(--mark-color);
  }
  .gscene.is-rewritten .gscene-mark-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
  }

  /* Agent presence pills (Figma-style collaborator badges) */
  .gscene-agent {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    background: var(--agent-bg);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35);
    z-index: 6;
    opacity: 0;
    transform: translateY(6px) scale(0.95);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.2,.8,.2,1),
                top 0.6s cubic-bezier(.2,.8,.2,1), left 0.6s cubic-bezier(.2,.8,.2,1),
                right 0.6s cubic-bezier(.2,.8,.2,1), bottom 0.6s cubic-bezier(.2,.8,.2,1);
    white-space: nowrap;
    pointer-events: none;
    font-family: var(--sans);
  }
  .gscene-agent.is-visible { opacity: 1; transform: translateY(0) scale(1); }
  .gscene-agent-av {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    flex-shrink: 0;
  }
  .gscene-agent-name { line-height: 1.2; }
  .gscene-agent-pointer { display: none; }
  .gscene-agent--1 { --agent-bg: oklch(0.55 0.14 45); }   /* amber */
  .gscene-agent--2 { --agent-bg: oklch(0.48 0.10 155); }  /* sage */
  .gscene-agent--3 { --agent-bg: oklch(0.50 0.13 245); }  /* blue */
  .gscene-agent--4 { --agent-bg: oklch(0.50 0.13 330); }  /* mauve */

  /* Agent #1: starts over the review text → reads across it → drops down to draft the reply */
  .gscene[data-scene="draft"] .gscene-agent--1 {
    top: 25%;
    left: 6%;
    transition: opacity 0.35s ease,
                transform 0.5s cubic-bezier(.2,.8,.2,1),
                top 1.4s cubic-bezier(.4,0,.2,1),
                left 2s cubic-bezier(.4,0,.2,1);
  }
  .gscene[data-scene="draft"] .gscene-agent--1.is-reading-right {
    left: min(68%, calc(100% - 200px));
    animation: read-wave 2s ease-in-out;
  }
  .gscene[data-scene="draft"] .gscene-agent--1.is-drafting {
    top: 82%;
    left: 33%;
  }
  .gscene[data-scene="qc"] .gscene-agent--2 { top: 62%; left: 14%; }
  .gscene[data-scene="qc"] .gscene-agent--3 { top: 54%; left: 42%; }
  .gscene[data-scene="qc"] .gscene-agent--4 { top: 68%; left: 66%; }

  @keyframes scan-jitter {
    0%   { translate: 0 0; }
    25%  { translate: 8px -5px; }
    50%  { translate: 4px 6px; }
    75%  { translate: -6px 2px; }
    100% { translate: 0 0; }
  }
  .gscene-agent.is-scanning { animation: scan-jitter 3s ease-in-out infinite; }
  .gscene-agent--2.is-scanning { animation-delay: 0s; }
  .gscene-agent--3.is-scanning { animation-delay: -0.9s; }
  .gscene-agent--4.is-scanning { animation-delay: -1.7s; }

  /* When the scene's work is done, every agent fades out slowly in place
     (no more moving to the bottom of the card). */
  .gscene.is-settled .gscene-agent {
    animation: none;
    opacity: 0;
    transition: opacity 1.2s ease-out;
  }

  .gscene-response-body::after {
    content: "";
    display: none;
    width: 1.5px;
    height: 1em;
    background: currentColor;
    margin-left: 2px;
    vertical-align: -2px;
    opacity: 0.7;
    animation: caret-blink 0.9s steps(2) infinite;
  }
  .gscene.is-typing .gscene-response-body::after { display: inline-block; }
  @keyframes caret-blink {
    0%, 49% { opacity: 0.7; }
    50%, 100% { opacity: 0; }
  }

  /* ============ GSCENE — PUBLISH (Step 4: Agent #5 re-reads → clicks Reply → response publishes) ============ */

  /* Google-style Reply button (row 7 of the card grid) */
  .gscene-reply-btn {
    grid-column: 2;
    grid-row: 7;
    align-self: end;
    justify-self: end;
    margin-top: 10px;
    padding: 9px 22px;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--sans);
    letter-spacing: 0.02em;
    transition: opacity 0.4s ease, background 0.15s ease, transform 0.15s ease;
  }
  .gscene-reply-btn:hover { background: #1558b8; }

  @keyframes btn-press {
    0%   { transform: scale(0.97); background: #1558b8; }
    30%  { transform: scale(0.88); background: #0d47a1; }
    65%  { transform: scale(0.99); background: #1558b8; }
    100% { transform: scale(0.97); background: #1558b8; }
  }
  .gscene.is-button-pressed .gscene-reply-btn {
    animation: btn-press 0.55s cubic-bezier(.3, 1.3, .5, 1);
  }
  /* While Agent #5 is hovering on the Reply button, show a pressed-hover look */
  .gscene:has(.gscene-agent--5.is-at-button) .gscene-reply-btn {
    background: #1558b8;
    transform: scale(0.97);
    transition: background 0.18s ease, transform 0.18s ease, opacity 0.4s ease;
  }

  /* Published "Response from the owner · 1 second ago" header (expands from 0 height when is-published) */
  .gscene-published-head {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: #202124;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
  }
  .gscene-published-head strong { font-weight: 600; color: #202124; }
  .gscene.is-published .gscene-published-head {
    opacity: 1;
    max-height: 36px;
    margin-bottom: 8px;
    transition: opacity 0.4s ease 0.3s, max-height 0.4s ease 0.3s, margin-bottom 0.4s ease 0.3s;
  }

  /* Publish scene starts with highlight labels visible (continuation of Step 3 end state) */
  .gscene[data-scene="publish"] .gscene-mark-label {
    opacity: 1;
    transform: translateY(0);
  }
  .gscene[data-scene="publish"] { min-height: 460px; }

  /* Clean state — marks + labels fade out (applied when Agent #5 finishes reading).
     Also animate the padding away so the text flows without extra spacing once
     the highlight backgrounds disappear. */
  .gscene.is-clean .gscene-mark {
    background: transparent;
    border-bottom-color: transparent;
    padding: 0;
    transition: background 0.8s ease, border-bottom-color 0.8s ease, padding 0.8s ease;
  }
  .gscene.is-clean .gscene-mark-label {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  /* Published state — blue-bordered editor morphs into classic indented Google reply */
  .gscene.is-published .gscene-response {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #dadce0;
    border-radius: 0;
    padding: 8px 0 6px 14px;
    transition: border-color 0.55s ease, border-radius 0.55s ease, padding 0.55s ease;
  }
  .gscene.is-published .gscene-response-label,
  .gscene.is-published .gscene-response-counter {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .gscene.is-published .gscene-reply-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  /* Agent #5 — coral, starts over text → moves across text (reading) → jumps to button → fades on publish */
  .gscene-agent--5 { --agent-bg: oklch(0.60 0.17 20); }   /* coral */

  .gscene[data-scene="publish"] .gscene-agent--5 {
    top: 62%;
    left: 8%;
    transition: opacity 0.35s ease,
                transform 0.5s cubic-bezier(.2,.8,.2,1),
                top 2s cubic-bezier(.4,0,.2,1),
                left 2s cubic-bezier(.4,0,.2,1),
                right 2s cubic-bezier(.4,0,.2,1),
                bottom 2s cubic-bezier(.4,0,.2,1);
  }
  .gscene[data-scene="publish"] .gscene-agent--5.is-at-right {
    left: min(72%, calc(100% - 210px));
    animation: read-wave 2s ease-in-out;
  }
  .gscene[data-scene="publish"] .gscene-agent--5.is-at-button {
    top: 82%;
    left: min(74%, calc(100% - 210px));
    animation: none;
    transition: opacity 0.35s ease,
                transform 0.5s cubic-bezier(.2,.8,.2,1),
                top 0.7s cubic-bezier(.2,.8,.2,1),
                left 0.7s cubic-bezier(.2,.8,.2,1);
  }
  /* Mobile only: nudge Agent #5 lower in the GOING LIVE panel so the pill
     actually lands on the Reply button (desktop position is perfect). */
  @media (max-width: 820px) {
    .how-vdtm .gscene[data-scene="publish"] .gscene-agent--5.is-at-button {
      top: 92%;
    }
  }
  .gscene.is-published .gscene-agent--5 {
    opacity: 0;
    transition: opacity 1.2s ease-out;
  }

  @keyframes read-wave {
    0%, 100% { transform: translateY(0) scale(1); }
    25%      { transform: translateY(-4px) scale(1); }
    50%      { transform: translateY(3px) scale(1); }
    75%      { transform: translateY(-3px) scale(1); }
  }

  /* ============ PHONE HERO SCENE — compact gscene tuned for the hero phone ============ */
  .phone-demo {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    padding: 2px 14px 16px;
  }
  .phone-demo > .gscene {
    position: relative;
    padding: 0;
    min-height: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    font-size: 12px;
  }
  .phone-demo .gscene-card {
    grid-template-columns: 32px 1fr;
    column-gap: 10px;
    row-gap: 4px;
  }
  .phone-demo .gscene-thread-line { margin-bottom: -4px; }
  .phone-demo .gscene-av--reviewer { width: 32px; height: 32px; font-size: 11px; }
  .phone-demo .gscene-av--owner { width: 32px; height: 32px; font-size: 11px; }
  .phone-demo .gscene-name { font-size: 12px; }
  .phone-demo .gscene-meta { font-size: 10.5px; }
  .phone-demo .gscene-stars svg { width: 10px; height: 10px; }
  .phone-demo .gscene-date { font-size: 10.5px; }
  .phone-demo .gscene-body {
    font-size: 11.5px;
    line-height: 1.45;
  }
  .phone-demo .gscene-actions {
    font-size: 10.5px;
    gap: 14px;
    padding: 2px 0 0;
  }
  .phone-demo .gscene-actions svg { width: 12px; height: 12px; }

  .phone-demo .gscene-response {
    padding: 10px 10px 16px;
    margin-top: 0;
  }
  .phone-demo .gscene-response-label {
    top: -7px;
    left: 12px;
    font-size: 9px;
    padding: 0 4px;
  }
  .phone-demo .gscene-response-body {
    font-size: 11.5px;
    line-height: 1.5;
  }
  .phone-demo .gscene-response-counter { font-size: 9.5px; }
  .phone-demo .gscene-published-head {
    font-size: 10.5px;
    gap: 6px;
  }
  .phone-demo .gscene-published-head strong { font-size: 11px; }

  .phone-demo .gscene-reply-btn {
    padding: 6px 14px;
    font-size: 11.5px;
    margin-top: 6px;
  }

  .phone-demo .gscene-agent {
    font-size: 10px;
    padding: 3px 10px 3px 3px;
    gap: 5px;
    letter-spacing: 0;
  }
  .phone-demo .gscene-agent-av {
    width: 20px; height: 20px; font-size: 7.5px;
  }

  .phone-demo .gscene-mark {
    padding: 1px 3px;
    border-radius: 2px;
  }
  .phone-demo .gscene-mark-label {
    font-size: 9px;
    padding: 1px 5px;
    bottom: calc(100% + 5px);
  }

  /* Hero phone Phase 0 — Reply action (Google-style) lives inside Like/Share row.
     The owner avatar + meta + response + publish button only appear after Agent #1
     clicks Reply, matching the real Google Reviews interaction flow. */
  .phone-demo .gscene-reply-action {
    padding: 2px 6px 2px 2px;
    margin-left: -2px;
    border-radius: 4px;
    transform-origin: center;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  }
  .phone-demo .gscene.is-reply-pressed .gscene-reply-action {
    color: #1a73e8;
    background: rgba(26, 115, 232, 0.16);
    transform: scale(0.94);
  }
  /* Visible "click" feedback — Agent #1 pill quickly presses down then bounces
     back to size, mimicking a mouse-down / mouse-up on the Reply button. */
  @keyframes agent-click-press {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(1px) scale(0.82); }
    70%  { transform: translateY(0)   scale(1.06); }
    100% { transform: translateY(0)   scale(1); }
  }
  .phone-demo .gscene.is-reply-pressed .gscene-agent--1 {
    animation: agent-click-press 0.45s cubic-bezier(.2, 1, .4, 1);
  }
  .phone-demo .gscene-av--owner,
  .phone-demo .gscene-owner-meta,
  .phone-demo .gscene-reply-btn {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .phone-demo .gscene.is-reply-clicked .gscene-av--owner,
  .phone-demo .gscene.is-reply-clicked .gscene-owner-meta {
    opacity: 1;
  }
  .phone-demo .gscene.is-reply-clicked:not(.is-published) .gscene-reply-btn {
    opacity: 1;
  }
  .phone-demo .gscene.is-reply-clicked .gscene-response {
    opacity: 1;
    transform: translateY(0);
  }
  /* Phone-specific agent #1 positions — pill reads the review, hovers above the
     Reply button (leaving it visible), and then bounces across the response body
     while the draft is being typed below it. */
  .phone-demo .gscene[data-scene="draft"] .gscene-agent--1 {
    top: 18%;
  }
  .phone-demo .gscene[data-scene="draft"] .gscene-agent--1.is-clicking-reply {
    top: 24%;
    left: 6%;
    animation: none;
  }
  .phone-demo .gscene[data-scene="draft"] .gscene-agent--1.is-drafting {
    top: 68%;
    left: 6%;
    animation: read-wave 2s ease-in-out infinite;
  }
  .phone-demo .gscene[data-scene="draft"] .gscene-agent--1.is-drafting-right {
    left: min(62%, calc(100% - 200px));
  }
  /* Agent #5 click position on phone — pill sits right over the Reply button
     (which is at the bottom-right corner of the card on narrow phones). */
  .phone-demo .gscene[data-scene="publish"] .gscene-agent--5.is-at-button {
    top: 70%;
    left: calc(100% - 100px);
  }
  /* Mobile only: the gscene-card stretches taller on narrow phones, so the
     Reply button sits much lower — drop Agent #5 to actually land on it. */
  @media (max-width: 900px) {
    .phone-demo .gscene[data-scene="publish"] .gscene-agent--5.is-at-button {
      top: 88%;
    }
  }

  /* ============ GSCENE — LEARN (Step 1: internal dashboard scanning sources) ============ */
  .gscene--learn {
    padding: 0;
    overflow: hidden;
  }
  .learn-head {
    padding: 14px 18px;
    background: #f8f9fa;
    border-bottom: 1px solid #e8eaed;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .learn-label {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5f6368;
  }
  .learn-client {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: #202124;
    letter-spacing: -0.005em;
  }
  .learn-colhead {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.95fr;
    gap: 14px;
    padding: 8px 18px;
    background: #fafafb;
    border-bottom: 1px solid #e8eaed;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #70757a;
  }
  .learn-table { display: flex; flex-direction: column; }
  .learn-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.95fr;
    gap: 14px;
    padding: 11px 18px;
    border-bottom: 1px solid #e8eaed;
    font-size: 13px;
    color: #202124;
    align-items: center;
    transition: background 0.35s ease;
    min-height: 44px;
  }
  .learn-row:last-child { border-bottom: 0; }
  .learn-row.is-checking { background: color-mix(in oklab, var(--primary) 9%, transparent); }
  .learn-row.is-done { background: color-mix(in oklab, oklch(0.60 0.08 155) 7%, transparent); }
  .learn-source { font-weight: 500; }
  .learn-when {
    font-family: var(--sans);
    font-size: 11.5px;
    color: #5f6368;
  }
  .learn-row.is-done .learn-when { color: oklch(0.42 0.10 155); font-weight: 600; }
  .learn-status {
    font-family: var(--sans);
    font-size: 11.5px;
    color: #5f6368;
  }
  .learn-status-idle,
  .learn-status-checking,
  .learn-status-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .learn-status-checking,
  .learn-status-done { display: none; }
  .learn-when-done { display: none; }
  .learn-row.is-checking .learn-status-idle { display: none; }
  .learn-row.is-checking .learn-status-checking { display: inline-flex; color: oklch(0.50 0.13 45); }
  .learn-row.is-done .learn-when-idle { display: none; }
  .learn-row.is-done .learn-when-done { display: inline; }
  .learn-row.is-done .learn-status-idle { display: none; }
  .learn-row.is-done .learn-status-done { display: inline-flex; color: oklch(0.42 0.10 155); }
  .learn-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: learn-pulse 0.9s ease-in-out infinite;
  }
  .learn-status-done svg {
    width: 14px; height: 14px;
    stroke-width: 3;
  }
  @keyframes learn-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
  }

  /* Mobile — Source column gets most of the width back; Last checked is trimmed
     to the minimum ("7d ago"); Status is sized just enough for the longest
     state label ("Checking now…") with nowrap as a safety net. */
  @media (max-width: 820px) {
    .learn-colhead,
    .learn-row {
      grid-template-columns: 1.55fr 0.4fr 1.15fr;
      gap: 6px;
      padding-inline: 12px;
    }
    .learn-source {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
    }
    .learn-when,
    .learn-status { font-size: 11px; }
    .learn-status-idle,
    .learn-status-checking,
    .learn-status-done { white-space: nowrap; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gscene, .gscene-response, .gscene-response-stack .gscene-v2,
    .gscene-agent, .gscene-mark-label {
      transition: none !important;
      animation: none !important;
    }
    .gscene-response-body::after { display: none !important; }
    .learn-row { transition: none !important; }
    .learn-status-dot { animation: none !important; }
  }

  /* ============ DIFFERENCE ============ */
  .diff {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  @media (max-width: 820px) {
    .diff {
      grid-template-columns: 1fr;
      gap: 30px;
      background: transparent;
      border: 0;
      border-radius: 0;
      overflow: visible;
    }
    .diff-col {
      border: 1px solid var(--rule);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
  }
  .diff-col {
    background: var(--bg-card);
    padding: 28px 26px 30px;
    display: flex; flex-direction: column;
    position: relative;
  }
  .diff-col.winner {
    background: var(--ink);
    color: var(--on-dark);
  }
  .diff-head { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
  .diff-col.winner .diff-head { color: color-mix(in oklab, var(--primary) 80%, #fff); }
  .diff-name {
    font-family: var(--display);
    font-size: clamp(24px, 3vw, 30px);
    margin-top: 10px; line-height: 1.1; letter-spacing: -0.02em;
    font-weight: 500;
  }
  .diff-verdict {
    margin-top: 18px; font-size: 15px; line-height: 1.55;
    color: var(--ink-soft);
  }
  .diff-col.winner .diff-verdict { color: color-mix(in oklab, var(--on-dark) 85%, transparent); }
  .diff-price {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--display);
    font-size: 28px; letter-spacing: -0.02em;
  }
  .diff-col.winner .diff-price { border-top-color: color-mix(in oklab, var(--on-dark) 20%, transparent); }
  .diff-price .unit { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-mute); }
  .diff-col.winner .diff-price .unit { color: color-mix(in oklab, var(--on-dark) 60%, transparent); }
  .badge-best {
    position: absolute; top: 14px; right: 14px;
    background: var(--primary); color: #042D24;
    font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
  }
  .diff-stat {
    margin-top: auto;
    padding-top: 20px;
  }
  .diff-stat .big {
    font-family: var(--display); font-size: 34px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--danger);
  }
  .diff-col.winner .diff-stat .big { color: var(--primary); }
  .diff-stat .lbl { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }

  
/* ============ Why-v6 — V1 copy + SVG checklists ============ */
  .why-v6 { background: #F8F2EB; }
  .why-v6 .diff-verdict { margin-top: 18px; margin-bottom: 22px; font-size: 16px; line-height: 24px; }
  .why-v6 .verdict-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: clamp(100px, 12vw, 140px);
  }
  .why-v6 .verdict-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 24px;
  }
  .why-v6 .diff-col:not(.winner) .verdict-list li { color: var(--danger); }
  .why-v6 .diff-col.winner .verdict-list li { color: color-mix(in oklab, var(--on-dark) 90%, transparent); }
  .why-v6 .verdict-icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 4px;
  }
  .why-v6 .source-tag {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-mute);
    margin-left: 4px;
  }
  .why-v6 .source-logo { margin-top: 18px; }
  .why-v6 .source-logo img { width: 125px; height: auto; display: block; }
  .why-v6 .diff-stat {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
  }
  .why-v6 .diff-col.winner .diff-stat { border-top-color: color-mix(in oklab, var(--on-dark) 22%, transparent); }
  .why-v6 .diff-stat .big {
    font-family: var(--display);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .why-v6 .diff-col:not(.winner) .diff-stat .big { color: var(--danger); }
  .why-v6 .diff-col.winner .diff-stat .big { color: var(--primary); }
  .why-v6 .diff-stat .lbl {
    font-size: 14px;
    color: var(--ink-mute);
    margin-top: 8px;
    font-style: normal;
    max-width: 30ch;
  }
  .why-v6 .diff-col.winner .diff-stat .lbl { color: color-mix(in oklab, var(--on-dark) 60%, transparent); }

  /* Von Restorff — Option C (winner) is taller than Options A and B.
     A and B use their own content height (align-self: start) so they end at the diff-stat
     line. Each card has its OWN border + outer radii (no shared container frame),
     so the empty area below A/B is just the page, not a bordered rounded block. */
  .why-v6 .diff {
    background: transparent;
    gap: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .why-v6 .diff-col { border: 1px solid var(--rule); }
  .why-v6 .diff-col:nth-child(2),
  .why-v6 .diff-col.winner { border-left: 0; }
  .why-v6 .diff-col:first-child {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .why-v6 .diff-col.winner {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .why-v6 .diff-col:not(.winner) { align-self: start; }
  .why-v6 .diff-col.winner { padding-bottom: 50px; }
  .why-v6 .diff-col.winner .diff-cta {
    margin-top: 48px;
    padding: 15px 40px;
    background: #fff;
    color: #042D24;
    align-self: center;
  }
  .why-v6 .diff-col.winner .diff-cta:hover {
    background: #DAFF99;
    color: #042D24;
    transform: translateY(-1px);
  }
  .why-v6 .diff-col.winner .diff-cta-sub {
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.62);
    align-self: center;
  }
  @media (max-width: 820px) {
    /* On mobile the cards stack vertically — each card gets a full border + full rounding */
    .why-v6 .diff { gap: 30px; }
    .why-v6 .diff-col,
    .why-v6 .diff-col:nth-child(2),
    .why-v6 .diff-col.winner {
      border: 1px solid var(--rule);
      border-radius: var(--radius-lg);
    }
    .why-v6 .diff-col:not(.winner) { align-self: stretch; }
    .why-v6 .diff-col.winner { padding-bottom: 30px; }
  }

  /* ============ Why V7 — dark section + accent-green winner cell ============ */
  .why-v7 { background: #042D24; }
  .why-v7 .section-head h2,
  .why-v7 .section-head p,
  .why-v7 .section-head p strong,
  .why-v7 .section-head p em { color: #fff; }
  .why-v7 .diff-col.winner { background: #DAFF99; color: var(--ink); }
  .why-v7 .diff-col.winner .diff-head { color: var(--ink-mute); }
  .why-v7 .diff-col.winner .diff-verdict { color: var(--ink-soft); }
  .why-v7 .diff-col.winner .verdict-list li { color: var(--ink); }
  .why-v7 .diff-col.winner .diff-stat { border-top-color: rgba(4,45,36,0.18); }
  .why-v7 .diff-col.winner .diff-stat .big { color: var(--ink); }
  .why-v7 .diff-col.winner .diff-stat .lbl { color: var(--ink-mute); }

  /* ============ TESTIMONIALS ============ */
  .t-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 820px) {
    .t-scroll {
      display: flex; overflow-x: auto; gap: 14px;
      scroll-snap-type: x mandatory;
      margin-inline: calc(var(--pad) * -1);
      padding-inline: var(--pad);
      padding-bottom: 8px;
    }
    .t-scroll .t-card { flex: 0 0 82%; scroll-snap-align: start; }
  }
  .t-card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    min-height: 420px;
  }
  .t-photo {
    aspect-ratio: 4/3;
    position: relative;
    background: var(--bg-alt) center / cover no-repeat;
    overflow: hidden;
  }
  .t-photo .badge {
    position: absolute; top: 14px; left: 14px;
    font-family: var(--sans); font-size: 10.5px;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: var(--ink);
  }
  .t-photo .stat {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
    color: #fff;
    font-family: var(--display);
    font-size: clamp(22px, 2.6vw, 28px);
    letter-spacing: -0.015em;
    border: 0;
  }
  .t-body {
    padding: 20px 22px 22px;
    display: flex; flex-direction: column; gap: 14px;
    flex: 1;
  }
  .t-quote {
    font-family: var(--display);
    font-size: 19px; line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .t-meta {
    margin-top: auto;
    font-size: 13.5px;
    color: var(--ink-mute);
    display: flex; flex-direction: column; gap: 2px;
  }
  .t-meta .name { color: var(--ink); font-weight: 600; font-family: var(--sans); }

  /* ============ TESTIMONIALS V2 — full-image cards (dark gradient + white text, matches What silence costs V1) ============ */
  .t-scroll-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 820px) {
    .t-scroll-v2 {
      display: flex; overflow-x: auto; gap: 14px;
      scroll-snap-type: x mandatory;
      margin-inline: calc(var(--pad) * -1);
      padding-inline: 0;
      padding-bottom: 8px;
      scroll-padding-inline-start: var(--pad);
    }
    .t-scroll-v2 > .t-card-v2:first-child { margin-inline-start: var(--pad); }
    .t-scroll-v2 > .t-card-v2:last-child { margin-inline-end: var(--pad); }
    .t-scroll-v2 .t-card-v2 { flex: 0 0 82%; scroll-snap-align: start; box-shadow: none; }
  }

  .t-card-v2 {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    min-height: clamp(440px, 50vw, 560px);
    background: #1a1812 center / cover no-repeat;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 30px 60px -32px color-mix(in oklab, var(--ink) 50%, transparent);
  }
  .t-card-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      transparent 0%,
      transparent 35%,
      rgba(20,18,14,0.85) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .t-card-v2 > * { position: relative; z-index: 1; }

  .t-card-v2 .t-v2-badge {
    position: absolute;
    top: 14px; left: 14px;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: #042D24;
    z-index: 2;
  }

  .t-v2-body {
    padding: clamp(20px, 2.6vw, 34px);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .t-v2-stat {
    font-family: var(--display);
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-weight: 500;
    color: #fff;
  }
  .t-v2-stat-sub {
    color: rgba(255,255,255,0.7);
    font-size: 0.44em;
    font-family: var(--sans);
    letter-spacing: 0.04em;
    display: block;
    margin-top: 4px;
  }

  .t-v2-quote {
    font-family: var(--display);
    font-size: clamp(17px, 1.7vw, 20px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0;
  }

  .t-v2-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.78);
    margin-top: 2px;
  }
  .t-v2-meta .t-v2-name {
    color: #fff;
    font-weight: 600;
    font-family: var(--sans);
  }

  /* ============ PRICING ============ */
  .price-card {
    max-width: 920px; margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    position: relative;
    box-shadow: 0 40px 80px -48px color-mix(in oklab, var(--ink) 50%, transparent);
  }
  .price-card::before {
    content: "";
    position: absolute;
    top: clamp(28px, 4vw, 44px);
    bottom: clamp(28px, 4vw, 44px);
    left: 50%;
    width: 1px;
    background: var(--rule);
  }
  @media (max-width: 780px) {
    .price-card::before { display: none; }
  }
  @media (max-width: 780px) { .price-card { grid-template-columns: 1fr; } }
  .price-left { display: flex; flex-direction: column; }
  .price-tag {
    display: flex; align-items: baseline; gap: 6px;
    font-family: var(--display);
    letter-spacing: -0.03em;
  }
  .price-tag .amt { font-size: clamp(84px, 11vw, 132px); line-height: 0.9; font-weight: 500; }
  .price-tag .dollar { font-size: 19px; color: var(--ink-mute); font-family: var(--sans); letter-spacing: 0.04em; }
  .price-tag .per { font-size: 19px; font-family: var(--sans); color: var(--ink-mute); letter-spacing: 0.04em; align-self: end; padding-bottom: 12px; }
  .price-sub { margin-top: 6px; color: var(--ink-soft); font-size: 16px; max-width: 34ch; }
  .price-trust { margin-top: 18px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
  .price-trust .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
  .price-right { display: flex; flex-direction: column; gap: 18px; }
  .price-features {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 10px;
  }
  .price-features li {
    display: flex; align-items: center; gap: 10px;
    font-size: 15.5px; color: var(--ink);
  }
  .price-features li svg { width: 16px; height: 16px; color: #042D24; flex-shrink: 0; }
  .price-cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
  .price-cta .btn { width: 100%; padding: 18px 22px; font-size: 17px; }
  .price-finep {
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink-mute);
    font-family: var(--sans);
  }
  .price-foot-note {
    max-width: 920px; margin: 16px auto 0;
    font-size: 12.5px; color: var(--ink-mute);
    text-align: center;
    font-family: var(--sans);
  }

  .mini-reviews {
    max-width: 920px; margin: 36px auto 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  @media (max-width: 780px) { .mini-reviews { grid-template-columns: 1fr; } }
  .mini {
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 16px 18px;
    background: #FFFFFF;
    font-size: 14.5px; line-height: 1.45; color: var(--ink-soft);
    text-align: center;
  }
  .mini .stars { display: flex; justify-content: center; margin: 0 0 10px; }

  
  /* ============ Pricing V2 — brand block + left-aligned CTA ============ */
  .pricing-v2 .price-brand { margin-bottom: 0; }
  .pricing-v2 .price-brand-eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 8px;
  }
  .pricing-v2 .price-brand-name {
    font-family: var(--display);
    font-size: 30px;
    line-height: 33px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .pricing-v2 .price-left { justify-content: space-between; }
  .pricing-v2 .price-cta { margin-top: 0; margin-right: 50px; }
  .pricing-v2 .price-features li svg { width: 18px; height: 18px; color: inherit; }
  .pricing-v2 .price-finep { text-align: center; }
  .pricing-v2 .mini { background: transparent; border: 0; }
  @media (max-width: 780px) {
    .pricing-v2 .price-card {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .pricing-v2 .price-left,
    .pricing-v2 .price-right { display: contents; }
    .pricing-v2 .price-brand { order: 1; margin-bottom: 0; }
    .pricing-v2 .price-tag { order: 2; }
    .pricing-v2 .price-features {
      order: 3;
      border-top: 1px solid var(--rule);
      padding-top: 24px;
      margin-top: 0;
    }
    .pricing-v2 .price-cta {
      order: 4;
      margin-top: 0;
      margin-right: 0;
    }
  }

  /* ============ FAQ ============ */
  .faq-wrap { max-width: 760px; margin: 0 auto; }
  details.faq {
    border-bottom: 1px solid var(--rule);
    padding: 6px 0;
  }
  details.faq[open] summary svg { transform: rotate(45deg); }
  details.faq summary {
    cursor: pointer; list-style: none;
    padding: 20px 4px 20px 0;
    display: flex; justify-content: space-between; align-items: center;
    gap: 18px;
    font-size: 17px; font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary svg { width: 18px; height: 18px; transition: transform .25s ease; color: var(--ink-mute); flex-shrink: 0; }
  details.faq .a {
    padding: 0 4px 22px 28px;
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 64ch;
  }
  .faq-footer {
    margin-top: 40px;
    text-align: center;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink-soft);
  }
  .faq-footer a {
    color: var(--ink);
    text-decoration: underline;
    font-weight: 500;
  }

  /* ============ FINAL + FOOTER (dark) ============ */
  .finale {
    background: var(--dark);
    color: var(--on-dark);
    padding-top: clamp(72px, 10vw, 128px);
    padding-bottom: clamp(56px, 8vw, 88px);
    position: relative;
    overflow: hidden;
  }
  .finale-inner { position: relative; }
  .finale h2 {
    font-size: clamp(40px, 6.5vw, 78px);
    max-width: 18ch;
    color: var(--on-dark);
  }
  .finale h2 em { font-style: italic; color: color-mix(in oklab, var(--primary) 90%, #fff); font-weight: 400; }
  .finale p {
    margin-top: 22px;
    max-width: 52ch;
    color: color-mix(in oklab, var(--on-dark) 78%, transparent);
    font-size: clamp(16px, 1.7vw, 19px);
  }
  .finale-cta-row { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
  .finale .btn-primary { background: #fff; color: var(--dark); }
  .finale .btn-primary:hover { background: var(--primary); color: #072A1F; }
  .finale-trust { margin-top: 18px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: color-mix(in oklab, var(--on-dark) 60%, transparent); display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
  .finale-trust .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }

  /* Ticker of unanswered */
  .ticker-frame {
    margin-top: clamp(44px, 6vw, 72px);
    border-top: 1px solid color-mix(in oklab, var(--on-dark) 14%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--on-dark) 14%, transparent);
    padding: 14px 0;
    overflow: hidden;
    position: relative;
  }
  .ticker-frame::before, .ticker-frame::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
  }
  .ticker-frame::before { left: 0; background: linear-gradient(90deg, var(--dark), transparent); }
  .ticker-frame::after  { right: 0; background: linear-gradient(-90deg, var(--dark), transparent); }
  .ticker {
    display: flex; gap: 48px;
    font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--on-dark) 55%, transparent);
    white-space: nowrap;
    animation: ticker 40s linear infinite;
  }
  .ticker span { display: inline-flex; align-items: center; gap: 10px; }
  .ticker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
  @keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Footer — now a standalone block below the finale section */
  .footer {
    background: var(--dark);
    padding: 26px 0 28px;
    border-top: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
    color: color-mix(in oklab, var(--on-dark) 65%, transparent);
    font-size: 13.5px;
  }
  .footer-copyright {
    margin-top: 18px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  /* ============ Footer V2 — white bg, huge 2-line logo, 2-col links, centered copyright ============ */
  .footer-v2 {
    background: #fff;
    color: #042D24;
    border-top: 0;
    padding: clamp(48px, 6vw, 80px) 0 clamp(24px, 3vw, 32px);
  }
  .footer-v2-main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  @media (max-width: 860px) {
    .footer-v2-main { grid-template-columns: 1fr; }
  }
  /* Huge 2-line logo */
  .footer-v2-logo {
    display: flex;
    flex-direction: column;
    font-family: var(--display);
    font-size: clamp(56px, 10vw, 120px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: #042D24;
    text-decoration: none;
  }
  .footer-v2-logo-pair {
    display: inline-flex;
    align-items: flex-start;
    gap: 0;
  }
  .footer-v2-logo-icon {
    width: clamp(32px, 6vw, 64px);
    height: clamp(32px, 6vw, 64px);
    flex-shrink: 0;
    margin-left: 6px;
    margin-top: 8px;
  }
  /* Link columns */
  .footer-v2-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, auto));
    gap: clamp(32px, 5vw, 72px);
  }
  @media (max-width: 520px) {
    .footer-v2-cols { grid-template-columns: 1fr; gap: 28px; }
  }
  .footer-v2-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer-v2-col h4 {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(4, 45, 36, 0.55);
    margin: 0 0 4px 0;
  }
  .footer-v2-col a {
    color: #042D24;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.4;
  }
  .footer-v2-col a:hover { opacity: 0.6; }
  /* Centered copyright */
  .footer-v2-copyright {
    margin-top: clamp(40px, 6vw, 72px);
    padding-top: clamp(20px, 2vw, 28px);
    border-top: 1px solid rgba(4, 45, 36, 0.12);
    text-align: center;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(4, 45, 36, 0.55);
  }

  /* ============ Footer V3 — white bg, top text+menus, MASSIVE clipped brand at bottom ============ */
  .footer-v3 {
    background: #fff;
    color: #042D24;
    padding: clamp(48px, 6vw, 80px) 0 0 0;
    overflow: hidden; /* clips the oversized brand at the bottom */
    position: relative;
  }
  .footer-v3-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
    margin-bottom: clamp(40px, 6vw, 80px);
  }
  @media (max-width: 860px) {
    .footer-v3-top { grid-template-columns: 1fr; }
  }
  .footer-v3-heading {
    font-family: var(--display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #042D24;
    margin: 0;
    max-width: 20ch;
  }
  .footer-v3-body {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(4, 45, 36, 0.7);
    max-width: 40ch;
  }
  .footer-v3-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, auto));
    gap: clamp(32px, 5vw, 72px);
  }
  @media (max-width: 520px) {
    .footer-v3-cols { grid-template-columns: 1fr 1fr; gap: 16px; }
  }
  .footer-v3-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer-v3-col h4 {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(4, 45, 36, 0.55);
    margin: 0 0 4px 0;
  }
  .footer-v3-col a {
    color: #042D24;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.4;
  }
  .footer-v3-col a:hover { opacity: 0.6; }

  /* Massive single-line brand clipped at the bottom edge */
  .footer-v3-brand,
  .onboarding-bottom-brand {
    font-family: var(--display);
    font-size: clamp(60px, 10.5vw, 220px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #042D24;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding-inline: clamp(18px, 4vw, 40px);
    margin-bottom: -0.2em; /* overflow: hidden on .footer-v3 crops the bottom ~20% of the glyphs */
    user-select: none;
  }
  .footer-v3-brand-pair,
  .onboarding-bottom-brand-pair {
    display: inline-flex;
    align-items: flex-start;
  }
  .footer-v3-icon,
  .onboarding-bottom-icon {
    width: 0.45em;
    height: 0.45em;
    flex-shrink: 0;
    margin-left: -0.15em;  /* pull icon left to overlap with the last letter (matches nav) */
    margin-top: 0.05em;    /* nudge down from the very top of the caps */
    margin-right: 0;
  }
  .footer-v3-icon--check,
  .onboarding-bottom-icon--check { width: 0.4em; height: 0.4em; }

  /* Sequenced reveal (matches the nav logo animation timing + 1.2s lead-in) — triggers on scroll-in */
  .footer-v3-brand .footer-v3-brand-pair:nth-child(1),
  .footer-v3-brand .footer-v3-icon--star,
  .footer-v3-brand .footer-v3-brand-pair:nth-child(2),
  .footer-v3-brand .footer-v3-icon--check,
  .onboarding-bottom-brand .onboarding-bottom-brand-pair:nth-child(1),
  .onboarding-bottom-brand .onboarding-bottom-icon--star,
  .onboarding-bottom-brand .onboarding-bottom-brand-pair:nth-child(2),
  .onboarding-bottom-brand .onboarding-bottom-icon--check { opacity: 0; }
  .footer-v3-brand.is-animated .footer-v3-brand-pair:nth-child(1),
  .onboarding-bottom-brand.is-animated .onboarding-bottom-brand-pair:nth-child(1) {
    animation: logoFadeIn 0.35s ease-out forwards;
    animation-delay: 1.2s;
  }
  .footer-v3-brand.is-animated .footer-v3-icon--star,
  .onboarding-bottom-brand.is-animated .onboarding-bottom-icon--star {
    animation: logoFadeIn 0.35s ease-out forwards;
    animation-delay: 1.7s;
  }
  .footer-v3-brand.is-animated .footer-v3-brand-pair:nth-child(2),
  .onboarding-bottom-brand.is-animated .onboarding-bottom-brand-pair:nth-child(2) {
    animation: logoFadeIn 0.35s ease-out forwards;
    animation-delay: 2.9s;
  }
  .footer-v3-brand.is-animated .footer-v3-icon--check,
  .onboarding-bottom-brand.is-animated .onboarding-bottom-icon--check {
    animation: logoFadeIn 0.35s ease-out forwards;
    animation-delay: 3.4s;
  }
  .onboarding-bottom-brand.is-static .onboarding-bottom-brand-pair,
  .onboarding-bottom-brand.is-static .onboarding-bottom-icon {
    opacity: 1;
    animation: none;
  }

  /* ============ Footer V3 — mobile overrides (≤860px) ============ */
  @media (max-width: 860px) {
    /* Stack the 2 pairs vertically, size font so "Answered + check" fits max width */
    .footer-v3-brand,
    .onboarding-bottom-brand {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: clamp(48px, 18vw, 160px);
      line-height: 0.85;
      margin-bottom: 0;
      gap: 0;
    }
    /* Keep menus as 2 columns on all mobile widths (override the stacking-to-1fr behavior) */
    .footer-v3-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
    /* Shift icons up by 10px on mobile (they drift low with the tighter line-height) */
    .footer-v3-icon,
    .onboarding-bottom-icon { margin-top: calc(0.05em - 10px); }
    /* Safe bottom padding so mobile browser UI bars don't cover the logo */
    .footer-v3 { padding-bottom: clamp(60px, 14vw, 100px); }
  }
  .footer-inner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
  }
  .footer a { color: inherit; text-decoration: none; }
  .footer a:hover { color: var(--on-dark); }
  .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
  .footer .logo { color: var(--on-dark); font-size: 17px; }
  .footer-tag { color: color-mix(in oklab, var(--on-dark) 55%, transparent); margin-top: 4px; font-size: 13px; font-family: var(--sans); letter-spacing: 0.02em; }


  /* Reveal on scroll */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* ============ TEXT PAGE TEMPLATE ============
     Used by Privacy Policy, Terms of Service, and similar long-form text pages.
     Apply with <section class="text-page">. */
  .text-page {
    --ink: #042D24;
    --ink-soft: #042D24;
    --ink-mute: rgba(4, 45, 36, 0.65);
    background: var(--bg-alt);
    color: var(--ink);
    padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 8vw, 100px);
  }
  .text-page-wrap { max-width: 740px; }
  .text-page-head {
    margin-bottom: clamp(36px, 4.5vw, 56px);
    padding-bottom: clamp(28px, 3.5vw, 40px);
    border-bottom: 1px solid var(--rule);
  }
  .text-page-head h1 {
    font-size: clamp(40px, 6vw, 64px);
    margin-top: 14px;
  }
  .text-page-lead {
    margin-top: 24px;
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--ink-mute);
    max-width: 60ch;
  }
  .text-page-body { font-size: 17px; line-height: 1.7; }
  .text-page-body > *:first-child { margin-top: 0; }
  .text-page-body h2 {
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 500;
    margin: clamp(40px, 5vw, 56px) 0 14px;
    letter-spacing: -0.01em;
  }
  .text-page-body h3 {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    margin: 28px 0 10px;
    letter-spacing: -0.005em;
  }
  .text-page-body p { margin: 0 0 18px; max-width: 65ch; }
  .text-page-body ul,
  .text-page-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
    max-width: 65ch;
  }
  .text-page-body li { margin-bottom: 8px; }
  .text-page-body li:last-child { margin-bottom: 0; }
  .text-page-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(4, 45, 36, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
  }
  .text-page-body a:hover { text-decoration-color: rgba(4, 45, 36, 0.9); }
  .text-page-body strong { font-weight: 600; }

  /* ============ CONTACT PAGE ============
     Two-column on desktop (form | FAQ), stacked on mobile.
     Cream bg + dark green text, same colour treatment as text pages. */
  .contact-page {
    --ink: #042D24;
    --ink-soft: #042D24;
    --ink-mute: rgba(4, 45, 36, 0.65);
    background: var(--bg-alt);
    color: var(--ink);
    padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 8vw, 100px);
  }
  .contact-grid {
    display: grid;
    gap: clamp(48px, 6vw, 72px);
    grid-template-columns: 1fr;
  }
  @media (min-width: 880px) {
    .contact-grid {
      grid-template-columns: 1.15fr 1fr;
      gap: clamp(48px, 6vw, 96px);
      align-items: start;
    }
  }

  /* Left column — heading, copy, form */
  .contact-intro h1 {
    font-size: clamp(40px, 6.4vw, 72px);
    margin-top: 14px;
  }
  .contact-intro > p {
    margin-top: 22px;
    font-size: clamp(17px, 1.6vw, 19px);
    color: var(--ink-mute);
    max-width: 50ch;
    line-height: 1.55;
  }

  /* Form */
  .contact-form {
    margin-top: clamp(28px, 3.5vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .contact-form-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
  @media (min-width: 600px) {
    .contact-form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  }
  .contact-field { display: flex; flex-direction: column; gap: 8px; }
  .contact-label {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
  }
  .contact-optional {
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    opacity: 0.7;
  }
  .contact-input,
  .contact-textarea {
    font: inherit;
    font-family: var(--sans);
    width: 100%;
    padding: 13px 14px;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 10px;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .contact-textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.55;
  }
  .contact-input:focus,
  .contact-textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(4, 45, 36, 0.10);
  }
  .contact-input::placeholder,
  .contact-textarea::placeholder {
    color: rgba(4, 45, 36, 0.40);
  }
  .contact-input.has-error,
  .contact-textarea.has-error {
    border-color: var(--danger);
    background: rgba(184, 78, 68, 0.04);
  }
  .contact-error {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--danger);
    font-weight: 500;
    letter-spacing: 0.005em;
    margin-top: -2px;
  }

  /* Honeypot — visually invisible, accessible to screen readers but tabindex=-1 */
  .contact-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* Submit button — dark green pill */
  .contact-submit {
    margin-top: 8px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background: var(--bg);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s;
  }
  .contact-submit:hover {
    background: #052f26;
    transform: translateY(-1px);
  }
  .contact-submit:active { transform: translateY(0); }
  .contact-submit:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }

  /* Inline error message above form (when whole-form error like timing/spam filter) */
  .contact-msg {
    margin-top: clamp(20px, 2.5vw, 28px);
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.55;
  }
  .contact-msg.error {
    background: rgba(184, 78, 68, 0.08);
    color: #6e2d27;
    border-left: 3px solid var(--danger);
  }

  /* Success card — replaces the form once a message has been sent */
  .contact-success-card {
    margin-top: clamp(28px, 3.5vw, 40px);
    padding: clamp(28px, 3.5vw, 36px);
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .contact-success-icon {
    width: 44px;
    height: 44px;
    color: var(--sage);
    flex-shrink: 0;
  }
  .contact-success-card h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .contact-success-card p {
    margin: 0;
    font-size: 16px;
    color: var(--ink-mute);
    line-height: 1.6;
  }

  /* Right column — Quick Answers */
  .contact-faq h2 {
    font-size: clamp(26px, 3.5vw, 36px);
    margin-top: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .contact-faq-list {
    margin-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--rule);
  }
  .contact-faq-item {
    border-bottom: 1px solid var(--rule);
  }
  .contact-faq-item summary {
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    list-style: none;
    color: var(--ink);
    line-height: 1.4;
    transition: color 0.15s;
  }
  .contact-faq-item summary::-webkit-details-marker { display: none; }
  .contact-faq-item summary::after {
    content: "+";
    font-size: 22px;
    color: var(--ink-mute);
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s;
  }
  .contact-faq-item[open] summary::after { content: "−"; }
  .contact-faq-item summary:hover { color: var(--ink-soft); }
  .contact-faq-item summary:hover::after { color: var(--ink); }
  .contact-faq-item-body {
    padding: 0 0 22px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-mute);
    max-width: 50ch;
  }

  /* ============ OUR STORY PAGE ============
     Multi-section editorial page about ReviewAnswered's mission.
     Alternates dark / cream backgrounds for visual rhythm — matches the homepage feel. */

  /* HERO — dark, big bold opening with full-bleed photo strip */
  .story-hero {
    background: var(--bg);
    color: var(--ink);
    padding: clamp(80px, 10vw, 140px) 0 0;
    overflow: hidden;
  }
  .story-hero h1 {
    font-size: clamp(40px, 7vw, 88px);
    margin-top: 14px;
    max-width: 18ch;
  }
  .story-hero-sub {
    margin-top: 28px;
    font-size: clamp(17px, 1.7vw, 21px);
    max-width: 60ch;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
  }
  .story-hero-collage {
    margin-top: clamp(56px, 7vw, 96px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }
  @media (min-width: 600px) {
    .story-hero-collage { grid-template-columns: 1fr 1fr 1fr; }
  }
  .story-hero-collage img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    filter: grayscale(10%) contrast(1.02);
  }

  /* THE UNFAIR MATH — cream, big stats grid */
  .story-problem {
    background: var(--bg-alt);
    color: #042D24;
    --ink: #042D24;
    --ink-mute: rgba(4, 45, 36, 0.65);
    padding: clamp(80px, 10vw, 140px) 0;
  }
  .story-problem h2 {
    font-size: clamp(32px, 5.5vw, 58px);
    max-width: 22ch;
    margin-top: 14px;
  }
  .story-stats-grid {
    margin-top: clamp(48px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  @media (min-width: 720px) {
    .story-stats-grid { grid-template-columns: 1fr 1fr 1fr; gap: clamp(28px, 3.5vw, 56px); }
  }
  .story-stat {
    border-top: 1px solid var(--rule);
    padding-top: 24px;
  }
  .story-stat-num {
    font-family: var(--display);
    font-size: clamp(54px, 7.5vw, 96px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.95;
  }
  .story-stat-num-suffix {
    font-size: 0.6em;
    letter-spacing: -0.02em;
    color: var(--ink-mute);
    margin-left: 2px;
  }
  .story-stat-label {
    margin-top: 14px;
    font-size: 16px;
    color: var(--ink-mute);
    line-height: 1.5;
    max-width: 28ch;
  }
  .story-body {
    margin-top: clamp(40px, 5vw, 64px);
    max-width: 62ch;
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.6;
  }

  /* MISSION QUOTE — dark, large pull quote */
  .story-mission {
    background: var(--dark);
    color: var(--on-dark);
    padding: clamp(80px, 10vw, 140px) 0;
  }
  .story-mission-quote {
    font-family: var(--display);
    font-size: clamp(30px, 5vw, 56px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 24ch;
    margin: 0;
    color: var(--on-dark);
    text-wrap: balance;
  }
  .story-mission-quote em {
    font-style: italic;
    color: color-mix(in oklab, var(--primary) 90%, #fff);
    font-weight: 400;
  }
  .story-mission-author {
    margin-top: 28px;
    margin-bottom: 0;
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--on-dark) 60%, transparent);
  }

  /* BELIEFS — cream, 2x3 / 3x2 grid of cards */
  .story-beliefs {
    background: var(--bg-alt);
    color: #042D24;
    --ink: #042D24;
    --ink-mute: rgba(4, 45, 36, 0.65);
    padding: clamp(80px, 10vw, 140px) 0 clamp(48px, 6vw, 80px);
  }
  .story-beliefs h2 {
    font-size: clamp(32px, 5.5vw, 56px);
    margin-top: 14px;
    max-width: 22ch;
  }
  .story-beliefs-grid {
    margin-top: clamp(48px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 2.5vw, 32px);
  }
  @media (min-width: 720px) {
    .story-beliefs-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1100px) {
    .story-beliefs-grid { grid-template-columns: 1fr 1fr 1fr; }
  }
  .story-belief {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .story-belief:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -20px rgba(4, 45, 36, 0.25);
  }
  .story-belief-num {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--primary-tint, #ccd5b3);
    font-weight: 500;
    color: color-mix(in oklab, var(--bg) 50%, transparent);
  }
  .story-belief h3 {
    font-family: var(--display);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
  }
  .story-belief p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-mute);
  }

  /* ORIGIN — cream, two-column (text + portrait image) */
  .story-origin {
    background: var(--bg-alt);
    color: #042D24;
    --ink: #042D24;
    --ink-mute: rgba(4, 45, 36, 0.65);
    padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 10vw, 140px);
  }
  .story-origin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
    padding-top: clamp(48px, 6vw, 80px);
    border-top: 1px solid var(--rule);
  }
  @media (min-width: 880px) {
    .story-origin-grid {
      grid-template-columns: 1.4fr 1fr;
      gap: clamp(56px, 6vw, 96px);
    }
  }
  .story-origin-text h2 {
    font-size: clamp(28px, 4.5vw, 44px);
    margin-top: 14px;
    max-width: 22ch;
    line-height: 1.1;
  }
  .story-origin-text p {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-mute);
    max-width: 60ch;
  }
  .story-origin-text p strong {
    color: var(--ink);
    font-weight: 600;
  }
  .story-origin-text em {
    font-style: italic;
    color: var(--ink);
    font-weight: 500;
  }
  .story-origin-image {
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    background: var(--rule);
    box-shadow: 0 24px 56px -28px rgba(4, 45, 36, 0.30);
  }
  .story-origin-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* WHAT WE SHIP — dark, 4-up outcomes grid */
  .story-ship {
    background: var(--bg);
    color: var(--ink);
    padding: clamp(80px, 10vw, 140px) 0;
  }
  .story-ship h2 {
    font-size: clamp(32px, 5vw, 52px);
    margin-top: 14px;
    max-width: 18ch;
  }
  .story-ship-grid {
    margin-top: clamp(48px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  @media (min-width: 600px) { .story-ship-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .story-ship-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
  .story-ship-item {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 24px;
  }
  .story-ship-num {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--primary);
  }
  .story-ship-num-suffix {
    font-size: 0.65em;
    letter-spacing: -0.01em;
  }
  .story-ship-label {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 28ch;
  }

  /* VISION + CTA — dark, closing */
  .story-vision {
    background: var(--dark);
    color: var(--on-dark);
    padding: clamp(80px, 10vw, 140px) 0;
  }
  .story-vision h2 {
    font-size: clamp(36px, 5.5vw, 64px);
    max-width: 24ch;
    margin-top: 14px;
    color: var(--on-dark);
    line-height: 1.05;
  }
  .story-vision p {
    margin-top: 22px;
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.6;
    max-width: 56ch;
    color: color-mix(in oklab, var(--on-dark) 78%, transparent);
  }
  .story-vision-cta {
    margin-top: clamp(36px, 4.5vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }
  .story-vision-cta .btn-primary {
    background: #fff;
    color: var(--dark);
  }
  .story-vision-cta .btn-primary:hover {
    background: var(--primary);
    color: #072A1F;
  }
  .story-vision-trust {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--on-dark) 60%, transparent);
  }

  /* Our Story — mobile-only adjustments */

  /* Hero collage: show only the first photo on small screens, hide the other two */
  @media (max-width: 599px) {
    .story-hero-collage img:not(:first-child) {
      display: none;
    }
  }

  /* "The unfair math" stats: become inset cells on mobile (single-column range) */
  @media (max-width: 719px) {
    .story-stat {
      background: var(--bg-card);
      border: 1px solid var(--rule);
      border-radius: 16px;
      padding: clamp(22px, 5vw, 28px);
    }
  }

  /* "What we ship every day" outcomes: become inset cells on mobile (single-column range) */
  @media (max-width: 599px) {
    .story-ship-item {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      padding: clamp(22px, 5vw, 28px);
    }
  }

  /* ============ CAREERS / WE'RE HIRING ============
     4 sections: hero (dark) → how we work (cream) → values (dark) → open positions (cream).
     Reuses .contact-* form classes for the application forms. */

  /* HERO — dark, bold typographic */
  .careers-hero {
    background: var(--bg);
    color: var(--ink);
    padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
  }
  .careers-hero h1 {
    font-size: clamp(40px, 7vw, 88px);
    margin-top: 14px;
    max-width: 18ch;
  }
  .careers-hero-sub {
    margin-top: 28px;
    font-size: clamp(17px, 1.7vw, 21px);
    max-width: 60ch;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
  }
  .careers-hero-cta {
    margin-top: clamp(36px, 4.5vw, 56px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background: var(--primary);
    color: #042D24;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: transform 0.15s, background 0.2s;
  }
  .careers-hero-cta:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--primary) 90%, #fff);
  }

  /* HOW WE WORK — cream, 5-up principle cards */
  .careers-work {
    background: var(--bg-alt);
    color: #042D24;
    --ink: #042D24;
    --ink-mute: rgba(4, 45, 36, 0.65);
    padding: clamp(80px, 10vw, 140px) 0;
  }
  .careers-work h2 {
    font-size: clamp(32px, 5.5vw, 56px);
    margin-top: 14px;
    max-width: 22ch;
  }
  .careers-work-grid {
    margin-top: clamp(48px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 2.5vw, 32px);
  }
  @media (min-width: 720px) {
    .careers-work-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1100px) {
    /* 5 items: first row 3 / second row 2 — auto-fit handles both. */
    .careers-work-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .careers-work-item {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .careers-work-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -20px rgba(4, 45, 36, 0.25);
  }
  .careers-work-num {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.14em;
    font-weight: 500;
    color: color-mix(in oklab, var(--bg) 50%, transparent);
  }
  .careers-work-item h3 {
    font-family: var(--display);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
  }
  .careers-work-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-mute);
  }

  /* OUR VALUES — dark, numbered list with bold lead-ins */
  .careers-values {
    background: var(--dark);
    color: var(--on-dark);
    padding: clamp(80px, 10vw, 140px) 0;
  }
  .careers-values h2 {
    font-size: clamp(32px, 5.5vw, 56px);
    margin-top: 14px;
    max-width: 22ch;
    color: var(--on-dark);
  }
  .careers-values-list {
    margin-top: clamp(48px, 6vw, 72px);
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .careers-value {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: clamp(28px, 3.5vw, 40px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .careers-value:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  @media (min-width: 720px) {
    .careers-value {
      grid-template-columns: 80px 1fr;
      gap: clamp(28px, 4vw, 56px);
      align-items: baseline;
    }
  }
  .careers-value-num {
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .careers-value-body h3 {
    font-family: var(--display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--on-dark);
  }
  .careers-value-body p {
    margin: 0;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.65;
    color: color-mix(in oklab, var(--on-dark) 78%, transparent);
    max-width: 65ch;
  }

  /* OPEN POSITIONS — cream, big position cards with embedded apply forms */
  .careers-positions {
    background: var(--bg-alt);
    color: #042D24;
    --ink: #042D24;
    --ink-mute: rgba(4, 45, 36, 0.65);
    padding: clamp(80px, 10vw, 140px) 0;
    scroll-margin-top: 100px; /* offset for fixed nav when scrolled to via #openings */
  }
  .careers-positions h2 {
    font-size: clamp(32px, 5.5vw, 56px);
    margin-top: 14px;
    max-width: 22ch;
  }
  .careers-positions-intro {
    margin-top: 22px;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    max-width: 60ch;
    color: var(--ink-mute);
  }
  .careers-positions-outro {
    margin-top: clamp(48px, 6vw, 72px);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-mute);
    max-width: 60ch;
    padding-top: clamp(40px, 5vw, 56px);
    border-top: 1px solid var(--rule);
  }
  .careers-positions-outro a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(4, 45, 36, 0.4);
    text-underline-offset: 3px;
  }
  .careers-positions-outro a:hover { text-decoration-color: rgba(4, 45, 36, 0.9); }

  /* Single position card */
  .careers-position {
    margin-top: clamp(48px, 6vw, 80px);
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 22px;
    padding: clamp(28px, 4vw, 56px);
    scroll-margin-top: 100px;
  }
  .careers-position-head { margin-bottom: clamp(24px, 3vw, 36px); }
  .careers-position-eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
  }
  .careers-position h3 {
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin: 10px 0 0;
    color: var(--ink);
  }
  .careers-position-meta {
    margin-top: 14px;
    font-size: 14px;
    color: var(--ink-mute);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    line-height: 1.4;
  }
  .careers-position-meta .dot {
    width: 3px; height: 3px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.5;
  }
  .careers-position-body { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); }
  .careers-section h4 {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 14px;
  }
  .careers-section p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 14px;
    max-width: 65ch;
  }
  .careers-section p:last-child { margin-bottom: 0; }
  .careers-section ul {
    margin: 0;
    padding-left: 22px;
    list-style: disc;
  }
  .careers-section li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
    max-width: 65ch;
  }
  .careers-section li:last-child { margin-bottom: 0; }
  .careers-section li strong { font-weight: 600; color: var(--ink); }
  .careers-section em {
    font-style: italic;
    color: var(--ink);
    font-weight: 500;
  }

  /* Apply collapsible — summary acts as the big button, form expands beneath */
  .careers-apply {
    margin-top: clamp(28px, 3.5vw, 40px);
    border-top: 1px solid var(--rule);
    padding-top: clamp(28px, 3.5vw, 40px);
  }
  .careers-apply-button {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--bg);
    color: #fff;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    transition: transform 0.15s, background 0.2s;
  }
  .careers-apply-button::-webkit-details-marker { display: none; }
  .careers-apply-button:hover {
    background: #052f26;
    transform: translateY(-1px);
  }
  .careers-apply-arrow {
    transition: transform 0.2s ease;
    margin-left: 2px;
  }
  .careers-apply[open] .careers-apply-arrow {
    transform: rotate(180deg);
  }
  .careers-form-wrap {
    margin-top: clamp(28px, 3.5vw, 40px);
  }

  /* Success card after submit */
  .careers-success {
    margin-top: clamp(28px, 3.5vw, 40px);
    padding: clamp(24px, 3vw, 32px);
    background: var(--bg-alt);
    border: 1px solid var(--rule);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .careers-success-icon {
    width: 40px; height: 40px;
    color: var(--sage);
    flex-shrink: 0;
  }
  .careers-success h4 {
    font-family: var(--display);
    font-size: clamp(22px, 2.8vw, 28px);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }
  .careers-success p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-mute);
    max-width: 60ch;
  }

  /* ============ ONBOARDING ============
     Single-screen stepper flow (Typeform-style). Full-bleed dark green page,
     one centered cream card, 4-segment progress indicator at top of the card.
     Used at /start (and future /start-2 etc.). Header & footer chrome are
     hidden via $hide_nav / $hide_footer flags in the partials. */

  /* Reset main padding when the nav is hidden — there is no fixed nav to clear. */
  main.no-nav { padding-top: 0; }

  .onboarding {
    background: var(--bg);
    color: #fff;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: minmax(max-content, 1fr) auto;
    align-items: center;
    justify-items: center;
    padding: clamp(34px, 5vw, 72px) clamp(18px, 4vw, 40px) 0;
    overflow: hidden;
  }
  .onboarding-wrap {
    width: 100%;
    max-width: 660px;
  }
  .onboarding-bottom-brand {
    color: #fff;
    width: 100vw;
    align-self: end;
    margin-top: clamp(30px, 4vw, 58px);
    margin-inline: calc(-1 * clamp(18px, 4vw, 40px));
    pointer-events: none;
  }
  .onboarding-card {
    background: var(--bg-card);
    color: #042D24;
    border-radius: 24px;
    padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.45);
  }

  /* Progress indicator: small label + 4 segment "panels" */
  .onboarding-progress { margin-bottom: clamp(28px, 3.5vw, 40px); }
  .onboarding-progress-label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(4, 45, 36, 0.55);
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
  }
  .onboarding-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .onboarding-step {
    height: 36px;
    background: var(--rule);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: transparent;
    font-weight: 600;
    transition: background 0.25s ease;
  }
  .onboarding-step.is-active {
    background: #042D24;
    color: #fff;
  }
  .onboarding-step.is-done {
    background: var(--sage);
    color: #fff;
  }

  /* Form */
  .onboarding-form-label {
    font-family: var(--display);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 500;
    color: #042D24;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 16px;
    display: block;
  }
  .onboarding-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  @media (min-width: 560px) {
    .onboarding-form-row { grid-template-columns: 1fr auto; }
  }
  .onboarding-input {
    font: inherit;
    font-family: var(--sans);
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 12px;
    color: #042D24;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .onboarding-input:focus {
    outline: none;
    border-color: #042D24;
    box-shadow: 0 0 0 3px rgba(4, 45, 36, 0.10);
  }
  .onboarding-input::placeholder { color: rgba(4, 45, 36, 0.40); }
  .onboarding-input.has-error {
    border-color: var(--danger);
    background: rgba(184, 78, 68, 0.04);
  }
  .onboarding-submit {
    font: inherit;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 15px;
    padding: 14px 28px;
    background: var(--primary);
    color: #042D24;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s;
    white-space: nowrap;
  }
  .onboarding-submit:hover {
    background: color-mix(in oklab, var(--primary) 88%, #fff);
    transform: translateY(-1px);
  }
  .onboarding-submit:active { transform: translateY(0); }
  .onboarding-submit:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--primary) 60%, #042D24);
    outline-offset: 2px;
  }

  .onboarding-error {
    margin: 12px 0 0;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--danger);
    font-weight: 500;
    letter-spacing: 0.005em;
  }
  .onboarding-helper {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(4, 45, 36, 0.65);
    max-width: 52ch;
  }

  /* Placeholder shown after a successful submit, until step 2 is built */
  .onboarding-placeholder {
    text-align: center;
    padding: clamp(20px, 3vw, 32px) 0;
  }
  .onboarding-placeholder h2 {
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: #042D24;
  }
  .onboarding-placeholder p {
    margin: 0 0 24px;
    color: rgba(4, 45, 36, 0.65);
    font-size: 16px;
    line-height: 1.55;
  }
  .onboarding-placeholder a {
    color: #042D24;
    text-decoration: underline;
    text-decoration-color: rgba(4, 45, 36, 0.4);
    text-underline-offset: 3px;
    font-size: 14px;
    font-weight: 500;
  }

  /* ===== Onboarding — step 4 (textarea) and welcome page ===== */

  .onboarding-form-optional {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: rgba(4, 45, 36, 0.55);
    margin-left: 6px;
  }

  .onboarding-textarea {
    font: inherit;
    font-family: var(--sans);
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 12px;
    color: #042D24;
    resize: vertical;
    min-height: 140px;
    line-height: 1.55;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .onboarding-textarea:focus {
    outline: none;
    border-color: #042D24;
    box-shadow: 0 0 0 3px rgba(4, 45, 36, 0.10);
  }
  .onboarding-textarea::placeholder { color: rgba(4, 45, 36, 0.40); }

  .onboarding-submit--block {
    align-self: flex-start;
    margin-top: 14px;
  }

  /* Welcome / completion screen */
  .onboarding-welcome {
    text-align: center;
    padding: clamp(20px, 3vw, 36px) 0 0;
  }
  .onboarding-welcome-icon {
    width: 56px;
    height: 56px;
    color: var(--sage);
    margin: 0 auto 22px;
    display: block;
  }
  .onboarding-welcome h1 {
    font-family: var(--display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0 0 16px;
    color: #042D24;
  }
  .onboarding-welcome-lead {
    font-family: var(--sans);
    font-size: clamp(17px, 1.7vw, 20px);
    color: #042D24;
    font-weight: 500;
    margin: 0 0 12px;
    line-height: 1.4;
  }
  .onboarding-welcome p:not(.onboarding-welcome-lead) {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(4, 45, 36, 0.65);
    max-width: 48ch;
    margin: 0 auto 24px;
  }
  .onboarding-welcome-link {
    font-size: 14px;
    color: #042D24;
    text-decoration: underline;
    text-decoration-color: rgba(4, 45, 36, 0.4);
    text-underline-offset: 3px;
    font-weight: 500;
    transition: text-decoration-color 0.15s;
  }
  .onboarding-welcome-link:hover { text-decoration-color: rgba(4, 45, 36, 0.9); }

  /* The form on step 4 lays out vertically (textarea is wide), not as a row */
  .onboarding-form:has(.onboarding-textarea) { display: flex; flex-direction: column; gap: 0; }