/* ==========================================================================
   nesia.studio — one stylesheet, hand-authored, no build step.
   Token names are taken verbatim from "Nesia Site Tokens.dc.html" §01–§03.
   Layout follows the hi-fi boards 4a–4h.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §02 · TYPE — self-hosted webfont
   IBM Plex Mono 400 and 500, complete Latin, from IBM's own release
   (v2.327, SIL OFL 1.1 — see fonts/LICENSE.txt). Self-hosted, never the
   Google CDN.

   Only the 400 is preloaded. Nothing in the design sets mono at 500 — every
   mono size in §02 is weight 400, and the 590 weights are all SF Pro Display —
   so the Medium face is declared and shipped but fetched lazily if anything
   ever asks for it. Preloading a font the page never requests is 50 KB spent
   on nothing, and Lighthouse counts it as an unused preload.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* §01 · COLOUR — the whole palette */
  --ground: #0A0A0B;
  --raised: #121214;
  --ink: #F5F5F4;
  --ink-body: rgb(235 235 240 / .66);
  --ink-label: rgb(235 235 240 / .62);
  --ink-eyebrow: rgb(235 235 240 / .58);
  --accent: #E3422B;
  --accent-text: #FF6B52;
  --hairline: rgb(255 255 255 / .10);
  --sep-dot: rgb(235 235 240 / .28);

  /* §02 · TYPE — families */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-display: "SF Pro Display", -apple-system, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* §02 · TYPE — scale (desktop) */
  --t-hero: 70px;
  --t-h1: 58px;
  --t-h2: 38px;
  --t-h3: 22px;
  --t-body: 17px;
  --t-lead: 21px;
  --t-mono-l: 24px;
  --t-mono-m: 15px;
  --t-eyebrow: 12px;

  /* §03 · SPACE & MEASURE — 8px base */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-13: 104px;

  --pad-x: 96px;
  --col-max: 1240px;
  --col-read: 920px;

  --r-card: 14px;
  --r-tile: 22px;
  --r-chip: 12px;
  --r-badge: 10px;

  /* derived: gap between sections, collapses at the breakpoint */
  --sec-gap: var(--s-13);
}

/* §03 · one breakpoint. Below it: single column, gutter 24, sections 44. */
@media (max-width: 840px) {
  :root {
    --t-hero: 40px;
    --t-h1: 34px;
    --t-h2: 28px;
    --t-h3: 19px;
    --t-body: 16px;
    --t-lead: 17px;
    --t-mono-l: 16px;
    --t-mono-m: 14px;
    --t-eyebrow: 11px;

    --pad-x: 24px;
    --sec-gap: 44px;
  }
}

/* --------------------------------------------------------------------------
   Reset — only what is needed
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-body);
  font: 400 var(--t-body)/1.60 var(--font-text);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, p, dl, dd, dt, figure, table { margin: 0; }
dd { margin-inline-start: 0; }

a { color: inherit; text-decoration: none; transition: color 120ms linear; }

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}

/* §06 · focus ring — never outline:none */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Layout scaffolding
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--col-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* privacy + support centre in the narrower reading column */
.wrap--read { max-width: var(--col-read); }

main > section { padding-block-end: var(--sec-gap); }

.stack { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

/* §02 · every number is mono and tabular, no exceptions */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font: 400 var(--t-eyebrow)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--ink-eyebrow);
}

/* a section label that sits on a hairline */
.label-rule {
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--hairline);
}
@media (max-width: 840px) {
  .label-rule { padding-block-end: var(--s-2); }
}

.hero-title {
  font: 590 var(--t-hero)/1.02 var(--font-display);
  letter-spacing: -.026em;
  color: var(--ink);
  max-width: 22ch;
}

.page-title {
  font: 590 var(--t-h1)/1.05 var(--font-display);
  letter-spacing: -.024em;
  color: var(--ink);
}

.h2 {
  font: 590 var(--t-h2)/1.11 var(--font-display);
  letter-spacing: -.018em;
  color: var(--ink);
  max-width: 26ch;
}

.h3 {
  font: 590 var(--t-h3)/1.25 var(--font-display);
  letter-spacing: 0;
  color: var(--ink);
}

.lead {
  font: 400 var(--t-lead)/1.58 var(--font-text);
  color: var(--ink-body);
  max-width: 54ch;
}

.body { max-width: 56ch; }

