/* ============================================================================
   learn.css — the shared design system for Habit Badger /learn/ pages.
   ONE source of truth for the chrome every guide shares: nav, hero, kickers,
   callouts, the A·B·C band, Try-this steps, chat bubbles, FAQ, cross-links,
   CTA, sources, and the badge stamp. Page-unique widgets (timers, infographics,
   the age grid, plinko, fade strips) stay in each page's small inline <style>.

   Canonical decisions (see docs/marketing/playbooks/_learn-design.md):
   - A·B·C band = .abc (rich: pill tag + icon + "where the app fits" footer +
     arrow connectors). A = calm/blue, B = neutral, C = coin/gold.
   - Try-this A/B/C marker = inline .chip.chip-{calm|neutral|coin} with the letter.
   - Per-page badge tier colours (.st-*) + page-unique widgets stay inline.
   ============================================================================ */

:root{
  --ink:#141318; --ink-soft:#4B4A55; --ink-muted:#87858F;
  --line:rgba(20,19,24,0.08); --line-strong:rgba(20,19,24,0.14);
  --bg:#F6F4EE; --surface:#FFFFFF; --surface2:#FBF9F4;
  --surface-alpha:rgba(20,19,24,0.05);
  --coin:#FED348; --coin-dk:#957700; --coin-soft:#FEF1CC;
  --calm:#38B2E8; --calm-dk:#006D9B; --calm-soft:#E2F5FF;
  --grow:#30C12F; --grow-dk:#1E771D; --grow-soft:#E0F6DD;
  --epic:#C64DBD; --epic-dk:#7F0F79; --epic-soft:#FFE5FB;
  --warn:#F0A03C; --warn-dk:#8A5312; --warn-soft:#FBE9CF;
  --stop:#D9584C; --stop-dk:#A23A30; --stop-soft:#FBE7E4;
  --read:640px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.serif{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 1}

/* Reading progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--coin),var(--coin-dk))}

/* Nav */
nav.top{position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--bg), transparent 8%);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:0.5px solid var(--line)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;height:64px;
  max-width:1180px;margin:0 auto;padding:0 24px}
.wordmark{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:21px;letter-spacing:-0.4px;
  font-variation-settings:'SOFT' 100,'WONK' 1;display:inline-flex;align-items:baseline;color:var(--ink)}
.wordmark .brandmark{display:block;object-fit:contain;flex-shrink:0}
.wordmark .dot{position:relative;display:inline-block}
.wordmark .dot::after{content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:8px;height:8px;border-radius:5px;background:var(--coin);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 0.5px rgba(0,0,0,0.08)}
nav.top .links{display:flex;gap:26px;align-items:center}
nav.top .links a{font-size:14px;font-weight:500;color:var(--ink-soft);padding:6px 2px;letter-spacing:-0.1px}
nav.top .links a:hover{color:var(--ink)}
nav.top .cta-row{display:flex;align-items:center;gap:10px}
.btn-primary .arrow{font-size:17px;line-height:1}
.nav-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  padding:0;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-size:17px;line-height:1;font-family:inherit;transition:background .15s ease}
.nav-burger:hover{background:var(--surface2)}
@media (max-width:840px){
  .nav-burger{display:inline-flex}
  nav.top .links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;
    background:color-mix(in oklab, var(--bg), transparent 2%);
    backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:0.5px solid var(--line);box-shadow:0 24px 40px rgba(20,19,24,0.10);padding:8px 0;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease}
  nav.top.open .links{visibility:visible;opacity:1;transform:translateY(0)}
  nav.top .links a{padding:14px 24px;font-size:16px}
  nav.top .links a:hover{background:var(--surface-alpha)}
}
@media (max-width:400px){ nav.top .cta-row .btn-primary .arrow{display:none} }

.btn-primary{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:13px 20px;border-radius:14px;border:none;background:var(--ink);color:#fff;font-weight:700;
  font-size:15px;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,0.18);
  transition:transform .18s ease, box-shadow .18s ease;font-family:inherit;letter-spacing:-0.1px}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(0,0,0,0.22)}

/* Chips (also used inline as the Try-this A/B/C marker) */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:0.1px}
.chip-calm{background:var(--calm-soft);color:var(--calm-dk)}
.chip-coin{background:var(--coin-soft);color:var(--coin-dk)}
.chip-grow{background:var(--grow-soft);color:var(--grow-dk)}
.chip-epic{background:var(--epic-soft);color:var(--epic-dk)}
.chip-neutral{background:var(--surface-alpha);color:var(--ink-soft)}

