/* Compound Daily — light, reading-first. Course map + one reading column. */
:root{
  color-scheme:light;
  --paper:#FAFBF8;--card:#FFFFFF;--ink:#16211C;--soft:#56655D;--faint:#8A978F;--rule:#E1E7E2;
  --money:#0B7A55;--money-wash:#E4F3EB;--gold:#B56F0E;--gold-wash:#FCF1DE;--clip:#FFFBF2;--clip-line:#EFE2C8;--red:#B23A2E;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --read:"Newsreader",Georgia,"Times New Roman",serif;
  --ui:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.7 var(--read);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 64px}
a{color:var(--money)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--money);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto}

/* masthead */
.mast{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding:22px 0 18px;border-bottom:1px solid var(--rule)}
.brand{font:800 26px/1 var(--display);letter-spacing:-.03em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand .mark{width:30px;height:30px;flex:none}
.brand span{color:var(--money)}
.mastnav{display:flex;gap:18px;font:500 14px var(--ui)}
.mastnav a{color:var(--soft);text-decoration:none}
.mastnav a:hover{color:var(--ink)}

/* home */
.hero{padding:56px 0 40px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:end}
.hero h1{font:800 clamp(40px,6.5vw,76px)/.98 var(--display);letter-spacing:-.045em;margin:0 0 18px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--money)}
.hero p{font-size:20px;color:var(--soft);margin:0;max-width:34ch}
.counter{display:flex;gap:28px;margin-top:22px;font-family:var(--ui)}
.counter b{display:block;font:700 28px/1 var(--display);font-variant-numeric:tabular-nums}
.counter span{font-size:13px;color:var(--soft)}
.latest{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:24px;transition:border-color .2s,transform .2s}
.latest:hover{border-color:var(--money);transform:translateY(-2px)}
.latest .lbl{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--money)}
.latest h2{font:800 32px/1.05 var(--display);letter-spacing:-.03em;margin:10px 0 10px}
.latest p{font:italic 18px/1.5 var(--read);color:var(--soft);margin:0 0 16px}
.latest .yr{display:inline-flex;gap:8px;align-items:baseline;font:500 14px var(--ui);background:var(--gold-wash);color:#7A4A08;border-radius:8px;padding:6px 10px}
.latest .yr b{font:800 18px var(--display)}
.how-unused{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin:8px 0 48px;font-family:var(--ui)}
.how div{background:var(--card);padding:18px 20px}
.how b{display:flex;align-items:center;gap:8px;font:700 17px var(--display)}
.how p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--soft)}
.arch h2{font:800 30px var(--display);letter-spacing:-.025em;margin:0 0 6px}
.week{margin:26px 0 0}
.week h3{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 8px;display:flex;align-items:center;gap:10px}
.week h3::after{content:"";flex:1;height:1px;background:var(--rule)}
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.lr{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;font-family:var(--ui);transition:border-color .2s}
.lr:hover{border-color:var(--ink)}
.lr b{display:block;font:600 16px/1.3 var(--display)}
.lr span{display:block;font-size:13px;color:var(--soft);margin-top:3px}
.lr .slot{margin-top:6px}
.lr.done b::after{content:" ✓";color:var(--money)}

