/* ============================================================================
   LEGAL — terms.html · privacy.html

   No tokens of its own. site.css carries :root and must load FIRST, exactly as
   roadmap.css does; without it this file renders as unstyled text.

   These two pages are long-form prose, which nothing else on this site is. The
   whole file exists to make a 3,000-word document readable: one column, a
   measure that stops at 68 characters, and headings that are findable when
   somebody is scanning for the one clause they care about.
   ============================================================================ */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px var(--gutter) 80px;
}

.legal__back {
  display: inline-block;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-decoration: none;
}
.legal__back:hover { color: var(--fg-soft); }

.legal__eyebrow {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.legal__h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--fg);
}

.legal__lede {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-muted);
}

.legal__updated {
  margin: 0 0 44px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---- the summary box ----------------------------------------------------
   Only on privacy.html, and deliberately at the very top. The substantive
   claim of that document — we cannot read your work — is the one thing a
   reader actually came for, and burying it under a definitions section would
   be a way of not saying it. */
.legal__box {
  margin: 0 0 48px;
  padding: 22px 24px;
  border: 1px solid var(--accent-35);
  border-radius: 10px;
  background: var(--accent-05);
}
.legal__box p:last-child { margin-bottom: 0; }
.legal__box strong { color: var(--fg); font-weight: 600; }

/* ---- table of contents ---- */
.legal__toc {
  margin: 0 0 52px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sunk);
}
.legal__toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 32px;
}
.legal__toc li { margin-bottom: 7px; font-size: 13px; break-inside: avoid; }
.legal__toc a { color: var(--fg-muted); text-decoration: none; }
.legal__toc a:hover { color: var(--accent); }

/* ---- body prose ---- */
.legal h2 {
  margin: 52px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fg);
  scroll-margin-top: 90px;   /* the header is fixed — anchors must clear it */
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }

.legal h3 {
  margin: 30px 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-soft);
}

.legal p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--fg-muted);
  max-width: 68ch;
}

.legal ul, .legal ol.legal__list {
  margin: 0 0 18px;
  padding-left: 22px;
  max-width: 68ch;
}
.legal li {
  margin-bottom: 9px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--fg-muted);
}
.legal li::marker { color: var(--fg-faint); }

.legal strong { color: var(--fg-soft); font-weight: 600; }
.legal a { color: var(--accent); text-decoration: none; }
.legal a:hover { text-decoration: underline; }

.legal code {
  font-family: var(--mono);
  font-size: .9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--raise);
  color: var(--fg-soft);
}

/* ---- the identity block at the foot of both documents ---- */
.legal__id {
  margin-top: 56px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.legal__id p { margin-bottom: 6px; font-size: 13px; }
.legal__id p:last-child { margin-bottom: 0; }
.legal__id .mono { color: var(--fg-soft); }

@media (max-width: 640px) {
  .legal { padding-top: 80px; }
  .legal__toc ol { columns: 1; }
}