/* ─────────────────────────────────────────────────────────────────────
   Qbyx AI Multiverse. Grammar: run.

   The brand is preserved exactly: the six colours, the two accents, both
   faces and the gradient are the tokens from the head of
   app/components/multiverse-page.tsx. Two accents and a three-stop
   gradient are a brand fact here and they outrank the skill's
   one-accent floor. See COPY.md §13.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* engine tokens, themed to the brand */
  --sc-canvas:      #05050f;
  --sc-surface:     #0c0c18;
  --sc-ink:         #f4f4f5;
  --sc-ink-soft:    #a1a1aa;
  --sc-accent:      #8b5cf6;
  --sc-accent-ink:  #05050f;
  --sc-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sc-font-text:    'Space Grotesk', system-ui, sans-serif;
  --sc-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* the brand's own names, kept so the mapping is legible */
  --bg-page:        #05050f;
  --bg-surface:     #0c0c18;
  --bg-elevated:    #12121f;
  --text-primary:   #f4f4f5;
  --text-secondary: #d4d4d8;
  --text-muted:     #a1a1aa;
  --text-faint:     #71717a;
  --text-dim:       #52525b;
  --violet:         #8b5cf6;
  --violet-lt:      #a78bfa;
  --orange:         #f97316;
  --orange-lt:      #fb923c;
  --magenta:        #ec4899;
  --telegram:       #229ed9;
  --border-subtle:  rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);
  --grad: linear-gradient(90deg, #a78bfa 0%, #f472b6 45%, #fb923c 100%);

  --run-h: 60px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html { scrollbar-color: rgba(139,92,246,0.45) #05050f; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--sc-font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(139,92,246,0.35); color: #fff; }

.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;
}

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--violet); color: #fff; padding: 10px 16px; border-radius: 8px;
  font: 600 0.85rem/1 var(--sc-font-mono); text-decoration: none;
  transition: transform 160ms var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

:where(a, button, video, [tabindex]):focus-visible {
  outline: 2px solid var(--violet-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── the decision thread ──────────────────────────────────────────── */
/* Both live under the content and above the ground. The singularity
   expands out of the hero and hands the screen to the lattice, so the
   two cannot be confined to different boxes. */
.hero-gl, .thread {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.thread { opacity: 0.62; }

/* ── the run bar ──────────────────────────────────────────────────── */
.run {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--run-h);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: 0 clamp(16px, 3vw, 40px);
  /* opaque: at 0.94 the copy sliding under the bar was still
     faintly painted through it, and a readability sweep correctly
     measured those runs against the bar rather than the ground */
  background: #080812;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--sc-font-mono);
}

.run__mark { display: block; flex: none; line-height: 0; }
.run__mark img { width: clamp(84px, 9vw, 122px); height: auto; display: block; }

.run__label {
  display: block;
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 2px;
}

.run__decision { flex: 1 1 auto; min-width: 0; margin: 0; }
.run__sentence {
  display: block;
  font-size: 0.74rem; line-height: 1.25; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 220ms var(--ease);
}
.run__sentence.is-new { color: var(--violet-lt); }

.run__state, .run__branches { flex: none; margin: 0; }
.run__state { display: flex; align-items: center; gap: 7px; }
.run__word {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  transition: color 220ms var(--ease);
}
.run.is-live .run__word { color: var(--orange-lt); }
.run.is-done .run__word { color: var(--violet-lt); }

.run__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--text-faint);
  transition: background 220ms var(--ease), box-shadow 220ms var(--ease);
}
.run.is-live .run__dot,
.run__dot--live { background: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.18); }
.run.is-done .run__dot,
.run__dot--done { background: var(--violet); box-shadow: 0 0 0 3px rgba(139,92,246,0.18); }
@media (prefers-reduced-motion: no-preference) {
  .run.is-live .run__dot, .run__dot--live { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(249,115,22,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(249,115,22,0.05); }
}

.run__count {
  display: block;
  font-size: 0.9rem; font-weight: 700; line-height: 1;
  color: var(--violet-lt);
  font-variant-numeric: tabular-nums;
}

.run__out {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 500; color: var(--text-primary);
  text-decoration: none;
  transition: opacity 150ms var(--ease);
}
.run__out:hover { opacity: 0.75; }

@media (max-width: 1080px) { .run__decision { display: none; } }
@media (max-width: 720px) {
  .run { gap: 10px; }
  .run__out span, .run__out { font-size: 0; gap: 0; }
  .run__out svg { width: 15px; height: 15px; }
  .run__label { font-size: 0.5rem; }
}

/* ── shared act frame ─────────────────────────────────────────────── */
.act { position: relative; z-index: 2; }
.sc-wrap { width: min(100% - 2 * clamp(20px, 5vw, 48px), 1400px); margin-inline: auto; }

.eyebrow {
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 16px;
}
.eyebrow--violet { color: var(--violet-lt); }
.eyebrow--orange { color: var(--orange); }

/* The ink is a real colour, not `transparent`. background-clip paints
   the gradient over it, so nothing changes on screen, but a contrast
   harness reading `color` now measures what is actually painted (the
   three stops run 8.0, 7.1 and 8.9 against this canvas) instead of
   reporting 1.03:1 on a value nobody can see. It is also the fallback
   if background-clip: text ever fails. */
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: #f472b6;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .grad--flow { background-size: 220% 100%; animation: gradflow 6s ease-in-out infinite; }
}
@keyframes gradflow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.sc-display { font-family: var(--sc-font-display); font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
.sc-display--xl { font-size: clamp(2rem, 3.65vw, 3.35rem); line-height: 1.18; letter-spacing: -0.05em; }
.sc-display--lg { font-size: clamp(1.9rem, 3vw, 2.85rem); line-height: 1.2; }
.sc-display--md { font-size: clamp(1.35rem, 2.1vw, 1.95rem); line-height: 1.3; }
.sc-body { font-size: 1.05rem; line-height: 1.8; color: var(--text-secondary); max-width: 62ch; text-wrap: pretty; }
.sc-lede { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); margin: 14px 0 0; }

