/* ============================================================
   RefractEHR: clinical execution intelligence infrastructure
   Design system: near-black navy volume, cobalt/cyan machine
   demand, amber physical execution. Geist / Geist Mono.
   ============================================================ */

:root {
  --bg: #04070e;
  --bg-raise: #070d18;
  --bg-panel: #080f1c;
  --navy-volume: #0b1526;
  --ink: #eef3fa;
  --ink-dim: #a9b6c8;
  --ink-faint: #66758c;
  --cobalt: #3b6dff;
  --cobalt-soft: #6d93ff;
  --cyan: #3fd6ea;
  --amber: #f0a43c;
  --amber-dim: #a67428;
  --hairline: rgba(150, 175, 210, 0.14);
  --hairline-strong: rgba(150, 175, 210, 0.26);
  --panel-edge: rgba(150, 175, 210, 0.18);
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-signal: cubic-bezier(0.12, 0.82, 0.2, 1);
  --ease-refract: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-settle: cubic-bezier(0.2, 0.72, 0.2, 1);
  --motion-instant: 160ms;
  --motion-signal: 420ms;
  --motion-refract: 680ms;
  --motion-settle: 880ms;
  --shell-x: clamp(20px, 4.5vw, 64px);
  --header-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  isolation: isolate;
}
body.nav-open { overflow: hidden; }

::selection { background: rgba(59, 109, 255, 0.35); color: #fff; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
img, canvas, svg { max-width: 100%; display: block; }
main, .site-footer { position: relative; z-index: 1; }

/* persistent environmental field: quiet enough to disappear, structured enough to be felt */
.rx-ambient {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  opacity: 0.46;
  contain: strict;
}
.rx-ambient > i { position: absolute; display: block; }
.rx-ambient-grid {
  inset: -12%;
  background-image:
    linear-gradient(rgba(109,147,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,147,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 28%, #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at 60% 28%, #000 0%, transparent 68%);
  animation: rx-grid-drift 28s linear 1 both;
}
.rx-ambient-plane {
  width: 58vw; height: 140vh; top: -22vh;
  background: linear-gradient(90deg, transparent 0%, rgba(59,109,255,.028) 46%, rgba(63,214,234,.065) 50%, transparent 54%);
  transform: rotate(-18deg);
}
.rx-ambient-plane--a { left: 12vw; animation: rx-plane-pass 19s var(--ease-refract) 1 both; }
.rx-ambient-plane--b { right: -22vw; opacity: .45; animation: rx-plane-pass 27s 7s var(--ease-refract) 1 reverse both; }
@keyframes rx-grid-drift { to { transform: translate3d(72px, 72px, 0); } }
@keyframes rx-plane-pass {
  0%, 18% { transform: translate3d(-22vw,0,0) rotate(-18deg); opacity: 0; }
  34%, 68% { opacity: 1; }
  84%, 100% { transform: translate3d(32vw,0,0) rotate(-18deg); opacity: 0; }
}

.mono { font-family: var(--font-mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -60px; left: 20px; z-index: 300;
  background: var(--cobalt); color: #fff; padding: 10px 18px;
  border-radius: 4px; text-decoration: none; font-size: 14px;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 14px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h);
  padding: 0 var(--shell-x);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--motion-signal), border-color var(--motion-signal), box-shadow var(--motion-signal), transform var(--motion-refract) var(--ease-signal), opacity var(--motion-signal);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, #050a14 92%, transparent);
  border-bottom-color: rgba(109,147,255,.22);
  box-shadow: 0 18px 50px rgba(0,0,0,.26), 0 1px 0 rgba(63,214,234,.035) inset;
}
.page-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--cobalt), var(--cyan));
  transform-origin: 0 50%; transform: scaleX(0);
}

.brand {
  display: inline-flex; align-items: center; gap: 13px;
  text-decoration: none; margin-right: auto;
}
.brand-symbol, .brand-logo {
  display: block;
  height: auto;
  image-rendering: auto;
}
.brand-symbol {
  width: 50px; height: 50px; object-fit: contain;
  flex: 0 0 auto;
}
.brand-wordmark {
  position: relative;
  display: inline-flex; align-items: baseline;
  font-family: var(--font-sans);
  font-size: 34px; font-weight: 700; line-height: 1;
  letter-spacing: -0.055em;
  transform: scaleY(1.035);
  transform-origin: left center;
  filter: drop-shadow(0 6px 14px rgba(15, 37, 78, 0.3));
}
.brand-wordmark-refract, .brand-wordmark-ehr {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-wordmark-refract {
  background-image:
    linear-gradient(105deg, transparent 33%, rgba(255,255,255,.9) 46%, transparent 59%),
    linear-gradient(180deg, #ffffff 0%, #e8edf5 38%, #9da9bc 72%, #d9e0ea 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  animation: wordmark-sheen 1.35s 1.15s var(--ease-refract) 1 both;
}
.brand:hover .brand-wordmark-refract,
.brand:focus-visible .brand-wordmark-refract { animation: wordmark-sheen-hover 920ms var(--ease-refract) 1 both; }
.brand-wordmark-ehr {
  margin-left: 0.035em;
  background-image: linear-gradient(180deg, #5be1ff 0%, #159cff 38%, #3d62ff 100%);
  text-shadow: 0 0 22px rgba(43, 142, 255, 0.16);
}
@keyframes wordmark-sheen {
  0%, 18% { background-position: 120% 0, 0 0; }
  100% { background-position: -70% 0, 0 0; }
}
@keyframes wordmark-sheen-hover {
  from { background-position: 120% 0, 0 0; }
  to { background-position: -70% 0, 0 0; }
}
.site-footer .brand-logo-master { width: min(340px, 82vw); }
@media (max-width: 520px) {
  .site-header .brand { gap: 11px; }
  .brand-symbol { width: 46px; height: 46px; }
  .brand-wordmark { font-size: 31px; }
  .site-footer .brand-logo-master { width: min(310px, 86vw); }
}
@media (max-width: 360px) {
  .site-header { gap: 16px; }
  .site-header .brand { gap: 9px; }
  .brand-symbol { width: 42px; height: 42px; }
  .brand-wordmark { font-size: 28px; }
}

.site-nav { display: flex; align-items: center; gap: 4px; position: relative; }
.site-nav a {
  position: relative;
  text-decoration: none; font-size: 14px; color: var(--ink-dim);
  padding: 8px 13px; border-radius: 6px;
  transition: color 0.18s;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cobalt), var(--cyan));
}
.rx-js .site-nav a[aria-current="page"]::after { opacity: 0; }
.rx-nav-trace {
  position: absolute; left: 0; bottom: 2px;
  width: var(--rx-nav-w, 0px); height: 2px;
  background: linear-gradient(90deg, transparent, var(--cobalt) 16%, var(--cyan) 72%, #fff);
  box-shadow: 0 0 14px rgba(63,214,234,.34);
  opacity: 0;
  transform: translate3d(var(--rx-nav-x, 0px),0,0);
  transform-origin: 0 50%;
  transition: transform var(--motion-signal) var(--ease-signal), width var(--motion-signal) var(--ease-signal), opacity var(--motion-instant);
  pointer-events: none;
}
.rx-nav-trace.is-visible { opacity: 1; }

.header-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--hairline-strong);
  padding: 10px 16px; border-radius: 5px;
  transition: border-color 0.18s, background 0.18s;
  white-space: nowrap;
}
.header-cta:hover { border-color: var(--cobalt-soft); background: rgba(59, 109, 255, 0.08); }
.header-cta span { color: var(--cobalt-soft); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; border: 1px solid var(--hairline-strong);
  border-radius: 6px; background: transparent; cursor: pointer;
  position: relative;
}
.nav-toggle i {
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s, top 0.25s var(--ease-out);
}
.nav-toggle i:nth-child(1) { top: 16px; }
.nav-toggle i:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { top: 21px; transform: rotate(-45deg); }

@media (min-width: 981px) {
  .site-nav .header-cta { display: none; }
}
@media (max-width: 980px) {
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 190;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: 26px var(--shell-x) 40px;
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.3s var(--ease-out), opacity 0.25s, visibility 0s 0.3s;
    overflow-y: auto;
  }
  .site-nav.open {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform 0.3s var(--ease-out), opacity 0.25s;
  }
  .site-nav a {
    font-size: 21px; padding: 17px 4px;
    border-bottom: 1px solid var(--hairline);
  }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-nav a[aria-current="page"] { color: var(--cyan); }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .site-nav .header-cta {
    display: inline-flex; margin-top: 26px; justify-content: center; padding: 15px 16px;
  }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px;
  font-size: 15px; font-weight: 550; text-decoration: none;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  position: relative; isolation: isolate; overflow: hidden;
  transition: background var(--motion-instant), border-color var(--motion-instant), transform var(--motion-signal) var(--ease-signal), box-shadow var(--motion-signal);
}
.btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,.05) 42%, rgba(63,214,234,.22) 49%, transparent 57%);
  transform: translate3d(-115%,0,0) skewX(-14deg);
  transition: transform var(--motion-refract) var(--ease-refract);
}
.btn:hover::before, .btn:focus-visible::before { transform: translate3d(115%,0,0) skewX(-14deg); }
.btn span { font-family: var(--font-mono); font-size: 14px; transition: transform var(--motion-signal) var(--ease-signal), color var(--motion-instant); }
.btn:hover span, .btn:focus-visible span { transform: translate3d(3px,0,0); color: var(--cyan); }
.btn.rx-magnetic { transform: translate3d(var(--rx-mx,0),var(--rx-my,0),0); }
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: #4d7bff; box-shadow: 0 12px 38px -16px rgba(59,109,255,.9); }
.btn-ghost { border-color: var(--hairline-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--cobalt-soft); background: rgba(59, 109, 255, 0.07); }

/* ============================================================
   Shell / sections
   ============================================================ */
main { display: block; }
.shell { padding-left: var(--shell-x); padding-right: var(--shell-x); }
.measure { max-width: 1320px; margin-left: auto; margin-right: auto; }

.section { padding: clamp(84px, 11vw, 150px) 0; position: relative; }
.section--tight { padding: clamp(60px, 8vw, 110px) 0; }

.section-meta {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em;
  color: var(--ink-faint); margin-bottom: 26px;
}
.section-meta > span:first-child { color: var(--cobalt-soft); }
.section-meta i { flex: 0 1 64px; height: 1px; background: var(--hairline-strong); }
.section-meta b { font-weight: 500; color: var(--ink-dim); }

.section-title {
  font-size: clamp(34px, 4.6vw, 62px);
  max-width: 18ch;
}
.section-title .dim { color: var(--ink-faint); }
.section-deck {
  margin-top: 24px; max-width: 62ch;
  color: var(--ink-dim); font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.65;
}
.section-deck p + p { margin-top: 14px; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(26px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}

/* ============================================================
   Artifact frame: the shared "instrument" chrome every
   signature visual lives inside.
   ============================================================ */
.artifact {
  position: relative; isolation: isolate;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(20, 32, 54, 0.5), rgba(8, 15, 28, 0.9)),
    var(--bg-panel);
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(180, 205, 235, 0.07);
  overflow: hidden;
}
.artifact-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  color: var(--ink-faint);
  background: rgba(10, 18, 32, 0.6);
}
.artifact-bar .lamp {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(63, 214, 234, 0.8);
  flex: 0 0 auto;
}
.artifact-bar .lamp--amber { background: var(--amber); box-shadow: 0 0 8px rgba(240, 164, 60, 0.8); }
.artifact-bar .spacer { margin-left: auto; }
.artifact-bar b { font-weight: 500; color: var(--ink-dim); }

.artifact-foot {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  padding: 14px 20px;
  border-top: 1px solid var(--hairline);
  background: rgba(10, 18, 32, 0.6);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* readout chip used across artifacts */
.readout { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.readout span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.readout strong {
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  color: var(--ink); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.readout strong.cyan { color: var(--cyan); }
.readout strong.amber { color: var(--amber); }
.readout strong.cobalt { color: var(--cobalt-soft); }

/* control buttons inside artifacts */
.ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 18px;
  background: rgba(22, 36, 60, 0.55);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-dim); border-radius: 6px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.ctl:hover { color: var(--ink); border-color: var(--cobalt-soft); }
.ctl[aria-pressed="true"], .ctl.active {
  background: rgba(59, 109, 255, 0.18);
  border-color: var(--cobalt);
  color: #fff;
}
.ctl:disabled { opacity: 0.4; cursor: default; }
.ctl--icon { padding: 0; font-size: 15px; }

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(64px, 9vw, 120px));
  padding-bottom: clamp(48px, 6vw, 84px);
  overflow: hidden;
}
.page-hero-kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em;
  color: var(--cobalt-soft); margin-bottom: 28px;
}
.page-hero-kicker i {
  width: 8px; height: 8px; border: 1px solid var(--cyan);
  transform: rotate(45deg); flex: 0 0 auto;
}
.page-hero h1 {
  font-size: clamp(40px, 5.6vw, 76px);
  max-width: 15ch;
}
.page-hero h1 .dim { color: var(--ink-faint); }
.page-hero-deck {
  margin-top: 26px; max-width: 58ch;
  color: var(--ink-dim); font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.65;
}
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero-field {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}

/* ============================================================
   Trust rail
   ============================================================ */
.trust-rail {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(9, 16, 29, 0.55);
}
.trust-rail-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-rail-grid > div {
  padding: 20px 22px;
  border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 5px;
}
.trust-rail-grid > div:first-child { border-left: 0; }
.trust-rail-grid span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.trust-rail-grid b {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em;
  font-weight: 500; color: var(--ink-dim);
}
.trust-rail-note {
  padding: 12px 22px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--ink-faint);
}
@media (max-width: 860px) {
  .trust-rail-grid { grid-template-columns: 1fr 1fr; }
  .trust-rail-grid > div:nth-child(odd) { border-left: 0; }
  .trust-rail-grid > div { border-top: 1px solid var(--hairline); }
  .trust-rail-grid > div:nth-child(-n+2) { border-top: 0; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--bg-raise);
  margin-top: clamp(60px, 8vw, 120px);
}
.footer-top {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  padding: clamp(48px, 6vw, 80px) 0 40px;
}
.footer-top .brand { margin-right: 0; }
.footer-blurb { margin-top: 18px; color: var(--ink-dim); max-width: 42ch; font-size: 15px; }
.footer-cols { display: flex; gap: clamp(32px, 6vw, 90px); justify-content: flex-end; }
.footer-cols > div { display: flex; flex-direction: column; gap: 11px; }
.footer-cols span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--ink-faint); margin-bottom: 6px;
}
.footer-cols a {
  color: var(--ink-dim); text-decoration: none; font-size: 14.5px;
  transition: color 0.15s;
}
.footer-cols a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center;
  padding: 20px 0 28px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.footer-bottom b { font-weight: 500; color: var(--ink-dim); margin-left: auto; }
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-cols { justify-content: flex-start; }
  .footer-bottom b { margin-left: 0; }
}

/* ============================================================
   HOME: velocity corridor hero
   ============================================================ */
