/* The legal and support pages (src/layouts/Legal.astro). Brand tokens and faces only; no inline style (CSP).
   A readable measure (--measure, 642.8px), headings in Gabarito, body in Hanken Grotesk, the dates line and the
   delete-account step numbers in DM Mono with tabular figures (CLAUDE.md: figures in data positions). Every link reaches
   44px (spec §6.9) without moving the text, as the homepage's in-sentence links do. */
.legal{ padding-block:var(--s5) var(--s6); }
.legal:focus{ outline:none; }
.legal__doc{ max-width:var(--measure); }
.legal__h1{ font:900 var(--fs-h3)/var(--lh-head) var(--display); letter-spacing:-.03em; text-wrap:balance; }
@media (min-width:760px){ .legal__h1{ font-size:var(--fs-display); } }
.legal__dates{ margin-top:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.06em; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.legal__dates strong{ font-weight:500; color:var(--ink); }
.legal__draft{ margin-top:var(--s3); padding:var(--s2) var(--s3); border:1.5px dashed var(--amber-text); border-radius:var(--r1);
  background:var(--butter-soft); color:var(--ink); }
.legal__body{ margin-top:var(--s4); overflow-wrap:break-word; }
.legal__body > * + *{ margin-top:var(--s3); }
.legal__body p, .legal__body li{ text-wrap:pretty; }
.legal__body strong{ font-weight:700; }
.legal__body code{ font:400 .92em/1 var(--mono); padding:.1em .3em; border-radius:4px; background:var(--surface-2); color:var(--ink); }
.legal__h2, .legal__h3{ position:relative; display:flex; align-items:flex-start; gap:var(--s1); scroll-margin-top:var(--s3); }
.legal__h2{ margin-top:var(--s5) !important; padding-top:var(--s3); border-top:1px solid var(--line);
  font:700 var(--fs-lead)/1.3 var(--display); letter-spacing:-.015em; }
@media (min-width:760px){ .legal__h2{ font-size:var(--fs-h3); } }
.legal__h3{ margin-top:var(--s4) !important; font:700 var(--fs-body)/1.4 var(--display); letter-spacing:-.005em; }
.legal__ht{ flex:0 1 auto; min-width:0; text-wrap:balance; padding-top:calc((44px - 1lh) / 2); }
/* the heading's own link: a 44px square holding a "#", quiet until hovered or focused */
.legal__anchor{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  margin-left:auto; font:400 var(--fs-body)/1 var(--mono); color:var(--muted); text-decoration:none; border-radius:var(--r1); }
.legal__anchor:hover{ color:var(--brand-deep); text-decoration:underline; }
@media (min-width:760px){ .legal__anchor{ margin-left:0; } }
.legal__list{ padding-left:1.3em !important; }
.legal__list > li + li{ margin-top:var(--s1); }
.legal__list > li::marker{ color:var(--muted); }
ol.legal__list > li::marker{ font-family:var(--mono); }
.legal__list .legal__list{ margin-top:var(--s1); }
/* a block quote (privacy §1.4a's "in short" box): a keyline and the second surface, ink text, no tint */
.legal__quote{ margin-inline:0; padding:var(--s3); border-left:3px solid var(--line); border-radius:0 var(--r1) var(--r1) 0;
  background:var(--surface-2); }
.legal__quote > * + *{ margin-top:var(--s2); }
/* links on the quote box: --brand-deep is certified against white only; on --surface-2 it is 4.42:1 (CLAUDE.md: text on a
   tint takes the -on-soft token). #B63E18 on #EDF1EE is 4.99:1; dark, #FF8A5B on #1C403A is 4.90:1 */
.legal__quote a{ color:var(--brand-on-soft); }
/* in-sentence links: 44px tall by padding, pulled back by the same negative margin so the lines don't move */
.legal__a{ --pad:calc((44.5px - 1lh) / 2); display:inline-block; min-width:44px; padding-block:var(--pad); margin-block:calc(-1 * var(--pad));
  overflow-wrap:anywhere; }

/* the Markdown tables, as hairline rows (founder, 19 Oct: option B, the homepage's "What it can't see" list): a 1px
   keyline above each row and below the last; from 760px the key cell and the rest sit side by side at 1 : φ, below
   it they stack. A row with two or more later cells labels each with its column heading, in DM Mono. The headings
   themselves are in the visually hidden .legal-rows__cols line before the list. */
.legal-rows > div{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s1); padding-block:var(--s3);
  border-top:1px solid var(--line); }
.legal-rows > div:last-child{ border-bottom:1px solid var(--line); }
.legal-rows dt{ font:700 1.0625rem/1.35 var(--display); letter-spacing:-.01em; text-wrap:balance; }
.legal-rows dd{ margin:0; text-wrap:pretty; }
.legal-rows__lab{ display:block; margin-top:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.legal-rows__lab:first-child{ margin-top:0; }
/* the delete-account steps: the order (1 to 5, then "Not part of deletion complete", "Afterwards", "—") above the place */
.legal-rows__ord{ display:block; margin-bottom:2px; font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--ink); }
@media (min-width:760px){
  .legal-rows > div{ grid-template-columns:minmax(0,1fr) minmax(0,1.618fr); column-gap:var(--s5); padding-block:20px; }
  .legal-rows dt{ font-size:1.125rem; }
}

/* a draft build's placeholders: a tint, a dashed keyline and the square brackets themselves, never colour alone */
mark.ph{ background:var(--butter-soft); color:var(--ink); outline:1.5px dashed var(--amber-text); outline-offset:1px; border-radius:2px;
  padding-inline:.1em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }