@charset "UTF-8";
/* ==========================================================================
   ALPHARAIL FOUNDRY LABORATORY — Foundry Design System
   v1.0 · Dependency-free. Dark mineral palette, editorial display typography,
   technical instrumentation, calibrated parameter rails, governance ladders.

   Accent semantics are fixed and must not drift:
     cyan    active research, selected controls, live telemetry
     emerald favourable, validated, stable
     amber   provisional, watch, caution
     orange  elevated pressure, compression, throttled state
     red     breach, failure, invalid configuration
     violet  probability, Monte Carlo, simulated distribution
     steel   documentation, inactive, unresolved
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Substrate — never pure black */
  --ink-1000: #04060a;
  --ink-950:  #06090e;
  --ink-900:  #090d13;
  --ink-860:  #0c1118;
  --ink-820:  #10161f;
  --ink-780:  #141b26;
  --ink-740:  #19212d;
  --ink-700:  #1e2734;

  /* Structure */
  --line-faint: rgba(148, 166, 190, 0.09);
  --line:       rgba(148, 166, 190, 0.16);
  --line-strong:rgba(148, 166, 190, 0.28);
  --glass:      rgba(20, 27, 38, 0.62);
  --glass-hi:   rgba(30, 39, 52, 0.72);

  /* Text */
  --bone:   #e9e7e1;
  --bone-2: #cdcfd3;
  --smoke:  #9aa5b4;
  --steel:  #74808f;
  --steel-d:#525d6b;

  /* Accents — each carries a fixed meaning */
  --cyan:    #3ed3ee;   /* active research, live telemetry */
  --cyan-d:  #1d9fb8;
  --emerald: #35c48c;   /* validated / stable */
  --emerald-d:#1f8a61;
  --amber:   #e2a33d;   /* caution / transitional */
  --amber-d: #a8752a;
  --orange:  #d97838;   /* elevated pressure, compression, throttle */
  --orange-d:#a5511f;
  --red:     #e2564c;   /* failure, drawdown, breach */
  --red-d:   #a63a33;
  --violet:  #8d7cf3;   /* simulation, probability, models */
  --violet-d:#5b4dbb;

  /* Type */
  --display: "Instrument Serif", "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Fluid scale — clamp(min, fluid, max) */
  --t-hero:   clamp(2.9rem, 1.6rem + 5.6vw, 8.2rem);
  --t-d1:     clamp(2.3rem, 1.4rem + 3.7vw, 5.4rem);
  --t-d2:     clamp(1.9rem, 1.3rem + 2.5vw, 3.7rem);
  --t-d3:     clamp(1.5rem, 1.15rem + 1.4vw, 2.4rem);
  --t-h4:     clamp(1.12rem, 1rem + 0.5vw, 1.45rem);
  --t-body-l: clamp(1.02rem, 0.97rem + 0.32vw, 1.22rem);
  --t-body:   clamp(0.95rem, 0.92rem + 0.16vw, 1.04rem);
  --t-sm:     0.875rem;
  --t-xs:     0.78rem;
  --t-2xs:    0.695rem;

  /* Rhythm */
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3.25rem);
  --measure: 68ch;
  --shell: 1560px;
  --shell-narrow: 1120px;
  --sec-y: clamp(4.5rem, 2.5rem + 7vw, 11rem);

  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.02, 0.2, 1);
  --dur: 0.62s;

  --shadow-lift: 0 1px 0 rgba(255,255,255,0.045) inset, 0 24px 60px -30px rgba(0,0,0,0.9);
  --header-h: 84px;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}
body {
  background: var(--ink-950);
  color: var(--bone-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
::selection { background: rgba(62, 211, 238, 0.26); color: #fff; }

/* Page substrate: layered atmosphere, never flat black */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(38, 84, 110, 0.30) 0%, transparent 58%),
    radial-gradient(80% 60% at 88% 8%, rgba(90, 74, 170, 0.14) 0%, transparent 60%),
    radial-gradient(90% 70% at 4% 96%, rgba(24, 60, 78, 0.16) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-1000) 0%, var(--ink-950) 42%, var(--ink-900) 100%);
  z-index: -2; pointer-events: none;
}
/* Fine grain so large dark surfaces never band */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display, h1, h2, h3 { font-family: var(--display); font-weight: 400; }
h1, h2, h3, h4, h5, h6 { color: var(--bone); }

.t-hero {
  font-family: var(--display);
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.022em;
  color: var(--bone);
  text-wrap: balance;
}
.t-d1 { font-family: var(--display); font-size: var(--t-d1); line-height: 1.0;  letter-spacing: -0.02em; text-wrap: balance; }
.t-d2 { font-family: var(--display); font-size: var(--t-d2); line-height: 1.06; letter-spacing: -0.016em; text-wrap: balance; }
.t-d3 { font-family: var(--display); font-size: var(--t-d3); line-height: 1.14; letter-spacing: -0.012em; }
.t-h4 {
  font-family: var(--sans); font-size: var(--t-h4); font-weight: 560;
  line-height: 1.3; letter-spacing: -0.008em; color: var(--bone);
}
.lede {
  font-size: var(--t-body-l); line-height: 1.66; color: var(--smoke);
  max-width: var(--measure); font-weight: 380;
}
.prose { max-width: var(--measure); color: var(--smoke); }
.prose p + p { margin-top: 1.05em; }
.prose strong { color: var(--bone); font-weight: 560; }
.prose em { color: var(--bone-2); font-style: italic; }
.dim { color: var(--steel); }
.bright { color: var(--bone); }
.serif { font-family: var(--display); }

/* Technical / monospaced register */
.mono {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.045em;
  font-variant-numeric: tabular-nums;
}
.tag {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--steel);
  display: inline-flex; align-items: center; gap: 0.62em;
}
.tag--cyan { color: var(--cyan); }
.tag--violet { color: var(--violet); }
.tag--amber { color: var(--amber); }
.tag--emerald { color: var(--emerald); }
.tag--red { color: var(--red); }
.tag::before {
  content: ""; width: 15px; height: 1px; background: currentColor; opacity: 0.55;
}
.tag.tag--bare::before { display: none; }

.eyebrow {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--steel);
}
.num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; color: var(--bone);
}
.pull {
  font-family: var(--display);
  font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.55rem);
  line-height: 1.22; color: var(--bone); letter-spacing: -0.014em;
  max-width: 22ch;
}

/* Link registers */
.link {
  color: var(--bone); border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
  padding-bottom: 1px;
}
.link:hover { color: #fff; border-color: var(--cyan); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan);
}
.link-arrow svg, .link-arrow .arw { transition: transform 0.4s var(--ease); }
.link-arrow:hover .arw { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-n { width: 100%; max-width: var(--shell-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 1.8rem + 4vw, 6rem); }
.section--flush-t { padding-top: 0; }
.section--flush-b { padding-bottom: 0; }

.grid { display: grid; gap: clamp(1rem, 0.5rem + 1.6vw, 2.1rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* span-2 exists for the two-column grids, where a figure that needs the full
   width of the row (a percentile fan, a wide waterfall) would otherwise be
   crushed into half of it. The wide-grid spans below start at 3. */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; } .span-12 { grid-column: span 12; }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.sticky { position: sticky; top: calc(var(--header-h) + 26px); }

.rule { height: 1px; background: var(--line); border: 0; }
.rule--glow {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}

/* Section headers: editorial index + headline + note */
.sec-head { display: grid; gap: clamp(1rem, 2vw, 1.8rem); margin-bottom: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); align-items: end; }
}
.sec-head__note { color: var(--steel); font-size: var(--t-sm); max-width: 46ch; }

/* --------------------------------------------------------------------------
   5. SURFACES / PANELS
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  background:
    linear-gradient(168deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 40%),
    var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.panel--solid { background: var(--ink-860); backdrop-filter: none; -webkit-backdrop-filter: none; }
.panel--flat  { background: rgba(12, 17, 24, 0.55); backdrop-filter: none; }
.panel__pad { padding: clamp(1.15rem, 0.75rem + 1.1vw, 2rem); }
.panel__pad-lg { padding: clamp(1.5rem, 0.9rem + 2vw, 3rem); }

/* Corner ticks — instrument-panel detail */
.ticked::before, .ticked::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border-color: var(--line-strong); border-style: solid; border-width: 0;
}
.ticked::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.ticked::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.hairline-t { border-top: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--ink-1000);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.7em; padding: 0.92em 1.6em; min-height: 46px;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
  border-radius: var(--r-sm); border: 1px solid transparent;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
              border-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: linear-gradient(180deg, #f2f0ec 0%, #d9d7d1 100%);
  color: var(--ink-1000); font-weight: 500;
  box-shadow: 0 10px 34px -18px rgba(233, 231, 225, 0.6);
}
.btn--primary:hover { box-shadow: 0 14px 40px -14px rgba(62, 211, 238, 0.42); background: #fff; }
.btn--ghost { border-color: var(--line-strong); color: var(--bone); background: rgba(255,255,255,0.014); }
.btn--ghost:hover { border-color: var(--cyan); color: #fff; background: rgba(62,211,238,0.07); }
.btn--cyan { border-color: rgba(62,211,238,0.4); color: var(--cyan); background: rgba(62,211,238,0.07); }
.btn--cyan:hover { background: rgba(62,211,238,0.14); border-color: var(--cyan); }
.btn--sm { padding: 0.6em 1.05em; min-height: 36px; font-size: var(--t-2xs); }
.btn[disabled] { opacity: 0.42; pointer-events: none; }

/* --------------------------------------------------------------------------
   7. NAVIGATION
   -------------------------------------------------------------------------- */
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  padding: 0.7em 1.1em; background: var(--bone); color: var(--ink-1000);
  border-radius: var(--r-sm); font-family: var(--mono); font-size: var(--t-xs);
  transform: translateY(-160%); transition: transform 0.25s var(--ease);
}
.skip:focus { transform: translateY(0); }

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(6, 9, 14, 0.78);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-bottom-color: var(--line);
}
.hdr__in {
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--header-h); display: flex; align-items: center; gap: 1.6rem;
}
/* The mark and wordmark carry the facility; the attribution line beneath
   carries its provenance. Sized so the hierarchy reads at a glance:
   name, then discipline, then the system it is built around. */
.brand { display: flex; align-items: center; gap: 0.8rem; flex: 0 0 auto; }
/* The mark is a raster cut from the corridor plate, not a square glyph: it is
   wider than it is tall and it carries its own lighting. Height drives it and
   width follows, so the aspect can change without touching this rule. */
.brand__mark {
  height: 38px; width: auto; flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--display); font-size: 1.62rem; letter-spacing: 0.006em; color: var(--bone);
}
.brand__sub {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--steel-d); margin-top: 3px;
}
/* .brand__by — the third line of the header lockup, "presented by the Montex
   Alpha Rail System" — has been retired. The credit now runs full size on the
   facility plate (.mast__presents) instead of in the corner of every page.
   The rule is kept because the footer signature reuses the same treatment for
   the company of record. */
.brand__by {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--steel-d); margin-top: 5px;
  padding-top: 4px; border-top: 1px solid var(--line-faint);
}
.brand__by b { color: var(--cyan); font-weight: 400; letter-spacing: 0.14em; }

@media (max-width: 1100px) {
  .brand__mark { height: 30px; }
  .brand__name { font-size: 1.3rem; }
  .brand__by { display: none; }
}
.nav { display: none; margin-left: auto; align-items: center; gap: 0.05rem; }
@media (min-width: 1080px) { .nav { display: flex; } }
.nav__a {
  position: relative; padding: 0.55rem 0.6rem; font-size: 0.79rem;
  color: var(--smoke); letter-spacing: -0.002em; border-radius: var(--r-sm);
  white-space: nowrap; transition: color 0.3s var(--ease);
}
@media (min-width: 1320px) { .nav__a { padding: 0.55rem 0.78rem; font-size: 0.815rem; } }
.nav__a:hover { color: var(--bone); }
.nav__a::after {
  content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.28rem; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left;
  transition: transform 0.42s var(--ease);
}
.nav__a:hover::after { transform: scaleX(1); }
.nav__a[aria-current="page"] { color: var(--bone); }
.nav__a[aria-current="page"]::after { transform: scaleX(1); background: var(--line-strong); }
.hdr__util { display: none; align-items: center; gap: 0.85rem; margin-left: 0.7rem; padding-left: 1.1rem; border-left: 1px solid var(--line); }
@media (min-width: 1560px) { .hdr__util { display: flex; } }
.util__a { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); white-space: nowrap; transition: color 0.3s var(--ease); }
.util__a:hover { color: var(--cyan); }

.burger {
  margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger span { display: block; width: 17px; height: 1px; background: var(--bone); transition: transform 0.4s var(--ease), opacity 0.3s; }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 119;
  background: rgba(6, 9, 14, 0.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 1.4rem var(--gutter) 3rem; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.02rem 0; border-bottom: 1px solid var(--line-faint);
  font-family: var(--display); font-size: 1.62rem; color: var(--bone); letter-spacing: -0.01em;
}
.drawer__a .mono { color: var(--steel-d); }
.drawer__util { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; margin-top: 1.8rem; }

/* Scroll progress */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 130;
  background: linear-gradient(90deg, var(--cyan-d), var(--cyan));
  width: 0; transition: width 0.12s linear; box-shadow: 0 0 12px rgba(62,211,238,0.55);
}

/* --------------------------------------------------------------------------
   8. STATUS / TELEMETRY
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--smoke);
}
.status__dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
  box-shadow: 0 0 0 0 currentColor;
}
.status--live { color: var(--cyan); }
.status--live .status__dot { animation: pulse-dot 2.6s var(--ease-io) infinite; }
.status--ok { color: var(--emerald); }
.status--warn { color: var(--amber); }
.status--fail { color: var(--red); }
.status--sim { color: var(--violet); }
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(62,211,238,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(62,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,211,238,0); }
}

/* Telemetry strip */
.telemetry {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(9, 13, 19, 0.6); backdrop-filter: blur(10px); overflow: hidden;
}
@media (min-width: 760px) { .telemetry { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.telemetry__cell { padding: 0.95rem 1.15rem; border-right: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); }
@media (min-width: 760px) { .telemetry__cell { border-bottom: 0; } }
.telemetry__cell:last-child { border-right: 0; }
.telemetry__k { display: block; font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel-d); }
.telemetry__v { display: block; font-family: var(--mono); font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.42rem); color: var(--bone); margin-top: 0.32rem; font-variant-numeric: tabular-nums; }

/* Metric block */
.metric { border-top: 1px solid var(--line); padding-top: 0.8rem; }
.metric__k { display: block; font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--steel-d); }
.metric__v { display: block; font-family: var(--mono); font-size: clamp(1.3rem, 1rem + 1.1vw, 2.05rem); color: var(--bone); line-height: 1.1; margin-top: 0.42rem; font-variant-numeric: tabular-nums; }
.metric__n { display: block; font-size: var(--t-xs); color: var(--steel); margin-top: 0.42rem; line-height: 1.5; }
.metric--cyan .metric__v { color: var(--cyan); }
.metric--emerald .metric__v { color: var(--emerald); }
.metric--amber .metric__v { color: var(--amber); }
.metric--red .metric__v { color: var(--red); }
.metric--violet .metric__v { color: var(--violet); }

/* Definition rows */
.dl { display: grid; gap: 0; }
.dl__row {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem; padding: 0.72rem 0; border-bottom: 1px solid var(--line-faint);
  align-items: baseline;
}
.dl__row:first-child { border-top: 1px solid var(--line-faint); }
.dl__k { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--steel-d); }
.dl__v { font-size: var(--t-sm); color: var(--bone-2); font-variant-numeric: tabular-nums; }

/* Simulated-data notice */
.simnote {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--violet);
  border: 1px dashed rgba(141, 124, 243, 0.38); border-radius: var(--r-sm);
  padding: 0.42em 0.8em; background: rgba(141, 124, 243, 0.06);
}
.simnote--block { display: flex; width: fit-content; }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(255,255,255,0.032), rgba(255,255,255,0) 46%), rgba(12, 17, 24, 0.62);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.1rem, 0.7rem + 1vw, 1.75rem);
  overflow: hidden;
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease), background 0.45s var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 260px at var(--mx, 50%) var(--my, 0%), rgba(62,211,238,0.10), transparent 68%);
  transition: opacity 0.5s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card:hover::after { opacity: 1; }
