/* ═══════════════════════════════════════════════════════════════════════
   Orbit — landing surface
   Dark-first marketing page built around one 3D stage. Loaded only by
   index.html; the app never sees it. Depends on orbit.css for tokens and
   declares no colour of its own.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── hero, factory pattern ───────────────────────────────────────────
   Left copy + right action panel on the 12-col grid (see the geometry
   pass at the end of this sheet), then the scene in a framed product
   surface below — the stage reads as a dashboard, not a backdrop. */
.hero-factory {
  padding-block: clamp(108px, 14vh, 156px) clamp(28px, 4vh, 48px);
}

/* the framed stage */
.stage-frame {
  margin-top: clamp(44px, 7vh, 72px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
}
.stage-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--border);
}
.stage-live { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-2); }
.stage-dot {
  width: 7px; height: 7px; border-radius: 999px; background: currentColor;
  animation: stage-pulse 2.4s ease-in-out infinite;
}
@keyframes stage-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .stage-dot { animation: none; } }

.stage-view { position: relative; height: clamp(360px, 46vh, 500px); background: var(--bg); }
.stage-view .beltband { position: absolute; inset: 0; }
/* agentbelt.js calls setSize with updateStyle=false — the canvas takes its
   CSS size from here or it renders at device-pixel dimensions */
.beltband > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* faint vertical vignette only; the frame does the containing now and the
   sides stay open so the belts read as running past the frame edges */
.stage-view::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg) 0%, transparent 14%, transparent 84%, var(--bg) 100%);
}

/* readout: legend flattened into a five-cell KPI strip, trace below it */
.stage-foot { border-top: 1px solid var(--border); padding: 14px 18px 12px; }
.stage-foot .flow-legend {
  position: static; min-width: 0; padding: 0; border: 0; border-radius: 0;
  background: none; backdrop-filter: none;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
.stage-foot .flow-row {
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: start; row-gap: 3px; padding: 2px 0;
}
.stage-foot .flow-row .fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-foot .flow-row .fstage { grid-column: 2; text-align: left; }
.stage-foot .flow-row .fbar { grid-column: 1 / -1; margin-top: 2px; }
.stage-foot .flow-trace {
  position: static; width: auto; max-height: 152px; margin-top: 12px;
  padding: 10px 2px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0;
  background: none; backdrop-filter: none;
  font-size: 12px; line-height: 1.9;
}

@media (max-width: 900px) {
  .hero-factory { padding-top: clamp(84px, 12vh, 110px); }
  .stage-view { height: clamp(260px, 52vw, 380px); }
  .stage-foot .flow-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-foot .flow-trace { max-height: 120px; }
}

/* ─── the old centred variant, kept for landing-light.html ───────────── */
.hero-3d { padding-block: clamp(56px, 8vw, 104px) 0; overflow: hidden; }
.hero-head { text-align: center; }
.hero-head .lead { max-width: 64ch; margin-inline: auto; }

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 8px 5px 5px; margin-bottom: 26px;
  border: 1px solid color-mix(in oklch, var(--fg) 15%, transparent); border-radius: 999px;
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  font-size: 13px; color: var(--muted);
}
.badge-copy { display: inline-flex; align-items: center; gap: 7px; padding-right: 6px; }
.badge-copy i { font-style: normal; color: color-mix(in oklch, var(--muted) 58%, transparent); }
.badge-step { color: color-mix(in oklch, var(--muted) 76%, var(--brand-1)); }
.badge-step.is-backtest { color: color-mix(in oklch, var(--muted) 70%, var(--brand-2)); }
.badge-step.is-share { color: color-mix(in oklch, var(--fg) 74%, var(--brand-3)); font-weight: 590; }
.badge .badge-tag {
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--fg) 15%, transparent);
  background: color-mix(in oklch, var(--fg-soft) 76%, var(--surface));
  color: var(--fg);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 630; line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 0 22px;
}
.h-display .grad {
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2) 52%, var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─── the 3D stage ────────────────────────────────────────────────────── */
.flowstage {
  position: relative;
  margin-top: clamp(28px, 4vw, 52px);
  height: clamp(440px, 58vw, 680px);
  isolation: isolate;
}
.flowstage canvas { display: block; width: 100%; height: 100%; }
/* one soft brand glow behind the ring — the page's only glow */
.flowstage::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(46% 42% at 50% 48%,
    color-mix(in oklch, var(--brand-2) 20%, transparent), transparent 70%);
  pointer-events: none;
}

/* live legend — one row per execution flow */
.flow-legend {
  position: absolute; top: 10px; left: 0; z-index: 2;
  display: grid; gap: 2px; min-width: 246px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--surface) 74%, transparent);
  backdrop-filter: saturate(1.3) blur(14px);
}
.flow-row {
  display: grid; grid-template-columns: 9px 1fr auto; gap: 9px;
  align-items: center; padding: 7px 6px; border-radius: var(--radius-sm);
  transition: background .3s ease;
}
.flow-row.is-hot { background: var(--fg-soft); }
.flow-row .fdot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; }
.flow-row .fname { font-size: 13px; font-weight: 500; color: var(--fg); }
.flow-row .fstage {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--muted); text-align: right; white-space: nowrap;
}
.flow-row .fbar { grid-column: 2 / -1; height: 2px; border-radius: 999px; background: var(--fg-soft); overflow: hidden; }
.flow-row .fbar span { display: block; height: 100%; background: currentColor; transition: width .4s ease; }

