/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY CANON · LOCKED 2026-05-13
   ─────────────────────────────────────────────────────────────────────────────

   THE FONT IS MONTSERRAT.

   - DISPLAY (every header · phase intro · MEGA METHOD wordmark · VSL caption ·
     CTA button · big H1 · share preview · OG asset · ad creative): Montserrat
   - BODY (paragraph copy · form labels · workbook): Inter
   - MONO (timestamps · code · technical labels): JetBrains Mono

   Recommended weights:
     - Montserrat Black (900) → big H1 · phase intros · MEGA METHOD wordmark
     - Montserrat ExtraBold (800) → sub-headlines · emphasis chips
     - Montserrat Bold (700) → CAPTIONS · CTAs · subtitle tracks (CapCut)
     - Montserrat Medium (500) → sub-lines under phase titles · taglines
     - Montserrat Regular (400) → rare in VSL context · use Inter for body

   Space Grotesk is RETIRED 2026-05-13 (Stone direct · "Space Grotesk is not
   our font · Space Grotesk should not be a fallback"). Removed from
   `--font-display` entirely. Inter is the only fallback to Montserrat.
   The `captions-spacegrotesk.ass` legacy file is do-not-use · the canonical
   caption workflow is `captions.srt` + Montserrat Bold via CapCut native subtitles.

   Local @font-face declarations guarantee fonts render correctly in headless
   Chromium (the HyperFrames render pipeline) which doesn't reliably load
   Google Fonts CDN. Inter + Montserrat + JetBrains Mono declared below.
   ───────────────────────────────────────────────────────────────────────────── */

/* Space Grotesk @font-face declarations RETIRED 2026-05-13 (Stone-imperative · "no fallback ·
   Space Grotesk should not be a fallback"). Files at /assets/fonts/SpaceGrotesk-*.ttf retained
   for any legacy asset render that still references it by name, but the brand canon no longer
   lists it as a fallback in `--font-display`. New work uses Montserrat exclusively. */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: block;
}
/* Montserrat — LOCAL for the MEGA METHOD wordmark + any heavy display treatment.
   Headless Chromium does not reliably load Google Fonts CDN; the live audit page's
   brand-mark + the wordmark-reveal comp both depend on Montserrat 900 specifically.
   Loaded local 2026-05-11 (Stone caught: wordmark font wasn't being used anywhere in VSL graphics). */
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-400.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-500.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-700.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-800.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-900.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: block;
}
/* Google Fonts CDN as secondary fallback (only loads if local files missing) */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  /* MEGA Method canonical palette · MIRROR of stoneross-site/src/components/brand-library/tokens.css v5.2
     Last sync: 2026-05-06 (Stone caught drift — typography + shadow scale + radius + ls tokens were stale).
     Any change here MUST be made in the source first; this file is a mirror, not a source. */

  /* Core palette */
  --color-mega-red: #C52425;
  --color-mega-red-bright: #E23434;
  --color-mega-red-neon: #FF4A4A;
  --color-electric-blue: #00AAFF;
  --color-neon-cyan: #1FC0FF;
  --color-gold: #D4A843;
  --color-gold-bright: #F0CE74;
  --color-copper: #C27A3E;
  --color-dark-green: #1B3A2D;

  /* Ink & canvas */
  --color-ink-deep: #05070B;
  --color-surface: #0B1220;
  --color-surface-raised: #121A2E;
  --color-bg-dark: #05070B;

  /* Text tones */
  --color-text-primary: #F5F7FA;
  --color-text-muted: #9CA3AF;
  --color-text-faint: #6B7280;
  --color-white-muted: rgba(255, 255, 255, 0.6);

  /* Severity (NEVER use sev-good/warn/bad/crit on content visuals — severity-only) */
  --color-sev-good: #22C55E;
  --color-sev-warn: #F59E0B;
  --color-sev-bad: #EF4444;
  --color-sev-crit: #7F1D1D;
  --color-amber: #FBBF24;

  /* Spacing */
  --sp1: 0.25rem; --sp2: 0.5rem; --sp3: 0.75rem; --sp4: 1rem;
  --sp5: 1.25rem; --sp6: 1.5rem; --sp7: 1.75rem; --sp8: 2rem;
  --sp10: 2.5rem; --sp12: 3rem; --sp16: 4rem; --sp20: 5rem; --sp24: 6rem;

  --space-section: 3.25rem;
  --space-section-tight: 2rem;
  --space-module: 1.5rem;

  /* Typography — display = Montserrat (Stone-locked 2026-05-11; promoted from
     "Space Grotesk → Montserrat fallback" because the live audit page + brand-mark
     both render Montserrat anyway, and the wordmark vibe carries across the VSL
     when display headings inherit it).
     Body = Inter. Mono = JetBrains Mono. Wordmark = Montserrat (alias).
     Space Grotesk stays in the chain as a secondary fallback for any surface
     that has the font cached and prefers its character widths. */
  --font-display: 'Montserrat', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-wordmark: 'Montserrat', 'Inter', system-ui, sans-serif;

  --text-display: clamp(2.6rem, 5vw, 4.4rem);
  --text-h1: clamp(2rem, 3.4vw, 3rem);
  --text-h2: clamp(1.35rem, 2vw, 1.7rem);
  --text-body: 1rem;
  --text-caption: 0.78rem;

  --lh-heading: 1.05;
  --lh-body: 1.6;
  --ls-tight: -0.02em;
  --ls-kicker: 0.14em;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-card: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Shadows — canonical scale per live audit page (2026-05-06 verification). */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 12px 40px rgba(0,0,0,0.28);
  --shadow-lg: 0 28px 80px rgba(0,0,0,0.38);
  --shadow-elevation-card: 0 16px 48px rgba(0,0,0,0.34), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-glow-cyan: 0 0 40px rgba(41, 209, 255, 0.22);
  --shadow-glow-gold: 0 0 40px rgba(240, 206, 116, 0.16);
  --shadow-glow-red:  0 0 40px rgba(197, 36, 37, 0.26);
  --shadow-inset-cyan: 0 0 24px rgba(41, 209, 255, 0.06) inset;
  --shadow-inset-gold: 0 0 24px rgba(240, 206, 116, 0.06) inset;
  --shadow-inset-red:  0 0 24px rgba(197, 36, 37, 0.06) inset;

  /* Motion */
  --duration-fast: 160ms;
  --duration-med: 320ms;
  --duration-slow: 720ms;
  --duration-sting: 480ms;
  --duration-beat: 1200ms;
  --duration-outro: 2400ms;
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --container-max: 1120px;
  --container-wide: 1240px;

  /* Semantic aliases */
  --canvas: var(--color-ink-deep);
  --bg-page: var(--color-ink-deep);
  --bg-card: var(--color-surface);
  --bg-card-raised: var(--color-surface-raised);
  --ink-high: var(--color-text-primary);
  --ink-mid: var(--color-text-muted);
  --ink-low: var(--color-text-faint);
  --brand-red: var(--color-mega-red);
  --brand-red-hot: var(--color-mega-red-bright);
  --brand-blue: var(--color-electric-blue);
  --brand-blue-hot: var(--color-neon-cyan);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  --series-now: var(--color-mega-red-bright);
  --series-local: var(--color-white-muted);
  --series-national: var(--color-gold);
  --series-mega: var(--color-neon-cyan);

  --color-leak: var(--color-mega-red);
  --color-recovery: var(--color-neon-cyan);

  /* ───── Light-theme tokens (workbook · PDF · light variants) ─────
     Stone-locked 2026-05-11 (Phase 2 Reship Block-1 Item-2).
     Sourced from WorkbookPage.tsx's prior hardcoded local consts — a
     refactor (not a recolor); RGB values match the pre-refactor consts
     byte-for-byte so the workbook renders identically before/after.

     Namespaced `--color-paper-*` to avoid collision with the existing
     dark-theme `--color-ink-deep` (#05070B, near-black) which is a
     DIFFERENT semantic (dark-canvas backdrop, not paper text). The
     paper-ink token below is the workbook body text color on a
     `--color-paper` (white) substrate. */
  --color-paper:           rgb(255 255 255);
  --color-paper-canvas:    rgb(247 244 239);
  --color-paper-ink:       rgb(7 16 33);
  --color-paper-ink-soft:  rgb(36 48 68);
  --color-paper-muted:     rgb(91 100 114);
  --color-paper-faint:     rgb(123 132 147);
  --color-paper-hairline:  rgb(227 231 238);
  --color-cyan-soft:       rgb(233 248 255);
  --color-gold-soft:       rgb(255 247 217);
  --color-red-soft:        rgb(255 241 241);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: transparent;
  color: var(--ink-high);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv01';
}

