/**
 * Blade Boss: Home (pass 39, the home port, core 8 page 8 of 8, D-300). Pairs with templates/home-v2.php and
 * assets/js/home-v2.js. Generated from the bench home by tools/port-css.py, then kept by hand.
 * On the P4 token contract: the page's own names are aliases of the tokens below, so light and dark follow
 * <html data-theme> like every other page. Every rule is scoped under .hm. Stock emerald is gone (D-299).
 */
body.bb-page-home .bb-main { padding-top: 0; }
body.bb-page-home { background: var(--bg); }
.hm {
  --bg-2: var(--site-bg-deep); --card: var(--surface); --card-2: var(--surface-2);
  --glass-2: var(--site-glass-2);
  --tx: var(--ink); --tx-2: var(--ink-2); --tx-3: var(--ink-3);
  --green: var(--brand-ink); --green-2: var(--brand-ink); --forest: var(--brand); --forest-2: var(--brand-2);
  --orange: var(--warm); --orange-2: #E86A2E; --amber: #F59E0B; --red: #EF4444;
  --glow-green: var(--site-glow);
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-disp: var(--site-font-disp); --font-body: var(--site-font-body);
  --w-disp: var(--site-w-disp); --track-disp: var(--site-track-disp);
  --gut-l: var(--site-gut-l); --gut-r: var(--site-gut-r, max(18px, env(safe-area-inset-right, 0px))); --maxw: var(--site-max);
  --navh: var(--site-nav-h, calc(74px + env(safe-area-inset-top, 0px)));
  --hl: var(--brand-ink); --hl-glow: rgba(91, 212, 147, 0.5);
  --cc-svc: var(--site-chart-svc); --cc-bag: var(--site-chart-bag); --cc-plan: var(--site-chart-plan);
  --cc-svc-t: var(--site-chart-svc-t); --cc-bag-t: var(--site-chart-bag-t);
  position: relative; isolation: isolate; overflow-x: clip; color: var(--tx); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased;
}
/* light: small grey text uses ink-2 (ink-3 is for large text only in light, P4 R1) */
:root[data-theme="light"] .hm { --tx-3: var(--ink-2); --hl-glow: transparent; }
.hm h1, .hm h2, .hm h3 { margin: 0; color: inherit; }
.hm p, .hm ul { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Headline highlight: GREEN (D-211, the live site's green-bright glow); orange stays for the action buttons.
   The orange alt stays on the toggle until Chris has seen green on his phone. */
.hm .hl { color: var(--hl); text-shadow: 0 0 24px var(--hl-glow); }
:root[data-theme="light"] .hm .hero .hl, :root[data-theme="light"] .hm .sec .hl { color: var(--forest); text-shadow: none; }
/* 7.7:1 on the light surface */
/* D-211: the site keeps Montserrat + Open Sans; Barlow Semi Condensed numbers are shared with the app.
   At build: self-hosted, subset, only the display weight preloaded, font-display swap. */
.hm * { box-sizing: border-box; margin: 0; }
/* no scroll anchoring: Chrome moved the page 12 to 24 px on its own around the sticky stage (pass 15 bench) */
.hm .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.hm h1, .hm h2, .hm h3 { font-family: var(--font-disp); }
.hm img { max-width: 100%; display: block; }
.hm a { color: inherit; }
.hm button, .hm input { font: inherit; color: inherit; }
.hm .ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(90% 60% at 70% -10%, rgba(30, 94, 52, 0.34) 0%, transparent 60%), radial-gradient(60% 50% at 0% 40%, rgba(91, 212, 147, 0.07) 0%, transparent 60%), radial-gradient(70% 60% at 100% 90%, rgba(245, 120, 66, 0.05) 0%, transparent 55%), var(--bg); }
.hm .ambient::after { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 85%); -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 85%); }
:root[data-theme="light"] .hm .ambient { background: radial-gradient(90% 60% at 70% -10%, rgba(30, 94, 52, 0.13) 0%, transparent 60%), radial-gradient(60% 50% at 0% 45%, rgba(91, 212, 147, 0.06) 0%, transparent 60%), radial-gradient(70% 60% at 100% 90%, rgba(245, 120, 66, 0.07) 0%, transparent 55%), var(--bg); }
:root[data-theme="light"] .hm .ambient::after { background-image: linear-gradient(rgba(14,40,22,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,40,22,0.05) 1px, transparent 1px); }
/* ════════ AB SLOT SWAP RULES (AB-SPEC v1.1 §3.7) · !important both ways ════════ */
html[data-bbx-home-hero-format="b"] .hm [data-bb-slot="home.hero.format"] > [data-bb-v="a"], html[data-bbx-home-proof-order="b"] .hm [data-bb-slot="home.proof.order"] > [data-bb-v="a"] { display: none !important; }
html[data-bbx-home-hero-format="b"] .hm [data-bb-slot="home.hero.format"] > [data-bb-v="b"], html[data-bbx-home-proof-order="b"] .hm [data-bb-slot="home.proof.order"] > [data-bb-v="b"] { display: block !important; }
html[data-bbx-home-hero-headline="b"] .hm [data-bb-slot="home.hero.headline"] > [data-bb-v]:not([data-bb-v="b"]), html[data-bbx-home-hero-headline="c"] .hm [data-bb-slot="home.hero.headline"] > [data-bb-v]:not([data-bb-v="c"]), html[data-bbx-home-hero-headline="d"] .hm [data-bb-slot="home.hero.headline"] > [data-bb-v]:not([data-bb-v="d"]) { display: none !important; }
html[data-bbx-home-hero-headline="b"] .hm [data-bb-slot="home.hero.headline"] > [data-bb-v="b"], html[data-bbx-home-hero-headline="c"] .hm [data-bb-slot="home.hero.headline"] > [data-bb-v="c"], html[data-bbx-home-hero-headline="d"] .hm [data-bb-slot="home.hero.headline"] > [data-bb-v="d"] { display: inline !important; }
html[data-bbx-home-hero-sub="b"] .hm [data-bb-slot="home.hero.sub"] > [data-bb-v="a"], html[data-bbx-home-hero-cta="b"] .hm [data-bb-slot="home.hero.cta"] > [data-bb-v="a"], html[data-bbx-nav-cta="b"] .hm [data-bb-slot="nav.cta"] > [data-bb-v="a"] { display: none !important; }
html[data-bbx-home-hero-sub="b"] .hm [data-bb-slot="home.hero.sub"] > [data-bb-v="b"], html[data-bbx-home-hero-cta="b"] .hm [data-bb-slot="home.hero.cta"] > [data-bb-v="b"], html[data-bbx-nav-cta="b"] .hm [data-bb-slot="nav.cta"] > [data-bb-v="b"] { display: inline !important; }
/* ════════ BUTTONS ════════ */
.hm .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 14px;
  font: 800 0.92rem/1 var(--font-disp); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: none; overflow: hidden; white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background 0.25s ease; }
