/* ==========================================================================
   Platform wheel section (scroll-driven).  Self-contained + scoped so it
   never touches the site's global classes: colliding names (.hero,
   .section-head, .grad, .tick, .dot, .dots) are renamed to pw-*, and the
   wheel's blue palette is scoped to .platforms.
   ========================================================================== */
@font-face{
  font-family:"Caveat";
  src:url("/assets/fonts/caveat-var.woff2") format("woff2");
  font-weight:600 700; font-style:normal; font-display:swap;
}

/* Scoped palette. These used to be a separate 4-stop blue of their own
   (#7ab3f5/#5c9ded/#2a6fbf/#00458f) — a second brand blue competing with the
   real one. Now aliased onto the sitewide tokens so this section can never
   drift again. --pw-blue-deep carries small text and the active dot, so it
   uses the AA-safe ink shade rather than --brand-blue (3.76:1). */
.platforms{
  --soft:#5b5b63; --faint:#9a9aa2;
  --pw-blue:var(--brand-blue); --pw-blue-bright:var(--blue-bright); --pw-blue-deep:var(--brand-blue-ink);
  /* text, so it takes the TEXT gradient — not --brand-gradient, which is the
     UI/decoration one. The two are not interchangeable; see styles.css. */
  --pw-grad:var(--brand-gradient-text);
  --hand:var(--brand-blue-ink);
  /* single source of truth for the copy column's vertical rhythm — name,
     status row and dot-nav all step by the SAME amount (was 12/10/22, a
     mismatched set with no logic to it) */
  --pw-copy-gap:14px;
}

.platforms{
  position:relative;
  /* Shorter runway → less dead scroll before How it works.
     ~30% shorter again (300vh → 210vh); JS reads this height at runtime
     (section.getBoundingClientRect()) so the wheel's pin length just follows. */
  height:210vh;
  background:
    radial-gradient(ellipse 50% 40% at 12% 50%, rgba(75,166,241,.08), transparent 70%),
    #fff;
  overflow:visible;
}

.platforms .sticky{
  position:sticky; top:0; height:100svh; overflow:visible;
  /* minmax(0,…) — without it, a plain `fr` track never shrinks below its
     content's own width. The wheel is a fixed --s×--s box (up to ~1220px)
     that bleeds out of its column via translateX + overflow:visible, but
     grid sizing still saw that full raw width as "content" and grew the
     wheel's track to fit it, silently starving .copy down to ~290px
     (hence the 4-line, tiny subtext). minmax(0,fr) caps each track at its
     fair fr-proportional share; the wheel still bleeds via its own
     transform/overflow trick exactly as before, just without hijacking
     the grid's space calculation. */
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); grid-template-rows:1fr;
  align-items:center; column-gap:0;
}