.caption {
  font: 400 var(--t-mono-m)/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-eyebrow);
}

.note {
  font: 400 var(--t-mono-m)/1.5 var(--font-text);
  color: var(--ink-label);
}

/* inline red text — links and the one-word marks. Never a background. */
.accent-text { color: var(--accent-text); }

/* a link that is allowed to be red: inline calls to action, addresses */
.link {
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Settings runs — f/2 · 1/250 · ISO 100
   The · is decorative punctuation (§01 --sep-dot, exempt from the 4.5:1 floor)
   and is hidden from assistive tech.
   -------------------------------------------------------------------------- */

.settings {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.settings .sep {
  color: var(--sep-dot);
  font-style: normal;
}

.settings--quiet { color: var(--ink-label); }
.settings--sm { font-size: 14px; gap: 10px; }
@media (max-width: 840px) {
  .settings--sm { font-size: 12.5px; gap: var(--s-1); }
}

/* the hero readout chip — the only place --raised carries a border radius 12 */
.readout {
  align-self: center;
  font-size: var(--t-mono-l);
  gap: 14px;
  padding: 16px 26px;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--r-chip);
  background: var(--raised);
}
@media (max-width: 840px) {
  .readout { gap: 9px; padding: 13px 18px; border-radius: 11px; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Cards and hairlines
   -------------------------------------------------------------------------- */

.card {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 30px;
}
@media (max-width: 840px) {
  .card { padding: 22px; border-radius: 13px; }
}

.hair { height: 1px; margin: 0; background: var(--hairline); border: 0; }

/* the app-icon tile on the studio home */
.tile {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: var(--r-tile);
  background: var(--raised);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
}
.tile img { width: 58px; height: 58px; }
@media (max-width: 840px) {
  .tile { width: 60px; height: 60px; border-radius: 15px; }
  .tile img { width: 36px; height: 36px; }
}

/* --------------------------------------------------------------------------
   Asset placeholders — the dashed slots from the boards, with the intended
   pixel size written inside them. No gradient (§07): a dashed rule only.
   Delete the slot when the real asset lands.
   -------------------------------------------------------------------------- */

.slot {
  border: 1px dashed rgb(255 255 255 / .17);
  border-radius: var(--r-badge);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  font: 400 var(--t-eyebrow)/1.45 var(--font-mono);
  color: var(--ink-label);
}

.slot--center { align-items: center; justify-content: center; text-align: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.siteheader {
  border-block-end: 1px solid rgb(255 255 255 / .08);
}

.siteheader__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-block: 26px;
}
@media (max-width: 840px) {
  .siteheader__inner { padding-block: 18px; flex-wrap: wrap; }
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--t-mono-m);
  letter-spacing: .06em;
  color: var(--ink);
}

.wordmark__tile {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--s-1);
  background: var(--raised);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.wordmark__tile img { width: 18px; height: 18px; }
@media (max-width: 840px) {
  .wordmark { gap: 10px; }
  .wordmark__tile { width: 24px; height: 24px; border-radius: 7px; }
  .wordmark__tile img { width: 16px; height: 16px; }
}

.sitenav {
  display: flex;
  gap: 26px;
  font: 400 14px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-label);
}
.sitenav a { color: var(--ink-label); }
.sitenav a:hover { color: var(--ink); }

/* §06 · 44px tap targets below the breakpoint */
@media (max-width: 840px) {
  .sitenav {
    width: 100%;
    gap: var(--s-2) var(--s-3);
    flex-wrap: wrap;
    font-size: 13px;
  }
  .sitenav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* the back link on the three sub-pages */
.backlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-label);
}
.backlink:hover { color: var(--ink); }
@media (max-width: 840px) { .backlink { font-size: 13px; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.sitefooter {
  border-block-start: 1px solid rgb(255 255 255 / .08);
}

.sitefooter__inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: 44px;
  font: 400 14px/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-label);
}

.sitefooter__nav { display: flex; gap: 18px; }
.sitefooter a { color: var(--ink-label); }
.sitefooter a:hover { color: var(--ink); }

@media (max-width: 840px) {
  .sitefooter__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    padding-block: var(--s-4);
    font-size: 13.5px;
  }
  .sitefooter__nav { flex-wrap: wrap; gap: var(--s-2); }
  .sitefooter a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Studio home — 4a / 4b
   -------------------------------------------------------------------------- */

