/* ===================================================================
   Nexus Learning Labs — LEARN section  (learn.css)
   Sits on top of nll.css. Adds only what the school needs.
   Open, free, no sign-up. Progress lives in the learner's own browser.
   =================================================================== */

/* ---------- learn hero ---------- */
#lhero{position:relative;z-index:2;padding:126px 24px 40px;text-align:center;}
#lhero img{height:104px;filter:drop-shadow(0 10px 32px rgba(46,125,32,.25));}
#lhero h1{font-size:clamp(26px,4.4vw,46px);font-weight:800;letter-spacing:-.02em;margin-top:14px;color:var(--charcoal);}
#lhero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#lhero p{font-size:14.5px;font-weight:400;color:var(--muted);max-width:640px;margin:14px auto 0;line-height:1.7;}
#lhero .free-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px;}
.free-badge{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dark);
  background:var(--tint2);border:1px solid var(--border);border-radius:100px;padding:7px 15px;}

/* ---------- overall progress bar ---------- */
.prog-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.prog-card{padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.prog-card .pc-text{flex:1;min-width:220px;}
.prog-card .pc-head{font-size:13.5px;font-weight:600;color:var(--charcoal);}
.prog-card .pc-sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6;}
.prog-track{height:10px;border-radius:100px;background:var(--tint2);overflow:hidden;margin-top:12px;
  border:1px solid var(--border-soft);}
.prog-fill{height:100%;width:0;background:var(--grad);border-radius:100px;transition:width .6s cubic-bezier(.2,.8,.2,1);}
.prog-num{font-size:clamp(26px,3.4vw,36px);font-weight:800;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1;}
.prog-num small{font-size:14px;font-weight:600;color:var(--muted);}
.btn-reset{font-family:var(--font);font-size:11px;font-weight:600;color:var(--muted);background:none;
  border:none;cursor:pointer;text-decoration:underline;padding:4px 0;}
.btn-reset:hover{color:var(--dark);}

/* ---------- stage grouping ---------- */
.stage-head{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;flex-wrap:wrap;}
.stage-num{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:var(--grad);border-radius:100px;padding:5px 13px;}
.stage-title{font-size:clamp(19px,2.5vw,26px);font-weight:700;color:var(--deep);letter-spacing:-.015em;}
.stage-sub{font-size:13.5px;color:var(--muted);line-height:1.7;max-width:var(--measure);margin:0 0 24px;}

/* ---------- lesson cards ---------- */
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-bottom:50px;}
.lesson-card{padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;
  position:relative;color:inherit;}
.lesson-card .lc-top{display:flex;align-items:center;gap:10px;}
.lesson-card .lc-n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--mid);
  border:1px solid var(--border);border-radius:100px;padding:3px 10px;letter-spacing:.04em;}
.lesson-card .lc-dot{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:0 0 auto;background:#fff;}
.lesson-card.done .lc-dot{background:var(--grad);border-color:transparent;}
.lesson-card.done .lc-dot::after{content:"✓";}
.lesson-card h3{font-size:16.5px;font-weight:600;color:var(--charcoal);line-height:1.32;}
.lesson-card p{font-size:13px;color:var(--muted);line-height:1.62;flex:1;}
.lesson-card .lc-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;}
.lesson-card .lc-time{font-size:11px;font-weight:500;color:var(--muted);}
.lesson-card .lc-go{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);margin-left:auto;}
.lesson-card.soon{opacity:.62;cursor:default;}
.lesson-card.soon .lc-go{color:var(--muted);}
.lesson-card.soon:hover{transform:none;box-shadow:var(--shadow);}
.lc-badge{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border-radius:100px;padding:4px 10px;}
.lc-badge.live{color:#fff;background:var(--grad);}
.lc-badge.soon{color:var(--muted);background:var(--tint1);border:1px solid var(--border-soft);}

/* ===================================================================
   LESSON PAGE
   =================================================================== */
.lesson-wrap{position:relative;z-index:2;max-width:860px;margin:0 auto;padding:110px 24px 40px;}

.crumb{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:500;color:var(--muted);margin-bottom:16px;flex-wrap:wrap;}
.crumb a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--border);}
.crumb a:hover{border-color:var(--mid);}

