:root{--bg:#0A0A0B;--panel:#111114;--raised:#16161A;--rule:#1F1F24;--edge:#2A2A30;
 --t0:#F5F5F7;--t1:#A0A0A8;--t2:#8C8C96;--t3:#77777F;   /* todos >=4:1 no painel */
 /* semantic: green clears, amber is inside the error bars, red cannot be imported */
 --ok:#5FD08A;--okbg:#0E1A13;--oked:#2C6A44;
 --wn:#F0B44A;--wnbg:#1C1608;--wned:#6B5320;
 --bd:#F2726A;--bdbg:#1C0F0E;--bded:#6B302E;
 /* phase hues: what goes in, what leaves the pocket, what comes back */
 --pa:#7CA9F5;--pabg:#0D131F;--paed:#2B4370;
 --pb:#F0B44A;--pbbg:#1A1509;--pbed:#5E4A1E;
 --pc:#5FD08A;--pcbg:#0E1A13;--pced:#2C6A44;--sans:Archivo,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{background:var(--bg)}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--t0);line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--t0)} button{font-family:var(--sans)}
:focus-visible{outline:2px solid var(--t0);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ── shell: wide, two-column on desktop ─────────────────────────── */
.shell{max-width:1120px;margin:0 auto;padding:0 28px}
/* single-column pages: no rail, so the content column IS the page */
.shell.solo{max-width:1080px}
.shell.solo main{max-width:100%}
.cols{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;align-items:start}
@media(max-width:900px){.shell{padding:0 20px}.cols{grid-template-columns:1fr;gap:0}}

topbar,.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.mark{font-weight:700;font-size:19px;letter-spacing:-.03em}
.mark a{text-decoration:none}
.topnav{display:flex;gap:18px;align-items:center}
.topnav a{font-size:13px;color:var(--t1);text-decoration:none}
.topnav a:hover{color:var(--t0)}

/* ── sticky scrollspy rail ──────────────────────────────────────── */
.rail{position:sticky;top:24px;padding-top:8px}
.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.rail a{display:flex;align-items:center;gap:10px;padding:8px 0 8px 13px;font-size:13px;color:var(--t2);
 text-decoration:none;border-left:2px solid var(--rule);transition:color .15s,border-color .15s}
.rail a .n{font-size:10px;color:var(--t3);letter-spacing:.06em}
.rail a:hover{color:var(--t1)}
.rail a.on{color:var(--t0);border-left-color:var(--t0);font-weight:600}
.rail a.on .n{color:var(--t1)}
.railcta{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.railcta a{display:block;text-align:center;background:var(--t0);color:var(--bg);text-decoration:none;
 font-weight:600;font-size:13.5px;padding:11px 0;border-radius:8px;border:0}
@media(max-width:900px){
 .rail{position:sticky;top:0;z-index:40;background:var(--bg);padding:10px 0 8px;margin:0 -20px 4px;
 border-bottom:1px solid var(--rule)}
 .rail ol{flex-direction:row;overflow-x:auto;gap:6px;padding:0 20px;scrollbar-width:none}
 .rail ol::-webkit-scrollbar{display:none}
 .rail a{flex:none;border-left:0;border:1px solid var(--edge);border-radius:100px;padding:7px 13px;font-size:12.5px}
 .rail a .n{display:none}
 .rail a.on{background:var(--t0);color:var(--bg);border-color:var(--t0)}
 .railcta{display:none}
}

/* ── hero: show the mechanic, don't assert it ───────────────────── */
.hero{padding:14px 0 8px}
h1{font-weight:700;font-size:clamp(34px,6vw,58px);line-height:1.0;letter-spacing:-.04em;margin:0 0 16px;text-wrap:balance}
.lede{margin:0 0 22px;font-size:16.5px;color:var(--t1);max-width:52ch;line-height:1.6}
.tour{border:1px solid var(--rule);border-radius:14px;background:var(--panel);overflow:hidden;margin:26px 0 10px}
.tourh{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.28fr);gap:0;border-bottom:1px solid var(--rule);align-items:stretch}
@media(max-width:760px){.tourh{grid-template-columns:1fr}}
.tourside{padding:18px 22px;display:flex;flex-direction:column;min-width:0}
.tourside:last-child{border-left:1px solid var(--rule)}
@media(max-width:760px){
 .tourside:last-child{border-left:0;border-top:1px solid var(--rule)}
 .prodart{max-width:260px;margin:0 auto}
 .gets{gap:7px}
}
.tourlab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);font-weight:700;margin-bottom:12px;flex:none}
.give{display:flex;flex-direction:column;gap:9px}
.giverow{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--t1)}
.giveph{width:44px;height:44px;border:1px solid var(--edge);border-radius:7px;background:var(--raised);
 display:flex;align-items:center;justify-content:center;flex:none}
.givek{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);width:66px;flex:none}
.gets{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:space-between}
.get{border:1px solid var(--edge);border-radius:8px;padding:10px 12px;background:var(--raised);flex:1;display:flex;flex-direction:column;justify-content:center}
.get b{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px}
.get em{display:block;font-style:normal;font-size:12.5px;color:var(--t1);line-height:1.5;min-height:2.5em}
.get .hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.get .cnt2{font-size:10px;color:var(--t3);font-variant-numeric:tabular-nums;flex:none}
.get .cnt2.tight{color:var(--t1);font-weight:600}
.demonote{font-size:11.5px;color:var(--t3);padding-top:9px;line-height:1.5}
.hfade{animation:hfade .65s cubic-bezier(.4,0,.2,1) both}
@keyframes hfade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.tourfoot{padding:13px 18px;font-size:13px;color:var(--t1);background:var(--raised)}
.tourfoot b{color:var(--t0)}
.does{border:1px solid var(--edge);border-radius:14px;background:var(--panel);overflow:hidden;margin:24px 0 4px}
.doesh{padding:13px 18px;background:var(--raised);border-bottom:1px solid var(--rule);
 font-size:12.5px;font-weight:600;color:var(--t0);letter-spacing:-.01em}
.doeslist{list-style:none;margin:0;padding:0;counter-reset:d}
.doeslist li{counter-increment:d;padding:14px 18px 14px 52px;border-top:1px solid var(--rule);position:relative}
.doeslist li:first-child{border-top:0}
.doeslist li::before{content:counter(d);position:absolute;left:18px;top:14px;font-size:11px;font-weight:700;
 color:var(--t3);width:20px;height:20px;border:1px solid var(--edge);border-radius:50%;
 display:flex;align-items:center;justify-content:center}
.doeslist b{display:block;font-size:14.5px;font-weight:600;color:var(--t0);margin-bottom:3px;line-height:1.35}
.doeslist span{display:block;font-size:13px;color:var(--t2);line-height:1.55;max-width:60ch}
.doesfoot{padding:12px 18px;border-top:1px solid var(--rule);background:var(--raised);
 font-size:12px;color:var(--t2);line-height:1.5}
