/* laidline.com: the one stylesheet. Tokens from docs/website/design-brief.md section 9; component values measured
   from the frozen mockup (website/tools/mockup/static). Light theme only. Fonts: fonts.css, loaded before this file.
   Component index (the style guide shows each once): layout · type · buttons and controls · chips and tags · grade ·
   stat · cards (tile, card, badge, deadline, price, plugin) · terminal and code · charts (dumbbell, bars, legend) ·
   tables · lists · detect and check cards · viewer stage and metrics · header · footer · closing call. */

:root {
  --paper: #f4f2ec;
  --sheet: #fbfaf7;
  --ink: #1a1c1f;
  --body: #3a3e44;
  --muted: #464a51;  /* 7.9:1 on paper, 8.5:1 on sheet (was #555a61, 6.2:1) */
  --rule: rgba(26, 28, 31, 0.14);
  --rule-soft: rgba(26, 28, 31, 0.08);
  --rule-mid: rgba(26, 28, 31, 0.12);
  --rule-strong: rgba(26, 28, 31, 0.18);
  --verdigris: #0f6e63;
  --verdigris-dark: #0a4f47;
  --verdigris-light: #5fa396;
  --verdigris-tint: #cfe6e0;
  --oxide: #a63d1e;
  --oxide-tint: #f1d5cb;
  --grey-tint: #e6e4de;
  --dark-text: #e8e6e0;
  --dark-muted: #a9adb3;
  --dark-accent: #7fd1c3;
  --dark-rule: rgba(232, 230, 224, 0.14);
  --dark-code: #111214;
  --track: rgba(26, 28, 31, 0.12);
  --tick: rgba(26, 28, 31, 0.06);
  --serif: Newsreader, Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* the type scale (owner review, 21 Oct 2026): running text a reader must read is Plex Sans at 16 px or more;
     mono only for code, aligned numbers and short uppercase labels */
  --fs-lede: 20px;
  --fs-lede-lg: 21px;
  --fs-body: 17px;
  --fs-small: 16px;
  --fs-label: 15px;
  --fs-code: 15px;
  --container: 1180px;
  --gutter: 32px;
  --rhythm: 96px;
  --surface: var(--paper);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  color-scheme: light;
}

.home { --rhythm: 112px; }

/* ---- base: zero specificity, so every component rule wins ---------------------------------------------------- */

:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body) {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
:where(a) { color: var(--verdigris); }
:where(a:hover) { color: var(--verdigris-dark); }
:where(code, pre, kbd) { font-family: var(--mono); }
:where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
:where(p, ul, ol, dl, dd, figure, blockquote, pre) { margin: 0; }
:where(button) { font-family: inherit; }
:where(img, svg) { display: block; max-width: 100%; }
:where(:focus-visible) { outline: 2px solid var(--verdigris); outline-offset: 3px; }
/* the verdigris ring is 2.79:1 on ink: inside a dark surface it takes the light accent */
:is(.band-dark, .site-footer, .terminal, .code, .seq-bar, .market-table .row-own, .start-cmd) :focus-visible { outline-color: var(--dark-accent); }

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--sheet);
  font-weight: 500;
  border-radius: 4px;
}
.skip:focus { top: 12px; color: var(--sheet); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- layout --------------------------------------------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { border-bottom: 1px solid var(--rule); }
.section > .container { padding-block: var(--rhythm); }

.band-sheet { background: var(--sheet); --surface: var(--sheet); }

.band-dark {
  background: var(--ink);
  color: var(--dark-text);
  --surface: var(--ink);
  --rule: var(--dark-rule);
}
.section.band-dark { border-bottom: 0; }
.band-dark :where(h1, h2, h3) { color: var(--sheet); }
.band-dark .muted { color: var(--dark-muted); }
.band-dark :where(a) { color: var(--dark-accent); }
.band-dark .text, .band-dark .list { color: var(--dark-muted); }
.band-dark .note { color: var(--dark-muted); }

/* the tighter bands: the stat line (48 px) and the deadline strip (40 px) */
.section > .container.band-48 { padding-block: 48px; }
.section > .container.band-40 { padding-block: 40px; }

/* the 72 px rhythm of the Licensing price band and the four Integrations modes, ruled apart */
.section > .container.pad-72 { padding-block: 72px; }
.flow-flush { gap: 0; }

.mode { padding-block: 40px; }
.mode + .mode { border-top: 1px solid var(--rule); }
.mode > .split-lead { gap: 12px; }

/* laid lines every 9 px at 7% ink, chain lines every 112 px at 5% */
.motif {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(rgba(26, 28, 31, 0.07) 0, rgba(26, 28, 31, 0.07) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(90deg, rgba(26, 28, 31, 0.05) 0, rgba(26, 28, 31, 0.05) 1px, transparent 1px, transparent 112px);
}

.section > .container.hero {
  padding: 128px var(--gutter) 72px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
/* the copy starts level with the terminal's first line */
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 48px; }
.hero-copy { flex: 1 1 320px; max-width: 360px; padding-top: 16px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }

.section > .container.page-head {
  padding: 112px var(--gutter) 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px 72px;
}
.page-head > .h1 { flex: 1 1 420px; }
.page-head-aside { flex: 1 1 320px; max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
/* the Proof header: eyebrow, h1, line, chip, link stacked */
.section > .container.page-head-stack { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 24px; }
.page-head-stack > .h1 { flex: none; }

.flow { display: flex; flex-direction: column; gap: 40px; }
.flow-tight { gap: 24px; }

.split { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 72px; }
.split-top { align-items: flex-start; }
.split-lead { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* a heading used as the lead column is one run of text: its muted span and the words after it must not become flex items */
.split-lead:is(h1, h2, h3) { display: block; }
.split-body { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.section-head > .h2, .section-head > .stack { max-width: 760px; }
#market .section-head > .h2 { max-width: none; }  /* owner, 24 Oct 2026: the market heading on one line where it fits */

.stack { display: flex; flex-direction: column; gap: 12px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.cards { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---- type ----------------------------------------------------------------------------------------------------- */

.h1 { font-size: clamp(38px, 8vw, 60px); line-height: 1.02; max-width: 900px; }
.h1-home { font-size: clamp(40px, 9vw, 68px); line-height: 1; max-width: 920px; }
.h2 { font-size: clamp(30px, 6vw, 40px); line-height: 1.1; }
.h2-sm { font-size: clamp(28px, 5.5vw, 36px); }
.h3 { font-size: 26px; line-height: 1.1; }
.muted { color: var(--muted); }
/* heading(): the two tones belong to a page's h1 only (look refresh, 31 Oct 2026); in an h2 or h3 the first clause is
   in the heading's own ink, on paper and on a dark band alike. The span stays, so one sentence still reads as one. */
:is(h2, h3, .h2, .h3) > .muted, .band-dark :is(h2, h3) > .muted { color: inherit; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow-accent { color: var(--verdigris); }
.band-dark .eyebrow-accent { color: var(--dark-accent); }

.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--body); max-width: 640px; }
.lede-lg { font-size: var(--fs-lede-lg); max-width: 560px; }
.text { font-size: var(--fs-body); line-height: 1.55; color: var(--body); max-width: 520px; }
.note { font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.note-tracked { letter-spacing: 0; }

.link-arrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 500;
  font-size: var(--fs-body);
}

.list { padding-left: 20px; font-size: var(--fs-small); line-height: 1.55; color: var(--body); display: flex; flex-direction: column; gap: 8px; }

.quote {
  padding-left: 20px;
  border-left: 3px solid var(--verdigris);
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.3;
}
.quote + .note { margin-left: 23px; }

/* ---- buttons and controls ------------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  border-radius: 4px;
}
.btn-primary { background: var(--verdigris); color: #fff; }
.btn-secondary { border: 1px solid var(--ink); color: var(--ink); background: rgba(244, 242, 236, 0.7); }
.btn-light { border: 1px solid var(--sheet); color: var(--sheet); background: transparent; }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--verdigris-dark); color: #fff; }
  .btn-secondary:hover { background: var(--sheet); color: var(--ink); }
  .btn-light:hover { background: var(--sheet); color: var(--ink); }
}

/* press feedback: only the properties that change ease, a press scales to 0.97 (buttons and cards, never links in
   running text); the reduced-motion block at the foot of this file drops the scale */
:is(.btn, .toggle, .mode-tab, .menu-button) { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform var(--dur-press) var(--ease-out); }
:is(.int-card, .start-copy, .docs-pager a) { transition: border-color 160ms ease, color 160ms ease, transform var(--dur-press) var(--ease-out); }
.ladder-step-link { transition: background-color 160ms ease, color 160ms ease, transform var(--dur-press) var(--ease-out); }
.int-card::after, .ladder-step-link::before { transition: color 160ms ease; }
:is(.btn, .toggle, .mode-tab, .price-switch-option, .int-card, .start-copy, .docs-pager a, .ladder-step-link, .menu-button):active { transform: scale(0.97); }

.toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toggle {
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(26, 28, 31, 0.3);
}
.toggle[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }

/* code-band tabs: pills on the dark band */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(232, 230, 224, 0.3);
  background: transparent;
  color: var(--dark-muted);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
.pill[aria-selected="true"] { border-color: var(--sheet); color: var(--sheet); }

/* ---- chips and tags ------------------------------------------------------------------------------------------- */

/* the install chip: links to the first-run block on Integrations (#start) */
.install {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 15px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--dark-text);
  text-decoration: none;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .install:hover { color: var(--sheet); }
}

/* the notice chip with the oxide dot: pre-release figures, proposed prices, placeholders */
.chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--body);
}
.chip::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oxide);
}
.chip-lg { padding: 10px 14px; font-family: var(--sans); font-size: var(--fs-small); }

.tag {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  background: var(--grey-tint);
  border-radius: 3px;
}
.tag-live { background: var(--verdigris-tint); }
.tag-example { background: var(--oxide-tint); }
.tag-verify {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--oxide-tint);
}
.tag-planned { padding: 0 6px; font-size: 15px; }

/* ---- grade chips: one hue stepped by lightness; D switches hue; none is grey ---------------------------------- */

.grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
  border-radius: 3px;
}
.grade-a { background: var(--verdigris); color: #fff; }
.grade-b { background: var(--verdigris-tint); }
.grade-c { background: var(--paper); border: 1px solid var(--verdigris); }
.grade-d { background: var(--oxide-tint); }
.grade-none { background: var(--grey-tint); }
.grade-sm { min-width: 26px; height: 26px; padding: 0 6px; font-size: 15px; }

/* ---- stat tile: label (mono caps) -> value (Plex Sans 600) -> one line -> n and date (mono) ------------------- */

.stat-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.stat { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.stat-label { font-size: var(--fs-small); line-height: 1.35; font-weight: 500; color: var(--ink); }
.stat-value { font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.stat-value sup { font-size: 0.5em; }
.stat-context { font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.stat-meta { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat-claim { gap: 6px; }
.stat-claim-head { font-family: var(--serif); font-size: 26px; line-height: 1.15; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.stat-claim .stat-context { font-size: var(--fs-small); }
.stat-claim .stat-meta { margin-top: 4px; }
.stat-meta-value { color: var(--ink); font-weight: 500; }
.stat-tile { flex-basis: 240px; min-width: auto; padding: 24px 28px; border: 1px solid var(--rule); background: var(--sheet); }
.stat-tile .stat-context { line-height: 1.5; }
.stat-md { gap: 6px; padding: 24px; flex-basis: 220px; }
.stat-md .stat-value { font-size: 44px; }
.stat-foot {
  flex: 1 1 100%;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}
.stat-foot a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; }

/* ---- cards ---------------------------------------------------------------------------------------------------- */

.card {
  flex: 1 1 240px;
  min-width: 0;
  padding: 24px 26px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-plain { background: transparent; }

/* product tiles: a 2 px top rule, the Detect tile ruled in the accent */
.tile { flex: 1 1 200px; min-width: 0; padding-top: 24px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 8px; }
.tile-accent { border-top-color: var(--verdigris); }
.tile-text { font-size: var(--fs-small); line-height: 1.5; color: var(--body); }

/* the law badge: instrument and section, one line, the date */
.badge { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .badge:hover { border-color: var(--ink); color: var(--ink); }
}
.badge-law { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--verdigris); }
.badge-line { font-size: var(--fs-body); line-height: 1.5; color: var(--body); }
.badge-date { font-size: var(--fs-small); color: var(--muted); }

/* the deadline cards: see "Compliance, the deadlines" at the foot of this file */
.deadline-label { font-size: var(--fs-small); line-height: 1.4; }
.deadline-date { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }

/* ---- price cards (owner, 2026-10-23) ------------------------------------------------------------------------------
   One sheet split into the six tiers (Free, Lite, Starter, Growth, Scale, Enterprise; Enterprise joined the row on
   2026-10-25, owner). The Monthly / Yearly switch sits centred above (.price-switch, shown by prices.js; without
   script a note says how the cards read). Each card is centred: flag, name, amount, billed line, line, button,
   check-marked list, foot; one grid with subgrid rows, so every card's rows start level. The recommended card
   (.price-top) is raised 12 px past the sheet and outlined in verdigris; its button is the filled one. Six across;
   from 1240 px down three a row (no raise, the outline stays), from 700 px two, from 560 px one. Hairlines are the
   1 px gaps. The unit ("/ month") sits on the number's line at every width. */
.price-switch { position: relative; align-self: center; display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--rule-strong); background: var(--sheet); }
.price-switch[hidden] { display: none; }
.price-switch-option {
  position: relative;
  min-height: 44px;
  padding: 8px 20px;
  border: 0;
  background: transparent;
  color: var(--body);
  font: 500 16px/1.2 var(--sans);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .price-switch-option:hover { color: var(--ink); background: var(--paper); }
}
.price-switch-option[aria-pressed="true"] { background: var(--verdigris); color: #fff; }
/* one fill slides under the pressed option: prices.js sets --fill-x and --fill-s (the button's width in px as a bare
   number; --fill-w is the same in px) from the pressed button (on start, on a switch and when the switch resizes) and
   adds .has-fill; the pressed button's own fill is then cleared. A 1 px fill scaled to the width, so the move and the
   stretch are one transform (never an animated width) */
.price-switch.has-fill::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 1px;
  transform: translateX(var(--fill-x, 0)) scaleX(var(--fill-s, 0));
  transform-origin: 0 0;
  background: var(--verdigris);
  transition: transform var(--dur-ui) var(--ease-in-out);
}
.price-switch.has-fill .price-switch-option[aria-pressed="true"] { background: transparent; }
@media (prefers-reduced-motion: reduce) { .price-switch.has-fill::before { transition: none; } }
.price-switch-save { margin-left: 4px; font-weight: 400; font-size: var(--fs-label); color: var(--verdigris); }
.price-switch-option[aria-pressed="true"] .price-switch-save { color: var(--verdigris-tint); }
.price-switch-static { align-self: center; text-align: center; }
.price-switch-static[hidden] { display: none; }

/* six cards in one row, Enterprise last (owner, 2026-10-25); the price section's container is wider so each card keeps
   about the width five had */
.container-prices { --container: 1380px; }
.prices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 12px; border: 1px solid var(--rule); background: var(--rule); }
.prices [hidden] { display: none !important; }
/* a switch crossfades the figures that change: out in 120 ms with a 2 px blur (.is-fading, prices.js), the other
   interval's parts swapped in while faded, then back in over 150 ms */
.prices [data-interval] { transition: opacity 150ms var(--ease-out), filter 150ms var(--ease-out); }
.prices.is-fading [data-interval] { opacity: 0; filter: blur(2px); transition-duration: 120ms; }
.price {
  min-width: 0;
  padding: 28px 24px;
  background: var(--sheet);
  display: grid;
  grid-row: span 8;
  grid-template-rows: subgrid;
  row-gap: 12px;
  align-content: start;
  justify-items: center;
  text-align: center;
}
/* raised: a sheet behind the card reaches 12 px past it, above and below, outlined in verdigris; the card's own box
   (and so the shared rows) stays the same as its neighbours' */
.price-top { position: relative; z-index: 1; }
.price-top::before {
  content: "";
  position: absolute;
  inset: -12px 0;
  z-index: -1;
  background: var(--sheet);
  border: 2px solid var(--verdigris);
  box-shadow: rgba(26, 28, 31, 0.45) 0 32px 56px -40px;
}
.price-flag-text {
  display: inline-block;
  padding: 2px 10px;
  background: var(--verdigris-tint);
  color: var(--verdigris-dark);
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
/* the plan name close to the price beneath it (owner, 2026-10-25). Six across, a card's text box is about 11.5 vw wide
   up to the 1380 px container and "Enterprise" about 5.2 em, so 2.2 vw (26 to 32 px) never wraps; three or fewer across
   the cards are wide and the name is 34 px. No container query here: a size container would break the shared subgrid
   rows */
.price .price-name { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.price-amount { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
/* the number sizes to its card so "$1,667 / month" stays one line: the widest number is about 2.8 em, the small
   dollar sign and the unit about 76 px; 44 px wherever the card is wide enough, never under 28 px. The query container
   is the amount row, not the card: a contained card would stop being a subgrid and lose the shared rows. */
.price .price-amount { justify-self: stretch; justify-content: center; align-content: flex-start; container-type: inline-size; }
.price .price-when { font-size: clamp(28px, calc((100cqi - 76px) / 2.8), 44px); }
.price-when { display: inline-flex; align-items: baseline; white-space: nowrap; }
.price-cur { align-self: flex-start; margin-right: 2px; padding-top: 0.12em; font-size: 0.45em; font-weight: 500; letter-spacing: 0; }
/* the unit (/ month, a year) sits on the number's line */
.price-per { white-space: nowrap; font-size: var(--fs-small); line-height: 1.4; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.price-when .price-per { margin-left: 4px; }
.price-billed, .price-alt { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.price-line { font-size: var(--fs-small); line-height: 1.45; color: var(--body); }
.price-over { display: block; margin-top: 4px; color: var(--muted); }
.price .btn { justify-self: stretch; justify-content: center; padding: 10px 16px; min-height: 44px; font-size: 16px; }
.price-list {
  justify-self: stretch;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--body);
}
/* a check for what the tier includes; a dash for what is planned */
.price .price-list > li { position: relative; padding-left: 22px; }
.price .price-list > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.2em;
  width: 6px;
  height: 11px;
  border: solid var(--verdigris);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.price .price-list > li.price-planned::before { top: 0.65em; left: 1px; width: 10px; height: 0; border-width: 2px 0 0; border-color: var(--muted); transform: none; }
/* the list sits in a closed <details> (macros/cards.html): up to 700 px a card is compact (name, price, billed line,
   credits line, button, foot) and "What's included" opens the list; from 701 px the summary is hidden and the list
   always shows, as before (the docs menu's pattern; a browser without ::details-content keeps the toggle) */
.price-more { justify-self: stretch; min-width: 0; }
.price-more-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.price-more-label::-webkit-details-marker { display: none; }
.price-more-label::after { content: "+"; content: "+" / ""; font-family: var(--mono); font-size: 18px; line-height: 1; color: var(--muted); }
.price-more[open] > .price-more-label::after { content: "\2212"; content: "\2212" / ""; }
.price-more > .price-list { padding-top: 4px; border-top: 0; }
@supports selector(::details-content) {
  @media (min-width: 701px) {
    .price-more > .price-more-label { display: none; }
    .price-more::details-content { content-visibility: visible; display: block; }
    .price-more > .price-list { padding-top: 14px; border-top: 1px solid var(--rule); }
  }
}
.price-alt { justify-self: stretch; padding-top: 12px; border-top: 1px solid var(--rule); }
.price-alt:empty { padding-top: 0; border-top: 0; }
@media (max-width: 1280px) { .price { padding: 24px 16px; } }
@media (max-width: 1240px) {
  .prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price .price-name { font-size: 34px; }
  .price-top::before { inset: 0; box-shadow: none; }
}
@media (max-width: 700px) {
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price .price-more { order: 1; }
  .price .price-more[open] { padding-bottom: 4px; }
}
/* one a row: each card on its own, so it leaves the shared rows; the name and the price share the first line, left
   aligned, the rest under them */
@media (max-width: 560px) {
  .prices { grid-template-columns: minmax(0, 1fr); }
  .price { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; justify-items: stretch; gap: 8px 16px; padding: 20px 20px 8px; text-align: left; }
  .price > * { grid-column: 1 / -1; }
  .price > .price-flag { justify-self: start; }
  .price > .price-name { grid-column: 1; font-size: 30px; }
  .price > .price-amount { grid-column: 2; justify-self: end; container-type: normal; }
  .price .price-when { font-size: 32px; }
  .price > :is(.price-flag, .price-billed, .price-alt):empty { display: none; }
  .price .btn { margin-top: 4px; }
}
.price-name { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* ---- end of the price cards ------------------------------------------------------------------------------------- */


/* the Home licensing teaser: three small price tiles at 36 px */
.price-teaser { flex: 1 1 120px; min-width: auto; padding: 20px 22px; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.price-teaser .price-name { letter-spacing: 0.06em; }
.price-teaser .price-amount { font-size: 36px; }
.price-teaser .price-line { font-size: var(--fs-small); }

/* plugin cards: package name and one line */
.plugins { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plugin {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .plugin:hover { border-color: var(--ink); color: var(--ink); }
}
.plugin code { font-size: 15px; font-weight: 500; }
.plugin span { font-size: var(--fs-small); color: var(--body); }

/* ---- terminal and code ---------------------------------------------------------------------------------------- */

/* the terminal: a quiet window, still dark. A bar (three dim dots, "Terminal" in mono) over a hairline, then the
   session, which scrolls sideways rather than break a token; "Show full output" (a native details) opens the lines
   marked .term-more in place */
.terminal {
  min-width: 0;
  background: var(--ink);
  color: var(--dark-text);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: rgba(26, 28, 31, 0.5) 0 32px 56px -40px;
  overflow: hidden;
}
.terminal-bar { position: relative; display: flex; align-items: center; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--dark-rule); }
.terminal-dots { display: flex; gap: 7px; }
.terminal-dots > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(232, 230, 224, 0.2); }
.terminal-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--dark-muted); }
.terminal-body { margin: 0; padding: 22px 26px; font-size: var(--fs-code); line-height: 1.7; white-space: pre; overflow-x: auto; }
.terminal:not(:has(> .terminal-more[open])) .term-more { display: none; }
.terminal-more { border-top: 1px solid var(--dark-rule); }
.terminal-more > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 26px;
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dark-muted);
  transition: color 160ms ease;
}
.terminal-more > summary::-webkit-details-marker { display: none; }
.terminal-more > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-out);
}
.terminal-more[open] > summary::before { transform: translateY(1.5px) rotate(-135deg); }
.terminal-more[open] .terminal-more-show, .terminal-more:not([open]) .terminal-more-hide { display: none; }
@media (hover: hover) and (pointer: fine) {
  .terminal-more > summary:hover { color: var(--dark-text); }
}
.code {
  min-width: 0;
  padding: 24px 26px;
  background: var(--ink);
  color: var(--dark-text);
  border: 1px solid var(--rule);
  font-size: var(--fs-code);
  line-height: 1.7;
  overflow-x: auto;
}
/* the hero: a narrow copy column and a terminal wide enough for the collapsed session; narrower, it scrolls sideways */
.hero-row > .hero-run { flex: 1 1 704px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hero-run .terminal-body { padding: 20px 26px; font-size: 13px; line-height: 1.65; }
.hero-run-caption { color: var(--muted); text-wrap: balance; }
.split > :is(.code, .plugins) { flex: 1 1 460px; }
.split > .code-tabs { flex: 1 1 480px; }
.band-dark .code { background: var(--dark-code); border-color: var(--dark-rule); }
.tok-accent { color: var(--dark-accent); }
.tok-dim { color: var(--dark-muted); }

.code-tabs { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.code-tabs .code[hidden] { display: none; }

/* ---- charts: dumbbell and single-series bars share the row grid ----------------------------------------------- */

.chart { display: flex; flex-direction: column; }
.chart-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-bottom: 8px; }
.chart-title { font-family: var(--serif); font-size: 26px; }
.chart-axis { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.chart-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.chart-row:last-of-type { border-bottom: 0; }
.chart-label { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chart-name { font-size: var(--fs-small); font-weight: 500; }
.chart-sub { font-size: var(--fs-small); line-height: 1.45; color: var(--body); }
.chart-plot { flex: 1 1 320px; min-width: 0; position: relative; height: 24px; }
.chart-plot svg { width: 100%; height: 100%; overflow: visible; }
.chart-axis .chart-plot { height: 14px; }
.chart-value { flex: 0 0 64px; text-align: right; font-weight: 600; font-size: 18px; }
.chart-value-meta { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-roomy .chart-row { padding: 14px 0; }
.chart-foot { padding-top: 8px; }

.axis-label { font-family: var(--mono); font-size: 15px; fill: var(--muted); }
.db-track { stroke: var(--track); stroke-width: 1; }
.db-tick { stroke: var(--tick); stroke-width: 1; }
.db-link { stroke: var(--verdigris-light); stroke-width: 2; }
.db-ring { fill: var(--surface); }
.db-after { fill: var(--verdigris); }
.db-before { fill: var(--surface); stroke: var(--verdigris-light); stroke-width: 2; }

.chart-tip {
  display: none;
  position: absolute;
  bottom: 26px;
  right: -6px;
  z-index: 2;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--dark-text);
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.45;
  white-space: nowrap;
  border-radius: 3px;
  pointer-events: none;
}
.chart-plot:focus .chart-tip, .chart-plot:focus-within .chart-tip,
.chart-tip.is-open { display: block; }
@media (hover: hover) and (pointer: fine) {
  .chart-row:hover .chart-tip { display: block; }
}
.chart-row { position: relative; }

.bars .chart-plot { height: 16px; }
.bars .chart-value, .bars .chart-axis-end { flex-basis: 110px; }
.bar { fill: var(--verdigris); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-small); color: var(--body); }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: var(--surface) 0 0 0 2px; }
.legend-after { background: var(--verdigris); }
.legend-before { background: var(--surface); border: 2px solid var(--verdigris-light); }

/* before and after rows (Proof decode rates): edit, stock, Laidline, change, numbers side by side on one grid;
   stock in neutral body ink, Laidline in the accent, no rings; two charts a row from 1000 px */
.compare-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
@media (min-width: 1000px) { .compare-set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; align-items: start; } }
.compare-caption { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; }
.compare-method { font-size: var(--fs-small); line-height: 1.5; color: var(--body); max-width: 520px; }
.compare-head, .compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 84px 84px;
  gap: 12px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.compare-head { padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong); font-size: 15px; font-weight: 500; color: var(--muted); }
.compare-head > :not(:first-child), .compare-row > :not(:first-child) { text-align: right; }
.compare-head > span { font-size: 15px; font-weight: 500; }
.compare-head > .compare-stock { color: var(--body); }
.compare-head > .compare-own { color: var(--verdigris); }
.compare-row { padding: 12px 0; min-height: 48px; border-bottom: 1px solid var(--rule-soft); cursor: default; }
.compare-row:focus-visible { background: var(--sheet); }
@media (hover: hover) and (pointer: fine) {
  .compare-row:hover { background: var(--sheet); }
}
.compare-name { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.compare-stock { font-size: 17px; color: var(--body); }
.compare-own { font-size: 17px; font-weight: 600; color: var(--verdigris); }
.compare-gap { font-size: var(--fs-small); color: var(--ink); white-space: nowrap; }
.compare-row:focus .chart-tip { display: block; }

/* the false-positive table: five short columns, fits a phone without a scroll box */
.table.fp-table { min-width: 0; max-width: 880px; font-variant-numeric: tabular-nums; }
.table.fp-table th[scope="row"] {
  padding: 13px 24px 13px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  vertical-align: top;
}
.table.fp-table tbody tr:last-child th { border-bottom: 0; }
.fp-table :is(th, td):not(:first-child) { text-align: right; }
.fp-table td { white-space: nowrap; }

/* ---- tables: sheet tables in a scroll box ---------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
.table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.table th {
  padding: 0 24px 12px 0;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.table td { padding: 13px 24px 13px 0; border-bottom: 1px solid var(--rule); color: var(--body); vertical-align: top; }
.table :is(th, td):last-child { padding-right: 0; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .cell-name { color: var(--ink); font-weight: 500; }
.table .cell-strong { color: var(--ink); font-weight: 600; }
.table .cell-muted { color: var(--muted); }
.table .cell-mono { font-family: var(--mono); font-size: 15px; color: var(--ink); }
.table .row-own { background: var(--sheet); }
.table td > a:only-child, .qa dd > a:only-child { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
.table .row-own td { padding-block: 14px; color: var(--ink); }
.table-num { min-width: 900px; font-size: var(--fs-small); line-height: 1.5; font-variant-numeric: tabular-nums; }
.table-num th { padding: 0 16px 10px 0; }
.table-num td { padding: 10px 16px 10px 0; }

/* ---- lists ---------------------------------------------------------------------------------------------------- */

/* label + text rows between hairlines (Compared, ranges, not fixed) */
.rows { padding: 0; list-style: none; display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.rows > li, .rows > div { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
.rows-label {
  flex: 0 0 110px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rows-text { flex: 1 1 260px; min-width: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--body); }
.rows-strong .rows-label { flex-basis: 200px; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.band-dark .rows-label { color: var(--dark-accent); }
.band-dark .rows-text { color: var(--dark-text); }

/* numbered steps */
.steps { padding: 0; list-style: none; display: flex; flex-direction: column; counter-reset: step; border-bottom: 1px solid var(--rule); }
.steps > li {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--body);
  counter-increment: step;
}
.steps > li::before { content: counter(step); flex: 0 0 24px; padding-top: 4px; font-family: var(--mono); font-size: 15px; color: var(--muted); }

/* definition grid (Home detect) */
.dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px 20px; font-size: var(--fs-small); line-height: 1.5; }
.dl dt { padding-top: 3px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dl dd { color: var(--body); }

/* questions and short answers (licensing), facts (imprint) */
.qa { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.qa > div { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.qa dt { flex: 0 0 260px; font-size: 17px; font-weight: 600; }
.qa dd { flex: 1 1 280px; font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.qa-facts > div { padding: 16px 0; }
.qa-facts dt { flex-basis: 220px; padding-top: 3px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.qa-facts dd { font-size: var(--fs-body); }

/* download rows on the dark band */
.files { display: flex; flex-direction: column; font-size: var(--fs-small); border-bottom: 1px solid var(--rule); }
.files > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 0; border-top: 1px solid var(--rule); }
.files code { flex: 0 0 120px; color: var(--dark-accent); }
.files-desc { flex: 1 1 200px; }
.files-meta { font-size: var(--fs-small); color: var(--dark-muted); }
.files a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.files-sha { flex: 1 1 100%; overflow-wrap: anywhere; }

/* ---- detect card (public tier) and check card (original against the chosen file) ----------------------------- */

.detect-card {
  flex: 0 1 460px;
  min-width: 0;
  padding: 22px 26px;
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
}
.detect-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-mid);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.detect-card dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; margin-top: 14px; align-items: center; }
.detect-card dt { color: var(--muted); }
.detect-card dd { color: var(--body); overflow-wrap: anywhere; }
.detect-card .detect-strong { color: var(--ink); font-weight: 500; }
.detect-caveat { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-mid); font-family: var(--sans); font-size: var(--fs-small); color: var(--body); }

.check-card {
  flex: 0 1 440px;
  min-width: min(300px, 100%);
  padding: 24px;
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.check-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-mid); align-items: flex-start; }
.check-row > * { flex: 1 1 0; min-width: 0; font-family: var(--mono); font-size: 15px; line-height: 1.45; overflow-wrap: break-word; }
/* the key column is as wide as its longest label ("Watermark", nine characters), so no label breaks mid-word */
.check-row > .check-key { flex: 0 0 9.5ch; padding-top: 3px; font-size: 15px; color: var(--muted); overflow-wrap: normal; }
.check-head { padding-top: 0; border-bottom-color: var(--ink); }
.check-head > :not(.check-key) { font-family: var(--sans); font-size: 16px; font-weight: 600; }
.check-head code { display: block; font-size: 15px; font-weight: 400; color: var(--muted); }
.check-card .grade { min-width: 28px; height: 28px; padding: 0 8px; font-size: 15px; }
.check-note { font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.check-caveats { margin: 0; padding: 12px 0 0; list-style: none; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rule); }
.check-caveats > .check-caveat { padding: 0; border-top: 0; }
.check-caveat { padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; color: var(--body); }

/* ---- the viewer stage: full container width; the viewer task fills it ---------------------------------------- */

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(26, 28, 31, 0.2);
  background: #f2f0ea;
  touch-action: pan-y;
  user-select: none;
}
.stage:focus-within { outline: 2px solid var(--verdigris); outline-offset: 3px; }
.stage-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage { --p: 50; }
.stage-top { position: absolute; inset: 0; display: block; clip-path: inset(0 0 0 calc(var(--p) * 1%)); }
.stage-blank {
  background-color: #f2f0ea;
  background-image:
    linear-gradient(to right top, transparent calc(50% - 0.5px), rgba(26, 28, 31, 0.2) calc(50% - 0.5px), rgba(26, 28, 31, 0.2) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to right bottom, transparent calc(50% - 0.5px), rgba(26, 28, 31, 0.2) calc(50% - 0.5px), rgba(26, 28, 31, 0.2) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    repeating-linear-gradient(rgba(26, 28, 31, 0.07) 0, rgba(26, 28, 31, 0.07) 1px, transparent 1px, transparent 9px);
}
.stage-blank.stage-top { background-color: #d7eae4; }
.stage-file { position: absolute; left: 12px; bottom: 12px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; color: var(--muted); }
.stage-file-right { left: auto; right: 12px; }
.stage-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  background: rgba(26, 28, 31, 0.86);
  color: var(--sheet);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  pointer-events: none;
}
.stage-pill { opacity: clamp(0, calc((var(--p) - 10) / 14), 1); }
.stage-pill-right { left: auto; right: 12px; opacity: clamp(0, calc((90 - var(--p)) / 14), 1); }
.stage-divider { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 1%); width: 0; pointer-events: none; }
.stage-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--sheet);
  box-shadow: rgba(26, 28, 31, 0.55) 0 0 0 1px;
}
.stage-handle {
  position: absolute;
  top: 50%;
  left: -22px;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  background: var(--ink);
  color: var(--sheet);
  border: 2px solid var(--sheet);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
}
/* the invisible range. A range thumb insets the pointer by half its width at the ends; a zero-width thumb removes the
   inset but leaves nothing to grab where touch browsers only drag from the thumb (iOS Safari). So the thumb is the
   handle's 44 px wide and as tall as the stage, and the input is 44 px wider than the stage (22 px past each edge,
   clipped by the stage): the thumb's centre then travels exactly 0..100% of the stage, under the divider. */