/* live trace — what the agent just did */
.flow-trace {
  position: absolute; right: 0; bottom: 10px; z-index: 2;
  width: min(340px, 46vw);
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--surface) 74%, transparent);
  backdrop-filter: saturate(1.3) blur(14px);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.8;
  max-height: 132px; overflow: hidden;
}
.flow-trace .tr {
  display: grid; grid-template-columns: 60px 46px minmax(0, 1fr);
  gap: 10px; color: var(--muted);
  animation: tr-in .26s cubic-bezier(.2,.9,.3,1);
}
.flow-trace .tr i { font-style: normal; color: var(--muted); opacity: .75; font-variant-numeric: tabular-nums; }
.flow-trace .tr b { font-weight: 600; letter-spacing: 0.04em; }
.flow-trace .tr span { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes tr-in { from { opacity: 0; transform: translateY(5px); } }

/* base legend/trace are absolute overlays; .stage-foot re-flows them */
@media (max-width: 900px) {
  .flow-legend, .flow-trace { position: static; width: auto; max-height: none; backdrop-filter: none; }
  .flow-legend { margin-top: 16px; min-width: 0; }
  .flow-trace { margin-top: 12px; }
}

/* ─── flow cards ──────────────────────────────────────────────────────── */
.flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 14px; }
.flow-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 20px;
  transition: border-color .18s ease;
}
.flow-card:hover { border-color: color-mix(in oklch, var(--fg) 24%, transparent); }
.flow-card .fc-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.flow-card .fc-top .fdot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; flex: none; }
.flow-card h3 { font-size: 16px; }
.flow-card p { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.stage-chain { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
/* .sc is a standalone chip — the lifecycle section uses it outside .stage-chain */
.sc {
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg); white-space: nowrap;
}
.stage-chain .sc-arr { color: var(--border); font-family: var(--font-mono); font-size: 11px; }

/* ─── marquee of connected venues ─────────────────────────────────────── */
.rail-strip {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 64px); flex-wrap: wrap;
}
.rail-strip .rs {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: clamp(16px, 2vw, 21px);
  font-weight: 560; letter-spacing: -0.018em;
}
.rail-strip .rs.is-soon { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════
   Platform pillars — Terminal / Skills / Infra
   Composition taken from the user's own reference: a wide glass card, a
   mark top-left, fact tags pinned top-right, body, one arrow button. The
   reference sits on an earth-from-orbit photograph; that asset was not
   supplied, so these sit on Orbit's own canvas with a brand-gradient wash
   instead of a stock photo standing in for it.
   ═══════════════════════════════════════════════════════════════════════ */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1080px) { .pillar-grid { grid-template-columns: 1fr; } }

.pillar {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 100% at 12% 0%, color-mix(in oklch, var(--brand-1) 13%, transparent), transparent 62%),
    var(--surface);
  overflow: hidden;
  transition: border-color .18s ease;
}
.pillar:nth-child(2) {
  background:
    radial-gradient(130% 100% at 12% 0%, color-mix(in oklch, var(--brand-2) 13%, transparent), transparent 62%),
    var(--surface);
}
.pillar:nth-child(3) {
  background:
    radial-gradient(130% 100% at 12% 0%, color-mix(in oklch, var(--brand-3) 13%, transparent), transparent 62%),
    var(--surface);
}
.pillar:hover { border-color: color-mix(in oklch, var(--fg) 26%, transparent); }

.pillar-mark {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: 30px;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface-2) 70%, transparent);
  backdrop-filter: blur(6px);
  color: var(--fg);
}
.pillar-mark svg { width: 22px; height: 22px; }

/* fact tags, pinned to the corner like the reference */
.pillar-tags { position: absolute; top: 18px; right: 18px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pillar-tags .pt {
  padding: 3px 9px; border-radius: 5px;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface-2) 76%, transparent);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--muted);
  white-space: nowrap;
}

.pillar h3 { font-size: 26px; font-weight: 620; letter-spacing: -0.025em; margin-bottom: 12px; }
.pillar p { margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 42ch; }
.pillar .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 1080px) { .pillar-tags { position: static; margin-bottom: 16px; justify-content: flex-start; } }

/* ─── workflow lifecycle: compose → backtest → share ──────────────────── */
.life-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .life-grid { grid-template-columns: 1fr; } }
.life {
  padding: 26px 26px 26px 0; border-right: 1px solid var(--border);
}
.life:last-child { border-right: 0; }
@media (max-width: 900px) {
  .life { border-right: 0; border-bottom: 1px solid var(--border); padding: 22px 0; }
  .life:last-child { border-bottom: 0; }
}
@media (min-width: 901px) { .life + .life { padding-left: 26px; } }
.life .step { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 12px; }
.life h3 { font-size: 19px; margin-bottom: 9px; }
.life p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.life .out { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }

/* backtest readout — the numbers a run produces, not a claim */
.bt-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.bt-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.bt-head .spacer { flex: 1; }
.bt-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .bt-grid { grid-template-columns: repeat(2, 1fr); } }
.bt-cell { padding: 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bt-cell:nth-child(4n) { border-right: 0; }
@media (max-width: 720px) { .bt-cell:nth-child(2n) { border-right: 0; } .bt-cell { border-right: 1px solid var(--border); } }
.bt-cell .micro { display: block; margin-bottom: 7px; }
.bt-cell .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 550; letter-spacing: -0.02em; }
.bt-foot { padding: 13px 16px; background: var(--surface-2); }

/* ─── architecture: interfaces → core → four agents → rails ──────────── */
/* Mirrors the positioning deck: solid-border tiers, dashed capability
   chips, and the Orbit Core bar tinted from the brand's cyan midpoint. */
.arch { max-width: 1080px; margin-inline: auto; }

.arch-tier,
.arch-rails { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 18px 22px; }
.arch-rails { border-style: dashed; }

.arch-tier-label { margin: 0 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.arch-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.arch-chips li { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 7px 12px; font-size: 13px; font-weight: 550; color: var(--fg); }
/* interfaces tier only: bigger icon tiles; the rails tier keeps small pills */
.arch-chips.arch-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 10px;
}
.arch-chips.arch-tiles li {
  display: flex; flex-direction: column; align-items: flex-start;
  border-radius: 10px; padding: 15px 16px 15px; font-size: 13.5px;
}
.arch-chips.arch-tiles li > span { margin-top: 12px; font-weight: 550; letter-spacing: -0.01em; }
.arch-chips.arch-tiles li > .arch-tile-note {
  margin-top: 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 400;
  line-height: 1.55; letter-spacing: 0; color: var(--muted); text-wrap: pretty;
}
.arch-tiles svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--muted); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.arch-link { width: 1px; height: 26px; margin-inline: auto; background: var(--border); }

