/* ============================================================
   RONIN HOMECOMING — Campaign Telemetry
   Two themes:
     [data-theme="ronin"]       — Ronin brand (default)
     [data-theme="homecoming"]  — Editorial dark · samurai homecoming
   ============================================================ */

/* ---- RONIN BRAND THEME (default) ---- */
[data-theme="ronin"] {
  --ink:        #070B12;
  --ink-2:      #0D131D;
  --ink-3:      #131B27;
  --ink-edge:   #1B2636;
  --ink-edge-2: #243245;
  --bone:       #EAF2FB;
  --bone-soft:  #B5C7DF;
  --bone-dim:   #7C92AE;
  --bone-faint: #44566F;

  --accent:     #1273EA;
  --accent-2:   #3DA5FF;
  --accent-deep:#0A4FAA;
  --accent-soft:rgba(18,115,234,0.12);

  --gold:       #FFC85B;
  --moss:       #22C58B;
  --crimson:    #FF6464;

  --serif: "DM Sans", system-ui, sans-serif;
  --display: "DM Sans", system-ui, sans-serif;
  --sans:  "DM Sans", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --display-italic: normal;
  --display-weight: 600;
  --display-letter: -0.025em;

  --grain-opacity: 0.10;
  --vignette: radial-gradient(120% 80% at 80% -10%, rgba(18,115,234,0.16), transparent 55%),
              radial-gradient(100% 70% at -10% 100%, rgba(61,165,255,0.08), transparent 55%);
}

/* ---- HOMECOMING (editorial dark) THEME ---- */
[data-theme="homecoming"] {
  --ink:        #0E0D0B;
  --ink-2:      #131210;
  --ink-3:      #1A1815;
  --ink-edge:   #28231D;
  --ink-edge-2: #3a322a;
  --bone:       #F0E6D6;
  --bone-soft:  #C9BFAF;
  --bone-dim:   #8A8478;
  --bone-faint: #4D4943;

  --accent:     #D44524;
  --accent-2:   #E96A4A;
  --accent-deep:#A8331A;
  --accent-soft:rgba(212,69,36,0.12);

  --gold:       #C9A24E;
  --moss:       #6F8A4C;
  --crimson:    #B23A2F;

  --serif: "Fraunces", "Times New Roman", serif;
  --display: "Fraunces", "Times New Roman", serif;
  --sans:  "Geist", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, monospace;

  --display-italic: normal;
  --display-weight: 350;
  --display-letter: -0.025em;

  --grain-opacity: 0.18;
  --vignette: radial-gradient(120% 80% at 80% -10%, rgba(212,69,36,0.10), transparent 55%),
              radial-gradient(100% 70% at -10% 100%, rgba(201,162,78,0.06), transparent 55%);
}

/* Theme-specific tweaks */
[data-theme="homecoming"] .hero-em { font-style: italic; }
[data-theme="homecoming"] .hero-lede { font-style: italic; }
[data-theme="homecoming"] .band-title { font-style: italic; }
[data-theme="homecoming"] .coming-title { font-style: italic; }
[data-theme="homecoming"] .topbar-wordmark { font-family: var(--serif); font-style: italic; }
[data-theme="ronin"] .topbar-wordmark { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; }
[data-theme="ronin"] .hero-em {
  font-style: normal;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Shared shell ---- */
:root {
  --gut: clamp(20px, 4vw, 56px);
  --rail-w: 88px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset,
                 0 24px 60px -20px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.4s ease, color 0.4s ease;
}

::selection { background: var(--accent); color: var(--ink); }

/* Atmosphere */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  mix-blend-mode: overlay; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  transition: opacity 0.4s ease;
}

.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: var(--vignette);
  transition: background 0.4s ease;
}

/* ---- Topbar ---------------------------------------------- */
.topbar {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--gut);
  border-bottom: 1px solid var(--ink-edge);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.topbar-left { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 22px; height: 22px; color: var(--accent); }
.topbar-wordmark {
  font-size: 18px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--bone);
}
.topbar-divider { color: var(--bone-faint); }
.topbar-right { display: flex; align-items: center; gap: 24px; }

.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--ink-edge);
  padding: 3px;
  border-radius: 999px;
  background: var(--ink-2);
}
.theme-pill {
  background: transparent;
  border: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--bone-dim);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.theme-pill.active {
  background: var(--accent);
  color: var(--ink);
}
.theme-pill:not(.active):hover { color: var(--bone); }

.topbar-status { display: inline-flex; align-items: center; gap: 8px; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 0 rgba(34,197,139,0.7);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,139,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,139,0); }
}
.topbar-admin {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  color: var(--bone);
  padding: 6px 12px;
  border: 1px solid var(--ink-edge);
  transition: all 0.18s ease;
}
.topbar-admin:hover { border-color: var(--accent); color: var(--accent); }
.admin-arrow { transition: transform 0.18s ease; }
.topbar-admin:hover .admin-arrow { transform: translateX(3px); }

/* ---- Key art banner -------------------------------------- */
/* Cinematic letterboxed band between the topbar and the hero.
   16:9 preserved via object-fit: cover; height clamped so it never
   eats the fold; bottom edge fades into --ink so it sets up the hero
   instead of fighting it. Theme tint sits on top at low opacity. */
