/* The v2 layer, part 2: the public site (the Persuade and Read surfaces). Loads after core.css. REDESIGN 2026-10-29, DESIGN-v2.md.
   The sign band carries the navigation, the enamel ground carries the content, the line diagram carries the proof.
   SITE-V2 (2026-11-02) moved every public page here: the landing (night hero, DESIGN-v2.md 6a), the marketing pages (the page sources'
   own `mk-*` vocabulary), pricing (`plan`, `pc-*`), the reading pages (`doc`, `prose`, `vs-*`), the help centre, the free tools (`sc-*`),
   the changelog, the legal drafts and the 404. Class names a page source, a script or a test reads are kept; only their look is new.
   The rules of core.css hold: transform and opacity only move, every duration is a token, one focus ring, square shapes, the lamp on the
   sign only, status colours with a glyph and a word. */

/* ==== the service notice: the test build said once, above everything, the way a station posts planned works ==== */
.service-notice { background: var(--paper-2); color: var(--ink); font-size: var(--t-sm); }
.service-notice .wrap { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding-block: 6px 4px; }
.service-notice a { font-weight: var(--w-label); }

/* ==== the sign band (header) ==== */
.bar { position: sticky; top: 0; z-index: 40; background: var(--sign); color: var(--on-sign); }
.bar-in { display: flex; align-items: center; gap: var(--s-5); min-height: var(--bar-h); }
.bar .wordmark { flex: none; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: var(--s-2); }
.nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 2px 11px 0; color: var(--on-sign); text-decoration: none;
  font-weight: var(--w-label); white-space: nowrap; }
.nav-link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 3px; background: var(--lamp); transform: scaleX(0);
  transform-origin: left; transition: transform var(--dur-move) var(--ease-standard); }
.nav-link:hover { text-decoration: none; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav-link:hover::after { transform: scaleX(1); } }
.bar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.bar-actions .btn { white-space: nowrap; }
.menu-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 2px 14px 0; border: 0; background: transparent; color: var(--on-sign);
  font: inherit; font-weight: var(--w-strong); cursor: pointer; box-shadow: inset 0 0 0 var(--rule-heavy) var(--on-sign-2);
  transition: transform var(--dur-press) var(--ease-standard); }
.menu-toggle:active { transform: scale(var(--press-scale)); }
.menu-toggle[aria-expanded="true"] { background: var(--sign-2); }
/* the sheet is opaque (a fade would let the page show through it) and drops in; with reduced motion it simply appears */
.menu-sheet { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--bar-h)); overflow-y: auto; background: var(--sign);
  box-shadow: var(--lift); padding: var(--s-2) var(--gutter) var(--s-5); }
.menu-sheet:not([hidden]) { animation: lx-drop var(--dur-enter) var(--ease-enter) both; }
.menu-sheet nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
.menu-sheet a:not(.btn) { display: flex; align-items: center; min-height: 48px; color: var(--on-sign); text-decoration: none; font-weight: var(--w-label);
  box-shadow: inset 0 -1px 0 var(--sign-3); }
.menu-sheet a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--lamp); }
.menu-sheet .btn { grid-column: 1 / -1; margin-top: var(--s-4); width: 100%; }
/* the one glass of the system: once content scrolls under it, the band lets a little of it through (fallback: the solid sign) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar.is-scrolled { background: rgba(13, 36, 51, 0.94); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
}
@media (prefers-reduced-transparency: reduce) { .bar.is-scrolled { background: var(--sign); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.bar-sentinel { display: block; height: 1px; margin-bottom: -1px; }

/* ==== bands: one rhythm for the page ==== */
.band { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); }
.band-fog { background: var(--paper-2); }
.band-sign { background: var(--sign); color: var(--on-sign); }
.band-sign .note, .band-sign .section-head p { color: var(--on-sign-2); }
.section-head { max-width: 34em; margin-bottom: var(--s-7); }
.section-head h2 { max-width: 20ch; }
.section-head p { margin-top: var(--s-4); font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); }
.section-head p.note { font-size: var(--t-sm); line-height: var(--lh-body); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.split > .section-head { margin-bottom: 0; position: sticky; top: calc(var(--bar-h) + var(--s-6)); }
.btn-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: var(--w-label); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-link span { display: inline-block; transition: transform var(--dur-move) var(--ease-standard); }
@media (hover: hover) { .btn-link:hover span { transform: translateX(var(--move-sm)); } }

/* ==== the landing hero's shared parts (the hybrid of 2026-10-30, DESIGN-v2.md 6a; WOW 2026-11-02 replaced its night, beams and glass
   with .night-hero, .sky and .glass below, in the WOW block) ====================================================================
   The landing alone opens at night: two lamps throw two beams that cross on one frosted-glass card holding the incident as the line.
   Text never sits on light: the beams live in the card's column; the copy column stays plain navy. Behind the glass the card is at least
   74 % navy: measured over the brightest light that can reach it (#374141), white keeps 10.5:1 and the night text colours 5.3:1 or more;
   without backdrop-filter or with reduced transparency the card is solid #13283b. */
.hero { padding-top: clamp(var(--s-6), 6vw, var(--s-8)); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6) var(--s-8); align-items: end; }
.hero h1 { max-width: 11ch; }
.check-form { margin-top: var(--s-6); max-width: 36rem; }
.check-form .label, .check-form > label { display: block; margin-bottom: var(--s-2); font-weight: var(--w-label); }
.check-form .input { min-height: 56px; font-size: var(--t-lg); border-color: var(--ink); border-width: 3px; }
.check-form .btn { min-height: 56px; }
.check-form .hint { margin-top: var(--s-2); }
.check-form .field-error { margin-top: var(--s-2); }
.scan-live { margin-top: var(--s-2); min-height: 1.55em; font-size: var(--t-sm); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
.hero-cta .fine { font-size: var(--t-sm); color: var(--ink-2); }
/* what sets it apart: three facts, each a small stop */
.fact-strip { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); list-style: none; font-size: var(--t-sm); font-weight: var(--w-label);
  color: var(--on-sign-2); }
.fact-strip li { display: inline-flex; align-items: center; gap: 9px; }
.fact-strip li::before { content: ""; width: 10px; height: 10px; flex: none; border: 3px solid var(--on-sign-2); border-radius: var(--r-round); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-4); }
.card-head h2 { font-size: var(--t-lg); font-weight: var(--w-strong); letter-spacing: 0; color: var(--on-sign); }
.card-head .host { color: var(--on-sign-2); font-size: var(--t-sm); }
.scenarios { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* the demo-site buttons work only with the script: their room is kept while it loads, so nothing moves when they appear (CLS 0);
   without scripts they take no room */
.scenarios.is-waiting { visibility: hidden; }
@media (scripting: none) { .scenarios.is-waiting { display: none; } }
.scenario { min-height: var(--control-sm); padding: 2px 14px 0; border: 0; background: var(--paper); color: var(--ink); font: inherit; font-weight: var(--w-label);
  font-size: var(--t-sm); cursor: pointer; box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink); transition: transform var(--dur-press) var(--ease-standard); }
.scenario:hover { background: var(--paper-3); }
.scenario:active { transform: scale(var(--press-scale)); }
.scenario[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* the line at night: light ink, and status colours stepped up for the dark glass. Over the brightest ground measured behind the card
   (#374141, DESIGN-v2.md 6a) the text colours keep 5.3:1 or more; the regional tone (4.9:1) marks and draws, it is never text */
.night-line { --night-ink: #c2d2dc; --night-regional: #e8a531; --night-down: #ff9d93; --night-steady: #7fd8ad; gap: var(--s-4); }
.night-line .stop::before { background: var(--night-ink); }
.night-line .stop[data-next="regional"]::before { background: var(--night-regional); }
.night-line .stop[data-next="down"]::before { background: var(--night-down); }
.night-line .stop-mark { border-color: var(--on-sign); }
.night-line .stop-regional .stop-mark { border-color: var(--night-regional); background: linear-gradient(90deg, var(--ground) 50%, var(--night-regional) 50%); }
.night-line .stop-down .stop-mark { border-color: var(--night-down); box-shadow: 0 0 0 5px var(--ground), 0 0 0 11px var(--night-down); }
.night-line .stop-alert .stop-mark { border-color: var(--on-sign); box-shadow: 0 0 0 5px var(--ground), 0 0 0 11px var(--on-sign); }
.night-line .stop-closed .stop-mark { border-color: var(--night-steady); background: var(--night-steady); }
.night-line .stop-time, .night-line .stop-text { color: var(--on-sign-2); }
.night-line .stop-title { color: var(--on-sign); font-size: var(--t-md); }
.night-line .stop-down .stop-title { color: var(--night-down); }
/* "you are here" keeps the system's form (the lamp dot on a navy label), outlined so it reads on the glass: the screen's one lamp control is the check button */
.night-line .here { background: var(--sign); color: var(--on-sign); box-shadow: inset 0 0 0 1px var(--on-sign-2); }
/* The lamps come on once the page has loaded (site.js marks the hero .is-lit on the load event), with full motion only; until then the
   beams are dark and the two lamps glow. With reduced motion, motion Off or Calm, with scripting turned off, or in a browser that
   cannot answer the `scripting` query, the beams are a still picture from the first paint. If the page's script fails to load, the
   beams stay dark: they are decoration, and the card and its text never depend on them. */

/* the result of the free check under the landing's hero (filled by site/js/scan.js) */
.scan-home:not([hidden]) { padding-block: var(--s-7) var(--s-8); background: var(--paper-2); }
.scan-home > .sc-wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ==== the four states of a site: the key the whole site reads with ==== */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); list-style: none; margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--rule); }
.legend li { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--w-strong); }
.legend .glyph { width: 16px; height: 16px; }
.legend .steady { color: var(--steady); }
.legend .regional_issue { color: var(--regional); }
.legend .down { color: var(--down); }
.legend .data_unavailable { color: var(--unknown); }
.legend-note { font-weight: var(--w-text); color: var(--ink-2); font-size: var(--t-sm); }

/* ==== what it is: the plain answer, set large ==== */
.about-band .about-answer { max-width: 38em; font-size: clamp(1.25rem, 2.1vw, 1.625rem); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.about-band h2 { margin-bottom: var(--s-5); font-size: var(--t-2xl); letter-spacing: -0.02em; }

/* ==== the rule: one region against two, on two tracks ==== */
.rule-demo { margin: 0; background: var(--paper); padding: var(--s-6); }
.rule-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.rule-switch { display: inline-flex; align-items: center; gap: var(--s-3); }
.switch .opt { font-weight: var(--w-label); color: var(--ink-2); }
.rule-tracks { display: grid; gap: 8px; }
.rule-row { display: grid; grid-template-columns: 92px repeat(30, minmax(0, 1fr)); gap: 3px; align-items: center; }
.rule-row .lab { font-size: var(--t-sm); font-weight: var(--w-strong); }
.rule-row i { display: block; height: 22px; background: var(--steady); }
.rule-row i.fail { background: var(--down); }
.rule-row i.agree { box-shadow: inset 0 0 0 3px var(--ink); }
.rule-row.alerts i { height: 28px; background: none; display: flex; align-items: center; justify-content: center; overflow: visible; }
.rule-row.alerts .bell { flex: none; max-width: none; width: 22px; height: 22px; color: var(--ink); transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-move) var(--ease-standard); }
.rule-row.alerts .bell.false { color: var(--regional); }
.rule-row.alerts .bell.gone { opacity: 0; transform: translateY(var(--move-md)); }
.rule-readout { margin-top: var(--s-5); font-size: var(--t-xl); font-weight: var(--w-strong); line-height: 1.25; }
.rule-key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); color: var(--ink-2); font-size: var(--t-sm); }
.rule-key span { display: inline-flex; align-items: center; gap: 8px; }
.rule-key i { width: 14px; height: 14px; display: inline-block; }
.rule-key .k-ok { background: var(--steady); }
.rule-key .k-fail { background: var(--down); }
.rule-key .k-agree { box-shadow: inset 0 0 0 3px var(--ink); background: var(--down); }
.rule-key .k-bell { width: 16px; height: 16px; color: var(--ink); }
.rule-key .k-bell.false { color: var(--regional); }

/* ==== what it watches: rows, not cards ==== */
.watch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-7); border-top: var(--rule-heavy) solid var(--ink); }
.watch li { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s-4); align-items: start; padding: var(--s-5) 0 var(--s-4);
  border-bottom: 1px solid var(--rule); list-style: none; font-size: var(--t-lg); line-height: 1.35; }
.watch .icon { width: 28px; height: 28px; margin-top: 1px; }
.cover-state { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px 0; background: var(--steady-bg); color: var(--steady);
  font-size: var(--t-xs); font-weight: var(--w-strong); }
.not-yet, .watch-gaps { margin-top: var(--s-5); color: var(--ink-2); max-width: 35em; }
.contrast { font-size: var(--t-lg); }
.contrast-plain { color: var(--ink-2); }

/* ==== the product: the real screens on demo data, framed as one panel, swung into place as it arrives ==== */
.product-stage { perspective: 1600px; overflow-x: clip; }
.screen { background: var(--paper-2); box-shadow: var(--lift); transform-origin: 50% 0; }
.screen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); min-height: 52px; padding: 0 var(--s-4); background: var(--sign); color: var(--on-sign); }
.screen-bar .tabs { flex: 1; min-width: 0; box-shadow: none; }
.screen-bar .tab { color: var(--on-sign-2); min-height: 52px; }
.screen-bar .tab:hover, .screen-bar .tab[aria-selected="true"] { color: var(--on-sign); }
.screen-bar .tab-ink { background: var(--lamp); }
.screen-bar .tag { color: var(--on-sign-2); }
.screen-body { padding: var(--s-5); min-height: 440px; }
.screen-body > .tabpanel > * + * { margin-top: var(--s-4); }
.shot-caption, .screen-caption { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--t-sm); max-width: var(--measure); }
.screen-caption b { color: var(--ink); }
/* the same screen standing alone on a marketing page, under the page's opening */
.screen-fig { margin: 0; }
.screen-fig .screen-body { min-height: 0; }
.screen-title { font-weight: var(--w-strong); }
.panel-head .panel-title { font-size: var(--t-lg); font-weight: var(--w-strong); }   /* a panel's name in a standalone fragment, not a heading */
.mk-sec.shot-band { padding-top: 0; }
/* fragments of the app on the site: rows of a board, an incident line, the parts of a report, a status page */
.screen-body .panel + .panel { margin-top: var(--s-4); }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; gap: var(--s-4); align-items: center; padding: 10px 18px; box-shadow: inset 0 -1px 0 var(--rule); }
.svc-row:last-child { box-shadow: none; }
.svc-row .host { font-weight: var(--w-strong); color: var(--ink); overflow-wrap: anywhere; }
.svc-row .note { text-align: right; }
.svc-row .act { justify-self: end; }
.linkish { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; font: inherit; font-weight: var(--w-label);
  color: var(--link); text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
.linkish:hover { text-decoration-thickness: 2px; }
.inc-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--t-lg); }
.evidence { list-style: none; display: grid; gap: 2px; }
.evidence li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: var(--s-4); padding: 14px 16px 12px; background: var(--paper); }
.evidence time { font-weight: var(--w-strong); }
.evidence .who { color: var(--ink-2); font-size: var(--t-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.chips li { padding: 4px 10px 2px; background: var(--paper); font-size: var(--t-sm); font-weight: var(--w-label); }
.chips-label { font-weight: var(--w-strong); font-size: var(--t-sm); }
.perks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; color: var(--ink-2); font-size: var(--t-sm); font-weight: var(--w-label); }
.perks li { display: inline-flex; align-items: center; gap: 8px; }
.perks .icon { width: 18px; height: 18px; color: var(--ink); }
.report-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-5); align-items: start; }
.sheet { padding: var(--s-5); background: var(--paper); box-shadow: inset 0 var(--rule-heavy) 0 var(--ink); }
.sheet-title { font-size: var(--t-xl); font-weight: var(--w-display); letter-spacing: -0.01em; }
.sheet-sub { color: var(--ink-2); }
.sheet-parts { margin-top: var(--s-4); padding-left: 1.4em; display: grid; gap: 6px; font-weight: var(--w-label); }
.sheet-parts li::marker { color: var(--ink-3); }
.report-side p { color: var(--ink-2); }
.badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); list-style: none; }
.badges li { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px 1px; font-size: var(--t-sm); font-weight: var(--w-label); }
.b-built { background: var(--steady-bg); color: var(--steady); }
.b-planned { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--edge); }
.statuspage { padding: var(--s-5); background: var(--paper); }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-lg); margin-bottom: var(--s-4); }
.sp-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--rule); }
.sp-row > span:first-child { font-weight: var(--w-label); }
.bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 1px; height: 26px; }
.bars i { display: block; background: var(--steady); }
.bars i.bad { background: var(--down); }
.bars i.none { background: repeating-linear-gradient(135deg, var(--unknown) 0 2px, transparent 2px 4px); }
.sp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: var(--s-3); font-size: var(--t-xs); color: var(--ink-2); }
.sw { display: inline-block; width: 12px; height: 12px; margin-right: -8px; vertical-align: -1px; }
.sw-ok { background: var(--steady); }
.sw-bad { background: var(--down); }
.sw-none { background: repeating-linear-gradient(135deg, var(--unknown) 0 2px, transparent 2px 4px); }
.report-parts { columns: 2; column-gap: var(--s-7); margin: 0 0 var(--s-5); padding-left: 1.4em; font-size: var(--t-lg); line-height: 1.9; font-weight: var(--w-label); }

/* "What happens after you sign up" (CONV workstream, 2026-10-28; in v2 by SITE-V2; a tight pinned story by WOW, 2026-11-02) ------------
   Four moments of the first minutes, each with the REAL component of the app (the same modules the app mounts, with labelled demo data).
   The steps are stops on the page line. THE LAYOUT IS DECIDED HERE, never by a script: two layouts, chosen by the window and the Motion
   setting alone, so that drawing the screens (after-signup-scenes.js, when the band nears the viewport) changes no height and an in-page
   link to a section below the band (Pricing) lands where it should.
     - plain (a phone, a narrow window, Calm or Off motion): each step has its compact screen under or beside it (cropped to its top, its
       controls inert);
     - story (a window of 60rem or more with Full motion): one window sticks while the four steps pass, about half a screen each; the step
       in the middle is lit and its screen shows; the marks under the window count it. A gesture settles on the next step (site js).
   Only transform and opacity move; every screen is full without any motion; nothing here is needed to read the page. */
.after .section-head { max-width: 44em; }
.after-story { display: grid; gap: var(--s-7); }
.after-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 64px; display: grid; gap: var(--s-7); }
.after-steps::before { content: ""; position: absolute; left: 22px; top: 14px; bottom: 14px; width: var(--line-w-sm); background: var(--ink); }
.after-step { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.after-step > h3 { position: relative; font-size: var(--t-xl); }
.after-step > h3::before { content: ""; position: absolute; left: -54px; top: -2px; width: 26px; height: 26px; border: 6px solid var(--ink); border-radius: var(--r-round);
  background: var(--paper); transition: transform var(--dur-move) var(--ease-standard); }
.after-step:last-child > h3::before { border-color: var(--steady); background: var(--steady); }
.after-step.is-passed > h3::before { background: var(--ink); }
.after-step.is-active > h3::before { background: var(--lamp); border-color: var(--sign); box-shadow: 0 0 0 6px rgba(245, 196, 81, 0.3), 0 0 26px 6px rgba(245, 196, 81, 0.42);
  transform: scale(1.12); }
.after-step > p { max-width: 34em; color: var(--ink-2); }
/* a compact screen: the top of the card, where its meaning is, fading out at the foot; its controls are illustrations here */
.after-shot { min-width: 0; max-height: 24rem; overflow: hidden; padding: var(--s-4); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule);
  border-radius: var(--r-3); -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.after-shot :is(a, button) { pointer-events: none; cursor: default; }
/* until the screens are drawn the box keeps the room they will take (with a script; without one there is nothing to draw and no box). A screen
   is cropped at 24rem, so the room is the smaller of that and what the real card measured at each range of widths (2026-11-02). */
.after-shot:empty { display: none; }
.js .after-shot:empty { display: block; min-height: var(--room); }
.after-shot[data-scene="welcome"] { --room: 24rem; }
.after-shot[data-scene="plan"] { --room: 24rem; }
.after-shot[data-scene="list"] { --room: 24rem; }
.after-shot[data-scene="moment"] { --room: 24rem; }
@media (min-width: 30rem) {
  .after-shot[data-scene="welcome"] { --room: 24rem; }
  .after-shot[data-scene="plan"] { --room: 24rem; }
  .after-shot[data-scene="list"] { --room: 24rem; }
  .after-shot[data-scene="moment"] { --room: 19.75rem; }
}
@media (min-width: 40rem) {
  .after-shot[data-scene="welcome"] { --room: 24rem; }
  .after-shot[data-scene="plan"] { --room: 24rem; }
  .after-shot[data-scene="list"] { --room: 24rem; }
  .after-shot[data-scene="moment"] { --room: 19.5rem; }
}
@media (min-width: 56rem) {   /* beside its caption a screen has more room: cropped at 30rem */
  .after-shot { max-height: 30rem; }
  .after-shot[data-scene="welcome"] { --room: 28.5rem; }
  .after-shot[data-scene="plan"] { --room: 30rem; }
  .after-shot[data-scene="list"] { --room: 30rem; }
  .after-shot[data-scene="moment"] { --room: 25rem; }
}
@media (min-width: 80rem) {
  .after-shot[data-scene="welcome"] { --room: 26rem; }
  .after-shot[data-scene="plan"] { --room: 30rem; }
  .after-shot[data-scene="list"] { --room: 30rem; }
  .after-shot[data-scene="moment"] { --room: 19.5rem; }
}
.after-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-7); }
.after-cta .fine { margin-top: 0; font-size: var(--t-sm); color: var(--ink-2); }
.after-stage { display: none; position: sticky; top: calc(var(--bar-h) + var(--s-6)); margin: 0; }
@media (min-width: 56rem) {   /* plain, wide: the caption centred beside its screen */
  .after-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--s-7); }
  .after-step > h3 { grid-column: 1; grid-row: 2; }
  .after-step > p { grid-column: 1; grid-row: 3; }
  .after-step > .after-shot { grid-column: 2; grid-row: 1 / span 4; }
}
@media (min-width: 60rem) {   /* story: one sticky window, the steps pass beside it, about half a screen each (only with Full motion) */
  :root[data-motion="full"] .after-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-7); align-items: start; }
  :root[data-motion="full"] .after-steps { gap: 0; }
  :root[data-motion="full"] .after-step {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: center; min-height: 52vh;
    padding-block: var(--s-5); opacity: 0.86; transition: opacity var(--dur-state) var(--ease-standard);
  }
  :root[data-motion="full"] .after-step.is-active { opacity: 1; }
  :root[data-motion="full"] .after-step > h3 { grid-column: 1; grid-row: auto; font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); line-height: 1.15; }
  :root[data-motion="full"] .after-step > p { grid-column: 1; grid-row: auto; font-size: var(--t-lg); line-height: 1.55; }
  :root[data-motion="full"] .after-step > .after-shot { display: none; }
  :root[data-motion="full"] .after-stage { display: block; }
}
.after-device { overflow: hidden; border-radius: var(--r-4); background: var(--canvas); box-shadow: var(--e-2), 0 40px 80px -40px rgba(8, 25, 37, 0.45); }
.after-device .device-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: 4px var(--s-4) 2px;
  background: var(--sign); color: var(--on-sign-2); }
