.legal-page-shell { min-height: 100vh; background: var(--color-surface); color: var(--color-on-surface); }
.legal-main { padding: 72px 24px 96px; }
.legal-container { width: 100%; max-width: 960px; margin: 0 auto; }
.legal-hero { padding: 48px 0 28px; border-bottom: 1px solid var(--color-border); }
.legal-kicker { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
.legal-title { margin-top: 12px; font-family: var(--font-family-heading); font-size: 44px; line-height: 1.15; color: var(--color-primary); }
.legal-lead { margin-top: 18px; max-width: 75ch; font-size: 17px; line-height: 1.7; color: var(--color-on-surface-secondary); }
.legal-updated { margin-top: 16px; font-size: 14px; color: var(--color-on-surface-secondary); }
.legal-back { display: inline-flex; margin-top: 24px; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--border-radius-md); background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.legal-section { padding: 34px 0 !important; border-bottom: 1px solid color-mix(in oklab, var(--color-border) 45%, transparent); }
.legal-section h2 { font-family: var(--font-family-heading); font-size: 28px; line-height: 1.25; color: var(--color-primary); margin-bottom: 14px; }
.legal-section h3 { font-family: var(--font-family-heading); font-size: 20px; margin: 22px 0 10px; color: var(--color-primary); }
.legal-section p, .legal-section li { font-size: 16px; line-height: 1.75; color: var(--color-on-surface); }
.legal-section p + p { margin-top: 14px; }
.legal-section ul, .legal-section ol { padding-left: 24px; margin-top: 14px; }
.legal-section li + li { margin-top: 8px; }
.legal-contact-card { margin-top: 18px; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); background: var(--color-surface-elevated); }
.legal-contact-card p { overflow-wrap: anywhere; }
@media (max-width: 768px) { .legal-main { padding: 34px 18px 64px; } .legal-hero { padding-top: 26px; } .legal-title { font-size: 32px !important; text-align: center; } .legal-lead, .legal-updated { text-align: left; } .legal-section { padding: 28px 0 !important; } .legal-section h2 { font-size: 24px !important; text-align: center; } .legal-section h3 { font-size: 20px !important; text-align: center; } }