.key-art {
  position: relative; z-index: 3;
  background: var(--ink-2);
  overflow: hidden;
  border-bottom: 1px solid var(--ink-edge);
  /* Soft opacity fade on first paint — no directional pull */
  animation: keyart-in 0.85s ease-out both;
}
.key-art-frame {
  position: relative;
  width: 100%;
  height: clamp(280px, 44vw, 560px);
  overflow: hidden;
  /* Smooth resize when intro collapses to rest state */
  transition: height 1.05s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.key-art-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;   /* bias slightly above center — most key art puts subjects in the upper third */
  display: block;
  opacity: 0;
  transition: opacity 0.55s ease;
  /* Until the GIF first frame paints, show a subtle gradient so the band
     doesn't appear as a hard empty rectangle on slow loads. */
  background:
    linear-gradient(120deg, var(--ink-2) 0%, var(--ink-3) 60%, var(--ink-2) 100%);
}
.key-art-img.loaded { opacity: 1; }

/* Loading skeleton — visible until <img> fires onload, then crossfades out */
.key-art-skeleton {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(120deg, var(--ink-2) 0%, var(--ink-3) 50%, var(--ink-2) 100%);
  background-size: 200% 100%;
  animation: keyart-shimmer 2.4s ease-in-out infinite;
  transition: opacity 0.55s ease;
}
.key-art-skeleton.hidden { opacity: 0; pointer-events: none; }
.key-art-skeleton-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.key-art-skeleton-label .dots i {
  font-style: normal;
  display: inline-block;
  opacity: 0.3;
  animation: keyart-dot 1.4s ease-in-out infinite;
}
.key-art-skeleton-label .dots i:nth-child(2) { animation-delay: 0.18s; }
.key-art-skeleton-label .dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes keyart-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes keyart-dot {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .key-art-skeleton { animation: none; }
  .key-art-skeleton-label .dots i { animation: none; opacity: 1; }
}
/* Theme-aware color cast — *very* subtle, just enough to feel native to each theme */
.key-art-tint {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.18;
  background: radial-gradient(ellipse at 50% 30%, transparent 40%, var(--ink) 100%);
}
[data-theme="ronin"]      .key-art-tint { background: radial-gradient(ellipse at 50% 30%, rgba(18, 115, 234, 0.18) 0%, transparent 60%, rgba(7, 11, 18, 0.6) 100%); }
[data-theme="homecoming"] .key-art-tint { background: radial-gradient(ellipse at 50% 30%, rgba(212, 69, 36, 0.16) 0%, transparent 55%, rgba(14, 13, 11, 0.6) 100%); }

/* Bottom fade carries the eye into the hero text without a hard seam */
.key-art-fade {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, var(--ink) 96%);
}
@keyframes keyart-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .key-art { animation: none; }
}
/* Tighten on small screens so it doesn't dominate */
@media (max-width: 720px) {
  .key-art-frame { height: clamp(200px, 56vw, 320px); }
}

/* ---- Key art intro (first load per session) -------------- */
/* Banner fills the viewport so the asset gets to play uncropped(ish);
   the rest of the page sits below the fold and reveals on scroll
   like normal once the intro retracts. */
body.intro-active {
  overflow: hidden;
}
body.intro-active .key-art-frame {
  height: calc(100vh - var(--key-art-topbar-offset, 64px));
}
body.intro-active .key-art-img {
  /* Show more of the asset during the intro (less aggressive cover crop) */
  object-fit: contain;
  background: var(--ink-2);
}
/* While the intro is active, soften the bottom fade so it doesn't eat
   the asset; bring it back when it collapses */
body.intro-active .key-art-fade {
  height: 18%;
  opacity: 0.6;
}
.key-art-fade {
  transition: height 0.9s ease, opacity 0.9s ease;
}
.key-art-img {
  transition: object-fit 0s; /* placeholder so the property exists */
}
/* "Scroll to enter" cue while intro is on — non-interactive, just a hint */
.intro-skip {
  position: fixed; z-index: 60;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--ink-edge);
  padding: 9px 16px;
  pointer-events: none;     /* it's a hint, not a button */
  opacity: 0;
  transition: opacity 0.6s ease 1.0s;
  backdrop-filter: blur(6px);
}
.intro-skip::after {
  content: "↓";
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0;
  animation: intro-bob 1.6s ease-in-out infinite;
}
@keyframes intro-bob {
  0%, 100% { transform: translateY(0);   opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}
body.intro-active .intro-skip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body.intro-active { overflow: auto; }
  body.intro-active .key-art-frame { height: clamp(280px, 44vw, 560px); }
  body.intro-active .key-art-img { object-fit: cover; }
  .intro-skip { display: none; }
  .intro-skip::after { animation: none; }
}

/* ---- Hero ------------------------------------------------ */
.hero {
  position: relative; z-index: 2;
  padding: clamp(56px, 9vw, 120px) var(--gut) clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--ink-edge);
  max-width: 1480px;
  margin: 0 auto;
}
.hero-meta {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.hero-meta-label .meta-num { color: var(--accent); }
.hero-meta-dot { color: var(--bone-faint); }

.hero-title {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.95;
  letter-spacing: var(--display-letter);
  color: var(--bone);
  margin: 0 0 28px;
  max-width: 13ch;
}
.hero-title-line { font-style: normal; }
.hero-em {
  font-weight: var(--display-weight);
  color: var(--accent);
  position: relative;
}

.hero-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--bone-soft);
  max-width: 52ch;
  margin: 0 0 56px;
}