.after-device .device-dots { display: none; }
.after-device .demo-tag { background: var(--sign-2); color: var(--on-sign-2); }
.after-bar-title { font-size: var(--t-sm); font-weight: var(--w-label); color: var(--on-sign); }
/* the window: one height for the four screens, so nothing jumps; a short card sits in its middle, a long one shows its top and fades out */
.after-screen { position: relative; display: grid; height: min(34rem, calc(100vh - var(--bar-h) - 11rem)); padding: var(--s-5); background: var(--canvas); }
.after-screen > .after-panel { grid-area: 1 / 1; min-width: 0; min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(var(--move-md));
  transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard); }
.after-screen > .after-panel.is-here { opacity: 1; visibility: visible; transform: none; }   /* without GSAP the script only moves this class; with it, GSAP sets its own values */
.after-screen > .after-panel:is([data-scene="welcome"], [data-scene="moment"]) { align-self: safe center; }   /* in the middle, never over the bar */
.after-screen > .after-panel:is([data-scene="plan"], [data-scene="list"]) { align-self: start;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent); mask-image: linear-gradient(180deg, #000 84%, transparent); }
/* the controls on the screen: those that do something in the story look and act like controls; the rest look as inert as they are */
.after-screen .is-inert { pointer-events: none; cursor: default; }
.after-screen .btn.is-inert { opacity: 0.45; }   /* a control of the app that does nothing here says so by its look (it is hidden from assistive technology) */
.after-screen .is-live { cursor: pointer; }
/* the marks under the window: one per step, lit up to the step that is here, and its count */
.after-marks { display: flex; align-items: center; gap: 6px; margin-top: var(--s-3); }
.after-marks i { width: 28px; height: 4px; border-radius: var(--r-pill); background: var(--paper-3); }
.after-marks i.is-on { background: var(--ink); }
.after-count { margin-left: var(--s-2); font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .after-shot { padding: var(--s-3); } }
@media (max-width: 35rem) {   /* a phone: the line moves closer to the edge, so the app screens get the width they need */
  .after-steps { padding-left: 44px; }
  .after-steps::before { left: 13px; }
  .after-step > h3::before { left: -42px; width: 24px; height: 24px; border-width: 5px; }
  .after-shot .btn { white-space: normal; text-align: left; }   /* a long button label wraps inside the illustration */
}

/* yearly saving on the landing cards and the rest of the landing's plates follow under "plans" below */

/* ==== the problem, in two words ==== */
.problem h2 { max-width: 22ch; }
.costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-7); margin-top: var(--s-7); border-top: var(--rule-heavy) solid var(--ink); }
.costs > div { padding-top: var(--s-4); }
.costs dt { font-size: var(--t-sm); font-weight: var(--w-strong); color: var(--ink-2); }
.costs dd { margin: 4px 0 0; font-size: var(--t-3xl); font-weight: var(--w-display); line-height: 1.04; letter-spacing: var(--track-head); }

/* ==== who it is for: three reasons as columns of text ==== */
.reasons, .why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); border-top: var(--rule-heavy) solid var(--ink); padding-top: var(--s-5); }
.reasons h3, .why-grid h3 { margin-bottom: var(--s-3); }
.reasons p, .why-grid p { color: var(--ink-2); }
.compare-links, .why-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin-top: var(--s-7); font-weight: var(--w-label); }
.why-links > span { color: var(--ink-2); font-weight: var(--w-text); }

/* ==== plans: three columns on one plate; the recommended one carries the sign band (the landing and the pricing page) ==== */
.plans, .plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-7); align-items: stretch; }
.plan-cell { display: flex; }
.plan { position: relative; display: flex; flex-direction: column; flex: 1; padding: var(--s-6); background: var(--paper-2); }
.plan.is-rec { background: var(--paper); box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink); }
.band-fog .plan { background: var(--paper); }
.band-fog .plan.is-rec { box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink), var(--lift); }
.plan-flag, .pc-flag { position: absolute; left: 0; right: 0; bottom: 100%; padding: 9px var(--s-6) 7px; background: var(--sign); color: var(--on-sign); font-weight: var(--w-strong);
  font-size: var(--t-sm); }
.plan-flag::before, .pc-flag::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: var(--r-round); background: var(--lamp); }
.plan h3, .pc h3 { font-size: var(--t-2xl); font-weight: var(--w-display); }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s-4); }
.price .amt { font-size: 3.5rem; font-weight: var(--w-display); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price .cur { font-size: var(--t-xl); font-weight: var(--w-strong); }
.price .per { color: var(--ink-2); }
.price-alt { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--t-sm); }
.price-save { margin-top: 4px; color: var(--ink-2); font-size: var(--t-sm); }
.vat { margin-top: 4px; color: var(--ink-3); font-size: var(--t-xs); font-weight: var(--w-strong); }
.vat-ind { color: var(--ink-2); font-weight: var(--w-text); }
.plan .feat { margin: var(--s-5) 0; display: grid; gap: 10px; list-style: none; }
.plan .feat li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.plan .feat .glyph { width: 16px; height: 16px; margin-top: 4px; color: var(--steady); }
.plan .feat .off { color: var(--ink-2); }
.plan .feat .off .glyph { color: var(--ink-3); }
.plan .btn { margin-top: auto; }
.plan .fine, .plan-fine { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--t-sm); }
.plans-note { margin-top: var(--s-5); max-width: var(--measure); }
/* the pricing page: the plans follow its compact head at once, so they start inside the first screen (as before v2) */
.mk-hero.compact + .plans-top { padding-top: 0; }
.plans-top .pc-grid { margin-top: var(--s-6); }   /* room for the recommended flag; its heading is for screen readers only */
.test-label, .draft-note { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
/* the period and who-pays pickers: the system's segmented control (a square ink block slides under the chosen one) */
.bill-pick, .seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; background: var(--paper-2);
  box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink); }
.bill-pick .seg-opt { position: relative; z-index: 1; min-height: var(--control-sm); padding: 2px 18px 0; border: 0; background: none; font: inherit;
  font-weight: var(--w-label); color: var(--ink); cursor: pointer; white-space: nowrap; }
.bill-pick .seg-opt[aria-checked="true"] { color: var(--paper); }
.bill-pick .seg-ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--seg-n, 2)); background: var(--ink);
  transform: translateX(calc(100% * var(--seg-i, 0))); transition: transform var(--dur-move) var(--ease-standard); }
.band-fog .bill-pick { background: var(--paper); }
.bill-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
/* how the trial works: four short stops */
.trial { margin-top: var(--s-8); }
.trial h3 { font-size: var(--t-xl); }
.trial-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); list-style: none; border-top: var(--rule-heavy) solid var(--ink); }
.trial-steps li { display: grid; gap: var(--s-2); padding-top: var(--s-4); font-weight: var(--w-label); }
.trial-steps .icon { width: 24px; height: 24px; }

/* ==== where it stands: two plain lists ==== */
.ledger { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-7); }
.ledger h3 { display: flex; align-items: center; gap: 10px; padding-bottom: var(--s-3); border-bottom: var(--rule-heavy) solid var(--ink); font-size: var(--t-lg); }
.ledger .glyph { width: 16px; height: 16px; }
.ledger ul { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); list-style: none; }
.ledger li { padding: 6px 12px 4px; background: var(--paper); font-weight: var(--w-label); }
.ledger .b-planned { background: transparent; }
.stands .note { margin-top: var(--s-5); }

/* ==== questions: open answers, no accordion (the answers are what people came for) ==== */
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-7); border-top: var(--rule-heavy) solid var(--ink); }
.faq-item { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.faq-q { font-size: var(--t-lg); font-weight: var(--w-strong); letter-spacing: 0; }
.faq-a { margin-top: var(--s-2); color: var(--ink-2); }
.faq-one { grid-template-columns: minmax(0, 1fr); }

/* ==== the close: the sign field, the beams at rest on the lamp (light recipe 2), never under the words ==== */
.closing { position: relative; overflow: clip; }
.closing h2 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 1; max-width: 15ch; position: relative; z-index: 1; }
.closing .wrap { position: relative; z-index: 1; }
.closing .wrap > * { max-width: 58%; }
.closing p { margin-top: var(--s-5); font-size: var(--t-lg); color: var(--on-sign-2); }
.closing .hero-cta { margin-top: var(--s-6); }
.closing .hero-cta .fine, .closing .fine { color: var(--on-sign-2); font-size: var(--t-sm); }

/* ==== the footer: the name returns at full width ==== */
.foot { background: var(--sign); color: var(--on-sign); padding-block: var(--s-8) var(--s-6); }
/* above 480 px the floating Ask Beam launcher (44 px, 16 px from the edge) rests in the footer's last band, never on its notes;
   at 480 px and below beam.css's `.beam-reserve` keeps that room */
@media (min-width: 481px) { .foot { padding-bottom: calc(var(--control-h) + 2 * var(--s-4)); } }
.foot-top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: var(--s-6); }
.foot .wordmark { font-size: 2rem; gap: 14px; }
.foot-tag { margin-top: var(--s-3); color: var(--on-sign-2); max-width: 15em; }
.foot h2 { font-size: var(--t-sm); font-weight: var(--w-strong); letter-spacing: 0; color: var(--on-sign-2); margin-bottom: var(--s-2); }
.foot ul { list-style: none; }
.foot li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--on-sign); text-decoration: none; }
.foot li a:hover { text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-8); padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 var(--sign-3); color: var(--on-sign-2); font-size: var(--t-sm); }

/* ==== the marketing pages: the page sources' `mk-*` vocabulary =================================================================
   A page opens on white: the trail, the one display line, the answer, the next step, its date; beside it the product's own fragment
   as a floating panel. Sections follow one rhythm (white, fog); a section of features or steps is a line with stops; the page closes
   on the sign field, the beams at rest on its lamp. */
.mk-hero { padding-block: clamp(var(--s-6), 5vw, var(--s-8)) clamp(var(--s-8), 7vw, var(--s-9)); background: var(--paper); }
.mk-hero-in { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7) var(--s-8); align-items: center; }
.mk-hero.solo .mk-hero-in { grid-template-columns: minmax(0, 1fr); }
.mk-hero.solo .mk-hero-in > div { max-width: 52rem; }
.mk-hero h1 { margin-top: var(--s-4); font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 0.98; letter-spacing: -0.032em; max-width: 15ch; }
.mk-hero.solo h1 { max-width: 20ch; }
.mk-hero.compact { padding-block: clamp(var(--s-5), 4vw, var(--s-7)) clamp(var(--s-6), 4vw, var(--s-7)); }
.mk-hero.compact h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); }
.mk-hero .lede { margin-top: var(--s-5); max-width: 32em; color: var(--ink); }
.mk-hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.mk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.mk-crumbs a { color: var(--ink-2); }
.mk-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: var(--s-3); margin-right: var(--s-4);
  font-size: var(--t-sm); color: var(--ink-2); }
.mk-updated { display: inline-block; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.mk-pill b { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px 0; background: var(--test-bg); color: var(--test); font-size: var(--t-xs);
  font-weight: var(--w-strong); }
.mk-hero .demo-label { margin-top: var(--s-3); }
.demo-label strong { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px 1px; background: var(--paper-3); color: var(--ink); font-size: var(--t-sm); }
.mk-sec { padding-block: clamp(var(--s-8), 8vw, var(--s-9)); }
.mk-sec.surface { background: var(--paper-2); --ground: var(--paper-2); }
/* two sections on the same ground in a row read as one: the second does not add its own top space */
.mk-sec:not(.surface) + .mk-sec:not(.surface), .mk-sec.surface + .mk-sec.surface { padding-top: 0; }
.mk-in { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.mk-head { max-width: 36em; margin-bottom: var(--s-7); }
.mk-head h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); max-width: 20ch; }
.mk-head p { margin-top: var(--s-4); font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); }
.mk-head .mk-answer { color: var(--ink); }
.mk-also { margin-top: var(--s-9); }
.mk-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: var(--s-2); font-weight: var(--w-label); }
.mk-link::after { content: "\2192"; display: inline-block; transition: transform var(--dur-move) var(--ease-standard); }
@media (hover: hover) { .mk-link:hover::after { transform: translateX(var(--move-sm)); } }
.mk-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.mk-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px 0; background: var(--steady-bg); color: var(--steady);
  font-size: var(--t-xs); font-weight: var(--w-strong); }
.mk-note { padding: var(--s-4) var(--s-5) var(--s-3); background: var(--paper); box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink); max-width: calc(var(--measure) + 2 * var(--s-5)); }   /* the measure plus its padding */
/* the status page sample: the real page (v2/status.css, scoped to .status-page) in a hairline frame */
.sample-frame { box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.sample-frame .sp { margin: 0 auto; }
.mk-sec .mk-note { margin-top: var(--s-6); }
.mk-hero .mk-note { margin-top: var(--s-4); }
/* the features of a page as a route: one line, a stop at each feature (the `flip` of the old alternating rows is not needed) */
.mk-row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-5) var(--s-8); align-items: start;
  padding: var(--s-6) 0 var(--s-8) 72px; }
.mk-row::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: var(--line-w-sm); background: var(--ink); }
.mk-row::after { content: ""; position: absolute; left: 14px; top: calc(var(--s-6) + 2px); width: 30px; height: 30px; border: 6px solid var(--ink);
  border-radius: var(--r-round); background: var(--ground, var(--paper)); }
.mk-row:first-of-type::before, .mk-head + .mk-row::before { top: calc(var(--s-6) + 16px); }
.mk-row:has(+ :not(.mk-row))::before, .mk-row:last-child::before { bottom: auto; height: calc(var(--s-6) + 16px); }
.mk-head + .mk-row:has(+ :not(.mk-row))::before, .mk-head + .mk-row:last-child::before { display: none; }
.mk-text h2 { margin-top: var(--s-3); font-size: var(--t-2xl); letter-spacing: -0.02em; max-width: 18ch; }
.mk-text p { margin-top: var(--s-3); color: var(--ink-2); max-width: 32em; }
.mk-text p b { color: var(--ink); }
/* steps: a line with numbered stops */
.mk-steps { counter-reset: mk-step; position: relative; display: grid; gap: var(--s-6); max-width: 48em; list-style: none; padding-left: 76px; }
.mk-steps::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 20px; width: var(--line-w-sm); background: var(--ink); }
.mk-steps li { position: relative; counter-increment: mk-step; }
.mk-steps li::before { content: counter(mk-step); position: absolute; left: -76px; top: -6px; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border: 6px solid var(--ink); border-radius: var(--r-round); background: var(--ground, var(--paper)); font-weight: var(--w-display);
  font-size: var(--t-lg); line-height: 1; padding-top: 3px; }
.mk-steps h3 { font-size: var(--t-xl); }
.mk-steps p { margin-top: var(--s-2); color: var(--ink-2); max-width: 36em; }
.mk-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); border-top: var(--rule-heavy) solid var(--ink); padding-top: var(--s-5); }
.mk-split.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-split h3 { margin-bottom: var(--s-3); font-size: var(--t-xl); }
.mk-split p { color: var(--ink-2); }
.mk-split + .mk-prose { margin-top: var(--s-6); }
.mk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-7); border-top: var(--rule-heavy) solid var(--ink); }
.mk-facts > div { padding: var(--s-5) 0 var(--s-4); border-bottom: 1px solid var(--rule); }
.mk-facts dt { font-size: var(--t-lg); font-weight: var(--w-strong); line-height: 1.3; }
.mk-facts dd { margin: 6px 0 0; color: var(--ink-2); }
.mk-prose { max-width: var(--measure); }
.mk-prose > * + * { margin-top: var(--s-4); }
.mk-prose ul, ul.mk-prose { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.mk-prose li::marker { color: var(--ink-3); }
.mk-in.mk-prose { max-width: min(var(--wrap), 100% - 2 * var(--gutter)); }
.mk-in.mk-prose > :not(.mk-head) { max-width: var(--measure); }
/* "At a glance" beside the about page's opening */
.glance { background: var(--paper); box-shadow: var(--lift); }
.glance h2 { display: flex; align-items: center; min-height: 52px; padding: 2px var(--s-5) 0; background: var(--sign); color: var(--on-sign); font-size: var(--t-md);
  font-weight: var(--w-strong); letter-spacing: 0; }
.glance dl { padding: var(--s-2) var(--s-5) var(--s-4); }
.glance dl > div { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.glance dl > div:last-child { border-bottom: 0; }
.glance dt { font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); }
.glance dd { margin: 2px 0 0; font-weight: var(--w-label); }
/* the closing band of a marketing page: the sign field, the two beams of the mark at rest on the right, the words on the left */
.mk-cta { position: relative; padding-block: clamp(var(--s-8), 8vw, var(--s-10)); background: var(--sign) url("/static/shared/img/v2/beams-rest.svg") no-repeat;
  background-position: right max(var(--gutter), calc((100% - var(--wrap)) / 2)) center; background-size: auto 88%; color: var(--on-sign); }
.mk-cta-in { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.mk-cta-in > * { max-width: min(58%, 40rem); }
.mk-cta h2 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1; max-width: 16ch; }
.mk-cta p { margin-top: var(--s-4); font-size: var(--t-lg); color: var(--on-sign-2); }
.mk-cta .cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.on-sign .btn-line { background: transparent; color: var(--on-sign); box-shadow: inset 0 0 0 var(--rule-heavy) var(--on-sign-2); }

/* ==== a product fragment beside an explanation: the vignette, a panel of the app with its sign head ==== */
.vig { margin: 0; background: var(--paper); }
.mk-hero .vig, .mk-row .vig { box-shadow: var(--lift); }
.mk-sec.surface .mk-row .vig { box-shadow: none; }
.vig-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s-3); min-height: 48px; padding: 6px var(--s-4) 4px;
  background: var(--sign); color: var(--on-sign); }
.vig-title { font-weight: var(--w-strong); }
.demo-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px 0; background: var(--paper-3); color: var(--ink-2); font-size: var(--t-xs);
  font-weight: var(--w-strong); }
.vig-top .demo-tag, .on-sign .demo-tag { background: var(--sign-2); color: var(--on-sign-2); }
.vig ul { list-style: none; }
.vig li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: 12px var(--s-4) 10px;
  box-shadow: inset 0 -1px 0 var(--rule); }
.vig li > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.vig .g { display: inline-flex; }
.vig .g svg { width: 16px; height: 16px; }
.t-ok { color: var(--steady); }
.t-warn { color: var(--regional); }
.t-bad { color: var(--down); }
.t-none { color: var(--unknown); }
.t-plan { color: var(--planned); }
.vig .v { font-size: var(--t-sm); font-weight: var(--w-strong); color: var(--ink-2); text-align: right; white-space: nowrap; }
.vig li.has-meter { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "g t v" ". m m"; row-gap: 8px; }
.vig li.has-meter > .g { grid-area: g; }
.vig li.has-meter > span:nth-child(2) { grid-area: t; }
.vig li.has-meter > .v { grid-area: v; }
.vig .meter { grid-area: m; display: block; height: 6px; background: var(--paper-3); overflow: hidden; }
.vig .meter i { display: block; height: 100%; background: currentColor; transform-origin: left; color: var(--ink); }
.vig .meter .f-10 { transform: scaleX(0.1); }
.vig .meter .f-20 { transform: scaleX(0.2); }
.vig .meter .f-80 { transform: scaleX(0.8); }
.vig .meter .f-100 { transform: none; }
.vig-foot { padding: 12px var(--s-4) 10px; background: var(--paper-2); color: var(--ink-2); font-size: var(--t-sm); }
.mk-sec.surface .vig-foot { background: var(--paper-3); }

/* ==== the pricing page: who pays, the three plans, the fare line of "which plan fits", every limit ==== */
.who-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.who-label { font-weight: var(--w-label); }
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-7); align-items: stretch; }
.pc { position: relative; display: flex; flex-direction: column; padding: var(--s-6); background: var(--paper); }
.pc-rec { box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink), var(--lift); }
.pc-who + .pc-who { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.pc-grid[data-who] .pc-who:not([hidden]) { animation: lx-fade var(--dur-state) var(--ease-standard) both; }
.pc-for { margin-top: var(--s-4); font-size: var(--t-sm); font-weight: var(--w-label); color: var(--ink-2); }
.pc-price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s-2); color: var(--ink-2); }
.pc-price > span:first-child { font-size: var(--t-xl); font-weight: var(--w-strong); color: var(--ink); }
.pc-price b { font-size: 3.25rem; font-weight: var(--w-display); line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-alt { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--t-sm); }
.pc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); margin: var(--s-5) 0 var(--s-6); padding-top: var(--s-4);
  border-top: var(--rule-heavy) solid var(--ink); }
.pc-facts div { display: flex; flex-direction: column; gap: 4px; }
.pc-facts dt { font-size: var(--t-sm); color: var(--ink-2); }
.pc-facts dd { margin: 0; font-size: var(--t-2xl); font-weight: var(--w-display); line-height: 1; order: -1; font-variant-numeric: tabular-nums; }
.pc .btn { margin-top: auto; }
/* the two price sets of a card (a business, an individual) share one place once the script can switch them, so the switch moves nothing
   (CLS 0 on /pricing): the card is as tall as the taller set from the first paint, and the one not chosen keeps its room unseen.
   Without scripting both sets stand one under the other, each labelled. */
.pc-whos { display: grid; }
@media (scripting: enabled) {
  .pc-whos > .pc-who { grid-area: 1 / 1; }
  .pc-whos > .pc-who + .pc-who { margin-top: 0; padding-top: 0; border-top: 0; }
  .pc-whos > .pc-who[hidden] { display: block !important; visibility: hidden; }
  .pc-grid:not([data-who]) .pc-who[data-who="individual"] { visibility: hidden; }
  .who-row[hidden] { display: flex !important; visibility: hidden; }   /* its room is kept while who-pick.js loads */
  .bill-pick[hidden] { display: inline-grid !important; visibility: hidden; }
}
.pc-note { margin-top: var(--s-5); max-width: var(--measure); color: var(--ink-2); font-size: var(--t-sm); }
.pc-note b { color: var(--ink); }
/* which plan fits: a fare line, the stops are the ranges of client sites */
.which { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.which li { position: relative; padding: 52px var(--s-5) 0 0; }
.which li::before { content: ""; position: absolute; left: 15px; right: 0; top: 12px; height: var(--line-w); background: var(--ink); }
.which li::after { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 34px; border: 6px solid var(--ink); border-radius: var(--r-round);
  background: var(--ground, var(--paper)); }
.which li:last-child::before { display: none; }
.which .wh-more::after { border-style: dashed; }
.which span { display: block; }
.wh-range { font-weight: var(--w-strong); color: var(--ink-2); font-size: var(--t-sm); }
.wh-plan { margin-top: var(--s-2); font-size: var(--t-lg); }
.wh-plan b { font-weight: var(--w-display); }
.wh-facts { margin-top: 4px; color: var(--ink-2); max-width: 18em; }
.vs-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: var(--t-md); line-height: var(--lh-body); }
.vs-table caption { text-align: left; padding-bottom: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.vs-table th, .vs-table td { text-align: left; vertical-align: top; padding: 12px 12px 10px; border-bottom: 1px solid var(--rule); }
.vs-table thead th { vertical-align: bottom; border-bottom: var(--rule-heavy) solid var(--ink); font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); }
.vs-table tbody th { font-weight: var(--w-strong); color: var(--ink); }
.plans-table thead th { font-size: var(--t-md); color: var(--ink); }
.plans-table th[scope="col"] { width: 22%; }
.plans-table tbody tr:hover th, .plans-table tbody tr:hover td { background: var(--paper-2); }

/* ==== reading pages: guides, glossary, alternatives, comparisons, the API, legal drafts ====================================
   A document: the trail, the head (the one heading, who and when, the answer), then three columns: the contents as a line, the
   column, an aside. Under 1120 px the aside goes; under 960 px everything is one column. */
