/* Shared styling for Closebud's content pages (about, welcome, privacy,
   terms, changelog). The app itself (index.html) keeps its own inline CSS —
   these tokens are copied to match it exactly, since there's no build step. */
:root{
  --ink:#121A15;
  --surface:#1B2820;
  --surface-2:#223228;
  --line:#2C4033;
  --chalk:#EEF4ED;
  --sage:#9DB5A3;
  --moss:#5F7A66;
  --amber:#E9B44C;
  --amber-deep:#C28E2B;
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--chalk);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:350;
  line-height:1.6;
  min-height:100dvh;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.mono{font-family:"Spline Sans Mono",ui-monospace,monospace}
a{color:var(--amber)}
a:hover{color:var(--amber-deep)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ---------- page chrome ---------- */
.page-nav{
  position:sticky;top:0;z-index:5;
  background:linear-gradient(to bottom,var(--ink) 82%,transparent);
  padding:14px 0 10px;
  display:flex;align-items:center;gap:12px;
}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 20px}
.back{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"Spline Sans Mono",monospace;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;
}
.back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

main{flex:1;padding-bottom:36px}
.eyebrow{
  font-family:"Spline Sans Mono",monospace;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);margin-bottom:10px;
}
h1{
  font-size:clamp(30px,8vw,44px);font-weight:750;
  letter-spacing:-.02em;line-height:1.08;margin-bottom:14px;
}
h1 em{font-style:normal;color:var(--amber)}
.lede{font-size:17px;color:var(--sage);line-height:1.55;margin-bottom:26px;max-width:56ch}
h2{
  font-size:20px;font-weight:700;letter-spacing:-.01em;
  margin:34px 0 10px;line-height:1.25;
}
h3{font-size:15.5px;font-weight:650;margin:22px 0 6px;color:var(--chalk)}
p{margin-bottom:14px;max-width:66ch}
ul,ol{margin:0 0 16px 20px;max-width:66ch}
li{margin-bottom:7px}
strong{font-weight:650;color:var(--chalk)}
hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.muted{color:var(--moss);font-size:13.5px;line-height:1.55}
code{
  font-family:"Spline Sans Mono",monospace;font-size:.9em;
  background:var(--surface);border:1px solid var(--line);
  padding:1px 5px;border-radius:5px;
}

/* callout — used for the legal-review notice and similar */
.note{
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:10px;padding:14px 16px;margin:20px 0;
  font-size:14.5px;line-height:1.55;
}
.note strong{color:var(--amber)}
.note p:last-child{margin-bottom:0}

/* step list for the welcome guide */
.steps{list-style:none;margin-left:0;counter-reset:step}
.steps li{
  counter-increment:step;
  position:relative;padding-left:42px;margin-bottom:20px;
}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  color:var(--amber);font-family:"Spline Sans Mono",monospace;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.steps li strong{display:block;margin-bottom:2px}

/* changelog */
.release{border-left:2px solid var(--line);padding-left:18px;margin-bottom:28px}
.release h2{margin-top:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.release .date{
  font-family:"Spline Sans Mono",monospace;
  font-size:12px;font-weight:500;color:var(--moss);letter-spacing:.04em;
}
.release ul{margin-bottom:0}

/* ---------- footer (also used inside the app) ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:22px 0 calc(26px + env(safe-area-inset-bottom));
  margin-top:auto;
}
.site-footer .wrap{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
}
.foot-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  list-style:none;margin:0;
}
.foot-links a{
  color:var(--sage);text-decoration:none;font-size:14px;
  transition:color .15s ease;
}
.foot-links a:hover{color:var(--amber)}
.foot-meta{
  color:var(--moss);font-size:12.5px;line-height:1.6;
  max-width:52ch;margin-inline:auto;
}
.foot-meta .brand-mark{
  font-family:"Spline Sans Mono",monospace;
  font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sage);display:block;margin-bottom:6px;
}
@media (min-width:600px){
  .site-footer .wrap{gap:16px}
}