.hero-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-edge);
  border-bottom: 1px solid var(--ink-edge);
}
.hero-summary-cell {
  padding: 22px 24px 26px;
  border-right: 1px solid var(--ink-edge);
  display: flex; flex-direction: column; gap: 10px;
}
.hero-summary-cell:last-child { border-right: 0; }
.cell-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.cell-value {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: var(--display-letter);
  color: var(--bone);
}
.cell-value--md { font-size: clamp(24px, 2.4vw, 32px); }
.cell-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
}

/* ---- Bands ----------------------------------------------- */
.band {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 110px) var(--gut);
  gap: clamp(20px, 3vw, 56px);
}

.band-rail {
  position: sticky;
  top: 24px;
  align-self: start;
  height: fit-content;
}
.rail-stack {
  display: flex; flex-direction: column; gap: 6px;
  border-left: 1px solid var(--accent);
  padding-left: 14px;
}
.rail-stage {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}
.rail-roman {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 28px;
  line-height: 1;
  color: var(--bone);
}
[data-theme="homecoming"] .rail-roman { font-style: italic; }
.rail-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--bone-dim);
  text-transform: uppercase;
}

.band-body { min-width: 0; }
.band-header {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: clamp(40px, 5vw, 72px);
  max-width: 56ch;
}
.band-title {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
}
.band-note {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--bone-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 52ch;
}

.band-divider {
  display: flex; justify-content: center; align-items: center;
  padding: 12px 0;
  max-width: 1480px; margin: 0 auto;
  position: relative; z-index: 2;
}
.divider-mark { width: 220px; height: 20px; }
.divider-mark line { stroke: var(--bone-faint); stroke-width: 1; }
.divider-mark polygon { fill: var(--accent); }

/* ---- KPI Headline ---------------------------------------- */
.kpi-headline {
  border-top: 1px solid var(--ink-edge);
  border-bottom: 1px solid var(--ink-edge);
  padding: 36px 0 44px;
  margin-bottom: 48px;
}
.kpi-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: block;
  margin-bottom: 18px;
}
.kpi-number-row {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 18px;
}
.kpi-number {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-variation-settings: "opsz" 144;
  font-size: clamp(72px, 11vw, 168px);
  line-height: 0.9;
  letter-spacing: var(--display-letter);
  color: var(--bone);
  font-feature-settings: "tnum", "lnum";
}
.kpi-number--md { font-size: clamp(48px, 6vw, 88px); }
.kpi-unit {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--bone-dim);
}
[data-theme="homecoming"] .kpi-unit { font-style: italic; }
.kpi-currency {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--bone-dim);
  align-self: baseline;
}

.kpi-delta {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.delta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ink-edge);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bone-soft);
}
.delta-pill.positive { border-color: var(--moss); color: var(--moss); }
.delta-pill.negative { border-color: var(--crimson); color: var(--crimson); }
.delta-pill.neutral  { color: var(--bone-dim); }
.delta-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone-dim);
  letter-spacing: 0.06em;
}

/* ---- Platform grid (TOFU) — tightened 6-up ----------- */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--ink-edge);
  border: 1px solid var(--ink-edge);
}
.platform-card {
  background: var(--ink);
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: background 0.18s ease, transform 0.18s ease;
  min-width: 0;
}
.platform-card:hover {
  background: var(--ink-2);
  transform: translateY(-2px);
}
.platform-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.platform-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.platform-icon {
  width: 16px; height: 16px;
  color: var(--bone);
  flex-shrink: 0;
}
[data-theme="ronin"] .platform-icon.brand-x { color: #FFFFFF; }
[data-theme="ronin"] .platform-icon.brand-fb { color: #1877F2; }
[data-theme="ronin"] .platform-icon.brand-yt { color: #FF0033; }
[data-theme="ronin"] .platform-icon.brand-tt { color: #25F4EE; }
[data-theme="ronin"] .platform-icon.brand-ronin { color: var(--accent-2); }
[data-theme="ronin"] .platform-icon.brand-osg { color: #E1413B; }
[data-theme="homecoming"] .platform-icon { color: var(--bone); }

.platform-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-value {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: var(--display-letter);
  line-height: 1;
  color: var(--bone);
  font-feature-settings: "tnum";
}
.platform-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
}
.platform-delta.positive { color: var(--moss); }
.platform-delta.negative { color: var(--crimson); }
.platform-share {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--bone-faint);
  letter-spacing: 0.08em;
}

/* ---- KPI Target component -------------------------------- */
.kpi-target {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--ink-edge);
  display: flex; flex-direction: column; gap: 10px;
}
.target-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  gap: 14px;
  flex-wrap: wrap;
}
.target-row .target-label { color: var(--bone-dim); }
.target-row .target-status { color: var(--bone); font-weight: 500; }
.target-row .target-status.met { color: var(--moss); }
.target-row .target-status.bonus { color: var(--gold); }
.target-bar {
  position: relative;
  height: 6px;
  background: var(--ink-edge);
  margin: 6px 0 22px; /* room for marker labels */
}
.target-bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--accent);
  transition: width 1.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.target-bar.met .fill { background: var(--moss); }