.corridor-wrap { position: relative; height: 320vh; }
.corridor-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: stretch;
}
.corridor-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.corridor-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 40%, rgba(4, 7, 14, 0.92) 0%, rgba(4, 7, 14, 0.55) 38%, rgba(4, 7, 14, 0) 62%),
    linear-gradient(180deg, rgba(4, 7, 14, 0.85) 0%, rgba(4, 7, 14, 0) 22%, rgba(4, 7, 14, 0) 72%, var(--bg) 100%);
}
.corridor-copy {
  position: relative; z-index: 3;
  width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 20px) var(--shell-x) 90px;
  max-width: min(74vw, 1000px);
  pointer-events: none;
}
.corridor-copy > * { pointer-events: auto; }
.hero-kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.18em; color: var(--cyan);
  margin-bottom: 30px;
}
.hero-kicker i { width: 34px; height: 1px; background: var(--cyan); opacity: 0.6; }
.corridor-copy h1 {
  font-size: clamp(34px, 4.3vw, 62px);
  letter-spacing: -0.03em;
}
@media (max-width: 900px) {
  .corridor-copy { max-width: 100%; }
  .corridor-copy h1 { white-space: normal; font-size: clamp(34px, 8.6vw, 52px); }
}
.corridor-copy h1 span, .corridor-copy h1 strong {
  display: block; overflow: hidden;
}
.corridor-copy h1 strong { color: var(--ink-faint); font-weight: 600; }
.corridor-copy h1 .line { display: block; transform: translateY(110%); }
.hero-ready .corridor-copy h1 .line {
  transform: none;
  transition: transform 0.9s var(--ease-out);
}
.hero-ready .corridor-copy h1 strong .line { transition-delay: 0.14s; }
.hero-deck {
  margin-top: 28px; max-width: 52ch;
  color: var(--ink-dim); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.66;
}
.hero-cat {
  margin-top: 18px; padding-left: 16px;
  border-left: 2px solid var(--cobalt);
  color: var(--ink); font-size: clamp(15px, 1.3vw, 17px);
  max-width: 48ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-deck, .hero-cat, .hero-ctas, .hero-kicker {
  opacity: 0; transform: translateY(18px);
}
.hero-ready .hero-deck, .hero-ready .hero-cat, .hero-ready .hero-ctas, .hero-ready .hero-kicker {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.hero-ready .hero-kicker { transition-delay: 0.05s; }
.hero-ready .hero-deck { transition-delay: 0.35s; }
.hero-ready .hero-cat { transition-delay: 0.5s; }
.hero-ready .hero-ctas { transition-delay: 0.65s; }

.corridor-phase {
  position: absolute; z-index: 3;
  right: var(--shell-x); bottom: 110px;
  text-align: right;
  font-family: var(--font-mono); letter-spacing: 0.14em;
  pointer-events: none;
}
.corridor-phase span {
  display: block; font-size: clamp(13px, 1.5vw, 19px);
  color: var(--ink); opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.corridor-phase span.amber { color: var(--amber); }
.corridor-phase span.on { opacity: 1; transform: none; }
.corridor-phase span + span { margin-top: 10px; }

.corridor-scroll-cue {
  position: absolute; z-index: 3; left: var(--shell-x); bottom: 34px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--ink-faint);
  transition: opacity 0.4s;
}
.corridor-scroll-cue i {
  width: 1px; height: 34px; background: var(--hairline-strong);
  position: relative; overflow: hidden;
}
.corridor-scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: -40%;
  width: 100%; height: 40%;
  background: var(--cyan);
  animation: cue-drop 1.8s var(--ease-out) infinite;
}
@keyframes cue-drop { to { top: 110%; } }

.hero-readouts {
  position: absolute; z-index: 3; right: var(--shell-x);
  top: calc(var(--header-h) + 26px);
  display: flex; gap: 26px;
  pointer-events: none;
}
.hero-readouts .readout {
  background: rgba(6, 11, 21, 0.72);
  border: 1px solid var(--hairline);
  border-radius: 6px; padding: 10px 14px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 980px) {
  .corridor-wrap { height: 260vh; }
  .hero-readouts { display: none; }
  .corridor-phase { bottom: 88px; }
  .corridor-copy { max-width: 620px; }
}

/* home sections */
.velocity-artifact-canvas { width: 100%; height: clamp(360px, 46vw, 560px); display: block; }

/* The Unmodeled Interval: one continuous post-hero causality field */
.continuum {
  position: relative;
  height: 390svh;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(90% 72% at 70% 42%, rgba(34,65,127,.18), transparent 66%),
    linear-gradient(180deg, #04070e 0%, #050a13 48%, #04070e 100%);
}
.continuum::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(109,147,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,147,255,.026) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000 86%, transparent);
}
.continuum-pin {
  position: sticky; top: var(--header-h);
  height: calc(100svh - var(--header-h));
  display: flex; align-items: center; overflow: hidden;
}
.continuum-shell {
  position: relative; z-index: 1;
  width: 100%; height: min(78vh, 760px);
  display: grid; grid-template-columns: minmax(420px,.8fr) minmax(0,1.55fr);
  gap: clamp(30px,4vw,68px); align-items: stretch;
}
.continuum-narrative { min-width: 0; display: flex; flex-direction: column; }
.continuum-meta { flex: 0 0 auto; margin-bottom: clamp(30px,4vh,54px); }
.continuum-beats { position: relative; flex: 1 1 auto; min-height: 310px; }
.continuum-beat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translate3d(0,28px,0);
  pointer-events: none;
  transition: opacity 420ms var(--ease-signal), transform 680ms var(--ease-settle);
}
.continuum-beat.active { opacity: 1; transform: none; pointer-events: auto; }
.continuum-code {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .19em;
  color: var(--cyan); margin-bottom: 20px;
}
.continuum-beat h2 {
  font-size: clamp(30px,3.2vw,56px); line-height: 1.04;
  letter-spacing: -.035em; max-width: 13ch;
}
.continuum-beat h2 span { color: var(--ink-faint); }
.continuum-beat > p:last-of-type {
  margin-top: 24px; max-width: 49ch;
  color: var(--ink-dim); font-size: clamp(15px,1.15vw,17.5px); line-height: 1.65;
}
.continuum-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.continuum-ctas .btn { min-height: 46px; padding-inline: 20px; }
.continuum-nav {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(5,1fr);
  gap: 6px; margin-top: 22px;
}
.continuum-nav button {
  appearance: none; min-width: 0; min-height: 52px; padding: 9px 6px;
  border: 1px solid var(--hairline); border-radius: 4px;
  background: rgba(10,18,32,.42); color: var(--ink-faint);
  text-align: center; cursor: pointer; overflow: hidden;
  transition: border-color var(--motion-signal), background var(--motion-signal), color var(--motion-signal), transform var(--motion-signal) var(--ease-signal);
}
.continuum-nav button:hover,
.continuum-nav button:focus-visible { color: var(--ink); border-color: var(--cobalt-soft); }
.continuum-nav button.active { color: var(--ink); border-color: rgba(63,214,234,.5); background: rgba(59,109,255,.1); }
.continuum-nav button span,
.continuum-nav button b { display: block; }
.continuum-nav button span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: var(--cobalt-soft); }
.continuum-nav button b {
  margin-top: 5px; font-size: 10px; line-height: 1.1; letter-spacing: -.015em;
  font-weight: 550; white-space: nowrap;
}

.continuum-artifact {
  min-width: 0; height: 100%; display: flex; flex-direction: column;
  border-color: rgba(126,158,206,.23);
  background:
    radial-gradient(80% 74% at 58% 45%, rgba(31,62,123,.24), transparent 68%),
    linear-gradient(180deg, rgba(12,22,40,.96), rgba(4,8,16,.98));
  box-shadow: 0 54px 120px -54px rgba(0,0,0,.95), 0 0 90px -60px rgba(59,109,255,.55), inset 0 1px 0 rgba(210,230,255,.06);
}
.continuum-artifact .artifact-bar { min-height: 45px; }
.continuum-canvas { width: 100%; min-height: 0; flex: 1 1 auto; display: block; }
.continuum-lineage {
  flex: 0 0 34px; display: flex; align-items: center; gap: 10px;
  padding: 0 18px; border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; color: var(--ink-faint);
}
.continuum-lineage i { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(59,109,255,.18), rgba(63,214,234,.56)); transform-origin: 0 50%; }
.continuum-posture {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--hairline);
  opacity: 0; transform: translate3d(0,12px,0);
  transition: opacity 620ms var(--ease-signal), transform 720ms var(--ease-settle);
}
.continuum-artifact[data-continuum-state="retain"] .continuum-posture { opacity: 1; transform: none; }
.continuum-posture > div { min-width: 0; padding: 12px 14px; border-left: 1px solid var(--hairline); }
.continuum-posture > div:first-child { border-left: 0; }
.continuum-posture span,
.continuum-posture b { display: block; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continuum-posture span { font-size: 8px; letter-spacing: .16em; color: var(--ink-faint); }
.continuum-posture b { margin-top: 5px; font-size: 9px; letter-spacing: .08em; color: var(--ink-dim); font-weight: 550; }

@media (max-width: 980px) {
  .continuum { height: 360svh; }
  .continuum-pin { align-items: stretch; }
  .continuum-shell {
    height: 100%; padding-block: 14px;
    grid-template-columns: 1fr; grid-template-rows: minmax(0,56%) minmax(0,44%); gap: 12px;
  }
  .continuum-artifact { grid-row: 1; }
  .continuum-narrative { grid-row: 2; }
  .continuum-meta { display: none; }
  .continuum-beats { min-height: 0; }
  .continuum-beat { justify-content: flex-start; padding-top: 6px; }
  .continuum-beat h2 { max-width: 22ch; font-size: clamp(25px,5.6vw,38px); }
  .continuum-beat > p:last-of-type { margin-top: 12px; font-size: 14px; line-height: 1.52; max-width: 70ch; }
  .continuum-code { margin-bottom: 9px; }
  .continuum-nav { margin-top: 8px; }
  .continuum-nav button { min-height: 44px; }
  .continuum-ctas { margin-top: 14px; }
  .continuum-ctas .btn { min-height: 42px; }
}
@media (max-width: 640px) {
  .continuum { height: 340svh; }
  .continuum-shell { padding-inline: 12px; grid-template-rows: minmax(0,54%) minmax(0,46%); }
  .continuum-artifact .artifact-bar { padding-inline: 12px; gap: 8px; font-size: 9px; }
  .continuum-artifact .artifact-bar > span:not(.lamp):not(.spacer):last-child { display: block; }
  .continuum-artifact .artifact-bar > span:nth-of-type(2) { display: none; }
  .continuum-lineage { gap: 5px; padding-inline: 10px; font-size: 6.8px; letter-spacing: .08em; }
  .continuum-posture { grid-template-columns: 1fr 1fr; }
  .continuum-posture > div:nth-child(3) { border-left: 0; }
  .continuum-posture > div:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .continuum-posture > div { padding: 7px 9px; }
  .continuum-posture b { font-size: 7.5px; }
  .continuum-beat h2 { font-size: clamp(23px,7vw,31px); }
  .continuum-beat > p:last-of-type { font-size: 13px; }
  .continuum-nav button { padding: 7px 5px; text-align: center; }
  .continuum-nav button b { display: none; }
  .continuum-nav button span { font-size: 9px; }
  .continuum-ctas { gap: 6px; }
  .continuum-ctas .btn { font-size: 12px; padding-inline: 12px; }
}
@media (max-width: 980px) and (max-height: 720px) {
  .continuum-shell { grid-template-rows: minmax(0,46%) minmax(0,54%); }
  .continuum-nav { display: none; }
  .continuum-beat h2 { font-size: clamp(22px,5vw,30px); }
  .continuum-beat > p:last-of-type { margin-top: 10px; font-size: 12.5px; line-height: 1.42; }
  .continuum-code { margin-bottom: 7px; }
  .continuum-ctas { margin-top: 10px; }
  .continuum-ctas .btn { min-height: 38px; }
  .continuum-artifact .artifact-bar { min-height: 40px; }
  .continuum-lineage { flex-basis: 28px; }
  .continuum-posture { grid-template-columns: repeat(4,1fr); }
  .continuum-posture > div,
  .continuum-posture > div:nth-child(n+3) { padding: 6px 7px; border-top: 0; }
  .continuum-posture > div:nth-child(3) { border-left: 1px solid var(--hairline); }
  .continuum-posture span { font-size: 6.5px; }
  .continuum-posture b { font-size: 6.8px; }
}
@media (max-width: 980px) and (max-height: 560px) {
  .continuum-shell { grid-template-rows: minmax(0,40%) minmax(0,60%); }
  .continuum-lineage { display: none; }
}

/* If the continuum runtime is unavailable, retain the complete narrative. */
.continuum:not(.continuum-ready) { height: auto; padding: clamp(72px,10vw,120px) 0; }
.continuum:not(.continuum-ready) .continuum-pin { position: relative; top: auto; height: auto; overflow: visible; }
.continuum:not(.continuum-ready) .continuum-shell { height: auto; display: block; }
.continuum:not(.continuum-ready) .continuum-meta { display: flex; }
.continuum:not(.continuum-ready) .continuum-beats { min-height: 0; display: grid; gap: clamp(54px,8vw,96px); }
.continuum:not(.continuum-ready) .continuum-beat {
  position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto;
}
.continuum:not(.continuum-ready) .continuum-beat h2 { max-width: 20ch; }
.continuum:not(.continuum-ready) .continuum-nav,
.continuum:not(.continuum-ready) .continuum-artifact { display: none; }

.busy-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: 10px; overflow: hidden;
  margin-top: 54px;
}
.busy-cell {
  background: var(--bg-panel); padding: 26px 24px 30px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.2s;
}
.busy-cell:hover { background: #0b1424; }
.busy-cell span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--cobalt-soft); }
.busy-cell b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.busy-cell p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) { .busy-grid { grid-template-columns: 1fr; } }