.arch-core { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; text-align: center; border: 1px solid color-mix(in oklab, var(--brand-2) 45%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--brand-2) 10%, var(--surface)); padding: 16px 22px; }
.arch-core strong { font-size: 16px; letter-spacing: -0.01em; color: var(--fg); }
.arch-core-eq { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted); }

.arch-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.arch-agent { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.arch-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: color-mix(in oklab, var(--brand-2) 70%, var(--muted)); }
.arch-agent h3 { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--fg); }
.arch-agent > p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.arch-caps { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.arch-caps li { border: 1px dashed var(--border); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
/* venues that are live today read solid, with a small brand pip */
.arch-caps li.is-live {
  border-style: solid; color: var(--fg);
  display: inline-flex; align-items: center; gap: 6px;
}
.arch-caps li.is-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--brand-2);
}

@media (max-width: 1100px) {
  .arch-agents { grid-template-columns: repeat(2, 1fr); }
  .arch-agents > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .arch-agents { grid-template-columns: 1fr; }
  .arch-agents > :last-child { grid-column: auto; }
  .arch-tier, .arch-rails, .arch-core { padding: 14px 16px; }
  .arch-link { height: 18px; }
}

/* ─── footer, grouped columns + divider bar ──────────────────────────── */
.pagefoot { padding-block: clamp(42px, 6vw, 72px) 30px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px 32px; align-items: start; }
.foot-brand { display: grid; gap: 12px; justify-items: start; }
.foot-brand .meta { margin: 0; line-height: 1.6; max-width: 30ch; }
.foot-col { display: grid; gap: 12px; justify-items: start; }
.foot-col .micro { margin: 0 0 6px; }
.foot-col a { color: var(--muted); text-decoration: none; font-size: 13.5px; transition: color .15s; }
.foot-col a:hover { color: var(--fg); }
.foot-col a .ext { margin-left: 5px; font-size: 11px; opacity: 0.65; }
.foot-bar {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.foot-bar .fine { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.foot-social { display: flex; gap: 24px; }
.foot-social a { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-decoration: none; transition: color .15s; }
.foot-social a:hover { color: var(--fg); }

/* The OS-level reduced-motion preference freezes CSS choreography while
   canvas renderers listen for the same document state in JavaScript. */
[data-motion='paused'] *, [data-motion='paused'] *::before, [data-motion='paused'] *::after {
  animation-play-state: paused !important;
}

/* narrow: keep all three link columns on ONE row under the brand — a 2-up
   grid strands Venues on a row of its own and adds ~190px of dead height */
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .topnav-inner { gap: 10px; }
  .topnav-actions { gap: 6px; margin-inline-start: auto; }
}
@media (max-width: 560px) {
  .topnav-actions .btn-arrow { display: none; }
  .topnav .btn-icon { width: 44px; height: 44px; min-height: 44px; }
  .btn { min-height: 44px; }
  .chip-row button { min-height: 44px; }
  .showcase { padding: 24px 16px; border-radius: 12px; }
  .sd-body { grid-template-columns: 1fr; }
  .sd-side { display: none; }
  .show-phone { width: 100%; max-width: 320px; }
}
@media (max-width: 430px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .stage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── landing posture: near-black industrial ─────────────────────────
   Constants measured off the factory reference (#0a0a0a canvas, white-
   alpha hairlines, grey text ramp, mono ALLCAPS metric labels, one
   saturated accent + arrowed primary CTAs) and rebuilt with Orbit's own
   colours — the accent is the brand gradient's blue end, never their
   orange. Scoped to this stylesheet so app pages keep product tokens. */
[data-theme='dark'] body {
  --bg:        oklch(12.5% 0.004 250);
  --surface:   oklch(16% 0.005 250);
  --surface-2: oklch(19% 0.006 250);
  --border:    oklch(27% 0.005 250);
  --muted:     oklch(63% 0.008 250);
  --accent:    var(--brand-1);
  --on-accent: oklch(97% 0.005 250);
}

/* the page's one texture: a brand-tinted glow bleeding from the top edge */
[data-theme='dark'] body::before {
  content: ''; position: fixed; inset: 0 0 auto 0; height: 52vh; z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%,
    color-mix(in oklch, var(--brand-1) 7%, transparent), transparent 72%);
}

/* KPI legend names read as instrument labels, factory-style */
.stage-foot .flow-row .fname {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ─── hero platform note (the reference's install-hint slot) ─────────── */
.hero-note { margin: 14px 0 0; }

/* ─── stage metric strip: hairline mosaic of instrument panels ───────── */
.stage-metrics {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--border); border-bottom: 1px solid var(--border);
}
.stage-metrics .sm { background: var(--surface); padding: 10px 14px; display: grid; gap: 2px; }
.sm .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.sm .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); }
.sm .s { font-size: 11px; color: var(--muted); }

/* ─── scroll reveal (driven by js/reveal.js) ─────────────────────────────
   .rv is only ever added by JS, so the page renders fully visible without
   it; reduced-motion never gets the class at all. */
.rv {
  opacity: 0; transform: translateY(16px);
  transition:
    opacity .6s cubic-bezier(.22, .7, .3, 1),
    transform .6s cubic-bezier(.22, .7, .3, 1);
  transition-delay: var(--rv-d, 0ms);
}
.rv-in { opacity: 1; transform: none; }

/* ─── layout geometry pass, measured from the reference ──────────────────
   The reference runs a 12-column grid to 1920px with zero centred text:
   hero copy sits on cols 1–7 with an action panel on 9–12, the display
   face is large but normal-weight, and section h2s are deliberately small.
   Landing-only — app pages keep the product container. */
.container { max-width: 1920px; padding-inline: clamp(24px, 3.4vw, 64px); }