.stage-range {
  position: absolute;
  top: 0;
  left: -22px;
  width: calc(100% + 44px);
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.stage-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.stage-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 400vh; margin-top: -200vh; }
.stage-range::-moz-range-track { height: 100%; background: transparent; }
.stage-range::-moz-range-thumb { width: 44px; height: 400vh; border: 0; border-radius: 0; }

/* the live viewer: a portrait frame (3:4, 1620 x 2160). Wide screens: stage left, metrics and card right. The stage
   is as tall as --stage-h allows and as wide as that height and the aspect give; on /compare it fills the viewport. */
.viewer-layout { --stage-h: 85vh; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.viewer-layout-full { --stage-h: min(1100px, max(480px, calc(100vh - 210px))); }
@supports (height: 100svh) { .viewer-layout-full { --stage-h: min(1100px, max(480px, calc(100svh - 210px))); } }
.viewer-stagecol { width: min(100%, calc(var(--stage-h) * 3 / 4)); margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
/* no script: the stacked figures show and the UI stays hidden; with script (site.js sets .js first, and the media
   feature covers paint before any script runs) the swap happens in CSS, so nothing shifts when the scripts load */
.viewer-stagecol [data-viewer-ui], .viewer-stagecol [data-viewer-fallback] { display: flex; flex-direction: column; gap: 12px; }
.js .viewer-stagecol [data-viewer-fallback] { display: none; }
@media (scripting: enabled) { .viewer-stagecol [data-viewer-fallback] { display: none; } }
@media screen { .viewer-stagecol [data-viewer-ui][hidden], .viewer-stagecol [data-viewer-fallback][hidden] { display: none !important; } }
.viewer.stage { aspect-ratio: 3 / 4; }
.viewer-caption { font-size: 16px; line-height: 1.4; color: var(--ink); min-height: 1.4em; }
.viewer-figs { display: flex; flex-direction: column; gap: 24px; }
.viewer-figs img { display: block; width: 100%; height: auto; border: 1px solid rgba(26, 28, 31, 0.2); }
.viewer-figs figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--body); }
.viewer-aside { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.viewer-aside .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding-bottom: 8px; }
.viewer-aside .metric { padding-right: 0; flex: none; }
.viewer-explain { display: flex; flex-direction: column; gap: 6px; max-width: 440px; }
.viewer-explain dt { font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--ink); }
.viewer-explain dd { font-size: 16px; line-height: 1.55; color: var(--body); }
.viewer-explain dd + dt { margin-top: 22px; }
.viewer-method > summary { cursor: pointer; font-size: var(--fs-small); color: var(--body); }
.viewer-method > .note { margin-top: 8px; }
.viewer-aside .check-card { flex: none; width: 100%; }
.viewer-aside .check-card .grade { white-space: nowrap; overflow-wrap: normal; }
@media (min-width: 1000px) {
  .viewer-layout { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 48px; }
  .viewer-layout:not(.viewer-layout-full) .viewer-aside { align-self: center; padding-left: 24px; }
  .viewer-stagecol { width: min(calc(var(--stage-h) * 3 / 4), calc(min(100vw, var(--container)) - 2 * var(--gutter) - 488px)); margin-inline: 0; }
}
@media print {
  .viewer-stagecol [data-viewer-ui] { display: none !important; }
  .viewer-stagecol [data-viewer-fallback] { display: flex !important; }
}

/* Home's Image / Audio / Video switch (media.js, 2026-10-19). Without script the switch stays out of sight and the
   image viewer stands alone; the audio and video panels carry `hidden` until the switch shows them. */
.viewer-media { display: flex; flex-direction: column; gap: 24px; }
.media-switch { display: none; }
.js .media-switch { display: flex; }
@media (scripting: enabled) { .media-switch { display: flex; } }
[data-medium-panel][hidden] { display: none !important; }
/* the wide stages: the audio panel's spectrograms (8:3, 1920 x 720) and the video panel's clips (16:9, 1280 x 720)
   take the column's full width, beside the same aside as the image */
.viewer.stage.viewer-spectrogram { aspect-ratio: 8 / 3; background: #1a1c1f; }
.viewer.stage.viewer-video { aspect-ratio: 16 / 9; background: #1a1c1f; }
.viewer-layout-wide .viewer-stagecol { width: 100%; }
.viewer-player { display: flex; flex-direction: column; gap: 12px; }
.viewer-audio { display: block; width: 100%; min-height: 44px; }
.viewer-audio:not([controls]) { display: none; }
/* the branded audio control (media.js shows it and drops the native controls): a round play button, ink on paper (40 px
   drawn, 44 px to tap), a hairline track with a verdigris fill scaled to the position (transform, never width), a
   range on top for seeking, the times in mono with tabular figures */
.audio-ctl { display: flex; align-items: center; gap: 14px; width: 100%; }
.audio-ctl[hidden] { display: none; }
.audio-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--ink) padding-box;
  color: var(--paper);
  cursor: pointer;
  transition: background-color 160ms ease, transform var(--dur-press) var(--ease-out);
}
.audio-play:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .audio-play:hover { background-color: var(--verdigris-dark); }
}
/* play: a triangle drawn with borders; pause: two bars */
.audio-icon { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.audio-ctl[data-state="playing"] .audio-icon { width: 10px; height: 13px; margin-left: 0; border-width: 0 3px; border-color: currentColor; }
.audio-track { position: relative; flex: 1 1 auto; min-width: 0; height: 44px; }
/* the line runs between the thumb's centres at either end, so the fill meets the thumb */
.audio-track::before, .audio-fill { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; }
.audio-track::before { background: var(--rule-strong); }
.audio-fill { background: var(--verdigris); transform: scaleX(0); transform-origin: left center; }
.audio-seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.audio-seek::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.audio-seek::-moz-range-track { background: transparent; }
.audio-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: 16px; border: 0; border-radius: 50%; background: var(--verdigris); }
.audio-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--verdigris); }
.audio-seek:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 2px; }
.audio-time { flex: none; font-family: var(--mono); font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--body); }
.audio-time-total { color: var(--muted); }
.viewer-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.viewer-controls .viewer-toggles { margin-top: 0; }
.viewer-ab-label { margin-right: 8px; }
@media (min-width: 1000px) {
  .viewer-layout-wide .viewer-stagecol { width: calc(min(100vw, var(--container)) - 2 * var(--gutter) - 488px); }
}