.target-bar.bonus-active .fill {
  background: linear-gradient(90deg, var(--moss) 0%, var(--moss) 33.33%, var(--gold) 100%);
}
.target-bar .marker {
  position: absolute; top: -4px; height: 14px;
  width: 1.5px;
  background: var(--bone-soft);
  transform: translateX(-50%);
  z-index: 2;
  opacity: 1;
  transition: left 0.9s cubic-bezier(0.2, 0.6, 0.2, 1),
              opacity 0.55s ease;
}
.target-bar .marker.met { background: var(--moss); }
.target-bar .marker.bonus { background: var(--gold); }
.target-bar .marker .marker-label {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + 4px);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
  transition: color 0.55s ease;
}
.target-bar .marker.met .marker-label { color: var(--moss); }
.target-bar .marker.bonus .marker-label { color: var(--gold); }
.target-bar .marker.bonus-hidden {
  opacity: 0;
  pointer-events: none;
}

/* PoD headline "of target" treatment */
.pod-headline-row { align-items: baseline; }
.pod-of-target {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 44px);
  color: var(--bone-dim);
  letter-spacing: -0.01em;
}

.section-title {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.section-source-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--bone-faint);
  text-transform: none;
}
.platform-bar {
  height: 2px;
  background: var(--ink-edge);
  position: relative;
  margin-top: 4px;
  overflow: hidden;
}
.platform-bar > i {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---- MOFU grid (LP + Guide) ----------------------------- */
.mofu-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1px;
  background: var(--ink-edge);
  border: 1px solid var(--ink-edge);
}
.mofu-card {
  background: var(--ink);
  padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  min-width: 0;
}
.mofu-card-head, .card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.card-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.card-source {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--bone-faint);
  display: block;
}

.kpi-meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--ink-edge);
  border-bottom: 1px solid var(--ink-edge);
}
.meta-item { display: flex; flex-direction: column; gap: 4px; }
.meta-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.meta-v {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  color: var(--bone);
  letter-spacing: -0.01em;
}

.card-section { margin-top: 8px; }
.section-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 14px;
}

/* Source bars */
.source-bars { display: flex; flex-direction: column; gap: 12px; }
.source-row {
  display: grid;
  grid-template-columns: 120px 1fr 70px;
  align-items: center;
  gap: 14px;
}
.source-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--bone);
  display: flex; align-items: center; gap: 8px;
}
.source-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.source-bar {
  height: 4px;
  background: var(--ink-edge);
  position: relative;
  overflow: hidden;
}
.source-bar > i {
  display: block; height: 100%; width: 0;
  background: var(--bone);
  transition: width 1.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.source-row:nth-child(1) .source-bar > i, .source-row:nth-child(1) .source-dot { background: var(--accent); }
.source-row:nth-child(2) .source-bar > i, .source-row:nth-child(2) .source-dot { background: var(--bone); }
.source-row:nth-child(3) .source-bar > i, .source-row:nth-child(3) .source-dot { background: var(--gold); }
.source-row:nth-child(4) .source-bar > i, .source-row:nth-child(4) .source-dot { background: var(--accent-2); }
.source-row:nth-child(5) .source-bar > i, .source-row:nth-child(5) .source-dot { background: var(--moss); }

.source-pct {
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
  color: var(--bone);
  letter-spacing: 0.04em;
}

/* Funnel */
.funnel { display: flex; flex-direction: column; gap: 14px; margin: 6px 0; }
.funnel-step { display: flex; flex-direction: column; gap: 8px; }
.funnel-step-head { display: flex; justify-content: space-between; align-items: baseline; }
.funnel-step-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--bone);
}
.funnel-step-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone-soft);
  letter-spacing: 0.04em;
}
.funnel-step-value .accent { color: var(--accent); margin-left: 8px; }
.funnel-step-bar {
  height: 28px;
  position: relative;
  background: var(--accent-soft);
  overflow: hidden;
}
.funnel-step-bar > i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  transition: width 1.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.funnel-step-bar > i::after {
  content: ""; position: absolute; right: -1px; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
}
.funnel-step:last-child .funnel-step-bar > i {
  background: linear-gradient(90deg, var(--gold), #8a6c2f);
}

/* Guide insight panel — replaces the old decorative spark.
   Two cells: engagement (downstream of LP) + pace (projection to target).
   Each cell hover-reveals a calc tooltip beneath it. */
.guide-insight {
  position: relative;       /* tooltip is positioned against this, not a single cell */
  margin-top: auto;
  border-top: 1px dashed var(--ink-edge);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
}
.gi-cell {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: default;
  transition: background 0.18s ease;
}
/* Hover lights the whole panel — engagement + pace read as a unit.
   The tooltip pointer indicates which specific cell is being inspected. */
.guide-insight {
  transition: background 0.18s ease;
  /* Vertical hairline between cells, full height */
  background:
    linear-gradient(var(--ink-edge), var(--ink-edge)) center / 1px 100% no-repeat;
}
.guide-insight:hover {
  background:
    linear-gradient(var(--ink-edge-2), var(--ink-edge-2)) center / 1px 100% no-repeat,
    var(--ink-2);
}

.gi-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gi-arrow {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0;
}
.gi-number-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.gi-number {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.012em;
  color: var(--bone);
  line-height: 1.05;
}
[data-theme="homecoming"] .gi-number {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.gi-pace-arrow {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
}
.gi-pace-arrow.up   { color: var(--moss); }
.gi-pace-arrow.down { color: var(--accent); }

.gi-sub {
  font-family: var(--body);
  font-size: 11px;
  line-height: 1.4;
  color: var(--bone-dim);
  letter-spacing: 0.005em;
  /* Pretty wrapping: split lines evenly when wrapping is forced,
     and never break a word across lines. */
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Calc tooltip — positioned against the whole panel so it can use
   the full card width instead of being trapped in a single cell. */
.gi-tip {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 10px);
  z-index: 8;
  padding: 12px 16px 14px;
  background: var(--ink);
  border: 1px solid var(--ink-edge-2);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  /* Subtle pointer triangle hanging off the bottom edge */
}
.gi-tip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 8px; height: 8px;
  background: var(--ink);
  border-right: 1px solid var(--ink-edge-2);
  border-bottom: 1px solid var(--ink-edge-2);
  transform: rotate(45deg);
}
/* Anchor the pointer under the hovered cell */
.gi-cell[data-insight="engagement"] .gi-tip::after { left: 25%;  margin-left: -4px; }
.gi-cell[data-insight="pace"]       .gi-tip::after { left: 75%;  margin-left: -4px; }

.gi-cell:hover .gi-tip,
.gi-cell:focus-within .gi-tip {
  opacity: 1;
  transform: translateY(0);
}
.gi-tip-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.gi-tip-body {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--bone);
  letter-spacing: 0.01em;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 640px) {
  .guide-insight {
    grid-template-columns: 1fr;
    background: none;
  }
  .gi-cell + .gi-cell { border-top: 1px dashed var(--ink-edge); }
}

