/* TONO website — the light pages: features, guides, comparisons, the fact sheet and the explainer
   (generated by tools/build-pages.py). Loaded after base.css, never with home.css: no WebGL, no scroll
   engine, no script of their own. The same kit as the landing page (Docs/DESIGN-2.md): Alu or Graphit,
   printed silkscreen, black-glass windows for the one readout, the machined model plate for specs, and
   the one signal orange only where something is on. */

/* ── Breadcrumbs: printed like the kicker ─────────────────────────────────── */
.crumbs { margin-bottom: 26px; font: 500 10.5px/1.5 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.crumbs ol { display: flex; flex-wrap: wrap; row-gap: 4px; }
.crumbs li { display: flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "›"; content: "›" / ""; margin: 0 .8em; opacity: .7; }
.crumbs a { color: var(--ink2); text-decoration: none; padding: 4px 0; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink3); }
.crumbs [aria-current] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 0; }

/* ── The head: the answer first, the knob and the one readout in glass ───── */
/* Three parts: the copy (kicker, h1, answer), the side (the knob over the glass), the keys with the spec line. Wide:
   the side stands right of both, as on the Open Graph card: the knob level with the headline, the glass on the spec
   line's baseline. Narrow: copy, glass, keys, one under the other; no knob. */
.dochead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); grid-template-areas: "copy side" "act side"; column-gap: 64px; align-items: end; padding-bottom: 44px; margin-bottom: 56px; border-bottom: 2px solid var(--ink); }
.dochead--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "act"; }
.dochead__copy { grid-area: copy; min-width: 0; align-self: start; }
.dochead__side { grid-area: side; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; }
.dochead__act { grid-area: act; min-width: 0; }
/* The poster is the WebGL knob's own render (1100 px, alpha): the knob sits in its middle with room for the shadow, so
   the picture is pulled up until the scale's top dot stands level with the headline's cap height. */
.dochead__knob { display: block; width: min(100%, 340px); margin: calc(44px - 23%) auto -20%; pointer-events: none; }
.dochead__knob img { width: 100%; height: auto; }
.dochead .kicker { margin-bottom: 20px; }
.dochead h1 { font-size: clamp(38px, 5vw, 74px); font-weight: 790; font-stretch: 108%; letter-spacing: -.04em; line-height: .98; text-wrap: balance; max-width: 15em; }
/* Display type breaks between words only: no automatic hyphens in a headline (they split names and short words).
   Long German compounds carry their own soft hyphen in the source (Rausch­unterdrückung), and short hyphenated
   compounds are kept on one line by the build (.nw). The last resort never lets a word overflow. */
