:root{
  --linen:#f6f3ee; --card:#fcfaf6; --card-2:#efeae2; --ink:#3b2a20; --ink-2:#6d5c50; --ink-3:#9a8b7f;
  --line:rgba(59,42,32,.10); --line-2:rgba(59,42,32,.2);
  --sage:#8a9a7b; --sage-d:#5f6e52; --sage-soft:rgba(138,154,123,.16); --loss:#9b6a55;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --gut:clamp(16px,3.6vw,40px); --max:1280px; --rad:18px; --gap:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--linen);color:var(--ink);font:400 15.5px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
svg{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sage-d);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--linen);padding:8px 12px;z-index:100;border-radius:8px}
.skip:focus{left:8px}
[hidden]{display:none!important}
code{font-family:var(--mono);font-size:.85em;background:var(--card-2);padding:1px 5px;border-radius:5px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;max-width:var(--max);margin:0 auto;padding:14px var(--gut);background:rgba(246,243,238,.88);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:400 27px/1 var(--serif);letter-spacing:-.01em}
.brand-mark{width:28px;height:28px}
.bm-a{fill:var(--ink)}.bm-b{fill:none;stroke:var(--ink);stroke-width:1.5}
.bm-l{fill:none;stroke:var(--card);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bm-l2{fill:none;stroke:var(--sage-d);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.links{display:flex;gap:4px;margin-left:auto}
.links a{text-decoration:none;font-size:14px;color:var(--ink-2);padding:8px 11px;border-radius:999px;transition:background .2s,color .2s}
.links a:hover{background:var(--card-2);color:var(--ink)}
.xbtn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:50%;background:var(--card);border:1px solid var(--line)}
.xbtn svg{width:15px;height:15px;fill:var(--ink)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);cursor:pointer;position:relative;margin-left:auto}
.burger span:first-child,.burger span:first-child::before,.burger span:first-child::after{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);content:"";transition:transform .25s,background .2s}
.burger span:first-child{top:20px}.burger span:first-child::before{left:0;right:0;top:-5px}.burger span:first-child::after{left:0;right:0;top:5px}
.burger[aria-expanded="true"] span:first-child{background:transparent}
.burger[aria-expanded="true"] span:first-child::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:first-child::after{transform:translateY(-5px) rotate(-45deg)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);grid-auto-flow:row dense}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:24px;min-width:0;position:relative;
  opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.tile.in{opacity:1;transform:none}
