/* Native Figma frame grain reconstructed from its black/white renders.
   Progressive blurs use original transparent PNG exports. */
.site{background-image:none;filter:none}
/* Keep the original 5.875rem of the blue arc inside the viewport, including
   above the 1800px font-size cap and before JavaScript has initialized. */
.fullscreen-layout>[data-node-id='1:176']{left:auto;right:calc(5.875rem - 15.902625rem)}
.fullscreen-layout>[data-node-id='1:175']{left:auto;right:-23.0265rem}
.fullscreen-layout>[data-node-id='1:399']{left:auto;right:-.625rem}
.coins-section>[data-node-id='1:192']{left:auto;right:-17.016813rem;top:auto;bottom:-10.288937rem}
/* The grain masks are static compositing layers, so animating a button or a
   counter never re-filters the whole document. C * transmission + scatter. */
.site::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:40;background-image:url('../effects/noise-transmission.png');background-repeat:repeat;background-size:512px 512px;mix-blend-mode:multiply}
.site::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:41;background-image:url('../effects/noise-black.png');background-repeat:repeat;background-size:512px 512px;mix-blend-mode:plus-lighter}
.native-hero-fade{filter:none;background:transparent;border-radius:0;pointer-events:none}
.native-hero-background{height:57.0625rem;top:0}
.hero-title [data-node-id='1:60']{z-index:auto}
.site-header,.navigation,.hero-content{z-index:auto}
.support-panel>[data-node-id='1:372'],.support-panel>[data-node-id='1:373'],.support-panel>[data-node-id='1:377']{z-index:auto}
/* The skyline PNG already contains Figma's 8% image opacity in its alpha.
   Applying that opacity again made the original skyline almost invisible. */
.how-panel>[data-node-id='1:338']>img{opacity:1}
@media(min-width:1101px){.how-panel>[data-node-id='1:338']{width:calc(100% + 3.625rem);height:auto;aspect-ratio:1354/762}}
@media(max-width:1100px){.how-panel>[data-node-id='1:338']{inset:0;width:100%;height:100%}}
/* In the stacked layout the figure belongs to the intro, above the steps. */
@media(max-width:1100px){.how-panel>[data-node-id='1:337']{height:18rem;overflow:clip;mask-image:linear-gradient(#000 calc(100% - 1rem),transparent)}.how-panel>[data-node-id='1:337']>img{height:30rem}}
@media(max-width:600px){.how-panel>[data-node-id='1:337']>img{height:27rem}}
@media(max-width:600px){.how-panel [data-name='Text Block']{flex:1 1 0;min-width:0;width:auto}}
/* Every tier uses the same distance from its live right edge, including while
   flex-basis animates. The left-hand glint already has a stable left anchor. */
.vip-card>[data-node-id='1:92'],.vip-card>[data-node-id='1:113'],.vip-card>[data-node-id='1:131'],.vip-card>[data-node-id='1:161']{left:auto;right:calc(-4.84375rem - 2px)}
.vip-card>[data-node-id='1:93'],.vip-card>[data-node-id='1:112'],.vip-card>[data-node-id='1:130'],.vip-card>[data-node-id='1:160']{left:auto;right:calc(-2.051625rem - 2px);top:auto;bottom:calc(1.09375rem - 2px)}
/* Prestige keeps Figma's original glint overhang at any column width. */
.coin-column [data-node-id='1:317']{left:auto;right:-4.684375rem}
.coin-column [data-node-id='1:318']{left:auto;right:-3.37775rem}
/* Supreme also grows with its live column; its two 1px borders are fixed CSS
   pixels, while the original effect dimensions scale in rem. */
.coin-column [data-node-id='1:258']{left:auto;right:calc(-4.746875rem - 2px)}
.coin-column [data-node-id='1:259']{left:auto;right:calc(-.8125rem - 2px);top:auto;bottom:calc(-.8125rem - 2px)}
.vehicle-band>[data-node-id='1:182']{left:auto;right:-4.953563rem}
.support-panel>[data-node-id='1:368']{left:auto;right:calc(-5.1875rem - 2px);top:auto;bottom:calc(-4.9375rem - 2px)}
.support-panel>[data-node-id='1:369']{left:auto;right:calc(-11.4375rem - 2px)}
.support-panel>[data-node-id='1:370']{left:auto;right:calc(13.5125rem - 2px)}
.support-panel>[data-node-id='1:371']{left:auto;right:calc(-.541937rem - 2px);top:auto;bottom:calc(-4.193125rem - 2px)}
/* Alpha fades remove the actual image edge. The original darkening layers and
   frame grain continue over the shared page background on both sides. */
.native-hero-background{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)}
.vehicle-band>[data-node-id='1:178']{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 72%,transparent 100%)}
@media(max-width:1100px){.hero>.native-hero-background{height:49rem;top:0}}
@media(max-width:600px){.hero>.native-hero-background{height:45rem;top:0}}