/* Showglass site. © 2026 VPO Labs.
   Direction B · Spacebar: paper and graphite, keycaps and ledger rows, one
   signal colour (Lume). The design system's colours come from
   design/system/tokens.json (the generated block below); the site's own
   paper-and-graphite values follow it. System fonts only: SF Pro Rounded
   (ui-rounded) for headings and keys, SF Mono for file names and ledgers,
   the system font for reading. No web fonts, no network. */

/* tokens:start (generated by site/tools/build.py from design/system/tokens.json 1.0.0; do not edit) */
:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --chrome: #F5F5F7;
  --raised: #ECECEF;
  --ink: #17181B;
  --ink-2: #4B4F57;
  --ink-3: #61656D;
  --on-lume: #FFFFFF;
  --sep: #17181B1A;
  --sep-strong: #17181B2E;
  --lume: #00707D;
  --lume-tint: #00707D1A;
  --lume-line: #00707D80;
  --sel: #00707D17;
  --warn: #8A4D00;
  --warn-bg: #FFF3DB;
  --warn-line: #E5BC74;
  --ok: #1F7A3D;
  --check-a: #FFFFFF;
  --check-b: #EDEDF0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1D20;
    --chrome: #242528;
    --raised: #2E2F33;
    --ink: #ECEDEF;
    --ink-2: #B6BAC1;
    --ink-3: #959BA4;
    --on-lume: #06262A;
    --sep: #FFFFFF17;
    --sep-strong: #FFFFFF29;
    --lume: #5CCFD6;
    --lume-tint: #5CCFD621;
    --lume-line: #5CCFD680;
    --sel: #5CCFD61F;
    --warn: #F2B860;
    --warn-bg: #F2B8601F;
    --warn-line: #F2B86061;
    --ok: #6FD08C;
    --check-a: #2A2B2F;
    --check-b: #232428;
  }
}
@media (prefers-contrast: more) {
  :root {
    --bg: #FFFFFF;
    --chrome: #EDEDF0;
    --raised: #E2E2E6;
    --ink: #000000;
    --ink-2: #2E3136;
    --ink-3: #3E4147;
    --on-lume: #FFFFFF;
    --sep: #17181B4D;
    --sep-strong: #17181B73;
    --lume: #005A64;
    --lume-tint: #005A6426;
    --lume-line: #005A64;
    --sel: #005A6424;
    --warn: #6B3B00;
    --warn-bg: #FFE9BF;
    --warn-line: #B07A1F;
    --ok: #155C2C;
    --check-a: #FFFFFF;
    --check-b: #DADADF;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --bg: #141517;
    --chrome: #1E1F22;
    --raised: #38393E;
    --ink: #FFFFFF;
    --ink-2: #DADDE1;
    --ink-3: #C2C6CC;
    --on-lume: #001A1D;
    --sep: #FFFFFF3D;
    --sep-strong: #FFFFFF5C;
    --lume: #86E6EB;
    --lume-tint: #86E6EB33;
    --lume-line: #86E6EB;
    --sel: #86E6EB2E;
    --warn: #FFCB7A;
    --warn-bg: #F2B86033;
    --warn-line: #F2B860;
    --ok: #94E3AB;
    --check-a: #2A2B2F;
    --check-b: #1A1B1E;
  }
}
/* tokens:end */

/* ---------------------------------------------------------------- B's world
   Paper, deck and keycap values. Ink is the design system's under Increase
   Contrast; otherwise B's slightly green graphite. */