/* section headline — two lines, right-aligned */
.platforms .pw-head{
  grid-column:1 / -1; grid-row:1; z-index:6; text-align:right;
  /* Dropped lower so it clears the floating nav pill, and nudged in from the
     right so its right edge sits just left of the platform name below it. */
  padding:clamp(66px,11vh,128px) clamp(40px,6vw,88px) 0 16px;
  align-self:start; pointer-events:none;
}
.platforms .pw-head h2.pw-title,
.platforms .pw-head h2{
  margin:0; margin-inline-start:auto;
  font-size:clamp(41px,5.5vw,74px); font-weight:700; /* ~1.15× */
  letter-spacing:-.04em; line-height:.96; color:var(--ink);
  display:flex; flex-direction:column; align-items:flex-end;
  text-align:right; gap:0; max-width:none;
}
.platforms .pw-head .pw-title-line{
  display:block; white-space:nowrap;
}
.platforms .pw-head h2 .pw-grad{
  background:var(--pw-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* wheel */
.platforms .wheel-col{
  position:relative; grid-column:1; grid-row:1; height:100%;
  display:flex; align-items:center; justify-content:flex-end; overflow:visible;
}
.platforms .wheel{
  --s:min(1090px,117vmin); width:var(--s); height:var(--s); /* ~1.3× larger */
  position:relative; transform:translateX(-16%); margin-right:-6%;
  overflow:visible;
  /* MUST NOT shrink: .wheel-col is a flex row and the grid track is capped at
     minmax(0,fr). Without this, flexbox squishes the wheel's WIDTH (not its
     height) to fit the track, turning the circle into an oval. flex:none keeps
     it a true --s × --s square; it bleeds left via translateX + overflow. */
  flex:0 0 auto;
}
.platforms [data-logos]{position:absolute; inset:0; overflow:visible;}

/* Left feather — on .ring-clip, a STATIC wrapper around the ring/ticks ONLY.
   The ring's pixels dissolve to transparent toward the left; a mask, not a
   white overlay (an overlay leaves a visible cut wherever its band ends).
   Scope matters, learned the hard way:
     · not on .ring — it rotates, the feather would spin with it;
     · not on .wheel — that also masks the logos, and multiplying the active
       icon's big drop-shadow (a filtered, composited layer) clips the glow
       into a visible rectangle. The logos need no feather anyway: they carry
       their own distance-based opacity, and the active one seats far right.
   The fade starts exactly at the viewport's left edge: --wheel-cut (set on
   .wheel by platforms.js on load/resize, inherited here; .ring-clip shares
   .wheel's box exactly) is how far the wheel bleeds off-screen left, which
   swings from ~30% of the wheel @1920 to ~50% @1100 — no fixed stop could be
   soft at every width. On very wide displays the bleed approaches zero, so
   the JS floors the anchor at 12% of the wheel's width — just left of the
   ring's visible tangent (15%) — so the fade always spans the ring's left
   arc instead of pinning to the wheel's empty far-left. Anchoring to the
   measured cut guarantees alpha 0 AT the screen edge everywhere, then a
   fixed 260px on-screen ease-curved ramp
   up to solid. Fallback 0px = feather from the wheel's own left edge (mostly
   off-screen; harmless pre-JS). */
.platforms .ring-clip{
  position:absolute; inset:0; pointer-events:none;
  /* Ramp width is --feather-w (platforms.js: ~25% of the wheel, floored at
     200px) rather than a fixed 260px, so the fade stays proportionally soft as
     the wheel grows instead of getting relatively tighter on big screens.
     Nine stops on a smoothstep curve (t*t*(3-2t)) rather than six hand-picked
     ones: the extra stops kill the faint banding the old ramp showed across a
     wide, low-contrast gradient, and the eased shape has no corner at either
     end, so there is no point where the fade visibly "starts".
     platforms.js fades the ICONS on this identical curve — see featherAt(). */
  -webkit-mask-image:linear-gradient(to right,
    transparent var(--wheel-cut,0px),
    rgba(0,0,0,.043) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.125),
    rgba(0,0,0,.156) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.25),
    rgba(0,0,0,.316) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.375),
    rgba(0,0,0,.5)   calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.5),
    rgba(0,0,0,.684) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.625),
    rgba(0,0,0,.844) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.75),
    rgba(0,0,0,.957) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.875),
    #000 calc(var(--wheel-cut,0px) + var(--feather-w,260px)));
  mask-image:linear-gradient(to right,
    transparent var(--wheel-cut,0px),
    rgba(0,0,0,.043) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.125),
    rgba(0,0,0,.156) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.25),
    rgba(0,0,0,.316) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.375),
    rgba(0,0,0,.5)   calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.5),
    rgba(0,0,0,.684) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.625),
    rgba(0,0,0,.844) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.75),
    rgba(0,0,0,.957) calc(var(--wheel-cut,0px) + var(--feather-w,260px)*.875),
    #000 calc(var(--wheel-cut,0px) + var(--feather-w,260px)));
}

.platforms .ring{position:absolute; inset:15%; border-radius:50%; pointer-events:none;}
.platforms .ring-base{position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(17,17,19,.2);}
.platforms .ring-inner{position:absolute; inset:9%; border-radius:50%; border:1px solid rgba(17,17,19,.12);}
.platforms .ticks{position:absolute; inset:0; border-radius:50%;}
.platforms .pw-tick{position:absolute; inset:0; transform:rotate(var(--a));}
.platforms .pw-tick::after{
  content:""; position:absolute; top:-1px; left:50%; width:1.5px; height:13px;
  margin-left:-.75px; border-radius:1px; background:rgba(17,17,19,.24);
}
.platforms .pw-tick.is-major::after{height:18px; width:2px; margin-left:-1px; background:rgba(17,17,19,.36);}

