/* ============================================================================
   saul.css — "Saul, out loud" · scroll-driven narrated experience
   Layers on ai-india.css (loaded first): reuses paper/terra/ink tokens,
   Fraunces / Space Grotesk / JetBrains Mono, --e-out easing, .glass/.clay.
   Per-section art direction; identity preserved.
   ========================================================================== */

/* the film hides the normal page chrome; it is a full-bleed sequence */
html.saul { scroll-behavior: auto; }
body.saul {
  overflow-x: clip;
  --stage-pad: clamp(24px, 5vw, 96px);
  --rail-w: 190px;
  --cap-h: 132px;
}
body.saul main { position: relative; z-index: 1; }

/* ------------------------------------------------------------ scroll progress */
.saul-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--terra), var(--terra-deep));
  z-index: var(--z-overlay); pointer-events: none;
}

/* ---------------------------------------------------------------- top bar */
.saul-topbar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 44px);
  pointer-events: none;
}
.saul-topbar > * { pointer-events: auto; }
.saul-mark {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 10px;
}
.saul-mark .sglyph {
  width: 26px; height: 26px; border-radius: 7px; background: var(--terra);
  color: #F4F1EA; display: grid; place-items: center; font-size: 15px; font-weight: 600;
}
.saul-mark span { color: var(--terra); }
.saul-exit {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink2); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: color .25s ease;
}
.saul-exit:hover { color: var(--terra); }

/* ------------------------------------------------------------ beat rail (right) */
.saul-rail {
  position: fixed; top: 50%; right: clamp(14px, 2.4vw, 34px); transform: translateY(-50%);
  z-index: var(--z-nav); display: flex; flex-direction: column; gap: 2px;
  pointer-events: auto;
}
.saul-rail button {
  --dot: 7px;
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  background: none; border: none; cursor: pointer; padding: 7px 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink3); text-align: right;
  transition: color .3s ease;
}
.saul-rail .rlabel {
  opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
}
.saul-rail .rtick {
  width: 22px; height: 1.5px; background: var(--line2); border-radius: 2px;
  transition: width .35s var(--e-out), background .35s ease;
  flex: none;
}
.saul-rail button:hover .rlabel { opacity: 1; transform: none; }
.saul-rail button:hover { color: var(--ink); }
.saul-rail button.active { color: var(--terra); }
.saul-rail button.active .rtick { width: 40px; background: var(--terra); }
.saul-rail button.active .rlabel { opacity: 1; transform: none; }
.saul-rail button.done .rtick { background: color-mix(in srgb, var(--terra) 45%, var(--line2)); }

/* --------------------------------------------------------------- controls (bl) */
.saul-controls {
  position: fixed; left: clamp(20px, 4vw, 44px); bottom: calc(var(--cap-h) - 20px);
  z-index: var(--z-nav); display: flex; gap: 10px; pointer-events: auto;
}
.saul-ctl {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  color: var(--ink); font-size: 15px;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
  transition: transform .3s var(--e-out), color .25s ease, border-color .25s ease;
}
.saul-ctl:hover { transform: translateY(-2px); color: var(--terra); border-color: var(--terra); }
.saul-ctl:active { transform: scale(0.94); }
.enter-btn:active { transform: scale(0.97); }
.saul-ctl[aria-pressed="true"] { color: var(--terra); border-color: var(--terra); }
.saul-ctl svg { width: 18px; height: 18px; display: block; }

