/* ══════════════════════════════════════════════════════════════════════
   SpeedyDb — departure-board landing page
   Train-station / industrial "Steel" feel: mostly black & white, with a
   single green "signal" accent reserved for live connectors.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0b0c0e;   /* night platform            */
  --bg-2:      #101216;   /* raised steel panel        */
  --board:     #131417;   /* the split-flap housing    */
  --flap-bg:   #1b1c20;   /* a single flap card        */
  --flap-hi:   #26272c;   /* flap top-half sheen       */
  --flap-ink:  #f2efe6;   /* warm ivory flap glyph     */
  --ink:       #eceae4;   /* primary text              */
  --muted:     #9a9ca3;   /* secondary text            */
  --dim:       #5c5f66;   /* tertiary text             */
  --line:      #23252b;   /* hairlines                 */
  --steel:     #34373d;   /* brushed steel edge        */
  --signal:    #3fb950;   /* the green track signal    */
  --signal-lo: #1f6f2c;
  --red:       #ff5b52;   /* red stop signal — until you arrive */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --flip-dur: 130ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #16181d 0%, var(--bg) 55%) fixed,
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--ink);
  background: #1a1c21;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05em .35em;
}

/* ─────────────────────────────  navbar  ───────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 58px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(12, 13, 15, .82);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 8px 30px -18px #000;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
.nav.is-visible { transform: translateY(0); opacity: 1; }

.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__mark  { width: 30px; color: var(--ink); display: block; }
.nav__mark svg { width: 100%; height: auto; display: block; }
.nav__word  { font-weight: 700; letter-spacing: .04em; font-size: 15px; }

/* falcon logo: black shapes → currentColor, white cutouts → page background */
.lg__fg  { fill: currentColor; }
.lg__cut { fill: var(--bg); }

.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 7px;
  transition: color .15s, background .15s;
}
.nav__links a:hover { color: var(--ink); background: var(--bg-2); }

.nav__clock {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────  hero  ───────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vh, 64px);
  padding: 80px 16px 48px;
  overflow: hidden;
}

/* faint receding rails / platform floor */
.hero__rails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.014) 46px 47px),
    linear-gradient(to top, rgba(255,255,255,.04), transparent 42%);
  mask-image: radial-gradient(120% 90% at 50% 60%, #000 30%, transparent 78%);
}

/* ── the board housing ── */
.board {
  position: relative;
  z-index: 1;
  width: min(96vw, 1120px);
  padding: clamp(12px, 2vw, 22px);
  background: linear-gradient(180deg, #17181c, var(--board));
  border: 1px solid var(--steel);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 30px 80px -40px #000,
    0 0 0 6px rgba(0,0,0,.25);
}

.board__header,
.board__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: clamp(9px, 1.3vw, 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px clamp(4px, 1vw, 10px);
}
.board__header { margin-bottom: clamp(10px, 1.6vw, 16px); }
.board__footer { margin-top: clamp(10px, 1.6vw, 16px); color: var(--dim); }

.board__title { color: var(--ink); font-weight: 700; letter-spacing: .06em; }
.board__mid   { color: var(--signal); letter-spacing: .22em; }
.board__clock { color: var(--muted); font-variant-numeric: tabular-nums; }

.board__lamp { display: inline-flex; align-items: center; gap: 8px; }
.board__lamp i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  animation: lampPulse 2.4s ease-in-out infinite;
}
@keyframes lampPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.board__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vw, 16px);
  padding: clamp(12px, 2vw, 22px) clamp(8px, 1.4vw, 16px);
  background: #050506;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: inset 0 2px 18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.02);
}

/* ── a row of flaps ── */
.flaprow {
  --cell-w: clamp(9px, 3vw, 34px);
  --cell-h: calc(var(--cell-w) * 1.44);
  --flap-fs: calc(var(--cell-w) * 1.18);
  --flap-gap: max(1px, calc(var(--cell-w) * 0.05));   /* barely-there seam between flaps */
  width: 100%;                                        /* JS sizes cells to fill this exactly */
  display: flex;
  justify-content: center;
  gap: var(--flap-gap);
}

/* ── a single split-flap cell ── */
.flap {
  position: relative;
  width: var(--cell-w);
  height: var(--cell-h);
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--flap-fs);
  color: var(--flap-ink);
  perspective: 200px;
  box-shadow: 0 1px 1px rgba(0,0,0,.6);
  flex: none;
}
/* the horizontal seam across the middle of every cell — a hairline (hidden on phones) */
.flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
  background: rgba(0,0,0,.7);
  z-index: 6;
  pointer-events: none;
}
@media (max-width: 600px) { .flap::after { display: none; } }

