.vignette {
  position:absolute;
  inset:-12%;
  background:radial-gradient(60% 60% at 54% 56%, rgba(246, 246, 246, .92) 0%, rgba(250, 250, 250, .75) 40%, rgba(255, 255, 255, 0) 72%);
  pointer-events:none;
  opacity:0;
}
.title {
  width:calc(var(--COL)*1px);
  font-family:var(--earn-font);
  font-weight:800;
  font-size:calc(var(--h-size)*1px);
  line-height:var(--h-lh);
  letter-spacing:-.04em;
  margin:0;
}
.fold--green .title {
  margin-top:-6px;
}
.fold--green .title span {
  display:block;
  color:var(--earn-text);
}
.fold--green .title span.accent {
  color:var(--earn-green);
  /* Static glow - animating text-shadow forces a paint per frame
     across the entire glyph rect. Identical visual result, zero
     animation cost. */
  /* 100px - 40px blur - saved ~6x paint area on the title glow rect.
     Visually indistinguishable at the title's font weight + size. */
  text-shadow:0 4px 40px rgba(89, 204, 128, .95);
}
.copy {
  width:calc(var(--COL)*1px);
  font-size:calc(var(--copy)*1px);
  line-height:1.62;
  letter-spacing:-.01em;
  font-weight:400;
}
.email-entry {
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:12px;
}
.email-input {
  height:48px;
  padding:0 24px;
  width:291px;
}
.phone {
  display:flex;
  align-items:center;
  justify-content:center;
  --pScale:1;
  --pY:0px;
  transform:translate3d(0, var(--pY), 0);
  position:relative;
}
/* Promote phone to its own layer ONLY when it's actively animating.
   Always-on `will-change` forces a permanent GPU layer per phone,
   eating memory even when the user isn't looking at this fold. */
#layer1.fold-active .phone,
#layer5.fold-active .phone {
  will-change:transform;
}
.phoneDevice {
  position:relative;
  height:calc(var(--PHONE-H) * var(--pScale) * 1px);
  aspect-ratio:450/920;
}
/* CSS-only iPhone bezel. Previously this was a 555 KB base64 PNG inlined
   into homepage.html - the single largest weight on the page. Replaced
   with pure CSS: a transparent center (screen shows through) + a thick
   frame via box-shadow + a Dynamic-Island-style pill at the top. Adds
   ~300 bytes of CSS, saves 555 KB of HTML. */
.phoneBezel {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:3;
  /* Outer iPhone shape - rounded rectangle with thick dark frame. The
     box-shadow creates the bezel thickness without a background, so the
     phoneScreen underneath shows through the transparent center. */
  border-radius:13% / 6.5%;
  box-shadow: inset 0 0 0 5px #0a0a0a, inset 0 0 0 6px rgba(255, 255, 255, 0.10), 0 22px 44px rgba(0, 0, 0, .32), 0 3px 12px rgba(0, 0, 0, .18);
  background:transparent;
}
/* Dynamic-Island-style pill at the top of the bezel. Positioned just
   inside the top of the frame, centered horizontally. */
.phoneBezel::before {
  content:'';
  position:absolute;
  top:1.6%;
  left:50%;
  transform:translateX(-50%);
  width:30%;
  max-width:120px;
  height:2.4%;
  min-height:18px;
  background:#0a0a0a;
  border-radius:100px;
  z-index:4;
}
.phoneScreen {
  position:absolute;
  top:2.5%;
  left:6%;
  width:88%;
  height:95%;
  object-fit:cover;
  z-index:1;
  border-radius:calc(var(--PHONE-H) * var(--pScale) * 0.038 * 1px);
}
/* -----------------------------------------------------------------
   Earn Points iPhone mockup - animated content inside the phoneScreen.
   Ported from earnv3.up.railway.app's React mockup (the design demo
   site) for the homepage hero. Sizes use cqw (container query units)
   so the phone scales with its parent container regardless of
   viewport width. */
/* Fallback PNG + is-hidden-initially / is-revealed crossfade removed -
   the live mockup is now pre-populated in HTML and renders at full
   opacity from first paint. Animation cycle still resets it to 0 and
   runs the count-up later, but no image fetch and no crossfade. */