.metrics { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.metric { flex: 1 1 120px; min-width: 0; padding: 16px 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.metric:last-child { padding-right: 0; }
.metric-value { font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }

/* ---- header --------------------------------------------------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header > .container { min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 16px; font-weight: 500; }
.nav a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 12px 0; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover { color: var(--ink); }
  .nav a:hover { color: var(--verdigris); }
}
.nav a[aria-current] { padding-bottom: 10px; border-bottom: 2px solid var(--verdigris); }
.menu-button { display: none; }
/* 901 to 1100 px: six links, Sign in and Get started stay on one row only with tighter gaps */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header > .container { column-gap: 24px; }
  .nav { column-gap: 20px; }
}

/* ---- footer: one line on every page, the full variant on Home ------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--dark-muted); }
.site-footer a { color: var(--dark-text); text-decoration: none; }
.site-footer .brand { color: var(--sheet); margin-right: 0; }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--sheet); text-decoration: underline; }
}
.footer-line {
  padding-block: 32px 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.footer-line .brand-name { font-size: 20px; }
.footer-note { flex: 1 1 320px; min-width: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-links a, .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer :is(.footer-legal, .footer-note) a { text-decoration: underline; text-underline-offset: 3px; }
.footer-full { padding-block: 48px 40px; display: flex; flex-direction: column; gap: 32px; }
.footer-full .brand-name { font-size: 22px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 16px; }
.footer-nav a { display: inline-flex; align-items: center; gap: 5px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 20px; border-top: 1px solid var(--dark-rule); font-size: var(--fs-small); }

/* ---- closing call --------------------------------------------------------------------------------------------- */

.section > .container.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; }
.closing-title { font-size: clamp(34px, 7vw, 48px); line-height: 1.05; max-width: 640px; }

/* ---- hosted docs: 240 px sidebar, the article in all the room beside it, on-page contents; code on sheet ------- */

/* the docs take a wider container than the marketing pages (1440 px): prose keeps a 75-character measure, code
   blocks and tables take the article's full width and wrap rather than scroll */
.container.docs { max-width: 1440px; }
.docs {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: start;
  padding-block: 56px 96px;
}
.docs-nav { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 8px; font-size: 15px; line-height: 1.4; }
.docs-home { display: inline-block; padding: 4px 0 4px 12px; color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; }
.docs-group {
  margin: 22px 0 6px;
  padding-left: 12px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.docs-nav ul { margin: 0; padding: 0; list-style: none; }
.docs-menu > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--rule-strong);
  background: var(--sheet);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.docs-menu > summary::-webkit-details-marker { display: none; }
