:root{
  --bg:#F4F7F8; --panel:#FFFFFF; --ink:#0F2230; --muted:#526875; --line:#DCE4E8; --soft:#EEF3F5;
  --navy:#0F2230; --navy2:#16303F; --on-navy:#DCE8EE; --on-navy-muted:#9FB6C2;
  --sky:#7FD0F0; --accent:#0B6E99; --accent-soft:#E6F2F7; --amber:#E9A23B; --amber-ink:#1A1206;
  --green:#4FCF93; --good:#1E7A4C;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --story:"Newsreader",Georgia,serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A161D; --panel:#10212B; --ink:#E4EEF3; --muted:#9FB3BE; --line:#22404F; --soft:#152B37;
  --accent:#5CC8EC; --accent-soft:#12303F; --good:#4FCF93; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A161D; --panel:#10212B; --ink:#E4EEF3; --muted:#9FB3BE; --line:#22404F; --soft:#152B37;
  --accent:#5CC8EC; --accent-soft:#12303F; --good:#4FCF93; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:12px;padding:14px 20px;font:700 16px var(--body);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 10px 24px rgba(233,162,59,.28)}
.btn.amber:hover{filter:brightness(1.04)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-width:0}
.brand img{height:28px;width:auto;display:block;flex:0 0 auto}
.wm{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm .t{font-weight:600;color:var(--on-navy);opacity:.75} .wm .a{color:var(--amber)}
@media (max-width:480px){.wm{font-size:15.5px}.brand img{height:22px}}
.month{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.month i{height:16px;border-radius:4px;background:rgba(255,255,255,.08)}
.month i.a{background:var(--amber)} .month i.g{background:var(--green)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;margin:0;background:linear-gradient(90deg,var(--accent) 0 var(--p,25%),var(--line) var(--p,25%) 100%)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--panel);border:3px solid var(--accent);box-shadow:0 2px 6px rgba(15,34,48,.25);cursor:pointer}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--panel);border:3px solid var(--accent);cursor:pointer}