.herostats{display:flex;gap:26px;flex-wrap:wrap;padding:16px 0 0;border-top:1px solid var(--rule);margin-top:22px}
.hs b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.hs span{font-size:11.5px;color:var(--t2)}


/* hero animation is JS-driven now — five different strings on five offsets is
 past what steps() timing can express without becoming unmaintainable */
.demoprod{margin:0 0 2px}
.prodart{width:100%;height:auto;display:block;border-radius:10px;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
#hMeta,#hGets{transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.get{transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.demorow{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--rule)}
#hMeta .demorow:first-child{margin-top:12px}
.demok{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);width:64px;flex:none}
.demov{font-size:13.5px;color:var(--t0);min-width:0}
.demov b{font-weight:600;color:var(--t3);font-size:11px;margin-left:5px}
.caret{display:inline-block;width:1px;height:1em;background:var(--t0);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.caret.off{display:none}
/* ── sections ───────────────────────────────────────────────────── */
.sec{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule);scroll-margin-top:80px}
@media(max-width:900px){.sec{scroll-margin-top:120px}}
.kick{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--t1);font-weight:700;margin-bottom:10px}
.sec h2{font-weight:700;font-size:clamp(22px,3.6vw,30px);line-height:1.12;letter-spacing:-.032em;margin:0 0 12px;text-wrap:balance}
.sec h2 u{text-decoration:none;border-bottom:2px solid var(--t0);padding-bottom:1px}
.body{margin:0 0 18px;font-size:15px;color:var(--t1);line-height:1.6;max-width:64ch}
.steps{margin:0}
.step{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .n{font-size:12px;color:var(--t2);font-weight:700;padding-top:2px;flex:none}
.step b{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.step span{font-size:14px;color:var(--t2);line-height:1.55;display:block;max-width:62ch}
.cn{border:1px solid var(--rule);border-radius:10px;background:var(--panel);padding:16px 18px;margin-bottom:10px}
.cnh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.cnn{font-size:10px;letter-spacing:.12em;color:var(--t3);font-variant-numeric:tabular-nums}
.cnh b{font-size:15.5px;letter-spacing:-.01em}
.cnl{font-size:10.5px;color:var(--t3);margin-left:auto;font-variant-numeric:tabular-nums}
.cnr{font-size:12.5px;color:var(--accent,var(--t2));font-weight:600;margin-bottom:9px}
.cnp{font-size:13.5px;line-height:1.62;color:var(--t1);margin:0 0 8px}
.cnp:last-child{margin-bottom:0}
.cnp b{color:var(--t0);font-weight:600}
.cnx{color:var(--t2);border-top:1px solid var(--rule);padding-top:9px;font-size:13px}
.cmph{font-size:17px;margin:26px 0 6px;letter-spacing:-.015em}
.cmpw{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--panel);margin-top:12px}
.cmp{padding:12px 14px;border-top:1px solid var(--rule)}
.cmp:first-child{border-top:0}
.cmpk{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.cmpk span{font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;font-weight:600}
.cmpv{font-size:13.5px;line-height:1.55;color:var(--t0);word-break:break-word}
.cmpb{height:2px;background:var(--rule);border-radius:2px;margin-top:8px;overflow:hidden}
.cmpb i{display:block;height:100%;background:var(--t2)}
.cmpn{margin-top:14px}
@media(max-width:640px){.cnl{margin-left:0;flex-basis:100%}}
.ex{border:1px solid var(--rule);border-radius:10px;margin-bottom:12px;overflow:hidden;background:var(--panel)}
.exh{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--raised);border-bottom:1px solid var(--rule)}
.exh span:first-child{font-size:14px;font-weight:700;letter-spacing:-.01em}
.exc{font-size:11px;color:var(--t3)}
.exf{padding:12px 14px;border-top:1px solid var(--rule)}
.exf:first-of-type{border-top:0}
.exl{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--t3);font-weight:600;margin-bottom:6px}
.exl b{color:var(--t2);font-weight:600;letter-spacing:0;text-transform:none;font-size:11px}
.exv{font-size:13.5px;line-height:1.55;color:var(--t1);white-space:pre-wrap;word-break:break-word}
.exv i{font-style:normal;color:var(--t3);font-size:12px}
.nots{list-style:none;margin:0;padding:0}
.nots li{padding:14px 0 14px 26px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--t1);line-height:1.55;position:relative;max-width:68ch}
.nots li:last-child{border-bottom:1px solid var(--rule)}
.nots li::before{content:"×";position:absolute;left:0;top:14px;color:var(--t0);font-size:12px;font-weight:700}
.nots b{color:var(--t0);font-weight:700}
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:10px}
.tw table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:440px}
.tw th{text-align:left;background:var(--raised);padding:10px 13px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);font-weight:700;border-bottom:1px solid var(--rule);white-space:nowrap}
.tw td{padding:11px 13px;border-bottom:1px solid var(--rule);color:var(--t1);white-space:nowrap}
.tw td:first-child{color:var(--t0);font-weight:600}
.tw tr:last-child td{border-bottom:0}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:15px 0;font-size:15px;font-weight:600;color:var(--t0);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--t2);font-weight:400;font-size:18px;flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 16px;font-size:14.5px;color:var(--t1);line-height:1.6;max-width:66ch}

