/* ============================================================================
   La Línea — v5 daylight product-true rebuild for predicthere.com
   WHITE one-world art direction · tokens ported 1:1 from the live product
   (app/globals.css [data-theme="light"] + tailwind.config.ts). Display face =
   Barlow Condensed (the product's --font-display); body = Inter; mono = IBM Plex.
   Standalone sheet — the night build keeps styles.css untouched.
   ==========================================================================*/

:root {
  /* ---- product light-theme tokens (exact, from app/globals.css) ---- */
  --bg:            #f7f8fa;   /* site background                         */
  --bg-elev:       #ffffff;   /* elevated surfaces / ghost button        */
  --bg-card:       #ffffff;   /* cards                                   */
  --bg-panel:      #f0f3f8;   /* panels / nav-link hover                 */
  --fg:            #0a1120;   /* primary text (near-black)               */
  --fg-soft:       rgba(10, 17, 32, 0.86);
  --muted:         rgba(10, 17, 32, 0.56);
  --border:        #e5e8ef;
  --border-strong: #cdd5e1;
  --accent:        #0284c7;   /* product light brand — primary button    */
  --accent-hover:  #0369a1;
  --accent-soft:   rgba(2, 132, 199, 0.12);
  --accent-fg:     #ffffff;
  --chart-line:    #0a72e8;   /* product light odds line                 */
  --brand-here:    #0059fd;   /* canonical wordmark "Here" blue           */
  --gold:          #b45309;
  --yes-fg:        #15803d;   /* product card-btn yes (light)            */
  --no-fg:         #b91c1c;   /* product card-btn no  (light)            */
  --tie-fg:        #b45309;   /* product card-btn tie (light)            */

  /* the footage's blue river reads ~#0093fd; La Línea accents echo it */
  --line:          #0093fd;

  /* product shadows (light) */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-lift: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 12px 24px -8px rgba(16, 24, 40, 0.1);
  --shadow-pop:  0 20px 48px -12px rgba(16, 24, 40, 0.18);

  --display: "Barlow Condensed", "Inter", system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --edge: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

/* soft light backdrop beneath everything (cheap, static) */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #fbfcfe 34%, var(--bg) 70%);
  z-index: -2;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
::selection { background: rgba(2, 132, 199, 0.18); color: var(--fg); }

/* keyboard focus — crisp accent ring on interactive controls. Keyboard-only
   (:focus-visible), so no change for mouse or at-rest. Makes focus unmistakable
   on the CTA, language toggle, chapter-nav dots, links, FAQ, progress ring —
   the default thin auto-outline was easy to miss on the tiny controls. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- buttons
   ported from the product's .btn-primary / .btn-ghost (globals.css) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 46px; padding: 0 1.4rem;
  border-radius: 10px;                 /* product button radius */
  font-family: var(--body); font-weight: 600; font-size: 0.95rem;
  letter-spacing: -0.005em; white-space: nowrap;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.16); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary--lg { min-height: 56px; padding: 0 2rem; font-size: 1.06rem; }
.btn-ghost {
  color: var(--fg-soft); font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn-ghost:active { transform: translateY(1px); }

/* ============================================================================
   FIXED CHROME (product-true sticky header on white)
   ==========================================================================*/
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--edge);
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s, color 0.35s;
  border-bottom: 1px solid transparent;
  color: var(--fg);                    /* default dark over bright footage */
}
.chrome.is-scrolled {
  background: rgba(247, 248, 250, 0.9);   /* product header: bg/90 + blur */
  backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
  color: var(--fg);
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.brand-mark { display: block; }
.brand-word {
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: -0.02em; color: currentColor; line-height: 1;
}
.brand-here { color: var(--brand-here); }
.brand--lg .brand-word { font-size: 1.7rem; }

.chrome-right { display: flex; align-items: center; gap: 0.9rem; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 0.15rem;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
}
.lang-toggle button {
  background: none; border: 0; cursor: pointer;
  color: currentColor; opacity: 0.6; font: inherit; padding: 0.35rem;
  border-radius: 6px; transition: opacity 0.25s, color 0.25s;
  min-width: 30px; min-height: 30px;
}
.lang-toggle button.is-active { opacity: 1; }
.lang-toggle button:hover { color: var(--accent); opacity: 1; }
.lang-sep { opacity: 0.35; }
.chrome-cta { min-height: 40px; padding: 0 1.1rem; font-size: 0.86rem; }

/* scroll progress rail */
.scrollrail {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 61;
  background: rgba(10, 17, 32, 0.06);
}
.scrollrail span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--chart-line));
}

