/* ===== self-hosted fonts (no external CDN dependency) ===== */
@font-face{
  font-family:'Modak';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/modak-latin-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../assets/fonts/inter-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../assets/fonts/bricolage-latin-var.woff2') format('woff2');
}

/* ============================================================
   WHY NOT — Design System
   The honest rent to own. Light theme, trust navy, one
   exclusive CTA accent (isolation effect). Motion is opt-in.
   ============================================================ */

/* ------------------------------------------------------------
   CHROMIC MINIMAL RULE (read before touching any colour)
   Outside of photography, this site uses exactly four colour
   families:
     1. Navy   — structure, headings, dark sections
     2. Cream  — section alternation, warm neutral
     3. White  — paper, cards
     4. Amber  — the ONE accent, reserved for conversion actions
                 (primary buttons, links that lead to prequalify,
                 focus rings, active/checked form states, progress
                 fill). Never used decoratively.
   --gold is NOT a second accent: it is defined as a tint of the
   same amber family (color-mix from --accent) and is only used
   for small non-CTA highlight moments (star rating glyph, stat
   numeral units) so the palette still reads as one warm hue, not
   two competing oranges.
   --green is a functional support colour (NN/g + form validation
   convention): success ticks and valid-input states only. It is
   never used for CTAs and never decorative.
   If you're about to add a colour: it must be navy, cream, white,
   the amber accent (CTA/active only), or the green success token.
   Anything else is colour noise — don't add it.
   ------------------------------------------------------------ */

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --navy: #0b1c33;
  --navy-deep: #071426;
  --navy-soft: #12294a;
  --ink: #1a2333;
  --ink-soft: #4c5a70;
  --paper: #ffffff;
  --cream: #f7f5f0;
  --line: #e6e2d9;
  --accent: #ff8a1e;            /* CTA ONLY — never decorative */
  --accent-deep: color-mix(in srgb, var(--accent) 82%, black);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, white);
  --green: #178a4c;
  --green-soft: color-mix(in srgb, var(--green) 12%, white);
  --gold: color-mix(in srgb, var(--accent) 62%, white 38%); /* tint of the ONE accent, not a second hue */

  /* type */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --fs-hero: clamp(2.4rem, 6.2vw + 0.5rem, 4.4rem);
  --fs-h2: clamp(1.7rem, 3.4vw + 0.5rem, 2.7rem);
  --fs-h3: clamp(1.2rem, 1.6vw + 0.5rem, 1.5rem);
  --fs-body: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  --fs-small: 0.875rem;

  /* shape + depth */
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 3px rgb(11 28 51 / 0.08);
  --shadow-md: 0 8px 30px rgb(11 28 51 / 0.10);
  --shadow-lg: 0 20px 60px rgb(11 28 51 / 0.16);

  /* layout */
  --wrap: 1160px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --section: clamp(4rem, 9vw, 7.5rem);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.section { padding-block: var(--section); }
/* mobile rhythm: shorten the distance between one CTA and the next by
   trimming vertical section padding — same content, less scrolling fatigue */
@media (max-width: 700px) { .section { padding-block: clamp(2.6rem, 11vw, 4rem); } }
@media (max-width: 860px) {
  /* mobile has no hover state to reveal card depth, so give every card a
     resting shadow instead of a flat border — reads more premium at a glance */
  .bento-card, .car-card, .quote-card { box-shadow: var(--shadow-sm); }
}
.section--cream {
  background:
    linear-gradient(rgb(247 245 240 / 0.94), rgb(247 245 240 / 0.94)),
    url('../assets/img/tex-paper-tile.webp');
  background-size: auto, 340px 340px;
  background-repeat: repeat, repeat;
}
.section--dark {
  position: relative; overflow: clip; isolation: isolate;
  background:
    radial-gradient(900px 500px at 85% -10%, rgb(255 138 30 / 0.07), transparent 60%),
    radial-gradient(700px 480px at 0% 110%, rgb(64 120 210 / 0.1), transparent 60%),
    linear-gradient(rgb(7 20 38 / 0.82), rgb(7 20 38 / 0.82)),
    url('../assets/img/bg-dark-aurora.webp') center / cover no-repeat,
    var(--navy);
  color: #eef2f8;
}
.section--dark > .wrap { position: relative; z-index: 1; }
/* aurora ambient blobs — behind content, blurred, organic. Two pseudo-elements
   plus the section's own layered gradient above = a 3-layer mesh, all decorative. */
.section--dark::before,
.section--dark::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
}
.section--dark::before {
  top: -20%; right: -10%; width: min(46vw, 560px); height: min(46vw, 560px);
  background: radial-gradient(closest-side, rgb(255 176 84 / 0.16), transparent 72%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(30px);
}
.section--dark::after {
  bottom: -24%; left: -12%; width: min(40vw, 480px); height: min(40vw, 480px);
  background: radial-gradient(closest-side, rgb(90 140 220 / 0.2), transparent 70%);
  border-radius: 58% 42% 37% 63% / 55% 60% 40% 45%;
  filter: blur(30px);
}
.section--dark h2, .section--dark h3 { color: #fff; }
.eyebrow {
  display: inline-block;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.section--dark .eyebrow { color: var(--gold); }
.lede { font-size: clamp(1.05rem, 1vw + 0.9rem, 1.3rem); color: var(--ink-soft); max-width: 46ch; }
.section--dark .lede { color: #b9c5d8; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem;
  padding: 0.95rem 1.7rem; min-height: 50px; border-radius: 999px; border: 0;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn--primary {
  background: var(--accent); color: #221200;
  box-shadow: 0 6px 20px rgb(255 138 30 / 0.35);
}
.btn--primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgb(255 138 30 / 0.42); }
.btn--primary:active { transform: translateY(0) scale(0.98); }
/* one-shot arrival glow on the hero's primary CTA — draws the eye to the
   single most important action on load, then stops. Not a loop, not fake
   urgency: it never repeats and carries no scarcity claim. */
@media (prefers-reduced-motion: no-preference) {
  .hero-ctas .btn--primary { animation: cta-glow-pulse 1.7s ease-out 1; animation-delay: 0.6s; }
  @keyframes cta-glow-pulse {
    0% { box-shadow: 0 6px 20px rgb(255 138 30 / 0.35), 0 0 0 0 rgb(255 138 30 / 0); }
    45% { box-shadow: 0 6px 20px rgb(255 138 30 / 0.35), 0 0 0 9px rgb(255 138 30 / 0.14); }
    100% { box-shadow: 0 6px 20px rgb(255 138 30 / 0.35), 0 0 0 0 rgb(255 138 30 / 0); }
  }
}
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 2px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.section--dark .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 0.35); }
.section--dark .btn--ghost:hover { border-color: #fff; }
.btn--lg { padding: 1.15rem 2.2rem; font-size: 1.1rem; }
.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #ffffff; /* solid white menu bar */
  border-bottom: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
  transition: transform 0.35s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* the full-screen game is borderless — slide the nav out of the way while it's
   on screen (the sticky CTA already hides via game.css), then bring it back */
body.game-in-view .site-header { transform: translateY(-100%); }
/* auto-hide: slide the bar away while scrolling down, ease it back on scroll up
   (toggled by main.js). Never hides while the mobile menu is open. */
body.nav-hidden:not(.nav-open) .site-header { transform: translateY(-100%); }
/* immersive drive: the player grabbed the wheel, so snap to the game — drop the
   site menu and the step progress out of flow entirely (not just hidden) so the
   drive canvas and its own overlay fill the whole screen with no leftover band. */
body.drive-immersive .site-header,
body.drive-immersive .hero-story-progress-wrap { display: none !important; }
/* On the homepage the menu and the hero step strip are true OVERLAYS: they
   float above the page instead of occupying space in it, so when they retract
   there is no hole left behind (that hole was the navy band) and nothing
   underneath ever moves (that movement was the janky snap). The page opens
   straight into the drive with both tucked away (body class pre-set in the
   homepage HTML), they glide in over the content on a scroll-up, and cards two
   and three simply reserve headroom for them via --chrome-h (see main.js). */
body:has(.hero--story) .site-header { position: fixed; top: 0; left: 0; right: 0; }
html.js body.hero-s1-in-view:not(.nav-open) .site-header { transform: translateY(-100%); }
html.js body.hero-s1-in-view:not(.nav-open) .hero-story-progress-wrap { transform: translateY(-110%); }
/* the homepage opens on the dark hero, so its page base must be navy — otherwise
   the strip the header leaves behind when it slides away flashes the white body.
   Light sections below paint their own opaque backgrounds over this. */
body:has(.hero--story) { background: var(--navy-deep); }
/* game.css slides the sticky CTA down, but its tooltip can still peek at the
   bottom — fade the whole dock out while the borderless game is on screen */
body.game-in-view .sticky-cta { opacity: 0 !important; pointer-events: none !important; }
/* the opening drive-to-work card is the immersive front of the page and already
   carries the qualify CTA in the header, so slide the dock away while it fills
   the screen; it eases back in from the second card on. */
body.hero-s1-in-view .sticky-cta { opacity: 0 !important; pointer-events: none !important; transform: translateY(130%) !important; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: #ffffff;
  }
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.8rem;
}
.logo {
  position: relative; z-index: 5;
  font-family: var(--font-display); font-weight: 800; font-size: 1.45rem;
  letter-spacing: -0.03em; text-decoration: none; color: var(--navy);
  display: flex; align-items: baseline; gap: 0.1rem;
  transition: color 0.2s ease;
}
.logo .q { color: var(--accent); }
.logo .tag {
  font-family: var(--font-body); font-weight: 500; font-size: 0.7rem;
  color: var(--ink-soft); margin-left: 0.6rem; letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.btn) {
  text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) bottom left / 0% 2px no-repeat;
  transition: background-size 0.25s ease;
  padding-bottom: 3px;
}
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { background-size: 100% 2px; }
.nav-links a:not(.btn) { transition: background-size 0.25s ease, transform 0.08s ease, background-color 0.15s ease; }
.nav-links a:not(.btn):active { transform: scale(0.98); transition-duration: 80ms; background-color: var(--cream); }
.nav-phone { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; }

/* hamburger → close morph, drawn from three bars so each can rotate/fade
   independently (an inline SVG can't animate its strokes like this) */
.nav-toggle {
  display: none; position: relative; z-index: 5; order: 3;
  width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--navy); border-radius: 10px;
  transition: transform 0.15s ease, color 0.2s ease;
}
.nav-toggle:active { transform: scale(0.92); }
.nav-toggle-bars { position: relative; display: block; width: 22px; height: 15px; margin: 0 auto; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6.5px; }
.nav-toggle-bars span:nth-child(3) { top: 13px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  /* no-JS fallback first: links stay inline in normal flow, always reachable */
  .nav-links { display: block; padding: 0.2rem 0 0.4rem; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a:not(.btn) { display: block; padding: 1rem 0.2rem; font-size: 1.05rem; }
  .nav-links .nav-cta { border: 0; padding-top: 1.2rem; }
  .nav-links .btn { width: 100%; }

  /* JS-enhanced only: hamburger appears, links become a full-screen takeover */
  html.js .nav-toggle { display: block; }

  html.js .nav-links {
    position: fixed; inset: 0; z-index: 2;
    /* align-items:stretch is deliberate — the desktop base rule sets
       align-items:center, which in this column made every <li> shrink-wrap
       and centre, giving ragged, misaligned underlines. Stretch makes the
       links span the full width with tidy full-bleed dividers. */
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; margin: 0; overflow-y: auto; isolation: isolate; counter-reset: navitem;
    padding: clamp(6rem, 20vw, 7.5rem) clamp(1.7rem, 8vw, 3rem) calc(1.5rem + env(safe-area-inset-bottom));
    background: linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
    /* solid background, deliberately no backdrop-filter: nothing left to
       stay half-blurred once this closes */
    opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.97);
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
  }
  /* ambient aurora blobs, same visual language as the site's dark sections */
  html.js .nav-links::before,
  html.js .nav-links::after {
    content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(32px);
  }
  html.js .nav-links::before {
    top: -16%; right: -20%; width: 64vw; height: 64vw; max-width: 460px; max-height: 460px;
    background: radial-gradient(closest-side, rgb(255 176 84 / 0.18), transparent 72%);
  }
  html.js .nav-links::after {
    bottom: -20%; left: -18%; width: 56vw; height: 56vw; max-width: 420px; max-height: 420px;
    background: radial-gradient(closest-side, rgb(90 140 220 / 0.22), transparent 70%);
  }
  html.js .nav-links.is-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity 0.32s ease;
  }
  html.js .nav-links > li { position: relative; z-index: 1; }
  /* the six main links (first six li's): big editorial type, an index number
     and a full-width hairline divider, left-aligned with the arrow pushed to
     the far edge */
  html.js .nav-links > li:nth-child(-n+6) {
    border-bottom: 1px solid rgb(255 255 255 / 0.12); counter-increment: navitem;
  }
  html.js .nav-links > li:nth-child(n+7) { border-bottom: 0; }
  html.js .nav-links > li:nth-child(-n+6) > a {
    display: flex; align-items: baseline; gap: 0.9rem;
    padding: clamp(1.05rem, 4vw, 1.7rem) 0.15rem; color: #fff; background: none; line-height: 1.0;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.55rem, 8.4vw, 2.4rem); letter-spacing: -0.015em;
    transition: color 0.15s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  html.js .nav-links > li:nth-child(-n+6) > a::before {
    content: counter(navitem, decimal-leading-zero);
    font-family: var(--font-body); font-weight: 700; font-size: 0.4em; letter-spacing: 0.05em;
    color: var(--gold); opacity: 0.62; align-self: center; min-width: 1.9em;
  }
  html.js .nav-links > li:nth-child(-n+6) > a::after {
    content: "→"; margin-left: auto; align-self: center;
    font-size: 0.62em; font-weight: 700; color: var(--gold);
    opacity: 0; transform: translateX(-10px); transition: opacity 0.22s ease, transform 0.22s ease;
  }
  html.js .nav-links > li:nth-child(-n+6) > a:active { transform: translateX(8px); }
  html.js .nav-links > li:nth-child(-n+6) > a:active::after,
  html.js .nav-links > li:nth-child(-n+6) > a:focus-visible::after { opacity: 1; transform: none; }
  /* current page: always shown, a quiet "you are here" */
  html.js .nav-links > li:nth-child(-n+6) > a[aria-current="page"] { color: var(--gold); }
  html.js .nav-links > li:nth-child(-n+6) > a[aria-current="page"]::before { opacity: 1; }
  html.js .nav-links > li:nth-child(-n+6) > a[aria-current="page"]::after { opacity: 1; transform: none; }

  /* the secondary block — fact chip, game entry, email, CTA — is pushed to
     the bottom so the six links breathe across the upper two-thirds and the
     whole height is used */
  html.js .nav-links .nav-fact { margin-top: auto; padding-top: 1.5rem; }
  html.js .nav-links .nav-game-entry > a {
    display: inline-flex; align-items: center; gap: 0.65rem; justify-content: flex-start;
    padding: 0.7rem 0.15rem; color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  }
  html.js .nav-links a.nav-phone {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: #b9c5d8; font-family: var(--font-body); font-weight: 700; font-size: 1rem;
    padding: 0.55rem 0.15rem;
  }
  html.js .nav-links .nav-cta { padding-top: 1rem; }
  html.js .nav-links .nav-cta .btn { width: 100%; }

  /* staggered link entrance + drifting aurora, opt-in only */
  @media (prefers-reduced-motion: no-preference) {
    html.js .nav-links {
      transition: opacity 0.32s ease, transform 0.36s cubic-bezier(0.22, 0.75, 0.28, 1), visibility 0s linear 0.32s;
    }
    html.js .nav-links.is-open {
      transition: opacity 0.32s ease, transform 0.36s cubic-bezier(0.22, 0.75, 0.28, 1);
    }
    /* each row slides in from the left and settles — a confident cascade */
    html.js .nav-links > li {
      opacity: 0; transform: translateX(-28px);
      transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.85, 0.3, 1);
    }
    html.js .nav-links.is-open > li { opacity: 1; transform: none; }
    html.js .nav-links.is-open > li:nth-child(1) { transition-delay: 0.10s; }
    html.js .nav-links.is-open > li:nth-child(2) { transition-delay: 0.16s; }
    html.js .nav-links.is-open > li:nth-child(3) { transition-delay: 0.22s; }
    html.js .nav-links.is-open > li:nth-child(4) { transition-delay: 0.28s; }
    html.js .nav-links.is-open > li:nth-child(5) { transition-delay: 0.34s; }
    html.js .nav-links.is-open > li:nth-child(6) { transition-delay: 0.40s; }
    html.js .nav-links.is-open > li:nth-child(7) { transition-delay: 0.48s; }
    html.js .nav-links.is-open > li:nth-child(8) { transition-delay: 0.54s; }
    html.js .nav-links.is-open > li:nth-child(9) { transition-delay: 0.60s; }
    html.js .nav-links.is-open > li:nth-child(10) { transition-delay: 0.66s; }
    /* the ambient blobs drift slowly the whole time the menu is open */
    html.js .nav-links.is-open::before { animation: nav-aurora-a 15s ease-in-out infinite alternate; }
    html.js .nav-links.is-open::after { animation: nav-aurora-b 18s ease-in-out infinite alternate; }
    @keyframes nav-aurora-a { to { transform: translate(-12%, 9%) scale(1.18); } }
    @keyframes nav-aurora-b { to { transform: translate(10%, -7%) scale(1.12); } }
  }

  /* while the menu is open, the header chrome blends away and the small
     header logo hides — the big centred wordmark (.nav-menu-mark) is the
     menu's own title, so keeping both was the doubled-up mark at the top */
  body.nav-open .site-header { background: transparent; box-shadow: none; border-color: transparent; }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
  body.nav-open .logo { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  body.nav-open .nav-toggle { color: #fff; }
}
body.nav-open .sticky-cta { transform: translateY(110%) !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  background:
    radial-gradient(1000px 620px at 88% -20%, rgb(255 176 84 / 0.12), transparent 62%),
    radial-gradient(820px 560px at -10% 30%, rgb(90 140 220 / 0.08), transparent 60%),
    linear-gradient(rgb(247 245 240 / 0.6), rgb(247 245 240 / 0.6)),
    url('../assets/img/bg-hero-light.webp') center / cover no-repeat,
    var(--cream);
}
.hero > .wrap { position: relative; z-index: 1; }
/* aurora ambient blobs — organic, blurred, sit behind hero content. Contrast
   is protected: blobs are low opacity over --cream and text sits at z-index 1. */
.hero::before,
.hero::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
}
.hero::before {
  top: -18%; right: -8%; width: min(58vw, 700px); height: min(58vw, 700px);
  background: radial-gradient(closest-side, rgb(255 176 84 / 0.3), transparent 72%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(24px);
}
.hero::after {
  bottom: -24%; left: -12%; width: min(48vw, 580px); height: min(48vw, 580px);
  background: radial-gradient(closest-side, rgb(90 140 220 / 0.18), transparent 70%);
  border-radius: 58% 42% 37% 63% / 55% 60% 40% 45%;
  filter: blur(24px);
}
/* extremely slow, subtle drift — transform only, opt-in behind reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero::before, .section--dark::before, .hero--story::before { animation: aurora-drift-a 72s ease-in-out infinite; }
  .hero::after, .section--dark::after, .hero--story::after { animation: aurora-drift-b 88s ease-in-out infinite; }
  @keyframes aurora-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-4%, 3%) scale(1.06); }
  }
  @keyframes aurora-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3%, -4%) scale(1.05); }
  }
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  gap: var(--gap); padding-block: clamp(3.5rem, 7vw, 6.5rem);
  min-height: min(78dvh, 760px);
}
.hero-copy .lede { margin-block: 1.2rem 1.8rem; }
.hl, .hero h1 .hl { color: transparent; background: linear-gradient(100deg, var(--accent-deep), var(--accent)); background-clip: text; -webkit-background-clip: text; }
/* kinetic type, restrained: one clip-path reveal per hero on load, never body text,
   never letter-by-letter. h1 text is in the DOM and fully readable instantly —
   this only affects paint, and only runs when motion is welcomed. */
@media (prefers-reduced-motion: no-preference) {
  h1 .hl, .page-hero h1 .hl {
    display: inline-block;
    animation: hl-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes hl-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero-reassure { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-soft); display: flex; align-items: center; gap: 0.45rem; }
.hero-visual { position: relative; }
.hero-car { filter: drop-shadow(0 30px 40px rgb(11 28 51 / 0.25)); }

/* floating chips over hero */
.chip {
  position: absolute; display: flex; align-items: center; gap: 0.55rem;
  background: rgb(255 255 255 / 0.96); /* solid fallback */
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 14px; padding: 0.6rem 0.9rem;
  font-size: 0.88rem; font-weight: 700; box-shadow: var(--shadow-md);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chip {
    background: rgb(255 255 255 / 0.8);
    backdrop-filter: blur(11px) saturate(1.5);
    -webkit-backdrop-filter: blur(11px) saturate(1.5);
    border: 1px solid rgb(255 255 255 / 0.75);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 0.6);
  }
}
.chip small { display: block; font-weight: 500; color: var(--ink-soft); font-size: 0.72rem; }
/* the piggy-bank icon is only part of the mobile bento treatment below;
   the compact floating desktop chip stays text-only */
.chip--price img { display: none; }
.chip--price { top: 4%; right: 2%; }
.chip--approved { bottom: 26%; left: -2%; }
.chip--included { bottom: -4%; right: 12%; }
.chip .tick { color: var(--green); }
@media (prefers-reduced-motion: no-preference) {
  .chip { animation: floaty 5.5s ease-in-out infinite; }
  .chip--approved { animation-delay: 1.2s; }
  .chip--included { animation-delay: 2.4s; }
  @keyframes floaty { 50% { transform: translateY(-8px); } }
}
@media (max-width: 860px) {
  /* mobile-first CTA priority: copy + CTA stay in natural DOM order (first),
     the car image follows after — a mobile visitor should reach the primary
     button within the first scroll, not after a full-width photo. */
  .hero-grid { grid-template-columns: 1fr; min-height: auto; padding-block: clamp(1.6rem, 5vw, 2.4rem) clamp(2rem, 6vw, 2.8rem); gap: 1.6rem; }
  /* floating chips work at desktop scale; on mobile they resolve into an
     asymmetric bento cluster instead — a featured price cell (echoing the
     dark bento-card--feature treatment used elsewhere on this page) plus a
     compact two-up row, so the trust group reads as one designed unit
     instead of three identical stacked rows. */
  .hero-visual {
    max-width: 420px; margin-inline: auto; position: relative;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
  }
  .hero-visual::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: 30%; left: 50%; transform: translateX(-50%);
    width: 130%; height: 68%; filter: blur(34px);
    background: radial-gradient(closest-side, rgb(255 176 84 / 0.18), transparent 72%);
  }
  .hero-car { grid-column: 1 / -1; }
  .hero-visual .chip {
    position: static; animation: none; width: auto; box-sizing: border-box;
    flex-direction: column; align-items: flex-start; gap: 0.3rem; text-align: left;
    border-radius: 16px; padding: 0.85rem 1rem;
  }
  .hero-visual .chip--price {
    grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between;
    background: linear-gradient(145deg, var(--navy-soft), var(--navy-deep));
    border-color: rgb(255 255 255 / 0.08); color: #fff;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 0.08);
  }
  .hero-visual .chip--price > div { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; }
  .hero-visual .chip--price small { display: block; color: #b9c5d8; font-weight: 500; font-size: 0.72rem; margin-top: 0.15rem; }
  .hero-visual .chip--price img { display: block; width: 40px; height: 40px; flex-shrink: 0; }
  .hero-visual .chip .tick {
    display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 50%; background: var(--green-soft); font-size: 0.75rem;
  }
  /* stacked, full-width CTAs: bigger thumb targets, primary reads first */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .hero-ctas .btn { width: 100%; }
  /* the shared --fs-hero clamp sits flat at its 2.4rem floor for basically
     every phone width (its vw term only overtakes that floor above ~490px),
     so on mobile this headline reads smaller than the design intends —
     give it its own floor/ceiling instead of inheriting the sitewide one. */
  .hero-copy h1 { font-size: clamp(2.6rem, 15vw, 3.3rem); }
}

/* trust strip */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: center;
  padding-block: 1.1rem; border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--ink-soft);
}
.trust-strip strong { color: var(--ink); }
.stars { color: var(--gold); letter-spacing: 2px; }

/* ---------- Bento grid ---------- */
.bento {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
}
.bento-card {
  container-type: inline-size;
  position: relative; overflow: clip;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.section--cream .bento-card { border-color: transparent; box-shadow: var(--shadow-sm); }
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line); }
.bento-card:active { transform: translateY(-1px) scale(0.98); transition-duration: 80ms; }
.bento-card--feature {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
  color: #eef2f8; border: 0;
}
.bento-card--feature h3 { color: #fff; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.bento-card--feature p { color: #fff; }
/* oversized numeral watermark: set data-num="01" etc. in markup */
.bento-card--feature[data-num]::before {
  content: attr(data-num);
  position: absolute; right: -0.3rem; bottom: -1.1rem; z-index: 0;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 12vw, 9rem);
  line-height: 1; color: rgb(255 255 255 / 0.06); pointer-events: none;
}
.bento-card--feature > * { position: relative; z-index: 1; }
/* wide rhythm cell: spans both columns on row 1 of its own 2-col block */
.bento-card--wide { grid-column: span 2; }
/* stat cell: a bento tile that behaves like the stats band, in-grid */
.bento-card--stat {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--cream); border-color: transparent;
}
.bento-card--stat .bento-stat-num {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 4vw, 3rem); color: var(--navy); line-height: 1;
}
.bento-card--stat .bento-stat-num .unit { color: var(--gold); font-size: 0.55em; }
.bento-card--cta { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, white); }
.bento-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--green-soft); color: var(--green);
}
.bento-card--feature .bento-icon { background: rgb(255 255 255 / 0.12); color: var(--gold); }
/* illustrated icon variant: real cutout art instead of a stroke icon, no tinted disc */
.bento-icon--img { width: 58px; height: 58px; background: none; }
.bento-icon--img img { width: 100%; height: 100%; object-fit: contain; }
.bento-card h3 { margin-bottom: 0.35rem; }
.bento-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
@container (max-width: 220px) {
  .bento-card h3 { font-size: 1.02rem; }
  .bento-card p { font-size: 0.88rem; }
}
@media (max-width: 920px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card--feature, .bento-card--wide { grid-column: span 1; grid-row: span 1; }
}

/* ---------- Stats band ---------- */
.stats-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); text-align: center; }
.stat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem); letter-spacing: -0.03em;
  color: #fff; line-height: 1;
}
.stat-num .unit { color: var(--gold); }
.stat-label { color: #b9c5d8; margin-top: 0.5rem; font-size: 0.95rem; }
@media (max-width: 700px) { .stats-band { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ---------- Car cards ---------- */
.car-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
/* the homepage's "cars that go to work" deck has three tiers, not four —
   .car-row itself stays a shared, reusable class (cars.html and a couple
   of other pages still lay out four), so this is scoped to this one
   track by id rather than changed globally. */
#cars-story-track { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) {
  .car-row {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 1rem; padding-bottom: 1rem; margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2rem));
    padding-inline: clamp(1.1rem, 4vw, 2rem);
    scrollbar-width: none;
    /* edge fade masks: hint that more cards are off-screen, no wrapper needed */
    mask-image: linear-gradient(90deg, transparent, black clamp(1.1rem, 4vw, 2rem), black calc(100% - clamp(1.1rem, 4vw, 2rem)), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black clamp(1.1rem, 4vw, 2rem), black calc(100% - clamp(1.1rem, 4vw, 2rem)), transparent);
  }
  .car-row::-webkit-scrollbar { display: none; }
  .car-card {
    flex: 0 0 78%; max-width: 320px; scroll-snap-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .car-card.is-snapped { transform: scale(1.03) translateY(-2px); box-shadow: var(--shadow-md); }
}
/* pagination dots, added by JS under each finite scroll-snap deck. No infinite scroll. */
.deck-dots {
  display: none; justify-content: center; gap: 0.5rem; margin-top: 0.9rem;
}
@media (max-width: 1000px) {
  .deck-dots { display: flex; }
}
.deck-dots button {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0;
  background: var(--line); cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
/* invisible expanded hit area — dot stays visually small, tap target doesn't */
.deck-dots button::after { content: ""; position: absolute; inset: -14px; }
.deck-dots button:active { transform: scale(0.85); }
.deck-dots button[aria-current="true"] { background: var(--navy); transform: scale(1.25); }
.deck-dots button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.car-card {
  container-type: inline-size;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: clip; display: flex; flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@container (max-width: 240px) {
  .car-card .car-price .amount { font-size: 1.4rem; }
}
.car-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.car-card-visual {
  background: linear-gradient(160deg, var(--cream), #ecf0f6);
  padding: 1.4rem 1.2rem 0.6rem; position: relative;
}
/* car photos are transparent-background cutouts — ground them with a soft
   shadow instead of letting them float with no visual weight */
.car-card-visual img, .steps-visual .visual-card img {
  filter: drop-shadow(0 14px 16px rgb(11 28 51 / 0.16));
}
.car-card-visual .badge {
  position: absolute; top: 0.9rem; left: 0.9rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--navy); color: #fff; border-radius: 999px; padding: 0.3rem 0.7rem;
}
.car-card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.car-card-body h3 { margin: 0; font-size: 1.15rem; }
.car-price { display: flex; align-items: baseline; gap: 0.35rem; }
.car-price .from { font-size: 0.8rem; color: var(--ink-soft); }
.car-price .amount { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; }
.car-price .per { color: var(--ink-soft); font-size: 0.9rem; }
.car-meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.car-total { font-size: 0.82rem; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 0.65rem; margin: 0; }
.car-total strong { color: var(--ink); }

/* ---------- Each car up close (cars.html detail panels, anchor targets) ---------- */
.car-detail {
  display: grid; gap: 1.3rem; align-items: center;
  padding: clamp(1.1rem, 3vw, 2rem); background: #fff;
  border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm);
  scroll-margin-top: 104px;
}
.car-detail + .car-detail { margin-top: clamp(1.1rem, 2.6vw, 1.6rem); }
.car-detail-visual { position: relative; }
.car-detail-visual .badge { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 1; }
.car-detail-visual img { width: 100%; height: auto; border-radius: 14px; }
.car-detail-body h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 0 0 0.25rem; }
.car-detail-specs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0 0.9rem; padding: 0; list-style: none; }
.car-detail-specs li {
  font-family: var(--font-display); font-weight: 700; font-size: 0.76rem;
  padding: 0.32rem 0.72rem; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink);
}
.car-detail-total { font-size: 0.85rem; color: var(--ink-soft); margin: 0.35rem 0 0; }
.car-detail-includes { list-style: none; padding: 0; margin: 0.9rem 0 1.1rem; display: grid; gap: 0.4rem; }
.car-detail-includes li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.92rem; }
.car-detail-includes .tick { color: var(--green); font-weight: 800; }
.car-card-more {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  color: var(--ink); text-decoration: none;
}
.car-card-more:hover, .car-card-more:focus-visible { color: var(--accent-deep); }
@media (min-width: 861px) {
  .car-detail { grid-template-columns: 1.05fr 1fr; gap: 2rem; }
  .car-detail:nth-of-type(even) .car-detail-visual { order: 2; }
}
.car-card .btn { margin-top: auto; }

/* tick list */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.ticks li { display: flex; gap: 0.55rem; align-items: flex-start; }
.ticks .tick { color: var(--green); flex-shrink: 0; margin-top: 0.15rem; }

