/* v2.css — Custom Cocktails V2
   - Restores reveal animations (safe)
   - Stripe-style scrolly (sticky journey + sequential steps)
   - Image story version (storyMedia) controlled by JS data-active
*/

:root{
  --cc-bg: #070715;
  --cc-surface: rgba(255,255,255,.05);
  --cc-surface-2: rgba(255,255,255,.08);
  --cc-border: rgba(255,255,255,.10);
  --cc-border-2: rgba(255,255,255,.14);
  --cc-text: rgba(255,255,255,.92);
  --cc-muted: rgba(255,255,255,.68);
  --cc-dim: rgba(255,255,255,.52);

  --cc-accent: #8B5CFF;
  --cc-accent-2: #FF4FD8;

  --cc-shadow: 0 20px 70px rgba(0,0,0,.45);
  --cc-shadow-soft: 0 10px 40px rgba(0,0,0,.30);

  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-pill: 999px;

  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-56: 56px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;

  --container: 1180px;
  --gutter: 24px;

  --h1: clamp(44px, 5.6vw, 76px);
  --h2: clamp(30px, 3.4vw, 48px);
  --h3: clamp(22px, 2.3vw, 30px);
  --lead: clamp(16px, 1.35vw, 18px);

  --nav-h: 78px;

  /* scrolly vars set by JS */
  --story-p: 0;
  --fill: 0;
  --pour: 0;
  --step-p: 0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cc-text);
  background: var(--cc-bg);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

a{color:inherit}
a:hover{opacity:.92}
::selection{background: rgba(139,92,255,.28)}

.container{
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

.muted{color: var(--cc-muted)}
.dim{color: var(--cc-dim)}
.small{font-size: 13px}
.nowrap{white-space:nowrap}
.center{display:flex; justify-content:center; margin-top: 22px;}

.accent{
  background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Background */
.bg{
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events:none;
  background:
    radial-gradient(900px 700px at 15% 20%, rgba(139,92,255,.22), transparent 58%),
    radial-gradient(900px 700px at 85% 20%, rgba(255,79,216,.18), transparent 55%),
    radial-gradient(1100px 900px at 50% 85%, rgba(139,92,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%, rgba(0,0,0,.55));
}
.bg__noise{
  position:absolute; inset:0;
  opacity:.06;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Typography */
.h1{font-size: var(--h1); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 var(--s-16);}
.h2{font-size: var(--h2); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--s-12);}
.h3{font-size: var(--h3); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--s-12);}
.lead{
  font-size: var(--lead);
  line-height: 1.55;
  color: var(--cc-muted);
  margin: 0 0 var(--s-24);
  max-width: 62ch;
}
.sub{line-height:1.65; max-width: 80ch;}

/* Nav */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(8,8,20,.78), rgba(8,8,20,.35));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s-24);
}
.brand{
  text-decoration:none;
  display:flex;
  align-items:center;
  gap: var(--s-12);
  font-weight: 700;
  letter-spacing: .01em;
}
.nav__links{display:flex; align-items:center; gap: var(--s-24);}
.nav__link{
  text-decoration:none;
  color: var(--cc-muted);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 8px;
  border-radius: var(--r-12);
}
.nav__link:hover{color: var(--cc-text); background: rgba(255,255,255,.04);}
.nav__cta{display:flex; align-items:center; gap: var(--s-12);}

/* Buttons */
.btn{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cc-text);
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: var(--r-pill);
  padding: 12px 18px;
  line-height: 1;
  white-space: nowrap;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn:focus{outline:none}
.btn:focus-visible{box-shadow: 0 0 0 4px rgba(139,92,255,.25);}
.btn--lg{padding: 14px 22px; font-size: 14px; min-height: 52px;}
.btn--full{width:100%}

.btn--primary{
  background: linear-gradient(90deg, rgba(139,92,255,.96), rgba(255,79,216,.80));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(139,92,255,.18);
}
.btn--primary:hover{transform: translateY(-1px)}
.btn--primary:active{transform: translateY(0px); opacity:.96}

.btn--ghost{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.btn--ghost:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18);}
.btn--ghost:active{opacity:.94}

