/* =====================================================================
   Inner pages — the curriculum and the setup checklist (v4, watercolor)
   ===================================================================== */
.page-hero{padding:calc(var(--nav-h) + clamp(36px,5vw,72px)) 0 clamp(36px,4.5vw,60px);position:relative;overflow:hidden;isolation:isolate}
.page-hero::before,.page-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:url(#wcf)}
.page-hero::before{right:-80px;top:40px;width:360px;height:280px;background:var(--gold);opacity:.28}
.page-hero::after{left:-120px;bottom:-140px;width:380px;height:300px;background:var(--blue);opacity:.22}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:end}
@media (max-width:960px){.ph-grid{grid-template-columns:minmax(0,1fr)}}
.display{font-size:clamp(38px,4.6vw,60px);line-height:1.05;letter-spacing:-.018em;margin:16px 0 0;color:var(--ink)}
.display em{font-style:italic}
.page-hero .lede{margin-top:20px}
.page-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.facts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line2);border-radius:16px;background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.facts li{padding:16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.facts li:nth-child(2n){border-right:none}
.facts li:nth-last-child(-n+2){border-bottom:none}
.facts b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);color:var(--ink);line-height:1}
.facts b.sm{font-size:17px;line-height:1.25;padding-top:4px}
.facts span{font-size:12px;color:var(--muted)}

.sec.tight{padding:clamp(36px,4.4vw,60px) 0}
.callout{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:clamp(20px,3vw,34px);box-shadow:var(--shadow);position:relative}
.callout h2,.callout h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:10px;line-height:1.2}
.callout h2 em,.callout h3 em{font-style:italic}
.callout p{margin-bottom:12px;max-width:70ch;font-size:16px}
.callout.accent{border-left:5px solid var(--gold)}
.callout.mint{border-left:5px solid var(--mint)}
.callout ul.plain{list-style:none;margin-top:6px}
.callout ul.plain li{position:relative;padding-left:22px;margin-bottom:9px;max-width:70ch;font-size:16px}
.callout ul.plain li::before{content:"";position:absolute;left:3px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--mint);filter:url(#wcf)}
.who{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(22px,4vw,50px)}
@media (max-width:900px){.who{grid-template-columns:minmax(0,1fr)}}
.who .aside{background:var(--paper);border:1px dashed var(--line2);border-radius:14px;padding:20px 20px 16px;align-self:start}
.who .aside .ah{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink);display:block;margin-bottom:10px}
.who .aside ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.who .aside li{position:relative;padding-left:28px;font-size:15px;line-height:1.5}
.who .aside li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:6px;background:var(--mint);opacity:.8;filter:url(#wcf)}
.who .aside li::after{content:"";position:absolute;left:5px;top:6px;width:8px;height:4px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-48deg)}