/* Badge stamp (shield) — base; per-page sets the tier colours via .st-* */
.stamp{--s:64px;width:var(--s);height:calc(var(--s) * 1.10);flex-shrink:0;position:relative;display:inline-block;
  overflow:visible;border:none;background:none;vertical-align:middle;
  filter:drop-shadow(0 1px 2px rgba(20,19,24,0.10)) drop-shadow(0 5px 12px rgba(20,19,24,0.12))}
.stamp .shield-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.stamp .glyph{position:absolute;left:0;right:0;top:33.6%;height:60.9%;display:grid;place-items:center;
  color:var(--st-dark);line-height:1;font-size:calc(var(--s) * 0.34);transform:translateY(calc(var(--s) * -0.0625))}
.stamp .lvl{position:absolute;left:0;right:0;top:4.55%;height:29.1%;display:grid;place-items:center;color:#fff;
  font-family:'Fraunces',serif;font-weight:700;line-height:1;font-size:calc(var(--s) * 0.155);letter-spacing:0.4px;
  text-shadow:0 1px 1.5px rgba(0,0,0,0.28);transform:translateY(calc(var(--s) * 0.03125))}
/* BadgerCoin token (used as the C-card marker in the A·B·C band) */
.badgercoin{position:relative;display:inline-flex;flex-shrink:0;border-radius:50%;vertical-align:middle;
  background:radial-gradient(circle at 35% 30%, #F5C25B 0%, #D99A2B 55%, #8A5A14 100%);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.45)}
.badgercoin > img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;padding:6%;
  filter:sepia(0.95) saturate(2.7) hue-rotate(-6deg) brightness(0.98) drop-shadow(0 1px 1px rgba(0,0,0,0.18))}

/* Article scaffold */
.article{max-width:var(--read);margin:0 auto;padding:0 24px}
.article p{color:var(--ink-soft);text-wrap:pretty}
.article strong{color:var(--ink);font-weight:700}
h1.title{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 1;
  font-weight:600;font-size:clamp(34px,6vw,54px);line-height:1.05;letter-spacing:-0.5px;margin:14px 0 0}
h2{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 1;font-weight:600;
  font-size:clamp(24px,4vw,32px);line-height:1.15;letter-spacing:-0.3px;margin:8px 0 0}
.kicker{font-size:12px;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;color:var(--calm-dk);
  margin-bottom:6px;display:flex;align-items:center;gap:8px}
section.blk{margin:56px auto}
section.blk > p{margin:16px 0}

/* Hero */
.hero{max-width:760px;margin:0 auto;padding:44px 24px 8px;text-align:left}
.deck{font-size:20px;line-height:1.5;color:var(--ink-soft);margin:22px 0 0;max-width:620px;text-wrap:pretty}
.deck b{color:var(--ink)}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.jump a{font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--line);padding:7px 13px;border-radius:999px}
.jump a:hover{color:var(--ink);border-color:var(--line-strong);background:var(--surface2)}

/* Pull quote */
.pull{margin:44px auto;max-width:720px;padding:0 24px;text-align:center}
.pull q{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 100,'WONK' 1;font-weight:500;
  font-size:clamp(24px,4.4vw,34px);line-height:1.28;color:var(--ink);quotes:none;letter-spacing:-0.3px}
.pull q::before,.pull q::after{content:""}

/* Callout */
.callout{margin:28px 0;padding:20px 22px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--calm-dk);box-shadow:0 6px 20px rgba(20,19,24,0.04)}
.callout.accent-coin{border-left-color:var(--coin-dk)}
.callout.accent-stop{border-left-color:var(--stop)}
.callout.accent-warn{border-left-color:var(--warn-dk)}
.callout .lbl{font-size:12px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--calm-dk);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.callout.accent-coin .lbl{color:var(--coin-dk)}
.callout.accent-stop .lbl{color:var(--stop-dk)}
.callout.accent-warn .lbl{color:var(--warn-dk)}
.callout p{margin:0;font-size:16px}