/* Sections */
.section{padding: var(--s-96) 0;}
.sectionHead{margin-bottom: var(--s-40); max-width: 76ch;}
@media (max-width: 900px){
  :root{ --gutter: 18px; }
  .section{padding: var(--s-64) 0;}
  .sectionHead{margin-bottom: var(--s-24);}
}
:target{ scroll-margin-top: 92px; }

/* Hero */
.hero{padding: calc(var(--s-80) + 10px) 0 var(--s-56);}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-56);
  align-items: start;
}
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; gap: var(--s-40)}
}

/* Pill */
.pill{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--s-20);
}
.pill--solo{
  padding: 11px 16px;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.pill--solo span{font-weight: 900; color: rgba(255,255,255,.92);}

.hero__actions{display:flex; flex-wrap:wrap; gap: var(--s-12); margin-bottom: var(--s-20);}
@media (max-width: 520px){
  .hero__actions .btn{width:100%}
}

.microproof{
  display:flex; flex-wrap:wrap; gap: 10px;
  color: var(--cc-muted);
  font-weight: 500;
  font-size: 14px;
  margin: 2px 0 var(--s-24);
}
.microproof .dot{
  width:4px; height:4px; border-radius:999px;
  background: rgba(255,255,255,.25);
  margin: 0 6px;
}

.proofStrip{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-16);
  margin: var(--s-24) 0 var(--s-20);
}
@media (max-width: 640px){ .proofStrip{grid-template-columns: 1fr;} }
.proofStrip__item{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-20);
  padding: 16px 16px 14px;
  box-shadow: var(--cc-shadow-soft);
}
.proofStrip__kpi{font-size: 22px; font-weight: 900; margin-bottom: 4px;}
.proofStrip__label{font-size: 13px; color: var(--cc-muted);}

.callout{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-24);
  padding: 18px 18px 16px;
  box-shadow: var(--cc-shadow-soft);
}
.callout__title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: 10px;
}

/* Panel */
.panel{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  padding: 18px;
  box-shadow: var(--cc-shadow);
  position: relative;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(500px 400px at 20% 30%, rgba(139,92,255,.18), transparent 60%),
    radial-gradient(520px 420px at 80% 40%, rgba(255,79,216,.12), transparent 62%);
  filter: blur(18px);
  opacity: .8;
}
.panel > *{position:relative; z-index:1}
.panel__header{display:flex; align-items:center; justify-content:space-between; gap: var(--s-16); margin-bottom: var(--s-12);}
.panel__tag{font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.60);}
.panel__status{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.panel__shot{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.shot__chrome{display:flex; gap: 8px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02);}
.shot__chrome span{width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.12);}
.panel__footer{margin-top: 12px; font-size: 13px; color: var(--cc-muted);}

/* Dashboard render */
.dash{padding: 14px;}
.dash__top{display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 12px;}
.dash__title{font-weight: 900; letter-spacing: -.01em;}
.dash__tabs{display:flex; gap: 8px; align-items:center;}
.dash__tab{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.02);
}
.dash__tab.is-on{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

.dash__kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 520px){ .dash__kpis{grid-template-columns: 1fr;} }

.dashKpi{
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.dashKpi__n{font-weight: 900; font-size: 16px; margin-bottom: 4px;}
.dashKpi__l{color: var(--cc-muted); font-size: 12px;}

.dash__table{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.dashRow{
  display:grid;
  grid-template-columns: .7fr 1fr 1.4fr .8fr;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  align-items:center;
  font-size: 12px;
}
.dashRow--head{
  border-top: 0;
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.62);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
.status{
  justify-self:end;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  font-weight: 800;
}
.status--ok{
  border-color: rgba(139,92,255,.22);
  background: rgba(139,92,255,.10);
}
.status--live{
  border-color: rgba(255,79,216,.22);
  background: rgba(255,79,216,.10);
}

.dash__hint{margin-top: 10px; font-size: 12.5px; color: var(--cc-dim); line-height: 1.45}

/* Offer stack */
.offerStack{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  padding: 22px;
  box-shadow: var(--cc-shadow-soft);
}
.kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: 10px;
}
.offerStack__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 720px){
  .offerStack__bar{flex-direction:column; align-items:stretch;}
}