.card__idx { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.16em; color: var(--steel-d); }
.card__title { font-family: var(--display); font-size: var(--t-d3); line-height: 1.12; color: var(--bone); margin-top: 0.5rem; letter-spacing: -0.012em; }
.card__body { font-size: var(--t-sm); color: var(--smoke); margin-top: 0.7rem; }
.card__foot { margin-top: auto; padding-top: 1.15rem; }
.fieldcard__viz { width: 100%; }
.fieldcard__viz .viz { display: block; }
.card--link:hover .arw { transform: translateX(5px); }

/* Accent edge */
.card[data-accent]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--acc, var(--cyan)); opacity: 0.6;
  transform: scaleY(0.18); transform-origin: top;
  transition: transform 0.6s var(--ease), opacity 0.4s;
}
.card[data-accent]:hover::before { transform: scaleY(1); opacity: 1; }
[data-accent="cyan"]    { --acc: var(--cyan); }
[data-accent="emerald"] { --acc: var(--emerald); }
[data-accent="amber"]   { --acc: var(--amber); }
[data-accent="red"]     { --acc: var(--red); }
[data-accent="violet"]  { --acc: var(--violet); }
[data-accent="steel"]   { --acc: var(--steel); }

/* --------------------------------------------------------------------------
   10. FIGURES / VISUALS
   -------------------------------------------------------------------------- */
.figure { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(8, 12, 18, 0.72); overflow: hidden; }
.figure__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--line-faint); background: rgba(255,255,255,0.016);
}
.figure__t { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--smoke); }
.figure__body { padding: 1rem; }
.figure__cap { padding: 0.8rem 1rem; border-top: 1px solid var(--line-faint); font-size: var(--t-xs); color: var(--steel); line-height: 1.55; }
.figure canvas { width: 100%; display: block; }

.viz { width: 100%; display: block; overflow: visible; }
.viz text { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--steel); }
.viz .viz-axis { stroke: var(--line); stroke-width: 1; }
.viz .viz-grid { stroke: var(--line-faint); stroke-width: 1; }
.viz .viz-lbl { fill: var(--steel-d); }
.viz .viz-lbl--em { fill: var(--smoke); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.15rem; margin-top: 0.75rem; }
.legend__i { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.09em; color: var(--steel); text-transform: uppercase; }
.legend__sw { width: 13px; height: 3px; border-radius: 2px; background: currentColor; flex: 0 0 auto; }

.tip {
  position: fixed; z-index: 200; pointer-events: none; opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  background: rgba(10, 14, 21, 0.95); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 0.5rem 0.7rem; min-width: 110px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.95);
  transition: opacity 0.16s var(--ease);
  font-family: var(--mono); font-size: var(--t-2xs); color: var(--bone-2); line-height: 1.55;
}
.tip.is-on { opacity: 1; }
.tip b { color: var(--bone); font-weight: 500; }

.scene { position: relative; width: 100%; overflow: hidden; }
.scene canvas { width: 100%; height: 100%; display: block; }
.scene__fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem;
  background: radial-gradient(70% 60% at 50% 45%, rgba(30,70,92,0.4), transparent 70%), var(--ink-900);
}
.scene[data-ready="1"] .scene__fallback { display: none; }

/* --------------------------------------------------------------------------
   11. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
.hero__canvas canvas { width: 100%; height: 100%; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,6,10,0.82) 0%, rgba(4,6,10,0.12) 24%, rgba(4,6,10,0.22) 56%, rgba(4,6,10,0.88) 100%),
    radial-gradient(74% 58% at 50% 44%, transparent 34%, rgba(4,6,10,0.5) 100%);
}
.hero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 1rem + 6vh, 5rem); }
.hero__grid { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.9fr); align-items: end; } }
.hero__scroll {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero__scroll .bar { width: 1px; height: 34px; background: linear-gradient(180deg, var(--line-strong), transparent); position: relative; overflow: hidden; }
.hero__scroll .bar::after { content: ""; position: absolute; inset: 0; background: var(--cyan); animation: scroll-hint 2.4s var(--ease-io) infinite; }
@keyframes scroll-hint { 0% { transform: translateY(-100%); } 55%,100% { transform: translateY(100%); } }

/* --------------------------------------------------------------------------
   12. CHAMBER JOURNEY
   -------------------------------------------------------------------------- */
.chamber { position: relative; }
.chamber__marker {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--steel-d); margin-bottom: 1.2rem;
}
.chamber__marker .n { color: var(--cyan); }
.chamber__marker .ln { flex: 1; height: 1px; background: var(--line-faint); max-width: 220px; }

/* Door transition between chambers */
.door { position: relative; height: clamp(90px, 12vh, 170px); overflow: hidden; }
.door::before, .door::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--cyan) 50%, var(--line-strong) 80%, transparent);
  opacity: 0.34;
}
.door::before { top: 50%; }
.door__glow {
  position: absolute; left: 50%; top: 50%; width: min(72vw, 900px); height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(62,211,238,0.16), transparent 70%);
  filter: blur(12px);
}

/* Facility rail (left-side chamber indicator) */
.rail {
  position: fixed; left: max(1.1rem, calc((100vw - var(--shell)) / 2 - 34px)); top: 50%;
  transform: translateY(-50%); z-index: 90; display: none; flex-direction: column; gap: 0.72rem;
}
@media (min-width: 1720px) { .rail { display: flex; } }
.rail__i { display: flex; align-items: center; gap: 0.6rem; opacity: 0.42; transition: opacity 0.4s var(--ease); }
.rail__i .d { width: 5px; height: 5px; border: 1px solid var(--steel); border-radius: 50%; transition: all 0.4s var(--ease); }
.rail__i .l {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel); white-space: nowrap; opacity: 0; transform: translateX(-4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.rail__i:hover, .rail__i.is-on { opacity: 1; }
.rail__i.is-on .d { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(62,211,238,0.7); }
.rail__i:hover .l, .rail__i.is-on .l { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   13. PIPELINE / FLOW
   -------------------------------------------------------------------------- */
.flow { display: grid; gap: 1px; background: var(--line-faint); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 720px) { .flow { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1180px) { .flow { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.flow__s {
  position: relative; background: var(--ink-900); padding: 1.05rem 1.15rem 1.2rem;
  transition: background 0.5s var(--ease);
}
.flow__s.is-on { background: var(--ink-820); }
.flow__s .n { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.15em; color: var(--steel-d); }
.flow__s .t { font-size: 0.94rem; color: var(--bone); margin-top: 0.42rem; font-weight: 500; letter-spacing: -0.004em; }
.flow__s .d { font-size: var(--t-xs); color: var(--steel); margin-top: 0.42rem; line-height: 1.55; }
.flow__s .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--cyan); transition: width 1.1s var(--ease); }
.flow__s.is-on .bar { width: 100%; }
.flow__s.is-done .bar { width: 100%; background: var(--emerald); opacity: 0.5; }

/* --------------------------------------------------------------------------
   14. TABS / ACCORDION / FILTERS
   -------------------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; }
.tab {
  padding: 0.5rem 0.85rem; border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--steel); transition: all 0.3s var(--ease);
}
.tab:hover { color: var(--bone); border-color: var(--line); }
.tab[aria-selected="true"] { color: var(--ink-1000); background: var(--bone); border-color: var(--bone); }

.acc { border-top: 1px solid var(--line-faint); }
.acc__b {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; text-align: left; color: var(--bone); font-size: 1.02rem; font-weight: 480;
}
.acc__b .ic { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.acc__b .ic::before, .acc__b .ic::after {
  content: ""; position: absolute; background: var(--steel); transition: transform 0.4s var(--ease), background 0.3s;
}
.acc__b .ic::before { left: 0; right: 0; top: 50%; height: 1px; }
.acc__b .ic::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.acc__b[aria-expanded="true"] .ic::after { transform: scaleY(0); }
.acc__b[aria-expanded="true"] .ic::before { background: var(--cyan); }
.acc__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.acc__p > div { overflow: hidden; }
.acc__b[aria-expanded="true"] + .acc__p,
.acc__p.is-open { grid-template-rows: 1fr; }
.acc__p .inner { padding-bottom: 1.25rem; color: var(--smoke); font-size: var(--t-sm); max-width: var(--measure); }

.filters { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.44em 0.8em; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--steel); transition: all 0.3s var(--ease); white-space: nowrap;
}
.chip:hover { color: var(--bone); border-color: var(--line-strong); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.is-on {
  background: rgba(62,211,238,0.12); border-color: rgba(62,211,238,0.5); color: var(--cyan);
}
.field { display: flex; flex-direction: column; gap: 0.42rem; }
.field label { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-d); }
.input, select.input, textarea.input {
  width: 100%; background: rgba(8,12,18,0.8); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0.72em 0.85em; color: var(--bone);
  font-size: var(--t-sm); transition: border-color 0.3s var(--ease), background 0.3s;
}
.input:focus { border-color: var(--cyan); background: rgba(12,18,26,0.95); }
.input::placeholder { color: var(--steel-d); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
textarea.input { min-height: 128px; resize: vertical; line-height: 1.6; }
.err { color: var(--red); font-size: var(--t-xs); font-family: var(--mono); }
.input[aria-invalid="true"] { border-color: var(--red); }

/* Range control */
.ctrl { display: grid; gap: 0.5rem; }
.ctrl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ctrl__l { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--steel); }
.ctrl__v { font-family: var(--mono); font-size: 0.92rem; color: var(--cyan); font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bone); margin-top: -5.5px; border: 0;
  box-shadow: 0 0 0 4px rgba(62,211,238,0.14); transition: box-shadow 0.3s, background 0.3s;
}
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 4px rgba(62,211,238,0.14); }
input[type="range"]:hover::-webkit-slider-thumb { background: var(--cyan); box-shadow: 0 0 0 6px rgba(62,211,238,0.2); }

/* --------------------------------------------------------------------------
   15. TABLES / ARCHIVE
   -------------------------------------------------------------------------- */
.tbl { width: 100%; font-size: var(--t-sm); }
.tbl th {
  text-align: left; font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--steel-d);
  font-weight: 400; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--line-faint); color: var(--smoke); vertical-align: top; }
.tbl tbody tr { transition: background 0.3s var(--ease); }
.tbl tbody tr:hover { background: rgba(255,255,255,0.022); }
.tbl .c-title { color: var(--bone); font-family: var(--display); font-size: 1.06rem; letter-spacing: -0.008em; }
.tbl .num { font-size: var(--t-xs); }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pub {
  display: grid; gap: 0.35rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line-faint);
  transition: background 0.35s var(--ease); position: relative;
}
@media (min-width: 860px) { .pub { grid-template-columns: 96px minmax(0,1fr) 168px; gap: 1.4rem; align-items: baseline; } }
.pub:hover .pub__t { color: #fff; }
.pub__t { font-family: var(--display); font-size: clamp(1.12rem, 1rem + 0.5vw, 1.42rem); color: var(--bone); line-height: 1.22; letter-spacing: -0.01em; transition: color 0.3s; }
.pub__d { font-size: var(--t-sm); color: var(--steel); margin-top: 0.3rem; max-width: 62ch; }
.pub__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.55rem; }

/* Matrix */
.matrix { display: grid; gap: 1px; background: var(--line-faint); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 640px) { .matrix { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .matrix { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.matrix__c { background: var(--ink-900); padding: 1.05rem 1.1rem 1.15rem; }
.matrix__c .k { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-d); }
.matrix__c .v { font-size: 0.96rem; color: var(--bone); margin-top: 0.5rem; font-weight: 500; }
.matrix__c .s { margin-top: 0.7rem; }
.meter { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.meter__f { height: 100%; width: 0; border-radius: 2px; background: var(--cyan); transition: width 1.2s var(--ease); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); background: rgba(4, 6, 10, 0.7); margin-top: clamp(3rem, 6vw, 7rem); }
.ftr__top { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); display: grid; gap: 2.4rem; }
@media (min-width: 900px) { .ftr__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 3.2rem; } }
/* Six link columns need more of the row than the original four did. */
@media (min-width: 1180px) { .ftr__top { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 2.6rem; } }
.ftr__cols { display: grid; gap: 1.8rem 1.4rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) { .ftr__cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* Six link columns. Below 1180px they wrap to three rows of two rather than
   leaving one orphan column stranded under the others. */
@media (min-width: 1180px) { .ftr__cols { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.ftr__h { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-d); margin-bottom: 0.9rem; }
.ftr__l { display: block; padding: 0.3rem 0; font-size: var(--t-sm); color: var(--smoke); transition: color 0.3s var(--ease); }
.ftr__l:hover { color: var(--cyan); }
/* Company signature. A single hairline band between the link columns and the
   legal text: mark and name on the left, the relationship to the workbook
   product on the right. Two columns from 760px, stacked below it. */
.ftr__sig {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-faint);
  padding-block: 1.6rem;
  display: grid;
  gap: .9rem;
  align-items: center;
}
@media (min-width: 760px) {
  .ftr__sig { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 2rem; }
}
.ftr__sig-mark { display: flex; align-items: center; gap: .85rem; }
/* The logo slot. It holds a drawn mark until a real logo file is present at
   assets/img/aura-logic-systems.png, at which point foundry.js swaps the file
   in — so both a square glyph and a wide lockup have to sit correctly here.
   Height is fixed, width is free, and the box never collapses. */
.ftr__sig-logo {
  display: flex; align-items: center; justify-content: flex-start;
  height: 48px; flex: none;
}
.ftr__sig-svg { width: 40px; height: 40px; flex: none; }
.ftr__sig-img {
  height: 48px; width: auto; max-width: 220px; object-fit: contain;
  display: block;
}
.ftr__sig-mark > span { display: flex; flex-direction: column; gap: .18rem; }
.ftr__sig-k {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--steel);
}
.ftr__sig-v {
  font-family: var(--display); font-size: 1.42rem; line-height: 1.1; color: var(--bone);
}
.ftr__sig-note {
  font-size: var(--t-xs); color: var(--steel); line-height: 1.65; max-width: 74ch;
}
@media (min-width: 760px) { .ftr__sig-note { text-align: right; justify-self: end; } }

.ftr__bot { border-top: 1px solid var(--line-faint); padding-block: 1.5rem 2.5rem; display: grid; gap: 1rem; }
.disclaimer { font-size: var(--t-xs); color: var(--steel-d); line-height: 1.65; max-width: 92ch; }

/* --------------------------------------------------------------------------
   17. MOTION UTILITIES
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-22px); }
[data-reveal="scale"] { transform: scale(0.975); }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }
[data-reveal-delay="6"] { transition-delay: 0.48s; }

/* Typographic entrance: per-line mask reveal */
.rise { display: block; overflow: hidden; }
.rise > span { display: block; transform: translateY(108%); transition: transform 1s var(--ease); }
.is-in .rise > span, .rise.is-in > span { transform: none; }
.rise:nth-child(2) > span { transition-delay: 0.09s; }
.rise:nth-child(3) > span { transition-delay: 0.18s; }

/* Image / figure mask reveal */
.mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease); }
.mask.is-in { clip-path: inset(0 0 0 0); }

/* Draw-on SVG paths */
.draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.8s var(--ease); }
.is-in .draw, .draw.is-in { stroke-dashoffset: 0; }