/* ── 1 · the promise ──────────────────────────────────────────────── */
.promise {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  width: min(100% - 2 * clamp(20px, 5vw, 48px), 1400px);
  margin-inline: auto;
  padding: calc(var(--run-h) + 40px) 0 56px;
}

.promise__node {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1; width: min(100%, 520px); margin-inline: auto;
}
/* the anchor. run.js reads this box for the singularity's position and
   its resting size, and for the root of the decision thread. */
.promise__core {
  position: relative; z-index: 1;
  width: 14px; height: 14px; border-radius: 50%;
  background: #efe9ff;
  box-shadow:
    0 0 18px 5px rgba(167,139,250,0.75),
    0 0 54px 14px rgba(139,92,246,0.30),
    0 0 120px 40px rgba(139,92,246,0.10);
}
@media (prefers-reduced-motion: no-preference) {
  .promise__core { animation: corepulse 3.6s ease-in-out infinite; }
}
@keyframes corepulse {
  0%,100% { transform: scale(1); opacity: 0.92; }
  50%     { transform: scale(1.16); opacity: 1; }
}

.promise__copy { min-width: 0; }

.tag { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; font-family: var(--sc-font-mono); font-size: 0.8rem; }
/* The chip's ink is the canvas, not the page ink. White measured 3.84:1
   at the gradient's violet end and 2.8:1 at its orange end, both under
   the 4.5:1 small-text requirement. The near-black clears 5.1:1 at the
   worst stop and 6.7:1 at the best, across the same gradient. */
.tag__grad {
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 55%, #f97316 100%);
  color: #05050f; padding: 4px 10px; font-weight: 700; letter-spacing: 0.04em;
  font-size: 0.75rem; line-height: 1.35;
}
.tag__beta { color: var(--text-muted); font-weight: 500; letter-spacing: 0.5px; }

