/* Tafel 3 landing: the public page of Schwupps Feld, Schwupps Wahl and Schwupps Büro on the kit.
   Version 3, round 2, 7 October 2026 (brief Tafel 3, sections 2 and 8).
   The paper concept at large scale: one sentence in the serif, large and quiet, across the top; under it the lead, the
   two actions and the trust facts as one engraved plate with four screws, beside the real board of the app; the five
   moves as five pinned objects of five kinds (a board, a ledger, a sign with its plates, Wupp's slips on the clipboard,
   a sheet of paper); the start list as a plate. No chips, no check-mark pills, no slogans in capitals, no pictures.
   The page is pinned to Tag by owner decision (data-theme-lock on the root; ?theme=nacht opens it in Nacht for review).
   Loaded after kit/tafel.css. No inline styles or scripts; tokens only in the :root blocks.
   Instrument Serif is self-hosted in kit/fonts (fonts.css); the detector's overused-font waiver for it and the
   cream-palette waiver for the warm paper are recorded in .impeccable/config.json with the brief's reasons. */

:root {
  --screw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3.1' fill='%23F3EFE6' stroke='%23141414' stroke-opacity='.55' stroke-width='.9'/%3E%3Cpath d='M2.3 5.7 5.7 2.3' stroke='%23141414' stroke-opacity='.6' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E");
  /* the chalkboard the rules are written on: in Tag the slate of Nacht, in Nacht a deeper slate */
  --cb-page: #202C28; --cb-board: #1B2622; --cb-sheet: #2C3732; --cb-frame: #34403A; --cb-plate-2: #2E3934;
  --cb-ink: #F2EFE6; --cb-ink-2: #D0D0C8; --cb-muted: #9EA19A; --cb-off: #A6A9A2;
  --cb-rule: rgba(242, 239, 230, 0.18); --cb-edge: rgba(242, 239, 230, 0.15); --cb-edge-strong: rgba(242, 239, 230, 0.3);
  --cb-control-line: rgba(242, 239, 230, 0.52); --cb-plate-line: rgba(242, 239, 230, 0.72);
  --cb-wash: rgba(242, 239, 230, 0.045); --cb-wash-strong: rgba(242, 239, 230, 0.08);
  --cb-ok: #38C878; --cb-ok-ink: #79DCA4; --cb-ok-glass: #24443A;
  --cb-wait: #FFB020; --cb-wait-ink: #FFC95E; --cb-wait-glass: #4A3E22; --cb-wait-tint: #3C3420;
  --cb-stop: #FF5E40; --cb-stop-ink: #FF9580; --cb-stop-glass: #4D2B22;
  --cb-sign: #7FA3FF; --cb-sign-ink: #A9C1FF; --cb-sign-glass: #2D3B5C;
  --cb-lamp-off: #2F3A35; --cb-lamp-off-ring: rgba(242, 239, 230, 0.45); --cb-lamp-dark: #141C19; --cb-lamp-socket: #8E918A; --cb-pin: #C9C7BE;
  /* the size of the one sentence in the serif */
  --say: 5.75rem;
}
:root[data-theme="nacht"] {
  --screw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3.1' fill='%23202C28' stroke='%23F2EFE6' stroke-opacity='.55' stroke-width='.9'/%3E%3Cpath d='M2.3 5.7 5.7 2.3' stroke='%23F2EFE6' stroke-opacity='.6' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --cb-page: #172019; --cb-board: #131B17; --cb-sheet: #26302B; --cb-frame: #2E3934;
}
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.landing { --proto-h: 0px; font-size: var(--t-m); }
.wrap { width: min(1200px, 100%); margin: 0 auto; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--sheet); color: var(--ink); border: 1px solid var(--edge-strong); border-radius: var(--r); }
.skip:focus { top: 12px; }