.float-slow { animation: floaty 9s var(--ease-io) infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Cursor-responsive laboratory lighting (desktop only) */
.lightfield { position: relative; }
.lightfield::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(560px 400px at var(--px, 50%) var(--py, 50%), rgba(62,211,238,0.055), transparent 70%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lightfield:hover::before { opacity: 1; } }
.lightfield > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   18. UTILITIES
   -------------------------------------------------------------------------- */
.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;
}
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.w-measure { max-width: var(--measure); }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.rel { position: relative; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.mt-6 { margin-top: 4rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.gap-1 { --gap: 0.5rem; } .gap-2 { --gap: 1rem; } .gap-3 { --gap: 1.5rem; } .gap-4 { --gap: 2rem; }
.hide { display: none !important; }

/* --------------------------------------------------------------------------
   19. RESPONSIVE COLLAPSE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .span-3, .span-4, .span-5, .span-7, .span-8, .span-9 { grid-column: span 6; }
  .span-2 { grid-column: span 1; }
}
@media (max-width: 860px) {
  :root { --header-h: 60px; }
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .g-12 { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-12 { grid-column: span 6; }
  .span-2 { grid-column: span 1; }
  .dl__row { grid-template-columns: minmax(0, 1fr); gap: 0.22rem; }
  .pull { max-width: none; }
}
@media (max-width: 720px) {
  /* Small screens carry the scene behind more text, so the veil works harder. */
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(4,6,10,0.90) 0%, rgba(4,6,10,0.52) 26%,
                      rgba(4,6,10,0.74) 58%, rgba(4,6,10,0.97) 100%),
      radial-gradient(90% 60% at 50% 40%, transparent 20%, rgba(4,6,10,0.58) 100%);
  }
  .hero__scroll { display: none; }
  .hero__in { padding-block: clamp(2rem, 1rem + 4vh, 3.4rem); }
  .btn { width: 100%; }
  .row > .btn + .btn { margin-top: 0; }
  .figure__body { padding: 0.75rem 0.6rem; }
  .panel__pad, .panel__pad-lg { padding: 1.05rem 1rem; }
}
@media (max-width: 560px) {
  .telemetry { grid-template-columns: minmax(0,1fr); }
  .telemetry__cell { border-right: 0; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 1rem); }
  .full-bleed { width: 100vw; }
}

/* 4K / very large displays: hold the measure, scale the frame */
@media (min-width: 2200px) {
  :root { --shell: 1860px; --shell-narrow: 1280px; }
}

/* --------------------------------------------------------------------------
   20. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .rise > span { transform: none !important; }
  .mask { clip-path: none !important; }
  .draw { stroke-dashoffset: 0 !important; }
}
html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .rise > span { transform: none !important; }
html[data-motion="off"] .mask { clip-path: none !important; }
html[data-motion="off"] .draw { stroke-dashoffset: 0 !important; }

/* --------------------------------------------------------------------------
   21. PRINT
   -------------------------------------------------------------------------- */
@media print {
  body::before, body::after, .hdr, .rail, .progress, .scene, .hero__canvas { display: none !important; }
  body { background: #fff; color: #111; }
  .panel, .card, .figure { border-color: #ccc; background: none; }
  h1, h2, h3, .t-hero, .t-d1, .t-d2, .t-d3 { color: #000; }
}

/* ==========================================================================
   22. ALPHARAIL FOUNDRY — INSTRUMENTATION LAYER
   Components that do not exist in a generic marketing system: calibrated
   parameter rails, governance ladders, branch networks, flow lanes,
   execution quadrants, formula plates, blueprint maps.
   ========================================================================== */

/* ------------------------------------------------------------ 22.1 accents */
.tag--orange { color: var(--orange); }
.tag--steel  { color: var(--steel); }
.status--pressure { color: var(--orange); }
.status--sim .status__dot { animation: pulse-dot 3.4s var(--ease-io) infinite; }
.metric--orange .metric__v { color: var(--orange); }
.btn--amber { border-color: rgba(226,163,61,0.42); color: var(--amber); background: rgba(226,163,61,0.07); }
.btn--amber:hover { background: rgba(226,163,61,0.14); border-color: var(--amber); }

/* Fine mineral grain — sits above flat fills, never above text */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,0.045) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}

/* Etched section divider with an identifier plate */
.etch { display: flex; align-items: center; gap: 1rem; }
.etch__l { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.etch__id {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--steel-d); white-space: nowrap;
}

/* ------------------------------------------------- 22.2 calibrated rails */
/* A parameter control styled as a laboratory rail: etched ticks, a default
   marker, and explicit safe / caution / danger bands drawn into the track. */
.rail-ctrl { display: grid; gap: 0.5rem; padding: 0.9rem 0; border-top: 1px solid var(--line-faint); }
/* Inside the compact output-gallery strip the rail already sits in its own
   cell, so the divider and top padding are removed. */
.sorail .rail-ctrl { border-top: 0; padding-top: 0; }
.rail-ctrl:first-child { border-top: 0; }
.rail-ctrl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.rail-ctrl__lw { display: inline-flex; align-items: baseline; gap: 0.3rem; min-width: 0; }
.rail-ctrl__l {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--smoke); display: inline-flex; align-items: center; gap: 0.4rem;
}

/* ─────────────────────────────────────────────── the rail info marker
   A question mark beside every parameter label. Opens on hover and on focus
   for a pointer or keyboard user, and on tap for a touch user — the tap path
   is why this is a <button> with aria-expanded rather than a CSS-only :hover
   trick, which is simply unreachable on a phone.

   16px of ink inside a 44px hit area, so the marker stays visually quiet on a
   bench of 159 rails without being a target you have to aim at. */
/* A non-interactive replica of the marker, for prose that refers to it. */
.itip-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--cyan);
  color: var(--cyan); font-family: var(--mono); font-size: 10px; line-height: 1;
  vertical-align: 1px;
}
.itip { position: relative; display: inline-flex; flex: 0 0 auto; }
.itip__b {
  appearance: none; background: transparent; border: 1px solid var(--line);
  color: var(--steel-d); width: 16px; height: 16px; border-radius: 50%;
  font-family: var(--mono); font-size: 10px; line-height: 1; cursor: help; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
/* Hit area without layout cost: a pseudo-element, so the 16px circle keeps its
   place in the flex row while the tappable region meets the 44px minimum. */
.itip__b::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
.itip__b:hover, .itip__b:focus-visible, .itip__b[aria-expanded="true"] {
  color: var(--ink-950); border-color: var(--cyan); background: var(--cyan);
}
.itip__b:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.itip__p {
  position: absolute; z-index: 60; top: calc(100% + 9px); left: -10px;
  width: min(23rem, calc(100vw - 2.4rem));
  background: var(--ink-860); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 0.85rem 0.95rem 0.95rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.62), inset 0 1px 0 rgba(148,166,190,.07);
  text-align: left; text-transform: none; letter-spacing: 0; pointer-events: none;
}
/* The arrow tracks the marker via --tip-arrow, which showTip() sets after it
   has clamped the panel into the viewport. Without that the panel slides and
   the arrow stays behind, pointing at nothing. */
.itip__p::before {
  content: ""; position: absolute; top: -5px; left: var(--tip-arrow, 14px);
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--ink-860); border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong); transform: rotate(45deg);
}

.itip__h {
  display: block; font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone); padding-bottom: 0.5rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-faint);
}
.itip__fam { color: var(--steel-d); }
.itip__k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); margin-top: 0.6rem;
}
.itip__k:first-of-type { margin-top: 0; }
.itip__k--warn { color: var(--amber); }
.itip__v {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--bone-2);
  line-height: 1.6; margin-top: 0.22rem; text-transform: none;
}

/* Visibility is driven entirely by the [hidden] attribute, which JS owns. The
   hover path is a pointerenter listener gated on pointerType rather than a
   `(hover: hover)` media query — equivalent for real users, and unlike the
   media query it is verifiable in a headless test. */
.itip[data-open] .itip__p { pointer-events: auto; }

/* Narrow screens: a narrower panel, so the clamp in showTip() has room to
   position it rather than being handed something wider than the viewport. */
@media (max-width: 640px) {
  .itip__p { width: min(20rem, calc(100vw - 1.6rem)); }
}
.rail-ctrl__v {
  font-family: var(--mono); font-size: 0.94rem; color: var(--cyan);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rail-ctrl__v[data-band="caution"] { color: var(--amber); }
.rail-ctrl__v[data-band="danger"]  { color: var(--red); }
.rail-ctrl__track { position: relative; height: 30px; }
.rail-ctrl__bands {
  position: absolute; left: 0; right: 0; top: 12px; height: 6px; border-radius: 3px;
  overflow: hidden; background: var(--ink-780); border: 1px solid var(--line-faint);
}
.rail-ctrl__band { position: absolute; top: 0; bottom: 0; }
.rail-ctrl__band[data-b="safe"]    { background: rgba(53,196,140,0.20); }
.rail-ctrl__band[data-b="caution"] { background: rgba(226,163,61,0.22); }
.rail-ctrl__band[data-b="danger"]  { background: rgba(226,86,76,0.24); }
.rail-ctrl__ticks { position: absolute; left: 0; right: 0; top: 21px; height: 7px; pointer-events: none; }
.rail-ctrl__tick { position: absolute; top: 0; width: 1px; height: 4px; background: var(--line); }
.rail-ctrl__tick--maj { height: 7px; background: var(--line-strong); }
.rail-ctrl__def {
  position: absolute; top: 8px; width: 1px; height: 14px; background: var(--bone-2); opacity: 0.55;
  pointer-events: none;
}
.rail-ctrl__def::after {
  content: "DEF"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.13em; color: var(--steel-d);
}
.rail-ctrl input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 30px; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.rail-ctrl input[type="range"]::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.rail-ctrl input[type="range"]::-moz-range-track { height: 30px; background: transparent; }
.rail-ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 22px; margin-top: 4px;
  border-radius: 2px; background: linear-gradient(180deg, #f2f4f7, #b9c2cd);
  border: 1px solid rgba(4,6,10,0.6); box-shadow: 0 0 0 1px rgba(62,211,238,0.35), 0 6px 16px -6px rgba(0,0,0,0.9);
}
.rail-ctrl input[type="range"]::-moz-range-thumb {
  width: 12px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, #f2f4f7, #b9c2cd);
  border: 1px solid rgba(4,6,10,0.6); box-shadow: 0 0 0 1px rgba(62,211,238,0.35);
}
.rail-ctrl input[type="range"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--r-sm); }
.rail-ctrl__foot { display: flex; justify-content: space-between; gap: 1rem; }
.rail-ctrl__hint { font-size: var(--t-xs); color: var(--steel); line-height: 1.5; max-width: 54ch; }
.rail-ctrl__range { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--steel-d); white-space: nowrap; }

/* Select / toggle controls sharing the rail rhythm */
.rail-sel { display: grid; gap: 0.45rem; padding: 0.9rem 0; border-top: 1px solid var(--line-faint); }
.rail-sel select.input { padding: 0.62rem 0.75rem; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.06em; }
.rail-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 0; border-top: 1px solid var(--line-faint);
}
.switch {
  position: relative; width: 46px; height: 24px; border-radius: 12px; flex: 0 0 auto;
  background: var(--ink-740); border: 1px solid var(--line); transition: all 0.35s var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--steel); transition: all 0.35s var(--ease);
}
.switch[aria-pressed="true"] { background: rgba(62,211,238,0.22); border-color: rgba(62,211,238,0.5); }
.switch[aria-pressed="true"]::after { left: 24px; background: var(--cyan); box-shadow: 0 0 12px rgba(62,211,238,0.6); }

/* Preset bar */
.presets { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* -------------------------------------------------- 22.3 readouts / score */
.readout { display: grid; gap: 1px; background: var(--line-faint); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.readout__c { background: var(--ink-900); padding: 0.9rem 1rem 1rem; position: relative; }
.readout__k, .readout__v, .readout__n { display: block; }
.readout__k { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-d); }
.readout__v {
  font-family: var(--mono); font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.62rem); color: var(--bone);
  margin-top: 0.34rem; line-height: 1.05; font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}
.readout__n { font-size: var(--t-xs); color: var(--steel); margin-top: 0.35rem; line-height: 1.45; }
.readout__c[data-tone="good"] .readout__v { color: var(--emerald); }
.readout__c[data-tone="warn"] .readout__v { color: var(--amber); }
.readout__c[data-tone="press"] .readout__v { color: var(--orange); }
.readout__c[data-tone="bad"]  .readout__v { color: var(--red); }
.readout__c[data-tone="prob"] .readout__v { color: var(--violet); }
.readout__c.is-flash::before {
  content: ""; position: absolute; inset: 0; background: rgba(62,211,238,0.09); animation: flash 0.6s var(--ease) forwards;
  pointer-events: none;
}
@keyframes flash { to { opacity: 0; } }

.score {
  display: grid; gap: 1.1rem; align-items: center;
  grid-template-columns: minmax(0, 128px) minmax(0, 1fr);
}
.score__dial { position: relative; width: 128px; height: 128px; }
.score__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score__num {
  position: absolute; inset: 0; display: grid; place-items: center; line-height: 1;
  font-family: var(--mono); font-size: 2.1rem; color: var(--bone); font-variant-numeric: tabular-nums;
}
.score__grade { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.2em; text-transform: uppercase; }
.score__state { font-family: var(--display); font-size: var(--t-d3); color: var(--bone); line-height: 1.1; margin-top: 0.3rem; }
.score__read { font-size: var(--t-sm); color: var(--smoke); margin-top: 0.6rem; }

/* Component bars for the score breakdown */
.bars { display: grid; gap: 0.62rem; }
.bars__r { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 0.7rem; align-items: center; }
.bars__k { display: block; font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
.bars__t { display: block; height: 4px; background: var(--ink-780); border-radius: 2px; overflow: hidden; margin-top: 0.32rem; }
.bars__f { height: 100%; width: 0; background: var(--cyan); border-radius: 2px; transition: width 0.6s var(--ease), background 0.4s; }
.bars__v { font-family: var(--mono); font-size: var(--t-xs); color: var(--bone-2); text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- 22.4 governance ladders */
.ladder { display: grid; gap: 1px; background: var(--line-faint); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ladder__r {
  display: grid; gap: 0.35rem 1rem; background: var(--ink-900); padding: 0.85rem 1rem;
  grid-template-columns: minmax(0, 1fr); position: relative; transition: background 0.35s var(--ease);
}
.ladder__r::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--steel-d); }
.ladder__r[data-tone="ok"]::before      { background: var(--emerald); }
.ladder__r[data-tone="watch"]::before   { background: var(--amber); }
.ladder__r[data-tone="press"]::before   { background: var(--orange); }
.ladder__r[data-tone="fail"]::before    { background: var(--red); }
.ladder__r[data-tone="prob"]::before    { background: var(--violet); }
.ladder__r.is-on { background: var(--ink-820); }
.ladder__n { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.16em; color: var(--steel-d); }
.ladder__t { color: var(--bone); font-weight: 500; font-size: 0.98rem; line-height: 1.35; }
.ladder__d { font-size: var(--t-sm); color: var(--smoke); line-height: 1.65; }
.ladder__m { font-family: var(--mono); font-size: var(--t-xs); color: var(--steel); font-variant-numeric: tabular-nums; line-height: 1.55; }

/* Authority stack — each layer visually caps the one beneath it */
.authority { display: grid; gap: 0.4rem; }
.auth__l {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(20,27,38,0.9), rgba(9,13,19,0.55));
  padding: 0.8rem 1rem; display: grid; gap: 0.3rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.auth__l:hover, .auth__l.is-on { border-color: var(--line-strong); transform: translateX(4px); }
.auth__l[data-rank="1"] { margin-right: 0; }
.auth__l[data-rank="2"] { margin-right: 2%; }
.auth__l[data-rank="3"] { margin-right: 4%; }
.auth__l[data-rank="4"] { margin-right: 6%; }
.auth__l[data-rank="5"] { margin-right: 8%; }
.auth__l[data-rank="6"] { margin-right: 10%; }
.auth__l[data-rank="7"] { margin-right: 12%; }
.auth__h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; }
.auth__t { color: var(--bone); font-weight: 500; }
.auth__r { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.16em; color: var(--cyan); }
.auth__d { font-size: var(--t-sm); color: var(--smoke); }

/* Tier strip — T1..T7 with a live cap marker */
.tiers { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 3px; }
.tier {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.55rem 0.4rem;
  text-align: center; background: var(--ink-860); transition: all 0.35s var(--ease);
}
.tier__n { font-family: var(--mono); font-size: var(--t-xs); color: var(--steel); letter-spacing: 0.08em; }
.tier__l { font-size: 0.62rem; color: var(--steel-d); margin-top: 0.2rem; letter-spacing: 0.04em; }
.tier.is-allowed { border-color: rgba(53,196,140,0.4); background: rgba(53,196,140,0.08); }
.tier.is-allowed .tier__n { color: var(--emerald); }
.tier.is-capped { opacity: 0.35; }
.tier.is-current { border-color: var(--cyan); background: rgba(62,211,238,0.12); box-shadow: 0 0 0 1px rgba(62,211,238,0.25); }
.tier.is-current .tier__n { color: var(--cyan); }

