@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Manrope:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ── Core tokens ────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:      #08091C;
  --bg-alt:  #0B0D24;
  --surface: #0F1230;
  --surf-2:  #141738;

  /* Borders */
  --border:  rgba(255,255,255,.07);
  --border-2: rgba(255,255,255,.13);
  --border-3: rgba(255,255,255,.22);

  /* Text */
  --text:   #F0F4FF;
  --text-2: #AAB8D0;
  --text-3: #6E82A0;
  --text-4: #4A5E78;

  /* Brand */
  --teal:   #3ECFC0;
  --teal-2: #2EB8A8;
  --violet: #8B6FF5;
  --zira-ice: #E8FCF7;
  /* Lockup word + hero H1: same saturated path as zira-lockup.svg (zl-word); hero can animate --zira-gradient-hero */
  --zira-gradient: linear-gradient(110deg, var(--teal) 0%, #4abed4 34%, #6b8ce8 68%, var(--violet) 100%);
  --zira-gradient-hero-anim: linear-gradient(
    100deg,
    #3ecfc0 0%,
    #4abed4 22%,
    #6b8ce8 48%,
    #8b6ff5 72%,
    #3ecfc0 100%
  );
  --zira-gradient-soft: linear-gradient(
    100deg,
    rgba(62, 207, 192, 0.85) 0%,
    rgba(74, 190, 212, 0.55) 40%,
    rgba(120, 142, 232, 0.5) 72%,
    rgba(139, 111, 245, 0.5) 100%
  );
  /* Home hero glass: matches lockup (teal / periwinkle / violet), keep panels light */
  --hero-glass-fill: linear-gradient(
    178deg,
    rgba(4, 10, 28, 0.12) 0%,
    rgba(3, 6, 20, 0.18) 100%
  );
  --hero-glass-edge: rgba(62, 207, 192, 0.11);
  --hero-glass-edge-v: rgba(107, 140, 232, 0.08);
  --gold:   #D4A820;
  --blue:   #4D94F7;
  --green:  #18C080;

  /* Fonts */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Easing */
  --ease: cubic-bezier(.25,1,.3,1);

  /* Layout */
  --nav-h: 72px;
  --mw: 1080px;
  --mw-md: 920px;
  --mw-sm: 620px;
  --mw-text: 680px;
  --teal-d: #2CB8A8;
  --orange: #F08030;
  --rose: #F04060;
  --ease-out: cubic-bezier(0,0,.3,1);
  --surf-3: #181A40;

  /* Radii (legacy sections still reference these) */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-full: 9999px;

  /* Shared surface helpers (use sparingly) */
  --card-bg: rgba(7,9,16,.24);
  --card-bg-2: rgba(13, 16, 40, 0.55);
  --card-border: rgba(255,255,255,.10);
  --card-border-soft: rgba(255,255,255,.08);
  --card-shadow: 0 18px 48px rgba(0,0,0,.22);
  --card-inset: 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* Shared utility: aligned green highlight */
.num-green {
  color: var(--green) !important;
  text-shadow: 0 0 22px rgba(24,192,128,.12);
}

/* ── Canvas rules ───────────────────────────────────────── */
/* NEVER add mix-blend-mode to any canvas element */
/* NEVER add filter to any canvas element */
/* Canvas opacity must always be 1 */
/* hero-inner z-index: 4 minimum */
/* canvas z-index: 2 */
/* Node core alpha: 0.65 to 0.92 */
/* Node halo alpha: 0.12 to 0.20 */
/* Same-basin edges: 0.20 to 0.32 */
/* Cross-basin edges: 0.08 to 0.15 */

/* ----------------------------------------------------------------
   Reset
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  overflow-x: hidden;
}
html, body {
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto !important;
  position: relative;
  isolation: isolate;
}

/* Safety: never allow global scroll lock */
body[style*="overflow: hidden"],
html[style*="overflow: hidden"] {
  overflow: auto !important;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 60% at 50% 0%, rgba(62,207,192,.10), transparent 58%),
    radial-gradient(ellipse 70% 55% at 100% 10%, rgba(139,111,245,.10), transparent 52%),
    radial-gradient(ellipse 60% 55% at 0% 30%, rgba(77,148,247,.08), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #040515 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ================================================================
   vNext rebuild: shared nav + index sections
   ================================================================ */

.wrap {
  max-width: var(--mw);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);
}
.wrap-text {
  max-width: var(--mw-text);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);
}

/* Canvas rules: enforce globally */
canvas {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ── Navigation ─────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(14px, 4vw, 28px);
  background: rgba(5,6,18,.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
/* .nav-logo img: see "Navigation: logo" block below for size */
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color .15s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 8px;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-2);
  border-radius: 2px;
  transition: all .22s var(--ease);
}
.nav-hamburger:hover span { background: var(--text); }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drawer (delegated to later nav-drawer block) */

@media (max-width: 720px) {
  .nav-links  { display: none; }
  .nav-hamburger { display: flex; }
  .site-nav {
    padding: env(safe-area-inset-top) clamp(10px, 3vw, 20px) 0;
    height: calc(var(--nav-h) + env(safe-area-inset-top));
  }
  .nav-logo { min-width: 0; }
  .nav-actions {
    gap: clamp(6px, 2vw, 10px);
    flex-shrink: 0;
    min-width: 0;
  }
  .nav-field-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: max-content;
    position: relative;
    padding: 3px 8px 3px 5px;
    border-radius: 999px;
    background: rgba(6, 10, 24, 0.72);
    border: 1px solid rgba(62, 207, 192, 0.22);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  }
  .nav-field-pulse .fp-label,
  .nav-field-pulse .fp-sep {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .nav-field-pulse .fp-text {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .nav-field-pulse .fp-total {
    font-size: 10px;
  }
  .nav-field-pulse .js-nav-formed {
    font-size: 11px;
  }
  .nav-field-pulse .fp-dot {
    width: 5px;
    height: 5px;
  }
}

/* Mobile nav tap targets + drawer link styling */
@media (max-width: 720px) {
  .nav-hamburger { width: 44px; height: 44px; }
  .btn-cta-sm { min-height: 44px; }

  .nav-drawer {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-drawer > a {
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.25;
    min-height: 44px;
  }
  .nav-drawer > a:hover { background: rgba(255,255,255,.04); color: var(--text); }
  .nav-drawer > a.active { background: var(--surface); color: var(--text); }
  .nav-drawer > a:focus-visible { outline: 2px solid rgba(62,207,192,.45); outline-offset: 2px; }

  .nav-drawer-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
}
@media (min-width: 721px) {
  .nav-drawer { display: none !important; }
}

/* Legacy selector (kept for older markup; unified below) */
.btn-nav-cta { all: unset; }
.field-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .06em;
}
.field-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
  animation: field-breathe 4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes field-breathe {
  0%,100% { opacity: .35; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.5); }
}
@media (max-width: 720px) { .field-status { display: none; } }

/* Buttons */
.btn-primary, .btn-ghost, .btn-cta-sm, .btn-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  transform: translateZ(0);
}
.btn-primary {
  color: rgba(5, 6, 20, 0.96);
  border: 1px solid rgba(62, 207, 192, 0.28);
  background: var(--zira-gradient);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 10px 30px rgba(62, 207, 192, 0.08),
    0 10px 30px rgba(107, 140, 232, 0.05);
}
.btn-ghost {
  background: rgba(6, 10, 32, 0.22);
  color: rgba(230, 238, 255, 0.92);
  border: 1px solid rgba(90, 150, 200, 0.16);
  box-shadow:
    0 0 0 1px rgba(62, 207, 192, 0.06) inset,
    0 8px 22px rgba(2, 4, 12, 0.14);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}
.btn-primary:hover {
  filter: brightness(1.02) saturate(1.03);
  transform: translateY(-1px);
}
.btn-ghost:hover {
  border-color: rgba(74, 190, 212, 0.24);
  color: rgba(240, 246, 255, 0.95);
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-ghost:active {
  transform: translateY(0);
}
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(62, 207, 192, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* Small CTA (nav + hero) */
.btn-cta-sm,
.btn-nav-cta {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(6, 10, 32, 0.18);
  border: 1px solid rgba(62, 207, 192, 0.2);
  color: rgba(232, 238, 252, 0.92);
  box-shadow: 0 0 0 1px rgba(107, 140, 232, 0.06) inset;
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}
.btn-cta-sm:hover,
.btn-nav-cta:hover {
  border-color: rgba(74, 190, 212, 0.28);
  background: rgba(6, 10, 32, 0.26);
  transform: translateY(-1px);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: #03040d;
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: 88px;
}
/* Radial ambient light at top-center (sunrise effect) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 48% at 50% -4%, rgba(62,207,192,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 82% 8%, rgba(77,148,247,.07) 0%, transparent 52%),
    radial-gradient(ellipse 50% 38% at 18% 14%, rgba(139,111,245,.05) 0%, transparent 50%),
    linear-gradient(180deg, #04050f 0%, #03040b 100%);
}
/* Subtle top horizon glow line */
.hero::after {
  content: '';
  position: absolute;
  top: var(--nav-h);
  left: 0; right: 0;
  height: 1px;
  z-index: 5;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(62,207,192,.18) 30%,
    rgba(62,207,192,.28) 50%,
    rgba(62,207,192,.18) 70%,
    transparent 100%
  );
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 4;
  max-width: var(--mw);
  margin: 0 auto;
  padding-left: clamp(18px, 4vw, 32px);
  padding-right: clamp(18px, 4vw, 32px);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(12,14,36,.64);
  border: 1px solid rgba(255,255,255,.10);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--text-3);
}
.hero-title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 6.6vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.hero-title-brand {
  display: inline-block;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  text-shadow: 0 0 0 rgba(0,0,0,0);
}
.hero-lead {
  max-width: 60ch;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-2);
}
.hero-sub {
  max-width: 70ch;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-3);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.hero-title-block {
  margin: 8px 0 0;
  padding: 0;
}
.hero-zira-word {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(80px, 19vw, 172px);
  line-height: 0.88;
  letter-spacing: 0.18em;
  color: transparent;
  background: var(--zira-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
@supports not (background-clip: text) {
  .hero-zira-word { color: var(--teal); background: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-zira-word { animation: zira-title-settle 1.6s var(--ease) both; }
}
@keyframes zira-title-settle {
  0%   { opacity: 0; letter-spacing: 0.30em; filter: blur(8px); }
  55%  { opacity: 1; letter-spacing: 0.22em; filter: blur(0); }
  100% { opacity: 1; letter-spacing: 0.18em; filter: none; }
}
.hero-title--after-brand {
  display: block;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.6vw, 38px);
  line-height: 1.14;
  font-weight: 400;
  color: rgba(200,218,248,0.86);
  letter-spacing: -0.01em;
  max-width: 22em;
}
.hero-body {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  max-width: 58ch;
}
.hero-body--stack {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.hero-body--stack p {
  margin: 0;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.75;
}
.hero-body--stack p strong {
  color: rgba(240,244,255,.98);
  font-weight: 700;
}

/* Formation threshold meter */
.formation-threshold {
  max-width: 520px;
  margin-top: 36px;
  padding: 20px 22px 16px;
  background: rgba(12,14,36,.84);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.formation-threshold::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,207,192,.32), transparent);
}
.ft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ft-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
}
.ft-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.ft-count strong { color: var(--text); }
.ft-sep { opacity: .4; margin: 0 3px; }
.ft-track {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ft-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal-2), var(--teal));
  border-radius: 9999px;
  transition: width 2s var(--ease);
  position: relative;
}
.ft-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35));
  border-radius: 9999px;
}
.ft-note {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--font-mono);
  line-height: 1.6;
  margin: 0;
}

/* Sections */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.section-gap {
  padding: 64px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(62,207,192,.04), transparent 55%);
}
.section-gap h2 {
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-lead {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 14px;
}
.section-body {
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.9;
  text-align: justify;
  text-wrap: pretty;
}
.section-prose p {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.section-prose--compact p {
  font-size: 15px;
  line-height: 1.75;
}
.section-lead--narrow {
  max-width: 56ch;
}

/* Trajectory */
.trajectory .section-h {
  margin-bottom: 14px;
}
.trajectory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 860px) {
  .trajectory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 1180px) {
  .trajectory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.trajectory-grid--docs {
  margin-top: 14px;
}
.traj-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 240px at 18% -30%, rgba(62,207,192,.10), transparent 55%),
    radial-gradient(900px 240px at 82% -40%, rgba(139,111,245,.08), transparent 58%),
    rgba(10, 12, 30, 0.42);
  box-shadow: 0 18px 48px rgba(0,0,0,.26);
  backdrop-filter: blur(8px) saturate(120%);
  padding: 16px 16px 18px;
  position: relative;
  overflow: hidden;
}
.traj-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(62,207,192,.08), transparent 35%),
    linear-gradient(315deg, rgba(139,111,245,.06), transparent 45%);
  opacity: .85;
  pointer-events: none;
}
.traj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.traj-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(62,207,192,.92);
  border: 1px solid rgba(62,207,192,.22);
  background: rgba(6, 10, 24, 0.35);
  padding: 6px 9px;
  border-radius: 999px;
}
.traj-ico {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
  opacity: .96;
}
.traj-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 520;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.traj-p {
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.75;
  position: relative;
  z-index: 1;
}
.traj-p:last-child {
  margin-bottom: 0;
}
.traj-close {
  margin-top: 18px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(6, 8, 18, 0.40);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(8px) saturate(120%);
}
.traj-close__p {
  margin: 0 0 10px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.75;
}
.traj-anchor {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(210,220,242,.84);
  letter-spacing: .02em;
  padding: 10px 12px;
  border-radius: 999px;
  display: inline-flex;
  border: 1px solid rgba(107,140,232,.22);
  background: linear-gradient(90deg, rgba(62,207,192,.12), rgba(139,111,245,.10));
}

/* Home: after anchor ownership → system states, then About */
#ownership + .trajectory--pre-about {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(185deg, rgba(62, 207, 192, 0.07) 0%, transparent 38%),
    linear-gradient(0deg, rgba(139, 111, 245, 0.04) 0%, transparent 28%),
    rgba(10, 12, 30, 0.55);
  padding-top: clamp(48px, 8vw, 72px);
}
#ownership + .trajectory--pre-about.trajectory--fieldline {
  position: relative;
  overflow: hidden;
}
#ownership + .trajectory--pre-about.trajectory--fieldline::before {
  content: '';
  position: absolute;
  inset: -15% 0 auto 0;
  height: 50%;
  background: radial-gradient(ellipse 65% 60% at 50% 0%, rgba(62, 207, 192, 0.1), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
#ownership + .trajectory--pre-about.trajectory--fieldline::after {
  content: '';
  position: absolute;
  right: 8%;
  top: 45%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 111, 245, 0.05), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.trajectory--fieldline > .wrap {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
}
/* Trajectory: system states (home) */
.trajectory--fieldline .trj-st-eyewrap { text-align: center; }
.trajectory--fieldline .trj-st-eyewrap .eyebrow { margin-bottom: 4px; }
.trajectory--fieldline .trj-st-why {
  margin: 0 auto;
  max-width: 44rem;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  text-wrap: pretty;
  hyphens: none;
}
.trajectory--fieldline .trj-st-h {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: rgba(235, 240, 255, 0.96);
  text-shadow: 0 0 32px rgba(62, 207, 192, 0.12);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .trajectory--fieldline .trj-st-h {
    background: linear-gradient(100deg, rgba(245, 248, 255, 0.99) 0%, rgba(190, 220, 215, 0.9) 45%, rgba(130, 180, 220, 0.95) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
  }
}
.trajectory--fieldline .trj-st-lede {
  margin: 12px auto 0;
  max-width: 44rem;
  font-size: clamp(13.5px, 1.12vw, 15px);
  line-height: 1.55;
  color: var(--text-2);
  text-align: center;
  text-wrap: pretty;
  hyphens: none;
}
.trajectory--fieldline .trj-st-badges {
  margin: 12px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 58rem;
}
.trajectory--fieldline .trj-st-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230, 240, 255, 0.72);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 6px 10px;
  border-radius: 999px;
}
.trajectory--fieldline .trj-st-badge--zti { border-color: rgba(62,207,192,.22); box-shadow: 0 0 0 1px rgba(62,207,192,.06) inset; }
.trajectory--fieldline .trj-st-badge--coord { border-color: rgba(100,140,255,.20); box-shadow: 0 0 0 1px rgba(100,140,255,.05) inset; }
.trajectory--fieldline .trj-st-badge--zir { border-color: rgba(212,168,32,.22); box-shadow: 0 0 0 1px rgba(212,168,32,.05) inset; }

.trajectory--fieldline .trj-st-hdr { margin-top: 16px; }
.trajectory--fieldline .trj-st-hdr-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px 18px;
  align-items: start;
  margin: 0 auto;
  max-width: 980px;
}
@media (max-width: 920px) {
  .trajectory--fieldline .trj-st-hdr-grid { grid-template-columns: 1fr; }
}
.trajectory--fieldline .trj-st-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 12px;
}
@media (max-width: 720px) {
  .trajectory--fieldline .trj-st-compare { grid-template-columns: 1fr; }
}
.trajectory--fieldline .trj-st-compare-col {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  padding: 12px 12px 10px;
}
.trajectory--fieldline .trj-st-compare-col--zira {
  border-color: rgba(62,207,192,.16);
  box-shadow: 0 0 0 1px rgba(62,207,192,.06) inset;
  background: linear-gradient(155deg, rgba(62,207,192,.06), rgba(139,111,245,.03) 55%, rgba(0,0,0,.18));
}
.trajectory--fieldline .trj-st-compare-k {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.trajectory--fieldline .trj-st-compare-col--zira .trj-st-compare-k { color: rgba(62,207,192,.9); }
.trajectory--fieldline .trj-st-compare-v {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(230, 240, 255, 0.88);
  text-wrap: pretty;
}
.trajectory--fieldline .trj-st-rt {
  margin: 0;
  padding: 0 0 0 16px;
  color: rgba(230, 240, 255, 0.92);
  font-size: 13px;
  line-height: 1.55;
}
.trajectory--fieldline .trj-st-rt li { margin: 0 0 6px; }
.trajectory--fieldline .trj-st-rt li:last-child { margin-bottom: 0; }

.trajectory--fieldline .trj-st-invar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) {
  .trajectory--fieldline .trj-st-invar { grid-template-columns: 1fr; }
}
.trajectory--fieldline .trj-st-invar__item {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.45;
  text-wrap: pretty;
}
.trajectory--fieldline .trj-st-invar__n {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(62,207,192,.35);
  color: rgba(62,207,192,.9);
  font-family: var(--font-mono);
  font-size: 10px;
}
.trajectory--fieldline .trj-st-invar__t {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(62,207,192,.95);
  margin: 0 0 3px;
}

.trajectory--fieldline .trj-st-hdr-art { margin: 0; }
.trajectory--fieldline .trj-fl-field { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 22px rgba(62,207,192,.10)); }
.trajectory--fieldline .trj-fl-fieldcap {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  text-align: center;
}
.trajectory--fieldline .trj-field-lock,
.trajectory--fieldline .trj-field-unlock {
  stroke-width: 1.6;
  fill: rgba(0,0,0,.14);
}
.trajectory--fieldline .trj-field-lock { stroke: rgba(255,255,255,.18); }
.trajectory--fieldline .trj-field-unlock { stroke: rgba(212,168,32,.40); }
.trajectory--fieldline .trj-field-labels text {
  fill: rgba(210, 220, 242, 0.85);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.trajectory--fieldline .trj-field-labels .trj-field-sub { fill: rgba(230,240,255,.66); font-size: 10px; letter-spacing: 0.06em; }
.trajectory--fieldline .trj-field-node { fill: rgba(4, 8, 20, 0.96); stroke: rgba(255,255,255,.14); stroke-width: 1.2; }
.trajectory--fieldline .trj-field-node--b { stroke: rgba(62,207,192,.7); }
.trajectory--fieldline .trj-field-node--c { stroke: rgba(100,140,255,.55); }
.trajectory--fieldline .trj-field-pulse {
  fill: none;
  stroke: rgba(62,207,192,.45);
  stroke-width: 1.2;
  opacity: 0.65;
  transform-origin: 320px 100px;
  animation: trjPulse 2.6s ease-in-out infinite;
}
.trajectory--fieldline .trj-field-pulse--alt {
  stroke: rgba(100,140,255,.35);
  animation-duration: 3.2s;
}
.trajectory--fieldline .trj-field-flow {
  stroke-dasharray: 10 18;
  animation: trjDash 4.8s linear infinite;
}
@keyframes trjDash { to { stroke-dashoffset: -56; } }
@keyframes trjPulse { 0%,100% { opacity: .25; transform: scale(0.96); } 50% { opacity: .7; transform: scale(1.04);} }

.trajectory--fieldline .trj-states { margin: 18px auto 0; max-width: 980px; display: grid; gap: 14px; }
.trajectory--fieldline .trj-state {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 12px 18px;
  align-items: start;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.20);
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.trajectory--fieldline .trj-state::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse 70% 55% at 10% 0%, rgba(62,207,192,.10), transparent 62%);
  opacity: 0.75;
  pointer-events: none;
}
.trajectory--fieldline .trj-state--activation::before {
  background: radial-gradient(ellipse 70% 55% at 10% 0%, rgba(212,168,32,.10), transparent 62%);
}
.trajectory--fieldline .trj-state--expansion::before {
  background: radial-gradient(ellipse 70% 55% at 10% 0%, rgba(100,140,255,.10), transparent 62%);
}
@media (max-width: 860px) {
  .trajectory--fieldline .trj-state { grid-template-columns: 1fr; }
}
.trajectory--fieldline .trj-state-top { position: relative; z-index: 1; }
.trajectory--fieldline .trj-state-k {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(62,207,192,.9);
}
.trajectory--fieldline .trj-state--activation .trj-state-k { color: rgba(220, 200, 120, 0.95); }
.trajectory--fieldline .trj-state--expansion .trj-state-k { color: rgba(160, 180, 255, 0.95); }
.trajectory--fieldline .trj-state-h {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: rgba(240, 245, 255, 0.96);
}
.trajectory--fieldline .trj-state-sub {
  margin: 0;
  color: rgba(210, 220, 242, 0.9);
  font-size: 13px;
  line-height: 1.45;
}
.trajectory--fieldline .trj-state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin-top: 10px;
}
.trajectory--fieldline .trj-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(230, 240, 255, 0.72);
}
.trajectory--fieldline .trj-chip--locked { border-color: rgba(255,255,255,.12); color: rgba(230, 240, 255, 0.62); }
.trajectory--fieldline .trj-chip--unlock { border-color: rgba(212,168,32,.28); color: rgba(220, 200, 120, 0.95); background: rgba(20,16,6,.28); }
.trajectory--fieldline .trj-chip--hot { border-color: rgba(62,207,192,.24); color: rgba(62,207,192,.92); background: rgba(4,12,20,.28); }
.trajectory--fieldline .trj-state-body { position: relative; z-index: 1; }
.trajectory--fieldline .trj-state-list {
  margin: 0;
  padding: 0 0 0 16px;
  color: rgba(230, 240, 255, 0.9);
  font-size: 13px;
  line-height: 1.55;
}
.trajectory--fieldline .trj-state-list li { margin: 0 0 6px; }
.trajectory--fieldline .trj-state-list li:last-child { margin-bottom: 0; }
.trajectory--fieldline .trj-state-key {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(240, 245, 255, 0.92);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  text-wrap: pretty;
}
.trajectory--fieldline .trj-expand { margin-top: 10px; }
.trajectory--fieldline .trj-expand-k {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 180, 255, 0.85);
}
.trajectory--fieldline .trj-expand-list {
  margin: 0;
  padding: 0 0 0 16px;
  color: rgba(230, 240, 255, 0.86);
  font-size: 13px;
  line-height: 1.55;
}
.trajectory--fieldline .trj-expand-list li { margin: 0 0 6px; }
.trajectory--fieldline .trj-expand-list li:last-child { margin-bottom: 0; }

.trajectory--fieldline .trj-state-art { position: relative; z-index: 1; }
.trajectory--fieldline .trj-state-viz { width: 100%; height: auto; display: block; }
.trajectory--fieldline .trj-sv-line { stroke: rgba(62,207,192,.55); stroke-width: 2; fill: none; stroke-linecap: round; }
.trajectory--fieldline .trj-state--activation .trj-sv-line { stroke: rgba(212,168,32,.45); }
.trajectory--fieldline .trj-state--expansion .trj-sv-line { stroke: rgba(100,140,255,.45); }
.trajectory--fieldline .trj-sv-line--ghost { stroke: rgba(255,255,255,.12); stroke-dasharray: 10 12; animation: trjDash 5.4s linear infinite; }
.trajectory--fieldline .trj-sv-line--flow { stroke: rgba(255,255,255,.18); stroke-dasharray: 8 14; animation: trjDash 3.8s linear infinite; }
.trajectory--fieldline .trj-sv-node { fill: rgba(4,8,20,.96); stroke: rgba(255,255,255,.16); stroke-width: 1.2; }
.trajectory--fieldline .trj-sv-node--hot { stroke: rgba(62,207,192,.75); }
.trajectory--fieldline .trj-state--activation .trj-sv-node--hot { stroke: rgba(212,168,32,.75); }
.trajectory--fieldline .trj-state--expansion .trj-sv-node--hot { stroke: rgba(100,140,255,.75); }
.trajectory--fieldline .trj-sv-dot { fill: rgba(255,255,255,.28); animation: trjDot 2.2s ease-in-out infinite; }
.trajectory--fieldline .trj-sv-dot--alt { animation-delay: 0.7s; }
@keyframes trjDot { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: .8; transform: translateY(-2px); } }
.trajectory--fieldline .trj-sv-lock { stroke: rgba(255,255,255,.18); stroke-width: 1.6; fill: rgba(0,0,0,.16); }
.trajectory--fieldline .trj-sv-fan { stroke: rgba(255,255,255,.14); stroke-width: 1.6; fill: none; stroke-linecap: round; }

.trajectory--fieldline .trj-state-cap {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  text-align: left;
}