/* Display headings — canonical (Montserrat 800, tight tracking, 1.05 lh, NO uppercase, NO text-shadow). */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
  margin: 0;
  text-shadow: none;
}

/* Canonical primitives — drop-in classes for compositions. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(0, 175, 255, 0.08);
  border: 1px solid rgba(0, 175, 255, 0.32);
  color: var(--brand-blue-hot);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}
.kicker--gold { background: rgba(212, 168, 67, 0.08); border-color: rgba(212, 168, 67, 0.32); color: var(--color-gold-bright); }
.kicker--red  { background: rgba(197, 36, 37, 0.08); border-color: rgba(197, 36, 37, 0.38); color: var(--color-mega-red-bright); }
.kicker::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--sp6);
  box-shadow: var(--shadow-elevation-card);
}
.card--raised { background: var(--bg-card-raised); }
.card--red  { border-color: rgba(197, 36, 37, 0.28); box-shadow: var(--shadow-elevation-card), var(--shadow-glow-red),  var(--shadow-inset-red); }
.card--cyan { border-color: rgba(41, 209, 255, 0.40); box-shadow: var(--shadow-elevation-card), var(--shadow-glow-cyan), var(--shadow-inset-cyan); }
.card--gold { border-color: rgba(212, 168, 67, 0.42); box-shadow: var(--shadow-elevation-card), var(--shadow-glow-gold), var(--shadow-inset-gold); }

/* ───── CANONICAL AUDIT-PAGE PRIMITIVES ─────
   Mirrored verbatim from stoneross-site/src/components/brand-library/primitives.css
   so VSL/PRECALL overlays reuse the EXACT same components as the live audit page.
   Stone-locked 2026-05-06: "find the canonical components and reuse them — that way
   our marketing assets stay consistent with the audit site." */