/* ------------------------------------------------ 22.5 branch / flow maps */
.branchnet { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
.branchsel { display: grid; gap: 0.4rem; }
.branchsel__b {
  display: grid; gap: 0.22rem; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.72rem 0.85rem;
  background: rgba(12,17,24,0.55); transition: all 0.32s var(--ease); position: relative; overflow: hidden;
}
.branchsel__b::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--steel-d); transition: background 0.32s; }
.branchsel__b[data-accent="cyan"]::before    { background: var(--cyan); }
.branchsel__b[data-accent="emerald"]::before { background: var(--emerald); }
.branchsel__b[data-accent="amber"]::before   { background: var(--amber); }
.branchsel__b[data-accent="violet"]::before  { background: var(--violet); }
.branchsel__b[data-accent="orange"]::before  { background: var(--orange); }
.branchsel__b:hover { border-color: var(--line-strong); background: rgba(20,27,38,0.7); }
.branchsel__b[aria-pressed="true"] { border-color: var(--cyan); background: rgba(62,211,238,0.09); }
.branchsel__id { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.14em; color: var(--steel-d); }
.branchsel__t { color: var(--bone); font-weight: 500; font-size: 0.96rem; }
.branchsel__s { font-size: var(--t-xs); color: var(--steel); }

/* Trade-flow lanes: each lane is a branch slot, each block a trade */
.lanes { display: grid; gap: 6px; }
.lane { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 0.7rem; align-items: center; }
.lane__k { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; color: var(--steel-d); text-transform: uppercase; }
.lane__t { position: relative; height: 24px; background: var(--ink-860); border: 1px solid var(--line-faint); border-radius: var(--r-sm); overflow: hidden; }
.lane__b {
  position: absolute; top: 3px; bottom: 3px; border-radius: 2px; background: rgba(62,211,238,0.3);
  border: 1px solid rgba(62,211,238,0.55); transition: all 0.5s var(--ease);
}
.lane__b[data-s="win"]  { background: rgba(53,196,140,0.28); border-color: rgba(53,196,140,0.6); }
.lane__b[data-s="loss"] { background: rgba(226,86,76,0.26); border-color: rgba(226,86,76,0.55); }
.lane__b[data-s="open"] { background: rgba(141,124,243,0.24); border-color: rgba(141,124,243,0.5); }
.lane__b[data-s="blocked"] { background: repeating-linear-gradient(45deg, rgba(116,128,143,0.2) 0 4px, transparent 4px 8px); border-color: var(--line-strong); }
.lane__cyc { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }

/* Axis and key. A four-row occupancy chart with no axis and no legend is a
   picture of something, and the reader has no way to find out what. */
.lane--head, .lane--legend { align-items: start; }
.lane__axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--steel-d);
  padding: 0 .2rem .3rem;
  border-bottom: 1px solid var(--line-faint);
}
.lane__keys { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding-top: .45rem; }
.lane__key {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .06em; color: var(--steel);
}
.lane__key::before {
  content: ""; width: 16px; height: 10px; border-radius: 2px; flex: none;
  background: rgba(62,211,238,0.3); border: 1px solid rgba(62,211,238,0.55);
}
.lane__key[data-s="win"]::before  { background: rgba(53,196,140,0.28); border-color: rgba(53,196,140,0.6); }
.lane__key[data-s="loss"]::before { background: rgba(226,86,76,0.26); border-color: rgba(226,86,76,0.55); }
.lane__key[data-s="open"]::before { background: rgba(141,124,243,0.24); border-color: rgba(141,124,243,0.5); }
.lane__key[data-s="idle"]::before { background: var(--ink-860); border: 1px solid var(--line-faint); }
.lane__key[data-s="cyc"]::before  { width: 2px; background: var(--line-strong); border: 0; height: 14px; }

/* Capacity bar — authorised pool vs consumed vs remaining */
.capacity { height: 26px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--ink-860); display: flex; overflow: hidden; }
.capacity__s { height: 100%; transition: width 0.55s var(--ease); position: relative; }
.capacity__s[data-s="open"]   { background: rgba(141,124,243,0.35); }
.capacity__s[data-s="fresh"]  { background: rgba(62,211,238,0.32); }
.capacity__s[data-s="idle"]   { background: repeating-linear-gradient(45deg, rgba(116,128,143,0.14) 0 5px, transparent 5px 10px); }
.capacity__s[data-s="over"]   { background: rgba(226,86,76,0.4); }

/* ------------------------------------------------- 22.6 execution quadrants */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line-faint); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.quad__c { background: var(--ink-900); padding: 1rem 1.05rem 1.1rem; display: grid; gap: 0.4rem; align-content: start; }
.quad__t { font-family: var(--display); font-size: 1.16rem; color: var(--bone); letter-spacing: -0.008em; }
.quad__d { font-size: var(--t-sm); color: var(--smoke); }
.quad__m { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; color: var(--steel-d); }
.quad__c[data-tone="good"] .quad__t { color: var(--emerald); }
.quad__c[data-tone="warn"] .quad__t { color: var(--amber); }
.quad__c[data-tone="press"] .quad__t { color: var(--orange); }
.quad__c[data-tone="bad"] .quad__t { color: var(--red); }

/* ------------------------------------------------------- 22.7 formula plate */
.formula {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(16,22,31,0.9), rgba(6,9,14,0.85)),
    repeating-linear-gradient(0deg, rgba(148,166,190,0.045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(148,166,190,0.045) 0 1px, transparent 1px 26px);
  padding: 1.05rem 1.15rem; overflow-x: auto;
}
.formula__e {
  font-family: var(--mono); font-size: clamp(0.86rem, 0.8rem + 0.3vw, 1.02rem); color: var(--bone);
  letter-spacing: 0.01em; white-space: nowrap; line-height: 1.9;
}
.formula__e .op { color: var(--steel); }
.formula__e .var { color: var(--cyan); }
.formula__e .con { color: var(--violet); }
.formula__n { font-size: var(--t-xs); color: var(--steel); margin-top: 0.7rem; line-height: 1.6; white-space: normal; }

/* Definition rows for metric anatomy */
.defs { display: grid; gap: 0; }
.defs__r { display: grid; gap: 0.3rem 1.4rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-faint); }
.defs__k { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--cyan); }
.defs__v { font-size: var(--t-sm); color: var(--smoke); }
/* A denser variant for a sidebar list, where the definition rows are short
   value lists rather than paragraphs. */
.defs--tight .defs__r { padding: .55rem 0; gap: .25rem .9rem; }
.defs--tight .defs__v { font-size: var(--t-xs); line-height: 1.6; }
.defs--tight .defs__r:last-child { border-bottom: 0; }

/* -------------------------------------------------------- 22.8 callouts */
.callout {
  border: 1px solid var(--line); border-left-width: 2px; border-radius: var(--r-sm);
  padding: 0.95rem 1.1rem; background: rgba(12,17,24,0.6); display: grid; gap: 0.4rem;
}
.callout__h { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase; }
.callout__b { font-size: var(--t-sm); color: var(--smoke); }
.callout[data-tone="note"]  { border-left-color: var(--cyan); }
.callout[data-tone="note"] .callout__h { color: var(--cyan); }
.callout[data-tone="warn"]  { border-left-color: var(--amber); }
.callout[data-tone="warn"] .callout__h { color: var(--amber); }
.callout[data-tone="limit"] { border-left-color: var(--orange); }
.callout[data-tone="limit"] .callout__h { color: var(--orange); }
.callout[data-tone="fail"]  { border-left-color: var(--red); }
.callout[data-tone="fail"] .callout__h { color: var(--red); }
.callout[data-tone="sim"]   { border-left-color: var(--violet); }
.callout[data-tone="sim"] .callout__h { color: var(--violet); }
.callout[data-tone="ok"]    { border-left-color: var(--emerald); }
.callout[data-tone="ok"] .callout__h { color: var(--emerald); }

/* Functionality level markers — L1 built, L2 preview, L3 future */
.lvl {
  display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--mono);
  font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.24em 0.7em; white-space: nowrap;
}
.lvl[data-l="1"] { color: var(--emerald); border-color: rgba(53,196,140,0.35); }
.lvl[data-l="2"] { color: var(--amber);   border-color: rgba(226,163,61,0.35); }
.lvl[data-l="3"] { color: var(--steel);   border-color: var(--line); }
.lvl::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------- 22.9 blueprint map */
.blueprint {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(62,211,238,0.055), transparent 60%),
    repeating-linear-gradient(0deg, rgba(148,166,190,0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(148,166,190,0.05) 0 1px, transparent 1px 30px),
    var(--ink-950);
}
.blueprint__grid { display: grid; gap: 1px; background: var(--line-faint); }
.bpstage { background: rgba(6,9,14,0.82); padding: 1.15rem 1.15rem 1.3rem; display: grid; gap: 0.55rem; align-content: start; }
.bpstage__n { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.2em; color: var(--cyan); }
.bpstage__t { font-family: var(--display); font-size: var(--t-d3); color: var(--bone); line-height: 1.1; }
.bpstage__d { font-size: var(--t-sm); color: var(--smoke); }
.bpstage__m { display: grid; gap: 0.3rem; margin-top: 0.3rem; }
.bpstage__i {
  display: flex; align-items: center; gap: 0.55rem; font-size: var(--t-xs); color: var(--steel);
  padding: 0.32rem 0; border-top: 1px solid var(--line-faint);
}
.bpstage__i::before { content: ""; width: 4px; height: 4px; background: var(--steel-d); flex: 0 0 auto; }
.bpstage__i .lvl { margin-left: auto; }

/* -------------------------------------------------------- 22.10 pricing */
.plan { display: grid; gap: 0.9rem; align-content: start; height: 100%; }
.plan__h { display: grid; gap: 0.35rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.plan__n { font-family: var(--display); font-size: var(--t-d3); color: var(--bone); }
.plan__p { font-family: var(--mono); font-size: 1.05rem; color: var(--cyan); }
.plan__f { display: grid; gap: 0.42rem; }
.plan__i { display: flex; gap: 0.6rem; font-size: var(--t-sm); color: var(--smoke); }
.plan__i::before { content: "▸"; color: var(--steel-d); flex: 0 0 auto; }
.panel--featured { border-color: rgba(62,211,238,0.32); box-shadow: 0 0 0 1px rgba(62,211,238,0.1), var(--shadow-lift); }

/* ------------------------------------------------------ 22.11 record head */
.rec { display: grid; gap: 1rem; }
.rec__meta { display: flex; flex-wrap: wrap; gap: 0.45rem 1.15rem; }
.rec__m { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-d); }
.rec__m b { color: var(--bone-2); font-weight: 400; }

/* Contents rail */
.toc { display: grid; gap: 0.1rem; }
.toc__a {
  display: block; padding: 0.42rem 0 0.42rem 0.85rem; border-left: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--steel); transition: all 0.3s var(--ease);
}
.toc__a:hover, .toc__a.is-on { color: var(--bone); border-left-color: var(--cyan); }

/* Comparison table emphasis */
.tbl td.pos { color: var(--emerald); }
.tbl td.neg { color: var(--red); }
.tbl td.warn { color: var(--amber); }
.tbl td.press { color: var(--orange); }
.tbl .mono { font-variant-numeric: tabular-nums; }
.tbl--dense td, .tbl--dense th { padding: 0.6rem 0.7rem; font-size: var(--t-xs); }

/* Small stat pills used inside prose */
.pill {
  display: inline-flex; align-items: baseline; gap: 0.4em; font-family: var(--mono);
  font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0.2em 0.55em; color: var(--steel);
}

/* Journey door variant with an orange threshold for pressure chambers */
.door--press .door__glow { background: radial-gradient(50% 100% at 50% 50%, rgba(217,120,56,0.28), transparent 70%); }
.door--prob .door__glow  { background: radial-gradient(50% 100% at 50% 50%, rgba(141,124,243,0.26), transparent 70%); }

/* ------------------------------------------------------ 22.12 responsive */
@media (min-width: 620px) {
  .readout--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .readout--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .defs__r { grid-template-columns: 190px minmax(0,1fr); }
  /* Four children, three columns: the description was landing in the third
     column and starving the title, which then wrapped one word per line and
     collided with the text beside it. Explicit areas fix the assignment —
     identifier and weight stack on the left, title and body on the right. */
  .ladder__r {
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-areas:
      "n t"
      "m d";
    align-items: start;
    column-gap: 1.15rem;
  }
  .ladder__n { grid-area: n; }
  .ladder__t { grid-area: t; }
  .ladder__d { grid-area: d; }
  .ladder__m { grid-area: m; }
}
@media (min-width: 900px) {
  .readout--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .readout--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .blueprint__grid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .blueprint__grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .branchnet { grid-template-columns: 268px minmax(0,1fr); }
}
@media (max-width: 619px) {
  .quad { grid-template-columns: minmax(0,1fr); }
  .tiers { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lane { grid-template-columns: 62px minmax(0,1fr); }
  .score { grid-template-columns: minmax(0,1fr); justify-items: start; }
  .auth__l[data-rank] { margin-right: 0; }
}

/* ------------------------------------------------------ 22.13 reduced motion */
@media (prefers-reduced-motion: reduce) {
  .capacity__s, .bars__f, .lane__b, .readout__v { transition: none !important; }
}
[data-motion="off"] .readout__c.is-flash::before { display: none; }

/* Filtered-out records must disappear regardless of the component display mode */
[hidden] { display: none !important; }

/* Bar fills are authored as spans; without a block box their width never applies */
.bars__f { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   FACILITY PLATE — Montex Alpha Rail System bench rendering
   A framed, scan-lined plate that reads as an archival facility photograph
   rather than a marketing image. Corner ticks and a stamped rule echo the
   panel language used across the rest of the foundry.
   ═══════════════════════════════════════════════════════════════════════ */
.plate { position: relative; }
.plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(62,211,238,.055), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(62,211,238,.03), transparent 70%);
}
.plate__head { position: relative; }

.plate__figure { margin: 0; position: relative; }

.plate__frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #05080c;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.014) inset,
    0 30px 90px -30px rgba(0,0,0,.9),
    0 0 120px -50px rgba(62,211,238,.35);
}
.plate__frame img {
  display: block; width: 100%; height: auto;
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.001);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.plate__frame:hover img { transform: scale(1.022); filter: saturate(1.1) contrast(1.05); }

/* Faint horizontal scan grid so the image sits inside the instrument language */
.plate__scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, rgba(6,9,14,.34) 0%, transparent 22%, transparent 74%, rgba(6,9,14,.62) 100%);
  mix-blend-mode: normal;
}

/* Registration ticks at each corner */
.plate__corner { position: absolute; width: 18px; height: 18px; pointer-events: none; opacity: .75; }
.plate__corner--tl { top: 10px;    left: 10px;    border-top: 1px solid var(--cyan);    border-left: 1px solid var(--cyan); }
.plate__corner--tr { top: 10px;    right: 10px;   border-top: 1px solid var(--cyan);    border-right: 1px solid var(--cyan); }
.plate__corner--bl { bottom: 10px; left: 10px;    border-bottom: 1px solid var(--cyan); border-left: 1px solid var(--cyan); }
.plate__corner--br { bottom: 10px; right: 10px;   border-bottom: 1px solid var(--cyan); border-right: 1px solid var(--cyan); }

.plate__stamp {
  position: absolute; left: 18px; bottom: 16px;
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(232,238,245,.72);
  padding: .34rem .6rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px;
  background: rgba(6,9,14,.55);
  backdrop-filter: blur(6px);
}

.plate__cap {
  margin-top: .85rem;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-d); line-height: 1.7;
}

.plate__grid {
  gap: 1px; background: var(--line-faint);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}

