/* dipstick.tools — the instrument panel. One hand-authored sheet, no framework.
   Linked, not inlined, so the pre-paint theme script is head's first child. */

/* 1. Tokens */

:root {
  color-scheme: dark;

  --f-sans: ui-sans-serif, -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* type scale — nothing below 12px exists on this site */
  --t-spec: 0.75rem;
  --t-meta: 0.8125rem;
  --t-small: 0.875rem;
  --t-base: 1rem;
  --t-prose: 1.0625rem;
  --t-lead: 1.3125rem;
  --t-h3: 1.625rem;
  --t-h2: 2.125rem;
  --t-h1: 2.875rem;
  --t-pace: clamp(1.375rem, 2.4vw + 0.85rem, 2.125rem);

  /* 4px ramp */
  --sp1: 4px;  --sp2: 8px;  --sp3: 12px; --sp4: 16px; --sp5: 24px;
  --sp6: 32px; --sp7: 48px; --sp8: 64px; --sp9: 96px; --sp10: 128px;

  --band-y: var(--sp9);
  --frame: 1280px;
  --content: 1040px;
  --wide: 1180px;
  --measure: 68ch;

  --r1: 2px;
  --r2: 3px;
  --capsule: 999px;

  --ease-instrument: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* a spring: ~4% overshoot, then settle */
  --ease-blade: linear(0, .035, .129, .266, .428, .599, .761, .903, 1.013, 1.042,
    1.039, 1.016, .996, .994, .998, 1);
  --dur-blade: 520ms;
  --dur-fill: 480ms;
  --dur-chrome: 160ms;

  /* surfaces */
  --ground: #080a09;
  --band: #0e1211;
  --raised: rgba(255, 255, 255, 0.045);
  --hair: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.17);

  --ink: #edf1ee;
  --ink-2: #9ba6a1;
  --ink-3: #7e8984;
  --marker: #f2f5f2;

  --track: #212322;
  --track-band: #212322;
  --tick: rgba(255, 255, 255, 0.22);
  --tick-major: rgba(255, 255, 255, 0.42);
  --bevel-hi: rgba(255, 255, 255, 0.08);
  --bevel-lo: rgba(0, 0, 0, 0.55);

  --ahead: #31d07c;
  --behind: #f2b233;
  --low: #ff6a55;

  --cta-bg: #f2f5f2;
  --cta-fg: #080a09;
  --hatch-ink: rgba(0, 0, 0, 0.36);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light; --ground: #f4f6f3; --band: #eaeee8; --raised: rgba(10, 14, 12, 0.04);
    --hair: rgba(10, 14, 12, 0.12); --hair-strong: rgba(10, 14, 12, 0.22); --ink: #101412;
    --ink-2: #454e49; --ink-3: #5c665f; --marker: #101412; --track: #dddfdc;
    --track-band: #d4d8d2; --tick: rgba(10, 14, 12, 0.26); --tick-major: rgba(10, 14, 12, 0.46);
    --bevel-hi: rgba(255, 255, 255, 0.9); --bevel-lo: rgba(10, 14, 12, 0.18); --ahead: #0a7340;
    --behind: #8a5300; --low: #c0331f; --cta-bg: #101412; --cta-fg: #f4f6f3; --hatch-ink: rgba(255, 255, 255, 0.34);
  }
}

:root[data-theme='light'],
[data-theme='light'] {
  color-scheme: light; --ground: #f4f6f3; --band: #eaeee8; --raised: rgba(10, 14, 12, 0.04);
  --hair: rgba(10, 14, 12, 0.12); --hair-strong: rgba(10, 14, 12, 0.22); --ink: #101412;
  --ink-2: #454e49; --ink-3: #5c665f; --marker: #101412; --track: #dddfdc;
  --track-band: #d4d8d2; --tick: rgba(10, 14, 12, 0.26); --tick-major: rgba(10, 14, 12, 0.46);
  --bevel-hi: rgba(255, 255, 255, 0.9); --bevel-lo: rgba(10, 14, 12, 0.18); --ahead: #0a7340;
  --behind: #8a5300; --low: #c0331f; --cta-bg: #101412; --cta-fg: #f4f6f3;
  --hatch-ink: rgba(255, 255, 255, 0.34);

}

/* 2. Base */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; transition: none; }

body {
  margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f-sans); font-size: var(--t-prose);
  line-height: 1.65; transition: none; overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.14; letter-spacing: -0.02em; }
h1 { font-size: var(--t-h1); font-weight: 480; letter-spacing: -0.025em; }
h2 { font-size: var(--t-h2); font-weight: 480; letter-spacing: -0.025em; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-lead); line-height: 1.3; }

p, ul, ol, dl, table, figure, blockquote, pre { margin: 0; }
p { max-width: var(--measure); }

a { color: inherit; text-decoration-color: var(--hair-strong); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }

ul, ol { padding-left: 1.15em; }
li { margin: 0; }
li + li { margin-top: var(--sp2); }

code, kbd, samp { font-family: var(--f-mono); font-size: max(0.92em, 12px); overflow-wrap: anywhere; }
small { font-size: var(--t-meta); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r1);
}
:where(a, button, summary, [tabindex]):focus { outline-color: var(--ink); }

::selection { background: var(--ink); color: var(--ground); }

.mono, [data-reading], [data-spec] {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}

[data-spec] {
  font-size: var(--t-spec); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4;
}

/* The mono spec voice: two declaration sets — wide and normal tracking — worn by
   every readout, tag, control and column head on the site. Declared once here. */
