/* ============================================================================
   ACTUARY — LANDING · "CONTROL LIMITS"
   ----------------------------------------------------------------------------
   The register is the inspection bureau: Wald's sequential test was built for
   acceptance inspection, and this page is set on that paper. Four laws:

     1. PRINTED vs TYPED. The bureau prints the form (Public Sans labels,
        Oswald mastheads); the instrument types the values (IBM Plex Mono).
        Every measured number, id, hash and state word is typed.
     2. THE LABELED LIMIT. Every threshold is a red rule with its value tagged
        in the margin — printed before the data arrived. Red appears nowhere
        else. No green anywhere: the page never paints health.
     3. SATURATION IS SPENT ON DATA. Okabe-Ito series colours belong to
        traces; links share the evidence colour because a link is a citation.
        Chrome is carbon ink on bond. Buttons are ink blocks.
     4. FLAT INK. Radius 0, no soft shadows; structure is rules and zone
        washes on the 8pt module. The one framed object is the certificate.

   Tokens are law: every colour, size and duration below derives from :root.
   ========================================================================= */

/* ---- fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Oswald';
  src: url('/static/fonts/oswald-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/static/fonts/public-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Slack Lato — used only inside the .slack artifact reproduction */
@font-face {
  font-family: 'Slack Lato';
  src: url('/static/fonts/lato-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Slack Lato';
  src: url('/static/fonts/lato-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Slack Lato';
  src: url('/static/fonts/lato-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens --------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* stock */
  --bond: #f8f8f5;
  --plate: #fdfdfb;
  --sunk: #efefe9;
  --carbon: #1b1d1c;
  --carbon-press: #0e100f;
  --carbon-2: #575c59;
  --carbon-3: #6d726e;

  /* rules are alpha steps of carbon, never grey hexes */
  --rule: rgba(27, 29, 28, 0.16);
  --rule-strong: rgba(27, 29, 28, 0.38);
  --rule-faint: rgba(27, 29, 28, 0.09);
  --zone: rgba(27, 29, 28, 0.035);

  /* the instrument speaking — data and semantics, never chrome */
  --evidence: #0072b2;
  --evidence-deep: #005a8e;
  --limit: #a82c1b;
  --limit-wash: #f7eae7;
  --watch: #b87a00;
  --watch-ink: #7a5200;
  --no-data: #d6d2c4;

  /* faces */
  --font-masthead: 'Oswald', 'Arial Narrow', sans-serif;
  --font-form: 'Public Sans', 'Helvetica Neue', sans-serif;
  --font-typed: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* module: 8px */
  --u: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u5: 40px;
  --u6: 48px;
  --u8: 64px;
  --u10: 80px;
  --u12: 96px;

  --measure: 1160px;
  --radius: 0px;

  /* motion: micro feedback, one orchestrated load, one easing */
  --dur: 120ms;
  --slow: 640ms;
  --ease: cubic-bezier(0.3, 0.7, 0, 1);
}

/* ---- reset & base --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  background: var(--bond);
  color: var(--carbon);
  font-family: var(--font-form);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg,
canvas {
  max-width: 100%;
}
a {
  color: var(--evidence);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}
a:hover {
  color: var(--evidence-deep);
}
:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 2px;
}
.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--u3);
}
.num,
.tab {
  font-family: var(--font-typed);
  font-variant-numeric: tabular-nums;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: -100vw;
  top: 0;
  background: var(--carbon);
  color: var(--bond);
  padding: 10px 16px;
  font: 600 0.875rem var(--font-form);
  z-index: 60;
}
.skip:focus {
  left: 0;
}

/* ---- type voices ----------------------------------------------------------
   PRINTED: form labels and prose (Public Sans), mastheads (Oswald caps).
   TYPED: every value (IBM Plex Mono). */
h1,
h2,
h3 {
  text-wrap: balance;
}
h1 {
  font-family: var(--font-masthead);
  font-weight: 600;
  font-size: clamp(2.875rem, 7vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  max-width: 16ch;
}
h2 {
  font-family: var(--font-form);
  font-weight: 780;
  font-size: clamp(1.625rem, 3.4vw, 2.3125rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
h3 {
  font-family: var(--font-form);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}
.kicker {
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon-2);
}
.lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--carbon-2);
  max-width: 58ch;
}
.lead strong,
.body strong {
  font-weight: 700;
  color: var(--carbon);
}
.body {
  font-size: 1rem;
  color: var(--carbon-2);
  max-width: 62ch;
}
.mono-label {
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carbon-3);
}
.mono-label a {
  color: inherit;
}
.gqual {
  margin-top: var(--u2);
}
.seclink {
  margin-top: var(--u3);
}
.microline {
  font-family: var(--font-typed);
  font-size: 0.71875rem;
  letter-spacing: 0.02em;
  color: var(--carbon-3);
}

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 0.9375rem var(--font-form);
  letter-spacing: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--carbon);
  color: var(--bond);
}
.btn-primary:hover {
  background: var(--carbon-press);
  color: var(--bond);
}
.btn-ghost {
  background: transparent;
  color: var(--carbon);
  box-shadow: inset 0 0 0 1px var(--carbon);
}
.btn-ghost:hover {
  background: var(--zone);
  color: var(--carbon);
}
.btn-sm {
  padding: 8px 14px;
  font-size: 0.8125rem;
}