/* ---------- the header: wordmark, sections, languages, the family, the one action ---------- */
.site-header { position: sticky; top: 0; z-index: 30; padding: 0 16px; background: var(--page); border-bottom: 1px solid var(--rule); --knock: var(--page); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 64px; }
.site-nav { display: flex; flex: 1; flex-wrap: wrap; gap: 2px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 10px; border-radius: var(--r); color: var(--ink-2); font: 500 var(--t-s)/1.2 var(--f-ui); text-decoration: none; }
.site-nav a:hover { background: var(--wash-strong); color: var(--ink); }
.lang { display: inline-flex; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--control-line); overflow: hidden; }
.lang a, .lang span, .lang button { display: inline-grid; place-items: center; min-width: 42px; min-height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--ink-2); font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.06em; text-decoration: none; cursor: pointer; }
.lang > * + * { box-shadow: inset 1px 0 0 var(--rule); }
.lang button:hover { background: var(--wash-strong); color: var(--ink); }
.lang [aria-current="page"], .lang button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); text-shadow: none; }
.lang button:disabled { color: var(--muted); cursor: default; }

/* ---------- sections ---------- */
.block { padding: 72px 16px; }
.block.alt { background: var(--board); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); --knock: var(--board); }
.block.dark {
  --page: var(--cb-page); --board: var(--cb-board); --sheet: var(--cb-sheet); --frame: var(--cb-frame); --plate-2: var(--cb-plate-2);
  --ink: var(--cb-ink); --ink-2: var(--cb-ink-2); --muted: var(--cb-muted); --off: var(--cb-off); --unknown-ink: var(--cb-off);
  --rule: var(--cb-rule); --edge: var(--cb-edge); --edge-strong: var(--cb-edge-strong); --control-line: var(--cb-control-line); --plate-line: var(--cb-plate-line);
  --wash: var(--cb-wash); --wash-strong: var(--cb-wash-strong);
  --ok: var(--cb-ok); --ok-ink: var(--cb-ok-ink); --ok-glass: var(--cb-ok-glass);
  --wait: var(--cb-wait); --wait-ink: var(--cb-wait-ink); --wait-glass: var(--cb-wait-glass); --wait-tint: var(--cb-wait-tint); --hatch-line: var(--cb-wait-glass);
  --stop: var(--cb-stop); --stop-ink: var(--cb-stop-ink); --stop-glass: var(--cb-stop-glass);
  --sign: var(--cb-sign); --sign-ink: var(--cb-sign-ink); --sign-glass: var(--cb-sign-glass);
  --lamp-off: var(--cb-lamp-off); --lamp-off-ring: var(--cb-lamp-off-ring); --lamp-dark: var(--cb-lamp-dark); --lamp-socket: var(--cb-lamp-socket); --pin: var(--cb-pin);
  background: var(--page); color: var(--ink); --knock: var(--page);
  border-top: var(--frame-w) solid var(--frame); border-bottom: var(--frame-w) solid var(--frame);
}
:root[data-theme="nacht"] .block.dark { text-shadow: 0 0 0.2px rgba(242, 239, 230, 0.5); }
/* a section's head: the heading at left, its lead at right, a hairline under both */
.block-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 48px; align-items: end; margin-bottom: 36px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.block-head h2 { font: 600 var(--t-3xl)/1.12 var(--f-ui); letter-spacing: -0.015em; text-transform: none; text-shadow: none; text-wrap: balance; }
.block-head .lead { max-width: 62ch; font-size: var(--t-l); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.block-head > :only-child { grid-column: 1 / -1; }
.block-head .row { grid-column: 2; }

/* a lamp and its word: the state of a thing, never a pill */
.lw { display: inline-grid; grid-template-columns: 12px auto; gap: 8px; align-items: center; color: var(--ink-2); font: 500 var(--t-s)/1.35 var(--f-ui); white-space: nowrap; }

/* ---------- the hero: the sentence across the top; the lead, the actions and the plate; the board ---------- */
.hero { padding: 56px 16px 48px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "say say" "text board" "stand stand"; gap: 32px 56px; align-items: start; }
.hero .say { grid-area: say; max-width: 24ch; font: 400 var(--say)/1.02 var(--f-display); letter-spacing: -0.012em; text-transform: none; text-shadow: none; text-wrap: balance; }
/* a line breaks between the parts of the sentence, never inside one */
.hero .say span { display: inline; white-space: nowrap; }
.hero-text { grid-area: text; display: grid; gap: 24px; align-content: start; padding-top: 54px; min-width: 0; }
.hero .lead { max-width: 52ch; font-size: var(--t-l); line-height: 1.55; color: var(--ink-2); }
.hero .for-whom { margin-top: -12px; font: 600 var(--t-l)/1.35 var(--f-ui); color: var(--ink); }
.hero .actions { gap: 10px; }
.hero .actions .btn { min-height: 48px; padding: 10px 18px; font-size: var(--t-l); }
/* the trust facts: one engraved plate with four screws; the label in the product's ink */
.trust { position: relative; display: grid; gap: 14px; padding: 18px 22px 20px;
  background: var(--screw) left 7px top 7px / 8px 8px no-repeat, var(--screw) right 7px top 7px / 8px 8px no-repeat,
              var(--screw) left 7px bottom 7px / 8px 8px no-repeat, var(--screw) right 7px bottom 7px / 8px 8px no-repeat, var(--sheet);
  border: 1.5px solid var(--plate-line); border-radius: var(--r); --knock: var(--sheet); }
.engraved { color: var(--ink-brand); font: 600 var(--t-xs)/1.3 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.trust-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.trust-facts li { display: grid; gap: 3px; align-content: start; min-width: 0; }
.trust-facts b { font: 600 var(--t-m)/1.35 var(--f-ui); color: var(--ink); }
.trust-facts span { font-size: var(--t-s); line-height: 1.45; color: var(--ink-2); }
.hero-board { grid-area: board; display: grid; gap: 12px; min-width: 0; }
.hero-board .tafel { box-shadow: 0 0 0 1px var(--edge-strong), inset 0 0 0 1px var(--edge), 1px 2px 0 var(--lift-soft); }
.hero-board .legend { padding: 0 4px; }
.hero-board .tgrid tbody th { min-width: 10rem; }
.packbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.packbar .lab { color: var(--ink-2); font: 600 var(--t-s)/1 var(--f-ui); }
/* the comparison of Schwupps Wahl: requirements by offers, a word under each lamp on a phone, the cost row at the foot */
.hero-board .tgrid.cmp th, .hero-board .tgrid.cmp td { padding: 8px 6px; }
.hero-board .tgrid.cmp tbody th, .hero-board .tgrid.cmp tfoot th, .hero-board .tgrid.cmp thead th:first-child { padding-left: 14px; text-align: left; }
.hero-board .tgrid.cmp thead th.col { font-size: var(--t-s); color: var(--ink); }
.hero-board .tgrid.cmp tfoot th { font: 600 var(--t-s)/1.3 var(--f-ui); }
.hero-board .tgrid.cmp td.num { text-align: center; font: 600 var(--t-s)/1.3 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-board .tgrid.cmp td .meta, .hero-board .tgrid.cmp tfoot th .meta { display: block; font: 400 var(--t-xs)/1.3 var(--f-ui); color: var(--muted); white-space: normal; }
.hero-board .tgrid.cmp td.c .w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-board .tgrid.cmp th:last-child, .hero-board .tgrid.cmp td:last-child { padding-right: 12px; }
/* the state of the page, at the foot of the hero: a lamp at the edge and one honest sentence */
.hero-stand { grid-area: stand; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: start; padding-top: 16px; border-top: 1px solid var(--rule); }
.hero-stand .light { margin-top: 4px; }
.hero-stand p { max-width: 104ch; font-size: var(--t-s); line-height: 1.5; color: var(--ink-2); }
.hero-stand b { color: var(--ink); font-weight: 600; }

/* ---------- five moves: five pinned objects of five kinds; the words above each, the object below ---------- */
.stations { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 72px; align-items: start; }
/* after the five moves: the way to the start list */
.moves-next { margin-top: 56px; }
.station { grid-column: span 4; grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 22px; min-width: 0; }
.station.wide { grid-column: span 7; }
.station.mid { grid-column: span 5; }
.station-text { display: grid; gap: 10px; align-content: start; min-width: 0; }
.station-text h3 { padding-bottom: 10px; border-bottom: 1px solid var(--rule); font: 600 var(--t-2xl)/1.15 var(--f-ui); letter-spacing: -0.012em; text-transform: none; text-shadow: none; text-wrap: balance; }
.station-text p { max-width: 58ch; color: var(--ink-2); text-wrap: pretty; }
.station-text .try { font-size: var(--t-s); color: var(--muted); }
.station-text .actions { margin-top: 4px; }
.station-obj { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.station-obj > .note { font-size: var(--t-s); color: var(--muted); }
.station-obj .keys { padding: 0 2px; }
.pin-top { position: relative; }
.pin-top::after { content: ""; position: absolute; z-index: 3; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--pin); box-shadow: 1px 1.5px 0 var(--pin-shadow), inset 1.5px 1.5px 0 -0.5px var(--pin-light); pointer-events: none; }

/* a ledger: a ruled page pinned to the board; hairlines, a 2 px rule under the head, a column rule beside the figures,
   the sum under a double rule; never a tinted row */
.book { display: grid; padding: 22px 0 16px; background: var(--sheet); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 2px 0 var(--lift-soft); --knock: var(--sheet); }
.book-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 0 18px 12px; }
.book-head .title { font: 600 var(--t-l)/1.3 var(--f-ui); letter-spacing: -0.005em; }
.book-head .title small { display: block; margin-top: 1px; font: 400 var(--t-s)/1.35 var(--f-ui); color: var(--muted); }
.book-head .no { font: 600 var(--t-xl)/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.book .ledger { font-size: var(--t-s); }
.book .ledger th, .book .ledger td { padding: 9px 10px; vertical-align: top; }
.book .ledger th:first-child, .book .ledger td:first-child { padding-left: 18px; }
.book .ledger th:last-child, .book .ledger td:last-child { padding-right: 18px; }
.book .ledger td.l { width: 30px; padding-right: 0; }
.book .ledger td.l .light { margin-top: 3px; }
.book .ledger tbody td b { display: block; font: 600 var(--t-s)/1.35 var(--f-ui); color: var(--ink); }
.book .ledger tbody td .meta { display: block; margin-top: 1px; font-size: var(--t-xs); line-height: 1.4; color: var(--muted); }
.book .ledger td.num { color: var(--ink); font-weight: 500; }
.book .ledger td.num.open { color: var(--ink-2); font-weight: 400; }
.book .ledger tfoot th { text-align: left; font-weight: 600; }
.book .ledger tfoot td.num { font-weight: 600; }
.book .ledger tbody tr:has(.light[data-s="sug"]) td { background-image: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--sheet) 1px var(--hatch-step)); --muted: var(--ink-2); }
.book-note { padding: 12px 18px 0; font-size: var(--t-xs); line-height: 1.45; color: var(--muted); }

/* the sign with its plates: the decision hangs on the board; the signs and plates carry their own edges */
.hang { display: grid; gap: 12px; }
.hang > .decide { padding-top: 14px; }
.hang > .stamp { box-shadow: 1px 2px 0 var(--lift-soft); }

/* Wupp's slips on the clipboard: the board in its tint, the metal clip with Wupp and the count */
.clipboard { position: relative; display: grid; gap: 4px; padding: 38px 14px 16px; background: var(--clipboard); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 2px 0 var(--lift-soft); --knock: var(--sheet); --muted: var(--ink-2); }
.clipboard .clip { position: absolute; left: 50%; top: -12px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; width: 156px; height: 34px; margin-left: -78px;
  border: 1.5px solid var(--plate-line); border-radius: 4px 4px 12px 12px; background: var(--clip-metal); color: var(--ink); box-shadow: 1px 2px 0 var(--lift), inset 0 -5px 0 var(--edge); --knock: var(--clip-metal); }
.clipboard .clip::before { content: ""; position: absolute; left: 50%; top: -11px; width: 26px; height: 12px; margin-left: -13px; border: 1.5px solid var(--plate-line); border-bottom: 0; border-radius: 8px 8px 0 0; }
.clipboard .clip svg { width: 24px; height: 24px; overflow: visible; }
.clipboard .clip-n { font: 700 var(--t-l)/1 var(--f-ui); font-variant-numeric: tabular-nums; text-shadow: none; }
.clipboard .msgs { padding: 0; }
.clipboard .msg:has(> .who-chip.wupp) { margin: 12px 0 2px; }
/* on a slip the trail of a follow-up runs down the slip: one step a line, the lamps on one thin rule */
.clipboard .trail { position: relative; display: grid; gap: 0; margin-top: 6px; }
.clipboard .trail::before { content: ""; position: absolute; left: 5.5px; top: 12px; bottom: 12px; width: 1px; background: var(--control-line); }
.clipboard .trail li { position: relative; min-height: 22px; }
.clipboard .trail li + li::after { content: none; }

/* a sheet of paper pinned to the board: paper in every theme */
.station-obj > .sheet { max-width: none; padding: 24px 22px 18px; gap: 12px; }
.station-obj > .sheet h4 { font: 600 var(--t-l)/1.3 var(--f-ui); letter-spacing: -0.005em; }
.station-obj > .sheet .msgs { padding: 0; }
.station-obj > .sheet .msg { padding-left: 0; padding-right: 0; }
.station-obj > .sheet .msg.note { margin: 4px 0; padding: 10px 10px 11px; }
/* the lines of a document: the item with its quantity under it, the total at the right; net and tax under a rule,
   the gross sum under the double rule */
.sheet .lines { font-size: var(--t-s); }
.sheet .lines th, .sheet .lines td { padding: 8px 0; vertical-align: top; }
.sheet .lines td.num, .sheet .lines th.num { padding-left: 12px; }
.sheet .lines tbody td b { display: block; font-weight: 600; color: var(--ink); }
.sheet .lines tbody td .meta { display: block; font-size: var(--t-xs); color: var(--muted); }
.sheet .lines tfoot td, .sheet .lines tfoot th { padding-top: 4px; padding-bottom: 4px; border-top: 0; border-bottom: 0; font-weight: 400; color: var(--ink-2); }
.sheet .lines tfoot th { text-align: left; }
.sheet .lines tfoot tr:first-child > * { padding-top: 9px; border-top: 1px solid var(--ink); }
.sheet .lines tfoot tr:last-child > * { padding-top: 9px; border-top: 3px double var(--ink); font-weight: 600; color: var(--ink); }
/* Wupp's suggestion on a sheet: hatched, with its lamp; it stays a suggestion until a person takes it */
.sheet .notice.sug { gap: 6px; padding: 12px 14px 13px; border: 1px solid var(--wait-ink); background-image: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--sheet) 1px var(--hatch-step)); --muted: var(--ink-2); }
.sheet .notice.sug p { font-size: var(--t-s); color: var(--ink); }
.notice-h { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* ---------- the demo: tabs over a device pinned on a board, the design in a frame ---------- */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.demo-tabs { display: flex; flex: 1; flex-wrap: wrap; gap: 4px 14px; }
.demo-tabs .tabgrp { display: inline-flex; flex: none; flex-wrap: wrap; align-items: center; gap: 2px; }
.demo-tabs button { min-height: 36px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink-2); font: 500 var(--t-s)/1.2 var(--f-ui); cursor: pointer; }
.demo-tabs button:hover { border-color: var(--control-line); color: var(--ink); }
.demo-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); font-weight: 600; text-shadow: none; }
.demo-tabs .grp { display: inline-flex; align-items: center; padding: 0 6px 0 2px; color: var(--muted); }
/* the five screens of the moves stand first; this button opens every other screen and closes them again */
.demo-more { flex: none; }
.demo-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.demo-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding: 30px 14px 26px; background: var(--board); border: var(--frame-w) solid var(--frame); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), inset 0 0 0 1px var(--edge); }
.device { position: relative; overflow: hidden; background: var(--page); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 2px 0 var(--lift); }
.device[data-view="app"] { justify-self: center; width: 390px; max-width: 100%; height: auto; aspect-ratio: 390 / 760; }
.device[data-view="web"] { width: 100%; max-width: 1120px; aspect-ratio: 16 / 10; }
.device iframe { position: absolute; left: 0; top: 0; border: 0; background: var(--page); transform-origin: 0 0; }
.device:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.device[data-view="app"] iframe { width: 390px; height: 760px; }
.device[data-view="web"] iframe { width: 1280px; height: 800px; }
.demo-caption { max-width: 72ch; font-size: var(--t-s); color: var(--ink-2); text-align: center; }
.demo-note { font-size: var(--t-xs); color: var(--muted); text-align: center; }