.trajectory--fieldline .trj-boundary {
  max-width: 980px;
  margin: 4px auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, rgba(212,168,32,.07), rgba(62,207,192,.05), rgba(0,0,0,.18));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.trajectory--fieldline .trj-boundary::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(212,168,32,.14), transparent 62%);
  opacity: 0.75;
  pointer-events: none;
}
.trajectory--fieldline .trj-boundary::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(220,188,90,.55), rgba(62,207,192,.40), rgba(255,255,255,0));
  opacity: 0.55;
  animation: trjGate 3.4s ease-in-out infinite;
}
@keyframes trjGate {
  0%,100% { transform: translateY(0); opacity: .38; }
  50% { transform: translateY(8px); opacity: .68; }
}
.trajectory--fieldline .trj-boundary-line {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(220,188,90,.45), rgba(255,255,255,0));
  opacity: 0.55;
}
.trajectory--fieldline .trj-boundary-k {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 200, 120, 0.95);
  position: relative;
  z-index: 1;
}
.trajectory--fieldline .trj-boundary-v {
  margin: 0;
  color: rgba(240, 245, 255, 0.9);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.trajectory--fieldline .trj-close {
  max-width: 980px;
  margin: 16px auto 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
.trajectory--fieldline .trj-close-p {
  margin: 0 0 10px;
  color: rgba(230, 240, 255, 0.88);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
  hyphens: none;
}
.trajectory--fieldline .trj-close-p--strong { color: rgba(245, 248, 255, 0.96); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .trajectory--fieldline .trj-field-flow,
  .trajectory--fieldline .trj-field-pulse,
  .trajectory--fieldline .trj-sv-line--ghost,
  .trajectory--fieldline .trj-sv-line--flow,
  .trajectory--fieldline .trj-sv-dot { animation: none; }
}
.trajectory--fieldline .trj-fl-eyewrap {
  text-align: center;
}
.trajectory--fieldline .trj-fl-eyewrap .eyebrow {
  margin-bottom: 4px;
}
.trajectory--fieldline .trj-fl-why {
  margin: 0 auto;
  max-width: 38rem;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  text-wrap: pretty;
  hyphens: none;
}
.trajectory--fieldline .trj-fl-lede {
  margin: 12px auto 0;
  max-width: 40rem;
  font-size: clamp(13.5px, 1.12vw, 15px);
  line-height: 1.5;
  color: var(--text-2);
  text-align: center;
  text-wrap: pretty;
}
.trajectory--fieldline .trj-fl-lede strong {
  color: rgba(235, 240, 255, 0.95);
  font-weight: 600;
}
.trajectory--fieldline .trj-fl-invar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  max-width: 52rem;
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}
.trajectory--fieldline .trj-fl-invar__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
  text-wrap: pretty;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px rgba(62, 207, 192, 0.04) inset;
}
.trajectory--fieldline .trj-fl-invar__n {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--teal);
  border: 1px solid rgba(62, 207, 192, 0.35);
  border-radius: 50%;
  line-height: 1;
}
.trajectory--fieldline .trj-fl-invar__body {
  flex: 1;
  min-width: 0;
}
.trajectory--fieldline .trj-fl-invar__t {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin: 0 0 3px;
}
.trajectory--fieldline .trj-fl-aud {
  margin: 12px auto 0;
  max-width: 40rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
  text-align: center;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .trajectory--fieldline .trj-fl-invar {
    grid-template-columns: 1fr;
    max-width: 24rem;
  }
}
.trajectory--fieldline .trj-fl-head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 0;
}
.trajectory--fieldline .trj-fl-h {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: rgba(235, 240, 255, 0.96);
  text-shadow: 0 0 32px rgba(62, 207, 192, 0.12);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .trajectory--fieldline .trj-fl-h {
    background: linear-gradient(100deg, rgba(245, 248, 255, 0.99) 0%, rgba(190, 220, 215, 0.9) 45%, rgba(130, 180, 220, 0.95) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
  }
}
.trajectory--fieldline .trj-fl-merge {
  max-width: 20rem;
  margin: 16px auto 4px;
  text-align: center;
}
.trajectory--fieldline .trj-fl-merge-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100px;
  margin: 0 auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 20px rgba(62, 207, 192, 0.08));
}
.trajectory--fieldline .trj-fl-merge-cap {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.trajectory--fieldline .trj-fl-sec-label {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 8px 1rem 0;
}
.trajectory--fieldline .trj-fl-sec-label--later {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 20px 1rem 6px;
  color: var(--text-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.92) 0%, rgba(8, 12, 22, 0) 100%);
}
.trajectory--fieldline .trj-fl-spine-wrap {
  position: relative;
  max-width: 800px;
  margin: 6px auto 0;
  padding: 6px 0 0;
  --trj-gutter: min(64px, 4.5vw);
}
.trajectory--fieldline .trj-fl-spine-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(62, 207, 192, 0.55) 0%, rgba(100, 140, 255, 0.45) 50%, rgba(200, 168, 80, 0.55) 100%);
  box-shadow: 0 0 24px rgba(62, 207, 192, 0.2);
  opacity: 0.7;
  z-index: 0;
}
.trajectory--fieldline .trj-fl-spine {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.trajectory--fieldline .trj-fl-spine--later {
  margin-top: 0;
  padding-top: 0;
}
.trajectory--fieldline .trj-fl-row {
  display: grid;
  grid-template-columns: 1fr var(--trj-gutter) 1fr;
  gap: 0;
  min-height: 0;
  padding: clamp(12px, 1.8vw, 20px) 0;
  position: relative;
  z-index: 1;
  align-items: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.trajectory--fieldline .trj-fl-row:last-child { border-bottom: none; }
.trajectory--fieldline .trj-fl-row--l .trj-fl-panel { grid-column: 1; }
.trajectory--fieldline .trj-fl-row--l .trj-fl-gutter { grid-column: 2; }
.trajectory--fieldline .trj-fl-row--l .trj-fl-balance { grid-column: 3; }
.trajectory--fieldline .trj-fl-row--r .trj-fl-balance { grid-column: 1; }
.trajectory--fieldline .trj-fl-row--r .trj-fl-gutter { grid-column: 2; }
.trajectory--fieldline .trj-fl-row--r .trj-fl-panel { grid-column: 3; }
.trajectory--fieldline .trj-fl-balance { min-height: 1px; }
.trajectory--fieldline .trj-fl-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0;
  z-index: 2;
  justify-content: flex-start;
  padding-top: 0.2rem;
}
.trajectory--fieldline .trj-fl-lock {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(4, 8, 20, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 0 0 2px rgba(62, 207, 192, 0.45);
  position: relative;
  flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trajectory--fieldline .trj-fl-lock--crown {
  width: 16px;
  height: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 0 0 2px rgba(212, 168, 32, 0.65),
    0 0 22px rgba(212, 168, 32, 0.25);
}
.trajectory--fieldline .trj-fl-row:hover .trj-fl-lock {
  transform: scale(1.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(62, 207, 192, 0.7), 0 0 18px rgba(62, 207, 192, 0.25);
}
.trajectory--fieldline .trj-fl-row:hover .trj-fl-lock--crown {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(220, 188, 90, 0.9), 0 0 26px rgba(224, 188, 64, 0.35);
}
.trajectory--fieldline .trj-fl-lock--halo {
  width: 14px;
  height: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 0 2px rgba(130, 160, 255, 0.4),
    0 0 20px rgba(130, 160, 255, 0.15);
}
.trajectory--fieldline .trj-fl-row:hover .trj-fl-lock--halo {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(160, 180, 255, 0.65), 0 0 20px rgba(130, 160, 255, 0.25);
}
.trajectory--fieldline .trj-fl-lock--pulse {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 0 0 2px rgba(62, 207, 192, 0.5), 0 0 14px rgba(62, 207, 192, 0.2);
  animation: trjFlLockPulse 2.4s ease-in-out infinite;
}
@keyframes trjFlLockPulse {
  0%,
  100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 0 0 2px rgba(62, 207, 192, 0.5), 0 0 14px rgba(62, 207, 192, 0.2); }
  50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 0 0 2px rgba(62, 207, 192, 0.85), 0 0 24px rgba(62, 207, 192, 0.35); }
}
.trajectory--fieldline .trj-fl-row:hover .trj-fl-lock--pulse {
  animation: none;
  transform: scale(1.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(62, 207, 192, 0.7), 0 0 18px rgba(62, 207, 192, 0.25);
}
.trajectory--fieldline .trj-fl-panel {
  max-width: 100%;
  padding: 0 clamp(0px, 1.5vw, 12px);
  transition: transform 0.2s ease;
}
.trajectory--fieldline .trj-fl-row--l .trj-fl-panel { text-align: right; }
.trajectory--fieldline .trj-fl-row--r .trj-fl-panel { text-align: left; }
.trajectory--fieldline .trj-fl-row:hover .trj-fl-panel { transform: translateY(-1px); }
.trajectory--fieldline .trj-fl-panel--now {
  background: linear-gradient(140deg, rgba(62, 207, 192, 0.04), transparent 45%);
  border-radius: 12px;
  margin: -4px 0 0 0;
  padding: 6px clamp(0px, 1.5vw, 12px) 8px;
}
.trajectory--fieldline .trj-fl-panel--chapterend .trj-fl-ht {
  color: rgba(220, 200, 120, 0.98);
}
.trajectory--fieldline .trj-fl-panel--chapterend {
  background: linear-gradient(165deg, rgba(212, 168, 32, 0.08), rgba(62, 207, 192, 0.03) 50%, transparent 70%);
  border-radius: 12px;
  margin: -4px 0 0 0;
  padding: 6px clamp(0px, 1.5vw, 12px) 8px;
}
.trajectory--fieldline .trj-fl-panel--chapterend .trj-fl-psub {
  border-color: rgba(212, 168, 32, 0.35);
  color: rgba(220, 200, 150, 0.95);
  background: rgba(20, 16, 6, 0.35);
}
.trajectory--fieldline .trj-fl-pmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: inherit;
  gap: 0.4rem 0.5rem;
  margin-bottom: 4px;
}
.trajectory--fieldline .trj-fl-row--l .trj-fl-pmeta { justify-content: flex-end; }
.trajectory--fieldline .trj-fl-row--r .trj-fl-pmeta { justify-content: flex-start; }
.trajectory--fieldline .trj-fl-ph {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(62, 207, 192, 0.85);
  letter-spacing: 0.1em;
}
.trajectory--fieldline .trj-fl-psub {
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-4);
  opacity: 0.9;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 999px;
}
.trajectory--fieldline .trj-fl-ht {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--text);
}
.trajectory--fieldline .trj-fl-cp {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
  text-wrap: pretty;
  hyphens: none;
  max-width: 32ch;
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.trajectory--fieldline .trj-fl-row--l .trj-fl-cp {
  text-align: end;
  margin-right: 0;
  margin-left: auto;
}
.trajectory--fieldline .trj-fl-row--r .trj-fl-cp {
  text-align: start;
  margin-left: 0;
  margin-right: auto;
}
.trajectory--fieldline .trj-fl-cp em {
  color: var(--text-2);
  font-style: normal;
  font-weight: 500;
}
.trajectory--fieldline .trj-fl-panel--fin .trj-fl-ht,
.trajectory--fieldline .trj-fl-panel--horizon .trj-fl-ht { color: rgba(180, 195, 255, 0.98); }
.trajectory--fieldline .trj-fl-panel--fin,
.trajectory--fieldline .trj-fl-panel--horizon {
  padding: 4px clamp(0px, 1.5vw, 12px) 8px;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(130, 110, 240, 0.06), rgba(62, 207, 192, 0.03) 50%, transparent 60%);
  margin: -2px 0 0 0;
}
.trajectory--fieldline .trj-fl-panel--horizon {
  background: linear-gradient(160deg, rgba(100, 90, 200, 0.05), rgba(50, 70, 120, 0.04) 45%, transparent 70%);
}
.trajectory--fieldline .trj-fl-foot {
  margin-top: 16px;
  text-align: center;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2px;
}
.trajectory--fieldline .trj-fl-foot__p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  text-align: center;
  text-wrap: pretty;
  hyphens: none;
}
.trajectory--fieldline .trj-fl-foot__p strong {
  color: rgba(240, 245, 255, 0.95);
  font-weight: 600;
}
.trajectory--fieldline .trj-fl-foot__now {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.trajectory--fieldline .trj-fl-tag {
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--teal);
  border: 1px solid rgba(62, 207, 192, 0.28);
  background: rgba(4, 12, 20, 0.6);
  padding: 4px 10px;
  border-radius: 999px;
}
.trajectory--fieldline .trj-fl-now {
  color: rgba(210, 220, 242, 0.95);
  max-width: 40rem;
  text-align: center;
  line-height: 1.45;
}
.trajectory--fieldline .trj-fl-now strong {
  color: rgba(240, 245, 255, 0.98);
  font-weight: 600;
}
@media (max-width: 768px) {
  .trajectory--fieldline .trj-fl-spine-wrap::before {
    left: 1.1rem;
    right: auto;
    margin: 0;
  }
  .trajectory--fieldline .trj-fl-row {
    display: block;
    padding: 1.1rem 0 1.25rem 0;
    padding-left: 2.4rem;
    position: relative;
  }
  .trajectory--fieldline .trj-fl-gutter {
    position: absolute;
    left: calc(1.1rem + 1px);
    top: 1.15rem;
    transform: translateX(-50%);
    padding: 0;
  }
  .trajectory--fieldline .trj-fl-panel { text-align: left !important; }
  .trajectory--fieldline .trj-fl-pmeta { justify-content: flex-start !important; }
  .trajectory--fieldline .trj-fl-balance { display: none; }
  .trajectory--fieldline .trj-fl-row--l .trj-fl-cp,
  .trajectory--fieldline .trj-fl-row--r .trj-fl-cp {
    text-align: start !important;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .trajectory--fieldline .trj-fl-row:hover .trj-fl-panel,
  .trajectory--fieldline .trj-fl-lock { transition: none; transform: none; }
  .trajectory--fieldline .trj-fl-lock--pulse { animation: none; }
}

.section-foot {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}
.section-foot .text-link {
  margin: 0 4px;
}
.fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.fp-card {
  padding: 18px 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg-2);
  box-shadow: var(--card-inset);
}
.fp-card-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-family: var(--font-display);
  font-weight: 500;
}
.fp-card-body {
  margin: 0;
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.65;
  text-align: justify;
  text-wrap: pretty;
}

.section-primitives {
  padding: 72px 0;
}
.section-primitives h2 {
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.15;
  margin-bottom: 26px;
}
.primitives-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 920px) {
  .primitives-grid { gap: 16px; }
}
.primitive-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px 18px;
  background: rgba(15, 18, 48, 0.78);
  border: 1px solid var(--border);
  border-radius: 14px;
}
@media (min-width: 900px) {
  .primitive-card { grid-template-columns: 280px 1fr; align-items: center; }
}
.primitive-visual {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8, 9, 28, 0.55);
  padding: 14px 14px 10px;
}
.p-svg { width: 100%; height: auto; display: block; }
.visual-caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
}
.primitive-body h3 { font-size: 18px; margin-bottom: 6px; }
.prim-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  margin-bottom: 12px;
}
.primitive-body p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.85;
}
.prim-link {
  display: inline-flex;
  margin-top: 12px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 2px;
}
.prim-link:hover { border-bottom-color: rgba(255,255,255,.32); }

.a-center { transition: opacity 220ms ease; }
.a-edge { transition: stroke 260ms ease, stroke-opacity 260ms ease; }
.a-edge--break {
  stroke: rgba(240, 96, 120, 0.55) !important;
  stroke-dasharray: 3 4;
  stroke-opacity: 0.9;
}

/* Map */
.section-map {
  padding: 72px 0;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(139,111,245,.04), transparent 55%);
}
.map-header {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 18px;
}
@media (min-width: 900px) {
  .map-header { grid-template-columns: 1.2fr 0.8fr; }
}
.map-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
.map-stat {
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(15, 18, 48, 0.78);
  border: 1px solid var(--border);
  text-align: center;
}
.ms-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text);
}
.ms-l {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-4);
}
.index-map-canvas-wrap {
  margin-top: 18px;
  border-radius: 16px;
  background: rgba(12,14,36,.70);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
#index-map-canvas {
  width: 100%;
  height: 420px;
  display: block;
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
}
.map-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.map-bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
  max-width: 64ch;
}
.map-bullets li {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 18, 48, 0.55);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.map-bullets strong { color: var(--text); font-weight: 600; }

.topology-strip {
  margin-top: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(62,207,192,.10), transparent 55%),
    radial-gradient(720px 240px at 70% 10%, rgba(139,111,245,.08), transparent 58%),
    rgba(12,14,36,.62);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}
.ts-row {
  display: grid;
  grid-template-columns: repeat(12, auto);
  gap: 8px 10px;
  align-items: baseline;
  justify-content: center;
}
.ts-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--text-4);
}
.ts-v {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}
.ts-note {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--text-4);
}
.ts-scan {
  position: absolute;
  top: -40%;
  bottom: -40%;
  width: 24%;
  left: -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), rgba(62,207,192,.22), rgba(255,255,255,.08), transparent);
  transform: skewX(-18deg);
  animation: ts-scan 7.5s var(--ease) infinite;
  opacity: .9;
  pointer-events: none;
}
@keyframes ts-scan {
  0% { left: -30%; opacity: 0; }
  10% { opacity: .7; }
  55% { opacity: .6; }
  100% { left: 110%; opacity: 0; }
}

/* Paths */
.section-paths {
  padding: 72px 0 84px;
  border-top: 1px solid var(--border);
}
.section-paths h2 {
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.15;
}
.paths-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 18px;
}
@media (min-width: 980px) {
  .paths-grid { grid-template-columns: repeat(3, 1fr); }
}
.path-card {
  display: block;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(15, 18, 48, 0.78);
  text-decoration: none;
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.path-card--featured {
  border-color: rgba(62,207,192,.22);
  background: radial-gradient(ellipse 90% 60% at 30% 0%, rgba(62,207,192,.10), transparent 55%), rgba(15, 18, 48, 0.78);
}
.path-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.path-card h3 { font-size: 16px; margin-bottom: 10px; }
.path-card p { color: var(--text-2); font-size: 13px; line-height: 1.8; }
.path-arrow {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(8, 9, 28, 0.65);
}
.footer-inner {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  padding-top: 28px;
  padding-bottom: 22px;
}
@media (min-width: 980px) {
  .footer-inner { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
.footer-brand p {
  margin-top: 10px;
  color: var(--text-3);
  font-size: 14px;
}
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.footer-social a {
  color: var(--text-3);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
}
.footer-social a:hover { color: var(--text); }
.footer-links {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
.fl-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 10px;
}
.fl-col a {
  display: block;
  color: var(--text-3);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 8px;
}
.fl-col a:hover { color: var(--text); }
.footer-legal {
  padding: 14px clamp(16px, 4vw, 28px) 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.12; }
}
img  { display: block; max-width: 100%; }
a    { color: var(--teal); text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); background: none; border: none; color: inherit; }
input, textarea, select { font-family: var(--font-body); }

/* Elegant scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surf-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--surf-3); }

/* ----------------------------------------------------------------
   Typography
   ---------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(72px, 13vw, 176px);
  font-weight: 300;
  line-height: .86;
  letter-spacing: .04em;
}
.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 64px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 46px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.007em;
}
.t-h3 {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  line-height: 1.35;
}
.t-lead {
  font-size: clamp(15px, 1.45vw, 17px);
  color: var(--text-2);
  line-height: 1.82;
  text-align: justify;
  text-wrap: pretty;
}
.t-body  { font-size: 15px; color: var(--text-2); line-height: 1.8; text-align: justify; text-wrap: pretty; }
.mono   { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.02em; }
.t-small { font-size: 13px; color: var(--text-3); line-height: 1.65; }
.t-xs    { font-size: 11px; color: var(--text-3); }
.t-mono  { font-family: var(--font-mono); }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: 20px;
}
.t-teal   { color: var(--teal); }
.t-gold   { color: var(--gold); }
.t-violet { color: var(--violet); }
.t-muted  { color: var(--text-3); }

/* ----------------------------------------------------------------
   Layout
   ---------------------------------------------------------------- */
.wrap    { max-width: var(--mw);    margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }
.wrap-sm { max-width: var(--mw-sm); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

.sec     { padding: clamp(68px, 11vw, 108px) 0; }
.sec-sm  { padding: clamp(52px, 8vw, 76px) 0; }
.sec-alt {
  background: var(--bg-alt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 24px); align-items: stretch; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 20px); align-items: stretch; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 16px); align-items: stretch; }

@media (max-width: 940px) { .g3, .g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

hr.rule {
  border: none;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent 0%, var(--border) 18%, var(--border) 82%, transparent 100%);
  opacity: 0.88;
}

/* ----------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  min-height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(clamp(20px, 4vw, 32px), env(safe-area-inset-right, 0px)) 0 max(clamp(20px, 4vw, 32px), env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  transition: background .4s var(--ease), border-color .4s;
}
.nav.scrolled {
  background: rgba(7,9,16,.88);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--mw);
  margin: 0 auto;
  gap: clamp(10px, 2vw, 18px);
  justify-content: flex-start;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--text);
  flex-shrink: 0;
  line-height: 1;
}
.nav-logo--lockup {
  gap: 0;
}
.logo-type { display: inline-flex; align-items: baseline; gap: 0; }
.logo-z,
.logo-ra {
  color: var(--text);
  letter-spacing: .18em;
  font-weight: 500;
}
.logo-i {
  color: var(--teal);
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 1px;
}
.logo-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(69, 212, 196, 0.12), rgba(122, 92, 240, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  filter: drop-shadow(0 2px 10px rgba(69, 212, 196, 0.22));
}
.logo-mark img,
.logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 1px;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 0 4px;
}
.nav-links a {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  padding: 8px 11px;
  border-radius: var(--r-full);
  transition: color .18s, background .18s;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .nav-links a { padding: 7px 8px; font-size: 12px; }
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); background: var(--surf-2); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--surf-2);
  border: 1px solid var(--border);
}
.nav-burger span {
  display: block;
  width: 15px; height: 1.5px;
  background: var(--text-2);
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s;
}
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px,4.5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px,-4.5px); }
@media (max-width: 860px) { .nav-links { display: none; } .nav-burger { display: flex; } }
@media (max-width: 400px) {
  .nav-right .btn-ghost { display: none; }
  .nav-right .btn-primary { padding: 8px 14px; font-size: 12px; min-height: 38px; }
}

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 85vw);
  background: rgba(9,11,20,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--border);
  z-index: 200;
  padding: 24px 20px 40px;
  transform: translateX(112%);
  transition: transform .34s var(--ease);
  display: flex;
  flex-direction: column;
}
.nav-drawer.open { transform: none; }
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(7,9,16,.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.nav-overlay.open { opacity: 1; pointer-events: all; }
.drawer-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surf-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background .15s;
}
.drawer-close:hover { background: var(--surf-3); }
.drawer-nav {
  margin-top: 58px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-nav a {
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r);
  transition: background .15s, color .15s;
}
.drawer-nav a:hover { background: var(--surface); color: var(--text); }

/* Small shared helpers (replace common inline styles) */
.nav-drawer-actions .btn-primary.nav-drawer-cta {
  font-size: 14px;
  height: 40px;
}
.text-link.text-link--block {
  display: block;
  font-size: 13px;
}

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), opacity .18s;
  min-height: 44px;
}
.btn:hover { transform: translateY(-1.5px); }
.btn-primary {
  background: var(--zira-gradient);
  color: rgba(5, 6, 20, 0.96);
  border: 1px solid rgba(62, 207, 192, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 10px 30px rgba(62, 207, 192, 0.08),
    0 10px 30px rgba(107, 140, 232, 0.05);
}
.btn-primary:hover {
  filter: brightness(1.02) saturate(1.03);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 14px 36px rgba(62, 207, 192, 0.11),
    0 14px 36px rgba(107, 140, 232, 0.07);
}
.btn-ghost {
  background: rgba(6, 10, 32, 0.22);
  color: rgba(230, 238, 255, 0.92);
  border: 1px solid rgba(90, 150, 200, 0.16);
  box-shadow:
    0 0 0 1px rgba(62, 207, 192, 0.06) inset,
    0 8px 22px rgba(2, 4, 12, 0.14);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}
.btn-ghost:hover { color: rgba(240, 246, 255, 0.95); border-color: rgba(74, 190, 212, 0.24); }
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(62, 207, 192, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.btn-sm  { padding: 9px 18px; font-size: 13px; min-height: 38px; }
.btn-lg  { padding: 16px 36px; font-size: 15px; }

/* ----------------------------------------------------------------
   Badges
   ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  padding: 6px 14px;
  border-radius: var(--r-full);
}
.badge-teal   { background: var(--teal-a08); color: var(--teal);   border: 1px solid var(--teal-a22); }
.badge-gold   { background: var(--gold-a);   color: var(--gold);   border: 1px solid rgba(200,155,20,.26); }
.badge-violet { background: var(--violet-a); color: var(--violet); border: 1px solid rgba(122,92,240,.22); }

.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse-dot 2.6s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--teal-a22); }
  50% { opacity: .5; box-shadow: 0 0 0 4px transparent; }
}

/* ----------------------------------------------------------------
   Cards
   ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition: border-color .24s, transform .24s var(--ease), box-shadow .24s;
}
.card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,.05) 50%, transparent 90%);
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Callout
   ---------------------------------------------------------------- */
.callout {
  border-left: 2px solid var(--teal);
  padding: 16px 20px;
  background: var(--teal-a04);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.75;
  margin: 36px 0;
}

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 60px) clamp(20px,4vw,32px) 80px;
  isolation: isolate;
}
/* Home: top-align, don’t clip tall stacks (center + overflow hidden cut off content) */
.hero.hero--home {
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  /* Prevent hero backdrop layers from bleeding over next section */
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 32px);
  padding-bottom: clamp(16px, 3dvh, 36px);
  min-height: auto;
}