.why{display:flex;flex-direction:column}
.w{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
.w:last-child{border-bottom:1px solid var(--rule)}
.wn{font-size:12px;font-weight:700;color:var(--t3);flex:none;padding-top:3px}
.w b{display:block;font-size:15.5px;font-weight:600;margin-bottom:5px;line-height:1.35}
.w span{display:block;font-size:14px;color:var(--t2);line-height:1.6;max-width:64ch}
.w span b{display:inline;color:var(--t1);font-size:inherit}
.modes{display:flex;gap:8px;margin:0 0 6px;flex-wrap:wrap}
.mode{min-width:150px}
.mode{flex:1;border:1px solid var(--edge);background:none;color:var(--t1);border-radius:10px;
 padding:13px 12px;font-size:13.5px;cursor:pointer;text-align:left;line-height:1.35}
.mode b{display:block;font-size:14.5px;font-weight:600;color:var(--t1);margin-bottom:2px}
.mode[aria-pressed="true"]{border-color:var(--t0);background:var(--panel)}
.mode[aria-pressed="true"] b{color:var(--t0)}
.mode small{color:var(--t3);font-size:11.5px}
/* ── tool ───────────────────────────────────────────────────────── */
.drop{margin-top:20px;border:1px dashed var(--edge);border-radius:12px;background:var(--panel);padding:32px 20px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:11px;min-height:150px;justify-content:center}
.drop:hover,.drop.on{border-color:var(--t1);background:var(--raised)}
.drop b{font-size:16px;font-weight:600} .drop small{font-size:12.5px;color:var(--t2)}
.drop img{max-height:160px;border-radius:8px}
label{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--t2);margin-bottom:6px}
input,select{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--edge);border-radius:9px;background:var(--panel);color:var(--t0);outline:none;min-height:48px}
input:focus,select:focus{border-color:var(--t1);background:var(--raised)}
input::placeholder{color:var(--t3)}
.row{display:flex;gap:10px}.row>div{flex:1;min-width:0}.row>div.narrow{flex:0 0 150px}
.f,.field{padding:15px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:7px}
.tones{display:flex;gap:8px;flex-wrap:wrap}
.tone{border:1px solid var(--edge);background:none;color:var(--t1);border-radius:100px;padding:0 15px;min-height:44px;font-size:13px;cursor:pointer}
.tone[aria-pressed="true"]{background:var(--t0);color:var(--bg);border-color:var(--t0);font-weight:600}
.go{width:100%;min-height:56px;border:0;border-radius:10px;background:var(--t0);color:var(--bg);font-weight:600;font-size:16px;cursor:pointer;margin-top:20px}
.go:disabled{background:var(--edge);color:var(--t2);cursor:default}
.fineprint{margin:12px 0 0;font-size:11.5px;color:var(--t3);text-align:center;line-height:1.5}
.waiting{padding:40px 0;display:flex;flex-direction:column;gap:26px}
.waiting h2{font-weight:700;font-size:28px;letter-spacing:-.032em;margin:0}
.waiting p{margin:0;font-size:14px;color:var(--t2)}
.chan{border-top:1px solid var(--rule);position:relative;overflow:hidden}
.chan .r{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--rule)}
.chan .r span:first-child{font-size:15px;color:var(--t1)}
.chan .r span:last-child{font-size:11.5px;color:var(--t3)}
.sweep{position:absolute;left:0;top:0;width:100%;height:44px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(245,245,247,.07),transparent);animation:glide 2.6s ease-in-out infinite}
@keyframes glide{0%{transform:translateY(-40%)}100%{transform:translateY(440%)}}
.elapsed{display:flex;align-items:baseline;justify-content:space-between}
.elapsed b{font-size:15px;font-weight:600}.elapsed span{font-size:12.5px;color:var(--t3)}
.chanlist{margin-top:8px;border-top:1px solid var(--rule)}
.ch{border-bottom:1px solid var(--rule)}
.ch>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;padding:17px 0;cursor:pointer;min-height:56px;color:var(--t1);font-size:15px;text-align:left}
.ch[data-open="1"]>button{color:var(--t0);font-weight:600}
.ch .meta{display:flex;align-items:center;gap:11px;font-size:11.5px;color:var(--t3)}
.ch .body{display:none;padding:0 0 16px}
.ch[data-open="1"] .body{display:block}
.ch[data-open="1"]{background:var(--panel);margin:0 -18px;padding:0 18px}
.fh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fn{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--t2);font-weight:600}
.fm{display:flex;align-items:baseline;gap:12px}
.cnt{font-size:11px;color:var(--t3)}
.cnt.warn{color:var(--t1);font-weight:600}
.cnt.over{color:var(--bg);background:var(--t0);font-weight:700;padding:2px 7px;border-radius:4px}
.cp{border:1px solid var(--edge);background:none;border-radius:7px;padding:0 11px;min-height:44px;font-size:11.5px;font-weight:600;color:var(--t0);cursor:pointer}
.cp.done{background:var(--t0);color:var(--bg);border-color:var(--t0)}
.val{font-size:14.5px;line-height:1.55;color:var(--t1);white-space:pre-wrap;word-break:break-word}
.val.lead{color:var(--t0);font-size:15px}
.sig{display:flex;align-items:baseline;gap:8px;padding-top:10px;margin-top:10px;border-top:1px solid var(--rule)}
.sig i{font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--t0);font-weight:700;flex:none}
.sig span{font-size:12px;color:var(--t2)}
.err{margin-top:18px;padding:18px 20px;border:1px solid var(--t0);border-radius:10px;background:var(--panel)}
.err b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.err p{margin:0;font-size:14px;color:var(--t1);line-height:1.5}
footer{border-top:1px solid var(--rule);margin-top:48px;padding:24px 0 48px;color:var(--t3);font-size:12px;line-height:1.6}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(10,10,11,.35);border-top-color:var(--bg);border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}

/* ── import calculator: the form and the result ─────────────────── */
.calcform{border:1px solid var(--edge);border-radius:14px;background:var(--panel);overflow:hidden}
.cf-row{padding:16px 18px 0}
.cf-row input{width:100%}
.calcform input,.calcform select{background:var(--raised);border:1px solid var(--edge);
 border-radius:8px;color:var(--t0);font:inherit;font-size:14px;padding:10px 12px;width:100%}
.calcform input::placeholder{color:var(--t3)}
.cf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 18px 4px}
@media(max-width:760px){.cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cf-grid label{display:flex;flex-direction:column;gap:5px;font-size:9.5px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--t3);font-weight:700}
.cf-grid .opt{letter-spacing:0;text-transform:none;font-weight:400;color:var(--t3)}
.cf-act{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap;
 border-top:1px solid var(--rule);background:var(--raised);margin-top:12px}
.cf-act button{background:var(--t0);color:var(--bg);border:0;border-radius:8px;font-weight:600;
 font-size:14px;padding:11px 22px;cursor:pointer}
.cf-act span{font-size:11.5px;color:var(--t3);line-height:1.5;flex:1;min-width:200px}

