/* The Prediction Arcade. Loads after /ds/ds.css and /landing/landing.css: the band, the section
   heads, the reveal, the machine plate (.mface/.mlt/.mrc), the side buttons and the confirm strip
   are the landing's own classes. Only what is new to this page lives here. */

/* the SVG text roles CadeCard draws with (as in the SVG-stage pages' head block) */
.disp{font-family:"Futura PT Cond","Barlow Condensed",Impact,sans-serif;font-style:oblique;font-weight:500;text-transform:uppercase}
.disp-sb{font-family:"Futura PT Cond","Barlow Condensed",Impact,sans-serif;font-style:normal;font-weight:500;text-transform:uppercase}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-variant-numeric:tabular-nums}
.mono-m{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-variant-numeric:tabular-nums}
.arc .w{max-width:1440px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ulink{font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);border-bottom:2px solid currentColor;padding-bottom:2px;white-space:nowrap}
.ulink:hover{color:var(--yellow)}
.ulink:focus-visible,.fhow a:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.cap{position:relative;margin:34px 0 0;font-family:var(--data);font-size:11.5px;color:var(--meta)}

/* ═════ the floor ═════ */
.floor{position:relative;overflow:hidden;padding:64px 0 34px}
.floor .hbg{opacity:.3}
.fgrid{position:relative;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:64px;align-items:start}
.fcopy{padding-top:6px}
.floor h1{margin:14px 0 0;font-size:clamp(60px,6.4vw,94px);line-height:.86;white-space:nowrap}
.floor h1 span{display:block;animation:slam .7s cubic-bezier(.2,1.4,.4,1) backwards}.floor h1 span:nth-child(2){animation-delay:.12s}
.floor h1 .o{color:var(--acc);transition:color .4s}
.floor .sub{font-family:var(--read);font-size:20px;line-height:1.45;margin:22px 0 0;max-width:420px;color:#d9d3c3}.floor .sub b{color:var(--paper);font-weight:600}
/* the floor switcher: the landing's hex category marks, made into tabs.
   Selected = the paper plate with ink type (the house rule for a selected rail item); category colour stays in the hex. */
.floors{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.flr{position:relative;display:flex;align-items:center;width:100%;text-align:left;filter:drop-shadow(4px 4px 0 #000);transition:transform .38s cubic-bezier(.2,1.5,.4,1)}
.flr .chex{width:62px;flex:none}
.flr .fl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;margin-left:-12px;padding:12px 30px 12px 26px;background:#161514;border:2px solid #0B0B0B;clip-path:polygon(0 0,100% 0,96% 100%,0 100%);transition:background .2s}
.flr .fl-t b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:32px;line-height:.9;text-transform:uppercase;color:var(--paper)}
.flr small{display:flex;align-items:center;gap:10px;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);white-space:nowrap;overflow:hidden}
.flr .bead{width:9px;height:9px;flex:none;border-radius:50%;background:var(--no);animation:blink 1.2s steps(1) infinite}
.flr em{font-style:normal}.flr .fl-m{font-variant-numeric:tabular-nums}.flr .fl-m.u{color:var(--yes)}.flr .fl-m.d{color:var(--no)}
.flr:hover{transform:translateX(6px)}
.flr[aria-selected=true]{transform:translateX(16px)}
.flr[aria-selected=true] .fl-t{background:var(--paper)}
.flr[aria-selected=true] .fl-t b{color:#0B0B0B}
.flr[aria-selected=true] small{color:#5B5548}
.flr[aria-selected=true] .fl-m.u{color:#3C8214}.flr[aria-selected=true] .fl-m.d{color:#B21229}
.flr:focus-visible{outline:3px solid #FFA800;outline-offset:4px}
.fhow{margin:28px 0 0;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.fhow u{text-decoration:none;color:var(--orange);border-bottom:2px solid currentColor;padding-bottom:2px;margin-left:6px}
.fhow a:hover u{color:var(--yellow)}

/* the featured market: the landing's machine plate (orange keyline, panel clip, 10px drop) */
.featured{position:relative;margin-top:30px}
.fp{display:none;position:relative;isolation:isolate;padding:58px 36px 30px}
.fp.on{display:block}
.fp.in{animation:fpin .55s cubic-bezier(.2,1.35,.4,1)}
@keyframes fpin{from{opacity:0;transform:translateX(40px) skewX(-4deg)}}
.fp .mlt{top:-28px}.fp .mrc{top:-24px}
.fp .rclock span{font-size:24px;padding:11px 28px}
.fp-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center}
.med{--s:56px;position:relative;width:var(--s);aspect-ratio:1;flex:none;filter:drop-shadow(3px 3px 0 #000)}
.med i,.med>span{position:absolute;clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.med .med-o{inset:0;background:#0B0B0B}.med .med-r{inset:5%;background:var(--ring,var(--orange))}
.med>span{inset:12%;background:#141414;display:grid;place-items:center;overflow:hidden;font-family:var(--shout);font-style:italic;font-weight:800;font-size:calc(var(--s) * .3);color:var(--paper)}
.med>span img{width:100%;height:100%;object-fit:cover}
.med.big{--s:84px}
.fp-k{color:var(--orange)!important;margin:0}
.fp-qq{margin:8px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:31px;line-height:.95;text-transform:uppercase}
.fp-qq em{font-style:inherit;color:var(--orange)}
.fp-pool{text-align:right}
.fp-pool small,.fp-px small{display:block;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.fp-pool b{display:block;margin-top:4px;font-family:var(--data);font-weight:800;font-size:22px;color:var(--paper);font-variant-numeric:tabular-nums}
.fp-mid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;margin-top:22px;padding-top:30px;border-top:1px solid #2A2724}
.fp-px{margin:0;min-width:128px}.fp-px b{display:block;margin-top:4px;font-family:var(--data);font-weight:800;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;transition:color .3s}
.fp-bs{width:calc(100% - 8px);--bs-h:50px;--bs-fs:22px;--bs-ws:14px;--bs-vs:56px;--bs-wh:150px}
.fp-ch{height:300px;margin-top:24px}
.fp-pick{position:relative;margin-top:24px}
.fp-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}

/* the live band follows the floor at the landing's distance */
.arc .feed{margin-top:30px}
.li.fresh{animation:lifresh .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes lifresh{from{opacity:0;transform:translateY(-14px)}}

/* ═════ 01 the board ═════ */
.mtabs{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:40px}
.mtabs .ntab{width:auto;min-width:133px;padding:0 28px 0 18px;background:none;color:var(--paper)}
.mtabs .ntab[aria-selected=true]{background:url(/ds/assets/ds/navigation/nav-sportstab.svg) 50% 50%/100% 100% no-repeat;color:#0B0B0B}
.mtabs .ntab:not([aria-selected=true]):hover{color:var(--orange)}
.mhint{margin-left:auto;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
@media (hover:none){.mhint{display:none}}
.bwrap{max-width:1440px;margin:0 auto;padding:0 40px}
#boardDots{display:none}
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:30px 26px;margin-top:34px}
/* one card: the SVG plate, with the HTML layers riding its coordinates */
.mk{position:relative;aspect-ratio:var(--ar,522/248);min-width:0}
.mk svg.cd{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mk.in{animation:mkin .6s cubic-bezier(.2,1.35,.4,1) backwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes mkin{from{opacity:0;transform:translateY(34px) scale(.94) rotate(-1.5deg)}}
.mk-go{position:absolute;inset:0;z-index:1;transition:transform .15s}
.mk-go:focus-visible{outline:3px solid #FFA800;outline-offset:4px}
.mk:hover svg.cd{transform:translate(-2px,-3px)}
.mk svg.cd{transition:transform .18s cubic-bezier(0,0,.2,1)}
.mk-bolt{position:absolute;z-index:3;aspect-ratio:1;border-radius:50%;cursor:pointer}
.mk-bolt:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
.mk-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
.mk-chip{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--data);font-weight:800;font-size:clamp(13px,3.4cqw,17px);-webkit-text-stroke:2px #000;paint-order:stroke fill;animation:mkchip 1100ms cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes mkchip{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}14%{opacity:1;transform:translate(-50%,-70%) scale(1.25)}26%{transform:translate(-50%,-70%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-120%)}}
.mk-chip[data-side=a]{color:#8BD943}.mk-chip[data-side=b]{color:#FF3855}
.mk-chip.big{font-size:clamp(17px,4.4cqw,23px);color:#FAF424!important}
.mk-chip.you{color:#FAF424!important}
.mk{container-type:inline-size}
.mk-score{position:absolute;transform:translate(-50%,-50%);padding:5px 12px 4px;background:var(--yellow);color:#0B0B0B;box-shadow:3px 3px 0 #000;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(15px,4cqw,20px);text-transform:uppercase;white-space:nowrap;animation:mkscore 1.5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes mkscore{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}22%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%)}}
.mk.whale svg.cd{animation:mkshake .28s steps(2) 2}
@keyframes mkshake{25%{translate:3px -1px}75%{translate:-3px 1px}}
.mk.urgent svg.cd .slats{animation:mkbeat 1s ease-out infinite}
@keyframes mkbeat{0%{opacity:1}15%{opacity:.7}30%{opacity:1}}
/* the quick-pick tray: over the meta line and the slats, same footprint, nothing below it moves */
.mk-stamp{position:absolute;z-index:5;left:50%;top:44%;width:44%;height:auto;overflow:visible;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(-14deg)}
.mk-stamp.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg);transition:transform .38s cubic-bezier(.2,1.5,.4,1),opacity .12s}
/* go deeper: where each floor leads on this site */
.deeper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
#markets .note{margin-top:30px}

/* ═════ 02 head to head ═════ */
.duelx{position:relative;isolation:isolate;margin-top:62px;padding:60px 44px 34px}
.duelx .mface::before{background:var(--violet)}
.dx-k{margin:0;color:var(--yellow)!important}
.dx-q{margin:8px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:44px;line-height:.92;text-transform:uppercase}
.dx-q em{font-style:inherit;color:var(--orange)}
.dx-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px}
.dx-c{display:flex;align-items:center;gap:18px}.dx-c.r{text-align:right}
.dx-c b{display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:46px;line-height:.9;text-transform:uppercase}
.dx-c.l b{color:var(--orange)}.dx-c.r b{color:#B991FF}
.dx-chg{display:block;margin-top:6px;font-family:var(--data);font-weight:800;font-size:22px;color:var(--yes);font-variant-numeric:tabular-nums}.dx-chg.dn{color:var(--no)}
.dx-pot{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.dx-pot small{font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.dx-pot b{font-family:var(--data);font-weight:800;font-size:34px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.dx-calls{font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.dx-c small{display:block;margin-top:4px;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.dx-bar{margin:64px 8px 0;--bs-h:68px;--bs-fs:32px;--bs-ws:18px;--bs-vs:76px;--bs-wh:190px}
.dx-pick{position:relative;margin-top:40px}
.dx-feed{display:flex;align-items:center;gap:18px;margin-top:26px;padding-top:18px;border-top:1px solid #2A2724;overflow:hidden}
.dx-feed .dl-track span{font-family:var(--data);font-weight:700;font-size:13px;color:var(--meta);animation:dlin .45s cubic-bezier(.2,1.4,.4,1)}
.dx-feed .dl-track b{color:var(--yellow);font-weight:800}.dx-feed .dl-track em{font-style:normal;font-weight:800}.dx-feed .u{color:var(--orange)}.dx-feed .d{color:#B991FF}
.recs.mini{margin-top:64px;gap:24px}
.recs.mini .rec{display:block;transition:transform .15s var(--ease)}
.recs.mini .rec:hover{transform:translate(-3px,-3px)}
.recs.mini .rec:focus-visible{outline:3px solid #FFA800;outline-offset:6px}
.recs.mini .rf{padding:34px 32px 24px}
.recs.mini .n{font-size:clamp(44px,4.6vw,68px)}
.recs.mini .k{font-size:12px}
#battle .note{margin-top:30px;max-width:none}
#battle .note .ulink{margin-left:8px}

/* ═════ 03 leaderboard: the DS ports, inside a container so their @container rules apply ═════ */
.lbx{container-type:inline-size;margin-top:58px}
.lbx .podium{max-width:none}.lbx .lrows{max-width:none;margin-top:34px}
.lbx .tbl{margin-top:0}
a.pod{transition:transform 160ms ease}a.pod:hover{transform:translateY(-3px)}
a.pod:focus-visible,a.lrow:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.pod.swap{animation:podswap .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes podswap{0%{transform:scale(1.12) rotate(-2deg);filter:brightness(1.6)}100%{transform:none;filter:none}}
a.lrow{transition:border-color .3s,background-color .3s}
a.lrow:hover{border-color:#5A5A5A;background:#1C1C1C}
.lrow .r{gap:8px}
.lrow .tr{width:9px;height:18px;opacity:0;transition:opacity .25s}
.lrow.moved .tr{opacity:1}
.lrow.moved.up{border-color:var(--yes)}.lrow.moved.dn{border-color:var(--no)}
.lrow.moved.up .r{animation:rkpop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes rkpop{40%{transform:scale(1.25)}}
.lbfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}

/* ═════ 04 how it works: three plates that point at the landing's walkthrough ═════ */
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.steps a{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:8px;align-items:center;height:100%;padding:22px 24px;background:#0f0e0d;border:3px solid #2c2926;box-shadow:5px 5px 0 #000;transition:transform .15s var(--ease),border-color .2s}
.steps a:hover{transform:translate(-2px,-2px);border-color:var(--orange)}
.steps a:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.steps i{display:grid;place-items:center;width:44px;height:44px;background:var(--paper);color:#0B0B0B;font-family:var(--shout);font-style:italic;font-weight:800;font-size:22px;box-shadow:3px 3px 0 #000}
.steps a:hover i{background:var(--orange)}
.steps b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:28px;line-height:.95;text-transform:uppercase;color:var(--paper)}
.steps span{grid-column:1 / -1;font-family:var(--read);font-size:16px;line-height:1.4;color:#cfc8b6}
.steps.in li{animation:stepin .5s cubic-bezier(.2,1.4,.4,1) backwards}.steps.in li:nth-child(2){animation-delay:.08s}.steps.in li:nth-child(3){animation-delay:.16s}
@keyframes stepin{from{opacity:0;transform:translateX(-30px)}}
.howcta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:40px}
.howcta .cta{height:62px;min-width:250px;font-size:26px}
.howcta .slat{height:52px;padding:0 28px;font-size:20px}
.cta.commit.or .fc{fill:var(--orange)}

/* ═════ the close: one orange slab (violet opened the page, orange closes it) ═════ */
.jn{padding-top:150px}
.jslab{position:relative;z-index:1;filter:drop-shadow(10px 10px 0 #000)}
.jpanel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:52px 60px;background:var(--orange);clip-path:var(--clip-quiet);color:#0B0B0B;overflow:hidden}
.jpanel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#FF7A00 0 1.6px,transparent 2.2px) 0 0/15px 15px;opacity:.55;pointer-events:none}
.jpanel>*{position:relative}
.jpanel .bh{margin:18px 0 0;font-size:clamp(44px,5vw,72px)}
.jpanel .bbody{margin-top:14px}
.jcta{flex:none;height:64px;min-width:260px;padding:0 40px;font-size:26px;color:var(--paper)}

/* ═════ responsive ═════ */
/* the live header's desktop geometry is fixed; with four items and the wide JOIN plate it needs a tighter cluster below 1200 */
@media (min-width:961px) and (max-width:1199px){.arc .cnl-nav{gap:26px;padding-right:120px}.arc .cnl-nav span{font-size:26px}}
@media (max-width:1180px){
 .fgrid{grid-template-columns:minmax(0,1fr);gap:24px}
 .fcopy{max-width:none}
 .floors{flex-direction:row;gap:12px}
 .flr{flex:1 1 0;min-width:0}
 .flr[aria-selected=true]{transform:translateY(-6px)}.flr:hover{transform:translateY(-3px)}
 .flr .fl-t{padding:10px 18px 10px 20px}
 .featured{margin-top:44px}
 .deeper{grid-template-columns:minmax(0,1fr)}
 .steps{grid-template-columns:minmax(0,1fr)}
 .dx-q{font-size:36px}
}
@media (max-width:900px){
 .flr small .fl-m{display:none}
}
@media (max-width:760px){
 .floor{padding:30px 0 24px}
 .floor h1{font-size:clamp(46px,14vw,64px)}
 .floor .sub{font-size:17px;margin-top:16px}
 .floors{margin-top:24px;gap:8px}
 .flr{flex-direction:column;align-items:center;filter:drop-shadow(3px 3px 0 #000)}
 .flr .chex{width:42px;margin-bottom:-12px;z-index:2}
 .flr .fl-t{margin-left:0;width:100%;align-items:center;padding:16px 6px 9px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);gap:4px}
 .flr .fl-t b{font-size:clamp(15px,4.6vw,20px)}
 .flr small{font-size:10px;gap:5px;letter-spacing:.06em}
 .flr .bead{width:7px;height:7px}
 .fhow{margin-top:20px}
 .featured{margin-top:46px}
 .fp{padding:48px 16px 22px}
 .fp .mlt{left:12px}.fp .mrc{right:10px}.fp .livetag{--lt-w:104px!important}
 .fp .rclock span{font-size:19px;padding:9px 20px}
 .fp-top{grid-template-columns:auto minmax(0,1fr);gap:14px}
 .med{--s:46px}
 .fp-pool{grid-column:1 / -1;display:flex;align-items:baseline;gap:10px;text-align:left}.fp-pool b{margin:0;font-size:18px}
 .fp-qq{font-size:22px}
 .fp-mid{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:18px;margin-top:16px}
 .fp-bs{margin-top:22px;--bs-h:44px;--bs-fs:15px;--bs-ws:11px;--bs-vs:40px;--bs-wh:124px}
 .fp-ch{height:240px;margin:18px -8px 0}
 .cap{margin-top:26px}
 .mhint{display:none}
 .mtabs{gap:8px;margin-top:28px}.mtabs .ntab{min-width:0;flex:1;padding:0 8px;font-size:17px;gap:5px}.mtabs .ntab b{display:none}
 /* the board becomes a snap carousel, one card and the edge of the next */
 .bwrap{padding:0}
 .board{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:91%;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 18px 24px;scroll-padding-left:18px;scrollbar-width:none;margin-top:22px}
 .board::-webkit-scrollbar{display:none}
 .board .mk{scroll-snap-align:start}
 #boardDots{display:flex;padding:0 18px;margin:0}
 .deeper{margin-top:36px;gap:16px}
 .duelx{padding:52px 16px 24px;margin-top:40px}
 .dx-q{font-size:28px}
 .dx-row{gap:10px;margin-top:20px}
 .dx-c{gap:10px;flex-direction:column;align-items:flex-start}.dx-c.r{flex-direction:column-reverse;align-items:flex-end}
 .med.big{--s:58px}
 .dx-c b{font-size:28px}.dx-chg{font-size:16px}
 .dx-pot b{font-size:18px}.dx-pot small,.dx-calls{font-size:10px}
 .dx-c small{font-size:10px}
 .dx-bar{margin:68px 4px 0;--bs-h:46px;--bs-fs:15px;--bs-ws:11px;--bs-vs:40px;--bs-wh:124px}
 .dx-pick{margin-top:30px}
 .recs.mini{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;gap:10px}.recs.mini .rec{filter:drop-shadow(4px 4px 0 #000)}.recs.mini .rf{padding:20px 10px 14px}.recs.mini .rdots{display:none}.recs.mini .n{font-size:clamp(20px,6.4vw,28px)}.recs.mini hr{margin:10px 0 8px;border-top-width:2px}.recs.mini .k{font-size:9.5px;letter-spacing:.08em;line-height:1.3}
 .lbx .rws .lrow:nth-child(n+4){display:none}
 .lbx{margin-top:36px}
 .steps{margin-top:36px;gap:14px}.steps a{padding:16px 18px}.steps b{font-size:24px}
 .howcta{gap:18px}.howcta .cta{min-width:0;width:100%}
 .jn{padding-top:110px}
 .jpanel{padding:40px 22px 36px;gap:26px}.jcta{width:100%;min-width:0}
}
@media (max-width:420px){
 .dx-c b{font-size:24px}
}

/* reduced motion: still numbers, no travel */
@media (prefers-reduced-motion:reduce){
 .floor h1 span,.fp.in,.mk.in,.dp,.steps.in li,.li.fresh,.pod.swap{animation:none!important}
 .mk-chip,.mk-score{display:none}
 .mk.whale svg.cd,.mk.urgent svg.cd .slats{animation:none}
 .flr,.mk svg.cd,.mk-qp{transition:none}
}
html.static .reveal{opacity:1;transform:none}
html.static .floor h1 span{animation:none}

/* ═════════ 2026-10-01 refinement: each floor its own world, the in-place quick-pick, art tiles ═════════ */
/* the floor's accent follows the category's hex mark: orange memecoins, blue sports, violet stocks */
body.arc{--acc:#FFA800;--acc-a:255,168,0}
body[data-cat=sports]{--acc:#419FE5;--acc-a:65,159,229}
body[data-cat=stocks]{--acc:#B991FF;--acc-a:185,145,255}
.floor .kick2{color:var(--acc);transition:color .4s}
.floor .sub.swap{animation:subin .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes subin{from{opacity:0;transform:translateX(-24px)}}
.flr[aria-selected=true] .fl-t{box-shadow:inset 7px 0 0 var(--acc)}
.featured{isolation:isolate}
.fglow{position:absolute;inset:-90px -70px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--acc-a),.24),rgba(var(--acc-a),0));transition:opacity .4s}
.featured .fp .mface::before{background:var(--acc);transition:background .4s}
/* the switch: the incoming floor slams in from the right, an accent plate wipes off it */
.fp.in{animation:fpslam .6s cubic-bezier(.2,1.35,.4,1)}
@keyframes fpslam{0%{opacity:0;transform:translateX(70px) skewX(-6deg) scale(.97)}60%{opacity:1}}
.fp.in::after{content:"";position:absolute;inset:-4px;z-index:20;background:var(--acc);clip-path:var(--clip-panel);transform-origin:right;animation:fpwipe .55s cubic-bezier(.7,0,.3,1) .05s forwards;pointer-events:none}
@keyframes fpwipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* the LIVE tag and the timer chip SIT on the plate's top edge (the panel clip's edge is ~6px down) */
.fp .mlt,.duelx .mlt{top:-13px;left:22px}
.fp .mrc,.duelx .mrc{top:-17px;right:20px}
.duelx .mlt{left:30px}.duelx .mrc{right:28px}

/* ── the client's SlatButton, html ── */
.slat2{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;height:77px;border:0;padding:0;margin:0;background:transparent;cursor:pointer;
  font-family:var(--call);font-style:normal;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#F0EAD9;text-shadow:1.5px 1.5px 0 #000;
  --press:4px;transition:transform .16s cubic-bezier(.16,1,.3,1),filter .2s}
.slat2 .sl-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.slat2 .sl-l{position:absolute;left:7%;right:4%;top:0;height:84.5%;display:flex;align-items:center;justify-content:center;gap:.5em;pointer-events:none;white-space:nowrap}
.slat2 b{font-weight:500;font-size:30px;line-height:1}
.slat2 .sl-l{padding-left:5%}
.slat2:hover:not([aria-disabled=true]){transform:translate(calc(var(--press) * -1),calc(var(--press) * -1))}
.slat2:active:not([aria-disabled=true]){transform:translate(var(--press),var(--press))}
.slat2:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.slat2[aria-disabled=true]{filter:grayscale(1) brightness(.6);cursor:not-allowed}
/* the hero's pick row: slat, then their PAYS chip and the IF ... WINS read-out, as on the battle page */
.fp-pick{position:relative;margin-top:22px}
.pk2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pkc{position:relative;min-width:0}
.pkp{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 0}
.fp-pick .confirm{padding:10px 16px}
/* head to head, after a pick: the backed slat stamps the card picks' YOU plate and a small cream
   receipt (the quiet panel clip, hard shadow) sits over that side's pays row. Absolute, so nothing resizes. */
.dx-pick .slat2 .you{height:40px;padding:0 30px 4px 22px}
.dx-pick .slat2 .you b{font-size:19px}
.dx-pick[data-mine=higher] .slat2[data-side=higher] .you,.dx-pick[data-mine=lower] .slat2[data-side=lower] .you{display:flex;animation:youslam .45s cubic-bezier(.2,1.6,.4,1)}
.dx-pick[data-mine=higher] .slat2[data-side=higher] .sl-l,.dx-pick[data-mine=lower] .slat2[data-side=lower] .sl-l{opacity:0}
.dx-pick[data-mine=higher] .slat2[data-side=lower],.dx-pick[data-mine=lower] .slat2[data-side=higher]{filter:grayscale(.85) brightness(.55)}
.dx-pick.rc-on[data-mine=higher] .pkc:first-child .pkp,.dx-pick.rc-on[data-mine=lower] .pkc:last-child .pkp{visibility:hidden}
.dx-rc{position:absolute;z-index:3;top:89px;left:4%;max-width:calc(50% - 13px - 4%);filter:drop-shadow(5px 5px 0 #000);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1),visibility 0s .2s}
.dx-pick[data-mine=lower] .dx-rc{left:calc(50% + 13px + 2%)}
.dx-pick.rc-on .dx-rc{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1),visibility 0s}
.rc-f{display:flex;align-items:center;gap:22px;height:46px;padding:0 20px 0 22px;background:var(--paper);color:#0B0B0B;clip-path:var(--clip-quiet);white-space:nowrap}
.rc-i{display:flex;flex-direction:column;gap:3px}
.rc-i .label{font-size:10px;line-height:1;color:#5B5548}
.rc-i b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:19px;line-height:1;text-transform:uppercase}
.rc-j{flex-basis:auto;margin-left:4px}
.pk-chip{position:absolute;left:50%;top:6px;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--data);font-weight:800;font-size:17px;-webkit-text-stroke:2px #000;paint-order:stroke fill;animation:mkchip 1100ms cubic-bezier(.2,1.4,.4,1) forwards;pointer-events:none;z-index:3}
.pk-chip[data-side=higher]{color:#8BD943}.pk-chip[data-side=lower]{color:#FF3855}.pk-chip.big{font-size:22px;color:#FAF424}
.fp-foot .dlive{flex:1;min-width:0;margin:0;padding:0;border:0}
.fp-foot .dl-track{display:flex;gap:22px;white-space:nowrap;overflow:hidden;-webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent)}
.fp-foot .dl-track span{font-family:var(--data);font-weight:700;font-size:12px;color:var(--meta);animation:dlin .45s cubic-bezier(.2,1.4,.4,1)}
.fp-foot .dl-track b{color:var(--paper)}.fp-foot .dl-track .wh b{color:var(--yellow)}.fp-foot .dl-track em{font-style:normal;font-weight:800}.fp-foot .u{color:var(--yes)}.fp-foot .d{color:var(--no)}
.fp .fp-ch{height:270px}

/* ── stocks: the tape, the mark plate, the bell, candles against the open ── */
.tape{position:relative;overflow:hidden;margin:-18px -14px 22px;padding:9px 0;background:#0B0B0B;border-top:2px solid #2A2724;border-bottom:2px solid #2A2724;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tape-in{display:flex;width:max-content;animation:marq 38s linear infinite}
.tg{display:flex}
.tq{display:inline-flex;align-items:baseline;gap:8px;padding:0 20px;border-right:1px solid #2A2724;font-family:var(--data);font-size:13px;white-space:nowrap}
.tq b{font-weight:800;color:var(--paper)}.tq em{font-style:normal;font-weight:700;color:var(--meta);font-variant-numeric:tabular-nums}.tq i{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}.tq i.u{color:var(--yes)}.tq i.d{color:var(--no)}
.fp.stocks .fp-top{grid-template-columns:auto minmax(0,1fr) auto}
.mark{width:96px;height:46px;overflow:visible}
.bell .notch{width:172px;height:56px;padding:0 14px 6px;gap:8px;font-size:19px}
.bell .notch .bead{position:relative;width:10px;height:10px;flex:none;border-radius:50%;background:var(--yes);animation:blink 1.2s steps(1) infinite}
.bell .notch b{position:relative;white-space:nowrap}
.bell.ring .notch{animation:bellring .9s cubic-bezier(.2,1.4,.4,1)}
@keyframes bellring{0%{transform:scale(1.35) rotate(-8deg)}15%{transform:scale(1) rotate(6deg)}30%{transform:rotate(-5deg)}45%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}100%{transform:none}}
.fp-mid.st{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fp-mid.st .r{text-align:right}
.fp-open{color:var(--yellow)}
.fp-ssb{margin-top:16px;--ssb-h:30px;--ssb-fs:13px;--ssb-drop:3px}

/* ── sports: the game switch, their scoreboard, the field, the win-probability line ── */
.gsw{display:flex;gap:10px;flex-wrap:wrap;margin:-6px 0 16px}
.gs{height:38px;padding:0 18px;border:2px solid #3A3531;background:#0f0e0d;color:var(--paper);font-family:var(--shout);font-style:italic;font-weight:800;font-size:16px;text-transform:uppercase;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);cursor:pointer;transition:background .2s,color .2s}
.gs.on{background:var(--paper);color:#0B0B0B;border-color:#000}
.gs:not(.on):hover{color:var(--acc)}
.gs:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.sb{position:relative}
.sb-svg{display:block;width:min(100%,520px);height:auto;margin:0 auto;overflow:visible}
.fld{position:relative;margin:6px -10px 0}
.fld-svg{display:block;width:100%;height:auto;overflow:hidden}
.fld-ev{position:absolute;left:50%;top:8px;transform:translateX(-50%);padding:6px 16px 5px;background:var(--info);color:#0B0B0B;box-shadow:4px 4px 0 #000;outline:2px solid #000;font-family:var(--shout);font-style:italic;font-weight:800;font-size:20px;text-transform:uppercase;white-space:nowrap;opacity:0}
.fld-ev[data-tone=yes]{background:var(--yes)}.fld-ev[data-tone=no]{background:var(--no);color:var(--paper)}
.fld-ev.on{animation:evin 2.6s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes evin{0%{opacity:0;transform:translate(-50%,-14px) scale(.7)}12%{opacity:1;transform:translate(-50%,0) scale(1.06)}20%,85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0}}
.fld-stamp{position:absolute;left:50%;top:48%;width:min(46%,240px);height:auto;overflow:visible;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(-14deg);z-index:3}
.fld-stamp.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg);transition:transform .38s cubic-bezier(.2,1.5,.4,1),opacity .12s}
.wp{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:end;margin-top:14px;padding-top:16px;border-top:1px solid #2A2724}
.wp .fp-qq{margin-top:6px}
.wp-o{--lco-h:84px;margin:0}
.fp.sports .fp-pick{margin-top:20px}

/* ── the card's quick-pick, in place: the card lifts, its slats become their SlatButtons ── */
.mk{transition:transform .2s cubic-bezier(.2,1.3,.4,1)}
.mk svg.cd{transition:filter .2s}
.mk:hover,.mk.open,.mk:focus-within{transform:translate(-4px,-5px)}
.mk:hover svg.cd,.mk.open svg.cd,.mk:focus-within svg.cd{filter:drop-shadow(5px 6px 0 #000);transform:none}
.mk svg.cd .slats,.mk svg.cd text.mono-m{transition:opacity .15s}
.mk:hover svg.cd .slats,.mk.open svg.cd .slats,.mk:focus-within svg.cd .slats,.mk.done svg.cd .slats{opacity:0}
.mk:hover svg.cd text.mono-m,.mk.open svg.cd text.mono-m,.mk:focus-within svg.cd text.mono-m,.mk.done svg.cd text.mono-m{opacity:0}
.mk-sl{position:absolute;z-index:4;display:flex;gap:1.4cqw;opacity:0;visibility:hidden;transform:scale(.96);transform-origin:center;transition:opacity .15s,transform .25s cubic-bezier(.2,1.5,.4,1),visibility 0s .2s}
.mk:hover .mk-sl,.mk.open .mk-sl,.mk:focus-within .mk-sl,.mk.done .mk-sl{opacity:1;visibility:visible;transform:scale(1.04);transition:opacity .15s,transform .25s cubic-bezier(.2,1.5,.4,1),visibility 0s}
.mk-sl .slat2{height:100%;--press:3px}
.mk-sl .slat2.a{flex:0 0 calc(var(--sa,.5) * 100% - .7cqw);min-width:0}.mk-sl .slat2.b{flex:1 1 0;min-width:0}
.mk-sl .slat2{container-type:size}
.mk-sl .sl-l{flex-direction:row;align-items:center;gap:.5em;left:9%;overflow:hidden}
.mk-sl b{font-size:min(19px,46cqh,15cqw)}
.mk-sl em{font-style:normal;font-family:var(--data);font-weight:800;font-size:min(12px,26cqh,7.4cqw);letter-spacing:.04em;text-shadow:1px 1px 0 #000}
@container (max-width:150px){.mk-sl em{display:none}}
.mk.shut .mk-sl .slat2{filter:grayscale(1) brightness(.6)}
.slat2 .you{position:absolute;left:50%;top:42%;z-index:2;width:max-content;display:none;align-items:center;justify-content:center;height:min(32px,64cqh);padding:0 26px 3px 18px;transform:translate(-50%,-50%) rotate(-3deg);white-space:nowrap;text-shadow:none}
.slat2 .you svg{position:absolute;inset:0;width:100%;height:100%}
.slat2 .you b{position:relative;font-family:var(--shout);font-style:italic;font-weight:800;font-size:min(15px,30cqh);letter-spacing:.03em;color:#0B0B0B}
.mk.done .slat2.a .you{display:none}
.mk[data-mine=a] .slat2.a .you,.mk[data-mine=b] .slat2.b .you{display:flex;animation:youslam .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes youslam{from{transform:translate(-50%,-50%) scale(2) rotate(-12deg);opacity:0}}
.mk[data-mine=a] .slat2.a .sl-l,.mk[data-mine=b] .slat2.b .sl-l{opacity:0}
.mk[data-mine=a] .slat2.b,.mk[data-mine=b] .slat2.a{filter:grayscale(.85) brightness(.55)}
.mk[data-mine=a] .slat2.a,.mk[data-mine=b] .slat2.b{z-index:2}
/* the meta band: the stake row while armed, the cream confirmation line after a pick */
.mk-amt,.mk-cf{position:absolute;z-index:4;display:flex;align-items:center;gap:1.4cqw;opacity:0;visibility:hidden;transform:translateX(-10px);transition:opacity .15s,transform .25s cubic-bezier(.2,1.4,.4,1),visibility 0s .2s}
.mk:hover .mk-amt,.mk.open .mk-amt,.mk:focus-within .mk-amt{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .25s cubic-bezier(.2,1.4,.4,1),visibility 0s}
.mk.done .mk-amt{opacity:0;visibility:hidden}
.mk-amt .label{font-size:clamp(9px,2.2cqw,11px);color:#5B5548}
.mk-amt button{height:100%;padding:0 2cqw;background:#141414;color:var(--paper);font-family:var(--data);font-weight:800;font-size:clamp(10px,2.5cqw,13px);box-shadow:.5cqw .5cqw 0 #000;cursor:pointer}
.mk-amt button[aria-pressed=true]{background:var(--yellow);color:#0B0B0B;outline:2px solid #000}
.mk-amt button:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
.mk-pay{margin-left:auto;font-family:var(--data);font-weight:800;font-size:clamp(9.5px,2.3cqw,12px);letter-spacing:.04em;text-transform:uppercase;color:#141414;white-space:nowrap}
.mk-cf{justify-content:space-between;padding:0 2cqw;background:var(--paper);outline:2px solid #0B0B0B;box-shadow:.9cqw .9cqw 0 #000;color:#0B0B0B}
.mk.done .mk-cf{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1),visibility 0s}
.mk-cf .label{color:#5B5548;font-size:clamp(9px,2.1cqw,11px);white-space:nowrap}
.mk-cf b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(12px,3.4cqw,17px);text-transform:uppercase;white-space:nowrap}
.mk-cf .nudge{flex-basis:auto;font-size:clamp(9px,2.1cqw,11px)}
body.dark-cards .mk-amt .label{color:#A1A1A1}body.dark-cards .mk-pay{color:var(--paper)}

/* ── go deeper: art-led tiles ── */
.deeper{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:64px}
.dp{display:flex;flex-direction:column;color:inherit;transition:transform .2s cubic-bezier(.2,1.3,.4,1);animation:dpin .5s cubic-bezier(.2,1.35,.4,1) backwards}
.dp:nth-child(2){animation-delay:.07s}.dp:nth-child(3){animation-delay:.14s}
@keyframes dpin{from{opacity:0;transform:translateY(22px)}}
.dp-i{display:block;filter:drop-shadow(8px 8px 0 #000);transition:filter .2s}
.dp-c{display:block;aspect-ratio:4/3;overflow:hidden;background:#000;clip-path:polygon(0 12px,16% 4px,30% 11px,47% 0,63% 9px,80% 2px,100% 10px,100% calc(100% - 4px),70% 100%,40% calc(100% - 3px),0 100%)}
.dp-c img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.dp:hover{transform:translate(-3px,-5px)}.dp:hover .dp-i{filter:drop-shadow(11px 12px 0 #000)}.dp:hover .dp-c img{transform:scale(1.07)}
.dp:active{transform:translate(2px,2px)}
.dp:focus-visible{outline:3px solid #FFA800;outline-offset:6px}
.dp-t{display:flex;flex-direction:column;gap:6px;padding:20px 4px 0}
.dp-t small{font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.dp-t b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:32px;line-height:.92;text-transform:uppercase;color:var(--paper)}
.dp-s{font-family:var(--read);font-size:16px;line-height:1.4;color:#cfc8b6}
.dp-go{display:flex;align-items:center;gap:12px;margin-top:10px}
.dp-go span{font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.dp-go svg{width:40px;height:36px;transition:transform .2s cubic-bezier(.2,1.5,.4,1)}
.dp:hover .dp-go svg{transform:translateX(5px)}

@media (max-width:1180px){
 .deeper{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .dp-t b{font-size:26px}
 .wp{grid-template-columns:minmax(0,1fr) 220px}
}
@media (max-width:760px){
 .fp .mlt{top:-11px;left:12px}.fp .mrc{top:-15px;right:10px}
 .duelx .mlt{top:-11px;left:14px}.duelx .mrc{top:-15px;right:12px}
 .duelx .livetag{--lt-w:104px!important}
 .slat2{height:62px}.slat2 b{font-size:22px}.slat2 .sl-l{padding-left:18px}
 .pk2{gap:14px}
 .dx-pick .slat2 .you{height:32px;padding:0 22px 3px 16px}.dx-pick .slat2 .you b{font-size:15px}
 .dx-rc,.dx-pick[data-mine=lower] .dx-rc{top:72px;left:0;right:0;max-width:none}
 .dx-pick.rc-on .pkp{visibility:hidden}
 .rc-f{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:end;gap:8px 12px;height:auto;padding:9px 14px 10px}
 .rc-i:nth-child(2){align-items:flex-end}
 .rc-i b{font-size:18px}
 .rc-j{grid-column:1 / -1;margin:0;padding:0;display:block}
 .pkp{flex-direction:column;align-items:flex-start;gap:4px}
 .pkp .qpayout{align-items:flex-start}
 .fp .fp-ch{height:230px}
 .tape{margin:-12px -4px 18px}
 .fp.stocks .fp-top{grid-template-columns:auto minmax(0,1fr)}
 .bell{grid-column:1 / -1}.bell .notch{width:150px;height:48px;font-size:16px}
 .fp-mid.st{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
 .fp-mid.st .r{text-align:left}
 .mark{width:78px;height:38px}
 .gs{font-size:13px;padding:0 10px;height:34px}
 .sb-svg{width:100%}
 .fld{margin:6px 0 0}
 .fld-ev{font-size:15px;padding:4px 10px}
 .wp{grid-template-columns:minmax(0,1fr);gap:12px}
 .fp-foot{flex-direction:column;align-items:flex-start}
 .fp-foot .dlive{width:100%}
 .deeper{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:80%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:30px -18px 0;padding:0 18px 18px;scrollbar-width:none}
 .deeper::-webkit-scrollbar{display:none}
 .dp{scroll-snap-align:start}
 .dp-t b{font-size:24px}.dp-s{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
 .fp.in::after{display:none}.fp.in{animation:none}
 .tape-in{animation:none}
 .bell.ring .notch,.fld-ev.on,.slat2 .you{animation:none!important}
 .fld-ev.on{opacity:1}
 .mk,.mk-sl,.mk-amt,.mk-cf{transition:none}
}

@container (max-width:420px){.mk-cf .label{display:none}.mk-cf{gap:6px}}

/* ═════ calmer shapes, no box in box (2026-10-02, the owner: "nu poti citi bine", "box in box") ═════ */
/* how it works: the three framed cards stand on the page, not inside a framed strip (landing.css's :where(.arc) .steps) */
.arc .steps{background:none;border:0;box-shadow:none}
/* the round's chart: the round panel is the plate, the chart's own torn plate inside it doubled the edge */
.fp .lc-sh,.fp .lc-face{display:none}
@media (max-width:660px){
 /* the torn panel at phone width: the quiet cut, as landing's .dcard already does */
 .arc .mface i,.arc .mface::before{clip-path:var(--clip-quiet)}
 /* the stat plates: --clip-panel bites 14 to 18px into a 115px plate and ate the labels' first letters */
 .recs.mini .rf{clip-path:var(--clip-quiet);padding:20px 14px 14px}
}