.card-stub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone-faint);
  letter-spacing: 0.04em;
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-edge);
}
.card-stub code {
  color: var(--bone-soft);
  background: var(--ink-2);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10.5px;
}

/* ---- BOFU grid ------------------------------------------- */
.bofu-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--ink-edge);
  border: 1px solid var(--ink-edge);
}
.bofu-card {
  background: var(--ink);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  min-width: 0;
}
.bofu-card--headline   { grid-column: span 3; }
.bofu-card--ron        { grid-column: span 3; }
.bofu-card--mkt        { grid-column: span 4; }
.bofu-card--sentiment  { grid-column: span 2; }

.pod-tiers {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-edge);
  border: 1px solid var(--ink-edge);
}
.pod-tier {
  background: var(--ink);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.pod-tier-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.pod-tier-value {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 28px;
  color: var(--bone);
  letter-spacing: -0.02em;
}
.pod-tier:nth-child(2) .pod-tier-value { color: var(--gold); }
.pod-tier:nth-child(3) .pod-tier-value { color: var(--accent); }

/* $RON */
.ron-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 1.4fr;
  gap: 24px;
  align-items: center;
}
.ron-deltas { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ron-delta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border: 1px solid var(--ink-edge);
  color: var(--bone-dim);
}
.ron-delta.positive { color: var(--moss); border-color: var(--moss); }
.ron-delta.negative { color: var(--crimson); border-color: var(--crimson); }

.ron-spark-wrap {
  position: relative;
  width: 100%;
  height: 110px;
}
.ron-spark {
  width: 100%; height: 100%;
  display: block;
  cursor: crosshair;
}
.ron-spark path.line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ron-spark.drawn path.line { stroke-dashoffset: 0; }
.ron-spark path.fill { opacity: 0; transition: opacity 0.8s ease 0.4s; }
.ron-spark.drawn path.fill { opacity: 1; }