/* the outcomes: each line gets a painted tick as it scrolls past */
.checklist{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
@media (max-width:800px){.checklist{grid-template-columns:minmax(0,1fr)}}
.checklist li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.5;color:var(--ink2);
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px;transition:border-color .4s,background .4s}
.checklist li svg{width:28px;height:28px;overflow:visible}
.checklist li svg .bx{fill:var(--paper);stroke:var(--line2);stroke-width:1.5;transition:fill .5s,stroke .5s}
.checklist li svg .ck{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s var(--ease) .15s}
.checklist li.ticked{border-color:rgba(52,126,96,.35)}
.checklist li.ticked svg .bx{fill:var(--mint);stroke:transparent;filter:url(#wcf)}
.checklist li.ticked svg .ck{stroke-dashoffset:0}

/* the level cards, as on the homepage */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:960px){.ladder{grid-template-columns:minmax(0,1fr);max-width:560px}}
.rung{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 12px 18px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s}
.rung:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.rung > *:not(.rung-anim){margin-left:8px;margin-right:8px}
.rung-anim{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-bottom:8px}
.rung-anim svg{width:100%;height:auto;aspect-ratio:320/150}
.rung-cap{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);margin-top:-2px}
.rung-head{display:flex;align-items:center;gap:10px;margin-top:6px}
.badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:18px;color:var(--ink);flex:none;position:relative;isolation:isolate}
.badge::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lc);opacity:.85;z-index:-1;filter:url(#wcf)}
.rung h3{font-size:26px;line-height:1}
.rung-head .tag{margin-left:auto}
.rung-sub{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink2)}
.rung ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.rung li{font-size:14.5px;padding-left:16px;position:relative;line-height:1.5}
.rung li::before{content:"";position:absolute;left:1px;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--lc)}
.chips2{display:flex;flex-wrap:wrap;gap:6px}
.chips2 span{font-size:12px;color:var(--ink2);background:var(--lw,var(--paper2));border-radius:7px;padding:3px 9px}
.outcome{margin-top:auto!important;border-top:1px solid var(--line);padding-top:10px;font-size:14px;line-height:1.5;color:var(--ink2)}
.outcome b{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.anim text{font-family:var(--sans);font-size:9px;fill:var(--muted)}

/* ================= the two days: a notebook page that fills as we read ================= */
.days-sec{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.day-switch{position:sticky;top:calc(var(--nav-h) + 80px);z-index:20;height:0}
.day-switch .ds{position:absolute;right:calc(100% + 30px);top:0;display:flex;flex-direction:column;gap:4px;padding:5px;border-radius:14px;background:rgba(255,254,251,.94);border:1px solid var(--line2);box-shadow:var(--shadow)}
.day-switch a{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:7px 14px;border-radius:10px;transition:all .25s;white-space:nowrap;text-align:center}
.day-switch a.on{background:var(--ink);color:var(--paper)}
@media (max-width:1240px){.day-switch{display:none}}
.day{margin-top:34px}
.day-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:0 0 14px 64px}
@media (max-width:640px){.day-head{padding-left:50px}}
.day-head h2{font-size:clamp(30px,3.4vw,42px)}
.day-head .meta{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.day-head .dsub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.8vw,21px);color:var(--ink2);margin-left:auto}
.track{position:relative;list-style:none;padding-left:64px}
@media (max-width:640px){.track{padding-left:50px}}
.track::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:4px;border-radius:4px;background:var(--paper3)}
@media (max-width:640px){.track::before{left:15px}}
.track .fill{position:absolute;left:21px;top:10px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--tc1),var(--tc2));height:calc(var(--p,0) * (100% - 20px));transition:height .15s linear;filter:url(#wcf)}
@media (max-width:640px){.track .fill{left:15px}}
#day1{--nc:var(--blue);--tc1:var(--blue);--tc2:var(--purple)}
#day2{--nc:var(--mint);--tc1:var(--purple);--tc2:var(--mint)}
.blk{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px 14px;margin-bottom:10px;box-shadow:var(--shadow);transition:border-color .35s,transform .35s var(--ease)}
.blk:hover{border-color:var(--line2);transform:translateX(4px)}
.blk .no{position:absolute;left:-64px;top:14px;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line2);display:grid;place-items:center;isolation:isolate;
  font-family:var(--serif);font-size:16px;color:var(--muted);transition:color .4s,border-color .4s,transform .45s var(--spring)}
