/* oct2 hero: 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-promo { background-color: #ffffff; }
#oct2-promo .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-promo .oct2-stage picture img { position: absolute; display: block; height: auto; max-width: none; }
#oct2-promo .oct2-cta { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; text-decoration: none; border: none; }
#oct2-promo .oct2-cta:hover, #oct2-promo .oct2-cta:focus-visible { filter: brightness(1.15); }
#oct2-promo.oct2-anim-paused .oct2-anim { animation-play-state: paused; }
@property --oct2-r { syntax: '<angle>'; initial-value: 0rad; inherits: false; }

@media (min-width: 768px) {
	/* Desktop stage: Figma frame 1920x855, stage 1920×689 (top 166px is the NAV mock) */
	#oct2-promo .oct2-stage {
		aspect-ratio: 1920 / 689;
		max-width: 1920px;  /* mobile art stops growing at 1.5× its frame (the page background continues around it) */
		background-image: url(../images/hero/back.jpg);
		background-image: -webkit-image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
		background-image: image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
	}
	#oct2-promo .oct2-stage .oct2-cta-get-my-offer { left: 59.323%; top: 78.222%; min-width: max(147px, 11.458cqw); height: max(29px, 2.24cqw); padding: 0 max(7px, 0.521cqw); box-sizing: border-box; border-radius: max(36px, 2.813cqw); background-color: #000000; color: #ffffff; font-size: max(12px, 0.938cqw); }  /* design button 1:279: 220×43 at (1029, 517.45), Avenir:Black 18px */
	#oct2-promo .oct2-stage .oct2-cta-get-my-offer { z-index: 1; }
	#oct2-promo .oct2-stage .oct2-plus-bundles { left: 50.573%; top: 61.684%; width: 17.552%; }
	#oct2-promo .oct2-stage .oct2-plus-bundles { z-index: 2; }
	#oct2-promo .oct2-stage .oct2-pays-til { left: 50.729%; top: 47.17%; width: 18.802%; }
	#oct2-promo .oct2-stage .oct2-pays-til { z-index: 3; }
	#oct2-promo .oct2-stage .oct2-price { left: 51.458%; top: 23.948%; width: 18.073%; }
	#oct2-promo .oct2-stage .oct2-price { z-index: 4; }
	#oct2-promo .oct2-stage .oct2-top-grunge { left: 75.104%; top: 0%; width: 24.896%; }
	#oct2-promo .oct2-stage .oct2-top-grunge { z-index: 5; }
	#oct2-promo .oct2-stage .oct2-cap-headline { left: 46.615%; top: 13.498%; width: 25.365%; }
	#oct2-promo .oct2-stage .oct2-cap-headline { z-index: 6; }
	#oct2-promo .oct2-stage .oct2-product-bundle { left: 65.208%; top: 62.7%; width: 22.292%; }  /* re-rendered at the node's exact bounds (Figma 17:18): 428×256 at (1252, 432) */
	#oct2-promo .oct2-stage .oct2-product-bundle { z-index: 7; }
	#oct2-promo .oct2-stage .oct2-vector { left: 19.896%; top: 10.595%; width: 23.438%; }
	#oct2-promo .oct2-stage .oct2-vector { z-index: 8; }
	#oct2-promo .oct2-stage .oct2-bull { left: 18.906%; top: 8.999%; width: 27.135%; }
	#oct2-promo .oct2-stage .oct2-bull { z-index: 9; }
	#oct2-promo .oct2-stage .oct2-brush { left: 38.333%; top: 45.138%; width: 7.135%; }
	#oct2-promo .oct2-stage .oct2-brush { z-index: 10; }
	#oct2-promo .oct2-stage .oct2-anim-headline { z-index: 11; }
	#oct2-promo .oct2-stage .oct2-anim-left-nostril-smoke-burst { z-index: 12; }
	#oct2-promo .oct2-stage .oct2-anim-right-nostril-smoke-burst { z-index: 13; }
	/* Desktop motion and live text (figma-motion-to-css) */
	/* headline (Figma 1:1082): image 382.73×241.74 at (423.64, 324.62) in the stage, pivot = node centre */
	#oct2-promo .oct2-stage .oct2-anim-headline {
		left: 22.065%;
		top: 47.115%;
		width: 19.934%;
		height: 35.086%;
		transform-origin: 50.001% 50%;
		transform: rotate(var(--oct2-r, 0rad));
		animation:
			oct2-headline-translate 3s linear infinite,
			oct2-headline-scale 3s linear infinite;
		will-change: transform, opacity;
		pointer-events: none;
	}
	@keyframes oct2-headline-translate {
		0% { animation-timing-function: ease-out; translate: 0% 0%; }
		4.333% { animation-timing-function: ease-in-out; translate: -1.719% -1.701%; }
		10.667% { translate: 0% 0%; }
		100% { translate: 0% 0%; }
	}
	@keyframes oct2-headline-scale {
		0% { animation-timing-function: ease-out; scale: 1 1; }
		4.333% { animation-timing-function: ease-in-out; scale: 1.035 1.035; }
		10.667% { scale: 1 1; }
		100% { scale: 1 1; }
	}

	/* Left nostril — smoke burst (Figma 1:2677): image 95.225×55.581 at (469.055, 289.97) in the stage (dot + inset; corrected by hand, see gotchas), pivot = node centre */
	#oct2-promo .oct2-stage .oct2-anim-left-nostril-smoke-burst {
		left: 24.43%;
		top: 42.086%;
		width: 4.96%;
		height: 8.067%;
		transform-origin: 99.491% 0.873%;
		transform: rotate(var(--oct2-r, 0rad));
		animation:
			oct2-left-nostril-smoke-burst-opacity 3s linear infinite,
			oct2-left-nostril-smoke-burst-translate 3s linear infinite,
			oct2-left-nostril-smoke-burst-scale 3s linear infinite;
		will-change: transform, opacity;
		pointer-events: none;
	}
	@keyframes oct2-left-nostril-smoke-burst-opacity {
		0% { animation-timing-function: ease-out; opacity: 0; }
		3.333% { animation-timing-function: ease-out; opacity: 0.95; }
		12% { animation-timing-function: ease-out; opacity: 0.85; }
		30% { opacity: 0; }
		35% { animation-timing-function: ease-out; opacity: 0; }
		38.333% { animation-timing-function: ease-out; opacity: 0.95; }
		46.667% { animation-timing-function: ease-out; opacity: 0.8; }
		66% { opacity: 0; }
		100% { opacity: 0; }
	}
	@keyframes oct2-left-nostril-smoke-burst-translate {
		0% { translate: 0% 0%; }
		6.667% { animation-timing-function: ease-out; translate: 0% 0%; }
		30% { animation-timing-function: ease-out; translate: -12.223% -8.726%; }
		35% { translate: 0% 0%; }
		43.333% { animation-timing-function: ease-out; translate: 0% 0%; }
		66% { translate: -12.223% -8.726%; }
		100% { translate: -12.223% -8.726%; }
	}
	@keyframes oct2-left-nostril-smoke-burst-scale {
		0% { animation-timing-function: ease-out; scale: 0.08 0.08; }
		6.667% { animation-timing-function: ease-out; scale: 0.6 0.6; }
		21.667% { animation-timing-function: ease-out; scale: 1 1; }
		30% { animation-timing-function: ease-out; scale: 1.13 1.13; }
		35% { animation-timing-function: ease-out; scale: 0.08 0.08; }
		43.333% { animation-timing-function: ease-out; scale: 0.6 0.6; }
		56.667% { animation-timing-function: ease-out; scale: 1 1; }
		66% { scale: 1.13 1.13; }
		100% { scale: 1.13 1.13; }
	}

	/* Right nostril — smoke burst (Figma 1:2680): image 95.036×56.163 at (605.78, 289.388) in the stage (dot + inset; corrected by hand, see gotchas), pivot = node centre */
	#oct2-promo .oct2-stage .oct2-anim-right-nostril-smoke-burst {
		left: 31.551%;
		top: 42.001%;
		width: 4.95%;
		height: 8.151%;
		transform-origin: 3.572% 1.9%;
		transform: rotate(var(--oct2-r, 0rad));
		animation:
			oct2-right-nostril-smoke-burst-opacity 3s linear infinite,
			oct2-right-nostril-smoke-burst-translate 3s linear infinite,
			oct2-right-nostril-smoke-burst-scale 3s linear infinite;
		will-change: transform, opacity;
		pointer-events: none;
	}
	@keyframes oct2-right-nostril-smoke-burst-opacity {
		0% { opacity: 0; }
		0.667% { animation-timing-function: ease-out; opacity: 0; }
		4% { animation-timing-function: ease-out; opacity: 0.95; }
		12.667% { animation-timing-function: ease-out; opacity: 0.85; }
		30.667% { opacity: 0; }
		35.667% { animation-timing-function: ease-out; opacity: 0; }
		39% { animation-timing-function: ease-out; opacity: 0.95; }
		47.333% { animation-timing-function: ease-out; opacity: 0.8; }
		66.667% { opacity: 0; }
		100% { opacity: 0; }
	}
	@keyframes oct2-right-nostril-smoke-burst-translate {
		0% { translate: 0% 0%; }
		7.333% { animation-timing-function: ease-out; translate: 0% 0%; }
		30.667% { animation-timing-function: ease-out; translate: 12.247% -8.636%; }
		35.667% { translate: 0% 0%; }
		44% { animation-timing-function: ease-out; translate: 0% 0%; }
		66.667% { translate: 12.247% -8.636%; }
		100% { translate: 12.247% -8.636%; }
	}
	@keyframes oct2-right-nostril-smoke-burst-scale {
		0% { scale: 0.08 0.08; }
		0.667% { animation-timing-function: ease-out; scale: 0.08 0.08; }
		7.333% { animation-timing-function: ease-out; scale: 0.6 0.6; }
		22.333% { animation-timing-function: ease-out; scale: 1 1; }
		30.667% { animation-timing-function: ease-out; scale: 1.13 1.13; }
		35.667% { animation-timing-function: ease-out; scale: 0.08 0.08; }
		44% { animation-timing-function: ease-out; scale: 0.6 0.6; }
		57.333% { animation-timing-function: ease-out; scale: 1 1; }
		66.667% { scale: 1.13 1.13; }
		100% { scale: 1.13 1.13; }
	}

	#oct2-promo .oct2-stage .oct2-anim-paused .oct2-anim,
	#oct2-promo .oct2-stage.oct2-anim-paused .oct2-anim { animation-play-state: paused; }
	@media (prefers-reduced-motion: reduce) {
		#oct2-promo .oct2-stage .oct2-anim { animation: none; }
	}
}