.channel, .navlist a, .rail__readout, .rail__narrow summary, .chip, .btn, .transport button,
.transport__readout, .caplet, thead th, .table--stack td::before, .price__label, .theme button,
.linklist__idx, .component__state, .trace__row, .index__num, .index__readout, .routing__dest {
  font-family: var(--f-mono); font-size: var(--t-spec); letter-spacing: 0.1em; text-transform: uppercase;
}
.skip, .rail__wide a, .callout, .statechip, .window__scale, .hero-callout {
  font-family: var(--f-mono); font-size: var(--t-spec); letter-spacing: 0.08em; text-transform: uppercase;
}

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 3. Frame, bands, rules */

.frame { width: 100%; max-width: var(--frame); margin: 0 auto; padding: 0 var(--sp5); }
.col { width: 100%; max-width: var(--content); margin-inline: 0 auto; }
.col--wide { max-width: var(--wide); }

[data-band] { padding-block: var(--band-y); position: relative; }
[data-band='band'] { background: var(--band); --track: var(--track-band); }
[data-band='ground'] { background: var(--ground); }
[data-band] + [data-band] { border-top: 1px solid var(--hair); }

.rule { position: relative; height: 1px; background: var(--hair); margin-block: var(--sp5); }
.rule::before, .rule::after {
  content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--hair-strong);
}
.rule::before { left: 0; }
.rule::after { right: 0; }

.section-head { display: grid; gap: var(--sp3); margin-bottom: var(--sp6); }
.section-head p { color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; }

.stack { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp5); }
.stack--tight { gap: var(--sp3); }
.stack--loose { gap: var(--sp6); }

.prose { display: grid; gap: var(--sp4); color: var(--ink-2); }
.prose h2, .prose h3 { color: var(--ink); margin-top: var(--sp5); }
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--ink); }

.lede { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 60ch; }

/* 4. Skip link, header */

.skip {
  position: absolute; left: var(--sp4); top: var(--sp2); z-index: 40; transform: translateY(-200%);
  background: var(--cta-bg); color: var(--cta-fg);
  text-decoration: none; padding: var(--sp3) var(--sp4); border-radius: var(--r1);
  transition: transform var(--dur-chrome) var(--ease-instrument);
}
.skip:focus { transform: translateY(0); }

.masthead { border-bottom: 1px solid var(--hair); background: var(--ground); position: relative; }
.masthead::after {
  content: ''; position: absolute; left: var(--sp5); right: var(--sp5); bottom: -4px; height: 9px;
  border-left: 1px solid var(--hair-strong); border-right: 1px solid var(--hair-strong); pointer-events: none;
}
.masthead__inner { display: flex; align-items: center; gap: var(--sp5); min-height: 64px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--sp3); text-decoration: none; min-height: 44px; }
.brand__mark { display: block; width: 22px; height: 22px; border-radius: var(--r2); }
.brand__name {
  font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: var(--ink);
}
.channel {
  color: var(--ink-3); white-space: nowrap;
}
.channel::before { content: '▸ '; color: var(--hair-strong); }

.masthead__nav { margin-left: auto; }
.navlist { display: flex; align-items: center; gap: var(--sp1); list-style: none; margin: 0; padding: 0; }
.navlist li { margin: 0; }
.navlist a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp3);
  text-decoration: none; color: var(--ink-2);
  border-top: 2px solid transparent; border-bottom: 2px solid transparent;
  transition: color var(--dur-chrome) var(--ease-instrument);
}
.navlist a:hover { color: var(--ink); }
.navlist a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.navlist a[aria-current='true'] { border-bottom-style: dashed; }

@media (max-width: 767px) {
  .masthead__inner { min-height: 0; padding-top: var(--sp2); gap: var(--sp3); }
  .masthead__nav { margin-left: 0; width: 100%; border-top: 1px solid var(--hair); }
  .navlist { justify-content: space-between; gap: 0; flex-wrap: wrap; }
  .navlist a { padding: 0 var(--sp2); }
  .channel { margin-left: auto; }
}
@media (max-width: 359px) {
  .navlist a { padding: 0 var(--sp1); letter-spacing: 0.06em; }
}

/* 5. The gauge as navigation (three orientations) */

.rail { position: relative; z-index: 20; }
.rail__strip {
  position: relative; height: 4px; background: var(--track);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.rail__strip::before, .rail__strip::after {
  content: ''; position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--hair-strong);
}
.rail__strip::before { left: 0; }
.rail__strip::after { right: 0; }
.rail__ticks { position: absolute; inset: 0; }
.rail__ticks i { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--tick-major); }
.rail__blade {
  position: absolute; top: -5px; bottom: -5px; left: var(--rail-pos, 0%);
  width: 0; border-left: 2px solid var(--marker);
}
.rail__readout {
  color: var(--ink-3); padding: var(--sp2) 0 0;
}
.rail__readout b { color: var(--ink); font-weight: 500; }

.rail__wide { display: none; }
.rail__narrow summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp2);
  color: var(--ink-2); min-height: 44px;
}
.rail__narrow summary::-webkit-details-marker { display: none; }
.rail__narrow summary::before { content: '＋'; color: var(--ink-3); }
.rail__narrow[open] summary::before { content: '－'; }

.rail__list { list-style: none; margin: 0 0 var(--sp4); padding: 0 0 0 var(--sp4); border-left: 1px solid var(--hair); }
.rail__list li { margin: 0; }
.rail__list a {
  display: grid; grid-template-columns: auto 14px 1fr; align-items: center; gap: var(--sp3);
  min-height: 40px; text-decoration: none; color: var(--ink-2);
}
.rail__list a:hover { color: var(--ink); }
.rail__idx { font-family: var(--f-mono); font-size: var(--t-spec); color: var(--ink-3); letter-spacing: 0.06em; }
.rail__tick { display: block; height: 1px; background: var(--hair-strong); }
.rail__list a[data-rail-current='true'] { color: var(--ink); }
.rail__list a[data-rail-current='true'] .rail__tick { height: 3px; background: var(--marker); }
.rail__label { font-size: var(--t-meta); }

