@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Instrument ground. Two grounds hard-cut on this page, so paper carries the
   second stop of the same red. */
:root {
  --sc-canvas: #101318;
  --sc-surface: #1a1e25;
  --sc-ink: #f3efea;
  --sc-ink-soft: #aeb2b8;
  --sc-accent: #ff7f84;
  --sc-accent-ink: #1a0709;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Archivo", system-ui, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, monospace;
  --sc-section: clamp(3.5rem, 7vw, 7rem);

  --rail: 13.5rem;
  --bar: 2.5rem;
  --top: 0px;
  --chrome: #0b0d11;
  --sheet: #f8f4f1;
  --grid: #e8a3a0;
  --grid-major: #dc7672;
  --carbon: #191b20;
  --red: #b4152f;
}

.paper {
  --sc-canvas: var(--sheet);
  --sc-surface: #fff;
  --sc-ink: var(--carbon);
  --sc-ink-soft: #565a62;
  --sc-accent: var(--red);
  --sc-accent-ink: #fff;
  --sc-hairline: #d9c7c4;
  color: var(--sc-ink);
  background-color: var(--sheet);
  /* 5 mm squares, faint enough to set body text on. */
  background-image:
    linear-gradient(to right, rgb(220 118 114 / 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(220 118 114 / 0.16) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}

html { scroll-padding-block: var(--top) calc(var(--bar) + 1rem); }
body { font-size: 1.0625rem; }
h1, h2, h3 { font-family: var(--sc-font-display); margin: 0; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
.paper a { color: var(--red); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 90;
  padding: 0.5rem 1rem; background: var(--sc-ink); color: var(--sc-canvas);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

main { margin-left: var(--rail); }

/* Surface idiom: labels, not marketing display type. */
.surface-h {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
}

/* ------------------------------------------------------------ app chrome -- */
.app-rail {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--rail);
  padding: 1.25rem 1rem calc(var(--bar) + 1rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  background: var(--chrome);
  border-right: 1px solid #252a33;
}
.app-rail nav { display: flex; flex-direction: column; flex: 1; gap: 1.25rem; min-height: 0; }
.app-rail__mark {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 1.05rem; text-decoration: none; letter-spacing: -0.01em;
}
.app-rail__mark svg { width: 2rem; height: 0.8rem; fill: none; stroke: var(--sc-accent); stroke-width: 1.5; }
.app-rail__steps { list-style: none; margin: 0; padding: 0; font-family: var(--sc-font-mono); font-size: 0.82rem; }
ol.app-rail__steps { counter-reset: step; }
ol.app-rail__steps li { counter-increment: step; }
ol.app-rail__steps a::before { content: counter(step) " "; color: #868b94; }
.app-rail__steps--ref { padding-top: 1.25rem; border-top: 1px solid #252a33; }
.app-rail__steps a {
  display: block; padding: 0.42rem 0.6rem; border-radius: var(--sc-r-sm);
  color: #c2c5ca; text-decoration: none;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.app-rail__steps a[aria-current="true"] { background: #232831; color: #fff; }
@media (hover: hover) and (pointer: fine) { .app-rail__steps a:hover { color: #fff; background: #1b1f27; } }
.app-rail__go {
  margin-top: auto; padding: 0.6rem 0.7rem; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 650; font-size: 0.9rem; text-align: center; text-decoration: none; line-height: 1.25;
}

.statusbar {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  min-height: var(--bar); padding: 0.4rem 1rem;
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--chrome); border-top: 1px solid #252a33;
  font-family: var(--sc-font-mono); font-size: 0.76rem; line-height: 1.3; color: #c2c5ca;
}
.statusbar strong { color: var(--sc-accent); font-weight: 600; }
.statusbar__live { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }

.cta {
  display: inline-block; padding: 0.72rem 1.1rem; border: 1px solid transparent; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 650 1rem/1.2 var(--sc-font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 120ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.cta:active { transform: translateY(1px); }
.cta--ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #ff979b; }
  .cta--ghost:hover { background: rgb(255 255 255 / 0.08); }
}

/* ----------------------------------------------------------- 1 · capture -- */
.hero__stage { background: #1c2026; }
.hero__desk {
  position: absolute; inset: -5%;
  background:
    radial-gradient(70% 60% at 62% 68%, #4b525c 0%, transparent 70%),
    linear-gradient(160deg, #15181d, #262b33);
}
.hero__scene { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 55% 40%; }
.hero__sheet, .hero__under {
  position: absolute; left: 0; top: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
.hero__sheet { box-shadow: 0 2px 4px rgb(5 8 12 / 0.4), 0 30px 60px -14px rgb(5 8 12 / 0.65); }
.hero__under { background: #e6e1dc; box-shadow: 0 18px 40px -12px rgb(5 8 12 / 0.6); }
.hero__svg { display: block; width: 100%; height: 100%; background: var(--sheet); }
/* Window shadow plus two folds. Evening these out is the step being shown. */
.hero__shade {
  position: absolute; inset: 0; pointer-events: none; will-change: opacity;
  background:
    linear-gradient(112deg, transparent 22%, rgb(20 24 34 / 0.44) 34%, rgb(20 24 34 / 0.38) 52%, transparent 66%),
    linear-gradient(90deg, transparent 33%, rgb(20 24 34 / 0.2) 33.2%, rgb(255 255 255 / 0.4) 33.5%, transparent 34.6%),
    linear-gradient(90deg, transparent 69%, rgb(20 24 34 / 0.18) 69.2%, rgb(255 255 255 / 0.34) 69.5%, transparent 70.6%),
    linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(40 28 20 / 0.14));
}
.hero__corner { position: absolute; width: 1.75rem; height: 1.75rem; border: 3px solid var(--red); opacity: var(--found, 0); }
.hero__corner--tl { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.hero__corner--tr { right: -2px; top: -2px; border-left: 0; border-bottom: 0; }
.hero__corner--bl { left: -2px; bottom: -2px; border-right: 0; border-top: 0; }
.hero__corner--br { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }

.hero__phone {
  position: absolute; right: 7%; bottom: -14%; z-index: 5;
  width: clamp(13rem, 21vw, 19rem); aspect-ratio: 9 / 18.5;
  padding: 0.7rem; border-radius: 2.5rem;
  background: #07090c;
  box-shadow: inset 0 0 0 2px #333943, 0 40px 70px -18px rgb(3 5 8 / 0.8);
  will-change: transform;
}
.hero__glass {
  position: relative; height: 100%; border-radius: 1.9rem;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.015) 40%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.hero__glass i { position: absolute; width: 1.6rem; height: 1.6rem; border: 2px solid #fff; opacity: 0.92; }
.hero__glass i:nth-child(1) { left: 12%; top: 16%; border-right: 0; border-bottom: 0; }
.hero__glass i:nth-child(2) { right: 12%; top: 16%; border-left: 0; border-bottom: 0; }
.hero__glass i:nth-child(3) { left: 12%; bottom: 26%; border-right: 0; border-top: 0; }
.hero__glass i:nth-child(4) { right: 12%; bottom: 26%; border-left: 0; border-top: 0; }
.hero__glass b { position: absolute; left: 50%; bottom: 8%; width: 3rem; height: 3rem; margin-left: -1.5rem; border-radius: 50%; border: 3px solid #fff; }

.hero__copy {
  position: absolute; z-index: 10; left: clamp(1.5rem, 4vw, 3.5rem); top: clamp(1.5rem, 6vh, 4rem);
  max-width: min(44rem, 62%);
}
.hero__copy h1 {
  font-size: clamp(2.2rem, 1.3rem + 2.7vw, 4rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero__tag {
  display: inline-block; margin-bottom: 0.9rem; padding: 0.3rem 0.6rem;
  border: 1px solid var(--sc-accent); border-radius: var(--sc-r-sm);
  font: 500 var(--sc-t-sm)/1.3 var(--sc-font-mono); color: var(--sc-ink);
}
.hero__sub { margin-top: 0.9rem; max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.35; color: #dcdad6; }
.hero__copy .cta { margin-top: 1.4rem; }

/* ------------------------------------------------------------ 2 · upload -- */
.upload { padding-inline: clamp(1.5rem, 5vw, 5rem); padding-bottom: calc(var(--sc-section) * 0.7); }
.preview-note { margin-bottom: 2rem; padding-bottom: 1.25rem; max-width: 66ch; font-weight: 600; border-bottom: 2px solid var(--carbon); }
.upload__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.upload .sc-lede { font-size: var(--sc-t-lg); line-height: 1.42; max-width: 42ch; color: var(--sc-ink); letter-spacing: -0.01em; }
.accepts { margin: 1.75rem 0 0; }
.accepts div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--sc-hairline); }
.accepts dt { font-family: var(--sc-font-mono); font-size: 0.85rem; color: var(--sc-ink-soft); padding-top: 0.15rem; }
.accepts dd { margin: 0; }
.warning { padding: 1.5rem; background: var(--carbon); color: #f3efea; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2); }
.warning h2 { font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.warning p + p { margin-top: 0.75rem; }
.warning__now { font-weight: 600; color: #fff; }
.sample-note { margin-top: 2.5rem; max-width: 68ch; }

/* ------------------------------------------------------------- 3 · peak -- */
.peak__stage { background: var(--sheet); }
.peak__layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.peak__paper { background: var(--sheet); }
.peak__ink { background: var(--sc-canvas); clip-path: inset(0 100% 0 0); will-change: clip-path; }
.peak__scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--sc-accent); opacity: 0; will-change: transform, opacity;
}
.panel {
  position: absolute; z-index: 10;
  left: clamp(1rem, 3vw, 2.5rem); bottom: calc(var(--bar) + clamp(1rem, 3vw, 2.5rem));
  width: min(27rem, calc(100% - 2rem));
  padding: 1rem 1.15rem;
  background: var(--chrome); color: #f3efea;
  border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2);
}
.panel .surface-h { color: var(--sc-accent); margin-bottom: 0.4rem; }
.panel__demo { margin-bottom: 0.5rem; font-weight: 650; }
.panel__read { margin-top: 0.5rem; font-family: var(--sc-font-mono); font-size: 0.85rem; line-height: 1.45; font-variant-numeric: tabular-nums; }

/* SVG ink, shared by every drawn sheet. */
.g-minor { stroke: var(--grid); stroke-width: 0.08; fill: none; }
.g-major { stroke: var(--grid-major); stroke-width: 0.22; fill: none; }
.trace { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trace--ink { stroke: var(--carbon); stroke-width: 1.5; }
.trace--light { stroke: #f3efea; stroke-width: 1.6; }
.trace--main { stroke: #fff; stroke-width: 2.2; }
.trace--over { stroke: var(--red); stroke-width: 1.8; }
.sheet-text { fill: var(--carbon); font-family: var(--sc-font-mono); }
.sheet-text--light { fill: #aeb2b8; }
.redact { fill: var(--carbon); }
.ruler { stroke: var(--red); fill: none; vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.ruler-text { fill: var(--red); font-family: var(--sc-font-mono); font-weight: 600; }
.axis { stroke: #39404b; vector-effect: non-scaling-stroke; stroke-width: 1; }
.axis-text { fill: #aeb2b8; font-family: var(--sc-font-mono); }
.beat { fill: var(--sc-accent); }
.beat--paper { fill: var(--red); }
.rr-text { fill: #f3efea; font-family: var(--sc-font-mono); text-anchor: middle; }
.playhead { stroke: var(--sc-accent); vector-effect: non-scaling-stroke; stroke-width: 1.5; }

/* ---------------------------------------------------------- 4 · analyse -- */
.analyse__stage { background: var(--sc-canvas); display: flex; align-items: center; }
.readouts {
  display: flex; align-items: stretch; width: max-content;
  /* The engine travels scrollWidth minus the window width, and this rail starts
     past the app chrome, so the end padding has to cover that chrome as well. */
  padding-inline: clamp(1.5rem, 4vw, 3.5rem) calc(var(--rail) + 3rem);
  padding-bottom: var(--bar);
}
.readout {
  flex: none; width: clamp(17rem, 25vw, 23rem);
  padding: 0.5rem clamp(1.25rem, 2.2vw, 2rem) 0.5rem;
  border-left: 1px solid var(--sc-hairline);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.readout:first-child { border-left: 0; padding-left: 0; }
.readout h3 { font: 500 var(--sc-t-sm)/1.3 var(--sc-font-mono); color: var(--sc-accent); }
.readout--lead .surface-h { color: var(--sc-accent); }
.readout--lead > p:first-of-type { font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.readout--hr { width: clamp(19rem, 30vw, 27rem); }
.readout__fine { font-size: 0.9rem; line-height: 1.45; color: var(--sc-ink-soft); margin-top: auto; }
.readout__state { font-size: 0.92rem; line-height: 1.45; padding-top: 0.75rem; border-top: 1px solid var(--sc-hairline); }
.big { font-size: clamp(5.5rem, 11vw, 10rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.big small { display: block; margin-top: 0.75rem; font: 500 var(--sc-t-sm)/1.3 var(--sc-font-mono); letter-spacing: 0; color: var(--sc-ink-soft); }
.minmax { font-family: var(--sc-font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; margin-top: auto; }
.plot { display: block; width: 100%; height: clamp(9rem, 26vh, 15rem); }
.plot--sq { height: auto; aspect-ratio: 1; max-height: 34vh; }
.plot-line { fill: none; stroke: var(--sc-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.plot-dot { fill: var(--sc-accent); }
.plot-frame { fill: none; stroke: #39404b; vector-effect: non-scaling-stroke; stroke-width: 1; }
.stats { margin: 0; }
.stats div { display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--sc-hairline); }
.stats dt { font-family: var(--sc-font-mono); font-size: 0.85rem; color: var(--sc-ink-soft); }
.stats dd { margin: 0; font-size: var(--sc-t-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.classes { list-style: none; margin: 0; padding: 0; font-family: var(--sc-font-mono); font-size: 0.85rem; line-height: 1.8; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------ 5 · check -- */
.check { padding: var(--sc-section) clamp(1.5rem, 5vw, 5rem) calc(var(--sc-section) * 0.6); }
.check__line { margin-top: 0.75rem; max-width: 22ch; font-size: var(--sc-t-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.check__fig { position: relative; margin: 2.5rem calc(clamp(1.5rem, 5vw, 5rem) * -1) 0; }
.check__svg { display: block; width: 100%; height: auto; }
.check__svg--paper { background: var(--sheet); }
.check__overlay { position: absolute; left: 0; right: 0; top: 0; }
.check__fig figcaption { margin: 1rem clamp(1.5rem, 5vw, 5rem) 0; max-width: 66ch; color: var(--sc-ink-soft); font-size: 0.98rem; }
.check__dl { margin-top: 1.5rem; max-width: 66ch; }

/* ----------------------------------------------------------- 6 · ledger -- */
.ledger { padding: 0 clamp(1.5rem, 5vw, 5rem) var(--sc-section); }
.ledger__intro { padding: 1.5rem 0; border-top: 2px solid var(--carbon); max-width: 66ch; font-weight: 600; }
.ledger__row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); padding: 2.5rem 0; border-top: 1px solid var(--sc-hairline); scroll-margin-top: 1rem; }
.ledger__row .surface-h { color: var(--sc-accent); font-size: var(--sc-t-base); }
.ledger__body { max-width: 50rem; min-width: 0; }
.ledger__body > * + * { margin-top: 1.1rem; }
.datasets { width: 100%; border-collapse: collapse; font-size: 0.98rem; line-height: 1.45; }
.datasets th, .datasets td { text-align: left; vertical-align: top; padding: 0.65rem 1.25rem 0.65rem 0; border-top: 1px solid var(--sc-hairline); font-weight: 400; }
.datasets thead th { border-top: 0; font: 500 0.8rem var(--sc-font-mono); color: var(--sc-ink-soft); padding-top: 0; }
.datasets tbody th { font-weight: 600; width: 34%; }
.results { padding: 1.25rem; background: var(--carbon); color: #f3efea; border-radius: var(--sc-r-sm); }
.results h3 { font: 500 var(--sc-t-sm) var(--sc-font-mono); color: #ff7f84; margin-bottom: 0.4rem; }
.results__empty { margin-top: 0.75rem; font-size: var(--sc-t-lg); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
.facts { list-style: none; margin: 0; padding: 0; color: var(--sc-ink-soft); }
.facts li { padding: 0.8rem 0; border-top: 1px solid var(--sc-hairline); }
.facts li:first-child { border-top: 0; padding-top: 0; }
.facts strong { display: block; font-weight: 650; color: var(--sc-ink); }
.stages { list-style: none; margin: 0; padding: 0; }
.stages li { padding: 0.8rem 0 0.8rem 1.1rem; border-left: 1px solid var(--sc-hairline-strong); margin: 0; }
.stages h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.stages em { margin-left: 0.4rem; font: 500 0.8rem var(--sc-font-mono); color: var(--red); }
.stages p { color: var(--sc-ink-soft); }
.stages .is-today { border-left: 3px solid var(--red); padding-left: calc(1.1rem - 2px); }
details { border-top: 1px solid var(--sc-hairline); margin-top: 0 !important; }
details:first-child { border-top: 0; }
summary { padding: 0.75rem 0; font-weight: 650; cursor: pointer; }
details p { padding-bottom: 0.9rem; color: var(--sc-ink-soft); max-width: 62ch; }
.cites { margin: 0; padding-left: 1.1rem; font-size: 0.95rem; color: var(--sc-ink-soft); }
.cites li + li { margin-top: 0.4rem; }

/* ---------------------------------------------------------- 7 · measure -- */
.measure__stage { background: var(--sc-canvas); display: flex; align-items: center; }
.measure__inner { width: 100%; padding: 1rem clamp(1.5rem, 4vw, 3.5rem) calc(var(--bar) + 1rem); }
.measure__h { font-size: var(--sc-t-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.measure__how { margin-top: 0.75rem; max-width: 56ch; color: #dcdad6; }
.caliper { position: relative; margin-top: 1.25rem; border-radius: var(--sc-r-sm); overflow: hidden; }
.caliper__svg { display: block; width: 100%; height: auto; background: var(--sheet); }
.arm-line { stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; }
.arm-line.is-focus { stroke-width: 5; }
.arm-span { stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; }
.arm-label { fill: var(--red); font-family: var(--sc-font-mono); font-weight: 600; text-anchor: middle; }
/* Two ranges stacked: the track ignores the pointer so only each thumb is live. */
.caliper__arm {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  background: none; pointer-events: none; appearance: none; -webkit-appearance: none;
  touch-action: pan-y;
}
.caliper__arm::-webkit-slider-runnable-track { background: none; height: 100%; }
.caliper__arm::-moz-range-track { background: none; }
.caliper__arm::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: ew-resize;
  width: 44px; height: 100%; background: linear-gradient(90deg, transparent 21px, rgb(180 21 47 / 0.08) 21px, rgb(180 21 47 / 0.08) 23px, transparent 23px);
  border: 0;
}
.caliper__arm::-moz-range-thumb {
  pointer-events: auto; cursor: ew-resize; width: 44px; height: 100%; background: transparent; border: 0;
}
.caliper__arm:focus-visible { outline: none; }
.caliper__out { display: flex; flex-wrap: wrap; gap: 0.5rem clamp(1.5rem, 4vw, 4rem); margin-top: 1rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.caliper__out strong { font-size: var(--sc-t-xl); letter-spacing: -0.02em; margin-right: 0.3rem; }
.caliper__k { display: block; font: 500 0.78rem/1.3 var(--sc-font-mono); color: var(--sc-ink-soft); }
.caliper__diff { color: var(--sc-accent); font-weight: 600; }
.measure__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.25rem; }
.measure__fine { font: 400 0.8rem/1.35 var(--sc-font-mono); color: var(--sc-ink-soft); }

.noscript { margin: 0 0 3rem var(--rail); padding: 1rem 2rem; }

/* ---------------------------------------------- phones and narrow windows -- */
@media (max-width: 1000px) {
  :root { --rail: 0px; --bar: 3.1rem; --top: 3rem; }
  main { margin-left: 0; }
  .noscript { margin-left: 0; }
  .app-rail {
    inset: 0 0 auto 0; width: auto; height: var(--top);
    padding: 0 0 0 1rem; flex-direction: row; align-items: center; gap: 0.9rem;
    border-right: 0; border-bottom: 1px solid #252a33;
  }
  .app-rail__mark { flex: none; font-size: 0.95rem; }
  .app-rail__mark svg { display: none; }
  .app-rail nav { flex-direction: row; align-items: center; gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .app-rail nav::-webkit-scrollbar { display: none; }
  .app-rail__steps { display: flex; flex: none; font-size: 0.8rem; }
  .app-rail__steps a { padding: 0.75rem 0.55rem; white-space: nowrap; }
  ol.app-rail__steps a::before { content: none; }
  .app-rail__steps--ref { padding-top: 0; border-top: 0; }
  .app-rail__go { flex: none; margin: 0 0.75rem; white-space: nowrap; font-size: 0.8rem; padding: 0.4rem 0.6rem; }

  .statusbar { flex-wrap: wrap; align-content: center; gap: 0 0.75rem; padding: 0.3rem 0.75rem; font-size: 0.7rem; }
  .statusbar__live { display: none; }

  .hero__copy { top: calc(var(--top) + 1.1rem); left: 1.25rem; right: 1.25rem; max-width: none; }
  .hero__copy h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .hero__tag { margin-bottom: 0.6rem; font-size: 0.75rem; }
  .hero__sub { font-size: 1.05rem; margin-top: 0.6rem; }
  .hero__copy .cta { margin-top: 0.9rem; }
  .hero__phone { width: 10.5rem; right: -1.25rem; bottom: -5.5rem; padding: 0.45rem; border-radius: 1.8rem; }
  .hero__glass { border-radius: 1.4rem; }
  .hero__glass i { width: 1.1rem; height: 1.1rem; }
  .hero__glass b { width: 2.1rem; height: 2.1rem; margin-left: -1.05rem; }

  .upload { padding-top: 3.5rem; scroll-margin-top: var(--top); }
  .upload__grid { grid-template-columns: 1fr; gap: 2rem; }

  .panel { left: 0.75rem; bottom: calc(var(--bar) + 0.75rem); width: calc(100% - 1.5rem); padding: 0.8rem 0.95rem; font-size: 0.95rem; line-height: 1.4; }

  .analyse__stage { padding-top: var(--top); }
  .readouts { padding-right: 3rem; align-items: flex-start; }
  .readout { width: min(82vw, 21rem); }
  .readout--hr { width: min(86vw, 22rem); }
  .big { font-size: clamp(6rem, 30vw, 8rem); }
  .plot { height: min(38vh, 16rem); }
  .plot--sq { height: auto; width: min(72vw, 40vh); }
  .readout__fine, .minmax { margin-top: 0; }

  .check, .ledger__row { scroll-margin-top: var(--top); }
  .check__line { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .ledger__row { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
  .datasets, .datasets tbody, .datasets tr, .datasets th, .datasets td { display: block; width: auto !important; }
  .datasets thead { display: none; }
  .datasets tr { padding: 0.65rem 0; border-top: 1px solid var(--sc-hairline); }
  .datasets th, .datasets td { border: 0; padding: 0; }

  .measure__inner { padding: calc(var(--top) + 0.5rem) 1rem calc(var(--bar) + 0.5rem); }
  .measure__h { font-size: clamp(2rem, 9vw, 3rem); }
  .measure__how { font-size: 0.98rem; line-height: 1.4; margin-top: 0.4rem; }
  .caliper { margin-top: 0.75rem; }
  .caliper__out { margin-top: 0.7rem; gap: 0.3rem 1.25rem; }
  .measure__actions { margin-top: 0.75rem; gap: 0.5rem; }
  .measure__actions .cta { padding: 0.65rem 0.85rem; font-size: 0.92rem; }
}

@media (max-height: 640px) and (max-width: 1000px) {
  .measure__how { display: none; }
  .hero__sub { display: none; }
}

@media (max-height: 720px) and (min-width: 1001px) {
  .measure__h { font-size: var(--sc-t-2xl); }
  .measure__how { margin-top: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .peak__ink { clip-path: none; transition: opacity 220ms linear; }
  .hero__sheet, .hero__under, .hero__phone { will-change: auto; }
  /* No sideways travel: the readouts wrap, so vertical scroll reaches all of them. */
  .analyse { height: auto !important; }
  .analyse__stage { position: static; height: auto !important; overflow: visible !important; display: block; padding-block: calc(var(--top) + 3rem) calc(var(--bar) + 3rem); }
  .readouts { width: auto; flex-wrap: wrap; row-gap: 2.5rem; padding-inline: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: 0; }
  .readout, .readout--hr { width: min(100%, 23rem); }
}