/* Same sage palette as the app, so the support page and the product look like one thing. */
:root{
  --bg:#f5f7f4; --surface:#fff; --border:#dae2d8;
  --text:#1a201c; --dim:#5d6b61; --accent:#4a7c59;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#131a15; --surface:#1b241d; --border:#2a362d; --text:#eef3ec; --dim:#a9bdae; --accent:#7fb08c}
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
.wrap{max-width:680px;margin:0 auto;padding:56px 22px 80px}
h1{font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px}
h2{font-size:20px;margin:38px 0 10px;letter-spacing:-.01em}
p,li{color:var(--dim)}
li{margin-top:6px}
a{color:var(--accent)}
.lede{font-size:18px;margin-top:0}
.meta{font-size:14px;color:var(--dim);margin-bottom:34px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-top:22px}
.card p:first-child{margin-top:0}
footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--border);font-size:14px;color:var(--dim)}