.lesson-title{font-size:clamp(25px,4vw,40px);font-weight:800;color:var(--charcoal);letter-spacing:-.02em;line-height:1.15;}
.lesson-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lesson-lede{font-size:15px;color:var(--muted);line-height:1.75;margin-top:14px;}

/* the three-step rhythm: READ · PLAY · CHECK */
.step{margin-top:52px;}
.step-tag{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dark);background:var(--tint2);border:1px solid var(--border);
  border-radius:100px;padding:6px 15px;margin-bottom:16px;}
.step h2{font-size:clamp(19px,2.6vw,27px);font-weight:700;color:var(--deep);letter-spacing:-.015em;line-height:1.22;margin-bottom:14px;}
.step h3{font-size:16px;font-weight:600;color:var(--dark);margin:26px 0 8px;}
.step p{font-size:15px;line-height:1.8;color:var(--slate);margin-bottom:14px;}
.step p.big{font-size:16.5px;color:var(--charcoal);font-weight:500;}
.step ul,.step ol{margin:0 0 16px 20px;}
.step li{font-size:14.5px;line-height:1.75;color:var(--slate);margin-bottom:8px;}
.step li b{color:var(--dark);font-weight:600;}

/* define-before-use: a technical word with its plain meaning attached */
dfn.term{font-style:normal;font-weight:600;color:var(--dark);border-bottom:2px dotted var(--mid);cursor:help;}
.gloss{display:block;background:var(--tint3);border-left:4px solid var(--green);border-radius:0 12px 12px 0;
  padding:13px 18px;margin:0 0 18px;font-size:13.5px;line-height:1.7;color:var(--slate);}
.gloss b{color:var(--dark);font-weight:600;}

/* the plain analogy box */
.analogy{background:var(--tint1);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 24px;margin:22px 0;}
.analogy .an-tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-bottom:8px;}
.analogy p{font-size:14.5px;line-height:1.75;color:var(--slate);margin:0;}

/* a still picture to rest on, before the live sim moves */
figure.fig{background:var(--tint3);border:1px solid var(--border-soft);border-radius:16px;
  padding:22px 20px 14px;max-width:300px;margin:26px auto;text-align:center;}
figure.fig svg{width:100%;height:auto;display:block;margin:0 auto;}
figure.fig figcaption{margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--muted);font-weight:500;}
figure.fig.wide{max-width:460px;}

/* the optional deeper layer — apparatus, collapsed by default */
.deeper{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.6);margin:22px 0;overflow:hidden;}
.deeper summary{cursor:pointer;padding:14px 20px;font-size:13px;font-weight:600;color:var(--dark);
  list-style:none;display:flex;align-items:center;gap:10px;}
.deeper summary::-webkit-details-marker{display:none;}
.deeper summary::before{content:"▸";color:var(--mid);font-size:14px;transition:transform .2s;}
.deeper[open] summary::before{transform:rotate(90deg);}
.deeper summary:hover{background:var(--tint3);}
.deeper .d-body{padding:4px 20px 18px;font-size:13.5px;line-height:1.75;color:var(--slate);}
.deeper .d-body p{font-size:13.5px;margin-bottom:10px;}
.deeper code,code.inline{font-family:var(--mono);font-size:12.5px;background:var(--tint2);color:var(--deep);
  padding:2px 7px;border-radius:6px;}
.eq{font-family:var(--mono);font-size:14px;background:var(--tint3);border:1px solid var(--border-soft);
  border-radius:10px;padding:14px 18px;margin:12px 0;color:var(--deep);overflow-x:auto;}