/* ------------------------------------------------------------------ captions */
.saul-caption {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: var(--z-nav); width: min(760px, 92vw); min-height: var(--cap-h);
  display: flex; align-items: center; justify-content: center;
  padding: 22px 28px calc(22px + env(safe-area-inset-bottom, 0px));
  text-align: center; pointer-events: none;
  opacity: 1; visibility: visible; transition: opacity .28s var(--e-out), visibility .28s;
}
.saul-caption::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--paper) 6%, color-mix(in srgb, var(--paper) 55%, transparent) 55%, transparent);
}
.saul-caption p {
  margin: 0; font-family: 'Fraunces', serif; font-weight: 400; font-style: italic;
  font-size: clamp(17px, 2.1vw, 23px); line-height: 1.4; color: var(--ink);
  max-width: 40ch; opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
.saul-caption.show p { opacity: 1; transform: none; }
body.captions-off .saul-caption { opacity: 0; visibility: hidden; }

/* =====================================================================  BEATS  */
/* one beat per screen; snap makes each scroll land cleanly on a scene so the
   entrance animation + narration fire together and stay in sync. */
html.saul { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.saul { scroll-snap-type: none; scroll-behavior: auto; } }
.saul-stage { position: relative; z-index: 1; }
.beat { position: relative; min-height: 100svh; scroll-snap-align: center; scroll-snap-stop: always; display: flex; }
.beat-inner {
  position: relative; width: 100%; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(76px, 9vh, 112px) var(--stage-pad) var(--cap-h);
}
.beat-frame {
  position: relative; width: 100%; max-width: 1180px; margin: 0 auto;
}
.beat .kick {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--terra);
  display: block; margin-bottom: 22px;
}
.beat h2.big {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(44px, 8vw, 108px); line-height: .98; letter-spacing: -.03em;
  color: var(--ink); text-wrap: balance; margin: 0;
}
.beat h2.big em { font-style: italic; font-weight: 400; color: var(--terra); }
.beat .sub {
  font-family: 'Fraunces', serif; font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400; color: var(--ink2); line-height: 1.4; margin: 22px 0 0; max-width: 46ch;
}
.beat .foot-note {
  font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(16px, 1.8vw, 20px);
  color: var(--ink); margin-top: 30px;
}
.beat .foot-note b { font-style: normal; font-weight: 600; color: var(--terra); }

/* atmosphere: breathing dawn glow, reused across beats via .glow */
.glow {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--terra) 34%, transparent),
    color-mix(in srgb, var(--terra) 12%, transparent) 42%, transparent 70%);
  filter: blur(8px);
}

/* ---- beat 0 · cold open ---- */
#beat-0 .beat-inner { place-items: stretch; }
.cold {
  position: relative; width: 100%; height: 100%;
  display: grid; place-items: center; text-align: center;
}
.cold .glow { width: 60vmax; height: 60vmax; right: -12vmax; top: 50%; transform: translateY(-50%); }
.cold-stamp {
  position: absolute; top: 4vh; left: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink2);
  display: inline-flex; align-items: center; gap: 14px;
}
.cold-stamp .opens {
  padding: 5px 12px; border-radius: 100px; border: 1px solid var(--line);
  color: var(--terra); display: inline-flex; gap: 8px; align-items: center;
}
.cold-title { position: relative; z-index: 2; }
.cold-title .hi {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--terra); display: block; margin-bottom: 20px;
}
.cold-title h1 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(84px, 20vw, 260px);
  line-height: .9; letter-spacing: -.04em; color: var(--ink); margin: 0;
}
.cold-title h1 .dotmark { color: var(--terra); }
.cold-title .tag {
  margin-top: 20px; font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(18px, 2.4vw, 30px); color: var(--ink2);
}

/* ---- beat 1 · the why (noise → stillness) ---- */
.why-noise { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.why-noise span {
  position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--ink3); white-space: nowrap; opacity: .5;
}
.why-line { position: relative; z-index: 2; text-align: center; }