.hm .btn .bicon { width: 17px; height: 17px; flex: none; transition: transform 0.3s var(--ease); }
.hm .btn:hover .bicon { transform: translateX(4px); }
.hm .btn-orange { color: var(--warm-fg); background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 100%); box-shadow: 0 10px 30px rgba(245, 120, 66, 0.35), inset 0 1px 0 rgba(255,255,255,0.22); }
.hm .btn-orange::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-18deg); transition: left 0.56s ease; }
.hm .btn-orange:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(245, 120, 66, 0.48), inset 0 1px 0 rgba(255,255,255,0.3); }
.hm .btn-orange:hover::after { left: 160%; }
.hm .btn-orange:active { transform: translateY(0); }
.hm .btn-ghost { color: var(--tx-2); background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); box-shadow: none; }
:root[data-theme="light"] .hm .btn-ghost { background: rgba(14,40,22,0.05); }
.hm .btn-ghost:hover { color: var(--tx); background: rgba(255,255,255,0.1); }
:root[data-theme="light"] .hm .btn-ghost:hover { background: rgba(14,40,22,0.09); }
.hm .btn:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; }
/* ════════ THE DESCENT (home.hero.format arm a) ════════ */
/* assisted scroll (D-237): a tall track (script sets its length in --track) with a sticky one-screen stage; native scroll is never
   blocked. Without script, in reduced motion and in low data the track is one screen and the stage is the still. The track's own
   dark ground covers the strip a phone's collapsing address bar opens under a 100svh stage. */
