/* home-modes.html: landing hero with the iPhone modes demo. Mockup only. No italics, no circles except round program logos and the pill dot. */
.modes em,.modes i,.modes cite{font-style:normal}
.mh{position:relative;isolation:isolate;overflow:hidden;padding:34px 0 64px}
.mbg{position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;background:var(--cream);overflow:hidden}
.mbg i{position:absolute;inset:0;background-size:cover;background-position:center 45%;opacity:0;transition:opacity 2.4s ease;animation:kb 22s ease-in-out infinite alternate}
.mbg i.on{opacity:1}
.mbg::after{content:"";position:absolute;inset:0;background:linear-gradient(98deg,rgba(250,246,238,.95) 0,rgba(250,246,238,.86) 36%,rgba(250,246,238,.6) 62%,rgba(250,246,238,.5) 100%),linear-gradient(180deg,rgba(250,246,238,0) 62%,var(--cream) 100%)}
.mwrap{max-width:1360px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr) 340px 330px;grid-template-rows:auto 1fr;column-gap:44px;align-items:start}
.mtop{grid-column:1;grid-row:1}
.mrest{grid-column:1;grid-row:2}
.mstage{grid-column:2;grid-row:1/3;position:relative}
.mwin{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;gap:12px;padding-top:10px}
.mpill{display:inline-flex;align-items:center;gap:10px;height:30px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,18,22,.16);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.mpill i{width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none;animation:mpulse 1.6s ease-in-out infinite}
@keyframes mpulse{0%,100%{transform:scale(.6);opacity:.75}50%{transform:scale(1.25);opacity:1}}
.mh h1{font-family:var(--serif);font-weight:400;font-size:60px;line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:18px 0 18px;max-width:600px}
.mh h1 .pk{color:var(--pink)}
.mprob{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.mprob li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;color:var(--ink)}
.mprob li b{flex:none;width:24px;height:24px;border-radius:7px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:15px;line-height:1}
.mprob strong{font-weight:800}
.msub{font-size:15.5px;line-height:1.55;color:var(--body);margin:20px 0 14px;max-width:560px}
.mtag{font-size:18px;line-height:1.35;font-weight:700;color:var(--ink);margin:0 0 18px}
.mctas{display:flex;gap:12px;flex-wrap:wrap}
.mctas .btn{height:52px;padding:0 24px;font-size:15px}
.mlogos{display:flex;align-items:center;margin-top:20px}
.mlogos img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--cream);margin-right:-6px;background:#fff}
.mlogos span{margin-left:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--body)}

