/* ─────────────────────────────────────────────────────────────────────────
   Long-form legal prose — /privacy and /terms.

   The landing page has no styles for a document: its own "privacy" section is a
   three-item summary, not running text. Everything here is built from the site's
   existing tokens so these pages cannot drift from the brand, and it lives in its
   own file because only the two legal pages load it.
   ───────────────────────────────────────────────────────────────────────── */

/* The nav is fixed at top:18px and 68px tall, so a plain .section starts
   underneath it. The hero solves this with its own big top padding; this is the
   same trick, minus the room a hero image needs. */
.legal-page { padding-top: clamp(7rem, 12vw, 9rem); }

/* ~46rem keeps a line near 75 characters at this size — long enough not to feel
   like a receipt, short enough to read a clause without losing the line. */
.legal { max-width: 46rem; }

.legal__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: .8125rem; color: var(--ink-muted);
}

/* The one paragraph worth reading if you read nothing else, in the same glass
   as the app's own "short version" card. */
.legal__short {
  background: var(--glass-tint-2);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-sheen);
  border-radius: 1.125rem;
  padding: clamp(1.15rem, 2.6vw, 1.6rem);
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.legal__short h2 { font-size: 1.0625rem; margin: 0 0 .6rem; }
.legal__short p { margin: 0; color: var(--ink-70); font-size: .9375rem; line-height: 1.65; }

.legal h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  margin: clamp(2.25rem, 4.5vw, 3rem) 0 .7rem;
  /* So a jump from the contents list doesn't park the heading under the nav. */
  scroll-margin-top: 6rem;
}
.legal h2:first-of-type { margin-top: 0; }

/* Numbered sub-clauses (2.1, 3.2 …). Smaller than an h2 so the hierarchy reads,
   without borrowing the giant global h3 sizing. */
.legal h3 {
  font-size: clamp(1rem, 2vw, 1.15rem);
  margin: 1.6rem 0 .5rem;
  scroll-margin-top: 6rem;
}

.legal p, .legal li { color: var(--ink-70); font-size: .9375rem; line-height: 1.75; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1.15rem; padding-left: 1.15rem; }
.legal li { margin-bottom: .45rem; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--green); text-underline-offset: .18em; }
.legal code {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .875em;
  background: rgba(234, 246, 238, .07); padding: .1em .38em; border-radius: .3em;
}

.legal__toc {
  border-top: 1px solid var(--glass-edge-2);
  border-bottom: 1px solid var(--glass-edge-2);
  padding: 1.1rem 0; margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.legal__toc h2 {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 .7rem;
}
.legal__toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.legal__toc li { margin-bottom: .3rem; font-size: .875rem; }
/* Two columns of contents on a phone would give each entry about six characters
   before wrapping. */
@media (max-width: 34rem) { .legal__toc ol { columns: 1; } }

/* The processor table is the one thing here that cannot reflow below ~30rem
   without becoming unreadable, so it scrolls inside its own box instead of
   widening the page. */
.legal__table { width: 100%; overflow-x: auto; margin: 0 0 1.25rem; }
.legal__table table { width: 100%; border-collapse: collapse; min-width: 30rem; }
.legal__table th, .legal__table td {
  text-align: left; padding: .6rem .75rem; font-size: .875rem;
  border-bottom: 1px solid var(--glass-edge-2); vertical-align: top;
}
.legal__table th { color: var(--ink); font-weight: 600; }
.legal__table td { color: var(--ink-70); }