/* Home hero: keep backdrop layers inside hero box */
.hero.hero--home::before { inset: 0; }
.hero.hero--home::after  { inset: 0; }
.hero[data-hero-visual="fallback"]::before {
  animation: hero-backdrop-flow 28s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-hero-visual="fallback"]::before {
    animation: none;
  }
}
@keyframes hero-backdrop-flow {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.92; transform: scale(1.02); }
}
.hero[data-hero-visual="fallback"] #hero-canvas,
.hero[data-hero-visual="fallback"] #field-canvas {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -28%;
  z-index: 0;
  background:
    radial-gradient(ellipse 120% 70% at 50% 20%, rgba(62,191,176,.06), transparent 55%),
    radial-gradient(ellipse 80% 50% at 15% 40%, rgba(122,92,240,.045), transparent 50%),
    radial-gradient(ellipse 70% 45% at 85% 55%, rgba(61,135,245,.04), transparent 48%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 72px,
      rgba(255,255,255,.01) 72px,
      rgba(255,255,255,.01) 73px
    ),
    linear-gradient(185deg, #02040c 0%, var(--bg-alt) 48%, #040612 100%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 95% 72% at 50% 36%, transparent 0%, rgba(3,5,12,.38) 58%, rgba(2,4,10,.76) 100%);
  pointer-events: none;
}
/* Home: lighter vignette so field canvas reads through */
#home.hero::after {
  background: radial-gradient(ellipse 100% 82% at 50% 32%, transparent 0%, rgba(3, 6, 18, 0.06) 52%, rgba(2, 5, 14, 0.22) 100%);
}
#hero-canvas,
#field-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.62;
  z-index: 1;
  mix-blend-mode: normal;
  filter: saturate(1.06) contrast(1.02);
}
@media (prefers-reduced-motion: reduce) {
  #hero-canvas { opacity: 0.48; }
  #field-canvas { opacity: 0.48; }
  .hero--home #field-canvas { opacity: 0.7; }
  #hero-canvas, #field-canvas { filter: none; }
}
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: min(920px, var(--mw));
  margin: 0 auto;
  padding-left: clamp(12px, 2vw, 28px);
  padding-right: clamp(4px, 1.5vw, 12px);
  border-left: 1px solid rgba(69,212,196,.18);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.hero-thesis {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.8vw, 34px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 26em;
}
.hero-meta {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.05vw, 11px);
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 26px;
  line-height: 1.55;
  max-width: 40rem;
}
.hero-title-brand {
  background: linear-gradient(125deg, #3EBFB0 0%, #45D4C4 38%, #c8d4e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
@supports not (background-clip: text) {
  .hero-title-brand { color: var(--teal); background: none; }
}
.hero-meta .hl { color: var(--teal); }
.hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.hero-lead {
  font-size: clamp(14px, 1.35vw, 17px);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 0 14px;
}

.hero-progress {
  background: rgba(12,14,26,.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  max-width: 520px;
  margin-bottom: 22px;
}
.hero-progress-main {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 8px;
}
.hero-progress-main strong { color: var(--teal); font-weight: 600; }
#hero-pos-secured.hero-pos-tick {
  animation: hero-num-pulse 0.65s ease-out;
}
@keyframes hero-num-pulse {
  0% { color: var(--text); text-shadow: 0 0 0 rgba(62,191,176,0); }
  40% { color: var(--teal); text-shadow: 0 0 18px rgba(62,191,176,.35); }
  100% { color: var(--teal); text-shadow: none; }
}
.hero-progress-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
}
.hero-progress-activity {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-4);
  line-height: 1.45;
  max-width: 36em;
}
.hero-progress-activity.fm-activity--live {
  color: var(--text-3);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-progress-activity.fm-activity--live {
    animation: fm-activity-breathe 4.5s ease-in-out infinite;
  }
}
@keyframes fm-activity-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

/* Countdown (legacy; retained for docs or mirrors) */
.countdown-block {
  background: rgba(12,14,26,.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  max-width: 520px;
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}
.countdown-block::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal-a22), transparent);
}
.cd-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
  display: block;
  opacity: .8;
}
.cd-units {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cd-unit { text-align: center; }
.cd-num {
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 300;
  color: var(--text);
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 4px;
  min-width: 64px;
  display: block;
  text-align: center;
  transition: color .3s;
  letter-spacing: .04em;
}
.cd-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 7px;
  display: block;
}
.cd-sep {
  font-size: 24px;
  color: var(--text-4);
  padding-bottom: 22px;
  flex-shrink: 0;
  font-weight: 300;
}

/* Formation bar */
.formation-block {
  max-width: 520px;
  margin-bottom: 16px;
}
.formation-snapshot-note {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-4);
  line-height: 1.55;
}
.formation-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.fm-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}
.fm-label, .fm-pre {
  font-family: var(--font-mono);
  font-size: 11px;
}
.fm-label { color: var(--text-2); }
.fm-label--pend strong { color: #E8A838; }
.fm-label--sec strong { color: var(--teal); }
.fm-of { font-size: 10px; color: var(--text-4); font-family: var(--font-mono); }
.fm-sep { color: var(--text-4); font-size: 12px; padding: 0 2px; }
.fm-pre   { color: var(--text-3); }
.formation-track {
  height: 2px;
  background: var(--surf-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0;
}
.formation-track--split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 6px;
  border-radius: 5px;
  background: rgba(255,255,255,.045);
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.formation-seg {
  flex: 0 0 auto;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  transition: width 1.1s var(--ease);
}
.formation-seg--pending {
  background: linear-gradient(90deg, #B8860F, #E8A838);
  border-radius: 4px 0 0 4px;
}
.formation-seg--secured {
  background: linear-gradient(90deg, var(--teal-2), var(--teal));
  border-radius: 0 4px 4px 0;
}
.formation-seg--secured:only-child,
.formation-seg--pending:only-child { border-radius: 4px; }
.formation-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-2), var(--teal));
  border-radius: 2px;
  width: 0;
  transition: width 1.6s var(--ease);
}
.formation-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  line-height: 1.65;
}
.formation-block--counts .fm-label {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
}
.formation-block--counts .fm-label strong {
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1;
}
.formation-block--counts .fm-suffix {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.formation-block--counts .fm-label--pend strong { color: #E8A838; }
.formation-block--counts .fm-label--sec strong { color: var(--teal); }
.formation-note--compact {
  margin-top: 10px;
}
.hero-stats--pillars {
  max-width: 520px;
}
.hero-stats--pillars .hstat {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
.hero-stats--pillars .hstat-k {
  font-family: var(--font-display);
  font-size: clamp(15px, 2.1vw, 19px);
  font-weight: 500;
  color: var(--teal);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hero-stats--pillars .hstat-l {
  font-size: 11px;
  line-height: 1.45;
  max-width: 11em;
}
.register-panel {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.register-panel--trust {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 4px;
}
.register-panel-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.form-note--compact {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}
.alloc-trust-inline {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  border-radius: var(--r);
  border: 1px solid rgba(62, 191, 176, 0.22);
  background: rgba(62, 191, 176, 0.06);
}
.storage-warning {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  font-size: 11px;
  line-height: 1.55;
  color: #fca5a5;
  max-width: 100%;
}
/* Hero stats strip */
.hero-stats {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(7,9,16,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  max-width: 520px;
}
.hstat {
  flex: 1;
  padding: 15px 16px;
  border-right: 1px solid var(--border);
  transition: background .2s;
}
.hstat:hover { background: rgba(255,255,255,.022); }
.hstat:last-child { border-right: none; }
.hstat-n {
  font-family: var(--font-mono);
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 400;
  color: var(--teal);
  display: block;
  margin-bottom: 3px;
  letter-spacing: .02em;
}
.hstat-l {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   Marquee
   ---------------------------------------------------------------- */
.marquee-band {
  overflow: hidden;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.marquee-track {
  display: flex;
  animation: marquee 44s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
    width: auto;
    max-width: var(--mw);
    margin: 0 auto;
    gap: 8px 24px;
    padding: 0 16px;
  }
}
.mi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .04em;
  white-space: nowrap;
}
.mi.hi { color: var(--text-2); }
.mi-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--teal);
  opacity: .4;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Section headers
   ---------------------------------------------------------------- */
.sec-header {
  max-width: 660px;
  margin-bottom: 56px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sec-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------------
   Vision / problem grid
   ---------------------------------------------------------------- */
#global-challenge,
#what-zira,
#how-it-works,
#protocol,
#architecture {
  position: relative;
}
#global-challenge::before,
#how-it-works::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 45% at 100% 0%, rgba(69,212,196,.05), transparent 55%);
  opacity: .9;
}
#what-zira::before,
#protocol::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 50% at 0% 20%, rgba(122,92,240,.06), transparent 55%);
  opacity: .85;
}
#architecture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(69,212,196,.05), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(122,92,240,.04), transparent 50%);
}
#global-challenge > .wrap,
#what-zira > .wrap,
#how-it-works > .wrap,
#protocol > .wrap,
#architecture > .wrap {
  position: relative;
  z-index: 1;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 48px;
  align-items: stretch;
  box-shadow: 0 28px 70px rgba(0,0,0,.18);
}
.prob-item {
  background: var(--bg);
  padding: 22px 20px 24px;
  transition: background .22s, border-color .22s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 148px;
}
.prob-item:hover { background: var(--surface); }
.prob-item:hover .prob-viz { border-color: var(--border-2); }
.prob-item.wide { grid-column: 1 / -1; min-height: auto; }
.prob-viz {
  width: 100%;
  height: 44px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--teal-a04), var(--violet-a));
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .22s;
}
.prob-viz::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: prob-shine 5.5s ease-in-out infinite;
}
@keyframes prob-shine {
  0%, 100% { transform: translateX(-120%); opacity: 0; }
  35% { opacity: 1; }
  65% { transform: translateX(120%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .prob-viz::after { animation: none; }
}
.prob-viz--id       { background: linear-gradient(125deg, rgba(122,92,240,.18), rgba(122,92,240,.04) 60%, var(--teal-a04)); }
.prob-viz--pay      { background: linear-gradient(125deg, rgba(69,212,196,.12), rgba(122,92,240,.08)); }
.prob-viz--commerce { background: linear-gradient(125deg, rgba(61,135,245,.14), var(--teal-a04)); }
.prob-viz--law      { background: linear-gradient(125deg, rgba(232,112,32,.12), rgba(61,135,245,.06)); }
.prob-viz--treasury { background: linear-gradient(125deg, rgba(200,155,20,.13), var(--violet-a)); }
.prob-viz--scale    { background: linear-gradient(90deg, var(--teal-a08), rgba(122,92,240,.1), var(--rose-a)); min-height: 52px; }
.prob-n {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.prob-item h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.prob-item p  { font-size: 13px; color: var(--text-3); line-height: 1.65; margin: 0; }
@media (max-width: 740px) { .problem-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .problem-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   Shift visual divider
   ---------------------------------------------------------------- */
.shift-section { padding: 0; }
.shift-band {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 50%, var(--bg-alt) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 68px clamp(20px,4vw,32px);
  position: relative;
}
.shift-band::before {
  content: '';
  position: absolute;
  left: 50%; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--teal-a14), var(--violet-a), var(--teal-a14), transparent);
  transform: translateX(-50%);
}
.shift-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: center;
  margin-bottom: 30px;
  display: block;
}
.shift-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}
.shift-side {
  text-align: center;
  padding: 26px 20px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
}
.shift-side.to {
  border-color: var(--teal-a22);
  background: linear-gradient(145deg, var(--teal-a04), var(--surface));
  box-shadow: 0 0 50px var(--teal-a04), inset 0 1px 0 var(--teal-a08);
}
.shift-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.shift-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.18;
  margin: 0;
}
.shift-side p { font-size: 13px; color: var(--text-3); margin-top: 10px; }
.shift-arrow {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--teal);
  z-index: 2;
  box-shadow: 0 0 32px var(--teal-a08);
}
@media (max-width: 680px) {
  .shift-band::before { display: none; }
  .shift-grid { grid-template-columns: 1fr; gap: 14px; }
  .shift-arrow { margin: 0 auto; transform: rotate(90deg); }
}

/* ----------------------------------------------------------------
   Protocol concepts grid
   ---------------------------------------------------------------- */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 48px;
  box-shadow: 0 28px 72px rgba(0,0,0,.2);
}
.concept-card {
  background: var(--bg-alt);
  padding: 26px 22px;
  transition: background .22s;
}
.concept-card:hover { background: var(--surface); }
.concept-n {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.concept-card h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.concept-card p  { font-size: 13px; color: var(--text-3); line-height: 1.65; margin: 0; }
@media (max-width: 740px) { .concept-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .concept-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   Architecture / foundation
   ---------------------------------------------------------------- */
.foundation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 16px);
  margin-top: 32px;
}
#activity-log .activity-section-label {
  list-style: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 12px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
#activity-log .activity-section-label:first-child {
  margin-top: 0;
}
.foundation-summary--map {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .foundation-summary--map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .foundation-summary--map {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .foundation-summary--map .fs-card {
    padding: 18px 16px;
  }
}
.fs-num--pend { color: #E8A838 !important; }
.fs-num--sec { color: var(--teal) !important; }
.fs-sub--muted { color: var(--text-4) !important; margin-top: 6px; }
.fs-card--stat {
  background: linear-gradient(165deg, rgba(255,255,255,.03), transparent 55%), var(--surface);
}
.fs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  text-align: center;
  transition: border-color .22s, transform .22s var(--ease);
}
.fs-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.fs-num {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 300;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 7px;
}
.fs-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.45;
}
.team-note {
  margin: 26px auto 0;
  max-width: 720px;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, rgba(62,191,176,.05), transparent);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.68;
}
.team-note strong { color: var(--text); }

.arch-map-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  padding: clamp(20px, 4vw, 36px);
  border-radius: var(--r-2xl);
  border: 1px solid var(--border-2);
  background:
    radial-gradient(ellipse 90% 60% at 50% -8%, rgba(69,212,196,.11), transparent 52%),
    radial-gradient(ellipse 55% 45% at 92% 88%, rgba(122,92,240,.08), transparent 55%),
    radial-gradient(ellipse 40% 35% at 8% 75%, rgba(14,168,116,.05), transparent 50%),
    var(--surface);
  box-shadow:
    0 32px 80px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.arch-map-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(255,255,255,.03) 0%, transparent 38%, transparent 100%);
  z-index: 0;
}
.arch-map-panel > * {
  position: relative;
  z-index: 1;
}

.arch-map-panel--surface.arch-map-panel {
  border-color: rgba(255,255,255,0.1);
  box-shadow:
    0 28px 72px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -80px 120px rgba(62,207,192,.03);
}

.arch-map-shell {
  border-radius: var(--r-xl);
  padding: clamp(8px, 1.5vw, 14px);
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%);
}

.arch-map-shell .arch-canvas-wrap {
  margin-top: 0;
}
.arch-map-live-bar {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: min(760px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  background: linear-gradient(165deg, rgba(12,16,28,.92), rgba(6,8,16,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.arch-map-live-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 8px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.arch-map-live-stat--pend { border-color: rgba(232,168,56,.25); }
.arch-map-live-stat--sec { border-color: rgba(69,212,196,.22); }
.arch-map-live-n {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.arch-map-live-stat--pend .arch-map-live-n { color: #E8A838; }
.arch-map-live-stat--sec .arch-map-live-n { color: var(--teal); }
.arch-map-live-l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 8px;
}
.arch-map-live-of {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.06em;
  padding: 0 8px;
}
@media (max-width: 520px) {
  .arch-map-live-bar { flex-direction: column; align-items: stretch; }
  .arch-map-live-of { justify-content: center; }
}

.arch-canvas-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  min-height: min(480px, 85vw);
  justify-content: center;
  position: relative;
}
.arch-map-visual-meta {
  position: relative;
  z-index: 3;
  margin: 16px 16px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 38rem;
}

.arch-map-detail {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 420px;
  margin: 20px auto 0;
  padding: 18px 20px 20px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(69, 212, 196, 0.22);
  background: linear-gradient(165deg, rgba(12,16,32,.96), rgba(6,8,18,.98));
  box-shadow: 0 20px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: left;
}
.arch-map-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.arch-map-detail__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
  opacity: 0.85;
}
.arch-map-detail__dismiss {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,.04);
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.arch-map-detail__dismiss:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
}
.arch-map-detail__class {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}
.arch-map-detail__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.35;
}
.arch-map-detail__zir {
  font-size: 14px;
  color: var(--teal);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.arch-map-detail__mail {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
  word-break: break-word;
}
.arch-map-detail__mail[hidden] {
  display: none !important;
}
.arch-canvas-wrap::before {
  content: '';
  position: absolute;
  width: min(94%, 760px);
  aspect-ratio: 1;
  max-height: 92%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 58%, rgba(69,212,196,.04) 59%, rgba(69,212,196,.04) 60%, transparent 61%),
    radial-gradient(circle at center, transparent 72%, rgba(122,92,240,.03) 73%, rgba(122,92,240,.03) 74%, transparent 75%),
    radial-gradient(circle at center, rgba(69,212,196,.05) 0%, transparent 62%);
  z-index: 0;
  opacity: .9;
}
.arch-canvas-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  z-index: 2;
}
.arch-canvas-wrap--active #arch-canvas {
  animation: arch-glow 6s ease-in-out infinite;
}
@keyframes arch-glow {
  0%, 100% { box-shadow: 0 28px 72px rgba(0,0,0,.32), 0 0 0 1px var(--border), inset 0 1px 0 rgba(255,255,255,.05); }
  50% { box-shadow: 0 32px 88px rgba(69,212,196,.08), 0 0 60px rgba(122,92,240,.06), inset 0 1px 0 rgba(255,255,255,.06); }
}
@media (prefers-reduced-motion: reduce) {
  .arch-canvas-wrap--active #arch-canvas { animation: none; }
}
#arch-canvas {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  height: auto;
  touch-action: manipulation;
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 70% 60% at 45% 42%, rgba(69,212,196,.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 70% 65%, rgba(122,92,240,.07) 0%, transparent 50%),
    var(--surface);
  border: 1px solid var(--border-2);
  box-shadow:
    0 24px 64px rgba(0,0,0,.3),
    0 0 0 1px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.arch-map-tooltip {
  position: fixed;
  z-index: 96;
  max-width: min(280px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border-2);
  background: linear-gradient(165deg, rgba(15,18,36,.97), rgba(8,10,22,.98));
  box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  pointer-events: none;
  font-family: var(--font-mono);
  text-align: left;
}
.arch-map-tooltip__title {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 6px;
  line-height: 1.35;
}
.arch-map-tooltip__meta {
  font-size: 12px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}
.arch-map-panel .arch-caption {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.arch-caption {
  width: 100%;
  max-width: 800px;
  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;
}
.arch-caption > p {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  line-height: 1.65;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
.arch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  margin-top: 20px;
  padding: 4px 0 2px;
}
.arch-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--text-3);
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
}
.arch-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.arch-dot--sec {
  background: var(--teal);
  box-shadow: 0 0 0 2px rgba(69,212,196,.35);
}
.arch-dot--pend {
  background: #E8A838;
  box-shadow: 0 0 0 2px rgba(232,168,56,.35);
}
.arch-item--accent {
  color: var(--teal);
  border-color: rgba(69,212,196,.22);
  background: linear-gradient(180deg, rgba(69,212,196,.12), rgba(69,212,196,.03));
}
.fs-sub {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: none;
  color: var(--teal);
  line-height: 1.5;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

/* How it works: allocation table */
.alloc-table-wrap {
  border-radius: var(--r-xl);
  border: 1px solid var(--border-2);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 32%), var(--surface);
  box-shadow: 0 20px 56px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.alloc-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
.zir-alloc-panel .alloc-table,
.register-card .alloc-table {
  min-width: 0;
}
.alloc-table thead {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  background: rgba(255,255,255,.035);
}
.alloc-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--border);
}
.alloc-table th,
.alloc-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}
.alloc-table tbody tr:hover {
  background: rgba(69,212,196,.045);
}
.alloc-table .num {
  font-family: var(--font-mono);
  color: var(--teal);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.alloc-total-row td {
  background: linear-gradient(180deg, rgba(69,212,196,.09), rgba(69,212,196,.04));
  color: var(--text);
  border-bottom: none;
  font-weight: 500;
}
@media (max-width: 560px) {
  .alloc-table th,
  .alloc-table td { padding: 12px 14px; font-size: 13px; }
  .alloc-table { min-width: 480px; }
}

/* Field emergence continuum */
.field-emergence {
  margin-top: clamp(56px, 10vw, 96px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.field-emergence__title {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.field-emergence__lead {
  margin-bottom: 26px;
  max-width: 54ch;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.7;
}
.continuum-stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 45%), var(--surface);
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
}
.continuum-stack > div {
  transition: background .2s;
}
.continuum-stack > div:hover {
  background: rgba(255,255,255,.025);
}

.anchor-ledger {
  margin-top: 40px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px 22px 22px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-2);
  background: linear-gradient(165deg, rgba(69,212,196,.06), transparent 42%), var(--surface);
}
.anchor-ledger-head { margin-bottom: 18px; }
.anchor-ledger-title {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.anchor-ledger-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}
.anchor-ledger-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.anchor-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}
.anchor-ledger-row:first-child { border-top: none; }
.anchor-ledger-mail {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.anchor-ledger-class {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.anchor-ledger-zir {
  text-align: right;
  color: var(--text-2);
  font-size: 12px;
}
.anchor-ledger-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.anchor-ledger-badge--ok {
  color: var(--teal);
  border: 1px solid var(--teal-a22);
  background: var(--teal-a08);
}
.anchor-ledger-badge--wait {
  color: #E8A838;
  border: 1px solid rgba(232,168,56,.28);
  background: rgba(232,168,56,.1);
}
.anchor-ledger-empty {
  font-size: 13px;
  color: var(--text-3);
  margin: 16px 0 0;
  line-height: 1.65;
}
@media (max-width: 620px) {
  .anchor-ledger-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .anchor-ledger-zir { text-align: left; grid-column: 1 / -1; }
  .anchor-ledger-badge { justify-self: start; }
}

.econ-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 20px);
  margin-top: 36px;
}
.econ-story-card {
  padding: 22px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .22s, transform .22s var(--ease);
}
.econ-story-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.econ-story-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.econ-story-h {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.35;
}
.econ-story-p {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.68;
  margin: 0;
}
@media (max-width: 900px) {
  .econ-story { grid-template-columns: 1fr; }
}

.card--econ {
  border: 1px solid var(--border);
  transition: border-color .2s;
}
.card--econ:hover { border-color: var(--border-2); }
.card-econ-h {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

/* Formation continuum */
.continuum-wrap {
  margin-top: 64px;
}
.continuum-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 22px;
}
.continuum-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.cs-step {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  align-items: start;
  transition: background .18s;
}
.cs-step:last-child { border-bottom: none; }
.cs-step:hover { background: rgba(255,255,255,.015); }
.cs-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
  padding-top: 2px;
  font-weight: 500;
}
.cs-num.current { color: var(--teal); }
.cs-body strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.cs-body p { font-size: 13px; color: var(--text-3); line-height: 1.6; margin: 0; }
.cs-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-full);
  white-space: nowrap;
  align-self: start;
  margin-top: 2px;
}
.cs-badge.live { background: var(--teal-a08); color: var(--teal); border: 1px solid var(--teal-a22); }
.cs-badge.next { background: var(--surf-2); color: var(--text-3); border: 1px solid var(--border); }

/* ----------------------------------------------------------------
   Classes
   ---------------------------------------------------------------- */
.classes-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 20px;
}
.classes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 20px);
  align-items: stretch;
}
.class-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .26s, transform .22s var(--ease), box-shadow .26s;
  user-select: none;
}
.class-card--full {
  opacity: 0.52;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.12);
}
.class-card--full:hover { transform: none; box-shadow: none; }
.class-card:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,.18); }
.class-card.selected {
  border-color: var(--cls-color, var(--teal));
}
.class-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--cls-glow, var(--teal-a04)), transparent 55%);
  opacity: 0;
  transition: opacity .32s;
  pointer-events: none;
}
.class-card:hover::before,
.class-card.selected::before { opacity: 1; }
.class-numeral {
  position: absolute;
  top: 8px; right: 16px;
  font-family: var(--font-display);
  font-size: 90px;
  font-weight: 300;
  line-height: 1;
  color: var(--cls-color, var(--teal));
  opacity: .06;
  pointer-events: none;
  user-select: none;
}
.class-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  display: inline-block;
  margin-bottom: 14px;
  background: var(--cls-bg, var(--teal-a08));
  color: var(--cls-color, var(--teal));
  border: 1px solid var(--cls-border, var(--teal-a22));
}
.class-name { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--text); margin-bottom: 4px; }
.class-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--text-3); margin-bottom: 6px; }
.class-tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-4);
  margin: 0 0 14px;
  line-height: 1.35;
}
.class-zir  { font-family: var(--font-mono); font-size: 19px; font-weight: 500; color: var(--cls-color, var(--teal)); margin-bottom: 6px; }
.class-band {
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--font-mono);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.class-price {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  line-height: 1.55;
  margin-bottom: 14px;
}
.class-price-eyebrow {
  display: block;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 6px;
}
.class-price .js-class-price-now {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}
.class-price-tier {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 9.5px;
  color: var(--text-4);
  line-height: 1.55;
}
.class-price .js-class-price-next {
  color: inherit;
  display: block;
  margin-top: 0;
  font-size: inherit;
  line-height: inherit;
}
.class-desc { font-size: 13px; color: var(--text-3); line-height: 1.62; margin-bottom: 16px; }
.weight-row { display: flex; align-items: center; gap: 4px; }
.wd {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-2);
  flex-shrink: 0;
  transition: background .2s;
}
.wd.on { background: var(--cls-color, var(--teal)); }
.weight-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--text-3); margin-left: 6px; letter-spacing: 0.02em; }
@media (max-width: 940px) { .classes-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .classes-grid { grid-template-columns: 1fr; } }

