/* ==========================================================================
   PM Countdown: lesson.css (Group C: Learn and Trust, v10)
   Load after site.css on learn/*.html, responsible-gambling.html and about.html.
   Sections: 1 lesson hero meta, 2 lesson layout + side rail, 3 key idea,
   4 worked example (receipt), 5 tools, 6 quiz, 7 next-lesson + sources,
   8 hub: path, streak, planner ladder, glossary, 9 small helpers.
   Prefixes: lx- lesson layout, tool-/o- calculators, q-/opt quiz,
   path-/stk- hub, gl- glossary.
   ========================================================================== */

/* 1. Lesson hero meta ------------------------------------------------------ */
.lx-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.lx-pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--dline-2);font:600 13px/1 var(--sans);color:var(--dink-2);background:rgba(240,246,252,.03)}
.lx-pill b{font:800 15px/1 var(--cond);letter-spacing:.02em;color:var(--dink)}
.lx-pill.is-done{border-color:rgba(39,212,137,.45);color:var(--up)}
.lx-pill.is-done::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--up)}
.lx-num{position:absolute;right:max(24px,calc((100vw - 1200px)/2 + 24px));bottom:-26px;font:800 clamp(140px,19vw,260px)/1 var(--cond);color:rgba(240,246,252,.035);letter-spacing:-.02em;pointer-events:none;user-select:none}
@media (max-width:760px){.lx-num{display:none}}

/* 2. Layout ------------------------------------------------------------------ */
.lx{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:56px;align-items:start}
.lx-body{min-width:0;max-width:740px}
.lx-body>*+*{margin-top:28px}
.lx-body>.prose+.prose{margin-top:20px}
.lx-body .h2{font-size:clamp(28px,3vw,36px)}
.lx-h{scroll-margin-top:calc(var(--hd-h) + 20px)}
.lx-side{position:sticky;top:calc(var(--hd-h) + 24px);display:grid;gap:16px}
.lx-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.lx-card h2{font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.lx-toc{display:grid;gap:2px}
.lx-toc a{display:flex;align-items:center;min-height:36px;padding:0 10px;border-radius:8px;font:500 14px/1.3 var(--sans);color:var(--ink-2)}
.lx-toc a:hover{background:var(--bg);color:var(--ink)}
.lx-path{display:grid;gap:4px;counter-reset:none}
.lx-path a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:4px 8px;border-radius:9px;font:600 13.5px/1.3 var(--sans);color:var(--ink)}
.lx-path a:hover{background:var(--bg)}
.lx-path a[aria-current="page"]{background:var(--brand-soft)}
.lx-path .n{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font:800 14px/1 var(--cond);color:var(--ink-2)}
.lx-path .is-done .n{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.lx-path [data-status]{font:600 11px/1 var(--sans);color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.lx-path .is-done [data-status]{color:var(--brand-ink)}
@media (max-width:1060px){.lx{grid-template-columns:1fr}.lx-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.lx-body{max-width:none}}
@media (max-width:640px){.lx-side{grid-template-columns:1fr}.lx-side .lx-card--toc{display:none}}

/* 3. Key idea ---------------------------------------------------------------- */
.keyidea{position:relative;padding:26px 28px 26px 30px;border-radius:var(--r-lg);background:linear-gradient(135deg,#0f1c44 0%,#0a1124 70%);color:var(--dink);overflow:hidden;border:1px solid rgba(36,89,240,.28)}
.keyidea::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.keyidea::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;background:radial-gradient(closest-side,rgba(36,89,240,.22),transparent 70%);pointer-events:none}
.keyidea .eyebrow{color:var(--accent-d)}
.keyidea p.big{position:relative;margin-top:12px;font:700 clamp(20px,2.2vw,24px)/1.35 var(--sans);letter-spacing:-.015em}
.keyidea ul{position:relative;margin-top:16px;display:grid;gap:8px;list-style:none}
.keyidea li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--dink-2)}
.keyidea li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;border-left:2.5px solid var(--dlink);border-bottom:2.5px solid var(--dlink);transform:rotate(-45deg)}
.keyidea li strong{color:var(--dink)}

