/* Button */
.cs-btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-stretch:var(--stretch-wide);font-weight:var(--weight-semibold);font-size:var(--text-sm);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-1);background:none;border:1px solid transparent;border-radius:var(--r-sm);padding:0 var(--sp-4);height:40px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.cs-btn:active{transform:translateY(1px)}
.cs-btn:disabled{opacity:.4;pointer-events:none}
.cs-btn--solid{background:var(--suit,var(--text-1));color:var(--on-accent)}
.cs-btn--solid:hover{box-shadow:0 0 20px rgba(var(--suit-rgb,244,244,248),.45);filter:brightness(1.08);color:var(--on-accent)}
.cs-btn--outline{border-color:rgba(var(--suit-rgb,244,244,248),.45)}
.cs-btn--outline:hover{background:rgba(var(--suit-rgb,244,244,248),.12);border-color:rgba(var(--suit-rgb,244,244,248),.8);box-shadow:0 0 20px rgba(var(--suit-rgb,244,244,248),.25);color:var(--text-1)}
.cs-btn--ghost{color:var(--text-2)}
.cs-btn--ghost:hover{color:var(--text-1);background:rgba(244,244,248,.06)}
.cs-btn--sm{height:32px;font-size:var(--text-xs);padding:0 var(--sp-3)}
.cs-btn--lg{height:48px;font-size:var(--text-md);padding:0 var(--sp-5)}
.cs-btn__arrow{transition:transform var(--dur-fast) var(--ease-out)}
.cs-btn:hover .cs-btn__arrow{transform:translateX(3px)}
/* Badge */
.cs-badge{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--weight-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--suit,var(--text-2));border:1px solid rgba(var(--suit-rgb,124,124,138),.5);border-radius:var(--r-full);padding:4px 10px 4px 9px;background:rgba(var(--suit-rgb,124,124,138),.08)}
.cs-badge__dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;flex:none}
.cs-badge--live .cs-badge__dot{animation:cs-pulse 2s var(--ease-out) infinite}
@keyframes cs-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Input */
.cs-input{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-1);background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-sm);height:40px;padding:0 var(--sp-3);width:100%;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.cs-input::placeholder{color:var(--text-3)}
.cs-input:hover{border-color:var(--line-3)}
.cs-input:focus{outline:none;box-shadow:none;border-color:rgba(var(--suit-rgb,244,244,248),.7)}
.cs-input:focus-visible{box-shadow:0 0 0 3px rgba(var(--suit-rgb,244,244,248),.18)}
/* Suit glyph */
.cs-suit{color:var(--suit,var(--text-1));line-height:1;display:inline-block;font-variant-emoji:text}
.cs-suit--glow{text-shadow:0 0 18px rgba(var(--suit-rgb,244,244,248),.55),0 0 60px rgba(var(--suit-rgb,244,244,248),.3)}
/* Wordmark */
.cs-wordmark{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-1);white-space:nowrap;line-height:1}
.cs-wordmark__dot{color:var(--gold)}
.cs-wordmark__soft{color:var(--gold)}
/* Medallion */
.cs-medallion{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;text-align:center;border-radius:50%;background:radial-gradient(circle at 50% 36%,var(--bg-2),var(--bg-0) 74%);border:1px solid var(--line-2);box-shadow:0 0 0 10px rgba(11,11,16,.9),var(--shadow-3)}
.cs-medallion::before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid var(--line-1);pointer-events:none}
.cs-medallion__pips{display:flex;gap:.55em;font-size:.72em;line-height:1}
.cs-medallion__pips span{color:var(--suit);transition:text-shadow var(--dur-med) var(--ease-out)}
/* Hovering/focusing a door lights up its matching pip in the center medallion */
.cs-door[data-suit="spade"]:hover~.cs-medallion-anchor span[data-suit="spade"],.cs-door[data-suit="spade"]:focus-within~.cs-medallion-anchor span[data-suit="spade"],.cs-door[data-suit="diamond"]:hover~.cs-medallion-anchor span[data-suit="diamond"],.cs-door[data-suit="diamond"]:focus-within~.cs-medallion-anchor span[data-suit="diamond"],.cs-door[data-suit="heart"]:hover~.cs-medallion-anchor span[data-suit="heart"],.cs-door[data-suit="heart"]:focus-within~.cs-medallion-anchor span[data-suit="heart"],.cs-door[data-suit="club"]:hover~.cs-medallion-anchor span[data-suit="club"],.cs-door[data-suit="club"]:focus-within~.cs-medallion-anchor span[data-suit="club"]{text-shadow:0 0 10px rgba(var(--suit-rgb),.9),0 0 22px rgba(var(--suit-rgb),.5)}
.cs-medallion__mark{font-size:.92em}
.cs-medallion__strap{font-family:var(--font-mono);font-size:.52em;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-2)}
/* Count ticker */
.cs-ticker{display:inline-flex;align-items:baseline;gap:var(--sp-2);font-family:var(--font-mono);letter-spacing:var(--track-mono)}
/* Invisible left spacer equal to the value field so the label stays centered under the suit */
.cs-ticker::before{content:"";min-width:4ch;flex:none}
.cs-ticker__label{font-size:var(--text-2xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-2)}
.cs-ticker__val{font-size:var(--text-sm);color:var(--suit,var(--text-1));font-weight:var(--weight-medium);min-width:4ch;text-align:left;font-variant-numeric:tabular-nums}
/* Product door (segment) */
.cs-door{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);text-align:center;padding:var(--sp-7) var(--sp-5);min-height:320px;color:var(--text-1);text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;overflow:hidden;background-color:var(--bg-0);background-image:radial-gradient(ellipse 66% 50% at 50% 42%,rgba(var(--suit-rgb),.24),rgba(var(--suit-rgb),.07) 56%,transparent 74%);transition:opacity var(--dur-med) var(--ease-out)}
.cs-door::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 66% 50% at 50% 42%,rgba(var(--suit-rgb),.17),transparent 68%);opacity:0;transition:opacity var(--dur-med) var(--ease-out);pointer-events:none}
.cs-door:hover::after,.cs-door:focus-within::after{opacity:1}
/* Radiate: the suit lit from behind.
   This used to be an ellipse, which meant the glow and the watermark were two
   unrelated shapes sitting on top of each other — a coloured wash that happened
   to have a suit somewhere in it. It is now the GLYPH ITSELF, blurred, breathing
   underneath the crisp watermark: light with the shape of the thing casting it.

   The blur is in em, not px, so it tracks the glyph. The font-size changes by a
   factor of two between desktop and touch, and a fixed radius would be a halo at
   one size and a smudge at the other.

   Colour carries its own alpha rather than leaning on the keyframes alone; a
   solid fill driven straight off the old gradient's curve came out four times
   too hot.

   The breathing never scales below 1. It used to run 0.6 -> 1.06, which was
   fine while the watermark was 7% opaque and the halo showed through it — but
   the watermark is opaque now, so anything smaller than the glyph is hidden
   completely behind it and the glow would blink out rather than dim. Staying
   just over 1 means the light always rims the shape: a tight neon edge at rest,
   a wide bloom at the peak. */
