/* Investing Academy - shared design system */
:root{
  --paper:#F6F7F4; --panel:#FFFFFF; --tint:#E7F0E9; --tint2:#F0F4EE;
  --ink:#17332B; --green:#1E5A46; --green-soft:#3E7A62;
  --brass:#A97E2F; --brass-tint:#F3E7CE;
  --coral:#C4552F; --coral-tint:#F7E8E0;
  --muted:#5C6B62; --line:#D8DFD6; --line-strong:#B9C4B8;
  --r:12px; --shadow:0 1px 2px rgba(23,51,43,.06),0 8px 24px -12px rgba(23,51,43,.18);
  --shadow-lift:0 2px 4px rgba(23,51,43,.08),0 16px 36px -14px rgba(23,51,43,.26);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;font-size:17px;line-height:1.68}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.15}
a{color:var(--green)}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}

/* language switching: body[data-lang="es"] hides .en, shows .es */
.es{display:none}
body[data-lang="es"] .en{display:none}
body[data-lang="es"] .es{display:revert}
svg .es{display:none}
body[data-lang="es"] svg .en{display:none}
body[data-lang="es"] svg .es{display:revert}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(246,247,244,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .in{max-width:960px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.brand .dot{width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,var(--green),var(--brass))}
.langbtn{flex:0 0 auto;font:inherit;font-size:13px;font-weight:600;border:1px solid var(--line-strong);background:var(--panel);color:var(--green);border-radius:99px;padding:6px 13px;cursor:pointer;transition:.15s}
.langbtn:hover{border-color:var(--green);box-shadow:var(--shadow)}

/* layout */
.wrap{max-width:960px;margin:0 auto;padding:0 20px 80px}
.narrow{max-width:740px}
.pagehead{padding:52px 0 8px}
.crumb{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb a:hover{color:var(--green)}
.kicker{font-family:'Fraunces',serif;font-size:15px;color:var(--brass);font-weight:500;margin-bottom:8px}
.pagehead h1{font-size:clamp(32px,5.5vw,46px);letter-spacing:-.01em}
.pagehead .sub{margin-top:12px;font-size:18.5px;color:var(--muted);max-width:58ch}
section{padding-top:46px}
section>h2{font-size:27px;margin-bottom:12px}
p+p{margin-top:12px}
.prose{max-width:62ch}
.prose strong{color:var(--green)}
.prose strong.risk{color:var(--coral)}

/* callouts */
.plain{margin:18px 0;padding:13px 17px;background:var(--brass-tint);border-radius:var(--r);font-size:15.5px;max-width:66ch}
.plain b{color:#7A5A1E;font-family:'Fraunces',serif}
.keyline{margin:20px 0;padding:15px 19px;background:var(--tint2);border:1px solid var(--line);border-radius:var(--r);font-size:15.5px;max-width:70ch}
.keyline.warn{background:var(--coral-tint);border-color:#E4C3B4}
.keyline b{font-family:'Fraunces',serif;color:var(--green)}
.keyline.warn b{color:var(--coral)}

/* panels & figures */
.panel{margin:22px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.panel figcaption{font-size:14px;color:var(--muted);margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
svg text{font-family:'Instrument Sans',sans-serif}
/* A class colour is the default, never an override: CSS beats an SVG fill=
   attribute, so a label that names its own fill (white inside a bar, a
   computed colour) keeps it. */
.svg-t{font-size:14px;font-weight:600}
.svg-s{font-size:12.5px}
.svg-g,.svg-c{font-size:14px;font-weight:600}
.svg-t:not([fill]){fill:var(--ink)}
.svg-s:not([fill]){fill:var(--muted)}
.svg-g:not([fill]){fill:var(--green)}
.svg-c:not([fill]){fill:var(--coral)}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:16px 26px;margin:12px 0 6px}
.ctrl{flex:1 1 210px;min-width:170px}
.ctrl label{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:500;color:var(--muted);margin-bottom:5px}
.ctrl output{color:var(--green);font-weight:600;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--green);cursor:pointer;height:26px}
.readout{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.stat{flex:1 1 150px;background:var(--tint);border-radius:var(--r);padding:12px 15px;transition:.2s}
.stat.alt{background:var(--coral-tint)}
.stat .n{font-family:'Fraunces',serif;font-size:23px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.stat.alt .n{color:var(--coral)}
.stat .l{font-size:12.5px;color:var(--muted)}

/* expandables */
details.deeper{margin:16px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:.2s}
details.deeper:hover{box-shadow:var(--shadow)}
details.deeper summary{cursor:pointer;padding:13px 18px;font-weight:600;font-size:15px;color:var(--green);list-style:none;display:flex;align-items:center;gap:10px}
details.deeper summary::-webkit-details-marker{display:none}
details.deeper summary::before{content:"+";font-family:'Fraunces',serif;font-size:19px;color:var(--brass);transition:transform .25s}
details.deeper[open] summary::before{transform:rotate(45deg)}
details.deeper .body{padding:2px 18px 16px;font-size:15.5px;max-width:66ch}
details.deeper .body p+p{margin-top:10px}
details.deeper .body svg.ladder{display:block;width:100%;max-width:400px;margin:4px 0 12px}
details.deeper .body .ladder-note{font-size:13.5px;color:var(--muted)}

/* case cards: requirement met / not met */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:18px 0}
.case{background:var(--panel);border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);padding:15px 17px;font-size:15px;box-shadow:var(--shadow)}
.case.ok{border-left-color:var(--green)}
.case.no{border-left-color:var(--coral)}
.case .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.02em;border-radius:99px;padding:3px 10px;margin-bottom:8px}
.case.ok .tag{background:var(--tint);color:var(--green)}
.case.no .tag{background:var(--coral-tint);color:var(--coral)}
.case h4{font-family:'Fraunces',serif;font-size:16px;margin-bottom:5px}
.case p{color:var(--ink)}
.case .why{margin-top:8px;font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}

/* chooser / checker */
.chooser{display:grid;gap:12px}
.q{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.q .qt{font-weight:600;font-size:15px;margin-bottom:9px}
.q .opts{display:flex;flex-wrap:wrap;gap:8px}
.q button{font:inherit;font-size:14px;padding:8px 14px;border-radius:99px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);cursor:pointer;transition:.15s}
.q button:hover{border-color:var(--green)}
.q button.sel{background:var(--green);border-color:var(--green);color:#fff}
.verdict{margin-top:4px;padding:16px 18px;border-radius:var(--r);background:var(--tint);font-size:15.5px;display:none}
.verdict.show{display:block;animation:pop .25s ease}
.verdict.no{background:var(--coral-tint)}
.verdict b{font-family:'Fraunces',serif}
@keyframes pop{from{transform:translateY(4px);opacity:0}to{transform:none;opacity:1}}

/* quiz */
.quiz-q{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:19px;margin:14px 0;box-shadow:var(--shadow)}
.quiz-q h3{font-size:17.5px;margin-bottom:11px}
.quiz-q .opts{display:grid;gap:8px}
.quiz-q button.opt{text-align:left;font:inherit;font-size:15px;padding:10px 14px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:.15s}
.quiz-q button.opt:hover:not(:disabled){border-color:var(--green-soft);transform:translateX(2px)}
.quiz-q button.opt.right{background:var(--tint);border-color:var(--green);font-weight:600}
.quiz-q button.opt.wrong{background:var(--coral-tint);border-color:var(--coral)}
.quiz-q .why{display:none;margin-top:10px;font-size:14px;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}
.quiz-q.answered .why{display:block;animation:pop .25s ease}

/* steps */
ol.steps{margin:16px 0 0;padding:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:14px 0 14px 54px;border-bottom:1px solid var(--line);font-size:15.5px;max-width:64ch}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--green);font-family:'Fraunces',serif;font-weight:600;display:flex;align-items:center;justify-content:center}
ol.steps b{color:var(--green)}

/* fund rows */
.fund{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.fund:last-child{border-bottom:none}
.fund .tick{flex:0 0 72px;font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--green)}
.fund h3{font-size:16.5px;display:inline}
.fund .er{display:inline-block;font-size:12px;font-weight:600;background:var(--tint);color:var(--green);border-radius:99px;padding:3px 9px;margin-left:8px;vertical-align:2px}
.fund p{font-size:14.5px;margin-top:4px;max-width:56ch}

/* mix bars */
.mixbars{margin-top:14px;display:grid;gap:10px}
.mixrow{display:grid;grid-template-columns:60px 1fr 52px;gap:12px;align-items:center;font-size:14px}
.mixrow .lbl{font-family:'Fraunces',serif;font-weight:600;color:var(--green)}
.mixrow .track{height:26px;background:var(--tint2);border-radius:7px;overflow:hidden}
.mixrow .fill{height:100%;border-radius:7px;transition:width .25s ease}
.mixrow .pct{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

/* index cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:26px}
.card{position:relative;display:block;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);transition:.18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.card .num{font-family:'Fraunces',serif;font-size:14px;color:var(--brass);font-weight:500}
.card h3{font-size:20px;margin:6px 0 8px}
.card p{font-size:14.5px;color:var(--muted);max-width:44ch}
.card .meta{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
/* A lesson that exists and is not yet advertised. Same card, no link, no
   lift on hover, and it says which it is — a card that looks clickable and is
   not is worse than one that says so. */
.card.soon{cursor:default;background:var(--panel);opacity:.72}
.card.soon:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}
.card.soon h3,.card.soon p{color:var(--muted)}
.card .soon-badge{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brass);
  background:rgba(169,126,47,.12);border-radius:99px;padding:5px 11px}

.card .done-badge{display:none;position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-size:14px;align-items:center;justify-content:center}
.card.is-done .done-badge{display:flex}
/* A reader without the membership (site.js adds body.dk-stranger): each card
   says what a tap opens, the lesson's preview or the free lesson, and a
   progress bar and done badges that can only be empty are not drawn. */
.card .pv-chip{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--brass);background:rgba(169,126,47,.12);border-radius:99px;padding:4px 10px}
.card .pv-chip.is-free{color:var(--green);background:var(--tint)}
.pv-chip[hidden]{display:none}
body.dk-stranger .progressband,body.dk-stranger .card .done-badge{display:none}
.card.is-done{border-color:var(--green)}
.icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--tint)}
.icon svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* A tool is not a lesson, and the card should say so before the label does.
   Brass, dashed, and no numeral — the same treatment the investing index gave
   its calculators before the track pages were unified, now on all of them. */