.res{border:1px solid var(--edge);border-radius:14px;background:var(--panel);overflow:hidden;margin:0 0 26px}
.res.viable{border-color:#2f6b45}.res.no{border-color:#6b2f2f}.res.marginal{border-color:#6b5a2f}
.resv{padding:15px 20px;font-size:15px;font-weight:600;border-bottom:1px solid var(--rule)}
.res.viable .resv{background:#0f1a13;color:#7fd6a0}
.res.marginal .resv{background:#1a170f;color:#e3c46b}
.res.no .resv{background:#1a0f0f;color:#e79a9a}
.res.unknown .resv{background:var(--raised);color:var(--t1)}
.resnums{display:flex;gap:34px;padding:18px 20px;flex-wrap:wrap}
.resnums div b{display:block;font-size:25px;letter-spacing:-.02em;line-height:1.1}
.resnums div span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);font-weight:700}
.resbody{border-top:1px solid var(--rule);padding:16px 20px}
.resbody pre{white-space:pre-wrap;font-size:12px;color:var(--t1);margin:0;line-height:1.7;
 font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.vtab{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:4px}
.vtab td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule)}
.vtab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vtab .best{color:#7fd6a0;font-weight:600}
.warn{border:1px solid #6b2f2f;border-radius:10px;background:#170f0f;padding:13px 16px;
 font-size:13.5px;color:#e79a9a;margin:0 0 18px;line-height:1.55}
.gate{border:1px solid var(--edge);border-radius:12px;background:var(--raised);
 padding:15px 18px;margin:0 0 20px;font-size:13.5px;color:var(--t1);line-height:1.6}
.gate b{color:var(--t0)}
.gate a{display:inline-block;margin-top:10px;background:var(--t0);color:var(--bg);
 text-decoration:none;font-weight:600;font-size:13px;padding:9px 18px;border-radius:8px}

/* ── market guidance: what already sells ────────────────────────── */
.guide{border:1px solid var(--edge);border-radius:14px;background:var(--panel);
 overflow:hidden;margin:26px 0 0}
.guideh{padding:16px 20px;background:var(--raised);border-bottom:1px solid var(--rule)}
.guideh b{display:block;font-size:15px;margin-bottom:5px}
.guideh span{display:block;font-size:12.5px;color:var(--t1);line-height:1.6;max-width:62ch}
.gtab{width:100%;border-collapse:collapse;font-size:13.5px}
.gtab th{text-align:left;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--t3);font-weight:700;padding:11px 20px 8px;border-bottom:1px solid var(--rule)}
.gtab th.n,.gtab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gtab td{padding:11px 20px;border-bottom:1px solid var(--rule);vertical-align:top}
.gtab tr:last-child td{border-bottom:0}
.gtab .gsub{font-size:11.5px;color:var(--t3)}
.gtab .pay{color:#7fd6a0;font-weight:600}
.guidef{padding:13px 20px;font-size:12.5px;color:var(--t3);background:var(--raised);
 border-top:1px solid var(--rule);line-height:1.6}

/* ── the wall, after the value ──────────────────────────────────── */
.wall{border:1px solid var(--t0);border-radius:14px;background:var(--raised);
 padding:24px 26px;margin:26px 0 0;text-align:center}
.wall b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:8px}
.wall p{margin:0 auto 18px;font-size:13.5px;color:var(--t1);max-width:56ch;line-height:1.65}
.wall a{display:inline-block;background:var(--t0);color:var(--bg);text-decoration:none;
 font-weight:600;font-size:14.5px;padding:13px 30px;border-radius:9px}
.wall .sm{font-size:12px;color:var(--t3);margin:12px 0 0}

/* ── the walkthrough ────────────────────────────────────────────
   Namespaced under .wk on purpose. An earlier .step rule sets
   display:flex for the console's list, and every walkthrough step
   silently inherited it — the whole page rendered as newspaper
   columns. Shared class names across two unrelated layouts is the
   bug; a namespace is the fix.
   Colour is structural, not decorative. Three phases carry three
   hues, and the semantic trio (green / amber / red) is reserved
   for verdicts so it means the same thing everywhere.        ── */
.wk{max-width:100%}
.wk .ph{margin:64px 0 4px;display:flex;align-items:center;gap:14px}
.wk .ph:first-child{margin-top:26px}
.wk .ph .pn{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
 padding:6px 11px;border-radius:100px;flex:none}
.wk .ph h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--t1)}
.wk .ph i{flex:1;height:1px;display:block}
.wk .a .pn{color:var(--pa);background:var(--pabg);border:1px solid var(--paed)}
.wk .b .pn{color:var(--pb);background:var(--pbbg);border:1px solid var(--pbed)}
.wk .c .pn{color:var(--pc);background:var(--pcbg);border:1px solid var(--pced)}
.wk .a i{background:linear-gradient(90deg,var(--paed),transparent)}
.wk .b i{background:linear-gradient(90deg,var(--pbed),transparent)}
.wk .c i{background:linear-gradient(90deg,var(--pced),transparent)}

.wkst{display:block;padding:34px 0 10px;border-top:1px solid var(--rule);margin-top:26px}
.wkst.top{border-top:0;margin-top:8px}
.wkn{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.wkn i{font-style:normal;width:32px;height:32px;border-radius:9px;display:flex;
 align-items:center;justify-content:center;font-size:13.5px;font-weight:700;flex:none}
.wkn b{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.wkst.a .wkn i{color:var(--pa);background:var(--pabg);border:1px solid var(--paed)}
.wkst.b .wkn i{color:var(--pb);background:var(--pbbg);border:1px solid var(--pbed)}
.wkst.c .wkn i{color:var(--pc);background:var(--pcbg);border:1px solid var(--pced)}
.wkst.a .wkn b{color:var(--pa)} .wkst.b .wkn b{color:var(--pb)} .wkst.c .wkn b{color:var(--pc)}
.wkst h2{font-size:clamp(23px,3.4vw,30px);line-height:1.15;letter-spacing:-.03em;
 margin:0 0 13px;font-weight:700;text-wrap:balance}
.wkst .body{font-size:15.5px;color:var(--t1);line-height:1.7;max-width:64ch;margin:0 0 15px;
 display:block}
.wkst .body b{color:var(--t0);font-weight:600}
.wkst .body em{font-style:normal;color:var(--t0);border-bottom:1px solid var(--t3)}

/* a rendered fragment of the real product, used as an illustration */
.shot{border:1px solid var(--edge);border-radius:12px;background:var(--panel);
 overflow:hidden;margin:22px 0 8px;display:block}
.shotbar{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--raised);
 border-bottom:1px solid var(--rule)}
.shotbar i{width:9px;height:9px;border-radius:50%;background:var(--edge);display:block}
.shotbar span{font-size:10.5px;color:var(--t3);letter-spacing:.06em;margin-left:6px;
 display:inline;max-width:none}
.shotin{padding:16px 18px;display:block;overflow-x:auto}
.shotcap{font-size:12.5px;color:var(--t3);line-height:1.6;padding:0 2px;margin-top:10px;
 display:block;max-width:66ch}
.shotcap b{color:var(--t1);display:inline;font-size:inherit;margin:0}

/* flow diagram */
.solo .flow{display:flex;align-items:stretch;gap:0;margin:24px 0 6px;flex-wrap:wrap}
.solo .flow .fs{flex:1;min-width:150px;border:1px solid var(--edge);background:var(--panel);
 padding:14px 15px;position:relative;display:block}
.solo .flow .fs:first-child{border-radius:11px 0 0 11px}
.solo .flow .fs:last-child{border-radius:0 11px 11px 0}
.solo .flow .fs+.fs{border-left:0}
.solo .flow .fs em{font-style:normal;display:block;font-size:10px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--t1);font-weight:700;margin-bottom:6px;border:0}
.solo .flow .fs b{display:block;font-size:13.5px;line-height:1.4;font-weight:600;
 margin:0;color:var(--t0)}
.solo .flow .fs span{display:block;font-size:11.5px;color:var(--t2);margin-top:5px;line-height:1.5;
 max-width:none}
.solo .flow .fs.hot{background:var(--okbg);border-color:var(--oked)}
.solo .flow .fs.hot b{color:var(--ok)}
.solo .flow .fs.hot em{color:var(--ok);opacity:.75}
@media(max-width:760px){.solo .flow{flex-direction:column}
 .solo .flow .fs{border-radius:0!important;border-left:1px solid var(--edge)!important}
 .solo .flow .fs:first-child{border-radius:11px 11px 0 0!important}
 .solo .flow .fs:last-child{border-radius:0 0 11px 11px!important}
 .solo .flow .fs+.fs{border-top:0}}