:root {
  --paper: #F3F5F4;
  --deck: #E6EAE8;
  --rule: #C9CFCE;
  --rule-strong: #192023;
  --lume-side: #004950;
  --lume-wash: rgba(0, 112, 125, 0.10);
  --panel: #FFFFFF;
  --plain-bg: #FFFFFF;
  --plain-ink: #1F2224;
  --cap-top: #FFFFFF;
  --cap-bot: #ECEFED;
  --cap-side: #B4BCBC;
  --cap-hi: rgba(255, 255, 255, 0.9);
  --well: #D9DFDD;
  --shadow: rgba(18, 30, 34, 0.30);
  --glow: rgba(0, 112, 125, 0);
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1344px;
  --gut: clamp(16px, 3.4vw, 48px);
  --spring: cubic-bezier(.3, 1.7, .55, 1);
  /* the type scale and rhythm (site audit, 2026-11-01): the home hero's
     title is the one big thing; everything below it uses these */
  --fs-h1: clamp(40px, 4.4vw, 60px);     /* page titles */
  --fs-h2: clamp(28px, 2.6vw, 38px);     /* every section heading */
  --fs-h3: clamp(19px, 1.6vw, 22px);     /* feature titles, small heads */
  --fs-price: clamp(40px, 3.6vw, 48px);  /* the price figure, never more */
  --fs-lede: 19px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-mono: 14px;
  --fs-micro: 13px;                      /* footer and table heads only */
  --section-y: clamp(40px, 4.4vw, 64px);
  --closer-y: clamp(56px, 6vw, 88px);
  --measure: 34em;                       /* about 72 characters of prose */
}
:root { --ink-fine: var(--ink-2); }
@media (prefers-contrast: no-preference) {
  :root { --ink: #192023; --ink-2: #4C565B; --ink-3: #6E787D; --ink-fine: #667075; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #181B1D;
    --deck: #202427;
    --rule: #30363A;
    --rule-strong: #8C969B;
    --lume-side: #2C8C93;
    --lume-wash: rgba(92, 207, 214, 0.12);
    --panel: #222629;
    --plain-bg: #1E1F21;
    --plain-ink: #D9DCDE;
    --cap-top: #3A4044;
    --cap-bot: #2D3236;
    --cap-side: #0E1113;
    --cap-hi: rgba(255, 255, 255, 0.10);
    --well: #121517;
    --shadow: rgba(0, 0, 0, 0.62);
    --glow: rgba(92, 207, 214, 0.55);
  }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: no-preference) {
  :root { --ink: #E6EAEB; --ink-2: #A7B0B4; --ink-3: #848E93; --ink-fine: #7C8589; }
}
@media (prefers-contrast: more) {
  :root { --rule: #7A8489; --rule-strong: #000000; --cap-side: #6E787D; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --rule: #8C969B; --rule-strong: #FFFFFF; --cap-side: #000000; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-body)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* the footer stays at the bottom of short pages */
  min-height: 100vh; display: flex; flex-direction: column;
}
body > main, body > .doc-layout { flex: 1 0 auto; }
body > .doc-layout { width: 100%; }
img { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--lume); }
code, kbd { font: 0.9em var(--mono); }
code { padding: 1px 5px; border-radius: 5px; background: var(--deck); }
:focus-visible { outline: 3px solid var(--lume); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; border-radius: 9px;
  background: var(--ink); color: var(--paper); font: 600 15px/1 var(--round); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- header */
.top { border-bottom: 1px solid var(--rule); }
.top nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 20px/1 var(--round); letter-spacing: -0.01em; }
.brand:hover { color: inherit; }
.brand img { width: 30px; height: 30px; display: block; }
.links { display: flex; gap: clamp(14px, 2.4vw, 32px); list-style: none; margin: 0; padding: 0; }
.links a { text-decoration: none; font: 15px/1 var(--sans); color: var(--ink-2); padding: 6px 0; }
.links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lume); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------------------------------------------------------------- keys
   .btn is a keycap, .btn-primary a Lume key. Both travel when pressed. */
.pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border: 1.5px solid var(--lume); border-radius: 999px; color: var(--lume); background: var(--lume-wash);
  font: 600 16px/1.2 var(--round);
}
.pill.ok, .pill.warn { min-height: 0; padding: 5px 12px; font-size: 14px; }
.pill.warn { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px 12px;
  border: 0; border-radius: 12px; text-decoration: none; cursor: pointer;
  font: 700 17px/1.1 var(--round); letter-spacing: -0.005em;
  color: var(--ink); background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  box-shadow: inset 0 1px 0 var(--cap-hi), 0 5px 0 var(--cap-side), 0 10px 16px -8px var(--shadow);
  transition: transform 150ms var(--spring), box-shadow 150ms var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 1px 0 var(--cap-hi), 0 1px 0 var(--cap-side); transition-duration: 40ms; }