/* ---------- the simulator panel ---------- */
.sim{margin:8px 0 6px;padding:0;overflow:hidden;}
.sim-canvas-wrap{position:relative;background:#fff;border-bottom:1px solid var(--border-soft);}
.sim canvas{display:block;width:100%;height:340px;touch-action:manipulation;}
@media(max-width:640px){.sim canvas{height:290px;}}
.sim-readout{position:absolute;top:12px;left:14px;display:flex;gap:16px;flex-wrap:wrap;pointer-events:none;}
.ro{background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border:1px solid var(--border);
  border-radius:12px;padding:7px 13px;}
.ro .ro-v{font-size:17px;font-weight:800;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1;}
.ro .ro-l{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.sim-fired{position:absolute;top:14px;right:16px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--grad);border-radius:100px;padding:6px 14px;
  opacity:0;transition:opacity .12s;}
.sim-fired.on{opacity:1;}

.sim-controls{padding:20px 22px;background:rgba(255,255,255,.72);}
.slider-row{display:grid;grid-template-columns:150px 1fr 92px;gap:14px;align-items:center;margin-bottom:15px;}
@media(max-width:620px){.slider-row{grid-template-columns:1fr;gap:6px;}
  .slider-row .sl-val{justify-self:start;}}
.slider-row label{font-size:13px;font-weight:600;color:var(--charcoal);line-height:1.35;}
.slider-row label small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px;}
.slider-row input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:100px;
  background:var(--tint2);outline:none;cursor:pointer;border:1px solid var(--border-soft);}
.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--grad);border:2px solid #fff;box-shadow:0 3px 10px rgba(46,125,32,.4);cursor:pointer;}
.slider-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--mid);
  border:2px solid #fff;box-shadow:0 3px 10px rgba(46,125,32,.4);cursor:pointer;}
.slider-row .sl-val{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--deep);
  background:var(--tint3);border:1px solid var(--border-soft);border-radius:8px;padding:6px 10px;text-align:center;
  font-variant-numeric:tabular-nums;}
.sim-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft);}
.sim-buttons .btn{padding:10px 20px;font-size:12.5px;}

/* ---------- exercises ---------- */
.task{border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.72);
  padding:20px 22px;margin-bottom:16px;transition:border-color .3s,background .3s;}
.task.passed{border-color:var(--mid);background:var(--tint3);}
.task .t-head{display:flex;align-items:flex-start;gap:12px;}
.task .t-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--tint2);color:var(--dark);
  display:grid;place-items:center;font-size:12px;font-weight:700;border:1px solid var(--border);}
.task.passed .t-n{background:var(--grad);color:#fff;border-color:transparent;}
.task.passed .t-n::after{content:"✓";}
.task.passed .t-n span{display:none;}
.task .t-q{font-size:14.5px;font-weight:600;color:var(--charcoal);line-height:1.55;}
.task .t-hint{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:6px;}
.task .t-actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap;padding-left:38px;}
@media(max-width:520px){.task .t-actions{padding-left:0;}}
.task .t-check{font-family:var(--font);font-size:12px;font-weight:600;padding:9px 20px;border-radius:100px;
  border:1px solid var(--border);background:#fff;color:var(--dark);cursor:pointer;transition:.2s;}
.task .t-check:hover{background:var(--tint1);transform:translateY(-1px);}
.task .t-msg{font-size:12.5px;font-weight:500;line-height:1.6;}
.task .t-msg.ok{color:var(--dark);}
.task .t-msg.no{color:var(--amber);}
.task .t-why{margin-top:14px;margin-left:38px;padding:13px 17px;background:var(--tint1);border-left:4px solid var(--green);
  border-radius:0 10px 10px 0;font-size:13px;line-height:1.7;color:var(--slate);display:none;}
.task.passed .t-why{display:block;}
@media(max-width:520px){.task .t-why{margin-left:0;}}

/* ---------- lesson complete + next ---------- */
.finish{margin-top:44px;padding:28px 30px;text-align:center;}
.finish h3{font-size:19px;font-weight:700;color:var(--deep);margin-bottom:8px;}
.finish p{font-size:13.5px;color:var(--muted);line-height:1.7;max-width:56ch;margin:0 auto 18px;}
.finish .f-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.lesson-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px;flex-wrap:wrap;}

/* ---------- storage notice ---------- */
.storage-note{font-size:11.5px;color:var(--muted);line-height:1.7;text-align:center;
  max-width:64ch;margin:26px auto 0;padding:0 24px;}
