/* ============================================================
   Behind the Screens — "The Big Number" · styles.css
   BUILD-A: tokens, fluid system, base, nav, hero, intro,
            anatomy+tells, methodology.
   Conventions documented in BUILD-NOTES.md.

   FLUID RULE (PLAN-system §3): every visible dimension is
   calc(N * var(--u)) where N is the raw px read off the Figma
   comp (desktop N @1920, mobile N @390). Only floors inside
   max()/clamp() and 1px hairlines are literal px.
   ============================================================ */

/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  /* ----- color ----- */
  --blue:        #0053ff;
  --blue-deep:   #00002b;
  --navy-2:      #000035;
  --ink:         #171d27;
  --ink-2:       #3b384e;
  --navy-text:   #062461;
  --grey:        #5b5f66;
  --accent:      #f4632a;
  --accent-hot:  #ff3d14;   /* hover/active emphasis — a hotter reddish-orange */
  --accent-ring: rgba(244, 99, 42, 0.08);
  --white:       #ffffff;
  --off-white:   #f6f8f9;

  --border-tells-top: #c3cefa;
  --border-tells-div: rgba(195, 206, 250, 0.5);
  --border-logos:     rgba(0, 0, 0, 0.11);

  --tint-methodology-a: #ffffff;
  --tint-methodology-b: #f6f8f9;
  --tint-trading:    #f6f8f9;
  --tint-ewallet:    #edf1f4;
  --tint-investment: #eceaf6;

  --hero-grad: linear-gradient(180deg, rgba(0, 83, 255, 0) 0%, #0053ff 100%);

  /* ----- type -----
     Both roles now use Google Sans Flex (variable, opsz 6–144, wght 300–800),
     substituting Sailec (body/headings/labels) AND matching the Figma display
     which was already Google Sans Flex. Weight map: Sailec Regular→400,
     Medium→500, Bold→700. Optical sizing auto-adapts text vs display sizes. */
  --font-body:    "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  --font-step:    "Inter", sans-serif;

  /* ----- radii ----- */
  --r-pill:   calc(57 * var(--u));
  --r-badge:  calc(36 * var(--u));
  --r-phone:  calc(40 * var(--u));
  --r-card:   calc(12 * var(--u));

  /* ----- layout ----- */
  --gutter:     calc(64 * var(--u));
  --sect-pad-y: calc(120 * var(--u));

  /* ----- semantic aliases ----- */
  --bg-hero:  var(--blue-deep);
  --bg-intro: var(--blue);
  --bg-hook1: var(--blue);
  --bg-hook2: var(--navy-2);
  --text-display-dark: var(--ink);
  --text-body: var(--grey);

  /* ----- fluid unit (§3): desktop, exact @1920, capped @2200 ----- */
  --u: clamp(0px, calc(100vw / 1920), 1.146px);
}

/* MOBILE RANGE — design width 390. Exact @390, proportional up, capped 1.4x. */
@media (max-width: 900px) {
  :root {
    --u: min(calc(100vw / 390), 1.4px);
    /* past ~600px the single column centres itself at <=760px wide (§3) */
    --gutter:     max(calc(24 * var(--u)), calc((100vw - 760px) / 2));
    --sect-pad-y: calc(80 * var(--u));
  }
}

/* ----------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--blue-deep);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Avoid single-word last lines (orphans) across all copy. Split headings
     also get a JS orphan guard in splitLines() as a guaranteed backstop. */
  text-wrap: pretty;
  /* Google Sans Flex is a true variable font over the weights we use (400/500/700),
     so use its real masters (no faux bold) and let opsz adapt to font-size. */
  font-optical-sizing: auto;
  font-synthesis: none;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Skip link — off-screen until keyboard-focused, then pinned top-left. */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  padding: 12px 20px; border-radius: 0 0 8px 0;
  background: var(--blue); color: var(--white);
  font-family: var(--font-body); font-weight: 700;
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
p { margin: 0; }
/* Section-lead displays are <h2> (document outline); strip the UA heading margin. */
.intro__display, .anatomy__display, .methodology__display,
.hook1__display, .hook2__display { margin: 0; }
button { font: inherit; cursor: default; border: 0; }

section, footer { position: relative; width: 100%; }

/* Line-splitter primitives (shared by every [data-split="lines"]).
   Default (no-JS / reduced-motion) = fully visible: inners are not
   transformed until JS sets a hidden state inside matchMedia. */
.line        { display: block; }
.line__inner { display: block; }
.word        { display: inline-block; }
.word.is-strong { font-weight: 600; }