/* ---- beat 3 · the filter (flow) ---- */
.filter-flow {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2.2vw, 34px); position: relative; z-index: 2; flex-wrap: nowrap;
}
.filter-arrow {
  flex: none; color: var(--terra); font-size: clamp(20px, 2.4vw, 30px); opacity: .55;
  font-family: 'JetBrains Mono', monospace;
}
.filter-cats { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; max-width: 320px; }
.cat-chip {
  background: var(--clay); box-shadow: var(--clay-shadow); border-radius: 14px;
  padding: 15px 18px;
}
.cat-chip .ck {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--terra); display: block;
}
.cat-chip .cv { font-family: 'Fraunces', serif; font-size: 19px; color: var(--ink); margin-top: 4px; }
.filter-node {
  flex: none; text-align: center; border-radius: 18px; padding: 26px 22px;
  background: var(--terra); color: #F4F1EA; box-shadow: var(--lift-shadow); min-width: 180px;
}
.filter-node .q { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.filter-node .qq { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.2; margin-top: 8px; }
.filter-out { flex: none; text-align: center; }
.filter-out .box {
  border: 1.5px solid var(--sage); border-radius: 14px; padding: 20px 22px;
  background: color-mix(in srgb, var(--sage) 9%, transparent);
}
.filter-out .ok { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); display:block; margin-bottom:4px; }
.filter-out .box b { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--ink); }

