#stage2 .f2-header {
  text-align:center;
  margin-bottom:48px;
}
#stage2 .f2-header h1 {
  font-size:64px;
  font-weight:800;
  line-height:1.1;
  margin:0;
  letter-spacing:-0.02em;
  color:var(--earn-text);
  font-family:var(--earn-font);
}
#stage2 .f2-header .in-minutes {
  color:var(--earn-green);
  display:block;
  /* Static text-shadow glow instead of animated drop-shadow filter -
     filter:drop-shadow() forces a full element re-paint each frame
     and is one of the most expensive properties to animate. */
  text-shadow:0 0 12px rgba(89, 204, 128, 0.45);
}
#stage2 .f2-header p {
  font-size:28px;
  font-weight:600;
  color:var(--earn-text);
  line-height:1.3;
  margin:16px 0 0;
  font-family:var(--earn-font);
}
#stage2 .f2-steps {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px;
  width:100%;
  margin-bottom:48px;
}
#stage2 .f2-step {
  text-align:center;
  text-decoration:none !important;
  color:inherit !important;
  display:block;
  cursor:pointer;
  transition:transform 0.15s ease;
}
#stage2 a.f2-step:hover {
  transform:translateY(-2px);
}
#stage2 a.f2-step:visited,
#stage2 a.f2-step:focus,
#stage2 a.f2-step:active {
  color:inherit !important;
  text-decoration:none !important;
}
#stage2 .f2-icon-wrap {
  width:90px;
  height:90px;
  background:var(--earn-surface-2);
  border-radius:var(--earn-radius-card);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}
#stage2 .f2-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:55px;
  height:55px;
  /* Static drop-shadow on the icon image directly - set once,
     cached on the GPU layer, never re-painted. */
  filter:drop-shadow(0 0 9px rgba(89, 204, 128, 0.45));
}
#stage2 .f2-icon img {
  width:100%;
  height:100%;
  object-fit:contain;
}
#stage2 .f2-label {
  font-size:10px;
  font-weight:600;
  color:var(--earn-green);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:10px;
  font-family:var(--earn-font);
}
#stage2 .f2-title {
  font-size:16px;
  font-weight:600;
  color:var(--earn-text);
  margin-bottom:10px;
  line-height:1.3;
  font-family:var(--earn-font);
}
#stage2 .f2-desc {
  font-size:13px;
  font-weight:400;
  color:var(--earn-text-muted);
  line-height:1.5;
  max-width:220px;
  margin:0 auto;
  font-family:var(--earn-font);
}
#stage2 .f2-cta {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
}
#stage2 .f2-email {
  height:48px;
  padding:0 24px;
  width:280px;
}
/* Fold-in animations - transform + opacity only.
   Removed `filter: blur(4px)` because animating CSS filters forces
   the compositor to rasterize the element each frame at the new
   blur radius (~3-5ms per frame on mid-range hardware). The visual
   "blur dissolve" was nice but cost a frame budget we don't have.
   Pure transform+opacity stays on the GPU compositor and runs at
   60fps even on phones. */
@keyframes foldElIn {
  0% {
    opacity:0;
    transform:translate3d(0, 26px, 0) scale(0.96);
  }
  100% {
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
  }
}
@keyframes foldFadeIn {
  0% {
    opacity:0;
    transform:translate3d(0, 0, 0) scale(0.985);
  }
  100% {
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
  }
}
/* Fold 1 entrance animations are intentionally OMITTED here. Fold 1
   is the LCP fold - making its title / phone / copy start at opacity:0
   meant the user stared at a half-blank hero for 700-1000ms while the
   CSS keyframe animations played out. They're now rendered at their
   natural state (opacity 1, no transform) from the very first paint
   so the page LOOKS loaded instantly. The cross-fade in apply() still
   handles transitions BETWEEN folds - that's all the motion fold 1
   needs. */
#stage2 .f2-header,
#stage2 .f2-steps .f2-step,
#stage2 .f2-cta,
#stage3 .grid>.darkTitle,
#stage3 .grid>.copy,
#stage5 .grid>.darkTitle,
#stage5 .grid>.copy,
.faq-fold-container .faq-title,
.faq-fold-container .faq-list {
  opacity:0;
  transform:translate3d(0, 26px, 0) scale(0.96);
}
#stage3 .grid>.stackWrap,
#stage5 .grid>.phone {
  opacity:0;
}
#layer2.fold-active #stage2 .f2-header {
  animation:foldElIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0s forwards;
}
#layer2.fold-active #stage2 .f2-steps .f2-step {
  animation:foldElIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
#layer2.fold-active #stage2 .f2-steps .f2-step:nth-child(1) {
  animation-delay:0.15s;
}
#layer2.fold-active #stage2 .f2-steps .f2-step:nth-child(2) {
  animation-delay:0.30s;
}
#layer2.fold-active #stage2 .f2-steps .f2-step:nth-child(3) {
  animation-delay:0.45s;
}
#layer2.fold-active #stage2 .f2-steps .f2-step:nth-child(4) {
  animation-delay:0.60s;
}
#layer2.fold-active #stage2 .f2-cta {
  animation:foldElIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s forwards;
}
#layer3.fold-active #stage3 .grid>.darkTitle {
  animation:foldElIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0s forwards;
}
#layer3.fold-active #stage3 .grid>