/* compact.css — the compact landing (Kris 2026-10-23: "make it a little bit more compact and easily presentable with the 3D storytelling
   function. The paper trading thing should also really stand out", and "the text … as you scroll to kind of appear or slide in"; the same
   afternoon: the bad habits as one organised grid, the trenches laptop back with the real board on it, habits before the trenches).
   Loaded by index.html only, after styles.css and trenches.css; the app keeps its own look. Revert: the comment at the top of index.html. */

/* ---------- rhythm: one chapter, one headline, one line, one visual, the action ---------- */
.sec{padding:clamp(52px,6vw,88px) 0}
.sec-head{margin-bottom:clamp(24px,3vw,40px)}
.sec h2{font-size:clamp(36px,4.4vw,58px)}
.sec-lede{margin-top:14px;max-width:44em;font-size:clamp(17px,1.5vw,20px)}
.eyebrow{margin-bottom:14px}
.fine{margin-top:16px}

/* ---------- hero: the same scene, smaller ---------- */
.hero{padding-top:calc(var(--navh) + clamp(18px,3vw,48px))}
.hero-icon{width:clamp(70px,7vw,104px)}
.hero-title{font-size:clamp(46px,7.6vw,108px)}
.hero-lede{margin-top:16px}
.field{margin-top:24px}
.hero-links{margin-top:14px}
.hero-stage{height:clamp(200px,28vw,380px);margin-top:clamp(10px,1.4vw,20px);scale:.82;transform-origin:50% 100%} /* the scaled devices fill the box: no empty band above the laptop */

/* ---------- 01 · bad habits: the five instruments in one bento; a swipe rail on phones and narrow tablets ---------- */
.hx{padding:clamp(48px,4.6vw,66px) 0}
.hx .hx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 48px;max-width:none;text-align:left;margin-bottom:clamp(20px,2.2vw,28px)}
.hx-intro{flex:0 1 360px;padding-bottom:4px}
.hx-top .sec-lede{margin:0;max-width:none}
.hx-top .hx-live{margin-top:14px}
.hx-top .fine{margin:12px 0 0;text-align:left;max-width:30em}
.hx .hx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hx .hx-wide{grid-column:span 2}
.hx-tile{padding:20px 22px 0}
.hx-tile h3{margin-top:12px;font-size:clamp(24px,2.2vw,30px)}
.hx-stat,.hx-duel{margin-top:10px}
.hx-tile .hx-n{margin:0;font-size:clamp(38px,3.5vw,50px)}
.hx-stat .hx-line{margin-top:6px;font-size:15px;line-height:1.35}
.hx-duel{display:flex;gap:40px}
.hx-viz{min-height:112px;margin:12px -22px 0}
.hx-wide .hx-viz{min-height:176px} /* the pump scene's labels collide under 176 px */
.hx-foot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.hx-foot .rail-nav{display:none;align-items:center;gap:8px}
.hx .circle{background:rgba(255,255,255,.1);color:#fff}.hx .circle:hover{background:rgba(255,255,255,.18)}
.rail-n{min-width:4em;text-align:center;font:600 13px/1 var(--mono);letter-spacing:.04em;color:var(--d-ink2);font-variant-numeric:tabular-nums}
.gal-nav{align-items:center}.gal-nav .rail-n{display:none;color:var(--ink2)}

/* ---------- 02 · the trenches: yellow, the laptop and the phone on the live board, the one big action ---------- */
#trenches.tr2{position:relative;overflow:hidden}
.tr2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4vw,56px);align-items:center}
.tr2-copy{text-align:left}
.tr2 .sec-lede{margin-left:0;margin-right:0;max-width:30em;color:var(--ink);opacity:.8}
#trenches.tr2 .tr-cta{justify-content:flex-start;margin-top:24px;gap:14px 24px}
.tr2-go{height:60px;padding:0 34px;font:600 20px/1 var(--sysd);letter-spacing:-.02em;box-shadow:0 20px 44px -16px rgba(150,16,6,.65),inset 0 -2px 0 rgba(0,0,0,.18);transition:transform .2s var(--ease),box-shadow .2s}
.tr2-go:hover{transform:translateY(-2px);box-shadow:0 26px 52px -16px rgba(150,16,6,.75),inset 0 -2px 0 rgba(0,0,0,.18)}
#trenches.tr2 .tr-how{color:var(--ink);border-color:rgba(29,29,31,.28)}
#trenches.tr2 .tr-how:hover{color:var(--red)}
#trenches.tr2 .tr-tiles{margin-top:26px;border-top:1px solid rgba(29,29,31,.16);grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px}
#trenches.tr2 .tr-tiles li{padding:14px 0 0}
#trenches.tr2 .tr-tiles b{color:var(--red);font-size:clamp(19px,1.8vw,25px);white-space:nowrap}
#trenches.tr2 .tr-tiles span{color:var(--ink2);font-size:13px;margin-top:6px}
#trenches.tr2 .tr-puns{text-align:left;color:var(--ink);margin-top:18px;font-size:clamp(17px,1.6vw,21px)}
/* one line at a time: the old line is gone before the new one lands (they used to cross-fade on top of each other) */
#trenches.tr2 .tr-puns span{left:0;right:auto;transform:translateY(.3em);transition:opacity .2s ease,transform .2s ease}
#trenches.tr2 .tr-puns span.on{transform:none;transition:opacity .35s ease .28s,transform .45s var(--ease) .28s}
/* the devices: the hero's laptop and phone, in the page flow here; the screenshots until the board answers (landing.js). Own screen
   classes (dv-*): trenches.css still styles the old stage's tr-mbp, tr-phone and every img in tr-screen */