/* ----------------------------------------------------------
   3. NAV
   ---------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(64 * var(--u)) var(--gutter);
  /* The nav is a transparent full-width strip on top — it must NOT block clicks
     to the tab pill / content below. Only the logo + CTA are interactive. */
  pointer-events: none;
}
.nav__logo, .nav__cta { pointer-events: auto; }
/* Scrolled: no bar / frosted background, no padding shift. The logo does not
   persist — it fades out; only the Download CTA stays sticky (see .nav__cta). */
.nav--scrolled .nav__logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav__logo { transition: opacity .3s ease, visibility .3s ease; }
.nav__logo img { width: calc(72 * var(--u)); height: auto; }
.nav__cta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(18 * var(--u)), 14px);
  line-height: 1;
  color: var(--white);
  background: var(--blue);
  border-radius: var(--r-pill);
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 30, .22);
  transition: background .3s ease, color .3s ease;
}
/* Keep the sticky CTA legible everywhere: over dark / electric-blue sections
   it flips to a white pill with blue text; over light sections it's blue. */
.nav--scrolled:not(.nav--light) .nav__cta {
  background: var(--white);
  color: var(--blue);
}

@media (max-width: 900px) {
  .nav { padding: calc(30 * var(--u)) var(--gutter); }
  .nav__logo img { width: calc(48 * var(--u)); }
  /* No persistent CTA on mobile — the Download action lives in a few key
     section placements instead (see .section-cta). */
  .nav__cta { display: none; }
}

/* ----------------------------------------------------------
   4. HERO
   ---------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* vw (not the --u clamp) so height tracks viewport width and keeps the
     banner's aspect on wide monitors instead of cropping via object-fit. */
  height: 56vw;
  background: var(--bg-hero);
}
/* Full-bleed banner asset — the "The big number" headline + eyebrow and the
   chromatic-aberration effect are baked into the image (see .visually-hidden
   <h1> for the accessible/SEO heading). */
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the crop to the bottom-left so the headline is never clipped in the
     undesigned tablet range where the section aspect differs from the asset. */
  object-position: left bottom;
  display: block;
}

@media (max-width: 900px) {
  .hero { height: calc(512 * var(--u)); }
}

/* Scroll cue — bottom-right of the hero, nudging the reader to scroll.
   Decorative (aria-hidden); fades out once scrolling begins (see setupScrollCue).
   Fixed px on purpose: this is UI chrome, not part of the --u design system. */
.hero__scroll {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);   /* vertically centered on the right edge */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 1;
  transition: opacity .5s ease;
  pointer-events: none;
}
.hero__scroll.is-hidden { opacity: 0; }
.hero__scroll-track {
  position: relative;
  width: 6px;
  height: 72px;
  /* clean dotted line — evenly spaced round dots */
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 1.25px, transparent 1.75px);
  background-size: 6px 8px;
  background-repeat: repeat-y;
  background-position: center top;
}
.hero__scroll-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #fff;
}
.hero__scroll-chevron {
  display: block;
  color: rgba(255, 255, 255, 0.75);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-dot { animation: heroScrollDot 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-dot { top: 50%; margin-top: -3px; }  /* static, centered */
}
@keyframes heroScrollDot {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(70px); opacity: 0; }
}
@media (max-width: 900px) {
  .hero__scroll { display: none; }  /* mobile headline fills the hero bottom */
}

/* ----------------------------------------------------------
   5. INTRO
   ---------------------------------------------------------- */
.intro {
  background: var(--bg-intro);
  padding: calc(240 * var(--u)) var(--gutter) calc(120 * var(--u));
}
.intro__display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(110 * var(--u));
  line-height: 1;
  letter-spacing: calc(-0.3 * var(--u));
  color: var(--white);
  max-width: calc(1540 * var(--u));
}
.intro__display strong { font-weight: 700; }
/* emphasis spans reach full white via JS after their line lands */
.em-act, .em-stay { color: var(--white); }

@media (max-width: 900px) {
  .intro { padding: 0 var(--gutter) calc(80 * var(--u)); }
  .intro__display {
    font-size: calc(40 * var(--u));
    line-height: 1.1;
    letter-spacing: calc(-0.15 * var(--u));
    max-width: none;
  }
}

/* ----------------------------------------------------------
   6. ANATOMY + TELLS
   ---------------------------------------------------------- */
/* ----------------------------------------------------------
   2B. FRAMEWORK — the data (split: electric-blue stats | navy narrative)
   ---------------------------------------------------------- */