.doc-page { padding-bottom: var(--s-9); }
.doc-page > .wrap > .crumbs, .doc-page .crumbs { padding-top: var(--s-6); }
.doc-head { padding-block: var(--s-5) var(--s-7); max-width: 54rem; }
.doc-head h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; max-width: 22ch; }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); color: var(--ink-2); font-size: var(--t-sm); }
.byline, .page-updated, .legal-version { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--t-sm); }   /* sentences with dates in them: inline */
.doc-answer, .vs-answer { margin-top: var(--s-5); max-width: 33em; font-size: var(--t-lg); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.vs-note, .draft-banner { display: block; margin-top: var(--s-5); max-width: calc(var(--measure) + 2 * var(--s-5)); padding: var(--s-4) var(--s-5) var(--s-3); background: var(--paper-2); font-size: var(--t-sm);
  color: var(--ink); }
.vs-note .badge-test { margin-right: 6px; }
.draft-banner { background: var(--test-bg); color: var(--ink); }
.draft-banner strong { color: var(--test); }
.doc-head > .fine[role="note"] { margin-top: var(--s-4); max-width: var(--measure); }
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr) 248px; gap: var(--s-8); align-items: start; border-top: var(--rule-heavy) solid var(--ink); padding-top: var(--s-6); }
.doc.doc-plain { grid-template-columns: minmax(0, 1fr) 248px; }
.doc.doc-wide { grid-template-columns: 240px minmax(0, 1fr); }   /* contents and a wide column: comparisons, the API, the legal drafts */
.doc-aside { position: sticky; top: calc(var(--bar-h) + var(--s-5)); }
/* the table of contents is a line: each section a stop, the one you are reading lit */
.toc { position: relative; }
.toc h2, .toc .toc-head { font-size: var(--t-sm); font-weight: var(--w-strong); letter-spacing: 0; margin-bottom: var(--s-3); }
.toc ol { position: relative; list-style: none; padding-left: 26px; }
.toc ol::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: var(--line-w-sm); background: var(--paper-3); }
.toc li { position: relative; }
.toc li::before { content: ""; position: absolute; left: -24px; top: 12px; width: 14px; height: 14px; border: 3px solid var(--edge); border-radius: var(--r-round);
  background: var(--paper); }
.toc a { display: block; padding: 6px 0 5px; color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); line-height: 1.35; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.toc li.is-here::before { border-color: var(--ink); background: var(--ink); }
.toc li.is-here a { color: var(--ink); font-weight: var(--w-strong); }
.toc li.is-passed::before { border-color: var(--ink); }
.toc-line { position: relative; }
.toc-progress { position: absolute; left: 7px; top: 10px; width: var(--line-w-sm); height: calc(100% - 20px); background: var(--ink); transform-origin: top;
  transform: scaleY(var(--read, 0)); transition: transform var(--dur-move) var(--ease-standard); }
/* the glossary's letters: a row of stops */
.toc.az ol { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; }
.toc.az ol::before, .toc.az li::before { display: none; }
.toc.az a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 2px 0 0; font-size: var(--t-md);
  font-weight: var(--w-strong); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.toc.az a:hover { background: var(--paper-2); text-decoration: none; }
/* the reading column */
/* the column is as wide as its grid track (a table or a code block may use it); the words keep the reading measure */
.prose { font-size: 1.125rem; line-height: var(--lh-read); min-width: 0; }
.prose :is(p, ul, ol, dl, blockquote, h2, h3, .faq-list, .vs-sources, .sources, .card-list, .callout, .vs-two, section.helps) { max-width: var(--measure); }
.prose .vs-two { max-width: 52rem; }
.prose > * + *, .prose section > * + * { margin-top: var(--s-5); }
.prose section + section { margin-top: var(--s-8); }
.prose h2 { font-size: var(--t-2xl); font-weight: var(--w-display); letter-spacing: -0.02em; scroll-margin-top: calc(var(--bar-h) + var(--s-5)); }
.prose > h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); font-size: var(--t-xl); scroll-margin-top: calc(var(--bar-h) + var(--s-5)); }
.prose h2 + *, .prose h3 + * { margin-top: var(--s-3); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--ink-2); font-weight: var(--w-strong); }
.prose blockquote { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); background: var(--paper-2); font-size: var(--t-lg); }
.prose pre { margin: 0; padding: 18px 20px; max-width: 100%; overflow-x: auto; background: var(--paper-2); font-size: 0.875rem; line-height: 1.6; tab-size: 2; }
.prose pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-md); line-height: var(--lh-body); }
.prose th { text-align: left; vertical-align: bottom; padding: 10px 12px 8px; border-bottom: var(--rule-heavy) solid var(--ink); font-size: var(--t-xs); color: var(--ink-2); }
.prose td, .prose tbody th { padding: 12px 12px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.prose tbody th { font-size: var(--t-md); color: var(--ink); font-weight: var(--w-strong); }
.prose .table-wrap { max-width: 100%; overflow-x: auto; }
.prose table caption { text-align: left; padding-bottom: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.vs-table td.src { font-size: var(--t-sm); }
.vs-list { display: grid; gap: var(--s-2); }
.vs-list.todo { list-style: none; padding-left: 0; }
.vs-list.todo li { position: relative; padding-left: 32px; }
.vs-list.todo li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; box-shadow: inset 0 0 0 var(--rule-heavy) var(--edge); }
.prose .callout, p.callout { padding: var(--s-4) var(--s-5) var(--s-3); background: var(--paper); box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink); font-size: var(--t-md);
  line-height: var(--lh-body); }
/* "How the product helps" (a section of a guide): the product's own paragraph, on the sign field */
.prose section.helps { margin-top: var(--s-8); padding: var(--s-6); background: var(--sign); color: var(--on-sign); }
.prose section.helps h2 { margin-top: 0; font-size: var(--t-xl); }
.prose section.helps p, .prose section.helps li { color: var(--on-sign-2); }
.prose section.helps strong { color: var(--on-sign); }
.prose section.helps a:not(.btn) { color: var(--on-sign); }
.prose section.helps code { background: var(--sign-2); color: var(--on-sign); }
.prose .faq-list { grid-template-columns: minmax(0, 1fr); }
.prose .faq-q { font-size: var(--t-lg); }
.prose .faq-a { font-size: var(--t-md); }
.vs-sources, .sources { display: grid; gap: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.vs-sources li, .sources li, .prose td, .vs-table td { overflow-wrap: anywhere; }   /* a long address breaks instead of widening the page */
.src-host, .sources .url { color: var(--ink-2); font-family: var(--mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
/* lists of pages: rows, not cards */
.card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); list-style: none; padding: 0; border-top: var(--rule-heavy) solid var(--ink); }
.prose .card-list, .doc-aside .card-list { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
.prose .card-list li + li { margin-top: 0; }
.card-list li { display: grid; gap: 4px; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.card-list a { font-weight: var(--w-strong); font-size: var(--t-md); line-height: 1.35; }
.card-list span { color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.vs-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.doc-aside .vs-cta { flex-direction: column; margin-top: 0; padding: var(--s-5); background: var(--paper-2); }
.doc-aside .vs-cta .btn { width: 100%; }
.doc-aside .vs-cta + .fine { margin-top: var(--s-3); }
.fine { color: var(--ink-3); font-size: var(--t-xs); line-height: var(--lh-body); }
.fine, .hint { max-width: var(--measure); }   /* in em: small type keeps about 70 letters a line too */
.prose .fine, .hub-page .fine { font-size: var(--t-sm); color: var(--ink-2); }
/* hubs: a list of every page in the section, grouped */
.hub-page section + section { margin-top: var(--s-8); }
.hub-page h2 { font-size: var(--t-2xl); letter-spacing: -0.02em; margin-bottom: var(--s-4); }
.hub-page .card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-body { display: grid; gap: var(--s-8); }
.hub-body > p { max-width: var(--measure); }
/* comparisons: who each is for, the side-by-side table with a source in every row */
.vs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.vs-two > div { padding: var(--s-5); background: var(--paper-2); }
.vs-two > div:last-child { background: var(--paper); box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink); }
.vs-two h3 { margin: 0 0 var(--s-3); font-size: var(--t-xl); }
.vs-two p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-body); }
.prose.vs-wide .vs-table td[data-label]:nth-child(2) { background: var(--paper-2); }
.prose.vs-wide .vs-table thead th:nth-child(2) { background: var(--sign); color: var(--on-sign); padding-inline: 12px; }
/* the API page: the endpoint table and the code never widen the page on a phone */
.api-doc .prose td:first-child { white-space: nowrap; }   /* the endpoint table scrolls inside its focusable region (.table-wrap) */

/* ==== the 404: the end of the line ==== */
.notfound .terminus { margin-bottom: var(--s-5); }

/* ==== the help centre: the sign band with the search, the topics, the answers with their topic beside them ==== */
.help-hero { padding-block: var(--s-6) var(--s-8); background: var(--sign); color: var(--on-sign); }
.help-hero-in { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.help-hero .crumbs, .help-hero .crumbs a { color: var(--on-sign-2); }
.help-hero .crumbs { padding-top: 0; }
.help-hero h1 { margin-top: var(--s-4); font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 1; color: var(--on-sign); }
.help-hero .vs-answer { color: var(--on-sign-2); max-width: 34em; }
.help-search { margin-top: var(--s-6); max-width: 44rem; }
.help-search label { display: block; margin-bottom: var(--s-2); font-weight: var(--w-label); }
.help-box { position: relative; }
.help-box .search-ico { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.help-box input { width: 100%; min-height: 60px; padding: 0 16px 0 52px; border: 3px solid var(--paper); border-radius: 0; background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--t-lg); }
.help-box input:disabled { background: var(--paper-2); color: var(--ink-2); cursor: wait; }
.help-search .hint { margin-top: var(--s-2); color: var(--on-sign-2); }
.help-popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); list-style: none; }
.help-popular .pop-h { color: var(--on-sign-2); font-size: var(--t-sm); font-weight: var(--w-label); margin-right: 4px; }
.help-popular a { display: inline-flex; align-items: center; min-height: 40px; padding: 2px 12px 0; color: var(--on-sign); text-decoration: none; font-size: var(--t-sm);
  font-weight: var(--w-label); box-shadow: inset 0 0 0 1.5px var(--on-sign-2); }
.help-popular a:hover { background: var(--sign-2); }
.help-body { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: var(--s-8) var(--s-9); }
.help-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s-2); list-style: none; }
.topic { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--s-4); height: 100%;
  padding: var(--s-5); background: var(--paper-2); color: var(--ink); text-decoration: none; transition: transform var(--dur-move) var(--ease-standard); }
.topic:hover { background: var(--paper-3); text-decoration: none; }
@media (hover: hover) { .topic:hover { transform: translateY(calc(-1 * var(--move-xs))); } }
.topic-icon { grid-row: span 3; display: inline-flex; padding-top: 2px; color: var(--ink); }   /* an icon, never in a tinted square (DESIGN-v2.md 9) */
.topic-icon .ico { width: 28px; height: 28px; }
.topic-name { font-weight: var(--w-strong); font-size: var(--t-lg); line-height: 1.25; }
.topic-desc { margin-top: 4px; color: var(--ink-2); font-size: var(--t-sm); }
.topic-count { margin-top: var(--s-3); align-self: end; color: var(--ink-3); font-size: var(--t-xs); font-weight: var(--w-strong); }
.help-group { margin-top: var(--s-8); scroll-margin-top: calc(var(--bar-h) + var(--s-5)); }
.help-group h2 { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); font-size: var(--t-2xl); letter-spacing: -0.02em; }
.ico { width: 24px; height: 24px; flex: none; }
.ico.sm { width: 20px; height: 20px; }
.help-results { margin-top: var(--s-2); }
.help-results .res-group { color: var(--ink-3); font-size: var(--t-xs); font-weight: var(--w-strong); }
.help-results li.is-active { background: var(--paper-2); }
.help-empty { margin-top: var(--s-5); padding: var(--s-5); background: var(--paper-2); }
.help-empty-t { font-weight: var(--w-strong); font-size: var(--t-lg); }
.help-stuck { margin-top: var(--s-8); padding: var(--s-6); background: var(--paper-2); }
.help-stuck h2 { margin: 0; font-size: var(--t-xl); }
.help-stuck p { margin-top: var(--s-2); color: var(--ink-2); }
.help-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
/* an answer: its head, then the answer with its topic beside it */
.help-head { padding-block: var(--s-6); background: var(--paper); }
.help-head-in { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.help-head .crumbs { padding-top: 0; }
.help-head h1 { margin-top: var(--s-4); font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.04; max-width: 22ch; }
.help-chip { margin-top: var(--s-5); }
.help-chip a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 12px 0; background: var(--paper-2); color: var(--ink); text-decoration: none;
  font-size: var(--t-sm); font-weight: var(--w-label); }
.help-chip a:hover { background: var(--paper-3); }
.help-head .vs-answer { max-width: 34em; }
.help-art { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-8);
  align-items: start; padding-top: var(--s-6); padding-bottom: var(--s-9); border-top: var(--rule-heavy) solid var(--ink); }
.help-prose { max-width: var(--measure); font-size: 1.125rem; line-height: var(--lh-read); }
.help-prose > * + *, .help-prose section > * + * { margin-top: var(--s-5); }
.help-prose section + section { margin-top: var(--s-8); }
.help-prose h2 { font-size: var(--t-2xl); font-weight: var(--w-display); letter-spacing: -0.02em; scroll-margin-top: calc(var(--bar-h) + var(--s-5)); }
.help-prose h3 { font-size: var(--t-xl); }
.help-prose ul, .help-prose ol { padding-left: 1.3em; }
.help-prose li + li { margin-top: var(--s-2); }
.help-prose ol.vs-list { list-style: none; counter-reset: help-step; position: relative; padding-left: 56px; display: grid; gap: var(--s-4); }
.help-prose ol.vs-list::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: var(--line-w-sm); background: var(--ink); }
.help-prose ol.vs-list > li { position: relative; counter-increment: help-step; margin-top: 0; }
.help-prose ol.vs-list > li::before { content: counter(help-step); position: absolute; left: -56px; top: -3px; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 5px solid var(--ink); border-radius: var(--r-round); background: var(--paper); font-weight: var(--w-display); font-size: var(--t-sm);
  line-height: 1; padding-top: 2px; }
.help-prose .help-stuck p, .help-prose .help-stuck { font-size: var(--t-md); line-height: var(--lh-body); }
.help-side { position: sticky; top: calc(var(--bar-h) + var(--s-5)); }
.help-side .side-h { display: flex; align-items: center; gap: 8px; padding-bottom: var(--s-3); border-bottom: var(--rule-heavy) solid var(--ink); margin-bottom: var(--s-2);
  font-weight: var(--w-strong); font-size: var(--t-sm); }
.help-side .side-h a { color: var(--ink); }
.help-side ul { list-style: none; }
.help-side li a { display: block; padding: 8px 0 6px; color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); line-height: 1.35; }
.help-side li a:hover { color: var(--ink); text-decoration: underline; }
.help-side a[aria-current="page"] { color: var(--ink); font-weight: var(--w-strong); box-shadow: inset 4px 0 0 var(--ink); padding-left: 12px; }
.help-side .side-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-3); font-weight: var(--w-label); font-size: var(--t-sm); }
/* the contact page: one card with the form, one side note */
.contact-grid { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7); align-items: start; padding-block: var(--s-8) var(--s-9); }
.contact-card { padding: var(--s-6); background: var(--paper); box-shadow: inset 0 0 0 var(--rule-heavy) var(--ink); }
.help-form { display: grid; gap: var(--s-5); }
.help-form .field { display: grid; gap: 6px; }
.help-form label, .help-form legend { font-weight: var(--w-label); }
.help-form input[type="text"], .help-form input[type="email"], .help-form input[type="url"], .help-form select, .help-form textarea {
  width: 100%; min-height: var(--control); padding: 0 14px; border: var(--rule-heavy) solid var(--edge); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; }
.help-form textarea { padding-block: 12px; min-height: 160px; resize: vertical; line-height: var(--lh-body); }
.help-form select { appearance: none; padding-right: 40px; background: var(--paper) url("/static/shared/img/v2/chevron.svg") no-repeat right 12px center / 16px; }
.help-form input:hover, .help-form select:hover, .help-form textarea:hover { border-color: var(--ink-2); }
.help-form input:focus-visible, .help-form select:focus-visible, .help-form textarea:focus-visible { border-color: var(--focus); }
.help-form [aria-invalid="true"] { border-color: var(--down); }
.help-form .field.check { display: flex; align-items: flex-start; gap: 10px; }
.help-form .field.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); }
.help-report { display: grid; gap: var(--s-4); margin: 0; padding: var(--s-5); border: 0; background: var(--paper-2); }
.help-report legend { float: left; width: 100%; margin-bottom: var(--s-2); font-size: var(--t-lg); font-weight: var(--w-strong); }
.hp-wrap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.help-done:not([hidden]) { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-6); background: var(--steady-bg); }
.help-done .done-ico { width: 32px; height: 32px; color: var(--steady); }
.done-t { font-size: var(--t-xl); font-weight: var(--w-strong); }
.help-done p + p { margin-top: var(--s-2); }
.contact-side { display: grid; gap: var(--s-4); }
.side-card { padding: var(--s-5); background: var(--paper-2); }
.side-card h2, .side-t { font-size: var(--t-lg); font-weight: var(--w-strong); letter-spacing: 0; margin-bottom: var(--s-2); }
.side-card p, .side-card li { color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.side-card .vs-list { padding-left: 1.2em; }

/* ==== the free check and the free tools (site/js/scan.js draws the result) ==== */
.sc-form { margin-top: var(--s-6); max-width: 40rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.sc-form > label { grid-column: 1 / -1; margin-bottom: var(--s-2); font-weight: var(--w-label); }
.sc-form input { min-height: 56px; padding: 0 16px; border: 3px solid var(--ink); border-right: 0; border-radius: 0; background: var(--paper); color: var(--ink); font: inherit;
  font-size: var(--t-lg); min-width: 0; }
.sc-form input:focus-visible { border-color: var(--focus); }
.sc-form input[aria-invalid="true"] { border-color: var(--down); }
.sc-form .btn { min-height: 56px; }
.sc-form .sc-hint, .sc-form .sc-error { grid-column: 1 / -1; }
.sc-hint { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--t-sm); }
.sc-error:not([hidden]) { display: flex; margin-top: var(--s-2); color: var(--down); font-weight: var(--w-label); font-size: var(--t-sm); animation: lx-rise var(--dur-state) var(--ease-standard) both; }
.sc-status { margin-top: var(--s-2); min-height: 1.55em; color: var(--ink-2); font-size: var(--t-sm); }
.results-sec:has(> .mk-in[hidden]) { padding-block: 0; }
.results-sec { background: var(--paper-2); }
.sc-wrap { display: grid; gap: var(--s-5); }
.sc-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-bottom: var(--s-4);
  border-bottom: var(--rule-heavy) solid var(--ink); }
.sc-sum h2 { font-size: var(--t-2xl); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sc-counts { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.sc-count { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px 1px; font-size: var(--t-sm); font-weight: var(--w-strong); }
.sc-count.fail { background: var(--down); color: #fff; }
.sc-count.warn { background: var(--regional-bg); color: var(--regional); }
.sc-count.ok { background: var(--steady-bg); color: var(--steady); }
.sc-count.info { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.sc-count.unavailable { background: var(--unknown-bg); color: var(--unknown); }
.sc-rows { display: grid; gap: 2px; list-style: none; }
.sc-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-3) var(--s-6); padding: var(--s-5); background: var(--paper);
  transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); }
.sc-row.hidden-row { opacity: 0; transform: translateY(var(--move-md)); }
.sc-row.pending { opacity: 0.72; }
.sc-title h3 { font-size: var(--t-lg); }
.sc-state { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s-2); font-weight: var(--w-strong); font-size: var(--t-sm); }
.sc-row[data-state="ok"] .sc-state { color: var(--steady); }
.sc-row[data-state="warn"] .sc-state { color: var(--regional); }
.sc-row[data-state="fail"] .sc-state { color: var(--down); }
.sc-row[data-state="unavailable"] .sc-state, .sc-row[data-state="waiting"] .sc-state { color: var(--unknown); }
.sc-row[data-state="info"] .sc-state { color: var(--ink-2); }
.sc-head { font-weight: var(--w-label); }
.sc-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--s-4); margin-top: var(--s-3); font-size: var(--t-sm); }
.sc-facts div { display: contents; }
.sc-facts dt { color: var(--ink-2); }
.sc-facts dd { margin: 0; font-family: var(--mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.sc-why { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-sm); }
.sc-why strong { color: var(--ink); }
.sc-next { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-2); font-weight: var(--w-label); font-size: var(--t-sm); }
.sc-limits { color: var(--ink-2); }
.sc-cta { display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: var(--s-4) var(--s-6); align-items: center; padding: var(--s-6); background: var(--sign); color: var(--on-sign); }
.sc-cta strong { font-size: var(--t-xl); line-height: 1.25; }
.sc-cta p { margin-top: var(--s-2); color: var(--on-sign-2); }
.sc-cta .note { color: var(--on-sign-2); }
.sc-cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==== the changelog: the project's history as a line, newest first ==== */
.cl-list { position: relative; display: grid; gap: var(--s-6); list-style: none; max-width: 52rem; padding-left: 64px; }
.cl-list::before { content: ""; position: absolute; left: 22px; top: 12px; bottom: 12px; width: var(--line-w-sm); background: var(--ink); }
.cl-list > li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-2) var(--s-5); }
.cl-list > li::before { content: ""; position: absolute; left: -52px; top: 0; width: 26px; height: 26px; border: 6px solid var(--ink); border-radius: var(--r-round);
  background: var(--ground, var(--paper)); }
.cl-list time { font-weight: var(--w-strong); color: var(--ink-2); font-size: var(--t-sm); padding-top: 3px; }
.cl-list h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-xl); }
.cl-list p { margin-top: var(--s-2); color: var(--ink-2); }
.cl-kind { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px 0; background: var(--paper-3); color: var(--ink-2); font-size: var(--t-xs);
  font-weight: var(--w-strong); letter-spacing: 0; }

/* ==== the legal drafts: a reading page whose banner never lets anyone forget it is a draft ==== */
.legal .legal-facts { display: grid; padding: var(--s-2) var(--s-5); background: var(--paper-2); font-size: var(--t-md); line-height: var(--lh-body); }
.legal .legal-facts > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 4px var(--s-5); padding: 12px 0 10px;
  border-bottom: 1px solid var(--rule); }
.legal .legal-facts > div:last-child { border-bottom: 0; }
.legal .legal-facts dt { font-weight: var(--w-strong); overflow-wrap: anywhere; }
.legal .legal-facts dd { margin: 0; }
@media (max-width: 560px) { .legal .legal-facts > div { grid-template-columns: minmax(0, 1fr); } }
.model-form { padding: var(--s-5); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.model-form ul { margin-top: var(--s-3); }

/* ==== motion: the parts of a section rise as it enters (content is visible without it), the hero panel arrives once ==== */
.js .reveal-ready [data-reveal] { opacity: 0; transform: translateY(var(--move-lg)); }
.js .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter);
  transition-delay: calc(var(--stagger) * var(--d, 0)); }
