/* ============================================================
   StudyGPT — legal pages (terms.html, privacy.html)
   ============================================================
   Loads *after* shared.css, which already supplies the tokens, the
   base reset, the navbar and the phone menu. Everything below is
   what only these two pages use.

   ⚠️ This file used to carry its own copy of the navbar. It does not
   any more — shared.css owns it, and re-adding it here is how the
   two drift apart. Extracted 2026-09-03.

   Deliberately not the landing page's design system: no display face
   in the body, no scroll work, no reveals, no footer. A legal page is
   for reading.
   ============================================================ */

:root {
  /* The body face, and the one place on the site that is neither
     --display nor --mono. Legal text is plain reading matter; a
     condensed display face and a monospace both fight it, and neither
     is what anyone expects on a terms page. System stack, so it costs
     no request and looks native wherever it is read. */
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

/* Overrides shared.css's `font-family: var(--display)` on the base.
   The navbar sets its own faces per element, so it is unaffected.

   `html` as well as `body`, matching the rule it overrides. Body-only
   leaves the root element computing to the display face — invisible,
   since everything rendered lives inside body, but it is a difference
   with no reason to exist. */
html, body { font-family: var(--text); }

/* ============================================================
   PAGE
   ============================================================ */

.legal {
  /* Clears the fixed header, then a generous drop so the heading is
     not sitting in the bar's lap. */
  padding: calc(var(--nav-h) + clamp(48px, 9vh, 110px)) var(--gutter)
           clamp(80px, 14vh, 160px);
  /* A reading measure, not the full width. Legal text is long and
     unbroken, and a 1900px line of it is unreadable. */
  max-width: 78ch;
}

.legal__title {
  margin: 0;
  font-family: var(--text);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.1;
  /* Slight positive tracking because the heading is all caps, where
     the default spacing reads tight. Nothing like the display face's
     negative tracking — this is plain type doing a plain job. */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The body copy is not written yet — this is the container it drops
   into, sized and spaced so adding <p>/<h2> needs no new rules. */
.legal__body {
  margin: clamp(28px, 4vh, 48px) 0 0;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
}

.legal__body h2 {
  margin: clamp(28px, 4vh, 44px) 0 0.6em;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
  font-weight: 700;
}

.legal__body p { margin: 0 0 1.15em; }

.legal__body a {
  color: inherit;
  text-underline-offset: 3px;
}