@media (max-width: 860px) {
  .plate__stamp { left: 12px; bottom: 12px; font-size: .52rem; letter-spacing: .18em; }
  .plate__corner { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .plate__frame img { transition: none; }
  .plate__frame:hover img { transform: none; }
}
[data-motion="off"] .plate__frame img { transition: none; }
[data-motion="off"] .plate__frame:hover img { transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   PARAMETER CATALOGUE (Phase 2)
   A control set this size needs its own navigation furniture: a search and
   mode bar, subgroup headings inside each tab, per-control provenance, and a
   clear inert state for rails whose precondition is not currently met.
   ═══════════════════════════════════════════════════════════════════════ */
.railbar {
  display: flex; flex-direction: column; gap: .55rem;
  padding: .7rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.014);
}
.railbar__search { display: flex; gap: .45rem; align-items: center; }
.railbar__search .input { flex: 1 1 auto; min-width: 0; }
.railbar__modes { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.railbar__count {
  margin-left: auto; font-size: var(--t-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-d);
}
.chip--sm { font-size: var(--t-2xs); padding: .3rem .6rem; }
.chip[aria-pressed="true"] {
  border-color: var(--cyan);
  color: var(--ink);
  background: rgba(62,211,238,.10);
}

/* Group tabs carry a live count so the size of each group is legible. */
.tab__n {
  display: inline-block; margin-left: .38rem; padding: 0 .32rem;
  font-family: var(--mono); font-size: .58rem; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--steel-d); vertical-align: middle;
}
.tab[aria-selected="true"] .tab__n { border-color: var(--cyan); color: var(--cyan); }

/* Subgroup sections inside a tab. */
.railsub { margin-top: 1.15rem; }
.railsub:first-child { margin-top: .35rem; }
.railsub__h {
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--line-faint);
  color: var(--steel);
}
.railwrap { padding-top: .8rem; }
.railwrap[hidden] { display: none !important; }

/* Provenance line beneath each rail. */
.rail-meta {
  margin: .3rem 0 0; font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel-d); line-height: 1.5;
}
.rail-meta__drives { color: var(--steel-d); }
.rail-meta__sep { margin: 0 .4rem; opacity: .55; }
.rail-meta__demo { color: var(--amber); }

/* A rail whose precondition is unmet stays visible and states why. */
.railwrap.is-inert { opacity: .48; }
.railwrap.is-inert .rail-ctrl__track { filter: grayscale(1); }
.rail-inert {
  margin: .3rem 0 0; font-size: .58rem; letter-spacing: .06em;
  color: var(--amber); line-height: 1.5;
}
.railcount { font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; }

@media (min-width: 720px) {
  .railbar { flex-direction: row; align-items: center; }
  .railbar__search { flex: 1 1 auto; }
  .railbar__modes { flex: 0 0 auto; }
  .railbar__count { margin-left: .5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION MENUS
   Each primary navigation item opens a panel describing what the section
   contains. Hover for pointers, an explicit toggle for keyboard and touch —
   both end in the same state, and only one panel is open at a time.
   ═══════════════════════════════════════════════════════════════════════ */
.nav__item { position: relative; display: inline-flex; align-items: center; gap: .12rem; }
.nav__more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; margin-left: -.1rem;
  background: none; border: 0; cursor: pointer; color: var(--steel-d);
  transition: color .25s var(--ease), transform .3s var(--ease);
}
.nav__more span {
  width: 5px; height: 5px; border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor; transform: translateY(-1.5px) rotate(45deg);
}
.nav__item:hover .nav__more,
.nav__item.is-open .nav__more,
.nav__more:focus-visible { color: var(--cyan); }
.nav__item.is-open .nav__more { transform: rotate(-180deg); }

.navmenu {
  position: absolute; top: calc(100% + .55rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(21rem, 88vw); padding: .85rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(9, 13, 19, .93);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.02) inset;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .22s;
}
.navmenu::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px;
  margin-left: -4.5px; transform: rotate(45deg);
  background: rgba(9,13,19,.93);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.nav__item:hover .navmenu,
.nav__item:focus-within .navmenu,
.nav__item.is-open .navmenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.navmenu__lead {
  margin: 0 0 .5rem; padding-bottom: .45rem;
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel-d); border-bottom: 1px solid var(--line-faint);
}
.navmenu__a {
  display: block; padding: .48rem .55rem; margin: 0 -.2rem;
  border-radius: var(--r-sm); text-decoration: none;
  border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.navmenu__a:hover, .navmenu__a:focus-visible {
  background: rgba(62,211,238,.07); border-color: rgba(62,211,238,.22);
}
.navmenu__a[aria-current="page"] { background: rgba(62,211,238,.10); border-color: rgba(62,211,238,.30); }
.navmenu__t { display: block; font-size: var(--t-sm); color: var(--ink); line-height: 1.35; }
.navmenu__d {
  display: block; margin-top: .12rem; font-size: var(--t-2xs);
  color: var(--steel-d); line-height: 1.5;
}

/* Drawer mirrors the same descriptions on small screens. */
.drawer__sub { margin: -.2rem 0 .5rem; padding-left: .9rem; border-left: 1px solid var(--line-faint); }
.drawer__suba {
  display: block; padding: .4rem 0; text-decoration: none;
  font-size: var(--t-sm); color: var(--steel);
}
.drawer__suba:hover, .drawer__suba:focus-visible { color: var(--cyan); }
.drawer__suba[aria-current="page"] { color: var(--cyan); }
.drawer__subd { display: block; font-size: var(--t-2xs); color: var(--steel-d); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .navmenu { transition: opacity .01s, visibility .01s; }
  .nav__item.is-open .nav__more { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   OFF-SCREEN WORK
   These pages are long. Letting the browser skip layout, paint and style
   work for sections that are nowhere near the viewport is the single
   cheapest scrolling improvement available, and it costs nothing visually.
   `contain-intrinsic-size` supplies a placeholder height so the scrollbar
   does not jump as sections are realised.
   ═══════════════════════════════════════════════════════════════════════ */
@supports (content-visibility: auto) {
  .section:not(.hero):not(.plate),
  .chamber:not(.hero) {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
  /* Anything that must be measurable for in-page anchors or sticky rails
     stays fully realised. */
  .section[data-toc-label] > .shell > .sec-head { content-visibility: visible; }
}

/* Canvas scenes are decorative; never let them capture pointer work. */
.scene canvas { pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════
   SELECTION FEEDBACK
   A selector button must look selected. Without this, a control that works
   perfectly still reads as broken, because the only evidence that it fired
   is a figure the visitor may not be looking at.
   ═══════════════════════════════════════════════════════════════════════ */
.btn[aria-pressed="true"],
.chip[aria-pressed="true"] {
  border-color: var(--cyan);
  color: var(--ink);
  background: rgba(62, 211, 238, .12);
  box-shadow: 0 0 0 1px rgba(62,211,238,.18) inset, 0 0 22px -12px var(--cyan);
}
.btn[aria-pressed="true"]::after,
.chip[aria-pressed="true"]::after {
  content: ""; display: inline-block; width: 5px; height: 5px;
  margin-left: .45rem; border-radius: 50%;
  background: var(--cyan); vertical-align: middle;
}
/* Any control that responds to a pointer should say so. */
button:not([disabled]), [role="button"]:not([disabled]),
.chip:not([disabled]), .btn:not([disabled]) { cursor: pointer; }
button[disabled], .chip[disabled], .btn[disabled] { cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   WIZARD ARCHIVE — 84 profiles across 6 sectors
   The sector row is the first cut; the grid is the browse layer; the record
   opens in place. Cards are buttons, and they look like buttons.
   ═══════════════════════════════════════════════════════════════════════ */
.wzsectors {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.wzsector {
  display: flex; flex-direction: column; gap: .28rem;
  padding: .8rem .85rem; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.012); color: inherit;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.wzsector:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.wzsector.is-on {
  border-color: var(--cyan);
  background: rgba(62,211,238,.08);
  box-shadow: 0 0 0 1px rgba(62,211,238,.16) inset;
}
.wzsector__n { font-size: var(--t-sm); color: var(--ink); line-height: 1.3; }
.wzsector__c {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  color: var(--cyan);
}
.wzsector__d { font-size: var(--t-2xs); color: var(--steel-d); line-height: 1.5; }

.wzgrid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.wzcard {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .85rem .9rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.012);
  transition: border-color .22s var(--ease), transform .22s var(--ease), background .22s var(--ease);
}
.wzcard:hover, .wzcard:focus-visible {
  border-color: var(--line-strong); transform: translateY(-2px);
  background: rgba(255,255,255,.024);
}
.wzcard.is-on { border-color: var(--cyan); background: rgba(62,211,238,.07); }
.wzcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.wzcard__id { font-size: .55rem; letter-spacing: .14em; color: var(--steel-d); }
.wzcard__grade {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .08em;
  padding: .12rem .38rem; border-radius: 2px; border: 1px solid var(--line);
  color: var(--steel);
}
.wzcard__grade[data-g="A"], .wzcard__grade[data-g="B"] { color: var(--emerald); border-color: rgba(53,196,140,.4); }
.wzcard__grade[data-g="C"] { color: var(--cyan); border-color: rgba(62,211,238,.35); }
.wzcard__grade[data-g="D"] { color: var(--amber); border-color: rgba(233,178,86,.4); }
.wzcard__grade[data-g="E"], .wzcard__grade[data-g="F"] { color: var(--red); border-color: rgba(224,90,90,.4); }
.wzcard__n { margin: 0; font-size: var(--t-md); line-height: 1.28; color: var(--ink); font-weight: 500; }
.wzcard__e { margin: 0; font-size: var(--t-2xs); color: var(--smoke); line-height: 1.55; }
.wzcard__meta {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .35rem;
  font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-d);
  border-top: 1px solid var(--line-faint);
}
.wzcard__p { margin: 0; font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }

.wzscore { display: flex; align-items: center; gap: .7rem; }
.wzscore__v {
  font-family: var(--mono); font-size: 1.9rem; line-height: 1; color: var(--cyan);
}
.wzscore__l { font-size: .58rem; letter-spacing: .09em; color: var(--steel-d); line-height: 1.6; }

.wzparams { display: flex; flex-wrap: wrap; gap: .35rem; }
.wzparam {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .05em;
  padding: .22rem .45rem; border: 1px solid var(--line-faint); border-radius: 2px;
  color: var(--steel);
}
.wzparam b { color: var(--bone-2); font-weight: 400; }

/* Anchor targets clear the fixed header even when the browser, not the
   corrector, performs the scroll. */
:target { scroll-margin-top: calc(var(--header-h) + 18px); }
.section[id], [data-toc-label][id], h1[id], h2[id], h3[id] {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* Segmented control — a selector that reads as a selector. */
.railbar__row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.railbar__lbl {
  font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-d);
}
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255,255,255,.02);
}
.seg__b {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .34rem .6rem; border: 0; border-radius: 3px; cursor: pointer;
  background: transparent; color: var(--steel);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.seg__b b { color: var(--steel-d); font-weight: 400; margin-left: .28rem; }
.seg__b:hover { color: var(--bone-2); }
.seg__b[aria-pressed="true"] { background: rgba(62,211,238,.14); color: var(--ink); }
.seg__b[aria-pressed="true"] b { color: var(--cyan); }
.seg__b[aria-pressed="true"]::after { content: none; }

/* Single-list layout: every group stacked, each with its own heading. */
#rail-panels.is-list [role="tabpanel"] { display: block !important; }
.railgrouphead {
  margin: 1.6rem 0 .2rem; padding: .45rem 0 .35rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan); border-bottom: 1px solid var(--line);
  position: sticky; top: calc(var(--header-h) + 4px);
  background: var(--ink-900); z-index: 2;
}
#rail-panels.is-list [role="tabpanel"]:first-child .railgrouphead { margin-top: .2rem; }

/* ══════════════════════════════════════════════════════════════════════════
   IMAGE PLATES · RESPONSIVE SET AND VEIL TREATMENT
   --------------------------------------------------------------------------
   The laboratory illustrations are content, not wallpaper. They have to be
   plainly visible — the subject, the charts on the wall panels and the brand
   lettering all have to read — while still belonging to a mineral-dark
   substrate that never uses pure black, and while carrying display type
   without losing contrast.

   The treatment is therefore three layered things rather than one wash:

     1 · a bottom-weighted mineral gradient, heaviest in the band where
         overlaid copy sits (about 75-80% there) and light across the middle
         of the frame (about 30% over the subject);
     2 · a vignette anchored to the plate's own focal point, so the subject
         stays the brightest thing in the frame and the edges fall away into
         the page;
     3 · a slight desaturation and contrast lift on the image itself, which
         reconciles the illustration's greens and golds with the site palette
         without draining the picture.

   Strength is driven by --veil, written per plate by tools/images.js from the
   plate's own mean luminance. These sources are already dark (mean luminance
   27-48 of 255), so the settled values sit at the low end of the band: a
   heavier wash would erase the wall charts, which are the reason the images
   are on the page at all.

   Markup is emitted by assets/js/scenery.js. Rules are scoped with
   [data-plate] so they cannot reach the earlier section-level .plate
   component on the homepage.
   ═══════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------ 23.1 the box */
.plate-fig { margin: 0; position: relative; }

/* The mount slot. Scenery replaces its contents at runtime, so the slot
   declares the same placement classes as the plate it will hold and therefore
   reserves the exact final height in the document. Measured layout shift on
   the pages carrying a plate is 0.000. The caption is authored in the page
   beside the slot rather than injected, for the same reason — and so the
   provenance note is in the markup where it can be audited.
   The no-JS <img> lives inside the slot and fills it on the same ratio. */
.plate-slot {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 3 / 2);
  overflow: hidden;
}
.plate-slot > noscript { display: block; height: 100%; }

.plate[data-plate] {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 3 / 2);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  isolation: isolate;
  /* LQIP: the 20px data URI is set inline by Scenery, so the box is never
     empty and never flashes. It is covered the moment the image decodes. */
  background-color: var(--ink-900);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--focal, 50% 50%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.014) inset,
    0 30px 90px -34px rgba(0,0,0,.9);
}
.plate[data-plate] > picture { display: block; width: 100%; height: 100%; }

.plate__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  /* Desaturate slightly, lift contrast, and give back a little brightness so
     the veil above does not flatten the subject. */
  filter: saturate(.9) contrast(1.06) brightness(1.03);
  transition: filter .6s var(--ease), transform 1.1s var(--ease);
}

/* --------------------------------------------------------- 23.2 the veil */
.plate__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --v: var(--veil, .34);
  --band: var(--veil-band, 1);
  background:
    /* 1 · copy band, heaviest at the foot of the plate */
    /* Composited against the picture, --veil at 0.34 yields roughly:
         · 35% across the middle of the frame, over the subject
         · 39% into the top corners, where the brand lettering sits — enough
           to seat it in the page, not enough to dull it
         · 79% in the bottom band, where captions and display type sit
       The top stop is deliberately mild: three of the four plates carry their
       logotype within a few percent of the top edge. */
    linear-gradient(to top,
      rgba(4,6,10,  calc(var(--v) * 2.32 * var(--band))) 0%,
      rgba(5,8,13,  calc(var(--v) * 1.52 * var(--band))) 13%,
      rgba(6,9,14,  calc(var(--v) * 1.08)) 28%,
      rgba(6,9,14,  calc(var(--v) * 0.94)) 50%,
      rgba(6,9,14,  calc(var(--v) * 0.96)) 74%,
      rgba(4,6,10,  calc(var(--v) * 0.68)) 100%),
    /* 2 · focal vignette — the subject stays the brightest thing here */
    radial-gradient(124% 104% at var(--focal, 50% 50%),
      rgba(6,9,14,0) 24%,
      rgba(5,8,13,  calc(var(--v) * 0.34)) 64%,
      rgba(4,6,10,  calc(var(--v) * 0.82)) 100%),
    /* 3 · mineral tint: cyan-blue above, a trace of probability violet below */
    linear-gradient(198deg,
      rgba(18,32,48, calc(var(--v) * 0.34)) 0%,
      rgba(11,16,26, calc(var(--v) * 0.24)) 48%,
      rgba(26,18,46, calc(var(--v) * 0.34)) 100%);
}

/* ------------------------------------------------- 23.2b directional scrim
   For plates whose illustration already carries lettering on one side. The
   homepage corridor renders "THE LAB NEVER SLEEPS" into the right-hand wall
   at roughly 68-95% of the frame width; at full strength that type competes
   with the overlaid display headline on the left and the band reads as two
   headlines arguing. This lays a right-weighted wash over that third only,
   so the wall lettering stays as facility texture and stops reading as a
   second headline. It is painted inside .plate__veil, which is already
   inset:0, z-index:2 and pointer-events:none. */