/* logos — keep bitmaps sharp: no CSS/JS blur; avoid huge upscale factors */
.platforms .logo{
  --shadow:17,17,19;
  --logo-s:1; /* JS sets this; badge counter-scales so text stays sharp */
  position:absolute; left:50%; top:50%;
  /* Larger base so active state doesn’t 2×-upscale a small raster (that softens edges) */
  width:156px; height:156px; transform:translate(-50%,-50%); /* ~1.3× */
  z-index:4; display:grid; place-items:center; overflow:visible;
}
.platforms .logo-mark{
  width:100%; height:100%; display:grid; place-items:center;
  border-radius:29px;
  filter:none !important; /* never depth-blur the icon */
}
.platforms .logo img{
  width:100%; height:100%; display:block; object-fit:contain; border-radius:29px;
  /* Drop-shadow only — no blur() on the glyph itself */
  filter:drop-shadow(0 10px 10px rgba(var(--shadow),.8));
  pointer-events:none; user-select:none;
  /* Promote a stable layer; avoid intermediate low-res paints */
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
  image-rendering:auto;
}
.platforms .logo.is-active img{
  filter:drop-shadow(0 10px 10px rgba(var(--shadow),.8)) drop-shadow(0 16px 28px rgba(var(--shadow),.38));
}
/* Counter-scale cancels parent logo scale so type stays crisp at any wheel scale */
.platforms .logo-soon{
  /* Sits ON the icon's top-right corner (slight overlap) so it reads as a tag
     stuck to the icon, not floating away from it. Counter-scales the wheel's
     logo scale so the chip type stays crisp; the pivot is bottom-left (the
     corner it "hangs" from) so the flap swings the free end. */
  position:absolute; top:-6px; right:-10px; z-index:12;
  pointer-events:none; overflow:visible;
  transform:scale(calc(1 / max(var(--logo-s), 0.5)));
  transform-origin:0% 100%;
  filter:none !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.platforms .logo-soon .chip{
  display:inline-flex; align-items:center;
  padding:7px 16px 8px; border-radius:999px;
  background:#fff;
  border:2px solid rgba(18,134,230,.22);
  box-shadow:0 4px 13px rgba(18,134,230,.16), 0 1px 3px rgba(0,0,0,.07);
  white-space:nowrap;
  filter:none;
  backdrop-filter:none;
  /* base 12deg jaunty tilt + live flap driven by wheel velocity (JS --flap).
     Pivot at the attachment corner so it swings like a hanging tag. */
  transform-origin:0% 100%;
  transform:rotate(calc(12deg + var(--flap, 0deg)));
}
.platforms .logo-soon .hand{
  font-family:"Caveat",cursive; font-weight:700;
  font-size:25px; line-height:1; color:var(--hand);
  display:inline-flex; letter-spacing:.01em;
  filter:none; text-shadow:none;
}
.platforms .logo-soon .hand .ch{
  display:inline-block; opacity:0;
  transform:translateY(2px) scale(.95);
  filter:none;
}
.platforms .logo.is-active .logo-soon .hand .ch{
  animation:pw-ink-letter .16s var(--ease) forwards;
  animation-delay:calc(var(--i) * .04s);
}
.platforms .logo.soon-shown .logo-soon .hand .ch{
  opacity:1; transform:none; animation:none; filter:none;
}
.platforms .logo:not(.is-active):not(.soon-shown) .logo-soon .hand .ch{
  opacity:0; animation:none;
}
/* Always show soon badge clearly when logo is active (don't wait on ink anim) */
.platforms .logo.is-active .logo-soon .hand .ch,
.platforms .logo.soon-shown .logo-soon .hand .ch{
  opacity:1;
}

/* copy (right) */
.platforms .copy{
  position:relative; z-index:5; grid-column:2; grid-row:1; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end; text-align:right;
  /* Tightened ~30% (was clamp(100px,16vh,160px) / clamp(36px,5vh,64px)) — the
     old top padding left a big dead band under the title before the wheel
     content ever showed. Still enough clearance to clear .pw-head above it. */
  padding:clamp(70px,11vh,110px) clamp(36px,7vw,96px) clamp(25px,3.5vh,45px) 16px;
  box-sizing:border-box; gap:0;
}
.platforms .eyebrow{display:none; position:relative; height:1.35em; margin-bottom:10px; width:100%;}
.platforms .eyebrow-item{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end;
  font-size:clamp(16px,1.7vw,20px); font-weight:600; color:var(--soft); letter-spacing:-.015em;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease-soft),transform .45s var(--ease-soft);
  pointer-events:none; white-space:nowrap;
}
.platforms .eyebrow-item.is-active{opacity:1; transform:translateY(0);}