/* ---- masthead ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bond);
  border-bottom: 1px solid var(--carbon);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u3);
  padding-block: 10px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-masthead);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon);
  text-decoration: none;
}
.wordmark .mark {
  width: 24px;
  height: 22px;
  flex: none;
}
/* the mark is the thesis: a labeled limit, and the trace that leaves it */
.mark .m-floor {
  stroke: var(--carbon);
  stroke-opacity: 0.55;
  stroke-dasharray: 3 2.6;
}
.mark .m-base {
  stroke: var(--carbon);
  stroke-width: 1.4;
}
.mark .m-trace {
  stroke: var(--evidence);
  stroke-width: 1.7;
}
.navlinks {
  display: flex;
  align-items: center;
  gap: var(--u3);
}
.navlinks a:not(.btn) {
  font: 500 0.875rem var(--font-form);
  color: var(--carbon-2);
  text-decoration: none;
}
.navlinks a:not(.btn):hover {
  color: var(--carbon);
}
.mobnav {
  display: none;
  align-items: center;
  gap: var(--u2);
}
.mobnav a:not(.btn) {
  font: 500 0.875rem var(--font-form);
  color: var(--carbon-2);
  text-decoration: none;
  white-space: nowrap;
}
.mobnav a:not(.btn):hover {
  color: var(--carbon);
}

/* ---- the form: sections and their rule apparatus --------------------------
   Each section opens with the printed form bar: FORM ACT-NN · SECTION NAME.
   The old margin rail collapses into that bar; spines retire. */
main {
  display: block;
}
.sheet {
  padding-block: var(--u8);
}
.sheet--first {
  padding-block: var(--u5) var(--u10);
}
/* under the masthead rule the opening form carries no second rule */
.sheet--first .rail {
  border-top: 0;
  padding-top: 0;
}
.sheet > .wrap {
  display: block;
}
.rail {
  display: block;
  border-top: 2px solid var(--carbon);
  padding-top: 10px;
  margin-bottom: var(--u4);
}
.folio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-masthead);
  font-weight: 500;
  font-size: 0.78125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--carbon);
}
.folio b::before {
  content: 'Form ACT-';
}
.folio b {
  font-weight: 500;
}
.folio span::before {
  content: '· ';
  color: var(--carbon-3);
}
.spine,
.sidenote {
  display: none;
}
.shead {
  margin-bottom: var(--u5);
}
.shead .kicker {
  display: none;
}
.shead h2 {
  margin-bottom: var(--u2);
}