@media (min-width: 768px) {
  .rail__narrow { display: none; }
  .rail__wide { display: block; }
  .rail__wide .rail__row { display: flex; align-items: center; min-height: 28px; }
  .rail__wide ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp2) var(--sp5);
    list-style: none; margin: 0; padding: 0;
  }
  .rail__wide li { margin: 0; flex: none; }
  .rail__wide a {
    display: inline-flex; align-items: baseline; gap: var(--sp2); text-decoration: none;
    color: var(--ink-3); white-space: nowrap;
  }
  .rail__wide a:hover { color: var(--ink); }
  .rail__wide a[data-rail-current='true'] { color: var(--ink); }
  .rail__wide a[data-rail-current='true']::before { content: '▍'; color: var(--marker); }
  .rail__readout { display: none; }
}

@media (min-width: 1320px) {
  .rail__wide .rail__row { height: auto; display: block; overflow: visible; }
  .rail {
    position: fixed; top: 96px; left: max(var(--sp5), calc(50vw - var(--frame) / 2 + var(--sp5)));
    width: 96px; z-index: 15;
  }
  .rail__strip {
    position: absolute; left: 0; top: 0; bottom: auto; width: 4px; height: 62vh;
    border: 0; border-left: 1px solid var(--hair); border-right: 1px solid var(--hair);
  }
  .rail__strip::before, .rail__strip::after { left: -4px; right: -4px; top: auto; bottom: auto; width: auto; height: 1px; }
  .rail__strip::before { top: 0; }
  .rail__strip::after { bottom: 0; }
  .rail__ticks i { left: -2px; right: -2px; top: auto; width: auto; height: 1px; }
  .rail__blade {
    left: -5px; right: -5px; top: var(--rail-pos, 0%); bottom: auto; width: auto; height: 0;
    border-left: 0; border-top: 2px solid var(--marker);
  }
  .rail__wide ol { display: grid; gap: var(--sp3); padding-left: var(--sp3); overflow: visible; }
  .rail__wide li { overflow: visible; }
  .rail__wide { overflow: visible; }
  .rail__wide a { display: grid; gap: 2px; line-height: 1.25; letter-spacing: 0.03em; overflow-wrap: normal; word-break: keep-all; }
  .rail__wide a { white-space: normal; }
  body[data-rail='vertical'] .frame { padding-left: calc(96px + var(--sp5) + var(--sp5)); }
}

/* 6. THE METER */

.meter { display: grid; gap: var(--sp3); --meter-h: 26px; --cap-w: 8px; }
.meter[data-size='hero'] { --meter-h: 38px; --cap-w: 8px; gap: var(--sp4); }
.meter[data-size='figure'] { --meter-h: 34px; }
.meter[data-size='compact'] { --meter-h: 22px; gap: var(--sp2); }

.meter__caption { display: flex; flex-wrap: wrap; gap: var(--sp3); align-items: baseline; }

.meter__chassis { position: relative; padding-top: 22px; padding-bottom: 10px; }
.meter[data-size='compact'] .meter__chassis { padding-top: 18px; padding-bottom: 8px; }

.meter__track {
  position: relative; height: var(--meter-h); background: var(--track); border: 1px solid var(--hair-strong);
  border-radius: var(--capsule); box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -2px 3px var(--bevel-lo);
}

.meter__well {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
}

/* graduated scale, machined into the chrome: minor every 10 %, major at quarters */
.meter__grad {
  position: absolute; inset: 0; background-image:
  repeating-linear-gradient(90deg, var(--tick-major) 0 1px, transparent 1px calc(100% / 4)),
  repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px calc(100% / 10));
  background-size: 100% 100%, 100% 38%; background-position: 0 0, 0 50%; background-repeat: no-repeat;
}

.meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 100%); }
.meter__body {
  position: absolute; inset: 0; background-color: var(--state-color);
  border-radius: var(--capsule) var(--r1) var(--r1) var(--capsule);
}
.meter[data-cap='stepped'] .meter__body { right: var(--cap-w); border-radius: var(--capsule) 0 0 var(--capsule); }
.meter__cap {
  position: absolute; right: 0; top: 25%; bottom: 25%; width: var(--cap-w); background-color: var(--state-color);
  border: 1px solid var(--state-color); border-radius: 0 var(--r1) var(--r1) 0;
}

.meter[data-texture='hatch'] .meter__body {
  background-image: repeating-linear-gradient( 45deg, var(--hatch-ink) 0 2px, rgba(0, 0, 0, 0) 2px 7px);
}
.meter[data-texture='dense'] .meter__body {
  background-image: repeating-linear-gradient( 45deg, var(--hatch-ink) 0 2px, rgba(0, 0, 0, 0) 2px 4px);
}

.meter[data-state='ahead'] { --state-color: var(--ahead); }
.meter[data-state='behind'] { --state-color: var(--behind); }
.meter[data-state='low'] { --state-color: var(--low); }

.meter__blade {
  position: absolute; left: calc(var(--t) * 100%); top: -7px; bottom: -7px; width: 2px; margin-left: -1px;
  border-left: 2px solid var(--marker);
}
.meter__blade::before, .meter__blade::after {
  content: ''; position: absolute; left: -4px; width: 9px; height: 0; border-top: 2px solid var(--marker);
}
.meter__blade::before { top: 0; }
.meter__blade::after { bottom: 0; }

