@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Inter:wght@400;500;600&display=swap');
:root{
  --black:#0b0d10; --line-dark:#262e37;
  --paper:#f6f7f5; --paper-2:#eceeea; --line:#d6dad3;
  --ink:#101317; --ink-2:#4a535c; --ink-3:#7d868f;
  --green:#3ddc97; --green-deep:#13a868; --green-ink:#0b5c3a;
  --head:"Geist","Inter",-apple-system,sans-serif; --body:"Inter",-apple-system,"Segoe UI",sans-serif;
  /* back-compat aliases for pages that still reference the old variable names (onboarding, qbo-*) */
  --bg:#fbfbfa; --panel:#fff; --copper:var(--green-deep); --display:var(--head);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:760px;margin:0 auto;padding:0 24px 64px}
/* full-bleed dark header bar from the nav inside .wrap */
nav{display:flex;align-items:center;height:68px;margin-bottom:56px;background:var(--black);box-shadow:0 0 0 100vmax var(--black);clip-path:inset(0 -100vmax)}
.logo{font:600 15px var(--head);letter-spacing:.06em;color:#fff;text-decoration:none;white-space:nowrap}
.logo em{color:var(--green);font-style:normal;font-weight:600}
h1{font-family:var(--head);font-weight:300;letter-spacing:-.025em;font-size:clamp(34px,5vw,48px);line-height:1.08;margin:0 0 10px;color:var(--ink)}
.updated{color:var(--ink-3);font-size:13.5px;margin:0 0 32px}
h2{font-family:var(--head);font-weight:400;letter-spacing:-.015em;font-size:23px;line-height:1.25;margin:40px 0 10px;color:var(--ink)}
p,li{color:var(--ink-2);font-size:15.5px}
b,strong{color:var(--ink);font-weight:600}
ul{padding-left:22px}
li{margin-bottom:6px}
a{color:var(--green-deep)}
a:hover{color:var(--green-ink)}
.notice{border:1px solid var(--paper-2);background:#fff;padding:16px 20px;border-radius:14px;font-size:14.5px;color:var(--ink-2);margin:24px 0;box-shadow:0 1px 2px rgba(16,24,40,.04)}
footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-3);font-size:14px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--green-deep)}
@media(max-width:520px){
  .wrap{padding:0 16px 48px}
  nav{margin-bottom:40px}
}
