.legal-page { background: var(--color-surface); color: var(--color-on-surface); }
.legal-main { min-height: 60vh; }
.legal-hero { padding: var(--spacing-4xl) var(--spacing-xl) var(--spacing-2xl); background: var(--color-surface-elevated); border-bottom: var(--divider-value); }
.legal-hero__inner, .legal-content, .legal-company { width: min(100%, var(--content-max-width)); margin-inline: auto; }
.legal-hero h1 { max-width: 22ch; margin-bottom: var(--spacing-md); }
.legal-hero p { max-width: 72ch; color: var(--color-on-surface-secondary); }
.legal-company { margin-top: var(--spacing-2xl); padding: var(--spacing-xl); border: 1px solid var(--color-outline); border-radius: var(--border-radius-card); background: var(--color-surface); }
.legal-company__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md) var(--spacing-xl); overflow-wrap: anywhere; }
.legal-company__grid p { color: var(--color-on-surface-secondary); }
.legal-company__grid strong { color: var(--color-on-surface); }
.legal-content { padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-4xl); }
.legal-section { padding-block: var(--spacing-xl); border-bottom: 1px solid color-mix(in srgb, var(--color-outline) 65%, transparent); }
.legal-section:last-child { border-bottom: 0; }
.legal-section h2 { margin-bottom: var(--spacing-md); color: var(--color-primary); }
.legal-section p + p { margin-top: var(--spacing-md); }
.legal-back { display: inline-flex; margin-top: var(--spacing-xl); color: var(--color-primary); font-weight: 600; }
.legal-updated { margin-top: var(--spacing-md); font-size: var(--font-size-sm); }
.legal-page a, .legal-page a:visited { color: inherit; text-decoration: none; }
.legal-page .legal-content a, .legal-page .legal-back { color: var(--color-primary); }
.legal-page a:hover { color: var(--color-secondary); text-decoration: none; }
.legal-page a:active { color: var(--color-primary); }
@media (max-width: 767px) {
  .legal-hero { padding: var(--spacing-3xl) var(--spacing-md) var(--spacing-xl); }
  .legal-content { padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-3xl); }
  .legal-company { margin-top: var(--spacing-xl); padding: var(--spacing-md); }
  .legal-company__grid { grid-template-columns: 1fr; }
}