/* Platform name — rolls on the nav bar's spring (see .ni-label in styles.css):
   the incoming name enters from below and settles on --ease-spring while the
   outgoing name rolls up and out. Same feel as the nav section indicator. */
.platforms .pw-hero{
  position:relative; width:100%;
  min-height:clamp(62px,7vw,94px); height:clamp(62px,7vw,94px); /* ~1.3× */
  margin-bottom:var(--pw-copy-gap,14px);
  overflow:hidden;   /* clip the roll */
}
.platforms .pw-name{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:flex-end; gap:.22em;
  font-size:clamp(42px,5.2vw,68px); font-weight:700; letter-spacing:-.035em; /* ~1.3× */
  line-height:1.08; white-space:nowrap; color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:transform .5s var(--ease-spring), opacity .26s var(--ease);
  will-change:transform,opacity;
}
.platforms .pw-name.is-on{transform:translateY(0); opacity:1;}
.platforms .pw-name.is-down{transform:translateY(112%); opacity:0;}
.platforms .pw-name.is-up{transform:translateY(-112%); opacity:0;}
/* accent word — the same brand gradient as the site's other in-copy accents
   (.grad / --blue-grad, e.g. "forever"/"creator"): a single static span with
   no per-letter animation or will-change of its own (only the ancestor
   .pw-name animates), so the background-clip:text paint issue the old
   per-character typewriter hit here doesn't apply to this simpler markup. */