/* Challenge */
.offerStack--challenge .offerStack__promise{display:grid; gap: 16px;}

.qualRow{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 6px;}
.qualChip{
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,.86);
}

.bigPromise{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 18px;
}
.bigPromise__title{font-weight: 900; font-size: 22px; line-height: 1.15; letter-spacing: -.01em;}
.bigPromise__sub{margin-top: 8px; line-height: 1.55;}

.outcomeGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .outcomeGrid{grid-template-columns: 1fr;}
}
.outcomeCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.outcomeCard__k{font-weight: 900;}
.outcomeCard__v{font-weight: 900; font-size: 18px;}
.outcomeCard__d{line-height: 1.55;}

/* VSL bits */
.twoCol{display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items:start;}
.twoCol--vsl{grid-template-columns: 1.1fr .9fr;}
@media (max-width: 980px){ .twoCol, .twoCol--vsl{grid-template-columns: 1fr;} }

.vslCard{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 18px;
  box-shadow: var(--cc-shadow-soft);
}
.videoShell{display:grid; gap: 10px; margin-top: 10px;}
.video{width:100%; height:auto; display:block; border-radius: 16px;}

.rail{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 18px;
  box-shadow: var(--cc-shadow-soft);
}
@media (min-width: 980px){
  .rail{ position: sticky; top: calc(var(--nav-h) + 18px); }
}
.rail__item{color: var(--cc-muted); line-height: 1.65; margin-bottom: 10px;}

.miniCalc{margin-top: 14px; display:grid; gap: 10px;}
.miniCalc__title{font-weight: 900;}
.miniCalc__row{display:grid; grid-template-columns: 1fr; gap: 10px;}
.miniCalc__input{
  width:100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.90);
  padding: 0 12px;
  outline:none;
}
.miniCalc__input:focus{box-shadow: 0 0 0 4px rgba(139,92,255,.20);}
.miniCalc__result{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 12px;
  line-height: 1.55;
}

/* How it works grid */
.loopGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){ .loopGrid{grid-template-columns: 1fr;} }

.loopCard{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 16px;
  box-shadow: var(--cc-shadow-soft);
}
.loopCard__label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: 10px;
}

/* media now supports images (no placeholder padding) */
.loopCard__media{
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 160px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.loopCard__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Boxed */
.boxed{
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 18px;
  box-shadow: var(--cc-shadow-soft);
}
.boxed__label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: 10px;
}
.boxed__title{font-weight: 900; margin: 0 0 8px;}
.boxed__body{margin:0; line-height:1.55;}

/* Founder media */
.founderMedia{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  box-shadow: var(--cc-shadow-soft);
  min-height: 320px;
}
.founderMedia__img{
  width:100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display:block;
  filter: saturate(1.02) contrast(1.03);
}