/* Feature band (full-bleed tinted) */
.band{background:var(--surface2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:56px 0;margin:56px 0}
.band .inner{max-width:960px;margin:0 auto;padding:0 24px}
.band-head{max-width:var(--read);margin:0 auto 34px;text-align:center;padding:0 24px}
.band-head p{color:var(--ink-soft);margin-top:12px}

/* ── The canonical A·B·C band ─────────────────────────────────────────────
   3 cards + arrow connectors. Each card: .tag pill · .ic icon · h4 · p ·
   .role footer ("where Habit Badger fits"). A = calm, B = neutral, C = coin. */
.abc{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:stretch;max-width:900px;margin:0 auto}
.abc .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 20px;
  box-shadow:0 8px 26px rgba(20,19,24,0.05);display:flex;flex-direction:column;gap:8px}
.abc .arrow{display:grid;place-items:center;color:var(--ink-muted);font-size:20px;padding:0 8px}
.abc .tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:0.6px;padding:4px 10px;
  border-radius:999px;text-transform:uppercase}
.abc .A .tag{background:var(--calm-soft);color:var(--calm-dk)}
.abc .B .tag{background:var(--surface-alpha);color:var(--ink-soft)}
.abc .C .tag{background:var(--coin-soft);color:var(--coin-dk)}
.abc .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.abc .A .ic{background:var(--calm-soft);color:var(--calm-dk)}
.abc .B .ic{background:var(--surface-alpha);color:var(--ink)}
.abc .C .ic{background:var(--coin-soft);color:var(--coin-dk)}
.abc h4{margin:2px 0 0;font-size:16px;font-weight:800;color:var(--ink)}
.abc p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.abc .role{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;font-weight:800;letter-spacing:0.4px;display:flex;align-items:center;gap:7px}
.abc .A .role{color:var(--calm-dk)}
.abc .B .role{color:var(--ink-muted)}
.abc .C .role{color:var(--coin-dk)}
@media(max-width:720px){
  .abc{grid-template-columns:1fr;gap:12px}
  .abc .arrow{transform:rotate(90deg);padding:2px}
}

/* ── Generic card grid (.jobsplit) — for non-ABC groupings: factor lists,
   comparisons. Pages override grid-template-columns / per-card colours inline.
   (Phase 2 will split this into named kit shapes: .compare, .grid.) */
.jobsplit{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;max-width:820px;margin:0 auto}
.jobsplit .job{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 20px;
  box-shadow:0 8px 26px rgba(20,19,24,0.05)}
.jobsplit .job .role{font-size:11.5px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;margin-bottom:4px}
.jobsplit .job.you{border-top:3px solid var(--calm-dk)} .jobsplit .job.you .role{color:var(--calm-dk)}
.jobsplit .job.kid{border-top:3px solid var(--grow-dk)} .jobsplit .job.kid .role{color:var(--grow-dk)}
.jobsplit .job.coin{border-top:3px solid var(--coin-dk)} .jobsplit .job.coin .role{color:var(--coin-dk)}
.jobsplit .job h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:20px;margin:0 0 14px;color:var(--ink)}
.jobsplit .job p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.jobsplit .job p b{color:var(--ink)}
@media(max-width:720px){.jobsplit{grid-template-columns:1fr}}

/* ── Step ladder (kit) — "small brave steps up to a goal rung". Rung accent
   defaults to epic/pink; a page recolours by setting --rung-base/-dk/-soft on
   .step-ladder. Used by scared-of-the-dark + the-bravery-ladder. Distinct from the
   single-use consequence-ladder (taking-things-away) and tier-ladder
   (who-theyre-becoming), which stay page-unique under their own .ladder. */
.step-ladder{max-width:540px;margin:6px auto 0;display:flex;flex-direction:column;gap:9px;
  --rung-base:var(--epic);--rung-dk:var(--epic-dk);--rung-soft:var(--epic-soft)}
.step-ladder .cap{text-align:center;font-size:11px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--ink-muted);
  display:flex;align-items:center;justify-content:center;gap:8px}
