/* ============================================================
   legal.css — /privacy, /terms, /health-privacy pages.
   Loads after base.css.
   ============================================================ */

.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--s5) var(--pad) var(--s8);
}

.legal-page h1 {
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.legal-page .legal-updated {
    color: var(--muted);
    font-size: var(--fs-sm);
    margin-top: 6px;
}

.legal-page h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: var(--s4);
    margin-bottom: var(--s1);
}

.legal-page p,
.legal-page li {
    color: var(--body);
    font-size: var(--fs-md);
    line-height: 1.7;
}

.legal-page p + p {
    margin-top: var(--s1);
}

.legal-page ul {
    margin: var(--s1) 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legal-page a {
    color: var(--blue);
}

.legal-page .legal-callout {
    margin-top: var(--s2);
    padding: var(--s2);
    background: var(--soft);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
}

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--s3);
    color: var(--body);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.legal-back:hover,
.legal-back:focus-visible {
    color: var(--blue);
}