.meter__endtick { position: absolute; top: -7px; bottom: -7px; width: 0; border-left: 1px solid var(--hair-strong); }
.meter__endtick[data-end='start'] { left: 0; }
.meter__endtick[data-end='finish'] { right: 0; }

.meter__caplet {
  position: absolute; top: 0; left: calc(var(--t) * 100%);
  font-family: var(--f-mono); font-size: var(--t-spec); letter-spacing: 0.06em;
  color: var(--ink-2); white-space: nowrap; line-height: 1;
}
.meter__caplet[data-align='mid'] { transform: translateX(-50%); }
.meter__caplet[data-align='end'] { transform: translateX(-100%); }
.meter__caplet[data-align='start'] { transform: none; }

.meter__readout {
  display: flex; flex-wrap: wrap; gap: var(--sp2) var(--sp4); align-items: center;
  font-family: var(--f-mono); font-size: var(--t-spec); letter-spacing: 0.06em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.meter__readout b { color: var(--ink); font-weight: 500; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp2);
  color: var(--ink); border: 1px solid var(--hair-strong); border-radius: var(--r1);
  padding: 3px var(--sp2); line-height: 1.3;
}
.chip__swatch {
  width: 10px; height: 10px; border-radius: 1px; border: 1px solid var(--state-color);
  background-color: var(--state-color);
}
.chip[data-swatch='hatch'] .chip__swatch {
  background-image: repeating-linear-gradient(45deg, var(--hatch-ink) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}
.chip[data-swatch='dense'] .chip__swatch {
  background-image: repeating-linear-gradient(45deg, var(--hatch-ink) 0 1px, rgba(0, 0, 0, 0) 1px 2px);
}

.pace {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-pace); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--state-color, var(--ink)); font-weight: 500;
}
.pace--small { font-size: var(--t-base); letter-spacing: 0; }

/* 7. Hero composition */

.hero { padding-block: 0 var(--sp8); }
[data-band]:first-of-type { padding-top: var(--sp7); }
.hero__kicker { margin-bottom: var(--sp5); }
.hero h1 { max-width: 18ch; }
.hero__sub { margin-top: var(--sp4); color: var(--ink-2); font-size: var(--t-lead); line-height: 1.45; max-width: 64ch; }

.reading { margin-top: var(--sp6); }
.reading__frame { position: relative; }

.callout {
  display: grid; gap: var(--sp1);
  color: var(--ink-2);
}
.callout b { color: var(--ink); font-weight: 500; font-size: var(--t-small); letter-spacing: 0.04em; }
.callout__leader { display: block; width: 1px; height: 18px; background: var(--hair-strong); }

.callout--time { justify-items: end; text-align: right; margin-bottom: var(--sp2); }
.callout--time .callout__leader { margin-top: var(--sp1); }
.callout--usage { margin-top: var(--sp2); }

.reading__pace { margin-top: var(--sp5); }
.reading__figcaption { margin-top: var(--sp4); color: var(--ink-2); max-width: 56ch; }
.reading__figcaption a { color: var(--ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp3); margin-top: var(--sp6); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp2);
  min-height: 48px; padding: 0 var(--sp5);
  text-decoration: none; font-weight: 500;
  border-radius: var(--r1); border: 1px solid transparent; cursor: pointer;
  transition: opacity var(--dur-chrome) var(--ease-instrument);
  text-align: center; white-space: normal; padding-block: var(--sp2);
}
.btn--primary { background: var(--cta-bg); color: var(--cta-fg); }
.btn--primary:hover { opacity: 0.86; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.btn--secondary:hover { border-color: var(--ink); }
.btn[aria-disabled='true'] { cursor: default; opacity: 1; }
.btn--primary[aria-disabled='true'] { background: var(--raised); color: var(--ink-2); border-color: var(--hair-strong); }

@media (max-width: 767px) {
  .hero { padding-block: var(--sp6) var(--sp7); }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
}

/* 8. The walk */

.walk__stage { display: grid; gap: var(--sp5); }
.walk__steps { display: grid; gap: var(--sp5); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.walk__steps > li { margin: 0; }

.step {
  display: grid; gap: var(--sp3); padding-left: var(--sp5); border-left: 1px solid var(--hair); color: var(--ink-3);
  transition: color var(--dur-chrome) var(--ease-instrument), border-color var(--dur-chrome) var(--ease-instrument);
}
.step[data-current='true'] { color: var(--ink-2); border-left-color: var(--marker); }
.step[data-current='true'] .step__title { color: var(--ink); }
.step__title { font-size: var(--t-lead); line-height: 1.3; color: var(--ink-3); font-weight: 500; letter-spacing: -0.015em; }
.step__meter { display: none; }

.walk__animated { display: block; }
html:not([data-js='on']) .walk__animated, html:not([data-js='on']) .trace { display: none; }
html:not([data-js='on']) .step__meter { display: block; }

.transport {
  display: inline-flex; align-items: stretch; gap: 0; border: 1px solid var(--hair-strong); border-radius: var(--r1);
  background: var(--raised); box-shadow: inset 0 1px 0 var(--bevel-hi); overflow: hidden; margin-top: var(--sp4);
}
.transport button {
  appearance: none; background: transparent; border: 0; border-right: 1px solid var(--hair);
  color: var(--ink-2);
  padding: 0 var(--sp4); min-height: 44px; cursor: pointer;
}
.transport button:hover { color: var(--ink); }
.transport__readout {
  display: inline-flex; align-items: center; padding: 0 var(--sp4);
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* The sample trace: the three readings the walk visits, kept beside the
   instrument so the sticky column carries the whole comparison, not one third
   of it. The current row moves with the phase. */
.trace { margin-top: var(--sp5); padding-top: var(--sp4); border-top: 1px solid var(--hair); }
.trace__rows { list-style: none; margin: var(--sp3) 0 0; padding: 0; }
.trace__rows li { margin: 0; }
.trace__row {
  display: grid; grid-template-columns: 3ch auto auto minmax(0, 1fr); gap: var(--sp2) var(--sp4);
  padding: var(--sp2) var(--sp3); border-left: 2px solid transparent; color: var(--ink-3);
  transition: color var(--dur-chrome) var(--ease-instrument);
}
.trace__row b, .trace__row em { font-weight: 500; font-style: normal; }
.trace__row em { text-align: right; }
.trace__row[data-current='true'] {
  color: var(--ink); background: var(--raised); border-left-color: var(--marker);
}

/* `position: sticky` is bounded by the sticky item's grid AREA, not by the
   grid. With the closing line left outside the stage the instrument came
   unstuck while the reader was still on phase 03 — the chart-to-prose binding
   lapsing exactly where the prose needed it. The narrative column now holds
   everything the instrument must stay beside, so the two are bound for the
   whole of the walk. Iteration 3. */
@media (min-width: 768px) {
  .walk__stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp8); align-items: start; }
  .walk__instrument { position: sticky; top: var(--sp7); }
  /* Sticky releases with the COLUMN's bottom on the narrative's bottom — not
     with the meter's. The meter sits at the top of that column, so without a
     reserve equal to the column's overhang below it, the meter leaves the
     viewport while the last step is still on screen. This is that reserve. */
  .walk__narrative { padding-bottom: var(--sp8); }
}
@media (prefers-reduced-motion: reduce) {
  .walk__instrument { position: static; }
}

/* 9. Triptych / reduced motion / no JS */

/* The triptych: the walk's static rendition is a composed three-up, not a gap. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .walk__animated, .trace { display: none; }
  .step__meter { display: block; }
  .walk__stage { grid-template-columns: minmax(0, 1fr); gap: var(--sp5); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .walk__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp6); }
}
html:not([data-js='on']) .walk__stage { grid-template-columns: minmax(0, 1fr); gap: var(--sp5); }
@media (min-width: 768px) {
  html:not([data-js='on']) .walk__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp6); }
}

/* 10. Provider panel */

/* Five readings taken at the same moment: a stacked cluster, not a card grid —
    so the fifth provider is a row like the other four, never an orphan cell. */
.panel { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--hair); }

