/* routes/home.css — #/ THE WALL (mockup v1 00_home, drawn in mockup px: calc(1 * var(--m)) = 1.1483 css px at 1920) */
.home{--m:calc(1.1483px * var(--u));color:var(--ink);font-family:var(--font-body);padding-bottom:calc(12 * var(--m))}
.home *{box-sizing:border-box}
.home button{background:none;color:inherit;cursor:pointer;padding:0;font:inherit}
.home .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- hero cabinet ---------- */
.h-hero{position:relative;height:calc(713 * var(--m));margin-top:0}
.h-arch{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.h-arch .tube{fill:none;stroke-linecap:round}
.h-crown{position:absolute;left:calc(1227 * var(--m));top:calc(62 * var(--m));width:calc(300 * var(--m));height:calc(62 * var(--m));overflow:hidden;pointer-events:none}
.h-crown video,.h-crown img{display:block;width:calc(300 * var(--m));height:calc(171 * var(--m));object-fit:contain}
.h-title{position:absolute;left:0;right:0;top:calc(92 * var(--m));text-align:center;margin:0;font:400 calc(49.2 * var(--m))/1 var(--font-display);letter-spacing:0;color:#fbf6ff;white-space:nowrap}
.h-sub{position:absolute;left:0;right:0;top:calc(152 * var(--m));text-align:center;margin:0;font:400 calc(22.4 * var(--m))/1.2 var(--font-body);color:#f3ecff}

.h-bank{position:absolute;top:calc(192 * var(--m));width:calc(455 * var(--m));height:calc(470 * var(--m));background:#2a0aa8;padding:calc(12 * var(--m)) calc(7 * var(--m));display:flex;flex-direction:column;gap:calc(12 * var(--m))}
.h-bank.l{left:calc(75 * var(--m))}.h-bank.r{left:calc(785 * var(--m));width:calc(435 * var(--m))}
.h-group{background:#1d0480;padding:calc(7 * var(--m)) calc(5 * var(--m));display:flex;flex-direction:column;gap:calc(6 * var(--m));flex:1}
.h-strip{display:flex;align-items:center;height:calc(36 * var(--m));width:100%;background:#22058f;text-align:left;transition:box-shadow .15s var(--ease-settle),background-color .15s var(--ease-settle)}
.h-strip .code{width:calc(60 * var(--m));height:100%;display:flex;align-items:center;padding-left:calc(17 * var(--m));font:400 calc(18 * var(--m))/1 var(--font-mono);color:#d7a8ff;background:linear-gradient(#7b3fd6,#7b3fd6) right center/2px 60% no-repeat}
.h-strip .t{flex:1;padding-left:calc(17 * var(--m));font:400 calc(15 * var(--m))/1 var(--font-body);color:#f4efff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-strip svg{width:calc(26 * var(--m));height:calc(26 * var(--m));margin-right:calc(16 * var(--m));flex:none}
.h-strip:hover{box-shadow:0 0 calc(14 * var(--m)) rgba(199,125,255,.55);background:#2c0aa6}
.h-strip.is-on{background:#4c14d8;box-shadow:inset 0 0 0 2px #efe2ff,0 0 calc(16 * var(--m)) rgba(214,160,255,.6)}
.h-strip.is-on .code{color:#fff}

.h-mid{position:absolute;left:calc(557 * var(--m));top:calc(205 * var(--m));width:calc(204 * var(--m));display:flex;flex-direction:column;gap:calc(7 * var(--m))}
.h-mid>div,.h-mid>button{width:100%;background:#1d0480;text-align:center}
.h-pick{height:calc(97 * var(--m));padding-top:calc(10 * var(--m))}
.h-pick .lbl{font:500 calc(16 * var(--m))/1 var(--font-body)}
.h-pick .row{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--m));margin-top:calc(10 * var(--m))}
.h-pick .code{width:calc(104 * var(--m));height:calc(46 * var(--m));display:flex;align-items:center;justify-content:center;font:400 calc(30 * var(--m))/1 var(--font-mono);color:#e9d6ff;padding:0}
.h-pick .arw{width:calc(20 * var(--m));height:calc(30 * var(--m));display:flex;align-items:center;justify-content:center}
.h-pick .arw svg{width:calc(12 * var(--m));height:calc(18 * var(--m))}
.h-name{height:calc(63 * var(--m));padding-top:calc(9 * var(--m))}
.h-name b{display:block;font:600 calc(16 * var(--m))/1.25 var(--font-body)}
.h-name span{display:block;font:400 calc(15 * var(--m))/1.25 var(--font-body);color:#efe6ff}
.h-name i{display:block;font:400 calc(10 * var(--m))/1.3 var(--font-body);color:var(--muted);font-style:normal}
.h-cutbtn{height:calc(78 * var(--m));padding-top:calc(8 * var(--m));background:#3b0fc4!important;box-shadow:0 0 calc(18 * var(--m)) rgba(214,160,255,.45);transition:box-shadow .15s var(--ease-settle),transform .15s var(--ease-settle)}
.h-cutbtn:hover{box-shadow:0 0 calc(26 * var(--m)) rgba(236,200,255,.8)}
.h-cutbtn:active{transform:scale(.98)}
.h-cutbtn .lbl{display:block;font:500 calc(16 * var(--m))/1.1 var(--font-body)}
.h-cutbtn .amt{display:block;font:400 calc(34 * var(--m))/1.1 var(--font-mono);color:#ECFFF7;text-shadow:2px 0 #3AF1BE}
.h-share{height:calc(62 * var(--m));padding-top:calc(8 * var(--m));box-shadow:inset 0 0 0 3px #62e08f}
.h-share .amt{display:block;font:400 calc(24 * var(--m))/1 var(--font-mono);color:#3AF1BE}
.h-share span:last-child{display:block;font:500 calc(14 * var(--m))/1.3 var(--font-body);color:#b9f5cf}
.h-count{height:calc(62 * var(--m));padding-top:calc(8 * var(--m))}
.h-count .n{display:block;font:400 calc(22 * var(--m))/1 var(--font-mono);color:#e9d6ff}
.h-count span:last-child{display:block;font:400 calc(15 * var(--m))/1.3 var(--font-body)}
.h-receipt{height:calc(70 * var(--m));display:flex!important;align-items:center;gap:calc(10 * var(--m));padding:0 calc(10 * var(--m));text-align:left!important;transition:box-shadow .22s var(--ease-settle)}
.h-receipt svg{width:calc(26 * var(--m));height:calc(32 * var(--m));flex:none}
.h-receipt p{margin:0;font:400 calc(12 * var(--m))/1.4 var(--font-body);color:#efe6ff}
.h-receipt[data-open="true"]{box-shadow:inset 0 0 0 2px #3AF1BE,0 0 calc(14 * var(--m)) rgba(58,241,190,.4)}

.h-next{position:absolute;left:calc(1242 * var(--m));top:calc(114 * var(--m));width:calc(325 * var(--m));height:calc(571 * var(--m));background:#1d0480;padding:calc(18 * var(--m)) calc(10 * var(--m)) calc(10 * var(--m))}
.h-next .hd{display:flex;align-items:baseline;justify-content:space-between;padding:0 calc(7 * var(--m)) 0 calc(7 * var(--m));height:calc(40 * var(--m))}
.h-next .hd b{font:600 calc(21.5 * var(--m))/1 var(--font-body)}
.h-next .hd span{font:400 calc(14 * var(--m))/1 var(--font-body);color:#efe6ff}
.h-next ol{list-style:none;margin:calc(6 * var(--m)) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(6.4 * var(--m))}
.h-next li{height:calc(38 * var(--m));display:flex;align-items:center;gap:0;background:#22058f;font:400 calc(12.5 * var(--m))/1 var(--font-body);color:#f4efff;white-space:nowrap;overflow:hidden}
.h-next li .n{width:calc(36 * var(--m));text-align:center;font:500 calc(14 * var(--m))/1 var(--font-body)}
.h-next li.now{background:#5a22e6;box-shadow:inset 0 0 0 2px #efe2ff}
.h-next li .bars{display:inline-flex;align-items:flex-end;gap:calc(2 * var(--m));height:calc(14 * var(--m));margin-right:calc(8 * var(--m))}
.h-next li .bars i{width:calc(3 * var(--m));background:#fff;display:block}
.h-next li.is-cut{box-shadow:inset 0 0 0 2px #3AF1BE}
.h-next .fine{margin:calc(12 * var(--m)) 0 0;padding:calc(8 * var(--m)) calc(2 * var(--m)) 0;font:400 calc(10.5 * var(--m))/1.5 var(--font-body);color:var(--muted);background:linear-gradient(#9f61cf,#9f61cf) top/100% 1px no-repeat}

/* ---------- explainer ---------- */
.h-explain{margin-top:calc(88 * var(--m));display:grid;grid-template-columns:calc(763 * var(--m)) 1fr;gap:calc(12 * var(--m)) calc(10 * var(--m))}
.h-panel{position:relative;background:#1a0490}
.h-panel.wide{grid-column:1/-1;height:calc(335 * var(--m))}
.h-panel.half{height:calc(376 * var(--m))}
.h-tubes{position:absolute;left:0;top:calc(-4 * var(--m));width:100%;height:calc(30 * var(--m));pointer-events:none}
.h-phd{display:flex;align-items:center;gap:calc(30 * var(--m));height:calc(90 * var(--m));padding:0 calc(30 * var(--m));background:linear-gradient(#9f61cf,#9f61cf) bottom/calc(100% - calc(30 * var(--m))) 2px no-repeat}
.h-phd h2{margin:0;font:400 calc(40.6 * var(--m))/1 var(--font-display);white-space:nowrap;color:#f7f0ff}
.h-phd p{margin:0;font:400 calc(20 * var(--m))/1.1 var(--font-body)}
.half .h-phd{height:calc(72 * var(--m));background-size:calc(100% - calc(20 * var(--m))) 2px}
.half .h-phd h2{font-size:calc(27.9 * var(--m))}
.half .h-phd p{font-size:calc(15 * var(--m));line-height:1.35}
.h-phd .r{margin-left:auto}

.h-flow{position:relative;height:calc(245 * var(--m))}
.h-coin{position:absolute;left:calc(20 * var(--m));top:calc(28 * var(--m));width:calc(190 * var(--m));height:calc(198 * var(--m));object-fit:contain}
.h-per{position:absolute;left:calc(223 * var(--m));top:calc(72 * var(--m))}
.h-per b{display:block;font:400 calc(34 * var(--m))/1 var(--font-mono)}
.h-per span{display:block;font:400 calc(18 * var(--m))/1.4 var(--font-body)}
.h-pipes{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.h-pipes path{fill:none;stroke-width:6;stroke-linecap:round}
.h-cut3{position:absolute;left:calc(412 * var(--m));top:calc(18 * var(--m));width:calc(393 * var(--m));display:flex;flex-direction:column;gap:calc(14 * var(--m))}
.h-cut3>div{height:calc(58 * var(--m));display:flex;align-items:center;padding:0 calc(18 * var(--m));background:#1f0590}
.h-cut3 .pct{width:calc(82 * var(--m));font:400 calc(21 * var(--m))/1 var(--font-mono);color:#d7a8ff}
.h-cut3 .amt{width:calc(125 * var(--m));font:400 calc(21 * var(--m))/1 var(--font-mono);color:#d7a8ff}
.h-cut3 .who b{display:block;font:500 calc(16 * var(--m))/1.2 var(--font-body)}
.h-cut3 .who span{display:block;font:400 calc(12.5 * var(--m))/1.4 var(--font-body);color:#e6dcff}
.h-cut3 .art{box-shadow:inset 0 0 0 2px #3AF1BE}
.h-cut3 .art .pct,.h-cut3 .art .amt{color:#3AF1BE}
.h-arrow{position:absolute;width:calc(36 * var(--m));height:calc(30 * var(--m))}
.h-stack{position:absolute;left:calc(878 * var(--m));top:calc(28 * var(--m));width:calc(204 * var(--m));height:calc(190 * var(--m))}
.h-stack i{position:absolute;width:calc(164 * var(--m));height:calc(150 * var(--m));background:#26079b;box-shadow:inset 0 0 0 2px #d7a8ff}
.h-stack .front{position:absolute;left:calc(40 * var(--m));top:calc(40 * var(--m));width:calc(164 * var(--m));height:calc(150 * var(--m));background:#2a0ab0;text-align:center;padding-top:calc(14 * var(--m));box-shadow:inset 0 0 0 3px #e2b8ff}
.h-stack .front b{display:block;font:400 calc(36 * var(--m))/1 var(--font-mono)}
.h-stack .front em{display:block;font:400 calc(20 * var(--m))/1.1 var(--font-body);font-style:normal}
.h-stack .front span{display:block;margin:calc(8 * var(--m)) calc(14 * var(--m)) 0;padding-top:calc(8 * var(--m));font:400 calc(14 * var(--m))/1.45 var(--font-body);background:linear-gradient(#9f61cf,#9f61cf) top/100% 1px no-repeat}
.h-settled{position:absolute;left:calc(1152 * var(--m));top:calc(16 * var(--m));width:calc(333 * var(--m));height:calc(206 * var(--m));background:#1c0488;padding:calc(14 * var(--m)) calc(18 * var(--m))}
.h-settled .top{display:flex;align-items:center;gap:calc(30 * var(--m));height:calc(62 * var(--m));background:linear-gradient(#7b52c9,#7b52c9) bottom/100% 1px no-repeat;padding-bottom:calc(10 * var(--m))}
.h-settled .top svg{width:calc(52 * var(--m));height:calc(52 * var(--m));flex:none}
.h-settled .top b{display:block;font:500 calc(16 * var(--m))/1.3 var(--font-body)}
.h-settled .top span{display:block;font:400 calc(13.5 * var(--m))/1.4 var(--font-body)}
.h-settled ul{list-style:none;margin:calc(8 * var(--m)) 0 0;padding:0}
.h-settled li{display:flex;align-items:center;height:calc(40 * var(--m));font:400 calc(14 * var(--m))/1 var(--font-body)}
.h-settled li svg{width:calc(26 * var(--m));height:calc(26 * var(--m));margin-right:calc(14 * var(--m))}
.h-settled li .w{width:calc(80 * var(--m))}
.h-settled li .v{width:calc(75 * var(--m));font:400 calc(17 * var(--m))/1 var(--font-mono);color:#d7a8ff}
.h-settled li.art .v{color:#3AF1BE}
.h-settled li .x{font-size:calc(14 * var(--m))}

.h-tonight{display:grid;grid-template-columns:calc(393 * var(--m)) 1fr;gap:0;height:calc(304 * var(--m));padding:calc(10 * var(--m)) 0 0 calc(14 * var(--m))}
.h-tonight ol{list-style:none;margin:0;padding:calc(6 * var(--m)) 0 0;display:flex;flex-direction:column;gap:calc(4.5 * var(--m))}
.h-row{display:flex;align-items:center;width:calc(381 * var(--m));height:calc(45 * var(--m));background:#1f0590;text-align:left;transition:box-shadow .15s var(--ease-settle),background-color .15s var(--ease-settle)}
.h-row .n{width:calc(44 * var(--m));text-align:center;font:400 calc(19 * var(--m))/1 var(--font-mono);color:#d7a8ff;background:linear-gradient(#6b3cc9,#6b3cc9) right center/1px 60% no-repeat}
.h-row .c{flex:1;padding-left:calc(19 * var(--m));font:400 calc(14 * var(--m))/1 var(--font-body)}
.h-row .tm{width:calc(84 * var(--m));font:400 calc(14 * var(--m))/1 var(--font-body)}
.h-row svg{width:calc(30 * var(--m));height:calc(30 * var(--m));margin-right:calc(14 * var(--m))}
.h-row:hover{box-shadow:0 0 calc(12 * var(--m)) rgba(199,125,255,.5)}
.h-row.is-on{background:#5a22e6;box-shadow:inset 0 0 0 2px #efe2ff}
.h-row.is-on .n{color:#fff}
.h-split{margin:0 calc(10 * var(--m)) calc(10 * var(--m)) calc(10 * var(--m));padding:calc(10 * var(--m)) calc(16 * var(--m)) calc(8 * var(--m));background:linear-gradient(#6b3cc9,#6b3cc9) left/1px 100% no-repeat;font:400 calc(13 * var(--m))/1.3 var(--font-body)}
.h-split{transition:opacity .22s var(--ease-settle)}
.h-split[data-open="false"]{opacity:.35}
.h-row.is-folded{background:#2c0aa6}
.h-split .hd{display:flex;justify-content:space-between;font:500 calc(15 * var(--m))/1 var(--font-body);margin-bottom:calc(12 * var(--m))}
.h-split .it{display:flex;align-items:center;gap:calc(14 * var(--m));height:calc(41 * var(--m))}
.h-split .it svg{width:calc(30 * var(--m));height:calc(30 * var(--m));flex:none}
.h-split .it div{flex:1}
.h-split .it small{display:block;font-size:calc(11.5 * var(--m));color:#e6dcff}
.h-split .it code{font:400 calc(13.5 * var(--m))/1.2 var(--font-mono);letter-spacing:.02em}
.h-split .cp{width:calc(22 * var(--m));height:calc(22 * var(--m));display:flex}
.h-split .cp svg{width:calc(18 * var(--m));height:calc(20 * var(--m))}
.h-split .cp.done svg{filter:drop-shadow(0 0 4px #3AF1BE)}
.h-split dl{margin:calc(8 * var(--m)) 0 0;padding-top:calc(6 * var(--m));display:grid;grid-template-columns:1fr auto;row-gap:calc(3 * var(--m));font:400 calc(14 * var(--m))/1.2 var(--font-mono);background:linear-gradient(#6b3cc9,#6b3cc9) top/100% 1px no-repeat}
.h-split dl dt{font-family:var(--font-body);font-size:calc(14.5 * var(--m));letter-spacing:.04em}
.h-split dl dd{margin:0;text-align:right;color:#d7a8ff}
.h-split dl .tot{margin-top:calc(6 * var(--m));padding-top:calc(6 * var(--m));background:linear-gradient(#6b3cc9,#6b3cc9) top/100% 1px no-repeat;color:#fff;font-weight:600}
.h-split .blk{display:flex;justify-content:space-between;align-items:center;margin-top:calc(5 * var(--m));font:400 calc(13.5 * var(--m))/1 var(--font-body)}
.h-split .blk a{color:inherit;display:flex}
.h-split .blk svg{width:calc(15 * var(--m));height:calc(15 * var(--m))}

.h-change{display:grid;grid-template-columns:calc(217 * var(--m)) calc(47 * var(--m)) calc(234 * var(--m)) 1fr;height:calc(304 * var(--m));padding:calc(18 * var(--m)) 0 0 calc(14 * var(--m));align-items:start}
.h-list{height:calc(259 * var(--m));background:#1f0590;padding:calc(12 * var(--m)) calc(8 * var(--m))}
.h-list b{display:block;font:500 calc(16 * var(--m))/1 var(--font-body);padding:0 calc(6 * var(--m));margin-bottom:calc(12 * var(--m))}
.h-list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(5 * var(--m))}
.h-list li{height:calc(36 * var(--m));display:flex;align-items:center;gap:0;background:#22058f;font:400 calc(13.5 * var(--m))/1 var(--font-body);transition:transform .22s var(--ease-settle);border-radius:calc(8px * var(--u))}
.h-list li .k{width:calc(24 * var(--m));height:calc(24 * var(--m));margin:0 calc(16 * var(--m)) 0 calc(7 * var(--m));display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:inset 0 0 0 1.5px #efe2ff;font:500 calc(13 * var(--m))/1 var(--font-body)}
.h-list li.is-on{background:#5a22e6;box-shadow:inset 0 0 0 2px #efe2ff}
.h-list li.is-on .k{box-shadow:none;font-weight:600}
.h-change .arr{align-self:center;display:flex;justify-content:center;margin-top:calc(-10 * var(--m))}
.h-change .arr svg{width:calc(36 * var(--m));height:calc(30 * var(--m))}
.h-note{padding:calc(12 * var(--m)) calc(20 * var(--m)) 0 calc(22 * var(--m));font:400 calc(14.5 * var(--m))/1.6 var(--font-body)}
.h-note p{margin:0}
.h-note p+p{margin-top:calc(32 * var(--m));padding-top:calc(28 * var(--m));background:linear-gradient(#9f61cf,#9f61cf) top/100% 1px no-repeat}

/* motion (routes/home.js, Web Animations): tube-trace on mount, pipes draw + panels settle on reveal, FLIP rows, digit roll.
   Base state here is the FINAL state, so a paused or skipped animation always shows the finished page. */
.h-next li .cutn{margin-left:auto;margin-right:calc(8 * var(--m));padding:calc(2 * var(--m)) calc(7 * var(--m));border-radius:999px;background:#2e7a55;color:#d9ffe6;font:400 calc(10.5 * var(--m))/1 var(--font-mono)}
.h-next li .cutn~*{display:none}

/* ---------- below 1280: one column, 390 no horizontal scroll ---------- */
@media (max-width:1279px){
  .home{--m:1.2px}
  .h-hero{height:auto;display:flex;flex-direction:column;gap:14px;padding-top:12px}
  .h-arch,.h-crown{display:none}
  .h-title,.h-sub,.h-bank,.h-mid,.h-next{position:static;width:100%;height:auto;left:auto}
  .h-title{font-size:clamp(22px,7vw,44px);white-space:normal;line-height:1.2}
  .h-sub{font-size:16px}
  .h-bank.l,.h-bank.r{width:100%}
  .h-mid{order:-1;display:grid;grid-template-columns:1fr 1fr}
  .h-mid .h-receipt{grid-column:1/-1}
  .h-next{height:auto}
  .h-explain{display:flex;flex-direction:column;margin-top:32px}
  .h-panel.wide,.h-panel.half{height:auto;padding-bottom:14px}
  .h-phd{height:auto!important;flex-wrap:wrap;gap:8px 16px;padding:16px!important}
  .h-phd h2{white-space:normal;font-size:26px!important}
  .h-phd .r{margin-left:0}
  .h-flow{height:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 14px}
  .h-coin,.h-per,.h-cut3,.h-stack,.h-settled,.h-arrow{position:static}
  .h-pipes,.h-arrow{display:none}
  .h-cut3,.h-settled{width:100%}
  .h-stack{width:204px}
  .h-tonight,.h-change{display:flex;flex-direction:column;height:auto;padding:10px 12px;gap:12px}
  .h-row{width:100%}
  .h-split{margin:0}
  .h-list{height:auto}
  .h-change .arr{transform:rotate(90deg);margin:0}
  .h-note{padding:0}
}