.slot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.s-morning{border:2px solid var(--gold);background:#fff}
.s-lunch{background:var(--gold)}
.s-evening{background:var(--ink)}
.s-intro,.s-extra{background:var(--money)}

/* lesson page */
.lesson{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;padding-top:28px;align-items:start}
nav.map{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;font-family:var(--ui)}
.map h4{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:18px 0 6px}
.map h4:first-child{margin-top:0}
.map a{display:grid;grid-template-columns:22px 10px minmax(0,1fr);gap:10px;align-items:center;padding:7px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.35}
.map a:hover{background:#EEF2EF}
.map a[aria-current="page"]{background:var(--money-wash);font-weight:500}
.map a.done span::after{content:" ✓";color:var(--money)}
article{min-width:0;max-width:760px}
.eyebrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font:500 13px var(--ui);color:var(--soft)}
.chip{display:inline-flex;align-items:center;gap:6px;background:#EEF2EF;border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--ink)}
h1.title{font:800 clamp(34px,5vw,52px)/1.02 var(--display);letter-spacing:-.035em;margin:12px 0 22px;text-wrap:balance}
.hook{font:italic 400 clamp(21px,2.4vw,25px)/1.45 var(--read);margin:0 0 28px;padding:4px 0 4px 22px;border-left:3px solid var(--gold);text-wrap:pretty}
.facts{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin:0 0 28px}
.facts div{background:var(--card);padding:14px 16px;flex:1 1 160px}
.facts b{display:block;font:700 26px/1.1 var(--display);letter-spacing:-.02em;color:var(--money);font-variant-numeric:tabular-nums}
.facts span{display:block;font:400 13.5px/1.4 var(--ui);color:var(--soft);margin-top:4px}
.sec{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:40px 0 12px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--rule)}
.visual{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:18px}
.visual iframe{width:100%;border:0;display:block;min-height:260px}
.prose p{margin:0 0 16px}
.prose h3{font:700 22px/1.25 var(--display);letter-spacing:-.015em;margin:30px 0 8px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose code{font:15px var(--mono);background:#EEF2EF;padding:1px 6px;border-radius:5px}
.prose table{border-collapse:collapse;font:15px/1.5 var(--ui);font-variant-numeric:tabular-nums;min-width:100%}
.prose th{font-weight:500;color:var(--soft);text-align:left;border-bottom:1px solid var(--ink);padding:6px 12px 6px 0}
.prose td{border-bottom:1px solid var(--rule);padding:8px 12px 8px 0}
.tw{overflow-x:auto;margin:0 0 16px}
.story{background:var(--clip);border:1px solid var(--clip-line);border-radius:14px;padding:22px 24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px}
.story .yr{font:800 46px/1 var(--display);letter-spacing:-.04em;color:var(--gold)}
.story h4{font:700 21px/1.25 var(--display);letter-spacing:-.01em;margin:2px 0 6px}
.story p{margin:0 0 12px;font-size:17px}
.story .take{font:500 15px/1.5 var(--ui);background:var(--gold-wash);border-radius:8px;padding:10px 12px;margin-top:4px}
.story .src{font:400 13px var(--ui);color:var(--soft);margin-top:10px}
.watch{display:flex;gap:16px;align-items:center;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:14px 16px;transition:border-color .2s,transform .2s}
.watch:hover{border-color:var(--red);transform:translateY(-1px)}
.play{flex:none;width:56px;height:40px;border-radius:10px;background:var(--red);display:grid;place-items:center}
.play::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.watch b{display:block;font:500 16px/1.35 var(--ui)}
.watch span{display:block;font:400 13.5px/1.4 var(--ui);color:var(--soft);margin-top:2px}
.flip{background:var(--ink);color:#F3F6F4;border-radius:14px;padding:22px 24px;font-family:var(--ui)}
.flip .q{font:500 19px/1.45 var(--ui);margin:0 0 14px}
.flip .a{font:400 16px/1.6 var(--ui);color:#CFE7DB;margin:14px 0 0;border-top:1px solid #33433B;padding-top:14px}
.flip button{background:#F3F6F4;color:var(--ink);border:0;border-radius:8px;padding:8px 14px;font:500 14px var(--ui);cursor:pointer}
.foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--ui)}
.learn{background:var(--money);color:#fff;border:0;border-radius:10px;padding:11px 18px;font:500 15px var(--ui);cursor:pointer}
.learn.done{background:var(--money-wash);color:var(--money)}
.pg{display:flex;gap:10px;flex-wrap:wrap}
.pg a{border:1px solid var(--rule);border-radius:10px;padding:9px 14px;font-size:14px;color:var(--ink);text-decoration:none;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg a:hover{border-color:var(--ink)}
.disclaimer{font:400 13.5px/1.5 var(--ui);color:var(--soft);margin-top:28px}

footer.site{margin-top:64px;padding-top:20px;border-top:1px solid var(--rule);font:400 14px/1.6 var(--ui);color:var(--soft);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer.site a{color:var(--soft)}

.mapbtn{display:none}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:36px 0 28px;gap:24px}
  .how-unused{grid-template-columns:1fr}
  .lesson{grid-template-columns:1fr;gap:16px}
  nav.map{position:static;max-height:none}
  nav.map .list{display:none}
  nav.map.open .list{display:block}
  .mapbtn{display:flex;width:100%;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:11px 14px;font:500 15px var(--ui);color:var(--ink);cursor:pointer}
  body{font-size:17px}
}
@media (max-width:560px){.story{grid-template-columns:1fr}.story .yr{font-size:36px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* calls to action */
.slots{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font:500 15px var(--ui);color:var(--soft)}
.slots span{display:inline-flex;align-items:center;gap:8px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 16px var(--ui);text-decoration:none;border-radius:12px;padding:13px 20px;transition:transform .15s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn.tg{background:var(--money);color:#fff}
.btn.tg::before{content:"";width:18px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.8.8l-4.8-3.6-2.3 2.2c-.3.3-.5.5-1 .5l.3-4.9 8.9-8c.4-.3-.1-.5-.6-.2l-11 6.9-4.7-1.5c-1-.3-1-1 .2-1.5L20.5 3c.9-.3 1.6.2 1.4 1.3z'/%3E%3C/svg%3E")}
.btn.ghost{border:1px solid var(--rule);color:var(--ink);background:var(--card)}
.btn.ghost:hover{border-color:var(--ink)}
.tgband{margin-top:48px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;background:var(--money-wash);border-radius:16px;padding:20px 24px;font-family:var(--ui)}
.tgband b{display:block;font:700 19px var(--display);letter-spacing:-.01em}
.tgband span{display:block;font-size:14.5px;color:var(--soft);margin-top:2px}

/* home: intro on the left, latest lesson (with live visual) on the right */
.top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start;padding:44px 0 56px}
.hero{display:block;padding:12px 0 0}
.hero h1{font-size:clamp(40px,4.6vw,60px);max-width:12ch}
.hero p{font-size:19px;max-width:44ch}
.slots{flex-direction:column;gap:8px}
.feature{display:flex;flex-direction:column;gap:16px;background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:24px}
.feature .lbl{display:flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--money)}
.feature h2{font:800 32px/1.06 var(--display);letter-spacing:-.03em;margin:10px 0 10px;text-wrap:balance}
.feature h2 a{color:var(--ink);text-decoration:none}
.feature h2 a:hover{color:var(--money)}
.fhook{font:italic 400 18px/1.5 var(--read);color:var(--ink);margin:0 0 14px;padding-left:16px;border-left:3px solid var(--gold)}
.fstory{display:flex;gap:10px;align-items:baseline;background:var(--gold-wash);border-radius:10px;padding:10px 14px;font-family:var(--ui)}
.fstory b{font:800 22px var(--display);color:var(--gold);letter-spacing:-.02em}
.fstory span{font:500 15px/1.4 var(--ui);color:#7A4A08}
.fvis{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:12px}
.fvis iframe{width:100%;border:0;display:block;min-height:280px}
.readmore{align-self:flex-start;font:600 15px var(--ui);color:var(--money);text-decoration:none}
.readmore:hover{text-decoration:underline}
@media (max-width:860px){.top{grid-template-columns:1fr;gap:24px;padding:28px 0 40px}.hero{padding:0}.fvis{display:none}.feature{padding:20px}}

/* lesson numbers */
.num{font:500 12.5px var(--mono);font-style:normal;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.map a[aria-current="page"] .num{color:var(--money)}
.lr .num{font-size:15px;color:var(--money);text-align:left;padding-top:1px}
.lr span .slot{margin-right:6px;vertical-align:1px;width:8px;height:8px}
.lno{font:500 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--money)}

/* collapsible week groups */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.week{margin:14px 0 0;border-top:1px solid var(--rule)}
.week>summary{display:flex;align-items:baseline;gap:12px;padding:14px 0;font-family:var(--ui)}
.week>summary .wk{font:700 19px var(--display);letter-spacing:-.01em;color:var(--ink)}
.week>summary .wn{font:500 12px var(--mono);letter-spacing:.04em;color:var(--faint)}
.week>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg);transition:transform .2s;align-self:center}
.week[open]>summary::after{transform:rotate(-135deg)}
.week>summary:hover .wk{color:var(--money)}
.week .rows{padding:2px 0 18px}
.grp{margin:0 0 4px}
.grp>summary{display:flex;align-items:center;gap:8px;font:600 13.5px/1.3 var(--ui);color:var(--soft);padding:8px 10px;border-radius:8px}
.grp>summary:hover{background:#EEF2EF;color:var(--ink)}
.grp>summary span{flex:1;min-width:0}
.grp>summary em{font:500 12px var(--mono);font-style:normal;color:var(--faint)}
.grp>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.grp[open]>summary::after{transform:rotate(45deg)}
.grp[open]>summary{color:var(--ink)}

/* cash check */
.cash{max-width:560px;margin:0 auto;padding:56px 0 8px;display:flex;flex-direction:column;gap:24px;font-family:var(--ui)}
.cash h1{font:800 clamp(34px,5vw,46px)/1.04 var(--display);letter-spacing:-.04em;margin:0;text-align:center;text-wrap:balance}
.cc-row{display:flex;flex-wrap:wrap;gap:12px}
.cc-field{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--soft)}
.cc-field select,.cc-input{height:52px;border:1px solid #C9D3CC;border-radius:12px;background:var(--card);font:600 17px var(--ui);color:var(--ink)}
.cc-field select{padding:0 12px}
.cc-input{display:flex;align-items:center;gap:6px;padding:0 14px}
.cc-input input{flex:1;min-width:0;border:0;background:transparent;font:700 20px var(--ui);color:var(--ink);outline:none}
.cc-input:focus-within,.cc-field select:focus{outline:2px solid var(--money);outline-offset:1px}
#cc-sym,.cc-unit{font:600 18px var(--ui);color:var(--soft)}
.cc-ratebox{display:flex;flex-direction:column;gap:8px}
.cc-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--faint)}
#cc-chips{display:contents}
.chip{border:1px solid var(--rule);background:var(--card);color:var(--soft);border-radius:999px;padding:6px 12px;min-height:32px;cursor:pointer;font:500 13px var(--ui)}
.chip:hover{border-color:var(--ink)}
.chip.on{border-color:var(--money);background:var(--money-wash);color:#085A40}
.cc-result{text-align:center;padding:8px 0 0}
.cc-big{font:800 clamp(52px,10vw,72px)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.cc-verb{font-weight:600;font-size:18px;margin-top:6px}
.cc-result.lose .cc-big,.cc-result.lose .cc-verb{color:var(--red)}
.cc-result.gain .cc-big,.cc-result.gain .cc-verb{color:var(--money)}
.cc-line{margin:16px auto 0;max-width:440px;font:400 19px/1.5 var(--read);color:var(--soft)}
.cc-line b{color:var(--ink)}
.cc-learn{align-self:center;font-weight:600;font-size:15px;text-decoration:none;color:var(--money)}
.cc-learn:hover{text-decoration:underline}
.cc-fine{margin:4px 0 0;text-align:center;font-size:12px;line-height:1.6;color:var(--faint)}
.cc-fine a{color:var(--faint)}
.cc-ratebox .cc-field{flex:none}