.flap__half,
.flap__fold {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: var(--flap-bg);
  backface-visibility: hidden;
}
.flap__half span,
.flap__fold span {
  display: block;
  width: 100%;
  height: var(--cell-h);
  line-height: var(--cell-h);
  text-align: center;
}

.flap__half--top,
.flap__fold--top {
  top: 0;
  align-items: flex-start;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--flap-hi), var(--flap-bg));
}
.flap__half--bottom,
.flap__fold--bottom {
  bottom: 0;
  align-items: flex-end;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, var(--flap-bg), #171418);
}

/* static halves sit underneath the folding leaves */
.flap__half { z-index: 1; }

/* the two folding leaves */
.flap__fold { z-index: 4; opacity: 0; }
.flap__fold--top    { transform-origin: bottom center; transform: rotateX(0deg); }
.flap__fold--bottom { transform-origin: top center;    transform: rotateX(90deg); }

.flap.is-flipping .flap__fold { opacity: 1; }
.flap.is-flipping .flap__fold--top    { animation: flapTop    var(--flip-dur) linear forwards; }
.flap.is-flipping .flap__fold--bottom { animation: flapBottom var(--flip-dur) linear forwards; }

@keyframes flapTop    { 0% { transform: rotateX(0deg); }   50%,100% { transform: rotateX(-90deg); } }
@keyframes flapBottom { 0%,50% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } }

/* ── scroll cue ── */
.scrollcue {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  transition: color .2s;
}
.scrollcue:hover { color: var(--ink); }
.scrollcue__arrow { font-size: 15px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }

/* ─────────────────────────  concept (Stop 01)  ───────────────────────── */
/* Tall section; the scene sticks while its three connectors light in turn. */

.concept {
  position: relative;
  height: 340vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0d10, var(--bg));
}

.concept__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 30px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

.concept__head { text-align: center; max-width: 720px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red);                 /* red until the stop is reached */
  transition: color .4s ease;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  transition: background .4s ease, box-shadow .4s ease;
}
.eyebrow.is-arrived { color: var(--signal); }              /* green on arrival */
.eyebrow.is-arrived .eyebrow__dot { background: var(--signal); box-shadow: 0 0 10px var(--signal); }