.plate--quiet-right > .plate__veil::after,
.plate--quiet-left  > .plate__veil::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
}
.plate--quiet-right > .plate__veil::after {
  background: linear-gradient(to left,
    rgba(4,6,10,.80) 0%, rgba(4,6,10,.66) 16%, rgba(5,8,13,.34) 34%,
    rgba(6,9,14,.06) 52%, rgba(6,9,14,0) 66%);
}
.plate--quiet-left > .plate__veil::after {
  background: linear-gradient(to right,
    rgba(4,6,10,.80) 0%, rgba(4,6,10,.66) 16%, rgba(5,8,13,.34) 34%,
    rgba(6,9,14,.06) 52%, rgba(6,9,14,0) 66%);
}
/* Below 640px the 4:5 crop is served, which removes the lettered wall
   entirely — the directional wash would then only darken the subject. */
@media (max-width: 640px) {
  .plate--quiet-right > .plate__veil::after,
  .plate--quiet-left  > .plate__veil::after { background: none; }
}

/* Optional scan grid, matching the earlier facility plate's instrument look */
.plate--scan::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}

/* ----------------------------------------------------- 23.3 overlaid copy */
/* The box spans the full width of the plate and the MEASURE IS SET ON THE
   CHILDREN, not on the box.

   It used to be the other way around: max-width:62ch on the box, with the
   full-bleed variant then adding padding-inline of (100vw - shell)/2. On a
   1440px viewport those two agree. On a 2000px viewport the padding alone is
   544px against a 650px box under border-box sizing, which leaves ~106px of
   content — every word wrapping onto its own line, a column of type running
   down the left edge of the picture. Capping the measure per child removes
   the conflict entirely: the padding can grow with the viewport and the line
   length stays where typography wants it. */
.plate__over {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: clamp(1rem, .55rem + 1.7vw, 2.5rem);
  max-width: none;
  /* A local scrim on top of the veil, so contrast holds even where the
     picture is at its brightest. The second gradient releases the scrim
     towards the right so the subject of the illustration is not flattened
     by a band that now runs the full width of the plate. */
  background:
    linear-gradient(to top,
      rgba(4,6,10,.92) 0%, rgba(4,6,10,.74) 32%,
      rgba(4,6,10,.34) 68%, rgba(4,6,10,0) 100%),
    linear-gradient(to right,
      rgba(4,6,10,.62) 0%, rgba(4,6,10,.40) 34%,
      rgba(4,6,10,.12) 58%, rgba(4,6,10,0) 78%);
}
.plate__over > * {
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 8px 30px rgba(0,0,0,.65);
  max-width: 62ch;
}
.plate__over .plate__k {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
}
.plate__over .plate__l {
  font-family: var(--display); font-weight: 400; color: #fff;
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.9rem); line-height: 1.08;
  text-wrap: balance;
  max-width: 20ch;
}
.plate__over .plate__s { color: var(--bone-2); font-size: var(--t-sm); max-width: 54ch; }
/* An action inside the overlay. Kept to a single ghost control so the band
   stays a facility record rather than becoming a promotional panel. */
.plate__over .plate__cta { display: block; margin-top: .5rem; }
.plate__over .plate__cta .btn { text-shadow: none; }
/* Copy present means a heavier band beneath it. */
.plate--over { --veil-band: 1.14; }

/* ------------------------------------------- 23.35 masthead registered to art
   Type that has to land on something already drawn into the illustration —
   a sign on a wall, a mark above a door — cannot be laid out against the box.
   It has to be laid out against the PICTURE. Two things make that possible:

     · the plate is shown at the source ratio (.plate--natural below), so
       object-fit: cover neither crops nor letterboxes, and n% down the box is
       n% down the picture;
     · every size is derived from --mast-h, the plate's own rendered height,
       rather than from the root font size — so the lettering scales with the
       artwork the way painted lettering would, instead of drifting off its
       anchor as the viewport changes.

   The measured anchors in facility-corridor.png (1535 x 1024):

       sign mark          x 660-875    y   8-205
       MONTEX             x 530-955    y 215-275
       ALPHA RAIL SYSTEM  x 535-975    y 295-325
       sign centre        x 752 = 49.0%      foot y 330 = 32.2%
       figure's head      x 700-790    from y 365 = 35.6%

   The facility name therefore sets at 32.6% and is done by 35%, clearing the
   head. The presenter lockup fills the dark panel left of the sign, which
   runs out at x 530 = 34.5%.                                                */
.plate__mast {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Height of the plate itself. The band is full-bleed, so viewport width is
     plate width, and the ratio converts it to plate height. */
  --mast-h: calc(100vw / 1.5);
}
.plate__mast > * { position: absolute; margin: 0; }

/* -- the presenter lockup, in the dark panel to the left of the sign ------ */
.mast__presents {
  /* Held clear of the fixed header, which is about 92px deep and sits over the
     top of the plate whenever the band is scrolled to the top of the viewport. */
  left: 3%;
  top: 12.5%;
  width: 26%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  text-shadow: 0 2px 26px rgba(0,0,0,.92), 0 1px 3px rgba(0,0,0,.8);
}
.mast__k {
  font-family: var(--mono);
  font-size: calc(var(--mast-h) * .0165);
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--steel);
  margin-right: -.34em;          /* optical: cancel the trailing letterspace */
  margin-bottom: .35em;
}
.mast__sys {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(var(--mast-h) * .046);
  line-height: 1.0;
  color: var(--bone);
}
.mast__verb {
  font-family: var(--display);
  font-style: italic;
  font-size: calc(var(--mast-h) * .031);
  line-height: 1.1;
  margin-top: .1em;
  color: var(--amber);
}

/* -- the facility name, directly beneath the sign -------------------------
   Unused on the homepage since the replacement master carries the name in the
   sign itself. Kept because it is part of the .plate__mast API: any plate whose
   artwork has a blank sign in it can letter that sign with this. */
.mast__title {
  left: 0; right: 2%;            /* the 2% offset centres on x 752, not 767 */
  top: 32.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--mast-h) * .022);
  font-family: var(--display);
  font-size: calc(var(--mast-h) * .0295);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f0dca8;                /* the gold of the sign's own sub-line */
  text-shadow: 0 0 22px rgba(226,163,61,.30), 0 2px 10px rgba(0,0,0,.85);
}
/* The rules that bracket the sub-line on the sign above, repeated so the new
   line reads as part of the same lockup rather than as a caption on top of it. */
.mast__title::before,
.mast__title::after {
  content: "";
  height: 1px;
  width: calc(var(--mast-h) * .04);
  background: linear-gradient(to right, rgba(226,163,61,0), rgba(226,163,61,.75));
}
.mast__title::after { background: linear-gradient(to left, rgba(226,163,61,0), rgba(226,163,61,.75)); }
.mast__title > span { display: block; margin-right: -.2em; }

/* Below 820px there is no dark panel left of the sign to letter into — the
   4:5 crop starts at source x 358, which puts the sign's left edge at 21% of
   the frame. The presenter line steps out of the picture and is carried by
   the overlaid copy instead, which is where a narrow reader is looking. */
@media (max-width: 820px) {
  .mast__presents { display: none; }
}
@media (max-width: 640px) {
  /* The portrait crop is 4:5 and takes the full source height, so the vertical
     anchors are unchanged and only the height conversion moves. */
  .plate__mast { --mast-h: calc(100vw / 0.8); }
  .mast__title { font-size: calc(var(--mast-h) * .0225); letter-spacing: .14em; }
}

/* ------------------------------------------------------- 23.4 placements
   Ratios are deliberately close to the 3:2 source. These illustrations carry
   their brand lettering and their wall headings within a few percent of the
   top edge, and the bench, notebook or floor within a few percent of the
   bottom, so an aggressively cinematic band decapitates the thing the plate
   is on the page to show. 1.62 trims about 7% of height; a wider band is
   used only where the composition has dark space to give up. */
.plate--hero    { --ratio: 16 / 9; }
.plate--band    { --ratio: 16 / 9; }
/* Native ratio: the box matches the source exactly, so nothing is cropped and
   percentage anchors inside the plate address the picture itself. Required by
   any plate carrying a .plate__mast. Declared after .plate--band so it wins
   when both are on the element, and before the @media blocks below so the
   portrait crop still takes over on narrow screens. */
.plate--natural { --ratio: 1.5; }
.plate--inset   { --ratio: 3 / 2; }
.plate--portrait{ --ratio: 4 / 5; }
@media (min-width: 1100px) {
  .plate--hero { --ratio: 1.78; }
  /* A natural-ratio plate is opted out of the wide-screen band crop: the crop
     is what would slide the artwork out from under its masthead. */
  .plate--band:not(.plate--natural) { --ratio: 1.62; }
}

/* Full-bleed placement: no side border, square edges at the viewport, and a
   caption that returns to the page gutter instead of the screen edge. */
.plate-fig--bleed .plate[data-plate] {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.plate-fig--bleed .plate__cap {
  padding-inline: var(--gutter);
  max-width: var(--shell);
  margin-inline: auto;
}
.plate-fig--bleed .plate__over { padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))); }
/* Art direction: below 640px the 4:5 crop is served, so the box follows it. */
@media (max-width: 640px) {
  .plate--cropped { --ratio: 4 / 5; }
  /* Overlaid copy has to give the portrait crop room. Nothing is hidden —
     the type simply steps down so the subject above it stays visible. */
  .plate__over { gap: .38rem; padding: 1rem; }
  .plate__over .plate__l { font-size: 1.32rem; }
  .plate__over .plate__s { font-size: var(--t-xs); line-height: 1.55; }
}

/* ---------------------------------------------------------- 23.5 caption */
.plate-fig .plate__cap {
  display: grid;
  gap: .45rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line-faint);
}
.plate-fig .plate__cap-t { color: var(--smoke); }
.plate-fig .plate__note {
  font-size: .7rem;
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1.62;
  color: var(--steel-d);
  max-width: 78ch;
}

/* ------------------------------------------------- 23.6 states / fallback */
.plate--missing {
  display: grid; place-items: center;
  background: var(--ink-860);
  border-style: dashed;
}
.plate__missing {
  font-size: var(--t-2xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-d); text-align: center; line-height: 1.9;
}
.plate__missing b { color: var(--amber); font-weight: 400; }
/* No-JS: the noscript image inside each mount slot. It fills the reserved box
   on the same focal point, so a visitor without JavaScript sees the plate
   rather than an empty frame — just without the responsive candidate set. */
.plate__nojs {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  border: 1px solid var(--line); border-radius: var(--r-md);
  filter: saturate(.9) contrast(1.06) brightness(.94);
}

/* --------------------------------------------------- 23.7 motion controls */
.plate[data-plate]:hover .plate__img {
  filter: saturate(.95) contrast(1.07) brightness(1.06);
  transform: scale(1.014);
}
@media (prefers-reduced-motion: reduce) {
  .plate__img { transition: none !important; }
  .plate[data-plate]:hover .plate__img { transform: none; filter: saturate(.9) contrast(1.06) brightness(1.03); }
}
html[data-motion="off"] .plate__img,
[data-motion="off"] .plate__img { transition: none !important; }
html[data-motion="off"] .plate[data-plate]:hover .plate__img,
[data-motion="off"] .plate[data-plate]:hover .plate__img {
  transform: none;
  filter: saturate(.9) contrast(1.06) brightness(1.03);
}

/* Printing a veiled dark plate wastes ink and reads as a black rectangle. */
@media print {
  .plate__veil, .plate--scan::after { display: none !important; }
  .plate[data-plate] { aspect-ratio: auto; }
  .plate__img { filter: none; position: static; height: auto; }
}

/* ==========================================================================
   24 · WATERMARK PLATES
   The brand plates appear twice in two different roles. On the homepage the
   facility corridor is a full-bleed exhibit — the image IS the content of that
   band, so it keeps the standard veil and is framed as a figure.

   Everywhere else the plate sits BEHIND the section's own copy as a watermark:
   still clearly legible, but seated far enough back that a research panel,
   a table or a body column reads cleanly over it.

   Mechanism: the enclosing section becomes the positioning context and the
   figure is lifted out of flow to fill it. .shell is unpositioned, so
   inset:0 on the figure resolves to the section without moving any markup.
   ========================================================================== */
.section.has-wmark { position: relative; isolation: isolate; overflow: hidden; }
.section.has-wmark > .shell,
.section.has-wmark > .shell-n { position: relative; z-index: 1; }

.plate-fig--wmark {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}

/* Fill the section rather than holding a 3:2 box, and drop the framing —
   a watermark with a visible border and radius reads as a mislaid figure. */
.plate-fig--wmark .plate-slot,
.plate-fig--wmark .plate[data-plate] {
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The watermark veil. Heavier than the exhibit veil because body copy runs
   over the whole frame here rather than sitting in a reserved band, and the
   band multiplier is flattened so the treatment is even top to bottom
   instead of pooling at the foot.

   LIFTED. The original settings composited down to about 5% of the picture
   surviving on the copy side of the frame and 32% on the open side, which
   held text at 12-13:1 against a 4.5:1 requirement — three times more veil
   than the contrast budget needed, and the illustration was barely visible
   for it. The gradients below leave roughly 20% on the copy side and 60% on
   the open side. Measured across seven watermarked routes, the brightest
   background any copy region crosses is held under 0.032 relative luminance,
   which keeps --smoke body text at 5:1 or better and --bone at 10:1 or
   better. Those numbers are the constraint; the values below are just what
   currently satisfies them, and either can be re-derived by re-running the
   contrast harness described in the handoff.

   The --veil and --veil-band custom properties are inert on this variant:
   .plate__veil sets background as a shorthand and the rule below replaces
   background-image outright. They are left declared so a plate that opts out
   of the watermark treatment still has sane values. */
.plate-fig--wmark .plate[data-plate] {
  --veil: .86;
  --veil-band: .50;
}
.plate-fig--wmark .plate__img {
  filter: saturate(.82) contrast(.70) brightness(.92);
}

/* The copy column sits left on every watermarked section, so weight the scrim
   that way: heaviest under the headline and lede, releasing across the right
   of the frame where the subject and the diagnostic board stay legible. */
.plate-fig--wmark .plate__veil {
  background-image:
    linear-gradient(to right,
      rgba(4,6,10,.72) 0%,
      rgba(4,6,10,.63) 34%,
      rgba(5,8,13,.42) 62%,
      rgba(6,9,14,.26) 100%),
    linear-gradient(to bottom,
      rgba(4,6,10,.50) 0%,
      rgba(6,9,14,.30) 30%,
      rgba(6,9,14,.30) 70%,
      rgba(4,6,10,.46) 100%);
}

/* A second flat scrim, so contrast does not depend on where in the frame a
   given paragraph happens to land. Lifted with the gradients above. */
.plate-fig--wmark .plate__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 14, .18);
}

/* Surfaces go opaque over a watermark.

   A panel, a callout and a table are SURFACES — the design reads them as
   objects laid on the page. At 0.62 alpha they let the picture through, which
   is fine over flat page ink and is not fine over an illustration: it cost the
   contents rail and the callouts about 0.7 of a contrast point and made the
   panels look like holes rather than objects.

   Making them opaque here recovers that contrast without darkening the plate
   by a single percent, which is the whole point: the copy gets its background
   back and the picture keeps its brightness. The 6% of translucency left is
   enough to keep the surface feeling seated in the frame rather than pasted
   onto it. */