@media print { .js .reveal-ready [data-reveal] { opacity: 1; transform: none; } }   /* a printed page never scrolls: every part shows */
:root[data-motion="full"] .mk-hero .vig, :root[data-motion="full"] .mk-hero .glance { animation: lx-rise-lg var(--dur-enter) var(--ease-enter) both; }
/* the bands below the landing's first screens are laid out only as they come near */
.landing main > .band ~ .band { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ==== responsive ==== */
@media (max-width: 1240px) {
  .nav-link.opt { display: none; }
}
@media (max-width: 1180px) {
  .bar-long { display: none; }
  .mk-cta { background-size: auto 64%; }   /* the beams stay clear of the words as the band narrows */
}
@media (max-width: 1120px) {
  .doc, .doc.doc-wide { grid-template-columns: 220px minmax(0, 1fr); }
  .doc > .doc-aside.end { grid-column: 2; position: static; max-width: var(--measure); }   /* the next step goes under the column */
  .doc.doc-plain { grid-template-columns: minmax(0, 1fr); }
  .doc.doc-plain > .doc-aside.end { grid-column: 1; }
  .help-art { grid-template-columns: minmax(0, 1fr) 240px; }
}
@media (max-width: 960px) {
  .nav, .bar-actions .btn-sign-line:not(.bar-trial) { display: none; }   /* "Sign in" moves into the menu; the trial stays */
  .menu-toggle { display: inline-flex; }
  .hero-grid, .split, .ledger, .report-wrap { grid-template-columns: minmax(0, 1fr); }
  .split > .section-head { position: static; margin-bottom: var(--s-6); }
  .reasons, .why-grid, .faq-list, .watch, .mk-facts, .card-list, .hub-page .card-list { grid-template-columns: minmax(0, 1fr); }
  .plans, .plans-grid, .pc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .trial-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .doc, .doc.doc-plain, .doc.doc-wide { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .doc > .doc-aside { position: static; }
  .doc > .doc-aside.end { grid-column: auto; }
  .mk-hero-in { grid-template-columns: minmax(0, 1fr); }
  .mk-row { grid-template-columns: minmax(0, 1fr); padding-left: 56px; }
  .mk-row::before { left: 18px; }
  .mk-row::after { left: 6px; }
  .mk-split, .mk-split.two, .vs-two, .costs { grid-template-columns: minmax(0, 1fr); }
  .help-art, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .help-side { position: static; order: 2; }
  .sc-row, .sc-cta { grid-template-columns: minmax(0, 1fr); }
  .which { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .which li { padding: 0 0 0 60px; min-height: 48px; }
  .which li::before { left: 14px; right: auto; top: 30px; bottom: calc(-1 * var(--s-5)); width: var(--line-w); height: auto; }
  .line:not(.line-v) { --n: 1; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-left: 60px; }
  .line:not(.line-v) .stop { padding-right: 0; min-height: 56px; }
  .line:not(.line-v) .stop::before { left: calc(-31px - var(--line-w) / 2); top: 11px; width: var(--line-w); height: calc(100% + var(--s-5)); transform-origin: top; }
  .line:not(.line-v) .stop:last-child::before { display: none; }
  .line:not(.line-v) .stop-time { height: auto; }
  .line:not(.line-v) .stop-mark { position: absolute; left: -46px; top: -4px; }
  .line:not(.line-v) .stop-down .stop-mark, .line:not(.line-v) .stop-alert .stop-mark { left: -52px; top: -10px; margin: 0; }
  .line:not(.line-v) .stop-title { margin-top: 2px; }
  .line:not(.line-v) .here { position: relative; left: 0; top: 0; margin-bottom: 8px; }
  .line.is-drawn:not(.line-v) .stop::before { animation-name: lx-draw-y; }
  .rule-row { grid-template-columns: 64px repeat(30, minmax(0, 1fr)); gap: 2px; }
  .rule-row i { height: 18px; }
  .screen-body { padding: var(--s-4); min-height: 0; }
  .svc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-row .note { display: none; }
  .evidence li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .report-parts { columns: 1; }
  .closing .wrap > *, .mk-cta-in > * { max-width: none; }
  .mk-cta { background-position: right -60px bottom; background-size: auto 58%; }
}
@media (max-width: 720px) {
  .mk-cta { background-image: none; }
  .menu-sheet nav { grid-template-columns: minmax(0, 1fr); }
  .cl-list > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sp-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vs-table thead { display: none; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: auto; }
  .vs-table tr { padding: var(--s-4) 0; border-bottom: var(--rule-heavy) solid var(--ink); }
  .vs-table tbody th { padding: 0 0 var(--s-2); border: 0; font-size: var(--t-lg); }
  .vs-table td { padding: var(--s-2) 0; border: 0; }
  .vs-table td::before { content: attr(data-label); display: block; font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink-2); }
  .prose.vs-wide .vs-table td[data-label]:nth-child(2) { padding: var(--s-3); }
  .vs-table caption { display: block; }
}
@media (max-width: 560px) {
  .joined { flex-direction: column; }
  .joined .input { border-right: 3px solid var(--ink); }
  .sc-form { grid-template-columns: minmax(0, 1fr); }
  .sc-form input { border-right: 3px solid var(--ink); }
  .bar-actions .bar-trial { display: none; }
  .rule-demo { padding: var(--s-4); }
  .rule-row { grid-template-columns: 44px repeat(30, minmax(0, 1fr)); gap: 1px; }
  .rule-row .lab-long { display: none; }
  .rule-row.alerts .bell { width: 14px; height: 14px; }
  .rule-switch, .rule-demo .switch { font-size: var(--t-sm); }
  .rule-readout { font-size: var(--t-lg); }
  .svc-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .svc-row .svc, .svc-row .act { justify-self: start; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .trial-steps { grid-template-columns: minmax(0, 1fr); }
  .mk-steps { padding-left: 64px; }
  .mk-steps li::before { left: -64px; width: 48px; height: 48px; }
  .mk-steps::before { left: 21px; }
  .price .amt, .pc-price b { font-size: 3rem; }
  .vig li { grid-template-columns: 18px minmax(0, 1fr); }
  .vig .v { grid-column: 2; text-align: left; white-space: normal; }
  .vig li.has-meter { grid-template-areas: "g t" ". v" ". m"; }
  .contact-card, .help-stuck { padding: var(--s-5); }
}
/* keyboard and touch: 44 px targets on a coarse pointer and on narrow screens, the swinging screen never widens the page */
@media (max-width: 960px), (pointer: coarse) {
  .foot li a { min-height: 44px; }
  .foot .wordmark { min-height: 44px; }
  .svc-row .host, .site-row .host { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a, .mk-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .toc a { padding-block: 12px 10px; min-height: 44px; }
  .linkish { min-height: 44px; }
  /* the link lists of the hubs, the help centre and the landing's comparisons: a row is one target, a chip or a link is 44 px tall */
  .card-list li { position: relative; }
  .card-list a::after { content: ""; position: absolute; inset: 0; }
  .help-side li a, .help-side .side-h a, .why-links a, .compare-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .help-side li a { display: flex; }
  .help-chip a, .help-popular a { min-height: 44px; }
}
@media (pointer: coarse) { .scenario, .bill-pick .seg-opt { min-height: 44px; } }

/* ==== the one rule of the phase-1 prototypes' block that a production page uses (the stop text of the landing's night line); the
   prototypes and the rest of their block were removed after the rollout (SITE-V2 final, 2026-11-02) ==== */
.line-v .stop-text { max-width: 31em; }

/* ==== WOW (2026-11-02): light, depth and one thread through the page, on the same system (DESIGN-v2.md section 13) ===============
   The identity evolves, it is not replaced: the enamel, the navy sign, the one lamp, Overpass, square shapes, the line. What is new:
   night grounds lit from above, the two lamps whose beams meet on the thing being checked, frosted glass lit by them, one page line
   drawn by the scroll with a stop per section, real app screens in a frame, close-ups on a bento, a tinted light canvas with lifted
   cards, the site-wide test notice. Rules kept: transform and opacity only move, every duration is a token, nothing loops, the lamp is
   the focus ring on night, status colours only with a glyph and a word, no text on moving light, every effect has a still fallback.
   Components (one block each in DESIGN-v2.md 13): .notice-bar, .night, .night-hero, .sky (lamps, beams), .glass, .route .leg .station,
   .frame, .bento .frag, .trio, .trust, .canvas cards (.lifted), .btn-lamp glow, .lift, [data-rise]. */
:root {
  --night-0: #050f17;        /* the deepest night: the notice bar, the floor of the hero */
  --night-1: #081925;        /* the night field: white 17.6:1, --on-sign-2 11.4:1 */
  --night-2: #0f2a3d;        /* lit night, where the light falls */
  --notice-h: 36px;
  --beam-hi: 255, 240, 205;  /* the beam's core, as rgb channels for rgba() */
  --beam-lo: 245, 196, 81;   /* the lamp amber, the beam's edge */
  --lamp-core: #fff6dc;      /* the lamp's hot centre */
  --beam-cone: 255, 250, 235;  /* the cone of a beam, as rgb channels */
  --beam-cross: 255, 244, 214; /* where the two beams cross, as rgb channels */
  --haze: 214, 232, 246;     /* light in the night air: hairlines, glass edges, frames (rgb channels) */
  --sky-mist: 194, 210, 220; /* the sky's grid and the night line's track (rgb channels; the hue of --on-sign-2) */
  --night-glow: 30, 72, 99;  /* the lit part of a night ground (rgb channels) */
  --night-floor: #0a2030;    /* the floor of the night hero */
  --night-line: #dce7ee;     /* the page line drawn on a night ground */
  --night-steady: #7fd8ad;   /* status words on the night: steady, down, a field's error (AA on --night-1) */
  --night-down: #ff9d93;
  --night-error: #ffb4ab;
  --test-night: #d6c2f5;     /* the TEST label on the night bar: 12.9:1 on --night-0 */
  --test-dot: #b48ef0;
  --t-hero: clamp(2.625rem, 7.4vw, 7.5rem);      /* 42-120: the landing's one display line */
  --t-head: clamp(2.25rem, 4.8vw, 4.25rem);      /* 36-68: section heads on the WOW pages */
  --t-lead: clamp(1.125rem, 1.4vw, 1.3125rem);   /* 18-21 */
  --dur-sweep: calc(var(--dur-scene) * 2);       /* the beams' one sweep on load (0 with reduced motion, like the token it is made of) */
  --lane: clamp(40px, 5.2vw, 76px);              /* the page line's lane, left of every section's content */
  --route-w: 4px;
  --stop-d: 22px;
  --route-x: calc((100% - min(var(--wrap), 100% - 2 * var(--gutter))) / 2 + var(--lane) / 2);   /* the line's x in a full-width box */
}

/* ==== the notice bar: the test build said once, site-wide, slim, above the sign band (web_chrome.header_html draws it) ==== */
.notice-bar { position: relative; z-index: 41; background: var(--night-0); color: var(--on-sign-2); font-size: var(--t-xs); }
.notice-bar .wrap { display: flex; align-items: center; min-height: var(--notice-h); padding-block: 6px 4px; }
.notice-bar p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; line-height: 1.35; }
.notice-tag { display: inline-flex; align-items: center; gap: 7px; color: var(--test-night); font-weight: var(--w-strong); }
.notice-tag::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--test-dot); }
.notice-bar a { color: var(--on-sign); font-weight: var(--w-label); }
.notice-bar :focus-visible { outline-color: var(--lamp); }
@media (pointer: coarse) { .notice-bar a { display: inline-flex; align-items: center; min-height: 44px; } }
/* the soft launch's bar (api/web_launch.py TRIAL_NOTICE): the same bar, the tag in plain white and a neutral dot (TEST violet is the
   test build's label and nothing else) */
.notice-bar.is-trial .notice-tag { color: var(--on-sign); }
.notice-bar.is-trial .notice-tag::before { background: var(--on-sign-2); }
/* a page that opens on the night: the sign band is clear over it until the page moves (then the frosted band of 6.1) */
.night-top .bar:not(.is-scrolled) { background: transparent; }

/* ==== night grounds: a section of the night, lit from above (any page) ==== */
.night { --ground: #0c2232; position: relative; isolation: isolate; background: var(--night-1); color: var(--on-sign); }
.night :focus-visible { outline-color: var(--lamp); }
.night a:not(.btn) { color: var(--on-sign); }
.night .note, .night .fine, .night .hint { color: var(--on-sign-2); }

/* ==== the landing's first screen: full-height night, two lamps, two beams meeting on one frosted card ======================== */
.night-hero { overflow: clip; margin-top: calc(-1 * var(--bar-h)); min-height: calc(100svh - var(--notice-h));
  padding-block: calc(var(--bar-h) + clamp(28px, 4.4vw, 64px)) clamp(48px, 6vw, 96px);
  background:
    radial-gradient(60% 75% at 76% 38%, rgba(var(--night-glow), 0.85), rgba(8, 25, 37, 0) 72%),
    linear-gradient(180deg, var(--night-floor) 0%, var(--night-1) 58%, var(--night-0) 100%); }
/* the sky's texture: a fine grain over the whole night (a 160 px noise tile, shared/img/v2/grain.svg) */
.night-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0.7;
  background: url("/static/shared/img/v2/grain.svg"); }
.night-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "lede stage" "copy stage";
  grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 5vw, 88px); row-gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.night-hero .lede { grid-area: lede; position: relative; z-index: 2; }
.night-hero h1 { grid-area: title; font-size: var(--t-hero); line-height: 0.9; letter-spacing: -0.045em; max-width: 9.4em; text-wrap: wrap;
  color: var(--on-sign); }
.night-hero-copy { grid-area: copy; position: relative; z-index: 2; }
.night-hero .lede { max-width: 27em; font-size: var(--t-lead); line-height: 1.5; color: var(--on-sign-2); }
.night-hero .lede strong { color: var(--on-sign); }
.night-hero .check-form { margin-top: 0; max-width: 34rem; }
.night-hero .check-form .label { color: var(--on-sign); font-size: var(--t-sm); }
.night-hero .check-form .input { border: 0; min-height: 60px; background: #fff; box-shadow: inset 0 0 0 2px #fff; }
.night-hero .check-form .btn { min-height: 60px; padding-inline: 26px; font-size: var(--t-lg); }
.night-hero .hint, .night-hero .scan-live { color: var(--on-sign-2); }
.night-hero .hint { font-size: var(--t-xs); max-width: 34rem; }
.night-hero .field-error { color: var(--night-error); }
.night-hero .hero-cta { margin-top: var(--s-4); }
.night-hero .btn-link { color: var(--on-sign); }
.lit-stage { grid-area: stage; position: relative; z-index: 1; perspective: 1400px; }
@media (min-width: 1100px) { .lit-stage { margin-top: clamp(-128px, -8vw, -88px); } }   /* the card rises beside the headline's short second line */

/* the sky: two lamps (region A and region B), each throwing a beam; a beam is a cone drawn as a conic gradient about its lamp,
   faded with distance by a radial mask, with a wider haze round it for volume. No image, no filter: it rotates on the compositor.
   Decoration only (aria-hidden); no text sits on it except the card's, behind glass. Under the card a fine grid catches the light,
   so the glass is seen to blur it. */
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky::before { content: ""; position: absolute; left: -12%; right: -12%; top: -24%; bottom: -8%;
  background: repeating-linear-gradient(90deg, rgba(var(--sky-mist), 0.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(var(--sky-mist), 0.07) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(52% 50% at 58% 30%, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
  mask-image: radial-gradient(52% 50% at 58% 30%, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%); }
.sky-beam { --len: clamp(900px, 92vw, 1500px); position: absolute; width: var(--len); height: var(--len);
  margin: calc(var(--len) / -2) 0 0 calc(var(--len) / -2); mix-blend-mode: screen; }
.sky-beam::before, .sky-beam::after { content: ""; position: absolute; inset: 0; transform: rotate(var(--lean, 0deg));
  transition: transform var(--dur-scene) var(--ease-standard); }
/* the cone: a soft core six degrees wide, fading out over twenty-six each side */
.sky-beam::after {
  background: conic-gradient(from calc(var(--dir) - 26deg) at 50% 50%,
    rgba(var(--beam-lo), 0) 0deg, rgba(var(--beam-lo), 0.08) 7deg, rgba(var(--beam-hi), 0.28) 14deg, rgba(var(--beam-hi), 0.62) 21deg,
    rgba(var(--beam-cone), 0.86) 24deg, rgba(var(--beam-cone), 0.86) 28deg, rgba(var(--beam-hi), 0.62) 31deg, rgba(var(--beam-hi), 0.28) 38deg,
    rgba(var(--beam-lo), 0.08) 45deg, rgba(var(--beam-lo), 0) 52deg, transparent 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.16) 80%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.16) 80%, transparent 100%); }
/* the haze: the same beam twice as wide and faint, the light scattered in the night air */
.sky-beam::before {
  background: conic-gradient(from calc(var(--dir) - 50deg) at 50% 50%,
    rgba(var(--beam-lo), 0) 0deg, rgba(var(--beam-lo), 0.06) 22deg, rgba(var(--beam-hi), 0.14) 50deg, rgba(var(--beam-lo), 0.06) 78deg,
    rgba(var(--beam-lo), 0) 100deg, transparent 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%); }
.sky-lamp { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--r-round); background: var(--lamp-core);
  box-shadow: 0 0 0 4px rgba(var(--beam-lo), 0.4), 0 0 22px 8px rgba(var(--beam-lo), 0.6), 0 0 64px 24px rgba(var(--beam-lo), 0.2); }
.sky-name { position: absolute; padding: 3px 9px 2px; border-radius: var(--r-pill); background: rgba(5, 15, 23, 0.72); color: var(--on-sign-2);
  font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }   /* on a dark pill: the lamp's glow never sits under the words */
/* where the two beams meet: the light pools on the card's top edge and shows through the glass */
.sky-cross { position: absolute; width: 440px; height: 280px; margin: -140px 0 0 -220px; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(var(--beam-cross), 0.62), rgba(var(--beam-lo), 0.24) 42%, rgba(var(--beam-lo), 0) 100%); }
/* the hero's geometry, relative to the card's column: the two lamps stand above the card, left and right; their beams meet in a V
   on the card's head (the site being checked) */
.lit-stage .sky-lamp.a, .lit-stage .sky-beam.a { left: 40%; top: -118px; }
.lit-stage .sky-lamp.b, .lit-stage .sky-beam.b { left: calc(100% + min(var(--gutter), 64px) - 34px); top: -128px; }
.lit-stage .sky-beam.a { --dir: 132deg; }
.lit-stage .sky-beam.b { --dir: 241deg; }
.lit-stage .sky-cross { left: 62%; top: 0; }
.lit-stage .sky-name.a { left: calc(40% - 96px); top: -128px; }
.lit-stage .sky-name.b { right: calc(-1 * min(var(--gutter), 64px) + 54px); top: -136px; }
/* the small sky: on a phone the card is below the first screen, so the two beams meet once more behind the headline, smaller */
.sky-mini { display: none; }

/* ==== the glass: one card, lit by the two beams that meet on it. It tints and blurs what is behind it (the grid, the light);
   behind the text it is at least 46 % night with an inner gradient, and over the brightest light that reaches it the text keeps AA
   (measured with the page, DESIGN-v2.md 13). Without backdrop-filter, or with reduced transparency, it is solid #102637. ========= */
.glass { --ground: #10283a; position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: var(--s-6) var(--s-6) var(--s-5);
  background: #102637; color: var(--on-sign);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(var(--haze), 0.14), 0 44px 90px -34px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(3, 10, 16, 0.35);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform var(--dur-scene) var(--ease-standard); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 34%), rgba(11, 31, 47, 0.58);
    -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%); }
}
@media (prefers-reduced-transparency: reduce) { .glass { background: #102637; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* the lit edge: bright where the beams reach the card (its top), fading round the rest */
.glass::before { content: ""; position: absolute; inset: 0; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--beam-hi), 0.9), rgba(var(--beam-hi), 0.2) 22%, rgba(var(--haze), 0.07) 55%, rgba(var(--haze), 0.14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* the inner glow: where the two beams meet, at the card's head, never behind the stops */
.glass::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(48% 30% at 62% 0%, rgba(var(--beam-lo), 0.24), rgba(var(--beam-lo), 0) 100%); }
/* a glare that follows a fine pointer (set by site.js as custom properties) */
.glass-glare { position: absolute; z-index: -1; left: -30%; top: -30%; width: 160%; height: 160%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 70%);
  transform: translate(var(--glare-x, 0%), var(--glare-y, 0%)); transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-move) var(--ease-standard); }
.lit-stage.is-near .glass-glare { opacity: 1; }
.glass .card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-4); }
.glass .card-head h2 { font-size: var(--t-lg); font-weight: var(--w-strong); letter-spacing: 0; color: var(--on-sign); }
.glass .card-head .host { padding: 2px 10px 1px; border-radius: var(--r-pill); background: rgba(5, 15, 23, 0.6); color: var(--lamp-soft); font-size: var(--t-sm);
  font-weight: var(--w-strong); }   /* the site the beams meet on, on a dark chip so the light behind it never weakens it */
.glass .scenarios { margin: var(--s-4) 0 var(--s-5); }
.glass .scenario { background: rgba(5, 15, 23, 0.46); color: var(--on-sign); box-shadow: inset 0 0 0 1px rgba(var(--haze), 0.34); }
.glass .scenario:hover { background: rgba(5, 15, 23, 0.7); box-shadow: inset 0 0 0 1px rgba(var(--haze), 0.7); }
.glass .scenario[aria-pressed="true"] { background: var(--on-sign); color: var(--ink); box-shadow: none; }
.glass .fine { margin-top: var(--s-4); color: var(--on-sign-2); font-size: var(--t-xs); }
.glass .night-line .here { background: #0b1d2b; }

/* the lamps come on after the load event (site.js marks the hero .is-lit), Full motion only: each beam sweeps in once about its lamp
   and settles where the two meet. With reduced motion, Off, no script or no `scripting` support the light is a still picture. */
@keyframes lx-sweep-a { from { opacity: 0; transform: rotate(26deg); } }
@keyframes lx-sweep-b { from { opacity: 0; transform: rotate(-24deg); } }
@keyframes lx-lamp-on { from { opacity: 0; transform: scale(0.4); } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  :root:is([data-motion="full"], :not([data-motion])) .night-hero:not(.is-lit) .sky-beam,
  :root:is([data-motion="full"], :not([data-motion])) .night-hero:not(.is-lit) .sky-lamp { opacity: 0; }
  :root[data-motion="full"] .night-hero.is-lit .sky-lamp { animation: lx-lamp-on var(--dur-enter) var(--ease-enter) backwards; }
  :root[data-motion="full"] .night-hero.is-lit .sky-lamp.b { animation-delay: var(--dur-enter); }
  :root[data-motion="full"] .night-hero.is-lit .sky-beam.a::after,
  :root[data-motion="full"] .night-hero.is-lit .sky-beam.a::before { animation: lx-sweep-a var(--dur-sweep) var(--ease-enter) backwards; }
  :root[data-motion="full"] .night-hero.is-lit .sky-beam.b::after,
  :root[data-motion="full"] .night-hero.is-lit .sky-beam.b::before { animation: lx-sweep-b var(--dur-sweep) var(--ease-enter) backwards;
    animation-delay: var(--dur-enter); }
}

/* ==== the page line: one line, drawn by the scroll, through every section of `.route`; each section head is a stop ============
   Markup: <div class="route" id="route"> holding <section class="leg leg-light|leg-canvas|leg-fog|leg-night"><div class="wrap">
   <div class="station">h2 + p.leg-lead</div> ...</div></section>. site.js draws each section's stretch to a reading point (--fill, a
   scaleY: transform only) and marks the stop the reader passed last .is-here (the lamp), earlier ones .is-passed. Without the script,
   or with reduced motion, the line is drawn. */
.leg { position: relative; isolation: isolate; padding-block: clamp(72px, 8.4vw, 128px);
  --track: var(--paper-3); --travel: var(--ink); --leg-ground: var(--paper); background: var(--leg-ground); }
.leg > .wrap { position: relative; padding-left: var(--lane); }
.leg::before, .leg::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(var(--route-x) - var(--route-w) / 2);
  width: var(--route-w); pointer-events: none; }