/* ---- beat 4 · the gauntlet ---- */
.gaunt {
  display: grid; grid-template-columns: 1.35fr .95fr; gap: clamp(18px, 2.6vw, 34px);
  align-items: start; position: relative; z-index: 2;
}
.gaunt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.spec {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--clay); box-shadow: var(--clay-shadow); border-radius: 12px;
  padding: 13px 15px; opacity: .5; transform: translateY(6px);
  transition: opacity .4s var(--e-out), transform .4s var(--e-out), box-shadow .3s ease;
}
.spec.lit { opacity: 1; transform: none; }
.spec .sname { font-family: 'Fraunces', serif; font-size: 16px; color: var(--ink); }
.spec .sname small { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 11px; color: var(--ink3); margin-top: 2px; }
.spec .sscore { display: flex; align-items: center; gap: 10px; }
.spec .num { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.verdict { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; padding: 3px 8px; border-radius: 100px; text-transform: uppercase; }
.verdict.pass { background: color-mix(in srgb, var(--sage) 18%, transparent); color: var(--sage); }
.verdict.flag { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.verdict.kill { background: color-mix(in srgb, var(--ink3) 18%, transparent); color: var(--ink3); }
.gaunt-term {
  background: #14110c; border-radius: 16px; padding: 18px; align-self: stretch;
  font-family: 'JetBrains Mono', monospace; overflow: hidden;
  border: 1px solid rgba(232,99,44,.18);
}
.gaunt-term .th { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #E8632C; display:flex; gap:8px; align-items:center; margin-bottom: 12px; }
.gaunt-term .tl { display: block; font-size: 11.5px; line-height: 1.85; color: #b9b1a3; opacity: 0; }
.gaunt-term .tl.on { opacity: 1; }
.gaunt-term .tl .t { color: #6e675a; padding-right: 8px; }
.gaunt-term .tl .p { color: #8FA77C; }
.gaunt-term .tl .f { color: #C79A3A; }
.gaunt-tally { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.gaunt-tally div { font-family: 'JetBrains Mono', monospace; }
.gaunt-tally b { font-family: 'Fraunces', serif; font-size: 30px; color: #F3EFE7; display: block; line-height: 1; }
.gaunt-tally span { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #8a8377; }

/* ---- beat 5 · the boundary ---- */
.bound {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(16px, 3vw, 46px); position: relative; z-index: 2;
}
.bound-col { text-align: center; }
.bound-col .role { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.bound-col .who { font-family: 'Fraunces', serif; font-size: clamp(26px, 3.4vw, 44px); color: var(--ink); margin-top: 8px; line-height: 1; }
.bound-col.you .who { color: var(--terra); }
.bound-col .desc { font-size: 13.5px; color: var(--ink3); margin-top: 12px; line-height: 1.5; max-width: 24ch; margin-inline: auto; }
.bound-ticket {
  background: var(--clay); box-shadow: var(--lift-shadow); border-radius: 16px;
  padding: 20px 22px; min-width: 210px; text-align: left; position: relative;
}
.bound-ticket .tk { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--terra); }
.bound-ticket .trow { display: flex; justify-content: space-between; gap: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink2); margin-top: 9px; }
.bound-ticket .trow b { color: var(--ink); }
.bound-arrow { color: var(--terra); font-size: 26px; text-align: center; }

/* ---- beat 6 · command center ---- */
.cc {
  display: grid; grid-template-columns: 178px 1fr; border-radius: 18px; overflow: hidden;
  background: var(--clay); box-shadow: var(--lift-shadow); position: relative; z-index: 2;
  min-height: 340px;
}
.cc-side { background: var(--paper2); border-right: 1px solid var(--line); padding: 20px 16px; }
.cc-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.cc-brand .sglyph { width: 30px; height: 30px; border-radius: 8px; background: var(--terra); color: #F4F1EA; display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 600; }
.cc-brand .nm { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1; }
.cc-brand .nm small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .14em; color: var(--ink3); margin-top: 3px; }
.cc-nav { display: flex; flex-direction: column; gap: 3px; }
.cc-nav a { font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: var(--ink2); padding: 9px 11px; border-radius: 8px; display: flex; gap: 9px; align-items: center; text-decoration: none; }
.cc-nav a.on { background: var(--terra-tint2); color: var(--terra); font-weight: 500; }
.cc-nav a .cd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.cc-main { padding: 22px 24px; }
.cc-main h3 { font-family: 'Fraunces', serif; font-weight: 560; font-size: 24px; color: var(--ink); margin: 0 0 16px; }
.cc-table { width: 100%; border-collapse: collapse; }
.cc-table th { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); text-align: left; padding: 0 0 12px; font-weight: 500; }
.cc-table th:last-child, .cc-table td:last-child { text-align: right; }
.cc-table td { padding: 13px 0; border-top: 1px solid var(--line); font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: var(--ink2); }
.cc-table td.sym { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.cc-table td.pos { color: var(--sage); font-variant-numeric: tabular-nums; }
.cc-table td.neg { color: var(--terra); font-variant-numeric: tabular-nums; }
.sig { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; padding: 4px 11px; border-radius: 100px; text-transform: uppercase; }
.sig.go { background: color-mix(in srgb, var(--sage) 20%, transparent); color: var(--sage); }
.sig.watch { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.sig.kill { background: color-mix(in srgb, var(--ink3) 18%, transparent); color: var(--ink3); }
.cc-rows tr { opacity: 0; transform: translateY(8px); }

/* ---- beat 7 · guardrails ---- */
.rails-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); position: relative; z-index: 2; }
.rail-lock {
  background: var(--clay); box-shadow: var(--clay-shadow); border-radius: 18px;
  padding: 30px 26px; position: relative; opacity: 0; transform: translateY(14px);
}
.rail-lock .locked {
  position: absolute; top: 16px; right: 16px; font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage);
  display: inline-flex; align-items: center; gap: 5px;
}
.rail-lock b { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(40px, 5vw, 60px); color: var(--terra); line-height: 1; }
.rail-lock .rl { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 10px; }
.rail-lock p { font-size: 13px; color: var(--ink3); line-height: 1.5; margin: 6px 0 0; }

/* ---- beat 8 · close ---- */
#beat-8 .beat-inner { place-items: center; }
.close-wrap { text-align: center; position: relative; z-index: 2; max-width: min(92vw, 760px); margin-inline: auto; }
.close-wrap .glow { width: 66vmax; height: 66vmax; left: 50%; top: 55%; transform: translate(-50%,-50%); }
.close-wrap h2 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(34px, 5vw, 68px);
  line-height: 1.05; letter-spacing: -.025em; color: var(--ink); text-wrap: balance;
}
.close-wrap h2 em { font-style: italic; color: var(--terra); }
.close-wrap .cl-sub { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(18px, 2.2vw, 26px); color: var(--ink2); margin: 22px auto 0; max-width: 30ch; }
.close-cta { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================ ENTRY OVERLAY */
.saul-enter {
  position: fixed; inset: 0; z-index: 400; background: var(--paper);
  display: grid; place-items: center; text-align: center;
  padding: var(--stage-pad); overflow: hidden;
  transition: opacity .8s var(--e-out), visibility .8s;
}
.saul-enter.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.saul-enter .glow { width: 70vmax; height: 70vmax; left: 55%; top: 50%; transform: translate(-50%,-50%) scale(0.9); opacity: 0; animation: saul-settle 1.4s cubic-bezier(.16,1,.3,1) forwards; }
.enter-inner { position: relative; z-index: 2; max-width: 640px; }
.enter-stamp {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--terra); margin-bottom: 26px;
  display: inline-flex; align-items: center; gap: 12px;
}
.enter-inner h1 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(64px, 16vw, 200px);
  line-height: .88; letter-spacing: -.045em; color: var(--ink); margin: 0;
}
.enter-inner h1 .dotmark { color: var(--terra); }
.enter-inner .lede {
  font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(19px, 2.6vw, 30px);
  color: var(--ink2); line-height: 1.4; margin: 24px auto 0; max-width: 32ch;
}
.enter-btn {
  margin-top: 42px; display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper); border: none; cursor: pointer;
  border-radius: 100px; padding: 19px 34px; font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; font-weight: 500; box-shadow: var(--clay-shadow);
  transition: transform .35s var(--e-out), background .35s ease;
}
.enter-btn:hover { background: var(--terra); transform: translateY(-3px); }
.enter-btn .pl { width: 22px; height: 22px; border-radius: 50%; background: var(--terra); color: #F4F1EA; display: grid; place-items: center; font-size: 10px; transition: background .35s ease; }
.enter-btn:hover .pl { background: #F4F1EA; color: var(--terra); }
.enter-hint {
  margin-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink3);
  display: flex; gap: 8px; align-items: center; justify-content: center;
}
.enter-mute {
  margin-top: 14px; background: none; border: none; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink3); text-decoration: underline; text-underline-offset: 3px;
}
.enter-mute:hover { color: var(--terra); }

.soon-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 8px 16px; border-radius: 100px; border: 1px solid var(--terra);
  background: color-mix(in srgb, var(--terra) 8%, transparent);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--terra);
}
.soon-chip .dot { background: var(--terra); } /* static — no decorative throb */
@keyframes dn-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--terra) 55%, transparent); } 70%,100% { box-shadow: 0 0 0 7px transparent; } }

