/* Firsthand — support site. Tokens are the app's own, from src/ui/theme.ts:
   warm stone ground, navy base, the measured amber. Figtree throughout with
   DM Serif Display italic for a single emotive word, as MixTitle sets it. */
:root{
  --ground:#E7E2D8; --base:#141B2D; --surface:#FFFFFF; --border:#CFC8BA;
  --ink:#111110; --muted:#5F5C57; --faint:#66635E; --amber:#B5341F;
  --ink-dark:#F2F1EE; --muted-dark:#B9BDC9;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --voice:"DM Serif Display",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.masthead{background:var(--base);color:var(--ink-dark);padding:22px 0}
.masthead .in{display:flex;align-items:baseline;gap:20px}
.masthead a{color:var(--muted-dark);text-decoration:none;font-size:15px}
.masthead a:hover,.masthead a:focus-visible{color:var(--ink-dark)}
.brand{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink-dark);margin-right:auto}
.in{max-width:44rem;margin:0 auto;padding:0 24px}
main{padding:56px 0 88px}
h1{font-size:clamp(30px,5vw,42px);line-height:1.1;letter-spacing:-.025em;
  margin:0 0 20px;text-wrap:balance;font-weight:700}
h1 em{font-family:var(--voice);font-style:italic;font-weight:400;letter-spacing:0}
h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--faint);margin:48px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--border)}
h3{font-size:19px;margin:28px 0 8px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 16px;color:var(--muted)}
p.lede{font-size:19px;color:var(--ink)}
ul{margin:0 0 16px;padding-left:20px;color:var(--muted)}
li{margin-bottom:8px}
a{color:var(--amber)}
strong{color:var(--ink);font-weight:600}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:22px 24px;margin:0 0 16px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.meta{font-size:14px;color:var(--faint)}
footer{border-top:1px solid var(--border);padding:28px 0 56px;font-size:14px;color:var(--faint)}
footer a{color:var(--faint)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
@media (prefers-color-scheme:dark){
  :root{--ground:#0E1420;--surface:#141B2D;--border:#2A344A;
    --ink:#F2F1EE;--muted:#B9BDC9;--faint:#8D93A3;--amber:#F2937F}
}