.leg::before { background: var(--track); }
.leg::after { background: var(--travel); transform-origin: 50% 0; transform: scaleY(var(--fill, 1)); }
.leg-fog { --leg-ground: var(--paper-2); --track: #d3dade; }
/* the light canvas: a cool tint of the enamel with light from above; cards on it are white and lifted (.lifted) */
.leg-canvas { --leg-ground: var(--canvas); --track: #d6dee3; --ground: var(--canvas);
  background: radial-gradient(90% 46% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 100%), var(--canvas); }
.leg-night { --leg-ground: var(--night-1); --track: rgba(var(--sky-mist), 0.16); --travel: var(--night-line); --ground: var(--night-1); color: var(--on-sign);
  background: radial-gradient(70% 55% at 50% 0%, rgba(var(--night-glow), 0.6), rgba(8, 25, 37, 0) 70%), var(--night-1); }
.leg-night :focus-visible { outline-color: var(--lamp); }
.leg-night a:not(.btn) { color: var(--on-sign); }
.leg-night .note, .leg-night .fine, .leg-night .leg-lead, .leg-night .leg-more { color: var(--on-sign-2); }
/* a station: the section's head with its stop on the line. Passed: filled. Here: the lamp on a navy ring (DESIGN-v2 "you are here") */
.station { position: relative; max-width: 40em; }
.station::before { content: ""; position: absolute; z-index: 1; left: calc(var(--lane) / -2 - var(--stop-d) / 2);
  top: calc(var(--t-head) * 0.51 - var(--stop-d) / 2 + 2px); width: var(--stop-d); height: var(--stop-d); border-radius: var(--r-round);
  background: var(--leg-ground, var(--paper)); box-shadow: inset 0 0 0 5px var(--travel, var(--ink)); transition: transform var(--dur-move) var(--ease-standard); }
.station.is-passed::before { background: var(--travel, var(--ink)); }
.station.is-here::before { background: var(--lamp); box-shadow: inset 0 0 0 5px var(--sign), 0 0 0 6px rgba(var(--beam-lo), 0.3), 0 0 28px 8px rgba(var(--beam-lo), 0.42);
  transform: scale(1.18); }
.station h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -0.035em; max-width: 14em; }
.leg-lead { margin-top: var(--s-5); max-width: 34em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.leg-more { margin-top: var(--s-4); max-width: 36em; color: var(--ink-2); }
.leg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.leg-split > .station { position: sticky; top: calc(var(--bar-h) + var(--s-6)); }
/* a wide station: the head on the left, its lead on the right, so a head never leaves half the frame empty */
.station-wide { margin-bottom: clamp(var(--s-7), 5vw, var(--s-8)); max-width: none; }
.station-wide h2 { max-width: 16em; }
@media (min-width: 961px) {
  .station-wide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: end; }
  .station-wide > h2 { grid-column: 1; grid-row: 1 / span 3; }
  .station-wide > p { grid-column: 2; margin-top: 0; }
  .station-wide > p + p { margin-top: var(--s-3); }
}
/* a band made elsewhere inside a leg (the onboarding film of web_video.py): it takes the leg's ground, and its head is the station */
.leg > .wrap > .video-band { padding: 0; background: none; color: inherit; content-visibility: visible; }   /* the leg is the lazy part; the stop sits outside the band */
.leg > .wrap > .video-band .video-in { max-width: none; }
.leg > .wrap > .video-band .section-head { position: relative; max-width: 40em; margin-bottom: var(--s-6); }
.leg > .wrap > .video-band .section-head h2 { font-size: var(--t-head); line-height: 1.02; letter-spacing: -0.035em; }
.leg > .wrap > .video-band .section-head p { color: var(--ink-2); }
.leg-night > .wrap > .video-band .section-head p { color: var(--on-sign-2); }
.leg > .wrap > .video-band .section-head::before { content: ""; position: absolute; z-index: 1; left: calc(var(--lane) / -2 - var(--stop-d) / 2);
  top: calc(var(--t-head) * 0.51 - var(--stop-d) / 2 + 2px); width: var(--stop-d); height: var(--stop-d); border-radius: var(--r-round);
  background: var(--leg-ground); box-shadow: inset 0 0 0 5px var(--travel); transition: transform var(--dur-move) var(--ease-standard); }
.leg > .wrap > .video-band .section-head.is-passed::before { background: var(--travel); }
.leg > .wrap > .video-band .section-head.is-here::before { background: var(--lamp);
  box-shadow: inset 0 0 0 5px var(--sign), 0 0 0 6px rgba(var(--beam-lo), 0.3), 0 0 28px 8px rgba(var(--beam-lo), 0.42); transform: scale(1.18); }
/* the landing's legs below the first screens are laid out only when they come near (the line's script measures again when they are) */
.landing .route > .leg ~ .leg { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* the line ends at the page's close: a terminus bar caps it, the way a line diagram ends */
.route-end { position: absolute; z-index: 1; top: 0; left: calc(var(--route-x) - 17px); width: 34px; height: 8px; background: var(--night-line); }
/* a sequence inside a section (the sign-up journey) puts its stops on the page line itself */
.route .after-steps { margin-left: calc(var(--lane) / -2 - 23px); }
.route .after-steps::before { display: none; }

/* ==== a real app screen in a browser frame: it lies back 6 degrees and swings flat as it arrives (site.js, GSAP scrub) ======== */
.frame-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin-bottom: var(--s-5); box-shadow: none; }
.leg-night .frame-tabs .tab { min-height: 48px; color: var(--on-sign-2); font-size: var(--t-md); }
.leg-night .frame-tabs .tab:hover, .leg-night .frame-tabs .tab[aria-selected="true"] { color: var(--on-sign); }
.leg-night .frame-tabs .tab-ink { background: var(--lamp); height: 3px; }
.frame-stage { position: relative; isolation: isolate; perspective: 1800px; perspective-origin: 50% 0; }
/* the light under the frame: amber from the left, blue from the right, faint */
.frame-stage::before, .frame-stage::after { content: ""; position: absolute; z-index: -1; bottom: -10%; height: 46%; pointer-events: none; }
.frame-stage::before { left: 2%; width: 62%; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--beam-lo), 0.2), rgba(var(--beam-lo), 0) 100%); }
.frame-stage::after { right: 2%; width: 58%; background: radial-gradient(50% 50% at 50% 50%, rgba(64, 140, 210, 0.22), rgba(64, 140, 210, 0) 100%); }
.frame { position: relative; background: #0d2131; transform-origin: 50% 0;
  box-shadow: 0 0 0 1px rgba(var(--haze), 0.16), inset 0 1px 0 rgba(var(--beam-cross), 0.28), 0 60px 110px -46px rgba(0, 0, 0, 0.85),
    0 24px 50px -30px rgba(0, 0, 0, 0.6); }
.frame-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding: 4px var(--s-4) 2px;
  color: var(--on-sign-2); font-size: var(--t-xs); font-weight: var(--w-strong); box-shadow: inset 0 -1px 0 rgba(var(--haze), 0.1); }
.frame-path::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: var(--r-round); background: var(--lamp);
  box-shadow: 0 0 0 3px rgba(var(--beam-lo), 0.25); }
.frame .tabpanel picture, .frame .tabpanel img { display: block; width: 100%; height: auto; }
.frame .tabpanel:not([hidden]) { animation: lx-fade var(--dur-state) var(--ease-standard) both; }
.frame-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: clamp(var(--s-7), 4vw, var(--s-8)); list-style: none;
  color: var(--on-sign-2); }
.frame-notes b { display: block; margin-bottom: 6px; color: var(--on-sign); font-size: var(--t-lg); }

/* ==== close-ups of the product on a bento of filled cells (one wide night cell, the rest a tone step or a lifted card) ======== */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 12px; list-style: none; }
.bento-cell { position: relative; display: flex; flex-direction: column; gap: var(--s-3); grid-column: span 2; padding: var(--s-5); overflow: hidden;
  background: var(--paper-2); }
.leg-canvas .bento-cell { background: var(--paper); box-shadow: var(--card-lift); }
.bento-cell .icon { width: 26px; height: 26px; }
.bento-name { max-width: 17em; font-size: var(--t-lg); font-weight: var(--w-strong); line-height: 1.25; }
.bento-wide { grid-column: span 4; grid-row: span 2; }
.leg-canvas .bento-night, .bento-night { background: var(--night-1); color: var(--on-sign); }
.bento-wide .bento-name { font-size: clamp(1.375rem, 2vw, 1.75rem); max-width: 14em; }
.bento-name .cover-state { display: flex; width: max-content; margin-top: 8px; border-radius: var(--r-1); }
.bento-night .cover-state { background: rgba(127, 216, 173, 0.16); color: var(--night-steady); }
.frag { margin-top: auto; }
.frag-code { font-family: var(--mono); font-size: 1.0625rem; color: var(--ink); overflow-wrap: anywhere; }
.frag-code s { display: block; color: var(--down); text-decoration-thickness: 2px; }
.frag-code code { font-size: inherit; background: none; padding: 0; }
.frag-big { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.35; }
.frag-cert { display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: 6px; padding: 8px 12px 6px; background: var(--paper); font-weight: var(--w-label);
  box-shadow: inset 0 0 0 1px var(--rule); }
.frag-tracks { display: grid; gap: 12px; }
.ft-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--t-sm); }
.ft-row b { color: var(--on-sign-2); }
.ft-row i { position: relative; display: block; height: 44px;
  background: repeating-linear-gradient(90deg, #2f9a70 0 calc(100% / 18 - 5px), transparent calc(100% / 18 - 5px) calc(100% / 18)); }
.ft-row i::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(100% / 18 * 4);
  background: var(--night-1) repeating-linear-gradient(90deg, #e2574c 0 calc(100% / 4 - 5px), transparent calc(100% / 4 - 5px) calc(100% / 4)); }
.frag-tracks .svc { justify-self: start; margin-top: 6px; }
.frag-ev { display: grid; gap: 4px; margin-top: var(--s-3); color: var(--on-sign-2); font-size: var(--t-sm); }
.frag-ev b { color: var(--night-down); font-weight: var(--w-strong); }

.leg-night .why-links, .leg-night .why-links > span { color: var(--on-sign-2); }
/* ==== three reasons, each a stop with its title: never a wall of paragraphs (DESIGN-v2.md 13, "no paragraph walls") ========= */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); list-style: none; }
.trio-item { display: grid; align-content: start; gap: var(--s-3); }
.trio-mark { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-round); color: var(--lamp);
  box-shadow: inset 0 0 0 2px rgba(var(--beam-lo), 0.6), 0 0 0 6px rgba(var(--beam-lo), 0.08); }
.trio-mark .icon { width: 24px; height: 24px; }
.trio-item h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.015em; }
.trio-item p { color: var(--ink-2); max-width: 24em; }
.leg-night .trio-item h3 { color: var(--on-sign); }
.leg-night .trio-item p { color: var(--on-sign-2); }
.leg-light .trio-mark, .leg-canvas .trio-mark, .leg-fog .trio-mark { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
/* the three reasons are three stops of one short line (design-review 2026-11-02: never the grid of icons in circles, the most common
   template there is). Each mark is the page line's own stop (its ring in the section's drawn colour, the ground inside), joined to the
   next by a stretch of line; then a title and one or two short sentences. On a narrow screen each stop sits beside its title and the
   stretches go (a second vertical line beside the page line would read as a second route). An icon still inside a mark is not shown. */
.trio-item { position: relative; }
.trio .trio-mark { width: var(--stop-d); height: var(--stop-d); margin-top: 4px; background: var(--leg-ground, var(--paper));
  box-shadow: inset 0 0 0 5px var(--travel, var(--ink)); }
.trio .trio-mark .icon { display: none; }
.trio-item:not(:last-child)::before { content: ""; position: absolute; top: calc(4px + var(--stop-d) / 2 - var(--route-w) / 2); height: var(--route-w);
  left: calc(var(--stop-d) + var(--s-2)); right: calc(var(--s-2) - var(--s-7)); background: var(--travel, var(--ink)); opacity: 0.5; }

/* ==== the rule demo on its plate ==== */
.instrument { background: var(--paper-2); padding: clamp(var(--s-5), 3vw, var(--s-7)); }
.leg-canvas .instrument { background: var(--paper); box-shadow: var(--card-lift); }
.instrument .rule-row { grid-template-columns: 92px repeat(30, minmax(0, 1fr)); gap: 4px; }
.instrument .rule-row i { height: 26px; }
.instrument .rule-readout { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.01em; }
.instrument .legend { margin-top: var(--s-5); }

/* ==== plain facts under the first action: the honest trust row (true of this site today; never logos, ratings or counts) ==== */
.trust { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: var(--s-5); list-style: none; color: var(--on-sign-2); font-size: var(--t-sm);
  font-weight: var(--w-label); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 9px; height: 9px; border-radius: var(--r-round); box-shadow: inset 0 0 0 2.5px var(--night-steady); }
.leg-light .trust, .leg-canvas .trust { color: var(--ink-2); }
.leg-light .trust li::before, .leg-canvas .trust li::before { box-shadow: inset 0 0 0 2.5px var(--steady); }

/* ==== cards on the light canvas: white, lifted; plans: the recommended one stands on the night with the screen's one lamp ===== */
.lifted { background: var(--paper); box-shadow: var(--card-lift); }
.plan-for { margin-top: 6px; color: var(--ink-2); }
.route .plans-grid { gap: 14px; margin-top: calc(var(--s-6) + 32px); align-items: stretch; }
.route .plan-cell:has(.is-rec) { margin-top: -32px; }
.route .plan { padding: var(--s-6); isolation: isolate; }
.leg-canvas .plan { background: var(--paper); box-shadow: var(--card-lift); }
.route .plan h3 { font-size: var(--t-xl); }
.route .price { margin-top: var(--s-5); }
.route .price .amt { font-size: clamp(3rem, 4.6vw, 4.25rem); }
.route .plan .btn { margin-top: var(--s-5); width: 100%; }
.route .plan .feat { margin: var(--s-5) 0 0; }
.route .plan.is-rec { background: var(--night-1); color: var(--on-sign); box-shadow: 0 40px 80px -36px rgba(8, 25, 37, 0.75);
  padding-block: calc(var(--s-6) + 40px) calc(var(--s-6) + 16px); }
.route .plan.is-rec .plan-flag { bottom: auto; top: 0; background: transparent; color: var(--lamp-soft); padding-top: var(--s-5); }
.route .plan.is-rec .plan-for, .route .plan.is-rec .price .per, .route .plan.is-rec .price-alt, .route .plan.is-rec .vat { color: var(--on-sign-2); }
.route .plan.is-rec .feat .glyph { color: var(--night-steady); }
.route .plan.is-rec :focus-visible { outline-color: var(--lamp); }
.route .test-label { display: block; margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-sm); font-weight: var(--w-label); }
.route .test-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: var(--r-round); background: var(--test); }
.trial-line { --n: 4; margin-top: var(--s-5); }
.trial-line .stop-title { font-size: var(--t-md); }
.trial-line .stop-planned .stop-title { color: var(--ink-2); }
/* questions on the canvas: each answer a lifted card, two columns */
.route .faq-list { border-top: 0; gap: 14px; }
.route .faq-item { padding: var(--s-5) var(--s-6); border-bottom: 0; }
.leg-canvas .faq-item { background: var(--paper); box-shadow: var(--card-lift); }
.route .faq-q { font-size: var(--t-lg); }
.route .ledger { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.route .ledger h3 { border-bottom: 0; padding-bottom: 0; }

/* ==== the close: the night again, the beams sweeping onto one lamp on the right, never under the words ==== */
.closing-x { overflow: clip; padding-block: clamp(96px, 12vw, 176px);
  background: radial-gradient(55% 80% at 88% 50%, rgba(var(--night-glow), 0.9), rgba(8, 25, 37, 0) 70%), var(--night-1); }
.closing-x .wrap { position: relative; z-index: 1; }
.closing-x h2 { max-width: 11.2em; font-size: clamp(2.375rem, 4.8vw, 4.25rem); line-height: 1; letter-spacing: -0.035em; }
.closing-x p { margin-top: var(--s-5); max-width: 30em; font-size: var(--t-lead); color: var(--on-sign-2); }
.closing-x .hero-cta { margin-top: var(--s-6); }
.closing-x .fine { margin-top: var(--s-3); font-size: var(--t-sm); }
.sky-close { -webkit-mask-image: linear-gradient(90deg, transparent 0 54%, #000 74%); mask-image: linear-gradient(90deg, transparent 0 54%, #000 74%); }
.sky-close::before { display: none; }
.sky-close .sky-lamp, .sky-close .sky-beam { left: 86%; top: 50%; }
.sky-close .sky-beam.a { --dir: 258deg; }
.sky-close .sky-beam.b { --dir: 286deg; }

/* ==== micro-interactions: the lamp glows round the one primary action on hover and focus; cards rise under a hovering pointer === */
.btn-lamp::before { content: ""; position: absolute; z-index: -1; inset: -14px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--beam-lo), 0.6), rgba(var(--beam-lo), 0)); opacity: 0; transform: scale(0.8);
  transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-move) var(--ease-standard); }
.btn-lamp:focus-visible::before { opacity: 1; transform: scale(1); }
@media (hover: hover) { .btn-lamp:hover::before { opacity: 1; transform: scale(1); } }
.lift, .bento-cell, .route .plan, .leg-canvas .faq-item { transition: transform var(--dur-move) var(--ease-standard); }
.lift::after, .bento-cell::after, .route .plan::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  box-shadow: 0 30px 56px -28px rgba(8, 25, 37, 0.5); transition: opacity var(--dur-state) var(--ease-standard); }
.lift { position: relative; }
@media (hover: hover) {
  .lift:hover, .bento-cell:hover, .route .plan:hover { transform: translateY(calc(-1 * var(--move-sm))); }
  .lift:hover::after, .bento-cell:hover::after, .route .plan:hover::after { opacity: 1; }
}

/* ==== the parts of a WOW section rise once as they come in (site.js; only parts below the first screen; visible without it) ==== */
.js .rise-ready [data-rise] { opacity: 0; transform: translateY(var(--move-lg)); }
.js .rise-ready [data-rise].is-in { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-scene) var(--ease-enter);
  transition-delay: calc(var(--stagger) * var(--d, 0)); }
@media print { .js .rise-ready [data-rise] { opacity: 1; transform: none; } .leg::after { transform: none; } }
/* paper: a browser prints without backgrounds unless asked, which leaves the light words of every night ground (the sign band, the
   hero, the night sections, the footer) white on white paper. The page asks for its grounds to print as drawn, so paper and a saved PDF
   read like the screen (WOW 2026-11-02, after the design review; the property is inherited, so the whole page follows) */
