/* legal.css — public/privacy.html + terms.html + legal.html (night-legal lane,
   2026-09-24). Reads /css/land-tokens.css for the design-system truths
   (fonts, color, the 16/22 edges); this file owns layout only.

   One narrow reading column at the page's own phone-column width (430px),
   centered; from 1024 wide a 680 reading column in the desktop sizes (the
   block at the foot of this file). Header = a back link in the wordmark register.
   Footer = the o18 footer-stop's .fs-* register, COPIED here (values read
   from lab/offer/o18.html's inline <style> 2026-09-24). The two are kept in
   step by hand: a change to the footer goes into both files, as the
   footer links' tap area did on 2026-09-28. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

:root {
  /* the landing's vertical ladder (12/22/32/44/88 — D141), not part of
     land-tokens.css (that file carries no layout law); ported here so
     this page reads in the same rhythm as o18. */
  --v-line: 12px;
  --v-block: 22px;
  --v-object: 32px;
  --v-major: 44px;
}

body {
  background: var(--shell);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-reading, 16px);
  line-height: var(--lh-reading);
  min-width: 320px;
}

.wrap { width: 100%; max-width: 430px; margin-inline: auto; padding-inline: var(--edge-type); }

/* ---------- header: the back link ---------- */
.legal-head { padding: 20px var(--edge-type) 0; max-width: 430px; margin-inline: auto; }
.back-link {
  display: inline-flex; align-items: baseline; gap: 7px;
  text-decoration: none; color: var(--ink);
}
.back-link .arrow { font-family: var(--sans); font-size: 15px; color: var(--text-2); }
.back-link .wm {
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  letter-spacing: var(--track-display);
  font-variation-settings: 'opsz' var(--opsz-text);
}

/* ---------- the body column ---------- */
.legal-main { padding: 28px var(--edge-type) var(--v-major); max-width: 430px; margin-inline: auto; }

.legal-eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
  margin: 0 0 8px;
}
.legal-title {
  /* D141 §3: headers/statements speak Geist 600; serif italic is the
     visitor's voice only — Bodoni's seat here is the wordmark (the back
     link + the footer mark). Same register as the page's .s3x-answer. */
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(26px, 7.2vw, 30px); line-height: 1.14;
  letter-spacing: -0.016em; color: var(--ink); max-width: 23ch;
  margin: 0 0 6px;
}
.legal-updated { font-size: 13px; color: var(--text-2); margin: 0 0 var(--v-major); }

.legal-main h2 {
  font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 1.3;
  color: var(--ink); margin: var(--v-object) 0 10px;
}
.legal-main h2:first-of-type { margin-top: 0; }
.legal-main p { margin: 0 0 14px; max-width: none; }
.legal-main ul { margin: 0 0 14px; padding-left: 20px; }
.legal-main li { margin-bottom: 8px; }
.legal-main a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.legal-main strong { font-weight: 600; }

/* every fact Alex must confirm before this page ships */
mark.confirm {
  background: rgba(160, 69, 63, 0.14);
  color: var(--ink);
  padding: 0 3px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.confirm::after {
  content: " [confirm]";
  font-size: 11px;
  font-weight: 600;
  color: var(--madder);
  letter-spacing: 0.02em;
}

/* ---------- footer: the o18 footer-stop register, copied ---------- */
.fs-block {
  padding: var(--v-major) var(--edge-type) max(var(--v-major), env(safe-area-inset-bottom, 0px));
  max-width: 430px; margin-inline: auto;
  border-top: 1px solid var(--line-soft);
}
.fs-mark { margin: 0; }
.fs-mark .wm {
  font-family: var(--serif); font-weight: 400; font-size: 28px;
  letter-spacing: var(--track-display);
  font-variation-settings: 'opsz' var(--opsz-text);
}
.fs-rule { width: 44px; border-top: 1px solid var(--madder); margin: 22px 0 28px; }
.fs-line { font-family: var(--sans); font-size: 15px; line-height: var(--lh-reading); color: var(--text-2); margin: 10px 0 0; max-width: 34ch; }
.fs-rule + .fs-line { margin-top: 0; }  /* the rule's own 28px is the gap */
.fs-notes { margin-top: var(--v-object); }
.fs-links { margin-top: var(--v-object); display: flex; gap: 28px; }
.fs-links a { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--madder); }
.fs-links a { padding-block: 4px; margin-block: -4px; }  /* the tap area is 31 tall (the 24 minimum); the padding is given back as margin, so nothing moves */

/* from 1024 wide (the landing's own desktop floor): a reading column, not the phone's.
   680 wide at 17 / 1.55 is about 75 characters a line; the heads take the desktop
   layer's sizes (Alex 2026-09-28: "appear to be mobile optimized while using on desktop") */
@media (min-width: 1024px) {
  body { font-size: var(--fs-nav); }
  .wrap, .legal-head, .legal-main, .fs-block { max-width: 680px; }
  .legal-head { padding-top: 40px; }
  .back-link .wm { font-size: 26px; }
  .back-link .arrow { font-size: 17px; }
  .legal-main { padding-top: 56px; padding-bottom: 88px; }
  .legal-eyebrow { font-size: 12px; margin-bottom: 12px; }
  .legal-title { font-size: 46px; line-height: var(--lh-headline, 1.1); max-width: none; margin-bottom: 10px; }
  .legal-updated { font-size: var(--fs-body); }
  .legal-main h2 { font-size: var(--disp-s); margin: 48px 0 12px; }
  .legal-main p, .legal-main ul { margin-bottom: 16px; }
  .fs-block { padding-top: 64px; padding-bottom: 64px; }
}