/* ---- hero ----------------------------------------------------------------- */
.hero .sheet-body {
  display: block;
}
.hero-head {
  padding-top: var(--u2);
  max-width: 60rem;
}
.hero-head .kicker {
  display: block;
  margin-bottom: var(--u2);
}
.hero-head h1 {
  margin-bottom: var(--u3);
}
.hero-sub {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--carbon-2);
  max-width: 54ch;
}
.hero-sub strong {
  color: var(--carbon);
  font-weight: 700;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: var(--u4);
}
.cta-microline {
  margin-top: var(--u2);
}

/* one orchestrated moment: the form is stamped in once, top to bottom */
@keyframes stamp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-head .kicker,
.hero-head h1,
.hero-head .hero-sub,
.hero-head .cta-row,
.hero-head .cta-microline {
  animation: stamp var(--slow) var(--ease) both;
}
.hero-head h1 {
  animation-delay: 60ms;
}
.hero-head .hero-sub {
  animation-delay: 120ms;
}
.hero-head .cta-row {
  animation-delay: 180ms;
}
.hero-head .cta-microline {
  animation-delay: 240ms;
}
@media (prefers-reduced-motion: reduce) {
  .hero-head .kicker,
  .hero-head h1,
  .hero-head .hero-sub,
  .hero-head .cta-row,
  .hero-head .cta-microline {
    animation: none;
  }
}

/* ---- the instrument plate ------------------------------------------------- */
.instwrap {
  margin-top: var(--u6);
}
.instrument {
  background: var(--plate);
  border: 1px solid var(--carbon);
  padding: var(--u3) var(--u3) var(--u2);
}
.inst-purpose {
  font-size: 0.9375rem;
  color: var(--carbon-2);
  max-width: 70ch;
  margin-bottom: var(--u2);
}
.inst-purpose strong {
  color: var(--carbon);
}
.inst-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--u3);
  border-top: 1px solid var(--carbon);
  padding-block: 10px 4px;
}
.inst-title {
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.08em;
  color: var(--carbon);
}
.inst-spec {
  font-size: 0.71875rem;
  letter-spacing: 0.06em;
  color: var(--carbon-3);
}
.lamp {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.1em;
}
.lamp .dot {
  width: 9px;
  height: 9px;
  flex: none;
}
/* state is shape + colour: quiet is an outline, watch a diamond, alarm a block */
.lamp.s-stable {
  color: var(--carbon-2);
}
.lamp.s-stable .dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--carbon);
  border-radius: 50%;
}
.lamp.s-watch {
  color: var(--watch-ink);
}
.lamp.s-watch .dot {
  background: var(--watch);
  transform: rotate(45deg);
}
.lamp.s-alarm {
  color: var(--limit);
}
.lamp.s-alarm .dot {
  background: var(--limit);
}
.inst-plot {
  position: relative;
  margin-top: var(--u2);
}
.inst-plot canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 320;
  min-height: 300px;
}
.poster {
  display: block;
}
.poster svg {
  display: block;
  width: 100%;
  height: auto;
}
.js .poster.retired {
  display: none;
}
.tip {
  position: absolute;
  pointer-events: none;
  background: var(--carbon);
  color: var(--bond);
  font-size: 0.71875rem;
  padding: 4px 8px;
  transform: translate(-50%, -130%);
  white-space: nowrap;
}
.inst-outs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--u3);
  border-top: 1px solid var(--rule);
  margin-top: var(--u2);
  padding-top: var(--u2);
}
.out {
  min-width: 0;
}
.out .out-q {
  display: block;
  font: 600 0.8125rem var(--font-form);
  color: var(--carbon);
  margin-bottom: 2px;
}
.out-val {
  display: block;
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--carbon);
}
.out-val.alarmed,
#o-evidence.alarm {
  color: var(--limit);
}
.out .mono-label {
  display: block;
  margin-top: 2px;
}
.out-gloss {
  display: block;
  font-family: var(--font-typed);
  font-size: 0.71875rem;
  color: var(--carbon-3);
  margin-top: 2px;
}
.verdict {
  font-size: 0.9375rem;
  color: var(--carbon-2);
  margin-top: var(--u2);
  min-height: 2.4em;
}
.verdict strong {
  color: var(--carbon);
}
.verdict[data-state='alarm'] {
  color: var(--carbon);
}
.verdict .vcta {
  font-weight: 600;
}
.inst-outcome {
  margin-top: var(--u2);
}
.inst-outcome p {
  font-size: 0.9375rem;
  color: var(--carbon-2);
  max-width: 70ch;
}
.inst-outcome strong {
  color: var(--carbon);
}
.inst-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--rule);
  margin-top: var(--u2);
  padding-top: 12px;
}
.inst-ctl-head {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
  margin-bottom: 2px;
}
/* fault switches: printed toggles; thrown = inked */
.fbtn {
  font: 500 0.8125rem var(--font-form);
  color: var(--carbon);
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 7px 12px;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.fbtn:hover {
  border-color: var(--carbon);
}
.fbtn[aria-pressed='true'] {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--bond);
}
.fbtn.handover {
  border-color: var(--carbon);
}
.transport {
  display: flex;
  gap: 8px;
}
.tbtn {
  font: 500 0.8125rem var(--font-form);
  color: var(--carbon-2);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 7px 12px;
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.tbtn:hover {
  color: var(--carbon);
  border-color: var(--rule-strong);
}
.patience {
  margin-top: 12px;
}
.selfcheck {
  font-family: var(--font-typed);
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
  color: var(--carbon-3);
  border-top: 1px solid var(--rule);
  margin-top: 12px;
  padding-block: 10px 2px;
}
.selfcheck.fail {
  color: var(--limit);
}
.microcap {
  margin-top: 10px;
  max-width: 78ch;
}
.microcap strong {
  color: var(--carbon-2);
}

/* ---- payoff: the alert, field for field ----------------------------------- */
.payoff {
  max-width: 52rem;
  margin-top: var(--u5);
}
.payoff-state {
  display: inline-block;
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carbon-2);
  background: var(--sunk);
  border: 1px solid var(--rule-strong);
  border-bottom: 0;
  padding: 5px 10px;
  margin-bottom: 0;
  vertical-align: bottom;
}
/* ---- the Slack reproduction ----------------------------------------------
   Inside .slack the register is deliberately not ours: it reproduces the Slack
   message pane, light theme, at Slack's own values (px on purpose — it is a
   specimen, not chrome). The frame around it is ours; the attachment bar is
   the one value both registers share: #a82c1b is the failure bar in Slack and
   the limit in ours. Slack Lato is referenced nowhere outside this block.
   Ratified deviation: radii, white ground and Slack link colours are allowed
   here as artifact reproduction, per DESIGN.md build law. */
.slack {
  background: #fff;
  border: 1px solid var(--rule-strong);
  font-family: 'Slack Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.46668;
  color: #1d1c1d;
}
.slack-chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(29, 28, 29, 0.13);
}
.slack-chan-name {
  font-size: 18px;
  font-weight: 900;
}
.slack-hash {
  margin-right: 2px;
}
.slack-chan-sub {
  font-size: 13px;
  color: #616061;
}
.slack-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 20px 16px;
}
.slack-avatar {
  flex: none;
}
.slack-col {
  flex: 1;
  min-width: 0;
}
.slack-meta {
  display: flex;
  align-items: baseline;
}
.slack-who {
  font-size: 15px;
  font-weight: 900;
  color: #1d1c1d;
}
.slack-app {
  align-self: center;
  margin-left: 4px;
  padding: 1px 3px;
  border-radius: 2px;
  background: rgba(29, 28, 29, 0.13);
  color: rgba(29, 28, 29, 0.7);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}
