.legal-main {
    width: min(100% - (var(--layout-gutter-mobile) * 2), var(--layout-container-narrow));
    margin: 0 auto;
    padding: var(--space-40) 0 var(--space-48);
}

.legal-hero {
    margin-bottom: var(--space-48);
}

.legal-kicker {
    margin-bottom: var(--space-16);
    color: var(--color-text-brand);
    font: var(--font-label);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.legal-hero h1 {
    max-width: 780px;
    margin-bottom: var(--space-20);
    color: var(--color-text);
    font: var(--font-display);
}

.legal-hero p,
.legal-section p,
.legal-list {
    color: var(--color-text-muted);
    font: var(--font-body);
}

.legal-content {
    display: grid;
    gap: var(--space-32);
}

.legal-section {
    padding-top: var(--space-32);
    border-top: var(--border-width) solid var(--color-border);
}

.legal-section h2 {
    margin-bottom: var(--space-16);
    color: var(--color-text);
    font: var(--font-subtitle);
}

.legal-section p {
    margin-bottom: var(--space-12);
}

.legal-section p:last-child,
.legal-list {
    margin-bottom: 0;
}

.legal-list {
    display: grid;
    gap: var(--space-10);
    padding-left: var(--space-20);
}

.legal-list strong,
.legal-section strong {
    color: var(--color-text);
}

.legal-link {
    color: var(--color-text-brand);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.legal-link:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .legal-main {
        padding-top: var(--space-24);
    }

    .legal-hero h1 {
        font: var(--font-mobile-display);
    }

    .legal-section h2 {
        font: var(--font-mobile-subtitle);
    }

    .legal-hero p,
    .legal-section p,
    .legal-list {
        font: var(--font-mobile-body);
    }
}