.home-hero {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding-block: 120px var(--sec-gap);
}

/* board 4a sets the studio headline one step down from --t-hero: the line is
   long and 70px breaks it badly at 24ch. */
.home-hero .hero-title {
  font-size: 62px;
  line-height: 1.06;
  max-width: 24ch;
}

.home-hero .lead {
  font-size: 19px;
  line-height: 1.62;
  max-width: 56ch;
}

@media (max-width: 840px) {
  .home-hero { min-height: 0; gap: 22px; padding-block: 72px 52px; }
  .home-hero .hero-title { font-size: 36px; line-height: 1.10; letter-spacing: -.018em; }
  .home-hero .lead { font-size: 17px; }
}

.product {
  display: flex;
  align-items: center;
  padding-block: 36px;
  border-block-end: 1px solid var(--hairline);
}
.product:hover .product__name { color: var(--ink); }

.product__head {
  display: flex;
  align-items: center;
  gap: 36px;
  width: 100%;
}

.product__text { flex: 1; display: flex; flex-direction: column; gap: 9px; }

.product__name {
  font: 590 28px/1.15 var(--font-display);
  letter-spacing: -.014em;
  color: var(--ink);
}

.product__desc { max-width: 52ch; }

.product__settings { font-size: var(--t-mono-m); margin-block-start: 2px; }

/* the second of the studio page's two red marks */
.product__arrow {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--accent);
  flex: none;
}

@media (max-width: 840px) {
  .product { padding-block: 26px; }
  .product__head { align-items: flex-start; gap: var(--s-2); }
  .product__text { gap: 5px; }
  .product__name { font-size: 22px; letter-spacing: -.01em; }
  .product__settings { order: 2; gap: var(--s-1); margin-block-start: 0; }
  /* the description drops below the icon row, as in board 4b */
  .product__desc { order: 3; font-size: 16px; margin-block-start: var(--s-1); }
  .product__arrow { font-size: 19px; }
}

/* board 4a sets the studio eyebrow larger than --t-eyebrow */
.home-hero .eyebrow { font-size: 15px; }
@media (max-width: 840px) {
  .home-hero .eyebrow { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Hero — centred, /obtura/ and the two sub-pages
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  padding-block-start: 112px;
}
.hero .lead { margin-block-start: 12px; font-size: var(--t-lead); }

@media (max-width: 840px) {
  .hero { gap: 18px; padding-block-start: 56px; }
  .hero .lead { margin-block-start: 6px; }
}

/* board 4f sets the privacy hero flush left below the breakpoint */
@media (max-width: 840px) {
  .hero--start { align-items: flex-start; text-align: start; }
}

/* board 4e runs the privacy lead one step wider than --t-lead */
.hero--policy .lead { font-size: 20px; line-height: 1.62; max-width: 56ch; }
@media (max-width: 840px) {
  .hero--policy .lead { font-size: 17px; line-height: 1.60; }
}

/* board 4d repeats the App Store badge in the mobile hero; 4c does not */
.hero__badge { display: none; }
@media (max-width: 840px) {
  .hero__badge {
    display: flex;
    width: 100%;
    height: 52px;
    margin-block-start: 10px;
  }
}

/* --------------------------------------------------------------------------
   Proof — "One scene. Two photographs." 4c / 4d
   -------------------------------------------------------------------------- */

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block-end: 28px;
  border-block-end: 1px solid var(--hairline);
}
@media (max-width: 840px) {
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    padding-block-end: 20px;
  }
}

.intents {
  display: flex;
  gap: var(--s-3);
  padding-block-start: 36px;
}
@media (max-width: 840px) {
  .intents { flex-direction: column; gap: var(--s-2); padding-block-start: var(--s-3); }
}

.intent { flex: 1; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 840px) { .intent { gap: 13px; } }

.intent__phrase {
  font: 590 26px/1.2 var(--font-display);
  letter-spacing: -.012em;
  color: var(--ink);
}
.intent__settings { font-size: 22px; }
@media (max-width: 840px) {
  .intent__phrase { font-size: 21px; }
  .intent__settings { font-size: 17px; gap: 9px; }
}

.intent .slot { height: 200px; margin-block-start: 6px; }
@media (max-width: 840px) { .intent .slot { height: 150px; } }

.proof-note {
  text-align: center;
  padding-block-start: 28px;
  color: var(--ink-label);
  font-size: var(--t-mono-m);
}