/* Anchor classes: concentric strip */
.classes-visual-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 8px;
  padding: clamp(22px, 4vw, 32px) clamp(16px, 3vw, 24px) 30px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-2);
  background: linear-gradient(165deg, var(--surf-2) 0%, var(--bg) 45%, rgba(122,92,240,.04) 100%);
  overflow: hidden;
  box-sizing: border-box;
}
.cv-band-eyebrow {
  text-align: center;
  max-width: 40ch;
  margin: 0 auto 20px;
  padding: 0 8px;
  color: var(--text-3);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
  font-family: var(--font-mono);
  line-height: 1.5;
}
.classes-visual-inner {
  display: grid;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 2px;
  box-sizing: border-box;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  column-gap: clamp(8px, 1.8vw, 18px);
  row-gap: 0;
}
@media (max-width: 900px) {
  .classes-visual-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
    max-width: 520px;
  }
}
@media (max-width: 480px) {
  .classes-visual-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    max-width: 100%;
  }
}
.cv-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-width: 0;
  max-width: 110px;
  margin: 0 auto;
  text-align: center;
}
.cv-glyph {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--cv, var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  background: linear-gradient(145deg, rgba(255,255,255,.03), transparent);
  border: 1px solid color-mix(in srgb, var(--cv) 28%, var(--border-2));
  box-shadow: 0 10px 32px rgba(0,0,0,.2), 0 0 24px color-mix(in srgb, var(--cv) 14%, transparent);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.cv-node:hover .cv-glyph {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cv) 45%, var(--border-2));
}
.cv-glyph svg {
  width: 44px;
  height: 44px;
  display: block;
}
/* Per-class fill = secured seats in that band (admin confirmed), not a shared global value */
.cv-node-track {
  width: 100%;
  max-width: 56px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin: 0 auto;
  flex-shrink: 0;
  align-self: center;
}
.cv-node-fill {
  height: 100%;
  width: 0%;
  background: var(--cv, var(--teal));
  border-radius: 2px;
  transition: width 0.6s var(--ease);
  opacity: 0.9;
  display: block;
}
.cv-seats-slash {
  opacity: 0.4;
  margin: 0 0.1em;
  user-select: none;
}
.cv-node--secured .cv-glyph {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv) 32%, var(--border-2)), 0 10px 32px rgba(0, 0, 0, 0.2);
}
@supports not (color: color-mix(in srgb, red, red)) {
  .cv-node--secured .cv-glyph { box-shadow: 0 10px 32px rgba(0,0,0,.2); }
}
@supports not (color: color-mix(in srgb, red, red)) {
  .cv-glyph {
    border-color: var(--border-2);
    box-shadow: 0 10px 32px rgba(0,0,0,.2);
  }
}
.cv-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  color: var(--text-3);
  text-align: center;
  line-height: 1.45;
  max-width: 11em;
  width: 100%;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.cv-seats {
  font-size: 10px;
  font-weight: 600;
  color: var(--cv, var(--teal));
  font-family: var(--font-mono);
  letter-spacing: .04em;
  line-height: 1;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Formation journey
   ---------------------------------------------------------------- */
.journey {
  position: relative;
  max-width: 600px;
  margin: 48px auto 0;
  padding-left: 50px;
}
.journey::before {
  content: '';
  position: absolute;
  top: 22px; bottom: 22px; left: 19px;
  width: 1px;
  background: linear-gradient(to bottom, var(--teal), rgba(62,191,176,.08) 70%, transparent);
}
.j-step {
  position: relative;
  padding-bottom: 36px;
}
.j-step:last-child { padding-bottom: 0; }
.j-dot {
  position: absolute;
  left: -38px; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s, box-shadow .3s;
}
.j-dot.on { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-a08); }
.j-dot-core {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-2);
  transition: background .3s;
}
.j-dot.on .j-dot-core { background: var(--teal); }
.j-step h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.j-step p  { font-size: 13px; color: var(--text-3); line-height: 1.65; }

/* ----------------------------------------------------------------
   Emergence
   ---------------------------------------------------------------- */
.emergence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 20px);
  margin-top: 48px;
  align-items: stretch;
}
.emer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.emer-card:hover {
  border-color: var(--border-2);
  transform: translateY(-3px);
  box-shadow: 0 14px 48px rgba(0,0,0,.22);
}
.emer-viz {
  width: 100%;
  height: 88px;
  border-radius: var(--r);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, var(--surf-2) 0%, var(--bg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  transition: border-color .22s;
}
.emer-card:hover .emer-viz { border-color: var(--border-3); }
.emer-viz--resonance { background: linear-gradient(135deg, rgba(122,92,240,.1) 0%, var(--bg) 70%); }
.emer-viz--bond      { background: linear-gradient(135deg, rgba(129,140,248,.08) 0%, var(--bg) 70%); }
.emer-viz--cluster   { background: linear-gradient(135deg, rgba(69,212,196,.08) 0%, var(--bg) 70%); }
.emer-viz--keystone  { background: linear-gradient(135deg, rgba(200,155,20,.09) 0%, var(--bg) 70%); }
.emer-viz--align     { background: linear-gradient(135deg, rgba(69,212,196,.07) 0%, var(--bg) 70%); }
.emer-viz--chain     { background: linear-gradient(135deg, rgba(61,135,245,.08) 0%, var(--bg) 70%); }
.emer-svg {
  width: 100%;
  max-width: 220px;
  height: 72px;
  display: block;
}
.emer-viz--resonance .emer-ring--1 {
  animation: emer-core-pulse 2.6s ease-in-out infinite;
}
.emer-viz--resonance .emer-ring--2 {
  animation: emer-ring-fade 3.2s ease-in-out infinite;
}
.emer-viz--resonance .emer-ring--3 {
  animation: emer-ring-fade 3.2s ease-in-out infinite .5s;
}
@keyframes emer-core-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@keyframes emer-ring-fade {
  0%, 100% { opacity: .18; }
  50% { opacity: .42; }
}
.emer-viz--bond .emer-bond-line {
  stroke-dasharray: 8 6;
  animation: emer-dash 2.4s linear infinite;
}
@keyframes emer-dash {
  to { stroke-dashoffset: -28; }
}
.emer-viz--cluster .emer-svg {
  animation: emer-float 5s ease-in-out infinite;
}
@keyframes emer-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.emer-viz--keystone .emer-key-layer {
  animation: emer-key-pulse 2.8s ease-in-out infinite;
}
@keyframes emer-key-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: .95; }
}
.emer-viz--align .emer-curve {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: emer-draw 4s ease-in-out infinite;
}
@keyframes emer-draw {
  0% { stroke-dashoffset: 120; opacity: .4; }
  45% { stroke-dashoffset: 0; opacity: .85; }
  100% { stroke-dashoffset: -40; opacity: .5; }
}
.emer-viz--chain .emer-svg {
  animation: emer-chain-nudge 3.5s ease-in-out infinite;
}
@keyframes emer-chain-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .emer-viz--resonance .emer-ring--1,
  .emer-viz--resonance .emer-ring--2,
  .emer-viz--resonance .emer-ring--3,
  .emer-viz--bond .emer-bond-line,
  .emer-viz--cluster .emer-svg,
  .emer-viz--keystone .emer-key-layer,
  .emer-viz--align .emer-curve,
  .emer-viz--chain .emer-svg {
    animation: none;
  }
  .emer-viz--align .emer-curve { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .65; }
}
.emer-card h4 { font-family: var(--font-display); font-size: 19px; font-weight: 400; margin-bottom: 8px; }
.emer-card p  { font-size: 13px; color: var(--text-3); line-height: 1.65; margin: 0; }
@media (max-width: 740px) { .emergence-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .emergence-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   Token distribution bars
   ---------------------------------------------------------------- */
.distribution-layout { margin-top: 36px; }
.distribution-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(22px, 4vw, 34px);
  max-width: 700px;
  margin: 0 auto;
}
.dist-chart-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
  text-align: center;
}
.dist-chart-sub {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 26px;
  line-height: 1.58;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.dist-bars { display: flex; flex-direction: column; gap: 16px; }
.dist-bar  { --bar-color: var(--teal); }
.dist-bar__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.35;
}
.dist-bar__track {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surf-2);
  overflow: hidden;
  border: 1px solid var(--border);
}
.dist-bar__fill {
  height: 100%;
  width: 0;
  background: var(--bar-color, var(--teal));
  border-radius: var(--r-full);
  opacity: .88;
  transition: width 1.2s var(--ease);
}
.dist-bar__fill.animated { width: calc(var(--pct, 0) * 1%); }
.dist-bar__value {
  display: block;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.45;
}
.dist-bar--highlight {
  padding: 14px 16px;
  margin: 2px -10px;
  border-radius: var(--r-lg);
  border: 1px solid var(--teal-a22);
  background: linear-gradient(135deg, var(--teal-a04), transparent);
}
.badge-active {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--teal-a08);
  color: var(--teal);
  border: 1px solid var(--teal-a22);
  font-weight: 600;
}

/* Economy metrics grid */
.econ-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.econ-cell {
  background: var(--bg-alt);
  padding: 22px 18px;
  transition: background .2s;
}
.econ-cell:hover { background: var(--surface); }
.econ-n {
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--teal);
  display: block;
  margin-bottom: 5px;
  letter-spacing: .02em;
}
.econ-l { font-size: 11px; color: var(--text-3); line-height: 1.4; }
@media (max-width: 620px) { .econ-grid { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------
   Integration
   ---------------------------------------------------------------- */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 20px);
  margin-top: 48px;
  align-items: stretch;
}
.integ-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.integ-card:hover {
  border-color: var(--border-2);
  transform: translateY(-3px);
  box-shadow: 0 14px 48px rgba(0,0,0,.22);
}
.integ-icon {
  width: 40px; height: 40px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.integ-card h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.integ-card p  { font-size: 13px; color: var(--text-3); line-height: 1.65; margin: 0; }
@media (max-width: 740px) { .integration-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .integration-grid { grid-template-columns: 1fr; } }
.integration-split-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  margin: 44px 0 18px;
}
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
  align-items: stretch;
}
.usecase-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0;
  transition: border-color .22s, background .22s, box-shadow .22s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.usecase-card:hover {
  border-color: var(--border-2);
  background: var(--surface);
  box-shadow: 0 16px 48px rgba(0,0,0,.2);
}
.usecase-viz {
  display: block;
  width: 100%;
  height: 92px;
  background: linear-gradient(180deg, var(--surf-2), var(--bg));
  border-bottom: 1px solid var(--border);
}
.usecase-card h4 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 7px; padding: 16px 18px 0; }
.usecase-card p  { font-size: 13px; color: var(--text-3); line-height: 1.62; margin: 0; padding: 0 18px 18px; }
@media (max-width: 680px) { .usecase-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   What becomes possible (home use cases)
   ---------------------------------------------------------------- */
#possible.section {
  position: relative;
}
#possible.section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 52% at 50% 0%, rgba(62,207,192,.06), transparent 58%),
    radial-gradient(ellipse 60% 48% at 0% 70%, rgba(139,111,245,.045), transparent 55%);
  opacity: .9;
}
#possible.section > .wrap {
  position: relative;
  z-index: 1;
}

.possible-diagram {
  margin: -24px auto 22px;
  max-width: 980px;
}
.possible-diagram-svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .possible-diagram { margin: -18px auto 18px; }
}

.possible-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.4vw, 18px);
  align-items: stretch;
  margin-top: 12px;
}
/* Always stack for clarity; each panel is full width */
.possible-grid { max-width: min(1100px, 100%); margin-left: auto; margin-right: auto; }

.possible-card {
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(7, 9, 20, 0.52) 0%, rgba(12, 14, 34, 0.72) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  padding: clamp(18px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: border-color .22s, transform .22s var(--ease), box-shadow .22s, background .22s;
  position: relative;
  overflow: hidden;
}
.possible-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(ellipse 120% 80% at 20% 0%, rgba(62,207,192,.09), transparent 55%),
    radial-gradient(ellipse 120% 80% at 80% 100%, rgba(139,111,245,.08), transparent 55%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.022) 0,
      rgba(255,255,255,.022) 1px,
      transparent 1px,
      transparent 18px
    );
  opacity: .55;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 46%, transparent 85%);
}
.possible-card::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 58px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  opacity: .7;
  pointer-events: none;
}
.possible-card:hover {
  border-color: rgba(62, 207, 192, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 18px 52px rgba(0,0,0,.22);
}
@media (prefers-reduced-motion: reduce) {
  .possible-card { transition: border-color .2s, box-shadow .2s, background .2s; }
  .possible-card:hover { transform: none; }
}

.possible-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

/* Text-side visual anchor for the three live reads */
.possible-triad {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  margin: -6px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(7,9,16,.22);
}
.pt-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
}
.pt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(255,255,255,.03);
}
.pt-item--behavior .pt-dot { border-color: rgba(62,207,192,.26); background: rgba(62,207,192,.14); box-shadow: 0 0 0 3px rgba(62,207,192,.05); }
.pt-item--align .pt-dot    { border-color: rgba(77,148,247,.22); background: rgba(77,148,247,.12); box-shadow: 0 0 0 3px rgba(77,148,247,.04); }
.pt-item--route .pt-dot    { border-color: rgba(139,111,245,.20); background: rgba(139,111,245,.11); box-shadow: 0 0 0 3px rgba(139,111,245,.035); }
.pt-item--behavior .pt-k { color: rgba(62,207,192,.78); }
.pt-item--align .pt-k    { color: rgba(77,148,247,.72); }
.pt-item--route .pt-k    { color: rgba(139,111,245,.72); }

@media (prefers-reduced-motion: no-preference) {
  .pt-item--behavior .pt-dot { animation: pt-pulse 2.6s ease-in-out infinite; }
  .pt-item--align .pt-dot    { animation: pt-pulse 3.0s ease-in-out infinite; }
  .pt-item--route .pt-dot    { animation: pt-pulse 3.4s ease-in-out infinite; }
}
@keyframes pt-pulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-dot { animation: none !important; }
}
.possible-top-main {
  min-width: 0;
}
.possible-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.possible-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
}
.possible-ico {
  flex-shrink: 0;
  color: var(--text-3);
  opacity: .95;
  position: relative;
  z-index: 1;
}
.possible-card[data-possible="agents"] .possible-ico { color: var(--teal); }
.possible-card[data-possible="work"] .possible-ico { color: var(--gold); }
.possible-card[data-possible="systems"] .possible-ico { color: var(--blue); }

.possible-mini {
  position: relative;
  z-index: 1;
  margin: 6px 0 12px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(8,10,22,.42);
  overflow: hidden;
}
.possible-mini::before {
  content: '';
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(ellipse 80% 80% at 20% 20%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(ellipse 80% 80% at 80% 80%, rgba(62,207,192,.05), transparent 60%);
  pointer-events: none;
  opacity: .8;
}
.possible-mini-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.possible-mini-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.possible-mini-k--zira { color: rgba(62,207,192,.75); }
.possible-mini-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(62,207,192,.18), rgba(139,111,245,.14), rgba(255,255,255,.08));
  opacity: .85;
}
.possible-mini-nodes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}
.pmn {
  height: 8px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.pmn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity: .7;
}
.pmn-a { opacity: .55; }
.pmn-b { opacity: .7; }
.pmn-c { border-color: rgba(62,207,192,.22); background: rgba(62,207,192,.06); opacity: .95; }

.possible-viz {
  position: relative;
  z-index: 1;
  margin: 6px 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.085);
  background: linear-gradient(180deg, rgba(8,10,22,.55), rgba(7,9,16,.32));
  overflow: hidden;
}
.possible-viz {
  box-shadow:
    0 18px 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.possible-card .possible-viz { margin-top: 10px; }
.possible-viz-svg { transform: translateZ(0); }
.possible-viz::before {
  content: '';
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(ellipse 70% 60% at 12% 10%, rgba(62,207,192,.10), transparent 62%),
    radial-gradient(ellipse 70% 60% at 88% 90%, rgba(139,111,245,.08), transparent 62%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 16px
    );
  opacity: .65;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.5) 55%, transparent 92%);
}
.possible-viz-svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}
.possible-viz-svg { aspect-ratio: 42 / 13; }
@supports not (aspect-ratio: 1 / 1) {
  .possible-viz-svg { height: auto; }
}

/* Full panel layout: text left, diagram right (desktop) */
.possible-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  position: relative;
  z-index: 1;
}
@media (min-width: 920px) {
  .possible-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }
}
.possible-text,
.possible-art { min-width: 0; }
.possible-art .possible-viz { margin: 0; }

/* Bigger, clearer diagram block */
.possible-viz { border-radius: 18px; }
.possible-viz-svg { aspect-ratio: 42 / 16; }
.possible-viz-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 1;
}

.possible-symbols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  padding: 0 12px 12px;
  position: relative;
  z-index: 1;
}
.possible-viz-legend + .possible-symbols { padding-top: 2px; }
.possible-symbols { opacity: .92; }
.ps-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-4);
}
.ps-item::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ps-item--node::before { background: rgba(255,255,255,.06); }
.ps-item--ring::before {
  border-radius: 50%;
  border-color: rgba(62,207,192,.22);
  background: radial-gradient(circle at 45% 40%, rgba(62,207,192,.10), rgba(7,9,16,.35));
}
.ps-item--stream::before {
  border-radius: 999px;
  width: 18px;
  height: 10px;
  border-color: rgba(139,111,245,.16);
  background: linear-gradient(90deg, rgba(62,207,192,.20), rgba(139,111,245,.16));
}

.pv-labels { pointer-events: none; }
.pv-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  fill: rgba(255,255,255,.55);
}
.pv-label { paint-order: stroke fill; stroke: rgba(5,8,18,.65); stroke-width: 3px; stroke-linejoin: round; }
.pv-label--muted { fill: rgba(255,255,255,.38); }
.pv-label--tiny  { font-size: 9px; letter-spacing: 0.12em; fill: rgba(255,255,255,.32); }
.pv-k, .pv-mid {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.pv-k--zira { color: rgba(62,207,192,.78); }

.pv-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pv-path--base {
  stroke: rgba(255,255,255,.10);
  stroke-width: 2;
}
.pv-path--flow {
  stroke: rgba(62,207,192,.55);
  stroke-width: 2.5;
  stroke-dasharray: 9 9;
  animation: pv-flow 2.6s linear infinite;
  opacity: .9;
}
.pv-path--flow2 {
  stroke: rgba(139,111,245,.45);
  animation-duration: 3.2s;
  opacity: .75;
}

.pv-node {
  stroke: rgba(255,255,255,.14);
  stroke-width: 1.2;
  fill: rgba(255,255,255,.06);
}
.pv-node--a { opacity: .65; }
.pv-node--b { fill: rgba(62,207,192,.12); stroke: rgba(62,207,192,.26); opacity: .95; animation: pv-pulse 1.8s ease-in-out infinite; }
.pv-node--c { fill: rgba(139,111,245,.10); stroke: rgba(139,111,245,.22); opacity: .88; animation: pv-pulse 2.2s ease-in-out infinite; }
.pv-dot {
  fill: rgba(255,255,255,.22);
  opacity: .45;
  animation: pv-dot 2.4s ease-in-out infinite;
}
.pv-dot--alt { opacity: .32; animation-duration: 3.1s; }

.pv-bg .pv-globe,
.pv-globe {
  stroke: rgba(255,255,255,.07);
  stroke-width: 1;
  fill: none;
  opacity: .7;
}
.pv-gridline {
  stroke: rgba(255,255,255,.06);
  stroke-width: 1;
  opacity: .65;
}

.pv-spark {
  stroke: rgba(62,207,192,.22);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 18;
  animation: pv-spark 2.8s linear infinite;
  opacity: .65;
}
.pv-spark--b { animation-duration: 3.4s; opacity: .55; }
.pv-spark--c { animation-duration: 3.0s; opacity: .5; stroke: rgba(139,111,245,.18); }

.pv-stream {
  stroke: rgba(255,255,255,.09);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 8;
  opacity: .75;
}
.pv-stream-dot {
  fill: rgba(62,207,192,.55);
  filter: none;
  animation: pv-stream-dot 2.4s linear infinite;
}

.pv-link {
  fill: none;
  stroke: rgba(62,207,192,.14);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
  opacity: .75;
  animation: pv-link 3.2s linear infinite;
}
.pv-link--alt {
  stroke: rgba(139,111,245,.12);
  animation-duration: 3.8s;
  opacity: .65;
}
.pv-sys--c { opacity: .55; }
.pv-sys--d { opacity: .55; }

.pv-box {
  stroke-width: 1.1;
  fill: rgba(8,10,22,.35);
  stroke: rgba(255,255,255,.10);
}
.pv-box--b { stroke: rgba(62,207,192,.18); fill: rgba(62,207,192,.05); }
.pv-ring {
  stroke: rgba(62,207,192,.18);
  stroke-width: 1.2;
  fill: rgba(8,10,22,.15);
}
.pv-ring--2 { stroke: rgba(139,111,245,.16); }
.pv-sys {
  stroke-width: 1.1;
  fill: rgba(255,255,255,.03);
  stroke: rgba(255,255,255,.10);
}
.pv-sys--a { opacity: .65; }
.pv-sys--b { opacity: .65; }

@keyframes pv-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -36; }
}
@keyframes pv-pulse {
  0%, 100% { transform: scale(1); opacity: .92; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes pv-dot {
  0%, 100% { opacity: .25; }
  50%      { opacity: .62; }
}
@keyframes pv-spark {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -44; }
}
@keyframes pv-stream-dot {
  0%   { transform: translateX(0); opacity: .7; }
  60%  { opacity: 1; }
  100% { transform: translateX(320px); opacity: .72; }
}
@keyframes pv-link {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -26; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-path--flow,
  .pv-node--b,
  .pv-node--c,
  .pv-dot,
  .pv-spark,
  .pv-stream-dot,
  .pv-link {
    animation: none;
  }
}

.possible-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 1;
}
@media (min-width: 520px) {
  .possible-compare { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .possible-compare::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 56px;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.08), transparent);
    opacity: .75;
    pointer-events: none;
  }
  .possible-compare::after {
    content: '';
    position: absolute;
    left: calc(50% - 11px);
    bottom: 66px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.1);
    background: radial-gradient(circle at 40% 35%, rgba(62,207,192,.14), rgba(7,9,16,.65));
    box-shadow: 0 0 0 3px rgba(62,207,192,.05);
    pointer-events: none;
  }
}
.possible-col {
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(8, 10, 22, 0.55);
  position: relative;
}
.possible-col::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  opacity: .55;
  pointer-events: none;
}
.possible-col--zira {
  border-color: rgba(62, 207, 192, 0.18);
  background: linear-gradient(180deg, rgba(62,207,192,.065), rgba(8, 10, 22, 0.48));
}
.possible-card:hover .possible-col--zira {
  border-color: rgba(62, 207, 192, 0.26);
  box-shadow: 0 0 0 3px rgba(62,207,192,.07);
}
.possible-card:hover .pv-path--flow { opacity: 1; }
.possible-card:hover .pv-node--b { opacity: 1; }
.possible-card:hover .pv-stream-dot { opacity: 1; }
.possible-card:hover .pv-link { opacity: .9; }
.possible-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 10px;
}
.possible-list {
  margin: 0;
  padding-left: 1.05rem;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}
.possible-list li { margin-bottom: 8px; }
.possible-list li:last-child { margin-bottom: 0; }

.possible-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  position: relative;
  z-index: 1;
}
.possible-result-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.possible-result-v {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

.possible-time {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}
.possible-time-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
}
.possible-time-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  min-width: 48px;
}
.possible-time-v {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
}

.possible-core {
  margin-top: clamp(22px, 4vw, 34px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center;
  display: grid;
  justify-items: center;
}
.possible-core-line {
  font-size: clamp(16px, 1.55vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.possible-core-sub {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
}

.possible-core-line,
.possible-core-sub {
  display: block;
  width: 100%;
}
.possible-core {
  position: relative;
}
.possible-core::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  width: min(720px, 92%);
  height: auto;
  bottom: 0;
  border-radius: var(--r-2xl);
  border: 1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(62,207,192,.09), transparent 60%),
    linear-gradient(180deg, rgba(7,9,16,.38), rgba(7,9,16,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  pointer-events: none;
  z-index: 0;
}
.possible-core-line,
.possible-core-sub {
  position: relative;
  z-index: 1;
}
.possible-core-line {
  padding: 18px 18px 0;
  max-width: 64ch;
}
.possible-core-sub {
  padding: 0 18px 18px;
  max-width: 72ch;
}

/* Social strip */
.social-section { padding-bottom: clamp(48px, 8vw, 72px); }
.social-band {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-2);
  padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(122,92,240,.07) 0%, var(--surface) 40%, rgba(69,212,196,.06) 100%);
}
.social-band::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, var(--teal-a14), transparent 40%, var(--violet-a) 70%, transparent);
  opacity: .5;
  animation: social-hue 14s ease infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes social-hue {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .social-band::before { animation: none; }
}
.social-band-inner { position: relative; z-index: 1; }
.social-band h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
}
.social-band .t-lead { margin: 0 auto 28px; max-width: 460px; }
.social-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-2);
  background: rgba(7,9,16,.55);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-2);
  transition: border-color .2s, color .2s, transform .2s var(--ease);
}
.social-chip:hover {
  border-color: var(--teal-a22);
  color: var(--text);
  transform: translateY(-2px);
}
.social-chip svg { flex-shrink: 0; opacity: .85; }

/* ----------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-top: 48px; }
.faq-item { background: var(--bg); }
.faq-item.open { background: var(--surface); }
.faq-q {
  width: 100%;
  text-align: left;
  padding: 22px 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color .18s;
}
.faq-q:hover { color: var(--text); }
.faq-q:hover .faq-icon { border-color: var(--border-2); }
.faq-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  transition: transform .3s var(--ease), border-color .2s, color .2s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--teal); border-color: var(--teal-a22); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease), padding .3s;
  padding: 0 26px;
}
.faq-item.open .faq-a { max-height: 2400px; padding-bottom: 22px; }
.faq-a p { font-size: 14px; color: var(--text-2); line-height: 1.75; margin: 0; }
.faq-a p + p { margin-top: 12px; }
.faq-a p { overflow-wrap: anywhere; }

/* ----------------------------------------------------------------
   Roadmap (path to live field)
   ---------------------------------------------------------------- */
.roadmap-band {
  margin-top: 56px;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(62,191,176,.04), var(--surface) 42%);
}
.roadmap-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.roadmap-lead {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.72;
  max-width: 640px;
  margin-bottom: 28px;
}
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 2vw, 18px);
}
.roadmap-step {
  padding: 20px 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  transition: border-color .22s, transform .22s var(--ease);
  min-height: 140px;
}
.roadmap-step:hover { border-color: var(--border-2); transform: translateY(-2px); }
.roadmap-step--now {
  border-color: var(--teal-a22);
  background: linear-gradient(145deg, var(--teal-a04), var(--bg-alt));
}
.rs-phase {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.roadmap-step--now .rs-phase { color: var(--teal); }
.rs-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.2;
}
.rs-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.62;
  margin: 0;
}

/* ----------------------------------------------------------------
   Register / form
   ---------------------------------------------------------------- */
