.fold2-offers-section {
  background:transparent;
  padding:0;
  overflow:hidden;
  font-family:var(--earn-font);
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transform-origin:center center;
}
.fold2-offers-wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:visible;
}
.fold2-offers-row {
  position:relative;
  overflow:visible;
  margin-bottom:0;
  width:100vw;
  padding:12px 0;
}
.fold2-offers-track {
  display:flex;
  gap:14px;
  width:max-content;
  transform:translate3d(0, 0, 0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* Animation paused by default - only runs when the offers fold is
     active (see #layer4.fold-active rule below). Saves ~3-5% of CPU
     on every page that doesn't show this fold visibly. */
  animation-play-state:paused;
}
.fold2-offers-row.row-large .fold2-offers-track {
  animation:fold2-scroll-right 216s linear infinite;
  transform:translateZ(0);
}
.fold2-offers-row.row-small .fold2-offers-track {
  animation:fold2-scroll-left 216s linear infinite;
  transform:translateZ(0);
}
/* Run the marquee + promote to a GPU layer ONLY when fold 4 is on
   screen. Off-screen folds (where opacity = 0 anyway) don't need
   to keep animating - that was burning CPU with no visible result. */
#layer4.fold-active .fold2-offers-track {
  animation-play-state:running;
  will-change:transform;
}
@keyframes fold2-scroll-left {
  0% {
    transform:translateX(0);
  }
  50% {
    transform:translateX(calc(-100% + 100vw));
  }
  100% {
    transform:translateX(0);
  }
}
@keyframes fold2-scroll-right {
  0% {
    transform:translateX(calc(-100% + 100vw));
  }
  50% {
    transform:translateX(0);
  }
  100% {
    transform:translateX(calc(-100% + 100vw));
  }
}
.fold2-offer-card-large {
  flex-shrink:0;
  width:614px;
  height:356px;
  border-radius:var(--earn-radius-card);
  overflow:hidden;
  position:relative;
  background:var(--earn-surface);
  border:1px solid var(--earn-border);
  cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, z-index 0s;
  z-index:1;
  text-decoration:none;
  display:block;
  color:inherit;
}
.fold2-offer-card-large *,
.fold2-offer-card-small * {
  pointer-events:none !important;
}
.fold2-offer-card-large.fold2-card-hovered {
  transform:scale(1.04);
  box-shadow:0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(89, 204, 128, 0.15);
  border-color:rgba(255, 255, 255, 0.28);
  z-index:20;
}
.fold2-offer-card-large .fold2-offer-image,
.fold2-offer-card-large .fold2-offer-video {
  width:100%;
  height:297px;
  object-fit:cover;
  object-position:center;
  display:block;
  /* `will-change` removed from every card - that promoted ~30 always-on
     compositor layers and made the GPU thrash. The .fold2-offers-track
     ABOVE already owns a single GPU layer for the whole marquee, which
     is what we actually want. */
  transform:translateZ(0);
  backface-visibility:hidden;
}
.fold2-offer-card-large .fold2-offer-info-bar {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:59px;
  /* backdrop-filter:blur removed - was burning paint on every marquee frame
     for ~30 cards - 2 rows. Solid rgba w/ higher opacity reads identically
     against the dark video thumbs but composites in a single fast pass. */
  background:rgba(28, 28, 30, 0.94);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 19px 0 16px;
}
.fold2-offer-card-small {
  flex-shrink:0;
  width:307px;
  height:232px;
  border-radius:var(--earn-radius-card);
  overflow:hidden;
  position:relative;
  background:var(--earn-surface);
  border:1px solid var(--earn-border);
  cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, z-index 0s;
  z-index:1;
  text-decoration:none;
  display:block;
  color:inherit;
}
.fold2-offer-card-small.fold2-card-hovered {
  transform:scale(1.04);
  box-shadow:0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(89, 204, 128, 0.15);
  border-color:rgba(255, 255, 255, 0.28);
  z-index:20;
}
.fold2-offer-card-small .fold2-offer-image,
.fold2-offer-card-small .fold2-offer-video {
  width:100%;
  height:173px;
  object-fit:cover;
  object-position:center;
  display:block;
  /* See note on .fold2-offer-card-large above - will-change removed. */
  transform:translateZ(0);
  backface-visibility:hidden;
}
.fold2-offer-card-small .fold2-offer-info-bar {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:59px;
  /* See note above - backdrop-filter dropped for marquee paint perf. */
  background:rgba(28, 28, 30, 0.94);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px 0 13px;
}
.fold2-offer-info-left {
  display:flex;
  align-items:center;
  gap:10px;
}
.fold2-offer-logo {
  width:35px;
  height:35px;
  border-radius:var(--earn-radius-small);
  object-fit:cover;
  background:var(--earn-text-muted);
}
.fold2-offer-text {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.fold2-offer-name {
  color:var(--earn-text);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  font-family:var(--earn-font);
}
.fold2-offer-time {
  color:var(--earn-text-muted);
  font-size:10px;
  font-weight:400;
  line-height:1.2;
  font-family:var(--earn-font);
}
.fold2-offer-info-right {
  display:flex;
  align-items:center;
  gap:11px;
}
.fold2-offer-points-container {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.fold2-offer-points {
  color:var(--earn-text);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  font-family:var(--earn-font);
}
.fold2-offer-dollars {
  color:var(--earn-text-muted);
  font-size:10px;
  font-weight:400;
  line-height:1.2;
  font-family:var(--earn-font);
}
.fold2-offer-earn-btn {
  min-width:51px;
  height:27px;
  background:var(--earn-green);
  border:none;
  border-radius:var(--earn-radius-icon);
  color:var(--earn-black);
  font-size:11px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  transition:background 0.2s ease;
  font-family:var(--earn-font);
}
.fold2-card-hovered .fold2-offer-earn-btn {
  background:var(--earn-green-hover);
}
.fold2-view-all-container {
  display:flex;
  justify-content:center;
  margin-top:16px;
}
.fold2-view-all-btn {
  width:152px;
}
.fold2-logo-init {
  width:36px;
  height:36px;
  border-radius:var(--earn-radius-small);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:var(--earn-text);
  letter-spacing:0.5px;
  flex-shrink:0;
}
@keyframes skel-shimmer {
  0% {
    background-position:-200% 0;
  }
  100% {
    background-position:200% 0;
  }
}
.fold2-skeleton-track {
  display:flex;
  gap:16px;
  padding:0 8px;
}
.fold2-skel-card {
  flex-shrink:0;
  border-radius:var(--earn-radius-card);
  overflow:hidden;
  position:relative;
  background:var(--earn-surface);
  border:1px solid var(--earn-border);
}
.fold2-skel-card-lg {
  width:614px;
  height:356px;
}
.fold2-skel-card-sm {
  width:307px;
  height:232px;
}
.fold2-skel-media {
  width:100%;
  background:linear-gradient(90deg, var(--earn-surface) 0%, #2a2a2e 25%, #333338 50%, #2a2a2e 75%, var(--earn-surface) 100%);
  background-size:200% 100%;
  animation:skel-shimmer 1.8s ease-in-out infinite;
}
.fold2-skel-card-lg .fold2-skel-media {
  height:297px;
}
.fold2-skel-card-sm .fold2-skel-media {
  height:173px;
}
.fold2-skel-bar {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:59px;
  background:rgba(28, 28, 30, 0.94);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
}
.fold2-skel-dot {
  width:36px;
  height:36px;
  border-radius:var(--earn-radius-small);
  background:linear-gradient(90deg, #2a2a2e 0%, #3a3a3e 50%, #2a2a2e 100%);
  background-size:200% 100%;
  animation:skel-shimmer 1.8s ease-in-out infinite;
}
.fold2-skel-lines {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-left:10px;
}
.fold2-skel-line {
  height:10px;
  border-radius:5px;
  background:linear-gradient(90deg, #2a2a2e 0%, #3a3a3e 50%, #2a2a2e 100%);
  background-size:200% 100%;
  animation:skel-shimmer 1.8s ease-in-out infinite;
}
.fold2-skel-line-w {
  width:72px;
}
.fold2-skel-line-n {
  width:48px;
}
.fold2-skel-pill {
  width:51px;
  height:27px;
  border-radius:var(--earn-radius-icon);
  background:linear-gradient(90deg, #2a2a2e 0%, #3a3a3e 50%, #2a2a2e 100%);
  background-size:200% 100%;
  animation:skel-shimmer 1.8s ease-in-out infinite;
}
.fold2-thumb-wrap {
  width:100%;
  position:relative;
  overflow:hidden;
  display:block;
  transform:translateZ(0);
  contain:layout style paint;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background-size:cover;
  background-position:center;
}
.fold2-thumb-vid {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.5s ease;
}
.fold2-thumb-vid.vid-ready {
  opacity:1;
}
.fold2-offer-card-large,
.fold2-offer-card-small {
  contain:layout style paint;
}
@media (max-width:900px) {
  .fold2-offer-card-large {
    width:410px;
    height:290px;
  }
  .fold2-offer-card-large .fold2-offer-image, .fold2-offer-card-large .fold2-offer-video {
    height:231px;
  }
  .fold2-skel-card-lg {
    width:410px;
    height:290px;
  }
  .fold2-skel-card-lg .fold2-skel-media {
    height:231px;
  }
  .fold2-offer-card-small {
    width:256px;
    height:203px;
  }
  .fold2-offer-card-small .fold2-offer-image, .fold2-offer-card-small .fold2-offer-video {
    height:144px;
  }
  .fold2-skel-card-sm {
    width:256px;
    height:203px;
  }
  .fold2-skel-card-sm .fold2-skel-media {
    height:144px;
  }
}
@media (max-width:600px) {
  .fold2-offer-card-large {
    width:272px;
    height:212px;
  }
  .fold2-offer-card-large .fold2-offer-image, .fold2-offer-card-large .fold2-offer-video {
    height:153px;
  }
  .fold2-offer-card-large .fold2-offer-info-bar {
    height:59px;
    padding:0 11px;
  }
  .fold2-skel-card-lg {
    width:272px;
    height:212px;
  }
  .fold2-skel-card-lg .fold2-skel-media {
    height:153px;
  }
  .fold2-offer-card-small {
    width:224px;
    height:186px;
  }
  .fold2-offer-card-small .fold2-offer-image, .fold2-offer-card-small .fold2-offer-video {
    height:127px;
  }
  .fold2-skel-card-sm {
    width:224px;
    height:186px;
  }
  .fold2-skel-card-sm .fold2-skel-media {
    height:127px;
  }
  .fold2-offer-card-small .fold2-offer-info-bar {
    height:59px;
    padding:0 10px;
  }
  .fold2-offer-logo {
    width:30px;
    height:30px;
    border-radius:6px;
  }
  .fold2-offer-name {
    font-size:11px;
  }
  .fold2-offer-time {
    font-size:9px;
  }
  .fold2-offer-points {
    font-size:11px;
  }
  .fold2-offer-dollars {
    font-size:9px;
  }
  .fold2-offer-earn-btn {
    min-width:43px;
    height:24px;
    font-size:10px;
    border-radius:var(--earn-radius-small);
    padding:0 11px;
  }
  .fold2-view-all-btn {
    width:128px;
    height:42px;
    font-size:12px;
  }
}
@media (prefers-reduced-motion:reduce) {
  #greenPanel, #blackPanel {
    display:none;
  }
  #layer1, #layer2, #layer3, #layer4, #layer5, #layer6 {
    position:relative;
    opacity:1;
    transform:none;
    filter:none;
    pointer-events:auto;
  }
  .driver {
    height:auto;
  }
  .pin {
    position:relative;
    height:auto;
    overflow:visible;
  }
  .stage {
    position:relative;
    left:auto;
    top:auto;
    transform:none;
  }
  .phone {
    transform:none;
  }
  /* bezel replaces old glow animation */
  .fold2-offers-track {
    animation:none !important;
  }
  .fold2-skel-media, .fold2-skel-dot, .fold2-skel-line, .fold2-skel-pill {
    animation:none !important;
  }
  .fold2-offers-wrapper {
    transform:none !important;
    opacity:1 !important;
  }
  #stage2 .f2-header, #stage2 .f2-steps .f2-step, #stage2 .f2-cta, #stage1 .grid>.title, #stage1 .grid>.phone, #stage1 .grid>.copy, #stage3 .grid>.darkTitle, #stage3 .grid>.copy, #fold2OffersContainer, #layer4 .fold2-offers-row.row-large, #layer4 .fold2-offers-row.row-small, #layer4 .fold2-view-all-container, #stage5 .grid>.darkTitle, #stage5 .grid>.phone, #stage5 .grid>.copy, .faq-fold-container .faq-title, .faq-fold-container .faq-list {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  /* stackWrap intentionally OMITTED from the transform:none stripping above.
     Its translate is positional (not animated), and stripping it makes the
     gift-card fan land where the right copy column is. Animations on it
     are killed via the `animation:none` below instead. */
  #stage3 .grid>.stackWrap {
    animation:none !important;
    opacity:1 !important;
    filter:none !important;
    transition:none !important;
  }
}