.dochead h1, .docbody > h2, .band__h, .pagelist b, .pagegrid b { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.nw { white-space: nowrap; }
.answer { margin-top: 26px; max-width: 37em; font-size: clamp(17.5px, 1.35vw, 20px); line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.answer b, .answer strong { color: var(--ink); font-weight: 620; }
.answer a { color: var(--ink); }
.answer-more { display: none; }
.dochead .cta { margin-top: 30px; }
.dochead .spec { margin-top: 24px; }
.readout .lcd__glass { display: grid; gap: 10px; padding: 18px 20px 20px; min-height: 176px; align-content: space-between; }
.readout__top { display: flex; align-items: center; gap: 8px; font: 500 9.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.readout__big { font-size: clamp(46px, 4.4vw, 64px); color: var(--lcd); overflow-wrap: anywhere; }
.readout__big--long { font-size: clamp(36px, 3.3vw, 48px); }
.readout__hint { font-size: 14px; line-height: 1.4; color: var(--lcd-dim); }

/* ── Body: a document column, the contents printed beside it ──────────────── */
.doc { display: grid; grid-template-columns: 200px minmax(0, 780px); gap: 64px; align-items: start; }
.doc--single { grid-template-columns: minmax(0, 780px); }
/* hubs: the page lists span the whole faceplate; the words keep the reading measure */
.doc--wide { grid-template-columns: minmax(0, 1fr); }
.doc--wide .docbody > :not(.pagegrid):not(.tiers):not(h2) { max-width: 780px; }
.toc { position: sticky; top: calc(var(--nav-h) + 32px); font-size: 14px; }
.toc p { font: 500 9.5px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 14px; }
.toc ol { display: grid; gap: 2px; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--ink2); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--ink); border-left-color: var(--ink); }
.docbody { font-size: 17px; line-height: 1.65; color: var(--ink2); min-width: 0; }
.docbody > * + * { margin-top: 18px; }
.docbody > h2 { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: clamp(24px, 2.2vw, 30px); font-weight: 750; font-stretch: 106%; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); text-wrap: balance; }
/* the first section sits right under the head's ink rule: no second, thinner line */
.docbody > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.docbody > h3 { margin-top: 34px; font: 700 12px/1.35 var(--f-sans); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.docbody > h3 + * { margin-top: 10px; }
.docbody b, .docbody strong { color: var(--ink); font-weight: 630; }
.docbody a { color: var(--ink); }
.docbody .list a { overflow-wrap: anywhere; }
.docbody > ul:not(.pagelist) li, .docbody .list li { position: relative; padding-left: 20px; }
.docbody > ul:not(.pagelist) li + li, .docbody .list li + li { margin-top: 8px; }
.docbody > ul:not(.pagelist) li::before, .docbody .list li::before { content: ""; position: absolute; left: 3px; top: .74em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); }
.page code, .page kbd { font: 500 .84em/1 var(--f-mono); font-stretch: 87.5%; color: var(--ink); }
/* a key is a keycap wherever it is printed: in the answer, the body and the spec plate */
.page kbd { display: inline-block; padding: .28em .5em .24em; margin: 0 .08em; border-radius: 5px; background: linear-gradient(180deg, var(--key-a), var(--key-b)); box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 0 var(--rim-hi), 0 1px .5px var(--key-base); white-space: nowrap; }
.page kbd .kg { --kw: 100; }
.docbody .fine, .docbody small { font-size: 14px; color: var(--ink3); }
.docbody .lede-after { font-size: 18.5px; color: var(--ink); }

/* numbered steps: the landing's step rows, one column */
.docbody .steps { counter-reset: st; border-top: 1px solid var(--rule); }
.docbody .steps > li { display: grid; grid-template-columns: 42px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--rule); }
.docbody .steps > li::before { counter-increment: st; content: counter(st, decimal-leading-zero); font: 500 10.5px/2.3 var(--f-mono); letter-spacing: .08em; color: var(--ink3); }
.docbody .steps > li > * + * { margin-top: 8px; }

/* a recessed note: dates, disclosures, limits */
.docbody .well, .notice { padding: 16px 20px; border-radius: 12px; font-size: 15px; line-height: 1.55; color: var(--ink2); }
.notice { box-shadow: inset 0 0 0 1px var(--rule); }
.docbody .well > * + *, .notice > * + * { margin-top: 8px; }
.notice__k { display: block; font: 500 9.5px/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 6px; }

/* ── Screens: the real app, in the visitor's finish ───────────────────────── */
/* Wide: a screen uses the room right of the reading column (as the wide tables do), so the app's labels print at 0.75
   (the whole window) to 0.9 (a page) of their size instead of 0.6–0.7. */
.shot { margin-top: 36px !important; }
.shot picture, .shot > a { display: block; border-radius: 14px; overflow: hidden; background: var(--well); box-shadow: 0 0 0 .5px rgb(40 36 28 / .3), 0 2px 4px rgb(40 36 28 / .08), 0 40px 80px -34px rgb(40 36 28 / .45); }
.shot img { width: 100%; height: auto; }
/* A caption: the figure number printed in mono, the sentence in the landing's hint type (not letterspaced code). */
.docbody .fig { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: baseline; margin-top: 16px; font-size: 10px; line-height: 1.4; }
.docbody .fig b { margin: 0; white-space: nowrap; }
.docbody .fig > span { max-width: 62ch; font: 440 14.5px/1.5 var(--f-sans); font-stretch: 100%; letter-spacing: 0; color: var(--ink2); text-wrap: pretty; }
/* a figure whose phone crop shows less than the whole window names only what the crop shows there */
.docbody .fig > .fig__phone { display: none; }

