/* ─────────────────────────────────────────────────────────────
   /lessons/ — shared stylesheet.

   SECOND SANCTIONED EXCEPTION to the repo's single-file rule, for the same
   reason /blog/ has one: this is a GROWING SET OF HOMOGENEOUS PAGES, so inline
   CSS would make "change the body size across the lessons" an N-file edit where
   N only goes up. /challenge/ stays inline because it is one bespoke page.

   The palette is copied from index.html's :root. It is a SIBLING of that block,
   not a source of truth — a brand change has to be made in both, and in
   blog.css too.
   ───────────────────────────────────────────────────────────── */
:root{
  --space:#FFFFFF; --cosmos:#F6F7FB; --aurora:#4338CA; --aurora-lt:#3730A3;
  --nebula:#0D9488; --star:#B45309; --comet:#BE185D; --quasar:#7E22CE;
  --white:#14172B; --pale:#383C57; --muted:#666E8C; --border:#E3E6F0; --border-lt:#CFD3E2;
  --safe-top:env(safe-area-inset-top,0px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--space);color:var(--pale);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
h1,h2,h3{font-family:'Poppins',sans-serif;color:var(--white);letter-spacing:-0.4px;line-height:1.15;}
strong{color:var(--white);font-weight:700;}

/* ── chrome ─────────────────────────────────────────────── */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;padding-top:calc(12px + var(--safe-top));border-bottom:1px solid var(--border);}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.wm{font-family:'Poppins',sans-serif;font-weight:800;font-size:17px;color:var(--white);letter-spacing:-0.3px;}
.wm .t{background:linear-gradient(90deg,#3B82F6,#14B8A6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wm .ai{color:var(--muted);font-weight:600;font-size:14px;}

/* Wisesoft's tagline rides with the wordmark on every page that shows it.
   Stacked, so it costs no horizontal room in the bar. */
.lock{display:flex;flex-direction:column;gap:1px;}
.wm-tag{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;
  color:var(--muted);line-height:1.1;white-space:nowrap;}
.bar a.skip{font-size:13px;color:var(--muted);text-decoration:none;font-weight:600;}
.bar a.skip:hover{color:var(--aurora-lt);}
.wrap{max-width:640px;margin:0 auto;padding:28px 18px 70px;}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--aurora-lt);}

.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--quasar);margin-bottom:10px;}
h1{font-size:clamp(27px,6vw,36px);font-weight:900;margin-bottom:12px;text-wrap:balance;}
h1 em{font-style:normal;color:var(--aurora);}
.standfirst{font-size:17px;color:var(--muted);margin-bottom:8px;}
.meta{font-size:12.5px;color:var(--muted);margin-bottom:26px;}