/* --------------------------------------------------------------------------
   Ledgers — real <dl> pairs (§04, and Tokens §05 wants them extractable)
   -------------------------------------------------------------------------- */

.ledger__row {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-block: 34px;
  border-block-end: 1px solid var(--hairline);
}
.ledger__row:last-child { border-block-end: 0; }

.ledger__term { display: flex; gap: 30px; flex: none; }

.ledger__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--accent);
  flex: none;
  width: 28px;
  padding-block-start: 6px;
}

.ledger__title {
  width: 230px;
  flex: none;
  font: 590 25px/1.2 var(--font-display);
  letter-spacing: -.01em;
  color: var(--ink);
}

.ledger__def {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.ledger__def p { flex: 1; max-width: 52ch; }

.ledger__meta {
  flex: none;
  padding-block-start: 5px;
  font-size: 16px;
  color: var(--ink-label);
}

@media (max-width: 840px) {
  .ledger__row { gap: var(--s-2); padding-block: 22px; }
  .ledger__term { flex: 1; flex-direction: column; gap: 6px; }
  .ledger__num { padding-block-start: 0; width: auto; font-size: 12.5px; }
  .ledger__title { width: auto; font: 590 var(--t-h3)/1.25 var(--font-display); }
  .ledger__def { flex-direction: column; gap: 6px; }
  .ledger__def p { font-size: 15.5px; line-height: 1.55; }
  .ledger__meta { display: none; }
}

/* board 4d · mobile steps: the number sits beside the title on the first line,
   the body drops below it, indented to clear the number. */
@media (max-width: 840px) {
  .ledger--steps .ledger__row { flex-wrap: wrap; gap: 0; }
  .ledger--steps .ledger__term {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: baseline;
    gap: var(--s-2);
  }
  .ledger--steps .ledger__num { width: 20px; }
  .ledger--steps .ledger__def {
    flex: 1 0 100%;
    padding-inline-start: 36px;
    margin-block-start: 6px;
  }
}

/* "What it does" — two columns, no number, no meta */
.ledger--pairs .ledger__row { gap: 40px; padding-block: 30px; }
.ledger--pairs .ledger__term { width: 290px; }
.ledger--pairs .ledger__title { width: auto; font: 590 var(--t-h3)/1.25 var(--font-display); }
.ledger--pairs .ledger__def p { max-width: 56ch; }

@media (max-width: 840px) {
  .ledger--pairs .ledger__row { flex-direction: column; gap: 6px; padding-block: 20px; }
  .ledger--pairs .ledger__term { width: auto; }
}

/* --------------------------------------------------------------------------
   On-device intelligence — 4c / 4d
   -------------------------------------------------------------------------- */

.intel {
  padding: 56px 60px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 840px) {
  .intel { padding: 26px 22px; border-radius: var(--r-card); gap: 18px; }
}

.intel__head { display: flex; gap: 60px; align-items: flex-start; }
.intel__head > div { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.intel__head .h2 { font-size: 40px; max-width: 24ch; }
.intel__head p {
  flex: 1;
  font-size: 18px;
  line-height: 1.62;
  max-width: 52ch;
  padding-block-start: 38px;
}
@media (max-width: 840px) {
  .intel__head { flex-direction: column; gap: 18px; }
  .intel__head > div { gap: 18px; }
  .intel__head .h2 { font-size: 26px; letter-spacing: -.012em; }
  .intel__head p { padding-block-start: 0; font-size: 16px; line-height: 1.58; }
}

.intel__ledger { display: flex; gap: 0; }

.intel__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-inline: 36px;
  border-inline-end: 1px solid var(--hairline);
}
.intel__item:first-child { padding-inline-start: 0; }
.intel__item:last-child { padding-inline-end: 0; border-inline-end: 0; }

/* dt carries .eyebrow — token tracking, no bespoke value */
.intel__item dd { display: flex; flex-direction: column; gap: 9px; }
.intel__item .h3 { font-size: 20px; }
.intel__item p { font-size: 15.5px; color: var(--ink-label); }

@media (max-width: 840px) {
  .intel__ledger { flex-direction: column; gap: var(--s-2); }
  .intel__item {
    padding-inline: 0;
    border-inline-end: 0;
    gap: 4px;
  }
  .intel__item dd { gap: 4px; }
  .intel__item .h3 { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   The instrument — 4c / 4d
   -------------------------------------------------------------------------- */

.instrument { display: flex; align-items: center; gap: 80px; }
.instrument__copy { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.instrument__copy .h2 { font-size: 40px; max-width: 20ch; }
.instrument__copy p { font-size: 18px; line-height: 1.6; max-width: 46ch; }

.instrument__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-start: 4px;
  padding: 0;
  list-style: none;
  font: 400 var(--t-mono-m)/1.5 var(--font-mono);
  color: var(--ink-label);
}

.instrument .slot {
  width: 300px;
  height: 610px;
  flex: none;
  border-radius: 38px;
  padding: 22px;
}

@media (max-width: 840px) {
  .instrument { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .instrument__copy { gap: var(--s-2); }
  .instrument__copy .h2 { font-size: var(--t-h2); letter-spacing: -.014em; max-width: 26ch; }
  .instrument__copy p { font-size: 16.5px; line-height: 1.58; }
  .instrument .slot { width: auto; height: 420px; border-radius: 28px; padding: 18px; }
}

/* --------------------------------------------------------------------------
   Privacy teaser on /obtura/ — split heading and body
   -------------------------------------------------------------------------- */

.split { display: flex; gap: 80px; align-items: flex-start; }
.split__head { flex: none; width: 420px; display: flex; flex-direction: column; gap: 18px; }
.split__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-block-start: 34px;
}
.split__body p { font-size: 18px; line-height: 1.62; max-width: 54ch; }

@media (max-width: 840px) {
  .split { flex-direction: column; gap: 14px; }
  .split__head { width: auto; gap: 14px; }
  .split__head .h2 { font-size: 26px; letter-spacing: -.012em; }
  .split__body { padding-block-start: 0; gap: 14px; }
  .split__body p { font-size: 16.5px; line-height: 1.58; }
}

/* --------------------------------------------------------------------------
   Get it — centred close. No price, ever (§07).
   -------------------------------------------------------------------------- */

/* the rule spans the viewport, like the header and footer rules */
.close {
  border-block-start: 1px solid var(--hairline);
  padding-block: 88px;
}
.close__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.close .h2 { font-size: 44px; max-width: 26ch; }
.close p { font-size: 18px; color: var(--ink-label); max-width: 50ch; }
.close .slot { width: 180px; height: 56px; margin-block-start: 10px; }

@media (max-width: 840px) {
  .close { padding-block: 44px; }
  .close__inner { gap: 14px; }
  .close .h2 { font-size: 30px; letter-spacing: -.016em; }
  .close p { font-size: 16px; line-height: 1.55; }
  .close .slot { height: 52px; margin-block-start: 6px; }
}

/* --------------------------------------------------------------------------
   Privacy page — the checkable claims table (§05: keep it a real table)
   -------------------------------------------------------------------------- */

.claims { width: 100%; border-collapse: collapse; }

.claims caption {
  text-align: start;
  font: 400 var(--t-eyebrow)/1 var(--font-mono);
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--ink-eyebrow);
  padding-block-end: var(--s-3);
}

.claims th,
.claims td {
  padding-block: 20px;
  border-block-start: 1px solid var(--hairline);
  vertical-align: baseline;
}

.claims th {
  text-align: start;
  font: 400 18px/1.5 var(--font-text);
  color: var(--ink-body);
}

.claims td {
  text-align: end;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
  padding-inline-start: var(--s-3);
}

.claims tr:last-child th,
.claims tr:last-child td { border-block-end: 1px solid var(--hairline); }

@media (max-width: 840px) {
  .claims th, .claims td { padding-block: 15px; }
  .claims th { font-size: 16px; }
  .claims td { font-size: 15px; }
}

/* the policy clauses */
.clauses { display: flex; flex-direction: column; gap: 38px; }

.clause { display: flex; gap: 40px; align-items: flex-start; }
.clause dt {
  width: 220px;
  flex: none;
  font: 590 21px/1.25 var(--font-display);
  color: var(--ink);
}
.clause dd {
  flex: 1;
  font-size: 17.5px;
  line-height: 1.65;
  max-width: 60ch;  /* §02 · 60ch on privacy only */
}

@media (max-width: 840px) {
  .clauses { gap: 26px; }
  .clause { flex-direction: column; gap: 7px; }
  .clause dt { width: auto; font: 590 var(--t-h3)/1.25 var(--font-display); }
  .clause dd { font-size: 16px; line-height: 1.6; }
}

/* --------------------------------------------------------------------------
   Support page — FAQ as native <details>. §06: no JavaScript, ever.
   -------------------------------------------------------------------------- */

.faq__item { border-block-end: 1px solid var(--hairline); }

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-block: 26px;
  cursor: pointer;
  list-style: none;
  font: 590 21px/1.25 var(--font-display);
  color: var(--ink);
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-text); }