/* hero: left copy + right action panel on the grid */
.hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.4vw, 28px); align-items: center;
}
.hero-copy { grid-column: 1 / span 7; }
.hero-copy .h-display {
  font-size: clamp(40px, 4.8vw, 72px); font-weight: 480;
  letter-spacing: -0.045em; line-height: 1.0; margin: 0 0 20px;
}
.hero-copy .lead { max-width: 46ch; margin: 0; }

/* section headings run small against the big display face */
.section h2 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em; }

/* nothing centres: venue strip, diagram and closing CTA all left-anchor */
.arch { margin-inline: 0; }
.cta-strip { text-align: left; }
.cta-strip h2 { margin-inline: 0; max-width: 24ch; }

@media (max-width: 1000px) {
  .hero-copy { grid-column: 1 / -1; }
  }
@media (max-width: 700px) {
  }

/* ═══ screenshot-composition pass ════════════════════════════════════════
   Rebuilt to the reference's rendered composition: hero copy left with an
   app window bleeding off the right edge, a three-card defining grid,
   a centred surfaces section with a light showcase panel, a dramatic
   wallet scene, and the backtest as an analytics panel. */

body { overflow-x: clip; }

/* hero: copy cols 1–5, window cols 6–13 bleeding past the gutter */
.hero-copy { grid-column: 1 / 6; }
.hero-sub {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.75;
  color: var(--muted); max-width: 46ch; margin: 0;
}
.hero-copy .hero-sub { max-width: 58ch; }
.hero-copy .hero-cta { margin-top: 30px; flex-wrap: wrap; }
.hero-copy .hero-note { margin: 16px 0 0; }
.hero-window {
  grid-column: 6 / -1; align-self: center; min-width: 0;
  margin-right: calc(clamp(24px, 3.4vw, 64px) * -1);
}
.hero-window .stage-frame {
  margin-top: 0; border-right: 0;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.win-dots { display: inline-flex; gap: 6px; margin-right: 4px; }
.win-dots i { width: 10px; height: 10px; border-radius: 999px; background: var(--fg-soft); border: 1px solid var(--border); }

@media (max-width: 1500px) { .stage-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .hero-copy { grid-column: 1 / -1; }
  .hero-window { grid-column: 1 / -1; margin-right: 0; margin-top: 34px; }
  .hero-window .stage-frame { border-right: 1px solid var(--border); border-radius: var(--radius-lg); }
}

/* ─── defining grid: number + title + visual inside each card ────────── */
.def-title { margin: 0 0 30px; }
.def-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* each card carries a whisper of the brand ramp — blue, cyan, green — so the
   row reads as one gradient walked left to right, matching the numerals */
.def-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 92% at 14% 0%, color-mix(in oklch, var(--brand-1) 10%, transparent), transparent 58%),
    color-mix(in oklab, var(--fg) 2%, var(--surface));
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.def-card:nth-child(2) {
  background:
    radial-gradient(120% 92% at 14% 0%, color-mix(in oklch, var(--brand-2) 9%, transparent), transparent 58%),
    color-mix(in oklab, var(--fg) 2%, var(--surface));
}
.def-card:nth-child(3) {
  background:
    radial-gradient(120% 92% at 14% 0%, color-mix(in oklch, var(--brand-3) 9%, transparent), transparent 58%),
    color-mix(in oklab, var(--fg) 2%, var(--surface));
}
.def-n {
  margin: 0 0 2px; font-family: var(--font-mono); font-size: 30px; font-weight: 600;
  line-height: 1; letter-spacing: 0.02em; color: var(--accent);
}
.def-card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.def-visual { position: relative; height: 250px; }
.def-visual canvas { display: block; width: 100%; height: 100%; }
.ring-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; line-height: 1.5; pointer-events: none;
}
.def-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dl { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.dl-line { width: 16px; height: 0; border-top: 2px solid var(--muted); opacity: .6; }
.dl.is-pick { color: var(--fg); }
.dl.is-pick .dl-line { border-top: 2px dashed var(--accent); opacity: 1; }
.def-list { flex: 1; display: grid; gap: 9px; align-content: center; padding: 4px 0; }
.skill-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--fg) 3%, transparent);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.sk-main { display: grid; gap: 3px; min-width: 0; }
.sk-main b { font-size: 14px; font-weight: 550; letter-spacing: -0.005em; color: var(--fg); }
.skill-row .ok { transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.25s ease; }
.skill-row.is-verify {
  border-color: color-mix(in oklch, var(--yes) 40%, var(--border));
  background: color-mix(in oklch, var(--yes) 5%, transparent);
}
.skill-row.is-verify .ok {
  transform: scale(1.3);
  border-color: color-mix(in oklch, var(--yes) 80%, transparent);
}
.skill-row .sk-desc {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skill-row .ok {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--yes) 45%, transparent);
  font-family: var(--font-mono); font-size: 10px; line-height: 1; color: var(--yes);
}
.def-foot { margin: auto 0 0; padding-top: 10px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--muted); }

@media (max-width: 980px) { .def-grid { grid-template-columns: 1fr; } }

/* ─── surfaces: centred head, icon row, light showcase island ─────────── */
.surf-head { max-width: 780px; margin: 0 auto 36px; text-align: center; }
.surf-head h2 {
  font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.035em;
  line-height: 1.12; text-wrap: balance;
}
/* section lead, not a terminal line: body face at reading size, balanced measure */
.surf-head .hero-sub {
  margin: 18px auto 0; font-family: inherit;
  font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.65;
  max-width: 52ch; text-wrap: balance;
}
.icon-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin-bottom: 44px; }
.icon-row .ic {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 550; color: var(--fg);
  padding: 8px 13px; margin: -8px -13px; border-radius: 999px;
  transition: background-color 0.18s ease;
}
.icon-row .ic:hover { background: var(--fg-soft); }
.icon-row .ic [data-ico] {
  color: var(--muted);
  transition: color 0.18s ease, transform 0.18s ease;
}
.icon-row .ic:hover [data-ico] { color: var(--accent); transform: translateY(-1.5px); }
@media (prefers-reduced-motion: reduce) {
  .icon-row .ic [data-ico] { transition: none; }
  .icon-row .ic { transition: none; }
  .icon-row .ic:hover [data-ico] { transform: none; }
}