.docs-menu > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 18px; color: var(--muted); }
.docs-menu[open] > summary::after { content: "\2212"; }
.docs-menu[open] > summary { margin-bottom: 8px; }
.docs-menu-label { font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@supports selector(::details-content) {
  @media (min-width: 801px) {
    .docs-menu > summary { display: none; }
    .docs-menu::details-content { content-visibility: visible; display: block; }
  }
}
.docs-nav li a { display: block; padding: 6px 12px; border-left: 2px solid var(--rule); color: var(--body); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .docs-nav li a:hover { color: var(--ink); border-left-color: var(--muted); }
}
.docs-nav li a[aria-current] { border-left-color: var(--verdigris); background: var(--sheet); color: var(--ink); font-weight: 500; }

.docs-main { min-width: 0; }
.docs-article :is(p, ul, ol, blockquote, h1, h2, h3, h4) { max-width: 75ch; }
.docs-article h2 { max-width: none; }
.docs-article { font-size: 16px; line-height: 1.65; color: var(--body); overflow-wrap: break-word; }
.docs-article :is(h1, h2, h3, h4) { color: var(--ink); scroll-margin-top: 24px; }
.docs-article h1 { margin-bottom: 24px; font-size: clamp(36px, 6vw, 52px); line-height: 1.05; }
.docs-article h2 { margin: 48px 0 14px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: clamp(26px, 4vw, 30px); line-height: 1.15; }
.docs-article h3 { margin: 32px 0 10px; font-size: 22px; line-height: 1.2; }
.docs-article h4 { margin: 24px 0 8px; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.docs-article :is(p, ul, ol, blockquote, .table-scroll, .hl, pre.plain) { margin: 0 0 18px; }
.docs-article :is(ul, ol) { padding-left: 22px; }
.docs-article li + li { margin-top: 4px; }
.docs-article strong { color: var(--ink); font-weight: 600; }
.docs-article :not(pre) > code { padding: 1px 5px; font-size: 0.875em; background: var(--grey-tint); border-radius: 3px; color: var(--ink); }
.docs-article a code { color: inherit; }
.docs-article blockquote { padding-left: 16px; border-left: 3px solid var(--verdigris-tint); }
.docs-article hr { margin: 40px 0; border: 0; border-top: 1px solid var(--rule); }
.docs-article .hl, .docs-article pre.plain { border: 1px solid var(--rule); background: var(--sheet); }
/* code wraps, never scrolls: a wrapped line hangs 4 characters in, so a reader sees where each source line starts */
.docs-article .hl pre, .docs-article pre.plain {
  margin: 0;
  padding: 16px 20px;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-indent: 4ch hanging each-line;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.docs-article .table { min-width: 0; font-size: 15px; line-height: 1.5; }
/* a word is never broken to squeeze a column: break-word leaves the longest word as the column's least width, and the
   table scrolls (.table-scroll) when the columns need more than the page has */
.docs-article .table :is(td, th) { overflow-wrap: break-word; }
.docs-article .table th { overflow-wrap: normal; }
.docs-article .table th { padding-right: 14px; }
.docs-article .table td { padding: 10px 14px 10px 0; }
.docs-article .doc-ref { color: inherit; }

.docs-toc { position: sticky; top: 24px; padding-left: 16px; border-left: 1px solid var(--rule); font-size: 15px; line-height: 1.4; }
.docs-toc h2 { margin-bottom: 10px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.docs-toc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.docs-toc a { color: var(--body); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .docs-toc a:hover { color: var(--verdigris); }
}

/* ---- owner-pager (23 Oct 2026): the docs pager ----
   Each link is sized to its content, never stretched: a small label above the page title, both left-aligned, at
   least 44 px tall. Previous sits left and Next right when both exist; a lone Next still sits right. On a narrow
   screen the two share the row up to half each and wrap their titles rather than overflow. */
.docs-pager { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
.docs-pager a {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(50% - 6px);
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .docs-pager a:hover { border-color: var(--ink); color: var(--ink); }
}
.docs-pager a[rel="next"] { margin-left: auto; }
.docs-pager-label { font-size: var(--fs-label); font-weight: 400; color: var(--muted); }

.docs-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
/* the docs index: each link a 44 px row between hairlines, the title then a small arrow at the row's end; on hover
   (fine pointers only) the row takes the accent and the arrow nudges 2 px right */
.docs-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; font-size: var(--fs-small); line-height: 1.4; }
.docs-list li + li { border-top: 1px solid var(--rule-soft); }
.docs-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-block: 6px; color: var(--ink); text-decoration: none; transition: color 160ms ease; }
.docs-list a > svg { flex: none; color: var(--muted); transition: transform 160ms var(--ease-out), color 160ms ease; }
.docs-list a:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .docs-list a:hover { color: var(--verdigris-dark); }
  .docs-list a:hover > svg { color: var(--verdigris); transform: translateX(2px); }
}

@media (max-width: 1100px) {
  .docs { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
  .docs-toc { display: none; }
}

@media (max-width: 800px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  .docs-nav { position: static; max-height: none; padding: 0; overflow: visible; font-size: 16px; }
  .docs-menu[open] { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
  .docs-home { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .docs-nav li a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
  .docs-list { font-size: 16px; }
  .docs-article .hl pre, .docs-article pre.plain { padding: 14px 16px; }
  .docs-article .table { min-width: 560px; }
}

/* ---- narrow screens ----------------------------------------------------------------------------------------------
   Under 900 px: the header collapses behind the Menu button, stat rows go two by two, running text at 16 px.
   Under 700 px: one column (cards, plugins, prices), the dumbbell's label column wraps.
   Under 480 px: the phone scale (h1 40, h2 30, figures 40, rhythm 64), a 20 px gutter. Nothing overflows at 390 px. */

@media (max-width: 900px) {
  .site-header > .container { min-height: 64px; gap: 0 12px; padding-block: 10px; }
  .header-cta { order: 1; }
  .menu-button { order: 2; }
  /* without script the nav stays: a full-width row under the logo */
  .nav { order: 3; flex-basis: 100%; gap: 0 24px; }
  .nav a { min-width: 44px; }
  .js .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(26, 28, 31, 0.3);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  .js .menu-button[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
  .js .nav:not([data-open]) { display: none; }
  .js .nav[data-open] { flex-direction: column; align-items: stretch; margin-top: 10px; border-top: 1px solid var(--rule); font-size: 16px; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
  /* opening eases in from display: none; closing stays instant */
  @starting-style { .js .nav[data-open] { opacity: 0; transform: translateY(-4px); } }
  .js .nav[data-open] a { justify-content: flex-start; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
  .js .nav[data-open] a:last-child { border-bottom: 0; }
  .js .nav[data-open] a[aria-current] { padding-left: 12px; border-bottom-color: var(--rule-soft); box-shadow: inset 2px 0 0 var(--verdigris); }

  /* phones and tablets: nothing a reader reads under 16 px, short labels and mono values included */
  :root { --fs-label: 16px; }
  .docs-article .table, .detect-card, .table .cell-mono { font-size: 16px; }

  .stat-line > .stat { flex: 1 1 calc(50% - 16px); }
  .cards > .stat-tile { flex: 1 1 calc(50% - 10px); }
  .viewer-method > summary { display: flex; align-items: center; min-height: 44px; }
}

/* a .table (min-width 720 px, .table-num 900 px) scrolls once the container is narrower than its minimum: from
   964 px down it sits in a ruled box, with a shadow at the edge that has more (background-attachment: local covers
   it at the ends) */
@media (max-width: 964px) {
  .table-scroll {
    border: 1px solid var(--rule-strong);
    padding: 16px 0 4px 16px;
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left / 32px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, transparent) right / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(26, 28, 31, 0.22), transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(26, 28, 31, 0.22), transparent) right / 12px 100% no-repeat scroll;
  }
  .table :is(th, td):last-child { padding-right: 16px; }
}

@media (max-width: 700px) {
  .cards > * { flex-basis: 100%; }
  .plugins { grid-template-columns: minmax(0, 1fr); }
  .section > .container.hero { padding-top: 72px; }
  .section > .container.page-head { padding-top: 72px; }
  .stat-value { font-size: 44px; }
  .stat-md .stat-value { font-size: 36px; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .dl dd + dt { margin-top: 12px; }
  .chart-plot { position: static; }
  .chart-tip {
    left: 0;
    right: auto;
    bottom: calc(100% - 6px);
    width: max-content;
    max-width: min(300px, calc(100vw - 2 * var(--gutter)));
    white-space: normal;
  }
  /* the dumbbell keeps its three columns: the label shrinks and wraps, the plot and the value keep their room */
  .chart-row, .chart-axis { gap: 12px; }
  .chart-label { flex: 1 1 0; }
  .chart-plot { flex: 0 1 46%; }
  .chart-value { flex-basis: 52px; }
  .bars .chart-plot { flex-basis: 34%; }
  .bars .chart-value, .bars .chart-axis-end { flex-basis: 72px; }
  /* the before and after rows keep four columns: the edit wraps, the three numbers keep 64 px each */
  .compare-head, .compare-row { grid-template-columns: minmax(0, 1fr) 60px 60px 72px; gap: 8px; }
  .compare-name, .compare-gap { font-size: 15px; }
  .compare-stock, .compare-own { font-size: 16px; }
  .table.fp-table :is(th, td) { padding-right: 10px; }
  .table.fp-table :is(th, td):last-child { padding-right: 0; }
  .fp-table td { white-space: normal; }

  /* the viewer: the stage first, full width, the toggles and the caption under it */
  .viewer-stagecol .stage { order: -1; }
  .viewer-toggles { margin-top: 4px; }
  .viewer-stagecol .viewer-player { order: -2; }
  .viewer-stagecol .viewer-controls { order: 0; margin-top: 4px; }
}

@media (max-width: 480px) {
  :root { --gutter: 20px; --rhythm: 64px; }
  .home { --rhythm: 64px; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 30px; }
  .docs-article h1 { font-size: 40px; }
  .stat-value, .stat-md .stat-value, .price-amount { font-size: 40px; }
  .section > .container.hero { padding: 56px var(--gutter) 64px; gap: 36px; }
  .section > .container.page-head { padding: 56px var(--gutter) 64px; }
  .stat-line > .stat { flex-basis: 100%; }
  .rows > li, .rows > div { gap: 4px 20px; }
  .chart-axis text:not(:first-child):not(:last-child) { display: none; }
  .stage-file-right { display: none; }
  .code, .terminal-body, .hero-run .terminal-body { padding: 20px; }
  .terminal-more > summary { padding: 0 20px; }
  /* the check card's two value columns get the room the mono values need */
  .check-card { padding: 20px 16px; }
  .check-row { gap: 10px; }
}

/* legal pages */
/* /legal/<slug>: the counsel-cut text in the docs article style, one 760 px column, the notice chip and version line
   above it, the list of legal texts below. */
.legal { max-width: calc(760px + 2 * var(--gutter)); padding-block: 56px 96px; display: flex; flex-direction: column; gap: 24px; }
.legal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.legal-version { margin: 0; overflow-wrap: anywhere; }
.legal-article > h1:first-child { margin-top: 0; }
.legal-nav { padding-top: 24px; border-top: 1px solid var(--rule); }
.legal-nav ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.legal-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }
@media (max-width: 800px) {
  .legal { padding-top: 24px; }
}

/* integrations flows */
/* /integrations: the mode tabs and the four flows (macros/flow.html, js/flows.js). Mobile first: the stages stack
   with a short vertical rule between them; from 801 px they sit on a rail: input, the Laidline step, the four layers
   fanned out and joined again, the result card. Motion exists only under .seq-armed, which the script sets when
   motion is allowed, on a flow below the fold at load (played as it scrolls in) or as it plays one on screen: nodes
   rise in and connectors draw with per-stage delays (the 1:1 arrows by stroke-dashoffset
   over pathLength 1; the fan and the join, which stretch to the layer list's height, by a clip-path wipe, since
   Chrome measures a non-scaling-stroke dash in screen space and a stretched path would show its tail); a replay
   drops .seq-play, reflows and adds it back. Without script, or under reduced motion, the markup's final state is
   what shows. Nothing under 14 px. */
.mode-tabs { display: none; flex-wrap: wrap; gap: 8px; }
.js .mode-tabs { display: flex; }
@media (scripting: enabled) { .mode-tabs { display: flex; } }
.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.mode-tab .mode-n { font-family: var(--mono); font-size: 15px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .mode-tab:hover { border-color: var(--ink); }
}
.mode-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.mode-tab[aria-selected="true"] .mode-n { color: var(--dark-accent); }
.mode[hidden] { display: none !important; }  /* set by the scripts; until they run all four modes show, below the fold */
.is-wired > .mode { border-top: 0; padding-top: 32px; }
.mode { display: flex; flex-direction: column; gap: 36px; }
.mode-head { display: flex; flex-direction: column; gap: 12px; }
.plugins-list { list-style: none; margin: 0; padding: 0; }
.plugins-list > li { display: flex; min-width: 0; }
.plugins-list .plugin { flex: 1 1 auto; }
.table .cell-when { white-space: nowrap; }
.tag-fail { background: var(--oxide-tint); color: var(--oxide); }
.tag-none { color: var(--muted); }

/* the flow: an ordered list, stacked */
.seq { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.seq-stage { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.seq-stage + .seq-stage::before { content: ""; justify-self: center; width: 1px; height: 28px; background: var(--rule-strong); }
.seq-line, .seq-gap { display: none; }
.seq-node { min-width: 0; }
.seq-k { display: block; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.seq-t { display: block; font-size: var(--fs-small); line-height: 1.45; color: var(--body); }
.seq-chip, .seq-bar { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--rule-strong); background: var(--sheet); }
.seq-chip code, .seq-bar code { font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.seq-bar { background: var(--ink); border-color: var(--ink); }
.seq-bar .seq-k { color: var(--dark-accent); }
.seq-bar code { color: var(--sheet); }
.seq-bar .seq-t { color: var(--dark-muted); }
.seq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seq-layer { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--verdigris); background: var(--sheet); }
.seq-name { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.seq-card { padding: 20px 22px; border: 1px solid var(--rule-strong); background: var(--sheet); font-family: var(--mono); font-size: 15px; line-height: 1.5; }
.seq-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-mid); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.seq-head > span:last-child { letter-spacing: 0; text-transform: none; font-family: var(--sans); color: var(--body); }
.seq-head-detect { margin-top: 16px; }
.seq-rows { display: grid; gap: 6px; margin-top: 10px; }
.seq-rows > div { display: grid; grid-template-columns: minmax(100px, 0.36fr) minmax(0, 1fr); gap: 0 14px; }
.seq-rows dt { color: var(--muted); overflow-wrap: anywhere; }
.seq-rows dd { color: var(--ink); overflow-wrap: anywhere; }
.seq-rows-detect dd { color: var(--verdigris-dark); font-weight: 500; }
.seq-caveat { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-mid); font-family: var(--sans); font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.seq-replay {
  display: none;
  align-items: center;
  min-height: 44px;
  margin: 6px 0 -12px -10px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--verdigris);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .seq-replay:hover { color: var(--verdigris-dark); text-decoration: underline; }
}
/* Replay shows wherever the script runs and motion is allowed (flows.js wires it; reduced motion has nothing to play) */
@media (prefers-reduced-motion: no-preference) { .js .seq-replay { display: inline-flex; } }

/* the rail */
@media (min-width: 801px) {
  .seq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.7fr); align-items: center; }
  .seq-stage + .seq-stage::before { content: none; }
  .seq-step, .seq-out { grid-template-columns: 40px minmax(0, 1fr); align-items: center; }
  .seq-layers { grid-template-columns: 44px minmax(0, 1fr) 36px; align-items: stretch; }
  .seq-line { display: block; width: 40px; height: 12px; overflow: visible; }
  .seq-gap { display: block; position: relative; min-width: 0; }
  .seq-fan, .seq-join { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .seq-line path, .seq-fan path, .seq-join path { fill: none; stroke: var(--verdigris); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
}

/* the sequence: input, arrow, Laidline, fan, the four layers, join, arrow, result, its rows, detect, caveat. Fast
   (look refresh, 31 Oct 2026): each node rises in over 220 ms, 60 ms apart, the card's rows 30 ms apart, connectors
   draw in 200 to 240 ms; the last transition ends by 900 ms */
@media (prefers-reduced-motion: no-preference) {
  .seq-armed .seq-node, .seq-armed .seq-caveat { opacity: 0; transform: translateY(8px); }
  .seq-armed .seq-rows > div { opacity: 0; }
  .seq-armed .seq-stage::before { transform: scaleY(0); transform-origin: top; }
  .seq-armed .seq-line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .seq-armed .seq-fan, .seq-armed .seq-join { clip-path: inset(-4px -4px -4px calc(100% + 4px)); }
  .seq-play .seq-node, .seq-play .seq-caveat { opacity: 1; transform: none; transition: opacity 220ms var(--ease-out) var(--d, 0ms), transform 220ms var(--ease-out) var(--d, 0ms); }
  .seq-play .seq-rows > div { opacity: 1; transition: opacity 220ms var(--ease-out) var(--d, 0ms); }
  .seq-play .seq-stage::before { transform: none; transition: transform 200ms var(--ease-in-out) var(--dc, 0ms); }
  .seq-play .seq-line path { stroke-dashoffset: 0; transition: stroke-dashoffset 200ms var(--ease-in-out) var(--d, 0ms); }
  .seq-play .seq-fan, .seq-play .seq-join { clip-path: inset(-4px); transition: clip-path 240ms var(--ease-in-out) var(--d, 0ms); }
  .seq-in .seq-node { --d: 0ms; }
  .seq-step { --dc: 60ms; }
  .seq-step .seq-line path { --d: 60ms; }
  .seq-step .seq-node { --d: 120ms; }
  .seq-layers { --dc: 180ms; }
  .seq-fan { --d: 180ms; }
  .seq-list > li:nth-child(1) { --d: 240ms; }
  .seq-list > li:nth-child(2) { --d: 300ms; }
  .seq-list > li:nth-child(3) { --d: 360ms; }
  .seq-list > li:nth-child(4) { --d: 420ms; }
  .seq-join { --d: 420ms; }
  .seq-out { --dc: 480ms; }
  .seq-out .seq-line path { --d: 480ms; }
  .seq-card { --d: 540ms; }
  .seq-rows > div:nth-child(1) { --d: 580ms; }
  .seq-rows > div:nth-child(2) { --d: 610ms; }
  .seq-rows > div:nth-child(3) { --d: 640ms; }
  .seq-rows > div:nth-child(4) { --d: 670ms; }
  .seq-rows-detect > div:nth-child(1) { --d: 600ms; }
  .seq-rows-detect > div:nth-child(2) { --d: 630ms; }
  .seq-caveat { --d: 660ms; }
}

/* ---- rv-integrations ---- */
/* Owner review of /integrations (21 Oct 2026). The page head is a ladder head (owner, 25 Oct 2026; see the page heads
   block): the four ways in as numbered links to the mode tabs (js/flows.js picks the tab), and under the copy a
   labelled "works with" row. The mode code blocks
   take a wider column and wrap rather than scroll (the snippets are rewrapped to 52 characters, so they fit from
   801 px, and mostly to 44). The flow: from 1000 px the input, the Laidline step and the four layers share the first row and the result
   card takes the full width under them; from 801 px the card's result and detect halves sit side by side; a row's
   label sits over its value once the list is narrower than a label column plus its longest word. Nothing under 14 px. */
.int-works { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 24px; border-top: 1px solid var(--rule); }
.int-works-label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.int-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.int-chips > li { padding: 4px 10px; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--sheet); font-family: var(--mono); font-size: 15px; line-height: 1.4; color: var(--body); }
.mode-tabs { scroll-margin-top: 24px; }
@media (max-width: 480px) { .int-works { flex-direction: column; align-items: flex-start; } }

/* the mode code: a column wide enough for the 52-character lines, wrapping (never scrolling) when narrower, a wrapped
   line's continuation hung 6 characters in; on phones the block runs to the screen edges, tracked 0.02em tighter, so
   the 44-character lines fit at 390 px and only the queue URL wraps */
.mode .split > .split-lead { flex: 1 1 300px; }
.mode .split > .code { flex: 1 1 520px; white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 6ch hanging each-line; }
@media (max-width: 480px) { .mode .split > .code { margin-inline: calc(-1 * var(--gutter)); border-inline-width: 0; padding: 20px 14px; letter-spacing: -0.02em; } }

/* the result card's rows: a 17-character label column, the label over its value when the list is too narrow for the
   label column and a 23-character word; a value's words never break inside (macros/flow.html, words) */
.seq-rows { container-type: inline-size; }
.seq-rows > div { grid-template-columns: 17ch minmax(0, 1fr); }
.seq-rows dt { overflow-wrap: break-word; }
.seq-rows dd { overflow-wrap: normal; }
.seq-w { white-space: nowrap; }
.seq-t { overflow-wrap: break-word; }
@container (max-width: 360px) {
  .seq-rows > div { grid-template-columns: minmax(0, 1fr); }
  .seq-rows > div + div { margin-top: 4px; }
}

/* 801 to 999 px: too narrow for the rail's chips, so the stages stay stacked (the card still splits in two) */
@media (min-width: 801px) and (max-width: 999px) {
  .seq { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .seq .seq-stage + .seq-stage::before { content: ""; }
  .seq-step, .seq-layers, .seq-out { grid-template-columns: minmax(0, 1fr); }
  .seq-line, .seq-gap { display: none; }
}
@media (min-width: 801px) {
  .seq-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; column-gap: 40px; padding: 22px 24px; }
  .seq-card > .seq-head { grid-column: 1; grid-row: 1; }
  .seq-card > .seq-rows { grid-column: 1; grid-row: 2; }
  .seq-card > .seq-head-detect { grid-column: 2; grid-row: 1; margin-top: 0; }
  .seq-card > .seq-rows-detect { grid-column: 2; grid-row: 2; }
  .seq-card > .seq-caveat { grid-column: 1 / -1; grid-row: 3; }
  .seq-card > .seq-replay { grid-column: 1; grid-row: 4; justify-self: start; }
}
/* from 1000 px: input, step and layers on the rail, the card under them, joined by the stub turning down the edge */
@media (min-width: 1000px) {
  .seq { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1.3fr); }
  .seq-layers { position: relative; }
  .seq-layers::after { content: ""; position: absolute; top: 50%; bottom: 0; right: 0; width: 1.5px; background: var(--verdigris); }
  .seq-out { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .seq-out > .seq-line { display: none; }
  .seq .seq-stage.seq-out::before { content: ""; justify-self: end; width: 1.5px; height: 32px; background: var(--verdigris); }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .seq-armed .seq-layers::after { transform: scaleY(0); transform-origin: top; }
  .seq-play .seq-layers::after { transform: none; transition: transform 160ms var(--ease-in-out) 420ms; }
}

/* ---- rv-licensing ---- */
/* a code block marked data-wrap wraps on narrow screens rather than scrolling */
@media (max-width: 820px) { .code[data-wrap] { white-space: pre-wrap; overflow-wrap: anywhere; } }
/* Licensing page only: How to buy (two path cards and a shared foot), the market table (fixed columns, a stacked
   card per vendor from 800 px down), the issuer read-out in the registration band. */

.buy > .h2 { text-align: center; }  /* owner, 24 Oct 2026: the heading centred over the two paths */
.buy-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.buy-path { gap: 18px; padding: 28px 30px 12px; }
.buy-steps { border-bottom: 0; }
.buy-step { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.buy-code { padding: 12px 18px; font-size: var(--fs-code); line-height: 1.6; }
.buy-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: -16px;
  padding: 22px 30px;
  border: 1px solid var(--rule);
  border-top: 0;
  background: var(--grey-tint);
}
.buy-foot .text { max-width: 600px; color: var(--ink); }
@media (max-width: 800px) {
  .buy-paths { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .buy-path { padding: 24px 20px 8px; }
  .buy-foot { padding: 20px; }
  .buy-foot .btn { width: 100%; justify-content: center; }
}

/* ---- owner-market (23 Oct 2026): the market table ----
   Four columns: what the row is (kind, then what it marks), then three equal value columns: entry price, where your
   media goes, on-premise marking. The kind and the price carry the weight; every cell is inset the same 20 px so
   the Laidline row, the dark contrast row at the top (owner, 25 Oct 2026), lines up with the rows below it. From 800 px down each row
   is a stacked card: the kind and what it marks, then each value under its label. */
.market-scroll { overflow-x: visible; }
.market-table { min-width: 0; table-layout: fixed; }
.market-table th:nth-child(1) { width: 31%; }
.market-table th:nth-child(n + 2) { width: 23%; }
.market-table :is(th, td) { padding: 20px 24px 20px 0; }
.market-table th { padding-block: 0 12px; }
.market-table :is(th, td):first-child { padding-left: 20px; }
.market-table :is(th, td):last-child { padding-right: 20px; }
.market-vendor { display: block; color: var(--ink); font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.market-marks { display: block; margin-top: 6px; font-size: var(--fs-label); font-weight: 400; line-height: 1.5; color: var(--muted); }
.market-marks-label { font-weight: 600; }
.market-read { display: block; margin-top: 6px; font-size: var(--fs-label); font-weight: 400; color: var(--muted); }
.market-src { font-size: var(--fs-small); white-space: nowrap; }
.market-table .market-price { color: var(--ink); font-size: var(--fs-body); font-weight: 500; line-height: 1.45; }
.market-table .row-own { background: var(--ink); }
.market-table .row-own td { padding-block: 22px; border-bottom: 0; color: var(--dark-text); }
.market-table .row-own .market-vendor { color: var(--dark-text); }
.market-table .row-own .market-marks { color: var(--dark-muted); }
.market-table .row-own .market-price { color: var(--dark-accent); font-weight: 600; }
@media (max-width: 964px) {
  .market-scroll { border: 0; padding: 0; background: none; }
  .market-table :is(th, td):last-child { padding-right: 20px; }
}
@media (max-width: 800px) {
  .market-table, .market-table tbody, .market-table tr, .market-table td { display: block; width: auto; }
  .market-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .market-table tr { padding: 20px 0; border-top: 1px solid var(--rule); }
  .market-table tbody tr:first-child { border-top-color: var(--ink); }
  .market-table :is(th, td), .market-table :is(th, td):is(:first-child, :last-child) { padding: 0; border-bottom: 0; }
  .market-table td.cell-name { padding-bottom: 14px; }
  .market-table .market-vendor { font-size: 18px; }
  .market-table td[data-label] { padding-top: 10px; }
  .market-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--muted);
  }
  .market-table .row-own { margin-bottom: 8px; padding: 20px; border-top: 0; }  /* the first row (owner, 25 Oct 2026) */
  .market-table .row-own td { padding-block: 0; }
  .market-table .row-own td.cell-name { padding-bottom: 14px; }
  .market-table .row-own td[data-label] { padding-top: 10px; }
  .market-table .row-own td[data-label]::before { color: var(--dark-muted); }
}

.issuer-read { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.issuer-quote { margin: 0; grid-template-columns: 110px minmax(0, 1fr); }
.band-dark .issuer-quote dd { color: var(--dark-text); }
.band-dark .issuer-quote dt { color: var(--dark-muted); }
.issuer-word { white-space: nowrap; }  /* a date stays on one line */

/* ---- rv-home ---------------------------------------------------------------------------------------------------
   Home after the owner's review of 2026-10-21. Product: three pillars for what the kit includes by default (sheet
   cards ruled in the accent), the other layers under them as supporting detail. Stat band: on the dark band, a
   lead-in, then four figure units, the value first, the claim as its label, n and interval under it. Viewer: image,
   audio and video at once, the portrait photo beside the audio and video stages stacked, the how-to legend beside the
   heading. Under 900 px the Product and stat rows fold; under 701 px the viewer stacks; under 480 px the phone scale. */

.section > .container.home-product { display: flex; flex-direction: column; gap: 48px; }
.home-product-head { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.home-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 32px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--verdigris);
}
.home-pillar-tag {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--verdigris-tint);
  color: var(--verdigris-dark);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-pillar-title { font-size: 28px; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.home-pillar .tile-text { font-size: 16px; }
.home-layers {
  display: grid;
  grid-template-columns: 180px repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.home-layers-label, .home-medium {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-layers-label { padding-top: 5px; }
.home-layer { display: flex; flex-direction: column; gap: 6px; }
.home-layer-title { font-size: 21px; line-height: 1.2; }

/* the stat band: see the owner-hero block at the end of this file */

/* the viewer: the legend beside the heading, then the three panels */
.home-see-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 64px; }
.home-see-head > .stack { flex: 1 1 380px; }
.home-howto { flex: 1 1 560px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-howto > div { padding-top: 12px; border-top: 1px solid var(--rule-strong); }
.home-howto dt { font-family: var(--serif); font-size: 20px; line-height: 1.2; color: var(--ink); }
.home-howto dd { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--body); }

.viewer-trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.viewer-trio-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-content: start; }
.viewer-panel { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.home-medium { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.home-medium::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.viewer-trio .viewer-layout { display: block; }
.viewer-trio .viewer-stagecol { width: 100%; margin-inline: 0; }
.viewer-trio .viewer-caption:empty { display: none; }
.viewer-trio .viewer-caption { font-size: var(--fs-small); }
.viewer-note { font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.viewer-trio .viewer-player { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.viewer-trio :is(.viewer-audio, .audio-ctl) { flex: 1 1 100%; width: 100%; }
/* every panel: the view toggles, the stage, then (audio) the player under it, the note last */
.viewer-trio .viewer-stagecol > .viewer-player { order: 1; }
.viewer-trio .viewer-stagecol > .viewer-note { order: 2; }
/* without script the A/B, the view toggles and Play on the audio and video panels do nothing: they stay out of sight */
@media (scripting: none) {
  .viewer-trio [data-viewer-medium] :is(.viewer-ab, .viewer-toggles, .viewer-play) { display: none; }
}

@media (min-width: 701px) {
  .viewer-trio { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
}
@media (min-width: 900px) {
  .viewer-trio { gap: 48px; }
}

@media (max-width: 900px) {
  .home-pillars { grid-template-columns: minmax(0, 1fr); }
  .home-layers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-layers-label { grid-column: 1 / -1; padding-top: 0; }
}

@media (max-width: 700px) {
  .home-layers { grid-template-columns: minmax(0, 1fr); }
  .home-howto { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 480px) {
  .section > .container.home-product { gap: 36px; }
  .home-pillar { padding: 24px 20px 26px; }
  .home-pillar-title { font-size: 25px; }
  .viewer-trio, .viewer-trio-side { gap: 40px; }
}

/* ---- rv-int2 ---- */
/* Owner review 2 of /integrations (21 Oct 2026): the result card leads with what comes back in plain words, then one
   row per field, a plain label with the field name as code beside it, the value at the right (shortened, the whole of
   it in the title) and the meaning under them; the detect half the same; the caveat in plain words. Under the flow,
   the lead walks the code in numbered steps that match the numbered comments in the code (tok-step), and the method,
   source or route line carries a label. The flow's markup and timing are unchanged. Nothing under 14 px. */
.seq-card .seq-head > .seq-lead { margin-top: 6px; font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--ink); }
.seq-card .seq-head > .seq-where { margin-top: 2px; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--muted); }
.seq-card .seq-head > .seq-where code { font-size: 15px; color: var(--body); }
.seq-card .seq-head { padding-bottom: 12px; }
.seq-card .seq-rows { gap: 12px; margin-top: 14px; }
.seq-card .seq-rows > div { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; }
.seq-card .seq-rows > div + div { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.seq-card .seq-rows dt { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.seq-label { font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--ink); }
.seq-field { font-size: 15px; color: var(--muted); }
.seq-field code { color: var(--muted); }
.seq-card .seq-rows dd.seq-val { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--ink); }
.seq-card .seq-rows dd.seq-val code { font-size: 15px; font-weight: 400; color: var(--ink); }
.seq-card .seq-rows-detect dd.seq-val { color: var(--verdigris-dark); }
.seq-card .seq-rows dd.seq-means { grid-column: 1 / -1; grid-row: 2; font-family: var(--sans); font-size: var(--fs-small); font-weight: 400; line-height: 1.45; color: var(--body); }
.seq-card .seq-rows dd.seq-means code { font-size: 15px; }
.seq-card .seq-caveat { font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.seq-foot { margin-top: 12px; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
@container (max-width: 360px) {
  .seq-card .seq-rows > div { grid-template-columns: minmax(0, 1fr); }
  .seq-card .seq-rows dd.seq-val { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
  .seq-card .seq-rows dd.seq-means { grid-row: 3; }
}
@media (min-width: 801px) {
  .seq-card > .seq-head { align-self: stretch; }  /* both halves' heads end on one line, so their rows start level */
  .seq-card > .seq-foot { grid-column: 1; grid-row: 3; }
  .seq-card > .seq-caveat { grid-row: 4; }
  .seq-card > .seq-replay { grid-row: 5; }
}

/* under the flow: the numbered walk through the code, the labelled names line, the code's numbered comments */
.int2-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.int2-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
.int2-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--verdigris);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--verdigris);
}
.int2-t { padding-top: 2px; font-size: var(--fs-body); line-height: 1.5; color: var(--body); }
.int2-t > strong { font-weight: 500; color: var(--ink); }
.int2-t code { font-size: 15px; }
.int2-names { max-width: 480px; }
.int2-names-k { margin-right: 4px; font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.tok-step { color: var(--dark-accent); }

/* ---- the first marked file (Integrations #start, where every Get started lands) -------------------------------
   one row a step: the numbered node (int2's), the step in words, the command on ink with its copy button (site.js,
   data-copy). The fifth step, registering, takes the ladder's filled verdigris node. A long command wraps between
   its words (.start-w keeps "--accept-terms" whole; the copy takes the text, not the lines) and never scrolls; the
   prompt and the button sit on its first line. Under 900 px the command drops under the words, and under 560 px it
   takes the full width. */
.start-steps { list-style: none; margin: 0; padding: 0; }
.start-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px 24px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.start-step:last-child { border-bottom: 1px solid var(--rule); }
.start-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--verdigris);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--verdigris);
}
.start-step-register .start-n { background: var(--verdigris); color: #fff; }
.start-t { font-size: var(--fs-body); line-height: 1.5; color: var(--body); max-width: 46ch; text-wrap: pretty; }
.start-t > strong { font-weight: 500; color: var(--ink); }
.start-cmd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 4px 4px 4px 16px;
  background: var(--ink);
  color: var(--dark-text);
  border-radius: 4px;
  font-size: 15px;
}
.start-prompt { padding-block: 11px; line-height: 22px; font-family: var(--mono); color: var(--dark-accent); }
.start-cmd > code { flex: 1 1 auto; min-width: 0; padding-block: 11px; line-height: 22px; overflow-wrap: anywhere; }
.start-w { white-space: nowrap; }
.start-copy {
  flex: none;
  min-width: 84px;  /* "Copied" fits without the button growing */
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--dark-text);
  border: 1px solid var(--dark-rule);
  border-radius: 3px;
  font-size: var(--fs-label);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .start-copy:hover { color: var(--sheet); border-color: rgba(232, 230, 224, 0.4); }
}
.start-copy:focus-visible { outline-color: var(--dark-accent); outline-offset: -4px; }
html:not(.js) .start-copy { display: none; }
/* site.js swaps a copy button's label through .is-fading: out, new text, back in */
[data-copy-label] { transition: opacity 150ms ease, filter 150ms ease; }
[data-copy-label].is-fading { opacity: 0; filter: blur(2px); }
.start-next { display: flex; flex-wrap: wrap; gap: 12px 32px; }
@media (max-width: 900px) {
  .start-step { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
  .start-t { padding-top: 2px; }
  .start-cmd { grid-column: 2; }
}
@media (max-width: 560px) { .start-cmd { grid-column: 1 / -1; padding-left: 12px; } }

/* ---- rv-stack ---- */
/* Owner comment of 23 Oct 2026 on /integrations #status: no tested table; the documented integrations as cards grouped
   by the layer of a stack they sit in, then an open-ended "should also work" layer. The layers hang on a spine: one
   verdigris hairline through numbered nodes (the ladder and int2 circles); the last node a "+" and the spine into it
   dashed, its cards on dashed rules, for what the mechanisms should reach but no guide names. Each card is one link to
   its guide (44 px and up), an arrow at its corner; the layer's line under its name in muted sans. From 901 px the layer's name sits left of its cards, three across;
   under that the name over the cards, two across from 600 px, one under. Nothing under 16 px. */
.int-stack { list-style: none; margin: 0; padding: 0; }
.int-layer {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px 40px;
  padding: 32px 0 32px 52px;
}
/* the spine: from the first node's centre to the last node's centre, through every layer */
.int-layer::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--verdigris-light);
}
.int-layer:first-child::before { top: 46px; }
.int-layer-open::before { bottom: auto; height: 46px; border-left-style: dashed; }
/* the rule between layers starts right of the spine */
.int-layer + .int-layer::after { content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: 1px solid var(--rule); }
.int-layer-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.int-layer-n {
  position: absolute;
  left: 0;
  top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--verdigris);
  border-radius: 50%;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: var(--verdigris);
}
.int-layer-open .int-layer-n { border-style: dashed; font-size: 17px; }
.int-layer-name { font-size: 26px; line-height: 28px; }
.int-layer-t { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.int-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.int-cards > li { display: flex; min-width: 0; }
.int-card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 16px 44px 18px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.int-card::after { content: "→"; content: "→" / ""; position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 16px; line-height: 24px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .int-card:hover { border-color: var(--ink); color: var(--ink); }
  .int-card:hover::after { color: var(--verdigris); }
}
.int-card-name { font-size: 18px; font-weight: 500; line-height: 24px; }
.int-card-t { font-size: var(--fs-small); line-height: 1.45; color: var(--body); }
.int-layer-open .int-card { border-style: dashed; background: transparent; }
.int-layer-open .int-card-name { color: var(--verdigris-dark); }
/* a wide card shrinks less on press than a button (0.98, not the 0.97 of the press-feedback block); `a.` matches that
   block's specificity, and the reduced-motion block at the foot still drops it */
a.int-card:active { transform: scale(0.98); }
@media (max-width: 1100px) { .int-layer { grid-template-columns: 180px minmax(0, 1fr); gap: 16px 28px; } }
@media (max-width: 900px) {
  .int-layer { grid-template-columns: minmax(0, 1fr); padding-left: 44px; }
  .int-layer + .int-layer::after { left: 44px; }
  .int-layer-name { font-size: 24px; }
  .int-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .int-layer { padding-block: 28px; }
  .int-layer:first-child::before { top: 42px; }
  .int-layer-open::before { height: 42px; }
  .int-layer-n { top: 28px; }
  .int-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .int-card { padding: 14px 44px 16px 16px; }
  .int-card::after { top: 14px; }
}

/* ---- rv-type ---- */
/* Owner review of 21 Oct 2026: the type scale (tokens on :root), the Proof tiles, the keyed-audio bars and the Proof
   tables. Tiles: label, value, what the value is against, then the detail line (n, date, interval), each on a row
   shared with the sibling tiles (subgrid), so values and detail lines sit level. Bars: the short codec name and its
   second line, the bar, the value, then the details (wrong payloads, interval, date) under the bar. Tables: one
   <tbody> per figure, its method on a line under it; under 1000 px each figure stacks, the column names as labels.
   Nothing under 15 px. */
.cards-even { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cards-even.cards-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-even > .stat-tile { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; min-width: 0; padding: 24px; }
.cards-even > .stat-tile > .stat-value { align-self: end; display: flex; flex-direction: column; gap: 6px; white-space: nowrap; }
.stat-prefix { font-size: var(--fs-small); line-height: 1.2; font-weight: 500; letter-spacing: 0; color: var(--body); }
.stat-tile .stat-context { color: var(--body); }
.stat-detail { padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) { .cards-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cards-even, .cards-even.cards-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .int-chips > li { font-size: 16px; } }

.bars .chart-row { flex-wrap: wrap; row-gap: 4px; }
.bars .chart-label { flex: 0 0 260px; }
/* the details sit centred under their bar: inset by the label column on the left and the value column on the right */
.chart-details { flex: 1 1 100%; margin: 0; padding-left: calc(260px + 16px); padding-right: calc(110px + 16px); display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 28px; font-size: var(--fs-small); line-height: 1.45; }
.chart-details > div { display: flex; gap: 8px; }
.chart-details dt { color: var(--muted); }
.chart-details dd { color: var(--body); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .bars .chart-label { flex: 1 1 100%; }
  .bars .chart-plot { flex: 1 1 0; }
  .chart-details { padding-left: 0; padding-right: 0; gap: 2px 20px; }
  .bars .chart-value { flex-basis: auto; }
  .bars .chart-value-meta { white-space: nowrap; }
}

.text-wide { max-width: 68ch; }
.twin-block { display: flex; flex-direction: column; gap: 14px; }
.twin-note { max-width: 68ch; font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.twin-lead { max-width: 68ch; font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
/* a compact table: the name column sized to the longest name, the figures close beside it rather than spread to the
   container's edge; the same widths in every table so the numbers line up from one table to the next */
.table.twin-table { width: 100%; max-width: 860px; min-width: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.twin-table .col-target { width: 84px; }
.twin-table .col-stock { width: 116px; }
.twin-table .col-own { width: 132px; }
.twin-table .col-iv { width: 136px; }
.table.twin-table :is(th, td) { padding: 11px 20px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table.twin-table thead th { padding-top: 0; padding-bottom: 12px; border-bottom-color: var(--ink); }
.table.twin-table :is(th, td):last-child { padding-right: 0; }
.table.twin-table tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.table.twin-table th.num, .table.twin-table td.num { text-align: right; white-space: nowrap; }
.table.twin-table th[scope="row"] {
  font-family: var(--sans);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.twin-table .cell-value { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; }
.twin-table .cell-count { display: block; font-weight: 400; color: var(--muted); white-space: nowrap; }
.twin-table .cell-muted .cell-value { font-weight: 500; color: var(--body); }
.twin-table .cell-none { color: var(--muted); }

/* the method of each row, closed under its table */
.twin-details { max-width: 860px; }
.twin-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--verdigris);
}
.twin-details > summary::-webkit-details-marker { display: none; }
.twin-details > summary::before { content: "+"; width: 12px; font-family: var(--mono); font-size: 18px; line-height: 1; }
.twin-details[open] > summary::before { content: "\2212"; }
@media (hover: hover) and (pointer: fine) {
  .twin-details > summary:hover { color: var(--verdigris-dark); }
}
.twin-details > summary:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 3px; }
.twin-notes { margin: 4px 0 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; }
.twin-notes > div { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.twin-notes dt { font-weight: 600; color: var(--ink); }
.twin-notes dd { margin: 0; color: var(--body); }
.twin-note-meta { display: block; margin-top: 4px; color: var(--muted); }

/* Proof, owner review of 23 Oct 2026: every table section is one centred 860 px column, so the heading, the lead
   line, the table and its notes share one left and one right edge; the tiles centre their text; the false-positive
   table, without its Date column, spans the tile row */
#table > .container > * { width: 100%; max-width: 860px; margin-inline: auto; }
#table .twin-details { max-width: none; }
.fp-table-box .table.fp-table { width: 100%; max-width: none; }  /* the same left and right edge as the two tiles above */
.cards-centre > .stat-tile { text-align: center; }
.cards-even.cards-centre > .stat-tile > .stat-value { align-items: center; }
.stack-centre { align-items: center; text-align: center; }
.text-line { max-width: none; }

/* Proof, lr-pages (31 Oct 2026): running prose holds 68 characters; each table of the foot sits closed under its title
   (the summary counts its rows); the page index: from 1100 px a rail in the left margin of the four indexed sections,
   sticky, the section in view marked by js/pageindex.js (aria-current); under 1100 px "On this page" in the head */
.compare-method { max-width: 68ch; }
.twin-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.twin-list > .twin-block { display: block; padding-top: 12px; border-top: 1px solid var(--rule); }
.twin-list > .twin-block:first-child { border-top-color: var(--ink); }
.twin-list > .twin-block > .h3 { margin: 0; }
.twin-fold > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--verdigris);
}
.twin-fold > summary::-webkit-details-marker { display: none; }
.twin-fold > summary::before { content: "+"; width: 12px; font-family: var(--mono); font-size: 18px; line-height: 1; }
.twin-fold[open] > summary::before { content: "\2212"; }
.twin-fold > summary:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 3px; }
.twin-fold-body { clear: both; display: flex; flex-direction: column; gap: 14px; padding: 6px 0 20px; }
/* from 700 px the title and the summary share a row: the title floats, the summary (a flex box, so it stays beside the
   float) fills the rest of the row, its words at the right edge */
@media (min-width: 700px) {
  .twin-list > .twin-block { padding-top: 4px; }
  .twin-list > .twin-block > .h3 { float: left; padding-right: 24px; line-height: 52px; }
  .twin-list .twin-fold > summary { justify-content: flex-end; min-height: 52px; }
}
.twin-fold-body .table.twin-table { max-width: none; }

.page-index-rail { display: none; }
.page-index-list { margin: 0; padding: 0; list-style: none; }
.page-index-list a { display: flex; align-items: center; min-height: 44px; color: var(--body); text-decoration: none; transition: color 160ms ease, border-color 160ms ease; }
.page-index-list a[aria-current] { color: var(--ink); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .page-index-list a:hover { color: var(--verdigris-dark); }
  .twin-fold > summary:hover { color: var(--verdigris-dark); }
}
.page-index-menu { border-block: 1px solid var(--rule); }
.page-index-menu > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; list-style: none; font-weight: 500; color: var(--ink); }
.page-index-menu > summary::-webkit-details-marker { display: none; }
.page-index-menu > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 18px; color: var(--muted); }
.page-index-menu[open] > summary::after { content: "\2212"; }
.page-index-menu > summary:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 3px; }
.page-index-menu .page-index-list { padding-bottom: 8px; }
.page-index-menu .page-index-list a { border-top: 1px solid var(--rule-soft); }
@media (min-width: 1100px) {
  .page-index-menu { display: none; }
  .indexed { position: relative; }
  .indexed > .page-index-rail {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(0px, calc((100% - var(--container)) / 2));
    width: calc(var(--gutter) + 176px);
    padding-left: var(--gutter);
    z-index: 1;
    pointer-events: none;
  }
  .page-index { position: sticky; top: 32px; margin-top: var(--rhythm); pointer-events: auto; }
  .page-index-title { margin: 0 0 8px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .page-index .page-index-list { border-left: 1px solid var(--rule); }
  .page-index .page-index-list a { min-height: 44px; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.35; }
  .page-index .page-index-list a[aria-current] { border-left-color: var(--verdigris); }
  .indexed > .section > .container { padding-left: calc(var(--gutter) + 208px); }
  .indexed .split { column-gap: 48px; }
}

/* under 1000 px: each figure a block, its column names as labels (the false-positive table too) */
@media (max-width: 1000px) {
  .table.table-stack, .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; width: auto; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table.table-stack tbody > tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
  }
  .table.table-stack tbody:first-of-type > tr:first-child { border-top-color: var(--ink); }
  .table.table-stack tbody > tr:last-child { border-bottom: 1px solid var(--rule); }
  .table.table-stack :is(th, td), .table.twin-table.table-stack tbody tr > * { padding: 0; border: 0; text-align: left; white-space: normal; }
  .table.table-stack th[scope="row"] { grid-column: 1 / -1; font-size: var(--fs-body); }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 15px; font-weight: 500; color: var(--muted); }
  .twin-table .cell-value, .twin-table .cell-count { white-space: normal; }
  .table.fp-table.table-stack tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* three figures, no Date */
}
@media (max-width: 560px) {
  .table.table-stack tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the false-positive row: stock and samples side by side, Laidline's answer the full width under them */
  .table.fp-table.table-stack tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-table td[data-label="Samples"] { order: 1; }
  .fp-table td[data-label="Laidline"] { order: 2; grid-column: 1 / -1; }
  .table.call-table.table-stack tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }  /* Licensing, voice calls: three figures stay in a row on a phone */
  .twin-notes > div { grid-template-columns: minmax(0, 1fr); }
}

/* Licensing, the issuer ranges: each range on one line in a column wide enough for "32,768 to 65,279", the meanings
   in one column beside them; once the column and a 260 px meaning no longer fit, every range sits over its meaning */
.rows-ranges .rows-label { flex: 0 0 11.5em; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.rows-ranges ~ .issuer-read .issuer-quote { grid-template-columns: calc(11.5em * 15 / 16 + 20px) minmax(0, 1fr); gap: 4px 0; }

/* Compliance, the deadlines: equal cards on one grid, three rows shared across the cards (subgrid) so the regions,
   the duties and the dates sit level whatever wraps; the accented card differs only in colour */
.deadlines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.deadline { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong); background: var(--paper); }
.deadline-region { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.deadline-label { color: var(--ink); }
.deadline-date { align-self: end; padding-top: 6px; white-space: nowrap; }
.deadline-accent { border-top-color: var(--verdigris); }
.deadline-accent .deadline-region { color: var(--verdigris); }
@media (max-width: 1099px) { .deadlines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .deadlines { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* Compliance, lr-pages (31 Oct 2026). The obligations: each source (mono) names the instrument, one per line, linked to
   its primary text with the leaves-the-site mark; under 700 px each duty is a block (the source, then the obligation
   and what Laidline emits under their column names), so no column is ever off-screen. The export band's sample: a
   quiet sheet on the dark band under the heading: the files (path and what it is) beside the command and two trimmed
   excerpts; every line wraps rather than scrolling or clipping. */
.table.duty-table th[scope="row"] { padding: 13px 24px 13px 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 15px; font-weight: 400; vertical-align: top; }
.table.duty-table tbody tr:last-child th { border-bottom: 0; }
.duty-source > * { display: block; }
.duty-source > * + * { margin-top: 4px; }
/* each link a 44 px target without spacing the lines apart */
.duty-source > a { padding-block: 11px; margin-block: -11px; }
.duty-source > * + a { margin-top: -7px; }
.duty-source a { color: var(--verdigris); text-underline-offset: 3px; }
.duty-source a svg { display: inline-block; margin-left: 6px; vertical-align: 0; }
.duty-tail { white-space: nowrap; }
.table.duty-table td > a:only-child { display: inline; min-height: 0; margin: 0; }
@media (max-width: 700px) {
  .table-scroll.duty-scroll { overflow: visible; padding: 0; border: 0; background: none; }
  .table.duty-table, .duty-table tbody, .duty-table tr, .duty-table th, .duty-table td { display: block; width: auto; min-width: 0; }
  .duty-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table.duty-table tbody tr { display: flex; flex-direction: column; gap: 12px; padding: 18px 0; border-top: 1px solid var(--rule); }
  .table.duty-table tbody tr:first-child { border-top-color: var(--ink); }
  .table.duty-table tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .table.duty-table :is(th, td), .table.duty-table :is(th, td):last-child, .table.duty-table th[scope="row"] { padding: 0; border: 0; }
  .duty-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 15px; font-weight: 500; color: var(--muted); }
}

.export-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.export-head > .h2 { max-width: 640px; }
.export-sample { min-width: 0; margin: 0; border: 1px solid var(--dark-rule); background: var(--dark-code); color: var(--dark-text); }
.export-sample-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 20px; border-bottom: 1px solid var(--dark-rule); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-muted); }
.export-sample-schema { letter-spacing: 0; text-transform: none; }
.export-sample-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.export-sample-side { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--dark-rule); }
.export-sample-code { margin: 0; padding: 14px 20px; font-size: var(--fs-code); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.export-sample-label { margin: 0; padding: 14px 20px 0; border-top: 1px solid var(--dark-rule); font-family: var(--mono); font-size: var(--fs-label); color: var(--dark-muted); }
.export-sample-label + .export-sample-code { padding-top: 6px; }
.export-files { margin: 0; padding: 4px 20px; list-style: none; }
.export-files li { display: grid; grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr); gap: 2px 20px; padding: 9px 0; }
.export-files li + li { border-top: 1px solid var(--dark-rule); }
.export-files code { font-size: 15px; line-height: 1.5; color: var(--dark-text); overflow-wrap: anywhere; }
.export-files span { font-size: var(--fs-small); line-height: 1.5; color: var(--dark-muted); }
@media (min-width: 900px) {
  .export-sample-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .export-sample-side { border-top: 0; border-left: 1px solid var(--dark-rule); }
}
@media (max-width: 560px) {
  .export-files li { grid-template-columns: minmax(0, 1fr); }
  .export-sample-head, .export-sample-label, .export-files, .export-sample-code { padding-inline: 16px; }
}

/* the consistency sweep (owner review, 21 Oct 2026): sibling cards share their rows, so labels, lines and dates sit
   level whatever wraps. Home law badges: law, line, date on a subgrid; one column under 560 px. */
.cards.badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cards.badges > .badge { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
.badge-date { align-self: end; }
@media (max-width: 560px) { .cards.badges { grid-template-columns: minmax(0, 1fr); } }
/* the detect card head: the tier and the schema each stay whole; the schema drops under the tier when they meet */
.detect-head { flex-wrap: wrap; }
.detect-head > * { white-space: nowrap; }

/* ---- owner-hero (owner, 24 Oct 2026; look refresh, 31 Oct 2026) ----------------------------------------------------
   Home, the stat band ("show off the impressive stats"): the dark band carries the laid-line motif in light ink; a
   lead-in; four figures straight on the dark field, left-aligned, parted by 1 px hairlines in the band's rule colour
   (no tiles, no accent rule): the measured value the largest thing on the page after the hero, the claim in the serif,
   one muted context line; the rows are shared (subgrid) so the claims and the context lines sit level whatever wraps;
   the line to Proof closes the band. Four across from 1001 px, two by two (a hairline down the middle and one across)
   to 561 px, then one column with a hairline between figures. */
.home-stats-band {
  background-color: var(--ink);
  background-image:
    repeating-linear-gradient(rgba(232, 230, 224, 0.035) 0, rgba(232, 230, 224, 0.035) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(90deg, rgba(232, 230, 224, 0.03) 0, rgba(232, 230, 224, 0.03) 1px, transparent 1px, transparent 112px);
}
.section > .container.home-stats { padding-block: 104px 96px; display: flex; flex-direction: column; align-items: stretch; gap: 56px; }
.home-stats-lead { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.home-stats-lead > .h2 { text-wrap: balance; }
.home-stat-grid { --stat-gap: 56px; --stat-row-gap: 56px; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stat-row-gap) var(--stat-gap); }
.home-stat {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: start;
  align-content: start;
  text-align: left;
}
/* the hairline sits in the middle of the gap before every figure but the first in its row */
.home-stat + .home-stat::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--stat-gap) / -2); width: 1px; background: var(--dark-rule); }
.home-stat-value { font-size: clamp(52px, 5vw, 72px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--sheet); white-space: nowrap; }
.home-stat-num { position: relative; display: inline-block; }
/* the unit hangs off the number's right edge on its baseline, so every value starts and sizes alike */
.home-stat-unit { position: absolute; left: 100%; bottom: 0.12em; margin-left: 8px; font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: 0.02em; color: var(--dark-accent); }
.home-stat-claim { margin-top: 24px; font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--sheet); text-wrap: balance; }
.home-stat-context { max-width: 28ch; margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--dark-muted); text-wrap: pretty; }
.home-stats-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; padding-top: 28px; border-top: 1px solid var(--dark-rule); }
.home-stats-text { font-size: var(--fs-small); line-height: 1.5; color: var(--dark-muted); }
@media (max-width: 1000px) {
  .home-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stat-value { font-size: 68px; }
  .home-stat:nth-child(odd)::before { content: none; }
  /* the second row: a hairline across in the middle of the row gap, meeting the one down the middle */
  .home-stat:nth-child(n+3)::after { content: ""; position: absolute; top: calc(var(--stat-row-gap) / -2); left: 0; right: calc(var(--stat-gap) / -2); height: 1px; background: var(--dark-rule); }
  .home-stat:nth-child(even)::after { left: calc(var(--stat-gap) / -2); right: 0; }
  .home-stat:nth-child(n+3)::before { top: calc(var(--stat-row-gap) / -1); }
}
@media (max-width: 560px) {
  .home-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .home-stat-value { font-size: 60px; }
  .home-stat-claim { margin-top: 20px; }
  .home-stat + .home-stat::before { content: ""; top: calc(var(--stat-row-gap) / -2); bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .home-stat:nth-child(n+3)::after { content: none; }
}
@media (max-width: 480px) {
  .section > .container.home-stats { padding-block: 64px; gap: 40px; }
}

/* the page heads of Licensing, Proof, Integrations and Compliance (owner, 24-25 Oct 2026: "not just floating text"): on
   the laid-line motif, the copy on the left (eyebrow, heading, line) and on the right a sheet card that shows the
   page's point at a glance, as a numbered ladder: a verdigris hairline joins the numbers, the last step (the answer)
   filled. One column from 1000 px down, the card under the copy; a .ladder-across ladder (three steps) lies across the
   page from 701 to 1000 px. Licensing's ladder is the reference; the others vary it below. */
.section > .container.ladder-head {
  padding: 112px var(--gutter) 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px 72px;
}
.ladder-head-copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ladder-head-copy > .h1 { text-wrap: balance; }
.ladder-head-copy > .lede { max-width: 520px; }
.ladder { list-style: none; margin: 0; padding: 0; min-width: 0; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--sheet); }
.ladder-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding: 22px 24px 24px; }
.ladder-step + .ladder-step { border-top: 1px solid var(--rule); }
.ladder-step:not(:last-child)::after { content: ""; position: absolute; left: 38px; top: 50px; bottom: -22px; width: 1px; background: var(--verdigris-light); }
.ladder-step-n {
  grid-row: 1 / span 3;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--verdigris);
  border-radius: 50%;
  background: var(--sheet);
  font-family: var(--mono);
  font-size: 15px;
  color: var(--verdigris);
}
.ladder-step-label { align-self: center; min-height: 28px; display: flex; align-items: center; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ladder-step-title { font-family: var(--serif); font-size: 24px; line-height: 1.15; color: var(--ink); text-wrap: balance; }
.ladder-step-line { font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.ladder-step-filled .ladder-step-n { background: var(--verdigris); color: #fff; }
.ladder-step-filled .ladder-step-label { color: var(--verdigris); }
@media (max-width: 1000px) {
  .section > .container.ladder-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ladder-head-copy > .h1 { max-width: 720px; }
}
/* from 701 to 1000 px a .ladder-across ladder lies across the page, its steps side by side, ruled apart, without the
   hairline */
@media (min-width: 701px) and (max-width: 1000px) {
  .ladder-across { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ladder-across > .ladder-step { align-content: start; row-gap: 6px; }
  .ladder-across > .ladder-step + .ladder-step { border-top: 0; border-left: 1px solid var(--rule); }
  .ladder-across > .ladder-step:not(:last-child)::after { display: none; }
  .ladder-across .ladder-step-n { grid-row: auto; }
  .ladder-across .ladder-step-title, .ladder-across .ladder-step-line { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .section > .container.ladder-head { padding-top: 72px; } }
@media (max-width: 480px) {
  .section > .container.ladder-head { padding: 56px var(--gutter) 64px; gap: 36px; }
  .ladder-step { column-gap: 14px; padding: 18px 16px 20px; }
  .ladder-step:not(:last-child)::after { left: 30px; top: 46px; bottom: -18px; }
  .ladder-step-title { font-size: 22px; }
}
/* Compliance: each step's last line is the provisions it answers, in mono; a link in a title keeps the title's ink,
   underlined in the light accent */
.ladder-step-refs { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.01em; color: var(--muted); }
.ladder-step-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--verdigris-light); text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .ladder-step-title a:hover { color: var(--verdigris-dark); text-decoration-color: currentColor; }
}
/* Integrations: five tighter steps; the four ways are links (the whole step, 44 px and up, an arrow at its corner)
   that open their mode tab; the hairline into the fifth, the one evidence log, is full verdigris */
.ladder-compact > .ladder-step { padding: 16px 24px 18px; }
.ladder-compact > .ladder-step:not(:last-child)::after { top: 44px; bottom: -16px; }
.ladder-compact .ladder-step-title { font-size: 22px; }
.ladder-step-linked, .ladder-compact > .ladder-step-linked { display: block; padding: 0; }
.ladder-compact { overflow: hidden; }
.ladder-step-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 2px;
  padding: 16px 52px 18px 24px;
  color: var(--ink);
  text-decoration: none;
}
.ladder-step-link > .ladder-step-n { grid-row: 1 / span 2; }
.ladder-step-link > .ladder-step-title { align-self: center; min-height: 28px; display: flex; align-items: center; }
.ladder-step-link::before { content: "↓"; content: "↓" / ""; position: absolute; top: 16px; right: 24px; font-family: var(--mono); font-size: 16px; line-height: 28px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .ladder-step-link:hover { background: var(--paper); color: var(--ink); }
  .ladder-step-link:hover .ladder-step-n { background: var(--paper); }
  .ladder-step-link:hover::before { color: var(--verdigris); }
}
.ladder-step-link:focus-visible { outline-offset: -3px; }
/* a wide step shrinks less on press (0.98); see a.int-card:active */
a.ladder-step-link:active { transform: scale(0.98); }
.ladder-join > .ladder-step:nth-last-child(2)::after { width: 2px; left: 37.5px; background: var(--verdigris); }
/* the log's node: filled, a sheet-coloured dot in it rather than a fifth number */
.ladder-step-n-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sheet); }
@media (max-width: 480px) {
  .ladder-compact > .ladder-step { padding: 14px 16px 16px; }
  .ladder-compact > .ladder-step-linked { padding: 0; }
  .ladder-compact > .ladder-step:not(:last-child)::after { top: 42px; bottom: -14px; }
  .ladder-join > .ladder-step:nth-last-child(2)::after { left: 29.5px; }
  .ladder-step-link { column-gap: 14px; padding: 14px 44px 16px 16px; }
  .ladder-step-link::before { top: 14px; right: 16px; }
  .ladder-compact .ladder-step-title { font-size: 21px; }
}
/* Proof: a caption (stock decoder, then Laidline), three edits each with a short muted bar for the stock decoder and
   the verdigris one for Laidline, the false-positive bound filled, then the runs' n and dates */