.card.tool .icon{background:var(--brass-tint)}
.card.tool .icon svg{stroke:var(--brass)}
.card.tool .num{color:var(--brass)}

/* page footer nav */
.pagenav{display:flex;justify-content:space-between;gap:12px;margin-top:56px;border-top:3px double var(--line-strong);padding-top:22px;flex-wrap:wrap}
.pagenav a{flex:1 1 220px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;transition:.15s;box-shadow:var(--shadow)}
.pagenav a:hover{border-color:var(--green);box-shadow:var(--shadow-lift)}
.pagenav .dir{font-size:12px;color:var(--muted)}
.pagenav .ttl{font-family:'Fraunces',serif;font-weight:600;color:var(--green);margin-top:2px}
.pagenav a.next{text-align:right}
.donebtn{margin:34px auto 0;display:flex;align-items:center;gap:9px;font:inherit;font-weight:600;font-size:15px;padding:11px 22px;border-radius:99px;border:1.5px solid var(--green);background:var(--panel);color:var(--green);cursor:pointer;transition:.18s}
.donebtn:hover{background:var(--tint)}
.donebtn.is-done{background:var(--green);color:#fff}
.sitefoot{max-width:960px;margin:0 auto;padding:34px 20px 56px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line)}

@media (max-width:600px){ body{font-size:16px} section>h2{font-size:23px} .panel{padding:16px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

/* tools: calculator app */
.appgrid{display:grid;grid-template-columns:290px 1fr;gap:18px;align-items:start}
@media (max-width:760px){.appgrid{grid-template-columns:1fr}}
/* One column of the grid holding more than one block, stacked. A section that
   continues the chart has to live in the chart's own column: put it after the
   whole grid instead and it starts below the TALLER column, leaving a hole the
   height of the controls beside it. min-width:0 so a wide SVG cannot push the
   column past its share. */
.appcol{display:flex;flex-direction:column;gap:18px;min-width:0}
.appcol > .drawdown{margin:0}
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input[type=number],.field select{width:100%;font:inherit;font-size:16px;padding:9px 12px;border:1.5px solid var(--line-strong);border-radius:9px;background:var(--paper);color:var(--ink)}
.field input[type=number]:focus,.field select:focus{border-color:var(--green);outline:none}
.inrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.presets{margin:6px 0 16px;display:grid;gap:10px}
.fundcard{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;background:var(--paper)}
.fundcard .fh{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.fundcard .fh b{font-family:'Fraunces',serif;font-size:16px;color:var(--green)}
.fundcard .fh span{font-size:11.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:99px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;transition:.15s}
.chips button:hover{border-color:var(--green)}
.chips button.sel{background:var(--green);border-color:var(--green);color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 2px;font-size:13px;color:var(--muted)}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.hoverline{min-height:22px;font-size:13.5px;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
/* The drawdown block: what the pile pays once you stop adding and start
   taking. It is a section of the page in its own right, not a figure inside
   one — it shipped briefly nested inside a .stat, which is a flex item of
   .readout, and so split that row in two at every width. */
.drawdown{margin:26px 0 0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:22px}
.drawdown h2{font-family:'Fraunces',serif;font-size:21px;font-weight:600;line-height:1.2;margin:0}
.dd-sub{font-size:14.5px;color:var(--muted);margin:8px 0 0;max-width:62ch}
.dd-ctrl{margin:22px 0 0}
.dd-ctrl label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;font-weight:600;margin-bottom:6px}
.dd-ctrl output{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--green);
  font-variant-numeric:tabular-nums}
/* One mark, sitting under the value it names — 4% of a 1–10 slider is a third
   of the way along, so the caption points at the answer instead of floating. */
.dd-marks{position:relative;height:30px}
.dd-marks .mid{position:absolute;left:33.3%;transform:translateX(-50%);top:9px;
  white-space:nowrap;font-size:12px;color:var(--muted)}
.dd-marks .mid::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:7px;
  background:var(--line-strong)}
.dd-out{margin-top:4px}
#ddchart{display:block;width:100%;height:auto;margin-top:18px}
.dd-say{margin-top:14px;padding:14px 18px;border-radius:var(--r);background:var(--tint);
  font-family:'Fraunces',serif;font-size:16.5px;font-weight:600;color:var(--green);line-height:1.4}
.dd-say.warn{background:var(--coral-tint);color:var(--coral)}
.dd-note{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.6;max-width:72ch}
.dd-note b{color:var(--green)}
@media(max-width:600px){.drawdown{padding:18px 15px}.drawdown h2{font-size:19px}}

.netnote{font-size:13px;color:var(--muted);margin-top:4px}
.netnote b{color:var(--green)}

/* mortgage tool */
/* Four modes do not fit one row on a 360px phone, and flex items will not
   shrink below their own text — so the row pushed the whole page sideways.
   They wrap instead: two by two on a narrow screen, one row where there is
   room, and the label wraps inside the button rather than escaping it. */
.modetab{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.modetab button{flex:1 1 148px;min-width:0;white-space:normal;line-height:1.25;
  font:inherit;font-size:14.5px;font-weight:600;padding:11px 14px;border-radius:12px;
  border:1.5px solid var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer;transition:.15s}
.modetab button.sel{border-color:var(--green);background:var(--tint);color:var(--green)}
.paybar{display:flex;height:34px;border-radius:9px;overflow:hidden;margin:8px 0 12px}
.paybar div{transition:width .25s ease}
.paylist{display:grid;gap:6px;font-size:14.5px}
.paylist .row{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;background:var(--tint2)}
.paylist .row b{font-variant-numeric:tabular-nums}
.bigpay{font-family:'Fraunces',serif;font-size:34px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.bigpay small{font-size:15px;color:var(--muted);font-family:'Instrument Sans',sans-serif;font-weight:500}
.only-biz,.only-per{display:none}
body[data-mode="biz"] .only-biz{display:revert}
body[data-mode="per"] .only-per{display:revert}

/* mortgage lab v2 */
.duo{margin-bottom:11px}
.duo .top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px}
.duo .top label{font-size:12.5px;font-weight:600;color:var(--muted)}
.duo .top input[type=number]{width:104px;font:inherit;font-size:14px;padding:5px 8px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--paper);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.duo .top input[type=number]:focus{border-color:var(--green);outline:none}
.duo input[type=range]{width:100%;height:22px}
.grp{border:1px solid var(--line);border-radius:var(--r);padding:13px 14px 6px;margin-bottom:13px;background:var(--paper)}
.grp>.gt{font-family:'Fraunces',serif;font-size:14.5px;font-weight:600;color:var(--green);margin-bottom:9px}
.togglebtn{font:inherit;font-size:13px;font-weight:600;padding:8px 13px;border-radius:99px;border:1.5px solid var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer;transition:.15s;margin:0 0 11px}
.togglebtn.sel{border-color:var(--green);background:var(--tint);color:var(--green)}
.pinbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.pinbtn{font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:99px;border:1.5px solid var(--brass);background:var(--brass-tint);color:#7A5A1E;cursor:pointer;transition:.15s}
.pinbtn:hover{box-shadow:var(--shadow)}
.compare{margin:0 0 16px;border:1.5px dashed var(--brass);border-radius:var(--r);background:var(--panel);padding:13px 15px;display:none}
.compare.show{display:block;animation:pop .25s ease}
.compare table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.compare th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}
.compare td{padding:5px 6px;border-bottom:1px dashed var(--line)}
.compare tr:last-child td{border-bottom:none}
.compare .up{color:var(--coral);font-weight:600}
.compare .dn{color:var(--green);font-weight:600}

/* stage: buying vs existing mortgage */
.only-own,.only-buy{}
body[data-stage="own"] .only-buy{display:none!important}
body[data-stage="buy"] .only-own{display:none!important}

/* ===== refinement pass: UI polish ===== */
/* custom sliders */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--green) var(--fill,50%),#DCE3DA var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:#fff;border:2.5px solid var(--green);margin-top:-6.5px;box-shadow:0 1px 4px rgba(23,51,43,.25);transition:transform .12s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:#DCE3DA}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--green)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:2.5px solid var(--green);box-shadow:0 1px 4px rgba(23,51,43,.25)}
/* hero + cards */
.pagehead h1{background:linear-gradient(115deg,var(--ink) 30%,var(--green) 75%,var(--brass));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.card{overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--green),var(--brass));opacity:0;transition:.18s}
.card:hover::before{opacity:1}
.icon{background:linear-gradient(135deg,var(--tint),#DFF0E4)}
.panel{border-top:2.5px solid var(--tint)}
.stat{border:1px solid transparent}
.stat:hover{border-color:var(--line)}
.bigpay{letter-spacing:-.01em}
.quiz-q button.opt.right{animation:pop .25s ease}
.paybar{box-shadow:inset 0 0 0 1px rgba(23,51,43,.08)}
svg .endlab{font-size:12px;font-weight:700;paint-order:stroke;stroke:#FFFFFF;stroke-width:3.5px}

/* ===== header v2 ===== */
.topbar{position:sticky;top:0;z-index:60;background:rgba(246,247,244,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 18px -14px rgba(23,51,43,.25)}
.topbar .in{max-width:1180px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:18px}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:18.5px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand .dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--green),#2E7057 55%,var(--brass));box-shadow:0 2px 6px -2px rgba(23,51,43,.5)}
.backbtn{display:inline-flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-weight:600;
  font-size:16.5px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap;
  padding:8px 14px 8px 9px;margin-left:-9px;border-radius:99px;border:1px solid transparent;transition:.16s}
.backbtn:hover{color:var(--green);background:var(--tint2);border-color:#CBE0D2}
.backbtn .backarrow{width:19px;height:19px;flex:0 0 auto;color:var(--brass);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.backbtn:hover .backarrow{transform:translateX(-3px)}
.backbtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (max-width:520px){.backbtn{font-size:15px}}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.langbtn{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;border:1.5px solid var(--line-strong);background:var(--panel);color:var(--green);border-radius:99px;padding:7px 14px;cursor:pointer;transition:.15s}
.langbtn:hover{border-color:var(--green);box-shadow:var(--shadow)}
/* hamburger */
/* nav links (built by JS) */
@media (max-width:520px){.brand>.en,.brand>.es{font-size:16.5px}.topbar .in{gap:10px}}

/* ===================== THOROUGH POLISH PASS ===================== */
/* global finish */
::selection{background:#CFE4D6;color:var(--ink)}
html{scrollbar-color:#B9C4B8 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#C3CEC2;border-radius:99px;border:2.5px solid var(--paper)}
*::-webkit-scrollbar-track{background:transparent}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main.wrap{padding-top:6px}

/* reading progress under the header */
.scrollprog{position:absolute;left:0;bottom:-1px;height:2.5px;width:0;background:linear-gradient(90deg,var(--green),var(--brass));border-radius:0 3px 3px 0;transition:width .08s linear}

/* page hero: ghost numeral + refined rhythm */
.pagehead{position:relative;padding:58px 0 10px}
.pagehead[data-num]::before{content:attr(data-num);position:absolute;right:-6px;top:-2px;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(120px,22vw,190px);line-height:.9;color:var(--green);opacity:.065;pointer-events:none;user-select:none}
.pagehead .kicker{display:inline-flex;align-items:center;gap:8px}
.pagehead .kicker::before{content:"";width:26px;height:2px;background:var(--brass);border-radius:2px}
.pagehead .sub{line-height:1.72}
.pagehead .crumb{letter-spacing:.01em}

/* section headers get a hanging rule */
section>h2{position:relative;padding-bottom:10px;margin-bottom:16px}
section>h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--brass))}

/* callouts: accent spine + breathing room */
.plain{border-left:3.5px solid var(--brass);padding:14px 18px}
.keyline{border-left:3.5px solid var(--green)}
.keyline.warn{border-left-color:var(--coral)}
details.deeper summary{transition:background .15s}
details.deeper summary:hover{background:var(--tint2)}
details.deeper[open]{box-shadow:var(--shadow)}
details.deeper[open] summary{border-bottom:1px dashed var(--line)}

/* cards & stats micro-depth */
.card{will-change:transform}
.card .meta{border-top:1px dashed var(--line);padding-top:10px}
.stat{transition:transform .15s,border-color .15s}
.stat:hover{transform:translateY(-1px)}
.stat .n{transition:color .2s}
.quiz-q{transition:box-shadow .18s}
.quiz-q:hover{box-shadow:var(--shadow-lift)}
.donebtn{box-shadow:var(--shadow)}
.donebtn:active{transform:scale(.985)}
.donebtn.is-done{box-shadow:0 6px 18px -8px rgba(30,90,70,.55)}

/* prev/next: arrows + motion */
.pagenav a{position:relative;transition:.18s}
.pagenav a:hover{transform:translateY(-2px)}
.pagenav a:not(.next) .ttl::before{content:"\2190\00a0";color:var(--brass)}
.pagenav a.next .ttl::after{content:"\00a0\2192";color:var(--brass)}

/* footer band */
.sitefoot{margin-top:70px;background:linear-gradient(180deg,transparent,rgba(30,90,70,.05));border-top:1px solid var(--line);padding:36px 20px 60px;text-align:center;line-height:1.75}
.sitefoot::before{content:"";display:block;width:40px;height:22px;margin:0 auto 16px;opacity:.55;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 8 34 Q 20 6 32 34 Q 44 62 56 34 Q 68 6 80 34 Q 88 45 88 34' fill='none' stroke='%231E5A46' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='68' cy='11' r='7' fill='%23C89B4B'/%3E%3C/svg%3E")}

/* back-to-top */
.totop{position:fixed;right:22px;bottom:22px;z-index:55;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-strong);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--green);font-size:19px;cursor:pointer;box-shadow:var(--shadow-lift);opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--green)}

/* scroll-reveal (JS adds rv-init only when motion is allowed) */
.rv-init{opacity:0;transform:translateY(16px)}
.rv-init.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}

/* index: overall progress band */
.progressband{margin:26px 0 4px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 18px;box-shadow:var(--shadow)}
.progressband .pb-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.progressband b{font-family:'Fraunces',serif;font-size:16px;color:var(--green)}
.progressband .pb-pct{font-size:12.5px;font-weight:700;color:var(--brass);font-variant-numeric:tabular-nums}
.progressband .pb-track{height:9px;border-radius:99px;background:var(--tint2);overflow:hidden}
.progressband .pb-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--brass));transition:width .6s cubic-bezier(.2,.7,.2,1)}