.gateway-trace {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 42px; padding: 13px 16px;
  border: 1px solid var(--hairline); border-radius: 6px;
  background: rgba(9,16,29,.44);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
}
.gateway-trace span { color: var(--ink-faint); }
.gateway-trace b { color: var(--cobalt-soft); font-weight: 550; }
.gateway-trace em { color: var(--cyan); font-style: normal; margin-left: auto; }
.gateway-trace i { flex: 1 1 32px; max-width: 80px; height: 1px; background: linear-gradient(90deg, var(--cobalt), var(--cyan)); opacity: .45; }
.gateway-grid { display: grid; gap: 10px; margin-top: 14px; }
.gateway {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 58px minmax(0,1fr) minmax(190px,26%) 24px; align-items: center; gap: 24px;
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 24px 28px; min-height: 160px;
  text-decoration: none;
  background: rgba(9, 16, 29, 0.4);
  transition: border-color var(--motion-instant), background var(--motion-instant), transform var(--motion-signal) var(--ease-signal), box-shadow var(--motion-signal);
}
.gateway::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--cobalt), var(--cyan), transparent);
  opacity: 0; transform: scaleY(.2);
  transition: opacity var(--motion-signal), transform var(--motion-refract) var(--ease-refract);
}
.gateway:hover,
.gateway:focus-visible { border-color: rgba(109,147,255,.5); background: rgba(14,24,44,.72); transform: translateX(4px); box-shadow: 0 26px 70px -46px rgba(59,109,255,.7); }
.gateway:hover::before,
.gateway:focus-visible::before { opacity: 1; transform: scaleY(1); }
.gateway > span {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); letter-spacing: 0.1em;
}
.gateway small {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--cobalt-soft); margin-bottom: 8px;
}
.gateway h3 { font-size: clamp(22px, 2.6vw, 32px); }
.gateway p { color: var(--ink-dim); margin-top: 8px; max-width: 58ch; font-size: 15px; }
.gateway-preview {
  width: 100%; height: 108px; display: block;
  border-left: 1px solid var(--hairline); opacity: .68;
  transition: opacity var(--motion-signal), transform var(--motion-settle) var(--ease-signal);
}
.gateway:hover .gateway-preview,
.gateway:focus-visible .gateway-preview { opacity: 1; transform: translate3d(3px,0,0); }
.gateway b { font-size: 22px; color: var(--ink-faint); transition: color 0.2s, transform 0.25s var(--ease-out); }
.gateway:hover b { color: var(--cyan); transform: translate(4px, -4px); }
@media (max-width: 800px) {
  .gateway-trace { gap: 8px 12px; }
  .gateway-trace i { display: none; }
  .gateway-trace em { flex-basis: 100%; margin-left: 0; }
  .gateway { grid-template-columns: 44px minmax(0,1fr); gap: 12px 16px; padding: 22px 18px; }
  .gateway-preview { grid-column: 1 / -1; height: 108px; border-left: 0; border-top: 1px solid var(--hairline); }
  .gateway > b { display: none; }
}

.finale {
  text-align: center;
  padding: clamp(90px, 12vw, 170px) 0;
}
.finale p.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--ink-faint); margin-bottom: 26px;
}
.finale h2 {
  font-size: clamp(28px, 3.6vw, 50px);
  max-width: 26ch; margin: 0 auto;
}
.finale .hero-ctas { justify-content: center; margin-top: 44px; opacity: 1; transform: none; }

/* ============================================================
   PLATFORM: operating loop
   ============================================================ */
.loop-tabs {
  display: flex; gap: 6px; padding: 14px 16px 0;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.loop-tabs::-webkit-scrollbar { display: none; }
.loop-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 12px 18px 16px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em;
  color: var(--ink-faint);
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  transition: color 0.18s;
  min-height: 48px;
}
.loop-tab i {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.4;
}
.loop-tab:hover { color: var(--ink-dim); }
.loop-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--cyan); }
.loop-tab[aria-selected="true"] i { background: var(--cyan); opacity: 1; box-shadow: 0 0 8px rgba(63, 214, 234, 0.8); }
.loop-stage-canvas { width: 100%; height: clamp(340px, 40vw, 480px); display: block; }

.loop-detail {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
}
.loop-detail > div { background: var(--bg-panel); padding: 26px 28px; }
.loop-detail h3 { font-size: 21px; margin-bottom: 10px; }
.loop-detail p { color: var(--ink-dim); font-size: 15px; line-height: 1.65; max-width: 58ch; }
.loop-signals span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--ink-faint); display: block; margin-bottom: 12px;
}
.loop-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.loop-chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  border: 1px solid var(--hairline-strong); color: var(--ink-dim);
  border-radius: 4px; padding: 7px 11px;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.loop-chip.hot { border-color: rgba(63, 214, 234, 0.55); color: var(--cyan); background: rgba(63, 214, 234, 0.06); }
.loop-output {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--hairline-strong);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--ink-dim);
}
.loop-output b { color: var(--cyan); font-weight: 500; }
@media (max-width: 900px) { .loop-detail { grid-template-columns: 1fr; } }

.posture-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: 10px; overflow: hidden; margin-top: 54px;
}
.posture-cell { background: var(--bg-panel); padding: 26px 24px; }
.posture-cell span { font-family: var(--font-mono); font-size: 11px; color: var(--cobalt-soft); letter-spacing: 0.12em; }
.posture-cell b { display: block; font-size: 17px; margin: 10px 0 8px; }
.posture-cell p { color: var(--ink-dim); font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) { .posture-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .posture-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ARCHITECTURE: Governed Spine
   REST -> INGRESS -> CONVERGE -> REFRACT -> RESOLVE -> RETAIN
   ============================================================ */
body[data-rx-page="architecture"] .rx-ambient { opacity: .24; }
.architecture-hero {
  min-height: min(820px, 91vh);
  display: flex; flex-direction: column; justify-content: center;
}
.architecture-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(760px, 68vw); height: min(760px, 68vw); right: -12%; top: 5%;
  border: 1px solid rgba(109,147,255,.1); transform: rotate(45deg);
  background:
    linear-gradient(90deg, transparent 49.86%, rgba(63,214,234,.11) 50%, transparent 50.14%),
    linear-gradient(transparent 49.86%, rgba(109,147,255,.09) 50%, transparent 50.14%),
    radial-gradient(circle at 50% 50%, rgba(59,109,255,.13), transparent 58%);
  box-shadow: inset 0 0 90px rgba(59,109,255,.04), 0 0 120px rgba(0,0,0,.4);
}
.architecture-hero h1 { max-width: 16ch; }

.governed-spine-story {
  position: relative; isolation: isolate;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(circle at 38% 38%, rgba(25,57,118,.2), transparent 31%),
    linear-gradient(180deg, rgba(4,7,14,.96), rgba(5,10,19,.98));
}
.spine-ambient-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .38; }
.spine-ambient-field::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(109,147,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,147,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.spine-ambient-field i {
  position: absolute; left: 38%; top: 12%; bottom: 8%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(109,147,255,.22), rgba(63,214,234,.16), transparent);
  transform: rotate(var(--spine-plane-angle, 0deg)); transform-origin: 50% 50%;
}
.spine-ambient-field i:nth-child(2) { left: 51%; --spine-plane-angle: 8deg; opacity: .42; }
.spine-ambient-field i:nth-child(3) { left: 66%; --spine-plane-angle: -7deg; opacity: .35; }
.spine-ambient-field i:nth-child(4) { left: 82%; --spine-plane-angle: 4deg; opacity: .22; }

.spine-story-intro { position: relative; z-index: 2; padding-top: clamp(90px,11vw,148px); padding-bottom: clamp(72px,9vw,118px); }
.spine-story-intro .section-title { max-width: 16ch; }
.spine-object-lock {
  display: flex; flex-wrap: wrap; width: fit-content; margin-top: 34px;
  border: 1px solid var(--hairline-strong); border-radius: 6px; overflow: hidden;
  background: rgba(7,14,27,.74); box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.spine-object-lock span {
  padding: 12px 16px; border-left: 1px solid var(--hairline);
  color: var(--ink-faint); font: 500 10px var(--font-mono); letter-spacing: .13em;
}
.spine-object-lock span:first-child { border-left: 0; }
.spine-object-lock b { color: var(--ink); font-weight: 550; }

.spine-scroll-shell {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, .72fr);
  gap: clamp(28px,3.5vw,56px); align-items: start;
}
.spine-stage-column {
  position: sticky; top: calc(var(--header-h) + 16px);
  height: calc(100vh - var(--header-h) - 32px);
  min-height: 620px; padding-bottom: 16px;
}
.governed-spine-stage {
  height: 100%; display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  border-color: rgba(135,166,212,.25); border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(16,30,53,.78), rgba(5,11,21,.96)),
    #050b15;
  box-shadow: 0 42px 120px -42px rgba(0,0,0,.94), 0 0 90px rgba(31,75,163,.08), inset 0 1px rgba(214,232,255,.06);
}
.spine-command-bar { min-height: 45px; }
.spine-command-bar #spine-state-label { color: var(--cyan); }
.governed-spine-stage[data-spine-stage="4"] .spine-command-bar #spine-state-label { color: var(--amber); }
.governed-spine-stage[data-spine-stage="5"] .spine-command-bar #spine-state-label { color: #dffcff; }

.spine-status-deck {
  display: grid; grid-template-columns: .9fr .8fr .8fr 1.5fr;
  border-bottom: 1px solid var(--hairline); background: rgba(5,12,23,.78);
}
.spine-status-deck > div { min-width: 0; padding: 11px 15px; border-left: 1px solid var(--hairline); }
.spine-status-deck > div:first-child { border-left: 0; }
.spine-status-deck span,
.spine-record-strip span {
  display: block; color: var(--ink-faint);
  font: 500 8px var(--font-mono); letter-spacing: .15em;
}
.spine-status-deck b {
  display: block; margin-top: 4px; color: var(--ink-dim);
  font: 550 11px var(--font-mono); letter-spacing: .07em; white-space: nowrap;
}
.spine-progress { position: relative; height: 2px; margin-top: 10px; overflow: hidden; background: rgba(126,158,206,.18); }
.spine-progress i {
  position: absolute; inset: 0 auto 0 0; width: var(--spine-progress, 8.333%);
  background: linear-gradient(90deg,var(--cobalt),#d7f7ff,var(--cyan));
  box-shadow: 0 0 14px rgba(63,214,234,.55);
  transition: width var(--motion-refract) var(--ease-refract);
}

.spine-stage-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) clamp(250px,25vw,322px); }
.spine-field { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #040913; }
.spine-field::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0,0,0,.56), inset 0 1px rgba(154,186,230,.06);
}
.spine-canvas { width: 100%; height: 100%; min-height: 430px; }
.spine-boundary {
  position: absolute; z-index: 4; top: 10%; bottom: 10%; width: 1px; pointer-events: none;
  opacity: .14; transition: opacity var(--motion-refract), filter var(--motion-refract);
}
.spine-boundary::before { content: ""; position: absolute; inset: 0 -18px; background: linear-gradient(90deg,transparent,currentColor,transparent); opacity: .12; }
.spine-boundary span {
  position: absolute; top: 50%; color: currentColor; white-space: nowrap;
  font: 500 8px var(--font-mono); letter-spacing: .16em;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
}
.spine-boundary--source { left: 8.5%; color: var(--cobalt-soft); }
.spine-boundary--source span { right: 9px; }
.spine-boundary--authority { right: 8.5%; color: var(--amber); }
.spine-boundary--authority span { left: 9px; }
.governed-spine-stage[data-spine-stage="0"] .spine-boundary--source,
.governed-spine-stage[data-spine-stage="4"] .spine-boundary--authority { opacity: .94; filter: drop-shadow(0 0 11px currentColor); }

.spine-inspector {
  min-width: 0; padding: clamp(22px,2.4vw,32px);
  border-left: 1px solid var(--hairline); background:
    linear-gradient(180deg,rgba(14,27,47,.9),rgba(6,14,27,.96));
  display: flex; flex-direction: column; justify-content: space-between;
}
.spine-inspector-head > span { color: var(--cobalt-soft); font: 500 9px var(--font-mono); letter-spacing: .17em; }
.spine-inspector-head > span b { color: var(--cyan); font-weight: 550; }
.spine-inspector h3 { margin-top: 16px; font-size: clamp(26px,2.4vw,38px); letter-spacing: -.035em; }
.spine-inspector-head p { margin-top: 13px; color: var(--ink-dim); font-size: 14px; line-height: 1.55; }
.spine-contract-grid { margin: 26px 0 0; display: grid; gap: 0; }
.spine-contract { padding: 13px 0; border-top: 1px solid var(--hairline); }
.spine-contract dt { color: var(--ink-faint); font: 500 8px var(--font-mono); letter-spacing: .16em; }
.spine-contract dd { margin: 5px 0 0; color: var(--ink); font-size: 12.5px; line-height: 1.38; }
.governed-spine-stage[data-spine-stage="4"] .spine-contract:nth-child(3) dd { color: var(--amber); }
.governed-spine-stage[data-spine-stage="5"] .spine-contract:nth-child(4) dd { color: var(--cyan); }

.spine-record-strip {
  min-height: 54px; display: flex; align-items: center; gap: 24px; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--hairline); background: rgba(5,12,23,.86);
}
.spine-record-strip > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spine-record-strip code {
  color: var(--ink-dim); font: 550 10px var(--font-mono); letter-spacing: .08em; white-space: nowrap;
}
.governed-spine-stage[data-spine-stage="5"] .spine-record-strip code { color: var(--cyan); text-shadow: 0 0 16px rgba(63,214,234,.3); }
.spine-record-strip p { color: var(--ink-faint); font: 500 8px/1.5 var(--font-mono); letter-spacing: .09em; text-align: right; }