/* landscape comparison: venues across, facts down */
table.cmp{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed;
 padding:0;border-top:0}
table.cmp th{text-align:left;padding:12px 14px;border-bottom:1px solid var(--edge);
 font-size:12.5px;font-weight:600;color:var(--t0)}
table.cmp th:first-child{color:var(--t1);font-size:10px;letter-spacing:.11em;
 text-transform:uppercase;font-weight:700;width:126px}
table.cmp td{padding:11px 14px;border-bottom:1px solid var(--rule);
 font-variant-numeric:tabular-nums;color:var(--t1)}
table.cmp td:first-child{color:var(--t2);font-size:12px;font-variant-numeric:normal}
table.cmp tr:last-child td{border-bottom:0}
table.cmp .big{font-size:17px;font-weight:600;color:var(--t0)}
table.cmp .win{color:var(--ok);font-weight:600}
table.cmp .lose{color:var(--t2)}
table.cmp col.w{background:var(--okbg)}
@media(max-width:700px){table.cmp{font-size:12.5px}
 table.cmp th,table.cmp td{padding:9px 8px}table.cmp th:first-child{width:84px}}

/* the three verdict colours, used identically wherever a verdict appears */
.v{display:inline-flex;align-items:center;gap:7px;border-radius:8px;padding:7px 12px;
 font-size:13px;font-weight:600;border:1px solid}
.v.ok{color:var(--ok);background:var(--okbg);border-color:var(--oked)}
.v.wn{color:var(--wn);background:var(--wnbg);border-color:var(--wned)}
.v.bd{color:var(--bd);background:var(--bdbg);border-color:var(--bded)}
.vrow{display:flex;flex-direction:column;gap:9px;margin:16px 0 4px}
.vrow>div{display:flex;gap:13px;align-items:flex-start;font-size:13.5px;color:var(--t1);
 line-height:1.6}
.vrow .v{flex:none;min-width:158px;justify-content:center}

/* annotated line: the callout that points at a number */
.ann{color:var(--t3);font-size:11.5px;padding-left:10px;font-weight:400}
.ann.a{color:var(--pa)} .ann.b{color:var(--pb)} .ann.c{color:var(--pc)}

/* ── the decision board ───────────────────────────────────────────
   Everything the eight steps compiled, on one screen, ending in a
   recommendation. This is the artefact the product actually sells,
   so it is the loudest thing on the page: a verdict banner, one
   landscape table, and the reasoning underneath it.          ── */
.mx{border:1px solid var(--edge);border-radius:16px;background:var(--panel);
 overflow:hidden;margin:26px 0 0}
.mxhead{display:flex;align-items:center;justify-content:space-between;gap:18px;
 flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--edge);background:var(--raised)}
.mxid{min-width:0}
.mxid b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.mxid span{display:block;font-size:11.5px;color:var(--t2);margin-top:5px;letter-spacing:.01em}
.mxv{flex:none;display:flex;align-items:center;gap:10px;border-radius:10px;
 padding:10px 16px;border:1px solid}
.mxv em{font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
 display:block;opacity:.72;font-weight:700}
.mxv b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.mxv.no{color:var(--bd);background:var(--bdbg);border-color:var(--bded)}
.mxv.wn{color:var(--wn);background:var(--wnbg);border-color:var(--wned)}
.mxv.ok{color:var(--ok);background:var(--okbg);border-color:var(--oked)}

.mxscroll{overflow-x:auto}
table.mxt{width:100%;min-width:560px;border-collapse:collapse;font-size:13.5px;
 table-layout:fixed}
table.mxt th{text-align:left;padding:13px 14px;border-bottom:1px solid var(--edge);
 font-size:12.5px;font-weight:700;color:var(--t0);vertical-align:bottom}
table.mxt th small{display:block;font-size:10px;font-weight:400;color:var(--t3);
 margin-top:3px;letter-spacing:.02em}
table.mxt th:first-child{width:150px;color:var(--t1);font-size:10px;letter-spacing:.12em;
 text-transform:uppercase}
table.mxt td{padding:9px 14px;font-variant-numeric:tabular-nums;color:var(--t1)}
table.mxt td:first-child{color:var(--t2);font-size:12px;font-variant-numeric:normal}
table.mxt tr.rule td{border-top:1px solid var(--rule);padding-top:13px}
table.mxt tr.key td{font-size:17px;font-weight:700;color:var(--t0);padding:12px 14px}
table.mxt tr.key td:first-child{font-size:11.5px;font-weight:400;color:var(--t2)}
table.mxt .neg{color:var(--t2)}
table.mxt .up{color:var(--ok)}
table.mxt .dn{color:var(--bd)}
table.mxt .out{color:var(--t3)}
table.mxt tr.rec td{padding:14px}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
 text-transform:uppercase;border-radius:100px;padding:6px 12px;border:1px solid}
.pill.y{color:var(--ok);background:var(--okbg);border-color:var(--oked)}
.pill.m{color:var(--wn);background:var(--wnbg);border-color:var(--wned)}
.pill.n{color:var(--bd);background:var(--bdbg);border-color:var(--bded)}
.pill.o{color:var(--t3);background:transparent;border-color:var(--edge)}

.mxwhy{border-top:1px solid var(--edge);display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr))}
.mxwhy div{padding:16px 18px;border-left:1px solid var(--rule)}
.mxwhy div:first-child{border-left:0}
.mxwhy em{font-style:normal;display:block;font-size:10px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--t1);font-weight:700;margin-bottom:7px}
.mxwhy p{margin:0;font-size:12.5px;line-height:1.6;color:var(--t1)}
.mxwhy b{color:var(--t0);font-weight:600}
@media(max-width:760px){.mxwhy{grid-template-columns:1fr}
 .mxwhy div{border-left:0;border-top:1px solid var(--rule)}
 .mxwhy div:first-child{border-top:0}}

.mxfoot{border-top:1px solid var(--edge);background:var(--raised);padding:14px 22px;
 display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.mxfoot div{min-width:0}
.mxfoot em{font-style:normal;display:block;font-size:10px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--t1);font-weight:700}
.mxfoot b{display:block;font-size:15px;font-weight:700;margin-top:3px;letter-spacing:-.015em}

/* ── wayfinding: a sticky bar that says where you are ─────────────
   The left rail was removed because it cost the content column
   256px. A horizontal bar costs nothing horizontally and does the
   same job better: the section names stay visible, the calculator
   stays one click away from anywhere, and a progress line shows
   how much of the page is left.                              ── */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,10,11,.86);
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 border-bottom:1px solid var(--rule);margin:0 -28px}
.navin{max-width:1080px;margin:0 auto;padding:0 28px;display:flex;align-items:center;
 gap:22px;height:56px}