/* the +/− is CSS, so it stays correct with JavaScript disabled */
.faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink-eyebrow);
}
.faq__item[open] > .faq__q::after { content: "\2212"; }

.faq__a {
  padding-block-end: 26px;
  max-width: 66ch;
  color: var(--ink-label);
}

@media (max-width: 840px) {
  .faq__q { gap: 14px; padding-block: 20px; font-size: 18px; }
  .faq__q::after { font-size: 17px; }
  .faq__a { padding-block-end: 20px; font-size: 15.5px; line-height: 1.55; }
}

/* an answer that has not been written yet — same register as an image slot.
   Remove the attribute once the copy lands. */
[data-todo] {
  border: 1px dashed rgb(255 255 255 / .17);
  border-radius: var(--r-badge);
  padding: 14px;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  line-height: 1.45;
  color: var(--ink-label);
}

.support-email {
  font-size: var(--t-mono-l);
  letter-spacing: .01em;
}
@media (max-width: 840px) { .support-email { font-size: 18px; } }

.support-meta {
  font-size: 17px;
  color: var(--ink-label);
}
@media (max-width: 840px) { .support-meta { font-size: 15.5px; } }

.faq__q h3 {
  flex: 1;
  margin: 0;
  font: inherit;
  color: inherit;
}

