/* Privacy + support pages (web/privacy.html, web/support.html): the mockup's typography on a plain reading
   column. Static, no scripts; fonts from the app's own folder (SPEC hard constraint 3 — no CDN). */
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --ground: #07060f;
  --pearl: #ece8f6;
  --muted: #bcb6d6;
  --hair: #2a2640;
  --water: #bba5ff;
  --air: #9fe3f0;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--pearl);
  font: 400 14px/1.7 var(--mono);
  -webkit-font-smoothing: antialiased;
}
.legal { max-width: 720px; margin: 0 auto; padding: 48px 24px 64px; }
.legal-head { border-bottom: 1px solid var(--hair); padding-bottom: 28px; margin-bottom: 32px; }
.legal-brand { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; color: inherit; text-decoration: none; margin-bottom: 36px; }
.wordmark { font: 400 34px/1 var(--display); letter-spacing: 0.32em; text-transform: uppercase; margin-right: -0.32em; }
.tagline, .eyebrow, h2 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
h1 { font: 400 italic 48px/1.1 var(--display); margin: 0 0 10px; }
h2 { margin: 0 0 12px; font-weight: 500; }
p, ul, dl { margin: 0 0 14px; }
section { margin: 0 0 34px; }
.lede p { font: 400 23px/1.45 var(--display); color: var(--pearl); }
ul { padding-left: 1.2em; }
li { margin: 0 0 6px; }
li::marker { color: var(--water); }
dt { color: var(--pearl); font-weight: 500; margin-top: 12px; }
dd { margin: 2px 0 0; color: var(--muted); }
p, li { color: #d6d1e6; }
a { color: var(--air); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--air); outline-offset: 3px; border-radius: 3px; }
.faq dt { font: 400 21px/1.35 var(--display); margin-top: 22px; }
.faq dd { color: #d6d1e6; margin-top: 6px; }
.credits li { color: var(--muted); }
.legal-foot { border-top: 1px solid var(--hair); padding-top: 22px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; display: flex; gap: 24px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .legal { padding: 32px 16px 48px; }
  .wordmark { font-size: 28px; }
  h1 { font-size: 40px; }
  .lede p { font-size: 20px; }
}