.storage-note b{color:var(--dark);}
.storage-warn{max-width:var(--maxw);margin:18px auto 0;padding:0 24px;}

@media(prefers-reduced-motion:reduce){
  .prog-fill{transition:none;}
}

/* ===================================================================
   LEARN-ORDER COMPONENTS  (added for Lesson 2 onwards)
   The lesson shape: poke it -> guess -> find out -> name it -> prove it.
   You meet the thing BEFORE anyone explains it to you.
   =================================================================== */

/* the "just poke it" opener — no explanation above it */
.poke-first{background:var(--tint1);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 22px;margin-bottom:18px;}
.poke-first p{font-size:14.5px;line-height:1.7;color:var(--slate);margin:0;}
.poke-first b{color:var(--dark);}

/* ---------- the guess widget (predict, commit, then look) ---------- */
.guess{border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.72);
  padding:22px 24px;margin-bottom:18px;transition:border-color .3s,background .3s;}
.guess.revealed{border-color:var(--mid);background:var(--tint3);}
.guess .g-q{font-size:15.5px;font-weight:600;color:var(--charcoal);line-height:1.55;margin-bottom:6px;}
.guess .g-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:14px;}
.g-opts{display:flex;flex-direction:column;gap:9px;}
.g-opt{font-family:var(--font);font-size:14px;font-weight:500;text-align:left;line-height:1.5;
  padding:13px 18px;border-radius:14px;border:1px solid var(--border);background:#fff;color:var(--charcoal);
  cursor:pointer;transition:.2s;display:flex;align-items:flex-start;gap:12px;}
.g-opt:hover{background:var(--tint1);transform:translateY(-1px);}
.g-opt .g-key{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--tint2);color:var(--dark);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;border:1px solid var(--border);}
.g-opt.chosen{border-color:var(--mid);background:var(--tint2);}
.g-opt.chosen .g-key{background:var(--grad);color:#fff;border-color:transparent;}
.guess.locked .g-opt{cursor:default;}
.guess.locked .g-opt:hover{transform:none;background:#fff;}
.guess.locked .g-opt.chosen:hover{background:var(--tint2);}
.guess.revealed .g-opt.right{border-color:var(--mid);background:var(--tint2);}
.guess.revealed .g-opt.right .g-key::after{content:"✓";}
.guess.revealed .g-opt.right .g-key span{display:none;}
.guess.revealed .g-opt.wrong.chosen{border-color:var(--amber);background:rgba(199,119,0,.07);}

.g-do{display:none;margin-top:16px;padding:14px 18px;background:var(--tint1);border-left:4px solid var(--amber);
  border-radius:0 12px 12px 0;font-size:13.5px;line-height:1.7;color:var(--slate);}
.guess.locked .g-do{display:block;}
.guess.revealed .g-do{display:none;}
.g-do b{color:var(--dark);}
.g-reveal{display:none;margin-top:14px;}
.guess.locked .g-reveal{display:inline-flex;}
.guess.revealed .g-reveal{display:none;}
.g-answer{display:none;margin-top:16px;padding:16px 20px;background:#fff;border:1px solid var(--border);
  border-radius:14px;font-size:14px;line-height:1.75;color:var(--slate);}
.guess.revealed .g-answer{display:block;}
.g-answer .g-verdict{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:8px;display:block;}
.g-answer .g-verdict.ok{color:var(--dark);}
.g-answer .g-verdict.no{color:var(--amber);}
.g-answer b{color:var(--dark);}

/* ---------- name it: the vocabulary table, deliberately LAST ---------- */
.namebox{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:20px 0;}
.namebox .nb-row{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:16px 22px;
  border-bottom:1px solid var(--border-soft);background:rgba(255,255,255,.6);}
.namebox .nb-row:last-child{border-bottom:none;}
.namebox .nb-row:nth-child(odd){background:var(--tint3);}
.namebox .nb-t{font-size:14.5px;font-weight:700;color:var(--deep);line-height:1.4;}
.namebox .nb-t small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:3px;font-style:italic;}
.namebox .nb-d{font-size:14px;line-height:1.7;color:var(--slate);}
@media(max-width:620px){.namebox .nb-row{grid-template-columns:1fr;gap:5px;}}

/* ---------- say it back ---------- */
.sayback{border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.72);
  padding:22px 24px;margin-top:20px;}