/* the light island — mockups inside pin dark app values on purpose */
.showcase {
  border-radius: 18px; padding: clamp(30px, 5vw, 72px);
  background:
    linear-gradient(oklch(50% 0.005 250 / 0.10) 1px, transparent 1px),
    linear-gradient(90deg, oklch(50% 0.005 250 / 0.10) 1px, transparent 1px),
    oklch(86% 0.004 250);
  background-size: 44px 44px, 44px 44px, auto;
  display: flex; justify-content: center; align-items: center; gap: clamp(22px, 4vw, 52px);
  flex-wrap: wrap;
}
.showcase { --mk-bg: oklch(16% 0.005 250); --mk-s: oklch(20% 0.006 250); --mk-b: oklch(30% 0.006 250); --mk-fg: oklch(95% 0.004 250); --mk-mut: oklch(66% 0.008 250); }
.show-desktop {
  width: min(600px, 100%); border-radius: 12px; overflow: hidden;
  background: var(--mk-bg); border: 1px solid var(--mk-b);
  box-shadow: 0 24px 60px oklch(20% 0.01 250 / 0.35);
  color: var(--mk-fg);
}
.sd-bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--mk-b); }
.sd-bar .win-dots i { background: var(--mk-s); border-color: var(--mk-b); }
.sd-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mk-mut); }
.sd-body { display: grid; grid-template-columns: 158px minmax(0, 1fr); min-height: 240px; }
.sd-side { border-right: 1px solid var(--mk-b); padding: 12px 10px; display: grid; align-content: start; gap: 3px; font-size: 11px; color: var(--mk-mut); }
.sd-new { color: var(--mk-fg); margin-bottom: 8px; }
.sd-item { padding: 6px 8px; border-radius: 6px; }
.sd-item.is-on { background: var(--mk-s); color: var(--mk-fg); }
.sd-main { padding: 16px; display: grid; align-content: start; gap: 12px; }
.sd-user { margin: 0; font-size: 12.5px; line-height: 1.6; min-height: 40px; }
.sd-user span::after { content: '▍'; color: var(--mk-mut); }
.sd-reply {
  display: grid; gap: 4px; padding: 11px 13px; border: 1px solid var(--mk-b);
  border-radius: 8px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6;
  color: var(--mk-mut); opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.sd-reply.is-on { opacity: 1; transform: none; }
.sd-reply .sd-cta { color: var(--accent); }
.sd-compose { margin-top: auto; padding: 9px 12px; border: 1px solid var(--mk-b); border-radius: 8px; font-size: 11px; color: var(--mk-mut); }
.show-phone {
  width: 320px; border-radius: 36px; border: 1px solid var(--mk-b);
  background: var(--mk-bg); color: var(--mk-fg); padding: 16px 20px 24px;
  box-shadow: 0 24px 60px oklch(20% 0.01 250 / 0.35);
  display: grid; gap: 14px;
}
.sp-status { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--mk-mut); }
.sp-notch { width: 76px; height: 18px; border-radius: 999px; background: var(--mk-s); }
.sp-brand { font-weight: 650; font-size: 16.5px; letter-spacing: 0.01em; }
.sp-list { display: grid; gap: 7px; }
.sp-row { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--mk-b); border-radius: 12px; font-size: 13.5px; }
.sp-row .fdot { width: 7px; height: 7px; }
.sp-row span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--mk-mut); text-transform: uppercase; letter-spacing: 0.05em; }
.sp-note { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--mk-b); border-radius: 12px; background: var(--mk-s); font-size: 12.5px; line-height: 1.55; }

