:root{
  --paper:#F6F7F2;
  --paper-dim:#EDEFE8;
  --ink:#1C231F;
  --ink-soft:#57604F;
  --ink-faint:#8B9285;
  --line:#DADFD3;
  --green:#17B978;
  --green-dark:#0E8C5A;
  --green-glow:rgba(23,185,120,0.35);
  --rust:#C4573B;
  --radius:10px;
  --shadow:0 1px 2px rgba(28,35,31,0.06), 0 8px 24px -12px rgba(28,35,31,0.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:-0.01em;
  margin:0;
}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--green-dark); outline-offset:2px;}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(246,247,242,0.9);
  backdrop-filter:blur(6px);
  z-index:40;
  flex-wrap:wrap;
  row-gap:8px;
}
.wordmark{display:flex; align-items:center; gap:9px; font-size:15px; text-decoration:none;}
.wordmark .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-glow);}
.wordmark b{font-weight:600;}
.topbar nav{display:flex; gap:22px; font-size:13px; color:var(--ink-soft);}
.topbar nav a{text-decoration:none;}
.topbar nav a:hover, .topbar nav a[aria-current]{color:var(--ink);}
.topbar .count-pill{
  font-size:12px; color:var(--ink-soft); border:1px solid var(--line);
  padding:4px 10px; border-radius:100px; display:none;
}

.btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:10px 18px; border-radius:8px; font-size:13.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; transition:all .14s ease;
  text-decoration:none;
}
.btn:hover{border-color:var(--ink-faint); transform:translateY(-1px);}
.btn.primary{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.btn.primary:hover{background:#000;}
.btn.accent{background:var(--green); border-color:var(--green); color:#fff;}
.btn.accent:hover{background:var(--green-dark);}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-soft); padding:8px 10px;}
.btn.ghost:hover{color:var(--rust);}
.btn.small{padding:7px 12px; font-size:12.5px;}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none;}

/* Simple content pages (About / Privacy) */
.page-wrap{max-width:720px; margin:0 auto; padding:56px 24px 90px;}
.page-wrap .eyebrow{
  font-size:12px; color:var(--green-dark); font-weight:500;
  text-transform:uppercase; letter-spacing:0.12em; margin-bottom:14px;
}
.page-wrap h1{font-size:clamp(28px,4.5vw,40px); line-height:1.1; font-weight:600; margin-bottom:18px;}
.page-wrap h2{font-size:20px; font-weight:600; margin:38px 0 12px;}
.page-wrap p{color:var(--ink-soft); font-size:15.5px; line-height:1.7; margin:0 0 14px;}
.page-wrap ul{color:var(--ink-soft); font-size:15.5px; line-height:1.7; padding-left:20px; margin:0 0 14px;}
.page-wrap li{margin-bottom:6px;}
.page-wrap .updated{font-size:12.5px; color:var(--ink-faint); margin-bottom:32px;}
.page-wrap a.inline{color:var(--green-dark); text-decoration:underline;}
.card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0;}
@media (max-width:640px){.card-row{grid-template-columns:1fr;}}
.info-card{border:1px solid var(--line); border-radius:12px; padding:18px; background:#fff;}
.info-card .step{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--green-dark); margin-bottom:8px;}
.info-card h3{font-size:15px; font-weight:600; margin-bottom:6px;}
.info-card p{font-size:13.5px; margin:0; color:var(--ink-soft);}

footer.site-footer{
  border-top:1px solid var(--line); padding:26px 28px; text-align:center;
  color:var(--ink-faint); font-size:12px;
}
footer.site-footer .foot-links{display:flex; gap:16px; justify-content:center; margin-top:8px;}
footer.site-footer a{text-decoration:none;}
footer.site-footer a:hover{color:var(--ink-soft);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

@media (max-width:640px){
  .topbar{padding:12px 16px;}
  .wordmark{font-size:14px;}
  .wordmark .logo-mark{width:20px; height:20px;}
  .topbar nav{gap:12px; font-size:12px; flex-wrap:wrap; row-gap:6px;}
  .page-wrap{padding:36px 18px 60px;}
  .page-wrap h1{font-size:26px;}
  .info-card, .panel-card{padding:14px;}
}