/* ---------- Calculator ---------- */
.calc-panel {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0;
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: clip; border: 1px solid var(--line);
}
.calc-inputs { padding: clamp(1.6rem, 3.5vw, 2.8rem); display: grid; gap: 1.5rem; align-content: start; }
.calc-result {
  position: relative; overflow: clip;
  background: linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
  color: #eef2f8; padding: clamp(1.6rem, 3.5vw, 2.8rem);
  display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
  border-left: 1px solid rgb(255 255 255 / 0.12); /* glass edge, disciplined: 4th and last glass moment */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
}
.calc-result::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(120deg, rgb(255 255 255 / 0.08), transparent 45%);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .calc-result { backdrop-filter: saturate(1.3); -webkit-backdrop-filter: saturate(1.3); }
}
.calc-result > * { position: relative; z-index: 1; }
.calc-result .label { color: #b9c5d8; font-size: 0.9rem; }
.calc-week {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; color: #fff;
}
.calc-week .per { font-size: 1.1rem; font-weight: 600; color: var(--gold); letter-spacing: 0; }
.calc-total-line { color: #b9c5d8; font-size: 0.92rem; border-top: 1px solid rgb(255 255 255 / 0.15); padding-top: 0.9rem; margin-top: 0.9rem; }
.calc-total-line strong { color: #fff; }
.calc-disclaimer { font-size: 0.75rem; color: #8fa0b8; margin-top: 1rem; }
.calc-result .btn { margin-top: 1.2rem; align-self: flex-start; }
@media (max-width: 860px) {
  /* the calculator's result button is the single highest-intent click on the
     page (someone who just tuned inputs to their own numbers) — make it the
     full width of the panel on mobile, not a shrink-wrapped pill */
  .calc-result .btn { align-self: stretch; width: 100%; }
}
/* ---------- Skeleton loading (honest use only: the 350ms labour-illusion
   window on the calculator, and a brief 150ms step-change skeleton on the
   prequalify form. Never on static page loads — the site is instant.) ---------- */
.skeleton-block {
  border-radius: 10px; background: rgb(255 255 255 / 0.14);
  position: relative; overflow: clip;
}
.skeleton-block--light { background: var(--line); }
.skeleton-block::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton-block::after { animation: skeleton-shimmer 1.1s ease-in-out infinite; }
  @keyframes skeleton-shimmer { to { transform: translateX(100%); } }
}
.skeleton-block--lg { height: clamp(2.6rem, 5.5vw, 4rem); width: 58%; }
.skeleton-block--sm { height: 0.9rem; width: 82%; margin-top: 0.8rem; }
.calc-skeleton {
  display: none; flex-direction: column; gap: 0.9rem;
  position: absolute; inset: 0; z-index: 2; padding: inherit;
  justify-content: center;
}
.calc-result.is-calculating .calc-skeleton { display: flex; }
.calc-result.is-calculating .calc-week,
.calc-result.is-calculating .calc-total-line,
.calc-result.is-calculating .label { visibility: hidden; }
.field-label { font-weight: 700; font-size: 0.95rem; display: block; margin-bottom: 0.6rem; }
.field-hint { font-weight: 400; color: var(--ink-soft); font-size: 0.82rem; }

/* size picker (radio cards) */
.size-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.size-option { position: relative; }
.size-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-option label, .size-option .size-label {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  border: 2px solid var(--line); border-radius: 14px; padding: 0.8rem 0.4rem;
  font-size: 0.82rem; font-weight: 600; cursor: pointer; text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.size-option:has(input:checked) .size-label {
  border-color: var(--navy); background: var(--cream); transform: translateY(-2px);
}
.size-option:active .size-label { transform: scale(0.97); transition-duration: 80ms; }
.size-option:has(input:focus-visible) .size-label { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .size-picker { grid-template-columns: repeat(2, 1fr); } }

/* range sliders */
input[type="range"] {
  width: 100%; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 999px;
  background: linear-gradient(to right, var(--navy) var(--fill, 50%), var(--line) var(--fill, 50%));
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--navy);
  box-shadow: var(--shadow-sm); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--navy);
}
.range-value { font-weight: 800; font-family: var(--font-display); font-size: 1.15rem; }

/* segmented control (term) */
.segmented { display: flex; border: 2px solid var(--line); border-radius: 999px; padding: 3px; width: fit-content; }
.segmented .seg { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented .seg-label {
  display: block; padding: 0.5rem 1.2rem; border-radius: 999px;
  font-weight: 700; font-size: 0.92rem; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.segmented .seg:has(input:checked) .seg-label { background: var(--navy); color: #fff; }
.segmented .seg:active .seg-label { transform: scale(0.94); transition-duration: 80ms; }
.segmented .seg:has(input:focus-visible) .seg-label { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 880px) { .calc-panel { grid-template-columns: 1fr; } }

/* ---------- Calculator cockpit (the dashboard moment) ----------
   The cars story hands off straight into this: you have just picked a car,
   so the estimate is drawn as the instrument cluster in front of you. Full
   viewport height so it lands as one beat of the magnetic scroll; the
   needle is the only animated part and it moves on transform alone. */
.calculator-cockpit {
  height: 100svh; box-sizing: border-box; overflow: hidden;
  display: grid; align-content: center;
  padding-block: clamp(0.8rem, 2.5vh, 1.8rem);
  scroll-margin-top: 0;
}
/* fit the whole cockpit in one screen so it snaps clean, no internal scroll */
.calculator-cockpit .section-head { margin-bottom: clamp(0.7rem, 2.4vh, 1.6rem); }
.calculator-cockpit h2 { font-size: clamp(1.55rem, 3.6vw, 2.5rem); }
.cockpit-lede { font-size: clamp(0.95rem, 1.3vw, 1.12rem); margin-top: 0.4rem; }
.calc-panel--cockpit {
  grid-template-columns: 0.95fr 1.05fr;
  background:
    radial-gradient(120% 160% at 50% -30%, #16305a 0%, var(--navy) 48%, var(--navy-deep) 100%);
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow:
    0 30px 70px rgb(0 0 0 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 0 0 6px rgb(7 20 38 / 0.55);
  border-radius: 30px;
}
@media (max-width: 880px) { .calc-panel--cockpit { grid-template-columns: 1fr; } }
/* controls, dark dash restyle */
.calc-panel--cockpit .calc-inputs { align-content: center; gap: 1.6rem; }
.calc-panel--cockpit .size-picker { grid-template-columns: repeat(2, 1fr); }
.calc-panel--cockpit .size-label { min-height: 62px; justify-content: center; }
.calc-panel--cockpit .cockpit-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-panel--cockpit .field-label { color: #e4ebf6; }
.calc-panel--cockpit .field-hint { color: #8fa0b8; }
.calc-panel--cockpit .range-value { color: var(--gold); }
.calc-panel--cockpit .size-label {
  border-color: rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.045);
  color: #e4ebf6; gap: 0.15rem;
}
.calc-panel--cockpit .size-sub {
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; color: var(--gold);
}
.calc-panel--cockpit .size-option:has(input:checked) .size-label {
  border-color: var(--gold); background: rgb(255 176 84 / 0.12); color: #fff;
}
.calc-panel--cockpit .segmented { border-color: rgb(255 255 255 / 0.16); }
.calc-panel--cockpit .seg-label { color: #cfd8e8; }
.calc-panel--cockpit .segmented .seg:has(input:checked) .seg-label { background: var(--cream); color: var(--navy); }
.calc-panel--cockpit input[type="range"] {
  background: linear-gradient(to right, var(--gold) var(--fill, 50%), rgb(255 255 255 / 0.16) var(--fill, 50%));
}
.calc-panel--cockpit input[type="range"]::-webkit-slider-thumb { border-color: var(--gold); }
.calc-panel--cockpit input[type="range"]::-moz-range-thumb { border-color: var(--gold); }
/* the cluster itself */
.cockpit-cluster { align-items: center; text-align: center; gap: 0.2rem; }
.cockpit-gauge { width: min(100%, 520px); height: auto; margin: 0 auto -0.9rem; display: block; }
.gauge-needle {
  transform-box: view-box; transform-origin: 110px 112px;
  transform: rotate(var(--needle-deg, -44deg));
}
@media (prefers-reduced-motion: no-preference) {
  .gauge-needle { transition: transform 0.9s cubic-bezier(0.3, 1.28, 0.42, 1); }
}
.cockpit-cluster .btn { align-self: center; margin-top: 1rem; }
@media (max-width: 860px) { .cockpit-cluster .btn { align-self: stretch; } }
.cockpit-cluster .calc-disclaimer { max-width: 46ch; margin-inline: auto; }
/* soften the labour shimmer here: the needle carries the motion, so the
   readout only dims rather than blinking out (no skeleton in the cockpit) */
.calc-panel--cockpit .calc-result.is-calculating .calc-week,
.calc-panel--cockpit .calc-result.is-calculating .label { visibility: visible; opacity: 0.3; }
.calc-panel--cockpit .calc-week, .calc-panel--cockpit .calc-result .label { transition: opacity 0.2s ease; }
/* Fill the phone screen top to bottom. The stacked cockpit becomes a flex
   column that stretches the panel across the whole height between the heading
   and the thumb bar, then hands the leftover room to the dial cluster so the
   controls and the speedo grow into the space instead of squishing up top with
   dead air below. Sizes are height-relative (svh/vh) so they scale up on tall
   phones and shrink to still fit short ones. One screen tall for the magnet. */
@media (max-width: 880px) {
  .calculator-cockpit {
    display: flex; flex-direction: column;
    padding-top: clamp(0.6rem, 1.7vh, 1.1rem);
    /* reserve the thumb bar (~75px) plus the phone's home-indicator safe area,
       so the disclaimer keeps a constant gap above the bar on notched phones */
    padding-bottom: calc(clamp(4.7rem, 10vh, 5.3rem) + env(safe-area-inset-bottom));
  }
  .calculator-cockpit .wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .calculator-cockpit .cockpit-lede { display: none; }
  .calculator-cockpit .section-head { flex: 0 0 auto; margin-bottom: clamp(0.5rem, 1.4vh, 1rem); }
  .calculator-cockpit h2 { font-size: clamp(1.45rem, 5.4vw, 1.9rem); line-height: 1.07; }

  /* the panel fills all the height between the heading and the thumb bar */
  .calc-panel--cockpit {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .calc-panel--cockpit .calc-inputs {
    flex: 0 0 auto;
    padding: clamp(0.7rem, 1.7vh, 1.15rem) clamp(1rem, 4vw, 1.4rem) clamp(0.4rem, 1vh, 0.8rem);
    gap: clamp(0.5rem, 1.4vh, 0.95rem);
  }
  /* the dial cluster takes the leftover room and centres inside it */
  .calc-panel--cockpit .calc-result {
    flex: 1 1 auto; justify-content: center;
    gap: clamp(0.2rem, 0.8vh, 0.5rem);
    padding: clamp(0.3rem, 1vh, 0.8rem) clamp(1rem, 4vw, 1.4rem) clamp(0.6rem, 1.5vh, 1rem);
  }
  /* Car type is the first choice a visitor makes, so give it real presence: a
     2x2 of larger boxes with bigger type rather than four cramped slivers. The
     dial below gives up some room for it so the whole cockpit still lands in one
     screen for the magnet. */
  .calc-panel--cockpit .size-picker { grid-template-columns: repeat(2, 1fr); gap: clamp(0.45rem, 1.2vh, 0.62rem); }
  .calc-panel--cockpit .size-label { min-height: 0; padding: clamp(0.5rem, 1.4vh, 0.76rem) 0.5rem; font-size: clamp(0.9rem, 3.3vw, 1rem); gap: 0.12rem; border-radius: 16px; }
  .calc-panel--cockpit .size-sub { font-size: clamp(0.72rem, 2.3vw, 0.78rem); }
  .calc-panel--cockpit .field-label { font-size: 0.96rem; margin-bottom: 0.4rem; }
  .calc-panel--cockpit .calc-inputs { gap: clamp(0.4rem, 1.15vh, 0.8rem); }
  .calc-panel--cockpit .segmented { padding: 2px; }
  .calc-panel--cockpit .seg-label { padding: clamp(0.4rem, 1.1vh, 0.66rem) 1rem; }

  /* the speedo dial IS the section: double-and-a-bit size, everything else
     pulls in tight around it so the whole cockpit still lands in one screen. */
  .calculator-cockpit .section-head .eyebrow { display: none; }
  .calculator-cockpit .section-head { margin-bottom: clamp(0.3rem, 0.8vh, 0.55rem); }
  .calc-panel--cockpit .calc-inputs { gap: clamp(0.3rem, 0.85vh, 0.55rem); padding-top: clamp(0.45rem, 1.1vh, 0.7rem); padding-bottom: 0.25rem; }
  .calc-panel--cockpit .size-picker { gap: clamp(0.4rem, 1vh, 0.55rem); }
  .calc-panel--cockpit .size-label { padding: clamp(0.36rem, 1vh, 0.56rem) 0.45rem; font-size: clamp(0.84rem, 3vw, 0.92rem); }
  .calc-panel--cockpit .size-sub { font-size: clamp(0.66rem, 2vw, 0.72rem); }
  .calc-panel--cockpit .field-label { font-size: 0.88rem; margin-bottom: 0.26rem; }
  .calc-panel--cockpit .seg-label { padding: clamp(0.3rem, 0.85vh, 0.48rem) 1rem; }
  .calc-panel--cockpit .calc-result { gap: clamp(0.08rem, 0.4vh, 0.25rem); padding-top: 0.2rem; }
  .cockpit-cluster { gap: clamp(0.08rem, 0.4vh, 0.25rem); }
  .cockpit-gauge { width: min(80vw, 34svh, 312px); margin-bottom: clamp(-1.3rem, -2.4vh, -0.7rem); }
  .cockpit-cluster .label { font-size: 0.78rem; }
  .cockpit-cluster .calc-week { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .cockpit-cluster .btn { margin-top: clamp(0.14rem, 0.6vh, 0.4rem); padding-block: clamp(0.52rem, 1.3vh, 0.72rem); }
  .cockpit-cluster .calc-disclaimer { font-size: 0.55rem; margin-top: clamp(0.14rem, 0.5vh, 0.35rem); line-height: 1.16; max-width: 44ch; }
}
/* Notched / shorter phones (iPhone X..14 sit here): shrink the dial and readout
   a touch so the number, button and disclaimer clear the thumb bar plus the
   home-indicator safe area without clipping, while the dial still fills. */
@media (max-width: 880px) and (max-height: 860px) {
  .calculator-cockpit h2 { font-size: clamp(1.25rem, 4.8vw, 1.55rem); }
  .cockpit-gauge { width: min(74vw, 30.2svh, 268px); margin-bottom: clamp(-1.2rem, -2.2vh, -0.6rem); }
  .cockpit-cluster .calc-week { font-size: clamp(1.6rem, 6.6vw, 1.95rem); }
}
/* Shorter phones (SE, minis, small Androids): keep the 2x2 Car type but pull
   the boxes, dial and disclaimer in hard so the whole cockpit still lands in
   one screen above the thumb bar. Eyebrow goes to buy the room. */
@media (max-width: 880px) and (max-height: 820px) {
  .calculator-cockpit h2 { font-size: clamp(1.15rem, 4.4vw, 1.4rem); }
  .calc-panel--cockpit .size-label { padding: clamp(0.32rem, 0.9vh, 0.5rem) 0.35rem; font-size: clamp(0.8rem, 2.8vw, 0.88rem); }
  .cockpit-gauge { width: min(68vw, 27.5svh, 240px); margin-bottom: clamp(-1.1rem, -2vh, -0.55rem); }
  .cockpit-cluster .calc-week { font-size: clamp(1.5rem, 6.2vw, 1.8rem); }
  .cockpit-cluster .label { font-size: 0.72rem; }
  .cockpit-cluster .calc-disclaimer { font-size: 0.52rem; }
}

/* ---------- Scrollytelling: how it works ---------- */
.steps-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.steps-visual { position: sticky; top: 110px; }
.steps-visual .visual-card {
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 2rem; border: 1px solid var(--line);
}
.step-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  opacity: 0.45; transition: opacity 0.3s ease;
}
.step-item.is-active, html.no-js .step-item { opacity: 1; }
.step-item:last-child { border-bottom: 0; }
.step-num {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  background: var(--cream); border: 2px solid var(--line); color: var(--navy);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.step-item.is-active .step-num { background: var(--navy); border-color: var(--navy); color: #fff; }
.step-item h3 { margin-bottom: 0.3rem; }
.step-item p { color: var(--ink-soft); margin: 0; }
@media (max-width: 860px) {
  .steps-layout { grid-template-columns: 1fr; }
  .steps-visual { position: static; }
  .step-item { opacity: 1; }
}
/* scrollytelling enhancement layer: a thin accent rail fills alongside the sticky
   visual as the 4 steps scroll past, driven natively by CSS scroll-linked
   animation. The IntersectionObserver .is-active toggle above remains the
   universal fallback (this is additive, and Firefox simply never runs it). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps-layout { view-timeline-name: --steps-scroll; view-timeline-axis: block; }
    .steps-visual { position: sticky; }
    .steps-visual::after {
      content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 4px;
      border-radius: 999px; background: var(--accent); transform-origin: top;
      transform: scaleY(0); animation: steps-fill linear both;
      animation-timeline: --steps-scroll;
    }
    @keyframes steps-fill { to { transform: scaleY(1); } }
  }
}
@media (max-width: 860px) {
  /* the @supports view-timeline block above re-asserts position:sticky with no
     width guard, which on mobile Chrome pins the visual over the step list and
     overlaps the text. Force it back to static on small screens. */
  .steps-visual { position: static; }
  .steps-visual::after { display: none; }
}

/* ---------- Transparency block ---------- */
.honest-panel {
  border: 2px solid var(--navy); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--paper); position: relative;
}
.honest-panel::before {
  content: "The honest bit";
  position: absolute; top: -0.9rem; left: 2rem;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 0.85rem;
  padding: 0.35rem 1rem; border-radius: 999px;
}
.cost-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cost-table th, .cost-table td { text-align: left; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--line); }
.cost-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.cost-table tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--navy); }
@media (max-width: 860px) { .honest-panel { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.quote-card {
  container-type: inline-size;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.6rem); display: flex; flex-direction: column; gap: 0.9rem;
}
.quote-card blockquote { margin: 0; font-size: 0.98rem; }
.quote-who { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.quote-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; color: #fff;
  background: var(--navy-soft); font-family: var(--font-display);
}
.quote-who .name { font-weight: 700; font-size: 0.92rem; }
.quote-who .place { font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin-inline: auto; display: grid; gap: 0.7rem; }
.faq-list details {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; overflow: clip;
}
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; font-weight: 700; padding: 1.15rem 1.4rem;
  transition: transform 0.08s ease, background-color 0.15s ease;
}
.faq-list summary:active { transform: scale(0.99); transition-duration: 80ms; }
.faq-list summary:hover { background: var(--cream); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: var(--accent-deep); transition: transform 0.2s ease; line-height: 1;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-body { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); }
.faq-list .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Progressive disclosure: micro-accordion ----------
   Surface the minimum, everything else on request. Used for fee-table
   row explainers, car card "what's included", compare row footnotes. */
.micro-details { margin-top: 0.5rem; }
.micro-details summary {
  list-style: none; cursor: pointer; font-size: 0.82rem; font-weight: 700;
  color: var(--ink-soft); display: inline-flex; align-items: center; gap: 0.3rem;
  transition: transform 0.08s ease, color 0.15s ease;
}
.micro-details summary:hover { color: var(--ink); }
.micro-details summary::-webkit-details-marker { display: none; }
.micro-details summary::after { content: "+ what does this mean?"; }
.micro-details[open] summary::after { content: "– hide"; }
.micro-details[data-label] summary::after { content: "+ " attr(data-label); }
.micro-details[data-label][open] summary::after { content: "– hide"; }
.micro-details summary:active { transform: scale(0.97); transition-duration: 80ms; }
.micro-details .micro-body { font-size: 0.85rem; color: var(--ink-soft); padding-top: 0.5rem; max-width: 46ch; }

/* compare table: tap a row to expand its footnote on mobile */
.compare-table .row-note { display: none; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.35rem; font-weight: 400; }
@media (max-width: 760px) {
  .compare-table tbody th[data-expandable] { cursor: pointer; }
  .compare-table tbody th[data-expandable]::after { content: " ▾"; color: var(--ink-soft); font-size: 0.75em; }
  .compare-table tbody tr.is-expanded th[data-expandable]::after { content: " ▴"; }
  .compare-table tbody tr.is-expanded .row-note { display: block; }
}

/* ---------- Inline CTA (mid-page conversion prompt) ----------
   A compact, reusable band for breaking up long-form pages so the primary
   action is never more than a screen or two away. Copy is always drawn from
   real, already-published numbers (60 sec check, 9 in 10 approved) — never
   a fabricated stock count or countdown. */
.inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 3.5vw, 1.8rem) clamp(1.4rem, 4vw, 2.2rem);
  margin-block: clamp(2.5rem, 6vw, 4rem);
}
.inline-cta p { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.inline-cta .inline-cta-sub { display: block; font-weight: 500; font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.25rem; }
.inline-cta .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .inline-cta { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; }
  .inline-cta .btn { width: 100%; }
}

/* ---------- Final CTA band ---------- */
.final-cta { text-align: center; }
.final-cta h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.final-cta .lede { margin-inline: auto; margin-bottom: 2rem; }
.final-reassure { margin-top: 1.1rem; font-size: 0.88rem; color: #8fa0b8; }
@media (max-width: 600px) {
  .final-cta > .wrap > .btn { display: flex; width: 100%; max-width: 420px; margin-inline: auto; }
}
/* the closing CTA as a full-screen magnetic card, so the last swipe snaps too */
.final-cta.final-card { height: 100svh; box-sizing: border-box; display: grid; align-content: center; }
@media (max-width: 860px) { .final-cta.final-card { padding-bottom: clamp(5.5rem, 14vh, 7rem); } }

/* ---------- Four-steps, as one full-screen magnetic card ---------- */
.steps-card {
  height: 100svh; box-sizing: border-box; overflow: hidden;
  display: grid; align-content: center;
  padding-block: clamp(1.2rem, 4vh, 3rem);
}
.steps-card .section-head { margin-bottom: clamp(1rem, 3vh, 2rem); }
.steps-grid {
  list-style: none; margin: 0 0 clamp(1rem, 3vh, 1.8rem); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.6vw, 1.2rem);
}
.steps-grid-item {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(0.9rem, 1.8vw, 1.35rem); box-shadow: var(--shadow-sm);
}
.steps-grid-num {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--navy);
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  display: grid; place-items: center;
}
.steps-grid-text strong { display: block; font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.16rem; margin-bottom: 0.2rem; line-height: 1.12; }
.steps-grid-text > span { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.36; }
.steps-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; }
.steps-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.3rem; }
.steps-ticks li { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.steps-ticks .tick { color: var(--green); font-weight: 800; }
@media (max-width: 720px) {
  .steps-card { padding-top: 0.6rem; padding-bottom: clamp(5rem, 13vh, 6.5rem); }
  .steps-card .section-head { margin-bottom: 0.8rem; }
  .steps-card h2 { font-size: clamp(1.6rem, 6.6vw, 2.1rem); line-height: 1.05; }
  .steps-grid { grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 0.9rem; }
  .steps-grid-item { padding: 0.6rem 0.8rem; border-radius: 14px; gap: 0.7rem; }
  .steps-grid-num { width: 32px; height: 32px; font-size: 1rem; }
  .steps-grid-text strong { font-size: 1rem; margin-bottom: 0.1rem; }
  .steps-grid-text > span { font-size: 0.82rem; line-height: 1.28; }
  /* the sticky thumb bar already carries "See if I qualify" on mobile, so the
     card's own button would be redundant and push content behind the bar */
  .steps-card-foot .btn { display: none; }
  .steps-card-foot { justify-content: center; }
  .steps-ticks { justify-content: center; gap: 0.2rem 0.9rem; }
  .steps-ticks li { font-size: 0.8rem; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #b9c5d8; font-size: 0.9rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.4rem, 3vw, 2rem);
  padding-block: clamp(2.4rem, 6vw, 3.5rem) clamp(1.6rem, 4vw, 2.5rem);
}
.site-footer h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: #b9c5d8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-legal {
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-block: 1.6rem; font-size: 0.78rem; color: #8fa0b8;
}
.footer-legal p { margin-bottom: 0.5em; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; flex-wrap: wrap; gap: 0.6rem; padding: 0.55rem 1rem 0.7rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.97); /* solid fallback */
  box-shadow: 0 -10px 28px rgb(11 28 51 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.6);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 0.28s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sticky-cta {
    background: rgb(255 255 255 / 0.85);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
  }
}
/* honest reassurance line, not a scarcity claim — generated so every page
   gets it with zero markup changes */
.sticky-cta::before {
  content: "Initial enquiry only · indicative result in 60 seconds";
  flex: 1 0 100%; text-align: center;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-soft);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex: 1; padding-block: 0.85rem; }
.sticky-cta .btn--call { flex: 0 0 auto; }
@media (max-width: 860px) { .sticky-cta { display: flex; } }
body.has-sticky-cta { scroll-padding-bottom: 116px; }
@media (max-width: 860px) { body.has-sticky-cta .site-footer { padding-bottom: 104px; } }
/* one-shot arrival pulse, added by JS the first time the bar becomes visible;
   never repeats on subsequent scroll-triggered toggles */
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta .btn--primary.cta-pulse-once { animation: cta-glow-pulse 1.7s ease-out 1; }
}

/* ---------- Forms (prequalify + apply) ---------- */
.form-shell { max-width: 620px; margin-inline: auto; }
.progress-track {
  height: 10px; border-radius: 999px; background: var(--line); overflow: clip; margin-bottom: 0.5rem;
}
.progress-fill {
  height: 100%; border-radius: 999px; width: 12%;
  background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 60%, var(--gold)));
  transition: width 0.5s ease;
}
.progress-label { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 2rem; }
.form-step { display: none; position: relative; }
.form-step.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .form-step.is-active { animation: step-in 0.35s ease both; }
  @keyframes step-in { from { opacity: 0; transform: translateY(14px); } }
}
/* 150ms "working with you" skeleton between prequalify/apply steps — a brief,
   honest cue that the step changed, not fake loading (the transition really is
   swapping content underneath). Never used on page load. */
.form-shell { position: relative; }
.form-shell.is-transitioning::before {
  content: ""; position: absolute; inset: 0; z-index: 5; background: var(--paper);
}
.form-shell.is-transitioning::after {
  content: ""; position: absolute; top: 6.4rem; left: 0; z-index: 6;
  width: 45%; height: 2.2rem; border-radius: 8px; background: var(--line);
}
@media (prefers-reduced-motion: no-preference) {
  .form-shell.is-transitioning::after {
    background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 40%, white), var(--line));
    background-size: 200% 100%; animation: skeleton-shimmer-light 0.9s ease-in-out infinite;
  }
  @keyframes skeleton-shimmer-light { to { background-position: -200% 0; } }
}
.form-step h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.form-step .step-sub { color: var(--ink-soft); margin-bottom: 1.8rem; }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.8rem; }
.option-grid.cols-1 { grid-template-columns: 1fr; }
.option-card { position: relative; }
.option-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.option-card .option-label {
  display: flex; align-items: center; gap: 0.9rem;
  border: 2px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem;
  font-weight: 600; cursor: pointer; min-height: 64px;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.08s ease;
}
.option-card:active .option-label { transform: scale(0.97); transition-duration: 80ms; }
.option-card .option-label small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.8rem; }
.option-card:has(input:checked) .option-label { border-color: var(--navy); background: var(--cream); }
.option-card:has(input:focus-visible) .option-label { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .option-grid { grid-template-columns: 1fr; } }

