/* v88 · Brand & socials: coverflow carousels and App Store / Google Play
   phones on the same wx-stage panel as Wallet / Orderbook (--stage #F6F6F6
   in light, dark equivalent). Center slide is sharp (no will-change / 3D /
   filter after settle). Mascot construction and reserved xSAUCE slot unchanged
   in content. Only Brand additions; everything else is wallet.css + case.css. */
.cs-br .wc-hero h1 .cs-hl{display:block}
.cs-br .wc-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-br .wc-end .wc-links{margin-left:auto}
.cs-br .wxs{align-items:start}

/* Beat wallet.css .wxs .wx-stage{height:calc(phw*852/393 + 112px)}.
   Same token, radius, and padding as the other case stages. */
.cs-br .wxs .wx-stage.bs-stage{
  height:auto;
  aspect-ratio:auto;
  padding:56px 32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Coverflow. Modest 3D (rotateY ≤26deg, translateZ -100) so neighbors stay
   rounded rectangles, not trapezoids. Site --r is clipped on every slide.
   Blur follows the site scroll-out glass curve, capped smaller (~3.2px)
   and applied to the image inside the clip. */
.bs-car{position:relative;min-width:0;outline:none}
.bs-car:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.bs-track{
  position:relative;
  overflow:visible; /* stage already clips; keep neighbors in the padding */
  width:100%;
  height:var(--stage-h,480px);
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.cs-full .bs-track{--stage-h:520px}
.bs-strip{
  position:absolute;left:50%;top:50%;
  width:0;height:0;
  /* Perspective lives on the strip origin (the track center), not the
     track's left edge, so +d and -d project at the same size. */
  perspective:1400px;
  perspective-origin:0 0;
  /* v88 · flat, not preserve-3d: each slide still gets the strip's
     perspective, but slides are painted by z-index instead of being
     depth-sorted / split where their rotated planes cross mid-snap. */
  transform-style:flat;
}
.bs-slide{
  position:absolute;left:0;top:0;
  width:calc(var(--stage-h,480px) * var(--ar)); /* JS caps at 68% of the track */
  transform-origin:50% 50%;
  border-radius:var(--r);
  overflow:hidden;
  clip-path:inset(0 round var(--r));
  -webkit-clip-path:inset(0 round var(--r));
  /* will-change and backface-visibility are set only on moving neighbors
     in JS; leaving them on the settled center rasterizes it blurry at dpr 2. */
  -webkit-user-drag:none;
}
.bs-slide img{
  display:block;width:100%;height:auto;
  aspect-ratio:var(--ar);
  border-radius:var(--r);
  pointer-events:none;
  -webkit-user-drag:none;user-select:none;
}
.bs-nav{display:flex;gap:4px;margin-top:16px}
.bs-prev,.bs-next{
  appearance:none;border:0;background:none;padding:0;
  width:36px;height:36px;display:inline-grid;place-items:center;
  color:var(--mute);cursor:pointer;
  transition:color 180ms var(--out),opacity 180ms var(--out);
}
.bs-prev:hover,.bs-next:hover{color:var(--fg)}
.bs-prev:disabled,.bs-next:disabled{opacity:.3;cursor:default}
.bs-prev:focus-visible,.bs-next:focus-visible,.bs-pause:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.bs-pause{
  appearance:none;border:0;padding:0;
  width:32px;height:32px;border-radius:50%;
  display:inline-grid;place-items:center;
  margin:2px 0 2px 4px;
  color:var(--mute);background:transparent;
  box-shadow:inset 0 0 0 1px var(--line);
  cursor:pointer;
  transition:color 180ms var(--out),background-color 180ms var(--out);
}
.bs-pause:hover{color:var(--fg)}

/* App Store / Google Play. Refined product-shot size (~560px at 1440),
   centered in the case stage with the usual 56px padding. Exact screenshot
   ARs so object-fit:cover does not crop UI. */
.bs-reel{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;width:100%}
.bs-seg{display:flex;gap:2px;align-items:center}
.bs-seg-btn{
  appearance:none;border:0;background:none;cursor:pointer;
  padding:6px 10px;color:var(--mute);
  font:inherit;line-height:1.2;
  transition:color 180ms var(--out);
}
.bs-seg-btn[aria-pressed="true"]{color:var(--fg)}
.bs-seg-btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.cs-br .wxs .wx-stage.bs-reel-stage{
  --ph-h:560px;
  --bezel:3px;
  --stage-pad-y:56px;
  --stage-pad-x:32px;
  position:relative;
  width:100%;
  padding:var(--stage-pad-y) var(--stage-pad-x);
  min-height:calc(var(--ph-h) + 2 * var(--bezel) + 2 * var(--stage-pad-y));
}
.bs-phone{
  --ar:calc(1290 / 2796);
  --bezel:3px;
  --r-out:clamp(22px, 8%, 32px);
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(100%, calc(var(--ph-h) * var(--ar) + 2 * var(--bezel)));
  height:auto;
  padding:var(--bezel);
  border-radius:var(--r-out);
  background:#0a0a0c;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms var(--out);
  box-sizing:border-box;
}
.bs-phone[data-phone="gp"]{--ar:calc(9 / 16)}
.bs-phone.is-on{opacity:1;pointer-events:auto}
.bs-phone-screen{
  position:relative;
  width:100%;
  aspect-ratio:var(--ar);
  height:auto;
  overflow:hidden;
  border-radius:calc(var(--r-out) - var(--bezel));
  background:#05060a;
}
.bs-phone-screen img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;-webkit-user-drag:none;
  will-change:transform,opacity;
}

/* 1:1 loops (Larry, SAUCE → xSAUCE) on the case stage. */
.bs-vid{
  width:100%;aspect-ratio:1/1;
  background:#000;border-radius:var(--r);overflow:hidden;
}
.bs-vid video{
  display:block;width:100%;height:100%;
  aspect-ratio:1/1;object-fit:cover;vertical-align:top;
}

/* Mascot: construction (grid + measured eyes) then the official containers. */
/* v97 · Larry loop on the stage above the construction and containers. */
.cs-br [data-ms] .wxs-m{gap:36px}
.ms{display:flex;flex-direction:column;gap:36px;min-width:0}
.ms-build{position:relative;width:100%;aspect-ratio:1}
.ms-build .ms-svg{display:block;width:100%;height:auto;color:var(--fg)}
.ms-build .ms-photo{
  /* 254px isolated square (2px pad) placed at (-2,-2) in a -50..300 viewBox */
  position:absolute;left:calc(48 / 350 * 100%);top:calc(48 / 350 * 100%);
  width:calc(254 / 350 * 100%);height:calc(254 / 350 * 100%);
  object-fit:contain;pointer-events:none;
  opacity:0;transform:scale(.98);
}
.ms-grid{opacity:0}
.ms-axis{stroke-width:0.7}
.ms-frame,.ms-eyes{opacity:0;transform:scale(.98);transform-origin:50% 50%}
.ms[data-on] .ms-grid{opacity:.2;transition:opacity 700ms var(--out)}
.ms[data-on] .ms-frame{
  opacity:.45;transform:none;
  transition:opacity 700ms 180ms var(--out),transform 700ms 180ms var(--out);
}
.ms[data-on] .ms-eyes{
  opacity:1;transform:none;
  transition:opacity 700ms 400ms var(--out),transform 700ms 400ms var(--out);
}
.ms[data-on] .ms-photo{
  opacity:1;transform:none;
  transition:opacity 800ms 780ms var(--out),transform 800ms 780ms var(--out);
}
.ms-cons{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
.ms-cons li{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;transform:translate3d(0,8px,0);
}
.ms[data-on] .ms-cons li{
  opacity:1;transform:none;
  transition:opacity 600ms var(--out),transform 600ms var(--out);
}
.ms[data-on] .ms-cons li:nth-child(1){transition-delay:1100ms}
.ms[data-on] .ms-cons li:nth-child(2){transition-delay:1180ms}
.ms[data-on] .ms-cons li:nth-child(3){transition-delay:1260ms}
.ms[data-on] .ms-cons li:nth-child(4){transition-delay:1340ms}
@supports (transition-delay:calc(1ms * sibling-index())){
  .ms[data-on] .ms-cons li{transition-delay:calc(1100ms + (sibling-index() - 1)*80ms)}
}
.ms-cons img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.ms-cons span{color:var(--mute)}

@media (max-width:900px){
  .cs-br .wxs .wx-stage.bs-reel-stage{--ph-h:480px}
  .cs-full .bs-track{--stage-h:440px}
}
@media (max-width:640px){
  .cs-br .wc-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .cs-br .wxs .wx-stage.bs-stage{padding:32px 0}
  .bs-prev,.bs-next{display:none} /* 390 / mobile: swipe snaps one, peek remains; pause stays */
  .bs-track{--stage-h:340px}
  .cs-full .bs-track{--stage-h:340px}
  .cs-br .wxs .wx-stage.bs-reel-stage{--ph-h:400px;--stage-pad-y:32px;--stage-pad-x:0px}
  .cs-br [data-ms] .wxs-m{gap:28px}
  .ms{gap:28px}
  .ms-cons{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
}
@media (prefers-reduced-motion:reduce){
  .bs-slide,.bs-slide img,.bs-phone,.bs-phone-screen img{transition:none!important}
  .ms-grid{opacity:.2}
  .ms-frame{opacity:.45;transform:none}
  .ms-eyes,.ms-photo,.ms-cons li{opacity:1;transform:none;transition:none}
}

/* v100 · two-paragraph captions (xSAUCE: Gabe line + official docs line) */
.cs-br .wxs-t p+p{margin-top:12px}