.has-wmark .panel,
.has-wmark .callout,
.has-wmark .tbl-wrap {
  background-color: rgba(11, 16, 23, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.has-wmark .panel--solid { background-color: var(--ink-860); }

/* A chip is a control with no background of its own — a pill outline on the
   page ink. Over an illustration that leaves 11px mono type reading straight
   off a lit bench, which measured as low as 2.9:1. It gets a surface here for
   the same reason the panels do, and its type is lifted from --steel to
   --bone-2 as well: --steel measures 4.6:1 on plain page ink, which is inside
   the standard by a margin too thin to spend on an illustration. Lifted, these
   utility links read at better than 8:1 over the plate — better than they do
   on an unwatermarked page, which is the right way round for small type over
   a picture. */
.has-wmark .chip {
  color: var(--bone-2);
  background-color: rgba(11, 16, 23, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.has-wmark .chip[aria-pressed="true"],
.has-wmark .chip[aria-selected="true"],
.has-wmark .chip.is-on { background-color: rgba(23, 63, 76, .95); }

/* The provenance note still has to be readable and auditable, so it is kept
   in the corner of the section rather than hidden. */
.plate-fig--wmark .plate__cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  max-width: min(46ch, 78vw);
  padding: .6rem .9rem;
  text-align: right;
  background: linear-gradient(to left, rgba(4, 6, 10, .78), rgba(4, 6, 10, 0));
  font-size: var(--t-2xs);
  line-height: 1.55;
}
.plate-fig--wmark .plate__stamp,
.plate-fig--wmark .plate__corner,
.plate-fig--wmark .plate__scan { display: none; }

/* Overlaid display type does not survive the watermark treatment. A watermark
   plate fills the whole section and the section's own h1 and lede run across
   it, so a second headline in the same frame is two headlines competing for
   one position — it was reading as ghosting behind the real one. The plate's
   copy is suppressed here and the section's own copy carries the frame. The
   masthead is suppressed for the same reason: its anchors assume an uncropped
   plate, and a watermark is stretched to the section's height. */
.plate-fig--wmark .plate__over,
.plate-fig--wmark .plate__mast { display: none; }

/* Mobile: a watermark competing with a single narrow column of text is worse
   than no watermark, so it recedes further rather than being switched off —
   the client asked for the imagery to be present on these pages. */
@media (max-width: 640px) {
  /* One narrow column of text runs the full width of the frame here, so there
     is no open side to leave bright: the directional gradient is replaced by
     an even one a little heavier than the desktop copy side. */
  .plate-fig--wmark .plate__veil {
    background-image:
      linear-gradient(to bottom,
        rgba(4,6,10,.56) 0%,
        rgba(6,9,14,.44) 30%,
        rgba(6,9,14,.44) 70%,
        rgba(4,6,10,.54) 100%);
  }
  .plate-fig--wmark .plate__veil::after { background: rgba(6, 9, 14, .18); }
  .plate-fig--wmark .plate__cap { max-width: 100%; text-align: left;
    background: linear-gradient(to top, rgba(4,6,10,.86), rgba(4,6,10,0)); }
}

@media (prefers-reduced-motion: reduce) {
  .plate-fig--wmark .plate__img { transition: none; }
}
[data-motion="off"] .plate-fig--wmark .plate__img { transition: none; }

/* A head section is short by design, which would crop the watermark to a
   letterbox strip. Give the watermarked sections enough vertical room for the
   image to read as a room rather than as a band, without pushing the copy
   off the first screen. */
.section.has-wmark { min-height: clamp(340px, 46vh, 560px); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 640px) { .section.has-wmark { min-height: clamp(300px, 54vh, 480px); } }

/* ==========================================================================
   PHASE 2c — THE ENGINE BAR AND THE OUTPUT BOARD
   Added for parameter-laboratory.html. Two new component families only; every
   other surface here reuses .panel, .seg, .chip, .acc, .status, .figure and
   .readout unchanged.
   ========================================================================== */

/* ── engine bar ─────────────────────────────────────────────────────────────
   The disclosure-mode row carries six options, which will not sit on one line
   inside the control panel at any realistic width, so its segment wraps. */
.seg--wrap { flex-wrap: wrap; }

/* The bar was written for two children — a search field and one segment — and
   the ≥720px rule turned it into a single row on that basis. It now carries
   four rows plus a note, so the row treatment is withdrawn rather than fought
   with per-child overrides. */
@media (min-width: 720px) {
  .railbar { flex-direction: column; align-items: stretch; }
}
.railbar__row--stack { align-items: flex-start; flex-direction: column; gap: .4rem; }
.railbar__note {
  color: var(--steel); font-size: var(--t-2xs); line-height: 1.65;
  margin-top: .1rem; max-width: 62ch;
}
.railbar__sup { color: var(--amber); font-size: var(--t-2xs); letter-spacing: .04em; }
.seg__b[disabled] { opacity: .4; cursor: not-allowed; }

/* Touch target. .seg__b and .chip are compact by design in a dense panel, so
   the minimum is met with padding on the interactive box rather than by
   inflating the type. */
.seg__b, .obrd__b, .chip { min-height: 44px; }
.chip--sm { min-height: 34px; }
@media (pointer: coarse) { .chip--sm { min-height: 44px; } }

/* ── engine view ─────────────────────────────────────────────────────────── */
.engblk { border-top: 1px solid var(--line); padding-top: 1.15rem; margin-top: 1.5rem; }
.engblk:first-child { margin-top: .35rem; }
.engblk[hidden] { display: none !important; }
.engblk__id {
  font-size: var(--t-2xs); letter-spacing: .18em; text-transform: uppercase; color: var(--steel-d);
}
.engblk__t {
  font-family: var(--display); font-size: 1.22rem; line-height: 1.18; letter-spacing: -.012em;
  color: var(--bone); margin-top: .3rem;
}
.engblk__p { font-size: var(--t-xs); color: var(--smoke); line-height: 1.6; margin-top: .45rem; max-width: 58ch; }
.engblk__lbl { margin-top: 1rem; color: var(--cyan); }
.engblk__acc { margin-top: 1.15rem; border-top-color: var(--line-faint); }
.engblk__acc .acc__b { min-height: 44px; }
.engblk__sec { padding-bottom: .5rem; }

/* ── output board ────────────────────────────────────────────────────────── */
.status--planned { color: var(--steel-d); }
.status--planned .status__dot { animation: none; }

.obrd { margin-top: 1.15rem; }
.obrd:first-child { margin-top: 0; }
.obrd[hidden] { display: none !important; }
.obrd__gt {
  font-family: var(--display); font-size: var(--t-d3); line-height: 1.12;
  letter-spacing: -.012em; color: var(--bone);
}
.obrd__gn { color: var(--steel-d); font-size: var(--t-2xs); letter-spacing: .1em; }
.obrd__gd { font-size: var(--t-sm); color: var(--smoke); line-height: 1.6; margin-top: .6rem; max-width: 84ch; }
.obrd__list { border-top: 1px solid var(--line); }
.obrd__r { border-bottom: 1px solid var(--line-faint); }
.obrd__r[hidden] { display: none !important; }

/* One row = one accordion header. The grid keeps the value column aligned
   down the whole board so a reader can scan the numbers vertically. */
.obrd__b {
  display: grid; width: 100%; text-align: left; gap: .2rem .9rem;
  grid-template-columns: minmax(0, 1fr) 8.5rem 8rem 9.5rem 12px;
  align-items: baseline; padding: .8rem 0;
}
.obrd__name { font-size: var(--t-sm); color: var(--bone-2); }
.obrd__b[aria-expanded="true"] .obrd__name { color: var(--bone); }
.obrd__val {
  font-size: 1.02rem; color: var(--cyan); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.obrd__r[data-outstatus="preview"] .obrd__val { color: var(--violet); }
.obrd__val.is-planned, .obrd__val.is-undef {
  color: var(--steel-d); font-size: var(--t-2xs); letter-spacing: .14em; text-transform: uppercase;
}
.obrd__unit { font-size: var(--t-2xs); color: var(--steel-d); letter-spacing: .1em; }
.obrd__b .ic { align-self: center; }

/* The collapsing accordion clips its grid ITEM, so that item must carry no
   padding of its own — padding survives a zero-height track and leaks the
   first line of content. Hence the bare wrapper div, with the padding one
   level further in. This mirrors the .acc__p > div > .inner pattern the rest
   of the site uses; it is a constraint of the mechanism, not a preference. */
.obrd__d { padding: .2rem 0 1.35rem; max-width: 88ch; }
.obrd__d > p { font-size: var(--t-xs); color: var(--smoke); line-height: 1.65; }
.obrd__d > p + p { margin-top: .55rem; }
.obrd__qk {
  display: block; font-size: var(--t-2xs); letter-spacing: .15em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: .18rem;
}
.obrd__q > .obrd__qk { color: var(--bone-2); }
.obrd__caution > .obrd__qk { color: var(--amber); }
.obrd__needs {
  border-left: 2px solid var(--steel-d); padding-left: .8rem; margin-top: .8rem !important;
}
.obrd__needs > .obrd__qk { color: var(--steel); }
.obrd__note { color: var(--steel-d) !important; font-size: var(--t-2xs) !important; margin-top: .7rem !important; }
.obrd__searchwrap { display: flex; gap: .45rem; align-items: center; flex: 1 1 16rem; min-width: 0; }
.obrd__searchwrap .input { flex: 1 1 auto; min-width: 0; }

/* Tablet and below: the four-column row would compress the name to two words,
   so the value block moves under the name rather than shrinking. */
@media (max-width: 900px) {
  .obrd__b {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name chev" "val val" "unit status";
    row-gap: .35rem;
  }
  .obrd__name { grid-area: name; }
  .obrd__val { grid-area: val; }
  .obrd__unit { grid-area: unit; }
  .obrd__b .status { grid-area: status; justify-self: end; }
  .obrd__b .ic { grid-area: chev; }
}

/* The five new figures sit two-up on desktop and stack below it. */
@media (max-width: 1000px) {
  #output-board .grid.g-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Small screens: these five figures carry long rail names and a 13-column
   grid, and an SVG viewBox scaled into 320px renders them at a size nobody can
   read. Below 640px the figure body scrolls horizontally instead — the same
   decision the dense tables on this site already make. Scoped to the output
   board so no existing figure changes behaviour. */
@media (max-width: 640px) {
  #output-board .figure__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #output-board .figure__body > div { min-width: 540px; }
  #output-board .figure__body .legend { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   24. APPLICATION SPECIFICATION PAGES

   The Application section is the only part of this site that describes a
   product rather than a method, and it carries an unusual amount of listed
   detail — twenty families of ten modules, ten score components, a hundred
   and thirty figures. The components below exist to make dense enumeration
   readable rather than to decorate it: labelled groups instead of bullet
   soup, a numbered protocol for ordered work, and one note treatment that
   carries the build-state qualifications.

   Everything here is scoped under .appsec or an app* class, so none of it
   can reach the research pages.
   ═══════════════════════════════════════════════════════════════════════ */

.appsec {
  padding-block: clamp(2.4rem, 1.4rem + 3vw, 4.4rem);
  border-top: 1px solid var(--line-faint);
}
.appsec:first-of-type { border-top: 0; }
.appsec--bare { border-top: 0; padding-block: 0 clamp(1.6rem, 3vw, 2.6rem); }
.appsec__head { margin-bottom: clamp(1.2rem, 2vw, 2rem); }
.appsec__head .t-d3 { letter-spacing: -0.014em; }
.appsec__note {
  margin-top: 0.7rem; color: var(--steel);
  font-size: var(--t-sm); line-height: 1.65; max-width: 74ch;
}

/* ------------------------------------------------------- 24.1 labelled sets
   The workhorse. A heading, an optional sentence, and a ruled list — so a
   forty-item enumeration reads as a specification rather than as filler. */
.appgrid { display: grid; gap: 1px; background: var(--line-faint); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.appgrid--2, .appgrid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .appgrid--2, .appgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .appgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.appgrp { background: var(--ink-900); padding: 1.15rem 1.2rem 1.3rem; }
.appgrp__k {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan);
}
.appgrp__d { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--steel); line-height: 1.6; }
.appgrp__l { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0; }
.appgrp__l li {
  font-size: var(--t-sm); color: var(--bone-2); line-height: 1.5;
  padding: 0.42rem 0 0.42rem 0.95rem; position: relative;
  border-top: 1px solid var(--line-faint);
}
.appgrp__l li:first-child { border-top: 0; padding-top: 0; }
.appgrp__l li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 4px; height: 1px; background: var(--steel-d);
}
.appgrp__l li:first-child::before { top: 0.52em; }

/* --------------------------------------------------------- 24.2 major cards */
.appcards { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px)  { .appcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1160px) { .appcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.appcard { display: flex; flex-direction: column; }
.appcard .card__idx,
.appcard .card__title,
.appcard .card__body,
.appcard .card__foot { display: block; }
.appcard__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
.appcard__chip {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.08em;
  color: var(--steel); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.25rem 0.6rem; white-space: nowrap;
}

/* ------------------------------------------------------------ 24.3 protocol */
.appsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.appstep {
  display: grid; gap: 0.3rem 1.1rem; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem 0; border-top: 1px solid var(--line-faint);
}
.appstep:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 620px) { .appstep { grid-template-columns: 44px minmax(0, 1fr); } }
.appstep__n { color: var(--cyan); font-size: var(--t-2xs); letter-spacing: 0.14em; padding-top: 0.22em; }
.appstep__b { display: block; }
.appstep__k { display: block; color: var(--bone); font-size: 1rem; font-weight: 500; }
.appstep__d { display: block; margin-top: 0.35rem; color: var(--smoke); font-size: var(--t-sm); line-height: 1.65; max-width: 78ch; }

/* ---------------------------------------------------------- 24.4 build note
   One treatment, three tones. These carry the honesty qualifications, so
   they are given a left rail and a tinted ground rather than being allowed
   to read as ordinary body copy. */
.appnote {
  border: 1px solid var(--line); border-left-width: 2px; border-radius: var(--r-sm);
  padding: 1rem 1.15rem; background: rgba(255, 255, 255, 0.015);
}
.appnote p { font-size: var(--t-sm); color: var(--bone-2); line-height: 1.7; margin: 0; max-width: 88ch; }
.appnote--sim  { border-left-color: var(--violet); }
.appnote--warn { border-left-color: var(--amber); }
.appnote--ok   { border-left-color: var(--emerald); }

/* --------------------------------------------------------------- 24.5 toc */
.apptoc { display: grid; gap: 0; }
.apptoc a {
  font-size: var(--t-sm); color: var(--smoke); padding: 0.42rem 0;
  border-top: 1px solid var(--line-faint); transition: color 0.3s var(--ease);
}
.apptoc a:first-child { border-top: 0; }
.apptoc a:hover { color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════
   25. PLAN CARDS

   Used on the pricing page. The add-on is deliberately styled as an
   attachment rather than as a fourth column, because it attaches to any
   plan including the free one, and a four-across grid implies a choice
   between it and the others.
   ═══════════════════════════════════════════════════════════════════════ */
.plans { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 720px)  { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Four paid tiers since the Advanced Diagnostics add-on was retired into Pro
   and Quant. Four columns need more room than three did, so the four-up step
   waits until 1320px and the cards run 2x2 below it rather than being crushed
   to a width the feature lists cannot hold. */
@media (min-width: 1320px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ink-900); padding: 1.5rem 1.4rem 1.6rem; position: relative;
}
.plan--featured { border-color: rgba(141, 124, 243, 0.44); background: var(--ink-860); }
.plan__flag {
  position: absolute; top: -1px; right: 1.2rem;
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--violet);
  border: 1px solid rgba(141, 124, 243, 0.44); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 0.28rem 0.6rem;
  background: var(--ink-900);
}
.plan__n { font-family: var(--display); font-size: var(--t-d3); color: var(--bone); line-height: 1.1; }
.plan__p { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
/* The price is a headline, not a readout. It was set in the technical mono
   alongside the plan name in the editorial serif, which made every card look
   like two designs stacked. The mono is right for a parameter value, a
   timestamp or an experiment id — a price is the second-largest piece of
   display type on the page and belongs in the same face as the first. The
   qualifier beside it (--plan__pn) stays mono, because that IS a label. */
.plan__pv {
  font-family: var(--display); font-weight: 400;
  font-size: 2.5rem; line-height: 1;
  color: var(--bone); letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.plan__pn { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-d); }
/* The struck list price and the saving, beside the current one. Both are
   optional: they only render when the selected period actually discounts this
   plan, so nothing ever shows "0% off" or strikes through a price equal to the
   one beside it. */
.plan__was {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--steel-d); font-variant-numeric: tabular-nums;
}
.plan__was s { text-decoration-thickness: 1px; }
.plan__off {
  color: var(--emerald); letter-spacing: .1em; text-transform: uppercase;
  font-size: var(--t-2xs);
  border: 1px solid rgba(53,196,140,.34); border-radius: 999px;
  padding: .12rem .45rem;
}
.plan__line { margin-top: 0.9rem; color: var(--bone-2); font-size: var(--t-sm); line-height: 1.6; }

/* The price argument. Set apart from the descriptive body because it answers a
   different question: not "what is this tier" but "why does it cost what the
   tier above does not". */
.plan__why {
  margin-top: 1.2rem; padding: .85rem .95rem;
  border: 1px solid var(--line-faint); border-left: 2px solid var(--line-strong);
  border-radius: var(--r-sm); background: rgba(255,255,255,.018);
}
.plan__whyk {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel-d);
}
.plan__whyb { margin-top: .45rem; color: var(--bone-2); font-size: var(--t-sm); line-height: 1.65; }
.plan__who {
  margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--line-faint);
  color: var(--smoke); font-size: var(--t-xs); line-height: 1.5;
}
.plan__who span {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel-d); margin-right: .4rem;
}
.plan--featured .plan__why { border-left-color: rgba(141,124,243,.55); }

/* ------------------------------------------------------- billing selector */
.billing { display: grid; gap: .7rem; justify-items: start; }
.seg {
  display: inline-flex; padding: 3px; gap: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--ink-900);
}
.seg__b {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: 0 1.05rem;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.seg__b:hover { color: var(--bone-2); }
.seg__b[aria-checked="true"] { background: var(--ink-740); color: var(--bone); }
.seg__b:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.seg__tag {
  font-size: calc(var(--t-2xs) * .92); letter-spacing: .1em;
  color: var(--emerald); border: 1px solid rgba(53,196,140,.34);
  border-radius: 999px; padding: .1rem .45rem; text-transform: none;
}
.seg__b[aria-checked="true"] .seg__tag { border-color: rgba(53,196,140,.55); }
.seg__note { color: var(--steel-d); font-size: var(--t-2xs); letter-spacing: .04em; }

/* A compact form of the offer, for use directly above a form. The full band
   is an argument; this is a reminder at the point of decision. */
.offer-strip {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.4rem;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(226,163,61,.34); border-left-width: 2px;
  border-radius: var(--r-sm);
  background: linear-gradient(to right, rgba(226,163,61,.09), rgba(226,163,61,0) 62%);
}
.offer-strip__pct {
  font-family: var(--display); font-size: 2rem; line-height: 1;
  color: var(--amber); flex: none; font-variant-numeric: tabular-nums;
}
.offer-strip__t { display: grid; gap: .25rem; }
.offer-strip__t b { color: var(--bone); font-weight: 400; font-size: var(--t-sm); }
.offer-strip__t span { color: var(--smoke); font-size: var(--t-xs); line-height: 1.6; }

/* ------------------------------------------------ founding researcher band */
.offer {
  display: grid; gap: 1.6rem;
  border: 1px solid rgba(226,163,61,.34);
  border-left-width: 2px;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(226,163,61,.10), rgba(226,163,61,0) 58%),
    var(--ink-900);
  padding: clamp(1.4rem, .9rem + 1.6vw, 2.6rem);
}
@media (min-width: 860px) { .offer { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 2.4rem; align-items: start; } }
.offer__mark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 148px; height: 148px; flex: none;
  border: 1px solid rgba(226,163,61,.38); border-radius: 50%;
  background: radial-gradient(80% 80% at 50% 30%, rgba(226,163,61,.14), rgba(226,163,61,0));
}
.offer__pct {
  font-family: var(--display); font-size: 3.4rem; line-height: 1;
  color: var(--amber); font-variant-numeric: tabular-nums;
}
.offer__pct small { font-size: 1.5rem; }
.offer__pk {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .3em; text-transform: uppercase; color: var(--steel);
  margin-top: .35rem;
}
@media (max-width: 859px) { .offer__mark { width: 112px; height: 112px; } .offer__pct { font-size: 2.6rem; } }
.plan__body { margin-top: 0.8rem; color: var(--steel); font-size: var(--t-sm); line-height: 1.7; }
.plan__h {
  margin-top: 1.4rem; font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-d);
}
.plan__l { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.plan__l li {
  position: relative; padding: 0.34rem 0 0.34rem 1.25rem;
  font-size: var(--t-sm); color: var(--bone-2); line-height: 1.5;
}
.plan__l li::before {
  content: ""; position: absolute; left: 0; top: 0.78em;
  width: 8px; height: 4px; border-left: 1px solid var(--emerald);
  border-bottom: 1px solid var(--emerald); transform: rotate(-45deg);
}
.plan__l--no li { color: var(--steel-d); }
.plan__l--no li::before {
  border: 0; width: 8px; height: 1px; background: var(--steel-d);
  transform: none; top: 1.05em;
}
.plan__foot { margin-top: auto; padding-top: 1.4rem; }
/* A plan card is a narrow column and its action names the plan, so the label
   is longer than a general-purpose button's. It wraps here rather than
   overflowing the card on a phone. */
.plan__foot .btn { white-space: normal; text-align: center; line-height: 1.35; }
.plan__foot .btn { width: 100%; }

/* The add-on band: full width, two columns, visually attached rather than
   competing with the three plan columns above it. */
.plan--addon {
  grid-column: 1 / -1; border-color: rgba(141, 124, 243, 0.38);
  background: linear-gradient(180deg, var(--ink-860), var(--ink-900));
}
@media (min-width: 760px) {
  .plan--addon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
  .plan--addon .plan__foot { padding-top: 1rem; }
}

/* -------------------------------------------------------- 25.1 plan matrix
   A wide comparison table. The first column is sticky so a reader scrolling
   the plan columns on a narrow screen never loses the capability name — the
   ordinary failure of pricing tables on phones. */
.tbl--mx th[scope="row"] {
  text-align: left; font-weight: 400; color: var(--bone-2);
  font-size: var(--t-sm); padding: 0.72rem 0.9rem;
  border-bottom: 1px solid var(--line-faint);
  position: sticky; left: 0; background: var(--ink-950); z-index: 1;
  min-width: 15rem;
}
.tbl--mx thead th:first-child { position: sticky; left: 0; background: var(--ink-950); z-index: 2; }
.tbl--mx td { text-align: center; white-space: nowrap; font-size: var(--t-xs); }
.tbl--mx .mx__grp th {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan);
  padding: 1.15rem 0.9rem 0.5rem; border-bottom: 1px solid var(--line);
  position: static; background: transparent;
}
.mx__mark {
  display: inline-block; width: 10px; height: 5px;
  border-left: 1.5px solid var(--emerald); border-bottom: 1.5px solid var(--emerald);
  transform: rotate(-45deg) translateY(-2px);
}
.mx__dash { display: inline-block; width: 10px; height: 1px; background: var(--steel-d); vertical-align: middle; }
.tbl--mx .mx--na { color: var(--steel-d); }
.tbl--mx .mx--add { color: var(--violet); font-family: var(--mono); letter-spacing: 0.06em; }