.navmark{font-weight:700;font-size:17px;letter-spacing:-.03em;text-decoration:none;flex:none}
.navsteps{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.navsteps::-webkit-scrollbar{display:none}
.navsteps a{font-size:12.5px;color:var(--t2);text-decoration:none;padding:7px 11px;
 border-radius:7px;white-space:nowrap;transition:color .15s,background .15s}
.navsteps a:hover{color:var(--t1)}
.navsteps a.on{color:var(--t0);background:var(--raised);font-weight:600}
.navcta{flex:none;background:var(--t0);color:var(--bg);text-decoration:none;font-weight:600;
 font-size:12.5px;padding:9px 15px;border-radius:8px;transition:transform .18s ease-out}
.navcta:hover{transform:translateY(-1px)}
.navprog{height:2px;background:var(--pc);width:0;transition:width .12s linear}
@media(max-width:900px){.nav{margin:0 -20px}.navin{padding:0 20px}}
@media(max-width:760px){.navin{gap:12px;height:52px}
 .navsteps a{padding:6px 9px;font-size:12px}.navmark{font-size:15px}
 .navcta{padding:8px 12px;font-size:12px}}

/* ── things that are true, stated plainly ─────────────────────── */
.seals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
 background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
 margin:26px 0 0}
.seals div{background:var(--panel);padding:15px 16px}
.seals b{display:block;font-size:12.5px;font-weight:600;color:var(--t0);line-height:1.35}
.seals span{display:block;font-size:12px;color:var(--t2);margin-top:5px;line-height:1.5}
@media(max-width:820px){.seals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.seals{grid-template-columns:1fr}}

/* ── cost composition: the product is the minority of what you pay ─ */
.bars{margin:22px 0 6px}
.barrow{display:flex;height:38px;border-radius:9px;overflow:hidden;border:1px solid var(--edge)}
.barrow i{display:block;height:100%;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.barkey{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:13px}
.barkey span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t2)}
.barkey em{font-style:normal;width:9px;height:9px;border-radius:3px;display:block;flex:none}
.barkey b{color:var(--t0);font-weight:600;font-variant-numeric:tabular-nums}

/* ── the verdict, as a badge you cannot miss ──────────────────── */
.badge{display:inline-flex;align-items:center;gap:13px;border-radius:13px;
 padding:15px 22px;border:1px solid;margin:6px 0 2px}
.badge em{font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
 font-weight:700;opacity:.72;display:block}
.badge b{display:block;font-size:22px;font-weight:700;letter-spacing:-.025em;margin-top:3px}
.badge.ok{color:var(--ok);background:var(--okbg);border-color:var(--oked)}
.badge.wn{color:var(--wn);background:var(--wnbg);border-color:var(--wned)}
.badge.no{color:var(--bd);background:var(--bdbg);border-color:var(--bded)}
@keyframes pulseonce{0%{transform:scale(.97);opacity:0}
 60%{transform:scale(1.015);opacity:1}100%{transform:scale(1);opacity:1}}
.badge.seen{animation:pulseonce .55s cubic-bezier(.2,.7,.2,1) both}

/* ── plans, side by side ──────────────────────────────────────── */
.pl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 0}
.pl>div{border:1px solid var(--rule);border-radius:13px;background:var(--panel);
 padding:20px 18px;display:flex;flex-direction:column}
.pl>div.hi{border-color:var(--oked);background:var(--okbg)}
.pl h4{margin:0;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 color:var(--t2)}
.pl .amt{font-size:27px;font-weight:700;letter-spacing:-.03em;margin:9px 0 2px}
.pl .amt small{font-size:12.5px;font-weight:400;color:var(--t2);letter-spacing:0}
.pl ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.pl li{font-size:12.5px;color:var(--t1);line-height:1.5;padding-left:19px;position:relative}
.pl li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700;font-size:12px}
.pl li.x{color:var(--t3)}
.pl li.x::before{content:"—";color:var(--t3)}
.pl a{margin-top:16px;text-align:center;text-decoration:none;font-weight:600;font-size:13px;
 padding:11px 0;border-radius:8px;border:1px solid var(--edge);color:var(--t0);
 transition:transform .18s ease-out}
.pl a.solid{background:var(--t0);color:var(--bg);border-color:var(--t0)}
.pl a:hover{transform:translateY(-2px)}
.plnote{font-size:12.5px;color:var(--t3);margin:14px 0 0}
@media(max-width:760px){.pl{grid-template-columns:1fr}}

/* ── entrances: nothing bounces, nothing autoplays ────────────── */
/* Entrances hide their content until an observer reveals it, so a broken or
   blocked script would leave a blank page. The hiding is therefore gated on a
   class the script itself sets: no script, no hiding, content visible. */
.js .rise{opacity:0;transform:translateY(14px);
 transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1)}
.js .rise.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
 .js .rise{opacity:1;transform:none;transition:none}
 .badge.seen{animation:none}
 .barrow i{transition:none}}

/* ── the hero ─────────────────────────────────────────────────────
   .sec carries a 56px top margin and a rule so sections separate
   from each other. On the FIRST section that rule sits directly
   under the sticky bar with a gap above it, which reads as a
   rendering fault rather than a divider.                     ── */
.sec:first-of-type{margin-top:0;border-top:0;padding-top:26px}
.hero1{font-size:clamp(30px,4.4vw,46px);line-height:1.05;letter-spacing:-.036em;
 font-weight:700;margin:0 0 13px;text-wrap:balance}
.hero1 span{color:var(--t2)}
.herolede{margin:0;font-size:16px;color:var(--t1);max-width:58ch;line-height:1.58}
.herolede b{color:var(--t0);font-weight:600}
.cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 0}
.cta a.go1{background:var(--t0);color:var(--bg);text-decoration:none;font-weight:600;
 font-size:14.5px;padding:13px 26px;border-radius:9px;transition:transform .18s ease-out}
.cta a.go1:hover{transform:translateY(-2px)}
.cta a.go2{color:var(--t2);text-decoration:none;font-size:13.5px;
 border-bottom:1px solid var(--edge);padding-bottom:2px}
.cta a.go2:hover{color:var(--t0)}

/* ── the rotating panel of real decisions ─────────────────────────
   Not a slideshow of pictures. Each slide is a product that really
   is priced on both sides, with the landed cost the engine computed
   and the recommendation its own gates produced. Fades rather than
   slides: a horizontal transform on a full-width panel fights the
   page's vertical reading.                                    ── */
.car{position:relative;margin:24px 0 0;border:1px solid var(--edge);border-radius:14px;
 background:var(--panel);overflow:hidden}
/* Slides stack in ONE grid cell rather than being absolutely positioned.
   The absolute version needed a min-height guessed in advance and a rule
   pinning the first slide into flow — and that rule, at specificity (0,4,0),
   outranked .cars.on at (0,2,0), so slide one never left the flow and the
   active slide rendered BELOW it. Grid removes the whole class of bug: the
   cell is as tall as the tallest slide, and only opacity ever changes. */