@media (max-width: 767px) {
	/* Mobile stage: Figma frame 390x796, stage 390×688 (top 108px is the NAV mock) */
	#oct2-promo .oct2-stage {
		aspect-ratio: 390 / 688;
		max-width: 585px;  /* mobile art stops growing at 1.5× its frame (the page background continues around it) */
		background-image: url(../images/hero/back-m.jpg);
		background-image: -webkit-image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
		background-image: image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
	}
	#oct2-promo .oct2-stage .oct2-bull { left: 4.359%; top: 3.924%; width: 91.282%; }
	#oct2-promo .oct2-stage .oct2-bull { z-index: 1; }
	#oct2-promo .oct2-stage .oct2-brush { left: 69.744%; top: 28.634%; width: 23.846%; }
	#oct2-promo .oct2-stage .oct2-brush { z-index: 2; }
	#oct2-promo .oct2-stage .oct2-anim-headline { z-index: 3; }
	#oct2-promo .oct2-stage .oct2-anim-left-nostril-smoke-burst { z-index: 4; }
	#oct2-promo .oct2-stage .oct2-anim-right-nostril-smoke-burst { z-index: 5; }
	#oct2-promo .oct2-stage .oct2-cap-headline { left: 17.692%; top: 56.395%; width: 66.154%; }
	#oct2-promo .oct2-stage .oct2-cap-headline { z-index: 6; }
	#oct2-promo .oct2-stage .oct2-price { left: 6.667%; top: 71.948%; width: 86.923%; }
	#oct2-promo .oct2-stage .oct2-price { z-index: 7; }
	#oct2-promo .oct2-stage .oct2-plus-bundles { left: 4.359%; top: 77.471%; width: 91.282%; }
	#oct2-promo .oct2-stage .oct2-plus-bundles { z-index: 8; }
	#oct2-promo .oct2-stage .oct2-cta-get-my-offer { left: 50%; top: 85.174%; 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:49976: 150×40 at (120, 566), Avenir:Black 16px */
	#oct2-promo .oct2-stage .oct2-cta-get-my-offer { z-index: 9; }
	/* Mobile motion and live text (figma-motion-to-css) */
	/* headline (Figma 19:31978): image 261.26×165.02 at (58.6, 206.27) in the stage, pivot = node centre */
	#oct2-promo .oct2-stage .oct2-anim-headline {
		left: 15.026%;
		top: 29.981%;
		width: 66.99%;
		height: 23.985%;
		transform-origin: 50% 50%;
		transform: rotate(var(--oct2-r, 0rad));
		animation:
			oct2-headline-m-translate 2.76s linear infinite,
			oct2-headline-m-scale 2.76s linear infinite;
		will-change: transform, opacity;
		pointer-events: none;
	}
	@keyframes oct2-headline-m-translate {
		0% { animation-timing-function: ease-out; translate: 0% 0%; }
		4.71% { animation-timing-function: ease-in-out; translate: -1.719% -1.701%; }
		11.594% { translate: 0% 0%; }
		100% { translate: 0% 0%; }
	}
	@keyframes oct2-headline-m-scale {
		0% { animation-timing-function: ease-out; scale: 1 1; }
		4.71% { animation-timing-function: ease-in-out; scale: 1.035 1.035; }
		11.594% { scale: 1 1; }
		100% { scale: 1 1; }
	}

	/* Left nostril — smoke burst (Figma 19:33596): image 64.988×37.932 at (89.614, 182.62) in the stage (dot + inset; corrected by hand, see gotchas), pivot = node centre */
	#oct2-promo .oct2-stage .oct2-anim-left-nostril-smoke-burst {
		left: 22.978%;
		top: 26.544%;
		width: 16.664%;
		height: 5.513%;
		transform-origin: 99.491% 0.873%;
		transform: rotate(var(--oct2-r, 0rad));
		animation:
			oct2-left-nostril-smoke-burst-m-opacity 2.76s linear infinite,
			oct2-left-nostril-smoke-burst-m-translate 2.76s linear infinite,
			oct2-left-nostril-smoke-burst-m-scale 2.76s linear infinite;
		will-change: transform, opacity;
		pointer-events: none;
	}
	@keyframes oct2-left-nostril-smoke-burst-m-opacity {
		0% { animation-timing-function: ease-out; opacity: 0; }
		3.623% { animation-timing-function: ease-out; opacity: 0.95; }
		13.043% { animation-timing-function: ease-out; opacity: 0.85; }
		32.609% { opacity: 0; }
		38.043% { animation-timing-function: ease-out; opacity: 0; }
		41.667% { animation-timing-function: ease-out; opacity: 0.95; }
		50.725% { animation-timing-function: ease-out; opacity: 0.8; }
		71.739% { opacity: 0; }
		100% { opacity: 0; }
	}
	@keyframes oct2-left-nostril-smoke-burst-m-translate {
		0% { translate: 0% 0%; }
		7.246% { animation-timing-function: ease-out; translate: 0% 0%; }
		32.609% { animation-timing-function: ease-out; translate: -12.225% -8.729%; }
		38.043% { translate: 0% 0%; }
		47.101% { animation-timing-function: ease-out; translate: 0% 0%; }
		71.739% { translate: -12.225% -8.729%; }
		100% { translate: -12.225% -8.729%; }
	}
	@keyframes oct2-left-nostril-smoke-burst-m-scale {
		0% { animation-timing-function: ease-out; scale: 0.08 0.08; }
		7.246% { animation-timing-function: ease-out; scale: 0.6 0.6; }
		23.551% { animation-timing-function: ease-out; scale: 1 1; }
		32.609% { animation-timing-function: ease-out; scale: 1.13 1.13; }
		38.043% { animation-timing-function: ease-out; scale: 0.08 0.08; }
		47.101% { animation-timing-function: ease-out; scale: 0.6 0.6; }
		61.594% { animation-timing-function: ease-out; scale: 1 1; }
		71.739% { scale: 1.13 1.13; }
		100% { scale: 1.13 1.13; }
	}

	/* Right nostril — smoke burst (Figma 19:33625): image 64.859×38.33 at (182.924, 182.223) in the stage (dot + inset; corrected by hand, see gotchas), pivot = node centre */
	#oct2-promo .oct2-stage .oct2-anim-right-nostril-smoke-burst {
		left: 46.904%;
		top: 26.486%;
		width: 16.631%;
		height: 5.571%;
		transform-origin: 3.572% 1.9%;
		transform: rotate(var(--oct2-r, 0rad));
		animation:
			oct2-right-nostril-smoke-burst-m-opacity 2.76s linear infinite,
			oct2-right-nostril-smoke-burst-m-translate 2.76s linear infinite,
			oct2-right-nostril-smoke-burst-m-scale 2.76s linear infinite;
		will-change: transform, opacity;
		pointer-events: none;
	}
	@keyframes oct2-right-nostril-smoke-burst-m-opacity {
		0% { opacity: 0; }
		0.725% { animation-timing-function: ease-out; opacity: 0; }
		4.348% { animation-timing-function: ease-out; opacity: 0.95; }
		13.768% { animation-timing-function: ease-out; opacity: 0.85; }
		33.333% { opacity: 0; }
		38.768% { animation-timing-function: ease-out; opacity: 0; }
		42.391% { animation-timing-function: ease-out; opacity: 0.95; }
		51.449% { animation-timing-function: ease-out; opacity: 0.8; }
		72.464% { opacity: 0; }
		100% { opacity: 0; }
	}
	@keyframes oct2-right-nostril-smoke-burst-m-translate {
		0% { translate: 0% 0%; }
		7.971% { animation-timing-function: ease-out; translate: 0% 0%; }
		33.333% { animation-timing-function: ease-out; translate: 12.25% -8.638%; }
		38.768% { translate: 0% 0%; }
		47.826% { animation-timing-function: ease-out; translate: 0% 0%; }
		72.464% { translate: 12.25% -8.638%; }
		100% { translate: 12.25% -8.638%; }
	}
	@keyframes oct2-right-nostril-smoke-burst-m-scale {
		0% { scale: 0.08 0.08; }
		0.725% { animation-timing-function: ease-out; scale: 0.08 0.08; }
		7.971% { animation-timing-function: ease-out; scale: 0.6 0.6; }
		24.275% { animation-timing-function: ease-out; scale: 1 1; }
		33.333% { animation-timing-function: ease-out; scale: 1.13 1.13; }
		38.768% { animation-timing-function: ease-out; scale: 0.08 0.08; }
		47.826% { animation-timing-function: ease-out; scale: 0.6 0.6; }
		62.319% { animation-timing-function: ease-out; scale: 1 1; }
		72.464% { scale: 1.13 1.13; }
		100% { scale: 1.13 1.13; }
	}

	#oct2-promo .oct2-stage .oct2-anim-paused .oct2-anim,
	#oct2-promo .oct2-stage.oct2-anim-paused .oct2-anim { animation-play-state: paused; }
	@media (prefers-reduced-motion: reduce) {
		#oct2-promo .oct2-stage .oct2-anim { animation: none; }
	}
}