.imagene-pagehero {
	display: block;
	position: relative;
	overflow: hidden;
	min-height: 755px;
	padding: 145px var(--imagene-pad) 120px;
	background: #fff;
	color: #300725;
	align-items: unset;
	max-width: none;
	width: 100%;
	margin: 0;
}

/* The 1440×755 scene scales with the viewport. Grow with it so the photo is not clipped. */
.imagene-pagehero--predict,
.imagene-pagehero--discover {
	min-height: calc(755px * var(--imagene-scene-scale, 1));
}

/* The Discover page is hero + intro only: every wrapper down from <main> grows so the intro section fills the
   space above the footer, while the hero keeps the standard height. */
.site-main:has(.imagene-pagehero--discover),
.site-main :is(.page-content, .elementor, .e-con):has(.imagene-pagehero--discover),
.site-main .elementor-widget:not(.imagene-hero-pin):has(.imagene-pagehero--discover),
.site-main .elementor-widget:not(.imagene-hero-pin) > .elementor-widget-container:has(.imagene-pagehero--discover) {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.imagene-pagehero--discover {
	flex: none;
}

.imagene-pagehero__copy {
	position: relative;
	z-index: 2;
	max-width: 651px;
	margin-left: max(0px, calc((100% + 2 * var(--imagene-pad)) / 2 - 720px));
}

.imagene-lockup {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 20px;
	color: #447900;
}

.imagene-lockup img {
	width: 77px;
	height: 59px;
}

.imagene-lockup__word {
	margin: 0;
	font-size: 51px;
	font-weight: 600;
	line-height: 1;
}

.imagene-lockup__suffix {
	font-size: 29px;
	font-weight: 400;
	letter-spacing: 8.2px;
	text-transform: uppercase;
	line-height: 1;
}

.imagene-lockup--predict {
	color: #a83689;
	gap: 20px;
}

.imagene-lockup--predict img {
	width: 77px;
	height: 59px;
}

.imagene-lockup--predict .imagene-lockup__word {
	font-size: 51px;
}

.imagene-lockup--discover {
	color: #0662ae;
}

.imagene-pagehero__heading {
	margin: 0 0 16px;
	font-size: 45px;
	font-weight: 200;
	line-height: 1.3;
	color: #300725;
}

.imagene-pagehero--discover .imagene-pagehero__heading {
	color: #211938;
}

.imagene-pagehero__lede {
	margin: 0 0 40px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.8;
	color: #211938;
}

.imagene-pagehero__visual {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1440px;
	height: 755px;
	margin: 0;
	transform: translateX(-50%) scale(var(--imagene-scene-scale, 1));
	transform-origin: center top;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.imagene-pagehero__picture--mobile-only { display: none; }
@media (max-width: 1024px) {
	.imagene-pagehero__picture--mobile-only { display: contents; }
	.imagene-pagehero__picture--desktop-only { display: none; }
}

.imagene-pagehero__photo {
	max-width: none !important;
	border-radius: 0;
}

.imagene-pagehero__photo {
	position: absolute;
	display: block;
}

.imagene-pagehero--predict .imagene-pagehero__photo,
.imagene-pagehero--discover .imagene-pagehero__photo {
	left: 0;
	top: 0;
	width: 100%;
	height: 620px;
	object-fit: cover;
	object-position: left top;
}

/* Wide, short band like the Predict scene: cdx-hero-wide.webp (1180×540) bakes the left fade
   and the bottom feather into its alpha, so no CSS gradient overlay is needed on desktop. */
.imagene-pagehero--cdx .imagene-pagehero__photo {
	left: 260px;
	top: 0;
	width: 1180px;
	height: 540px;
	object-fit: cover;
	object-position: left top;
}

.imagene-pagehero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

.imagene-pagehero--predict .imagene-pagehero__visual::after,
.imagene-pagehero--discover .imagene-pagehero__visual::after {
	display: none;
}

.imagene-pagehero__cdx-art { position: absolute; inset: 0; z-index: 2; }
.imagene-pagehero__cdx-art img { position: absolute; max-width: none; }
.imagene-pagehero__glow-top { left: 137px; top: -330px; }
.imagene-pagehero__glow-left { left: -395px; top: 111px; }
.imagene-pagehero__glow-photo { left: 526px; top: -299px; }
.imagene-pagehero__line { left: 341px; top: 76.822px; }

.imagene-pagehero--cdx .imagene-pagehero__visual::after {
	display: none;
}

.imagene-pagehero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	background: #fff;
	border-radius: 100px 100px 0 0;
	box-shadow: var(--imagene-lip-shadow);
	clip-path: inset(-20px -20px 0 -20px);
	z-index: 2;
	pointer-events: none;
}

.imagene-pagehero--predict::after,
.imagene-pagehero--discover::after {
	display: none;
}

/* Desktop page heroes (Predict + CDx) are 620px tall, down from the 755px Figma scene. On wide
   screens the scaled scene is cropped from the bottom (grid rows just end) and the white rounded
   edge is drawn in CSS. */
@media (min-width: 1025px) {
	.imagene-pagehero--predict,
	.imagene-pagehero--discover {
		height: 620px;
		min-height: 0;
		max-height: 620px;
	}

	.imagene-pagehero--cdx {
		min-height: 620px;
	}

	.imagene-pagehero--predict .imagene-pagehero__visual,
	.imagene-pagehero--discover .imagene-pagehero__visual,
	.imagene-pagehero--cdx .imagene-pagehero__visual {
		height: 620px;
	}

	.imagene-pagehero--predict::after,
	.imagene-pagehero--discover::after {
		display: block;
		height: 96px;
		border-radius: 100px 100px 0 0;
	}

	/* Full-bleed 1920×600 hero band (predict-, discover- and cdx-hero-bg-1920.png). The left
	   fade and glows are baked into the image, so the 1440 scene scaling is bypassed on desktop. */
	.imagene-pagehero--predict .imagene-pagehero__visual,
	.imagene-pagehero--discover .imagene-pagehero__visual,
	.imagene-pagehero--cdx .imagene-pagehero__visual {
		left: 0;
		width: 100%;
		transform: none;
	}

	.imagene-pagehero--predict .imagene-pagehero__photo,
	.imagene-pagehero--discover .imagene-pagehero__photo,
	.imagene-pagehero--cdx .imagene-pagehero__photo {
		left: 0;
		top: 0;
		width: 100%;
		height: 600px;
		object-fit: cover;
		object-position: right top;
	}

	.imagene-pagehero--cdx .imagene-pagehero__cdx-art {
		display: none;
	}
}

.imagene-intro {
	padding: 8px var(--imagene-pad) 80px;
	max-width: none;
}

/* Discover: coming-soon copy and button sit under the hero on white, and the section fills the page down to the footer. */
.imagene-intro.imagene-intro--discover {
	flex: 1 0 auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 16px max(var(--imagene-pad), (100% - var(--imagene-max)) / 2) 64px;
	background: #fff;
}

.imagene-intro--discover .imagene-intro__copy {
	max-width: 666px;
}

.imagene-intro--discover .imagene-intro__copy p {
	margin: 0 0 30px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.8;
	color: #211938;
}

.imagene-intro--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 30px;
	align-items: center;
	max-width: calc(var(--imagene-max) + 2 * var(--imagene-pad));
	margin: 0 auto 40px;
	padding-left: var(--imagene-pad);
	padding-right: var(--imagene-pad);
	text-align: left;
}