.tw { display: inline-flex; align-items: baseline; }
.tw__text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: #f472b6;                       /* the real ink, see .grad */
  -webkit-text-fill-color: transparent;
}
.tw__caret { color: var(--orange); font-weight: 300; margin-left: 2px; }
@media (prefers-reduced-motion: no-preference) { .tw__caret { animation: blink 1.05s steps(1) infinite; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.promise__body { margin: 40px 0 0; }
.em { font-family: var(--sc-font-mono); font-size: 0.9em; font-weight: 600; }
.em--orange { color: var(--orange); }
.em--violet { color: var(--violet-lt); background: rgba(139,92,246,0.12); padding: 2px 6px; border-radius: 2px; }

.sig {
  font-family: var(--sc-font-mono);
  font-size: 1rem; font-weight: 520; color: var(--text-primary);
  letter-spacing: 1px; border-left: 3px solid var(--orange);
  padding-left: 15px; margin: 20px 0 0;
}
.sig__blink { color: var(--orange); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .sig__blink { animation: blink 1.05s steps(1) infinite; } }

.cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 400px; margin-top: 42px; }
.cta-pair--close { margin: 36px auto 0; }

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 8px;
  font-weight: 600; font-size: 0.95rem; color: var(--text-primary);
  text-decoration: none; white-space: nowrap;
  transition: transform 150ms var(--ease), filter 150ms var(--ease), border-color 150ms var(--ease);
}
.cta--wa { background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.4); }
.cta--tg { background: rgba(34,158,217,0.14); border: 1px solid rgba(34,158,217,0.4); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { filter: brightness(1.14); transform: translateY(-2px); }
  .cta--wa:hover { border-color: rgba(139,92,246,0.7); }
  .cta--tg:hover { border-color: rgba(34,158,217,0.7); }
}
.cta:active { transform: translateY(1px); }

.note { font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--text-muted); margin: 12px 0 0; }
.note--centre { text-align: center; margin-top: 16px; }

@media (max-width: 900px) {
  .promise { grid-template-columns: 1fr; padding-top: calc(var(--run-h) + 28px); gap: 20px; }
  .promise__node { width: min(58%, 260px); order: -1; }
  .promise__copy .sc-display--xl { font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
  .promise__body { margin-top: 26px; font-size: 0.98rem; line-height: 1.7; }
  .cta-pair { margin-top: 28px; max-width: none; }
}

/* ── 2 · the decision field ───────────────────────────────────────
   Six questions, all six readable at once. Nothing is dimmed and
   nothing is picked out: the reader is choosing, so the page gets out
   of the way and the only emphasis is the alternating accent. */
.act--decision { padding-block: clamp(44px, 7vh, 96px) clamp(36px, 6vh, 80px); }
.decision__head { text-align: center; margin-bottom: clamp(28px, 4vh, 52px); }
.decision__head .sc-display--lg { margin: 0; }

.qgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5vw, 20px);
}
@media (max-width: 1040px) { .qgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .qgrid { grid-template-columns: 1fr; } }

.q {
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(18,18,32,0.96) 0%, rgba(10,10,20,0.99) 100%);
  border: 1px solid rgba(167,139,250,0.16);
  border-left: 2px solid rgba(167,139,250,0.4);
  border-radius: 12px;
  padding: 22px 22px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
/* the second accent earns its place here: the field alternates the two
   colours QBYX already owns, so six questions read as a set with range
   rather than as six of the same thing */
.q--orange { border-color: rgba(251,146,60,0.18); border-left-color: rgba(249,115,22,0.6); }
.q--orange .q__cat { color: var(--orange-lt); }
.q--orange .q__glyph { color: var(--orange-lt); }
.q--orange .q__query { border-color: rgba(251,146,60,0.2); }

@media (hover: hover) and (pointer: fine) {
  .q:hover { transform: translateY(-2px); }
  .q--violet:hover {
    border-color: rgba(167,139,250,0.5);
    box-shadow: 0 4px 20px rgba(0,0,0,0.28), 0 0 26px rgba(139,92,246,0.12);
  }
  .q--orange:hover {
    border-color: rgba(251,146,60,0.55);
    box-shadow: 0 4px 20px rgba(0,0,0,0.28), 0 0 26px rgba(249,115,22,0.12);
  }
}

.q__cat {
  font-family: var(--sc-font-mono);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(167,139,250,0.95);
  margin: 0 0 10px;
}
.q__title { font-size: 1.02rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 8px; }
.q__desc { font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 14px; }
.q__query {
  margin: auto 0 0;
  display: flex; gap: 8px; align-items: flex-start;
  font-family: var(--sc-font-mono); font-size: 0.72rem; line-height: 1.6;
  color: #c4c4cf;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(167,139,250,0.18);
  border-radius: 6px; padding: 10px 12px;
}
.q__glyph { color: var(--violet-lt); font-weight: 700; flex: none; margin-top: 1px; }