.register-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  padding: clamp(28px, 5vw, 44px) clamp(22px, 5vw, 42px);
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.register-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal-a22), transparent);
}
.class-selector {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 7px;
  margin-bottom: 20px;
}
.cls-btn {
  padding: 12px 4px;
  background: var(--surf-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-align: center;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.cls-btn:disabled,
.cls-btn.cls-btn--full {
  opacity: 0.48;
  cursor: not-allowed;
}
.cls-btn:hover { border-color: var(--border-2); background: var(--surf-3); }
.cls-btn.sel { border-color: var(--cls-color, var(--teal)); background: var(--cls-bg, var(--teal-a04)); }
.cls-btn:disabled.sel,
.cls-btn--full.sel { border-color: var(--border); background: var(--surf-2); }
.cls-btn-n {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  display: block;
  margin-bottom: 3px;
  color: var(--text-2);
  transition: color .18s;
}
.cls-btn.sel .cls-btn-n { color: var(--cls-color, var(--teal)); }
.cls-btn-name {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
}
@media (max-width: 480px) { .class-selector { grid-template-columns: repeat(3,1fr); } }

.class-detail-panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
  display: none;
  animation: fadeIn .24s var(--ease);
}
.class-detail-panel.show { display: block; }
.cdp-live {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.35s ease;
}
.cdp-live.cdp-live--flash {
  animation: cdp-live-edge 0.55s ease-out;
}
@keyframes cdp-live-edge {
  0% { border-bottom-color: rgba(62, 191, 176, 0.45); }
  100% { border-bottom-color: var(--border); }
}
.cdp-impact {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.35;
}
.cdp-impact strong { color: var(--teal); font-weight: 600; }

.cdp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.cdp-name   { font-family: var(--font-display); font-size: 21px; font-weight: 400; color: var(--text); }
.cdp-cost-wrap { text-align: right; }
.cdp-usdt   { font-family: var(--font-mono); font-size: 19px; font-weight: 500; display: block; }
.cdp-usdt-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.cdp-body   { font-size: 13px; color: var(--text-3); line-height: 1.65; padding-top: 4px; }

.form-field { margin-bottom: 14px; }
.form-field input[type="number"] {
  width: 100%;
  max-width: 120px;
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
}
.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
  font-weight: 500;
}
.form-field input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
  -webkit-appearance: none;
}
.form-field input::placeholder { color: var(--text-4); }
.form-field input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-a08);
}
.form-submit {
  width: 100%;
  padding: 15px;
  background: var(--teal);
  color: #060810;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s;
  margin-top: 6px;
  min-height: 50px;
}
.form-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 36px rgba(62,191,176,.24); }
.form-submit:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.form-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
  margin-top: 14px;
  line-height: 1.7;
}

.confirm-state { display: none; text-align: center; animation: fadeIn .32s var(--ease); }
.confirm-state.show { display: block; }
.confirm-check {
  width: 54px; height: 54px;
  background: var(--teal-a08);
  border: 1px solid var(--teal-a22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 22px;
  color: var(--teal);
}
.confirm-code-box {
  background: var(--bg-alt);
  border: 1px solid var(--teal-a14);
  border-radius: var(--r);
  padding: 14px 18px;
  margin: 18px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .04em;
  line-height: 1.7;
}
.confirm-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 8px;
}
.confirm-lead {
  font-size: 14px;
  color: var(--text-2);
  max-width: 460px;
  margin: 0 auto 12px;
}
.confirm-code-box--solo {
  text-align: left;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
/* Post-submit JSON actions: no flex/gap/center bar. Flows with .confirm-state text-align */
.confirm-export-actions {
  margin-top: 0;
}
.confirm-export-actions .btn + .btn {
  margin-left: 8px;
}
@media (max-width: 480px) {
  .confirm-export-actions .btn {
    display: block;
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .confirm-export-actions .btn + .btn {
    margin-left: 0;
    margin-top: 8px;
  }
}

.confirm-k {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.confirm-alloc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.confirm-alloc-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.confirm-alloc-list li:last-of-type {
  border-bottom: none;
}
.confirm-lbl {
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: .04em;
}
.confirm-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding-top: 4px;
}
.confirm-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(232, 168, 56, 0.12);
  border: 1px solid rgba(232, 168, 56, 0.35);
  color: #e8b44a;
  font-size: 12px;
  font-weight: 600;
}
.confirm-email-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.65;
  font-family: var(--font-body);
  letter-spacing: 0;
}

/* Risk boxes */
.risk-block {
  max-width: 620px;
  margin: 44px auto 0;
}
.risk-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
  font-weight: 500;
}
.risk-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.risk-item:first-of-type { border-top: 1px solid var(--border); }
.risk-item strong { font-size: 13px; color: var(--text); display: block; margin-bottom: 4px; }
.risk-item p { font-size: 12px; color: var(--text-3); margin: 0; line-height: 1.65; }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 34px;
}
.footer-top {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 60px;
  margin-bottom: 48px;
}
.footer-logo-link {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  line-height: 1;
}
.footer-logo-link--lockup {
  gap: 0;
}
.footer-logo-link--lockup img {
  display: block;
  width: auto;
  max-width: 100%;
}
.footer-logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(69, 212, 196, 0.1), rgba(122, 92, 240, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  filter: drop-shadow(0 2px 8px rgba(69, 212, 196, 0.18));
}
.footer-logo-mark img,
.footer-logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9px;
}
.footer-tagline { font-size: 13px; color: var(--text-3); line-height: 1.65; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 7px; }
.social-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  transition: background .18s, color .18s, border-color .18s;
}
.social-btn:hover { background: var(--surf-2); color: var(--text-2); border-color: var(--border-2); }
.footer-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: 13px; color: var(--text-3); transition: color .15s; }
.footer-col a:hover { color: var(--text-2); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.footer-copy { font-size: 12px; color: var(--text-3); }
.footer-disc { font-size: 11px; color: var(--text-4); max-width: 520px; line-height: 1.58; }
@media (max-width: 780px) {
  .footer-top  { grid-template-columns: 1fr; gap: 28px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------
   Docs layout
   ---------------------------------------------------------------- */
:root {
  /* Height of sticky quick-nav under main nav (single row); used for sidebar sticky math */
  --docs-meta-offset: 44px;
}
body:has(.docs-meta-bar) {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}
.docs-meta-bar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding-left: max(0px, env(safe-area-inset-left, 0px));
  padding-right: max(0px, env(safe-area-inset-right, 0px));
  position: sticky;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 44px;
}
.docs-meta-bar::-webkit-scrollbar {
  display: none;
}
.dmt-link {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
}
.dmt-link:hover {
  color: var(--text-2);
  background: var(--surface);
}
.dmt-link.cur {
  color: var(--teal);
}
@media (max-width: 640px) {
  .dmt-link {
    font-size: 10px;
    padding: 10px 11px;
    letter-spacing: 0.03em;
    min-height: 44px;
  }
}
@media (max-width: 380px) {
  .dmt-link {
    font-size: 9px;
    padding: 10px 9px;
  }
}
.docs-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  max-width: var(--mw);
  margin: 0 auto;
  min-height: 100vh;
  padding-top: var(--nav-h);
  width: 100%;
}
.docs-sidebar,
.ref-sidebar {
  border-right: 1px solid var(--border);
  padding: 32px 0;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  max-height: calc(100vh - var(--nav-h) - 48px);
  height: auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sb-group { padding: 0 14px 20px; }
.sb-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 4px;
  display: block;
}
.sb-links { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.sb-links a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text-3);
  transition: all .15s;
}
.sb-links a:hover  { background: var(--surface); color: var(--text-2); }
.sb-links a.active { background: var(--teal-a08); color: var(--teal); }
.docs-body {
  padding: 40px 52px 96px;
  max-width: 730px;
}
.docs-body,
.docs-body * {
  max-width: 100%;
}
.docs-body svg,
.docs-body img,
.docs-body canvas,
.docs-body video {
  height: auto;
}

/* Reference quick start cards (replace inline styles) */
.ref-start-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.ref-start-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 560px) {
  .ref-start-row { grid-template-columns: 1fr; }
}
.ref-start-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 14px;
  text-decoration: none;
  transition: border-color .2s, transform .2s var(--ease);
}
.ref-start-card:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
}
.ref-start-k {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ref-start-t {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.ref-start-p {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.55;
}
.docs-body section[id],
.docs-body h2[id],
.docs-body h3[id] {
  scroll-margin-top: calc(
    var(--nav-h) + env(safe-area-inset-top, 0px) + var(--docs-meta-offset) + 16px
  );
}
.docs-body h1 { font-family: var(--font-display); font-size: 42px; font-weight: 400; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 16px; }
.docs-body h2 { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1.12; margin: 52px 0 14px; padding-top: 52px; border-top: 1px solid var(--border); }
.docs-body h2:first-of-type { margin-top: 20px; border-top: none; padding-top: 0; }
.docs-body h3 { font-size: 16px; font-weight: 600; margin: 28px 0 10px; color: var(--text); }
.docs-body p  { font-size: 15px; color: var(--text-2); margin-bottom: 16px; line-height: 1.8; text-align: justify; text-wrap: pretty; hyphens: auto; }
.docs-body ul, .docs-body ol { padding-left: 20px; color: var(--text-2); margin-bottom: 18px; }
.docs-body li { font-size: 15px; margin-bottom: 8px; line-height: 1.7; }
.docs-body strong { color: var(--text); }
.docs-body code {
  font-family: var(--font-mono);
  font-size: .82em;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--teal);
}
.docs-tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin: 20px 0 30px;
  overflow-x: auto;
}
.docs-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.docs-tbl th {
  text-align: left;
  padding: 10px 16px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.docs-tbl td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
  line-height: 1.6;
}
.docs-tbl tr:last-child td { border-bottom: none; }
.docs-tbl td:first-child { color: var(--text); font-weight: 600; }
.docs-tbl .mono { font-family: var(--font-mono); color: var(--teal); }
@media (max-width: 800px) {
  .docs-shell {
    grid-template-columns: 1fr;
  }
  .docs-sidebar,
  .ref-sidebar {
    display: none;
  }
  .docs-body {
    padding: 26px max(16px, env(safe-area-inset-left)) 80px max(16px, env(safe-area-inset-right));
    max-width: 100%;
  }
  .docs-body { overflow-wrap: anywhere; word-break: break-word; }
  .docs-body p { text-align: left; hyphens: auto; }

  /* Mobile reference layout refinements */
  .docs-shell { min-height: auto; }
  .docs-body {
    padding-top: calc(var(--nav-h) + 18px);
    padding-bottom: 72px;
  }
  .docs-body h1 {
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.1;
    margin-bottom: 14px;
  }
  .docs-body h2 {
    font-size: clamp(20px, 5.2vw, 24px);
    margin: 38px 0 12px;
    padding-top: 38px;
  }
  .docs-body h3 { font-size: 15px; margin: 22px 0 10px; }
  .docs-body p,
  .docs-body li { font-size: 14.5px; line-height: 1.75; }
  .docs-body ul,
  .docs-body ol { padding-left: 18px; }
  .docs-body blockquote.callout {
    margin-top: 14px !important;
    padding: 14px 16px;
  }
  .docs-body .docs-badge { margin: 0 8px 8px 0; }
  .docs-tbl { min-width: 520px; }
}

/* Mobile "On this page" navigation (Reference) */
.docs-mobile-toc {
  display: none;
}
@media (max-width: 800px) {
  .docs-mobile-toc {
    display: block;
    position: sticky;
    top: var(--nav-h);
    z-index: 120;
    background: rgba(5,6,18,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
  }
  .docs-mobile-toc__btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    min-height: 44px;
  }
  .docs-mobile-toc__k {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-4);
  }
  .docs-mobile-toc__v {
    font-size: 13px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .docs-mobile-toc__chev {
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,.35);
    border-bottom: 2px solid rgba(255,255,255,.35);
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
  }
  .docs-mobile-toc__btn[aria-expanded="true"] .docs-mobile-toc__chev {
    transform: rotate(-135deg);
  }
  .docs-mobile-toc__panel {
    padding: 10px 0 14px;
    max-height: min(70vh, 520px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .docs-mobile-toc__panel .sb-group { padding: 0 16px 14px; }
  .docs-mobile-toc__panel .sb-label { font-size: 9px; padding: 10px 4px 8px; }
  .docs-mobile-toc__panel .sb-links a {
    padding: 10px 10px;
    border-radius: 10px;
  }
  body.toc-open { overflow: hidden; }
  body.toc-open { overflow-x: hidden !important; overflow-y: hidden !important; }
}

/* Extra-tight mobile: make reference tables fit screen without sideways scroll */
@media (max-width: 560px) {
  .docs-tbl-wrap {
    margin-left: max(-16px, calc(env(safe-area-inset-left) * -1));
    margin-right: max(-16px, calc(env(safe-area-inset-right) * -1));
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .docs-tbl {
    min-width: 0;
    table-layout: fixed;
    font-size: 12.5px;
  }
  .docs-tbl th,
  .docs-tbl td {
    padding: 10px 12px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .docs-tbl th { font-size: 9px; }
}

.ref-summary-box {
  background: var(--surf-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 18px 0 40px;
}
.ref-summary-kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  text-transform: uppercase;
}
.ref-summary-box ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 400;
  padding: 10px 18px;
  background: var(--teal);
  color: #050810;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}
.skip-link:focus {
  left: 16px;
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(62, 207, 192, 0.22);
  background: rgba(62, 207, 192, 0.08);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.hero-nav-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 18px;
}
.hero-nav-strip a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 2px;
}
.hero-nav-strip a:hover {
  color: var(--text-2);
  border-bottom-color: rgba(62, 207, 192, 0.35);
}

.zf-legal {
  max-width: min(900px, 92vw);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) clamp(20px, 4vw, 32px) 80px;
}
.zf-legal h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.zf-legal .zf-legal__sub {
  color: var(--text-3);
  margin-bottom: 40px;
  font-size: 14px;
}
.zf-legal section {
  margin-bottom: 48px;
}
.zf-legal h2 {
  font-size: 1.2rem;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.zf-legal p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
  margin-bottom: 12px;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
.zf-legal .zf-legal__jump {
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 28px 0 28px;
  color: var(--text-3);
}
.zf-legal .zf-legal__jump a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.10); }
.zf-legal .zf-legal__jump a:hover { border-bottom-color: rgba(62,207,192,.35); }
.zf-legal .zf-legal__back {
  margin-top: 48px;
  font-size: 13px;
  color: var(--text-4);
}
.zf-legal .zf-legal__back a { color: var(--text-3); text-decoration: none; }
.zf-legal .zf-legal__back a:hover { color: var(--text-2); }

/* Inline docs callout */
.docs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-right: 8px;
  vertical-align: middle;
}
.db-teal   { background: var(--teal-a08);  color: var(--teal);   border: 1px solid var(--teal-a22); }
.db-gold   { background: var(--gold-a);    color: var(--gold);   border: 1px solid rgba(200,155,20,.22); }
.db-blue   { background: var(--blue-a);    color: var(--blue);   border: 1px solid rgba(61,135,245,.2); }
.db-violet { background: var(--violet-a);  color: var(--violet); border: 1px solid rgba(122,92,240,.2); }
.db-orange { background: var(--orange-a);  color: var(--orange); border: 1px solid rgba(232,112,32,.2); }
.db-green  { background: var(--green-a);   color: var(--green);  border: 1px solid rgba(14,168,116,.2); }
.db-slate  { background: var(--slate-a);   color: var(--slate);  border: 1px solid rgba(134,154,184,.2); }

/* Interests admin */
.admin-wrap {
  max-width: 900px;
  margin: calc(var(--nav-h) + 40px) auto 80px;
  padding: 0 clamp(20px,4vw,32px);
}
.admin-header { margin-bottom: 32px; }
.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 22px;
}
.filter-btn {
  padding: 7px 16px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s;
}
.filter-btn:hover { border-color: var(--border-2); color: var(--text-2); }
.filter-btn.active { background: var(--teal-a08); color: var(--teal); border-color: var(--teal-a22); }
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  overflow-x: auto;
}
.table-wrap td.td-email,
.table-wrap td.td-msg-mail {
  /* Interests page: ensure full mailbox is visible (no truncation). */
  white-space: normal !important;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: anywhere;
}
.sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 600px;
}
.sub-table th {
  text-align: left;
  padding: 11px 18px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sub-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
}
.sub-table tr:last-child td { border-bottom: none; }
.sub-table tr:hover td { background: rgba(255,255,255,.018); }
.sub-table .cls-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-weight: 500;
  white-space: nowrap;
}
.sub-table .ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.admin-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  text-align: center;
}
.admin-stat-n {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 400;
  color: var(--teal);
  display: block;
  margin-bottom: 4px;
}
.admin-stat-l { font-size: 11px; color: var(--text-3); }
@media (max-width: 640px) { .admin-stat-grid { grid-template-columns: 1fr 1fr; } }
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ----------------------------------------------------------------
   Scroll reveal
   ---------------------------------------------------------------- */
.reveal {
  /* Default (no-JS / JS-failed): content must remain visible */
  opacity: 1;
  transform: none;
  transition: opacity .72s var(--ease), transform .72s var(--ease);
}
.reveal.d1 { transition-delay: 80ms; }
.reveal.d2 { transition-delay: 155ms; }
.reveal.d3 { transition-delay: 230ms; }
.reveal.d4 { transition-delay: 305ms; }
.reveal.d5 { transition-delay: 380ms; }
.reveal.d6 { transition-delay: 455ms; }
.reveal.d7 { transition-delay: 530ms; }
/* Keep content visible even when JS runs (no “blank page below hero”). */
.js-ready .reveal { opacity: 1; transform: none; }
.js-ready .reveal.visible { opacity: 1; transform: none; }

/* ----------------------------------------------------------------
   Keyframes
   ---------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------
   Utilities
   ---------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }

/* ----------------------------------------------------------------
   Mobile
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .sec { padding: 54px 0; }
  .hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 28px); padding-left: clamp(16px, 5vw, 24px); padding-right: clamp(16px, 5vw, 24px); padding-bottom: 56px; min-height: auto; }
  .hero-inner { border-left: none; padding-left: 0; padding-right: 0; max-width: 100%; }
  .hero-thesis { font-size: clamp(19px, 5.4vw, 28px); max-width: none; }
  .hero-stats  { flex-wrap: wrap; max-width: 100%; border-radius: var(--r-lg); }
  .hstat       { min-width: 47%; padding: 13px 12px; }
  .hero-progress, .formation-block { max-width: 100%; }
  .formation-meta { gap: 12px; }
  .fm-cluster { gap: 8px 12px; }
  .register-card { padding: 24px 18px; }
  .btn   { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .cd-num { min-width: 54px; font-size: 22px; padding: 8px 2px; }
  .dist-bar__label { font-size: 12px; }
  .distribution-chart { padding: 20px 16px; }
  .foundation-summary { grid-template-columns: 1fr; }
  .fs-card { padding: 18px; }
}

/* ----------------------------------------------------------------
   system.html (institutional brief)
   ---------------------------------------------------------------- */
.page {
  padding: calc(var(--nav-h) + 28px) 0 80px;
}
.page-hero {
  padding: 18px 0 34px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse 90% 60% at 20% 0%, rgba(62,207,192,.08), transparent 55%),
    radial-gradient(ellipse 70% 55% at 90% 10%, rgba(139,111,245,.08), transparent 55%);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 12px 0 14px;
}
.page-lead {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.85;
  max-width: 70ch;
  text-align: justify;
  text-wrap: pretty;
}
.page-lead a { color: var(--text); }

.section-failures {
  padding: 56px 0 10px;
}
.failures-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 18px;
}
@media (min-width: 900px) {
  .failures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.failure-card {
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(15, 18, 48, 0.72);
  box-shadow: var(--card-inset);
}
.failure-card--wide {
  grid-column: 1 / -1;
}
.failure-svg {
  width: 100%;
  max-width: 120px;
  height: auto;
  margin-bottom: 12px;
  opacity: 0.95;
}
.failure-card h4 {
  font-size: 15px;
  margin: 0 0 10px;
}
.failure-card p {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.75;
}
.section-callout {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid rgba(62,207,192,.55);
  background: rgba(62,207,192,.06);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
}

.section-primitives-long {
  padding: 44px 0 10px;
}
.primitive-long-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 16px;
}
@media (min-width: 980px) {
  .primitive-long-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.primitive-long {
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(8, 9, 28, 0.55);
}
.primitive-long h3 {
  font-size: 16px;
  margin: 0 0 10px;
}
.primitive-long p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.85;
}
.primitive-long a {
  display: inline-block;
  margin-top: 12px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 2px;
  font-size: 13px;
}

.section-zti-deep {
  padding: 44px 0 10px;
}
.zti-deep {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 16px;
  align-items: start;
}
@media (min-width: 980px) {
  .zti-deep { grid-template-columns: 1.05fr 0.95fr; }
}

.section-ia {
  padding: 44px 0 10px;
}
.ia-quote {
  margin: 16px 0 0;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid rgba(139,111,245,.22);
  background: rgba(139,111,245,.06);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.85;
}

.section-supply {
  padding: 44px 0 10px;
}
.supply-intro {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.85;
  max-width: 78ch;
  margin-bottom: 14px;
}

.section-why-now {
  padding: 44px 0 70px;
  border-top: 1px solid var(--border);
}
.why-now-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* ZTI simulator + tokenomics table (shared with legacy protocol markup) */
.zti-simulator {
  margin-top: 18px;
  padding: 24px 22px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(62, 207, 192, 0.22);
  background: linear-gradient(165deg, rgba(62, 207, 192, 0.06), rgba(11, 13, 28, 0.9));
}
.zti-sim-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.zti-sim-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}
.zti-sim-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
}
.zti-sim-label-a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.zti-sim-toggle {
  width: 42px;
  height: 22px;
  accent-color: var(--teal);
  cursor: pointer;
}
.zti-sim-state {
  font-size: 13px;
  color: var(--text-2);
}
.zti-sim-toggle:checked ~ .zti-sim-state--off {
  display: none;
}
.zti-sim-toggle:not(:checked) ~ .zti-sim-state--on {
  display: none;
}
.zti-sim-expl {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 16px;
}
.zti-sim-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}
.zti-sim-chart-wrap {
  flex: 1 1 260px;
  min-width: min(100%, 300px);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
@media (max-width: 640px) {
  .zti-sim-row {
    flex-direction: column;
  }
}
.zti-sim-chart {
  display: block;
  width: 100%;
  height: 120px;
  vertical-align: middle;
}
.zti-sim-explain {
  flex: 1 1 240px;
  min-width: min(100%, 280px);
}
.zti-sim-explain-p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
  font-style: italic;
  margin: 0;
  max-width: 48ch;
}

/* ZTI compact visual (replaces full simulator) */
.zti-mini-visual {
  margin-top: 12px;
  padding: 16px 16px 14px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(62, 207, 192, 0.22);
  background: linear-gradient(165deg, rgba(62, 207, 192, 0.07), rgba(11, 13, 28, 0.92));
}
.zti-mini-canvaswrap {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.zti-mini-canvas { display: block; width: 100%; height: 100px; }
.zti-mini-note {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.55;
}

/* System page hero split + execution strip */
.page-hero--sys {
  padding: calc(8px + env(safe-area-inset-top, 0)) 0 clamp(40px, 6vw, 56px);
  margin-top: 0;
}
.page-hero-grid--sys {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: var(--mw);
  box-sizing: border-box;
}
.page-hero__sys-copy {
  min-width: 0;
  max-width: min(100%, 62ch);
  padding: 4px 0 8px;
}
.page-hero--sys .eyebrow--sys {
  margin: 0 0 10px;
  letter-spacing: 0.16em;
  color: rgba(62, 207, 192, 0.95);
}
.page-hero--sys .page-hero__sys-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.page-lead--sys {
  margin: 0;
  max-width: 62ch;
  text-align: left;
  line-height: 1.8;
  font-size: 16px;
  color: rgba(200, 214, 232, 0.92);
}
.page-hero-visual--sys {
  max-width: 100%;
  margin: 0;
  padding: 22px 20px 18px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(10, 12, 32, 0.88) 0%, rgba(6, 8, 22, 0.55) 100%);
  border: 1px solid rgba(62, 207, 192, 0.15);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 18px 48px rgba(0, 0, 0, 0.35),
    0 0 80px rgba(62, 207, 192, 0.06);
  backdrop-filter: blur(16px);
}
.page-hero-visual--sys .page-hero-visual__svg { display: none; }
.page-hero-visual--sys .page-hero-vcap {
  margin-top: 14px;
}
.sys-hero-viz {
  position: relative;
  width: 100%;
}
.sys-hero-viz__svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.sys-hero-viz__svg text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: rgba(255,255,255,0.52);
}
.sys-hero-viz__legend {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  pointer-events: none;
}
.shv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.shv-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
}
.shv-pill--teal { border-color: rgba(62,207,192,.22); }
.shv-pill--teal::before { background: rgba(62,207,192,.78); }
.shv-pill--violet { border-color: rgba(139,111,245,.22); }
.shv-pill--violet::before { background: rgba(139,111,245,.75); }
.shv-pill--gold { border-color: rgba(212,168,32,.22); }
.shv-pill--gold::before { background: rgba(212,168,32,.78); }
@media (min-width: 900px) {
  .page-hero-grid--sys {
    grid-template-columns: minmax(0, 1.12fr) minmax(240px, 0.5fr);
    align-items: center;
    column-gap: clamp(32px, 5vw, 56px);
  }
  .page-hero__sys-copy {
    padding: 6px 0 12px;
  }
  .page-hero-visual--sys {
    justify-self: end;
    max-width: 320px;
    width: 100%;
  }
}
.page-hero-visual {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 20px 18px 16px;
  background: rgba(6, 8, 22, 0.65);
  backdrop-filter: blur(12px);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.page-hero-visual:not(.page-hero-visual--sys) svg { width: 100%; max-width: 220px; height: auto; margin: 0 auto; display: block; }
.page-hero-vcap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 10px 0 0;
}
.exec-visual-strip {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  margin: 12px 0 8px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(77, 148, 247, 0.18);
  background: rgba(6, 8, 22, 0.45);
  max-width: 78ch;
}
.exec-visual-strip p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}
.exec-ico { width: 48px; height: 48px; flex-shrink: 0; }
.inv-ico { margin-bottom: 10px; }
.inv-ico svg { display: block; width: 40px; height: 40px; }