@media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ==== the WOW parts on narrow screens ==== */
@media (max-width: 960px) {
  .night-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lede" "copy" "stage"; grid-template-rows: none; }
  .lit-stage { margin-top: 92px; }
  .lit-stage .sky-lamp.a, .lit-stage .sky-beam.a { left: 12%; top: -70px; }
  .lit-stage .sky-lamp.b, .lit-stage .sky-beam.b { left: calc(100% - 10px); top: -74px; }
  .lit-stage .sky-beam.a { --dir: 140deg; }
  .lit-stage .sky-beam.b { --dir: 225deg; }
  .lit-stage .sky-name.a { left: calc(12% + 16px); top: -80px; }
  .lit-stage .sky-name.b { right: 26px; top: -84px; }
  /* the small sky: on a narrow screen the card is below the first screen, so a strip of night above the headline holds the two lamps,
     their beams meeting in a V just above it; a mask ends the light before the headline, so no word ever sits on it */
  .night-hero { padding-top: calc(var(--bar-h) + 104px); }
  .sky-mini { display: block; z-index: -1; left: 0; right: 0; top: var(--bar-h); bottom: auto; height: 104px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
  .sky-mini::before { display: none; }
  .sky-mini .sky-beam { --len: 420px; }
  .sky-mini .sky-lamp.a, .sky-mini .sky-beam.a { left: 14%; top: 18px; }
  .sky-mini .sky-lamp.b, .sky-mini .sky-beam.b { left: 86%; top: 12px; }
  .sky-mini .sky-beam.a { --dir: 118deg; }
  .sky-mini .sky-beam.b { --dir: 242deg; }
  .leg-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .leg-split > .station { position: relative; top: auto; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(160px, auto); }
  .bento-cell, .bento-wide { grid-column: span 2; grid-row: auto; }
  .trio, .frame-notes { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .trio-item { grid-template-columns: var(--stop-d) minmax(0, 1fr); column-gap: var(--s-4); }
  .trio-item > .trio-mark { grid-column: 1; grid-row: 1; }
  .trio-item > :not(.trio-mark) { grid-column: 2; }
  .trio-item:not(:last-child)::before { display: none; }
  .route .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .route .plan-cell:has(.is-rec) { margin-top: 0; }
  .route .faq-list { grid-template-columns: minmax(0, 1fr); }
  .trial-line { --n: 1; }
}
@media (max-width: 600px) {
  :root { --lane: 30px; --stop-d: 18px; --route-w: 3px; }
  .notice-tag { font-size: 0; gap: 0; }
  .notice-bar a { display: none; }
  .night-hero h1 { font-size: clamp(2.375rem, 10.6vw, 3rem); letter-spacing: -0.04em; }
  .night-hero .check-form .btn { padding-inline: 18px; }
  .night-hero .hero-cta .btn { width: 100%; }
  .glass { padding: var(--s-5) var(--s-4) var(--s-4); }
  .sky-beam { --len: 760px; }
  .instrument { padding: var(--s-4); }
  .instrument .rule-row { grid-template-columns: 30px repeat(30, minmax(0, 1fr)); gap: 2px; }
  .instrument .rule-row i { height: 18px; }
  .instrument .lab-long { display: none; }
  .frame-tabs .tab { font-size: var(--t-sm); padding-inline: 8px; }
  .closing-x .hero-cta .btn { width: 100%; }
  .route .faq-item { padding: var(--s-4); }
}

/* ==== soft shape and depth, shared with the app (coordinator 2026-11-02: "the site and the app feel like one product"): the
   tokens (--canvas, --r-1..4, --r-pill, --e-1/2, the lamps and halos) are core.css's (APP-WOW); the site only applies them ==== */
/* the site's own name for a card on the canvas is the app's second elevation */
:root { --card-lift: var(--e-2); }
/* the public site takes the app's soft corners: controls --r-2, cards and panels --r-3, large plates --r-4, pills --r-pill. Signs and
   bands stay square (the sign band, the notice bar, full-width sections), and so do the line's stops (round) and the status glyphs. */
.btn, .input, .select, .textarea, .scenario, .bill-pick, .seg, .menu-toggle, .copy-btn, .notice, .frag-cert { border-radius: var(--r-2); }
.bill-pick .seg-ink, .seg .seg-ink { border-radius: calc(var(--r-2) - 2px); }
.joined > .input { border-radius: var(--r-2) 0 0 var(--r-2); }
.joined > .btn { border-radius: 0 var(--r-2) var(--r-2) 0; }
.tag, .count, .badge-test, .ledger li, .chips li, .badges li, .here { border-radius: var(--r-1); }
.svc, .st-pill { border-radius: var(--r-pill); }
.plan, .pc, .bento-cell, .instrument, .rule-demo, .faq-item, .panel, .screen, .after-shot, .sheet, .statuspage, .lifted,
.mk-card, .card, .callout, .stuck, .help-band .search { border-radius: var(--r-3); }
.glass, .frame, .dialog, .drawer, .video-frame { border-radius: var(--r-4); }
.beam-launcher { border-radius: var(--r-2); }
/* PREMIUM-GATE (2026-11-02): beam.css and site/css/video.css load AFTER this sheet and draw their corners from the compat names of
   core.css (--radius-control / -card / -lg, square on a v2 page), so the two rules above lost: the film and the Ask Beam launcher and
   panel stayed square beside soft buttons and frames. The names are set again on those elements only (custom properties inherit to
   their parts), so every corner they draw is a soft-shape token, whatever the order of the sheets. */
.video-frame { --radius-lg: var(--r-4); }
.beam-launcher, .beam-panel { --radius-control: var(--r-2); --radius-card: var(--r-3); --radius-lg: var(--r-4); }
/* Ask Beam's head is `.beam-head.on-night` (shared/js/beam-panel.js): base.css and app.css paint `.on-night` navy, the v2 site never
   did, so on the public pages the head was white, its "automated assistant" line #c2d2dc on white (1.5:1) and its close button white
   on white. The head takes the sign field here, as in the app; the focus ring on it is the lamp. */
.beam-head.on-night { background: var(--sign); color: var(--on-sign); }
.beam-head.on-night :focus-visible { outline-color: var(--lamp); }
.frame > .tabpanel, .frame > .tabpanel picture, .frame > .tabpanel img { border-radius: 0 0 var(--r-4) var(--r-4); }
.frame { overflow: hidden; }
.plan-flag, .pc-flag { border-radius: var(--r-3) var(--r-3) 0 0; }
.trio-mark, .sky-lamp { border-radius: var(--r-round); }
@media (max-width: 960px) { .joined > .input { border-radius: var(--r-2) var(--r-2) 0 0; } .joined > .btn { border-radius: 0 0 var(--r-2) var(--r-2); } }

/* ==== the mark lights up as the page appears (owner 2026-11-02: "when a page loads, the logo moves"): never a splash screen ======
   CSS only, from the first paint, on the sign band's mark (the `mark:28:lit` slot: its lamp and core are named): the lamp comes on, then
   the two beams sweep in about it, 0.8 s in all; transform and opacity only, so nothing moves the layout. Off with reduced motion.
   On a later page of the same visit site.js marks the root `.mark-seen` (sessionStorage, a nicety): the beams then simply appear. */
@keyframes lx-mark-lamp { from { opacity: 0; transform: scale(0.2); } }
@keyframes lx-mark-beam-a { from { opacity: 0; transform: rotate(-28deg); } }
@keyframes lx-mark-beam-b { from { opacity: 0; transform: rotate(28deg); } }
@media (prefers-reduced-motion: no-preference) {
  .bar .wordmark :is(.mb-lamp, .mb-core) { transform-box: fill-box; transform-origin: center; animation: lx-mark-lamp var(--dur-enter) var(--ease-enter) both; }
  .bar .wordmark .mb-core { animation-delay: var(--dur-press); }
  .bar .wordmark .mb-a { transform-box: fill-box; transform-origin: 92% 100%; animation: lx-mark-beam-a calc(var(--dur-scene) * 0.7) var(--ease-enter) both;
    animation-delay: var(--dur-state); }
  .bar .wordmark .mb-b { transform-box: fill-box; transform-origin: 92% 0%; animation: lx-mark-beam-b calc(var(--dur-scene) * 0.7) var(--ease-enter) both;
    animation-delay: calc(var(--dur-state) + var(--stagger)); }
  :root.mark-seen .bar .wordmark :is(.mb-a, .mb-b, .mb-core) { animation-duration: 0ms; animation-delay: 0ms; }
}
/* the mark answers a pointer: the beams open a little about the lamp (the old hover recipe, now on the v2 band) */
.bar .wordmark .mb-a, .bar .wordmark .mb-b { transition: transform var(--dur-move) var(--ease-standard); }
@media (hover: hover) {
  .bar .wordmark:hover .mb-a { transform: rotate(-6deg); }
  .bar .wordmark:hover .mb-b { transform: rotate(6deg); }
}

/* ==== from page to page: cross-document view transitions (a browser without them simply navigates) ============================
   The sign band and the notice stay in place; the page's main part fades and rises a few pixels. A slim amber beam runs along the top
   while the next page loads (site.js marks the root `.is-leaving` when a same-site link is followed). Off with reduced motion. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.notice-bar { view-transition-name: notice-bar; }
.bar { view-transition-name: sign-band; }
main { view-transition-name: page-main; }
@keyframes lx-vt-out { to { opacity: 0; transform: translateY(calc(-1 * var(--move-md))); } }
@keyframes lx-vt-in { from { opacity: 0; transform: translateY(var(--move-md)); } }
::view-transition-old(page-main) { animation: lx-vt-out var(--dur-state) var(--ease-exit) both; }
::view-transition-new(page-main) { animation: lx-vt-in var(--dur-enter) var(--ease-enter) both; }
::view-transition-group(sign-band), ::view-transition-old(sign-band), ::view-transition-new(sign-band), ::view-transition-group(notice-bar),
::view-transition-old(notice-bar), ::view-transition-new(notice-bar) { animation-duration: 0ms; }   /* they stay in place */
body::after { content: ""; position: fixed; z-index: 120; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(var(--beam-lo), 0), var(--lamp) 40%, var(--lamp-core)); transform: scaleX(0); transform-origin: 0 50%; }
:root.is-leaving body::after { opacity: 1; transform: scaleX(0.86);
  transition: transform calc(var(--dur-scene) * 3) var(--ease-standard), opacity var(--dur-press) var(--ease-standard); }

/* ==== micro-interactions on every control of the site (owner 2026-11-02), 100-320 ms, ease-out, nothing that waits for them ==== */
/* links that stand alone (actions, footer, lists of links): an underline sweeps in from the left; links inside a sentence keep the
   underline and thicken it (they may wrap over two lines, which a sweep cannot follow) */
.btn-link, .foot a, .why-links a, .notice-bar a, .frame-notes a, .related a, .sc-next, .link-sweep { position: relative; text-decoration: none; }
.btn-link::after, .foot a::after, .why-links a::after, .notice-bar a::after, .frame-notes a::after, .related a::after, .sc-next::after,
.link-sweep::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; transform: scaleX(0.35);
  transform-origin: 0 50%; opacity: 0.55; transition: transform var(--dur-move) var(--ease-standard), opacity var(--dur-state) var(--ease-standard); }
.btn-link::after { bottom: 8px; right: 22px; }
.notice-bar a::after, .why-links a::after { transform: scaleX(1); opacity: 0.6; }
@media (hover: hover) {
  .btn-link:hover::after, .foot a:hover::after, .why-links a:hover::after, .notice-bar a:hover::after, .frame-notes a:hover::after,
  .related a:hover::after, .sc-next:hover::after, .link-sweep:hover::after { transform: scaleX(1); opacity: 1; }
}
:is(.btn-link, .foot a, .why-links a, .notice-bar a, .frame-notes a, .related a, .sc-next, .link-sweep):focus-visible::after { transform: scaleX(1); opacity: 1; }
/* buttons: the press dips (core.css); a filled button also sinks a pixel under the press */
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(calc(var(--move-xs) / 2)) scale(var(--press-scale)); }
/* fields: a soft ring of light grows round the field that has focus, the lamp's on the night (opacity, so it can ease) */
.joined, .field { position: relative; isolation: isolate; }
.joined::after, .field::after { content: ""; position: absolute; z-index: -1; inset: -5px; border-radius: calc(var(--r-2) + 5px); pointer-events: none;
  background: rgba(11, 92, 173, 0.18); opacity: 0; transform: scale(0.98); transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-move) var(--ease-standard); }
.night .joined::after, .on-sign .joined::after, .leg-night .joined::after { background: rgba(var(--beam-lo), 0.3); }
.joined:focus-within::after, .field:focus-within::after { opacity: 1; transform: none; }
/* validation: the error rises in under its field (core.css), and the field says it with its edge (instant, a colour) */
.input[aria-invalid="true"] { border-color: var(--down); }
/* disclosures: an opened answer rises in; the marker turns (core.css) */
details[open] > :not(summary) { animation: lx-rise var(--dur-enter) var(--ease-enter) both; }
/* copy buttons: a check pops in beside the word "Copied" (site.js sets .is-copied for two seconds) */
.copy-btn.is-copied::before, [data-copy].is-copied::before { content: ""; display: inline-block; width: 6px; height: 11px; margin: -3px 8px 0 2px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: lx-pop var(--dur-enter) var(--ease-enter) both; }
/* the free check and the free tools: their result rows arrive one after another */
.sc-rows > .sc-row, .sc-counts > li, .sc-cta { animation: lx-rise var(--dur-enter) var(--ease-enter) both; animation-delay: calc(var(--stagger) * var(--i, 0)); }
.sc-rows > .sc-row:nth-child(2) { --i: 1; } .sc-rows > .sc-row:nth-child(3) { --i: 2; } .sc-rows > .sc-row:nth-child(4) { --i: 3; }
.sc-rows > .sc-row:nth-child(5) { --i: 4; } .sc-rows > .sc-row:nth-child(6) { --i: 5; } .sc-rows > .sc-row:nth-child(n+7) { --i: 6; }
.sc-cta { --i: 7; }
/* the menu sheet: it drops in (above); its links rise after it, one after another */
.menu-sheet:not([hidden]) nav > * { animation: lx-rise var(--dur-enter) var(--ease-enter) both; animation-delay: calc(var(--stagger) * 0.5); }
/* Ask Beam: a short hint slides out of the launcher under a hovering pointer (not part of its name: the alt text of the content is empty) */
@media (hover: hover) {
  .beam-launcher::before { content: "Questions? Ask here" / ""; position: absolute; right: calc(100% + 10px); top: 50%; padding: 6px 10px 4px;
    border-radius: var(--r-2); background: var(--sign); color: var(--on-sign); font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap;
    box-shadow: var(--lift); pointer-events: none; opacity: 0; transform: translate(6px, -50%);
    transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-move) var(--ease-standard); }
  .beam-launcher:hover::before { opacity: 1; transform: translate(0, -50%); }
}

/* ==== WOW: a page's night head (every page that is not the landing; the landing has the night hero) =============================
   Markup: <section class="night page-hero"> with the crumbs, the h1, the lede (the answer first), the actions, a trust row. The sign
   band and the notice above it are the same night, so the head reads as one sign; the page line starts under it. */
.page-hero { overflow: clip; padding-block: clamp(48px, 6vw, 96px) clamp(56px, 6.5vw, 104px);
  background: radial-gradient(60% 90% at 82% 0%, rgba(var(--night-glow), 0.85), rgba(8, 25, 37, 0) 70%),
    linear-gradient(180deg, var(--night-floor) 0%, var(--night-1) 100%); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6; background: url("/static/shared/img/v2/grain.svg"); }
.page-hero h1 { max-width: 15em; margin-top: var(--s-4); font-size: var(--t-head); line-height: 1.02; letter-spacing: -0.035em; color: var(--on-sign); }
.page-hero .lede { margin-top: var(--s-5); max-width: 40em; font-size: var(--t-lead); line-height: 1.5; color: var(--on-sign-2); }
.page-hero .cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.page-hero .mk-crumbs, .page-hero .mk-crumbs a { color: var(--on-sign-2); }
.page-hero .trust { margin-top: var(--s-5); }

/* ==== WOW: a list of marked points (what is the same on every plan): each point its mark, never a wall of paragraphs ==== */
.marked { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-7); list-style: none; }
.marked li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.marked li > span:last-child { padding-top: 13px; }
.leg-night .marked li { color: var(--on-sign-2); }

/* ==== WOW: the pricing page's parts on the canvas: lifted cards, the recommended one on the night with the screen's one lamp ==== */
.route .pc-grid { gap: 14px; margin-top: calc(var(--s-6) + 32px); }
.leg-canvas .pc { background: var(--paper); box-shadow: var(--card-lift); border-radius: var(--r-3); }
.route .pc { isolation: isolate; transition: transform var(--dur-move) var(--ease-standard); }
@media (hover: hover) { .route .pc:hover { transform: translateY(calc(-1 * var(--move-sm))); } }
.route .pc-rec { margin-top: -32px; padding-top: calc(var(--s-6) + 40px); background: var(--night-1); color: var(--on-sign);
  box-shadow: 0 40px 80px -36px rgba(8, 25, 37, 0.75); }
.route .pc-rec .pc-flag { left: 0; right: 0; top: 0; bottom: auto; padding: var(--s-5) var(--s-6) 0; background: transparent; color: var(--lamp-soft); }
.route .pc-rec h3, .route .pc-rec .pc-price b, .route .pc-rec .pc-price > span:first-child, .route .pc-rec .pc-facts dd { color: var(--on-sign); }
.route .pc-rec .pc-for, .route .pc-rec .pc-price, .route .pc-rec .pc-alt, .route .pc-rec .pc-facts dt { color: var(--on-sign-2); }
.route .pc-rec .pc-who + .pc-who, .route .pc-rec .pc-facts { border-color: rgba(var(--haze), 0.16); }
.route .pc-rec .btn { background: var(--lamp); color: var(--on-lamp); }
.route .pc-rec .btn:hover { background: var(--lamp-soft); }
.route .pc-rec :focus-visible { outline-color: var(--lamp); }
.route .pc-rec .btn::before { content: ""; position: absolute; z-index: -1; inset: -14px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--beam-lo), 0.6), rgba(var(--beam-lo), 0)); opacity: 0; transform: scale(0.8);
  transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-move) var(--ease-standard); }
.route .pc-rec .btn:focus-visible::before { opacity: 1; transform: scale(1); }
@media (hover: hover) { .route .pc-rec .btn:hover::before { opacity: 1; transform: scale(1); } }
.route .who-row { margin-top: 0; }
.leg-canvas .who-pick, .leg-canvas .bill-pick { background: var(--paper); }
.plan-table { overflow: hidden; padding: var(--s-2) var(--s-5); }
.plan-table .table-wrap { box-shadow: none; }
.route .which { margin-top: var(--s-2); }
@media (max-width: 960px) {
  .route .pc-rec { margin-top: 0; }
  .marked { grid-template-columns: minmax(0, 1fr); }
}
/* a page that opens on a night head: the head holds the one lamp action, so the sign band's trial is outlined there (as on the landing) */
body:has(main > .page-hero:first-child) .bar .bar-trial.btn-lamp { background: transparent; color: var(--on-sign); box-shadow: inset 0 0 0 var(--rule-heavy) var(--on-sign-2); }
body:has(main > .page-hero:first-child) .bar .bar-trial.btn-lamp:hover { background: var(--sign-2); }
body:has(main > .page-hero:first-child) .bar .bar-trial.btn-lamp::before { display: none; }
/* the period and who-pays switches on the night (the pricing page's head) */
.night .bill-pick, .night .seg { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 var(--rule-heavy) rgba(var(--haze), 0.5); }
.night .bill-pick .seg-opt { color: var(--on-sign); }
.night .bill-pick .seg-opt[aria-checked="true"] { color: var(--ink); }
.night .bill-pick .seg-ink { background: var(--on-sign); }
.page-hero .who-row { margin-top: var(--s-6); }
.page-hero .who-label, .page-hero .mk-updated { color: var(--on-sign-2); }
.page-hero .mk-updated { margin-top: var(--s-2); font-size: var(--t-sm); }
/* review fixes (impeccable detect, 2026-11-02): words on the night keep their night colours; the sign-up story's quiet steps stay AA */
.leg-night .video-transcript summary { color: var(--lamp-soft); }
.route .plan.is-rec .feat .off, .route .plan.is-rec .plan-fine, .route .plan.is-rec .feat .off .glyph { color: var(--on-sign-2); }
.page-hero .lede { max-width: 34em; }   /* the reading line stays under 80 letters */
/* phone fixes (playwright at 375, 2026-11-02): the notice on one line; frame tabs that wrap keep their mark on the tab itself */
@media (max-width: 600px) {
  .notice-tag { display: none; }
  .frame-tabs .tab-ink { display: none; }
  .frame-tabs .tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--lamp); }
  .frame-bar { flex-wrap: wrap; row-gap: 4px; padding-block: 8px 6px; }
  .frame-bar .tag { white-space: nowrap; }
}

/* ==== WOW pages A (2026-11-02, the helper WOW-PAGES-A): the product pages on the WOW components =================================
   Features, how it works, use cases, freelancers, security, about, changelog, the free check and the tools, the API page, the 404 and
   the two samples. Additive: no rule of the blocks above changes (requests for them go to the coordinator). What is new here:
   - .page-hero--stage: WOW's night page head (.page-hero, one definition above) with the landing's lit stage beside it: the
     .night-hero grid, sky and glass card, at the height of its content (the band's trial is outlined by WOW's .page-hero rule);
   - the glass card's contents: .readings (one site, read), .glass-links, .glass-code;
   - .spec (one feature on a lifted card) and its fragments: .duo (two tracks), .mini-line, .cause, .chip-row, .vitals, .radar-list;
   - .also (small tiles), .guide-cards (the guides that go with a page), .frame-shot and .frame-phone, the changelog on the page line.
   Rules kept: transform and opacity only move, every duration is a token, nothing loops, a status colour always has its glyph or
   shape and its word, the glass card has its solid fallback (.glass), and every part reads without the script. */
/* the night page head with the lit stage: the trail and the title, the answer and the action on the left, the lit card on the right.
   Markup: <section class="night night-hero page-hero page-hero--stage"> (the landing's .night-hero brings the lamps after load, the
   pointer's tilt of the glass and the beams that part on scroll; WOW's .page-hero brings the head's type and the outlined band trial). */
.night-hero.page-hero--stage { min-height: 0; padding-block: calc(var(--bar-h) + clamp(28px, 4.4vw, 72px)) clamp(64px, 7vw, 116px); }
.page-hero--stage .night-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
  grid-template-areas: "title stage" "copy stage"; row-gap: clamp(20px, 2.2vw, 32px); align-items: start; }
.page-title { grid-area: title; position: relative; z-index: 2; }
.page-hero--stage h1 { font-size: clamp(2.625rem, 5.6vw, 5.25rem); line-height: 0.98; }   /* 42-84: one step above a section head (--t-head) */
.page-hero--stage .lit-stage { margin-top: clamp(96px, 9vw, 132px); align-self: start; }
.page-hero--stage .lede { margin-top: 0; }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font-size: var(--t-sm); }
.page-meta .mk-crumbs, .page-meta .mk-crumbs a, .page-meta .mk-updated { margin: 0; color: var(--on-sign-2); }
.page-meta .mk-crumbs a:hover { color: var(--on-sign); }
.page-hero .demo-label { margin-top: var(--s-4); }
.page-hero .demo-label strong { background: var(--lamp-soft); color: var(--on-lamp); }

/* the glass card of a product page: a title, the host it reads, its rows. The two beams meet on the card's head, so the light pools
   there; on the stage the glass is darker under the head (and its inner glow softer), so every word keeps AA over the brightest light
   that reaches it (measured word by word, docs/web/wow-2026-11-02/pages-a/glass-contrast.json). The solid fallback stays. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-hero--stage .glass { background: linear-gradient(180deg, rgba(6, 20, 30, 0.42), rgba(6, 20, 30, 0) 44%), rgba(11, 31, 47, 0.56); }
}
@media (prefers-reduced-transparency: reduce) { .page-hero--stage .glass { background: #102637; } }
.page-hero--stage .glass::after { opacity: 0.55; }
.glass-title { font-size: var(--t-lg); font-weight: var(--w-strong); line-height: 1.25; color: var(--on-sign); }
.glass .card-head .glass-title { flex: 1 1 14em; }
.readings { display: grid; margin-top: var(--s-4); list-style: none; }
.readings li { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) auto; gap: 2px var(--s-4); align-items: baseline; padding: 12px 0 10px;
  box-shadow: inset 0 -1px 0 rgba(214, 232, 246, 0.13); }
.readings li:last-child { box-shadow: none; }
.r-name { color: var(--on-sign-2); font-size: var(--t-sm); font-weight: var(--w-label); }
.r-val { color: var(--on-sign); font-family: var(--mono); font-size: 0.875rem; overflow-wrap: anywhere; }
.r-st { display: inline-flex; align-items: center; justify-self: end; gap: 7px; color: var(--on-sign); font-size: var(--t-xs); font-weight: var(--w-strong);
  white-space: nowrap; }
.r-st .glyph { width: 13px; height: 13px; }
.r-st.ok .glyph { color: #7fd8ad; }          /* the night status tones of the glass (6a, measured over its brightest ground) */
.r-st.regional .glyph { color: #e8a531; }
.r-st.down .glyph { color: #ff9d93; }
.r-st.unknown .glyph { color: #b7c4ce; }
.r-st.planned .glyph { color: #9cc3ea; }
.r-st.change::before { content: ""; width: 9px; height: 9px; box-shadow: inset 0 0 0 2px var(--on-sign); }   /* a hollow square: something changed */
/* a portfolio on the glass: a client's name over its sites, the host in the machine face */
.readings .client-row { padding-top: 16px; }
.readings .client-row .r-name { color: var(--on-sign); font-size: var(--t-sm); font-weight: var(--w-strong); }
.readings .client-row .r-st { color: var(--on-sign-2); font-weight: var(--w-label); }
.readings.sites li { grid-template-columns: minmax(0, 1fr) auto auto; }
.readings .r-host { color: var(--on-sign); font-family: var(--mono); font-size: 0.8125rem; font-weight: var(--w-text); overflow-wrap: anywhere; }
.readings.sites .r-val { color: var(--on-sign-2); font-family: var(--font); font-size: var(--t-xs); }
/* the rule as a table of outcomes on the glass: what each pair of readings makes */
.outcomes { width: 100%; margin-top: var(--s-4); border-collapse: collapse; font-size: var(--t-sm); }
.outcomes th { padding: 0 10px 8px 0; color: var(--on-sign-2); font-size: var(--t-xs); font-weight: var(--w-strong); text-align: left; vertical-align: bottom; }
.outcomes td { padding: 12px 10px 10px 0; vertical-align: middle; box-shadow: inset 0 1px 0 rgba(214, 232, 246, 0.13); }
.outcomes :is(th, td):last-child { padding-right: 0; }
.outcomes .r-st { white-space: normal; }
.region-read { display: inline-flex; align-items: center; gap: 8px; color: var(--on-sign-2); font-size: var(--t-xs); font-weight: var(--w-label); white-space: nowrap; }
.region-read::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 2px; }
.region-read.ok::before { background: #2f9a70; }
.region-read.fail::before { background: #e2574c; }
.region-read.none::before { background: repeating-linear-gradient(135deg, #b7c4ce 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px #b7c4ce; }
/* steps on a light plate: a vertical line with its stops; the step's text keeps a reading measure */
.steps-line .stop { padding-left: 14px; }   /* clear of the ringed stops (their ring reaches 11 px past the mark) */
.steps-line .stop-text { max-width: 34em; }
.steps-line .stop-title { font-size: var(--t-xl); }
.glass-links { display: grid; margin-top: var(--s-4); list-style: none; }
.glass-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-4); align-items: center; min-height: 52px; padding: 10px 0 8px;
  color: var(--on-sign); font-weight: var(--w-label); text-decoration: none; box-shadow: inset 0 -1px 0 rgba(214, 232, 246, 0.13); }
.glass-links li:last-child a { box-shadow: none; }
.glass-links a small { grid-column: 1; color: var(--on-sign-2); font-size: var(--t-xs); font-weight: var(--w-text); }
.glass-links .icon { grid-row: 1 / span 2; grid-column: 2; width: 18px; height: 18px; color: var(--lamp-soft); transition: transform var(--dur-move) var(--ease-standard); }
@media (hover: hover) { .glass-links a:hover .icon { transform: translateX(var(--move-sm)); } .glass-links a:hover > span { text-decoration: underline; } }
.glass-code { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-2); background: rgba(3, 12, 19, 0.55); color: #dce7ee;
  font-size: 0.8125rem; line-height: 1.6; overflow-x: auto; box-shadow: inset 0 0 0 1px rgba(214, 232, 246, 0.12); }
.glass-code code { font-size: inherit; white-space: pre; }
.glass-code .k { color: #9cc3ea; }
.glass-code .s { color: #f3d58e; }

/* a feature on a lifted card: its mark, its name, one or two sentences, a real fragment, the facts as a short list */
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.spec-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); }
.spec-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: var(--r-round); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink); }
.spec-mark .icon { width: 22px; height: 22px; }
.spec h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.15; letter-spacing: -0.012em; }   /* 24 on a desktop, like the steps */
.spec > p { color: var(--ink-2); }
.spec > p + p { margin-top: 0; }
.spec-frag { margin-block: var(--s-2); }
.spec-facts { display: grid; gap: 10px; margin-top: var(--s-2); padding-top: var(--s-4); list-style: none; color: var(--ink-2); font-size: var(--t-sm);
  box-shadow: inset 0 1px 0 var(--rule); }
.spec-facts li, .route .cl-list > li > div > p, .bento-cell .cell-lead, .also dd { max-width: var(--measure); }   /* the reading measure in a wide
   cell, tile or entry (about 70 letters) */
.spec-facts li { position: relative; padding-left: 18px; }
.spec-facts li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--ink-3); }
.spec-facts b { color: var(--ink); }
.spec .link-sweep { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: var(--w-label); }
.spec-wide { grid-column: span 2; }
/* on the night, a feature is a plate of the lit night (white 13.9:1, --on-sign-2 9.4:1 on --night-2) */
.leg-night .spec.lifted { background: var(--night-2); color: var(--on-sign); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(214, 232, 246, 0.09),
  0 30px 60px -36px rgba(0, 0, 0, 0.7); }