.framework {
  display: grid;
  grid-template-columns: 1080fr 840fr;   /* 56.25% / 43.75% split (per Figma) */
  background: #0001a0;
  color: var(--white);
}
.framework__stats,
.framework__narrative {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(120 * var(--u));
  padding: calc(150 * var(--u)) calc(64 * var(--u)) calc(150 * var(--u));
}
.framework__stats { background: var(--blue); }        /* #0053ff */
.framework__narrative { background: #0001a0; }
.framework__stack {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--u));
}
.framework__stat {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}
.framework__num {
  flex: none;
  width: calc(439 * var(--u));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(200 * var(--u));
  line-height: 1;
  letter-spacing: 0;
}
.framework__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(48 * var(--u));
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: calc(552 * var(--u));
}
.framework__desc strong { font-weight: 700; }
.framework__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(32 * var(--u));
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: calc(24 * var(--u));
  max-width: calc(611 * var(--u));
}
.framework__lead strong { font-weight: 700; }
.framework__field-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.framework__field {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}
.framework__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(16 * var(--u)), 12px);
  letter-spacing: calc(1.92 * var(--u));
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.framework__fieldbody {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(16 * var(--u)), 13px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  max-width: calc(514 * var(--u));
}
.framework__note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(12 * var(--u)), 11px);
  line-height: 1.3;
  letter-spacing: calc(-0.12 * var(--u));
  color: rgba(255, 255, 255, 0.9);   /* was .7 ≈ 3.5:1 over the #0053ff panel — fails AA */
  max-width: calc(552 * var(--u));
}
.framework sup { font-size: 0.62em; vertical-align: super; line-height: 0; }

@media (max-width: 900px) {
  .framework {
    display: block;
    min-height: 0;
  }
  .framework__stats {
    padding: calc(24 * var(--u)) var(--gutter) calc(80 * var(--u));
    gap: calc(32 * var(--u));
  }
  .framework__stack { gap: 0; }
  .framework__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(24 * var(--u));
    padding: calc(40 * var(--u)) 0;
    border-bottom: 1px solid rgba(195, 206, 250, 0.3);
  }
  .framework__num { width: auto; font-size: calc(96 * var(--u)); }
  .framework__desc {
    font-size: calc(32 * var(--u));
    letter-spacing: calc(-0.96 * var(--u));
    max-width: none;
  }
  .framework__narrative {
    padding: calc(80 * var(--u)) var(--gutter);
    gap: calc(56 * var(--u));
  }
  .framework__lead {
    font-size: calc(24 * var(--u));
    line-height: 1.3;
    letter-spacing: normal;
    max-width: none;
  }
  .framework__eyebrow { font-size: max(calc(14 * var(--u)), 12px); letter-spacing: calc(1.68 * var(--u)); }
  .framework__fieldbody { max-width: none; }
}

.anatomy { background: var(--white); }

.anatomy__top {
  background: var(--blue);
  padding: calc(120 * var(--u)) var(--gutter);
}
.anatomy__eyebrow {
  font-weight: 700;
  font-size: max(calc(16 * var(--u)), 12px);
  letter-spacing: calc(1.92 * var(--u));
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: calc(96 * var(--u));
}
.anatomy__display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(86 * var(--u));
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--white);
  max-width: calc(1460 * var(--u));
}
.anatomy__display strong { font-weight: 700; }

/* --- tells row --- */
.tells {
  background: var(--white);
  border-top: 1px solid var(--border-tells-top);
  display: grid;
  grid-template-columns: 422fr 358.667fr 358.667fr 358.667fr 422fr;
}
.tell {
  position: relative;
  padding: 0 0 calc(56 * var(--u));
}
.tell + .tell { border-left: 1px solid var(--border-tells-div); }

/* Illustrations are the flattened Figma vectors, full-bleed within each cell. */
.tell__illus {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.tell__svg { display: block; width: 100%; height: auto; }
/* Chart: static base image + animated line overlay, clipped to the 280 frame. */
/* Chart bleeds below its 280 frame (intentional overflow to fill the space). */
.tell__illus--chart { aspect-ratio: 359 / 280; overflow: visible; }
.tell__illus--chart .tell__svg,
.tell__illus--chart .tell__chart-fx {
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
}
.tell__header {
  margin: calc(142 * var(--u)) 0 0;
  padding-inline: calc(40 * var(--u));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(24 * var(--u)), 16px);
  letter-spacing: calc(-0.48 * var(--u));
  color: var(--navy-text);
}
.tell__body {
  margin-top: calc(16 * var(--u));
  padding-inline: calc(40 * var(--u));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(18 * var(--u)), 14px);
  line-height: 1.4;
  color: var(--grey);
}
.tell__body strong { font-weight: 700; color: inherit; }
/* Outer cards carry the 64px gutter on their outer edge (per Figma). */
.tell:first-child .tell__header, .tell:first-child .tell__body { padding-left: calc(64 * var(--u)); }
.tell:last-child  .tell__header, .tell:last-child  .tell__body { padding-right: calc(64 * var(--u)); }