/* Nav: full “Forming” line in green */
.fp-text.num-green {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.fp-text.num-green strong { color: var(--green); font-weight: 700; }

/* Hero tag: teal + green */
.hero-tag__line {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  max-width: min(100%, 640px);
  line-height: 1.45;
}
.hero-tag__teal { color: var(--teal); }
/* Full “512 positions unassigned” line in green */
.hero-unassigned {
  color: var(--green);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.hero-unassigned #htag-open { color: var(--green); font-weight: 700; }

/* Hero manifesto */
.hero-body--manifesto { max-width: 58ch; }
.hero-body--manifesto .hb-lead {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.35;
  font-weight: 600;
  color: rgba(220, 232, 255, 0.95);
  margin-bottom: 2px;
}
.hero-body--manifesto .hb-kicker {
  color: rgba(240, 244, 255, 0.98);
  font-weight: 700;
}
.hero-body--manifesto .hb-tight,
.hero-body--manifesto .hb-close { letter-spacing: 0.01em; }
.hero-body--manifesto p { text-wrap: pretty; }

/* FAQ section title rows (icon tile + heading only) */
.faq-section-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 24px);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.faq-st {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.faq-st svg { width: 32px; height: 32px; display: block; }
.faq-st--protocol {
  background: linear-gradient(145deg, rgba(62, 207, 192, 0.18), rgba(139, 111, 245, 0.1));
  border-color: rgba(62, 207, 192, 0.22);
}
.faq-st--formation {
  background: linear-gradient(145deg, rgba(212, 168, 32, 0.16), rgba(240, 115, 22, 0.08));
  border-color: rgba(212, 168, 32, 0.2);
}
.faq-st--economics {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.16), rgba(62, 207, 192, 0.1));
  border-color: rgba(16, 185, 129, 0.2);
}
.faq-st--participation {
  background: linear-gradient(145deg, rgba(77, 148, 247, 0.16), rgba(139, 111, 245, 0.1));
  border-color: rgba(77, 148, 247, 0.2);
}
.faq-st--technical {
  background: linear-gradient(145deg, rgba(62, 207, 192, 0.12), rgba(77, 148, 247, 0.12));
  border-color: rgba(77, 148, 247, 0.18);
}
.faq-st--support {
  background: linear-gradient(145deg, rgba(139, 111, 245, 0.14), rgba(255, 255, 255, 0.04));
  border-color: rgba(139, 111, 245, 0.2);
}
.faq-section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  flex: 1;
  min-width: min(100%, 16ch);
}
.faq-section-head + .faq-list {
  margin-top: 20px;
}

.faq-item:has(.faq-mini-ico) {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
}
.faq-mini-ico {
  padding: 22px 0 0 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.faq-mini-ico svg { width: 22px; height: 22px; opacity: 0.9; }
.faq-item:has(.faq-mini-ico) .faq-q,
.faq-item:has(.faq-mini-ico) .faq-a { grid-column: 2; }

.tokenomics-table-wrap {
  overflow-x: auto;
  margin-top: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
}
.tokenomics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tokenomics-table th,
.tokenomics-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-2);
  color: var(--text-2);
}
.tokenomics-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}
.tokenomics-table tbody tr:last-child td {
  border-bottom: none;
}
.tokenomics-table tbody tr:nth-child(odd) td {
  background: var(--surface);
}
.tokenomics-table tbody tr:nth-child(even) td {
  background: var(--bg-alt);
}
.tokenomics-table td.mono {
  font-family: var(--font-mono);
  color: var(--text);
}
/* ZIRA rebuild append — appended to style.css */
:root {
  --bg: #07081A;
  --bg-alt: #0A0C20;
  --surface: #0D1028;
  --surf-2: #121435;
}

.wrap-md {
  max-width: var(--mw-md);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);
}

/* .nav-field-pulse: base + mobile refinements in @media (max-width: 720px) above */
.nav-field-pulse {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 0;
}
.nav-field-pulse .fp-text {
  white-space: nowrap;
}
.nav-field-pulse .fp-last {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.10);
  color: var(--text-4);
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 0.06em;
}
.fp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  animation: fp-breathe 4s ease-in-out infinite;
}

/* ── Live field signal strip (Home / System / Formation) ───────── */
.live-field-strip {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(6, 8, 20, 0.72), rgba(6, 8, 20, 0.52));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}
.live-field-strip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,207,192,.32), rgba(139,111,245,.18), transparent);
  opacity: 0.9;
}
.live-field-strip .lfs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.live-field-strip .lfs-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.live-field-strip .lfs-v {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
}
.live-field-strip .lfs-window {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}
.live-field-strip .lfs-items {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.live-field-strip .lfs-item {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.live-field-strip .lfs-item::before {
  content: '';
}
.live-field-strip .lfs-sep {
  color: rgba(255,255,255,.18);
}
.live-field-strip--inpage {
  margin: -28px 0 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

@media (max-width: 720px) {
  .nav-field-pulse .fp-last { display: none; }
  .live-field-strip .lfs-row { align-items: flex-start; flex-direction: column; }
  .live-field-strip .lfs-v { justify-content: flex-start; text-align: left; }
}

/* ── System page: field status block ───────────────────────────── */
.zira-field-status {
  padding: 34px 0 28px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse 100% 70% at 50% 0%, rgba(62,207,192,.08), transparent 60%);
}
.zira-field-status__metrics {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,9,16,.26);
}
.zfs-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.zfs-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
}
.zfs-v {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
  min-width: 0;
  white-space: nowrap;
}
.zfs-of {
  color: var(--text-4);
  margin-left: 4px;
}
.zira-field-status__actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.zira-field-status__sub {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: .04em;
}

/* ── System page: recent evaluations ───────────────────────────── */
.re-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.re-item {
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(15, 18, 48, 0.62);
}
.re-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.re-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .08em;
}
.re-status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
}
.re-status--rej { color: rgba(244, 63, 94, .95); border-color: rgba(244, 63, 94, .28); background: rgba(244, 63, 94, .07); }
.re-status--acc { color: var(--teal); border-color: rgba(62, 207, 192, .28); background: rgba(62, 207, 192, .07); }
.re-status--pend { color: #E8A838; border-color: rgba(232, 168, 56, .30); background: rgba(232, 168, 56, .08); }
.re-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Formation page: recent activity ───────────────────────────── */
.formation-activity {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,9,16,.30);
  max-width: 620px;
}
.formation-activity__k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.formation-activity__list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
  line-height: 1.75;
}
@media (prefers-reduced-motion: reduce) {
  .fp-dot { animation: none; opacity: 0.9; }
}
.nav-drawer-status {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: -4px 0 12px;
  padding: 12px 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(62, 207, 192, 0.2);
  background: rgba(6, 8, 20, 0.65);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.4;
}
.nav-drawer-status__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-drawer-status__k {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.nav-drawer-status__v {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-2);
}
.nav-drawer-status__v .fp-total {
  opacity: 0.85;
  font-weight: 500;
}
.nav-drawer-status__v .js-nav-formed {
  font-size: 13px;
  font-weight: 700;
}
.nav-drawer-status .fp-dot {
  margin-top: 2px;
  align-self: flex-start;
}
@media (max-width: 720px) {
  .nav-drawer .nav-drawer-status {
    display: flex;
  }
}
.btn-cta-sm__long { display: inline; }
.btn-cta-sm__short { display: none; }
@media (max-width: 360px) {
  .nav-logo img,
  .nav-logo--lockup img {
    max-width: min(200px, 36vw) !important;
  }
  .nav-actions { gap: 4px; }
}

/* Nav CTA: wins over earlier .btn-cta-sm,.btn-nav-cta small-mono block (no all-caps) */
.btn-cta-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  background: rgba(62, 207, 192, 0.12);
  border: 1px solid rgba(62, 207, 192, 0.35);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn-cta-sm:hover {
  border-color: var(--teal);
}
@media (max-width: 420px) {
  .btn-cta-sm { padding: 0 10px; height: 34px; font-size: 12px; }
  .btn-cta-sm__long { display: none; }
  .btn-cta-sm__short { display: inline; }
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(12, 14, 36, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.htag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: fp-breathe 4s ease-in-out infinite;
}

.formation-bar {
  max-width: min(560px, 100%);
  margin-top: 36px;
  padding: 18px 20px 16px;
  background: rgba(6,8,20,.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(62,207,192,.18);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.formation-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,207,192,.6), transparent);
}
.fb-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.fb-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.9;
}
.fb-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}
.fb-count strong {
  color: var(--text);
  font-weight: 600;
}
.fb-track {
  height: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 9px;
  position: relative;
}
.fb-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(30,140,130,.9), var(--teal));
  border-radius: 9999px;
  transition: width 2.4s cubic-bezier(.22,1,.36,1);
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .fb-fill::after {
    content: '';
    position: absolute;
    right: -1px; top: -1px; bottom: -1px;
    width: 28px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55));
    border-radius: 9999px;
    animation: fb-shimmer 3s ease-in-out infinite;
  }
  @keyframes fb-shimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
}
.fb-classes {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0.28;
  pointer-events: none;
}
.fb-cls {
  height: 100%;
  flex-shrink: 0;
}
.fb-note {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--font-mono);
  line-height: 1.7;
  margin: 0;
}

.section-prose p + p {
  margin-top: 1rem;
}

.loop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.loop-visual canvas {
  width: 100%;
  height: auto;
  max-width: 400px;
  display: block;
  margin-left: auto;
}
.loop-stages {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  align-items: stretch;
}
.ls-step {
  padding: 14px 16px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(165deg, rgba(13, 16, 40, 0.62) 0%, rgba(8,10,26,0.42) 100%);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.ls-n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--teal);
  letter-spacing: 0.12em;
}
.ls-step strong {
  display: block;
  margin: 8px 0 6px;
  font-size: 14px;
}
.ls-step p {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.55;
  text-align: justify;
  text-wrap: pretty;
  flex: 1;
}

.anchor-visual-wrap {
  margin: 28px 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.anchor-visual-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
}

.anchor-income-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (min-width: 840px) {
  .anchor-income-grid { grid-template-columns: repeat(4, 1fr); }
}
.ai-card {
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(13, 16, 40, 0.55);
}
.ai-card h4 {
  margin: 12px 0 8px;
  font-size: 15px;
}
.ai-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
}
.ai-icon svg {
  width: 40px;
  height: 40px;
}

.ownership-note {
  margin-top: 36px;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid var(--border-2);
  background: var(--bg-alt);
}
.ownership-note p {
  margin: 0 0 18px;
  max-width: 72ch;
  color: var(--text-3);
}

.paths-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.path-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 22px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.path-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 8px 36px rgba(0,0,0,.38);
  transform: translateY(-2px);
}
.path-card--featured {
  border-color: rgba(62,207,192,.24);
  background: rgba(62,207,192,.04);
}
.path-card--featured:hover { border-color: rgba(62,207,192,.44); }
.path-type {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0;
}
.path-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.path-card > p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
}
.path-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: .04em;
  margin-top: auto;
  padding-top: 4px;
}
.path-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  opacity: 0.8;
}

@media (max-width: 900px) {
  .loop-layout {
    grid-template-columns: 1fr;
  }
  .loop-visual {
    order: -1;
  }
}

.hero-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.hero-nav-links a {
  color: var(--teal);
}

.formation-counter {
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 52px);
  font-weight: 300;
  color: var(--text);
}
.fc-n {
  color: var(--teal);
}
.fc-sep {
  opacity: 0.35;
  margin: 0 6px;
}
.fc-label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-4);
}

.anchor-income-summary {
  margin: 36px 0 28px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--border-2);
  background: rgba(13, 16, 40, 0.45);
}
.anchor-income-summary h3 {
  margin: 8px 0 18px;
  font-size: 22px;
}
.ais-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.ais-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}
.ais-item p {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
}
.ais-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-3);
}
.ais-note a {
  color: var(--teal);
}

.map-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: 18px 0 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
}
.map-stats-bar strong {
  color: var(--text);
}

.map-legend-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 22px 0 14px;
}
.mlf-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 12px;
}
.mlf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cls-color, var(--gold));
}
.mlf-zir {
  font-family: var(--font-mono);
  color: var(--text-4);
}

.map-note {
  font-size: 12px;
  color: var(--text-4);
  line-height: 1.65;
  margin: 14px 0 0;
}

.ref-sidebar.ref-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.ref-quickstart {
  background: var(--surf-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 36px;
}

.bpos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(28px, 5vw, 44px);
  align-items: start;
  margin-top: 28px;
}
.bpos-text p + p {
  margin-top: 14px;
}
.bpos-text {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
}

.bpos-compare {
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
  font-size: 12px;
}
.bc-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surf-2);
  padding: 12px 14px;
  font-family: var(--font-mono);
  color: var(--text-4);
}
.bc-h--right {
  text-align: right;
}
.bc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.bc-row span:last-child {
  color: var(--text-2);
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.uc-card {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg-2);
  box-shadow: var(--card-inset);
}
.uc-card .uc-canvas {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 14px;
  opacity: 1;
}
.uc-flow {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.65;
  margin: 0 0 10px;
}
.uc-new {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  margin: 0;
}

.anchor-interactions-layout {
  display: grid;
  grid-template-columns: minmax(0, min(100%, 520px)) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 44px);
  align-items: start;
  margin-top: 28px;
}
#anchor-map-canvas {
  width: 100%;
  height: auto;
  max-width: 520px;
  display: block;
  opacity: 1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(ellipse at 50% 45%, rgba(62,207,192,0.06), transparent 62%);
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
}
.aii-item + .aii-item {
  margin-top: 22px;
}
.aii-item h4 {
  margin: 0 0 8px;
  font-size: 15px;
}
.aii-item p {
  margin: 0;
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.65;
}

@media (max-width: 960px) {
  .bpos-layout,
  .anchor-interactions-layout {
    grid-template-columns: 1fr;
  }
}


.section {
  padding: clamp(56px, 10vw, 84px) 0;
}
.section-alt {
  background: rgba(10, 12, 30, 0.55);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--text);
}
.text-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* Site-wide prose justification (navigation excluded) */
main p,
main .section-lead,
main .section-body,
.page .page-lead,
.sec .t-lead,
.sec .formation-note {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.fp-canvas-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
  background: rgba(6, 8, 18, 0.65);
}
.fp-canvas-wrap--clear {
  background: transparent !important;
  border-color: rgba(255,255,255,.12);
}
.fp-piece-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.dyn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(18px, 3vw, 28px);
  margin-top: 28px;
}
.dyn-card {
  min-width: 0;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(13, 16, 40, 0.52);
}
.dyn-card .dyn-topic-canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 120px;
  display: block;
  margin: 0 auto 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(4, 6, 16, 0.45);
  box-sizing: border-box;
  vertical-align: middle;
}
.dyn-card h4 {
  margin: 0 0 10px;
  font-size: 16px;
}
.dyn-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.65;
  text-align: justify;
  text-wrap: pretty;
}

.formation-feed-status {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.55;
}

.register-feed-panel {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(13, 16, 40, 0.45);
}
.register-feed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.register-feed-meta strong {
  color: var(--text);
}
.register-feed-hint {
  margin: 0 0 14px;
  color: var(--text-4);
}

.formation-pub-stats {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(62, 207, 192, 0.14);
  background: linear-gradient(180deg, rgba(10, 12, 32, 0.78), rgba(6, 8, 20, 0.52));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.formation-pub-stats__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
}
.formation-pub-stat strong {
  color: var(--text);
  font-weight: 600;
}
.formation-pub-hint {
  margin: 0;
  color: var(--text-4);
  line-height: 1.55;
}

.activity-feed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
}
.activity-feed-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ref-quickstart p {
  text-align: justify;
  text-wrap: pretty;
}

/* ================================================================
   New utility blocks (2026 upgrade)
   ================================================================ */

/* ---- Formation status panel (replaces simple progress bar) ---- */
.formation-panel {
  max-width: min(600px, 100%);
  margin-top: 36px;
  background: rgba(5,6,18,.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(62,207,192,.15);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.formation-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,207,192,.55), transparent);
}
.fp-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.fp-metric {
  padding: 14px 16px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.06);
}
.fp-metric:last-child { border-right: none; }
.fp-metric-n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 5px;
  color: var(--text);
}
.fp-metric-n--secured { color: var(--teal); }
.fp-metric-n--pending { color: rgba(232,168,56,.9); }
.fp-metric-n--open    { color: var(--text-3); }
.fp-metric-l {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.fp-classes-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-sizing: border-box;
}
.fp-class-col {
  padding: 8px 4px 8px;
  text-align: center;
  position: relative;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(6, 8, 20, 0.55) 0%, rgba(4, 6, 16, 0.35) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--col) 16%, transparent) inset;
}
.fp-class-letter {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 4px;
  display: block;
}
.fp-class-bar {
  width: 100%;
  height: 26px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin: 0 auto 4px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  isolation: isolate;
}
.fp-class-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  background: var(--col, currentColor);
  height: 0%;
  max-height: 100%;
  will-change: height;
  transition: height 0.75s cubic-bezier(.25, 1, .3, 1);
  opacity: 0.82;
  border-radius: 0 0 3px 3px;
  pointer-events: none;
  box-sizing: border-box;
}
.fp-class-seats {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(170,184,208,.72);
  display: block;
}
.fp-class-count {
  color: rgba(240,244,255,.92);
}
.fp-note-row {
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fp-note-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-4);
  line-height: 1.55;
}
.fp-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  animation: fp-breathe 3.5s ease-in-out infinite;
}
@keyframes fp-breathe {
  0%,100% { opacity: .35; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.6); }
}

/* Field signal grid */
.field-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 36px;
}
.fsg-item {
  background: var(--bg);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: background .15s;
}
.fsg-item:hover { background: var(--surface); }
.fsg-icon { width: 32px; height: 32px; opacity: 0.78; flex-shrink: 0; }
.fsg-source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}
.fsg-desc { font-size: 13px; color: var(--text-2); line-height: 1.65; margin: 0; }

/* Security points */
.security-points {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}
.sp-item { display: flex; gap: 14px; align-items: flex-start; }
.sp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 9px;
  flex-shrink: 0;
  opacity: 0.78;
}
.sp-text { font-size: 15px; color: var(--text-2); line-height: 1.68; margin: 0; }
.sp-text strong { color: var(--text); font-weight: 600; }

/* Operator strip */
.operator-strip {
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
}
.operator-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,207,192,.3), transparent);
}
.operator-strip p { font-size: 15px; color: var(--text-2); line-height: 1.75; margin: 0; }
.operator-strip p + p { margin-top: 14px; }

/* Combined primitives grid (system page) */
.sys-primitives-combined {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 36px;
}
.spc-item {
  background: var(--bg);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background .15s;
}
.spc-item:hover { background: var(--surface); }
.spc-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.spc-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}
.spc-body { font-size: 14px; color: var(--text-2); line-height: 1.72; margin: 0; }
.spc-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.spc-bullets li {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}
.spc-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.58;
}
.spc-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: .03em;
  margin: 4px 0 0;
}
.spc-item .text-link { margin-top: 2px; }

/* Protocol invariants grid */
.invariants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 28px;
  margin-bottom: 28px;
}
.inv-item {
  background: var(--bg);
  padding: 20px 22px;
  transition: background .15s;
}
.inv-item:hover { background: var(--surface); }
.inv-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 8px;
}
.inv-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 7px;
}
.inv-desc { font-size: 12px; color: var(--text-3); line-height: 1.6; margin: 0; }

/* Alloc summary (replaces table in formation) */
.alloc-summary {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--border);
  border: 1px solid var(--border);
}
.alloc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--bg);
}
.alloc-row--note { background: var(--surface); }
.alloc-k {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.alloc-v {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}
.alloc-row--note .alloc-v {
  color: var(--text-3);
  font-size: 11px;
}

/* Core-idea contrast grid on home */
.core-idea-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 32px;
}
@media (max-width: 640px) {
  .core-idea-grid { grid-template-columns: 1fr; }
}

/* Anchor topology SVG visual */
.anchor-topo-wrap {
  margin: 32px 0 28px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: transparent;
  overflow: hidden;
  padding: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.anchor-topo-svg {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .anchor-topo-svg circle[r="3"],
  .anchor-topo-svg circle[r="2.5"],
  .anchor-topo-svg circle[r="2.2"],
  .anchor-topo-svg circle[r="2"],
  .anchor-topo-svg circle[r="1.8"],
  .anchor-topo-svg circle[r="1.6"],
  .anchor-topo-svg circle[r="1.4"],
  .anchor-topo-svg circle[r="1.2"] {
    transform-origin: 50% 50%;
    animation: topoPulse 3.6s var(--ease) infinite;
  }
  .anchor-topo-svg circle[r="5"] {
    transform-origin: 50% 50%;
    animation: topoCore 4.4s var(--ease) infinite;
  }
}
@keyframes topoPulse {
  0%, 100% { opacity: .58; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes topoCore {
  0%, 100% { opacity: .82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* System page primitive visuals (small SVG icons in each spc-item) */
.spc-visual {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* Section visual strip (for governance/security/timing) */
.sys-visual-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  margin-bottom: 22px;
}
.svs-icon { width: 44px; height: 44px; flex-shrink: 0; }
.svs-text { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.svs-text strong { color: var(--text); }

/* fp-grid: 6 cards - 2 cols mobile, 3 cols desktop, all cells filled */
.fp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 22px;
}
@media (min-width: 760px) {
  .fp-grid { grid-template-columns: repeat(3, 1fr); }
}
/* fp-canvas-wrap: explicit min-height so canvas renders */
.fp-canvas-wrap {
  min-height: 90px;
}
.fp-piece-canvas {
  width: 100% !important;
  height: 90px !important;
  display: block;
}

/* Navigation: logo size (lockup SVG; zl-word matches --zira-gradient) */
.nav-logo,
.nav-logo--lockup {
  display: flex;
  align-items: center;
  line-height: 0;
}
.nav-logo img,
.nav-logo--lockup img {
  display: block;
  height: 68px;
  width: auto;
  max-width: min(380px, 70vw);
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 14px rgba(62, 207, 192, 0.1)) drop-shadow(0 0 20px rgba(110, 140, 255, 0.06));
}
@media (max-width: 480px) {
  .nav-logo img,
  .nav-logo--lockup img {
    height: 56px;
    max-width: min(330px, 66vw);
  }
}
@media (max-width: 400px) {
  .nav-logo img,
  .nav-logo--lockup img {
    height: 46px;
    max-width: min(280px, 60vw);
  }
}

/* Footer refinement */
.site-footer {
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(4,5,14,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-brand-tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 10px;
}
.footer-brand-desc {
  font-size: 13px;
  color: var(--text-4);
  line-height: 1.65;
  margin-top: 8px;
  max-width: 26ch;
}
.footer-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 18px 0;
}

/* Invariants grid: 2x2 fixed, no empty cells */
.invariants-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin: 22px 0 28px;
}
@media (min-width: 700px) {
  .invariants-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Integration layout: 2-col on desktop */
.integration-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 32px;
  align-items: start;
}
@media (min-width: 860px) {
  .integration-layout { grid-template-columns: 1fr 1fr; }
}
.integration-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  transition: background .15s;
  margin-bottom: 8px;
}
.integration-arrow:last-child { margin-bottom: 0; }
.integration-arrow:hover { background: var(--surface); }
.ia-icon { width: 28px; height: 28px; flex-shrink: 0; opacity: 0.8; }
.ia-source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  min-width: 90px;
}
.ia-flow {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.integration-result {
  padding: 28px 28px 24px;
  border: 1px solid rgba(62,207,192,.15);
  border-radius: var(--r-xl);
  background: rgba(6,8,22,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.integration-result::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,207,192,.4), transparent);
}
.ir-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.8;
}
.ir-desc {
  font-size: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text);
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.ir-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.ir-point {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}
.ir-point-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  margin-top: 7px;
  opacity: 0.65;
}

/* "How ZIRA works" section: horizontal steps - 4 fixed cols so no empty cells */
.how-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .how-steps { grid-template-columns: repeat(4, 1fr); }
}
.how-step {
  background: var(--bg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background .15s;
}
.how-step:hover { background: var(--surface); }
.how-n {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  color: rgba(62,207,192,.25);
  margin-bottom: 4px;
}
.how-ico {
  width: 26px;
  height: 26px;
  margin-top: -2px;
  opacity: 0.95;
}
.how-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.how-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
  margin: 0;
}

/* Formation message form */
.fm-msg-form {
  max-width: 860px;
  margin-top: 22px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: rgba(6,8,22,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.fm-msg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .fm-msg-grid { grid-template-columns: 1fr; }
}
.fm-msg-field { display: block; }
.fm-msg-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.fm-msg-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(4,6,18,.72);
  color: var(--text);
  outline: none;
}
.fm-msg-input:focus {
  border-color: rgba(62,207,192,.42);
  box-shadow: 0 0 0 3px rgba(62,207,192,.10);
}
.fm-msg-textarea { resize: vertical; min-height: 120px; }
.fm-msg-actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.fm-msg-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(170,184,208,.72);
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(4,5,14,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 40px 0 28px;
}
@media (min-width: 760px) {
  .footer-inner { grid-template-columns: 220px 1fr; align-items: start; }
}
.footer-brand { display: flex; flex-direction: column; gap: 0; }
.footer-brand img {
  display: block;
  height: 60px;
  width: auto;
  max-width: min(340px, 100%);
}
@media (max-width: 480px) {
  .footer-brand img { height: 50px; }
}
.footer-brand-tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 12px;
}
.footer-brand-desc {
  font-size: 13px;
  color: var(--text-4);
  line-height: 1.65;
  margin-top: 8px;
  max-width: 24ch;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(210, 220, 242, 0.78);
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(62, 207, 192, 0.12);
  background: linear-gradient(165deg, rgba(6, 10, 32, 0.22) 0%, rgba(8, 14, 40, 0.12) 100%);
  box-shadow: 0 2px 12px rgba(4, 8, 20, 0.08);
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.footer-social a svg {
  width: 18px;
  height: 18px;
  display: block;
}
.footer-social a:hover {
  color: rgba(232, 238, 252, 0.92);
  border-color: rgba(74, 190, 212, 0.22);
  background: linear-gradient(165deg, rgba(62, 207, 192, 0.08) 0%, rgba(107, 140, 232, 0.06) 55%, rgba(6, 10, 32, 0.12) 100%);
  transform: translateY(-1px);
}
.footer-social a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(62, 207, 192, 0.12), 0 2px 12px rgba(4, 8, 20, 0.08);
}

.visually-hidden {
  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;
}
.footer-links {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 580px) {
  .footer-links { grid-template-columns: repeat(2, 1fr); }
}
.fl-head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 12px;
  display: block;
}
.fl-col a {
  display: block;
  color: var(--text-3);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  padding: 5px 0;
  transition: color .15s;
}
.fl-col a:hover { color: var(--text); }
.footer-legal {
  padding: 16px clamp(16px, 4vw, 28px) 22px;
  border-top: 1px solid rgba(255,255,255,.05);
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
}

