html, body {
    margin: 0;
    min-height: 100%;
    background: var(--color-surface);
}

.legal-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color: var(--color-on-surface);
}

.legal-main {
    flex: 1 0 auto;
    width: 100%;
    padding: clamp(7rem, 12vw, 9rem) var(--spacing-lg) var(--spacing-3xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), var(--color-surface) 30%);
}

.legal-shell {
    width: min(100%, 76rem);
    margin: 0 auto;
}

.legal-hero {
    max-width: 56rem;
    margin-bottom: var(--spacing-2xl);
}

.legal-kicker {
    color: var(--color-accent);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
}

.legal-hero h1 {
    margin: .55rem 0 .9rem;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-heading);
    color: var(--color-primary);
}

.legal-hero > p:not(.legal-kicker):not(.legal-updated) {
    font-size: var(--font-size-lg);
    color: var(--color-on-surface-secondary);
}

.legal-updated {
    margin-top: .85rem;
    font-size: var(--font-size-sm);
    color: var(--color-on-surface-secondary);
}

.legal-company-card {
    padding: var(--spacing-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-level-1);
}

.legal-company-card h3 {
    margin: 0 0 var(--spacing-md);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.legal-company-card a, .legal-company-card a:visited {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.legal-company-card a:hover {
    color: var(--color-accent);
}

.legal-content {
    margin-top: var(--spacing-2xl);
    display: grid;
    gap: var(--spacing-lg);
}

.legal-section {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
    border-radius: var(--border-radius-lg);
    background: #fff;
    box-shadow: var(--shadow-level-1);
}

.legal-section h2 {
    margin: 0 0 .7rem;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

.legal-section p, .legal-section li {
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.legal-page a, .legal-page a:visited {
    text-decoration: none;
}

.not-found-main {
    flex: 1;
    display: grid;
    place-items: center;
    width: 100%;
    padding: clamp(8rem, 14vw, 11rem) 1rem 5rem;
    background: var(--color-surface);
}

.not-found-card {
    width: min(100%, 42rem);
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    background: #fff;
    box-shadow: var(--shadow-level-2);
}

.not-found-code {
    color: var(--color-secondary);
    font: 800 clamp(4rem, 15vw, 8rem)/1 var(--font-family-heading);
}

.not-found-card h1 {
    margin: .5rem 0 1rem;
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
}

.not-found-card p:not(.not-found-code) {
    margin-bottom: 1.5rem;
    color: var(--color-on-surface-secondary);
}

@media (max-width: 600px) {
    .legal-main {
        padding-inline: 1rem;
    }

    .legal-company-card, .legal-section {
        padding: 1.1rem;
        max-width: 82vw;
    }
    .navigation-container {
        justify-content: space-around;
    }
}