.slack-time {
  margin-left: 8px;
  font-size: 12px;
  color: #616061;
}
.slack-text {
  font-size: 15px;
  line-height: 1.46668;
}
.slack-text strong {
  font-weight: 700;
}
.slack-attach {
  display: flex;
  margin-top: 4px;
  max-width: 600px;
}
.slack-attach-bar {
  flex: none;
  width: 4px;
  border-radius: 8px;
  background: var(--limit);
}
.slack-attach-body {
  flex: 1;
  min-width: 0;
  padding-left: 12px;
}
.slack-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
}
.slack-field--full {
  grid-column: 1 / -1;
}
.slack-field-t {
  display: block;
  font-weight: 700;
}
.slack-field-v {
  display: block;
  overflow-wrap: anywhere;
}
.slack-code {
  padding: 1px 3px;
  border: 1px solid rgba(29, 28, 29, 0.13);
  border-radius: 3px;
  background: rgba(29, 28, 29, 0.04);
  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
  font-size: 12px;
  color: #e01e5a;
  overflow-wrap: anywhere;
}
.slack-link {
  color: #1264a3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.slack-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: #616061;
}
.slack-foot-icon {
  flex: none;
}
@media (max-width: 40rem) {
  .slack-chan {
    padding: 0 12px;
  }
  .slack-msg {
    padding: 8px 12px 14px;
  }
  .slack-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}.payoff-side .mono-label {
  display: block;
  text-transform: none;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.payoff-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u2);
  margin-top: var(--u3);
}
.nb {
  white-space: nowrap;
}
/* the alert composes when the alarm arms */
.js .payoff .payoff-state::after {
  content: '';
}
.js .payoff.is-shown .payoff-state {
  color: var(--limit);
}

/* ---- why this exists ------------------------------------------------------ */
.why-story {
  max-width: 46rem;
}
.why-stamp {
  display: block;
  margin-bottom: var(--u3);
}
.pull-block {
  border-top: 1px solid var(--rule-strong);
  padding-block: var(--u3) 0;
  margin-bottom: var(--u2);
}
.pull {
  font: 300 clamp(1.375rem, 3vw, 1.875rem) / 1.4 var(--font-form);
  letter-spacing: -0.01em;
  color: var(--carbon);
  max-width: 30ch;
  text-wrap: balance;
}
.why-facts {
  display: block;
  margin-bottom: var(--u5);
}
.why-fig {
  margin-block: var(--u4);
  max-width: 486px;
}
.why-fig svg {
  display: block;
  width: 100%;
  height: auto;
}
.why-fig figcaption {
  margin-top: 10px;
}
.why-thesis {
  font: 780 clamp(1.375rem, 2.6vw, 1.75rem) / 1.2 var(--font-form);
  letter-spacing: -0.015em;
  margin-top: var(--u5);
  max-width: 24ch;
}
.why-thesis strong {
  color: var(--carbon-2);
}
.why-close {
  margin-top: var(--u2);
}

/* ---- the record figure ---------------------------------------------------- */
.sheet--record .sheet-body {
  display: block;
}
.record-fig {
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  margin-block: var(--u4);
}
.figtag {
  display: flex;
  justify-content: space-between;
  gap: var(--u3);
  border-bottom: 1px solid var(--rule);
  padding: 8px 14px;
}
.record-fig .rec-plot {
  padding: var(--u2) 14px 6px;
  overflow-x: auto;
}
.record-fig svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}
.record-fig figcaption {
  font-family: var(--font-typed);
  font-size: 0.65625rem;
  letter-spacing: 0.06em;
  color: var(--carbon-3);
  border-top: 1px solid var(--rule);
  padding: 10px 14px;
  line-height: 1.7;
}
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--u5);
  align-items: start;
  margin-top: var(--u5);
}
.offer-line {
  font-size: 1.125rem;
  color: var(--carbon-2);
  max-width: 44ch;
}
.offer-line strong {
  color: var(--carbon);
}

