/* Content pages (/learn, /tools, /terms, /privacy, /refunds, /see): plain static HTML that reads without JavaScript.
   The homepage's look (VP Panel, 14.11): paper, rounded card blocks, the green pill, a deep-green CTA banner.
   Class contract kept for generated pages: .top .crumbs .sub .meta .box .cta(b+span) .list(li a p) button.big footer. */
:root { --paper:#F6F6F1; --ink:#0E1A14; --muted:#5F6B64; --line:#E1E3DA; --g:#1F5B43; --soft:#ECEDE6; --deep:#0B2E22;
  --f: Satoshi,-apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--paper); color:var(--ink); font:500 17px/1.65 var(--f); -webkit-font-smoothing:antialiased; }
main { max-width:700px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 14px) 20px 72px; }
/* the same top bar as the homepage: logo left, links right, the last link as a soft pill */
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 36px; }
.top img { height:26px; width:auto; display:block; border-radius:0; }
.top nav { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.top nav a { color:var(--muted); font:600 14px/1 var(--f); text-decoration:none; }
.top nav a.signin { padding:10px 16px; border-radius:20px; background:var(--soft); color:var(--ink); }
.crumbs { font:600 13px/1.4 var(--f); letter-spacing:.02em; color:var(--muted); margin:0 0 14px; } .crumbs a { color:var(--g); text-decoration:none; }
h1 { font:900 clamp(32px,7vw,46px)/1.04 var(--f); letter-spacing:-.04em; margin:0 0 14px; text-wrap:balance; }
.sub { color:var(--muted); margin:0 0 30px; font-size:18px; line-height:1.55; }
.meta { color:var(--muted); font-size:14px; margin:-14px 0 30px; }
h2 { font:900 25px/1.15 var(--f); letter-spacing:-.03em; margin:44px 0 12px; text-wrap:balance; }
h3 { font:700 18px/1.3 var(--f); margin:28px 0 8px; }
p, li { margin:0 0 14px; } ul, ol { padding-left:22px; } li::marker { color:var(--g); }
a { color:var(--g); text-underline-offset:3px; }
b, strong { font-weight:700; }
img { max-width:100%; height:auto; border-radius:20px; }
/* blocks */
.box { background:var(--soft); border-radius:24px; padding:20px 22px; margin:28px 0; }
.box > :last-child { margin-bottom:0; } .box > b:first-child { display:block; font:700 17px/1.3 var(--f); margin-bottom:8px; }
.cta { display:block; position:relative; overflow:hidden; margin:48px 0 0; padding:26px 24px 24px; border-radius:28px; color:#F6F6F1; text-decoration:none;
  background:radial-gradient(120% 90% at 85% 0%, #24493C, var(--deep)); box-shadow:0 18px 36px -22px rgba(14,26,20,.6); }
.cta b { display:block; font:900 24px/1.12 var(--f); letter-spacing:-.025em; }
.cta span { display:block; margin-top:6px; color:rgba(246,246,241,.75); font-size:15px; }
.cta::after { content:"Start · 2 minutes →"; display:inline-block; margin-top:18px; padding:14px 20px; border-radius:24px; background:#F6F6F1; color:var(--ink); font:700 15px/1 var(--f); }
.list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.list li { background:var(--soft); border-radius:22px; padding:18px 20px; margin:0; transition:transform .15s; }
.list li:active { transform:scale(.99); }
.list a { font:700 18px/1.3 var(--f); text-decoration:none; color:var(--ink); } .list a::after { content:" ›"; color:var(--g); }
.list p { margin:6px 0 0; color:var(--muted); font-size:15px; line-height:1.5; }
button.big { width:100%; height:60px; border:0; border-radius:30px; background:var(--g); color:#fff; font:700 17px/1 var(--f); cursor:pointer; }
button.big:active { transform:scale(.99); } button.big:disabled { opacity:.6; cursor:default; }
footer { margin-top:64px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.6; }
footer a { color:var(--ink); font-weight:600; text-decoration:none; margin-right:16px; }
@media (min-width:820px) { main { padding-top:24px; } .top { margin-bottom:56px; } }