@keyframes saul-settle {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .saul-rail { display: none; }
  .filter-flow { flex-direction: column; gap: 12px; }
  .filter-arrow { transform: rotate(90deg); }
  .filter-cats { max-width: none; width: 100%; }
  .filter-node, .filter-out { width: 100%; }
  .gaunt { grid-template-columns: 1fr; }
  .gaunt-term { display: none; }
  .bound { grid-template-columns: 1fr; }
  .bound-arrow { transform: rotate(90deg); }
  .cc { grid-template-columns: 1fr; }
  .cc-side { display: none; }
  .rails-3 { grid-template-columns: 1fr; }
  /* Mobile: dense beats (gauntlet, command center) are taller than a phone
     viewport. Drop mandatory snap and let beats grow to fit — normal narrated
     scroll — so nothing clips. Snap stays on desktop. */
  html.saul { scroll-snap-type: none; }
  .beat { scroll-snap-align: none; min-height: auto; }
  .beat-inner { min-height: 100svh; height: auto; overflow: visible; padding-top: 92px; padding-bottom: calc(var(--cap-h) + 24px); }
}
@media (max-width: 560px) {
  .cold-stamp { font-size: 10px; }
  .beat h2.big { font-size: clamp(38px, 12vw, 60px); }
  .gaunt-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .beat { height: auto !important; }
  .beat-inner { position: static; height: auto; min-height: 100svh; }
  .spec, .rail-lock, .cc-rows tr, .why-noise span { opacity: 1 !important; transform: none !important; }
  .gaunt-term .tl { opacity: 1 !important; }
  .saul-caption p { opacity: 1 !important; transform: none !important; }
  .saul-enter .glow { animation: none; }
}