/* ============================================================
   V2 SKIN — visual system only. No markup, no content, no schema.
   Loads last; overrides prior styles by cascade order.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#0A0A0C; --surface:#131318; --surface-2:#17171D;
  --text:#F4F4F2; --text-secondary:rgba(244,244,242,.62); --text-tertiary:rgba(244,244,242,.38);
  --border:rgba(244,244,242,.12); --border-subtle:rgba(244,244,242,.07);
  --primary:#FF0033; --primary-hover:#FF1A47; --primary-dim:rgba(255,0,51,.10);
  --accent:#00E093; --gold:#FFD700; --gold-dim:rgba(255,215,0,.08);
  --radius-sm:3px; --radius-md:6px; --radius-lg:16px; --radius-xl:18px;
  --disp:'Space Grotesk',sans-serif;
}
body{background:var(--bg);color:var(--text)}

/* ---------- kill the synthwave layer ---------- */
.grid-warp,.gradient-bg,.glow-orb,.glow-orb-1,.glow-orb-2,.glow-orb-3,.particles{display:none!important}

/* quiet ambient light instead */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(900px 600px at 8% 0%,rgba(255,0,51,.06),transparent 65%),
            radial-gradient(800px 600px at 95% 100%,rgba(255,180,0,.04),transparent 65%)}

/* ---------- typography ---------- */
h1,h2,h3,.section-title,.hero h1,.final-title,.be-name,.creator-name,.ultimate-title,
.cf-name,.comparison-header h3,.faq-q{font-family:var(--disp)!important}
h1{letter-spacing:-.035em!important}
.section-title{letter-spacing:-.03em;font-weight:700}
/* gradient/glow headline text -> clean ink + dim second tone */
.gradient-text{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;
 -webkit-text-fill-color:currentColor!important;color:var(--text)!important;animation:none!important}
.hero-glow{text-shadow:none!important}
h1 .gradient-text,h2 .gradient-text{color:var(--text-tertiary)!important}

/* ---------- eyebrows: pill -> bare mono ---------- */
.section-label,[class*="-eyebrow"]{background:transparent!important;border:none!important;padding:0!important;
 font-family:'JetBrains Mono',monospace!important;font-size:11px!important;letter-spacing:.16em!important;
 color:var(--text-tertiary)!important;border-radius:0!important}
.section-label::before,[class*="-eyebrow"]::before{box-shadow:none!important;width:5px!important;height:5px!important}

/* ---------- buttons ---------- */
.cta-button{background:var(--text)!important;color:#0A0A0C!important;border:none!important;
 border-radius:var(--radius-sm)!important;box-shadow:none!important;font-weight:600!important}
.cta-button:hover{background:#fff!important;transform:translateY(-1px)!important;box-shadow:none!important}
.cta-button::before{display:none!important}
.cta-button svg{stroke:#0A0A0C!important}
.cta-secondary{background:transparent!important;border:1px solid var(--border)!important;
 border-radius:var(--radius-sm)!important;color:var(--text-secondary)!important;box-shadow:none!important}
.cta-secondary:hover{border-color:var(--text-secondary)!important;color:var(--text)!important}
.cta-ultimate,.header-nav-cta,.ultimate-buy-btn,.fullpack-gold-btn{
 background:var(--gold)!important;color:#000!important;border:none!important;
 border-radius:var(--radius-sm)!important;box-shadow:none!important;font-weight:700!important}
.cta-ultimate:hover,.header-nav-cta:hover,.ultimate-buy-btn:hover,.fullpack-gold-btn:hover{
 filter:brightness(1.07);transform:translateY(-1px)!important;box-shadow:none!important}

/* ---------- header ---------- */
header:not(.hero) .header-inner,nav.vhnav{background:transparent}
body>header,.header-inner{border-bottom:none}

/* ---------- surfaces: cards lose glow, gain hairline discipline ---------- */
.be-item,.step-card,.fp-stat-card,.comparison-col,.faq-item,.cf-card,.creator-img-wrapper,
.email-form-container,.fullpack-card{
 background:var(--surface)!important;border:1px solid var(--border-subtle)!important;
 box-shadow:none!important;border-radius:var(--radius-lg)!important}
.be-item:hover,.step-card:hover,.cf-card:hover{transform:none!important;border-color:var(--border)!important;box-shadow:none!important}
.cf-card.cf-center{border-color:rgba(255,0,51,.4)!important;box-shadow:none!important}
.creator-img-wrapper{border:1px solid var(--border-subtle)!important}
.creator-glow,.creator-glow-gold{display:none!important}

/* numerals + counts stay quiet */
.be-num{-webkit-text-stroke:1px rgba(244,244,242,.13)!important}
.category-count,.be-count{background:transparent!important;border:1px solid var(--border-subtle)!important;color:var(--text-tertiary)!important}

/* ---------- marquee chips ---------- */
.ultimate-cat-chip{background:transparent!important;border:1px solid var(--border-subtle)!important;color:var(--text-secondary)!important}
.ultimate-cat-chip-more{border-style:dashed!important;color:var(--gold)!important}

/* ---------- sound browser rows ---------- */
.sound-item{background:var(--surface)!important;border:1px solid var(--border-subtle)!important;border-radius:10px!important}
.play-button{background:transparent!important;border:1px solid var(--border)!important}
.play-button:hover{border-color:var(--primary)!important}

/* ---------- comparison table ---------- */
.comparison-free .comparison-header h3{color:var(--text)!important}
.comparison-ultimate{border-color:rgba(255,215,0,.3)!important}

/* ---------- forms ---------- */
input[type="email"],.email-input{background:var(--surface-2)!important;border:1px solid var(--border)!important;
 border-radius:var(--radius-sm)!important;color:var(--text)!important}
.submit-button{border-radius:var(--radius-sm)!important}

/* ---------- section rhythm: generous air ---------- */
section{scroll-margin-top:80px}
.section-header{margin-bottom:56px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border-subtle)}

/* phone mockup: grounded shadow, no pink underglow */
.phone-mockup{box-shadow:0 70px 110px rgba(0,0,0,.8),0 28px 50px rgba(0,0,0,.55),
 inset 0 2px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.7)!important}