/* ================= screen 1: join ================= */
.join{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr;color:var(--on-navy);
  background:radial-gradient(60% 60% at 10% 0%,rgba(127,208,240,.14),transparent 60%),linear-gradient(180deg,#0F2230,#0A1922)}
.join header{padding:18px max(24px,env(safe-area-inset-left,0px))}
.jgrid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:center;max-width:1040px;width:100%;margin:0 auto;padding:24px 24px 64px}
@media (max-width:900px){.jgrid{grid-template-columns:1fr;gap:20px;max-width:480px;padding:8px 16px 48px}}
.jplan .jk{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);margin:0 0 14px}
.jplan h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-.025em;color:#fff;margin:0 0 22px;text-wrap:balance}
.jplan h2 em{font-style:normal;color:var(--green)}
.jmonth{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;display:grid;gap:12px;max-width:440px}
.jmonth .mk{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--on-navy-muted)}
.jmonth .mk i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.jstats{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap}
.jstats b{display:block;font-family:var(--display);font-size:30px;color:#fff;line-height:1.1}
.jstats span{font-size:13.5px;color:var(--on-navy-muted)}
.jnext{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;color:var(--on-navy)}
.jnext li{display:flex;gap:10px} .jnext li::before{content:"→";color:var(--sky)}
@media (max-width:900px){.jplan h2{font-size:28px;margin-bottom:14px}.jstats,.jnext,.jplan .jk{display:none}.jmonth{max-width:none}}
.jcard{width:100%;background:var(--panel);color:var(--ink);border-radius:22px;padding:30px 28px;box-shadow:0 30px 70px rgba(0,0,0,.35);display:grid;gap:16px}
@media (max-width:480px){.jcard{padding:24px 20px}}
.jcard h1{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.02em;margin:0}
.jcard .sub{margin:-6px 0 2px;color:var(--muted)}
.gbtn{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font:600 16px var(--body);cursor:pointer}
.gbtn:hover{border-color:var(--muted)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.field{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
.field input{font:500 16px var(--body);padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--accent)}
.field input.bad{border-color:#C2410C}
.jcard .btn{width:100%}
.jdis{margin:18px 0 0;font-size:13px;color:var(--on-navy-muted)}
@media (max-width:900px){.jdis{margin-top:10px}}
.jfine{font-size:13px;color:var(--muted);margin:0;text-align:center}

/* ================= screen 2: lesson ================= */
.top{position:sticky;top:0;z-index:20;background:#0F2230;color:var(--on-navy);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.topin{display:flex;align-items:center;gap:18px;padding:12px max(24px,env(safe-area-inset-left,0px))}
.prog{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;white-space:nowrap}
.prog .bar{width:120px;height:6px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden}
.prog .bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .4s}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:#0F2230;font-weight:700;font-size:14px;flex:0 0 32px}
@media (max-width:560px){.prog .bar{width:48px}.prog .lbl{font-size:13px}.top .wm{display:none}}
.readbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--sky);z-index:21}

.lhead{position:relative;overflow:hidden;isolation:isolate;color:var(--on-navy);
  background:radial-gradient(60% 80% at 10% 0%,rgba(127,208,240,.12),transparent 60%),linear-gradient(180deg,#0F2230,#0A1922)}
.lhead .ph{position:absolute;inset:0 0 0 auto;width:min(58vw,820px);z-index:-1}
.lhead .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.7;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.lhin{max-width:1120px;margin:0 auto;padding:56px max(24px,env(safe-area-inset-left,0px)) 64px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px}
.lhin>div{grid-column:2;max-width:640px}
@media (max-width:900px){.lhin{grid-template-columns:1fr;padding:36px 20px 44px}.lhin>div{grid-column:1}.lhead .ph{width:100%;opacity:.5}.lhead .ph img{-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}}
.kick{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.lhead h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.4vw,58px);line-height:1.02;letter-spacing:-.03em;margin:12px 0 22px;color:#fff;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.learn{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:16.5px}
.learn li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:#E8F1F5}
.learn li::before{content:"";width:8px;height:8px;margin:8px 0 0 6px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(127,208,240,.18)}

.layout{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;padding:0 max(24px,env(safe-area-inset-left,0px)) 96px}
@media (max-width:900px){.layout{grid-template-columns:1fr;gap:0;padding:0 20px 72px}.side{display:none}}
.side{position:sticky;top:84px;align-self:start;padding-top:40px}
.side h4{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:8px 10px;border-radius:10px;color:var(--muted);font-size:14px;line-height:1.35}
.side li .sn{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;border:1.5px solid var(--line)}
.side li.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 0 var(--line)}
.side li.on .sn{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.side li.fin{color:var(--muted)}
.side li.fin .sn{background:var(--good);border-color:var(--good);color:#fff}
.side li.fin .sn span{display:none} .side li.fin .sn::after{content:"✓"}
.side .toc{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.side .toc a{display:block;padding:5px 10px;font-size:13.5px;color:var(--muted);text-decoration:none;border-radius:8px;line-height:1.35}
.side .toc a:hover{color:var(--ink)}
.side .toc a.cur{color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--amber)}
article{max-width:680px;min-width:0}

.yours{position:relative;margin:-30px 0 40px;background:var(--panel);border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center;box-shadow:0 1px 0 var(--line),0 18px 40px rgba(15,34,48,.10)}
.yours .yl{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.yours .big{font-family:var(--display);font-weight:700;font-size:54px;line-height:1;color:var(--good)}
.yours p{margin:0;font-size:15.5px;line-height:1.45;color:var(--muted)}
.yours p b{color:var(--ink)}

.prose{font-family:var(--story);font-size:20px;line-height:1.65;color:var(--ink)}
@media (max-width:560px){.prose{font-size:18.5px}}
.prose p{margin:0 0 1.05em}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,31px);letter-spacing:-.02em;line-height:1.12;margin:2em 0 .6em;scroll-margin-top:90px}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.1em}
.prose li{margin:.4em 0}
.prose strong{font-weight:600}
.callout{margin:1.6em 0;padding:16px 20px;border-left:3px solid var(--amber);background:var(--panel);border-radius:0 12px 12px 0;font-size:18px}
.callout p{margin:0}

/* timeline */
.prose .timeline{list-style:none;padding:0;margin:1.3em 0 1.6em;font-family:var(--body);font-size:16px;line-height:1.5}
.timeline li{position:relative;margin:0;padding:0 0 18px 34px}
.timeline li::before{content:"";position:absolute;left:5px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2.5px solid var(--sky)}
.timeline li:not(:last-child)::after{content:"";position:absolute;left:10.5px;top:22px;bottom:2px;width:2px;background:var(--line)}
.timeline li:last-child::before{background:var(--amber);border-color:var(--amber)}
.timeline .tk{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.timeline li:last-child{padding-bottom:0}

/* widgets */
.widget{margin:1.4em 0 1.7em;background:#0F2230;color:var(--on-navy);border-radius:18px;padding:20px 22px;font-family:var(--body);display:grid;gap:16px}
.wtop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.wl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.wsub{font-size:14px;color:var(--on-navy-muted)}
.wrate{font-size:14px;color:var(--on-navy-muted);display:flex;align-items:center;gap:8px}
.rin{display:inline-flex;align-items:center;background:rgba(255,255,255,.08);border-radius:9px;padding:4px 10px;color:#fff;font-weight:700}
.rin input{width:46px;border:0;background:transparent;color:#fff;font:700 16px var(--body);padding:0 0 0 2px}
.rin input:focus{outline:none}
.ubig{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ubig div{display:grid}
.un{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.6vw,36px);line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
.un.g{color:var(--green)}
.ul{font-size:13px;color:var(--on-navy-muted)}
@media (max-width:480px){.ubig{grid-template-columns:1fr 1fr}.ubig div:first-child{grid-column:1/-1}}
.uslide{position:relative;padding-bottom:30px}
.widget .range{background:linear-gradient(90deg,var(--sky) 0 var(--p,25%),rgba(255,255,255,.14) var(--p,25%) 100%)}
.widget .range::-webkit-slider-thumb{border-color:var(--sky);background:#0F2230}
.ticks{position:absolute;left:13px;right:13px;top:18px;height:24px;font-size:12px;color:var(--on-navy-muted)}
.ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap;top:4px}
.ticks .vid{transform:none;top:-29px;height:4px;background:var(--amber);border-radius:4px;font-size:0}
.vkey{display:inline-block;width:16px;height:4px;border-radius:4px;background:var(--amber);vertical-align:3px;margin:0 6px 0 0}
.widget figcaption small{display:block;margin-top:4px;font-size:13px;color:var(--on-navy-muted)}
.widget figcaption{font-size:15px;color:var(--on-navy)}
.widget figcaption b{color:#fff}
.crow{display:flex;justify-content:space-between;font-size:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.crow b{color:#fff;font-variant-numeric:tabular-nums}
.crow.tot{border:0;padding:0;font-weight:600}
.crow.tot b{color:var(--amber);font-size:20px;font-family:var(--display)}
.strip{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.strip i{height:22px;border-radius:5px;background:rgba(255,255,255,.07)}
.strip i.a{background:var(--amber)} .strip i.g{background:var(--green)}
.key{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 6px 0 0;vertical-align:-1px}
.key.a{background:var(--amber)} .key.g{background:var(--green);margin-left:14px}

.compare{margin:1.4em 0 1.7em;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-family:var(--body)}
.cside{background:var(--panel);border-radius:16px;padding:16px 18px;display:grid;gap:12px;box-shadow:0 1px 0 var(--line)}
.cside.win{box-shadow:0 0 0 2px var(--good)}
.cl{font-size:14px;font-weight:700}
.cbar{font-size:13.5px;color:var(--muted);display:grid;gap:6px}
.cn{font-family:var(--display);font-weight:700;font-size:24px;color:var(--ink);margin-right:4px}
.dots,.days{display:flex;flex-wrap:wrap;gap:4px}
.dots i{width:12px;height:12px;border-radius:50%;background:#C2410C;opacity:.75}
.days i{width:12px;height:12px;border-radius:3px;background:var(--green)}
.compare figcaption{grid-column:1/-1;font-size:15px;font-weight:600;color:var(--good);text-align:center}
@media (max-width:480px){.compare{grid-template-columns:1fr}}

.prose .recap{list-style:none;padding:0;display:grid;gap:10px;font-family:var(--body);font-size:16px;line-height:1.45}
.recap li{margin:0;background:var(--panel);border-radius:14px;padding:14px 16px 14px 48px;position:relative;box-shadow:0 1px 0 var(--line)}
.recap li::before{content:"✓";position:absolute;left:16px;top:13px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:700}

/* workspace */
.work{margin-top:48px;scroll-margin-top:90px}
.work>h2{font-family:var(--display);font-size:clamp(26px,3.2vw,32px);letter-spacing:-.02em;margin:0 0 6px}
.work>.wi{margin:0 0 18px;color:var(--muted);font-size:16.5px}
.task{background:var(--panel);border-radius:18px;padding:20px;margin-bottom:12px;box-shadow:0 1px 0 var(--line),0 10px 28px rgba(15,34,48,.05)}
.thead{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start}
.tnum{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;border:1.5px solid var(--line);color:var(--muted)}
.task.ok .tnum{background:var(--good);border-color:var(--good);color:#fff;font-size:0}
.task.ok .tnum::after{content:"✓";font-size:13px}
.ttl{font-weight:700;font-size:17px;line-height:1.35}
.tsub{font-size:14.5px;color:var(--muted);margin-top:2px}
.tcount{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;padding-top:3px}
.task.ok .tcount{color:var(--good)}
.tbody{margin:14px 0 0 40px;display:grid;gap:8px}
@media (max-width:560px){.tbody{margin-left:0}}
.rlist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.rlist{grid-template-columns:1fr}}
.ritem{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}
.ritem:focus-within{border-color:var(--accent)}
.ritem input[type=text]{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:500 15px var(--body);padding:10px 12px}
.ritem input[type=text]:focus{outline:none}
.fr{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);padding:0 10px;cursor:pointer;white-space:nowrap;border-left:1px solid var(--line);align-self:stretch}
.fr input{accent-color:var(--accent);margin:0}
.addmore{justify-self:start;border:0;background:none;color:var(--accent);font:600 14px var(--body);cursor:pointer;padding:4px 0}
.tbody .hint{font-size:13.5px;color:var(--muted)}
.rows3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:560px){.rows3{grid-template-columns:1fr}}
.rowpick{position:relative}
.rowpick input{position:absolute;opacity:0}
.rowpick span{display:grid;gap:2px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--bg)}
.rowpick b{font-size:15px}
.rowpick small{font-size:13px;color:var(--muted)}
.rowpick input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.rowpick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.calcdone{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
.calcdone b{color:var(--good)}
.mini{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;padding:7px 12px;font:600 14px var(--body);cursor:pointer;text-decoration:none}
.tail{margin:18px 0 0;font-family:var(--story);font-size:18px;color:var(--muted)}

.finish{margin-top:28px;display:grid;gap:10px;justify-items:start}
.finish .btn{font-size:17px;padding:16px 26px}
.finish small{color:var(--muted)}
.done{margin-top:28px;border-radius:22px;padding:28px 26px;background:radial-gradient(80% 80% at 100% 0%,rgba(79,207,147,.14),transparent 60%),#0F2230;color:var(--on-navy);display:grid;gap:14px}
.done .check{width:48px;height:48px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#0F2230;font-size:24px;font-weight:700;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.done .check{animation:none}}
.done h2{margin:0;color:#fff;font-family:var(--display);font-size:30px;letter-spacing:-.02em}
.saved{display:flex;flex-wrap:wrap;gap:8px}
.saved span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 12px;font-size:14px}
.saved span b{color:#fff}
.done p{margin:0;font-size:16.5px}
.done .btn{justify-self:start}

/* ================= screen 3: unlock ================= */
.unlock{min-height:100vh;min-height:100dvh;color:var(--on-navy);
  background:radial-gradient(60% 50% at 85% 0%,rgba(79,207,147,.12),transparent 60%),radial-gradient(60% 60% at 0% 0%,rgba(127,208,240,.10),transparent 60%),linear-gradient(180deg,#0F2230,#0A1922)}
.unlock header{display:flex;align-items:center;justify-content:space-between;padding:18px max(24px,env(safe-area-inset-left,0px))}
.back{color:var(--on-navy);text-decoration:none;font-size:14.5px;font-weight:600;background:none;border:0;cursor:pointer;padding:8px 0}
.back:hover{color:#fff}
.ugrid{max-width:1060px;margin:0 auto;padding:24px 24px 72px;display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"intro offer" "path offer";grid-template-rows:auto 1fr;column-gap:56px;align-items:start}
.uleft{grid-area:intro}.upath{grid-area:path}.offer{grid-area:offer}
@media (max-width:900px){.ugrid{grid-template-columns:1fr;grid-template-areas:"intro" "offer" "path";row-gap:28px;max-width:520px;padding:8px 16px 56px}.unlock .wm{display:none}}
.ubadge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.ubadge i{width:22px;height:22px;border-radius:50%;background:var(--green);color:#0F2230;display:grid;place-items:center;font-style:normal;font-size:12px}
.uleft h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.4vw,48px);line-height:1.04;letter-spacing:-.03em;color:#fff;margin:14px 0 14px;text-wrap:balance}
.uleft .lede{font-size:17.5px;margin:0 0 26px;max-width:52ch}
.usaved{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
@media (max-width:900px){.usaved{margin:0}}
.usaved span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 12px;font-size:14px}
.usaved span b{color:#fff}
.path{list-style:none;margin:0;padding:0;display:grid}
.path li{position:relative;display:grid;grid-template-columns:30px 1fr;gap:14px;padding:0 0 16px}
.path li:not(:last-child)::after{content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:rgba(255,255,255,.1)}
.path .pn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--body);border:1.5px solid rgba(127,208,240,.4);color:var(--sky);background:#0F2230}
.path li.d .pn{background:var(--green);border-color:var(--green);color:#0F2230}
.path b{display:block;color:#fff;font-size:16px;line-height:1.3;margin-top:4px}
.path small{display:block;font-size:14px;color:var(--on-navy-muted);line-height:1.4;margin-top:2px}
.path li.d b{color:var(--on-navy-muted);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.bon{margin:10px 0 0 44px;font-size:14.5px;color:var(--on-navy)}
.bon b{color:#fff}
.offer{position:sticky;top:24px;background:var(--panel);color:var(--ink);border-radius:22px;padding:26px 26px 22px;box-shadow:0 30px 70px rgba(0,0,0,.35);display:grid;gap:14px}
@media (max-width:900px){.offer{position:static}}
.otag{justify-self:start;display:inline-flex;align-items:center;gap:8px;background:#FFF4E2;color:#7A4A06;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.otag i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(233,162,59,.25)}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price .now{font-family:var(--display);font-weight:700;font-size:56px;line-height:1;letter-spacing:-.03em}
.price .was{font-size:18px;color:var(--muted);text-decoration:line-through}
.price .one{font-size:14px;color:var(--muted);flex-basis:100%}
.timer{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.timer div{background:var(--soft);border-radius:10px;padding:8px 4px;text-align:center}
.timer b{display:block;font:700 20px var(--display);font-variant-numeric:tabular-nums}
.timer span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tnote{font-size:13.5px;color:var(--muted);margin:-4px 0 0}
.incl{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.incl li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.incl li::before{content:"✓";color:var(--good);font-weight:700}
.offer .btn{width:100%;font-size:17px;padding:16px 20px}
.ofine{font-size:13px;color:var(--muted);text-align:center;margin:0}
.ofine a{color:var(--muted)}

/* offer v2 (Mobbin: Open, Gusto, Zillow, MasterClass, Stripe checkout) */
.offer{gap:16px;padding:24px}
.ohead{display:grid;gap:2px}
.ot{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.015em}
.os{font-size:14px;color:var(--muted)}
.lines{border:1px solid var(--line);border-radius:14px;padding:4px 16px}
.ln{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;font-size:15px;font-variant-numeric:tabular-nums}
.ln+.ln{border-top:1px solid var(--line)}
.ln.disc{color:var(--good);font-weight:600}
.ln>span:last-child,.ln>b{white-space:nowrap}
.ln.disc em{font-style:normal;font-weight:600;font-size:12.5px;color:#7A4A06;background:#FFF4E2;border-radius:999px;padding:2px 8px;margin-left:6px;white-space:nowrap}
.ln.due{font-weight:700;font-size:16px}
.ln.due b{font-family:var(--display);font-size:30px;letter-spacing:-.02em}
.offer .btn{white-space:normal;line-height:1.25}
.notnow{justify-self:center;background:none;border:0;color:var(--muted);font:600 14.5px var(--body);cursor:pointer;padding:2px 6px;margin-top:-6px}
.notnow:hover{color:var(--ink);text-decoration:underline}
.next3{background:var(--soft);border-radius:14px;padding:14px 16px}
.nl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.next3 ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;counter-reset:n}
.next3 li{counter-increment:n;display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;line-height:1.4;color:var(--muted)}
.next3 li::before{content:counter(n);width:22px;height:22px;border-radius:50%;background:var(--panel);border:1.5px solid var(--line);display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--ink)}
.next3 li b{color:var(--ink);font-weight:600}
.ofine{text-align:left;font-size:12.5px}
.trust{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.trust a{color:var(--muted)}
/* up-next highlight on the path */
.path li.nx .pn{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.path li.nx b::after{content:"Up next";margin-left:8px;font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--amber);vertical-align:2px}

/* quick checks (Turo / Brilliant style) */
.qc{margin:1.5em 0 1.8em;background:var(--panel);border-radius:18px;padding:20px 22px;font-family:var(--body);box-shadow:0 1px 0 var(--line),0 10px 28px rgba(15,34,48,.05)}
.qk{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.prose .qq{font-size:17.5px;font-weight:600;line-height:1.4;margin:0 0 14px}
.qo{display:grid;gap:8px}
.qo button{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;text-align:left;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;padding:11px 14px;font:500 16px var(--body);cursor:pointer;transition:border-color .15s,background .15s}
.qo button:hover:not(:disabled){border-color:var(--muted)}
.qo .ql{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--muted)}
.qo button:disabled{cursor:default}
.qo button.right{border-color:var(--good);background:#EAF7F0}
.qo button.right .ql{background:var(--good);border-color:var(--good);color:#fff}
.qo button.wrong{border-color:#C2410C;background:#FDF0EA}
.qo button.wrong .ql{background:#C2410C;border-color:#C2410C;color:#fff}
.qo button.dim{opacity:.5}
.qa{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:15.5px;line-height:1.5}
.qa .qv{color:var(--good)}
.qc.miss .qa .qv{color:#C2410C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .qo button.right{background:#123528}:root:not([data-theme="light"]) .qo button.wrong{background:#3A1E14}}

/* lesson meta (Uxcel) */
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0;font-size:14px;color:var(--on-navy-muted)}
.meta span{display:inline-flex;align-items:center;gap:7px}
.meta i{width:6px;height:6px;border-radius:50%;background:var(--sky)}

/* section ticks in the side contents (Turo) */
.side .toc a{position:relative;padding-left:30px}
.side .toc a::before{content:"";position:absolute;left:8px;top:8px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg)}
.side .toc a.seen::before{background:var(--good);border-color:var(--good)}
.side .toc a.seen::after{content:"";position:absolute;left:12px;top:10px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.side .toc a.cur{box-shadow:none;color:var(--ink);font-weight:600}
.side .toc a.cur::before{border-color:var(--amber);background:var(--amber)}

/* sticky bottom progress bar (Turo) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:19;background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.dockin{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px max(24px,env(safe-area-inset-left,0px))}
.dlab{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dbar{flex:1;max-width:360px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.dbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.dpct{font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px}
.dnext{margin-left:auto;border:0;border-radius:10px;background:#0F2230;color:#fff;font:700 15px var(--body);padding:10px 16px;cursor:pointer;white-space:nowrap}
.dnext.go{background:var(--amber);color:var(--amber-ink)}
@media (max-width:560px){.dlab{display:none}.dnext{padding:10px 14px;font-size:14px}}
#lesson{padding-bottom:64px}
.readbar{display:none}

/* next-up card (Square) */
.nextup{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px}
.nextup .nn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(127,208,240,.14);color:var(--sky);font:700 17px var(--display)}
.nextup small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.nextup b{color:#fff;font-size:17px}
.nextup span{display:block;font-size:14px;color:var(--on-navy-muted)}

/* one tree: the current step expands to show its sections */
.side{max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin;padding-bottom:8px}
.side .toc{grid-column:1/-1;margin:10px -4px 2px;padding:10px 0 0;border-top:1px solid var(--line);display:grid;gap:1px}
.side li.on{padding-bottom:10px}
.side .toc a{font-weight:400}

/* three columns: guide steps left, lesson centre, sections right */
.layout,.lhin,.dockin{max-width:1320px}
.layout{grid-template-columns:230px minmax(0,680px) 210px;gap:48px;justify-content:center}
.lhin{grid-template-columns:230px minmax(0,680px) 210px;gap:48px;justify-content:center}
.lhin>div{grid-column:2}
.onpage{position:sticky;top:84px;align-self:start;padding-top:40px;max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin}
.onpage h4{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.onpage .toc{margin:0;padding:0;border:0;display:grid;gap:1px}
.onpage .toc a{display:block;position:relative;padding:5px 8px 5px 26px;font-size:13.5px;color:var(--muted);text-decoration:none;border-radius:8px;line-height:1.35}
.onpage .toc a:hover{color:var(--ink)}
.onpage .toc a::before{content:"";position:absolute;left:4px;top:7px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--line);background:var(--bg) no-repeat center/8px 8px}
.onpage .toc a.seen::before{background-color:var(--good);border-color:var(--good);background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2 5.2l2 2L8 3%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")}
.onpage .toc a.cur{color:var(--ink);font-weight:600}
.onpage .toc a.cur::before{border-color:var(--amber);background:var(--amber)}
@media (max-width:1200px){.layout,.lhin{grid-template-columns:230px minmax(0,1fr)}.onpage{display:none}}
@media (max-width:900px){.layout,.lhin{grid-template-columns:1fr;gap:0}.lhin>div{grid-column:1}}

/* tables in prose */
.prose table{width:100%;border-collapse:collapse;font-family:var(--body);font-size:14.5px;margin:0;font-variant-numeric:tabular-nums;line-height:1.45}
.tablewrap{overflow-x:auto;margin:1.2em 0 1.5em;background:var(--panel);border-radius:14px;box-shadow:0 1px 0 var(--line)}
.prose th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 14px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.prose td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose tr:last-child td{border-bottom:0}
.prose td:first-child{font-weight:600}
.callout.script{border-left-color:var(--sky);font-family:var(--body);font-size:16.5px;font-style:normal;background:var(--panel)}
.callout.script::before{content:"Script";display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.yours.y2 .big{color:var(--accent)}

/* step 2: scorer */
.scorer .srows{display:grid;gap:8px}
.scorer .srow{display:grid;grid-template-columns:1fr 250px 84px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.scorer .sl{font-size:15px;color:#fff}
.scorer .sin{width:100%;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#fff;font:600 15px var(--body);padding:8px 10px}
.scorer select.sin{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9FB6C2 50%),linear-gradient(135deg,#9FB6C2 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px;font-weight:500;font-size:14px}
.scorer select.sin option{color:#0F2230}
.scorer .sin:focus{outline:none;border-color:var(--sky)}
.chip{justify-self:end;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--on-navy-muted);white-space:nowrap}
.chip.s{background:rgba(79,207,147,.16);color:var(--green)} .chip.o{background:rgba(233,162,59,.16);color:var(--amber)} .chip.w{background:rgba(255,120,90,.16);color:#FF9C80}
@media (max-width:620px){.scorer .srow{grid-template-columns:1fr auto;row-gap:6px}.scorer .sin{grid-column:1/-1;grid-row:2}.scorer .chip{grid-row:1;grid-column:2}}
.verdict2{border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.05);font-size:15.5px;line-height:1.5}
.verdict2 b{color:#fff}
.verdict2.s{background:rgba(79,207,147,.12)} .verdict2.s b{color:var(--green)}
.verdict2.o{background:rgba(233,162,59,.12)} .verdict2.o b{color:var(--amber)}
.verdict2.w{background:rgba(255,120,90,.10)} .verdict2.w b{color:#FF9C80}

/* step 2: worksheet */
.wsheet{margin:1.2em 0 1.6em;background:var(--panel);border-radius:18px;padding:6px 20px 16px;font-family:var(--body);box-shadow:0 1px 0 var(--line),0 10px 28px rgba(15,34,48,.05)}
.wsh{display:flex;justify-content:space-between;align-items:center;padding:12px 0 8px;border-bottom:2px solid var(--line)}
.wl2{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.wsd{font-size:13px;font-weight:700;color:var(--muted)}
.wsd.ok{color:var(--good)}
.wsr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.wsr>span{font-weight:600;line-height:1.35}
.wsr input{width:100%;min-width:0;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:9px;padding:8px 10px;font:500 15px var(--body)}
.wsr input:focus{outline:none;border-color:var(--accent)}
.wsr.ro b{font-weight:600;color:var(--muted)}
.wsr.ro b.set{color:var(--ink)}
.wsr.gap{border-bottom:0;align-items:start}
.gaps{display:flex;flex-wrap:wrap;gap:6px}
.gaps button{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 12px;font:600 13.5px var(--body);cursor:pointer}
.gaps button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
@media (max-width:560px){.wsr{grid-template-columns:1fr;gap:6px}}

/* step 2: action checklist */
.task.chk{padding:8px 20px}
.task.chk label{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:16px;line-height:1.45}
.task.chk label:last-child{border-bottom:0}
.task.chk input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:1px 0 0;border:2px solid var(--line);border-radius:7px;cursor:pointer;background:var(--panel) no-repeat center/12px 12px}
.task.chk input:checked{background-color:var(--good);border-color:var(--good);background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2 5.2l2 2L8 3%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")}
.task.chk input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(82,104,117,.5)}

/* sidebar steps you can open */
.side li.open{cursor:pointer}
.side li.open:hover{color:var(--ink)}

/* unlock: numbers + sample page */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:26px 0 0}
.nums div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px}
.nums b{display:block;font-family:var(--display);font-size:26px;color:#fff;line-height:1.1}
.nums span{font-size:13px;color:var(--on-navy-muted)}
@media (max-width:560px){.nums{grid-template-columns:1fr 1fr}}
.sample{margin:22px 0 0;border-radius:18px;overflow:hidden;background:#F7F4EE;color:#1C2A33;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.sample figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;background:#ECE6DA;font-size:13px}
.sample .sk{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A5A20}
.sample .st2{font-weight:600}
.spage{position:relative;padding:18px 20px 8px;font-family:var(--story);font-size:17px;line-height:1.6;max-height:300px;overflow:hidden}
.spage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(247,244,238,0),#F7F4EE 85%)}
.spage p{margin:0 0 .8em}
.sscript{font-family:var(--body);font-size:15px;border-left:3px solid #7FD0F0;padding:4px 0 4px 14px}
.sscript span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0B6E99;margin-bottom:4px}

/* step 2: operators */
.yours .big small{font-size:16px;margin-left:3px;color:var(--muted);font-family:var(--body)}
.who,.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1.2em 0 1.5em;font-family:var(--body)}
@media (max-width:560px){.who,.two{grid-template-columns:1fr}}
.whoc,.twoc{background:var(--panel);border-radius:16px;padding:16px 18px;box-shadow:0 1px 0 var(--line);display:grid;gap:4px;align-content:start}
.whoc:first-child{box-shadow:0 0 0 2px var(--accent)}
.wk{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.whoc b,.twoc b{font-size:16.5px;line-height:1.35}
.whoc p,.twoc p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.twoc.hot{background:#0F2230;box-shadow:none}
.twoc.hot .wk{color:var(--amber)} .twoc.hot b{color:#fff} .twoc.hot p{color:var(--on-navy)}
.prose .relist{list-style:none;padding:0;margin:.4em 0 1.3em;display:grid;gap:8px;font-family:var(--body);font-size:16px;line-height:1.5}
.relist li{margin:0;position:relative;padding:12px 14px 12px 44px;background:var(--panel);border-radius:12px;box-shadow:0 1px 0 var(--line)}
.relist li::before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2 5.2l2 2L8 3%27 fill=%27none%27 stroke=%27%230B6E99%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center/11px}
.relist.earn li::before{background:#EAF7F0 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M5 2v6M2.5 4.5 5 2l2.5 2.5%27 fill=%27none%27 stroke=%27%231E7A4C%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center/11px}
.relist b{font-weight:700}
.rates .rtab{display:grid}
.rates .rh,.rates .rr{display:grid;grid-template-columns:96px 1fr 150px;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px}
.rates .rh{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-muted);padding-top:0}
.rates .rh .ry{color:var(--sky)} .rates .rh .ry b{color:var(--sky)}
.rates .rr>span:first-child{font-weight:600;color:#fff}
.rates .rr small{display:block;font-size:12.5px;color:var(--on-navy-muted)}
.rates .rr>b{color:var(--green);font-variant-numeric:tabular-nums;text-align:right}
.rates .rr:last-child{border-bottom:0}
.rates figcaption{font-size:13.5px;color:var(--on-navy-muted)}
@media (max-width:560px){.rates .rh,.rates .rr{grid-template-columns:78px 1fr;row-gap:2px}.rates .rh .ry{display:none}.rates .rr>b{grid-column:2;text-align:left}}
.invoice{margin:1.3em 0 1.5em;max-width:460px;background:#FFFDF8;color:#1C2A33;border-radius:14px;padding:18px 20px;font-family:var(--body);box-shadow:0 1px 0 var(--line),0 14px 34px rgba(15,34,48,.10);border-top:4px solid var(--amber)}
.ivh{display:grid;margin-bottom:8px}
.ivh span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A6A2A}
.ivh b{font-size:18px} .ivh small{font-size:13.5px;color:#5E6E78}
.ivr{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed #E2DCCF;font-size:15px}
.ivr b{font-variant-numeric:tabular-nums}
.ivr.hl{background:#FFF4E2;margin:0 -10px;padding:8px 10px;border-radius:8px;border-bottom-color:transparent}
.ivr.hl b{color:#9A520A}
.ivr.tot{border-bottom:0;font-weight:700;font-size:16.5px;padding-top:10px}
.invoice figcaption{margin-top:8px;font-size:12.5px;color:#5E6E78}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .relist.earn li::before{background-color:#123528}}
.prose .mist{list-style:none;padding:0;margin:1em 0 1.4em;display:grid;gap:10px;counter-reset:m;font-family:var(--body)}
.mist li{counter-increment:m;margin:0;position:relative;background:var(--panel);border-radius:16px;padding:16px 18px 16px 58px;box-shadow:0 1px 0 var(--line);display:grid;gap:4px}
.mist li::before{content:counter(m);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#FDF0EA;color:#C2410C;font:700 14px var(--display)}
.mist .mc{justify-self:start;font-size:12px;font-weight:700;color:#C2410C;background:#FDF0EA;border-radius:999px;padding:2px 9px}
.mist b{font-size:16.5px;line-height:1.35}
.mist p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.mist .fix{font-size:14px;font-weight:600;color:var(--good)}
.mist .fix::before{content:"→ "}

.prose h3.sub3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;margin:1.6em 0 .4em}
.addons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:1em 0 1.3em;font-family:var(--body)}
@media (max-width:560px){.addons{grid-template-columns:1fr}}
.addons div{background:var(--panel);border-radius:12px;padding:12px 14px;box-shadow:0 1px 0 var(--line);display:grid;gap:2px;align-content:start}
.addons b{font-size:15.5px} .addons span{font-size:14px;color:var(--muted);line-height:1.4}
.prose .life{list-style:none;padding:0;margin:1.2em 0 1.4em;font-family:var(--body)}
.life li{position:relative;margin:0;padding:0 0 16px 118px;min-height:44px}
.life li::before{content:"";position:absolute;left:96px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--panel);border:2.5px solid var(--sky)}
.life li:not(:last-child)::after{content:"";position:absolute;left:101px;top:21px;bottom:0;width:2px;background:var(--line)}
.life li:nth-child(6)::before{background:var(--amber);border-color:var(--amber)}
.life .lt{position:absolute;left:0;top:2px;width:86px;text-align:right;font-size:12.5px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.life b{display:block;font-size:16px;line-height:1.35}
.life p{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:560px){.life li{padding-left:30px}.life li::before{left:2px}.life li:not(:last-child)::after{left:7px}.life .lt{position:static;display:block;text-align:left;width:auto}}
.year{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:1em 0 1.3em;font-family:var(--body)}
@media (max-width:620px){.year{grid-template-columns:1fr 1fr}}
.year div{background:var(--panel);border-radius:14px;padding:14px;box-shadow:0 1px 0 var(--line);display:grid;gap:2px;align-content:start}
.year .ym{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.year b{font-size:15.5px;line-height:1.3} .year p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.4}
.year .hot{background:#0F2230;box-shadow:none} .year .hot .ym{color:var(--amber)} .year .hot b{color:#fff} .year .hot p{color:var(--on-navy)}

/* ---- Step 2 module pages ---- */
.mod{animation:mfade .25s ease}
@keyframes mfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mod{animation:none}}
.mhead{display:flex;align-items:center;gap:10px;margin:8px 0 6px;font-family:var(--body)}
.mhead .mk{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.mhead .mm{font-size:12.5px;color:var(--muted)}
.mhead .mm::before{content:"·";margin-right:10px}
.prose h2.mt{margin:0 0 .7em;font-size:clamp(28px,3.6vw,38px)}
.prose .takeaway{margin:2em 0 0;padding:16px 18px 16px 18px;border-radius:14px;background:var(--accent-soft);font-family:var(--body)}
.takeaway span,.tryit span,.case .ck{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.takeaway span{color:var(--accent)}
.prose .takeaway p{margin:0;font-size:17px;line-height:1.5;font-weight:600;color:var(--ink)}
.prose .tryit{margin:1.6em 0;padding:14px 18px;border-radius:14px;border:1.5px dashed var(--line);font-family:var(--body)}
.tryit span{color:#8a5a00}
.prose .tryit p{margin:0;font-size:15.5px;line-height:1.55}
.prose .case{margin:1.6em 0;padding:18px 20px 6px;border-radius:16px;background:var(--panel);box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(15,34,48,.35)}
.case .ck{color:var(--muted)} .case .ck em{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none}
.case .ct{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.01em;margin:0 0 .5em}
.prose .case p{font-size:17px}
.prose blockquote.script{margin:1.2em 0;padding:12px 18px;border-left:3px solid var(--sky);background:var(--panel);border-radius:0 12px 12px 0;font-family:var(--body);font-size:15.5px;line-height:1.55}
.prose blockquote.script p{margin:0}
.wrapup{margin-top:3em;padding-top:2em;border-top:1px solid var(--line)}
.prose .wrapup ul:not(.recap){list-style:none;padding:0;font-family:var(--body);font-size:15.5px}
.wrapup li.chk{position:relative;padding-left:30px;margin:0 0 8px}
.wrapup li.chk::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line)}
.prose .tease{font-style:italic;color:var(--muted)}
.mnav{margin:3.2em 0 0;padding-top:28px;border-top:1px solid var(--line);font-family:var(--body);display:grid;gap:14px}
.mprog{display:flex;align-items:center;gap:14px}
.mprog .segs{flex:1;display:flex;gap:5px}
.mprog .segs i{flex:1;height:6px;border-radius:99px;background:var(--line)}
.mprog .segs i.d{background:var(--good)}
.mprog .segs i.c{background:var(--amber)}
.mprog .mpt{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mnext{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:18px;align-items:center;width:100%;padding:22px 24px;border-radius:18px;background:#0F2230;color:#fff;box-shadow:0 14px 30px -18px rgba(15,34,48,.7);transition:transform .15s ease,box-shadow .15s ease}
.mnext:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(15,34,48,.75)}
.mnext:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.mnext .mnk{grid-column:1;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8FD3F4}
.mnext .mnt{grid-column:1;font-family:var(--display);font-size:clamp(20px,2.4vw,24px);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-top:4px}
.mnext .mna{grid-column:2;grid-row:1/3;width:46px;height:46px;border-radius:50%;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center;font-size:22px;font-weight:700;transition:transform .15s ease}
.mnext:hover .mna{transform:translateX(3px)}
.mprev{all:unset;cursor:pointer;justify-self:start;font-size:14px;font-weight:600;color:var(--muted);padding:4px 2px}
.mprev:hover{color:var(--ink);text-decoration:underline}
.mprev:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
.mlast{margin:0;font-size:15px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.mnext,.mnext .mna{transition:none}.mnext:hover{transform:none}}
#s2 .finish{margin-top:2em}
.mstrip{display:none}
@media (max-width:900px){.mstrip{display:flex;align-items:center;gap:6px;margin:18px 0 4px;font-family:var(--body);overflow-x:auto}
.mstrip .ml{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px;white-space:nowrap}
.mstrip button{all:unset;cursor:pointer;flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted);border:1.5px solid var(--line);background:var(--panel)}
.mstrip button.seen{background:var(--good);border-color:var(--good);color:#fff}
.mstrip button.cur{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}}
.side .mods{grid-column:1/-1;margin:10px -4px 2px;padding:10px 0 0;border-top:1px solid var(--line);display:grid;gap:1px}
.side .mods a{position:relative;display:block;padding:5px 10px 5px 30px;font-size:13.5px;font-weight:400;color:var(--muted);text-decoration:none;border-radius:8px;line-height:1.35}
.side .mods a:hover{color:var(--ink)}
.side .mods a::before{content:"";position:absolute;left:8px;top:8px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--line);background:var(--bg)}
.side .mods a.seen::before{background:var(--good) no-repeat center/8px 8px;border-color:var(--good);background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2 5.2l2 2L8 3%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")}
.side .mods a.cur{color:var(--ink);font-weight:600}
.side .mods a.cur::before{border-color:var(--amber);background:var(--amber)}
.side .mods .mn{font-variant-numeric:tabular-nums;color:var(--muted);margin-right:4px;font-weight:600}

/* ---- lesson header: short banner at the start of a step, slim strip on later modules ---- */
.lhead.short .lhin{padding-top:34px;padding-bottom:36px}
.lhead.short h1{font-size:clamp(30px,3.8vw,44px);margin:8px 0 16px}
.lhead.short .learn{grid-template-columns:1fr 1fr;gap:6px 24px;font-size:15px}
.lhead.short .learn li{grid-template-columns:18px 1fr;gap:8px}
.lhead.short .learn li::before{margin-top:7px;margin-left:3px}
.lhead.short .meta{margin-top:14px}
.lhead.slim .ph,.lhead.slim h1,.lhead.slim .learn,.lhead.slim .meta{display:none}
.lhead.slim .lhin{padding-top:14px;padding-bottom:14px}
.lhead.slim .kick{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lhead.slim .kick b{color:#fff;font-weight:700}
.lhead.slim .lhin{grid-template-columns:minmax(0,1fr)}.lhead.slim .lhin>div{grid-column:1;min-width:0;max-width:none}
@media (min-width:901px){.lhead.slim .lhin{grid-template-columns:230px minmax(0,680px) 210px}.lhead.slim .lhin>div{grid-column:2}}
@media (min-width:901px) and (max-width:1200px){.lhead.slim .lhin{grid-template-columns:230px minmax(0,1fr)}}
@media (max-width:900px){
  .lhead.short .ph,.lhead.short .learn{display:none}
  .lhead.short .lhin{padding:22px 20px 56px}
  .lhead.short h1{font-size:28px;margin:6px 0 4px}
  .lhead.short .meta{margin-top:10px;font-size:13px}
  .lhead.slim .lhin{padding:12px 20px}
  .lhead.slim .kick{font-size:11.5px}
}
#y2[hidden] ~ .prose .mod .mhead{margin-top:34px}
@media (max-width:900px){#y2[hidden] ~ .prose .mod .mhead{margin-top:14px}}

/* ===================== Clean pass (Coursera-style): white page, one sans, thin borders ===================== */
:root{
  --bg:#FFFFFF; --panel:#FFFFFF; --soft:#F5F7F8; --line:#E1E6EA; --ink:#1B2A35; --muted:#5A6B76;
  --accent:#0B6E99; --accent-soft:#EDF5F9; --amber-text:#9A5A06;
  --display:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --story:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0E1A21;--panel:#121F27;--soft:#16252E;--line:#24343E;--ink:#E4EEF3;--muted:#9FB3BE;--accent-soft:#132A36;--amber-text:#E9A23B}}
:root[data-theme="dark"]{--bg:#0E1A21;--panel:#121F27;--soft:#16252E;--line:#24343E;--ink:#E4EEF3;--muted:#9FB3BE;--accent-soft:#132A36;--amber-text:#E9A23B}
body{font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* buttons: flat, small radius, no glow */
.btn{border-radius:6px;padding:12px 22px;font:600 16px var(--body);gap:8px}
.btn.amber{box-shadow:none}
.btn.amber:hover{filter:none;background:#DD942C}
.btn>span[aria-hidden="true"]{display:none}
.finish .btn{font-size:16px;padding:13px 26px}
.offer .btn{font-size:16px;padding:14px 20px}
.gbtn,.field input,.mini{border-radius:6px;border-width:1px}
.dnext{border-radius:6px;font:600 15px var(--body);padding:9px 16px}

/* top bar: white with a hairline */
.top{background:var(--panel);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.topin{padding-top:10px;padding-bottom:10px}
.top .brand{color:var(--ink)}
.top .wm{font-weight:700;letter-spacing:-.01em;font-size:18px}
.top .wm .t{color:var(--ink);opacity:1;font-weight:700}
.top .wm .a{color:var(--amber-text)}
.prog{color:var(--muted);font-weight:600}
.prog .bar{background:var(--line);height:4px}
.avatar{background:var(--accent);color:#fff}

/* lesson header: plain title block, no dark band */
.lhead{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.lhead .ph{display:none}
.kick{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.lhead.slim .kick b{color:var(--ink);font-weight:600}
.lhead h1,.lhead.short h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.2vw,38px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-shadow:none;margin:6px 0 18px}
.lhead.short .lhin{padding-top:32px;padding-bottom:28px}
.learn li,.lhead .learn li{color:var(--ink)}
.lhead.short .learn{font-size:16px;gap:8px 28px}
.learn li::before,.lhead.short .learn li::before{width:16px;height:16px;margin:4px 0 0;border-radius:0;box-shadow:none;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%230B6E99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.meta{color:var(--muted);font-size:14px}
.meta i{background:var(--line)}
.lhead.slim .lhin{padding-top:14px;padding-bottom:14px}
@media (max-width:900px){.lhead.short .lhin{padding:22px 20px 20px}.lhead.short h1{font-size:26px;margin:4px 0 2px}}

/* sidebar: quiet list, current item marked with a left rule */
.side h4,.onpage h4{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--ink);margin-bottom:10px}
.side li{border-radius:0 6px 6px 0;font-size:15px;padding:9px 12px;box-shadow:inset 3px 0 0 transparent}
.side li .sn{width:22px;height:22px;border-width:1px;font-size:12px}
.side li.on{background:var(--soft);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
.side .mods a,.side .toc a,.onpage .toc a{font-size:14px;border-radius:4px}
.onpage .toc a{color:var(--muted)}

/* reading column */
.prose{font-family:var(--body);font-size:18px;line-height:1.7;color:var(--ink)}
@media (max-width:560px){.prose{font-size:17px}}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(23px,2.4vw,27px);letter-spacing:-.005em;line-height:1.25;margin:2.2em 0 .55em}
.prose h2.mt{font-size:clamp(28px,3vw,34px);line-height:1.18;margin:0 0 .6em}
.prose h3.sub3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:0;margin:1.8em 0 .4em}
.prose strong{font-weight:700}
.mhead .mk,.qk,.yours .yl,.wl,.wl2,.wk,.ym,.timeline .tk,.takeaway span,.tryit span,.case .ck,.nl,.mnext .mnk,.mprog .mpt,.dlab{letter-spacing:.04em;font-weight:700;font-size:12px}
.tail{font-family:var(--body);font-size:16.5px}
.prose .tease{font-style:normal}

/* cards: one radius, hairline border, no drop shadows */
.yours,.qc,.task,.cside,.recap li,.tablewrap,.wsheet,.whoc,.twoc,.relist li,.mist li,.addons div,.year div,.prose .case,.prose .takeaway,.prose .tryit,.callout,.invoice,.prose blockquote.script{border-radius:8px;box-shadow:none;border:1px solid var(--line)}
.yours{margin:28px 0 36px;padding:18px 22px;background:var(--soft);border-color:var(--line)}
.yours .big{font-family:var(--display);font-size:44px}
.yours p{font-size:16px}
.whoc:first-child{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cside.win{border-color:var(--good);box-shadow:inset 0 0 0 1px var(--good)}
.callout{border-left:3px solid var(--amber);border-radius:0 8px 8px 0;background:var(--soft);font-size:17px}
.callout.script,.prose blockquote.script{border-left:3px solid var(--accent);background:var(--soft)}
.prose .takeaway{background:var(--accent-soft);border-color:transparent}
.prose .tryit{border-style:dashed}
.invoice{border-top:3px solid var(--amber)}
.cn,.case .ct,.crow.tot b,.ln.due b,.price .now,.timer b,.nextup .nn,.mist li::before{font-family:var(--display)}
.mist li::before{border-radius:6px}
.qo button{border-radius:6px;border-width:1px;font:400 16px var(--body)}
.qo .ql{border-radius:4px;border-width:1px}
.qa{border-radius:6px}
.prose .qq{font-size:18px}
.ritem,.rowpick span,.wsr input,.gaps button{border-width:1px;border-radius:6px}
.ritem,.rowpick span,.wsr input{background:var(--panel)}
.tnum{border-width:1px}
.timeline li::before,.life li::before{border-width:2px;border-color:var(--accent)}

/* data panels: light instead of navy slabs */
.widget{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:20px 24px}
.wl{color:var(--accent)}
.wsub,.wrate,.ul,.ticks,.widget figcaption small,.rates figcaption,.rates .rh,.rates .rr small{color:var(--muted)}
.rin{background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:6px}
.rin input{color:var(--ink)}
.un{font-family:var(--display);color:var(--ink)}
.un.g{color:var(--good)}
.widget .range{background:linear-gradient(90deg,var(--accent) 0 var(--p,25%),var(--line) var(--p,25%) 100%)}
.widget .range::-webkit-slider-thumb{border-color:var(--accent);background:var(--panel)}
.widget figcaption,.widget figcaption b,.crow b,.scorer .sl,.rates .rr>span:first-child,.verdict2 b{color:var(--ink)}
.crow{border-bottom-color:var(--line)}
.crow.tot b{color:var(--amber-text)}
.strip i,.month i{background:#E9EEF1}
.strip i.a,.month i.a{background:var(--amber)} .strip i.g,.month i.g{background:var(--green)}
.scorer .srow,.rates .rh,.rates .rr{border-bottom-color:var(--line)}
.scorer .sin{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:6px}
.scorer .sin:focus{border-color:var(--accent)}
.chip{background:var(--soft);color:var(--muted)}
.chip.s{background:#EAF7F0;color:var(--good)} .chip.o{background:#FFF4E2;color:var(--amber-text)} .chip.w{background:#FDF0EA;color:#C2410C}
.verdict2{background:var(--soft);border-radius:6px}
.verdict2.s{background:#EAF7F0} .verdict2.s b{color:var(--good)}
.verdict2.o{background:#FFF4E2} .verdict2.o b{color:var(--amber-text)}
.verdict2.w{background:#FDF0EA} .verdict2.w b{color:#C2410C}
.rates .rh .ry,.rates .rh .ry b{color:var(--accent)}
.rates .rr>b{color:var(--good)}
.twoc.hot,.year .hot{background:var(--soft);border:1px solid var(--line)}
.twoc.hot .wk,.year .hot .ym{color:var(--amber-text)}
.twoc.hot b,.year .hot b{color:var(--ink)}
.twoc.hot p,.year .hot p{color:var(--muted)}

/* step complete + next module */
.done{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:28px}
.done h2{color:var(--ink);font-family:var(--display);font-size:26px;letter-spacing:-.005em}
.done .check{width:40px;height:40px;font-size:20px;background:var(--good);color:#fff;animation:none}
.saved span{background:var(--soft);border:1px solid var(--line);border-radius:6px}
.saved span b{color:var(--ink)}
.nextup{background:var(--soft);border:1px solid var(--line);border-radius:8px}
.nextup .nn{background:var(--accent-soft);color:var(--accent);border-radius:6px}
.nextup small{color:var(--accent)}
.nextup b{color:var(--ink)}
.nextup span{color:var(--muted)}
.mnext{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:none;padding:20px 22px;transition:border-color .15s}
.mnext:hover{transform:none;box-shadow:none;border-color:var(--accent)}
.mnext .mnk{color:var(--accent)}
.mnext .mnt{font-family:var(--display);font-size:clamp(19px,2vw,22px);letter-spacing:0}
.mnext .mna{width:40px;height:40px;font-size:19px}
.mprog .segs i{height:4px}

/* bottom progress dock: solid white */
.dock{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
.dbar{height:4px}
.dlab{text-transform:none;letter-spacing:0;font-size:13px}

/* ===================== Paywall, clean ===================== */
.unlock{background:var(--bg);color:var(--ink);padding-bottom:40px}
.unlock header.utop{position:sticky;top:0;z-index:20;display:block;padding:0;background:var(--panel);box-shadow:0 1px 0 var(--line)}
.utopin{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(24px,env(safe-area-inset-left,0px))}
.unlock .wm{font-weight:700;letter-spacing:-.01em;font-size:18px}
.unlock .wm .t{color:var(--ink);opacity:1;font-weight:700}.unlock .wm .a{color:var(--amber-text)}
.unlock .brand{color:var(--ink)}
.unlock .back{color:var(--muted);font:600 15px var(--body)}.unlock .back:hover{color:var(--ink)}
.ugrid{max-width:1120px;padding:40px 24px 40px;grid-template-columns:minmax(0,1fr) 380px;column-gap:64px}
.uprog{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ubadge{color:var(--good);letter-spacing:0;text-transform:none;font-size:15px;font-weight:700}
.ubadge i{background:var(--good);color:#fff}
.usegs{display:flex;gap:3px;flex:1;max-width:260px}.usegs i{flex:1;height:4px;border-radius:2px;background:var(--line)}.usegs i.d{background:var(--good)}
.uleft h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,40px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:18px 0 12px}
.uleft .lede{font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 24px;max-width:60ch}
.plan{border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:18px 20px}
.plk{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.plgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.plgrid div{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;display:grid;gap:2px}
.plgrid b{font-family:var(--display);font-size:22px;white-space:nowrap;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.plgrid b.g{color:var(--good)}
.plgrid span{font-size:14px;color:var(--muted);line-height:1.35}
.plnote{margin:14px 0 0;font-size:15.5px;color:var(--ink)}
.plnote b{font-weight:700}
.upath{margin-top:36px}
.usec{margin-top:48px}
.usec h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.005em;margin:0}
.usub{margin:4px 0 16px;color:var(--muted);font-size:16px}
.sample{margin:0;border-radius:8px;background:var(--panel);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.sample figcaption{background:var(--soft);border-bottom:1px solid var(--line);font-size:14px}
.sample .sk{color:var(--accent);font-size:12px;letter-spacing:.04em}
.spage{font-family:var(--body);font-size:17px;max-height:340px}
.spage::after{background:linear-gradient(180deg,rgba(255,255,255,0),var(--panel) 85%)}
.sscript{border-left-color:var(--accent)}.sscript span{color:var(--accent)}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool{display:grid;grid-template-columns:40px 1fr;gap:14px;border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--panel)}
.ti{width:40px;height:40px;border-radius:6px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.tool b{display:block;font-size:16px;line-height:1.3}
.tool p{margin:3px 0 6px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.tool small{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--soft);border-radius:4px;padding:2px 7px}
.syl{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.syl>*+*{border-top:1px solid var(--line)}
.syl .pn{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--body);border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.done2,.bon{display:flex;align-items:center;gap:14px;padding:14px 18px;font-size:15px;color:var(--muted);margin:0}
.done2 .pn{background:var(--good);border-color:var(--good);color:#fff}
.done2 b,.bon b{color:var(--ink)}
.dtag{margin-left:auto;font-size:13px;font-weight:700;color:var(--good)}
.bon .pn{background:#FFF4E2;border-color:#F3D9AE;color:var(--amber-text)}
.ph summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto 16px;gap:14px;align-items:center;padding:16px 18px;cursor:pointer}
.ph summary::-webkit-details-marker,.fq summary::-webkit-details-marker{display:none}
.ph summary:hover{background:var(--soft)}
.phk{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);min-width:58px}
.pht b{display:block;font-size:17px;line-height:1.3}
.pht small{display:block;font-size:14.5px;color:var(--muted)}
.phc{font-size:14px;color:var(--muted);white-space:nowrap}
.chev{width:9px;height:9px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
details[open]>summary .chev{transform:rotate(225deg) translate(-2px,-2px)}
.psteps{list-style:none;margin:0;padding:2px 18px 14px 90px;display:grid;gap:12px}
.psteps li{display:grid;grid-template-columns:28px 1fr;gap:12px}
.psteps b{font-size:15.5px;font-weight:600;line-height:1.35}
.psteps em{font-style:normal;margin-left:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--amber-text)}
.psteps small{display:block;font-size:14.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.psteps li.nx .pn{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.faq{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 2px;cursor:pointer;font-size:17px;font-weight:600}
.fq summary:hover{color:var(--accent)}
.fq p{margin:0 0 18px;padding-right:32px;font-size:16px;line-height:1.6;color:var(--muted)}
.offer{top:80px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 2px rgba(15,34,48,.04),0 12px 32px -18px rgba(15,34,48,.18);padding:24px}
.ot{font-family:var(--display);font-size:22px;letter-spacing:-.005em}
.lines{border-radius:6px}
.ln.due b{font-size:32px}
.ln.disc em{border-radius:4px}
.oframe{margin:-4px 0 0;font-size:14.5px;color:var(--muted);line-height:1.45}
.oframe b{color:var(--ink)}
.offer .btn{width:100%}
.next3{border-radius:6px}
.next3 li::before{border-width:1px}
.trust{font-size:13px}
.mbar{display:none}
@media (max-width:900px){
  .ugrid{grid-template-columns:minmax(0,1fr);padding:24px 16px 32px;row-gap:28px}
  .usegs{flex-basis:100%;max-width:none}
  .tools{grid-template-columns:1fr}
  .psteps{padding-left:18px}
  .ph summary{grid-template-columns:1fr auto 16px;row-gap:2px}.phk{grid-column:1/-1}
  .upath{margin-top:0}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(15,34,48,.25)}
  .mbar[hidden]{display:none!important}
  .mbar b{display:block;font-family:var(--display);font-size:22px;line-height:1}
  .mbar small{font-size:12.5px;color:var(--good);font-weight:600}
  .mbar .btn{padding:11px 18px;font-size:15.5px}
  .unlock{padding-bottom:80px}
}
@media (max-width:480px){.unlock .wm{display:none}.plgrid{grid-template-columns:1fr 1fr}.plgrid b{white-space:normal;font-size:20px}}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}

/* ===================== Paywall, round 2: colour and visuals ===================== */
.unlock{overflow-x:clip}
.ugrid{padding-top:0}
.uleft{position:relative;z-index:0;padding:44px 0 40px;color:var(--on-navy)}
.uleft::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:-100vw;
  background:radial-gradient(700px 360px at 30% 0%,rgba(127,208,240,.16),transparent 65%),radial-gradient(500px 300px at 85% 100%,rgba(79,207,147,.08),transparent 70%),linear-gradient(180deg,#0F2230,#0B1A24)}
.offer{margin-top:44px;border-top:4px solid var(--amber);box-shadow:0 1px 2px rgba(15,34,48,.06),0 24px 48px -24px rgba(15,34,48,.35)}
.ubadge{color:var(--green)} .ubadge i{background:var(--green);color:#0F2230}
.usegs i{background:rgba(255,255,255,.14)} .usegs i.d{background:var(--green)}
.uleft h1{color:#fff}
.uleft .lede{color:var(--on-navy)}
.plan{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:18px 20px}
.plhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.plk{color:var(--sky);margin:0}
.plmk{display:flex;gap:14px;font-size:13px;color:var(--on-navy-muted)}
.plmk i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.plmk i.a{background:var(--amber)} .plmk i.g{background:var(--green)}
.umonth{grid-template-columns:repeat(15,1fr);gap:4px;margin-bottom:16px}
.umonth i{height:18px;border-radius:4px;background:rgba(255,255,255,.08)}
.umonth i.a{background:var(--amber)} .umonth i.g{background:var(--green)}
.plgrid div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.plgrid b{color:#fff} .plgrid b.g{color:var(--green)} .plgrid b.a{color:var(--amber)}
.plgrid span{color:var(--on-navy-muted)}
.pbar{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.pbl{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--on-navy-muted);margin-bottom:8px}
.pbl b{color:var(--amber);font-weight:700}
.pbt{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.10);overflow:hidden}
.pbt i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:var(--amber);transition:width .9s cubic-bezier(.3,.7,.2,1)}
.plnote{color:var(--on-navy);margin-top:10px}
.plnote b{color:#fff}

/* preview: warm paper */
.sample{background:#FBF8F2;border-color:#ECE3D2;box-shadow:0 18px 36px -26px rgba(60,40,10,.35)}
.sample figcaption{background:#F3ECDF;border-bottom-color:#ECE3D2}
.sample .sk{color:#8A5A0B}
.sample .st2{color:#3A2E1C}
.spage{color:#2A2419}
.spage::after{background:linear-gradient(180deg,rgba(251,248,242,0),#FBF8F2 85%)}

/* tools: tinted tiles */
.tool{transition:border-color .15s,transform .15s}
.tool:hover{border-color:#C9D3D9;transform:translateY(-2px)}
.t-sky .ti{background:#E6F4FB;color:#0B6E99}
.t-amber .ti{background:#FFF2DE;color:#A8650B}
.t-green .ti{background:#E5F6EE;color:#1E7A4C}
.t-navy .ti{background:#0F2230;color:#7FD0F0}

/* phases: colour key */
.ph summary{position:relative}
.ph summary::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--pc)}
.ph .phk{color:var(--pk)}
.p-amber{--pc:var(--amber);--pk:#A8650B}
.p-sky{--pc:#7FD0F0;--pk:#0B6E99}
.p-green{--pc:#4FCF93;--pk:#1E7A4C}
.p-navy{--pc:#0F2230;--pk:#0F2230}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .p-navy{--pc:#7FD0F0;--pk:#9FB6C2}}
.ph[open] .psteps{border-left:0}
.done2{background:#F3FAF6}

/* closing band */
.uclose{position:relative;z-index:0;margin-top:56px;padding:36px 0;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;color:var(--on-navy)}
.uclose::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-24px;right:-24px;border-radius:10px;
  background:radial-gradient(500px 240px at 0% 0%,rgba(127,208,240,.16),transparent 65%),#0F2230}
.uclose img{width:96px;height:auto;background:#fff;border-radius:8px;padding:8px 10px}
.uclose h2{margin:0;color:#fff;font-family:var(--display);font-size:24px;line-height:1.25}
.uclose p{margin:4px 0 0;color:var(--on-navy);font-size:16px}
.uclose .btn{white-space:nowrap}
@media (max-width:900px){
  .uleft{padding:28px 0 32px}
  .offer{margin-top:0}
  .umonth{grid-template-columns:repeat(10,1fr)}
  .uclose{grid-template-columns:1fr;text-align:left;padding:28px 0}
  .uclose::before{left:-16px;right:-16px;border-radius:0}
  .uclose img{width:80px}
}
@media (prefers-reduced-motion:reduce){.pbt i,.tool{transition:none}.tool:hover{transform:none}}

/* ---- end of module: up next (clean style) ---- */
.mnav{gap:16px;padding-top:24px}
.mdone{display:flex;align-items:center;gap:10px;margin:0;font:600 15px var(--body);color:var(--ink)}
.mdone i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal}
.mdone span{font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnext{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;width:100%;padding:24px 26px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);transition:border-color .15s ease,background .15s ease}
.mnext:hover{border-color:var(--accent);background:var(--soft)}
.mnext:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mnum{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.mbody{display:block;min-width:0}
.mnext .mnk{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mnext .mnt{display:block;font-family:var(--display);font-size:clamp(21px,2.2vw,24px);font-weight:700;letter-spacing:-.005em;line-height:1.25;color:var(--ink);margin-top:4px}
.mnd{display:block;font-size:16px;line-height:1.55;color:var(--muted);margin:6px 0 18px;max-width:52ch}
.mnf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mmeta{font-size:14px;color:var(--muted)}
.mgo{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:6px;background:var(--amber);color:var(--amber-ink);font:600 15px var(--body)}
.mnext:hover .mgo{background:#DD942C}
.mgo span{display:inline!important;transition:transform .15s ease}
.mnext:hover .mgo span{transform:translateX(3px)}
.mprev{font-size:14.5px}
@media (max-width:560px){.mdone span{display:none}.mnext{grid-template-columns:1fr;gap:6px;padding:20px}.mnum{font-size:32px}.mnf{flex-direction:column-reverse;align-items:stretch}.mgo{justify-content:center}.mmeta{text-align:center}}
@media (prefers-reduced-motion:reduce){.mnext,.mgo span{transition:none}}

/* ===== art + components from the design references ===== */
.mill{margin:0 0 1.6em}
.mill img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.sicon{display:block;width:60px;height:60px;margin:0 0 10px}
.lhead.slim .sicon{display:none}
@media (max-width:900px){.sicon{width:44px;height:44px;margin-bottom:6px}}
/* callouts: icon | divider | label + text */
.prose .takeaway,.prose .tryit,.prose blockquote.script,.prose .callout{position:relative;padding:18px 20px 18px 78px;border-radius:8px;border:1px solid var(--line)}
.prose .takeaway::before,.prose .tryit::before,.prose blockquote.script::before,.prose .callout::before{content:"";position:absolute;left:22px;top:20px;width:28px;height:28px;background:no-repeat center/contain}
.prose .takeaway::after,.prose .tryit::after,.prose blockquote.script::after,.prose .callout::after{content:"";position:absolute;left:64px;top:16px;bottom:16px;width:1px;background:currentColor;opacity:.18}
.prose .takeaway{background:rgba(11,110,153,.07);border-color:rgba(11,110,153,.25)}
.prose .takeaway::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z' fill='%230B6E99' stroke='%230B6E99'/%3E%3C/svg%3E")}
.prose .takeaway span{color:var(--ink)}
.prose .tryit{background:rgba(233,162,59,.08);border:1px solid rgba(233,162,59,.45)}
.prose .tryit::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4l5 5L9 20H4v-5z' fill='%23E9A23B' stroke='%23C77F14'/%3E%3Cpath d='M13 6l5 5' stroke='%23C77F14'/%3E%3C/svg%3E")}
.prose .tryit span{color:var(--ink)}
.prose .callout{background:rgba(194,65,12,.06);border-color:rgba(194,65,12,.3);border-left-width:1px;border-radius:8px}
.prose .callout::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z' fill='%23C2410C' stroke='%23C2410C'/%3E%3Cpath d='M12 10v5M12 18v.5' stroke='%23fff'/%3E%3C/svg%3E")}
.prose .callout p{margin:0}
.prose .callout strong:first-child{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.prose blockquote.script{background:var(--soft);border-left:4px solid var(--accent);padding-right:96px;color:var(--ink)}
.prose blockquote.script::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M9 10.5h.01M12 10.5h.01M15 10.5h.01' stroke-width='3'/%3E%3C/svg%3E")}
.prose blockquote.script p:first-child::before{content:"Script";display:block;font:700 12px var(--body);letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;color:var(--ink)}
.copyb{position:absolute;right:14px;top:14px;border:0;border-radius:6px;background:var(--accent);color:#fff;font:700 12.5px var(--body);letter-spacing:.04em;text-transform:uppercase;padding:7px 11px;cursor:pointer}
.copyb:hover{filter:brightness(1.08)}
.takeaway span,.tryit span{font-size:12px;letter-spacing:.04em}
/* case study with avatar */
.prose .case.has-av{padding-left:96px;position:relative}
.cav{position:absolute;left:22px;top:20px;width:56px}
.cav img{display:block;width:56px;height:56px;border-radius:50%}
.cav{display:flex;flex-direction:column;gap:8px}.cav.two img+img{margin:0}
.prose .case.has-av::after{content:"";position:absolute;left:86px;top:18px;bottom:18px;width:1px;background:var(--line)}
@media (max-width:560px){.prose .case.has-av{padding-left:20px;padding-top:86px}.cav{left:20px;top:18px;display:flex;width:auto}.cav.two img+img{margin:0 0 0 -12px}.prose .case.has-av::after{display:none}
 .prose .takeaway,.prose .tryit,.prose blockquote.script,.prose .callout{padding-left:62px}.prose .takeaway::before,.prose .tryit::before,.prose blockquote.script::before,.prose .callout::before{left:16px;width:24px;height:24px}.prose .takeaway::after,.prose .tryit::after,.prose blockquote.script::after,.prose .callout::after{left:50px}}
/* quick check */
.qc{border:1px solid var(--line);border-radius:10px;padding:22px 24px}
.qk{display:inline-block;background:var(--accent);color:#fff;border-radius:6px;padding:5px 11px;margin-bottom:12px;text-transform:uppercase}
.qo{gap:10px}
.qo button{position:relative;grid-template-columns:34px 1fr;gap:14px;padding:12px 48px 12px 14px;border:1px solid var(--line);border-radius:8px;min-height:54px}
.qo button:hover:not(:disabled){border-color:var(--accent);background:var(--soft)}
.qo .ql{width:32px;height:32px;border-radius:50%;border:0;background:rgba(11,110,153,.1);color:var(--ink);font-size:14px}
.qo button.right{border-color:var(--good);background:rgba(30,122,76,.08);opacity:1}
.qo button.right .ql{background:rgba(30,122,76,.18);color:var(--good)}
.qo button.wrong{border-color:#C2410C;background:rgba(194,65,12,.07);opacity:1}
.qo button.wrong .ql{background:rgba(194,65,12,.18);color:#C2410C}
.qo button.right::after,.qo button.wrong::after{content:"";position:absolute;right:14px;top:50%;width:24px;height:24px;margin-top:-12px;background:no-repeat center/contain}
.qo button.right::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231E7A4C' stroke='%231E7A4C'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E")}
.qo button.wrong::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23C2410C' stroke='%23C2410C'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E")}
.qo button.dim{opacity:.55}
.qa{margin-top:14px;border-radius:8px;padding:14px 16px;background:rgba(30,122,76,.08)}
.qc.miss .qa{background:rgba(11,110,153,.07)}
.qa .qv{display:inline-flex;align-items:center;gap:8px}
.qa .qv::before{content:"";width:20px;height:20px;background:no-repeat center/contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231E7A4C' stroke='%231E7A4C'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E")}
.qc.miss .qa .qv::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23C2410C' stroke='%23C2410C'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E")}
/* join calendar */
.jplan .jmonth{background:#fff;border:0;border-radius:12px;padding:18px;color:#0F2230;max-width:440px}
#jmonth{grid-template-columns:repeat(6,1fr);gap:6px}
#jmonth i{height:auto;padding:7px 0;border-radius:6px;background:#E9EEF1;color:#0F2230;font:700 13px var(--body);font-style:normal;text-align:center;font-variant-numeric:tabular-nums}
#jmonth i.a{background:var(--amber);color:#1A1206}
#jmonth i.g{background:#1E7A4C;color:#fff}
.jplan .jmonth .mk{color:#0F2230;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.jplan .jmonth .mk span:last-child i{background:#1E7A4C!important}
/* closing band mockup */
.uclose img.mock{width:220px;height:auto;background:none;padding:0;border-radius:8px;box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
@media (max-width:900px){.uclose img.mock{width:100%;max-width:360px}}

/* ===== AI guide assistant ===== */
.ailaunch{position:fixed;right:24px;bottom:84px;z-index:60;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:600 15px var(--body);padding:12px 18px 12px 15px;cursor:pointer;box-shadow:0 10px 24px -10px rgba(11,110,153,.7)}
.ailaunch[hidden]{display:none}
.ailaunch:hover{filter:brightness(1.08)}
.ailaunch:focus-visible,.aix:focus-visible,.aisend:focus-visible,.aichip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.aipanel{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--panel);color:var(--ink);border-left:1px solid var(--line);box-shadow:-24px 0 48px -32px rgba(15,34,48,.45);font-family:var(--body)}
.aipanel[hidden]{display:none}
.aihead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.aihead h2{margin:0;font:700 18px var(--display);display:flex;align-items:center;gap:8px}
.aihead p{margin:3px 0 0;font-size:14px;color:var(--muted)}
.aibadge{font:700 11px var(--body);letter-spacing:.06em;background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:2px 6px}
.aix{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 6px;border-radius:6px}
.aix:hover{background:var(--soft);color:var(--ink)}
.aibody{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.aiwelcome p{margin:0 0 12px;font-size:15.5px;line-height:1.55}
.aichips{display:grid;gap:8px}
.aichip{text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:10px 12px;font:500 14.5px var(--body);cursor:pointer;line-height:1.35}
.aichip:hover{border-color:var(--accent);background:var(--soft)}
.aimsg{max-width:100%;font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.aimsg.u{align-self:flex-end;max-width:85%;background:var(--soft);border:1px solid var(--line);border-radius:12px 12px 4px 12px;padding:10px 13px}
.aimsg.a p{margin:0 0 8px}.aimsg.a p:last-child{margin:0}
.aimsg.a ul{margin:0 0 8px;padding-left:20px}.aimsg.a li{margin:2px 0}
.aimsg.a.think{color:var(--muted);font-style:italic}
.aimsg.err{color:#C2410C;font-size:14.5px}
.aiwall{border:1px solid var(--line);background:var(--soft);border-radius:8px;padding:14px;font-size:14.5px;line-height:1.5}
.aiwall .btn{margin-top:10px}
.aiform{display:flex;align-items:flex-end;gap:8px;padding:12px 16px 6px;border-top:1px solid var(--line)}
.aiform textarea{flex:1;resize:none;max-height:140px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:400 15.5px var(--body);color:var(--ink);background:var(--panel);line-height:1.4}
.aiform textarea:focus{outline:none;border-color:var(--accent)}
.aisend{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:8px;background:var(--amber);color:var(--amber-ink);font:700 18px var(--body);cursor:pointer}
.aisend:disabled{opacity:.45;cursor:default}
.aifoot{margin:0;padding:0 16px 12px;font-size:12.5px;color:var(--muted);line-height:1.4}
@media (max-width:560px){.ailaunch{right:14px;bottom:76px;padding:11px 14px}.aipanel{width:100vw;border-left:0}}
/* paywall mentions */
.oai,.aifeat{display:grid;grid-template-columns:34px 1fr;gap:12px;border:1px solid rgba(11,110,153,.25);background:rgba(11,110,153,.06);border-radius:8px;padding:12px 14px;margin:14px 0 4px}
.oai-ic{width:34px;height:34px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center}
.oai b,.aifeat b{display:block;font-size:15px;color:var(--ink)}
.oai small{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted)}
.aifeat{padding:16px 18px;margin:0 0 12px}
.aifeat p{margin:3px 0 8px;font-size:14.5px;color:var(--muted)}
.aifeat ul{margin:0 0 8px;padding:0;list-style:none;display:grid;gap:5px}
.aifeat li{font-size:14.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 10px}
.aifeat small{font-size:12.5px;font-weight:600;color:var(--accent)}

.oinc{list-style:none;margin:10px 0 2px;padding:0;display:grid;gap:8px;font-family:var(--body)}
.oinc li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.oinc b{color:var(--ink)}
.oinc .oi{width:22px;height:22px;border-radius:50%;background:rgba(30,122,76,.12);color:var(--good);display:grid;place-items:center;font-size:12px;font-weight:700}

/* compact offer card */
.offer{gap:14px;padding:22px 22px 16px}
.offer .ohead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.offer .ot{font:700 20px var(--display);color:var(--ink)}
.offer .os{font-size:13px;color:var(--muted)}
.oprice{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.oprice>b{font:700 44px/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.odisc{display:grid;gap:2px;font-size:13.5px;line-height:1.3}
.odisc[hidden]{display:none}
.odisc s{color:var(--muted);font-size:15px}
.odisc span{color:var(--good);font-weight:700}
.odisc em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--amber-text);background:#FFF4E2;border-radius:4px;padding:1px 6px;justify-self:start}
.offer #buy{width:100%;justify-content:center}
.onext{margin:-4px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted);text-align:center}
.onext b{color:var(--ink);font-weight:600}
.offer .oinc{margin:2px 0 0;padding:14px 0 0;border-top:1px solid var(--line);gap:7px}
.offer .oinc li{font-size:14.5px;color:var(--ink)}
.ofoot{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px}
.ofoot .ofine{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.ofoot .trust{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:12.5px;color:var(--muted);margin:2px 0 0;padding:0;border:0}
.offer .notnow{margin:0 auto}
.ofoot summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);list-style:none}
.ofoot summary::-webkit-details-marker{display:none}
.ofoot summary::after{content:" +";}
.ofoot[open] summary::after{content:" \2212"}
.ofoot summary:hover{color:var(--ink)}
.ofoot[open]{gap:6px}
.offer{position:sticky;top:72px;max-height:calc(100vh - 88px);overflow-y:auto}
@media (max-height:560px){.offer .oinc{display:none}}
@media (max-width:900px){.offer{position:static;max-height:none;overflow:visible}}

/* closing band: image left, text and button stacked right */
.uclose{grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto;column-gap:28px;row-gap:16px;align-items:center;padding:36px 32px}
.uclose img.mock{grid-row:1/3;width:100%;max-width:200px}
.uclose>div{grid-column:2;align-self:end}
.uclose .btn{grid-column:2;justify-self:start;align-self:start;white-space:nowrap}
.uclose h2{font-size:clamp(22px,2.2vw,26px)}
@media (max-width:1150px){.uclose{grid-template-columns:140px minmax(0,1fr);padding:28px 24px}.uclose img.mock{max-width:140px}}
@media (max-width:900px){.uclose{grid-template-columns:1fr;padding:28px 0}.uclose img.mock{grid-row:auto;max-width:280px}.uclose>div,.uclose .btn{grid-column:1}}
.ofoot summary:focus{outline:none}
.ofoot summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* plan card refresh */
.plan{padding:20px 22px 18px;border-radius:10px}
.umonth{grid-template-columns:repeat(10,1fr)!important;gap:5px;margin-bottom:18px}
.umonth i{height:auto!important;padding:5px 0;border-radius:5px;font:600 11.5px var(--body);font-style:normal;text-align:center;color:rgba(255,255,255,.38);background:rgba(255,255,255,.06);font-variant-numeric:tabular-nums}
.umonth i.a{background:var(--amber);color:#1A1206}
.umonth i.g{background:var(--green);color:#0F2230}
.plgrid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:14px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.plgrid div{background:none!important;border:0!important;border-radius:0!important;padding:2px 16px!important;display:grid;gap:3px}
.plgrid div:first-child{padding-left:0!important}
.plgrid div+div{border-left:1px solid rgba(255,255,255,.1)!important}
.plgrid b{font-size:24px!important;line-height:1.1}
.plgrid span{font-size:13.5px!important;line-height:1.35}
.pbar{margin-top:16px;padding-top:0;border-top:0;display:grid;gap:10px}
.pcmp{display:grid;grid-template-columns:110px minmax(0,1fr) 56px;align-items:center;gap:12px;font-size:14px}
.pcl{color:var(--on-navy-muted)}
.pct{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.pct i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:var(--amber);transition:width .9s cubic-bezier(.3,.7,.2,1)}
.pct i.full{width:100%;background:rgba(255,255,255,.55)}
.pcmp b{text-align:right;font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.pcmp b.pg{color:var(--amber)}
.pbar .plnote{margin:6px 0 0}
@media (max-width:560px){.plgrid{grid-auto-flow:row;grid-template-columns:1fr 1fr;row-gap:14px}.plgrid div:nth-child(odd){padding-left:0!important;border-left:0!important}.pcmp{grid-template-columns:92px minmax(0,1fr) 48px}.umonth i{font-size:10.5px;padding:4px 0}}
@media (prefers-reduced-motion:reduce){.pct i{transition:none}}

.plgrid b{font-size:22px!important;white-space:normal!important;overflow-wrap:normal}
.plgrid div{min-width:0}
.pcl{white-space:nowrap}
@media (max-width:560px){.pcmp{grid-template-columns:104px minmax(0,1fr) 44px;gap:10px;font-size:13.5px}.plgrid div:nth-child(3){grid-column:1/-1;padding-left:0!important;border-left:0!important;padding-top:12px!important;border-top:1px solid rgba(255,255,255,.08)!important}}

.uclose::before{left:0!important;right:0!important;border-radius:10px!important}
@media (max-width:900px){.uclose{padding:24px 20px!important}}

/* ===== step-complete card v2 ===== */
.done{display:block;padding:28px}
.done>*+*{margin-top:0}
.dhead{display:flex;align-items:center;gap:14px}
.done .check{width:44px;height:44px;flex:0 0 auto;font-size:21px}
.dk{display:block;font:600 13px var(--body);color:var(--good);letter-spacing:.01em}
.done h2{font-size:24px;line-height:1.2;margin:2px 0 0}
.done p.dsum{margin:14px 0 0;font-size:16.5px;line-height:1.6;color:var(--muted)}
.saved{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin:20px 0 0;border:1px solid var(--line);border-radius:8px}
.saved span{background:none;border:0;border-radius:0;padding:12px 16px;font-size:14px}
.saved span+span{border-left:1px solid var(--line)}
.saved span small{display:block;font-size:13px;color:var(--muted);line-height:1.3}
.saved span b{display:block;margin-top:3px;font:700 19px var(--display);color:var(--ink);line-height:1.25}
.nextup{display:flex;align-items:center;gap:20px;margin:20px -28px -28px;padding:18px 28px;background:var(--soft);border:0;border-top:1px solid var(--line);border-radius:0 0 8px 8px}
.nextup>div{flex:1;min-width:0}
.nextup small{font-size:12px}
.nextup b{display:block;font-size:17px;margin-top:2px}
.nextup span{font-size:14.5px;margin-top:2px}
.done .nextup .btn{flex:0 0 auto;justify-self:auto}
.nextup .btn span{display:inline;margin:0;font-size:inherit;color:inherit}
@media (max-width:560px){
 .done{padding:22px 20px}
 .saved{grid-auto-flow:row;grid-auto-columns:auto}
 .saved span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px}
 .saved span+span{border-left:0;border-top:1px solid var(--line)}
 .saved span b{margin:0;font-size:16px;text-align:right}
 .nextup{flex-direction:column;align-items:stretch;gap:14px;margin:20px -20px -22px;padding:18px 20px}
 .done .nextup .btn{width:100%}
}

/* ===== no accent stripes ===== */
.callout,.callout.script,.prose blockquote.script{border:1px solid var(--line)!important;border-radius:8px!important}
.sscript{border-left:0!important;background:var(--soft);border-radius:6px;padding:8px 12px!important}
.invoice{border-top:0!important;border:1px solid var(--line)!important}
.offer{border-top:1px solid var(--line)!important}

/* ===== price vs rental day, inside offer card ===== */
.ocmp{display:grid;gap:8px;margin:14px 0 16px;padding:12px 14px;background:var(--soft);border:1px solid var(--line);border-radius:8px}
.offer .pcmp{grid-template-columns:100px minmax(0,1fr) 44px;gap:10px;font-size:13.5px;color:var(--muted)}
.offer .pct{height:8px;border-radius:4px;background:#fff;border:1px solid var(--line);box-sizing:content-box}
.offer .pct i{border-radius:4px}
.offer .pct i.full{background:#AEB8C0}
.offer .pcmp b{font-size:14px;color:var(--ink)}
.offer .pcmp b.pg{color:#A8650F}
.ocnote{margin:2px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.ocnote b{color:var(--ink)}
.offer .pcl{color:var(--muted)}
.plan .plgrid{border-bottom:0;padding-bottom:0}

/* ===== one header bar: step title moves into the top bar ===== */
.lhead.slim{display:none}
.tstep{min-width:0;padding-left:18px;border-left:1px solid var(--line);font:600 15px var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tstep[hidden]{display:none}
.tstep small{display:none;font:inherit;color:var(--muted)}
@media (max-width:560px){
 .tstep{padding-left:12px;font-size:14px;flex:1}
 .tstep small{display:inline}
 .tstep:not([hidden])~.prog{display:none}
}

/* ===== offer card v3 ===== */
.offer{padding:0 22px!important;gap:0!important;border-radius:12px!important;border:1px solid var(--line)!important;box-shadow:0 1px 2px rgba(15,34,48,.05),0 20px 44px -24px rgba(15,34,48,.30)!important}
.otop{margin:0 -22px!important;padding:20px 22px 18px;background:linear-gradient(180deg,#F7FAFB,#FFFFFF);border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;display:grid;gap:6px}
.offer .ot{margin:0;font:600 14px var(--body);color:var(--muted);letter-spacing:.01em}
.offer .oprice{gap:12px;align-items:baseline}
.offer .oprice>b{font-size:52px;letter-spacing:-.03em}
.offer .odisc{display:flex;align-items:center;gap:8px}
.offer .odisc s{font-size:18px;color:#8A97A1}
.osave{font:700 12.5px var(--body);color:var(--good);background:rgba(30,122,76,.10);border-radius:999px;padding:3px 9px}
.odeal{margin:2px 0 0;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);font-weight:600}
.odeal[hidden]{display:none}
.odeal em{font-style:normal;font-weight:600;color:var(--amber-text);display:inline-flex;align-items:center;gap:6px}
.odeal em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.offer .os{margin:0;font-size:13px;color:var(--muted)}
.ocmp{margin:18px 0!important;padding:0!important;background:none!important;border:0!important;gap:8px!important}
.ocbar{position:relative;height:10px;border-radius:5px;background:#E9EEF1;overflow:hidden}
.ocbar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:var(--amber);transition:width .9s cubic-bezier(.3,.7,.2,1)}
.oclab{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.oclab b{color:var(--ink);font-weight:700}
.oclab span:first-child b{color:#A8650F}
.ocnote{margin:2px 0 0!important;font-size:14px!important;line-height:1.5!important;color:var(--muted)}
.offer #buy{margin-top:0}
.offer .onext{margin-top:10px;margin-bottom:0}
.offer .oinc{margin-top:18px!important;padding-top:16px!important;gap:9px!important}
.offer .oinc li{grid-template-columns:18px 1fr;gap:10px;align-items:start}
.offer .oinc .oi{width:18px;height:20px;background:none;border-radius:0;color:var(--good)}
.offer .ofoot{margin-top:16px;padding-top:12px}
.offer .notnow{margin:10px auto 16px;font-size:13.5px}
@media (prefers-reduced-motion:reduce){.ocbar i{transition:none}}
.ph summary::before{display:none!important}

/* ===================== paywall content v2 ===================== */
/* sample page */
.sample2{margin:6px 0 0;background:none!important;border:0!important;box-shadow:none!important;overflow:visible;border-radius:0}
.spaper{background:#FFFEFB;border:1px solid #ECE6DA;border-radius:6px;padding:26px 28px 14px;box-shadow:0 1px 2px rgba(15,34,48,.05),0 22px 40px -24px rgba(15,34,48,.35);transform:perspective(1400px) rotateX(4deg) rotate(-1.2deg);transform-origin:50% 100%}
.sphd{margin:0;font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.spt{margin:6px 0 12px;font:700 22px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em}
.sample2 .spage{max-height:none;padding:0;color:#2A2E33;font-size:16px;line-height:1.6}
.sample2 .spage::after{display:none}
.spfoot{display:flex;justify-content:space-between;margin:14px 0 0;padding-top:10px;border-top:1px solid #EEE9DF;font-size:12px;color:var(--muted);font-style:italic}
.sample2 figcaption{display:block;width:max-content;margin:18px auto 0;padding:6px 14px;border-radius:999px;background:var(--soft);border:1px solid var(--line)!important;font-size:13.5px;font-weight:600;color:var(--ink)}

/* documents fan */
.docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:6px;padding:10px 4px 0}
.doc{margin:0;display:grid;gap:12px;justify-items:center;text-align:center}
.dp{width:100%;aspect-ratio:8.5/11;background:#FFFEFB;border:1px solid #E9E4DA;border-radius:4px;padding:12px 11px;display:flex;flex-direction:column;gap:8px;text-align:left;box-shadow:0 1px 2px rgba(15,34,48,.05),0 14px 26px -16px rgba(15,34,48,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.d1 .dp{transform:rotate(-3deg)}.d2 .dp{transform:rotate(1.5deg)}.d3 .dp{transform:rotate(-1deg)}.d4 .dp{transform:rotate(2.5deg)}
.doc:hover .dp{transform:rotate(0) translateY(-6px);box-shadow:0 1px 2px rgba(15,34,48,.05),0 22px 34px -18px rgba(15,34,48,.4)}
.dp>b{font:700 12px/1.2 var(--display);color:var(--ink);letter-spacing:-.005em}
.dp .dln{display:grid;gap:5px}
.dp i{display:block;height:4px;border-radius:2px;background:#D5DBE0}
.dhl{display:grid;gap:5px;background:#FCEFD6;border:1px solid #F2D9A8;border-radius:3px;padding:6px 7px}
.dhl em{font:700 9.5px var(--body);font-style:normal;color:#8A5A0B}
.dhl i{background:#E6CFA2}
.ck{display:grid;grid-template-columns:11px 1fr;gap:7px;align-items:center}
.ck>i:first-child{width:11px;height:11px;border-radius:2px;border:1.4px solid #B9C2C9;background:#fff}
.ck>i.y{border-color:var(--good);background:var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.rc{display:grid;grid-template-columns:auto 1fr;border:1px solid #CFE0EA;border-radius:4px;overflow:hidden;font-size:10px;line-height:1.25}
.rc>span{padding:5px 6px;border-top:1px solid #CFE0EA}
.rc>span:nth-child(-n+2){border-top:0}
.rc>span:nth-child(odd){background:#EEF5F9;font-weight:600;color:var(--ink);border-right:1px solid #CFE0EA}
.rc>span:nth-child(even){font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.qt{display:grid;grid-template-columns:10px 1fr;gap:4px 6px}
.qt q{grid-row:span 2;font:700 15px/1 Georgia,serif;color:var(--accent);quotes:"\201C" "\201D"}
.qt q::before{content:open-quote}.qt q::after{content:none}
.doc figcaption{display:grid;gap:2px}
.doc figcaption b{font-size:14.5px;color:var(--ink);line-height:1.3}
.doc figcaption small{font-size:12.5px;color:var(--muted);line-height:1.35}
.dplus{margin:18px 0 0;font-size:14.5px;color:var(--muted)}
.dplus b{color:var(--ink)}
@media (max-width:640px){
 .docs{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
 .dp>b{font-size:13px}.rc{font-size:11px}
}

/* assistant conversation */
.asst{margin-top:26px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(15,34,48,.04),0 16px 34px -26px rgba(15,34,48,.3)}
.ahd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.aname{display:flex;align-items:center;gap:8px;font:700 16px var(--display);color:var(--ink)}
.aname svg{color:var(--accent)}
.aav{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.aav::before{content:"";width:7px;height:7px;border-radius:50%;background:#2FB46E}
.abody{padding:18px 18px 6px;display:grid;gap:14px}
.aq{justify-self:end;max-width:82%;margin:0;background:var(--soft);border:1px solid var(--line);border-radius:12px 12px 4px 12px;padding:10px 14px;font-size:15px;font-weight:600;color:var(--ink)}
.aa{margin:0;min-height:3.2em;font-size:15.5px;line-height:1.6;color:var(--ink)}
.aa.typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.aask{display:flex;align-items:center;gap:10px;width:calc(100% - 36px);margin:10px 18px 0;padding:6px 6px 6px 14px;border:1px solid #CFD6DC;border-radius:10px;background:#fff;cursor:pointer;font:400 15px var(--body);color:#7B8790;text-align:left}
.aask span{flex:1}
.aask i{width:36px;height:36px;border-radius:8px;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center}
.aask:hover{border-color:var(--accent)}
.aask:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.afoot{margin:0;padding:10px 18px 14px;font-size:13px;color:var(--muted)}

/* phase route */
.route{margin-top:4px}
.rtrack{position:relative;height:70px}
.rhere{position:absolute;bottom:2px;left:30%;transform:translateX(-50%);display:grid;justify-items:center;gap:4px}
.rhere em{font:700 12px var(--body);font-style:normal;color:var(--amber-ink);background:var(--amber);border-radius:6px;padding:3px 8px;position:relative;white-space:nowrap}
.rhere em::after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-bottom:0;border-top-color:var(--amber)}
.rhere img{width:58px;height:auto;display:block}
.rstops{position:relative;display:grid;grid-template-columns:1fr 4fr}
.rtabs{display:grid;grid-template-columns:repeat(4,1fr)}
.rstops::before,.rstops::after{content:"";position:absolute;top:15px;height:2px;border-radius:2px}
.rstops::before{left:10%;right:10%;background:#D5DCE1}
.rstops::after{left:10%;width:0;background:var(--good);transition:width .9s cubic-bezier(.3,.7,.2,1) .2s}
.route.in .rstops::after,.route:not(.rv) .rstops::after{width:20%}
.rstart,.rstop{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;text-align:center;gap:3px;padding:0 6px 4px}
.rstop{background:none;border:0;cursor:pointer;font:inherit;color:inherit;border-radius:8px}
.rn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--body);background:#fff;border:2px solid #C9D2D8;color:var(--muted);margin-bottom:6px;transition:background .2s,border-color .2s,color .2s}
.rstart .rn{background:var(--good);border-color:var(--good);color:#fff}
.rstart b,.rstop b{font:700 15px/1.25 var(--display);color:var(--ink)}
.rstart small{font-size:13px;color:var(--good);font-weight:600}
.rstop small{font-size:13px;line-height:1.35;color:var(--muted)}
.rr{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.rnow{display:none}
.rstop:hover .rn{border-color:var(--accent);color:var(--accent)}
.rstop.on .rn{background:var(--accent);border-color:var(--accent);color:#fff}
.rstop.on .rr{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.rstop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.syl2{margin-top:16px}
.syl2 .psteps{padding:16px 18px;gap:14px}
.rpanel[hidden]{display:none}
.rpanel{animation:rpin .25s ease}
@keyframes rpin{from{opacity:0;transform:translateY(4px)}}
@media (max-width:640px){
 .rtrack{display:none}
 .rstops{grid-template-columns:1fr}
 .rtabs{grid-template-columns:1fr}
 .rstops::before{left:15px;right:auto;top:16px;bottom:16px;width:2px;height:auto}
 .rstops::after{left:15px;top:16px;width:2px!important;height:0;transition:height .6s ease .2s}
 .route.in .rstops::after,.route:not(.rv) .rstops::after{height:56px}
 .rstart,.rstop{grid-template-columns:32px 1fr auto;justify-items:start;text-align:left;column-gap:12px;row-gap:0;padding:8px 0;align-items:center}
 .rstart .rn,.rstop .rn{grid-row:span 2;margin:0}
 .rstart b,.rstop b{grid-column:2}
 .rstart small,.rstop small{grid-column:2}
 .rr{grid-column:3;grid-row:1/span 2;margin:0}
 .rnow{display:inline;grid-column:2;justify-self:start;font:700 11px var(--body);font-style:normal;color:var(--amber-ink);background:var(--amber);border-radius:4px;padding:1px 6px;margin:2px 0}
}

/* reveal */
#unlock.anim .rv{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
#unlock.anim .rv:not(.in){opacity:0;transform:translateY(12px)}
#unlock.anim .usec:not(.in) .doc{opacity:0;transform:translateY(10px)}
#unlock .doc{transition:opacity .45s ease,transform .45s ease}
#unlock .d2{transition-delay:.06s}#unlock .d3{transition-delay:.12s}#unlock .d4{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.dp,.rn,.rstops::after,#unlock .rv,#unlock .doc{transition:none!important}.rpanel{animation:none}.aa.typing::after{animation:none}.doc:hover .dp{transform:none}}

/* route v2: fewer layers */
.rn{width:18px!important;height:18px!important;border-width:2px!important;margin-bottom:10px!important;font-size:10px!important}
.rstops::before,.rstops::after{top:8px!important}
.rstart .rn{font-size:10px!important}
.rdn{font-size:13px;color:var(--good);font-weight:600}
.rstop .rr{margin-top:4px}
.rstop.on .rn{box-shadow:0 0 0 4px var(--accent-soft)}
.rstop.on b{color:var(--accent)}
.rph{margin:0;padding:14px 18px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.rph b{font:700 16px var(--display);color:var(--ink)}
.rph span{font-size:14px;color:var(--muted)}
.syl2 .psteps{padding-top:12px}
.bon2{border:0!important;padding:14px 2px 0!important;background:none!important}
@media (max-width:640px){
 .rstops::before{top:12px!important;bottom:24px!important;left:9px!important}
 .rstops::after{top:12px!important;left:9px!important}
 .route.in .rstops::after,.route:not(.rv) .rstops::after{height:40px!important}
 .rstart,.rstop{grid-template-columns:18px 1fr auto!important;padding:10px 0!important}
 .rstart .rdn{grid-column:2}
}
.bon2{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted);margin:0}
.bon2 b{color:var(--ink)}
.bon2 .pn{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--body);background:#FFF4E2;border:1px solid #F3D9AE;color:var(--amber-text)}
.aask{cursor:default!important;user-select:none}
.aask:hover{border-color:#CFD6DC!important}

/* ===================== light pass: join + unlock top ===================== */
/* join */
.join{background:var(--panel)!important;color:var(--ink)!important}
.join header{background:var(--panel);border-bottom:1px solid var(--line);padding-top:12px;padding-bottom:12px}
.join .brand{color:var(--ink)}
.join .wm{font-weight:700;letter-spacing:-.01em;font-size:18px}
.join .wm .t{color:var(--ink);opacity:1;font-weight:700}
.join .wm .a{color:var(--amber-text)}
.jgrid{padding-top:56px}
.jplan .jk{color:var(--accent)}
.jplan h2{color:var(--ink)}
.jplan h2 em{color:var(--good)}
.jplan .jmonth{border:1px solid var(--line)!important;border-radius:10px;box-shadow:0 1px 2px rgba(15,34,48,.04)}
#jmonth i{background:#EEF2F4}
.jstats b{color:var(--ink)}
#js-keep{color:var(--good)!important}
.jstats span{color:var(--muted)}
.jnext{color:var(--ink)}
.jnext li::before{color:var(--accent)}
.jdis{color:var(--muted)}
.jcard{border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(15,34,48,.05),0 20px 44px -24px rgba(15,34,48,.30)}
.gbtn,.field input{border-radius:8px}
.jcard .btn{border-radius:8px}
.join{background:#F7FAFB!important}

/* unlock top band */
.uleft{color:var(--ink)!important}
.uleft::before{background:linear-gradient(180deg,#F7FAFB,#FFFFFF)!important;border-bottom:1px solid var(--line)}
.uleft h1{color:var(--ink)!important}
.uleft .lede{color:var(--muted)!important}
.ubadge{color:var(--good)!important}
.ubadge i{background:var(--good)!important;color:#fff!important}
.usegs i{background:var(--line)!important}.usegs i.d{background:var(--good)!important}
.plan{background:var(--panel)!important;border:1px solid var(--line)!important;box-shadow:0 1px 2px rgba(15,34,48,.04)}
.plk{color:var(--accent)!important}
.plmk{color:var(--muted)!important}
.plmk i.g{background:var(--good)!important}
.umonth i{background:#EEF2F4!important;color:var(--muted)!important}
.umonth i.a{background:var(--amber)!important;color:#1A1206!important}
.umonth i.g{background:var(--good)!important;color:#fff!important}
.plgrid{border-top-color:var(--line)!important}
.plgrid div+div{border-left-color:var(--line)!important}
.plgrid b{color:var(--ink)!important}
.plgrid b.a{color:var(--amber-text)!important}
.plgrid b.g{color:var(--good)!important}
.plgrid span{color:var(--muted)!important}
@media (max-width:560px){.plgrid div:nth-child(3){border-top-color:var(--line)!important}}

/* ===== step hero (first page of each step) ===== */
.lhead.short{background:linear-gradient(90deg,#0E1F2B 0%,#0F2230 45%,#132A39 100%)!important;color:#D6E3EA!important;border-bottom:0!important}
.lhead.short .ph{display:block!important;position:absolute;inset:0 0 0 auto;width:min(52vw,860px);z-index:-1;opacity:1}
.lhead.short .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 30%,#000 70%)}
.lhead.short .lhin{padding-top:64px!important;padding-bottom:64px!important}
.lhead.short .lhin>div{max-width:620px}
.lhead.short .sicon{width:56px;height:56px;padding:8px;background:#fff;border-radius:12px;margin:0 0 18px}
.lhead.short .kick{font-size:13px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#7FD0F0!important}
.lhead.short h1{color:#fff!important;font-size:clamp(34px,4vw,50px)!important;line-height:1.08!important;letter-spacing:-.015em!important;margin:12px 0 22px!important}
.lhead.short .learn{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;font-size:17px!important}
.lhead.short .learn li{color:#D6E3EA!important}
.lhead.short .learn li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237FD0F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E")!important}
.lhead.short .meta{margin-top:26px!important;gap:10px!important;color:#D6E3EA!important;font-size:14.5px!important}
.lhead.short .meta span{padding:7px 14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);border-radius:8px}
.lhead.short .meta i{display:none!important}
@media (max-width:900px){
 .lhead.short .ph{width:100%}
 .lhead.short .ph img{opacity:.28;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
 .lhead.short .lhin{padding:32px 20px 36px!important}
 .lhead.short .sicon{width:44px;height:44px;padding:6px;margin-bottom:12px}
 .lhead.short h1{font-size:30px!important;margin:8px 0 16px!important}
 .lhead.short .learn{display:grid!important;font-size:15.5px!important}
 .lhead.short .meta{margin-top:18px!important}
 .lhead.short .meta span{padding:5px 10px}
}
.lhead.short{background:#0F2230!important}
.lhead.short .ph img{opacity:.6!important;-webkit-mask-image:none!important;mask-image:none!important}
.lhead.short .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0F2230 0%,rgba(15,34,48,.75) 30%,rgba(15,34,48,.2) 75%,rgba(15,34,48,.1) 100%)}
@media (max-width:900px){.lhead.short .ph img{opacity:.35!important}.lhead.short .ph::after{background:linear-gradient(180deg,rgba(15,34,48,.4),#0F2230 95%)}}
.lhead.short .lhin{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important}
.lhead.short .lhin>div{grid-column:1!important}
@media (min-width:1201px){.lhead.short .lhin{max-width:none!important;padding-left:max(24px,calc((100vw - 1216px)/2))!important;padding-right:24px!important}}