/* ============================================================================
   THE FILM (sticky stage + tall scroll driver; height set in styles-b-white)
   ==========================================================================*/
#film { position: relative; }
/* 100lvh, not svh: with svh the stage stopped ~90px short of the visible viewport
   once iOS Safari collapsed its toolbar, leaving a white band under the footage for
   the whole film. lvh covers the toolbar-collapsed viewport; when the toolbar is
   expanded the extra strip just sits below the fold (footage is cover-fit). */
#stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }

/* ---------- beats ---------- */
.beats { position: absolute; inset: 0; z-index: 3; }
.beat {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 88px var(--edge) 72px;
  opacity: 0; will-change: opacity, transform;
}
/* Pre-boot fallback: the hero beat is visible before any JS runs (the engine's
   render() inline style takes over from the first tick). Paired with the inline
   EN copy in index.html, first paint shows the full hero instead of white. */
.beat--hero { opacity: 1; }
.beat-inner { max-width: 760px; }
.beat-inner--center { max-width: 940px; margin: 0 auto; text-align: center; }

/* LIGHT legibility pools so dark copy reads over bright, varied footage */
.beat-col--text, .beat--hero .beat-inner, .beat--moment .beat-inner { position: relative; }
.beat-col--text::before,
.beat--hero .beat-inner::before,
.beat--moment .beat-inner::before {
  content: ""; position: absolute; z-index: -1; inset: -16% -20%;
  background: radial-gradient(72% 78% at 40% 52%, rgba(247, 248, 250, 0.9), rgba(247, 248, 250, 0.66) 42%, rgba(247, 248, 250, 0) 78%);
  pointer-events: none;
  filter: blur(2px);
}
.beat[data-beat="2"] .beat-col--text,
.beat[data-beat="4"] .beat-col--text { transform: translateY(-4vh); }
.beat--moment .beat-inner::before {
  inset: -18% -10% -34%;
  background: radial-gradient(60% 66% at 50% 54%, rgba(247, 248, 250, 0.93), rgba(247, 248, 250, 0.66) 48%, rgba(247, 248, 250, 0) 82%);
}
/* dark copy gets a soft white halo to hold edges over sky/pavement */
.hero-h, .beat-h, .beat-sub, .goalword {
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.9);
}

.beat--split { justify-content: space-between; gap: 3rem; }
.beat-col { flex: 1 1 0; min-width: 0; }
.beat-col--text { max-width: 560px; }
.beat-col--panel { display: flex; justify-content: flex-end; align-items: center; }

.eyebrow, .chap, .sec-eyebrow, .board-title, .board-live, .proof-num-label {
  font-family: var(--mono); font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.eyebrow, .chap { font-size: 0.72rem; color: var(--accent); margin-bottom: 1.1rem; }

/* hero */
.beat--hero .beat-inner { max-width: 940px; }
.hero-h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.94; letter-spacing: -0.015em;
  margin-bottom: 1.4rem; max-width: 16ch; color: var(--fg);
}
.hero-h .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.hero-h .word > span { display: inline-block; }
.hero-sub {
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  color: var(--fg-soft); max-width: 42ch; line-height: 1.5;
  margin-bottom: 2rem; font-weight: 450;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.scrollcue {
  margin-top: 3rem; display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.scrollcue-line { width: 46px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); position: relative; overflow: hidden; }
.scrollcue-line::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: var(--accent); animation: cue 2.1s ease-in-out infinite;
}
@keyframes cue { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(320%); } }

/* beat headlines */
.beat-h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 4.1rem);
  line-height: 0.98; letter-spacing: -0.015em;
  margin-bottom: 1.1rem; max-width: 18ch; color: var(--fg);
}
.beat-sub { font-size: clamp(1rem, 1.5vw, 1.22rem); color: var(--fg-soft); max-width: 42ch; }