.cs-door::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;line-height:1;
  font-size:min(52vw,74vh);color:rgba(var(--suit-rgb),.85);
  /* Three passes, all following the glyph's own alpha: a soft core, a tight
     halo, then a wide bloom. drop-shadow is doing the work box-shadow cannot —
     it takes the shape of what it is behind rather than of the element's box. */
  filter:blur(.035em) drop-shadow(0 0 .05em rgba(var(--suit-rgb),.55)) drop-shadow(0 0 .12em rgba(var(--suit-rgb),.35));
  animation:cs-radiate 6s ease-in-out infinite;will-change:opacity,transform}
.cs-door[data-suit="spade"]::before{content:"\2660\FE0E"}
.cs-door[data-suit="diamond"]::before{content:"\2666\FE0E";animation-delay:-1.6s}
.cs-door[data-suit="heart"]::before{content:"\2665\FE0E";animation-delay:-3.2s}
.cs-door[data-suit="club"]::before{content:"\2663\FE0E";animation-delay:-4.8s}
@keyframes cs-radiate{0%,100%{opacity:.30;transform:scale(1.02)}50%{opacity:.72;transform:scale(1.20)}}
.cs-door:hover{color:var(--text-1)}
.cs-door:focus-within{outline:none;box-shadow:inset 0 0 0 2px var(--suit)}
.cs-door__suit{display:none}
.cs-door:hover .cs-door__suit,.cs-door:focus-within .cs-door__suit{transform:translateY(-6px)}
.cs-door__ticker{opacity:.45;transition:opacity var(--dur-fast) var(--ease-out)}
.cs-door:hover .cs-door__ticker,.cs-door:focus-within .cs-door__ticker{opacity:1}
.cs-door__name{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-bold);font-size:clamp(26px,2.6vw,40px);letter-spacing:var(--track-wide);text-transform:uppercase;line-height:var(--leading-tight);color:var(--text-1)}
.cs-door__tag{font-size:var(--text-md);color:var(--text-2);max-width:36ch}
.cs-door__cta{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font-family:var(--font-display);font-stretch:var(--stretch-wide);font-weight:var(--weight-semibold);font-size:var(--text-sm);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-1);border:1px solid rgba(var(--suit-rgb),.4);border-radius:var(--r-sm);padding:11px 20px;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.cs-door:hover .cs-door__cta{background:rgba(var(--suit-rgb),.13);border-color:rgba(var(--suit-rgb),.85);box-shadow:0 0 24px rgba(var(--suit-rgb),.25)}
.cs-door:hover .cs-btn__arrow{transform:translateX(3px)}
.cs-door__url{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--track-mono);color:var(--text-3);margin-top:var(--sp-1)}
.cs-door .cs-badge{margin-top:var(--sp-2)}
/* Coming-soon: big glowing label + huge see-through suit watermark */
.cs-door>*{position:relative;z-index:1}
/* The suit is a SOLID shape, and the light is strictly behind it.
   It used to be 7% opaque, which meant the halo underneath showed straight
   through it and the whole thing read as one soft gradient blob rather than a
   lit form. Being opaque is what separates the two: the glyph is a flat single
   colour, and the only glow you see is what spills past its edge.

   color-mix does the flattening — a suit tint already composited against the
   door, so it is one opaque colour rather than a transparent one. The rgba()
   above it is the fallback for engines without color-mix; they get the old
   see-through look rather than a broken one.

   Intensity now rides on the mix percentage instead of opacity, because
   opacity is what has to stay at 1 for any of this to work. */