.leg-night .spec > p, .leg-night .spec-facts { color: var(--on-sign-2); }
.leg-night .spec-facts { box-shadow: inset 0 1px 0 rgba(214, 232, 246, 0.14); }
.leg-night .spec-facts b, .leg-night .spec h3 { color: var(--on-sign); }
.leg-night .spec-facts li::before { background: var(--on-sign-2); }
.leg-night .spec-mark { color: var(--lamp); box-shadow: inset 0 0 0 2px rgba(var(--beam-lo), 0.6), 0 0 0 6px rgba(var(--beam-lo), 0.08); }

/* fragments on a card ---------------------------------------------------------------------------------------------------------- */
/* two tracks: twelve checks per region, the failed ones red (the picture has its sentence in aria-label) */
.duo { display: grid; gap: 8px; }
.duo-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--ink-2); font-size: var(--t-xs);
  font-weight: var(--w-strong); }
/* the failed checks are a second layer over the last n squares, so the gaps stay transparent on any ground (paper, glass, night) */
.duo-row i { --sq: calc(100% / 12); display: block; height: 22px;
  background: repeating-linear-gradient(90deg, var(--duo-ok, var(--steady)) 0 calc(var(--sq) - 4px), transparent 0 var(--sq)); }
.duo-row i:is(.f1, .f2, .f3, .f4) { background:
  repeating-linear-gradient(90deg, var(--duo-fail, var(--down)) 0 calc(100% / var(--n) - 4px), transparent 0 calc(100% / var(--n))) right / calc(var(--sq) * var(--n)) 100% no-repeat,
  repeating-linear-gradient(90deg, var(--duo-ok, var(--steady)) 0 calc(var(--sq) - 4px), transparent 0 var(--sq)); }
.duo-row i.f1 { --n: 1; }
.duo-row i.f2 { --n: 2; }
.duo-row i.f3 { --n: 3; }
.duo-row i.f4 { --n: 4; }
.glass .duo { --duo-ok: #2f9a70; --duo-fail: #e2574c; margin-top: var(--s-5); }   /* the night track colours of the bento (WOW) */
.glass .duo-row { color: var(--on-sign-2); }
.duo-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; color: var(--ink-2); font-size: var(--t-sm); }
/* a short journey on a card: each stop drawn as the line diagram draws it, the stretch after it in its colour */
.mini-line { --ml-ink: var(--ink); --ml-ground: var(--paper); --ml-regional: var(--regional); --ml-down: var(--down); --ml-steady: var(--steady);
  --ml-text: var(--ink); --ml-time: var(--ink-2); display: grid; gap: 14px; list-style: none; padding-left: 32px; color: var(--ml-text); }
.bento-night .mini-line, .leg-night .mini-line, .glass .mini-line { --ml-ink: #dce7ee; --ml-ground: var(--ground, var(--night-1)); --ml-regional: #e8a531;
  --ml-down: #ff9d93; --ml-steady: #7fd8ad; --ml-text: var(--on-sign); --ml-time: var(--on-sign-2); }
.spec-bento .bento-night { --ground: var(--night-1); }
.mini-line li { position: relative; display: grid; gap: 1px; font-size: var(--t-sm); line-height: 1.35; }
.mini-line li::before { content: ""; position: absolute; z-index: 1; left: -32px; top: 0; width: 20px; height: 20px; box-sizing: border-box;
  border: 4px solid var(--ml-ink); border-radius: var(--r-round); background: var(--ml-ground); }
.mini-line li:not(:last-child)::after { content: ""; position: absolute; left: -24px; top: 18px; bottom: -16px; width: 4px; background: var(--ml-ink); }
.mini-line li[data-next="regional"]::after { background: var(--ml-regional); }
.mini-line li[data-next="down"]::after { background: var(--ml-down); }
.mini-line time { color: var(--ml-time); font-size: var(--t-xs); font-weight: var(--w-strong); }
.mini-line .ml-change::before { border-radius: 0; transform: scale(0.85); }
.mini-line .ml-regional::before { border-color: var(--ml-regional); background: linear-gradient(90deg, var(--ml-ground) 50%, var(--ml-regional) 50%); }
.mini-line .ml-down::before { border-color: var(--ml-down); box-shadow: 0 0 0 3px var(--ml-ground), 0 0 0 6px var(--ml-down); }
.mini-line .ml-alert::before { box-shadow: 0 0 0 3px var(--ml-ground), 0 0 0 6px var(--ml-ink); }
.mini-line .ml-closed::before { border-color: var(--ml-steady); background: var(--ml-steady); }
.mini-line .ml-planned::before { border-color: var(--planned-fill); border-radius: 0; transform: rotate(45deg) scale(0.72); }
.mini-line .ml-pending::before { border-style: dashed; }
.mini-line .ml-down b { color: var(--ml-down); }
/* the likely cause, what was ruled out, what could not be checked */
.cause { display: grid; gap: 0; font-size: var(--t-sm); }
.cause > div { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); gap: 2px var(--s-3); padding: 8px 0 6px; box-shadow: inset 0 -1px 0 var(--rule); }
.cause > div:last-child { box-shadow: none; }
.cause dt { color: var(--ink-2); font-weight: var(--w-label); }
.cause dd { margin: 0; color: var(--ink); font-weight: var(--w-label); }
.cause .conf { display: inline-flex; margin-left: 6px; padding: 1px 7px 0; border-radius: var(--r-1); color: var(--ink-2); font-size: var(--t-xs); box-shadow: inset 0 0 0 1px var(--edge); }
/* alert channels as chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chip-row li { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 11px 1px; border-radius: var(--r-pill); background: var(--paper-2);
  color: var(--ink); font-size: var(--t-xs); font-weight: var(--w-strong); box-shadow: inset 0 0 0 1px var(--hair); }
.chip-row li.chip-team { background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--edge); }
/* real-user speed: the three figures, each with Google's word for it */
.vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vitals > div { padding: 10px 12px 8px; border-radius: var(--r-2); background: var(--paper-2); }
.vitals dt { color: var(--ink-2); font-size: var(--t-xs); font-weight: var(--w-strong); }
.vitals dd { margin: 0; }
.vitals .v-num { font-size: var(--t-xl); font-weight: var(--w-display); letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.vitals .v-word { color: var(--ink-2); font-size: var(--t-xs); font-weight: var(--w-label); }
/* the risk radar: the most urgent first, each with its level in words */
.radar-list { display: grid; gap: 6px; list-style: none; font-size: var(--t-sm); }
.radar-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 8px 12px 6px; border-radius: var(--r-2);
  background: var(--paper-2); }
.radar-list .lvl { font-size: var(--t-xs); font-weight: var(--w-strong); }
.radar-list .lvl-critical { color: var(--down); }
.radar-list .lvl-warning { color: var(--regional); }
.radar-list .lvl-notice { color: var(--ink-2); }
.radar-list .lvl-unknown { color: var(--unknown); }
/* a row of evidence words under a fragment */
.frag-note { color: var(--ink-2); font-size: var(--t-xs); }
.leg-night .frag-note { color: var(--on-sign-2); }
.paste { padding: 10px 14px 8px; border-radius: var(--r-2); background: var(--paper-2); box-shadow: var(--e-inset); font-size: 0.875rem; line-height: 1.7; }
/* features in a bento cell: the cell's lead, its facts; half cells; the night cell keeps the night's text and lamp focus. A bento of
   these pages carries .spec-bento, so nothing here reaches the landing's bento (WOW's): the shared parts (.bento-night, .frag-code,
   .link-sweep) are styled only inside it */
.bento .bento-half { grid-column: span 3; }
.bento-cell .cell-lead { color: var(--ink-2); font-size: var(--t-sm); }
.spec-bento .bento-cell .link-sweep { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: var(--w-label); }
.bento-cell:has(.spec-facts) > .frag { margin-top: 0; }
.bento-night .cell-lead, .bento-night .spec-facts, .bento-night .frag-note { color: var(--on-sign-2); }
.bento-night .spec-facts { box-shadow: inset 0 1px 0 rgba(214, 232, 246, 0.14); }
.bento-night .spec-facts li::before { background: var(--on-sign-2); }
.spec-bento .bento-night :is(.frag-code, code, a) { color: var(--on-sign); }
.bento-night .cell-lead code { background: rgba(214, 232, 246, 0.12); }
.spec-bento .frag-code code { display: block; }   /* one machine line per code (WOW's .frag-code code keeps its straight quotes and no chip) */
.spec-bento .frag-code .was { color: var(--down); text-decoration: line-through; text-decoration-thickness: 2px; }
.spec-bento .bento-night .frag-code :is(.was, s) { color: #ff9d93; }
.spec-bento .bento-night :focus-visible { outline-color: var(--lamp); }
.spec-grid.after-frame { margin-top: clamp(var(--s-6), 4vw, var(--s-8)); }
/* what is not built, under the tiles of what is */
.gaps { margin-top: clamp(var(--s-7), 5vw, var(--s-8)); }
.gaps h3 { font-size: var(--t-xl); }
.gaps-lead { margin-top: var(--s-2); color: var(--ink-2); }
.leg-night .gaps-lead { color: var(--on-sign-2); }
.also dt .glyph { width: 16px; height: 16px; flex: none; }

/* small tiles: the rest of what is built, one sentence or two each; the two tiles of what is not built share a row (after .also, so
   the two columns win over its three) */
.also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.also-gaps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-5); }
.also > div { display: grid; align-content: start; gap: 8px; padding: var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.also dt { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); font-weight: var(--w-strong); line-height: 1.25; }
.also dt .icon { width: 20px; height: 20px; flex: none; }
.also dd { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.leg-night .also > div { background: var(--night-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(214, 232, 246, 0.09); }
.leg-night .also dt { color: var(--on-sign); }
.leg-night .also dt .icon { color: var(--on-sign-2); }
.leg-night .also dd { color: var(--on-sign-2); }

/* the guides that go with a page (web_assets.related_guides_html): a row of lifted cards, the whole card is the link */
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.guide-cards li { display: flex; }
.guide-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: var(--s-5) var(--s-5) var(--s-4); color: var(--ink); text-decoration: none; }
.guide-card:hover { text-decoration: none; }
.guide-card b { font-size: var(--t-lg); line-height: 1.25; text-wrap: balance; }
.guide-card span { color: var(--ink-2); font-size: var(--t-sm); }
.guide-card .icon { margin-top: auto; padding-top: 4px; width: 22px; height: 22px; box-sizing: content-box; color: var(--link);
  transition: transform var(--dur-move) var(--ease-standard); }
@media (hover: hover) {
  .guide-card:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .guide-card:hover .icon { transform: translateX(var(--move-sm)); }
}

/* in three columns, four guides read as two by two and a last card alone on its row spans it; only from 1101 px, where the grid has
   three columns (the :has() rule outweighs the narrow screens' rules, so it must not reach them: a phone kept two 156 px columns) */
@media (min-width: 1101px) {
  .guide-cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-cards > li:last-child:nth-child(3n+1):not(:nth-child(4)) { grid-column: 1 / -1; }
}

/* a bento cell that leads somewhere: its title is the link, stretched over the whole cell */
.cell-link { text-decoration: none; }
.cell-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) { .bento-cell:hover .cell-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } }
.cell-readings { margin-top: var(--s-2); }

/* inline code on the night keeps a night chip (core.css gives it a light one) */
.leg-night :not(pre) > code, .page-hero--stage .lede code { background: rgba(214, 232, 246, 0.14); color: var(--on-sign); }

/* a tile's facts as a short list, so no tile is a wall of words */
.tile-facts { display: grid; gap: 6px; margin-top: 8px; padding-left: 1.1em; }
.tile-facts li::marker { color: var(--ink-3); }
.leg-night .tile-facts li::marker { color: var(--on-sign-2); }
/* the use-case page's made-up morning, told twice: without proof and with it */
.morning { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.morning-card:first-child { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); }
.morning-card:first-child .mini-line { --ml-ground: var(--paper-2); }
.morning-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: var(--s-5); }
.morning-head b { font-size: var(--t-lg); }
.morning + .marked { margin-top: clamp(var(--s-7), 5vw, var(--s-8)); }

/* a short note under a section's tiles; a section's body beside its sticky head */
.leg-note { margin-top: var(--s-6); max-width: var(--measure); color: var(--ink-2); }
.leg-note strong { color: var(--ink); }
.leg-night .leg-note, .night .leg-note { color: var(--on-sign-2); }
.leg-night .leg-note strong, .night .leg-note strong { color: var(--on-sign); }
.leg-body { max-width: var(--measure); font-size: var(--t-lg); line-height: 1.5; }
/* links as tiles: the whole tile is the link (the About page's "where it stands" and "questions") */
.link-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; }
.link-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.link-tiles li { display: flex; }
.link-tile { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: var(--s-5); border-radius: var(--r-3); color: var(--ink);
  text-decoration: none; }
.link-tile:hover { text-decoration: none; }
.link-tile b { font-size: var(--t-lg); }
.link-tile span { color: var(--ink-2); font-size: var(--t-sm); }
.link-tile .icon { margin-top: auto; padding-top: 6px; width: 22px; height: 22px; box-sizing: content-box; color: var(--link);
  transition: transform var(--dur-move) var(--ease-standard); }
.leg-night .link-tile { background: var(--night-2); color: var(--on-sign); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(214, 232, 246, 0.09);
  transition: transform var(--dur-move) var(--ease-standard); }
.leg-night .link-tile span { color: var(--on-sign-2); }
.leg-night .link-tile .icon { color: var(--lamp-soft); }
@media (hover: hover) {
  .link-tile:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .link-tile:hover .icon { transform: translateX(var(--move-sm)); }
  .leg-night .link-tile:hover { transform: translateY(calc(-1 * var(--move-sm))); }
}
/* numbered rules, each a short sentence beside its number on the page's light ground */
.rules-list { display: grid; gap: 12px; list-style: none; }
.rules-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.rule-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-round); box-shadow: inset 0 0 0 2px var(--ink);
  font-weight: var(--w-display); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rules-list p { padding-top: 8px; color: var(--ink-2); }
/* "At a glance" on the glass: four facts, each a label over its value */
.glance-list { display: grid; margin-top: var(--s-4); }
.glance-list > div { padding: 12px 0 10px; box-shadow: inset 0 -1px 0 rgba(214, 232, 246, 0.13); }
.glance-list > div:last-child { box-shadow: none; }
.glance-list dt { color: var(--on-sign-2); font-size: var(--t-xs); font-weight: var(--w-strong); }
.glance-list dd { margin: 2px 0 0; color: var(--on-sign); font-weight: var(--w-label); }
/* the newest entries on the glass, and the changelog's tags on the night */
.glass .glass-line { margin-top: var(--s-5); }
.glass .cl-kind { margin-left: 6px; background: rgba(214, 232, 246, 0.14); color: var(--on-sign); }
/* machine values on the glass keep the machine face and their straight quotes */
.r-val code { padding: 0; background: none; color: inherit; font-size: inherit; }
/* how to read a result: three tiles, each opening with the result's word and mark */
.read-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; }
.read-tile { padding: var(--s-5); }
.read-tile p { color: var(--ink-2); }
.read-tile .st { display: inline-flex; vertical-align: baseline; }

/* a real screen alone in its frame (no tabs), or the phone capture in a phone */
.frame-shot, .frame-shot picture, .frame-shot img { display: block; width: 100%; height: auto; }
.frame-phone { width: min(100%, 360px); margin-inline: auto; padding: 0 10px 10px; border-radius: 30px; }
.frame-phone .frame-bar { min-height: 40px; padding-inline: 8px; }
.frame-phone .frame-shot img { border-radius: 20px; }
.frame-notes.notes-near { margin-top: clamp(var(--s-6), 3.4vw, var(--s-7)); }   /* these pages' notes sit nearer their frame (the landing keeps WOW's) */

/* a light plate for a demo or a long line (the rule demo, the steps); the night variant of the plate is the glass */
.plate { padding: clamp(var(--s-5), 3vw, var(--s-7)); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--card-lift); }
.plate .line-v { --ground: var(--paper); }

/* the changelog on the page line: each entry is a stop of the route itself */
.route .cl-list { padding-left: 0; max-width: 56rem; }
.route .cl-list::before { content: none; }
.route .cl-list > li::before { left: calc(var(--lane) / -2 - 11px); top: 2px; width: 22px; height: 22px; box-sizing: border-box; border: 5px solid var(--ink);
  background: var(--leg-ground, var(--paper)); }