@media (max-width: 900px) {
  .anatomy__top { padding: calc(80 * var(--u)) var(--gutter) calc(64 * var(--u)); }
  .anatomy__eyebrow {
    font-size: max(calc(14 * var(--u)), 11px);
    margin-bottom: calc(48 * var(--u));
  }
  .anatomy__display {
    font-size: calc(34 * var(--u));
    line-height: 1.1;
    letter-spacing: normal;
    max-width: none;
  }

  .tells { grid-template-columns: 1fr; }
  .tell {
    padding: 0 0 calc(56 * var(--u));
    border-left: 0;
  }
  .tell + .tell { border-left: 0; border-top: 1px solid var(--border-tells-div); }

  .tell__header { margin-top: calc(48 * var(--u)); font-size: max(calc(20 * var(--u)), 15px); }
  .tell__body   { font-size: max(calc(16 * var(--u)), 13px); }
  /* full-bleed illustration; content sits on the mobile gutter */
  .tell__header, .tell__body,
  .tell:first-child .tell__header, .tell:first-child .tell__body,
  .tell:last-child  .tell__header, .tell:last-child  .tell__body { padding-inline: var(--gutter); }
  /* Stacked mobile: give the chart its full height instead of bleeding into the header. */
  .tell__illus--chart { aspect-ratio: 359 / 368; overflow: hidden; }
}

/* ----------------------------------------------------------
   7. METHODOLOGY
   ---------------------------------------------------------- */
.methodology {
  background: linear-gradient(180deg, var(--tint-methodology-a), var(--tint-methodology-b));
  padding: calc(120 * var(--u)) var(--gutter);
}
.methodology__display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(86 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-1.2 * var(--u));
  color: var(--ink);
  max-width: calc(1320 * var(--u));
}
.methodology__display strong { font-weight: 700; }
.methodology__sub {
  margin-top: calc(48 * var(--u));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(24 * var(--u)), 16px);
  line-height: 1.4;
  color: var(--grey);
}
.methodology__sub strong { font-weight: 700; }
.methodology__logos {
  margin-top: calc(128 * var(--u));
  border-top: 1px solid var(--border-logos);
  padding-block: calc(72 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(24 * var(--u));
}
.methodology__logos li {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(24 * var(--u)), 15px);
  color: var(--grey);          /* was rgba(23,29,39,.5) ≈ 3.3:1 — fails AA at small sizes */
  white-space: nowrap;
}
.methodology__fine {
  font-family: var(--font-body);
  font-size: max(calc(16 * var(--u)), 12px);
  color: var(--grey);          /* dropped opacity:.5 (≈2.2:1 in the static state) */
}

@media (max-width: 900px) {
  .methodology { padding: calc(80 * var(--u)) var(--gutter); }
  .methodology__display {
    font-size: calc(34 * var(--u));
    line-height: 1.1;
    letter-spacing: calc(-0.4 * var(--u));
    max-width: none;
  }
  .methodology__sub { font-size: max(calc(18 * var(--u)), 14px); }
  .methodology__logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: calc(12 * var(--u));
    column-gap: calc(16 * var(--u));
    justify-items: start;
    padding-block: calc(40 * var(--u));
    margin-top: calc(64 * var(--u));
  }
  .methodology__logos li { font-size: max(calc(16 * var(--u)), 13px); }
  .methodology__fine { font-size: max(calc(14 * var(--u)), 12px); line-height: 1.4; }
}

/* ============================================================
   BUILD-B — tabs, deep-dives, hooks, about-frost.
   Same fluid rule: every visible size is calc(N * var(--u)),
   N read off the Figma comp (desktop @1920 / mobile @390).
   ============================================================ */

/* ----------------------------------------------------------
   8. STICKY TABS
   ---------------------------------------------------------- */
/* Light backing behind the whole tabs + deep-dives group, so the transparent
   floating-pill strip never reveals the dark <body> background. */
.dd-group { background: #f6f8f9; }
.tabs {
  position: sticky;
  top: 0;
  z-index: 90;
  height: calc(124 * var(--u));
  display: flex;
  align-items: center;
  background: #f6f8f9;
}
.tabs__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(48 * var(--u));
  width: 100%;
  padding: 0 var(--gutter);
}
/* Scrolled: the full-width bar becomes a compact centered floating pill
   (Figma 97:111) so it stops eating space — content scrolls behind it. */