/* forms final touch */
.field input[type=number],.field select,.duo .top input[type=number]{transition:border-color .15s,box-shadow .15s}
.field input[type=number]:focus,.duo .top input[type=number]:focus{box-shadow:0 0 0 3px rgba(30,90,70,.12)}
.chips button,.q button{box-shadow:0 1px 2px rgba(23,51,43,.05)}
.chips button:active,.q button:active{transform:scale(.96)}
.modetab button{box-shadow:var(--shadow)}
.modetab button.sel{box-shadow:inset 0 0 0 1px var(--green),var(--shadow)}
.paylist .row{transition:background .15s}
.paylist .row:hover{background:var(--tint)}

/* logo mark in header */
.brand svg.mark{width:27px;height:27px;flex:0 0 auto;filter:drop-shadow(0 2px 5px rgba(23,51,43,.35));transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.brand:hover svg.mark{transform:rotate(-4deg) scale(1.06)}

/* lens switcher: one concept, many doors */
/* The typed half of DESIGN rule 4. The readout IS the field: clicking it swaps
   in an input of the same size, so there is never the same number twice on one
   row. The slider stays the control you feel the relationship with; typing is
   for when you already know the number and dragging to it is a nuisance. */
.typable{cursor:text;border-bottom:1px dashed var(--line-strong);padding-bottom:1px}
.typable:hover,.typable:focus{border-bottom-color:var(--green);outline:none}
.duonum{
  width:96px;font:inherit;font-size:13.5px;font-weight:700;
  padding:1px 6px;border:none;border-bottom:1.5px solid var(--green);
  background:transparent;color:var(--green);
  text-align:right;font-variant-numeric:tabular-nums;
}
.duonum:focus{outline:none}
.duonum::-webkit-outer-spin-button,.duonum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.duonum{-moz-appearance:textfield}
@media(max-width:560px){ .duonum{width:84px} }

/* The house reading — R23. The third kind of statement on a page, after the
   book's own words (.quote) and the record (.srcstrip): a conclusion the owner
   drew FROM those, marked as his rather than laundered into authority.

   It carries what it was drawn from inside the component, for the same reason
   .quote carries its attribution: a reading with no lineage is indistinguishable
   from a maxim, and a maxim handed down from nowhere is the register this
   product cannot afford. */
.reading{margin:22px 0;padding:18px 20px 16px;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--brass);
  border-radius:var(--r);box-shadow:var(--shadow)}