.ladder-cap { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 16px 24px 14px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ladder-cap-own { color: var(--verdigris); }
.rate-list { list-style: none; margin: 0; padding: 0; }
.rate-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; column-gap: 16px; row-gap: 6px; padding: 18px 24px 20px; font-variant-numeric: tabular-nums; }
.rate-row + .rate-row { border-top: 1px solid var(--rule); }
.rate-name { grid-column: 1 / -1; margin-bottom: 4px; font-family: var(--serif); font-size: 22px; line-height: 1.15; color: var(--ink); }
.rate-bar { display: block; width: 100%; overflow: visible; }
.rate-bar-stock { height: 6px; }
.rate-bar-own { height: 10px; }
.rate-track { fill: var(--track); }
.rate-bar-stock .rate-fill { fill: var(--muted); fill-opacity: 0.55; }
.rate-bar-own .rate-fill { fill: var(--verdigris); }
.rate-value { text-align: right; line-height: 1.3; }
.rate-value-stock { font-size: var(--fs-small); color: var(--muted); }
.rate-value-own { font-size: 18px; font-weight: 600; color: var(--verdigris); }
.rate-row-filled { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: color-mix(in srgb, var(--verdigris-tint) 38%, var(--sheet)); }
.rate-label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--verdigris); }
.rate-title { font-family: var(--serif); font-size: 24px; line-height: 1.15; color: var(--ink); text-wrap: balance; }
.rate-line { font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.rate-line [data-figure-value] { font-weight: 600; color: var(--verdigris); }
.ladder-foot { margin: 0; padding: 12px 24px 14px; border-top: 1px solid var(--rule); font-size: var(--fs-label); line-height: 1.5; color: var(--muted); }
/* from 701 to 1000 px the three edits lie across the card, ruled apart, the false-positive bound under them */
@media (min-width: 701px) and (max-width: 1000px) {
  .rate-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rate-row + .rate-row { border-top: 0; border-left: 1px solid var(--rule); }
  .rate-row-filled { grid-column: 1 / -1; }
  .rate-row + .rate-row-filled { border-top: 1px solid var(--rule); border-left: 0; }
  .rate-name { font-size: 21px; }
}
@media (max-width: 480px) {
  .ladder-cap { padding: 14px 16px 12px; }
  .rate-row { column-gap: 12px; padding: 16px 16px 18px; grid-template-columns: minmax(0, 1fr) 64px; }
  .rate-name { font-size: 21px; }
  .rate-title { font-size: 22px; }
  .ladder-foot { padding: 12px 16px 14px; }
}

/* ---- reduced motion: no movement, colour and opacity changes stay ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  :is(.btn, .toggle, .mode-tab, .price-switch-option, .int-card, .start-copy, .docs-pager a, .ladder-step-link, .menu-button):active { transform: none; }
  .audio-play:active, .docs-list a:hover > svg { transform: none; }
  .terminal-more > summary::before { transition: none; }
  @starting-style { .js .nav[data-open] { transform: none; } }
  [data-copy-label].is-fading { filter: none; }
}