.tabs.is-floating { background: transparent; pointer-events: none; align-items: flex-start; }
.tabs.is-floating .tabs__track {
  pointer-events: auto;
  width: fit-content;
  /* pill left edge offset so the labels stay at the same x as the resting bar
     (smooth morph, no horizontal jump) and clear of the sticky phone. */
  margin-inline-start: calc(var(--gutter) - 32 * var(--u));
  margin-inline-end: auto;
  /* drop the pill onto the same row as the nav's Download CTA (nav center). */
  margin-top: calc(62 * var(--u));
  justify-content: center;
  padding: calc(26 * var(--u)) calc(32 * var(--u)) calc(22 * var(--u));
  background: #f6f8f9;
  border-radius: 999px;
  box-shadow: 0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 43, .16);
}
.tabs__link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(24 * var(--u)), 16px);
  line-height: 1.16;
  letter-spacing: calc(-0.72 * var(--u));
  color: var(--grey);        /* inactive: readable de-emphasized grey (~6:1) */
  white-space: nowrap;
  transition: color .3s ease;
}
.tabs__link.is-active { color: var(--ink); }   /* active: near-black, clearly prominent */

@media (max-width: 900px) {
  /* Mobile keeps the auto-height horizontal-scroll bar (no floating pill). */
  .tabs { height: auto; display: block; }
  .tabs__track {
    justify-content: flex-start;
    gap: calc(32 * var(--u));
    padding: calc(24 * var(--u)) calc(24 * var(--u));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs__track::-webkit-scrollbar { display: none; }
  .tabs__link { font-size: max(calc(16 * var(--u)), 14px); }
}

/* ----------------------------------------------------------
   9. DEEP-DIVES (shared .dd component)
   ---------------------------------------------------------- */
.dd--trading    { background: var(--tint-trading); }
.dd--ewallet    { background: var(--tint-ewallet); }
/* NB: no overflow:hidden here — it would break the sticky phone column.
   Horizontal bleed is clipped by body { overflow-x: hidden }. */
.dd--investment { background: var(--tint-investment); }

/* --- intro band --- */
.dd__intro {
  min-height: calc(720 * var(--u));
  padding: calc(120 * var(--u)) var(--gutter);
}
.dd__display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(86 * var(--u));
  line-height: 1.15;
  letter-spacing: calc(-1.2 * var(--u));
  color: var(--ink-2);
  max-width: calc(1400 * var(--u));
}
.dd__label {
  margin-top: calc(168 * var(--u));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(32 * var(--u)), 18px);
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: calc(640 * var(--u));
}
.dd__label strong { font-weight: 700; }

/* --- detail band: white content column + tinted phone column --- */
.dd__detail {
  display: grid;
  grid-template-columns: 951fr 840fr;
  grid-template-areas:
    "content phone"
    "steps   phone";
  align-items: stretch;
  /* at least one viewport tall so the full-height sticky phone column fits. */
  min-height: max(calc(1080 * var(--u)), 100vh);
}
.dd__content {
  grid-area: content;
  background: var(--white);
  padding: calc(120 * var(--u)) calc(96 * var(--u)) calc(72 * var(--u)) var(--gutter);
}
.dd__steps {
  grid-area: steps;
  background: var(--white);
  padding: 0 calc(96 * var(--u)) calc(120 * var(--u)) var(--gutter);
}
.dd__phone-col {
  grid-area: phone;
  /* Sticky + vertically centered in the viewport while you read the text on the
     left; padding-block keeps the screen off the top / bottom edges. */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(120 * var(--u));
}

.dd__eyebrow-row {
  display: flex;
  align-items: center;
  gap: calc(120 * var(--u));
}
.dd__cat, .dd__brand {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(16 * var(--u)), 12px);
  letter-spacing: calc(1.92 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.dd__cat   { color: var(--blue); }
.dd__brand { color: rgba(17, 17, 17, .6); }
.dd__badge {
  margin-left: auto;
  background: var(--accent);
  border-radius: var(--r-badge);
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(14 * var(--u)), 11px);
  letter-spacing: calc(0.5 * var(--u));
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.dd__headline {
  margin: calc(40 * var(--u)) 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.9 * var(--u));
  color: var(--ink);
  max-width: calc(700 * var(--u));
}

.dd__insight {
  margin-top: calc(160 * var(--u));
  border-top: calc(3 * var(--u)) solid rgba(0, 0, 0, .12);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dd__col {
  padding: calc(32 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) 0;
}
.dd__col + .dd__col {
  border-left: 1px solid rgba(0, 0, 0, .08);
  padding: calc(32 * var(--u)) 0 calc(40 * var(--u)) calc(40 * var(--u));
}
.dd__col-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(16 * var(--u)), 13px);
  color: var(--blue);
}
.dd__col p {
  margin-top: calc(16 * var(--u));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(16 * var(--u)), 13px);
  line-height: 1.5;
  color: var(--ink);
}
.dd__col p strong { font-weight: 700; }