.tr-dev{position:relative;display:block;margin:30px 4% 0 0;color:inherit}
.tr-dev .mbp{position:relative;left:auto;bottom:auto;width:100%;transform:none}
.tr-dev .iphone{right:-5%;bottom:-7%;width:23%;padding:5px;border-radius:20%/9.2%}
.tr-dev .iphone-screen{border-radius:17%/7.9%}
.dv-screen,.dv-pscreen{background:#0b0a09}
.tr-dev .dv-pscreen{padding:0}
.dv-pscreen .island{z-index:3}
.tr-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.tr-dev.is-live .tr-shot{display:none}
#trenches .tr-dev .tr-live{margin-top:30px;background:#0c0c0e;color:#e5e5ea;box-shadow:none}
/* where the 3D W comes in for this chapter (story3d.js): above the laptop's top-right corner, pumping coins */
.tr-w{position:absolute;right:5%;top:-88px;width:124px;height:124px;pointer-events:none}
/* the board on the screens: the gym's Pulse page at its own size (1120 px wide on the laptop, 390 on the phone), scaled by --k */
.tx{position:absolute;left:0;top:0;z-index:1;display:none;flex-direction:column;width:1120px;height:calc(100% / var(--k,1));transform:scale(var(--k,1));transform-origin:0 0;background:#0b0a09;color:#f5f5f7;font:500 12px/1.3 var(--sys);letter-spacing:0;text-align:left;overflow:hidden;pointer-events:none}
.tx.tx-ph{width:390px;padding-top:58px}
.tr-dev.is-live .tx{display:flex}
.tx p{margin:0}
.tx-nav{flex:none;display:flex;align-items:center;gap:4px;height:46px;padding:0 12px;border-bottom:1px solid #26221e;white-space:nowrap}
.tx-wm{margin-right:12px;font:800 21px/1 var(--sysd);letter-spacing:-.045em}.tx-wm i{font-style:normal;color:#ffc72c}
.tx-tab{padding:7px 11px;border-radius:7px;color:#a39c93;font-size:14px;font-weight:600}.tx-tab.on{background:#1c1916;color:#f5f5f7}
.tx-sp{flex:1}
.tx-seg{display:inline-flex;align-items:center;padding:3px;border-radius:999px;background:#141210;box-shadow:inset 0 0 0 1px #26221e;color:#a39c93;font-size:13px;font-weight:600}
.tx-seg b{padding:5px 12px;border-radius:999px;background:#da291c;color:#fff;font-weight:600}.tx-seg span{padding:0 12px}
.tx-btn{margin-left:6px;padding:7px 13px;border-radius:7px;background:#ffc72c;color:#1d1d1f;font-size:13px;font-weight:700}
.tx-btn.ghost{background:none;color:#f5f5f7;box-shadow:inset 0 0 0 1px #352f29;font-weight:600}
.tx-sub{flex:none;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px}
.tx-sub strong{font:700 19px/1 var(--sysd);letter-spacing:-.01em}
.tx-pre{display:inline-flex;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px #352f29;color:#a39c93;font:600 12px/1 var(--mono)}
.tx-pre span{padding:5px 10px;border-radius:999px}.tx-pre span:first-child{background:#ffc72c;color:#1d1d1f}
.tx-tabs{flex:none;display:flex;gap:6px;padding:0 10px 10px}
.tx-tabs span{flex:1;padding:9px 0;border-radius:999px;background:#141210;box-shadow:inset 0 0 0 1px #26221e;color:#a39c93;text-align:center;font-size:13px;font-weight:600}
.tx-tabs span:first-child{background:#ffc72c;color:#1d1d1f;box-shadow:none}
.tx-cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 10px}
.tx-ph .tx-cols{grid-template-columns:minmax(0,1fr);padding:0}
.tx-2col .tx-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.tx-2col .tx-col:nth-child(3){display:none}
.tx-col{min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid #26221e;border-radius:8px;overflow:hidden}
.tx-ph .tx-col{border-width:1px 0 0;border-radius:0}
.tx-ch{flex:none;display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-bottom:1px solid #26221e;font-size:14px;font-weight:700}
.tx-ch small{color:#6b645c;font:500 12px var(--mono)}
.tx-q{margin-left:auto;padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px #352f29;color:#6b645c;font-size:11px;font-weight:500}
.tx-list{flex:1;min-height:0;overflow:hidden}
.tx-none{padding:44px 18px;text-align:center;color:#6b645c;font-size:13px}
.tx-card{display:grid;grid-template-columns:52px minmax(0,1fr) 124px;gap:3px 9px;padding:9px 10px;border-bottom:1px solid #26221e}
.tx-l{grid-row:1/4;display:flex;flex-direction:column;align-items:center;gap:5px}
.tx-av{width:52px;height:52px;padding:2px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,199,44,.55)}
.tx-av img,.tx-av span{display:block;width:100%;height:100%;border-radius:4px;object-fit:cover}
.tx-av span{display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 20%,#30281f 0%,#1a1613 70%);color:rgba(255,199,44,.82);font:800 15px/1 var(--sysd)}
.tx-bd{width:52px;height:3px;border-radius:2px;background:#352f29;overflow:hidden}.tx-bd i{display:block;height:100%;background:#ffc72c}
.amm .tx-av{box-shadow:inset 0 0 0 1px #30d158}.amm .tx-bd i{background:#30d158}
.tx-r1,.tx-r2,.tx-r3{grid-column:2;display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap}
.tx-r1{gap:6px;height:20px}
.tx-tk{flex:none;max-width:7.5em;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:700}
.tx-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#a39c93;font-size:12px}
.tx-pct{flex:none;margin-left:auto;padding:1px 5px;border-radius:4px;background:rgba(255,199,44,.1);color:#ffc72c;font:600 11px var(--mono)}
.tx-r2{gap:8px;height:19px;color:#a39c93;font-size:12px}
.tx-age{color:#30d158;font-weight:600;font-size:13px}
.tx-r2 svg{width:13px;height:13px;margin-right:3px;vertical-align:-2px}
.tx-up{color:#30d158}.tx-dn{color:#ff6b8a}
.tx-r3{gap:4px;height:19px}
.tx-r3 span{padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.03);color:#6b645c;font:500 10.5px var(--mono)}
.tx-r3 .good{color:rgba(48,209,88,.85);background:rgba(48,209,88,.06)}.tx-r3 .bad{color:#ff6b8a;background:rgba(255,107,138,.07)}
.tx-box{grid-column:3;grid-row:1/4;display:flex;flex-direction:column;gap:4px}
.tx-st{padding:4px 7px;border-radius:6px;background:#141210;color:#a39c93;font:500 11px/1.35 var(--mono)}
.tx-st p{display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.tx-st b{color:#f5f5f7;font-weight:600}
.tx-k{color:#6b645c;font-size:10px;font-weight:700}
.tx-mc b{padding:0 2px;border-radius:3px;font-size:14px;font-weight:700;letter-spacing:-.01em}
.tx-mc b.t1{color:#5ac8fa}.tx-mc b.t2{color:#ffc72c}.tx-mc b.t3{color:#30d158}
.tx-mc b.f-up{background:rgba(48,209,88,.16);color:#30d158}.tx-mc b.f-dn{background:rgba(255,107,138,.16);color:#ff6b8a}
.tx-ratio{height:3px;margin-top:3px;border-radius:2px;background:#ff6b8a;overflow:hidden}.tx-ratio i{display:block;height:100%;background:#30d158}
.tx-buy{display:flex;align-items:center;justify-content:center;height:30px;border-radius:6px;background:#da291c;color:#fff;font-size:13px;font-weight:700}
.tx-buy.wait{background:#242019;color:#6b645c}
.tx-foot{flex:none;display:flex;align-items:center;gap:12px;height:30px;margin-top:8px;padding:0 12px;border-top:1px solid #26221e;color:#a39c93;font:500 11px var(--mono);white-space:nowrap;overflow:hidden}
.tx-foot i{flex:none;width:7px;height:7px;margin-right:-6px;border-radius:50%;background:#30d158}

/* ---------- 03 · the scan: shorter panes; the brain pane fits its W, its line and the four counts (2 by 2) ---------- */
.scanview{padding:14px}
.sv-pane{min-height:210px;max-height:228px}
.brain{padding:14px 12px}
.brain .wire{width:62px;height:62px}
.brain .stage{margin-top:12px}
.brain .counts{grid-template-columns:repeat(4,auto);gap:5px 10px;margin-top:10px}

/* ---------- 04 · the fumbles: the counting rules fold away ---------- */
.missed-row{gap:clamp(28px,4vw,56px)}
.mf-more{margin:16px 0 22px}
.mf-more summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font:600 15px var(--sys);color:var(--yellow)}
.mf-more summary::-webkit-details-marker{display:none}
.mf-more summary::after{content:"+";font:400 20px/1 var(--sys)}.mf-more[open] summary::after{content:"\2013"}
.mf-more .missed-facts{margin:12px 0 0}

/* ---------- 05 · the coach: a shorter terminal, a smaller coach ---------- */
.coach-live{height:440px}
.coach-side{gap:18px}
.coach-woj{width:min(100%,220px)}
.coach-points{gap:16px}

/* ---------- 06 · the crew: the arc and its four steps side by side in the page column (no card cut at the edge), the jokes one arrow
   away; a swipe rail on phones and narrow tablets ---------- */
.gallery{max-width:1080px;margin:0 auto;--g:22px;gap:16px;clip-path:inset(-24px 22px -40px)} /* cards end at the column edge, never a sliver of the next */
.gcard{width:calc((100% - 64px) / 5)}
.g-arc b{font-size:clamp(21px,1.9vw,26px)}
.gcard b{font-size:clamp(17px,1.5vw,21px)}
@media (max-width:1099px){.gcard{width:calc((100% - 48px) / 4)}}
.g-arc{background:radial-gradient(420px 300px at 30% 0%,#3a3a3e 0%,#1d1d1f 70%);color:#fff;justify-content:flex-end}
.g-arc b{line-height:1.08}
.g-k{font:600 11px/1 var(--mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);opacity:1!important;margin:0 0 12px!important}
.g-n{position:absolute;top:16px;left:18px;z-index:1;font:600 11px/1 var(--mono);letter-spacing:.14em;opacity:.8}
#crew .sec-head{margin-bottom:22px}

/* ---------- $WAGMI ---------- */
.token-coin{width:clamp(120px,13vw,180px);margin-bottom:16px}
.plans{gap:14px}
.plan{padding:24px 26px}
.plan-big{margin-top:8px;font-size:clamp(34px,3.6vw,48px)}
.plan-sub{margin-top:8px;font-size:16px}

/* ---------- narrow tablets: the habits become the phone rail, the trenches stack ---------- */
@media (max-width:899px){
  .hx .hx-top{display:block}
  .hx-intro{margin-top:14px}
  .hx .hx-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -22px;padding:4px 22px 6px;scroll-padding:0 22px;outline:0}
  .hx .hx-grid::-webkit-scrollbar{display:none}
  .hx .hx-tile{flex:0 0 min(84vw,360px);scroll-snap-align:start}
  .hx-viz,.hx-wide .hx-viz{min-height:176px}
  .hx-duel{gap:24px}
  .hx-foot{justify-content:space-between}
  .hx-foot .rail-nav{display:flex}
  .tr2-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .tr-dev{width:92%;margin:8px auto 0}
  .tr-w{display:none}
  .gallery{max-width:none;margin:0;--g:22px;clip-path:none}
  .gcard{width:clamp(220px,46vw,300px)}
  .gal-nav .rail-n{display:block}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  .sec{padding:44px 0}
  .sec h2{font-size:clamp(34px,10vw,46px)}
  .hero-stage{scale:none;height:clamp(210px,60vw,270px)}
  #trenches.tr2 .tr-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .tr2-go{height:56px;padding:0 28px;font-size:18px}
  .tr-dev .iphone{right:-6%;width:25%}
  #trenches .tr-dev .tr-live{margin-top:26px}
  .sv-cols{grid-template-columns:minmax(0,1fr)}
  .sv-cols .sv-pane{min-height:0;max-height:none}
  .sv-cols .sv-pane:not(.brain){height:128px}
  .brain{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;justify-items:start;text-align:left;padding:14px 16px}
  .brain .wire{grid-row:1 / 3;width:44px;height:44px}
  .brain .stage{margin:0;font-size:16px}
  .brain .eta{margin:0;min-height:0}
  .brain .counts{grid-column:1 / -1;margin-top:10px}
  .mf-more{margin:12px 0 16px}
  .coach-live{height:380px}
  .coach-woj{display:none}
  .coach-points{gap:12px}
  .gcard{width:62vw}
  .plans{grid-template-columns:1fr;gap:10px}
  .plan{padding:18px 20px}
  .plan-big{font-size:34px}
}

/* ---------- entrances: text and cards slide in as they arrive (app.js adds .in); reduced motion gets none of it ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translate3d(0,56px,0);transition:opacity .8s var(--ease),transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0) * 110ms)}
  .sec h2.reveal,.hero-title.reveal{transform:translate3d(0,84px,0) skewY(4deg);transform-origin:0 100%}
  .eyebrow.reveal,.rv-l{transform:translate3d(-64px,0,0)}
  .rv-r{transform:translate3d(80px,24px,0) rotate(2deg)}
  .hx-tile.reveal,.plan.reveal,.missed-card.reveal,.coach-live.reveal,.scanview.reveal{transform:translate3d(0,96px,0) scale(.93)}
  .reveal.in{opacity:1!important;transform:none!important}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}