.carv{display:grid}
.cars{grid-area:1/1;padding:18px 20px;opacity:0;visibility:hidden;
 transition:opacity .55s ease-out}
.cars.on{opacity:1;visibility:visible}
.carn{font-size:15px;font-weight:600;letter-spacing:-.018em;line-height:1.35;
 margin:0 0 3px;color:var(--t0)}
.carsrc{font-size:11.5px;color:var(--t2);letter-spacing:.04em;margin-bottom:15px}
.carg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:auto;
 background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.carg div{background:var(--raised);padding:11px 13px}
.carg em{font-style:normal;display:block;font-size:9px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--t3);font-weight:700}
.carg b{display:block;font-size:16px;font-weight:700;margin-top:4px;letter-spacing:-.02em;
 font-variant-numeric:tabular-nums}
.carg span{display:block;font-size:10.5px;color:var(--t3);margin-top:2px}
.carg .hi b{color:var(--ok)}
.carr{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.carr p{margin:0;font-size:12px;color:var(--t2);line-height:1.5;flex:1;min-width:190px}
.carbar{display:flex;align-items:center;gap:9px;padding:11px 22px;
 border-top:1px solid var(--rule);background:var(--raised)}
.carbar .dots{display:flex;gap:6px;flex:1}
.carbar button{width:7px;height:7px;padding:0;border-radius:50%;border:0;cursor:pointer;
 background:var(--edge);transition:background .2s,transform .2s}
.carbar button.on{background:var(--t0);transform:scale(1.3)}
.carbar span{font-size:10.5px;color:var(--t3);letter-spacing:.03em}
/* Mobile: three columns survive down to 430px because the values are short
   (R$ 3.234) and stacking them makes a slide taller than the viewport, which
   breaks the cross-fade far worse than tight type does. */
@media(max-width:760px){.carg b{font-size:14px}.carg em{font-size:8.5px}
 .carg div{padding:9px 8px}.carg span{display:none}}
@media(max-width:430px){.carg{grid-template-columns:1fr}.carg span{display:block}}
@media (prefers-reduced-motion:reduce){.cars{transition:none}}
.plwho{margin:11px 0 0;font-size:12px;color:var(--t2);line-height:1.55}
.plwho b{color:var(--t1);font-weight:600}
.pl>div.hi .plwho{color:var(--t1)}
.pl>div.hi .plwho b{color:var(--t0)}

/* product image, when we hold one we are allowed to publish */
.carh{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;
 align-items:stretch}
.carh.nopic{grid-template-columns:minmax(0,1fr)}
.carimg{border-radius:11px;overflow:hidden;background:#fff;border:1px solid var(--rule);
 display:flex;align-items:center;justify-content:center;padding:14px;min-height:100%}
.carimg img{width:100%;height:100%;max-height:210px;object-fit:contain;display:block}
.carht{min-width:0;display:flex;flex-direction:column}
@media(max-width:760px){.carh{grid-template-columns:150px minmax(0,1fr);gap:15px}
 .carimg{padding:9px}.carimg img{max-height:150px}}
@media(max-width:520px){.carh{grid-template-columns:minmax(0,1fr);gap:13px}
 .carimg{min-height:0}.carimg img{max-height:168px}}
.mxlead{margin:0;padding:16px 22px 4px;font-size:14.5px;color:var(--t1);line-height:1.6;
 max-width:74ch}
.mxlead b{color:var(--t0);font-weight:600}
table.mxt tr.key td b{font-size:19px}
.carwhy{margin:0 0 14px;font-size:12.5px;color:var(--t2);line-height:1.55;max-width:52ch}
.carr{margin:0 0 11px}
/* the column we cannot fill: the supplier price is the reader's job, and the
   panel says so rather than inventing a number for it */
.carg .ask{background:var(--pabg);border-left:1px solid var(--paed)}
.carg .ask em{color:var(--pa);opacity:.85}
.carg .ask b{color:var(--pa)}
.carg .ask b.dim{color:var(--t3);font-weight:600;font-size:14px}
.carg .ask span{color:var(--t2)}
.carnote{margin:16px 0 0;font-size:13.5px;color:var(--t2);line-height:1.65;max-width:76ch}
.carnote b{color:var(--t0);font-weight:600}
table.mxt td small{font-size:10.5px;font-weight:400;color:var(--t3)}

/* freight, with its provenance attached — the easiest number here to distrust */
.fnote{margin:14px 0 0;border:1px solid var(--rule);border-left-width:3px;
 border-radius:9px;background:var(--panel);padding:12px 15px}
.fnote b{display:inline;font-size:13.5px;font-weight:600;color:var(--t0)}
.fnote .fsrc{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
 margin-left:10px}
.fnote p{margin:6px 0 0;font-size:12px;color:var(--t2);line-height:1.55}
.fnote a{color:var(--t1);text-decoration:underline;text-underline-offset:2px}
.fnote.g-you{border-left-color:var(--pa)}   .fnote.g-you .fsrc{color:var(--pa)}
.fnote.g-ok{border-left-color:var(--ok)}    .fnote.g-ok .fsrc{color:var(--ok)}
.fnote.g-est{border-left-color:var(--wn)}   .fnote.g-est .fsrc{color:var(--wn)}

/* ── the derivation, not just the numbers ─────────────────────────
   Three figures side by side told the reader WHAT without telling
   them HOW one becomes the next. A chain with the subtraction named
   between each pair is the same data and an argument you can follow. */
.chain{display:flex;flex-direction:column;gap:0;margin-top:auto}
.dch{display:flex;align-items:baseline;gap:12px;padding:10px 13px;border-radius:9px;
 background:var(--raised);border:1px solid var(--rule)}
.dch em{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:none;
 color:var(--t0);font-weight:600;flex:1;min-width:0;line-height:1.45}
.dch b{font-size:19px;font-weight:700;letter-spacing:-.02em;flex:none;
 font-variant-numeric:tabular-nums}
.dch.hot{background:var(--pabg);border-color:var(--paed)}
.dch.hot em{color:var(--pa);opacity:.9} .dch.hot b{color:var(--pa)}
.dch.dead{background:var(--bdbg);border-color:var(--bded)}
.dch.dead em{color:var(--bd);opacity:.9} .dch.dead b{color:var(--bd);font-size:15px}
.dchop{font-size:12px;color:var(--t2);line-height:1.4;padding:6px 13px 6px 26px;
 position:relative}
.dchop::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:1px;
 background:var(--edge)}
.dchop b{color:var(--t2);font-weight:600}
.carroute{font-size:11px;color:var(--pa);letter-spacing:.03em;margin-bottom:12px;
 font-weight:600}