.btn-primary { color: var(--on-lume); background: var(--lume); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 5px 0 var(--lume-side), 0 10px 16px -8px var(--shadow); }
.btn-primary:hover { color: var(--on-lume); }
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 var(--lume-side); }
.btn-outline {
  color: var(--lume); background: transparent; box-shadow: inset 0 0 0 1.5px var(--lume), 0 3px 0 var(--lume-wash);
}
.btn-outline:hover { color: var(--lume); background: var(--lume-wash); }
.btn-outline:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px var(--lume), 0 1px 0 var(--lume-wash); }
.btn-small { min-height: 38px; padding: 7px 14px 9px; border-radius: 10px; font-size: 15px; }
.btn-danger {
  color: var(--on-lume); background: var(--warn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 5px 0 color-mix(in srgb, var(--warn) 62%, #000), 0 10px 16px -8px var(--shadow);
}
.btn-danger:hover { color: var(--on-lume); }
.btn-danger:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 color-mix(in srgb, var(--warn) 62%, #000); }
.btn-small.btn-danger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 0 color-mix(in srgb, var(--warn) 62%, #000); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: default; opacity: 0.6; transform: none; }
/* before launch: the real label with a small SOON tag, dashed, no action,
   the same geometry as the live key that replaces it */
.btn-soon { gap: 10px; color: var(--ink-2); background: transparent; box-shadow: none; border: 1.5px dashed var(--cap-side); cursor: default; }
.btn-soon:hover { color: var(--ink-2); }
.btn-soon:active { transform: none; box-shadow: none; }
.btn-soon .soon { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; border-radius: 5px; background: var(--deck); }
.closer .btn-soon .soon { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.note { font: 14px/1.3 var(--mono); color: var(--ink-2); }

/* ---------------------------------------------------------------- page heads
   Every page opens like the home page: a big rounded title on the left, the
   words and the action on the right, then a strong rule. */
.hero-head, .page-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: end; gap: 32px; padding: clamp(20px, 3vw, 32px) 0 22px;
}
.page-head { padding: clamp(24px, 3.5vw, 44px) 0 clamp(18px, 2vw, 26px); border-bottom: 2px solid var(--rule-strong); }
h1 { margin: 0; font: 700 clamp(64px, 9vw, 128px)/0.86 var(--round); letter-spacing: -0.045em; text-wrap: balance; }
.page-head h1, .doc h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.sub { margin: 0 0 16px; font-size: 19px; line-height: 1.45; max-width: 36ch; }
.lede { margin: 0 0 16px; font-size: var(--fs-lede); line-height: 1.45; max-width: 40ch; }
.page-head .lede:last-child { margin-bottom: 0; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* ---------------------------------------------------------------- bands
   A section: a heading in the left column, its content in the right. */
.band {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 20px clamp(28px, 5vw, 80px);
  align-items: start; border-top: 1px solid var(--rule); padding-block: var(--section-y);
}
.page-head + .band { border-top: 0; padding-top: clamp(24px, 3vw, 40px); }
/* one section heading everywhere */
.band > h2, .band-title h2, .lookup h2, .privacy h2 {
  margin: 0; font: 700 var(--fs-h2)/1.08 var(--round); letter-spacing: -0.022em; max-width: 18ch; text-wrap: balance;
}
.band-title p { margin: 12px 0 0; color: var(--ink-2); max-width: 34ch; }
.band-body > :first-child { margin-top: 0; }
.band-body > p { max-width: 62ch; }
.band-body > p + .actions, .band-body > .ledger + .actions, .band-body > .actions + p { margin-top: 22px; }
/* the wide band: the title row above, the content across the full width */
.band-wide { grid-template-columns: minmax(0, 1fr); }
.band-wide .band-title { display: flex; justify-content: space-between; align-items: end; gap: 12px clamp(28px, 5vw, 80px); }
.band-wide .band-title p { margin: 0; max-width: 52ch; }
.fine { font: var(--fs-small)/1.5 var(--sans); color: var(--ink-2); max-width: 62ch; }
.band-body > .fine { margin: 16px 0 0; }
.thanks-fine { margin: 0 0 clamp(24px, 3vw, 40px); }
#other:not([hidden]) ~ .thanks-fine { display: none; }

/* thanks and license: utility pages, one column */
.utility .page-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.utility .band { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 14px; }
.utility .band > h2 { font: 600 var(--fs-h3)/1.3 var(--round); letter-spacing: -0.01em; max-width: none; }
#other[data-status="failed"] .page-head { border-bottom-color: var(--warn-line); }
#other[data-status="failed"] h1 { color: var(--warn); }
#other[data-status="processing"] h1::before {
  content: ""; display: inline-block; width: 0.32em; height: 0.32em; margin: 0 0.32em 0.12em 0; border-radius: 50%;
  background: var(--lume); vertical-align: middle; animation: wait 1.6s ease-in-out infinite;
}
@keyframes wait { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #other[data-status="processing"] h1::before { animation: none; } }

/* ---------------------------------------------------------------- ledgers
   Rows on rules, in SF Mono, like the file list. Numbered only when the
   rows are steps. */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-strong); }
.ledger > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 18px; padding: 14px 2px; border-bottom: 1px solid var(--rule); }
.ledger.kv > li { grid-template-columns: minmax(0, 13ch) minmax(0, 1fr); align-items: baseline; }
.ledger .key { font: var(--fs-mono)/1.4 var(--mono); color: var(--ink-2); }
.ledger strong { font-family: var(--round); }
ol.steps { counter-reset: step; }
ol.steps > li { counter-increment: step; display: block; position: relative; padding-left: 50px; }
ol.steps > li::before {
  content: counter(step); position: absolute; left: 2px; top: 12px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  font: 600 14px/1 var(--mono); color: var(--ink-2);
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  box-shadow: inset 0 1px 0 var(--cap-hi), 0 3px 0 var(--cap-side), 0 5px 8px -4px var(--shadow);
}
kbd.cap-key {
  display: inline-block; min-width: 2.2em; padding: 1px 8px 3px; border-radius: 6px; font: 500 0.82em/1.4 var(--mono); color: var(--ink-2);
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot)); box-shadow: inset 0 1px 0 var(--cap-hi), 0 2px 0 var(--cap-side);
}

/* questions: each one a ledger row that opens */
.faq { border-top: 2px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 2px; cursor: pointer; list-style: none;
  font: 600 var(--fs-body)/1.4 var(--round); letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1ch; font: 500 20px/1 var(--mono); color: var(--lume); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--lume); }
.faq details > div { padding: 0 2px 16px; max-width: var(--measure); color: var(--ink-2); }
.faq details > div p { margin: 0 0 10px; }