.panel__item {
  display: grid; gap: var(--sp3); padding: var(--sp5) 0 var(--sp5);
  border-top: 1px solid var(--hair); text-decoration: none;
}
@media (min-width: 900px) {
  .panel__item {
    grid-template-columns: 15ch minmax(0, 1fr) 27ch; gap: var(--sp6); align-items: center;
  }
}
.panel__item:hover { border-top-color: var(--hair-strong); }
.panel__item:hover .panel__name { text-decoration-color: currentColor; }
.panel__name {
  font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--hair-strong); text-underline-offset: 0.3em;
}
.panel__note { font-size: var(--t-meta); color: var(--ink-3); }

/* 11. The not-yet vocabulary */

.caplet {
  display: inline-flex; align-items: center; gap: var(--sp2);
  color: var(--ink-2); border: 1px dashed var(--hair-strong); border-radius: var(--r1);
  padding: 4px var(--sp3); line-height: 1.3;
}
.caplet__hatch {
  width: 12px; height: 10px; border: 1px solid var(--hair-strong);
  background-image: repeating-linear-gradient(45deg, var(--hair-strong) 0 1px, transparent 1px 4px);
}

.parked {
  display: grid; gap: var(--sp4); border: 1px solid var(--hair); border-radius: var(--r2);
  padding: var(--sp5); background: var(--raised); box-shadow: inset 0 1px 0 var(--bevel-hi);
}
.parked__track {
  position: relative; height: 26px; border: 1px solid var(--hair-strong);
  border-radius: var(--capsule); background: var(--track);
  background-image: repeating-linear-gradient(45deg, var(--hair) 0 2px, transparent 2px 8px);
  box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -2px 3px var(--bevel-lo);
}
.parked__blade {
  position: absolute; left: 0; top: -7px; bottom: -7px; width: 2px; border-left: 2px solid var(--ink-3);
}
.parked__endtick { position: absolute; top: -7px; bottom: -7px; width: 0; border-left: 1px solid var(--hair-strong); }
.parked__endtick[data-end='finish'] { right: 0; }
.parked p { color: var(--ink-2); font-size: var(--t-small); }

.slot {
  position: relative; display: grid; place-items: center; min-width: 0; overflow: hidden; border: 1px solid var(--hair); border-radius: var(--r1);
  background: var(--raised); color: var(--ink-3); aspect-ratio: var(--slot-ratio, 16 / 9); width: 100%;
}
.slot::before, .slot::after {
  content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--hair-strong);
}
.slot::before { left: 6px; top: 6px; border-left-width: 1px; border-top-width: 1px; }
.slot::after { right: 6px; bottom: 6px; border-right-width: 1px; border-bottom-width: 1px; }
.slot__label {
  font-family: var(--f-mono); font-size: var(--t-spec); letter-spacing: 0.12em;
  text-transform: uppercase; text-align: center; display: grid; gap: var(--sp2); padding: var(--sp4);
}
.slot__label b { color: var(--ink-2); font-weight: 500; }
.slot img, .slot video { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r1); }

/* 12. Tables */

/* The stack gate is the table's OWN CONTAINER, not the viewport. A four-column
   field table has to stack when the box it sits in is narrower than the table
   needs — whatever the viewport, the frame padding or the rail happen to be
   doing at that moment. A viewport media query is a guess about a container;
   between 604 and 660px that guess was wrong and the table walked out of the
   page. Iteration 3, BLOCK-3. */