/* ------------------------------
   REVEAL ANIMATIONS (safe)
------------------------------ */
[data-reveal]{ opacity: 1; transform: none; }
html.js [data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
html.js [data-reveal].is-in{
  opacity: 1;
  transform: none;
}
/* Staggered slide-in just for the "How it works" cards */
html.js .loopCard[data-reveal]{
  transform: translateX(18px);                 /* slide in */
  transition-delay: calc(var(--i, 0) * 120ms); /* stagger */
}

html.js .loopCard[data-reveal].is-in{
  transform: none;
}

/* ------------------------------
   SCROLLY (Stripe-like)
------------------------------ */

/* kill the big .section top padding on this one section (Stripe feel) */
.section.scrolly{
  padding-top: 0;
}

/* scrolly vars + layout */
.scrolly{
  position: relative;
  overflow: visible;

  --story-p: 0;
  --fill: 0;
  --pour: 0;
  --step-p: 0;
}

.scrolly__grid{
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: start;
  overflow: visible;
}

/* sticky left */
.scrolly__sticky{
  position: sticky;
  top: calc(var(--nav-h) + 14px);
  height: calc(100vh - var(--nav-h) - 28px);
  display: grid;
  place-items: center;
  align-self: start;
  overflow: visible;
}

.scrolly__hint{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  text-align: center;
}

/* steps right */
.scrolly__steps{min-width: 0;}

.scrolly__step{
  padding: clamp(34px, 5vw, 72px) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  min-height: min(74vh, 900px);
  display: grid;
  align-content: center;
  gap: 14px;

  opacity: .22;
  filter: saturate(.95);
  transition: opacity .35s ease, filter .35s ease;
}
.scrolly__step:first-child{
  border-top: 0;
  padding-top: 0;
}
.scrolly__step.is-active{
  opacity: 1;
  filter: saturate(1.05);
}

/* CTA inside story */
.storyCTA{margin-top: 10px;}

/* Mobile: disable sticky behaviour */
@media (max-width: 980px){
  .section.scrolly{padding-top: var(--s-64);}
  .scrolly__grid{ grid-template-columns: 1fr; }

  .scrolly__sticky{
    position: relative;
    top: auto;
    height: auto;
    margin-bottom: 18px;
  }

  .scrolly__step{
    min-height: 0;
    opacity: 1;
    filter: none;
  }

  .scrolly__hint{display:none;}
}

/* ------------------------------
   Sticky Icon Journey (legacy - safe to keep)
   - scrolly[data-active-step="n"] controls visibility
------------------------------ */
.storyIcon{
  width: min(420px, 86vw);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  filter: saturate(1.05);
  opacity: .95;
}
.storyIcon__layer{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .25s ease, transform .25s ease;
}
.scrolly[data-active-step="1"] .storyIcon__layer.icon--1,
.scrolly[data-active-step="2"] .storyIcon__layer.icon--2,
.scrolly[data-active-step="3"] .storyIcon__layer.icon--3,
.scrolly[data-active-step="4"] .storyIcon__layer.icon--4{
  opacity: 1;
  transform: none;
}

/* Shared icon "metal" look */
.storyIcon :is(.indecision__post,.indecision__arm,.beerBackout__bowl,.beerBackout__stem,.beerBackout__neck,.beerBackout__body,.roulette__board,.roulette__rings,.roulette__dart,.generic__shelf){
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    rgba(10,10,18,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* 1) Indecision */
.indecision{
  width: 78%;
  height: 78%;
  position: relative;
  display:grid;
  place-items:center;
}
.indecision__fork{position:relative; width: 56%; height: 56%;}
.indecision__post{
  position:absolute; left: 50%; top: 18%;
  width: 18px; height: 62%;
  transform: translateX(-50%);
  border-radius: 999px;
}
.indecision__arm{
  position:absolute;
  top: 22%;
  width: 42%;
  height: 14px;
  border-radius: 999px;
}
.indecision__arm--l{left: 6%; transform: rotate(-18deg);}
.indecision__arm--r{right: 6%; transform: rotate(18deg);}

.indecision__q{
  position:absolute;
  font-weight: 900;
  font-size: clamp(54px, 7vw, 84px);
  line-height: 1;
  background: linear-gradient(90deg, rgba(139,92,255,.92), rgba(255,79,216,.78));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 14px 30px rgba(139,92,255,.18));
  transform: translateY(-2px);
}
.indecision__pulse{
  position:absolute;
  inset: 18%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(139,92,255,.22), transparent 60%);
  opacity: .65;
  transform: scale(calc(.98 + (var(--step-p) * .06)));
  transition: transform .08s linear;
}

/* 2) Beer back-out */
.beerBackout{
  width: 82%;
  height: 82%;
  position: relative;
}
.beerBackout__glass{
  position:absolute;
  left: 14%;
  top: 18%;
  width: 44%;
  height: 58%;
  transform-origin: 50% 85%;
  transform: rotate(calc(-10deg * var(--step-p)));
  transition: transform .08s linear;
}
.beerBackout__bowl{
  position:absolute; left: 12%; top: 8%;
  width: 76%; height: 54%;
  border-radius: 26px;
}
.beerBackout__stem{
  position:absolute; left: 50%; top: 58%;
  width: 14px; height: 28%;
  transform: translateX(-50%);
  border-radius: 999px;
}
.beerBackout__shine{
  position:absolute;
  left: 22%; top: 18%;
  width: 28%; height: 30%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  opacity: .55;
  transform: skewX(-10deg);
  mix-blend-mode: screen;
}