.offer-code pre {
  font-family: var(--font-typed);
  font-size: 0.78125rem;
  line-height: 1.6;
  background: var(--sunk);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  overflow-x: auto;
}
.offer-code .req {
  font-weight: 600;
}
.offer-cap {
  font-size: 0.8125rem;
  color: var(--carbon-2);
  margin-top: 10px;
  max-width: 48ch;
}

/* ---- the guarantee -------------------------------------------------------- */
.sheet--guarantee .sheet-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--u6);
  align-items: start;
}
.gcol {
  min-width: 0;
}
.sheet--guarantee .shead {
  margin-bottom: 0;
}
.gnum {
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.4vw, 3.75rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
}
.glabel {
  display: block;
  margin-top: 6px;
}
.gqual {
  font-size: 0.875rem;
  color: var(--carbon-2);
  margin-top: var(--u2);
  max-width: 44ch;
}
.gbody {
  font-size: 1rem;
  color: var(--carbon-2);
  max-width: 58ch;
}
.gbody strong {
  color: var(--carbon);
}
.cmp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-strong);
  margin-top: var(--u4);
}
.cmp > div {
  padding: 14px 16px 16px 0;
}
.cmp > div + div {
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}
.cmp b {
  display: block;
  font: 700 0.9375rem var(--font-form);
  margin-bottom: 4px;
}
.cmp p {
  font-size: 0.875rem;
  color: var(--carbon-2);
}
.cmp .is-us b {
  color: var(--carbon);
}


/* ---- proof: the figure plate and the certificate -------------------------- */
.figplate {
  background: var(--plate);
  border: 1px solid var(--rule-strong);
}
.figplot {
  padding: var(--u2) 14px 0;
  overflow-x: auto;
}
.figplot svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}
.figplot .figm {
  display: none;
}
/* the proof figure ships a hand-cut mobile variant; swap below 40rem */
@media (max-width: 40rem) {
  .figplot .figd {
    display: none;
  }
  .figplot .figm {
    display: block;
    width: 100%;
    height: auto;
  }
  .figplot svg.figm {
    min-width: 0;
  }
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  margin-top: var(--u2);
}
.stat {
  padding: 12px 14px;
}
.stat + .stat {
  border-left: 1px solid var(--rule);
}
.stat .mono-label {
  display: block;
  margin-bottom: 2px;
}
.stat b {
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.stat b.alarmnum {
  color: var(--limit);
}
.figplate figcaption {
  font-size: 0.8125rem;
  color: var(--carbon-2);
  border-top: 1px solid var(--rule);
  padding: 12px 14px;
  line-height: 1.6;
}
.stable-fact {
  font-size: 0.9375rem;
  color: var(--carbon-2);
  max-width: 66ch;
  margin-top: var(--u3);
}

/* the certificate: the one framed object on the page */
.certrow {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--u5);
  align-items: start;
  margin-top: var(--u8);
}
.specimen-frame {
  position: relative;
  background: var(--plate);
  border: 1px solid var(--carbon);
  outline: 1px solid var(--rule-strong);
  outline-offset: 4px;
  padding: var(--u3);
  margin: 5px;
}
.specimen-guilloche {
  display: none;
}
.specimen-head .mono-label {
  display: block;
}
.specimen-title {
  font-family: var(--font-masthead);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block: 6px 2px;
}
.specimen dl {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 7px 16px;
  border-top: 1px solid var(--rule);
  margin-top: var(--u2);
  padding-top: var(--u2);
}
.specimen dt {
  font: 600 0.65625rem var(--font-form);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--carbon-3);
  padding-top: 3px;
}
.specimen dd {
  font-family: var(--font-typed);
  font-size: 0.75rem;
  line-height: 1.5;
  word-break: break-word;
}
.specimen dd.strong {
  font-weight: 600;
}
.specimen dd.alarm {
  color: var(--limit);
  font-weight: 600;
}
.specimen-foot {
  border-top: 1px solid var(--rule);
  margin-top: var(--u2);
  padding-top: 12px;
}
.specimen-foot .microline {
  display: block;
}
.specimen-keyprint {
  display: block;
  margin-top: 10px;
}
.specimen-keyprint svg {
  display: block;
  margin-top: 6px;
}
.specimen-sig {
  display: block;
  margin-top: 12px;
}
/* the signature drawn as a mark: a stamp, not an ornament */
.specimen-sig svg {
  display: block;
  width: 116px;
  height: auto;
  margin-left: auto;
  opacity: 0.9;
}
.pathcard h3 {
  margin-block: 4px 8px;
}
.pathcard .body {
  margin-bottom: var(--u2);
}
.verifyblock pre {
  font-family: var(--font-typed);
  font-size: 0.78125rem;
  line-height: 1.7;
  background: var(--carbon);
  color: var(--bond);
  padding: 14px 16px;
  overflow-x: auto;
}
.verifyblock .cmd {
  color: var(--bond);
  font-weight: 600;
}
.verifyblock .pass {
  font-weight: 600;
  letter-spacing: 0.06em;
}
.verify-note {
  display: block;
  margin-top: 8px;
}
.cert-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.875rem;
  margin-top: var(--u2);
}
.pathcard .cta-row {
  margin-top: var(--u3);
}