.phoneScreen.earn-phone-points {
  /* Override the default img-only styling so this works as a div */
  background: radial-gradient(130% 90% at 50% 0%, rgba(89, 204, 128, .22), #000 55%);
  color:#fff;
  font-family:var(--earn-font);
  display:flex;
  flex-direction:column;
  /* Tight horizontal padding so the rows + counter stretch closer to
     the inner iPhone screen edges (was 5.5/6/7 - sides reduced to 2). */
  padding:5.5cqw 2cqw 7cqw;
  box-sizing:border-box;
  overflow:hidden;
  container-type:inline-size;
}
.phone-bottom {
  position:relative;
  height: 80%;
  display: flex;
  justify-content: center;
  top:2.5%;
}
.phone-screen-bottom {
  position:absolute;
  height:100%;
  object-fit:contain;
  z-index:1;
  /* border-radius:calc(var(--PHONE-H) * var(--pScale) * 0.038 * 1px); */
}
/* Hero phone vertical placement.
   - Desktop (>900px): shifted UP 100px so the phone sits higher in
     the hero and the green title + paragraph have more breathing
     room visually below it.
   - Mobile (-900px): no offset - let .grid's gap center the phone
     naturally between the title above and the paragraph below.
   Uses the `translate` property (separate from `transform`) so the
   existing scroll-driven --pY transform isn't affected. */
@media (min-width: 901px) {
  /* +200px down so the section/next-fold crops the phone right at
     the bottom of the DoorDash row. Was -50px (50px up). User wants
     the visible cut at the last reward card so the home-indicator
     area below stays hidden. */
  #phone1Wrap .phoneDevice {
    translate: 0 200px;
  }
}
.earn-phone-points-status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:3.6cqw;
  font-weight:600;
  color:rgba(255, 255, 255, .7);
  margin-bottom:4.5cqw;
  padding:0 1.3cqw;
}
.earn-phone-points-status-right {
  display:inline-flex;
  gap:1cqw;
}
.earn-phone-points-status-dot {
  width:1.3cqw;
  height:1.3cqw;
  border-radius:50%;
  background:rgba(255, 255, 255, .55);
}
.earn-phone-points-header {
  text-align:center;
  margin-top:5.5cqw;
}
.earn-phone-points-label {
  font-size:3.6cqw;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255, 255, 255, .55);
}
.earn-phone-points-number-wrap {
  position:relative;
  text-align:center;
  margin-top:3cqw;
  height:18cqw;
  display:flex;
  align-items:center;
  justify-content:center;
}
.earn-phone-points-number {
  font-size:15.5cqw;
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 1.3cqw 13cqw rgba(89, 204, 128, .55);
  font-variant-numeric:tabular-nums;
  line-height:1;
  transition:opacity .7s cubic-bezier(.22, 1, .36, 1);
}
.earn-phone-points-sub {
  text-align:center;
  font-size:3.9cqw;
  color:var(--earn-green, #59CC80);
  margin-top:2cqw;
  font-weight:600;
  transition:opacity .7s cubic-bezier(.22, 1, .36, 1);
}
.earn-phone-points-feed.is-fading .earn-phone-feed-row {
  opacity:0 !important;
  transition:opacity .7s cubic-bezier(.22, 1, .36, 1) !important;
  animation:none !important;
}
.earn-phone-points-number.is-fading,
.earn-phone-points-sub.is-fading {
  opacity:0;
}
.earn-phone-points-feed {
  position:relative;
  margin-top:7cqw;
  flex:1;
  min-height:0;
  --earn-row-step: 18cqw;
}
.earn-phone-points-feed-fade {
  position:absolute;
  left:0;
  right:0;
  bottom:-7cqw;
  height:29cqw;
  background:linear-gradient(180deg, rgba(0, 0, 0, 0), #000 70%);
  pointer-events:none;
}
.earn-phone-feed-row {
  position:absolute;
  top:0;
  left:0;
  right:0;
  transform:translateY(calc(var(--i, 0) * var(--earn-row-step)));
  transition:transform .65s cubic-bezier(.22, 1, .36, 1);
  display:flex;
  align-items:center;
  gap:3.3cqw;
  padding:3.3cqw 4cqw;
  background:rgba(255, 255, 255, .04);
  border:1px solid rgba(255, 255, 255, .06);
  border-radius:4cqw;
  box-sizing:border-box;
  opacity:0;
  animation:earn-phone-row-fade .5s cubic-bezier(.22, 1, .36, 1) .15s forwards;
}
@keyframes earn-phone-row-fade {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
.earn-phone-feed-logo {
  width:9cqw;
  height:9cqw;
  border-radius:2.6cqw;
  background:rgba(89, 204, 128, .15);
  color:var(--earn-green, #59CC80);
  font-size:3.9cqw;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.earn-phone-feed-text {
  flex:1;
  min-width:0;
}
.earn-phone-feed-brand {
  font-size:3.6cqw;
  font-weight:600;
  color:#fff;
  line-height:1.2;
}
.earn-phone-feed-label {
  font-size:3cqw;
  color:rgba(255, 255, 255, .45);
  line-height:1.2;
  margin-top:.6cqw;
}
.earn-phone-feed-amount {
  font-size:3.9cqw;
  font-weight:700;
  color:var(--earn-green, #59CC80);
  font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .earn-phone-feed-row {
    animation:none;
    opacity:1;
    transition:none;
  }
  .earn-phone-points-number {
    /* JS will set final value directly */
  }
}
#phone1Wrap {
  position:relative;
}
#phone5Wrap {
  position:relative;
}
.darkTitle {
  width:calc(var(--COL)*1px);
  font-family:var(--earn-font);
  font-weight:800;
  font-size:64px;
  line-height:1.02;
  letter-spacing:-.04em;
  margin:0;
  color:var(--earn-text);
}
.darkTitle .accent {
  color:var(--earn-green);
  text-shadow:0 4px 100px rgba(89, 204, 128, 1);
}
#stage3 .darkTitle {
  width:auto;
}
#stage3 .darkTitle .accent {
  white-space:nowrap;
}