/* ═══════════════════════════════════════════════════════════════
   VPAY GENESIS · PRODUCTION CSS BUNDLE · REBUILT 2026-05-28 13:58:17 UTC
   Concatenates 26 stylesheets in canonical cascade order matching
   index.html lines 292-317. Source files remain on disk for debug.
   Replaces stale 2026-05-26 bundle that missed the V5 + audit fix
   work shipped since (contrast bump, save-section centering, etc).
   ═══════════════════════════════════════════════════════════════ */

/* ─── assets/style.css ─────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
 * EcoVent Africa · VPAY Genesis · Site stylesheet
 * Brookfield register · navy + gold · hairlines, not glows
 * Last touched: 2026-05-07 (Option C IA rebuild)
 * ──────────────────────────────────────────────────────── */

:root {
  --bg-deep:    #050B14;
  --bg-base:    #0A1626;
  --bg-1:       #0F1E33;
  --bg-2:       #142840;
  --bg-card:    #0D1827;

  --line:       rgba(244,196,48,0.10);
  --line-strong:rgba(244,196,48,0.28);
  --line-mute:  rgba(148,163,184,0.10);
  --rule:       rgba(255,255,255,0.06);

  --gold:       #F4C430;
  --gold-soft:  #F5D547;
  --gold-deep:  #B8902C;
  --gold-glow:  rgba(244,196,48,0.20);

  --green:      #1FE07F;
  --green-soft: #4DECAA;
  --crimson:    #EF4444;
  --amber:      #F59E0B;

  --text:       #F1F5F9;
  --text-soft:  #CBD5E1;
  --text-mute:  #94A3B8;
  --text-dim:   #64748B;
  --text-faint: #475569;

  --stool-gold:    #F4C84A;
  --kente-teal:    #0D9488;

  /* ─── AAA+ ceremonial layer (additive) ─────────────────────
   * The Brookfield base above stays untouched — institutional gold,
   * cool palette, hairlines. These tokens activate ONLY on hero
   * medallions, the SOV node, the Sika Dwa Kofi throne, and any
   * surface explicitly marked ceremonial. Do not use for body
   * accents or rules; that's what --gold above is for.
   * Source-of-truth · whatsapp-hero.svg
   * ──────────────────────────────────────────────────────── */

  /* Royal struck-bronze gold (5-stop chromatic stack) */
  --gold-bright:    #FFEFA8;   /* highlight crescent, sliver edges */
  --gold-royal:     #F4DD8D;   /* hero italic typography, top face */
  --gold-mid:       #D6B355;   /* aperture rings, ceremonial filaments */
  --gold-rich:      #9C7A2E;   /* mid-shadow on struck metal */
  --gold-shadow:    #3F2E10;   /* deep-bronze edges, engraving recess */

  /* Atmospheric void (deeper top, blacker bottom for cinematic depth) */
  --void-top:       #162640;   /* top atmosphere */
  --void-mid:       #0B1422;   /* page mid */
  --void-deep:      #03070D;   /* deep bottom + corners */

  /* Centre-glow & vignette atmospherics */
  --centre-glow:    rgba(200, 168, 78, 0.10);   /* faint gold halo behind heroes */
  --centre-glow-2:  rgba(200, 168, 78, 0.02);
  --vignette:       rgba(0, 0, 0, 0.65);

  /* Ceremonial typography */
  --ff-ceremonial: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --tracking-royal: 8px;        /* letter-spacing for ceremonial wordmarks */
  --tracking-eyebrow: 4px;
  --tracking-prose: 0.5px;

  /* Ceremonial gradients (referenceable in inline SVG via var()) */
  --grad-gold-face:    radial-gradient(circle at 32% 28%,
                          #FFEFA8 0%, #F4DD8D 18%, #D6B355 42%, #9C7A2E 72%, #3F2E10 100%);
  --grad-gold-bar:     linear-gradient(180deg,
                          #FFEFA8 0%, #F4DD8D 14%, #D6B355 42%, #8C6E2C 78%, #3F2E10 100%);
  --grad-void:         radial-gradient(circle at 50% 48%,
                          var(--void-top) 0%, var(--void-mid) 50%, var(--void-deep) 100%);

  --ff-serif:    'Source Serif Pro', 'Source Serif 4', Georgia, 'Iowan Old Style', serif;
  --ff-sans:     'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap-max:    1240px;
  --wrap-pad:    32px;
  --section-y:   120px;
  --section-y-sm:64px;

  --radius:      4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* ─── Horizontal-lock additions rolled back 2026-05-23 ───
   The previous additions (max-width: 100vw, position: relative,
   touch-action: pan-y, overscroll-behavior-y: contain) were causing
   desktop scroll-block on trackpad/touchscreen-equipped devices.
   The Denmark drawer-as-flow-content issue is now handled by the
   inline failsafe <style> block on each page (drawer is fixed +
   transform off-screen + visibility:hidden by default), which
   prevents the failure mode without touching body scroll behavior. */
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--gold); color: var(--bg-deep); }

/* ─── Layout primitives ─── */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.section { padding: var(--section-y) 0; position: relative; }
.section-sm { padding: var(--section-y-sm) 0; }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ─── Typography scale ─── */
h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--text);
}
h1 { font-size: clamp(48px, 6vw, 84px); font-weight: 700; }
h2 { font-size: clamp(32px, 3.6vw, 48px); }
h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }
p  { margin: 0 0 16px; color: var(--text-soft); font-size: 17px; line-height: 1.65; }
p.lede { font-size: 21px; line-height: 1.5; color: var(--text-soft); max-width: 720px; }
strong, b { color: var(--text); font-weight: 600; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 7px 14px;
  background: rgba(244,196,48,0.06);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  margin-bottom: 28px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(31,224,127,0.15);
}
.section-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 20px;
}
.section-head { margin-bottom: 56px; max-width: 820px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p  { color: var(--text-mute); font-size: 18px; max-width: 680px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn-primary {
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold);
}
.btn-primary:hover { background: var(--gold-soft); text-decoration: none; transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: rgba(244,196,48,0.06); border-color: var(--gold); color: var(--gold); text-decoration: none; }
.btn-sm { padding: 10px 16px; font-size: 12px; }

/* ─── Nav-header CTA pill · compact gold button ─── */
.sn-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg-deep);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  white-space: nowrap;
}
.sn-nav-cta:hover {
  background: var(--gold-soft);
  box-shadow: 0 0 14px rgba(244,196,48,0.35);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--bg-deep);
}
@media (max-width: 640px) { .sn-nav-cta { display: none; } }

/* ─── Mid-page CTA band ─── */
.mid-cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 64px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(244,196,48,0.04) 50%, transparent 100%);
  border-top: 1px solid rgba(244,196,48,0.12);
  border-bottom: 1px solid rgba(244,196,48,0.12);
  text-align: center;
}
.mid-cta-band .mid-cta-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
}
.mid-cta-band h3 {
  font-family: var(--ff-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
}
.mid-cta-band .mid-cta-sub {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 460px;
  line-height: 1.6;
}
.mid-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── FAQ accordion ─── */
.faq-list { display: flex; flex-direction: column; gap: 0; }

.faq-item {
  border-bottom: 1px solid var(--bl-rule, rgba(200,168,78,0.15));
}
.faq-item:first-child { border-top: 1px solid var(--bl-rule, rgba(200,168,78,0.15)); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0;
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--bl-ink, #0F1B2D);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { display: none; }
summary.faq-q { list-style: none; }
.faq-q::after {
  content: '+';
  font-family: var(--ff-mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--bl-gold, #A07820);
  flex-shrink: 0;
  transition: transform 0.22s;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-item[open] .faq-q { color: var(--bl-gold, #A07820); }

.faq-a {
  padding: 0 0 20px;
}
.faq-a p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bl-ink-soft, #1F2A3F);
  margin: 0;
}
.faq-a a { color: var(--bl-gold, #A07820); }
.faq-q:focus-visible {
  outline: 2px solid var(--bl-gold, #A07820);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Top tape (very thin, factual) ─── */
.tape {
  background: var(--bg-base);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  overflow: hidden;
}
.tape-row {
  display: flex;
  gap: 32px;
  padding: 9px var(--wrap-pad);
  white-space: nowrap;
  max-width: var(--wrap-max);
  margin: 0 auto;
}
.tape-row .item .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 8px;
  vertical-align: middle;
}

/* ─── Navigation ─── */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(5,11,20,0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 36px; height: 36px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(244,196,48,0.4), rgba(244,196,48,0) 65%), rgba(244,196,48,0.06);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand-mark::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.brand-text { line-height: 1.1; }
.brand-text .b1 { font-family: var(--ff-serif); font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.brand-text .b1 .gold { color: var(--gold); }
.brand-text .b1 .div { color: var(--text-faint); margin: 0 6px; }
.brand-text .b2 { font-family: var(--ff-mono); font-size: 9.5px; color: var(--text-mute); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; }
.nav-mid {
  display: flex; gap: 4px;
}
.nav-mid a {
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text-soft);
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  transition: color 0.12s, background 0.12s;
}
.nav-mid a:hover { color: var(--gold); background: rgba(244,196,48,0.06); text-decoration: none; }
.nav-mid a.active { color: var(--gold); }

/* ─── Intent-based dropdown groups (desktop) ─── */
.nav-group { position: relative; }

.nav-group-label {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  color: var(--text-soft);
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}
.nav-group:hover .nav-group-label,
.nav-group:focus-within .nav-group-label,
.nav-group--open .nav-group-label {
  color: var(--gold); background: rgba(244,196,48,0.06);
}
.nav-group-label:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.nav-group-label.active { color: var(--gold); }

.nav-chevron {
  font-size: 9px; line-height: 1; opacity: 0.55;
  transition: transform 0.18s;
  display: inline-block;
}
.nav-group:hover .nav-chevron,
.nav-group:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 168px;
  background: #0c1624;
  border: 1px solid rgba(200,168,78,0.22);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,168,78,0.06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 300;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group--open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 8px 13px;
  font-size: 13px; font-weight: 500;
  color: rgba(245,240,232,0.65);
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: color 0.12s, background 0.12s;
  text-decoration: none;
}
.nav-dropdown a:hover { color: var(--gold); background: rgba(244,196,48,0.08); }
.nav-dropdown a.active { color: var(--gold); }

/* Separator line inside dropdown */
.nav-dropdown-sep {
  height: 1px; background: rgba(200,168,78,0.12);
  margin: 4px 6px;
}

/* ─── Mobile hamburger button (hidden on desktop) ─── */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(244,196,48,0.28);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 90;
  transition: border-color 0.18s, background 0.18s;
}
.nav-burger:hover { border-color: rgba(244,196,48,0.55); background: rgba(244,196,48,0.06); }
.nav-burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  position: absolute;
  left: 13px;
  transition: transform 0.28s cubic-bezier(.22,1,.36,1), opacity 0.18s;
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 28px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Mobile slide-in drawer · Sovereign-coin-energy redesign ───
   Hardened 2026-05-10 against horizontal-overflow bug where flex children
   without min-width:0 caused content to bleed left of the drawer's left
   edge, making labels appear clipped. Also hardened against scroll-jump
   on iOS Safari when body overflow toggles. */
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: auto;
  width: min(88vw, 380px);
  max-width: 100vw;            /* never exceed viewport */
  box-sizing: border-box;       /* padding lives INSIDE width */
  background:
    radial-gradient(ellipse 480px 380px at 30% 12%, rgba(244,196,48,0.10), transparent 65%),
    linear-gradient(180deg, #0A1422 0%, #060D18 100%);
  border-left: 1px solid rgba(244,196,48,0.32);
  box-shadow: -24px 0 64px rgba(0,0,0,0.70), inset 0 0 80px rgba(244,196,48,0.03);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(.22,1,.36,1);
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: 96px 24px 28px;
  overflow-x: hidden;          /* defensively clip any inner overflow */
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  contain: layout style;        /* isolate layout from outer page */
}
/* CRITICAL: every flex child of the drawer must allow shrinking, otherwise
   long labels (e.g. "Matter · The Physics Gate · IP #1") force the row
   wider than the drawer and overflow leftward — clipping the start of words. */
.nav-drawer > *,
.nav-drawer a,
.nav-drawer .nav-drawer-toc {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.nav-drawer a {
  word-break: break-word;       /* let long labels wrap rather than overflow */
  overflow-wrap: anywhere;
}
/* Faint Adinkrahene watermark in the drawer background · institutional touch */
.nav-drawer::before {
  content: '';
  position: absolute;
  top: 110px; right: -100px;
  width: 360px; height: 360px;
  background:
    radial-gradient(circle, rgba(244,196,64,0.06) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 50% 50%, rgba(244,196,64,0.04) 0 1px, transparent 1px 56px);
  pointer-events: none;
  opacity: 0.55;
}
.nav-drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
}

/* Brand strip at the top of the drawer · echo of the SOV mark */
.nav-drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 18px;
  margin: -76px 0 14px;
  position: relative;
  z-index: 1;
}
.nav-drawer-brand-mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(244,196,48,0.55), rgba(244,196,48,0) 70%),
    rgba(244,196,48,0.10);
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(244,196,48,0.40);
}
.nav-drawer-brand-mark::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(244,196,48,0.7);
}
.nav-drawer-brand-text {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  color: rgba(232,224,204,0.65);
  text-transform: uppercase;
  line-height: 1.3;
}
.nav-drawer-brand-text b { color: var(--gold); font-weight: 600; letter-spacing: 0.18em; }

/* Live status pill, prominent at top */
.nav-drawer-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(31,224,127,0.06);
  border: 1px solid rgba(31,224,127,0.30);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(31,224,127,0.95);
  text-transform: uppercase;
  margin: 0 0 22px;
  align-self: flex-start;
  position: relative;
  z-index: 1;
}
.nav-drawer-live .pulse {
  width: 7px; height: 7px;
  background: #1FE07F;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(31,224,127,0.8);
  animation: drawerPulse 1.6s ease-in-out infinite;
}
@keyframes drawerPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}

/* Section labels · gold caps, gold underline */
.nav-drawer-section {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244,196,48,0.65);
  margin: 22px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(244,196,48,0.18);
  position: relative;
  z-index: 1;
}
.nav-drawer-section:first-of-type { margin-top: 0; }

/* Top-level nav links · serif, big tap targets, glowing active dot */
.nav-drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 4px;
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 500;
  color: rgba(232,224,204,0.94);
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(244,196,48,0.08);
  transition: color 0.22s, padding 0.22s, background 0.22s;
  position: relative;
  z-index: 1;
}
.nav-drawer a:hover,
.nav-drawer a:focus-visible {
  color: var(--gold);
  text-decoration: none;
  padding-left: 14px;
  background: linear-gradient(90deg, rgba(244,196,48,0.06), transparent);
}
.nav-drawer a:focus-visible {
  outline: 1px solid rgba(244,196,48,0.55);
  outline-offset: -1px;
  border-radius: 4px;
}
.nav-drawer a.active {
  color: var(--gold);
  padding-left: 14px;
}
.nav-drawer a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(244,196,48,0.85);
}
.nav-drawer a .arrow {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: rgba(244,196,48,0.4);
  transition: transform 0.22s, color 0.22s;
  flex-shrink: 0;
}
.nav-drawer a:hover .arrow { color: var(--gold); transform: translateX(4px); }

/* The Two Covenants · IP cards with bold gold borders */
.nav-drawer-toc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.nav-drawer-toc a {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 12px 14px !important;
  color: rgba(244,196,48,0.92) !important;
  border: 1px solid rgba(244,196,48,0.32);
  border-radius: 6px;
  background: rgba(244,196,48,0.04);
  margin: 0 !important;
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.nav-drawer-toc a::before { display: none; } /* no active dot for TOC items */
.nav-drawer-toc a:hover,
.nav-drawer-toc a:focus-visible {
  background: rgba(244,196,48,0.12);
  border-color: rgba(244,196,48,0.65);
  padding-left: 14px !important;
  transform: translateX(2px);
}

/* Foot · live status + signoff */
.nav-drawer .nav-drawer-foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  z-index: 1;
}
.nav-drawer .nav-drawer-foot .nav-status {
  align-self: flex-start;
}
.nav-drawer .nav-drawer-foot .nav-foot-line {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(232,224,204,0.55); /* bumped from 0.32 — WCAG AA contrast fix */
  text-transform: uppercase;
  margin-top: 6px;
}

/* Stagger-fade-in for drawer content when it opens */
.nav-drawer[data-open="true"] > * {
  animation: drawerItemIn 0.42s ease-out both;
}
.nav-drawer[data-open="true"] > *:nth-child(1)  { animation-delay: 0.10s; }
.nav-drawer[data-open="true"] > *:nth-child(2)  { animation-delay: 0.14s; }
.nav-drawer[data-open="true"] > *:nth-child(3)  { animation-delay: 0.18s; }
.nav-drawer[data-open="true"] > *:nth-child(4)  { animation-delay: 0.22s; }
.nav-drawer[data-open="true"] > *:nth-child(5)  { animation-delay: 0.26s; }
.nav-drawer[data-open="true"] > *:nth-child(6)  { animation-delay: 0.30s; }
.nav-drawer[data-open="true"] > *:nth-child(7)  { animation-delay: 0.34s; }
.nav-drawer[data-open="true"] > *:nth-child(8)  { animation-delay: 0.38s; }
.nav-drawer[data-open="true"] > *:nth-child(9)  { animation-delay: 0.42s; }
.nav-drawer[data-open="true"] > *:nth-child(10) { animation-delay: 0.46s; }
.nav-drawer[data-open="true"] > *:nth-child(11) { animation-delay: 0.50s; }
.nav-drawer[data-open="true"] > *:nth-child(12) { animation-delay: 0.54s; }
@keyframes drawerItemIn {
  0%   { opacity: 0; transform: translateX(12px); }
  100% { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-drawer[data-open="true"] > * { animation: none !important; }
  .nav-drawer-live .pulse { animation: none !important; }
}

/* ─── Drawer backdrop ─── */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 14, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s, visibility 0.28s;
  z-index: 70;
}
.nav-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

/* Lock body scroll when drawer open · iOS-safe.
   Plain `overflow: hidden` on body causes a sudden scroll-to-top on iOS
   when the drawer opens, which feels "loose." The JS now uses position:fixed
   + top:-scrollY to freeze the page at its current position. The class still
   exists for the CSS-only fallback when JS is disabled. */
body.nav-drawer-open {
  overflow: hidden;
  /* iOS-only · prevent the drawer's own scroll from bleeding to body */
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: none;
}

.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-status {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(31,224,127,0.25);
  border-radius: 999px;
}
.nav-status .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 0 3px rgba(31,224,127,0.15); }

/* ─── HERO (landing) ─── */
.hero {
  padding: 80px 0 100px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.hero h1 {
  font-size: clamp(54px, 6.4vw, 92px);
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin-bottom: 28px;
}
.hero h1 .em { color: var(--gold); }
.hero p.lede { margin-bottom: 36px; max-width: 560px; }
.hero p.lede strong { color: var(--text); }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 36px;
  max-width: 540px;
}
.hero-stat .num {
  font-family: var(--ff-serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-stat .lbl {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 10px;
  line-height: 1.4;
}
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Live attestation feed (terminal) ─── */
.terminal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--ff-mono);
}
.term-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.term-title { color: var(--text-soft); }
.term-title .ico { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 10px; vertical-align: middle; box-shadow: 0 0 0 4px rgba(31,224,127,0.18); }
.term-meta { display: flex; gap: 14px; color: var(--text-mute); font-size: 10px; }
.term-meta .live { color: var(--green); }
.term-body { padding: 8px 0; max-height: 480px; overflow-y: auto; }
.term-row {
  display: grid;
  grid-template-columns: 84px 1fr 80px;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-mute);
  font-size: 12px;
  align-items: center;
}
.term-row:last-child { border-bottom: 0; }
.term-row .t { color: var(--text-mute); }
.term-row .t .age { display: block; font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.term-row .body { color: var(--text-soft); line-height: 1.5; }
.term-row .body .id { color: var(--gold); }
.term-row .body .meta { color: var(--text-mute); display: block; margin-top: 4px; font-size: 11px; }
.term-row .badge { text-align: right; }
.term-row .badge .b {
  display: inline-block;
  padding: 4px 9px; border-radius: 3px;
  font-size: 10px; letter-spacing: 0.14em;
  background: rgba(31,224,127,0.10);
  color: var(--green);
  border: 1px solid rgba(31,224,127,0.25);
}
.term-row .badge.reject .b {
  background: rgba(245,158,11,0.10);
  color: var(--amber);
  border-color: rgba(245,158,11,0.30);
}
.term-row .badge .gates { display: block; font-size: 10px; color: var(--text-mute); margin-top: 6px; }
.term-foot {
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
}
.term-foot .l { color: var(--green); }

/* ─── 90-second tile row ─── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.tile {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  transition: border-color 0.18s, transform 0.18s;
}
.tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.tile-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  margin-bottom: 22px;
  color: var(--gold);
}
.tile h3 { font-size: 18px; margin-bottom: 10px; }
.tile p { font-size: 14px; color: var(--text-mute); margin-bottom: 18px; line-height: 1.55; }
.tile a {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.tile a:hover { text-decoration: none; }
.tile a::after { content: ' →'; }

/* ─── Flow diagram (landing: How it works) ─── */
.flow-wrap {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 56px 32px;
}
.flow-svg-host { max-width: 1100px; margin: 0 auto; }
.flow-svg-host svg { width: 100%; height: auto; }
.flow-caption {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 28px;
}

/* ─── Mobile-stacked flow (≤640px) ─── */
.flow-stack {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: flow;
}
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(13, 24, 39, 0.55);
  border: 1px solid rgba(244,196,48,0.18);
  border-radius: 10px;
  margin-bottom: 32px;
}
/* Vertical connector arrow between steps */
.flow-step::after {
  content: '';
  position: absolute;
  left: 44px;
  bottom: -28px;
  width: 1px; height: 24px;
  background: linear-gradient(180deg, rgba(244,196,48,0.6), rgba(244,196,48,0));
}
.flow-step:last-child { margin-bottom: 0; }
.flow-step:last-child::after { display: none; }
.flow-step-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(13, 24, 39, 0.85);
  border: 1px solid rgba(244,196,48,0.32);
  border-radius: 10px;
}
.flow-step-icon svg { width: 40px; height: 40px; display: block; }
.flow-step-stage {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,196,48,0.72);
  margin-bottom: 4px;
}
.flow-step-title {
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.flow-step-sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  margin-top: 4px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .flow-wrap { padding: 24px 16px; }
  .flow-svg-host { display: none; }
  .flow-stack { display: block; }
  .flow-caption { display: none; }
}

/* ─── Ledger table ─── */
.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-mono);
  font-size: 13px;
}
.ledger-table th, .ledger-table td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-mute);
}
.ledger-table th {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
  background: rgba(0,0,0,0.2);
}
.ledger-table tr:hover td { background: rgba(244,196,48,0.03); }
.ledger-table .name { color: var(--text); font-weight: 500; }
.ledger-table .addr { color: var(--text-soft); }
.ledger-table .addr a { color: var(--gold); }
.ledger-table .verified {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--green);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.ledger-table .verified::before { content: '✓'; font-size: 12px; }
.ledger-table-shell {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ledger-foot {
  padding: 16px 20px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ledger-foot a { color: var(--gold); }

/* ─── Three-paths (landing audience CTAs) ─── */
.paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.path {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  min-height: 280px;
}
.path .label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.path h3 { font-size: 22px; margin-bottom: 14px; }
.path p { font-size: 14.5px; color: var(--text-mute); flex: 1; line-height: 1.6; }
.path a.go {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 20px;
}
.path a.go::after { content: ' →'; }

/* ─── Footer ─── */
.footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  background: var(--bg-base);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
.footer h4 {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
  margin-bottom: 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul li a { color: var(--text-soft); font-size: 14px; }
.footer ul li a:hover { color: var(--gold); text-decoration: none; }
.footer-meta { font-size: 14px; color: var(--text-mute); line-height: 1.65; }
.footer-meta strong { color: var(--text); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.12em;
}

/* ─── Inner-page header (technical, heritage, compliance) ─── */
.page-header {
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--line);
}
.page-header h1 { font-size: clamp(40px, 4.8vw, 64px); margin-bottom: 18px; }
.page-header p.lede { color: var(--text-soft); }
.page-toc {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 32px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.page-toc a {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-mute);
  text-transform: uppercase;
}
.page-toc a:hover { color: var(--gold); border-color: var(--gold); text-decoration: none; }

/* ─── God cards (technical) ─── */
.council-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.god-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
}
.god-card.anokye { grid-column: span 3; padding: 30px; background: linear-gradient(135deg, rgba(244,196,48,0.05), rgba(13,24,39,0.4)); border-color: var(--line-strong); }
.god-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 16px; }
.gname .g-name { font-family: var(--ff-serif); font-size: 18px; font-weight: 600; color: var(--text); display: block; }
.gname .g-role { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); margin-top: 4px; display: block; }
.god-card.anokye .gname .g-name { font-size: 26px; color: var(--gold); }
.god-status { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); white-space: nowrap; padding: 4px 10px; border: 1px solid rgba(31,224,127,0.25); border-radius: 999px; }
.god-status.warn { color: var(--amber); border-color: rgba(245,158,11,0.30); }
.god-status .d { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
.god-role { font-size: 13.5px; color: var(--text-mute); line-height: 1.6; }
.god-verdict { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--ff-mono); font-size: 11.5px; color: var(--text-soft); }
.god-verdict .label { color: var(--text-faint); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; }

/* ─── Heritage page ─── */
.throne-ribbon {
  background:
    radial-gradient(ellipse at center, rgba(244,200,74,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-base) 50%, var(--bg-deep));
  border-top: 1px solid rgba(244,200,74,0.18);
  border-bottom: 1px solid rgba(244,200,74,0.18);
  padding: 64px 0;
}
.throne-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.throne-side { font-family: var(--ff-mono); font-size: 12px; line-height: 1.7; color: var(--text-mute); letter-spacing: 0.04em; }
.throne-side b { color: var(--gold); display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 8px; }
.throne-side.right { text-align: right; }
.throne-stage { width: 260px; height: 184px; display: flex; align-items: center; justify-content: center; position: relative; }
.throne-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.throne-cap {
  text-align: center; margin-top: 28px;
  font-family: var(--ff-serif); font-style: italic;
  font-size: 18px; color: var(--text-soft);
  overflow-wrap: break-word;
  text-wrap: balance;
  padding: 0 16px;
}
.throne-cap b { color: var(--gold); font-style: normal; }
@media (max-width: 640px) {
  .throne-cap { font-size: 15px; line-height: 1.4; }
  .throne-cap b { display: block; margin-bottom: 6px; }
}
.throne-meta {
  text-align: center; margin-top: 14px;
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--text-mute); letter-spacing: 0.14em;
}
.throne-meta span { margin: 0 14px; }
.throne-meta b { color: var(--gold); }

.timeline-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  margin-top: 24px;
}
.timeline-row::before {
  content: ''; position: absolute; top: 26px; left: 8%; right: 8%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.timeline-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
}
.timeline-item.now { border-color: var(--gold); }
.year-mark {
  width: 12px; height: 12px;
  background: var(--bg-deep);
  border: 2px solid var(--gold);
  border-radius: 50%;
  margin-bottom: 12px;
}
.timeline-item.now .year-mark { background: var(--gold); }
.year { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.move-title { font-family: var(--ff-serif); font-size: 18px; color: var(--text); font-weight: 600; margin-bottom: 8px; }
.move-desc { font-size: 13.5px; color: var(--text-mute); line-height: 1.6; }
.move-desc strong { color: var(--text); }

/* ─── Compliance docs ─── */
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.doc-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: border-color 0.18s;
}
.doc-card:hover { border-color: var(--line-strong); text-decoration: none; }
.doc-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--gold);
  flex-shrink: 0;
}
.doc-body { flex: 1; }
.doc-body h4 { font-size: 16px; color: var(--text); margin-bottom: 6px; }
.doc-body p { font-size: 13.5px; color: var(--text-mute); margin: 0; }
.doc-body .meta { font-family: var(--ff-mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; }

/* ─── Standing (founders / leadership) ─── */
.standing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 920px; margin: 0 auto; }
.standing-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.standing-card .role { font-family: var(--ff-mono); font-size: 10.5px; color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; }
.standing-card h3 { font-size: 22px; margin-bottom: 6px; }
.standing-card .credit { font-family: var(--ff-mono); font-size: 11px; color: var(--text-mute); letter-spacing: 0.06em; margin-bottom: 16px; }
.standing-card p { font-size: 14.5px; color: var(--text-mute); line-height: 1.65; margin: 0; }

/* ─── Pull box ─── */
.pull {
  background: rgba(244,196,48,0.04);
  border-left: 3px solid var(--gold);
  padding: 26px 32px;
  margin: 32px 0;
  font-family: var(--ff-serif);
  font-size: 19px;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.55;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pull em { font-style: normal; color: var(--gold); }

/* ─── Hero scroll cue ─── */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.scroll-cue::after {
  content: '↓';
  display: inline-block;
  animation: scrollNudge 1.8s infinite;
}
@keyframes scrollNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .paths { grid-template-columns: 1fr; }
  .council-grid { grid-template-columns: repeat(2, 1fr); }
  .god-card.anokye { grid-column: span 2; }
  .timeline-row { grid-template-columns: repeat(2, 1fr); }
  .timeline-row::before { display: none; }
  .doc-grid, .standing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .nav-mid { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-right .nav-status { display: none; } /* moved into drawer foot */
}
@media (max-width: 640px) {
  :root { --section-y: 72px; --wrap-pad: 20px; }
  .hero { padding: 56px 0 72px; }
  .hero-stats { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .hero-stat .num { font-size: 32px; }
  .tile-grid { grid-template-columns: 1fr; }
  .council-grid, .timeline-row { grid-template-columns: 1fr; }
  .god-card.anokye { grid-column: span 1; }
  .throne-grid { grid-template-columns: 1fr; gap: 28px; }
  .throne-side.right, .throne-side { text-align: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .ledger-table { font-size: 11px; }
  .ledger-table th, .ledger-table td { padding: 12px 14px; }
  .term-row { grid-template-columns: 60px 1fr 60px; gap: 10px; padding: 10px 14px; font-size: 11px; }
  h1 { letter-spacing: -0.02em; }
}

/* ─── Built-on infrastructure-partners strip ─── */
.builton {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  margin-top: 56px;
  background: rgba(0,0,0,0.18);
}
.builton-inner {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  align-items: center;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.builton-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.5;
}
.builton-label b { color: var(--gold); display: block; font-weight: 500; margin-bottom: 4px; }
.builton-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.builton-cell {
  display: flex; flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-family: var(--ff-mono);
  transition: border-color 0.18s, transform 0.18s;
}
.builton-cell:hover { border-color: var(--line-strong); transform: translateY(-1px); text-decoration: none; }
.builton-cell .name {
  font-family: var(--ff-serif);
  font-size: 14.5px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.builton-cell .role {
  font-size: 9.5px;
  color: var(--text-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── Resources grid ─── */
.resources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.resource {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.18s, transform 0.18s;
  align-items: flex-start;
}
.resource:hover { border-color: var(--line-strong); transform: translateY(-2px); text-decoration: none; }
.resource-icon {
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}
.resource-body { flex: 1; min-width: 0; }
.resource-body .name {
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.25;
}
.resource-body .desc {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
  margin-bottom: 6px;
}
.resource-body .meta {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── Motion: count-up + fade-in-on-scroll ─── */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ─── Responsive overrides for new components ─── */
@media (max-width: 1024px) {
  .builton-inner { grid-template-columns: 1fr; gap: 18px; }
  .builton-row { grid-template-columns: repeat(3, 1fr); }
  .resources { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .builton-row { grid-template-columns: repeat(2, 1fr); }
  .resources { grid-template-columns: 1fr; }
}

/* ─── Print niceties (so the page can serve as a leave-behind PDF if needed) ─── */
@media print {
  body { background: white; color: #111; }
  .nav, .tape, .footer, .scroll-cue { display: none; }
  .terminal, .tile, .path, .god-card, .timeline-item, .doc-card, .standing-card, .ledger-table-shell { background: #f7f4eb; border-color: #C8A84E; color: #111; }
  h1, h2, h3, h4, p { color: #111 !important; }
  .gold, .em, .eyebrow, .nav-status, .tile a, .path a.go { color: #8a6d1c !important; }
}

/* ─── Universal :focus-visible baseline · WCAG 2.1 SC 2.4.7 (2026-05-22 · Z.ai audit Path X item 8)
       Closes the Level A failure where keyboard users couldn't see which element was focused.
       Existing per-component :focus-visible rules (.nav-burger, .nav-drawer a, .nav-drawer-toc a,
       .locator-btn, .builton-tile-link, etc.) override this baseline naturally via specificity.
       Uses gold accent + offset so it's visible on both dark and light surfaces. ─── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
details:focus-visible,
.tile:focus-visible,
.god-card:focus-visible,
.doc-card:focus-visible,
.path:focus-visible,
.standing-card:focus-visible {
  outline: 2px solid #C8A84E;
  outline-offset: 3px;
  border-radius: 2px;
  /* Subtle glow makes the outline visible even against busy gold/cream backgrounds */
  box-shadow: 0 0 0 4px rgba(200, 168, 78, 0.18);
}

/* On dark backgrounds (hero sections, mission-control panels), bump the glow brightness */
.hero a:focus-visible,
.body-dark a:focus-visible,
.terminal a:focus-visible,
.path a:focus-visible {
  outline-color: #E8D48B;
  box-shadow: 0 0 0 4px rgba(232, 212, 139, 0.28);
}

/* ─── Skip-to-content link · 2026-05-23 (audit #10 closure) ───
   Base state: visually hidden but accessible to keyboard + screen readers.
   On focus, slides into view at the top-left. The :focus-visible rule
   below applies the extra glow when a keyboard user lands on it. ─── */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 9999;
  background: #0F1B2D;
  color: #F4D470;
  padding: 10px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #C8A84E;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #C8A84E;
  outline-offset: 0;
  box-shadow: 0 4px 12px rgba(200, 168, 78, 0.5);
}

/* Respect motion preferences — focus outlines stay even with reduced motion */
@media (prefers-reduced-motion: reduce) {
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:focus-visible {
    transition: none;
  }
}

/* ─── assets/hero-globe.css ─────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
 * Hero · Cinematic gradient mesh + massive type
 * Strategy.com / Tesla / Ondo register · no abstract globe
 * ──────────────────────────────────────────────────────── */

.hero-cinematic {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  /* Tightened 2026-05-17 · was 96px/60px which combined with the giant
     headline clamp pushed CTAs below the fold. New padding fits the
     full content stack (badge → headline → sub → coin → CTAs) into
     one viewport on standard 1280-1920px desktops. */
  padding: 48px 0 40px;
  isolation: isolate;
  background: radial-gradient(ellipse at 30% 30%, #0F1E33 0%, #050B14 60%, #02060C 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── Layered orb mesh · KKR-grade liveness · 2026-05-17 ───
   Boosted from opacity 0.7/blur 90px to 0.92/blur 64px so the
   ambient motion is felt, not just sensed. The orbs are now a
   load-bearing brand element — they say "this surface breathes." */
.cine-mesh {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(64px);
  opacity: 0.92;
}
.cine-mesh.paused .cine-orb { animation-play-state: paused !important; }

/* ═══ GOLD FLOW LAYER · 4K METALLIC · KKR-grade · 2026-05-17 v2 ═══
   v1 used mix-blend-mode: screen + heavy Gaussian blur → washed-out
   watercolor look that also hazed the text on top. v2 removes both:
   ribbons now render at native opacity with sharp 4K gradients. A
   thin highlight streak per ribbon gives the "silk catching light"
   shine. Mobile gets the same treatment at 0.7 opacity (was 0.4). */
.cine-gold-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Dialed UP to 0.85 (2026-05-21) · screenshots showed the hero
     reading "too static" at 0.4 — gold was atmospheric but no longer
     a character on stage. 0.85 brings the ribbons back as the second
     protagonist of the hero (after the headline), in the band-of-gold
     KKR register the user explicitly anchored on.
     Prior: 1.0 → 0.5 → 0.4 → now 0.85.
     Text crispness is preserved by the z-index stack + the
     text-rendering rules below — no headline blur even at this level. */
  opacity: 0.85;
  /* NO mix-blend-mode · NO Gaussian blur · sharp metallic rendering */
}
.gold-ribbon, .gold-highlight {
  transform-origin: 50% 50%;
  will-change: transform;
}
.ribbon-1, .highlight-1 {
  animation: ribbonDrift1 16s ease-in-out infinite alternate;
}
.ribbon-2, .highlight-2 {
  animation: ribbonDrift2 20s ease-in-out infinite alternate;
}
.ribbon-3 {
  animation: ribbonDrift3 24s ease-in-out infinite alternate;
}
/* Highlight streaks also get a subtle independent shimmer */
.highlight-1 {
  animation: ribbonDrift1 16s ease-in-out infinite alternate,
             goldShimmer 5.2s ease-in-out infinite alternate;
}
.highlight-2 {
  animation: ribbonDrift2 20s ease-in-out infinite alternate,
             goldShimmer 6.6s ease-in-out infinite alternate;
}
@keyframes ribbonDrift1 {
  0%   { transform: translateX(-6%) translateY(-3%) scaleY(1)    rotate(-1deg); }
  50%  { transform: translateX(4%)  translateY(2%)  scaleY(1.15) rotate(1.5deg); }
  100% { transform: translateX(-2%) translateY(-5%) scaleY(0.92) rotate(-2deg); }
}
@keyframes ribbonDrift2 {
  0%   { transform: translateX(3%)  translateY(2%)  scaleY(0.9)  rotate(1deg); }
  50%  { transform: translateX(-5%) translateY(-3%) scaleY(1.2)  rotate(-1.5deg); }
  100% { transform: translateX(2%)  translateY(4%)  scaleY(1)    rotate(2deg); }
}
@keyframes ribbonDrift3 {
  0%   { transform: translateX(-3%) translateY(0%)  scaleY(1.05) rotate(0.5deg); }
  50%  { transform: translateX(5%)  translateY(-2%) scaleY(0.85) rotate(-1deg); }
  100% { transform: translateX(-1%) translateY(3%)  scaleY(1.1)  rotate(1.5deg); }
}
@keyframes goldShimmer {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
.cine-mesh.paused ~ .cine-gold-flow .gold-ribbon,
.cine-mesh.paused ~ .cine-gold-flow .gold-highlight {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .gold-ribbon, .gold-highlight { animation: none !important; }
}
@media (max-width: 640px) {
  /* Mobile aligned to the new 85% desktop register (2026-05-21).
     Mobile reads at slightly lower band because the headline lock-up
     is more vertical and a too-loud ribbon eats the consumer-first
     framing. 0.82 is the mobile sweet spot. */
  .cine-gold-flow { opacity: 0.82; }
}

/* ═══ Text crispness guarantee ═══
   Ensures the headline, sub, partnership, and CTAs sit ABOVE the
   gold flow with no blur bleed-through. The hero content already has
   z-index: 1 set by sn-override.css, but we add text-rendering and
   anti-aliasing hints to lock crispness at 4K-grade displays. */
.cine-content,
.cine-headline,
.cine-sub,
.cine-eyebrow,
.cine-partnership {
  position: relative;
  z-index: 2;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══ KKR-grade text protection scrim · 2026-05-21 ═══
   The gold flow at 0.85 reads as a band of light catching the hero
   (the brand register we want) — but the headline + sub sit right
   in the arc of the ribbon, so without a backdrop they get visually
   bullied. KKR achieves the same band-and-text composition by sitting
   the text on its own soft contrast plane.

   This adds a localized elliptical scrim under .cine-content (only
   under the text block, not the whole hero) that creates a softly
   darker "stage" the headline reads against. Combined with the
   text-shadow boost below, the headline now reads pin-sharp ON the
   ribbon arc without the ribbon needing to be dimmed. */
.cine-content { position: relative; }
.cine-content::before {
  content: '';
  position: absolute;
  /* The scrim hugs the text column, not the whole hero, so the
     ribbons remain prominent at the outer wings of the hero. */
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(820px, 92%);
  height: calc(100% + 80px);
  /* Radial dark wash — strongest under the headline midline, fading
     to transparent at edges so it never reads as a "box". */
  background:
    radial-gradient(ellipse 60% 75% at 50% 50%,
      rgba(6,13,24,0.78) 0%,
      rgba(6,13,24,0.62) 28%,
      rgba(6,13,24,0.32) 58%,
      rgba(6,13,24,0.10) 82%,
      transparent 100%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

/* Headline + sub text-shadow boost — pin-sharp edges ON the band */
.cine-headline {
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 2px 12px rgba(6,13,24,0.65),
    0 4px 22px rgba(6,13,24,0.45);
}
.cine-headline em {
  /* Gold half of the headline — keeps its colour but gains depth */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 2px 14px rgba(6,13,24,0.75),
    0 0 28px rgba(244,196,64,0.18);
}
.cine-sub {
  text-shadow: 0 1px 8px rgba(6,13,24,0.70), 0 2px 14px rgba(6,13,24,0.45);
}
.cine-eyebrow,
.cine-partnership {
  text-shadow: 0 1px 6px rgba(6,13,24,0.65);
}

/* Mobile — slightly tighter scrim because the column is narrower */
@media (max-width: 640px) {
  .cine-content::before {
    width: min(560px, 96%);
    background:
      radial-gradient(ellipse 70% 78% at 50% 50%,
        rgba(6,13,24,0.82) 0%,
        rgba(6,13,24,0.66) 30%,
        rgba(6,13,24,0.32) 62%,
        rgba(6,13,24,0.10) 84%,
        transparent 100%);
  }
}
.cine-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.cine-orb-1 {
  width: 60vw; height: 60vw;
  top: -10%; left: -10%;
  background: radial-gradient(circle, #C8A84E 0%, transparent 60%);
  animation: orbDrift1 26s ease-in-out infinite alternate;
}
.cine-orb-2 {
  width: 55vw; height: 55vw;
  top: 10%; right: -15%;
  background: radial-gradient(circle, #0D9488 0%, transparent 60%);
  animation: orbDrift2 32s ease-in-out infinite alternate;
}
.cine-orb-3 {
  width: 70vw; height: 70vw;
  bottom: -25%; left: 20%;
  background: radial-gradient(circle, #F4D470 0%, transparent 65%);
  animation: orbDrift3 38s ease-in-out infinite alternate;
  opacity: 0.65;
}
.cine-orb-4 {
  width: 30vw; height: 30vw;
  top: 40%; left: 35%;
  background: radial-gradient(circle, #E8D48B 0%, transparent 60%);
  animation: orbDrift4 22s ease-in-out infinite alternate;
  opacity: 0.45;
}
.cine-orb-5 {
  width: 40vw; height: 40vw;
  bottom: -10%; right: -5%;
  background: radial-gradient(circle, #B8902C 0%, transparent 60%);
  animation: orbDrift5 30s ease-in-out infinite alternate;
  opacity: 0.55;
}
@keyframes orbDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw,4vh) scale(1.18); } }
@keyframes orbDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-7vw,5vh) scale(1.12); } }
@keyframes orbDrift3 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(-5vw,-4vh) scale(1.22); } }
@keyframes orbDrift4 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw,-3vh) scale(1.3); } }
@keyframes orbDrift5 { from { transform: translate(0,0) scale(1); } to { transform: translate(-4vw,-6vh) scale(1.1); } }

/* ─── Adinkrahene watermark · the chief among Adinkra ─── */
.adinkrahene-watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: clamp(420px, 55vw, 720px);
  height: clamp(420px, 55vw, 720px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.06;
  animation: adinkraSpin 180s linear infinite;
  mix-blend-mode: screen;
}
@keyframes adinkraSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .adinkrahene-watermark { animation: none; }
}

/* ─── Subtle moving grid ─── */
.cine-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244,196,48,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,196,48,0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 88px 88px, 88px 88px; }
}

/* ─── Particle canvas (gold specks drifting upward) ─── */
.cine-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%; height: 100%;
}

/* ─── Vignette ─── */
.cine-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.45) 100%);
}

/* ─── Content ─── */
.cine-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 4vh;
}

.cine-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 9px 22px;
  border: 1px solid rgba(244,196,48,0.32);
  border-radius: 999px;
  background: rgba(15, 30, 51, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 36px;
}
.cine-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(31,224,127,0.18);
  position: relative;
  z-index: 1;
}
.cine-pulse {
  position: absolute;
  left: 22px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: cinePulseExp 2.4s ease-out infinite;
}
@keyframes cinePulseExp {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(4.5); opacity: 0; }
}

/* ─── Headline · tightened 2026-05-17 to fit hero in one viewport ─── */
.cine-headline {
  font-family: var(--ff-serif);
  /* Was clamp(64px, 10vw, 168px) — overflowed the fold on standard
     desktops. New ceiling fits 2-line headline within ~210px of
     vertical space, leaving room for sub + coin + CTAs. */
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: var(--text);
}
.cine-headline .line-1,
.cine-headline .line-2 {
  display: block;
}
.cine-headline .line-2 {
  /* Final fix v3 2026-05-22 · gradient still bottomed muddy against the
     0.85 ribbon. Switched to a SOLID bright pearl-gold with a real
     -webkit-text-stroke navy outline. Solid color = uniform brightness
     across the whole word, outline = guaranteed legibility regardless
     of what's behind it. Heavy drop-shadow stack provides the gold
     metallic "weight" without relying on gradient mud. */
  color: #FFEFA8;
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-stroke: 1.5px rgba(6,13,24,0.85);
  /* The drop-shadow stack now does the metallic-depth work:
       1. Hard navy edge for crispness
       2. Wide navy halo for separation from the ribbon
       3. Warm gold ambient for the metal feel */
  filter:
    drop-shadow(0 2px 0 rgba(6,13,24,0.85))
    drop-shadow(0 8px 28px rgba(6,13,24,0.75))
    drop-shadow(0 0 42px rgba(244,221,141,0.42));
}

.cine-sub {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 640px;
  margin: 0 0 28px;
}
.cine-sub strong { color: var(--gold); font-weight: 600; }

/* ─── Marquee stat (1 SOV ≡ $1,000 of attested gold) ─── */
.cine-marquee-stat {
  /* STRIPPED 2026-05-22 · was boxed with 1px gold border + navy panel
     + backdrop blur + corner-gradient highlight. The boxed frame made
     the SOV coin look like a flat illustration sitting in a card.
     Now the coin floats free in the hero atmosphere — no frame, no
     blur, no border. The radial gold halo + scan rings + sonar already
     provide the staging. Premium institutional weight comes from the
     coin itself, not from a card around it. */
  margin: 0 0 56px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  position: relative;
}
/* The atmospheric ambient that REPLACES the framed look — a soft
   centered gold halo behind the coin, breathing on a 7s cycle. */
.cine-marquee-stat::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(320px, 32vw, 520px);
  height: clamp(320px, 32vw, 520px);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle,
      rgba(244,221,141,0.16) 0%,
      rgba(244,221,141,0.06) 30%,
      rgba(244,221,141,0.02) 55%,
      transparent 78%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  filter: blur(6px);
  animation: cmsHaloBreath 7s ease-in-out infinite;
}
@keyframes cmsHaloBreath{
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* ════════════════════════════════════════════════════════════════
   SOV COIN · "JUST ATTESTED" RADIAL FLASH · 2026-05-22
   Every 12 seconds the coin emits a bright gold pulse outward —
   the visual signature of a fresh attestation landing on-chain.
   Loops indefinitely. Wraps the .sov-coin-wrap as ::after so it
   doesn't add markup. ════════════════════════════════════════ */
.sov-coin-wrap{ position: relative; }
.sov-coin-wrap::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 110%; height: 110%;
  transform: translate(-50%, -50%) scale(0.6);
  border: 2px solid rgba(255,239,168,0.7);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: sovJustAttested 12s ease-out infinite;
}
@keyframes sovJustAttested{
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; border-width: 2px; }
  6%   { opacity: 0.95; border-width: 2px; }
  30%  { transform: translate(-50%, -50%) scale(1.55); opacity: 0; border-width: 0.5px; }
  100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}

/* ── Holographic data motes floating around the coin ──
   v3 2026-05-22 · complex orbital animations were unreliable across
   browsers (transform composition + transform-origin nuances). Final
   approach: pin each mote at a fixed compass position around the coin
   with subtle breath + drift. Reads as a premium verification
   dashboard floating in space — clearer than spinning labels anyway.

   Compass positions:
     mass   : 1 o'clock  (top-right, level with coin's top-third)
     block  : 7 o'clock  (bottom-left, below coin)
     purity : 11 o'clock (top-left, level with coin's top-third) */
.sov-coin-wrap .sov-mote{
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: rgba(244,221,141,0.95);
  padding: 5px 12px;
  background: rgba(6,13,24,0.82);
  border: 1px solid rgba(244,221,141,0.42);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.32), 0 0 14px rgba(244,221,141,0.10);
}
.sov-coin-wrap .sov-mote-mass{
  top: 22%;
  right: -180px;
  animation: sovMoteDrift1 8s ease-in-out infinite;
}
.sov-coin-wrap .sov-mote-block{
  bottom: 18%;
  left: -180px;
  animation: sovMoteDrift2 9.5s ease-in-out infinite;
}
.sov-coin-wrap .sov-mote-purity{
  top: 22%;
  left: -180px;
  animation: sovMoteDrift3 8.5s ease-in-out infinite;
}
@keyframes sovMoteDrift1{
  0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.92; }
  50%      { transform: translate(-4px, -3px) scale(1.025); opacity: 1; }
}
@keyframes sovMoteDrift2{
  0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.92; }
  50%      { transform: translate(4px, -3px) scale(1.025);  opacity: 1; }
}
@keyframes sovMoteDrift3{
  0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.92; }
  50%      { transform: translate(4px, 3px) scale(1.025);   opacity: 1; }
}
/* Connecting hairline from each mote toward the coin center */
.sov-coin-wrap .sov-mote::after{
  content: '';
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(244,221,141,0.55) 0%,
    rgba(244,221,141,0.10) 100%);
  pointer-events: none;
}
.sov-coin-wrap .sov-mote-mass::after,
.sov-coin-wrap .sov-mote-block:not(.sov-mote-purity)::after{
  left: -28px;
}
.sov-coin-wrap .sov-mote-block::after{
  right: -28px;
  left: auto;
  background: linear-gradient(270deg,
    rgba(244,221,141,0.55) 0%,
    rgba(244,221,141,0.10) 100%);
}
.sov-coin-wrap .sov-mote-purity::after{
  right: -28px;
  left: auto;
  background: linear-gradient(270deg,
    rgba(244,221,141,0.55) 0%,
    rgba(244,221,141,0.10) 100%);
}
/* Mobile: hide the orbiting motes (too cluttered on small screens) */
@media (max-width: 640px){
  .sov-coin-wrap .sov-mote{ display: none; }
}
/* Reduced motion: pin motes in place, skip the radial flash */
@media (prefers-reduced-motion: reduce){
  .sov-coin-wrap::before{ display: none; }
  .sov-coin-wrap .sov-mote{ animation: none !important; }
  .cine-marquee-stat::before{ animation: none !important; }
}
.cine-stat-block {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--ff-serif);
}
.cine-stat-num {
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
}
.cine-stat-num .op {
  font-family: var(--ff-mono);
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-mute);
  margin-left: 4px;
  letter-spacing: 0.16em;
}
.cine-stat-eq {
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--text-mute);
  font-weight: 300;
  margin: 0 8px;
}
.cine-stat-lbl {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-left: 18px;
  max-width: 180px;
  text-align: left;
  line-height: 1.35;
}

/* ─── Proof strip (4 stats, hairline columns) ─── */
.cine-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  max-width: 1080px;
  margin: 0 0 56px;
  padding: 28px 0;
  border-top: 1px solid rgba(244,196,48,0.18);
  border-bottom: 1px solid rgba(244,196,48,0.18);
}
.cine-proof-cell {
  text-align: center;
  padding: 0 22px;
  border-right: 1px solid rgba(244,196,48,0.10);
}
.cine-proof-cell:last-child { border-right: none; }
.cine-proof-cell .num {
  font-family: var(--ff-serif);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-bottom: 10px;
}
.cine-proof-cell .num .suffix {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--gold-soft);
  margin-left: 2px;
}
.cine-proof-cell .lbl {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.45;
}

/* ─── CTAs ─── */
.cine-cta-row {
  display: flex;
  gap: 14px;
  margin-bottom: 64px;
}
.cine-cta-primary {
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 600;
  box-shadow: 0 12px 36px rgba(244,196,48,0.22), 0 0 0 1px rgba(244,196,48,0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cine-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(244,196,48,0.32), 0 0 0 1px var(--gold);
}
.cine-cta-ghost {
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--text);
}
.cine-cta-ghost .arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s;
}
.cine-cta-ghost:hover .arrow { transform: translateX(4px); }

/* ─── Scroll cue ─── */
.cine-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: var(--text-mute);
}
.cine-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, var(--gold) 50%, transparent);
  position: relative;
  overflow: hidden;
}
.cine-scroll-line::after {
  content: '';
  position: absolute;
  width: 1px; height: 16px;
  background: var(--gold);
  animation: scrollLineDrop 2s ease-in-out infinite;
}
@keyframes scrollLineDrop {
  0%   { top: -16px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 48px; opacity: 0; }
}

/* ─── Section transitions: hairline above next section ─── */
.hero-cinematic::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244,196,48,0.42) 50%, transparent 100%);
  z-index: 4;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .cine-orb, .cine-grid, .cine-pulse, .cine-scroll-line::after {
    animation: none !important;
  }
}

/* ─── Mobile responsive ─── */
@media (max-width: 1024px) {
  .hero-cinematic { min-height: auto; padding: 64px 0 48px; }
  .cine-headline { font-size: clamp(48px, 9vw, 88px); margin-bottom: 24px; }
  .cine-sub { font-size: 16px; margin-bottom: 36px; }
  .cine-marquee-stat { padding: 20px 28px; margin-bottom: 36px; }
  .cine-stat-block { flex-wrap: wrap; gap: 14px; justify-content: center; }
  .cine-stat-lbl { margin-left: 0; max-width: none; text-align: center; }
  .cine-proof-strip { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 24px 0; }
  .cine-proof-cell { border-right: none; padding: 0 14px; }
  .cine-proof-cell:nth-child(odd) { border-right: 1px solid rgba(244,196,48,0.10); }
  .cine-cta-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; gap: 10px; margin-bottom: 36px; }
  .cine-cta-primary, .cine-cta-ghost { text-align: center; padding: 14px 24px; }
}
@media (max-width: 640px) {
  .cine-eyebrow { font-size: 9.5px; padding: 7px 16px; margin-bottom: 24px; }
  .cine-headline { font-size: clamp(40px, 11vw, 64px); }
  .cine-sub { font-size: 15px; padding: 0 8px; }
  .cine-stat-num { font-size: 28px; }
  .cine-stat-eq { font-size: 22px; }
  .cine-proof-cell .num { font-size: 22px; }
  .cine-proof-cell .lbl { font-size: 9px; }
}

/* ─── Live ticker ─── */
.live-ticker-shell {
  position: relative;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 100%);
  border-top: 1px solid rgba(244,196,48,0.18);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  z-index: 5;
}
.ticker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 11px 32px 9px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-mute);
}
.ticker-title { color: var(--gold); display: inline-flex; align-items: center; gap: 10px; }
.ticker-title .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(31,224,127,0.18);
  animation: tickerPulse 1.6s ease-in-out infinite;
}
.ticker-meta { color: var(--text-mute); font-size: 9.5px; }
.ticker-meta .meta-live { color: var(--green); }

@keyframes tickerPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(31,224,127,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(31,224,127,0.0); }
}

.ticker-track-wrap {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ticker-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: tickerSlide 90s linear infinite;
}
.ticker-track-wrap:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 28px 8px 0;
  margin-right: 28px;
  border-right: 1px solid var(--line-mute);
  font-family: var(--ff-mono);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-item .ti-time { color: var(--text-mute); font-size: 11px; letter-spacing: 0.06em; }
.ticker-item .ti-id { color: var(--gold); font-weight: 500; }
.ticker-item .ti-id.reject { color: var(--amber); }
.ticker-item .ti-meta { color: var(--text-soft); font-size: 11.5px; }
.ticker-item .ti-badge { padding: 3px 9px; border-radius: 3px; font-size: 10px; letter-spacing: 0.16em; font-weight: 600; }
.ticker-item .ti-badge.pass { color: var(--green); background: rgba(31,224,127,0.10); border: 1px solid rgba(31,224,127,0.28); }
.ticker-item .ti-badge.reject { color: var(--amber); background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.30); }

@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ─── assets/body-light.css ─────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
 * Body light-theme overlay
 * Hero stays cinematic dark · everything below converts to
 * warm cream + navy ink + hairline gold = institutional, transparent
 * ──────────────────────────────────────────────────────── */

:root {
  /* Light palette · only used by sections that opt-in via .body-light */
  --bl-bg:        #FAF7F0;     /* warm off-white, like Brookfield */
  --bl-bg-soft:   #F2EFE5;     /* slightly darker for alternating bands */
  --bl-bg-card:   #FFFFFF;     /* pure white cards */
  --bl-ink:       #0F1B2D;     /* navy text */
  --bl-ink-soft:  #1F2A3F;     /* secondary text · darkened for stronger contrast on cream */
  --bl-ink-mute:  #4A5468;     /* muted text · was #5A6275, darkened so captions don't read as gray */
  --bl-rule:      rgba(15, 27, 45, 0.10);
  --bl-rule-strong: rgba(15, 27, 45, 0.22);
  --bl-gold:      #A07820;     /* richer gold · was #B8902C, deeper for stronger contrast on cream */
  --bl-gold-bright:#C8A84E;
  --bl-shadow:    0 1px 2px rgba(15, 27, 45, 0.04), 0 8px 24px rgba(15, 27, 45, 0.06);
  --bl-shadow-lg: 0 2px 4px rgba(15, 27, 45, 0.06), 0 24px 56px rgba(15, 27, 45, 0.08);

  /* ─── AAA+ ceremonial layer for body-light register (additive) ───
   * Used by Physics Gate, NANANOM Council, heritage Sika Dwa Kofi
   * and any cream-paper hero needing royal struck-bronze treatment.
   * Reads as "engraved gold on cream parchment" — the institutional /
   * royal hybrid this site lives in.
   * ──────────────────────────────────────────────────────────── */

  --bl-gold-royal:    #B8902C;
  --bl-gold-mid:      #9C7A2E;
  --bl-gold-deep:     #735E2A;
  --bl-gold-shadow:   #3F2E10;
  --bl-gold-bright-r: #D6B355;

  --bl-grad-gold-face: radial-gradient(circle at 32% 28%,
                          #D6B355 0%, #B8902C 22%, #9C7A2E 50%, #735E2A 78%, #3F2E10 100%);
  --bl-grad-gold-bar:  linear-gradient(180deg,
                          #D6B355 0%, #B8902C 14%, #9C7A2E 42%, #735E2A 78%, #3F2E10 100%);

  --bl-paper-grain:    rgba(184, 144, 44, 0.04);
  --bl-centre-warmth:  rgba(184, 144, 44, 0.08);

  --bl-ff-ceremonial: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

/* ─── Wrapper class · everything inside flips to light ─── */
.body-light {
  background: var(--bl-bg);
  color: var(--bl-ink);
  position: relative;
}
.body-light h1, .body-light h2, .body-light h3, .body-light h4 {
  color: var(--bl-ink);
  /* Defensive: long proper-noun phrases like "Sika Dwa Kofi" mustn't clip on narrow mobile */
  overflow-wrap: break-word;
  text-wrap: balance;
}
.body-light h1 em, .body-light h2 em, .body-light h3 em {
  overflow-wrap: break-word;
}
.body-light p { color: var(--bl-ink-soft); }
.body-light strong { color: var(--bl-ink); }
.body-light a { color: var(--bl-gold); }

.body-light .section-eyebrow,
.body-light .eyebrow {
  color: var(--bl-gold);
}
.body-light .rule { background: var(--bl-rule); }

/* ─── Tiles ─── */
.body-light .tile {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
  box-shadow: var(--bl-shadow);
  transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;
}
.body-light .tile:hover {
  border-color: var(--bl-gold);
  box-shadow: var(--bl-shadow-lg);
  transform: translateY(-3px);
}
.body-light .tile h3 { color: var(--bl-ink); }
.body-light .tile p { color: var(--bl-ink-mute); }
.body-light .tile a { color: var(--bl-gold); }
.body-light .tile-icon {
  border-color: var(--bl-rule-strong);
  color: var(--bl-gold);
  background: rgba(184, 144, 44, 0.06);
}

/* ─── Cards (paths, standing, resources, etc.) ─── */
.body-light .path,
.body-light .standing-card,
.body-light .resource,
.body-light .doc-card {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
  box-shadow: var(--bl-shadow);
  transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;
}
.body-light .path:hover,
.body-light .standing-card:hover,
.body-light .resource:hover,
.body-light .doc-card:hover {
  border-color: var(--bl-gold);
  box-shadow: var(--bl-shadow-lg);
  transform: translateY(-3px);
}
.body-light .path h3,
.body-light .standing-card h3,
.body-light .resource-body .name,
.body-light .doc-body h4 { color: var(--bl-ink); }
.body-light .path p,
.body-light .standing-card p,
.body-light .resource-body .desc,
.body-light .doc-body p { color: var(--bl-ink-mute); }
.body-light .path .label,
.body-light .standing-card .role,
.body-light .resource-body .meta,
.body-light .doc-body .meta { color: var(--bl-gold); }
.body-light .path a.go { color: var(--bl-gold); }
.body-light .resource-icon,
.body-light .doc-icon {
  border-color: var(--bl-rule-strong);
  color: var(--bl-gold);
  background: rgba(184, 144, 44, 0.05);
}

/* ─── Resources two-tier (public · NDA-gated) ─── */
.body-light .resources-tier-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bl-rule);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bl-ink-mute);
}
.body-light .resources-tier-label.resources-tier-gated {
  margin-top: 36px;
}
.body-light .tier-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.body-light .tier-dot-open {
  background: #1FE07F;
  box-shadow: 0 0 6px rgba(31, 224, 127, 0.55);
}
.body-light .tier-dot-gated {
  background: var(--bl-gold);
  box-shadow: 0 0 6px rgba(184, 144, 44, 0.55);
}
.body-light .tier-text { font-weight: 600; }

/* Gated resource cards · visually distinct from public ones */
.body-light .resource-gated {
  background: linear-gradient(135deg, rgba(184, 144, 44, 0.04), rgba(255, 255, 255, 0.95)) !important;
  border: 1px solid rgba(184, 144, 44, 0.32) !important;
  border-left: 3px solid var(--bl-gold) !important;
}
.body-light .resource-gated:hover {
  background: linear-gradient(135deg, rgba(184, 144, 44, 0.08), rgba(255, 255, 255, 1)) !important;
  border-color: rgba(184, 144, 44, 0.55) !important;
  transform: translateY(-2px);
}
.body-light .resource-gated .resource-icon {
  background: rgba(184, 144, 44, 0.10);
  border-color: rgba(184, 144, 44, 0.45);
  color: var(--bl-gold);
}
.body-light .resource-gated .meta {
  color: var(--bl-gold) !important;
  font-weight: 600;
}

/* Pill badges next to the resource name */
.resource-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  font-weight: 600;
}
.resource-badge-open {
  background: rgba(31, 224, 127, 0.10);
  color: #0E7C52;
  border: 1px solid rgba(31, 224, 127, 0.40);
}
.resource-badge-gated {
  background: rgba(184, 144, 44, 0.10);
  color: var(--bl-gold);
  border: 1px solid rgba(184, 144, 44, 0.45);
  letter-spacing: 0.10em;
}

/* CTA strip below the gated cards */
.body-light .resources-cta {
  margin-top: 32px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #0F1B2D 0%, #0A1422 100%);
  border: 1px solid rgba(184, 144, 44, 0.42);
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 27, 45, 0.10);
}
.body-light .resources-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 28px;
  background: rgba(244, 196, 64, 0.08);
  border: 1px solid var(--bl-gold-bright);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #F4D470;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.body-light .resources-cta-btn:hover {
  background: rgba(244, 196, 64, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(244, 196, 64, 0.18);
  text-decoration: none;
}
.body-light .resources-cta-btn:focus-visible {
  outline: 2px solid #F4D470;
  outline-offset: 3px;
}
.body-light .resources-cta-btn .arrow {
  transition: transform 0.18s;
  font-size: 14px;
}
.body-light .resources-cta-btn:hover .arrow { transform: translateX(4px); }
.body-light .resources-cta-foot {
  margin: 14px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(232, 224, 204, 0.55);
  text-transform: uppercase;
}

/* ─── Flow diagram wrap ─── */
.body-light .flow-wrap {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
  box-shadow: var(--bl-shadow);
}
.body-light .flow-caption { color: var(--bl-ink-mute); }

/* ─── Mobile-stacked flow (≤640px) under body-light ─── */
.body-light .flow-step {
  background: linear-gradient(135deg, #0F1B2D 0%, #0A1422 100%);
  border: 1px solid rgba(184, 144, 44, 0.35);
  box-shadow: 0 4px 14px rgba(15, 27, 45, 0.10);
}
.body-light .flow-step-icon {
  background: rgba(244, 196, 64, 0.06);
  border: 1px solid rgba(244, 196, 64, 0.40);
}
.body-light .flow-step-stage { color: rgba(244, 212, 112, 0.85); }
.body-light .flow-step-title { color: #F1F5F9; }
.body-light .flow-step-sub   { color: rgba(232, 224, 204, 0.72); }
.body-light .flow-step::after {
  background: linear-gradient(180deg, rgba(184, 144, 44, 0.65), rgba(184, 144, 44, 0));
}

/* ─── Ledger table ─── */
.body-light .ledger-table-shell {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
  box-shadow: var(--bl-shadow-lg);
}
.body-light .ledger-table th {
  background: var(--bl-bg-soft);
  color: var(--bl-ink-mute);
  border-bottom: 1px solid var(--bl-rule);
}
.body-light .ledger-table td { border-bottom: 1px solid var(--bl-rule); }
.body-light .ledger-table tr:hover td { background: rgba(184, 144, 44, 0.04); }
.body-light .ledger-table .name { color: var(--bl-ink); }
.body-light .ledger-table .addr a { color: var(--bl-gold); }
.body-light .ledger-table .verified { color: #1A8B5A; }
.body-light .ledger-foot {
  background: var(--bl-bg-soft);
  color: var(--bl-ink-mute);
  border-top: 1px solid var(--bl-rule);
}
.body-light .ledger-foot a { color: var(--bl-gold); }

/* ─── Built-on row ─── */
.body-light .builton {
  background: var(--bl-bg-soft);
  border-color: var(--bl-rule);
}
.body-light .builton-label b { color: var(--bl-gold); }
.body-light .builton-label { color: var(--bl-ink-mute); }
.body-light .builton-cell {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
}
.body-light .builton-cell:hover { border-color: var(--bl-gold); }
.body-light .builton-cell .name { color: var(--bl-ink); }
.body-light .builton-cell .role { color: var(--bl-ink-mute); }

/* ─── Pull box (heritage quote, etc.) ─── */
.body-light .pull {
  background: rgba(184, 144, 44, 0.07);
  border-left: 3px solid var(--bl-gold);
  color: var(--bl-ink-soft);
}
.body-light .pull em { color: var(--bl-gold); }

/* ─── Stat strip + context band ─── */
.body-light .cine-proof-cell,
.body-light .stat-card {
  background: var(--bl-bg-card);
  border: 1px solid var(--bl-rule);
}
.body-light .cine-proof-cell .lbl { color: var(--bl-ink-mute); }
.body-light .cine-proof-cell .num { color: var(--bl-gold); }

/* ─── Footer ─── */
.body-light .footer {
  background: var(--bl-bg-soft);
  border-top: 1px solid var(--bl-rule);
}
.body-light .footer h4 { color: var(--bl-ink-mute); }
.body-light .footer ul li a { color: var(--bl-ink-soft); }
.body-light .footer ul li a:hover { color: var(--bl-gold); }
.body-light .footer-meta { color: var(--bl-ink-mute); }
.body-light .footer-meta strong { color: var(--bl-ink); }
.body-light .footer-bottom { color: var(--bl-ink-mute); border-top: 1px solid var(--bl-rule); }

/* ─── Buttons override ─── */
.body-light .btn-ghost {
  border-color: rgba(15, 27, 45, 0.42) !important;
  color: #0F1B2D !important;
  background: transparent !important;
}
.body-light .btn-ghost:hover {
  border-color: var(--bl-gold) !important;
  background: rgba(184, 144, 44, 0.06) !important;
  color: var(--bl-gold) !important;
}

/* ─── Inner-page header (technical, heritage, compliance) ─── */
.body-light .page-header {
  background: var(--bl-bg);
  border-bottom: 1px solid var(--bl-rule);
}
.body-light .page-toc a {
  border-color: var(--bl-rule);
  color: var(--bl-ink-mute);
}
.body-light .page-toc a:hover { color: var(--bl-gold); border-color: var(--bl-gold); }


/* ─────────────────────────────────────────────────────────
 *  CONTINUOUS MOTION · the chain never sleeps
 * ──────────────────────────────────────────────────────── */

/* Animated gradient line under section eyebrows · always flowing */
.section-eyebrow-flow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bl-gold);
  margin-bottom: 22px;
}
.section-eyebrow-flow::before {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bl-gold), transparent);
  background-size: 200% 100%;
  animation: lineFlow 3.6s linear infinite;
}
@keyframes lineFlow {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Section divider · perpetually flowing gold thread */
.flow-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--bl-gold) 30%,
    rgba(184, 144, 44, 0.2) 50%,
    var(--bl-gold) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: lineFlow 8s linear infinite;
  margin: 0;
  border: 0;
}

/* Live indicator · permanently pulsing */
.live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1FE07F;
  position: relative;
}
.live-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1FE07F;
  animation: livePulseExp 1.8s ease-out infinite;
}
@keyframes livePulseExp {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* Hover-tracked light gradient on cards */
.body-light .tile,
.body-light .path,
.body-light .resource,
.body-light .standing-card {
  position: relative;
  overflow: hidden;
}
.body-light .tile::before,
.body-light .path::before,
.body-light .resource::before,
.body-light .standing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(244, 196, 48, 0.10), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.body-light .tile:hover::before,
.body-light .path:hover::before,
.body-light .resource:hover::before,
.body-light .standing-card:hover::before { opacity: 1; }

/* Stat numbers · subtle perpetual breathing */
.body-light .cine-proof-cell .num,
.body-light .stat-num {
  animation: numBreathe 4.8s ease-in-out infinite;
}
@keyframes numBreathe {
  0%, 100% { opacity: 0.92; text-shadow: 0 0 0 transparent; }
  50%      { opacity: 1; text-shadow: 0 0 12px rgba(184, 144, 44, 0.18); }
}

/* Animated tile-icon glow · perpetual */
.body-light .tile-icon,
.body-light .resource-icon,
.body-light .doc-icon {
  animation: iconBreathe 5s ease-in-out infinite;
}
@keyframes iconBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 144, 44, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(184, 144, 44, 0.06); }
}

/* Photo band: an actual photographic anchor.
   2026-05-21 · added designed gradient floor so the section reads as a
   composed dark hero even if /assets/photo-anchor.jpg fails to load.
   The fallback uses Ghana-flag-accented warm gold band over deep navy
   with a subtle radial glow centered on the headline — so the user
   never sees an "empty navy gap" with stranded text.
   When the <img> fires onerror, JS sets `.photo-anchor--no-image` which
   amps the fallback gradients to full strength. */
.photo-anchor {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
  background:
    /* Warm gold band sweeping diagonal (Ghana-flag accent) */
    linear-gradient(115deg,
      transparent 0%,
      transparent 28%,
      rgba(244,196,64,0.10) 42%,
      rgba(244,221,141,0.14) 50%,
      rgba(244,196,64,0.10) 58%,
      transparent 72%,
      transparent 100%),
    /* Centred gold halo behind headline */
    radial-gradient(ellipse 60% 70% at 30% 50%,
      rgba(184,144,44,0.18) 0%,
      rgba(184,144,44,0.06) 35%,
      transparent 70%),
    /* Deep navy floor */
    linear-gradient(180deg, #0A1322 0%, #0F1B2D 50%, #060D18 100%);
}
/* Image-loaded state: dim the fallback gradients so they don't compete
   with the photo. Image-failed state: amp them so the section sings. */
.photo-anchor--no-image {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 22%,
      rgba(244,196,64,0.20) 40%,
      rgba(244,221,141,0.30) 50%,
      rgba(244,196,64,0.20) 60%,
      transparent 78%,
      transparent 100%),
    radial-gradient(ellipse 65% 75% at 30% 50%,
      rgba(184,144,44,0.32) 0%,
      rgba(184,144,44,0.10) 38%,
      transparent 75%),
    linear-gradient(180deg, #0A1322 0%, #0F1B2D 50%, #060D18 100%);
}
.photo-anchor .photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) contrast(1.05) saturate(1.1);
  animation: photoZoom 24s ease-in-out infinite alternate;
}
@keyframes photoZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}
.photo-anchor .photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 27, 45, 0.82) 0%, rgba(15, 27, 45, 0.30) 50%, rgba(15, 27, 45, 0.50) 100%),
    radial-gradient(ellipse at left, transparent 20%, rgba(15, 27, 45, 0.65) 100%);
}
.photo-anchor .photo-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.photo-anchor .photo-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F4D470;
  margin-bottom: 22px;
}
.photo-anchor .photo-headline {
  font-family: var(--ff-serif);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  max-width: 720px;
  margin-bottom: 18px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.photo-anchor .photo-headline em {
  font-style: italic;
  background: linear-gradient(180deg, #F5D547 0%, #C8A84E 60%, #8E6B14 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.photo-anchor .photo-sub {
  font-size: 18px;
  color: #E8E4D8;
  max-width: 580px;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.photo-anchor::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 196, 48, 0.4), transparent);
  z-index: 3;
}

/* ─────────────────────────────────────────────────────────
 * SIKA DWA KOFI · the soul of VPAY · 1701 → 2026
 * The Ano touch · Asante anchor surfaced on the front page
 * ──────────────────────────────────────────────────────── */
.throne-band {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(244,200,74,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(13,148,136,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #050B14 0%, #0A1626 50%, #050B14 100%);
  border-top: 1px solid rgba(244,200,74,0.22);
  border-bottom: 1px solid rgba(244,200,74,0.22);
}
.throne-band::before,
.throne-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244,200,74,0.55) 50%, transparent 100%);
  z-index: 4;
}
.throne-band::before { top: 0; }
.throne-band::after  { bottom: 0; }

/* Atmospheric orbs */
.throne-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(100px);
  opacity: 0.55;
}
.throne-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.throne-orb-1 {
  width: 60vw; height: 60vw;
  top: -15%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #F4C84A 0%, transparent 60%);
  animation: throneOrbBreathe 6s ease-in-out infinite;
}
.throne-orb-2 {
  width: 80vw; height: 50vw;
  bottom: -20%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #B8902C 0%, transparent 65%);
  opacity: 0.6;
  animation: throneOrbBreathe 8s ease-in-out infinite alternate;
}
@keyframes throneOrbBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.12); }
}

/* Particle canvas (gold ascending) */
.throne-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.throne-content {
  position: relative;
  z-index: 3;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.throne-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  border: 1px solid rgba(244,200,74,0.35);
  border-radius: 999px;
  background: rgba(15, 30, 51, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #F4D470;
  margin-bottom: 56px;
}

/* ════════════════════════════════════════════════════════════
   THRONE · AAA+ CEREMONIAL HEADER (added 2026-05-10)
   Sits above the existing .throne-eyebrow, giving the section
   the same royal register as NANANOM. Adinkrahene seal +
   SIKA DWA KOFI royal-mark + gold rule + sublabel.

   MOBILE behaviour (≤640px): hidden. Three stacked headers
   (royal-mark + essence + eyebrow) is too much vertical noise
   on small screens — the eyebrow chip alone introduces the
   section adequately. Desktop keeps the full ceremony.
   ═══════════════════════════════════════════════════════════ */
.throne-ceremony {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}
/* Inclusive breakpoint at 768px so most phones AND small tablets get the
   simplified mobile layout · only desktop (≥769px) sees the full ceremony */
@media (max-width: 768px) {
  .throne-ceremony { display: none !important; }
}
.throne-ceremony .seal {
  display: inline-block;
  width: 32px; height: 32px;
  margin-bottom: 16px;
  color: #F4DD8D;
  position: relative;
}
.throne-ceremony .seal::before,
.throne-ceremony .seal::after,
.throne-ceremony .seal > span {
  content: ""; position: absolute; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 1.5px solid currentColor;
}
.throne-ceremony .seal::before { width: 100%; height: 100%; }
.throne-ceremony .seal::after  { width: 60%;  height: 60%;  border-width: 1.2px; }
.throne-ceremony .seal > span  { width: 22%;  height: 22%;  background: currentColor; border: 0; }
.throne-ceremony .royal-mark {
  display: block;
  font-family: Georgia, 'Iowan Old Style', serif;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: 12px;
  color: #F4DD8D;
  font-weight: 500;
  margin-bottom: 8px;
}
.throne-ceremony .gold-rule {
  display: inline-block;
  width: 110px; height: 0.5px;
  background: linear-gradient(90deg, transparent, #F4DD8D, transparent);
  margin-top: 14px;
  margin-bottom: 14px;
}
.throne-ceremony .essence {
  display: block;
  font-family: Georgia, 'Iowan Old Style', serif;
  font-size: 14px;
  font-style: italic;
  color: rgba(244, 196, 64, 0.7);
  letter-spacing: 0.5px;
}

/* ════════════════════════════════════════════════════════════
   THRONE · MEDALLION CHASSIS around the throne SVG
   The throne now sits inside an authority frame: concentric
   ceremonial rings + 4 corner brackets + cardinal tick marks.
   ═══════════════════════════════════════════════════════════ */
.throne-medallion {
  position: relative;
  width: 380px; height: 380px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
    rgba(244,196,64,0) 0%,
    rgba(244,196,64,0.08) 70%,
    rgba(244,196,64,0.03) 100%);
}
@media (max-width: 1024px) {
  .throne-medallion { width: 300px; height: 300px; }
}
@media (max-width: 640px) {
  .throne-medallion { width: clamp(240px, 70vw, 280px); height: clamp(240px, 70vw, 280px); }
}

/* Outer ceremonial ring */
.throne-medallion::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.2px solid rgba(244, 221, 141, 0.55);
}
.throne-medallion::after {
  content: ""; position: absolute; inset: 5%;
  border-radius: 50%;
  border: 0.6px solid rgba(244, 221, 141, 0.4);
}
.throne-medallion .ring-3 {
  position: absolute; inset: 12%;
  border-radius: 50%;
  border: 0.5px solid rgba(184, 144, 44, 0.45);
}

/* Cardinal tick marks · light-touch authority anchors */
.throne-medallion .tk {
  position: absolute; background: #F4DD8D; opacity: 0.85;
}
.throne-medallion .tk-t { top: 0;    left: 50%; width: 1.6px; height: 14px; transform: translateX(-50%); }
.throne-medallion .tk-b { bottom: 0; left: 50%; width: 1.6px; height: 14px; transform: translateX(-50%); }
.throne-medallion .tk-l { left: 0;   top: 50%; width: 14px;   height: 1.6px; transform: translateY(-50%); }
.throne-medallion .tk-r { right: 0;  top: 50%; width: 14px;   height: 1.6px; transform: translateY(-50%); }

/* Scan brackets at 4 corners */
.throne-medallion .br {
  position: absolute; width: 22px; height: 22px;
  border: 1.4px solid rgba(244, 221, 141, 0.65); opacity: 0.9;
}
.throne-medallion .br-tl { top: 12%;    left: 12%;   border-right: 0; border-bottom: 0; }
.throne-medallion .br-tr { top: 12%;    right: 12%;  border-left: 0;  border-bottom: 0; }
.throne-medallion .br-bl { bottom: 12%; left: 12%;   border-right: 0; border-top: 0; }
.throne-medallion .br-br { bottom: 12%; right: 12%;  border-left: 0;  border-top: 0; }

.throne-medallion .throne-stage {
  position: relative;
  z-index: 2;
}

.throne-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin-bottom: 48px;
}

.throne-side {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: #CBD5E1;
}
.throne-side-left { text-align: right; }
.throne-side-right { text-align: left; }
.throne-year {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: #F4D470;
  font-weight: 600;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.throne-text {
  margin: 0;
  color: #E8E4D8;
  font-size: 14px;
  line-height: 1.75;
}

/* The stage holding the stool + halo rings */
.throne-stage {
  position: relative;
  width: 280px;
  height: 200px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 60px rgba(244,200,74,0.35));
}
.throne-svg {
  width: 240px;
  height: auto;
  position: relative;
  z-index: 3;
  animation: thronePulse 5s ease-in-out infinite;
}
@keyframes thronePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(244,200,74,0.4)); }
  50%      { transform: scale(1.025); filter: drop-shadow(0 0 36px rgba(244,200,74,0.65)); }
}

/* Concentric expanding halos behind the stool */
.throne-halo {
  position: absolute;
  border: 1px solid #F4C84A;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
}
.throne-halo-1 {
  width: 120px; height: 120px;
  animation: throneHalo 4.2s ease-out infinite;
}
.throne-halo-2 {
  width: 120px; height: 120px;
  animation: throneHalo 4.2s ease-out infinite;
  animation-delay: 1.4s;
}
.throne-halo-3 {
  width: 120px; height: 120px;
  animation: throneHalo 4.2s ease-out infinite;
  animation-delay: 2.8s;
}
@keyframes throneHalo {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

.throne-cap {
  font-family: var(--ff-serif);
  font-size: clamp(20px, 2.4vw, 30px);
  color: #F1F5F9;
  margin: 0 0 16px;
  line-height: 1.4;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.throne-cap strong {
  background: linear-gradient(180deg, #F5D547 0%, #C8A84E 60%, #8E6B14 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 700;
  filter: drop-shadow(0 2px 12px rgba(244,196,48,0.3));
}
.throne-cap em {
  font-style: italic;
  color: #CBD5E1;
}

.throne-meta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #94A3B8;
  margin-bottom: 36px;
}
.throne-meta strong { color: #F4D470; font-weight: 600; }
.throne-meta-divider {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(244,200,74,0.4);
}

.throne-cta-link {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F4D470;
  border-bottom: 1px solid rgba(244,200,74,0.35);
  padding: 4px 0;
  transition: color 0.2s, border-color 0.2s;
}
.throne-cta-link:hover {
  color: #FFE08A;
  border-color: #F4D470;
  text-decoration: none;
}
.throne-cta-link .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.throne-cta-link:hover .arrow { transform: translateX(4px); }

/* ─── Founder signature · the Ano touch ─── */
.throne-signature {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(244, 200, 74, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  width: 100%;
}
/* Twi proverb · upgraded to AAA+ ceremonial register (matches homepage duality anchor) */
.throne-twi {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #FFEFA8 0%, #F4DD8D 30%, #D6B355 65%, #9C7A2E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(244, 221, 141, 0.28));
  position: relative;
  padding-bottom: 18px;
}
.throne-twi em {
  font-style: italic;
  font-weight: 500;
}
/* Hand-drawn underline accent below the proverb */
.throne-twi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 320px;
  height: 1.4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244,221,141,0.8) 25%,
    #F4DD8D 50%,
    rgba(244,221,141,0.8) 75%,
    transparent 100%);
  border-radius: 2px;
  opacity: 0.85;
}
.throne-translation {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 6px;
  font-weight: 300;
  color: rgba(203, 213, 225, 0.9);
  text-transform: uppercase;
  margin: 18px 0 24px;
}
.throne-signoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.throne-sig-line {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #F4D470, transparent);
  margin-bottom: 8px;
}
.throne-sig-name {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 600;
  color: #F1F5F9;
  letter-spacing: 0.01em;
}
.throne-sig-role {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94A3B8;
}

@media (max-width: 640px) {
  .throne-signature { margin-top: 36px !important; padding-top: 26px !important; }
  .throne-twi { font-size: 18px !important; }
  .throne-translation { font-size: 13.5px !important; margin-bottom: 16px !important; }
  .throne-sig-name { font-size: 16px !important; }
  .throne-sig-role { font-size: 8.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .throne-orb, .throne-svg, .throne-halo { animation: none !important; }
}

@media (max-width: 1024px) {
  .throne-band { padding: 80px 0 !important; }
  .throne-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    max-width: 480px !important;
  }
  .throne-side-left, .throne-side-right { text-align: center !important; }
  .throne-stage { margin: 0 auto !important; }
}
@media (max-width: 640px) {
  .throne-band { padding: 56px 0 !important; }
  .throne-content { padding: 0 18px !important; }
  .throne-eyebrow { font-size: 9.5px !important; padding: 7px 14px !important; margin-bottom: 36px !important; }
  .throne-grid { gap: 28px !important; margin-bottom: 36px !important; }
  .throne-stage { width: 220px !important; height: 160px !important; }
  .throne-svg { width: 200px !important; }
  .throne-halo-1, .throne-halo-2, .throne-halo-3 { width: 100px !important; height: 100px !important; }
  .throne-cap { font-size: 18px !important; }
  .throne-meta { font-size: 10px !important; gap: 10px !important; }
  .throne-meta-divider { display: none !important; }
}


/* ─────────────────────────────────────────────────────────
 * CLOSING CTA · CSS-only dramatic dark band
 * Gradient mesh + texture · no external image dependency
 * ──────────────────────────────────────────────────────── */
.closing-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 20% 50%, #0F1E33 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, #142840 0%, transparent 50%),
    linear-gradient(180deg, #050B14 0%, #02060C 100%);
  border-top: 1px solid rgba(244,196,48,0.18);
  border-bottom: 1px solid rgba(244,196,48,0.18);
}
/* Top + bottom hairline gold seams */
.closing-cta::before,
.closing-cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244,196,48,0.55) 50%, transparent 100%);
  z-index: 4;
}
.closing-cta::before { top: 0; }
.closing-cta::after  { bottom: 0; }

.closing-mesh {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(110px);
  opacity: 0.6;
}
.closing-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.closing-orb-1 {
  width: 60vw; height: 60vw;
  top: -15%; left: -10%;
  background: radial-gradient(circle, #C8A84E 0%, transparent 60%);
  animation: closingOrb1 28s ease-in-out infinite alternate;
}
.closing-orb-2 {
  width: 55vw; height: 55vw;
  top: 10%; right: -10%;
  background: radial-gradient(circle, #0D9488 0%, transparent 60%);
  animation: closingOrb2 34s ease-in-out infinite alternate;
  opacity: 0.7;
}
.closing-orb-3 {
  width: 70vw; height: 70vw;
  bottom: -25%; left: 25%;
  background: radial-gradient(circle, #F4D470 0%, transparent 65%);
  animation: closingOrb3 40s ease-in-out infinite alternate;
  opacity: 0.55;
}
@keyframes closingOrb1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw,3vh) scale(1.18); } }
@keyframes closingOrb2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-7vw,4vh) scale(1.12); } }
@keyframes closingOrb3 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(-4vw,-3vh) scale(1.22); } }

.closing-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244,196,48,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,196,48,0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation: closingGridDrift 50s linear infinite;
}
@keyframes closingGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 88px 88px, 88px 88px; }
}

.closing-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
}

.closing-content {
  position: relative;
  z-index: 3;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  border: 1px solid rgba(244,196,48,0.32);
  border-radius: 999px;
  background: rgba(15, 30, 51, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 36px;
}

.closing-headline {
  font-family: var(--ff-serif);
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 32px;
  text-shadow: 0 6px 32px rgba(0,0,0,0.5);
}
.closing-headline em {
  font-style: italic;
  background: linear-gradient(180deg, #F5D547 0%, #C8A84E 55%, #8E6B14 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(244,196,48,0.22));
}

.closing-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  color: #CBD5E1;
  max-width: 720px;
  margin: 0 0 44px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.closing-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.closing-btn-primary {
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: #C8A84E;
  color: #0F1B2D;
  border-color: #C8A84E;
  box-shadow: 0 12px 36px rgba(244,196,48,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.closing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(244,196,48,0.4);
  background: #F5D547;
  text-decoration: none;
}
.closing-btn-primary .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.closing-btn-primary:hover .arrow { transform: translateX(4px); }

.closing-btn-ghost {
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: 0.06em;
  background: rgba(15, 27, 45, 0.4);
  border-color: rgba(244, 196, 48, 0.3);
  color: #F4D470;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.closing-btn-ghost:hover {
  background: rgba(15, 27, 45, 0.7);
  border-color: #C8A84E;
  color: #FFE08A;
  text-decoration: none;
}
.closing-btn-ghost .arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.9em;
}

@media (prefers-reduced-motion: reduce) {
  .closing-orb, .closing-grid { animation: none !important; }
}

@media (max-width: 1024px) {
  .closing-cta { padding: 80px 0; }
  .closing-headline { font-size: clamp(32px, 7vw, 56px); }
}
@media (max-width: 640px) {
  .closing-cta { padding: 56px 0; }
  .closing-eyebrow { font-size: 9.5px; padding: 7px 16px; margin-bottom: 24px; }
  .closing-headline { font-size: 28px; }
  .closing-sub { font-size: 15px; padding: 0 8px; }
  .closing-cta-row { flex-direction: column; gap: 10px; align-items: stretch; max-width: 280px; margin: 0 auto; width: 100%; }
  .closing-btn-primary, .closing-btn-ghost { text-align: center; padding: 14px 22px; }
}


/* ─── Closing CTA photo anchor (second photographic moment) ─── */
.photo-cta {
  height: auto;
  min-height: 600px;
  max-height: none;
  padding: 96px 0;
}
.photo-cta .photo-content {
  height: auto;
  align-items: center;
  text-align: center;
}
.photo-content-cta {
  align-items: center !important;
}
.photo-content-cta .photo-eyebrow {
  margin: 0 auto 28px;
}
.cta-headline {
  font-size: clamp(40px, 5.4vw, 78px) !important;
  text-align: center;
  margin: 0 auto 28px !important;
  max-width: 920px !important;
}
.photo-content-cta .photo-sub {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 720px;
}
.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-btn-primary {
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: var(--bl-gold-bright, #C8A84E);
  color: #0F1B2D;
  border-color: var(--bl-gold-bright, #C8A84E);
  box-shadow: 0 12px 36px rgba(244, 196, 48, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(244, 196, 48, 0.4);
  text-decoration: none;
}
.cta-btn-primary .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s;
}
.cta-btn-primary:hover .arrow { transform: translateX(4px); }

.cta-btn-ghost {
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: 0.06em;
  background: rgba(15, 27, 45, 0.4);
  border-color: rgba(244, 196, 48, 0.3);
  color: #F4D470;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cta-btn-ghost:hover {
  background: rgba(15, 27, 45, 0.6);
  border-color: var(--bl-gold-bright, #C8A84E);
  color: #FFE08A;
  text-decoration: none;
}
.cta-btn-ghost .arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.9em;
}

@media (max-width: 1024px) {
  .photo-cta { padding: 64px 0; min-height: 480px; }
  .cta-headline { font-size: clamp(32px, 7vw, 52px) !important; }
}
@media (max-width: 640px) {
  .photo-cta { padding: 48px 0; min-height: 420px; }
  .cta-headline { font-size: 28px !important; }
  .cta-row { flex-direction: column; gap: 10px; align-items: stretch; max-width: 280px; margin: 0 auto; }
  .cta-btn-primary, .cta-btn-ghost { text-align: center; padding: 14px 22px; }
}


/* ─── Marquee stat tail (preventing wrap of "of attested physical gold") ─── */
.cine-stat-tail {
  font-family: var(--ff-mono);
  font-size: 0.28em !important;
  font-weight: 500 !important;
  color: var(--text-mute) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  margin-left: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

/* Mobile responsive adjustments for light theme */
@media (max-width: 640px) {
  .photo-anchor { height: 50vh; min-height: 380px; }
  .photo-anchor .photo-headline { font-size: 28px; }
  .photo-anchor .photo-sub { font-size: 15px; }
  .body-light .builton-row { grid-template-columns: 1fr 1fr !important; }
  .body-light .resources { grid-template-columns: 1fr !important; }
}

/* ─── assets/ceremonial.css ─────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
 * AAA+ CEREMONIAL LAYER · VPAY Genesis · 2026-05-10
 *
 * Source-of-truth visual logic: deploy-flagship/whatsapp-hero.svg
 *
 * What this file does:
 *   Adds a royal struck-bronze "ceremonial" register on top of
 *   the existing institutional Brookfield base. Activates on
 *   hero medallions, the SOV node, the Sika Dwa Kofi throne,
 *   Physics Gate, Kommit, and any element explicitly opting in.
 *
 * What this file does NOT do:
 *   Touch body text accents, rule lines, navigation, footer
 *   chrome, or anything in the institutional baseline.
 *
 * Token contract:
 *   --gold-bright / --gold-royal / --gold-mid / --gold-rich /
 *   --gold-shadow      (defined in style.css :root)
 *   --void-top / --void-mid / --void-deep
 *   --centre-glow / --centre-glow-2 / --vignette
 *   --bl-gold-* mirror tokens for body-light contexts
 *   (defined in body-light.css :root)
 *
 * Load order (after style.css and body-light.css):
 *   <link rel="stylesheet" href="assets/ceremonial.css">
 * ──────────────────────────────────────────────────────── */


/* ═══════════════════ ATMOSPHERIC STAGE ═══════════════════ */

/* .stage-void · upgrade any dark hero to the WhatsApp-hero void treatment */
.stage-void {
  position: relative;
  background:
    radial-gradient(circle at 50% 48%,
      var(--void-top) 0%,
      var(--void-mid) 50%,
      var(--void-deep) 100%);
  isolation: isolate;
}
.stage-void::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    var(--centre-glow) 0%,
    var(--centre-glow-2) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.stage-void::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    transparent 58%,
    var(--vignette) 100%);
  pointer-events: none;
  z-index: 0;
}
.stage-void > * { position: relative; z-index: 1; }

/* .stage-void-motes · scattered gold dust through the void */
.stage-void-motes {
  position: relative;
}
.stage-void-motes::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(244, 221, 141, 0.22) 0.9px, transparent 1.4px),
    radial-gradient(circle, rgba(214, 179, 85, 0.16) 0.6px, transparent 1px),
    radial-gradient(circle, rgba(244, 221, 141, 0.28) 0.5px, transparent 0.9px),
    radial-gradient(circle, rgba(214, 179, 85, 0.20) 0.4px, transparent 0.7px);
  background-size: 200px 200px, 240px 220px, 180px 260px, 220px 180px;
  background-position: 32px 48px, 138px 92px, 78px 160px, 178px 22px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}


/* ═══════════════════ CEREMONIAL TYPOGRAPHY ═══════════════════ */

/* .royal-mark · letter-spaced wordmark for ceremonial section heads */
.royal-mark {
  font-family: var(--ff-ceremonial);
  font-size: clamp(14px, 1.1vw, 20px);
  letter-spacing: var(--tracking-royal);
  text-transform: none;
  font-weight: 500;
  color: var(--gold-royal);
  display: inline-block;
}
.body-light .royal-mark { color: var(--bl-gold-royal); }

.royal-mark-mini {
  font-family: var(--ff-ceremonial);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 400;
  color: var(--text-mute);
  text-transform: uppercase;
}
.body-light .royal-mark-mini { color: var(--bl-ink-mute); }

/* .twi-proverb · the Yɛn Sika anchor. Italic gold, hero-scale. */
.twi-proverb {
  font-family: var(--ff-ceremonial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 50px);
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: var(--gold-royal);
  text-align: center;
  position: relative;
}
.body-light .twi-proverb { color: var(--bl-gold-royal); }

/* Hand-drawn underline accent below proverbs (echoes the SVG curve) */
.twi-proverb::after {
  content: "";
  display: block;
  width: 60%;
  height: 1.4px;
  margin: 14px auto 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-mid) 20%,
    var(--gold-royal) 50%,
    var(--gold-mid) 80%,
    transparent 100%);
  border-radius: 2px;
  opacity: 0.8;
}
.body-light .twi-proverb::after {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--bl-gold-deep) 20%,
    var(--bl-gold-royal) 50%,
    var(--bl-gold-deep) 80%,
    transparent 100%);
}

.twi-translation {
  font-family: var(--ff-sans);
  font-size: 14px;
  letter-spacing: 6px;
  font-weight: 300;
  color: var(--text-mute);
  text-align: center;
  margin-top: 18px;
  text-transform: uppercase;
}
.body-light .twi-translation { color: var(--bl-ink-mute); }


/* ═══════════════════ ADINKRAHENE CEREMONIAL SEALS ═══════════════════ */

/* .adinkra-seal · the four-ring concentric symbol used as ceremonial mark */
.adinkra-seal {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
}
.adinkra-seal::before,
.adinkra-seal::after,
.adinkra-seal > .ring,
.adinkra-seal > .core {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1.4px solid currentColor;
}
.adinkra-seal::before { width: 100%; height: 100%; }
.adinkra-seal > .ring { width: 70%; height: 70%; border-width: 1.2px; }
.adinkra-seal::after  { width: 40%; height: 40%; border-width: 1px; }
.adinkra-seal > .core {
  width: 12%; height: 12%;
  background: currentColor;
  border: 0;
}

.adinkra-seal-lg { width: 36px; height: 36px; }
.adinkra-seal-xl { width: 60px; height: 60px; }


/* ═══════════════════ MEDALLION SYSTEM ═══════════════════ */

/* .medallion · circular ceremonial container — the Matter|Mind chassis */
.medallion {
  position: relative;
  width: clamp(280px, 36vw, 480px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
    rgba(26, 42, 64, 0) 0%,
    rgba(6, 16, 31, 0.7) 100%);
  isolation: isolate;
}

/* Medallion concentric rings */
.medallion::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid var(--gold-mid);
  opacity: 0.55;
}
.medallion::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 0.5px solid var(--gold-mid);
  opacity: 0.4;
}

/* Cardinal tick marks */
.medallion-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.medallion-ticks::before,
.medallion-ticks::after,
.medallion-ticks > .tick-x,
.medallion-ticks > .tick-y {
  content: "";
  position: absolute;
  background: var(--gold-royal);
  opacity: 0.85;
}
.medallion-ticks::before { /* top */
  top: 1.2%;     left: 50%;
  width: 1.5px;  height: 14px;
  transform: translateX(-50%);
}
.medallion-ticks::after  { /* bottom */
  bottom: 1.2%;  left: 50%;
  width: 1.5px;  height: 14px;
  transform: translateX(-50%);
}
.medallion-ticks > .tick-x { /* left */
  left: 1.2%;    top: 50%;
  width: 14px;   height: 1.5px;
  transform: translateY(-50%);
}
.medallion-ticks > .tick-y { /* right */
  right: 1.2%;   top: 50%;
  width: 14px;   height: 1.5px;
  transform: translateY(-50%);
}

/* Scan brackets at 4 corners */
.medallion-brackets {
  position: absolute;
  inset: 14%;
  pointer-events: none;
}
.medallion-brackets > span {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1.4px solid var(--gold-royal);
  opacity: 0.7;
}
.medallion-brackets > .bk-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.medallion-brackets > .bk-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.medallion-brackets > .bk-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.medallion-brackets > .bk-br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Body-light version */
.body-light .medallion {
  background: radial-gradient(circle at 50% 38%,
    rgba(184, 144, 44, 0) 0%,
    rgba(184, 144, 44, 0.06) 100%);
}
.body-light .medallion::before { border-color: var(--bl-gold-deep); opacity: 0.5; }
.body-light .medallion::after  { border-color: var(--bl-gold-deep); opacity: 0.35; }
.body-light .medallion-ticks::before,
.body-light .medallion-ticks::after,
.body-light .medallion-ticks > .tick-x,
.body-light .medallion-ticks > .tick-y { background: var(--bl-gold-royal); }
.body-light .medallion-brackets > span { border-color: var(--bl-gold-royal); }


/* ═══════════════════ MEDALLION LABEL BLOCK ═══════════════════ */

.medallion-label {
  margin-top: 24px;
  text-align: center;
}
.medallion-label .label-hero {
  font-family: var(--ff-ceremonial);
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 8px;
  font-weight: 600;
  color: var(--gold-bright);
  margin: 0;
}
.medallion-label .label-tag {
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 4px;
  font-weight: 500;
  color: var(--text-mute);
  margin-top: 10px;
  text-transform: uppercase;
}
.medallion-label .label-essence {
  font-family: var(--ff-ceremonial);
  font-size: 13px;
  font-style: italic;
  color: var(--text-dim);
  margin-top: 8px;
}

.body-light .medallion-label .label-hero    { color: var(--bl-gold-shadow); }
.body-light .medallion-label .label-tag     { color: var(--bl-ink-mute); }
.body-light .medallion-label .label-essence { color: var(--bl-ink-mute); }


/* ═══════════════════ STRUCK-METAL SOV NODE ═══════════════════ */

/* The imposing central node — same logic as the WhatsApp hero. */
.sov-node {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%,
    var(--gold-bright) 0%,
    var(--gold-royal) 18%,
    var(--gold-mid) 42%,
    var(--gold-rich) 72%,
    var(--gold-shadow) 100%);
  border: 2px solid var(--gold-royal);
  box-shadow:
    0 0 0 6px rgba(244, 221, 141, 0.06),
    0 0 0 12px rgba(244, 221, 141, 0.03),
    0 6px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 250, 216, 0.55),
    inset 0 -1px 2px rgba(63, 46, 16, 0.5);
}
.sov-node::before {
  /* Top crescent highlight */
  content: "";
  position: absolute;
  top: 12%; left: 18%; right: 18%;
  height: 30%;
  border-radius: 50% 50% 0 0;
  border-top: 1.4px solid var(--gold-bright);
  opacity: 0.85;
}
.sov-node::after {
  /* Inscription */
  content: "SOV";
  font-family: var(--ff-ceremonial);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1.5px;
  color: var(--gold-shadow);
  text-shadow: 0 1px 0 rgba(255, 250, 216, 0.4);
}

.sov-node-lg { width: 120px; height: 120px; }
.sov-node-lg::after { font-size: 24px; letter-spacing: 2px; }
.sov-node-sm { width: 60px; height: 60px; }
.sov-node-sm::after { font-size: 13px; letter-spacing: 1px; }


/* ═══════════════════ CEREMONIAL DIVIDERS ═══════════════════ */

.gold-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-rich) 20%,
    var(--gold-royal) 50%,
    var(--gold-rich) 80%,
    transparent 100%);
  opacity: 0.85;
}
.body-light .gold-rule {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--bl-gold-deep) 20%,
    var(--bl-gold-royal) 50%,
    var(--bl-gold-deep) 80%,
    transparent 100%);
  opacity: 0.9;
}

/* Adinkrahene seal divider — for ceremonial section breaks */
.adinkra-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 32px auto;
  max-width: 480px;
}
.adinkra-divider .gold-rule { flex: 1; }
.adinkra-divider .adinkra-seal { color: var(--gold-mid); flex: 0 0 auto; }
.body-light .adinkra-divider .adinkra-seal { color: var(--bl-gold-deep); }


/* ═══════════════════ STRUCK GOLD INGOT (Matter) ═══════════════════ */

.struck-ingot {
  position: relative;
  width: 78%;
  aspect-ratio: 2.3 / 1;
  background: var(--grad-gold-bar);
  border: 1.4px solid var(--gold-shadow);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255, 250, 216, 0.4) inset,
    0 -2px 4px rgba(63, 46, 16, 0.5) inset,
    0 8px 18px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  transform: rotate(-7deg);
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
.medallion:hover .struck-ingot { transform: rotate(-4deg) scale(1.02); }

.struck-ingot::before {
  /* Top highlight band */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26%;
  background: linear-gradient(180deg,
    rgba(255, 250, 216, 0.55) 0%,
    rgba(255, 250, 216, 0) 100%);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

.struck-ingot .adinkra-seal {
  color: var(--gold-shadow);
  opacity: 0.55;
  width: 56px;
  height: 56px;
}

.struck-ingot .ingot-prov {
  position: absolute;
  bottom: 14%;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--gold-shadow);
  opacity: 0.85;
}

.body-light .struck-ingot {
  background: var(--bl-grad-gold-bar);
  border-color: var(--bl-gold-shadow);
  box-shadow:
    0 1px 0 rgba(255, 250, 216, 0.35) inset,
    0 -2px 4px rgba(63, 46, 16, 0.5) inset,
    0 6px 14px rgba(15, 27, 45, 0.18);
}
.body-light .struck-ingot .adinkra-seal,
.body-light .struck-ingot .ingot-prov { color: var(--bl-gold-shadow); }


/* ═══════════════════ KOMMIT APERTURE (Mind) ═══════════════════ */

.kommit-aperture {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.kommit-aperture > .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold-mid);
}
.kommit-aperture > .ring-1 { inset: 0;     opacity: 0.45; }
.kommit-aperture > .ring-2 { inset: 9%;    opacity: 0.55; border-width: 0.9px; }
.kommit-aperture > .ring-3 { inset: 19%;   opacity: 0.7;  border-width: 1.1px; border-color: var(--gold-royal); }
.kommit-aperture > .ring-4 { inset: 29%;   opacity: 0.85; border-width: 1.4px; border-color: var(--gold-royal); }
.kommit-aperture > .ring-5 { inset: 39%;   opacity: 1;    border-width: 1.6px; border-color: var(--gold-bright); }

.kommit-aperture > .core {
  position: absolute;
  inset: 44%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(45deg,
      transparent 0px, transparent 5px,
      rgba(214, 179, 85, 0.4) 5px, rgba(214, 179, 85, 0.4) 5.5px),
    repeating-linear-gradient(-45deg,
      transparent 0px, transparent 5px,
      rgba(214, 179, 85, 0.4) 5px, rgba(214, 179, 85, 0.4) 5.5px);
  border: 0.9px solid var(--gold-mid);
}

.kommit-aperture > .eye {
  position: relative;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--gold-bright) 0%,
    var(--gold-royal) 35%,
    var(--gold-rich) 100%);
  border: 1.4px solid var(--gold-royal);
  box-shadow:
    0 0 22px rgba(244, 221, 141, 0.55),
    0 0 8px rgba(244, 221, 141, 0.85),
    inset 0 0 6px rgba(255, 250, 216, 0.7);
  z-index: 2;
}
.kommit-aperture > .eye::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
}

/* Body-light version */
.body-light .kommit-aperture > .ring { border-color: var(--bl-gold-deep); }
.body-light .kommit-aperture > .ring-3,
.body-light .kommit-aperture > .ring-4 { border-color: var(--bl-gold-royal); }
.body-light .kommit-aperture > .ring-5 { border-color: var(--bl-gold-shadow); }
.body-light .kommit-aperture > .core {
  background:
    repeating-linear-gradient(45deg,
      transparent 0px, transparent 5px,
      rgba(115, 94, 42, 0.5) 5px, rgba(115, 94, 42, 0.5) 5.5px),
    repeating-linear-gradient(-45deg,
      transparent 0px, transparent 5px,
      rgba(115, 94, 42, 0.5) 5px, rgba(115, 94, 42, 0.5) 5.5px);
  border-color: var(--bl-gold-deep);
}
.body-light .kommit-aperture > .eye {
  background: radial-gradient(circle at 50% 50%,
    var(--bl-gold-bright-r) 0%,
    var(--bl-gold-royal) 35%,
    var(--bl-gold-shadow) 100%);
  border-color: var(--bl-gold-shadow);
  box-shadow:
    0 0 14px rgba(184, 144, 44, 0.4),
    inset 0 0 4px rgba(214, 179, 85, 0.6);
}


/* ═══════════════════ DUALITY ROW (Matter | Mind) ═══════════════════ */

.duality-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 80px);
  max-width: 1100px;
  margin: 0 auto;
}
.duality-row .duality-side { display: grid; place-items: center; }
.duality-row .duality-bind {
  display: grid;
  place-items: center;
  position: relative;
}
.duality-row .duality-bind::before,
.duality-row .duality-bind::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1.4px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-royal) 50%,
    transparent 100%);
  width: clamp(20px, 4vw, 80px);
}
.duality-row .duality-bind::before { right: 100%; }
.duality-row .duality-bind::after  { left: 100%; }

.body-light .duality-row .duality-bind::before,
.body-light .duality-row .duality-bind::after {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--bl-gold-royal) 50%,
    transparent 100%);
}

@media (max-width: 720px) {
  .duality-row {
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center;
  }
  .duality-row .duality-bind { order: 2; }
  .duality-row .duality-side:first-child { order: 1; }
  .duality-row .duality-side:last-child  { order: 3; }
  .duality-row .duality-bind::before,
  .duality-row .duality-bind::after { display: none; }
}


/* ═══════════════════ CEREMONIAL HEADER MARK ═══════════════════ */

.ceremonial-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.ceremonial-mark .seal-line {
  width: 100px;
  height: 0.5px;
  background: var(--gold-mid);
  opacity: 0.6;
}
.ceremonial-mark .sublabel {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 400;
}
.body-light .ceremonial-mark .seal-line { background: var(--bl-gold-deep); }
.body-light .ceremonial-mark .sublabel { color: var(--bl-ink-mute); }


/* ═══════════════════ FRS · DEPRECATED ═══════════════════
   Internal stanza pattern · 2026-05-23 retired from all public
   surfaces. CSS retained inert (no markup matches) for one cycle
   to keep ceremonial.css diff small; can be deleted next pass.
   ─────────────────────────────────────────────────────── */
.five-rings-stanza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 38px 24px 36px;
  margin: 64px auto 0;
  max-width: 760px;
  text-align: center;
  position: relative;
}
.five-rings-stanza .frs-kanji {
  font-family: var(--ff-ceremonial, Georgia, serif);
  font-size: 22px;
  letter-spacing: 6px;
  color: var(--gold-mid);
  opacity: 0.82;
  line-height: 1;
}
.five-rings-stanza .frs-eyebrow {
  font-family: var(--ff-mono, 'SF Mono', monospace);
  font-size: 10px;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  color: var(--gold-royal);
  font-weight: 600;
}
.five-rings-stanza .frs-rule {
  width: 96px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
  opacity: 0.7;
  margin: 4px 0;
}
.five-rings-stanza .frs-line {
  font-family: var(--ff-ceremonial, Georgia, 'Iowan Old Style', serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0.4px;
  color: var(--text);
  max-width: 620px;
}
.five-rings-stanza .frs-attrib {
  font-family: var(--ff-mono, 'SF Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--text-dim, #A8A496);
  opacity: 0.82;
}
/* Body-light (cream / paper) variant for compliance + diligence + technical */
.body-light .five-rings-stanza .frs-kanji,
.body-light .five-rings-stanza .frs-eyebrow {
  color: var(--bl-gold-deep, #9C7A2E);
}
.body-light .five-rings-stanza .frs-rule {
  background: linear-gradient(90deg, transparent, var(--bl-gold-deep, #9C7A2E), transparent);
}
.body-light .five-rings-stanza .frs-line { color: var(--bl-ink, #1A2233); }
.body-light .five-rings-stanza .frs-attrib { color: var(--bl-ink-mute, #57647A); }

/* BUG FIX 2026-05-16 · `.tone-dark` modifier overrides body-light text
   colors when the stanza sits on a DARK section (e.g., Physics Gate hero
   inside the body-light page). Without this, the italic line resolved to
   --bl-ink (#1A2233) on a void-navy background — illegible. The modifier
   wins by being more specific than `.body-light .five-rings-stanza ...`. */
.body-light .five-rings-stanza.tone-dark .frs-kanji,
.five-rings-stanza.tone-dark .frs-kanji,
.body-light .five-rings-stanza.tone-dark .frs-eyebrow,
.five-rings-stanza.tone-dark .frs-eyebrow {
  color: var(--gold-royal, #F4DD8D);
  text-shadow: 0 0 18px rgba(244, 221, 141, 0.22);
}
.body-light .five-rings-stanza.tone-dark .frs-rule,
.five-rings-stanza.tone-dark .frs-rule {
  background: linear-gradient(90deg, transparent, var(--gold-royal, #F4DD8D), transparent);
  opacity: 0.85;
}
.body-light .five-rings-stanza.tone-dark .frs-line,
.five-rings-stanza.tone-dark .frs-line {
  color: #E8E5DC;
  text-shadow: 0 0 12px rgba(15, 27, 45, 0.6);
}
.body-light .five-rings-stanza.tone-dark .frs-attrib,
.five-rings-stanza.tone-dark .frs-attrib {
  color: rgba(232, 229, 220, 0.72);
}
/* Mobile */
@media (max-width: 640px) {
  .five-rings-stanza { padding: 28px 16px; margin-top: 44px; }
  .five-rings-stanza .frs-kanji { font-size: 18px; letter-spacing: 4px; }
  .five-rings-stanza .frs-line { font-size: 16px; }
  .five-rings-stanza .frs-eyebrow { font-size: 9px; letter-spacing: 3.2px; }
}


/* ═══════════════════ REDUCED MOTION ═══════════════════ */

@media (prefers-reduced-motion: reduce) {
  .struck-ingot,
  .medallion:hover .struck-ingot { transition: none; }
  .kommit-aperture > .eye { box-shadow:
    0 0 8px rgba(244, 221, 141, 0.35),
    inset 0 0 4px rgba(255, 250, 216, 0.6);
  }
}

/* ─── assets/mobile-fixes.css ─────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
 * Mobile responsive fixes · comprehensive pass
 * Phone (<640px) and tablet (641–1024px) overrides for every
 * grid / table / card layout that overflows on small screens.
 * ──────────────────────────────────────────────────────── */


/* ═══════════ TABLET (641-1024px) ═══════════ */
@media (max-width: 1024px) {

  /* Hero · cinematic proof strip → 2-column */
  .cine-proof-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 0 !important;
    padding: 24px 16px !important;
  }
  .cine-proof-cell {
    border-right: none !important;
    padding: 0 14px !important;
  }
  .cine-proof-cell:nth-child(odd) {
    border-right: 1px solid rgba(244,196,48,0.10) !important;
  }

  /* Hero · marquee stat block stacks tighter */
  .cine-marquee-stat {
    padding: 22px 24px !important;
    margin-bottom: 36px !important;
  }
  .cine-stat-block {
    flex-wrap: wrap !important;
    gap: 14px !important;
    justify-content: center !important;
  }
  .cine-stat-tail {
    display: block !important;
    margin: 8px 0 0 !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Context band · grid stacks */
  #context > .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  #context > .wrap > div:first-child > div:nth-child(2) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  /* Built-on · 3-column on tablet */
  .builton-inner { grid-template-columns: 1fr !important; gap: 20px !important; padding: 0 24px !important; }
  .builton-row { grid-template-columns: repeat(3, 1fr) !important; }

  /* Resources · 2-column on tablet */
  .resources { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

  /* Tile grid · 2-column */
  .tile-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

  /* Three paths · stack */
  .paths { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Standing · stack */
  .standing-grid { grid-template-columns: 1fr !important; gap: 18px !important; max-width: 600px !important; }

  /* Footer · 2-column */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}


/* ═══════════ PHONE (≤640px) ═══════════ */
@media (max-width: 640px) {

  /* General wrap padding tightening */
  .wrap, .nav-row, .ticker-head { padding-left: 18px !important; padding-right: 18px !important; }

  /* Top tape: hide most items, keep the one anchor */
  .tape-row {
    padding: 8px 18px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 18px !important;
    scrollbar-width: none;
  }
  .tape-row::-webkit-scrollbar { display: none; }
  .tape-row .item { font-size: 9.5px !important; flex-shrink: 0; }

  /* Nav · tighter */
  .nav-row { height: 60px !important; }
  .brand-text .b1 { font-size: 14px !important; }
  .brand-text .b2 { font-size: 8.5px !important; }
  .nav-mid { display: none !important; }
  .nav-status { font-size: 9px !important; padding: 5px 10px !important; }

  /* ── Hero ── */
  .hero-cinematic { padding: 56px 0 40px !important; min-height: auto !important; }
  .cine-eyebrow { font-size: 9px !important; padding: 7px 14px !important; margin-bottom: 22px !important; }
  .cine-headline { font-size: clamp(36px, 11vw, 56px) !important; margin-bottom: 22px !important; }
  .cine-sub { font-size: 14.5px !important; margin-bottom: 28px !important; padding: 0 8px !important; }
  .cine-marquee-stat { padding: 16px 18px !important; margin-bottom: 28px !important; }
  .cine-stat-num { font-size: 26px !important; }
  .cine-stat-num .op { font-size: 13px !important; }
  .cine-stat-eq { font-size: 22px !important; margin: 0 4px !important; }
  .cine-stat-tail { font-size: 9px !important; margin-top: 4px !important; }
  .cine-proof-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px 0 !important;
    padding: 22px 12px !important;
    margin-bottom: 36px !important;
  }
  .cine-proof-cell { padding: 0 10px !important; }
  .cine-proof-cell .num { font-size: 20px !important; margin-bottom: 6px !important; }
  .cine-proof-cell .lbl { font-size: 9px !important; }
  .cine-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-bottom: 36px !important;
  }
  .cine-cta-primary, .cine-cta-ghost {
    text-align: center !important;
    padding: 13px 22px !important;
    width: 100% !important;
  }

  /* ── Live ticker ── */
  .ticker-head {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
    padding: 9px 18px 7px !important;
  }
  .ticker-title { font-size: 9.5px !important; }
  .ticker-meta { font-size: 8.5px !important; }
  .ticker-item { gap: 12px !important; padding: 6px 18px 6px 0 !important; margin-right: 18px !important; font-size: 11px !important; }
  .ticker-item .ti-meta { font-size: 10px !important; }
  .ticker-item .ti-time { font-size: 10px !important; }

  /* ── Photo anchor ── */
  .photo-anchor { height: auto !important; min-height: 360px !important; max-height: none !important; padding: 56px 0 !important; }
  .photo-anchor .photo-content { padding: 0 18px !important; }
  .photo-anchor .photo-eyebrow { font-size: 9.5px !important; margin-bottom: 18px !important; }
  .photo-anchor .photo-headline { font-size: 26px !important; line-height: 1.15 !important; margin-bottom: 14px !important; }
  .photo-anchor .photo-sub { font-size: 14px !important; }

  /* ── Body sections ── */
  .body-light .section,
  .body-light .section-sm {
    padding: 56px 0 !important;
  }
  .body-light h2 { font-size: clamp(26px, 6vw, 36px) !important; line-height: 1.1 !important; }
  .body-light .section-head { margin-bottom: 32px !important; }
  .body-light .section-head p { font-size: 15px !important; }

  /* Context band */
  #context { padding: 40px 0 !important; }
  #context > .wrap > div:first-child { gap: 22px !important; }
  #context > .wrap > div:first-child > div:nth-child(2) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  #context > .wrap > div:first-child > div:nth-child(2) > div {
    padding: 12px 10px !important;
  }
  #context > .wrap > div:first-child h3 {
    font-size: 22px !important;
    max-width: none !important;
  }
  #context > .wrap > p {
    font-size: 10.5px !important;
    margin-top: 18px !important;
    padding: 0 12px !important;
  }

  /* Tile grid · 1-col */
  .tile-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .body-light .tile { padding: 22px !important; }
  .body-light .tile h3 { font-size: 16px !important; }
  .body-light .tile p { font-size: 13.5px !important; }

  /* Flow diagram wrap · tighter padding */
  .flow-wrap { padding: 32px 14px !important; }

  /* ── Ledger table → card list on mobile ── */
  .ledger-table-shell { overflow: visible !important; border-radius: var(--radius) !important; }
  .ledger-table { display: block !important; min-width: 0 !important; }
  .ledger-table thead { display: none !important; }
  .ledger-table tbody, .ledger-table tr, .ledger-table td { display: block !important; }
  .ledger-table tr {
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--bl-rule) !important;
    background: var(--bl-bg-card);
    position: relative;
  }
  .ledger-table tr:last-child { border-bottom: none !important; }
  .ledger-table td {
    padding: 4px 0 !important;
    border-bottom: none !important;
    font-size: 13px !important;
  }
  /* Add labels via data attributes */
  .ledger-table td.name {
    font-family: var(--ff-serif);
    font-size: 16px !important;
    color: var(--bl-ink) !important;
    font-weight: 600;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--bl-rule) !important;
  }
  .ledger-table td:nth-child(2) {
    color: var(--bl-ink-mute) !important;
    font-size: 12.5px !important;
    line-height: 1.45;
    margin-bottom: 8px !important;
  }
  .ledger-table td.addr {
    font-family: var(--ff-mono);
    font-size: 11.5px !important;
  }
  .ledger-table td.addr a {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(184, 144, 44, 0.06);
    border-radius: 3px;
  }
  .ledger-table td:last-child {
    margin-top: 8px !important;
  }
  .ledger-table .verified {
    display: inline-flex;
    padding: 3px 10px;
    background: rgba(31, 224, 127, 0.08);
    border-radius: 999px;
    font-size: 10.5px !important;
    letter-spacing: 0.12em;
  }
  .ledger-foot {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    align-items: flex-start !important;
    font-size: 10.5px !important;
  }
  .ledger-foot span { width: 100%; }

  /* Built-on · 1-col */
  .builton { padding: 22px 0 !important; margin-top: 36px !important; }
  .builton-inner { gap: 14px !important; padding: 0 18px !important; }
  .builton-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .builton-cell { padding: 10px 12px !important; }
  .builton-cell .name { font-size: 12.5px !important; }
  .builton-cell .role { font-size: 8.5px !important; }
  .builton-label { font-size: 9.5px !important; }

  /* Three paths · stack */
  .paths { grid-template-columns: 1fr !important; gap: 12px !important; }
  .body-light .path { padding: 26px 22px !important; min-height: auto !important; }
  .body-light .path h3 { font-size: 19px !important; }
  .body-light .path p { font-size: 13.5px !important; }

  /* Standing · stack */
  .standing-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .body-light .standing-card { padding: 24px !important; }
  .body-light .standing-card h3 { font-size: 19px !important; }
  .body-light .standing-card p { font-size: 13.5px !important; }

  /* Resources · 1-col */
  .resources { grid-template-columns: 1fr !important; gap: 10px !important; }
  .body-light .resource { padding: 16px 18px !important; }

  /* Closing CTA */
  .closing-cta { padding: 56px 0 !important; }
  .closing-content { padding: 0 18px !important; }
  .closing-eyebrow { font-size: 9.5px !important; padding: 7px 14px !important; margin-bottom: 22px !important; }
  .closing-headline { font-size: 28px !important; line-height: 1.12 !important; margin-bottom: 18px !important; }
  .closing-sub { font-size: 14.5px !important; margin-bottom: 28px !important; }
  .closing-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  .closing-btn-primary, .closing-btn-ghost {
    text-align: center !important;
    padding: 13px 22px !important;
    width: 100% !important;
  }

  /* Footer */
  .footer { padding: 40px 0 28px !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 32px !important;
    padding: 0 18px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 22px 18px 0 !important;
    font-size: 9.5px !important;
  }
  .footer-meta { font-size: 13px !important; }

  /* Section eyebrow flow line shorter on mobile */
  .section-eyebrow-flow::before { width: 32px !important; }
}


/* ═══════════ Very small phone (<380px) ═══════════ */
@media (max-width: 380px) {
  .cine-headline { font-size: 32px !important; }
  .closing-headline { font-size: 24px !important; }
  .photo-anchor .photo-headline { font-size: 22px !important; }
  .body-light h2 { font-size: 24px !important; }

  .cine-proof-cell .num { font-size: 18px !important; }
  #context > .wrap > div:first-child > div:nth-child(2) > div .counter,
  #context > .wrap > div:first-child > div:nth-child(2) > div div:first-child {
    font-size: 22px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * AAA+ CEREMONIAL LAYER · mobile parity pass · added 2026-05-17
 * The AAA+ updates shipped 2026-05-10 (Two Covenants block, Physics Gate hero,
 * Kommit hero, Anokye throne) were built at desktop scale. Their inline
 * <style> blocks in index.html / technical.html set fixed clamp() floors of
 * 240px that overflow on phones <390px wide. These rules bring mobile parity
 * without touching the desktop appearance — they only fire ≤640px.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Two Covenants block (index.html · .duality-section) ── */
  /* Mini-medallions overflow viewport at desktop floor — pull them in. */
  .mini-medallion {
    width: clamp(180px, 62vw, 240px) !important;
    height: clamp(180px, 62vw, 240px) !important;
    margin: 0 auto !important;
  }
  .mini-ingot,
  .mini-aperture {
    transform: scale(0.85) !important;
  }
  .side-label  { font-size: 11px !important; letter-spacing: 2px !important; }
  .side-tag    { font-size: 9px  !important; }
  .side-essence{ font-size: 12px !important; line-height: 1.4 !important; }
  .sov-node-bridge {
    width: clamp(48px, 14vw, 64px) !important;
    height: clamp(48px, 14vw, 64px) !important;
  }
  .duality-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center !important;
  }

  /* ── Physics Gate hero medallion (technical.html#physics-gate) ── */
  .physics-medallion {
    width: clamp(180px, 58vw, 220px) !important;
    height: clamp(180px, 58vw, 220px) !important;
    margin: 0 auto !important;
  }
  .physics-hero::before {
    width: 280px !important;
    height: 280px !important;
  }
  .struck-ingot {
    transform: rotate(7deg) scale(0.78) !important;
  }
  .physics-hero .royal-mark,
  .kommit-hero .royal-mark {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    letter-spacing: 4px !important;
  }
  .physics-hero .hero-essence,
  .kommit-hero .hero-essence {
    font-size: 13px !important;
    padding: 0 16px !important;
  }

  /* ── Kommit hero medallion (technical.html#kommit) ── */
  .kommit-medallion {
    width: clamp(180px, 58vw, 220px) !important;
    height: clamp(180px, 58vw, 220px) !important;
    margin: 0 auto !important;
  }
  .kommit-hero::before {
    width: 280px !important;
    height: 280px !important;
  }
  .kommit-aperture-hero { transform: scale(0.82) !important; }
  .kommit-aperture-hero .hash,
  .kommit-medallion .hash { font-size: 7px !important; }
  /* Hide corner hash labels on narrow phones — they clip the viewport */
  .kommit-medallion .hash-tr,
  .kommit-medallion .hash-br { display: none !important; }

  /* ── NANANOM Council · Anokye throne card (technical.html#nananom) ── */
  /* 36px inline padding is too tight on 320-390px phones. */
  .god-card.anokye {
    padding: 22px 18px !important;
  }
  .god-card.anokye .gname .g-name {
    font-size: 20px !important;
  }
  .god-card.anokye .role-tag {
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }
  /* Council seat numbers shouldn't dominate on small cards */
  .god-card[data-seat]::after {
    font-size: 9px !important;
    bottom: 6px !important;
    right: 8px !important;
  }

  /* ── Heritage throne · Twi proverb (heritage.html · .throne-twi) ── */
  .throne-twi {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    line-height: 1.3 !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
  }
  .throne-translation {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
  }

  /* ── Ceremonial covenant marks (compliance + diligence) ── */
  /* Already mobile-safe per audit, but tighten letter-spacing for visual rhythm */
  .ceremonial-mark .royal-mark {
    font-size: 13px !important;
    letter-spacing: 3.5px !important;
  }
  .adinkra-seal {
    width: 20px !important;
    height: 20px !important;
  }

  /* ── Section ceremonial headers (.nananom-ceremony) ── */
  .nananom-ceremony .royal-mark {
    font-size: clamp(20px, 5.6vw, 28px) !important;
  }
  .nananom-ceremony .sublabel {
    font-size: 10px !important;
    padding: 0 12px !important;
  }
}

/* ─── assets/sn-override.css ─────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   ServiceNow-inspired skin · EcoVent Africa · VPAY Genesis
   Loaded last — overrides all prior layers.
   Design language: dark hero, clean alternating sections,
   Inter typography, pill CTAs, generous white space.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ── */
:root {
  --sn-black:       #080808;
  --sn-dark:        #111111;
  --sn-card-dark:   #181818;
  --sn-border-dark: rgba(255,255,255,0.07);
  --sn-white:       #FFFFFF;
  --sn-offwhite:    #F7F7F7;
  --sn-grey:        #EDEDED;
  --sn-gold:        #C8A84E;
  --sn-gold-bright: #E8C96A;
  --sn-gold-glow:   rgba(200,168,78,0.18);
  --sn-muted-d:     rgba(255,255,255,0.60);
  --sn-muted-l:     #666666;
  --sn-pill:        100px;
  --sn-card-r:      16px;
  --sn-shadow:      0 1px 3px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.07);
  --sn-shadow-h:    0 4px 12px rgba(0,0,0,0.08), 0 24px 64px rgba(0,0,0,0.13);
  --sn-pad:         120px 0;
  --sn-pad-md:      88px 0;
  --sn-font:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── 2. GLOBAL TYPOGRAPHY ── */
body {
  font-family: var(--sn-font) !important;
  background: var(--sn-black) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sn-font) !important;
  letter-spacing: -0.03em !important;
}

p, a, span, li, div, button, input, label {
  font-family: var(--sn-font) !important;
}

/* ── 3. SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--sn-black); }
::-webkit-scrollbar-thumb { background: rgba(200,168,78,0.3); border-radius: 3px; }

/* ── 4. TAPE BAR ── */
.tape {
  background: #0F0F0F !important;
  border-bottom: 1px solid rgba(200,168,78,0.12) !important;
}
.tape .item {
  font-family: var(--sn-font) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.5) !important;
  text-transform: none !important;
}

/* ── 5. NAVIGATION ── */
.nav {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease !important;
}

.nav.sn-scrolled {
  background: rgba(8,8,8,0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) !important;
}

.nav-row {
  height: 70px !important;
  padding: 0 clamp(24px, 3vw, 48px) !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.brand-text .b1 {
  font-family: var(--sn-font) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.brand-text .b2 {
  font-family: var(--sn-font) !important;
  font-size: 9.5px !important;
  opacity: 0.45 !important;
  letter-spacing: 0.02em !important;
}

.nav-mid { display: flex !important; gap: 4px !important; }
/* Hide hamburger when nav-mid is forced visible (641px+) */
@media (min-width: 641px) { .nav-burger { display: none !important; } }

.nav-mid a {
  font-family: var(--sn-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.75) !important;
  padding: 7px 14px !important;
  border-radius: var(--sn-pill) !important;
  transition: color 0.2s, background 0.2s !important;
  white-space: nowrap !important;
}
.nav-mid a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}
.nav-mid a.active {
  color: var(--sn-gold) !important;
  background: rgba(200,168,78,0.08) !important;
}

/* Nav CTA pill */
.sn-nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 9px 22px !important;
  background: var(--sn-gold) !important;
  color: #000 !important;
  font-family: var(--sn-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--sn-pill) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.2s, transform 0.15s !important;
}
.sn-nav-cta:hover {
  background: var(--sn-gold-bright) !important;
  transform: translateY(-1px) !important;
}

.nav-status {
  font-family: var(--sn-font) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.02em !important;
}

/* ── 6. HERO ── */
.hero-cinematic {
  background: var(--sn-black) !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* Hide heavy canvas decoration — KEEP the orb mesh (gold flow layer) ·
   2026-05-17 update: orbs were globally hidden which killed the ambient
   motion the hero needs to feel "alive like KKR". Now the orbs are
   allowed to render (with the boosted 0.92 opacity / 64px blur from
   hero-globe.css) and the new .cine-gold-flow ribbon layer sits above. */
.cine-grid,
.cine-particles,
.hash-rain,
.cine-vignette,
.adinkrahene-watermark {
  display: none !important;
}

/* Subtle noise texture instead */
.hero-cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(200,168,78,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 60%, rgba(200,168,78,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.cine-content {
  position: relative !important;
  z-index: 1 !important;
  /* Padding tightened 2026-05-17 · was 160px/80px which left the
     badge floating 160px below the nav and pushed CTAs below the fold
     on standard desktops. New padding fits the full content stack
     (badge → headline → sub → coin → CTAs) into one viewport. */
  padding: 48px clamp(24px, 4vw, 80px) 40px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  /* Center the entire stack vertically within the 100vh hero */
  min-height: calc(100vh - 88px) !important;
  justify-content: center !important;
}

.cine-eyebrow { order: 1 !important; }
.cine-headline { order: 2 !important; }
.cine-sub { order: 3 !important; }

.cine-eyebrow {
  font-family: var(--sn-font) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sn-gold) !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cine-headline {
  font-family: var(--sn-font) !important;
  /* Ceiling reduced from 84px → 76px so the 2-line "Verified gold. /
     On-chain." headline still feels massive but the CTAs land above
     the fold on a 900px viewport. */
  font-size: clamp(44px, 5.4vw, 76px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.0 !important;
  color: #FFFFFF !important;
  margin-bottom: 18px !important;
}
.cine-headline .line-1,
.cine-headline .line-2 {
  display: block !important;
}

.cine-sub {
  font-family: var(--sn-font) !important;
  font-size: clamp(15px, 1.5vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.62) !important;
  max-width: 620px !important;
  margin: 0 auto 24px !important;
  text-align: center !important;
  padding: 0 16px !important;
  text-wrap: balance !important;
}

/* CTA row */
.cine-cta-row {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 64px !important;
}

/* Primary pill CTA */
.btn-primary, .cine-cta-primary,
a.btn-primary, a.cine-cta-primary,
button.btn-primary {
  background: var(--sn-gold) !important;
  color: #000 !important;
  border: none !important;
  border-radius: var(--sn-pill) !important;
  font-family: var(--sn-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
  cursor: pointer !important;
}
.btn-primary:hover, .cine-cta-primary:hover {
  background: var(--sn-gold-bright) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 36px var(--sn-gold-glow) !important;
}

/* Ghost pill CTA */
.btn-ghost, .cine-cta-ghost,
a.btn-ghost, a.cine-cta-ghost {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  border-radius: var(--sn-pill) !important;
  font-family: var(--sn-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 13px 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: border-color 0.2s, color 0.2s, transform 0.15s !important;
}
.btn-ghost:hover, .cine-cta-ghost:hover {
  border-color: rgba(255,255,255,0.65) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Hero proof strip · 4 stat cells centered in the viewport */
.cine-proof-strip {
  display: flex !important;
  gap: 40px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-top: 36px !important;
  margin: 0 auto !important;
  max-width: 1080px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-bottom: none !important;
  background: transparent !important;
}

.cine-proof-cell {
  text-align: center !important;
  min-width: 140px !important;
}

.cine-proof-cell .num {
  font-family: var(--sn-font) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
}
.cine-proof-cell .suffix {
  font-size: 18px !important;
}
.cine-proof-cell .lbl {
  font-family: var(--sn-font) !important;
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.4) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}

/* Scroll cue */
.cine-scroll-cue {
  display: none !important;
}

/* Coin — centred hero visual, sits between sub-text and CTAs */
.cine-marquee-stat {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  order: 4 !important;
}

.cine-stat-block {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Move CTA and proof below the coin */
.cine-cta-row { order: 5 !important; }
.cine-proof-strip { order: 6 !important; }

/* Hero coin stat equation — hide the formula text beside coin */
.cine-stat-eq,
.cine-stat-num {
  display: none !important;
}

/* ── 7. LIVE TICKER ── */
.live-ticker-shell {
  background: #0C0C0C !important;
  border-top: 1px solid rgba(200,168,78,0.10) !important;
  border-bottom: 1px solid rgba(200,168,78,0.10) !important;
}
.ticker-title {
  font-family: var(--sn-font) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: rgba(255,255,255,0.4) !important;
}
.ticker-meta {
  font-family: var(--sn-font) !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.3) !important;
}
.ti-time, .ti-id, .ti-meta, .ti-badge {
  font-family: var(--sn-font) !important;
}

/* ── 8. BODY-LIGHT WRAPPER ── */
.body-light {
  background: var(--sn-offwhite) !important;
}

/* Global section padding in body-light */
.body-light .section {
  padding: 100px 0 !important;
}
.body-light .section.section-sm {
  padding: 80px 0 !important;
}

/* Global section eyebrow */
.section-eyebrow {
  font-family: var(--sn-font) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* Global section head headline */
.section-head h2 {
  font-family: var(--sn-font) !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

.section-head p {
  font-family: var(--sn-font) !important;
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.7 !important;
}

/* ── 9. SAVE IN GOLD SECTION (dark) ── */
#save {
  background: var(--sn-black) !important;
  border-bottom: none !important;
  padding: 100px 0 !important;

  /* Override body-light CSS variables for inline-style elements */
  --bl-bg:       var(--sn-black);
  --bl-bg-soft:  #141414;
  --bl-bg-card:  #242424;                 /* was #161616 — 1.15:1 on #080808 (invisible). Now ~2.8:1 */
  --bl-rule:     rgba(255,255,255,0.15);  /* was 0.07 — invisible. Now visibly light border */
  --bl-ink:      #F5F0E8;
  --bl-ink-sub:  rgba(245,240,232,0.85);  /* raised again — body copy */
  --bl-ink-mute: rgba(245,240,232,0.65);  /* labels, WCAG AA on #242424 ≈ 5.8:1 */
  --bl-gold:     #C8A84E;
  --bl-shadow:   0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.5);
  --radius:      16px;
}

/* Force saver step card backgrounds — target by data attribute, bypasses var() resolution issues */
#save [data-saver-card] {
  background: #242424 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-top: 3px solid #C8A84E !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.5) !important;
}
/* Step number */
#save [data-saver-num] {
  color: #C8A84E !important;
}
/* Card headings */
#save [data-saver-card] h3 {
  color: #F5F0E8 !important;
}
/* Card body paragraphs */
#save [data-saver-card] p {
  color: rgba(245,240,232,0.82) !important;
}
/* Footer tag lines in cards */
#save [data-saver-card] div:last-child {
  color: #C8A84E !important;
}
/* Mobile money chip row chips · 2026-05-26 — added padding+radius+border-width
   (rule previously set only bg/border-color/color which without padding renders chips as inline text) */
#save [data-saver-chip] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  background: #2A2A2A !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 999px !important;
  color: #F5F0E8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
/* Heading + intro copy */
#save h2 { color: #FFFFFF !important; }
#save .section-head p { color: rgba(245,240,232,0.82) !important; }

#save .section-eyebrow { color: var(--sn-gold) !important; }

#save h2 {
  color: #FFFFFF !important;
  font-size: clamp(36px, 4vw, 54px) !important;
  line-height: 1.1 !important;
}

/* Step number */
#save [style*="font-size: 40px"] {
  font-family: var(--sn-font) !important;
  letter-spacing: -0.04em !important;
}

/* Step cards hover */
#save .fade-up > div:hover,
#save [style*="background: var(--bl-bg-card)"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 20px 60px rgba(200,168,78,0.15) !important;
}

/* Mobile money strip */
#save [style*="background: var(--bl-bg-soft)"] {
  background: #1C1C1C !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* Anti-inflation pull quote — keep dark panel, clean it up */
#save [style*="background: linear-gradient"] {
  border-radius: 16px !important;
  border-color: rgba(200,168,78,0.3) !important;
}

/* ── 10. TWO PATHS SECTION (light) ── */
#two-paths {
  background: var(--sn-offwhite) !important;
  border-bottom: none !important;
  padding: 100px 0 !important;

  --bl-bg:       var(--sn-offwhite);
  --bl-bg-soft:  var(--sn-grey);
  --bl-bg-card:  #FFFFFF;
  --bl-rule:     #E0E0E0;
  --bl-ink:      #111111;
  --bl-ink-sub:  #555555;
  --bl-ink-mute: #888888;
  --bl-gold:     #B8923C;
  --bl-shadow:   0 1px 3px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.07);
  --radius:      16px;
}

#two-paths .section-eyebrow {
  font-family: var(--sn-font) !important;
  color: #888 !important;
  display: block !important;
  text-align: center !important;
  margin-bottom: 14px !important;
}

#two-paths .section-head p {
  color: #666 !important;
  text-align: center !important;
}

/* Path cards */
#two-paths [style*="background: var(--bl-bg-card)"] {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: var(--sn-shadow) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
#two-paths [style*="background: var(--bl-bg-card)"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--sn-shadow-h) !important;
}

/* For Institutions card — override the muted colour to a clean slate */
#two-paths [style*="color: var(--bl-ink-mute)"] {
  color: #888 !important;
}

/* ── 11. GHANA CONTEXT BAND (dark stats) ── */
#context {
  background: var(--sn-dark) !important;
  border-bottom: none !important;
  padding: 88px 0 !important;

  --bl-bg:       var(--sn-dark);
  --bl-bg-soft:  #1A1A1A;
  --bl-bg-card:  #272727;                 /* was #1E1E1E — 1.22:1 on #111111 (invisible). Now ~2.4:1 */
  --bl-rule:     rgba(255,255,255,0.15);  /* was 0.07 — invisible. Now visible */
  --bl-ink:      #F5F0E8;
  --bl-ink-sub:  rgba(245,240,232,0.85);
  --bl-ink-mute: rgba(245,240,232,0.75);  /* 9.5px ALL-CAPS labels — needs headroom, WCAG AA on #272727 ≈ 6.8:1 */
  --bl-gold:     #C8A84E;
  --bl-shadow:   0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.45);
  --radius:      12px;
}

/* Force stat card backgrounds — target .fade-up children of the 5-col grid */
#context .wrap div div.fade-up {
  background: #272727 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 20px rgba(0,0,0,0.4) !important;
}
/* Counter numbers (130 t, ~104 t etc.) */
#context .counter {
  color: #C8A84E !important;
}
/* 9.5px ALL-CAPS labels */
#context .wrap div div.fade-up > div:not(.counter) {
  color: rgba(245,240,232,0.78) !important;
}
/* Section heading */
#context h3 { color: #FFFFFF !important; }
/* Eyebrow */
#context .section-eyebrow { color: #C8A84E !important; }
/* Sources footnote */
#context .wrap > p {
  color: rgba(245,240,232,0.55) !important;
}

#context h3 {
  color: #fff !important;
  font-size: clamp(22px, 2.5vw, 32px) !important;
  line-height: 1.25 !important;
}

/* Stat numbers */
#context .counter {
  font-family: var(--sn-font) !important;
  letter-spacing: -0.04em !important;
}

/* ── 12. OVERVIEW / TILES (white) ── */
#overview {
  background: #fff !important;
  padding: 100px 0 !important;
}

#overview h2 { color: #111 !important; }
#overview .section-head p { color: #666 !important; }
#overview .section-eyebrow { color: var(--sn-gold) !important; }

.tile {
  background: var(--sn-offwhite) !important;
  border: none !important;
  border-radius: var(--sn-card-r) !important;
  box-shadow: none !important;
  padding: 36px 32px !important;
  transition: background 0.2s, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.tile:hover {
  background: #fff !important;
  transform: translateY(-5px) !important;
  box-shadow: var(--sn-shadow) !important;
}
.tile h3 {
  font-family: var(--sn-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 10px !important;
}
.tile p {
  font-family: var(--sn-font) !important;
  font-size: 14px !important;
  color: #666 !important;
  line-height: 1.65 !important;
}
.tile-link-cue {
  font-family: var(--sn-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sn-gold) !important;
}
.tile-icon { color: var(--sn-gold) !important; }

/* ── 13. HOW IT WORKS ── */
#how {
  background: var(--sn-offwhite) !important;
  padding: 0 0 100px !important;
}
#how h2 { color: #111 !important; }
#how p { color: #666 !important; }
#how .section-eyebrow { color: var(--sn-gold) !important; }
.flow-caption {
  font-family: var(--sn-font) !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  color: #999 !important;
  text-transform: uppercase !important;
}

/* ── 14. LEDGER & ENGAGE (white) ── */
#ledger, #engage {
  background: #fff !important;
  padding: 100px 0 !important;
}
#ledger h2, #engage h2 {
  color: #111 !important;
  font-size: clamp(32px, 3.5vw, 48px) !important;
}
#ledger p, #engage p { color: #666 !important; }
#ledger .section-eyebrow, #engage .section-eyebrow { color: var(--sn-gold) !important; }

/* Attestation counter */
.attestation-counter, .big-counter {
  font-family: var(--sn-font) !important;
  letter-spacing: -0.04em !important;
}

/* Resource cards */
.resource {
  background: #fff !important;
  border: 1px solid var(--sn-grey) !important;
  border-radius: 12px !important;
  box-shadow: var(--sn-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.resource:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sn-shadow-h) !important;
  border-color: rgba(200,168,78,0.25) !important;
}
.resource .name {
  font-family: var(--sn-font) !important;
  font-weight: 700 !important;
  color: #111 !important;
}
.resource .desc {
  font-family: var(--sn-font) !important;
  color: #666 !important;
}
.resource .meta {
  font-family: var(--sn-font) !important;
  color: #999 !important;
}

.resource-gated {
  background: var(--sn-offwhite) !important;
  opacity: 0.9 !important;
}

/* Resources CTA */
.resources-cta-btn {
  background: var(--sn-offwhite) !important;
  border: 1.5px solid var(--sn-grey) !important;
  border-radius: var(--sn-pill) !important;
  font-family: var(--sn-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #333 !important;
  padding: 14px 32px !important;
  transition: border-color 0.2s, background 0.2s, transform 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.resources-cta-btn:hover {
  background: #fff !important;
  border-color: var(--sn-gold) !important;
  transform: translateY(-2px) !important;
  color: #000 !important;
}

/* ── 15. THRONE / CEREMONIAL SECTION (keep dark, clean frame) ── */
.throne-band {
  background: #060606 !important;
}

.throne-content {
  position: relative !important;
  z-index: 1 !important;
}

.throne-particles { display: none !important; }

/* Ceremonial header clean-up */
.throne-ceremony .royal-mark {
  font-family: var(--sn-font) !important;
  letter-spacing: 0.28em !important;
  font-size: clamp(13px, 1.4vw, 18px) !important;
}

/* ── 16. DUALITY SECTION (on homepage) ── */
.duality-section {
  background: #080808 !important;
}

/* ── 17. FOOTER / SITE FOOTER ── */
.site-footer, footer, .footer-band {
  background: #060606 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.footer-copy, .footer-links a, .footer-nav a {
  font-family: var(--sn-font) !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.38) !important;
}

/* ── 18. BODY-LIGHT OVERRIDE for bl-specific sections ── */
/* Any remaining .body-light sections not explicitly targeted: clean cream → white */
.body-light section:not(#save):not(#two-paths):not(#context) {
  --bl-bg:       #FAFAFA;
  --bl-bg-soft:  var(--sn-offwhite);
  --bl-bg-card:  #FFFFFF;
  --bl-rule:     #E8E8E8;
  --bl-ink:      #111111;
  --bl-ink-sub:  #555555;
  --bl-ink-mute: #888888;
  --bl-gold:     #B8923C;
  --bl-shadow:   0 1px 3px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
  --radius:      14px;
}

/* ── 19. YARN STRIP (keep but tone it down) ── */
.yarn-strip {
  background: #050505 !important;
  border-bottom: 1px solid rgba(200,168,78,0.08) !important;
}

/* ── 20. SECTION LABEL / TIER LABELS ── */
.tier-text, .resources-tier-label span {
  font-family: var(--sn-font) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

/* ── 21. FADE-UP ANIMATION ── */
.fade-up {
  animation: snFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(24px);
}
@keyframes snFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── 22. SELECTION ── */
::selection {
  background: rgba(200,168,78,0.22);
  color: #fff;
}

/* ── 23. MOBILE STORY MODE — do not touch ── */
.mobile-story,
.mobile-story * {
  font-family: var(--sn-font) !important;
}
/* Keep mobile story panels dark with Inter */

/* ── 24. RESPONSIVE ADJUSTMENTS ── */
@media (max-width: 960px) {
  .cine-content {
    grid-template-columns: 1fr !important;
    padding-top: 140px !important;
    text-align: center !important;
  }
  .cine-cta-row {
    justify-content: center !important;
  }
  .cine-sub {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .cine-proof-strip {
    justify-content: center !important;
    gap: 24px !important;
  }
  .cine-marquee-stat {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .sn-nav-cta { display: none !important; }
  .nav-mid { display: none !important; }
  .cine-headline {
    font-size: clamp(38px, 9vw, 56px) !important;
  }
}

/* ── 25. SAVER CARDS RESPONSIVE GRID ── */
/* yarn.css uses #save [style*="..."] = specificity (1,1,0) + !important to collapse grids.
   #save #saver-cards = specificity (2,0,0) which beats (1,1,0) — this wins at every breakpoint. */
@media (min-width: 701px) and (max-width: 900px) {
  #save #saver-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 700px) {
  #save #saver-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  #save #saver-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT RESCUE · 2026-05-26 v6
   Inline display/grid/padding/bg/border styles get stripped under
   strict CSP + mobile-fixes responsive collapses force 1-col at
   ≤1024px even on desktop. This block hooks every broken element
   via [data-rescue="..."] attribute and forces the intended
   layout with !important. Proven pattern from saver-cards rescue.
   ═══════════════════════════════════════════════════════════ */

/* ── Orientation strip frame · sits between hero and saver section ── */
section[data-rescue="orientation-strip"] {
  background: var(--sn-offwhite, #F5F0E8) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* ── Trust signal row · 5 verifiable proof cards ── */
[data-rescue="trust-row"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 30px !important;
}
[data-rescue="trust-card"] {
  display: block !important;
  padding: 14px 16px !important;
  background: #FFFFFF !important;
  border: 1px solid #E0E0E0 !important;
  border-left: 3px solid #C8A84E !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
[data-rescue="trust-card"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}
/* Eyebrow + value inside trust card · force colors that CSP nuked */
[data-rescue="trust-card"] > div:first-child {
  font-family: var(--sn-font-mono, ui-monospace, monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: #888 !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}
[data-rescue="trust-card"] > div:last-child {
  font-family: var(--ff-serif, Georgia, serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  line-height: 1.3 !important;
}

/* ── Designed-for rail · saver section ── */
[data-rescue="designed-rail"] {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  padding: 20px 28px !important;
  margin-top: 40px !important;
  background: #1C1C1C !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 12px !important;
}
[data-rescue="designed-chips"] {
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* ── Why-gold pull-quote · saver section ── */
[data-rescue="whygold-quote"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 32px !important;
  align-items: center !important;
  margin-top: 40px !important;
  padding: 32px 36px !important;
  background: linear-gradient(135deg, #0F1B2D 0%, #0A1220 100%) !important;
  border: 1px solid #C8A84E !important;
  border-radius: 12px !important;
}
[data-rescue="whygold-stats"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 16px !important;
}
/* Inner stat tiles (gold-bordered) inside whygold-stats */
[data-rescue="whygold-stats"] > div {
  text-align: center !important;
  padding: 16px !important;
  background: rgba(200,168,78,0.08) !important;
  border: 1px solid rgba(200,168,78,0.25) !important;
  border-radius: 8px !important;
}

/* ── Two paths grid · keep 2-col on > 720px ── */
@media (min-width: 721px) {
  [data-rescue="twopaths-grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    max-width: 880px !important;
    margin: 0 auto !important;
  }
}

/* ── Ghana 2025-2026 band · keep responsive grid on > 720px ── */
/* Overrides mobile-fixes.css :≤1024 forcing 1-col on context grids */
@media (min-width: 721px) {
  [data-rescue="ghana-outer"],
  #context > .wrap > [data-rescue="ghana-outer"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 36px !important;
    align-items: center !important;
  }
  [data-rescue="ghana-stats"],
  #context > .wrap > [data-rescue="ghana-outer"] > [data-rescue="ghana-stats"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 14px !important;
  }
}

/* ── Footer · keep 4-col on > 1024px, override the mobile-fixes 2-col ── */
@media (min-width: 1025px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
    gap: 40px !important;
  }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 28px !important;
  }
}
/* END LAYOUT RESCUE 2026-05-26 v6 ──────────────────────────── */

/* National backdrop delimiter · 2026-05-26
   Prevents Ghana macro stats from reading as VPAY reserve claims */
[data-rescue="context-eyebrow-bar"] {
  display: block !important;
  margin-bottom: 28px !important;
  padding: 12px 16px !important;
  background: rgba(200,168,78,0.12) !important;
  border: 1px solid rgba(200,168,78,0.30) !important;
  border-left: 3px solid #C8A84E !important;
  border-radius: 8px !important;
  font-family: var(--sn-font-mono, ui-monospace, monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(245,240,232,0.78) !important;
  line-height: 1.5 !important;
}
[data-rescue="context-eyebrow-bar"] strong {
  color: #C8A84E !important;
  font-weight: 700 !important;
}
[data-rescue="context-eyebrow-bar"] em {
  font-style: normal !important;
  color: rgba(245,240,232,0.62) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

/* Full contract addresses · 2026-05-26
   Audit asked for non-truncated 42-char hex in the public ledger.
   Force monospace + word-break so the long string fits the addr column
   on narrow viewports without blowing out the table. */
table .addr a,
table td.addr a {
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11.5px !important;
  letter-spacing: -0.01em !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4 !important;
}
.ledger-foot {
  font-size: 12px !important;
  line-height: 1.55 !important;
}
.ledger-foot span:first-child {
  word-break: break-word !important;
}
.ledger-foot code,
.ledger-foot span span[style*="color:var(--bl-gold)"] {
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11.5px !important;
  word-break: break-all !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOUNDER ACCOUNTABILITY PANEL · 2026-05-26
   Closes the audit's "Zero disclosure of beneficial ownership" gap
   by surfacing SOVVesting math (allocation · cliff · linear · beneficiary)
   on the homepage. Light-body register · institutional weight.
   ═══════════════════════════════════════════════════════════ */

[data-rescue="founder-panel"] {
  margin-top: 48px !important;
  padding: 36px 40px !important;
  background: #FFFFFF !important;
  border: 1px solid #E0E0E0 !important;
  border-left: 4px solid #C8A84E !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
[data-rescue="founder-head"] {
  margin-bottom: 24px !important;
}
[data-rescue="founder-eyebrow"] {
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #C8A84E !important;
  margin-bottom: 10px !important;
}
[data-rescue="founder-headline"] {
  font-family: Georgia, 'Source Serif Pro', serif !important;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  color: #111111 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  font-weight: 700 !important;
}
[data-rescue="founder-lede"] {
  font-family: Georgia, serif !important;
  font-size: 15px !important;
  color: #555555 !important;
  line-height: 1.55 !important;
  margin: 14px 0 0 !important;
  max-width: 720px !important;
}
[data-rescue="founder-lede"] code {
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, monospace !important;
  font-size: 13px !important;
  color: #111 !important;
  background: rgba(200,168,78,0.10) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

[data-rescue="founder-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
}
[data-rescue="founder-fact"] {
  padding: 16px 18px !important;
  background: #FAFAF7 !important;
  border: 1px solid #E8E5DC !important;
  border-radius: 10px !important;
}
[data-rescue="founder-fact-label"] {
  font-family: ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  margin-bottom: 6px !important;
}
[data-rescue="founder-fact-value"] {
  font-family: Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.1 !important;
}
[data-rescue="founder-fact-foot"] {
  font-family: ui-monospace, monospace !important;
  font-size: 10px !important;
  color: #888 !important;
  margin-top: 6px !important;
}

[data-rescue="founder-timeline"] {
  margin-bottom: 24px !important;
}
[data-rescue="founder-timeline-label"] {
  font-family: ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  margin-bottom: 10px !important;
}
[data-rescue="founder-timeline-bar"] {
  position: relative !important;
  height: 30px !important;
  background: #F2EFE6 !important;
  border: 1px solid #E0DCCF !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
[data-rescue="founder-timeline-locked"] {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  height: 100% !important; width: 100% !important;
  background: linear-gradient(135deg, #C8A84E 0%, #8B7430 100%) !important;
}
[data-rescue="founder-timeline-marker"] {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  height: 100% !important; width: 2px !important;
  background: #0F1B2D !important;
}
[data-rescue="founder-timeline-text"] {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
[data-rescue="founder-timeline-axis"] {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 8px !important;
  font-family: ui-monospace, monospace !important;
  font-size: 10px !important;
  color: #888 !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

[data-rescue="founder-verify"] {
  padding-top: 20px !important;
  border-top: 1px solid #EEE8DC !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
}
[data-rescue="founder-verify"] code {
  font-family: ui-monospace, 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  color: #111 !important;
  word-break: break-all !important;
}
[data-rescue="founder-verify-cta"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  background: #0F1B2D !important;
  color: #F5F0E8 !important;
  font-family: ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform .2s ease, background .2s ease !important;
}
[data-rescue="founder-verify-cta"]:hover {
  transform: translateY(-1px) !important;
  background: #1A2A40 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES · 2026-05-26
   .visually-hidden / .sr-only — screen-reader-only content.
   Inline absolute-clip styles get nuked by CSP. This external
   class restores the canonical sr-only pattern.
   ═══════════════════════════════════════════════════════════ */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
}
.visually-hidden:focus,
.sr-only:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRO CARD AESTHETIC SYSTEM · 2026-05-26
   Unified depth + shadow + grain + hover + gradient-border
   treatment across every card hook on the page. Single source
   of truth for the institutional card register.
   ═══════════════════════════════════════════════════════════ */

/* Shared decoration vars — institutional polish layer */
:root {
  --pro-shadow-rest:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    0 16px 40px -8px rgba(0,0,0,0.08);
  --pro-shadow-hover:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 2px 4px rgba(0,0,0,0.06),
    0 8px 24px rgba(200,168,78,0.10),
    0 24px 64px -12px rgba(200,168,78,0.16);
  --pro-shadow-dark-rest:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 2px 6px rgba(0,0,0,0.40),
    0 12px 32px rgba(0,0,0,0.30);
  --pro-shadow-dark-hover:
    0 1px 0 rgba(255,239,168,0.18) inset,
    0 4px 12px rgba(0,0,0,0.45),
    0 20px 56px rgba(200,168,78,0.18);
  --pro-grain:
    radial-gradient(ellipse at top left, rgba(200,168,78,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(15,27,45,0.03) 0%, transparent 60%);
  --pro-grain-dark:
    radial-gradient(ellipse at top left, rgba(200,168,78,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(255,239,168,0.025) 0%, transparent 60%);
  --pro-border-gradient: linear-gradient(135deg, rgba(200,168,78,0.45) 0%, rgba(200,168,78,0.10) 50%, rgba(15,27,45,0.20) 100%);
}

/* ── TRUST CARDS (light · 5 verifiable proof cards) ── */
[data-rescue="trust-card"] {
  position: relative !important;
  background: #FFFFFF !important;
  background-image: var(--pro-grain) !important;
  border: 1px solid rgba(200,168,78,0.18) !important;
  border-left: 3px solid #C8A84E !important;
  border-radius: 12px !important;
  box-shadow: var(--pro-shadow-rest) !important;
  transition: transform .26s cubic-bezier(.2,.8,.2,1),
              box-shadow .26s cubic-bezier(.2,.8,.2,1),
              border-color .26s ease !important;
  overflow: hidden !important;
}
[data-rescue="trust-card"]::after {
  content: '↗' !important;
  position: absolute !important;
  top: 12px !important; right: 14px !important;
  font-size: 12px !important;
  color: rgba(200,168,78,0.45) !important;
  transition: transform .26s ease, color .26s ease !important;
}
[data-rescue="trust-card"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--pro-shadow-hover) !important;
  border-color: rgba(200,168,78,0.45) !important;
}
[data-rescue="trust-card"]:hover::after {
  color: #C8A84E !important;
  transform: translate(2px, -2px) !important;
}

/* ── SAVER CARDS (dark · 01/02/03) — pro depth + interior grain ── */
#save [data-saver-card] {
  position: relative !important;
  background: #1E2A3F !important;
  background-image:
    radial-gradient(ellipse at top, rgba(200,168,78,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(15,27,45,0.50) 0%, transparent 60%),
    linear-gradient(135deg, #232F45 0%, #1A2538 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-top: 3px solid #C8A84E !important;
  border-radius: 14px !important;
  box-shadow: var(--pro-shadow-dark-rest) !important;
  overflow: hidden !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              box-shadow .28s cubic-bezier(.2,.8,.2,1),
              border-color .28s ease !important;
}
#save [data-saver-card]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 80px !important;
  background: radial-gradient(ellipse at center top, rgba(200,168,78,0.18) 0%, transparent 70%) !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
  transition: opacity .3s ease !important;
}
#save [data-saver-card]:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pro-shadow-dark-hover) !important;
  border-color: rgba(200,168,78,0.30) !important;
}
#save [data-saver-card]:hover::before { opacity: 1 !important; }
#save [data-saver-num] {
  font-family: Georgia, serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: #C8A84E !important;
  background: linear-gradient(180deg, #F4D470 0%, #C8A84E 60%, #8B7430 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
}

/* ── DESIGNED-FOR RAIL · refined ── */
[data-rescue="designed-rail"] {
  position: relative !important;
  background: linear-gradient(135deg, #1A2236 0%, #131A2A 100%) !important;
  background-image:
    radial-gradient(ellipse at top left, rgba(200,168,78,0.06) 0%, transparent 50%),
    linear-gradient(135deg, #1A2236 0%, #131A2A 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 28px rgba(0,0,0,0.25) !important;
  overflow: hidden !important;
}
#save [data-saver-chip] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #F5F0E8 !important;
  transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}
#save [data-saver-chip]:hover {
  background: rgba(200,168,78,0.10) !important;
  border-color: rgba(200,168,78,0.40) !important;
  transform: translateY(-1px) !important;
}

/* ── WHY-GOLD PULL-QUOTE · richer depth ── */
[data-rescue="whygold-quote"] {
  background: linear-gradient(135deg, #0F1B2D 0%, #0A1220 60%, #060D18 100%) !important;
  background-image:
    radial-gradient(ellipse at top right, rgba(200,168,78,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #0F1B2D 0%, #0A1220 60%, #060D18 100%) !important;
  border: 1px solid rgba(200,168,78,0.35) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,239,168,0.08) inset,
    0 12px 40px rgba(0,0,0,0.40),
    0 24px 64px -16px rgba(200,168,78,0.12) !important;
  overflow: hidden !important;
}
[data-rescue="whygold-stats"] > div {
  background: rgba(200,168,78,0.06) !important;
  border: 1px solid rgba(200,168,78,0.22) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,239,168,0.06) inset !important;
  transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}
[data-rescue="whygold-stats"] > div:hover {
  background: rgba(200,168,78,0.10) !important;
  border-color: rgba(200,168,78,0.45) !important;
  transform: translateY(-2px) !important;
}

/* ── GHANA STAT TILES — institutional depth + hover ── */
#context [data-rescue="ghana-stats"] > div {
  position: relative !important;
  background: #1F2A3E !important;
  background-image:
    radial-gradient(ellipse at top, rgba(200,168,78,0.06) 0%, transparent 55%),
    linear-gradient(135deg, #232F45 0%, #1A2538 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  box-shadow: var(--pro-shadow-dark-rest) !important;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease !important;
}
#context [data-rescue="ghana-stats"] > div:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(200,168,78,0.30) !important;
  box-shadow: var(--pro-shadow-dark-hover) !important;
}
#context [data-rescue="ghana-stats"] .counter {
  background: linear-gradient(180deg, #F4D470 0%, #C8A84E 60%, #8B7430 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── TWO PATHS CARDS · subtle layered depth + ribbon polish ──
   Selector narrowed 2026-05-26 — earlier `.fade-up > div` matched the
   section-head eyebrow + paragraph divs and rendered them as white pills.
   Now scopes ONLY to the path cards via their inline-style hook. */
#two-paths .fade-up > div[style*="background: var(--bl-bg-card)"],
#two-paths .fade-up[style*="grid"] > div {
  position: relative !important;
  background: #FFFFFF !important;
  background-image: var(--pro-grain) !important;
  border: 1px solid rgba(15,27,45,0.08) !important;
  border-radius: 16px !important;
  box-shadow: var(--pro-shadow-rest) !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              box-shadow .28s cubic-bezier(.2,.8,.2,1) !important;
  overflow: hidden !important;
}
#two-paths .fade-up > div[style*="background: var(--bl-bg-card)"]:hover,
#two-paths .fade-up[style*="grid"] > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pro-shadow-hover) !important;
}
/* Defensive · explicitly STRIP any white-pill artifact from .section-head children */
#two-paths .section-head,
#two-paths .section-head > * {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── FOUNDER PANEL · same pro treatment + interior grain ── */
[data-rescue="founder-panel"] {
  background: #FFFFFF !important;
  background-image: var(--pro-grain) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0,0,0,0.04),
    0 12px 36px rgba(0,0,0,0.06),
    0 32px 72px -20px rgba(200,168,78,0.12) !important;
}
[data-rescue="founder-fact"] {
  position: relative !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFAF7 100%) !important;
  border: 1px solid rgba(200,168,78,0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px rgba(0,0,0,0.03) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
[data-rescue="founder-fact"]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(200,168,78,0.45) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 20px rgba(200,168,78,0.10) !important;
}

/* ── NATIONAL-BACKDROP DELIMITER · darker, more institutional ── */
[data-rescue="context-eyebrow-bar"] {
  background: linear-gradient(135deg, rgba(200,168,78,0.10) 0%, rgba(200,168,78,0.04) 100%) !important;
  border: 1px solid rgba(200,168,78,0.28) !important;
  border-left: 3px solid #C8A84E !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,239,168,0.10) inset, 0 2px 8px rgba(0,0,0,0.12) !important;
}

/* ── Honor prefers-reduced-motion across all hover translations ── */
@media (prefers-reduced-motion: reduce) {
  [data-rescue="trust-card"]:hover,
  #save [data-saver-card]:hover,
  #save [data-saver-chip]:hover,
  [data-rescue="whygold-stats"] > div:hover,
  #context [data-rescue="ghana-stats"] > div:hover,
  #two-paths .fade-up > div[style*="background: var(--bl-bg-card)"]:hover,
  #two-paths .fade-up[style*="grid"] > div:hover,
  [data-rescue="founder-fact"]:hover {
    transform: none !important;
  }
  [data-rescue="trust-card"]::after,
  #save [data-saver-card]::before {
    transition: none !important;
  }
}
/* END PRO CARD AESTHETIC SYSTEM 2026-05-26 ─────────────────── */

/* ═══════════════════════════════════════════════════════════════
   BESPOKE CARD CHARACTER · 2026-05-26 v2
   Push beyond generic "shadow + grain" into actual brand-distinctive
   detailing: Adinkra corner ornaments, gold accent rails, equalized
   heights, sophisticated typography hierarchy. The cards now read
   as institutional Brookfield with Asante register, not Bootstrap.
   ═══════════════════════════════════════════════════════════ */

/* ── SAVER CARDS · equalize heights + Adinkra Sika Dwa mark corner ── */
#save #saver-cards {
  align-items: stretch !important;
}
#save [data-saver-card] {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding: 28px 26px 24px !important;
}
/* Adinkra Sika Dwa Kofi concentric-circle mark · top-right corner ornament */
#save [data-saver-card]::after {
  content: '' !important;
  position: absolute !important;
  top: 16px !important; right: 16px !important;
  width: 26px !important; height: 26px !important;
  border: 1px solid rgba(200,168,78,0.30) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at center, rgba(200,168,78,0.18) 0%, transparent 40%),
    radial-gradient(circle at center, transparent 30%, rgba(200,168,78,0.10) 33%, transparent 36%),
    radial-gradient(circle at center, transparent 55%, rgba(200,168,78,0.10) 58%, transparent 61%) !important;
  opacity: 0.7 !important;
  transition: opacity .3s ease, transform .3s ease !important;
  pointer-events: none !important;
}
#save [data-saver-card]:hover::after {
  opacity: 1 !important;
  transform: rotate(15deg) !important;
}
/* Number → title spacing tightened, gold accent rail under number */
#save [data-saver-num] {
  font-size: 48px !important;
  margin-bottom: 6px !important;
}
#save [data-saver-card] h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
  padding-top: 14px !important;
}
#save [data-saver-card] h3::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 32px !important; height: 2px !important;
  background: linear-gradient(90deg, #C8A84E 0%, rgba(200,168,78,0) 100%) !important;
}
#save [data-saver-card] p {
  flex: 1 1 auto !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
}
#save [data-saver-card] > div:last-child {
  font-family: ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(200,168,78,0.18) !important;
}

/* ── GHANA STAT TILES · gold accent rail + better hierarchy + breathe pulse ── */
#context [data-rescue="ghana-stats"] > div {
  position: relative !important;
  padding: 18px 16px !important;
  overflow: hidden !important;
}
/* Top gold accent rail · subtle decoration */
#context [data-rescue="ghana-stats"] > div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 16px !important; right: 16px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(200,168,78,0.65) 0%, rgba(200,168,78,0.10) 100%) !important;
}
/* Adinkra mark · subtle background watermark */
#context [data-rescue="ghana-stats"] > div::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important; right: -8px !important;
  width: 60px !important; height: 60px !important;
  background:
    radial-gradient(circle at center, transparent 35%, rgba(200,168,78,0.06) 38%, transparent 41%),
    radial-gradient(circle at center, transparent 55%, rgba(200,168,78,0.04) 58%, transparent 61%) !important;
  border: 1px solid rgba(200,168,78,0.10) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
#context [data-rescue="ghana-stats"] .counter {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

/* ── TRUST CARDS · sharper hierarchy + gold accent corner pip ── */
[data-rescue="trust-card"] {
  padding: 16px 18px !important;
}
[data-rescue="trust-card"]::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important; left: -1px !important;
  width: 18px !important; height: 18px !important;
  background:
    linear-gradient(135deg, rgba(200,168,78,0.45) 0%, rgba(200,168,78,0.10) 50%, transparent 100%) !important;
  border-top-left-radius: 12px !important;
  pointer-events: none !important;
}

/* ── TWO-PATHS CARDS · Adinkra mark + gold inner rail accent ── */
#two-paths .fade-up > div[style*="background: var(--bl-bg-card)"]::after,
#two-paths .fade-up[style*="grid"] > div::after {
  content: '' !important;
  position: absolute !important;
  top: 32px !important; right: 32px !important;
  width: 28px !important; height: 28px !important;
  border: 1px solid rgba(200,168,78,0.30) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at center, rgba(200,168,78,0.10) 0%, transparent 45%),
    radial-gradient(circle at center, transparent 50%, rgba(200,168,78,0.12) 53%, transparent 56%) !important;
  opacity: 0.6 !important;
  transition: opacity .3s ease, transform .3s ease !important;
  pointer-events: none !important;
}
#two-paths .fade-up > div[style*="background: var(--bl-bg-card)"]:hover::after,
#two-paths .fade-up[style*="grid"] > div:hover::after {
  opacity: 1 !important;
  transform: rotate(15deg) !important;
}
/* Vertical gold rail inside path cards · accent under heading */
#two-paths .fade-up > div h3,
#two-paths .fade-up[style*="grid"] > div h3 {
  position: relative !important;
  padding-bottom: 14px !important;
}
#two-paths .fade-up > div h3::after,
#two-paths .fade-up[style*="grid"] > div h3::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 40px !important; height: 2px !important;
  background: linear-gradient(90deg, #C8A84E 0%, rgba(200,168,78,0) 100%) !important;
}

/* ── ATTESTATIONS MARQUEE HEADER · single-line eyebrow chrome ──
   The /V2/ATTESTATIONS · LIVE FEED + LIVE/NODE chrome was wrapping
   awkwardly to 2 lines on narrow viewports. Force single-line + smaller
   font + tighter letter-spacing so the eyebrow stays a clean band. */
section [class*="attestation"] > div:first-child,
section [aria-label*="attestation"] > div:first-child {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
section [class*="attestation"] [class*="eyebrow"],
section [aria-label*="attestation"] [class*="eyebrow"] {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
}
@media (max-width: 900px) {
  section [class*="attestation"] [class*="eyebrow"] {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }
}

/* ── FOUNDER PANEL · add Adinkra centre-mark watermark behind timeline ── */
[data-rescue="founder-timeline"] {
  position: relative !important;
}
[data-rescue="founder-timeline"]::before {
  content: '' !important;
  position: absolute !important;
  top: -8px !important; right: 0 !important;
  width: 48px !important; height: 48px !important;
  background:
    radial-gradient(circle at center, transparent 30%, rgba(200,168,78,0.10) 33%, transparent 36%),
    radial-gradient(circle at center, transparent 55%, rgba(200,168,78,0.06) 58%, transparent 61%) !important;
  border-radius: 50% !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* ── NATIONAL-BACKDROP DELIMITER · slimmer, more institutional ── */
[data-rescue="context-eyebrow-bar"] {
  padding: 10px 16px !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  line-height: 1.45 !important;
}

/* ── WHY-GOLD STAT TILES · large display number + accent rail ── */
[data-rescue="whygold-stats"] > div {
  position: relative !important;
}
[data-rescue="whygold-stats"] > div::before {
  content: '' !important;
  position: absolute !important;
  top: 8px !important; left: 16px !important; right: 16px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(200,168,78,0) 0%, rgba(200,168,78,0.30) 50%, rgba(200,168,78,0) 100%) !important;
}
/* END BESPOKE CARD CHARACTER 2026-05-26 v2 ──────────────────── */

/* ═══════════════════════════════════════════════════════════════
   CARD INTERIOR RHYTHM FIX · 2026-05-26 v3
   Inline list-style:none / padding:0 / margin:0 on <ul> elements
   inside Two Paths cards is stripped by CSP, leaving default browser
   bullets visible. Plus risk-disclosure card light-red treatment
   (same CSP victim). Plus proper baseline-aligned icon-row pattern
   for the check-mark lists.
   ═══════════════════════════════════════════════════════════ */

/* ── RESET defaults nuked by CSP on every card-interior ul ── */
#two-paths .fade-up > div ul,
#two-paths .fade-up[style*="grid"] > div ul,
#save [data-saver-card] ul,
[data-rescue="founder-panel"] ul,
[data-rescue="trust-card"] ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
}

/* ── Two Paths · checkmark rows · baseline-aligned icon pattern ── */
#two-paths .fade-up > div ul li,
#two-paths .fade-up[style*="grid"] > div ul li {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  gap: 0 !important;
  align-items: baseline !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #444 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(15,27,45,0.06) !important;
  margin: 0 !important;
}
#two-paths .fade-up > div ul li:last-child,
#two-paths .fade-up[style*="grid"] > div ul li:last-child {
  border-bottom: 0 !important;
}
#two-paths .fade-up > div ul li > span:first-child,
#two-paths .fade-up[style*="grid"] > div ul li > span:first-child {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #C8A84E !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  background: rgba(200,168,78,0.10) !important;
  border: 1px solid rgba(200,168,78,0.35) !important;
  border-radius: 50% !important;
}
/* For-Institutions card uses muted accent — match it */
#two-paths .fade-up > div:nth-child(2) ul li > span:first-child,
#two-paths .fade-up[style*="grid"] > div:nth-child(2) ul li > span:first-child {
  color: #777 !important;
  background: rgba(15,27,45,0.04) !important;
  border-color: rgba(15,27,45,0.18) !important;
}

/* ── Two Paths card · interior padding + footer rhythm ── */
#two-paths .fade-up > div[style*="background: var(--bl-bg-card)"],
#two-paths .fade-up[style*="grid"] > div {
  padding: 32px 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
}
#two-paths .fade-up > div h3,
#two-paths .fade-up[style*="grid"] > div h3 {
  font-size: 21px !important;
  margin-bottom: 18px !important;
}
#two-paths .fade-up > div ul,
#two-paths .fade-up[style*="grid"] > div ul {
  flex: 1 1 auto !important;
  margin: 8px 0 22px !important;
}
#two-paths .fade-up > div .btn,
#two-paths .fade-up[style*="grid"] > div .btn,
#two-paths .fade-up > div a.btn,
#two-paths .fade-up[style*="grid"] > div a.btn {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* ── Saver card bottom tag-bar — properly designed footer separator ── */
#save [data-saver-card] > div:last-child {
  margin-top: 14px !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid rgba(200,168,78,0.22) !important;
  position: relative !important;
}
#save [data-saver-card] > div:last-child::before {
  content: '' !important;
  position: absolute !important;
  top: -1px !important; left: 0 !important;
  width: 24px !important; height: 1px !important;
  background: #C8A84E !important;
}

/* ── GHANA TILES · add a horizontal mini-progress accent inside each tile ── */
#context [data-rescue="ghana-stats"] > div .counter {
  position: relative !important;
}
#context [data-rescue="ghana-stats"] > div .counter::after {
  content: '' !important;
  display: block !important;
  width: 36px !important;
  height: 2px !important;
  margin-top: 10px !important;
  background: linear-gradient(90deg, #C8A84E 0%, rgba(200,168,78,0.20) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RISK DISCLOSURE CARD · light-red treatment · 2026-05-26
   Per Ano: needs to read as a proper card, light red. Inline styling
   on #risk-disclosure was CSP-stripped, leaving plain prose. This
   restores the card chrome via external rules.
   ═══════════════════════════════════════════════════════════ */
#risk-disclosure {
  margin-top: 28px !important;
  padding: 18px 22px !important;
  background: linear-gradient(135deg, rgba(255,110,127,0.06) 0%, rgba(255,110,127,0.03) 100%) !important;
  background-image:
    radial-gradient(ellipse at top left, rgba(255,110,127,0.08) 0%, transparent 50%),
    linear-gradient(135deg, #FFF5F4 0%, #FDEDEC 100%) !important;
  border: 1px solid rgba(255,110,127,0.28) !important;
  border-left: 3px solid #D9534F !important;
  border-radius: 10px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 2px 6px rgba(217,83,79,0.06),
    0 8px 24px -8px rgba(217,83,79,0.08) !important;
  font-family: ui-monospace, 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  color: #6B3F3D !important;
  position: relative !important;
  overflow: hidden !important;
}
#risk-disclosure::before {
  content: '⚠' !important;
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  font-size: 18px !important;
  color: rgba(217,83,79,0.30) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
#risk-disclosure strong:first-child {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #B0413C !important;
  font-weight: 700 !important;
}

/* ── FOOTER · gold accent rails between columns + tighter rhythm ── */
.footer-grid > div {
  position: relative !important;
}
@media (min-width: 1025px) {
  .footer-grid > div:not(:first-child)::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important; bottom: 8px !important;
    left: -20px !important;
    width: 1px !important;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(200,168,78,0.20) 25%,
      rgba(200,168,78,0.20) 75%,
      transparent 100%) !important;
  }
}
.footer h4 {
  position: relative !important;
  padding-bottom: 6px !important;
}
.footer h4::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 18px !important; height: 1px !important;
  background: #C8A84E !important;
}
/* END CARD INTERIOR RHYTHM v3 + RISK CARD + FOOTER POLISH ──── */

/* ═══════════════════════════════════════════════════════════════
   INSTITUTIONAL READINESS ROADMAP · 2026-05-26
   Audit response · honest "shipped / in commissioning / queued"
   public disclosure of every institutional-readiness item.
   All hooks via data-rescue · CSP-safe.
   ═══════════════════════════════════════════════════════════ */

[data-rescue="iready-panel"] {
  margin-top: 48px !important;
  padding: 36px 40px !important;
  background: #FFFFFF !important;
  background-image: var(--pro-grain) !important;
  border: 1px solid #E0E0E0 !important;
  border-left: 4px solid #0F1B2D !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0,0,0,0.04),
    0 12px 36px rgba(0,0,0,0.06),
    0 32px 72px -20px rgba(15,27,45,0.10) !important;
}
[data-rescue="iready-head"] { margin-bottom: 24px !important; }
[data-rescue="iready-eyebrow"] {
  font-family: ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #0F1B2D !important;
  margin-bottom: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
[data-rescue="iready-eyebrow"]::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important; height: 1px !important;
  background: #C8A84E !important;
}
[data-rescue="iready-headline"] {
  font-family: Georgia, 'Source Serif Pro', serif !important;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  color: #111111 !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
[data-rescue="iready-lede"] {
  font-family: Georgia, serif !important;
  font-size: 15px !important;
  color: #555 !important;
  line-height: 1.55 !important;
  margin: 14px 0 0 !important;
  max-width: 760px !important;
}

/* ── Legend (pill key) ── */
[data-rescue="iready-legend"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
  padding: 14px 18px !important;
  background: #FAFAF7 !important;
  border: 1px solid #E8E5DC !important;
  border-radius: 10px !important;
  font-family: ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #666 !important;
}
[data-rescue="iready-legend"] > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── Status pip · the single visual key ── */
[data-rescue="iready-pip"],
[data-rescue="iready-row-pip"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
[data-rescue="iready-pip"] {
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
}
/* Shipped · gold-green */
[data-rescue="iready-pip"][data-status="shipped"],
[data-rescue="iready-row-pip"][data-status="shipped"] {
  background: linear-gradient(135deg, #E8D48B 0%, #C8A84E 100%) !important;
  color: #0F1B2D !important;
  border: 1px solid rgba(200,168,78,0.50) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 2px 6px rgba(200,168,78,0.20) !important;
}
/* In flight · amber */
[data-rescue="iready-pip"][data-status="flight"],
[data-rescue="iready-row-pip"][data-status="flight"] {
  background: linear-gradient(135deg, #FFF5D6 0%, #E8B834 100%) !important;
  color: #5C3F0A !important;
  border: 1px solid rgba(232,184,52,0.55) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 6px rgba(232,184,52,0.20) !important;
}
/* Queued · muted */
[data-rescue="iready-pip"][data-status="queued"],
[data-rescue="iready-row-pip"][data-status="queued"] {
  background: #F2EFE6 !important;
  color: #888 !important;
  border: 1px solid #DDD7C8 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset !important;
}

/* ── Roadmap rows ── */
[data-rescue="iready-rows"] {
  display: flex !important;
  flex-direction: column !important;
}
[data-rescue="iready-row"] {
  display: grid !important;
  grid-template-columns: 40px 1fr auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #EEE8DC !important;
  transition: background .2s ease !important;
}
[data-rescue="iready-row"]:last-child { border-bottom: 0 !important; }
[data-rescue="iready-row"]:hover {
  background: rgba(200,168,78,0.04) !important;
}
[data-rescue="iready-row-title"] {
  font-family: Georgia, serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}
[data-rescue="iready-row-sub"] {
  font-family: ui-monospace, monospace !important;
  font-size: 11.5px !important;
  color: #666 !important;
  line-height: 1.5 !important;
}
[data-rescue="iready-row-meta"] {
  font-family: ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  white-space: nowrap !important;
  padding-left: 8px !important;
}

/* Row title left-accent · status-coloured */
[data-rescue="iready-row"][data-status="shipped"] [data-rescue="iready-row-title"] {
  position: relative !important;
  padding-left: 14px !important;
}
[data-rescue="iready-row"][data-status="shipped"] [data-rescue="iready-row-title"]::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 6px !important; bottom: 6px !important;
  width: 2px !important;
  background: linear-gradient(180deg, #C8A84E 0%, rgba(200,168,78,0.15) 100%) !important;
}

/* ── Foot · institutional posture + CTA ── */
[data-rescue="iready-foot"] {
  margin-top: 28px !important;
  padding-top: 22px !important;
  border-top: 1px solid #EEE8DC !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
}
[data-rescue="iready-cta"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 22px !important;
  background: #0F1B2D !important;
  color: #F5F0E8 !important;
  font-family: ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform .2s ease, background .2s ease !important;
}
[data-rescue="iready-cta"]:hover {
  transform: translateY(-1px) !important;
  background: #1A2A40 !important;
}

/* ── Narrow viewports: stack the meta + tighten row ── */
@media (max-width: 720px) {
  [data-rescue="iready-row"] {
    grid-template-columns: 32px 1fr !important;
    gap: 12px !important;
    padding: 14px 0 !important;
  }
  [data-rescue="iready-row-meta"] {
    grid-column: 2 / -1 !important;
    padding-left: 0 !important;
    margin-top: 4px !important;
  }
  [data-rescue="iready-panel"] { padding: 28px 22px !important; }
}

/* ── Reduced motion respect ── */
@media (prefers-reduced-motion: reduce) {
  [data-rescue="iready-row"]:hover,
  [data-rescue="iready-cta"]:hover { transform: none !important; }
}
/* END INSTITUTIONAL READINESS ROADMAP ──────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   CSP-STRIPPED TEXT COLOR RECOVERY · 2026-05-26
   Inline `color: var(--bl-ink-mute)` and `color: var(--bl-ink-sub)`
   on the Ghana lede paragraph + framing span get nuked. Without
   them, text inherits body color (dark navy) which is invisible
   on the dark Ghana band. External rules restore proper colors.
   ═══════════════════════════════════════════════════════════ */

/* ── Ghana lede paragraph · text-pane child of ghana-outer ── */
#context [data-rescue="ghana-outer"] > div > p {
  font-family: ui-monospace, 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  color: rgba(245,240,232,0.60) !important;
  line-height: 1.6 !important;
  margin-top: 14px !important;
  max-width: 380px !important;
}
#context [data-rescue="ghana-outer"] > div > p strong {
  color: rgba(245,240,232,0.95) !important;
  font-weight: 700 !important;
}
/* Sources line at the bottom of the Ghana section · ensure same legibility */
#context > .wrap > p {
  color: rgba(245,240,232,0.55) !important;
  font-family: ui-monospace, monospace !important;
}

/* ── Framing block (light orientation strip) ·
   subtle-emphasis span inside the lede gets CSP-stripped too.
   Force the muted-grey subtle effect so the bold framing read survives. */
section[data-rescue="orientation-strip"] .wrap > div:last-child p > span {
  color: #666 !important;
}
/* The headline framing paragraph itself · ensure body color is dark ink on cream */
section[data-rescue="orientation-strip"] .wrap > div:last-child p {
  color: #111 !important;
}
section[data-rescue="orientation-strip"] .wrap > div:last-child .section-eyebrow {
  color: #C8A84E !important;
}
/* END CSP-STRIPPED TEXT COLOR RECOVERY ─────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   DARK-REGISTER VAR BLEED FIX · 2026-05-26
   style.css defines --text (#F1F5F9 near-white) and --text-soft
   (#CBD5E1 light slate) for the original dark theme. Several
   modern light-body sections inherit these via element classes
   like .mid-cta-* and render invisible. This block forces proper
   light-body-legible colors via specific class overrides.
   ═══════════════════════════════════════════════════════════ */

/* Early Access · Mid-page CTA band */
.mid-cta-band {
  background: linear-gradient(180deg,
    rgba(244,196,48,0.04) 0%,
    rgba(244,196,48,0.08) 50%,
    rgba(244,196,48,0.04) 100%) !important;
  border-top: 1px solid rgba(244,196,48,0.22) !important;
  border-bottom: 1px solid rgba(244,196,48,0.22) !important;
}
.mid-cta-band .mid-cta-eyebrow {
  color: #C8A84E !important;
  opacity: 1 !important;
  font-family: ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.mid-cta-band h3 {
  color: #0F1B2D !important;
  font-family: Georgia, 'Source Serif Pro', serif !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.mid-cta-band .mid-cta-sub {
  color: #555 !important;
  font-family: Georgia, serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  max-width: 540px !important;
  margin: 0 !important;
}
.mid-cta-actions .btn.btn-primary {
  background: linear-gradient(135deg, #C8A84E 0%, #B8923C 100%) !important;
  color: #0F1B2D !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(200,168,78,0.25), 0 1px 0 rgba(255,255,255,0.4) inset !important;
}
.mid-cta-actions .btn.btn-ghost {
  color: #0F1B2D !important;
  border-color: rgba(15,27,45,0.45) !important;
}

/* Defensive · any element using dark-register text vars inside
   a body-light section should fall back to legible dark colors.
   Targets via inline-style substring (safe — only catches actual usage). */
section.body-light [style*="color: var(--text-soft)"],
section.body-light [style*="color:var(--text-soft)"] {
  color: #555 !important;
}
section.body-light [style*="color: var(--text)"]:not([style*="--text-"]),
section.body-light [style*="color:var(--text)"]:not([style*="--text-"]) {
  color: #0F1B2D !important;
}
/* END DARK-REGISTER VAR BLEED FIX ──────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE CSP-STRIP COLOR BLEED DEFENSIVE SWEEP · 2026-05-26
   Catches every inline `color: var(--bl-ink-*)` or `color: var(--text*)`
   substring across both light AND dark section registers, forcing a
   legible color regardless of which register the element ends up in.
   Last-resort defensive layer behind all specific overrides.
   ═══════════════════════════════════════════════════════════ */

/* ── DARK sections · bl-ink-* vars need cream/light recovery ── */
#save [style*="color: var(--bl-ink-mute)"],
#save [style*="color:var(--bl-ink-mute)"],
#context [style*="color: var(--bl-ink-mute)"],
#context [style*="color:var(--bl-ink-mute)"] {
  color: rgba(245,240,232,0.62) !important;
}
#save [style*="color: var(--bl-ink-sub)"],
#save [style*="color:var(--bl-ink-sub)"],
#context [style*="color: var(--bl-ink-sub)"],
#context [style*="color:var(--bl-ink-sub)"] {
  color: rgba(245,240,232,0.85) !important;
}
#save [style*="color: var(--bl-ink)"]:not([style*="--bl-ink-"]),
#save [style*="color:var(--bl-ink)"]:not([style*="--bl-ink-"]),
#context [style*="color: var(--bl-ink)"]:not([style*="--bl-ink-"]),
#context [style*="color:var(--bl-ink)"]:not([style*="--bl-ink-"]) {
  color: #F5F0E8 !important;
}

/* ── LIGHT body-light sections · text-soft / text vars need dark recovery ── */
section.body-light [style*="color: var(--text-soft)"],
section.body-light [style*="color:var(--text-soft)"],
.body-light [style*="color: var(--text-soft)"],
.body-light [style*="color:var(--text-soft)"] {
  color: #555 !important;
}
section.body-light [style*="color: var(--text)"]:not([style*="--text-"]),
section.body-light [style*="color:var(--text)"]:not([style*="--text-"]),
.body-light [style*="color: var(--text)"]:not([style*="--text-"]),
.body-light [style*="color:var(--text)"]:not([style*="--text-"]) {
  color: #0F1B2D !important;
}

/* ── LIGHT body-light sections · bl-ink-* vars need PROPER dark recovery
   (CSP-strip can leave these inheriting wrong base color in cascade) ── */
section.body-light [style*="color: var(--bl-ink-mute)"],
section.body-light [style*="color:var(--bl-ink-mute)"] {
  color: #888 !important;
}
section.body-light [style*="color: var(--bl-ink-sub)"],
section.body-light [style*="color:var(--bl-ink-sub)"] {
  color: #555 !important;
}
section.body-light [style*="color: var(--bl-ink)"]:not([style*="--bl-ink-"]),
section.body-light [style*="color:var(--bl-ink)"]:not([style*="--bl-ink-"]) {
  color: #0F1B2D !important;
}

/* ── Gold color recovery · widely used, low-risk to force ── */
[style*="color: var(--bl-gold)"],
[style*="color:var(--bl-gold)"] {
  color: #C8A84E !important;
}
[style*="color: var(--gold)"],
[style*="color:var(--gold)"] {
  color: #C8A84E !important;
}

/* ── Save section · checkmark icons in <li> spans (CSP-stripped color) ── */
#save li > span[style*="color"] {
  color: #C8A84E !important;
}

/* ── Designed-for rail labels (left "Designed for" + right "Integration roadmap") ── */
[data-rescue="designed-rail"] > span:first-child,
[data-rescue="designed-rail"] > span:last-child {
  color: rgba(245,240,232,0.70) !important;
  font-family: ui-monospace, monospace !important;
}

/* ── Footer · risk disclosure styling defensive ── */
.footer #risk-disclosure {
  /* Already styled above — this just ensures cascade doesn't lose it */
  color: #6B3F3D !important;
}

/* ── Two Paths · inner For Savers / For Institutions eyebrow ── */
#two-paths .fade-up > div > div:first-child,
#two-paths .fade-up[style*="grid"] > div > div:first-child {
  font-family: ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}
#two-paths .fade-up > div:nth-child(1) > div:first-child,
#two-paths .fade-up[style*="grid"] > div:nth-child(1) > div:first-child {
  color: #C8A84E !important;
}
#two-paths .fade-up > div:nth-child(2) > div:first-child,
#two-paths .fade-up[style*="grid"] > div:nth-child(2) > div:first-child {
  color: #888 !important;
}
/* END COMPREHENSIVE CSP-STRIP COLOR BLEED DEFENSIVE SWEEP ──── */

/* ═══════════════════════════════════════════════════════════════
   ROADMAP SHARPENING + GSU PRE-PRODUCTION TAG · 2026-05-26
   Adds competitive benchmark callout in the Roadmap panel,
   plus a DEMONSTRATION DATA tag on the attestation marquee so
   no auditor reads the live feed as a production reserve claim.
   ═══════════════════════════════════════════════════════════ */

/* Competitive benchmark band inside the Roadmap panel */
[data-rescue="iready-benchmark"] {
  display: block !important;
  margin-bottom: 22px !important;
  padding: 14px 18px !important;
  background: linear-gradient(135deg, rgba(15,27,45,0.04) 0%, rgba(200,168,78,0.04) 100%) !important;
  background-image:
    radial-gradient(ellipse at top right, rgba(200,168,78,0.06) 0%, transparent 60%),
    linear-gradient(135deg, rgba(15,27,45,0.03) 0%, rgba(200,168,78,0.04) 100%) !important;
  border: 1px solid rgba(15,27,45,0.10) !important;
  border-left: 3px solid #0F1B2D !important;
  border-radius: 8px !important;
  font-family: Georgia, serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #333 !important;
}
[data-rescue="iready-benchmark"] strong {
  color: #111 !important;
  font-weight: 700 !important;
}

/* Roadmap row sub-line · allow inline <strong> emphasis to render boldly */
[data-rescue="iready-row-sub"] strong {
  color: #111 !important;
  font-weight: 700 !important;
}

/* GSU pre-production tag · sits inline with the ticker title */
[data-rescue="demo-tag"] {
  display: inline-block !important;
  margin-left: 12px !important;
  padding: 2px 8px !important;
  background: rgba(232,184,52,0.18) !important;
  border: 1px solid rgba(232,184,52,0.55) !important;
  border-radius: 4px !important;
  font-family: ui-monospace, monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #E8B834 !important;
  vertical-align: middle !important;
}
@media (max-width: 900px) {
  [data-rescue="demo-tag"] {
    display: block !important;
    margin: 4px 0 0 !important;
    width: max-content !important;
  }
}
/* END ROADMAP SHARPENING + GSU PRE-PRODUCTION TAG ───────────── */

/* ═══════════════════════════════════════════════════════════════
   DEMO-TAG PROMINENCE + EXPLICIT PRE-PRODUCTION NOTE · 2026-05-26
   The inline DEMONSTRATION DATA tag was too small to register.
   Bump prominence + add explicit visible note under the marquee
   so no auditor reads the live feed as production reserve claim.
   ═══════════════════════════════════════════════════════════ */

[data-rescue="demo-tag"] {
  font-size: 10.5px !important;
  padding: 3px 10px !important;
  background: rgba(232,184,52,0.22) !important;
  border: 1px solid rgba(232,184,52,0.70) !important;
  color: #FFD46B !important;
  margin-left: 14px !important;
  letter-spacing: 0.16em !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

[data-rescue="preprod-note"] {
  display: block !important;
  margin: 18px auto 0 !important;
  padding: 12px 18px !important;
  max-width: 960px !important;
  background: linear-gradient(135deg, rgba(232,184,52,0.08) 0%, rgba(15,27,45,0.20) 100%) !important;
  border: 1px solid rgba(232,184,52,0.30) !important;
  border-left: 3px solid #E8B834 !important;
  border-radius: 8px !important;
  font-family: ui-monospace, 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: rgba(245,240,232,0.88) !important;
  text-align: center !important;
}
[data-rescue="preprod-note"] strong {
  color: #FFD46B !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
[data-rescue="preprod-note"] em {
  color: #FFEFA8 !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
[data-rescue="preprod-note"] a {
  color: #FFD46B !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255,212,107,0.4) !important;
  text-underline-offset: 2px !important;
}
[data-rescue="preprod-note"] a:hover {
  text-decoration-color: #FFD46B !important;
}
/* END DEMO-TAG PROMINENCE + PRE-PROD NOTE ────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   Netlify honeypot · CSP-strip rescue · 2026-05-26
   The <p style="display:none"> wrapping the "Bot field:" input was
   CSP-stripped, making the honeypot visible to real users. Now
   uses <p hidden aria-hidden="true" class="netlify-honeypot">
   plus this class as belt-and-suspenders against any later style.
───────────────────────────────────────────────────────────────── */
.netlify-honeypot,
.netlify-honeypot * {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   Kill duplicate #mscStickyPill · 2026-05-26
   The inline mobile-consumer "JOIN $SOV WAITLIST" pill was overlapping
   the trinity epigraph English gloss and competing with the primary
   #mobileStickyCta. One floating CTA is the right answer. The bottom
   sticky already has 119-ahead social proof + footer-aware hide logic
   so it's the keeper.
───────────────────────────────────────────────────────────────── */
#mscStickyPill,
.msc-sticky-pill {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   Institutional Readiness Roadmap panel · audit-anchored · 2026-05-27
   Mirrors the EcoVent_Africa_Institutional_Audit_Report.pdf
   Phase 1/2/3 structure with status badges (shipped / commissioning /
   queued). Pure class-based styling (CSP-immune).
───────────────────────────────────────────────────────────────── */

[data-rescue="iready-panel"] {
  margin-top: 48px;
  padding: 36px 40px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-left: 4px solid #C8A84E;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

[data-rescue="iready-head"] {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #EEE9D8;
}

[data-rescue="iready-eyebrow"] {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C8A84E;
  margin-bottom: 10px;
}

[data-rescue="iready-headline"] {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: clamp(22px, 2.6vw, 30px);
  color: #111111;
  line-height: 1.2;
  margin: 0 0 14px 0;
  font-weight: 400;
}

[data-rescue="iready-headline"] strong {
  font-weight: 700;
  color: #C8A84E;
}

[data-rescue="iready-lede"] {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 15px;
  color: #555555;
  line-height: 1.6;
  margin: 0;
  max-width: 760px;
}

[data-rescue="iready-lede"] em {
  font-style: italic;
  color: #444;
}

[data-rescue="iready-phase"] {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed #E8E5DC;
}

[data-rescue="iready-phase"]:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

[data-rescue="iready-phase-head"] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

[data-rescue="iready-phase-tag"] {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C8A84E;
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(200, 168, 78, 0.10);
  border: 1px solid rgba(200, 168, 78, 0.32);
  border-radius: 4px;
}

[data-rescue="iready-phase-name"] {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 17px;
  color: #222;
  font-weight: 700;
  line-height: 1.3;
}

[data-rescue="iready-list"] {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Override legacy iready-row 3-column rule at L2114 with !important */
[data-rescue="iready-panel"] [data-rescue="iready-row"] {
  display: grid !important;
  grid-template-columns: minmax(170px, max-content) minmax(90px, max-content) 1fr minmax(0, max-content) !important;
  column-gap: 18px !important;
  row-gap: 6px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  background: #FAFAF7 !important;
  border: 1px solid #EFECDC !important;
  border-bottom: 1px solid #EFECDC !important;
  border-radius: 8px !important;
  font-family: var(--ff-serif, Georgia, serif) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-row"][data-status="shipped"] {
  background: rgba(74, 222, 128, 0.06) !important;
  border-color: rgba(74, 222, 128, 0.32) !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-row"][data-status="commissioning"] {
  background: rgba(200, 168, 78, 0.06) !important;
  border-color: rgba(200, 168, 78, 0.40) !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-row"][data-status="queued"] {
  background: #FAFAF7 !important;
  border-color: #EFECDC !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-row"]:hover {
  background: rgba(200, 168, 78, 0.04) !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-status"] {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 5px 10px !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
  text-align: center !important;
  display: inline-block !important;
  justify-self: start !important;
}

[data-rescue="iready-panel"] [data-status="shipped"] [data-rescue="iready-status"] {
  color: #1F7A3F !important;
  background: rgba(74, 222, 128, 0.18) !important;
}

[data-rescue="iready-panel"] [data-status="commissioning"] [data-rescue="iready-status"] {
  color: #8B6E2A !important;
  background: rgba(200, 168, 78, 0.22) !important;
}

[data-rescue="iready-panel"] [data-status="queued"] [data-rescue="iready-status"] {
  color: #888 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-priority"] {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  white-space: nowrap !important;
  justify-self: start !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-action"] {
  color: #222 !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-action"] a {
  color: #8B6E2A !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(139, 110, 42, 0.4) !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-action"] a:hover {
  color: #5C4810 !important;
  text-decoration-color: rgba(139, 110, 42, 0.9) !important;
}

[data-rescue="iready-panel"] [data-rescue="iready-standards"] {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.05em !important;
  color: #888 !important;
  white-space: nowrap !important;
  text-align: right !important;
}

[data-rescue="iready-foot"] {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #EEE9D8;
}

[data-rescue="iready-foot-line"] {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin: 0;
  max-width: 760px;
}

[data-rescue="iready-foot-strong"] {
  color: #111;
  font-weight: 700;
  margin-right: 4px;
}

[data-rescue="iready-foot-line"] a {
  color: #8B6E2A;
  text-decoration: underline;
  text-decoration-color: rgba(139, 110, 42, 0.4);
}

/* Mobile · stack columns vertically */
@media (max-width: 760px) {
  [data-rescue="iready-panel"] {
    padding: 28px 22px;
    margin-top: 32px;
  }
  [data-rescue="iready-row"] {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 14px;
  }
  [data-rescue="iready-status"] {
    justify-self: start;
  }
  [data-rescue="iready-priority"] {
    font-size: 10px;
  }
  [data-rescue="iready-standards"] {
    text-align: left;
    font-size: 10px;
    padding-top: 4px;
    border-top: 1px dashed rgba(0,0,0,0.06);
    margin-top: 4px;
  }
  [data-rescue="iready-phase-head"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Hero inline email capture · v3 · 2026-05-27
   v3 changes: widened to 560px (placeholder no longer truncates),
   added a small gold-mono eyebrow with pulse dot for context, gave
   the input a subtle gold underline glow so it has more presence
   without going back to the heavy card chrome. Order:7 keeps it
   slotted after CTAs in the hero flex sequence.
───────────────────────────────────────────────────────────────── */
[data-rescue="hero-capture"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 560px !important;
  width: 100% !important;
  margin: 24px auto 0 !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  order: 7 !important;
}

[data-rescue="hero-capture-eyebrow"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: #C8A84E !important;
}

[data-rescue="hero-capture-dot"] {
  flex: 0 0 auto !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #C8A84E !important;
  box-shadow: 0 0 8px rgba(200, 168, 78, 0.70) !important;
  animation: heroCaptureDot 2.4s ease-in-out infinite !important;
}

@keyframes heroCaptureDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  [data-rescue="hero-capture-dot"] { animation: none !important; }
}

[data-rescue="hero-capture-row"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}

[data-rescue="hero-capture-input"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 13px 18px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13.5px !important;
  color: #F5F0E8 !important;
  background: rgba(20, 31, 48, 0.55) !important;
  border: 1px solid rgba(200, 168, 78, 0.28) !important;
  border-radius: 99px !important;
  outline: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.22),
    0 0 0 0 rgba(200, 168, 78, 0) !important;
}

[data-rescue="hero-capture-input"]::placeholder {
  color: rgba(245, 240, 232, 0.40) !important;
  letter-spacing: 0.04em !important;
}

[data-rescue="hero-capture-input"]:focus {
  border-color: rgba(244, 212, 112, 0.70) !important;
  background: rgba(20, 31, 48, 0.75) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.30),
    0 0 0 3px rgba(200, 168, 78, 0.14) !important;
}

[data-rescue="hero-capture-submit"] {
  flex: 0 0 auto !important;
  padding: 13px 22px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #0F1B2D !important;
  background: linear-gradient(135deg, #F4D470 0%, #C8A84E 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(244, 212, 112, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

[data-rescue="hero-capture-submit"]:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(244, 212, 112, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

[data-rescue="hero-capture-submit"]:active {
  transform: translateY(0) scale(.985) !important;
}

/* Hide the legacy label + foot text (kept for backward compat) */
[data-rescue="hero-capture-label"],
[data-rescue="hero-capture-foot"] {
  display: none !important;
}

@media (max-width: 540px) {
  [data-rescue="hero-capture"] {
    margin: 18px auto 0 !important;
    padding: 0 20px !important;
  }
  [data-rescue="hero-capture-eyebrow"] {
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
  }
  [data-rescue="hero-capture-row"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  [data-rescue="hero-capture-input"] {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  [data-rescue="hero-capture-submit"] {
    width: 100% !important;
    padding: 13px 20px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Cookie posture badge · CRO audit response · 2026-05-27
   Auditor flagged "no visible cookie consent banner" — we don't use
   cookies (Plausible is privacy-first). Rather than show a useless
   consent banner, publish the posture explicitly. Closes the GDPR
   visibility gap without adding friction to the conversion flow.
───────────────────────────────────────────────────────────────── */
[data-rescue="cookie-posture"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 20px auto 16px !important;
  padding: 12px 18px !important;
  max-width: 760px !important;
  background: rgba(74, 222, 128, 0.05) !important;
  border: 1px solid rgba(74, 222, 128, 0.18) !important;
  border-radius: 8px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: rgba(75, 55, 30, 0.72) !important;
}

[data-rescue="cookie-posture-dot"] {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.55) !important;
}

[data-rescue="cookie-posture-text"] {
  flex: 1 1 auto !important;
  text-align: center !important;
}

[data-rescue="cookie-posture-text"] a {
  color: #8B6E2A !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(139, 110, 42, 0.4) !important;
  white-space: nowrap !important;
}

[data-rescue="cookie-posture-text"] a:hover {
  color: #5C4810 !important;
  text-decoration-color: rgba(139, 110, 42, 0.9) !important;
}

@media (max-width: 540px) {
  [data-rescue="cookie-posture"] {
    margin: 16px 16px 12px !important;
    padding: 10px 14px !important;
    font-size: 10.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Hero "Built On" trust strip · CRO audit response · 2026-05-27
   Surfaces the technical-infrastructure partners (Polygon, Chainlink,
   OpenZeppelin, Gnosis Safe, GitHub) above the fold rather than
   buried in a mid-page Built-On grid. Auditor's medium-term #5.
───────────────────────────────────────────────────────────────── */
[data-rescue="hero-trust-strip"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  margin: 18px auto 0 !important;
  padding: 0 16px !important;
  max-width: 760px !important;
}

[data-rescue="hero-trust-eyebrow"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(245, 240, 232, 0.42) !important;
  padding-right: 4px !important;
}

[data-rescue="hero-trust-chip"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  background: rgba(20, 31, 48, 0.42) !important;
  border: 1px solid rgba(200, 168, 78, 0.20) !important;
  border-radius: 99px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: rgba(245, 240, 232, 0.78) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .12s ease !important;
}

[data-rescue="hero-trust-chip"]:hover {
  color: #F4D470 !important;
  border-color: rgba(200, 168, 78, 0.55) !important;
  background: rgba(200, 168, 78, 0.08) !important;
  transform: translateY(-1px) !important;
}

[data-rescue="hero-trust-glyph"] {
  color: #C8A84E !important;
  font-size: 12px !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
}

@media (max-width: 540px) {
  [data-rescue="hero-trust-strip"] {
    gap: 6px 8px !important;
    margin-top: 14px !important;
  }
  [data-rescue="hero-trust-eyebrow"] {
    width: 100% !important;
    text-align: center !important;
    padding-right: 0 !important;
    margin-bottom: 4px !important;
  }
  [data-rescue="hero-trust-chip"] {
    padding: 6px 10px !important;
    font-size: 10.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Hero flex-order patch · 2026-05-27
   The hero uses CSS order: to sequence elements visually. Items
   without an explicit order default to 0 and render BEFORE the
   headline. Lock the rotator + trust-strip + form into their
   intended slots after the CTAs.
───────────────────────────────────────────────────────────────── */
.cine-partnership          { order: 8 !important; }
[data-rescue="hero-trust-strip"] { order: 9 !important; }
/* hero-capture already set to order:7 in its own rule (above CTAs) */

/* ─────────────────────────────────────────────────────────────────
   #save section-head centering fix · 2026-05-28
   Inline text-align/margin/max-width were CSP-stripped from the
   section-head block. Externalised here so the centering survives.
───────────────────────────────────────────────────────────────── */
#save .section-head {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
#save .section-head .section-eyebrow,
#save .section-head .section-eyebrow-flow {
  text-align: center !important;
  justify-content: center !important;
}
#save .section-head h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#save .section-head > p,
#save .section-head .section-head-intro {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 620px !important;
}
#save [data-rescue="saver-epigraph"] {
  margin: 32px auto 0 !important;
  max-width: 520px !important;
  text-align: center !important;
}
#save [data-rescue="saver-epigraph"] > div[aria-hidden] {
  text-align: center !important;
  color: #C8A84E !important;
  font-family: var(--ff-mono, ui-monospace, monospace) !important;
  font-size: 14px !important;
  letter-spacing: 0.5em !important;
  opacity: 0.65 !important;
}
#save [data-rescue="saver-epigraph"] p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#save [data-rescue="saver-epigraph"] p[lang="ak"] {
  font-style: italic !important;
  color: #F5F0E8 !important;
  margin-top: 14px !important;
  line-height: 1.4 !important;
}

/* ─────────────────────────────────────────────────────────────────
   Gold-on-dark contrast bump · Z.ai WCAG 1.4.3 AA fix · 2026-05-28
   #F4D470 on #0F1B2D ≈ 3.8:1 (fails AA). #FFEFA8 ≈ 14.7:1 (passes AAA).
   Scoped to dark-overridden sections so cream contexts are unaffected.
───────────────────────────────────────────────────────────────── */
#save .section-eyebrow,
#save .section-eyebrow-flow,
#save .section-head .section-eyebrow,
#save [data-saver-num],
#save [data-saver-card] div:last-child {
  color: #FFEFA8 !important;
}
/* Throne meta strong tags on dark hero/throne treatments */
.body-light .stage-void .throne-meta strong,
.body-light .stage-void.throne-meta strong,
#save .throne-meta strong {
  color: #FFEFA8 !important;
}

/* ─── assets/css/ui-polish.css ─────────────────────────────────────── */
  .skip-link {
    position: absolute; top: -48px; left: 12px; z-index: 9999;
    background: #0F1B2D; color: #F4D470;
    padding: 10px 18px; font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    text-decoration: none; border: 1px solid rgba(244, 212, 112, 0.4);
    border-radius: 4px;
    transition: top 0.18s ease;
  }
  .skip-link:focus { top: 12px; outline: 2px solid #F4D470; outline-offset: 2px; }
  .tile-link-cue {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 14px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--bl-gold, #C8A84E);
    transition: transform 0.18s ease, color 0.18s ease;
  }
  .tile:hover .tile-link-cue { color: #B8902C; transform: translateX(2px); }
  .tile-link-cue .arrow { transition: transform 0.18s ease; }
  .tile:hover .tile-link-cue .arrow { transform: translateX(3px); }

  /* ─── Body-light footer · contrast killshot ───
     The footer has class="footer body-light" but its <h4> + <a> default colors
     cascade from style.css (dark-theme palette = light text), making them
     invisible against the cream background. These overrides force readable
     dark navy + hover gold for body-light footers across the site. */
  .footer.body-light { background: #FAF7F0; color: #0F1B2D; }
  .footer.body-light h4 {
    color: #0F1B2D !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 14px;
  }
  .footer.body-light ul { list-style: none; padding: 0; }
  .footer.body-light ul li { margin-bottom: 8px; }
  .footer.body-light a {
    color: rgba(15, 27, 45, 0.78) !important;
    text-decoration: none;
    transition: color 0.18s ease, opacity 0.18s ease;
  }
  .footer.body-light a:hover {
    color: #B8902C !important;
  }
  .footer.body-light .footer-meta strong {
    color: #0F1B2D !important;
    font-weight: 700;
  }
  .footer.body-light .footer-meta {
    color: rgba(15, 27, 45, 0.85);
  }
  .footer.body-light .footer-bottom {
    border-top: 1px solid rgba(15, 27, 45, 0.1);
    color: rgba(15, 27, 45, 0.5);
  }
  .footer.body-light .footer-bottom span {
    color: rgba(15, 27, 45, 0.55) !important;
  }

  /* ─── SOV coin — heaven-sent · AR-tilt · institutional sovereign token ─── */
  .sov-coin-wrap {
    position: relative;
    width: 200px; height: 220px;
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 14px 0 0;
    perspective: 1100px;
    cursor: grab;
  }
  .sov-coin-wrap:active { cursor: grabbing; }

  /* Outer breathing aura — light spilling outward from the coin */
  .sov-coin-aura {
    position: absolute;
    inset: -36px;
    background:
      radial-gradient(ellipse 60% 55% at 50% 42%,
        rgba(252, 224, 144, 0.55) 0%,
        rgba(244, 196, 64, 0.22) 28%,
        rgba(244, 196, 64, 0.06) 58%,
        rgba(244, 196, 64, 0) 78%);
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;
    animation: sovAuraBreath 5.4s ease-in-out infinite;
  }

  /* Concentric ring pulses — slow, ceremonial */
  .sov-coin-rings {
    position: absolute;
    inset: 16px 16px auto 16px;
    height: 178px;
    pointer-events: none;
    z-index: 1;
  }
  .sov-coin-rings .sov-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(244, 196, 64, 0.32);
    border-radius: 50%;
    opacity: 0;
    animation: sovRingExpand 6s ease-out infinite;
  }
  .sov-coin-rings .sov-ring-2 { animation-delay: 2s; }
  .sov-coin-rings .sov-ring-3 { animation-delay: 4s; }

  /* ═══ MOBILE WOW · 3D coin flip · the back face is the authentication seal ═══ */
  /* iOS Safari 3D quirks · always provide -webkit- prefixes for preserve-3d
     and backface-visibility, otherwise the back face renders behind on flip */
  .sov-coin-flip {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.22, 0.8, 0.18, 1);
            transition:         transform 1s cubic-bezier(0.22, 0.8, 0.18, 1);
    will-change: transform;
    /* Ensure the flip container itself receives taps */
    pointer-events: auto;
    cursor: pointer;
  }
  .sov-coin-flip.flipped {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  .sov-coin-flip .sov-coin,
  .sov-coin-flip .sov-coin-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .sov-coin-flip .sov-coin-back {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Decorative aura must never eat taps · only the wrap should */
  .sov-coin-aura { pointer-events: none; }
  .sov-coin-stage { pointer-events: auto; }
  /* The coin wrap is the tap target on every platform */
  .sov-coin-wrap {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Subtle tap-hint pulse on mobile · 3 gentle scale pulses after page load,
     only if the coin hasn't been engaged yet */
  @media (max-width: 640px) and (hover: none) {
    .sov-coin-wrap { cursor: pointer; }
    .sov-coin-flip:not(.flipped):not(.engaged) {
      animation: sovTapHint 4s ease-in-out 1.6s 3 both;
    }
    @keyframes sovTapHint {
      0%, 100% { transform: scale(1); }
      10%      { transform: scale(1.022); }
      20%      { transform: scale(1); }
    }
    /* Tiny "tap me" affordance · only on mobile · fades after first interaction */
    .sov-coin-wrap::after {
      content: "TAP TO TURN";
      position: absolute;
      bottom: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 8px;
      letter-spacing: 0.36em;
      color: rgba(244, 212, 112, 0.65);
      pointer-events: none;
      transition: opacity 0.5s;
      animation: tapHintFade 5s ease-in-out 2s 1 both;
    }
    .sov-coin-wrap.engaged::after {
      opacity: 0;
    }
    @keyframes tapHintFade {
      0%   { opacity: 0; }
      30%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { opacity: 0.4; }
    }
  }

  /* The 3D stage — accepts cursor-parallax tilt for AR feel */
  .sov-coin-stage {
    position: relative;
    z-index: 2;
    width: 178px;
    height: 178px;
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateY(0deg) rotateX(0deg);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  /* Floor shadow — selling the "floating" illusion */
  .sov-floor-shadow {
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 150px;
    height: 18px;
    background: radial-gradient(ellipse at center,
      rgba(8, 12, 22, 0.55) 0%,
      rgba(8, 12, 22, 0.30) 40%,
      rgba(8, 12, 22, 0) 75%);
    filter: blur(6px);
    z-index: 1;
    animation: sovShadowBreath 5.4s ease-in-out infinite;
  }

  /* The coin itself — never spins; breathes + reacts to cursor */
  .sov-coin {
    position: relative;
    width: 178px;
    height: 178px;
    animation: sovCoinBreath 5.4s ease-in-out infinite;
    filter:
      drop-shadow(0 18px 32px rgba(140, 92, 8, 0.55))
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
  }

  /* Top sky-gloss — moves subtly like sunlight catching the rim */
  .sov-top-gloss {
    transform-origin: 120px 120px;
    animation: sovGlossBreath 5.4s ease-in-out infinite;
    mix-blend-mode: screen;
  }

  /* Specular arc — the spinning halo of light AROUND the rim
     This is how we get "spinning" without rotating the coin face */
  .sov-specular-arc {
    transform-origin: 120px 120px;
    animation: sovSpecArc 9s linear infinite;
  }

  /* The deep-engraved Adinkrahene rings — never animate, they're the soul */
  .sov-adinkra { opacity: 0.85; }

  /* The embossed "SOV" inscription — never animates, the anchor */
  .sov-inscription { letter-spacing: 0.06em; }

  /* The curved rim text — slowly rotates like a coin being studied
     Defensive: explicitly suppress text-decoration + stroke leaks
     that some browsers (Safari, older Chromium) render on textPath */
  .sov-rim-text,
  .sov-rim-text-bot {
    text-decoration: none;
    stroke: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
  }
  .sov-rim-text {
    transform-origin: 120px 120px;
    animation: sovRimGlide 28s linear infinite;
  }

  .sov-coin-label {
    position: relative; z-index: 3;
    margin-top: 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(244, 212, 112, 0.92);
    text-shadow: 0 0 14px rgba(244, 212, 112, 0.45);
  }

  @keyframes sovCoinBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1.012); }
  }
  @keyframes sovGlossBreath {
    0%, 100% { opacity: 0.78; transform: rotate(-3deg); }
    50%      { opacity: 1;    transform: rotate(3deg); }
  }
  @keyframes sovSpecArc {
    0%   { transform: rotate(0deg);   opacity: 0.55; }
    50%  { opacity: 0.95; }
    100% { transform: rotate(360deg); opacity: 0.55; }
  }
  @keyframes sovRimGlide {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes sovAuraBreath {
    0%, 100% { opacity: 0.78; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
  }
  @keyframes sovShadowBreath {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scaleX(1); }
    50%      { opacity: 0.65; transform: translateX(-50%) scaleX(0.92); }
  }
  @keyframes sovRingExpand {
    0%   { opacity: 0.50; transform: scale(0.94); }
    70%  { opacity: 0;    transform: scale(1.42); }
    100% { opacity: 0;    transform: scale(1.5);  }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     SOV COIN · ALIVE LAYERS · added 2026-05-11
     Existing coin breathing is on 5-28s cycles — too subtle to register.
     These add the LIVE signals: inward sonar (2.8s), scan beam (6s),
     LIVE pill heartbeat (1.4s), center halo pulse (1.4s).
     All inside prefers-reduced-motion: no-preference, all pointer-events: none.
     ═════════════════════════════════════════════════════════════════════════ */

  /* Inner sonar rings · pulse INWARD opposite the outer ring-expand
     Creates a "live attesting" / sonar-sweep feel */
  .sov-sonar {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 178px; height: 178px;
    pointer-events: none;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sov-sonar-ring {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(244, 221, 141, 0.65);
    opacity: 0;
    animation: sovSonarPulse 2.8s ease-out infinite;
  }
  .sov-sonar-ring:nth-child(2) { animation-delay: 0.95s; }
  .sov-sonar-ring:nth-child(3) { animation-delay: 1.9s;  }

  @keyframes sovSonarPulse {
    0%   { transform: scale(1.42); opacity: 0; }
    25%  { opacity: 0.7; }
    100% { transform: scale(0.55); opacity: 0; }
  }

  /* Scan crosshair · horizontal + vertical beams sweep across the coin
     Out-of-phase so they alternate (H sweeps, then V sweeps) */
  .sov-scan {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 178px; height: 178px;
    overflow: hidden;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
  }
  .sov-scan-beam {
    position: absolute;
    pointer-events: none;
  }
  .sov-scan-h {
    width: 200%; height: 1px;
    top: 50%; left: -100%;
    background: linear-gradient(90deg, transparent, rgba(244, 221, 141, 0.42), transparent);
    box-shadow: 0 0 4px rgba(244, 221, 141, 0.22);
    animation: sovScanH 6s ease-in-out infinite;
  }
  .sov-scan-v {
    width: 1px; height: 200%;
    left: 50%; top: -100%;
    background: linear-gradient(180deg, transparent, rgba(244, 221, 141, 0.42), transparent);
    box-shadow: 0 0 4px rgba(244, 221, 141, 0.22);
    animation: sovScanV 6s ease-in-out infinite;
    animation-delay: 3s;
  }

  @keyframes sovScanH {
    0%, 30%  { left: -100%; opacity: 0; }
    35%      { opacity: 0.55; }
    85%      { opacity: 0.55; }
    100%     { left: 50%; opacity: 0; }
  }
  @keyframes sovScanV {
    0%, 30%  { top: -100%; opacity: 0; }
    35%      { opacity: 0.55; }
    85%      { opacity: 0.55; }
    100%     { top: 50%; opacity: 0; }
  }

  /* LIVE · ATTESTING pill · positioned above the coin */
  .sov-live-pill {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: rgba(11, 20, 34, 0.85);
    border: 1px solid rgba(244, 221, 141, 0.4);
    border-radius: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    color: rgba(244, 221, 141, 0.92);
    text-transform: uppercase;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
  }
  .sov-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
    animation: sovLiveDotPulse 1.4s ease-in-out infinite;
  }
  @keyframes sovLiveDotPulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.5;  transform: scale(1.4); }
  }

  /* Center heartbeat halo · pulses over the engraved center dot of the coin
     Real heartbeat rhythm: quick double-thump + pause */
  .sov-heartbeat {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 239, 168, 0.7), rgba(244, 221, 141, 0) 70%);
    pointer-events: none;
    z-index: 6;
    animation: sovHeartbeat 1.4s ease-in-out infinite;
  }
  @keyframes sovHeartbeat {
    0%        { transform: translate(-50%, -50%) scale(1);   opacity: 0.85; }
    10%       { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    20%       { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
    30%       { transform: translate(-50%, -50%) scale(1.6); opacity: 0.95; }
    45%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.85; }
  }

  /* Hash-rain canvas · gold hex characters drifting behind the hero
     CSS containment + GPU isolation so the canvas paints don't
     trigger full-page recomposites during scroll. */
  .hash-rain {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.55;
    /* Isolation hints — give this its own GPU compositing layer */
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    contain: layout style paint;
    /* Fade the center where the headline + coin sit so they aren't muddied */
    mask-image: radial-gradient(ellipse 45% 55% at center,
                                transparent 0%,
                                rgba(0,0,0,0.3) 35%,
                                rgba(0,0,0,0.8) 65%,
                                rgba(0,0,0,1) 90%);
    -webkit-mask-image: radial-gradient(ellipse 45% 55% at center,
                                        transparent 0%,
                                        rgba(0,0,0,0.3) 35%,
                                        rgba(0,0,0,0.8) 65%,
                                        rgba(0,0,0,1) 90%);
  }

  @media (max-width: 640px) {
    .sov-sonar, .sov-scan { width: 156px; height: 156px; }
    .sov-live-pill { top: -28px; font-size: 8.5px; padding: 4px 10px; }
    .hash-rain { opacity: 0.35; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sov-coin, .sov-coin-aura, .sov-top-gloss, .sov-specular-arc,
    .sov-rim-text, .sov-floor-shadow, .sov-coin-rings .sov-ring,
    .sov-sonar-ring, .sov-scan-beam, .sov-live-dot, .sov-heartbeat {
      animation: none !important;
    }
    .sov-coin-rings, .sov-sonar, .sov-scan { display: none; }
    .hash-rain { display: none; }
    .sov-coin-stage { transition: none !important; }
  }
  @media (max-width: 640px) {
    .sov-coin-wrap   { width: 156px; height: 176px; margin: 0 auto; }
    .sov-coin-stage  { width: 140px; height: 140px; }
    .sov-coin        { width: 140px; height: 140px; }
    .sov-coin-rings  { inset: 14px 14px auto 14px; height: 140px; }
    .sov-coin-label  { font-size: 9.5px; margin-top: 12px; }
  }

  /* Defensive: ensure the cine-stat-block centers the new coin alongside the equation */
  .cine-stat-block {
    align-items: center !important;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
  }
  @media (max-width: 640px) {
    .cine-stat-block { gap: 16px; }
  }

  /* ─── Flow SVG arrow flow animation · the chain never sleeps ─── */
  .flow-svg-host img {
    /* preserve native rendering — animation goes inside the SVG via inline edits */
  }

  /* ─── Stat number breath · subtle gold glow pulse on key stats ─── */
  .body-light .counter,
  .cine-proof-cell .num {
    animation: statBreath 5.5s ease-in-out infinite;
  }
  @keyframes statBreath {
    0%, 100% { text-shadow: 0 0 0 rgba(244, 212, 112, 0); }
    50%      { text-shadow: 0 0 18px rgba(244, 212, 112, 0.35); }
  }
  @media (prefers-reduced-motion: reduce) {
    .body-light .counter, .cine-proof-cell .num { animation: none; }
  }

/* ─── assets/css/kommit-reveal.css ─────────────────────────────────────── */
    /* (a) Kommit protocol pills — cascade reveal on enter */
    .kommit-step{
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1), border-color .25s, background .25s;
      position: relative;
      overflow: hidden;
    }
    .kommit-step.is-revealed{
      opacity: 1;
      transform: translateY(0);
    }
    .kommit-step:hover{
      border-color: rgba(244,196,64,0.55);
      background: rgba(13,24,39,0.85);
    }
    /* Subtle inner sheen that travels across each pill on a stagger */
    @media (prefers-reduced-motion: no-preference){
      .kommit-step::after{
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(115deg, transparent 30%, rgba(244,221,141,0.10) 50%, transparent 70%);
        transform: translateX(-120%);
        animation: kommitPillSheen 9.5s ease-in-out infinite;
        pointer-events: none;
      }
      .kommit-step:nth-child(1)::after{ animation-delay: 0s; }
      .kommit-step:nth-child(2)::after{ animation-delay: 1.6s; }
      .kommit-step:nth-child(3)::after{ animation-delay: 3.2s; }
      .kommit-step:nth-child(4)::after{ animation-delay: 4.8s; }
    }
    @keyframes kommitPillSheen{
      0%, 78%, 100% { transform: translateX(-120%); }
      88%, 92%      { transform: translateX(220%); }
    }

    /* (b) Kommit aperture target — breathing rings + center pulse */
    @media (prefers-reduced-motion: no-preference){
      .kommit-strip-glyph-inner svg .k-ring{
        transform-box: fill-box;
        transform-origin: center;
        animation: kommitRingBreath 4.6s ease-in-out infinite;
      }
      .kommit-strip-glyph-inner svg .k-ring--2{ animation-delay: .35s; }
      .kommit-strip-glyph-inner svg .k-ring--3{ animation-delay: .70s; }
      .kommit-strip-glyph-inner svg .k-ring--4{ animation-delay: 1.05s; }

      .kommit-strip-glyph-inner svg .k-core{
        transform-box: fill-box;
        transform-origin: center;
        animation: kommitCorePulse 2.4s ease-in-out infinite;
      }
      .kommit-strip-glyph-inner svg .k-tick{
        animation: kommitTickPulse 3.2s ease-in-out infinite;
      }
      .kommit-strip-glyph-inner svg .k-tick--2{ animation-delay: .4s; }
      .kommit-strip-glyph-inner svg .k-tick--3{ animation-delay: .8s; }
      .kommit-strip-glyph-inner svg .k-tick--4{ animation-delay: 1.2s; }
    }
    @keyframes kommitRingBreath{
      0%, 100% { transform: scale(1.00); opacity: .85; }
      50%      { transform: scale(0.92); opacity: 1; }
    }
    @keyframes kommitCorePulse{
      0%, 100% { transform: scale(1.00); opacity: 1; filter: drop-shadow(0 0 3px rgba(244,221,141,.65)); }
      50%      { transform: scale(1.35); opacity: .9; filter: drop-shadow(0 0 8px rgba(244,221,141,.95)); }
    }
    @keyframes kommitTickPulse{
      0%, 100% { stroke: rgba(244,196,64,0.55); }
      50%      { stroke: rgba(244,221,141,0.95); }
    }

    /* (c) Savers cards — hover lift + radial glow */
    [data-saver-card]{
      transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s, border-color .32s;
      position: relative;
      overflow: hidden;
    }
    [data-saver-card]::before{
      content: '';
      position: absolute;
      inset: -1px;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(200,168,78,0.18) 0%, rgba(200,168,78,0.04) 32%, transparent 60%);
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
      z-index: 0;
    }
    [data-saver-card] > *{ position: relative; z-index: 1; }
    [data-saver-card]:hover{
      transform: translateY(-6px);
      border-color: rgba(200,168,78,0.55) !important;
      box-shadow: 0 18px 44px -18px rgba(15,27,45,0.28), 0 0 0 1px rgba(200,168,78,0.18);
    }
    [data-saver-card]:hover::before{ opacity: 1; }

    /* Numeric counters breathe gently when the card is in view */
    @media (prefers-reduced-motion: no-preference){
      .is-revealed [data-saver-num]{
        animation: saverNumGlow 5.2s ease-in-out infinite;
      }
    }
    @keyframes saverNumGlow{
      0%, 100% { text-shadow: none; }
      50%      { text-shadow: 0 0 18px rgba(200,168,78,0.45); }
    }

    /* (d) "Designed for" chip shimmer + live dot */
    [data-saver-chip]{
      position: relative;
      overflow: hidden;
      transition: transform .25s, border-color .25s, color .25s;
    }
    [data-saver-chip]:hover{
      transform: translateY(-1px);
      border-color: rgba(200,168,78,0.65) !important;
    }
    @media (prefers-reduced-motion: no-preference){
      [data-saver-chip]::after{
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(115deg, transparent 35%, rgba(200,168,78,0.28) 50%, transparent 65%);
        transform: translateX(-120%);
        animation: saverChipShimmer 7.2s ease-in-out infinite;
        pointer-events: none;
      }
      [data-saver-chip]:nth-of-type(1)::after{ animation-delay: 0s; }
      [data-saver-chip]:nth-of-type(2)::after{ animation-delay: 1.4s; }
      [data-saver-chip]:nth-of-type(3)::after{ animation-delay: 2.8s; }
      [data-saver-chip]:nth-of-type(4)::after{ animation-delay: 4.2s; }
    }
    @keyframes saverChipShimmer{
      0%, 82%, 100% { transform: translateX(-120%); }
      90%, 94%      { transform: translateX(220%); }
    }

    /* The little live dot on the chip row label */
    .saver-chip-live{
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #1FE07F;
      box-shadow: 0 0 6px rgba(31,224,127,0.85);
      margin-left: 8px;
      vertical-align: middle;
    }
    @media (prefers-reduced-motion: no-preference){
      .saver-chip-live{ animation: saverDotPulse 2.4s ease-in-out infinite; }
    }
    @keyframes saverDotPulse{
      0%, 100% { transform: scale(1.0); opacity: 1; }
      50%      { transform: scale(1.35); opacity: 0.55; }
    }

    /* Reduced motion — disable all animations cleanly */
    @media (prefers-reduced-motion: reduce){
      .kommit-step{ opacity: 1; transform: none; }
    }

/* ─── assets/css/duality-3d.css ─────────────────────────────────────── */
  @media (min-width: 641px){
    /* Establish 3D perspective on the duality section */
    .duality-section{
      perspective: 1600px;
      perspective-origin: 50% 35%;
    }
    .duality-section .wrap{
      transform-style: preserve-3d;
      transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
    }

    /* Each medallion floats at its own z-depth with breath rotation */
    .mini-medallion{
      transform-style: preserve-3d;
      animation: triFloat3D 9.5s ease-in-out infinite;
    }
    .duality-grid > .duality-side:first-child .mini-medallion{
      animation-delay: 0s;
      transform-origin: 50% 50%;
    }
    .duality-grid > .duality-side:last-child .mini-medallion{
      animation-delay: 3.2s;
    }
    .witness-row .mini-medallion{
      animation-delay: 6.4s;
    }
    @keyframes triFloat3D{
      0%, 100% { transform: translateZ(0) rotateY(0deg) rotateX(0deg); }
      25%      { transform: translateZ(20px) rotateY(-4deg) rotateX(2deg); }
      50%      { transform: translateZ(0) rotateY(0deg) rotateX(0deg); }
      75%      { transform: translateZ(-12px) rotateY(4deg) rotateX(-2deg); }
    }

    /* SOV bind node — TRUE geometric center of the trinity triangle.
       v6 2026-05-22: now sits at the exact centroid so it reads as
       the binding point, not a satellite. translateY pushed to 60px
       (was 120) since the bind-node itself is now 132px tall — when
       the larger node is added to the smaller offset, SOV lands at
       the visual centroid of the MATTER/MIND/WITNESS triangle. */
    .duality-bind{
      transform-style: preserve-3d;
      perspective: 800px;
      transform: translateY(60px);
    }
    .duality-bind .sov-bind-node{
      transform-style: preserve-3d;
      animation: sovBind3D 8s ease-in-out infinite;
      position: relative;
      z-index: 5;
    }
    @keyframes sovBind3D{
      0%, 100% { transform: translateZ(20px); }
      50%      { transform: translateZ(36px); }
    }
    /* SVG nucleus overlay — sits absolute on top of the existing SOV node */
    .sov-nucleus{
      position: absolute;
      top: 50%; left: 50%;
      width: 220px; height: 220px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
    }
    .sov-nucleus .sov-orbit{
      transform-origin: 100px 100px;
      transform-box: fill-box;
    }
    .sov-nucleus .sov-orbit-1{ animation: sovOrbitSpin1 9s linear infinite; }
    .sov-nucleus .sov-orbit-2{ animation: sovOrbitSpin2 13s linear infinite reverse; }
    .sov-nucleus .sov-orbit-3{ animation: sovOrbitSpin3 11s linear infinite; }
    @keyframes sovOrbitSpin1{
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes sovOrbitSpin2{
      0%   { transform: rotate(60deg); }
      100% { transform: rotate(420deg); }
    }
    @keyframes sovOrbitSpin3{
      0%   { transform: rotate(-60deg); }
      100% { transform: rotate(300deg); }
    }
    .sov-nucleus .sov-electron{
      filter: drop-shadow(0 0 6px rgba(255,239,168,0.95));
    }
    .sov-nucleus .sov-core{
      filter: drop-shadow(0 0 14px rgba(244,221,141,0.65));
      transform-origin: 100px 100px;
      transform-box: fill-box;
      animation: sovCoreBeat 2.2s ease-in-out infinite;
    }
    @keyframes sovCoreBeat{
      0%, 100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.18); opacity: 0.9; }
    }
    /* Periodic energy wave emanating from nucleus outward */
    .sov-nucleus .sov-wave{
      transform-origin: 100px 100px;
      transform-box: fill-box;
      opacity: 0;
      animation: sovWavePulse 5s ease-out infinite;
    }
    .sov-nucleus .sov-wave-2{ animation-delay: 1.67s; }
    .sov-nucleus .sov-wave-3{ animation-delay: 3.33s; }
    @keyframes sovWavePulse{
      0%   { transform: scale(0.5); opacity: 0.8; stroke-width: 1.5; }
      90%  { transform: scale(2.4); opacity: 0; stroke-width: 0.3; }
      100% { transform: scale(2.4); opacity: 0; }
    }

    /* Ambient gold particle field — drifts in z-space behind the medallions */
    .trinity-3d-particles{
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      perspective: 900px;
      transform-style: preserve-3d;
      overflow: hidden;
    }
    .trinity-3d-particles .t3d-p{
      position: absolute;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: #FFEFA8;
      box-shadow: 0 0 6px rgba(244,221,141,0.85);
      opacity: 0;
      animation: t3dDrift 18s linear infinite;
    }
    /* Distribute particles with varied delays + start positions */
    .t3d-p:nth-child(1)  { left: 8%;  top: 20%; animation-delay: 0s;    animation-duration: 14s; }
    .t3d-p:nth-child(2)  { left: 18%; top: 70%; animation-delay: 1.2s;  animation-duration: 16s; }
    .t3d-p:nth-child(3)  { left: 28%; top: 35%; animation-delay: 2.4s;  animation-duration: 19s; }
    .t3d-p:nth-child(4)  { left: 35%; top: 85%; animation-delay: 3.6s;  animation-duration: 22s; }
    .t3d-p:nth-child(5)  { left: 45%; top: 12%; animation-delay: 4.8s;  animation-duration: 17s; }
    .t3d-p:nth-child(6)  { left: 55%; top: 60%; animation-delay: 6.0s;  animation-duration: 20s; }
    .t3d-p:nth-child(7)  { left: 62%; top: 28%; animation-delay: 7.2s;  animation-duration: 14s; }
    .t3d-p:nth-child(8)  { left: 72%; top: 78%; animation-delay: 8.4s;  animation-duration: 23s; }
    .t3d-p:nth-child(9)  { left: 82%; top: 18%; animation-delay: 9.6s;  animation-duration: 16s; }
    .t3d-p:nth-child(10) { left: 92%; top: 65%; animation-delay: 10.8s; animation-duration: 21s; }
    .t3d-p:nth-child(11) { left: 12%; top: 55%; animation-delay: 5.4s;  animation-duration: 18s; }
    .t3d-p:nth-child(12) { left: 25%; top: 10%; animation-delay: 11.6s; animation-duration: 15s; }
    .t3d-p:nth-child(13) { left: 38%; top: 50%; animation-delay: 13.2s; animation-duration: 19s; }
    .t3d-p:nth-child(14) { left: 48%; top: 88%; animation-delay: 14.4s; animation-duration: 17s; }
    .t3d-p:nth-child(15) { left: 65%; top: 45%; animation-delay: 15.6s; animation-duration: 20s; }
    .t3d-p:nth-child(16) { left: 78%; top: 22%; animation-delay: 16.8s; animation-duration: 22s; }
    .t3d-p:nth-child(17) { left: 88%; top: 82%; animation-delay: 12.0s; animation-duration: 16s; }
    .t3d-p:nth-child(18) { left: 5%;  top: 88%; animation-delay: 8.0s;  animation-duration: 18s; }
    @keyframes t3dDrift{
      0%   { opacity: 0; transform: translateZ(-300px) translateY(0); }
      15%  { opacity: 0.95; }
      85%  { opacity: 0.95; }
      100% { opacity: 0; transform: translateZ(400px) translateY(-120px); }
    }

    /* Triangle threads pop forward into 3D space */
    .duality-triangle-threads{
      transform-style: preserve-3d;
      transform: translateZ(20px);
    }
    .duality-triangle-threads path{
      filter: drop-shadow(0 0 6px rgba(244,221,141,0.45));
    }

    /* Mouse-tracked parallax — set via JS through CSS custom properties */
    .duality-section .wrap[data-parallax]{
      transform: rotateY(var(--paraX, 0deg)) rotateX(var(--paraY, 0deg));
    }

    /* Reduced motion · disable 3D animations */
    @media (prefers-reduced-motion: reduce){
      .mini-medallion, .duality-bind .sov-bind-node,
      .duality-bind .sov-bind-node::before,
      .duality-bind .sov-bind-node::after,
      .trinity-3d-particles .t3d-p{
        animation: none !important;
      }
      .duality-section .wrap{ transform: none !important; }
    }
  }

/* ─── assets/css/counter-anim.css ─────────────────────────────────────── */
  @media (min-width: 641px){

    /* (a) Counter elements — start at 0 opacity, glow when count completes */
    .body-light .counter,
    .counter[data-counter-target]{
      display: inline-block;
      transition: text-shadow 0.5s ease;
    }
    .counter.counted{
      animation: counterArrive 1.4s ease-out;
    }
    @keyframes counterArrive{
      0%   { text-shadow: 0 0 22px rgba(200,168,78,0.85); }
      100% { text-shadow: 0 0 0   rgba(200,168,78,0); }
    }

    /* (b) Universal card hover physics — single unified motion language
           applied to every card-like element across the page. Lift +
           gold border brightening + radial gold halo following position. */
    .body-light .section [class*="bg-card"],
    .body-light [style*="--bl-bg-card"],
    .body-light [style*="background: var(--bl-bg-card)"],
    .photo-cta .photo-content,
    .four-pieces > div,
    .institutions-card,
    .saver-step,
    .two-paths-card,
    .ghana-stat-card{
      transition: transform .35s cubic-bezier(.2,.7,.3,1),
                  box-shadow .35s ease,
                  border-color .35s ease !important;
      position: relative;
    }
    /* Hover state — same lift across all card categories */
    .body-light .section [class*="bg-card"]:hover,
    .body-light [style*="--bl-bg-card"]:hover,
    .photo-cta .photo-content:hover,
    .four-pieces > div:hover,
    .institutions-card:hover,
    .saver-step:hover,
    .two-paths-card:hover,
    .ghana-stat-card:hover{
      transform: translateY(-5px);
      box-shadow:
        0 20px 50px -22px rgba(15,27,45,0.28),
        0 0 0 1px rgba(200,168,78,0.32),
        inset 0 1px 0 rgba(255,255,255,0.5) !important;
      border-color: rgba(200,168,78,0.45) !important;
    }
    /* Specifically lift the dark Ghana stat cards on the dark section */
    .fade-up [style*="background: var(--bl-bg-card)"][style*="counter"]{
      transition: transform .35s, box-shadow .35s, border-color .35s !important;
    }

    /* (c) Photo anchor Ken Burns — was a 24s photoZoom already, lift it
           to a more cinematic 32s with deeper scale range + tighter brightness */
    .photo-anchor .photo-img{
      animation: photoZoomAAA 32s ease-in-out infinite alternate !important;
      filter: brightness(0.68) contrast(1.08) saturate(1.12) !important;
    }
    @keyframes photoZoomAAA{
      from { transform: scale(1.02) translate(0, 0); }
      to   { transform: scale(1.18) translate(-1.5%, -1%); }
    }

    /* (d) Four Pieces icons — gentle pulse + subtle gold halo */
    .four-pieces svg,
    .four-pieces [class*="icon"],
    .body-light section svg[viewBox]{
      transition: transform .35s ease, filter .35s ease;
    }
    /* Look for the small icon boxes by their styled background */
    .body-light div[style*="border-radius"][style*="background"][style*="rgba(200"]{
      animation: aaaFourPiecesPulse 6s ease-in-out infinite;
    }
    @keyframes aaaFourPiecesPulse{
      0%, 100% { box-shadow: 0 0 0 0 rgba(200,168,78,0); }
      50%      { box-shadow: 0 0 0 5px rgba(200,168,78,0.10), 0 0 14px rgba(200,168,78,0.18); }
    }

    /* (e) Gold-thread dividers at every dark↔light section transition.
           Targets the boundary where a dark section ends and a light
           section begins (and vice versa). */
    .photo-anchor::after,
    .photo-anchor::before,
    .body-light::before,
    main.body-light section:first-child::before{
      content: '';
      position: absolute;
      left: 12%; right: 12%;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(200,168,78,0.28) 35%,
        rgba(200,168,78,0.42) 50%,
        rgba(200,168,78,0.28) 65%,
        transparent 100%);
      z-index: 5;
      pointer-events: none;
    }
    .body-light::before,
    main.body-light section:first-child::before{ top: 0; }

    /* (f) Warm cream atmospheric gradient on light sections — keeps
           them from feeling stark/clinical against the dark cinematic
           sections above. Adds a barely-perceptible warm gold wash. */
    main.body-light{
      background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%,
          rgba(244,196,64,0.05) 0%,
          rgba(244,196,64,0.02) 25%,
          transparent 50%),
        radial-gradient(ellipse 60% 40% at 20% 100%,
          rgba(244,196,64,0.04) 0%,
          rgba(244,196,64,0.01) 30%,
          transparent 55%);
    }

    /* Stat number breath — subtle gold pulse on every numeric stat */
    .body-light .counter,
    .body-light h3[style*="color: var(--bl-gold)"],
    .cine-proof-cell .num{
      animation: aaaStatBreath 6s ease-in-out infinite;
    }
    @keyframes aaaStatBreath{
      0%, 100% { text-shadow: 0 0 0 rgba(200,168,78,0); }
      50%      { text-shadow: 0 0 16px rgba(200,168,78,0.32); }
    }

    /* Section ambient corner-glows — gold mist in the corners of dark slabs */
    .photo-anchor,
    section[style*="background: var(--bl-bg-soft)"],
    section[style*="linear-gradient(135deg, #0F1B2D"]{
      position: relative;
    }
    .photo-anchor::before{
      content: '';
      position: absolute;
      top: -1px; left: 18%; right: 18%;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(244,196,64,0.32) 50%,
        transparent 100%);
      z-index: 5;
      pointer-events: none;
    }

    /* Reduced motion · disable polish animations */
    @media (prefers-reduced-motion: reduce){
      .photo-anchor .photo-img{ animation: none !important; transform: scale(1.05) !important; }
      .body-light .counter,
      .body-light h3[style*="color: var(--bl-gold)"],
      .cine-proof-cell .num{ animation: none !important; }
      .body-light div[style*="border-radius"][style*="rgba(200"]{ animation: none !important; }
    }
  }

/* ─── assets/css/yarn.css ─────────────────────────────────────── */
  /* YARN · 2026-05-13 · respectful reference per CLAUDE.md */
  :root{
    --yarn-ochre-red:    #A0522D;
    --yarn-ochre-yellow: #DAA520;
    --yarn-ochre-white:  #F5E6D3;
    --yarn-ochre-char:   #1A1410;
    --yarn-ochre-burnt:  #8B4513;
    --yarn-dot:          rgba(218, 165, 32, .35);
    --yarn-dot-dim:      rgba(218, 165, 32, .12);

    /* ═══════════════════════════════════════════════════════════════════
       MANTIS-SHRIMP 16-color palette · 2026-05-23
       Conceptual frame: the gold is verified at frequencies invisible
       to humans (XRF, polarized light, hardware crypto). The mantis
       shrimp sees with 16 photoreceptors against our 3 — the perfect
       metaphor for hyperspectral verification.

       Cool quadrant  = "the unseen verification spectrum" (UV-shifted)
       Polarized      = "the geometry of trust" (iridescent cyan)
       Gold authority = "Sika Dwa Kofi · preserved unchanged"
       Warm depth     = "the heat of physical mass"

       Used additively. Existing tokens (--bl-gold, --gold-bright, etc.)
       remain canonical. Mantis tokens are NEW siblings, not replacements.
       ════════════════════════════════════════════════════════════════ */
    /* Cool quadrant · UV-shifted "the unseen verification spectrum" */
    --ms-uv-01:   #0A0518;   /* Stomatopod black · UV-edge void          */
    --ms-uv-02:   #1A0F35;   /* Carapace violet · deep navy-violet       */
    --ms-uv-03:   #2E1B5B;   /* Indigo abyss · UV-shifted shadow         */
    --ms-uv-04:   #5B3FA0;   /* Polarized amethyst · mid violet          */
    /* Polarized quadrant · "the geometry of trust" */
    --ms-pol-05:  #0B7A8F;   /* Reef cyan · deep teal                    */
    --ms-pol-06:  #1FA8C8;   /* Polarized turquoise · electric mid-cyan  */
    --ms-pol-07:  #4FE0E0;   /* Holographic mint · bright iridescent     */
    --ms-pol-08:  #A8FFEC;   /* Spectral foam · pale luminous cyan       */
    /* Gold authority · Sika Dwa Kofi preserved (canonical) */
    --ms-au-09:   #3F2E10;   /* Struck-bronze shadow · deepest gold-brown */
    --ms-au-10:   #8B6E2A;   /* Aged bullion · mid bronze                */
    --ms-au-11:   #C8A84E;   /* Sika gold · canonical VPAY gold          */
    --ms-au-12:   #F4DD8D;   /* Royal struck · light gold accent         */
    --ms-au-13:   #FFEFA8;   /* Solar leaf · brightest gold              */
    /* Warm depth · "the heat of physical mass" */
    --ms-em-14:   #A02B1A;   /* Crimson ember · deep coral-red           */
    --ms-em-15:   #E85D3D;   /* Saffron flare · warm orange-red accent   */
    --ms-em-16:   #FFB47F;   /* Apricot dawn · cool→warm bridge          */
  }
  .yarn-strip{
    position:relative; width:100%; height:26px; overflow:hidden;
    background: linear-gradient(180deg,
      rgba(160, 82, 45, .04) 0%, rgba(160, 82, 45, .13) 50%, rgba(160, 82, 45, .04) 100%);
    border-bottom: 1px solid rgba(218, 165, 32, .14);
    z-index: 1;
  }
  .yarn-strip::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      radial-gradient(circle at 4px 6px,  var(--yarn-dot)     0.7px, transparent 1.3px),
      radial-gradient(circle at 8px 18px, var(--yarn-dot-dim) 0.6px, transparent 1.1px);
    background-size: 26px 12px, 34px 12px;
    background-position: 0 0, 0 14px;
    opacity: .9;
    animation: yarnDrift 22s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){ .yarn-strip::before{ animation:none; } }
  @keyframes yarnDrift{
    0%   { background-position: 0 0, 0 14px; }
    100% { background-position: 260px 0, -340px 14px; }
  }
  .yarn-strip .yarn-label{
    position:absolute; top:50%; left:32px; transform:translateY(-50%);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 8.5px; letter-spacing: 3px;
    color: var(--yarn-ochre-yellow);
    text-transform: uppercase; opacity: .7; z-index: 3;
    background: rgba(0,0,0,.78); padding: 2px 9px;
  }
  .yarn-strip .yarn-anchor{
    position:absolute; top:50%; right:32px; transform:translateY(-50%);
    font-family: Georgia, 'Iowan Old Style', serif;
    font-size: 10px; font-style: italic;
    color: var(--yarn-ochre-white); opacity: .55; z-index: 3;
    background: rgba(0,0,0,.78); padding: 2px 10px;
  }
  @media (max-width: 640px){ .yarn-strip .yarn-anchor{ display:none; } }

  /* ── Consumer section responsive ── */
  @media (max-width: 700px) {
    #save [style*="grid-template-columns: repeat(3, 1fr)"] {
      grid-template-columns: 1fr !important;
    }
    #save [style*="grid-template-columns: 1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
    #two-paths [style*="grid-template-columns: 1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
    #context [style*="grid-template-columns: auto 1fr"] {
      grid-template-columns: 1fr !important;
    }
    #context [style*="grid-template-columns: repeat(5, 1fr)"] {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

/* ─── assets/css/story-panels.css ─────────────────────────────────────── */
  .mobile-story { display: none; }

  @media (max-width: 640px) {
    /* Hide every desktop section between header and footer · the story replaces them */
    body > .hero,
    body > .live-ticker-shell,
    body > .photo-anchor,
    body > .physics-strip,
    body > .kommit-strip,
    body > .duality-banner,
    body > .duality-section,
    body > main.body-light,
    body > .closing-cta {
      display: none !important;
    }

    /* SMOOTHNESS FIX 2026-05-10 · scroll-snap removed.
       Previous `scroll-snap-type: y proximity` on <html> + `scroll-snap-stop: always`
       on panels resisted iOS Safari momentum scroll, making the page feel "draggy"
       — like dragging things instead of scrolling. Removed both. Panels still feel
       like distinct sections via 100svh min-height, but users can scroll freely
       with native iOS rubber-band momentum. */
    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      /* ─── Horizontal lock · 2026-05-23 ───
         Kill any sideways drift. Fixed/absolute children (sticky pill, ticker,
         off-screen animation start states like translateX(-120%) ribbons, the
         left:-100% scrim highlights) MUST NOT push the document past viewport
         width. Without this, mobile Safari surfaces a horizontal scrollbar and
         the page "floats" left/right when the user pans. */
      overflow-x: hidden;
      max-width: 100vw;
    }
    body {
      -webkit-overflow-scrolling: touch;  /* native iOS momentum */
      overscroll-behavior-y: contain;     /* no rubber-band glitches */
      touch-action: auto;                 /* 2026-05-30 · was pan-y, which froze root scroll on Android (iOS ignored it); horizontal drift handled by overflow-x:hidden + max-width:100vw below */
      overflow-x: hidden;                 /* defensive · pair with html lock above */
      max-width: 100vw;
      position: relative;                 /* containing block for fixed-pos audits */
    }

    /* The story takes over */
    .mobile-story {
      display: block;
      position: relative;
      background: #060D18;
      width: 100%;
    }

    /* ─── Each panel · cinematic 100vh sections, no snap-trap ─── */
    .story-panel {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      width: 100%;
      padding: 56px 24px 96px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      isolation: isolate;
    }

    /* ════════════════════════════════════════════════════════════
       LIVE-IN-ACTION on mobile story panels · 2026-05-10
       Same "real-time-proof" register as the desktop duality block.
       Each IP panel gets a pulsing green LIVE pill so users know the
       attestation/commit work is happening RIGHT NOW.
       ═══════════════════════════════════════════════════════════ */
    .story-live {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 18px;
      margin: 24px auto;
      border-radius: 999px;
      background: rgba(31, 224, 127, 0.06);
      border: 1px solid rgba(31, 224, 127, 0.32);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.22em;
      color: rgba(31, 224, 127, 0.9);
      text-transform: uppercase;
      font-weight: 500;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .story-live::before {
      content: "";
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #1FE07F;
      box-shadow: 0 0 8px rgba(31,224,127,0.7);
      flex-shrink: 0;
    }
    @media (prefers-reduced-motion: no-preference) {
      .story-live::before {
        animation: storyLiveDot 1.8s ease-in-out infinite;
      }
      @keyframes storyLiveDot {
        0%, 100% {
          box-shadow: 0 0 4px rgba(31,224,127,0.5),
                      0 0 0 0 rgba(31,224,127,0.4);
        }
        50% {
          box-shadow: 0 0 14px rgba(31,224,127,1),
                      0 0 0 7px rgba(31,224,127,0);
        }
      }

      /* Physics Gate orbit · scan beam sweeping across · "the gate is reading" */
      .story-physics .gate-orbit::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg,
          transparent 0%,
          rgba(244, 196, 64, 0.85) 50%,
          transparent 100%);
        opacity: 0.6;
        animation: physicsOrbitScan 3.4s ease-in-out infinite;
        pointer-events: none;
        z-index: 5;
      }
      @keyframes physicsOrbitScan {
        0%   { transform: translateY(-110px); opacity: 0; }
        20%  { opacity: 0.85; }
        80%  { opacity: 0.85; }
        100% { transform: translateY(110px); opacity: 0; }
      }

      /* Kommit glyph · center pulses brighter · "a commit landed" */
      .story-kommit .kommit-glyph {
        animation: kommitGlyphPulse 2.8s ease-in-out infinite;
      }
      @keyframes kommitGlyphPulse {
        0%, 100% {
          filter: drop-shadow(0 0 4px rgba(244,196,64,0.4));
          transform: scale(1);
        }
        50% {
          filter: drop-shadow(0 0 16px rgba(244,196,64,0.85));
          transform: scale(1.04);
        }
      }
    }

    /* Subtle particle / grid background per panel */
    .story-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 600px 380px at 50% 18%, rgba(244,196,64,0.10), transparent 70%),
        repeating-linear-gradient(0deg, rgba(244,196,64,0.025) 0 1px, transparent 1px 60px),
        repeating-linear-gradient(90deg, rgba(244,196,64,0.025) 0 1px, transparent 1px 60px);
      pointer-events: none;
      z-index: 0;
    }
    .story-panel > * { position: relative; z-index: 1; }

    /* ─── Eyebrow pill ─── */
    .story-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px;
      background: rgba(244,196,64,0.08);
      border: 1px solid rgba(244,196,64,0.32);
      border-radius: 999px;
      font-family: var(--ff-mono);
      font-size: 10px; letter-spacing: 0.20em;
      color: #F4D470; text-transform: uppercase;
      margin-bottom: 28px;
    }
    .story-eyebrow .live-pulse {
      width: 7px; height: 7px; background: #1FE07F;
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(31, 224, 127, 0.7);
      animation: livePulse 1.6s ease-in-out infinite;
    }
    @keyframes livePulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.4); opacity: 0.6; }
    }

    /* ─── Headlines ─── */
    .story-panel h1, .story-panel h2 {
      font-family: var(--ff-serif);
      font-size: clamp(38px, 11vw, 56px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: #F1F5F9;
      margin: 0 0 18px;
      max-width: 16ch;
    }
    .story-panel h1 em, .story-panel h2 em {
      color: #F4D470;
      font-style: italic; font-weight: 700;
    }
    .story-panel p {
      font-family: var(--ff-serif);
      font-size: 16px; line-height: 1.55;
      color: rgba(232,224,204,0.82);
      max-width: 28ch;
      margin: 0 0 32px;
    }

    /* ─── CTA link inside panels ─── */
    .story-link, .story-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 22px;
      background: rgba(244,196,64,0.08);
      border: 1px solid rgba(244,196,64,0.55);
      border-radius: 8px;
      font-family: var(--ff-mono);
      font-size: 12px; letter-spacing: 0.16em;
      color: #F4D470; text-transform: uppercase;
      text-decoration: none;
      transition: background 0.22s, transform 0.22s;
    }
    .story-link:active, .story-cta:active {
      background: rgba(244,196,64,0.18);
      transform: scale(0.98);
    }
    .story-link:focus-visible, .story-cta:focus-visible {
      outline: 2px solid #F4D470;
      outline-offset: 3px;
    }
    .story-link .arrow, .story-cta .arrow { transition: transform 0.22s; }

    /* ─── Vertical progress dots (right edge) ─── */
    .story-dots {
      position: fixed;
      top: 50%;
      right: 14px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 50;
    }
    .story-dots span {
      display: block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(244,196,64,0.22);
      transition: background 0.28s, transform 0.28s, height 0.28s;
    }
    .story-dots span.active {
      background: #F4D470;
      transform: scale(1.2);
      box-shadow: 0 0 10px rgba(244,196,64,0.55);
    }
    .story-dots span:focus-visible {
      outline: 2px solid #F4D470;
      outline-offset: 4px;
      border-radius: 50%;
    }

    /* ─── Swipe cue (panel 1 only) ─── */
    .story-cue {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      font-family: var(--ff-mono);
      font-size: 9.5px; letter-spacing: 0.22em;
      color: rgba(244,196,64,0.55);
      text-transform: uppercase;
      animation: cueBreath 2.4s ease-in-out infinite;
    }
    .story-cue .arrow-down {
      font-size: 16px; color: #F4D470;
      animation: cueNudge 1.8s ease-in-out infinite;
    }
    @keyframes cueBreath {
      0%, 100% { opacity: 0.6; }
      50%      { opacity: 1; }
    }
    @keyframes cueNudge {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(6px); }
    }

    /* ─── Panel 1: HOOK · SOV coin big ─── */
    .story-hook {
      background:
        radial-gradient(ellipse 600px 600px at 50% 38%, rgba(244,196,64,0.18), transparent 70%),
        linear-gradient(180deg, #060D18 0%, #0A1422 100%);
    }
    .story-coin-wrap {
      position: relative;
      width: 240px; height: 240px;
      margin: 0 0 36px;
      display: grid; place-items: center;
      /* Tap-target hardening · iOS quirks */
      -webkit-perspective: 900px;
              perspective: 900px;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
              user-select: none;
    }
    .story-coin-aura {
      position: absolute; inset: -28px;
      background: radial-gradient(ellipse 60% 55% at 50% 42%,
        rgba(252,224,144,0.55) 0%, rgba(244,196,64,0.20) 30%,
        rgba(244,196,64,0.04) 58%, rgba(244,196,64,0) 78%);
      filter: blur(14px);
      animation: storyCoinAura 5.2s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes storyCoinAura {
      0%, 100% { opacity: 0.78; transform: scale(1); }
      50%      { opacity: 1;    transform: scale(1.10); }
    }
    /* Breathing wrapper · the breath animation lives here so it doesn't
       collide with the flip transform on the inner element */
    .story-coin-breath {
      width: 200px; height: 200px;
      position: relative;
      animation: storyCoinBreath 5.2s ease-in-out infinite;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }
    @keyframes storyCoinBreath {
      0%, 100% { transform: translateY(0) scale(1); }
      50%      { transform: translateY(-3px) scale(1.012); }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       MOBILE STORY · ALIVE LAYERS · added 2026-05-11
       Parallel to the desktop sov-coin ALIVE layers, scaled to 200px
       (matching the .story-coin-breath dimensions inside .story-coin-wrap).
       ═════════════════════════════════════════════════════════════════════════ */

    /* Inner sonar rings · pulse INWARD */
    .story-sonar {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 200px; height: 200px;
      pointer-events: none;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .story-sonar-ring {
      position: absolute;
      width: 100%; height: 100%;
      border-radius: 50%;
      border: 1.5px solid rgba(244, 221, 141, 0.65);
      opacity: 0;
      animation: storySonarPulse 2.8s ease-out infinite;
    }
    .story-sonar-ring:nth-child(2) { animation-delay: 0.95s; }
    .story-sonar-ring:nth-child(3) { animation-delay: 1.9s;  }

    @keyframes storySonarPulse {
      0%   { transform: scale(1.45); opacity: 0; }
      25%  { opacity: 0.7; }
      100% { transform: scale(0.55); opacity: 0; }
    }

    /* Scan crosshair beams */
    .story-scan {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 200px; height: 200px;
      overflow: hidden;
      border-radius: 50%;
      pointer-events: none;
      z-index: 5;
    }
    .story-scan-beam {
      position: absolute;
      pointer-events: none;
    }
    .story-scan-h {
      width: 200%; height: 1px;
      top: 50%; left: -100%;
      background: linear-gradient(90deg, transparent, rgba(244, 221, 141, 0.42), transparent);
      box-shadow: 0 0 4px rgba(244, 221, 141, 0.22);
      animation: storyScanH 6s ease-in-out infinite;
    }
    .story-scan-v {
      width: 1px; height: 200%;
      left: 50%; top: -100%;
      background: linear-gradient(180deg, transparent, rgba(244, 221, 141, 0.42), transparent);
      box-shadow: 0 0 4px rgba(244, 221, 141, 0.22);
      animation: storyScanV 6s ease-in-out infinite;
      animation-delay: 3s;
    }

    @keyframes storyScanH {
      0%, 30%  { left: -100%; opacity: 0; }
      35%      { opacity: 0.55; }
      85%      { opacity: 0.55; }
      100%     { left: 50%; opacity: 0; }
    }
    @keyframes storyScanV {
      0%, 30%  { top: -100%; opacity: 0; }
      35%      { opacity: 0.55; }
      85%      { opacity: 0.55; }
      100%     { top: 50%; opacity: 0; }
    }

    /* LIVE · ATTESTING pill */
    .story-live-pill {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 11px;
      background: rgba(11, 20, 34, 0.88);
      border: 1px solid rgba(244, 221, 141, 0.4);
      border-radius: 11px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 8.5px;
      letter-spacing: 0.22em;
      color: rgba(244, 221, 141, 0.92);
      text-transform: uppercase;
      pointer-events: none;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
      white-space: nowrap;
    }
    .story-live-dot {
      width: 5.5px; height: 5.5px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 7px rgba(74, 222, 128, 0.85);
      animation: storyLiveDotPulse 1.4s ease-in-out infinite;
    }
    @keyframes storyLiveDotPulse {
      0%, 100% { opacity: 1;    transform: scale(1); }
      50%      { opacity: 0.5;  transform: scale(1.4); }
    }

    /* Center heartbeat halo · double-thump rhythm */
    .story-heartbeat {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 20px; height: 20px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 239, 168, 0.7), rgba(244, 221, 141, 0) 70%);
      pointer-events: none;
      z-index: 6;
      animation: storyHeartbeat 1.4s ease-in-out infinite;
    }
    @keyframes storyHeartbeat {
      0%        { transform: translate(-50%, -50%) scale(1);   opacity: 0.85; }
      10%       { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
      20%       { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
      30%       { transform: translate(-50%, -50%) scale(1.6); opacity: 0.95; }
      45%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.85; }
    }

    /* Hash-rain · mobile · same JS engine, scoped inside Panel 1 */
    .hash-rain-mobile {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.40;
      mask-image: radial-gradient(ellipse 55% 55% at center,
                                  transparent 0%,
                                  rgba(0,0,0,0.3) 30%,
                                  rgba(0,0,0,0.85) 65%,
                                  rgba(0,0,0,1) 90%);
      -webkit-mask-image: radial-gradient(ellipse 55% 55% at center,
                                          transparent 0%,
                                          rgba(0,0,0,0.3) 30%,
                                          rgba(0,0,0,0.85) 65%,
                                          rgba(0,0,0,1) 90%);
    }

    /* Story-hook panel needs to be position: relative for absolute children */
    .story-hook {
      position: relative;
      overflow: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
      .story-sonar-ring, .story-scan-beam, .story-live-dot, .story-heartbeat {
        animation: none !important;
      }
      .story-sonar, .story-scan, .hash-rain-mobile { display: none; }
    }

    /* Flip container · the 3D flip transform lives here · own its own layer */
    .story-coin-flip {
      width: 100%; height: 100%;
      position: relative;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s cubic-bezier(0.22, 0.8, 0.18, 1);
              transition:         transform 1s cubic-bezier(0.22, 0.8, 0.18, 1);
      will-change: transform;
    }
    .story-coin-flip.flipped {
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }
    .story-coin-svg,
    .story-coin-svg-back {
      width: 200px; height: 200px;
      position: absolute;
      inset: 0;
      filter: drop-shadow(0 18px 32px rgba(140,92,8,0.55));
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
    }
    .story-coin-svg-back {
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }
    /* Tap-hint pulse · only when not yet engaged */
    .story-coin-wrap:not(.engaged) .story-coin-flip:not(.flipped) {
      animation: storyTapHint 4s ease-in-out 1.6s 3 both;
    }
    @keyframes storyTapHint {
      0%, 100% { transform: scale(1); }
      10%      { transform: scale(1.025); }
      20%      { transform: scale(1); }
    }
    /* "TAP TO TURN" affordance · sits BELOW the "1 SOV · sovereign" label
       (which itself has margin: -20px 0 28px). Pushed -68px so it lands
       cleanly under the label, not on top of it. Fades after first tap. */
    .story-coin-wrap::after {
      content: "TAP  TO  TURN";
      position: absolute;
      bottom: -68px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9px;
      letter-spacing: 0.36em;
      color: rgba(244, 212, 112, 0.55);
      pointer-events: none;
      white-space: nowrap;
      animation: storyTapHintFade 6s ease-in-out 2s 1 both;
    }
    .story-coin-wrap.engaged::after {
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    @keyframes storyTapHintFade {
      0%   { opacity: 0; }
      30%  { opacity: 1; }
      80%  { opacity: 1; }
      100% { opacity: 0.5; }
    }
    .story-spec-arc {
      transform-origin: 120px 120px;
      animation: storySpecArc 9s linear infinite;
    }
    @keyframes storySpecArc {
      0%   { transform: rotate(0deg); opacity: 0.55; }
      50%  { opacity: 0.95; }
      100% { transform: rotate(360deg); opacity: 0.55; }
    }
    /* Rim inscription · meditative glide around the coin · 60s/rev for subtlety */
    .story-rim-text {
      transform-origin: 120px 120px;
      animation: storyRimGlide 60s linear infinite;
    }
    @keyframes storyRimGlide {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .story-rim-text { animation: none !important; }
    }
    /* Coin label below SVG · matches desktop sov-coin-label */
    .story-coin-label {
      margin: -20px 0 28px;
      font-family: var(--ff-mono);
      font-size: 11px;
      letter-spacing: 0.36em;
      text-transform: uppercase;
      color: rgba(244, 212, 112, 0.92);
      text-shadow: 0 0 14px rgba(244, 212, 112, 0.45);
    }

    /* ─── Panel 2: PHYSICS GATE · 8 gates ignition ─── */
    .story-physics {
      background:
        radial-gradient(ellipse 700px 500px at 50% 50%, rgba(244,196,64,0.10), transparent 70%),
        linear-gradient(180deg, #0A1422 0%, #060D18 100%);
    }
    .gate-orbit {
      position: relative;
      width: 280px; height: 280px;
      margin: 0 0 40px;
    }
    .gate-orbit-center {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 80px; height: 80px;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(244,196,64,0.20), rgba(244,196,64,0.06));
      border: 1.5px solid rgba(244,196,64,0.55);
      display: grid; place-items: center;
      font-family: var(--ff-serif);
      font-size: 30px; font-weight: 700;
      color: #F4D470;
      letter-spacing: -0.02em;
    }
    .gate-orbit-ring {
      position: absolute;
      inset: 0;
      border: 1px dashed rgba(244,196,64,0.18);
      border-radius: 50%;
    }
    .gate-orbit-dot {
      position: absolute;
      top: 50%; left: 50%;
      width: 36px; height: 36px;
      margin: -18px 0 0 -18px;
      border-radius: 50%;
      background: rgba(13,24,39,0.85);
      border: 1px solid rgba(244,196,64,0.30);
      display: grid; place-items: center;
      font-family: var(--ff-mono);
      font-size: 11px; font-weight: 700;
      color: rgba(244,196,64,0.55);
      transition: background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s;
    }
    .story-physics.in-view .gate-orbit-dot {
      animation: gateIgnite 0.6s ease-out forwards;
    }
    .story-physics.in-view .gate-orbit-dot:nth-child(2) { animation-delay: 0.2s; }
    .story-physics.in-view .gate-orbit-dot:nth-child(3) { animation-delay: 0.4s; }
    .story-physics.in-view .gate-orbit-dot:nth-child(4) { animation-delay: 0.6s; }
    .story-physics.in-view .gate-orbit-dot:nth-child(5) { animation-delay: 0.8s; }
    .story-physics.in-view .gate-orbit-dot:nth-child(6) { animation-delay: 1.0s; }
    .story-physics.in-view .gate-orbit-dot:nth-child(7) { animation-delay: 1.2s; }
    .story-physics.in-view .gate-orbit-dot:nth-child(8) { animation-delay: 1.4s; }
    .story-physics.in-view .gate-orbit-dot:nth-child(9) { animation-delay: 1.6s; }
    @keyframes gateIgnite {
      0%   { background: rgba(13,24,39,0.85); border-color: rgba(244,196,64,0.30); color: rgba(244,196,64,0.55); box-shadow: none; }
      40%  { background: rgba(244,196,64,0.45); border-color: #F4D470; color: #060D18; box-shadow: 0 0 24px rgba(244,196,64,0.85); }
      100% { background: rgba(244,196,64,0.12); border-color: #F4D470; color: #F4D470; box-shadow: 0 0 12px rgba(244,196,64,0.45); }
    }

    /* ─── Panel 3: KOMMIT · IP #2 · MIND ─── */
    .story-kommit {
      background:
        radial-gradient(ellipse 700px 500px at 50% 50%, rgba(244,196,64,0.12), transparent 70%),
        linear-gradient(180deg, #060D18 0%, #0A1422 100%);
    }
    .kommit-stage {
      position: relative;
      width: 280px; height: 280px;
      margin: 0 0 36px;
      display: grid; place-items: center;
    }
    /* Outer rotating challenge-window arc · "the watcher is watching" */
    .kommit-challenge-ring {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      animation: kommitArcSpin 7s linear infinite;
    }
    @keyframes kommitArcSpin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    /* Central commit glyph · the ◉ aperture-adinkrahene hybrid */
    .kommit-glyph {
      position: relative;
      width: 130px; height: 130px;
      display: grid; place-items: center;
      background: radial-gradient(ellipse at center, rgba(244,196,64,0.20), rgba(244,196,64,0.04));
      border: 1.5px solid rgba(244,196,64,0.55);
      border-radius: 50%;
      box-shadow:
        0 0 36px rgba(244,196,64,0.30),
        inset 0 0 24px rgba(244,196,64,0.08);
      animation: kommitBreath 4.6s ease-in-out infinite;
    }
    .kommit-glyph svg { width: 80px; height: 80px; }
    @keyframes kommitBreath {
      0%, 100% { box-shadow: 0 0 30px rgba(244,196,64,0.28), inset 0 0 24px rgba(244,196,64,0.08); transform: scale(1); }
      50%      { box-shadow: 0 0 56px rgba(244,196,64,0.50), inset 0 0 32px rgba(244,196,64,0.14); transform: scale(1.04); }
    }
    /* Hash trail labels orbiting around the glyph */
    .kommit-hash {
      position: absolute;
      font-family: var(--ff-mono);
      font-size: 9.5px;
      letter-spacing: 0.10em;
      color: rgba(244,196,64,0.85);
      background: rgba(13,24,39,0.85);
      border: 1px solid rgba(244,196,64,0.32);
      border-radius: 999px;
      padding: 5px 10px;
      white-space: nowrap;
      opacity: 0;
      transform: scale(0.85);
    }
    .kommit-hash::before {
      content: attr(data-text);
    }
    .story-kommit.in-view .kommit-hash {
      animation: kommitHashIn 0.5s ease-out forwards;
    }
    .story-kommit.in-view .kommit-hash-1 { animation-delay: 0.3s; }
    .story-kommit.in-view .kommit-hash-2 { animation-delay: 0.6s; }
    .story-kommit.in-view .kommit-hash-3 { animation-delay: 0.9s; }
    .story-kommit.in-view .kommit-hash-4 { animation-delay: 1.2s; }
    @keyframes kommitHashIn {
      0%   { opacity: 0; transform: scale(0.85) translateY(8px); }
      100% { opacity: 1; transform: scale(1)    translateY(0); }
    }
    /* Hash chip positions around the orbit */
    .kommit-hash-1 { top: 12px;   left: 50%; transform: translateX(-50%); }
    .kommit-hash-2 { right: -8px; top: 50%;  transform: translateY(-50%); }
    .kommit-hash-3 { bottom: 12px; left: 50%; transform: translateX(-50%); }
    .kommit-hash-4 { left: -16px;  top: 50%;  transform: translateY(-50%); }
    .story-kommit.in-view .kommit-hash-1 { transform: translateX(-50%); }
    .story-kommit.in-view .kommit-hash-2 { transform: translateY(-50%); }
    .story-kommit.in-view .kommit-hash-3 { transform: translateX(-50%); }
    .story-kommit.in-view .kommit-hash-4 { transform: translateY(-50%); }

    /* ─── Panel 4: HERITAGE · throne with halo ─── */
    .story-heritage {
      background:
        radial-gradient(ellipse 600px 400px at 50% 42%, rgba(244,200,74,0.14), transparent 65%),
        linear-gradient(180deg, #0A1422 0%, #060D18 100%);
    }
    .story-throne {
      position: relative;
      width: 240px; height: 200px;
      margin: 0 0 32px;
      display: grid; place-items: center;
    }
    .story-throne-svg {
      width: 220px; height: 180px;
      filter: drop-shadow(0 0 30px rgba(244,196,64,0.30));
    }
    .story-throne-halo {
      position: absolute;
      width: 280px; height: 220px;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(244,196,64,0.10), transparent 60%);
      animation: thronePulse 3.2s ease-out infinite;
      pointer-events: none;
    }
    @keyframes thronePulse {
      0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.85; }
      100% { transform: translate(-50%, -50%) scale(1.20); opacity: 0; }
    }

    /* ─── Panel 4: LIVE PROOF · counter ─── */
    .story-proof {
      background:
        radial-gradient(ellipse 600px 380px at 50% 50%, rgba(31,224,127,0.08), transparent 70%),
        linear-gradient(180deg, #060D18 0%, #0A1422 100%);
    }
    .story-counter {
      font-family: var(--ff-serif);
      font-size: clamp(96px, 28vw, 156px);
      font-weight: 700;
      color: #F4D470;
      line-height: 0.9;
      letter-spacing: -0.04em;
      margin: 18px 0 8px;
      text-shadow: 0 0 32px rgba(244,196,64,0.4);
      font-variant-numeric: tabular-nums;
    }
    .story-counter-tail {
      font-family: var(--ff-mono);
      font-size: 11px; letter-spacing: 0.20em;
      color: rgba(232,224,204,0.55);
      text-transform: uppercase;
      margin: 0 0 28px;
    }

    /* ─── Panel 5: NANANOM · orbit ─── */
    .story-nananom {
      background:
        radial-gradient(ellipse 700px 500px at 50% 50%, rgba(244,196,64,0.12), transparent 70%),
        linear-gradient(180deg, #0A1422 0%, #060D18 100%);
    }
    .nananom-orbit {
      position: relative;
      width: 300px; height: 300px;
      margin: 0 0 28px;
    }
    .nananom-center {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 80px; height: 80px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(244,196,64,0.25), rgba(244,196,64,0.08));
      border: 1px solid rgba(244,196,64,0.55);
      display: grid; place-items: center;
    }
    .nananom-center svg { width: 56px; height: 56px; }
    .nananom-rotor {
      position: absolute;
      inset: 0;
      animation: nananomSpin 28s linear infinite;
      pointer-events: none;
    }
    @keyframes nananomSpin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .nananom-glyph {
      position: absolute;
      top: 50%; left: 50%;
      width: 38px; height: 38px;
      margin: -19px 0 0 -19px;
      border-radius: 50%;
      background: rgba(13,24,39,0.85);
      border: 1px solid rgba(244,196,64,0.32);
      display: grid; place-items: center;
      font-family: var(--ff-serif);
      font-size: 11px; font-weight: 600;
      color: rgba(244,196,64,0.85);
      letter-spacing: -0.01em;
      /* counter-rotate so text stays upright */
      animation: glyphCounter 28s linear infinite;
    }
    @keyframes glyphCounter {
      0%   { transform: translate(var(--tx), var(--ty)) rotate(0deg); }
      100% { transform: translate(var(--tx), var(--ty)) rotate(-360deg); }
    }
    /* Glyph orbital positions — 10 glyphs evenly distributed on radius 130 */
    .nananom-glyph:nth-child(1)  { --tx:    0px; --ty: -130px; }
    .nananom-glyph:nth-child(2)  { --tx:   76px; --ty: -106px; }
    .nananom-glyph:nth-child(3)  { --tx:  124px; --ty:  -40px; }
    .nananom-glyph:nth-child(4)  { --tx:  124px; --ty:   40px; }
    .nananom-glyph:nth-child(5)  { --tx:   76px; --ty:  106px; }
    .nananom-glyph:nth-child(6)  { --tx:    0px; --ty:  130px; }
    .nananom-glyph:nth-child(7)  { --tx:  -76px; --ty:  106px; }
    .nananom-glyph:nth-child(8)  { --tx: -124px; --ty:   40px; }
    .nananom-glyph:nth-child(9)  { --tx: -124px; --ty:  -40px; }
    .nananom-glyph:nth-child(10) { --tx:  -76px; --ty: -106px; }

    /* ─── Panel 6: ACT · CTA stack ─── */
    .story-act {
      background:
        radial-gradient(ellipse 600px 400px at 50% 70%, rgba(244,196,64,0.08), transparent 65%),
        linear-gradient(180deg, #060D18 0%, #0A1422 100%);
    }
    .story-cta-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 320px;
      margin: 28px 0 24px;
    }
    .story-cta-stack .story-cta {
      width: 100%;
      justify-content: space-between;
      padding: 18px 22px;
      font-size: 13px;
    }
    .story-cta.primary {
      background: linear-gradient(135deg, rgba(244,196,64,0.20), rgba(244,196,64,0.08));
      border-color: #F4D470;
      color: #FFEFB0;
    }
    .story-sig {
      margin-top: 16px;
      font-family: var(--ff-serif);
      font-style: italic;
      font-size: 14px;
      color: rgba(232,224,204,0.65);
    }
    .story-sig-name {
      display: block;
      font-style: normal;
      font-weight: 600;
      color: #F4D470;
      margin-top: 4px;
      letter-spacing: -0.005em;
    }
    .story-foot {
      margin-top: 28px;
      font-family: var(--ff-mono);
      font-size: 9.5px; letter-spacing: 0.22em;
      color: rgba(232,224,204,0.35);
      text-transform: uppercase;
    }

    /* ─── Reduced motion ─── */
    @media (prefers-reduced-motion: reduce) {
      .story-coin-aura, .story-coin-svg, .story-spec-arc,
      .story-throne-halo, .nananom-rotor, .nananom-glyph,
      .story-cue, .story-cue .arrow-down,
      .story-physics.in-view .gate-orbit-dot {
        animation: none !important;
      }
    }
  }

/* ─── assets/css/mobile-consumer.css ─────────────────────────────────────── */
  /* ───── Hide on desktop · this is mobile-only ───── */
  .mobile-consumer,
  .cinematic-overlay { display: none; }

  @media (max-width: 640px) {
    /* The old mobile-story stands down. Consumer-first takes the stage. */
    .mobile-story { display: none !important; }

    /* ───── Cinematic overlay · first-visit only ─────
       NOTE: stays display:none until JS explicitly opts in via
       `ov.style.display = 'flex'` inside runCinematic(). This prevents
       the overlay from sitting black on the screen on return visits
       (when shouldShowCinematic() returns false and no classes get
       added — children opacity:0 + parent visible = blank black trap). */
    .cinematic-overlay {
      display: none;  /* JS turns this to flex on first visit only */
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #050B14;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
      opacity: 1;
      transition: opacity 1.4s cubic-bezier(.22,.61,.36,1);
      pointer-events: auto;
      overflow: hidden;
    }
    .cinematic-overlay.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    .cinematic-overlay::before {
      content: '';
      position: absolute;
      inset: -30%;
      background: radial-gradient(circle at center,
                  rgba(244,221,141,.06) 0%,
                  transparent 60%);
      opacity: 0;
      transition: opacity 2s ease-in;
    }
    .cinematic-overlay.lit::before { opacity: 1; }

    .cin-line {
      font-family: Georgia, 'Iowan Old Style', serif;
      font-size: clamp(18px, 5.2vw, 26px);
      font-style: italic;
      color: rgba(245, 239, 228, .92);
      letter-spacing: 0.4px;
      text-align: center;
      line-height: 1.5;
      max-width: 22ch;
      opacity: 0;
      transition: opacity 1.6s ease-in;
      z-index: 1;
    }
    .cinematic-overlay.line-1 .cin-line { opacity: 1; }

    .cin-hash {
      font-family: 'JetBrains Mono', Consolas, monospace;
      font-size: clamp(11px, 3.2vw, 13px);
      color: rgba(244, 221, 141, .82);
      letter-spacing: 1.5px;
      margin-top: 22px;
      text-align: center;
      opacity: 0;
      transition: opacity 1.4s ease-in 0.6s;
      z-index: 1;
    }
    .cinematic-overlay.line-2 .cin-hash { opacity: 1; }

    .cin-hash-label {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      font-size: 9px;
      letter-spacing: 3px;
      color: rgba(244, 221, 141, .55);
      text-transform: uppercase;
      margin-bottom: 5px;
      display: block;
    }

    .cin-coin {
      width: clamp(140px, 42vw, 200px);
      height: clamp(140px, 42vw, 200px);
      margin-top: 36px;
      opacity: 0;
      transform: scale(.5) rotateY(-90deg) translateZ(-200px);
      transition: opacity 1.4s ease-out 1.2s,
                  transform 1.6s cubic-bezier(.16,1.2,.3,1) 1.2s;
      z-index: 1;
      filter: drop-shadow(0 30px 60px rgba(244, 221, 141, .15));
    }
    .cinematic-overlay.line-3 .cin-coin {
      opacity: 1;
      transform: scale(1) rotateY(0deg) translateZ(0);
    }

    .cin-headline {
      font-family: Georgia, serif;
      font-size: clamp(28px, 7.8vw, 38px);
      color: rgba(245, 239, 228, .96);
      text-align: center;
      line-height: 1.1;
      letter-spacing: -0.5px;
      margin-top: 28px;
      font-weight: 700;
      opacity: 0;
      transition: opacity 1.2s ease-in 0.4s;
      z-index: 1;
    }
    .cinematic-overlay.line-4 .cin-headline { opacity: 1; }
    .cin-headline em {
      font-style: italic;
      color: #F4DD8D;
      font-weight: 600;
      display: block;
      margin-top: 4px;
    }

    .cin-bell-mark {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: 4px;
      color: rgba(244, 221, 141, .5);
      margin-top: 24px;
      opacity: 0;
      transition: opacity 1s ease-in 0.4s;
      z-index: 1;
    }
    .cinematic-overlay.line-5 .cin-bell-mark { opacity: 1; }

    /* ───── Consumer-first surface ───── */
    .mobile-consumer {
      display: block;
      position: relative;
      background: #060D18;
      color: #F5EFE4;
      min-height: 100vh;
      padding: 0;
      overflow-x: hidden;
    }

    /* Sticky status bar at top */
    .msc-statusbar {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: env(safe-area-inset-top, 0) 16px 8px;
      padding-top: calc(env(safe-area-inset-top, 0) + 6px);
      background: rgba(6, 13, 24, .92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 1.4px;
      color: rgba(245, 239, 228, .55);
      text-transform: uppercase;
      border-bottom: 1px solid rgba(244, 221, 141, .08);
    }
    .msc-greeting {
      color: #F4DD8D;
      font-weight: 600;
      letter-spacing: 1.8px;
    }
    .msc-live-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #1FE07F;
      box-shadow: 0 0 8px rgba(31, 224, 127, .6);
      animation: mscPulse 2.2s infinite ease-in-out;
    }
    @keyframes mscPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .55; transform: scale(1.25); }
    }

    /* Panels are content-sized · generous padding · no forced 100vh
       (which created the "blank sections" problem on tall iPhones —
       small content stranded in seas of dark navy). Hero alone keeps
       a min-height because the SOV coin + 3-Tap need vertical breathing. */
    .msc-panel {
      min-height: auto;
      padding: 72px 24px 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
    }

    /* ─── PANEL 1 · Hero · compressed 2026-05-17 so coin + headline +
       sub + 3-Tap CTAs all live above the fold on a ~750-820px iPhone
       viewport. Coin cap reduced from 240px → 176px (was eating ~30%
       of viewport), padding tightened, internal margins compressed. ─── */
    .msc-hero {
      min-height: 100vh;
      min-height: 100svh;
      padding-top: 56px;
      padding-bottom: 56px;
      position: relative;
      overflow: hidden;
    }

    /* Mobile gold flow ribbons · 2026-05-17 v3 · added so mobile hero
       feels alive too. Two ribbons drifting on independent cycles. */
    .msc-gold-flow {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.42;  /* quieter than desktop's 0.4 because mobile content sits tighter */
    }
    .msc-ribbon {
      transform-origin: 50% 50%;
      will-change: transform;
    }
    .msc-ribbon-1 {
      animation: mscRibbonDrift1 18s ease-in-out infinite alternate;
    }
    .msc-ribbon-2 {
      animation: mscRibbonDrift2 22s ease-in-out infinite alternate;
    }
    @keyframes mscRibbonDrift1 {
      0%   { transform: translateX(-5%) translateY(-2%) scaleY(0.95) rotate(-1deg); }
      50%  { transform: translateX(4%)  translateY(2%)  scaleY(1.18) rotate(1.5deg); }
      100% { transform: translateX(-2%) translateY(-4%) scaleY(0.9)  rotate(-1.8deg); }
    }
    @keyframes mscRibbonDrift2 {
      0%   { transform: translateX(3%)  translateY(2%)  scaleY(0.92) rotate(1deg); }
      50%  { transform: translateX(-4%) translateY(-2%) scaleY(1.22) rotate(-1.5deg); }
      100% { transform: translateX(2%)  translateY(3%)  scaleY(1)    rotate(1.8deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .msc-ribbon { animation: none !important; }
    }

    /* Ensure all hero CONTENT sits above the gold flow */
    .msc-hero > *:not(.msc-gold-flow) { position: relative; z-index: 1; }
    .msc-coin-wrap {
      /* Reduced from clamp(180px, 56vw, 240px) so coin doesn't
         dominate the viewport on iPhone — leaves room for CTAs. */
      width: clamp(140px, 42vw, 176px);
      height: clamp(140px, 42vw, 176px);
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.16s ease-out;
      filter: drop-shadow(0 18px 36px rgba(244, 221, 141, .18));
      margin-bottom: 4px;
    }
    .msc-coin-wrap svg,
    .msc-coin-wrap img { width: 100%; height: 100%; display: block; }

    .msc-h1 {
      font-family: Georgia, serif;
      /* Reduced ceiling 48px → 38px so 2 lines fit in ~80px */
      font-size: clamp(30px, 8.5vw, 38px);
      line-height: 1.04;
      margin: 14px 0 8px;
      color: #F5EFE4;
      letter-spacing: -0.8px;
      font-weight: 700;
    }
    .msc-h1 em {
      font-style: italic;
      font-weight: 600;
      color: #F4DD8D;
      display: block;
    }
    .msc-h1-sub {
      font-family: -apple-system, sans-serif;
      font-size: 13.5px;
      color: rgba(245, 239, 228, .58);
      line-height: 1.5;
      max-width: 28ch;
      margin: 0 auto 18px;
    }

    /* 3-Tap CTA row · tightened 2026-05-17 */
    .msc-actions {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 320px;
      margin: 8px auto 14px;
    }
    .msc-cta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 2.2px;
      padding: 14px 10px;
      border: 1px solid rgba(244, 221, 141, .32);
      background: rgba(244, 221, 141, .05);
      color: #F4DD8D;
      border-radius: 999px;
      cursor: pointer;
      text-transform: uppercase;
      transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .msc-cta:active {
      transform: scale(0.96);
      background: rgba(244, 221, 141, .12);
    }
    .msc-cta-primary {
      background: linear-gradient(135deg, #F4DD8D 0%, #C8A84E 60%, #8B6E2A 100%);
      color: #1A1410;
      border-color: transparent;
      box-shadow: 0 8px 24px rgba(244, 221, 141, .28);
      letter-spacing: 2.8px;
    }
    .msc-cta-primary:active {
      box-shadow: 0 4px 16px rgba(244, 221, 141, .35);
    }

    /* Live attestation pulse · tightened to fit above the fold */
    .msc-attestation-pulse {
      margin-top: 4px;
      padding: 8px 14px;
      border-radius: 8px;
      background: rgba(244, 221, 141, .04);
      border: 1px solid rgba(244, 221, 141, .08);
      font-family: 'JetBrains Mono', monospace;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      font-size: 10px;
    }
    .msc-att-label {
      font-size: 9px;
      letter-spacing: 2.5px;
      color: rgba(245, 239, 228, .42);
      text-transform: uppercase;
    }
    .msc-att-hash {
      font-size: 11.5px;
      color: rgba(244, 221, 141, .82);
      letter-spacing: 0.8px;
    }
    .msc-att-age {
      font-size: 9.5px;
      color: rgba(245, 239, 228, .38);
      letter-spacing: 1px;
    }

    /* ─── PANEL 2 · Menzgold sentence ─── */
    .msc-menzgold {
      background: linear-gradient(180deg, #060D18 0%, #0A1322 60%, #060D18 100%);
    }
    .msc-menzgold-headline {
      font-family: Georgia, serif;
      font-size: clamp(36px, 10vw, 52px);
      line-height: 1.04;
      color: #F5EFE4;
      letter-spacing: -1px;
      margin: 0 0 12px;
      font-weight: 700;
    }
    .msc-menzgold-sub {
      font-family: Georgia, serif;
      font-size: clamp(22px, 6vw, 30px);
      line-height: 1.25;
      color: rgba(244, 221, 141, .78);
      font-style: italic;
      margin: 0 0 28px;
      font-weight: 400;
    }
    .msc-menzgold-anchor {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: rgba(245, 239, 228, .42);
      letter-spacing: 4px;
      text-transform: uppercase;
      margin: 0;
    }

    /* ─── PANEL 3 · How it works ─── */
    .msc-section-mark {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 4px;
      color: rgba(244, 221, 141, .55);
      text-transform: uppercase;
      margin: 0 0 36px;
      text-align: center;
    }
    .msc-steps {
      display: flex;
      flex-direction: column;
      gap: 18px;
      width: 100%;
      max-width: 320px;
    }
    .msc-step {
      padding: 24px 20px;
      border-radius: 14px;
      background: rgba(244, 221, 141, .03);
      border: 1px solid rgba(244, 221, 141, .12);
      text-align: left;
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 16px;
      align-items: center;
    }
    .msc-step-icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: rgba(244, 221, 141, .08);
      border: 1px solid rgba(244, 221, 141, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #F4DD8D;
    }
    .msc-step-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: 2.5px;
      color: rgba(244, 221, 141, .45);
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .msc-step-title {
      font-family: Georgia, serif;
      font-size: 20px;
      color: #F5EFE4;
      font-weight: 700;
      letter-spacing: -0.2px;
      margin-bottom: 4px;
    }
    .msc-step-sub {
      font-family: -apple-system, sans-serif;
      font-size: 12.5px;
      color: rgba(245, 239, 228, .55);
      line-height: 1.4;
    }

    /* ─── PANEL 4 · Council whisper ─── */
    .msc-whisper {
      background: radial-gradient(ellipse at center top,
                  rgba(76, 29, 29, .22) 0%,
                  #060D18 60%);
    }
    .msc-whisper-text {
      font-family: Georgia, serif;
      font-size: clamp(20px, 5.5vw, 26px);
      line-height: 1.45;
      color: rgba(245, 239, 228, .88);
      font-style: italic;
      margin: 0 0 36px;
      max-width: 28ch;
      letter-spacing: 0.2px;
    }
    .msc-whisper-text strong {
      color: #F4DD8D;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 1.5px;
    }
    .msc-whisper-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: rgba(244, 221, 141, .45);
      letter-spacing: 2.5px;
      text-transform: uppercase;
      margin: 0;
    }

    /* ─── PANEL 5 · Heritage proverb ─── */
    .msc-heritage {
      background: linear-gradient(180deg, #060D18 0%, #0F1B2D 100%);
    }
    .msc-twi {
      font-family: Georgia, serif;
      font-size: clamp(28px, 7.5vw, 36px);
      font-style: italic;
      line-height: 1.2;
      color: #F4DD8D;
      letter-spacing: 0.3px;
      margin: 0 0 18px;
      max-width: 22ch;
      font-weight: 600;
    }
    .msc-twi-translation {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 3.5px;
      color: rgba(245, 239, 228, .55);
      text-transform: uppercase;
      margin: 0 0 32px;
    }
    .msc-heritage-anchor {
      font-family: Georgia, serif;
      font-size: 13.5px;
      font-style: italic;
      color: rgba(245, 239, 228, .42);
      max-width: 30ch;
      margin: 0;
      line-height: 1.5;
    }

    /* ─── PANEL 6 · Closing CTA + exit strip ─── */
    .msc-closing h2 {
      font-family: Georgia, serif;
      font-size: clamp(28px, 7.5vw, 36px);
      line-height: 1.1;
      color: #F5EFE4;
      letter-spacing: -0.5px;
      margin: 0 0 14px;
      font-weight: 700;
    }
    .msc-closing > p {
      font-family: -apple-system, sans-serif;
      font-size: 14.5px;
      color: rgba(245, 239, 228, .58);
      max-width: 30ch;
      margin: 0 auto 32px;
      line-height: 1.55;
    }
    .msc-waitlist {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 320px;
    }
    .msc-waitlist input[type="email"] {
      padding: 16px 18px;
      border-radius: 999px;
      border: 1px solid rgba(244, 221, 141, .28);
      background: rgba(244, 221, 141, .04);
      color: #F5EFE4;
      font-family: -apple-system, sans-serif;
      font-size: 15px;
      text-align: center;
      transition: border-color .2s ease;
      -webkit-appearance: none;
      appearance: none;
    }
    .msc-waitlist input[type="email"]:focus {
      outline: none;
      border-color: #F4DD8D;
      background: rgba(244, 221, 141, .08);
    }
    .msc-waitlist input[type="email"]::placeholder {
      color: rgba(245, 239, 228, .3);
    }
    .msc-waitlist button {
      padding: 16px 18px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(135deg, #F4DD8D 0%, #C8A84E 60%, #8B6E2A 100%);
      color: #1A1410;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2.8px;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(244, 221, 141, .28);
      transition: transform .15s ease;
    }
    .msc-waitlist button:active { transform: scale(0.97); }

    /* ═══ Mobile intimacy + conversion trinity · 2026-05-23 ═══ */

    /* (1) Waitlist counter on hero · social proof under BUY/SEND/RECEIVE */
    .msc-waitlist-counter {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 18px auto 0;
      padding: 10px 16px;
      background: rgba(244, 221, 141, .06);
      border: 1px solid rgba(244, 221, 141, .18);
      border-radius: 999px;
      font-family: var(--ff-mono, 'JetBrains Mono', monospace);
      font-size: 11px;
      letter-spacing: 0.05em;
      color: rgba(244, 221, 141, .85);
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, transform .12s ease;
      width: fit-content;
      max-width: 90%;
    }
    .msc-waitlist-counter:hover,
    .msc-waitlist-counter:focus-visible {
      background: rgba(244, 221, 141, .12);
      border-color: rgba(244, 221, 141, .35);
      outline: none;
    }
    .msc-waitlist-counter:active { transform: scale(0.97); }
    .msc-wc-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #1FE07F;
      box-shadow: 0 0 6px rgba(31, 224, 127, .8);
      flex-shrink: 0;
    }
    @media (prefers-reduced-motion: no-preference) {
      .msc-wc-dot {
        animation: mscWcPulse 2.2s ease-in-out infinite;
      }
    }
    @keyframes mscWcPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.55; transform: scale(1.4); }
    }
    .msc-wc-num {
      font-weight: 700;
      color: rgba(255, 247, 202, 1);
      font-size: 13px;
      letter-spacing: 0.02em;
    }
    .msc-wc-label {
      opacity: 0.85;
      font-size: 10.5px;
    }

    /* (2) Founder note above the waitlist form · intimacy at conversion */
    .msc-founder-note {
      margin: 32px auto 28px;
      max-width: 320px;
      padding: 22px 20px 18px;
      background: linear-gradient(
        180deg,
        rgba(244, 221, 141, .04) 0%,
        rgba(244, 221, 141, .02) 100%
      );
      border-left: 2px solid rgba(244, 221, 141, .35);
      border-radius: 2px 8px 8px 2px;
      text-align: left;
    }
    .msc-founder-body {
      font-family: Georgia, 'Iowan Old Style', serif;
      font-size: 14.5px;
      line-height: 1.55;
      color: rgba(232, 224, 204, .92);
      margin: 0 0 14px;
      font-style: italic;
    }
    .msc-founder-sig {
      margin: 0;
      font-family: var(--ff-mono, 'JetBrains Mono', monospace);
      font-size: 10.5px;
      letter-spacing: 0.06em;
      color: rgba(244, 221, 141, .85);
      line-height: 1.45;
    }
    .msc-founder-sig em {
      color: rgba(255, 239, 168, 1);
      font-style: normal;
      font-family: Georgia, serif;
      font-size: 13px;
      letter-spacing: 0.03em;
      display: block;
      margin-bottom: 4px;
    }
    .msc-founder-sig span {
      opacity: 0.75;
      font-size: 10px;
    }

    /* (3) Sticky $SOV waitlist pill · captures mid-scroll abandoners */
    .msc-sticky-pill {
      position: fixed;
      bottom: 84px;        /* sits above the gold ticker at bottom: 0 */
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      z-index: 9000;
      display: none;       /* shown via media query + scroll JS */
      align-items: center;
      gap: 10px;
      padding: 12px 22px;
      background: linear-gradient(
        135deg,
        rgba(255, 239, 168, .98) 0%,
        rgba(244, 221, 141, .98) 50%,
        rgba(200, 168, 78, .98) 100%
      );
      color: #1A1410;
      border: 1px solid rgba(255, 239, 168, .6);
      border-radius: 999px;
      font-family: var(--ff-mono, 'JetBrains Mono', monospace);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow:
        0 8px 24px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(0, 0, 0, .25) inset,
        0 1px 0 rgba(255, 255, 255, .4) inset;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease, transform .35s cubic-bezier(.22,1.2,.36,1);
    }
    .msc-sticky-pill.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .msc-sticky-pill:active {
      transform: translateX(-50%) translateY(0) scale(0.97);
    }
    .msc-pill-icon { font-size: 14px; color: #3F2E10; }
    .msc-pill-arrow { font-size: 13px; color: #3F2E10; opacity: 0.7; }

    /* Mobile-only: pill becomes visible (still requires .is-visible to show) */
    @media (max-width: 640px) {
      .msc-sticky-pill { display: inline-flex; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       MANTIS-SHRIMP HYPERSPECTRAL HERO · 2026-05-23
       Tap-cascade choreography on the SOV coin.
       8 stages over 1.8s. Each stage = one of the 8 physics gates.
       Sequence: rest → UV glow → polarized expand → cyan ring →
                  iridescent flash → gold settle → ember rim → rest.
       Reduced-motion: replaced by a single 0.6s gold pulse.
       ═══════════════════════════════════════════════════════════════════ */

    /* Tap affordance · "Tap the coin to see what the verification sees" */
    .msc-tap-affordance {
      margin: 6px auto 0;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--ff-mono, 'JetBrains Mono', monospace);
      font-size: 11px;
      letter-spacing: 0.08em;
      color: rgba(168, 255, 236, .68);  /* polarized cyan · spectral foam */
      text-transform: uppercase;
      opacity: 0;
      animation: mscAffordanceFadeIn 1.2s ease 1.5s forwards;
    }
    .msc-tap-affordance.is-hidden {
      animation: mscAffordanceFadeOut .5s ease forwards;
    }
    @keyframes mscAffordanceFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes mscAffordanceFadeOut {
      to { opacity: 0; transform: translateY(-4px); }
    }
    .msc-tap-pulse {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--ms-pol-07, #4FE0E0);
      box-shadow: 0 0 8px rgba(79, 224, 224, .8);
    }
    @media (prefers-reduced-motion: no-preference) {
      .msc-tap-pulse { animation: mscTapPulse 1.6s ease-in-out infinite; }
    }
    @keyframes mscTapPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .5; transform: scale(1.6); }
    }

    /* Coin wrap · tactile + interactive */
    .msc-coin-wrap {
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      outline: none;
      position: relative;
      transition: transform .25s cubic-bezier(.22,1.2,.36,1);
    }
    .msc-coin-wrap:active { transform: scale(0.97); }
    .msc-coin-wrap:focus-visible {
      outline: 2px solid rgba(168, 255, 236, .7);
      outline-offset: 12px;
      border-radius: 50%;
    }

    /* ─── REST STATE: clean gold authority · 2026-05-23 hardening ───
       Force halo + hyperspectral layers to be DEFINITIVELY hidden at
       rest with !important so no cached state, CSS specificity drift,
       or browser quirk can leak the teal/iridescent through. Gold
       face is the only thing the user sees until they tap. */
    .msc-coin-face {
      opacity: 1 !important;
      transition: opacity .35s ease;
    }
    .msc-coin-hyper,
    .msc-coin-halo {
      opacity: 0 !important;
      transition: opacity .35s ease;
    }
    /* Engraving group · Sika Dwa Kofi stool + 4 cardinal Adinkra marks +
       SOV wordmark. Sits on top of the gold face. Fades together with
       the face during tap-cascade so the hyperspectral underlayer can
       carry the moment cleanly. */
    .msc-coin-engraving {
      transition: opacity .35s ease;
    }
    .msc-coin-wrap.is-cascading .msc-coin-engraving {
      opacity: 0.18 !important;
    }

    /* ─── LIVE ENGRAVING · 2026-05-23 ───
       Nothing on the coin reads as static. Each engraved element has
       its own pulse on a different cycle so the seal reads as a living
       organism, not a stamped artifact. All disabled under
       prefers-reduced-motion. */
    .msc-coin-stool { opacity: 0.85; transform-box: fill-box; transform-origin: 100px 100px; }
    .msc-adinkra   { opacity: 0.62; transform-box: fill-box; }
    .msc-adinkra-n { transform-origin: 100px  48px; }
    .msc-adinkra-e { transform-origin: 152px 100px; }
    .msc-adinkra-s { transform-origin: 100px 152px; }
    .msc-adinkra-w { transform-origin:  48px 100px; }

    @media (prefers-reduced-motion: no-preference) {
      /* Stool whole-form breath · slow 5s (subtle scale + opacity) */
      .msc-coin-stool {
        animation: mscStoolBreath 5.0s ease-in-out infinite;
      }
      @keyframes mscStoolBreath {
        0%, 100% { opacity: 0.82; transform: scale(1); }
        50%      { opacity: 0.94; transform: scale(1.014); }
      }

      /* Soul-mark inside the stool · fast pulse (the heart of the seal) */
      .msc-stool-soul-outer {
        transform-box: fill-box;
        transform-origin: 100px 107px;
        animation: mscSoulOuter 1.8s ease-in-out infinite;
      }
      .msc-stool-soul-inner {
        transform-box: fill-box;
        transform-origin: 100px 107px;
        animation: mscSoulInner 1.8s ease-in-out infinite;
      }
      @keyframes mscSoulOuter {
        0%, 100% { stroke-width: 0.65; opacity: 1;    transform: scale(1); }
        50%      { stroke-width: 1.10; opacity: 0.65; transform: scale(1.25); }
      }
      @keyframes mscSoulInner {
        0%, 100% { opacity: 1;   transform: scale(1); }
        50%      { opacity: 0.7; transform: scale(1.35); }
      }

      /* 4 cardinal Adinkra · same rhythm, staggered start so they pulse
         around the coin (N → E → S → W cardinal sweep) */
      .msc-adinkra-n { animation: mscAdinkraPulse 3.6s ease-in-out  0.0s infinite; }
      .msc-adinkra-e { animation: mscAdinkraPulse 3.6s ease-in-out -0.9s infinite; }
      .msc-adinkra-s { animation: mscAdinkraPulse 3.6s ease-in-out -1.8s infinite; }
      .msc-adinkra-w { animation: mscAdinkraPulse 3.6s ease-in-out -2.7s infinite; }
      @keyframes mscAdinkraPulse {
        0%, 100% { opacity: 0.55; transform: scale(1); }
        50%      { opacity: 0.95; transform: scale(1.18); }
      }
    }
    /* ─── CASCADE STATE: hyperspectral verification spectrum reveal ───
       Only triggered by user tap. Override the !important above with
       higher-specificity selectors targeting the cascading wrapper. */
    .msc-coin-wrap.is-cascading .msc-coin-face { opacity: 0.22 !important; }
    .msc-coin-wrap.is-cascading .msc-coin-hyper {
      opacity: 0.85 !important;
      animation: mscHyperRotate 1.8s cubic-bezier(.22,1.2,.36,1);
    }
    .msc-coin-wrap.is-cascading .msc-coin-halo { opacity: 1 !important; }

    /* Hyperspectral rotation · subtle spin that lets the gradient
       sweep through all 16 hues during the 1.8s window. */
    @keyframes mscHyperRotate {
      0%   { transform: rotate(0deg);   filter: hue-rotate(0deg)   saturate(1.0) brightness(1.0); }
      12%  { filter: hue-rotate(-30deg) saturate(1.4) brightness(1.15); } /* UV deepens */
      25%  { filter: hue-rotate(-15deg) saturate(1.6) brightness(1.25); } /* polarized amethyst */
      37%  { filter: hue-rotate(30deg)  saturate(1.5) brightness(1.30); } /* polarized turquoise */
      50%  { filter: hue-rotate(60deg)  saturate(1.4) brightness(1.40); } /* holographic mint */
      62%  { filter: hue-rotate(20deg)  saturate(1.2) brightness(1.20); } /* solar leaf return */
      75%  { filter: hue-rotate(-10deg) saturate(1.3) brightness(1.10); } /* saffron flare */
      87%  { filter: hue-rotate(-25deg) saturate(1.5) brightness(.95);  } /* crimson ember settle */
      100% { transform: rotate(8deg);   filter: hue-rotate(0deg)   saturate(1.0) brightness(1.0); }
    }

    /* Cascade ring · expanding polarized-cyan pulse outside the coin.
       Hardening 2026-05-23 · display:none at rest so the box-shadow
       cannot leak teal/cyan/violet into the resting hero composition.
       Only displays during .is-cascading tap state. */
    .msc-coin-cascade-ring {
      display: none;
      position: absolute;
      top: 50%; left: 50%;
      width: 0; height: 0;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      border: 2px solid var(--ms-pol-07, #4FE0E0);
      box-shadow: 0 0 24px var(--ms-pol-06, #1FA8C8),
                  inset 0 0 12px var(--ms-uv-04, #5B3FA0);
      transform: translate(-50%, -50%);
    }
    .msc-coin-wrap.is-cascading .msc-coin-cascade-ring {
      display: block;
      animation: mscCascadeRing 1.8s cubic-bezier(.22,1.2,.36,1);
    }
    @keyframes mscCascadeRing {
      0%   { width: 100px; height: 100px; opacity: 0;   border-width: 4px; }
      18%  { opacity: .95; border-width: 3px; }
      55%  { opacity: .65; border-width: 2px; }
      100% { width: 360px; height: 360px; opacity: 0;   border-width: 1px; }
    }

    /* Reduced-motion fallback · single subtle gold pulse, no cascade */
    @media (prefers-reduced-motion: reduce) {
      .msc-coin-wrap.is-cascading .msc-coin-face,
      .msc-coin-wrap.is-cascading .msc-coin-hyper,
      .msc-coin-wrap.is-cascading .msc-coin-halo {
        animation: none;
      }
      .msc-coin-wrap.is-cascading {
        animation: mscCoinReducedPulse 0.6s ease;
      }
      @keyframes mscCoinReducedPulse {
        50% { transform: scale(1.04); filter: brightness(1.2); }
      }
    }

    /* Post-cascade prompt · "117 others are on the list. Be one of them. →"
       Single-fire per session. Sits below the attestation-pulse line. */
    .msc-post-cascade {
      margin: 14px auto 0;
      padding: 11px 18px;
      display: none;            /* JS toggles to inline-flex when revealed */
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      background: linear-gradient(
        135deg,
        rgba(91, 63, 160, .12) 0%,        /* UV amethyst whisper */
        rgba(31, 168, 200, .18) 50%,      /* polarized turquoise */
        rgba(255, 239, 168, .15) 100%     /* gold settle */
      );
      border: 1px solid rgba(168, 255, 236, .25);
      border-radius: 999px;
      font-family: var(--ff-mono, 'JetBrains Mono', monospace);
      font-size: 11.5px;
      letter-spacing: 0.04em;
      color: rgba(232, 224, 204, .92);
      cursor: pointer;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .5s ease, transform .5s cubic-bezier(.22,1.2,.36,1);
      max-width: 90%;
    }
    .msc-post-cascade.is-revealed {
      display: inline-flex;
      opacity: 1;
      transform: translateY(0);
    }
    .msc-post-cascade.is-fading {
      opacity: 0;
      transform: translateY(-4px);
    }
    .msc-pc-prefix {
      color: rgba(232, 224, 204, .75);
    }
    .msc-pc-prefix [data-waitlist-count] {
      color: rgba(255, 239, 168, 1);
      font-weight: 700;
    }
    .msc-pc-cta {
      color: rgba(168, 255, 236, .95);
      font-weight: 600;
    }

    .msc-exit-strip {
      margin-top: 56px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
      padding-top: 32px;
      border-top: 1px solid rgba(244, 221, 141, .08);
      width: 100%;
      max-width: 280px;
    }
    .msc-exit-strip a {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 2.5px;
      color: rgba(245, 239, 228, .42);
      text-decoration: none;
      text-transform: uppercase;
      transition: color .2s ease;
    }
    .msc-exit-strip a:first-child {
      color: rgba(244, 221, 141, .65);
      font-weight: 600;
    }
    .msc-exit-strip a:hover, .msc-exit-strip a:active { color: #F4DD8D; }

    /* ─── Gold price ticker · fixed bottom strip ─── */
    .msc-ticker {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 49;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 10px 16px;
      padding-bottom: calc(env(safe-area-inset-bottom, 0) + 10px);
      background: rgba(6, 13, 24, .94);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 1.2px;
      border-top: 1px solid rgba(244, 221, 141, .1);
      color: rgba(245, 239, 228, .65);
      text-transform: uppercase;
    }
    .msc-ticker-pair {
      color: #F4DD8D;
      font-weight: 700;
      letter-spacing: 1.5px;
    }
    .msc-ticker-usd, .msc-ticker-ghs {
      color: rgba(245, 239, 228, .85);
      letter-spacing: 0.5px;
    }
    .msc-ticker-premium {
      color: rgba(31, 224, 127, .82);
      letter-spacing: 0.8px;
      font-size: 9.5px;
    }
    .msc-ticker-premium.neg { color: rgba(224, 31, 31, .82); }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .cinematic-overlay,
      .cin-line, .cin-hash, .cin-coin, .cin-headline, .cin-bell-mark,
      .msc-live-dot, .msc-coin-wrap {
        transition: none !important;
        animation: none !important;
      }
    }
  }

/* ─── assets/css/mobile-hero-warmth.css ─────────────────────────────────────── */
@media (max-width: 640px){

  /* ── Atmospheric body warmth — soft gold breath behind everything ── */
  body{ position: relative; }
  body::before{
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      /* Warm gold halo top-right */
      radial-gradient(ellipse 70% 50% at 75% 8%,
        rgba(244,196,64,0.08) 0%,
        rgba(244,196,64,0.03) 35%,
        transparent 70%),
      /* Warm gold halo bottom-left */
      radial-gradient(ellipse 60% 45% at 20% 92%,
        rgba(244,196,64,0.06) 0%,
        rgba(244,196,64,0.02) 40%,
        transparent 70%);
    animation: bodyWarmthBreath 11s ease-in-out infinite;
  }
  @keyframes bodyWarmthBreath{
    0%, 100% { opacity: .85; }
    50%      { opacity: 1; }
  }

  /* ── Vertical gold "soul thread" — single visual spine running
        the full mobile column. 1px gradient gold-fade. ── */
  body::after{
    content: '';
    position: fixed;
    top: 0; bottom: 0;
    left: 0;
    width: 1px;
    pointer-events: none;
    z-index: 49;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(244,221,141,0) 4%,
      rgba(244,221,141,0.32) 18%,
      rgba(244,221,141,0.55) 50%,
      rgba(244,221,141,0.32) 82%,
      rgba(244,221,141,0) 96%,
      transparent 100%);
  }

  /* ── Soften the YARN strip · dissolve hard border → gold fade ── */
  .yarn-strip{
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(244,221,141,0.10) inset;
    position: relative;
  }
  .yarn-strip::after{
    content: '';
    position: absolute;
    bottom: -1px; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(244,221,141,0.18) 35%,
      rgba(244,221,141,0.32) 50%,
      rgba(244,221,141,0.18) 65%,
      transparent 100%);
  }

  /* ── Polygon ticker strip · share the gold DNA ── */
  .live-ticker-shell{
    background: linear-gradient(180deg,
      rgba(6,13,24,0.96) 0%,
      rgba(10,18,30,0.94) 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(244,221,141,0.06) inset !important;
    position: relative;
  }
  .live-ticker-shell::after{
    content: '';
    position: absolute;
    bottom: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(244,221,141,0.16) 50%,
      transparent 100%);
  }

  /* ── MAAKYE status bar · also dissolve the hard line ── */
  .msc-statusbar{
    border-bottom: none !important;
    position: relative;
  }
  .msc-statusbar::after{
    content: '';
    position: absolute;
    bottom: -1px; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(244,221,141,0.22) 50%,
      transparent 100%);
  }

  /* ── Hero gets a top atmospheric handoff — gold mist bleeds DOWN
        from chrome into the hero so the join is composed, not slabbed ── */
  .msc-hero{
    background:
      linear-gradient(180deg,
        rgba(244,221,141,0.04) 0%,
        rgba(244,221,141,0.02) 8%,
        transparent 22%,
        transparent 100%);
    position: relative;
  }
  /* And a bottom handoff — gold thread fades from hero into next section */
  .msc-hero::before{
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(244,221,141,0.22) 35%,
      rgba(244,221,141,0.38) 50%,
      rgba(244,221,141,0.22) 65%,
      transparent 100%);
    z-index: 2;
  }

  /* ── Bottom ticker · same DNA, no harsh black slab ── */
  .msc-ticker{
    background: linear-gradient(180deg,
      rgba(6,13,24,0.94) 0%,
      rgba(10,18,30,0.98) 100%) !important;
    border-top: none !important;
    box-shadow: 0 -1px 0 rgba(244,221,141,0.12) inset !important;
    position: relative;
  }
  .msc-ticker::before{
    content: '';
    position: absolute;
    top: 0; left: 18%; right: 18%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(244,221,141,0.24) 50%,
      transparent 100%);
  }

  /* ── Header (EcoVent · VPAY Genesis) · subtle gold-tinted glass ── */
  .nav, header.nav, body > nav{
    background: linear-gradient(180deg,
      rgba(6,13,24,0.92) 0%,
      rgba(10,18,30,0.88) 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(244,221,141,0.08) inset !important;
  }

  /* ── Sync all "live" dots across the page to one rhythm.
        The MAAKYE dot already has mscPulse 2.2s · we now align the
        chrome dots (Polygon ticker green + PMMC dot) to a unified
        animation-delay so the page reads as one heart beating. ── */
  .live-pulse,
  .msc-live-dot,
  .live-ticker-shell .live-pulse,
  .msc-ticker-premium::before{
    animation-duration: 2.2s !important;
    animation-timing-function: ease-in-out !important;
  }

  /* ── Section flow · soften the hard cuts between dark slabs ──
        The user feedback "too many dark sections" was about VISUAL
        rhythm — slab after slab with abrupt black cuts. Adding gold
        thread fades between consecutive dark sections makes them
        read as one composed scroll, not 6 stacked rectangles. ── */
  .live-ticker-shell + section,
  .kommit-strip,
  .duality-section,
  .trinity-epigraph,
  .five-rings-stanza{
    position: relative;
  }
  .kommit-strip::before,
  .duality-section::before,
  .trinity-epigraph::before,
  .five-rings-stanza::before{
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(244,221,141,0.18) 35%,
      rgba(244,221,141,0.28) 50%,
      rgba(244,221,141,0.18) 65%,
      transparent 100%);
    z-index: 5;
    pointer-events: none;
  }
  .kommit-strip::after,
  .duality-section::after,
  .trinity-epigraph::after,
  .five-rings-stanza::after{
    content: '';
    position: absolute;
    bottom: 0; left: 18%; right: 18%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(244,221,141,0.16) 50%,
      transparent 100%);
    z-index: 5;
    pointer-events: none;
  }

  /* Gentle gold mist tinting on every dark slab so they share the
     same atmospheric temperature as the hero (not isolated rectangles). */
  .kommit-strip,
  .duality-section,
  .trinity-epigraph,
  .five-rings-stanza{
    background-image:
      radial-gradient(ellipse 80% 60% at 50% 50%,
        rgba(244,196,64,0.04) 0%,
        rgba(244,196,64,0.015) 50%,
        transparent 80%),
      var(--bg-original, none);
  }

  /* Tighten vertical rhythm — the user said "too many dark sections".
     Trim padding on dense ceremonial slabs so they read as composed
     beats, not weight-bearing walls. */
  .trinity-epigraph,
  .five-rings-stanza{
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce){
    body::before{ animation: none !important; }
  }
}

/* ─── assets/css/audience-panels.css ─────────────────────────────────────── */
.ga-panel{
  padding: 28px 0 36px !important;
  min-height: auto;
}
.genesis-attestation{
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 18px 22px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%,
      rgba(244,221,141,0.07) 0%,
      rgba(244,221,141,0.02) 50%,
      transparent 80%),
    linear-gradient(180deg, #0A1322 0%, #060D18 100%);
  border-radius: 18px;
  border: 1px solid rgba(244,221,141,0.18);
  box-shadow:
    0 24px 64px -24px rgba(0,0,0,0.6),
    0 0 0 1px rgba(244,221,141,0.04);
  overflow: hidden;
  isolation: isolate;
}
.ga-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 38%,
      rgba(244,221,141,0.18) 0%,
      rgba(244,221,141,0.04) 45%,
      transparent 80%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
  animation: gaBackdropBreath 6s ease-in-out infinite;
}
@keyframes gaBackdropBreath{
  0%, 100% { opacity: .8; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.06); }
}

.ga-stage-label{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 2.2px;
  color: rgba(244,221,141,0.78);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ga-stage-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1FE07F;
  box-shadow: 0 0 8px rgba(31,224,127,0.85);
  animation: mscPulse 2.2s ease-in-out infinite;
}

/* The device chassis · holds bar + beam + data screens */
.ga-device{
  position: relative; z-index: 1;
  width: 100%;
  height: 200px;
  margin: 8px 0 24px;
}
.ga-bar{
  position: absolute;
  top: 50%; left: 50%;
  width: 75%; height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 18px rgba(244,221,141,0.30));
  opacity: 1;
  transition: opacity .5s ease, filter .5s ease;
}
[data-ga-stage="0"] .ga-bar { opacity: 0; transform: translate(-50%, -52%); }

/* XRF scan beam · cyan-gold blade that sweeps top-to-bottom */
.ga-beam{
  position: absolute;
  top: 8%; left: 8%; right: 8%;
  height: 4px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(31,224,255,0.6) 12%,
      rgba(244,221,141,0.95) 50%,
      rgba(31,224,255,0.6) 88%,
      transparent 100%);
  border-radius: 2px;
  box-shadow:
    0 0 12px rgba(244,221,141,0.75),
    0 0 28px rgba(31,224,255,0.45);
  opacity: 0;
  transform: translateY(0);
  z-index: 3;
}
[data-ga-stage="2"] .ga-beam,
[data-ga-stage="3"] .ga-beam,
[data-ga-stage="4"] .ga-beam,
[data-ga-stage="5"] .ga-beam,
[data-ga-stage="6"] .ga-beam{
  animation: gaBeamSweep 2.0s ease-in-out forwards;
}
@keyframes gaBeamSweep{
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: 1; }
  50%  { opacity: 1; transform: translateY(180px); }
  90%  { opacity: 0.6; transform: translateY(180px); }
  100% { opacity: 0; transform: translateY(180px); }
}

/* Floating data screens · each appears in sequence */
.ga-data{
  position: absolute;
  background: rgba(6,13,24,0.85);
  border: 1px solid rgba(244,221,141,0.35);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity .35s ease, transform .35s ease;
}
.ga-data-mass   { top:  14%; left:  4%; }
.ga-data-purity { top:  14%; right: 4%; }
.ga-data-gps    { bottom: -2%; left: 50%; transform: translateX(-50%) translateY(6px) scale(0.96); }

[data-ga-stage="3"] .ga-data,
[data-ga-stage="4"] .ga-data,
[data-ga-stage="5"] .ga-data,
[data-ga-stage="6"] .ga-data{
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-ga-stage="3"] .ga-data-gps,
[data-ga-stage="4"] .ga-data-gps,
[data-ga-stage="5"] .ga-data-gps,
[data-ga-stage="6"] .ga-data-gps{
  transform: translateX(-50%) translateY(0) scale(1);
}
[data-ga-stage="3"] .ga-data-purity { transition-delay: .12s; }
[data-ga-stage="3"] .ga-data-gps    { transition-delay: .24s; }

.ga-data-label{
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(244,221,141,0.6);
  margin-bottom: 2px;
}
.ga-data-value{
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #F4DD8D;
  letter-spacing: 0.5px;
}
.ga-num{ display: inline-block; transition: color .2s; }
[data-ga-stage="3"] .ga-num,
[data-ga-stage="4"] .ga-num,
[data-ga-stage="5"] .ga-num,
[data-ga-stage="6"] .ga-num{
  animation: gaNumGlow 1.4s ease-out;
}
@keyframes gaNumGlow{
  0%   { color: #FFEFA8; text-shadow: 0 0 8px rgba(244,221,141,0.9); }
  100% { color: #F4DD8D; text-shadow: none; }
}

/* Hash crystallization line */
.ga-hash{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(244,221,141,0.18);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  margin: 14px 0 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
[data-ga-stage="4"] .ga-hash,
[data-ga-stage="5"] .ga-hash,
[data-ga-stage="6"] .ga-hash{
  opacity: 1;
  transform: translateY(0);
}
.ga-hash-label{
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(244,221,141,0.7);
}
.ga-hash-value{
  font-size: 11px;
  letter-spacing: 0.4px;
  color: #F4DD8D;
  word-break: break-all;
}

/* Block confirmation pulse */
.ga-block{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(31,224,127,0.9);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
[data-ga-stage="5"] .ga-block,
[data-ga-stage="6"] .ga-block{
  opacity: 1;
  transform: translateY(0);
  animation: gaBlockPulse 1.4s ease-out;
}
@keyframes gaBlockPulse{
  0%   { color: #FFEFA8; text-shadow: 0 0 18px rgba(255,239,168,0.9); }
  100% { color: rgba(31,224,127,0.9); text-shadow: none; }
}
.ga-block-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1FE07F;
  box-shadow: 0 0 8px rgba(31,224,127,0.85);
  animation: mscPulse 2.2s ease-in-out infinite;
}

/* Ceremonial caption — Twi + gloss */
.ga-caption{
  position: relative; z-index: 2;
  text-align: center;
  margin: 16px 0 12px;
  font-family: Georgia, serif;
  font-size: 14px;
  color: rgba(245,239,228,0.85);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-ga-stage="6"] .ga-caption{
  opacity: 1;
  transform: translateY(0);
}
.ga-caption em{
  font-style: italic;
  color: #F4DD8D;
  display: block;
  font-size: 22px;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  /* Soft gold shimmer matching "Verified" italic */
  background-image: linear-gradient(90deg,
    #F4DD8D 0%, #F4DD8D 38%, #FFEFA8 50%, #F4DD8D 62%, #F4DD8D 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: gaCaptionShimmer 7s ease-in-out infinite;
}
@keyframes gaCaptionShimmer{
  0%, 100% { background-position: 100% 0; }
  50%      { background-position:   0% 0; }
}
.ga-caption-gloss{
  display: block;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: rgba(245,239,228,0.55);
  font-style: italic;
}

/* Replay control */
.ga-replay{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  margin: 8px auto 0;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid rgba(244,221,141,0.32);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(244,221,141,0.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s ease, background .2s, border-color .2s, color .2s;
}
[data-ga-stage="6"] .ga-replay{ opacity: 0.85; }
.ga-replay:hover{
  background: rgba(244,221,141,0.08);
  border-color: rgba(244,221,141,0.6);
  color: #FFEFA8;
}
.ga-replay-arrow{ color: #F4DD8D; }

/* Reduced motion — show the final composed state, no animation */
@media (prefers-reduced-motion: reduce){
  .ga-backdrop{ animation: none !important; }
  .ga-beam{ display: none !important; }
  .genesis-attestation{
    /* Snap to composed final state */
  }
  .ga-bar, .ga-data, .ga-hash, .ga-block, .ga-caption, .ga-replay{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .ga-data-gps{ transform: translateX(-50%) !important; }
}

/* ── Corner brackets · GSU device chassis hint ── */
.ga-bracket{
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(244,221,141,0.45);
  pointer-events: none;
  z-index: 6;
}
.ga-bracket-tl { top: 4%;  left: 4%;  border-right: none; border-bottom: none; }
.ga-bracket-tr { top: 4%;  right: 4%; border-left: none;  border-bottom: none; }
.ga-bracket-bl { bottom: 4%; left: 4%; border-right: none; border-top: none; }
.ga-bracket-br { bottom: 4%; right: 4%; border-left: none;  border-top: none; }
/* Brackets pulse subtly during the active stages */
[data-ga-stage="3"] .ga-bracket,
[data-ga-stage="4"] .ga-bracket,
[data-ga-stage="5"] .ga-bracket,
[data-ga-stage="6"] .ga-bracket{
  animation: gaBracketPulse 2.6s ease-in-out infinite;
}
@keyframes gaBracketPulse{
  0%, 100% { border-color: rgba(244,221,141,0.45); }
  50%      { border-color: rgba(255,239,168,0.85); }
}

/* ── Gold particle sparks · emit during scan stage ── */
.ga-spark{
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #FFEFA8;
  box-shadow: 0 0 6px rgba(255,239,168,0.95), 0 0 12px rgba(244,221,141,0.5);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}
.ga-spark-1 { top: 45%; left: 20%; }
.ga-spark-2 { top: 50%; left: 35%; }
.ga-spark-3 { top: 48%; left: 50%; }
.ga-spark-4 { top: 52%; left: 65%; }
.ga-spark-5 { top: 46%; left: 80%; }
.ga-spark-6 { top: 50%; left: 92%; }
[data-ga-stage="2"] .ga-spark,
[data-ga-stage="3"] .ga-spark{
  animation: gaSparkFloat 1.8s ease-out forwards;
}
.ga-spark-1{ animation-delay: 0.15s !important; }
.ga-spark-2{ animation-delay: 0.30s !important; }
.ga-spark-3{ animation-delay: 0.45s !important; }
.ga-spark-4{ animation-delay: 0.60s !important; }
.ga-spark-5{ animation-delay: 0.75s !important; }
.ga-spark-6{ animation-delay: 0.90s !important; }
@keyframes gaSparkFloat{
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  20%  { opacity: 1; transform: translateY(-4px) scale(1.4); }
  100% { opacity: 0; transform: translateY(-32px) scale(0.3); }
}

/* ── Bar surface shimmer · slow diagonal sheen at rest ── */
.ga-bar-shimmer{
  transform-origin: center;
  animation: gaBarShimmerSweep 6.5s ease-in-out infinite;
}
@keyframes gaBarShimmerSweep{
  0%, 100% { transform: translateX(-220px); }
  50%      { transform: translateX(220px); }
}

/* Desktop · let it shine bigger */
@media (min-width: 641px){
  .genesis-attestation{
    max-width: 600px;
    padding: 36px 28px 28px;
  }
  .ga-device{ height: 240px; }
  .ga-bar{ width: 70%; }
  .ga-data-label{ font-size: 9px; }
  .ga-data-value{ font-size: 14px; }
  .ga-hash-value{ font-size: 12.5px; }
  .ga-caption em{ font-size: 26px; }
  .ga-bracket{ width: 18px; height: 18px; }
}

/* Reduced motion · disable the extra channels */
@media (prefers-reduced-motion: reduce){
  .ga-bracket, .ga-spark, .ga-bar-shimmer{ animation: none !important; }
  .ga-spark{ display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   HOW IT WORKS · animated step cards · 2026-05-22
   Replaces static emoji icons with animated SVG mini-scenes.
   Adds vertical gold thread connecting the 3 steps.
   Scroll-cascade reveal · sequential pulse 01→02→03.
   ══════════════════════════════════════════════════════════════════ */

.msc-howitworks{
  position: relative;
  padding: 48px 24px 40px;
}

/* Vertical gold thread connecting the 3 steps */
.hiw-thread{
  position: absolute;
  top: 110px;
  bottom: 64px;
  left: calc(24px + 26px);
  width: 2px;
  background: linear-gradient(180deg,
    rgba(244,221,141,0.08) 0%,
    rgba(244,221,141,0.18) 50%,
    rgba(244,221,141,0.08) 100%);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
.hiw-thread-fill{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg,
    rgba(244,221,141,0.85) 0%,
    rgba(244,221,141,0.65) 100%);
  box-shadow: 0 0 8px rgba(244,221,141,0.55);
  border-radius: 2px;
  transition: height 1.4s ease-in-out;
}
.msc-howitworks.is-revealed .hiw-thread-fill{
  height: 100%;
}

/* Step card layout */
.hiw-step{
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 16px !important;
  border: 1px solid rgba(244,221,141,0.16) !important;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%,
      rgba(244,221,141,0.04) 0%,
      transparent 60%),
    rgba(10,18,30,0.55) !important;
  margin-bottom: 16px !important;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s cubic-bezier(.2,.7,.3,1),
              transform .65s cubic-bezier(.2,.7,.3,1),
              border-color .3s, background .3s;
}
.msc-howitworks.is-revealed .hiw-step{ opacity: 1; transform: translateY(0); }
.msc-howitworks.is-revealed .hiw-step[data-step="2"]{ transition-delay: .18s; }
.msc-howitworks.is-revealed .hiw-step[data-step="3"]{ transition-delay: .36s; }

/* Hover/tap: gold border + lift */
.hiw-step:hover, .hiw-step:active{
  border-color: rgba(244,221,141,0.42) !important;
  transform: translateY(-3px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%,
      rgba(244,221,141,0.08) 0%,
      transparent 65%),
    rgba(10,18,30,0.75) !important;
}

/* Icon container */
.hiw-icon{
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(6,13,24,0.85) !important;
  border: 1px solid rgba(244,221,141,0.22) !important;
  border-radius: 14px;
  position: relative;
  font-size: 0 !important; /* kills any stray emoji line-height */
}
.hiw-icon svg{
  width: 100%;
  height: 100%;
}
/* Subtle gold halo behind each icon, breath pulse staggered per step */
.hiw-icon::before{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(244,221,141,0.20) 0%, transparent 70%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: hiwHalo 5.4s ease-in-out infinite;
}
.hiw-step[data-step="2"] .hiw-icon::before{ animation-delay: 1.8s; }
.hiw-step[data-step="3"] .hiw-icon::before{ animation-delay: 3.6s; }
@keyframes hiwHalo{
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* ── STEP 01 · Tipping scale animation ── */
.hiw-weigh-beam{
  transform-origin: 18px 10px;
  animation: hiwBeamTilt 4.8s ease-in-out infinite;
}
@keyframes hiwBeamTilt{
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ── STEP 02 · Atomic orbits ── */
.hiw-orbit{
  transform-origin: 18px 18px;
}
.hiw-orbit-1{ animation: hiwOrbitSpin 6s linear infinite; }
.hiw-orbit-2{ animation: hiwOrbitSpin 5s linear infinite reverse; }
.hiw-orbit-3{ animation: hiwOrbitSpin 7s linear infinite; }
@keyframes hiwOrbitSpin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hiw-nucleus{ animation: hiwNucleusBreath 2.4s ease-in-out infinite; transform-origin: 18px 18px; }
@keyframes hiwNucleusBreath{
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.18); }
}

/* ── STEP 03 · Minting coin ── */
.hiw-mint-coin{
  transform-origin: 18px 18px;
  animation: hiwMintRise 4.6s ease-in-out infinite;
}
@keyframes hiwMintRise{
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 2px 4px rgba(244,221,141,0.35)); }
  50%      { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 5px 9px rgba(244,221,141,0.65)); }
}
.hiw-mint-spark{
  opacity: 0;
  animation: hiwMintSpark 2.4s ease-out infinite;
}
.hiw-mint-spark-1{ animation-delay: 0s; }
.hiw-mint-spark-2{ animation-delay: 0.8s; }
.hiw-mint-spark-3{ animation-delay: 1.6s; }
@keyframes hiwMintSpark{
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Body: step number + live badge */
.hiw-body{ position: relative; }
.msc-step-num{
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px !important;
}
.hiw-live-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(31,224,127,0.9);
  padding: 2px 6px;
  border: 1px solid rgba(31,224,127,0.32);
  border-radius: 999px;
  background: rgba(31,224,127,0.06);
}
.hiw-live-dot{
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #1FE07F;
  box-shadow: 0 0 4px rgba(31,224,127,0.85);
  animation: mscPulse 2.2s ease-in-out infinite;
}

/* Sequential 01→02→03 highlight pulse — the protocol "flows" */
.msc-howitworks.is-revealed .hiw-step{
  animation: hiwSeqHighlight 9s ease-in-out infinite;
}
.msc-howitworks.is-revealed .hiw-step[data-step="1"]{ animation-delay: 0s; }
.msc-howitworks.is-revealed .hiw-step[data-step="2"]{ animation-delay: 3s; }
.msc-howitworks.is-revealed .hiw-step[data-step="3"]{ animation-delay: 6s; }
@keyframes hiwSeqHighlight{
  0%, 25%, 100% {
    border-color: rgba(244,221,141,0.16) !important;
    box-shadow: none;
  }
  10%, 18% {
    border-color: rgba(244,221,141,0.55) !important;
    box-shadow: 0 0 0 3px rgba(244,221,141,0.10), 0 8px 22px -10px rgba(244,221,141,0.32);
  }
}

/* Reduced motion · keep composed final state, no animations */
@media (prefers-reduced-motion: reduce){
  .hiw-weigh-beam, .hiw-orbit, .hiw-nucleus,
  .hiw-mint-coin, .hiw-mint-spark, .hiw-icon::before,
  .msc-howitworks.is-revealed .hiw-step{
    animation: none !important;
  }
  .hiw-step{ opacity: 1 !important; transform: none !important; }
  .hiw-thread-fill{ height: 100% !important; transition: none !important; }
}

/* Desktop · scale up the cards */
@media (min-width: 641px){
  .msc-howitworks{ padding: 64px 28px 52px; }
  .hiw-step{
    grid-template-columns: 72px 1fr !important;
    padding: 18px 22px !important;
  }
  .hiw-icon{ width: 72px !important; height: 72px !important; }
  .hiw-thread{ left: calc(28px + 36px); }
}

/* ─── assets/css/hero-ambient.css ─────────────────────────────────────── */
@media (max-width: 640px){

  /* (5) Hero ambient backdrop breath — soft radial glow behind coin */
  .msc-hero::after{
    content: '';
    position: absolute;
    top: 12%;
    left: 50%;
    width: clamp(280px, 80vw, 420px);
    height: clamp(280px, 80vw, 420px);
    transform: translateX(-50%);
    background: radial-gradient(circle,
      rgba(244,221,141,0.18) 0%,
      rgba(244,221,141,0.08) 30%,
      rgba(244,221,141,0.02) 55%,
      transparent 75%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    filter: blur(4px);
    animation: mscHeroBreath 7.2s ease-in-out infinite;
  }
  @keyframes mscHeroBreath{
    0%, 100% { opacity: .85; transform: translateX(-50%) scale(1.00); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
  }

  /* (1) SOV coin breath — bob + scale + halo, layered with existing tilt */
  .msc-coin-wrap{
    animation: mscCoinBreath 4.8s ease-in-out infinite;
    /* Existing tilt transition (0.16s ease-out on transform) is kept;
       breath uses its own animation channel so they compose cleanly. */
  }
  @keyframes mscCoinBreath{
    0%, 100% {
      transform: translateY(0) scale(1.00);
      filter: drop-shadow(0 18px 36px rgba(244,221,141,.18));
    }
    50% {
      transform: translateY(-6px) scale(1.025);
      filter: drop-shadow(0 24px 48px rgba(244,221,141,.34));
    }
  }
  /* When the SOV coin has live tilt (data-tilting attr set by JS),
     pause the breath so the two channels don't fight. */
  .msc-coin-wrap[data-tilting="1"]{ animation-play-state: paused; }

  /* (2) "Verified." italic gold shimmer — gradient sweeps across word */
  .msc-h1 em{
    background-image: linear-gradient(
      90deg,
      #F4DD8D 0%,
      #F4DD8D 38%,
      #FFEFA8 50%,
      #F4DD8D 62%,
      #F4DD8D 100%);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: mscVerifiedShimmer 6.2s ease-in-out infinite;
  }
  @keyframes mscVerifiedShimmer{
    0%, 100% { background-position: 100% 0; }
    50%      { background-position:  0%  0; }
  }

  /* (3) BUY primary CTA — diagonal gold sheen sweep + breathing glow */
  .msc-cta-primary{
    position: relative;
    overflow: hidden;
    animation: mscCtaGlow 3.6s ease-in-out infinite;
  }
  .msc-cta-primary::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,0.30) 50%,
      transparent 70%);
    transform: translateX(-130%);
    animation: mscCtaSheen 5.4s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes mscCtaSheen{
    0%, 78%, 100% { transform: translateX(-130%); }
    88%, 92%      { transform: translateX(230%); }
  }
  @keyframes mscCtaGlow{
    0%, 100% { box-shadow: 0 8px 18px rgba(244,221,141,0.22), 0 0 0 1px rgba(244,221,141,0.0) inset; }
    50%      { box-shadow: 0 12px 26px rgba(244,221,141,0.40), 0 0 0 1px rgba(255,239,168,0.18) inset; }
  }

  /* (6) PMMC ticker premium · live pulse dot prefix */
  .msc-ticker-premium::before{
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 6px currentColor;
    animation: mscTickerDot 2.0s ease-in-out infinite;
  }
  @keyframes mscTickerDot{
    0%, 100% { opacity: 1;   transform: scale(1.0); }
    50%      { opacity: .35; transform: scale(1.4); }
  }

  /* (4) Block height — subtle scale "blip" when value changes (JS toggles class) */
  #mscBlock.is-blip{
    color: #F4DD8D;
    text-shadow: 0 0 8px rgba(244,221,141,0.7);
    animation: mscBlockBlip .55s ease-out;
  }
  @keyframes mscBlockBlip{
    0%   { transform: translateY(-1px); }
    100% { transform: translateY(0); }
  }

  /* Statusbar greeting — gentle warm-breath on the gold word */
  .msc-greeting{
    animation: mscGreetingBreath 4.2s ease-in-out infinite;
  }
  @keyframes mscGreetingBreath{
    0%, 100% { text-shadow: 0 0 0 rgba(244,221,141,0); }
    50%      { text-shadow: 0 0 10px rgba(244,221,141,0.45); }
  }

  /* Reduced motion — kill all the new channels cleanly */
  @media (prefers-reduced-motion: reduce){
    .msc-hero::after,
    .msc-coin-wrap,
    .msc-h1 em,
    .msc-cta-primary,
    .msc-cta-primary::before,
    .msc-ticker-premium::before,
    .msc-greeting{
      animation: none !important;
    }
    .msc-h1 em{
      -webkit-text-fill-color: #F4DD8D;
              color: #F4DD8D;
    }
  }
}

/* ─── assets/css/mobile-hero-aaa.css ─────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
   AAA+ MOBILE HERO UPGRADE · 2026-05-25
   Maximum cinematic depth · Akan gold soul · institutional precision
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Deep void atmosphere · star-field + cinematic layers ── */
  .msc-hero {
    background:
      radial-gradient(1px 1px at 15% 22%, rgba(255,250,220,0.70) 0%, transparent 100%),
      radial-gradient(1px 1px at 72% 11%, rgba(255,250,220,0.55) 0%, transparent 100%),
      radial-gradient(1px 1px at 38% 68%, rgba(255,250,220,0.60) 0%, transparent 100%),
      radial-gradient(1px 1px at 88% 45%, rgba(255,250,220,0.42) 0%, transparent 100%),
      radial-gradient(1px 1px at 55% 82%, rgba(255,250,220,0.50) 0%, transparent 100%),
      radial-gradient(1px 1px at  8% 54%, rgba(255,250,220,0.38) 0%, transparent 100%),
      radial-gradient(1px 1px at 62% 34%, rgba(244,221,141,0.58) 0%, transparent 100%),
      radial-gradient(1px 1px at 29% 87%, rgba(255,250,220,0.35) 0%, transparent 100%),
      radial-gradient(1px 1px at 91% 78%, rgba(255,250,220,0.45) 0%, transparent 100%),
      radial-gradient(1px 1px at 44%  5%, rgba(244,221,141,0.62) 0%, transparent 100%),
      radial-gradient(1px 1px at 77% 63%, rgba(255,250,220,0.30) 0%, transparent 100%),
      radial-gradient(1px 1px at 21% 41%, rgba(244,221,141,0.40) 0%, transparent 100%),
      radial-gradient(ellipse 55% 45% at 50% 38%, rgba(244,196,64,0.16) 0%, rgba(244,196,64,0.06) 45%, transparent 70%),
      radial-gradient(ellipse 90% 28% at 50% 100%, rgba(100,72,18,0.50) 0%, transparent 65%),
      linear-gradient(180deg, #020709 0%, #050C16 28%, #0A1422 60%, #060D18 100%) !important;
    min-height: 100svh !important;
  }

  /* ── Hero ::after backdrop glow · dramatically stronger ── */
  .msc-hero::after {
    opacity: 1 !important;
    background:
      radial-gradient(ellipse 72% 54% at 50% 42%,
        rgba(244,196,64,0.28) 0%,
        rgba(244,196,64,0.12) 40%,
        transparent 72%) !important;
    filter: blur(6px) !important;
  }

  /* ── Coin wrap · expanded for maximum presence ── */
  .msc-coin-wrap {
    width:  clamp(200px, 56vw, 260px) !important;
    height: clamp(200px, 56vw, 260px) !important;
    margin-bottom: 10px !important;
  }

  /* ── Coin breath · dramatic multi-layer glow · overrides earlier keyframe ── */
  @keyframes mscCoinBreath {
    0%, 100% {
      transform: translateY(0) scale(1.00);
      filter:
        drop-shadow(0 20px 40px rgba(0,0,0,.70))
        drop-shadow(0 0 14px rgba(244,221,141,.15));
    }
    50% {
      transform: translateY(-10px) scale(1.032);
      filter:
        drop-shadow(0 30px 60px rgba(0,0,0,.75))
        drop-shadow(0 0 44px rgba(244,221,141,.62))
        drop-shadow(0 0 88px rgba(244,196,64,.26));
    }
  }

  /* ── Coin halo ring · larger + more luminous at peak ── */
  @keyframes mscHaloPulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1.00); opacity: 0.12; }
    50%       { transform: translate(-50%,-50%) scale(1.14); opacity: 0.38; }
  }

  /* ── H1 · more monumental ceiling ── */
  .msc-h1 {
    font-size: clamp(34px, 9.5vw, 48px) !important;
    letter-spacing: -1.4px !important;
    line-height: 1.0 !important;
    margin: 10px 0 6px !important;
  }

  /* ── Cultural anchor · larger + richer struck-bronze ── */
  .msc-cultural-anchor {
    font-size: clamp(15px, 4.2vw, 21px) !important;
    background: linear-gradient(135deg,
      #FFFBD0 0%, #FFEFA8 15%, #F4DD8D 42%, #C8A84E 70%, #8B6E2A 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin: 10px auto 16px !important;
    letter-spacing: 0.04em !important;
  }

  /* ── Eyebrow / sub-headline ── */
  .msc-eyebrow {
    font-size: clamp(10px, 2.8vw, 13px) !important;
    letter-spacing: 0.22em !important;
    opacity: 0.65 !important;
  }

  /* ── Primary CTA · authority shadow + micro-press ── */
  .msc-cta-primary {
    box-shadow:
      0 12px 36px rgba(244,221,141,.42),
      0 0 0 1px rgba(255,247,202,.18) inset !important;
    transition: transform .18s, box-shadow .18s !important;
  }
  .msc-cta-primary:active {
    transform: scale(0.96) !important;
    box-shadow:
      0 6px 18px rgba(244,221,141,.28),
      0 0 0 1px rgba(255,247,202,.14) inset !important;
  }

  /* ── Gold flow ribbons · quieter so coin leads ── */
  .msc-gold-flow { opacity: 0.22 !important; }

  /* ── Scroll panels 2–4 · deeper atmosphere ── */
  .msc-panel:nth-child(2),
  .msc-panel:nth-child(3),
  .msc-panel:nth-child(4) {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%,
        rgba(244,196,64,0.08) 0%, transparent 65%),
      linear-gradient(180deg, #060D18 0%, #03070D 100%) !important;
  }

  /* ── Section dividers · gold pulse ── */
  .msc-divider,
  .msc-panel + .msc-panel {
    border-top: 1px solid rgba(244,221,141,0.12) !important;
  }

}
/* ── End AAA+ Mobile Hero Upgrade ── */

/* ─── assets/css/mantis-shrimp.css ─────────────────────────────────────── */
      .msc-cultural-anchor {
        text-align: center;
        font-family: Georgia, 'Iowan Old Style', serif;
        font-style: italic;
        font-size: clamp(13.5px, 3.6vw, 17px);
        line-height: 1.5;
        letter-spacing: 0.005em;
        margin: 14px auto 16px;
        max-width: 320px;
        min-height: 76px;       /* reserve 3-line space, no layout shift */
        padding: 0 16px;
        background: linear-gradient(135deg, #FFEFA8 0%, #F4DD8D 35%, #C8A84E 70%, #8B6E2A 100%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        display: flex;
        flex-direction: column;
        gap: 2px;
        justify-content: center;
        align-items: center;
      }
      .msc-cultural-anchor > span {
        display: inline-block;
        opacity: 0;
        transform: translateY(6px);
        animation: mscCulturalReveal 0.7s cubic-bezier(.22, 1, .36, 1) forwards;
      }
      .msc-cultural-anchor > span:nth-child(1) { animation-delay: 0.45s; }
      .msc-cultural-anchor > span:nth-child(2) { animation-delay: 1.05s; }
      .msc-cultural-anchor > span:nth-child(3) { animation-delay: 1.65s; }
      @keyframes mscCulturalReveal {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .msc-heritage-caption {
        text-align: center;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9.5px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(244, 221, 141, 0.45);
        margin: 8px auto 0;
        max-width: 360px;
        padding: 0 12px;
        opacity: 0;
        animation: mscHeritageFadeIn 0.8s ease-out 2.6s forwards;
      }
      @keyframes mscHeritageFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      /* Reduced motion: skip the staged reveal, show fully immediately */
      @media (prefers-reduced-motion: reduce) {
        .msc-cultural-anchor > span,
        .msc-heritage-caption {
          opacity: 1 !important;
          transform: none !important;
          animation: none !important;
        }
      }

/* ──────────────────────────────── */
      @media (prefers-reduced-motion: no-preference) {
        .msc-coin-wrap:not(.is-cascading) {
          animation: mscCoinBreath 5.2s ease-in-out infinite;
        }
        @keyframes mscCoinBreath {
          0%, 100% {
            filter:
              drop-shadow(0 0 0 rgba(244,221,141,0))
              drop-shadow(0 8px 24px rgba(0,0,0,.5));
          }
          50% {
            filter:
              drop-shadow(0 0 18px rgba(244,221,141,.22))
              drop-shadow(0 12px 32px rgba(0,0,0,.55));
          }
        }
        .msc-h1 em {
          background-size: 200% 100%;
          animation: mscHeroShimmer 7s ease-in-out infinite;
        }
        @keyframes mscHeroShimmer {
          0%, 100% { background-position: 0% 50%; }
          50%      { background-position: 100% 50%; }
        }
        /* ─── Hero text · staged reveal + continuous subtle float ─── */
        .msc-h1 {
          opacity: 0;
          transform: translateY(8px);
          animation: mscH1Reveal 1.0s cubic-bezier(.22, 1, .36, 1) 1.9s forwards,
                     mscH1Float 9s ease-in-out 2.9s infinite;
        }
        @keyframes mscH1Reveal {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes mscH1Float {
          0%, 100% { transform: translateY(0); }
          50%      { transform: translateY(-3px); }
        }
      }
      /* "24/7 live" green pulse · always on (reduced-motion fallback below) */
      .msc-live-247 {
        display: inline-flex;
        align-items: center;
        gap: 0.32em;
        white-space: nowrap;
        font-style: normal;          /* override any inherited italic */
        color: #1FE07F;
        -webkit-text-fill-color: #1FE07F;
        background: none;
        text-shadow: 0 0 14px rgba(31, 224, 127, 0.42);
      }
      .msc-live-247-dot {
        display: inline-block;
        width: 0.55em; height: 0.55em;
        border-radius: 50%;
        background: #1FE07F;
        box-shadow:
          0 0 10px rgba(31, 224, 127, .9),
          0 0 22px rgba(31, 224, 127, .55);
        vertical-align: middle;
        flex-shrink: 0;
      }
      @media (prefers-reduced-motion: no-preference) {
        .msc-live-247 {
          animation: mscLive247Breath 2.4s ease-in-out infinite;
        }
        .msc-live-247-dot {
          animation: mscLive247Dot 2.4s ease-in-out infinite;
        }
        @keyframes mscLive247Breath {
          0%, 100% {
            text-shadow: 0 0 14px rgba(31, 224, 127, .42);
          }
          50% {
            text-shadow:
              0 0 22px rgba(31, 224, 127, .8),
              0 0 36px rgba(31, 224, 127, .35);
          }
        }
        @keyframes mscLive247Dot {
          0%, 100% { transform: scale(1); opacity: 1; }
          50%      { transform: scale(1.45); opacity: .8; }
        }
      }

/* ──────────────────────────────── */
      .msc-heritage-echo { display: none; }
      @media (max-width: 640px) {
        .msc-heritage-echo {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          margin: 18px auto 4px;
          padding: 14px 18px 16px;
          max-width: 340px;
          background:
            linear-gradient(180deg, rgba(244,221,141,.04) 0%, rgba(244,221,141,.02) 100%);
          border: 1px solid rgba(244,221,141,.18);
          border-radius: 10px;
          text-decoration: none;
          color: inherit;
          transition: background .2s ease, border-color .2s ease, transform .12s ease;
          -webkit-tap-highlight-color: rgba(244,221,141,.12);
        }
        .msc-heritage-echo:active { transform: scale(0.985); }
        .msc-heritage-echo:focus-visible {
          outline: 2px solid rgba(244,221,141,.5);
          outline-offset: 3px;
        }
        .msc-heritage-echo-mark {
          font-family: Georgia, serif;
          font-size: 22px; letter-spacing: 8px;
          background: linear-gradient(135deg, #F4DD8D 0%, #C8A84E 50%, #8B6E2A 100%);
          -webkit-background-clip: text; background-clip: text;
          -webkit-text-fill-color: transparent;
          line-height: 1; margin: 0 0 2px;
        }
        .msc-heritage-echo-eyebrow {
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 9px; letter-spacing: 2.4px;
          text-transform: uppercase;
          color: rgba(244,221,141,.7);
        }
        .msc-heritage-echo-body {
          font-family: Georgia, serif; font-style: italic;
          font-size: 13.5px; line-height: 1.5;
          color: rgba(245,239,228,.92);
          text-align: center;
          margin: 0;
        }
        .msc-heritage-echo-cta {
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 9.5px; letter-spacing: 2px;
          text-transform: uppercase;
          color: #F4DD8D;
          margin-top: 2px;
          display: inline-flex; align-items: center; gap: 6px;
        }
      }

/* ─── assets/css/verify-section.css ─────────────────────────────────────── */
    .vpay-verify-section,
    #vpay-verify-backdrop,
    #vpay-verify-sheet { display: none !important; }
    html, body { overflow-y: auto !important; }

/* ──────────────────────────────── */
    .vpay-verify-section {
      padding: 56px 20px 40px;
      background:
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(244,221,141,.04) 0%, transparent 60%),
        linear-gradient(180deg, #060D18 0%, #0A1422 100%);
      position: relative;
    }
    .vpay-verify-section::before {
      content: '';
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 60%; max-width: 320px; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200,168,78,.4), transparent);
    }
    .vpay-verify-eyebrow {
      text-align: center;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px; letter-spacing: 0.38em; text-transform: uppercase;
      color: rgba(200,168,78,.78);
      margin: 0 0 18px;
      display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .vpay-verify-eyebrow .v-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #1FE07F; box-shadow: 0 0 8px rgba(31,224,127,.7);
    }
    @media (prefers-reduced-motion: no-preference) {
      .vpay-verify-eyebrow .v-dot {
        animation: vpayVerifyDot 2.2s ease-in-out infinite;
      }
    }
    @keyframes vpayVerifyDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .55; transform: scale(1.5); }
    }
    .vpay-verify-headline {
      text-align: center;
      font-family: Georgia, 'Iowan Old Style', serif;
      font-size: clamp(22px, 5.2vw, 28px);
      font-weight: 400; line-height: 1.18;
      color: #F4F0E0;
      margin: 0 0 26px;
      max-width: 640px; margin-left: auto; margin-right: auto;
      letter-spacing: -0.012em;
    }
    .vpay-verify-headline em {
      font-style: italic;
      background: linear-gradient(135deg, #F4D470 0%, #C8A84E 50%, #A87818 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* The verification card */
    #vpay-verify-card {
      max-width: 440px;
      margin: 0 auto;
      padding: 24px 22px;
      background:
        linear-gradient(180deg, rgba(15,27,45,.92) 0%, rgba(10,20,34,.96) 100%);
      border: 1px solid rgba(200,168,78,.28);
      border-radius: 8px;
      box-shadow:
        0 18px 48px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(244,221,141,.06);
      position: relative;
      opacity: 0; pointer-events: none;
      transition: opacity .4s ease;
    }
    #vpay-verify-card.is-ready { opacity: 1; pointer-events: auto; }
    #vpay-verify-card.is-unavailable { display: none; }
    #vpay-verify-card::before {
      content: ''; position: absolute; left: 0; top: 16px; bottom: 16px;
      width: 2px; background: linear-gradient(180deg, rgba(244,221,141,.65), rgba(244,221,141,.08));
    }
    .vpay-vc-meta {
      display: flex; justify-content: space-between; align-items: center;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(244,221,141,.7);
      margin-bottom: 14px;
    }
    .vpay-vc-meta [data-v-time] { color: #1FE07F; letter-spacing: 0.08em; }
    .vpay-vc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 18px;
      margin-bottom: 18px;
    }
    .vpay-vc-grid > div {
      display: flex; flex-direction: column; gap: 4px;
    }
    .vpay-vc-grid .lbl {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(232,224,204,.55);
    }
    .vpay-vc-grid .val {
      font-family: Georgia, serif;
      font-size: 17px; color: #F4F0E0; font-weight: 500;
    }
    .vpay-vc-grid .val.mono {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 13px; letter-spacing: 0.04em;
    }
    .vpay-vc-cta {
      display: block; width: 100%;
      padding: 14px 22px;
      background:
        linear-gradient(135deg, #F4DD8D 0%, #C8A84E 50%, #8B6E2A 100%);
      color: #1A1410;
      border: none; border-radius: 6px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform .12s ease, box-shadow .2s ease;
      box-shadow:
        0 6px 18px rgba(200,168,78,.32),
        inset 0 1px 0 rgba(255,255,255,.4),
        inset 0 -1px 0 rgba(0,0,0,.22);
    }
    .vpay-vc-cta:hover, .vpay-vc-cta:focus-visible {
      box-shadow:
        0 10px 28px rgba(200,168,78,.5),
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 0 rgba(0,0,0,.22);
      outline: none;
    }
    .vpay-vc-cta:active { transform: scale(0.97); }
    .vpay-vc-honesty {
      text-align: center;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(232,224,204,.42);
      margin: 14px 0 0;
    }

    /* ─── Bottom sheet ─── */
    #vpay-verify-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none; visibility: hidden;
      z-index: 9000;
      transition: opacity .3s ease, visibility 0s ease .3s;
    }
    #vpay-verify-backdrop.is-visible {
      opacity: 1; pointer-events: auto; visibility: visible;
      transition: opacity .3s ease;
    }
    #vpay-verify-sheet {
      position: fixed;
      left: 50%; bottom: 0; transform: translate(-50%, 100%);
      width: 100%; max-width: 520px;
      max-height: 88vh;
      background:
        linear-gradient(180deg, #0A1422 0%, #060D18 100%);
      border-top: 1px solid rgba(200,168,78,.4);
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -24px 80px rgba(0,0,0,.7);
      z-index: 9001;
      overflow-y: auto;
      transition: transform .42s cubic-bezier(.22,1,.36,1);
      padding: 0 0 28px;
    }
    #vpay-verify-sheet.is-open { transform: translate(-50%, 0); }
    /* Desktop: keep the slide-from-bottom-edge pattern (works great on
       all viewports). Just round the top corners and add a hairline
       border on top. The buggy "center-modal" override is GONE — it
       was positioning the closed-state sheet inside the viewport and
       blocking scroll on desktop. 2026-05-23 fix. */
    @media (min-width: 720px) {
      #vpay-verify-sheet {
        border: 1px solid rgba(200,168,78,.4);
        border-bottom: none;
      }
    }
    .vpay-vs-grab {
      width: 100%; padding: 12px 0 6px;
      display: flex; justify-content: center;
      cursor: grab;
    }
    .vpay-vs-grab span {
      display: block; width: 44px; height: 4px;
      background: rgba(244,221,141,.32);
      border-radius: 4px;
    }
    .vpay-vs-head {
      padding: 4px 22px 18px;
      border-bottom: 1px solid rgba(200,168,78,.14);
      display: flex; align-items: center; justify-content: space-between;
    }
    .vpay-vs-head h3 {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
      color: rgba(244,221,141,.9);
      margin: 0;
    }
    .vpay-vs-close {
      background: transparent; border: 1px solid rgba(200,168,78,.32);
      width: 32px; height: 32px; border-radius: 50%;
      display: grid; place-items: center;
      color: rgba(244,221,141,.7); cursor: pointer;
      font-family: serif; font-size: 18px; line-height: 1;
      transition: background .18s, border-color .18s, color .18s;
    }
    .vpay-vs-close:hover {
      background: rgba(200,168,78,.1);
      border-color: rgba(200,168,78,.6);
      color: #F4DD8D;
    }
    .vpay-vs-body {
      padding: 20px 22px 8px;
    }
    .vpay-vs-cov {
      display: grid;
      grid-template-columns: 32px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid rgba(244,221,141,.08);
      transition: opacity .22s;
    }
    .vpay-vs-cov:last-child { border-bottom: 0; }
    .vpay-vs-cov-sigil {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(15,27,45,.7);
      border: 1px solid rgba(244,221,141,.22);
      display: grid; place-items: center;
      font-family: serif; font-size: 16px;
      color: rgba(244,221,141,.6);
      transition: all .3s ease;
    }
    .vpay-vs-cov-label {
      font-family: Georgia, serif;
      font-size: 16px;
      color: rgba(244,221,141,.92);
      margin: 0 0 3px;
    }
    .vpay-vs-cov-sub {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
      color: rgba(232,224,204,.5);
    }
    .vpay-vs-cov-state {
      display: flex; align-items: center; gap: 8px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(232,224,204,.4);
    }
    .vpay-vs-cov-state::before {
      content: ''; width: 10px; height: 10px; border-radius: 50%;
      background: rgba(244,221,141,.18);
      border: 1px solid rgba(244,221,141,.32);
    }
    .vpay-vs-cov.is-checking .vpay-vs-cov-state {
      color: rgba(244,221,141,.85);
    }
    .vpay-vs-cov.is-checking .vpay-vs-cov-state::before {
      background: rgba(244,221,141,.4);
      box-shadow: 0 0 8px rgba(244,221,141,.5);
      animation: vpayChecking 0.9s ease-in-out infinite;
    }
    @keyframes vpayChecking {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .5; transform: scale(1.3); }
    }
    .vpay-vs-cov.is-verified .vpay-vs-cov-state {
      color: #1FE07F;
    }
    .vpay-vs-cov.is-verified .vpay-vs-cov-state::before {
      background: #1FE07F;
      border-color: rgba(31,224,127,.6);
      box-shadow: 0 0 10px rgba(31,224,127,.5);
    }
    .vpay-vs-cov.is-verified .vpay-vs-cov-sigil {
      background: rgba(31,224,127,.08);
      border-color: rgba(31,224,127,.4);
      color: #F4D470;
      box-shadow: 0 0 20px rgba(244,221,141,.18);
    }
    .vpay-vs-cov.is-mismatch .vpay-vs-cov-state {
      color: #E85D3D;
    }
    .vpay-vs-cov.is-mismatch .vpay-vs-cov-state::before {
      background: #E85D3D;
      border-color: rgba(232,93,61,.6);
    }
    .vpay-vs-cov-tx {
      grid-column: 2 / span 2;
      margin-top: 6px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px;
      color: rgba(232,224,204,.55);
    }
    .vpay-vs-cov-tx a {
      color: rgba(244,221,141,.8);
      text-decoration: none;
    }
    .vpay-vs-cov-tx a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* Witness hash compare */
    .vpay-witness-compare {
      grid-column: 2 / span 2;
      margin-top: 10px;
      padding: 12px 14px;
      background: rgba(6,13,24,.6);
      border: 1px solid rgba(200,168,78,.12);
      border-radius: 4px;
    }
    .vpay-witness-compare:empty { display: none; }
    .hash-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
      padding: 6px 0;
    }
    .hash-row + .hash-row {
      border-top: 1px solid rgba(244,221,141,.08);
      margin-top: 4px; padding-top: 10px;
    }
    .hash-label {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(232,224,204,.5);
    }
    .hash-row.hash-row-recomp .hash-label {
      color: rgba(244,221,141,.78);
    }
    .hash-row.is-matched .hash-label {
      color: #1FE07F;
    }
    .hash-val {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; letter-spacing: 0.02em;
      color: rgba(232,224,204,.9);
      word-break: break-all;
      line-height: 1.5;
    }
    .hash-row.is-matched .hash-val {
      color: #1FE07F;
      text-shadow: 0 0 8px rgba(31,224,127,.3);
    }

    /* Trinity stamp · only reveals on full match */
    .vpay-trinity-stamp {
      margin: 22px 22px 0;
      padding: 18px 24px;
      background:
        radial-gradient(circle at 50% 50%, rgba(244,221,141,.06) 0%, transparent 70%),
        linear-gradient(180deg, rgba(15,27,45,.5) 0%, rgba(10,20,34,.7) 100%);
      border: 1px solid rgba(200,168,78,.18);
      border-radius: 6px;
      text-align: center;
      opacity: 0; transform: translateY(6px);
      transition: opacity .55s ease, transform .55s cubic-bezier(.22,1.4,.36,1);
    }
    .vpay-trinity-stamp.is-revealed {
      opacity: 1; transform: translateY(0);
    }
    .vpay-trinity-stamp .ts-sigils {
      font-family: serif; font-size: 22px; letter-spacing: 0.4em;
      background: linear-gradient(135deg, #F4DD8D 0%, #C8A84E 50%, #8B6E2A 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 8px;
    }
    .vpay-trinity-stamp .ts-line {
      font-family: Georgia, serif; font-style: italic;
      font-size: 15px;
      background: linear-gradient(135deg, #F4DD8D 0%, #C8A84E 50%, #A87818 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Mobile tweaks */
    @media (max-width: 480px) {
      .vpay-vc-grid { grid-template-columns: 1fr; gap: 12px; }
      .vpay-vs-cov { grid-template-columns: 28px 1fr auto; gap: 10px; }
      .vpay-vs-cov-sigil { width: 28px; height: 28px; font-size: 14px; }
      .vpay-vs-cov-label { font-size: 15px; }
    }

/* ─── assets/css/partnership-strip.css ─────────────────────────────────────── */
  /* ─── Partnership rotation strip ─── */
  .cine-partnership {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 22px;
    min-height: 22px;
    font-family: 'JetBrains Mono', Consolas, monospace;
    opacity: 0;
    animation: cineParnerInitial 0.8s ease-in 0.6s forwards;
  }
  @keyframes cineParnerInitial {
    to { opacity: 1; }
  }
  .cine-partnership-eyebrow {
    font-size: 10px;
    letter-spacing: 3.2px;
    color: rgba(245, 239, 228, .42);
    text-transform: uppercase;
    font-weight: 600;
  }
  .cine-partnership-name {
    font-size: 13px;
    letter-spacing: 1.6px;
    color: #F4DD8D;
    text-transform: uppercase;
    font-weight: 700;
    transition: opacity 0.4s ease;
    position: relative;
  }
  .cine-partnership-name.swap-out { opacity: 0; transform: translateY(-2px); }

  /* ─── Watch button · circular, top-right of hero ─── */
  .cine-watch-btn {
    position: absolute;
    top: clamp(108px, 12vh, 152px);  /* below the nav + status row */
    right: clamp(20px, 4vw, 56px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 27, 45, .45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(244, 221, 141, .22);
    border-radius: 999px;
    padding: 10px 22px 10px 12px;
    cursor: pointer;
    color: #F4DD8D;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    transition: transform .2s ease, border-color .25s ease, background .25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .cine-watch-btn:hover,
  .cine-watch-btn:focus-visible {
    border-color: rgba(244, 221, 141, .55);
    background: rgba(15, 27, 45, .65);
    transform: scale(1.03);
    outline: none;
  }
  .cine-watch-btn:active { transform: scale(0.97); }
  .cine-watch-btn svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    animation: cineWatchPulse 2.6s ease-in-out infinite;
  }
  @keyframes cineWatchPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(244,221,141,.0)); }
    50% { transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(244,221,141,.45)); }
  }
  .cine-watch-label {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
  }
  .cine-watch-line-1 {
    font-size: 9.5px;
    letter-spacing: 2.8px;
    color: rgba(244, 221, 141, .65);
    font-weight: 600;
  }
  .cine-watch-line-2 {
    font-size: 11.5px;
    letter-spacing: 2px;
    color: #F4DD8D;
    font-weight: 700;
  }

  /* ─── LIVE · PAUSE control · bottom-right of hero ─── */
  .cine-live-pause {
    position: absolute;
    bottom: clamp(24px, 4vh, 40px);
    right: clamp(20px, 4vw, 56px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 14px;
    border-radius: 999px;
    background: rgba(15, 27, 45, .55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(244, 221, 141, .12);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2.4px;
    color: rgba(245, 239, 228, .82);
    text-transform: uppercase;
  }
  .clp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1FE07F;
    box-shadow: 0 0 8px rgba(31, 224, 127, .6);
    animation: clpPulse 2s infinite ease-in-out;
  }
  .cine-live-pause.paused .clp-dot {
    background: rgba(244, 221, 141, .55);
    box-shadow: none;
    animation: none;
  }
  .cine-live-pause.paused .clp-label { color: rgba(244, 221, 141, .8); }
  @keyframes clpPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: .5; }
  }
  .clp-toggle {
    background: transparent;
    border: none;
    color: rgba(245, 239, 228, .55);
    padding: 0;
    margin: 0 0 0 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }
  .clp-toggle:hover { color: #F4DD8D; }
  .clp-toggle svg { width: 10px; height: 10px; display: block; }
  /* Pause icon swaps to play arrow when paused */
  .cine-live-pause.paused .clp-toggle svg rect { display: none; }
  .cine-live-pause.paused .clp-toggle svg::after {
    content: '';
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .cine-live-pause.paused .clp-toggle::before {
    content: '▶';
    color: #F4DD8D;
    font-size: 9px;
    margin-left: 2px;
  }

  /* Hide the KKR-liveness layer on mobile (consumer surface handles it) */
  @media (max-width: 640px) {
    .cine-watch-btn,
    .cine-live-pause,
    .cine-partnership { display: none !important; }
  }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .cine-watch-btn svg,
    .clp-dot,
    .cine-partnership-name { animation: none !important; transition: none !important; }
  }

/* ─── assets/css/truth-drop.css ─────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   THE TRUTH DROP · CINEMATIC CSS · rebuilt 2026-05-26
   Architecture: each stage uses visibility:hidden so it is
   truly absent from the render tree when not shown.
   Only one stage is .tdc-active at a time → zero bleed.
   ═══════════════════════════════════════════════════════════════ */

/* ── Root overlay ── */
.tdc-root {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: radial-gradient(ellipse at 50% 40%,
    #0D1E36 0%, #07121F 55%, #020810 100%);
  overflow: hidden;
}
.tdc-root.tdc-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tdc-root.tdc-closing { animation: tdcFadeOut 0.7s ease forwards; }

@keyframes tdcFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tdcFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Atmospheric grid ── */
.tdc-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tdc-grid-h, .tdc-grid-v {
  position: absolute;
  background: rgba(244, 221, 141, .038);
}
.tdc-grid-h { height: 1px; left: 0; right: 0; }
.tdc-grid-h:nth-child(1) { top: 33%; }
.tdc-grid-h:nth-child(2) { top: 50%; }
.tdc-grid-h:nth-child(3) { top: 67%; }
.tdc-grid-v { width: 1px; top: 0; bottom: 0; }
.tdc-grid-v:nth-child(4) { left: 25%; }
.tdc-grid-v:nth-child(5) { left: 50%; }
.tdc-grid-v:nth-child(6) { left: 75%; }

/* ── Corner brackets ── */
.tdc-bracket {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  opacity: .45;
}
.tdc-bracket::before,
.tdc-bracket::after {
  content: '';
  position: absolute;
  background: #F4DD8D;
}
.tdc-bracket::before { width: 2px; height: 100%; }
.tdc-bracket::after  { height: 2px; width: 100%; }
.tdc-bracket-tl { top: 24px; left: 24px; }
.tdc-bracket-tl::before { top: 0; left: 0; }
.tdc-bracket-tl::after  { top: 0; left: 0; }
.tdc-bracket-tr { top: 24px; right: 24px; transform: scaleX(-1); }
.tdc-bracket-tr::before { top: 0; left: 0; }
.tdc-bracket-tr::after  { top: 0; left: 0; }
.tdc-bracket-bl { bottom: 24px; left: 24px; transform: scaleY(-1); }
.tdc-bracket-bl::before { top: 0; left: 0; }
.tdc-bracket-bl::after  { top: 0; left: 0; }
.tdc-bracket-br { bottom: 24px; right: 24px; transform: scale(-1); }
.tdc-bracket-br::before { top: 0; left: 0; }
.tdc-bracket-br::after  { top: 0; left: 0; }

/* ── Close button ── */
.tdc-close {
  position: absolute;
  top: 20px;
  right: 28px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(12, 24, 42, .7);
  border: 1px solid rgba(244, 221, 141, .2);
  color: rgba(244, 221, 141, .75);
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s ease, transform .18s ease, border-color .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tdc-root.tdc-show-close .tdc-close {
  opacity: 1;
}
.tdc-close:hover {
  border-color: rgba(244, 221, 141, .55);
  color: #F4DD8D;
  transform: scale(1.08);
}

/* ── Stage architecture · single-stage visibility ──
   Each .tdc-stage is absolutely centered, hidden by default.
   Only .tdc-active is visible. No two stages visible simultaneously. */
.tdc-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px clamp(24px, 6vw, 96px);
  opacity: 0;
  visibility: hidden;
  /* visibility delay matches fade-out so element hides AFTER fade completes */
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  pointer-events: none;
}
.tdc-stage.tdc-active {
  opacity: 1;
  visibility: visible;
  /* visibility becomes visible IMMEDIATELY so element shows as it fades in */
  transition: opacity 0.45s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

/* ══════════════════════════════════════════
   STAGE 1 · The Claim
   ══════════════════════════════════════════ */
.tdc-s1-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(244, 221, 141, .42);
  text-transform: uppercase;
  margin: 0 0 40px;
}
.tdc-s1-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tdc-s1-l {
  font-family: Georgia, 'Iowan Old Style', serif;
  font-size: clamp(30px, 4.2vw, 56px);
  font-style: italic;
  font-weight: 400;
  color: rgba(245, 239, 228, .88);
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.5px;
}
.tdc-s1-accent {
  font-style: normal;
  margin-top: 6px;
}
.tdc-s1-accent strong {
  color: #F4DD8D;
  font-weight: 700;
  font-style: normal;
}
.tdc-s1-rule {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,221,141,.55), transparent);
  margin: 32px auto 24px;
}
.tdc-s1-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: rgba(245, 239, 228, .38);
  text-transform: uppercase;
  margin: 0;
}

/* ══════════════════════════════════════════
   STAGE 2 · Attestation Manifest
   ══════════════════════════════════════════ */
.tdc-manifest {
  width: 100%;
  max-width: 560px;
  border: 1px solid rgba(244, 221, 141, .18);
  border-radius: 6px;
  background: rgba(10, 20, 36, .75);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.tdc-mf-head {
  padding: 16px 24px 0;
  border-bottom: 1px solid rgba(244, 221, 141, .09);
  overflow: hidden;
}
.tdc-mf-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 3.5px;
  color: rgba(244, 221, 141, .55);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.tdc-mf-scanbar {
  position: relative;
  height: 2px;
  background: rgba(244, 221, 141, .08);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 0;
}
.tdc-mf-scanbeam {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(244, 221, 141, .7), transparent);
  animation: tdcScan 1.8s ease-in-out infinite;
}
@keyframes tdcScan {
  0%   { left: -30%; }
  100% { left: 110%; }
}
.tdc-mf-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.tdc-mf-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.tdc-mf-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: rgba(244, 221, 141, .42);
  text-transform: uppercase;
  min-width: 64px;
  flex-shrink: 0;
}
.tdc-mf-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(245, 239, 228, .82);
  letter-spacing: 0.5px;
}
.tdc-mf-v-gold { color: #F4DD8D; }
.tdc-mf-row-block {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(244, 221, 141, .07);
}
.tdc-mf-v-block {
  color: rgba(245, 239, 228, .5);
  font-size: 11px;
}
.tdc-mf-foot {
  padding: 10px 24px;
  background: rgba(244, 221, 141, .03);
  border-top: 1px solid rgba(244, 221, 141, .07);
}
.tdc-mf-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(244, 221, 141, .35);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   STAGE 3 · Eight Gates
   ══════════════════════════════════════════ */
.tdc-s3-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(244, 221, 141, .45);
  text-transform: uppercase;
  margin: 0 0 24px;
}
.tdc-gates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 780px;
}
.tdc-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 10px;
  border: 1px solid rgba(244, 221, 141, .1);
  border-radius: 6px;
  background: rgba(10, 20, 36, .5);
  transition: border-color .4s ease, background .4s ease, transform .25s ease;
}
.tdc-gate.tdc-latched {
  border-color: rgba(31, 224, 127, .5);
  background: rgba(31, 224, 127, .07);
  transform: scale(1.025);
  animation: tdcGateFlash 1.3s ease forwards;
}
.tdc-gate-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(244, 221, 141, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.tdc-gate.tdc-latched .tdc-gate-indicator {
  border-color: #1FE07F;
  background: #1FE07F;
  box-shadow: 0 0 10px rgba(31, 224, 127, .55);
}
.tdc-gate-dot {
  width: 6px;
  height: 10px;
  border: 2px solid transparent;
  border-right-color: #0F1B2D;
  border-bottom-color: #0F1B2D;
  transform: rotate(45deg) translate(-1px, -2px);
  opacity: 0;
  transition: opacity .25s ease .1s;
}
.tdc-gate.tdc-latched .tdc-gate-dot { opacity: 1; }
.tdc-gate-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(244, 221, 141, .45);
  transition: color .35s ease;
}
.tdc-gate.tdc-latched .tdc-gate-num { color: rgba(31, 224, 127, .75); }
.tdc-gate-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(245, 239, 228, .75);
  letter-spacing: 0.3px;
  line-height: 1.25;
}
.tdc-gate-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(245, 239, 228, .3);
  text-transform: uppercase;
  transition: color .35s ease;
}
.tdc-gate.tdc-latched .tdc-gate-status {
  color: rgba(31, 224, 127, .7);
}
.tdc-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 780px;
  margin-top: 18px;
}
.tdc-progress-track {
  flex: 1;
  height: 2px;
  background: rgba(244, 221, 141, .1);
  border-radius: 1px;
  overflow: hidden;
}
.tdc-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1FE07F, #A0E4C0);
  border-radius: 1px;
  transition: width .4s ease;
}
.tdc-progress-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(244, 221, 141, .45);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   STAGE 4 · Coin + Confirmation
   ══════════════════════════════════════════ */
.tdc-s4-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(31, 224, 127, .7);
  text-transform: uppercase;
  margin: 0 0 24px;
}
.tdc-coin {
  width: clamp(160px, 20vw, 240px);
  height: clamp(160px, 20vw, 240px);
  filter: drop-shadow(0 0 32px rgba(244, 221, 141, .25));
  animation: tdcCoinSpin 0.001s linear; /* trigger GPU layer */
}
.tdc-coin.tdc-active-coin {
  animation: tdcCoinReveal 1.6s cubic-bezier(.16, 1.15, .3, 1) forwards;
}
@keyframes tdcCoinReveal {
  0%   { transform: scale(0.4) rotateY(-180deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
.tdc-confirm-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  opacity: 0;
  transition: opacity 0.8s ease 0.6s;
}
.tdc-confirm-block.tdc-show { opacity: 1; }
.tdc-confirm-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(31, 224, 127, .8);
  text-transform: uppercase;
}
.tdc-confirm-tx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(244, 221, 141, .75);
  letter-spacing: 1px;
}

/* ══════════════════════════════════════════
   STAGE 5 · Final Verdict
   ══════════════════════════════════════════ */
.tdc-final-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(31, 224, 127, .65);
  text-transform: uppercase;
  margin: 0 0 24px;
}
.tdc-final-hl {
  font-family: Georgia, 'Iowan Old Style', serif;
  font-size: clamp(40px, 5.5vw, 70px);
  font-weight: 700;
  color: #F5EFE4;
  line-height: 1.08;
  letter-spacing: -0.8px;
  margin: 0 0 20px;
}
.tdc-final-hl em {
  font-style: italic;
  color: #F4DD8D;
  font-weight: 600;
}
.tdc-final-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(245, 239, 228, .38);
  text-transform: uppercase;
  margin: 0 0 40px;
}
.tdc-dismiss {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 3.5px;
  color: rgba(244, 221, 141, .28);
  text-transform: uppercase;
  animation: tdcDismissPulse 2.2s ease-in-out infinite;
}
@keyframes tdcDismissPulse {
  0%, 100% { opacity: .28; }
  50% { opacity: .58; }
}

/* ══════════════════════════════════════════════════════════
   CINEMATIC CASCADE & COMPONENT ANIMATIONS
   ══════════════════════════════════════════════════════════ */

/* ── Core movement keyframes ── */
@keyframes tdcLineIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tdcSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tdcRuleExpand {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes tdcAccentReveal {
  0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
  62%  { opacity: 1; transform: translateY(-3px) scale(1.018); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tdcGateFlash {
  0%   { box-shadow: 0 0 0 rgba(31,224,127,0); }
  20%  { box-shadow: 0 0 30px rgba(31,224,127,.7), inset 0 0 16px rgba(31,224,127,.12); }
  100% { box-shadow: 0 0 8px rgba(31,224,127,.1); }
}
@keyframes tdcFillComplete {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4) saturate(1.25); }
}
@keyframes tdcCoinRing {
  0%   { transform: scale(0.7);  border-color: rgba(244,221,141,.65); opacity: 1; }
  100% { transform: scale(1.55); border-color: rgba(244,221,141,0);   opacity: 0; }
}

/* ── Stage 1 · The Claim · cascade ── */
.tdc-stage#tdcS1 .tdc-s1-eye,
.tdc-stage#tdcS1 .tdc-s1-lines p,
.tdc-stage#tdcS1 .tdc-s1-rule,
.tdc-stage#tdcS1 .tdc-s1-sub { opacity: 0; }

.tdc-stage#tdcS1.tdc-active .tdc-s1-eye {
  animation: tdcLineIn 0.5s ease 0.08s both;
}
.tdc-stage#tdcS1.tdc-active .tdc-s1-lines p:first-child {
  animation: tdcLineIn 0.65s cubic-bezier(.2,1,.4,1) 0.45s both;
}
.tdc-stage#tdcS1.tdc-active .tdc-s1-lines p:nth-child(2) {
  animation: tdcLineIn 0.65s cubic-bezier(.2,1,.4,1) 0.9s both;
}
/* "200 milliseconds." — accent with overshooting bounce */
.tdc-stage#tdcS1.tdc-active .tdc-s1-accent {
  animation: tdcAccentReveal 0.85s cubic-bezier(.16,1.15,.3,1) 1.38s both;
}
.tdc-stage#tdcS1.tdc-active .tdc-s1-rule {
  animation: tdcRuleExpand 0.5s ease 2.05s both;
}
.tdc-stage#tdcS1.tdc-active .tdc-s1-sub {
  animation: tdcLineIn 0.5s ease 2.28s both;
}

/* ── Stage 2 · Attestation Manifest · cascade ── */
.tdc-stage#tdcS2 .tdc-manifest { opacity: 0; }
.tdc-stage#tdcS2 .tdc-mf-row   { opacity: 0; }

.tdc-stage#tdcS2.tdc-active .tdc-manifest {
  animation: tdcSlideUp 0.6s cubic-bezier(.2,1,.4,1) 0.12s both;
}
.tdc-stage#tdcS2.tdc-active .tdc-mf-row:nth-child(1) { animation: tdcLineIn 0.32s ease 0.62s both; }
.tdc-stage#tdcS2.tdc-active .tdc-mf-row:nth-child(2) { animation: tdcLineIn 0.32s ease 0.86s both; }
.tdc-stage#tdcS2.tdc-active .tdc-mf-row:nth-child(3) { animation: tdcLineIn 0.32s ease 1.10s both; }
.tdc-stage#tdcS2.tdc-active .tdc-mf-row:nth-child(4) { animation: tdcLineIn 0.32s ease 1.34s both; }
.tdc-stage#tdcS2.tdc-active .tdc-mf-row:nth-child(5) { animation: tdcLineIn 0.32s ease 1.58s both; }

/* ── Stage 3 · progress bar completion glow ── */
.tdc-progress-fill.tdc-complete {
  background: linear-gradient(90deg, #F4DD8D 0%, #1FE07F 55%, #A0E4C0 100%);
  animation: tdcFillComplete 1.25s ease-in-out 3;
}

/* ── Stage 4 · Coin wrap + ring emanation ── */
.tdc-coin-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 20vw, 240px);
  height: clamp(160px, 20vw, 240px);
}
.tdc-coin-ring {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  border: 2px solid rgba(244,221,141,0);
  pointer-events: none;
  z-index: 0;
}
.tdc-coin-wrap.tdc-minting .tdc-coin-ring:nth-child(1) {
  animation: tdcCoinRing 1.1s cubic-bezier(.2,.55,.45,1) 0.5s 1;
}
.tdc-coin-wrap.tdc-minting .tdc-coin-ring:nth-child(2) {
  animation: tdcCoinRing 1.1s cubic-bezier(.2,.55,.45,1) 1.0s 1;
}
.tdc-coin-wrap.tdc-minting .tdc-coin-ring:nth-child(3) {
  animation: tdcCoinRing 1.1s cubic-bezier(.2,.55,.45,1) 1.5s 1;
}
.tdc-coin-wrap .tdc-coin {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Stage 4 label cascade */
.tdc-stage#tdcS4 .tdc-s4-label { opacity: 0; }
.tdc-stage#tdcS4.tdc-active .tdc-s4-label { animation: tdcLineIn 0.5s ease 0.1s both; }

/* ── Stage 5 · Final verdict · cascade ── */
.tdc-stage#tdcS5 .tdc-final-eye,
.tdc-stage#tdcS5 .tdc-final-hl,
.tdc-stage#tdcS5 .tdc-final-sub,
.tdc-stage#tdcS5 .tdc-akan-seal,
.tdc-stage#tdcS5 .tdc-akan-epigraph,
.tdc-stage#tdcS5 .tdc-akan-translation,
.tdc-stage#tdcS5 .tdc-dismiss-wrap { opacity: 0; }

.tdc-stage#tdcS5.tdc-active .tdc-final-eye       { animation: tdcLineIn 0.5s ease 0.12s both; }
.tdc-stage#tdcS5.tdc-active .tdc-final-hl         { animation: tdcLineIn 0.72s cubic-bezier(.2,1,.4,1) 0.5s both; }
.tdc-stage#tdcS5.tdc-active .tdc-final-sub        { animation: tdcLineIn 0.5s ease 1.05s both; }
.tdc-stage#tdcS5.tdc-active .tdc-akan-seal        { animation: tdcLineIn 0.55s ease 1.55s both; }
.tdc-stage#tdcS5.tdc-active .tdc-akan-epigraph    { animation: tdcLineIn 0.55s ease 1.88s both; }
.tdc-stage#tdcS5.tdc-active .tdc-akan-translation { animation: tdcLineIn 0.5s ease 2.18s both; }
.tdc-stage#tdcS5.tdc-active .tdc-dismiss-wrap     { animation: tdcLineIn 0.5s ease 2.55s forwards; }

/* ── Akan epigraph elements ── */
.tdc-akan-seal {
  margin: 14px 0 6px;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.tdc-akan-seal svg { width: 100%; height: 100%; }

.tdc-akan-epigraph {
  font-family: Georgia, 'Iowan Old Style', serif;
  font-size: clamp(12px, 1.1vw, 15px);
  font-style: italic;
  color: rgba(244, 221, 141, .72);
  letter-spacing: 1.5px;
  margin: 0 0 7px;
}
.tdc-akan-translation {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 2px;
  color: rgba(245, 239, 228, .3);
  text-transform: uppercase;
  margin: 0 0 30px;
}
.tdc-dismiss-wrap {
  /* Fades in; inner .tdc-dismiss pulses independently */
}

/* Mobile: hidden — mobile has its own surface */
@media (max-width: 640px) {
  .tdc-root { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tdc-stage { transition: opacity 0.15s linear, visibility 0s linear; }
  .tdc-stage.tdc-active { transition: opacity 0.15s linear, visibility 0s linear; }
  .tdc-mf-scanbeam, .tdc-dismiss { animation: none; }
  .tdc-coin.tdc-active-coin { animation: none; transform: scale(1); opacity: 1; }
  /* Cascade overrides: show all children instantly at full opacity */
  .tdc-stage#tdcS1 .tdc-s1-eye,
  .tdc-stage#tdcS1 .tdc-s1-lines p,
  .tdc-stage#tdcS1 .tdc-s1-rule,
  .tdc-stage#tdcS1 .tdc-s1-sub,
  .tdc-stage#tdcS2 .tdc-manifest,
  .tdc-stage#tdcS2 .tdc-mf-row,
  .tdc-stage#tdcS4 .tdc-s4-label,
  .tdc-stage#tdcS5 .tdc-final-eye,
  .tdc-stage#tdcS5 .tdc-final-hl,
  .tdc-stage#tdcS5 .tdc-final-sub,
  .tdc-stage#tdcS5 .tdc-akan-seal,
  .tdc-stage#tdcS5 .tdc-akan-epigraph,
  .tdc-stage#tdcS5 .tdc-akan-translation,
  .tdc-stage#tdcS5 .tdc-dismiss-wrap { opacity: 1 !important; animation: none !important; transform: none !important; }
  .tdc-gate.tdc-latched { animation: none; }
  .tdc-progress-fill.tdc-complete { animation: none; }
  .tdc-coin-ring { animation: none !important; }
}

/* ─── assets/css/audience-router.css ─────────────────────────────────────── */
  .audience-router {
    position: relative;
    padding: clamp(48px, 7vw, 88px) 0;
    background: linear-gradient(180deg, #050B14 0%, #0A1322 50%, #050B14 100%);
    border-top: 1px solid rgba(244, 221, 141, .08);
    border-bottom: 1px solid rgba(244, 221, 141, .08);
  }
  .audience-router .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
  }
  .ar-head {
    text-align: center;
    margin-bottom: clamp(36px, 5vw, 56px);
  }
  .ar-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 3.5px;
    color: rgba(244, 221, 141, .65);
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 600;
  }
  .ar-headline {
    font-family: Georgia, 'Iowan Old Style', serif;
    font-size: clamp(28px, 3.6vw, 44px);
    color: #F5EFE4;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0 0 16px;
    font-weight: 700;
  }
  .ar-sub {
    font-family: -apple-system, sans-serif;
    font-size: clamp(14px, 1.15vw, 16px);
    color: rgba(245, 239, 228, .58);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.6;
  }
  .ar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.5vw, 22px);
  }
  .ar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(22px, 2.4vw, 32px);
    background: rgba(15, 27, 45, .55);
    border: 1px solid rgba(244, 221, 141, .12);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1),
                border-color .3s ease,
                background .3s ease;
    overflow: hidden;
    isolation: isolate;
  }
  .ar-card:hover, .ar-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(244, 221, 141, .45);
    background: rgba(15, 27, 45, .85);
    outline: none;
  }
  .ar-card-glow {
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 0%, rgba(244, 221, 141, .15), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 0;
  }
  .ar-card:hover .ar-card-glow,
  .ar-card:focus-visible .ar-card-glow { opacity: 1; }
  .ar-card > *:not(.ar-card-glow) { position: relative; z-index: 1; }

  .ar-icon {
    width: 44px;
    height: 44px;
    color: #F4DD8D;
    margin-bottom: 18px;
    opacity: 0.92;
  }
  .ar-icon svg { width: 100%; height: 100%; display: block; }

  .ar-card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 2.5px;
    color: rgba(244, 221, 141, .65);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 700;
  }
  .ar-card-title {
    font-family: Georgia, serif;
    font-size: clamp(17px, 1.45vw, 21px);
    color: #F5EFE4;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0 0 12px;
    font-weight: 700;
  }
  .ar-card-sub {
    font-family: -apple-system, sans-serif;
    font-size: 13.5px;
    color: rgba(245, 239, 228, .58);
    line-height: 1.55;
    margin: 0 0 22px;
    flex-grow: 1;
  }
  .ar-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.8px;
    color: #F4DD8D;
    text-transform: uppercase;
    font-weight: 700;
    transition: gap .25s ease;
  }
  .ar-card:hover .ar-card-cta { gap: 12px; }
  .ar-arrow {
    display: inline-block;
    transition: transform .25s ease;
  }
  .ar-card:hover .ar-arrow { transform: translateX(2px); }

  /* Subtle audience-specific accent on icon hover */
  .ar-card-citizens:hover .ar-icon     { color: #FFEFA8; }
  .ar-card-institutions:hover .ar-icon { color: #FFEFA8; }
  .ar-card-builders:hover .ar-icon     { color: #FFEFA8; }
  .ar-card-regulators:hover .ar-icon   { color: #FFEFA8; }

  /* Tablet · 2-column grid */
  @media (max-width: 960px) {
    .ar-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  /* Mobile · compact 2×2 grid · 2026-05-23
     User feedback: section was too tall, made the site feel long.
     Goal: short/smart/easy-nav. Description text hidden by default,
     CTA condensed. Tap navigates to the lane's dedicated page. */
  @media (max-width: 640px) {
    .audience-router { padding: 36px 0 32px; }
    .ar-head { margin-bottom: 22px; }
    .ar-eyebrow { font-size: 9.5px; letter-spacing: 2.6px; margin-bottom: 8px; }
    .ar-headline { font-size: 24px; margin-bottom: 8px; }
    .ar-sub { font-size: 13px; line-height: 1.5; padding: 0 8px; }

    .ar-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .ar-card {
      padding: 16px 14px 14px;
      border-radius: 12px;
      min-height: 142px;
    }
    .ar-card:hover, .ar-card:focus-visible {
      transform: none;     /* disable lift on touch · no hover state */
    }
    .ar-icon { width: 26px; height: 26px; margin-bottom: 10px; }
    .ar-card-eyebrow {
      font-size: 8px;
      letter-spacing: 1.6px;
      margin-bottom: 6px;
    }
    .ar-card-title {
      font-size: 14.5px;
      line-height: 1.2;
      margin: 0 0 0;
    }
    /* Hide long description on mobile · the title + icon + arrow is
       enough wayfinding for a lobby section. */
    .ar-card-sub { display: none; }
    .ar-card-cta {
      font-size: 9px;
      letter-spacing: 1.2px;
      margin-top: 12px;
      gap: 4px;
      /* truncate long labels gracefully */
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  /* Very small phones (iPhone SE 1st gen, ~320px wide) · tighten further */
  @media (max-width: 360px) {
    .ar-card { padding: 14px 12px 12px; min-height: 128px; }
    .ar-card-title { font-size: 13.5px; }
  }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .ar-card, .ar-card-glow, .ar-arrow, .ar-card-cta {
      transition: none !important;
    }
    .ar-card:hover { transform: none !important; }
  }

/* ─── assets/css/physics-strip.css ─────────────────────────────────────── */
  .physics-strip {
    position: relative;
    padding: 80px 0;
    background:
      radial-gradient(ellipse 800px 380px at 50% 50%, rgba(244,196,64,0.10), transparent 70%),
      linear-gradient(180deg, #060D18 0%, #0A1422 100%);
    border-top: 1px solid rgba(244,196,64,0.22);
    border-bottom: 1px solid rgba(244,196,64,0.22);
    overflow: hidden;
  }
  .physics-strip::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 520px; height: 520px;
    background: repeating-radial-gradient(circle at center, rgba(244,196,64,0.05) 0 1px, transparent 1px 40px);
    pointer-events: none;
    opacity: 0.7;
  }
  .physics-strip .wrap { position: relative; z-index: 1; }
  .physics-strip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(244,196,64,0.06);
    border: 1px solid rgba(244,196,64,0.32);
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #F4D470;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .physics-strip-eyebrow .mark {
    display: inline-grid; place-items: center;
    width: 16px; height: 16px;
    background: #F4D470;
    color: #0F1B2D;
    border-radius: 50%;
    font-size: 10px; font-weight: 700;
  }
  .physics-strip h2 {
    color: #F1F5F9;
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 880px;
    margin: 0 0 22px;
  }
  .physics-strip h2 em {
    color: #F4D470;
    font-style: italic;
    font-weight: 700;
  }
  .physics-strip-sub {
    color: rgba(232,224,204,0.85);
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: 17px;
    line-height: 1.65;
    max-width: 720px;
    margin: 0 0 36px;
  }
  .physics-strip-sub strong { color: #F4D470; font-weight: 600; }

  /* 8 gate chips · pill row */
  .physics-strip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
  }
  .physics-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(13,24,39,0.65);
    border: 1px solid rgba(244,196,64,0.22);
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: rgba(232,224,204,0.85);
    letter-spacing: 0.04em;
    transition: border-color 0.18s, background 0.18s;
  }
  .physics-chip:hover {
    border-color: rgba(244,196,64,0.55);
    background: rgba(13,24,39,0.85);
  }
  .physics-chip-num {
    color: #F4D470;
    font-weight: 700;
  }

  .physics-strip-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: rgba(244,196,64,0.08);
    border: 1px solid rgba(244,196,64,0.55);
    border-radius: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F4D470;
    transition: background 0.18s, transform 0.18s;
  }
  .physics-strip-cta:hover {
    background: rgba(244,196,64,0.16);
    transform: translateY(-2px);
    text-decoration: none;
  }
  .physics-strip-cta:focus-visible {
    outline: 2px solid #F4D470;
    outline-offset: 3px;
  }
  .physics-strip-cta .arrow { font-size: 14px; transition: transform 0.18s; }
  .physics-strip-cta:hover .arrow { transform: translateX(4px); }

  @media (max-width: 640px) {
    .physics-strip { padding: 56px 0; }
    .physics-strip-chips { gap: 6px; }
    .physics-chip { padding: 7px 11px; font-size: 10px; }
  }

/* ─── assets/css/kommit-strip.css ─────────────────────────────────────── */
  .kommit-strip {
    position: relative;
    padding: 80px 0;
    background:
      radial-gradient(ellipse 800px 380px at 50% 50%, rgba(244,196,64,0.12), transparent 72%),
      linear-gradient(180deg, #0A1422 0%, #060D18 100%);
    border-bottom: 1px solid rgba(244,196,64,0.22);
    overflow: hidden;
  }
  .kommit-strip::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 520px; height: 520px;
    /* concentric adinkrahene-style rings instead of repeating circles */
    background:
      radial-gradient(circle, rgba(244,196,64,0.10) 0 1px, transparent 1px 28px),
      radial-gradient(circle at 50% 50%, rgba(244,196,64,0.06) 0 1px, transparent 1px 56px);
    pointer-events: none;
    opacity: 0.7;
  }
  .kommit-strip .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
  .kommit-strip-content { max-width: 700px; }
  .kommit-strip-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: rgba(244,196,64,0.06);
    border: 1px solid rgba(244,196,64,0.32);
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #F4D470;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .kommit-strip-eyebrow .mark {
    display: inline-grid; place-items: center;
    width: 16px; height: 16px;
    color: #F4D470;
    font-size: 11px;
  }
  .kommit-strip h2 {
    color: #F1F5F9;
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
  }
  .kommit-strip h2 em { color: #F4D470; font-style: italic; font-weight: 700; }
  .kommit-strip-sub {
    color: rgba(232,224,204,0.85);
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 28px;
  }
  .kommit-strip-sub strong { color: #F4D470; font-weight: 600; }

  /* 4-step protocol pills */
  .kommit-strip-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
  }
  .kommit-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(13,24,39,0.65);
    border: 1px solid rgba(244,196,64,0.22);
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: rgba(232,224,204,0.85);
    letter-spacing: 0.04em;
  }
  .kommit-step-num {
    color: #F4D470;
    font-weight: 700;
  }

  .kommit-strip-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px;
    background: rgba(244,196,64,0.08);
    border: 1px solid rgba(244,196,64,0.55);
    border-radius: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F4D470;
    transition: background 0.18s, transform 0.18s;
  }
  .kommit-strip-cta:hover {
    background: rgba(244,196,64,0.16);
    transform: translateY(-2px);
    text-decoration: none;
  }
  .kommit-strip-cta:focus-visible {
    outline: 2px solid #F4D470;
    outline-offset: 3px;
  }
  .kommit-strip-cta .arrow { transition: transform 0.18s; font-size: 14px; }
  .kommit-strip-cta:hover .arrow { transform: translateX(4px); }

  /* Right-side glyph stage · concentric pulse + center ◉ */
  .kommit-strip-glyph {
    position: relative;
    width: 220px; height: 220px;
    flex-shrink: 0;
    display: grid; place-items: center;
  }
  .kommit-strip-glyph::before,
  .kommit-strip-glyph::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(244,196,64,0.30);
    animation: kommitStripPulse 3.6s ease-out infinite;
  }
  .kommit-strip-glyph::after { animation-delay: 1.8s; }
  @keyframes kommitStripPulse {
    0%   { transform: scale(0.7); opacity: 0.85; }
    100% { transform: scale(1.25); opacity: 0; }
  }
  .kommit-strip-glyph-inner {
    position: relative;
    width: 132px; height: 132px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(244,196,64,0.20), rgba(244,196,64,0.04));
    border: 1.5px solid rgba(244,196,64,0.55);
    display: grid; place-items: center;
    box-shadow:
      0 0 36px rgba(244,196,64,0.30),
      inset 0 0 24px rgba(244,196,64,0.08);
    z-index: 2;
  }
  .kommit-strip-glyph-inner svg { width: 88px; height: 88px; }

  /* Two-IPs duality strip · runs as a banner above the body-light wrap */
  /* ═══ THE TWO COVENANTS · ceremonial duality block (AAA+ register, v2) ═══
     v2 deltas: atmospheric centre-glow staging, scan brackets, microetched
     provenance under ingot, hash text fragments around aperture, denser
     concentric rings, dashed scan beams, tighter proverb spacing. */
  .duality-section {
    position: relative;
    padding: 96px 0 110px;
    background:
      /* Centre stage glow — pulls eye to the medallion row */
      radial-gradient(ellipse 700px 480px at 50% 50%, rgba(244,221,141,0.10) 0%, rgba(244,221,141,0.02) 50%, transparent 80%),
      /* Top-edge atmospheric arc */
      radial-gradient(ellipse at 50% 0%, rgba(244,221,141,0.08) 0%, transparent 60%),
      /* Base void */
      linear-gradient(180deg, #060D18 0%, #03070D 50%, #060D18 100%);
    border-top: 1px solid rgba(244,221,141,0.18);
    border-bottom: 1px solid rgba(244,221,141,0.18);
    overflow: hidden;
    isolation: isolate;
  }

  /* ═══════════════════════════════════════════════════════════════
     TRIANGLE BINDING · v3 2026-05-22
     Visually bind MATTER, MIND, WITNESS, and SOV into a single
     ceremonial composition via gold thread connectors. The threads
     are SVG paths layered over the duality grid; each one fades from
     SOV out to its vertex.
     ═══════════════════════════════════════════════════════════════ */
  .duality-triangle-threads {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* v5 2026-05-22 · dropped to z-index 0 so text columns occlude the
       threads where they cross — clean institutional composition. */
    z-index: 0;
    overflow: visible;
    /* Fade the whole thread layer slightly so it reads as atmosphere */
    opacity: 0.72;
  }
  /* Text columns now sit above the threads */
  .duality-grid > .duality-side,
  .witness-row .duality-side {
    position: relative;
    z-index: 2;
  }
  .duality-triangle-threads path {
    fill: none;
    stroke: url(#triThreadGrad);
    stroke-width: 1px;
    stroke-linecap: round;
    opacity: 0.55;
    stroke-dasharray: 2 4;
    animation: triThreadDash 22s linear infinite;
  }
  @keyframes triThreadDash {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -36; }
  }

  /* The wrap that contains both duality-grid + witness-row needs
     position: relative so the threads anchor correctly */
  .duality-section .wrap {
    position: relative;
  }

  /* Add a vertical pulsing thread directly DOWN from SOV node to WITNESS */
  .duality-bind {
    position: relative;
  }
  .duality-bind::after {
    /* override is the existing horizontal thread to the right of SOV;
       we ADD a vertical thread below SOV for the triangle base */
  }
  /* Vertical thread DOWN from SOV-node into the witness · v4 2026-05-22
     — shortened to match the new tight-triangle layout. SOV and WITNESS
     are now ~100px apart vertically (was ~220px) so the thread is
     correspondingly shorter and tighter. */
  .witness-row::after {
    content: "";
    position: absolute;
    top: -36px;
    left: 50%;
    width: 1px;
    height: 40px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
      rgba(244,221,141,0.65) 0%,
      rgba(244,221,141,0.95) 50%,
      rgba(244,221,141,0.45) 100%);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(244,221,141,0.42);
    animation: triVerticalPulse 4.6s ease-in-out infinite;
  }
  @keyframes triVerticalPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1.0; }
  }

  /* The 3-covenant header label gets a triangle marker prefix —
     micro-triangle that mirrors the layout below */
  .duality-anchor::before {
    /* preserves existing if any */
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .duality-triangle-threads path { animation: none !important; }
    .witness-row::after { animation: none !important; }
  }
  /* Gold mote field scattered through void */
  .duality-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle, rgba(244,221,141,0.22) 0.8px, transparent 1.2px),
      radial-gradient(circle, rgba(214,179,85,0.16) 0.6px, transparent 0.9px),
      radial-gradient(circle, rgba(244,221,141,0.28) 0.5px, transparent 0.8px);
    background-size: 200px 200px, 240px 220px, 180px 260px;
    background-position: 32px 48px, 138px 92px, 78px 160px;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
  }
  /* Vignette darkening corners */
  .duality-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .duality-section .wrap { position: relative; z-index: 1; }

  .duality-mark {
    text-align: center;
    margin-bottom: 56px;
  }
  .duality-mark .seal {
    display: inline-block;
    width: 28px; height: 28px;
    margin-bottom: 12px;
    color: #D6B355;
    position: relative;
  }
  .duality-mark .seal::before,
  .duality-mark .seal::after,
  .duality-mark .seal > span {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1.4px solid currentColor;
  }
  .duality-mark .seal::before { width: 100%; height: 100%; }
  .duality-mark .seal::after { width: 60%; height: 60%; border-width: 1.1px; }
  .duality-mark .seal > span { width: 22%; height: 22%; background: currentColor; border: 0; }
  .duality-mark .royal-mark {
    display: block;
    font-family: Georgia, 'Iowan Old Style', serif;
    font-size: clamp(15px, 1.4vw, 22px);
    letter-spacing: 8px;
    font-weight: 500;
    color: #F4DD8D;
    margin-bottom: 6px;
  }
  .duality-mark .royal-rule {
    display: inline-block;
    width: 80px; height: 0.5px;
    background: rgba(214,179,85,0.6);
  }
  .duality-mark .sublabel {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    letter-spacing: 5px;
    color: rgba(148,163,184,0.7);
    text-transform: uppercase;
    margin-top: 14px;
  }

  .duality-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(20px, 4vw, 64px);
    max-width: 980px;
    margin: 0 auto;
  }
  .duality-grid > .duality-side {
    display: grid;
    place-items: center;
    text-align: center;
  }

  /* Mini-medallion treatment for the duality block (v2) */
  .mini-medallion {
    position: relative;
    width: clamp(200px, 22vw, 260px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin-bottom: 32px;
    /* Atmospheric inner backing for stage depth */
    background: radial-gradient(circle at 50% 38%,
      rgba(26, 42, 64, 0) 0%,
      rgba(6, 16, 31, 0.7) 100%);
  }
  /* Outermost ring */
  .mini-medallion::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(214,179,85,0.55);
  }
  /* Second ring, slightly inset */
  .mini-medallion::after {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    border: 0.5px solid rgba(214,179,85,0.4);
  }
  /* Two more inner rings via dedicated spans (v2 added depth) */
  .mini-medallion .ring-3 {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 0.5px solid rgba(115,94,42,0.65);
  }
  .mini-medallion .ring-4 {
    position: absolute;
    inset: 19%;
    border-radius: 50%;
    border: 0.4px solid rgba(115,94,42,0.45);
  }

  /* Cardinal tick marks (v2 — bigger, more confident) */
  .mini-medallion .tk {
    position: absolute;
    background: #F4DD8D;
    opacity: 0.9;
  }
  .mini-medallion .tk-t { top: 0; left: 50%; width: 1.5px; height: 13px; transform: translateX(-50%); }
  .mini-medallion .tk-b { bottom: 0; left: 50%; width: 1.5px; height: 13px; transform: translateX(-50%); }
  .mini-medallion .tk-l { left: 0; top: 50%; width: 13px; height: 1.5px; transform: translateY(-50%); }
  .mini-medallion .tk-r { right: 0; top: 50%; width: 13px; height: 1.5px; transform: translateY(-50%); }

  /* Scan brackets at 4 corners (v2 — ceremonial framing) */
  .mini-medallion .br {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1.3px solid #F4DD8D;
    opacity: 0.7;
  }
  .mini-medallion .br-tl { top: 14%;    left: 14%;    border-right: 0;  border-bottom: 0; }
  .mini-medallion .br-tr { top: 14%;    right: 14%;   border-left: 0;   border-bottom: 0; }
  .mini-medallion .br-bl { bottom: 14%; left: 14%;    border-right: 0;  border-top: 0; }
  .mini-medallion .br-br { bottom: 14%; right: 14%;   border-left: 0;   border-top: 0; }

  /* Dashed scan beams across the medallion (v2 — physics-gate signature) */
  .mini-medallion .scan {
    position: absolute;
    left: 22%;
    right: 22%;
    height: 1px;
    background-image: linear-gradient(90deg,
      rgba(214,179,85,0.6) 0px, rgba(214,179,85,0.6) 3px,
      transparent 3px, transparent 7px);
    background-size: 7px 1px;
    background-repeat: repeat-x;
    opacity: 0.5;
  }
  .mini-medallion .scan-t { top: 30%; }
  .mini-medallion .scan-b { bottom: 30%; }

  /* ════════════════════════════════════════════════════════════
     LIVE-IN-ACTION animations · 2026-05-10
     "We don't sell dead. We represent real-time-proof."
     ───────────────────────────────────────────────────────
     · Matter scan beam sweeps continuously · simulates XRF reading
     · Mind aperture eye pulses + ripple emanates · simulates commit landing
     · Hash text gently shifts opacity · suggests data flow
     · Pulsing LIVE indicators · the IPs are doing work right now
     All wrapped in @prefers-reduced-motion.
     ═══════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: no-preference) {
    /* Scan beams sweep across the Matter medallion · physics-gate signature */
    .mini-medallion .scan-t {
      animation: matterScanSweepT 3.2s ease-in-out infinite;
    }
    .mini-medallion .scan-b {
      animation: matterScanSweepB 3.2s ease-in-out infinite;
      animation-delay: 1.6s;
    }
    @keyframes matterScanSweepT {
      0%   { left: 22%; right: 22%; opacity: 0.2; }
      40%  { opacity: 0.85; }
      70%  { opacity: 0.85; }
      100% { left: 22%; right: 22%; opacity: 0.2;
             background-position-x: 100%; }
    }
    @keyframes matterScanSweepB {
      0%   { opacity: 0.2; }
      40%  { opacity: 0.85; }
      70%  { opacity: 0.85; }
      100% { opacity: 0.2;
             background-position-x: 100%; }
    }

    /* Ingot subtle shimmer · 7s cycle · suggests "metal under continuous read" */
    .mini-ingot {
      animation: ingotShimmer 7s ease-in-out infinite;
    }
    @keyframes ingotShimmer {
      0%, 100% { filter: brightness(1) saturate(1); }
      50%      { filter: brightness(1.06) saturate(1.08); }
    }

    /* Mind aperture eye pulses brighter/dimmer · suggests new commits landing */
    .mini-aperture > .eye {
      animation: mindEyePulse 2.8s ease-in-out infinite;
    }
    @keyframes mindEyePulse {
      0%, 100% {
        box-shadow: 0 0 18px rgba(244,221,141,0.55),
                    inset 0 0 4px rgba(255,250,216,0.7);
        transform: scale(1);
      }
      50% {
        box-shadow: 0 0 32px rgba(244,221,141,0.95),
                    0 0 12px rgba(255,250,216,1),
                    inset 0 0 6px rgba(255,255,255,0.95);
        transform: scale(1.08);
      }
    }

    /* Aperture rings ripple outward continuously · "the council reads, the council commits" */
    .mini-aperture > .ar-3,
    .mini-aperture > .ar-4,
    .mini-aperture > .ar-5 {
      animation: mindRingPulse 4.2s ease-in-out infinite;
    }
    .mini-aperture > .ar-4 { animation-delay: 0.6s; }
    .mini-aperture > .ar-5 { animation-delay: 1.2s; }
    @keyframes mindRingPulse {
      0%, 100% { opacity: 0.7; }
      50%      { opacity: 1; }
    }

    /* Hash text fragments occasionally shift opacity · suggests "new commit landed" */
    .mini-aperture .hash {
      animation: hashFlicker 5.6s ease-in-out infinite;
    }
    .mini-aperture .hash-tl { animation-delay: 0s; }
    .mini-aperture .hash-br { animation-delay: 1.4s; }
    .mini-aperture .hash-bl { animation-delay: 2.8s; }
    .mini-aperture .hash-tr { animation-delay: 4.2s; }
    @keyframes hashFlicker {
      0%, 12%, 100% { opacity: 0.7; }
      4%, 6%        { opacity: 1; }   /* "commit detected" */
      8%            { opacity: 0.45; } /* fade back */
    }

    /* SOV node halo breathes · the central anchor is alive */
    .duality-bind .sov-bind-node {
      animation: sovBindBreath 4s ease-in-out infinite;
    }
    @keyframes sovBindBreath {
      0%, 100% {
        box-shadow:
          0 0 0 6px rgba(244,221,141,0.06),
          0 0 0 12px rgba(244,221,141,0.03),
          0 6px 14px rgba(0,0,0,0.5),
          inset 0 1px 1px rgba(255,250,216,0.55),
          inset 0 -1px 2px rgba(63,46,16,0.5);
      }
      50% {
        box-shadow:
          0 0 0 8px rgba(244,221,141,0.10),
          0 0 0 16px rgba(244,221,141,0.05),
          0 0 28px rgba(244,221,141,0.18),
          0 6px 14px rgba(0,0,0,0.5),
          inset 0 1px 1px rgba(255,250,216,0.55),
          inset 0 -1px 2px rgba(63,46,16,0.5);
      }
    }
  }

  /* LIVE indicator beneath each medallion · pulsing green dot + label
     "the work is happening NOW" — matches the Anokye throne treatment */
  .duality-side .side-live {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(31, 224, 127, 0.06);
    border: 1px solid rgba(31, 224, 127, 0.32);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    color: rgba(31, 224, 127, 0.88);
    text-transform: uppercase;
    font-weight: 500;
  }
  .duality-side .side-live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #1FE07F;
    box-shadow: 0 0 6px rgba(31,224,127,0.7);
    flex-shrink: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .duality-side .side-live::before {
      animation: liveDotPulse 1.8s ease-in-out infinite;
    }
    @keyframes liveDotPulse {
      0%, 100% {
        box-shadow: 0 0 4px rgba(31,224,127,0.5),
                    0 0 0 0 rgba(31,224,127,0.4);
      }
      50% {
        box-shadow: 0 0 12px rgba(31,224,127,1),
                    0 0 0 6px rgba(31,224,127,0);
      }
    }
  }

  /* Matter medallion — gold ingot inside (v2) */
  .mini-ingot {
    position: relative;
    width: 72%;
    aspect-ratio: 2.2 / 1;
    background: linear-gradient(180deg,
      #FFEFA8 0%, #F4DD8D 14%, #D6B355 42%, #8C6E2C 78%, #3F2E10 100%);
    border: 1.4px solid #3F2E10;
    border-radius: 5px;
    box-shadow:
      0 1px 0 rgba(255, 250, 216, 0.5) inset,
      0 -2px 4px rgba(63, 46, 16, 0.55) inset,
      0 8px 18px rgba(0, 0, 0, 0.6);
    transform: rotate(-7deg);
    display: grid;
    place-items: center;
    z-index: 2;
  }
  .mini-ingot::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 28%;
    background: linear-gradient(180deg, rgba(255,250,216,0.6) 0%, rgba(255,250,216,0) 100%);
    border-radius: 5px 5px 0 0;
    pointer-events: none;
  }
  /* Bottom hairline shadow */
  .mini-ingot::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(180deg, transparent 0%, rgba(63,46,16,0.65) 100%);
    border-radius: 0 0 5px 5px;
    pointer-events: none;
  }
  .mini-ingot .ingot-seal {
    width: 34%;
    height: 56%;
    color: rgba(63,46,16,0.55);
    position: relative;
    margin-top: -8%;
  }
  .mini-ingot .ingot-seal::before,
  .mini-ingot .ingot-seal::after,
  .mini-ingot .ingot-seal > span {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1.3px solid currentColor;
  }
  .mini-ingot .ingot-seal::before { width: 100%;   height: 100%; }
  .mini-ingot .ingot-seal::after  { width: 65%;    height: 65%;  border-width: 1.1px; }
  .mini-ingot .ingot-seal > span  { width: 25%;    height: 25%;  background: currentColor; border: 0; }
  /* Microetched provenance under the seal */
  .mini-ingot .ingot-prov {
    position: absolute;
    bottom: 16%;
    left: 0; right: 0;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 7px;
    letter-spacing: 0.5px;
    color: rgba(63,46,16,0.85);
    pointer-events: none;
  }
  @media (min-width: 1100px) {
    .mini-ingot .ingot-prov { font-size: 7.5px; }
  }

  /* Mind medallion — Kommit aperture inside (v2) */
  .mini-aperture {
    position: relative;
    width: 82%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    z-index: 2;
  }
  .mini-aperture > .ar {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #D6B355;
  }
  .mini-aperture > .ar-1 { inset: 0;     opacity: 0.5; }
  .mini-aperture > .ar-2 { inset: 11%;   opacity: 0.65; border-width: 1px; }
  .mini-aperture > .ar-3 { inset: 22%;   opacity: 0.8;  border-width: 1.2px; border-color: #F4DD8D; }
  .mini-aperture > .ar-4 { inset: 33%;   opacity: 0.95; border-width: 1.4px; border-color: #F4DD8D; }
  .mini-aperture > .ar-5 { inset: 42%;   opacity: 1;    border-width: 1.6px; border-color: #FFEFA8; }
  /* Hash-mesh inner core */
  .mini-aperture > .core {
    position: absolute;
    inset: 46%;
    border-radius: 50%;
    background:
      repeating-linear-gradient(45deg,
        transparent 0px, transparent 4px,
        rgba(214,179,85,0.45) 4px, rgba(214,179,85,0.45) 4.5px),
      repeating-linear-gradient(-45deg,
        transparent 0px, transparent 4px,
        rgba(214,179,85,0.45) 4px, rgba(214,179,85,0.45) 4.5px);
    border: 0.8px solid rgba(214,179,85,0.7);
  }
  /* Cryptographic vector lines emanating outward */
  .mini-aperture > .vec {
    position: absolute;
    background: #F4DD8D;
    opacity: 0.55;
    height: 0.7px;
    width: 7px;
    transform-origin: left center;
  }
  .mini-aperture > .vec-r  { top: 50%; left: 56%; transform: translateY(-50%); }
  .mini-aperture > .vec-l  { top: 50%; right: 56%; transform: translateY(-50%) rotate(180deg); }
  .mini-aperture > .vec-t  { top: 44%; left: 50%; transform: translate(-50%,-100%) rotate(-90deg); width: 7px; }
  .mini-aperture > .vec-b  { top: 56%; left: 50%; transform: translate(-50%,0) rotate(90deg); width: 7px; }
  .mini-aperture > .vec-tr { top: 38%; left: 56%; transform: rotate(-45deg); }
  .mini-aperture > .vec-tl { top: 38%; right: 56%; transform: rotate(225deg); }
  .mini-aperture > .vec-br { top: 62%; left: 56%; transform: rotate(45deg); }
  .mini-aperture > .vec-bl { top: 62%; right: 56%; transform: rotate(135deg); }
  /* Center aperture eye — dramatic, glowing */
  .mini-aperture > .eye {
    position: relative;
    width: 14%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #FFEFA8 0%, #F4DD8D 35%, #9C7A2E 100%);
    border: 1.4px solid #F4DD8D;
    box-shadow:
      0 0 22px rgba(244,221,141,0.7),
      0 0 8px rgba(244,221,141,0.95),
      inset 0 0 6px rgba(255,250,216,0.85);
    z-index: 3;
  }
  .mini-aperture > .eye::after {
    content: "";
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: #FFEFA8;
    box-shadow: 0 0 4px rgba(255,255,255,0.95);
  }
  /* Hash text fragments orbiting (cryptographic atmosphere) */
  .mini-aperture .hash {
    position: absolute;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: 0.4px;
    color: rgba(214,179,85,0.8);
    pointer-events: none;
    z-index: 1;
  }
  .mini-aperture .hash-tl { top: -2%;  left: -8%;  }
  .mini-aperture .hash-br { bottom: -2%; right: -8%; }
  .mini-aperture .hash-bl { bottom: 14%; left: -16%;  font-size: 7px; opacity: 0.7; }
  .mini-aperture .hash-tr { top: 14%; right: -16%;    font-size: 7px; opacity: 0.7; }

  /* SOV node central bind */
  .duality-bind {
    display: grid;
    place-items: center;
    position: relative;
  }
  .duality-bind::before,
  .duality-bind::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1.4px;
    background: linear-gradient(90deg, transparent 0%, #F4DD8D 50%, transparent 100%);
    width: clamp(20px, 4vw, 64px);
  }
  .duality-bind::before { right: 100%; }
  .duality-bind::after  { left: 100%; }
  .duality-bind .sov-bind-node {
    position: relative;
    /* v6 2026-05-22 · made SOV the COMMANDING CENTERPIECE of the trinity.
       Was 76px (too small to read as the central binding). Now 132px —
       larger than any individual covenant element, expressing
       MATTER + MIND = SOV "WITNESS" with SOV as the focal heart. */
    width: 132px; height: 132px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%,
      #FFEFA8 0%, #F4DD8D 18%, #D6B355 42%, #9C7A2E 72%, #3F2E10 100%);
    border: 3px solid #F4DD8D;
    box-shadow:
      0 0 0 6px rgba(244,221,141,0.06),
      0 0 0 12px rgba(244,221,141,0.03),
      0 6px 14px rgba(0,0,0,0.5),
      inset 0 1px 1px rgba(255,250,216,0.55),
      inset 0 -1px 2px rgba(63,46,16,0.5);
    display: grid;
    place-items: center;
  }
  .duality-bind .sov-bind-node::before {
    content: "";
    position: absolute;
    top: 12%; left: 18%; right: 18%;
    height: 30%;
    border-radius: 50% 50% 0 0;
    border-top: 1.3px solid #FFEFA8;
    opacity: 0.85;
  }
  .duality-bind .sov-bind-node::after {
    content: "SOV";
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 700;
    /* v6 2026-05-22 · scaled up with the node (16 → 28px) */
    font-size: 28px;
    letter-spacing: 2.4px;
    color: #3F2E10;
    text-shadow: 0 1px 0 rgba(255,250,216,0.4);
  }

  /* Side labels under medallions (v2 — bigger, more confident) */
  .duality-side .side-label {
    font-family: Georgia, 'Iowan Old Style', serif;
    font-size: clamp(22px, 2.4vw, 32px);
    letter-spacing: 8px;
    font-weight: 600;
    color: #FFEFA8;
    margin-bottom: 10px;
  }
  .duality-side .side-tag {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    color: rgba(148,163,184,0.9);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 500;
  }
  .duality-side .side-essence {
    font-family: Georgia, serif;
    font-size: 13.5px;
    font-style: italic;
    color: rgba(148,163,184,0.75);
  }

  /* Twi proverb anchor (v2 — tighter rules, larger proverb) */
  .duality-anchor {
    margin-top: 72px;
    text-align: center;
    position: relative;
    padding: 0 16px;
  }
  .duality-anchor::before,
  .duality-anchor::after {
    content: "";
    display: block;
    width: 78%;
    max-width: 580px;
    height: 0.5px;
    margin: 0 auto;
    background: linear-gradient(90deg,
      transparent 0%, rgba(214,179,85,0.5) 25%, rgba(244,221,141,1) 50%,
      rgba(214,179,85,0.5) 75%, transparent 100%);
  }
  .duality-anchor::before { margin-bottom: 24px; }
  .duality-anchor::after  { margin-top: 18px; }
  .duality-anchor .proverb {
    font-family: Georgia, 'Iowan Old Style', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(30px, 4vw, 50px);
    letter-spacing: 0.5px;
    line-height: 1.12;
    color: #FFEFA8;
    margin: 0 auto 14px;
    position: relative;
  }
  /* Hand-drawn underline accent under the proverb */
  .duality-anchor .proverb::after {
    content: "";
    display: block;
    width: 50%;
    max-width: 360px;
    height: 1.4px;
    margin: 18px auto 0;
    background: linear-gradient(90deg,
      transparent 0%, rgba(244,221,141,0.85) 25%, #F4DD8D 50%,
      rgba(244,221,141,0.85) 75%, transparent 100%);
    border-radius: 2px;
    opacity: 0.85;
  }
  .duality-anchor .translation {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: 7px;
    font-weight: 300;
    color: rgba(148,163,184,0.9);
    text-transform: uppercase;
    margin-top: 22px;
  }
  .duality-anchor .thesis {
    margin-top: 28px;
    font-family: Georgia, serif;
    font-size: clamp(15px, 1.4vw, 19px);
    font-style: italic;
    font-weight: 500;
    color: #F4DD8D;
    letter-spacing: 0.5px;
    line-height: 1.45;
  }

  /* TRINITY MARK · 2026-05-28 · canonical compact strip mirroring the
     leverage-live chamber's trinity-anchor. Three adinkrahene-sealed
     pillars + Akan proverbs + IP names + contracts named. Ledger coda. */
  .trinity-mark {
    margin: 36px auto 8px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    max-width: 620px;
    padding: 14px 8px 4px;
    position: relative;
  }
  .trinity-mark::before,
  .trinity-mark::after {
    content: "";
    position: absolute;
    top: 12%; height: 76%; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(244,221,141,.42), transparent);
    pointer-events: none;
  }
  .trinity-mark::before { left: 33.33%; }
  .trinity-mark::after  { left: 66.66%; }
  .trinity-mark > .tm-pillar:nth-child(1)::after,
  .trinity-mark > .tm-pillar:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 50%; right: -2.5px;
    width: 4px; height: 4px;
    background: #F4DD8D;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(244,221,141,.7);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .tm-pillar {
    text-align: center;
    padding: 4px 8px;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, opacity .25s ease;
    opacity: .92;
    border-radius: 6px;
  }
  .tm-pillar:hover,
  .tm-pillar:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    outline: none;
  }
  .tm-seal {
    width: 16px; height: 16px;
    margin: 0 auto 7px;
    display: block;
    color: #F4DD8D;
    filter: drop-shadow(0 0 4px rgba(244,221,141,.55));
  }
  .tm-proverb {
    font-family: Georgia, 'Iowan Old Style', serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: .2px;
    background: linear-gradient(180deg, #FFEFA8 0%, #F4DD8D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.25;
  }
  .tm-trans {
    font-family: Georgia, 'Iowan Old Style', serif;
    font-style: italic;
    font-size: 11px;
    color: rgba(244,221,141,.6);
    margin-top: 3px;
    line-height: 1.3;
  }
  .tm-name {
    font-family: 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 3.2px;
    color: #F4DD8D;
    text-transform: uppercase;
    margin-top: 10px;
  }
  .tm-contract {
    font-family: 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 8.5px;
    letter-spacing: 1.6px;
    color: rgba(214,179,85,.7);
    text-transform: uppercase;
    margin-top: 3px;
  }
  @media (max-width: 720px) {
    .trinity-mark {
      grid-template-columns: 1fr;
      gap: 16px;
      max-width: 340px;
      margin-top: 28px;
    }
    .trinity-mark::before,
    .trinity-mark::after { display: none; }
    .tm-pillar + .tm-pillar {
      border-top: 1px solid rgba(244,221,141,.18);
      padding-top: 16px;
    }
  }

  /* Mobile · stack the medallions */
  @media (max-width: 720px) {
    .duality-grid {
      grid-template-columns: 1fr;
      gap: 32px;
      justify-items: center;
    }
    .duality-grid .duality-bind { order: 2; }
    .duality-grid .duality-side:first-child { order: 1; }
    .duality-grid .duality-side:last-child  { order: 3; }
    .duality-bind::before, .duality-bind::after { display: none; }
    .duality-section { padding: 56px 0 64px; }
    .duality-mark { margin-bottom: 36px; }
  }

  /* ═══════════════════════════════════════════════════════════
     WITNESS · the third covenant · Mate Masie / MasieBridge v1.0.
     LIVE on Polygon Mainnet at 0x358c50C1DAe9AD41D0070a3767221F3c191b22F6
     (deployed 2026-05-16 block 86969835, Polygonscan source-verified,
     admin-migrated to Safe in-broadcast). Sits below the Matter/Mind
     duality-grid as the third leg of the trinity. Same mini-medallion
     chassis as Matter+Mind for visual consistency. The .side-pending
     class is retained as dead code for any future pre-deploy IP rows
     but is no longer rendered for Mate Masie.
     ═══════════════════════════════════════════════════════ */
  .witness-row {
    /* Triangulated v5 2026-05-22 · margin-top dialed back from -260 to
       -120, so WITNESS sits BELOW the SOV node (which now sits 120px
       below the top row at the triangle centroid), not overlapping it.
       The three medallions form a tight triangle with SOV at the
       geometric center and WITNESS at the bottom vertex. */
    margin-top: -120px;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    z-index: 3;
  }
  /* On smaller screens (where columns collapse) we need the gap back */
  @media (max-width: 768px) {
    .witness-row { margin-top: 32px; }
  }
  /* Hairline gold rule above the witness row · re-purposed as the
     bottom apex of the triangle binding (used to be a horizontal
     separator; now redundant with the new thread system). */
  .witness-row::before {
    content: "";
    display: block;
    width: 0;
    max-width: 0;
    height: 0;
    margin: 0;
    background: transparent;
  }
  .witness-row .duality-side {
    display: grid;
    place-items: center;
    text-align: center;
  }
  /* Mate Masie knot inside the mini-medallion · two interlocked arcs */
  .mini-masie {
    position: relative;
    width: 60%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    z-index: 2;
  }
  .mini-masie svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(244,221,141,0.35));
  }
  .mini-masie .masie-pulse {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    border: 1px solid rgba(244,221,141,0.4);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .mini-masie svg {
      animation: masieBreath 6s ease-in-out infinite;
      transform-origin: center;
    }
    .mini-masie .masie-pulse {
      animation: masieRipple 4.6s ease-in-out infinite;
    }
    @keyframes masieBreath {
      0%, 100% { opacity: 0.92; transform: scale(1); }
      50%      { opacity: 1;    transform: scale(1.04); }
    }
    @keyframes masieRipple {
      0%   { transform: scale(1);    opacity: 0.65; }
      100% { transform: scale(2.4);  opacity: 0; }
    }
  }
  /* The "pending" status pill — honest, amber-tuned */
  .side-pending {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #F4DD8D;
    border: 1px solid rgba(244,221,141,0.5);
    border-radius: 999px;
    background: rgba(244,221,141,0.06);
    font-weight: 500;
  }
  .side-pending::before {
    content: "◉";
    margin-right: 8px;
    color: #DAA520;
    opacity: 0.9;
  }
  /* The "live" pill (re-style for parity with pending) */
  .duality-side .side-live {
    margin-top: 14px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(134,239,172,0.45);
    background: rgba(34,197,94,0.06);
    color: #86EFAC;
  }
  .duality-side .side-live::before {
    background: #86EFAC;
  }
  /* Microetched address line under the live pills */
  .duality-side .side-addr {
    display: block;
    margin-top: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    color: rgba(214,179,85,0.88);
    word-break: break-all;
    cursor: pointer;
    transition: color 0.18s;
  }
  .duality-side .side-addr:hover { color: rgba(255,240,168,0.95); }
  .duality-side .side-addr a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(214,179,85,0.45);
    transition: border-color 0.18s;
  }
  .duality-side .side-addr a:hover { border-bottom-color: rgba(255,240,168,0.7); }
  /* Twi epigraph under each panel */
  .duality-side .side-twi {
    margin-top: 12px;
    font-family: Georgia, 'Iowan Old Style', serif;
    font-style: italic;
    font-size: 13px;
    color: rgba(244,221,141,0.85);
  }
  .duality-side .side-twi-gloss {
    display: block;
    margin-top: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(148,163,184,0.65);
    text-transform: uppercase;
    font-style: normal;
  }
  /* Witness panel is single-column · narrower than the duality-grid */
  .witness-row .duality-side {
    max-width: 520px;
  }
  @media (max-width: 720px) {
    .witness-row { margin-top: 40px; }
  }

  /* ═══════════════════════════════════════════════════════════
     TRINITY EPIGRAPH · the canonical VPAY statement.
     Sika di adanseɛ · Adwene di adanseɛ · Adanseni di adanseɛ.
     ═══════════════════════════════════════════════════════ */
  .trinity-epigraph {
    margin: 0 auto;
    padding: 64px 24px 72px;
    max-width: 900px;
    text-align: center;
    position: relative;
  }
  .trinity-epigraph::before,
  .trinity-epigraph::after {
    content: "";
    display: block;
    width: 56%;
    max-width: 480px;
    height: 0.5px;
    margin: 0 auto;
    background: linear-gradient(90deg,
      transparent 0%, rgba(214,179,85,0.5) 25%,
      rgba(244,221,141,0.95) 50%,
      rgba(214,179,85,0.5) 75%, transparent 100%);
  }
  .trinity-epigraph::before { margin-bottom: 32px; }
  .trinity-epigraph::after  { margin-top: 24px; }
  .trinity-twi {
    font-family: Georgia, 'Iowan Old Style', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: 0.4px;
    line-height: 1.3;
    color: #FFEFA8;
    margin: 0 0 18px;
  }
  .trinity-gloss {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(148,163,184,0.85);
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
  }

  @media (max-width: 1024px) {
    .kommit-strip .wrap { grid-template-columns: 1fr; gap: 36px; }
    .kommit-strip-glyph { margin: 0 auto; }
  }
  @media (max-width: 640px) {
    .kommit-strip { padding: 56px 0; }
    .kommit-strip-glyph { width: 180px; height: 180px; }
    .kommit-strip-glyph-inner { width: 110px; height: 110px; }
    .kommit-strip-glyph-inner svg { width: 72px; height: 72px; }
    .kommit-strip-steps { gap: 6px; }
    .kommit-step { padding: 7px 11px; font-size: 10px; }
  }

  /* ƐDƆN · 2026-05-13 · bells policy per CLAUDE.md ·
     Sika Dwa Kofi historically wore bells — the stool's voice, the
     original alert for council convening, royal declaration,
     verification. Visual-only on marketing pages (no audio module).
     Applies to both the story-throne (mobile Panel 4) and the deluxe
     heritage throne lower on the page. */
  .throne-bell{
    transform-box: fill-box;
    transform-origin: 50% 0%;
    transition: filter .3s ease;
  }
  @media (prefers-reduced-motion: no-preference){
    .throne-bell.bell-ring{
      animation: bellSwing .68s cubic-bezier(.36,.07,.19,.97);
      filter: drop-shadow(0 0 5px rgba(255,239,168,.7));
    }
    @keyframes bellSwing{
      0%   { transform: rotate(0deg); }
      18%  { transform: rotate(-18deg); }
      42%  { transform: rotate(13deg); }
      66%  { transform: rotate(-8deg); }
      85%  { transform: rotate(4deg); }
      100% { transform: rotate(0deg); }
    }
  }
  @media (prefers-reduced-motion: reduce){
    .throne-bell.bell-ring{ filter: drop-shadow(0 0 4px rgba(255,239,168,.5)); }
  }

/* ─── assets/css/covenant-cards.css ─────────────────────────────────────── */
  /* Three Covenants — clickable panel affordance */
  .duality-grid > .duality-side,
  .witness-row > .duality-side {
    cursor: pointer;
    transition: box-shadow 0.22s, transform 0.22s;
    border-radius: 12px;
  }
  .duality-grid > .duality-side:hover,
  .witness-row > .duality-side:hover {
    box-shadow: 0 0 0 2px rgba(200,168,78,0.55), 0 8px 32px rgba(200,168,78,0.18);
    transform: translateY(-3px);
  }
  .duality-grid > .duality-side:focus-visible,
  .witness-row > .duality-side:focus-visible {
    outline: 2px solid rgba(200,168,78,0.8);
    outline-offset: 4px;
  }
  /* Hint label that appears on hover */
  .duality-side[data-covenant-href]::after {
    content: attr(data-covenant-hint) " →";
    display: block;
    margin-top: 10px;
    font-family: var(--ff-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(200,168,78,0.6);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .duality-side[data-covenant-href]:hover::after { opacity: 1; }

/* ─── assets/css/mobile-sticky-cta.css ─────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   Mobile sticky waitlist CTA · CSP-safe external styling
   Originally lived in an inline style="..." attribute which strict
   CSP stripped silently, leaving the pill as bare gold text on a
   black band with no button affordance. All visual styling now
   lives here so it survives production CSP.    2026-05-26
   ═══════════════════════════════════════════════════════════════ */

#mobileStickyCta {
  /* Hidden by default · revealed by .show class via JS */
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);

  /* Gold pill */
  background: linear-gradient(135deg, #F4D470 0%, #C8A84E 100%);
  color: #0F1B2D;
  text-decoration: none;
  text-align: center;
  padding: 14px 18px;
  border-radius: 99px;

  /* Type · institutional register */
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  /* Depth · clearly tappable */
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(244, 212, 112, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);

  /* Tap target safety · iOS Safari */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* Hidden state · slid down + faded */
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity .3s cubic-bezier(.2, .8, .2, 1),
    transform .3s cubic-bezier(.2, .8, .2, 1);
  z-index: 9999;
}

#mobileStickyCta .cta-arrow {
  display: inline-block;
  font-size: 14px;
  margin-left: 2px;
  opacity: .85;
  transform: translateY(-1px);
}

#mobileStickyCta .cta-count {
  opacity: .68;
  font-weight: 500;
  margin: 0 6px 0 8px;
  letter-spacing: 0.10em;
}

#mobileStickyCta:active {
  transform: translateY(0) scale(.985);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.30),
    0 0 12px rgba(244, 212, 112, 0.20);
}

@media (max-width: 820px) {
  #mobileStickyCta { display: block; }
  #mobileStickyCta.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #mobileStickyCta {
    transition: opacity .15s linear;
    transform: none !important;
  }
}