.purchases { display: flex; gap: 60px; align-items: flex-start; }
.purchases__copy { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.purchases__copy p { font-size: 17.5px; line-height: 1.62; max-width: 44ch; }

@media (max-width: 840px) {
  .purchases { flex-direction: column; gap: 12px; }
  .purchases__copy { gap: 12px; }
  .purchases__copy p { font-size: 16px; line-height: 1.58; }
}

.support-links {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block-start: 34px;
  font: 400 16px/1.4 var(--font-mono);
}
.support-links a { color: var(--ink-label); }
.support-links a:hover { color: var(--ink); }

@media (max-width: 840px) {
  .support-links {
    width: auto;
    padding-block-start: 4px;
    gap: 10px;
    font-size: 14.5px;
  }
  .support-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Legal page — the publisher ledger
   -------------------------------------------------------------------------- */

/* board 4h sets the legal notice in a 760px page with a 60px gutter */
.wrap--legal {
  max-width: 760px;
  padding-inline: 60px;
}
@media (max-width: 840px) {
  .wrap--legal { padding-inline: var(--pad-x); }
}

.legal-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block-start: 64px;
}
.legal-hero .page-title { font-size: var(--t-h2); line-height: 1.10; letter-spacing: -.018em; }
@media (max-width: 840px) { .legal-hero { padding-block-start: 44px; } }

.facts { display: flex; flex-direction: column; }

.facts__row {
  display: flex;
  gap: 30px;
  padding-block: var(--s-2);
  border-block-start: 1px solid var(--hairline);
}
.facts__row:last-child { border-block-end: 1px solid var(--hairline); }

.facts dt {
  width: 150px;
  flex: none;
  font-size: 15px;
  color: var(--ink-label);
}
.facts dd { flex: 1; font-size: 16.5px; color: var(--ink-body); }
.facts dd.is-withheld { color: var(--ink-label); }

@media (max-width: 840px) {
  .facts__row { flex-direction: column; gap: 4px; }
  .facts dt { width: auto; }
}

/* Contact rows in a facts table. Scoped to a class rather than `.facts a`, so
   the deliberately red address on /legal/ keeps its own colour. */
.facts__contact { color: var(--ink); }
.facts__contact:hover { color: var(--accent-text); }

.legal-clauses { display: flex; flex-direction: column; gap: 26px; }
.legal-clauses dt { font: 590 var(--t-h3)/1.25 var(--font-display); color: var(--ink); }
.legal-clauses dd { font-size: 16.5px; line-height: 1.6; max-width: 60ch; margin-block-start: 7px; }