/* --- steps --- */
.dd__steps { display: block; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(40 * var(--u));
  align-items: start;
}
.step + .step { margin-top: calc(28 * var(--u)); }
.step__circle {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-step);
  font-weight: 700;
  font-size: max(calc(12 * var(--u)), 10px);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 calc(10 * var(--u)) var(--accent-ring);
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, box-shadow .2s ease;
}
.step.is-active .step__circle {
  transform: scale(1.15);
  background: var(--accent-hot);
  box-shadow: 0 0 0 calc(12 * var(--u)) rgba(255, 61, 20, .16);
}
.step__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(20 * var(--u)), 14px);
  line-height: 1.4;
  color: var(--ink);
  max-width: calc(600 * var(--u));
}
.step__text strong { font-weight: 700; }

/* --- phone + pointers --- */
.dd__phone-stage { position: relative; display: inline-block; }
.dd__phone { margin: 0; }
.dd__phone img {
  border-radius: var(--r-phone);
  box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 43, .18);
}
.dd--trading    .dd__phone img { width: calc(395 * var(--u)); }
.dd--ewallet    .dd__phone img { width: calc(330 * var(--u)); }
/* Investment is a two-phone pair, so each phone is smaller than a single
   phone section — both must sit inside the phone column, not bleed past
   the viewport right edge. */
.dd--investment .dd__phone img { width: calc(310 * var(--u)); }

.dd__phone-col--pair {
  justify-content: center;
  gap: calc(64 * var(--u));   /* room for pointer D's connector in the gap */
}

.pointer {
  position: absolute;
  top: var(--pt);
  display: flex;
  align-items: center;
}
.pointer[data-side="left"]  { right: 100%; flex-direction: row; }
.pointer[data-side="right"] { left: 100%;  flex-direction: row-reverse; }
.pointer__line {
  width: calc(32 * var(--u));
  height: 0;
  border-top: calc(2 * var(--u)) dashed var(--accent);
  opacity: .7;
  transition: opacity .25s ease, border-color .25s ease;
}
.pointer[data-side="left"]  .pointer__line { transform-origin: right center; }
.pointer[data-side="right"] .pointer__line { transform-origin: left center; }
.pointer__dot {
  position: relative;
  flex: none;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-step);
  font-weight: 700;
  font-size: max(calc(11 * var(--u)), 9px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease;
}
.pointer__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: calc(3.5 * var(--u)) solid var(--accent-hot);
  opacity: 0;
  pointer-events: none;
}

/* --- pointer ⇄ step link: highlight both endpoints on hover of either --- */
.pointer, .step { cursor: default; }
.pointer.is-active { z-index: 6; }
.pointer.is-active .pointer__dot {
  transform: scale(1.2);
  background: var(--accent-hot);
}
.pointer.is-active .pointer__line {
  opacity: 1;
  border-color: var(--accent-hot);
}
.pointer.is-active .pointer__halo {
  animation: pointerPing 2.5s cubic-bezier(0.53, 0, 0, 1.02) infinite;
}
/* single continuous segment — no intermediate keyframe, so it never decelerates
   or holds mid-cycle. Starts small (tucked behind the opaque dot) and grows +
   fades in one uninterrupted motion; the loop restarts while hidden = seamless. */