.table-wrap { width: 100%; container-type: inline-size; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-small); }
caption { text-align: left; color: var(--ink-2); font-size: var(--t-meta); padding-bottom: var(--sp3); }
th, td { text-align: left; vertical-align: top; padding: var(--sp3) var(--sp4) var(--sp3) 0; border-bottom: 1px solid var(--hair); }
thead th {
  color: var(--ink-3); font-weight: 500;
  border-bottom-color: var(--hair-strong); white-space: nowrap;
}
tbody th { font-weight: 500; color: var(--ink); font-size: var(--t-small); }
td { color: var(--ink-2); }
td small { display: block; color: var(--ink-3); font-size: var(--t-meta); }

.statechip {
  display: inline-flex; align-items: center; gap: var(--sp2); white-space: nowrap;
  color: var(--ink);
}
.statechip::before { content: '○'; color: var(--ink-3); }
.statechip[data-value='yes']::before { content: '●'; color: var(--ink); }

/* Second stop, independent of the first: a fixed-layout table IS its
   container's width by definition, and `anywhere` lets a cell's min-content
   fall to one character. Even if the gate above never fired, no content in
   here could push a column past its share. */
.table--fields { table-layout: fixed; }
.table--fields thead th { white-space: normal; }
.table--stack th, .table--stack td { overflow-wrap: anywhere; }

.table--fields th:nth-child(1), .table--fields td:nth-child(1) { width: 21%; }
.table--fields th:nth-child(2), .table--fields td:nth-child(2) { width: 13%; }
.table--fields th:nth-child(3), .table--fields td:nth-child(3) { width: 16%; }

@container (max-width: 719px) {
  .table--fields { table-layout: auto; }
  .table--fields th:nth-child(n), .table--fields td:nth-child(n) { width: auto; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--stack tr { display: block; border-bottom: 1px solid var(--hair-strong); padding: var(--sp4) 0; }
  .table--stack th, .table--stack td { display: block; border: 0; padding: 0 0 var(--sp2); }
  .table--stack td::before {
    content: attr(data-label); display: block; color: var(--ink-3); padding-bottom: 2px;
  }
}

/* 13. Pricing window */

.window { display: grid; gap: var(--sp4); --trial: 62%; }
.window__scale {
  display: grid; grid-template-columns: var(--trial) 1fr; gap: var(--sp3); align-items: baseline;
  color: var(--ink-3);
}
.window__days { display: flex; justify-content: space-between; min-width: 0; }
.window__after { text-align: right; }
.window__track {
  position: relative; height: 56px; border: 1px solid var(--hair-strong); border-radius: var(--capsule);
  background: var(--track); box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -2px 3px var(--bevel-lo);
  overflow: hidden;
}
.window__trial {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--trial);
  background-image: repeating-linear-gradient(45deg, var(--hair) 0 2px, transparent 2px 9px);
  display: grid; place-items: center;
}
.window__free { position: absolute; right: 0; top: 0; bottom: 0; left: var(--trial); display: grid; place-items: center; }
.window__seg {
  font-family: var(--f-mono); font-size: var(--t-spec); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2); position: relative; z-index: 1;
  background: var(--track); padding: 2px var(--sp3); border-radius: var(--r1);
}
.window__grad {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px calc(100% / 7));
  background-size: 100% 34%; background-position: 0 50%; background-repeat: no-repeat;
}
.window__blade {
  position: absolute; left: var(--trial); top: -6px; bottom: -6px; width: 2px; margin-left: -1px;
  border-left: 2px solid var(--marker);
}

.window--y { display: none; }
.window--y .window__row { display: grid; grid-template-columns: 1fr 56px; gap: var(--sp4); }
.window--y .window__scale {
  grid-template-columns: none; grid-template-rows: var(--trial) 1fr; align-items: stretch; text-align: right;
}
.window--y .window__days { flex-direction: column; }
.window--y .window__after { text-align: right; align-self: end; }
.window--y .window__track { height: 340px; width: 56px; }
.window--y .window__trial { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: var(--trial); }
.window--y .window__free { left: 0; right: 0; top: var(--trial); bottom: 0; }
.window--y .window__grad {
  background-image: repeating-linear-gradient(180deg, var(--tick) 0 1px, transparent 1px calc(100% / 7));
  background-size: 34% 100%; background-position: 50% 0;
}
.window--y .window__seg { writing-mode: vertical-rl; }
.window--y .window__blade {
  left: -6px; right: -6px; top: var(--trial); bottom: auto; width: auto; margin-left: 0;
  border-left: 0; border-top: 2px solid var(--marker);
}

@media (max-width: 767px) {
  .window--x { display: none; }
  .window--y { display: grid; }
}

.prices { display: flex; flex-wrap: wrap; gap: var(--sp6) var(--sp8); align-items: stretch; }
.price { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sp2); align-content: start; }
.price[data-featured='true'] { flex: 0 1 300px; }
.price[data-featured='false'] { flex: 0 1 200px; }
.price__amount { font-family: var(--f-mono); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.03em; }
.price[data-featured='true'] .price__amount { font-size: var(--t-h1); color: var(--ink); }
.price[data-featured='false'] .price__amount { font-size: var(--t-h3); color: var(--ink-2); }
.price__label {
  color: var(--ink-3);
}
.price__summary { font-size: var(--t-meta); color: var(--ink-2); max-width: 32ch; }
.price .btn { margin-top: var(--sp3); }
.entitlement { margin-top: var(--sp5); color: var(--ink); font-size: var(--t-small); }