/* ---- the watchtower board ------------------------------------------------- */
.wt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u2);
  margin-top: var(--u4);
}

/* ---- where it fails: the published limit ----------------------------------
   The signature device off the chart: a red rule, labeled, printed above the
   section that states the instrument's own misfire conditions. The red rule
   IS this section's rule — the form bar above it stays unruled. */
#fails .rail {
  border-top: 0;
  padding-top: 0;
  margin-bottom: 12px;
}
.disclosure {
  position: relative;
  border-top: 2px solid var(--limit);
  padding-top: var(--u4);
}
.disclosure::before {
  content: 'LIMIT · PUBLISHED';
  position: absolute;
  top: -0.55em;
  right: 0;
  font: 600 0.625rem var(--font-typed);
  letter-spacing: 0.1em;
  color: var(--limit);
  background: var(--bond);
  padding-left: 10px;
}
.disclosure .kicker {
  display: none;
}
.disclosure h2 {
  max-width: 30ch;
}
.readas {
  font-family: var(--font-typed);
  font-size: 0.71875rem;
  letter-spacing: 0.02em;
  color: var(--carbon-3);
  margin-top: var(--u2);
}
.failgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--u5);
  align-items: start;
  margin-top: var(--u4);
}
.failstat b {
  display: block;
  font-family: var(--font-typed);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--limit);
}
.failstat .mono-label {
  display: block;
  margin-top: 10px;
  max-width: 40ch;
  line-height: 1.7;
}
.disclosure .body {
  max-width: 58ch;
}
.disclosure .quietlink {
  margin-top: var(--u2);
}

/* ---- start ---------------------------------------------------------------- */
.sheet--start {
  padding-bottom: var(--u10);
}
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--u6);
  align-items: start;
}
.start-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--u4);
}
.qualbar {
  display: block;
  margin-top: var(--u3);
  text-transform: none;
  letter-spacing: 0.04em;
  max-width: 52ch;
  line-height: 1.7;
}
/* the operator's note: typed, initialled */
.operator {
  background: var(--sunk);
  border: 1px solid var(--rule);
  padding: var(--u3);
}
.operator p {
  font-family: var(--font-typed);
  font-size: 0.78125rem;
  line-height: 1.7;
  color: var(--carbon-2);
}
.operator .sig {
  display: block;
  font-weight: 600;
  color: var(--carbon);
  margin-top: 10px;
}

