/* Shared styling for the document pages — About, Terms, Privacy.
 *
 * The home page keeps its own inline styles because it carries the calculator and
 * has to paint before anything else loads. These three are ordinary reading pages
 * and can share one stylesheet, which is one fewer place for the palette to drift.
 *
 * Tokens are the landing page's, unchanged. A privacy policy set in Times on white
 * reads as something bolted on by a lawyer; these belong to the product. */

:root{
  --ground:#E3E8E3; --panel:#EDF1EC; --ink:#14233A; --ink-soft:#4E6076;
  --ink-faint:#8A99A6; --rule:#B4C0B7; --wax:#A93B2B; --brass:#8A6D2F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1522; --panel:#121F30; --ink:#DCE5DD; --ink-soft:#93A6B4;
    --ink-faint:#5D7183; --rule:#2A3D51; --wax:#E0705B; --brass:#C9A75E;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1522; --panel:#121F30; --ink:#DCE5DD; --ink-soft:#93A6B4;
  --ink-faint:#5D7183; --rule:#2A3D51; --wax:#E0705B; --brass:#C9A75E;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Spectral,Georgia,"Times New Roman",serif;
  font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:8px 24px 96px}

/* Navigation. Present on every page so nothing is reachable only by guessing at
   a URL, and the current page is marked rather than merely un-linked. */
nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  padding:14px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:40px}
nav a{font-family:"Archivo Narrow",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--ink-soft);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
nav a:hover{color:var(--wax)}
nav a[aria-current="page"]{color:var(--wax);border-bottom:1px solid var(--wax)}
nav .mark{font-family:"Bodoni Moda",Didot,serif;text-transform:none;
  letter-spacing:0;font-size:19px;color:var(--ink);margin-right:6px}
nav .mark:hover{color:var(--wax)}

h1{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:44px;
  line-height:1.1;margin:0 0 12px}
.lede{font-style:italic;color:var(--ink-soft);margin:0 0 8px;font-size:19px}
.effective{font-family:"Archivo Narrow",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--brass);margin:0}
section{margin-top:44px}
h2{font-family:"Bodoni Moda",Didot,serif;font-weight:500;font-size:24px;
  line-height:1.25;margin:0 0 14px}
p{margin:0 0 16px}
.eyebrow{font-family:"Archivo Narrow",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:11.5px;color:var(--brass);margin:0 0 10px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--panel);padding:1px 5px;border-radius:2px}

/* A feature, stated plainly. */
.feature{border-top:1px solid var(--rule);padding-top:22px;margin-top:30px}
.feature h3{font-family:"Bodoni Moda",Didot,serif;font-weight:500;font-size:21px;
  margin:0 0 8px;line-height:1.3}
.feature p{color:var(--ink-soft);margin:0}
.notyet{font-family:"Archivo Narrow",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;color:var(--ink-faint);
  border:1px solid var(--rule);padding:3px 8px;margin-left:8px;white-space:nowrap}

footer{margin-top:72px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:"Archivo Narrow",Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:12px}
footer a{color:var(--ink-soft);text-decoration:none;margin-right:18px;
  display:inline-block;min-height:44px;line-height:44px;white-space:nowrap}
footer a:hover{color:var(--wax)}
.fineprint{font-family:Spectral,Georgia,serif;text-transform:none;letter-spacing:0;
  font-size:13px;line-height:1.6;color:var(--ink-faint);margin-top:8px}

@media (max-width:600px){ h1{font-size:34px} body{font-size:17px} nav{gap:16px} }