.spine-static-fallback {
  position: absolute; z-index: 5; inset: 18px; overflow: auto; padding: 20px;
  border: 1px solid var(--hairline-strong); background: rgba(4,9,19,.96); color: var(--ink-dim);
}
.spine-ready .spine-static-fallback { display: none; }
.spine-static-fallback > p { font: 500 11px/1.6 var(--font-mono); letter-spacing: .08em; }
.spine-static-fallback ol { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); }
.spine-static-fallback li { padding: 13px; background: #07101e; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.spine-static-fallback li span { grid-row: 1 / 3; color: var(--cobalt-soft); font: 500 9px var(--font-mono); }
.spine-static-fallback li b { font-size: 12px; }
.spine-static-fallback li small { color: var(--ink-faint); font-size: 10px; line-height: 1.4; }

.spine-narrative-column { min-width: 0; }
.spine-sequence { list-style: none; margin: 0; padding: 0; }
.spine-scroll-step {
  min-height: 88vh; display: flex; flex-direction: column; justify-content: center;
  opacity: .34; transition: opacity var(--motion-refract), transform var(--motion-refract) var(--ease-signal);
}
.spine-scroll-step.is-active { opacity: 1; transform: translate3d(-8px,0,0); }
.spine-step-trigger {
  width: 100%; min-height: 136px; padding: 18px 0; display: grid;
  grid-template-columns: 38px minmax(0,1fr); gap: 12px; text-align: left;
  color: var(--ink-dim); background: transparent; border: 0; border-top: 1px solid var(--hairline-strong);
  cursor: pointer;
}
.spine-step-number { color: var(--ink-faint); font: 500 10px var(--font-mono); letter-spacing: .12em; }
.spine-step-copy { display: grid; gap: 5px; }
.spine-step-copy small { color: var(--cobalt-soft); font: 500 8px var(--font-mono); letter-spacing: .18em; }
.spine-step-copy b { color: var(--ink); font-size: clamp(22px,2vw,31px); letter-spacing: -.03em; }
.spine-step-copy em { color: var(--ink-dim); font-size: 13px; font-style: normal; line-height: 1.42; }
.spine-step-trace {
  grid-column: 2; width: fit-content; margin-top: 4px; padding: 5px 8px;
  border: 1px solid var(--hairline); border-radius: 3px;
  color: var(--ink-faint); font: 500 8px var(--font-mono); letter-spacing: .12em;
}
.spine-scroll-step > p { margin-left: 50px; max-width: 34ch; color: var(--ink-faint); font-size: 13.5px; line-height: 1.7; }
.spine-scroll-step.is-active .spine-step-trigger { border-top-color: rgba(63,214,234,.48); }
.spine-scroll-step.is-active .spine-step-number,
.spine-scroll-step.is-active .spine-step-trace { color: var(--cyan); }
.spine-scroll-step--authority.is-active .spine-step-trigger { border-top-color: rgba(240,164,60,.62); }
.spine-scroll-step--authority.is-active .spine-step-copy small,
.spine-scroll-step--authority.is-active .spine-step-number,
.spine-scroll-step--authority.is-active .spine-step-trace { color: var(--amber); }
.spine-scroll-step--retained.is-active .spine-step-trigger { border-top-color: rgba(223,252,255,.74); }

.spine-story-exit {
  min-height: 88vh; padding: clamp(44px,5vw,70px) 0 22vh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.spine-story-exit h3 { max-width: 12ch; font-size: clamp(32px,4vw,54px); }
.spine-story-exit h3 .dim { color: var(--ink-faint); }
.spine-story-exit > p:not(.eyebrow) { margin: 22px 0 28px; max-width: 38ch; color: var(--ink-dim); line-height: 1.65; }
.architecture-finale { margin-top: 0; }

@media (max-width: 1100px) {
  .spine-scroll-shell { grid-template-columns: minmax(0,1.65fr) minmax(270px,.72fr); gap: 26px; }
  .spine-stage-grid { grid-template-columns: minmax(0,1fr) 245px; }
  .spine-inspector { padding: 22px 18px; }
  .spine-record-strip p { display: none; }
}
@media (max-width: 900px) {
  .architecture-hero { min-height: 760px; }
  .spine-scroll-shell { display: block; }
  .spine-stage-column { top: calc(var(--header-h) + 10px); height: calc(100vh - var(--header-h) - 20px); min-height: 620px; z-index: 3; }
  .spine-narrative-column { position: relative; z-index: 4; width: min(370px,82vw); margin-left: auto; pointer-events: none; }
  .spine-scroll-step { min-height: 92vh; align-items: stretch; opacity: 0; }
  .spine-scroll-step.is-active { opacity: 1; transform: none; }
  .spine-step-trigger,
  .spine-scroll-step > p,
  .spine-story-exit { pointer-events: auto; }
  .spine-step-trigger { padding: 16px; border: 1px solid var(--hairline-strong); border-radius: 7px; background: rgba(4,10,20,.9); box-shadow: 0 18px 48px rgba(0,0,0,.46); }
  .spine-scroll-step > p { margin: 8px 0 0; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 6px; background: rgba(4,10,20,.88); }
  .spine-stage-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .spine-canvas { min-height: 0; }
  .spine-inspector { padding: 15px 18px; border-left: 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: .82fr 1.4fr; gap: 18px; }
  .spine-inspector h3 { margin-top: 8px; font-size: 24px; }
  .spine-inspector-head p { margin-top: 7px; font-size: 12px; }
  .spine-contract-grid { margin: 0; grid-template-columns: 1fr 1fr; }
  .spine-contract { padding: 7px 0 7px 11px; border-top: 0; border-left: 1px solid var(--hairline); }
  .spine-record-strip { min-height: 46px; }
  .spine-story-exit { width: 100%; min-height: 88vh; padding: 42vh 0 14vh; background: linear-gradient(180deg,transparent,rgba(4,7,14,.92) 36%); }
}
@media (max-width: 620px) {
  .architecture-hero { min-height: 690px; }
  .architecture-hero::before { right: -46%; top: 12%; width: 112vw; height: 112vw; }
  .spine-story-intro { padding-top: 78px; padding-bottom: 64px; }
  .spine-object-lock { display: grid; width: 100%; }
  .spine-object-lock span { border-left: 0; border-top: 1px solid var(--hairline); padding: 10px 12px; }
  .spine-object-lock span:first-child { border-top: 0; }
  .spine-scroll-shell { padding-left: 10px; padding-right: 10px; }
  .spine-stage-column { top: calc(var(--header-h) + 6px); height: calc(100svh - var(--header-h) - 12px); min-height: 570px; }
  .governed-spine-stage { border-radius: 6px; }
  .spine-command-bar { padding: 10px 12px; gap: 8px; font-size: 9px; }
  .spine-command-bar > span:nth-of-type(2),
  .spine-command-bar > span:nth-last-of-type(1) { display: none; }
  .spine-status-deck { grid-template-columns: 1fr 1fr 1.2fr; }
  .spine-status-deck > div { padding: 8px 9px; }
  .spine-status-deck > div:nth-child(3) { display: none; }
  .spine-status-deck span { font-size: 8px; letter-spacing: .08em; }
  .spine-status-deck b { font-size: 9.5px; }
  .spine-stage-grid { grid-template-rows: minmax(290px,1fr) auto; }
  .spine-inspector { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .spine-inspector-head { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: end; }
  .spine-inspector-head > span { grid-row: 1; }
  .spine-inspector h3 { grid-row: 1; margin: 0; font-size: 20px; }
  .spine-inspector-head p { grid-column: 1 / -1; margin: 4px 0 2px; font-size: 11px; }
  .spine-contract-grid { grid-template-columns: 1fr 1fr; }
  .spine-contract { padding: 5px 8px; }
  .spine-contract dt { font-size: 8px; }
  .spine-contract dd { margin-top: 2px; font-size: 10.5px; }
  .spine-record-strip { padding: 8px 10px; min-height: 41px; }
  .spine-record-strip span { font-size: 8px; }
  .spine-record-strip code { font-size: 9px; }
  .spine-narrative-column { width: min(310px,86vw); }
  .spine-step-trigger { min-height: 116px; padding: 13px; }
  .spine-step-copy b { font-size: 22px; }
  .spine-scroll-step > p { font-size: 12px; line-height: 1.55; }
  .spine-static-fallback { inset: 9px; padding: 12px; }
  .spine-static-fallback ol { grid-template-columns: 1fr; }
  .spine-boundary span { font-size: 7.5px; }
}

/* ============================================================
   RECONSTRUCTION: replay console
   ============================================================ */
.replay-canvas { width: 100%; height: clamp(400px, 44vw, 540px); display: block; }
.replay-deck {
  border-top: 1px solid var(--hairline);
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 16px;
  background: rgba(10, 18, 32, 0.5);
}
.replay-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.replay-clock {
  font-family: var(--font-mono); font-size: 22px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 96px;
}
.replay-scrub { flex: 1 1 240px; display: flex; align-items: center; }
input[type="range"].scrub {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"].scrub::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan) var(--fill, 0%), rgba(150, 175, 210, 0.22) var(--fill, 0%));
}
input[type="range"].scrub::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(150, 175, 210, 0.22);
}
input[type="range"].scrub::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--cyan); }
input[type="range"].scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--cyan);
  margin-top: -7px;
  box-shadow: 0 0 10px rgba(63, 214, 234, 0.5);
}
input[type="range"].scrub::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--cyan);
  box-shadow: 0 0 10px rgba(63, 214, 234, 0.5);
}
.replay-note {
  border-left: 2px solid var(--cyan);
  padding: 4px 0 4px 16px;
  min-height: 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.replay-note b { font-size: 15px; font-weight: 600; }
.replay-note span { color: var(--ink-dim); font-size: 13.5px; }
.replay-note.amber { border-left-color: var(--amber); }

.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 54px; }
.layer-card {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 24px; background: rgba(9, 16, 29, 0.4);
}
.layer-card span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--cobalt-soft); }
.layer-card b { display: block; font-size: 18px; margin: 10px 0 8px; }
.layer-card p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }
.layer-card small {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--hairline-strong);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-faint);
}
@media (max-width: 900px) { .evidence-grid { grid-template-columns: 1fr; } }

/* ============================================================
   DEMO: execution mission control
   ============================================================ */