/* ── Home hero (#home): main column width, justified prose (wider than .wrap-md) ─── */
#home.hero .hero-inner--home.wrap-md {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: min(var(--mw), 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(12px, 2.4vw, 22px);
  padding-right: clamp(12px, 2.4vw, 22px);
  box-sizing: border-box;
  border-left: none;
}
#home .hero-main {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 32px;
  border: 1px solid var(--hero-glass-edge);
  box-shadow:
    0 0 0 1px var(--hero-glass-edge-v) inset,
    0 1px 0 rgba(120, 200, 220, 0.04) inset,
    0 16px 40px rgba(2, 4, 12, 0.12);
  background:
    linear-gradient(145deg, rgba(62, 207, 192, 0.05) 0%, transparent 56%),
    radial-gradient(100% 95% at 0% 0%, rgba(62, 207, 192, 0.035) 0%, transparent 62%),
    radial-gradient(95% 85% at 100% 0%, rgba(107, 140, 232, 0.03) 0%, transparent 64%),
    var(--hero-glass-fill);
  backdrop-filter: blur(6px) saturate(1.06);
  -webkit-backdrop-filter: blur(6px) saturate(1.06);
  isolation: isolate;
  overflow: hidden;
}
/* Title band: mesh “stage” + dominant ZIRA */
#home .hero-hero {
  position: relative;
  padding: clamp(28px, 4.5dvw, 48px) clamp(22px, 3.8dvw, 44px) clamp(22px, 3.2dvw, 36px);
  min-height: 0;
}
#home .hero-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 32px 32px 0 0;
  background:
    conic-gradient(from 210deg at 18% 8%, rgba(62, 207, 192, 0.06) 0deg, transparent 55deg, transparent 100%),
    conic-gradient(from 120deg at 88% 22%, rgba(120, 140, 220, 0.05) 0deg, transparent 70deg, transparent 100%),
    radial-gradient(ellipse 85% 58% at 14% 42%, rgba(62, 207, 192, 0.05) 0%, transparent 62%),
    repeating-linear-gradient(
      -12deg,
      transparent 0,
      transparent 12px,
      rgba(255, 255, 255, 0.02) 12px,
      rgba(255, 255, 255, 0.02) 13px
    );
  opacity: 0.42;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
#home .hero-hero::after {
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(62, 207, 192, 0.3) 12%,
    rgba(107, 140, 232, 0.25) 48%,
    rgba(139, 111, 245, 0.18) 78%,
    transparent
  );
  pointer-events: none;
  opacity: 0.9;
}
#home .hero-headline {
  position: relative;
  z-index: 2;
  padding: 0;
  margin: 0;
  max-width: 100%;
}
#home .hero-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  width: 100%;
}
@media (min-width: 768px) {
  #home .hero-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(0.75rem, 2.2vw, 1.75rem);
    align-items: start;
  }
}
#home .hero-hero__copy {
  min-width: 0;
}
#home .hero-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  min-width: 0;
  margin-top: -0.2rem;
  padding-top: 0;
  align-self: start;
}
@media (min-width: 768px) {
  #home .hero-hero__aside {
    align-items: flex-end;
    text-align: right;
    margin-top: -0.5rem;
    padding-top: 0;
  }
}
#home .hero-aside__viz--mark {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  contain: layout style;
}
#home .hero-hero__aside .hero-aside__viz {
  align-self: flex-end;
}
@media (max-width: 767px) {
  #home .hero-hero__aside {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    margin-top: 0.15rem;
  }
  #home .hero-hero__aside .hero-aside__viz {
    align-self: center;
  }
  #home .hero-hero__aside .hero-chip.hero-chip--formation {
    flex: 1 1 100%;
    max-width: min(22.5rem, 100%);
  }
}
#home .hero-aside__ring {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  aspect-ratio: 1;
  border: 1px solid rgba(62, 207, 192, 0.22);
  box-shadow:
    0 0 0 1px rgba(107, 140, 232, 0.1) inset,
    0 0 14px rgba(62, 207, 192, 0.08);
  animation: hero-aside-pulse 4.2s var(--ease) infinite;
}
#home .hero-aside__ring--2 {
  width: 78%;
  height: 78%;
  border-color: rgba(100, 145, 230, 0.2);
  animation-delay: -1.1s;
}
#home .hero-aside__ring--3 {
  width: 56%;
  height: 56%;
  border-color: rgba(120, 130, 220, 0.16);
  animation-delay: -2.1s;
}
#home .hero-aside__hex-dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#home .hero-aside__cell {
  --orbit: 46px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(62, 207, 192, 0.85), rgba(110, 140, 255, 0.75));
  box-shadow: 0 0 6px rgba(62, 207, 192, 0.35);
  transform: translate(-50%, -50%) rotate(var(--d, 0deg)) translateY(calc(-1 * var(--orbit)));
  animation: hero-aside-hex 3.4s ease-in-out infinite;
  opacity: 0.38;
  will-change: opacity, transform;
}
#home .hero-aside__cell:nth-child(1) {
  animation-delay: 0s;
}
#home .hero-aside__cell:nth-child(2) {
  animation-delay: -0.6s;
}
#home .hero-aside__cell:nth-child(3) {
  animation-delay: -1.2s;
}
#home .hero-aside__cell:nth-child(4) {
  animation-delay: -1.8s;
}
#home .hero-aside__cell:nth-child(5) {
  animation-delay: -2.4s;
}
#home .hero-aside__cell:nth-child(6) {
  animation-delay: -3s;
}
#home .hero-aside__mark-wrap {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(62, 207, 192, 0.18)) drop-shadow(0 0 20px rgba(100, 130, 255, 0.08));
}
#home .hero-aside__mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  #home .hero-aside__mark-img {
    animation: hero-aside-mark 5.5s var(--ease) infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  #home .hero-aside__ring,
  #home .hero-aside__mark-img,
  #home .hero-aside__cell {
    animation: none;
  }
}
@keyframes hero-aside-hex {
  0%,
  100% {
    opacity: 0.22;
    filter: blur(0);
  }
  50% {
    opacity: 0.62;
    filter: blur(0.2px);
  }
}
@keyframes hero-aside-mark {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
@keyframes hero-aside-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 0.95;
  }
}
#home .hero-eyebrow {
  margin: 0 0 1.1rem 0;
  padding: 0;
  text-align: start;
}
#home .hero-eyebrow__t {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(150, 230, 215, 0.88);
  padding: 6px 12px;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(62, 207, 192, 0.08) 0%, rgba(90, 120, 200, 0.05) 45%, rgba(100, 110, 200, 0.04) 100%);
  border: 1px solid rgba(62, 207, 192, 0.16);
  box-shadow: 0 0 0 1px rgba(107, 140, 232, 0.06) inset;
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
}
#home .hero-title-block {
  margin: 0;
  padding: 0;
  text-align: start;
  width: 100%;
}
#home .hero-zira-wrap {
  display: block;
  margin: 0 0 0.28em 0;
  line-height: 0.86;
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 0 20px rgba(62, 207, 192, 0.22)) drop-shadow(0 0 32px rgba(120, 150, 255, 0.12));
}
#home .hero-zira-wrap::after {
  content: '';
  display: block;
  width: min(14rem, 58vw);
  height: 2px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: var(--zira-gradient-hero-anim);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: 0 0 12px rgba(62, 207, 192, 0.18);
  opacity: 0.88;
}
#home .hero-zira-word {
  margin: 0;
  padding: 0 0.02em 0 0;
  text-align: start;
  text-align-last: start;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.1rem, 9.2vw, 5.85rem);
  line-height: 0.9;
  letter-spacing: 0.14em;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--zira-gradient-hero-anim) !important;
  background-size: 220% 180%;
  background-position: 12% 45%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: none;
  text-shadow: none;
}
#home .hero-zira-word::after {
  display: none;
}
@supports not (background-clip: text) {
  #home .hero-zira-word {
    color: var(--teal) !important;
    -webkit-text-fill-color: var(--teal) !important;
    background: none !important;
    text-shadow: 0 0 28px rgba(62, 207, 192, 0.35), 0 0 32px rgba(139, 111, 245, 0.2);
  }
}
@media (prefers-reduced-motion: no-preference) {
  #home .hero-zira-word {
    animation: zira-title-settle-home 1.2s var(--ease) both, zira-grad-shift 16s ease-in-out infinite 1.2s;
  }
  #home .hero-zira-wrap::after {
    animation: zira-line-grad 12s ease-in-out infinite 0.2s;
  }
}
@media (prefers-reduced-motion: reduce) {
  #home .hero-zira-wrap::after {
    animation: none;
  }
}
@keyframes zira-title-settle-home {
  0%   { opacity: 0; letter-spacing: 0.22em; transform: translateY(10px); }
  100% { opacity: 1; letter-spacing: 0.14em; transform: translateY(0); }
}
@keyframes zira-grad-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 55%;
  }
}
@keyframes zira-line-grad {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.82;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.95;
  }
}

#home h1 .hero-title.hero-title--after-brand,
#home .hero-title--after-brand {
  display: block;
  text-align: start;
  max-width: 100%;
  width: 100%;
  margin: clamp(0.35rem, 1.2dvh, 0.6rem) 0 0 0;
  padding-top: 0.22em;
  color: rgba(228, 234, 252, 0.92);
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 0.42vw + 0.85rem, 1.32rem);
  line-height: 1.4;
  letter-spacing: 0.002em;
  font-weight: 500;
  border-top: 1px solid rgba(80, 160, 200, 0.08);
  text-wrap: pretty;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

#home .hero-hero__aside .hero-chip--formation {
  margin-top: 0.5rem;
}
@media (min-width: 768px) {
  #home .hero-hero__aside .hero-chip--formation {
    flex-direction: row;
    margin-top: 0.85rem;
  }
}
#home .hero-cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 0;
  padding: clamp(1rem, 2dvh, 1.25rem) clamp(16px, 3.2dvw, 36px) clamp(1.05rem, 1.8dvh, 1.35rem);
  border-top: 1px solid rgba(62, 207, 192, 0.07);
  background: linear-gradient(180deg, rgba(62, 207, 192, 0.04) 0%, rgba(100, 120, 200, 0.02) 40%, transparent 88%);
}
#home .hero-story {
  margin: 0;
  padding: clamp(1.15rem, 2.2dvh, 1.75rem) clamp(14px, 3.2dvw, 36px) clamp(24px, 3.2dvw, 36px);
  border-top: 1px solid rgba(100, 130, 200, 0.06);
  max-width: 100%;
  background: linear-gradient(180deg, rgba(6, 12, 32, 0.06) 0%, rgba(4, 8, 24, 0.03) 50%, transparent 60%);
  overflow-x: clip;
}

/* Hero system map: compact visual explanation */
#home .hero-system-map {
  margin: clamp(0.95rem, 2.8dvh, 1.45rem) auto 0;
  max-width: min(980px, 100%);
  padding: 0 clamp(14px, 3.2dvw, 36px);
  position: relative;
  z-index: 2;
}
#home .hero-system-map__svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
}
#home .hero-system-map__svg text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#home .hsm-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#home .hsm-path--base {
  stroke: rgba(255,255,255,.10);
  stroke-width: 2;
}
#home .hsm-path--flow {
  stroke: url(#hsmLine);
  stroke-width: 2.6;
  stroke-dasharray: 10 10;
  opacity: .9;
}
#home .hsm-node text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: rgba(255,255,255,.52);
}
#home .hsm-node--zti text { fill: rgba(62,207,192,.72); }
#home .hsm-node--zir text { fill: rgba(139,111,245,.70); }

#home .hero-system-map__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 10px 0;
}
#home .hero-system-map__legend { opacity: .92; }
#home .hsm-dot { background: linear-gradient(135deg, rgba(62,207,192,.55), rgba(139,111,245,.38)); }
#home .hsm-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
#home .hsm-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(62,207,192,.5);
  opacity: .45;
}

@media (prefers-reduced-motion: no-preference) {
  #home .hsm-path--flow {
    animation: hsm-flow 3.2s linear infinite;
  }
}
@keyframes hsm-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -44; }
}
@media (prefers-reduced-motion: reduce) {
  #home .hsm-path--flow { animation: none; }
}

/* Focus interaction (chips): highlight corresponding node */
/* Removed chip focus interaction */

#home .hero-prose {
  max-width: 100%;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

#home .hero-body,
#home .hero-body.hero-body--stack,
#home .hero-body.hero-body--manifesto {
  text-align: start;
  width: 100%;
  max-width: none;
}

#home .hero-msection {
  --step-w: clamp(2.25rem, 4.5vw, 2.85rem);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.1dvh, 0.7rem);
  margin: 0;
  padding: 0 0 clamp(1rem, 2dvh, 1.25rem) var(--step-w);
  border-bottom: 1px solid rgba(62, 207, 192, 0.05);
}
#home .hero-msection::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: var(--step-w);
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(62, 207, 192, 0.5);
  line-height: 1.2;
  pointer-events: none;
}
#home .hero-msection:last-of-type {
  border-bottom: none;
  padding-bottom: 0.25rem;
}

#home .hero-chip {
  --hc-accent: linear-gradient(90deg, #3ecfc0, #6b8ce8, #8b6ff5);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px 12px;
  min-height: 4.6rem;
  border-radius: 18px;
  line-height: 1.35;
  overflow: hidden;
  border: 1px solid rgba(62, 207, 192, 0.1);
  background: linear-gradient(165deg, rgba(5, 10, 30, 0.22) 0%, rgba(8, 14, 40, 0.12) 100%);
  backdrop-filter: blur(5px) saturate(1.04);
  -webkit-backdrop-filter: blur(5px) saturate(1.04);
  box-shadow: 0 2px 14px rgba(4, 8, 24, 0.08);
}
#home .hero-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hc-accent);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}
#home .hero-chip__abbr {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.95;
}
#home .hero-chip__desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: 500;
  text-transform: none;
  max-width: 100%;
  color: rgba(236, 242, 255, 0.92);
}
#home .hero-chip--formation {
  --hc-accent: linear-gradient(90deg, #3ecfc0, #6b8ce8, #8b6ff5);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-height: 0;
  color: rgba(230, 238, 255, 0.93);
  border: 1px solid rgba(90, 160, 210, 0.14);
  background: linear-gradient(
    152deg,
    rgba(62, 207, 192, 0.08) 0%,
    rgba(90, 130, 220, 0.05) 45%,
    rgba(6, 10, 32, 0.1) 100%
  );
  box-shadow:
    0 0 0 1px rgba(120, 160, 255, 0.04) inset,
    0 0 20px rgba(62, 207, 192, 0.04);
}
#home .hero-chip--formation .hero-chip__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
#home .hero-chip--formation .hero-chip__meta {
  display: inline;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: none;
  color: rgba(230, 240, 255, 0.94);
}
#home .hero-chip__open-num {
  color: #9edfd7;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#home .hero-chip__open-label {
  font-weight: 500;
  color: rgba(220, 232, 255, 0.9);
}
#home .hero-chip__of512 {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
}
#home .hero-body--stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
#home .hero-body--manifesto {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  max-width: 100%;
  row-gap: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#home .hero-body--stack p,
#home .hero-body--manifesto p {
  margin: 0;
  text-wrap: pretty;
  color: rgba(210, 218, 240, 0.92);
  font-size: clamp(13.5px, 0.35vw + 12px, 16.5px);
  line-height: 1.68;
  letter-spacing: 0.01em;
}
#home .hero-body .hero-p,
#home .hero-body--manifesto .hero-p {
  text-align: start;
  text-justify: auto;
  hyphens: none;
  -webkit-hyphens: none;
  max-width: 100%;
}
#home .hero-body .hero-p--tight,
#home .hero-body .hero-p--close {
  max-width: 100%;
}
#home .hero-body .hero-lead {
  color: rgba(232, 238, 252, 0.97);
  font-size: clamp(0.98rem, 0.4vw + 0.86rem, 1.12rem);
  line-height: 1.55;
  font-weight: 600;
  max-width: 100%;
  letter-spacing: -0.015em;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
  letter-spacing: -0.012em;
}
#home .hero-body .hero-p--standout {
  font-size: clamp(0.95rem, 0.32vw + 0.86rem, 1.05rem);
  font-weight: 600;
  color: rgba(195, 230, 222, 0.95);
  text-shadow: 0 0 16px rgba(62, 207, 192, 0.1);
  max-width: 100% !important;
}
#home .hero-p--kickerline {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(145, 200, 190, 0.88) !important;
  margin-top: 0.15rem !important;
  max-width: 100% !important;
}
#home .hero-live-list {
  list-style: none;
  margin: 0.25rem 0 0 0;
  padding: 0 0 0 0.55rem;
  max-width: 100%;
  border-left: 2px solid rgba(100, 155, 215, 0.22);
}
#home .hero-live-list { display: none; }

/* Hero story: visual rows and live signals grid */
#home .hero-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}
#home .hero-row p { margin: 0; }
#home .hero-msection .hero-row + .hero-row { margin-top: 2px; }
#home .hero-row--standout { margin-top: 2px; }
#home .hero-row--fin { align-items: center; }

#home .hero-sym {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,10,22,.35);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#home .hero-sym::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(62,207,192,.22);
  opacity: .75;
}
#home .hero-sym--field::before { border-color: rgba(255,255,255,.16); box-shadow: 0 0 10px rgba(255,255,255,.05); }
#home .hero-sym--state::before { border-color: rgba(77,148,247,.22); }
#home .hero-sym--bridge::before { border-radius: 4px; inset: 4px 3px; border-color: rgba(62,207,192,.24); }
#home .hero-sym--noid::before { border-color: rgba(255,255,255,.14); border-style: dashed; }
#home .hero-sym--stream::before { border-radius: 999px; inset: 7px 3px; border-color: rgba(139,111,245,.18); }
#home .hero-sym--coord::before { border-color: rgba(62,207,192,.18); }
#home .hero-sym--nocenter::before { border-color: rgba(255,255,255,.12); }
#home .hero-sym--horizon::before { border-radius: 999px; inset: 8px 3px; border-color: rgba(62,207,192,.18); }

#home .hero-live-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 720px) {
  #home .hero-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#home .hl-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(7,9,16,.28);
}
#home .hl-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  background: rgba(255,255,255,.04);
}
#home .hl-ico::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  opacity: .55;
}
#home .hl-ico--behavior { border-color: rgba(62,207,192,.20); }
#home .hl-ico--behavior::after { background: rgba(62,207,192,.25); }
#home .hl-ico--align { border-color: rgba(77,148,247,.18); }
#home .hl-ico--align::after { background: rgba(77,148,247,.22); }
#home .hl-ico--route { border-color: rgba(139,111,245,.18); }
#home .hl-ico--route::after { background: rgba(139,111,245,.20); }
#home .hl-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}
#home .hl-v {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(230, 240, 255, 0.92);
}

#home .hero-def-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  #home .hero-def-grid { grid-template-columns: 1fr 1fr; }
}
#home .hero-msection--defs .hero-def-grid {
  /* Let the definition panels read as a primary block */
  /* Align to the hero text column (do not bleed into the step gutter) */
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  max-width: 980px;
  align-items: stretch;
}
@media (min-width: 960px) {
  #home .hero-msection--defs .hero-def-grid {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    max-width: 1040px;
  }
}
#home .hero-def {
  min-height: 100%;
}
#home .hero-def {
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,9,16,.26);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#home .hero-def--zti {
  border-color: rgba(77,148,247,.16);
  box-shadow: 0 0 0 1px rgba(77,148,247,.05) inset;
}
#home .hero-def--zir {
  border-color: rgba(62,207,192,.16);
  box-shadow: 0 0 0 1px rgba(62,207,192,.05) inset;
}
#home .hero-def::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(62,207,192,.10), transparent 60%);
  opacity: .55;
  pointer-events: none;
}
#home .hero-def--zir::before {
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(139,111,245,.09), transparent 60%);
}
#home .hero-def-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
#home .hero-def-top .hero-dt {
  margin: 0;
}
#home .hero-def-ico {
  width: 18px;
  height: 18px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  position: relative;
}
#home .hero-def-ico::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  opacity: 0.7;
}
#home .hero-def--zti .hero-def-ico { border-color: rgba(77,148,247,.22); }
#home .hero-def--zir .hero-def-ico { border-color: rgba(62,207,192,.22); }
#home .hero-def--zti .hero-def-ico::after { background: rgba(77,148,247,.22); }
#home .hero-def--zir .hero-def-ico::after { background: rgba(62,207,192,.22); }

#home .hero-def .hero-dd {
  color: rgba(220, 230, 252, 0.92) !important;
}
#home .hero-def--zti .hero-dd { color: rgba(220, 232, 255, 0.92) !important; }
#home .hero-def--zir .hero-dd { color: rgba(228, 240, 255, 0.90) !important; }

#home .hero-def-viz {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 1;
  height: 14px;
}
#home .hd-bar {
  display: inline-block;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
#home .hd-bar--a { width: 28%; opacity: .5; }
#home .hd-bar--b { width: 36%; opacity: .7; }
#home .hd-bar--c { width: 44%; border-color: rgba(77,148,247,.22); background: rgba(77,148,247,.06); opacity: .95; }

#home .hd-stream {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(62,207,192,.22), rgba(139,111,245,.16));
  opacity: .85;
  margin-top: 6px;
}
#home .hd-stream-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(62,207,192,.55);
  display: block;
  margin-top: -4px;
  animation: hd-dot 2.2s linear infinite;
}
@keyframes hd-dot {
  0% { transform: translateX(0); opacity: .7; }
  60% { opacity: 1; }
  100% { transform: translateX(180px); opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  #home .hd-stream-dot { animation: none; }
}
#home .hero-live-list li {
  position: relative;
  margin: 0.4rem 0 0 0;
  padding-left: 0.9rem;
  line-height: 1.58;
  color: rgba(205, 214, 238, 0.9) !important;
  font-size: clamp(13.5px, 0.32vw + 12px, 16px) !important;
  max-width: none;
}
#home .hero-live-list li:first-child {
  margin-top: 0.15rem;
}
#home .hero-live-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--violet));
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.1);
  opacity: 0.9;
}
#home .hero-msection--defs {
  /* This step contains only the definition grid */
  display: block;
  padding-top: 0.25rem;
}
@media (min-width: 720px) {
  #home .hero-msection--defs { display: block; }
}
#home .hero-pair {
  margin: 0;
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(80, 150, 200, 0.1);
  background: linear-gradient(158deg, rgba(62, 207, 192, 0.04) 0%, rgba(90, 120, 200, 0.04) 48%, rgba(110, 100, 200, 0.035) 100%);
  box-shadow: 0 2px 12px rgba(4, 8, 20, 0.06);
  backdrop-filter: blur(3px) saturate(1.03);
  -webkit-backdrop-filter: blur(3px) saturate(1.03);
}
#home .hero-dt {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.45rem;
  background: var(--zira-gradient-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  #home .hero-dt {
    color: var(--teal);
    -webkit-text-fill-color: var(--teal);
    background: none;
  }
}
#home .hero-dd {
  margin: 0;
  line-height: 1.6;
  font-size: clamp(13px, 0.28vw + 12px, 15.5px);
  color: rgba(208, 214, 236, 0.9) !important;
  max-width: 100% !important;
  text-wrap: pretty;
}
#home .hero-p--fin {
  max-width: 100% !important;
  color: rgba(218, 226, 248, 0.95) !important;
  font-size: clamp(0.95rem, 0.3vw + 0.86rem, 1.05rem) !important;
  font-weight: 600;
  line-height: 1.58 !important;
  text-wrap: pretty;
  padding-top: 0.1rem;
}
#home .hero-body .hero-lead em {
  font-style: italic;
  color: rgba(100, 220, 200, 0.98);
}
#home .hero-p--kicker {
  max-width: min(48ch, 100%) !important;
  padding: 0.55rem 0 0.55rem 0.9rem;
  border-left: 2px solid rgba(62, 207, 192, 0.4);
  background: linear-gradient(90deg, rgba(62, 207, 192, 0.06), transparent 70%);
  border-radius: 0 10px 10px 0;
}
#home .hero-p--kicker .hb-kicker {
  display: block;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(244, 248, 255, 0.98);
  margin-bottom: 0.4rem;
}
#home .hero-p--kicker .hb-rest {
  display: block;
  color: var(--text-2);
  font-weight: 400;
  line-height: 1.65;
}
#home .hero-p--bridge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(62, 207, 192, 0.9);
  margin-top: 0.35rem;
  margin-bottom: 0.15rem;
  max-width: 100% !important;
}
#home .hero-p--tight {
  margin-top: 0.35rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: clamp(14px, 0.28vw + 12.5px, 15.5px);
  line-height: 1.75;
  color: rgba(210, 220, 242, 0.96);
  text-align: start;
  text-align-last: start;
  max-width: min(68ch, 100%) !important;
  font-variant-numeric: tabular-nums;
}
#home .hero-p--close {
  margin-top: 0.5rem;
  font-style: normal;
  color: rgba(200, 214, 240, 0.94);
  line-height: 1.7;
  font-size: clamp(14px, 0.28vw + 12.5px, 16px);
  text-align: start;
  text-align-last: start;
  max-width: min(68ch, 100%) !important;
  padding-top: 0.2rem;
}
#home .hb-kicker { color: rgba(240, 244, 255, 0.95); }
@media (max-width: 500px) {
  #home .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  #home .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

#home .formation-panel {
  margin: clamp(6px, 1.2dvw, 12px) clamp(16px, 3.2dvw, 32px) clamp(10px, 2dvh, 18px);
  width: auto;
  max-width: 100%;
  text-align: justify;
  text-justify: inter-word;
  box-sizing: border-box;
  border-radius: 14px;
  background: rgba(4, 10, 28, 0.2) !important;
  border: 1px solid rgba(90, 150, 200, 0.12) !important;
  backdrop-filter: blur(5px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.04) !important;
  box-shadow: 0 8px 28px rgba(4, 8, 20, 0.08) !important;
}
#home .formation-panel .fp-metric { text-align: center; }
#home .formation-panel .fp-class-col { text-align: center; }
#home .formation-panel .fp-class-letter,
#home .formation-panel .fp-class-seats { text-align: center; }
#home .fp-panel-head {
  text-align: start;
  padding: 10px 14px 8px;
}
#home .fp-panel-eyebrow { text-align: start; text-align-last: start; margin: 0 0 0.2rem; }
#home .fp-panel-hint {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: start;
  max-width: none;
  hyphens: auto;
}
#home .fp-note-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
#home .fp-note-text {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: start;
  flex: 1;
  min-width: 0;
  hyphens: auto;
}

#home.hero #field-canvas {
  opacity: 0.98;
  filter: saturate(1.06) contrast(1.01);
}

/* Second home section: solid ground plane (avoid “under the hero” read) */
#gap.section {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 46%, var(--bg) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#gap .wrap-md {
  position: relative;
  z-index: 2;
}
#gap .section-h,
#gap .section-prose p,
#gap .how-desc {
  text-rendering: optimizeLegibility;
}