@keyframes pointerPing {
  0%   { transform: scale(0.8);  opacity: .85; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pointer.is-active .pointer__halo { animation: none; opacity: .5; transform: scale(1.25); }
}

/* --- mobile carousel dots (hidden on desktop) --- */
.dd__dots { display: none; }

/* --- deep-dive mobile --- */
@media (max-width: 900px) {
  .dd__intro {
    min-height: 0;
    padding: calc(80 * var(--u)) var(--gutter) calc(64 * var(--u));
  }
  .dd__display {
    font-size: calc(32 * var(--u));
    line-height: 1.1;
    letter-spacing: calc(-0.3 * var(--u));
    max-width: none;
  }
  .dd__label {
    margin-top: calc(56 * var(--u));
    font-size: max(calc(18 * var(--u)), 14px);
    max-width: none;
  }

  .dd__detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .dd__content { order: 1; padding: calc(48 * var(--u)) var(--gutter) calc(40 * var(--u)); }
  /* align-self:stretch overrides the desktop `align-self:start` (needed for the
     sticky grid) which otherwise shrink-wraps this flex-column item and aligns
     it left — so justify-content:center now centers the phone across full width. */
  /* The phone sits on the section tint; fade that tint into white toward the
     bottom so it blends into the white steps/pointer-text below (no hard seam).
     transparent-white (not `transparent`) avoids a grey cast mid-fade. */
  .dd__phone-col { order: 2; padding: calc(56 * var(--u)) var(--gutter); background: linear-gradient(180deg, rgba(255,255,255,0) 58%, #ffffff 100%); position: static; height: auto; align-self: stretch; }
  .dd__steps { order: 3; padding: 0; background: var(--white); }
  .dd__dots  { order: 4; }

  .dd__eyebrow-row {
    flex-wrap: wrap;
    gap: calc(8 * var(--u)) calc(12 * var(--u));
  }
  .dd__cat, .dd__brand {
    font-size: max(calc(11 * var(--u)), 10px);
    letter-spacing: max(calc(1 * var(--u)), .5px);
    white-space: normal;
  }
  .dd__badge {
    font-size: max(calc(10 * var(--u)), 9px);
    padding: calc(6 * var(--u)) calc(12 * var(--u));
    letter-spacing: .4px;
  }
  .dd__headline {
    margin-top: calc(24 * var(--u));
    font-size: calc(34 * var(--u));
    line-height: 1.1;
    letter-spacing: calc(-0.3 * var(--u));
    max-width: none;
  }
  .dd__insight {
    margin-top: calc(56 * var(--u));
    grid-template-columns: 1fr;
    border-bottom: 0;
  }
  .dd__col { padding: calc(28 * var(--u)) 0; }
  .dd__col + .dd__col {
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding: calc(28 * var(--u)) 0;
  }

  /* phones: only phone 1 shows on mobile; second hidden */
  .dd--trading    .dd__phone img,
  .dd--ewallet    .dd__phone img,
  .dd--investment .dd__phone img { width: calc(240 * var(--u)); }
  .dd__phone-col--pair { transform: none; justify-content: center; }
  .dd__phone-stage--2 { display: none; }
  /* Step D describes the hidden 2nd phone, so drop it on mobile → 3 steps/3 dots
     that match the 3 visible pointers (A/B/C). */
  .dd--investment .step[data-step="d"] { display: none; }
  .pointer__line { width: calc(20 * var(--u)); }
  .pointer__dot {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    font-size: max(calc(10 * var(--u)), 8px);
  }

  /* steps become a horizontal snap carousel */
  .dd__steps {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .dd__steps::-webkit-scrollbar { display: none; }
  .step {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: calc(40 * var(--u)) calc(32 * var(--u));
    gap: calc(24 * var(--u));
  }
  .step + .step { margin-top: 0; }
  .step__text { font-size: max(calc(18 * var(--u)), 14px); max-width: none; }

  .dd__dots {
    display: flex;
    justify-content: center;
    gap: calc(8 * var(--u));
    padding: 0 var(--gutter) calc(48 * var(--u));
    background: var(--white);
  }
  .dd__dots span {
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    border-radius: calc(3 * var(--u));
    background: rgba(0, 0, 0, .25);
    transition: width .3s ease, background .3s ease;
  }
  .dd__dots span.is-active {
    width: calc(18 * var(--u));
    background: var(--ink);
  }
}

/* ----------------------------------------------------------
   10. HOOK 1 · BELIEF
   ---------------------------------------------------------- */
.hook1 {
  background: var(--bg-hook1);
  height: calc(1080 * var(--u));
  padding: 0 calc(66 * var(--u)) calc(120 * var(--u));
  display: flex;
  align-items: flex-end;
}
.hook1__display {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(100 * var(--u));
  line-height: 1.16;
  letter-spacing: calc(-1.4 * var(--u));
  color: var(--off-white);
  max-width: calc(1560 * var(--u));
}
.hook1__display strong { font-weight: 700; color: var(--white); }

@media (max-width: 900px) {
  .hook1__tail { display: none; }
  .hook1 {
    height: auto;
    padding: calc(120 * var(--u)) var(--gutter) calc(80 * var(--u));
    flex-direction: column;   /* stack the button below the text (not beside it) */
    align-items: stretch;
  }
  .hook1__display {
    font-size: calc(40 * var(--u));
    line-height: 1.1;
    letter-spacing: calc(-0.4 * var(--u));
    max-width: none;
  }
}

/* ----------------------------------------------------------
   Section-level Download CTAs — mobile only (desktop uses the nav pill).
   Placed at key moments (methodology, hook-1) rather than a persistent bar.
   ---------------------------------------------------------- */
.section-cta { display: none; }
@media (max-width: 900px) {
  .section-cta {
    display: block;
    width: 100%;
    margin-top: calc(56 * var(--u));
    padding: calc(28 * var(--u)) calc(24 * var(--u));
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: max(calc(20 * var(--u)), 15px);
    line-height: 1;
    text-align: center;
    color: var(--white);
  }
  .section-cta--blue { background: var(--blue); }      /* on light sections */
  .section-cta--dark { background: var(--blue-deep); } /* on the electric-blue hook */
}

/* ----------------------------------------------------------
   11. HOOK 2 + BIO
   ---------------------------------------------------------- */
.hook2 {
  background: var(--bg-hook2);
  min-height: calc(1103 * var(--u));
  padding: calc(120 * var(--u)) calc(66 * var(--u));
}
.hook2__display {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(100 * var(--u));
  line-height: 1.16;
  letter-spacing: calc(-1.4 * var(--u));
  color: var(--white);
  max-width: calc(1700 * var(--u));
}
.hook2__email {
  display: inline-block;
  margin-top: calc(96 * var(--u));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: 1.28;
  letter-spacing: calc(-0.24 * var(--u));
  color: var(--white);
  transition: opacity .2s ease;
}
.hook2__email:hover { opacity: .8; text-decoration: underline; }
.hook2__divider {
  display: block;
  width: calc(64 * var(--u));
  height: calc(4 * var(--u));
  background: #d9d9d9;
  opacity: .4;
  transform-origin: left center;
  margin: calc(72 * var(--u)) 0 calc(96 * var(--u));
}
.hook2__positioning {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(24 * var(--u)), 16px);
  line-height: 1.5;
  color: var(--white);
  max-width: calc(640 * var(--u));
}
.bio {
  margin-top: calc(72 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(48 * var(--u));
}
.bio__photo-ring {
  flex: none;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(13 * var(--u)) rgba(255, 255, 255, .1);
}
.bio__photo {
  width: calc(131 * var(--u));
  height: calc(131 * var(--u));
  border-radius: 50%;
  object-fit: cover;
}
.bio__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(18 * var(--u)), 14px);
  color: var(--white);
}
.bio__body {
  margin-top: calc(12 * var(--u));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(calc(14 * var(--u)), 12px);
  line-height: 1.6;
  color: var(--white);
  opacity: .7;
  max-width: calc(480 * var(--u));
}
.bio__links {
  margin: calc(17 * var(--u)) 0 0;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
}
.bio__link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(calc(14 * var(--u)), 12px);
  line-height: 1.5;
  letter-spacing: calc(-0.14 * var(--u));
  color: var(--white);
  opacity: .7;
  transition: opacity .2s ease;
}
.bio__link:hover { opacity: 1; text-decoration: underline; }
.hook2__cta { display: none; }

@media (max-width: 900px) {
  .hook2 { padding: calc(96 * var(--u)) var(--gutter) calc(64 * var(--u)); }
  .hook2__display {
    font-size: calc(40 * var(--u));
    line-height: 1.1;
    letter-spacing: calc(-0.4 * var(--u));
    max-width: none;
  }
  .hook2__email { margin-top: calc(56 * var(--u)); font-size: calc(16 * var(--u)); }
  .hook2__divider { margin: calc(48 * var(--u)) 0 calc(64 * var(--u)); }
  .hook2__positioning { font-size: max(calc(18 * var(--u)), 14px); }
  .bio { flex-direction: column; gap: calc(24 * var(--u)); }
  .bio__photo { width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
  .bio__photo-ring { box-shadow: 0 0 0 calc(8 * var(--u)) rgba(255, 255, 255, .1); }
  .bio__body { font-size: max(calc(15 * var(--u)), 12px); line-height: 1.4; max-width: none; }
  /* The persistent floating Download pill (see .nav__cta) now covers this
     action everywhere, so the inline bio CTA is redundant on mobile. */
  .hook2__cta { display: none; }
}

/* ----------------------------------------------------------
   12. ABOUT-FROST FOOTER
   ---------------------------------------------------------- */
.about {
  position: relative;
  background: var(--navy-2);
  overflow: hidden;
  /* vw so the footer banner keeps its aspect on wide monitors (see .hero). */
  height: 36vw;
}
.about__media { position: absolute; inset: 0; }
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

@media (max-width: 900px) {
  .about { height: calc(309 * var(--u)); }
}

/* ----------------------------------------------------------
   13. REDUCED MOTION — everything already visible (JS sets no
   hidden states outside the no-preference matchMedia block).
   Kill any lingering transitions for safety.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}