/**
 * LEGAL PAGE (SHARED): styles unique to public/privacy-policy.html and
 * public/terms-and-conditions.html. The nav bar, footer, and cookie
 * banner on these pages reuse nav.css/footer.css/cookie-banner.css, same
 * as every other marketing page; this file only covers the article
 * content in between.
 *
 * public/cookie-policy.html deliberately keeps its own separate
 * css/marketing/cookie-policy.css rather than switching to this file:
 * that page was recently audited and approved, and this project avoids
 * touching a working, reviewed legal page just to remove a small amount
 * of duplication. The two files intentionally look alike (same reading
 * column width, same heading/paragraph treatment) so all three legal
 * pages still read as one consistent design language.
 *
 * This is a plain, readable article layout, not a card-heavy landing
 * page: a narrow reading column and small section labels, matching
 * cookie-policy.html's own approach.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change the intro heading/subtext or the "last updated" line:
 *     .legal-hero / .legal-updated;
 *   - change the reading-column width or paragraph spacing:
 *     .legal-section.
 *
 * Requires base.css to be linked first.
 */

.legal-hero { padding-top: 168px; padding-bottom: 32px; }
.legal-hero .wrap { max-width: 760px; }
.legal-hero h1 {
  font-family: var(--display); font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  margin: 14px 0 16px;
}
.legal-updated { font-size: .8rem; color: var(--text-4); margin: 0 0 18px; letter-spacing: .02em; }
.legal-hero p { font-size: 1rem; color: var(--text-3); line-height: 1.75; max-width: 620px; }

/* ── POLICY CONTENT ──────────────────────────────────
   A single narrow reading column for every section, kept well under
   the .wrap's full width so paragraphs stay comfortable to read. */
.legal-section { max-width: 760px; margin: 0 auto; padding-block: 24px; }
.legal-section .wrap { max-width: 760px; margin: 0 auto; }
.legal-section + .legal-section { border-top: 1px solid var(--border); }
.legal-section h2 { margin-bottom: 14px; }
.legal-section p { font-size: .92rem; color: var(--text-3); line-height: 1.75; margin-bottom: 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--text); font-weight: 600; }
.legal-section a { color: var(--accent-lt); text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 3px; }
.legal-section a:hover { color: var(--accent); }
.legal-section ul, .legal-section ol { margin: 0 0 14px 20px; color: var(--text-3); font-size: .92rem; line-height: 1.75; }
.legal-section ul:last-child, .legal-section ol:last-child { margin-bottom: 0; }
.legal-section li { margin-bottom: 6px; }
.legal-section li:last-child { margin-bottom: 0; }
.legal-section li::marker { color: var(--accent); }