/* 14. Footer */

.footer { border-top: 1px solid var(--hair); padding-block: var(--sp8) var(--sp7); background: var(--ground); }
.footer__grid { display: grid; gap: var(--sp6) var(--sp5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__label {
  font-family: var(--f-mono); font-size: var(--t-spec); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp3);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp2); }
.footer li { margin: 0; }
.footer a { text-decoration: none; color: var(--ink-2); font-size: var(--t-meta); }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer__spec { margin-top: var(--sp7); display: grid; gap: var(--sp4); }
.footer__legal { color: var(--ink-3); font-size: var(--t-meta); max-width: 78ch; }
.footer__legal strong { color: var(--ink-2); font-weight: 500; }

.theme {
  display: inline-flex; border: 1px solid var(--hair-strong); border-radius: var(--r1); overflow: hidden;
}
.theme button {
  appearance: none; background: transparent; border: 0; border-right: 1px solid var(--hair);
  color: var(--ink-3);
  padding: 0 var(--sp3); min-height: 44px; cursor: pointer;
}
.theme button:last-child { border-right: 0; }
.theme button[aria-pressed='true'] { color: var(--ink); background: var(--raised); }

/* 15. Docs / cards */

.linklist { display: grid; gap: 0; }
.linklist a {
  display: grid; gap: var(--sp2); padding: var(--sp5) 0; border-top: 1px solid var(--hair); text-decoration: none;
}
.linklist a:last-child { border-bottom: 1px solid var(--hair); }
.linklist a:hover { background: var(--raised); }
.linklist__title { font-size: var(--t-lead); color: var(--ink); letter-spacing: -0.015em; }
.linklist__note { font-size: var(--t-meta); color: var(--ink-3); max-width: 62ch; }
.linklist__idx { color: var(--ink-3); }

/* The docs index: a technical manual's contents page, not four stacked lists of
   link rows. Every row is four columns on one baseline — plate number, title,
   what it covers, and a MONO READOUT of the thing's real state. The readout
   column is what makes this an index rather than a list: five setup rows answer
   "what does this need present on my Mac" in one vertical scan, and four
   operations rows answer "is it there yet" in another. Both resolve from the
   same data and flags the destination pages render from. Iteration 3. */
.index, .routing { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hair); }
.index li, .routing li { margin: 0; }
.index__row {
  display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: var(--sp2) var(--sp5);
  padding: var(--sp5) 0; border-top: 1px solid var(--hair); text-decoration: none; align-items: baseline;
}
.index__row:hover { background: var(--raised); }
.index__num { color: var(--ink-3); }
.index__title {
  font-size: var(--t-lead); color: var(--ink); letter-spacing: -0.015em;
  text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 0.3em;
}
.index__row:hover .index__title { text-decoration-color: currentColor; }
.index__row--lead .index__title { font-size: var(--t-h3); }
.index__note { grid-column: 2; font-size: var(--t-meta); color: var(--ink-3); max-width: 62ch; }
.index__readout { grid-column: 2; color: var(--ink-2); }
@media (min-width: 900px) {
  .index__row { grid-template-columns: 3ch minmax(0, 23ch) minmax(0, 1fr) minmax(0, 21ch); gap: var(--sp6); }
  .index__note, .index__readout { grid-column: auto; }
  .index__readout { text-align: right; }
}

/* Routing keyed on the SYMPTOM. /security is keyed on the channel; this is the
   fork you actually arrive at. */
.routing__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp2);
  padding: var(--sp4) 0; border-top: 1px solid var(--hair);
}
.routing__symptom { color: var(--ink); font-size: var(--t-small); }
.routing__to { color: var(--ink-3); font-size: var(--t-meta); }
.routing__dest::before { content: '\2192\00a0'; }
@media (min-width: 900px) {
  .routing__row { grid-template-columns: minmax(0, 30ch) minmax(0, 1fr) minmax(0, 24ch); gap: var(--sp6); align-items: baseline; }
  .routing__dest { text-align: right; }
}

/* Front matter: the manual's shape as a readout cluster — figure over label,
   the same way the app states a reading. Wraps as a row of plates, never as a
   sentence with a stranded divider. */
.frontmatter { display: flex; flex-wrap: wrap; gap: var(--sp5) var(--sp7); max-width: none; }
.frontmatter span { display: grid; gap: 2px; border-left: 1px solid var(--hair-strong); padding-left: var(--sp4); }
.frontmatter b {
  font-size: var(--t-lead); color: var(--ink); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}

.fieldgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp5); }
@media (min-width: 768px) { .fieldgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp5) var(--sp7); } }

.deflist { display: grid; gap: var(--sp4); }
.deflist > div { display: grid; gap: var(--sp2); padding-top: var(--sp4); border-top: 1px solid var(--hair); }
.deflist dt { font-weight: 500; color: var(--ink); }
.deflist dd { margin: 0; color: var(--ink-2); font-size: var(--t-small); }

.statusline { display: grid; gap: var(--sp3); }
.component {
  display: flex; flex-wrap: wrap; gap: var(--sp3); align-items: baseline; justify-content: space-between;
  padding: var(--sp3) 0; border-bottom: 1px solid var(--hair);
}
.component__name { font-size: var(--t-small); color: var(--ink); }
.component__state {
  color: var(--ink-3);
}
.component__state::before { content: '▯ '; }

/* 16. Forced colors */