.beerBackout__beer{
  position:absolute;
  right: 6%;
  top: 18%;
  width: 28%;
  height: 62%;
  transform-origin: 20% 70%;
  transform:
    translateX(calc(-10px * var(--step-p)))
    rotate(calc(-18deg * var(--step-p)));
  transition: transform .08s linear;
}
.beerBackout__neck{
  position:absolute;
  left: 30%;
  top: 0;
  width: 40%;
  height: 18%;
  border-radius: 16px;
}
.beerBackout__body{
  position:absolute;
  left: 16%;
  top: 14%;
  width: 68%;
  height: 72%;
  border-radius: 22px;
}
.beerBackout__spark{
  position:absolute;
  left: 52%;
  top: 42%;
  width: 20%;
  height: 20%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,79,216,.25), transparent 60%);
  opacity: calc(.15 + (var(--step-p) * .65));
  filter: blur(1px);
}

/* 3) Russian roulette (dart miss) */
.roulette{
  width: 84%;
  height: 84%;
  position: relative;
  display:grid;
  place-items:center;
}
.roulette__board{
  position:absolute;
  inset: 16%;
  border-radius: 999px;
}
.roulette__rings{
  position:absolute;
  inset: 24%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle, rgba(139,92,255,.14), transparent 55%),
    radial-gradient(circle, rgba(255,79,216,.10), transparent 62%),
    rgba(0,0,0,.12);
}
.roulette__dart{
  position:absolute;
  width: 54%;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgba(139,92,255,.55), rgba(255,79,216,.42));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transform:
    translateX(calc((-120px + (var(--step-p) * 220px))))
    translateY(calc((-18px + (var(--step-p) * 44px))))
    rotate(-18deg);
  opacity: calc(.35 + (var(--step-p) * .65));
  transition: transform .08s linear, opacity .08s linear;
}
.roulette__trail{
  position:absolute;
  width: 62%;
  height: 62%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(139,92,255,.14), transparent 60%);
  opacity: calc(.12 + (var(--step-p) * .20));
  filter: blur(1px);
}

/* 4) Safe & generic */
.generic{
  width: 86%;
  height: 86%;
  position: relative;
}
.generic__shelf{
  position:absolute;
  left: 10%;
  right: 10%;
  height: 14px;
  border-radius: 999px;
}
.generic__shelf--1{top: 32%;}
.generic__shelf--2{top: 62%;}
.generic__cups{
  position:absolute;
  left: 14%;
  right: 14%;
  top: 18%;
  bottom: 18%;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  opacity: calc(.55 + (var(--step-p) * .35));
  transform: scale(calc(.985 + (var(--step-p) * .02)));
  transition: opacity .08s linear, transform .08s linear;
}
.generic__cups span{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}

/* Proof cards */
.caseGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .caseGrid{grid-template-columns: 1fr;}
}

.caseCard{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--cc-shadow-soft);
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.caseCard__top{display:flex; justify-content:space-between; align-items:baseline; gap: 12px;}
.caseCard__metric{font-weight: 900; font-size: 26px; letter-spacing: -.01em;}
.caseCard__body{display:grid; gap: 10px;}
.caseCard__venue{font-weight: 900;}
.caseCard__quote{
  border-left: 3px solid rgba(139,92,255,.55);
  padding-left: 12px;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
}
.caseCard__rows{display:grid; gap: 8px; margin-top: 2px;}
.caseRow{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.caseCard__cta{margin-top:auto;}

/* CTA Bar */
.ctaBar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 22px;
  box-shadow: var(--cc-shadow-soft);
}
.ctaBar__title{font-weight: 900; font-size: 22px; margin-bottom: 6px;}
.ctaBar__right{display:flex; gap: 12px; flex-wrap:wrap;}
@media (max-width: 900px){
  .ctaBar{flex-direction:column;}
  .ctaBar__right .btn{width:100%}
}