/* the families table as a ledger */
.families { width: 100%; border-collapse: collapse; font: var(--fs-mono)/1.3 var(--mono); }
.families caption { caption-side: top; text-align: left; padding: 0 2px 12px; color: var(--ink-2); font: var(--fs-mono)/1.4 var(--mono); }
.families thead th { font-weight: 500; color: var(--ink-2); font-size: var(--fs-micro); border-bottom: 2px solid var(--rule-strong); }
.families th, .families td { text-align: left; padding: 10px 2px; border-bottom: 1px solid var(--rule); }
.families th[scope="row"] { font-weight: 400; }
.families .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 22px; }
.tier { font-weight: 700; color: var(--lume); }
.families .tier-pro { color: var(--ink); }
/* formats.html: the same columns in every family's table */
.types { table-layout: fixed; }
.types th:first-child { width: 36%; }
.types th:last-child { width: 4.5em; }
.types td { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- home: the desk */
.desk {
  display: grid;
  grid-template-columns: minmax(340px, 500px) minmax(0, 1fr);
  grid-template-areas: "files stage" "board stage";
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 4.4vw, 68px);
  border-top: 2px solid var(--rule-strong);
  padding: 16px 0 64px;
}
.files { grid-area: files; font: 14px/1 var(--mono); outline: none; border-radius: 6px; }
.files:focus-visible { outline: 3px solid var(--lume); outline-offset: 6px; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) 9ch 8.5ch; gap: 14px; align-items: center;
  height: 27px; padding: 0 10px; border-bottom: 1px solid var(--rule); cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.row > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row .k { color: var(--ink-2); }
.row .s { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.row:hover { background: var(--lume-wash); }
.row[aria-selected="true"] { background: var(--lume); color: var(--on-lume); border-radius: 5px; border-bottom-color: transparent; }
.row[aria-selected="true"] .k, .row[aria-selected="true"] .s { color: inherit; }

.board { grid-area: board; padding-top: 14px; }
.meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 12px; }
.hint { margin: 0; font: 13px/1.3 var(--mono); color: var(--ink-2); }
.hint-t { display: none; }
@media (hover: none) and (pointer: coarse) { .hint-k { display: none; } .hint-t { display: inline; } }
.count { margin: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; font: 13px/1.2 var(--mono); color: var(--ink-2); text-align: right; }
.count-n { font: 700 36px/0.9 var(--round); color: var(--lume); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.well {
  padding: 10px 10px 16px; border-radius: 20px; background: var(--well);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.16), inset 0 -1px 0 var(--cap-hi);
}
.cap {
  position: relative; display: block; width: 100%; height: 78px; margin: 0; padding: 0;
  border: 0; border-radius: 13px; cursor: pointer; color: var(--ink-2);
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  box-shadow: inset 0 1px 0 var(--cap-hi), inset 0 -3px 0 rgba(0, 0, 0, 0.05),
              0 7px 0 var(--cap-side), 0 12px 18px -6px var(--shadow);
  transform: translateY(0);
  transition: transform 170ms var(--spring), box-shadow 170ms var(--spring);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cap::before { /* the shallow dish of a cap */
  content: ""; position: absolute; inset: 5px 9px 10px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.035), transparent 45%, var(--cap-hi));
  pointer-events: none;
}
.legend {
  position: absolute; left: 18px; bottom: 14px; font: 500 15px/1 var(--mono); letter-spacing: 0.02em;
  transition: color 120ms, text-shadow 120ms;
}
.cap.is-down {
  transform: translateY(6px);
  box-shadow: inset 0 1px 0 var(--cap-hi), inset 0 -2px 0 rgba(0, 0, 0, 0.04),
              0 1px 0 var(--cap-side), 0 3px 5px -3px var(--shadow);
  transition-duration: 45ms; transition-timing-function: ease-out;
}
.cap.is-down .legend, .cap.invite .legend { color: var(--lume); text-shadow: 0 0 14px var(--glow); }
.cap:focus-visible { outline-offset: 5px; border-radius: 13px; }
@media (prefers-reduced-motion: reduce) {
  .cap, .cap.is-down, .legend { transition: none; }
}