@media (forced-colors: active) {
  .meter__fill { background: Highlight; border: 2px solid CanvasText; }
  .meter[data-state='ahead'] .meter__fill { border-style: solid; }
  .meter[data-state='behind'] .meter__fill { border-style: dashed; }
  .meter[data-state='low'] .meter__fill { border-style: dotted; }
  .meter__body { background: transparent; }
  .meter__cap { background: Canvas; border: 1px solid CanvasText; }
  .meter__track, .parked__track, .window__track { border: 1px solid CanvasText; }
  .meter__blade, .parked__blade, .window__blade { border-left-color: CanvasText; }
  .meter__blade::before, .meter__blade::after { border-top-color: CanvasText; }
  .meter__endtick, .parked__endtick { border-left-color: CanvasText; }
  .chip__swatch { border: 1px solid CanvasText; background: Canvas; }
  :where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* 17. Utilities */

.row { display: flex; flex-wrap: wrap; gap: var(--sp3); align-items: center; }
.row--between { justify-content: space-between; }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-small); }
.meta { font-size: var(--t-meta); color: var(--ink-3); }
.mt6 { margin-top: var(--sp6); }
.mt5 { margin-top: var(--sp5); }
.mt4 { margin-top: var(--sp4); }

@media (max-width: 767px) {
  :root { --band-y: var(--sp7); }
  .frame { padding: 0 var(--sp4); }
  h1 { font-size: var(--t-h2); }
  h2 { font-size: var(--t-h3); }
}

/* 18. Composition glue */

.meter-block { display: grid; gap: var(--sp3); }
/* The reserved column is the authority on width. Without an explicit minmax(0,…)
    track the frame's aspect-ratio transfers its min-content HEIGHT back into the
    inline axis and the drawn box escapes its cell. Iteration 2, BLOCK-2. */
.slot-figure { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp3); }
.assets { display: grid; gap: var(--sp6); max-width: 760px; }
.assets--sheet { max-width: none; }

/* A contact strip. Every plate on a line is drawn at ONE height and takes its
   width from its own aspect ratio — the way plates are laid out on a real
   sheet — so a 3:1 menu-bar strip can sit beside a 4:3 panel without being a
   third of its height. `flex: <ratio> 1 0` is the whole mechanism: with a zero
   basis the free space divides in proportion to the ratios, which makes every
   quotient width/ratio identical. Iteration 3. */
.strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp5); }
@media (min-width: 768px) {
  .strip { display: flex; align-items: start; gap: var(--sp5); }
  .strip > * { flex: var(--plate, 1) 1 0; min-width: 0; }
}

[data-pace-line][data-state='ahead'] { --state-color: var(--ahead); }
[data-pace-line][data-state='behind'] { --state-color: var(--behind); }
[data-pace-line][data-state='low'] { --state-color: var(--low); }

.hero-callout {
  position: relative;
  color: var(--ink-3); line-height: 1.3;
}
.hero-callout b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.hero-callout__leader { position: absolute; width: 0; border-left: 1px solid var(--hair-strong); }

.hero-callout--time { text-align: right; padding-bottom: 18px; }
.hero-callout--time .hero-callout__leader { bottom: 0; height: 16px; left: calc(var(--t) * 100%); }

.hero-callout--usage { padding-top: 18px; }
.hero-callout--usage .hero-callout__leader { top: 0; height: 16px; left: calc(var(--u) * 100%); }
.hero-callout--usage .hero-callout__label {
  display: inline-block; margin-left: min(calc(var(--u) * 100%), calc(100% - 21ch));
}

.meter[data-variant='hero'] .meter__chassis { padding-top: 0; padding-bottom: 0; }
.meter[data-variant='hero'] { gap: var(--sp2); }
.meter[data-variant='hero'] .meter__caption { margin-bottom: var(--sp4); }
.meter[data-variant='hero'] .meter__readout { margin-top: var(--sp3); }

/* the walk: two motion laws in one object */
.meter[data-animated='true'] .meter__fill {
  transition: width var(--dur-fill) steps(6, end);
}
.meter[data-animated='true'] .meter__blade {
  transition: left var(--dur-blade) var(--ease-blade);
}
.meter[data-animated='true'] .meter__caplet {
  transition: left var(--dur-blade) var(--ease-blade);
}
.meter[data-animated='true'] .meter__body,
.meter[data-animated='true'] .meter__cap {
  transition: background-color var(--dur-chrome) var(--ease-instrument);
}
@media (prefers-reduced-motion: reduce) {
  .meter[data-animated='true'] .meter__fill,
  .meter[data-animated='true'] .meter__blade,
  .meter[data-animated='true'] .meter__caplet { transition: none; }
}

@media (min-width: 1320px) {
  body[data-rail='on'] .frame { padding-left: calc(96px + var(--sp5) + var(--sp5)); }
  body[data-rail='on'] .rail .frame { padding-left: 0; padding-right: 0; max-width: none; }
}

@media (max-width: 767px) {
  .hero-callout--usage .hero-callout__label { margin-left: min(calc(var(--u) * 100%), calc(100% - 20ch)); }

  /* Mobile hero: a recomposition, not a squeeze — the reading comes second. */
  .hero { display: flex; flex-direction: column; padding-block: 0 var(--sp7); }
  [data-band]:first-of-type { padding-top: var(--sp4); }
  .hero__kicker { order: 1; margin-bottom: var(--sp4); }
  .hero h1 { order: 2; }
  .reading { order: 3; margin-top: var(--sp4); }
  .hero__sub { order: 4; margin-top: var(--sp6); }
  .cta-row { order: 5; }
  .hero .meta { order: 6; }
  .meter[data-size='hero'] { --meter-h: 32px; gap: var(--sp3); }
  .meter[data-variant='hero'] .meter__caption { margin-bottom: var(--sp3); }
  .reading__pace { margin-top: var(--sp3); }
  .hero-callout--time { padding-bottom: 15px; }
  .hero-callout--usage { padding-top: 15px; }
}