.step-ladder .rung{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:12px 15px;box-shadow:0 5px 16px rgba(20,19,24,0.04)}
.step-ladder .rung .n{width:28px;height:28px;border-radius:8px;background:var(--rung-soft);color:var(--rung-dk);font-weight:800;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.step-ladder .rung .t{flex:1;font-size:14.5px;color:var(--ink-soft)} .step-ladder .rung .t b{color:var(--ink)}
.step-ladder .rung .badgercoin{width:24px;height:24px}
.step-ladder .rung.goal{background:var(--rung-soft);border-color:var(--rung-base)} .step-ladder .rung.goal .t,.step-ladder .rung.goal .t b{color:var(--rung-dk)}
.step-ladder .rung.goal .n{background:var(--rung-dk);color:#fff}
.step-ladder .rung.start{border-left:4px solid var(--grow-dk)}

/* ── Fade strip (kit) — coins fading into an identity stamp ("coins → who they
   are"). Coins are .badgercoin; the identity end is a .stamp. The page sets the
   .cap colour (its tier) inline or page-unique. Used by handling-meltdowns +
   sibling-fights. */
.fade-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;margin:24px auto;max-width:640px}
.fade-coins{display:flex;align-items:center;gap:8px}
.fade-arrow{color:var(--ink-muted);font-size:18px}
.fade-id{display:flex;flex-direction:column;align-items:center;gap:8px}
.fade-id .cap{font-size:12.5px;font-weight:800}

/* Numbered steps (Try-this) — A/B/C marker = inline .chip.chip-{calm|neutral|coin} */
.steps{list-style:none;padding:0;margin:22px 0;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px}
.steps .n{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font-weight:800;
  font-size:14px;display:grid;place-items:center;flex-shrink:0}
.steps .bd{font-size:15.5px}
.steps .bd b{color:var(--ink)}

/* Do / don't list */
.dodont{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:12px}
.dodont li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-soft)}
.dodont .ic{flex-shrink:0;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:11px;color:#fff;margin-top:1px}
.dodont .no .ic{background:var(--stop)} .dodont .yes .ic{background:var(--grow-dk)}
.dodont b{color:var(--ink)}

/* Setup-chat phase labels + chat bubbles */
.phase{display:flex;align-items:center;gap:10px;margin:26px 0 2px;font-weight:800;color:var(--ink);font-size:15px}
.phase-n{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:800;
  display:grid;place-items:center;flex-shrink:0}
.phase.calm{color:var(--calm-dk)} .phase.calm .phase-n{background:var(--calm-dk)}
.chat{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.chat > div{display:flex;flex-direction:column;max-width:100%}
.chat > div:has(> .bubble.parent){align-items:flex-end}
.chat > div:has(> .bubble.kid){align-items:flex-start}
.bubble{max-width:80%;padding:13px 16px;border-radius:18px;font-size:15px;line-height:1.45}
.bubble.parent{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.bubble.kid{align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);border-bottom-left-radius:6px}
.who{font-size:11px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:var(--ink-muted);margin:0 4px 3px}
.who.p{text-align:right}

/* FAQ */
.faq{max-width:var(--read);margin:0 auto}
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:10px 0;overflow:hidden}
details[open]{border-color:var(--line-strong)}
summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:700;font-size:16px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary .pl{color:var(--ink-muted);transition:transform .2s ease;flex-shrink:0}
details[open] summary .pl{transform:rotate(45deg)}
details .ans{padding:0 20px 18px;color:var(--ink-soft);font-size:15.5px;line-height:1.55}

/* Guides cross-links */
.guides{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.guides a{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-weight:700;color:var(--ink)}
.guides a:hover{border-color:var(--line-strong);background:var(--surface2)}

/* CTA card — per-page may tint .card::before via an inline override */
.cta{max-width:820px;margin:64px auto;padding:0 24px}
.cta .card{background:linear-gradient(160deg,#1c1b22,#141318);color:#fff;border-radius:24px;
  padding:40px 34px;text-align:center;box-shadow:0 24px 60px rgba(20,19,24,0.28);position:relative;overflow:hidden}
.cta .card::before{content:"";position:absolute;top:-40px;right:-30px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(254,211,72,0.30),transparent 70%)}
.cta h2{color:#fff;position:relative}
.cta p{color:rgba(255,255,255,0.72);max-width:460px;margin:12px auto 26px;position:relative}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
.cta .btn-primary{background:#fff;color:var(--ink)}
.cta .btn-line{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:14px;
  border:1px solid rgba(255,255,255,0.28);color:#fff;font-weight:700;font-size:15px}

/* Sources */
.sources{max-width:var(--read);margin:48px auto;padding:24px;background:var(--surface2);
  border:1px solid var(--line);border-radius:16px;font-size:13.5px;color:var(--ink-muted);line-height:1.6}
.sources h3{font-size:12px;letter-spacing:0.6px;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.sources ol{margin:0;padding-left:18px}
.sources li{margin:6px 0}
.sources a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.sources .disc{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-style:italic}

footer.foot{border-top:1px solid var(--line);padding:32px 24px;text-align:center;color:var(--ink-muted);font-size:13px}