/* moment triptych */
.beat--moment .beat-inner { position: relative; }
.goalword {
  display: flex; flex-direction: column; align-items: center; gap: 0.02em;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 9.5vw, 7.4rem); line-height: 0.9;
  letter-spacing: -0.02em; margin-bottom: 0.7rem; will-change: transform;
  filter: drop-shadow(0 2px 12px rgba(10, 17, 32, 0.30));
}
.goalword span {
  display: inline-block; color: rgba(255, 255, 255, 0.05);
  -webkit-text-stroke: 2.4px rgba(2, 132, 199, 0.92);
}
.goalword span:nth-child(2) { -webkit-text-stroke-color: rgba(10, 17, 32, 0.95); }
.goalword span:nth-child(3) { -webkit-text-stroke-color: rgba(2, 132, 199, 0.95); }
.beat-h--moment { margin: 0 auto 1rem; max-width: 20ch; }
.beat--moment .beat-sub {
  margin: 0 auto;
  color: var(--fg);
  text-shadow: 0 1px 10px rgba(247, 248, 250, 0.95), 0 1px 3px rgba(247, 248, 250, 0.98);
}

/* champion board — product surface-card (white, rounded-xl, shadow-card) */
.board {
  width: min(430px, 44vw);
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-lift);
}
.board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.board-title { font-size: 0.64rem; color: var(--muted); }
.board-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6rem; color: var(--accent); }
.board-live .ld { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(2,132,199,0.5); animation: dot 1.8s ease-out infinite; }
@keyframes dot { 0% { box-shadow: 0 0 0 0 rgba(2,132,199,0.45);} 70%,100%{ box-shadow: 0 0 0 8px rgba(2,132,199,0);} }
.board-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.brow {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem;
  padding: 0.72rem 0.15rem; border-top: 1px solid var(--border);
}
.brow:first-child { border-top: 0; }
.bmeta { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.bcat { font-family: var(--mono); font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.bmkt { font-size: 0.86rem; letter-spacing: -0.01em; color: var(--fg); line-height: 1.2; }
.bright { display: flex; align-items: center; gap: 0.6rem; }
.bbar { width: 62px; height: 6px; border-radius: 999px; background: rgba(10,17,32,0.07); overflow: hidden; }
.bbar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--chart-line)); }
.bbar--ghost { background: rgba(10,17,32,0.05); }
.bbar--ghost::after { content: ""; display: block; height: 100%; width: 34%; border-radius: 999px; background: rgba(10,17,32,0.12); }
.bstat { font-family: var(--mono); font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.1em; min-width: 44px; text-align: right; }
.brow.is-live .bstat { color: var(--accent); }
.brow.is-ex .bmkt { color: var(--fg-soft); }
.brow.is-ex .bstat { color: var(--muted); }

/* settlement chips */
.rail-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em;
  padding: 0.4rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg-soft);
  box-shadow: var(--shadow-card);
}
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.chip-tile { width: 9px; height: 9px; border-radius: 3px; background: var(--accent-soft); border: 1px solid var(--accent); }

/* your-share deal panel */
.deal { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.1rem; max-width: 460px; }
.deal-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 1rem; align-items: baseline;
  padding: 0.85rem 0; border-top: 1px solid var(--border);
}
.deal-k { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); }
.deal-v { font-size: 1.02rem; color: var(--fg-soft); }
.deal-row--keep .deal-k { color: var(--accent); }
.deal-row--keep .deal-v { color: var(--fg); font-weight: 600; }

/* split labels (float near branch ends) */
.split-labels { position: absolute; inset: 0; pointer-events: none; }
.split-lab { position: absolute; right: var(--edge); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; }
.sl-tag { display: inline-flex; align-items: center; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); box-shadow: var(--shadow-card); }
.split-lab--partner { top: 60%; }
.split-lab--partner .sl-tag { border-color: var(--accent); color: var(--accent); font-weight: 700; box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-card); }
.split-lab--ph { top: 34%; }
.split-lab--ph .sl-tag { color: var(--muted); }