/* the stage: plain text under, the real render over */
.stage { grid-area: stage; position: relative; align-self: start; }
.qv { margin: 0; transform-origin: 50% 50%; }
.qv-panel {
  position: relative; container-type: inline-size; border-radius: 14px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--rule);
  box-shadow: 0 46px 70px -38px var(--shadow), 0 18px 30px -18px var(--shadow);
  user-select: none; -webkit-user-select: none;
}
.qv picture { display: block; position: relative; z-index: 1; }
.qv img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 640; }
.compare .qv img { clip-path: inset(0 0 0 var(--split, 40%)); }
.compare .qv-panel { touch-action: pan-y; cursor: ew-resize; }
.plain {
  display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--plain-bg); color: var(--plain-ink);
  font: 400 1.44cqw/1.55 var(--mono); padding: 2.2cqw 2.4cqw; white-space: pre; tab-size: 8; -moz-tab-size: 8;
}
.plain::before { content: attr(data-text); }
.compare .plain { display: block; }
.split {
  display: none; position: absolute; top: 0; bottom: 0; left: clamp(14px, var(--split, 40%), calc(100% - 14px)); z-index: 3;
  width: 44px; margin-left: -22px; cursor: ew-resize; touch-action: none; outline: none;
}
.compare .split { display: block; }
.split::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: var(--ink); }
.grip {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 48px; margin: -24px 0 0 -13px; border-radius: 8px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  box-shadow: inset 0 1px 0 var(--cap-hi), 0 0 0 1px var(--rule), 0 3px 0 var(--cap-side), 0 8px 14px -6px var(--shadow);
}
.grip::before, .grip::after { content: ""; position: absolute; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: var(--ink-3); }
.grip::before { left: 9px; } .grip::after { right: 9px; }
.split:focus-visible .grip { outline: 3px solid var(--lume); outline-offset: 3px; }
.tag {
  display: none; position: absolute; bottom: 10px; z-index: 2; pointer-events: none;
  font: 500 11px/1 var(--mono); padding: 5px 7px; border-radius: 5px;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule);
}
.compare .tag { display: block; }
.tag-l { left: 10px; } .tag-r { right: 10px; }
.qv figcaption { margin: 14px 2px 0; font: 14px/1.45 var(--mono); color: var(--ink-2); min-height: 2.9em; max-width: 64ch; }
.rest {
  position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 900 / 640; display: grid; place-items: center;
  border: 1.5px dashed var(--rule); border-radius: 14px; color: var(--ink-2);
  font: 500 clamp(18px, 2.2vw, 28px)/1.2 var(--mono); padding: 24px; text-align: center; visibility: hidden;
  overflow-wrap: anywhere;
}
.stage.is-closed .rest { visibility: visible; }
.stage.is-closed .qv { visibility: hidden; }

/* ---------------------------------------------------------------- home: lookup */
.lookup {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 16px clamp(28px, 5vw, 80px); align-items: start;
  /* the strong rule spans the content, like every other rule, not the gutters */
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) var(--gut) 0 / calc(100% - 2 * var(--gut)) 2px no-repeat;
  padding-block: var(--section-y); scroll-margin-top: 8px;
}
.lookup h2 { max-width: 14ch; }
.field { display: flex; align-items: baseline; border-bottom: 3px solid var(--rule-strong); }
.field:focus-within { border-bottom-color: var(--lume); box-shadow: 0 3px 0 var(--lume); }
.dot, .inp input, .ghost { font: 600 clamp(30px, 3.4vw, 48px)/1.2 var(--round); letter-spacing: -0.02em; }
.dot { color: var(--ink-3); padding-right: 0.02em; }
.inp { position: relative; flex: 1; min-width: 0; }
.inp input {
  width: 100%; border: 0; padding: 0; margin: 0; background: transparent; color: var(--ink); caret-color: var(--lume);
  outline: none; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.inp input::placeholder { color: var(--ink-3); opacity: 1; }
.ghost { position: absolute; inset: 0; white-space: pre; overflow: hidden; pointer-events: none; color: var(--ink-3); }
.ghost-typed { visibility: hidden; }
.answer { margin: 12px 0 0; min-height: 2.9em; font: 500 var(--fs-lede)/1.45 var(--round); max-width: 46ch; }
.answer .ext { font: 600 0.9em var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
.chips button {
  font: 500 var(--fs-mono)/1 var(--mono); color: var(--ink); padding: 10px 13px 11px; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  box-shadow: inset 0 1px 0 var(--cap-hi), 0 3px 0 var(--cap-side), 0 5px 8px -4px var(--shadow);
  transition: transform 120ms var(--spring), box-shadow 120ms;
}
.chips button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--cap-hi), 0 0 0 var(--cap-side); transition-duration: 40ms; }
@media (prefers-reduced-motion: reduce) { .chips button { transition: none; } }

