/* ============================================================================
   Privacy (Pages/Privacy.cshtml). Ported from "Privacy.dc.html".
   Hero backdrop is "Hero Backdrop" with pattern "Hex grid", tone Blue, no bottom glow.
   Legal copy sits in one readable column (max 760px); the design's sticky side nav is an inline "On this page" list.
   The .legal-* rules are duplicated in terms.css on purpose (shared CSS candidates for site.css).
   Shared pieces (.hero, .icon-well, .btn, .tools-cta__panel, ...) live in site.css. No JavaScript.
   ============================================================================ */

/* ---- Hero ---- */

/* Blue hero glow ("Hero Backdrop", tone Blue, bottom glow off). */

/* ---- Principle cards ---- */

/* ---- Body: one readable column ---- */

/* ---- Responsive ---- */
@media (max-width: 959px) {
    .legal-hero { padding: 60px 24px 48px; }
    .legal-hero .hero__title { font-size: 44px; }
    .legal-principles { padding: 0 24px 16px; }
    .legal-principles__inner { grid-template-columns: 1fr; }
    .legal-body { padding: 56px 24px 72px; gap: 36px; }
    .legal-body__inner { grid-template-columns: 1fr; gap: 32px; }
    .legal-toc { position: static; }
    .legal-toc__list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .legal-toc__list a { background: var(--mist); border-radius: 999px; }
    .legal-panel { padding: 28px 24px; }
}
@media (max-width: 559px) {
    .legal-hero { padding: 48px 20px 40px; }
    .legal-hero .hero__title { font-size: 34px; }
    .legal-principles { padding: 0 20px 12px; }
    .legal-body { padding: 44px 20px 56px; }
    .legal-section__title { font-size: 23px; }
    .legal-section__text { font-size: 16px; }
    .legal-section__btn, .legal-panel .btn { width: 100%; white-space: normal; }
}