/* oct2 banner: a fluid stage per Figma frame (scripts/stage-hero.mjs). Layers sit where Figma puts them, in % of
   the stage; the stage keeps the frame's aspect ratio (NAV mock excluded) and is the cqw container. */
#oct2-banner {
   background-color: #ffffff;
}

#oct2-banner .oct2-stage {
   position: relative;
   width: 100%;
   margin: 0 auto;
   container-type: inline-size;
   overflow: hidden;
   background-position: center;
   background-size: 100% 100%;
   background-repeat: no-repeat;
}

#oct2-banner .oct2-stage picture img {
   position: absolute;
   display: block;
   height: auto;
   max-width: none;
}

#oct2-banner .oct2-cta {
   position: absolute;
   transform: translate(-50%, -50%);
   white-space: nowrap;
   line-height: 1;
   text-decoration: none;
   border: none;
}

#oct2-banner .oct2-cta:hover,
#oct2-banner .oct2-cta:focus-visible {
   filter: brightness(1.15);
}

#oct2-banner.oct2-anim-paused .oct2-anim {
   animation-play-state: paused;
}

#oct2-banner .oct2-stage .oct2-cta.oct2-cta-bundles {
   left: 81.4%;
   top: 71.451%;
   min-width: max(119px, 12.971cqw);
   height: max(29px, 3.116cqw);
   padding: 0 max(7px, 0.725cqw);
   box-sizing: border-box;
   border-radius: max(36px, 3.913cqw);
   background-color: #000000;
   color: #ffffff;
   font-size: max(12px, 1.304cqw);
}

/* design button 235:22: 179×43 at (1136, 210), Avenir:Black 18px */
#oct2-banner .oct2-stage .oct2-cta.oct2-cta-coupon {
   left: 74.022%;
   top: 71.451%;
   min-width: max(127px, 13.841cqw);
   height: max(29px, 3.116cqw);
   padding: 0 max(7px, 0.725cqw);
   box-sizing: border-box;
   border-radius: max(36px, 3.913cqw);
   background-color: #000000;
   color: #ffffff;
   font-size: max(12px, 1.304cqw);
}

/* design button 235:23: 191×43 at (926, 210), Avenir:Black 18px */
@media screen and (max-width: 767px) {
   #oct2-banner .oct2-stage .oct2-cta.oct2-cta-coupon {
      left: 28.59%;
      top: 89.714%;
      min-width: max(144px, 42.308cqw);
      height: max(35px, 10.256cqw);
      padding: 0 max(7px, 1.923cqw);
      box-sizing: border-box;
      border-radius: max(44px, 12.821cqw);
      background-color: #000000;
      color: #ffffff;
      font-size: max(14px, 4.103cqw);
   }

   /* design button 190:139874: 165×40 at (29, 451), Avenir:Black 16px */
   #oct2-banner .oct2-stage .oct2-cta.oct2-cta-bundles {
      left: 49.333%;
      top: 89.714%;
      min-width: max(135px, 39.487cqw);
      height: max(35px, 10.256cqw);
      padding: 0 max(7px, 1.923cqw);
      box-sizing: border-box;
      border-radius: max(44px, 12.821cqw);
      background-color: #000000;
      color: #ffffff;
      font-size: max(14px, 4.103cqw);
   }

   /* design button 190:139875: 154×40 at (209, 451), Avenir:Black 16px */

}

#oct2-banner .oct2-stage {
   max-width: 1380px;
}

#oct2-banner .oct2-stage .oct2-art {
   position: relative;
   width: 100%;
   height: auto;
}

@media (max-width: 767px) {
   #oct2-banner .oct2-stage {
      max-width: 585px;
   }
}