/* ============================================================================
   ch4 · ODDS-CHIP OVERLAY (v5 — words only, streams into the beam on scrub)
   The ONLY new visible strings on the page (oddsYes/oddsNo/oddsTie i18n keys).
   ==========================================================================*/
.odds-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.odds-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--mono); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.02em; line-height: 1;
  padding: 0.4rem 0.7rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255,255,255,0.6);
  backdrop-filter: blur(3px);
  will-change: transform, opacity;
}
.odds-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.odds-word { display: inline-block; }
.odds-num { display: inline-block; opacity: 0.72; font-family: var(--mono); font-weight: 600; }
.odds-chip--yes { color: var(--yes-fg); border: 1px solid rgba(21,128,61,0.4); }
.odds-chip--yes::before { background: var(--yes-fg); }
.odds-chip--no  { color: var(--no-fg);  border: 1px solid rgba(185,28,28,0.4); }
.odds-chip--no::before  { background: var(--no-fg); }
.odds-chip--tie { color: var(--tie-fg); border: 1px solid rgba(180,83,9,0.4); }
.odds-chip--tie::before { background: var(--tie-fg); }

/* seam fade → melts the (near-white) final frame into the white content */
.seam-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 5;
  background: linear-gradient(180deg, transparent, var(--bg) 84%);
  opacity: 0; pointer-events: none;
}

/* ============================================================================
   CONTENT SECTIONS (white, product-true)
   ==========================================================================*/
#content { position: relative; z-index: 6; background: var(--bg); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); }
.sec { padding: clamp(80px, 12vh, 150px) 0; }
.sec-eyebrow { font-size: 0.72rem; color: var(--accent); margin-bottom: 1rem; }
.sec-h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02;
  letter-spacing: -0.01em; max-width: 20ch; margin-bottom: 2.4rem; color: var(--fg);
}

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.8s cubic-bezier(0.2,0.7,0.2,1), transform 0.8s cubic-bezier(0.2,0.7,0.2,1); }

.cards { display: grid; gap: 1rem; }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
/* .card / .tile = product .surface-card */
.card, .tile {
  position: relative;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.card:hover, .tile:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card-idx { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.1em; }
.card h3 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; margin: 0.7rem 0 0.55rem; line-height: 1.1; }
.card p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

.tile h3 { font-family: var(--display); font-weight: 700; font-size: 1.28rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.tile h3::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 1rem; background: linear-gradient(90deg, var(--accent), transparent); border-radius: 2px; }
.tile p { color: var(--muted); font-size: 0.94rem; line-height: 1.55; }

/* how it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.step { display: flex; gap: 1.1rem; padding: 1.7rem 1.6rem; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); box-shadow: var(--shadow-card); }
.step-n {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  color: var(--accent-fg); background: var(--accent);
  box-shadow: 0 1px 2px rgba(16,24,40,0.12);
}
.step h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.step p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* proof band */
.sec-proof { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(2,132,199,0.04), transparent); }
.proof-wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.proof-figure { display: flex; flex-direction: column; align-items: flex-start; }
.proof-num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(5rem, 13vw, 11rem); line-height: 0.82; letter-spacing: -0.02em;
  background: linear-gradient(160deg, var(--chart-line), var(--brand-here) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-num-label { font-size: 0.76rem; color: var(--muted); margin-top: 0.8rem; }
.proof-body h2 { margin-bottom: 1rem; }
.proof-body p { color: var(--fg-soft); max-width: 52ch; margin-bottom: 1.6rem; }
.proof-links { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.sec-stack .proof-links { margin-top: 3rem; }
.link-arrow { font-weight: 600; color: var(--accent); font-size: 0.95rem; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--accent-hover); }

/* faq */
.faq { display: grid; gap: 0.6rem; max-width: 900px; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); overflow: hidden; box-shadow: var(--shadow-card); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.4rem;
  font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--fg);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--mono); font-weight: 500; font-size: 1.3rem; color: var(--accent); transition: transform 0.3s; flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 1.4rem 1.25rem; color: var(--muted); max-width: 62ch; }

