/* Mirror — the content property.
   Same tokens as the app, so the site and the product read as one thing. */
:root{
  --bg:#FAF8F5; --surface:#FFFFFF; --tint:#F4F2ED; --border:#EAE7E1;
  --ink:#34313C; --ink-2:#6F6C7C; --caption:#55525F;
  --lav:#8E77E8; --lav-ink:#5A48A8; --lav-tint:#F1EDFB;
  --rose:#E8639F; --rose-ink:#8A3D68; --rose-tint:#FBEEF4;
  --mint-ink:#1F6A5E; --mint-tint:#E8F7F2;
  --butter-ink:#7A5C12; --butter-tint:#FFF3DC;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1B1240; --surface:#221B45; --tint:#2A2254; --border:#352C66;
    --ink:#F1EEFF; --ink-2:#A79FD1; --caption:#A79FD1;
    --lav:#B9A8F5; --lav-ink:#C9BCF8; --lav-tint:#2E2560;
    --rose:#F8AFD3; --rose-ink:#F3C3DC; --rose-tint:#3A2450;
    --mint-ink:#9DE8DC; --mint-tint:#1E3A4A;
    --butter-ink:#F5D48F; --butter-tint:#3A3050;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.display{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:800;letter-spacing:-0.01em}
a{color:var(--lav);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:720px;margin:0 auto;padding:0 22px 72px}
nav.top{max-width:720px;margin:0 auto;padding:20px 22px;display:flex;gap:18px;align-items:center}
nav.top .brand{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:800;font-size:20px;color:var(--ink)}
nav.top a{font-size:14px;font-weight:600;color:var(--ink-2)}
nav.top .spacer{flex:1}
header.hero{max-width:720px;margin:0 auto;padding:28px 22px 8px}
header.hero h1{margin:0;font-size:40px;line-height:1.08;text-wrap:balance}
header.hero p.lede{margin:14px 0 0;font-size:18px;color:var(--ink-2)}
h2{font-size:24px;margin:36px 0 10px;font-family:"Bricolage Grotesque",Georgia,serif;font-weight:800}
h3{font-size:18px;margin:26px 0 6px;font-weight:700}
.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px 22px;margin:18px 0}
.muted{color:var(--caption);font-size:14px}
.chip{display:inline-block;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.chip.lav{background:var(--lav-tint);color:var(--lav-ink)}
.chip.mint{background:var(--mint-tint);color:var(--mint-ink)}
.chip.butter{background:var(--butter-tint);color:var(--butter-ink)}
.chip.rose{background:var(--rose-tint);color:var(--rose-ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:18px 20px;display:block;color:var(--ink)}
.tile:hover{text-decoration:none;border-color:var(--lav)}
.tile .t{font-weight:700;font-size:16px;display:block;margin-bottom:4px}
.tile .m{font-size:13px;color:var(--caption)}
.note{border-left:3px solid var(--lav);background:var(--lav-tint);border-radius:0 14px 14px 0;padding:14px 18px;margin:22px 0}
.note strong{color:var(--lav-ink)}
.disclosure{background:var(--butter-tint);color:var(--butter-ink);border-radius:14px;padding:14px 18px;margin:22px 0;font-size:14px}
article p{margin:14px 0}
article ul{margin:14px 0;padding-left:22px}
article li{margin:7px 0}
footer{border-top:1px solid var(--border);margin-top:56px;padding:26px 22px;text-align:center;color:var(--caption);font-size:13px}
footer a{color:var(--caption)}
@media(max-width:560px){.grid{grid-template-columns:1fr}header.hero h1{font-size:32px}}