.demo-hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(74px,9vw,132px));
  padding-bottom: clamp(76px,9vw,126px);
  display: grid; grid-template-columns: minmax(0,1.04fr) minmax(430px,.96fr);
  align-items: center; gap: clamp(52px,7vw,116px);
}
.demo-hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(58% 74% at 76% 48%, rgba(28,62,126,.26), transparent 68%),
    linear-gradient(180deg, #03070e, #050a13 70%, #04070e);
}
.demo-hero::after {
  content: ""; position: absolute; z-index: -1; inset: var(--header-h) calc(50% - 50vw) 0;
  background-image:
    linear-gradient(rgba(109,147,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,147,255,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(circle at 73% 48%, #000, transparent 68%);
  mask-image: radial-gradient(circle at 73% 48%, #000, transparent 68%);
}
.demo-hero-copy { position: relative; z-index: 2; }
.demo-hero h1 {
  max-width: 10ch; margin: 0;
  font-size: clamp(58px,6.6vw,104px); line-height: .92;
  letter-spacing: -.062em; font-weight: 630;
}
.demo-hero .page-hero-deck { max-width: 62ch; }
.demo-hero-trace {
  position: relative; min-width: 0; padding: 22px;
  border: 1px solid rgba(150,175,210,.25); border-radius: 12px;
  background:
    radial-gradient(90% 80% at 55% 34%, rgba(35,72,145,.28), transparent 70%),
    linear-gradient(180deg, rgba(10,20,37,.95), rgba(4,9,17,.97));
  box-shadow: 0 46px 110px -54px rgba(0,0,0,.95), inset 0 1px rgba(235,245,255,.05);
}
.demo-hero-trace::before,
.demo-hero-trace::after {
  content: ""; position: absolute; width: 52px; height: 52px; pointer-events: none;
}
.demo-hero-trace::before { left: -1px; top: -1px; border-left: 1px solid var(--cyan); border-top: 1px solid var(--cyan); }
.demo-hero-trace::after { right: -1px; bottom: -1px; border-right: 1px solid var(--cobalt-soft); border-bottom: 1px solid var(--cobalt-soft); }
.demo-trace-head,
.demo-trace-state,
.demo-trace-metrics,
.demo-hero-trace > p { font-family: var(--font-mono); }
.demo-trace-head { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid var(--hairline); font-size: 9.5px; letter-spacing: .12em; color: #8d9db2; }
.demo-trace-head b { color: var(--cyan); font-weight: 550; }
.demo-trace-axis { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; padding: 64px 0 50px; }
.demo-trace-axis > b { position: absolute; left: 8%; right: 8%; top: 71px; height: 1px; background: linear-gradient(90deg,var(--cobalt),var(--cyan),var(--amber),var(--cyan)); opacity: .6; }
.demo-trace-axis > div { position: relative; z-index: 1; display: grid; justify-items: center; gap: 13px; }
.demo-trace-axis i { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid var(--cobalt-soft); background: #091323; box-shadow: 0 0 0 5px rgba(59,109,255,.06); }
.demo-trace-axis > div:nth-child(4) i { border-color: var(--amber); }
.demo-trace-axis > div:last-of-type i { border-color: var(--cyan); }
.demo-trace-axis span { color: #8696ab; font: 500 8px var(--font-mono); letter-spacing: .1em; }
.demo-trace-state { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.demo-trace-state span { color: #8797ac; font-size: 9px; letter-spacing: .14em; }
.demo-trace-state strong { color: var(--cobalt-soft); font-size: 11px; letter-spacing: .12em; }
.demo-trace-state i { height: 1px; background: linear-gradient(90deg,var(--cobalt-soft),transparent); }
.demo-trace-metrics { display: grid; grid-template-columns: repeat(4,1fr); }
.demo-trace-metrics > div { padding: 17px 10px; border-left: 1px solid var(--hairline); }
.demo-trace-metrics > div:first-child { border-left: 0; }
.demo-trace-metrics span,.demo-trace-metrics b { display: block; }
.demo-trace-metrics span { color: #8797ac; font-size: 8.5px; letter-spacing: .13em; }
.demo-trace-metrics b { margin-top: 8px; color: var(--ink); font-size: 16px; font-weight: 560; }
.demo-hero-trace > p { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 8px 0 0; color: #8191a6; font-size: 8.5px; letter-spacing: .1em; }
.demo-hero-trace > p i { width: 18px; height: 1px; background: var(--hairline-strong); }

.mission-section {
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(75% 48% at 50% 28%, rgba(31,65,130,.16), transparent 72%),
    linear-gradient(180deg,#04070e,#050a13 56%,#04070e);
}
.mission-intro { max-width: 1040px; }
.mission-console {
  margin-top: clamp(56px,7vw,88px); overflow: hidden;
  border-color: rgba(150,175,210,.26); border-radius: 13px;
  background: #050a12;
  box-shadow: 0 54px 150px -70px rgba(0,0,0,.98), 0 0 100px -82px rgba(59,109,255,.75), inset 0 1px rgba(226,242,255,.045);
}
.mission-commandbar {
  min-height: 58px; display: grid; grid-template-columns: minmax(260px,1fr) auto auto;
  align-items: center; gap: 22px; padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg,rgba(14,25,44,.94),rgba(7,14,25,.94));
  font-family: var(--font-mono);
}
.mission-command-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mission-command-title .lamp { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(63,214,234,.55); }
.mission-command-title b { color: var(--ink); font-size: 10px; letter-spacing: .13em; white-space: nowrap; }
.mission-command-title small { color: #8999ae; font-size: 9px; letter-spacing: .1em; white-space: nowrap; }
.mission-command-ids { display: flex; gap: 16px; color: #8999ae; font-size: 9px; letter-spacing: .11em; }
.mission-command-ids b { color: var(--cobalt-soft); font-weight: 550; }
.mission-command-state { min-width: 145px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mission-command-state span { color: #8999ae; font-size: 8.5px; letter-spacing: .1em; }
.mission-command-state b { min-width: 70px; color: var(--cobalt-soft); font-size: 10px; letter-spacing: .1em; text-align: right; }
.mission-command-state b[data-state="constrained"] { color: var(--amber); }
.mission-command-state b[data-state="recovering"] { color: var(--green); }
.mission-command-state b[data-state="retained"] { color: var(--cyan); }
.mission-profilebar {
  min-height: 54px; display: flex; align-items: center; gap: 7px; padding: 8px 14px;
  border-bottom: 1px solid var(--hairline); background: rgba(8,15,27,.72);
}
.mission-profilebar > span { flex: 0 0 auto; margin-right: 5px; color: #8d9db2; font: 500 9px var(--font-mono); letter-spacing: .13em; }
.mission-profilebar .ctl { min-height: 44px; font-size: 10px; white-space: nowrap; }
.mission-profilebar em { min-width: 0; margin-left: auto; color: #8494a9; font: normal 9.5px var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mission-console { --profile-accent: var(--cyan); --profile-accent-rgb: 63,214,234; }
.mission-console[data-scenario="volatility"] { --profile-accent: #a78bfa; --profile-accent-rgb: 167,139,250; }
.mission-console[data-scenario="cascade"] { --profile-accent: var(--amber); --profile-accent-rgb: 240,164,60; }
.mission-console[data-scenario="coverage"] { --profile-accent: #ff6b5e; --profile-accent-rgb: 255,107,94; }
.mission-profile-readout {
  min-height: 58px;
  display: grid;
  grid-template-columns: 210px minmax(240px,1fr) minmax(190px,.55fr);
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(90deg, rgba(var(--profile-accent-rgb),.09), transparent 28%),
    rgba(5,11,20,.94);
}
.mission-profile-readout > div {
  min-width: 0;
  padding: 10px 14px;
  border-left: 1px solid var(--hairline);
  font-family: var(--font-mono);
}
.mission-profile-readout > div:first-child { border-left: 0; box-shadow: inset 3px 0 var(--profile-accent); }
.mission-profile-readout span,
.mission-profile-readout b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-profile-readout span { color: #8394aa; font-size: 7.5px; letter-spacing: .13em; }
.mission-profile-readout b { margin-top: 5px; color: var(--ink-dim); font-size: 9.5px; font-weight: 560; letter-spacing: .08em; }
.mission-profile-readout > div:first-child b { color: var(--profile-accent); }

.mission-branch-strip {
  min-height: 94px;
  display: grid;
  grid-template-columns: minmax(250px,.82fr) minmax(320px,1.18fr) minmax(360px,1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(circle at 14% 50%, rgba(59,109,255,.12), transparent 30%),
    rgba(6,12,22,.95);
  transition: background var(--motion-signal), border-color var(--motion-signal), box-shadow var(--motion-signal);
}
.mission-branch-strip[data-outcome="gate"] {
  border-color: rgba(240,164,60,.42);
  background: linear-gradient(90deg, rgba(240,164,60,.13), rgba(8,15,27,.96) 42%);
  box-shadow: inset 3px 0 var(--amber);
}
.mission-branch-strip[data-outcome="support"] {
  border-color: rgba(63,214,234,.42);
  background: linear-gradient(90deg, rgba(63,214,234,.16), rgba(14,44,58,.18) 44%, rgba(5,11,20,.96));
  box-shadow: inset 3px 0 var(--cyan), 0 0 46px -32px rgba(63,214,234,.8);
}
.mission-branch-strip[data-outcome="observe"] {
  border-color: rgba(240,164,60,.4);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(240,164,60,.025) 12px 13px),
    linear-gradient(90deg, rgba(240,164,60,.14), rgba(28,19,13,.34) 45%, rgba(5,11,20,.96));
  box-shadow: inset 3px 0 var(--amber), 0 0 46px -34px rgba(240,164,60,.72);
}
.mission-branch-state,
.mission-branch-strip > p,
.mission-branch-metrics { min-width: 0; padding: 14px 16px; }
.mission-branch-state { display: grid; align-content: center; }
.mission-branch-state span,
.mission-branch-state b { display: block; font-family: var(--font-mono); }
.mission-branch-state span { color: var(--cobalt-soft); font-size: 8px; letter-spacing: .13em; }
.mission-branch-state b { margin-top: 7px; color: var(--ink); font-size: 14px; line-height: 1.2; }
.mission-branch-strip[data-outcome="support"] .mission-branch-state span,
.mission-branch-strip[data-outcome="support"] .mission-branch-metrics b { color: var(--cyan); }
.mission-branch-strip[data-outcome="observe"] .mission-branch-state span,
.mission-branch-strip[data-outcome="observe"] .mission-branch-metrics b,
.mission-branch-strip[data-outcome="gate"] .mission-branch-state span { color: var(--amber); }
.mission-branch-strip > p {
  display: flex;
  align-items: center;
  border-left: 1px solid var(--hairline);
  color: #9aaabd;
  font-size: 11px;
  line-height: 1.48;
}
.mission-branch-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 1px; border-left: 1px solid var(--hairline); }
.mission-branch-metrics > div { min-width: 0; padding: 7px 10px; border-left: 1px solid var(--hairline); font-family: var(--font-mono); }
.mission-branch-metrics > div:first-child { border-left: 0; }
.mission-branch-metrics span,
.mission-branch-metrics b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-branch-metrics span { color: #8394aa; font-size: 9px; letter-spacing: .11em; }
.mission-branch-metrics b { margin-top: 6px; color: var(--ink-dim); font-size: 12px; font-weight: 560; letter-spacing: .04em; }

.mission-layout { display: grid; grid-template-columns: 188px minmax(500px,1fr) 372px; min-height: 650px; }
.mission-worklist,
.mission-inspector { background: rgba(7,13,23,.92); }
.mission-worklist { padding: 16px 13px; border-right: 1px solid var(--hairline); }
.mission-rail-head { display: flex; justify-content: space-between; gap: 8px; padding: 0 2px 13px; color: #8999ae; font: 500 9px var(--font-mono); letter-spacing: .11em; }
.mission-rail-head b { color: var(--cobalt-soft); font-weight: 550; }
.mission-lenses { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-bottom: 16px; }
.mission-lenses button {
  min-width: 0; min-height: 44px; padding: 6px 3px;
  border: 1px solid var(--hairline); background: rgba(9,17,30,.65);
  color: #8999ae; cursor: pointer; font: 550 9px var(--font-mono); letter-spacing: .06em;
}
.mission-lenses button:hover,.mission-lenses button:focus-visible,.mission-lenses button.active { color: var(--ink); border-color: rgba(63,214,234,.48); background: rgba(59,109,255,.1); }
.mission-object-list { display: grid; gap: 5px; }
.mission-object-list button {
  position: relative; min-height: 60px; padding: 10px 9px; overflow: hidden;
  display: grid; align-content: center; gap: 5px; text-align: left;
  border: 1px solid var(--hairline); background: rgba(9,17,30,.52); color: #8b9bb0; cursor: pointer;
}
.mission-object-list button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cyan); opacity: 0; }
.mission-object-list button span { color: var(--ink-dim); font: 550 10px var(--font-mono); letter-spacing: .08em; }
.mission-object-list button b { color: #8494a9; font: 500 8.5px var(--font-mono); letter-spacing: .07em; }
.mission-object-list button i { position: absolute; right: 9px; top: 50%; width: 7px; height: 7px; margin-top: -4px; transform: rotate(45deg); border: 1px solid var(--hairline-strong); }
.mission-object-list button:hover,.mission-object-list button:focus-visible,.mission-object-list button.selected { border-color: rgba(63,214,234,.38); background: rgba(18,35,65,.56); }
.mission-object-list button.selected::before { opacity: 1; }
.mission-object-list button.selected span { color: var(--ink); }
.mission-object-list button.selected i { border-color: var(--cyan); box-shadow: 0 0 12px rgba(63,214,234,.35); }
.mission-lineage-mini { display: flex; align-items: center; gap: 4px; margin-top: 20px; color: #8191a6; font: 500 7.5px var(--font-mono); letter-spacing: .06em; }
.mission-lineage-mini i { flex: 1; height: 1px; background: linear-gradient(90deg,var(--cobalt),var(--cyan)); opacity: .5; }

.mission-viewport { min-width: 0; display: flex; flex-direction: column; background: #050a12; }
.mission-viewport-head { min-height: 48px; padding: 9px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); }
.mission-viewport-head > div { display: flex; align-items: center; gap: 10px; }
.mission-viewport-head span { color: #8999ae; font-size: 8.5px; letter-spacing: .12em; }
.mission-viewport-head b { color: var(--ink-dim); font-size: 9px; font-weight: 550; letter-spacing: .08em; }
.mission-inline-transport { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--hairline); background: rgba(8,15,27,.78); }
.mission-inline-transport .ctl { min-height: 44px; padding-inline: 14px; color: var(--ink); border-color: rgba(109,147,255,.4); background: rgba(59,109,255,.11); font-size: 9px; }
.mission-inline-transport .ctl:disabled { opacity: .48; cursor: not-allowed; }
.mission-inline-transport span { color: #8999ae; font: 500 8px var(--font-mono); letter-spacing: .08em; text-align: right; }
.mission-canvas-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mission-console[data-branch="support"] .mission-canvas-wrap { box-shadow: inset 0 0 46px rgba(63,214,234,.055); }
.mission-console[data-branch="observe"] .mission-canvas-wrap { box-shadow: inset 0 0 46px rgba(240,164,60,.06); }
.mission-canvas { width: 100%; height: 100%; min-height: 540px; display: block; }
.mission-canvas-legend { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; gap: 18px; pointer-events: none; color: #8999ae; font: 500 8px var(--font-mono); letter-spacing: .08em; }
.mission-canvas-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mission-canvas-legend i { width: 12px; height: 2px; background: var(--cobalt-soft); }
.mission-canvas-legend span:nth-child(2) i { background: var(--amber); }
.mission-canvas-legend span:nth-child(3) i { background: var(--cyan); }
.mission-viewport-metrics { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--hairline); }
.mission-viewport-metrics > div { padding: 11px 12px; border-left: 1px solid var(--hairline); font-family: var(--font-mono); }
.mission-viewport-metrics > div:first-child { border-left: 0; }
.mission-viewport-metrics span,.mission-viewport-metrics b { display: block; }
.mission-viewport-metrics span { color: #8999ae; font-size: 8.5px; letter-spacing: .12em; }
.mission-viewport-metrics b { margin-top: 5px; color: var(--ink); font-size: 13px; font-weight: 560; }

.mission-inspector { padding: 18px; border-left: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 17px; }
.mission-inspector-head { padding-bottom: 13px; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); }
.mission-inspector-head span,.mission-inspector-head b,.mission-inspector-head em { display: block; }
.mission-inspector-head span { color: #8999ae; font-size: 8.5px; letter-spacing: .13em; }
.mission-inspector-head b { margin-top: 7px; color: var(--ink); font-size: 18px; font-weight: 580; }
.mission-inspector-head em { margin-top: 5px; color: var(--cyan); font-size: 9px; font-style: normal; letter-spacing: .09em; }
.mission-object-facts { margin: 0; display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 5px; background: var(--hairline); }
.mission-object-facts > div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 10px; padding: 8px 9px; background: rgba(8,15,27,.98); font-family: var(--font-mono); }
.mission-object-facts dt { color: #8999ae; font-size: 8px; letter-spacing: .09em; }
.mission-object-facts dd { min-width: 0; margin: 0; color: var(--ink-dim); font-size: 9px; line-height: 1.35; text-align: right; overflow-wrap: anywhere; }
.mission-forces { display: grid; gap: 9px; padding: 14px; border: 1px solid var(--hairline); background: rgba(9,17,30,.72); }
.mission-forces-head { display: flex; justify-content: space-between; gap: 10px; color: #a8b6c8; font: 560 10px/1.3 var(--font-mono); letter-spacing: .09em; }
.mission-forces-head b { color: var(--cobalt-soft); font-weight: 550; }
.mission-forces-note { margin: 0; color: #8797aa; font: 500 9.5px/1.45 var(--font-mono); }
.mission-forces > div:not(.mission-forces-head) { display: grid; grid-template-columns: 138px minmax(90px,1fr) 34px; align-items: center; gap: 8px 10px; min-height: 44px; font-family: var(--font-mono); }
.mission-forces > div:not(.mission-forces-head) span { color: #a3b0c1; font-size: 10px; line-height: 1.18; letter-spacing: .025em; }
.mission-forces > div:not(.mission-forces-head) i { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(150,175,210,.13); }
.mission-forces > div:not(.mission-forces-head) i::after { content: ""; display: block; width: var(--force,0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cobalt),var(--cyan)); transition: width 720ms var(--ease-signal); }
.mission-forces > div[data-force="collision"] i::after,.mission-forces > div[data-force="routing"] i::after { background: linear-gradient(90deg,var(--amber-dim),var(--amber)); }
.mission-forces > div[data-force="recovery"] i::after { background: linear-gradient(90deg,var(--cobalt),var(--green)); }
.mission-forces > div:not(.mission-forces-head) > b { color: var(--ink); font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mission-forces > div:not(.mission-forces-head) > em { grid-column: 2 / 4; margin-top: -5px; color: #8191a6; font-size: 8px; font-style: normal; line-height: 1.2; letter-spacing: .045em; text-align: right; }
.mission-forces > div:not(.mission-forces-head) > em[data-trend="better"] { color: var(--green); }
.mission-forces > div:not(.mission-forces-head) > em[data-trend="worse"] { color: var(--amber); }
.mission-authority { margin-top: auto; padding: 13px; border: 1px solid var(--hairline); background: rgba(10,18,32,.65); }
.mission-authority[data-authority="required"] { border-color: rgba(240,164,60,.48); background: linear-gradient(135deg,rgba(240,164,60,.08),rgba(10,18,32,.72)); box-shadow: inset 2px 0 var(--amber); }
.mission-authority[data-authority="authorized"] { border-color: rgba(63,214,234,.4); box-shadow: inset 2px 0 var(--cyan); }
.mission-authority[data-authority="observed"] { border-color: rgba(240,164,60,.34); box-shadow: inset 2px 0 rgba(240,164,60,.72); }
.mission-authority > span { color: #8999ae; font: 550 8px var(--font-mono); letter-spacing: .12em; }
.mission-authority h3 { margin-top: 8px; font-size: 14px; line-height: 1.24; }
.mission-authority p { margin-top: 7px; color: #99a8bb; font-size: 10.5px; line-height: 1.48; }
.mission-authority-actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.mission-authority-actions .ctl { min-height: 44px; padding-inline: 9px; font-size: 9px; text-align: left; }
.mission-authority-actions .ctl:disabled { opacity: .34; cursor: not-allowed; }
.mission-authority small { display: block; margin-top: 9px; color: #8999ae; font: 500 7.8px var(--font-mono); letter-spacing: .07em; }

.mission-impact-dock {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(circle at 24% 30%, rgba(63,214,234,.08), transparent 30%),
    radial-gradient(circle at 76% 30%, rgba(240,164,60,.07), transparent 30%),
    rgba(5,11,20,.98);
  transition: border-color var(--motion-signal), box-shadow var(--motion-signal);
}
.mission-impact-dock[data-impact="support"] { border-color: rgba(63,214,234,.4); box-shadow: inset 0 2px rgba(63,214,234,.28); }
.mission-impact-dock[data-impact="observe"] { border-color: rgba(240,164,60,.4); box-shadow: inset 0 2px rgba(240,164,60,.24); }
.mission-impact-dock[data-impact="gate"] { border-color: rgba(240,164,60,.52); box-shadow: inset 0 2px var(--amber); }
.mission-impact-head { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.mission-impact-head > div:first-child { min-width: 0; }
.mission-impact-head span { color: var(--cobalt-soft); font: 570 9.5px var(--font-mono); letter-spacing: .13em; }
.mission-impact-head h3 { margin: 7px 0 0; color: var(--ink); font-size: clamp(20px,2vw,29px); line-height: 1.06; letter-spacing: -.025em; }
.mission-impact-head p { margin: 7px 0 0; color: #94a4b8; font-size: 11.5px; line-height: 1.45; }
.mission-impact-clock { flex: 0 0 auto; min-width: 170px; padding: 12px 15px; border: 1px solid var(--hairline); background: rgba(10,18,32,.75); text-align: right; }
.mission-impact-clock span,.mission-impact-clock b { display: block; font-family: var(--font-mono); }
.mission-impact-clock span { color: #8999ae; font-size: 8px; letter-spacing: .12em; }
.mission-impact-clock b { margin-top: 6px; color: var(--ink); font-size: 17px; font-weight: 580; font-variant-numeric: tabular-nums; }
.mission-impact-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); }
.mission-impact-path { min-width: 0; padding: 18px 20px 17px; background: rgba(7,14,25,.98); transition: background var(--motion-signal), box-shadow var(--motion-signal), opacity var(--motion-signal); }
.mission-impact-path-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); }
.mission-impact-path-head span { color: #a8b6c8; font-size: 10px; letter-spacing: .12em; }
.mission-impact-path-head b { color: #8999ae; font-size: 9px; font-weight: 580; letter-spacing: .09em; }
.mission-impact-path--support .mission-impact-path-head span { color: var(--cyan); }
.mission-impact-path--observe .mission-impact-path-head span { color: var(--amber); }
.mission-impact-dock[data-impact="support"] .mission-impact-path--support { background: linear-gradient(135deg,rgba(63,214,234,.11),rgba(7,14,25,.98) 60%); box-shadow: inset 3px 0 var(--cyan); }
.mission-impact-dock[data-impact="observe"] .mission-impact-path--observe { background: linear-gradient(135deg,rgba(240,164,60,.11),rgba(7,14,25,.98) 60%); box-shadow: inset 3px 0 var(--amber); }
.mission-impact-dock[data-impact="support"] .mission-impact-path--observe,
.mission-impact-dock[data-impact="observe"] .mission-impact-path--support { opacity: .78; }
.mission-impact-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.mission-impact-metrics > div { min-width: 0; padding: 16px 12px 13px; border-left: 1px solid var(--hairline); }
.mission-impact-metrics > div:first-child { border-left: 0; padding-left: 0; }
.mission-impact-metrics span,.mission-impact-metrics strong { display: block; }
.mission-impact-metrics span { min-height: 23px; color: #8999ae; font: 540 8.5px/1.25 var(--font-mono); letter-spacing: .08em; }
.mission-impact-metrics strong { margin-top: 7px; color: var(--ink); font: 610 clamp(20px,2.25vw,32px)/1 var(--font-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mission-impact-metrics > div:last-child strong { font-size: clamp(14px,1.4vw,20px); letter-spacing: -.02em; }
.mission-impact-path--support .mission-impact-metrics strong { color: #dffcff; }
.mission-impact-path--observe .mission-impact-metrics strong { color: #ffe8c8; }
.mission-impact-meter { display: grid; grid-template-columns: 128px minmax(0,1fr); align-items: center; gap: 12px; margin-top: 3px; font-family: var(--font-mono); }
.mission-impact-meter span { color: #8191a6; font-size: 8px; letter-spacing: .1em; }
.mission-impact-meter i { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(150,175,210,.12); }
.mission-impact-meter i b { display: block; width: var(--impact-progress,35%); height: 100%; border-radius: inherit; transition: width 780ms var(--ease-signal); }
.mission-impact-path--support .mission-impact-meter i b { background: linear-gradient(90deg,var(--cobalt),var(--cyan)); }
.mission-impact-path--observe .mission-impact-meter i b { background: linear-gradient(90deg,var(--amber-dim),var(--amber)); }
.mission-impact-result { min-height: 72px; display: grid; grid-template-columns: 190px minmax(320px,.9fr) minmax(340px,1.1fr); align-items: center; gap: 20px; padding: 14px 22px; border-top: 1px solid var(--hairline); background: rgba(8,15,27,.82); }
.mission-impact-result span { color: var(--cobalt-soft); font: 570 9px var(--font-mono); letter-spacing: .13em; }
.mission-impact-result b { color: var(--ink); font-size: 14px; line-height: 1.35; }
.mission-impact-result p { margin: 0; color: #96a5b8; font-size: 11px; line-height: 1.45; }
.mission-impact-dock[data-impact="support"] .mission-impact-result span { color: var(--cyan); }
.mission-impact-dock[data-impact="observe"] .mission-impact-result span,
.mission-impact-dock[data-impact="gate"] .mission-impact-result span { color: var(--amber); }

.mission-recorder { border-top: 1px solid var(--hairline); background: rgba(6,12,21,.97); }
.mission-recorder-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--hairline); color: #8999ae; font: 550 9px var(--font-mono); letter-spacing: .11em; }
.mission-recorder-head b { color: var(--cyan); font-weight: 550; }
.mission-state-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid var(--hairline); }
.mission-state-rail li { position: relative; min-width: 0; padding: 14px 12px 13px 24px; border-left: 1px solid var(--hairline); font-family: var(--font-mono); opacity: .45; }
.mission-state-rail li:first-child { border-left: 0; }
.mission-state-rail li i { position: absolute; left: 11px; top: 18px; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid var(--hairline-strong); }
.mission-state-rail li span,.mission-state-rail li b { display: block; }
.mission-state-rail li span { color: #8999ae; font-size: 7.5px; letter-spacing: .09em; }
.mission-state-rail li b { margin-top: 5px; color: var(--ink-dim); font-size: 8.5px; font-weight: 550; letter-spacing: .08em; }
.mission-state-rail li.complete,.mission-state-rail li.active { opacity: 1; }
.mission-state-rail li.complete i { border-color: var(--cobalt-soft); background: rgba(59,109,255,.3); }
.mission-state-rail li.active { background: linear-gradient(90deg,rgba(59,109,255,.1),transparent); }
.mission-state-rail li.active i { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 13px rgba(63,214,234,.5); }
.mission-state-rail li[data-state-step="constrained"].active i { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 13px rgba(240,164,60,.5); }
.mission-state-rail li[data-state-step="recovering"].active i { border-color: var(--green); background: var(--green); box-shadow: 0 0 13px rgba(99,214,168,.5); }
.mission-state-rail li[data-state-step="authority"].active i { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 13px rgba(240,164,60,.5); }
.mission-state-rail li.bypassed { opacity: .72; background: repeating-linear-gradient(135deg,transparent 0 7px,rgba(240,164,60,.035) 7px 8px); }
.mission-state-rail li.bypassed b { color: var(--amber); }
.mission-recorder-body { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.55fr); border-bottom: 1px solid var(--hairline); }
.mission-track-stack { position: relative; padding: 11px 14px; display: grid; gap: 6px; overflow: hidden; }
.mission-track-stack > div { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; }
.mission-track-stack span { color: #8999ae; font: 500 7.5px var(--font-mono); letter-spacing: .1em; }
.mission-track-stack i { position: relative; height: 3px; background: rgba(150,175,210,.11); }
.mission-track-stack i::after { content: ""; display: block; width: var(--track,0%); height: 100%; background: linear-gradient(90deg,var(--cobalt),var(--cyan)); }
.mission-track-stack > div:nth-child(4) i::after,.mission-track-stack > div:nth-child(5) i::after { background: linear-gradient(90deg,var(--amber),var(--cyan)); }
.mission-track-stack > b { position: absolute; left: 98px; right: 14px; top: 7px; bottom: 7px; width: auto; }
.mission-track-stack > b::after { content: ""; position: absolute; left: var(--cursor,0%); top: 0; bottom: 0; width: 1px; background: var(--ink); box-shadow: 0 0 11px rgba(238,243,250,.7); }
.mission-event-log { list-style: none; margin: 0; padding: 8px 10px; border-left: 1px solid var(--hairline); display: grid; align-content: start; gap: 3px; }
.mission-event-log li { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 5px 6px; background: rgba(10,18,32,.54); font-family: var(--font-mono); }
.mission-event-log time { color: var(--cobalt-soft); font-size: 7.5px; }
.mission-event-log span { min-width: 0; color: var(--ink-dim); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mission-event-log b { color: #8999ae; font-size: 7px; font-weight: 550; letter-spacing: .07em; }
.mission-scrub-row { min-height: 56px; padding: 9px 14px; display: grid; grid-template-columns: 150px minmax(180px,1fr) minmax(220px,.7fr); align-items: center; gap: 14px; font-family: var(--font-mono); }
.mission-scrub-row label { color: #8999ae; font-size: 8px; letter-spacing: .1em; }
.mission-scrub-row label b { color: var(--ink); font-size: 9px; }
.mission-scrub-row .scrub { min-height: 44px; }
.mission-scrub-row > span { min-width: 0; color: var(--cyan); font-size: 8px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.mission-controls { min-height: 72px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(238,243,250,.025); background: rgba(8,15,27,.94); }
.mission-controls .btn { min-height: 46px; }
.mission-controls .ctl { min-height: 44px; }
.mission-controls .spacer { flex: 1; }
.mission-controls .readout { min-width: 126px; padding: 9px 11px; border: 1px solid var(--hairline); background: rgba(10,18,32,.68); }
.mission-controls .readout span { font-size: 9px; }
.mission-controls .readout strong { font-size: 13px; }
.mission-controls button:disabled { opacity: .38; cursor: not-allowed; }

.evaluation-envelope { margin-top: 14px; display: grid; grid-template-columns: 280px minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 17px 18px; border: 1px solid var(--hairline); background: rgba(8,15,27,.52); }
.evaluation-envelope > div span,.evaluation-envelope > div b { display: block; font-family: var(--font-mono); }
.evaluation-envelope > div span { color: var(--cobalt-soft); font-size: 9px; letter-spacing: .13em; }
.evaluation-envelope > div b { margin-top: 6px; color: var(--ink-dim); font-size: 9px; font-weight: 550; }
.evaluation-envelope p { color: #9aa9bc; font-size: 12px; line-height: 1.5; }
.evaluation-envelope a { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; color: var(--cyan); font: 550 9px var(--font-mono); letter-spacing: .06em; white-space: nowrap; }
.demo-proof-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 54px; }
.demo-proof-grid article { min-height: 250px; padding: 27px; border: 1px solid var(--hairline); background: rgba(9,16,29,.42); }
.demo-proof-grid span { color: var(--cobalt-soft); font: 550 9px var(--font-mono); letter-spacing: .12em; }
.demo-proof-grid h3 { margin-top: 36px; max-width: 14ch; font-size: 24px; line-height: 1.08; }
.demo-proof-grid p { margin-top: 16px; color: #9baabd; font-size: 14px; line-height: 1.62; }

/* Honest static state if the mission runtime cannot initialize. */
.mission-console:not(.demo-ready) .mission-canvas { opacity: 0; }
.mission-console:not(.demo-ready) .mission-canvas-wrap {
  min-height: 540px;
  background:
    radial-gradient(circle at 58% 54%, rgba(63,214,234,.22), transparent 4%, transparent 15%),
    radial-gradient(circle at 35% 40%, rgba(109,147,255,.18), transparent 5%, transparent 18%),
    linear-gradient(155deg,transparent 48%,rgba(109,147,255,.28) 49%,rgba(109,147,255,.28) 49.4%,transparent 50%),
    linear-gradient(rgba(109,147,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,147,255,.05) 1px,transparent 1px),#050a12;
  background-size: auto,auto,auto,48px 48px,48px 48px,auto;
}
.mission-console:not(.demo-ready) .mission-canvas-wrap::after { content: "STATIC SYNTHETIC SNAPSHOT / RUNTIME UNAVAILABLE"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #a5b4c7; font: 550 9px var(--font-mono); letter-spacing: .12em; white-space: nowrap; }
.mission-console:not(.demo-ready) button { pointer-events: none; }
.mission-console:not(.demo-ready) .mission-forces > div:nth-child(3) i { --force: 69%; }
.mission-console:not(.demo-ready) .mission-forces > div:nth-child(4) i { --force: 46%; }
.mission-console:not(.demo-ready) .mission-forces > div:nth-child(5) i { --force: 48%; }
.mission-console:not(.demo-ready) .mission-forces > div:nth-child(6) i { --force: 55%; }
.mission-console:not(.demo-ready) .mission-forces > div:nth-child(7) i { --force: 53%; }
.mission-console:not(.demo-ready) .mission-forces > div:nth-child(8) i { --force: 9%; }
.mission-console:not(.demo-ready) .mission-track-stack > div:nth-child(1) { --track: 100%; }
.mission-console:not(.demo-ready) .mission-track-stack > div:nth-child(2) { --track: 72%; }
.mission-console:not(.demo-ready) .mission-track-stack > div:nth-child(3) { --track: 52%; }
.mission-console:not(.demo-ready) .mission-track-stack > div:nth-child(4) { --track: 30%; }
.mission-console:not(.demo-ready) .mission-track-stack > b { --cursor: 35%; }

@media (max-width: 1180px) {
  .demo-hero { grid-template-columns: minmax(0,1fr) minmax(390px,.86fr); gap: 46px; }
  .mission-commandbar { grid-template-columns: 1fr auto; }
  .mission-command-state { grid-column: 2; grid-row: 1; }
  .mission-command-ids { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--hairline); }
  .mission-layout { grid-template-columns: minmax(480px,1fr) 350px; }
  .mission-worklist { grid-column: 1 / -1; display: grid; grid-template-columns: 150px 240px minmax(0,1fr); gap: 12px; align-items: center; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .mission-rail-head { display: block; padding: 0; }
  .mission-rail-head b { display: block; margin-top: 6px; }
  .mission-lenses { margin: 0; }
  .mission-object-list { grid-template-columns: repeat(4,minmax(135px,1fr)); overflow-x: auto; }
  .mission-object-list button { min-height: 52px; }
  .mission-lineage-mini { display: none; }
  .mission-branch-strip { grid-template-columns: minmax(230px,.75fr) minmax(300px,1.25fr); }
  .mission-branch-metrics { grid-column: 1 / -1; border-top: 1px solid var(--hairline); border-left: 0; }
}
@media (max-width: 900px) {
  .demo-hero { min-height: auto; grid-template-columns: 1fr; padding-bottom: 84px; }
  .demo-hero h1 { max-width: 12ch; }
  .demo-hero-trace { width: min(100%,680px); }
  .mission-profilebar { overflow-x: auto; }
  .mission-profilebar em { display: none; }
  .mission-profile-readout { grid-template-columns: 190px minmax(260px,1fr); }
  .mission-profile-readout > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--hairline); border-left: 0; }
  .mission-branch-strip { grid-template-columns: 1fr; }
  .mission-branch-strip > p,
  .mission-branch-metrics { border-left: 0; border-top: 1px solid var(--hairline); }
  .mission-branch-metrics { grid-column: auto; }
  .mission-layout { grid-template-columns: 1fr; }
  .mission-worklist { grid-template-columns: 130px 220px minmax(520px,1fr); overflow-x: auto; }
  .mission-inspector { border-left: 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: minmax(260px,.8fr) minmax(310px,1.2fr); align-items: start; }
  .mission-inspector-head,.mission-object-facts { grid-column: 1; }
  .mission-forces { grid-column: 2; grid-row: 1 / span 2; }
  .mission-authority { grid-column: 1 / -1; }
  .mission-impact-head { align-items: flex-start; }
  .mission-impact-result { grid-template-columns: 160px 1fr; }
  .mission-impact-result p { grid-column: 1 / -1; }
  .mission-canvas { min-height: max(430px,52svh); }
  .mission-recorder-body { grid-template-columns: 1fr; }
  .mission-event-log { border-left: 0; border-top: 1px solid var(--hairline); }
  .mission-scrub-row { grid-template-columns: 130px minmax(170px,1fr); }
  .mission-scrub-row > span { grid-column: 1 / -1; text-align: left; }
  .mission-controls { flex-wrap: wrap; }
  .mission-controls .spacer { flex-basis: 100%; height: 0; }
  .evaluation-envelope { grid-template-columns: 1fr; gap: 11px; }
  .demo-proof-grid { grid-template-columns: 1fr; }
  .demo-proof-grid article { min-height: 0; }
  .demo-proof-grid h3 { margin-top: 24px; max-width: 22ch; }
}
@media (max-width: 620px) {
  .demo-hero { padding-top: calc(var(--header-h) + 54px); gap: 42px; }
  .demo-hero h1 { font-size: clamp(47px,14vw,70px); }
  .demo-hero-trace { padding: 15px; }
  .demo-trace-head { display: grid; }
  .demo-trace-axis { padding: 50px 0 38px; }
  .demo-trace-axis > b { top: 57px; }
  .demo-trace-axis span { font-size: 7px; letter-spacing: .02em; }
  .demo-trace-metrics { grid-template-columns: 1fr 1fr; }
  .demo-trace-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
  .demo-trace-metrics > div:nth-child(4) { border-top: 1px solid var(--hairline); }
  .demo-hero-trace > p { display: none; }
  .mission-commandbar { grid-template-columns: 1fr; }
  .mission-command-title small { display: none; }
  .mission-command-state { grid-column: 1; grid-row: auto; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--hairline); }
  .mission-command-ids { grid-column: 1; flex-wrap: wrap; }
  .mission-profilebar > span { display: none; }
  .mission-profile-readout { grid-template-columns: 1fr; }
  .mission-profile-readout > div,
  .mission-profile-readout > div:last-child { grid-column: auto; border-left: 0; border-top: 1px solid var(--hairline); }
  .mission-profile-readout > div:first-child { border-top: 0; }
  .mission-branch-state,
  .mission-branch-strip > p,
  .mission-branch-metrics { padding: 13px 14px; }
  .mission-branch-state b { font-size: 13px; }
  .mission-branch-metrics { grid-template-columns: 1fr; gap: 0; }
  .mission-branch-metrics > div { min-height: 46px; display: grid; grid-template-columns: 88px 1fr; align-items: center; border-left: 0; border-top: 1px solid var(--hairline); }
  .mission-branch-metrics > div:first-child { border-top: 0; }
  .mission-branch-metrics b { margin-top: 0; text-align: right; }
  .mission-worklist { display: grid; grid-template-columns: 1fr; gap: 12px; overflow: visible; }
  .mission-rail-head { display: flex; align-items: center; padding: 0; }
  .mission-rail-head b { display: inline; margin-top: 0; }
  .mission-lenses { width: 100%; }
  .mission-object-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(154px,72vw); overflow-x: auto; padding-bottom: 4px; }
  .mission-canvas { min-height: 430px; }
  .mission-inline-transport .ctl { min-height: 44px; }
  .mission-inline-transport span { font-size: 7.5px; }
  .mission-canvas-legend { gap: 10px; }
  .mission-canvas-legend span { font-size: 7px; }
  .mission-viewport-metrics { grid-template-columns: 1fr 1fr; }
  .mission-viewport-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
  .mission-viewport-metrics > div:nth-child(4) { border-top: 1px solid var(--hairline); }
  .mission-inspector { display: flex; }
  .mission-object-facts > div { grid-template-columns: 96px minmax(0,1fr); }
  .mission-forces > div:not(.mission-forces-head) { grid-template-columns: 126px minmax(90px,1fr) 34px; min-height: 44px; }
  .mission-impact-head { display: grid; gap: 14px; }
  .mission-impact-clock { width: 100%; min-width: 0; text-align: left; }
  .mission-impact-paths { grid-template-columns: 1fr; }
  .mission-impact-metrics { grid-template-columns: 1fr 1fr; }
  .mission-impact-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; }
  .mission-impact-metrics > div:nth-child(4) { border-top: 1px solid var(--hairline); }
  .mission-impact-result { grid-template-columns: 1fr; gap: 8px; }
  .mission-impact-result p { grid-column: auto; }
  .mission-state-rail { overflow-x: auto; grid-template-columns: repeat(7,minmax(102px,1fr)); }
  .mission-track-stack > div { grid-template-columns: 58px 1fr; }
  .mission-track-stack > b { left: 82px; right: 14px; }
  .mission-scrub-row { grid-template-columns: 1fr; }
  .mission-controls { align-items: stretch; }
  .mission-controls .btn,.mission-controls .ctl { flex: 1 1 100%; }
  .mission-controls .readout { flex: 1 1 28%; min-width: 0; }
}
@media (max-width: 900px) and (max-height: 520px) {
  .demo-hero { min-height: auto; }
  .mission-canvas { min-height: 390px; }
  .mission-controls { position: sticky; bottom: 0; z-index: 6; }
}
@media (forced-colors: active) {
  .demo-hero-trace,.mission-console,.mission-object-list button,.mission-authority,.demo-proof-grid article { border: 1px solid CanvasText; }
  .mission-state-rail li i,.demo-trace-axis i { border-color: CanvasText; }
  .mission-forces i::after,.mission-track-stack i::after { background: Highlight !important; }
  .mission-state-rail li.active { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* ============================================================
   FOUNDER
   ============================================================ */
.founder-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(52px, 7vw, 112px);
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 104px));
  padding-bottom: clamp(68px, 9vw, 126px);
}
.founder-hero::before {
  content: "";
  position: absolute;
  width: min(760px, 60vw);
  height: min(760px, 60vw);
  right: -18%;
  top: -12%;
  background: radial-gradient(circle, rgba(59, 109, 255, 0.11), rgba(63, 214, 234, 0.035) 38%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.founder-hero-copy { position: relative; z-index: 1; }
.founder-hero h1 {
  font-size: clamp(48px, 6.2vw, 88px);
  max-width: 10ch;
  letter-spacing: -0.045em;
}
.founder-hero .page-hero-deck {
  max-width: 55ch;
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.68;
}
.founder-role {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 20px;
  color: var(--cobalt-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.founder-role span { color: var(--ink-faint); }
.founder-signal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.founder-signal span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
}
.founder-signal i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(63, 214, 234, 0.7);
}
.founder-portrait {
  position: relative;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(150, 175, 210, 0.09), rgba(9, 16, 29, 0.66));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(59, 109, 255, 0.035) inset;
}
.founder-portrait::before,
.founder-portrait::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.founder-portrait::before {
  inset: -1px;
  border-radius: 18px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 18px 0 / 44px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 18px / 1px 44px no-repeat,
    linear-gradient(var(--cobalt), var(--cobalt)) calc(100% - 62px) 100% / 44px 1px no-repeat,
    linear-gradient(var(--cobalt), var(--cobalt)) 100% calc(100% - 62px) / 1px 44px no-repeat;
  opacity: 0.8;
}
.founder-portrait::after {
  top: 26%;
  left: -34px;
  width: 68px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
  box-shadow: 0 0 18px rgba(63, 214, 234, 0.45);
}
.founder-portrait-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 11px 11px 5px 5px;
  background: #090e17;
}
.founder-portrait-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 66%, rgba(5, 9, 16, 0.32));
  pointer-events: none;
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.035);
}
.founder-portrait figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  padding: 14px 10px 8px;
  font-family: var(--font-mono);
}
.founder-portrait figcaption span {
  color: var(--ink-faint);
  font-size: 9px;
  letter-spacing: 0.15em;
}
.founder-portrait figcaption b {
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.founder-portrait figcaption i { color: var(--cobalt-soft); font-style: normal; }
.founder-layout { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 5vw, 80px); margin-top: 40px; }
.founder-side { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; display: flex; flex-direction: column; gap: 4px; }
.chapter-btn {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 13px 16px; border-left: 2px solid var(--hairline);
  color: var(--ink-faint); font-size: 14.5px; font-family: var(--font-sans);
  display: flex; gap: 12px; align-items: baseline;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  min-height: 44px;
}
.chapter-btn span { font-family: var(--font-mono); font-size: 11px; }
.chapter-btn:hover { color: var(--ink-dim); }
.chapter-btn.active {
  color: var(--ink); border-left-color: var(--cyan);
  background: linear-gradient(90deg, rgba(63, 214, 234, 0.07), transparent);
}
.founder-chapters { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 90px); }
.chapter { scroll-margin-top: calc(var(--header-h) + 24px); }
.chapter h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 18px; max-width: 22ch; }
.chapter .body { color: var(--ink-dim); font-size: 16.5px; line-height: 1.72; max-width: 64ch; }
.chapter .body p + p { margin-top: 16px; }
.chapter .pull {
  margin: 26px 0; padding: 20px 24px;
  border-left: 2px solid var(--amber);
  background: rgba(240, 164, 60, 0.05);
  color: var(--ink); font-size: 18px; line-height: 1.5;
  max-width: 56ch;
}
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.principle { border: 1px solid var(--hairline); border-radius: 8px; padding: 20px 22px; background: rgba(9, 16, 29, 0.4); }
.principle span { font-family: var(--font-mono); font-size: 11px; color: var(--cobalt-soft); letter-spacing: 0.12em; }
.principle b { display: block; font-size: 16.5px; margin: 8px 0 6px; }
.principle p { color: var(--ink-dim); font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) {
  .founder-hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 76px;
  }
  .founder-hero h1 { max-width: none; }
  .founder-portrait { width: min(100%, 520px); }
  .founder-layout { grid-template-columns: 1fr; }
  .founder-side { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .chapter-btn { border-left: 0; border-bottom: 2px solid var(--hairline); white-space: nowrap; }
  .chapter-btn.active { border-bottom-color: var(--cyan); background: none; }
  .principles { grid-template-columns: 1fr; }
}

/* ============================================================
   RESEARCH
   ============================================================ */
.pathway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 54px; }
.pathway {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 28px; background: rgba(9, 16, 29, 0.4);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s;
}
.pathway:hover { border-color: var(--hairline-strong); }
.pathway span { font-family: var(--font-mono); font-size: 11px; color: var(--cobalt-soft); letter-spacing: 0.14em; }
.pathway h3 { font-size: 21px; }
.pathway p { color: var(--ink-dim); font-size: 15px; line-height: 1.65; }
.pathway ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-dim); font-size: 14px; line-height: 1.8; }
@media (max-width: 800px) { .pathway-grid { grid-template-columns: 1fr; } }

.brief-form { margin-top: 40px; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.brief-form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-faint); }
.brief-form input, .brief-form textarea, .brief-form select {
  background: rgba(12, 20, 36, 0.6);
  border: 1px solid var(--hairline-strong); border-radius: 6px;
  color: var(--ink); font-family: var(--font-sans); font-size: 15px;
  padding: 13px 15px;
  transition: border-color 0.18s;
}
.brief-form input:focus-visible, .brief-form textarea:focus-visible, .brief-form select:focus-visible {
  outline: none; border-color: var(--cyan);
}
.form-disclosure {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px dashed var(--amber-dim); border-radius: 8px;
  font-size: 13px; color: var(--ink-dim); line-height: 1.6;
}
.form-disclosure i {
  flex: 0 0 auto; margin-top: 5px;
  width: 8px; height: 8px; background: var(--amber); border-radius: 50%;
}
.form-status { font-family: var(--font-mono); font-size: 12.5px; color: var(--cyan); min-height: 20px; }

/* ============================================================
   Misc
   ============================================================ */
.tag-strip {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 26px;
  border: 1px solid var(--hairline); border-radius: 5px;
  padding: 10px 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink-dim);
}
.tag-strip i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

.not-found { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); }
.not-found h1 { font-size: clamp(34px, 5vw, 60px); margin: 18px 0; }
.not-found p { color: var(--ink-dim); max-width: 48ch; margin: 0 auto 32px; }

/* ============================================================
   RefractEHR motion language
   REST -> INGRESS -> CONVERGE -> REFRACT -> RESOLVE -> RETAIN
   ============================================================ */

/* page handoff: two bounded planes converge on the refractor axis */
.rx-page-transition {
  position: fixed; inset: 0; z-index: 1000;
  overflow: hidden; pointer-events: none;
  visibility: visible;
}
.rx-transition-panel {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    radial-gradient(circle at 50% 48%, rgba(18,37,72,.44), transparent 54%),
    linear-gradient(180deg, #050913, #03060c);
  transition: transform 720ms var(--ease-refract);
}
.rx-transition-panel--a {
  left: 0; border-right: 1px solid rgba(180,205,235,.18);
  box-shadow: 30px 0 80px rgba(0,0,0,.62);
}
.rx-transition-panel--b {
  right: 0; border-left: 1px solid rgba(180,205,235,.18);
  box-shadow: -30px 0 80px rgba(0,0,0,.62);
}
.rx-transition-axis {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent 4%, var(--cobalt) 28%, #fff 50%, var(--cyan) 72%, transparent 96%);
  box-shadow: 0 0 28px rgba(63,214,234,.66), 0 0 80px rgba(59,109,255,.35);
  transform: translateX(-50%) scaleY(1);
  transition: transform 760ms var(--ease-refract), opacity 320ms 420ms;
}
.rx-transition-axis::before,
.rx-transition-axis::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 58vw; height: 1px;
  background: linear-gradient(90deg, #fff, var(--cyan) 18%, var(--cobalt) 56%, transparent);
  box-shadow: 0 0 18px rgba(63,214,234,.44);
  transform-origin: 0 50%; transform: scaleX(0) rotate(0deg); opacity: 0;
}
.rx-transition-axis::before { --rx-ray-angle: -11deg; }
.rx-transition-axis::after { --rx-ray-angle: 11deg; }
.rx-ready .rx-transition-panel--a { transform: translate3d(-104%,0,0); }
.rx-ready .rx-transition-panel--b { transform: translate3d(104%,0,0); }
.rx-ready .rx-transition-axis { transform: translateX(-50%) scaleY(.05); opacity: 0; }
.rx-ready .rx-transition-axis::before,
.rx-ready .rx-transition-axis::after { animation: rx-ray-release 680ms 90ms var(--ease-refract) both; }
@keyframes rx-ray-release {
  0% { transform: scaleX(0) rotate(0deg); opacity: 0; }
  18% { opacity: 1; }
  72% { transform: scaleX(1) rotate(var(--rx-ray-angle)); opacity: .7; }
  100% { transform: scaleX(1.18) rotate(var(--rx-ray-angle)); opacity: 0; }
}
.rx-ready .rx-page-transition { visibility: hidden; transition: visibility 0s 790ms; }
.rx-exit .rx-page-transition { visibility: visible; transition: none; }
.rx-exit .rx-transition-panel--a,
.rx-exit .rx-transition-panel--b { transform: translate3d(0,0,0); transition-duration: 500ms; }
.rx-exit .rx-transition-axis { transform: translateX(-50%) scaleY(1); opacity: 1; transition: transform 470ms var(--ease-refract), opacity 160ms; }
.rx-exit .rx-transition-axis::before,
.rx-exit .rx-transition-axis::after { animation: none; opacity: 0; transform: scaleX(0) rotate(var(--rx-ray-angle)); }

/* entrance hierarchy for interior pages */
.rx-js .site-header { transform: translate3d(0,-105%,0); opacity: 0; }
.rx-js body.rx-ready .site-header { transform: translate3d(0,0,0); opacity: 1; transition-delay: 120ms; }
.rx-js body[data-rx-page="home"]:not(.rx-exit) .rx-page-transition { visibility: hidden; pointer-events: none; }
.rx-js body[data-rx-page="home"].rx-exit .rx-page-transition { visibility: visible; }
.rx-js body[data-rx-page="home"] .site-header { transform: none; opacity: 1; transition: background var(--motion-signal), border-color var(--motion-signal), box-shadow var(--motion-signal); }
.rx-js .page-hero > .page-hero-kicker,
.rx-js .page-hero > h1,
.rx-js .page-hero > .page-hero-deck,
.rx-js .page-hero > .page-hero-ctas,
.rx-js .page-hero > .tag-strip {
  opacity: 0;
  transform: translate3d(0,34px,0);
  clip-path: inset(0 0 22% 0);
}
.rx-js body.rx-ready .page-hero > .page-hero-kicker,
.rx-js body.rx-ready .page-hero > h1,
.rx-js body.rx-ready .page-hero > .page-hero-deck,
.rx-js body.rx-ready .page-hero > .page-hero-ctas,
.rx-js body.rx-ready .page-hero > .tag-strip {
  opacity: 1; transform: translate3d(0,0,0); clip-path: inset(0);
  transition: opacity var(--motion-refract) var(--ease-signal), transform var(--motion-settle) var(--ease-signal), clip-path var(--motion-settle) var(--ease-signal);
}
.rx-js body.rx-ready .page-hero > .page-hero-kicker { transition-delay: 160ms; }
.rx-js body.rx-ready .page-hero > h1 { transition-delay: 220ms; }
.rx-js body.rx-ready .page-hero > .page-hero-deck { transition-delay: 320ms; }
.rx-js body.rx-ready .page-hero > .page-hero-ctas { transition-delay: 400ms; }
.rx-js body.rx-ready .page-hero > .tag-strip { transition-delay: 470ms; }

/* founder arrival uses the same grammar at portrait scale */
.rx-js .founder-hero-copy { opacity: 0; transform: translate3d(-34px,22px,0); }
.rx-js .founder-portrait { opacity: 0; transform: translate3d(42px,18px,0) scale(.965); }
.rx-js body.rx-ready .founder-hero-copy,
.rx-js body.rx-ready .founder-portrait {
  opacity: 1; transform: translate3d(0,0,0) scale(1);
  transition: opacity var(--motion-refract) var(--ease-signal), transform var(--motion-settle) var(--ease-signal);
}
.rx-js body.rx-ready .founder-hero-copy { transition-delay: 220ms; }
.rx-js body.rx-ready .founder-portrait { transition-delay: 340ms; }
.rx-js body.rx-ready .founder-portrait::after { animation: rx-portrait-scan 1.2s 560ms var(--ease-refract) both; }
@keyframes rx-portrait-scan {
  0% { transform: translate3d(-28px,0,0) scaleX(.2); opacity: 0; }
  35%, 72% { opacity: 1; }
  82% { transform: translate3d(46px,0,0) scaleX(1); opacity: .8; }
  100% { transform: none; opacity: .8; }
}

/* scroll syntax: different objects resolve according to their function */
.rx-js .rv[data-rx-motion="signal"] { transform: translate3d(0,34px,0); }
.rx-js .rv[data-rx-motion="thesis"] { transform: translate3d(-18px,42px,0); clip-path: inset(0 0 22% 0); }
.rx-js .rv[data-rx-motion="instrument"] {
  transform: perspective(1200px) translate3d(0,54px,0) rotateX(2.4deg) scale(.972);
  clip-path: inset(9% 2% 9% 2% round 12px);
}
.rx-js .rv[data-rx-motion="cell"] { transform: translate3d(var(--rx-vector-x),28px,0) scale(.985); }
.rx-js .rv[data-rx-motion="handoff"] { transform: translate3d(-28px,0,0); clip-path: inset(0 18% 0 0 round 10px); }
.rx-js .rv[data-rx-motion="settle"] { transform: translate3d(0,28px,0); }
.rx-js .rv.in {
  opacity: 1; transform: translate3d(0,0,0) rotateX(0) scale(1);
  clip-path: inset(0 round 0);
  transition:
    opacity var(--motion-refract) var(--ease-signal),
    transform var(--motion-settle) var(--ease-signal),
    clip-path var(--motion-settle) var(--ease-refract);
  transition-delay: var(--rv-delay, 0ms);
}
.rx-js .section-intro .section-meta,
.rx-js .section-intro .section-title,
.rx-js .section-intro .section-deck { opacity: 0; transform: translate3d(0,18px,0); }
.rx-js .section-intro.in .section-meta,
.rx-js .section-intro.in .section-title,
.rx-js .section-intro.in .section-deck {
  opacity: 1; transform: translate3d(0,0,0);
  transition: opacity var(--motion-refract) var(--ease-signal), transform var(--motion-refract) var(--ease-signal);
}
.rx-js .section-intro.in .section-meta { transition-delay: calc(var(--rv-delay, 0ms) + 90ms); }
.rx-js .section-intro.in .section-title { transition-delay: calc(var(--rv-delay, 0ms) + 170ms); }
.rx-js .section-intro.in .section-deck { transition-delay: calc(var(--rv-delay, 0ms) + 270ms); }
.rx-js .section-meta i { transform: scaleX(0); transform-origin: 0 50%; }
.rx-js .section-intro.in .section-meta i { transform: scaleX(1); transition: transform 840ms calc(var(--rv-delay, 0ms) + 160ms) var(--ease-signal); }

/* instruments do not merely fade in: the field is scanned and resolved */
.artifact.rv::after {
  content: ""; position: absolute; inset: -16% auto -16% -34%; z-index: 8;
  width: 24%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(59,109,255,.06), rgba(255,255,255,.28), rgba(63,214,234,.16), transparent);
  transform: translate3d(-160%,0,0) skewX(-12deg);
  mix-blend-mode: screen;
}
.artifact.rv.in::after { animation: rx-instrument-scan 1180ms calc(var(--rv-delay, 0ms) + 260ms) var(--ease-refract) both; }
@keyframes rx-instrument-scan {
  0% { transform: translate3d(-160%,0,0) skewX(-12deg); opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: .8; }
  100% { transform: translate3d(680%,0,0) skewX(-12deg); opacity: 0; }
}

/* live engines share one causal edge rail instead of unrelated effects */
.rx-phase-rail {
  position: absolute; z-index: 9; left: 12px; right: 12px; top: -1px; height: 2px;
  overflow: hidden; pointer-events: none; opacity: .9;
}
.rx-phase-rail::before,
.rx-phase-rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, var(--cobalt), #fff 58%, var(--cyan), transparent);
  box-shadow: 0 0 18px rgba(63,214,234,.42);
  opacity: 0;
}
.rx-phase-rail::before { left: 0; transform: translate3d(-120%,0,0); }
.rx-phase-rail::after { right: 0; transform: translate3d(120%,0,0) scaleX(-1); }
.artifact.rv.in[data-rx-phase="ingress"] .rx-phase-rail::before { animation: rx-rail-ingress 720ms var(--ease-signal) both; }
.artifact.rv.in[data-rx-phase="converge"] .rx-phase-rail::before,
.artifact.rv.in[data-rx-phase="converge"] .rx-phase-rail::after { animation: rx-rail-converge 680ms var(--ease-refract) both; }
.artifact.rv.in[data-rx-phase="refract"] .rx-phase-rail::before { animation: rx-rail-refract 820ms var(--ease-refract) both; }
.artifact.rv.in[data-rx-phase="resolve"] { animation: rx-artifact-resolve 760ms var(--ease-settle); }
.artifact.rv.in[data-rx-phase="resolve"] .rx-phase-rail::before { animation: rx-rail-resolve 760ms var(--ease-settle) both; }
.artifact.rv.in[data-rx-phase="retain"] .rx-phase-rail { background: linear-gradient(90deg, transparent 4%, rgba(63,214,234,.1), rgba(109,147,255,.18), transparent 96%); }
@keyframes rx-rail-ingress {
  0% { transform: translate3d(-120%,0,0); opacity: 0; }
  16%, 76% { opacity: 1; }
  100% { transform: translate3d(315%,0,0); opacity: 0; }
}
@keyframes rx-rail-converge {
  0% { opacity: 0; }
  20%, 72% { opacity: 1; }
  100% { transform: translate3d(98%,0,0); opacity: 0; }
}
.artifact.rv.in[data-rx-phase="converge"] .rx-phase-rail::after { animation-name: rx-rail-converge-r; }
@keyframes rx-rail-converge-r {
  0% { transform: translate3d(120%,0,0) scaleX(-1); opacity: 0; }
  20%, 72% { opacity: 1; }
  100% { transform: translate3d(-98%,0,0) scaleX(-1); opacity: 0; }
}
@keyframes rx-rail-refract {
  0% { left: 33%; transform: scaleX(.06); opacity: 0; }
  18% { opacity: 1; }
  56% { left: 33%; transform: scaleX(.18); opacity: 1; }
  100% { left: 58%; transform: scaleX(1.35); opacity: 0; }
}
@keyframes rx-rail-resolve {
  0% { left: 33%; transform: scaleX(.04); opacity: 0; }
  34% { opacity: 1; }
  100% { left: 0; width: 100%; transform: scaleX(1); opacity: 0; }
}
@keyframes rx-artifact-resolve {
  0%, 100% { border-color: var(--panel-edge); }
  42% { border-color: rgba(63,214,234,.46); box-shadow: 0 0 0 1px rgba(63,214,234,.06) inset, 0 0 42px rgba(59,109,255,.08); }
}

/* each section is crossed by one restrained signal, never decorative confetti */
.rx-section::before {
  content: ""; position: absolute; left: var(--shell-x); right: var(--shell-x); top: 0;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(59,109,255,.62), var(--cyan), transparent);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
.rx-section.rx-section-active::before { animation: rx-section-cross 1100ms var(--ease-refract) both; }
@keyframes rx-section-cross {
  0% { transform: scaleX(0); opacity: 0; }
  20% { opacity: .82; }
  72% { transform: scaleX(1); opacity: .5; transform-origin: 0 50%; }
  73% { transform-origin: 100% 50%; }
  100% { transform: scaleX(0); opacity: 0; transform-origin: 100% 50%; }
}

/* interaction feedback: machine acknowledgement resolves to a bounded state */
.artifact-bar .lamp { position: relative; }
.artifact-bar .lamp::after {
  content: ""; position: absolute; inset: -5px; border: 1px solid currentColor; border-radius: 50%;
  color: var(--cyan); opacity: 0;
}
.artifact-bar .lamp--amber::after { color: var(--amber); }
.artifact.rv.in .artifact-bar .lamp::after { animation: rx-status-lock 1.4s calc(var(--rv-delay, 0ms) + 520ms) var(--ease-settle) 1 both; }
@keyframes rx-status-lock {
  0%, 24% { transform: scale(.5); opacity: 0; }
  42% { opacity: .5; }
  100% { transform: scale(1.25); opacity: 0; }
}
.rx-ack { animation: rx-ack 620ms var(--ease-settle); }
@keyframes rx-ack {
  0% { box-shadow: 0 0 0 0 rgba(63,214,234,0); }
  28% { box-shadow: 0 0 0 1px rgba(63,214,234,.75), 0 0 26px rgba(63,214,234,.24); }
  100% { box-shadow: 0 0 0 8px rgba(63,214,234,0); }
}

@media (max-width: 980px) {
  .rx-nav-trace { display: none; }
  .rx-ambient { opacity: .34; }
  .rx-ambient-grid { background-size: 52px 52px; }
  .rx-js .rv[data-rx-motion="instrument"] { transform: translate3d(0,38px,0) scale(.982); }
}
@media (max-width: 680px) {
  .rx-ambient-plane { display: none; }
  .rx-ambient-grid { animation: none; }
  body[data-rx-page="home"] .rx-ambient { display: none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .corridor-copy h1 .line { transform: none; }
  .hero-kicker, .hero-deck, .hero-cat, .hero-ctas { opacity: 1; transform: none; }
  .corridor-wrap { height: auto; }
  .corridor-pin { position: relative; height: 100vh; }
  .corridor-scroll-cue i::after { animation: none; top: 30%; }
  .continuum { height: auto; padding: clamp(72px,10vw,120px) 0; }
  .continuum-pin { position: relative; top: auto; height: auto; overflow: visible; }
  .continuum-shell {
    height: auto; min-height: 0;
    grid-template-columns: 1fr; grid-template-rows: auto auto; gap: clamp(42px,6vw,72px);
  }
  .continuum-artifact { grid-row: 1; min-height: clamp(480px,56vw,640px); }
  .continuum-narrative { grid-row: 2; min-height: 0; }
  .continuum-beats { min-height: 0; display: grid; gap: clamp(54px,7vw,88px); }
  .continuum-beat {
    position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto;
  }
  .continuum-beat h2 { max-width: 20ch; }
  .continuum-nav { display: none; }
  .continuum-posture { opacity: 1; transform: none; }
  .governed-spine-story { height: auto; }
  .spine-ambient-field { display: none; }
  .spine-scroll-shell { display: block; }
  .spine-stage-column {
    position: relative; top: auto; height: auto; min-height: 0; padding-bottom: 0;
  }
  .governed-spine-stage { height: auto; min-height: 680px; }
  .spine-stage-grid { min-height: 520px; }
  .spine-canvas { min-height: 520px; }
  .spine-narrative-column { width: auto; margin: 54px 0 0; pointer-events: auto; }
  .spine-sequence { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); }
  .spine-scroll-step,
  .spine-scroll-step.is-active {
    min-height: 0; padding: 20px; opacity: 1; transform: none; background: var(--bg-panel);
  }
  .spine-step-trigger { min-height: 122px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .spine-scroll-step > p { margin: 8px 0 0 50px; padding: 0; border: 0; background: transparent; }
  .spine-story-exit { width: auto; min-height: 0; padding: 86px 0 40px; background: transparent; }
  .rx-ambient, .rx-page-transition, .rx-nav-trace { display: none; }
  .rx-js .site-nav a[aria-current="page"]::after { opacity: 1; }
  .rx-js .site-header,
  .rx-js .page-hero > *,
  .rx-js .founder-hero-copy,
  .rx-js .founder-portrait,
  .rx-js .rv { opacity: 1; transform: none; clip-path: none; filter: none; }
  .mission-forces > div:not(.mission-forces-head) i::after { transition: none; }
  .mission-console [data-state-step] { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .spine-stage-grid { grid-template-columns: 1fr; grid-template-rows: minmax(380px,1fr) auto; }
  .spine-canvas { min-height: 380px; }
  .spine-sequence { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .continuum-shell { gap: 34px; }
  .continuum-artifact { min-height: 440px; }
  .continuum-narrative { min-height: 0; }
  .continuum-beats { min-height: 0; gap: 48px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .continuum-artifact { min-height: 380px; }
}