/* final cta */
.sec-final { text-align: center; padding: clamp(90px, 16vh, 180px) 0; }
.final-wrap { position: relative; }
.final-h { font-family: var(--display); font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 0.98; letter-spacing: -0.015em; max-width: 20ch; margin: 0 auto 2rem; color: var(--fg); }
.final-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.final-underline { margin: 3rem auto 0; width: min(560px, 84vw); height: 3px; border-radius: 3px; background: rgba(10,17,32,0.08); overflow: hidden; }
.final-underline span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--chart-line)); }

/* footer */
.footer { border-top: 1px solid var(--border); padding: clamp(56px, 8vh, 90px) 0 3rem; background: var(--bg-elev); }
.footer-wrap { display: flex; flex-wrap: wrap; gap: 2.4rem; justify-content: space-between; align-items: flex-start; }
.footer-tag { color: var(--muted); max-width: 34ch; margin: 1.1rem 0 1.2rem; font-size: 0.96rem; }
.footer-chips { display: flex; gap: 0.6rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.8rem; font-size: 0.96rem; }
.footer-links a { color: var(--muted); transition: color 0.25s; }
.footer-links a:hover { color: var(--accent); }
.footer-legal { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.03em; }

/* ============================================================================
   MOBILE
   ==========================================================================*/