/* the rail that remains belongs to the consequences */
.rail {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding-inline: clamp(20px, 5vw, 48px);
  will-change: transform;
}
.rail-label {
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--violet-lt);
  margin: 0;
}

/* ── 3 · the world ───────────────────────────────────────────────
   The lede is the act. Both halves live in one grid cell so they cross
   over in place, and the second half rides --lift to the top of the
   frame and stays there while the capture wipes in underneath it.
   Nothing on this stage cuts away.

   Note there is no `position` here: .world IS the stage, and a plain
   `position: relative` on it has the same specificity as
   `.sc-stage { position: sticky }` and would silently stop the act
   pinning. Sticky is a positioned element, so the absolute children
   below resolve against it anyway. */
.world { display: block; }

.world__head {
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -50%) translateY(calc(var(--lift, 0) * -24vh));
  width: min(92%, 900px); margin: 0;
  display: grid; text-align: center;
}
.world__l1, .world__l2 { grid-area: 1 / 1; display: block; }

.plate {
  position: absolute; left: 50%; top: 63%;
  transform: translate(-50%, -50%);
  width: min(92%, 980px);
  margin: 0; line-height: 0;
}
.plate img {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,0.45);
  box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 60px rgba(139,92,246,0.14);
}

.plate__label {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--sc-font-mono);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  background: rgba(5,5,15,0.9);
  border-radius: 4px; padding: 4px 10px;
  line-height: 1.5;
}
.plate__label--violet { color: var(--violet-lt); border: 1px solid rgba(139,92,246,0.45); }
.plate__label--orange { color: var(--orange-lt); border: 1px solid rgba(249,115,22,0.55); }
.plate__label--free { position: static; display: inline-block; margin: 0 0 16px; }

/* centred with left/right, NOT with a transform: this element carries a
   cue, and the engine writes `transform` on cued elements every frame,
   which silently discarded a translateX(-50%) and let the line run off
   the right edge. Anything cued has to be positioned without transform. */
.disclosure {
  position: absolute; left: 0; right: 0; bottom: 4vh;
  padding-inline: clamp(20px, 5vw, 48px);
  text-align: center;
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .world__head { top: 42%; width: 94%; }
  .world__head .sc-display--lg { font-size: clamp(1.5rem, 6.2vw, 1.95rem); }
  .plate { top: 60%; width: 94%; }
  .plate__label { font-size: 0.52rem; padding: 3px 7px; top: 8px; left: 8px; }
  .disclosure { font-size: 0.62rem; }
}