.platforms .pw-accent{
  background:var(--brand-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (prefers-reduced-motion:reduce){
  .platforms .pw-name{transition:none;}
}

@media (prefers-reduced-motion:reduce){
  .platforms .pw-hero{filter:none !important;}
}

.platforms .status-row{min-height:28px; height:auto; margin-bottom:var(--pw-copy-gap,14px); display:flex; align-items:center; justify-content:flex-end; overflow:visible;}
.platforms .status-live,.platforms .status-soon{display:none; align-items:center; gap:8px; line-height:1;}
.platforms .status-live.is-on,.platforms .status-soon.is-on{display:inline-flex;}
.platforms .status-live{font-size:13px; font-weight:600; color:#0d8a55; letter-spacing:-.01em;}
.platforms .status-live i{width:7px; height:7px; border-radius:50%; background:currentColor; animation:pw-pulse-dot 1.8s ease-in-out infinite;}

/* Plain "Coming soon" pill — right-aligned in the status row (the row is
   justify-content:flex-end). Replaced the handwritten Caveat version in the
   copy; the handwritten "soon!" is kept ONLY on the icon badge (.logo-soon). */
.platforms .status-soon{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:-.005em;
  color:var(--pw-blue-deep); background:var(--blue-wash);
  padding:5px 13px; border-radius:999px; white-space:nowrap; line-height:1.1;
}

@keyframes pw-ink-letter{
  0%{opacity:0; transform:translateY(5px) rotate(-6deg) scale(.8);}
  55%{opacity:1; transform:translateY(-1px) rotate(1.5deg) scale(1.04);}
  100%{opacity:1; transform:translateY(0) rotate(0deg) scale(1);}
}
@keyframes pw-pen-write{
  0%{left:0; opacity:0; transform:rotate(-28deg) translateY(2px);}
  8%{opacity:1;}
  92%{left:calc(100% - 6px); opacity:1; transform:rotate(-22deg) translateY(0);}
  100%{left:calc(100% - 4px); opacity:0; transform:rotate(-18deg) translateY(-1px);}
}
@keyframes pw-pulse-dot{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.45; transform:scale(.85);}}

.platforms .desc{
  max-width:48ch; margin-inline-start:auto; margin-top:0; font-size:clamp(16px,1.55vw,18.5px); line-height:1.5;
  font-weight:500; color:var(--soft); letter-spacing:-.01em; min-height:3.2em;
}
.platforms .pw-dots{display:flex; gap:10px; justify-content:flex-end; margin-top:var(--pw-copy-gap,14px); align-items:center;}
/* width is animated deliberately: the dot MORPHS circle->pill (border-radius
   + width), which transform/clip-path can't express without distortion.
   Tiny element, occasional trigger. */
.platforms .pw-dot{
  width:7px; height:7px; border-radius:50%; background:rgba(17,17,19,.12);
  transition:background .35s ease,transform .45s var(--ease-soft),width .45s var(--ease-soft);
}
.platforms .pw-dot.is-active{background:var(--pw-blue-deep); width:22px; border-radius:99px; transform:scale(1);}
.platforms .pw-dot.is-soon:not(.is-active){box-shadow:0 0 0 1.5px rgba(75,166,241,.45);}
.platforms .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* Layer promotion only while the wheel is on-screen / animating (JS toggles .pw-live) */
.platforms.pw-live .wheel{will-change:transform;}
.platforms.pw-live .ring{will-change:transform;}
.platforms.pw-live .logo{will-change:transform,opacity;}
.platforms.pw-live .copy{will-change:transform,opacity;}
.platforms.pw-live .desc{will-change:opacity,transform;}

/* Keep the wheel + copy inside the site's vertical frame lines
   (var(--rail) inside the shell on wide screens). */
@media (min-width:1080px){
  .platforms .sticky{ clip-path: inset(0 var(--rail, 72px)); }
  /* head sits a touch further in than the copy so its right edge lands just
     left of the platform name's right edge (visually tied, not flush). */
  .platforms .pw-head{ padding-inline-end:calc(var(--rail, 72px) + 48px); }
  .platforms .copy{ padding-inline-end:calc(var(--rail, 72px) + 28px); }
}

/* ── ≥1600px: the wheel + type get a further proportional bump so the
   section doesn't read small inside the wider shell (see styles.css'
   matching --maxw/--gutter tier). ~1.12× on top of the desktop sizing above. */
@media (min-width:1600px){
  .platforms .wheel{ --s:min(1220px,131vmin); }
  .platforms .logo{ width:175px; height:175px; }
  .platforms .logo-mark{ border-radius:32px; }
  .platforms .logo img{ border-radius:32px; }
  .platforms .logo-soon{ top:-15px; right:-26px; }
  .platforms .pw-head h2.pw-title,
  .platforms .pw-head h2{ font-size:clamp(46px,6.1vw,83px); }
  .platforms .pw-hero{ min-height:clamp(70px,7.8vw,105px); height:clamp(70px,7.8vw,105px); }
}

/* ── mobile: 3D coverflow carousel ── */
@media (max-width:900px){
  .platforms{
    height:400vh;
    background:radial-gradient(ellipse 100% 45% at 50% 38%, rgba(75,166,241,.14), transparent 70%),#fff;
    --pw-copy-gap:8px;
  }
  .platforms .sticky{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:max(14px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom));
    gap:0; overflow:hidden;
  }
  .platforms .pw-head{order:1; flex:0 0 auto; grid-column:auto; grid-row:auto; text-align:center; padding:0 8px 12px; align-self:center; width:100%;}
  .platforms .pw-head h2.pw-title,
  .platforms .pw-head h2{
    align-items:center; text-align:center; margin:0 auto;
    font-size:clamp(34px,9.5vw,50px); letter-spacing:-.04em; line-height:.98;
  }
  .platforms .wheel-col{order:2; flex:0 0 auto; grid-column:auto; grid-row:auto; height:auto; width:100%; max-width:100%; min-height:200px; justify-content:center; align-items:center; margin:0 0 2px; perspective:1100px; perspective-origin:50% 50%; overflow:visible;}
  /* coverflow is centred — no left bleed, so no feather (the ring, and with it
     the masked .ring-clip wrapper, is display:none in this tier anyway; the old
     colour-changing stage-glow ellipse is gone: it read as a leftover glowing
     bar, especially in split-screen windows that fall into this tier) */
  .platforms .wheel{--s:min(360px,96vw); width:var(--s); height:220px; transform:none; margin:0 auto; transform-style:preserve-3d; overflow:visible;}
  .platforms .ring{display:none !important;}
  .platforms .logo{width:108px; height:108px; left:50%; top:50%; transform-style:preserve-3d; backface-visibility:hidden;}
  .platforms.pw-live .logo{will-change:transform,opacity,filter;}
  .platforms .logo:not(.is-active) .logo-soon{opacity:0;}
  .platforms .logo img{border-radius:24px; filter:drop-shadow(0 16px 20px rgba(var(--shadow),.45)) drop-shadow(0 4px 8px rgba(0,0,0,.15));}
  .platforms .logo.is-active img{filter:drop-shadow(0 22px 30px rgba(var(--shadow),.6)) drop-shadow(0 8px 18px rgba(var(--shadow),.35)) drop-shadow(0 0 32px rgba(var(--shadow),.22));}
  .platforms .logo-soon{top:-10px; right:-16px;}
  .platforms .logo-soon .chip{padding:6px 13px 7px; border-width:1.75px;}
  .platforms .logo-soon .hand{font-size:18px;}
  .platforms .copy{order:3; flex:0 0 auto; grid-column:auto; grid-row:auto; height:auto; align-items:center; text-align:center; justify-content:flex-start; padding:6px 4px 0; width:100%; max-width:400px; transform:none !important;}
  .platforms .eyebrow{display:block; height:1.2em; margin-bottom:4px;}
  .platforms .eyebrow-item{justify-content:center; font-size:13.5px;}
  .platforms .pw-hero{min-height:42px; height:42px;}
  /* centre-aligned to match the centred mobile copy; font sized to sit inside
     the (now overflow-clipped) roll box without cropping ascenders/descenders */
  .platforms .pw-name{justify-content:center; font-size:clamp(28px,7vw,36px);}
  .platforms .status-row{min-height:26px; height:auto; justify-content:center;}
  .platforms .status-soon{font-size:12px; padding:4px 11px;}
  .platforms .desc{margin:0 auto; max-width:32ch; min-height:2.8em; font-size:14.5px; line-height:1.45;}
  .platforms .pw-dots{justify-content:center; gap:8px;}
  .platforms .pw-dot.is-active{width:20px;}
}
@media (max-width:520px){
  .platforms{--pw-copy-gap:6px;}
  .platforms .sticky{padding-inline:14px;}
  .platforms .wheel{--s:min(100vw,360px); height:180px;}
  .platforms .logo{width:88px; height:88px;}
  .platforms .logo img{border-radius:20px;}
  .platforms .pw-head h2{font-size:clamp(30px,9vw,40px);}
  .platforms .pw-hero{min-height:34px; height:34px;}
  .platforms .pw-name{font-size:clamp(24px,6.6vw,30px);}
}
@media (max-width:900px) and (max-height:700px){
  .platforms{--pw-copy-gap:5px;}
  .platforms .pw-head{padding-bottom:8px;}
  .platforms .pw-head h2{font-size:clamp(28px,8vw,36px);}
  .platforms .wheel{height:150px;}
  .platforms .logo{width:76px; height:76px;}
  .platforms .desc{min-height:2.4em; font-size:13.5px;}
}
@media (prefers-reduced-motion:reduce){
  .platforms .status-live i{animation:none;}
  .platforms .logo-soon .hand .ch{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
  .platforms .logo-soon{filter:none !important;}
}