.blk .no::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--nc);opacity:0;z-index:-1;filter:url(#wcf);transition:opacity .45s}
@media (max-width:640px){.blk .no{left:-50px;width:32px;height:32px;font-size:13px}}
.blk.passed .no{color:var(--ink);border-color:transparent;transform:scale(1.05)}
.blk.passed .no::before{opacity:.9}
.blk h3{font-size:clamp(19px,1.8vw,22px);margin-bottom:5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.blk p{font-size:15px;color:var(--ink2);max-width:72ch;line-height:1.6}
.blk code{font-family:var(--mono);font-size:.86em;color:var(--purpleD);background:var(--purpleW);border-radius:5px;padding:1px 6px}
.tasklist{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tk{font-size:12px;color:var(--ink2);background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:3px 9px}

.fmt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:860px){.fmt{grid-template-columns:minmax(0,1fr)}}
.fmt .card .ico{display:block;width:30px;height:30px;border-radius:50%;background:var(--c);opacity:.8;filter:url(#wcf)}
.fmt .card h3{font-size:20px;margin:10px 0 6px}
.fmt .card p{font-size:14.5px;line-height:1.6}

/* closing call to action */
.cta-band{text-align:center;padding:clamp(44px,5.5vw,76px) 0 clamp(52px,6vw,84px)}
.cta-band .ctal{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,36px);color:var(--ink);margin-bottom:18px}
.cta-band .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ================= the setup checklist ================= */
.setup-bar{position:sticky;top:var(--nav-h);z-index:120;background:rgba(250,249,245,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sb-in{max-width:880px;margin:0 auto;padding:9px var(--gutter);display:flex;align-items:center;gap:14px}
.ring{width:34px;height:34px;flex:none}
.ring circle{fill:none;stroke-width:4}
.ring .bg{stroke:var(--paper3)}
.ring .fg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s var(--ease),stroke .4s;transform:rotate(-90deg);transform-origin:center}
.setup-bar.all .ring .fg{stroke:var(--mint)}
.sb-txt{font-size:13px;color:var(--ink);font-weight:650;white-space:nowrap}
.sb-dots{display:flex;gap:6px;flex:1;justify-content:center}
.sb-dots a{width:26px;height:8px;border-radius:99px;background:var(--paper3);border:1px solid var(--line2);transition:background .35s,border-color .35s,width .35s var(--ease)}
.sb-dots a.done{background:var(--mint);border-color:var(--mint)}
.sb-dots a.cur{width:42px;border-color:var(--goldD)}
.sb-min{font-size:12px;color:var(--muted);white-space:nowrap}
@media (max-width:560px){.sb-dots{display:none}.sb-min{margin-left:auto}}

.steps6{list-style:none}
.st{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.8vw,30px);margin-bottom:14px;box-shadow:var(--shadow);position:relative;
  transition:border-color .4s,background .4s;scroll-margin-top:calc(var(--nav-h) + 70px)}
.st.done{border-color:rgba(52,126,96,.4);background:#fbfdfb}
.st-head{display:flex;align-items:flex-start;gap:14px}
.snum{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:20px;color:var(--ink);position:relative;isolation:isolate;transition:transform .45s var(--spring)}
.snum::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);opacity:.75;z-index:-1;filter:url(#wcf);transition:background .4s}
.st.done .snum{transform:scale(1.05)}
.st.done .snum::before{background:var(--mint)}
.st h2{font-size:clamp(22px,2.2vw,27px);line-height:1.2}
.st .why{font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--muted);margin-top:3px}
.st .body{margin-top:14px}
.st p{margin-bottom:12px;max-width:68ch;font-size:16px}
.st ul{list-style:none;margin:10px 0 14px}
.st li{position:relative;padding-left:20px;margin-bottom:8px;max-width:68ch;font-size:16px}
.st li::before{content:"";position:absolute;left:3px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.st .quiet{font-size:14.5px;color:var(--muted)}
code{font-family:var(--mono);font-size:.86em;background:var(--blueW);color:var(--blueD);border-radius:5px;padding:2px 6px}
kbd{font-family:var(--mono);font-size:.82em;background:var(--card);border:1px solid var(--line2);border-bottom-width:3px;border-radius:6px;padding:1px 6px;color:var(--ink)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:14px 0}
@media (max-width:720px){.two{grid-template-columns:minmax(0,1fr)}}
.opt{border:1px solid var(--line2);border-radius:14px;padding:16px 18px;background:var(--paper);transition:transform .3s var(--ease),border-color .3s}
.opt:hover{transform:translateY(-3px)}
.opt.lead{border-color:rgba(242,190,82,.8);background:#fffcf3}
.opt h3{font-size:19px;margin:6px 0 2px}
.opt ol{margin:10px 0 0 18px;font-size:14.5px}
.opt ol li{padding-left:2px;margin-bottom:6px;font-size:14.5px}
.opt ol li::before{display:none}
.check{margin-top:14px;border:1.5px dashed var(--mint);background:var(--mintW);border-radius:12px;padding:12px 16px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.check .ct{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--mintD);white-space:nowrap}
.check p{font-size:15px;margin:0;color:var(--ink2)}
.tick{display:inline-flex;align-items:center;gap:12px;margin-top:16px;cursor:pointer;user-select:none;font-size:13.5px;font-weight:600;color:var(--ink2);
  padding:8px 16px 8px 8px;border:1px solid var(--line2);border-radius:12px;background:var(--card);transition:all .25s}
.tick:hover{border-color:var(--ink);color:var(--ink)}
.tick .box{width:26px;height:26px;flex:none;border:1.5px solid var(--line2);border-radius:8px;display:grid;place-items:center;transition:all .25s;background:var(--paper);position:relative;isolation:isolate}
.tick .box::before{content:"";position:absolute;inset:-1.5px;border-radius:8px;background:var(--mint);opacity:0;z-index:-1;filter:url(#wcf);transition:opacity .3s}
.tick .box svg{width:17px;height:17px}
.tick .box path{stroke:var(--ink);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s var(--ease) .05s}
.st.done .tick{border-color:rgba(52,126,96,.5);color:var(--mintD);background:var(--mintW)}
.st.done .tick .box{border-color:transparent}
.st.done .tick .box::before{opacity:1}
.st.done .tick .box path{stroke-dashoffset:0}
.tree{font-family:var(--mono);font-size:13px;line-height:2;color:var(--ink2);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:12px 0;white-space:pre;overflow-x:auto}
.tree .dir{color:var(--purpleD);font-weight:600}
.tree .file{color:var(--mintD);font-weight:600}
.prompt{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0 10px;font-family:var(--mono);font-size:12.8px;line-height:1.75;color:var(--ink);white-space:pre-wrap}
.copybtn{font-size:12.5px;font-weight:600;color:var(--ink2);border:1px solid var(--line2);border-radius:10px;padding:8px 14px;background:var(--card);transition:all .2s}
.copybtn:hover{border-color:var(--ink)}
.copybtn.copied{background:var(--mintW);border-color:var(--mint);color:var(--mintD)}
.shots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:12px 0 16px;align-items:start}
@media (max-width:720px){.shots{grid-template-columns:minmax(0,1fr)}}
figure.shot{margin:0}
figure.shot button,figure.result button{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in}
figure.shot img,figure.result img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line2);box-shadow:0 10px 26px -18px rgba(24,25,24,.4);background:#fff;transition:transform .3s var(--ease),box-shadow .3s}
figure.shot button:hover img,figure.result button:hover img{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(24,25,24,.45)}
figure.shot figcaption{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
figure.shot figcaption b{color:var(--ink2)}
.applabel{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:20px 0 6px}
.applabel::after{content:"";flex:1;height:1px;background:var(--line)}
.applabel i{width:11px;height:11px;border-radius:50%;background:var(--coral);filter:url(#wcf)}
.applabel.mint i{background:var(--mint)}
figure.result{margin:20px 0 0}
figure.result figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.55;text-align:center}
.allset{display:none;text-align:center;border:1px solid rgba(52,126,96,.4);background:var(--mintW);border-radius:18px;padding:30px 22px;margin:6px 0 22px;position:relative;overflow:hidden;isolation:isolate}
.allset::before{content:"";position:absolute;right:-50px;top:-60px;width:220px;height:180px;border-radius:50%;background:var(--mint);opacity:.45;filter:url(#wcf);z-index:-1}
.allset.show{display:block;animation:allIn .8s var(--spring) both}
@keyframes allIn{from{opacity:0;transform:scale(.94) rotate(-1deg)}}
.allset .stampx{display:inline-block;font-family:var(--serif);font-style:italic;font-size:clamp(32px,4.4vw,46px);color:var(--mintD);transform:rotate(-3deg);border:2px solid var(--mintD);border-radius:14px;padding:4px 20px}
.allset p{margin-top:12px;color:var(--ink2)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:12px;height:12px;border-radius:50%;opacity:.85;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(var(--r))}}
.faq{border-top:1px solid var(--line);padding:2px 0}
.faq summary{font-weight:650;color:var(--ink);cursor:pointer;font-size:16.5px;list-style:none;display:flex;gap:12px;align-items:center;padding:13px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--ink2);font-weight:600;width:24px;height:24px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .3s}
.faq[open] summary::before{content:"–";background:var(--goldW)}
.faq p{padding:0 0 14px 36px;max-width:72ch;font-size:15.5px}
.divider{height:1px;background:var(--line);max-width:160px}

@media print{
  .setup-bar,.day-switch,.tick,.copybtn,.page-cta,.cta-band{display:none!important}
  .blk,.st,.callout,.rung{box-shadow:none;break-inside:avoid}
  .track::before,.track .fill{display:none}
  .page-hero::before,.page-hero::after{display:none}
}