/* ── 4 · the awakening ────────────────────────────────────────────── */
.act--agents { padding-block: clamp(22px, 3.5vh, 44px) 0; }
.plate--agents { position: static; transform: none; width: 100%; }
.plate--agents img { border-color: rgba(139,92,246,0.34); }
.agents {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.agents__copy .sc-display--md { margin: 0; max-width: 22ch; }

/* authored silence, declared in BRIEF.md §5 */
.standby {
  min-height: 24svh;
  display: grid; place-items: center;
}
.standby__word {
  font-family: var(--sc-font-mono);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .standby__word { animation: standby 2.8s ease-in-out infinite; }
}
@keyframes standby { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

@media (max-width: 900px) {
  .agents { grid-template-columns: 1fr; }
  .standby { min-height: 22svh; }
}

/* ── 5 · the branching · THE PEAK ─────────────────────────────────── */
.branch { display: block; --b: 0; }

.branch__field { position: absolute; inset: 0; }

/* The engine owns the OUTER layer: data-sc-parallax writes `transform`
   on it every frame and discards whatever the stylesheet put there.
   So the outer layer only carries depth, and the split lives on the
   inner pane, driven from --b. The padding lifts the centre clear of
   the readout at the bottom edge. */
.branch__world {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding-top: 15vh;
  will-change: transform;
}
.branch__pane {
  width: min(58%, 940px); aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(249,115,22,0.4);
  box-shadow: 0 32px 80px rgba(0,0,0,0.85);
  will-change: transform, opacity;
}
.branch__pane img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

/* one field becomes many. At --b 0 all four panes sit exactly on top of
   each other and the visitor sees one run; as --b grows the futures
   come out of it, each carrying its own people. */
/* one colour per future, all four from the brand's own ramp, so the
   panes read as different branches rather than as four copies. The
   front pane is the run the visitor has been watching and keeps the
   live orange; the futures take violet, magenta and violet-light. */
.branch__world--front { z-index: 4; }
.branch__world--front .branch__pane {
  transform: scale(calc(1 - 0.36 * var(--b)));
  border-color: rgba(249,115,22,calc(0.45 + 0.4 * var(--b)));
  box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 calc(46px * var(--b)) rgba(249,115,22,0.16);
}
.branch__world--l { z-index: 3; }
.branch__world--l .branch__pane {
  transform: translate(calc(-58% * var(--b)), calc(15% * var(--b))) scale(calc(1 - 0.42 * var(--b))) rotate(calc(-5deg * var(--b)));
  opacity: calc(0.9 * var(--b));
  border-color: rgba(139,92,246,0.72);
  box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 calc(38px * var(--b)) rgba(139,92,246,0.18);
}
.branch__world--r { z-index: 3; }
.branch__world--r .branch__pane {
  transform: translate(calc(58% * var(--b)), calc(15% * var(--b))) scale(calc(1 - 0.42 * var(--b))) rotate(calc(5deg * var(--b)));
  opacity: calc(0.9 * var(--b));
  border-color: rgba(236,72,153,0.72);
  box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 calc(38px * var(--b)) rgba(236,72,153,0.18);
}
.branch__world--back { z-index: 2; }
.branch__world--back .branch__pane {
  transform: translate(0, calc(-64% * var(--b))) scale(calc(1 - 0.56 * var(--b)));
  opacity: calc(0.72 * var(--b));
  filter: saturate(0.8);
  border-color: rgba(167,139,250,0.6);
}

.branch__wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none;
}
.branch__hud {
  position: absolute; left: 50%; top: 12vh; transform: translateX(-50%);
  z-index: 6;
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px);
  flex-wrap: wrap; justify-content: center;
  padding: 14px clamp(16px, 2.4vw, 28px);
  border-radius: 10px;
  background: rgba(5,5,15,0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
.branch__hud > * { margin: 0; }
.branch__state {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sc-font-mono);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange-lt);
}
.branch__count {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--sc-font-mono);
}
.branch__count .sc-nums {
  font-size: 1.3rem; font-weight: 700; color: var(--violet-lt);
  font-variant-numeric: tabular-nums; line-height: 1;
}

@media (max-width: 900px) {
  .branch__world { padding-top: 19vh; }
  .branch__pane { width: 88%; }
  .branch__world--l .branch__pane { transform: translate(calc(-32% * var(--b)), calc(-46% * var(--b))) scale(calc(1 - 0.44 * var(--b))) rotate(calc(-5deg * var(--b))); }
  .branch__world--r .branch__pane { transform: translate(calc(32% * var(--b)), calc(46% * var(--b))) scale(calc(1 - 0.44 * var(--b))) rotate(calc(5deg * var(--b))); }
  .branch__world--back .branch__pane { transform: translate(calc(-30% * var(--b)), calc(40% * var(--b))) scale(calc(1 - 0.6 * var(--b))); }
  .branch__hud { gap: 12px; padding: 11px 14px; bottom: 4vh; width: calc(100% - 32px); }
  .branch__hud .plate__label { font-size: 0.5rem; }
}

/* ── 6 · the consequences ────────────────────────────────────────
   Seven real fragments of the run's own output at their own heights and
   their own angles, arriving as the rail travels. A tidy row reads as a
   gallery of screenshots; this reads as a great deal happening at once,
   which is what a live simulation looks like. */
.csq {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--run-h) + 8px) 0 9vh;
}
.csq__head {
  display: flex; align-items: baseline; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  margin: 0 0 18px; padding-inline: clamp(20px, 5vw, 48px);
  text-align: center;
}
.csq__note {
  font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.06em; color: var(--text-muted); margin: 0;
}
.rail-label--inline { margin: 0; padding-inline: 0; }