/* ── The signal path, drawn in glass (the explainer) ─────────────────────── */
.flowfig { margin-top: 32px !important; }
.flowfig .lcd__glass { padding: 12px 10px 8px; }
.sflow { display: block; width: 100%; height: auto; overflow: visible; }
.sflow--tall { display: none; max-width: 440px; margin-inline: auto; }
.sflow text { fill: var(--lcd); }
.sflow .sf-h { font-family: var(--f-sans); font-stretch: 62%; font-weight: 780; font-size: 24px; letter-spacing: .005em; }
.sflow .sf-t, .sflow .sf-v { font-family: var(--f-sans); font-stretch: 62%; font-weight: 760; font-size: 16px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.sflow .sf-m, .sflow .sf-k, .sflow .sf-s { font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 500; font-size: 9px; letter-spacing: .06em; fill: var(--lcd-dim); }
.sflow .sf-k { font-size: 8.5px; letter-spacing: .1em; }
.sf-box { fill: rgb(242 237 226 / .025); stroke: rgb(242 237 226 / .28); stroke-width: 1; }
.sf-node { fill: rgb(242 237 226 / .06); stroke: rgb(242 237 226 / .5); stroke-width: 1; }
.sf-tono { fill: none; stroke: rgb(242 237 226 / .62); stroke-width: 1.25; }
.sf-sig, .sf-mic { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 5.5; }
.sf-sig { stroke: var(--signal); }
.sf-mic { stroke: var(--lcd); }
.sf-sig-tip { fill: var(--signal); }
.sf-mic-tip { fill: var(--lcd); }
.sf-by { fill: none; stroke: var(--lcd-dim); stroke-width: 1.1; stroke-dasharray: 3 4; }
.sf-by-tip { fill: var(--lcd-dim); }
.sf-mask { fill: var(--glass); }
.sf-led { fill: var(--signal); }
@media (max-width: 720px) {
  .sflow--wide { display: none; }
  .sflow--tall { display: block; }
}

/* ── The model plate: specifications, machined (as on the landing page) ──── */
.specplate { --sp-a: #eeebe5; --sp-b: #d5d1c8; --sp-ink: #1a1a18; --sp-ink2: #4f4b44; --sp-groove: rgb(0 0 0 / .17); --sp-lip: rgb(255 255 255 / .6); --sp-brush: rgb(255 255 255 / .16);
  --sp-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(0 0 0 / .14), 0 0 0 1px rgb(0 0 0 / .16), 0 2px 2px rgb(74 69 60 / .14), 0 40px 80px -40px rgb(74 69 60 / .5);
  position: relative; border-radius: 16px; padding: 36px 40px 22px; color: var(--sp-ink); margin-top: 28px !important;
  background: repeating-linear-gradient(90deg, var(--sp-brush) 0 1px, rgb(0 0 0 / .025) 1px 2px, transparent 2px 3px), linear-gradient(180deg, var(--sp-a), var(--sp-b));
  box-shadow: var(--sp-shadow); }
:root[data-finish="graphit"] .specplate { --sp-a: #3c3c38; --sp-b: #2a2a27; --sp-ink: #ece9e2; --sp-ink2: #b3afa6; --sp-groove: rgb(0 0 0 / .55); --sp-lip: rgb(255 255 255 / .07); --sp-brush: rgb(255 255 255 / .035);
  --sp-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .6), 0 40px 80px -40px rgb(0 0 0 / .9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-finish="alu"]) .specplate { --sp-a: #3c3c38; --sp-b: #2a2a27; --sp-ink: #ece9e2; --sp-ink2: #b3afa6; --sp-groove: rgb(0 0 0 / .55); --sp-lip: rgb(255 255 255 / .07); --sp-brush: rgb(255 255 255 / .035);
    --sp-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .6), 0 40px 80px -40px rgb(0 0 0 / .9); }
}
.specplate__h { font: 820 13px/1.2 var(--f-sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 18px; text-shadow: 0 1px 0 var(--sp-lip); display: flex; align-items: center; gap: 12px; }
.specplate__h svg { width: 22px; height: 22px; flex: none; }
.screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b7b1a6 55%, #8a8478); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .35), 0 1px 0 var(--sp-lip); }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; margin-top: -.5px; background: rgb(0 0 0 / .45); transform: rotate(var(--r, 30deg)); }
.screw:nth-child(1) { left: 14px; top: 14px; } .screw:nth-child(2) { right: 14px; top: 14px; --r: 110deg; } .screw:nth-child(3) { left: 14px; bottom: 14px; --r: 70deg; } .screw:nth-child(4) { right: 14px; bottom: 14px; --r: 160deg; }
.sheet { border-top: 1px solid var(--sp-groove); box-shadow: inset 0 1px 0 var(--sp-lip); }
.sheet > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 13px 0 14px; border-bottom: 1px solid var(--sp-groove); box-shadow: 0 1px 0 var(--sp-lip); }
.sheet > div:last-child { border-bottom: 0; box-shadow: none; }
.sheet dt { font: 700 10.5px/1.5 var(--f-sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; color: var(--sp-ink); }
.sheet dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--sp-ink2); }