.reading .rk{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brass);margin-bottom:7px}
.reading .rb{font-family:'Fraunces',serif;font-size:19px;line-height:1.42;
  color:var(--ink);font-weight:500;max-width:62ch}
.reading .rf{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.5;color:var(--muted)}
.reading .rf b{color:var(--ink);font-weight:600}
@media(max-width:560px){
  .reading{padding:15px 16px 14px}
  .reading .rb{font-size:17.5px}
}

/* The lens — DESIGN rule 1. A key concept with several doors into it, and the
   reader picks which one they come in by. The block has to LOOK like a choice
   rather than like a set of chapters, so the doors are one row of pills with a
   line under them and the panes sit flush beneath: whatever is behind a door is
   the whole idea, not a part of it. */
.lens{margin:24px 0}
.lens>.lenshead{margin:0 0 10px}
.lens>.lenshead .lk{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brass)}
.lens>.lenshead h3{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin:3px 0 2px;line-height:1.25}
.lens>.lenshead p{font-size:14.5px;color:var(--muted);margin:0;max-width:62ch}
.lens .lens-tabs{border-bottom:1px solid var(--line);padding-bottom:10px}
.lens .lens-pane>.scene:first-child{margin-top:0}
/* An analogy or a case is prose, and prose in this app lives in a box that says
   which kind of thing it is. */
.lens .door{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow)}
.lens .door p{font-size:15.5px;line-height:1.62;margin:0 0 12px;max-width:66ch}
.lens .door p:last-child{margin-bottom:0}
.lens .door .cases{display:grid;gap:11px;margin-top:4px}
@media(max-width:560px){
  .lens>.lenshead h3{font-size:17px}
  .lens .door{padding:16px 17px}
  .lens .door p{font-size:15px}
}
.lens .lens-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.lens .lens-tabs button{font:inherit;font-size:13px;font-weight:700;padding:8px 15px;border-radius:99px;border:1.5px solid var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer;transition:.15s}
.lens .lens-tabs button:hover{border-color:var(--green)}
.lens .lens-tabs button.sel{background:var(--green);border-color:var(--green);color:#fff}
.lens .lens-pane{display:none}
.lens .lens-pane.sel{display:block;animation:pop .28s ease}


/* The sidebar this block existed to make readable is gone — the lesson bar
   holds a back link and nothing else. What survives is the one line that was
   never about the sidebar: the topbar's own surface. */
.topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(246,247,244,.97)}

/* ===========================================================================
   THE SCENE — the default teaching unit of the whole school.
   ---------------------------------------------------------------------------
   Owner's law, 2026-09-14: "minimising the text and increasing the
   visualisations is always the right call in this app."

   A scene is one situation looked at from several angles. The tabs are VIEWS of
   the same scenario, not four different explanations — one set of controls
   drives every one of them, so dragging a number on `Numbers` moves the
   schematic, the comparison and the data table together. That shared state is
   the whole point and is what separates this from the older `.lens`.

   Every scene ends with one sentence stating the result in words. Without it a
   reader takes the chart as decoration and leaves with nothing.
   =========================================================================== */
/* The controls sit ABOVE the views, not under them.
   
   They are what the views are OF — "whose books", "how many years", "what rate"
   — so reading a table and only then discovering whose it was is backwards. You
   set up the situation, then look at it from each angle. Done with `order` so
   the markup stays in reading order for anything that does not use the
   stylesheet. */