/* Short viewports: keep tagline readable, tighten body */
@media (max-height: 820px) {
  .hero.hero--home {
    padding-top: calc(
      var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(4px, 1.2dvh, 12px)
    );
  }
  #home .hero-zira-word { font-size: clamp(2.35rem, 5.8dvh, 3.65rem); }
  #home .hero-title--after-brand { font-size: clamp(1.1rem, 0.45dvh + 0.9rem, 1.38rem); }
  #home .hero-body--stack p { line-height: 1.45; font-size: 13.5px; }
  #home .fp-class-bar { height: 22px; }
}

/* Narrow screens: home hero readability, no justified rivers */
@media (max-width: 640px) {
  .hero.hero--home {
    overflow-y: visible;
    min-height: auto;
  }
  #home.hero .hero-inner--home.wrap-md {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  #home .hero-main {
    text-align: start;
  }
  #home .hero-hero__stage {
    mask-image: none;
    -webkit-mask-image: none;
    opacity: 0.48;
  }
  #home .hero-zira-word {
    font-size: clamp(2.1rem, 10vw, 3.2rem);
    letter-spacing: 0.1em;
    line-height: 0.95;
  }
  #home .hero-title--after-brand {
    text-align: left;
    text-align-last: left;
    text-justify: auto;
    hyphens: none;
    margin-top: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 100%;
    font-size: clamp(1.1rem, 3.6vw, 1.4rem);
    line-height: 1.3;
  }
  #home .hero-body--manifesto p,
  #home .hero-body--stack p {
    text-align: left;
    text-align-last: left;
    text-justify: auto;
    hyphens: none;
    -webkit-hyphens: none;
    font-size: 14.5px;
    line-height: 1.64;
  }
  #home .hero-hero__aside {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #home .hero-hero__aside .hero-aside__viz--mark {
    width: 96px;
    height: 96px;
  }
  #home .hero-hero__aside .hero-aside__mark-wrap {
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
  }
  #home .hero-hero__aside .hero-aside__cell {
    --orbit: 42px;
  }
  #home .hero-hero__aside .hero-chip--formation {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #home .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #home .hero-cta .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  #home .formation-panel {
    margin: 8px 8px 16px;
    border-radius: 12px;
  }
  #home .fp-panel-hint {
    text-align: left;
    text-align-last: left;
    max-width: none;
  }
  .fp-panel-head { padding: 10px 14px 8px; }
  .fp-panel-hint { font-size: 10px; }
  #home .fp-classes-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 400px) {
  #home .hero-zira-word {
    font-size: clamp(1.9rem, 11vw, 2.75rem);
    letter-spacing: 0.08em;
  }
  #home .fp-classes-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-metric { padding: 10px 6px; }
  .fp-metric-n { font-size: clamp(20px, 5vw, 30px); }
}

.fp-panel-head {
  padding: 12px 18px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(10, 12, 28, 0.9) 0%, rgba(5, 6, 18, 0.4) 100%);
}
.fp-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 5px;
  opacity: 0.95;
}
.fp-panel-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-4);
  letter-spacing: 0.015em;
  max-width: 42ch;
}
/* ── Global mobile adjustments ─── */
@media (max-width: 480px) {
  .fp-grid { grid-template-columns: 1fr; }
  .paths-row { grid-template-columns: 1fr; }
  .sys-primitives-combined { grid-template-columns: 1fr; }
}

/* ── Reduce motion: kill animations ─── */
@media (prefers-reduced-motion: reduce) {
  .hero-zira-word { animation: none !important; opacity: 1; letter-spacing: 0.18em; filter: none; }
  #home .hero-zira-word {
    letter-spacing: 0.12em;
    transform: none;
    animation: none !important;
  }
  .fp-class-fill  { transition: none; }
  @keyframes zira-title-settle { from {} to {} }
  .fp-live-dot    { animation: none; opacity: 0.6; }
}

/* ── Anchor topology monitor ─────────────────────────── */
.anchor-monitor {
  margin-top: 40px;
  background: var(--surface, #0D1028);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: clamp(20px,4vw,36px);
  position: relative;
  overflow: hidden;
}
.anchor-monitor::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,207,192,.30), transparent);
  pointer-events: none;
}

.am-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 20px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.am-header-left { flex: 1; min-width: 220px; }
.am-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal, #3ECFC0); margin-bottom: 6px;
}
.am-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(18px,2.2vw,26px); font-weight: 400;
  color: var(--text, #F2F5FF); margin-bottom: 6px;
}
.am-sub {
  font-size: 13px; color: var(--text-3, #6E80A0); line-height: 1.62; margin: 0;
}

.am-legend {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  align-self: center;
}
.am-mode {
  display: inline-flex;
  gap: 6px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.am-mode-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(210,225,255,.78);
  background: transparent;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.am-mode-btn:hover { background: rgba(62,207,192,.10); }
.am-mode-btn.active,
.am-mode-btn[aria-pressed="true"] {
  background: rgba(62,207,192,.16);
  color: rgba(220,245,242,.92);
}
.am-leg-item {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono, monospace); font-size: 10px;
  color: var(--text-3, #6E80A0); letter-spacing: .04em; white-space: nowrap;
}
.am-leg-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.am-leg-secured { background: #3ECFC0; box-shadow: 0 0 6px rgba(62,207,192,.6); }
.am-leg-pending  { background: #D4A820; box-shadow: 0 0 6px rgba(212,168,32,.6); }
.am-leg-open     { background: transparent; border: 1.5px solid rgba(255,255,255,.22); }

/* Allocated ZIR: total (all classes) + per-class under ring labels */
.am-zir-all {
  margin-bottom: 16px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.am-zir-all__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.am-zir-all__label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3, #6E80A0);
}
.am-zir-all__vals {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--teal, #3ECFC0);
  font-variant-numeric: tabular-nums;
}
.am-zir-all__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.am-zir-all__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(62, 207, 192, 0.9), rgba(62, 207, 192, 0.45));
  transition: width 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .am-zir-all__fill,
  .am-class-zir__fill {
    transition: none;
  }
}

.am-rl-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}
.am-class-zir {
  position: relative;
  height: 3px;
  width: 100%;
  min-width: 64px;
  max-width: 128px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  align-self: center;
}
.am-class-zir__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 2px;
  transition: width 0.4s ease;
  opacity: 0.92;
}
.am-ring-labels .am-rl-group:nth-child(1) .am-class-zir__fill { background: #D4A820; }
.am-ring-labels .am-rl-group:nth-child(2) .am-class-zir__fill { background: #F08030; }
.am-ring-labels .am-rl-group:nth-child(3) .am-class-zir__fill { background: #3ECFC0; }
.am-ring-labels .am-rl-group:nth-child(4) .am-class-zir__fill { background: #18C080; }
.am-ring-labels .am-rl-group:nth-child(5) .am-class-zir__fill { background: #4D94F7; }
.am-ring-labels .am-rl-group:nth-child(6) .am-class-zir__fill { background: #8FA5C0; }

@media (max-width: 720px) {
  .am-ring-labels {
    gap: 10px 12px;
  }
  .am-class-zir {
    max-width: none;
    min-width: 0;
  }
  .am-rl-group {
    flex: 1 1 140px;
    min-width: 120px;
  }
}

/* Canvas wrapper */
.am-canvas-wrap {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 300px;
}
#anchor-topology-canvas { touch-action: manipulation; }

@media (max-width: 720px) {
  /* Prevent “floating overlay” feel while scrolling on mobile */
  .am-canvas-wrap {
    transform: translateZ(0);
    contain: layout paint;
    will-change: auto;
  }
}

/* Mobile: reduce heavy effects (prevents jitter during scroll) */
@media (max-width: 720px) {
  .am-detail-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
#anchor-topology-canvas {
  display: block;
  width: min(640px, 100%);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  cursor: crosshair;
  /* opacity 1, NO mix-blend-mode, NO filter */
  opacity: 1;
}

/* Detail panel */
.am-detail-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10,12,32,.96);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 20px 22px 18px;
  min-width: 240px; max-width: 300px;
  z-index: 20;
  display: none;
  animation: am-panel-in .18s cubic-bezier(.25,1,.3,1);
  pointer-events: all;
}
.am-detail-panel.am-detail--admin {
  max-width: min(420px, 92vw);
  min-width: 260px;
}
.am-detail-panel.visible { display: block; }
@keyframes am-panel-in {
  from { opacity: 0; transform: translate(-50%,-52%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.am-detail-close {
  position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none;
  color: var(--text-3, #6E80A0); font-size: 16px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.am-detail-close:hover { background: rgba(255,255,255,.16); }

.am-detail-class-badge {
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal, #3ECFC0); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.am-detail-rows { display: flex; flex-direction: column; gap: 8px; }
.am-detail-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.am-dr-label {
  font-family: var(--font-mono, monospace); font-size: 10px;
  color: var(--text-4, #4A5E78); letter-spacing: .04em; flex-shrink: 0;
}
.am-dr-value {
  font-family: var(--font-mono, monospace); font-size: 12px;
  color: var(--text, #F2F5FF); text-align: right;
}
.am-dr-zir   { color: var(--teal, #3ECFC0); font-weight: 500; }
.am-dr-contact {
  color: var(--text-2, #ACB9D2);
  font-size: 11px;
  max-width: min(52ch, 100%);
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}
.am-detail-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.am-df-note { font-size: 10px; color: var(--text-4, #4A5E78); font-family: var(--font-mono, monospace); }

/* Ring labels */
.am-ring-labels {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: center; margin-top: 18px;
}
.am-rl {
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .05em; color: var(--cls, #3ECFC0);
  display: flex; align-items: center; gap: 5px;
  cursor: pointer;
  user-select: none;
}
.am-rl::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cls); display: inline-block;
  box-shadow: 0 0 5px var(--cls);
}
.am-rl:hover { filter: brightness(1.06); }
.am-rl.active {
  color: var(--text, #F2F5FF);
  text-shadow: 0 0 12px color-mix(in srgb, var(--cls, #3ECFC0) 40%, transparent);
}

/* Secured seats list */
.am-seatlist {
  --am-cls: #3ecfc0;
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--am-cls) 22%, rgba(255,255,255,.10));
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(10,12,32,.88) 0%, rgba(6,8,20,.75) 100%);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.am-seatlist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.am-seatlist-head-text { min-width: 0; flex: 1; }
.am-seatlist-title {
  margin: 0;
  font-family: var(--font-display, serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text, #F2F5FF);
}
.am-seatlist-sub {
  margin: 5px 0 0;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text-3, #6E80A0);
  line-height: 1.45;
}
.am-seatlist-close {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-2, #ACB9D2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.am-seatlist-close:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.16); }
.am-seatlist-cols {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 8px 12px;
  padding: 6px 14px 4px;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4, #4A5E78);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.am-seatlist:not(.am-seatlist--admin) .am-seatlist-cols {
  grid-template-columns: 44px minmax(0, 1fr);
}
.am-seatlist-items {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.am-seatrow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 9px 14px;
  border-left: 3px solid var(--am-accent, var(--am-cls));
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.am-seatlist:not(.am-seatlist--admin) .am-seatrow {
  grid-template-columns: 44px minmax(0, 1fr);
}
.am-seatrow:last-child { border-bottom: none; }
.am-seatrow-num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text, #F2F5FF);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.am-seatrow-name {
  font-size: 12px;
  color: var(--text-2, #AAB8D0);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-seatrow-mail,
.am-seatrow-owner {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-3, #6E80A0);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-seatlist--admin .am-seatrow-owner {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.am-seatrow--empty {
  display: block;
  border-left: none;
  padding: 16px 14px 18px;
  text-align: center;
  background: transparent;
}
.am-seatrow-empty-msg {
  font-size: 12px;
  color: var(--text-3, #6E80A0);
}
@supports not (color-mix(in srgb, white, black)) {
  .am-seatlist { border-color: rgba(255,255,255,.10); }
}
@media (max-width: 560px) {
  .am-seatlist--admin .am-seatlist-cols,
  .am-seatlist--admin .am-seatrow {
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 8px;
  }
  .am-seatlist:not(.am-seatlist--admin) .am-seatlist-cols,
  .am-seatlist:not(.am-seatlist--admin) .am-seatrow {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px 8px;
  }
}

@media (max-width: 560px) {
  .am-header { flex-direction: column; gap: 16px; }
  .am-detail-panel { min-width: 200px; max-width: 260px; }
}

/* ----- ZIRA Field: engineering spec page (zira-field.html) ----- */
.field-spec-page {
  --fs-max: 40rem;
}
.field-spec-hero {
  padding: clamp(32px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
  background:
    linear-gradient(175deg, rgba(62, 207, 192, 0.08) 0%, transparent 42%),
    rgba(8, 10, 22, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.field-spec-hero__inner {
  max-width: 48rem;
}
.field-spec-hero__k {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal, #3ecfc0);
  margin: 0 0 10px;
}
.field-spec-hero__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: rgba(245, 248, 255, 0.98);
}
.field-spec-hero__lede {
  margin: 0;
  max-width: var(--fs-max);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2, #9aa8c0);
  text-wrap: pretty;
}
.field-spec__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 4vw, 40px) 0 56px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
.field-spec-toc {
  position: sticky;
  top: 1rem;
  padding: 0;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4, #5a6a84);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px 14px;
  background: rgba(0, 0, 0, 0.15);
  max-width: 14rem;
}
.field-spec-toc__h {
  margin: 0 0 8px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--teal, #3ecfc0);
  opacity: 0.9;
}
.field-spec-toc a {
  display: block;
  padding: 4px 0;
  color: var(--text-2, #9aa8c0);
  text-decoration: none;
  text-transform: none;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  border: none;
}
.field-spec-toc a:hover,
.field-spec-toc a:focus-visible {
  color: #e8edff;
  outline: none;
}
.field-spec-toc a:focus-visible {
  text-decoration: underline;
  text-decoration-color: rgba(62, 207, 192, 0.4);
}
.field-spec-body {
  min-width: 0;
}
.field-spec-sec {
  margin-bottom: clamp(28px, 4vw, 40px);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.field-spec-sec:last-of-type,
.field-spec-sec--final {
  border-bottom: none;
  margin-bottom: 12px;
}
.field-spec-sec__h {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 210, 240, 0.85);
  margin: 0 0 10px;
}
.field-spec-sec p,
.field-spec-sec .field-spec-hlist--note,
.field-spec-callout,
.field-spec-upd {
  max-width: var(--fs-max);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2, #9aa8c0);
  margin: 0 0 10px;
  text-wrap: pretty;
}
.field-spec-sec p:last-child {
  margin-bottom: 0;
}
.field-spec-sec__subh {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #dbe4f2);
  margin: 12px 0 6px;
  letter-spacing: 0.01em;
}
.field-spec-pre {
  max-width: 100%;
  overflow: auto;
  margin: 10px 0 12px;
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(210, 225, 255, 0.92);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(62, 207, 192, 0.04);
  tab-size: 2;
  white-space: pre;
}
.field-spec-hlist {
  margin: 0;
  padding-left: 1.1rem;
  max-width: var(--fs-max);
  color: var(--text-2, #9aa8c0);
  font-size: 14.5px;
  line-height: 1.55;
}
.field-spec-hlist li {
  margin-bottom: 4px;
}
.field-spec-hlist--dash {
  list-style: none;
  padding-left: 0;
}
.field-spec-hlist--dash li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: 6px;
}
.field-spec-hlist--dash li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--teal, #3ecfc0);
  font-weight: 400;
  opacity: 0.6;
}
.field-spec-ol {
  max-width: var(--fs-max);
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-2, #9aa8c0);
  font-size: 14.5px;
  line-height: 1.5;
}
.field-spec-ol--proof li {
  margin-bottom: 6px;
}
.field-spec-ol--proof li strong {
  color: var(--text, #dbe4f2);
  font-weight: 600;
}
.field-spec-code {
  font-size: 12.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(62, 207, 192, 0.1);
  color: rgba(180, 235, 228, 0.95);
  font-family: ui-monospace, Menlo, monospace;
}
.field-spec-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4, #5a6a84);
  margin: 2px 0 4px;
}
.field-spec-upd,
.field-spec-callout {
  border-left: 2px solid rgba(62, 207, 192, 0.4);
  padding: 2px 0 2px 10px;
  font-size: 14px;
  margin: 8px 0 0;
}
.field-spec-hlist--note {
  max-width: var(--fs-max);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2, #9aa8c0);
  margin: 8px 0 0;
  padding: 0;
}
.field-spec-sec--final p.field-spec-result {
  border-left: 2px solid rgba(139, 111, 245, 0.4);
  padding: 0 0 0 10px;
  max-width: none;
}
.field-spec-next {
  max-width: var(--fs-max);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 20px 0 0;
  padding-top: 8px;
}
.field-spec-next a {
  font-size: 13.5px;
}
@media (max-width: 880px) {
  .field-spec__layout {
    grid-template-columns: 1fr;
  }
  .field-spec-toc {
    position: static;
    max-width: none;
  }
}
@media (max-width: 520px) {
  .field-spec-pre {
    font-size: 10.5px;
    padding: 12px;
  }
}

/* (ZIRA Field page removed) */

/* Formation: unified live field monitor + field pattern cards */
.field-monitor {
  margin: 28px 0 8px;
  padding: 28px clamp(16px, 4vw, 28px) 32px;
  border-radius: 20px;
  border: 1px solid rgba(62, 207, 192, 0.14);
  background:
    radial-gradient(ellipse 90% 60% at 20% 0%, rgba(62, 207, 192, 0.1), transparent 55%),
    linear-gradient(165deg, rgba(8, 10, 28, 0.72) 0%, rgba(5, 7, 18, 0.5) 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}
.field-monitor__shell {
  max-width: var(--mw);
  margin: 0 auto;
}
.field-monitor__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(62, 207, 192, 0.9);
  margin: 0 0 8px;
}
.field-monitor__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3.5vw, 30px);
  margin: 0 0 12px;
  line-height: 1.15;
}
.field-monitor__lead {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 78ch;
}
.field-monitor__metrics {
  margin-bottom: 6px;
}
.field-monitor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 22px 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 8, 20, 0.42);
}
.field-monitor__toolbar-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: 0 0 auto;
}
.field-monitor__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 280px;
}
.field-monitor__tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 24, 0.55);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.field-monitor__tab:hover {
  border-color: rgba(62, 207, 192, 0.35);
  color: var(--text);
}
.field-monitor__tab.is-active {
  border-color: rgba(62, 207, 192, 0.55);
  background: rgba(62, 207, 192, 0.12);
  color: var(--text);
}
.field-monitor__open-toggle {
  font-size: 12px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}
.field-monitor__open-toggle input {
  accent-color: rgba(62, 207, 192, 0.85);
}
.field-monitor__economy {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.field-monitor__panel-intro {
  margin-bottom: 14px;
}
.field-monitor__panel-title {
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 500;
  line-height: 1.2;
}
.field-monitor__panel-lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-3);
  max-width: 78ch;
}
.field-monitor__anchors {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.field-monitor__class-summary {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  font-family: var(--font-mono);
}
.field-monitor__anchor-scroll {
  overflow: auto;
  max-height: min(440px, 52vh);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 6, 16, 0.35);
}
.field-monitor-anchor-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.field-monitor-anchor-table th,
.field-monitor-anchor-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.field-monitor-anchor-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  position: sticky;
  top: 0;
  background: rgba(6, 9, 22, 0.92);
  backdrop-filter: blur(6px);
  z-index: 1;
}
.field-monitor-anchor-table tr.fm-status--sec td:nth-child(3) {
  color: rgba(62, 207, 192, 0.95);
}
.field-monitor-anchor-table tr.fm-status--pend td:nth-child(3) {
  color: rgba(232, 170, 48, 0.95);
}
.field-monitor-anchor-table tr.fm-status--open td:nth-child(3) {
  color: var(--text-4);
}
.field-monitor-anchor-table .fm-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.field-monitor__anchor-foot {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-4);
  max-width: 72ch;
}

/* Formation page: one stacked live surface (economy monitor + topology map) */
.formation-live-unified {
  margin-top: 28px;
}
.formation-live-unified__rail {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(62, 207, 192, 0.14);
  background: rgba(6, 9, 22, 0.55);
}
.formation-live-unified__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(62, 207, 192, 0.92);
  margin: 0 0 10px;
}
.formation-live-unified__def {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 78ch;
}
.formation-live-unified__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
}
.formation-live-unified__jump a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(62, 207, 192, 0.35);
}
.formation-live-unified__jump a:hover {
  color: var(--text);
  border-bottom-color: rgba(62, 207, 192, 0.55);
}
.formation-live-unified .field-monitor {
  margin-top: 0;
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
.formation-live-unified .anchor-monitor--stacked {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.formation-live-unified .anchor-monitor--stacked::before {
  display: none;
}

.coord-metrics-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .coord-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.coord-metric-card {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 8, 22, 0.45);
}
.coord-metric-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.coord-metric-v {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.coord-metric-v--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-size: clamp(17px, 2.4vw, 22px);
}
.coord-metric-mid {
  color: var(--text-4);
  font-weight: 300;
}
.coord-metric-hint {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-4);
}

.economy-live-panel {
  margin: 16px 0 12px;
  padding: 20px clamp(14px, 3vw, 24px) 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 10, 28, 0.62);
}
.economy-live-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 8px;
}
.economy-live-panel__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.1vw, 28px);
  line-height: 1.2;
}
.economy-live-panel__lead {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}
.economy-live-panel__table-wrap {
  overflow-x: auto;
}
.economy-live-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.economy-live-table th,
.economy-live-table td {
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}
.economy-live-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.economy-class-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.economy-class-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cls, var(--teal));
  box-shadow: 0 0 10px rgba(62, 207, 192, 0.45);
}
.economy-live-panel__hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-4);
}

.field-pattern-prelude {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 14px;
  max-width: 62ch;
}
.field-pattern-placeholder {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-4);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  margin: 0 0 14px;
}
.field-pattern-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 560px) {
  .field-pattern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .field-pattern-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.field-pattern-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 14px 16px;
  margin: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 10, 26, 0.55);
  color: var(--text);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.15s var(--ease);
  font: inherit;
}
.field-pattern-card:hover {
  border-color: rgba(62, 207, 192, 0.22);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}
.field-pattern-card:focus-visible {
  outline: 2px solid rgba(62, 207, 192, 0.55);
  outline-offset: 2px;
}
.field-pattern-card--selected {
  border-color: rgba(62, 207, 192, 0.45);
  box-shadow:
    0 0 0 1px rgba(62, 207, 192, 0.12) inset,
    0 14px 40px rgba(0, 0, 0, 0.25);
}
.field-pattern-viz {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.field-pattern-svg {
  width: 56px;
  height: 56px;
  display: block;
}
.field-pattern-label {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
}
.field-pattern-detail {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
}

/* ── ZIRA site shell: unified field rhythm (live strip + nav + heroes) ── */
:root {
  --live-strip-stack-h: clamp(44px, 8vw, 56px);
}

html.zira-site {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html.zira-site {
    scroll-behavior: auto;
  }
}

html.zira-site::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 400;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(62, 207, 192, 0.35) 18%,
    rgba(139, 111, 245, 0.45) 52%,
    rgba(62, 207, 192, 0.28) 82%,
    transparent 100%
  );
  opacity: 0.88;
}

html.zira-site .site-nav {
  border-bottom-color: rgba(62, 207, 192, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 40px rgba(0, 0, 0, 0.22);
}

/* Full-width strip after fixed nav (not in-page / not inside padded main) */
.live-field-strip:not(.live-field-strip--inpage) {
  margin-top: var(--nav-h);
}

.live-field-strip {
  position: relative;
  overflow: hidden;
}
.live-field-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(62, 207, 192, 0.05) 50%,
    transparent 60%
  );
  animation: zira-lfs-sheen 14s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-field-strip::after {
    animation: none;
    opacity: 0;
  }
}
@keyframes zira-lfs-sheen {
  0%,
  100% {
    transform: translateX(-12%);
    opacity: 0.55;
  }
  50% {
    transform: translateX(12%);
    opacity: 1;
  }
}

html.zira-site .live-field-strip .lfs-k {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--text-3) 0%,
    var(--teal) 42%,
    rgba(139, 111, 245, 0.95) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  html.zira-site .live-field-strip .lfs-k {
    color: var(--teal);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
  }
}

/* FAQ: strip clears nav; main should not add nav padding again */
.live-field-strip + main.page {
  padding-top: clamp(18px, 3vw, 28px);
}

/* Legal: strip before main */
.live-field-strip + main.zf-legal {
  padding-top: clamp(28px, 4vw, 40px);
}

/* Reference: docs grid below live strip */
.live-field-strip + .docs-shell {
  padding-top: 0;
  min-height: calc(100vh - var(--nav-h) - var(--live-strip-stack-h));
}
.live-field-strip + .docs-shell .docs-sidebar,
.live-field-strip + .docs-shell .ref-sidebar {
  top: calc(var(--nav-h) + var(--live-strip-stack-h) + 16px);
  max-height: calc(100vh - var(--nav-h) - var(--live-strip-stack-h) - 40px);
}

/* FAQ hero: field eyebrow + glow aligned with System rhythm */
.page-hero--field {
  position: relative;
  overflow: hidden;
}
.page-hero--field::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 12% 0%, rgba(62, 207, 192, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 45% at 92% 8%, rgba(139, 111, 245, 0.1), transparent 50%);
  z-index: 0;
}
.page-hero--field .wrap-sm {
  position: relative;
  z-index: 1;
}
.page-hero--field .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(62, 207, 192, 0.95);
}
.page-hero--field .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px rgba(62, 207, 192, 0.55);
  animation: fp-breathe 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--field .eyebrow::before {
    animation: none;
  }
}

html.zira-site .faq-item {
  background: rgba(8, 10, 28, 0.5);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
html.zira-site .faq-item.open {
  background: rgba(15, 18, 48, 0.78);
  box-shadow: inset 0 0 0 1px rgba(62, 207, 192, 0.1);
}

html.zira-site .admin-topbar {
  border-bottom: 1px solid rgba(62, 207, 192, 0.12);
  background: linear-gradient(180deg, rgba(10, 12, 32, 0.98) 0%, rgba(6, 8, 20, 0.92) 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Reference mobile: nav + strip already clear the top; do not add nav-h again to body */
@media (max-width: 800px) {
  .live-field-strip + .docs-shell .docs-body {
    padding-top: 22px;
  }
}