.sayback h3{font-size:16.5px;font-weight:700;color:var(--deep);margin-bottom:8px;}
.sayback p{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:14px;}
.sayback textarea{width:100%;min-height:110px;font-family:var(--font);font-size:14.5px;line-height:1.7;
  color:var(--charcoal);padding:14px 17px;border:1px solid var(--border);border-radius:14px;
  background:#fff;outline:none;resize:vertical;}
.sayback textarea:focus{border-color:var(--mid);box-shadow:0 0 0 3px rgba(109,191,74,.15);}
.sayback .sb-foot{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.sayback .sb-msg{font-size:12.5px;color:var(--muted);}

/* two-cell simulator needs a taller canvas */
.sim.tall canvas{height:430px;}
@media(max-width:640px){.sim.tall canvas{height:380px;}}

/* ===================================================================
   "BEFORE YOU START" — the knowledge check that comes FIRST.
   Never blocks. Its only job is to tell a learner where they stand
   and point them somewhere kind if they are not ready yet.
   =================================================================== */
.ready{border:1px solid var(--border);border-left:5px solid var(--green);border-radius:0 var(--radius) var(--radius) 0;
  background:var(--tint3);padding:20px 24px;margin:26px 0 0;}
.ready .rd-tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid);margin-bottom:9px;}
.ready p{font-size:14px;line-height:1.7;color:var(--slate);margin:0 0 10px;}
.ready p:last-child{margin-bottom:0;}
.ready b{color:var(--dark);}
.ready a{color:var(--link);font-weight:600;text-decoration:none;border-bottom:1px solid var(--border);}
.ready a:hover{border-color:var(--mid);}
.rd-checks{margin-top:14px;display:flex;flex-direction:column;gap:12px;}
.rd-c{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 18px;}
.rd-c .rd-q{font-size:14px;font-weight:600;color:var(--charcoal);line-height:1.55;margin-bottom:10px;}
.rd-opts{display:flex;gap:9px;flex-wrap:wrap;}
.rd-opt{font-family:var(--font);font-size:13px;font-weight:500;padding:9px 18px;border-radius:100px;
  border:1px solid var(--border);background:#fff;color:var(--charcoal);cursor:pointer;transition:.2s;}
.rd-opt:hover{background:var(--tint1);transform:translateY(-1px);}
.rd-c.answered .rd-opt{cursor:default;}
.rd-c.answered .rd-opt:hover{transform:none;background:#fff;}
.rd-c.answered .rd-opt.right{background:var(--grad);color:#fff;border-color:transparent;}
.rd-c.answered .rd-opt.picked.wrong{border-color:var(--amber);background:rgba(199,119,0,.08);}
.rd-fb{display:none;margin-top:11px;font-size:13px;line-height:1.7;color:var(--slate);}
.rd-c.answered .rd-fb{display:block;}
.rd-fb b{color:var(--dark);}

/* ===================================================================
   MODE PICK — "walk me through it" vs "let me try it myself".
   Same words, same tasks, same everything in every lesson either way —
   this only changes how much Maya says and how soon. See maya-learn.js.
   =================================================================== */
.mode-pick{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 0;}
.mode-pick[hidden]{display:none;}
.mode-opt{flex:1 1 240px;text-align:left;font-family:var(--font);cursor:pointer;
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;transition:.18s;}
.mode-opt:hover{border-color:var(--mid);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.mode-opt .mo-t{font-size:14.5px;font-weight:700;color:var(--dark);margin-bottom:4px;}
.mode-opt .mo-d{font-size:12.5px;line-height:1.55;color:var(--muted);}
.mode-opt.picked{border-color:var(--mid);background:var(--tint1);}

.mode-pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  color:var(--muted);background:var(--tint3);border:1px solid var(--border-soft);
  border-radius:100px;padding:6px 8px 6px 14px;margin:14px 0 0;}
.mode-pill[hidden]{display:none;}
.mode-pill b{color:var(--dark);font-weight:700;}
.mode-pill button{font-family:var(--font);font-size:11px;font-weight:600;color:var(--link);
  background:#fff;border:1px solid var(--border);border-radius:100px;padding:5px 12px;cursor:pointer;}
.mode-pill button:hover{background:var(--tint1);}

.guided-tip{display:none;align-items:flex-start;gap:9px;margin-top:12px;padding:11px 15px;
  background:var(--tint1);border:1px dashed var(--mid);border-radius:12px;
  font-size:12.5px;line-height:1.6;color:var(--dark);}
.guided-tip.show{display:flex;}
.guided-tip .gt-x{margin-left:auto;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:15px;line-height:1;padding:0 2px;}

/* ===================================================================
   "WHY THIS EXISTS" MODAL — one copy, injected by learn.js
   =================================================================== */
.why-veil{position:fixed;inset:0;z-index:120;background:rgba(33,92,23,.34);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;
  animation:whyIn .22s ease-out;}
.why-veil[hidden]{display:none;}
@keyframes whyIn{from{opacity:0}to{opacity:1}}
.why-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:22px;
  box-shadow:var(--shadow-hi);max-width:640px;width:100%;padding:38px 40px 32px;margin:auto;}
@media(max-width:560px){.why-card{padding:32px 24px 26px;}}
.why-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;transition:.2s;}
.why-x:hover{background:var(--tint1);color:var(--dark);}
.why-card h2{font-size:clamp(21px,3vw,28px);font-weight:800;color:var(--deep);letter-spacing:-.018em;
  margin-bottom:14px;padding-right:40px;}
.why-card h3{font-size:15px;font-weight:700;color:var(--dark);margin:24px 0 8px;line-height:1.4;}
.why-card p{font-size:14.5px;line-height:1.8;color:var(--slate);margin-bottom:12px;}
.why-card .why-lead{font-size:15.5px;color:var(--charcoal);}
.why-card .why-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--border-soft);
  font-size:12.5px;line-height:1.8;color:var(--muted);}