@media (max-width: 900px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .proof-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .chrome-cta { display: none; }
  .beat { padding: 92px var(--edge) 96px; align-items: center; }
  .beat--split { flex-direction: column; justify-content: center; gap: 1.6rem; }
  .beat-col--panel { justify-content: flex-start; width: 100%; }
  .board { width: 100%; max-width: 400px; }
  .beat-col--text { max-width: none; }
  .beat--share .beat-col--panel { display: none; }
  .beat[data-beat="2"] .beat-col--text,
  .beat[data-beat="4"] .beat-col--text { transform: none; }
  .hero-h { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .cards-4, .cards-3 { grid-template-columns: 1fr; }
  .deal-row { grid-template-columns: 116px 1fr; gap: 0.7rem; }
  .split-lab { right: 12px; }
  /* mobile tap targets — lift key controls to >=44px (WCAG 2.5.5) */
  .lang-toggle button { min-height: 44px; min-width: 44px; }
  .footer-links a { min-height: 44px; display: flex; align-items: center; }
  .link-arrow { min-height: 44px; display: inline-flex; align-items: center; }
  /* stronger legibility pools on phones — the 960px footage is busier per-glyph
     at small sizes and the desktop-tuned scrims read as jumble mid-crossfade */
  .beat-col--text::before,
  .beat--hero .beat-inner::before,
  .beat--moment .beat-inner::before {
    inset: -12% -24%;
    background: radial-gradient(78% 84% at 50% 50%, rgba(247, 248, 250, 0.96), rgba(247, 248, 250, 0.8) 50%, rgba(247, 248, 250, 0) 84%);
  }
}
@media (max-width: 400px) {
  :root { --edge: 18px; }
  .brand-word { font-size: 1.12rem; }
  .hero-h { font-size: clamp(2.1rem, 12vw, 3rem); }
}

/* ============================================================================
   REDUCED MOTION — film collapses to a readable static narrative
   ==========================================================================*/
.reduced .scrollrail, .reduced #ambient, .reduced .scrollcue, .reduced .seam-fade { display: none; }
.reduced #film { height: auto; }
/* overflow-x: clip (not hidden — no scroll container, keeps vertical flow) stops
   the beat legibility-scrim ::before elements (inset -16%..-26% horizontal bleed)
   from escaping now the sticky stage's overflow:hidden is gone in reduced-motion. */
.reduced #stage { position: static; height: auto; overflow-x: clip; overflow-y: visible; padding-top: 84px; }
.reduced .beats { position: relative; }
.reduced .beats::before {
  content: ""; position: absolute; top: 2%; bottom: 2%;
  left: calc(var(--edge) - 3px); width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--accent) 10%, var(--chart-line) 90%, transparent);
  opacity: 0.5;
}
.reduced .beat {
  position: relative; inset: auto; opacity: 1; transform: none;
  min-height: auto; padding: 7vh var(--edge) 7vh calc(var(--edge) + 26px);
}
.reduced .beat--hero { padding-top: 3vh; }
.reduced .beat-inner--center { margin: 0; text-align: left; }
.reduced .beat--split { flex-direction: row; align-items: flex-start; }
.reduced .odds-layer { display: none; }
.reduced .goalword span { transform: none; }
.reduced .reveal { opacity: 1; transform: none; }
.reduced .board-live .ld, .reduced .scrollcue-line::after { animation: none; }
@media (max-width: 720px) { .reduced .beat--split { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) {
  .scrollcue-line::after, .board-live .ld { animation: none; }
  .btn { transition: none; }
}

/* ============================================================================
   v3 "SUPER DYNAMIC" LAYER — recolored for white (copy untouched; motion only)
   Gates on html.fx (set by JS only when NOT reduced-motion).
   ==========================================================================*/

/* slow ambient gradient wash — barely-there tinted light on white */
.bg-wash {
  /* horizontal inset 0 so the fixed box is exactly viewport-wide — the -20%
     bleed escaped html's visible overflow-x and caused a 67px horizontal scroll
     in reduced-motion mobile. Vertical bleed kept; the drift is transform-only. */
  position: fixed; inset: -20% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 22% 28%, rgba(2, 132, 199, 0.06), transparent 70%),
    radial-gradient(38% 30% at 78% 66%, rgba(10, 114, 232, 0.05), transparent 70%),
    radial-gradient(30% 26% at 60% 18%, rgba(0, 89, 253, 0.035), transparent 72%);
  opacity: 0.9; will-change: transform;
}
.fx .bg-wash { animation: washdrift 46s ease-in-out infinite alternate; }
@keyframes washdrift {
  0% { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  50% { transform: translate3d(1.5%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}

/* BrandMark bloom — soft light behind the P (subtle on white) */
.brand { position: relative; }
.brand::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  width: 58px; height: 58px; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(2, 132, 199, 0.22), rgba(2, 132, 199, 0.06) 55%, transparent 72%);
  filter: blur(6px); pointer-events: none;
}
.fx .brand::before { animation: brandbloom 5.2s ease-in-out infinite alternate; }
@keyframes brandbloom { from { opacity: 0.5; } to { opacity: 0.9; } }

/* left-rail chapter nav (white) */
.chapnav { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 58; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 6px 0; }
.chapnav-track { position: absolute; top: 10px; bottom: 10px; left: 50%; width: 2px; transform: translateX(-50%); border-radius: 2px; background: rgba(10, 17, 32, 0.12); overflow: hidden; }
#chapnav-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--accent), var(--chart-line)); border-radius: 2px; }
.chapnav-dot {
  position: relative; z-index: 1; width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: #fff; cursor: pointer;
  transition: transform 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.chapnav-dot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.chapnav-dot:hover { border-color: var(--accent); transform: scale(1.25); }
.chapnav-dot.is-active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transform: scale(1.2); }

/* circular scroll-progress ring (white glass) */
.progressring {
  position: fixed; right: 26px; bottom: 26px; z-index: 58;
  width: 52px; height: 52px; padding: 4px; border: 1px solid var(--border); border-radius: 50%; cursor: default;
  background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card); transition: box-shadow 0.35s, background 0.35s;
}
.progressring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.pr-track { stroke: rgba(10, 17, 32, 0.12); stroke-width: 2.4; }
.pr-fill { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: 119.38; }
.pr-arrow { stroke: var(--fg-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 22px 22px; opacity: 0; transition: opacity 0.3s; }
.progressring.is-done { cursor: pointer; box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-card); }
.progressring.is-done .pr-arrow { opacity: 1; }

/* custom cursor — SOLID DARK dot + ring (difference-blend reads badly on a light page) */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 99; pointer-events: none; opacity: 0; transition: opacity 0.35s; }
.cursor-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.55); }
.cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(10,17,32,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.4); transition: opacity 0.35s, width 0.3s, height 0.3s, margin 0.3s, border-color 0.3s; }
html.cursor-on .cursor-dot, html.cursor-on .cursor-ring { opacity: 1; }
html.cursor-on.cursor-hover .cursor-ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: var(--accent); }
html.cursor-on, html.cursor-on a, html.cursor-on button, html.cursor-on summary { cursor: none; }