.route .cl-list > li > div { padding: var(--s-4) var(--s-5) var(--s-4); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.leg-canvas .cl-list > li > div { box-shadow: var(--card-lift); }

/* the free check and the tools under a night hero: the form is the hero's action (the landing's .check-form), the result follows */
.page-hero--stage .check-form { margin-top: var(--s-6); max-width: 36rem; }
.page-hero--stage .check-form .label { color: var(--on-sign); font-size: var(--t-sm); }
.page-hero--stage .check-form .input { border: 0; min-height: 60px; background: #fff; box-shadow: inset 0 0 0 2px #fff; }
.page-hero--stage .check-form .btn { min-height: 60px; padding-inline: 26px; font-size: var(--t-lg); }
.page-hero--stage .check-form .hint, .page-hero--stage .scan-live { color: var(--on-sign-2); }
.page-hero--stage .check-form .hint { font-size: var(--t-xs); max-width: 36rem; }
.page-hero--stage .field-error { color: #ffb4ab; }
.results-leg:not([hidden]) { padding-block: var(--s-7) var(--s-8); background: var(--paper-2); }
.results-leg > .sc-wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* a reading page's answer on the night head (the API page, the 404): the answer first, in the head's lead */
.page-hero--stage .vs-answer { margin-top: 0; max-width: 34em; font-size: var(--t-lead); line-height: 1.5; color: var(--on-sign-2); }
.page-hero--stage .vs-answer code { background: rgba(214, 232, 246, 0.14); color: var(--on-sign); }
.page-hero--stage .leg-note { margin-top: var(--s-4); font-size: var(--t-sm); }
.api-doc { padding-bottom: 0; }
/* wide tables keep readable columns on a phone: they scroll inside their focusable region instead of squeezing a column to a word */
.api-doc .prose .table-wrap table { min-width: 720px; }
.plate .table-wrap .table { min-width: 680px; }
.plate .table code { white-space: nowrap; overflow-wrap: normal; }
.api-body { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }
/* the status page sample: the real page in a browser frame (no swing: it is tall), its own light inside */
.sample-browser { max-width: 1040px; margin-inline: auto; }
.sample-browser .status-page { border-radius: 0 0 var(--r-4) var(--r-4); }

/* the 404: the end of the line, drawn on the night */
.end-line { display: flex; align-items: center; width: min(320px, 70%); margin-bottom: var(--s-5); }
.end-line::before { content: ""; flex: 1; height: 6px; background: linear-gradient(90deg, rgba(220, 231, 238, 0), #dce7ee 60%); }
.end-line::after { content: ""; width: 10px; height: 34px; border-radius: 2px; background: #dce7ee; }

/* the WOW pages A parts on narrow screens */
@media (max-width: 1100px) {
  .spec-grid, .read-tiles, .link-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .also, .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .morning { grid-template-columns: minmax(0, 1fr); }
  .page-hero--stage .night-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "title" "copy" "stage"; }
  .page-hero--stage .lit-stage { margin-top: 104px; }
  .spec-grid.two { grid-template-columns: minmax(0, 1fr); }
  .bento .bento-half { grid-column: span 2; }
}
@media (max-width: 700px) {
  .spec-grid, .also, .also-gaps, .guide-cards, .read-tiles, .link-tiles, .link-tiles.two { grid-template-columns: minmax(0, 1fr); }
  .guide-cards > li:last-child:nth-child(odd) { grid-column: auto; }
  .spec-wide { grid-column: auto; }
  .vitals { grid-template-columns: minmax(0, 1fr); }
  .readings li { grid-template-columns: minmax(0, 1fr) auto; }
  .readings .r-val { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
  .page-hero--stage h1 { font-size: clamp(2.25rem, 10vw, 2.75rem); }
  .spec { padding: var(--s-5) var(--s-4) var(--s-4); }
  .cause > div { grid-template-columns: minmax(0, 1fr); }
  .route .cl-list > li { grid-template-columns: minmax(0, 1fr); }
}

/* ==== WOW pages B (2026-11-02): the reading pages on the WOW system =============================================================
   Guides, the glossary, the alternatives and the comparisons, the help centre, the contact page and the legal drafts (DESIGN-v2.md
   13, "WOW pages B"). One shape for every reading page: a calm night head band whose station is the page's heading (the page line
   starts there), the answer first in a lit card beside it; then the reading body on paper, where the contents ride the page line as a
   sticky rail on wide screens (each section a stop, the one being read the lamp on a navy ring) and the column keeps about 70 letters a
   line; callouts, tables, comparison grids and answers are lifted cards; related pages follow as cards on the light canvas, each group
   a station; the night close ends the line. The legal drafts open on a light band instead and number their sections. Rules kept:
   transform and opacity only move, every duration is a token, the lamp on paper only inside a navy ring, no light under text, bands
   square, cards --r-3, controls --r-2. Markup: web_content.py, web_help.py, site/vs/*.html, site/legal/*.html. */

/* -- the head band: the night lit from above, its grain, the sign band clear over it until the page moves (body.night-top) -- */
.rd-page { padding-bottom: 0; }
.rd-head { margin-top: calc(-1 * var(--bar-h)); padding-block: calc(var(--bar-h) + clamp(12px, 2vw, 28px)) clamp(48px, 6vw, 88px);
  background: url("/static/shared/img/v2/grain.svg"), radial-gradient(55% 120% at 84% -12%, rgba(30, 72, 99, 0.75), rgba(8, 25, 37, 0) 72%),
    linear-gradient(180deg, #0a2030 0%, var(--night-1) 72%); }
.rd-head::before, .rd-head::after { top: var(--bar-h); }   /* the line starts under the sign band, never through the name in it */
.rd-head .crumbs, .rd-page .help-hero .crumbs { padding-top: 0; align-items: center; color: var(--on-sign-2); }
.rd-head .crumbs > span:last-child { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-head .crumbs a { color: var(--on-sign-2); }
.rd-head .crumbs a:hover { color: var(--on-sign); }
.rd-head code { padding: 1px 6px; border-radius: var(--r-1); background: rgba(255, 255, 255, 0.1); color: var(--on-sign); }
/* the opening: the station (kind and heading) and what follows it on the left, the page's card on the right from 1100 px */
.rd-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(3, auto) 1fr;
  column-gap: clamp(32px, 5vw, 88px); margin-top: clamp(20px, 3vw, 40px); }
.rd-top > * { grid-column: 1; }
.rd-top > .rd-card { grid-column: 2; grid-row: 1 / -1; align-self: start; }
.rd-station { max-width: none; }
.rd-station::before { content: none; }   /* the stop is the heading's own (below), so it sits on the heading's first line */
.rd-head h1 { position: relative; max-width: 20ch; font-size: clamp(2.375rem, 4.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.035em;
  color: var(--on-sign); text-wrap: balance; }
.rd-head h1::before { content: ""; position: absolute; z-index: 1; left: calc(var(--lane) / -2 - var(--stop-d) / 2); top: calc(0.51em - var(--stop-d) / 2);
  width: var(--stop-d); height: var(--stop-d); border-radius: var(--r-round); background: var(--leg-ground, var(--night-1));
  box-shadow: inset 0 0 0 5px var(--travel, #dce7ee); transition: transform var(--dur-move) var(--ease-standard); }
.rd-station.is-passed h1::before { background: var(--travel, #dce7ee); }
.rd-station.is-here h1::before { background: var(--lamp); transform: scale(1.18);
  box-shadow: inset 0 0 0 5px var(--sign), 0 0 0 6px rgba(var(--beam-lo), 0.3), 0 0 28px 8px rgba(var(--beam-lo), 0.42); }
.rd-head .byline { margin-top: var(--s-4); color: var(--on-sign-2); }
.rd-top > .vs-answer { margin-top: var(--s-5); max-width: 34em; font-size: var(--t-lead); line-height: 1.55; color: var(--on-sign); }
.rd-top > .fine { margin-top: var(--s-5); max-width: 40em; color: var(--on-sign-2); font-size: var(--t-xs); }
.rd-top > .vs-note { margin-top: var(--s-5); max-width: 40em; padding: var(--s-4) var(--s-5) var(--s-3); border-radius: var(--r-3);
  background: rgba(194, 210, 220, 0.08); color: var(--on-sign-2); box-shadow: inset 0 0 0 1px rgba(214, 232, 246, 0.14); }
/* the page's card: the answer (help, comparisons), the definition (glossary): a raised plate of the night with a light top edge */
.rd-card { position: relative; isolation: isolate; margin: 0; padding: clamp(var(--s-5), 2.4vw, var(--s-6)); border-radius: var(--r-3); color: var(--on-sign);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025) 60%), #0d2536;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.42), inset 0 0 0 1px rgba(214, 232, 246, 0.14), 0 44px 80px -44px rgba(0, 0, 0, 0.85); }
.rd-card::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(46% 34% at 78% 0%, rgba(var(--beam-lo), 0.14), rgba(var(--beam-lo), 0) 100%); }
.rd-label { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-3); color: var(--on-sign-2); font-size: var(--t-xs);
  font-weight: var(--w-strong); letter-spacing: 0.02em; }
.rd-label::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: var(--r-round); box-shadow: inset 0 0 0 2.5px var(--lamp-soft); }
.rd-card .vs-answer { margin: 0; max-width: none; font-size: var(--t-lead); line-height: 1.55; color: var(--on-sign); }
.rd-card :focus-visible { outline-color: var(--lamp); }
.rd-def dl { margin: 0; }
.rd-def dt { font-size: clamp(1.75rem, 2.6vw, 2.375rem); font-weight: var(--w-display); line-height: 1.08; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.rd-def dfn { font-style: normal; }
.rd-def dd { margin: var(--s-3) 0 0; font-size: var(--t-lead); line-height: 1.55; color: var(--on-sign-2); }

/* -- the reading body: paper; the contents ride the page line; the column keeps the measure -------------------------------- */
.rd-body { padding-block: clamp(40px, 5vw, 64px) clamp(72px, 8vw, 112px); }
.rd-body .doc { border-top: 0; padding-top: 0; column-gap: clamp(32px, 4vw, 56px); }
.rd-body .doc-aside:not(.end) { top: calc(var(--bar-h) + var(--s-6)); }
.rd-body .toc .toc-head { margin-bottom: var(--s-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: var(--w-strong); }
.rd-body .toc ol { padding-left: 0; }
.rd-body .toc ol::before { content: none; }   /* the page line is the contents' line */
.rd-body .toc li::before { z-index: 2; left: calc(var(--lane) / -2 - 7px); top: 11px; transition: transform var(--dur-move) var(--ease-standard); }
.rd-body .toc li.is-passed::before { border-color: var(--ink); background: var(--ink); }
.rd-body .toc li.is-here::before { border-color: var(--sign); background: var(--lamp); transform: scale(1.22); box-shadow: 0 0 0 4px rgba(var(--beam-lo), 0.3); }
.rd-body .toc a { padding: 7px 0 6px; }
.rd-body .toc-progress { z-index: 1; left: calc(var(--lane) / -2 - var(--route-w) / 2); width: var(--route-w); top: 18px; height: calc(100% - 36px); }
@media (min-width: 961px) { .rd-body.leg:has(.doc-aside .toc)::after { display: none; } }   /* wide: the rail draws the progress */
/* the column */
.rd-body .prose h2, .rd-body .help-prose h2 { font-size: clamp(1.625rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
.rd-body .prose :not(pre) > code, .rd-body .help-prose :not(pre) > code { padding: 1px 6px; border-radius: var(--r-1); background: var(--canvas); }
.rd-body .prose pre { border-radius: var(--r-3); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hair); }
.rd-body .prose .callout, .rd-body .help-prose .callout { padding: var(--s-5) var(--s-5) var(--s-4) calc(var(--s-5) + 6px); border-radius: var(--r-3);
  background: var(--paper); box-shadow: inset 4px 0 0 var(--ink), var(--e-2); }
/* tables and the comparison grid: a lifted card; the product's column carries the night head and a faint tint */
.rd-body .prose .table-wrap { border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); }
.rd-body .prose table { font-size: var(--t-sm); }
.rd-body .prose thead th { padding: 14px 14px 12px; border-bottom: 1px solid var(--hair); background: var(--raise); color: var(--ink-2); }
.rd-body .prose td, .rd-body .prose tbody th { padding: 14px; border-bottom: 1px solid var(--hair); }
.rd-body .prose tbody tr:last-child > * { border-bottom: 0; }
.rd-body .prose table caption { padding: var(--s-4) 14px var(--s-3); }
.rd-body .prose.vs-wide .vs-table thead th:nth-child(2) { background: var(--night-1); color: var(--on-sign); }
.rd-body .prose.vs-wide .vs-table thead th:nth-child(2)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0;
  border-radius: var(--r-round); background: var(--lamp); box-shadow: 0 0 0 3px rgba(var(--beam-lo), 0.25); }
.rd-body .prose.vs-wide .vs-table td[data-label]:nth-child(2) { background: #f5f8fa; box-shadow: inset 1px 0 0 var(--hair), inset -1px 0 0 var(--hair); }
.rd-body .vs-table td.src { width: 17%; min-width: 9.5rem; font-size: var(--t-xs); overflow-wrap: normal; }
.rd-body .vs-table tbody th { width: 15%; }
/* two cards side by side: who each tool is for, when to choose which; the product's card stands on the night */
.rd-body .vs-two { gap: 14px; }
.rd-body .prose .vs-two { max-width: 52rem; }
.rd-body .vs-two > div { padding: var(--s-6); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); }
.rd-body .vs-two > div:last-child { background: radial-gradient(90% 70% at 100% 0%, rgba(30, 72, 99, 0.85), rgba(8, 25, 37, 0) 70%), var(--night-1);
  color: var(--on-sign); box-shadow: 0 30px 60px -32px rgba(8, 25, 37, 0.6); }
.rd-body .vs-two > div:last-child h3 { color: var(--on-sign); }
.rd-body .vs-two > div:last-child p { color: var(--on-sign-2); }
.rd-body .vs-two > div:last-child :focus-visible { outline-color: var(--lamp); }
/* the questions: each answer a lifted card (open, never an accordion) */
.rd-body .prose .faq-list { gap: 12px; }
.rd-body .prose .faq-item { padding: var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.rd-body .prose .faq-q { margin-top: 0; }
/* sources: numbered, on the canvas */
.rd-body .prose section[aria-labelledby="sources"], .rd-body .prose section#how-we-checked { padding: var(--s-6); border-radius: var(--r-3); background: var(--canvas); }
.rd-body .vs-sources { list-style: none; padding-left: 0; counter-reset: rd-src; }
.rd-body .vs-sources li { position: relative; padding-left: 38px; counter-increment: rd-src; }
.rd-body .vs-sources li::before { content: counter(rd-src); position: absolute; left: 0; top: 1px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding-top: 2px; border-radius: var(--r-1); background: var(--paper); color: var(--ink-2); font-size: var(--t-xs);
  font-weight: var(--w-strong); box-shadow: inset 0 0 0 1px var(--hair); }
/* "How the product helps": the product's own paragraph on the night, a card */
.rd-body .prose section.helps { position: relative; border-radius: var(--r-3); box-shadow: 0 30px 60px -32px rgba(8, 25, 37, 0.55);
  background: radial-gradient(80% 90% at 100% 0%, rgba(30, 72, 99, 0.85), rgba(8, 25, 37, 0) 70%), var(--night-1); }
.rd-body .prose section.helps :focus-visible { outline-color: var(--lamp); }
/* the next step beside the column on wide screens: a lifted card (the night close carries it on narrow ones) */
.rd-body .doc-aside.end .vs-cta { padding: var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); }
.rd-aside-t { margin-bottom: var(--s-2); font-weight: var(--w-strong); }

/* -- related pages: each group a station on the light canvas, each page a lifted card that is one link -------------------- */
.rd-more { --t-head: clamp(1.75rem, 2.8vw, 2.5rem); padding-block: clamp(56px, 6vw, 88px); }
.rd-more + .rd-more { padding-top: 0; background: var(--leg-ground); }
.rd-more .station { margin-bottom: var(--s-6); }
.rd-more .leg-lead { margin-top: var(--s-3); font-size: var(--t-md); }
.rd-cards, .rd-page .rd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; padding: 0;
  list-style: none; border-top: 0; }
.rd-hub .rd-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }   /* a hub: three cards a row on a wide screen */
.rd-page .leg + .leg { margin-top: 0; }   /* the bands of the page line touch (the older hubs spaced their sections) */
.rd-cards > li { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 100%; padding: var(--s-5) var(--s-5) calc(var(--s-5) + 22px);
  border: 0; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); transition: transform var(--dur-move) var(--ease-standard); }
.rd-cards > li::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 30px 56px -28px rgba(8, 25, 37, 0.45); transition: opacity var(--dur-state) var(--ease-standard); }
.rd-cards > li::after { content: ""; position: absolute; right: var(--s-5); bottom: var(--s-5); width: 9px; height: 9px; border: solid var(--ink-2);
  border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform var(--dur-move) var(--ease-standard); }
.rd-cards a { color: var(--ink); font-size: var(--t-lg); font-weight: var(--w-strong); line-height: 1.3; text-decoration: none; }
.rd-cards a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the link */
.rd-cards span { color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); }
.rd-cards .rd-meta { margin-top: auto; padding-top: var(--s-2); color: var(--ink-3); font-size: var(--t-xs); font-weight: var(--w-label); }
@media (hover: hover) {
  .rd-cards > li:hover { transform: translateY(calc(-1 * var(--move-sm))); }
  .rd-cards > li:hover::before { opacity: 1; }
  .rd-cards > li:hover::after { transform: translateX(var(--move-xs)) rotate(45deg); }
  .rd-cards > li:hover a { text-decoration: underline; text-decoration-thickness: 2px; }
}

/* -- the close: the night again; the line ends; one action ------------------------------------------------------------------- */
.rd-close { padding-block: clamp(72px, 9vw, 128px); }
.rd-close h2 { max-width: 12em; }

/* a column without a contents rail (a glossary term): each section is a station of the page line at every width */
.rd-body .doc-plain > .prose > section:not(.helps) { position: relative; }
.rd-body .doc-plain > .prose > section:not(.helps)::before { content: ""; position: absolute; z-index: 1; left: calc(var(--lane) / -2 - 8px);
  top: calc(clamp(1.625rem, 2.4vw, 2rem) * 0.53 - 8px); width: 16px; height: 16px; border-radius: var(--r-round); background: var(--paper);
  box-shadow: inset 0 0 0 3.5px var(--ink); }

.rd-body .doc-plain > .prose > section[aria-labelledby="sources"]::before { top: calc(var(--s-6) + clamp(1.625rem, 2.4vw, 2rem) * 0.53 - 8px); }

/* -- the help answer: the steps ride the page line; the topic beside the answer is a line, this answer the lamp ------------ */
.rd-body .help-art { width: auto; margin: 0; padding: 0; border-top: 0; column-gap: clamp(32px, 5vw, 80px); }
.rd-body .help-prose > section > h2, .rd-body .help-prose > h2 { position: relative; }
.rd-body .help-prose > section > h2::before, .rd-body .help-prose > h2::before { content: ""; position: absolute; z-index: 1;
  left: calc(var(--lane) / -2 - 8px); top: calc(0.53em - 8px); width: 16px; height: 16px; border-radius: var(--r-round); background: var(--paper);
  box-shadow: inset 0 0 0 3.5px var(--ink); }
.rd-body .help-prose ol.vs-list { padding-left: 0; }
.rd-body .help-prose ol.vs-list::before { content: none; }
.rd-body .help-prose ol.vs-list > li::before { z-index: 1; left: calc(var(--lane) / -2 - 19px); }
.rd-body .help-side { top: calc(var(--bar-h) + var(--s-6)); padding: var(--s-5); border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); }
.rd-body .help-side ul { position: relative; padding-left: 26px; }
.rd-body .help-side ul::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 16px; width: 3px; background: var(--paper-3); }
.rd-body .help-side li { position: relative; }
.rd-body .help-side li::before { content: ""; position: absolute; z-index: 1; left: -26px; top: 11px; width: 13px; height: 13px; border-radius: var(--r-round);
  background: var(--paper); box-shadow: inset 0 0 0 3px var(--edge); }
.rd-body .help-side li:has(a[aria-current="page"])::before { background: var(--lamp); transform: scale(1.2);
  box-shadow: inset 0 0 0 3px var(--sign), 0 0 0 4px rgba(var(--beam-lo), 0.3); }
.rd-body .help-side a[aria-current="page"] { padding-left: 0; box-shadow: none; }
.rd-head .help-chip { margin: 0 0 var(--s-4); }
.rd-head .help-chip a { min-height: 32px; border-radius: var(--r-1); background: rgba(194, 210, 220, 0.14); color: var(--on-sign); }
.rd-head .help-chip a:hover { background: rgba(194, 210, 220, 0.22); }
.rd-head .help-head, .rd-head .help-head-in { width: auto; margin: 0; padding: 0; background: none; }
.rd-head .help-head h1 { margin-top: 0; }
.rd-head .help-head-in.rd-top { margin-top: clamp(20px, 3vw, 40px); }
.rd-body .prose > section[id], .rd-more h2 { scroll-margin-top: calc(var(--bar-h) + var(--s-5)); }

/* -- the hubs: the hub's card beside the heading (its topics, its letters, how we compare); a letter is a station ----------- */
.rd-card > p { color: var(--on-sign-2); }
.rd-card .rd-label + p { margin-top: 0; }
.rd-index ol { display: grid; margin: 0; padding: 0; list-style: none; }
.rd-index li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); box-shadow: inset 0 -1px 0 rgba(214, 232, 246, 0.12); }
.rd-index li:last-child { box-shadow: none; }
.rd-index a { display: flex; flex: 1; align-items: center; min-height: 44px; padding-top: 2px; color: var(--on-sign); font-weight: var(--w-label); text-decoration: none; }
.rd-index a:hover { text-decoration: underline; }
.rd-index li > span { color: var(--on-sign-2); font-size: var(--t-xs); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.rd-az ol { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-az li { box-shadow: none; }
.rd-az a { flex: none; justify-content: center; min-width: 44px; border-radius: var(--r-2); background: rgba(194, 210, 220, 0.1);
  box-shadow: inset 0 0 0 1px rgba(214, 232, 246, 0.16); font-size: var(--t-md); font-weight: var(--w-strong); }
.rd-az a:hover { background: rgba(194, 210, 220, 0.2); text-decoration: none; }
.rd-letter { --t-head: clamp(2.5rem, 4vw, 3.25rem); padding-block: clamp(36px, 4vw, 52px); }
.rd-letter .station { margin-bottom: var(--s-4); }
.rd-more h2 .ico { width: 0.8em; height: 0.8em; margin: 0 0.3em 0.06em 0; vertical-align: middle; }

/* -- the legal drafts: a light band (a document, not a pitch), the version beside the heading, numbered sections ------------- */
.rd-head.rd-light { margin-top: 0; padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 64px); color: var(--ink);
  background: radial-gradient(90% 46% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 100%), var(--canvas); }
.rd-head.rd-light::before, .rd-head.rd-light::after { top: 0; }
.rd-light h1 { max-width: 18ch; color: var(--ink); }
.rd-light .rd-top > .draft-banner { margin-top: var(--s-5); max-width: 46rem; border-radius: var(--r-3); box-shadow: inset 0 0 0 1px rgba(107, 63, 160, 0.16); }
.rd-light .rd-top > .legal-version { grid-column: 2; grid-row: 1 / -1; align-self: start; display: grid; gap: 6px; margin: 0; padding: var(--s-5);
  border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); color: var(--ink); font-size: var(--t-md); font-weight: var(--w-label); }
.rd-light .rd-top > .legal-version::before { content: "Version"; color: var(--ink-3); font-size: var(--t-xs); font-weight: var(--w-strong); }
.rd-light .rd-top > .legal-version.in-force::before { content: none; }   /* "Version 1, in force from ..." says it (api/web_launch.py) */
.legal.rd-page .prose { counter-reset: rd-sec; }
.legal.rd-page .prose > section { counter-increment: rd-sec; }
.rd-light .rd-top { margin-top: 0; }
.legal.rd-page .prose > section > h2::before { content: counter(rd-sec) "."; display: inline-block; min-width: 1.35em; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.legal.rd-page .toc ol { counter-reset: rd-toc; }
.legal.rd-page .toc li { counter-increment: rd-toc; }
.legal.rd-page .toc a::before { content: counter(rd-toc) "."; display: inline-block; min-width: 1.6em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-body > .route-end { top: auto; bottom: 0; }   /* a page without a night close ends its line where the body ends */

/* -- the help centre's hub and the contact page: the night band with the search, the topics on the canvas ------------------ */
.rd-page .help-hero { margin-top: calc(-1 * var(--bar-h)); padding-block: calc(var(--bar-h) + clamp(16px, 2.4vw, 32px)) clamp(48px, 6vw, 88px);
  background: url("/static/shared/img/v2/grain.svg"), radial-gradient(55% 120% at 84% -12%, rgba(30, 72, 99, 0.75), rgba(8, 25, 37, 0) 72%),
    linear-gradient(180deg, #0a2030 0%, var(--night-1) 72%); }
.rd-page .help-hero h1 { margin-top: clamp(20px, 3vw, 40px); font-size: clamp(2.5rem, 5.4vw, 4.5rem); letter-spacing: -0.035em; }
.rd-page .help-hero .vs-answer { font-size: var(--t-lead); }
.rd-page .help-box input { border: 0; border-radius: var(--r-2); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8); }
.rd-page .help-popular a { border-radius: var(--r-pill); }
.rd-page .help-body { width: auto; margin: 0; padding: 0; }
.rd-results:not([hidden]) { padding-block: clamp(40px, 5vw, 64px) clamp(64px, 7vw, 96px); }
.rd-results .help-results { display: grid; gap: 12px; border-top: 0; }
.rd-results .help-results li { padding: var(--s-4) var(--s-5); border: 0; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); }
.rd-results .help-results li.is-active { box-shadow: inset 0 0 0 2px var(--ink), var(--e-2); }
.rd-results .help-empty { border-radius: var(--r-3); }
.rd-page .help-topics { gap: 14px; }
.rd-page .topic { border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); }
.rd-page .topic:hover { background: var(--paper); }
.rd-page .topic-icon { color: var(--ink); }
.rd-band { background: radial-gradient(90% 46% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 100%), var(--canvas); }
.rd-band .contact-grid { padding-block: clamp(48px, 6vw, 80px) clamp(72px, 8vw, 112px); }
.rd-band .contact-card { border-radius: var(--r-3); box-shadow: var(--e-2); }
.rd-band .side-card { border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-1); }
.rd-page .help-form :is(input[type="text"], input[type="email"], input[type="url"], select, textarea) { border-radius: var(--r-2); }
.rd-page .help-report, .rd-page .help-done:not([hidden]) { border-radius: var(--r-3); }

/* -- narrow screens ---------------------------------------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .rd-body .doc > .doc-aside.end { display: none; }   /* the night close carries the next step */
}
@media (max-width: 1099px) {
  .rd-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .rd-top > .rd-card { grid-column: 1; grid-row: auto; margin-top: var(--s-6); }
  .rd-light .rd-top > .legal-version { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s-5); }
}
@media (max-width: 960px) {
  .rd-body .doc { row-gap: var(--s-7); }
  .rd-body .doc > .doc-aside:not(.end) { padding: var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-3); background: var(--raise);
    box-shadow: inset 0 0 0 1px var(--hair); }
  .rd-body .doc > .doc-aside:not(.end) .toc li::before { left: calc(var(--lane) / -2 - var(--s-5) - 7px); }
  .rd-body .doc > .doc-aside:not(.end) .toc-progress { left: calc(var(--lane) / -2 - var(--s-5) - var(--route-w) / 2); }
  /* each section of the column is a station on the line */
  .rd-body .prose > section:not(.helps) { position: relative; }
  .rd-body .prose > section:not(.helps)::before { content: ""; position: absolute; z-index: 1; left: calc(var(--lane) / -2 - 8px);
    top: calc(clamp(1.625rem, 2.4vw, 2rem) * 0.53 - 8px); width: 16px; height: 16px; border-radius: var(--r-round); background: var(--paper);
    box-shadow: inset 0 0 0 3.5px var(--ink); }
  .rd-body .help-art { row-gap: var(--s-7); }
  .rd-body .prose > section:is([aria-labelledby="sources"], #how-we-checked)::before { top: calc(var(--s-6) + clamp(1.625rem, 2.4vw, 2rem) * 0.53 - 8px); }
}
/* touch: a link that stands alone (a row's source, a cited document, the topic line beside an answer) is a 44 px target */
@media (max-width: 960px), (pointer: coarse) {
  .rd-body .vs-table td.src a, .rd-body .vs-sources li > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
  .rd-head .help-chip a { min-height: 44px; }   /* PREMIUM-GATE: the night head's topic chip (32 px above) is a 44 px target on touch */
}
@media (max-width: 720px) {
  .rd-body .prose .table-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .rd-body .vs-table tr { margin-bottom: 12px; padding: var(--s-4); border: 0; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--e-2); }
  .rd-body .vs-table tbody th { padding: 0 0 var(--s-2); border: 0; }
  .rd-body .vs-table td { padding: var(--s-2) 0; border: 0; }
  .rd-body .prose.vs-wide .vs-table td[data-label]:nth-child(2) { margin: var(--s-2) 0; padding: var(--s-3); border-radius: var(--r-2); box-shadow: none; }
  .rd-body .prose table caption { padding: 0 0 var(--s-3); }
}
@media (max-width: 600px) {
  .rd-head h1 { font-size: clamp(2rem, 8.8vw, 2.75rem); }
  .rd-card { padding: var(--s-5); }
  .rd-body .help-prose ol.vs-list > li { padding-left: 8px; }
  .rd-body .help-prose ol.vs-list > li::before { left: calc(var(--lane) / -2 - 14px); top: -1px; width: 28px; height: 28px; border-width: 4px; font-size: var(--t-xs); }
  .rd-body .vs-two > div { padding: var(--s-5); }
}