/* ---------------------------------------------------------------- home: extras, privacy */
/* Finder thumbnails and the app: one row of two, title, line, picture */
.extras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto;
  gap: 32px clamp(24px, 3vw, 48px); border-top: 1px solid var(--rule); padding-block: var(--section-y);
}
.extra { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
.extra h3 { margin: 0; font: 600 var(--fs-h3)/1.3 var(--round); letter-spacing: -0.01em; }
.extra p { margin: 0; color: var(--ink-2); max-width: 34ch; }
.extra figure, .frame { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--panel); }
.extra figure { margin-top: 8px; aspect-ratio: 3 / 2; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.extra figure > picture { display: contents; }
.extra figure img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.frame img { display: block; width: 100%; height: auto; }
/* the thumbnails are a light-only render: a light mat, inset, in dark mode too */
.shot-thumbs { background: #F2F4F5; }
@media (prefers-color-scheme: dark) {
  .extra figure.shot-thumbs { background: var(--panel); padding: 10px; }
  .shot-thumbs img { background: #F2F4F5; border-radius: 7px; }
}

.privacy {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 16px clamp(28px, 5vw, 80px); align-items: start;
  background: linear-gradient(var(--rule), var(--rule)) var(--gut) 0 / calc(100% - 2 * var(--gut)) 1px no-repeat;
  padding-block: var(--section-y);
}
.privacy p { margin: 0; font-size: var(--fs-lede); line-height: 1.45; max-width: 40ch; }

/* ---------------------------------------------------------------- price: the closing band
   Calm and centered: one headline, one plain line, the price as a figure
   (a little larger than the headline, never huge), three facts, two keys.
   Lume only on the tag and the live primary key. */
.closer {
  background: var(--deck); border-top: 2px solid var(--rule-strong);
  padding: var(--closer-y) 0; text-align: center; scroll-margin-top: 0;
}
.closer-compact { padding: clamp(32px, 4vw, 48px) 0; border-top: 0; }
.closer .wrap { display: flex; flex-direction: column; align-items: center; }
.closer h2 { margin: 0; font: 700 var(--fs-h2)/1.08 var(--round); letter-spacing: -0.022em; max-width: 20ch; text-wrap: balance; }
.closer-sub { margin: 12px 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); max-width: 46ch; text-wrap: balance; }
.closer-price { margin: 32px 0 0; display: grid; justify-items: center; gap: 10px; }
.closer-compact .closer-price { margin-top: 0; }
.closer-amount { margin: 0; display: inline-flex; align-items: baseline; gap: 10px; color: var(--ink); }
.closer-tag { align-self: center; padding: 4px 8px; border-radius: 6px; font: 600 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--lume); box-shadow: inset 0 0 0 1.5px var(--lume-line); }
.closer-amount strong { font: 700 var(--fs-price)/1 var(--round); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.closer-unit { font: 500 var(--fs-body)/1 var(--round); color: var(--ink-2); }
.closer-facts { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; font: var(--fs-mono)/1.5 var(--mono); color: var(--ink-2); }
.closer-facts li { white-space: nowrap; }
.closer-facts li + li::before { content: "\00B7" / ""; padding: 0 .6em; color: var(--ink-3); }
.closer-actions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 28px; gap: 12px 16px; }
.closer-aside { margin: 20px 0 0; font: var(--fs-mono)/1.5 var(--mono); color: var(--ink-2); max-width: 72ch; text-wrap: balance; }
.closer + .band { border-top: 0; }

/* plain view and rich view, side by side (pricing) */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 28px; }
.pair:last-child { margin-bottom: 0; }
.pair figcaption { grid-column: 1 / -1; font: var(--fs-mono)/1.4 var(--mono); color: var(--ink-2); }
.pair h3 { margin: 0 0 8px; font: 500 var(--fs-mono)/1.3 var(--mono); color: var(--ink-2); }

/* ---------------------------------------------------------------- thanks: the key
   A flat panel, not a key: the key itself is the thing to copy. */
.key-slab {
  display: grid; gap: 16px; padding: clamp(20px, 3vw, 28px); border-radius: 16px;
  background: var(--panel); box-shadow: 0 0 0 1px var(--rule), 0 16px 24px -16px var(--shadow);
}
.key-slab .fine { margin: 0; }
.key-slab .actions:empty { display: none; }
.key-slab label { font: 600 var(--fs-mono)/1 var(--mono); color: var(--lume); }
.key-row { display: flex; gap: 14px; align-items: center; }
.key-row input {
  flex: 1; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 10px; color: var(--ink);
  font: 600 clamp(17px, 1.8vw, 20px)/1.3 var(--mono); letter-spacing: 0.02em; background: var(--paper); text-overflow: ellipsis;
}
.key-row input:focus-visible { outline: 3px solid var(--lume); outline-offset: 2px; }
#copy { min-width: 7.5em; }
.form-note { margin: 0; min-height: 1.4em; font: var(--fs-mono)/1.4 var(--mono); color: var(--lume); }
.form-note:empty { display: none; }
@media (hover: none) and (pointer: coarse) { #open-app { display: none; } .key-slab .actions:has(> #open-app:only-child) { display: none; } }

/* ---------------------------------------------------------------- license: the form and the Macs */
.form-field { display: grid; gap: 6px; margin-bottom: 22px; max-width: 520px; }
.form-field label { font: 500 var(--fs-mono)/1.3 var(--mono); color: var(--ink-2); }
.form-field input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--rule-strong); border-radius: 10px; background: var(--panel);
  color: var(--ink); caret-color: var(--lume); font: 500 19px/1.3 var(--sans);
  -webkit-appearance: none; appearance: none;
}
.form-field #key { font: 500 18px/1.3 var(--mono); letter-spacing: .02em; }
.form-field input:focus { border-color: var(--lume); }
.form-field input:focus-visible { outline: 3px solid var(--lume); outline-offset: 4px; }
.form-field input[aria-invalid="true"] { border-color: var(--warn-line); background: var(--warn-bg); }
.form-field input[aria-invalid="true"]:focus { border-color: var(--warn); }
.field-error { margin: 0; font: 500 14px/1.4 var(--sans); color: var(--warn); }
.form-error {
  margin: 20px 0 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--warn-line);
  background: var(--warn-bg); color: var(--warn); font: 500 var(--fs-small)/1.5 var(--sans); max-width: 36em;
}
.license-result { margin-top: clamp(28px, 3.5vw, 40px); }
.license-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--rule-strong); }
.small-head { margin: 0; font: 600 var(--fs-h3)/1.3 var(--round); letter-spacing: -0.01em; }
#result-title:focus { outline: none; }
#result-title:focus-visible { outline: 2px solid var(--lume-line); outline-offset: 4px; border-radius: 4px; }
.license-result > .meta { display: block; margin: 12px 2px; font: var(--fs-mono)/1.4 var(--mono); color: var(--ink-2); }
.devices { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--rule); }
.device { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 2px; border-bottom: 1px solid var(--rule); }
.device > div:first-child { display: grid; gap: 2px; min-width: 0; }
.device strong { font: 600 var(--fs-body)/1.3 var(--round); overflow-wrap: anywhere; }
.device .meta { font: var(--fs-mono)/1.3 var(--mono); color: var(--ink-2); }
.device.empty { font: var(--fs-mono)/1.4 var(--mono); color: var(--ink-2); }
.device-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.confirm-text { font: 600 var(--fs-small)/1.3 var(--round); }

