/* ============================================================
   Today in Cars — Legal / prose pages (Privacy, Terms, …)
   Depends on tokens.css (design-system variables + primitives)
   and home.css (shared page chrome: body reset, .container,
   .masthead, footer.foot). This file only styles the readable
   prose column used by /privacy (and a future /terms).
   ============================================================ */

.legal {
  border-top: 1px solid var(--ink);
  padding: var(--sp-8) 0 var(--sp-9);
}

/* Heading block — constrained to the same measure as the prose */
.legal-head {
  max-width: var(--col-body);
  margin: 0 auto var(--sp-6);
}
.legal-head .eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
}
.legal-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}
.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ash-500);
  margin: 0;
}

/* Readable prose column */
.legal-prose {
  max-width: var(--col-body);
  margin: 0 auto;
}
.legal-prose .lead {
  font-size: var(--fs-21);
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0 0 var(--sp-5);
}
.legal-prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: var(--sp-7) 0 var(--sp-3);
}
.legal-prose p {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
.legal-prose ul {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
}
.legal-prose li {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}
.legal-prose strong { font-weight: 700; }

/* Re-assert the token link style for in-prose links (home.css resets
   `a` to inherit/none for the homepage's card links). */
.legal-prose a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t-fast) var(--ease-out);
}
.legal-prose a:hover { text-decoration-thickness: 2px; }

@media (max-width: 640px) {
  .legal { padding: var(--sp-7) 0 var(--sp-8); }
  .legal-title { font-size: var(--fs-36); }
}