/* scroll text-fill on section headlines — light-grey → near-black */
.fx .sec-h {
  background: linear-gradient(90deg, var(--fg) 0%, var(--fg) 50%, rgba(10, 17, 32, 0.26) 50.001%, rgba(10, 17, 32, 0.26) 100%);
  background-size: 200% 100%;
  background-position-x: calc(100% - (var(--fill, 0) * 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* "43" shimmer sweep (one pass) */
.fx .proof-num.shimmer {
  background: linear-gradient(120deg, var(--chart-line) 30%, #7cc4ff 46%, var(--brand-here) 58%, var(--accent) 80%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: numshimmer 1.7s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}
@keyframes numshimmer { from { background-position-x: 120%; } to { background-position-x: 0%; } }

/* case-study band: sticky figure + browser-frame reveal (product-true capture) */
.fx .proof-figure { position: sticky; top: 120px; }
.browser-frame {
  margin: clamp(2rem, 5vh, 4rem) auto 0; max-width: 980px;
  border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-pop);
}
.fx .browser-frame { opacity: calc(0.25 + var(--rise, 0) * 0.75); transform: translateY(calc((1 - var(--rise, 0)) * 72px)); will-change: transform, opacity; }
.bf-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--bg-panel); border-bottom: 1px solid var(--border); }
.bf-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.browser-frame img, .browser-frame video { display: block; width: 100%; height: auto; }

/* chapter-2 board self-playing */
.fx .board .brow { opacity: 0; transform: translateY(10px); transition: opacity 0.55s cubic-bezier(0.2,0.7,0.2,1), transform 0.55s cubic-bezier(0.2,0.7,0.2,1); }
.fx .board.is-on .brow { opacity: 1; transform: none; }
.fx .board.is-on .brow:nth-child(1) { transition-delay: 0.05s; }
.fx .board.is-on .brow:nth-child(2) { transition-delay: 0.17s; }
.fx .board.is-on .brow:nth-child(3) { transition-delay: 0.29s; }
.fx .board.is-on .brow:nth-child(4) { transition-delay: 0.41s; }
.fx .board.is-on .brow.is-live .bbar i { animation: bardrift 7s ease-in-out infinite alternate; }
@keyframes bardrift { from { width: 68%; } to { width: 84%; } }
.fx .board.is-on .bbar--ghost::after {
  background: linear-gradient(100deg, rgba(10,17,32,0.08) 30%, rgba(2,132,199,0.28) 50%, rgba(10,17,32,0.08) 70%);
  background-size: 320% 100%; animation: ghostshimmer 5.4s ease-in-out infinite;
}
.fx .board.is-on .brow:nth-child(3) .bbar--ghost::after { animation-delay: 1.4s; }
.fx .board.is-on .brow:nth-child(4) .bbar--ghost::after { animation-delay: 2.8s; }
@keyframes ghostshimmer { 0% { background-position-x: 110%; } 55%, 100% { background-position-x: -60%; } }

/* magnetic CTAs + partner-card cursor glow */
.fx .hero-actions .btn, .fx .final-actions .btn { will-change: transform; }
.card { overflow: hidden; }
.fx .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(2, 132, 199, 0.1), transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.fx .card:hover::after { opacity: 1; }
.fx .card:hover { border-color: var(--accent); }

/* mobile + reduced-motion degradation for every dynamic element */
@media (max-width: 768px) {
  .chapnav, .progressring, .cursor-dot, .cursor-ring { display: none; }
  .fx .proof-figure { position: static; }
}
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }
.reduced .chapnav, .reduced .progressring, .reduced .cursor-dot, .reduced .cursor-ring { display: none; }
.reduced .bg-wash { animation: none; }
.reduced .browser-frame { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bg-wash, .brand::before { animation: none; }
  .chapnav, .progressring, .cursor-dot, .cursor-ring { display: none; }
}