.imagene-intro--split .imagene-intro__copy {
	max-width: 628px;
}

.imagene-intro--split p {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--imagene-ink);
}

.imagene-intro__visual img {
	width: 100%;
	height: auto;
	display: block;
}

.imagene-intro--split .imagene-intro__note {
	margin-top: 30px;
	font-weight: 200;
	font-style: normal;
	font-size: 16px;
	line-height: 1.5;
	color: #211938;
}

.imagene-split__visual img,
.imagene-ihc__visual img,
.imagene-apps__body img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	display: block;
}

.imagene-pagehero__overlay {
	height: auto;
	object-fit: contain;
}

.imagene-how__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: var(--imagene-max);
	margin: 16px auto 0;
	text-align: center;
}

.imagene-life {
	text-align: center;
	padding: 0 var(--imagene-pad);
}

.imagene-life__frame {
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px 40px;
	border-radius: 40px;
	background: linear-gradient(180deg, #f7f7f7 0%, #f4faee 100%);
}

.imagene-life__intro {
	display: flex;
	flex-direction: column;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.imagene-life h2 {
	margin-bottom: 10px;
}

.imagene-life p {
	margin-bottom: 0;
}

/* Fallback before script measures the heading's longest line. */
.imagene-life__intro:has(h2) > p {
	width: 0;
	min-width: 100%;
	align-self: center;
}

.imagene-life__stages {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 30px auto 0;
	max-width: var(--imagene-max);
	position: relative;
}

.imagene-life__stages::before {
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	top: 115px;
	border-top: 1px solid #c9cce8;
}

.imagene-life__stages li {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.imagene-life__stages li::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 85px;
	width: 10px;
	height: 60px;
	margin-left: -5px;
	background: var(--imagene-life-marker-image, url("../images/cdx-life-tick.svg")) center / 10px 60px no-repeat;
	z-index: 2;
	pointer-events: none;
}

.imagene-life__stages li span {
	display: block;
	max-width: 194px;
	margin-top: 74px;
}

.imagene-life__stages img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	background: transparent;
	border-radius: 50%;
}

.imagene-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 572px;
	border-radius: 20px;
	background: #e8e4ef;
	color: #9aa0b8;
	font-size: 45px;
	font-weight: 300;
}