.ron-guide {
  position: absolute; top: 4px; bottom: 4px; width: 1px;
  background: var(--bone-soft);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ron-spark-wrap.hover .ron-guide { opacity: 0.45; }
.ron-tooltip {
  position: absolute;
  background: var(--ink-3);
  border: 1px solid var(--ink-edge-2);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone);
  pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 4;
  transform: translate(-50%, -120%);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.ron-spark-wrap.hover .ron-tooltip { opacity: 1; }
.ron-tooltip .rt-date { color: var(--bone-dim); font-size: 10px; }
.ron-tooltip .rt-price { color: var(--bone); font-weight: 500; }

.ron-foot {
  display: flex; gap: 28px; flex-wrap: wrap;
  border-top: 1px solid var(--ink-edge);
  padding-top: 14px;
  margin-top: 8px;
}

/* ---- Marketplace chart ----------------------------------- */
.bofu-card--mkt { padding: 32px 32px 24px; }

.mkt-headline {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 1px solid var(--ink-edge);
  border-bottom: 1px solid var(--ink-edge);
  padding: 18px 0;
  gap: 16px;
  flex-wrap: wrap;
}

.mkt-chart-wrap {
  position: relative;
  width: 100%; height: 220px;
  margin-top: 18px;
}
.mkt-chart { width: 100%; height: 100%; display: block; }
.mkt-chart .grid line { stroke: var(--ink-edge); stroke-width: 1; }
.mkt-chart .grid text {
  fill: var(--bone-faint);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}
.mkt-chart .axis-x text {
  fill: var(--bone-faint);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}
.mkt-chart .area {
  fill: url(#mktGrad);
  opacity: 0;
  transition: opacity 0.9s ease 0.3s;
}
.mkt-chart.drawn .area { opacity: 1; }
.mkt-chart .line {
  stroke: var(--accent);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.mkt-chart.drawn .line { stroke-dashoffset: 0; }

.mkt-chart .bar {
  fill: var(--accent);
  opacity: 0;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.9s cubic-bezier(0.2,0.6,0.2,1), opacity 0.4s ease;
}
.mkt-chart.drawn .bar { transform: scaleY(1); opacity: 0.85; }

.mkt-chart .day-marker {
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}
.mkt-chart .day-marker-label {
  fill: var(--gold);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mkt-chart .baseline-line, .ron-spark .baseline-line {
  stroke: var(--bone-soft);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.5;
}
.mkt-chart .baseline-label {
  fill: var(--bone-dim);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.mkt-chart .hover-bar {
  fill: transparent;
  cursor: crosshair;
}
.mkt-chart .hover-bar.active rect { fill: rgba(255,255,255,0.04); }
.mkt-chart .hover-dot {
  fill: var(--accent);
  stroke: var(--bone);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mkt-chart .hover-line {
  stroke: var(--bone-soft);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mkt-tooltip {
  position: absolute;
  background: var(--ink-3);
  border: 1px solid var(--ink-edge-2);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone);
  pointer-events: none;
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 4;
  transform: translate(-50%, -120%);
  white-space: nowrap;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
}
.mkt-tooltip.show { opacity: 1; }
.mkt-tooltip .mt-date { color: var(--bone-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
.mkt-tooltip .mt-value { color: var(--bone); font-weight: 500; font-size: 14px; font-family: var(--display); }

.mkt-foot {
  display: flex; gap: 28px; flex-wrap: wrap;
  border-top: 1px solid var(--ink-edge);
  padding-top: 14px;
  margin-top: 4px;
}

/* ---- Sentiment "coming soon" ----------------------------- */
.sentiment-coming {
  display: flex; flex-direction: column; gap: 14px;
  padding: 12px 0;
}
.coming-glyph {
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
  animation: glyph-pulse 3s ease-in-out infinite;
}
@keyframes glyph-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.coming-title {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 28px;
  color: var(--bone);
  margin: 0;
  letter-spacing: -0.015em;
}
.coming-body {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--bone-soft);
  margin: 0;
}
.coming-eta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px dashed var(--bone-faint);
  color: var(--bone-dim);
}

/* ---- Footer ---------------------------------------------- */
.footer {
  position: relative; z-index: 2;
  border-top: 1px solid var(--ink-edge);
  padding: 32px var(--gut);
  max-width: 1480px;
  margin: 0 auto;
}
.footer-grid {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone-dim);
  letter-spacing: 0.06em;
}
.footer-mark {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  margin-right: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* ============================================================
   ANIMATIONS — Reveal on scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.95s cubic-bezier(0.16, 0.84, 0.32, 1),
    transform 0.95s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal stagger within a band — applied by JS */
.reveal[data-stagger="0"] { transition-delay: 0s; }
.reveal[data-stagger="1"] { transition-delay: 0.08s; }
.reveal[data-stagger="2"] { transition-delay: 0.16s; }
.reveal[data-stagger="3"] { transition-delay: 0.24s; }
.reveal[data-stagger="4"] { transition-delay: 0.32s; }
.reveal[data-stagger="5"] { transition-delay: 0.40s; }
.reveal[data-stagger="6"] { transition-delay: 0.48s; }
.reveal[data-stagger="7"] { transition-delay: 0.56s; }

/* Hero title — line wrap helpers (no display:inline-block, that kills spaces) */
.hero-title-line, .hero-em { display: inline; }

/* Platform card stagger */
.platform-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease, background 0.18s ease;
}
.platform-card.in {
  opacity: 1;
  transform: translateY(0);
}
.platform-card[data-stagger="0"] { transition-delay: 0s; }
.platform-card[data-stagger="1"] { transition-delay: 0.06s; }
.platform-card[data-stagger="2"] { transition-delay: 0.12s; }
.platform-card[data-stagger="3"] { transition-delay: 0.18s; }
.platform-card[data-stagger="4"] { transition-delay: 0.24s; }
.platform-card[data-stagger="5"] { transition-delay: 0.30s; }

/* Funnel step stagger */
.funnel-step {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.funnel.in .funnel-step { opacity: 1; transform: none; }
.funnel.in .funnel-step:nth-child(1) { transition-delay: 0.05s; }
.funnel.in .funnel-step:nth-child(2) { transition-delay: 0.20s; }
.funnel.in .funnel-step:nth-child(3) { transition-delay: 0.35s; }
.funnel.in .funnel-step:nth-child(4) { transition-delay: 0.50s; }

/* PoD tier stagger */
.pod-tier {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pod-tiers.in .pod-tier:nth-child(1) { transition-delay: 0.05s; }
.pod-tiers.in .pod-tier:nth-child(2) { transition-delay: 0.15s; }
.pod-tiers.in .pod-tier:nth-child(3) { transition-delay: 0.25s; }
.pod-tiers.in .pod-tier { opacity: 1; transform: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .bofu-card--headline { grid-column: span 6; }
  .bofu-card--ron       { grid-column: span 6; }
  .bofu-card--mkt       { grid-column: span 4; }
  .bofu-card--sentiment { grid-column: span 2; }
}
@media (max-width: 1180px) {
  .platform-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  :root { --rail-w: 60px; }
  .hero-summary { grid-template-columns: repeat(2, 1fr); }
  .hero-summary-cell:nth-child(2) { border-right: 0; }
  .hero-summary-cell:nth-child(1), .hero-summary-cell:nth-child(2) { border-bottom: 1px solid var(--ink-edge); }
  .mofu-grid { grid-template-columns: 1fr; }
  .bofu-grid { grid-template-columns: 1fr; }
  .bofu-card--headline, .bofu-card--ron, .bofu-card--mkt, .bofu-card--sentiment { grid-column: span 1; }
  .ron-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .topbar { flex-direction: column; gap: 10px; align-items: flex-start; }
  .topbar-right { gap: 14px; flex-wrap: wrap; }
  .hero-title { font-size: clamp(40px, 14vw, 64px); }
  .hero-summary { grid-template-columns: 1fr; }
  .hero-summary-cell { border-right: 0; border-bottom: 1px solid var(--ink-edge); }
  .hero-summary-cell:last-child { border-bottom: 0; }
  .band { grid-template-columns: 1fr; }
  .band-rail { position: static; }
  .rail-stack { border-left: 0; border-bottom: 1px solid var(--accent); padding: 0 0 10px 0; flex-direction: row; align-items: baseline; gap: 14px; }
  .source-row { grid-template-columns: 90px 1fr 50px; gap: 8px; }
  .source-name { font-size: 12px; }
  .card-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   ADMIN PAGE
   ============================================================ */
.admin-shell {
  position: relative; z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gut);
}
.admin-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--ink-edge);
  padding-bottom: 24px;
  margin-bottom: 36px;
}
.admin-title {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(36px, 5vw, 56px);
  color: var(--bone);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
[data-theme="homecoming"] .admin-title { font-style: italic; }
.admin-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0;
}
.admin-back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  padding: 8px 14px;
  border: 1px solid var(--ink-edge);
  transition: all 0.18s ease;
}
.admin-back:hover { border-color: var(--accent); color: var(--accent); }

.admin-section { margin-bottom: 56px; }
.admin-section-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-edge);
  flex-wrap: wrap;
}
.admin-section-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.admin-section-title {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: 26px;
  color: var(--bone);
  margin: 0;
  letter-spacing: -0.015em;
}
[data-theme="homecoming"] .admin-section-title { font-style: italic; }
.admin-section-note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone-dim);
  letter-spacing: 0.06em;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

/* Per-platform admin row */
.platform-row {
  background: var(--ink-2);
  border: 1px solid var(--ink-edge);
  padding: 18px;
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.platform-row.platform-row--single {
  grid-template-columns: 180px 1fr;
}
.platform-row .platform-row-name {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 500;
}
.platform-row svg { width: 18px; height: 18px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: flex; justify-content: space-between; align-items: center;
}
.field-hint { color: var(--bone-faint); font-size: 9px; letter-spacing: 0.1em; }
.field input, .field textarea, .field select {
  background: var(--ink-2);
  border: 1px solid var(--ink-edge);
  color: var(--bone);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  outline: none;
  transition: border 0.15s ease;
  appearance: none;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--sans);
  line-height: 1.5;
}

.admin-actions {
  display: flex; gap: 14px; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--ink-edge);
  flex-wrap: wrap;
}
/* Auto-stamped "Last reconciled" pill (read-only) */
.reconciled-stamp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--ink-edge);
  background: var(--ink-2);
  margin-right: 4px;
}
.reconciled-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.reconciled-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bone);
  letter-spacing: 0.04em;
}