/* Footer */
.footer{
  padding: var(--s-56) 0 var(--s-64);
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: var(--s-16);
}
.footer__links{display:flex; gap: var(--s-16); flex-wrap:wrap;}
.footer__links a{
  text-decoration:none;
  color: var(--cc-muted);
  font-weight: 600;
  font-size: 14px;
}
.footer__links a:hover{color: var(--cc-text)}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  html.js [data-reveal]{transition:none}
  .storyIcon__layer{transition:none}
  .beerBackout__beer,.beerBackout__glass,.roulette__dart,.generic__cups{transition:none}
  .storyMedia__layer{transition:none}
}

/* ------------------------------
   SCROLL STORY — image version
------------------------------ */

/* sticky media */
.storyMedia{
  width: min(460px, 86vw);
  aspect-ratio: 4 / 5;
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  box-shadow: var(--cc-shadow);
}
.storyMedia__layer{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
  filter: saturate(.95);
  will-change: opacity, transform;
}
.storyMedia__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* active image per step */
.scrolly[data-active="1"] .storyMedia__layer--1,
.scrolly[data-active="2"] .storyMedia__layer--2,
.scrolly[data-active="3"] .storyMedia__layer--3,
.scrolly[data-active="4"] .storyMedia__layer--4{
  opacity: 1;
  transform: none;
  filter: saturate(1.05);
}

/* copy boxes inside each step */
.storyBox{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 22px;
  box-shadow: var(--cc-shadow-soft);
}
.storyBox .h2{ margin-bottom: 10px; }
.storyCTA{ margin-top: 14px; }

/* ADD to /V2/css/v2.css  (GymLaunch-style qualify page) */

/* GymLaunch-ish waves */
.glWave{
  position:absolute;
  left:0; right:0;
  height: 120px;
  pointer-events:none;
  z-index: 2;
}
.glWave svg{width:100%; height:100%; display:block}
.glWave--bottom{bottom:-1px;}
.glWave--top{top:-1px; transform: rotate(180deg);}

/* HERO */
.glHero{
  position: relative;
  padding: calc(var(--nav-h) + 72px) 0 96px;
  min-height: 78vh;
  display:grid;
  align-items:center;
  overflow:hidden;
}
.glHero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.55) 42%, rgba(0,0,0,.35)),
    var(--gl-hero-img) center / cover no-repeat;
  filter: saturate(1.05);
  z-index:0;
}
.glHero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 50% 75%, rgba(139,92,255,.12), transparent 62%),
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
  z-index:1;
}
.glHero__inner{position:relative; z-index:3;}
.glHero__content{
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
  padding: 0 10px;
}
.glHero__h1{
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-weight: 900;
}
.glHero__sub{
  margin: 0 auto 24px;
  max-width: 78ch;
  line-height: 1.55;
}
.glHero__promise{
  display:block;
  font-weight: 800;
  margin-bottom: 10px;
}
.glHero__fine{display:block; font-size: 14px;}
.glHero__cta{display:flex; justify-content:center; margin-top: 14px;}
.glHero .pill--solo{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* LIGHT SECTIONS (white like GymLaunch) */
.glLight{
  background:#fff;
  color:#0f0f14;
  position:relative;
  z-index:1;
}
.glLight a{color: inherit}
.glLight .muted{color: rgba(16,16,22,.68)}
.glLight .dim{color: rgba(16,16,22,.52)}
.glLight ::selection{background: rgba(139,92,255,.18)}

/* TRUSTED BY */
.glTrusted{padding: 62px 0 70px;}
.glTrusted__inner{text-align:center;}
.glTrusted__kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(16,16,22,.55);
  margin-bottom: 18px;
  font-weight: 800;
}
.glTrusted__logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 28px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.glLogo{
  min-width: 120px;
  height: 34px;
  border-radius: 10px;
  border: 1px dashed rgba(16,16,22,.18);
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(16,16,22,.45);
}
.glTrusted__note{font-size: 14px;}

