/* Desktop: pull the driver up under the 90px fixed header so the hero
   starts at the very top of the viewport. Previously this offset was
   applied via JS at DOMContentLoaded which caused a CLS hit of 0.35 -
   the entire 720vh driver jumped up after first paint. CSS-only now
   means the layout is correct from the very first frame. Mobile leaves
   the driver in normal flow (its own @media rule below sets
   height:auto). */
.driver {
  height:720vh;
  position:relative;
  background:var(--earn-black);
  margin-top:-90px;
}
@media (max-width:768px) {
  .driver {
    margin-top:0;
  }
}
.pin {
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--earn-black);
  isolation:isolate;
  contain:layout style paint;
}
#blackPanel {
  position:absolute;
  inset:0;
  background:var(--earn-black);
  z-index:0;
  pointer-events:none;
  --bo:0;
  --bt:-110;
  opacity:var(--bo);
  transform:translate3d(0, calc(var(--bt) * 1%), 0);
  will-change:transform, opacity;
  backface-visibility:hidden;
}
#greenPanel {
  position:absolute;
  inset:-8px;
  background:var(--GREEN);
  z-index:1;
  pointer-events:none;
  --sx:1;
  --rad:0px;
  --alpha:1;
  --shadowA:0;
  --haloA:0;
  opacity:var(--alpha);
  transform:translate3d(0, 0, 0) scale3d(var(--sx), 1, 1);
  transform-origin:50% 50%;
  border-radius:var(--rad);
  box-shadow:0 34px 90px rgba(0, 0, 0, var(--shadowA));
  will-change:transform, opacity, border-radius;
  backface-visibility:hidden;
}
#greenPanel::after {
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
  opacity:var(--haloA);
  background:radial-gradient(45% 45% at 50% 56%, rgba(0, 0, 0, .14) 0%, rgba(0, 0, 0, 0) 62%);
  mix-blend-mode:multiply;
}
.layer {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  pointer-events:none;
  backface-visibility:hidden;
  /* `contain: layout style paint` - tell the browser these layers
     don't affect anything outside their box. Lets it skip re-running
     layout/paint for the whole page when one fold's children animate. */
  contain:layout style paint;
}
/* Promote ONLY the currently-active layer to its own GPU layer.
   Previously every layer had `will-change: transform, opacity` which
   forced 6 always-on compositor layers, eating GPU memory and
   actually making things slower on lower-end devices. */
.layer.fold-active {
  will-change:transform, opacity;
}
.fold--green {
  --h-size:64;
  --h-lh:1.02;
  --copy:18;
  --cta-h:56;
  --cta-px:22;
  --y-shift:0;
  color:var(--earn-text);
}
.fold--dark {
  --h-size:56;
  --h-lh:1.06;
  --copy:18;
  --cta-h:64;
  --cta-px:28;
  --y-shift:0;
  color:var(--earn-text);
}
.stage {
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--W) * 1px);
  height:calc(var(--H) * 1px);
  transform-origin:50% 50%;
  transform:translate(-50%, -50%);
}
.grid {
  position:absolute;
  inset:0;
  display:grid;
  align-items:center;
  justify-content:center;
  grid-template-columns:repeat(3, calc(var(--COL)*1px));
  column-gap:calc(var(--GAP)*1px);
  transform:translateY(calc(var(--H) * var(--y-shift) * 1px));
}
/* Stage 3: keep the LEFT and RIGHT text columns at their original 420px
   width so "Sign Up Now. / Get Free Points." renders the same as before
   (one line per phrase). Just expand the MIDDLE column to fit the
   gift-card fan with comfortable clearance from both text columns.
     420 + 80 + 600 + 80 + 420 = 1600  (matches stage --W exactly)
     Col 3 left edge is at stage_x = 1180 - 154px clear of the front
     card's right edge (1026), so no overlap with the right copy.
   This is a layout change (not a transform), so it's resilient to
   prefers-reduced-motion stripping transforms. */
#stage3 .grid {
  justify-content:center;
  align-items:center;
  grid-template-columns: 420px 600px 420px;
  column-gap: 80px;
}
#stage5 .grid {
  justify-content:center;
  align-items:center;
  grid-template-columns:repeat(3, calc(var(--COL)*1px));
  column-gap:calc(var(--GAP)*1px);
}
#stage5 .darkTitle {
  width:auto;
  white-space:nowrap;
}
#stage2 .fold2-inner {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 40px;
}