.cs-door__watermark{--wm-mix:30%;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1;opacity:1;pointer-events:none;z-index:1;text-shadow:none;
  color:rgba(var(--suit-rgb),.30);
  color:color-mix(in srgb, var(--suit) var(--wm-mix), var(--bg-0));
  transition:color var(--dur-med) var(--ease-out)}
/* Desktop: shrink the watermark so the whole suit fits inside its quadrant (no bleed/clip) */
@media(min-width:841px){.cs-door__watermark{font-size:min(30vw,46vh)!important}
/* Round (circular) glow on desktop instead of the wide ellipse */
.cs-door{background-image:radial-gradient(ellipse 40vh 30vh at 50% 42%,rgba(var(--suit-rgb),.24),rgba(var(--suit-rgb),.07) 48%,transparent 66%)}
.cs-door::after{background:radial-gradient(ellipse 40vh 30vh at 50% 42%,rgba(var(--suit-rgb),.17),transparent 62%)}
/* Match the watermark it sits behind, so the halo stays registered with the
   glyph rather than drifting off it as the quadrant changes shape. */
.cs-door::before{font-size:min(30vw,46vh)}}
.cs-door:hover .cs-door__watermark,.cs-door:focus-within .cs-door__watermark{--wm-mix:42%}
.cs-door__math{position:absolute;inset:0;overflow:hidden;font-family:var(--font-mono);font-size:11px;line-height:2.2;letter-spacing:.08em;text-align:center;color:var(--suit);opacity:.22;pointer-events:none;z-index:0;word-spacing:.2em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-image:radial-gradient(ellipse 68% 78% at 50% 45%,transparent 60%,#000 88%);mask-image:radial-gradient(ellipse 68% 78% at 50% 45%,transparent 60%,#000 88%);transition:opacity var(--dur-med) var(--ease-out)}
.cs-door:hover .cs-door__math,.cs-door:focus-within .cs-door__math{opacity:.3}
/* Marquee rows: each scrolls left -> right forever, seamlessly (content duplicated) */
.cs-door__math{display:flex;flex-direction:column;justify-content:center}
.cs-door__math-row{white-space:nowrap;overflow:hidden;flex:none}
.cs-door__math-inner{display:inline-block;will-change:transform;animation-name:cs-math-scroll;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes cs-math-scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.cs-door__cards{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cs-door__card{position:absolute;bottom:-12px;width:30px;height:42px;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--suit);background:linear-gradient(180deg,rgba(244,244,248,.09),rgba(var(--suit-rgb),.06));border:1px solid rgba(var(--suit-rgb),.4);border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 12px rgba(var(--suit-rgb),.18);opacity:0;transform:translate(0,24px) scale(var(--cardScale,1)) rotate(var(--cardRot,0deg));animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;animation-name:none}
.cs-door:hover .cs-door__card,.cs-door:focus-within .cs-door__card{animation-name:cs-cardfloat}
.cs-door:hover .cs-door__card--outer,.cs-door:focus-within .cs-door__card--outer{animation-name:cs-cardfloat-outer}
@keyframes cs-cardfloat{0%{opacity:0;transform:translate(0,24px) scale(var(--cardScale,1)) rotate(var(--cardRot,0deg))}10%{opacity:.8}25%{transform:translate(calc(var(--driftX,0px)*0.3),-7vh) scale(var(--cardScale,1)) rotate(calc(var(--cardRot,0deg)*0.6))}42%{opacity:0;transform:translate(calc(var(--driftX,0px)*0.55),-13vh) scale(var(--cardScale,1)) rotate(calc(var(--cardRot,0deg)*1))}100%{opacity:0;transform:translate(calc(var(--driftX,0px)*0.55),-13vh) scale(var(--cardScale,1)) rotate(calc(var(--cardRot,0deg)*1))}}
@keyframes cs-cardfloat-outer{0%{opacity:0;transform:translate(0,24px) scale(var(--cardScale,1)) rotate(var(--cardRot,0deg))}10%{opacity:.8}30%{transform:translate(calc(var(--driftX,0px)*0.3),-9vh) scale(var(--cardScale,1)) rotate(calc(var(--cardRot,0deg)*0.6))}62%{opacity:.8;transform:translate(calc(var(--driftX,0px)*0.7),-19vh) scale(var(--cardScale,1)) rotate(calc(var(--cardRot,0deg)*1.2))}100%{opacity:0;transform:translate(var(--driftX,0px),-31vh) scale(var(--cardScale,1)) rotate(var(--cardRot,0deg))}}
.cs-door__tokens{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cs-door__token{position:absolute;top:0;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(var(--suit-rgb),.5),rgba(var(--suit-rgb),.12));border:2px solid rgba(var(--suit-rgb),.6);box-shadow:inset 0 0 0 2px rgba(11,11,16,.55),inset 0 0 0 4px rgba(var(--suit-rgb),.3),0 3px 10px rgba(0,0,0,.4),0 0 10px rgba(var(--suit-rgb),.25);opacity:0;transform:translate(0,-6vh) scale(var(--tokScale,1));animation-timing-function:cubic-bezier(.45,0,.9,1);animation-iteration-count:infinite;animation-fill-mode:both;animation-name:none}
.cs-door:hover .cs-door__token,.cs-door:focus-within .cs-door__token{animation-name:cs-tokenfall}
@keyframes cs-tokenfall{0%{opacity:0;transform:translate(0,-6vh) scale(var(--tokScale,1)) rotate(0deg)}20%{opacity:.9}55%{opacity:.55}100%{opacity:0;transform:translate(var(--drift,0px),16vh) scale(var(--tokScale,1)) rotate(160deg)}}
.cs-door__muck{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cs-door__muck-card{position:absolute;left:50%;top:46%;width:34px;height:48px;border-radius:5px;background:repeating-linear-gradient(45deg,rgba(var(--suit-rgb),.16) 0 3px,rgba(var(--suit-rgb),.05) 3px 6px);border:1px solid rgba(var(--suit-rgb),.5);box-shadow:inset 0 0 0 3px rgba(11,11,16,.45),0 6px 18px rgba(0,0,0,.5),0 0 12px rgba(var(--suit-rgb),.15);opacity:0;transform:translate(-50%,-50%) translate(var(--fromX,0),var(--fromY,0)) rotate(var(--fromR,0deg)) scale(.9);animation-timing-function:cubic-bezier(.2,.7,.25,1);animation-iteration-count:infinite;animation-fill-mode:both;animation-name:none}
.cs-door:hover .cs-door__muck-card,.cs-door:focus-within .cs-door__muck-card{animation-name:cs-muck}
@keyframes cs-muck{0%{opacity:0;transform:translate(-50%,-50%) translate(var(--fromX,0),var(--fromY,0)) rotate(var(--fromR,0deg)) scale(.9)}14%{opacity:.92}40%{opacity:.92;transform:translate(-50%,-50%) translate(var(--toX,0),var(--toY,0)) rotate(var(--toR,0deg)) scale(1)}82%{opacity:.92;transform:translate(-50%,-50%) translate(var(--toX,0),var(--toY,0)) rotate(var(--toR,0deg)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--toX,0),var(--toY,0)) rotate(var(--toR,0deg)) scale(1)}}
/* Desktop: bigger, clearer muck cards on the GTO door */
@media(min-width:841px){.cs-door__muck-card{width:52px;height:72px;border-color:rgba(var(--suit-rgb),.75)}}
.cs-door__odds{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cs-door__odd{position:absolute;transform:translate(-50%,-50%) scale(.85);font-family:var(--font-mono);font-size:13px;letter-spacing:.05em;color:var(--suit);text-shadow:0 0 10px rgba(var(--suit-rgb),.5);opacity:0;animation-timing-function:var(--ease-out);animation-iteration-count:infinite;animation-fill-mode:both;animation-name:none}
.cs-door:hover .cs-door__odd,.cs-door:focus-within .cs-door__odd{animation-name:cs-oddpop}
@keyframes cs-oddpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}18%{opacity:.85;transform:translate(-50%,-50%) scale(1)}70%{opacity:.85;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
/* Medallion pip hover drives the same door state as hovering the door itself (set by landing.js) */
.cs-door.is-hot::after{opacity:1}
.cs-door.is-hot{color:var(--text-1)}
.cs-door.is-hot .cs-door__suit{transform:translateY(-6px)}
.cs-door.is-hot .cs-door__ticker{opacity:1}
.cs-door.is-hot .cs-door__cta{background:rgba(var(--suit-rgb),.13);border-color:rgba(var(--suit-rgb),.85);box-shadow:0 0 24px rgba(var(--suit-rgb),.25)}
.cs-door.is-hot .cs-btn__arrow{transform:translateX(3px)}
.cs-door.is-hot .cs-door__watermark{--wm-mix:42%}
.cs-door.is-hot .cs-door__math{opacity:.3}
.cs-door.is-hot .cs-door__card{animation-name:cs-cardfloat}
.cs-door.is-hot .cs-door__card--outer{animation-name:cs-cardfloat-outer}
.cs-door.is-hot .cs-door__token{animation-name:cs-tokenfall}
.cs-door.is-hot .cs-door__muck-card{animation-name:cs-muck}
.cs-door.is-hot .cs-door__odd{animation-name:cs-oddpop}
.cs-medallion__pips span.is-hot{text-shadow:0 0 10px rgba(var(--suit-rgb),.9),0 0 22px rgba(var(--suit-rgb),.5)}
.cs-medallion__pips span{cursor:pointer;pointer-events:auto}
/* Medallion itself is hoverable (its anchor is pointer-events:none) — lights all four doors */
.cs-medallion{pointer-events:auto}
/* Hub grid */
.cs-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:1px;background:var(--line-1);flex:1}
.cs-medallion-anchor{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5}
/* The blur lives on ::before, not on the bar itself: backdrop-filter makes an
   element the containing block for its fixed descendants, and the language
   toggle inside this bar has to stay fixed to the VIEWPORT on desktop. */
.cs-topbar{display:none;align-items:center;justify-content:center;padding:14px var(--sp-4);border-bottom:1px solid var(--line-1);position:sticky;top:0;z-index:10}
.cs-topbar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(11,11,16,.88);backdrop-filter:blur(8px);pointer-events:none}
@media(max-width:840px){.cs-grid{grid-template-columns:1fr}.cs-door{min-height:60vh}.cs-topbar{display:flex}.cs-medallion-anchor{display:none}
/* Touch has no hover — keep each door's ambient suit animation always running */
.cs-door__card{animation-name:cs-cardfloat}.cs-door__card--outer{animation-name:cs-cardfloat-outer}.cs-door__token{animation-name:cs-tokenfall}.cs-door__muck-card{animation-name:cs-muck}.cs-door__odd{animation-name:cs-oddpop}
/* Only animate while the door is on screen (landing.js toggles .is-visible) */
.cs-door__card,.cs-door__token,.cs-door__muck-card,.cs-door__odd,.cs-door__math-inner,.cs-door::before{animation-play-state:paused}
.cs-door.is-visible .cs-door__card,.cs-door.is-visible .cs-door__token,.cs-door.is-visible .cs-door__muck-card,.cs-door.is-visible .cs-door__odd,.cs-door.is-visible .cs-door__math-inner,.cs-door.is-visible::before{animation-play-state:running}
/* No hover on touch — show each door's brighter (active) glow at rest */
.cs-door{background-image:radial-gradient(ellipse 70% 48% at 50% 40%,rgba(var(--suit-rgb),.34),rgba(var(--suit-rgb),.11) 54%,transparent 76%)}
.cs-door::after{opacity:1;background:radial-gradient(ellipse 70% 48% at 50% 40%,rgba(var(--suit-rgb),.19),transparent 68%)}
/* Dim unicode suit watermark behind the text, sized to keep the whole glyph (tip included) inside the square */
.cs-door__watermark{--wm-mix:38%;font-size:min(58vw,72vh)!important;line-height:1}
/* The halo tracks the watermark at this width too — see .cs-door::before. */
.cs-door::before{font-size:min(58vw,72vh)}
/* Mobile is always in the active presentation — show the counter at full opacity */
.cs-door__ticker{opacity:1}}
/* Footer */
.cs-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-1);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-3)}
.cs-footer a{color:var(--text-2)}
.cs-footer a:hover{color:var(--text-1)}
.cs-footer__nav{display:flex;gap:var(--sp-4);flex-wrap:wrap}
/* Entrance (fill backwards so hover-dim still wins after) */
.cs-enter{animation:cs-enter var(--dur-slow) var(--ease-out) backwards}
@keyframes cs-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ── The language toggle ──────────────────────────────────────────────────
   Kept byte-identical to the accounts hub's copy in hub/css/i18n.css, the way
   tokens/ is. The two surfaces place it differently on purpose — pinned
   top-right here, inside the bar there — so PLACEMENT stays local to each and
   only the appearance is shared. Copy the block, not the position.

   Both hooks are listed because the two pages set the state differently:
   landing.js toggles an .is-on class, the hub sets aria-pressed. Styling off
   both means neither page needs its JS touched to look the same.

   No caps tracking, unlike .cs-nav__btn beside it: 0.18em is a Latin device,
   and on 日本語 it pulls three characters apart far enough to cost the toggle
   real width in the account bar, which has none spare. */