/* ── Free and Pro: the landing's pricing-card lists, without the prices' glass ── */
.tiers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; margin-top: 26px !important; align-items: stretch; }
.tier { border-radius: 20px; padding: 26px 26px 28px; display: flex; flex-direction: column; }
.tier__name { font: 780 22px/1 var(--f-sans); font-stretch: 112%; letter-spacing: -.01em; color: var(--ink); }
.tier__line { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink2); }
.tier__plus { margin-top: 20px; font: 500 9.5px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.tier__list { margin-top: 18px; display: grid; gap: 11px 20px; align-content: start; }
.tier__plus + .tier__list { margin-top: 12px; }
.tier__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.35; color: var(--ink); }
.tier__list svg { width: 16px; height: 16px; margin-top: 1px; color: var(--ink); }
.tier__list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink2); }
/* the keys stand on the card's foot, level in both cards; Free says what the trial is, as on the landing page's card */
.tier__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 18px; }
.docbody .tier__trial { padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.tier__trial b { color: var(--ink); font-weight: 620; }
.tier__keys { display: flex; flex-wrap: wrap; gap: 10px; }
.docbody .tier__keys .key { color: var(--ink); text-decoration: none; }
.docbody .tier__keys .key--latched { color: var(--on-control); }
.tier--pro .tier__list { grid-template-columns: 1fr 1fr; }
.tier--pro { color: #ece9e2; --ink: #ece9e2; --ink2: #aba79e; --ink3: #9c988f; --rule: rgb(236 233 226 / .12); --well: #1f1f1d; --key-a: #3b3b37; --key-b: #30302d; --rim-hi: rgb(255 255 255 / .16); --rim-lo: rgb(0 0 0 / .5); --key-base: rgb(0 0 0 / .7); --cast: rgb(0 0 0 / .4); --control: #d6d3cb; --control-hi: #f3f1ec; --control-lo: #a9a59c; --on-control: #1a1a18; --edge-light: rgb(255 255 255 / .09); --edge-dark: rgb(0 0 0 / .55); --plate-a: #3b3b38; --plate-b: #2f2f2c; --plate-c: #282826; --grain: .7; }
.tier--pro :focus-visible { outline-color: #ece9e2; }
.tier--pro.device { box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset, 0 0 0 1px rgb(0 0 0 / .55) inset, 0 50px 90px -30px rgb(40 36 28 / .6), 0 12px 24px -12px rgb(40 36 28 / .4); }
/* Graphit: both cards would be the same dark slab, so Pro becomes a lighter anodized panel with a bright edge */
:root[data-finish="graphit"] .tier--pro { --plate-a: #4d4c48; --plate-b: #403f3b; --plate-c: #373632; --key-a: #4f4e4a; --key-b: #43423e; --ink3: #b1ada4; --edge-light: rgb(255 255 255 / .12); --grain: .55; }
:root[data-finish="graphit"] .tier--pro.device { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .6), 0 50px 90px -30px rgb(0 0 0 / .85), 0 14px 28px -12px rgb(0 0 0 / .6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-finish="alu"]) .tier--pro { --plate-a: #4d4c48; --plate-b: #403f3b; --plate-c: #373632; --key-a: #4f4e4a; --key-b: #43423e; --ink3: #b1ada4; --edge-light: rgb(255 255 255 / .12); --grain: .55; }
  :root:not([data-finish="alu"]) .tier--pro.device { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .6), 0 50px 90px -30px rgb(0 0 0 / .85), 0 14px 28px -12px rgb(0 0 0 / .6); }
}
.doc--wide .tier--pro .tier__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Tables: comparisons and facts ───────────────────────────────────────── */
.docbody .table { margin-top: 26px; }
.docbody table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.docbody caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 13px; color: var(--ink3); }
.docbody th, .docbody td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.docbody thead th { font: 500 9.5px/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.docbody tbody th { color: var(--ink); font-weight: 620; width: 28%; }
.docbody table:has(thead th:nth-child(4)) tbody th { width: auto; }
.docbody td.us { color: var(--ink); }
.docbody td .yes, .docbody td .no { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; }
.docbody td .no { color: var(--ink3); }
/* An overview with many columns leaves the reading column for the room right of it; where even that is too narrow
   it scrolls sideways under its row names, which stay put. */
.docbody .table--wide { overflow-x: auto; overscroll-behavior-x: contain; }
.docbody .table--wide table { min-width: 880px; font-size: 14.5px; }
.docbody .table--wide tbody th, .docbody .table--wide thead th:first-child { position: sticky; left: 0; z-index: 1; width: 118px; background: var(--bg) url("../img/grain.png") 0 0 / 128px; }
@media (min-width: 1101px) {
  .page > .wrap { container-type: inline-size; }
  .doc:not(.doc--single) .docbody > .table--wide, .doc:not(.doc--single) .docbody > .shot { width: calc(100cqw - 264px); }
  .doc--single .docbody > .table--wide, .doc--single .docbody > .shot { width: 100cqw; }
}

/* ── FAQ: the landing page's question rows ───────────────────────────────── */
.qa { counter-reset: q; margin-top: 22px !important; }
.qa details { border-bottom: 1px solid var(--rule); counter-increment: q; }
.qa details:first-child { border-top: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 36px 1fr 14px; gap: 10px; align-items: center; padding: 19px 0; font-size: 17.5px; font-weight: 620; line-height: 1.35; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: counter(q, decimal-leading-zero); font: 500 10px/1 var(--f-mono); letter-spacing: .08em; color: var(--ink3); }
.qa summary::after { content: ""; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) 50% 50% / 13px 1.3px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.3px 13px no-repeat; transition: transform .2s var(--ease); opacity: .7; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa .answer-text { padding: 0 34px 22px 46px; display: grid; gap: 10px; font-size: 16px; line-height: 1.6; }

/* ── Lists of pages: "keep reading" ──────────────────────────────────────── */
.pagelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 0 36px; margin-top: 26px !important; border-top: 1px solid var(--rule); }
.pagelist li { border-bottom: 1px solid var(--rule); }
/* the li fills its row (for the rule under it); the card's own rows stay tight at the top, so kicker, title and
   line of neighboring cards start on the same lines (the kicker row is as tall with or without its tag) */
.pagelist a { display: grid; grid-template-columns: minmax(0, 1fr) 14px; grid-template-rows: minmax(17px, auto) auto 1fr; align-content: start; gap: 6px 14px; padding: 20px 0 22px; text-decoration: none; color: var(--ink2); height: 100%; }
.pagelist .k { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 500 9.5px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.pagelist .k .tag { font-size: 8.5px; color: var(--ink2); }
.pagelist b { font-size: 18px; font-weight: 680; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.pagelist span.d { grid-column: 1; font-size: 15px; line-height: 1.5; }
.pagelist svg { grid-column: 2; grid-row: 2; align-self: center; width: 12px; height: 12px; color: var(--ink2); transition: transform .2s var(--ease-out); }
.pagelist a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.pagelist a:hover svg { transform: translate(2px, -2px); }
.related { margin-top: 80px; }
/* "Keep reading" is always three pages: one row of three where the column holds them, one under the other below */
.related .pagelist { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) { .related .pagelist { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
.related > h2 { font: 500 10.5px/1.2 var(--f-mono) !important; font-stretch: 87.5% !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--ink3) !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.docbody > .pagelist { margin-top: 26px; }

/* ── Hubs: the landing's contents faceplate — numbered cells in ruled columns ── */
.pagegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); counter-reset: cell; margin-top: 22px !important; }
.pagegrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pagegrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pagegrid li { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.pagegrid--3 li:nth-child(3n), .pagegrid--4 li:nth-child(4n), .pagegrid--2 li:nth-child(2n) { border-right: 0; }
.pagegrid a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(17px, auto) auto 1fr; align-content: start; align-items: baseline; column-gap: 14px; row-gap: 8px; height: 100%; padding: 20px 22px 24px; text-decoration: none; color: var(--ink2); counter-increment: cell; transition: background .2s; }
.pagegrid a:hover { background: rgb(128 120 108 / .07); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pagegrid a:focus-visible { outline-offset: -3px; }
.pagegrid a::before { content: counter(cell, decimal-leading-zero); grid-row: 1; font: 500 10px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; color: var(--ink3); }
.pagegrid .k { grid-row: 1; grid-column: 2; min-width: 0; font: 500 9.5px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.pagegrid .tag { grid-row: 1; grid-column: 3; justify-self: end; font-size: 9px; color: var(--ink2); }
.pagegrid b { grid-column: 2 / -1; font-size: 19px; font-weight: 700; font-stretch: 108%; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.pagegrid .d { grid-column: 2 / -1; font-size: 14.5px; line-height: 1.45; }
.pagegrid a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* the smaller tools on the features hub: the same faceplate, one hairline instead of the ink rule, numbered on */
.pagegrid--more { counter-reset: cell 9; border-top-width: 1px; border-top-color: var(--rule); }
.pagegrid--more b { font-size: 17px; }
.pagegrid--more .d { font-size: 14px; }

/* ── The last word: download, on night ───────────────────────────────────── */
.band { padding: 104px 0 110px; text-align: center; background-image: radial-gradient(80% 90% at 50% 0%, #262624, var(--bg) 70%); }
.band__h { font-size: clamp(44px, 6.4vw, 104px); font-weight: 800; font-stretch: 112%; letter-spacing: -.045em; line-height: .92; }
.band .lede { margin: 22px auto 0; max-width: 34em; }
.band .cta { justify-content: center; margin-top: 30px; }
.band .spec { justify-content: center; margin-top: 24px; }
.band .lockup__mark { width: 44px; height: 44px; margin: 0 auto 28px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .docbody { max-width: 780px; }
  .doc--wide .docbody { max-width: none; }
  .pagegrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagegrid--4 li:nth-child(n) { border-right: 1px solid var(--rule); }
  .pagegrid--4 li:nth-child(2n) { border-right: 0; }
  .doc--wide .tier--pro .tier__list { grid-template-columns: 1fr 1fr; }
}
/* Narrow: copy, then the glass as the landing's compact OUTPUT window (the big word left, the hint right of it),
   then the keys. */
@media (max-width: 860px) {
  .dochead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "side" "act"; }
  .dochead__side { display: block; margin-top: 26px; max-width: 460px; }
  .dochead__knob { display: none; }
  .readout .lcd__glass { min-height: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 5px 16px; padding: 11px 14px 13px; }
  .readout__top { grid-column: 1 / -1; font-size: 9px; }
  .readout__big, .readout__big--long { font-size: 34px; }
  .readout__hint { font-size: 12.5px; line-height: 1.35; }
  .pagegrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagegrid--3 li:nth-child(n) { border-right: 1px solid var(--rule); }
  .pagegrid--3 li:nth-child(2n) { border-right: 0; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dochead { padding-bottom: 32px; margin-bottom: 40px; }
  .dochead__side { max-width: none; margin-top: 22px; }
  .dochead .cta { margin-top: 22px; }
  .dochead .spec { margin-top: 18px; }
  /* the answer: its first sentences (about four lines, build-pages.py), the rest one press away – all of it is in the
     page, and without script it is shown */
  .js .answer:not(.is-open) .answer-rest { display: none; }
  .crumbs ol { flex-wrap: nowrap; }
  .crumbs li { flex: none; }
  .crumbs li:last-child { flex: 0 1 auto; }
  .docbody .fig > .fig__wide { display: none; }
  .docbody .fig > .fig__phone { display: block; }
  .js .answer-more { display: inline-flex; align-items: center; gap: 9px; margin: 8px 0 0 -10px; padding: 9px 10px; border: 0; border-radius: 7px; background: none; cursor: pointer; font: 680 10px/1 var(--f-sans); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); transition: box-shadow .12s; -webkit-tap-highlight-color: transparent; }
  .js .answer-more:hover { box-shadow: inset 0 0 0 .75px var(--rim-lo), inset 0 1px 0 var(--rim-hi); }
  .answer-more i { width: 9px; height: 9px; background: linear-gradient(currentColor, currentColor) 50% 50% / 9px 1.3px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.3px 9px no-repeat; transition: transform .2s var(--ease); }
  .answer-more[aria-expanded="true"] i { transform: rotate(45deg); }
  .docbody { font-size: 16.5px; }
  .docbody > h2 { margin-top: 52px; }
  .docbody .fig { column-gap: 12px; }
  .docbody .fig > span { font-size: 14px; }
  .specplate { padding: 30px 22px 16px; }
  .sheet > div { grid-template-columns: 1fr; gap: 4px; }
  .qa summary { grid-template-columns: 28px 1fr 14px; font-size: 16.5px; }
  .qa .answer-text { padding: 0 0 20px 38px; }
  .band { padding: 80px 0 86px; }
  .tier { padding: 22px 20px 24px; border-radius: 16px; }
  .tier--pro .tier__list, .doc--wide .tier--pro .tier__list { grid-template-columns: minmax(0, 1fr); }
  /* tables: one row, one block — the row's name first, each cell labeled under it */
  .docbody .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .docbody .table table, .docbody .table tbody, .docbody .table tr, .docbody .table th, .docbody .table td { display: block; width: auto; }
  .docbody .table--wide table { min-width: 0; }
  .docbody .table--wide tbody th { position: static; background: none; }
  .docbody .table tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .docbody .table th, .docbody .table td { border: 0; padding: 3px 0; }
  .docbody .table td[data-label]::before { content: attr(data-label) " · "; font: 500 9.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
}
/* the head's two keys in one row, sized as the landing page's hero keys */
@media (max-width: 560px) {
  .dochead .cta { flex-wrap: nowrap; gap: 10px; }
  .dochead .cta .key--lg { flex: 1 1 auto; min-width: 0; --h: 46px; padding: 0 16px; font-size: 10.5px; }
  .pagegrid, .pagegrid--4, .pagegrid--3, .pagegrid--2 { grid-template-columns: minmax(0, 1fr); }
  .pagegrid li:nth-child(n) { border-right: 0; }
  .pagegrid a { padding: 18px 4px 20px 0; }
}
@media (max-width: 400px) {
  html[lang="de"] .dochead h1 { font-size: 34px; }
  .dochead .kicker::after { flex-basis: 28px; }   /* the kicker stays one line on a 360-px phone */
  .dochead .cta { gap: 8px; }
  .dochead .cta .key--lg { padding: 0 12px; font-size: 9.5px; letter-spacing: .1em; gap: 8px; }
}
@media print {
  .toc, .band, .readout, .dochead__knob, .answer-more { display: none !important; }
  .doc { display: block; }
  .answer-rest { display: inline !important; }
}
.band .lockup__mark { width: 54px; height: 54px; margin: -5px auto 23px; background-image: url(../img/brand/knob-on-96@2x.png); }
:root[data-finish="graphit"] .band .lockup__mark, .t-night .band .lockup__mark { background-image: url(../img/brand/knob-on-96-graphit@2x.png); }
@media (prefers-color-scheme: dark) { :root:not([data-finish="alu"]) .band .lockup__mark { background-image: url(../img/brand/knob-on-96-graphit@2x.png); } }