/* Shared by long-form legal pages (Privacy Policy, and Terms of Service later) —
   plain single-column reading layout, not a marketing page.
   Sitewide chrome/primitives live in base.css, nav.css, footer.css. */

.legal-hero { background: var(--obsidian); color: var(--ivory); padding: 90px 0 70px; }
.legal-hero h1 { margin-top: 18px; color: var(--ivory); font-size: clamp(30px, 4vw, 46px); font-weight: 500; }
.legal-updated { margin-top: 16px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); }

/* Last section on the page, before the footer — needs its own bottom padding
   now that the generic `section{}` rule (base.css) only supplies top padding. */
.legal-body { background: var(--ivory); padding-bottom: 110px; }
.legal-content { max-width: 760px; color: var(--stone); font-size: 15.5px; line-height: 1.9; }
.legal-content h2 {
  margin-top: 52px;
  color: var(--obsidian);
  font-size: 24px;
  font-weight: 500;
  border-top: 1px solid var(--hair);
  padding-top: 40px;
}
.legal-content h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.legal-content p { margin-top: 14px; }
.legal-content ul { margin-top: 14px; padding-left: 22px; }
.legal-content li { margin-top: 8px; }
.legal-steps { list-style: none; margin-top: 14px; padding-left: 0; }
.legal-step { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 14px 0; }
.legal-step .rn { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--bronze); }
.legal-step p { margin-top: 0; }
.legal-content a { color: var(--bronze); text-decoration: underline; }
.legal-content a:hover { color: var(--gold); }

@media (max-width: 920px) {
  .legal-body { padding-bottom: 64px; }
}