/* The institutional tier spans the row for the same reason the add-on does:
   it is not a fourth column-comparable plan, it is an engagement. Left alone
   in a three-column grid it stranded two empty cells. */
.plan--wide { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .plan--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
  .plan--wide .plan__h:first-of-type { margin-top: 0; }
  .plan--wide .plan__foot { padding-top: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   26. SIMULATION OUTPUT GALLERY
   The compact control strip, the score block, the generated conclusion and
   the specified-output catalogue. Scoped so none of it reaches the bench.
   ═══════════════════════════════════════════════════════════════════════ */

.sorails {
  display: grid; gap: 1px; background: var(--line-faint);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px)  { .sorails { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sorails { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sorail { background: var(--ink-900); padding: 0.95rem 1.05rem 1.1rem; display: grid; gap: 0.55rem; align-content: start; }
.sorail__k {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--steel-d);
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
}
.sorail__v { color: var(--cyan); font-size: var(--t-xs); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.sorail .chip { justify-self: start; }

/* ------------------------------------------------------------ 26.1 score */
.soscore {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ink-900); padding: 1.5rem 1.4rem 1.6rem; height: 100%;
}
.soscore__g {
  font-family: var(--mono); font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: 1;
  color: var(--bone); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 0.7rem;
}
.soscore__gr {
  font-size: 1.3rem; letter-spacing: 0.1em; color: var(--steel);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.1em 0.45em;
}
.soscore[data-tone="good"]  .soscore__g { color: var(--emerald); }
.soscore[data-tone="warn"]  .soscore__g { color: var(--amber); }
.soscore[data-tone="press"] .soscore__g { color: var(--orange); }
.soscore[data-tone="bad"]   .soscore__g { color: var(--red); }
.soscore__s { margin-top: 0.7rem; font-family: var(--display); font-size: var(--t-d3); color: var(--bone); line-height: 1.15; }
.soscore__dl { margin: 1.2rem 0 0; display: grid; gap: 0; }
.soscore__dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--line-faint); }
.soscore__dl dt { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--steel-d); }
.soscore__dl dd { margin: 0; font-size: var(--t-sm); color: var(--bone-2); }
.soscore__n { margin-top: 1.1rem; font-size: var(--t-xs); color: var(--steel); line-height: 1.65; }
.soscore--void .soscore__g { color: var(--steel-d); }

/* ------------------------------------------------------- 26.2 conclusion */
.soconc {
  border: 1px solid var(--line); border-left: 2px solid var(--cyan);
  border-radius: var(--r-sm); padding: 1.2rem 1.3rem; background: rgba(255,255,255,0.015);
}
.soconc__b { font-size: 1.02rem; color: var(--bone); line-height: 1.7; max-width: 86ch; }
.soconc__h {
  margin-top: 1.1rem; font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
}
.soconc__l { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.soconc__l li {
  position: relative; padding: 0.35rem 0 0.35rem 1rem;
  font-size: var(--t-sm); color: var(--smoke); line-height: 1.6;
}
.soconc__l li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 5px; height: 1px; background: var(--amber); }

/* -------------------------------------------------------- 26.3 catalogue */
.socat { padding-block: clamp(1.6rem, 3vw, 2.6rem); border-top: 1px solid var(--line-faint); }
.socat:first-child { border-top: 0; padding-top: 0; }
.socat__h { font-family: var(--display); font-size: var(--t-d3); color: var(--bone); line-height: 1.15; }
.socat__n { margin-top: 0.55rem; font-size: var(--t-sm); color: var(--steel); line-height: 1.65; max-width: 74ch; }
.socat__grid {
  display: grid; gap: 1px; margin-top: 1.2rem; background: var(--line-faint);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .socat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.socat__g { background: var(--ink-900); padding: 1.1rem 1.15rem 1.25rem; }
.socat__gk {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan);
}
.socat__g ul { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.socat__g li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: var(--t-sm); color: var(--bone-2); line-height: 1.5;
  padding: 0.45rem 0; border-top: 1px solid var(--line-faint);
}
.socat__g li:first-child { border-top: 0; padding-top: 0; }
/* Zone table: the description and the entitlement note sit inside the row
   header, because a zone name alone does not tell a reader what they would be
   buying or losing. */
/* The row header holds the zone name, what the zone does, and the entitlement
   note. It has to be narrow enough to leave the four tier columns readable
   without the table scrolling on a desktop. */
.tbl--mx th[scope="row"] { max-width: 30ch; }
.zn__d, .zn__n { display: block; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.zn__d { margin-top: .3rem; font-size: var(--t-xs); color: var(--smoke); line-height: 1.55; font-weight: 400; }
.zn__n { margin-top: .35rem; font-size: var(--t-xs); color: var(--steel-d); line-height: 1.55; font-weight: 400; font-style: italic; }

.socat__lab {
  display: inline-block;
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); border-bottom: 1px solid rgba(62,211,238,.3);
  margin-left: .35rem;
}
.socat__lab:hover { border-bottom-color: var(--cyan); }
.socat__pl {
  flex: none; font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-d);
}
.socat__g li .status { flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   TOUCH AND SMALL-SCREEN CORRECTIONS

   Added after a full audit of all 40 routes at 390px and 768px. The layout
   itself was already sound — zero horizontal overflow on every route at both
   widths — so nothing here is a reflow. What the audit found was two classes
   of defect that a layout check does not catch:

     1. Controls rendered smaller than a finger. Comfortable minimum is 44px;
        several nav, footer, tab and form controls sat between 16px and 36px.
     2. Type set below the readable floor on a phone. The wizard cards ran to
        8.6px at 390px — legible on a 27-inch monitor at arm's length and not
        legible in a hand.

   These are gated on `pointer: coarse` and narrow widths so the desktop
   composition, which is deliberately dense, is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── touch targets ───────────────────────────────────────────────────────
   `pointer: coarse` rather than a width query: a large tablet with a touch
   screen has the same finger as a small phone, and a narrow desktop window
   does not. Padding is used rather than height so nothing is stretched into
   a shape it was not designed for. */
@media (pointer: coarse) {
  .util__a { padding: 0.7rem 0; display: inline-flex; align-items: center; min-height: 44px; }
  .ftr__l { padding: 0.62rem 0; min-height: 44px; display: flex; align-items: center; }
  .tab { min-height: 44px; }
  .toc__a { min-height: 44px; display: flex; align-items: center; }
  .seg__b { min-height: 44px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  input.input, select.input, textarea.input { min-height: 46px; font-size: 16px; }
  /* 16px is not a style choice: iOS Safari zooms the viewport on focus for any
     field below it, and the page never zooms back out. */
  textarea.input { min-height: 120px; }
  input[type="checkbox"] { min-width: 24px; min-height: 24px; }
  .switch { min-height: 32px; }
  .btn { min-height: 46px; }

  /* Range rails. The track stays 2px — it is the drawn instrument and the tick
     marks, bands and default marker are positioned against it — so the height
     goes on the input element and the thumb grows to something a fingertip can
     actually land on. A 13px thumb is a desktop affordance. */
  /* `.rail-ctrl input[type="range"]` further up sets 30px, so these have to be
     at least as specific to win — a bare element selector loses regardless of
     source order. */
  .rail-ctrl input[type="range"] { height: 44px; }
  .rail-ctrl input[type="range"]::-webkit-slider-runnable-track { height: 44px; }
  .rail-ctrl input[type="range"]::-moz-range-track { height: 44px; }
  .rail-ctrl input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .rail-ctrl input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
  input[type="range"] { height: 44px; }
  /* The bands, ticks and default marker are absolutely positioned inside the
     track, so the container grows with the input rather than the input
     overflowing a 30px box. */
  .rail-ctrl__track { height: 44px; }
  /* The rail info marker keeps its 16px of ink; the ::after pseudo-element is
     what grows, so the label row does not reflow around a bigger circle. */
  .itip__b::after { inset: -16px; }
}

/* ── readable type on a phone and a tablet ───────────────────────────────
   Floors, not rewrites. Each of these has a desktop value that is correct at
   desktop reading distance and too small in a hand. The ceiling is 900px, not
   640px, because a 768px tablet is held at phone distance and was showing the
   same 8.6px wizard-card type as the phone was. */
@media (max-width: 900px) {
  .wzcard__p { font-size: 0.64rem; letter-spacing: 0.06em; }
  .wzcard__grade { font-size: 0.68rem; }
  .wzcard .mono, .wzcard__id { font-size: 0.66rem; }
  .itip__k { font-size: 10.5px; }
  .itip__v { font-size: 0.82rem; }
  .rail-meta__drives, .railbar__lbl, .rail-ctrl__range { font-size: 0.66rem; }
  .navmenu__lead { font-size: 0.68rem; }
  .brand__sub { font-size: 0.66rem; }
  .tab__n { font-size: 0.66rem; }
  .plate__cap-t, .plate__note { font-size: 0.68rem; }
  .tier__l { font-size: 0.68rem; }
  .seg__tag { font-size: 0.68rem; }
}

@media (max-width: 640px) {

  /* Dense tables scroll rather than shrink illegibly — the brief's own rule.
     The shadow is the affordance that says so, since a table that scrolls
     without indicating it reads as a table with a missing column. */
  .tbl-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--ink-900) 30%, rgba(9,13,19,0)) left center / 28px 100% no-repeat,
      linear-gradient(to left,  var(--ink-900) 30%, rgba(9,13,19,0)) right center / 28px 100% no-repeat;
  }
  .tbl-wrap table { min-width: 34rem; }

  /* The parameter bench: the value readout and the label compete for one line
     at 390px, and the label is the one that must survive. */
  .rail-ctrl__top { flex-wrap: wrap; row-gap: 0.2rem; }
  .rail-ctrl__lw { flex: 1 1 auto; }
  .rail-ctrl__hint { max-width: none; }
  .rail-ctrl__foot { flex-wrap: wrap; row-gap: 0.3rem; }
}

/* ── tablet ──────────────────────────────────────────────────────────────
   The 12-column grid already collapses; these are the two places where a
   two-column result was still too tight to read at 768px. */
@media (min-width: 641px) and (max-width: 900px) {
  .tbl-wrap table { min-width: 40rem; }
  .plan__l { font-size: var(--t-sm); }
}