/* ---------- who it is for: small boards of different trades; three columns of words ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.gallery figure { display: grid; gap: 12px; align-content: start; }
.gallery figcaption { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 10px; align-items: center; font: 600 var(--t-m)/1.35 var(--f-ui); }
.gallery figcaption svg.icon { grid-row: span 2; width: 24px; height: 24px; }
.gallery figcaption small { font: 400 var(--t-xs)/1.35 var(--f-ui); color: var(--muted); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--rule); }
.three h3 { font: 600 var(--t-l)/1.35 var(--f-ui); }
.three p { max-width: 44ch; margin-top: 4px; font-size: var(--t-s); color: var(--ink-2); }
/* the whole way of a job: stops on one ruled line, a lamp on the line at each stop */
.route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; }
.route li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
/* a stop is pinned on the line; a lamp would claim a state */
.route li .stop { position: absolute; top: -5.5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--pin); box-shadow: 1px 1.5px 0 var(--pin-shadow), inset 1.5px 1.5px 0 -0.5px var(--pin-light); }
.route h3 { font: 600 var(--t-l)/1.35 var(--f-ui); }
.route h3 .linkbtn { color: var(--ink); text-align: left; }
.route h3 .linkbtn, .msg-meta .linkbtn { position: relative; }
.route h3 .linkbtn::after, .msg-meta .linkbtn::after { content: ""; position: absolute; inset: -11px -6px; }
.route p { max-width: 44ch; font-size: var(--t-s); color: var(--ink-2); }