/* ---------------------------------------------------------------- documents
   Support, privacy, terms, release notes, press: a ledger of contents on
   the left, the text on the right. Prose keeps to the measure; tables and
   ledgers use the column. */
.doc-layout {
  display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px);
  align-items: start; padding: clamp(24px, 3.5vw, 44px) var(--gut) clamp(48px, 6vw, 80px);
}
/* one entry needs no contents */
.doc-layout:has(.toc li:only-child) { grid-template-columns: minmax(0, 1fr); }
.toc:has(li:only-child) { display: none; }
.toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.toc .toc-title { margin: 0 0 10px; font: 500 var(--fs-mono)/1.3 var(--mono); color: var(--ink-2); }
.toc ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-strong); font: var(--fs-mono)/1.35 var(--mono); }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a { display: block; padding: 8px 8px; text-decoration: none; color: var(--ink-2); border-radius: 5px; }
.toc a:hover { background: var(--lume-wash); color: var(--ink); }
.doc { min-width: 0; max-width: 54em; }
.doc .stamp { margin: 14px 0 0; padding-bottom: 20px; border-bottom: 2px solid var(--rule-strong); font: var(--fs-small)/1.5 var(--sans); color: var(--ink-2); max-width: none; }
.doc .stamp-date { font: var(--fs-mono)/1.5 var(--mono); }
.doc h2 { margin: 44px 0 12px; font: 700 clamp(22px, 2vw, 28px)/1.15 var(--round); letter-spacing: -0.015em; scroll-margin-top: 16px; text-wrap: balance; }
.doc h3 { margin: 28px 0 8px; font: 600 var(--fs-h3)/1.3 var(--round); scroll-margin-top: 16px; }
.doc p, .doc li { line-height: 1.6; }
.doc > p, .doc > ul:not(.press-grid), .doc > ol:not(.ledger), .doc .prose > p, .doc .prose > ul, .doc .prose > ol,
.release > p, .release > ul { max-width: var(--measure); }
.doc .faq { max-width: calc(var(--measure) + 4em); }
.doc ul, .doc ol:not(.ledger) { padding-left: 1.3em; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--ink-3); }
/* the policy tables (generated from Markdown) */
.table-scroll { margin: 18px 0; overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: 4px; }
.table-scroll table { width: 100%; border-collapse: collapse; font: var(--fs-small)/1.5 var(--sans); }
.table-scroll th, .table-scroll td { text-align: left; vertical-align: top; padding: 10px 14px 10px 2px; border-bottom: 1px solid var(--rule); }
.table-scroll thead th { font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--ink-2); border-bottom: 2px solid var(--rule-strong); }
.doc .faq, .doc .ledger { margin: 18px 0; }
.release { padding-top: 6px; }
.release + .release { margin-top: 24px; border-top: 1px solid var(--rule); }
.release-meta { margin: -4px 0 14px; font: var(--fs-mono)/1.4 var(--mono); color: var(--ink-2); }

/* press kit */
.factsheet { width: 100%; border-collapse: collapse; border-top: 2px solid var(--rule-strong); margin: 0 0 8px; font-size: var(--fs-small); line-height: 1.5; }
.factsheet th, .factsheet td { text-align: left; vertical-align: top; padding: 11px 2px; border-bottom: 1px solid var(--rule); }
.factsheet th { width: 13em; padding-right: 18px; font: 500 var(--fs-micro)/1.6 var(--mono); color: var(--ink-2); }
.doc .press-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.press-grid li { margin: 0; }
.press-grid figure { margin: 0; }
.press-grid .frame { display: block; }
.press-grid .frame img { aspect-ratio: 16 / 10; object-fit: contain; background: var(--panel); }
.press-grid figcaption { margin-top: 10px; font-size: var(--fs-small); line-height: 1.45; }
.press-grid .meta { display: block; font: var(--fs-mono)/1.4 var(--mono); color: var(--ink-2); }

/* ---------------------------------------------------------------- 404 */
.lost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(40px, 6vw, 88px); }
.lost h1 { font-size: clamp(44px, 6vw, 80px); line-height: 0.95; letter-spacing: -0.035em; }
.lost .lede { margin-top: 20px; }
.lost .actions { margin-top: 24px; }
.lost-key { display: grid; gap: 18px; }
.lost-key .rest { position: relative; visibility: visible; inset: auto; aspect-ratio: 900 / 520; }
.lost-key .cap { cursor: default; }

