body {
    background: linear-gradient(180deg, #f3f9ff 0%, var(--color-bg) 280px);
    line-height: 1.7;
}

a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color var(--motion-duration-fast) var(--motion-ease-soft),
                opacity var(--motion-duration-fast) var(--motion-ease-soft);
}

a:hover {
    text-decoration: underline;
    opacity: 0.92;
}

.legal-main {
    max-width: 920px;
    margin: clamp(120px, 14vh, 132px) auto calc(var(--space-14, 96px) - 8px);
    padding: 0 var(--space-6);
}

.legal-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    color: var(--color-white);
    padding: calc(var(--space-6) - 2px) calc(var(--space-8) - 4px);
    box-shadow: var(--shadow-card);
    margin-bottom: calc(var(--space-6) - 2px);
    position: relative;
    overflow: hidden;
}

.legal-hero::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.legal-kicker {
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 8px;
}

.legal-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    margin-bottom: 0;
}

.legal-version {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.legal-meta {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.legal-card {
    background: var(--surface-panel-base);
    border: 1px solid var(--border-panel-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel-rest);
    padding: clamp(26px, 2.8vw, 34px) clamp(20px, 2.8vw, 32px);
    transition: border-color var(--motion-duration-medium) var(--motion-ease-soft),
                box-shadow var(--motion-duration-medium) var(--motion-ease-smooth);
}

.legal-card:hover {
    border-color: var(--border-panel-hover);
    box-shadow: var(--shadow-panel-hover);
}

.legal-section + .legal-section {
    margin-top: calc(var(--space-8) - 4px);
    padding-top: calc(var(--space-8) - 4px);
    border-top: 1px solid var(--border-panel-subtle);
}

.legal-section h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
    margin-bottom: calc(var(--space-4) - 2px);
}

.legal-section p {
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--space-3) - 1px);
}

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

.legal-section ul {
    margin: calc(var(--space-3) - 1px) 0 0 18px;
    color: var(--color-text-secondary);
}

.legal-section li + li {
    margin-top: var(--space-2);
}

.legal-strong {
    color: var(--color-text);
    font-weight: 700;
}

.legal-card a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .legal-main {
        margin-top: calc(var(--space-14) + var(--space-4));
        margin-bottom: var(--space-12);
        padding: 0 var(--space-5);
    }

    .legal-hero {
        padding: calc(var(--space-5) - 2px) calc(var(--space-6) - 2px);
        border-radius: 20px;
    }

    .legal-card {
        padding: calc(var(--space-6) - 2px) calc(var(--space-5) - 2px);
    }

    .legal-section + .legal-section {
        margin-top: calc(var(--space-7) - 4px);
        padding-top: calc(var(--space-7) - 4px);
    }
}

:root[data-theme="dark"] body {
    background: linear-gradient(180deg, #0F162B 0%, var(--color-bg) 320px);
}

:root[data-theme="dark"] a {
    color: #9DB0FF;
}

:root[data-theme="dark"] .legal-hero {
    background: linear-gradient(135deg, #223065 0%, #182248 100%);
    box-shadow: 0 24px 48px rgba(1, 6, 18, 0.34);
}

:root[data-theme="dark"] .legal-card {
    background: var(--surface-panel-base);
    border-color: var(--border-panel-subtle);
    box-shadow: var(--shadow-panel-rest);
}

:root[data-theme="dark"] .legal-card:hover {
    border-color: var(--border-panel-hover);
    box-shadow: var(--shadow-panel-hover);
}

:root[data-theme="dark"] .legal-section + .legal-section {
    border-top-color: var(--border-panel-subtle);
}