.rail--csq { align-items: center; gap: clamp(6px, 0.8vw, 12px); min-height: 32vh; }
.csq__card {
  flex: none; margin: 0; line-height: 0;
  border-radius: 10px; overflow: hidden;
  background: #10101f;
  border: 1px solid rgba(167,139,250,0.45);
  box-shadow: 0 18px 46px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5);
  opacity: calc(0.62 + 0.38 * var(--in, 1));
  transition: opacity 380ms var(--ease);
}
.csq__card img { width: 100%; height: auto; display: block; }

/* the scatter. Authored rather than random so it is the same every
   visit, reads as composed, and never drops a card off the frame. */
/* they overlap on purpose. A row with air between every card reads as
   a gallery; a feed that stacks reads as volume, which is the point. */
.csq__card:nth-child(1) { width: clamp(10rem, 14vw, 13rem); transform: translateY(-8vh) rotate(-2.1deg); z-index: 4; }
.csq__card:nth-child(2) { width: clamp(20rem, 27vw, 26rem); transform: translateY(  5vh) rotate( 1.2deg); z-index: 2; margin-left: -2.5rem; }
.csq__card:nth-child(3) { width: clamp(17rem, 23vw, 22rem); transform: translateY( -6vh) rotate(-1.0deg); z-index: 5; margin-left: -3.5rem; }
.csq__card:nth-child(4) { width: clamp(21rem, 28vw, 27rem); transform: translateY(  6vh) rotate( 0.8deg); z-index: 3; margin-left: -2rem; }
.csq__card:nth-child(5) { width: clamp(19rem, 25vw, 24rem); transform: translateY( -3vh) rotate(-1.6deg); z-index: 6; margin-left: -4rem; }
.csq__card:nth-child(6) { width: clamp(20rem, 27vw, 26rem); transform: translateY(  8vh) rotate( 1.5deg); z-index: 2; margin-left: -2.5rem; }
.csq__card:nth-child(7) { width: clamp(22rem, 29vw, 28rem); transform: translateY( -7vh) rotate(-0.9deg); z-index: 4; margin-left: -3rem; }

/* Each fragment reports on its own clock, so the act reads as agents
   posting rather than as images. Paused until the act is on screen. */
@media (prefers-reduced-motion: no-preference) {
  .csq__card { animation: sim-tick 7s ease-in-out infinite; animation-play-state: paused; }
  .act--csq.is-live .csq__card { animation-play-state: running; }
  .csq__card:nth-child(1) { animation-duration: 4.7s; animation-delay: -0.4s; }
  .csq__card:nth-child(2) { animation-duration: 6.1s; animation-delay: -3.1s; }
  .csq__card:nth-child(3) { animation-duration: 8.3s; animation-delay: -1.7s; }
  .csq__card:nth-child(4) { animation-duration: 5.3s; animation-delay: -4.4s; }
  .csq__card:nth-child(5) { animation-duration: 9.7s; animation-delay: -2.2s; }
  .csq__card:nth-child(6) { animation-duration: 7.1s; animation-delay: -5.9s; }
  .csq__card:nth-child(7) { animation-duration: 6.7s; animation-delay: -0.9s; }
}
@keyframes sim-tick {
  0%, 88%, 100% {
    border-color: rgba(167,139,250,0.45);
    box-shadow: 0 18px 46px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5);
  }
  92% {
    border-color: rgba(249,115,22,0.85);
    box-shadow: 0 18px 46px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5), 0 0 24px rgba(249,115,22,0.2);
  }
}

