html, body { margin: 0; min-height: 100%; background: var(--color-surface); }
.legal-main { min-height: 60vh; background: var(--color-surface); color: var(--color-on-surface); }
.legal-hero { padding: calc(var(--spacing-4xl) + 80px) var(--spacing-xl) var(--spacing-3xl) var(--spacing-xl); color: var(--color-on-primary); background: linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 75%, #000)); }
.legal-container { width: min(100% - 2rem, 920px); margin-inline: auto; }
.legal-eyebrow { margin-bottom: var(--spacing-sm); color: var(--color-secondary); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.legal-hero h1 { font-family: var(--font-family-heading); font-size: var(--font-size-4xl); line-height: var(--line-height-heading); }
.legal-content { padding: var(--spacing-3xl) 0 var(--spacing-4xl) 0; }
.legal-content > section { margin-bottom: var(--spacing-2xl); padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 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-content h2 { margin-bottom: var(--spacing-md); color: var(--color-primary); font-family: var(--font-family-heading); font-size: var(--font-size-2xl); }
.legal-content p, .legal-content li { line-height: 1.75; overflow-wrap: anywhere; }
.legal-content ul, .legal-content ol { margin: var(--spacing-md) 0 0 0; padding: 0 0 0 1.35rem; }
.legal-content li + li { margin-top: var(--spacing-xs); }
.legal-content a, .legal-content a:visited { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.legal-content a:hover { color: var(--color-accent); }
.legal-company-card { border-color: color-mix(in oklab, var(--color-secondary) 65%, var(--color-border)) !important; }
.legal-company-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--spacing-sm) var(--spacing-xl); }
.legal-back { margin-top: var(--spacing-xl); }
@media (max-width: 700px) { .legal-hero { padding: calc(var(--spacing-3xl) + 72px) var(--spacing-md) var(--spacing-2xl) var(--spacing-md); } .legal-container { width: min(100% - 1.5rem, 920px); } .legal-content > section { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-lg) var(--spacing-md); } .legal-company-grid { grid-template-columns: 1fr; } }