.legal-page { min-height: 100vh; min-height: 100dvh; }
.legal-shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 40px; }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.legal-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; font-weight: 700; }
.legal-back { color: var(--cyan); text-decoration: none; font-size: 14px; }
.legal-back:hover,
.legal-back:focus-visible { text-decoration: underline; }
.legal-panel { padding: 28px; }
.legal-eyebrow { margin-bottom: 10px; color: var(--cyan); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.legal-panel h1 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; }
.legal-meta { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.legal-panel section + section { margin-top: 12px; }
.legal-panel h2 { margin: 0 0 10px; font-size: 18px; line-height: 1.35; }
.legal-panel p,
.legal-panel li { color: var(--text); font-size: 15px; line-height: 1.72; }
.legal-panel ul { margin: 10px 0 0 18px; padding: 0; }
.legal-panel a { color: var(--cyan); }

html[data-theme="light"] .legal-brand,
html[data-theme="light"] .legal-page { color: var(--text); }
html[data-theme="light"] .legal-back,
html[data-theme="light"] .legal-eyebrow,
html[data-theme="light"] .legal-panel a { color: #0877a6; }
html[data-theme="light"] .legal-panel { background-color: #ffffff; background-image: radial-gradient(circle at top left, rgba(15, 127, 168, 0.08), transparent 44%), linear-gradient(180deg, #ffffff, #f7fbff); border-color: rgba(108, 146, 173, 0.24); box-shadow: 0 16px 38px rgba(101, 131, 154, 0.14); }
html[data-theme="light"] .legal-panel h1,
html[data-theme="light"] .legal-panel h2 { color: var(--text); }
html[data-theme="light"] .legal-meta,
html[data-theme="light"] .legal-panel p,
html[data-theme="light"] .legal-panel li { color: var(--muted); }

@media (max-width: 720px) {
  .legal-shell { width: min(100% - 20px, 980px); padding-top: 18px; }
  .legal-header { align-items: flex-start; flex-direction: column; }
  .legal-panel { padding: 22px 18px; }
}