.text-field { margin-bottom: 1.3rem; }
.text-field label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.45rem; }
.text-field input, .text-field select, .text-field textarea {
  width: 100%; font: inherit; padding: 0.9rem 1rem;
  border: 2px solid var(--line); border-radius: 12px; background: var(--paper);
  transition: border-color 0.15s ease;
}
.text-field input:focus, .text-field select:focus, .text-field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgb(11 28 51 / 0.08);
}
.text-field input:user-valid { border-color: var(--green); }
.text-field input:user-invalid { border-color: #c8402e; }
.field-error { display: none; color: #c8402e; font-size: 0.82rem; margin-top: 0.35rem; }
.text-field input:user-invalid ~ .field-error { display: block; }
.form-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.form-nav .btn--back { background: none; border: 0; color: var(--ink-soft); font-weight: 600; cursor: pointer; font-size: 0.95rem; }
.form-nav .btn--back:hover { color: var(--ink); }
@media (max-width: 600px) {
  /* thumb-first: the forward action reads first and spans the full width,
     Back demotes to a small centred text link underneath it */
  .form-nav { flex-direction: column-reverse; align-items: stretch; gap: 0.9rem; }
  .form-nav .btn { width: 100%; }
  .form-nav .btn--back { align-self: center; padding: 0.4rem; }
}
.form-reassure {
  display: flex; gap: 0.6rem; align-items: flex-start;
  background: var(--green-soft); border-radius: 12px; padding: 0.9rem 1.1rem;
  font-size: 0.88rem; margin-top: 1.6rem;
}
.form-reassure .tick { color: var(--green); flex-shrink: 0; margin-top: 0.1rem; }

/* result screen */
.result-panel { text-align: center; padding-block: 1rem; }
.result-badge {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1.4rem;
  display: grid; place-items: center; background: var(--green-soft); color: var(--green);
}
@media (prefers-reduced-motion: no-preference) {
  .result-badge { animation: pop-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  @keyframes pop-in { from { transform: scale(0.4); opacity: 0; } }
}
.result-panel .lede { margin-inline: auto; }

/* interstitial encouragement */
.interstitial-note {
  background: var(--green-soft); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; margin-bottom: 1.8rem;
  display: flex; gap: 0.8rem; align-items: flex-start; font-weight: 600;
}

/* ---------- Content pages ---------- */
.page-hero {
  position: relative; overflow: clip; isolation: isolate;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  background:
    linear-gradient(rgb(247 245 240 / 0.72), rgb(247 245 240 / 0.72)),
    url('../assets/img/bg-sunrise-road.webp') center 70% / cover no-repeat,
    var(--cream);
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero::before {
  content: ""; position: absolute; z-index: 0; top: -30%; right: -6%;
  width: min(40vw, 460px); height: min(40vw, 460px);
  background: radial-gradient(closest-side, rgb(255 176 84 / 0.16), transparent 72%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(20px); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero::before { animation: aurora-drift-a 80s ease-in-out infinite; }
}
.page-hero .lede { max-width: 56ch; }
.games-page-hero {
  background:
    linear-gradient(rgb(7 20 38 / 0.84), rgb(7 20 38 / 0.84)),
    url('../assets/img/bg-sunrise-road.webp') center 70% / cover no-repeat,
    var(--navy);
  color: #eef2f8;
}
.games-page-hero h1 { color: #fff; }
.games-page-hero .hl,
.games-page-hero .eyebrow { color: var(--gold); }
.games-page-hero .lede { color: #d2deec; }
/* Brisbane city page: swap the shared page-hero photography for the local skyline motif, same contrast-protecting tint */
.hero--brisbane .page-hero {
  background:
    linear-gradient(rgb(247 245 240 / 0.74), rgb(247 245 240 / 0.74)),
    url('../assets/img/motif-brisbane-skyline.webp') center 75% / cover no-repeat,
    var(--cream);
}
.prose { max-width: 720px; }
.prose h2 { margin-top: 2.2em; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* comparison table */
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 640px; }
.compare-table th, .compare-table td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare-table thead th { font-family: var(--font-display); font-size: 1rem; }
.compare-table thead th.us { background: var(--navy); color: #fff; border-radius: 12px 12px 0 0; }
.compare-table tbody td.us { background: var(--cream); font-weight: 600; }
.compare-table .tick { color: var(--green); }
.compare-table .cross { color: #c8402e; }

/* ---------- Reveal animations (opt-in) ---------- */
html.js .reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
  html.js .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.5s ease, transform 0.5s ease; }
  html.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
  html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
  html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
  html.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
  html.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
  html.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
}

/* scroll progress (enhancement, Chrome/Edge/Safari) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 110;
      background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
      animation: grow-progress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes grow-progress { to { transform: scaleX(1); } }
  }
}

/* cross-document view transitions (enhancement) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Reduced motion hard fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.section-head { margin-bottom: clamp(1.6rem, 4vw, 3.2rem); }
@media (max-width: 700px) {
  /* tighter vertical rhythm throughout: less scroll between the pitch and the button */
  h1 { margin-bottom: 0.5em; }
  .hero-copy .lede { margin-block: 0.9rem 1.3rem; }
  .lede { font-size: clamp(1rem, 1vw + 0.85rem, 1.15rem); }
  .honest-panel { padding: clamp(1.3rem, 4vw, 1.8rem); }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================================
   WHY NOT — animated groovy wordmark (header + hero)
   ============================================================ */
.wn-mark{
  --wn-navy:#0b1c33; --wn-navy-deep:#071426;
  --wn-otop:#ffd06a; --wn-ohi:#ffa838; --wn-o:#ff8a1e; --wn-odeep:#fb7d12;
  --wn-cream:#fff3d8; --wn-speed:2.55s;
  display:inline-flex; align-items:flex-end; justify-content:center;
  gap:.02em; white-space:nowrap; line-height:.74; letter-spacing:-.058em;
  font-family:"Modak","Bagel Fat One",system-ui,sans-serif;
  user-select:none; -webkit-user-select:none;
}
.wn-word{ display:inline-flex; white-space:nowrap; }
.wn-word + .wn-word{ margin-left:.12em; }
.wn-letter{
  position:relative; display:inline-block;
  transform:rotate(var(--r,0deg)) translateY(var(--y,0)) scaleX(var(--sx,1));
  margin:0 -.01em; padding:.03em;
}
.wn-nudge{
  position:relative; display:inline-block;
  transform:translate3d(var(--mx,0px),var(--my,0px),0) rotate(var(--mr,0deg)) scale(var(--ms,1));
  transition:transform 110ms cubic-bezier(.22,.75,.28,1); will-change:transform;
}
.wn-jiggle{
  position:relative; display:inline-block; transform-origin:50% 78%;
  animation:wn-soft-jiggle var(--wn-speed) ease-in-out infinite; animation-delay:var(--delay,0s);
  will-change:transform;
}
.wn-letter.is-active .wn-jiggle,
.wn-letter.poked .wn-jiggle{ animation:wn-poke .74s cubic-bezier(.2,.75,.25,1) both; }
.wn-rim,.wn-body{ display:block; font:inherit; line-height:inherit; }
.wn-rim{
  position:relative; z-index:0; color:var(--wn-navy);
  -webkit-text-stroke:.13em var(--wn-navy);
  text-shadow:.018em .018em 0 var(--wn-navy-deep), -.008em .014em 0 var(--wn-navy-deep);
}
.wn-body{
  position:absolute; inset:0; z-index:1; color:transparent;
  background:linear-gradient(180deg,var(--wn-otop) 0%,var(--wn-ohi) 28%,var(--wn-o) 62%,var(--wn-odeep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-stroke:.042em var(--wn-cream);
}
@keyframes wn-soft-jiggle{
  0%,100%{transform:scale(1,1) skewX(0deg) rotate(0deg);}
  18%{transform:scale(1.04,.96) skewX(-2.2deg) rotate(-.45deg);}
  38%{transform:scale(.97,1.03) skewX(1.65deg) rotate(.28deg);}
  58%{transform:scale(1.024,.982) skewX(-1deg) rotate(-.16deg);}
  78%{transform:scale(.992,1.012) skewX(.55deg) rotate(.08deg);}
}
@keyframes wn-poke{
  0%{transform:scale(1,1) skewX(0deg) rotate(0deg);}
  13%{transform:scale(1.28,.72) skewX(-10deg) rotate(-2deg);}
  30%{transform:scale(.76,1.22) skewX(8deg) rotate(1.6deg);}
  48%{transform:scale(1.15,.86) skewX(-5deg) rotate(-1deg);}
  64%{transform:scale(.94,1.08) skewX(2.4deg) rotate(.5deg);}
  82%{transform:scale(1.035,.965) skewX(-1deg) rotate(-.2deg);}
  100%{transform:scale(1,1) skewX(0deg) rotate(0deg);}
}
/* header — mark only, sits in the nav bar */
.site-header .logo{ align-items:center; gap:0; }
.wn-mark--sm{ font-size:2.2rem; filter:drop-shadow(.012em .022em 0 rgba(7,20,38,.18)); }
@media (max-width:700px){ .wn-mark--sm{ font-size:2.6rem; } }

/* sub brand suffix — "Own It" in blue, a size down (whynotdrive.com.au lockup) */
.wn-word + .wn-word--sub{ margin-left:.22em; }
.wn-word--sub{ font-size:.64em; }
.wn-word--sub .wn-body{
  background:linear-gradient(180deg,#4aa3e0 0%,#1f83cf 28%,#0066b3 62%,#024f92 100%);
  -webkit-background-clip:text; background-clip:text;
}
/* hero — big brand centrepiece above the headline */
.hero-wordmark{ margin-bottom:.5rem; line-height:1; }
.wn-mark--hero{
  font-size:clamp(3rem,7vw,5.4rem); transform:rotate(-1.4deg);
  filter:drop-shadow(.018em .035em 0 rgba(7,20,38,.18));
}
@media (max-width:700px){ .wn-mark--hero{ font-size:clamp(2.7rem,13vw,4rem); } }
@media (prefers-reduced-motion:reduce){
  .wn-jiggle{ animation:none; }
  .wn-nudge{ transition:none; }
}

/* inline mark — lives inside the hero headline */
.wn-mark--inline{
  font-size:1.35em;
  vertical-align:-.12em;
  margin:0 .16em;
  letter-spacing:-.05em;
  filter:drop-shadow(.012em .02em 0 rgba(7,20,38,.16));
}

/* enlarge the front-page hero headline (header logo size unchanged) */
.hero h1{ font-size:clamp(2.5rem,6.6vw,5rem); line-height:1.2; }

/* mobile-only: much bigger hero (desktop stays as before) */
@media (max-width:700px){
  .hero h1{ font-size:clamp(3.8rem,14vw,5.6rem); line-height:1.24; }
  .wn-mark--inline{ font-size:1.32em; margin:0 .13em 0 .05em; }
}

/* grab-and-drag stretch on the interactive Why Not mark */
.wn-mark--interactive .wn-letter{ touch-action:none; cursor:grab; }
.wn-mark--interactive .wn-letter:active{ cursor:grabbing; }

/* stacked lockup — "Own It" drops onto its own line under "Why Not".
   Generic modifier, usable anywhere. The loading curtain keeps its own
   scoped copy of these rules further down and is untouched by this. */
.wn-mark--stack{ flex-wrap:wrap; }
.wn-mark--stack .wn-subline{
  flex-basis:100%; display:inline-flex; justify-content:center; align-items:flex-start;
  margin-top:.08em;
}
.wn-mark--stack .wn-word--sub{ font-size:.46em; }
.wn-mark--stack .wn-word--sub + .wn-word--sub{ margin-left:.2em; }

/* footer lockup — the chunky rim flips to cream so the mark reads as a
   sticker on the navy footer, and it keeps the jiggle and the grab-to-
   stretch the header mark has. */
.site-footer .logo{ display:inline-flex; align-items:flex-end; }
.site-footer .logo:hover{ text-decoration:none; }
.wn-mark--footer{
  --wn-navy:#fff3d8;
  --wn-navy-deep:#d9c49a;
  --wn-cream:#0b1c33;
  font-size:clamp(2.2rem,9vw,3rem);
  transform:rotate(-1deg);
  filter:drop-shadow(0 .028em .03em rgba(0,0,0,.42));
  -webkit-user-drag:none;
}


/* ============================================================
   2026 MOBILE ENHANCEMENT LAYER
   Everything below is progressive enhancement: guarded by
   @supports / @media, older browsers simply ignore it.
   ============================================================ */

/* ---------- Cross-document view transitions (app-like page changes).
   Baseline newly available: Chrome 126+, Safari 18+, Firefox 144+.
   The header and thumb bar persist across navigations, the rest
   cross-fades quickly — feels like an app, costs zero JS. ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }
@supports (view-transition-name: none) {
  .site-header { view-transition-name: site-header; }
  .sticky-cta { view-transition-name: thumb-bar; }
}

/* ---------- Small-viewport hero: the first screen is a complete,
   composed "app screen" on phones (svh ignores the URL bar dance) ---------- */
@media (max-width: 860px) {
  .hero { min-height: calc(100svh - 58px); display: flex; flex-direction: column; }
  .hero > .wrap:first-child { margin-block: auto; }
}

/* ---------- Buttery accordion open/close (FAQ + card details).
   interpolate-size + ::details-content lets height animate to auto,
   pure CSS. Chrome 131+, others keep the instant toggle. ---------- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  @media (prefers-reduced-motion: no-preference) {
    details::details-content {
      block-size: 0; overflow-y: clip;
      transition: content-visibility 0.32s allow-discrete, block-size 0.32s cubic-bezier(0.33, 1, 0.4, 1);
    }
    details[open]::details-content { block-size: auto; }
  }
}

/* ---------- Scroll-driven micro-parallax (CSS only, mobile only).
   The hero car and card imagery drift gently with scroll — depth
   without a single scroll listener. ---------- */
@supports (animation-timeline: view()) {
  @media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
    .hero-visual .hero-car {
      animation: wn-car-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .car-card-visual img {
      animation: wn-img-drift linear both;
      animation-timeline: view();
      animation-range: entry 10% exit 90%;
    }
  }
}
@keyframes wn-car-drift { from { transform: translateY(10px); } to { transform: translateY(-12px); } }
@keyframes wn-img-drift { from { transform: translateY(6px) scale(1.02); } to { transform: translateY(-6px) scale(1.02); } }

/* ---------- Typography and touch polish ---------- */
p, li { text-wrap: pretty; }
a, button, input, label, summary { touch-action: manipulation; } /* kills double-tap zoom delay on taps */
html.js .nav-links { overscroll-behavior: contain; } /* menu scroll never chains to the page */

/* ---------- Wide-gamut amber for OLED phones: the CTA colour most
   phones can actually show, richer than sRGB, same brand hue ---------- */
@media (color-gamut: p3) {
  @supports (color: color(display-p3 1 0 0)) {
    .btn--primary { background: color(display-p3 1 0.57 0.18); }
    .btn--primary:hover { background: color(display-p3 0.92 0.42 0.05); }
  }
}

/* ---------- Hero game hook (index): the viral loop's front door ---------- */
.hero-game-hook { margin-top: 1rem; font-size: 0.92rem; }
.hero-game-hook a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem; border-radius: 999px; text-decoration: none;
  background: rgb(11 28 51 / 0.06); border: 1px solid var(--line);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.hero-game-hook a:active { transform: scale(0.96); }
.hero-game-hook a:hover { background: rgb(11 28 51 / 0.1); }

/* ---------- Thumb bar game button (index only) ---------- */
.sticky-cta .btn--game { flex: 0 0 auto; font-size: 1.3rem; padding-inline: 0.95rem; }

/* ============================================================
   STRUCTURAL REDESIGN v2
   Additive layer on top of everything above. Brand tokens,
   copy, funnel logic, form field names and the game engine are
   untouched — every rule here restructures containers around
   the same frozen content. All new classes; nothing renamed.
   Guarded the same way as the layer above: @supports fallbacks,
   prefers-reduced-motion gates, JS-off readability preserved.
   ============================================================ */

/* ---------- 1. Asymmetric bento v2 ---------- */
.bento-card--micro { padding: 1.05rem 1.15rem; display: flex; flex-direction: column; gap: 0.3rem; }
.bento-card--micro .bento-icon { width: 32px; height: 32px; margin-bottom: 0.25rem; }
.bento-card--micro .bento-icon--img { width: 36px; height: 36px; }
.bento-card--micro h3 { font-size: 0.95rem; margin-bottom: 0.1rem; }
.bento-card--micro p { font-size: 0.8rem; margin: 0; }
/* ghosted oversized icon behind a feature card's copy — set the image via
   inline style="--ghost-img:url(...)" on the element carrying [data-ghost] */
.bento-card--feature[data-ghost]::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; inset: 0;
  background-image: var(--ghost-img); background-repeat: no-repeat;
  background-size: 68%; background-position: 108% 118%;
  opacity: 0.1; filter: grayscale(1) brightness(4);
}
/* named-area asymmetric compositions: focal cell spans 2x2, four dense
   micro cells fill around it, optional closing CTA cell spans the row */
@media (min-width: 921px) {
  .bento--areas {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "focal focal micro-a micro-b"
      "focal focal micro-c micro-d"
      "cta cta cta cta";
  }
  .bento--areas-5 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "focal focal micro-a micro-b"
      "focal focal micro-c micro-d";
  }
}
.a-focal { grid-area: focal; }
.a-a { grid-area: micro-a; }
.a-b { grid-area: micro-b; }
.a-c { grid-area: micro-c; }
.a-d { grid-area: micro-d; }
.a-cta { grid-area: cta; }
@media (max-width: 920px) {
  /* below 921px there is no grid-template-areas at all, so the unconditional
     `grid-area: focal` etc. above point at named areas/lines that don't
     exist in this grid — Chrome quietly falls back to auto-placement, but
     Safari resolves it inconsistently, producing a badly broken layout
     (confirmed on a real device). Reset grid-area fully before reapplying
     the one placement rule this tier actually needs. */
  .bento--areas, .bento--areas-5 { grid-template-columns: 1fr 1fr; }
  .bento--areas > *, .bento--areas-5 > * { grid-area: auto; }
  .bento--areas .a-focal, .bento--areas-5 .a-focal { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bento--areas, .bento--areas-5 { grid-template-columns: 1fr; }
  .bento--areas > *, .bento--areas-5 > * { grid-area: auto; grid-column: 1; }
}

/* ---------- 2. Split-screen hero blocks (desktop signature move) ---------- */
.split-screen { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 861px) {
  .split-screen { grid-template-columns: 1fr 1fr; align-items: start; }
  .split-screen--55 { grid-template-columns: 1.05fr 0.95fr; }
  .split-screen-sticky { position: sticky; top: 108px; align-self: start; }
}
.split-screen-scroll { min-width: 0; }

/* ---------- 3. Modular card-deck stacking ---------- */
.deck-stack { max-width: 640px; }
.deck-card {
  position: sticky; top: 100px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 4vw, 2.4rem);
  margin-bottom: 1.1rem; overflow: clip;
}
.deck-card:nth-child(2) { top: 116px; }
.deck-card:nth-child(3) { top: 132px; }
.deck-card:nth-child(4) { top: 148px; }
.deck-card:nth-child(5) { top: 164px; }
.deck-card .deck-num {
  font-family: var(--font-display); font-weight: 800; line-height: 1; margin-bottom: 0.5rem;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: color-mix(in srgb, var(--navy) 14%, white);
}
.deck-card h3 { margin-bottom: 0.4rem; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck-card {
      animation: deck-settle linear both; animation-timeline: view();
      animation-range: cover 0% cover 35%;
    }
    @keyframes deck-settle {
      from { transform: scale(0.96); filter: brightness(0.86); }
      to { transform: none; filter: none; }
    }
  }
}
@media (max-width: 860px) {
  .deck-card, .deck-card:nth-child(2), .deck-card:nth-child(3), .deck-card:nth-child(4), .deck-card:nth-child(5) {
    top: 64px; max-height: none;
  }
}

/* ---------- 4. Generic swipeable decks (extends the .car-row / .deck-dots machinery) ---------- */
.scroll-deck { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.deck-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.95rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.deck-item--chip {
  flex-direction: row; align-items: center; gap: 0.5rem;
  border-radius: 999px; padding: 0.55rem 1.05rem; font-weight: 700; font-size: 0.86rem; white-space: nowrap;
}
.deck-item--evidence { flex-direction: row; align-items: flex-start; gap: 0.65rem; }
.deck-item--evidence img { width: 32px; height: 32px; flex-shrink: 0; }
.deck-item--evidence p { margin: 0; font-size: 0.88rem; }
@media (max-width: 860px) {
  .scroll-deck--mobile-only {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 0.8rem; margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2rem));
    padding-inline: clamp(1.1rem, 4vw, 2rem); scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, black clamp(1.1rem, 4vw, 2rem), black calc(100% - clamp(1.1rem, 4vw, 2rem)), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black clamp(1.1rem, 4vw, 2rem), black calc(100% - clamp(1.1rem, 4vw, 2rem)), transparent);
  }
  .scroll-deck--mobile-only::-webkit-scrollbar { display: none; }
  .scroll-deck--mobile-only > .deck-item { flex: 0 0 78%; max-width: 300px; scroll-snap-align: center; }
  .scroll-deck--mobile-only > .deck-item--chip { flex: 0 0 auto; max-width: none; scroll-snap-align: start; }
}
@media (min-width: 861px) {
  .scroll-deck--relax { flex-wrap: wrap; }
  .scroll-deck--relax > .deck-item { flex: 1 1 calc(50% - 0.7rem); }
}
/* defensive fix: a horizontally-scrolling .scroll-deck--mobile-only nested
   inside a CSS grid column (e.g. .honest-panel's `1fr` track) still reports
   its un-clipped max-content width as its intrinsic size to the ancestor
   grid/flex sizing algorithm, even though overflow-x:auto clips it once a
   width is resolved — this silently widens the grid track (and therefore
   .wrap and the whole page) past the viewport. min-width:0 on the grid
   item stops the track from growing to fit the deck's un-scrolled content. */
.honest-panel > div { min-width: 0; }

/* ---------- 5. Blueprint accents — three zones only: fees, compare table, footer ---------- */
.blueprint-panel {
  position: relative; border: 1px solid rgb(11 28 51 / 0.18); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem); overflow: clip; isolation: isolate;
  background:
    linear-gradient(rgb(255 255 255 / 0.93), rgb(255 255 255 / 0.93)),
    url('../assets/img/tex-contour-lines.webp');
  background-size: auto, 480px 480px;
}
.blueprint-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgb(11 28 51 / 0.09) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgb(11 28 51 / 0.09) 0 1px, transparent 1px 48px);
}
.blueprint-panel > * { position: relative; z-index: 1; }
.blueprint-stamp {
  position: absolute; top: 1rem; right: 1.1rem; z-index: 2; transform: rotate(-2deg);
  border: 1px solid rgb(11 28 51 / 0.35); border-radius: 6px; padding: 0.3rem 0.7rem;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.blueprint-grid {
  display: grid; gap: 1px; background: rgb(11 28 51 / 0.16);
  border: 1px solid rgb(11 28 51 / 0.16); border-radius: 12px; overflow: clip; margin-top: 1.4rem;
}
.blueprint-grid > * { background: var(--paper); padding: 1rem 1.1rem; }
@media (min-width: 640px) { .blueprint-grid--2 { grid-template-columns: 1fr 1fr; } }
.compare-table--ruled th, .compare-table--ruled td { border-right: 1px solid rgb(11 28 51 / 0.12); }
.compare-table--ruled th:last-child, .compare-table--ruled td:last-child { border-right: 0; }
@media (max-width: 760px) {
  .compare-table--ruled th:first-child, .compare-table--ruled td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--paper);
    box-shadow: 1px 0 0 rgb(11 28 51 / 0.14);
  }
  .compare-table--ruled thead th:first-child.us { background: var(--navy); }
  .compare-table--ruled tbody td:first-child { background: var(--paper); }
}
@media (min-width: 861px) {
  .footer-grid--ruled > div { border-left: 1px solid rgb(255 255 255 / 0.12); padding-left: clamp(1.2rem, 3vw, 1.8rem); }
  .footer-grid--ruled > div:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .footer-grid--ruled > div { border-top: 1px solid rgb(255 255 255 / 0.12); padding-top: 1.2rem; }
  .footer-grid--ruled > div:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- 6. Overlapping layering at section seams ---------- */
.hero-car--overlap { position: relative; z-index: 2; margin-bottom: -40px; filter: drop-shadow(0 30px 34px rgb(11 28 51 / 0.3)); }
.trust-strip--overlap {
  position: relative; z-index: 1; background: var(--paper);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -16px 30px rgb(11 28 51 / 0.05);
}
@media (max-width: 860px) { .hero-car--overlap { margin-bottom: -22px; } }
.fleet-card--proud { overflow: visible; }
.fleet-card--proud .car-card-visual { overflow: visible; }
.fleet-card--proud .car-card-visual img { margin-top: -22px; filter: drop-shadow(0 20px 20px rgb(11 28 51 / 0.22)); }
.fleet-card--proud .car-price { position: relative; z-index: 2; background: var(--paper); border-radius: 10px; }
@media (min-width: 861px) { .fleet-card--proud .car-card-visual img { margin-top: -30px; } }
.heading-overlap { position: relative; z-index: 2; margin-top: clamp(-1.4rem, -3vw, -0.6rem); }
.motif-bleed { position: relative; }
.motif-bleed::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -8%; bottom: -12%; width: 52%; height: 86%;
  background: url('../assets/img/motif-question-mark.webp') no-repeat center / contain;
  opacity: 0.06;
}
@media (min-width: 861px) { .motif-bleed::after { opacity: 0.08; right: -5%; width: 40%; } }
.motif-bleed > .wrap { position: relative; z-index: 1; }
.motif-skyline { position: relative; }
.motif-skyline::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; left: -6%; bottom: -8%;
  width: 42%; height: 58%;
  background: url('../assets/img/motif-brisbane-skyline.webp') no-repeat bottom left / contain;
  opacity: 0.09;
}
.motif-skyline > .wrap { position: relative; z-index: 1; }

