/* ==========================================================================
   Legal pages, in the studio system
   ========================================================================== */

.legal-main { padding: 28px 0 60px; }
.legal-container { width: min(100% - 40px, 760px); margin: 0 auto; }
.legal-header { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line-strong); }
.legal-title { font: 400 clamp(40px, 6vw, 64px) / 1.02 var(--font-display); letter-spacing: -.025em; margin-bottom: 6px; }
.legal-subtitle { font: italic 20px/1.3 var(--font-instrument-serif); color: var(--muted); }
.legal-updated { font: 11px/1.5 var(--font-ibm-plex-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.legal-content { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 8px; padding: 32px; }
.legal-intro { font: italic 20px/1.4 var(--font-instrument-serif); margin-bottom: 14px; }
.legal-content > p { margin-bottom: 14px; color: var(--ink-raised); font-size: 15px; line-height: 1.7; }
.legal-section { margin-top: 32px; }
.legal-section h2 { font: 400 28px/1.05 var(--font-display); letter-spacing: -.02em; margin-bottom: 12px; }
.legal-section h3 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; }
.legal-section p { margin-bottom: 12px; color: var(--ink-raised); font-size: 15px; line-height: 1.7; }
.legal-section ul { padding-left: 20px; margin-bottom: 14px; color: var(--ink-raised); font-size: 15px; line-height: 1.7; }
.legal-section li { margin-bottom: 4px; }
.legal-section a { text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.footer .footer-container { padding: 28px 0 35px; border-top: 1px solid var(--line-strong); }

@media (max-width: 600px) {
  .legal-content { padding: 20px 16px; }
}