/* Shared stylesheet for the static pages (about, terms, privacy).
   Tokens mirror the app's default "Flow" theme (css/style.css :root), with
   Deep as the dark counterpart — same pairing as landing.html, so the whole
   public surface reads as one brand.
   NOTE: the legal words live in terms.md / privacy.md — those are what legal
   versioning content-hashes (server/legal.clj); terms.html / privacy.html are
   just styled shells that render them via legal.js. Restyle freely here or in
   the shells; edit the .md files only when a re-consent prompt is intended. */
@import url("/css/fonts.css");

:root{
  --bg:#f4f7f6; --surface:#ffffff; --soft:#f7faf9;
  --text:#1b3331; --strong:#122524; --muted:#55676a;
  --border:#e2eae6; --border-subtle:#edf2f0;
  --primary:#15785b; --primary-hover:#0e5043;
  --font-sans:"Plus Jakarta Sans","Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display:var(--font-sans);
  --font-mono:var(--font-sans);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c1b1a; --surface:#122524; --soft:#15302d;
    --text:#d8e4e0; --strong:#f1f7f4; --muted:#9bb0aa;
    --border:#1f3f3a; --border-subtle:#15302d;
    --primary:#77e5a8; --primary-hover:#8deeaf;
  }
  :root{color-scheme:dark}
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--text);background:var(--bg);line-height:1.65}
a{color:var(--primary)}
a:hover{color:var(--primary-hover)}
a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
header{border-bottom:1px solid var(--border);background:var(--bg)}
.nav{max-width:820px;margin:0 auto;padding:16px 24px}
.brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--strong);line-height:1;text-decoration:none}
.logo-mark{display:block;flex:0 0 auto}
.wordmark{display:inline-flex;align-items:center}
.wordmark svg{display:block;height:100%;width:auto;overflow:visible}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main{max-width:820px;margin:0 auto;padding:48px 24px 64px}
h1{font:800 2rem var(--font-display);color:var(--strong);letter-spacing:-.03em;margin:0 0 .25rem}
.updated{font:600 .9rem var(--font-sans);color:var(--muted);margin:0 0 2rem}
h2{font:800 1.2rem var(--font-display);color:var(--strong);margin:2.2rem 0 .5rem;letter-spacing:-.02em}
p,li{color:var(--text)}
ul{padding-left:1.2rem}
strong{color:var(--strong)}
.muted{color:var(--muted);font-size:.9rem}
footer{border-top:1px solid var(--border);color:var(--muted);font-size:.85rem}
.foot{max-width:820px;margin:0 auto;padding:24px;display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--strong)}