/* ---------- 7. Stark typographic containers (final CTAs, 404, stats) ---------- */
.type-wall { text-align: center; }
.type-wall h2 {
  font-size: clamp(2.5rem, 8vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em;
  text-transform: uppercase; margin-bottom: 0;
}
@media (min-width: 1280px) { .type-wall h2 { font-size: clamp(3.2rem, 3.8vw, 4.4rem); } }
.type-wall-inner { display: grid; place-items: center; gap: 1.3rem; padding-block: clamp(0.8rem, 3vw, 1.8rem) 0; }
.stats-band--editorial { text-align: left; align-items: end; }
.stats-band--editorial .stat-num { font-size: clamp(3.2rem, 8.5vw, 6rem); display: block; }
.stats-band--editorial .stat-label { max-width: 20ch; }
@media (max-width: 700px) { .stats-band--editorial { text-align: left; } }

/* ---------- 8. Floating action dock (mobile only — restyles the existing .sticky-cta) ---------- */
@media (max-width: 860px) {
  .sticky-cta {
    left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
    border-radius: 21px; padding: 0.5rem 0.55rem; gap: 0.5rem; align-items: stretch;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(247 245 240 / 0.92));
    border: 1px solid rgb(11 28 51 / 0.08);
    box-shadow: 0 18px 40px rgb(11 28 51 / 0.28), 0 3px 10px rgb(11 28 51 / 0.13), inset 0 1px 0 rgb(255 255 255 / 0.9);
  }
  /* trust line as a small navy chip floating just above the dock */
  .sticky-cta::before {
    position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
    margin: 0 0 0.55rem; width: max-content; max-width: 88vw;
    background: rgb(11 28 51 / 0.92); color: #fff; border-radius: 999px;
    padding: 0.34rem 0.9rem; font-size: 0.66rem; letter-spacing: 0.02em; font-weight: 700;
    box-shadow: 0 6px 16px rgb(11 28 51 / 0.3);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  /* primary: a plump, glossy amber button that begs a thumb — soft gradient,
     inner highlight, warm glow underneath and an arrow cue. A slow shine
     sweeps across every few seconds (transform-only, motion-gated). */
  .sticky-cta .btn--primary {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: 15px; padding-block: 0.95rem;
    font-size: 1.02rem; letter-spacing: 0.01em;
    background: linear-gradient(180deg, #ffa54a 0%, var(--accent) 52%, #f27f0c 100%);
    box-shadow:
      0 8px 20px rgb(255 138 30 / 0.4),
      0 2px 6px rgb(11 28 51 / 0.12),
      inset 0 1.5px 0 rgb(255 255 255 / 0.55),
      inset 0 -2px 0 rgb(0 0 0 / 0.1);
    transition: transform 0.12s ease;
  }
  .sticky-cta .btn--primary::after { content: "\00a0\2192"; font-weight: 800; }
  .sticky-cta .btn--primary::before {
    content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.5), transparent);
    transform: translateX(-160%) skewX(-18deg); pointer-events: none;
  }
  .sticky-cta .btn--primary:active { transform: scale(0.965); }
  @media (prefers-reduced-motion: no-preference) {
    .sticky-cta .btn--primary::before { animation: dock-shine 5s ease-in-out infinite; }
    @keyframes dock-shine {
      0%, 62% { transform: translateX(-160%) skewX(-18deg); }
      80%, 100% { transform: translateX(460%) skewX(-18deg); }
    }
  }
  /* secondary actions: soft raised tiles carrying the site's own colourful
     3D icons, so the row reads rich and friendly rather than flat chrome */
  .sticky-cta .btn--game, .sticky-cta .btn--call {
    flex: 0 0 auto; width: 52px; height: auto; min-width: 0; padding: 0;
    display: grid; place-items: center; border-radius: 15px; font-size: 0; line-height: 0;
    background: linear-gradient(180deg, #fff 0%, #eef1f6 100%);
    border: 1px solid rgb(11 28 51 / 0.12);
    box-shadow: 0 3px 8px rgb(11 28 51 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.9);
    transition: transform 0.12s ease;
  }
  .sticky-cta .btn--game img, .sticky-cta .btn--call img {
    width: 27px; height: 27px; object-fit: contain;
    filter: drop-shadow(0 2px 3px rgb(11 28 51 / 0.28));
  }
  .sticky-cta .btn--game:active, .sticky-cta .btn--call:active { transform: scale(0.94); }
  @media (hover: hover) {
    .sticky-cta .btn--game:hover, .sticky-cta .btn--call:hover { transform: translateY(-2px); }
  }
  /* one-shot arrival pulse for the dock itself, first time it appears */
  @media (prefers-reduced-motion: no-preference) {
    .sticky-cta.dock-arrive { animation: dock-pop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
    @keyframes dock-pop { from { transform: translateY(8px) scale(0.94); opacity: 0.4; } }
  }
}
@media (min-width: 861px) { .sticky-cta { display: none !important; } }

/* ---------- 9. Branded loading intro (first visit only, never in the funnel) ---------- */
.load-curtain {
  position: fixed; inset: 0; z-index: 300; background: var(--navy);
  display: grid; place-items: center; pointer-events: none;
}
.load-curtain[hidden] { display: none; }
.load-curtain .wn-mark { font-size: clamp(2.8rem, 15vw, 5.6rem); }
/* loading logo shows the full lockup with "Own It" stacked beneath "Why Not"
   (the header keeps its inline lockup — this is scoped to the curtain). */
.load-curtain .rings-logo { flex-wrap: wrap; }
.load-curtain .rings-logo .wn-subline {
  flex-basis: 100%; display: inline-flex; justify-content: center; align-items: flex-start;
  margin-top: 0.08em;
}
.load-curtain .rings-logo .wn-word--sub { font-size: 0.46em; }
@media (prefers-reduced-motion: no-preference) {
  .load-curtain .wn-mark { transform-origin: 50% 55%; }
  .load-curtain.is-stretching .wn-mark { animation: load-stretch 780ms cubic-bezier(0.16, 1.6, 0.3, 1) both; }
  @keyframes load-stretch {
    0% { transform: scale(1, 1); }
    42% { transform: scale(1.42, 0.76); }
    68% { transform: scale(0.9, 1.1); }
    100% { transform: scale(1, 1); }
  }
  .load-curtain.is-leaving { animation: load-curtain-lift 420ms cubic-bezier(0.4, 0, 0.2, 1) both; }
  @keyframes load-curtain-lift { to { opacity: 0; transform: translateY(-3%); } }
}
@media (prefers-reduced-motion: reduce) { .load-curtain { display: none !important; } }

/* ---------- 9b. Homepage-only: Looney-Tunes bullseye loader ----------
   Used only on index.html (.load-curtain--stage) and, unlike the branded
   once-per-session intro elsewhere, it plays on EVERY load. A classic
   cartoon "bullseye" — red concentric rings on a navy field with the Why
   Not wordmark popping through a navy centre hole, jiggling as it loads,
   then punching out toward the viewer to reveal the page. Pure CSS (no
   image to fetch), drawn over content that has already painted beneath, so
   LCP/CLS are unaffected. Disabled entirely under reduced motion (page
   shows immediately). */
.load-curtain--stage { overflow: hidden; }
.load-curtain--rings { background: #6f1710; }
.rings-field {
  position: absolute; inset: -14%; z-index: 0;
  /* concentric cartoon rings — two reds banded hard for a flat, inked look */
  background: repeating-radial-gradient(circle at 50% 50%,
    #e5402c 0 3.5%, #c1281a 3.5% 7%);
  will-change: transform;
}
.rings-core {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: min(64vmin, 340px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 40%, #14294a 0 56%, #0b1c33 100%);
  /* chunky cream + gold cartoon ring around the centre hole */
  box-shadow:
    0 0 0 0.42em #fff3d8,
    0 0 0 0.78em #0b1c33,
    0 0 0 1.05em #ffcf4a,
    0 0 0 1.42em #0b1c33,
    0 1.1em 2.6em rgb(0 0 0 / 0.34);
}
.load-curtain--rings .rings-logo {
  position: relative; z-index: 2; pointer-events: auto;
  font-size: clamp(2.4rem, 12.5vw, 4.4rem);
  filter: drop-shadow(0 0.06em 0 rgb(7 20 38 / 0.4));
}
@media (prefers-reduced-motion: no-preference) {
  /* the show (~2.5s): the rings breathe like the classic zoom while the
     wordmark BOUNCES up through the hole and keeps jiggling (its own
     wn-soft-jiggle), then the whole bullseye punches out toward the viewer
     as the page is revealed behind it. */
  .load-curtain--rings.is-open .rings-field { animation: rings-breathe 2.6s ease-in-out infinite; }
  .load-curtain--rings.is-open .rings-core  { animation: rings-core-pop 0.66s cubic-bezier(0.18, 1.5, 0.32, 1) both; }
  /* the wordmark bounces in, then keeps swelling out past the navy hole —
     growing bigger than the blue circle on each beat as it loads */
  .load-curtain--rings.is-open .rings-logo {
    animation:
      rings-logo-in 0.82s cubic-bezier(0.18, 1.55, 0.3, 1) both,
      rings-logo-grow 1.5s ease-in-out 0.84s infinite;
  }
  @keyframes rings-logo-grow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.52); }
  }
  @keyframes rings-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.055); }
  }
  @keyframes rings-core-pop {
    0% { transform: translate(-50%, -50%) scale(0.5); }
    60% { transform: translate(-50%, -50%) scale(1.07); }
    100% { transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes rings-logo-in {
    0% { opacity: 0; transform: scale(0.18) rotate(-12deg); }
    44% { opacity: 1; transform: scale(1.26) rotate(5deg); }
    66% { transform: scale(0.9) rotate(-2.5deg); }
    84% { transform: scale(1.07) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
  }
  /* punch out toward the viewer as the page is revealed behind */
  .load-curtain--rings.is-leaving { animation: rings-punch-out 420ms cubic-bezier(0.4, 0, 0.2, 1) both; }
  @keyframes rings-punch-out {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
  }
}
@media (prefers-reduced-motion: reduce) { .load-curtain--stage { display: none !important; } }

/* ---------- 10. Signature mobile menu — circular reveal + extra content ---------- */
@media (max-width: 860px) {
  /* out of normal document flow by default: .nav-menu-mark previously sat
     as an always-present block inside <nav>, which forced <nav> (a flex
     item in .nav-bar) to widen to fit it even while the takeover panel was
     closed — that pushed .nav-toggle off-screen and caused sitewide
     horizontal overflow at mobile widths. It should only ever appear as
     decorative content inside the open, fixed-position nav-links takeover. */
  .nav-menu-mark { display: none; }
  html.js body.nav-open .nav-menu-mark {
    display: block; text-align: center;
    position: fixed; z-index: 3; left: 0; right: 0;
    top: max(1.7rem, env(safe-area-inset-top) + 1rem);
  }
  html.js body.nav-open .nav-menu-mark .wn-mark { font-size: clamp(2.5rem, 13vw, 3.4rem); }
  @media (prefers-reduced-motion: no-preference) {
    html.js body.nav-open .nav-menu-mark { animation: nav-mark-pop 0.55s cubic-bezier(0.2, 1.35, 0.4, 1) 0.05s both; }
    @keyframes nav-mark-pop {
      0% { opacity: 0; transform: translateY(-14px) scale(0.78); }
      100% { opacity: 1; transform: none; }
    }
  }
  .nav-fact-chip {
    display: inline-flex; align-self: flex-start; margin: 0.2rem 0 0.1rem;
    background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.8rem; color: #fff; font-weight: 600;
  }
  html.js .nav-links li.nav-game-entry a:not(.btn) { justify-content: flex-start; gap: 0.7rem; }
  .nav-streak {
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; color: var(--gold);
    background: rgb(255 255 255 / 0.1); border-radius: 999px; padding: 0.25rem 0.6rem; letter-spacing: 0;
  }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html.js .nav-links {
    clip-path: circle(0% at calc(100% - 34px) 34px);
    transition: clip-path 0.5s cubic-bezier(0.22, 0.75, 0.28, 1), opacity 0.32s ease, visibility 0s linear 0.5s;
  }
  html.js .nav-links.is-open {
    clip-path: circle(150% at calc(100% - 34px) 34px);
    transition: clip-path 0.5s cubic-bezier(0.22, 0.75, 0.28, 1), opacity 0.32s ease;
  }
}
/* the wordmark scene, fact chip and game entry are menu-takeover content
   only — the desktop header keeps its plain inline link row unchanged */
@media (min-width: 861px) {
  .nav-menu-mark, .nav-fact, .nav-game-entry { display: none; }
}

/* ---------- 11. The game as a site feature ---------- */
.game-wall-frame {
  position: relative; border-radius: var(--radius-lg); overflow: clip;
  padding: 0.5rem; box-shadow: var(--shadow-md); transform: rotate(-0.5deg);
  background:
    linear-gradient(rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.88)),
    url('../assets/img/tex-paper-tile.webp');
  background-size: auto, 340px 340px;
}
.game-wall-pin {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 16px; height: 16px; border-radius: 50%;
  /* decorative pushpin, deliberately navy not amber — amber stays reserved
     for conversion actions only, this is set dressing */
  background: radial-gradient(circle at 35% 30%, #4a5b78, var(--navy));
  box-shadow: var(--shadow-sm);
}
.game-wall-frame > .game-panel { position: relative; z-index: 1; transform: none; }
@media (min-width: 1000px) {
  .game-wall-frame--wide { display: grid; grid-template-columns: 1fr; }
}
.game-footer-link { display: flex; align-items: center; gap: 0.4rem; }

/* Two-game discovery block. The games already carry the theatrical moments;
   this section makes both experiences obvious to visitors and crawlable as
   named, descriptive site content. */
.games-spotlight {
  position: relative;
  overflow: hidden;
  background: var(--navy, #0b1c33);
  color: #fff;
}
.games-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 22%, rgba(255, 177, 31, 0.2), transparent 30%),
    radial-gradient(circle at 87% 76%, rgba(240, 91, 62, 0.2), transparent 32%);
}
.games-spotlight .wrap { position: relative; }
.games-spotlight-head { max-width: 800px; }
.games-spotlight-head .eyebrow { color: #ffb11f; }
.games-spotlight-head h2,
.games-spotlight-head .lede { color: #fff; }
.games-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.7rem);
}
.game-promo {
  position: relative;
  display: flex;
  min-height: clamp(290px, 35vw, 430px);
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.65rem;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(22px, 3vw, 36px);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  isolation: isolate;
  transition: transform 180ms ease, border-color 180ms ease;
}
.game-promo:hover,
.game-promo:focus-visible { transform: translateY(-5px); border-color: #ffb11f; }
.game-promo::before,
.game-promo::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.game-promo--drive {
  background: linear-gradient(155deg, rgba(12, 91, 146, 0.94), rgba(5, 22, 42, 0.96));
}
.game-promo--drive::before {
  width: 47%;
  height: 115%;
  left: 47%;
  top: 8%;
  background: linear-gradient(100deg, transparent 46%, rgba(255,255,255,.9) 47% 52%, transparent 53%);
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  opacity: .42;
}
.game-promo--drive::after {
  width: 132px;
  height: 132px;
  right: 9%;
  top: 10%;
  border-radius: 50%;
  background: #ffb11f;
  box-shadow: 0 0 60px rgba(255,177,31,.36);
}
.game-promo--toss {
  background: linear-gradient(145deg, rgba(29, 45, 70, 0.98), rgba(5, 18, 36, 0.98));
}
.game-promo--toss::before {
  width: 122px;
  height: 108px;
  right: 16%;
  top: 16%;
  background: #f7f3e8;
  border: 5px solid #aabbd0;
  clip-path: polygon(16% 8%, 81% 0, 100% 53%, 73% 100%, 7% 81%, 0 31%);
  transform: rotate(13deg);
  box-shadow: 0 18px 30px rgba(0,0,0,.28);
}
.game-promo--toss::after {
  width: 145px;
  height: 112px;
  right: 8%;
  top: 45%;
  border: 8px solid #bdd0e6;
  border-top-width: 13px;
  border-radius: 50% 50% 12px 12px;
  background: rgba(2, 11, 24, .7);
  transform: perspective(180px) rotateX(-8deg);
}
.game-promo-kicker {
  width: max-content;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: #ff8618;
  color: #0b1c33;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.game-promo strong {
  max-width: 80%;
  color: #fff;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: .95;
  letter-spacing: -.04em;
}
.game-promo > span:not(.game-promo-kicker):not(.game-promo-action) {
  max-width: 72%;
  color: #dbe8f6;
  font-size: clamp(.98rem, 1.6vw, 1.12rem);
}
.game-promo-action {
  margin-top: .5rem;
  color: #ffb11f;
  font-weight: 850;
}
.games-spotlight-more { margin: 1.4rem 0 0; text-align: right; }
.games-spotlight-more a { color: #fff; font-weight: 800; }
@media (max-width: 720px) {
  .games-spotlight-grid { grid-template-columns: 1fr; }
  .game-promo { min-height: 310px; }
  .games-spotlight-more { text-align: left; }
}
/* a milder stark-type treatment for the game section's own (unedited)
   heading — the closing final-cta band earns the full viewport-filling scale */
.game-stark-head h2 { font-size: clamp(1.9rem, 6.4vw, 3.6rem); text-transform: uppercase; letter-spacing: -0.02em; }

/* scroll-to-top scrunched-paper ball — pointer/hover devices only, mirrors
   the game's paper-ball motif as a tiny site personality touch */
.scroll-top-ball {
  position: fixed; right: 20px; bottom: 22px; z-index: 85;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 32% 28%, #fffdf6, var(--cream) 60%, #ded6bf 100%);
  box-shadow: var(--shadow-md); font-size: 1.15rem;
  display: none; align-items: center; justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
  .scroll-top-ball.is-visible { display: flex; }
  .scroll-top-ball:hover { box-shadow: var(--shadow-lg); }
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-top-ball.is-spinning { animation: ball-spin 0.6s linear; }
  @keyframes ball-spin { to { transform: rotate(360deg); } }
}

/* ---------- Desktop-only flourishes (cheap, high credibility) ---------- */
@media (hover: hover) and (pointer: fine) {
  .car-card-visual img { transition: transform 0.3s ease; }
  .car-card:hover .car-card-visual img { transform: scale(1.045); }
  .bento-card--micro:hover { transform: translateY(-3px) rotate(-0.3deg); }
  .deck-item:not(.deck-item--chip):hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
  .nav-links a:not(.btn) { position: relative; }
  @media (prefers-reduced-motion: no-preference) {
    .hero-visual { transition: transform 0.18s ease; will-change: transform; }
  }
}
@media (min-width: 861px) {
  /* FAQ: editorial two-column accordion instead of one long strip */
  .faq-list--split { columns: 2; column-gap: 1.6rem; }
  .faq-list--split details { break-inside: avoid; margin-bottom: 0.7rem; }
  /* game section: wider stage, leaderboard rendered inside the same canvas
     sits beside the copy rather than stacked below it */
  .game-stage-col { max-width: 640px; }
}

/* ---------- Funnel: blueprint progress track (subtle, structure-preserving) ---------- */
.progress-track--blueprint {
  position: relative; background: transparent; border: 1px solid rgb(11 28 51 / 0.18); border-radius: 4px;
}
.progress-track--blueprint::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; border-radius: 3px;
  background-image: repeating-linear-gradient(90deg, rgb(11 28 51 / 0.14) 0 1px, transparent 1px 10px);
}
.progress-track--blueprint .progress-fill { position: relative; z-index: 1; border-radius: 3px; }

/* ============================================================
   SCROLLYTELLING v2 — universal, JS-driven (main.js: "scrollytelling
   engine"). CSS-only scroll-timeline (v1) is too patchy on real
   audience browsers, so JS computes progress and writes --p (per
   element) / --gp (per group) / --hp (hero), read here via calc().
   Defaults to var(--p, 1) = settled, so JS-off/reduced-motion/pre-tick
   always renders normal and fully visible. Index-page opt-in only,
   via data-scrolly-* — doesn't touch shared classes on other pages.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-scrolly-group] > *,
  html.js [data-scrolly-solo]:not([data-scrolly-solo="mask"]) {
    opacity: var(--p, 1);
  }

  html.js [data-scrolly-group="bento"] { overflow: clip; }
  html.js [data-scrolly-group="bento"] > .a-focal {
    transform: scale(calc(0.92 + 0.08 * var(--p, 1))) translateY(calc((1 - var(--p, 1)) * 24px));
  }
  html.js [data-scrolly-group="bento"] > .a-a,
  html.js [data-scrolly-group="bento"] > .a-c {
    transform: translateX(calc((1 - var(--p, 1)) * -28px));
  }
  html.js [data-scrolly-group="bento"] > .a-b,
  html.js [data-scrolly-group="bento"] > .a-d {
    transform: translateX(calc((1 - var(--p, 1)) * 28px));
  }
  html.js [data-scrolly-group="bento"] > .a-cta {
    transform: translateY(calc((1 - var(--p, 1)) * 36px));
  }

  html.js [data-scrolly-group="stats"] > * {
    transform: scale(calc(0.85 + 0.15 * var(--p, 1)));
  }
  html.js [data-scrolly-group="fleet"] > * {
    transform: translateY(calc((1 - var(--p, 1)) * 26px)) rotate(calc((1 - var(--p, 1)) * -0.6deg));
  }
  /* steps: line fills behind the numbers as each step slides in */
  html.js [data-scrolly-group="steps"] > * {
    transform: translateX(calc((1 - var(--p, 1)) * -18px));
  }
  html.js [data-scrolly-group="steps"] { position: relative; }
  html.js [data-scrolly-group="steps"]::before {
    content: ""; position: absolute; left: 15px; top: 4px; bottom: 4px; width: 2px;
    background: var(--line); z-index: 0;
  }
  html.js [data-scrolly-group="steps"]::after {
    content: ""; position: absolute; left: 15px; top: 4px; width: 2px;
    background: var(--accent); z-index: 0; transform-origin: top;
    height: calc((100% - 8px) * var(--gp, 1));
  }

  html.js [data-scrolly-group="checklist"] > * {
    transform: translateY(calc((1 - var(--p, 1)) * 14px)) scale(calc(0.96 + 0.04 * var(--p, 1)));
  }
  html.js [data-scrolly-group="unfold"] > * {
    transform: translateX(calc((1 - var(--p, 1)) * -22px));
  }
  html.js [data-scrolly-group="receipt"] > * {
    transform: translateX(calc((1 - var(--p, 1)) * 14px));
  }
  html.js [data-scrolly-group="faq"] > * {
    transform: translateY(calc((1 - var(--p, 1)) * 12px));
  }
  html.js [data-scrolly-solo="focus"] { transform: scale(calc(0.96 + 0.04 * var(--p, 1))); }
  html.js [data-scrolly-solo="rise"] { transform: translateY(calc((1 - var(--p, 1)) * 22px)); }
  html.js [data-scrolly-solo="settle"] {
    transform: rotate(calc(-0.5deg + (1 - var(--p, 1)) * -6deg)) translateY(calc((1 - var(--p, 1)) * 20px));
  }
  /* navy panel wipes away (transform-only, no clip-path) */
  html.js [data-scrolly-solo="mask"] { position: relative; overflow: clip; }
  html.js [data-scrolly-solo="mask"]::before {
    content: ""; position: absolute; inset: 0; z-index: 2; background: var(--navy);
    transform-origin: right center; transform: scaleX(calc(1 - var(--p, 1)));
    pointer-events: none;
  }

  /* ---------- Hero: pinned scroll-scrubbed sequence, driven by --hp ---------- */
  html.js .hero--scrolly { min-height: 148vh; }
  html.js .hero-scrolly-track {
    position: sticky; top: 0; height: 100svh;
    display: flex; align-items: center; overflow: clip;
  }
  @media (max-width: 860px) {
    html.js .hero--scrolly { min-height: 122vh; }
    html.js .hero-scrolly-track { height: calc(100svh - 58px); }
  }
  html.js .hero-scrolly-track .hero-copy {
    transform: translateY(calc(var(--hp, 1) * -34px));
  }
  html.js .hero-scrolly-track .hero-car {
    /* wins over the mobile-only wn-car-drift view() animation below: an
       active CSS animation always overrides a plain transform property,
       so that older micro-parallax must be explicitly cancelled here */
    animation: none;
    transform: translateY(calc(30px - var(--hp, 1) * 46px)) scale(calc(0.94 + var(--hp, 1) * 0.1));
  }
  html.js .hero--scrolly .trust-strip--overlap {
    transform: translateY(calc((1 - var(--hp, 1)) * 46px));
    opacity: calc(0.45 + var(--hp, 1) * 0.55);
  }
}
/* real studio (white-bg) fleet photo, not a cutout render — a soft radial
   mask fades its own edges so it still reads as floating on the cream hero */
.hero-car--real {
  mask-image: radial-gradient(ellipse 62% 78% at 50% 55%, black 62%, transparent 96%);
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 55%, black 62%, transparent 96%);
}

/* ---------- What's included: native scroll-snap story ----------
   Third attempt at this section — floating cards, then a scroll-scrubbed
   crossfade, both landed badly. This reuses the hero's own mechanic
   wholesale instead of inventing another one: same .hero-story-track /
   .hero-story-progress / .hero-beat machinery (see initStoryTrack in
   main.js), just with the steering-wheel photo as a fixed backdrop image
   behind it instead of the hero's CSS-only dot-grid motifs. Base rules
   below are the accessible fallback — a plain navy block, beats stacked
   in normal document order, readable top to bottom with no JS. No
   .section wrapper on this element on purpose: that's what left a pale
   gap between this and the hero, which was breaking the magnetic feel of
   the scroll running from one into the other. */
.totem {
  position: relative; overflow: clip;
  background: var(--navy-deep); color: #fff;
}
.totem-bg { display: none; }
.totem-beat-icon {
  width: 76px; height: 76px; margin-bottom: 0.3rem;
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.4));
}
.totem-beat-icon img { width: 100%; height: 100%; object-fit: contain; }
/* bigger than the hero's own beats: these are full-screen "moments" for
   a single short inclusion each, so there's room (and reason) to push the
   type further than the hero's denser, more paragraph-heavy beats need. */
.totem-beat .hero-beat-text {
  font-size: clamp(1.9rem, 5.2vw + 0.5rem, 2.9rem);
}
.totem-beat p:not(.hero-beat-text):not(.hero-beat-kicker) {
  font-size: 1.2rem; max-width: 36ch;
}
.totem-beat .hero-beat-kicker { font-size: 0.95rem; }
.totem-beat-link { margin-top: 0.5rem; }
.totem-beat-link a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: #fff; text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1.5px solid rgb(255 255 255 / 0.3); border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.totem-beat-link a .arrow { display: inline-block; transition: transform 0.15s ease; }
.totem-beat-link a:hover, .totem-beat-link a:focus-visible { color: var(--accent); border-color: var(--accent); }
.totem-beat-link a:hover .arrow, .totem-beat-link a:focus-visible .arrow { transform: translateX(3px); }
/* inclusion beats rebuilt on the card system: a big icon circle, headline,
   description and one or more bordered feature panels (some with stacked rows
   or three small columns). Left-aligned, stacked from the top, with room
   reserved for the fixed qualify bar on phones. */
.totem-hero-icon { width: clamp(90px, 24vw, 112px); height: clamp(90px, 24vw, 112px); margin-bottom: 0.15rem; }
.totem-hero-icon img { width: 52%; height: 52%; }
/* Centre the content in the card the same way the wide view does, so it sits
   balanced with breathing room above rather than jammed to the top. NOTE: the
   two-class selector is deliberate — plain .totem-beat ties with .hero-beat on
   specificity and loses on source order, so its alignment silently never
   applied. .hero-beat.totem-beat outranks it. */
.hero-beat.totem-beat { align-content: center; gap: 0.8rem; }
@media (min-width: 861px) {
  /* desktop: each inclusion becomes a grander full-screen "moment" — a wider
     stage, a bigger confident icon and headline, and roomier feature blocks,
     kept as a robust centred single column (the four beats differ in
     structure, so a split-column grid would be fragile). */
  .hero-beat.totem-beat {
    align-content: center; padding-top: 0;
    max-width: 780px; gap: clamp(0.95rem, 1.9vh, 1.5rem);
  }
  .totem-beat .totem-hero-icon { width: 132px; height: 132px; }
  .totem-beat .hero-beat-text--body { font-size: clamp(2.3rem, 2.4vw + 1.2rem, 3rem); }
  .totem-beat p:not(.hero-beat-text):not(.hero-beat-kicker) { font-size: clamp(1.1rem, 0.5vw + 0.95rem, 1.28rem); max-width: 46ch; }
  .totem-beat .feature-panel, .totem-beat .feature-rows { max-width: 640px; }
  .totem-beat .feature-cols { gap: 1.6rem; }
  .totem-beat .totem-finale-amount { font-size: clamp(4rem, 5vw, 5.6rem); }
}
/* the final inclusion beat is the emotional payoff: a bigger headline, a big
   end-of-term callout, then the written-terms panel. */
.totem-beat .totem-finale-head { font-size: clamp(2.1rem, 6.2vw + 0.5rem, 3.1rem); line-height: 1.02; }
.totem-finale-head .hl-gold { color: var(--gold); }
.totem-finale-stat { display: flex; align-items: center; gap: 1.1rem; margin: 0.1rem 0; }
.totem-finale-amount {
  font-family: var(--font-display); font-weight: 800; line-height: 0.9; letter-spacing: -0.02em;
  font-size: clamp(3.4rem, 15vw, 4.8rem); color: var(--gold);
  text-shadow: 0 6px 24px rgb(255 138 30 / 0.28);
}
.totem-finale-label { font-size: 1rem; line-height: 1.3; color: #cbd6e8; max-width: 20ch; }
.totem-beat .hero-beat-text--body { font-size: clamp(1.7rem, 4.4vw + 0.5rem, 2.5rem); line-height: 1.05; }
.totem-beat p:not(.hero-beat-text):not(.hero-beat-kicker) { font-size: clamp(1rem, 1vw + 0.7rem, 1.15rem); line-height: 1.35; max-width: 40ch; }
.totem-beat .feature-panel, .totem-beat .feature-rows, .totem-beat .feature-cols { margin-top: 0.15rem; }
.totem-beat-link { margin-top: 0.7rem; }
/* reserve the thumb-bar's height at the foot so centred content settles in the
   space above it, not behind it (two-class selector to beat .hero-beat's own
   padding, same source-order tie as the alignment above). */
@media (max-width: 860px) { .hero-beat.totem-beat { padding-bottom: clamp(6.5rem, 14vh, 7.5rem); padding-top: clamp(1rem, 3vh, 1.8rem); } }

@media (prefers-reduced-motion: no-preference) {
  /* no page-level scroll-snap here on purpose: an earlier version added
     one (proximity, scoped just to this boundary) to smooth the handoff
     from the hero's own snap track into this one, but a page-level snap
     type fighting with two *nested* mandatory-snap tracks right at their
     shared boundary is exactly the kind of thing that produces stale-
     paint bugs on real mobile browsers (content visibly stuck until the
     next scroll gesture forces a repaint) — confirmed by a user report
     that matches that failure mode precisely. The dead gap this was
     originally solving is already gone now that this section isn't a
     .section anymore (zero space between the two, verified directly), so
     the extra magnetic layer isn't worth the risk it introduced. */
  html.js .totem { height: 100svh; }
  html.js .totem-bg {
    display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden;
  }
  html.js .totem-bg img {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.5;
    /* slow Ken Burns drift, subtle enough to read as "alive" without
       competing with the beat text for attention */
    animation: totem-bg-drift 14s ease-in-out infinite alternate;
  }
  html.js .totem-bg::after {
    /* darken so the white beat text stays legible over the photo the
       whole way through, not just at one scroll position */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(7 20 38 / 0.74) 0%, rgb(7 20 38 / 0.56) 34%, rgb(7 20 38 / 0.6) 68%, rgb(7 20 38 / 0.82) 100%);
  }
  @keyframes totem-bg-drift {
    from { transform: scale(1.06) translateY(0); }
    to { transform: scale(1.14) translateY(-2%); }
  }
}

/* ---------- Cars that go to work: horizontal scroll-snap story ----------
   Base rules below are the existing, already-shipped fallback: a plain
   cream section with a heading and the .car-row card grid/peek-carousel,
   completely unchanged. The enhanced block turns the same three cards
   into a full-bleed horizontal story using the *same* .hero-story-track/
   .hero-story-progress/.hero-beat machinery as the hero and totem (see
   initStoryTrack in main.js) — just sideways. The .hero-beat class is
   only there so that shared JS can find these cards; its own generic
   *unconditional* layout (grid/padding/max-width, meant for the hero's
   plain-block fallback) would otherwise leak into this card's base
   grid, so a higher-specificity rule cancels that out unconditionally,
   before the enhanced block opts back into a horizontal layout. */
.car-card.hero-beat {
  display: flex; flex-direction: column; align-content: normal; justify-items: normal;
  max-width: none; margin: 0; padding: 0; overflow: clip; position: relative;
}
.cars-beat-kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.cars-beat-or { display: block; font-size: 0.62em; font-weight: 500; color: var(--ink-soft); }
.cars-beat-link { display: none; margin: 0; }
.cars-aerial, .cars-bridge-fx { display: none; }
/* fallback shows the sharp still photo; the spinning-wheel "drive" cut-out is
   revealed only in the enhanced driving scene */
.car-photo--drive { display: none; }
/* price + end-of-term value note, and the inclusions reassurance
   line — shared by both the cream fallback and the enhanced dark story;
   the enhanced block below only recolours them for the dark background. */
.cars-price-block { display: flex; flex-direction: column; gap: 0.15rem; }
.cars-price-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.cars-price-note strong { color: var(--navy); font-weight: 800; }
/* flex [tick][text] so the wrapped lines of the sentence all align under the
   text, not raggedly under the tick */
.cars-included { font-size: 0.82rem; color: var(--ink-soft); margin: 0; max-width: 42ch; display: flex; gap: 0.35rem; align-items: baseline; }
.cars-included .tick { color: var(--green); font-weight: 800; flex: 0 0 auto; }
.cars-included > span { min-width: 0; }
.cars-included strong { color: var(--ink); font-weight: 700; }
/* two included-feature rows + fine print on each car card. Dark on the cream
   fallback; the story mode recolours them light on navy (below, with the other
   car-body overrides). */
.car-includes { display: grid; margin: 0; }
.car-include { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid rgb(11 28 51 / 0.1); }
.car-include:first-child { padding-top: 0; }
.car-include:last-child { border-bottom: 0; padding-bottom: 0; }
.car-include-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgb(11 28 51 / 0.05); border: 1px solid rgb(11 28 51 / 0.12); }
.car-include-ic--gold { background: rgb(255 138 30 / 0.1); border-color: rgb(255 138 30 / 0.4); }
.car-include-ic img { width: 55%; height: 55%; object-fit: contain; }
.car-include strong { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; line-height: 1.25; color: var(--ink); }
.car-include .hl-gold { color: var(--accent); }
.car-fineprint { font-size: 0.76rem; color: var(--ink-soft); margin: 0.15rem 0 0; }

