/* oct2 banner: one fluid stage for every breakpoint (scripts/stage-hero.mjs). Layers sit where Figma puts
   them, in % of the stage, each frame's numbers in its own @media; the stage keeps that 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; }

@media (min-width: 768px) {
	#oct2-banner .oct2-stage .oct2-cta-get-my-offer { left: 81.749%; top: 80.769%; min-width: max(126px, 15.97cqw); height: max(27px, 3.422cqw); padding: 0 max(9px, 1.141cqw); box-sizing: border-box; border-radius: max(32px, 4.106cqw); background-color: #000000; color: #ffffff; font-size: max(12px, 1.521cqw); }  /* design button 2:332245: 210×45 at (970, 177), Avenir:Black 20px */
	#oct2-banner .oct2-stage .oct2-cta-get-my-offer { z-index: 1; }
}

@media (max-width: 767px) {
	#oct2-banner .oct2-stage .oct2-cta-get-my-offer { left: 50%; top: 90.057%; min-width: max(131px, 38.462cqw); 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 1:59616: 150×40 at (120, 451), Avenir:Black 16px */
	#oct2-banner .oct2-stage .oct2-cta-get-my-offer { z-index: 1; }
}

#oct2-banner .oct2-stage { max-width: 1315px; }
#oct2-banner .oct2-stage .oct2-art { position: relative; width: 100%; height: auto; }
@media (max-width: 767px) { #oct2-banner .oct2-stage { max-width: 585px; } }

/* Stays inside the theme's margins (ticket): .container is 1315 + its 15px gutters. Figma's desktop card
   (1:9898) has a soft shadow on a white margin; the stage carries it, and nothing around it clips it. */
#oct2-banner.container.promo-wrapper { --content-width: 1345px; margin-top: 31px; margin-bottom: 46px; }
@media (min-width: 768px) { #oct2-banner .oct2-stage { box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1); } }
@media (max-width: 767px) { #oct2-banner.container.promo-wrapper { margin-top: 0; margin-bottom: 20px; } }