/* ---------------------------------------------------------------- footer */
.foot { margin-top: auto; border-top: 2px solid var(--rule-strong); padding: 32px 0 56px; font: var(--fs-micro)/1.6 var(--mono); color: var(--ink-2); }
.foot ul { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0 0 10px; padding: 0; }
.foot li:not(:last-child)::after { content: "\00B7" / ""; padding: 0 0.6em; }
.foot a { display: inline-block; padding: 5px 0; text-decoration: none; }
.foot a:hover, .foot a[aria-current="page"] { text-decoration: underline; }
.foot p { margin: 0 0 4px; max-width: 100ch; color: var(--ink-fine); }
/* the trademark line: the last thing on the page, across the whole wrap,
   smaller and a step quieter (#667075 on paper 4.63:1, #7C8589 on dark
   paper 4.59:1: AA for small text) */
.foot .foot-legal {
  max-width: none; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 12px; line-height: 1.5; color: var(--ink-fine);
}

/* ---------------------------------------------------------------- touch: 44 px targets */
@media (pointer: coarse) {
  .links a { padding: 15px 0; }
  .brand { min-height: 44px; }
  .foot a { padding: 12px 0; }
  .chips button { min-height: 44px; }
  .btn-small { min-height: 44px; }
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 900px) {
  .hero-head, .page-head { grid-template-columns: 1fr; gap: 18px; padding-bottom: 20px; }
  .page-head { gap: 14px; padding-bottom: 22px; }
  .sub, .lede { font-size: 17px; }
  .desk {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "files" "board"; grid-template-rows: auto;
    padding: 0 0 40px; border-top: 0;
  }
  .stage {
    position: sticky; top: 0; z-index: 4; background: var(--paper);
    margin: 0 calc(-1 * var(--gut)); padding: 12px var(--gut) 10px; border-top: 2px solid var(--rule-strong);
  }
  .rest { left: var(--gut); right: var(--gut); top: 12px; }
  .qv figcaption { font-size: 12.5px; margin-top: 8px; min-height: 2.9em; }
  .tag { font-size: 10px; bottom: 6px; padding: 4px 5px; }
  .tag-l { left: 6px; } .tag-r { right: 6px; }
  .grip { width: 22px; height: 40px; margin: -20px 0 0 -11px; }
  .grip::before, .grip::after { top: 12px; bottom: 12px; }
  .grip::before { left: 7px; } .grip::after { right: 7px; }
  .files { font-size: 13px; }
  .row { height: 36px; gap: 10px; grid-template-columns: minmax(0, 1fr) 8.5ch 8.5ch; padding: 0 8px; }
  .board {
    position: sticky; bottom: 0; z-index: 4; background: var(--deck);
    margin: 18px calc(-1 * var(--gut)) 0; padding: 10px var(--gut) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
  }
  .meta { margin-bottom: 8px; }
  .count-n { font-size: 28px; }
  .cap { height: 60px; }
  .well { padding: 7px 7px 13px; border-radius: 16px; }
  .lookup, .privacy, .band, .lost { grid-template-columns: minmax(0, 1fr); }
  .lookup h2, .band > h2, .band-title h2, .privacy h2 { max-width: none; }
  .band-wide .band-title { display: block; }
  .band-wide .band-title p { margin-top: 12px; }
  .extras { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .extra { grid-row: auto; grid-template-rows: none; }
  .extra figure { aspect-ratio: auto; grid-template: none; }
  .extra figure img { height: auto; }
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* the contents as one row of chips that scrolls to the screen's edge */
  .toc { position: static; max-height: none; overflow: visible; }
  .toc .toc-title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .toc ol {
    display: flex; gap: 8px; overflow-x: auto; border-top: 0; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 4px; scroll-padding-inline: var(--gut);
  }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc li { flex: none; border: 0; }
  .toc a { white-space: nowrap; border: 1px solid var(--rule); border-radius: 999px; padding: 12px 14px; }
  /* policy tables: each row a stack of labelled values */
  .table-scroll thead { display: none; }
  .table-scroll tr { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .table-scroll tbody tr:first-child { border-top: 2px solid var(--rule-strong); }
  .table-scroll td { display: block; padding: 0; border: 0; }
  .table-scroll td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--ink-2); }
  .doc .press-grid, .pair { grid-template-columns: minmax(0, 1fr); }
  .factsheet th { width: 8.5em; }
  .key-row { flex-wrap: wrap; }
  .key-row input { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .closer-actions { flex-direction: row; width: 100%; }
  .closer-actions > * { flex: 1 1 220px; white-space: nowrap; }
  .closer-facts { flex-direction: column; align-items: center; }
  .closer-facts li + li::before { content: none; }
  .foot li:not(:last-child)::after { content: none; }
  .foot ul { gap: 0 20px; }
}
@media (max-width: 440px) {
  .brand span { display: none; }
  .links { gap: 16px; }
  .links a { font-size: 14px; }
  .ledger.kv > li { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .top, .foot, .toc, .board { display: none; }
  body { background: #fff; color: #000; }
}