/* ─── agent wallet: copy left, dramatic scene right ───────────────────── */
.wallet-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.wallet-copy .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eb-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
.wallet-copy h2 { margin: 0 0 14px; }
.wallet-field { position: relative; height: clamp(360px, 48vh, 520px); }
.wallet-field svg { display: block; width: 100%; height: 100%; }
/* delegation-loop scene — pure vector, token-driven so both themes hold */
.ws-card { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.ws-card-accent { stroke: color-mix(in oklab, var(--accent) 60%, var(--border)); }
.ws-link { fill: none; stroke: color-mix(in oklab, var(--muted) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.ws-title { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.14em; fill: var(--muted); }
.ws-title-accent { fill: var(--accent); }
.ws-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; fill: var(--muted); }
.ws-body { font-family: var(--font-mono); font-size: 17px; fill: var(--fg); }
.ws-big { font-family: var(--font-mono); font-size: 34px; font-weight: 600; letter-spacing: -0.01em; fill: var(--fg); }
.ws-sub { font-family: var(--font-mono); font-size: 16px; fill: var(--muted); }
.ws-key { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; }
.ws-keyring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }
.ws-track { fill: color-mix(in oklab, var(--fg) 12%, transparent); }
.ws-fill { fill: var(--accent); }
.ws-hairline { stroke: var(--border); stroke-width: 1; }
.ws-tick { font-family: var(--font-mono); font-size: 15px; fill: var(--yes); }
.ws-tick-dim { fill: color-mix(in oklab, var(--muted) 70%, transparent); }
.ws-logstatic { display: none; }
.ws-row { font-family: var(--font-mono); font-size: 15px; fill: var(--muted); }
.ws-row-hot { fill: var(--fg); }
.ws-rowglow { fill: var(--yes); }
.ws-dot circle { fill: var(--accent); }
.ws-dot .ws-dot-halo { opacity: 0.18; }
.ws-dot-yes circle { fill: var(--yes); }
@media (prefers-reduced-motion: reduce) { .ws-anim { display: none; } .ws-logstatic { display: inline; } }
@media (max-width: 980px) { .wallet-grid { grid-template-columns: 1fr; } .wallet-field { height: clamp(280px, 60vw, 420px); } }

/* ─── backtest as an analytics panel ──────────────────────────────────── */
.credits-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 22px 22px 18px; }
.cp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cp-head h3 { margin: 0 0 4px; font-size: 17px; }
.cp-sub { margin: 0; font-size: 13px; color: var(--muted); }
.cp-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-row { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.chip-row button {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 7px 12px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.chip-row button + button { border-left: 1px solid var(--border); }
.chip-row button[aria-pressed="true"] { background: var(--fg-soft); color: var(--fg); }
.chip-row button:hover { background: var(--fg-soft); color: var(--fg); }
.cp-chart { height: 260px; }
.cp-chart canvas { display: block; width: 100%; height: 100%; }
.cp-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 2px 16px; }
.cp-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cp-legend .lg i { width: 9px; height: 9px; border-radius: 3px; }
.credits-panel .bt-grid { border-top: 1px solid var(--border); }
.cp-foot { margin: 14px 2px 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.65; color: var(--muted); max-width: 88ch; }

/* ring card gets a touch more height; wallet scene is a plain grid cell */
.def-visual.is-ring { height: 264px; }
.wallet-scene { min-width: 0; }

/* ─── use-case tabs: rail of workflows left, live detail right ───────── */
[hidden] { display: none !important; }

.uc-chip {
  display: inline-flex; align-items: center; gap: 9px; margin: 20px 0 28px;
  padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--muted);
}
.uc {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
}
.uc-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.uc-tab {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; gap: 12px; padding: 15px 16px;
  border-bottom: 1px solid var(--border); border-left: 2px solid transparent;
  color: var(--muted);
}
.uc-tab[aria-selected="true"] { background: var(--fg-soft); border-left-color: var(--accent); color: var(--fg); }
.uc-tab:hover { background: color-mix(in oklab, var(--fg) 5%, transparent); color: var(--fg); }
.uc-tab[aria-selected="true"] .uc-ico { color: var(--accent); }
.uc-ico { color: var(--muted); margin-top: 2px; flex: none; }
.uc-name {
  display: grid; gap: 4px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
.uc-name span {
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 400;
}
.uc-panel { padding: clamp(22px, 3vw, 42px); display: grid; }
/* detail splits copy left / terminal log right so the panel's full width works */
.uc-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.uc-detail > .uc-kicker { grid-area: 1 / 1; }
.uc-detail > h3 { grid-area: 2 / 1; }
.uc-detail > .uc-copy { grid-area: 3 / 1; }
.uc-detail > .uc-more { grid-area: 4 / 1; }
.uc-detail > .uc-log { grid-area: 1 / 2 / 5 / 3; align-self: stretch; min-height: 0; }
.uc-kicker { margin: 0 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.uc-detail h3 { margin: 0 0 14px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; }
.uc-copy { margin: 0 0 22px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; color: var(--muted); max-width: 62ch; }
.uc-log {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--muted);
}
.uc-log-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--fg-soft);
}
.uc-log-title { font-size: 11px; letter-spacing: 0.05em; color: var(--muted); }
.uc-log-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: 0.09em; color: var(--muted);
}
.uc-log-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--yes); }
.uc-log-live.is-armed i { background: var(--warn); }
.uc-log-body {
  flex: 1; display: grid; gap: 11px; align-content: start;
  padding: 20px 22px;
}
.uc-log-body b { font-weight: 400; color: color-mix(in oklab, var(--muted) 55%, transparent); margin-right: 12px; }
.uc-log-body .hot { color: var(--fg); }
.uc-prompt { color: color-mix(in oklab, var(--muted) 70%, transparent); margin-top: 4px; }
.uc-prompt i {
  display: inline-block; width: 7px; height: 13px; margin-left: 8px; vertical-align: -2px;
  background: color-mix(in oklab, var(--fg) 65%, transparent);
  animation: uc-blink 1.15s steps(2, start) infinite;
}
@keyframes uc-blink { to { visibility: hidden; } }
.uc-log-foot {
  flex: none; padding: 9px 14px; border-top: 1px solid var(--border);
  font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted);
}
@media (prefers-reduced-motion: reduce) { .uc-prompt i { animation: none; } }
.uc-more {
  display: inline-block; margin-top: 20px; text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.uc-more:hover { text-decoration: underline; }

@media (max-width: 940px) {
  .uc { grid-template-columns: 1fr; }
  .uc-detail { display: block; }
  .uc-log { margin: 4px 0 22px; }
  .uc-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .uc-tab { flex: none; min-width: 190px; border-left: 0; border-bottom: 2px solid transparent; }
  .uc-tab[aria-selected="true"] { border-bottom-color: var(--accent); }
}

/* ─── guarantees grid: icon + mono title + mono copy ─────────────────── */
.ent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.ent-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 20px; }
.ent-title {
  display: flex; align-items: center; gap: 11px; margin: 0 0 11px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg);
}
.ent-title [data-ico] { color: var(--muted); }
.ent-copy { margin: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75; color: var(--muted); }
@media (max-width: 980px) { .ent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ent-grid { grid-template-columns: 1fr; } }

/* ─── venue strip: official logo slots with letter-tile fallback ─────────
   Drop brand-kit files into assets/venues/ and the chips switch from the
   letter tile + name to the real wordmark; a missing file changes nothing. */
/* official icon replaces only the letter tile — the venue name always shows */
.venue-logo { display: none; height: 22px; width: 22px; object-fit: cover; border-radius: 5px; }
.rs.has-logo .venue-logo { display: block; }
.rs.has-logo .venue-fallback .venue-mark { display: none; }
.venue-fallback { display: inline-flex; align-items: center; gap: 9px; }
.venue-fallback .venue-mark { width: 20px; height: 20px; }

/* ─── architecture: schematic presence pass ──────────────────────────────
   The diagram earns real graphic weight: a section-scoped dot grid and
   core glow, the brand ring as emblem + watermark, travelling pulses on
   the connectors, ghost numerals and one monoline glyph per layer. */