/* Lock button in the admin header */
.admin-lock {
  background: transparent;
  border: 1px solid var(--ink-edge);
  color: var(--bone-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.16s ease;
}
.admin-lock:hover { color: var(--accent); border-color: var(--accent); }
.admin-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }

/* ---- Admin password gate --------------------------------- */
/* Full-screen overlay shown until the user authenticates.
   Hides admin.shell beneath. Casual deterrent only — see admin.html note. */
.admin-gate {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 11, 18, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  animation: gate-in 0.5s ease-out both;
}
[data-theme="homecoming"] .admin-gate { background: rgba(14, 13, 11, 0.82); }
@keyframes gate-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.admin-gate-card {
  width: min(420px, calc(100% - 48px));
  padding: 36px 32px 28px;
  background: var(--ink);
  border: 1px solid var(--ink-edge);
  text-align: center;
  position: relative;
}
.admin-gate-mark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 22px;
}
.admin-gate-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  color: var(--bone);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
[data-theme="homecoming"] .admin-gate-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.admin-gate-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 22px;
}
.admin-gate-input {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--ink-edge);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.16s ease;
  margin-bottom: 12px;
  letter-spacing: 0.18em;
}
.admin-gate-input:focus { border-color: var(--accent); }
.admin-gate-submit { width: 100%; }
.admin-gate-error {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E25555;
}
.admin-gate-back {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-decoration: none;
  transition: color 0.16s ease;
}
.admin-gate-back:hover { color: var(--bone-dim); }