/* 4. Worked example (receipt) ---------------------------------------------- */
.worked{border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.worked-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.worked-hd .eyebrow{font-size:11px}
.worked-hd h3{font:800 24px/1.05 var(--cond);text-transform:uppercase;margin-top:8px}
.worked-hd .tag{margin-top:2px}
.rc{display:grid}
.rc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:13px 22px;border-bottom:1px dashed var(--line)}
.rc-row:last-child{border-bottom:0}
.rc-row span{font:500 15px/1.4 var(--sans);color:var(--ink)}
.rc-row small{grid-column:1/-1;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rc-row b{font:700 22px/1 var(--cond);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.rc-row--sum{background:var(--surface-2);border-bottom-style:solid}
.rc-row--sum span{font-weight:700}
.up{color:var(--brand-ink)}.dn{color:var(--loss)}.mute{color:var(--ink-3)}
.worked-ft{padding:14px 22px;background:var(--surface-2);border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.worked-ft a{color:var(--brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* plan strip (entry / target / fallback) */
.planstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.planstrip>div{background:var(--paper);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.planstrip small{font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.planstrip b{font:800 30px/1 var(--cond);font-variant-numeric:tabular-nums}
.planstrip em{font-style:normal;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
@media (max-width:480px){.planstrip b{font-size:24px}.planstrip>div{padding:12px}}

/* 5. Tools --------------------------------------------------------------------- */
.tool{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow);overflow:hidden;scroll-margin-top:calc(var(--hd-h) + 20px)}
.tool-hd{display:flex;gap:14px;align-items:flex-start;padding:22px 24px 0}
.tool-hd .ico{flex:none}
.tool-hd h3{font:800 26px/1 var(--cond);text-transform:uppercase;margin-top:6px}
.tool-hd p{font-size:14.5px;color:var(--ink-2);margin-top:6px}
.tool-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;padding:20px 24px 6px}
.tool-in .field{min-width:0}
.tool-in .wide{grid-column:1/-1}
.tool-in .span2{grid-column:span 2}
.tool-in [data-stop]{display:contents}
.tool-in [data-stop][hidden]{display:none!important}
.adorn{position:relative}
.adorn .input{font-variant-numeric:tabular-nums;font-weight:600}
.adorn[data-pre] .input{padding-left:28px}
.adorn[data-post] .input{padding-right:30px}
.adorn[data-pre]::before{content:attr(data-pre);position:absolute;left:13px;top:50%;transform:translateY(-50%);font:600 15px/1 var(--sans);color:var(--ink-3);pointer-events:none}
.adorn[data-post]::after{content:attr(data-post);position:absolute;right:13px;top:50%;transform:translateY(-50%);font:600 15px/1 var(--sans);color:var(--ink-3);pointer-events:none}
.tool-opts{display:flex;flex-wrap:wrap;gap:4px 20px;padding:4px 24px 0}
.tool-msg{padding:0 24px;min-height:0;font:600 13.5px/1.45 var(--sans)}
.tool-msg:empty{display:none}
.tool-msg[data-state="err"]{color:var(--loss);padding-top:10px}
.tool-msg[data-state="warn"]{color:var(--warn-ink);padding-top:10px}
.tool-out{margin:18px 0 0;padding:22px 24px 24px;background:var(--dark-1);color:var(--dink);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 20px;position:relative}
.tool-out::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 0%,rgba(36,89,240,.12),transparent 70%);pointer-events:none}
.o{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.o small{font:700 10.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dink-3)}
.o b{font:700 30px/1 var(--cond);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--dink);overflow-wrap:anywhere}
.o span{font-size:12.5px;line-height:1.4;color:var(--dink-3)}
.o--hero b{font-size:40px}
.o b.up,.tool-out .up{color:var(--up)}
.o b.dn,.tool-out .dn{color:var(--dn)}
.o b.mute{color:var(--dink-3)}
.o--wide{grid-column:1/-1}
.o-sep{grid-column:1/-1;height:1px;background:var(--dline)}
.tool-verdict{grid-column:1/-1;position:relative;font-size:14px;line-height:1.5;color:var(--dink-2);padding:12px 14px;border-radius:10px;background:rgba(240,246,252,.04);border:1px solid var(--dline)}
.tool-verdict.dn{color:#ffb3ba}
.tool-fine{padding:14px 24px 18px;background:#0a0e13;color:var(--dink-3);font-size:12.5px;line-height:1.5;border-top:1px solid var(--dline)}
.tool-fine a{color:var(--dink);text-decoration:underline;text-underline-offset:2px}
.tool-text{position:relative;grid-column:1/-1;white-space:pre-wrap;font:500 14.5px/1.6 var(--sans);color:var(--dink);padding:16px 18px;border-radius:12px;background:rgba(36,89,240,.08);border:1px solid rgba(36,89,240,.3)}
.tool-actions{position:relative;grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tool-actions .note{font-size:13px;color:var(--dink-3)}
@media (max-width:640px){
  .tool-hd{padding:18px 16px 0}.tool-in{padding:16px 16px 4px;grid-template-columns:repeat(2,minmax(0,1fr))}.tool-opts{padding:4px 16px 0}
  .tool-msg{padding:0 16px}.tool-out{padding:18px 16px 20px;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
  .o b{font-size:25px}.o--hero b{font-size:32px}.tool-fine{padding:12px 16px 16px}
  .tool-hd .ico{display:none}
}

/* price ladder (planner): colored ticks on a 0 to $1 line, labels live in the legend */
.ladder{grid-column:1/-1;position:relative;height:46px;margin:0 6px}
.ladder-track{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(255,107,120,.35),rgba(240,246,252,.12) 50%,rgba(39,212,137,.35))}
.ladder-ticks{position:absolute;left:0;right:0;top:30px;display:flex;justify-content:space-between;font:600 10.5px/1 var(--sans);color:var(--dink-3)}
.mark{position:absolute;top:4px;transform:translateX(-50%);transition:left .25s ease}
.mark i{display:block;width:4px;height:26px;border-radius:3px;background:currentColor;box-shadow:0 0 0 2px var(--dark-1)}
.mark--buy{color:#c9d1d9}.mark--sell{color:var(--up)}.mark--be{color:var(--amber)}.mark--fair{color:#8ab4ff}
.lg{grid-column:1/-1;position:relative;display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin-top:-4px}
.lg li{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--sans);color:var(--dink-3)}
.lg li::before{content:"";width:10px;height:10px;border-radius:3px;background:currentColor}
.lg b{font-weight:700;color:var(--dink);font-variant-numeric:tabular-nums}
.lg--buy{color:#c9d1d9!important}.lg--sell{color:var(--up)!important}.lg--be{color:var(--amber)!important}.lg--fair{color:#8ab4ff!important}
.lg li{color:inherit}
.lg li span{color:var(--dink-3)}
/* fee table */
.feetab{grid-column:1/-1;position:relative;overflow-x:auto;border-radius:12px;border:1px solid var(--dline)}
.feetab table{width:100%;border-collapse:collapse;font-size:13.5px}
.feetab th{font:700 10.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dink-3);text-align:right;padding:10px 12px;background:rgba(240,246,252,.03);border-bottom:1px solid var(--dline)}
.feetab td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--dline);color:var(--dink-2)}
.feetab th:first-child,.feetab td:first-child{text-align:left;color:var(--dink)}
.feetab tr:last-child td{border-bottom:0}
.feetab caption{caption-side:bottom;text-align:left;padding:10px 12px;font-size:12px;color:var(--dink-3)}

/* simulator bar + window timeline */
.sim-bar{grid-column:1/-1;position:relative;height:10px;border-radius:10px;background:rgba(240,246,252,.08);overflow:hidden}
.sim-fill{position:absolute;left:0;top:0;bottom:0;border-radius:10px;transition:width .3s}
.sim-fill.dn{background:var(--dn)}.sim-fill.up{background:var(--up)}
.timeline{border-radius:var(--r-lg);background:var(--dark-1);color:var(--dink);padding:22px 22px 18px;border:1px solid var(--dline)}
.timeline svg{width:100%;height:auto;overflow:visible}
.timeline figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:var(--dink-3)}
.tl-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.tl-legend div{border-top:2px solid var(--dline-2);padding-top:10px}
.tl-legend div:nth-child(3){border-top-color:var(--amber)}
.tl-legend div:first-child{border-top-color:#6f97ff}
.tl-legend small{display:block;font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dink-3)}
.tl-legend p{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--dink-2)}
@media (max-width:640px){.tl-legend{grid-template-columns:1fr}.timeline{padding:18px 14px 14px}}

/* 6. Quiz ---------------------------------------------------------------------- */
.quiz{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow);padding:24px}
.quiz-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.quiz-hd h2{font:800 30px/1 var(--cond);text-transform:uppercase;margin-top:8px}
.q{border:0;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.q legend{display:flex;gap:12px;align-items:flex-start;font:600 16.5px/1.4 var(--sans);color:var(--ink);padding:0;margin-bottom:12px;float:left;width:100%}
.q legend+*{clear:both}
.q-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 15px/1 var(--cond)}
.q-opts{display:grid;gap:8px;clear:both}
.opt{position:relative;display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--paper);cursor:pointer;font-size:15px;line-height:1.45;color:var(--ink-2);transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--ink-3)}
.opt input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--brand-d)}
.opt:has(input:checked){border-color:var(--ink);background:var(--surface-2);color:var(--ink)}
.opt:has(input:focus-visible){outline:3px solid #8fb4ff;outline-offset:2px}
.q.is-missing .q-opts{outline:2px dashed var(--loss);outline-offset:6px;border-radius:12px}
.quiz.is-checked .opt.is-answer{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}
.quiz.is-checked .opt.is-answer::after{content:"Right answer";margin-left:auto;align-self:center;font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);white-space:nowrap;padding-left:8px}
.quiz.is-checked .opt.is-picked-wrong{border-color:var(--loss);background:var(--loss-soft)}
.q-why{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--surface-2);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.q.is-right .q-why{background:var(--brand-soft)}
.q.is-wrong .q-why{background:var(--loss-soft)}
.q-verdict{color:var(--ink)}
.quiz-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.quiz-msg{flex:1;min-width:200px}
.quiz-msg[data-state="ok"]{color:var(--brand-ink)}
.quiz-msg[data-state="warn"]{color:var(--warn-ink)}
.quiz-msg[data-state="err"]{color:var(--loss)}
@media (max-width:640px){.quiz{padding:18px 16px}.quiz.is-checked .opt.is-answer::after{display:none}}