@media (max-width: 900px) {
  /* a phone reads one fragment at a time, so the cards are narrower and
     overlap harder: the same seven pieces in far less travel */
  .csq__card { width: clamp(9rem, 56vw, 17rem) !important; margin-left: -2rem; }
  .csq__card:nth-child(1) { width: clamp(8rem, 34vw, 11rem) !important; margin-left: 0; }
  .csq__card:nth-child(odd)  { transform: translateY(-6vh) rotate(-1.2deg); }
  .csq__card:nth-child(even) { transform: translateY( 6vh) rotate( 1.2deg); }
  .rail--csq { min-height: 34vh; }
}
@media (max-width: 660px) {
  /* ── the hero ──────────────────────────────────────────────────
     the object is the same size as the copy block on a phone, which
     pushes the action below the fold, so it comes down and the type
     comes in one step */
  .promise { padding: calc(var(--run-h) + 16px) 0 32px; gap: 14px; }
  .promise__node { width: min(60%, 250px); }
  .tag { gap: 8px; margin-bottom: 18px; }
  .tag__grad { font-size: 0.66rem; padding: 4px 8px; line-height: 1.4; }
  .tag__beta { font-size: 0.7rem; }
  .promise__body { font-size: 0.95rem; line-height: 1.65; margin-top: 20px; }
  .sig { font-size: 0.88rem; padding-left: 12px; margin-top: 18px; letter-spacing: 0.5px; }
  .cta-pair { margin-top: 22px; gap: 10px; }
  .cta { padding: 12px 14px; font-size: 0.9rem; gap: 6px; }
  .cta svg { width: 15px; height: 15px; }
  .note { font-size: 0.72rem; }

  /* ── the decision field ────────────────────────────────────────── */
  .act--decision { padding-block: clamp(28px, 4vh, 52px) clamp(20px, 3vh, 40px); }
  .decision__head { margin-bottom: 20px; }
  .q { padding: 16px 16px 15px; }
  .qgrid { gap: 12px; }

  /* ── the captures ──────────────────────────────────────────────
     A 1920px-wide product capture shown at 366px is a grey smudge:
     the proof stops proving anything. On a phone the plates crop
     into the part that carries the evidence instead of shrinking the
     whole desktop, so what is on screen can actually be read. */
  .plate { top: 56%; width: 96%; }
  .plate img { aspect-ratio: 4 / 5; object-fit: cover; }
  .plate--world img { object-position: 24% 42%; }
  .plate--agents img { aspect-ratio: 1 / 1; object-position: 82% 40%; }
  .disclosure { bottom: 2.5vh; font-size: 0.62rem; }

  /* ── the awakening ─────────────────────────────────────────────── */
  .standby { min-height: 8svh; }
  .act--agents { padding-block: 20px 0; }
  .agents { gap: 20px; }

  /* ── the consequences ──────────────────────────────────────────── */
  .csq { padding: calc(var(--run-h) + 8px) 0 2vh; }
  .csq__head { gap: 6px; margin-bottom: 14px; }
  .csq__note { font-size: 0.62rem; }

  /* ── the advantage ─────────────────────────────────────────────── */
  .frontier { padding: calc(var(--run-h) + 14px) clamp(20px, 5vw, 48px) 24px; }
  .way__desc { font-size: 0.82rem; line-height: 1.6; }

  /* ── the resolution ────────────────────────────────────────────── */
  .act--resolve { padding-block: 20px 10px; }
  .resolve { gap: 18px; }
  .close .sc-body { font-size: 0.95rem; line-height: 1.7; }
  .foot { padding-top: 22px; }
  .foot__top { gap: 24px; }
  .foot__nav { gap: 32px; }
}

/* ── 7 · the advantage ───────────────────────────────────────────
   Three ways to decide, advancing inside a held frame. It took the
   pinned beat the engine workflow used to hold, which is what keeps the
   page from ending on two flow sections in a row. */
.frontier {
  min-height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px); align-items: center;
  max-width: 1400px; margin-inline: auto;
  padding: calc(var(--run-h) + 24px) clamp(20px, 5vw, 48px) 36px;
}
.frontier__lead .sc-display--lg { margin: 0; font-size: clamp(2rem, 3.4vw, 3.1rem); }

.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.way {
  padding: 17px 0 17px 22px;
  border-left: 1px solid var(--border-subtle);
  opacity: 0.34;
  transition: opacity 340ms var(--ease), border-color 340ms var(--ease);
}
.way.is-on { opacity: 0.8; }
.way__label {
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.58);
  margin: 0 0 12px;
}
.way__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-muted); margin: 0 0 10px; line-height: 1.35; }
.way__desc { font-size: 0.86rem; line-height: 1.7; color: var(--text-muted); margin: 0; max-width: 46ch; }

