/* ═══════════════════════════════════════════════════════════════
   CONRRAD Demonstration — presentation layer (INT-ATLAS-023-A)
   Independent consumer product. Carries the Founder-approved
   WO-ATLAS-013 / v3.0.0 stage styles verbatim.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #122033;
  --muted: #5a6d82;
  --accent: #087a8c;
  --font: "Trebuchet MS", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --eco-chrome-h: 2.5rem; /* matches .eco-chrome--dark; INT-CITIZEN-009-A */
}

* { box-sizing: border-box; }

html {
  margin: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html, body {
  margin: 0;
  min-height: 100%;
  color: #e8f4f8;
  font-family: var(--font);
  background: radial-gradient(circle at 50% 0%, #123448 0%, #0a1c28 55%, #06121a 100%);
}

/* INT-CITIZEN-011-A: one vertical page scroll (chrome reserved by body padding) */
body.has-eco-chrome.eco-demo {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Entry surface shown before start and after close. */
.demo-entry {
  min-height: calc(100vh - var(--eco-chrome-h, 2.5rem));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.25rem 2.5rem;
  gap: 0.9rem;
}

.demo-entry-inner { display: grid; gap: 0.85rem; justify-items: center; max-width: 40rem; }

.demo-entry-kicker {
  margin: 0;
  font: 700 0.72rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6fb6c6;
}

.demo-entry-entity {
  margin: 0;
  font: 700 0.85rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7fe3f2;
}

.demo-entry-not {
  margin: 0;
  max-width: 36rem;
  font: 500 0.78rem/1.45 var(--mono);
  color: #8aa8b6;
}

.demo-entry h1 {
  margin: 0;
  font: 700 clamp(1.6rem, 3.4vw, 2.4rem)/1.15 var(--font);
  letter-spacing: -0.01em;
}

.demo-entry p { margin: 0; color: #9fb6c4; max-width: 44rem; line-height: 1.5; }

.demo-entry-link {
  font: 400 0.82rem/1 var(--font);
  color: #6fb6c6;
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 182, 198, 0.4);
  padding-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   WO-ATLAS-011 — Institutional Demonstration stage
   Every animation below demonstrates an architectural property.
   ═══════════════════════════════════════════════════════════════ */

.btn-demo {
  padding: 0.7rem 1.15rem;
  font: 600 1rem/1.1 var(--font);
  color: #f2fbfd;
  cursor: pointer;
  background: linear-gradient(135deg, #0a5f6e, #087a8c);
  border: 1px solid #06414b;
  border-radius: 2px;
  box-shadow: 0 2px 0 #06414b;
}

.btn-demo:hover { background: linear-gradient(135deg, #087a8c, #0a94a9); }

.demo-actions .btn-demo { padding: 0.45rem 0.8rem; font-size: 0.86rem; }

.landing-thesis {
  max-width: 46rem;
  margin: 0.25rem auto 1.25rem;
  font: italic 1.05rem/1.5 var(--font);
  color: var(--muted);
}

/* Stage in document flow — page is the only scroller */
body.demo-active .demo-entry {
  display: none;
}

.demo-stage {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: visible;
  color: #e8f4f8;
  background: transparent;
}

.demo-stage-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(1180px, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem clamp(0.75rem, 2.5vw, 1.25rem) 2rem;
  box-sizing: border-box;
  min-width: 0;
}

.demo-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0 0.55rem;
  border-bottom: 1px solid rgba(140, 200, 215, 0.25);
  flex-shrink: 0;
  /* INT-CITIZEN-012-A: not sticky — sticky was covering scene text while scrolling */
  position: relative;
  top: auto;
  z-index: 1;
  background: transparent;
  backdrop-filter: none;
}

.demo-entity-line {
  margin: 0.35rem 0 0;
  font: 600 0.68rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  color: #7fe3f2;
}

.demo-kicker {
  margin: 0;
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6fd0e0;
}

.demo-brand { margin: 0.2rem 0 0; font: 700 1.05rem/1.15 var(--font); }

.demo-close {
  padding: 0.3rem 0.6rem;
  font: 600 0.72rem var(--mono);
  color: #cfe9f0;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(140, 200, 215, 0.4);
  border-radius: 2px;
  flex-shrink: 0;
}

.demo-scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; flex-shrink: 0; }
.demo-scene-title { margin: 0; font: 700 clamp(1.15rem, 2.4vw, 1.45rem)/1.15 var(--font); }
.demo-scene-subtitle { margin: 0; font: 400 0.88rem/1.3 var(--font); color: #9fc6d4; }

.demo-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 10rem;
  padding: 0.85rem;
  background: rgba(9, 30, 42, 0.62);
  border: 1px solid rgba(140, 200, 215, 0.22);
  border-radius: 3px;
  overflow: hidden; /* confine absolute animation layers */
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: layout paint;
}

.demo-note {
  margin: 0;
  font: 400 0.78rem/1.35 var(--mono);
  color: #8fb6c6;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.demo-message-block {
  padding: 0.15rem 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.demo-msg-main {
  margin: 0;
  font: 700 clamp(1.15rem, 2.6vw, 1.55rem)/1.2 var(--font);
  color: #ffffff;
  animation: demo-rise 520ms ease both;
}

.demo-msg-main.final { font-size: clamp(1.35rem, 3vw, 1.85rem); color: #7fe3f2; }

.demo-msg-sub {
  margin: 0.25rem 0 0;
  font: 400 0.92rem/1.4 var(--font);
  white-space: pre-line;
  color: #b6d6e2;
}

.demo-msg-negative {
  margin: 0.4rem 0 0;
  font: 600 0.9rem/1.3 var(--mono);
  color: #ff9d9d;
  text-decoration: line-through;
}

.demo-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.5rem;
  position: relative;
  z-index: 1; /* never under spilled canvas paint */
  width: 100%;
  min-width: 0;
}

.demo-metric {
  padding: 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(140, 200, 215, 0.5);
  animation: demo-rise 420ms ease both;
  animation-delay: calc(var(--i) * 70ms);
}

.demo-metric.good { border-left-color: #4fd18b; }
.demo-metric.warn { border-left-color: #eeb44f; }

.demo-metric-label {
  display: block;
  font: 600 0.68rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92b8c8;
}

.demo-metric-value { font: 700 1.35rem/1.2 var(--font); color: #ffffff; }

.demo-pain { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pain-chip,
.proof-chip {
  padding: 0.22rem 0.55rem;
  font: 600 0.72rem/1.3 var(--mono);
  border-radius: 2px;
}

.pain-chip { color: #ffd9a8; background: rgba(238, 180, 79, 0.16); border: 1px solid rgba(238, 180, 79, 0.45); }
.proof-chip { color: #b9ecd2; background: rgba(79, 209, 139, 0.13); border: 1px solid rgba(79, 209, 139, 0.35); }

.demo-evidence { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.demo-evidence small { font: 600 0.68rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #6fd0e0; }
.demo-evidence code { font: 400 0.72rem var(--mono); color: #a9c8d6; }

.demo-stage-foot { display: flex; flex-direction: column; gap: 0.6rem; }

.demo-progress { height: 3px; background: rgba(255, 255, 255, 0.12); }
.demo-progress span { display: block; width: 0; height: 100%; background: #4fd18b; }

.demo-rail { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.rail-step {
  width: 1.85rem;
  height: 1.85rem;
  font: 600 0.78rem var(--mono);
  color: #9fc6d4;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(140, 200, 215, 0.3);
  border-radius: 2px;
}

.rail-step.done { color: #4fd18b; border-color: rgba(79, 209, 139, 0.5); }
.rail-step.active { color: #06121a; background: #7fe3f2; border-color: #7fe3f2; }

.demo-controls { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.demo-controls button {
  padding: 0.45rem 0.9rem;
  font: 600 0.84rem var(--font);
  color: #e8f4f8;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(140, 200, 215, 0.35);
  border-radius: 2px;
}

.demo-controls button:hover { background: rgba(127, 227, 242, 0.18); }
.demo-controls button[disabled] { cursor: default; opacity: 0.45; }

.demo-principal {
  margin: 0;
  font: 600 0.86rem/1.35 var(--mono);
  color: #7fe3f2;
}

.demo-stage.paused .demo-canvas { filter: saturate(0.6); }

/* ─── Animation: converge (entry point irrelevance) ─── */
.anim { width: 100%; }

.anim-converge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; }
.conv-sources { display: grid; gap: 0.45rem; }

.conv-source {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  font: 600 0.85rem var(--mono);
  color: #cfe9f0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(140, 200, 215, 0.45);
  animation: demo-slide-in 420ms ease both;
  animation-delay: calc(var(--i) * 110ms);
}

.conv-beam {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(127, 227, 242, 0) 0%, #7fe3f2 60%, #7fe3f2 100%);
  background-size: 200% 100%;
  animation: demo-beam 1400ms linear infinite;
  animation-delay: calc(var(--i) * 160ms);
}

.conv-target-card {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  max-width: 16rem;
  min-width: 0;
  padding: 1.1rem 1.3rem;
  text-align: center;
  background: rgba(8, 122, 140, 0.25);
  border: 2px solid #7fe3f2;
  box-shadow: 0 0 22px rgba(127, 227, 242, 0.35);
  box-sizing: border-box;
}

.conv-target-card strong { font: 700 1.6rem var(--font); color: #ffffff; }
.conv-target-card small { font: 600 0.72rem var(--mono); color: #9fc6d4; }

/* ─── Animation: provider swap (identity persistence) ─── */
.anim-swap { display: grid; gap: 0.7rem; justify-items: center; }

.swap-stable {
  width: 100%;
  max-width: 28rem;
  min-width: 0;
  padding: 0.8rem 1rem;
  background: rgba(79, 209, 139, 0.1);
  border: 2px solid #4fd18b;
  box-sizing: border-box;
}

.swap-stable-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.swap-stable-head strong { font: 700 1.4rem var(--font); }

.swap-badge {
  padding: 0.15rem 0.45rem;
  font: 600 0.66rem var(--mono);
  letter-spacing: 0.1em;
  color: #06121a;
  background: #4fd18b;
}

.swap-holds { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.55rem 0 0; padding: 0; list-style: none; }
.swap-holds li { padding: 0.18rem 0.45rem; font: 600 0.72rem var(--mono); color: #c9f0dd; background: rgba(79, 209, 139, 0.16); }

.swap-arrow { width: 2px; height: 1.6rem; background: linear-gradient(180deg, #4fd18b, #7fe3f2); }

.swap-providers { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }

.swap-provider {
  padding: 0.4rem 0.75rem;
  font: 600 0.85rem var(--mono);
  color: #7b98a8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(140, 200, 215, 0.3);
  transition: all 260ms ease;
}

.swap-provider.active {
  color: #06121a;
  background: #7fe3f2;
  border-style: solid;
  border-color: #7fe3f2;
  transform: translateY(-2px);
}

/* ─── Animation: bifurcation (governance before inference) ─── */
.anim-bifurcation { display: grid; gap: 0.8rem; width: 100%; }

.bif-stream { position: relative; height: 2.2rem; }

.bif-stream-label {
  position: absolute;
  top: 0.15rem;
  left: 0;
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6fd0e0;
}

.bif-dot {
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fe3f2;
  animation: demo-stream 2600ms linear infinite;
  animation-delay: calc(var(--i) * (2600ms / var(--n)));
}

.bif-dot.lane-1 { background: #eeb44f; }

.bif-gate {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  padding: 0.7rem 1rem;
  text-align: center;
  background: rgba(8, 122, 140, 0.22);
  border: 2px solid #7fe3f2;
}

.bif-gate strong { font: 700 1.3rem var(--font); }
.bif-gate small { font: 600 0.7rem var(--mono); color: #9fc6d4; }

.bif-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.7rem; }

.bif-path {
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid rgba(140, 200, 215, 0.5);
  animation: demo-rise 420ms ease both;
}

.bif-path.good { border-left-color: #4fd18b; }
.bif-path.warn { border-left-color: #eeb44f; }
.bif-path-head { display: flex; justify-content: space-between; font: 600 0.7rem var(--mono); color: #92b8c8; }
.bif-path-head b { font: 700 1.05rem var(--font); color: #ffffff; }
.bif-path strong { display: block; margin: 0.2rem 0 0.35rem; font: 700 0.98rem var(--font); }
.bif-path ul { margin: 0; padding-left: 1rem; }

.bif-path li {
  font: 400 0.82rem/1.5 var(--font);
  color: #b6d6e2;
  animation: demo-slide-in 380ms ease both;
  animation-delay: calc(var(--k) * 220ms + 240ms);
}

.bif-bar { height: 4px; margin-top: 0.45rem; background: rgba(255, 255, 255, 0.12); }
.bif-bar span { display: block; height: 100%; background: currentColor; animation: demo-grow 900ms ease both; }
.bif-path.good .bif-bar span { background: #4fd18b; }
.bif-path.warn .bif-bar span { background: #eeb44f; }

.bif-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: 0.6rem; width: 100%; }

.bif-counter {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(140, 200, 215, 0.25);
}

.bif-counter span { font: 600 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #92b8c8; }
.bif-counter b { font: 700 clamp(1.25rem, 3.5vw, 2.1rem)/1 var(--font); }
.bif-counter.good b { color: #4fd18b; }
.bif-counter.warn b { color: #eeb44f; }

/* ─── Animation: capability routing (local before cloud) ─── */
.anim-capability { display: grid; gap: 0.7rem; width: 100%; }

.cap-need { display: grid; gap: 0.1rem; padding: 0.55rem 0.8rem; background: rgba(255, 255, 255, 0.05); border-left: 4px solid #7fe3f2; }
.cap-need small { font: 600 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #92b8c8; }
.cap-need strong { font: 700 1.15rem var(--font); }

.cap-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.cap-steps li {
  padding: 0.32rem 0.65rem;
  font: 600 0.8rem var(--mono);
  color: #cfe9f0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(140, 200, 215, 0.3);
  animation: demo-slide-in 380ms ease both;
  animation-delay: calc(var(--i) * 260ms);
}

.cap-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.7rem; }

.cap-lane {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(140, 200, 215, 0.3);
  animation: demo-rise 420ms ease both;
  animation-delay: calc(var(--i) * 240ms + 500ms);
}

.cap-lane.good { border-color: #4fd18b; background: rgba(79, 209, 139, 0.1); }
.cap-lane.warn { border-color: #eeb44f; background: rgba(238, 180, 79, 0.08); }
.cap-lane-head { display: flex; align-items: baseline; justify-content: space-between; }
.cap-lane-head strong { font: 700 1.15rem var(--font); }
.cap-lane-head b { font: 700 1.5rem var(--font); color: #ffffff; }
.cap-lane span { font: 400 0.85rem/1.4 var(--font); color: #b6d6e2; }

/* ─── Animation: service call (LLM is a small service) ─── */
.anim-service { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; justify-content: center; }

.svc-in,
.svc-out {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(140, 200, 215, 0.3);
}

.svc-in small,
.svc-out small,
.svc-return small { font: 600 0.64rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #92b8c8; }
.svc-in strong, .svc-out strong { font: 600 0.95rem var(--font); }

.svc-box {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  padding: 0.45rem 0.6rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(140, 200, 215, 0.45);
  transform: scale(0.92);
}

.svc-box[data-scale="small"] { max-width: 9.5rem; }
.svc-role { font: 600 0.6rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8fb6c6; }
.svc-label { font: 600 0.85rem var(--font); color: #cfe9f0; }

.svc-not { margin: 0.2rem 0 0; padding: 0; list-style: none; }
.svc-not li { font: 400 0.66rem var(--mono); color: #ff9d9d; text-decoration: line-through; }

.svc-return {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.2rem;
  text-align: center;
  background: rgba(8, 122, 140, 0.25);
  border: 2px solid #7fe3f2;
  box-shadow: 0 0 20px rgba(127, 227, 242, 0.3);
}

.svc-return strong { font: 700 1.5rem var(--font); }
.svc-return span { font: 600 0.7rem var(--mono); color: #9fc6d4; }

/* ─── Animation: validation chain (institution validates AI) ─── */
.anim-validation { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; }

.val-step {
  position: relative;
  display: grid;
  gap: 0.12rem;
  padding: 0.55rem 0.7rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(140, 200, 215, 0.3);
  animation: demo-rise 380ms ease both;
  animation-delay: calc(var(--i) * 320ms);
}

.val-step strong { font: 600 0.9rem var(--font); }
.val-step small { font: 400 0.62rem var(--mono); color: #8fb6c6; }
.val-step.gate { border-color: #4fd18b; background: rgba(79, 209, 139, 0.12); }
.val-step.terminal { border-color: #7fe3f2; background: rgba(8, 122, 140, 0.25); box-shadow: 0 0 18px rgba(127, 227, 242, 0.3); }

.val-stamp {
  /* INT-CITIZEN-012-A: never float over siblings — always in document flow */
  position: static;
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.1rem 0.35rem;
  font: 700 0.6rem var(--mono);
  color: #06121a;
  background: #4fd18b;
  transform: none;
}

.val-arrow {
  width: 1.1rem;
  height: 2px;
  background: #7fe3f2;
  animation: demo-grow 300ms ease both;
  animation-delay: calc(var(--i) * 320ms + 200ms);
}

/* ─── Animation: knowledge evolution (AI once, never again) ─── */
.anim-evolution { display: grid; gap: 0.7rem; width: 100%; }

.evo-cycle {
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid rgba(140, 200, 215, 0.5);
  animation: demo-slide-in 420ms ease both;
  animation-delay: calc(var(--i) * 900ms);
}

.evo-cycle.good { border-left-color: #4fd18b; }
.evo-cycle.warn { border-left-color: #eeb44f; }
.evo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.evo-head strong { font: 700 1.1rem var(--font); }

.evo-ai { padding: 0.18rem 0.5rem; font: 600 0.72rem var(--mono); }
.evo-ai.used { color: #ffd9a8; background: rgba(238, 180, 79, 0.2); }
.evo-ai.skipped { color: #b9ecd2; background: rgba(79, 209, 139, 0.2); }

.evo-cycle ol { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.5rem 0 0; padding: 0 0 0 1.1rem; }
.evo-cycle li {
  font: 400 0.86rem/1.4 var(--font);
  color: #b6d6e2;
  animation: demo-slide-in 360ms ease both;
  animation-delay: calc(var(--i) * 900ms + var(--k) * 260ms + 260ms);
}

/* ─── Animation: final metrics board ─── */
.anim-board { position: relative; min-height: 8rem; width: 100%; }

.board-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(127, 227, 242, 0.22), transparent 70%);
  animation: demo-breathe 2600ms ease-in-out infinite alternate;
}

.anim-missing { font: 600 0.9rem var(--mono); color: #ff9d9d; text-align: center; }

/* INT-DEMO-001: opacity-only — no translate (avoids CLS / layout jumps) */
@keyframes demo-rise {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes demo-slide-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes demo-beam {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@keyframes demo-stream {
  from { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

@keyframes demo-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

@keyframes demo-breathe {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-stage * { animation: none !important; }
  .demo-progress span { transition: none !important; }
}

@media (max-width: 860px) {
  .anim-converge { grid-template-columns: 1fr; }
  .demo-msg-main { font-size: 1.4rem; }
  .demo-msg-main.final { font-size: 1.7rem; }
}

/* ═══════════════════════════════════════════════════════════════
   WO-ATLAS-012 — Business proof narrative
   ═══════════════════════════════════════════════════════════════ */

.demo-msg-closing {
  margin: 0.6rem 0 0;
  font: 700 1.15rem/1.35 var(--font);
  white-space: pre-line;
  color: #7fe3f2;
}

.demo-reveal {
  margin: 0.5rem 0 0;
  font: 700 1rem/1.3 var(--font);
  color: #4fd18b;
  opacity: 0;
  transition: opacity 600ms ease;
}

.demo-reveal.shown { opacity: 1; }

.demo-triad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.55rem;
  position: relative;
  z-index: 1;
  clear: both;
  width: 100%;
  min-width: 0;
}

.triad-cell {
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border-top: 2px solid rgba(140, 200, 215, 0.4);
}

.triad-cell.impact { border-top-color: #4fd18b; }
.triad-cell.property { border-top-color: #7fe3f2; }
.triad-cell.evidence { border-top-color: #eeb44f; }

.triad-cell small {
  display: block;
  margin-bottom: 0.2rem;
  font: 600 0.64rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #92b8c8;
}

.triad-cell p { margin: 0; font: 400 0.84rem/1.4 var(--font); color: #cfe9f0; }
.triad-cell ul { margin: 0; padding-left: 1rem; }
.triad-cell li { font: 400 0.8rem/1.4 var(--font); color: #cfe9f0; }

/* ─── Animation: cost comparison (knowledge is cheaper than AI) ─── */
.anim-cost { display: grid; gap: 0.85rem; width: 100%; }

.cost-split { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center; }

.cost-total { display: grid; justify-items: center; }
.cost-total b { font: 700 3.6rem/1 var(--font); color: #ffffff; }
.cost-total span { font: 600 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #92b8c8; }

.cost-fork { display: flex; gap: 1.2rem; }

.cost-branch { display: grid; justify-items: center; padding: 0.4rem 0.9rem; animation: demo-rise 480ms ease both; }
.cost-branch b { font: 700 2.8rem/1 var(--font); }
.cost-branch span { font: 600 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #92b8c8; }
.cost-branch.good { border-left: 3px solid #4fd18b; }
.cost-branch.good b { color: #4fd18b; }
.cost-branch.warn { border-left: 3px solid #eeb44f; animation-delay: 220ms; }
.cost-branch.warn b { color: #eeb44f; }

.cost-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.7rem; }

.cost-col {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(140, 200, 215, 0.3);
  animation: demo-rise 460ms ease both;
  animation-delay: calc(var(--i) * 260ms + 320ms);
}

.cost-col.good { border-color: #4fd18b; background: rgba(79, 209, 139, 0.1); }
.cost-col.warn { border-color: #eeb44f; background: rgba(238, 180, 79, 0.08); }
.cost-col strong { font: 700 1.05rem var(--font); }
.cost-calls { display: flex; align-items: baseline; gap: 0.4rem; }
.cost-calls b { font: 700 2.4rem/1 var(--font); color: #ffffff; }
.cost-calls span { font: 600 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #92b8c8; }
.cost-money { font: 700 1.5rem var(--font); color: #7fe3f2; }
.cost-col.warn .cost-money { color: #eeb44f; }

.cost-saving {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem;
  background: rgba(79, 209, 139, 0.12);
  border: 1px solid rgba(79, 209, 139, 0.4);
}

.cost-saving span { font: 600 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #b9ecd2; }
.cost-saving b { font: 700 2.2rem/1 var(--font); color: #4fd18b; }

.cost-basis { margin: 0; font: 400 0.72rem var(--mono); color: #8fb6c6; text-align: center; }

/* ─── Animation: decision flow (governance before inference) ─── */
.anim-decision { display: grid; gap: 0.5rem; justify-items: center; width: 100%; }

.dec-entry,
.dec-check,
.dec-question {
  padding: 0.5rem 1rem;
  font: 600 1rem var(--font);
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(140, 200, 215, 0.35);
  animation: demo-rise 400ms ease both;
  animation-delay: calc(var(--i) * 420ms);
}

.dec-question {
  font: 700 1.15rem var(--font);
  color: #7fe3f2;
  background: rgba(8, 122, 140, 0.22);
  border-color: #7fe3f2;
}

.dec-arrow {
  width: 2px;
  height: 1.1rem;
  background: #7fe3f2;
  animation: demo-rise 300ms ease both;
  animation-delay: calc(var(--i) * 420ms + 260ms);
}

.dec-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.7rem; width: 100%; margin-top: 0.3rem; }

.dec-branch {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  padding: 0.65rem 0.85rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(140, 200, 215, 0.3);
  animation: demo-rise 460ms ease both;
  animation-delay: calc(var(--i) * 300ms + 1400ms);
}

.dec-branch.good { border-color: #4fd18b; background: rgba(79, 209, 139, 0.1); }
.dec-branch.warn { border-color: #eeb44f; background: rgba(238, 180, 79, 0.08); }

.dec-answer { font: 700 0.72rem var(--mono); letter-spacing: 0.12em; color: #92b8c8; }
.dec-branch strong { font: 700 1.1rem var(--font); }
.dec-branch.good strong { color: #4fd18b; }
.dec-branch.warn strong { color: #eeb44f; }
.dec-branch b { font: 700 1.4rem var(--font); color: #ffffff; }

/* ─── Animation: outcome board (business outcomes only) ─── */
.anim-outcomes { display: grid; gap: 0.9rem; width: 100%; }

.out-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }

.out-item {
  flex: 1 1 11rem;
  max-width: 14rem;
  padding: 0.55rem 0.7rem;
  font: 700 0.9rem/1.25 var(--font);
  color: #ffffff;
  text-align: center;
  background: rgba(79, 209, 139, 0.1);
  border: 1px solid rgba(79, 209, 139, 0.4);
  animation: demo-rise 420ms ease both;
  animation-delay: calc(var(--i) * 90ms);
}

.out-brand { display: grid; justify-items: center; gap: 0.15rem; padding-top: 0.55rem; }

.out-brand strong {
  font: 700 1.8rem/1 var(--font);
  letter-spacing: 0.18em;
  color: #7fe3f2;
  animation: demo-rise 420ms ease both;
  animation-delay: 650ms;
}

.out-brand span {
  font: 700 1.15rem/1.3 var(--font);
  color: #ffffff;
  animation: demo-rise 420ms ease both;
  animation-delay: calc(var(--i) * 180ms + 780ms);
}

/* ── WO-ATLAS-013 · declared scene elements restored ─────────────────────── */

.demo-hero {
  margin: 0 0 0.9rem;
  font: 600 1.35rem/1.35 var(--font);
  color: #ffffff;
  white-space: pre-line;
  letter-spacing: -0.01em;
}

.property-chip {
  display: inline-block;
  margin: 0.35rem 0 0 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(120, 200, 255, 0.35);
  border-radius: 999px;
  background: rgba(120, 200, 255, 0.08);
  font: 500 0.76rem/1.3 var(--font);
  color: #bfe4ff;
}

/* Two declared animations composed into one scene. */
.anim-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.stack-note {
  margin: 0;
  text-align: center;
  font: 500 0.82rem/1.4 var(--font);
  color: var(--muted);
}

.out-proof {
  margin-top: 0.6rem;
  color: #bfe4ff;
}

/* Scene 1 — the industry baseline, deliberately oversized and unguarded. */
.anim-baseline .dec-oversized {
  border-color: rgba(238, 108, 108, 0.55);
  background: rgba(238, 108, 108, 0.1);
  padding: 1rem 1.6rem;
  font-size: 1.15rem;
}

.anim-baseline .dec-oversized small {
  display: block;
  margin-top: 0.2rem;
  font: 500 0.72rem/1.3 var(--font);
  color: #f3b0b0;
}

.bif-counter.critical {
  border-color: rgba(238, 108, 108, 0.45);
  color: #f3b0b0;
}

/* Scene 5 — institutional chain versus the industry shortcut. */
.anim-contrast {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.contrast-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.contrast-row.good {
  border-left: 3px solid #6fd6a0;
}

.contrast-row.warn {
  border-left: 3px solid #eeb44f;
}

.contrast-label {
  min-width: 0;
  flex: 0 1 8.5rem;
  font: 700 0.78rem/1.3 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.contrast-row .anim-validation {
  flex: 1;
  margin: 0;
}

.val-step.provisional {
  border-style: dashed;
  opacity: 0.85;
}

.val-step.warn {
  border-color: rgba(238, 180, 79, 0.45);
}

.val-warning {
  display: block;
  margin-top: 0.25rem;
  font: 500 0.7rem/1.3 var(--font);
  color: #f3b0b0;
}

/* Scene 6 — every check stamps the record as it passes. */
.anim-checklist .val-step {
  position: relative;
}

.anim-checklist .val-stamp {
  position: static; /* INT-CITIZEN-009-A: override absolute card stamp; flow with card */
  top: auto;
  right: auto;
  transform: none;
  display: block;
  margin-top: 0.25rem;
  font: 700 0.66rem/1.2 var(--font);
  letter-spacing: 0.1em;
  color: #6fd6a0;
  animation: demo-rise 320ms ease both;
  animation-delay: calc(var(--i) * var(--interval, 1200ms) + 400ms);
}

/* Scene 4 — one block per worked routing example. */
.cap-example {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  animation: demo-rise 420ms ease both;
  animation-delay: calc(var(--x) * 260ms);
}

.cap-example.good {
  border-left: 3px solid #6fd6a0;
}

.cap-example.warn {
  border-left: 3px solid #eeb44f;
}

/* Scene 7 — the counter that falls to zero. */
.evo-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.6rem;
  font: 600 0.9rem/1.3 var(--font);
  color: var(--muted);
}

.evo-transition b.from {
  color: #eeb44f;
}

.evo-transition b.to {
  color: #6fd6a0;
  font-size: 1.15rem;
}

.evo-arrow {
  font-style: normal;
  color: var(--muted);
}

.out-item small {
  display: block;
  margin-top: 0.3rem;
  font: 500 0.74rem/1.35 var(--font);
  color: var(--muted);
}

/* When a scene is frozen for capture or review, skip entrance delays. */
.demo-stage.paused .anim [style*="--i"],
.demo-stage.paused .cap-example,
.demo-stage.paused .anim-checklist .val-stamp,
.demo-stage.paused .out-item,
.demo-stage.paused .out-brand strong,
.demo-stage.paused .out-brand span,
.demo-stage.paused .cost-branch,
.demo-stage.paused .cost-col,
.demo-stage.paused .dec-entry,
.demo-stage.paused .dec-check,
.demo-stage.paused .dec-question,
.demo-stage.paused .dec-branch,
.demo-stage.paused .dec-arrow,
.demo-stage.paused .demo-metric {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* INT-CITIZEN-012-A — breakpoints (executive readability) */
@media (max-width: 640px) {
  .demo-stage-inner {
    padding: 0.75rem 0.75rem 1.5rem;
    gap: 0.65rem;
  }
  .demo-stage-head {
    flex-direction: column;
  }
  .demo-msg-main {
    font-size: 1.1rem !important;
  }
  .demo-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .demo-canvas {
    min-height: 8rem;
    padding: 0.6rem;
  }
  .demo-triad {
    grid-template-columns: 1fr;
  }
  .anim-converge {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .anim-baseline .bif-counters {
    grid-template-columns: 1fr;
  }
  .cost-total b { font-size: clamp(2rem, 12vw, 3.6rem); }
  .cost-branch b { font-size: clamp(1.6rem, 10vw, 2.8rem); }
  .swap-stable-head { flex-wrap: wrap; }
  .contrast-row { flex-direction: column; align-items: stretch; }
  .rail-step { width: 1.65rem; height: 1.65rem; font-size: 0.72rem; }
}

/* INT-DEMO-001 — 320px floor + single-scroll enterprise stability */
@media (max-width: 360px) {
  .demo-metrics { grid-template-columns: 1fr; }
  .demo-controls button { flex: 1 1 auto; }
  .demo-entry { padding: 1.25rem 0.75rem 2rem; }
  .eco-nav { gap: 0.4rem; font-size: 0.55rem; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .demo-stage-inner {
    width: min(920px, 100%);
  }
}

@media (min-width: 1366px) {
  .demo-stage-inner {
    width: min(1100px, 100%);
  }
}

@media (min-width: 1920px) {
  .demo-stage-inner {
    width: min(1180px, 100%);
  }
}

/* INT-DEMO-001 — hard overflow & scroll law (single document scroller) */
.demo-stage,
.demo-stage-inner,
.demo-message-block,
.demo-pain,
.demo-metrics,
.demo-triad,
.anim {
  max-width: 100%;
  min-width: 0;
}

.demo-stage [hidden] {
  display: none !important;
}

/* Footer stays in document flow — never sticky/fixed */
.demo-stage-foot {
  position: relative;
  z-index: 1;
  margin-top: 0.35rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

body.demo-active {
  overflow-x: hidden;
}