/* ---- footer: end of form -------------------------------------------------- */
footer.site {
  border-top: 2px solid var(--carbon);
  padding-block: var(--u6) var(--u4);
}
footer.site .foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--u4);
}
.foot-brand .wordmark {
  margin-bottom: 10px;
}
.foot-brand p {
  font-size: 0.875rem;
  color: var(--carbon-2);
  max-width: 34ch;
}
.foot-col h4 {
  font: 600 0.65625rem var(--font-typed);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--carbon-3);
  margin-bottom: 10px;
}
.foot-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}
.foot-col a {
  font-size: 0.875rem;
  color: var(--carbon-2);
  text-decoration: none;
}
.foot-col a:hover {
  color: var(--evidence);
  text-decoration: underline;
}
.foot-mark {
  margin-top: var(--u6);
  color: var(--carbon);
  user-select: none;
}
.foot-mark .tickrule {
  display: block;
  width: 100%;
  height: 14px;
}
.foot-word {
  display: block;
  font-family: var(--font-masthead);
  font-weight: 600;
  font-size: clamp(2.75rem, 10vw, 8.25rem);
  line-height: 1.04;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(27, 29, 28, 0.09);
  white-space: nowrap;
  overflow: hidden;
  transition: color 200ms var(--ease);
}
.foot-mark:hover .foot-word {
  color: rgba(27, 29, 28, 0.18);
}
.colophon {
  font-size: 0.8125rem;
  color: var(--carbon-2);
  margin-top: var(--u4);
  max-width: 86ch;
  line-height: 1.7;
}
.copyright {
  font-size: 0.71875rem;
  color: var(--carbon-3);
  margin-top: var(--u2);
}

/* motion stops fully under reduced motion, matching site.css */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* the closing moment: the tick rule draws and the ghost word rises with the
   reader's own scroll — transform/opacity only, still under reduced motion */
@supports (animation-timeline: view()) {
  .foot-mark .tickrule {
    transform-origin: left;
    animation: tickdraw linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 90%;
  }
  .foot-word {
    animation: wordrise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  @keyframes tickdraw {
    from {
      transform: scaleX(0.24);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  @keyframes wordrise {
    from {
      transform: translateY(26px);
      opacity: 0.35;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .foot-mark .tickrule,
    .foot-word {
      animation: none;
    }
  }
}

/* ---- reveal system (JS-gated; base state = visible) ----------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--slow) var(--ease),
    transform var(--slow) var(--ease);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 62rem) {
  .navlinks {
    display: none;
  }
  .mobnav {
    display: flex;
  }
  .offer,
  .certrow,
  .failgrid,
  .start-grid,
  .sheet--guarantee .sheet-body {
    grid-template-columns: 1fr;
    gap: var(--u4);
  }
  .inst-outs {
    grid-template-columns: 1fr;
    gap: var(--u2);
  }
  .statrow {
    grid-template-columns: 1fr 1fr;
  }
  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-top: 1px solid var(--rule);
  }
  .stat:nth-child(3) {
    border-left: 0;
  }
  .cmp {
    grid-template-columns: 1fr;
  }
  .cmp > div + div {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
  }
  footer.site .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--u4) var(--u3);
  }
  .sheet {
    padding-block: var(--u8);
  }
}
@media (max-width: 40rem) {
  body {
    font-size: 1rem;
  }
  .wrap {
    padding-inline: var(--u2);
  }
  .rail {
    margin-bottom: var(--u4);
  }
  .statrow {
    grid-template-columns: 1fr;
  }
  .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .inst-head {
    align-items: flex-start;
  }
  .lamp {
    margin-left: 0;
  }
  .transport {
    margin-left: 0;
  }
  .foot-word {
    letter-spacing: 0.2em;
  }
  footer.site .foot-top {
    grid-template-columns: 1fr;
  }
}