/* the actual halo: hero's animated pink radial — retired */
.hero::after{display:none!important}

/* headline accent: single-hue brand gradient (no rainbow, no gray) */
h1 .gradient-text,h2 .gradient-text{
 background:linear-gradient(120deg,#FF7A8C 0%,#FF2450 45%,#E60030 100%)!important;
 -webkit-background-clip:text!important;background-clip:text!important;
 -webkit-text-fill-color:transparent!important;color:#FF2450!important;
 animation:none!important}

/* headline: soft silver phrase, one crimson word */
h1 .gradient-text,h2 .gradient-text{
 background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;
 -webkit-text-fill-color:currentColor!important;color:#B9B9C2!important;animation:none!important}
.h1-accent{font-style:normal;
 background:linear-gradient(120deg,#FF7A8C 0%,#FF2450 50%,#E60030 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#FF2450}

/* accent word: dusty rose, not neon */
.h1-accent{background:linear-gradient(120deg,#F2909F 0%,#E06B84 45%,#C94A66 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#D9587A}

/* headline, final form: monochrome, two clean lines, no glow, no colored word */
.hero h1{font-size:clamp(40px,4.6vw,68px)!important;line-height:1.06!important;letter-spacing:-.035em!important}
.hero-glow{text-shadow:none!important;filter:none!important}
h1 .gradient-text{color:#A8A8B2!important}
.h1-accent{background:none;-webkit-background-clip:initial;background-clip:initial;
 -webkit-text-fill-color:currentColor;color:inherit;font-style:normal}

/* hero headline: neo-grotesque display, monochrome, sheen + rise */
.hero h1{font-family:'Inter Tight','Space Grotesk',sans-serif!important;
 font-size:clamp(46px,5.4vw,84px)!important;font-weight:700!important;
 line-height:1.03!important;letter-spacing:-.045em!important}
.hero h1 .hero-glow{
 background:linear-gradient(110deg,#E9E9E7 0%,#E9E9E7 38%,#FFFFFF 50%,#E9E9E7 62%,#E9E9E7 100%);
 background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
 -webkit-text-fill-color:transparent;color:#F4F4F2;
 animation:heroSheen 7s ease-in-out infinite,heroRise .9s cubic-bezier(.16,1,.3,1) both;display:inline-block}
.hero h1 .gradient-text{color:#9C9CA6!important;display:inline-block;
 animation:heroRise .9s cubic-bezier(.16,1,.3,1) .12s both}
@keyframes heroSheen{0%,55%{background-position:120% 0}85%,100%{background-position:-40% 0}}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.hero h1 .hero-glow,.hero h1 .gradient-text{animation:none!important}}

/* hero: bg1 wave texture, graded for legibility + seamless blend */
.hero{background:
 linear-gradient(90deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.62) 42%, rgba(10,10,12,.28) 75%, rgba(10,10,12,.45) 100%),
 linear-gradient(180deg, rgba(10,10,12,.6) 0%, rgba(10,10,12,.15) 30%, rgba(10,10,12,.15) 65%, #0A0A0C 100%),
 url('/images/bg1-web.jpg') center 40%/cover no-repeat !important}

/* hero texture, full-bleed: dedicated viewport-wide layer */
.hero{background:none!important;overflow:visible!important;position:relative!important}
.hero::before{content:"";position:absolute;top:-100px;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;
 background:
 linear-gradient(90deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.66) 40%, rgba(10,10,12,.3) 72%, rgba(10,10,12,.5) 100%),
 linear-gradient(180deg, rgba(10,10,12,.75) 0%, rgba(10,10,12,.18) 28%, rgba(10,10,12,.18) 62%, #0A0A0C 100%),
 url('/images/bg1-web.jpg') center 38%/cover no-repeat}

/* texture reprises: same world, darker chapters */
.ultimate-section.band::before{
 transform:scaleX(-1);
 background:
 linear-gradient(180deg,#0A0A0C 0%,rgba(10,10,12,.87) 16%,rgba(10,10,12,.87) 84%,#0A0A0C 100%),
 radial-gradient(1200px 600px at 50% 20%,rgba(255,215,0,.07),transparent 70%),
 url('/images/bg1-web.jpg') center 72%/cover no-repeat}
.email-capture{position:relative}
.email-capture::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;
 background:
 linear-gradient(180deg,#0A0A0C 0%,rgba(10,10,12,.9) 22%,rgba(10,10,12,.92) 60%,#0A0A0C 86%,#0A0A0C 100%) 20%,rgba(10,10,12,.9) 80%,#0A0A0C 100%),
 url('/images/bg1-web.jpg') center 15%/cover no-repeat}

/* textured reprises stay inside their own section — no overhang onto neighbors */
.ultimate-section.band::before{top:0;bottom:0;z-index:0}
.ultimate-section.band>*{position:relative;z-index:1}

/* ---------- tail of page: washes that actually read + outro ---------- */
/* stronger chapter hues */
.band-pink::before{background:radial-gradient(1300px 700px at 50% 15%,rgba(255,0,51,0.13),transparent 70%)!important}
.band-green::before{background:radial-gradient(1300px 700px at 50% 15%,rgba(0,224,147,0.10),transparent 70%)!important}
/* how-it-works: quiet cool lift so it isn't a void */
.how-it-works{position:relative}
.how-it-works::before{content:"";position:absolute;top:-80px;bottom:-80px;left:calc(50% - 50vw);width:100vw;z-index:0;pointer-events:none;
 background:radial-gradient(1100px 600px at 50% 30%,rgba(140,150,180,0.05),transparent 70%)}
.how-it-works>*{position:relative;z-index:1}

/* ---------- ending: one backdrop from FAQ to page end ---------- */
.page-end{position:relative}
.page-end::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:0;pointer-events:none;
 background:
 linear-gradient(180deg,#0A0A0C 0%,rgba(10,10,12,.9) 22%,rgba(10,10,12,.85) 70%,rgba(10,10,12,.88) 100%),
 url('/images/bg1-web.jpg') left center/cover no-repeat}
.page-end>*{position:relative;z-index:1}
.page-end footer{border-top:1px solid rgba(244,244,242,.07)!important;margin-top:80px!important;padding-top:64px!important}

/* ---------- sitewide footer outro (any page that loads this skin) ---------- */
footer{position:relative}
footer::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;pointer-events:none;
 background:
 linear-gradient(180deg,#0A0A0C 0%,rgba(10,10,12,.9) 30%,rgba(10,10,12,.86) 100%),
 url('/images/bg1-web.jpg') left center/cover no-repeat}
/* homepage already has the bigger FAQ-to-end backdrop — don't double it */
.page-end footer::before{display:none}

/* washes feather in and out — no clipped edges, ever */
.band::before{
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%)}
.how-it-works::before{
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%)}
.email-capture::before{
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 72%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 72%,transparent 100%)}

/* creator showcase: one full-bleed feathered pink light, no inset box */
.creator-showcase{overflow:visible!important}
.creator-showcase-bg{
 left:calc(50% - 50vw)!important;right:auto!important;width:100vw!important;top:0!important;bottom:0!important;
 background:radial-gradient(1300px 720px at 50% 48%,rgba(255,0,51,.11),transparent 72%)!important;
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%)}
/* retire the doubled band wash on this section */
.creator-showcase.band-pink::before{display:none}

/* the bg layer must stay absolute (band>* was flattening it to relative/0-height) */
.creator-showcase-bg{position:absolute!important;z-index:0!important}

/* post-submit: player mockup retires, upgrade card takes the stage on hero texture */
.email-capture.submitted .email-capture-visual{display:none}
.email-capture.submitted .email-capture-content{max-width:820px;margin-left:auto;margin-right:auto}
.fullpack-card{
 border:1px solid transparent!important;
 background:
 linear-gradient(180deg,rgba(12,12,16,.88) 0%,rgba(10,10,12,.94) 100%) padding-box,
 linear-gradient(180deg,rgba(255,215,0,.35),rgba(255,255,255,.05)) border-box,
 url('/images/bg1-web.jpg') center 30%/cover no-repeat padding-box!important;
 box-shadow:0 30px 60px -30px rgba(0,0,0,.8)!important}

/* post-submit: room to breathe */
.email-capture.submitted .email-capture-content{max-width:1060px}
.fullpack-card{padding:52px 60px!important}
.fullpack-download-confirm{margin-bottom:32px!important}
.fullpack-headline{margin:12px 0 30px!important;line-height:1.15!important}
.fullpack-compare-table{gap:26px!important;margin:34px 0 38px!important}
.fullpack-compare-table .comparison-col{padding:34px 32px!important}
.fullpack-compare-table li{padding:10px 0!important}
.fullpack-gold-btn{margin-top:6px!important;padding:18px 36px!important}
.fullpack-cta-sub{margin-top:14px!important}
@media(max-width:760px){.fullpack-card{padding:34px 24px!important}.fullpack-compare-table{grid-template-columns:1fr!important}}

/* post-submit: WIDE, not tall */
.email-capture.submitted .email-capture-content{max-width:1360px!important;width:100%!important}
.email-capture.submitted .form-success{max-width:none!important;width:100%!important}
.email-capture.submitted .fullpack-card{max-width:none!important;width:100%!important}
.fullpack-compare-table{max-width:960px!important;margin-left:auto!important;margin-right:auto!important;gap:32px!important}
.fullpack-download-confirm{max-width:960px;margin-left:auto!important;margin-right:auto!important}

/* post-submit: trim the vertical back down */
.fullpack-card{padding:36px 48px 40px!important}
.fullpack-download-confirm{margin-bottom:20px!important}
.fullpack-label{margin-bottom:6px!important}
.fullpack-headline{margin:6px 0 18px!important;font-size:clamp(26px,3vw,34px)!important}
.fullpack-subtext{margin-bottom:8px!important}
.fullpack-compare-table{margin:22px auto 26px!important;gap:28px!important}
.fullpack-compare-table .comparison-col{padding:24px 30px!important}
.fullpack-compare-table li{padding:8px 0!important}
.comparison-header{margin-bottom:12px!important}
.fullpack-gold-btn{margin-top:0!important;padding:16px 32px!important}

/* the teeny notch */
.fullpack-compare-table .comparison-col{padding:20px 30px 22px!important}
.fullpack-compare-table li{padding:6px 0!important;font-size:15px!important}
.comparison-header{margin-bottom:8px!important}
.fullpack-compare-table{margin:18px auto 22px!important}

/* ---------- micro-craft batch ---------- */
::selection{background:rgba(255,0,51,.35);color:#fff}
html{scrollbar-width:thin;scrollbar-color:#26262E #0A0A0C}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0A0A0C}
::-webkit-scrollbar-thumb{background:#26262E;border-radius:5px;border:2px solid #0A0A0C}
::-webkit-scrollbar-thumb:hover{background:#3A3A44}
#scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#FFD700,#FFC700);z-index:1000;pointer-events:none;transition:width .1s linear}
a.cta-button:active,a.cta-ultimate:active,a.header-nav-cta:active,a.ultimate-buy-btn:active,a.fullpack-gold-btn:active,.submit-button:active{transform:scale(.98)!important}
body>header{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
body>header.nav-scrolled{background:rgba(10,10,12,.88)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(244,244,242,.07);box-shadow:0 10px 30px -20px rgba(0,0,0,.8)}
footer a{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:left bottom;transition:background-size .25s ease,color .2s ease}
footer a:hover{background-size:100% 1px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid rgba(255,215,0,.7)!important;outline-offset:3px!important;border-radius:4px}

/* ---------- goal marker on the progress bar ---------- */
#sp-goal{position:fixed;top:1px;width:8px;height:8px;margin-left:-4px;z-index:1001;pointer-events:none;
 background:#FFD700;transform:rotate(45deg) scale(.8);opacity:.55;transition:opacity .3s,box-shadow .3s,transform .3s}
#sp-goal.passed{opacity:1;box-shadow:0 0 10px rgba(255,215,0,.9)}
#sp-goal.goal-hit{animation:goalBurst .9s cubic-bezier(.16,1,.3,1)}
@keyframes goalBurst{
 0%{transform:rotate(45deg) scale(.8)}
 35%{transform:rotate(45deg) scale(2.4);box-shadow:0 0 0 12px rgba(255,215,0,.25),0 0 24px rgba(255,215,0,1)}
 100%{transform:rotate(45deg) scale(1);box-shadow:0 0 10px rgba(255,215,0,.9)}}
#sp-goal-chip{position:fixed;top:14px;margin-left:-46px;z-index:1001;pointer-events:none;
 font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;font-weight:500;
 color:#000;background:linear-gradient(135deg,#FFD700,#FFC700);padding:5px 12px;border-radius:999px;
 opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s;box-shadow:0 6px 20px rgba(255,215,0,.35)}
#sp-goal-chip.show{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){#sp-goal.goal-hit{animation:none}#sp-goal-chip{transition:opacity .3s}}

/* progress bar: dimmer; goal marker: more of a moment */
#scroll-progress{background:linear-gradient(90deg,rgba(255,215,0,.55),rgba(255,199,0,.6));height:2px}
#sp-goal{width:11px;height:11px;margin-left:-6px;top:-2px;opacity:.75;
 background:linear-gradient(135deg,#FFE45C,#FFC700);border:1px solid rgba(0,0,0,.35)}
#sp-goal.passed{opacity:1;box-shadow:0 0 14px rgba(255,215,0,.95),0 0 4px rgba(255,215,0,.9)}
@keyframes goalBurst{
 0%{transform:rotate(45deg) scale(.9)}
 30%{transform:rotate(45deg) scale(3);box-shadow:0 0 0 16px rgba(255,215,0,.28),0 0 0 34px rgba(255,215,0,.12),0 0 30px rgba(255,215,0,1)}
 60%{transform:rotate(45deg) scale(1.4);box-shadow:0 0 0 30px rgba(255,215,0,.10),0 0 0 54px rgba(255,215,0,.05),0 0 18px rgba(255,215,0,.95)}
 100%{transform:rotate(45deg) scale(1);box-shadow:0 0 14px rgba(255,215,0,.95)}}
#sp-goal-chip{font-size:11.5px;padding:6px 14px;top:16px}

/* goal chip: elegant, not laboratory */
#sp-goal-chip{font-family:'Inter','Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none;padding:6px 15px}

/* goal marker: hidden at rest, revealed once the journey starts */
#sp-goal{opacity:0;transition:opacity .5s ease,box-shadow .3s,transform .3s}
#sp-goal.visible{opacity:.75}
#sp-goal.visible.passed{opacity:1}

/* page-specific tag chips fall in line (editors, creators, etc.) */
.editor-tag,.creator-tag-label{font-family:'JetBrains Mono',monospace!important;font-size:10px!important;
 color:rgba(244,244,242,.5)!important;background:rgba(244,244,242,.04)!important;
 border:1px solid rgba(244,244,242,.10)!important}

/* ---------- subpage ambient journey: feathered color pools down the page ---------- */
/* pink -> green -> gold -> pink, spaced over the document; radials feather by nature */
body{position:relative}
body::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:
 radial-gradient(1300px 900px at 12% 16%, rgba(255,0,51,.055), transparent 70%),
 radial-gradient(1200px 800px at 88% 40%, rgba(0,224,147,.045), transparent 70%),
 radial-gradient(1300px 900px at 15% 66%, rgba(255,215,0,.04), transparent 70%),
 radial-gradient(1200px 800px at 85% 92%, rgba(255,0,51,.045), transparent 70%)}
/* homepage has its own richer lighting system — skip the generic pools there */
body:has(.page-end)::after{content:none}

/* ambient layers: guarantee they paint above the canvas, and turn them up */
html{background:#0A0A0C}
body{background:transparent!important}
body::after{
 background:
 radial-gradient(1400px 950px at 12% 16%, rgba(255,0,51,.11), transparent 68%),
 radial-gradient(1300px 850px at 88% 40%, rgba(0,224,147,.085), transparent 68%),
 radial-gradient(1400px 950px at 15% 66%, rgba(255,215,0,.075), transparent 68%),
 radial-gradient(1300px 850px at 85% 92%, rgba(255,0,51,.09), transparent 68%)!important}

/* ambient pools: one notch brighter */
body::after{
 background:
 radial-gradient(1400px 950px at 12% 16%, rgba(255,0,51,.16), transparent 68%),
 radial-gradient(1300px 850px at 88% 40%, rgba(0,224,147,.12), transparent 68%),
 radial-gradient(1400px 950px at 15% 66%, rgba(255,215,0,.105), transparent 68%),
 radial-gradient(1300px 850px at 85% 92%, rgba(255,0,51,.13), transparent 68%)!important}
/* homepage chapter hues: matching lift */
.band-pink::before{background:radial-gradient(1300px 700px at 50% 15%,rgba(255,0,51,.17),transparent 70%)!important}
.band-green::before{background:radial-gradient(1300px 700px at 50% 35%,rgba(0,224,147,.14),transparent 70%)!important}
.band-gold::before{background:radial-gradient(1100px 500px at 50% -5%,rgba(255,215,0,.11),transparent 70%)!important}
.creator-showcase-bg{background:radial-gradient(1300px 720px at 50% 48%,rgba(255,0,51,.15),transparent 72%)!important}

/* ---------- guide articles fall in line ---------- */
.guide-tag{font-family:'JetBrains Mono',monospace!important;font-size:10.5px!important;letter-spacing:.14em!important;
 color:rgba(244,244,242,.55)!important;background:rgba(244,244,242,.04)!important;
 border:1px solid rgba(244,244,242,.10)!important;border-radius:999px!important}
.guide-body h2,.guide-body h3{font-family:'Space Grotesk',sans-serif!important;letter-spacing:-.02em}
.callout,.guide-cta-block,.guide-faq .faq-item{
 background:linear-gradient(180deg,#15151C 0%,#101015 100%)!important;
 border:1px solid rgba(244,244,242,.09)!important;box-shadow:none!important;border-radius:14px!important}
.level-table{border:1px solid rgba(244,244,242,.09)!important;border-radius:12px!important;overflow:hidden}
.guide-breadcrumb a{color:rgba(244,244,242,.5)}
.guide-breadcrumb a:hover{color:var(--gold)}
.level-highlight{background:none!important;border:none!important;color:#FFD700!important;font-family:'JetBrains Mono',monospace!important}

/* ambient pools + chapter hues: one more notch */
body::after{
 background:
 radial-gradient(1450px 1000px at 12% 16%, rgba(255,0,51,.21), transparent 68%),
 radial-gradient(1350px 900px at 88% 40%, rgba(0,224,147,.16), transparent 68%),
 radial-gradient(1450px 1000px at 15% 66%, rgba(255,215,0,.14), transparent 68%),
 radial-gradient(1350px 900px at 85% 92%, rgba(255,0,51,.17), transparent 68%)!important}
.band-pink::before{background:radial-gradient(1300px 700px at 50% 15%,rgba(255,0,51,.22),transparent 70%)!important}
.band-green::before{background:radial-gradient(1300px 700px at 50% 35%,rgba(0,224,147,.18),transparent 70%)!important}
.band-gold::before{background:radial-gradient(1100px 500px at 50% -5%,rgba(255,215,0,.14),transparent 70%)!important}
.creator-showcase-bg{background:radial-gradient(1300px 720px at 50% 48%,rgba(255,0,51,.19),transparent 72%)!important}

/* ---------- creator hero portraits: framed panel beside the text ---------- */
@media(min-width:1100px){
 .creator-hero{position:relative;text-align:left!important;padding-right:460px!important;min-height:460px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
 .creator-hero .tagline{margin-left:0!important;margin-right:0!important}
 .creator-hero-photo{position:absolute;right:24px;top:50%;transform:translateY(-50%) rotate(1.2deg);
  width:380px;height:440px;border-radius:18px;background-size:cover;background-position:center 22%;
  border:1px solid rgba(244,244,242,.13);box-shadow:0 40px 80px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08);
  filter:saturate(.85) brightness(.92) contrast(1.03);z-index:0;pointer-events:none}
 .creator-hero-photo::after{content:"";position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(180deg,transparent 55%,rgba(10,10,12,.55) 100%)}
 .creator-hero>*:not(.creator-hero-photo){position:relative;z-index:1}
}
@media(max-width:1099px){.creator-hero-photo{display:none}}

/* creator hero: text owns the left, portrait pushes to the viewport edge */
@media(min-width:1100px){
 .creator-hero{padding-left:0!important;padding-right:500px!important}
 .creator-hero h1{max-width:none!important;margin-left:0!important}
 .creator-hero .creator-hero-badge{margin-left:0!important}
 .creator-hero-photo{right:calc(50% - 50vw + 40px)!important;width:400px!important}
}

/* creator hero: kill the inherited centering cage, photo at container edge */
@media(min-width:1100px){
 .creator-hero{max-width:none!important;margin-left:0!important;margin-right:0!important;width:100%!important}
 .creator-hero .tagline{max-width:560px!important}
 .creator-hero-photo{right:0!important}
}

/* creator hero stacking made explicit */
@media(min-width:1100px){
 .creator-hero-photo{z-index:1!important}
 .creator-hero>*:not(.creator-hero-photo){z-index:2!important}
 .creator-hero::before,.creator-hero::after{z-index:0!important}
}

/* ---------- one crimson: every red CTA wears the champion's coat ---------- */
.pp-hero-cta,.cc-hero-cta,.ae-hero-cta,.tk-hero-cta,.ig-hero-cta,.dr-hero-cta,
.cmp-final-cta,.editors-cta-btn,.creators-cta-btn,.compare-cta-btn,.about-cta-btn{
 background:linear-gradient(135deg,#1A0008 0%,#CC0033 100%)!important;
 color:#fff!important;border:1px solid rgba(204,0,51,.4)!important;
 border-radius:var(--radius-md)!important;font-weight:600!important;
 box-shadow:0 4px 16px rgba(204,0,51,.3),inset 0 1px 0 rgba(255,255,255,.08)!important;
 transition:all .4s var(--ease-out)!important}
.pp-hero-cta:hover,.cc-hero-cta:hover,.ae-hero-cta:hover,.tk-hero-cta:hover,.ig-hero-cta:hover,.dr-hero-cta:hover,
.cmp-final-cta:hover,.editors-cta-btn:hover,.creators-cta-btn:hover,.compare-cta-btn:hover,.about-cta-btn:hover{
 background:linear-gradient(135deg,#2A0010 0%,#E0003A 100%)!important;
 border-color:rgba(204,0,51,.6)!important;transform:translateY(-2px)!important;
 box-shadow:0 8px 28px rgba(204,0,51,.45),inset 0 1px 0 rgba(255,255,255,.1)!important}

/* ---------- about page photos: editorial pulls that break the column ---------- */
.about-photo{margin:40px 0 36px;border-radius:16px;overflow:hidden;position:relative;
 border:1px solid rgba(244,244,242,.14);box-shadow:0 34px 70px -30px rgba(0,0,0,.85);
 background:#0A0A0C}
.about-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
 filter:saturate(.88) brightness(.92)}
.about-photo figcaption{position:absolute;left:20px;bottom:14px;right:20px;z-index:1;
 font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
 color:rgba(244,244,242,.78)}
.about-photo::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,transparent 58%,rgba(10,10,12,.74) 100%);pointer-events:none}
.about-photo::before{content:attr(data-fig);position:absolute;top:14px;left:16px;z-index:1;
 font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
 color:rgba(244,244,242,.65);background:rgba(10,10,12,.55);
 border:1px solid rgba(244,244,242,.16);border-radius:999px;padding:5px 11px;
 backdrop-filter:blur(6px)}
/* desktop: pull out of the text column, tilt, wrap the copy around them */
@media (min-width:1160px){
 .about-section{overflow:visible}
 .about-section::after{content:"";display:block;clear:both}
 .about-photo--right{float:right;width:52%;margin:6px -150px 26px 44px;
  transform:rotate(1.3deg)}
 .about-photo--left{float:left;width:52%;margin:6px 44px 26px -150px;
  transform:rotate(-1.1deg)}
 .about-photo--right img,.about-photo--left img{aspect-ratio:4/3}
}

/* about hero: forced two-line break, released on small screens */
@media (max-width:640px){.about-hero h1 br{display:none}}

/* ---------- email capture: studio photo replaces player mockup ---------- */
.ec-photo{margin:0;position:relative;border-radius:18px;overflow:hidden;
 border:1px solid rgba(244,244,242,.14);
 box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
 background:#0A0A0C}
.ec-photo img{display:block;width:100%;height:540px;object-fit:cover;object-position:center 56%;
 filter:saturate(.9) brightness(1.04) contrast(1.02)}
.ec-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(10,10,12,.12) 0%,transparent 30%,transparent 52%,rgba(10,10,12,.82) 100%)}
.ec-photo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;
 display:flex;justify-content:space-between;align-items:baseline;gap:12px;
 padding:16px 20px;
 font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.ec-photo figcaption span:first-child{color:rgba(244,244,242,.88)}
.ec-photo figcaption span:last-child{color:rgba(244,244,242,.55)}
@media (max-width:900px){.ec-photo img{height:340px}}

/* pack breakdown: restore crimson numeral glow on hover (was beaten by the skin's !important stroke) */
.be-item:hover .be-num{-webkit-text-stroke:1px rgba(255,0,82,.55)!important}

/* free pack hero stats: gold values, same treatment as homepage hero stats */
.fp-stat-num{color:var(--gold)!important;
 text-shadow:0 0 12px rgba(255,215,0,.6),0 0 24px rgba(255,215,0,.25)!important}

/* category hero wave panels: crisp SVG art, no photo grading */
.wave-panel{filter:none!important;background-size:100% 100%!important;background-position:center!important}
.wave-panel::after{display:none!important}

/* hero badge: neutral metadata pill (gold is reserved for paid), green dot = free semantics */
.creator-hero-badge{background:rgba(244,244,242,.05)!important;border:1px solid rgba(244,244,242,.14)!important;
 color:rgba(244,244,242,.72)!important}
.creator-hero-badge .badge-dot{background:#00E093!important;box-shadow:0 0 8px rgba(0,224,147,.5)!important}

/* hero tagline: slightly smaller, closer to white */
.tagline{font-size:16.5px!important;color:rgba(244,244,242,.82)!important}

/* ---------- free pack hero: undo creator-hero portrait layout (page has its own grid) ---------- */
@media(min-width:1100px){
 .fp-hero.creator-hero{display:block!important;padding-right:24px!important;padding-left:24px!important;
  min-height:0!important;max-width:1200px!important;margin:0 auto!important}
 .fp-hero .fp-hero-grid{display:grid!important;grid-template-columns:1.15fr .85fr!important}
}
/* free pack hero: same bg1 texture as homepage hero */
.fp-hero{position:relative!important;overflow:visible!important}
.fp-hero::before{content:"";position:absolute;top:-100px;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;
 background:
 linear-gradient(90deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.66) 40%, rgba(10,10,12,.3) 72%, rgba(10,10,12,.5) 100%),
 linear-gradient(180deg, rgba(10,10,12,.75) 0%, rgba(10,10,12,.18) 28%, rgba(10,10,12,.18) 62%, #0A0A0C 100%),
 url('/images/bg1-web.jpg') center 38%/cover no-repeat}
.fp-hero>*{position:relative;z-index:1}

/* free pack hero: dark apron below the texture so the ambient red fades in instead of hard-cutting */
.fp-hero::after{content:"";position:absolute;top:100%;height:380px;left:calc(50% - 50vw);width:100vw;
 z-index:-1;pointer-events:none;
 background:linear-gradient(180deg,#0A0A0C 0%,rgba(10,10,12,.96) 30%,rgba(10,10,12,.7) 62%,rgba(10,10,12,0) 100%)}

/* IG page: ultimate bridge band before FAQ */
.ig-ultimate-bridge{max-width:1200px;margin:90px auto;padding:0 32px}
.ig-ub-inner{display:flex;align-items:center;gap:48px;justify-content:space-between;
 border-radius:20px;padding:44px 48px;position:relative;overflow:hidden;
 border:1px solid transparent;
 background:linear-gradient(180deg,#141418 0%,#0E0E11 100%) padding-box,
 linear-gradient(180deg,rgba(255,215,0,.32) 0%,rgba(255,215,0,.04) 100%) border-box;
 box-shadow:0 34px 70px -30px rgba(0,0,0,.85)}
.ig-ub-inner::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(700px 300px at 8% 0%,rgba(255,215,0,.09),transparent 70%)}
.ig-ub-eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
 letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.ig-ub-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,2.6vw,34px);
 color:#F4F4F2;margin:0 0 12px;letter-spacing:-.02em}
.ig-ub-sub{color:rgba(244,244,242,.66);font-size:15.5px;line-height:1.65;max-width:640px;margin:0}
.ig-ub-inner .cta-ultimate{flex:none}
@media(max-width:860px){.ig-ub-inner{flex-direction:column;align-items:flex-start;padding:36px 28px}}

/* IG hero: neon glyph photo replaces the phone mockup (delete these rules to revert) */
.ig-phone-wrap .ig-phone{display:none!important}
.ig-hero-img{display:block;width:min(480px,100%);height:auto;margin:0 auto;
 filter:drop-shadow(0 30px 60px rgba(200,60,180,.18))}

/* TikTok hero: neon cube cutout replaces the feed mockup (delete to revert) */
.tk-phone-wrap .tk-phone{display:none!important}
.tk-hero-img{display:block;width:min(400px,88%);height:auto;margin:0 auto;
 filter:drop-shadow(0 34px 70px rgba(0,242,234,.12)) drop-shadow(0 20px 44px rgba(255,0,80,.12));
 -webkit-box-reflect:below -72px linear-gradient(180deg,transparent 58%,rgba(0,0,0,.28) 100%)}

/* ---------- legal pages (privacy/terms): finish the v2 migration ---------- */
.legal-page h1{font-family:'Space Grotesk',sans-serif!important;font-size:clamp(34px,4vw,46px)!important;
 letter-spacing:-.03em!important;color:#F4F4F2!important}
.legal-page .updated{font-family:'JetBrains Mono',monospace!important;font-size:11px!important;
 letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(244,244,242,.45)!important}
.legal-page h2{font-family:'Space Grotesk',sans-serif!important;letter-spacing:-.02em!important;
 color:#F4F4F2!important}
.legal-page p,.legal-page li{color:rgba(244,244,242,.72)!important;line-height:1.7!important}
.legal-page li strong,.legal-page p strong{color:rgba(244,244,242,.92)!important}
.header-cta{background:linear-gradient(135deg,#1A0008 0%,#CC0033 100%)!important;
 border:1px solid rgba(204,0,51,.4)!important;color:#fff!important;border-radius:10px!important;
 box-shadow:0 4px 18px rgba(204,0,51,.28),inset 0 1px 0 rgba(255,255,255,.08)!important}
.header-cta:hover{background:linear-gradient(135deg,#2A0010 0%,#E0003A 100%)!important;transform:translateY(-1px)!important}

/* IG page: sister-site note under the final CTA copy */
.ig-final-note{font-size:14px;color:rgba(244,244,242,.5);max-width:560px;margin:18px auto 0;line-height:1.6}
.ig-final-note a{color:rgba(244,244,242,.8);text-decoration:underline;text-underline-offset:3px}
.ig-final-note a:hover{color:#fff}