/* ---------- the phone (app UI: pillar colours, violet allowed) ---------- */
.mphone{--pc7:#0F5E3B;--pc6:#12834E;--pc5:#2FA36C;--pc3:#9ED6B9;--pc2:#C8EAD7;--pc1:#E3F3EA;width:320px;height:660px;margin:0 auto;border-radius:52px;background:#141216;padding:10px;box-shadow:0 0 0 1.5px #3a3540,0 40px 80px -30px rgba(20,18,22,.55),0 18px 30px -18px rgba(20,18,22,.4);position:relative;font-family:Inter,var(--sans);color:#1F1A24}
.mphone.p-earn{--pc7:#0F5E3B;--pc6:#12834E;--pc5:#2FA36C;--pc3:#9ED6B9;--pc2:#C8EAD7;--pc1:#E3F3EA}
.mphone.p-burn{--pc7:#C9500D;--pc6:#E8590C;--pc5:#F26419;--pc3:#F7BE94;--pc2:#FAD7BD;--pc1:#FDEBDD}
.mphone.p-return{--pc7:#53338F;--pc6:#7149C9;--pc5:#9471DB;--pc3:#CDBCF0;--pc2:#DFD3F6;--pc1:#EFE9FB}
.mphone.p-learn{--pc7:#1A5279;--pc6:#1E78B8;--pc5:#5AB0E6;--pc3:#A9D5F2;--pc2:#CDE6F8;--pc1:#E2F0FA}
.mscr{position:relative;height:100%;border-radius:43px;overflow:hidden;background:#F6F5F7;transition:background .6s ease}
.msb{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 30px;font-size:13px;font-weight:600}
.msb .isl{width:92px;height:26px;border-radius:14px;background:#000}
.msb .sig{display:flex;gap:5px;align-items:center}.msb .sig svg{fill:#1F1A24}.msb .sig u{width:22px;height:10px;border-radius:3px;border:1.5px solid rgba(31,26,36,.55);position:relative;background:#34C759;background-clip:padding-box;box-shadow:inset 0 0 0 1px #fff}.msb .sig u::after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:3.5px;border-radius:0 1px 1px 0;background:rgba(31,26,36,.55)}
.mah{display:flex;align-items:center;gap:7px;padding:2px 16px 0}
.mah img{width:18px;height:18px;object-fit:contain}.mah b{font-size:13px;font-weight:700}
.mah span{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pc7);background:#fff;padding:3px 7px;border-radius:6px}
.mgr{padding:8px 16px 8px}
.mgr small{display:block;font-size:11px;color:#6B6672;font-weight:500}
.mgr h4{margin:1px 0 0;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.05;color:var(--pc7);transition:color .4s}
.mpanes{position:absolute;left:0;right:0;top:118px;bottom:70px;overflow:hidden}
.mpane{position:absolute;inset:0;padding:4px 12px 10px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s var(--ease);pointer-events:none}
.mpane.on{opacity:1;transform:none;pointer-events:auto}
.zbu{max-width:84%;padding:7px 10px;border-radius:14px;font-size:11px;line-height:1.35}
.zbu.zo{align-self:flex-end;background:#EDEAF0;color:#1F1A24;border-bottom-right-radius:4px}
.zbu.zf{align-self:flex-start;background:#fff;box-shadow:inset 0 0 0 1px rgba(60,40,70,.12);border-bottom-left-radius:4px}
.zbu.zf small{display:block;font-size:9px;font-weight:700;color:var(--pc6);letter-spacing:.04em;margin-bottom:1px}
.zkc{background:#fff;border-radius:14px;padding:9px 10px;box-shadow:0 0 0 1px rgba(60,40,70,.07),0 6px 14px -10px rgba(60,40,70,.3)}
.zkc .zkh{display:flex;justify-content:space-between;align-items:center;font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8A8492;margin-bottom:6px}
.zkc .zkh b{color:var(--pc6);font-weight:700}
.zsp{display:grid;grid-template-columns:1fr auto auto;gap:3px 6px;align-items:center;font-size:10px}
.zsp span{color:#4A4550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zsp em{font-size:9.5px;color:#6B6672;font-variant-numeric:tabular-nums}
.zsp .zx{font-size:9px;font-weight:700;white-space:nowrap}.zsp .zx s{color:#A49CAD;text-decoration:none;margin-right:2px}.zsp .zx b{color:#fff;background:var(--pc6);padding:1px 5px;border-radius:5px}
.zsp u{grid-column:1/-1;height:4px;border-radius:2px;background:#ECEAEE;overflow:hidden;text-decoration:none;display:block;margin-bottom:2px}.zsp u i{display:block;height:100%;background:var(--pc5);border-radius:2px}
.zba{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:6px}
.zba div small{display:block;font-size:8.5px;font-weight:600;color:#8A8492;text-transform:uppercase;letter-spacing:.06em}
.zba div b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#8A8492}
.zba div:last-child b{color:var(--pc6);font-size:24px}
.zba>span{font-size:16px;color:var(--pc5);padding-bottom:5px}
.zlgs{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:9px;color:#6B6672;flex-wrap:wrap}
.zlgs span{display:inline-flex;align-items:center;gap:4px;background:#fff;box-shadow:inset 0 0 0 1px rgba(60,40,70,.14);border-radius:999px;padding:2px 7px 2px 2px;font-weight:600;color:#4A4550}
.zlgs img{width:16px;height:16px;border-radius:50%;object-fit:cover;background:#fff}
.zmv{display:flex;align-items:center;gap:8px}
.zmv div{flex:1;min-width:0}.zmv small{display:block;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--pc6)}
.zmv b{display:block;font-size:11.5px;font-weight:700}.zmv em{font-size:10px;color:#4A4550}
.zmv .zok{flex:none;background:var(--pc6);color:#fff;font-size:10.5px;font-weight:700;padding:7px 11px;border-radius:10px}
.ztr{position:relative;height:86px;border-radius:12px;overflow:hidden;background:#ccc center/cover}
.ztr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.6))}
.ztr div{position:absolute;left:10px;right:10px;bottom:7px;z-index:1;color:#fff}.ztr small{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9}.ztr b{display:block;font-size:13px;font-weight:700}
.zpg{margin-top:7px}.zpg .zr{display:flex;justify-content:space-between;font-size:9.5px;color:#4A4550;margin-bottom:3px}.zpg .zr b{color:var(--pc6)}
.zpg u{display:block;height:6px;border-radius:3px;background:#ECEAEE;overflow:hidden;text-decoration:none}.zpg u i{display:block;height:100%;background:var(--pc6)}
.zck{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
.zck li{display:flex;gap:5px;font-size:9.5px;line-height:1.25;color:#4A4550}
.zck li b{flex:none;width:13px;height:13px;border-radius:4px;background:var(--pc6);color:#fff;font-size:9px;display:grid;place-items:center;line-height:1}
.zsd{display:flex;align-items:center;gap:8px;background:var(--pc7);color:#fff;border-radius:14px;padding:9px 10px}
.zsd img{width:22px;height:22px;object-fit:contain;flex:none}.zsd small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}.zsd b{font-size:10.5px;font-weight:600;line-height:1.3;display:block}
.zrt{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.zrt b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--pc6);line-height:1}.zrt small{display:block;font-size:9.5px;color:#6B6672;margin-top:2px}
.zwkb{display:flex;align-items:flex-end;gap:3px;height:44px}.zwkb i{width:8px;border-radius:2px 2px 0 0;background:#CFCBD4}.zwkb i:last-child{background:var(--pc6)}
.zrl{display:flex;justify-content:space-between;gap:8px;font-size:10px;padding:5px 0;border-top:1px solid #F1ECF3}.zrl span{color:#4A4550}.zrl b{color:var(--pc7);font-variant-numeric:tabular-nums}
.zby{font-size:9.5px;color:var(--pc7);font-weight:600;display:flex;gap:5px;align-items:center}
.zls .zlt{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pc6)}
.zls h5{margin:2px 0 6px;font-size:13px;font-weight:700;line-height:1.2}
.zls .zlb{display:flex;align-items:baseline;gap:6px;margin-bottom:7px}.zls .zlb b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:var(--pc6)}.zls .zlb small{font-size:9.5px;color:#6B6672}
.zlbars{display:grid;gap:5px}.zlbars div{display:grid;grid-template-columns:96px 1fr 34px;gap:6px;align-items:center;font-size:9.5px;color:#4A4550}
.zlbars u{height:8px;border-radius:3px;background:#ECEAEE;overflow:hidden;display:block;text-decoration:none}.zlbars u i{display:block;height:100%;background:#A49CAD}.zlbars div:last-child u i{background:var(--pc6)}.zlbars b{text-align:right;font-variant-numeric:tabular-nums}
.zqz{display:flex;gap:5px;flex-wrap:wrap}.zqz span{font-size:9.5px;font-weight:600;padding:5px 8px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--pc6);color:var(--pc7)}
.mtb{position:absolute;left:0;right:0;bottom:0;height:70px;display:flex;background:#fff;border-top:1px solid rgba(60,40,70,.08);padding:8px 8px 22px}
.mtb button{flex:1;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;font:500 10px/12px Inter,var(--sans);color:#7D7684;cursor:pointer}
.mtb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtb button.on{color:var(--pc6);font-weight:700}
.mhome{position:absolute;left:50%;bottom:7px;width:110px;height:4px;margin-left:-55px;border-radius:3px;background:#1F1A24}

.zst{display:flex;gap:3px;height:12px;border-radius:4px;overflow:hidden}.zst i{display:block;height:100%}.zst .s0,.zleg .s0{background:var(--pc7)}.zst .s1,.zleg .s1{background:var(--pc5)}.zst .s2,.zleg .s2{background:#A49CAD}
.zleg{display:flex;gap:12px;margin-top:6px;font-size:9.5px;color:#4A4550;font-variant-numeric:tabular-nums}.zleg span{display:flex;align-items:center;gap:4px}.zleg i{width:8px;height:8px;border-radius:2px;display:block}
.zseg{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}.zseg i{height:7px;border-radius:2px;background:#E2DFE5}.zseg i.on{background:var(--pc6)}

/* ---------- the win column (page colours) ---------- */
.mwin .wk{font-family:var(--mono)}
.mwin .wk{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin-bottom:6px;height:auto}
.wp,.ww{border-radius:22px;padding:18px 18px 16px}
.wp{background:#fff;box-shadow:0 0 0 1px rgba(20,18,22,.08),0 18px 36px -24px rgba(20,18,22,.35)}
.wbig{display:block;font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;color:var(--ink)}
.wp>small{display:block;font-size:13px;color:var(--body);margin-top:4px}
.wl{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.wl li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.wl li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl li b{flex:none;font-size:11px;font-family:var(--mono);background:var(--ink);color:#fff;border-radius:6px;padding:2px 7px}
.ww{background:var(--ink);color:#fff;box-shadow:0 26px 50px -26px rgba(20,18,22,.7)}
.ww .wk{color:#a49cad}.ww .wlab{display:block;font-size:12px;color:#cfcbd6}
.wnum{display:flex;align-items:baseline;gap:10px;margin:4px 0 10px}
.wnum span{font-size:24px;font-weight:700;color:#a49cad;font-variant-numeric:tabular-nums}.wnum i{color:var(--pink);font-size:20px}
.wnum b{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1;letter-spacing:-.01em}
.wbars{display:grid;gap:7px}.wbars div{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;font-size:11.5px;color:#cfcbd6}
.wbars u{display:block;height:10px;border-radius:4px;background:#2A262E;overflow:hidden;text-decoration:none}.wbars u i{display:block;height:100%;width:0;background:#6d6675;border-radius:4px;transition:width 1.2s var(--ease)}.wbars u i.wg{background:linear-gradient(90deg,#B80F6E,#FA1896)}
.wtrip{display:flex;gap:10px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid #2A262E}
.wtrip>span{flex:none;width:54px;height:54px;border-radius:12px;background:#333 center/cover}
.wtrip small{display:block;font-size:10.5px;color:#a49cad}.wtrip b{display:block;font-size:14px;line-height:1.25}.wtrip em{font-size:12px;color:#cfcbd6}
.wfine{font-size:11.5px;line-height:1.45;color:var(--body);margin:2px 0 0;background:#fff;box-shadow:0 0 0 1px rgba(20,18,22,.08);padding:7px 10px;border-radius:10px}
.mlab{display:none}
.wnext{border:0;background:none;padding:0;font:700 11.5px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}

/* ---------- below the fold ---------- */
.mhow .p4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.pc4{background:#fff;border-radius:22px;padding:22px 20px;box-shadow:0 0 0 1px rgba(20,18,22,.08)}
.pc4 .pn{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.pc4 .pn b{background:var(--ink);color:#fff;border-radius:7px;padding:3px 7px;font-weight:500}
.pc4 h3{font-size:20px;line-height:1.2;margin:14px 0 8px;color:var(--ink)}
.pc4 p{font-size:14px;line-height:1.5;color:var(--body);margin:0 0 14px}
.pc4 .pm{border-top:1px solid rgba(20,18,22,.1);padding-top:12px;font-size:13px;color:var(--ink)}
.pc4 .pm b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05}
.p4f{font-size:12px;color:var(--body);margin-top:16px}
.mwinsec .win3{margin-top:30px}

@media (max-width:1240px) and (min-width:761px){
 .mwrap{grid-template-columns:minmax(0,1fr) 330px;padding:0 28px}
 .mwin{grid-column:1/-1;grid-row:3;flex-direction:row;flex-wrap:wrap;padding-top:40px}.mwin>div{flex:1 1 300px}
 .mhow .p4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
 .mh{padding:14px 0 36px}
 .mbg{bottom:0}
 .mbg::after{background:linear-gradient(180deg,rgba(250,246,238,.62) 0,rgba(250,246,238,.72) 380px,rgba(250,246,238,.86) 640px,var(--cream) 100%)}
 .mwrap{grid-template-columns:205px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;padding:0 16px}
 .mtop{grid-column:1/-1;text-align:center}
 .mpill{height:26px;font-size:10px;letter-spacing:.12em;padding:0 12px}
 .mh h1{font-size:33px;line-height:1.04;margin:12px auto 10px;max-width:360px}
 .mprob{justify-items:center;gap:5px;margin-bottom:12px}.mprob li{font-size:13.5px;gap:8px}.mprob li b{width:19px;height:19px;font-size:12px;border-radius:5px}.mprob .m3{display:none}
 .mstage{grid-column:1;grid-row:2}
 .mphone{zoom:.64;margin:0}
 .mwin{grid-column:2;grid-row:2;padding-top:0;gap:8px}
 .wp,.ww{border-radius:16px;padding:11px 11px 10px}
 .mwin .wk{font-size:8.5px;letter-spacing:.1em;margin-bottom:3px}
 .wbig{font-size:28px}.wp>small{font-size:10.5px;line-height:1.3}
 .wl{display:none}
 .ww .wlab{font-size:10px}
 .wnum{flex-direction:column;align-items:flex-start;gap:0;margin:2px 0 6px}.wnum span{font-size:15px}.wnum i{display:none}.wnum b{font-size:36px}
 .wbars div{grid-template-columns:1fr;gap:2px;font-size:9.5px}.wbars u{height:7px}
 .wtrip{display:block;margin-top:8px;padding-top:8px}.wtrip>span{display:none}.wtrip small{font-size:9px}.wtrip b{font-size:11.5px}.wtrip em{font-size:10px}
 .wfine{display:none}
 .mlab{display:block;font-size:11.5px;line-height:1.45;color:var(--body);margin:14px auto 0;max-width:340px}
 .mrest{grid-column:1/-1;grid-row:3;text-align:center}
 .msub{font-size:15px;margin:14px auto 12px}
 .mtag{font-size:17px}
 .mctas{justify-content:center}.mctas .btn{flex:1 1 150px;height:50px;padding:0 14px}
 .mlogos{justify-content:center;flex-wrap:wrap;row-gap:10px}
 .mhow .p4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.mpill i,.mbg i{animation:none}.mpane,.mbg i,.wbars u i{transition:none}.mtb button{animation:none!important}.ptrack{animation:none!important}}

/* ---------- hero: the frame first, then the problem beat ---------- */
.mout{font-size:18px;line-height:1.3;font-weight:700;color:var(--ink);margin:0 0 12px}
.mprob li b{background:#fff;color:var(--pink);box-shadow:inset 0 0 0 1.5px var(--pink)}

/* ---------- the phone's own tabs: pillar colours, a quiet pulse one at a time until the visitor taps ---------- */
.mtb button[data-t=earn]{--tc:#12834E}.mtb button[data-t=burn]{--tc:#E8590C}.mtb button[data-t=return]{--tc:#7149C9}.mtb button[data-t=learn]{--tc:#1E78B8}
.mtb button{position:relative;color:var(--tc);opacity:.6;animation:tabhint 6.4s ease-in-out infinite}
.mtb button:nth-child(2){animation-delay:1.6s}.mtb button:nth-child(3){animation-delay:3.2s}.mtb button:nth-child(4){animation-delay:4.8s}
.mtb button.on{color:var(--tc);opacity:1;font-weight:700;animation:none}
.mtb button.on::before{content:"";position:absolute;top:-8px;left:50%;width:24px;margin-left:-12px;height:3px;border-radius:0 0 3px 3px;background:var(--tc)}
.mtb.held button,.fo-still .mtb button{animation:none}
@keyframes tabhint{0%,18%,100%{opacity:.6;transform:none}7%{opacity:1;transform:translateY(-2px) scale(1.12)}}
/* the sticker sits in the open space right of the phone, pointing at the tab bar; it never touches the frame */
.mstk{position:absolute;left:calc(100% + 85px);bottom:6px;display:flex;align-items:center;pointer-events:none;transition:opacity .5s ease}
.mstk span{display:block;background:var(--pink);color:#fff;font:700 15.5px/1.15 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:11px 16px 9px;border-radius:6px;white-space:nowrap;transform:rotate(-2deg);box-shadow:0 6px 14px -8px rgba(160,10,90,.55)}
.mstka{position:absolute;right:100%;top:2px;width:70px;height:34px;margin:0 4px 0 0;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tried .mstk{opacity:0}
.mcap{display:none;margin:8px 0 0;text-align:center;font-size:11px;line-height:1.3;font-weight:600;color:var(--body)}
@media (max-width:1240px){.mstk{display:none}.mcap{display:block}}

/* ---------- hero win cards: white, no dark blocks ---------- */
.ww{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(20,18,22,.08),0 18px 36px -24px rgba(20,18,22,.35)}
.ww .wk,.ww .wlab{color:var(--body)}
.wnum span{color:#8A8492}.wnum b{color:var(--pink)}
.wbars div{color:var(--body)}.wbars u{background:#ECEAEE}.wbars u i{background:#8A8492}.wbars u i.wg{background:var(--pink)}
.wtrip{border-top-color:#ECEAEE}.wtrip small,.wtrip em{color:var(--body)}
.wl li b{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,18,22,.22)}

/* ---------- note from Ohad: a real notepad page, pen on ruled paper, pink sticker on top ---------- */
.mnote{padding:46px 0 10px}
.ncard{--lh:36px;position:relative;max-width:720px;margin:0 auto;padding:60px 0 34px;background-color:#FFFEFB;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");border-radius:2px;box-shadow:0 1px 1px rgba(20,18,22,.06),0 3px 6px -2px rgba(20,18,22,.08),0 30px 54px -30px rgba(20,18,22,.42);transform:rotate(-.3deg)}
.ncard::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:repeating-linear-gradient(90deg,rgba(20,18,22,.2) 0 5px,transparent 5px 10px)}
.ncard::after{content:"";position:absolute;top:0;bottom:0;left:58px;width:2px;background:rgba(250,24,150,.42)}
.nlab{position:absolute;top:-13px;left:50%;z-index:2;transform:translateX(-50%) rotate(-2deg);background:var(--pink);color:#fff;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:8px 14px 7px;border-radius:4px;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(160,10,90,.55)}
.nbody{position:relative;padding:0 54px 0 84px;font-family:'Caveat',cursive;font-weight:300;font-size:21px;line-height:var(--lh);color:#1F2D4E;background-image:repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--lh) - 1px),#D3DAE7 calc(var(--lh) - 1px),#D3DAE7 var(--lh));background-position:0 var(--lo,-8px)}
.nbody p{margin:0 0 var(--lh)}
.nbody span{display:inline-block;transform:translateY(var(--y)) rotate(var(--r))}
.nbody .nlead{font-weight:400;font-size:25px;letter-spacing:-.005em}
.nbody a{color:var(--pink);font-weight:400;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.nhl{color:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.5 C20 3.2 48 4.4 70 3 S92 3.6 98.8 2.6 L99.4 16.2 C80 17.6 52 16.4 30 17.8 S8 17 0.6 18 Z' fill='%23FA1896' fill-opacity='.26'/%3E%3C/svg%3E") 0 62%/100% 72% no-repeat;padding:0 5px;margin:0 -5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ncv{display:flex;justify-content:center;margin-top:26px}.ncv .btn{height:48px;padding:0 22px;font-size:14.5px}

/* ---------- explanation: the payoff headline right after the note ---------- */
.mpay{max-width:none;margin:0 auto;text-align:center}
.mpayh{font-family:var(--serif);font-weight:400;font-size:clamp(52px,6.4vw,92px);line-height:.98;letter-spacing:-.022em;color:var(--ink);margin:0;text-wrap:balance}
.mpayh .pk{color:var(--pink);display:block}
.mhow .mpay2{font-size:clamp(30px,3.4vw,46px);margin-top:14px}
.mhow .mpay+.reveal{margin-top:52px;padding-top:30px;border-top:1px solid rgba(20,18,22,.1)}
.mlead{font-family:'Caveat',cursive;font-weight:400;font-size:30px;line-height:1.2;color:#1F2D4E;margin:0 0 18px;transform:rotate(-1deg);transform-origin:center}
.pc4.k-earn{--c:#12834E}.pc4.k-burn{--c:#E8590C}.pc4.k-return{--c:#7149C9}.pc4.k-learn{--c:#1E78B8}
.pc4 .pn b{background:var(--c)}
.mcv{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}.mcv .btn{height:50px;padding:0 24px}

/* ---------- proof: two rows of example cards moving in opposite directions ---------- */
.mproof{overflow:hidden}
.prows{display:grid;gap:14px;margin-top:30px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.prow{overflow:hidden;padding:4px 0 22px}
.ptrack,.pdup{display:flex;gap:14px}
.ptrack{width:max-content;animation:pmq 80s linear infinite}
.r2 .ptrack{animation-direction:reverse;animation-duration:90s}
.prow:hover .ptrack{animation-play-state:paused}
@keyframes pmq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
.fo-still .ptrack{animation:none}
.fo-still .prow{overflow-x:auto}
.pf{flex:none;width:252px;background:#fff;border-radius:18px;padding:16px 18px 15px;box-shadow:0 0 0 1px rgba(20,18,22,.08),0 14px 28px -22px rgba(20,18,22,.35)}
.pf.k-earn{--c:#12834E}.pf.k-burn{--c:#E8590C}.pf.k-return{--c:#7149C9}.pf.k-learn{--c:#1E78B8}
.pft{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pft b{background:var(--c);color:#fff;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px 4px;border-radius:5px}
.pft span{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.pfv{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1;color:var(--c);margin:16px 0 6px}
.pf p{font-size:13.5px;line-height:1.4;color:var(--ink);margin:0 0 10px;min-height:38px}
.pf small{display:block;font-size:11.5px;color:var(--body);border-top:1px solid #ECEAEE;padding-top:9px}
.pcta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0 0;background:#fff;border-radius:18px;padding:18px 22px;box-shadow:0 0 0 1px rgba(20,18,22,.08)}
.pctx b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;color:var(--ink)}
.pctx span{display:block;font-size:14px;color:var(--body);margin-top:4px}
.pbtn{display:flex;gap:10px;flex:none}.pbtn .btn{height:50px;padding:0 22px}

/* ---------- white everywhere below the fold: no dark blocks, no pastel washes ---------- */
.modes .h2 .brush{background:none;padding:0;margin:0;color:var(--pink)}
.modes .tag,.modes .tag.g,.modes .tag.p,.modes .tag.d{background:#fff;color:var(--body);box-shadow:inset 0 0 0 1px rgba(20,18,22,.16)}
.modes .wc:hover{transform:none}
.modes .wc.sc,.modes .wc.mv,.modes .wc.sh{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(20,18,22,.1)}
.modes .wc.mv .bars u{background:#ECEAEE}.modes .wc.mv .bars u i{background:#8A8492}.modes .wc.mv .bars u i.g{background:var(--pink)}
.modes .wc.sh h5{color:var(--body)}
.modes .wc.sh .card{background:#F6F5F7;color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.modes .wc.sh .card small,.modes .wc.sh .fine,.modes .wc.sh .tg{color:var(--body);opacity:1}
.modes .why div,.modes .why div:nth-child(even),.modes .why div:hover,.modes .why div:nth-child(even):hover{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(20,18,22,.1);transform:none}
.modes .why div b{color:var(--ink)}.modes .why div:first-child b{color:var(--pink)}
.modes .why div span{color:var(--body)}
.modes .cel .scr{background:#fff}
.modes .cs .bd,.modes .cs .bd.pkb{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 .1em rgba(20,18,22,.16)}
.modes .cs .bd.pkb{color:var(--pinkd)}
.modes .cs .by i,.modes .cs .nmb .ok{background:var(--pink);color:#fff}
.modes .cs .nmb .sh{background:#fff}
.modes .cs .cmp .t i{background:#8A8492}
.modes .cs .goal .tr i{background:var(--pink)}
.modes .cs .nm{box-shadow:0 0 0 .1em rgba(20,18,22,.1),0 1.2em 2.4em -1.6em rgba(20,18,22,.35)}
.modes .celnav button{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,18,22,.16)}
.modes .celnav button.on{background:var(--pink);color:#fff;box-shadow:none}

@media (max-width:760px){
 .mout{font-size:14.5px;margin:0 0 8px}
 .mcap{width:205px;font-size:10.5px}
 .mnote{padding:34px 0 0}
 .ncard{--lh:32px;padding:50px 0 24px;transform:rotate(-.25deg)}
 .ncard::before{top:18px}.ncard::after{left:30px}
 .nbody{--lo:-9px;padding:0 16px 0 44px;font-size:18.5px}
 .nbody .nlead{font-size:22px}
 .ncv .btn{width:100%;max-width:358px}
 .mlead{font-size:25px}
 .mpayh{font-size:44px;line-height:1}
 .mhow .mpay+.reveal{margin-top:34px;padding-top:24px}
 .mhow .mpay2{font-size:28px}
 .mcv .btn{flex:1 1 150px;padding:0 14px}
 .pf{width:222px;padding:14px 15px 13px}.pfv{font-size:36px}.pf p{font-size:13px}
 .prows{-webkit-mask-image:none;mask-image:none}
 .pcta{flex-direction:column;align-items:stretch;text-align:center;padding:18px 16px}
 .pctx b{font-size:26px}
 .pbtn{flex-direction:column}.pbtn .btn{width:100%}
}

/* green Text Your First Officer bubble, paired with pink Get your desk (hero + nav); the calculator is a quiet text link */
.btn.wa{background:#138a43;color:#fff;box-shadow:0 10px 24px -10px rgba(19,138,67,.6),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn.wa:hover{background:#0f7537;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(19,138,67,.65)}
.nbtns{display:flex;gap:10px;align-items:center}
.mcalc{display:inline-block;margin-top:12px;font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(250,24,150,.55);text-decoration-thickness:2px;text-underline-offset:4px}
.mcalc:hover{color:var(--pinkd)}
@media (max-width:1100px){.nbtns .btn.pk{display:none}}
@media (max-width:760px){.mctas .btn{flex:1 1 100%}.mcalc{display:block;text-align:center}}
/* ===== deeper -modes pages (build_pages.py): mobile first ===== */
.mtm{font-size:11.5px;color:var(--body);margin:8px 0 0}
.ill{display:block;font-size:12px;line-height:1.4;color:var(--body);margin-top:10px;font-style:normal}
.dk{display:inline}.mb{display:none}
.thr{display:inline-flex;gap:3px;margin-right:10px;vertical-align:middle}.thr i{width:14px;height:4px;border-radius:2px}
.thr .te{background:#12834E}.thr .tb{background:#E8590C}.thr .tr{background:#7149C9}.thr .tl{background:#1E78B8}
.chk{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--pinkd)}
/* hero */
.ph{padding:40px 0 70px}
.phw{max-width:1360px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"t v" "b v";column-gap:64px;align-items:start}
.pht{grid-area:t}.phv{grid-area:v;align-self:center}.phb{grid-area:b}
.ph h1{max-width:640px;font-size:62px}
.ph .msub{font-size:17px;max-width:600px}
.ph .mprob{margin-top:6px}
.phstar{max-width:300px;margin:0 auto;text-align:center}
.phstar .ill{text-align:center}
/* cards on the hero */
.wat,.tmx,.abq,.door,.edg,.st,.trd,.lv,.fpk,.nxt,.chv,.bfa,.np{background:#fff;border-radius:22px;box-shadow:0 0 0 1px rgba(20,18,22,.08),0 18px 36px -24px rgba(20,18,22,.35)}
.wat{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px}
.wath{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(20,18,22,.1);padding-bottom:10px}.wath b{font-size:16px}.wath small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#138a43}
.bu{margin:0;max-width:86%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--cream2);font-size:14.5px;line-height:1.45;color:var(--ink)}
.bu.me{align-self:flex-end;background:#dcf5e3;border-radius:16px 16px 4px 16px}
.tmx{padding:20px}.tmh b{display:block;font-size:18px;margin-top:8px}.tmh small{color:var(--body);font-size:13px}
.tmx ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.tmx li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;font-size:14px;padding:9px 12px;border-radius:12px;background:var(--cream)}
.tmx li em{font-style:normal;color:var(--body);font-size:13px}.tmx li b{color:#12834E;font-family:var(--mono);font-size:13px}
.tmf{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;border-top:1px solid rgba(20,18,22,.1);padding-top:12px}.tmf b{font-family:var(--serif);font-weight:400;font-size:34px;color:#12834E}
.abv{display:grid;gap:14px}.abq{padding:22px}.abq b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;margin-top:8px}.abq b.pk{color:var(--pink);margin-top:2px}.abq p{font-size:15px;color:var(--body);margin:12px 0 0}
.abph{height:200px;border-radius:22px;background-size:cover;background-position:center}
.lvl,.fst{display:grid;gap:12px}
.lv,.fpk{padding:18px 20px;border-left:5px solid var(--c,#FA1896)}.lv b,.fpk b{display:block;font-size:18px;margin:6px 0 4px}.lv p,.fpk p{margin:0;font-size:14px;color:var(--body)}
.k-earn{--c:#12834E}.k-burn{--c:#E8590C}.k-return{--c:#7149C9}.k-learn{--c:#1E78B8}
.lv .chk,.fpk .chk{color:var(--c)}
/* sections */
.pgs .h2{max-width:900px}
.srail{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:14px;margin-top:34px}
.srail>.rc{display:flex}.srail>.rc>*{flex:1}
.sdots{display:none}
/* Leo chapters */
.chps{display:grid;gap:18px;margin-top:40px}
.chp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:center;background:#fff;border-radius:22px;padding:30px;box-shadow:0 0 0 1px rgba(20,18,22,.08);border-top:5px solid var(--c)}
.chp .chk{color:var(--c)}.chp h3{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.08;margin:10px 0 12px}
.chp p{font-size:16px;color:var(--body);margin:0}.chp .chm{display:flex;gap:10px;margin-top:16px;font-weight:600;color:var(--ink);font-size:15px}
.chp .chm b{flex:none;width:22px;height:22px;border-radius:6px;background:var(--c);color:#fff;display:grid;place-items:center;font-size:13px}
.chv{box-shadow:none;background:var(--cream);padding:18px}
.bfa{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;box-shadow:none}
.bfa div{display:flex;flex-direction:column}.bfa small{font-size:12px;color:var(--body)}.bfa b{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1}.bfa .a b{color:var(--c)}.bfa span{font-size:12px;color:var(--body)}.bfa i{font-style:normal;font-size:24px;color:var(--c)}
.bgo{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:#fff;border-radius:16px;padding:12px}
.bgo .im{height:96px;border-radius:12px;background-size:cover;background-position:center}.bgo b{display:block;font-size:16px}.bgo small{font-size:13px;color:var(--body)}
/* progress bar; :where() keeps it off the ticker track (.tick>.tr) without raising specificity */
:where(:not(.tick))>.tr{height:8px;border-radius:4px;background:var(--cream2);margin-top:10px;overflow:hidden}:where(:not(.tick))>.tr i{display:block;height:100%;background:var(--c)}
.bls{list-style:none;margin:0;padding:6px 16px;background:#fff;border-radius:16px}.bls li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px;border-bottom:1px solid rgba(20,18,22,.08)}.bls li.t{border:0;font-weight:700}.bls li.t b{color:var(--c);font-family:var(--serif);font-weight:400;font-size:26px}
/* stories */
.st{padding:20px;display:flex;flex-direction:column;gap:10px}
.sth{display:flex;gap:12px;align-items:center}.sti{flex:none;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:13px}
.sth b{display:block;font-size:15.5px;line-height:1.25}.sth small{font-size:12.5px;color:var(--body)}
.stq{margin:0;font-size:15px;font-weight:600;line-height:1.4}
.stba{display:flex;align-items:center;justify-content:space-between;background:var(--cream);border-radius:14px;padding:10px 14px}
.stba div{display:flex;flex-direction:column}.stba small{font-size:11.5px;color:var(--body)}.stba b{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.05}.stba .a b{color:#12834E}.stba span{font-size:11.5px;color:var(--body)}.stba i{font-style:normal;color:var(--pink);font-size:20px}
.stc{margin:0;font-size:13.5px;line-height:1.45;color:var(--body)}.stc b{display:inline-block;margin-right:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:5px;color:#fff;background:var(--c)}
/* 90 days */
.tl90{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.tl90 li{background:#fff;border-radius:18px;padding:16px;box-shadow:0 0 0 1px rgba(20,18,22,.08);border-top:4px solid var(--pink)}
.tl90 span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pinkd)}.tl90 b{display:block;font-size:16px;margin:6px 0}.tl90 p{margin:0;font-size:13.5px;color:var(--body)}
/* doors, edges */
.door{padding:22px;display:flex;flex-direction:column;gap:8px}.door h3{font-family:var(--serif);font-weight:400;font-size:32px;margin:0}.door p{margin:0 0 8px;font-size:15px;color:var(--body);flex:1}.door .btn{align-self:flex-start}
.door.d-wa{box-shadow:0 0 0 2px #138a43}
.edg{padding:20px;display:flex;flex-direction:column;gap:10px;border-top:5px solid var(--c)}
.e-fit{--c:#12834E}.e-meh{--c:#E8590C}.e-no{--c:#857E8C}
.edh{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}.edh b{width:28px;height:28px;border-radius:8px;background:var(--c);color:#fff;display:grid;place-items:center}
.eds{margin:0;font-size:13.5px;color:var(--body)}.edv b{display:block;font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;color:var(--c)}.edv small{font-size:13px;color:var(--body)}
.edf{display:flex;justify-content:space-between;background:var(--cream);border-radius:12px;padding:8px 12px;font-size:14px}.edg>p{margin:0;font-size:14.5px}
/* trades */
.trg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:34px}
.trd{padding:18px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.trn{font-family:var(--mono);font-size:11px;color:var(--pinkd)}.trd h3{font-size:18px;margin:0}.trd p{margin:0;font-size:13.5px;color:var(--body);flex:1}
.trl{display:flex;flex-direction:column;gap:2px;margin-top:6px}.trl a{font-size:14px;font-weight:600;color:var(--ink);padding:6px 0;text-decoration:underline;text-decoration-color:rgba(250,24,150,.55);text-decoration-thickness:2px;text-underline-offset:3px}
.trg.sm .trd .mcalc{margin-top:4px}
/* why with labels */
.why span strong{color:#fff}
.nt h3{margin-top:0}
.pc4.gb{box-shadow:0 0 0 2px var(--pink)}
/* expand */
.txs{display:grid;gap:12px;margin-top:30px}.txs.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
details.tx{background:#fff;border-radius:18px;box-shadow:0 0 0 1px rgba(20,18,22,.08);padding:18px 20px}
details.tx summary{list-style:none;cursor:pointer;font-weight:700;font-size:17px;display:flex;flex-direction:column;gap:4px}
details.tx summary::-webkit-details-marker{display:none}
details.tx p{margin:10px 0 0;color:var(--body);font-size:15px}
.np{border-top:5px solid var(--c)}.np summary .chk{color:var(--c)}.np summary b{font-size:20px}.np summary small{font-weight:400;color:var(--body);font-size:14px}
.np ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}.np li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}.np li b{flex:none;margin-top:2px;width:20px;height:20px;border-radius:6px;background:var(--c);color:#fff;display:grid;place-items:center;font-size:12px}
/* hand-off */
.nxt{display:grid;gap:10px;padding:34px 36px;text-decoration:none;color:var(--ink);border-top:5px solid var(--pink);transition:transform .3s var(--ease)}
.nxt:hover{transform:translateY(-4px)}
.nxk{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--body);display:flex;align-items:center}
.nxh{font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.05;letter-spacing:-.01em}.nxh .pk{color:var(--pink)}
.nxp{font-size:17px;color:var(--body);max-width:720px}
.nxb{display:inline-flex;align-items:center;gap:8px;justify-self:start;height:50px;padding:0 24px;border-radius:999px;background:var(--pink);color:#fff;font-weight:700;margin-top:6px}
@media (max-width:1100px){.tl90{grid-template-columns:repeat(4,minmax(0,1fr))}.trg{grid-template-columns:repeat(3,minmax(0,1fr))}.srail[style*="--cols:5"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1024px) and (min-width:761px){.phw{grid-template-columns:minmax(0,1fr) 360px;column-gap:36px}.ph h1{font-size:48px}.chp{grid-template-columns:1fr;gap:20px}.srail{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ===== phones: native patterns ===== */
@media (max-width:760px){
 .dk{display:none}.mb{display:inline}
 .ph{padding:22px 0 44px}
 .phw{padding:0 20px;grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "v" "b";text-align:center}
 .ph h1{font-size:36px;line-height:1.05;margin:12px auto 18px;max-width:380px}
 .phv{width:100%;margin:0 auto 22px;text-align:left}
 .phstar{max-width:280px}
 .ph .mprob{justify-items:center}.ph .mprob .m3{display:flex}
 .ph .msub{margin:14px auto 14px;font-size:15.5px}
 .ph .mlogos{justify-content:center;flex-wrap:wrap;row-gap:10px}.ph .mlogos span{margin-left:12px;font-size:10px}
 .mtm{text-align:center}
 .srail{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:26px -20px 0;padding:4px 20px 8px;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .srail::-webkit-scrollbar{display:none}
 .srail>.rc{flex:0 0 84%;scroll-snap-align:start}
 .sdots{display:flex;gap:6px;justify-content:center;margin-top:12px}
 .sdots i{width:18px;height:6px;border-radius:3px;background:rgba(20,18,22,.16);cursor:pointer;transition:width .3s,background .3s}
 .sdots i.on{width:34px;background:var(--pink)}
 .chp{grid-template-columns:1fr;gap:16px;padding:20px}
 .chp h3{font-size:30px}.chp p{font-size:15px}
 .bfa b{font-size:38px}
 .tl90{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:26px -20px 0;padding:4px 20px 8px;scrollbar-width:none}
 .tl90 li{flex:0 0 70%;scroll-snap-align:start}
 .trg{grid-template-columns:1fr 1fr;gap:10px}
 .trd{padding:14px}.trd h3{font-size:16px}
 .txs.n2{grid-template-columns:1fr}
 details.tx summary{position:relative;padding-right:30px}
 details.tx summary::after{content:"+";position:absolute;right:0;top:0;font-size:24px;font-weight:400;line-height:1;color:var(--pink)}
 details.tx[open] summary::after{content:"−"}
 .nxt{padding:24px 20px}.nxh{font-size:32px}.nxp{font-size:15.5px}.nxb{justify-self:stretch;justify-content:center}
 .abph{height:150px}
 .wat{text-align:left}
}
@media (max-width:360px){.ph h1{font-size:31px}.trg{grid-template-columns:1fr}.srail>.rc{flex-basis:88%}.nxh{font-size:28px}}
.ncv{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.mcalc{padding:11px 4px;margin-top:4px}
.wnext{min-height:40px;padding:10px 6px}
details.tx summary{min-height:44px;justify-content:center}
@media (max-width:760px){.ph .phb .mprob{display:inline-grid;justify-items:start;text-align:left;margin-left:auto;margin-right:auto}}
h1,h2,h3,h4,.nxh,.stq,p,li,b{overflow-wrap:break-word}

/* rec21: top bar never floats over content, at any width. A normal in-flow bar that scrolls away with the page:
   solid cream, thin bottom line, no blur, no shadow. */
.modes .nav,.modes .nav.solid{position:relative;top:auto;z-index:auto;background:#FAF6EE;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(20,18,22,.08)}
/* rec21: in-page jumps (#how, #doors, #advs) land with a little breathing room above the section */
html{scroll-padding-top:16px}
/* rec23: the note has no sign-off; the card ends one ruled line after the last line of text */
.nbody p:last-child{margin-bottom:0}
.ncard{padding-bottom:30px}
@media (max-width:760px){.ncard{padding-bottom:24px}}

/* ---- the four screens, enriched (panes.js): avatars on the bubbles, a glyph per line of spend, the card, the route, confetti, the coin ---- */
.zrow{display:flex;align-items:flex-end;gap:6px}
.zrow.zro{justify-content:flex-end}
.zrow .zbu{max-width:calc(94% - 26px)}
.zav{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:800 8px/1 Inter,var(--sans);letter-spacing:.02em}
.zav.zao{background:var(--pc2);color:var(--pc7)}
.zav.zaf{background:#fff;box-shadow:inset 0 0 0 1px rgba(60,40,70,.12)}
.zav.zaf img{width:12px;height:12px;object-fit:contain;display:block}
.zsp.zsp2{display:grid;grid-template-columns:1fr;gap:5px}
.zln{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"g n m x" "g b b b";column-gap:6px;row-gap:3px;align-items:center}
.zln .zg{grid-area:g;width:22px;height:22px;border-radius:7px;background:var(--pc1);color:var(--pc6);display:grid;place-items:center}
.zln .zg svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.zln>span:not(.zx){grid-area:n}
.zln em{grid-area:m}
.zln .zx{grid-area:x}
.zln u{grid-area:b;margin:0}
.zmv .zcard{flex:none;width:38px;height:26px;border-radius:5px;background:linear-gradient(135deg,var(--pc7),var(--pc5));position:relative;display:block;box-shadow:0 5px 10px -6px rgba(0,0,0,.55)}
.zmv .zcard b{position:absolute;right:4px;bottom:3px;font-size:8px;font-weight:800;color:#fff;letter-spacing:.02em;display:block}
.zmv .zcard u{position:absolute;left:4px;top:7px;width:9px;height:7px;border-radius:2px;background:rgba(255,255,255,.78);display:block;text-decoration:none}
.zrte{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:10px;font-weight:700;color:var(--pc7)}
.zrte b{flex:none;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zrte i{flex:1;min-width:0;color:var(--pc5);display:block;height:20px;font-style:normal}
.zrte i svg{width:100%;height:20px;display:block;overflow:visible}
.zrte .zpl{transform-box:view-box;animation:zfly 6s ease-in-out infinite}
@keyframes zfly{0%{transform:translate(12px,15px) rotate(-16deg);opacity:0}12%{opacity:1}50%{transform:translate(60px,6px) rotate(0)}88%{opacity:1}100%{transform:translate(108px,15px) rotate(16deg);opacity:0}}
.zrt .zrtn{position:relative}
.zconf{position:absolute;left:-4px;top:-10px;width:110px;height:50px;pointer-events:none;display:block}
.zconf i{position:absolute;width:5px;height:8px;border-radius:1.5px;background:var(--pc5);opacity:0;display:block}
.zconf .c0{left:4%;top:60%;background:var(--pc6)}.zconf .c1{left:16%;top:20%;background:#F26419}.zconf .c2{left:30%;top:4%;background:var(--pc5)}.zconf .c3{left:44%;top:30%;background:#16A06A}.zconf .c4{left:58%;top:0;background:#2E9BE8}.zconf .c5{left:70%;top:24%;background:var(--pc6)}.zconf .c6{left:84%;top:6%;background:#F26419}.zconf .c7{left:94%;top:40%;background:var(--pc5)}.zconf .c8{left:36%;top:64%;background:#2E9BE8}.zconf .c9{left:78%;top:66%;background:#16A06A}
.mpane.on .zconf i{animation:zpop 1.7s ease-out forwards}
.mpane.on .zconf .c1,.mpane.on .zconf .c4,.mpane.on .zconf .c7{animation-delay:.12s}.mpane.on .zconf .c2,.mpane.on .zconf .c5,.mpane.on .zconf .c8{animation-delay:.24s}.mpane.on .zconf .c3,.mpane.on .zconf .c6,.mpane.on .zconf .c9{animation-delay:.36s}
@keyframes zpop{0%{opacity:0;transform:translateY(10px) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-26px) rotate(140deg)}}
.zrl{align-items:center}
.zrl span{flex:1;min-width:0}
.zrl .zdot{flex:none;width:8px;height:8px;border-radius:2.5px;margin-right:6px;display:block}
.zls .zlb small{flex:1;min-width:0}
.zcoin{flex:none;align-self:center;width:34px;height:34px;color:var(--pc5);display:block;margin-left:4px}
.zcoin svg{width:34px;height:34px;display:block;fill:var(--pc1);stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.fo-still .zrte .zpl{animation:none;transform:translate(60px,6px)}
.fo-still .zconf{display:none}
.zup{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.zup li{display:flex;align-items:center;gap:7px;font-size:10px;color:#4A4550;line-height:1.25}
.zup li i{flex:none;width:16px;height:16px;border-radius:5px;background:var(--pc1);color:var(--pc7);font-style:normal;font-weight:800;font-size:8.5px;display:grid;place-items:center}
.zup li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zup li small{flex:none;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A8492}
/* room for the longer questions: the screens sit a touch tighter */
.mpane{gap:5px}
.zkc{padding:8px 10px}
.zbu{padding:6px 10px}

/* fo-zbp: the Burn pane's trip as a boarding pass; the flight path is the points progress (Oct 29) */
.zbp{margin-top:10px;display:grid;gap:7px}
.zbp-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:10px}
.zbp-c{display:grid;gap:2px;min-width:0}
.zbp-c b{font:800 21px/1 Inter,var(--sans);letter-spacing:-.015em;color:#1F1A24;font-variant-numeric:tabular-nums}
.zbp-c small{font-size:8.5px;font-weight:600;color:#8A8492;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74px}
.zbp-c.to{text-align:right;justify-items:end}
.zbp-p{position:relative;height:34px;align-self:end;margin-bottom:9px}
.zbp-p em{position:absolute;left:0;right:0;top:2px;text-align:center;font:700 7.5px/1 Inter,var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8A8492;font-style:normal;white-space:nowrap}
.zbp-p::before,.zbp-p::after{content:"";position:absolute;top:20px;width:7px;height:7px;border-radius:50%;box-sizing:border-box;z-index:1}
.zbp-p::before{left:0;background:var(--pc6)}
.zbp-p::after{right:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--pc6)}
.zbp-t{position:absolute;left:4px;right:4px;top:23px;height:1.5px;background:repeating-linear-gradient(90deg,rgba(60,40,70,.28) 0 3px,transparent 3px 6px)}
.zbp-f{position:absolute;left:4px;top:22.5px;height:2.5px;border-radius:2px;width:calc((100% - 8px) * var(--p));background:linear-gradient(90deg,var(--pc3),var(--pc6))}
.zbp-pl{position:absolute;top:15.5px;left:calc(4px + (100% - 8px) * var(--p));width:17px;height:17px;margin-left:-8.5px;display:grid;place-items:center;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(60,40,70,.1),0 4px 10px -3px rgba(60,40,70,.35);z-index:2}
.zbp-pl svg{width:11px;height:11px;fill:var(--pc6);display:block}
.zbp-n{display:flex;justify-content:space-between;font-size:9.5px;color:#4A4550}
.zbp-n b{color:var(--pc6)}
.mpane.on .zbp-f{animation:zbpf 1.6s cubic-bezier(.22,1,.36,1) .25s both}
.mpane.on .zbp-pl{animation:zbpl 1.6s cubic-bezier(.22,1,.36,1) .25s both}
@keyframes zbpf{from{width:0}}
@keyframes zbpl{from{left:4px}}
@media (prefers-reduced-motion:reduce){.mpane.on .zbp-f,.mpane.on .zbp-pl{animation:none}}
.fo-still .mpane.on .zbp-f,.fo-still .mpane.on .zbp-pl{animation:none}

/* fo-zwk: the Return pane's weeks rise into this Friday instead of confetti (Oct 29) */
.mpane.on .zwkb i{transform-origin:bottom;animation:zwk .9s cubic-bezier(.22,1,.36,1) both}
.mpane.on .zwkb i:nth-child(2){animation-delay:.06s}.mpane.on .zwkb i:nth-child(3){animation-delay:.12s}.mpane.on .zwkb i:nth-child(4){animation-delay:.18s}
.mpane.on .zwkb i:nth-child(5){animation-delay:.24s}.mpane.on .zwkb i:nth-child(6){animation-delay:.3s}.mpane.on .zwkb i:nth-child(7){animation-delay:.36s}.mpane.on .zwkb i:nth-child(8){animation-delay:.46s}
@keyframes zwk{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.mpane.on .zwkb i{animation:none}}
.fo-still .mpane.on .zwkb i{animation:none}