/* ── age toggle ─────────────────────────────────────────── */
.ages{display:flex;justify-content:center;gap:8px;margin:0 0 8px;}
.ages button{font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;padding:9px 18px;
  border-radius:20px;border:1.5px solid var(--border-lt);background:transparent;color:var(--muted);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.ages button.on{background:var(--aurora);border-color:var(--aurora);color:#fff;}
.ages-note{text-align:center;font-size:12.5px;color:var(--muted);margin-bottom:20px;}

/* ── the scenario ───────────────────────────────────────── */
.band[hidden]{display:none;}
.card{background:var(--cosmos);border:1px solid var(--border);border-radius:18px;
  padding:20px 18px;margin-bottom:18px;}
.who{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;}
.said{background:var(--space);border:1px solid var(--border);border-left:3px solid var(--aurora);
  border-radius:0 12px 12px 0;padding:12px 15px;margin-bottom:16px;font-size:15.5px;color:var(--white);}
.ai-said{background:var(--space);border:1px solid var(--border);border-left:3px solid var(--nebula);
  border-radius:0 12px 12px 0;padding:12px 15px;font-size:15.5px;color:var(--white);}
.ask{font-family:'Poppins',sans-serif;font-weight:800;font-size:17px;color:var(--white);
  margin:20px 0 12px;text-align:center;}
.opts{display:flex;flex-direction:column;gap:9px;}
.opt{background:var(--space);border:1.5px solid var(--border-lt);border-radius:13px;
  padding:13px 15px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--pale);
  text-align:left;cursor:pointer;transition:border-color .15s,background .15s;}
.opt:hover:not(:disabled){border-color:var(--aurora);}
.opt:disabled{cursor:default;}
.opt.picked{border-color:var(--aurora);background:rgba(67,56,202,.06);}
.opt.dim{opacity:.5;}

/* ── the reveal ─────────────────────────────────────────── */
.reveal{margin-top:18px;padding:16px 17px;border-radius:14px;
  background:rgba(180,83,9,.06);border:1px solid rgba(180,83,9,.28);}
.reveal .rt{font-family:'Poppins',sans-serif;font-weight:800;font-size:15px;color:var(--star);margin-bottom:7px;}
.reveal p{font-size:15px;color:var(--pale);}
.reveal p + p{margin-top:9px;}
.takeaway{margin-top:16px;padding:16px 17px;border-radius:14px;
  background:rgba(13,148,136,.07);border:1px solid rgba(13,148,136,.3);}
.takeaway .rt{font-family:'Poppins',sans-serif;font-weight:800;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--nebula);margin-bottom:6px;}
.takeaway p{font-size:16px;color:var(--white);font-weight:600;}
.src{font-size:12.5px;color:var(--muted);margin-top:14px;}
.src strong{font-weight:700;}

/* ── the question that ties it together ─────────────────── */
.keyq{margin:30px 0 0;padding:22px 20px;border-radius:18px;text-align:center;
  background:linear-gradient(140deg,rgba(67,56,202,.09),rgba(13,148,136,.06));
  border:1px solid rgba(67,56,202,.25);}
.keyq .small{font-size:14px;color:var(--muted);margin-bottom:8px;}
.keyq .big{font-family:'Poppins',sans-serif;font-weight:900;font-size:clamp(20px,4.6vw,26px);
  color:var(--white);line-height:1.25;text-wrap:balance;}
.keyq .big em{font-style:normal;color:var(--aurora);}

/* ── CTAs and next ──────────────────────────────────────── */
.btn{display:inline-block;background:var(--aurora);color:#fff;border:none;text-decoration:none;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;padding:14px 24px;
  border-radius:26px;cursor:pointer;transition:background .15s;}
.btn:hover{background:var(--aurora-lt);}
.btn-wide{display:block;width:100%;text-align:center;}
.endcta{margin-top:28px;padding:24px 20px;text-align:center;border-radius:18px;
  background:var(--cosmos);border:1px solid var(--border);}
.endcta h2{font-size:20px;margin-bottom:8px;}
.endcta p{font-size:15px;color:var(--muted);margin-bottom:16px;}
.nextup{margin-top:22px;}
.nextup h3{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;}
.nextup a{display:block;text-decoration:none;color:inherit;background:var(--space);
  border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:9px;
  transition:border-color .2s;}
.nextup a:hover{border-color:var(--aurora);}
.nextup .nt{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--white);}
.nextup .nd{font-size:13.5px;color:var(--muted);margin-top:2px;}

/* ── the hub ────────────────────────────────────────────── */
.lessonlist{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:24px;}
.lcard{display:block;text-decoration:none;color:inherit;background:var(--cosmos);
  border:1px solid var(--border);border-radius:16px;padding:20px 22px;transition:border-color .2s;}
.lcard:hover{border-color:var(--aurora);}
.lcard .n{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--quasar);text-transform:uppercase;}
.lcard h2{font-size:19px;margin:6px 0 7px;}
.lcard p{font-size:14.5px;color:var(--muted);}
.lcard .when{font-size:12.5px;color:var(--muted);margin-top:10px;}

/* ── footer ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--border);background:var(--cosmos);padding:22px 20px;
  text-align:center;font-size:12.5px;color:var(--muted);}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 15px;justify-content:center;margin-bottom:10px;}
.foot a{color:var(--muted);text-decoration:none;}
.foot a:hover{color:var(--aurora-lt);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}