.no-js .tile{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tile{opacity:1;transform:none;transition:none}}
.tile-k{margin:0 0 12px;font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:.01em}
.tile-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px}
.tag{font-size:11.5px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;padding:3px 9px;white-space:nowrap}
.tag.warn{color:var(--loss);border-color:rgba(155,106,85,.4)}
.fine{font-size:12.5px;color:var(--ink-3);margin:12px 0 0}
.big-num{font:400 clamp(44px,5.4vw,72px)/1 var(--serif);letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums}
.btn{border:0;background:var(--ink);color:var(--linen);border-radius:999px;padding:13px 22px;cursor:pointer;font-weight:500;font-size:14.5px;white-space:nowrap;transition:background .2s,transform .2s}
.btn:hover{background:#2a1d15}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:progress}
.ghost{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--ink-2)}
.ghost:hover{background:var(--card-2)}
.msg{min-height:1.5em;margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
.msg.err{color:var(--loss)}
.progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:14px}
.progress-bar{display:block;height:100%;width:100%;background:var(--sage-d);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.pos{color:var(--sage-d)}.neg{color:var(--loss)}

/* hero bento */
.hero-bento{padding-top:18px;grid-template-rows:auto auto}
.t-reader{grid-column:1/span 7;grid-row:1/span 2;padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;justify-content:flex-end;min-height:640px;background:var(--card);overflow:hidden}
.t-reader h1{font:400 clamp(44px,5.8vw,84px)/.95 var(--serif);letter-spacing:-.03em;margin:0 0 18px;max-width:12ch;position:relative}
.t-reader h1 em{font-style:italic;color:var(--sage-d)}
.reader-sub{color:var(--ink-2);max-width:54ch;margin:0 0 26px}
.reader{display:flex;gap:8px;background:var(--linen);border:1px solid var(--line-2);border-radius:999px;padding:6px;min-width:0}
.reader input{flex:1;min-width:0;border:0;background:transparent;padding:10px 14px;font-family:var(--mono);font-size:13.5px;outline:none}
.reader select{border:0;background:var(--card-2);border-radius:999px;padding:0 12px;font-size:13px;color:var(--ink-2);cursor:pointer}
.reader:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--sage-soft)}
.ca-chip{display:inline-flex;align-items:center;gap:10px;margin-top:16px;align-self:flex-start;max-width:100%;background:var(--card-2);border-radius:999px;padding:5px 5px 5px 14px;font-size:12px;min-width:0}
.ca-chip span{font-weight:600;color:var(--ink-3)}
.ca-chip code{background:none;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca-chip button{border:0;background:var(--ink);color:var(--linen);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:12px}
.t-live{grid-column:8/span 5;grid-row:1}
.live-list{list-style:none;margin:0;padding:0}
.live-list li{border-top:1px solid var(--line)}
.live-list li:first-child{border-top:0}
.live-list li.sk{height:38px;margin:4px 0;border-radius:8px;border:0;background:linear-gradient(90deg,var(--card-2),var(--linen),var(--card-2));background-size:200% 100%;animation:sk 1.5s linear infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.live-list li.sk{animation:none}}
.live-list button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;width:100%;padding:9px 6px;cursor:pointer;border-radius:8px;transition:background .2s}
.live-list button:hover{background:var(--card-2)}
.live-list button:focus-visible{outline:2px solid var(--sage-d)}
.live-list .a{font-family:var(--mono);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-list .t{font-size:12px;color:var(--ink-3)}
.live-list .err{padding:10px 0;font-size:13px;color:var(--loss)}
.t-sol{grid-column:8/span 2;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;background:var(--ink);color:var(--linen);border-color:transparent}
.t-sol .tile-k{color:rgba(246,243,238,.6)}
.t-sol .big-num{font-size:clamp(34px,3.6vw,52px)}
.sol-ch{margin:8px 0 0;font-size:12.5px;color:rgba(246,243,238,.72)}
.t-art{grid-column:10/span 3;grid-row:2;padding:18px 18px 16px;overflow:hidden}
.mirror-svg{width:100%;height:auto}
.mid{stroke:var(--line-2);stroke-dasharray:3 5}
.lead{fill:none;stroke:var(--ink);stroke-width:2}
.lag{fill:none;stroke:var(--sage);stroke-width:2;opacity:.9}
.lead-dot{fill:var(--sage-d)}
.art-cap{font-size:12.5px;color:var(--ink-2);margin:10px 0 0}
.art-cap em{font:italic 400 17px/1.2 var(--serif);color:var(--ink);display:block;margin-bottom:2px}
.js .draw{stroke-dasharray:var(--len,800);stroke-dashoffset:var(--len,800);transition:stroke-dashoffset 2.2s cubic-bezier(.45,0,.2,1)}
.js .in .draw{stroke-dashoffset:0}
.js .in .lag.draw{transition-delay:.6s}
@media (prefers-reduced-motion:reduce){.js .draw{stroke-dasharray:none;stroke-dashoffset:0;transition:none}.lead-dot{display:none}}

/* section heads */
section.wrap{margin-top:clamp(64px,8vw,112px)}
section.hero-bento{margin-top:0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 48px;align-items:end;margin-bottom:26px}
h2{font:400 clamp(36px,4.4vw,60px)/1 var(--serif);letter-spacing:-.02em;margin:0;text-wrap:balance}
.sec-sub{margin:0;color:var(--ink-2);max-width:60ch}
h3{font:600 16px/1.3 var(--sans);margin:0 0 6px}

/* dashboard */
.t-kpis{grid-column:1/-1;padding:8px}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0}
.kpis>div{padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.kpis>div:last-child{border-right:0}
.kpis dt{font-size:12.5px;color:var(--ink-3)}
.kpis dd{margin:6px 0 0;font:400 34px/1.05 var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis dd.kpi-sub{font:400 12px/1.4 var(--sans);color:var(--ink-3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-curve{grid-column:1/span 8}
.t-hours{grid-column:9/span 4}
.t-risk{grid-column:9/span 4;grid-row:span 2}
.t-book{grid-column:1/span 8}
.t-trades{grid-column:1/-1}
.chart{width:100%;height:auto;overflow:visible}
.ax{stroke:var(--line);stroke-width:1}
.ax0{stroke:var(--line-2);stroke-width:1}
.ax-t{font:11px var(--sans);fill:var(--ink-3)}
.c-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.c-area{fill:var(--sage-soft)}
.c-dot{fill:var(--sage-d)}
.c-empty{font:italic 400 22px var(--serif);fill:var(--ink-3)}
.c-line2{fill:none;stroke:var(--sage-d);stroke-width:2;stroke-linejoin:round}
.hbar{fill:var(--card-2)}
.hbar.on{fill:var(--sage)}
.risk{list-style:none;margin:0;padding:0;counter-reset:r}
.risk li{padding:14px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 10px}
.risk li:first-child{border-top:0;padding-top:4px}
.risk li.empty{display:block;color:var(--ink-3);font-size:14px}
.risk .lv{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--card-2);border:1px solid var(--line-2)}
.risk .lv.med{background:var(--sage)}
.risk .lv.high{background:var(--loss);border-color:var(--loss)}
.risk h3{font-size:14.5px;margin:0}
.risk p{grid-column:2;margin:0;font-size:13.5px;color:var(--ink-2)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.scroll-y{max-height:420px;overflow-y:auto}
.scroll-y.short{max-height:300px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.tbl th{font-weight:500;font-size:12px;color:var(--ink-3);text-align:left;padding:10px 10px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--card)}
.tbl td{padding:10px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .r{text-align:right}
.tbl td.empty{text-align:center;color:var(--ink-3);padding:30px;white-space:normal}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:var(--linen)}
.tok{display:flex;align-items:center;gap:9px;min-width:0;max-width:220px}
.tok img,.tok .ph{width:22px;height:22px;border-radius:50%;flex:none;background:var(--card-2);object-fit:cover}
.tok .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.side{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.side.buy{background:var(--sage-soft);color:var(--sage-d)}
.side.sell{background:rgba(155,106,85,.12);color:var(--loss)}
.tbl a.ext{color:var(--ink-3);text-decoration:none;font-size:12px}
.tbl a.ext:hover{color:var(--ink)}

/* plan */
.t-controls{grid-column:1/span 4;grid-row:span 3;display:flex;flex-direction:column}
.t-simsum{grid-column:5/span 8;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 28px;align-items:end}
.t-simsum .tile-k{grid-column:1/-1}
.t-simsum .mini{margin:0;padding:0 0 0 24px;border-top:0;border-left:1px solid var(--line)}
.t-simsum .reasons{grid-column:1/-1}
.t-simcurve{grid-column:5/span 8}
.t-simlist{grid-column:5/span 8}
label{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-2);margin-top:12px}
label output{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
input[type=range]{width:100%;accent-color:var(--sage-d);margin:8px 0 2px}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets button{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;transition:background .2s,color .2s}
.presets button.on{background:var(--ink);color:var(--linen);border-color:var(--ink)}
.checks{display:grid;gap:4px;margin-top:10px}
.check{justify-content:flex-start;align-items:center;gap:10px;cursor:pointer;color:var(--ink)}
.check input{accent-color:var(--sage-d);width:16px;height:16px}
.sim-sub{color:var(--ink-2);margin:10px 0 0;font-size:14px}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.mini dt{font-size:12px;color:var(--ink-3)}
.mini dd{margin:3px 0 0;font:400 24px/1.1 var(--serif);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.reasons{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.reasons span{font-size:12px;background:var(--card-2);border-radius:999px;padding:4px 10px;color:var(--ink-2)}

/* compare */
.t-cmpform{grid-column:1/span 4;display:flex;flex-direction:column}
.t-cmpform label{margin-top:0}
.t-cmpform input{width:100%;min-width:0;border:1px solid var(--line-2);background:var(--linen);border-radius:12px;padding:12px 14px;font-family:var(--mono);font-size:13px;margin:6px 0 14px}
.t-cmpform input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--sage-soft)}
.t-cmpform .btn{align-self:flex-start}
.t-cmpout{grid-column:5/span 8}
.cmp-tbl{min-width:420px}
.cmp-tbl td:first-child{color:var(--ink-2)}
.cmp-tbl .win{font-weight:600}
.cmp-tbl .bar{display:block;height:3px;margin-top:6px;background:var(--sage);border-radius:2px;transform-origin:right;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.overlap{margin-top:18px;font-size:13.5px;color:var(--ink-2)}
.overlap h3{font-size:14px;color:var(--ink)}
.overlap ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.overlap li{background:var(--card-2);border-radius:999px;padding:4px 11px;font-size:12.5px}

/* drag */
.t-dragform{grid-column:1/span 5}
.t-dragform label:first-child{margin-top:0}
.t-dragout{grid-column:6/span 7}
.stack{width:100%;height:auto;margin-top:20px}
.stack rect{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.st-a{fill:var(--ink)}.st-b{fill:var(--sage)}.st-c{fill:var(--card-2);stroke:var(--line-2)}
.st-t{font:12px var(--sans);fill:var(--ink-2)}

/* method */
.method-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;border-top:1px solid var(--line-2);padding-top:44px}
.method-copy p{color:var(--ink-2)}
.steps{list-style:none;padding:0;margin:20px 0 0}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:14px 0;border-top:1px solid var(--line)}
.steps span{font:italic 400 20px/1.3 var(--serif);color:var(--sage-d)}
.steps p{margin:0}
.steps strong{color:var(--ink);font-weight:600}
.method-fig{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:22px}
.mf-h{font:italic 400 20px var(--serif);fill:var(--ink-2)}
.mf-box{fill:var(--linen);stroke:var(--line-2)}
.mf-t{font:500 13px var(--mono);fill:var(--ink);text-anchor:middle}
.mf-arrow{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 4}
.js .mf-arrow.draw{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200)}
.js .in .mf-arrow.draw{stroke-dashoffset:0}
.mf-d{font:600 13px var(--mono);fill:var(--loss);text-anchor:middle}
.mf-d.up{fill:var(--sage-d)}
.mf-out{fill:var(--ink)}
.mf-o{font:600 14px var(--sans);fill:var(--linen);text-anchor:middle}
.mf-os{font:12px var(--sans);fill:rgba(246,243,238,.7);text-anchor:middle}
.method-fig figcaption{font-size:13px;color:var(--ink-3);margin-top:12px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* notes */
.notes h2{margin-bottom:28px}
.notes-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.notes-grid article{border-top:2px solid var(--ink);padding-top:16px}
.n-num{font:italic 400 30px/1 var(--serif);color:var(--sage-d);margin:0 0 14px}
.notes-grid p:not(.n-num){color:var(--ink-2);margin:0;font-size:14.5px}

/* faq */
.faq h2{margin-bottom:24px}
.faq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
.faq details{border-top:1px solid var(--line-2);padding:0}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font:400 22px/1.25 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font:300 24px/1 var(--sans);color:var(--ink-3);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--ink-2);font-size:14.5px}

/* footer */
.foot{margin-top:clamp(80px,10vw,140px);border-top:1px solid var(--line-2);padding:44px 0 40px;background:var(--card)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:28px}
.foot-brand p{color:var(--ink-2);font-size:13.5px;max-width:52ch;margin:14px 0 0}
.foot-nav,.foot-coin{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot-nav a,.foot-coin a,.linkbtn{font-size:14px;color:var(--ink);text-decoration:none}
.foot-nav a:hover,.foot-coin a:hover,.linkbtn:hover{text-decoration:underline}
.linkbtn{all:unset;cursor:pointer;font-size:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--ink);color:var(--linen);padding:10px 18px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* responsive */
@media (max-width:1080px){
  .links{position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 4px);flex-direction:column;gap:0;background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:8px;box-shadow:0 18px 40px -24px rgba(59,42,32,.4);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s}
  .links.open{opacity:1;transform:none;pointer-events:auto}
  .links a{padding:12px 14px;font-size:16px;border-radius:10px}
  .burger{display:block}
  .xbtn:not([hidden]){margin-left:auto}
  .xbtn:not([hidden])+.burger{margin-left:0}
  .t-reader{grid-column:1/-1;grid-row:auto;min-height:0}
  .t-live{grid-column:1/span 7;grid-row:auto}
  .t-sol{grid-column:8/span 5;grid-row:auto}
  .t-art{grid-column:1/-1;grid-row:auto}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis>div:nth-child(3){border-right:0}
  .kpis>div:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .t-curve,.t-book,.t-trades{grid-column:1/-1}
  .t-hours{grid-column:1/span 6}
  .t-risk{grid-column:7/span 6;grid-row:auto}
  .t-controls{grid-column:1/-1;grid-row:auto}
  .t-simsum{grid-column:1/-1}
  .t-simcurve,.t-simlist{grid-column:1/-1}
  .t-cmpform,.t-cmpout{grid-column:1/-1}
  .t-dragform{grid-column:1/span 6}.t-dragout{grid-column:7/span 6}
  .notes-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
}
@media (max-width:760px){
  .bento>.tile{grid-column:1/-1!important}
  .sec-head,.method-grid,.faq-cols,.foot-in{grid-template-columns:minmax(0,1fr)}
  .method-grid{gap:28px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis>div{border-right:0;border-bottom:1px solid var(--line)}
  .kpis>div:nth-child(odd){border-right:1px solid var(--line)}
  .kpis>div:nth-last-child(-n+2){border-bottom:0}
  .kpis dd{font-size:28px}
  .reader{flex-wrap:wrap;border-radius:18px}
  .reader input{flex:1 1 100%}
  .reader select{padding:10px 12px}
  .reader .btn{flex:1}
  .tile{padding:20px}
  .t-simsum{display:block}
  .t-simsum .mini{padding:16px 0 0;border-left:0;border-top:1px solid var(--line);margin-top:18px}
  .notes-grid{grid-template-columns:minmax(0,1fr)}
}
.t-simsum .big-num,.t-simsum .sim-sub{grid-column:1}
.t-simsum .mini{grid-column:2;grid-row:2/span 2;align-self:center}

/* =====================================================================
   Polish pass v2 — depth, rhythm and motion
   ===================================================================== */
:root{
  --ease:cubic-bezier(.2,.7,.2,1); --ease-o:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(59,42,32,.04),0 12px 30px -20px rgba(59,42,32,.28);
  --sh-2:0 1px 0 rgba(255,255,255,.8) inset,0 2px 6px rgba(59,42,32,.05),0 30px 60px -32px rgba(59,42,32,.4);
  --esp:#2e2119; --esp-2:#3a2a20; --on-esp:#efe7dc; --on-esp-2:#bfae9f; --esp-line:rgba(239,231,220,.12);
}
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body{font-size:16px}
.top{border-bottom:1px solid transparent;transition:border-color .3s}

/* tiles: crafted surface, hover lift */
.tile{box-shadow:var(--sh-1);transition:opacity .8s var(--ease),transform .8s var(--ease-o),box-shadow .45s var(--ease)}
.tile.in:hover{box-shadow:var(--sh-2)}
.t-live.in:hover,.t-sol.in:hover,.t-art.in:hover,.t-kpis.in:hover,.t-hours.in:hover,.t-risk.in:hover{transform:translateY(-3px)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.t-sol::after{box-shadow:none}

/* hero: headline reveal + mirror scene */
.t-reader{--tp:clamp(24px,3.4vw,44px)}
.hero-vis{position:relative;flex:1 1 210px;min-height:200px;margin:calc(-1 * var(--tp)) calc(-1 * var(--tp)) 22px;pointer-events:none;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(239,234,226,.5),rgba(252,250,246,0))}
#heroCv{width:100%;height:100%;display:block}
.hv-tag{position:absolute;right:clamp(16px,2.4vw,28px);bottom:10px;font-size:11px;color:var(--ink-3);background:rgba(252,250,246,.82);border:1px solid var(--line);border-radius:99px;padding:4px 10px;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.js .hero-vis{opacity:0;transform:translateY(10px);transition:opacity 1.4s var(--ease) .35s,transform 1.4s var(--ease-o) .35s}
.loaded .hero-vis{opacity:1;transform:none}
.t-reader h1 em{position:relative}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.wi{display:inline-block;transform:translateY(110%);transition:transform 1.05s var(--ease-o)}
.loaded .wi{transform:none}
.js .intro{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease-o)}
.loaded .intro{opacity:1;transform:none}
.reader{box-shadow:0 10px 26px -18px rgba(59,42,32,.35);transition:border-color .25s,box-shadow .35s var(--ease)}
.reader:focus-within{box-shadow:0 0 0 4px var(--sage-soft),0 14px 30px -18px rgba(59,42,32,.45)}

/* buttons: press + shine */
.btn,.ghost,.presets button,.ca-chip button{position:relative;overflow:hidden;transition:background .2s,color .2s,transform .18s var(--ease),box-shadow .3s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease);pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{box-shadow:0 10px 22px -14px rgba(59,42,32,.6)}
.btn:active,.ghost:active,.presets button:active,.ca-chip button:active{transform:scale(.965)}
.copied{background:var(--sage-d)!important}
.ghost:disabled{opacity:.5}

/* preset pills: sliding indicator */
.presets{position:relative}
.pre-ind{position:absolute;left:0;top:0;width:100px;height:31px;border-radius:999px;background:var(--ink);transform-origin:left top;transition:transform .5s var(--ease-o),opacity .2s;pointer-events:none;z-index:0}
.presets button{position:relative;z-index:1}
.presets.has-ind button.on{background:transparent}

/* inputs, toggles */
.t-cmpform input,.reader input{transition:border-color .2s,box-shadow .3s var(--ease)}
input[type=range]{transition:transform .2s}
input[type=range]:active{transform:scaleY(1.15)}
.check input{transition:transform .35s var(--ease-o)}
.check input:checked{animation:spring .45s var(--ease-o)}
@keyframes spring{40%{transform:scale(1.25)}}

/* live list + numbers */
.live-list li.enter{animation:rowin .6s var(--ease-o) both}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.live-list button{transition:background .2s,transform .3s var(--ease)}
.live-list button:hover{transform:translateX(3px)}
.big-num{display:inline-block}
.bump{animation:bump .6s var(--ease-o)}
@keyframes bump{from{opacity:.3;transform:translateY(-8px)}to{opacity:1;transform:none}}
.t-sol .bump.up{animation:bump .6s var(--ease-o),tintup 1.6s ease-out}
.t-sol .bump.down{animation:bump .6s var(--ease-o),tintdown 1.6s ease-out}
@keyframes tintup{0%,30%{color:#c9d6b8}}
@keyframes tintdown{0%,30%{color:#e2b8a6}}
.t-sol{background:radial-gradient(120% 90% at 100% 0%,#4a3529 0%,var(--ink) 60%)}

/* tables: rows settle in */
.tbl tbody tr.enter{animation:rowin .55s var(--ease-o) both}
.tbl tbody tr{transition:background .2s}
.tok img{transition:transform .3s var(--ease)}
.tbl tbody tr:hover .tok img{transform:scale(1.12)}

/* charts */
.hbar.grow{transform-box:fill-box;transform-origin:50% 100%;animation:growy .8s var(--ease-o) both}
@keyframes growy{from{transform:scaleY(0)}}
.c-dot{transform-box:fill-box;transform-origin:center;animation:dotpop .5s var(--ease-o) 1.2s both}
@keyframes dotpop{from{transform:scale(0)}}
.c-empty{animation:breath 3.2s ease-in-out infinite}
@keyframes breath{50%{opacity:.55}}
.stack rect{transform-box:fill-box;transform-origin:left center}
.js .t-dragout:not(.in) .stack rect{transform:scaleX(0)}
.stack.grow-in rect:nth-of-type(2){transition-delay:.15s}.stack.grow-in rect:nth-of-type(3){transition-delay:.3s}
.kpis>div{transition:background .3s}
.kpis>div:hover{background:var(--linen)}
.cmp-tbl .bar{transform-origin:left}

/* headings wipe in */
.js .h-rev{clip-path:inset(-10% -4% 100% -4%);transform:translateY(.3em);transition:clip-path 1.1s var(--ease-o),transform 1.1s var(--ease-o)}
.js .h-rev.in{clip-path:inset(-10% -4% -25% -4%);transform:none}
.h-sentinel{position:absolute;width:1px;height:1px;pointer-events:none}
section.wrap{position:relative}

/* bands for rhythm */
.band{isolation:isolate;padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.band::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1}
.band-dark::before{background:radial-gradient(70% 90% at 85% 0%,#3d2c22 0%,var(--esp) 60%)}
.band-dark h2{color:var(--on-esp)}
.band-dark .sec-sub{color:var(--on-esp-2)}
.band-dark .tile{border-color:rgba(255,255,255,.06);box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.band-card::before{background:linear-gradient(180deg,#efe9e0,#ece5da);border-block:1px solid var(--line)}
.method .method-grid{border-top:0;padding-top:0}

/* method: pinned figure that morphs through the four steps */
.method-grid{align-items:start}
.method-fig{position:sticky;top:96px;box-shadow:var(--sh-2)}
.steps li{position:relative;cursor:pointer;opacity:.45;transition:opacity .5s var(--ease)}
.steps li.on{opacity:1}
.steps li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--sage-d);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-o)}
.steps li.on::after{transform:scaleX(1)}
@media (min-width:761px){.steps li{padding:30px 0;min-height:26vh}}
.mf-steps{display:flex;gap:6px;margin:0 0 10px}
.mf-steps span{font:italic 400 15px/1 var(--serif);color:var(--ink-3);padding:5px 10px;border-radius:99px;border:1px solid var(--line);transition:background .4s,color .4s,border-color .4s}
.mf-steps span.on{background:var(--ink);color:var(--linen);border-color:var(--ink)}
.mf-g{transition:opacity .6s var(--ease),transform .7s var(--ease-o)}
.method-fig .mf-g{opacity:0;transform:translateY(10px)}
.method-fig[data-step="1"] .g1,
.method-fig[data-step="2"] .g2,
.method-fig[data-step="3"] .g2,.method-fig[data-step="3"] .g3,
.method-fig[data-step="4"] .g2,.method-fig[data-step="4"] .g3,.method-fig[data-step="4"] .g4{opacity:1;transform:none}
.method-fig[data-step="3"] .g3{transition-delay:.15s}
.method-fig[data-step="4"] .g4{transition-delay:.15s}
.method-fig[data-step="4"] .g2{opacity:.4}
.sig-row{transition:transform .6s var(--ease-o),opacity .6s}
.method-fig[data-step="1"] .sig-row:nth-of-type(2){transition-delay:.08s}
.method-fig[data-step="1"] .sig-row:nth-of-type(3){transition-delay:.16s}
.method-fig[data-step="1"] .sig-row:nth-of-type(4){transition-delay:.24s}
.method-fig .sig-row.fail{opacity:.55}
.mf-sig{font:500 13px var(--mono);fill:var(--ink)}
.mf-ok{font:500 12px var(--sans);fill:var(--sage-d)}
.mf-bad{font:500 12px var(--sans);fill:var(--loss)}
.mf-strike{stroke:var(--loss);stroke-width:1.4}
.mf-os2{font:12px var(--sans);fill:var(--ink-3)}
.mf-arrow{stroke-dasharray:4 4}
.mf-arrow.solid{stroke-dasharray:none;stroke:var(--ink-3)}
.method-fig[data-step="3"] .g3 .mf-arrow,.method-fig[data-step="4"] .g3 .mf-arrow{animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-16}}
.mf-sell{fill:var(--card-2);stroke:var(--line-2)}
.mf-pnl{fill:var(--sage-soft);stroke:var(--sage)}
.mf-o2{font:600 14px var(--sans);fill:var(--ink);text-anchor:middle}
.mf-o2.pos{fill:var(--sage-d)}
.mf-os3{font:12px var(--sans);fill:var(--ink-3);text-anchor:middle}

/* notes: drawn marks */
.n-art{width:120px;height:56px;margin:0 0 10px;overflow:visible}
.n-art .draw{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.na-a{stroke:var(--ink)}.na-b{stroke:var(--sage)}.na-c{stroke:var(--ink-3)}
.na-dot{fill:var(--ink)}.na-dot2{fill:var(--sage-d)}
.js .n-art circle{opacity:0;transition:opacity .5s 1.4s}
.js .in .n-art circle{opacity:1}
.notes-grid article{transition:opacity .8s var(--ease),transform .8s var(--ease-o)}
.notes-grid article:nth-child(2){transition-delay:.1s}.notes-grid article:nth-child(3){transition-delay:.2s}.notes-grid article:nth-child(4){transition-delay:.3s}

/* faq */
.faq summary{transition:padding-left .35s var(--ease),color .2s}
.faq summary:hover{padding-left:6px}
.faq details[open] p{animation:rowin .5s var(--ease-o)}

@media (max-width:1080px){.t-reader{min-height:560px}}
@media (max-width:760px){
  .t-reader{min-height:0}
  .hero-vis{flex:none;height:190px}
  .hv-tag{font-size:10px}
  .method-fig{position:static}
  .steps li{opacity:1}
  .band{padding-top:56px;padding-bottom:56px}
}
@media (prefers-reduced-motion:reduce){
  .wi,.js .intro,.js .hero-vis,.js .h-rev{transform:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
  .live-list li.enter,.tbl tbody tr.enter,.hbar.grow,.c-dot,.c-empty,.bump,.check input:checked,.method-fig .mf-arrow{animation:none!important}
  .js .t-dragout:not(.in) .stack rect{transform:none}
  .mf-g{transition:none}
  .js .n-art circle{opacity:1}
  .btn::after{display:none}
}
.ax.ghost{stroke:var(--line);stroke-dasharray:2 5}
.c-scan{stroke:var(--sage);stroke-width:1.5;opacity:.5;animation:scan 4.5s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes scan{from{transform:translateX(0)}to{transform:translateX(var(--w))}}
.t-curve{display:flex;flex-direction:column}
.ghost-cta{position:absolute;left:50%;bottom:clamp(28px,5vw,56px);transform:translateX(-50%);background:var(--card);color:var(--ink);border:1px solid var(--line-2);font-size:13.5px;padding:10px 18px}
.ghost-cta:hover{background:var(--ink);color:var(--linen)}
.ghost-cta:active{transform:translateX(-50%) scale(.965)}
@media (prefers-reduced-motion:reduce){.c-scan{animation:none;opacity:0}}
.band+.band{margin-top:0}
.presets.has-ind button.on{border-color:transparent}
@media (max-width:760px){.hv-more{display:none}}