#architecture { position: relative; overflow: hidden; }
#architecture .container { position: relative; }
#architecture .container::before {
  content: ''; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 34% at 50% 36%,
      color-mix(in oklch, var(--brand-1) 9%, transparent), transparent 72%),
    radial-gradient(color-mix(in oklch, var(--fg) 7%, transparent) 1px, transparent 1px);
  background-size: auto, 26px 26px;
}
#architecture .container::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -20px; right: -110px; width: 540px; height: 540px; opacity: 0.05;
  background: url('../Orbit-logo-png.png') center / contain no-repeat;
}

.arch { max-width: none; }

/* the core reads as the reactor: brand mark, gradient seam, more height */
.arch-core { position: relative; padding: 20px 26px; gap: 10px 16px; }
.arch-core::before {
  content: ''; position: absolute; inset: 0 14px auto 14px; height: 2px; opacity: 0.85;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent, var(--brand-1) 22%, var(--brand-2) 52%, var(--brand-3) 80%, transparent);
}
.core-mark { height: 30px; width: auto; }
.arch-core strong { font-size: 18px; }

/* a glowing charge orbits the core's border — one continuous lap of the frame */
.core-spark { display: none; }
@supports (offset-distance: 0%) {
  .core-spark {
    display: block; position: absolute; top: 0; left: 0; pointer-events: none;
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--brand-2);
    box-shadow:
      0 0 6px 1px color-mix(in oklab, var(--brand-2) 85%, transparent),
      0 0 18px 6px color-mix(in oklab, var(--brand-2) 35%, transparent);
    offset-path: inset(0 round var(--radius-lg));
    animation: core-orbit 10s linear infinite;
  }
  @supports (offset-path: border-box) {
    .core-spark { offset-path: border-box; }
  }
}
@keyframes core-orbit {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) { .core-spark { display: none !important; } }

/* connectors: gradient stroke with a slow travelling pulse */
.arch-link {
  position: relative; width: 2px; height: 42px;
  background: linear-gradient(180deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
}
.arch-link::after {
  content: ''; position: absolute; left: 50%; top: -4px; width: 5px; height: 5px;
  transform: translateX(-50%); border-radius: 999px; background: var(--brand-2);
  animation: arch-pulse 3.6s linear infinite;
}
@keyframes arch-pulse {
  0%   { top: -4px; opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { top: calc(100% - 1px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .arch-link::after { display: none; } }

/* layer cards: taller, ghost numeral low-right, glyph high-right */
.arch-agent { position: relative; overflow: hidden; padding: 26px 24px 22px; }
.arch-agent::before {
  content: attr(data-num); position: absolute; bottom: -18px; right: 8px;
  font-family: var(--font-mono); font-size: 98px; line-height: 1; font-weight: 600;
  color: color-mix(in oklch, var(--fg) 6%, transparent); pointer-events: none;
}
.layer-glyph { position: absolute; top: 22px; right: 20px; color: var(--brand-2); opacity: 0.9; }
.arch-agent h3 { font-size: 19px; }
.arch-agent > p { position: relative; }
.arch-caps { position: relative; }


/* ─── how an order is executed: vertical gate rail ──────────────────── */
.exec-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 4vw, 72px); align-items: start;
}
.exec-copy { position: sticky; top: 96px; }
.exec-copy .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.exec-copy h2 { margin: 0 0 14px; }
.exec-panel {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 8px 26px;
}
@media (max-width: 980px) {
  .exec-split { grid-template-columns: 1fr; }
  .exec-copy { position: static; }
}
/* the pipeline visual — stage pill → node card → dotted link, walked top to bottom */
.wf-panel {
  --wf-loop: 7.2s;
  --bg:      oklch(11.5% 0.009 275);
  --surface: oklch(16.5% 0.013 275);
  --fg:      oklch(96% 0.004 275);
  --muted:   oklch(70% 0.014 275);
  --border:  oklch(29% 0.014 275);
  --brand-2: oklch(74% 0.12 204);
  --stage-scan:  oklch(70% 0.17 258);
  --stage-watch: oklch(72% 0.18 300);
  --stage-size:  oklch(72% 0.11 195);
  --stage-exec:  oklch(76% 0.15 158);
  --stage-risk:  oklch(72% 0.19 25);
  max-width: 640px; width: 100%; margin-inline: auto;
  padding: clamp(16px, 2.2vw, 24px);
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in oklab, var(--fg) 10%, transparent) 1px, transparent 1.5px);
  background-size: 20px 20px;
}
/* This product moment stays black in both page themes. Stage color carries
   meaning here: blue scan, red risk, violet confirm, green execution. */
.wf-pipe { display: flex; flex-direction: column; align-items: stretch; }
/* node grammar per the reference: tinted header band carries the stage color
   (icon + title + type pill), the body stays clean surface; the card border
   picks up the same tint so each block reads as one colored object */
