body {
  background: #E8E1D4;
  background: linear-gradient(180deg, #F8F4E9 0%, #E0D5C3 calc(100vh + 50vh), #E0D5C3 calc(100vh + 300px), #E8E1D4 200vh, #E8E1D4 100%);
}

/* Box vertical offset — mirrors the working JS formula exactly, just in CSS.
   IMPORTANT: PHP sets --promo-box-vo-desktop inline on .promo-box, so we need to override
   via the .promo-codes-landing scope on a parent (inline style is higher specificity than
   class selectors on the same element, but a parent setting the var on an ANCESTOR works
   because CSS custom properties inherit and the var is reused in margin-top calc).
   ALSO using !important fallback in case of edge cases. */
@media (min-width: 992px) {
  .promo-codes-landing,
  .promo-codes-landing .promo-box {
    --zen-hero-h: clamp(600px, 49.94vw, 800px);
  }
  /* Default constant bumped from 178 → 200 (extra 22px push so button sits a bit higher above fold). */
  .promo-codes-landing .promo-box {
    --promo-box-vo-desktop: clamp(170px, calc(var(--zen-hero-h) + 200px - 100vh), 420px) !important;
  }
}
@media (min-width: 992px) and (max-height: 749px) {
  /* Compact: constant 146 → 168 (matching extra push). */
  .promo-codes-landing .promo-box {
    --promo-box-vo-desktop: clamp(170px, calc(var(--zen-hero-h) + 168px - 100vh), 420px) !important;
  }
}
@media (min-width: 992px) and (max-width: 1400px) and (max-height: 950px) {
  /* Set vo on the landing too so siblings of .promo-box (like .zenh_vhero-title-box) can inherit it. */
  .promo-codes-landing,
  .promo-codes-landing .promo-box {
    --promo-box-vo-desktop: 50px !important;
  }

 }

/* Compact mode for short viewports — shrinks hero + box info to keep button + hero text visible. */
@media (min-width: 992px) and (max-height: 749px) {
  .promo-codes-landing .zenh_vhero-title-box {
    top: 110px;
  }
  .promo-codes-landing .zenh_vhero-badge-wrap {
    margin-bottom: 16px;
  }
  .promo-codes-landing .zenh_vhero-title,
  .promo-codes-landing .zenh_vhero-title .green {
    font-size: 60px;
    line-height: 64px;
  }
  .promo-codes-landing .zenh_vhero-desc {
    margin-top: 24px;
    font-size: 16px;
  }
  .promo-codes-landing .promo-box__info {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 40px;
  }
  .promo-codes-landing .promo-box__inner {
    padding-top: 40px;
  }
}
@media (min-width: 992px) and (max-height: 649px) {
  .promo-codes-landing .zenh_vhero-title-box {
    top: 90px;
  }
  .promo-codes-landing .zenh_vhero-title,
  .promo-codes-landing .zenh_vhero-title .green {
    font-size: 52px;
    line-height: 56px;
  }
  .promo-codes-landing .promo-box__info {
    font-size: 20px !important;
    margin-bottom: 32px;
  }
  .promo-codes-landing .promo-box__inner {
    padding-top: 32px;
  }
}

/* Override the global zoom rule from functions.php on this page — zoom scales every visual
   measurement (top, padding, margin), throwing off our overlap calculations.
   We use main.promo-codes-landing directly (highest specificity, no body-class guesswork)
   plus body:has() for the header/footer that live outside main. */
main.promo-codes-landing {
  zoom: 1 !important;
}

@media (min-width: 1100px) and (max-width: 1910px) {
  body:has(main.promo-codes-landing) header,
  body[class*="promo-codes"] header {
    zoom: 1 !important;
    max-width: 1312px !important;
  }
  body:has(main.promo-codes-landing) .site-footer,
  body[class*="promo-codes"] .site-footer,
  main.promo-codes-landing {
    zoom: 1 !important;
  }
}

body:has(main.promo-codes-landing) #top,
body:has(main.promo-codes-landing) .img-fluid,
body[class*="promo-codes"] #top,
body[class*="promo-codes"] .img-fluid {
  filter: invert(1) !important;
}

.site-content {
  margin-top: 0;
}

.promo-codes-landing {
  position: relative;
  overflow-x: clip;
}

.promo-codes-landing .zenh_badges-parallax {
  display: none;
}

.promo-codes-landing .zenh_badges-block {
  margin-top: 160px;
  margin-bottom: 168px;
}

@media (max-width: 991px) {
  .promo-codes-landing .zenh_badges-block {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}

@media (min-width: 601px) and (max-width: 991px) {
  .promo-codes-landing .promo-box .promo-box-parallax--card-emerge {
    top: max(calc(-24.12vh), -230px) !important;
  }
}

@media (max-width: 600px) {
  .promo-codes-landing .promo-box .promo-box-parallax--card-emerge {
    top: max(calc(-24.12vh), -140px) !important;
  }
}

@media (max-width: 320px) and (max-height: 600px) {
  .promo-codes-landing .promo-box .promo-box-parallax--card-emerge {
    top: max(calc(-20.12vh), -140px) !important;
  }
}

@media (max-width: 991px) {
  .promo-codes-landing .zen-get-app-parallax {
    display: none;
  }
}

.linebreak {
  display: block;
}

/* Desktop-only break — visible from 992px up, hidden on mobile. */
.linebreak-desktop {
  display: block;
}
@media (max-width: 991px) {
  .linebreak-desktop {
    display: none;
  }
}

.linebreak-1lh {
  display: block;
  height: 0.5lh;
}

/* Scroll reveal — fade + slide up, replays each time element enters/leaves view */
.promo-codes-landing [data-zen-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.promo-codes-landing [data-zen-reveal="left"]  { transform: translateX(-50px); }
.promo-codes-landing [data-zen-reveal="right"] { transform: translateX(50px);  }
.promo-codes-landing [data-zen-reveal="scale"] { transform: scale(0.92); }
.promo-codes-landing [data-zen-reveal="tilt"]  { transform: translateY(40px) rotate(-2deg); }

.promo-codes-landing [data-zen-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.promo-codes-landing [data-zen-reveal][data-zen-reveal-delay="1"].is-revealed { transition-delay: .1s; }
.promo-codes-landing [data-zen-reveal][data-zen-reveal-delay="2"].is-revealed { transition-delay: .2s; }
.promo-codes-landing [data-zen-reveal][data-zen-reveal-delay="3"].is-revealed { transition-delay: .3s; }
.promo-codes-landing [data-zen-reveal][data-zen-reveal-delay="4"].is-revealed { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .promo-codes-landing [data-zen-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Promo-cards-section cards: fade-up reveal via @keyframes animation (NOT transition)
   so the homepage's native `.4s width ease-in-out` hover/click expand keeps its full speed.
   Each card gets a small stagger via JS-set --i custom property. */
.promo-codes-landing .zenh_cards-cards-item[data-zen-reveal="card"] {
  opacity: 0;
  transform: translateY(30px);
  transition: .4s width ease-in-out;
  will-change: opacity;
}

.promo-codes-landing .zenh_cards-cards-item[data-zen-reveal="card"].is-revealed {
  animation: zenCardFadeUp .9s cubic-bezier(.22,1,.36,1) .3s forwards;
  will-change: auto;
}

@keyframes zenCardFadeUp {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-codes-landing .zenh_cards-cards-item[data-zen-reveal="card"],
  .promo-codes-landing .zenh_cards-cards-item[data-zen-reveal="card"].is-revealed {
    opacity: 1;
    transform: none;
    animation: none;
  }
}