/* Start at 18 — matches the 3XScale app-shell, mobile-first, light+dark. */
.s18-hub,.s18-guide{
  --accent:#0C7D47;--accent-press:#0A6239;--spark:#E8760F;--spark-soft:#FCEBD9;
  --ground:#F5F8F6;--surface:#FFFFFF;--ink:#0E2A21;--ink-soft:#37483F;--muted:#5E6F66;--line:#E3EBE6;--line-strong:#D2DED7;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  max-width:720px;margin:0 auto;padding:10px 0 44px;font-family:var(--font);color:var(--ink);
}
@media(prefers-color-scheme:dark){.s18-hub,.s18-guide{
  --ground:#08130F;--surface:#0E1D17;--ink:#E9F1EC;--ink-soft:#BECDC5;--muted:#8A9A92;--line:#1D2D27;--line-strong:#2A3D35;
  --accent:#34C77E;--accent-press:#4FD693;--spark:#F6923E;--spark-soft:#2A2015;}}
.s18-hub *,.s18-guide *{box-sizing:border-box;}
.s18-muted{color:var(--muted);}

/* ---- hub ---- */
.s18-h1{font-size:clamp(1.7rem,4.8vw,2.5rem);font-weight:800;letter-spacing:-.028em;line-height:1.12;margin:8px 0 12px;}
.s18-intro{font-size:1.05rem;line-height:1.6;color:var(--ink-soft);margin:0 0 22px;}
.s18-intro strong{color:var(--ink);}
.s18-progress{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;margin:0 0 22px;}
.s18-progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.95rem;color:var(--ink-soft);margin-bottom:10px;}
.s18-progress-top strong{font-size:1.25rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.s18-bar{height:12px;background:var(--line);border-radius:7px;overflow:hidden;}
.s18-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--spark));border-radius:7px;transition:width .5s ease;}
.s18-nudge{font-size:.86rem;color:var(--muted);margin:12px 0 0;}

.s18-steps{display:flex;flex-direction:column;gap:10px;}
.s18-step{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:inherit;transition:border-color .15s,transform .08s;}
.s18-step:hover{border-color:var(--accent);}
.s18-step:active{transform:scale(.995);}
.s18-num{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--ground);border:1px solid var(--line-strong);font-weight:700;font-size:.95rem;color:var(--ink-soft);}
.s18-step-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.s18-step-t{font-weight:700;font-size:1rem;letter-spacing:-.01em;line-height:1.25;}
.s18-step-o{font-size:.85rem;color:var(--muted);line-height:1.4;}
.s18-tick{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--line-strong);color:transparent;font-size:.95rem;font-weight:800;cursor:pointer;transition:all .15s;}
.s18-tick:hover{border-color:var(--accent);}
.s18-step.done{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface));}
.s18-step.done .s18-num{background:var(--accent);color:#fff;border-color:transparent;}
.s18-step.done .s18-tick{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ---- roadmap (Module 2) ---- */
.s18-rh{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:34px 0 8px;}
.s18-rp{color:var(--ink-soft);margin:0 0 14px;font-size:.98rem;line-height:1.55;}
.s18-badges{margin:0 0 14px;font-size:.9rem;color:var(--muted);}
.s18-badges:empty{display:none;}
.s18-badges-lbl{font-weight:600;color:var(--ink-soft);margin-right:4px;}
.s18-badge{display:inline-block;font-size:1.3rem;margin-left:2px;}
.s18-road{display:flex;flex-direction:column;gap:10px;}
.s18-mile{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;}
.s18-mbadge{flex:none;width:42px;height:42px;display:grid;place-items:center;font-size:1.5rem;background:var(--ground);border-radius:12px;}
.s18-mtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.s18-mt{font-weight:700;font-size:1rem;letter-spacing:-.01em;line-height:1.25;}
.s18-mt small{color:var(--muted);font-weight:500;}
.s18-md{font-size:.86rem;color:var(--muted);line-height:1.45;}
.s18-md a{color:var(--accent);font-weight:600;text-decoration:none;}
.s18-mtick{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--line-strong);color:transparent;font-size:.95rem;font-weight:800;cursor:pointer;transition:all .15s;}
.s18-mtick:hover{border-color:var(--accent);}
.s18-mile.done{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface));}
.s18-mile.done .s18-mtick{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ---- earn guidebook (Module 3) ---- */
.s18-scam-callout{display:block;background:var(--spark-soft);border:1px solid var(--line);border-left:3px solid var(--spark);border-radius:12px;padding:12px 16px;margin:0 0 20px;color:var(--ink-soft);text-decoration:none;font-size:.95rem;line-height:1.5;}
.s18-scam-callout:hover{border-color:var(--spark);}
.s18-scam-callout strong{color:var(--ink);}
.s18-earn-badge{background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:10px 14px;font-size:.88rem;color:var(--ink-soft);margin:0 0 16px;}
.s18-earn-free{flex:none;align-self:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:20px;padding:4px 10px;}

/* ---- guide ---- */
.s18-crumbs{font-size:.82rem;color:var(--muted);margin:8px 0 14px;}.s18-crumbs a{color:var(--accent);text-decoration:none;}
.s18-guide .s18-lead{font-size:1.1rem;font-weight:600;color:var(--ink);margin:0 0 18px;line-height:1.5;}
.s18-body h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin:24px 0 8px;}
.s18-body p{color:var(--ink-soft);line-height:1.62;margin:0 0 12px;}
.s18-body ul,.s18-body ol{color:var(--ink-soft);line-height:1.6;padding-left:22px;margin:0 0 12px;}
.s18-body li{margin:6px 0;}
.s18-body strong{color:var(--ink);}
.s18-body a{color:var(--accent);}
.s18-disc{background:var(--spark-soft);border:1px solid var(--line);border-left:3px solid var(--spark);border-radius:10px;padding:12px 14px;font-size:.82rem;line-height:1.55;color:var(--ink-soft);margin:0 0 18px;}
.s18-disc a{color:var(--accent);font-weight:600;}
.s18-sources{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0 6px;font-size:.9rem;}
.s18-sources b{color:var(--ink);}
.s18-sources ul{margin:8px 0 0;padding-left:20px;}.s18-sources li{margin:5px 0;}
.s18-sources a{color:var(--accent);}
.s18-verified{font-size:.8rem;color:var(--muted);margin:8px 0 18px;}
.s18-markwrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 10px;}
.s18-mark{font-family:inherit;font-size:.95rem;font-weight:600;padding:12px 20px;border-radius:11px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:background .15s;}
.s18-mark:hover{background:var(--accent-press);}
.s18-mark.done{background:transparent;color:var(--accent);}
.s18-back{color:var(--muted);font-size:.9rem;text-decoration:none;}
.s18-priv{font-size:.82rem;color:var(--muted);margin:6px 0 0;display:flex;align-items:center;gap:6px;}