/* hero-stat — the canonical card pattern from audit page hero (AT RISK / RECOVERABLE).
   Replace ad-hoc card patterns with .hero-stat hero-stat--risk|--lift. */
.hero-stat {
  padding: var(--sp4) var(--sp5);
  border-radius: var(--radius-card);
  border: 1px solid;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 34, 58, 0.55), rgba(8, 12, 20, 0.6));
}
.hero-stat--risk { border-color: rgba(197, 36, 37, 0.38); box-shadow: var(--shadow-glow-red); }
.hero-stat--lift { border-color: rgba(41, 209, 255, 0.55); box-shadow: 0 0 40px rgba(41, 209, 255, 0.28), inset 0 0 24px rgba(41, 209, 255, 0.06); }
.hero-stat--gold { border-color: rgba(212, 168, 67, 0.55); box-shadow: 0 0 40px rgba(240, 206, 116, 0.22), inset 0 0 24px rgba(212, 168, 67, 0.06); }
.hero-stat__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.hero-stat--risk .hero-stat__kicker { color: var(--brand-red-hot); }
.hero-stat--lift .hero-stat__kicker { color: var(--brand-blue-hot); text-shadow: 0 0 10px rgba(41, 209, 255, 0.55); }
.hero-stat--gold .hero-stat__kicker { color: var(--color-gold-bright); text-shadow: 0 0 10px rgba(240, 206, 116, 0.45); }
.hero-stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  margin: var(--sp3) 0 var(--sp2);
}
.hero-stat--risk .hero-stat__value { color: var(--brand-red-hot); }
.hero-stat--lift .hero-stat__value { color: var(--brand-blue-hot); text-shadow: 0 0 22px rgba(41, 209, 255, 0.5), 0 0 44px rgba(41, 209, 255, 0.28); }
.hero-stat--gold .hero-stat__value { color: var(--color-gold-bright); text-shadow: 0 0 22px rgba(240, 206, 116, 0.45), 0 0 44px rgba(212, 168, 67, 0.22); }
.hero-stat__label { font-weight: 600; color: var(--ink-high); margin-bottom: 4px; }
.hero-stat__note  { font-size: 0.88rem; color: var(--ink-mid); }