.cs-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-full);background:rgba(11,11,16,.82);backdrop-filter:blur(8px)}
.cs-lang__btn{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--weight-medium);letter-spacing:var(--track-mono);line-height:1;color:var(--text-3);background:none;border:0;border-radius:var(--r-full);padding:5px 9px;cursor:pointer;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.cs-lang__btn:hover{color:var(--text-1)}
.cs-lang__btn[aria-pressed="true"],.cs-lang__btn.is-on{color:var(--bg-0);background:var(--text-1)}
.cs-lang__btn:focus-visible{outline:none;box-shadow:var(--ring)}
/* Part of the shared block: the toggle tightens at the same width on both
   surfaces, so it is the same control everywhere and not merely the same
   colours. */
@media(max-width:360px){.cs-lang__btn{padding:5px 7px}}
/* ── end of the shared block ────────────────────────────────────────────── */

/* Nav actions: the Accounts button and the language toggle ride together, top-right. */
.cs-nav__actions{position:fixed;top:10px;right:12px;z-index:30;display:flex;align-items:center;gap:8px}
/* A bordered pill, sized like the toggle beside it — a control, not a caption. */
.cs-nav__btn{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--weight-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-2);text-decoration:none;padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--r-full);background:rgba(11,11,16,.82);backdrop-filter:blur(8px);white-space:nowrap;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.cs-nav__btn:hover{color:var(--text-1);border-color:var(--line-3);background:rgba(244,244,248,.08)}
.cs-nav__btn:focus-visible{outline:none;box-shadow:var(--ring)}
/* Japanese: fall back to system JA faces (Archivo/Plex Mono carry no kana or kanji) */
html[lang="ja"]{--font-display:'Archivo','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic UI','Yu Gothic',Meiryo,'Noto Sans JP',system-ui,sans-serif;--font-body:'Archivo','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic UI','Yu Gothic',Meiryo,'Noto Sans JP',system-ui,sans-serif;--font-mono:'IBM Plex Mono','Hiragino Kaku Gothic ProN','Yu Gothic UI',Meiryo,'Noto Sans JP',ui-monospace,monospace}
/* Kana/kanji don't need the expanded display tracking, and shouldn't be letter-spaced apart */
html[lang="ja"] .cs-door__name{letter-spacing:.02em}
html[lang="ja"] .cs-ticker__label,html[lang="ja"] .cs-badge,html[lang="ja"] .cs-medallion__strap{letter-spacing:.08em}
html[lang="ja"] .cs-door__tag{line-height:1.7}
/* Mobile: the sticky bar becomes a real nav — brand left, language toggle right */
@media(max-width:840px){.cs-topbar{justify-content:flex-start}}
/* Secondary title under a door name (GTO Poker: + / FUNDAMENTALS) */
.cs-door__plus{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-bold);font-size:clamp(15px,1.3vw,20px);line-height:1;color:var(--suit,var(--text-2));margin:calc(var(--sp-1) * -1) 0 0}
.cs-door__sub{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-bold);font-size:clamp(14px,1.3vw,20px);letter-spacing:var(--track-wide);text-transform:uppercase;line-height:var(--leading-tight);color:var(--text-1);margin-top:calc(var(--sp-1) * -1)}
/* Suit glyphs must render identically in every language. Archivo/Plex Mono carry no
   suit pips, so they fall through to the next font in the stack — and under
   html[lang="ja"] that is a Japanese face, which draws ♠♦♥♣ with different shapes.
   Pin these to the Latin stack so the marks never change with the language. */