.scene{display:flex;flex-direction:column}
.scene .scene-head{order:1}
.scene .scene-controls{order:2}
.scene .scene-tabs{order:3}
.scene .scene-body{order:4}
.scene .scene-say{order:5}
.scene{margin:26px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.scene-head{padding:16px 20px 0}
.scene-head h3{font-family:'Fraunces',serif;font-size:19px;font-weight:600;line-height:1.2}
.scene-head .sub{font-size:14px;color:var(--muted);margin-top:4px;max-width:66ch}

.scene-tabs{display:flex;gap:2px;padding:10px 20px 0;overflow-x:auto;scrollbar-width:none}
.scene-tabs::-webkit-scrollbar{display:none}
.scene-tabs button{font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
  border:0;background:none;color:var(--muted);padding:9px 14px;border-radius:9px 9px 0 0;
  border-bottom:2px solid transparent;transition:.15s}
.scene-tabs button:hover{color:var(--green);background:var(--tint2)}
.scene-tabs button.sel{color:var(--green);background:var(--tint);border-bottom-color:var(--green)}
.scene-tabs .ico{margin-right:7px;opacity:.75}

.scene-body{border-top:1px solid var(--line);padding:18px 20px 20px;background:var(--panel)}
.scene-pane{display:none}
.scene-pane.sel{display:block;animation:pop .26s ease}
.scene svg{display:block;width:100%;height:auto}
@media (max-width:700px){
  /* The chart fits the screen. It used to be held at 600px inside a 320px pane
     with a sideways scroll, so every chart on the site showed a little over
     half of itself; site.js rearranges the drawing for this width instead —
     sentences come out into .chart-said below, and the rest is enlarged. */
  .scene-pane > svg{width:100%;max-width:100%}
  .scene-pane > table{min-width:0}
  .scene-pane{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
}

/* The sentences a chart was carrying, set as text rather than as 6px labels
   inside a drawing. Only ever populated on a narrow screen. */
.chart-said{margin-top:10px;display:grid;gap:7px}
.chart-said p{font-size:13.5px;line-height:1.5;color:var(--muted);max-width:62ch}
.chart-said p:first-child{color:var(--ink);font-weight:500}

/* Controls sit OUTSIDE the panes: they drive every view at once. */
.scene-controls{padding:14px 20px 16px;background:var(--tint2);border-bottom:1px solid var(--line);margin-top:14px;
  display:flex;flex-wrap:wrap;gap:14px 26px}
.scene-controls .ctrl{flex:1 1 200px;min-width:160px}

/* The sentence. The reason the scene exists. */
.scene-say{padding:14px 20px;border-top:1px solid var(--line);background:var(--tint);
  font-family:'Fraunces',serif;font-size:16.5px;font-weight:600;color:var(--green);line-height:1.4}
.scene-say.warn{background:var(--coral-tint);color:var(--coral)}
/* Nothing to say yet (a rehearsal before it is played) is no bar at all, not
   an empty tinted strip under the picture. */
.scene-say:empty{display:none}

/* The data tab: the actual numbers, because "showing all the data" was asked for. */
.scene table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.scene thead th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.scene tbody td{padding:9px 10px;border-bottom:1px solid var(--line)}
.scene tbody tr:last-child td{border-bottom:0}
.scene tbody tr.hi td{background:var(--tint);font-weight:600}
.scene td.num{text-align:right}
.scene td.down{color:var(--coral);font-weight:600}

/* Two paths: the signature comparison. */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.path{padding:14px 16px;border-radius:var(--r);border:1px solid var(--line)}
.path.win{background:var(--tint);border-color:#BCD6C6}
.path.lose{background:var(--coral-tint);border-color:#E4C3B4}
.path .who{font-family:'Fraunces',serif;font-size:15.5px;font-weight:600}
.path .what{font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.45}
/* a path drawn as its own flow (DK_FORMS.flow at 300 wide, two per row): read
   at about its own size in a half-width card and on a phone alike */
.path .pathflow{display:block;width:100%;max-width:340px;margin-top:10px}
/* …but only once the half-width card is wide enough for it. Between 600 and
   760 two cards side by side leave the 300-wide drawing ~220px (0.73, box text
   near 8px), so cards that carry a flow stay stacked until 760. */
@media (max-width:760px){.paths:has(.pathflow){grid-template-columns:1fr}}
.path .num{font-family:'Fraunces',serif;font-size:27px;font-weight:600;margin-top:10px;
  font-variant-numeric:tabular-nums}
.path.win .num{color:var(--green)}
.path.lose .num{color:var(--coral)}
@media (max-width:600px){.paths{grid-template-columns:1fr}.scene-head,.scene-body,.scene-controls,.scene-say{padding-left:15px;padding-right:15px}}

/* Phones, where these are actually read.
   A tool page was measuring four to ten screens tall, and more than half of a
   scene was its own furniture rather than its chart: four stacked sliders at
   62px each, a closing sentence set at desktop size, and a page heading whose
   one-line summary ran to six lines. None of it is removed — it is set at the
   size a 393px screen wants, which takes a two-scene tool from four screens to
   under three, so the reader drags a control and can still see what moved. */
@media (max-width:600px){
  .pagehead h1{font-size:26px;line-height:1.15}
  .pagehead .sub{font-size:14.5px;line-height:1.5;margin-top:7px}
  .pagehead .kicker{margin-bottom:5px}

  .scene-head{padding-top:13px}
  .scene-head h3{font-size:17.5px}
  .scene-head .sub{font-size:13px;line-height:1.45;margin-top:4px}

  .scene-controls{gap:11px 16px;margin:10px 0 4px}
  .ctrl{min-width:0}
  .ctrl label{font-size:12.5px;margin-bottom:1px}
  .ctrl input[type=range]{height:22px}

  .scene-say{padding:12px 15px;font-size:15px;line-height:1.35}
  .keyline{padding:13px 16px;font-size:14.5px}
}

/* A quoted line, with its source.
   Default is to paraphrase (see DESIGN.md). A quote is for the cases where the
   author's OWN wording is the idea — "seek wealth, not money or status" cannot
   be paraphrased without losing it. The attribution is part of the component,
   not something a writer has to remember, so an unsourced quote is impossible. */
.quote{margin:20px 0;padding:16px 20px;border-left:3px solid var(--brass);
  background:var(--brass-tint);border-radius:0 var(--r) var(--r) 0;max-width:68ch}
.quote q{font-family:'Fraunces',serif;font-size:17.5px;line-height:1.45;color:#5E4517;
  quotes:'\201C' '\201D'}
.quote cite{display:block;margin-top:9px;font-style:normal;font-size:13px;color:#7A5A1E;font-weight:600}


/* ===== the lesson menu =====
   A hamburger at the right of the lesson bar, and a drawer that slides in from
   the right edge. It carries a small count beside the bars — "4/7" — so it
   still says where you are without being pressed, and the drawer's head repeats
   it in full. The drawer sits ABOVE the halls' bottom bar (880), or its last
   row would be hidden behind it. */
.lessonmenu{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12.5px;
  font-weight:700;color:var(--green);background:var(--tint);border:1px solid #CBE0D2;
  border-radius:12px;padding:0 11px;height:40px;min-width:44px;cursor:pointer;transition:.15s}
.lessonmenu:hover{background:#DCEAE1;border-color:var(--green)}
.lessonmenu .bars{display:flex;flex-direction:column;gap:4px;width:17px}
.lessonmenu .bars span{display:block;height:2px;border-radius:2px;background:var(--green);transition:.22s ease}
.lessonmenu[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lessonmenu[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.lessonmenu[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.lessonmenu .count{font-variant-numeric:tabular-nums;letter-spacing:.02em}

.lessonsheet{position:fixed;inset:0;z-index:910;display:flex;justify-content:flex-end}
.lessonsheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(23,51,43,.42);animation:sheet-fade .2s ease}
.sheet-body{position:relative;width:min(88vw,340px);height:100%;overflow-y:auto;
  background:var(--panel);border-left:1px solid var(--line);
  padding:calc(14px + env(safe-area-inset-top,0px)) 0 calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:-18px 0 44px -18px rgba(23,51,43,.5);animation:sheet-slide .26s cubic-bezier(.2,.7,.2,1)}
.sheet-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--panel);border-radius:10px;color:var(--muted);cursor:pointer}
.sheet-close:hover{border-color:var(--green);color:var(--green)}
.sheet-close svg{width:17px;height:17px}
.sheet-head{padding:4px 58px 12px 18px;border-bottom:1px solid var(--line)}
.sheet-head b{display:block;font-family:'Fraunces',serif;font-size:18px;font-weight:600;line-height:1.2}
.sheet-where{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--brass)}
.sheet-all{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--green);text-decoration:none}
.sheet-all:hover{text-decoration:underline}
.sheet-list{display:flex;flex-direction:column;padding:8px 10px 0}
.sheet-list a{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:12px;
  text-decoration:none;color:var(--ink);min-height:48px;transition:.14s}
.sheet-list a:hover{background:var(--tint2)}
.sheet-list a[aria-current="page"]{background:var(--tint);box-shadow:inset 0 0 0 1px #CBE0D2}
.sheet-list .no{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;
  font-family:'Fraunces',serif;font-size:12.5px;font-weight:600;color:var(--brass);
  border:1px solid #E2D3B0;border-radius:8px;background:var(--brass-tint)}
.sheet-list a[aria-current="page"] .no{border-color:var(--green);color:var(--green);background:#fff}
.sheet-list .ttl{flex:1;font-size:14.5px;font-weight:500;line-height:1.35}
.sheet-list .tick{flex:0 0 auto;color:var(--green);font-weight:700;opacity:0;transition:opacity .15s}
.sheet-list a.is-done .tick{opacity:1}
.sheet-list a.is-done .ttl{color:var(--muted)}
body.sheet-open{overflow:hidden}
@keyframes sheet-slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}


/* ===== the tool guide =====
   A tool page is reached cold — months after the lesson, or having never read
   one. Two blocks, identical on every tool: how to use it, above anything you
   can press; and what every number means, below the thing it describes. */

.toolguide{margin:26px 0;padding:22px 24px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
.toolguide h2{font-family:'Fraunces',serif;font-size:19px;font-weight:600;letter-spacing:-.01em}
/* The guide is a <details>: open on a laptop, folded to its one-line heading on
   a phone, where 500px of instructions sat between the title and the first
   control of the thing they explain. The marker only appears where it can do
   something. */
.toolguide > summary{list-style:none;cursor:default}
.toolguide > summary::-webkit-details-marker{display:none}
.toolguide > summary h2{display:inline}
@media (max-width:760px){
  /* A thing you tap needs to be big enough to tap: 44px is the size a thumb
     actually hits, and this heading was rendering at 26. */
  .toolguide > summary{cursor:pointer;display:flex;align-items:center;gap:10px;
    min-height:44px;margin:-6px 0}
  .toolguide > summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-left:auto;
    border-right:2px solid var(--green);border-bottom:2px solid var(--green);
    transform:rotate(45deg);transition:transform .18s}
  .toolguide[open] > summary::after{transform:rotate(-135deg)}
  .toolguide[open] > summary{margin-bottom:2px}
}
.toolguide h3{font-family:'Fraunces',serif;font-size:16.5px;font-weight:600;margin-top:26px;
  padding-top:18px;border-top:1px solid var(--line)}
.toolguide .tg-sub{margin-top:5px;font-size:14px;color:var(--muted);line-height:1.5;max-width:68ch}

/* --- how to use it --- */
.tg-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tg-steps li{display:flex;gap:12px;align-items:flex-start}
.tg-steps .n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:#fff;background:var(--green)}
.tg-steps .tx{font-size:14.5px;line-height:1.5;color:var(--ink)}
.tg-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}

/* --- the first time on a tool: the same steps as a sheet (site.js) ---
   From the bottom on a phone, centred on a wide screen. One column of steps:
   the dropdown's grid would put two side by side in a 520px box. */
.howto{position:fixed;inset:0;z-index:920;display:flex;align-items:flex-end;justify-content:center}
.howto-scrim{position:absolute;inset:0;background:rgba(23,51,43,.42);animation:sheet-fade .2s ease}
.howto-body{position:relative;width:100%;max-width:520px;max-height:86vh;overflow-y:auto;
  background:var(--panel);border-radius:20px 20px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 44px -18px rgba(23,51,43,.5);animation:howto-rise .28s cubic-bezier(.2,.7,.2,1)}
.howto-body h2{font-family:'Fraunces',serif;font-size:20px;font-weight:600;letter-spacing:-.01em}
.howto-body .tg-steps{grid-template-columns:1fr;gap:12px}
.howto-ok{display:block;width:100%;min-height:48px;margin-top:20px;border:0;border-radius:99px;
  background:var(--green);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
@media (min-width:761px){
  .howto{align-items:center}
  .howto-body{border-radius:20px;padding:26px 26px 22px}
}
body.howto-open{overflow:hidden}
@keyframes howto-rise{from{transform:translateY(100%)}to{transform:none}}

/* --- what each number means --- */
.tg-glossary{background:var(--tint2)}
.tg-terms{margin:16px 0 0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tg-term{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tg-term dt{font-family:'Fraunces',serif;font-size:15.5px;font-weight:600;color:var(--green)}
.tg-term dd{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--ink)}
.tg-term dd.where{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.tg-term dd.where b{font-family:'Fraunces',serif;color:var(--brass);font-weight:600}
.tg-reads .tg-term{background:var(--brass-tint);border-color:#E2D3B0}
.tg-reads .tg-term dt{color:#7A5A1E}

@media (max-width:620px){
  .toolguide{padding:18px 16px;margin:20px 0}
  .tg-terms{grid-template-columns:1fr}
}


/* A checklist inside a scene: one tappable row per item. These were written
   with class names and no styles at all, so they rendered as bare 19px-tall
   buttons — narrower than a fingertip, on the one thing those two lessons
   actually ask the reader to do. */
.cklist{display:flex;flex-direction:column;gap:8px}
.ck{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;
  font-size:14.5px;line-height:1.35;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;min-height:46px;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ck:hover{border-color:var(--line-strong)}
.ckbox{flex:0 0 auto;position:relative;width:20px;height:20px;border-radius:6px;
  border:1.8px solid var(--line-strong);background:#fff;transition:.15s}
.ck.on{background:var(--tint);border-color:var(--green);color:var(--green);font-weight:600}
.ck.on .ckbox{background:var(--green);border-color:var(--green)}
.ck.on .ckbox::after{content:"";position:absolute;left:6.4px;top:2.4px;width:4.6px;height:10px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}

/* A segmented switch inside a scene's controls. */
.seg{display:inline-flex;gap:2px;padding:2px;margin-top:8px;background:var(--tint2);
  border:1px solid var(--line);border-radius:99px}
.seg button{font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;
  border:0;border-radius:99px;padding:7px 14px;min-height:34px;cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s}
.seg button:hover{color:var(--green)}
.seg button.on{background:var(--green);color:#fff}
@media (max-width:520px){.seg{width:100%}.seg button{flex:1;padding:7px 8px}}

/* The one segmented switch that lives in a tool's control column rather than
   in a scene's control row. That column is about 290px on a laptop and these
   two labels are short sentences, so an inline-flex row of nowrap buttons ran
   off the edge of the panel at every width. Equal halves, wrapping text. */
.money-seg{display:flex;width:100%;margin-top:6px}
.money-seg button{flex:1 1 0;min-width:0;white-space:normal;line-height:1.25;
  padding:8px 10px;text-align:center}

/* ---- a tool remembers what you typed (APP-BEHAVIOR R17) ----------------- */
/* The announcement has to be noticed and must not compete with the thing it
   sits above: one tonal line, the reset beside it, no colour of its own. */
.yours{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;
  margin-top:18px;padding:10px 14px;background:var(--tint2);border:1px solid var(--line);
  border-radius:10px;font-size:13.5px;color:var(--muted)}
.yours-tx{flex:1 1 auto}
.yours-reset{font:inherit;font-weight:600;color:var(--green);background:none;border:0;
  padding:4px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.yours-reset:hover{color:var(--ink)}

/* ---- keeping an answer (APP-BEHAVIOR R18) ------------------------------- */
/* A scene places its parts with `order` (head 1 … say 5), and the default for
   anything else is 0 — so the keep bar, appended by site.js, rendered ABOVE the
   scene's own heading on every tool that uses a scene. Anything added to a
   scene from now on needs its place in that sequence stated. */
.scene .sceneflag{order:6}
.scene .keepbar{order:7}
.keepbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:flex-end;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.keepbtn{font:inherit;font-size:14px;font-weight:600;color:var(--green);background:var(--tint);
  border:1px solid var(--line-strong);border-radius:9px;padding:8px 16px;cursor:pointer;
  transition:background .15s,border-color .15s}
.keepbtn:hover{background:var(--tint2);border-color:var(--green)}
.kept-tx{font-size:13.5px;color:var(--muted)}
.kept-link{font-size:13.5px;font-weight:600}

/* ---- the record itself, at /tools/kept --------------------------------- */
.kept-list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.kept-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--shadow)}
.kept-top{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;justify-content:space-between}
.kept-card h3{font-size:16.5px}
.kept-when{font-size:12.5px;color:var(--brass);font-weight:600;white-space:nowrap}
.kept-said{margin-top:8px;font-size:14.5px;line-height:1.55}
.kept-figs{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  display:grid;gap:4px 16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  font-size:13px;color:var(--muted)}
.kept-fig{display:flex;gap:8px;justify-content:space-between}
.kept-fig b{color:var(--ink);font-weight:600;white-space:nowrap}
.kept-foot{margin-top:12px;display:flex;gap:14px;align-items:center;justify-content:space-between}
.kept-again{font-size:13px;font-weight:600}
.kept-drop{font:inherit;font-size:13px;color:var(--muted);background:none;border:0;
  padding:2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kept-drop:hover{color:var(--coral)}
.kept-empty{margin-top:24px;padding:22px;background:var(--tint2);border:1px solid var(--line);
  border-radius:var(--r);font-size:15px;color:var(--muted);line-height:1.6}

/* ---- predict before reveal (EVIDENCE 2.2) ------------------------------- */
/* The body is veiled rather than hidden: the reader can see there is something
   there, which is the curiosity gap, but cannot read the answer off it, which
   is what makes the guess a guess. */
.scene.veiled .scene-body,
.scene.veiled .scene-controls,
.scene.veiled .scene-say{
  filter:blur(14px);opacity:.45;pointer-events:none;user-select:none;
  transition:filter .5s ease,opacity .5s ease}
.scene .scene-body,.scene .scene-controls,.scene .scene-say{transition:filter .5s ease,opacity .5s ease}
.predict{order:2;margin:0 20px 4px;padding:16px 18px;background:var(--tint2);
  border:1px solid var(--line);border-radius:11px}
.predict .pq{font-family:'Fraunces',serif;font-size:17px;font-weight:600;line-height:1.3}
.predict .phint{margin-top:4px;font-size:13px;color:var(--muted)}
.popts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.popts button{font:inherit;font-size:14px;font-weight:600;color:var(--green);
  background:var(--panel);border:1px solid var(--line-strong);border-radius:9px;
  padding:9px 14px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.popts button:hover{border-color:var(--green);transform:translateY(-1px)}
.predict.told .popts button{cursor:default;opacity:.5}
.predict.told .popts button:hover{transform:none;border-color:var(--line-strong)}
.predict.told .popts button.chosen{opacity:1;border-color:var(--green);background:var(--tint)}
.predict .pverdict{margin-top:12px;font-size:14.5px;line-height:1.55;display:none}
.predict.told .pverdict{display:block}
.predict .pverdict b{color:var(--green)}
.predict .pverdict.miss b{color:var(--coral)}

/* ---- the source strip (EVIDENCE 3, form 22) ----------------------------- */
.srcstrip{order:8;margin:0 20px 16px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);line-height:1.5}
.srcstrip b{color:var(--ink);font-weight:600}

/* ---- the rehearsal (TEACHING-KIT 24, APP-BEHAVIOR R20) ------------------ */
/* The banner is not a disclaimer in a corner. It sits above the thing it is
   about and never leaves, because what is withheld here is only WHICH fall
   this was — never that it is history. */
.replaybanner{order:1;margin:12px 20px 0;padding:10px 14px;border-radius:10px;
  background:var(--tint2);border:1px solid var(--line);font-size:12.5px;
  line-height:1.55;color:var(--muted)}
.replaybanner b{color:var(--ink);font-weight:600}
.fallbar{order:5;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
  justify-content:space-between;padding:14px 20px;border-top:1px solid var(--line)}
.fallnums{display:flex;gap:26px;flex-wrap:wrap}
.fallnums .fl{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.fallnums b{font-family:'Fraunces',serif;font-size:22px;font-weight:600;
  font-variant-numeric:tabular-nums;transition:color .3s}
.fallnums b.down{color:var(--coral)}
.fallctl{display:flex;gap:10px}
.fbtn{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:9px;
  padding:10px 18px;border:1px solid var(--line-strong);background:var(--panel);
  color:var(--green);transition:transform .15s,background .15s,border-color .15s}
.fbtn:hover{transform:translateY(-1px);border-color:var(--green)}
.fbtn.go{background:var(--green);border-color:var(--green);color:#fff}
.fbtn.go:hover{background:var(--green-soft)}
.fallask{order:6;margin:0 20px 16px;padding:16px 18px;border-radius:11px;
  background:var(--coral-tint);border:1px solid #E8C8B8;
  animation:askIn .45s cubic-bezier(.22,.8,.2,1)}
@keyframes askIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fallask .aq{font-family:'Fraunces',serif;font-size:18px;font-weight:600;line-height:1.35}
.aopts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.fbtn.sell{border-color:var(--coral);color:var(--coral)}
.fbtn.sell:hover{background:var(--coral);color:#fff}
.fbtn.hold{border-color:var(--green);background:var(--green);color:#fff}
@media (prefers-reduced-motion: reduce){.fallask{animation:none}}

/* ---- a named suggestion, disclosed before it is made -------------------- */
/* Not a footnote. The owner's instruction was that naming a provider carries
   its disclosure as part of the lesson, so it sits above the section it is
   about and is styled to be read rather than skipped. */
.suggestbox{margin:22px 0 0;padding:16px 20px;background:var(--brass-tint);
  border:1px solid #E3CFA0;border-radius:var(--r);font-size:14.5px;line-height:1.6}
.suggestbox p+p{margin-top:8px}
.suggestbox b{color:#7A5A1E}

/* ---- the tool this lesson prepares (EVIDENCE 1.1) ---------------------- */
/* Financial education decays with distance from the decision, and the Tools
   are the part opened AT the decision. So a lesson that works something out
   ends by handing the reader the thing they will actually use, rather than
   leaving the calculation as the last word. */
.toolnote{display:flex;align-items:center;gap:16px;margin:26px 0 0;padding:18px 20px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);
  box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s,border-color .18s}
a.toolnote:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--green)}
.toolnote .tn-ico{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:var(--tint);
  display:flex;align-items:center;justify-content:center}
.toolnote .tn-ico svg{width:23px;height:23px;stroke:var(--green);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.toolnote .tn-t{min-width:0;flex:1}
.toolnote .tn-t b{display:block;font-family:'Fraunces',serif;font-size:16.5px;font-weight:600}
/* NOT `.tn-t span` — that is three classes of specificity and it beats the
   single-class `.es{display:none}` that switches language, so both languages
   rendered at once. Any rule that sets `display` on a bare descendant span can
   defeat the switch; this one is a class of its own for that reason. */
.toolnote .tn-t .tn-b{display:block;margin-top:3px;font-size:14px;color:var(--muted);line-height:1.5}
.toolnote .tn-go{flex:0 0 auto;font-size:20px;color:var(--green)}
@media (max-width:560px){
  .toolnote{gap:13px;padding:15px 16px}
  .toolnote .tn-t b{font-size:15.5px}
  .toolnote .tn-t .tn-b{font-size:13.5px}
}

/* ---- motion kit: the teaching forms' moves (graph.js KGraph.forms) --------
   FROM the graphics/motion surface's effects/forms/forms.css, reduced to the
   moves the DK_FORMS builders use and changed in three ways:
     · the resting state is the FINISHED picture. Nothing is hidden unless an
       svg has been staged (.fm), so a page without graph.js, a drawing never
       staged, and reduced motion (the global rule above) all show it whole
     · a staged svg waits paused on its first frame (.fm), plays (.fm.f-go)
       and then rests finished for good (.fm.f-rest) — entrance only
     · no looping runner (f-spin): motion that shows no change is left out
   The language switch is the page's own body[data-lang] rule, not html[lang].
   Parts carry --i, a slot: each slot starts --f-step after the one before, so
   ORDER is written by the builder, not here. */
.fm{--f-at:.15s; --f-step:.45s}
.fm [style*="--i"]{--f-t:calc(var(--f-at) + var(--i, 0) * var(--f-step))}
.fm .f-in{animation:f-arrive .6s cubic-bezier(.2,.7,.2,1) var(--f-t) backwards}
/* a box holding HTML (foreignObject) only fades: WebKit draws foreignObject
   content in the wrong place while an ancestor is transformed */
.fm .f-in.f-fade{animation-name:f-fade}
.fm .f-line{stroke-dasharray:1; stroke-dashoffset:0;
  animation:f-draw var(--f-dur, .6s) cubic-bezier(.45,0,.3,1) var(--f-t) backwards}
.fm .f-head{animation:f-fade .2s linear calc(var(--f-t) + var(--f-dur, .6s)) backwards}
.fm .f-pop{transform-box:fill-box; transform-origin:center;
  animation:f-pop .7s cubic-bezier(.2,.8,.3,1.2) var(--f-t) backwards}
/* a bar grows from its own real zero: the left edge (f-grow) or the floor
   (f-grow.f-up). Never from the middle — a bar that opens both ways shows
   values it never had. */
.fm .f-grow{transform-box:fill-box; transform-origin:left center;
  animation:f-grow-x .7s cubic-bezier(.2,.7,.2,1) var(--f-t) backwards}
.fm .f-grow.f-up{transform-origin:center bottom; animation-name:f-grow-y}
.fm:not(.f-go) *{animation-play-state:paused}
.fm.f-rest *{animation:none!important}
@keyframes f-arrive{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes f-fade{from{opacity:0}}
@keyframes f-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@keyframes f-grow-x{from{transform:scaleX(0)}}
@keyframes f-grow-y{from{transform:scaleY(0)}}
@keyframes f-pop{0%{opacity:0; transform:scale(.6)} 70%{opacity:1; transform:scale(1.06)} 100%{opacity:1; transform:scale(1)}}

/* Your hours, step 4: the answer, under the drawing that leads to it — HTML so
   it can count up (graph.js counter) without the label fitter refitting a chart
   on every frame. */
.realhour{margin:6px auto 0;max-width:600px;background:var(--tint);border:1.8px solid var(--green);
  border-radius:12px;padding:12px 16px;text-align:center}
.realhour .k{font-size:13px;color:var(--muted)}
.realhour .n{font-family:'Fraunces',serif;font-size:28px;font-weight:600;color:var(--green);
  font-variant-numeric:tabular-nums;margin-top:2px}

/* "Take it with you" — the card at a lesson's end, written by scripts/track.mjs
   from its TAKE list. The rule large, then three rows a thumb can hit. */
.take{margin:44px auto 0;max-width:620px;background:var(--panel);border:1.5px solid var(--green);border-radius:16px;padding:18px 18px 8px;box-shadow:var(--shadow)}
.take-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.take-rule{display:flex;gap:12px;align-items:flex-start;margin:10px 0 8px;font-family:'Fraunces',serif;font-weight:600;font-size:21px;line-height:1.3;color:var(--green);text-wrap:pretty}
.take-ico{flex:0 0 36px;height:36px;border-radius:50%;background:var(--tint);display:grid;place-items:center}
.take-ico svg{width:20px;height:20px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.take-rule .take-ico{background:var(--brass-tint)}
.take-rule .take-ico svg{stroke:var(--brass)}
.take-row{display:flex;gap:12px;align-items:center;padding:12px 2px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:56px}
a.take-row:hover b{color:var(--green);text-decoration:underline}
.take-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.take-lbl{font-size:12px;color:var(--muted)}
.take-txt b{font-weight:600;font-size:15.5px}
.take-why{font-size:14px;color:var(--muted)}
.take-go{flex:0 0 auto;color:var(--green);font-weight:700;font-size:18px}
.take-lock{margin-left:8px;font-size:11px;font-weight:600;color:var(--brass);background:var(--brass-tint);border-radius:99px;padding:3px 9px}
.take-row.toward b{color:var(--green)}
@media (max-width:480px){.take{padding:16px 14px 6px}.take-rule{font-size:19px}}
/* "Taught in" under a tool's heading — scripts/track.mjs, TOOL_LESSONS */
.taught-in{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.taught-in .ti-lbl{width:100%;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.taught-in a{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-height:44px;align-content:center;padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}
.taught-in a:hover{border-color:var(--green)}
.taught-in a b{font-weight:600;color:var(--green)}
.taught-in .ti-where{font-size:12.5px;color:var(--muted)}
.taught-in .take-lock{margin-left:0}
/* The same line inside a lesson, where it leans on an idea taught later (R0c) */
.taught-in.later{margin:18px 0 22px}

/* ---- "Tell us how it was" — the member feedback card (APP-BEHAVIOR §6d.2).
   Under the done button, quieter than "Take it with you": a thin line, no
   heavy border, so it never reads as a gate in front of Next. ---- */
.fb{margin:16px auto 0;max-width:620px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);animation:fb-in .28s ease-out}
.fb[hidden],.fb [hidden]{display:none}
@keyframes fb-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fb{animation:none}}
.fb-q{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:17px;line-height:1.3;color:var(--ink);margin:0 0 10px}
.fb-more .fb-q{margin-top:16px}
.fb-faces{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fb-faces button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:8px 6px;font:inherit;font-size:14px;font-weight:600;color:var(--green);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:.15s}
.fb-faces svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fb-faces button:hover{border-color:var(--green-soft)}
.fb-faces button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px}
.fb-chips button{font:inherit;font-size:14px;line-height:1.3;text-align:left;padding:8px 12px;min-height:40px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:99px;cursor:pointer;transition:.15s}
.fb-chips button b{color:var(--brass);font-variant-numeric:tabular-nums}
.fb-chips button[aria-pressed="true"]{background:var(--brass-tint);border-color:var(--brass)}
.fb textarea{display:block;width:100%;font:inherit;font-size:16px;line-height:1.45;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;resize:vertical;min-height:64px}
.fb textarea:focus{outline:none;border-color:var(--green)}
.fb-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.fb-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fb-send{font:inherit;font-weight:600;font-size:15px;padding:9px 20px;min-height:42px;border-radius:99px;border:none;background:var(--green);color:#fff;cursor:pointer}
.fb-done{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:15.5px;color:var(--ink)}
.fb-tick{width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--green);display:grid;place-items:center;font-weight:700;font-size:13px}
.fb-change{margin-left:auto;font:inherit;font-size:14px;font-weight:600;color:var(--green);background:none;border:none;padding:8px 4px;min-height:40px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fb-err{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--coral)}