:root{
  --bg:#eef2ee; --surface:#ffffff; --surface-2:#f6faf6; --border:#dce5de;
  --text:#0b1810; --muted:#54685b; --faint:#7c8f83;
  --accent:#0f9f52; --accent-ink:#0b7d40; --accent-2:#1f86c4;
  --shadow:0 1px 2px rgba(11,24,16,.04), 0 8px 30px rgba(11,24,16,.06);
  --radius:16px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070b08; --surface:#0e150f; --surface-2:#121c15; --border:#213026;
    --text:#e9f1eb; --muted:#93a89a; --faint:#6f8478;
    --accent:#22e06a; --accent-ink:#3ff083; --accent-2:#38bdf8;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#070b08; --surface:#0e150f; --surface-2:#121c15; --border:#213026;
  --text:#e9f1eb; --muted:#93a89a; --faint:#6f8478;
  --accent:#22e06a; --accent-ink:#3ff083; --accent-2:#38bdf8;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  line-height:1.62; -webkit-font-smoothing:antialiased;
  padding:0 20px;
}
.wrap{max-width:720px; margin:0 auto; padding:56px 0 72px}

/* Breadcrumb / back */
.crumbs{font-size:.85rem; color:var(--faint); margin:0 0 18px}
.crumbs a{color:var(--accent-ink); text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* Header */
header{margin-bottom:14px}
.brand{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.logo{
  width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  background:var(--surface); border:1px solid var(--border);
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.logo svg{width:26px; height:26px}
.wordmark{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:-.02em}
.wordmark .x{color:var(--accent)}
.byline{font-size:.82rem; color:var(--faint); font-weight:500}
h1.page{
  font-family:"Archivo",sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.9rem,5vw,2.5rem); margin:22px 0 0; text-wrap:balance;
}
.lede{color:var(--muted); margin:10px 0 0; font-size:1.05rem}

/* Cards */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px 26px; box-shadow:var(--shadow);
  margin:22px 0 20px;
}
.eyebrow{
  font:700 .72rem/1 "Archivo",sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:16px; height:2px; background:var(--accent); border-radius:2px}
h2{font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:-.01em; font-size:1.5rem; margin:0 0 6px}
h3{font-family:"Archivo",sans-serif; font-weight:600; font-size:1.12rem; margin:22px 0 4px}
p{margin:.65em 0}
.muted{color:var(--muted)}

/* Example grid mini */
.mini-grid{
  display:grid; grid-template-columns:auto repeat(3,1fr); gap:6px;
  max-width:360px; margin:16px 0; font-family:"Archivo",sans-serif; font-weight:600;
}
.mini-grid .cell{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:12px 8px; text-align:center; font-size:.82rem; min-height:52px;
  display:grid; place-items:center;
}
.mini-grid .hd{background:transparent; border:0; color:var(--faint); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em}
.mini-grid .ans{color:var(--accent-ink); background:rgba(15,159,82,.08); border-color:rgba(15,159,82,.35)}

/* CTA */
.cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:6px;
  font:700 1rem "Archivo",sans-serif; text-decoration:none;
  background:var(--accent); color:#04120a; border-radius:999px; padding:13px 24px;
  box-shadow:var(--shadow); transition:.18s;
}
.cta:hover{transform:translateY(-1px)}

/* Related links */
.links{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.links a{
  font:600 .9rem "Archivo",sans-serif; text-decoration:none; color:var(--accent-ink);
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:9px 16px;
}
.links a:hover{border-color:var(--accent)}

ul{margin:.5em 0; padding-left:1.15em}
li{margin:.4em 0}
li b, p b{color:var(--text); font-weight:600}
a{color:var(--accent-ink)}

.divider{height:1px; background:var(--border); border:0; margin:6px 0 20px}
footer{color:var(--faint); font-size:.85rem; text-align:center; margin-top:34px; line-height:2}
footer .dot{color:var(--accent)}
footer a{color:var(--faint); text-decoration:none}
footer a:hover{color:var(--accent-ink); text-decoration:underline}

@media (max-width:520px){ .wrap{padding:40px 0 56px} .card{padding:22px 18px} }
@media (prefers-reduced-motion:no-preference){
  .card{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
}