/* Adkyte homepage concept v2 — page styles (PAGE agent).
   Modes (set on <html> by the inline head script, before first paint):
     .jr  the scroll journey: fixed 3D stage + fixed overlays driven by js/site.js
     .fb  stacked reading layout (reduced motion, ?fallback=1, no WebGL, world failed)
     no class at all (no JS) = the same stacked layout.
   Every journey rule is scoped under .jr so the no-JS page is always readable. */

/* subsets made from assets/fonts/ (fontTools, .venv): Bricolage wght 600-800 (opsz kept), Geist wght 400-700, and only
   the characters the page and the world's canvases use (ASCII + the curly quotes, dashes, arrows etc. in the copy) */
@font-face { font-family: 'Bricolage Grotesque'; src: url('../assets/page/bricolage-600-800.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../assets/page/geist-400-700.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --paper: #F3F2EE; --paper-2: #FAFAF8; --paper-3: #EAE8E2;
  --ink: #0B0B10; --body: #4B4E5C; --muted: #6A6E7C; --line: rgba(11,11,16,.08);
  --night: #05060B; --navy: #0A1330; --body-d: #A9AEC4; --line-d: rgba(255,255,255,.08);
  --grad: linear-gradient(96deg, #60a5fa, #a855f7 48%, #f43f5e);
  --grad-deep: linear-gradient(96deg, #2f6df0, #8b3dea 48%, #e11d48);   /* text on light: AA at display size */
  --grad-small: linear-gradient(96deg, #1f55d6, #7a2fd6 50%, #c21740);  /* small text on light (kickers, the hero proof): AA at 14px */
  --grad-btn: linear-gradient(100deg, #2f64e6 0%, #7c3aed 48%, #d0245c 100%); /* white label >= 4.5:1 at both ends */
  --acc: #6D28D9;
  /* DESIGN-V2 editorial tokens; the after-page (no data-theme) reads the light set */
  --fg: #0B0B10; --fg-2: #474A58; --fg-3: #6A6E7C; --hair: rgba(11,11,16,.10);
  /* the primary CTA: the live site's soft coloured glow is back (owner feedback #2A), crafted: a tinted drop, no halo */
  --sh-btn: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(40,20,90,.25), 0 12px 30px -10px rgba(124,58,237,.55);
  --sh-btn-hover: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(40,20,90,.25), 0 16px 38px -10px rgba(124,58,237,.7);
  --sh-btn-sm: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px -10px rgba(124,58,237,.5);
  --grad-rule: linear-gradient(90deg, #60a5fa, #a855f7 55%, #f43f5e);
  --ease: cubic-bezier(.16,1,.3,1);
  --gutter: clamp(20px, 5.5vw, 96px);
  --f-d: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-b: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bar-h: 84px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--f-b); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, canvas, picture { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: #7c3aed; color: #fff; }
:focus-visible { outline: 3px solid #7c3aed; outline-offset: 3px; }
[data-theme="dark"] :focus-visible, html[data-scene="dark"] .bar :focus-visible, html[data-pscene="dark"] .chapters :focus-visible { outline-color: #c4b5fd; }
[id] { scroll-margin-top: 96px; }
[tabindex="-1"]:focus { outline: none; }
.i { width: 18px; height: 18px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
/* "Skip the animation": the first Tab stop; the stacked page, remembered */
.skip { position: fixed; left: 16px; top: -80px; z-index: 60; padding: 12px 16px; border-radius: 12px; background: #0B0B10; color: #fff; font: 600 15px/1.2 var(--f-b); text-decoration: none; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); transition: top .25s var(--ease); }
.skip:focus { top: 12px; }
.skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #7c3aed; }
html:not(.jr) .skip { display: none; }

/* ─────────── Theme tokens (per overlay section): DESIGN-V2 §3 ───────────
   --fg headlines/numbers · --fg-2 body · --fg-3 kickers, labels, captions · --hair rules and panel edges
   --acc the ONE accent (links, check glyphs, focus) · --panel solid panel fill · --srgb the scrim colour */
[data-theme="light"] {
  --fg: #0B0B10; --fg-2: #474A58; --fg-3: #6A6E7C; --hair: rgba(11,11,16,.10); --acc: #6D28D9;
  --panel: rgba(255,255,255,.96);
  --panel-sh: inset 0 0 0 1px rgba(11,11,16,.10), 0 1px 2px rgba(22,18,40,.06), 0 14px 36px -14px rgba(22,18,40,.22);
  --srgb: 243,242,238; --scrim: rgba(243,242,238,.86);
  --gtext: var(--grad-deep); --gtext-s: var(--grad-small);
  --tick: #7c3aed;
}
[data-theme="dark"] {
  --fg: #F4F5FA; --fg-2: #B6BBCE; --fg-3: #858BA3; --hair: rgba(255,255,255,.09); --acc: #B9A8FF;
  --panel: rgba(13,15,28,.94);
  --panel-sh: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.04), 0 28px 64px -28px rgba(0,0,0,.8);
  --srgb: 5,6,11; --scrim: rgba(5,6,11,.5);
  --gtext: var(--grad); --gtext-s: var(--grad);
  --tick: #b9a8ff;
}

/* ─────────── Type primitives ─────────── */
/* kicker: a small sentence-case line above a block, in the brand gradient (owner feedback #2A: the kept kickers carry the
   colour again). No rule, no tracking, no uppercase: uppercase lives in the chapter pill only. */
.kick { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 14.5px/1.3 var(--f-b); letter-spacing: 0; color: var(--fg-3); }
.kt { background: var(--gtext-s, var(--gtext, var(--grad-small))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kick--center { justify-content: center; }
/* chapter marker "01 · Ads": readable gradient type after a short gradient rule (DOM, never 3D) */
.chl { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 15px/1.25 var(--f-b); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.chl::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: var(--grad-rule); }
.chl span { background: var(--gtext, var(--grad)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chead--center .chl { justify-content: center; }
/* the chapter line under it: a scene title (smaller than a chapter word's line used to be; the card under it has its own headline) */
.chline { font: 800 clamp(30px, 2.7vw, 44px)/1.02 var(--f-d); letter-spacing: -.042em; text-wrap: balance; color: var(--fg); max-width: 15em; }
.chline--big { font-size: clamp(36px, 4.1vw, 64px); line-height: .98; letter-spacing: -.048em; max-width: none; }
.chead--center { text-align: center; }
.chead--center .chline { margin-inline: auto; }
/* key numbers in the brand gradient (the hero proof, 15s, the proof card's 387, the Starter price) */
.num { background: var(--gtext-s, var(--gtext, var(--grad-small))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* a panel's own title ("Five steps") */
.ptitle { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 700 22px/1.2 var(--f-d); letter-spacing: -.02em; color: var(--fg); }
.grad { background: var(--gtext, var(--grad-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.display { font: 800 clamp(40px, min(4.45vw, 7.5vh), 84px)/.95 var(--f-d); letter-spacing: -.048em; text-wrap: balance; color: var(--fg); }
.headline { font: 800 clamp(28px, 2.9vw, 46px)/1.03 var(--f-d); letter-spacing: -.038em; text-wrap: balance; color: var(--fg); }
.headline--sm { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.06; letter-spacing: -.032em; }
.lede { margin-top: 16px; font: 400 clamp(16px, 1.2vw, 18px)/1.55 var(--f-b); color: var(--fg-2); text-wrap: pretty; max-width: 38em; }
.fine { margin-top: 12px; font: 500 13px/1.4 var(--f-b); color: var(--fg-3); }
.bigline { font: 800 clamp(46px, 6.4vw, 100px)/.98 var(--f-d); letter-spacing: -.05em; text-align: center; text-wrap: balance; color: var(--fg); }
.bigline--ch { font-size: clamp(34px, 4vw, 62px); }
/* the caption: a line of type on the studio wall (no pill) */
.caption { font: 600 22px/1.2 var(--f-d); letter-spacing: -.02em; color: #0B0B10; text-align: center; text-wrap: balance; }
.statement { font: 800 clamp(38px, 4.5vw, 70px)/.98 var(--f-d); letter-spacing: -.048em; text-align: center; text-wrap: balance; max-width: 17ch; margin-inline: auto; color: var(--fg); }
.statement--quote { max-width: 19ch; }
.statement-sub { margin: 18px auto 0; font: 400 clamp(16px, 1.25vw, 19px)/1.5 var(--f-b); color: var(--fg-2); text-align: center; max-width: 34em; text-wrap: balance; }
.section-title { font: 800 clamp(36px, 4.5vw, 66px)/1 var(--f-d); letter-spacing: -.046em; text-wrap: balance; }
.slede { margin-top: 18px; font: 400 clamp(16px, 1.2vw, 18.5px)/1.55 var(--f-b); color: var(--body); text-wrap: pretty; }

/* ─────────── Buttons ─────────── */
.btn { --h: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 26px; border: 0; border-radius: 999px; font: 700 16px/1 var(--f-d); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s, color .3s; }
.btn .i { transition: transform .45s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
/* primary: the brand gradient pill with its soft coloured glow (stronger on hover); no sheen overlay, a 1px lift at most */
.btn--grad { color: #fff; background: var(--grad-btn); box-shadow: var(--sh-btn); transition: transform .45s var(--ease), filter .3s, box-shadow .45s var(--ease); }
.btn--grad:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--sh-btn-hover); }
.bar .btn--grad { box-shadow: var(--sh-btn-sm); }
.bar .btn--grad:hover { box-shadow: var(--sh-btn); }
/* two-tone ring: white hairline against the gradient, violet (lilac on dark) around it */
.btn--grad:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #7c3aed; }
[data-theme="dark"] .btn--grad:focus-visible, html[data-scene="dark"] .bar .btn--grad:focus-visible, .tier--hot .btn--grad:focus-visible { box-shadow: 0 0 0 5px #c4b5fd; }
/* secondary: an outline, no fill, no blur */
.btn--ghost { color: var(--fg, var(--ink)); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 24%, transparent); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px currentColor; transform: translateY(-1px); }
.btn--ink { color: #fff; background: var(--ink); box-shadow: 0 14px 30px -16px rgba(11,11,16,.7); }
.btn--ink:hover { transform: translateY(-2px); background: #1b1b24; }
.btn--line { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(11,11,16,.18); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-1px); }
.btn--sm { --h: 42px; padding: 0 18px; font-size: 14.5px; gap: 8px; }
.btn--sm .i { width: 16px; height: 16px; }
.btn--block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.actions--center { justify-content: center; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: 28px; }
.cta-note { font: 500 14px/1.4 var(--f-b); color: var(--fg-2, var(--body)); }
.cta-row--card { justify-content: flex-start; margin-top: 26px; }

/* risk ticks */
.risk { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; font: 500 14px/1.35 var(--f-b); color: var(--fg-2); }
.risk li { display: inline-flex; align-items: center; gap: 7px; }
.risk .i { width: 16px; height: 16px; color: var(--tick, #7c3aed); }
.risk--center { justify-content: center; }

/* ticks: a brand-violet check aligned to the first line (no disc, no glow) */
.ticks { list-style: none; display: grid; gap: 12px; margin-top: 20px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font: 400 16px/1.5 var(--f-b); color: var(--fg-2); text-wrap: pretty; }
.ticks li b { color: var(--fg); font-weight: 600; }
.ticks .i { width: 18px; height: 18px; margin-top: 3px; color: var(--tick, #7c3aed); }
[data-theme="dark"] .ticks .i { color: var(--tick, #a78bfa); }
@media (min-width: 1024px) and (min-height: 801px) {
  .ticks b { display: block; margin-bottom: 1px; }
}

/* ─────────── Top bar ─────────── */
.bar { --bar-ink: #0B0B10; --cap-bg: rgba(255,255,255,.62); --cap-edge: rgba(11,11,16,.06); --cap-hover: rgba(11,11,16,.06);
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) var(--gutter) 20px; pointer-events: none; transition: background-color .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease); }
.bar > * { pointer-events: auto; }
html[data-scene="dark"] .bar { --bar-ink: #fff; --cap-bg: rgba(20,22,32,.5); --cap-edge: rgba(255,255,255,.1); --cap-hover: rgba(255,255,255,.08); }
/* phones: while the hero scrolls away under the bar, a paper shade lets it dissolve instead of colliding */
.bar::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); background: linear-gradient(180deg, rgba(243,242,238,.96) 58%, rgba(243,242,238,0)); }
html[data-shade="1"] .bar::before { opacity: 1; }
html .bar.is-solid { --bar-ink: #0B0B10; --cap-bg: rgba(255,255,255,.62); --cap-edge: rgba(11,11,16,.06); --cap-hover: rgba(11,11,16,.06); background: rgba(243,242,238,.84); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--line); padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
.bar-logo { display: inline-flex; align-items: center; height: 42px; padding: 0 15px; border-radius: 12px; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11,11,16,.05), 0 8px 22px -10px rgba(15,18,30,.32); transition: transform .45s var(--ease); }
.bar-logo:hover { transform: translateY(-1px); }
.bar-logo img { height: 23px; width: auto; }
.bar-r { display: flex; align-items: center; gap: 10px; }
.bar-nav { display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 5px; border-radius: 999px; color: var(--bar-ink); background: var(--cap-bg); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--cap-edge); }
/* the chrome swaps light <-> dark in one frame (a cross-fade passes through a grey capsule with grey labels) */
.bar-link, .bar-login { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; font: 500 14px/1 var(--f-b); color: inherit; text-decoration: none; opacity: .82; transition: background-color .25s, opacity .25s; }
.bar-link:hover, .bar-login:hover { background: var(--cap-hover); opacity: 1; }
.bar-login { font-weight: 600; opacity: 1; }
.bar-sep { width: 1px; height: 16px; margin: 0 4px; background: currentColor; opacity: .16; }
.bar-login--m { display: none; }
@media (max-width: 1020px) { .bar-link, .bar-sep { display: none; } }
@media (max-width: 619px) {
  .bar-nav { display: none; }
  /* phones: a plain Log in beside the CTA (the nav capsule that holds it on wider screens is gone) */
  .bar-login--m { display: inline-flex; height: 44px; padding: 0 10px; color: var(--bar-ink); font-size: 14.5px; opacity: .9; text-shadow: 0 0 12px color-mix(in srgb, var(--paper) 60%, transparent); }
  html[data-scene="dark"] .bar:not(.is-solid) .bar-login--m { text-shadow: none; }
}
@media (max-width: 339px) { .bar-login--m { display: none; } }

/* ─────────── Stage (fixed 3D canvas + poster) ─────────── */
.stage { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; pointer-events: none;
  background: radial-gradient(90% 80% at 68% 50%, #FBFBF9 0%, #F4F3EF 46%, #EAE8E2 100%); }
.stage-poster, .stage-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-poster { z-index: 1; }
.stage-poster.is-missing { display: none; }
.stage-night { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .9s var(--ease);
  background: radial-gradient(70% 60% at 50% 42%, rgba(79,70,229,.22), transparent 70%), radial-gradient(120% 90% at 50% 40%, #0d1638 0%, #0A1330 36%, #05060B 100%); }
html[data-backdrop="dark"] .stage-night { opacity: 1; }
.stage canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s var(--ease); }
.stage.is-ready canvas { opacity: 1; }
.stage.is-jumping canvas { opacity: 0; transition: opacity .15s linear; }
.stage.is-parked { visibility: hidden; }
/* segment stills stand in while the world loads, or where a chapter's module failed */
.stage-still { position: absolute; inset: 0; z-index: 4; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.stage-still.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.stage-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.stage-still img.is-front { opacity: 1; }
@media (max-width: 767px), (max-aspect-ratio: 17/20) {
  /* the poster is the 390x844 opening; the live camera keeps its vertical field of view, so on a shorter screen the
     phone stays at the same fraction of the height (~76%). Crop around that line, not the middle, so the phone
     doesn't jump when the canvas fades in (390x700: ~35px -> ~0 at the phone's centre). */
  .stage-poster img { object-position: 50% 76%; }
  /* the phone stills are framed at 4:5.6 with the subject up top; the docked card covers the rest */
  .stage-still img { height: 66%; object-position: 50% 0; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
}
html:not(.jr) .stage { display: none; }

/* ─────────── JOURNEY MODE ─────────── */
.jr .journey { position: relative; height: 1300svh; } /* pre-JS track = JOURNEY_VH.desktop + 100 (js/timeline.js) */
/* (the phones' CSS scroll-snap markers are retired: proximity snapping pulled every short swipe back to the rest it
   started from. js/site.js settles forward-only on every device now) */
.rests { display: none; }
.jr .overlays { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.jr .ov { position: absolute; inset: 0; display: flex; pointer-events: none; visibility: hidden; --a: 0; --l: 0; }
.jr .ov.is-on { visibility: visible; }
.jr .ov-still { display: none; }
.jr .ov-inner { position: relative; pointer-events: none; opacity: var(--a); transform: translate3d(0, calc((1 - var(--a)) * 16px), 0); }
.jr .ov.is-live .ov-inner { pointer-events: auto; }
.jr .ov.is-on .ov-inner { will-change: opacity, transform; }
/* children arrive a touch later than their card: a scroll-driven stagger */
.jr .ov-inner > * { transform: translate3d(0, calc((1 - var(--a)) * var(--k, 0px)), 0); }
.jr .ov-inner > :nth-child(2) { --k: 10px; }
.jr .ov-inner > :nth-child(3) { --k: 18px; }
.jr .ov-inner > :nth-child(4) { --k: 24px; }
.jr .ov-inner > :nth-child(n+5) { --k: 30px; }
/* big type fades and rises only: a blur ramp read as double text over the print and the chrome letters */
/* hidden overlays hold their loops still (no style recalcs for things nobody can see) */
.jr .ov:not(.is-on) *, .jr .ov:not(.is-on) *::before, .jr .ov:not(.is-on) *::after { animation-play-state: paused; }

/* positions (desktop) */
.jr .ov[data-pos="left"]   { align-items: center; justify-content: flex-start; padding: 88px var(--gutter) 64px; }
.jr .ov[data-pos="right"]  { align-items: center; justify-content: flex-end;   padding: 88px var(--gutter) 64px; }
.jr .ov[data-pos="bottom"] { align-items: flex-end; justify-content: center; padding: 0 24px clamp(96px, 13vh, 150px); }
.jr .ov[data-pos="top"]    { align-items: flex-start; justify-content: center; padding: 104px 24px 0; }
.jr .ov[data-pos="center"] { align-items: center; justify-content: center; padding: 0 24px; }
.jr .ov[data-pos="bottom"] .ov-inner { text-align: center; max-width: 900px; }
.jr .ov.ov--chapter .ov-inner { max-width: min(1240px, 94vw); }

/* legibility scrim behind free-floating type (not cards; never the hero: the opening's 3D is never greyed) */
.jr .ov--big .ov-inner::before, .jr .ov--chapter .ov-inner::before, .jr .ov--statement .ov-inner::before {
  content: ""; position: absolute; z-index: -1; inset: -64px -90px; pointer-events: none; background: radial-gradient(closest-side, var(--scrim) 20%, transparent 100%); }
/* bare copy (DESIGN-V2 §4.2): the SECTION carries a directional scrim, faded with the overlay; the text sits on it bare.
   It ends at 44% of the width, before the 3D UI (the Autopilot card and the Mail banners stay pure white, never greyed) */
.jr .ov--bare::before, .jr .ov--scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--a);
  background: linear-gradient(90deg, rgba(var(--srgb),.72) 0%, rgba(var(--srgb),.42) 26%, rgba(var(--srgb),0) 44%); }
.jr .ov--bare[data-pos="right"]::before, .jr .ov--scene[data-pos="right"]::before { background: linear-gradient(270deg, rgba(var(--srgb),.72) 0%, rgba(var(--srgb),.42) 26%, rgba(var(--srgb),0) 44%); }
.jr .ov--bare[data-pos="bottom"]::before { background: linear-gradient(0deg, rgba(var(--srgb),.8) 0%, rgba(var(--srgb),.5) 20%, rgba(var(--srgb),0) 40%); }
/* 'Follow the photo.': inside the tunnel's dark inner frame, just under the photo that leads the camera
   (never across it), on its own dark pool so the neon strokes it crosses drop back */
.jr .ov[data-seg="enter"] { --enter-fs: clamp(44px, 5.2vw, 80px); align-items: flex-start; padding-top: calc(var(--enter-y, 66svh) - var(--enter-fs) * .49); }
.jr .ov[data-seg="enter"] .bigline--enter { font-size: var(--enter-fs); max-width: min(62vw, 880px); }
.jr .ov--big .ov-inner::before { inset: -70px -140px; background: radial-gradient(closest-side, rgba(5,6,11,.72) 35%, transparent 100%); }
/* a soft dark band behind the line, faded with it: the rings never cross the letters */
.jr .ov[data-seg="enter"]::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--enter-y, 66svh) - var(--enter-fs) * 1.3); height: calc(var(--enter-fs) * 2.6); pointer-events: none; opacity: var(--a);
  background: radial-gradient(60% 50% at 50% 50%, rgba(4,5,11,.62), rgba(4,5,11,0) 100%); }
.bigline--enter { letter-spacing: -.035em; white-space: nowrap; }
.jr .ov--big .bigline--enter { color: #fff; text-shadow: 0 0 2px rgba(5,6,11,.9), 0 4px 28px rgba(5,6,11,.85); }

/* Desktop: where the 3D scene already shows a card's detail (the Autopilot panel, the hub's source and
   outcome tiles), the DOM copy stays for screen readers but is not painted twice side by side. */
@media (min-width: 768px) and (min-aspect-ratio: 17/20) {
  .jr .ov--card .ap, .jr .card--hub .hub-lists { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jr .card--hub { width: min(1000px, 86vw); text-align: center; }
}
/* scene 5 (the hub): the chapter line and '15s to first text' bottom-centre under the hub */
.card--hub .hub-top { display: grid; justify-items: center; }
.jr .ov--hub .ov-inner { max-width: none; }


/* ─────────── Hero ─────────── */
.hero { width: min(880px, 52vw); }
.hero .display { max-width: 10.6em; }
.hero .risk { max-width: 36em; flex-direction: column; gap: 6px; } /* one column: never two lines then one alone */
/* the offer: the live site's pill is back. '$50 off' is a small brand-gradient pill inside a quiet solid capsule with a
   hairline (no blur, no dot, no glow); the words stay plain ink */
.offer { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-bottom: 20px; padding: 4px 14px 4px 4px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,16,.08), 0 1px 2px rgba(22,18,40,.05); font: 500 14.5px/1.3 var(--f-b); color: #474A58; }
.offer-pill { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--grad-btn); color: #fff; font: 700 12px/1.35 var(--f-b); letter-spacing: .01em; }
.offer-t { min-width: 0; }
.hero .lede { margin-top: 22px; max-width: 33em; font-size: clamp(16px, 1.18vw, 18px); color: var(--body); }
/* the two phrases a skimmer needs, in ink */
.hero .lede b { font-weight: 600; color: var(--fg, #0B0B10); }
.hero .actions { margin-top: 28px; }
/* the proof line: two lines of type (no chip, no icon) */
.pchip { display: block; margin-top: 22px; }
.pchip-t { display: grid; gap: 3px; }
.pchip-main { font: 600 15px/1.25 var(--f-b); color: #0B0B10; font-variant-numeric: tabular-nums; }
.pchip-main b { font-weight: 700; }
.pchip-sub { font: 500 12.5px/1.35 var(--f-b); color: #6A6E7C; }

/* "Scroll to enter" cue: floats above the 3D phone on desktop, sits in the flow on phones */
.cue { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; user-select: none; }
/* defaults ≈ the world's desktop framing; the world's 'hero-phone-top' anchor overrides them every frame */
.cue--float { position: absolute; left: 0; top: 0; transform: translate3d(var(--cue-x, -9999px), var(--cue-y, -9999px), 0) translate(-50%, -100%); }
/* it shows only once the world has FRAMED and its 'hero-phone-top' anchor is live (js/site.js adds .cue-live), then fades
   in at that spot, once: never at an estimate first */
.jr .ov--hero:not(.cue-live) .cue--float { opacity: 0 !important; visibility: hidden; }
.jr .ov--hero.cue-live .cue--float { animation: cue-in .6s var(--ease) both; }
.cue-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 10px 14px; border-radius: 999px; font: 600 15px/1 var(--f-d); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 44px -18px rgba(15,18,30,.38); }
/* the cue is a real control (it jumps like 'See how it works') */
button.cue-pill { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
button.cue-pill:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -18px rgba(15,18,30,.45); }
button.cue-pill:active { transform: scale(.97); }
/* once the phone cue has faded out it stops animating and leaves the Tab order */
.cue-off .cue--float { visibility: hidden; }
.jr .ov--hero.cue-none .cue--float { opacity: 0; visibility: hidden; transition: opacity .2s linear, visibility 0s linear .2s; }
.cue-tight .cue--float .cue-arrow { display: none; }
.cue-off .cue--float, .cue-off .cue--float *, .cue-off .cue--float *::before, .cue-off .cue--float *::after { animation: none; }
.cue-mouse { position: relative; flex: none; width: 16px; height: 24px; border-radius: 9px; box-shadow: inset 0 0 0 2px rgba(11,11,16,.45); }
.cue-mouse::after { content: ""; position: absolute; top: 5px; left: 50%; width: 3px; height: 5px; margin-left: -1.5px; border-radius: 999px; background: rgba(11,11,16,.45); animation: cue-wheel 1.6s var(--ease) infinite; }
.cue-swipe { width: 18px; height: 18px; color: #0B0B10; animation: cue-swipe 1.6s var(--ease) infinite; }
.cue-arrow { width: 22px; height: 22px; color: rgba(11,11,16,.45); animation: cue-bounce 1.6s var(--ease) infinite; }
.cue-txt--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .cue-mouse, .cue-txt--fine { display: none; }
  .cue-txt--touch { display: inline; }
  .cue--float .cue-pill::before { content: ""; width: 18px; height: 18px; background: no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 14l6-6 6 6' fill='none' stroke='%230B0B10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); animation: cue-swipe 1.6s var(--ease) infinite; }
}
/* short desktop screens (13" laptops, browser chrome): keep the whole hero in view */
@media (min-width: 768px) and (min-aspect-ratio: 17/20) and (max-height: 820px) {
  .offer { margin-bottom: 16px; }
  .hero .lede { margin-top: 16px; }
  .hero .actions { margin-top: 22px; }
  .risk { margin-top: 18px; }
  .pchip { margin-top: 16px; }
  html.jr .ov.ov--hero { padding-top: 84px; padding-bottom: 28px; } /* html.jr: beats the base hero rule further down */
}
/* very short laptops: the proof line shrinks instead of going; the cue would sit on the CTAs and Log in */
@media (min-width: 768px) and (min-aspect-ratio: 17/20) and (max-height: 700px) {
  .pchip-main { font-size: 13.5px; }
  .pchip-sub { font-size: 12px; }
}
@media (min-width: 768px) and (min-aspect-ratio: 17/20) and (max-height: 600px) { .cue--float { display: none; } }
/* 600-640px tall laptops (browser chrome, 150% zoom): the column tightens so the offer never slides under the bar */
@media (min-width: 768px) and (min-aspect-ratio: 17/20) and (max-height: 640px) {
  html.jr .ov.ov--hero { align-items: safe center; padding-top: 76px; padding-bottom: 14px; }
  .offer { margin-bottom: 12px; }
  .hero .lede { margin-top: 12px; font-size: 15.5px; line-height: 1.5; }
  .hero .actions { margin-top: 16px; }
  .hero .btn { --h: 48px; }
  .risk { margin-top: 12px; }
  .pchip { margin-top: 10px; }
}
@keyframes cue-in { from { opacity: 0; translate: 0 10px; } }
@keyframes cue-wheel { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(7px); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes cue-swipe { 0% { opacity: .35; transform: translateY(4px); } 50% { opacity: 1; } 100% { opacity: .35; transform: translateY(-4px); } }
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.jr .ov.ov--hero { position: fixed; inset: 0; z-index: 10; visibility: visible; --a: 1; align-items: center; justify-content: flex-start; padding: 92px var(--gutter) 44px; }
.jr .ov.ov--hero.is-off { visibility: hidden; }
.jr .ov.ov--hero .ov-inner { pointer-events: auto; }
.jr .ov.ov--hero.is-off .ov-inner, .jr .ov.ov--hero[aria-hidden="true"] .ov-inner { pointer-events: none; }
.jr .ov--hero .cue--float { opacity: calc(var(--a) * var(--cue-o, 1)); }

/* hero callouts (CLARITY §1, DESIGN-V2 §4.6): a 1px leader line that ends at the object's edge + a plain label at its
   free end. No box, no dot, no glow. js/site.js lays them out once (at rest), keeps each on its world anchor and
   staggers them in; the first 0.01 p of scroll fades them all (--co-o). */
.callouts { display: none; }
.jr .callouts { display: block; position: absolute; inset: 0; pointer-events: none; opacity: var(--co-o, 1); }
.co { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: opacity .2s linear, visibility 0s linear .2s; }
.co.is-in { opacity: var(--a, 1); visibility: visible; transition: opacity .2s linear, visibility 0s; }
.co-line { position: absolute; left: 0; top: 0; width: var(--len, 0px); height: 1px; margin-top: -.5px; background: rgba(11,11,16,.34); transform-origin: 0 50%; transform: rotate(var(--ang, 0deg));
  box-shadow: 0 0 0 1px rgba(255,255,255,.55); } /* a light under-stroke: the leader reads end to end across the dark ad */
.co-t { position: absolute; left: 0; top: 0; font: 500 14px/1.2 var(--f-b); letter-spacing: 0; color: #0B0B10; white-space: nowrap; translate: 0 8px; transition: translate .2s var(--ease);
  text-shadow: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.co.is-in .co-t { translate: 0 0; }
.co-l { display: block; }
/* the two-line form breaks at .co-br only (a label is one line or two, never more) */
.co-t--wrap .co-br { display: block; height: 0; overflow: hidden; }
/* the platforms line under 'Adkyte makes it an ad' (desktops >= 1024 wide): same leader, no box */
.co-sub { display: block; margin-top: 3px; font: 500 13px/1.3 var(--f-b); color: #474A58; }
/* the band above the phone (narrow desktops) is short: there the title and the platforms line run on one line */
.co-t--inline .co-full, .co-t--inline .co-sub { display: inline; }
.co-t--inline .co-sub { margin: 0 0 0 .3em; font-size: 14px; }
.co-t--end { text-align: right; }
.co-short { display: none; }
@media (max-width: 1023px) { .co-sub { display: none; } }
@media (max-width: 767px), (max-aspect-ratio: 17/20) {
  .co-t { font-size: 12.5px; }
  .co-full, .co-sub { display: none; }
  .co-short { display: block; }
}

/* ─────────── Cards: panels and bare copy (DESIGN-V2 §4.1) ───────────
   .card = a solid panel (lists, data, several controls): no glass, no sheen, a hairline and a tinted shadow.
   .card--bare = copy of <= 3 elements set straight on the scene; the section behind it carries the scrim. */
.card { position: relative; width: min(560px, 42vw); padding: 32px; border-radius: 20px; color: var(--fg);
  background: var(--panel); box-shadow: var(--panel-sh);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.card--bare { padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card--bare .headline { font-size: clamp(30px, 3.4vw, 56px); line-height: 1; letter-spacing: -.04em; }
.card--bare .headline--sm { font-size: clamp(28px, 2.7vw, 44px); line-height: 1.02; letter-spacing: -.035em; }
.card--bare .lede { max-width: 32em; }
/* a headline inside a panel */
.card:not(.card--bare) .headline { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.04; letter-spacing: -.035em; }

/* colour on the dark panels (owner feedback #2A), restrained: a faint brand wash at the top and a 1px brand-gradient
   hairline along the top edge at ~40% (it follows the radius). No outer glow, no neon outline. */
[data-theme="dark"] .card:not(.card--bare) { background: radial-gradient(120% 70% at 22% 0%, rgba(124,58,237,.11), rgba(124,58,237,0) 62%), var(--panel); }
[data-theme="dark"] .card:not(.card--bare):not(.card--bottom)::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding-top: 1px; pointer-events: none;
  background: var(--grad-rule); opacity: .42;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
[data-theme="dark"] .card--bottom:not(.card--bare) { background: var(--panel); }

/* A SCENE (COMPACT.md): the chapter's label + line, bare on the scene's scrim, then one panel. On desktop the panel's two
   pages read as ONE panel (the top half: headline + body; the bottom half: the list, under a hairline); on phones each
   page is a card of its own, turned by scroll. */
.scene { width: min(560px, 42vw); }
.chead { margin-bottom: 20px; }
.card--join, .card.card--join { width: auto; } /* (beats the per-breakpoint .card widths: a joined card always fits its scene column) */
.card--top { border-radius: 20px 20px 0 0; padding-bottom: 24px;
  box-shadow: inset 1px 1px 0 var(--hair), inset -1px 0 0 var(--hair); }
.card--bottom { border-radius: 0 0 20px 20px; padding-top: 22px; border-top: 1px solid var(--hair);
  box-shadow: inset 1px -1px 0 var(--hair), inset -1px 0 0 var(--hair), 0 28px 64px -28px rgba(0,0,0,.8); }
[data-theme="light"] .card--bottom { box-shadow: inset 1px -1px 0 var(--hair), inset -1px 0 0 var(--hair), 0 14px 36px -14px rgba(22,18,40,.22); }
.card--join > *:not(.pg-dots) { position: relative; z-index: 1; }
.card--join .pg-dots { position: absolute; top: 20px; right: 20px; z-index: 2; }
.jr [data-paging] .card--join { border-radius: 20px; border-top: 0; box-shadow: var(--panel-sh); }
.jr [data-paging] .card--top .headline { padding-right: 36px; } /* room for the page dots */
.cta-row--scene { justify-content: flex-start; margin-top: 18px; }
/* the second headline of a bare scene ("Then it looks after the ads.") */
.headline--sub { margin-top: 30px; }
.card--bare .headline--sub { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.02; letter-spacing: -.035em; }
/* the hub: '15s to first text' under the chapter line, centred */
.card--hub .hub-stat { justify-content: center; }
.hub-stat .num { font: 800 clamp(48px, 4.4vw, 68px)/.9 var(--f-d); letter-spacing: -.05em; }

/* paging (phones only; desktop and the stacked page show every page, in reading order) */
.pg-dots { display: none; margin-left: auto; gap: 5px; color: var(--fg-2); }
/* a card with no kicker keeps its page dots on a row of their own (only while it pages) */
.pg-bar { display: none; }
.jr [data-paging] .pg-bar { display: flex; margin: 0 0 12px; }
.pg-dots i { width: 6px; height: 3px; border-radius: 999px; background: currentColor; opacity: .35; transition: width .45s var(--ease), opacity .45s var(--ease); }
.pgs { display: flex; flex-direction: column; }
/* a page's CTA closes the card when every page shows */
.pg--cta { display: contents; }
.pg--cta .cta-row { order: 2; }
/* Paging (journey only; site.js sets data-paging on phones, and on short laptops for the cards marked
   data-pages-short when they would not fit). Long cards split in two, turned by scroll. The card eases to the
   height of the page it shows (--pg-h, measured by site.js), and the pages cross-fade with a short slide. */
/* the page box clips what doesn't belong to the showing page (the outgoing, taller page while the card eases shut),
   with 24px of room below and to the sides so button glows and focus rings are never cut */
.jr [data-paging] .pgs { --pg-pad: 24px; display: grid; align-items: start; height: calc(var(--pg-h) + var(--pg-pad)); padding: 0 var(--pg-pad) var(--pg-pad); margin: 0 calc(-1 * var(--pg-pad)) calc(-1 * var(--pg-pad)); overflow: hidden; transition: height .45s var(--ease); }
.jr [data-paging] .pg { grid-area: 1 / 1; align-self: start; transition: opacity .2s linear .06s, transform .26s var(--ease) .06s, visibility 0s; }
.jr [data-paging] .pg--cta { display: block; }
.jr [data-paging]:not([data-page="1"]) .pg[data-pg="2"] { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .13s linear, transform .2s var(--ease), visibility 0s linear .13s; }
.jr [data-paging][data-page="1"] .pg[data-pg="1"] { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .13s linear, transform .2s var(--ease), visibility 0s linear .13s; }
.jr [data-paging] .pg-dots { display: inline-flex; }
.jr [data-paging]:not([data-page="1"]) .pg-dots i:first-child, .jr [data-paging][data-page="1"] .pg-dots i:last-child { width: 18px; opacity: .9; }
.jr [data-paging] .ticks { margin-top: 0; }
.jr [data-paging] .pg--ap .ap { margin-top: 0; }
.jr [data-paging] .steps--cont > li:first-child { border-top: 0; padding-top: 0; }

/* five steps: a timeline (owner 2026-09-29: the gradient discs + a hairline under every row read as templated). A thin
   rail runs down the left through the brand colours, blue at step 1 to rose at step 5; each step is a small ring node on
   it (tinted with its stop) holding the numeral. No row dividers, no glow. Big screens set the title on its own line
   over the explanation; compact layouts keep the run-in sentence (same words, less height). */
.card--steps { width: min(540px, 40vw); }
.steps { --gap: 18px; --node: 30px; list-style: none; display: grid; gap: var(--gap); }
.steps li { position: relative; display: grid; grid-template-columns: var(--node) 1fr; align-items: start; column-gap: 16px; }
.steps li:nth-child(1) { --c: 96,165,250;  --c2: 129,140,248; }
.steps li:nth-child(2) { --c: 129,140,248; --c2: 168,85,247; }
.steps li:nth-child(3) { --c: 168,85,247;  --c2: 217,70,239; }
.steps li:nth-child(4) { --c: 217,70,239;  --c2: 244,63,94; }
.steps li:nth-child(5) { --c: 244,63,94;   --c2: 244,63,94; }
/* the rail: this node's centre down to the next node's centre, in this step's colour into the next one's */
.steps li::before { content: ""; position: absolute; left: calc(var(--node) / 2 - .75px); top: calc(var(--node) / 2);
  bottom: calc(-1 * var(--gap) - var(--node) / 2); width: 1.5px; border-radius: 1px;
  background: linear-gradient(rgba(var(--c), .7), rgba(var(--c2), .7)); }
.steps li:last-child::before { display: none; }
.steps-n { position: relative; z-index: 1; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
  background: linear-gradient(rgba(var(--c), .16), rgba(var(--c), .16)), var(--panel, rgb(13,15,28));
  box-shadow: inset 0 0 0 1.5px rgba(var(--c), .85); color: #fff; font: 600 13px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.steps p { padding-top: 4px; font: 400 16px/1.5 var(--f-b); color: var(--fg-2); text-wrap: pretty; }
.steps b { color: var(--fg); font-weight: 600; }
@media (min-width: 1024px) and (min-height: 801px) {
  .steps { --gap: 20px; }
  .steps p { padding-top: 3px; font-size: 15.5px; }
  .steps b { display: block; margin-bottom: 2px; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
}
/* page dots retired (owner 2026-09-29: the two little bars in the card corner read as an artefact); a paged card turns
   on its own as the visitor scrolls */
.pg-dots, .jr [data-paging] .pg-dots, .pg-bar, .jr [data-paging] .pg-bar { display: none; }
.jr [data-paging] .card--top .headline { padding-right: 0; }

/* the Autopilot card (phones, page 2 of ads-auto; the 3D shows it on desktop): a card from Adkyte's web dashboard, where
   the raise waits for the owner's OK. There is no Adkyte phone app: no app icon, no iOS switch (FEEDBACK.md, director 1) */
.ap { max-width: 380px; margin-top: 20px; padding: 16px 18px 18px; border-radius: 12px; background: #fff; color: #0B0B10;
  box-shadow: inset 0 0 0 1px rgba(11,11,16,.08), 0 1px 2px rgba(0,0,0,.2), 0 18px 40px -18px rgba(0,0,0,.7); }
.ap-h { font: 600 15px/1.3 var(--f-b); color: #0B0B10; }
.ap-b { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(11,11,16,.08); font: 400 15px/1.5 var(--f-b); color: #474A58; text-wrap: pretty; }

/* hub */
.card--hub { width: min(580px, 44vw); }
.hub-stat { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.hub-stat b { font: 800 clamp(48px, 4.4vw, 68px)/.9 var(--f-d); letter-spacing: -.05em; color: var(--fg); }
.hub-stat span { font: 600 15px/1.2 var(--f-d); color: var(--fg-2); }
.hub-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair); }
.hub-h { margin-bottom: 4px; font: 500 13px/1.3 var(--f-b); color: var(--fg-3); }
.hub-col ul { list-style: none; display: grid; }
.hub-col li { display: grid; gap: 1px; padding: 8px 0; }
.hub-col li + li { border-top: 1px solid var(--hair); }
.hub-col b { font: 600 14.5px/1.3 var(--f-b); color: var(--fg); }
.hub-col span { font: 400 13px/1.35 var(--f-b); color: var(--fg-3); }

/* trades: in the journey the 3D helix carries them (the list stays for screen readers); on the stacked page they
   read as a plain run of words */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 20px; }
.chips li { font: 500 15px/1.5 var(--f-b); color: var(--fg-2); }
.chips li:not(:last-child)::after { content: "\00B7"; margin: 0 10px; color: var(--fg-3); }
.jr .chips { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* proof: a plain caption, sentence-case labels, Geist tabular stats, solid bars */
.card--proof { width: min(500px, 38vw); }
.proof-chip { display: block; font: 500 12.5px/1.35 var(--f-b); color: var(--fg-3); }
.proof-big { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; font: 700 clamp(24px, 2vw, 30px)/1 var(--f-d); letter-spacing: -.03em; color: var(--fg); }
.proof-big b { font: 800 clamp(76px, 7.4vw, 118px)/.86 var(--f-d); letter-spacing: -.06em; color: var(--fg); }
.proof-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; padding: 16px 0; border-block: 1px solid var(--hair); }
.proof-rows dt { font: 500 13px/1.3 var(--f-b); color: var(--fg-3); }
.proof-rows dd { margin-top: 6px; font: 600 22px/1 var(--f-b); letter-spacing: -.015em; color: var(--fg); font-variant-numeric: tabular-nums; }
.proof-bars { display: grid; gap: 14px; margin-top: 20px; }
.pb-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 14px/1.2 var(--f-b); color: var(--fg-2); }
.pb-l b { font: 600 15px/1 var(--f-b); color: var(--fg); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pb-t { display: block; height: 6px; margin-top: 8px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.pb-f { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--fg-3); transform-origin: 0 50%; transform: scaleX(var(--w)); }
.pb-f--rev { background: var(--fg); }
.jr .ov--proof .pb-f { transform: scaleX(calc(var(--w) * min(1, .15 + var(--l) * 1.7))); }
/* in the journey the giant 3D "387" beside the panel already says it: the panel keeps it for screen readers only and
   leads with the source line, then the rows (the stacked page keeps the big numeral) */
.jr .ov--proof .proof-big { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jr .ov--proof .proof-rows { margin-top: 14px; }

/* final */
.card--final { width: min(880px, calc(100vw - 48px)); border-radius: 28px; text-align: center; padding: clamp(30px, 3.4vw, 52px) clamp(24px, 4vw, 64px); }
.display--final { font-size: clamp(34px, 4vw, 62px); line-height: .98; max-width: 16ch; margin-inline: auto; }
.card--final .lede { margin: 18px auto 0; text-align: center; max-width: 36em; }
.card--final .actions { margin-top: 26px; }
.card--final .risk { margin-top: 20px; }

/* big screens: the cards grow with the room instead of staying a 560px island */
@media (min-width: 1680px) and (min-aspect-ratio: 17/20) {
  .card { width: clamp(560px, 37vw, 720px); }
  .card--steps { width: clamp(540px, 35vw, 690px); }
  .card--hub, .jr .card--hub { width: clamp(560px, 35vw, 690px); }
  .card--proof { width: clamp(500px, 33vw, 640px); }
  .card--final { width: min(1040px, calc(100vw - 48px)); }
  .lede { font-size: 19px; }
  .steps p, .ticks li { font-size: 17px; }
  .steps b { font-size: 19px; }
  .steps { --node: 34px; }
  .steps-n { font-size: 14px; }
  .eyebrow { font-size: 15px; }
  .cta-note { font-size: 15px; }
}
/* short laptops (1024x768, 1280x720/800, 150% zoom): tighter cards, centred in the room between the bar and the chapter pill */
@media (min-width: 768px) and (min-aspect-ratio: 17/20) and (max-height: 800px) {
  .jr .ov[data-pos="left"], .jr .ov[data-pos="right"] { padding-top: 90px; padding-bottom: 78px; }
  .jr .ov--card .card:not(.card--final) { max-height: calc(100svh - 176px); }
  .card, .card--steps, .card--hub, .card--proof { padding: 24px; }
  .card--bare { padding: 0; }
  .card--steps, .card--proof { width: min(500px, 44vw); }
  .card { width: min(540px, 46vw); }
  .card .eyebrow { margin-bottom: 10px; font-size: 13.5px; }
  .ptitle { margin-bottom: 14px; font-size: 20px; }
  .headline, .card:not(.card--bare) .headline { font-size: clamp(24px, 2.05vw, 28px); line-height: 1.05; }
  .headline--sm { font-size: clamp(21px, 1.8vw, 25px); }
  .card--bare .headline { font-size: clamp(28px, 3vw, 42px); }
  .card--bare .headline--sm { font-size: clamp(24px, 2.3vw, 32px); }
  .lede { margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
  .card--bare .lede { font-size: 15.5px; }
  .steps { --gap: 10px; --node: 26px; }
  .steps-n { font-size: 12px; }
  .steps p { padding-top: 2px; font-size: 14.5px; line-height: 1.45; }
  .ticks { gap: 8px; margin-top: 14px; }
  .ticks li { font-size: 14.5px; line-height: 1.45; gap: 10px; }
  .ticks .i { margin-top: 2px; }
  .card .cta-row--card { margin-top: 16px; gap: 10px 14px; }
  .card .btn { --h: 46px; padding: 0 20px; font-size: 15px; }
  .cta-note { font-size: 13px; }
  .hub-stat { margin-top: 12px; }
  .hub-stat b { font-size: 48px; }
  .chips { margin-top: 14px; }
  .chips li { font-size: 14px; }
  .proof-big { margin-top: 12px; }
  .proof-big b { font-size: clamp(60px, 5.6vw, 76px); }
  .proof-rows { margin-top: 14px; padding: 12px 0; }
  .proof-rows dd { font-size: 19px; }
  .proof-bars { margin-top: 12px; gap: 10px; }
  .fine { margin-top: 8px; }
  .jr .ov[data-pos="bottom"] { padding-bottom: 88px; }
  .card--final { padding: 22px 28px 20px; }
  .display--final { font-size: clamp(30px, 3.2vw, 42px); }
  .card--final .lede { margin-top: 10px; }
  .card--final .actions { margin-top: 16px; }
  .card--final .risk { margin-top: 12px; }
  .statement { font-size: clamp(34px, 3.8vw, 52px); }
  .statement-sub { margin-top: 12px; font-size: 16px; }
  .cta-row { margin-top: 18px; }
}

/* ─────────── Chapter pill ─────────── */
.chapters { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 2px; padding: 6px; border-radius: 999px; color: var(--ink);
  /* SOLID (no backdrop blur): nothing of the page behind it ever shows through its labels */
  background: rgba(255,255,255,.97); box-shadow: inset 0 0 0 1px rgba(11,11,16,.08), 0 8px 24px -12px rgba(22,18,40,.35);
  opacity: 0; visibility: hidden; translate: -50% 14px; pointer-events: none; transition: opacity .5s var(--ease), translate .5s var(--ease), visibility 0s linear .5s; }
.chapters.is-visible { opacity: 1; visibility: visible; translate: -50% 0; pointer-events: auto; transition-delay: 0s; }
/* the pill keeps its own scene (data-pscene): on the dive it turns dark as soon as the phone's screen is behind it */
html[data-pscene="dark"] .chapters { color: #fff; background: rgba(13,15,28,.96); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 12px 32px -18px rgba(0,0,0,.6); }
.ch { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 8px 14px 9px; border-radius: 999px; font: 600 11px/1 var(--f-b); letter-spacing: .12em; text-transform: uppercase; /* the ONE uppercase component on the page */ color: inherit; text-decoration: none; opacity: .62; transition: opacity .3s, background-color .3s; -webkit-tap-highlight-color: transparent; }
.ch:hover, .ch.is-active { opacity: 1; }
.ch-l { white-space: nowrap; }
.ch:hover { background: rgba(127,127,140,.1); }
.ch-t { display: block; width: 62px; height: 2px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, currentColor 18%, transparent); }
.ch-t i { display: block; height: 100%; border-radius: inherit; background: var(--grad-rule); transform-origin: 0 50%; transform: scaleX(0); }
/* the active chapter: its label in full ink and its progress line in the brand gradient (owner feedback #2A) */
.ch.is-active .ch-t { background: color-mix(in srgb, currentColor 22%, transparent); }
/* Pricing reads as the way out: an arrow */
.ch[data-ch="pricing"] .ch-l::after { content: "\2192"; display: inline-block; margin-left: .45em; letter-spacing: 0; font-weight: 700; transition: transform .45s var(--ease); }
.ch[data-ch="pricing"]:hover .ch-l::after { transform: translateX(2px); }

/* ─────────── COMPACT (phones + portrait) ─────────── */
@media (max-width: 767px), (max-aspect-ratio: 17/20) {
  :root { --gutter: 16px; --bar-h: 68px; }
  .bar { padding: max(14px, env(safe-area-inset-top)) 16px 14px; }
  .bar-logo { height: 44px; padding: 0 13px; border-radius: 12px; }
  .bar-logo img { height: 20px; }
  .bar .btn--sm { --h: 44px; padding: 0 16px; font-size: 14.5px; }
  .bar-nav { height: 44px; }
  /* dark scenes: a night shade under the bar, so 3D objects never run bright behind the logo and CTA */
  html.jr[data-scene="dark"] .bar:not(.is-solid)::before { opacity: 1; background: linear-gradient(180deg, rgba(5,6,11,.88) 50%, rgba(5,6,11,0)); }

  .display { font-size: clamp(31px, 9vw, 46px); line-height: .98; letter-spacing: -.045em; }
  .headline { font-size: clamp(24px, 6.6vw, 32px); }
  .headline--sm { font-size: clamp(21px, 5.6vw, 27px); }
  .lede { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  .bigline { font-size: clamp(40px, 12.5vw, 60px); }
  .bigline--ch { font-size: clamp(28px, 8.2vw, 40px); }
  .statement { font-size: clamp(32px, 9.4vw, 44px); }
  .statement-sub { margin-top: 12px; font-size: 15px; }
  .btn { --h: 50px; padding: 0 22px; font-size: 15.5px; }
  .actions { margin-top: 20px; gap: 10px; }
  .cta-row { margin-top: 18px; gap: 10px 14px; }
  .cta-note { font-size: 13px; text-wrap: balance; } /* no one-word last line ('plans') under a statement's button */
  /* in a docked card the note sits beside the button (a short column), not under it: saves a whole row */
  .cta-row--card { flex-wrap: nowrap; gap: 14px; margin-top: 16px; }
  .cta-row--card .btn { flex: none; }
  .cta-row--card .cta-note { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.4; }
  .ticks { gap: 9px; margin-top: 14px; }
  .ticks li { font-size: 14.5px; gap: 10px; }
  .ticks .i { margin-top: 2px; }
  .caption { font-size: 17px; }
  .eyebrow { font-size: 13.5px; }
  .ptitle { font-size: 20px; margin-bottom: 14px; }

  .jr .journey { height: 1350svh; } /* JOURNEY_VH.mobile + 100 */
  .jr .ov:not(.ov--hero) { align-items: flex-end; justify-content: center; padding: 0 16px calc(94px + env(safe-area-inset-bottom)); }
  .jr .ov[data-pos="top"] { align-items: flex-start; padding: calc(78px + env(safe-area-inset-top)) 16px 0; }
  .jr .ov[data-pos="center"] { align-items: center; padding-bottom: 0; }
  /* portrait: above the photo, in the dark gap under the tunnel's innermost ring top */
  .bigline--enter { font-size: clamp(28px, 10.5vw, 46px); }
  .jr .ov[data-seg="enter"] { --enter-fs: clamp(28px, 10.5vw, 46px); --enter-y: 36svh; align-items: flex-start; padding: calc(var(--enter-y) - var(--enter-fs) * .49) 16px 0; }
  /* (the desktop cap of 62vw is narrower than the one-line phrase on a phone: it overflowed to the right edge) */
  .jr .ov[data-seg="enter"] .bigline--enter { max-width: none; }
  .jr .ov[data-pos="bottom"] .ov-inner { text-align: left; }
  .jr .ov[data-pos="bottom"] .eyebrow--center { justify-content: flex-start; }
  .jr .ov[data-pos="bottom"] .bigline, .jr .ov[data-pos="bottom"] .statement, .jr .ov[data-pos="bottom"] .statement-sub { text-align: left; margin-inline: 0; }
  .jr .ov[data-pos="bottom"] .cta-row { justify-content: flex-start; }
  .jr .ov--final .ov-inner, .jr .ov--final .eyebrow--center { text-align: center; }
  .jr .ov .ov-inner { width: 100%; }
  .jr .ov--big .ov-inner { width: auto; }
  .jr .ov--chapter .ov-inner::before, .jr .ov--statement .ov-inner::before { inset: -40px -24px; background: radial-gradient(farthest-side, var(--scrim) 45%, transparent 100%); }
  .jr .ov--big .ov-inner::before { inset: -56px -40px; background: radial-gradient(closest-side, rgba(5,6,11,.84) 50%, transparent 100%); }

  .card, .card--steps, .card--hub, .card--proof { width: 100%; padding: 20px 20px 22px; }
  .card--bare { padding: 0; }
  [data-theme="dark"] .card { --panel: rgb(13,15,28); } /* opaque: bright device screens never ghost through */
  .card .eyebrow { margin-bottom: 10px; }
  .card:not(.card--bare) .headline { font-size: clamp(24px, 6.6vw, 28px); line-height: 1.05; }
  .card--bare .headline { font-size: clamp(30px, 8.6vw, 34px); line-height: 1.02; }
  .card--bare .headline--sm { font-size: clamp(26px, 7.2vw, 30px); line-height: 1.04; }
  /* bare copy docks at the bottom on its own scrim; the 3D subject in the top half is never dimmed.
     site.js moves the ramp to the copy's top (--sc1/--sc2); the defaults are DESIGN-V2's 390x844 numbers */
  .jr .ov--bare::before, .jr .ov--bare[data-pos]::before, .jr .ov--scene::before, .jr .ov--scene[data-pos]::before { background: linear-gradient(0deg, rgba(var(--srgb),.95) 0%, rgba(var(--srgb),.9) var(--sc1, 30%), rgba(var(--srgb),0) var(--sc2, 47%)); }
  /* scenes: the chapter label + line sit bare on that scrim, above the page's card */
  .chl { font-size: 14px; margin-bottom: 8px; }
  .chline { font-size: clamp(26px, 7.2vw, 31px); line-height: 1.04; max-width: none; }
  .chline--big { font-size: clamp(30px, 8.4vw, 36px); }
  .chead { margin-bottom: 14px; }
  .chead--center, .chead--center .chline { text-align: left; margin-inline: 0; }
  .chead--center .chl { justify-content: flex-start; }
  .card--hub .hub-stat { justify-content: flex-start; }
  .card--hub .hub-top { justify-items: start; } /* (the '15s' line sits under the left-aligned chapter line, not centred) */
  .hub-stat .num { font-size: 48px; }
  .headline--sub { margin-top: 0; }
  html:not(.jr) .headline--sub { margin-top: 22px; } /* stacked page: both pages show, one under the other */
  .card--bare .headline--sub { font-size: clamp(26px, 7.2vw, 30px); }
  .card--join .pg-dots { top: 18px; right: 18px; }
  .steps { --node: 24px; }
  .steps li { column-gap: 12px; }
  .steps-n { font-size: 11.5px; }
  .card--final { width: 100%; padding: 24px 20px 22px; }
  .display--final { font-size: clamp(28px, 8vw, 38px); }
  .card--final .lede { font-size: 14.5px; }
  .card--final .actions { margin-top: 18px; flex-wrap: nowrap; }
  .card--final .actions .btn { flex: 0 1 auto; padding: 0 18px; }
  .card--final .risk { margin-top: 14px; font-size: 13px; }

  .steps { --gap: 12px; }
  .steps p { padding-top: 2px; font-size: 14px; line-height: 1.45; }

  .ap { margin-top: 14px; }
  .hub-stat { margin-top: 12px; }
  .hub-lists { gap: 16px; margin-top: 0; padding-top: 0; border-top: 0; }
  .hub-col li { padding: 6px 0; }
  .hub-col b { font-size: 13.5px; }
  .hub-col span { font-size: 12.5px; }
  .chips { margin-top: 14px; }
  .chips li { font-size: 14px; }
  .proof-big { margin-top: 14px; }
  .proof-big b { font-size: clamp(64px, 18vw, 84px); }
  .proof-rows { margin-top: 16px; padding: 14px 0; }
  .proof-rows dd { font-size: 19px; }
  .proof-bars { margin-top: 14px; gap: 10px; }


  /* hero on phones: at the top of the page, scrolling away naturally */
  .jr .ov.ov--hero { position: absolute; inset: 0 0 auto 0; display: block; min-height: 100vh; min-height: 100svh; padding: calc(74px + env(safe-area-inset-top)) 16px 0; overflow: clip; }
  .hero { width: 100%; }
  /* scrolling up under the see-through bar, the copy is gone by the bar's bottom edge (site.js keeps --hm there) */
  html.jr[data-shade="1"] .ov--hero .ov-inner { -webkit-mask-image: linear-gradient(180deg, transparent var(--hm, 0px), #000 calc(var(--hm, 0px) + 20px)); mask-image: linear-gradient(180deg, transparent var(--hm, 0px), #000 calc(var(--hm, 0px) + 20px)); }
  /* the offer pill, slim on phones (the copy block keeps the height the studio's portrait framing was tuned on) */
  .offer { gap: 8px; margin-bottom: 9px; padding: 3px 12px 3px 3px; font-size: 13px; }
  .offer-pill { padding: 2px 9px; font-size: 11.5px; }
  /* 14.5px: the sub names all three platforms (director 2) and still runs to four lines at 390, so the swipe cue keeps
     its place above the 3D phone */
  .hero .lede { margin-top: 12px; font-size: 14.5px; line-height: 1.46; }
  .hero .actions { margin-top: 18px; flex-wrap: nowrap; }
  .hero .actions .btn { flex: 0 1 auto; padding: 0 18px; }
  .risk { margin-top: 14px; gap: 5px 12px; font-size: 12.5px; }
  /* phones: the risk lines are a plain column of accent checks */
  .hero .risk { flex-direction: column; gap: 4px; }
  .risk .i { width: 14px; height: 14px; }
  /* the proof line: in the hero on tall phones only. Under 780px there is no room between the risk lines and the 3D
     phone, and it is never parked beside the caption or a chapter line (that read as "one photo = 387 leads"): the
     proof card near the end shows every figure with its label, and the Pricing pill jumps there */
  .pchip { display: none; margin-top: 9px; }
  .pchip-main { font-size: 14px; }
  .pchip-sub { font-size: 12px; }
  /* phones: the swipe cue sits at the foot of the first screen (thumb zone) unless the world gives an
     anchor, in which case it hovers just above the 3D phone like the reference */
  .cue--float { gap: 6px; }
  .cue--float .cue-arrow { display: none; }
  /* a slimmer pill (the chevron inside says which way); the tap area stays 44px tall */
  .cue-pill { position: relative; min-height: 36px; padding: 8px 16px 8px 12px; font-size: 14.5px; font-weight: 700; gap: 8px; }
  .cue-pill::after { content: ""; position: absolute; inset: -4px 0; }
  .cue-arrow { width: 18px; height: 18px; }

  .chapters { bottom: calc(12px + env(safe-area-inset-bottom)); padding: 4px; }
  .ch { justify-content: center; gap: 6px; min-height: 44px; padding: 13px 12px 12px; font-size: 11px; opacity: 1; }
  .ch:not(.is-active) .ch-l { opacity: .75; }
  html[data-pscene="dark"] .ch:not(.is-active) .ch-l { opacity: 1; color: rgba(255,255,255,.62); }
  .ch-t { width: 44px; }
}
@media (min-width: 768px) and (max-aspect-ratio: 17/20) and (min-height: 780px), (max-width: 767px) and (min-height: 780px) {
  .pchip { display: block; }
}
/* portrait tablets: the copy column centres over the centred bench */
@media (min-width: 700px) and (max-aspect-ratio: 17/20) {
  .hero { max-width: 620px; margin-inline: auto; text-align: left; }
}
@media (max-width: 767px) and (max-height: 720px), (max-aspect-ratio: 17/20) and (max-height: 720px) {
  .jr .ov.ov--hero { padding-top: calc(70px + env(safe-area-inset-top)); }
  .display:not(.display--final) { font-size: clamp(29px, 8.4vw, 40px); }
  .display.display--final { font-size: clamp(26px, 7.4vw, 34px); }
  .hero .lede { font-size: 14.5px; }
  .card, .card--steps, .card--hub, .card--proof { padding: 17px 18px 18px; }
  .card--final { padding: 20px 18px 18px; }
  .card .eyebrow { margin-bottom: 10px; }
  .card .btn { --h: 46px; }
  .steps { --gap: 8px; }
}
@media (min-width: 560px) and (max-width: 767px), (min-width: 560px) and (max-aspect-ratio: 17/20) {
  .jr .ov:not(.ov--hero) .ov-inner { max-width: 560px; }
  .hero { max-width: 620px; }
  .pchip { display: block; }
}
/* phones up to 420 wide: a card's CTA note sits under its button (as on ads-approve), not squeezed beside it into
   3-4 lines or a one-word last line */
@media (max-width: 420px) {
  .cta-row--card:not(.cta-row--inline) { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 10px; }
  .cta-row--card:not(.cta-row--inline) .cta-note { flex: none; max-width: 100%; text-wrap: balance; }
  /* a short note ('Included in every plan') stays beside its button: a whole row back for the 3D above the card */
  .cta-row--inline .cta-note { text-wrap: balance; }
}
/* narrow phones (360 and under): a one-line offer, nothing wider than the screen */
@media (max-width: 379px) {
  .offer { font-size: 12.5px; }
  .hero .lede { font-size: 14px; line-height: 1.45; }
  /* the sub is five lines here: a tighter stack keeps the swipe cue above the 3D phone (360x740) */
  .jr .hero .offer { margin-bottom: 10px; }
  .jr .hero .actions { margin-top: 14px; }
  .jr .hero .risk { margin-top: 10px; gap: 2px; }
  .pswitch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pswitch button { min-width: 0; padding: 0 12px; font-size: 13.5px; }
  .pswitch button svg { display: none; }
  .ch { padding-inline: 9px; letter-spacing: .1em; }
  .ch-t { width: 36px; }
}
@media (max-width: 359px) {
  .hero .actions { flex-wrap: wrap; }
  .card--final .actions { gap: 8px; }
  .card--final .actions .btn { padding: 0 14px; font-size: 14.5px; }
}
@media (max-width: 319px) { .card--final .actions { flex-wrap: wrap; } }
@media (max-width: 339px) {
  .pswitch button { padding: 0 8px; font-size: 13px; }
  .agsum { flex-wrap: wrap; }
  .agsum b { font-size: 30px; }
  .agpanel, .ag-buy { padding: 16px; }
  .ch { padding-inline: 7px; font-size: 10px; letter-spacing: .08em; }
  .bar .btn--sm { padding: 0 13px; }
}

/* ─────────── STACKED MODE (no JS, reduced motion, fallback) ─────────── */
html:not(.jr) .journey, html:not(.jr) .overlays { display: block; }
html:not(.jr) .ov { position: relative; padding: clamp(28px, 4vw, 56px) var(--gutter); }
html:not(.jr) .ov[data-theme="dark"] { color: #fff; background: #06070D; }
html:not(.jr) .ov[data-theme="light"] { background: var(--paper); }
html:not(.jr) .ov-still { position: relative; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 9; isolation: isolate; }
html:not(.jr) .ov-still img { width: 100%; height: 100%; object-fit: cover; }
html:not(.jr) .ov-still.is-missing img { display: none; }
/* a still that failed to load (no JS to mark it) paints the placeholder over the broken-image icon:
   an <img>'s ::after only renders when the image is broken */
html:not(.jr) .ov-still img { position: relative; background: inherit; }
html:not(.jr) .ov-still img::after { content: ""; position: absolute; inset: 0; background: inherit; }
html:not(.jr) .ov-still--hero img::after { background: radial-gradient(90% 80% at 68% 50%, #FBFBF9 0%, #F4F3EF 46%, #EAE8E2 100%); }
html:not(.jr) .ov--caption .ov-still.is-missing, html:not(.jr) .ov--big .ov-still.is-missing, html:not(.jr) .ov--chapter .ov-still.is-missing { aspect-ratio: 21 / 7; }
html:not(.jr) .ov[data-theme="dark"] .ov-still { background:
  radial-gradient(60% 70% at 70% 30%, rgba(99,102,241,.34), transparent 70%),
  radial-gradient(40% 50% at 20% 85%, rgba(244,63,94,.16), transparent 70%),
  repeating-linear-gradient(90deg, rgba(120,140,255,.07) 0 1px, transparent 1px 64px),
  repeating-linear-gradient(0deg, rgba(120,140,255,.07) 0 1px, transparent 1px 64px),
  linear-gradient(180deg, #0B1231, #070A18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
html:not(.jr) .ov[data-theme="light"] .ov-still { background: radial-gradient(70% 80% at 65% 45%, #FDFDFB, #EDEBE5 80%); box-shadow: inset 0 0 0 1px rgba(11,11,16,.05); }

/* stacked: hero fills the first screen, over the poster, exactly like the journey's opening */
html:not(.jr) .ov--hero { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 92px var(--gutter) 44px; overflow: hidden; background: radial-gradient(90% 80% at 68% 50%, #FBFBF9 0%, #F4F3EF 46%, #EAE8E2 100%); }
html:not(.jr) .ov-still--hero { position: absolute; inset: 0; z-index: 0; border-radius: 0; aspect-ratio: auto; background: none !important; box-shadow: none !important; }
html:not(.jr) .ov--hero .ov-inner { position: relative; z-index: 1; }
html:not(.jr) .ov--hero .cue { display: none; }

/* stacked: cards and scenes pair with their still (the scene's 3D end state; a missing still paints a quiet placeholder) */
html:not(.jr) .ov--card:not(.ov--final), html:not(.jr) .ov--scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: clamp(20px, 3vw, 48px); max-width: 1400px; margin-inline: auto; }
html:not(.jr) .ov--card:not(.ov--final) .card, html:not(.jr) .scene, html:not(.jr) .card--hub { width: auto; }
html:not(.jr) .ov--card[data-pos="left"] .ov-still, html:not(.jr) .ov--scene[data-pos="left"] .ov-still { grid-column: 2; grid-row: 1; }
html:not(.jr) .ov--card[data-pos="left"] .ov-inner, html:not(.jr) .ov--scene[data-pos="left"] .ov-inner { grid-column: 1; grid-row: 1; }
html:not(.jr) .ov--card[data-pos="right"] .ov-still, html:not(.jr) .ov--card[data-pos="bottom"]:not(.ov--final) .ov-still { grid-column: 1; grid-row: 1; }
html:not(.jr) .ov--card[data-pos="right"] .ov-inner, html:not(.jr) .ov--card[data-pos="bottom"]:not(.ov--final) .ov-inner { grid-column: 2; grid-row: 1; }
/* the hub on the stacked page: its chapter line and 15s over the two lists, left-aligned beside the still */
html:not(.jr) .ov--hub .chead--center, html:not(.jr) .ov--hub .chead--center .chline { text-align: left; margin-inline: 0; }
html:not(.jr) .ov--hub .chead--center .chl, html:not(.jr) .card--hub .hub-stat { justify-content: flex-start; }
html:not(.jr) .card--hub .hub-top { justify-items: start; }
html:not(.jr) .card--hub { text-align: left; }
/* the stacked hero keeps its three labels, on its still (js/site.js places them from the poster's anchors) */
html:not(.jr) .ov--hero .callouts { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* stacked: big type sits on its still like a title card */
html:not(.jr) .ov--caption, html:not(.jr) .ov--big, html:not(.jr) .ov--chapter, html:not(.jr) .ov--statement, html:not(.jr) .ov--final { display: grid; max-width: 1400px; margin-inline: auto; }
html:not(.jr) .ov--big > *, html:not(.jr) .ov--chapter > *, html:not(.jr) .ov--statement > * { grid-area: 1 / 1; }
html:not(.jr) .ov--caption .ov-still, html:not(.jr) .ov--big .ov-still, html:not(.jr) .ov--chapter .ov-still { aspect-ratio: 21 / 9; }
/* the caption is a figure caption above its still (the still frames the phone right to its top edge) */
html:not(.jr) .ov--caption > * { grid-area: auto; }
html:not(.jr) .ov--caption .ov-inner { order: -1; justify-self: center; margin: 0 0 16px; }
html:not(.jr) .ov--big .ov-inner { align-self: end; justify-self: center; padding: 24px 24px clamp(20px, 5vw, 64px); }
/* the still is positioned (isolation), so the type over it must be too, or it paints underneath */
html:not(.jr) .ov--big .ov-inner, html:not(.jr) .ov--caption .ov-inner { position: relative; z-index: 1; }
html:not(.jr) .ov--big .bigline--enter { color: #fff; text-shadow: 0 2px 24px rgba(5,6,11,.8); }
html:not(.jr) .ov--chapter .ov-inner, html:not(.jr) .ov--statement .ov-inner { align-self: end; justify-self: center; padding: 0 24px clamp(24px, 4vw, 52px); position: relative; }
html:not(.jr) .ov--chapter .ov-still::after, html:not(.jr) .ov--statement .ov-still::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(5,6,11,.82)); }
html:not(.jr) .ov--statement .ov-still { aspect-ratio: 16 / 8; }
/* statements: the scene's subject sits mid-frame, so the big line goes under the still, not across it */
html:not(.jr) .ov--statement > .ov-inner { grid-area: 2 / 1; align-self: start; padding: clamp(22px, 3vw, 40px) 24px 0; }
html:not(.jr) .ov--statement .ov-still::after { display: none; }
html:not(.jr) .ov--final { justify-items: center; padding-bottom: clamp(40px, 6vw, 88px); }
html:not(.jr) .ov--final .ov-still { width: 100%; aspect-ratio: 21 / 9; }
html:not(.jr) .ov--final .ov-inner { margin-top: clamp(-120px, -8vw, -60px); position: relative; z-index: 1; }
html:not(.jr) .ov--final .card { width: min(880px, 100%); }
html:not(.jr) .chapters .ch-t i { transition: transform .2s linear; }
@media (max-width: 767px), (max-aspect-ratio: 17/20) {
  html:not(.jr) .ov { padding: 20px 16px; }
  html:not(.jr) .ov-still { border-radius: 20px; aspect-ratio: 4 / 5; }
  html:not(.jr) .ov-still img { object-position: 50% 0; }
  /* same composition as the journey's phone opening, so a late switch to this layout doesn't jump */
  html:not(.jr) .ov--hero { display: block; padding: calc(74px + env(safe-area-inset-top)) 16px 28px; }
  html:not(.jr) .ov-still--hero { border-radius: 0; aspect-ratio: auto; }
  html:not(.jr) .ov-still--hero img { object-position: 50% 76%; }
  html:not(.jr) .ov-still.is-missing { aspect-ratio: 16 / 11; }
  html:not(.jr) .ov--card .ov-still.is-missing { aspect-ratio: 16 / 7; }
  html:not(.jr) .ov--card:not(.ov--final), html:not(.jr) .ov--scene { display: block; }
  html:not(.jr) .ov--card:not(.ov--final) .ov-inner, html:not(.jr) .ov--scene .ov-inner { margin-top: -64px; position: relative; }
  html:not(.jr) .ov--scene .ov-inner { margin-top: 20px; }
  /* bare copy has no box to sit on the still with: it reads under it */
  html:not(.jr) .ov--card.ov--bare:not(.ov--final) .ov-inner { margin-top: 20px; }
  html:not(.jr) .ov--caption .ov-still, html:not(.jr) .ov--big .ov-still, html:not(.jr) .ov--chapter .ov-still, html:not(.jr) .ov--statement .ov-still { aspect-ratio: 4 / 5; }
  html:not(.jr) .ov--chapter .ov-inner { padding: 0 18px 24px; }
  html:not(.jr) .ov--statement .ov-inner { padding: 20px 4px 8px; }
  html:not(.jr) .ov--statement .ov-still { aspect-ratio: 1 / 1; }
  html:not(.jr) .ov--final .ov-still { aspect-ratio: 4 / 5; }
  html:not(.jr) .ov--final .ov-inner { margin-top: -110px; width: 100%; }
}

/* ─────────── After the journey (COMPACT.md: one slim marquee, compact pricing, the FAQ in two columns, a one-row footer) ─────────── */
.after { position: relative; z-index: 20; background: var(--paper); }
.jr .after { border-radius: 28px 28px 0 0; box-shadow: 0 -40px 80px -50px rgba(11,11,16,.45); }
.wrap { width: min(1160px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* trades marquee: one slim row */
.marq { overflow: hidden; padding: 18px 0; border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marq-track { display: flex; width: max-content; animation: marq 40s linear infinite; }
.marq:hover .marq-track, .marq:focus-within .marq-track, .marq.is-away .marq-track { animation-play-state: paused; }
@media (hover: none) { .marq-track { animation-iteration-count: 2; } }
.marq-list { list-style: none; display: flex; align-items: center; }
.marq-list li { display: flex; align-items: center; gap: 22px; padding-right: 22px; font: 700 clamp(18px, 1.7vw, 24px)/1 var(--f-d); letter-spacing: -.03em; white-space: nowrap; color: var(--ink); }
.marq-list li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-rule); opacity: .8; }
@keyframes marq { to { transform: translateX(-50%); } }

/* pricing: the switch, three compact tiers with every bullet, side by side (phones: a swipe row), the agency view */
.pricing { padding: clamp(48px, 5.4vw, 76px) 0 clamp(40px, 4.4vw, 64px); background: radial-gradient(60% 40% at 50% 0%, #FBFAF7, transparent 70%); }
.pricing .shead { max-width: 760px; margin: 0 auto; text-align: center; }
.pricing .section-title { margin-inline: auto; max-width: 20ch; font-size: clamp(32px, 3.6vw, 52px); }
.pricing .slede { margin: 12px auto 0; max-width: 36em; text-wrap: balance; font-size: clamp(15px, 1.1vw, 17px); }
.pswap .pv-a { display: none; }
.pricing[data-view="agency"] .pswap.on .pv-a { display: inline; }
.pricing[data-view="agency"] .pswap.on .pv-b { display: none; }
.pswitch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; max-width: 100%; margin: 24px auto 0; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px -20px rgba(11,11,16,.35); }
.pswitch[hidden] { display: none; }
.pswitch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: none; font: 700 15px/1 var(--f-d); color: var(--body); cursor: pointer; transition: color .4s var(--ease); }
.pswitch button:hover { color: var(--ink); }
.pswitch button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pswitch button[aria-selected="true"] { color: #fff; }
.pswitch i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--grad-btn); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px -10px rgba(124,58,237,.55); transition: transform .55s var(--ease); }
.pswitch[data-on="agency"] i { transform: translateX(100%); }
.pv-in { animation: pv-in .6s var(--ease) both; }
@keyframes pv-in { from { opacity: 0; transform: translateY(14px); } }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,16,.06), 0 1px 0 rgba(0,0,0,.03), 0 22px 50px -34px rgba(15,18,30,.34); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tier:hover { transform: translateY(-3px); }
.tier-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tier h3 { font: 700 19px/1.1 var(--f-d); letter-spacing: -.02em; }
.tier .tag, .ag-price .tag { margin-top: 8px; font: 400 14.5px/1.45 var(--f-b); color: var(--body); max-width: 32ch; }
@media (min-width: 901px) { .tier .tag { min-height: 2.9em; } }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px; }
.price b { font: 800 clamp(40px, 3.6vw, 50px)/1 var(--f-d); letter-spacing: -.05em; }
.price s { font: 600 20px/1 var(--f-d); opacity: .42; }
.tier--hot .price s { opacity: .62; }
.price em { font: 600 15px/1 var(--f-d); font-style: normal; opacity: .6; }
.after-l { margin-top: 8px; font: 500 14px/1.35 var(--f-b); color: var(--body); }
.tlist { list-style: none; display: grid; gap: 8px; margin: 16px 0 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.tlist li, .aglist li { display: flex; gap: 10px; font: 500 14.5px/1.4 var(--f-b); }
.tlist .i, .aglist .i { width: 17px; height: 17px; margin-top: 1.5px; color: #7c3aed; }
.tier .btn { margin-top: auto; }
.tier--hot { color: #fff; background: radial-gradient(120% 60% at 20% 0%, rgba(124,58,237,.16), rgba(124,58,237,0) 60%), #0C0C14; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 64px -34px rgba(15,18,30,.6); }
.tier--hot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding-top: 1px; pointer-events: none; background: var(--grad-rule); opacity: .5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tier--hot .tag { color: var(--body-d); }
.tier--hot .after-l { color: rgba(255,255,255,.82); }
.tier--hot .tlist { border-color: rgba(255,255,255,.1); }
.tier--hot .tlist .i { color: #B9A8FF; }
/* the Starter price in the brand gradient (the light gradient on the dark card) */
.tier--hot .num { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* 'Recommended': the brand gradient as a small solid tag (no glow) */
.tier-pop { padding: 5px 9px; border-radius: 6px; font: 700 12px/1 var(--f-b); color: #fff; background: var(--grad-btn); }

.agencyline { margin-top: 18px; text-align: center; font: 500 15px/1.4 var(--f-b); color: var(--body); }
.agencyline a { display: inline-block; padding: 12px 4px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(109,40,217,.4); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.agencyline a:hover { text-decoration-color: var(--acc); }
.agwrap { margin-top: 36px; }
.pricing[data-view="agency"] .agwrap { margin-top: 26px; }
.agpanel { padding: clamp(22px, 2.6vw, 36px); border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,16,.06), 0 30px 70px -40px rgba(15,18,30,.36); }
.ag-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 48px); align-items: start; }
.ag-price h3 { font: 700 19px/1.1 var(--f-d); letter-spacing: -.02em; }
.agtiers { list-style: none; display: grid; gap: 6px; margin-top: 16px; }
.agtiers li { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 12px; font: 600 15px/1 var(--f-d); background: #F5F4F0; transition: background-color .35s var(--ease), color .35s, box-shadow .35s; }
.agtiers li small { font-weight: 500; opacity: .6; }
.agtiers li b { font-weight: 800; font-size: 16.5px; letter-spacing: -.02em; }
.agtiers li.on { color: #fff; background: #0C0C14; }
.agnote { margin-top: 12px; font: 400 14px/1.5 var(--f-b); color: var(--body); }
.ag-buy { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2vw, 26px); border-radius: 20px; background: linear-gradient(180deg, #F8F7FC, #F3F2EE); box-shadow: inset 0 0 0 1px var(--line); }
.agcalc[hidden] { display: none; }
.agcalc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.agcalc-h label { font: 600 15px/1.2 var(--f-d); }
.agcalc-h output { font: 800 42px/1 var(--f-d); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.agcalc-r { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.agstep { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -8px rgba(0,0,0,.3); cursor: pointer; transition: transform .3s var(--ease), opacity .3s; }
.agstep:hover { transform: scale(1.06); }
.agstep:active { transform: scale(.94); }
.agstep svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.agstep[aria-disabled="true"] { opacity: .35; cursor: default; transform: none; }
.agrange { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.agrange::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #7c3aed var(--p, 0%), rgba(11,11,16,.1) var(--p, 0%)); }
.agrange::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #7c3aed var(--p, 0%), rgba(11,11,16,.1) var(--p, 0%)); }
.agrange::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 7px #7c3aed, 0 0 0 1px rgba(11,11,16,.08), 0 4px 10px -4px rgba(11,11,16,.35); }
.agrange::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 7px #7c3aed, 0 0 0 1px rgba(11,11,16,.08), 0 4px 10px -4px rgba(11,11,16,.35); }
.agsum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 16px/1 var(--f-d); color: var(--body); }
.agsum b { font: 800 34px/1 var(--f-d); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.agsum em { margin-left: 4px; font: 600 15px/1 var(--f-d); font-style: normal; opacity: .6; }
.aghint { min-height: 1.4em; margin-top: 8px; font: 500 14px/1.4 var(--f-b); color: var(--ink); }
.agfine { font: 400 13px/1.5 var(--f-b); color: var(--muted); }
/* the two 'gets' lists: a tap-to-open disclosure under the calculator */
.ag-more { margin-top: 20px; border-top: 1px solid var(--line); }
.ag-more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 0 0; list-style: none; cursor: pointer; font: 600 15px/1.3 var(--f-b); color: var(--ink); }
.ag-more summary::-webkit-details-marker { display: none; }
.ag-more summary i, .qa summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); transition: transform .5s var(--ease), background-color .3s; }
.ag-more summary i::before, .ag-more summary i::after, .qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 999px; background: var(--ink); transition: background-color .3s; }
.ag-more summary i::after, .qa summary i::after { transform: rotate(90deg); }
.ag-more[open] summary i, .qa[open] summary i { transform: rotate(45deg); background: var(--grad-btn); }
.ag-more[open] summary i::before, .ag-more[open] summary i::after, .qa[open] summary i::before, .qa[open] summary i::after { background: #fff; }
.ag-get { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.4vw, 48px); padding-top: 18px; }
.aglist h4 { margin-bottom: 12px; font: 600 13px/1.3 var(--f-b); color: var(--body); }
.aglist ul { list-style: none; display: grid; gap: 8px; }

/* FAQ: the eight questions as closed accordions, two columns on desktop */
.faq { padding: clamp(44px, 5vw, 72px) 0 clamp(40px, 4.4vw, 64px); border-top: 1px solid var(--line); }
.faq-head { text-align: center; }
.faq-head .kick { justify-content: center; }
.faq-head .section-title { font-size: clamp(30px, 3.2vw, 46px); }
.faq-head .slede { margin-top: 10px; }
.qas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 26px; align-items: start; }
.qcol { padding: 2px 22px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,16,.06), 0 22px 50px -38px rgba(15,18,30,.34); }
.qa + .qa { border-top: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; list-style: none; cursor: pointer; font: 700 16.5px/1.3 var(--f-d); letter-spacing: -.012em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover i { background: #E9E7E1; }
.qa[open] summary:hover i { background: var(--grad-btn); }
.qa-a { overflow: hidden; }
.qa-a p { padding: 0 44px 18px 0; font: 400 15px/1.6 var(--f-b); color: var(--body); }
.faq-cta { margin-top: 26px; }

/* footer: one compact row */
.foot { padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); background: #EDECE7; border-top: 1px solid var(--line); }
.jr .foot { position: relative; z-index: 20; }
.frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.flogo { height: 22px; width: auto; }
.flinks { display: flex; align-items: center; gap: 4px; font: 500 14px/1.3 var(--f-b); color: var(--ink); }
.flinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; text-decoration: none; }
.flinks a:hover { text-decoration: underline; text-underline-offset: 3px; }
.flinks span { color: var(--muted); }
.ftm { flex: 1 1 24em; font: 400 13px/1.5 var(--f-b); color: var(--body); }
.flink { min-height: 44px; padding: 0 2px; border: 0; background: none; font: 500 13px/1 var(--f-b); color: var(--ink); text-decoration: underline; text-decoration-color: rgba(11,11,16,.25); text-underline-offset: 4px; cursor: pointer; }
.flink:hover { text-decoration-color: currentColor; }
.flink[hidden] { display: none; }

@media (max-width: 900px) {
  /* phones + small tablets: the tiers are a horizontal swipe row (each card whole, snapping), Starter first */
  .tiers { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 12px; margin-top: 20px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .tiers::-webkit-scrollbar { display: none; }
  .tier { scroll-snap-align: start; }
  .tier:hover { transform: none; }
  .ag-top, .ag-get { grid-template-columns: minmax(0, 1fr); }
  .qas { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qas .qcol + .qcol { margin-top: -1px; }
  .qcol:first-child { border-radius: 20px 20px 0 0; }
  .qcol:last-child { border-radius: 0 0 20px 20px; }
  .qcol + .qcol .qa:first-child { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .pswitch button { padding: 0 14px; font-size: 14px; gap: 7px; }
  .tier { padding: 22px 20px 20px; }
  .agpanel { padding: 18px; }
  .ag-buy { padding: 16px; }
  .qcol { padding: 0 16px; }
  .qa summary { min-height: 56px; padding: 12px 0; font-size: 16px; }
  .qa-a p { padding-right: 0; font-size: 15px; }
  .frow { gap: 2px 14px; }
  .ftm { flex-basis: 100%; }
}
/* phones: the chapter pill stays over pricing and the FAQ, so the page ends with room to scroll clear of it */
@media (max-width: 767px), (max-aspect-ratio: 17/20) {
  .jr .faq { padding-bottom: calc(24px + var(--pill-space, 70px)); }
}

/* scroll reveals for the normal page after the journey (JS only; no-JS and reduced motion see everything) */
.js .rv:not(.in) { opacity: 0; transform: translate3d(0, 26px, 0); }
.js .rv { transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .js .rv:not(.in) { opacity: 1; transform: none; } }

/* touch devices and the low tier: no live blur behind cards and the pill (it costs a full-screen pass per frame
   over a moving 3D scene); a near-solid glass reads the same. Desktop keeps the blur. */
@media (hover: none) {
  .jr .card { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .jr [data-theme="dark"] .card { --panel: rgb(13,15,28); }
}
html.lowq .card { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.lowq [data-theme="dark"] .card { --panel: rgb(13,15,28); }

/* ─────────── misc ─────────── */
.hud { position: fixed; left: 12px; bottom: 40px; z-index: 90; padding: 8px 10px; border-radius: 6px; font: 600 11px/1.45 ui-monospace, Menlo, monospace; color: #e6e8ff; background: rgba(8,9,16,.78); white-space: pre; pointer-events: none; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.fb, html:not(.js) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html.fb, html:not(.js) { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marq-track { animation: none; }
}