@media (prefers-reduced-motion: no-preference) {
  html.js .cars--story .section-head,
  html.js .cars--story .cars-fallback-link,
  html.js .cars--story .deck-dots { display: none; }
  html.js .cars--story {
    position: relative; overflow: clip; isolation: isolate;
    height: 100svh; padding: 0;
    background: linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
    color: #fff;
  }
  html.js .cars--story .wrap { max-width: none; padding: 0; height: 100%; position: relative; z-index: 1; }
  /* aerial car that drives up-and-away on each card change — a translucent
     ghost overlaid above the card (z-index 2, over the lifted .wrap) so it's
     actually visible sweeping up the screen, rather than hidden behind the
     white photo tile. pointer-events:none keeps it purely decorative. */
  html.js .cars-aerial {
    display: block;
    position: absolute; left: 50%; top: 50%; z-index: 2;
    width: min(72vw, 340px); transform: translate(-50%, -50%);
    opacity: 0; pointer-events: none; will-change: transform, opacity;
  }
  html.js .cars-aerial img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 34px rgb(0 0 0 / 0.5)); }
  html.js .cars-aerial.is-driving { animation: cars-drive-up 1s cubic-bezier(0.33, 0, 0.2, 1); }
  @keyframes cars-drive-up {
    0%   { opacity: 0; transform: translate(-50%, 62%) scale(1.35); }
    26%  { opacity: 0.5; }
    60%  { opacity: 0.42; }
    100% { opacity: 0; transform: translate(-50%, -172%) scale(0.32); }
  }
  html.js #cars-story-progress { display: flex; position: sticky; top: 0; z-index: 5; }
  /* The track still carries the .car-row class (the reduced-motion / no-JS
     fallback needs it for the cream peek-carousel), and .car-row flips to a
     horizontal flex deck under 1000px — which would fight this. So force the
     enhanced track back to the exact same VERTICAL nested scroll-snap as the
     hero and totem, giving one consistent magnetic flick down the whole page.
     (An earlier version leaned into that horizontal deck here, which broke the
     rhythm on mobile and felt janky.) */
  html.js #cars-story-track {
    display: block; height: 100svh; width: 100%; max-width: none;
    overflow-x: hidden; overflow-y: auto;
    scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0; padding: 0;
    mask-image: none; -webkit-mask-image: none;
  }
  html.js #cars-story-track::-webkit-scrollbar { display: none; }
  html.js .cars-beat.is-snapped { transform: translateZ(0); box-shadow: none; }
  html.js .cars-beat {
    height: 100svh; min-height: 100svh;
    scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: clamp(0.85rem, 2.4vw, 1.4rem); background: none; border: 0; box-shadow: none;
    padding-inline: clamp(1.5rem, 6vw, 4rem);
    padding-block: clamp(1.5rem, 6vw, 3rem);
    transform: translateZ(0);
  }
  /* the sticky site-header overlaps the top ~58px and the floating mobile
     CTA dock overlaps the bottom ~116px of every full-height section — so
     centring inside the raw 100svh box lands the content visibly high.
     Reserve that chrome as padding so justify-content:center balances the
     content in the band the user can actually see. */
  @media (max-width: 860px) {
    html.js .cars-beat {
      padding-top: calc(58px + clamp(0.5rem, 3vw, 1.4rem));
      padding-bottom: calc(112px + clamp(0.5rem, 3vw, 1.4rem));
    }
  }
  /* short phones (≈844px and under) don't have the height for the full-size
     photo + full copy + CTA between the header and the dock, so trim the
     photo and gaps a touch there. Taller phones keep the bigger, poppier
     car. The .cars--story ancestor is here purely to out-specify the
     base-size rules further down the enhanced block (source order alone
     wouldn't win). */
  @media (max-width: 860px) and (max-height: 880px) {
    html.js .cars--story .cars-beat { gap: 0.5rem; }
    html.js .cars--story .cars-beat .car-card-visual { margin-bottom: 0.2rem; }
    html.js .cars--story .cars-beat .car-card-visual img { width: min(62vw, 300px); }
    html.js .cars--story .cars-beat .car-card-body { gap: 0.4rem; }
  }
  /* the floating dock already carries a loud "See if I qualify" on mobile, so
     the in-card one would just be a second identical button stacked right
     above it — hide it on mobile and let the dock do the job; desktop (no
     dock) keeps the in-card CTA. */
  @media (max-width: 860px) {
    html.js .cars-beat .car-card-body .btn--primary { display: none; }
  }
  /* send-off flourish: a headlights-on car front that LUNGES at the viewer
     as the scroll bridges out of the cars section — emerging from a
     darkening veil, accelerating into the screen, headlights blooming, a
     white impact flash and a screen shake at the climax, then gone. Fixed +
     pointer-events:none so it's purely decorative and can never block the
     handoff scroll. Meant to make you flinch, then it clears instantly. */
  html.js .cars-bridge-fx {
    display: grid; place-items: center; overflow: hidden;
    position: fixed; inset: 0; z-index: 250; pointer-events: none;
  }
  html.js .cars-bridge-veil {
    position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(circle at 50% 52%, transparent 18%, rgb(3 6 12 / 0.82) 76%);
  }
  /* perspective speed lines radiating from the vanishing point — they rush
     outward toward you as the car lunges, the classic "hurtling at the
     camera" cue */
  html.js .cars-bridge-rays {
    position: absolute; inset: -25%; opacity: 0;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(198 222 255 / 0.16) 0 1.3deg, transparent 1.3deg 5deg);
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 12%, #000 42%, #000 70%, transparent 94%);
            mask: radial-gradient(circle at 50% 50%, transparent 12%, #000 42%, #000 70%, transparent 94%);
  }
  html.js .cars-bridge-flash { position: absolute; inset: 0; opacity: 0; background: #eaf3ff; }
  html.js .cars-bridge-car {
    width: min(74vw, 560px); height: auto; opacity: 0; transform: scale(0.09);
    filter: drop-shadow(0 24px 46px rgb(0 0 0 / 0.6));
  }
  html.js .cars-bridge-fx.is-zooming { animation: cars-rush-shake 0.82s ease-in-out; }
  html.js .cars-bridge-fx.is-zooming .cars-bridge-car { animation: cars-rush 0.82s cubic-bezier(0.52, 0, 0.9, 0.22); }
  html.js .cars-bridge-fx.is-zooming .cars-bridge-veil { animation: cars-rush-veil 0.82s ease; }
  html.js .cars-bridge-fx.is-zooming .cars-bridge-rays { animation: cars-rush-rays 0.82s cubic-bezier(0.52, 0, 0.9, 0.22); }
  html.js .cars-bridge-fx.is-zooming .cars-bridge-flash { animation: cars-rush-flash 0.82s ease; }
  @keyframes cars-rush {
    0%   { opacity: 0; transform: scale(0.08); }
    16%  { opacity: 1; }
    84%  { opacity: 1; }
    100% { opacity: 0; transform: scale(5.6); }
  }
  @keyframes cars-rush-rays {
    0%   { opacity: 0; transform: scale(0.35) rotate(0deg); }
    22%  { opacity: 0.85; }
    100% { opacity: 0; transform: scale(3.4) rotate(7deg); }
  }
  @keyframes cars-rush-veil {
    0%   { opacity: 0; }
    32%  { opacity: 1; }
    74%  { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes cars-rush-flash {
    0%, 70% { opacity: 0; }
    86% { opacity: 0.88; }
    100% { opacity: 0; }
  }
  @keyframes cars-rush-shake {
    0%, 54% { transform: translate(0, 0); }
    64% { transform: translate(-6px, 4px); }
    73% { transform: translate(7px, -5px); }
    82% { transform: translate(-8px, 4px); }
    91% { transform: translate(5px, -3px); }
    100% { transform: translate(0, 0); }
  }
  /* IMMERSIVE DRIVING SCENE (research-backed): the sharp car body is swapped
     for a cut-out whose WHEELS are motion-blurred so they read as spinning —
     the single strongest "it's moving" cue. Behind it a two-layer parallax
     world scrolls: a far hill silhouette drifting slowly and a near road with
     a bright dashed centre line ripping past fast (the ground moving at speed
     is what sells velocity). Plus horizontal speed lines, a suspension bob,
     and the car DRIVES IN from the right as each card settles. Cars face
     left, so the world scrolls right (being left behind). Only runs on the
     settled (.is-active) card. */
  html.js .cars-beat .car-card-visual {
    position: relative; align-self: center; margin-bottom: 0.3rem;
    background: none; padding: 0; border: 0; overflow: visible; opacity: 1;
  }
  /* swap the sharp fallback photo for the spinning-wheel cut-out */
  html.js .cars-beat .car-photo--still { display: none; }
  html.js .cars-beat .car-photo--drive { display: block; }
  html.js .cars-beat .car-photo {
    position: relative; z-index: 1;
    width: min(74vw, 360px); height: auto;
    filter: drop-shadow(0 15px 10px rgb(0 0 0 / 0.55));
  }
  /* the car drives in from the right (where it came from), then holds + bobs */
  html.js .cars-beat .car-photo--drive {
    opacity: 0; transform: translateX(58%) scale(1.02);
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.85, 0.3, 1);
  }
  html.js .cars-beat.is-active .car-photo--drive {
    opacity: 1; transform: none;
    animation: cars-drive-bob 0.9s ease-in-out 0.9s infinite;
  }
  @keyframes cars-drive-bob {
    0%, 100% { transform: translateY(0) rotate(-0.5deg); }
    50% { transform: translateY(-4px) rotate(0.5deg); }
  }
  /* horizontal speed lines behind the car (95px period → seamless loop) */
  html.js .cars-beat .car-card-visual::before {
    content: ""; position: absolute; z-index: 0; inset: 8% -44% 22% -44%;
    background-image:
      repeating-linear-gradient(90deg, rgb(184 214 255 / 0.5) 0 40px, transparent 40px 95px),
      repeating-linear-gradient(90deg, rgb(184 214 255 / 0.32) 0 26px, transparent 26px 95px),
      repeating-linear-gradient(90deg, rgb(184 214 255 / 0.42) 0 34px, transparent 34px 95px),
      repeating-linear-gradient(90deg, rgb(184 214 255 / 0.26) 0 22px, transparent 22px 95px),
      repeating-linear-gradient(90deg, rgb(184 214 255 / 0.36) 0 30px, transparent 30px 95px);
    background-size: 100% 2px, 100% 3px, 100% 2px, 100% 3px, 100% 2px;
    background-position: 0 16%, 0 33%, 0 50%, 0 67%, 0 84%;
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    opacity: 0;
  }
  /* soft ground shadow that stays put under the car */
  html.js .cars-beat .car-card-visual::after {
    content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; bottom: 4%; height: 9%;
    background: radial-gradient(ellipse at 50% 50%, rgb(0 0 0 / 0.55), transparent 70%);
    opacity: 0;
  }
  /* the parallax world — wide via -80% insets, masked to fade at the edges */
  html.js .cars-beat .drive-scene {
    position: absolute; z-index: 0; pointer-events: none;
    left: -80%; right: -80%; bottom: 1%; height: 58%; opacity: 0;
    /* the road surface: a darker ground band across the bottom the car sits on */
    background: linear-gradient(to top, rgb(6 14 28 / 0.62) 0 9%, rgb(16 30 54 / 0.32) 15%, transparent 24%);
    -webkit-mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
            mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  }
  html.js .cars-beat .drive-scene::before { /* far hills, 300px tiles → seamless */
    content: ""; position: absolute; left: 0; right: 0; bottom: 20%; height: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='140'%3E%3Cpath d='M0 140 L0 96 C40 52 78 96 130 66 C176 40 210 88 258 60 C282 46 296 74 300 68 L300 140 Z' fill='%231d3f6b'/%3E%3C/svg%3E") repeat-x bottom / 300px 100%;
    opacity: 0.62;
    -webkit-mask: linear-gradient(to top, #000 60%, transparent);
            mask: linear-gradient(to top, #000 60%, transparent);
  }
  html.js .cars-beat .drive-scene::after { /* near road: bright dashed centre line + a thin edge line */
    content: ""; position: absolute; left: 0; right: 0; bottom: 11%; height: 7px;
    background:
      repeating-linear-gradient(90deg, rgb(255 209 92 / 0.75) 0 48px, transparent 48px 104px) center/100% 5px no-repeat,
      linear-gradient(rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.14)) bottom/100% 2px no-repeat;
  }
  /* motion — all scrolling RIGHT, road fastest, hills slowest */
  html.js .cars-beat.is-active .car-card-visual::before { opacity: 1; animation: cars-streak 0.42s linear infinite; }
  html.js .cars-beat.is-active .car-card-visual::after { opacity: 1; }
  html.js .cars-beat.is-active .drive-scene { opacity: 1; }
  html.js .cars-beat.is-active .drive-scene::before { animation: drive-hills 3s linear infinite; }
  html.js .cars-beat.is-active .drive-scene::after { animation: drive-road 0.5s linear infinite; }
  @keyframes cars-streak { to { transform: translateX(95px); } }
  @keyframes drive-road { to { transform: translateX(104px); } }
  @keyframes drive-hills { to { transform: translateX(300px); } }
  html.js .cars-beat .car-card-visual .badge {
    position: absolute; z-index: 2; top: -2%; left: 4%;
    background: rgb(11 28 51 / 0.62); border: 1px solid rgb(255 255 255 / 0.28);
  }
  /* centring fix: the base .car-card-body is flex:1 with its .btn pinned by
     margin-top:auto (meant to hold the CTA at the foot of a fixed grid
     card). Inside this full-height flex column that made the body grow and
     shove the CTA to the very bottom, stranding the content up top. Pin the
     body to its content height and drop the auto margin so the beat's own
     justify-content:center can actually centre it in the visible band. */
  html.js .cars-beat .car-card-body { flex: 0 0 auto; padding: 0; gap: 0.5rem; max-width: 480px; }
  html.js .cars-beat .car-card-body .btn { margin-top: 0.5rem; }
  /* copy cascades up as the card settles */
  html.js .cars-beat .car-card-body > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
  html.js .cars-beat.is-active .car-card-body > * { opacity: 1; transform: none; }
  html.js .cars-beat.is-active .car-card-body > *:nth-child(1) { transition-delay: 0.08s; }
  html.js .cars-beat.is-active .car-card-body > *:nth-child(2) { transition-delay: 0.15s; }
  html.js .cars-beat.is-active .car-card-body > *:nth-child(3) { transition-delay: 0.22s; }
  html.js .cars-beat.is-active .car-card-body > *:nth-child(4) { transition-delay: 0.29s; }
  html.js .cars-beat.is-active .car-card-body > *:nth-child(5) { transition-delay: 0.36s; }
  html.js .cars-beat.is-active .car-card-body > *:nth-child(6) { transition-delay: 0.43s; }
  html.js .cars-beat.is-active .car-card-body > *:nth-child(7) { transition-delay: 0.50s; }
  html.js .cars-beat .car-card-body h3 {
    font-family: var(--font-display); font-weight: 800; line-height: 1.05;
    font-size: clamp(2rem, 5.2vw + 0.4rem, 3rem); color: #fff; margin: 0;
    letter-spacing: -0.01em;
  }
  html.js .cars-beat .cars-beat-kicker { color: var(--gold); letter-spacing: 0.09em; }
  html.js .cars-beat .cars-beat-or { color: #b9c5d8; }
  html.js .cars-beat .car-meta { color: #cbd6e8; font-size: 1.02rem; max-width: 38ch; margin: 0; }
  /* the price is the emotional hook — the one they can actually get — so
     it's the loudest thing in the card after the car's own name. */
  html.js .cars-beat .cars-price-block { gap: 0.1rem; margin-top: 0.15rem; }
  html.js .cars-beat .car-price { align-items: baseline; gap: 0.4rem; }
  html.js .cars-beat .car-price .amount {
    color: #fff; font-weight: 800; letter-spacing: -0.02em;
    font-size: clamp(2.6rem, 8vw + 0.4rem, 3.7rem);
  }
  html.js .cars-beat .car-price .from { color: #9fb0c8; font-size: 0.9rem; }
  html.js .cars-beat .car-price .per { color: #9fb0c8; font-size: 1rem; }
  html.js .cars-beat .cars-price-note { color: #cdd8ea; font-size: 1rem; }
  html.js .cars-beat .cars-price-note strong { color: var(--gold); font-weight: 800; }
  html.js .cars-beat .cars-included { color: #a7b3c8; font-size: 0.9rem; }
  html.js .cars-beat .cars-included strong { color: #fff; }
  html.js .cars-beat .car-include { border-bottom-color: rgb(255 255 255 / 0.1); }
  html.js .cars-beat .car-include-ic { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.14); }
  html.js .cars-beat .car-include-ic--gold { background: rgb(255 138 30 / 0.12); border-color: rgb(255 138 30 / 0.45); }
  html.js .cars-beat .car-include strong { color: #fff; }
  html.js .cars-beat .car-fineprint { color: #9fb0c8; }
  html.js .cars-beat-link { display: block; margin-top: 0.15rem; }
  html.js .cars-beat-link a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
    color: #fff; text-decoration: none; padding: 0.45rem 0.9rem;
    border: 1.5px solid rgb(255 255 255 / 0.3); border-radius: 999px;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  html.js .cars-beat-link a .arrow { display: inline-block; transition: transform 0.15s ease; }
  html.js .cars-beat-link a:hover, html.js .cars-beat-link a:focus-visible { color: var(--accent); border-color: var(--accent); }
  html.js .cars-beat-link a:hover .arrow, html.js .cars-beat-link a:focus-visible .arrow { transform: translateX(3px); }
  @media (min-width: 760px) {
    html.js .cars-beat {
      flex-direction: row; align-items: center; gap: clamp(2rem, 5vw, 4rem);
      justify-content: center;
    }
    html.js .cars-beat .car-card-visual { flex: 0 0 auto; margin-bottom: 0; }
    html.js .cars-beat .car-card-visual img { max-width: min(34vw, 420px); }
    html.js .cars-beat .car-card-body { flex: 0 1 auto; }
  }
}

/* ---------- Bin the Rejection: full-screen game landing ----------
   The cars section's "car coming at you" bridge snaps onto this. The
   .game-panel is the existing engine markup, untouched (game.js binds to it
   and the canvas resizes itself to whatever box we give it); here we only
   restyle the surrounding stage to fill the screen borderlessly for the
   first viewport, float the HUD, and add a "keep scrolling" button. The
   game's heading / how-to / CTA flow below as normal content. */
.binit-full { padding: 0; overflow: clip; }
/* the share-link margin (game.css) would offset the full-screen landing; the
   header hides while playing, so land flush to the top instead */
#binit.binit-full { scroll-margin-top: 0; }
.binit-stage {
  position: relative; min-height: 100svh;
  background: linear-gradient(180deg, var(--navy-soft), var(--navy-deep));
  display: flex; flex-direction: column; isolation: isolate;
}
/* strip the game panel's card chrome so the canvas is edge-to-edge, full height */
.binit-full .game-panel {
  max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
/* float the HUD over the top of the canvas instead of a bordered bar */
.binit-full .game-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  border-bottom: 0;
  background: linear-gradient(to bottom, rgb(7 20 38 / 0.6), rgb(7 20 38 / 0));
  padding-top: calc(0.85rem + env(safe-area-inset-top));
}
.binit-full .game-stage { flex: 1 1 auto; min-height: 0; position: relative; }
.binit-full .game-canvas {
  aspect-ratio: auto; position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* the game scene is self-evident (the "WHY NOT" bin, the DECLINED letter),
   and the heading below names it, so the overlay tag is hidden to keep the
   full-screen game uncluttered. Kept in the markup for future use. */
.binit-tag { display: none; }
.binit-continue {
  position: absolute; z-index: 5;
  right: 0.9rem; bottom: calc(5rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  color: #fff; background: rgb(11 28 51 / 0.74); cursor: pointer;
  border: 1.5px solid rgb(255 255 255 / 0.32); border-radius: 999px;
  padding: 0.55rem 1.05rem; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
@supports (backdrop-filter: blur(1px)) { .binit-continue { backdrop-filter: blur(6px); } }
.binit-continue:hover, .binit-continue:focus-visible { border-color: var(--accent); background: rgb(11 28 51 / 0.9); }
.binit-continue:active { transform: scale(0.96); }
.binit-continue-arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .binit-continue-arrow { animation: binit-bob 1.4s ease-in-out infinite; }
  @keyframes binit-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
}

/* ---------- Story homepage: recurring subtle qualify CTA ---------- */
.scrolly-qualify-cta { margin-top: 0.8rem; }
.scrolly-qualify-cta a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--navy); text-decoration: none;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid rgb(11 28 51 / 0.18); border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.scrolly-qualify-cta a .arrow { display: inline-block; transition: transform 0.15s ease; }
.scrolly-qualify-cta a:hover, .scrolly-qualify-cta a:focus-visible {
  color: var(--accent); border-color: var(--accent);
}
.scrolly-qualify-cta a:hover .arrow, .scrolly-qualify-cta a:focus-visible .arrow { transform: translateX(3px); }
.section--cream .scrolly-qualify-cta a { border-color: rgb(11 28 51 / 0.22); }

/* ---------- Hero: multi-beat scrollytelling narrative ----------
   Base rules below are the whole accessible fallback: no JS, or
   prefers-reduced-motion, and every beat is just a readable block
   stacked in document order, in a dark navy band (same "dark section"
   pattern as .section--dark elsewhere on the site). The gated block
   further down (prefers-reduced-motion:no-preference + html.js) is
   what turns the track into a real native-CSS scroll-snap sequence —
   each beat is its own full-height panel that clicks into place as
   you scroll, the browser doing the "magnetic" work directly rather
   than JS easing toward it after the fact. */
.hero--story {
  position: relative; overflow: clip; isolation: isolate;
  background: linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
  color: #fff;
}
.hero--story::before {
  top: -14%; right: -10%; width: min(60vw, 640px); height: min(60vw, 640px);
  background: radial-gradient(closest-side, rgb(255 138 30 / 0.22), transparent 72%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(30px);
}
.hero--story::after {
  bottom: -18%; left: -14%; width: min(50vw, 560px); height: min(50vw, 560px);
  background: radial-gradient(closest-side, rgb(90 140 220 / 0.24), transparent 70%);
  border-radius: 58% 42% 37% 63% / 55% 60% 40% 45%; filter: blur(30px);
}
.hero-story-photo { display: none; }
/* faint steering-wheel motif behind the journey cards, echoing the What's
   Included backdrop. It sits above the section wash but below the (transparent)
   beats, so it reads softly through Cards 2 and 3; Card 1's game canvas covers
   it. Motion-gated and JS-gated like the rest of the story chrome. */
.hero-story-wheel { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero--story .hero-story-wheel {
    display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  }
  html.js .hero-story-wheel img {
    position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
    width: min(126vw, 720px); height: auto; opacity: 0.06;
  }
}
@media (min-width: 960px) {
  .hero-story-photo {
    display: block; position: absolute; z-index: 0;
    right: 4%; top: 50%; transform: translateY(-50%);
    width: min(30vw, 420px);
  }
  .hero-story-photo img {
    display: block; width: 100%; height: auto; border-radius: var(--radius-lg);
    filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.45));
  }
  .hero-story-progress, .hero-story-track { position: relative; z-index: 1; }
}
.hero-story-progress { display: none; gap: 6px; padding: 0.9rem 1.1rem 0; }
.hero-story-seg { flex: 1; height: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.14); overflow: hidden; }
.hero-story-seg i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--accent)); border-radius: 999px; transition: width 0.35s ease; }
.hero-story-seg.is-done i, .hero-story-seg.is-current i { width: 100%; }
/* wrapped progress (hero + totem): a sticky header carrying the label/count
   above the segmented bar. The wrap owns the sticky so the head sticks with
   the bar; the inner segment strip then sits static inside it. */
.hero-story-progress-wrap { display: none; }
.hero-story-progress-wrap .hero-story-progress { padding: 0 1.1rem 0.85rem; }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-story-progress-wrap {
    display: block; position: sticky; top: 0; z-index: 5;
    background: linear-gradient(to bottom, rgb(11 28 51 / 0.92) 55%, rgb(11 28 51 / 0));
    transition: transform 0.35s ease;
  }
  html.js .hero-story-progress-wrap .hero-story-progress { display: flex; position: static; }
  /* the step strip rides with the menu: scrolling down clears both away so no
     navy band is left where the menu was, and scrolling up brings both back. */
  body.nav-hidden:not(.nav-open) .hero-story-progress-wrap { transform: translateY(-110%); }
  /* the hero's own strip is a true overlay (see the fixed header above): out of
     flow so the drive and the story cards run full bleed underneath it. Its top
     padding tucks its gradient behind the fixed menu so the pair read as one
     piece of chrome whenever they're on screen together. */
  html.js .hero--story .hero-story-progress-wrap {
    position: absolute; top: 0; left: 0; right: 0;
    padding-top: var(--header-h, 71px);
  }
}
.hero-story-track { position: relative; }
.hero-beat {
  position: relative; overflow: hidden;
  display: grid; align-content: center; justify-items: start; gap: 0.7rem;
  max-width: 560px; margin: 0 auto;
  padding: clamp(2.6rem, 9vw, 3.6rem) 1.5rem;
}
.hero-beat > * { position: relative; z-index: 1; }
.hero-beat-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 55% at 72% 22%, rgb(120 160 230 / 0.22), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 60% 32%, #000, transparent 82%);
  mask-image: radial-gradient(ellipse 90% 65% at 60% 32%, #000, transparent 82%);
}
.hero-beat-bg--warm {
  background-image:
    radial-gradient(ellipse 80% 55% at 26% 78%, rgb(255 214 150 / 0.16), transparent 70%),
    radial-gradient(ellipse 70% 45% at 78% 18%, rgb(120 160 230 / 0.16), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}
.hero-beat-bg--brand {
  background-image:
    radial-gradient(closest-side at 50% 42%, rgb(255 255 255 / 0.18), transparent 68%),
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.hero-beat-kicker {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); margin: 0;
}
.hero-beat-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 4.6vw + 0.4rem, 2.6rem);
  line-height: 1.14; letter-spacing: -0.01em; margin: 0; color: #fff;
}
.hero-beat-text .ln { display: block; }
.hero-beat-text--brand { font-size: clamp(1.9rem, 5.4vw + 0.4rem, 3.1rem); }
.hero-beat-text--body {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 3.4vw + 0.4rem, 2rem);
}
/* Default beat paragraph. The :not() chain is load bearing: every argument
   contributes its own specificity, so this selector scores (0,7,0) and used to
   beat every .hero-beat--personas .hero-orgs-note style rule no matter what
   order they were written in. That silently forced 1.02rem and a 34ch cap onto
   the personas lede, the trust label and the no affiliation note, which is why
   those three sat off centre and wrapped early. Anything with its own size and
   width is excluded here rather than fought with !important. */
.hero-beat p:not(.hero-beat-text):not(.hero-beat-kicker):not(.s1-support):not(.hero-persona-secondary):not(.hero-persona-lede):not(.hero-orgs-label):not(.hero-orgs-note) {
  font-size: 1.02rem; color: #cfd8e8; margin: 0; max-width: 34ch;
}
.hero-beat p.s1-support { margin: 0; }
.hero-stamp { display: grid; gap: 0.35rem; font-family: var(--font-display); font-weight: 700; }
.hero-stamp-old { color: #7f90a8; text-decoration: line-through; font-size: 1rem; }
.hero-stamp-new { display: flex; align-items: center; gap: 0.4rem; color: var(--green); font-size: 1.25rem; }
.hero-stamp-new .tick { color: var(--green); }
.hero-coin {
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff; color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.28);
}
.hero-beat-payoff { display: flex; align-items: center; gap: 0.9rem; }
.hero-key-icon { width: 52px; height: 52px; filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.35)); }
.hero-beat--brand { justify-items: center; text-align: center; }
.hero-wordmark--beat { margin: 0.2rem 0; line-height: 1; }
.hero-wordmark--beat .wn-mark--hero { font-size: clamp(3.2rem, 15vw, 6.4rem); }
.hero-beat-hint {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: #b9c5d8; letter-spacing: 0.01em;
}
.hero-scroll-cue {
  margin-top: 1rem; display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #8fa0b8;
}
.hero-scroll-cue-arrow { display: inline-block; }
/* the cue is a real button now (tapping it advances the story), so strip the
   button chrome back to exactly what the paragraph rendered. line-height and
   text-align inherit so the pill keeps the same height and alignment it had. */
button.hero-scroll-cue {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0;
  line-height: inherit; text-align: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Back when the cue was a paragraph it was picking up its size and colour from
   the catch-all rule further up for paragraphs inside a beat, not from the
   .hero-scroll-cue base. A button does not match that selector, so without this
   the pill quietly shrinks from 1.02rem to the 0.75rem base and shifts colour.
   Restating the three values it actually inherited keeps the rendered pill
   pixel for pixel the one that already shipped. */
.hero-beat button.hero-scroll-cue {
  font-size: 1.02rem; color: #cfd8e8; max-width: 34ch;
}
.hero--story .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 0.3rem; }
.hero--story .hero-reassure {
  margin-top: 0; font-size: var(--fs-small); color: #b9c5d8;
  display: flex; align-items: center; gap: 0.45rem;
}

/* beat 6 (index 5) — the bridge into "what's included": one snapped beat
   so the magnetic scroll runs straight through instead of dropping into a
   plain scroll. */
.hero-beat-lede { max-width: 42ch; }
.hero-beat-statement {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 2.2vw + 0.5rem, 1.3rem);
  color: #fff; margin: 0.1rem 0 0;
}
.hero-beat-statement::before { content: "✓"; color: var(--green); font-size: 0.85em; }
@media (min-width: 640px) {
  .hero-beat--bridge { max-width: 680px; }
}

/* ============================================================
   New hero content — Screen 1 / 2 / 3 rebuild.
   Lives on the navy hero (the one dark exception). Gold is used
   only for small decorative highlights (step numbers, kicker),
   green for the affordance ticks, amber (--accent) stays reserved
   for the one conversion button. All new blocks reuse the beat's
   grid so they inherit the reveal choreography below.
   ============================================================ */

/* Screen 1 — the brand mark up top. */
.hero-wordmark--s1 { margin: 0; }
.hero-wordmark--s1 .wn-mark--hero { font-size: clamp(2.9rem, 14vw, 4.8rem); }

/* Screen 1 headline — the main one-liner, in the logo's own Modak but white,
   big and prominent over the road. */
.hero--story h1.hero-headline {
  font-family: "Modak", var(--font-display); font-weight: 400;
  font-size: clamp(2.15rem, 10.4vw, 3.7rem); line-height: 0.96; letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 0 rgb(7 20 38 / 0.4), 0 12px 26px rgb(0 0 0 / 0.5);
}
/* the Why Not logo as the punchline of the sentence, jiggling (wn-soft-jiggle)
   and grab-to-stretch (wn-mark--interactive). The headline's white text-shadow
   is inherited text, so it must be cleared off the logo line or it washes the
   wordmark's amber into a muddy brown — the mark keeps its own built-in depth. */
.hero-headline-mark { display: block; margin-top: 0.12em; line-height: 0.82; text-shadow: none; }
.hero-headline .hero-headline-mark .wn-mark--hero { font-size: 1.74em; }

/* Screen 1 — four bold icon tiles (the "dot points"), a 2x2 grid. Solid-ish
   navy so they stay crisp and prominent over the moving road. */
.hero-dots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  width: 100%; max-width: 520px;
}
.hero-dot {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 0.85rem;
  background: rgb(9 20 38 / 0.62);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 15px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.3);
}
.hero-dot img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.hero-dot span {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(0.92rem, 1.1vw + 0.6rem, 1.1rem);
  line-height: 1.12; color: #fff;
}

/* Screen 2 — four "who it is for" category tiles: a 2x2 grid with the icon
   centred over a bold label. */
.hero-personas {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
  width: 100%; max-width: 500px;
}
.hero-persona {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.5rem; padding: 1.05rem 0.7rem;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 16px;
}
.hero-persona img { width: 56px; height: 56px; object-fit: contain; }
.hero-persona strong {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(0.95rem, 1.4vw + 0.55rem, 1.1rem);
  color: #fff; line-height: 1.15;
}
/* Screen 2 eligibility copy around the tiles. The tiles tighten to make room
   for the lead-in, the ABN clarity line, the qualification note and the
   reassurance without the card overflowing a phone screen. */
.hero-persona-secondary {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(0.88rem, 1vw + 0.5rem, 1.02rem); color: var(--gold);
}
.hero-persona-lede {
  margin: 0; max-width: 34ch;
  font-size: clamp(0.96rem, 1vw + 0.6rem, 1.1rem); line-height: 1.3; color: #dbe3f1;
}
.hero-qualify-note {
  margin: 0; max-width: 40ch;
  font-size: clamp(0.85rem, 0.7vw + 0.55rem, 0.96rem); line-height: 1.3; color: #aeb9cd;
}
.hero-reassure-line {
  margin: 0; display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.85rem, 0.7vw + 0.55rem, 0.96rem); color: #d8e0ee;
}
.hero-reassure-line .tick { color: var(--green); font-weight: 800; }
.hero-beat--personas .hero-personas { margin: 0.1rem 0 0; gap: 0.55rem; }
.hero-beat--personas .hero-persona { padding: 0.8rem 0.55rem; gap: 0.4rem; }
.hero-beat--personas .hero-persona img { width: 46px; height: 46px; }

/* Detailed audience groups: icon beside a title + a short who-it-is-for note.
   Row layout, left-aligned, so the description reads as a paragraph rather than
   being crammed under a centred label. Icons pin to the top of the copy. */
.hero-personas--detailed { grid-template-columns: 1fr; max-width: 560px; gap: 0.5rem; }
.hero-personas--detailed .hero-persona {
  flex-direction: row; align-items: flex-start; text-align: left;
  gap: 0.7rem; padding: 0.7rem 0.85rem;
}
.hero-personas--detailed .hero-persona img { flex: none; margin-top: 0.1rem; }
.hero-persona-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.hero-personas--detailed .hero-persona strong { line-height: 1.12; }
.hero-persona-desc {
  font-size: clamp(0.78rem, 0.7vw + 0.5rem, 0.9rem); line-height: 1.26; color: #c3ccdb;
}

/* Screen 3 — the three-step flow: big word, illustrative icon, plain tag. */
.hero-flow {
  list-style: none; margin: 0.3rem 0 0; padding: 0;
  display: grid; gap: 0.2rem; width: 100%; max-width: 520px;
}
.hero-flow-row {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 1rem; padding: 0.9rem 0.2rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
.hero-flow-row:last-child { border-bottom: 0; }
.hero-flow-row img { flex: none; width: 52px; height: 52px; object-fit: contain; }
.hero-flow-text { display: block; min-width: 0; }
.hero-flow-text strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.1rem); color: #fff; line-height: 1.08;
}
.hero-flow-text span {
  font-size: clamp(0.85rem, 1vw + 0.5rem, 0.98rem); color: #c3cee0;
}

/* Screen 3 CTA column — stack the amber button over a small gold link (never
   amber for the secondary link). */
.hero-beat--flow .hero-ctas { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.hero-flow-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.92rem; color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgb(230 178 80 / 0.4); padding-bottom: 0.1rem;
}
.hero-flow-link .arrow { transition: transform 0.2s ease; }
.hero-flow-link:hover .arrow, .hero-flow-link:focus-visible .arrow { transform: translateX(3px); }
/* Screen 3 now leads with the tagline headline, so the step labels step down a
   size and the rows tighten, and the written-terms panel sits under the steps. */
.hero-flow-head { font-size: clamp(1.5rem, 4.2vw + 0.4rem, 2.3rem); margin: 0; }
.hero-flow-note {
  margin: 0; max-width: 42ch;
  font-size: clamp(0.85rem, 0.7vw + 0.55rem, 0.96rem); line-height: 1.3; color: #b6c1d4;
}
.hero-beat--flow .hero-flow { margin-top: 0.1rem; }
.hero-beat--flow .hero-flow-row { padding: 0.58rem 0.2rem; gap: 0.85rem; }
.hero-beat--flow .hero-flow-row img { width: 44px; height: 44px; }
.hero-beat--flow .hero-flow-text strong { font-size: clamp(1.15rem, 3vw + 0.3rem, 1.5rem); }
.hero-beat--flow .hero-flow-text span { font-size: clamp(0.82rem, 0.9vw + 0.48rem, 0.95rem); line-height: 1.25; }

/* ============================================================
   Polished card design system — shared by the hero journey beats,
   the What's Included beats and the car cards. A progress head,
   circular icon holders, bordered feature panels, stacked feature
   rows, small feature columns and numbered step cards. All sit on
   the navy story surfaces; gold and amber keep their existing roles.
   ============================================================ */
/* progress head above the segmented bar (Step X of 3 / 0X of 05) */
.story-prog-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; padding: 0.85rem 1.1rem 0.15rem;
}
.story-prog-label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); margin: 0;
}
.story-prog-count {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.03em; color: #9db0c9; white-space: nowrap;
  border: 1px solid rgb(255 255 255 / 0.16); border-radius: 999px; padding: 0.22rem 0.72rem;
}
.story-prog-count b { color: var(--gold); font-weight: 800; }

