/* Cade homepage, three categories. A port of the client's app homepage
   (frontend-v1 apps/web/app/landing: CadeLandingPageShell + CadeLandingMobileShell,
   cade-landing.module.css). The page is DRAWN the way theirs is: every layer sits at its
   Figma frame coordinate in frame units (--u). Desktop frame 1440 wide inside a 1240 canvas,
   phone frame 480 wide. Ours: the phone drawing runs up to 1023 (the footer's rung), in a column of at most
   600, so nothing under 1024 is a scaled-down desktop.
   The category parts live in /lib/category.css; this file is the frame and their page roles. */

body.hm{background:#0E0D0C;color:#EFE9D8;overflow-x:hidden}
/* the ground (CadeMotion.ground, /lib/motion.css) sits behind the drawings: the canvas is clear, the footer keeps its own ground */
.hfoot{position:relative;z-index:1}
.hm main{overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the one product header + footer (the chrome rule); the look as on /landing and /arcade */
#hnav{position:sticky;top:0;z-index:70}
.hnav .cnl-d{transition:background-color .25s}
.hnav.stuck .cnl-d{background:rgba(11,11,11,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hnav.stuck .cnl-m{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hfoot{background:#101010}
.hfoot svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
#footD{max-width:1440px}#footM{display:none}
@media (max-width:1023px){#footD{display:none}#footM{display:block;max-width:600px}}

/* ── the canvas: their .canvas, two drawings chosen in CSS (CadeLandingResponsiveShell) ── */
.canvas{container-type:inline-size;width:min(100%,1240px);margin:0 auto;background:none;color:#EFE9D8;overflow:hidden;position:relative}
.cv-phone{display:none}
@media (max-width:1023px){.cv-wide{display:none}.cv-phone{display:block;width:min(100%,600px)}}
.frame{--u:calc(100cqw / 1440);position:relative;width:100%;height:calc(2688.11 * var(--u));margin-top:calc(-88 * var(--u));isolation:isolate}
.mframe{--u:calc(100cqw / 480);--tmin:12px;position:relative;width:100%;height:calc(3504 * var(--u));margin-top:calc(-70 * var(--u));isolation:isolate}
.shift{position:absolute;left:0;width:100%;height:0}
.ab{position:absolute;margin:0;box-sizing:border-box}
.cap-note{width:min(100%,1240px);margin:0 auto 56px;padding:0 3.2%;box-sizing:border-box;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;line-height:1.5;color:rgba(255,255,255,.45)}
@media (max-width:1023px){.cap-note{width:min(100%,600px);padding:0 3.75%;margin-bottom:56px}}

/* ── their type roles (cade-landing.module.css), in the production faces:
      SHOUT Barlow Condensed 800 italic (as cade.market), CALL Futura PT Cond Medium (its only weight,
      never synthesised), READ Futura PT, DATA JetBrains Mono for numbers only ── */
.display{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;font-style:italic;line-height:normal;margin:0;white-space:nowrap}
.title{font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-style:oblique;font-synthesis:none;line-height:normal;margin:0;white-space:nowrap}
.kicker,.label{font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-style:normal;font-synthesis:none;line-height:normal;margin:0;white-space:nowrap;text-transform:uppercase}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;line-height:normal;margin:0;white-space:nowrap}
.contained{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cticker.title{font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-style:oblique}

/* ds.css gives .lift a headline text-shadow; here .lift is their lift group, and a black shadow under
   dark labels on colour plates is the "black text, black shadow" the owner rejects */
.hm .lift{text-shadow:none}

/* the header on the desktop drawing (961 to 1180): the four floors and the plate must not collide */
@media (min-width:961px) and (max-width:1180px){#hnav .cnl-nav{gap:26px}#hnav .cnl-nav span{font-size:26px}}

/* ── hit targets + lift (their .hit / .liftGroup, 1:1) ── */
.hit{position:absolute;appearance:none;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;pointer-events:auto;text-decoration:none}
.hit:focus-visible{outline:calc(3 * var(--u)) solid #FFA800;outline-offset:calc(3 * var(--u))}
.mframe .hit:focus-visible{outline-width:3px;outline-offset:3px}
.lift{position:absolute;inset:0;pointer-events:none;transition:transform 150ms cubic-bezier(0,0,.2,1)}
.liftSh{transition:transform 150ms cubic-bezier(0,0,.2,1)}
@media (hover:hover) and (pointer:fine){
  .lift:hover{transform:translate(calc(-2 * var(--u)),calc(-2 * var(--u)))}
  .lift:hover .liftSh{transform:translate(calc(3 * var(--u)),calc(3 * var(--u)))}
}
.lift:has(:focus-visible){transform:translate(calc(-2 * var(--u)),calc(-2 * var(--u)))}
.lift:has(:focus-visible) .liftSh{transform:translate(calc(3 * var(--u)),calc(3 * var(--u)))}
.lift:active{transform:translate(calc(3 * var(--u)),calc(3 * var(--u)))}
.lift:active .liftSh{transform:translate(calc(-5 * var(--u)),calc(-5 * var(--u)))}
/* the picks are CadeCategory.pick (/lib/category.css .cpick): their own lift, press and held states */
.roundPanel .cpick:focus-visible{outline-offset:3px}

/* ── hero art (CSS custom-property art in theirs; plain urls here) ── */
.bgAcc{position:absolute;left:0;top:calc(744 * var(--u));width:calc(1440 * var(--u));height:calc(1938 * var(--u));background:url(assets/bg-accents.svg) center/100% 100% no-repeat;pointer-events:none;z-index:-3}
.hp{position:absolute;background-position:center;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;z-index:-2}
.hp.sh{background-image:url(assets/hero-panel-shadow.svg)}.hp.fc{background-image:url(assets/hero-panel-face.svg)}
.hp.ol{background-image:url(assets/hero-panel-outline.svg)}.hp.tn{background-image:url(assets/hero-panel-tone.svg);z-index:auto}
.mpanel{z-index:-2}
.burst{position:absolute;background:repeating-conic-gradient(rgba(255,168,0,.055) 0 9deg,transparent 9deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);pointer-events:none;z-index:-1}
.halftone{position:absolute;background:url(assets/hero-halftone-fade.svg) center/100% 100% no-repeat;pointer-events:none;z-index:-1}
/* calmed 2026-10-03 (Scotty + the owner: "reduce the dots", "the bubbles sit over the text"): the conic burst sat
   behind the shout lines and the halftone fade beside the chart; both stay in the drawing, neither paints */
.burst,.halftone{display:none}
.sparks{position:absolute;background:url(assets/hero-sparks.svg) center/100% 100% no-repeat;pointer-events:none;z-index:-1}
.secStar{position:absolute;background:url(assets/section-star.svg) center/100% 100% no-repeat}
.secSpark{position:absolute;background:url(assets/arena-sparkle.svg) center/100% 100% no-repeat}
.badgeArt{position:absolute;background-position:center;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.glyph{position:absolute;display:block;overflow:visible}
.glyph>svg{width:100%;height:100%;display:block;overflow:visible}
.duelbox>.cduel{width:100%}
.rule{position:absolute;background:rgba(255,255,255,.1)}

/* the shout lines: the selected category reads full; the other two step back to paper at .4, no shadow,
   the glyph desaturated. Each line also switches the category (a mirror of the tablist, pointer only) */
.shoutLine{cursor:pointer}
.shoutLine .shFc{transition:color 240ms cubic-bezier(.2,.8,.2,1)}
.shoutLine .glyph{transition:filter 240ms cubic-bezier(.2,.8,.2,1),opacity 240ms cubic-bezier(.2,.8,.2,1)}
.shoutLine.off .shSh{visibility:hidden}
.shoutLine.off .shFc{color:rgb(239 233 216 / .4)!important}
.shoutLine.off .glyph{filter:grayscale(1);opacity:.55}
@media (hover:hover) and (pointer:fine){.shoutLine.off:hover .shFc{color:rgb(239 233 216 / .7)!important}.shoutLine.off:hover .glyph{opacity:.8}}

/* phone touch targets: a control drawn under 44px gets an invisible 44px hit band, the art stays as drawn */
.mframe .hit::after,.mframe .ctile::after,.mframe .ctk-play::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.cboard .cfilter .ntab{min-height:44px}

/* ── the phone stat rail: a column right of the shout, a row under it below 360 ── */
.mst{display:flex;flex-direction:column;gap:calc(14 * var(--u));color:#EFE9D8}
.mst span{display:flex;flex-direction:column;gap:calc(4 * var(--u));min-width:0}
.mst b{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:max(14px,calc(26 * var(--u)));font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.mst i{font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-style:normal;font-weight:500;font-synthesis:none;font-size:max(10px,calc(13 * var(--u)));letter-spacing:.1em;line-height:1;text-transform:uppercase;color:rgb(239 233 216 / 62%);white-space:nowrap}
.mst-row{display:none;flex-direction:row;gap:calc(28 * var(--u))}
.mst-row span{flex-direction:row;align-items:baseline;gap:calc(8 * var(--u))}
.mst-row b{font-size:max(13px,calc(22 * var(--u)))}
@media (max-width:359px){.mst-col{display:none}.mst-row{display:flex}}

/* ── the live round under the VS: the shared replay chart, in the panel's own ground ── */
/* no box: the line, its dashed LINE and labels sit on the panel itself (no box in a box) */
/* the round chart in its own house frame, as on /landing/v2 and the DS (owner 2026-10-02: like our chart) */
.chart.crc{min-height:0}
.mframe .chart .crc-lbl{font-size:11px}
.note{white-space:nowrap}

/* ── the board: the shared All Stars card in their seats ── */
.seat{position:absolute}
.board-swap{animation:hmFade 280ms cubic-bezier(.2,.8,.2,1) both}
@keyframes hmFade{from{opacity:0;transform:translateY(calc(8 * var(--u)))}to{opacity:1;transform:none}}
.frame .cfilter .ntab:focus-visible{outline:calc(3 * var(--u)) solid #FFA800;outline-offset:calc(3 * var(--u))}

/* ── the arena ── */
.cgame .ac-bar{--ac-drop:2px}
/* the phone game row runs on the panel's text column; a flatter box keeps both rows in the panel */
.cgame.flat{aspect-ratio:380/116}
.cgame.flat .cg-a,.cgame.flat .cg-b{top:19%;width:20cqw}
.cgame.flat .cg-sc{top:20%}
.cgame.flat .ac-bar{top:72%;--ac-h:7cqw}

/* ── motion: ?static and prefers-reduced-motion stop everything that moves ── */
/* the motion kit's parts on the round: the chip and the coins ride above the panel art; the TOO LATE tag
   sits over the pick plate it answers */
.frame>.cm-chip,.frame>.cm-coin,.frame>.cm-ring,.frame>.cm-flash,.mframe>.cm-chip,.mframe>.cm-coin,.mframe>.cm-ring,.mframe>.cm-flash{z-index:20}
.frame>.cm-tag,.mframe>.cm-tag{z-index:20}
.static .board-swap{animation:none}
.static .lt-dot{animation:none}
@media (prefers-reduced-motion:reduce){.ctk-play{display:none}}
.static .cduel .swap{animation:none}
@media (prefers-reduced-motion:reduce){
  .lift,.liftSh,.shoutLine{transition:none}
  .board-swap{animation:none}
}

/* the bell's verdict sits over the spent picks */
.verdict{pointer-events:none;z-index:6}

/* ── the phone arena: one swipe row (owner 2026-10-02: the stack made the page far too long). The scroller is the
      frame's width; each cell carries a panel at 86% with a peek of the next; it snaps, it never scales on scroll ── */
.mswipe{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:calc(18 * var(--u));scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.mswipe::-webkit-scrollbar{display:none}
.mswipe .mtrack{position:relative;left:0;top:0}
.mswipe .mcell{scroll-snap-align:start}
.mswipe .mcin{position:absolute;inset:0}
.mdots{display:flex;justify-content:center;gap:calc(8 * var(--u))}
.mdots i{display:block;width:calc(10 * var(--u));height:calc(4 * var(--u));min-height:3px;background:rgb(239 233 216 / 28%);transition:width 220ms cubic-bezier(.2,.8,.2,1),background-color 220ms}
.mdots i.on{width:calc(28 * var(--u));background:#FFA800}
@media (prefers-reduced-motion:reduce){.mdots i{transition:none}}