/* ---------- rules as plates on the chalkboard ---------- */
.rules .plates { gap: 8px; }
.rules .plate { min-height: 56px; padding: 12px 16px; font-size: var(--t-m); }
.rules .plate .src { font-size: var(--t-s); }

/* ---------- prices: plates; the plan's name in the text face, the figure tabular ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plan { display: grid; gap: 10px; align-content: start; padding: 20px 20px 22px; background: var(--sheet); border: 1px solid var(--edge-strong); border-radius: var(--r); box-shadow: none; }
.plan.is-pick { border: 1.5px solid var(--plate-line); box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px var(--plate-line); }
.plan h3 { font: 600 var(--t-l)/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; }
.plan .price { font: 600 var(--t-3xl)/1 var(--f-ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan .price small { margin-left: 4px; font: 400 var(--t-s)/1.2 var(--f-ui); letter-spacing: 0; color: var(--muted); }
.plan p { font-size: var(--t-s); color: var(--ink-2); }
.plan ul { display: grid; gap: 4px; padding-left: 18px; font-size: var(--t-s); color: var(--ink-2); list-style: disc; }
.price-note { max-width: 72ch; margin-top: 16px; font-size: var(--t-s); color: var(--muted); }
.proposed { display: inline-grid; grid-template-columns: 12px auto; gap: 8px; align-items: center; font-size: var(--t-s); color: var(--ink-2); }
.devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: none; }
.devices li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 16px 18px; border-left: 1px solid var(--rule); }
.devices li:first-child { border-left: 0; }
.devices li > svg.icon { margin-top: 2px; }
.devices b { display: block; font: 600 var(--t-m)/1.35 var(--f-ui); }
.devices .meta { display: block; font-size: var(--t-s); color: var(--muted); }
.devices .lw { grid-column: 2; }

/* ---------- the family: three plates in three inks ---------- */
.family-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fam { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 18px 20px; background: var(--sheet); border: 1px solid var(--edge-strong); border-radius: var(--r); box-shadow: none; color: var(--ink); text-decoration: none; }
.fam[aria-current="true"] { border: 1.5px solid var(--plate-line); box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px var(--plate-line); }
.fam .mark { width: 40px; height: 40px; }
/* each product's word in its own ink: the ink is named on the mark, the name stands beside it */
.fam b { display: block; font: 700 var(--t-xl)/1.15 var(--f-ui); letter-spacing: -0.012em; }
.fam .dom { display: block; margin-top: 5px; color: var(--ink-2); font: 500 var(--t-s)/1.2 var(--f-mono); }
.fam p { margin-top: 8px; font-size: var(--t-s); color: var(--ink-2); }