/* leak-card__infer — canonical "INFERRED" pill (warning amber).
   Used for any directional / model-inferred / verify-on-call callouts. */
.infer-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFD27A;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 193, 87, 0.5);
  background: linear-gradient(180deg, rgba(40, 28, 8, 0.96), rgba(20, 14, 4, 0.96));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 193, 87, 0.25);
}
.infer-pill::before { content: '⚠'; font-size: 11px; }
.infer-pill--lg { font-size: 11px; padding: 5px 12px; }
.infer-pill--lg::before { font-size: 13px; }

/* a9-disclaimer — canonical compliance/earnings-disclaimer block.
   Reusable for any compliance overlay that needs the §A.9 EARNINGS DISCLAIMER kicker. */
.a9-disclaimer {
  margin-top: var(--sp6);
  padding: var(--sp4) var(--sp5);
  border-top: 1px solid var(--hairline);
  color: var(--ink-mid);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  text-wrap: pretty;
}
.a9-disclaimer::before {
  content: '§A.9 · EARNINGS DISCLAIMER';
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: var(--ls-kicker);
  color: var(--ink-low);
  margin-bottom: 6px;
}

/* stage-wash — opt-in brand backdrop for FULL-SCREEN TAKEOVER comps (Mode B).
   Add <body class="stage-wash"> to any comp where the WebM should display
   a coherent brand presence (cosmic deep-blue gradient + Flower of Life lattice)
   instead of pure transparent black.
   Mode A comps (transparent overlay over face-cam) DO NOT use this class.
   Stone-locked 2026-05-06. */

/* Layer 1: cosmic radial gradient — verbatim mirror of audit page body::before
   Stone-locked 2026-05-08: base canvas lightened from near-black #05070B → #0A1428
   so top/bottom strips don't read as pure black voids. Vignette character preserved.  */
body.stage-wash::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 175, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 55% at 85% 100%, rgba(0, 175, 255, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 45% at 15% 110%, rgba(239, 68, 68, 0.05), transparent 70%),
    linear-gradient(180deg, #0c1a30 0%, #0A1428 60%, #0A1428 100%);
}

/* Layer 2: Flower of Life lattice — INLINE SVG with per-circle GSAP stagger reveal
   ("circles popping in one by one" effect, Stone-locked 2026-05-07).
   Auto-injected by /shared/mega-motion.js on stage-wash bodies as <svg class="stage-lattice">.
   ~98 hex-packed overlapping circles · radius 200 · inside-out reveal order.

   Tone variants (Stone-locked 2026-05-06):
     · default     — CYAN (recovery / install / expand) #8ff7ff→#1f79ff
     · .tone-red   — RED  (pain / leak / expose / disclaimer) #ffd0d0→#c52425
     · .tone-gold  — GOLD (guarantee / VIP peak)               #fff3c8→#d4a843
   Tone applied at SVG <g> stroke gradient · gradient defs inlined by mega-motion.js. */
svg.stage-lattice {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  /* Initial state — GSAP per-circle stagger animates from this baseline */
  opacity: 1;
  will-change: opacity, transform;
}