html, body { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    color: var(--text);
    background: radial-gradient(900px 480px at 50% -12%, var(--bg-2), transparent 70%), var(--bg);
    -webkit-font-smoothing: antialiased;
}

.legal {
    flex: 1;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: var(--s6) var(--s5) var(--s7);
}

.legal-head { margin-bottom: var(--s6); }
.legal-kicker {
    display: inline-block;
    margin-bottom: var(--s3);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.legal h1 {
    margin: 0 0 var(--s2);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
}
.legal-meta { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.legal h2 {
    margin: var(--s6) 0 var(--s2);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
}
.legal p, .legal li {
    color: var(--muted);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}
.legal p { margin: 0 0 var(--s3); }
.legal ul { margin: 0 0 var(--s3); padding-left: 1.25rem; }
.legal li { margin-bottom: var(--s2); }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--brand-2); }
.legal strong { color: var(--text); }
.legal-note {
    margin-top: var(--s6);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: var(--lh-body);
}
.legal-footer {
    text-align: center;
    color: var(--muted);
    font-size: var(--fs-sm);
    padding: var(--s5) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 760px) {
    .legal { padding: var(--s5) var(--s4) var(--s6); }
    .legal h1 { font-size: var(--fs-lg); }
}