.cs-suit,.cs-medallion__pips span,.cs-door__card,.cs-door__watermark,.cs-door::before{font-family:'Archivo',system-ui,sans-serif}
.cs-door__math,.cs-door__math-inner{font-family:'IBM Plex Mono',ui-monospace,'SF Mono',monospace}
/* Brand block in the sticky bar: logo + wordmark */
.cs-brand__logo{display:block;width:30px;height:30px;flex:none;border-radius:7px}
.cs-topbar{gap:var(--sp-3)}
/* Desktop keeps the chrome-free 2x2 grid, so the brand sits in a pill mirroring the language toggle */
@media(min-width:841px){.cs-topbar{display:flex;position:fixed;top:10px;left:12px;width:auto;padding:7px 14px 7px 9px;border:1px solid var(--line-2);border-bottom:1px solid var(--line-2);border-radius:var(--r-lg);z-index:30}
.cs-topbar::before{background:rgba(11,11,16,.82)}}
/* Mobile: the bar is set exactly like the product apps' — blackjack.counter.
   software runs a 50px mark with 10px above and below it, a 21px wordmark at
   800/0.15em, and a 14.5px line under it at 600/0.17em. That arithmetic is
   what makes that bar 71px deep, and it is why the brand is the same size on
   every surface in the family.

   It does not shrink the brand on a phone, and neither does this: when the
   language toggle no longer fits beside a full-width wordmark the row wraps,
   which is what the toggle is doing inside the bar rather than floating over
   a reserved hole in it. */