/* 7. Next lesson + sources ------------------------------------------------------ */
.nextl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:24px 26px;border-radius:var(--r-lg);background:radial-gradient(90% 140% at 100% 0%,rgba(36,89,240,.25),transparent 60%),var(--dark-1);color:var(--dink);border:1px solid var(--dline-2);transition:border-color .2s,transform .2s}
.nextl:hover{border-color:rgba(36,89,240,.55);transform:translateY(-2px)}
.nextl small{font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-d)}
.nextl strong{display:block;margin-top:8px;font:800 clamp(26px,3vw,34px)/1 var(--cond);text-transform:uppercase}
.nextl p{margin-top:8px;font-size:14.5px;color:var(--dink-2)}
.nextl .go{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--brand);color:var(--on-brand)}
.nextl .go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nextl.is-ready{box-shadow:0 0 0 3px rgba(36,89,240,.35)}
.sources{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.sources h2{font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.sources ol{padding-left:1.2em;display:grid;gap:6px}
.sources a{color:var(--brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.cite{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;margin:0 1px;border-radius:999px;background:var(--brand-soft);border:1px solid var(--line-2);font:600 12px/1.5 var(--sans)!important;color:var(--brand-ink)!important;text-decoration:none!important;white-space:nowrap;vertical-align:1px}
.cite:hover{background:var(--brand-soft);border-color:var(--brand)}
.label-house{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:6px;background:var(--warn-soft);color:var(--warn-ink);font:700 11px/1.6 var(--sans);letter-spacing:.05em;text-transform:uppercase;vertical-align:2px}

/* 8. Hub --------------------------------------------------------------------------- */
.hub-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
@media (max-width:980px){.hub-hero{grid-template-columns:1fr;gap:32px}}
.pbar{height:8px;border-radius:8px;background:rgba(240,246,252,.1);overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--brand),var(--brand-hi));transition:width .4s}
.stk{position:relative;border-radius:20px;padding:24px;background:linear-gradient(180deg,rgba(240,246,252,.06),rgba(240,246,252,.02));border:1px solid var(--dline-2);color:var(--dink)}
.stk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.stk-num{display:flex;align-items:baseline;gap:8px}
.stk-num strong{font:800 72px/.9 var(--cond);font-variant-numeric:tabular-nums;color:#fff}
.stk-num span{font:700 16px/1 var(--sans);color:var(--dink-2)}
.stk-lbl{font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-d);margin-bottom:10px}
.stk-best{text-align:right;font-size:13px;color:var(--dink-3)}
.stk-best b{display:block;font:700 26px/1 var(--cond);color:var(--dink);margin-top:4px}
.stk-days{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;margin-top:20px}
.stk-days li{aspect-ratio:1;border-radius:6px;background:rgba(240,246,252,.06);border:1px solid var(--dline)}
.stk-days li.is-hit{background:var(--brand);border-color:var(--brand)}
.stk-days li.is-frz{background:rgba(138,180,255,.25);border-color:rgba(138,180,255,.5)}
.stk-days li.is-today{box-shadow:0 0 0 2px rgba(240,246,252,.5)}
.stk-cal-lbl{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--dink-3)}
.stk-frz{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px;color:var(--dink-2)}
.frz{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px dashed var(--dline-2);color:var(--dink-3)}
.frz svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.frz.is-on{border-style:solid;border-color:rgba(138,180,255,.55);background:rgba(138,180,255,.14);color:#b8d0ff}
.stk-msg{margin-top:14px;font-size:14px;line-height:1.5;color:var(--dink-2)}
.stk .btn{margin-top:16px}
.stk .fine{margin-top:12px;color:var(--dink-3)}

.path{display:grid;gap:14px}
.path-item{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:20px;align-items:center;padding:20px 22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.path-item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.path-n{display:grid;place-items:center;width:72px;height:72px;border-radius:16px;background:var(--dark-1);color:#fff;font:800 36px/1 var(--cond)}
.path-item.is-done .path-n{background:var(--brand);color:var(--on-brand)}
.path-item h3{font:700 19px/1.3 var(--sans);letter-spacing:-.01em}
.path-item p{margin-top:4px;font-size:14.5px;color:var(--ink-2)}
.path-item .tool-tag{margin-top:10px;display:inline-flex;gap:6px;align-items:center;font:600 12.5px/1 var(--sans);color:var(--ink-3)}
.path-st{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--bg);font:700 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.path-item.is-done .path-st{background:var(--brand-soft);color:var(--brand-ink)}
.path-item::after{content:"";position:absolute;left:57px;top:100%;width:2px;height:14px;background:var(--line-2)}
.path-item:last-child::after{display:none}
@media (max-width:640px){.path-item{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px}.path-n{width:52px;height:52px;font-size:28px;border-radius:12px}.path-st{grid-column:2;justify-self:start}.path-item::after{left:41px}}

.gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.gl div{padding:16px 0;border-bottom:1px solid var(--line)}
.gl dt{font:700 16px/1.3 var(--sans);color:var(--ink)}
.gl dd{margin-top:5px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.gl dd a{color:var(--brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){.gl{grid-template-columns:1fr}}
.gl-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.gl-jump a{display:inline-grid;place-items:center;min-width:44px;min-height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--paper);font:600 13px/1 var(--sans);color:var(--ink-2)}
.gl-jump a:hover{border-color:var(--brand);color:var(--brand-ink)}

/* 9. Helpers ---------------------------------------------------------------------- */
.sec-note{font-size:13px;color:var(--ink-3)}
.two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.two-up{grid-template-columns:1fr}}
.mini{padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--paper)}
.mini h3{font:700 16px/1.3 var(--sans)}
.mini p{margin-top:6px;font-size:14.5px;color:var(--ink-2)}
.mini .k{font:800 34px/1 var(--cond);color:var(--ink);font-variant-numeric:tabular-nums}
.mini--dark{background:var(--dark-1);border-color:var(--dline);color:var(--dink)}
.mini--dark h3{color:var(--dink)}
.mini--dark p{color:var(--dink-2)}
.mini--dark .k{color:var(--accent-d)}
.mini--dark .link,.card-dark .link{color:var(--dlink);text-decoration-color:rgba(143,180,255,.4)}