.concept__title {
  margin: 0 0 14px;
  font-size: clamp(30px, 6vw, 60px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
}
.concept__sub {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.6;
}
.concept__sub em { color: var(--ink); font-style: normal; font-weight: 600; }

/* ── the diagram ── */
.diagram {
  width: min(100%, 940px);
  flex: 0 1 auto;
  min-height: 0;
}
.diagram svg {
  width: 100%;
  height: auto;
  max-height: 52vh;
  display: block;
  overflow: visible;
}

/* nodes: black boxes with steel edges; text stays quiet until lit */
.node__box,
.node__box2,
.node__box3,
.node__fold {
  fill: #121317;
  stroke: var(--steel);
  stroke-width: 2;
}
.node__box2 { fill: #101115; }
.node__box3 { fill: #0e0f12; }
.node__fold { fill: #1a1b20; }
.node__ln   { stroke: #33363d; stroke-width: 3; stroke-linecap: round; }
.node__dots circle { fill: #3a3d44; transition: fill .4s ease; }
.node__core { fill: #191b20; stroke: var(--steel); stroke-width: 2; }
.node__ring { fill: none; stroke: #2b2e35; stroke-width: 1.5; stroke-dasharray: 4 6; }

.node__name {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-anchor: middle;
  transition: fill .4s ease;
}
.node__tag {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-anchor: middle;
}
.node__ext {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  text-anchor: middle;
  transition: fill .4s ease;
}

/* connectors: dim by default, green + flowing when their stage is live */
.wire__base {
  fill: none;
  stroke: #34373d;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke .45s ease, filter .45s ease;   /* smooth fade when powered off */
}
.wire__pulse {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 26 400;
  stroke-dashoffset: 426;
  opacity: 0;
}
/* label card: page-coloured fill so text never blends into the wire,
   with a border that tracks the wire's state (gray when dim, green when live) */
.wire__labelbox {
  fill: var(--bg);
  stroke: #34373d;
  stroke-width: 1.5;
  transition: stroke .45s ease;
}
.wire.is-active .wire__labelbox { stroke: var(--signal); }
.wire__label {
  fill: var(--dim);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  text-anchor: middle;
  transition: fill .4s ease;
}

.wire.is-active .wire__base {
  stroke: var(--signal);
  filter: drop-shadow(0 0 5px var(--signal)) drop-shadow(0 0 12px rgba(63,185,80,.45));
  transition: stroke .5s ease, filter .5s ease;
}
.wire.is-active .wire__pulse {
  opacity: 1;
  animation: flow 1.5s linear infinite;
}
.wire.is-active .wire__label { fill: var(--signal); }
@keyframes flow { to { stroke-dashoffset: 0; } }

/* leaving Stop 01: blink the live wires a few times, then JS drops the glow */
#diagram.is-powerdown .wire.is-active { animation: wireBlink .78s ease-in-out both; }
#diagram.is-powerdown .wire.is-active .wire__pulse { animation-play-state: paused; }
@keyframes wireBlink {
  0%   { opacity: 1; }
  12%  { opacity: .12; }
  26%  { opacity: 1; }
  42%  { opacity: .12; }
  58%  { opacity: 1; }
  74%  { opacity: .12; }
  100% { opacity: 1; }
}

/* a node lights up green once its incoming wire is live */
.node.is-lit .node__box,
.node.is-lit .node__box2,
.node.is-lit .node__box3,
.node.is-lit .node__fold,
.node.is-lit .node__core {
  stroke: var(--signal);
  filter: drop-shadow(0 0 6px rgba(63,185,80,.5));
  transition: stroke .5s ease, filter .5s ease;
}
.node.is-lit .node__name,
.node.is-lit .node__ext { fill: var(--ink); }
.node.is-lit .node__ring { stroke: var(--signal-lo); }
.node.is-lit .node__dots circle { fill: var(--signal); }

/* ── station line-map: 3 stops on a rail ── */
.stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px));
  gap: clamp(10px, 4vw, 60px);
  position: relative;
}
/* the rail behind the stops */
.stops::before {
  content: "";
  position: absolute;
  top: 6px; left: 8%; right: 8%;
  height: 2px;
  background: var(--steel);
}
.stop {
  position: relative;
  padding-top: 22px;
  text-align: center;
}
.stop__dot {
  position: absolute;
  top: 0; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #16181d;
  border: 2px solid var(--steel);
  transition: all .45s ease;
}
.stop__k {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .4s ease;
}
.stop__v {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--dim);
  opacity: .7;
  transition: color .4s ease, opacity .4s ease;
}
.stop.is-active .stop__dot {
  background: var(--signal);
  border-color: var(--signal);
  box-shadow: 0 0 12px var(--signal);
}
.stop.is-active .stop__k { color: var(--signal); }
.stop.is-active .stop__v { color: var(--muted); opacity: 1; }

/* ─────────────────────────────  footer  ───────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding: clamp(40px, 8vh, 90px) 24px;
  text-align: center;
  background: var(--bg);
}
.foot__word {
  margin: 0 0 10px;
  font-size: clamp(28px, 7vw, 56px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
}
.foot__note {
  margin: 0 0 18px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.foot__tag {
  margin: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ═════════════════════  Stop 02 — browser → cloud  ═════════════════════ */

.stop2 {
  position: relative;
  height: 320vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), #0c0d10);
}
.stop2__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 30px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

/* policy toggle */
.s2toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
}
.s2toggle__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 8px;
}
.s2toggle button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.s2toggle button:hover { color: var(--ink); }
.s2toggle button.is-on {
  color: var(--ink);
  background: #1b1e24;
  border-color: var(--steel);
}

/* the browser | pipe | cloud lane */
.s2 {
  width: min(100%, 960px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(6px, 1.6vw, 20px);
}

/* ── browser window ── */
.s2win {
  border: 1px solid var(--steel);
  border-radius: 11px;
  background: linear-gradient(180deg, #15171c, #101216);
  overflow: hidden;
  box-shadow: 0 24px 60px -34px #000, inset 0 1px 0 rgba(255,255,255,.04);
}
.s2win__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  background: #0e1014;
  border-bottom: 1px solid var(--line);
}
.s2win__bar i { width: 8px; height: 8px; border-radius: 50%; background: #2b2e35; }
.s2win__bar span {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2win__body { padding: 15px 14px; display: flex; flex-direction: column; gap: 13px; }

.s2agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 11px;
  transition: color .4s, border-color .4s;
}
.s2agent__eye { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); transition: background .4s; }
.s2.is-s1 .s2agent { color: var(--ink); border-color: var(--steel); }
.s2.is-s1 .s2agent__eye { background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: lampPulse 1.6s ease-in-out infinite; }

.s2meter { display: flex; flex-direction: column; gap: 7px; }
.s2meter__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.s2meter__pct { color: var(--muted); font-variant-numeric: tabular-nums; }
.s2meter__track {
  position: relative;
  height: 13px;
  border-radius: 7px;
  background: #08090c;
  border: 1px solid var(--line);
  overflow: hidden;
}
.s2meter__track > i {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, #3a3d44, #5b6472);
  transition: width .6s cubic-bezier(.4,0,.2,1), background .5s ease;
}
.s2.is-s1 .s2meter__track > i { width: 58%; }
.s2.is-s2 .s2meter__track > i,
.s2.is-s3 .s2meter__track > i { width: 100%; background: linear-gradient(90deg, #8a6f2a, #e0b64a); }

.s2overflow {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: #e6bd52;
  border: 1px solid #6b5320;
  border-radius: 6px;
  padding: 4px 9px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s, transform .35s;
}
.s2.is-s2 .s2overflow,
.s2.is-s3 .s2overflow { opacity: 1; transform: none; animation: lampPulse 1.7s ease-in-out infinite; }

/* ── pipe with gate + travelling file tokens ── */
.s2pipe { position: relative; height: 156px; }
.s2rail {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, var(--steel) 0 8px, transparent 8px 17px);
  transition: background .5s;
}
.s2.is-s3 .s2rail { background: repeating-linear-gradient(90deg, var(--signal-lo) 0 8px, transparent 8px 17px); }

.s2gate {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 3;
  padding: 6px 4px;
  background: radial-gradient(circle at 50% 40%, #101216 55%, transparent 75%);
}
.ico-lock { width: 26px; height: 26px; display: block; }
.ico-lock .lockbody { fill: #15171c; stroke: var(--muted); stroke-width: 1.7; transition: stroke .4s, filter .4s; }
.ico-lock .lockshackle {
  fill: none; stroke: var(--muted); stroke-width: 1.7;
  transform-origin: 15px 9px;
  transition: transform .35s ease, stroke .4s;
}
.s2gate em {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  font-style: normal;
}
.s2.mode-restrict .ico-lock .lockbody,
.s2.mode-restrict .ico-lock .lockshackle { stroke: var(--ink); }
.s2.mode-restrict.is-s3 .ico-lock .lockbody { stroke: var(--signal); filter: drop-shadow(0 0 5px rgba(63,185,80,.55)); }
.s2.mode-all .ico-lock .lockshackle { transform: translate(6px, -3px) rotate(14deg); } /* unlocked */

/* file tokens */
.tok {
  position: absolute;
  left: 2%;
  width: 15px; height: 19px;
  margin-top: -9.5px;
  border-radius: 2px;
  background: #1b1e24;
  border: 1px solid #4a4f58;
  opacity: 0;
  z-index: 2;
}
/* above the rail = upload (browser→cloud); below = retrieval (cloud→browser) */
.tok--up   { top: calc(50% - (var(--row) + 1) * 15px); }
.tok--down { top: calc(50% + (var(--row) + 1) * 15px); }
.tok::before {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 4px;
  height: 1.5px;
  background: #565b64;
  box-shadow: 0 4px 0 #43474f, 0 8px 0 #43474f;
}
.tok--sensitive { border-color: #7a6326; background: #211d13; }
.tok--sensitive::before { background: #7a6326; box-shadow: 0 4px 0 #5e4c1e; }
.tok--sensitive > b {
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6bd52' stroke-width='2.6'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.2' fill='%23211d13'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.s2.mode-all .tok--sensitive > b { opacity: .35; }  /* unlocked → passes through */

/* upload lane (above): browser → cloud, left → right */
.s2.is-s3 .tok--up {
  animation: flowToCloud 2.6s linear infinite;
  animation-delay: calc(var(--row) * 0.5s);
}
@keyframes flowToCloud {
  0%   { left: 2%;  opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { left: 93%; opacity: 0; }
}
/* retrieval lane (below): cloud → browser, right → left */
.s2.is-s3 .tok--down {
  animation: flowToBrowser 2.6s linear infinite;
  animation-delay: calc(var(--row) * 0.5s + 0.25s);
}
@keyframes flowToBrowser {
  0%   { left: 93%; opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { left: 2%;  opacity: 0; }
}
/* restrict mode: sensitive files are rejected at the gate in BOTH directions —
   blocked from spilling up (push) AND from being pulled back down (retrieval) */
.s2.is-s3.mode-restrict .tok--up.tok--sensitive   { animation-name: flowToGate; }
.s2.is-s3.mode-restrict .tok--down.tok--sensitive { animation-name: flowToGateReverse; }
@keyframes flowToGateReverse {
  0%   { left: 93%; opacity: 0; }
  12%  { opacity: 1; }
  50%  { left: 55%; opacity: 1; }
  64%  { left: 60%; }
  80%  { left: 55%; opacity: 1; }
  100% { left: 57%; opacity: 0; }
}
@keyframes flowToGate {
  0%   { left: 2%;  opacity: 0; }
  12%  { opacity: 1; }
  50%  { left: 45%; opacity: 1; }
  64%  { left: 40%; }
  80%  { left: 45%; opacity: 1; }
  100% { left: 43%; opacity: 0; }
}

.s2send,
.s2retrieve {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0;
  transition: opacity .5s;
}
.s2send    { top: 2px; }
.s2retrieve { bottom: 2px; }
.s2.is-s3 .s2send,
.s2.is-s3 .s2retrieve { opacity: 1; }
.s2.is-s3 .s2send span,
.s2.is-s3 .s2retrieve span { color: var(--signal); }

/* ── cloud ── */
.s2cloud { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ico-cloud { width: clamp(84px, 15vw, 140px); height: auto; display: block; }
.ico-cloud path { fill: #111317; stroke: var(--steel); stroke-width: 2.4; transition: stroke .5s ease, filter .5s ease; }
.s2.is-s3 .ico-cloud path { stroke: var(--signal); filter: drop-shadow(0 0 8px rgba(63,185,80,.5)); }
.s2cloud__name {
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  transition: color .5s;
}
.s2.is-s3 .s2cloud__name { color: var(--ink); }
.s2cloud__sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--dim); }

/* ═══════════════  Stop 03 — embedded, configurable budget  ════════════ */

.stop3 {
  position: relative;
  height: 300vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0d10, var(--bg));
}
.stop3__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 30px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

/* size selector — same chrome as the Stop 02 policy toggle */
.s3size {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
}
.s3size__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 8px;
}
.s3size button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.s3size button:hover { color: var(--ink); }
.s3size button.is-on { color: var(--ink); background: #1b1e24; border-color: var(--steel); }

/* two panels: browser (device-bound) vs application (configurable) */
.s3 {
  width: min(100%, 900px);
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  align-items: stretch;
  gap: clamp(10px, 2.5vw, 26px);
}
.s3panel {
  border: 1px solid var(--steel);
  border-radius: 12px;
  background: linear-gradient(180deg, #15171c, #101216);
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 60px -34px #000;
}
.s3panel--browser { opacity: .8; }
.s3panel--app { transition: border-color .5s, box-shadow .5s; }
.s3.is-s2 .s3panel--app,
.s3.is-s3 .s3panel--app {
  border-color: var(--signal-lo);
  box-shadow: 0 24px 60px -34px #000, 0 0 0 1px rgba(63,185,80,.22);
}

.s3panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.s3lib {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 400;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 9px;
}
.s3lib svg { width: 22px; height: auto; color: var(--muted); display: block; }
.s3lib b { color: var(--ink); font-weight: 700; }
.s3.is-s1 .s3panel--app .s3lib { color: var(--ink); border-color: var(--steel); }
.s3.is-s1 .s3panel--app .s3lib svg { color: var(--signal); }

.s3panel__cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}

/* capacity gauge = reserve + used + free headroom */
.s3gauge {
  display: flex;
  height: 15px;
  border-radius: 8px;
  overflow: hidden;
  background: #08090c;
  border: 1px solid var(--line);
}
.s3gauge .seg { height: 100%; transition: width .55s cubic-bezier(.4,0,.2,1), background .4s; }
.seg--reserve { background: #4a4f58; flex: 0 0 auto; min-width: 3px; }
.seg--used {
  background: linear-gradient(90deg, var(--signal-lo), var(--signal));
  flex: 0 0 auto;
  min-width: 3px;
}
.seg--used.seg--amber { background: linear-gradient(90deg, #8a6f2a, #e0b64a); }
.seg--free { background: transparent; flex: 1 1 auto; }

.s3panel__num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
}
.s3panel__num b { color: var(--ink); font-weight: 700; }
.s3panel__hint, .s3free { color: var(--dim); }
.s3.is-s2 .s3panel--app .s3num,
.s3.is-s3 .s3panel--app .s3num { color: var(--signal); }

.s3policy {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: auto;
  opacity: 0;
  transition: opacity .5s;
}
.s3.is-s3 .s3policy { opacity: 1; }

/* ═══════════════  Stop 04 — shared context, scoped access  ════════════ */

.stop4 {
  position: relative;
  height: 320vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), #0c0d10);
}
.stop4__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 26px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

.s4scope-ctl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
}
.s4scope-ctl__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 8px;
}
.s4scope-ctl button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.s4scope-ctl button:hover { color: var(--ink); }
.s4scope-ctl button.is-on { color: var(--ink); background: #1b1e24; border-color: var(--steel); }

.s4 { width: min(100%, 940px); }
.s4 svg { width: 100%; height: auto; max-height: 54vh; display: block; overflow: visible; }

/* hub */
.s4hub__box { fill: #121317; stroke: var(--steel); stroke-width: 2; transition: stroke .5s, filter .5s; }
.s4.is-s1 .s4hub__box { stroke: var(--signal); filter: drop-shadow(0 0 6px rgba(63,185,80,.5)); }
.s4hub__name {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 16px; font-weight: 700; letter-spacing: .1em;
  text-anchor: middle; transition: fill .5s;
}
.s4.is-s1 .s4hub__name { fill: var(--ink); }
.s4hub__sub { fill: var(--dim); font-family: var(--mono); font-size: 12px; text-anchor: middle; }
.s4scope { fill: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-anchor: middle; }

/* participant nodes */
.s4node__box { fill: #121317; stroke: var(--steel); stroke-width: 2; transition: stroke .5s, filter .5s; }
.s4node__name {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-anchor: middle; transition: fill .5s;
}

/* stage 1 — your own devices link up (green) */
.s4.is-s1 .s4node[data-node="browser"] .s4node__box,
.s4.is-s1 .s4node[data-node="app"] .s4node__box { stroke: var(--signal); filter: drop-shadow(0 0 6px rgba(63,185,80,.5)); }
.s4.is-s1 .s4node[data-node="browser"] .s4node__name,
.s4.is-s1 .s4node[data-node="app"] .s4node__name { fill: var(--ink); }

/* stage 2 — other users appear (present, not yet scoped) */
.s4node[data-node="ally"], .s4node[data-node="guest"] { opacity: .32; transition: opacity .5s; }
.s4.is-s2 .s4node[data-node="ally"], .s4.is-s2 .s4node[data-node="guest"] { opacity: 1; }
.s4.is-s2 .s4node[data-node="ally"] .s4node__box,
.s4.is-s2 .s4node[data-node="guest"] .s4node__box { stroke: var(--muted); }
.s4.is-s2 .s4node[data-node="ally"] .s4node__name,
.s4.is-s2 .s4node[data-node="guest"] .s4node__name { fill: var(--ink); }

/* stage 3 — scoped: ally granted (green), guest restricted (red + lock) */
.s4.is-s3 .s4node[data-node="ally"] .s4node__box { stroke: var(--signal); filter: drop-shadow(0 0 6px rgba(63,185,80,.5)); }
.s4.is-s3 .s4node[data-node="ally"] .s4node__name { fill: var(--ink); }
.s4.is-s3 .s4node--guest .s4node__box { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(255,91,82,.4)); }
.s4.is-s3 .s4node--guest .s4node__name { fill: var(--muted); }

.s4lock { opacity: 0; transition: opacity .4s; }
.s4.is-s3 .s4lock { opacity: 1; }
.s4lock rect { fill: #1a1216; stroke: var(--red); stroke-width: 1.6; }
.s4lock path { stroke: var(--red); stroke-width: 1.6; }

/* spokes */
.s4wire__base { fill: none; stroke: #2a2d33; stroke-width: 2.4; stroke-linecap: round; transition: stroke .5s, filter .5s; }
.s4.is-s1 .s4wire[data-w="browser"] .s4wire__base,
.s4.is-s1 .s4wire[data-w="app"] .s4wire__base { stroke: var(--signal); filter: drop-shadow(0 0 5px rgba(63,185,80,.5)); }
.s4.is-s2 .s4wire[data-w="ally"] .s4wire__base,
.s4.is-s2 .s4wire[data-w="guest"] .s4wire__base { stroke: #4a4f58; }
.s4.is-s3 .s4wire[data-w="ally"] .s4wire__base { stroke: var(--signal); filter: drop-shadow(0 0 5px rgba(63,185,80,.5)); }
.s4.is-s3 .s4wire[data-w="guest"] .s4wire__base { stroke: var(--red); stroke-dasharray: 7 7; filter: drop-shadow(0 0 4px rgba(255,91,82,.35)); }

/* ══════════════  Stop 05 — resident footprint / RAM headroom  ═════════ */

.stop5 {
  position: relative;
  height: 300vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0d10, var(--bg));
}
.stop5__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 30px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
}

.s5toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2);
}
.s5toggle__lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 0 8px; }
.s5toggle button {
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 7px 13px; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.s5toggle button:hover { color: var(--ink); }
.s5toggle button.is-on { color: var(--ink); background: #1b1e24; border-color: var(--steel); }

.ram { width: min(100%, 860px); display: flex; flex-direction: column; gap: 14px; }
.ram__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ram__resident { color: var(--muted); }
.ram__bar {
  position: relative; display: flex; height: clamp(96px, 22vh, 140px);
  border-radius: 12px; overflow: hidden; background: #08090c; border: 1px solid var(--line);
  box-shadow: inset 0 2px 20px rgba(0,0,0,.6);
}
.ramseg {
  height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: width .6s cubic-bezier(.4,0,.2,1), background .4s;
}
.ramseg + .ramseg { box-shadow: inset 1px 0 0 rgba(0,0,0,.5); }
.ramseg b {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(255,255,255,.82); white-space: nowrap; opacity: 0;
  transition: opacity .4s ease .2s;
}
.ram.is-s3 .ramseg--model b,
.ram.is-s3 .ramseg--vdb b,
.ram.is-s3 .ramseg--code b { opacity: 1; }
.ramseg--free b { color: var(--dim); opacity: .7; }
.ramseg--spdb { background: var(--signal); flex: 0 0 auto; min-width: 5px; }
.ram.mode-spdb .ramseg--spdb { width: 1.5%; }
.ram.mode-mem  .ramseg--spdb { width: 56%; background: var(--red); }
.ramseg--model { background: #5b6472; flex: 0 0 auto; width: 0; }
.ramseg--vdb   { background: #474d57; flex: 0 0 auto; width: 0; }
.ramseg--code  { background: #383d46; flex: 0 0 auto; width: 0; }
.ram.is-s3 .ramseg--model { width: 42%; }
.ram.is-s3 .ramseg--vdb   { width: 13%; }
.ram.is-s3 .ramseg--code  { width: 19%; }
.ramseg--free { flex: 1 1 auto; background: repeating-linear-gradient(45deg, #0e0f13 0 8px, #0b0c0f 8px 16px); }
.ram__over {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: #ff9b95; background: rgba(40,12,12,.72); border: 1px solid #6b2420; border-radius: 6px; padding: 4px 9px;
  opacity: 0; transition: opacity .4s;
}
.ram.mode-mem.is-s3 .ram__over { opacity: 1; animation: lampPulse 1.7s ease-in-out infinite; }

.ram__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--muted); }
.lg::before { content: ""; width: 11px; height: 11px; border-radius: 3px; }
.lg--spdb::before  { background: var(--signal); }
.lg--spdb { color: var(--ink); }
.lg--model::before { background: #5b6472; }
.lg--vdb::before   { background: #474d57; }
.lg--code::before  { background: #383d46; }
.lg--free::before  { background: repeating-linear-gradient(45deg, #2a2d33 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--line); }
.ram.mode-mem .lg--spdb::before { background: var(--red); }
.ram.mode-mem .lg--spdb { color: #ff9b95; }
.ram__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--dim); }

/* ══════════════════  Stop 06 — in-browser upload playground  ══════════ */

.stop6 {
  position: relative;
  height: 260vh;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), #0c0d10);
}
.stop6__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vh, 28px);
  padding: 74px clamp(16px, 4vw, 48px) 40px;
  overflow: hidden;
  text-align: center;
}
.try { width: min(100%, 680px); display: flex; flex-direction: column; gap: 16px; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 24px; border: 1.5px dashed var(--steel); border-radius: 14px;
  background: var(--bg-2); cursor: pointer; transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--signal); background: #101418; }
.dropzone__ico { width: 34px; height: 34px; color: var(--muted); transition: color .2s; }
.dropzone:hover .dropzone__ico, .dropzone.is-drag .dropzone__ico { color: var(--signal); }
.dropzone__title { font-size: 15px; color: var(--ink); }
.dropzone__title b { color: var(--signal); font-weight: 700; }
.dropzone__hint { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.dropzone__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--dim); }

/* prominent OR divider between "browse" and the samples */
.try__or { display: flex; align-items: center; gap: 16px; margin: 4px 0; }
.try__or::before, .try__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.try__or span {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--steel); border-radius: 50%;
  background: var(--bg-2);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

.samples { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.samples__lbl {
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.samples__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sample {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px;
  cursor: pointer; transition: color .16s, border-color .16s, background .16s;
}
.sample::before {
  content: ""; width: 9px; height: 11px; border-radius: 1.5px;
  border: 1.5px solid currentColor; opacity: .65;
}
.sample:hover { color: var(--ink); border-color: var(--steel); }
.sample.is-on { color: var(--signal); border-color: var(--signal-lo); background: #0f1512; }

.tryout {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
}
.tryout__state { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.tryout__state b { color: var(--ink); }
.pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
.pipe__step {
  position: relative;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px;
  transition: color .3s ease, border-color .3s ease;
}
.pipe__step:not(:last-child)::after {
  content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--steel);
}
.tryout.is-armed .pipe__step {
  color: var(--signal); border-color: var(--signal-lo);
  transition-delay: calc(var(--i) * 0.12s);
}
.tryout__soon { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: #e6bd52; }

/* ─────────────────────────  responsive tweaks  ───────────────────────── */

/* narrow desktops/tablets: drop the clock and tighten links so all fit */
@media (max-width: 1040px) {
  .nav__clock { display: none; }
  .nav__links { gap: 1px; }
  .nav__links a { padding: 8px 9px; letter-spacing: .07em; }
}

@media (max-width: 720px) {
  .nav__links a:not(:last-child) { display: none; }   /* keep last link only */
  .nav__clock { display: none; }
  .stops { grid-template-columns: 1fr; gap: 14px; }
  .stops::before { display: none; }
  .stop { padding-top: 0; padding-left: 26px; text-align: left; }
  .stop__dot { top: 4px; left: 0; margin-left: 0; }
  .concept__scene { justify-content: flex-start; gap: 20px; padding-top: 84px; }
  .diagram svg { max-height: 46vh; }

  .stop2__scene { justify-content: flex-start; gap: 18px; padding-top: 84px; }
  .s2 { grid-template-columns: minmax(0,1fr) minmax(96px,1fr) minmax(0,1fr); gap: 6px; }
  .s2win__bar span { display: none; }
  .s2win__body { padding: 11px 9px; gap: 10px; }
  .s2agent { font-size: 10px; padding: 4px 8px; }
  .s2pipe { height: 132px; }
  .tok--up   { top: calc(50% - (var(--row) + 1) * 12px); }
  .tok--down { top: calc(50% + (var(--row) + 1) * 12px); }
  .s2toggle button { padding: 6px 9px; font-size: 11px; }
  .s2toggle__lbl { display: none; }

  .stop3__scene { justify-content: flex-start; gap: 18px; padding-top: 84px; }
  .s3 { grid-template-columns: 1fr; gap: 12px; }
  .s3size button { padding: 6px 9px; font-size: 11px; }
  .s3size__lbl { display: none; }

  .stop4__scene { justify-content: flex-start; gap: 16px; padding-top: 84px; }
  .s4 svg { max-height: 48vh; }
  .s4scope-ctl__lbl { display: none; }

  .stop5__scene { justify-content: flex-start; gap: 18px; padding-top: 84px; }
  .ram__bar { height: 40px; }
  .ram__legend { gap: 6px 12px; }
  .s5toggle__lbl { display: none; }
  .stop6__scene { justify-content: flex-start; gap: 16px; padding-top: 84px; }
  .pipe { gap: 14px; }
}

/* very small phones: trim housing padding so the 25-cell row still fits */
@media (max-width: 480px) {
  .board { padding: 8px; }
  .board__rows { padding: 12px 5px; }
}

/* ─────────────────────────  reduced motion  ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flap.is-flipping .flap__fold--top,
  .flap.is-flipping .flap__fold--bottom { animation: none; }
  .wire.is-active .wire__pulse { animation: none; opacity: 0; }
  #diagram.is-powerdown .wire.is-active { animation: none; }
  .board__lamp i,
  .scrollcue__arrow { animation: none; }
  /* Stop 02: no travelling tokens or pulsing badges — show final state only */
  .s2.is-s3 .tok--up   { animation: none; opacity: 1; left: 88%; }
  .s2.is-s3 .tok--down { animation: none; opacity: 1; left: 12%; }
  .s2.is-s3.mode-restrict .tok--up.tok--sensitive   { animation: none; opacity: 1; left: 43%; }
  .s2.is-s3.mode-restrict .tok--down.tok--sensitive { animation: none; opacity: 1; left: 57%; }
  .s2.is-s2 .s2overflow,
  .s2.is-s3 .s2overflow,
  .s2.is-s1 .s2agent__eye { animation: none; }
}