/* ---------- questions ---------- */
.faq { display: grid; gap: 0; padding: 4px 22px; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: none; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:first-child { border-top: 0; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; font: 600 var(--t-m)/1.35 var(--f-ui); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg.icon { flex: none; color: var(--muted); transition: transform 120ms var(--ease); }
.faq details[open] summary svg.icon { transform: rotate(90deg); }
.faq details p { max-width: 70ch; padding: 0 0 16px; color: var(--ink-2); }

/* ---------- the start list: a plate with four screws; the conditions at left, the request at right ---------- */
.startplate { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px 44px; padding: 24px 30px 30px;
  background: var(--screw) left 8px top 8px / 8px 8px no-repeat, var(--screw) right 8px top 8px / 8px 8px no-repeat,
              var(--screw) left 8px bottom 8px / 8px 8px no-repeat, var(--screw) right 8px bottom 8px / 8px 8px no-repeat, var(--sheet);
  border: 1.5px solid var(--plate-line); border-radius: var(--r); box-shadow: 1px 2px 0 var(--lift-soft); --knock: var(--sheet); }
.startplate > .engraved { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.startplate .stack { gap: 18px; align-content: start; }
.checks-list { display: grid; gap: 10px; font-size: var(--t-m); }
.checks-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: start; }
.checks-list .light { margin-top: 5px; }
.pilot-form { display: grid; gap: 14px; align-content: start; }
.pilot-form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pilot-form .btn.primary { justify-self: start; min-height: 48px; padding: 10px 20px; }
.pilot-form label .optional { font-weight: 400; color: var(--ink-2); }
.pilot-out { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pilot-out textarea { min-height: 180px; font-size: var(--t-s); }

/* ---------- the footer ---------- */
.site-footer { padding: 40px 16px 48px; border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--ink-2); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; }
.site-footer h2 { margin-bottom: 8px; color: var(--muted); }
.site-footer ul { display: grid; gap: 6px; }
.site-footer a { color: var(--ink-2); }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 24px; }
.site-footer .wordmark + p { margin-top: 10px; }

/* ---------- motion: settle onto the pin when seen, slips slide in from the clipboard's edge; off under reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .landing .is-arriving .station-obj > * { animation: settle 160ms var(--ease) backwards; }
  .landing .is-arriving .station-obj > * + * { animation-delay: 40ms; }
  .landing .is-arriving .clipboard .msg { animation: slip-arrive 240ms var(--ease) 140ms backwards; }
  .landing .is-arriving .clipboard .msg + .msg { animation-delay: 220ms; }
  .landing .is-settling { animation: settle 160ms var(--ease); }
}
/* the slip is on the clipboard before it moves: the motion only slides it the last stretch from the edge */
@keyframes slip-arrive { from { transform: translateX(28px); } to { transform: none; } }

/* ---------- widths ---------- */
@media (max-width: 68.75em) {
  :root { --say: 4.25rem; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "say" "text" "board" "stand"; gap: 28px; }
  .hero .say { max-width: 18ch; }
  .hero-text { padding-top: 0; }
  .block-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .block-head .row { grid-column: 1; }
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .station, .station.wide, .station.mid { grid-column: span 1; }
  .station:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-strip { grid-template-columns: minmax(0, 1fr); }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three, .devices { grid-template-columns: minmax(0, 1fr); }
  .devices li { border-left: 0; border-top: 1px solid var(--rule); }
  .devices li:first-child { border-top: 0; }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .startplate { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 56.25em) {
  .demo-tabs { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .demo-tabs button, .demo-tabs .grp { white-space: nowrap; }
  .demo-tabs .tabgrp { flex-wrap: nowrap; }
  .site-header { position: static; }
  .site-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; }
  .site-nav a { white-space: nowrap; }
}
@media (min-width: 56.26em) {
  .demo-tabs .tabgrp { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 43.75em) {
  .stations { grid-template-columns: minmax(0, 1fr); row-gap: 52px; }
  .station:last-child:nth-child(odd) { grid-column: auto; }
  .route { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .site-nav a, .lang button, .site-header .btn, .btn.sm, .seg button, .demo-tabs [role="tab"], .site-header .wordmark { min-height: 44px; }
  .lang button, .demo-tabs [role="tab"] { min-width: 44px; }
  /* footer lines keep one rhythm; a link reaches over its line to a 44 px target */
  .site-footer ul { gap: 0; }
  .site-footer ul li { padding: 12px 0; }
  .site-footer ul a { display: inline-block; min-height: 0; padding: 12px 0; margin: -12px 0; }
}
@media (max-width: 32.5em) {
  :root { --say: 3.25rem; }
  .block { padding: 52px 16px; }
  .site-nav { margin: 0 -8px; }
  .site-nav a { padding: 4px 8px; }
  .hero { padding: 32px 16px 36px; }
  .hero .say { line-height: 1.04; }
  .trust { padding: 18px 18px 18px; }
  .trust-facts { grid-template-columns: minmax(0, 1fr); }
  .block-head h2 { font-size: var(--t-2xl); }
  .station-text h3 { font-size: var(--t-xl); }
  .plans, .pilot-form .two { grid-template-columns: minmax(0, 1fr); }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .hero-board .tgrid th, .hero-board .tgrid td { padding: 6px 4px; }
  .hero-board .tgrid tbody th { min-width: 7.5rem; }
  .packbar .seg { width: 100%; }
  .packbar .seg button { flex: 1; padding: 4px 6px; }
  .demo-stage { padding: 16px 8px; }
  .startplate { padding: 22px 18px 24px; }
  .book .ledger th, .book .ledger td { padding: 8px 6px; }
  .book .ledger th:first-child, .book .ledger td:first-child { padding-left: 12px; }
  .book .ledger th:last-child, .book .ledger td:last-child { padding-right: 12px; }
  .book-head { padding: 0 12px 10px; }
  .book-note { padding: 10px 12px 0; }
  .station-obj > .sheet { padding: 22px 16px 16px; }
  /* a rule reads as title, sentence, then its word; beside the sentence the word would squeeze it */
  .rules .plate { grid-template-columns: 12px minmax(0, 1fr); align-items: start; }
  .rules .plate .state { grid-column: 2; text-align: left; }
  /* on a phone the comparison becomes title lines: the requirement on its own line, the offers beneath it, each with
     its lamp and its word; the offer names stay on top and the amounts never break */
  .hero-board .tgrid.cmp, .hero-board .tgrid.cmp thead, .hero-board .tgrid.cmp tbody, .hero-board .tgrid.cmp tfoot { display: block; }
  .hero-board .tgrid.cmp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-board .tgrid.cmp thead th:first-child { display: none; }
  .hero-board .tgrid.cmp thead th.col { padding: 10px 2px 8px; white-space: normal; overflow-wrap: break-word; }
  .hero-board .tgrid.cmp tbody th, .hero-board .tgrid.cmp tfoot th { grid-column: 1 / -1; position: static; min-width: 0; padding: 10px 12px 0; border-bottom: 0; }
  .hero-board .tgrid.cmp td.c { padding: 6px 2px 10px; }
  .hero-board .tgrid.cmp td.c .w { position: static; display: block; width: auto; height: auto; margin-top: 4px; overflow: visible; clip-path: none; white-space: normal; font: 500 var(--t-xs)/1.2 var(--f-ui); color: var(--ink-2); }
  .hero-board .tgrid.cmp tfoot td.num { border-top: 0; padding: 6px 2px 12px; font-size: var(--t-xs); }
  .hero-board .tgrid.cmp th:last-child, .hero-board .tgrid.cmp td:last-child { padding-right: 8px; }
  .hero-board .tgrid.cmp th.col:nth-child(2), .hero-board .tgrid.cmp td:nth-child(2) { padding-left: 8px; }
}
@media (max-width: 22.5em) {
  :root { --say: 2.5rem; }
}
@media print {
  .site-header, .demo-stage, .pilot-form, .skip { display: none !important; }
}