/* ============================================================
   LEGAL.CSS - Shared by privacy-policy.html + accessibility-statement.html.
   Plain long-form text page. Load AFTER main.css.
   ============================================================ */

.legal {
  max-width: 860px;
  margin: 120px auto 80px;
  padding: 0 24px;
}
.legal h1 { margin-bottom: 8px; }
.legal .legal-updated {
  color: var(--cream);
  margin-bottom: 40px;
}
.legal section { margin-bottom: 40px; }
.legal section h2 {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
}
.legal section h3 { margin: 20px 0 10px; font-size: 17px; font-weight: 700; color: var(--white); }
.legal p { margin-bottom: 12px; color: var(--cream); }
.legal p:first-child { margin-top: 0; }
/* Links use the warm gold, not the cleaver red. On this near-black canvas
   --gold-3 (#950709) sits at ~1.9:1 against the page - unreadable as body
   text. --gold-soft clears 7.8:1 and still reads as an accent, not as prose.
   The underline stays: color alone must not be the only link cue. */
.legal a {
  color: var(--gold-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s ease;
}
.legal a:hover,
.legal a:focus-visible { color: var(--cream); }
.legal ul {
  margin: 12px 0;
  padding-right: 20px;
  line-height: 2;
  color: var(--cream);
}
.legal strong { color: var(--cream); }
.legal .legal-footnote {
  color: var(--text-muted);
  border-top: 1px solid var(--bg-soft);
  padding-top: 24px;
}

@media (max-width: 767px) {
  .legal { margin: 96px auto 56px; }
}