.why-card .why-foot b{color:var(--dark);}
.why-card a{color:var(--link);font-weight:600;text-decoration:none;border-bottom:1px solid var(--border);}
.why-card a:hover{border-color:var(--mid);}

/* the trigger link, used in the hero and the page foot */
.why-link{background:none;border:none;font-family:var(--font);font-size:12.5px;font-weight:600;
  color:var(--link);cursor:pointer;text-decoration:none;border-bottom:1px solid var(--border);padding:0;}
.why-link:hover{border-color:var(--mid);}

@media(prefers-reduced-motion:reduce){.why-veil{animation:none;}}

/* readiness feedback: show ONLY the branch that matches the answer.
   Specificity matters here — `.rd-c.answered .rd-fb{display:block}` above
   would otherwise reveal both branches at once. */
.rd-c .rd-fb.rd-ok,.rd-c .rd-fb.rd-no{display:none;}
.rd-c.answered.ok .rd-fb.rd-ok{display:block;}
.rd-c.answered.no .rd-fb.rd-no{display:block;border-left:3px solid var(--amber);padding-left:12px;}

/* ===================================================================
   MAYA — lesson guide
   A companion, not a narrator. Sits out of the way, speaks when
   spoken to, and can be dismissed for good.
   =================================================================== */
#maya-guide{position:fixed;right:20px;bottom:20px;z-index:96;display:flex;flex-direction:column;
  align-items:flex-end;gap:7px;max-width:min(330px,calc(100vw - 34px));pointer-events:none;}
#maya-guide[hidden]{display:none;}
#maya-guide > *{pointer-events:auto;}

.mg-bubble{position:relative;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:18px 18px 6px 18px;box-shadow:var(--shadow-hi);
  padding:16px 18px 14px;animation:mgPop .22s cubic-bezier(.2,.9,.3,1.2);}
.mg-bubble[hidden]{display:none;}
@keyframes mgPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.mg-text{font-size:13.5px;line-height:1.65;color:var(--slate);margin:0;padding-right:16px;}
.mg-close{position:absolute;top:7px;right:9px;background:none;border:none;color:var(--muted);
  font-size:17px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px;}
