@import url('./brand.css');

body.legal-page {
  background: var(--ck-blue); color: var(--ck-text); font-family: var(--ck-sans);
  line-height: 1.75; max-width: 960px; margin: 0 auto; padding: 32px 24px 72px;
  --text: var(--ck-text); --muted: var(--ck-muted); --border: var(--ck-line);
  --surface: var(--ck-surface); --accent-dark: var(--ck-lime);
}
.legal-page main { padding: 24px 0 0; }
.legal-page .legal-brand { display: inline-flex; gap: 10px; align-items: center; margin: 0 0 40px; color: var(--ck-lime); font: 1.75rem var(--ck-serif); text-decoration: none; }
.legal-page h1, .legal-page h2, .legal-page h3 { color: var(--ck-text); font-family: var(--ck-serif); font-weight: 400; border-color: var(--ck-line); }
.legal-page h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.12; overflow-wrap: anywhere; }
.legal-page h2 { font-size: 1.8rem; }
.legal-page a { color: var(--ck-lime); overflow-wrap: anywhere; }
.legal-page a:focus-visible { outline: 2px solid var(--ck-lavender); outline-offset: 5px; }
.legal-page .card, .legal-page .hero, .legal-page table { background: var(--ck-surface); border-color: var(--ck-line); box-shadow: none; border-radius: 12px; }
.legal-page th { background: #153570; }
.legal-page td, .legal-page th { border-color: var(--ck-line); overflow-wrap: anywhere; }
.legal-page .small, .legal-page .muted, .legal-page .meta { color: var(--ck-muted); }
.legal-page code { background: #193670; color: var(--ck-text); overflow-wrap: anywhere; }
.legal-page .badge { background: #21366b; color: var(--ck-lavender); border-color: var(--ck-line); }
.legal-page hr { background: var(--ck-line); border-color: var(--ck-line); }
@media (max-width: 560px) { .legal-page table { display: block; overflow-x: auto; } .legal-page .card, .legal-page .hero { padding: 20px; } }