@media(max-width:840px){.cs-topbar{flex-wrap:wrap;gap:8px;padding:10px 14px}
/* In the flow on a phone, so the row can wrap the cluster under the brand. */
.cs-nav__actions{position:static;margin-left:auto}
.cs-brand__logo{width:50px;height:50px;border-radius:12px}
/* 21px wherever it fits. Archivo is set expanded here (font-stretch 115%), so
   COUNTER.SOFTWARE runs about half again as wide as the condensed face the
   trainer uses at the same size — on a narrow phone it physically cannot sit
   beside a 50px mark. The clamp reaches the full 21px by ~415px and gives way
   only where the alternative is a wordmark hanging off the screen. */
.cs-topbar .cs-wordmark{font-size:clamp(15px,calc(6.4vw - 5.5px),21px)!important;font-weight:var(--weight-black);letter-spacing:.15em}
}


/* The hub's prose. Below the door grid, so the four-tile screen a visitor lands
   on is unchanged and this is what they reach by scrolling. Measured in the page
   rather than a hero: small type, generous line height, one column capped at a
   readable measure. */
.cs-about{padding:var(--sp-6,56px) var(--sp-5,32px);border-top:1px solid var(--line-1);background:var(--bg-0)}
.cs-about__h{margin:0 0 var(--sp-3,16px);max-width:40ch;font-size:var(--text-xl,24px);font-weight:700;line-height:1.2;letter-spacing:.01em;color:var(--text-1)}
@media (min-width:900px){.cs-about__h{font-size:30px}}
.cs-about__lede{margin:0 0 var(--sp-4,24px);max-width:72ch;font-size:var(--text-lg,19px);line-height:1.6;color:var(--text-1)}
.cs-about__list{margin:0 0 var(--sp-4,24px);padding:0;list-style:none;display:grid;gap:var(--sp-3,16px);max-width:72ch}
.cs-about__list li{margin:0;font-size:var(--text-md,16px);line-height:1.6;color:var(--text-2)}
.cs-about__who{margin:0;max-width:72ch;font-size:var(--text-md,16px);line-height:1.6;color:var(--text-3)}
@media (min-width:900px){.cs-about{padding:var(--sp-7,72px) var(--sp-6,56px)}.cs-about__list{grid-template-columns:1fr 1fr;gap:var(--sp-3,16px) var(--sp-5,32px);max-width:none}.cs-about__lede,.cs-about__who{max-width:72ch}}