/* APPLY SECTION */
.glApply{
  position: relative;
  padding: 94px 0 96px;
  overflow:hidden;
}
.glApply::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.50) 44%, rgba(0,0,0,.68)),
    var(--gl-apply-img) center / cover no-repeat;
  filter: saturate(1.02);
  opacity: .92;
  z-index:0;
}
.glApply::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(139,92,255,.12), transparent 62%),
    radial-gradient(900px 600px at 50% 85%, rgba(255,79,216,.10), transparent 62%);
  z-index:1;
}
.glApply__inner{position:relative; z-index:3; text-align:center;}
.glApply__h2{
  margin: 0 0 12px;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.01em;
  font-weight: 900;
}
.glApply__p{
  margin: 0 auto 22px;
  max-width: 72ch;
  color: rgba(255,255,255,.84);
  line-height: 1.65;
}

/* qualification box */
.glQualBox{
  max-width: 980px;
  margin: 0 auto 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  padding: 18px;
  box-shadow: var(--cc-shadow-soft);
  text-align:left;
}
.glQualBox__title{font-weight: 900; margin-bottom: 10px;}
.glQualBox__chips{display:flex; flex-wrap:wrap; gap: 10px;}
.glQualBox__note{margin-top: 10px; font-size: 13px;}

/* big form card */
.glApply__cardWrap{display:flex; justify-content:center; margin-top: 16px;}
.glCard{
  width: min(980px, 100%);
  border-radius: 30px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  padding: 26px;
  text-align:left;
}
.glCard__head{margin-bottom: 18px;}
.glCard__title{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.glCard__sub{color: rgba(255,255,255,.82); line-height: 1.55;}

/* underline form */
.glForm{margin-top: 8px;}
.glForm__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 34px;
}
@media (max-width: 760px){
  .glForm__grid{grid-template-columns: 1fr; gap: 20px;}
  .glCard{padding: 20px;}
  .glCard__title{font-size: 22px;}
}
.glField{display:grid; gap: 10px;}
.glField--full{grid-column: 1 / -1;}
.glField label{
  color: rgba(255,255,255,.90);
  font-weight: 700;
  font-size: 13px;
}
.glReq{opacity:.75; font-weight: 900;}

.glForm input,
.glForm select{
  width: 100%;
  border: 0;
  border-bottom: 2px solid rgba(255,255,255,.38);
  background: transparent;
  color: rgba(255,255,255,.92);
  padding: 10px 2px 12px;
  font-size: 14px;
  outline: none;
  border-radius: 0;
}
.glForm input::placeholder{color: rgba(255,255,255,.55)}
.glForm input:focus,
.glForm select:focus{
  border-bottom-color: rgba(139,92,255,.85);
  box-shadow: 0 10px 30px rgba(139,92,255,.12);
}
.glForm select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.70) 50%),
    linear-gradient(135deg, rgba(255,255,255,.70) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 10px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.glForm__bar{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  align-items:center;
  margin-top: 22px;
}
.glForm__micro{font-size: 13px; max-width: 52ch;}
.glStatus{margin-top: 12px; min-height: 18px;}

/* result panel */
.glResult{
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  padding: 18px;
}
.glResult__title{font-weight: 900; font-size: 18px; margin-bottom: 6px;}
.glResult__actions{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px;}
@media (max-width: 520px){
  .glResult__actions .btn{width:100%}
}

/* HOW CAN THIS BE TRUE */
.glExplain{padding: 74px 0 84px;}
.glExplain__inner{max-width: 920px; margin: 0 auto; text-align:center;}
.glExplain__h2{
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.glGold{
  background: linear-gradient(90deg, rgba(139,92,255,.96), rgba(255,79,216,.80));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.glExplain__copy{
  max-width: 72ch;
  margin: 0 auto;
  text-align:left;
  color: rgba(16,16,22,.82);
  line-height: 1.8;
  font-size: 16px;
}

/* PROOF background wrapper */
.glProof{
  position: relative;
  padding: 96px 0 96px;
  overflow:hidden;
}
.glProof::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65)),
    var(--gl-proof-img) center / cover no-repeat;
  opacity: .95;
  z-index:0;
}
.glProof > .container{position:relative; z-index:2;}