.way--now { border-left-color: rgba(139,92,246,0.4); padding-left: 26px; }
.way--now.is-on { opacity: 1; border-left-color: var(--violet); }
.way--now .way__label { color: var(--violet-lt); }
.way--now .way__title { color: var(--text-primary); font-size: 1.25rem; }
.way--now .way__desc { color: var(--text-secondary); }
.way--now::after {
  content: ""; display: block; width: 32px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #8b5cf6, #f97316); margin-top: 20px;
  opacity: 0; transition: opacity 340ms var(--ease);
}
.way--now.is-on::after { opacity: 1; }

@media (max-width: 900px) {
  .frontier { grid-template-columns: 1fr; gap: 26px; align-content: center; }
  .frontier__lead .sc-display--lg { font-size: clamp(1.7rem, 6.6vw, 2.1rem); }
  .way { padding-block: 12px; }
}

/* ── 8 · the resolution ───────────────────────────────────────────── */
.act--resolve { padding-block: clamp(28px, 4vh, 52px) clamp(14px, 2vh, 26px); }
.resolve { display: grid; gap: clamp(22px, 3vh, 36px); }

.result {
  border-radius: 16px;
  border: 1px solid rgba(139,92,246,0.3);
  /* opaque: the thread runs behind this panel and a translucent
     gradient lets it show through as scratches across the head */
  background: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(5,5,15,1) 52%, rgba(249,115,22,0.07) 100%), #0a0a16;
  overflow: hidden;
}
.result__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--sc-font-mono);
}
.result__title {
  margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--violet-lt);
}
.result__state {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--violet-lt);
}

.result__body { position: relative; aspect-ratio: 16 / 5; min-height: 210px; background: #07070f; }
.result__graph { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The mark is drawn INTO .result__graph, additively. The element only
   exists to decode frames, so it is kept off the composited page
   rather than laid over the canvas: mix-blend-mode on a <video>
   computes as `screen` in Chrome and still paints an opaque black
   box over whatever is under it. */
.result__mark {
  position: absolute; left: 0; bottom: 0;
  width: 2px; height: 2px; opacity: 0;
  pointer-events: none;
}

.tally {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0; border-top: 1px solid var(--border-subtle);
}
.tally__i { padding: 13px 20px; border-right: 1px solid var(--border-subtle); }
.tally__i:last-child { border-right: 0; }
.tally dt {
  font-family: var(--sc-font-mono);
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.tally dd {
  margin: 0; font-family: var(--sc-font-mono);
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.tally__i:nth-child(2) dd { color: var(--violet-lt); }
.tally__i:nth-child(3) dd { color: var(--orange-lt); }

.close { text-align: center; max-width: 760px; margin-inline: auto; }
.close .sc-body { margin-inline: auto; color: var(--text-muted); }
.close .sc-display--lg { margin: 0 0 14px; }

@media (max-width: 760px) {
  .tally { grid-template-columns: repeat(2, 1fr); }
  .tally__i:nth-child(2) { border-right: 0; }
  .tally__i:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }
  .result__body { aspect-ratio: 4 / 3; }
}

/* ── footer ───────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--border-subtle); padding-top: 26px; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; }
.foot__brand { max-width: 320px; }
.foot__mark { font-family: var(--sc-font-mono); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0 0 12px; }
.foot__ai { color: var(--violet); }
.foot__line { color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; margin: 0; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 48px; }
.foot__col { display: flex; flex-direction: column; gap: 8px; }
.foot__h {
  font-family: var(--sc-font-mono);
  font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  margin: 0 0 4px;
}
.foot__h--violet { color: var(--violet); }
.foot__h--orange { color: var(--orange); }
.foot__col a { color: var(--text-muted); font-size: 0.875rem; text-decoration: none; transition: color 150ms var(--ease); }
.foot__col a:hover { color: var(--text-primary); }
.foot__bar {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: 0.875rem;
}
.foot__bar a { color: var(--text-muted); text-decoration: none; transition: color 150ms var(--ease); }
.foot__bar a:hover { color: var(--text-primary); }

/* ── reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* the capture is shown at once, so the heading has to be clear of it
     from the first frame rather than travelling out of the way */
  .world { --lift: 1; }
  .thread { opacity: 0.7; }
  .branch__pane { transition: none; }
}