@media(max-width:520px){.dch b{font-size:16px}.dch em{font-size:10.5px}}
.mxroute{margin:0;padding:16px 22px 0;font-size:13px;color:var(--pa);line-height:1.6;
 max-width:80ch}
.mxroute b{color:var(--t0);font-weight:600}
table.mxt th small{line-height:1.35}
.dch em u{text-decoration:none;border-bottom:1px solid var(--paed);padding-bottom:1px}
.dchfoot{margin:9px 0 0;font-size:12px;color:var(--t2);line-height:1.55;padding:0 2px}
.dchfoot b{color:var(--t1);font-weight:600}

/* ── the number they came for ─────────────────────────────────────
   The market price was step 1 of a derivation. It is the product:
   the price you have to match or beat, measured today, on a named
   platform. It leads, and the ceiling follows from it.         ── */
.carbeat{border:1px solid var(--oked);background:var(--okbg);border-radius:11px;
 padding:13px 16px;margin-bottom:14px}
.carbeat em{font-style:normal;display:block;font-size:10.5px;letter-spacing:.09em;
 text-transform:uppercase;color:var(--ok);font-weight:700;margin-bottom:5px}
.carbeat b{display:block;font-size:30px;line-height:1;font-weight:700;
 letter-spacing:-.03em;color:var(--t0);font-variant-numeric:tabular-nums}
.carbeat span{display:block;font-size:11.5px;color:var(--t1);margin-top:6px}
.carbeat span i{font-style:normal;color:var(--ok);font-weight:600}
@media(max-width:520px){.carbeat b{font-size:25px}}

/* ── the margin control ───────────────────────────────────────────
   35% was hardcoded in two places and presented as if it were a
   property of the product. It is a property of the READER — what
   return makes the trouble worth it — so they set it, and every
   ceiling on the page moves with it. Landed cost is affine in the
   supplier price, so the recomputation is arithmetic the browser
   does instantly; no round trip, no server state.            ── */
.tgt{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
 border:1px solid var(--edge);border-radius:11px;background:var(--panel);
 padding:13px 17px;margin:18px 0 0}
.tgt label{font-size:12.5px;color:var(--t1);flex:none;font-weight:500}
.tgt input[type=range]{flex:1;min-width:170px;accent-color:var(--pa);height:22px;
 background:transparent;cursor:pointer}
.tgt output{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--pa);
 flex:none;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.tgt .hint{flex-basis:100%;font-size:11.5px;color:var(--t2);line-height:1.5;margin:0}
.tgt output.zero{color:var(--wn)}
.verlink{color:var(--ok);text-decoration:underline;text-underline-offset:2px;
 font-weight:600;white-space:nowrap}
.verlink:hover{color:var(--t0)}

/* ── the limits of the thing ──────────────────────────────────────
   Stated plainly and in a readable size rather than shrunk to 9px
   at the bottom of the page. A limit that has to be hunted for is
   a limit the reader is entitled to say they were never told. */
.foot{border-top:1px solid var(--rule);margin-top:60px;padding:26px 0 46px}
.foot h4{margin:0 0 10px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--t1);font-weight:700}
.foot p{margin:0 0 11px;font-size:13px;color:var(--t2);line-height:1.65;max-width:78ch}
.foot p b{color:var(--t1);font-weight:600}
.foot .fl{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:12.5px}
.foot .fl a{color:var(--t2);text-decoration:none}
.foot .fl a:hover{color:var(--t0)}
.note{border:1px solid var(--wned);background:var(--wnbg);border-radius:10px;
 padding:12px 15px;margin:16px 0 0}
.note b{color:var(--wn);font-weight:700;font-size:12px;letter-spacing:.06em;
 text-transform:uppercase;display:block;margin-bottom:5px}
.note p{margin:0;font-size:12.5px;color:var(--t1);line-height:1.6}

/* ── sugestões para focar ─────────────────────────────────────────
   A curated list, not a promise. Every row links to the listing so
   the reader checks it themselves — which is the whole posture: we
   narrow the field, they make the call. Rows that cannot close stay
   IN the list, greyed and labelled, because the discarding is the
   part that would cost the reader days to redo.               ── */
.sug{border:1px solid var(--edge);border-radius:14px;background:var(--panel);
 overflow:hidden;margin:24px 0 0}
.sugrow{display:grid;grid-template-columns:52px minmax(0,1fr) 104px 104px 128px;
 gap:14px;align-items:center;padding:12px 18px;border-top:1px solid var(--rule)}
.sugrow:first-child{border-top:0}
.sugrow.head{background:var(--raised);padding:10px 18px}
.sugrow.head span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--t1);font-weight:700}
.sugrow.head .r{text-align:right}
.sugpic{width:52px;height:52px;border-radius:8px;overflow:hidden;background:#fff;
 border:1px solid var(--rule);display:flex;align-items:center;justify-content:center}
.sugpic img{width:100%;height:100%;object-fit:contain;display:block}
.sugpic.none{background:var(--raised)}
.sugn{min-width:0}
.sugn b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugn span{display:block;font-size:11px;color:var(--t2);margin-top:3px}
.sugn a{color:var(--ok);text-decoration:underline;text-underline-offset:2px;
 font-weight:600}
.sugv{text-align:right;font-variant-numeric:tabular-nums}
.sugv b{display:block;font-size:15px;font-weight:600}
.sugv span{display:block;font-size:10px;color:var(--t2);margin-top:2px}
.sugrow.dead{opacity:.5}
.sugrow.dead .sugv b{color:var(--t2)}
.sugend{padding:14px 18px;border-top:1px solid var(--rule);background:var(--raised);
 font-size:12.5px;color:var(--t2);line-height:1.6}
.sugend b{color:var(--t0)}
.sugend a{color:var(--t0)}
@media(max-width:820px){
 .sugrow{grid-template-columns:44px minmax(0,1fr) 96px;gap:11px;padding:11px 14px}
 .sugrow .hide{display:none}
 .sugpic{width:44px;height:44px}}
.sugsell{border-top:1px solid var(--edge);background:var(--pabg);padding:18px 20px;
 display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.sugsell>div{flex:1;min-width:260px}
.sugsell b{display:block;font-size:14.5px;color:var(--t0);font-weight:600;
 letter-spacing:-.01em}
.sugsell p{margin:6px 0 0;font-size:12.5px;color:var(--t1);line-height:1.6;max-width:66ch}
.sugsell p b{display:inline;font-size:inherit;color:var(--pa)}
.sugsell a{flex:none;background:var(--pa);color:var(--bg);text-decoration:none;
 font-weight:600;font-size:13.5px;padding:11px 22px;border-radius:8px;
 transition:transform .18s ease-out}
.sugsell a:hover{transform:translateY(-2px)}
.okbox{border:1px solid var(--oked);background:var(--okbg);border-radius:10px;
 padding:13px 16px;margin:16px 0 0;font-size:13.5px;color:var(--t1);line-height:1.6}
.okbox b{color:var(--ok);font-weight:600}