.hm .descent { position: relative; height: 100vh; height: 100svh; background: #0C1219; }
html.film-track .hm .descent { height: calc(100vh + var(--track, 0px)); height: calc(100svh + var(--track, 0px)); }
.hm .stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #0C1219; color: #FFF; }
html.film-track .hm .stage { position: -webkit-sticky; position: sticky; top: 0; }
.hm .stage picture, .hm .stage picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm .stage picture img { object-fit: cover; object-position: 50% 50%; }
.hm .stage[data-set="p"] picture img { object-position: 50% 45%; }
.hm .stage video.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.hm .stage video.film.show { opacity: 1; }
.hm .skip { position: absolute; z-index: 6; right: var(--gut-r); top: calc(var(--navh) + 14px); min-height: 44px; padding: 0 14px 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(10,15,21,0.72); border: 1px solid rgba(255,255,255,0.3); color: #FFF; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 700 0.72rem/1 var(--font-disp); letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.3s ease, transform 0.4s var(--ease); }
.hm .skip.on { opacity: 1; transform: none; pointer-events: auto; }
.hm .skip svg { width: 14px; height: 14px; }
.hm .skip:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }
html.film-skip .hm .realtag { opacity: 0; }
/* Skip takes the REC pill's spot while it is offered */
.hm .realtag { transition: opacity 0.3s ease; }
.hm .filmbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--green-2), var(--orange)); opacity: 0.9; pointer-events: none; }
.hm .stage svg.ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hm .zone-label rect { fill: rgba(10, 15, 21, 0.8); stroke-width: 1.2; }
.hm .zone-label text { font: 700 15px var(--font-body); fill: #FFF; }
.hm .zone-label .k { font: 700 12px var(--font-num); letter-spacing: 0.14em; }
.hm .scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,15,21,0.55) 0%, rgba(10,15,21,0) 22%, rgba(10,15,21,0) 46%, rgba(10,15,21,0.86) 100%); }
.hm .beats { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gut-r) calc(30px + env(safe-area-inset-bottom, 0px) + var(--navtop, 0px)) var(--gut-l); }
/* --navtop is explorer chrome only; 0 on the live site */
.hm .beats-in { position: relative; max-width: var(--maxw); margin: 0 auto; min-height: 15em; }
.hm .beat { position: absolute; left: 0; bottom: 0; max-width: 700px; opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.7s var(--ease); pointer-events: none; }
.hm .beat.on { opacity: 1; transform: none; pointer-events: auto; }
.hm .beat .k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 700 0.68rem/1.3 var(--font-disp); letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-2); }
:root[data-theme="light"] .hm .beat .k { color: #5BD493; }
.hm .beat .k i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; flex: none; }
.hm .beat h1, .hm .beat h2 { font: var(--w-disp) clamp(2rem, 6vw, 4rem)/1.02 var(--font-disp); letter-spacing: var(--track-disp); text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,0.45); }
.hm .beat h1 { font-size: clamp(1.95rem, 5.8vw, 3.9rem); }
.hm .beat p { margin-top: 12px; color: rgba(255,255,255,0.8); font-size: clamp(0.98rem, 1.6vw, 1.12rem); max-width: 50ch; text-shadow: 0 1px 14px rgba(0,0,0,0.6); }
.hm .beat .cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.hm .beat .micro { font: 700 0.68rem/1.4 var(--font-disp); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.hm .realtag { position: absolute; right: var(--gut-r); top: calc(var(--navh) + 14px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: rgba(10,15,21,0.7); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 0.72rem/1.2 var(--font-body); color: rgba(255,255,255,0.8); }
.hm .realtag i { width: 7px; height: 7px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 8px #EF4444; }
@media (max-width: 700px) {
.hm .realtag { display: none; }
}
.hm .hint { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; font: 700 0.66rem/1 var(--font-disp); letter-spacing: 0.22em; color: rgba(255,255,255,0.85); text-transform: uppercase; transition: opacity 0.4s ease; text-shadow: 0 1px 10px rgba(0,0,0,0.7); pointer-events: none; }
.hm .hint span { width: 22px; height: 34px; border: 2px solid rgba(255,255,255,0.7); border-radius: 12px; position: relative; }
.hm .hint span::after { content: ''; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #FFF; animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
html.low-data .hm .hint { display: none; }
/* the landing (arm a's address field) */
.hm .land { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; color: #FFF; }
.hm .land img.poster, .hm .land video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm .land video { opacity: 0; transition: opacity 0.6s ease; }
.hm .land video.ready { opacity: 1; }
.hm .land .scrim2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,21,0.9) 0%, rgba(10,15,21,0.45) 40%, rgba(10,15,21,0.6) 70%, rgba(10,15,21,0.95) 100%); }
.hm .land-in { position: relative; z-index: 2; width: 100%; max-width: 760px; margin: 0 auto; padding: calc(var(--navh) + 40px) var(--gut-r) 80px var(--gut-l); text-align: center; display: grid; justify-items: center; gap: 18px; }
.hm .land h2 { font: var(--w-disp) clamp(2.4rem, 8vw, 5rem)/1 var(--font-disp); letter-spacing: var(--track-disp); text-wrap: balance; }
.hm .land p { color: rgba(255,255,255,0.8); font-size: clamp(1rem, 1.8vw, 1.15rem); max-width: 48ch; }
.hm .land .scanform { background: rgba(22, 32, 44, 0.6); box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 80px rgba(30,94,52,0.25); }
.hm .land .scanform input { color: #FFF; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.hm .land .scanform input::placeholder { color: rgba(255,255,255,0.55); }
.hm .land .meta { font: 700 0.68rem/1.5 var(--font-disp); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); text-wrap: balance; }
.hm .land .toast { min-height: 1.4em; font-size: 0.86rem; color: #5BD493; overflow-wrap: anywhere; }
.hm .addr-wrap { position: relative; flex: 1 1 230px; min-width: 0; display: flex; }
.hm .addr-wrap input { flex: 1 1 auto; width: 100%; }
.hm .sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: none; border-radius: 14px; overflow: hidden; background: rgba(12, 18, 25, 0.96); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 50px rgba(0,0,0,0.5); text-align: left; }
:root[data-theme="light"] .hm .hero .sugg { background: #FFF; border-color: var(--line-2); box-shadow: 0 18px 44px rgba(14,40,22,0.16); color: var(--tx); }
.hm .sugg.open { display: block; }
.hm .sugg div { padding: 11px 14px; font: 500 0.9rem/1.35 var(--font-body); color: #FFF; border-top: 1px solid rgba(255,255,255,0.08); cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; }
:root[data-theme="light"] .hm .hero .sugg div { color: var(--tx); border-color: var(--line); }
.hm .sugg div:first-child { border-top: 0; }
.hm .sugg div:hover, .hm .sugg div[aria-selected="true"] { background: rgba(91,212,147,0.12); }
.hm .sugg .st { font: 600 0.74rem/1.4 var(--font-body); color: rgba(255,255,255,0.6); cursor: default; }
:root[data-theme="light"] .hm .hero .sugg .st { color: var(--tx-3); }
.hm .sugg .st:hover { background: none; }
.hm .sugg svg { width: 14px; height: 14px; flex: none; opacity: 0.7; }
@media (max-height: 520px) and (orientation: landscape) {
.hm .beat h1, .hm .beat h2 { font-size: clamp(1.35rem, 6vh, 1.9rem); }
.hm .beat p { display: none; }
.hm .beat .k { margin-bottom: 6px; }
.hm .beat .cta { margin-top: 12px; }
.hm .beat .cta .btn { min-height: 44px; }
.hm .beats-in { min-height: 7em; }
.hm .beats { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.hm .realtag, .hm .hint { display: none; }
.hm .land-in { padding-top: calc(var(--navh) + 10px); padding-bottom: 40px; gap: 12px; }
.hm .land h2 { font-size: clamp(1.8rem, 9vh, 2.6rem); }
}
/* ════════ HERO (home.hero.format arm b: the scan card) ════════ */
.hm .hero { position: relative; padding: calc(var(--navh) + clamp(24px, 5vh, 70px)) 0 56px; }
.hm .hero-grid { display: grid; gap: 40px; align-items: center; }
.hm .hero-copy { min-width: 0; }
.hm .scanstage { perspective: 1400px; max-width: 560px; width: 100%; margin: 0 auto; }
@media (min-width: 980px) {
.hm .hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: 48px; }
.hm .scanstage { max-width: none; margin: 0; }
}
@media (max-height: 560px) and (orientation: landscape) {
.hm .hero { padding-top: calc(var(--navh) + 12px); }
.hm .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; }
.hm .scanstage { max-width: 420px; }
}
.hm .chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: rgba(91, 212, 147, 0.10); border: 1px solid rgba(91, 212, 147, 0.3);
  font: 700 0.7rem/1 var(--font-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-2); margin-bottom: 22px; }
.hm .chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; font-style: normal; }
.hm .hero h1 { font-size: clamp(2.35rem, 6.8vw, 4.4rem); font-weight: var(--w-disp); line-height: 1.02; letter-spacing: var(--track-disp); text-wrap: balance; }
.hm .hero h1 .hw { display: inline-block; }
.hm .hero h1 .hw i { display: inline-block; font-style: normal; will-change: transform, opacity; }
.hm .hero-sub { font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.65; color: var(--tx-2); max-width: 52ch; margin: 22px 0 28px; }
.hm .scanform { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 560px; padding: 10px; border-radius: 20px; background: var(--glass-2); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05), var(--glow-green); }
:root[data-theme="light"] .hm .hero .scanform { box-shadow: 0 18px 44px rgba(14,40,22,0.14), inset 0 1px 0 rgba(255,255,255,0.9), var(--glow-green); }
.hm .scanform input { flex: 1 1 230px; min-width: 0; min-height: 54px; padding: 0 18px; font: 600 16px/1.3 var(--font-body); color: var(--tx); background: rgba(255,255,255,0.045); border: 1px solid var(--line-2); border-radius: 14px; outline: none; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
:root[data-theme="light"] .hm .hero .scanform input { background: rgba(14,40,22,0.04); }
.hm .scanform input::placeholder { color: var(--tx-3); font-weight: 500; }
.hm .scanform input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(91,212,147,0.16); }
:root[data-theme="light"] .hm .hero .scanform input:focus { background: #FFF; }
.hm .scanform .btn { flex: 0 0 auto; min-height: 54px; }
@media (max-width: 480px) {
.hm .scanform .btn { flex: 1 1 100%; }
}
.hm .hero-cred { margin-top: 20px; font-size: 0.88rem; line-height: 1.6; color: var(--tx-2); max-width: 54ch; }
.hm .hero-cred b { font-family: var(--font-num); font-weight: 700; font-size: 1.05em; color: var(--tx); }
.hm .hero-cred .src { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--tx-3); }
.hm .form-meta { margin: 14px 0 0; font: 700 0.72rem/1 var(--font-disp); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); }
.hm .scancard { position: relative; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #131D28 0%, #111A24 60%, #0C1219 100%); border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03) inset, var(--glow-green); transition: transform 0.42s var(--ease), box-shadow 0.3s ease; color: #FFF; }
:root[data-theme="light"] .hm .scancard { box-shadow: 0 32px 80px rgba(14,40,22,0.3), var(--glow-green); }
.hm .scancard.is-tilting { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 80ms linear; }
.hm .scan-sheen { position: absolute; inset: -40%; z-index: 6; pointer-events: none; background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,0.06) 50%, transparent 58%); transform: translateX(-60%); animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { transform: translateX(-60%); } 50% { transform: translateX(60%); } }
.hm .scan-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.hm .scan-head b { font: 800 0.78rem/1 var(--font-disp); letter-spacing: 0.14em; text-transform: uppercase; }
.hm .scan-head .st { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 700 0.68rem/1 var(--font-num); letter-spacing: 0.12em; color: #5BD493; text-transform: uppercase; }
.hm .scan-head .st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: blink 1.6s ease-in-out infinite; font-style: normal; }
@keyframes blink { 50% { opacity: 0.35; } }
.hm .scan-view { position: relative; aspect-ratio: 4 / 3.1; max-height: 56vh; }
.hm .scan-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hm .scan-chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; background: rgba(10, 15, 21, 0.78); border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 0.72rem/1.2 var(--font-body); color: #FFF; box-shadow: 0 10px 26px rgba(0,0,0,0.45); opacity: 0; transform: translateY(8px) scale(0.94); }
.hm .scan-chip.in { opacity: 1; transform: none; transition: opacity 0.35s ease, transform 0.5s var(--ease-back); }
.hm .scan-chip .k { font-family: var(--font-num); font-weight: 700; }
.hm .scan-chip.m { border-color: rgba(91,212,147,0.5); }
.hm .scan-chip.m .s { color: #5BD493; }
.hm .scan-chip.e { border-color: rgba(245,158,11,0.5); }
.hm .scan-chip.e .s { color: #F59E0B; }
.hm .scan-chip .s { font-weight: 700; }
.hm .scan-read { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,0.1); }
.hm .scan-read > div { padding: 13px 10px 14px; text-align: center; border-left: 1px solid rgba(255,255,255,0.1); }
.hm .scan-read > div:first-child { border-left: 0; }
.hm .scan-read .v { font: 700 clamp(1.05rem, 2.6vw, 1.35rem)/1.1 var(--font-num); font-variant-numeric: tabular-nums; }
.hm .scan-read .l { margin-top: 3px; font: 600 0.62rem/1.3 var(--font-disp); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.hm .scan-note { margin-top: 12px; text-align: center; font: 500 0.75rem/1.5 var(--font-body); color: var(--tx-3); }
.hm .triad { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hm .tchip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 13px; border-radius: 999px; font: 700 0.7rem/1 var(--font-disp); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid; background: rgba(255,255,255,0.03); }
.hm .tchip i { font-style: normal; font-family: var(--font-num); }
.hm .tchip.m { color: var(--green-2); border-color: rgba(91,212,147,0.4); }
.hm .tchip.e { color: var(--amber); border-color: rgba(245,158,11,0.4); }
.hm .tchip.c { color: #7DD3FC; border-color: rgba(125,211,252,0.4); }
.hm .tchip.p { color: #FCA5A5; border-color: rgba(252,165,165,0.4); }
:root[data-theme="light"] .hm .tchip { background: rgba(255,255,255,0.6); }
:root[data-theme="light"] .hm .tchip.e { color: #92610B; border-color: rgba(146,97,11,0.4); }
:root[data-theme="light"] .hm .tchip.c { color: #0369A1; border-color: rgba(3,105,161,0.4); }
:root[data-theme="light"] .hm .tchip.p { color: #B91C1C; border-color: rgba(185,28,28,0.4); }
/* ════════ SECTIONS ════════ */
.hm .sec { position: relative; padding: clamp(56px, 10vh, 110px) 0 0; }
.hm .sec-head { position: relative; max-width: 760px; margin-bottom: clamp(28px, 5vh, 48px); }
.hm .sec-k { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font: 700 0.68rem/1 var(--font-disp); letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-2); }
.hm .sec-k::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green-2), transparent); }
.hm .sec h2 { font-size: clamp(1.7rem, 4.4vw, 2.7rem); font-weight: var(--w-disp); letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
.hm .sec-sub { margin-top: 12px; color: var(--tx-2); font-size: 1.02rem; max-width: 56ch; }
.hm .sample { display: inline-block; font: 600 10px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 0.06em; color: var(--tx-3); border: 1px dashed var(--line-2); border-radius: 6px; padding: 4px 7px; vertical-align: middle; }
.hm .ghost { position: absolute; z-index: -1; top: -0.28em; left: -0.04em; font: var(--w-disp) clamp(4.2rem, 16vw, 11.5rem)/1 var(--font-disp); letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.045); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.11); pointer-events: none; user-select: none; white-space: nowrap; }
:root[data-theme="light"] .hm .ghost { color: rgba(14, 40, 22, 0.05); -webkit-text-stroke: 1px rgba(14, 40, 22, 0.13); }
.hm .gcard { position: relative; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05); transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease; }
:root[data-theme="light"] .hm .gcard { box-shadow: 0 18px 44px rgba(14,40,22,0.1), inset 0 1px 0 rgba(255,255,255,0.85); }
.hm .gcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 212, 147, 0.11), transparent 65%); }
:root[data-theme="light"] .hm .gcard::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(30, 94, 52, 0.08), transparent 65%); }
@media (hover: hover) and (pointer: fine) {
.hm .gcard:hover::after { opacity: 1; }
}
.hm a.gcard { text-decoration: none; color: inherit; display: block; }
.hm a.gcard:hover { transform: translateY(-5px); border-color: rgba(91,212,147,0.35); box-shadow: 0 34px 80px rgba(0,0,0,0.45), 0 0 40px rgba(91,212,147,0.12), inset 0 1px 0 rgba(255,255,255,0.07); }
:root[data-theme="light"] .hm a.gcard:hover { box-shadow: 0 28px 64px rgba(14,40,22,0.18), 0 0 40px rgba(91,212,147,0.1), inset 0 1px 0 rgba(255,255,255,0.9); }
.hm .proofcard { padding: clamp(24px, 4vw, 40px); }
.hm .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 480px) {
.hm .proof-grid { gap: 10px; }
}
.hm .pnum { font: 700 clamp(1.8rem, 6vw, 3.4rem)/1 var(--font-num); letter-spacing: -0.01em; color: var(--tx); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(91, 212, 147, 0.35); }
:root[data-theme="light"] .hm .pnum { text-shadow: none; }
.hm .plabel { margin-top: 7px; font: 600 0.74rem/1.4 var(--font-disp); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-3); }
.hm .proof-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.hm .proof-src { font-size: 0.86rem; color: var(--tx-2); }
.hm .cap-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; margin-left: auto; border-radius: 999px; background: linear-gradient(135deg, var(--orange), var(--orange-2)); font: 800 0.7rem/1 var(--font-disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-fg); box-shadow: 0 8px 22px rgba(245,120,66,0.35); }
.hm .steps { position: relative; display: grid; gap: 18px; }
@media (min-width: 760px) {
.hm .steps { grid-template-columns: repeat(3, 1fr); }
}
.hm .step { padding: 26px 24px 28px; overflow: hidden; }
.hm .step .n { font: 700 3rem/1 var(--font-num); color: transparent; -webkit-text-stroke: 1.5px rgba(91, 212, 147, 0.55); }
:root[data-theme="light"] .hm .step .n { -webkit-text-stroke: 1.5px rgba(30,94,52,0.6); }
.hm .step h3 { margin: 12px 0 8px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.hm .step p { color: var(--tx-2); font-size: 0.93rem; line-height: 1.6; }
.hm .step .bar { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--green), transparent); opacity: 0.7; }
.hm .marq { margin-top: clamp(40px, 7vh, 64px); padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.hm .marq::before, .hm .marq::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.hm .marq::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.hm .marq::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.hm .marq-track { display: flex; gap: 44px; width: max-content; animation: marq 36s linear infinite; }
.hm .marq-track.js-run { animation: none; }
@keyframes marq { to { transform: translateX(-50%); } }
.hm .marq-track span { display: inline-flex; align-items: center; gap: 44px; font: 700 0.85rem/1 var(--font-disp); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.hm .marq-track i { font-style: normal; color: var(--green-2); opacity: 0.7; }
.hm .guides { display: grid; gap: 16px; }
@media (min-width: 760px) {
.hm .guides { grid-template-columns: repeat(3, 1fr); }
}
.hm .guide { padding: 22px 22px 24px; display: grid; gap: 12px; align-content: start; }
.hm .gtop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hm .gnum { font: 700 0.72rem/1 var(--font-num); letter-spacing: 0.1em; color: var(--green-2); background: rgba(91,212,147,0.1); border: 1px solid rgba(91,212,147,0.3); border-radius: 8px; padding: 5px 9px; }
.hm .gcat { font: 600 0.74rem/1 var(--font-body); color: var(--tx-3); }
.hm .gstart { margin-left: auto; font: 800 0.6rem/1 var(--font-disp); letter-spacing: 0.1em; text-transform: uppercase; background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: var(--warm-fg); border-radius: 999px; padding: 6px 10px; box-shadow: 0 6px 16px rgba(245,120,66,0.3); }
.hm .gtitle { font: 800 1.1rem/1.3 var(--font-disp); letter-spacing: -0.01em; }
.hm .gspecs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font: 600 0.78rem/1.3 var(--font-body); color: var(--tx-2); }
.hm .gdiff { display: inline-flex; gap: 3px; align-items: center; }
.hm .gdiff i { width: 9px; height: 13px; border-radius: 2px; background: rgba(255,255,255,0.1); }
:root[data-theme="light"] .hm .gdiff i { background: rgba(14,40,22,0.1); }
.hm .gdiff i.on { background: var(--green); box-shadow: 0 0 8px rgba(91,212,147,0.5); }
.hm .gdiff b { margin-left: 5px; font-family: var(--font-num); color: var(--tx-2); }
.hm .duo { display: grid; gap: 16px; }
@media (min-width: 960px) {
.hm .duo { grid-template-columns: 0.92fr 1.08fr; align-items: start; }
}
.hm .quote { padding: 26px; display: grid; gap: 16px; }
.hm .qhead { display: flex; align-items: center; gap: 13px; }
.hm .qav { width: 50px; height: 50px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--forest), var(--forest-2)); display: grid; place-items: center; font: 800 1rem/1 var(--font-disp); color: #FFF; box-shadow: 0 8px 20px rgba(30,94,52,0.4); }
.hm .qname { font: 800 1rem/1.25 var(--font-disp); }
.hm .qmeta { font: 500 0.82rem/1.4 var(--font-body); color: var(--tx-2); }
.hm .qreal { margin-left: auto; white-space: nowrap; font: 700 0.64rem/1 var(--font-disp); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-2); background: rgba(91,212,147,0.1); border: 1px solid rgba(91,212,147,0.35); border-radius: 999px; padding: 7px 11px; }
.hm .qbody { font-size: 1.02rem; line-height: 1.7; color: var(--tx-3); font-style: italic; }
.hm .qbody.pending { font-style: normal; font-size: 0.92rem; line-height: 1.6; color: var(--tx-3); border: 1px dashed var(--line-2); border-radius: 12px; padding: 12px 14px; }
.hm .qreal.past { color: var(--tx-2); background: rgba(255,255,255,0.06); border-color: var(--line-2); }
:root[data-theme="light"] .hm .qreal.past { background: rgba(14,40,22,0.05); }
.hm .qbody .qtag { font-style: normal; }
.hm .qtag { display: block; margin-bottom: 6px; font: 700 0.62rem/1.3 var(--font-num); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3); }
.hm .cost { display: grid; gap: 14px; }
.hm .ctile { padding: 20px 22px; display: grid; gap: 4px; }
.hm .ctile .what { font: 600 0.86rem/1.4 var(--font-body); color: var(--tx-2); }
.hm .ctile .range { font: 700 clamp(1.4rem, 3vw, 1.8rem)/1.15 var(--font-num); font-variant-numeric: tabular-nums; }
.hm .ctile .src { font: 500 0.75rem/1.4 var(--font-body); color: var(--tx-3); }
.hm .wks { padding: 20px 22px; display: grid; gap: 12px; }
.hm .wks label { font: 700 0.86rem/1.4 var(--font-body); }
.hm .wks-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hm .wks input { flex: 1 1 150px; min-width: 0; min-height: 50px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 13px; background: rgba(255,255,255,0.045); color: var(--tx); font: 700 16px/1 var(--font-num); outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
:root[data-theme="light"] .hm .wks input { background: rgba(14,40,22,0.04); }
.hm .wks input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(91,212,147,0.16); }
.hm .wks-out { font: 500 0.88rem/1.6 var(--font-body); color: var(--tx-2); min-height: 1.5em; }
.hm .wks-out b { font-family: var(--font-num); color: var(--tx); }
.hm .ba-frame { position: relative; margin: 0 auto; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 100px rgba(0,0,0,0.5); aspect-ratio: 16 / 10; max-height: 70vh; touch-action: pan-y; }
:root[data-theme="light"] .hm .ba-frame { box-shadow: 0 30px 80px rgba(14,40,22,0.22); }
/* phones: the photos are landscape (before 4:3, after 16:9), so the slider is landscape too, edge to edge, same 16:10 shape as desktop (Chris, Oct 16) */
@media (max-width: 760px) {
.hm .ba-frame { aspect-ratio: 16 / 10; max-height: none; margin-left: calc(-1 * var(--gut-l)); margin-right: calc(-1 * var(--gut-r)); border-radius: 0; border-left: 0; border-right: 0; }
}
@media (max-height: 500px) and (orientation: landscape) {
.hm .ba-frame { max-height: 82vh; }
}
.hm .ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
/* after sits on the RIGHT of the line, like the live slider; the image is pinned to the frame's right edge so it never shifts */
.hm .ba-clip { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); right: 0; overflow: hidden; }
.hm .ba-clip img { left: auto; right: 0; max-width: none; }
/* the global img max-width would squeeze it to the clip and re-crop it; it must stay frame-sized so the reveal is a true wipe */
.hm .ba-note .ruby { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green); box-shadow: 0 0 14px rgba(91,212,147,0.3); }
.hm .ba-line { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; margin-left: -1px; background: rgba(255,255,255,0.9); box-shadow: 0 0 20px rgba(0,0,0,0.5); cursor: ew-resize; touch-action: none; }
.hm .ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(10, 15, 21, 0.82); border: 1.5px solid rgba(255,255,255,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; color: #FFF; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 30px rgba(91,212,147,0.25); cursor: ew-resize; touch-action: none; }
.hm .ba-knob:focus-visible { outline: 3px solid var(--green-2); outline-offset: 3px; }
.hm .ba-knob svg { width: 22px; height: 22px; }
.hm .ba-tag { position: absolute; top: 14px; z-index: 3; padding: 7px 12px; border-radius: 999px; font: 800 0.64rem/1 var(--font-disp); letter-spacing: 0.14em; text-transform: uppercase; background: rgba(10, 15, 21, 0.72); color: #FFF; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hm .ba-tag.b { left: 14px; }
.hm .ba-tag.a { right: 14px; color: #5BD493; border-color: rgba(91,212,147,0.5); }
.hm .ba-note { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; text-align: center; font: 500 0.8rem/1.5 var(--font-body); color: var(--tx-3); }
.hm .flips { display: grid; gap: 16px; margin-top: clamp(24px, 4vh, 40px); }
@media (min-width: 760px) {
.hm .flips { grid-template-columns: repeat(3, 1fr); }
}
.hm .flip { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; border: 1px solid var(--line); padding: 0; background: none; text-align: left; aspect-ratio: 5 / 7; max-height: 72vh; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.4); transition: transform 0.35s var(--ease), box-shadow 0.35s ease; }
:root[data-theme="light"] .hm .flip { box-shadow: 0 16px 40px rgba(14,40,22,0.16); }
.hm .flip:hover { transform: translateY(-5px); }
.hm .flip:focus-visible { outline: 3px solid var(--green-2); outline-offset: 3px; }
.hm .flip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm .flip .after { opacity: 0; transition: opacity 0.6s ease; }
.hm .flip.show .after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.hm .flip:hover .after { opacity: 1; }
}
html[data-flip="tap"] .hm .flip:not(.show):hover .after { opacity: 0; }
html[data-flip="tap"] .hm .flip:not(.show):hover .fl-cue { color: rgba(255,255,255,0.65); }
.hm .flip .fl-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 16px 14px; background: linear-gradient(180deg, transparent, rgba(6,10,15,0.85)); display: flex; align-items: baseline; gap: 10px; color: #FFF; }
.hm .flip .fl-name { font: 800 0.95rem/1.2 var(--font-disp); }
.hm .flip .fl-cue { margin-left: auto; font: 700 0.6rem/1 var(--font-num); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.hm .flip.show .fl-cue, .hm .flip:hover .fl-cue { color: #5BD493; }
.hm .band { position: relative; margin-top: clamp(64px, 11vh, 120px); padding: clamp(64px, 12vh, 130px) 0; overflow: hidden; }
.hm .band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 110%, rgba(30, 94, 52, 0.55) 0%, transparent 65%), radial-gradient(40% 50% at 80% 0%, rgba(245, 120, 66, 0.1) 0%, transparent 60%); }
:root[data-theme="light"] .hm .band::before { background: radial-gradient(70% 90% at 50% 110%, rgba(30, 94, 52, 0.18) 0%, transparent 65%), radial-gradient(40% 50% at 80% 0%, rgba(245, 120, 66, 0.08) 0%, transparent 60%); }
.hm .band .ghost { top: 4%; left: 50%; z-index: 0; font-size: clamp(4.6rem, 19vw, 14rem); }
@media (max-width: 700px) {
.hm .band .ghost { white-space: normal; width: min-content; text-align: center; line-height: 0.86; top: 2%; }
}
.hm .band-in { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: 22px; }
.hm .band h2 { font-size: clamp(2.1rem, 6.4vw, 4rem); font-weight: var(--w-disp); letter-spacing: var(--track-disp); line-height: 1.02; text-wrap: balance; }
.hm .band p { color: var(--tx-2); max-width: 54ch; font-size: 1.05rem; }
.hm .band .btn { min-height: 58px; padding: 0 34px; font-size: 1rem; }
/* room for the floating buttons */
/* ════════ THE MATH: two from-zero bars on one dollar axis. Solid = the low end, stripes = the spread to the high end. ════════ */
.hm .math-grid { display: grid; gap: 16px; }
@media (min-width: 960px) {
.hm .math-grid { grid-template-columns: 1.3fr 0.7fr; align-items: start; }
}
.hm .costchart { padding: clamp(20px, 3vw, 30px); display: grid; gap: 18px; align-content: start; }
.hm .cc-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.hm .cc-head .k { font: 700 0.68rem/1.3 var(--font-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3); }
.hm .cc-plan { font: 500 0.9rem/1.6 var(--font-body); color: var(--tx-2); }
.hm .cc-plan-k { display: inline-block; margin-right: 6px; font: 700 0.68rem/1 var(--font-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3); }
.hm .cc-plan-line b { font: 700 1rem/1 var(--font-num); color: var(--tx); }
.hm .cc-plan-line .nm { font-weight: 700; color: var(--tx); }
.hm .cc-all { display: inline-flex; align-items: center; min-height: 32px; margin-left: 4px; padding: 0 2px; color: var(--green-2); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(91,212,147,0.4); }
.hm .cc-all:hover, .hm .cc-all:focus-visible { border-bottom-color: var(--green-2); outline: none; }
:root[data-theme="light"] .hm .cc-all { color: var(--forest); border-bottom-color: rgba(30,94,52,0.4); }
.hm .cc-rows { position: relative; display: grid; gap: 18px; padding: 22px 8px 0 0; }
.hm .cc-row { display: grid; gap: 8px; }
@media (min-width: 640px) {
.hm .cc-row { grid-template-columns: 220px 1fr; gap: 16px; align-items: center; }
}
.hm .cc-name { font: 600 0.92rem/1.35 var(--font-body); color: var(--tx); }
.hm .cc-name small { display: block; margin-top: 3px; font: 500 0.74rem/1.4 var(--font-body); color: var(--tx-3); }
.hm .cc-name small .cc-plan-name { color: var(--tx-2); font-weight: 700; }
.hm .cc-track { position: relative; height: 38px; }
.hm .cc-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.hm .cc-bar { position: absolute; top: 7px; left: 0; right: 0; height: 24px; cursor: default; outline: none; }
.hm .cc-bar .segs { position: absolute; inset: 0; clip-path: inset(-2px 100% -2px 0); transition: clip-path 1.1s var(--ease); }
.hm .cc-bar.in .segs { clip-path: inset(-2px 0 -2px 0); }
.hm .seg { position: absolute; top: 0; bottom: 0; left: var(--l); width: max(0px, calc(var(--w) - 2px)); border-radius: 4px; transition: left 0.6s var(--ease), width 0.6s var(--ease); }
.hm .seg.svc.solid { background: var(--cc-svc); }
.hm .seg.svc.rng { background: repeating-linear-gradient(135deg, var(--cc-svc) 0 3px, transparent 3px 8px), var(--cc-svc-t); }
.hm .seg.bag.solid { background: var(--cc-bag); }
.hm .seg.bag.rng { background: repeating-linear-gradient(135deg, var(--cc-bag) 0 3px, transparent 3px 8px), var(--cc-bag-t); }
.hm .seg.plan { background: var(--cc-plan); }
.hm .cc-bar .v { position: absolute; top: 50%; left: calc(var(--hi) + 8px); transform: translateY(-50%); padding: 3px 7px; border-radius: 6px; background: rgba(10,15,21,0.78); color: #FFF; font: 700 0.76rem/1 var(--font-num); white-space: nowrap; opacity: 0; transition: opacity 0.4s ease 0.9s, left 0.6s var(--ease), right 0.6s var(--ease); }
.hm .cc-bar .v.inside { left: auto; right: calc(100% - var(--hi) + 6px); }
.hm .cc-bar.in .v { opacity: 1; }
.hm .cc-bar:hover .tip, .hm .cc-bar:focus-visible .tip { opacity: 1; transform: translate(-50%, -6px); }
.hm .cc-bar .tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 0); min-width: 220px; max-width: 320px; padding: 8px 11px; border-radius: 10px; background: rgba(10,15,21,0.94); color: #FFF; font: 500 0.74rem/1.45 var(--font-body); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 26px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 3; }
.hm .cc-bar .tip b { font-family: var(--font-num); }
.hm .cc-axis { position: relative; height: 18px; font: 600 0.68rem/1 var(--font-num); color: var(--tx-3); }
@media (min-width: 640px) {
.hm .cc-axis { margin-left: 236px; }
}
.hm .cc-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.hm .cc-axis span:first-child { transform: none; }
.hm .cc-axis span:last-child { transform: translateX(-100%); }
.hm .cc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 600 0.76rem/1.4 var(--font-body); color: var(--tx-2); }
.hm .cc-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.hm .cc-legend .sw.svc { background: var(--cc-svc); }
.hm .cc-legend .sw.bag { background: var(--cc-bag); }
.hm .cc-legend .sw.plan { background: var(--cc-plan); }
.hm .cc-legend .sw.rng { background: repeating-linear-gradient(135deg, var(--tx-3) 0 2px, transparent 2px 5px), rgba(127,127,127,0.2); }
/* the visitor's own number: one marker per track, label on the first */
.hm .cc-you { position: absolute; top: -4px; bottom: -4px; left: calc(100% * var(--f, 0.5)); width: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease, left 0.6s var(--ease); z-index: 2; }
.hm .cc-rows.has-you .cc-you { opacity: 1; }
.hm .cc-you i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--orange); box-shadow: 0 0 12px rgba(245,120,66,0.6); }
.hm .cc-you b { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 0.64rem/1 var(--font-disp); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-fg); background: linear-gradient(135deg, var(--orange), var(--orange-2)); padding: 6px 9px; border-radius: 999px; }
.hm .cc-you.edge-r b { left: auto; right: -2px; transform: none; }
.hm .cc-you.edge-l b { left: -2px; transform: none; }
.hm .cc-form { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.hm .cc-form label { font: 700 0.88rem/1.4 var(--font-body); }
.hm .cc-out { font: 500 0.9rem/1.6 var(--font-body); color: var(--tx-2); min-height: 1.5em; }
.hm .cc-out b { font-family: var(--font-num); color: var(--tx); }
.hm .cc-li { font: 500 0.88rem/1.55 var(--font-body); color: var(--tx-2); padding-top: 14px; border-top: 1px solid var(--line); }
.hm .cc-li b { font: 700 1rem/1 var(--font-num); color: var(--tx); }
.hm .cc-li small { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--tx-3); }
/* three quote cards: a column beside the chart; a snap row on phones */
.hm .quotes { display: grid; gap: 14px; }
@media (min-width: 960px) {
.hm .quotes { grid-auto-rows: minmax(0, 1fr); }
.hm .quotes .quote { align-content: start; padding: 20px 22px; }
}
@media (max-width: 959px) {
.hm .quotes { grid-auto-flow: column; grid-auto-columns: min(84%, 360px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut-l); scroll-padding-right: var(--gut-r); margin-left: calc(-1 * var(--gut-l)); margin-right: calc(-1 * var(--gut-r)); padding: 4px var(--gut-r) 10px var(--gut-l); scrollbar-width: none; }
.hm .quotes::-webkit-scrollbar { display: none; }
.hm .quotes .quote { scroll-snap-align: start; padding: 22px; }
.hm .quotes .qhead { display: grid; grid-template-columns: 50px 1fr; column-gap: 13px; row-gap: 8px; align-items: center; }
.hm .quotes .qreal { grid-column: 2; justify-self: start; margin-left: 0; }
}
/* ════════ MOTION ════════ */
html.hm-js:not(.no-motion) .hm [data-rv] { opacity: 0; transform: translateY(26px); }
html.no-motion .hm [data-rv] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.hm [data-rv] { opacity: 1 !important; transform: none !important; }
.hm .marq-track { animation: none; }
.hm .scan-sheen { animation: none; opacity: 0; }
.hm .scan-head .st i { animation: none; }
.hm .scan-chip { opacity: 1; transform: none; }
.hm .btn, .hm .gcard, .hm .flip { transition: none !important; }
.hm .stage video.film, .hm .skip, .hm .filmbar { display: none; }
.hm .beat { transition: none; }
.hm .hint { display: none; }
.hm .land video { display: none; }
}