/* Default on admin page = locked (gate shown, content blurred). JS removes class on auth.
   Scoped to body.admin-page so the public dashboard never inherits the blur. */
body.admin-page:not(.admin-authed) .admin-shell,
body.admin-page:not(.admin-authed) .topbar { filter: blur(8px); pointer-events: none; user-select: none; }
body.admin-page.admin-authed .admin-gate,
body:not(.admin-page) .admin-gate { display: none; }
.admin-gate-card.shake { animation: gate-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes gate-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.btn {
  padding: 12px 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
  transition: all 0.16s ease;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--ink-edge);
}
.btn-ghost:hover { border-color: var(--bone); color: var(--bone); }
.save-toast {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--moss);
  letter-spacing: 0.1em;
}
.save-toast.show { display: inline-flex; align-items: center; gap: 8px; }
.save-toast::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--moss);
}

@media (max-width: 640px) {
  .platform-row { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================
   KPI CELEBRATION FX
   Theme-aware — confetti on Ronin, embers + shockwave on Homecoming.
   Container is positioned over the .target-bar and self-removes.
   ========================================================= */
.fx-stage {
  position: absolute;
  inset: -120px -40px -180px -40px;
  pointer-events: none;
  overflow: visible;
  z-index: 50;
}
.fx-flash {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  margin-left: -6px; margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  opacity: 0.85;
  animation: fx-flash 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
[data-theme="homecoming"] .fx-flash { background: var(--accent); }
@keyframes fx-flash {
  0%   { transform: scale(0.4); opacity: 0.85; box-shadow: 0 0 0 0 currentColor; }
  60%  { opacity: 0.18; box-shadow: 0 0 0 220px rgba(255,255,255,0); }
  100% { transform: scale(1.4); opacity: 0; box-shadow: 0 0 0 320px rgba(255,255,255,0); }
}
.fx-shockwave {
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 24px;
  margin-left: -12px; margin-top: -12px;
  border-radius: 50%;
  border: 2px solid var(--gold, #E0B85C);
  opacity: 0.8;
  animation: fx-shock 1.1s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
@keyframes fx-shock {
  0%   { transform: scale(0.2); opacity: 0.9; border-width: 3px; }
  100% { transform: scale(18);  opacity: 0;   border-width: 0.5px; }
}
.fx-particle {
  position: absolute;
  left: 50%; top: 50%;
  --tx: 0px; --ty: -120px; --rot: 0deg; --dur: 1.2s; --delay: 0s;
  width: 8px; height: 14px;
  background: var(--accent);
  opacity: 0;
  transform-origin: center;
  animation: fx-confetti var(--dur) cubic-bezier(0.18, 0.7, 0.3, 1) var(--delay) forwards;
}
.fx-particle.ember {
  width: 5px; height: 5px;
  border-radius: 50%;
  filter: blur(0.3px);
  box-shadow: 0 0 6px currentColor, 0 0 14px currentColor;
  animation: fx-ember var(--dur) cubic-bezier(0.22, 0.7, 0.3, 1) var(--delay) forwards;
}
@keyframes fx-confetti {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.4); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); }
}
@keyframes fx-ember {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20%  { opacity: 1; }
  80%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); }
}

/* Bar pulse + glow on win */
.target-bar.celebrating::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 0 var(--accent);
  animation: fx-bar-glow 1.4s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
[data-theme="homecoming"] .target-bar.celebrating::after {
  box-shadow: 0 0 0 0 var(--accent);
}
@keyframes fx-bar-glow {
  0%   { box-shadow: 0 0 0 0   currentColor, 0 0 0  0px var(--accent); opacity: 1; }
  40%  { box-shadow: 0 0 22px 6px var(--accent); opacity: 0.6; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}

/* ✓ check stamp */
.fx-check {
  position: absolute;
  left: 50%; top: 50%;
  margin-left: -22px; margin-top: -22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--moss);
  display: flex; align-items: center; justify-content: center;
  color: #051A11;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 22px;
  opacity: 0;
  transform: scale(0.2);
  animation: fx-check 1.4s cubic-bezier(0.18, 1.4, 0.4, 1) forwards;
  box-shadow: 0 0 0 0 var(--moss), 0 0 24px 4px rgba(34, 197, 139, 0.5);
}
@keyframes fx-check {
  0%   { opacity: 0; transform: scale(0.2) rotate(-12deg); }
  35%  { opacity: 1; transform: scale(1.15) rotate(0deg); }
  55%  { transform: scale(0.95); }
  75%  { transform: scale(1.04); }
  100% { opacity: 0.95; transform: scale(1); }
}
.fx-check.fade-out { animation: fx-check-out 0.5s ease forwards; }
@keyframes fx-check-out {
  to { opacity: 0; transform: scale(1.4); }
}

/* Make the .target-bar a positioning context so .fx-stage anchors to it */
.target-bar { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .fx-stage { display: none; }
  .target-bar.celebrating::after { animation: none; box-shadow: none; }
}