/* The static legal pages on socrachess.ai (generated by apps/web/src/features/legal/staticLegalSite.tsx).
   Same class names as the app's src/styles/legal.css, in plain CSS with the beta page's tokens. */
:root {
  color-scheme: light dark;
  --paper: #ffffff;
  --cream: #f6f5f4;
  --ink: #101110;
  --ink-soft: #545650;
  --line: #e8e4da;
  --gold-dark: #8b630e;
  --pending: #f6e7c4;
  --sans: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f100f;
    --cream: #181a18;
    --ink: #f5f5f3;
    --ink-soft: #b2b4ad;
    --line: #262926;
    --gold-dark: #f0c366;
    --pending: #4a3a14;
  }
}

body { margin: 0; padding: 8px; background: var(--cream); color: var(--ink); font: 400 16px/1.65 var(--sans); }
.legalPage { display: flex; flex-direction: column; max-width: 56rem; min-height: calc(100svh - 16px); margin: 0 auto;
  overflow: hidden; border-radius: 16px; background: var(--paper); }
.legalPageHeader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 20px; border-bottom: 1px solid var(--line); }
.legalPageLogo { display: block; width: 11rem; max-width: 100%; }
.legalPageLogoDark { display: none; }
.legalPageNav ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none;
  font-size: 14px; }
.legalPageNav a { color: var(--ink-soft); text-decoration: none; }
.legalPageNav a:hover, .legalPageNav a[aria-current="page"] { color: var(--gold-dark); }
.legalPageNav a[aria-current="page"] { font-weight: 600; }
.legalDocument { flex: 1; padding: 32px 20px; }
.legalDocument h1 { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.legalDraftNotice { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--cream); font-size: 14px; }
.legalDocumentBody { margin-top: 24px; }
.legalDocumentBody > * + * { margin-top: 16px; }
.legalDocumentBody h2 { margin-bottom: 0; padding-top: 16px; font-size: 20px; line-height: 1.35; font-weight: 600; }
.legalDocumentBody h3 { margin-bottom: 0; padding-top: 8px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.legalDocumentBody p { margin-bottom: 0; }
.legalDocumentBody ul { margin-bottom: 0; padding-inline-start: 24px; }
.legalDocumentBody li + li, .legalDocumentBody ul ul { margin-top: 8px; }
.legalDocumentBody a, .legalPageFooter a { color: var(--gold-dark); font-weight: 500; text-underline-offset: 2px;
  overflow-wrap: anywhere; }
.legalPending { padding: 2px 6px; border-radius: 6px; background: var(--pending); color: var(--ink); }
.legalPendingLabel { font-weight: 600; }
.legalPageFooter { padding: 20px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; }
@media (min-width: 640px) {
  .legalPageHeader, .legalPageFooter { padding-inline: 32px; }
  .legalDocument { padding: 40px 32px; }
}
/* Last, so the dark logo wins over the base rules above. */
@media (prefers-color-scheme: dark) {
  .legalPageLogoLight { display: none; }
  .legalPageLogoDark { display: block; }
}