.vbn-iframe-slide.hero-slide-active{display:block;padding:0}
      .vbn{position:relative;display:block;width:100%;max-width:1580px;margin:0 auto;aspect-ratio:1720/780;border-radius:24px;overflow:hidden;text-decoration:none;isolation:isolate}
      .vbn-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:2%;padding:0 clamp(26px,5%,78px)}
      .vbn-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;max-width:54%}
      .vbn-pill{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(10px,0.9vw,14px);letter-spacing:0.15em;text-transform:uppercase;padding:8px 17px;border-radius:999px;margin-bottom:clamp(13px,2vw,24px)}
      .vbn-title{font-family:'Bricolage Grotesque','Space Grotesk',sans-serif;font-weight:800;font-size:clamp(26px,4.7vw,68px);line-height:1.0;letter-spacing:-0.02em;margin:0 0 clamp(12px,1.7vw,22px)}
      .vbn-btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(13px,1.15vw,18px);padding:clamp(11px,1.15vw,17px) clamp(20px,2.1vw,34px);border-radius:14px;white-space:nowrap}
      .vbn-art{position:relative;z-index:2;flex:0 0 auto;align-self:stretch}
      .vbn-slab{position:absolute;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
      .vbn-cta-row{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(10px,1.3vw,17px)}
      /* Meadow as a REAL CSS background so it's always there — iOS doesn't render
         the <video> (or its poster) when autoplay is blocked, which left the mobile
         banner a flat dark box. The video fades in ON TOP only once it's playing. */
      .vbn-mew{background:#181320 url('/static/img/banners/mew-bg-poster.jpg') center/cover no-repeat}
      .vbn-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .5s ease}
      .vbn-bg-video.is-playing{opacity:1}
      .vbn-mew::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 58% 78% at 25% 50%,rgba(18,14,24,.58) 0%,rgba(18,14,24,.34) 46%,rgba(18,14,24,.12) 72%,rgba(18,14,24,0) 100%)}
      .vbn-mew .vbn-pill{background:rgba(9,12,14,.38);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:none}
      .vbn-mew .vbn-title{color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.4)}
      .vbn-mew .vbn-hl-pink{color:#fff}
      .vbn-sub{font-family:'Space Grotesk',sans-serif;color:rgba(255,255,255,.92);font-weight:600;font-size:clamp(12px,1.15vw,18px);margin:0 0 clamp(15px,2vw,26px);text-shadow:0 2px 14px rgba(0,0,0,.4)}
      .vbn-mew .vbn-btn{background:#fff;color:#111714}
      .vbn-art-mew{width:38%;max-width:470px}
      .vbn-art-mew .vbn-slab-mew{position:absolute;right:10%;top:50%;transform:translateY(-50%) rotate(9deg);height:72%;border-radius:6px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
      .promo-used-dialog{position:fixed;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:0;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:#15191f;color:#f7f9fb;box-shadow:0 28px 90px rgba(0,0,0,.65);overflow:auto}
      .promo-used-dialog::backdrop{background:rgba(3,6,9,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
      .promo-used-card{padding:30px}
      .promo-used-mark{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:15px;background:rgba(170,255,0,.1);border:1px solid rgba(170,255,0,.24);color:#aaff00;font:800 20px/1 'Space Grotesk',sans-serif}
      .promo-used-title{margin:0 0 10px;font:800 27px/1.08 'Bricolage Grotesque','Space Grotesk',sans-serif;letter-spacing:-.025em}
      .promo-used-copy{margin:0 0 25px;color:#adb5c0;font:500 15px/1.55 'Space Grotesk',sans-serif}
      .promo-used-actions{display:flex;gap:10px}
      .promo-used-actions a,.promo-used-actions button{min-height:48px;border-radius:13px;padding:0 18px;font:700 14px/1 'Space Grotesk',sans-serif;cursor:pointer}
      .promo-used-actions a{display:inline-flex;align-items:center;justify-content:center;flex:1;background:#aaff00;color:#10140b;text-decoration:none}
      .promo-used-actions button{border:1px solid rgba(255,255,255,.14);background:#20252c;color:#eef1f5}
      .promo-used-actions a:focus-visible,.promo-used-actions button:focus-visible{outline:3px solid #fff;outline-offset:3px}
      @media (max-width:520px){
        .promo-used-card{padding:20px}
        .promo-used-mark{width:36px;height:36px;margin-bottom:14px;border-radius:11px;font-size:15px}
        .promo-used-title{font-size:20px;margin-bottom:8px}
        .promo-used-copy{font-size:13px;margin-bottom:16px}
        .promo-used-actions a,.promo-used-actions button{min-height:42px;font-size:13px;border-radius:11px}
        .promo-used-dialog{max-width:86vw}
      }
      @media (max-width:820px){
        /* Once the banner drops its desktop aspect ratio, scale art with the
           available viewport instead of snapping every device to one fixed size. */
        .vbn{border-radius:14px}
        .vbn-copy{max-width:60%}
        .vbn-art-mew{width:36%}
        .vbn-art-mew .vbn-slab-mew{height:clamp(168px,32vw,260px);right:4%}
        .vbn-cta-row{flex-wrap:wrap;gap:8px 12px;margin-bottom:8px}
        .vbn-title{font-size:21px;line-height:1.1}
        .vbn-sub{font-size:12.5px}
        .vbn-pill{padding:6px 13px;font-size:10px;margin-bottom:10px}
        .vbn-btn{font-size:13px;padding:10px 18px}
      }
      /* Daily Spin banner */
      .vbn-spin{background:radial-gradient(125% 135% at 82% 50%,rgba(214,220,230,0.16),rgba(10,11,13,0) 52%),linear-gradient(115deg,#0a0b0e 0%,#15171f 58%,#0d0e13 100%);}
      .vbn-spin::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 62% 82% at 22% 50%,rgba(10,11,13,.55),rgba(10,11,13,0) 70%);}
      .vbn-spin .vbn-pill{background:linear-gradient(180deg,#F6F7F9,#C9CDD3);color:#0A0B0D;border:0;box-shadow:0 6px 20px rgba(255,255,255,.12);}
      .vbn-spin .vbn-title{color:#fff;text-shadow:0 3px 24px rgba(0,0,0,.45);}
      .vbn-spin .vbn-title em{font-style:normal;background:linear-gradient(180deg,#fff,#AEB3BB);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
      .vbn-spin .vbn-sub{color:rgba(255,255,255,.72);}
      .vbn-spin .vbn-btn{background:linear-gradient(180deg,#F6F7F9 0%,#D6DAE0 46%,#ABB0B8 100%);color:#0A0B0D;gap:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.15);}
      .vbn-art-spin{position:relative;width:44%;max-width:540px;align-self:stretch;}
      .vbn-spin-glow{position:absolute;right:10%;top:50%;width:60%;height:80%;transform:translateY(-50%);z-index:0;background:radial-gradient(50% 50% at 50% 50%,rgba(222,227,236,.22),rgba(222,227,236,0) 70%);pointer-events:none;}
      #heroSlideSpin .vbn-sub{max-width:27ch;}
      .vbn-spin-reels{position:absolute;right:2%;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:flex-end;}
      .vspin-coin{--w:clamp(112px,16vw,205px);width:var(--w);height:var(--w);position:relative;z-index:2;display:block;}
      .vspin-coin.cA{margin-right:calc(var(--w) * -0.24);}
      .vspin-coin.cB{--w:clamp(158px,24vw,300px);z-index:3;}
      .vspin-coin.cC{margin-left:calc(var(--w) * -0.24);}
      .vspin-coin>img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 20px 32px rgba(0,0,0,.6)) saturate(1.18) brightness(1.09) contrast(1.06);}
      .vspin-coin.cB>img{filter:drop-shadow(0 30px 50px rgba(0,0,0,.74)) saturate(1.18) brightness(1.09) contrast(1.06);}
      /* Metallic sheen: a light glint rakes across each coin, clipped to the coin's own shape. */
      .vspin-shine{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
      .vspin-coin.cA .vspin-shine{-webkit-mask-image:url(/static/img/coin-starter.png?v=3);mask-image:url(/static/img/coin-starter.png?v=3);}
      .vspin-coin.cB .vspin-shine{-webkit-mask-image:url(/static/img/coin-master.png?v=3);mask-image:url(/static/img/coin-master.png?v=3);}
      .vspin-coin.cC .vspin-shine{-webkit-mask-image:url(/static/img/coin-mythic.png?v=3);mask-image:url(/static/img/coin-mythic.png?v=3);}
      .vspin-shine::before{content:"";position:absolute;top:-25%;left:-70%;width:40%;height:150%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.92),transparent);transform:skewX(-16deg);animation:vspinShine 3.8s ease-in-out infinite;}
      .vspin-coin.cB .vspin-shine::before{animation-delay:.5s;}
      .vspin-coin.cC .vspin-shine::before{animation-delay:1s;}
      @keyframes vspinShine{0%,14%{left:-70%}55%,100%{left:130%}}
      @media (prefers-reduced-motion:reduce){.vspin-shine::before{animation:none;left:-70%;}}
      @media (max-width:820px){.vbn-copy{max-width:52%}.vbn-art-spin{width:47%}.vspin-coin{--w:clamp(70px,17vw,140px)}.vspin-coin.cB{--w:clamp(98px,25vw,190px)}.vbn-spin-glow{width:86%;right:0}}
    

      .vbn-filmhtml{display:block;position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;background:#f8f8f6}
      /* The film scales its 1720x780 stage to the frame WIDTH, so in this ~3:1
         hero it renders taller than the slot and used to hang off the bottom
         while leaving dead space up top. Give the iframe the film's own ratio
         and centre it, so the overflow is split evenly top and bottom and the
         composition sits on the slide's centre line. */
      .vbn-filmhtml-frame{position:absolute;left:0;top:50%;width:100%;height:auto;
        aspect-ratio:1720/780;transform:translateY(-50%);
        border:0;display:block;pointer-events:none;background:#f8f8f6}
    

      /* ===== 1c · "Every pack hides a chase" (real design assets) ===== */
      .vbn-chase{background:#0b0d10}
      .vbn-chase-wall{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
      .vbn-chase-wall img{position:absolute;width:15.4%;max-width:210px;border-radius:6px}
      .vbn-chase-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(75% 92% at 50% 50%,rgba(11,13,16,.55) 0%,rgba(11,13,16,.86) 62%,#0b0d10 100%)}
      .vbn-chase-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 clamp(120px,19vw,360px)}
      .vbn-chase-eyebrow{display:inline-flex;align-items:center;gap:clamp(8px,1vw,14px);margin-bottom:clamp(10px,1.6vw,16px)}
      .vbn-chase-eyebrow .ln{height:1px;width:clamp(24px,4vw,70px);flex:0 0 auto}
      .vbn-chase-tag{padding:7px 18px;border-radius:999px;background:#12240f;border:1px solid rgba(127,224,160,.45);color:#8fe0b0;font-family:'Space Grotesk',sans-serif;font-size:clamp(9px,.9vw,13px);font-weight:700;letter-spacing:.2em;white-space:nowrap}
      .vbn-chase .vbn-title{font-family:'Cormorant Garamond',serif;color:#f6f0de;max-width:760px;text-shadow:0 3px 24px rgba(0,0,0,.55)}
      .vbn-hl-gold{background:linear-gradient(92deg,#ffe9a8 10%,#e8c96a 45%,#b8963a 90%);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
      .vbn-chase .vbn-sub{color:#9aa4ae;max-width:520px;font-weight:500;text-align:center}
      .vbn-chase .vbn-btn{background:#e9edf2;color:#101318}
      .vbn-packvid{position:absolute;z-index:2;object-fit:contain;mix-blend-mode:screen;pointer-events:none}
      .vbn-chase-pack{position:absolute;top:50%;z-index:2;width:clamp(118px,19vw,320px);filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
      .vbn-chase-pack-l{left:2.5%;animation:bn_float 4.6s ease-in-out infinite}
      .vbn-chase-pack-r{right:2.5%;animation:bn_floatB 5.4s ease-in-out infinite}
      @keyframes bn_float{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 10px))}}
      @keyframes bn_floatB{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 13px))}}

      /* ===== 6a · "Rip. Reveal. Vault." (real design bg) ===== */
      .vbn-rrv{background:#141a30}
      .vbn-rrv-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
      .vbn-rrv-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,7,10,.84) 0%,rgba(5,7,10,.54) 42%,rgba(5,7,10,.08) 72%,rgba(5,7,10,.2) 100%)}
      .vbn-rrv .vbn-inner{z-index:6}
      .vbn-rrv .vbn-title{color:#fff;text-shadow:0 3px 26px rgba(6,8,30,.7)}
      .vbn-rrv .vbn-sub{color:#d4dbf0;max-width:340px}
      .vbn-rrv .vbn-btn{background:#fff;color:#0c0e1e;box-shadow:0 12px 32px rgba(0,0,0,.4)}
      .vbn-rrv .vbn-btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.32);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
      .vbn-rrv-art{position:relative;width:60%;align-self:stretch;z-index:4}
      .vbn-rrv-pack{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:84%;z-index:6;filter:drop-shadow(0 38px 52px rgba(0,0,0,.6));animation:bn_heroFloat 6s ease-in-out infinite}
      @keyframes bn_heroFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
      /* Two slabs peek out behind the centered pack — one each side. */
      .vbn-rrv-slab{position:absolute;top:50%;height:58%;border-radius:6px;z-index:3;filter:drop-shadow(0 28px 44px rgba(0,0,0,.5))}
      /* Resting transform lives in the BASE rule (like .vbn-slab-mew), NOT only in
         the keyframes — otherwise the slab renders un-rotated until the animation's
         delay elapses (Safari doesn't reliably honor fill-mode:backwards when a warm
         slide becomes active). The animation only adds the subtle Y float on top. */
      .vbn-rrv-slab-a{left:24%;transform:translate(-50%,-52%) rotate(-23deg);animation:bn_cardA 8.5s ease-in-out 1.2s infinite backwards}
      .vbn-rrv-slab-b{left:76%;transform:translate(-50%,-48%) rotate(24deg);animation:bn_cardB 8s ease-in-out 2.2s infinite backwards}
      @keyframes bn_cardA{0%,100%{transform:translate(-50%,-52%) rotate(-23deg)}50%{transform:translate(-50%,calc(-52% - 10px)) rotate(-23deg)}}
      @keyframes bn_cardB{0%,100%{transform:translate(-50%,-48%) rotate(24deg)}50%{transform:translate(-50%,calc(-48% - 10px)) rotate(24deg)}}
      @media (max-width:820px){
        /* 1c has no in-flow .vbn-inner, so give .vbn-chase-inner the same relative
           + min-height treatment the site uses on .vbn-inner, or the banner
           collapses to 0 height on phones. */
        .vbn-chase-inner{position:relative;inset:auto;min-height:265px;padding:16px clamp(84px,28vw,140px)}
        .vbn-chase-pack{width:26vw}
        .vbn-chase-wall img{width:24%}
        .vbn-rrv .vbn-sub{max-width:none}
        .vbn-rrv-art{width:50%}
        .vbn-rrv-pack{height:clamp(150px,30vw,246px);left:50%}
        .vbn-rrv-slab{height:clamp(104px,21vw,172px)}
        .vbn-rrv-slab-a{left:23%}
        .vbn-rrv-slab-b{left:77%}
        /* 6px reads as a rounded card at phone slab sizes — keep corners crisp like the real slab photo */
        .vbn-slab,.vbn-art-mew .vbn-slab-mew,.vbn-chase-wall img,.vbn-rrv-slab{border-radius:2px}
      }
    

      /* ===== Trainer Rank Program — clean bg image + overlaid HTML copy on the left ===== */
      .vbn-trainer{background:#10141c}
      /* object-position:right → on narrow screens the crop eats the LEFT (sky), keeping
         the rank pillars on the right visible. On desktop the near-equal aspect crops
         a little top/bottom instead. */
      .vbn-trainer-img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;object-position:right center}
      /* Light veil on the left so the dark copy stays readable over the bright sky. */
      .vbn-trainer-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(238,246,255,.85) 0%,rgba(238,246,255,.55) 24%,rgba(238,246,255,.14) 45%,rgba(238,246,255,0) 60%)}
      .vbn-trainer .vbn-inner{z-index:3}
      .vbn-trainer .vbn-pill{background:#c5f24d;color:#14240b}
      .vbn-trainer .vbn-title{text-shadow:0 2px 16px rgba(255,255,255,.6)}
      .vbn-trainer-h1{color:#12331e}
      .vbn-trainer-h2{color:#1fb955}
      .vbn-trainer .vbn-sub{color:#20342a;font-weight:600;text-shadow:0 1px 10px rgba(255,255,255,.6)}
      .vbn-trainer .vbn-btn{background:#c5f24d;color:#14240b}
      @media (max-width:820px){
        .vbn-trainer{min-height:265px}
        /* Zoom the photo OUT on phones (show more of it, pillars smaller/complete) and
           frame toward the pillars; smaller + narrower copy keeps the left clear. */
        /* Zoom out on phones: contain shows the full-width pillar row smaller, anchored
           to the bottom so the letterbox gap lands in the sky and blends with the bg. */
        .vbn-trainer{background:linear-gradient(103deg,#bdd7ed 0%,#c6dbec 38%,#dcd8c6 63%,#efe8cf 85%,#f6efd8 100%)}
        .vbn-trainer-img{object-fit:cover;object-position:63% center;}
        .vbn-trainer .vbn-copy{max-width:47%}
        .vbn-trainer .vbn-title{font-size:17px;line-height:1.06}
        .vbn-trainer .vbn-sub{font-size:10px;line-height:1.32;max-width:none}
        .vbn-trainer .vbn-pill{font-size:8px;padding:4px 9px;letter-spacing:.09em}
        .vbn-trainer .vbn-btn{font-size:11px;padding:7px 13px}
        .vbn-trainer-veil{background:linear-gradient(90deg,rgba(238,246,255,.92) 0%,rgba(238,246,255,.66) 34%,rgba(238,246,255,.16) 58%,rgba(238,246,255,0) 74%)}
      }
    

.vbn-trainer-ranks{display:block;position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;}
.vbn-trainer-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:#0b2437;}
.hero-slide { display:none; }
.hero-slide-active { display:block; }
/* Keep the heavy iframe banner painted while inactive so switching to it never
   cold-paints the whole scene. It sits warm + fully transparent behind the
   carousel, then appears instantly when selected. */
.vbn-iframe-slide:not(.hero-slide-active){ display:block; position:absolute; top:0; left:0; width:100%; opacity:0; pointer-events:none; z-index:0; }
.vbn-iframe-slide.hero-slide-active{ opacity:1; z-index:1; }
#heroSlide3.hero-slide-active{animation:none !important;opacity:1 !important;transform:none !important;filter:none !important}
#heroSlide3 .vbn-mew-showroom{opacity:1 !important;filter:none !important}
#heroSlide3 .vbn-mew-showroom::after{background:linear-gradient(90deg,rgba(24,18,22,.58) 0%,rgba(24,18,22,.3) 46%,rgba(24,18,22,.1) 76%),rgba(24,18,22,.08) !important}
#heroSlide3 .vbn-bg-video{filter:brightness(.9) saturate(.86) contrast(.92) !important}
#heroSlide3 .vbn-inner,#heroSlide3 .vbn-copy{z-index:5 !important;opacity:1 !important;filter:none !important;mix-blend-mode:normal !important}
#heroSlide3 .vbn-copy>:not(.vbn-btn){color:#fff !important;-webkit-text-fill-color:#fff !important;opacity:1 !important;animation:none !important;filter:none !important;mix-blend-mode:normal !important}
#heroSlide3 .vbn-hl-pink{color:#fff !important;-webkit-text-fill-color:#fff !important}
#heroSlide3 .vbn-pill{background:rgba(9,12,14,.38) !important;border-color:rgba(255,255,255,.22) !important;color:#fff !important;-webkit-text-fill-color:#fff !important}

.home-page-title { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.hero-dots { position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; gap:0; z-index:10; }
.hero-dot { position:relative;width:44px;height:44px;padding:0;border:none;cursor:pointer;background:transparent; }
.hero-dot::before { content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:999px;background:rgba(255,255,255,0.24);transition:width .3s ease,background .3s ease; }
.hero-dot-active::before { width:20px;background:rgba(255,255,255,.9);box-shadow:none; }
.hero-pause{width:44px;height:44px;padding:0;border:0;background:transparent;color:rgba(255,255,255,.48);font-size:11px;font-weight:700;cursor:pointer}
.hero-pause:hover,.hero-pause:focus-visible{color:#fff}
/* Desktop: switcher sits UNDER the banner (not overlaid on it). */
@media (min-width: 769px) {
    .hero-dots { position:static; transform:none; justify-content:center; margin:5px auto 0; }
}

body.shell-authenticated .vaultr-topnav-promo,
body.shell-authenticated .topbar-xp,
body.shell-authenticated .topbar-sealed,
body.shell-authenticated .vaultr-topnav-wallet,
body.shell-authenticated #profileToggle{
    background:rgba(255,255,255,.025) !important;
    border-color:rgba(233,241,247,.09) !important;
    box-shadow:none !important;
}
body.shell-authenticated .vaultr-topnav-promo-mark{
    background:rgba(170,255,0,.055);
    border-color:rgba(170,255,0,.2);
}

.hero-ranks-visual { display:flex;align-items:center;justify-content:center; }
/* ── Desktop: the original boarded rank list (founder: "desktop should look like
   this"). Full boarded boxes, prominent pokeball backdrop, red-tinted Master with
   lime pulse, buyback %. The quiet/compact treatment lives ONLY in the <=600
   mobile block below. ── */
.hero-ranks-list { display:flex;flex-direction:column;gap:6px;width:100%;max-width:300px;position:relative; }
/* Trainer banner fit: the inner is aspect-ratio-capped to 428px, so cap the title + tighten padding so the 4-line title + 6-row list don't clip top/bottom. */
#heroSlide1 .hero-trainer-title{font-size:clamp(1.9rem,3vw,2.7rem) !important;line-height:1.06 !important;letter-spacing:-0.02em;margin-bottom:0.55rem !important;}
#heroSlide1 .pv-hero-inner{padding-top:30px !important;padding-bottom:22px !important;}
#heroSlide1 .pv-hero-sub{margin-bottom:0.9rem !important;}
#heroSlide1 .hero-ranks-list{gap:6px !important;}
#heroSlide1 .hero-rank-row{padding:7px 16px !important;}
.hero-rank-row {
    display:flex;align-items:center;gap:12px;padding:8px 16px;position:relative;
    background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid rgba(255,255,255,0.06);
    font-size:0.85rem;font-weight:600;
}
.hero-rank-pct { margin-left:auto;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.5); }
.hero-rank-master { background:rgba(170, 255, 0,0.05);border-color:rgba(170, 255, 0,0.22); }
/* Buyback % is the HERO — grows + brightens up the ladder, peaking lime on Master
   (founder 2026-06-17: emphasize the upgrading trainer + the increasing buyback). */
#heroSlide1 .hero-rank-row:nth-child(1) .hero-rank-pct { font-size:1.05rem;color:rgba(255,255,255,0.42); }
#heroSlide1 .hero-rank-row:nth-child(2) .hero-rank-pct { font-size:1.14rem;color:rgba(255,255,255,0.54); }
#heroSlide1 .hero-rank-row:nth-child(3) .hero-rank-pct { font-size:1.24rem;color:rgba(255,255,255,0.66); }
#heroSlide1 .hero-rank-row:nth-child(4) .hero-rank-pct { font-size:1.36rem;color:rgba(255,255,255,0.78); }
#heroSlide1 .hero-rank-row:nth-child(5) .hero-rank-pct { font-size:1.5rem; color:rgba(255,255,255,0.9); }
#heroSlide1 .hero-rank-master .hero-rank-pct { font-size:1.8rem !important;color:#AAFF00 !important;font-weight:800 !important;text-shadow:0 0 18px rgba(170, 255, 0,0.55); }
#heroSlide1 .hero-rank-row > span:not(.hero-rank-pct) { font-size:0.78rem;letter-spacing:0.03em;color:rgba(255,255,255,0.6); }
#heroSlide1 .hero-rank-master > span:not(.hero-rank-pct) { color:#fff; }

#heroSlide1 .hero-rank-row { transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, background-color .28s; }
#heroSlide1 .hero-rank-master { animation: masterPulse 3.2s ease-in-out infinite; }
@keyframes masterPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(170, 255, 0,0.0); }
  50% { box-shadow: 0 0 0 1px rgba(170, 255, 0,0.30), 0 6px 26px rgba(170, 255, 0,0.18); }
}
@media (prefers-reduced-motion: reduce) { #heroSlide1 .hero-rank-master { animation: none; } }

#heroSlide1 .hero-rank-row > div:first-child { transition: transform 0.28s cubic-bezier(0.2,0.7,0.3,1); }
#heroSlide1 .hero-rank-row:hover { transform: translateX(-5px) scale(1.04); border-color: rgba(170, 255, 0,0.45); background-color: rgba(170, 255, 0,0.07); z-index: 2; }
#heroSlide1 .hero-rank-row:hover > div:first-child { transform: scale(1.45); }
#heroSlide1 .hero-rank-row:hover .hero-rank-pct { color: #AAFF00; }

/* Climb glow — a lime highlight wave travels UP the tiles (Rookie → Master),
   GROWING in size/intensity as it climbs and flaring biggest on Master, then
   repeats on a loop. Per-tier --gb (glow blur) / --ga (alpha) / --gs (scale)
   ramp up the ladder so the effect gets bigger toward the top. (founder 2026-06-17) */
@keyframes climbGlow {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(170, 255, 0,0); transform: scale(1); }
  10% { box-shadow: 0 0 var(--gb,14px) rgba(170, 255, 0,var(--ga,0.28)); transform: scale(var(--gs,1.02)); }
}
#heroSlide1.hero-slide-active .hero-rank-row { animation: climbGlow 4.2s ease-in-out infinite; }
#heroSlide1.hero-slide-active .hero-rank-row:nth-child(1){ animation-delay:0s;    --gb:7px;  --ga:.16; --gs:1.008; }
#heroSlide1.hero-slide-active .hero-rank-row:nth-child(2){ animation-delay:.32s;  --gb:10px; --ga:.20; --gs:1.012; }
#heroSlide1.hero-slide-active .hero-rank-row:nth-child(3){ animation-delay:.64s;  --gb:14px; --ga:.25; --gs:1.016; }
#heroSlide1.hero-slide-active .hero-rank-row:nth-child(4){ animation-delay:.96s;  --gb:19px; --ga:.30; --gs:1.022; }
#heroSlide1.hero-slide-active .hero-rank-row:nth-child(5){ animation-delay:1.28s; --gb:24px; --ga:.36; --gs:1.028; }
#heroSlide1.hero-slide-active .hero-rank-master { animation: climbGlow 4.2s ease-in-out infinite; animation-delay:1.6s; --gb:36px; --ga:.6; --gs:1.045; }
@media (prefers-reduced-motion: reduce) {
  #heroSlide1.hero-slide-active .hero-rank-row, #heroSlide1.hero-slide-active .hero-rank-master { animation: none !important; }
}

@media(max-width:1024px) {
    .hero-trainer-title { font-size:2rem !important; }
    .hero-ranks-visual { margin-top:8px;height:auto !important;max-width:640px !important; }
    .hero-ranks-list { flex-direction:row;flex-wrap:wrap;gap:6px;max-width:100%;justify-content:center; }
    .hero-rank-row { padding:6px 10px;border-radius:100px;gap:6px;font-size:0.7rem; }
    .hero-rank-pct { font-size:0.7rem; }
}

/* ── Premium motion (2026-06-16). Slide 1: the card cluster reveals + floats
   (container-level, so it never fights the fan transforms). Slide 3: the chase
   scans fan out, re-running on each tier tap. ── */
.pv-hero-visual { position: relative; }
@keyframes hrReveal { from{opacity:0;transform:translateY(26px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes hrFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
#heroSlide0.hero-slide-active .pv-hero-visual {
  animation: hrReveal .7s cubic-bezier(.2,.85,.3,1) both, hrFloat 6s ease-in-out .7s infinite;
}

/* Slide 3 (What's pullable) — the 3 chase scans fan out, re-runs on each tier tap */
@keyframes fanH1 { 0%{opacity:0;transform:rotate(0deg) translateX(0) scale(.62)} 100%{opacity:1;transform:rotate(-10deg) translateX(34px)} }
@keyframes fanH2 { 0%{opacity:0;transform:translateY(16px) scale(.58)}           100%{opacity:1;transform:scale(1.08)} }
@keyframes fanH3 { 0%{opacity:0;transform:rotate(0deg) translateX(0) scale(.62)} 100%{opacity:1;transform:rotate(10deg) translateX(-34px)} }
#heroSlide2 .hp-cards-active .hp-card-2 { animation: fanH2 .55s cubic-bezier(.2,.85,.3,1.08) .04s backwards; }
#heroSlide2 .hp-cards-active .hp-card-1 { animation: fanH1 .55s cubic-bezier(.2,.85,.3,1.08) .12s backwards; }
#heroSlide2 .hp-cards-active .hp-card-3 { animation: fanH3 .55s cubic-bezier(.2,.85,.3,1.08) .12s backwards; }

/* slide 3 cluster float (slide 1's float is folded into its reveal above) */
#heroSlide2.hero-slide-active .pv-hero-visual { animation: hrFloat 6s ease-in-out .6s infinite; }

@media (prefers-reduced-motion: reduce) {
  #heroSlide2 .hp-cards-active [class*="hp-card"],
  #heroSlide0.hero-slide-active .pv-hero-visual, #heroSlide2.hero-slide-active .pv-hero-visual { animation: none !important; }
}
.pv-hero{cursor:grab}.pv-hero.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}


/* Cinzel was @import'ed here. An @import inside a <style> is the slowest way to
   load a font: it is not discovered until this stylesheet has itself been
   fetched and parsed, so the request serialises behind everything above it.
   Vendored into static/css/fonts.css (see scripts/vendor_google_fonts.py). */
.wb-slide{position:relative;}
.wb-fog{position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;opacity:.55;filter:blur(22px);
  background:radial-gradient(42% 60% at 28% 62%, rgba(180,90,220,0.11), transparent 70%),
            radial-gradient(50% 50% at 72% 38%, rgba(232,70,150,0.09), transparent 70%);
  animation:wbFog 24s ease-in-out infinite alternate;}
@keyframes wbFog{0%{transform:translate3d(-3%,2%,0) scale(1.05)}100%{transform:translate3d(4%,-3%,0) scale(1.16)}}
.wb-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.wb-ember{position:absolute;bottom:-14px;width:3px;height:3px;border-radius:50%;
  background:rgba(255,160,215,0.9);box-shadow:0 0 8px 2px rgba(236,64,150,0.5);animation:wbEmber linear infinite;}
@keyframes wbEmber{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.95}88%{opacity:.45}100%{transform:translateY(-520px) translateX(26px);opacity:0}}
.wb-inner{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(150,90,200,0.22);
  max-width:min(1680px,94vw);margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;
  gap:1.5rem;align-items:center;padding:clamp(1.75rem,4vw,3rem) clamp(1.5rem,5vw,3.5rem);
  min-height:330px;box-sizing:border-box;
  background:
    radial-gradient(120% 95% at 16% 125%, rgba(236,64,150,0.15), transparent 56%),
    radial-gradient(120% 95% at 86% -10%, rgba(138,80,235,0.17), transparent 56%),
    radial-gradient(100% 120% at 50% 50%, #0b0512 0%, #060309 58%, #020103 100%);}
.wb-inner::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(135% 100% at 50% 38%, transparent 54%, rgba(0,0,0,0.5) 100%);}
.wb-eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 'Cinzel',Georgia,serif;
  letter-spacing:.34em;text-transform:uppercase;color:#f6a8d2;text-shadow:0 0 16px rgba(236,64,150,0.6);}
.wb-eyebrow::before{content:'';width:30px;height:1px;background:linear-gradient(90deg,transparent,#ec4096);}
.wb-title{margin:18px 0 0;font:800 clamp(34px,5.4vw,62px)/1.02 'Cinzel',Georgia,serif;
  color:#f4ebf4;text-shadow:0 0 34px rgba(180,80,220,0.42),0 2px 5px rgba(0,0,0,0.75);
  animation:wbFlicker 8s ease-in-out infinite;}
@keyframes wbFlicker{0%,100%{opacity:1}47%{opacity:.98}49%{opacity:.84}51%{opacity:1}}
.wb-title .wb-accent{background:linear-gradient(100deg,#ff7ec0,#c084fc 58%,#8a5cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.wb-sub{margin:18px 0 0;max-width:448px;color:#bcacc6;font-size:15.5px;line-height:1.62;}
.wb-sub b{color:#f1dbf0;font-weight:700;}
.wb-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.wb-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:#dac6e7;background:rgba(42,22,58,0.5);
  border:1px solid rgba(160,100,220,0.28);backdrop-filter:blur(4px);}
.wb-chip-lock{color:#ffc7e7;border-color:rgba(236,64,150,0.42);background:rgba(62,18,44,0.5);}
.wb-link{margin-left:4px;font-size:13.5px;font-weight:700;color:#e7c8f2;text-decoration:none;
  border-bottom:1px solid rgba(231,200,242,0.35);padding-bottom:2px;transition:color .2s,border-color .2s;}
.wb-link:hover{color:#fff;border-color:#fff;}
.wb-text{position:relative;z-index:3;}
.wb-stage{position:relative;z-index:3;height:clamp(240px,26vw,330px);display:flex;align-items:center;justify-content:center;}
.wb-pack{position:relative;}
.wb-aura{position:absolute;inset:-34px -22px;border-radius:50%;filter:blur(42px);z-index:0;}
.wb-aura-legend{background:rgba(236,64,150,0.45);animation:wbPulse 5s ease-in-out infinite;}
.wb-aura-mythic{background:rgba(138,80,235,0.52);animation:wbPulse 5s ease-in-out infinite .8s;}
@keyframes wbPulse{0%,100%{opacity:.42}50%{opacity:.86}}
.css-pack.np-pack,#heroSlide0 .pv-hero-pack .css-pack.np-pack,.mp-card .css-pack.np-pack{background:var(--np) center/contain no-repeat!important;border:none!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;}
.mp-card .css-pack.np-pack{filter:drop-shadow(0 16px 28px rgba(0,0,0,.6))!important;}
#heroSlide0 .pv-hero-pack .css-pack.np-pack{filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))!important;}
.css-pack.np-pack>*{display:none!important;}
.css-pack.np-pack::before,.css-pack.np-pack::after{display:none!important;content:none!important;}
.css-pack{position:relative;z-index:1;box-shadow:0 34px 64px -14px rgba(0,0,0,0.82);}
.wb-pack-legend{z-index:2;animation:wbFloatA 6s ease-in-out infinite;}
.wb-pack-mythic{z-index:3;margin-left:-34px;animation:wbFloatB 6.6s ease-in-out infinite .5s;}
@keyframes wbFloatA{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-15px)}}
@keyframes wbFloatB{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-15px)}}
.wb-pack-name{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  font:600 11px/1 'Cinzel',Georgia,serif;letter-spacing:.3em;text-transform:uppercase;
  color:#cbb4d8;white-space:nowrap;z-index:2;}
.wb-slab{position:absolute;width:92px;height:132px;border-radius:7px;z-index:0;
  background:linear-gradient(160deg,rgba(32,19,42,0.96),rgba(10,6,15,0.96));
  border:1px solid rgba(170,110,220,0.3);box-shadow:0 0 0 4px rgba(255,255,255,0.03),0 22px 42px -12px rgba(0,0,0,0.82);}
.wb-slab::before{content:'';position:absolute;top:8px;left:8px;right:8px;height:13px;border-radius:3px;background:rgba(255,255,255,0.06);}
.wb-slab::after{content:'?';position:absolute;inset:13px 0 0;display:grid;place-items:center;
  font:800 42px/1 'Cinzel',serif;color:rgba(204,150,242,0.22);text-shadow:0 0 20px rgba(180,90,230,0.45);}
.wb-slab-1{left:1%;top:16%;animation:wbSlab1 7.4s ease-in-out infinite;}
.wb-slab-2{right:1%;top:9%;animation:wbSlab2 8s ease-in-out infinite .6s;}
.wb-slab-3{left:33%;bottom:-2%;opacity:.82;animation:wbSlab3 8.6s ease-in-out infinite 1.1s;}
@keyframes wbSlab1{0%,100%{transform:rotate(-17deg) translateY(0)}50%{transform:rotate(-17deg) translateY(-13px)}}
@keyframes wbSlab2{0%,100%{transform:rotate(16deg) translateY(0)}50%{transform:rotate(16deg) translateY(-13px)}}
@keyframes wbSlab3{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-11px)}}
.wb-sub-short{display:none;}
@media (max-width:820px){
  /* Compact 2-col like the other mobile slides (text left, packs right): short "Deep Vault"
     headline + small packs so the slide height matches them instead of a tall scroll. */
  .wb-inner{grid-template-columns:1.15fr 0.85fr;gap:10px;min-height:0;padding:16px 14px;align-items:center;text-align:left;max-width:min(1680px,95.5vw);}
  .wb-eyebrow{font-size:9.5px;letter-spacing:.2em;}.wb-eyebrow::before{display:none;}
  .wb-title-lead{display:none;}
  .wb-sub-full{display:none;}.wb-sub-short{display:inline;}
  .wb-title{font-size:clamp(25px,7vw,33px);margin-top:2px;line-height:1.02;}
  .wb-sub{font-size:11px;line-height:1.38;margin-top:7px;max-width:none;}
  .wb-meta{margin-top:10px;gap:6px;}
  .wb-meta .wb-chip:not(.wb-chip-lock){display:none;}.wb-meta .wb-link{display:none;}
  .wb-chip,.wb-link{font-size:10.5px;padding:5px 9px;}
  .wb-stage{height:auto;zoom:0.5;}  /* zoom shrinks the packs' layout box too (transform:scale didn't) */
  .wb-pack-legend{animation:none;transform:rotate(-7deg);}
  .wb-pack-mythic{animation:none;transform:rotate(7deg);margin-left:-34px;}
  .wb-pack-name{display:none;}
}
@media (prefers-reduced-motion:reduce){.whale-banner *{animation:none !important;}}


.daily-spin-cta{display:flex;align-items:center;gap:15px;margin:22px 0 6px;padding:15px 18px;border-radius:16px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.08);text-decoration:none;transition:border-color .2s,background .2s;}
.daily-spin-cta:hover{border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.05);}
.daily-spin-cta .ds-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#050506;border:1px solid rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;}
.daily-spin-cta .ds-icon img{width:150%;height:150%;object-fit:contain;}
.daily-spin-cta .ds-main{flex:1;min-width:0;}
.daily-spin-cta .ds-title{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:1.1rem;color:#fff;letter-spacing:-0.01em;display:flex;align-items:center;gap:9px;}
.daily-spin-cta .ds-badge{background:linear-gradient(180deg,#F6F7F9,#C9CDD3);color:#0A0B0D;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:0.55rem;letter-spacing:0.09em;padding:3px 6px;border-radius:5px;}
.daily-spin-cta .ds-pips{display:inline-flex;gap:5px;margin-left:1px;}
.daily-spin-cta .ds-pips i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.16);}
.daily-spin-cta .ds-pips i.on{background:#E9EBEE;box-shadow:0 0 7px rgba(255,255,255,0.4);}
.daily-spin-cta .ds-sub{font-family:'Inter',system-ui,sans-serif;font-size:0.84rem;font-weight:400;color:rgba(255,255,255,0.5);margin-top:3px;}
.daily-spin-cta .ds-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#F6F7F9 0%,#D6DAE0 46%,#ABB0B8 100%);color:#0A0B0D;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:0.88rem;padding:11px 18px;border-radius:11px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),inset 0 -1px 0 rgba(0,0,0,0.15);}
@media (max-width:560px){.daily-spin-cta .ds-sub{display:none}.daily-spin-cta .ds-pips{display:none}.daily-spin-cta{padding:13px 14px;gap:12px}.daily-spin-cta .ds-icon{width:42px;height:42px}.daily-spin-cta .ds-btn{padding:10px 14px}}


@media (max-width:760px){
  /* ── RISKFREE strip ──────────────────────────────────────────────────────
     A lit alcove on the left holding the pack, the offer stacked in the middle,
     and the price closing it on the right so the panel's full width does work.
     The wedge is a soft two-stop ramp rather than a hard slab, and the pack is
     tilted with a contact shadow so it sits IN the alcove instead of on it. */
  .lp-rf{position:relative;display:flex;align-items:center;gap:13px;
    margin:0 14px 18px;padding:13px 15px 13px 13px;border-radius:16px;
    text-decoration:none;overflow:hidden;isolation:isolate;
    background:linear-gradient(160deg,#ffffff 0%,#f6f7f4 62%,#eef0ea 100%);
    box-shadow:0 14px 34px -18px rgba(0,0,0,.75);}
  /* the alcove's own light, so the left is a space rather than a colour block */
  .lp-rf::before{content:'';position:absolute;left:0;top:0;bottom:0;width:24%;
    z-index:0;pointer-events:none;
    background:radial-gradient(120% 90% at 22% 40%,rgba(23,105,80,.09) 0%,transparent 70%);}
  /* No hairline: at this size a rule across the panel crosses the headline.
     The two grounds meet on the gradient's own step instead. */
  .lp-rf > *{position:relative;z-index:1;}
  .lp-rf-art{flex:none;width:50px;height:71px;display:block;
    transform:rotate(-6deg);}
  .lp-rf-art img{width:100%;height:100%;object-fit:contain;display:block;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.3));}
  .lp-rf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;
    padding-left:6px;}
  .lp-rf-head{margin-bottom:4px;}
  .lp-rf-head{font-family:'Bricolage Grotesque','Sora',sans-serif;font-size:19px;
    font-weight:800;letter-spacing:-.03em;color:#0d1117;line-height:1.1;}
  /* ONE LINE (founder call 2026-08-30). "Risk-free first pack" was breaking
     before "pack" — it wants a little more room than the middle column has
     between the pack art and the CTA. nowrap forbids the break; the clamp pays
     for it out of the type size rather than the layout, so it still fits on a
     320pt phone and never renders larger than the 19px it was designed at.
     Not a fixed smaller size: at 19px it fits on a big phone and only fails on
     a narrow one, so the size has to follow the width. */
  .lp-rf-head{white-space:nowrap;font-size:clamp(14.5px,4.35vw,19px);}
  /* The promise half of the line, in the campaign's green so the eye lands on
     the money-back part rather than the question. */
  .lp-rf-head em{font-style:normal;color:#136349;}
  .lp-rf-sub{margin-top:4px;}
  .lp-rf-sub{font-family:'Sora',sans-serif;font-size:11.5px;font-weight:500;
    line-height:1.3;color:rgba(20,22,27,.62);white-space:nowrap;}
  /* the right edge earns its space: the price, then the action */
  .lp-rf-end{flex:none;display:flex;align-items:center;padding-left:8px;}
  .lp-rf-price{font-family:'Bricolage Grotesque','Sora',sans-serif;font-size:23px;
    font-weight:800;letter-spacing:-.035em;color:#0d1117;line-height:1;}
  .lp-rf-cta{display:inline-flex;align-items:center;justify-content:center;
    padding:10px 14px;border-radius:999px;background:#0f2a24;color:#fff;
    font-family:'Sora',sans-serif;font-size:11.5px;font-weight:800;
    letter-spacing:.01em;white-space:nowrap;
    box-shadow:0 8px 18px -8px rgba(15,42,36,.6);}
  .lp-rf-code{margin-top:5px;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:9.5px;
    font-weight:600;letter-spacing:.04em;color:rgba(20,22,27,.45);}
  .lp-rf-code b{color:#136349;font-weight:800;letter-spacing:.08em;}
  /* ── page header: the one big statement, like their FEATURED PACKS ── */
  /* ── EVERYTHING ABOVE JUST PULLED SCALES WITH WIDTH ──────────────────
     The tiles are aspect-ratio boxes, so their height already grows with the
     screen. The type and heading margins stacked above and between them did
     NOT, so a good part of the tiles' growth was absorbed by a block whose
     other rows stayed the same height — and Just Pulled barely moved down.
     Measured 375 -> 430: the art grew ~22px while the distance from FEATURED
     PACKS to Just Pulled grew ~10px.
     These are the remaining fixed pieces. Each vw figure is the old pixel value
     at 375px wide, so the small end is unchanged; clamp ceilings stop the type
     running away on a tablet, where this block still applies up to 760px. */
  /* .lp-pagehead has no markup any more -- "Featured Packs" was removed. The
     rule stays as the record of what the headline scale was, because
     .lp-rowtitle below now carries it. */
  .lp-pagehead{font-family:'Bricolage Grotesque','Sora',sans-serif;font-weight:800;
    font-size:clamp(26px,6.93vw,40px);letter-spacing:.01em;text-transform:uppercase;color:#fff;
    margin:0 0 4.8vw;padding:0 14px;}
  /* ── row header: title + chevron left, arrows right ── */
  .lp-rowhead{display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:0 14px;margin:0 0 3.2vw;}
  /* Heading wrapper only -- all the type lives on the anchor, so this must not
     bring an h2's own margin or font size into the flex row. */
  .lp-rowh{margin:0;font:inherit;display:inline-flex;min-width:0;}
  /* Promoted to the page's headline (2026-08-30). Sized between the old
     .lp-pagehead ceiling and the row-title it was, so it leads the page without
     shouting: title case and Sora, not the uppercase Bricolage the old header
     used, because it is still a link to /packs and reads as one.
     Deliberately NOT matched by Just Pulled any more -- that heading copied
     these values when the two were the same rank, and it is a rank below now. */
  .lp-rowtitle{display:inline-flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;
    font-weight:800;font-size:clamp(25px,6.6vw,36px);letter-spacing:-.025em;color:#fff;text-decoration:none;}
  /* em units so the chevron tracks the headline instead of staying at the 15px
     it was hard-coded to when the title was 18px. */
  .lp-rowtitle svg{opacity:.9;width:.62em;height:.62em;flex:none;}
  .lp-rownav{display:flex;align-items:center;gap:14px;}
  .lp-rownav button{width:30px;height:30px;padding:0;border:none;background:none;
    color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:opacity .2s;}
  .lp-rownav button[disabled]{opacity:.3;pointer-events:none;}
  /* ── the row itself: two per page, snapping by pair ── */
  .lp-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    max-width:calc(100% - 28px);margin:0 auto;padding:0;}
  .lp-row::-webkit-scrollbar{display:none;}
  .lp-item{flex:0 0 calc(50% - 6px);text-decoration:none;display:block;}
  .lp-item:nth-child(odd){scroll-snap-align:start;}
  /* A clean two-stop gradient in the pack's own tier colour, not the blurred
     room photo — at tile size that photo read as a smear and the art had to
     compete with it. Now the pack and its slab are the only detail here. */
  /* 5px — the same radius the slab crops use, so a pack tile and the card on
     it are cut to one corner (2026-08-29). */
  .lp-art{display:block;position:relative;width:100%;aspect-ratio:1/1.34;
    border-radius:8px;overflow:hidden;
    /* The tier at full strength but as a LIT surface: a highlight top-left
       falling into shadow at the bottom, so the pack and its slab sit ON the
       colour and cast into something. A flat fill read as a swatch. */
    background:
      radial-gradient(90% 62% at 22% 0%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 58%),
      linear-gradient(152deg,rgba(var(--tc),.85) 0%,rgba(var(--tc),1) 42%,rgba(var(--tc),.55) 100%),
      #0d1015;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -50px 60px -44px rgba(0,0,0,.75);}
  .lp-art img{width:100%;height:100%;object-fit:cover;display:block;}
  /* +25% (2026-08-29): 14 -> 17.5. The tile is the biggest thing on the phone
     page and its label was reading like a caption under it. */
  .lp-name{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(17.5px,4.67vw,25px);color:#fff;
    /* -5px bottom: the price tucks up under the name so the two read as one
       label rather than two lines (2026-08-29). */
    margin:2.9vw 0 -5px;letter-spacing:-.01em;}
  .lp-price{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(17.5px,4.67vw,25px);
    color:rgba(255,255,255,.82);}
  /* 30 -> 12: the row's own label sits inside the block, so 30px underneath it
     plus Just Pulled's section padding read as a dead band (2026-08-29). */
  .lp-block{margin:0;}
  /* ── VERTICAL RHYTHM IS VIEWPORT-RELATIVE (founder call 2026-08-29) ──
     The pack tiles are aspect-ratio boxes, so their HEIGHT grows with the
     screen's width. Every gap around them was a fixed pixel value, so the
     page's rhythm stayed put while the tiles grew: at a wider size the same
     28px reads as a tighter band, and everything below appears not to move
     down in proportion to what grew above it.
     vw units make the spacing grow at the same rate as the art it separates.
     ~5.9vw is the old 22px at 375px wide, so the small end is unchanged and
     only the larger screens open up. */
  .lp-wrap{padding:5.9vw 0 0;}
  /* Pack tile: the room photo behind, the pack left of centre, its top slab
     overlapping from the right — the same composition the picker uses. */
  /* +15% (2026-08-29): 56/59 -> 64/68. left/top come back a little so the pack
     grows from where it sat rather than drifting right and down. */
  /* Bigger again (2026-08-29): the pair should own the tile, and overlapping
     more is explicitly wanted. 64/68 -> 73/77, anchored to the left edge. */
  /* TWO background layers. Layer 1 (--np) is the real pack art; layer 2
     (--np-lqip) is a ~20px inline placeholder set on the element in
     index.html. CSS paints layer 1 over layer 2, so the placeholder is what
     you see until the real file arrives and then it is covered.

     Why it is needed: --np is a CSS background inside this media query, 29%
     into a 162 KB stylesheet, so the HTML preload scanner never sees it and
     the browser only requests it after parsing all this CSS. The tile sat as
     a flat gradient the whole time. The placeholder keeps its alpha, so the
     drop-shadow below -- which is derived from the element's alpha -- lands
     immediately with it instead of popping in later.

     `none` fallback is load-bearing: an undefined var() would invalidate the
     whole declaration at computed-value time and the pack would not paint at
     all. */
  .lp-packart{display:block;position:absolute;left:0%;top:4%;width:73%;height:77%;z-index:2;
    background:var(--np) center/contain no-repeat,
               var(--np-lqip, none) center/contain no-repeat;
    filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));}
  /* !important throughout: .lp-art img above sets width/height 100% + cover for
     the Just-Pulled tiles, and it would otherwise blow the slab up to fill the
     whole pack tile. */
  /* The slab overlaps the pack from the FRONT and sits lower — that offset is
     what makes the pair read as a group rather than two objects side by side.
     The geometry has to be checked, not asserted: the pack art is contain-fit
     (h/w 1.411) so its VISIBLE right edge is the box edge only while the box
     stays width-constrained. At left:3%/width:56% the art ends at 59%, and the
     slab's left edge at 49% buys a real 10%-of-tile overlap. The shadow throws
     left, onto the pack, which is what actually sells the depth order. */
  /* EXACTLY the Just Pulled tile's treatment (partials/jp_tile.html): 4px
     radius, drop-shadow(0 4px 12px rgba(0,0,0,.5)). Do not re-tune these
     independently — the two must match, and both previous attempts here were
     wrong in the same way, by inventing values instead of copying them.

     Radius: a slab photo is an OPAQUE rectangle whose own corners are nearly
     square, so any generous radius clips a visibly round corner out of the PSA
     case. 9px read as a cut-out; 4px reads as the case's own edge.

     Shadow: on an opaque rectangle a shadow of ANY kind is a rectangle, so the
     only thing separating "grounded" from "square region floating behind the
     card" is how tight it is. 0 18px 34px was a slab-sized dark rectangle
     offset below the art. Tight and close, or it reads as a second object. */
  /* right 5 -> 6.5: measured off the tile, the pack's visible left edge sat
     ~6.2% in while the card's right edge sat ~4.9% in, so the composition read
     as pushed right. The pack's own margin is not its box's left value — the
     webp carries transparent padding and is contain-fitted — so this is matched
     against the RENDERED edges, not the boxes (2026-08-29). */
  .lp-slab{position:absolute;right:8%;top:30%;width:50% !important;height:auto !important;
    object-fit:contain !important;z-index:3;border-radius:5px;display:block;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));}
  /* ══ TILE BACKGROUND TRIAL — ?tile=a|b|c|d. Delete the losers once one is
     picked. Any other value (?tile=x) falls through to the base .lp-art rule
     above, which is the flat-reading gradient these are trying to beat.
     Pack row only: the attribute is set server-side inside #lpRowPacks, so the
     Just-Pulled tiles never match. ═══════════════════════════════════════ */

  /* A — SPOTLIGHT. A studio backdrop: bloom behind the pack's shoulder, deep
     falloff into the opposite corner. The tonal range is the point. */
  .lp-art[data-tile="a"]{background:
      /* More gradient, less swatch (2026-08-29). Three changes, all widening the
         tonal range rather than adding a new colour: the top-left bloom is
         brighter and reaches further, the bottom-right falloff goes deeper and
         starts earlier, and the tier ramp itself runs from full strength at the
         top to .34 at the foot instead of stopping at .60 — so the tile reads
         as a lit surface with a real light source rather than a flat panel. */
      radial-gradient(130% 95% at 24% 6%,rgba(255,255,255,.52) 0%,rgba(255,255,255,.16) 32%,rgba(255,255,255,0) 66%),
      /* Lighter corner (2026-08-29): .86 black was draining the tier colour out
         of the bottom-right entirely. The shading stays — it is what makes the
         tile a lit surface — it just no longer bottoms out. */
      radial-gradient(150% 115% at 80% 106%,rgba(0,0,0,.52) 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,0) 78%),
      linear-gradient(160deg,rgba(var(--tc),1) 0%,rgba(var(--tc),.92) 34%,rgba(var(--tc),.74) 68%,rgba(var(--tc),.52) 100%),
      #0b0e13 !important;}

  /* B — DUOTONE SWEEP. Tier colour at the top dropping to near-black at the
     foot, so the tile grounds itself into the page instead of sitting on it. */
  .lp-art[data-tile="b"]{background:
      linear-gradient(200deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 40%),
      linear-gradient(168deg,rgba(var(--tc),.95) 0%,rgba(var(--tc),1) 28%,rgba(10,12,17,.88) 100%),
      #0b0e13 !important;}

  /* C — MESH. Three offset blooms, no linear band anywhere. The one that reads
     least like a swatch, and the one most likely to fight the pack art. */
  .lp-art[data-tile="c"]{background:
      radial-gradient(70% 55% at 18% 8%,rgba(255,255,255,.40) 0%,rgba(255,255,255,0) 60%),
      radial-gradient(85% 70% at 88% 24%,rgba(var(--tc),1) 0%,rgba(var(--tc),.30) 55%,rgba(var(--tc),0) 78%),
      radial-gradient(95% 80% at 12% 92%,rgba(var(--tc),.85) 0%,rgba(var(--tc),.20) 50%,rgba(var(--tc),0) 76%),
      radial-gradient(120% 100% at 60% 55%,rgba(var(--tc),.55) 0%,rgba(8,10,15,.92) 82%),
      #080a0f !important;}

  /* D — GRAIN. A's gradient plus fine noise on soft-light. Kills the flat
     vector read outright; the texture survives at tile size where a gradient
     alone still resolves to one colour. */
  .lp-art[data-tile="d"]{background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E") 0 0/130px 130px repeat,
      radial-gradient(115% 82% at 24% 10%,rgba(255,255,255,.40) 0%,rgba(255,255,255,0) 58%),
      radial-gradient(150% 110% at 80% 106%,rgba(0,0,0,.66) 0%,rgba(0,0,0,0) 72%),
      linear-gradient(160deg,rgba(var(--tc),1) 0%,rgba(var(--tc),.90) 42%,rgba(var(--tc),.52) 100%),
      #0a0d12 !important;
    background-blend-mode:soft-light,normal,normal,normal,normal;}

  /* ── feature banners: eyebrow, headline, then the thing itself ──
     Theirs are light panels on white; ours are raised panels on our black,
     which is the same idea in our palette. */
  .lp-feat{margin:0 14px 14px;padding:20px 16px 18px;border-radius:18px;
    background:linear-gradient(180deg,#14171e,#0d1015);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
  .lp-feat-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);
    margin:0 0 5px;}
  .lp-feat-title{font-family:'Sora',sans-serif;font-weight:800;font-size:19px;
    letter-spacing:-.015em;color:#fff;margin:0 0 16px;}
  .lp-feat-body{background:#0a0c11;border-radius:14px;padding:16px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
  /* buyback: card, then the offer beside it */
  .lp-buyback{display:flex;align-items:center;gap:16px;}
  .lp-buyback img{width:84px;border-radius:5px;flex:none;
    box-shadow:0 10px 24px rgba(0,0,0,.5);}
  .lp-bb-amount{font-family:'Bricolage Grotesque','Sora',sans-serif;font-weight:800;
    font-size:30px;letter-spacing:-.02em;color:#fff;line-height:1;}
  .lp-bb-tag{display:inline-flex;margin-top:9px;padding:5px 11px;border-radius:999px;
    font-family:'Sora',sans-serif;font-weight:800;font-size:12px;
    background:rgba(170,255,0,.16);color:#AAFF00;
    box-shadow:inset 0 0 0 1px rgba(170,255,0,.3);}
  .lp-bb-note{margin-top:9px;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.45);}
  /* a banner body that carries a photograph behind its content */
  .lp-feat-photo{position:relative;background-position:center;background-size:cover;
    background-repeat:no-repeat;overflow:hidden;}
  .lp-feat-photo::before{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(6,8,12,.55),rgba(6,8,12,.82));}
  .lp-feat-photo > *{position:relative;z-index:1;}
  .lp-feat-link{display:block;min-height:132px;text-decoration:none;}
  .lp-feat-cta{display:inline-flex;align-items:center;gap:5px;margin-top:12px;
    font-family:'Sora',sans-serif;font-weight:700;font-size:13px;color:#fff;
    text-decoration:none;}
  /* instagram: a tight grid of the cached photos */
  .lp-ig{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
  .lp-ig img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block;}
  /* vault: a strip of slabs */
  .lp-vault{display:flex;gap:8px;overflow:hidden;}
  .lp-vault img{width:calc(33.333% - 6px);border-radius:5px;flex:none;
    box-shadow:0 8px 18px rgba(0,0,0,.45);}
  /* The rows lead, the hero banners follow — Arena Club puts its featured rows
     first and its promo banners underneath. Flex order on .pk-page's parent is
     not available here (the sections are siblings in <main>), so the mobile
     block is pulled above the hero with a negative order on a flex main. */
  main{display:flex;flex-direction:column;}
  .lp-mobile{order:-1;}
  /* Two banners on phones: the RISKFREE film up top and the Daily Spin coins
     below the rows. The other five hero slides stay in the DOM for desktop and
     are hidden here, and the dots go with them since there is nothing to page. */
  .pv-hero .hero-slide:not(#heroSlideSpin){display:none !important;}
  .pv-hero .hero-dots,.pv-hero .hero-nav,.pv-hero .hero-pause{display:none !important;}
  /* Slides sit at opacity 0 until the carousel JS adds .hero-slide-active. With
     the others hidden there is no rotation to grant it, so the coins slide is
     shown outright. */
  #heroSlideSpin{display:block !important;opacity:1 !important;position:relative !important;}
  /* The hero holds only the coins on phones and sits at the foot with them; the
     RISKFREE offer is its own purpose-built strip below, not the desktop banner
     bent into shape. */
  /* Pulled up tight under Just Pulled: the hero carries desktop padding that
     left a dead band between the two on a phone (2026-08-29). */
  /* -14 was not enough: Just Pulled carries its own bottom padding and the
     hero its own top, so the two stacked into a visible dead band above the
     spin strip. -34 closes it without pulling the strip into the tiles. */
  /* -34 was an overcorrection: it lifted the strip INTO the Just Pulled tiles.
     A small positive gap instead, with the hero's own top padding still off so
     the number here is the whole distance rather than one term of it. */
  .pv-hero{order:9 !important;padding-top:0 !important;margin-top:2.7vw !important;}
  /* Its own top padding was the rest of the gap under the packs row. */
  /* NO negative margin here. A fixed -40px does not scale: on a taller layout
     it dragged Just Pulled up INTO the pack prices and the two overlapped
     (2026-08-29). The gap is closed by removing the real padding instead —
     .pv-section's 1.75rem top on this section — so the section still flows and
     the spacing holds at every width. */
  /* Half the gap above the heading (founder call 2026-08-29).
     Honest note: I could not isolate a single rule producing it. The section's
     own top padding is already 0 here (this rule is last in the cascade, ahead
     of the 34px and 14px !important paddings set earlier in the document), the
     packs section has no bottom padding, and .container adds nothing vertical —
     yet ~90px of dead page sits between the pack price and this heading.
     So this is a measured pull-up rather than a removed source, and it is
     expressed in vw ON PURPOSE: a fixed -40px was tried earlier and, because it
     did not scale with the block above it, dragged the heading INTO the pack
     price at other widths. -11.5vw is ~43px at 375 and grows with the screen,
     so the reduction stays proportional at every size. */
  /* NO negative margin. -11.5vw was a measured pull-up to halve a gap I never
     found the source of, and on a real phone — where that gap is much smaller
     than it measured in the preview harness — it dragged the heading up THROUGH
     the pack price (2026-08-29, live on prod). A pull-up whose size is guessed
     from a screenshot cannot be safe at every width, which is the same mistake
     as the earlier fixed -40px. Positive spacing only: it can be too roomy, but
     it can never collide. */
  .home-just-pulled{padding-top:0 !important;padding-bottom:1.6vw !important;}
  .lp-coinhost{order:9 !important;}
  /* Once index.html's reparent script has moved #heroSlideSpin into
     .lp-coinhost, .pv-hero has no visible child left on a phone: every other
     .hero-slide is `display:none !important` here. It was still reserving its
     box, which is why the page carried a blank band EXACTLY one banner tall
     between Just Pulled and the relocated coins banner — the container was
     sized to hold the banner that is no longer in it.

     The .pv-hero-emptied class is added by that script only after the move
     succeeds, so a page where it never ran keeps the banner in place.

     Every value needs !important: .pv-hero is fought over by ~15 declarations
     across home.css, style.css and visual-next.css, several already
     !important. Not display:none — .pv-hero holds the page's only <h1>. */
  .pv-hero.pv-hero-emptied{
    min-height:0 !important; height:auto !important;
    padding:0 !important; margin:0 !important; border:0 !important;
  }
  /* Condensed to the RISKFREE strip's proportions (founder call 2026-08-28):
     it was a tall stacked poster — headline, paragraph, button, then the coins
     under all of it — running most of a screen for a secondary promo. The strip
     above it says a whole offer in ~97px, so the spinner adopts that grammar:
     art | copy | action, on one line.

     .vbn-copy becomes display:contents so its three children (title, sub, CTA)
     leave the wrapper and become grid items of .vbn-inner directly. Without
     that the copy is one column and the button can never sit on the right —
     and the alternative, moving the button in the markup, would break the
     desktop banner this slide still serves. */
  #heroSlideSpin .vspin-inner,#heroSlideSpin .vbn-inner{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-areas:"art title cta" !important;
    align-items:center !important;justify-items:start !important;
    column-gap:11px !important;row-gap:0 !important;text-align:left !important;}
  #heroSlideSpin .vspin-copy,#heroSlideSpin .vbn-copy{
    display:contents !important;}
  /* The art is a side-by-side column in the desktop banner; on a phone it drops
     under the copy and centres with it. */
  /* The art column stretched to the slide's full height and overlapped the copy
     (both were absolutely stacked in the desktop banner). Fixed height, no
     stretch, and the slide grows to fit the two stacked blocks. */
  #heroSlideSpin{height:auto !important;min-height:0 !important;}
  /* The coins banner was the only full-bleed block on the phone page: the
     RISKFREE strip, the closing banner and the Follow strip all sit 14px in at
     365px wide, this one ran the full 393. Same inset and the closer's 18px
     radius so the foot of the page reads as one column. */
  #heroSlideSpin .vbn{height:auto !important;min-height:0 !important;
    width:auto !important;margin:0 14px !important;
    border-radius:18px !important;overflow:hidden !important;}
  /* Same 13/15 padding as .lp-rf, so the two strips read as one family. */
  #heroSlideSpin .vbn-inner{height:auto !important;min-height:0 !important;
    padding:19px 15px !important;gap:0 !important;}
  /* Type drops to the strip's scale: 15px head (lp-rf-head is 17 on a lighter
     ground), 10px sub. The sub is a 90-character paragraph written for a wide
     banner — clamped to two lines rather than rewritten, because the same
     string still runs full length on desktop. */
  #heroSlideSpin .vbn-title{grid-area:title !important;margin:0 !important;
    font-size:15px !important;line-height:1.12 !important;letter-spacing:-.03em !important;}
  /* The paragraph goes on phones (2026-08-29): "3 free spins. Every day." is
     the whole offer, and the 90-character explainer under it was two clamped
     lines of small grey type doing nothing the headline had not already said.
     The string stays in the DOM for the desktop banner, which still runs it. */
  #heroSlideSpin .vbn-sub{display:none !important;}
  #heroSlideSpin .vbn-cta-row{grid-area:cta !important;margin:0 !important;
    display:flex !important;align-items:center !important;justify-content:flex-end !important;}
  /* The pill matches .lp-rf-cta's box. The arrow goes: at this width it costs
     ~20px that the headline needs more than the button does. */
  #heroSlideSpin .vbn-btn{padding:9px 13px !important;font-size:10.5px !important;
    font-weight:800 !important;white-space:nowrap !important;gap:0 !important;}
  #heroSlideSpin .vbn-btn svg{display:none !important;}
  /* The coin cluster takes the pack's slot on the left. It keeps its own
     overlap (the -24% margins are proportional to --w, so they scale with it)
     and sits in the art column instead of under everything. */
  #heroSlideSpin .vbn-art-spin{grid-area:art !important;
    position:static !important;width:auto !important;
    height:auto !important;flex:none !important;align-self:center !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    margin:0 !important;transform:none !important;}
  /* Coins grow with the taller strip so the art keeps its share of the box. */
  #heroSlideSpin .vspin-coin{--w:32px !important;}
  #heroSlideSpin .vspin-coin.cB{--w:42px !important;}
  /* .vbn-spin-reels is absolutely positioned right/top 50% with a translate in
     the desktop banner — that is what kept the coins over the copy no matter
     what the art column did. Static and centred here. */
  #heroSlideSpin .vbn-spin-reels{position:static !important;transform:none !important;
    right:auto !important;top:auto !important;
    display:flex !important;align-items:center !important;justify-content:center !important;}
  #heroSlideSpin .vbn-spin-glow{display:none !important;}
  /* (the second .vbn-cta-row rule that used to sit here centred the button for
     the stacked poster layout. It came AFTER the grid rules above and, being
     equally !important, quietly won — the button snapped back to the middle of
     the strip. Removed rather than reordered.) */
  /* ── Closing banner ──────────────────────────────────────────────────
     order:10 is load-bearing. main is a flex column here, .lp-mobile is -1 and
     both .pv-hero and .lp-coinhost are 9, so a section at the default 0 would
     land ABOVE the coins, not at the foot. */
  /* 18px above, so the spin banner is not sitting directly on the app ad —
     they were touching, and read as one two-storey block (2026-08-29). */
  .lp-closer{order:10 !important;margin:4.8vw 0 0;}
  /* Condensed to ~a third of the screen (founder call 2026-08-28) — it was
     running a full viewport and pushing everything under it out of sight.
     A STACKED composition cannot hold that budget: a 9/19.5 device tall enough
     to still read as a phone leaves nothing for the headline and two actions.
     So the composition turns on its side — the device takes a left column
     spanning all four content rows and the copy stacks beside it, which is a
     short wide band instead of a tall one.
     Grid, not a new wrapper element, so the markup is untouched. .lpc-bd is
     absolutely positioned, so it stays out of the grid and still covers the
     whole panel. One knob: --lpc-ph is the device height, everything else is
     sized around it. */
  .lpc{--lpc-ph:min(206px,27vh);
    position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"phone ." "phone mark" "phone head" "phone cta" "phone alt" "phone .";
    /* The 1fr rows top and bottom exist to swallow the slack. The device spans
       every row, so it sets the panel's height; without somewhere for the
       leftover to go, grid spreads it BETWEEN the four copy rows and the
       headline drifts away from the button. Here the copy keeps its natural
       spacing and the block centres against the device instead. */
    grid-template-rows:1fr auto auto auto auto 1fr;
    justify-items:start;column-gap:16px;
    text-align:left;text-decoration:none;overflow:hidden;
    padding:16px 18px;border-radius:18px;margin:0 14px;isolation:isolate;}
  /* Brushed light ground: a soft silver sweep with wide diagonal streaks over
     it, then a bloom under where the pack lands so the plate has something to
     sit in rather than on. */
  .lpc-bd{position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(74% 42% at 50% 74%,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 64%),
      repeating-linear-gradient(116deg,
        rgba(255,255,255,0) 0 40px,rgba(255,255,255,.72) 40px 62px,
        rgba(255,255,255,0) 62px 108px),
      linear-gradient(146deg,#fdfdfe 0%,#eceef2 28%,#d7dce3 56%,#eef0f4 80%,#fbfbfd 100%);}
  .lpc > *:not(.lpc-bd){position:relative;z-index:1;}
  /* The V mark, not base.html's sidebar dial glyph — that circle-and-dot is a
     different mark and it was the only place it appeared. The asset is a white
     V on alpha, so brightness(0) makes it black for this light panel while
     keeping the edges; the wordmark stays beside it. */
  .lpc-mark{grid-area:mark;display:inline-flex;align-items:center;gap:6px;
    font-family:'Sora',sans-serif;font-weight:800;font-size:12.5px;
    letter-spacing:-.02em;color:#0b0e13;margin:0 0 6px;}
  .lpc-mark img{display:block;height:15px;width:auto;filter:brightness(0);}
  /* The headline runs the same six slots as the screen and steps with it, so
     the words and the picture change together. Fixed two-line box, clipped, so
     nothing below moves when the copy changes length. */
  /* 21px, not 33: the headline now shares its row with the device rather than
     owning the full panel width, and "Rip. Reveal. / Vault." is the longest
     first line in the strip — at 33px it wrapped to three lines and broke the
     fixed 2.02em box the strip depends on. */
  /* 21 -> 25px: the copy column was running short of its own width, leaving a
     visible slack strip down the right of the banner (2026-08-29). */
  .lpc-head{grid-area:head;position:relative;height:2.02em;width:100%;overflow:hidden;
    font-family:'Bricolage Grotesque','Sora',sans-serif;font-weight:800;
    font-size:25px;line-height:.97;letter-spacing:-.035em;text-transform:uppercase;
    color:#0b0e13;margin:0;}
  /* The second line turns colour, the way theirs does. #136349 is the green the
     RISKFREE strip already uses on white — lime would not survive this ground. */
  .lpc-head em{font-style:normal;color:#136349;}
  /* The primary action is the App Store now, so it is a real link rather than
     a span inside one big anchor — the banner is a <div> and carries two
     destinations. The web route stays reachable underneath rather than being
     traded away for the install. */
  /* Still a 44px-tall target after the shrink — this is the page's primary
     action, so the padding comes off the sides, not off the height. */
  .lpc-cta{grid-area:cta;display:inline-flex;align-items:center;gap:8px;margin-top:12px;
    font-family:'Sora',sans-serif;font-weight:700;font-size:15px;
    color:#fff;background:#0b0e13;border-radius:100px;padding:13px 24px;
    text-decoration:none;box-shadow:0 8px 20px rgba(11,14,19,.3);}
  .lpc-alt{grid-area:alt;display:block;margin:9px 0 0;font-family:'Sora',sans-serif;
    font-weight:600;font-size:12.5px;color:rgba(11,14,19,.5);
    text-decoration:none;border-bottom:1px solid rgba(11,14,19,.2);
    padding-bottom:1px;width:max-content;}
  /* The device. A CSS bezel around a real capture of /packs at 390x844 — the
     product's own chrome, not a drawing of it. Tilted rather than flat so it
     reads as an object on the ground; the shadow is what grounds it.
     Rhythm matches the coins banner: 12 to the headline, 22 to the art, 24 to
     the action. Their pack bleeds off the foot, but theirs has nothing under
     it — a negative margin here put the CTA flush against both the art and the
     panel edge, measured at 0.5px of foot. */
  /* Height-driven now, not width-driven: the band's budget is vertical, so the
     device is sized off --lpc-ph and aspect-ratio derives the width. The bezel
     details (padding, radii, island) scale with it — left at their old values
     a 184px phone reads as a thick frame around a stamp. */
  .lpc-phone{grid-area:phone;position:relative;display:block;box-sizing:border-box;
    /* 9/19.5 -> 9.5/19.5: a true device aspect read as stretched at this size,
       so the frame takes 5% more width for the same height (2026-08-29). */
    width:auto;height:var(--lpc-ph);margin:0;aspect-ratio:9.5/19.5;
    padding:3px;border-radius:20px;
    background:linear-gradient(148deg,#464c55 0%,#191c21 26%,#0b0d10 58%,#2f353d 84%,#565d67 100%);
    box-shadow:0 18px 30px rgba(18,22,30,.4),0 3px 9px rgba(18,22,30,.28);
    transform:perspective(1100px) rotateY(-11deg) rotateX(2deg) rotateZ(-1.5deg);}
  .lpc-island{position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:25%;height:6px;border-radius:100px;background:#05060a;z-index:2;}
  /* The screen and the headline are two filmstrips driven by ONE animation
     each: seven panels, slid a panel at a time. Each panel holds ~1.2s then
     slides to the next over ~0.5s, so the motion is continuous rather than a
     cut, and because the panels physically move past each other nothing is
     ever composited over anything — the earlier cross-fade blended the dark
     packs screen through the rip's gold ground, and per-layer opacity cuts
     still left a boundary sample with two layers up at once.
     The seventh panel repeats the first, so the strip lands on an identical
     image at 100% and the loop restarts with nothing to see.
     Six beats: installing, packs, tearing, slab emerging, graded card, vault.
     Stills, not video — 'hidden-slide video decode' was one of the causes the
     mobile heat pass pinned, and a transform stays on the compositor. */
  @keyframes lpcRoll{
    0%,10.2857%           {transform:translateY(0)}
    14.2857%,24.5714%     {transform:translateY(-12.5%)}
    28.5714%,38.8571%     {transform:translateY(-25%)}
    42.8571%,53.1429%     {transform:translateY(-37.5%)}
    57.1429%,67.4286%     {transform:translateY(-50%)}
    71.4286%,81.7143%     {transform:translateY(-62.5%)}
    85.7143%,96%          {transform:translateY(-75%)}
    100%                  {transform:translateY(-87.5%)}
  }
  .lpc-scr{position:absolute;inset:3px;z-index:0;overflow:hidden;
    border-radius:17px;background:#05060a;}
  .lpc-strip{position:absolute;top:0;left:0;width:100%;height:800%;
    animation:lpcRoll 10.5s cubic-bezier(.72,0,.24,1) infinite;}
  .lpc-strip img{display:block;width:100%;height:12.5%;
    object-fit:cover;object-position:top center;}
  .lpc-hstrip{position:absolute;top:0;left:0;right:0;height:800%;
    animation:lpcRoll 10.5s cubic-bezier(.72,0,.24,1) infinite;}
  .lph{display:block;height:12.5%;}
  /* Reduced motion parks both strips on the vault, so the banner still reads as
     a finished thought rather than a frozen download. */
  @media (prefers-reduced-motion:reduce){
    .lpc-strip,.lpc-hstrip{animation:none;transform:translateY(-75%);}
  }
  /* Glare. Without it the screen reads as a flat pasted rectangle. */
  .lpc-phone::after{content:'';position:absolute;inset:3px;border-radius:17px;
    pointer-events:none;z-index:3;
    background:linear-gradient(122deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 21%,
      rgba(255,255,255,0) 44%);}
  /* ── follow strip ──────────────────────────────────────────────────────
     order:11 puts it below the closer, which is 10. Dark panel on purpose: the
     closer above it is light, and two light panels at the foot read as two
     endings. Same 14px margin and 18px radius so they belong together. */
  /* .lp-follow, not .lp-ig: that class is already defined above as a dead
     3-column grid from a removed mobile feature, and taking the name silently
     turned this section into a grid whose panel collapsed to 167px. */
  /* .lp-follow, not .lp-ig: that class is already defined above as a dead
     3-column grid from a removed mobile feature, and taking the name silently
     turned this section into a grid whose panel collapsed to 167px. */
  /* 30 -> 8 underneath: the footer draws its own top border and carries its own
     margin, so 30px here stacked with that into a visibly empty strip between
     the last post and the rule above "vaultr" (2026-08-29). */
  .lp-follow{order:11 !important;margin:4.3vw 0 2.1vw;}
  /* The header sits above the box on the page itself, and the box is the post —
     nothing but the picture, at its own aspect so nothing is cropped out of it,
     with the caption riding the foot on a scrim. No ring around it either — the
     picture is the whole object. */
  /* Cut down and turned into a rail (founder call 2026-08-28). One post at full
     bleed was a second hero at the foot of the page, taller than the closer
     above it. Now it is a scroll-snap rail of square thumbnails — the same
     shape the desktop section (.home-ig-grid) already uses, so the phone is not
     a second pattern to maintain. Showing several posts is also the honest
     version of "follow us": one picture is a poster, a rail is a feed.
     One knob: --lpig-t is the tile edge. Scroll-snap and momentum only; no JS,
     because a horizontal rail on a touch device already IS a carousel and a
     script would only fight the native scroller. */
  .lpig{display:block;text-decoration:none;}
  .lpig-head{display:flex;align-items:center;gap:8px;margin:0 14px 9px;}
  .lpig-headlink{display:flex;align-items:center;gap:8px;flex:1;min-width:0;
    text-decoration:none;}
  .lpig-nav{flex:none;gap:10px;}
  .lpig-nav button{width:26px;height:26px;}
  .lpig-gl{width:17px;height:17px;flex:none;color:#fff;}
  .lpig-h{font-family:'Bricolage Grotesque','Sora',sans-serif;font-weight:800;
    font-size:15px;letter-spacing:-.02em;color:#fff;}
  /* The handle rides the right of the header now that the caption scrim is
     gone with the big picture — the @ still has to appear somewhere. */
  .lpig-handle{margin-left:auto;padding-right:4px;font-family:'Sora',sans-serif;font-weight:600;
    font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:-.01em;}
  /* MARGIN, not padding (2026-08-29). Padding lives inside the scroller, so it
     scrolls away — once the rail was swiped the tiles ran to the screen edge
     while the app banner above stayed inset at 14px, and the two stopped
     lining up. A margin is outside the scrolling area, so the rail can never
     cross it and the inset holds at every scroll position. 14px matches .lpc's
     own margin, which is what the banner is aligned to.
     (The pack picker wants the opposite — full bleed — and deliberately keeps
     its inset in padding for exactly this reason.) */
  .lpig-rail{--lpig-t:124px;
    display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 14px;padding:2px 0 4px;}
  .lpig-rail::-webkit-scrollbar{display:none;}
  /* ONE tile shape, and it is the shape the feed actually posts in
     (2026-08-29). Measured over the cached feed: 8 of 12 posts are 4:5 portrait
     and the other 4 are exactly 1:1. Letting each tile keep its own width fixed
     the cropping but left a ragged rail of mixed widths. So the tile is 4:5 —
     the majority format, which lands pixel-perfect on those 8 — and anything
     that is NOT that shape is dropped rather than cropped to fit. The script
     below does the dropping, on load, from the image's own natural size: we
     store no per-post dimensions, so this cannot be decided server-side.
     Tiles start hidden and are revealed once measured, so a mismatch is never
     briefly visible. */
  .lpig-cell{flex:0 0 auto;width:var(--lpig-t);aspect-ratio:4/5;
    display:block;border-radius:13px;overflow:hidden;scroll-snap-align:start;
    background:#0e1016;box-shadow:0 8px 20px rgba(0,0,0,.42);
    visibility:hidden;}
  .lpig-cell.ok{visibility:visible;}
  .lpig-cell img{display:block;width:100%;height:100%;object-fit:cover;}
  /* Desktop sections stay off the phone, and this stays off desktop. */
  .lp-hide-mobile{display:none !important;}
}
@media (min-width:761px){ .lp-mobile{display:none !important;} }
@media (min-width:761px){ .lp-closer{display:none !important;} }
@media (min-width:761px){ .lp-follow{display:none !important;} }
/* In the app, neither block has a job (founder call 2026-08-28). The closer
   exists to sell the install — showing it to someone already inside the app is
   a download button for the thing they are holding — and the follow rail is a
   send-them-to-Instagram exit at the foot of the home screen.
   .is-vaultr-app is set on <html> by base.html at documentStart, BEFORE first
   paint, so these never flash in and get pulled. Outside the phone media query
   on purpose: it keys off the app, not off the width. */
html.is-vaultr-app .lp-closer,
html.is-vaultr-app .lp-follow{display:none !important;}


/* ═══ MYSTERY PACKS SECTION ═══ */
.mp-section {
    padding: 2.5rem 0 2rem;
    position: relative;
}

/* Header */
.mp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    gap: 24px;
    flex-wrap: wrap;
}
.mp-header-left { flex: 1; min-width: 0; }
.mp-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.mp-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.mp-eyebrow-line {
    width: 32px;
    height: 2px;
    background: #AAFF00;
    border-radius: 1px;
    box-shadow: 0 0 12px rgba(170, 255, 0,0.4);
}
.mp-eyebrow {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #AAFF00;
}
.mp-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.025em;
    line-height: 1;
}
.mp-tagline {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
    max-width: 480px;
    line-height: 1.5;
}
.mp-header-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    font-variant-numeric: tabular-nums;
}
.mp-header-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.6);
    animation: mpLivePulse 2s ease-in-out infinite;
}
@keyframes mpLivePulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}
.mp-viewall {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.2s, gap 0.2s;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mp-viewall:hover {
    color: #AAFF00;
    gap: 10px;
    border-bottom-color: rgba(170, 255, 0,0.3);
}
.mp-viewall:hover { color: #AAFF00; }

/* ═══ Pack shelf — minimal, price-first ═══ */
.mp-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 8px 0 16px;
    position: relative;
}

.mp-card {
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 10px 16px;
    background: linear-gradient(180deg,#13151b,#0a0c11);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    overflow: visible;
    transition: background 0.35s, border-color 0.35s, transform 0.35s cubic-bezier(0.16,1,0.3,1);
    isolation: isolate;
}
.mp-card:hover {
    transform: translateY(-4px);
}
.mp-card::before { display: none !important; }

/* Accent line — hidden */
.mp-card-accent { display: none; }

/* Featured ribbon — absolutely positioned, doesn't consume layout space */
.mp-ribbon-slot {
    position: absolute;
    left: 0;
    right: 0;
    top: 175px; /* sits just above the price (stage 165px + 28px card padding - ~18px) */
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
}
.mp-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    background: rgba(170, 255, 0,0.1);
    color: #AAFF00;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border: 1px solid rgba(170, 255, 0,0.3);
    border-radius: 99px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mp-ribbon svg { width: 8px; height: 8px; flex-shrink: 0; }

.mp-card-featured::before, .mp-card-featured::after { display: none; }

/* Tier row hidden — we use a cleaner tier label in body */
.mp-card-tier-row { display: none; }

/* Pack stage — tight around the pack, subtle glow */
.mp-card-stage {
    position: relative;
    padding: 16px 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 165px;
    z-index: 1;
    background: transparent;
    border: none;
    border-radius: 14px;
}

/* Plinth — lit elliptical surface under the pack (pedestal spotlight) */
.mp-card-glow {
    position: absolute;
    width: 132px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--tc), 0.30) 0%, transparent 66%);
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(7px);
    opacity: 0.9;
    transition: opacity 0.4s;
    pointer-events: none;
}
.mp-card:hover .mp-card-glow { opacity: 1; }

/* Rays hidden; ring repurposed as the plinth line */
.mp-card-rays { display: none; }
.mp-card-ring {
    display: block;
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 118px;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,0.20),transparent);
    z-index: 1;
    pointer-events: none;
}

/* Top-down spotlight cone in the tier colour (replaces the blurred emblem backdrop) */
.mp-card-stage::before {
    content: '';
    position: absolute;
    inset: -26px -10px -6px -10px;
    z-index: 0;
    background: radial-gradient(72% 92% at 50% -14%, rgba(var(--tc),0.34) 0%, rgba(var(--tc),0.10) 30%, transparent 58%);
    pointer-events: none;
}
.mp-card-stage .np-pack { z-index: 2; }

/* Pack — smaller, straight */
.mp-card .css-pack {
    position: relative;
    z-index: 1;
    transform: scale(0.92);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55));
}
.mp-card:hover .css-pack {
    transform: scale(0.98) translateY(-3px);
}

/* No idle float */
.mp-pack-float { animation: none; }

/* Card body — PRICE IS THE HERO */
.mp-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
.mp-card-body::before { display: none; }

/* Price — massive, dominant */
.mp-card-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 8px;
    position: relative;
    z-index: 2;
    order: 1;
}
.mp-card-price::before { display: none; }

/* Tier label — tiny uppercase, under price */
.mp-card-name {
    font-family: var(--font, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 0;
    max-width: 100%;
    order: 2;
}

/* Scarcity — subtle, below name */
.mp-scarcity {
    order: 3;
    margin: 3px 0 0;
    min-height: 14px;
}
.mp-scarcity-bar { display: none; }
.mp-scarcity-text {
    font-size: 0.56rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}
.mp-scarcity-low { color: #f59e0b !important; }

/* CTA — wraps around the bottom row (the div holding price+cta) */
.mp-card-bottom {
    display: contents;
}

/* CTA — small text-only link with arrow */
.mp-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    font-weight: 800;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.25s, gap 0.25s, letter-spacing 0.25s;
    margin-top: 12px;
    order: 4;
    position: relative;
}
.mp-card-cta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: currentColor;
    opacity: 0.25;
    transition: opacity 0.25s, transform 0.25s;
}
.mp-card-cta svg {
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
    stroke-width: 2.5;
}
.mp-card:hover .mp-card-cta {
    color: rgb(var(--tc));
    gap: 9px;
    letter-spacing: 2.2px;
}
.mp-card:hover .mp-card-cta::after { opacity: 0.7; }
.mp-card:hover .mp-card-cta svg { transform: translateX(2px); }

.mp-card-cta-out {
    color: rgba(255,255,255,0.2) !important;
    cursor: not-allowed;
}
.mp-card:hover .mp-card-cta-out {
    color: rgba(255,255,255,0.2) !important;
    gap: 6px;
    letter-spacing: 2px;
}
.mp-card:has(.mp-card-cta-out):hover { transform: none; }

/* Lime price — only on the Popular (featured) pack */
.mp-card.mp-card-featured .mp-card-price {
    color: #AAFF00;
}
.mp-card[data-tier="grail"]:hover .mp-card-cta {
    color: #AAFF00;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
    .mp-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .mp-card { padding: 24px 14px 18px; }
}
@media (max-width: 768px) {
    .mp-title { font-size: 1.6rem; }
    .mp-tagline { font-size: 0.82rem; }
    .mp-header { margin-bottom: 24px; gap: 16px; }
    .mp-header-right { flex-direction: row-reverse; align-items: center; gap: 16px; }
    .mp-card-stage { min-height: 145px; }
    .mp-card .css-pack { transform: scale(0.85); }
    .mp-card:hover .css-pack { transform: scale(0.9) translateY(-3px); }
    .mp-card-price { font-size: 1.8rem; }
    .mp-card-name { font-size: 0.74rem; }
    .mp-card-cta { font-size: 0.58rem; }
}
@media (max-width: 480px) {
    .mp-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mp-card { padding: 20px 10px 16px; }
    .mp-card-stage { min-height: 135px; }
    .mp-card .css-pack { transform: scale(0.8); }
    .mp-card-price { font-size: 1.6rem; }
    .mp-card-name { font-size: 0.7rem; }
}

/* Vault specimen tray: six individual pack bays in one horizontal run. */
.mp-shelf-wrap{position:relative;padding:8px 0 14px}
.mp-shelf-arrow{
    position:absolute;
    top:50%;
    z-index:12;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    padding:0;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    background:#f5f7f8;
    color:#0b0e13;
    box-shadow:0 12px 32px rgba(0,0,0,.42);
    transition:transform .2s ease,background .2s ease;
    cursor:pointer;
}
.mp-shelf-arrow-prev{left:-14px}
.mp-shelf-arrow-next{right:-14px}
.mp-shelf-arrow:hover{transform:translateY(-50%) scale(1.06);background:#aaff00}
.mp-shelf-arrow:focus-visible{outline:3px solid #aaff00;outline-offset:3px}
.mp-shelf-arrow:disabled{opacity:0;pointer-events:none}
.mp-shelf-arrow[hidden]{display:none}
.shell-guest .mp-strip,.shell-authenticated .mp-strip{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.mp-strip:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:5px}
.mp-strip.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none;scroll-snap-type:none!important}
.shell-guest .mp-card,.shell-authenticated .mp-card{
    display:flex;
    min-width:0;
    min-height:342px;
    padding:14px 14px 15px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.095);
    border-radius:20px;
    background:
        radial-gradient(85% 62% at 50% 21%,rgba(var(--tc),.16),transparent 70%),
        linear-gradient(180deg,#121720 0%,#0a0d12 64%,#080a0e 100%);
    box-shadow:0 18px 38px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);
    transition:transform .24s cubic-bezier(.2,.75,.3,1),border-color .24s ease,background .24s ease;
}
.shell-guest .mp-card::before,.shell-authenticated .mp-card::before{
    content:attr(data-tier);
    position:absolute;
    top:17px;
    right:16px;
    z-index:5;
    color:rgba(235,241,245,.34);
    font:700 .48rem/1 'Space Grotesk',sans-serif;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.shell-guest .mp-card::after,.shell-authenticated .mp-card::after{
    content:"";
    position:absolute;
    inset:0 18px auto;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(var(--tc),.9),transparent);
    opacity:.72;
}
.shell-guest .mp-card:hover,.shell-authenticated .mp-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,255,255,.16);
    background:
        radial-gradient(88% 66% at 50% 19%,rgba(255,255,255,.05),transparent 72%),
        linear-gradient(180deg,#141a24 0%,#0a0d12 64%,#080a0e 100%);
    box-shadow:0 24px 48px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.05);
}
.shell-guest .mp-card-tier-row,.shell-authenticated .mp-card-tier-row{display:none}
.mp-card-tier{font:800 .55rem/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--tc))}
.mp-card-tagline{display:none}
.shell-guest .mp-card-stage,.shell-authenticated .mp-card-stage{
    width:100%;
    height:205px;
    min-height:205px;
    margin:0;
    padding:0;
    border-radius:14px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.022),transparent 70%),
        radial-gradient(55% 18% at 50% 85%,rgba(var(--tc),.18),transparent 78%);
}
.mp-card-stage::before{inset:0;background:radial-gradient(58% 66% at 50% 43%,rgba(var(--tc),.2),transparent 73%)}
.mp-card-stage::after{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:17px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--tc),.52),transparent);
    box-shadow:0 8px 20px rgba(var(--tc),.12);
}
.mp-card-glow{width:118px;height:22px;bottom:12px;opacity:.48;filter:none;background:radial-gradient(ellipse,rgba(var(--tc),.38),transparent 72%)}
.mp-card-ring{bottom:21px;width:88px;opacity:.38}
.mp-card-rays{opacity:.15}
.shell-guest .mp-card .css-pack,.shell-authenticated .mp-card .css-pack{
    position:absolute;
    left:50%;
    top:49%;
    transform:translate(-50%,-50%) scale(.72);
    transform-origin:center center;
    transition:transform .28s cubic-bezier(.2,.75,.3,1),filter .28s ease;
}
.shell-guest .mp-card:hover .css-pack,.shell-authenticated .mp-card:hover .css-pack{transform:translate(-50%,calc(-50% - 5px)) scale(.77);filter:drop-shadow(0 15px 18px rgba(0,0,0,.35))}
.mp-ribbon-slot{left:14px;right:auto;top:14px;bottom:auto;justify-content:flex-start;z-index:6}
.mp-ribbon{padding:4px 9px;background:#dfff87;color:#102000;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.shell-guest .mp-card-body,.shell-authenticated .mp-card-body{
    flex:1;
    align-items:stretch;
    justify-content:flex-start;
    text-align:left;
    width:100%;
    padding:14px 2px 0;
    border-top:1px solid rgba(255,255,255,.065);
}
.shell-guest .mp-card-name,.shell-authenticated .mp-card-name{
    min-height:2.3em;
    order:1;
    margin:0 0 11px;
    color:rgba(241,245,248,.74);
    font:650 clamp(.72rem,.78vw,.84rem)/1.2 'Space Grotesk',sans-serif;
    letter-spacing:-.01em;
}
.mp-card-bottom{display:flex;flex-direction:row;align-items:center;justify-content:space-between;order:4;gap:10px;width:100%;margin-top:auto}
.shell-guest .mp-card-price,.shell-authenticated .mp-card-price{order:initial;margin:0;font-size:clamp(1.55rem,1.8vw,2rem);line-height:1;letter-spacing:-.055em}
.shell-guest .mp-card-cta,.shell-authenticated .mp-card-cta{
    order:initial;
    min-width:72px;
    min-height:38px;
    margin:0;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:rgba(255,255,255,.055);
    color:#fff;
    font-size:.57rem;
    letter-spacing:.13em;
}
.mp-card-cta::after{display:none}
.shell-guest .mp-card:hover .mp-card-cta,.shell-authenticated .mp-card:hover .mp-card-cta{border-color:rgba(var(--tc),.48);background:rgb(var(--tc));color:#090b0e;gap:8px;letter-spacing:.13em}
.mp-scarcity{order:3;margin:-5px 0 7px}
@media(max-width:1400px) and (min-width:1201px){
    .shell-guest .mp-strip,.shell-authenticated .mp-strip{gap:9px}
    .shell-guest .mp-card,.shell-authenticated .mp-card{min-height:322px;padding:11px 11px 13px}
    .shell-guest .mp-card-stage,.shell-authenticated .mp-card-stage{height:186px;min-height:186px}
    .shell-guest .mp-card .css-pack,.shell-authenticated .mp-card .css-pack{transform:translate(-50%,-50%) scale(.65)}
    .shell-guest .mp-card:hover .css-pack,.shell-authenticated .mp-card:hover .css-pack{transform:translate(-50%,calc(-50% - 4px)) scale(.69)}
    .shell-guest .mp-card-price,.shell-authenticated .mp-card-price{font-size:1.55rem}
    .shell-guest .mp-card-cta,.shell-authenticated .mp-card-cta{min-width:60px;padding:0 10px}
}
@media(max-width:1200px){
    .shell-guest .mp-strip,.shell-authenticated .mp-strip{
        display:flex!important;
        gap:12px;
        padding-top:6px;
        padding-bottom:8px;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        scroll-padding-inline:2px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-inline:auto;
        cursor:grab;
        /* manipulation, not auto: auto leaves double-tap-to-zoom armed, so
           tapping quickly through the packs zoomed the page instead of moving
           the strip (Andrew, mobile Safari/Chrome). manipulation keeps panning
           AND pinch-zoom -- it only drops the double-tap gesture, so nobody
           loses the ability to zoom, they just stop doing it by accident. */
        touch-action:manipulation;
    }
    .shell-guest .mp-strip::-webkit-scrollbar,.shell-authenticated .mp-strip::-webkit-scrollbar{display:none}
    body.shell-guest .mp-card,body.shell-authenticated .mp-card{
        flex:0 0 238px!important;
        min-width:238px;
        max-width:238px;
        scroll-snap-align:start;
        scroll-snap-stop:always;
    }
}
@media(max-width:900px){
    body.shell-guest .mp-card,body.shell-authenticated .mp-card{flex-basis:224px!important;min-width:224px;max-width:224px}
    .shell-guest .mp-card,.shell-authenticated .mp-card{min-height:326px}
    .shell-guest .mp-card-stage,.shell-authenticated .mp-card-stage{height:188px;min-height:188px}
    .shell-guest .mp-card .css-pack,.shell-authenticated .mp-card .css-pack{transform:translate(-50%,-50%) scale(.66)}
    .shell-guest .mp-card:hover .css-pack,.shell-authenticated .mp-card:hover .css-pack{transform:translate(-50%,-50%) scale(.69)}
}
@media(max-width:600px){
    .shell-guest .mp-header,.shell-authenticated .mp-header{align-items:end!important;margin-bottom:18px!important}
    .shell-guest .mp-title,.shell-authenticated .mp-title{font-size:1.7rem}
    .shell-guest .mp-tagline,.shell-authenticated .mp-tagline{font-size:.78rem;line-height:1.4;max-width:270px}
    .shell-guest .mp-viewall,.shell-authenticated .mp-viewall{font-size:.68rem;white-space:nowrap}
    .shell-guest .mp-strip,.shell-authenticated .mp-strip{
        margin-inline:calc(var(--vlt-edge) * -1)!important;
        padding-left:var(--vlt-edge)!important;
        padding-right:var(--vlt-edge)!important;
        scroll-padding-left:var(--vlt-edge);
    }
    body.shell-guest .mp-card,body.shell-authenticated .mp-card{flex:0 0 74vw!important;min-width:248px;max-width:288px;min-height:262px;padding:12px 12px 13px!important}
    .shell-guest .mp-card-stage,.shell-authenticated .mp-card-stage{height:194px;min-height:194px}
    .shell-guest .mp-card .css-pack,.shell-authenticated .mp-card .css-pack{transform:translate(-50%,-50%) scale(.68)}
    .shell-guest .mp-card:hover .css-pack,.shell-authenticated .mp-card:hover .css-pack{transform:translate(-50%,-50%) scale(.7)}
    .shell-guest .mp-card-name,.shell-authenticated .mp-card-name{font-size:.78rem}
    .shell-guest .mp-card-price,.shell-authenticated .mp-card-price{font-size:1.8rem}
    .shell-guest .mp-card-cta,.shell-authenticated .mp-card-cta{min-width:76px;min-height:40px}
}
@media(hover:none) and (pointer:coarse){.mp-shelf-arrow{display:none!important}}
@media(prefers-reduced-motion:reduce){.shell-guest .mp-card,.shell-authenticated .mp-card,.mp-card .css-pack{transition:none!important}}



/* Widen past the global 1200px .container cap so the section fills wide monitors
   instead of sitting in a narrow centered column with big empty side margins. */
/* Align to the same left edge + width as every other landing section (hero, Just
   Pulled, Instagram all use min(100% - 48px, 1960px) with a 24px gutter and no extra
   padding). Mystery Packs + How It Works had a wider/narrower cap plus an extra ~3vw
   inline padding, which pushed their content ~35px further right than the rest. */
.home-process > .container { max-width: min(100% - 48px, 1960px) !important; padding-left: 0 !important; padding-right: 0 !important; }
#mystery-packs { max-width: min(100% - 48px, 1960px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Centered, smaller section headers (phygitals "Recent Pulls" pattern: stack the
   title + any side control into a centered column, shrink the oversized titles). */
/* Just Pulled header: arrows flank the title (‹ Just Pulled ›), grey live-dot removed. */
/* Just Pulled header: reverted to prod (left-aligned title, nav to the right) 2026-08-23 per Deniz. */
/* Re-shown 2026-08-29 (founder call): the pack page carries a pulsing green
   live dot on its JUST PULLED and the two pages should read the same. This rule
   is why setting the dot green in home_just_pulled.html appeared to do nothing —
   it was hidden here, further down the cascade, with !important. */
.home-just-pulled #livePullDot { display: inline-block !important; }
/* (Flat-box containers on the pulls clashed with the premium theme — reverted to the pedestal
   showcase. Header change above kept: arrows flank the title, no live-dot.) */
/* Match the Just Pulled tile width to the Mystery Packs cards (~260px) for consistency across
   the two rows. Safe: the slab/pedestal/glow are % of card width so they scale together; the
   vertical plinth (stage height, slab margin) is untouched.

   DESKTOP ONLY as of 2026-08-29. This sat at top level with !important and
   later in the document than the phone rules in partials/home_just_pulled.html,
   so it silently won everywhere and pinned every phone tile to 252px — which is
   why the row kept showing two tiles however the phone flex-basis was set. The
   phone wants three per track and computes its own width. */
@media (min-width:761px){
  .home-just-pulled .potd-card { flex: 0 0 clamp(252px, 19vw, 268px) !important; }
}
/* Mystery Packs: title centered on ONE row, EXPLORE ALL floated to the right, so the
   title sits directly above the pack shelf (no button stacked between them). */
/* Mystery Packs header: reverted to prod's space-between (title left, EXPLORE right) 2026-08-23 per Deniz — the centered title + absolute EXPLORE mangled on mobile Safari. */
/* (Just Pulled title centering/size override removed — matches prod's left-aligned header.) */
/* How It Works heading — smaller (stays left-aligned). */
#home-process-title { font-size: clamp(1.7rem, 3vw, 2.1rem) !important; }
.hiw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 5vw, 112px); align-items: start; margin-top: 46px; }

/* Stage pins while the steps scroll past it. */
.hiw-stage { position: sticky; top: 88px; z-index: 3; }
.hiw-stage-inner {
    position: relative; aspect-ratio: 3 / 4;
    width: 100%; max-width: calc((100dvh - 200px) * 0.75); margin: 0 auto;
    display: grid; place-items: center;
    border: 0;
    background: none;
    overflow: hidden;
}
.hiw-vis {
    position: absolute; inset: 0; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.965); pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.hiw-vis.is-active { opacity: 1; transform: none; }
.hiw-vis { padding: 30px 26px; }

/* 01 — the packs you're choosing between */
.hiw-packs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr;
    gap: 18px 5%; align-items: end; width: 100%; flex: 1 1 auto; min-height: 0;
}
.hiw-pack { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; flex: 1 1 0; }
.hiw-vis .hiw-pack img {
    flex: 1 1 0; min-height: 0; height: 0 !important;
    width: 100% !important; max-width: 100% !important; max-height: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 16px 30px rgba(0,0,0,0.6));
}
.hiw-pack-name {
    margin-top: 10px; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.9px; color: rgba(255,255,255,0.62);
}
.hiw-pack-price {
    margin-top: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92rem; font-weight: 700; color: #fff; letter-spacing: -0.02em;
}

/* 02 — a belt of real pulls running through the panel */
.hiw-belt { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; }
.hiw-belt::before, .hiw-belt::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none; }
.hiw-belt::before { left: 0; background: linear-gradient(90deg, #07090d, rgba(7,9,13,0)); }
.hiw-belt::after { right: 0; background: linear-gradient(270deg, #07090d, rgba(7,9,13,0)); }
.hiw-belt-track { display: flex; align-items: center; gap: 14px; width: max-content; height: 62%; animation: hiwBelt 42s linear infinite; will-change: transform; }
.hiw-belt-item { display: block; height: 100%; flex: none; }
.hiw-vis .hiw-belt-item img {
    display: block; width: auto !important; height: 100% !important;
    max-width: none !important; max-height: none !important; object-fit: contain !important;
    border-radius: 5px;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55)) drop-shadow(0 16px 30px rgba(0,0,0,0.45));
}
@keyframes hiwBelt { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.hiw-belt:hover .hiw-belt-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hiw-belt-track { animation: none; } .hiw-belt { overflow-x: auto; } }
/* (No mobile rule for .hiw-belt on purpose: .hiw-stage is display:none below
   900px, so that belt is desktop-only. The phone layout uses .hiw-step-belt.) */

/* 03 — the three options, spelled out */
.hiw-opts { list-style: none; margin: 0; padding: 0; width: 100%; flex: none; display: flex; flex-direction: column; gap: 12px; }
.hiw-opts li {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 18px; text-align: left;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    background: rgba(255,255,255,0.035);
}
.hiw-opt-ic {
    flex: none; display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 9px;
    background: #000; border: 1px solid rgba(255,255,255,0.22); color: #fff;
}
.hiw-opt-txt strong { display: block; font-size: 0.98rem; font-weight: 800; color: #fff; }
.hiw-opt-txt small { display: block; margin-top: 3px; font-size: 0.78rem; line-height: 1.45; color: rgba(255,255,255,0.56); }

.hiw-cap { margin-top: 20px; flex: none; text-align: left; }
.hiw-cap-center { text-align: center; }
.hiw-chip {
    display: inline-block; margin-bottom: 9px;
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
    color: rgba(255,255,255,0.78);
    border: 1px solid rgba(255,255,255,0.24); border-radius: 100px; padding: 5px 11px;
}
.hiw-chip-live { color: #fff; border-color: rgba(255,255,255,0.42); }
.hiw-cap strong { display: block; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.hiw-cap small { display: block; margin-top: 6px; font-size: 0.76rem; line-height: 1.45; color: rgba(255,255,255,0.52); }

.hiw-step-vis { display: none; align-items: center; justify-content: center; gap: 10px;
    width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
    height: 132px; margin-bottom: 14px; }
.hiw-step-vis img { height: 88%; width: auto; object-fit: contain; }
.hiw-step-vis-packs { gap: 4px; padding: 0 4px; }
.hiw-step-vis-packs img { height: auto; width: calc((100% - 20px) / 6); max-height: 92%; object-fit: contain; }

/* Step 2 belt — track duplicated, animation ends at exactly -50% so it loops
   seamlessly; transform only, to stay off the paint path. */
.hiw-step-vis-belt { overflow: hidden !important;
    position: relative; width: 100% !important; max-width: 100% !important; }
.hiw-step-vis-belt .hiw-step-belt { height: 100%; align-items: center; }
.hiw-step-vis-belt::before, .hiw-step-vis-belt::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.hiw-step-vis-belt::before { left: 0; background: linear-gradient(90deg, #0b0d11, rgba(11,13,17,0)); }
.hiw-step-vis-belt::after { right: 0; background: linear-gradient(270deg, #0b0d11, rgba(11,13,17,0)); }
.hiw-step-belt {
    display: flex; align-items: center; gap: 9px; width: max-content; height: 84%;
    animation: hiwStepBelt 34s linear infinite; will-change: transform;
}
.hiw-step-belt img { height: 100%; width: auto; border-radius: 4px;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55)); }
@keyframes hiwStepBelt { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .hiw-step-belt { animation: none; } }

/* Step 3 options — icon tiles instead of bare pills. */
.hiw-step-vis-icons { gap: 10px; }
.hiw-opt-tile { display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 16px; min-width: 84px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; }
.hiw-opt-glyph { display: grid; place-items: center; width: 32px; height: 32px;
    border-radius: 9px; background: #000; border: 1px solid rgba(255,255,255,0.18); color: #fff; }
.hiw-opt-label { font-size: 0.62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,0.82); }
.hiw-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 0 14vh; display: flex; flex-direction: column; gap: 8px; }
.hiw-step {
    position: relative; padding: 30px 0 30px 28px;
    border-left: 2px solid rgba(255,255,255,0.09);
    opacity: 0.4; transition: opacity 0.35s ease, border-color 0.35s ease;
}
.hiw-step.is-active { opacity: 1; border-left-color: #fff; }
.hiw-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hiw-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem; font-weight: 700; color: rgba(255,255,255,0.42);
    transition: color 0.35s ease;
}
.hiw-step.is-active .hiw-num { color: #fff; }
.hiw-step-head em {
    font-style: normal; font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4);
}
.hiw-step, .hiw-step h3, .hiw-step p, .hiw-step-head { text-align: left; }
.hiw-step h3 { margin: 0 0 10px; font-size: 1.32rem; font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.hiw-step .home-process-detail i { background: rgba(255,255,255,0.7) !important; }
.hiw-step .home-process-detail {
    display: inline-flex; align-items: center; gap: 8px;
    justify-content: flex-start; width: auto;
}
.hiw-step p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 46ch; }
.hiw-step .home-process-detail { margin-top: 14px; }

@media (max-width: 900px) {
    /* Sticky still works here — the stage parks at the top and the steps run
       under it, so the visual stays on screen without duplicating markup. */
    .hiw { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 22px; align-items: start; }
    .hiw-steps, .hiw-step { min-width: 0 !important; max-width: 100% !important; }
    .hiw-stage { display: none !important; }
    .hiw-step-vis { display: flex !important; }
    /* Belt needs block, not flex, so its max-content track can't stretch
       the step. Scoped here so it stays off the desktop layout, which
       already has the belt in the sticky stage. */
    .hiw-step-vis-belt { display: block !important; }
    .hiw-step-belt { animation-duration: 22s; }
    .hiw-stage-inner { aspect-ratio: 16 / 11 !important; max-width: none !important; max-height: 232px !important; }
    .hiw-stage-inner { aspect-ratio: 3 / 4 !important; }

    /* Step 1 — one pack, not a 3x2 grid. */
    .hiw-packs { display: block !important; position: relative; }
    .hiw-pack { display: none !important; }
    .hiw-pack:first-child {
        display: flex !important; height: 100% !important;
        align-items: center !important; justify-content: center !important;
    }
    .hiw-vis .hiw-pack:first-child img {
        flex: none !important; height: auto !important; width: auto !important;
        max-height: 94% !important; max-width: 40% !important;
    }
    .hiw-pack-price { display: none !important; }

    /* Step 2 — one real slab, not a rail of 30px cards. */
    .hiw-belt { justify-content: center !important; align-items: flex-start !important; padding-bottom: 6px !important; }
    .hiw-belt::before, .hiw-belt::after { display: none !important; }
    .hiw-belt-track { animation: none !important; height: 100% !important; width: auto !important; }
    .hiw-belt-item { display: none !important; }
    .hiw-belt-item:first-child { display: block !important; height: 100% !important; }
    .hiw-vis .hiw-belt-item:first-child img {
        height: 148px !important; width: auto !important; max-width: none !important;
    }

    /* Step 3 — rows stay, just tighter. */
    .hiw-opts { gap: 7px !important; }
    .hiw-opts li { padding: 7px 8px !important; gap: 7px !important; }
    .hiw-opt-ic { width: 24px !important; height: 24px !important; border-radius: 6px !important; }
    .hiw-opt-ic svg { width: 13px !important; height: 13px !important; }
    .hiw-opt-txt strong { font-size: 0.74rem !important; }
    .hiw-opt-txt small { font-size: 0.56rem !important; line-height: 1.3 !important; }
    .hiw-vis { padding: 12px 10px !important; }
    .hiw-belt-track { height: 62% !important; gap: 8px !important; }
    .hiw-belt::before, .hiw-belt::after { width: 8% !important; }
    .hiw-stage { align-self: center !important; top: 96px !important; }
    .hiw-steps { padding-bottom: 4vh !important; }
    .hiw-steps { padding-bottom: 8vh; }
    .hiw-step {
        min-height: 0;
        display: flex; flex-direction: column; justify-content: flex-start;
        padding: 14px 0 14px 12px;
        opacity: 1;                     /* all three readable, not just the active one */
    }
    .hiw-step:not(.is-active) { border-left-color: rgba(255,255,255,0.09); }
    .hiw-steps { padding-bottom: 0 !important; }
    .hiw-step h3 { font-size: 0.92rem; }
    .hiw-step p { font-size: 0.72rem; line-height: 1.45; }
    .hiw-step-head { gap: 7px; margin-bottom: 7px; }
    .hiw-num { font-size: 0.62rem; }
    .hiw-step-head em { font-size: 0.5rem; letter-spacing: .06em; }
    .hiw-step .home-process-detail { font-size: 0.6rem; margin-top: 9px; }
    .hiw-pack-name { display: none !important; }
    .hiw-panel-foot, .hiw-cap { margin-top: 8px !important; }
    .hiw-pack-price { font-size: 0.66rem !important; margin-top: 3px !important; }
    .hiw-cap small { font-size: 0.6rem; }
    .hiw-cap strong { font-size: 0.8rem; }
    .hiw-stage { top: 62px; }
    .hiw-stage-inner { background: #07090d; box-shadow: 0 18px 34px rgba(0,0,0,0.6); }
    .hiw-stage-inner { aspect-ratio: 3 / 4; max-width: none; max-height: calc(100dvh - 220px); }
    .hiw-vis img { max-width: 46%; max-height: 82%; }
    .hiw-step { padding: 22px 0 22px 20px; }
    .hiw-step h3 { font-size: 1.12rem; }
    .hiw-vis { padding: 16px 14px; }
    .hiw-cap { margin-top: 12px; }
    .hiw-cap strong { font-size: 0.94rem; }
    .hiw-cap small { font-size: 0.7rem; }
    .hiw-opts { gap: 8px; }
    .hiw-opts li { padding: 10px 11px; gap: 10px; }
    .hiw-opt-ic { width: 28px; height: 28px; border-radius: 7px; }
    .hiw-opt-ic svg { width: 15px; height: 15px; }
    .hiw-opt-txt strong { font-size: 0.86rem; }
    .hiw-opt-txt small { font-size: 0.7rem; margin-top: 1px; }
    .hiw-packs { gap: 10px 4%; }
    .hiw-vis .hiw-reveal img.hiw-reveal-side { display: none; }
    .hiw-pack-name { margin-top: 6px; font-size: 0.52rem; letter-spacing: 0.5px; }
    .hiw-pack-price { font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hiw-vis { transition: opacity 0.01s; transform: none; }
    .hiw-step { transition: none; }
}


.bp-showcase { padding: 3rem 0; }
/* Widen past the global 1200px .container cap so the feature card fills wide
   monitors instead of a narrow centered column with empty side margins. */
.bp-showcase > .container { max-width: min(100% - 48px, 1560px) !important; }
.bp-inner {
    position: relative;
    display: block;
    padding: 40px 52px;
    background: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, rgba(139,92,246,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.bp-inner:hover { border-color: rgba(245,158,11,0.25); transform: translateY(-3px); color: inherit; }
.bp-glow {
    position: absolute;
    top: 50%;
    left: 12%;
    transform: translateY(-50%);
    width: 260px;
    height: 340px;
    background: radial-gradient(circle, rgba(245,158,11,0.14) 0%, transparent 70%);
    filter: blur(32px);
    pointer-events: none;
    z-index: 0;
    animation: bpGlow 4s ease-in-out infinite alternate;
}
@keyframes bpGlow {
    0% { opacity: 0.5; transform: translateY(-50%) scale(0.9); }
    100% { opacity: 1; transform: translateY(-50%) scale(1.1); }
}
.bp-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 44px;
}
.bp-image {
    flex: 0 0 auto;
    filter: drop-shadow(0 16px 40px rgba(0,0,0,0.65));
}
.bp-image img {
    width: 180px;
    height: auto;
    border-radius: 6px;
    display: block;
}
.bp-text {
    flex: 1 1 auto;
    min-width: 0;
}
.bp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: 10px;
}
.bp-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245,158,11,0.5);
    animation: bpDotPulse 2s ease-in-out infinite;
}
@keyframes bpDotPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}
.bp-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bp-meta {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 18px;
    line-height: 1.5;
}
.bp-meta strong { color: rgba(255,255,255,0.75); font-weight: 700; }
.bp-value-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}
.bp-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: #AAFF00;
    letter-spacing: -0.03em;
    line-height: 1;
}
.bp-cta {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
    transition: color 0.2s, transform 0.2s;
}
.bp-inner:hover .bp-cta { color: #AAFF00; transform: translateX(4px); }

@media (max-width: 640px) {
    .bp-showcase { padding: 2rem 0; }
    .bp-inner { padding: 32px 24px; }
    .bp-row { flex-direction: column; text-align: center; gap: 24px; }
    .bp-eyebrow { justify-content: center; }
    .bp-image img { width: 140px; }
    .bp-title { font-size: 1.35rem; }
    .bp-value { font-size: 2rem; }
    .bp-value-row { justify-content: center; }
    /* Mobile glow WITHOUT the per-frame blur: animating filter:blur(32px) froze
       Safari scroll (Andrew + Deniz repro'd 2026-05-23). Bake the softness into a
       wider gradient falloff and keep the keyframes (opacity/scale only) — same
       pulse, pure compositor work. Dot pulse restored (it was collateral). */
    .bp-glow { filter: none; width: 320px; height: 400px;
               background: radial-gradient(circle, rgba(245,158,11,0.11) 0%, rgba(245,158,11,0.05) 38%, transparent 66%); }
    .bp-image { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
}
html[data-theme="light"] .bp-inner {
    background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(139,92,246,0.06) 100%);
    border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .bp-inner:hover { border-color: rgba(245,158,11,0.3); }
html[data-theme="light"] .bp-title { color: #111; }
html[data-theme="light"] .bp-meta { color: rgba(0,0,0,0.55); }
html[data-theme="light"] .bp-meta strong { color: #111; }
html[data-theme="light"] .bp-value { color: #16a34a; }


/* ── Smooth scroll ────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Just Pulled flip & float ─────────────────── */
@media (hover: hover) {
    .jp-flip-container:hover .jp-flip-inner { transform: rotateY(180deg); }
}
@media (hover: none) {
    .jp-flip-container.flipped .jp-flip-inner { transform: rotateY(180deg); }
}

/* ── Hero ──────────────────────────────────────── */
.pv-hero {
    background: linear-gradient(180deg, #0a0b10 0%, #111318 50%, #0a0b10 100%);
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    min-height: 520px;
}
.pv-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 65% 40%, rgba(170, 255, 0,0.04) 0%, transparent 50%);
    pointer-events: none;
}
.pv-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
}
.pv-hero-inner {
    display: flex;
    align-items: center;
    padding: 3.5rem 3rem;
    padding-top: 80px;
    gap: 2rem;
    min-height: 600px;
    position: relative;
    z-index: 1;
    max-width: min(1680px, 94vw);   /* fluid: fills wide screens; cards scale with it (below) */
    margin: 0 auto;
    max-width: 1100px;
    margin: 0 auto;
}
.pv-hero-text { flex: 1; min-width: 260px; }
.pv-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.75rem;
    letter-spacing: -0.03em;
    color: #fff;
}
.pv-hero-sub {
    color: rgba(255,255,255,0.45);
    font-size: 1.1rem;
    margin-bottom: 1.75rem;
    max-width: 440px;
    line-height: 1.6;
}
.pv-hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pv-hero-btn { border-radius: 100px !important; padding: 0.85rem 2.25rem !important; font-weight: 700 !important; transition: all 0.2s !important; }
.pv-hero-btn.btn-primary { background: #AAFF00 !important; color: #000 !important; border: none !important; box-shadow: 0 4px 24px rgba(170, 255, 0,0.3) !important; font-weight: 800 !important; }
.pv-hero-btn.btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 36px rgba(170, 255, 0,0.4) !important; filter: brightness(1.1) !important; }
.pv-hero-btn.btn-secondary { background: transparent !important; color: rgba(255,255,255,0.5) !important; border: 1.5px solid rgba(255,255,255,0.12) !important; }
.pv-hero-btn.btn-secondary:hover { border-color: rgba(255,255,255,0.25) !important; color: #fff !important; }
.pv-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-width: 360px;
    position: relative;
    /* Taller so the fan has breathing room + rotated wings don't clip */
    height: 320px;
    padding-bottom: 16px;
}
/* Four-pack fan — hand-of-cards spread.
   - Outer packs (Starter, Grail): higher rotation (±22°), smaller scale,
     lower vertical offset so the fan curves down at the wings.
   - Inner pair (Pro, Master): gentler rotation (±8°), slightly larger
     scale, lifted a bit so the arc "rises" at center.
   - Drop shadows on each card give lift from the backdrop.
   - transform-origin: bottom center so rotation pivots at the base —
     looks like cards sitting on an invisible table, not spinning in
     place from the middle. */
.pv-hero-pack {
    position: absolute;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: bottom center;
    filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.55));
    -webkit-tap-highlight-color: transparent;   /* no iOS dark tap-flash on the tappable pack */
    -webkit-touch-callout: none;
    user-select: none;
}
.pv-hero-pack-1 {
    left: 6%;
    bottom: 60px;
    transform: rotate(-22deg) scale(0.88);
    z-index: 1;
}
.pv-hero-pack-2 {
    left: 28%;
    bottom: 80px;
    transform: rotate(-8deg) scale(0.99);
    z-index: 3;
}
.pv-hero-pack-3 {
    right: 28%;
    bottom: 80px;
    transform: rotate(8deg) scale(0.99);
    z-index: 2;
}
.pv-hero-pack-4 {
    right: 6%;
    bottom: 60px;
    transform: rotate(22deg) scale(0.88);
    z-index: 1;
}
/* Hover the hero → fan opens out slightly, cards lift. Makes the
   hand feel alive + signals they're tappable. */
.pv-hero-visual:hover .pv-hero-pack-1 { transform: rotate(-25deg) scale(0.88) translateY(-4px); }
.pv-hero-visual:hover .pv-hero-pack-2 { transform: rotate(-10deg) scale(0.99) translateY(-6px); }
.pv-hero-visual:hover .pv-hero-pack-3 { transform: rotate(10deg)  scale(0.99) translateY(-6px); }
.pv-hero-visual:hover .pv-hero-pack-4 { transform: rotate(25deg)  scale(0.88) translateY(-4px); }

/* ── Card rip: each pack rips a small fanned STACK of tier-matched graded
   scans up out of its mouth, holds (satisfying linger), then slowly retracts.
   The .pv-rip-stack wrapper does the slow rip motion; the cards inside are
   statically fanned. Stack sits behind the translucent pack so it emerges
   above the pack top. ── */
.pv-rip-stack {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 86px;
    height: 147px;
    margin-left: -43px;
    opacity: 0;
    transform: translateY(0);
    pointer-events: auto;
    transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease;
    animation: pvRip 8s ease-in-out infinite;
}
.pv-rip-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.16);
    background: #14181c;
    transition: transform 0.58s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease;
}
.pv-rip-card-l { transform: translateX(-16px) rotate(-8deg); z-index: 1; }
.pv-rip-card-r { transform: translateX(16px)  rotate(8deg);  z-index: 1; }
.pv-rip-card-c { z-index: 2; }
/* Hover to examine. The rip is an infinite CSS animation, and a CSS transition
   can't glide smoothly *from* a running animation's value — it snaps. So the JS
   commitStyles()-pins the live pose into inline styles, kills the keyframe loop,
   then lets the .pv-rip-stack transition glide it up to the examine height (and
   restores the loop on mouse-out). The cards fan via the rules below. */
/* Headline (center) card pulls forward big + glows; the other two fan out and
   sit back behind it, so the hovered pack reads as "here's the chase, look." */
.pv-rip-stack.is-examining .pv-rip-card-l { transform: translateX(-58px) translateY(10px) rotate(-20deg) scale(0.98); }
.pv-rip-stack.is-examining .pv-rip-card-r { transform: translateX(58px)  translateY(10px) rotate(20deg)  scale(0.98); }
.pv-rip-stack.is-examining .pv-rip-card-c { transform: translateY(-16px) scale(1.26); z-index: 3; }
.pv-rip-stack.is-examining .pv-rip-card { box-shadow: 0 14px 36px rgba(0,0,0,0.55); }
.pv-rip-stack.is-examining .pv-rip-card-c { box-shadow: 0 20px 46px rgba(0,0,0,0.62), 0 0 28px rgba(170, 255, 0,0.3); }
@keyframes pvRip {
    0%, 6%   { transform: translateY(0);     opacity: 0; }
    14%      { opacity: 1; }
    32%, 58% { transform: translateY(-98px); opacity: 1; }   /* slow rise, then linger */
    84%      { transform: translateY(0);     opacity: 0; }    /* slow retract + fade */
    100%     { transform: translateY(0);     opacity: 0; }
}
.pv-rip-starter  .pv-rip-card { box-shadow: 0 0 18px 1px rgba(61,220,145,0.5); }
.pv-rip-standard .pv-rip-card { box-shadow: 0 0 18px 1px rgba(80,140,255,0.5); }
.pv-rip-premium  .pv-rip-card { box-shadow: 0 0 20px 1px rgba(255,200,50,0.55); }
.pv-rip-grail    .pv-rip-card { box-shadow: 0 0 20px 1px rgba(255,80,50,0.55); }
/* Small ripple stagger so the four stacks rise in a gentle wave. */
.pv-hero-pack-1 .pv-rip-stack { animation-delay: 0s; }
.pv-hero-pack-2 .pv-rip-stack { animation-delay: 0.45s; }
.pv-hero-pack-3 .pv-rip-stack { animation-delay: 0.9s; }
.pv-hero-pack-4 .pv-rip-stack { animation-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) {
    .pv-rip-stack { display: none; }
}

/* Constant, seamless foil shimmer on all four hero packs. Replaces the per-tier
   translateX foil-sweeps (master-foil-sweep / grail-foil-sweep) that snapped
   back at every loop. Scrolls the foil gradient by exactly one tile so it loops
   with no visible cut; scoped to .pv-hero-pack so other surfaces are untouched. */
.pv-hero-pack .css-pack-foil {
    background-size: 200% 100%;
    background-repeat: repeat;
    transform: none !important;
    animation: pvFoilScroll 4.5s linear infinite;
}
@keyframes pvFoilScroll {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pv-hero-pack .css-pack-foil { animation: none; }
}
/* Foil shimmer now runs on phones too, for parity with desktop (Deniz, 2026-06-08).
   Caveat: background-position is a per-frame main-thread repaint on all 4 packs, so
   if phones stutter or warm up, slow pvFoilScroll or rebuild it as a GPU transform
   sweep. Reduced-motion users still get it off via the rule above. */

/* ── Hero-to-content fade ─────────────────────── */
.pv-hero::after {
    background: none;
}

/* ── Trust bar ─────────────────────────────────── */
.pv-trust {
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pv-trust-row {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.pv-trust-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.pv-trust-item svg { opacity: 0.7; width: 22px; height: 22px; }

/* ── Section headers ───────────────────────────── */
.pv-section { padding: 1.75rem 0; }
.pv-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.pv-section-title {
    font-size: 1.5rem;
    font-weight: 800;
}
.pv-section-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent, #3b82f6);
    text-decoration: none;
}
.pv-section-link:hover { text-decoration: underline; }

/* ── Hot cards grid ────────────────────────────── */
.pv-hot-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    overflow: hidden;
}
.pv-hot-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
    transition: background 0.15s;
}
.pv-hot-card:last-child { border-bottom: none; }
.pv-hot-card:hover { background: rgba(255,255,255,0.03); }
.pv-hot-card-rank {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
    min-width: 30px;
    text-align: center;
}
.pv-hot-card-img {
    width: 48px;
    height: 67px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.pv-hot-card-info { flex: 1; min-width: 0; }
.pv-hot-card-title {
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pv-hot-card-set {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}
.pv-hot-card-price {
    font-weight: 800;
    font-size: 1rem;
    color: #10b981;
    white-space: nowrap;
}

/* ── Sales list ────────────────────────────────── */
.pv-sales-list {
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    overflow: hidden;
}
.pv-sale-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
    transition: background 0.15s;
}
.pv-sale-row:last-child { border-bottom: none; }
.pv-sale-row:hover { background: rgba(255,255,255,0.03); }
.pv-sale-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.08);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.pv-sale-price { font-weight: 800; font-size: 1rem; min-width: 70px; }
.pv-sale-card { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.pv-sale-img { width: 44px; height: 60px; object-fit: cover; border-radius: 6px; }
.pv-sale-title { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.pv-sale-set { font-size: 0.8rem; color: var(--text-muted, #9ca3af); }
.pv-sale-users { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--text-muted, #9ca3af); white-space: nowrap; }

/* ── Feature banners row ───────────────────────── */
.pv-feature-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.pv-feature-banner {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(255,255,255,0.06);
}
.pv-feature-banner:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.pv-feature-banner-bg { position: absolute; inset: 0; }
.pv-feature-banner-body { position: relative; z-index: 1; padding: 1.5rem; }

/* ── Bottom cards (feedback + mobile) ──────────── */
.pv-bottom-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.pv-bottom-card {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 1.5rem;
}
.pv-bottom-mobile {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}
.pv-mobile-mockup {
    width: 80px;
    height: 140px;
    background: #0f172a;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.15);
    padding: 8px;
    flex-shrink: 0;
    position: relative;
}
.pv-mobile-mockup::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}
.pv-mobile-screen { padding-top: 10px; }

/* ── Stats bar ─────────────────────────────────── */
.pv-stats { padding: 2rem 0; border-top: 1px solid rgba(255,255,255,0.04); background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%); }
.pv-stats-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.pv-stat { text-align: center; }
.pv-stat-num { font-size: 2rem; font-weight: 900; }
.pv-stat-label { font-size: 0.8rem; color: var(--text-muted, #9ca3af); text-transform: uppercase; letter-spacing: 1px; }

/* ── Live badge ────────────────────────────────── */
.live-badge {
    display:inline-block;font-size:0.55em;background:#EF4444;color:#fff;padding:2px 8px;
    border-radius:20px;vertical-align:middle;margin-left:8px;letter-spacing:1px;font-weight:700;
    animation:pulse-badge 2s infinite;
}
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:.6} }
.pull-card-new { animation: slideIn 0.4s ease-out; }
@keyframes slideIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* ── News grid ──────────────────────────────────── */
.pv-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.pv-news-hero {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.pv-news-hero-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pv-news-hero-emoji {
    font-size: 6rem;
    opacity: 0.15;
    filter: blur(1px);
}
.pv-news-hero-content {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.85) 40%);
}
.pv-news-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.pv-news-tag-hot { background: #ef4444; color: #fff; }
.pv-news-tag-market { background: #f97316; color: #fff; }
.pv-news-tag-insight { background: #8b5cf6; color: #fff; }
.pv-news-tag-new { background: #10b981; color: #fff; }
.pv-news-hero-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.pv-news-hero-desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}
.pv-news-date {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}
.pv-news-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pv-news-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pv-news-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.pv-news-item-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.pv-news-item-body { flex: 1; min-width: 0; }
.pv-news-item-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}
.pv-news-item-desc {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
    line-height: 1.4;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Responsive ──────────────────────────────────
   Hero collapses at 1024px (matches topnav-collapse zone). The desktop
   side-by-side layout needs ~1100px to render without the pack-fan
   crashing into the headline text. Below that, stack vertically. */
@media (max-width: 1024px) {
    .pv-hero {
        min-height: auto;
        overflow: visible;
    }
    .pv-hero-inner {
        flex-direction: column;
        padding: 1.5rem 1.25rem;
        padding-top: 80px;
        min-height: auto;
        gap: 1.5rem;
    }
    .pv-hero-text {
        min-width: 0;
        width: 100%;
        flex: none;
        text-align: center;
        position: relative;
        z-index: 2;
    }
    .pv-hero-title {
        font-size: 2.5rem;
    }
    .pv-hero-sub {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
    .pv-hero-cta {
        justify-content: center;
    }
    .pv-hero-visual {
        flex: none;
        height: 240px;
        width: 100%;
        max-width: 560px;       /* keeps the pack-fan clustered, not flung
                                   across the whole viewport at intermediate
                                   widths where the column stacks but the
                                   window is still wide */
        margin: 0 auto;
        position: relative;
        overflow: visible;      /* let the rotated wings + hover lift breathe;
                                   the section already controls outer overflow */
        padding-bottom: 12px;
    }
    .pv-hero-pack-1 { left: 6%;  bottom: 8px;  transform: rotate(-22deg) scale(0.62); }
    .pv-hero-pack-2 { left: 28%; bottom: 26px; transform: rotate(-8deg)  scale(0.72); }
    .pv-hero-pack-3 { right: 28%;bottom: 26px; transform: rotate(8deg)   scale(0.72); }
    .pv-hero-pack-4 { right: 6%; bottom: 8px;  transform: rotate(22deg)  scale(0.62); }
    /* Hover-state scale overrides — without these the desktop hover
       transforms (scale 0.88–0.99) kick in and the lifted packs blow out
       of the smaller stacked container. Mirror the rest scale and only
       nudge translateY for the lift cue. */
    .pv-hero-visual:hover .pv-hero-pack-1 { transform: rotate(-25deg) scale(0.62) translateY(-3px); }
    .pv-hero-visual:hover .pv-hero-pack-2 { transform: rotate(-10deg) scale(0.72) translateY(-5px); }
    .pv-hero-visual:hover .pv-hero-pack-3 { transform: rotate(10deg)  scale(0.72) translateY(-5px); }
    .pv-hero-visual:hover .pv-hero-pack-4 { transform: rotate(25deg)  scale(0.62) translateY(-3px); }
}

/* Other landing-page sections still collapse at 768px — they're grids
   that handle 2-up cleanly down to ~600px and don't fight for space
   the way the hero does. */
@media (max-width: 768px) {
    .pv-trust-row {
        gap: 0.75rem 1.25rem;
        justify-content: center;
    }
    .pv-trust-item {
        font-size: 0.78rem;
    }
    .pv-trust-item svg { width: 18px; height: 18px; }

    .pv-discover-grid { grid-template-columns: 1fr; }
    .pv-discover-card-wide { grid-column: auto; }
    .pv-sale-users { display: none; }
    .pv-news-grid { grid-template-columns: 1fr; }
    .pv-news-hero { min-height: 260px; }
    .pv-feature-row { grid-template-columns: 1fr; }
    .pv-bottom-cards { grid-template-columns: 1fr; }
    .pv-bottom-mobile { flex-direction: column; text-align: center; }
}

@media (max-width: 400px) {
    .pv-hero-title {
        font-size: 2rem;
    }
    .pv-hero-sub {
        font-size: 0.9rem;
    }
    .pv-hero-btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
    .pv-hero-visual {
        height: 215px;
    }
    .pv-hero-pack-1 { left: 1%;  bottom: 0;   transform: rotate(-20deg) scale(0.56); }
    .pv-hero-pack-2 { left: 25%; bottom: 16px;transform: rotate(-7deg)  scale(0.66); }
    .pv-hero-pack-3 { right: 25%;bottom: 16px;transform: rotate(7deg)   scale(0.66); }
    .pv-hero-pack-4 { right: 1%; bottom: 0;   transform: rotate(20deg)  scale(0.56); }
    .pv-trust-item { font-size: 0.72rem; }
}


/* ── Wide landscape hero BANNER + condensed pack shelf (founder direction
   2026-06-15: "wider than it is long", both mobile + desktop). The tall stacked
   hero becomes a rounded gradient banner — headline + CTA left, STATIC pack
   cluster right (pop-out animation removed) — with the carousel dots below. ── */

/* Hero shell -> a contained, centered banner instead of a full-bleed tall block. */
.pv-hero { min-height: 0 !important; background: transparent !important; padding: 6px 6px 2px !important; overflow: visible !important; }
.pv-hero::before, .pv-hero::after { display: none !important; }
.pv-hero-inner {
  aspect-ratio: 1720 / 780;
  min-height: 0 !important;
  max-width: 1580px;
  padding: 2rem 2.5rem !important;
  gap: 1.5rem !important;
  border-radius: 24px;
  border: none;
  background:
    radial-gradient(130% 150% at 88% 22%, rgba(170, 255, 0,0.13), transparent 55%),
    linear-gradient(115deg, #13161d 0%, #0c0e13 58%, #0a0b10 100%);
  overflow: hidden;
  align-items: center;
}
.pv-hero-text { flex: 1.15 !important; }
.pv-hero-title { font-size: 3rem !important; }
.pv-hero-sub { font-size: 1rem !important; margin-bottom: 1.25rem !important; max-width: 430px; }
/* Static pack cluster — kill the pop-out / foil / examining animations. */
.pv-hero-visual { height: 250px !important; min-width: 0 !important; flex: 1 !important; align-items: center !important; }
/* Hero packs fully static — no foil sweep, no energy sparkle, nothing. */
.pv-hero-pack .css-pack, .pv-hero-pack .css-pack * { animation: none !important; }
/* No cards popping out of the packs — remove the rip-stack entirely, just clean packs. */
.pv-hero-pack .pv-rip-stack { display: none !important; }
/* Rank tiles: cascade-in + hover step-out enabled (founder 2026-06-17). */
.hero-ranks-list { gap: 10px; }

@media (max-width: 768px) {
  /* Keep it a WIDE banner on phones too: text left, compact static packs right. */
  .pv-hero { padding: 12px 12px 2px !important; }
  .pv-hero-inner {
    flex-direction: row !important;
    padding: 1.05rem 1.1rem !important;
    gap: 0.5rem !important;
    text-align: left !important;
    border-radius: 18px;
  }
  .pv-hero-text { flex: 1.3 !important; text-align: left !important; min-width: 0 !important; }
  .pv-hero-title { font-size: 1.55rem !important; line-height: 1.04 !important; margin-bottom: 0.5rem !important; }
  .pv-hero-sub { font-size: 0.72rem !important; line-height: 1.4 !important; margin-bottom: 0.65rem !important; max-width: none; }
  .pv-hero-cta { justify-content: flex-start !important; gap: 7px !important; }
  .pv-hero-btn { padding: 8px 14px !important; font-size: 0.76rem !important; }
  .pv-hero-visual { display: flex !important; height: 124px !important; flex: 0.9 !important; min-width: 0 !important; padding-bottom: 0 !important; }
  .pv-hero-pack-1 { left: 0% !important;  bottom: 6px !important;  transform: rotate(-20deg) scale(0.40) !important; }
  .pv-hero-pack-2 { left: 16% !important; bottom: 16px !important; transform: rotate(-7deg)  scale(0.48) !important; }
  .pv-hero-pack-3 { right: 16% !important;bottom: 16px !important; transform: rotate(7deg)   scale(0.48) !important; }
  .pv-hero-pack-4 { right: 0% !important; bottom: 6px !important;  transform: rotate(20deg)  scale(0.40) !important; }

  /* Mystery Packs -> horizontal scroll shelf (Courtyard "Grab a pack"). */
  .mp-section { padding: 1.25rem 0 1rem !important; }
  .mp-header { margin-bottom: 14px !important; }
  .mp-strip {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 12px !important; padding: 4px 0 14px !important; margin: 0;
  }
  .mp-strip::-webkit-scrollbar { display: none; }
  .mp-card { flex: 0 0 45% !important; scroll-snap-align: start; padding: 14px 10px !important; }
  /* Full-bleed ONLY the pack carousel on mobile (founder: "reach the furthest
     left and right"). Make the section full-width so the shelf spans the screen,
     and re-inset the header 24px so the title keeps its gutter. The strip then
     fills the full width with a small 12px card peek. */
  #mystery-packs { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .mp-header { padding-left: 24px !important; padding-right: 24px !important; }
  .shell-guest .mp-strip, .shell-authenticated .mp-strip {
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    scroll-padding-left: 12px !important;
    scroll-padding-right: 12px !important;
  }
}


/* ── Merged hero banner (founder direction 2026-06-16: "add the showcase to the
   first banner, all in the same banner"). The Rip-Reveal-Vault banner gets the
   effected background (light rays + warm glow + confetti) plus the packs AND
   real chase cards in one banner. ── */
.pv-hero { padding: 18px !important; }
.pv-hero-inner {
  max-width: min(1680px, 94vw) !important; margin: 0 auto !important;
  border-radius: 24px !important;
  border: none !important;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.5rem) !important;
  min-height: 330px !important;
  position: relative !important; overflow: hidden !important; align-items: center !important;
  background:
    radial-gradient(90% 130% at 70% 24%, rgba(150,150,190,0.10), transparent 60%),
    linear-gradient(125deg, #15141c 0%, #0d0c12 55%, #0a090e 100%) !important;
  -webkit-mask-image: linear-gradient(180deg,#000 93%,transparent 100%) !important;
  mask-image: linear-gradient(180deg,#000 93%,transparent 100%) !important;
}
/* Uniform banner size — every carousel slide shares the rebuilt banner's 1720/780 aspect + 1580 max-width (desktop) */
@media (min-width: 821px) {
  .pv-hero .pv-hero-inner { aspect-ratio: 1720/780 !important; height: auto !important; min-height: 0 !important; max-height: none !important; max-width: 1580px !important; }
}
/* Phones: the 1720/780 aspect makes the banner ~165px tall while its copy needs ~215px+,
   and overflow:hidden swallows the pill + CTA row. Let height follow the content instead. */
@media (max-width: 820px) {
  .pv-hero .pv-hero-inner { aspect-ratio: auto !important; height: auto !important; min-height: 265px !important; align-items: center !important; }
  .vbn { aspect-ratio: auto; }
  .vbn-inner { position: relative; inset: auto; padding: 16px 16px 18px; min-height: 265px; align-items: center; }
  /* Slide 0's short copy left it squat (~130px) next to its 240-265px siblings — the
     min-height above evens it out; grow the pack fan to fill the taller banner. */
  #heroSlide0 .pv-hero-visual { height: 180px !important; }
  #heroSlide0 .pv-hero-pack-1 { transform: rotate(-20deg) scale(0.52) !important; }
  #heroSlide0 .pv-hero-pack-2 { transform: rotate(-7deg)  scale(0.62) !important; }
  #heroSlide0 .pv-hero-pack-3 { transform: rotate(7deg)   scale(0.62) !important; }
  #heroSlide0 .pv-hero-pack-4 { transform: rotate(20deg)  scale(0.52) !important; }
}
.pv-hero-inner::before {  /* animated holographic foil sweep — rip/reveal a holo card */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 16%, rgba(255,70,160,0.16) 32%, rgba(255,205,70,0.16) 43%, rgba(90,255,170,0.16) 54%, rgba(70,180,255,0.16) 65%, rgba(180,100,255,0.16) 76%, transparent 92%);
  background-size: 260% 100%;
  mix-blend-mode: screen; opacity: 0.75; filter: blur(7px); animation: heroHolo 8s linear infinite;
}
@keyframes heroHolo { 0% { background-position: 0% 0; } 100% { background-position: 260% 0; } }
.pv-hero-inner::after {  /* confetti glints + vignette */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(2px 2px at 24% 30%, rgba(255,236,176,0.85), transparent),
    radial-gradient(2px 2px at 60% 66%, rgba(255,236,176,0.55), transparent),
    radial-gradient(1.5px 1.5px at 84% 42%, rgba(255,236,176,0.7), transparent),
    radial-gradient(1.5px 1.5px at 40% 82%, rgba(255,236,176,0.5), transparent),
    radial-gradient(135% 100% at 50% 38%, transparent 54%, rgba(0,0,0,0.5) 100%);
}
.pv-hero-text { position: relative; z-index: 4; flex: 1.05 !important; }
.pv-hero-title { font-size: clamp(2.2rem, 4.6vw, 3.7rem) !important; letter-spacing: -0.02em !important; text-shadow: 0 2px 26px rgba(0,0,0,0.5); }
.pv-hero-sub { font-size: clamp(0.9rem, 1.3vw, 1.1rem) !important; max-width: 430px; }
.pv-hero-visual { position: relative; z-index: 3; height: clamp(240px, 26vw, 330px) !important; flex: 1.25 !important; }
/* ── ONE cohesive overlapping fan, centred in the visual (no edge gaps). Every
   card is anchored to the visual centre (left/top 50%) then translated by a px
   step + rotated, so they overlap into a single hand at any width. ── */
.hero-chase, .pv-hero-pack {
  position: absolute !important; left: 50% !important; top: 50% !important;
  right: auto !important; bottom: auto !important; margin: 0 !important;
  transform-origin: center bottom;
}
.hero-chase {
  width: clamp(122px, 9.4vw, 190px); border-radius: 8px;
  box-shadow: 0 22px 40px rgba(0,0,0,0.62); background: #0a0b10; z-index: 6 !important;
}
.pv-hero-pack .css-pack { filter: drop-shadow(0 18px 30px rgba(0,0,0,0.6)) !important; transform: scale(clamp(1.45, 0.11vw, 1.78)); transform-origin: center; }
/* Slide 0: 4 packs flanked by 2 graded slabs — card scans restored (founder 2026-06-17). */
.hero-chase-l   { transform: translate(calc(-50% - 236px), -50%) rotate(-18deg) !important; z-index: 6 !important; }
.pv-hero-pack-1 { transform: translate(calc(-50% - 142px), -47%) rotate(-11deg) !important; z-index: 3 !important; }
.pv-hero-pack-2 { transform: translate(calc(-50% - 47px),  -45%) rotate(-4deg)  !important; z-index: 5 !important; }
.pv-hero-pack-3 { transform: translate(calc(-50% + 47px),  -45%) rotate(4deg)   !important; z-index: 5 !important; }
.pv-hero-pack-4 { transform: translate(calc(-50% + 142px), -47%) rotate(11deg)  !important; z-index: 3 !important; }
.hero-chase-r   { transform: translate(calc(-50% + 236px), -50%) rotate(18deg)  !important; z-index: 6 !important; }
/* ── Mobile: compact horizontal banner (Courtyard-style) — text left, a small
   fitted fan right. Scoped fan to slide 1; slides 2/3 keep their own rules. ── */
@media (max-width: 600px) {
  /* ── Mobile redesign (Courtyard-class): a short, wide, premium strip. Compact
     text on the left, bold card imagery owning the right and bleeding off the top
     edge. Every slide is locked to ONE height so the box never jumps on swipe. ── */
  .pv-hero { padding: 9px 9px 6px !important; }
  .pv-hero-inner {
    flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
    gap: 6px !important; padding: 13px 15px !important;
    height: clamp(156px, 42vw, 188px) !important; min-height: 0 !important;
    max-width: 100% !important; overflow: hidden !important; border-radius: 20px !important;
  }
  /* indicator OUT of the card on mobile — sits below it so it never covers cards */
  .hero-dots { position: static !important; transform: none !important; left: auto !important; bottom: auto !important;
    margin: 9px auto 0 !important; justify-content: center !important; }
  .pv-hero-text { flex: 1 1 46% !important; min-width: 0 !important; z-index: 4; text-align: left !important; }
  .pv-hero-text > div:first-child { font-size: 0.54rem !important; letter-spacing: 1.4px !important; margin-bottom: 4px !important; }  /* kicker */
  .pv-hero-title { font-size: 1.14rem !important; line-height: 1.0 !important; margin-bottom: 5px !important; letter-spacing: -0.01em !important; }
  .pv-hero-sub { font-size: 0.64rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; max-width: none !important; opacity: 0.78 !important; }
  .pv-hero-cta { justify-content: flex-start !important; gap: 6px !important; margin: 0 !important; }
  .pv-hero-btn { padding: 6px 14px !important; font-size: 0.72rem !important; border-radius: 100px !important; }
  .pv-hero-btn.btn-secondary { display: none !important; }  /* one clean CTA on mobile */
  .pv-hero-visual { flex: 1 1 54% !important; width: auto !important; height: 100% !important; min-height: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; }

  /* slide 1 (Rip) — bold: centre pack pair flanked by two big graded slabs, bleeding
     off the top edge. Outer packs + behind-pack rip cards hidden so the rest go big. */
  #heroSlide0 .pv-rip-stack { display: none !important; }
  /* slide 0 mobile: PACKS ONLY — 4 packs fanned big + clean (founder 2026-06-17).
     Scans removed on mobile; they stay on desktop. */
  #heroSlide0 .hero-chase { display: none !important; }
  #heroSlide0 .pv-hero-pack .css-pack { transform: scale(0.48) !important; overflow: hidden !important; border-radius: 8px !important; }
  #heroSlide0 .pv-hero-pack-1 { transform: translate(calc(-50% - 46px), -53%) rotate(-12deg) !important; z-index: 2 !important; }
  #heroSlide0 .pv-hero-pack-2 { transform: translate(calc(-50% - 16px), -50%) rotate(-4deg)  !important; z-index: 3 !important; }
  #heroSlide0 .pv-hero-pack-3 { transform: translate(calc(-50% + 16px), -50%) rotate(4deg)   !important; z-index: 3 !important; }
  #heroSlide0 .pv-hero-pack-4 { transform: translate(calc(-50% + 46px), -53%) rotate(12deg)  !important; z-index: 2 !important; }

  /* slide 2 (Trainer Rewards) — clean compact ladder: single right-aligned column */
  /* Mobile: quiet + compact — kill the loud pokeball backdrop, drop the boxes to
     plain rows, narrow the stack so it stops eating the right half (2026-06-17). */
  #heroSlide1 .pv-hero-inner::before { opacity: 0.9 !important; background-size: 250% 100%, 20px 20px !important; }  /* dense, VISIBLE pokeball field like desktop — tiny tiles so many show through the gaps the content leaves on the narrow banner */
  #heroSlide1 .hero-ranks-visual { height: 100% !important; max-width: 100% !important; margin: 0 !important; align-items: center !important; justify-content: center !important; }
  #heroSlide1 .hero-ranks-list { flex-direction: column !important; flex-wrap: nowrap !important; gap: 3px !important; width: auto !important; max-width: 164px !important; margin: 0 auto !important; }
  #heroSlide1 .hero-rank-row { padding: 3px 10px !important; gap: 8px !important; line-height: 1 !important; border-radius: 7px !important; background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.05) !important; }
  #heroSlide1 .hero-rank-master { background: rgba(170, 255, 0,0.05) !important; border-color: rgba(170, 255, 0,0.22) !important; }
  #heroSlide1 .hero-rank-row > div:first-child { width: 6px !important; height: 6px !important; flex: 0 0 auto !important; }
  #heroSlide1 .hero-rank-row > span:not(.hero-rank-pct) { font-size: 0.58rem !important; color: rgba(255,255,255,0.55) !important; }
  /* uniform-size % (no jumpy sizes cramping the small banner) — emphasis via colour
     only, brightening to a lime Master */
  #heroSlide1 .hero-rank-pct { font-size: 0.74rem !important; font-weight: 800 !important; }
  #heroSlide1 .hero-rank-row:nth-child(1) .hero-rank-pct { color:rgba(255,255,255,0.45) !important; }
  #heroSlide1 .hero-rank-row:nth-child(2) .hero-rank-pct { color:rgba(255,255,255,0.55) !important; }
  #heroSlide1 .hero-rank-row:nth-child(3) .hero-rank-pct { color:rgba(255,255,255,0.66) !important; }
  #heroSlide1 .hero-rank-row:nth-child(4) .hero-rank-pct { color:rgba(255,255,255,0.78) !important; }
  #heroSlide1 .hero-rank-row:nth-child(5) .hero-rank-pct { color:rgba(255,255,255,0.9) !important; }
  #heroSlide1 .hero-rank-master .hero-rank-pct { font-size:0.74rem !important; color:#AAFF00 !important; text-shadow:0 0 9px rgba(170, 255, 0,0.5) !important; }

  /* slide 3 (Pullable) — bold card fan owns the right; compact tabs under headline */
  #heroSlide2 .pv-hero-sub { display: none !important; }
  #heroSlide2 .hp-tabs { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-top: 0 !important; max-width: 172px !important; }
  #heroSlide2 .hp-tab { padding: 3px 8px !important; font-size: 0.58rem !important; gap: 4px !important; }
  #heroSlide2 .hp-tab-price { font-size: 0.54rem !important; }
  #heroSlide2 .hp-card { width: clamp(62px, 17vw, 84px) !important; }
  #heroSlide2 .hp-now { font-size: 0.5rem !important; padding: 2px 7px !important; top: 2px !important; }
}
/* interactive "what's pullable" panel (slide 3) */
.hp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.hp-tab { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.72); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: all .18s; display: inline-flex; gap: 6px; align-items: center; }
.hp-tab:hover { border-color: rgba(170, 255, 0,0.55); color: #fff; }
.hp-tab-active { background: #AAFF00; color: #0a0b10; border-color: #AAFF00; }
.hp-tab-price { opacity: .55; font-weight: 600; font-size: 0.72rem; }
.hp-tab-active .hp-tab-price { opacity: .65; }
.hp-visual { position: relative; }
.hp-cards { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.hp-cards-active { opacity: 1; pointer-events: auto; }
.hp-card { width: clamp(88px, 10vw, 140px); border-radius: 6px; box-shadow: 0 18px 30px rgba(0,0,0,.55); background: #0a0b10; transition: transform .25s; }
.hp-card-1 { transform: rotate(-10deg) translateX(34px); z-index: 1; }
.hp-card-2 { transform: scale(1.08); z-index: 3; }
.hp-card-3 { transform: rotate(10deg) translateX(-34px); z-index: 1; }
.hp-cards-active:hover .hp-card-2 { transform: scale(1.13) translateY(-6px); }
.hp-now { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.16); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
/* per-panel backgrounds — each carousel slide gets its own effect color */
#heroSlide1 .pv-hero-inner {
  background:
    radial-gradient(72% 110% at 78% 26%, rgba(167,139,250,0.26), transparent 60%),
    radial-gradient(120% 85% at 50% 122%, rgba(124,92,250,0.14), transparent 60%),
    linear-gradient(120deg, #1a1230 0%, #120c22 55%, #0b0716 100%) !important;
  border-color: rgba(167,139,250,0.20) !important;
}
#heroSlide1 .pv-hero-inner::before {  /* Pokeball field + sweeping violet shine */
  background:
    linear-gradient(115deg, transparent 34%, rgba(200,175,255,0.20) 48%, rgba(232,216,255,0.30) 50%, rgba(200,175,255,0.20) 52%, transparent 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='%23c9b8ff' stroke-opacity='0.13' stroke-width='2.5'%3E%3Ccircle cx='44' cy='44' r='25'/%3E%3Cline x1='19' y1='44' x2='69' y2='44'/%3E%3Ccircle cx='44' cy='44' r='6.5'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 250% 100%, 88px 88px !important;
  background-repeat: no-repeat, repeat !important;
  background-position: -60% 0, 0 0 !important;
  inset: 0 !important; opacity: 0.95 !important; animation: heroSweep1 6.5s linear infinite !important; filter: none !important; mix-blend-mode: normal !important;
}
/* Mobile: tiny dense pokeball field. MUST sit AFTER the base rule above to win the
   cascade (same selector + specificity + !important → later wins). 88px reads huge
   on the narrow banner; 20px gives the desktop-style field of many mini pokeballs. */
@media (max-width: 600px) {
  #heroSlide1 .pv-hero-inner::before { background-size: 250% 100%, 38px 38px !important; opacity: 0.85 !important; }
}
@keyframes heroSweep1 { from { background-position: -60% 0, 0 0; } to { background-position: 170% 0, 88px 88px; } }
#heroSlide2 .pv-hero-inner {
  background:
    radial-gradient(72% 110% at 78% 26%, rgba(56,189,248,0.24), transparent 60%),
    radial-gradient(120% 85% at 50% 122%, rgba(34,160,220,0.14), transparent 60%),
    linear-gradient(120deg, #07212c 0%, #04161e 55%, #020e14 100%) !important;
  border-color: rgba(56,189,248,0.20) !important;
}
#heroSlide2 .pv-hero-inner::before {  /* card-wall + spotlight + sweeping cyan shine */
  background:
    linear-gradient(115deg, transparent 34%, rgba(130,225,255,0.20) 48%, rgba(195,242,255,0.30) 50%, rgba(130,225,255,0.20) 52%, transparent 66%),
    radial-gradient(closest-side at 72% 46%, rgba(120,225,255,0.18), rgba(120,225,255,0.05) 55%, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='158'%3E%3Crect x='12' y='14' width='92' height='130' rx='9' fill='none' stroke='%239be8ff' stroke-opacity='0.10' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size: 250% 100%, cover, 116px 158px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: -60% 0, center, 0 0 !important;
  inset: 0 !important; opacity: 1 !important; animation: heroSweep2 7.5s linear infinite !important; filter: none !important; mix-blend-mode: normal !important;
}
@keyframes heroSweep2 { from { background-position: -60% 0, center, 0 0; } to { background-position: 170% 0, center, 116px 158px; } }
@media (prefers-reduced-motion: reduce) {
  .pv-hero-inner::before, #heroSlide1 .pv-hero-inner::before, #heroSlide2 .pv-hero-inner::before { animation: none !important; }
}