/* the page scrolls natively under the Descent: no smooth scroll, no scroll anchoring (Chrome moved the page 12 to 24 px) */
html:has(body.bb-page-home) { scroll-behavior: auto; overflow-anchor: none; }
/* the film and the landing are always dark footage: their highlights keep the dark-theme green in both themes */
.hm .stage .hl, .hm .land .hl, :root[data-theme="light"] .hm .stage .hl, :root[data-theme="light"] .hm .land .hl { color: #5BD493; }
.hm .stage .beat .k, :root[data-theme="light"] .hm .stage .beat .k { color: #5BD493; }
/* the shell's nav is fixed over the film: the stage's controls sit under it */
.hm .stage .skip, .hm .stage .realtag { top: calc(var(--navh) + 14px); }
/* ════════ pass 43: TOWER's core-8 arms (REF §1.1, D-345) ════════ */
/* H-3 arm f is two sentences with its source: a smaller headline */
.hm h1 .h1-long { font-size: 0.5em; line-height: 1.18; letter-spacing: -0.01em; }   /* never set display here: it would beat [hidden] */
/* the M2 arrival tag (D-306) on H-6 arm b */
.hm .m2tag { display: inline-block; margin-left: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); font: 700 0.62rem/1.4 var(--font-disp); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-2); vertical-align: middle; white-space: nowrap; }
/* H-7: the headline is a sentence; the plates are dated; the caption sits under them */
.hm .sec h2.h2-long { font-size: clamp(1.45rem, 3.4vw, 2.2rem); line-height: 1.16; max-width: 30ch; }
.hm .plate-cap { max-width: 64ch; margin-left: auto; margin-right: auto; font-size: 0.86rem; color: var(--tx-2); }
.hm .plate-cap .ba-drag { color: var(--tx-3); }
.hm [data-bb-slot="home.proof"] .proofcard { margin-top: 18px; }
/* H-8, beside the plates */
.hm .pilot { margin: clamp(22px, 4vh, 36px) auto 0; max-width: 760px; text-align: center; }
.hm .pilot .sec-k { margin-bottom: 10px; }
.hm .pilot-line { font: 600 clamp(1.05rem, 2.2vw, 1.3rem)/1.5 var(--font-body); color: var(--tx); text-wrap: pretty; }
/* the member quotes, now proof (MESSAGING §5.2 order 4): a row of four on desktop, the snap row on phones */
.hm .quotes-row { margin-top: clamp(28px, 5vh, 48px); }
@media (min-width: 960px) {
.hm .quotes.quotes-row { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
.hm .quotes-row .qhead { display: grid; grid-template-columns: 50px 1fr; column-gap: 13px; row-gap: 8px; align-items: center; }   /* four across: the badge goes under the name */
.hm .quotes-row .qreal { grid-column: 2; justify-self: start; margin-left: 0; }
}
/* H-9: one plan, above the cost worksheet */
.hm .plancard { padding: clamp(22px, 3.4vw, 34px); margin-bottom: 16px; }
.hm .plan-line { font: 700 clamp(1.15rem, 2.4vw, 1.45rem)/1.4 var(--font-body); color: var(--tx); }
.hm .plan-line s { color: var(--tx-3); font-weight: 600; }
.hm .plan-guar { margin-top: 10px; color: var(--tx-2); font-size: 0.95rem; max-width: 72ch; }
.hm .math-grid.solo { grid-template-columns: minmax(0, 1fr); }
/* the purpose line under every home field (S-1, scan.ask.reason); arm a is empty */
.hm .scanform .scan-reason { flex: 1 1 100%; order: 3; margin: 0; padding: 0 6px; font-size: 0.82rem; color: var(--tx-2); text-align: left; }
.hm .scanform .scan-reason:not(:has(> :not(:empty):not([hidden]))) { display: none; }
/* the seasonal line (Mar 1 to Apr 1) */
.hm .season-line { margin: 0; font: 600 0.92rem/1.5 var(--font-body); color: var(--tx); max-width: 56ch; }
/* the closing Scan: a field, then the trust strip */
.hm .band .scanform { margin: 0 auto; }
.hm .trust-strip { font: 700 0.7rem/1.4 var(--font-disp) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-2); }
/* the hero CTA test is retired (one CTA, D-065); H-3, H-4, H-5, H-6, H-7, H-9 and the seasonal line preview with ?ab= (the head script writes the rule) */
/* pass 46: film beat 2's end card (REF delta v1.3 item 7) */
.hm .beat p.b2-end { margin-top: 10px; color: #FFFFFF; font-weight: 700; }
/* pass 46: H-7 b, one member's before-and-after with its context line */
.hm .member-ba { margin: 18px 0 0; }
.hm .member-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; }
.hm .member-ba-ph { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #0A0F15; aspect-ratio: 5 / 7; }
.hm .member-ba-ph picture { display: contents; }
.hm .member-ba-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm .member-ba-tag { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(10, 15, 21, 0.78); color: #FFFFFF; font: 700 0.66rem/1 var(--font-num); letter-spacing: 0.12em; text-transform: uppercase; }
.hm .member-ba figcaption { margin-top: 10px; max-width: 640px; color: var(--tx-2); font: 500 0.9rem/1.5 var(--font-body); }
/* pass 47: the cost chart's math, under the legend (LMP 182000) */
.hm .cc-math { margin: 10px 0 0; color: var(--tx-2); font: 500 0.74rem/1.5 var(--font-body); }