/* ══════════════════════════════════════════════════════════════
   LEGAL / SUPPORT CONTENT CENTERING
   Scope: Terms of Use, Privacy Policy (whole page), and the FAQ
   block on Support (scoped to a wrapper div around just that
   section, not the whole page).

   Same problem as InfoPages.css: .page-hero/.section-header/
   .content-wrapper use a vw-based left margin in Styles.css, so
   they don't sit centered on wide screens. This reuses the same
   1000px-centered treatment.

   Deliberately a separate file/class from .ip-page: Terms of Use
   and Privacy Policy have dozens of numbered <h2> section headings
   inside plain .content-section divs, and InfoPages.css centers
   the *first* .content-section h2 on About/Manifesto (Our Story /
   Our Mission) — reusing that here would center every numbered
   legal heading too, which isn't wanted. This file only touches
   container alignment, nothing about heading text-align.
══════════════════════════════════════════════════════════════ */

.legal-page .page-hero,
.legal-page .section-header,
.legal-page .content-wrapper {
    box-sizing: border-box;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.legal-page .page-hero       { padding-top: 4rem;   padding-bottom: 3rem; }
.legal-page .section-header  { padding-top: 2.5rem; padding-bottom: 1.25rem; }
.legal-page .content-wrapper { padding-top: 1rem;   padding-bottom: 3rem; }

@media (max-width: 768px) {
    .legal-page .page-hero,
    .legal-page .section-header,
    .legal-page .content-wrapper {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .legal-page .page-hero       { padding-top: 2.5rem; padding-bottom: 2rem; }
    .legal-page .section-header  { padding-top: 2rem;   padding-bottom: 1rem; }
    .legal-page .content-wrapper { padding-top: 1rem;   padding-bottom: 2rem; }
}

@media (max-width: 480px) {
    .legal-page .page-hero,
    .legal-page .section-header,
    .legal-page .content-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}