.mg-close:hover{color:var(--dark);background:var(--tint1);}
.mg-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
.mg-actions:empty{display:none;}
.mg-act{font-family:var(--font);font-size:11.5px;font-weight:600;color:var(--dark);background:#fff;
  border:1px solid var(--border);border-radius:100px;padding:6px 14px;cursor:pointer;transition:.2s;}
.mg-act:hover{background:var(--tint2);transform:translateY(-1px);}

.mg-row{display:flex;align-items:center;gap:8px;}
.mg-portrait{width:76px;height:76px;border-radius:50%;border:2px solid #fff;background:var(--grad);
  padding:0;overflow:hidden;cursor:pointer;box-shadow:0 10px 28px rgba(46,125,32,.36);transition:transform .25s;}
.mg-portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.mg-portrait:hover{transform:scale(1.07);}

.mg-hide{font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.85);border:1px solid var(--border-soft);border-radius:100px;
  padding:3px 10px;cursor:pointer;transition:.2s;}
.mg-hide:hover{color:var(--dark);background:#fff;}

#maya-peek{position:fixed;right:20px;bottom:20px;z-index:96;width:42px;height:42px;border-radius:50%;
  border:2px solid #fff;background:var(--grad);padding:0;overflow:hidden;cursor:pointer;opacity:.62;
  box-shadow:var(--shadow-sm);transition:opacity .25s,transform .25s;}
#maya-peek[hidden]{display:none;}
#maya-peek img{width:100%;height:100%;object-fit:cover;display:block;}
#maya-peek:hover{opacity:1;transform:scale(1.1);}

@media(max-width:640px){
  #maya-guide{right:12px;bottom:12px;max-width:calc(100vw - 24px);}
  .mg-portrait{width:58px;height:58px;}
  .mg-text{font-size:13px;}
  .mg-bubble{padding:14px 16px 12px;}
}
@media(prefers-reduced-motion:reduce){.mg-bubble{animation:none;}}

/* ---------- tabs inside the About panel ---------- */
.why-tabs{display:flex;gap:8px;margin:4px 0 22px;border-bottom:1px solid var(--border-soft);padding-bottom:0;}
.why-tab{font-family:var(--font);font-size:13px;font-weight:600;color:var(--muted);background:none;
  border:none;border-bottom:2px solid transparent;padding:9px 4px;margin-right:14px;cursor:pointer;
  transition:color .2s,border-color .2s;}
.why-tab:hover{color:var(--dark);}
.why-tab.on{color:var(--deep);border-bottom-color:var(--green);}
.why-pane[hidden]{display:none;}
.why-pane:focus{outline:none;}
.why-pane h3:first-of-type{margin-top:20px;}

/* the CSR banner on the learn home */
.csr{max-width:var(--maxw);margin:26px auto 0;padding:0 24px;position:relative;z-index:2;}
.csr-inner{display:flex;align-items:center;gap:22px;background:var(--tint1);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 26px;flex-wrap:wrap;}
.csr-inner .csr-text{flex:1;min-width:240px;}
.csr-inner .csr-text b{color:var(--dark);}
.csr-inner p{font-size:13.5px;line-height:1.7;color:var(--slate);margin:0;}
.csr-inner .btn{white-space:nowrap;padding:11px 22px;font-size:12.5px;}
@media(max-width:620px){.csr-inner{flex-direction:column;align-items:flex-start;}}

/* ---------- on/off toggles for network inputs ---------- */
.net-toggles{display:flex;gap:10px;flex-wrap:wrap;}
.net-tog{font-family:var(--font);font-size:13px;font-weight:600;padding:11px 22px;border-radius:100px;
  border:1px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:.2s;
  display:inline-flex;align-items:center;gap:9px;}
.net-tog::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--border);transition:.2s;}
.net-tog:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.net-tog.on{background:var(--tint2);color:var(--deep);border-color:var(--mid);}
.net-tog.on::before{background:var(--green);box-shadow:0 0 0 3px rgba(109,191,74,.25);}