.wf-node {
  --sc: var(--accent);
  border: 1px solid color-mix(in oklab, var(--sc) 48%, var(--border));
  border-radius: 12px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 10px 26px -16px color-mix(in oklab, var(--sc) 30%, transparent);
}
.wf-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--sc);
  border-bottom: 1px solid var(--sc);
}
.wf-ico {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border: 1px solid color-mix(in oklab, var(--bg) 58%, transparent); border-radius: 8px;
  color: var(--bg); background: color-mix(in oklab, var(--fg) 16%, transparent);
}
.wf-head h3 {
  margin: 0; font-size: 15px; letter-spacing: -0.01em;
  color: var(--bg);
}
.wf-tag {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  color: var(--sc);
  border: 1px solid color-mix(in oklab, var(--sc) 52%, var(--border));
  border-radius: 999px; padding: 4px 9px;
  background: var(--bg);
}
.wf-body { padding: 6px 14px 7px; }
.wf-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 5.5px 0;
}
.wf-row + .wf-row { border-top: 1px dashed color-mix(in oklab, var(--border) 70%, transparent); }
.wf-row > span:first-child { font-size: 13px; color: var(--muted); }
.wf-vals { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.wf-chip {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; line-height: 1;
  color: color-mix(in oklab, var(--sc) 24%, var(--fg));
  border: 1px solid color-mix(in oklab, var(--sc) 24%, var(--border)); border-radius: 6px;
  background: color-mix(in oklab, var(--sc) 5%, var(--surface)); padding: 5px 8px; white-space: nowrap;
}
.wf-link {
  position: relative; align-self: center; width: 1px; height: 26px; margin: 5px 0;
  background-image: linear-gradient(180deg, var(--border) 55%, transparent 0);
  background-size: 1px 6px;
  animation: wf-flow var(--wf-loop) linear infinite;
  animation-delay: var(--wd, 0s);
}
.wf-link::before {
  content: ''; position: absolute; left: 50%; top: -3px; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  animation: wf-junction var(--wf-loop) ease-out infinite;
  animation-delay: var(--wd, 0s);
}
/* one order walking the links — same register as the architecture pulse */
.wf-link::after {
  content: ''; position: absolute; left: -2px; top: 2px; width: 5px; height: 5px;
  border-radius: 999px; background: var(--brand-2); opacity: 0;
  animation: wf-drop var(--wf-loop) linear infinite; animation-delay: var(--wd, 0s);
}
@keyframes wf-drop {
  0%   { transform: translateY(0); opacity: 0; }
  2%   { opacity: 1; }
  9%   { transform: translateY(20px); opacity: 1; }
  11%  { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(20px); opacity: 0; }
}
/* the wire carries current only while the order is on it */
@keyframes wf-flow {
  0%   { background-position: 0 0; }
  11%  { background-position: 0 24px; }
  100% { background-position: 0 24px; }
}
/* the junction pips at each hand-off */
@keyframes wf-junction {
  0%, 9%, 100% {
    transform: translateX(-50%) scale(1);
    border-color: var(--border); background: var(--bg);
  }
  2.5% {
    transform: translateX(-50%) scale(1.45);
    border-color: var(--brand-2);
    background: color-mix(in oklab, var(--brand-2) 60%, var(--bg));
  }
}

/* choreography: one order walks the pipeline every loop. The stage it is in
   lights up (card, header band, icon, live pip), its parameter rows print in
   sequence, then the link below carries it down. Each node's phase is its own
   --nd delay; rows offset further with --rd. Peak window = 4%–17% of the loop. */
.wf-node {
  animation: wf-node-live var(--wf-loop) ease-in-out infinite;
  animation-delay: var(--nd, 0s);
}
@keyframes wf-node-live {
  0%, 22%, 100% {
    border-color: color-mix(in oklab, var(--sc) 48%, var(--border));
    box-shadow: 0 10px 26px -16px color-mix(in oklab, var(--sc) 30%, transparent);
  }
  4%, 17% {
    border-color: color-mix(in oklab, var(--sc) 80%, var(--border));
    box-shadow: 0 14px 32px -14px color-mix(in oklab, var(--sc) 50%, transparent);
  }
}
.wf-head {
  animation: wf-head-live var(--wf-loop) ease-in-out infinite;
  animation-delay: var(--nd, 0s);
}
@keyframes wf-head-live {
  0%, 22%, 100% { background: var(--sc); }
  4%, 17%       { background: color-mix(in oklab, var(--sc) 88%, var(--fg)); }
}
.wf-ico {
  animation: wf-ico-live var(--wf-loop) ease-out infinite;
  animation-delay: var(--nd, 0s);
}
@keyframes wf-ico-live {
  0%, 22%, 100% {
    transform: scale(1);
    border-color: color-mix(in oklab, var(--bg) 58%, transparent);
  }
  5%  { transform: scale(1.14); }
  8%, 17% {
    transform: scale(1);
    border-color: color-mix(in oklab, var(--bg) 82%, transparent);
  }
}
/* live pip inside the stage pill — the stage is running right now */
.wf-tag::before {
  content: ''; flex: none; width: 5px; height: 5px; border-radius: 999px;
  background: color-mix(in oklab, var(--sc) 30%, transparent);
  animation: wf-pip-live var(--wf-loop) ease-out infinite;
  animation-delay: var(--nd, 0s);
}
@keyframes wf-pip-live {
  0%, 22%, 100% {
    background: color-mix(in oklab, var(--sc) 30%, transparent);
    box-shadow: 0 0 0 0 transparent;
  }
  4%, 17% {
    background: var(--sc);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc) 20%, transparent);
  }
}
/* parameter rows print top to bottom inside the live stage */
.wf-body .wf-row:nth-child(1) { --rd: 0.30s; }
.wf-body .wf-row:nth-child(2) { --rd: 0.52s; }
.wf-body .wf-row:nth-child(3) { --rd: 0.74s; }
.wf-row > span:first-child {
  animation: wf-label-live var(--wf-loop) ease-out infinite;
  animation-delay: calc(var(--nd, 0s) + var(--rd, 0s));
}
@keyframes wf-label-live {
  0%, 9%, 100% { color: var(--muted); }
  1.5%, 4%     { color: color-mix(in oklab, var(--fg) 88%, var(--muted)); }
}
.wf-chip {
  animation: wf-chip-live var(--wf-loop) ease-out infinite;
  animation-delay: calc(var(--nd, 0s) + var(--rd, 0s));
}
@keyframes wf-chip-live {
  0%, 9%, 100% {
    border-color: var(--border); background: var(--surface); color: var(--fg);
  }
  1.5%, 4% {
    border-color: color-mix(in oklab, var(--sc) 65%, var(--border));
    background: color-mix(in oklab, var(--sc) 13%, var(--surface));
    color: color-mix(in oklab, var(--sc) 55%, var(--fg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-link::after { display: none; }
  .wf-link, .wf-link::before,
  .wf-node, .wf-head, .wf-ico, .wf-tag::before,
  .wf-row > span:first-child, .wf-chip { animation: none; }
}
@media (max-width: 560px) {
  .wf-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wf-vals { justify-content: flex-start; }
}