/* circular icon holder */
.icon-circle {
  display: grid; place-items: center; border-radius: 50%; flex: none;
  background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.14);
}
.icon-circle img { width: 58%; height: 58%; object-fit: contain; }
.icon-circle--gold { border-color: rgb(255 176 60 / 0.5); background: rgb(255 176 60 / 0.08); }

/* bordered feature panel: icon + title + subtext, optional divider */
.feature-panel {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  padding: 1rem 1.15rem;
  background: rgb(255 255 255 / 0.035); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 18px;
}
.feature-panel > .icon-circle { width: 64px; height: 64px; }
.feature-panel--divided .feature-panel-text { border-left: 1px solid rgb(255 255 255 / 0.12); padding-left: 1rem; }
.feature-panel-text { min-width: 0; }
.feature-panel-text strong { display: block; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.06rem; line-height: 1.2; }
.feature-panel-text span { display: block; color: #aeb9cd; font-size: 0.95rem; line-height: 1.3; margin-top: 0.15rem; }

/* stacked feature rows with hairline dividers */
.feature-rows { display: grid; width: 100%; }
.feature-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.feature-row:first-child { padding-top: 0; }
.feature-row:last-child { border-bottom: 0; padding-bottom: 0; }
.feature-row > .icon-circle { width: 52px; height: 52px; }
.feature-row-text strong { display: block; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1rem; line-height: 1.15; }
.feature-row-text span { display: block; color: #aeb9cd; font-size: 0.92rem; line-height: 1.3; margin-top: 0.1rem; }

/* three small feature columns */
.feature-cols { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.feature-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; padding: 0 0.35rem; position: relative; }
.feature-col + .feature-col::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; border-left: 1px solid rgb(255 255 255 / 0.1); }
.feature-col > .icon-circle { width: 52px; height: 52px; }
.feature-col strong { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 0.9rem; line-height: 1.2; }

/* numbered step card */
.step-cards { display: grid; gap: 0.65rem; width: 100%; }
.step-card {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.85rem;
  padding: 0.8rem 0.95rem; background: rgb(255 255 255 / 0.035);
  border: 1px solid rgb(255 255 255 / 0.1); border-radius: 18px;
}
.step-card-icon { width: 56px; height: 56px; border-radius: 14px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); display: grid; place-items: center; flex: none; }
.step-card-icon img { width: 60%; height: 60%; object-fit: contain; }
.step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--navy); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; display: grid; place-items: center; }
.step-card-text strong { display: block; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.14rem; line-height: 1.1; }
.step-card-text span { display: block; color: #b6c1d4; font-size: 0.9rem; line-height: 1.28; margin-top: 0.15rem; }

/* "Take your pick of the cars" — a selectable row of the real fleet on the
   flow beat, echoing step one (Choose it / pick your work car). Radio + label
   so the pick needs no JS and stays keyboard accessible; gold ring marks the
   chosen car (gold is decorative, amber stays reserved for the CTA). */
.hero-car-pick { border: 0; margin: 0; padding: 0; min-width: 0; width: 100%; }
.hero-car-pick-label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold);
  padding: 0; margin: 0 0 0.5rem;
}
.hero-car-pick-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.car-pick { position: relative; cursor: pointer; display: block; text-decoration: none; color: inherit; }
.car-pick-inner {
  display: grid; justify-items: center; text-align: center; gap: 0.12rem;
  padding: 0.6rem 0.4rem 0.7rem; height: 100%;
  background: rgb(255 255 255 / 0.035); border: 1.5px solid rgb(255 255 255 / 0.1);
  border-radius: 16px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.car-pick-photo { width: 100%; display: grid; place-items: center; margin-bottom: 0.1rem; }
.car-pick-photo img { width: 94%; max-width: 116px; height: auto; object-fit: contain; filter: drop-shadow(0 6px 11px rgb(0 0 0 / 0.4)); }
.car-pick-name { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 0.9rem; line-height: 1.05; }
.car-pick-meta { color: #9fb0c6; font-size: 0.72rem; line-height: 1.1; }
.car-pick-price { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 0.86rem; margin-top: 0.05rem; }
.car-pick-per { color: #9fb0c6; font-weight: 600; font-size: 0.72rem; }
.car-pick-view {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  color: var(--gold); margin-top: 0.2rem;
}
.car-pick:focus-visible .car-pick-inner { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) { .car-pick:hover .car-pick-inner { border-color: var(--gold); background: rgb(255 176 84 / 0.1); transform: translateY(-2px); } }

/* Use more of the beat height: distribute the hero story content evenly down
   the viewport so it fills a tall screen instead of clustering in the centre.
   The absolutely-positioned .hero-beat-bg is out of flow, so only the real
   content participates. */
.hero--story .hero-beat { align-content: center; gap: clamp(0.9rem, 2.4vh, 1.6rem); }
/* The fixed qualify bar sits ~80px tall over the foot of the viewport on mobile,
   so reserve that space at the bottom of every hero story beat and tighten the
   text-heavy beats a touch so their last line lifts clear of the bar rather
   than tucking under it. Desktop has no bar, so none of this applies there. */
@media (max-width: 860px) {
  .hero--story .hero-beat { padding-bottom: clamp(7.4rem, 15vh, 8rem); }
  /* both story cards read from the top down: content starts below the chrome
     strip (menu + step bar overlay, reserved via --chrome-h) with a small
     cushion, rather than floating centred in the space. */
  .hero--story .hero-beat--personas,
  .hero--story .hero-beat--flow { gap: clamp(0.6rem, 1.9vh, 1.15rem); align-content: start; padding-top: calc(var(--chrome-h, 126px) + clamp(0.5rem, 1.4vh, 1rem)); }
  /* the flow beat is the main event: pull its top in and give the space to the
     step boxes and the car picks below, still clearing the thumb bar */
  .hero--story .hero-beat--flow { padding-top: calc(var(--chrome-h, 126px) + clamp(0.5rem, 1.5vh, 1.1rem)); gap: clamp(0.55rem, 1.7vh, 1.1rem); padding-bottom: clamp(6.5rem, 12.5vh, 7rem); }
  /* the flow beat is the tallest, so slim its chrome a touch so the (now
     larger) type still top-aligns a little lower and clears the thumb bar */
  .hero-beat--flow .step-card { padding: 0.46rem 0.72rem; }
  .hero-beat--flow .car-pick-inner { padding: 0.34rem 0.28rem 0.42rem; }
  .hero-beat--flow .car-pick-photo img { max-width: 74px; }
  .hero-beat--flow .feature-panel { padding: 0.6rem 0.85rem; }
  .hero-beat--personas .hero-beat-text--brand { font-size: clamp(1.8rem, 5.4vw + 0.2rem, 2.5rem); }
  .hero-beat--personas .hero-personas { gap: 0.6rem; }
  .hero-beat--personas .hero-persona { padding: 0.7rem 0.5rem; gap: 0.32rem; }
  .hero-beat--personas .hero-persona img { width: 44px; height: 44px; }
  .hero-qualify-panel { padding: 0.8rem 0.95rem; gap: 0.8rem; }
  .hero-qualify-panel > .icon-circle { width: 50px; height: 50px; }
  .hero-beat--flow .hero-flow-head { font-size: clamp(1.75rem, 5.6vw + 0.2rem, 2.3rem); }
  .hero-beat--flow .step-card { padding: clamp(0.85rem, 2.2vh, 1.15rem) 1rem; gap: 0.9rem; }
  .hero-beat--flow .step-card-icon { width: 52px; height: 52px; }
  .hero-beat--flow .step-card .step-num { width: 36px; height: 36px; font-size: 1.1rem; }
  .hero-beat--flow .step-card-text strong { font-size: 1.38rem; }
  .hero-beat--flow .step-card-text span { font-size: 1.05rem; line-height: 1.26; }
  .hero-beat--flow .hero-beat-kicker { font-size: 0.92rem; }
  .hero-beat--personas .hero-beat-kicker, .hero-beat--personas .hero-persona-secondary { font-size: 1rem; }
  .hero-beat--personas .hero-persona-lede { font-size: 1.05rem; }
  .hero-beat--personas .hero-persona strong { font-size: 1.02rem; }
  /* Detailed audience groups on mobile: one column, icon beside a title and a
     short note. The four notes now do the job the lede did, so the lede is
     dropped here to keep the whole block on one screen above the thumb bar. */
  .hero-beat--personas .hero-persona-lede { display: none; }
  /* glanceable: one bold title, one short list line, big icon. */
  .hero-beat--personas .hero-personas--detailed { gap: clamp(0.45rem, 1.3vh, 0.7rem); max-width: 480px; }
  .hero-beat--personas .hero-personas--detailed .hero-persona { padding: clamp(0.66rem, 1.7vh, 0.9rem) 0.95rem; gap: 0.85rem; align-items: center; }
  .hero-beat--personas .hero-personas--detailed .hero-persona img { width: 48px; height: 48px; }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong { font-size: 1.1rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc { font-size: 0.9rem; line-height: 1.24; color: #cfd9e8; }
  /* the four notes now carry the eligibility detail, and the sticky thumb bar
     already offers "See if I qualify", so the qualify panel is dropped on the
     phone to keep this a clean one-screen "who it is for" beat. */
  .hero-beat--personas .hero-qualify-panel { display: none; }
  /* with the lede and panel gone, keep a small cushion below the chrome strip
     and let the beat read top-down above the thumb bar. */
  .hero--story .hero-beat--personas { padding-top: calc(var(--chrome-h, 126px) + clamp(0.5rem, 1.4vh, 1rem)); padding-bottom: clamp(6.6rem, 12vh, 7rem); }
  .hero-beat--personas .hero-persona-secondary { font-size: 0.9rem; line-height: 1.2; }
  /* the selectable cars are front and centre: the actual stock you can pick,
     so give them real presence while the beat still clears the thumb bar */
  /* the cars are the product: big photos, clear names and prices. The whole
     tile is the tap target, so the "view this car" line goes and its room is
     spent on the metal. */
  .hero-beat--flow .hero-car-pick { margin-top: clamp(0.2rem, 0.8vh, 0.55rem); }
  .hero-beat--flow .hero-car-pick-row { gap: clamp(0.55rem, 1.6vh, 0.8rem); }
  .hero-beat--flow .car-pick-inner { padding: 0.55rem 0.45rem 0.7rem; border-radius: 18px; gap: 0.1rem; }
  .hero-beat--flow .car-pick-photo { margin-bottom: 0.08rem; }
  .hero-beat--flow .car-pick-photo img { width: 100%; max-width: 176px; }
  .hero-beat--flow .car-pick-name { font-size: 1.16rem; }
  .hero-beat--flow .car-pick-meta { font-size: 0.85rem; }
  .hero-beat--flow .car-pick-price { font-size: 1.08rem; }
  .hero-beat--flow .car-pick-per { font-size: 0.8rem; }
  .hero-beat--flow .car-pick-view { display: none; }
}

/* ============================================================
   Screen 1 first-person drive to work. A full-screen pseudo-3D road
   fills the beat behind the content: a plane laid back with rotateX so
   lane markings recede to a horizon and, animated, stream up toward you
   (near=big/fast, far=small/slow foreshortening is what sells forward
   motion, the classic Lou pseudo-3D approach). The Brisbane skyline sits
   on the horizon, tinted into the grid for depth. A Modak one-liner and
   prominent value tiles sit over it. A DECLINED letter slaps onto the
   windshield; swipe it off. All decorative and aria-hidden; base rules
   stay a calm static picture for no-JS / reduced motion. */
.hero--story .hero-beat--s1 {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 0.5rem; overflow: hidden;
}
/* cluster the promise at the top and the value at the bottom, leaving the
   open road-middle for the DECLINED letter to slap onto. */
.s1-top, .s1-bottom {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
}
.s1-top { gap: clamp(0.2rem, 1vh, 0.6rem); padding-top: clamp(0.4rem, 2.5vh, 1.4rem); }
.s1-bottom { gap: clamp(0.6rem, 1.5vh, 0.95rem); padding-bottom: clamp(0.3rem, 1.5vh, 0.8rem); }
/* the game-beat headline is deliberately tall, so on phones (where the fixed
   qualify bar owns the foot of the screen) pin the outcome + continue cue at a
   fixed height above that bar instead of letting flex crowd them underneath. */
@media (max-width: 860px) {
  /* the dock stays hidden while this card is on screen, so the cue can sit
     right down at the foot of the drive */
  .hero-beat--s1 .s1-bottom {
    position: absolute; left: 1.5rem; right: 1.5rem; width: auto;
    bottom: clamp(2.4rem, 6vh, 4rem); z-index: 2;
  }
  /* lift the promise and the green exit sign up so they clear the horizon and
     the road ahead reads through the middle of the drive. The whole stack rides
     higher, the support line wraps to two lines instead of three, and the sign
     is a touch more compact, so its bottom edge sits above the vanishing point
     where the road disappears. */
  .hero--story .hero-beat--s1 { padding-top: clamp(1.4rem, 3.4vh, 2.2rem); }
  .hero-beat--s1 .s1-top { padding-top: 0; gap: clamp(0.28rem, 1vh, 0.55rem); }
  .hero-beat--s1 .hero-headline { font-size: clamp(2.05rem, 9.9vw, 2.9rem); }
  .hero-beat--s1 .s1-support { font-size: clamp(1rem, 3.8vw, 1.16rem); line-height: 1.22; max-width: 26ch; }
  .hero-beat--s1 .s1-exit { margin-top: 0.28rem; padding: 0.46rem 0.9rem 0.5rem; }
  .hero-beat--s1 .s1-exit-main { font-size: 0.96rem; }
  .hero-beat--s1 .s1-exit-kicker { font-size: 0.58rem; }
}

.drive-pov {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  perspective: 300px; perspective-origin: 50% 44%;
  background:
    radial-gradient(circle at 18% 35%, rgb(255 229 163 / 0.32), transparent 10%),
    radial-gradient(ellipse 68% 18% at 50% 39%, rgb(255 165 104 / 0.18), transparent 72%),
    linear-gradient(to bottom,
      #315f99 0%,
      #708faa 19%,
      #bd9c9e 31%,
      #efaa76 38%,
      #75677d 46%,
      #314158 58%,
      #071321 100%);
  transition: opacity 0.45s ease;
}
.drive-atmosphere {
  position: absolute; inset: 0; pointer-events: none;
  will-change: opacity;
}
.drive-atmosphere--sunset {
  z-index: 0; opacity: var(--drive-sunset, 0);
  background:
    radial-gradient(ellipse 46% 28% at 22% 43%, rgb(255 185 99 / 0.55), transparent 70%),
    linear-gradient(to bottom, #444577 0%, #805d7a 29%, #ee775d 48%, #57465f 70%, #08172a 100%);
}
.drive-atmosphere--night {
  z-index: 0; opacity: var(--drive-night, 0);
  background:
    radial-gradient(circle at 14% 16%, rgb(224 238 255 / 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 37% 9%, rgb(224 238 255 / 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 20%, rgb(224 238 255 / 0.64) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 11%, rgb(224 238 255 / 0.52) 0 1px, transparent 2px),
    linear-gradient(to bottom, #081733 0%, #252a51 33%, #684366 51%, #17253c 72%, #06111f 100%);
}
.drive-sun {
  position: absolute; z-index: 1; left: 20%; top: var(--drive-sun-y, 31%);
  width: clamp(34px, 5vw, 72px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: var(--drive-sun-opacity, 1);
  background: radial-gradient(circle at 38% 34%, #fffbe0 0 10%, #ffd272 38%, #f8784e 72%, transparent 74%);
  box-shadow:
    0 0 clamp(28px, 8vw, 120px) rgb(255 153 79 / 0.58),
    0 0 clamp(70px, 18vw, 260px) rgb(244 116 80 / 0.28);
  will-change: top, opacity;
}
.drive-cloud-bank {
  position: absolute; z-index: 1; left: -28%; width: 156%; height: 21%;
  opacity: 0.23; filter: blur(6px) saturate(0.82);
  background:
    radial-gradient(ellipse at 8% 62%, rgb(235 222 220 / 0.58) 0 8%, rgb(112 107 132 / 0.22) 18%, transparent 31%),
    radial-gradient(ellipse at 24% 43%, rgb(242 220 214 / 0.5) 0 9%, rgb(101 98 127 / 0.2) 19%, transparent 33%),
    radial-gradient(ellipse at 43% 66%, rgb(226 200 205 / 0.46) 0 7%, rgb(79 81 113 / 0.19) 18%, transparent 30%),
    radial-gradient(ellipse at 65% 42%, rgb(235 204 201 / 0.46) 0 10%, rgb(91 86 119 / 0.18) 21%, transparent 35%),
    radial-gradient(ellipse at 84% 64%, rgb(225 205 212 / 0.45) 0 8%, rgb(77 82 116 / 0.18) 18%, transparent 31%),
    radial-gradient(ellipse at 99% 45%, rgb(235 215 215 / 0.42) 0 8%, rgb(86 88 120 / 0.16) 20%, transparent 34%);
  will-change: transform;
}
.drive-cloud-bank--far { top: 13%; animation: drive-cloud-drift-far 58s linear infinite; }
.drive-cloud-bank--near {
  top: 22%; height: 27%; opacity: 0.19; filter: blur(9px) saturate(0.76);
  transform: scale(1.14); animation: drive-cloud-drift-near 38s linear infinite reverse;
}
.drive-pov::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(2 8 20 / 0.16), transparent 24% 69%, rgb(2 8 18 / 0.5)),
    radial-gradient(ellipse 72% 44% at 50% 42%, rgb(255 170 95 / 0.16), transparent 72%);
}
.pov-skyline {
  position: absolute; z-index: 1; left: 50%; top: 32%; width: min(78%, 840px); height: 18%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) scale(var(--drive-city-scale, 0.7));
  background:
    linear-gradient(90deg, transparent 0 4%, #27435d 4% 10%, transparent 10% 12%, #35536c 12% 18%, transparent 18% 20%, #1e3b56 20% 27%, transparent 27% 29%, #3c5870 29% 35%, transparent 35% 37%, #203c58 37% 45%, transparent 45% 47%, #314e69 47% 55%, transparent 55% 57%, #1e3854 57% 64%, transparent 64% 67%, #35526c 67% 74%, transparent 74% 77%, #24415d 77% 84%, transparent 84% 87%, #34516b 87% 93%, transparent 93%);
  clip-path: polygon(0 100%, 0 72%, 4% 72%, 4% 43%, 10% 43%, 10% 65%, 12% 65%, 12% 34%, 18% 34%, 18% 57%, 20% 57%, 20% 24%, 27% 24%, 27% 68%, 29% 68%, 29% 12%, 35% 12%, 35% 53%, 37% 53%, 37% 4%, 45% 4%, 46% 0, 47% 4%, 47% 39%, 55% 39%, 55% 20%, 57% 20%, 57% 9%, 64% 9%, 64% 45%, 67% 45%, 67% 17%, 74% 17%, 74% 58%, 77% 58%, 77% 31%, 84% 31%, 84% 69%, 87% 69%, 87% 46%, 93% 46%, 93% 72%, 100% 72%, 100% 100%);
  filter: drop-shadow(0 0 20px rgb(255 160 87 / var(--drive-city-glow, 0.18)));
  opacity: 0.92; will-change: transform;
}
.pov-skyline::before {
  content: ""; position: absolute; right: -8%; bottom: 1%; width: 12%; aspect-ratio: 1;
  border: 3px solid rgb(255 205 123 / 0.72); border-radius: 50%;
  box-shadow: inset 0 0 12px rgb(255 172 91 / 0.34), 0 0 14px rgb(255 172 91 / 0.26);
}
.pov-skyline::after {
  content: ""; position: absolute; left: -10%; bottom: 1%; width: 23%; height: 22%;
  border-top: 3px solid rgb(151 183 209 / 0.68); border-radius: 50% 50% 0 0;
}
.drive-3d-ready .pov-skyline { opacity: 0; }
.pov-glow {
  position: absolute; z-index: 2; left: 50%; top: 40%; width: 118%; height: 27%;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(to bottom, transparent 8%, rgb(231 158 121 / 0.1) 42%, rgb(80 91 112 / 0.14) 62%, transparent 92%),
    radial-gradient(ellipse at center, rgb(255 166 102 / 0.2), transparent 70%);
  filter: blur(4px);
}
.pov-road {
  position: absolute; z-index: 2; left: -22%; right: -22%; bottom: 0; height: 56%; overflow: hidden;
  transform: rotateX(79deg); transform-origin: 50% 100%;
  background: linear-gradient(to top, #12233f 0%, #0d1c34 62%, rgb(11 24 51 / 0) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0 86%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0 86%, transparent 100%);
}
.pov-road::before, .pov-road::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(to top, rgb(210 224 250 / 0.55), transparent 84%);
}
.pov-road::before { left: 12%; }
.pov-road::after { right: 12%; }
.pov-lanes {
  position: absolute; left: 50%; margin-left: -9px; top: -60%; width: 18px; height: 220%;
  background: repeating-linear-gradient(180deg, rgb(255 209 92 / 0.95) 0 50px, transparent 50px 150px);
}
.pov-dash {
  position: absolute; left: -12%; right: -12%; bottom: -3%; height: 13%;
  background: radial-gradient(130% 150% at 50% 135%, rgb(5 11 22 / 0.96) 52%, transparent 72%);
}

@keyframes drive-cloud-drift-far {
  from { transform: translateX(-8%); }
  to { transform: translateX(10%); }
}
@keyframes drive-cloud-drift-near {
  from { transform: translateX(-11%) scale(1.14); }
  to { transform: translateX(13%) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .drive-cloud-bank { animation: none; }
}

/* the M1 driving game canvas. It sits over the static fallback road; JS turns
   it on and runs the game (hero-drive.js). Steer by dragging on the exposed
   road, tapping a side, or with the arrow keys. */
.drive-game {
  position: absolute; inset: 0; z-index: 0; display: none;
  width: 100%; height: 100%;
  touch-action: pan-y;               /* vertical swipe still scrolls the story */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.drive-game.is-on { display: block; }
.drive-game:active { cursor: grabbing; }
/* No ring on the canvas. It is a full-bleed scene filling the whole screen, so
   any outline reads as a stray box framing the game rather than as focus. A
   keyboard visitor gets the cue pill below instead, which is more use to them
   than a rectangle because it names the keys. */
.drive-game:focus,
.drive-game:focus-visible { outline: none; }

/* Keyboard-only steer cue. It stands in for the focus ring, so it shows while
   the canvas holds focus and the visitor arrived by Tab. Gated on .using-keys
   rather than :focus-visible because the game focuses the canvas itself, which
   is enough for Chromium to call a plain mouse click focus-visible. */
.drive-focus-cue {
  position: absolute; z-index: 4; display: none; margin: 0;
  left: 50%; bottom: clamp(5.2rem, 13vh, 8rem); transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-weight: 750; font-size: 0.78rem;
  letter-spacing: 0.02em; color: #f2f6fc;
  background: rgb(5 18 34 / 0.72); border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: 999px; padding: 0.4rem 0.9rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.7);
}
.using-keys .drive-game:focus ~ .drive-focus-cue { display: block; }

/* GPU scene finishing layer. The WebGL canvas stays transparent so the
   procedural atmosphere remains visible; this layer unifies the two with
   lens bloom, edge grading and a warm destination glow. */
.drive-aaa-grade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none;
  background:
    radial-gradient(ellipse 56% 38% at 50% 39%, rgb(255 174 96 / var(--drive-city-glow, 0.18)), transparent 73%),
    linear-gradient(to bottom, rgb(3 10 24 / 0.18), transparent 24% 68%, rgb(2 7 15 / 0.46)),
    radial-gradient(ellipse 92% 76% at 50% 48%, transparent 51%, rgb(2 8 18 / 0.48));
  mix-blend-mode: normal;
}
.drive-aaa-grade::before,
.drive-aaa-grade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.drive-aaa-grade::before {
  opacity: var(--drive-impact, 0);
  background:
    radial-gradient(circle at 50% 67%, rgb(255 250 222 / 0.66), rgb(255 103 68 / 0.34) 23%, transparent 62%),
    linear-gradient(90deg, rgb(255 55 61 / 0.22), transparent 22% 78%, rgb(255 55 61 / 0.22));
  mix-blend-mode: screen;
}
.drive-aaa-grade::after {
  opacity: var(--drive-scrape, 0);
  background:
    linear-gradient(104deg, transparent 13%, rgb(255 209 92 / 0.2) 20%, transparent 29%),
    linear-gradient(76deg, transparent 71%, rgb(255 209 92 / 0.18) 80%, transparent 87%);
  mix-blend-mode: screen;
}
.drive-3d-ready .drive-aaa-grade { display: block; }
.drive-on-bridge .drive-aaa-grade {
  background:
    radial-gradient(ellipse 62% 42% at 50% 39%, rgb(255 183 99 / 0.42), transparent 72%),
    linear-gradient(to bottom, rgb(3 10 24 / 0.12), transparent 23% 68%, rgb(2 7 15 / 0.4)),
    radial-gradient(ellipse 92% 76% at 50% 48%, transparent 53%, rgb(2 8 18 / 0.4));
}

.drive-arrival {
  position: absolute; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, -43%) scale(0.94);
  display: flex; flex-direction: column; align-items: center; gap: 0.32rem;
  width: min(88vw, 680px); opacity: 0; visibility: hidden; pointer-events: none;
  color: #fff; text-align: center; text-shadow: 0 4px 30px rgb(0 0 0 / 0.72);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.6s;
}
.drive-arrival.is-on { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.drive-arrival small {
  color: var(--gold); font-family: var(--font-display); font-weight: 850;
  font-size: clamp(0.72rem, 1.25vw, 0.95rem); letter-spacing: 0.25em;
}
.drive-arrival strong {
  font-family: var(--font-display); font-weight: 850;
  font-size: clamp(1.6rem, 5vw, 4.4rem); line-height: 0.98;
}

.drive-world-toast {
  position: absolute; z-index: 4; left: 50%; top: 54%; transform: translate(-50%, 10px);
  max-width: min(84vw, 560px); padding: 0.5rem 1rem; opacity: 0; visibility: hidden;
  color: #f4f8fc; background: rgb(5 18 34 / 0.72);
  border: 1px solid rgb(255 209 92 / 0.58); border-radius: 999px;
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.24), inset 0 1px rgb(255 255 255 / 0.07);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
          backdrop-filter: blur(10px) saturate(1.15);
  font-family: var(--font-display); font-size: clamp(0.66rem, 1.3vw, 0.82rem);
  font-weight: 800; letter-spacing: 0.08em; text-align: center; white-space: nowrap;
  pointer-events: none; transition: opacity 0.28s ease, transform 0.38s ease, visibility 0.28s;
}
.drive-world-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Compact glass trip computer. It gives the route a beginning, middle and end
   without turning the cinematic scene into a dashboard full of game chrome. */
.drive-hud {
  position: absolute; z-index: 3; top: clamp(0.7rem, 2.2vh, 1.25rem); right: clamp(0.7rem, 3vw, 1.5rem);
  display: none; grid-template-columns: auto 1fr; align-items: center; gap: 0.48rem 0.62rem;
  width: clamp(158px, 19vw, 216px); padding: 0.58rem 0.66rem 0.62rem;
  color: #fff; line-height: 1; pointer-events: none;
  background: linear-gradient(145deg, rgb(5 20 38 / 0.76), rgb(6 16 30 / 0.54));
  border: 1px solid rgb(255 255 255 / 0.17); border-radius: 16px;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.22), inset 0 1px rgb(255 255 255 / 0.08);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.48);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
          backdrop-filter: blur(12px) saturate(1.15);
}
.drive-hud.is-on { display: grid; }
.drive-route-shield {
  display: grid; place-items: center; width: 2.45rem; height: 2rem;
  color: #fff; background: #138b49; border: 3px solid #f6cf4a; border-radius: 8px;
  font-family: var(--font-display); font-weight: 900; font-size: 0.86rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 5px 12px rgb(0 0 0 / 0.18);
}
.drive-route-copy { display: flex; min-width: 0; flex-direction: column; gap: 0.18rem; }
.drive-route-copy strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-weight: 850; font-size: 0.78rem;
  letter-spacing: 0.055em;
}
.drive-route-copy small {
  font-family: var(--font-display); font-weight: 600; font-size: 0.54rem;
  color: rgb(198 210 224 / 0.68); letter-spacing: 0.025em;
}
.drive-route-copy b { color: rgb(232 239 247 / 0.78); font-size: 0.62rem; }
.drive-mode {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.34rem;
  color: #adbed0; font-family: var(--font-display); font-weight: 750;
  font-size: 0.54rem; letter-spacing: 0.11em;
}
.drive-mode::before {
  content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: #6fcf97; box-shadow: 0 0 9px rgb(111 207 151 / 0.62);
}
.drive-mode.is-driving { color: #fff; }
.drive-mode.is-driving::before {
  background: var(--gold); box-shadow: 0 0 10px rgb(255 209 92 / 0.72);
}
.drive-trip-progress {
  grid-column: 1 / -1; display: block; overflow: hidden;
  height: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.12);
}
.drive-trip-progress i {
  display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--coral, #ef7f63), var(--gold));
  border-radius: inherit; box-shadow: 0 0 9px rgb(255 209 92 / 0.5);
  transition: transform 0.3s linear;
}

/* steer hint, over the road, fades after the first steer */
.drive-hint {
  position: absolute; z-index: 3; left: 50%; top: 51%; transform: translate(-50%, -50%);
  margin: 0; display: none; white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-weight: 750; font-size: 0.78rem; color: #f2f6fc;
  background: rgb(5 18 34 / 0.64); border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px; padding: 0.38rem 0.86rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.7); transition: opacity 0.5s ease;
}
.drive-hint.is-on { display: block; }
.drive-hint.is-gone { opacity: 0; }

@media (max-width: 620px) {
  .drive-hud {
    width: 142px; padding: 0.46rem 0.5rem 0.5rem; gap: 0.4rem 0.48rem;
    border-radius: 13px;
  }
  .drive-route-shield { width: 2rem; height: 1.7rem; border-width: 2px; font-size: 0.72rem; }
  .drive-route-copy strong { font-size: 0.65rem; }
  .drive-route-copy small { font-size: 0.53rem; }
  .drive-route-copy b { font-size: 0.63rem; }
  .drive-mode { font-size: 0.47rem; }
}

/* Screen 1 hook copy: a supporting line under the headline and the emotional
   outcome + continue cue at the foot. Both sit over the moving road, so they
   are light with a soft shadow for legibility and stay visible during play. */
.s1-support {
  margin: 0; max-width: 25ch; position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw + 0.45rem, 1.3rem); line-height: 1.26; color: #ffffff;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.72);
}
/* the subtle CTA under the support copy, drawn as one of the motorway's own
   green exit signs so it belongs to the drive rather than shouting over it.
   Green is scene dressing here exactly like the game's painted signs; the
   amber conversion buttons in the header and dock stay the loud path in. */
.s1-exit {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  margin-top: 0.35rem; padding: 0.5rem 0.95rem 0.55rem;
  background: linear-gradient(180deg, #2f7d53, #256944);
  border: 2px solid #eef6ee; border-radius: 9px;
  box-shadow: 0 0 0 2px rgb(7 20 38 / 0.4), 0 8px 18px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.22);
  color: #fff; text-decoration: none;
  transition: transform 0.15s ease;
}
.s1-exit-kicker {
  font-family: var(--font-display); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #d8ecda;
}
.s1-exit-main {
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.1;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.s1-exit-arrow { display: inline-block; transition: transform 0.15s ease; }
.s1-exit:hover, .s1-exit:focus-visible { transform: translateY(-2px); }
.s1-exit:hover .s1-exit-arrow, .s1-exit:focus-visible .s1-exit-arrow { transform: translateX(3px); }
.s1-exit:active { transform: scale(0.97); }

/* the continue cue sits centred at the foot of the drive, dressed as a quiet
   glass pill so it reads polished rather than like a stray caption */
.hero-beat--s1 .s1-bottom { align-items: center; }
.hero-beat--s1 .hero-scroll-cue {
  margin: 0; padding: 0.6rem 1.15rem; border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / 0.28);
  background: rgb(7 20 38 / 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #e4ebf6; box-shadow: 0 6px 16px rgb(0 0 0 / 0.3);
}

/* enhanced motion: the lane markings stream up out of the horizon (that is
   the whole trick). Transform only, off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .pov-lanes { animation: pov-stream 0.5s linear infinite; }
  @keyframes pov-stream { to { transform: translateY(150px); } }
}

/* Desktop (≥960px, where the decorative car photo appears on the right):
   the old text beats were narrow enough to stay clear of the photo while
   centred, but the new persona/step cards are wider and would run under it.
   Shift every beat into a left content column so the photo owns the right
   and nothing collides. Matches the photo's own breakpoint. */
/* ============ Desktop hero (>=861px): impressive, mobile untouched ============
   Mobile (<=860px) keeps its layout entirely. On desktop the driving game goes
   full-bleed and immersive, and the content beats centre with wide, symmetric
   layouts instead of the old narrow left column beside a floating car photo.
   There is no thumb bar on desktop, so beats use the full height. */
@media (min-width: 861px) {
  .hero--story .hero-story-photo { display: none; }
  .hero--story .hero-beat {
    margin: 0 auto; max-width: 1100px;
    padding: clamp(1.5rem, 4vh, 3rem) clamp(2rem, 6vw, 5rem);
    align-content: center; justify-items: center; text-align: center;
    gap: clamp(1rem, 2.4vh, 1.7rem);
  }
  /* intro copy centred */
  .hero-beat--personas .hero-persona-secondary,
  .hero-beat--personas .hero-persona-lede { text-align: center; margin-inline: auto; }
  .hero-beat--personas .hero-persona-lede { max-width: 48ch; }
  /* Card 2: four audience groups as a 2x2 of detailed tiles */
  .hero-beat--personas .hero-personas--detailed { grid-template-columns: repeat(2, 1fr); max-width: 940px; gap: 1rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona { padding: 1.35rem 1.5rem; gap: 1rem; align-items: center; }
  .hero-beat--personas .hero-personas--detailed .hero-persona img { width: 58px; height: 58px; }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong { font-size: 1.32rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc { font-size: 1.05rem; line-height: 1.3; }
  .hero-qualify-panel { max-width: 720px; }
  .hero-qualify-panel > .icon-circle { width: 60px; height: 60px; }
  /* Cards 2 and 3 read from the top down on desktop too: content starts below
     the chrome strip with a small cushion instead of centring in the space. */
  .hero--story .hero-beat--flow,
  .hero--story .hero-beat--personas { align-content: start; padding-top: calc(var(--chrome-h, 146px) + clamp(0.8rem, 2vh, 1.4rem)); }
  /* Card 2 (the main event): three big step boxes across. Vertical spacing is
     kept tight so the big type + big cars still centre on a 900px laptop. */
  .hero-beat--flow { gap: clamp(0.7rem, 1.7vh, 1.3rem); }
  .hero-beat--flow .hero-flow-head { font-size: clamp(1.8rem, 3vw, 2.4rem); }
  .hero-beat--flow .step-cards { grid-template-columns: repeat(3, 1fr); max-width: 1120px; gap: 1.2rem; }
  .hero-beat--flow .step-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.55rem; padding: 1.5rem 1.4rem; border-radius: 24px; }
  .hero-beat--flow .step-card .step-num { order: 1; width: 38px; height: 38px; font-size: 1.15rem; }
  .hero-beat--flow .step-card .step-card-icon { order: 2; width: 76px; height: 76px; border-radius: 20px; }
  .hero-beat--flow .step-card .step-card-text { order: 3; }
  .hero-beat--flow .step-card .step-card-text strong { font-size: 1.55rem; }
  .hero-beat--flow .step-card .step-card-text span { font-size: 1.12rem; line-height: 1.32; margin-top: 0.3rem; }
  .hero-beat--flow .feature-panel { max-width: 720px; margin-inline: auto; }
  /* the selectable cars as a tidy 2x2, front and centre: a photo beside the
     details so all four fit the beat height without crowding the steps above */
  .hero-beat--flow .hero-car-pick { max-width: 980px; margin-inline: auto; }
  .hero-beat--flow .hero-car-pick-label { text-align: center; font-size: 1.05rem; margin-bottom: 0.7rem; }
  .hero-beat--flow .hero-car-pick-row { gap: 1rem; }
  .hero-beat--flow .car-pick-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; padding: 0.7rem 1rem; border-radius: 18px; gap: 0.1rem 1rem; }
  .hero-beat--flow .car-pick-photo { grid-row: 1 / span 4; align-self: center; }
  .hero-beat--flow .car-pick-photo img { max-width: 240px; }
  .hero-beat--flow .car-pick-name { font-size: 1.28rem; }
  .hero-beat--flow .car-pick-meta { font-size: 0.9rem; }
  .hero-beat--flow .car-pick-price { font-size: 1.12rem; }
  .hero-beat--flow .car-pick-per { font-size: 0.85rem; }
  .hero-beat--flow .car-pick-view { font-size: 0.88rem; margin-top: 0.2rem; }

  /* Card 1: full-bleed immersive driving game, big headline overlaid top-left,
     continue cue centred along the bottom like a dash indicator. */
  .hero--story .hero-beat--s1 { max-width: none; margin: 0; padding: 0; }
  .hero-beat--s1 .s1-top {
    position: absolute; z-index: 2; top: clamp(2rem, 7vh, 5rem); left: clamp(2.5rem, 6vw, 6rem);
    width: auto; max-width: 640px; align-items: flex-start; text-align: left;
  }
  .hero-beat--s1 .hero-headline { font-size: clamp(3rem, 4.6vw, 4.8rem); }
  .hero-beat--s1 .s1-support { font-size: clamp(1.2rem, 1.65vw, 1.5rem); max-width: 30ch; }
  .hero-beat--s1 .s1-bottom {
    position: absolute; z-index: 2; bottom: clamp(1.6rem, 5vh, 3.4rem);
    left: 50%; transform: translateX(-50%);
    width: auto; align-items: center; text-align: center;
  }
}

/* per-beat decorative "orb" visuals — abstract ring/orbit/radar shapes in
   the one navy/cream/white palette (a sliver of --gold, same tint already
   used for kickers, on small highlights only — never a decorative block of
   --accent). Shapes/positions are unconditional so they still read under
   reduced motion; only the spin/orbit/pulse keyframes are gated below. */
.hero-visual { position: relative; width: 100px; height: 100px; margin: 0 0 0.4rem; }
.hv-ring { position: absolute; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.32); }
.hero-visual--signal .hv-ring--a { inset: 14px; }
.hero-visual--signal .hv-ring--b { inset: 2px; border-color: rgb(255 255 255 / 0.16); }
.hero-visual--signal .hv-sweep {
  position: absolute; inset: 2px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(255 255 255 / 0.5), transparent 42%);
  -webkit-mask-image: radial-gradient(transparent 30%, #000 31%);
  mask-image: radial-gradient(transparent 30%, #000 31%);
}
.hero-visual--signal .hv-halo {
  position: absolute; inset: 30px; border-radius: 50%;
  background: rgb(255 255 255 / 0.14); filter: blur(6px);
}
.hero-visual--signal .hv-badge {
  position: absolute; inset: 0; margin: auto; width: 28px; height: 28px;
}
.hero-visual--orbit .hv-hub, .hero-visual--radar .hv-hub {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px;
  border-radius: 16px; background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.25);
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 0 22px rgb(120 160 230 / 0.32);
}
.hero-visual--orbit .hv-hub img, .hero-visual--radar .hv-hub img { width: 34px; height: 34px; object-fit: contain; }
.hero-visual--orbit .hv-sat {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgb(255 255 255 / 0.55);
}
.hero-visual--orbit .hv-sat--1 { transform: rotate(0deg) translateX(46px); }
.hero-visual--orbit .hv-sat--2 { transform: rotate(120deg) translateX(46px); }
.hero-visual--orbit .hv-sat--3 { transform: rotate(240deg) translateX(46px); }
.hero-visual--radar .hv-ring--a { inset: 8px; }
.hero-visual--radar .hv-ring--b { inset: -6px; border-color: rgb(255 255 255 / 0.14); }
.hero-visual--radar .hv-blip {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgb(255 255 255 / 0.75); opacity: 0;
}
.hero-visual--radar .hv-blip--1 { top: 12px; left: 18px; }
.hero-visual--radar .hv-blip--2 { bottom: 14px; right: 14px; }

@media (prefers-reduced-motion: no-preference) {
  html.js .hero-story-progress { display: flex; position: sticky; top: 0; z-index: 5; }
  html.js .hero-story-track {
    height: 100svh; overflow-y: auto;
    scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.js .hero-story-track::-webkit-scrollbar { display: none; }
  html.js .hero-beat {
    height: 100svh; min-height: 100svh;
    scroll-snap-align: start; scroll-snap-stop: always;
    /* its own compositing layer: nested overflow:auto + scroll-snap
       containers are a known spot for mobile browsers to leave stale
       content painted until something else forces a repaint — this keeps
       each beat on its own GPU layer so the browser repaints it directly
       off the scroll position instead of relying on a parent repaint. */
    transform: translateZ(0);
  }

  /* reveal choreography: each element starts hidden and settles in once its
     beat gets the .is-active class from the IntersectionObserver in main.js
     — transform/opacity/blur only, staggered purely via transition-delay,
     the same trick the reference site's own story panels use. */
  html.js .hero-beat-kicker, html.js .hero-beat-hint {
    opacity: 0; transform: translateY(14px); transition: 0.5s ease;
  }
  html.js .hero-beat.is-active .hero-beat-kicker { opacity: 1; transform: none; }
  html.js .hero-beat.is-active .hero-beat-hint { opacity: 1; transform: none; transition-delay: 0.5s; }

  html.js .hero-beat-text .ln {
    opacity: 0; transform: translateY(34px); filter: blur(7px);
    transition: 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js .hero-beat.is-active .hero-beat-text .ln { opacity: 1; transform: none; filter: blur(0); }
  html.js .hero-beat.is-active .hero-beat-text .ln:nth-child(2) { transition-delay: 0.1s; }
  html.js .hero-beat.is-active .hero-beat-text .ln:nth-child(3) { transition-delay: 0.2s; }

  html.js .hero-visual, html.js .hero-stamp, html.js .hero-beat-payoff,
  html.js .hero-wordmark--beat, html.js .totem-beat-icon {
    opacity: 0; transform: translateY(20px) scale(0.92);
    transition: 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
  }
  html.js .hero-beat.is-active .hero-visual,
  html.js .hero-beat.is-active .hero-stamp,
  html.js .hero-beat.is-active .hero-beat-payoff,
  html.js .hero-beat.is-active .hero-wordmark--beat,
  html.js .hero-beat.is-active .totem-beat-icon { opacity: 1; transform: none; }

  html.js .hero--story .hero-beat-text--body,
  html.js .totem-beat .hero-beat-text,
  html.js .hero-beat-lede {
    opacity: 0; transform: translateY(20px); transition: 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  }
  html.js .hero--story .hero-beat.is-active .hero-beat-text--body,
  html.js .totem-beat.is-active .hero-beat-text,
  html.js .hero-beat.is-active .hero-beat-lede { opacity: 1; transform: none; }

  html.js .hero-beat-statement,
  html.js .totem-beat p:not(.hero-beat-text):not(.hero-beat-kicker) {
    opacity: 0; transform: translateY(14px); transition: 0.55s ease 0.2s;
  }
  html.js .hero-beat.is-active .hero-beat-statement,
  html.js .totem-beat.is-active p:not(.hero-beat-text):not(.hero-beat-kicker) { opacity: 1; transform: none; }

  html.js .hero-ctas, html.js .hero-reassure, html.js .totem-beat-link {
    opacity: 0; transform: translateY(16px); transition: 0.55s ease 0.35s;
  }
  html.js .hero-beat.is-active .hero-ctas,
  html.js .hero-beat.is-active .hero-reassure,
  html.js .hero-beat.is-active .totem-beat-link { opacity: 1; transform: none; }

  /* new hero content: icon tiles, persona tiles and flow rows each settle in
     on a short stagger once their beat is active. Transform and opacity only,
     the same engine as everything above. */
  html.js .hero-dots .hero-dot,
  html.js .hero-personas .hero-persona,
  html.js .hero-flow .hero-flow-row {
    opacity: 0; transform: translateY(16px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  }
  html.js .hero-beat.is-active .hero-dots .hero-dot,
  html.js .hero-beat.is-active .hero-personas .hero-persona,
  html.js .hero-beat.is-active .hero-flow .hero-flow-row { opacity: 1; transform: none; }
  html.js .hero-beat.is-active .hero-dots .hero-dot:nth-child(2),
  html.js .hero-beat.is-active .hero-personas .hero-persona:nth-child(2),
  html.js .hero-beat.is-active .hero-flow .hero-flow-row:nth-child(2) { transition-delay: 0.28s; }
  html.js .hero-beat.is-active .hero-dots .hero-dot:nth-child(3),
  html.js .hero-beat.is-active .hero-personas .hero-persona:nth-child(3),
  html.js .hero-beat.is-active .hero-flow .hero-flow-row:nth-child(3) { transition-delay: 0.4s; }
  html.js .hero-beat.is-active .hero-dots .hero-dot:nth-child(4),
  html.js .hero-beat.is-active .hero-personas .hero-persona:nth-child(4) { transition-delay: 0.52s; }

  html.js .hero-scroll-cue-arrow { animation: hero-scroll-bob 1.6s ease-in-out infinite; }
  @keyframes hero-scroll-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }
  html.js .hero-key-icon { animation: hero-key-bob 3.4s ease-in-out infinite; }
  @keyframes hero-key-bob {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(-4px); }
  }

  html.js .hero-visual--signal .hv-sweep { animation: hv-rotate 3s linear infinite; }
  html.js .hero-visual--signal .hv-halo { animation: hv-pulse 2.4s ease-in-out infinite; }
  @keyframes hv-rotate { to { transform: rotate(360deg); } }
  @keyframes hv-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.28); opacity: 0.16; }
  }
  html.js .hero-visual--orbit .hv-sat--1 { animation: hv-orbit 5.2s linear infinite; }
  html.js .hero-visual--orbit .hv-sat--2 { animation: hv-orbit 5.2s linear infinite; animation-delay: -1.73s; }
  html.js .hero-visual--orbit .hv-sat--3 { animation: hv-orbit 5.2s linear infinite; animation-delay: -3.47s; }
  @keyframes hv-orbit {
    from { transform: rotate(0deg) translateX(46px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(46px) rotate(-360deg); }
  }
  html.js .hero-visual--radar .hv-blip--1 { animation: hv-blip 2.6s linear infinite; }
  html.js .hero-visual--radar .hv-blip--2 { animation: hv-blip 2.6s linear 0.9s infinite; }
  @keyframes hv-blip {
    0%, 80%, 100% { opacity: 0; }
    15%, 45% { opacity: 1; }
  }
}

/* Very short phones (SE class): the dial stays the centrepiece but pulls in so
   the whole cockpit still lands above the thumb bar. */
@media (max-width: 880px) and (max-height: 700px) {
  .cockpit-gauge { width: min(62vw, 23.5svh, 205px); }
  .cockpit-cluster .calc-week { font-size: clamp(1.4rem, 5.8vw, 1.66rem); }
  .calc-panel--cockpit .size-label { padding: 0.3rem 0.35rem; font-size: 0.78rem; }
  .calc-panel--cockpit .size-sub { font-size: 0.62rem; }
  .calculator-cockpit h2 { font-size: clamp(1.05rem, 4vw, 1.3rem); }
  .cockpit-cluster .btn { padding-block: 0.48rem; }
}

/* ---------- Short-viewport tiers for the story and included cards ----------
   iPhones with the Safari bars on screen lose 60 to 100px of height versus the
   sizes above (Android chrome is shorter, which is why it fits there). These
   tiers keep every card's last row clear of the thumb dock on those heights,
   scaling down the same way the calculator cockpit already does. */
@media (max-width: 880px) and (max-height: 810px) {
  /* steps card */
  .hero-beat--flow .step-card { padding: clamp(0.55rem, 1.5vh, 0.85rem) 0.9rem; gap: 0.75rem; }
  .hero-beat--flow .step-card-icon { width: 42px; height: 42px; }
  .hero-beat--flow .step-card .step-num { width: 31px; height: 31px; font-size: 0.98rem; }
  .hero-beat--flow .step-card-text strong { font-size: 1.2rem; }
  .hero-beat--flow .step-card-text span { font-size: 0.94rem; line-height: 1.2; }
  .hero-beat--flow .hero-flow-head { font-size: clamp(1.5rem, 4.8vw + 0.2rem, 1.95rem); }
  /* cars card */
  .hero-beat--flow .car-pick-photo img { max-width: min(158px, 20.5svh); }
  .hero-beat--flow .car-pick-inner { padding: 0.42rem 0.4rem 0.52rem; }
  .hero-beat--flow .car-pick-name { font-size: 1.04rem; }
  .hero-beat--flow .car-pick-meta { font-size: 0.78rem; }
  .hero-beat--flow .car-pick-price { font-size: 0.98rem; }
  .hero-beat--flow .hero-car-pick-row { gap: clamp(0.45rem, 1.3vh, 0.65rem); }
  /* audience card */
  .hero-beat--personas .hero-beat-text--brand { font-size: clamp(1.6rem, 4.9vw + 0.2rem, 2.2rem); }
  .hero-beat--personas .hero-personas--detailed { gap: clamp(0.38rem, 1.1vh, 0.55rem); }
  .hero-beat--personas .hero-personas--detailed .hero-persona { padding: clamp(0.5rem, 1.35vh, 0.72rem) 0.85rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona img { width: 42px; height: 42px; }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong { font-size: 1.02rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc { font-size: 0.84rem; line-height: 1.2; }
  .hero-beat--personas .hero-persona-secondary { font-size: 0.84rem; }
  /* included (totem) cards */
  .totem-hero-icon { width: clamp(72px, 18vw, 88px); height: clamp(72px, 18vw, 88px); }
  .totem-beat .hero-beat-text--body { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  .totem-beat > p { font-size: 0.95rem; }
  .totem-beat .feature-panel { padding: 0.65rem 0.85rem; }
  .totem-beat .feature-row { padding-block: 0.5rem; }
  .totem-beat .feature-row-text span, .totem-beat .feature-panel-text span { font-size: 0.86rem; line-height: 1.24; }
}
@media (max-width: 880px) and (max-height: 750px) {
  .hero-beat--flow .step-card { padding: 0.48rem 0.85rem; gap: 0.65rem; }
  .hero-beat--flow .step-card-icon { width: 36px; height: 36px; }
  .hero-beat--flow .step-card-text strong { font-size: 1.1rem; }
  .hero-beat--flow .step-card-text span { font-size: 0.88rem; line-height: 1.14; }
  .hero-beat--flow .car-pick-photo img { max-width: min(138px, 19svh); }
  .hero-beat--flow .car-pick-name { font-size: 0.96rem; }
  .hero-beat--flow .car-pick-price { font-size: 0.9rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona { padding: 0.45rem 0.8rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona img { width: 36px; height: 36px; }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong { font-size: 0.96rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc { font-size: 0.79rem; }
  .totem-hero-icon { width: 64px; height: 64px; }
  .totem-beat .hero-beat-text--body { font-size: clamp(1.35rem, 4.6vw, 1.7rem); }
  .totem-beat .feature-row { padding-block: 0.42rem; }
  .totem-beat .feature-row-text span, .totem-beat .feature-panel-text span { font-size: 0.82rem; line-height: 1.2; }
}

/* ============================================================
   DESKTOP OVERHAUL — homepage. Every rule in here is gated to
   min-width 861px, so the phone experience is untouched. The
   design leans into the highway brand: dashed lane lines as
   connective tissue, glass panels floating over the navy,
   editorial split layouts, and hover life on everything you
   can press. Amber stays reserved for CTAs; gold is the trim.
   ============================================================ */
@media (min-width: 861px) {

  /* ---------- Story card 2: RENT IT. DRIVE IT. OWN IT. ----------
     An editorial split: the promise stacked huge on the left, the
     three steps as tall glass rows on the right, threaded by a
     dashed gold lane line. */
  .hero--story .hero-beat--flow:not(.hero-beat--flow-cars) {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto 1fr; column-gap: clamp(3rem, 5vw, 5.5rem);
    max-width: 1240px; justify-items: start; text-align: left;
    align-content: center;
  }
  .hero-beat--flow:not(.hero-beat--flow-cars) .hero-beat-kicker { grid-column: 1; margin-bottom: 0; }
  .hero-beat--flow:not(.hero-beat--flow-cars) .hero-flow-head {
    grid-column: 1; text-align: left;
    font-size: clamp(3rem, 3.9vw, 4.3rem); line-height: 1.02; max-width: 9ch;
  }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-cards {
    grid-column: 2; grid-row: 1 / span 3; align-self: center;
    grid-template-columns: 1fr; max-width: none; width: 100%;
    gap: 1.1rem; position: relative; padding-left: 2.2rem;
  }
  /* the lane line: a dashed gold thread running down the steps */
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-cards::before {
    content: ""; position: absolute; left: 0.6rem; top: 8%; bottom: 8%;
    border-left: 3px dashed rgb(255 209 92 / 0.42);
  }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card {
    grid-template-columns: auto auto 1fr; justify-items: start; text-align: left;
    align-items: center; gap: 1.3rem; padding: 1.45rem 1.7rem; border-radius: 22px;
    position: relative; overflow: hidden; width: 100%;
    background: rgb(255 255 255 / 0.055);
  }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-num {
    order: 0; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
    width: auto; height: auto; background: none; border: 0; box-shadow: none;
    font-size: 5.4rem; font-weight: 800; color: rgb(255 209 92 / 0.13); line-height: 1;
  }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-card-icon {
    order: 1; width: 74px; height: 74px; border-radius: 20px;
  }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-card-text { order: 2; text-align: left; }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-card-text strong { font-size: 1.6rem; }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-card-text span { font-size: 1.08rem; line-height: 1.3; margin-top: 0.25rem; max-width: 34ch; }

  /* ---------- Story card 3: THE CARS, a showroom row ---------- */
  .hero-beat--flow-cars .hero-beat-kicker { margin-bottom: 0; }
  .hero-beat--flow-cars .hero-flow-head { font-size: clamp(2.6rem, 3.4vw, 3.6rem); }
  .hero-beat--flow-cars .hero-car-pick { max-width: 1300px; width: 100%; }
  .hero-beat--flow-cars .hero-car-pick-row { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
  .hero-beat--flow-cars .car-pick-inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 1.5rem 1.1rem 1.45rem; border-radius: 24px; gap: 0.12rem;
    background: rgb(255 255 255 / 0.055);
  }
  .hero-beat--flow-cars .car-pick-photo { margin-bottom: 0.5rem; }
  .hero-beat--flow-cars .car-pick-photo img {
    max-width: 250px; width: 100%;
    transition: transform 0.25s ease;
    filter: drop-shadow(0 16px 22px rgb(0 0 0 / 0.45));
  }
  .hero-beat--flow-cars .car-pick-name { font-size: 1.32rem; }
  .hero-beat--flow-cars .car-pick-meta { font-size: 0.95rem; }
  .hero-beat--flow-cars .car-pick-price { font-size: 1.22rem; margin-top: 0.15rem; }
  .hero-beat--flow-cars .car-pick-view {
    display: inline-flex; font-size: 0.92rem; margin-top: 0.55rem; color: var(--gold);
  }

  /* ---------- Story card 4: BUILT FOR PEOPLE, an audience row ---------- */
  .hero-beat--personas .hero-personas--detailed {
    grid-template-columns: repeat(4, 1fr); max-width: 1300px; width: 100%; gap: 1.2rem;
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona {
    flex-direction: column; align-items: flex-start; text-align: left;
    gap: 0.75rem; padding: 1.6rem 1.5rem 1.7rem; border-radius: 22px;
    background: rgb(255 255 255 / 0.055);
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona img { width: 62px; height: 62px; }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong { font-size: 1.34rem; line-height: 1.12; }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc { font-size: 1.04rem; line-height: 1.35; }
  .hero-beat--personas .hero-beat-text--brand { font-size: clamp(2.6rem, 3.4vw, 3.5rem); }
  .hero-beat--personas .hero-persona-secondary { font-size: 1.15rem; }
  .hero-beat--personas .hero-qualify-panel { max-width: 860px; }

  /* ---------- Plan inclusions: editorial splits over the wheel ---------- */
  .totem--story .totem-beat:not(.totem-beat--finale) {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto auto; column-gap: clamp(3rem, 5vw, 5rem);
    max-width: 1200px; margin-inline: auto; align-content: center;
    justify-items: start; text-align: left;
  }
  .totem--story .totem-beat:not(.totem-beat--finale) .totem-hero-icon {
    grid-column: 1; grid-row: 1; width: 150px; height: 150px; margin-bottom: 0.4rem;
  }
  .totem--story .totem-beat:not(.totem-beat--finale) .hero-beat-text--body {
    grid-column: 1; grid-row: 2; text-align: left;
    font-size: clamp(2.5rem, 3.1vw, 3.2rem); line-height: 1.04;
  }
  .totem--story .totem-beat:not(.totem-beat--finale) > p {
    grid-column: 1; grid-row: 3; font-size: 1.18rem; max-width: 30ch;
  }
  .totem--story .totem-beat:not(.totem-beat--finale) .feature-panel {
    grid-column: 2; grid-row: 1; align-self: end; width: 100%;
    padding: 1.2rem 1.5rem; border-radius: 20px;
  }
  .totem--story .totem-beat:not(.totem-beat--finale) .feature-rows {
    grid-column: 2; grid-row: 2 / span 2; width: 100%;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 24px; padding: 0.7rem 1.7rem;
  }
  .totem--story .totem-beat:not(.totem-beat--finale) .feature-row { padding-block: 1.05rem; }
  .totem--story .totem-beat:not(.totem-beat--finale) .feature-row-text strong { font-size: 1.18rem; }
  .totem--story .totem-beat:not(.totem-beat--finale) .feature-row-text span { font-size: 1.02rem; }
  .totem--story .totem-beat--finale .totem-finale-amount { font-size: clamp(4.6rem, 6vw, 6rem); }
  .totem--story .totem-beat--finale .totem-finale-head { font-size: clamp(2.6rem, 3.4vw, 3.4rem); }

  /* ---------- Calculator: a wider, glassier cockpit ---------- */
  .calculator-cockpit .section-head h2 { font-size: clamp(2.4rem, 3vw, 3.1rem); }
  .calc-panel--cockpit { max-width: 1220px; margin-inline: auto; border-radius: 34px; }
  .calc-panel--cockpit .calc-inputs { padding: clamp(2.2rem, 3.2vw, 3rem); gap: 1.7rem; }
  .calc-panel--cockpit .size-label { min-height: 76px; font-size: 1.02rem; border-radius: 18px; }
  .calc-panel--cockpit .size-sub { font-size: 0.82rem; }
  .calc-panel--cockpit .field-label { font-size: 1.05rem; }
  .cockpit-cluster .calc-week { font-size: clamp(3rem, 4vw, 3.8rem); }
  .cockpit-cluster .label { font-size: 1rem; }

  /* ---------- From no to new keys: a four-stop route ---------- */
  .steps-card .section-head h2 { font-size: clamp(2.3rem, 2.9vw, 3rem); }
  .steps-card .steps-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
    max-width: 1240px; margin: 2.4rem auto 0; position: relative;
  }
  .steps-card .steps-grid::before {
    content: ""; position: absolute; left: 4%; right: 4%; top: 27px;
    border-top: 3px dashed rgb(11 28 51 / 0.22);
  }
  .steps-card .steps-grid-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
    position: relative; padding: 0;
  }
  .steps-card .steps-grid-num {
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    background: var(--navy); color: var(--gold);
    font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
    box-shadow: 0 0 0 5px var(--cream), 0 8px 18px rgb(11 28 51 / 0.18);
    position: relative; z-index: 1;
  }
  .steps-card .steps-grid-text strong { font-size: 1.28rem; }
  .steps-card .steps-grid-text span { font-size: 1rem; line-height: 1.4; }

  /* ---------- Final word: bigger, prouder ---------- */
  .final-cta .type-wall h2 { font-size: clamp(3.2rem, 4.6vw, 4.4rem); line-height: 1.04; }
  .final-cta .type-wall .lede { font-size: 1.22rem; max-width: 56ch; margin-inline: auto; }

  /* ---------- shared glass + motion ---------- */
  .hero-beat--flow .step-card,
  .hero-beat--flow-cars .car-pick-inner,
  .hero-beat--personas .hero-persona,
  .steps-card .steps-grid-item {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
  }
}
@media (min-width: 861px) and (hover: hover) {
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card:hover,
  .hero-beat--personas .hero-persona:hover {
    transform: translateY(-5px); border-color: rgb(255 209 92 / 0.55);
    box-shadow: 0 18px 38px rgb(0 0 0 / 0.35);
  }
  .hero-beat--flow-cars .car-pick:hover .car-pick-inner {
    transform: translateY(-6px); border-color: var(--gold);
    background: rgb(255 209 92 / 0.07);
    box-shadow: 0 20px 44px rgb(0 0 0 / 0.4);
  }
  .hero-beat--flow-cars .car-pick:hover .car-pick-photo img { transform: translateY(-5px) scale(1.045); }
}

/* ============================================================
   DESKTOP OVERHAUL, PASS 2 — balance and presence. The four
   full-screen cards centre their content in the space below the
   chrome and scale up to actually own a big monitor, and the
   cream four-steps card gets a properly composed foot row.
   Mobile untouched (min-width gated).
   ============================================================ */
@media (min-width: 861px) {
  /* the story cards centre as one block in the viewport, so a tall monitor
     gets breathing room above and below instead of a void underneath. */
  .hero--story .hero-beat--flow,
  .hero--story .hero-beat--personas { align-content: center; }

  /* steps split: the promise centres against the three rows */
  .hero--story .hero-beat--flow:not(.hero-beat--flow-cars) {
    grid-template-rows: auto auto; max-width: 1300px;
  }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-cards {
    grid-row: 1 / span 2; gap: 1.35rem;
  }
  .hero-beat--flow:not(.hero-beat--flow-cars) .hero-flow-head { align-self: start; font-size: clamp(3.2rem, 4.2vw, 4.7rem); }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card { padding: 1.8rem 1.9rem; border-radius: 26px; gap: 1.5rem; }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-card-icon { width: 86px; height: 86px; border-radius: 24px; }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-card-text strong { font-size: 1.75rem; }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-card-text span { font-size: 1.16rem; line-height: 1.34; }
  .hero-beat--flow:not(.hero-beat--flow-cars) .step-card .step-num { font-size: 6.4rem; }

  /* cars showroom: bigger metal, roomier tiles */
  .hero-beat--flow-cars .hero-car-pick { max-width: 1380px; }
  .hero-beat--flow-cars .hero-car-pick-row { gap: 1.6rem; }
  .hero-beat--flow-cars .car-pick-inner { padding: 2.1rem 1.4rem 1.9rem; border-radius: 28px; }
  .hero-beat--flow-cars .car-pick-photo img { max-width: 300px; }
  .hero-beat--flow-cars .car-pick-name { font-size: 1.5rem; }
  .hero-beat--flow-cars .car-pick-meta { font-size: 1.02rem; }
  .hero-beat--flow-cars .car-pick-price { font-size: 1.38rem; margin-top: 0.3rem; }
  .hero-beat--flow-cars .car-pick-per { font-size: 0.95rem; }
  .hero-beat--flow-cars .car-pick-view { font-size: 1rem; margin-top: 0.7rem; }
  .hero-beat--flow-cars .hero-flow-head { font-size: clamp(2.8rem, 3.6vw, 3.9rem); }

  /* audience row: taller, warmer tiles */
  .hero-beat--personas .hero-personas--detailed { max-width: 1380px; gap: 1.5rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona { padding: 2rem 1.8rem 2.1rem; border-radius: 26px; gap: 0.95rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona img { width: 72px; height: 72px; }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong { font-size: 1.5rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc { font-size: 1.12rem; line-height: 1.4; }
  .hero-beat--personas .hero-beat-text--brand { font-size: clamp(2.9rem, 3.7vw, 3.9rem); }
  .hero-beat--personas .hero-persona-lede { font-size: 1.18rem; max-width: 52ch; }
  .hero-qualify-panel { max-width: 980px; padding: 1.25rem 1.7rem; }
  .hero-qualify-panel .feature-panel-text span { font-size: 1.08rem; }

  /* the cream four-steps card: centred composition, richer cards, and a foot
     row that reads as one deliberate line instead of a squeeze. */
  .steps-card { display: grid; align-content: center; }
  .steps-card .section-head { margin-bottom: 0.4rem; }
  .steps-card .steps-grid { gap: 1.8rem; margin-top: 2.8rem; }
  .steps-card .steps-grid-item { background: #fff; border-radius: 22px; padding: 0 1.5rem 1.5rem; box-shadow: 0 14px 30px rgb(11 28 51 / 0.08); }
  .steps-card .steps-grid-num { width: 60px; height: 60px; font-size: 1.5rem; margin-top: -30px; }
  .steps-card .steps-grid-text strong { font-size: 1.34rem; }
  .steps-card .steps-grid-text span { font-size: 1.04rem; line-height: 1.45; }
  .steps-card .steps-grid::before { top: 0; }
  .steps-card .steps-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; max-width: 1240px; margin: 3rem auto 0;
    padding-top: 1.8rem; border-top: 1px solid rgb(11 28 51 / 0.12);
  }
  .steps-card .steps-ticks { display: flex; gap: 2.4rem; margin: 0; font-size: 1.06rem; }
  .steps-card .steps-card-foot .btn { padding: 1rem 2.1rem; font-size: 1.12rem; }
}

/* ---------- richer car tiles + trust strip (desktop only) ----------
   The blurb, spec chips and the contract-to strip exist in the markup on all
   devices but only render on desktop, so the phone cards stay exactly as
   they are. */
.car-pick-blurb, .car-pick-specs, .hero-orgs { display: none; }

@media (min-width: 861px) {
  .hero-beat--flow-cars .car-pick { height: 100%; }
  .hero-beat--flow-cars .car-pick-inner { height: 100%; }
  .hero-beat--flow-cars .car-pick-name { text-wrap: balance; }
  .car-pick-blurb {
    display: block; font-size: 0.99rem; line-height: 1.4; color: #c6d0e0;
    margin-top: 0.45rem; max-width: 30ch;
  }
  .car-pick-specs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem;
    margin-top: 0.75rem;
  }
  .car-pick-specs span {
    font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
    color: #dbe4f2; padding: 0.28rem 0.7rem; border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.05);
    white-space: nowrap;
  }
  .hero-beat--flow-cars .car-pick-price { margin-top: auto; padding-top: 0.9rem; }

  /* familiar names our drivers contract to, set as quiet wordmark chips (names
     only, never third party logos, with the no affiliation note right there) */
  .hero-orgs { display: block; width: 100%; max-width: 1100px; margin-top: 0.6rem; text-align: center; }
  .hero-orgs-label {
    margin: 0 0 0.75rem; font-family: var(--font-display); font-weight: 700;
    font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: #93a3ba;
  }
  .hero-orgs-row {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1rem;
  }
  .hero-orgs-row li {
    font-family: var(--font-display); font-weight: 800; font-size: 1.18rem;
    color: rgb(255 255 255 / 0.82); letter-spacing: 0.02em;
    padding: 0.5rem 1.15rem; border-radius: 14px;
    border: 1px solid rgb(255 255 255 / 0.13); background: rgb(255 255 255 / 0.045);
  }
  .hero-orgs-note { margin: 0.8rem 0 0; font-size: 0.8rem; color: #8fa0b8; }
}

@media (min-width: 861px) {
  /* fit the audience card with its new trust strip: everything a notch tighter */
  .hero--story .hero-beat--personas { gap: 0.95rem; }
  .hero-beat--personas .hero-beat-text--brand { font-size: clamp(2.6rem, 3.2vw, 3.4rem); }
  .hero-beat--personas .hero-persona-secondary { font-size: 1.05rem; }
  .hero-beat--personas .hero-persona-lede { font-size: 1.08rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona { padding: 1.5rem 1.5rem 1.6rem; gap: 0.7rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona img { width: 58px; height: 58px; }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong { font-size: 1.32rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc { font-size: 1.04rem; line-height: 1.32; }
  .hero-orgs { margin-top: 0.2rem; }
  .hero-orgs-label { margin-bottom: 0.55rem; }
  .hero-orgs-row li { font-size: 1.02rem; padding: 0.4rem 0.95rem; }
  .hero-orgs-note { margin-top: 0.55rem; font-size: 0.76rem; }
  .hero-qualify-panel { padding: 0.95rem 1.5rem; }
}

/* ============================================================
   DESKTOP OVERHAUL, PASS 3 — cosmetic polish. Fresh-eyes audit
   findings, all gated to min-width 861px so the phone layout is
   byte-for-byte untouched.
   ============================================================ */

/* the closing trust row is desktop only */
.final-trust { display: none; }

@media (min-width: 861px) {

  /* ---------- 1. Cars story: the road stopped running through the copy ----------
     The parallax world (.drive-scene) and the speed streaks were built for
     the stacked phone layout, where they can bleed the full width behind the
     car. In the desktop row layout the copy sits to the right of the car, so
     the dark road band and the dashed gold lane line were driving straight
     through "Insurance, rego, servicing and 24/7 roadside included" and
     "No hidden extras". Keep the generous bleed on the LEFT (off the screen
     edge, where it belongs) and fade the world out before the text column. */
  html.js .cars-beat .drive-scene {
    left: -78%; right: -10%;
    -webkit-mask: linear-gradient(90deg, transparent, #000 13%, #000 78%, transparent);
            mask: linear-gradient(90deg, transparent, #000 13%, #000 78%, transparent);
  }
  html.js .cars-beat .car-card-visual::before {
    inset: 8% -12% 22% -44%;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 76%, transparent);
            mask: linear-gradient(90deg, transparent, #000 14%, #000 76%, transparent);
  }

  /* the CTA was stretching to the full width of the copy column, which read
     as a slab rather than a button. Let it size to its own label. */
  html.js .cars-beat .car-card-body .btn { align-self: flex-start; }

  /* ---------- 2. End-of-term finale: use the width ----------
     Every other beat in this section is an editorial split; the finale was
     left as a single narrow stack, so on a wide monitor it huddled left of
     centre with the whole right half empty. Same split treatment: the promise
     and the headline treatment on the left, the written-terms panel floating over
     the wheel on the right. */
  .totem--story .totem-beat--finale {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
    max-width: 1160px; margin-inline: auto;
    align-content: center; justify-items: start; text-align: left;
    row-gap: 0.55rem;
  }
  .totem--story .totem-beat--finale .totem-hero-icon {
    grid-column: 1; grid-row: 1; width: 132px; height: 132px; margin-bottom: 0.2rem;
  }
  .totem--story .totem-beat--finale .hero-beat-kicker { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .totem--story .totem-beat--finale .totem-finale-head { grid-column: 1; grid-row: 3; text-align: left; }
  .totem--story .totem-beat--finale .totem-finale-stat {
    grid-column: 1; grid-row: 4; align-items: center; gap: 1.3rem; margin-top: 0.35rem;
  }
  .totem--story .totem-beat--finale .totem-finale-label { font-size: 1.08rem; max-width: 24ch; }
  .totem--story .totem-beat--finale .feature-panel {
    grid-column: 2; grid-row: 3; align-self: center; width: 100%;
    padding: 1.5rem 1.7rem; border-radius: 22px;
    background: rgb(255 255 255 / 0.055);
  }
  .totem--story .totem-beat--finale .feature-panel-text strong { font-size: 1.22rem; }
  .totem--story .totem-beat--finale .feature-panel-text span { font-size: 1.04rem; line-height: 1.35; }
  .totem--story .totem-beat--finale .totem-beat-link {
    grid-column: 2; grid-row: 4; align-self: start; margin-top: 1rem;
  }

  /* ---------- 3. Closing screen: something to land on ----------
     The final card centred a headline, a line of copy and a button in a
     1000px viewport, leaving a lot of quiet air top and bottom. Three short
     reassurances give the last thing they read some weight. */
  .final-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem;
    list-style: none; margin: 2.4rem 0 0; padding: 0;
  }
  .final-trust li {
    font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
    color: #dbe4f2; padding: 0.55rem 1.2rem; border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.15);
    background: rgb(255 255 255 / 0.05);
  }

  /* ---------- 4. Footer seam ----------
     The dark closing section fades to a slightly different navy than the
     footer, which drew a visible horizontal step across the page. Blend it. */
  .site-footer { position: relative; }
  .site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -130px; height: 130px;
    background: linear-gradient(to bottom, rgb(9 20 38 / 0), var(--navy-deep));
    pointer-events: none;
  }
}

/* ============================================================
   DESKTOP OVERHAUL, PASS 4 — centring, shared baselines, and
   earning the vertical space. Every rule below sits inside a
   min-width 861px query, so the phone layout cannot move.
   ============================================================ */

/* the deck line under the four steps heading is a desktop addition */
.steps-lede { display: none; }

@media (min-width: 861px) {

  /* ---------- 1. Story card 2, the label had come unstuck ----------
     That beat is a two column grid and the kicker was the only thing in
     row one, so the row stretched it to 165px tall for a single line of
     type and "How it works" ended up floating a long way above its own
     headline. Pinning it to the bottom of its row puts the label back
     against the headline, and lands that pair on the same centre line
     as the three step boxes beside it. */
  .hero-beat--flow:not(.hero-beat--flow-cars) .hero-beat-kicker {
    align-self: end; margin-bottom: 0;
  }

  /* ---------- 2. Story card 3, a wider showroom ----------
     Every beat inherits a 1100px cap, so the four cars were squeezed
     into 940px on a 1440 screen while .hero-car-pick was already asking
     for 1300. Give the cars the width the steps card already takes and
     the metal grows by about a third. */
  .hero--story .hero-beat--flow-cars { max-width: 1300px; }
  .hero-beat--flow-cars .hero-car-pick-row { gap: 1.5rem; }
  .hero-beat--flow-cars .car-pick-photo img { max-width: 320px; }

  /* ---------- 3. Story card 3, one ground line and level bands ----------
     The car crops are 120x80 and 120x90, so the photos came out 14px
     apart in height and every band under them drifted, as far as 39px
     by the spec chips. An aspect locked photo box with the image pinned
     to its bottom edge parks all four cars on one ground line at any
     column width, and floor heights on the name and the blurb hold the
     rest level even when a name or a sentence wraps to an extra line. */
  .hero-beat--flow-cars .car-pick-photo {
    aspect-ratio: 120 / 92; width: 100%;
    display: grid; place-items: end center; margin-bottom: 0.6rem;
  }
  .hero-beat--flow-cars .car-pick-name {
    display: grid; align-content: center;
    min-height: 51px; min-height: 2lh;
  }
  .hero-beat--flow-cars .car-pick-blurb { min-height: 89px; min-height: 4lh; }
  .hero-beat--flow-cars .car-pick-specs { margin-top: auto; padding-top: 0.75rem; }
  .hero-beat--flow-cars .car-pick-price { margin-top: 0; }

  /* ---------- 4. The four steps card, a foot row that reads as one ----------
     The three ticks were pinned hard left and the button hard right, so a
     wide monitor opened a 250px hole in the middle of the closing line.
     Set the whole row as one centred group instead, which costs nothing
     in height and reads as deliberate. */
  .steps-card .steps-card-foot { justify-content: center; gap: 1.2rem 3rem; }
  .steps-card .steps-ticks { flex: 0 1 auto; justify-content: center; }

  /* ---------- 5. The closing screen, room on a short laptop ----------
     A fixed 120px band top and bottom is fine at 900px tall and spills the
     trust chips off a 720px one. The card centres its own content, so a
     viewport aware band changes nothing on a big screen and stops the
     overflow on a small one. */
  .final-cta.final-card { padding-block: clamp(2.5rem, 6.5vh, 7.5rem); }
}

/* Extra content and extra scale only where the viewport can actually pay
   for it. Below 820px tall these two full screen cards are already close
   to full, so nothing here applies and nothing gets clipped. */
@media (min-width: 861px) and (min-height: 820px) {

  /* the four steps card had the heading sitting straight on top of the
     boxes with a lot of quiet space above it. One deck line, built only
     from promises already made further down the same card. */
  .steps-lede {
    display: block; max-width: 60ch;
    font-size: 1.16rem; line-height: 1.45; margin-top: 1rem;
  }
  .steps-card .steps-grid { margin-top: clamp(2.2rem, 4.4vh, 3.6rem); }

  /* the closing line is the loudest thing on the page, so let it be loud */
  .final-cta .type-wall h2 { font-size: clamp(3.5rem, 5vw, 4.9rem); }
  .final-cta .type-wall .lede { font-size: 1.3rem; }
  .final-cta .type-wall-inner { gap: 1.6rem; }
  .final-trust { margin-top: 2.9rem; gap: 1rem; }
  .final-trust li { font-size: 1.05rem; padding: 0.62rem 1.35rem; }
}

/* ============================================================
   DESKTOP OVERHAUL, PASS 5 — the short laptop. Measured at
   1440x720 the showroom card ran 84px past the bottom of its
   own screen with overflow hidden, so the View this car link
   was cut clean off every card. Back solving the box says the
   card needs 884px of viewport to show all of itself.

   Below that the blurb line steps aside and the paddings pull
   in. Above it nothing here applies at all, so the layout that
   was already measured good at 900 and 1080 is untouched.
   Everything sits inside a min-width 861px query, so the phone
   cannot move.
   ============================================================ */

/* the deck line above the closing headline is a desktop addition */
.final-eyebrow { display: none; }

@media (min-width: 861px) and (max-height: 883px) {

  /* the blurb is the one thing on the card that repeats what the
     specs row already says, so it is the right thing to lose when
     the screen is short. Losing it saves about 96px. */
  .hero-beat--flow-cars .car-pick-blurb { display: none; }

  /* and then trim the padding rather than the type, so the card
     still breathes but stops overrunning the screen */
  .hero-beat--flow-cars .car-pick-inner { padding-block: 1.25rem 1.15rem; }
  .hero-beat--flow-cars .car-pick-price { padding-top: 0.35rem; }
  .hero-beat--flow-cars .car-pick-specs { padding-top: 0.5rem; }
  .hero-beat--flow-cars .car-pick-photo { margin-bottom: 0.4rem; }
}

/* on a tall screen the closing card has room for a lead in above
   the headline, which stops the h2 arriving cold out of the dark */
@media (min-width: 861px) and (min-height: 820px) {
  .final-eyebrow { display: block; }
}

/* ==========================================================================
   DESKTOP OVERHAUL PASS 6
   The flow and personas cards sat low in the viewport on every desktop size.
   Cause was leftover state. An earlier pass laid those two cards out from the
   top and reserved a strip of top padding the height of the header, which is
   correct when content starts at the top. Pass 2 put the centring back but the
   reserved strip stayed, so the content centred inside a box with 161px above
   and 47px below and landed about 120px low. Measured over six desktop sizes,
   the header sits fully retracted over the story track, so nothing needs to be
   reserved for it. Symmetric padding matching the beat shorthand brings both
   cards to dead centre and clears the bottom overflow on short screens.
   ========================================================================== */
@media (min-width: 861px) {
  .hero--story .hero-beat--flow,
  .hero--story .hero-beat--personas {
    padding-top: clamp(1.5rem, 4vh, 3rem);
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
  }
}

/* ==========================================================================
   PASS 7 — "BUILT FOR PEOPLE WHO WORK FOR THEMSELVES" REBUILD
   The audience beat was the weakest screen on the homepage and the numbers
   said why. Measured at 1589x1191, 1440x900, 1280x800, 1920x1080 and 390x844:

   1. The beat inherited max-width 1100px, so on a 1589px screen the four
      audience cards were only 217px wide and three of the four titles wrapped
      onto a third line. Every wider cap written for these cards (1300px, then
      1380px) was dead code because of that one ceiling.
   2. The default beat paragraph rule (see the note at the top of the file)
      outscored the personas rules, forcing 1.02rem and a 34ch width on the
      lede, the trust label and the no affiliation note. With no auto margin
      that 34ch box hugged the left, so the label sat at centre 509 and the note
      at 499 while the page centre was 795. That is the visible misalignment.
   3. Content measured 790px tall inside a 1191px beat, so it floated as a thin
      ribbon with 200px of nothing above and below on a tall monitor.
   4. Card heights were ragged on the phone (108 / 89 / 90 / 108).

   The fixes: lift the ceiling for this beat only, let the excluded paragraphs
   size and centre themselves, give the cards real width so every title lands
   on two lines, put the icons on gold plates, turn the contract-to names into a
   proper trust band with a hairline above it, make the eligibility note a
   single centred pill, and scale type and padding up on tall screens so the
   composition fills the height instead of hovering in it.
   Mobile is included this pass at Craig's request, but stays conservative: the
   phone beat has only about 34px of real slack above the thumb bar, so the
   phone gets the plates, the glass and the balance, and the trust band only on
   tall handsets where it has been measured to fit.
   ========================================================================== */

@media (min-width: 861px) {

  /* ---- the ceiling, lifted for this beat only ----
     max() keeps narrow desktops exactly where they were (they are already
     viewport limited, so pulling them to 95vw would have made them narrower)
     and only opens up once there is genuinely room to open up. */
  .hero--story .hero-beat--personas {
    max-width: min(1460px, max(1100px, 95vw));
    gap: clamp(0.8rem, 1.6vh, 1.9rem);
  }

  /* ---- the opening three lines, centred and given a gold anchor ---- */
  .hero-beat--personas .hero-persona-secondary {
    max-width: 48ch; margin-inline: auto; margin-block: 0;
    font-size: clamp(1.05rem, 0.42vw + 0.78rem, 1.24rem);
    line-height: 1.25; color: var(--gold);
  }
  .hero-beat--personas .hero-persona-secondary::before {
    content: ""; display: block; width: 54px; height: 2px;
    margin: 0 auto 0.85rem; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .hero-beat--personas .hero-beat-text--brand {
    font-size: clamp(2.7rem, 3.4vw, 3.9rem);
    letter-spacing: -0.018em; text-wrap: balance;
  }
  .hero-beat--personas .hero-persona-lede {
    max-width: 62ch; margin: 0 auto;
    font-size: clamp(1.05rem, 0.5vw + 0.75rem, 1.22rem);
    line-height: 1.42; color: #dde5f2;
  }

  /* ---- four audience cards with room to breathe ----
     At 1589 this puts each card at about 309px, which is the width where all
     four titles land on two lines instead of three. */
  .hero-beat--personas .hero-personas--detailed {
    max-width: 100%; width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 1.3vw, 1.6rem);
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona {
    padding: 1.5rem 1.3rem 1.6rem; gap: 0.85rem; border-radius: 22px;
    background: linear-gradient(165deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.032) 62%);
    border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 12px 26px rgb(0 0 0 / 0.18);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  /* the icon sits on a gold plate. box-sizing plus padding means the plate is
     the icon's old footprint grown deliberately, not an accidental reflow. */
  .hero-beat--personas .hero-personas--detailed .hero-persona img {
    width: clamp(70px, 5vw, 92px); height: clamp(70px, 5vw, 92px);
    box-sizing: border-box; padding: clamp(9px, 0.75vw, 14px);
    margin-top: 0; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgb(255 176 60 / 0.20), rgb(255 176 60 / 0.06) 70%);
    border: 1px solid rgb(255 176 60 / 0.34);
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong {
    font-size: clamp(1.22rem, 0.55vw + 0.85rem, 1.5rem);
    line-height: 1.14; text-wrap: balance;
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc {
    font-size: clamp(1rem, 0.4vw + 0.72rem, 1.15rem);
    line-height: 1.4; color: #c9d4e4; text-wrap: pretty;
  }

  /* ---- the contract-to names become a trust band, not more list ----
     A hairline above separates it from the cards, and both paragraphs finally
     centre because the default 34ch cap no longer reaches them. */
  .hero-beat--personas .hero-orgs {
    max-width: 100%; width: 100%; margin-top: 0.35rem;
    padding-top: clamp(0.9rem, 1.6vh, 1.5rem);
    border-top: 1px solid rgb(255 255 255 / 0.11);
  }
  .hero-beat--personas .hero-orgs-label {
    max-width: none; margin: 0 auto 0.7rem;
    font-size: 0.84rem; letter-spacing: 0.18em; color: #9aa9c0;
  }
  .hero-beat--personas .hero-orgs-row { gap: 0.6rem 0.7rem; }
  .hero-beat--personas .hero-orgs-row li {
    font-size: clamp(0.95rem, 0.35vw + 0.72rem, 1.1rem);
    padding: 0.42rem 1rem; border-radius: 12px;
    border-color: rgb(255 255 255 / 0.15);
    background: rgb(255 255 255 / 0.05);
  }
  .hero-beat--personas .hero-orgs-note {
    max-width: 74ch; margin: 0.85rem auto 0;
    font-size: 0.79rem; line-height: 1.45; color: #8b9cb4;
  }

  /* ---- the eligibility line as one deliberate pill ----
     980px is the width where the sentence lands on a single line at this size,
     so the panel reads as a closing statement rather than a paragraph in a box. */
  .hero-beat--personas .hero-qualify-panel {
    max-width: min(980px, 100%); margin-inline: auto;
    padding: clamp(0.95rem, 1.5vh, 1.35rem) clamp(1.3rem, 2vw, 2rem);
    border-radius: 999px;
    background: linear-gradient(100deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.035));
    border-color: rgb(255 176 60 / 0.28);
  }
  .hero-beat--personas .hero-qualify-panel > .icon-circle {
    flex: none; width: 58px; height: 58px;
    border-color: rgb(255 176 60 / 0.5); background: rgb(255 176 60 / 0.09);
  }
  .hero-beat--personas .hero-qualify-panel .feature-panel-text { text-align: left; }
  .hero-beat--personas .hero-qualify-panel .feature-panel-text span {
    font-size: clamp(1rem, 0.35vw + 0.78rem, 1.12rem); line-height: 1.4;
  }
}

/* ---- tall monitors: fill the height instead of floating in it ----
   Content measured 790px in a 1191px beat. Scaling the rhythm rather than
   stretching one element keeps the composition intact and brings the dead
   space down to a symmetric margin that reads as deliberate.
   The gate is 1120px, not 1000px. At 1000px this tier was firing on 1080p
   monitors, where the measured content grew to 964px inside a 994px box and
   left 30px of slack, which is a hair from overflowing. 1120px keeps 1080p on
   the base rhythm and hands the generous one to the screens that asked for it,
   Craig's 1191 included. */
@media (min-width: 861px) and (min-height: 1120px) {
  .hero--story .hero-beat--personas { gap: clamp(1.6rem, 3vh, 3rem); }
  .hero-beat--personas .hero-beat-text--brand { font-size: clamp(3.2rem, 4.15vw, 4.6rem); }
  /* Side padding stays lean on purpose. At 1.7rem the fourth title lost its
     second line and went to three, because "independent operators" needs about
     260px and the wider padding left 255. Vertical padding is where this tier
     is allowed to grow. */
  .hero-beat--personas .hero-personas--detailed .hero-persona { padding: 2.2rem 1.35rem 2.35rem; gap: 1rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona img {
    width: clamp(90px, 5.9vw, 112px); height: clamp(90px, 5.9vw, 112px);
    padding: clamp(12px, 0.9vw, 17px);
  }
  .hero-beat--personas .hero-orgs-row li { padding: 0.56rem 1.2rem; }
  .hero-beat--personas .hero-qualify-panel > .icon-circle { width: 70px; height: 70px; }
}

/* ---- phone ----
   The phone beat has about 34px of genuine slack between the last card and the
   sticky thumb bar, so nothing here is allowed to grow the stack. The plates,
   the glass and the wrap balancing all cost nothing, and the small savings from
   tighter padding pay for the gold rule above the opening line. */
@media (max-width: 860px) {
  .hero-beat--personas .hero-persona-secondary {
    margin: 0; font-size: 0.92rem; line-height: 1.25; color: var(--gold);
  }
  .hero-beat--personas .hero-persona-secondary::before {
    content: ""; display: block; width: 46px; height: 2px;
    margin: 0 0 0.6rem; border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
  }
  .hero-beat--personas .hero-beat-text--brand { text-wrap: balance; }
  .hero-beat--personas .hero-personas--detailed { gap: clamp(0.4rem, 1.05vh, 0.6rem); }
  .hero-beat--personas .hero-personas--detailed .hero-persona {
    padding: clamp(0.55rem, 1.45vh, 0.8rem) 0.95rem; border-radius: 18px;
    background: linear-gradient(160deg, rgb(255 255 255 / 0.078), rgb(255 255 255 / 0.03) 65%);
    border-color: rgb(255 255 255 / 0.15);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona img {
    width: 48px; height: 48px; box-sizing: border-box; padding: 7px;
    margin-top: 0; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgb(255 176 60 / 0.22), rgb(255 176 60 / 0.06) 70%);
    border: 1px solid rgb(255 176 60 / 0.32);
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong { text-wrap: balance; }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc {
    color: #cfd9e8; text-wrap: pretty;
  }
}

/* Tall handsets only. Measured slack at 390x844 is about 34px, which will not
   carry a trust band, but at 430x932 and taller there is well over 100px. So the
   contract-to names appear where they have been measured to fit and nowhere
   else. The label and note need their own margin and colour here because the
   desktop versions of those rules live behind min-width 861px. */
@media (max-width: 860px) and (min-height: 900px) {
  .hero-beat--personas .hero-orgs {
    display: block; width: 100%; margin-top: 0.15rem;
    padding-top: 0.7rem; border-top: 1px solid rgb(255 255 255 / 0.11);
    text-align: left;
  }
  .hero-beat--personas .hero-orgs-label {
    margin: 0 0 0.5rem; max-width: none;
    font-family: var(--font-display); font-weight: 700; font-size: 0.7rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: #93a3ba;
  }
  .hero-beat--personas .hero-orgs-row {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.34rem;
  }
  .hero-beat--personas .hero-orgs-row li {
    font-family: var(--font-display); font-weight: 800; font-size: 0.78rem;
    color: rgb(255 255 255 / 0.82); letter-spacing: 0.02em; line-height: 1.35;
    padding: 0.22rem 0.58rem; border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.05);
  }
  .hero-beat--personas .hero-orgs-note {
    margin: 0.4rem 0 0; max-width: none;
    font-size: 0.68rem; line-height: 1.35; color: #8b9cb4;
  }

  /* The band is worth vertical space, so the cards pay for it. Seven names will
     not fit on one row at 430px at any size a person can read, so the row wraps
     to two and the stack has to find about 25px somewhere. Taking it from card
     padding on these screens only is invisible next to squeezing the type. */
  .hero-beat--personas .hero-personas--detailed { gap: 0.42rem; }
  .hero-beat--personas .hero-personas--detailed .hero-persona {
    padding: 0.58rem 0.9rem;
  }
}

/* ==========================================================================
   PASS 7b — SHORT DESKTOPS AND LAPTOPS
   The pass 7 rebuild was measured tall first and it cost height: gold plates
   instead of bare icons, real card padding, the hairline above the trust band
   and the rule above the opening line. On a 1280x800 laptop that pushed the
   stack to 770px inside a 736px content box, and on a 1024x768 window to 756px
   inside 707px. Both were overflowing their own padding.
   Nothing here changes the composition. It is the same beat with the rhythm
   compressed: smaller gaps, tighter cards, a smaller plate, a shorter headline
   and a slimmer pill. Everything stays above the sizes the type was designed
   at, so a 1366x768 laptop gets the same layout Craig sees, just closer knit.
   ========================================================================== */
@media (min-width: 861px) and (max-height: 860px) {
  .hero--story .hero-beat--personas { gap: clamp(0.65rem, 1.45vh, 1.15rem); }

  .hero-beat--personas .hero-persona-secondary {
    font-size: clamp(1rem, 0.3vw + 0.8rem, 1.12rem); line-height: 1.22;
  }
  .hero-beat--personas .hero-persona-secondary::before {
    width: 46px; margin-bottom: 0.6rem;
  }
  .hero-beat--personas .hero-beat-text--brand {
    font-size: clamp(2.3rem, 3.2vw, 3.4rem);
  }
  .hero-beat--personas .hero-persona-lede {
    max-width: 74ch;
    font-size: clamp(1.02rem, 0.35vw + 0.78rem, 1.12rem); line-height: 1.4;
  }

  .hero-beat--personas .hero-personas--detailed { gap: clamp(0.9rem, 1.2vw, 1.4rem); }
  .hero-beat--personas .hero-personas--detailed .hero-persona {
    padding: 1.3rem 1.15rem 1.4rem; gap: 0.75rem; border-radius: 20px;
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona img {
    width: clamp(66px, 4.8vw, 80px); height: clamp(66px, 4.8vw, 80px);
    padding: clamp(9px, 0.65vw, 12px);
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona strong {
    font-size: clamp(1.16rem, 0.48vw + 0.84rem, 1.38rem); line-height: 1.13;
  }
  .hero-beat--personas .hero-personas--detailed .hero-persona-desc {
    font-size: clamp(0.97rem, 0.32vw + 0.75rem, 1.08rem); line-height: 1.36;
  }

  .hero-beat--personas .hero-orgs { padding-top: 0.85rem; }
  .hero-beat--personas .hero-orgs-label { margin-bottom: 0.6rem; font-size: 0.8rem; }
  .hero-beat--personas .hero-orgs-row { gap: 0.5rem 0.6rem; }
  .hero-beat--personas .hero-orgs-row li {
    font-size: clamp(0.92rem, 0.3vw + 0.72rem, 1.02rem); padding: 0.36rem 0.85rem;
  }
  .hero-beat--personas .hero-orgs-note { margin-top: 0.7rem; font-size: 0.77rem; }

  .hero-beat--personas .hero-qualify-panel {
    padding: 0.85rem clamp(1.2rem, 1.9vw, 1.7rem);
  }
  .hero-beat--personas .hero-qualify-panel > .icon-circle { width: 54px; height: 54px; }
  .hero-beat--personas .hero-qualify-panel .feature-panel-text span {
    font-size: clamp(0.97rem, 0.3vw + 0.75rem, 1.07rem); line-height: 1.36;
  }
}