/* OI Predict page (Figma 4780:10426): hero tuning, capabilities tabs and the solutions tabs. */

.imagene-capabilities,
.imagene-capabilities *,
.imagene-solutions,
.imagene-solutions * {
	box-sizing: border-box;
}

/* ---- Hero: artwork only; the title/subtitle scale is shared by every page hero (responsive-min-1025.css) ---- */

/* The artwork starts at x=1140 of the 1920 band. Below 1920 the band shrinks (right-anchored) so the artwork
   always begins 20px after the 662px copy column: width = (100% - 762px) * 1920 / (1920 - 1140). */
@media (min-width: 1025px) and (max-width: 1919px) {
	body.page-oi-predict .imagene-pagehero--predict .imagene-pagehero__photo {
		left: auto;
		right: 0;
		width: min(100%, calc((100% - 762px) * 2.4615));
		height: auto;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 25%), linear-gradient(180deg, #000 70%, transparent);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent, #000 25%), linear-gradient(180deg, #000 70%, transparent);
		mask-composite: intersect;
	}
}

/* The tab dropdown only exists on mobile (responsive-max-1024.css); on desktop the tablist sits in the nav. */
.imagene-tabs__dropdown {
	display: contents;
}

.imagene-tabs__toggle {
	display: none;
}

/* ---- What Can Be Predicted ---- */

.imagene-capabilities {
	max-width: calc(1462px + 2 * var(--imagene-pad));
	margin: 0 auto;
	padding: 30px var(--imagene-pad) 0;
	color: var(--imagene-ink);
}

.imagene-capabilities__head {
	display: flex;
	flex-direction: column;
	gap: 5px;
	text-align: center;
}

.imagene-capabilities__heading {
	margin: 0;
	font-size: 45px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--imagene-ink);
}

.imagene-capabilities__intro {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
}

.imagene-capabilities .imagene-tabs {
	max-width: none;
	margin: 30px 0 0;
}

.imagene-capabilities .imagene-tabs__list {
	width: 100%;
	max-width: none;
}

.imagene-capabilities .imagene-tabs__tab {
	line-height: 1.3;
	letter-spacing: 0;
}

.imagene-tabs__panel.imagene-capabilities__panel {
	display: grid;
	grid-template-columns: 417fr 417fr 566fr;
	gap: 31px;
	align-items: stretch;
	padding-top: 32px;
}

.imagene-capabilities__card {
	min-height: 351px;
	padding: 16px;
	border-radius: 15px;
	background: rgba(248, 240, 242, 0.8);
}

.imagene-capabilities__card--clinical {
	background: rgba(247, 247, 247, 0.8);
}

.imagene-capabilities__card-title {
	display: flex;
	align-items: center;
	min-height: 46px;
	margin: 0 0 20px;
	padding-left: 10px;
	border-left: 8px solid var(--imagene-predict);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--imagene-ink);
}

.imagene-capabilities__card--clinical .imagene-capabilities__card-title {
	border-left-color: #636d3f;
}

.imagene-capabilities__card ul {
	margin: 0;
	padding: 0 0 0 27px;
	font-size: 18px;
	line-height: 1.3;
	list-style: disc;
}

.imagene-capabilities__card li + li {
	margin-top: 10px;
}

.imagene-capabilities__visual {
	margin: 0;
	overflow: hidden;
	border-radius: 15.81px;
	background: #fff;
	box-shadow: 0 0 6px #e5e8fd;
}

.imagene-capabilities__visual picture,
.imagene-capabilities__visual img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- OI Predict Solutions ---- */

.imagene-solutions {
	max-width: 1760px;
	margin: 0 auto;
	padding: 100px 0 0;
	color: var(--imagene-ink);
}

.imagene-solutions__head {
	display: flex;
	align-items: center;
	gap: 60px;
	max-width: calc(1460px + 2 * var(--imagene-pad));
	margin: 0 auto 40px;
	padding: 0 var(--imagene-pad);
}

.imagene-solutions__lockup {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	flex: none;
	margin: 0;
}

.imagene-solutions__brand {
	display: flex;
	align-items: center;
	gap: 15px;
}

.imagene-solutions .imagene-lockup img {
	width: 60px;
	height: 46px;
}

.imagene-solutions .imagene-lockup__word {
	font-size: 57px;
	line-height: 0.8;
}

.imagene-solutions .imagene-lockup__suffix {
	font-size: 32px;
	letter-spacing: 6.4px;
	line-height: 1;
}

.imagene-solutions__intro {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
}

/* Cards row overlaps the top of the rounded gradient panel. */
.imagene-solutions .imagene-tabs--cards {
	position: relative;
	max-width: none;
	margin: 0;
	padding: 0 150px 31px;
}

.imagene-tabs--cards::before {
	content: "";
	position: absolute;
	inset: 39px 0 0;
	z-index: 0;
	border-radius: 60px;
	background: linear-gradient(180deg, #f7f7f7 7.959%, #eaedff 100%);
	pointer-events: none;
}

.imagene-tabs--cards > * {
	position: relative;
	z-index: 1;
}

.imagene-tabs--cards .imagene-tabs__list {
	display: flex;
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: none;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

.imagene-tabs--cards .imagene-tabs__tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 1 350px;
	min-height: 80px;
	padding: 15px 20px;
	border: 1px solid #f8f0f2;
	border-radius: 30px;
	background: #fff;
	filter: drop-shadow(0 0 10px #dddfeb);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	color: var(--imagene-ink);
	transition: color 300ms ease-out, background-color 300ms ease-out, border-color 300ms ease-out;
}

.imagene-tabs--cards .imagene-tabs__tab span {
	max-width: 193px;
}

.imagene-tabs--cards .imagene-tabs__tab::after {
	content: "";
	flex: none;
	width: 43px;
	height: 43px;
	background: url('../images/oi-predict-tab-chevron.svg') center / 43px 43px no-repeat;
}

/* Overrides the shared filled tab hover (portfolio.css): only the stroke picks up the Predict color. */
.imagene-tabs--cards .imagene-tabs__tab:not(.is-active):is(:hover, :focus-visible) {
	border-color: rgba(168, 54, 137, 0.45);
	background: #fff;
	color: var(--imagene-ink);
}

.imagene-tabs--cards .imagene-tabs__tab.is-active {
	border-color: var(--imagene-predict);
	background: #f8f0f2;
	color: var(--imagene-predict);
}

.imagene-tabs--cards .imagene-tabs__tab.is-active::after {
	background-image: url('../images/oi-predict-tab-chevron-active.svg');
}

.imagene-tabs__panel.imagene-solutions__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	min-height: 656px;
	padding-top: 30px;
}

.imagene-solutions__copy p {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.5;
}

.imagene-solutions__copy p:last-of-type {
	margin-bottom: 0;
}

.imagene-solutions__copy--center {
	text-align: center;
}

.imagene-solutions__diagram-scroll {
	width: 100%;
	max-width: 1462px;
}

.imagene-solutions picture {
	display: block;
}

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

.imagene-solutions__panel--diagram .imagene-solutions__cta {
	margin-top: auto;
}

.imagene-solutions__split {
	display: grid;
	grid-template-columns: 566fr 865fr;
	gap: 30px;
	width: 100%;
	margin-top: 42px;
}

.imagene-solutions__split .imagene-solutions__copy {
	padding-top: 12px;
}

.imagene-solutions__split .imagene-solutions__cta {
	margin-top: 60px;
}

.imagene-solutions__card {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
}

.imagene-solutions__card figcaption {
	padding: 30px 20px 17px;
	font-size: 22px;
	font-style: normal;
	line-height: 1.5;
	text-align: center;
}

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

/* IVD use-case slides: a scroll-snap track paged by the shared .imagene-mobile-pager. */
.imagene-tabs__panel.imagene-solutions__panel--slides {
	position: relative;
	gap: 0;
}

.imagene-solutions__slides {
	display: flex;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.imagene-solutions__slides::-webkit-scrollbar {
	display: none;
}

.imagene-solutions__slide {
	display: grid;
	grid-template-columns: minmax(0, 567fr) minmax(0, 865fr);
	column-gap: 29px;
	align-content: start;
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.imagene-solutions__slide-copy {
	padding-top: 10px;
}

.imagene-solutions__eyebrow {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	color: #525cb2;
}

.imagene-solutions__slide-title {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--imagene-ink);
}

.imagene-solutions__slide-body p {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.5;
}

.imagene-solutions__benefits-heading {
	margin: 40px 0 20px;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--imagene-ink);
}

.imagene-solutions__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.imagene-solutions__benefits li {
	display: flex;
	align-items: center;
	gap: 20px;
}

.imagene-solutions__benefits img {
	flex: none;
}

.imagene-solutions__benefits--icons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 268px));
	gap: 30px;
}

.imagene-solutions__benefits--icons span {
	max-width: 168px;
}

.imagene-solutions__benefits--checks {
	display: grid;
	gap: 20px;
	max-width: 400px;
}

/* The panel is the 865×490 Figma frame scaled as one unit: --imagene-step-u is one Figma px at the current panel
   width (never above 1px), so card text and spacing shrink with the cards instead of wrapping. The panel's own
   gap and padding are percentages of the same frame. */
.imagene-solutions__steps {
	--imagene-step-u: min(1px, calc(100cqw / 833));
	container-type: inline-size;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.641%;
	aspect-ratio: 865 / 490;
	margin: 0;
	padding: 0 1.85%;
	border-radius: 20px;
	background: #fff;
	list-style: none;
}

.imagene-solutions__steps[data-count="5"] {
	--imagene-step-u: min(1px, calc(100cqw / 839));
	gap: 1.192%;
	padding: 0 1.503%;
}

/* Cards share the panel width in their Figma proportions (250/288/250 and 157×4/171). */
.imagene-solutions__step {
	--imagene-step-pad: 16;
	--imagene-step-top: 16;
	--imagene-step-bottom: 30;
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	padding: calc(var(--imagene-step-top) * var(--imagene-step-u)) 0 calc(var(--imagene-step-bottom) * var(--imagene-step-u));
	border-radius: calc(10 * var(--imagene-step-u));
	background: #f8f0f2;
	font-size: calc(16 * var(--imagene-step-u));
	line-height: 1.2;
	color: var(--imagene-ink);
}

/* As in Figma, step text keeps its explicit line breaks and may run into the card's right padding. */
.imagene-solutions__step > :not(.imagene-solutions__step-image) {
	margin-left: calc(var(--imagene-step-pad) * var(--imagene-step-u));
	white-space: nowrap;
}

.imagene-solutions__step.is-highlight {
	--imagene-step-pad: 20;
	--imagene-step-top: 20;
	flex-grow: 1.152;
	background: linear-gradient(180deg, #e2bdc8 0%, #f8f0f2 27.885%, #f5f6ff 100%);
	box-shadow: 0 0 calc(10 * var(--imagene-step-u)) #e5e8fd;
}

.imagene-solutions__steps[data-count="5"] .imagene-solutions__step { --imagene-step-pad: 12; --imagene-step-top: 12; --imagene-step-bottom: 12; }
.imagene-solutions__steps[data-count="5"] .imagene-solutions__step.is-highlight { --imagene-step-pad: 15; --imagene-step-top: 16; --imagene-step-bottom: 16; flex-grow: 1.089; }

.imagene-solutions__step-head {
	display: flex;
	align-items: center;
	gap: calc(11 * var(--imagene-step-u));
	margin: 0;
	font-weight: 600;
	letter-spacing: calc(0.32 * var(--imagene-step-u));
	text-transform: uppercase;
	white-space: nowrap;
}

.imagene-solutions__step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: calc(43 * var(--imagene-step-u));
	height: calc(43 * var(--imagene-step-u));
	border: calc(2 * var(--imagene-step-u)) solid #e2bdc8;
	border-radius: 50%;
	letter-spacing: 0;
}

.imagene-solutions__step.is-highlight .imagene-solutions__step-number {
	background: #fff;
}

.imagene-solutions__step-image {
	display: block;
	width: 100%;
	height: auto;
}

.imagene-solutions__step-title {
	margin-top: calc(10 * var(--imagene-step-u));
	font-weight: 600;
}

.imagene-solutions__step-caption {
	margin-top: calc(4 * var(--imagene-step-u));
}

.imagene-solutions__slide-cta {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: 66px;
}

@media (min-width: 1025px) {
	.imagene-solutions .imagene-solutions__pager {
		display: block;
		position: absolute;
		inset: 30px -150px auto;
		height: 0;
		margin: 0;
		pointer-events: none;
	}

	.imagene-solutions__pager > * {
		pointer-events: auto;
	}

	.imagene-solutions__pager .imagene-mobile-pager__btn {
		position: absolute;
		top: 225px;
		width: 41px;
		height: 41px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.imagene-solutions__pager .imagene-mobile-pager__btn::before {
		content: "";
		position: absolute;
		inset: -10px;
		background: url('../images/oi-predict-slide-arrow.svg') center / 61px 61px no-repeat;
	}

	.imagene-solutions__pager .imagene-mobile-pager__btn:disabled {
		cursor: default;
	}

	.imagene-solutions__pager .imagene-mobile-pager__btn:disabled::before {
		background-image: url('../images/oi-predict-slide-arrow-disabled.svg');
	}

	.imagene-solutions__pager .imagene-mobile-pager__btn--prev { left: 100px; }
	.imagene-solutions__pager .imagene-mobile-pager__btn--prev::before { transform: scaleX(-1); }
	.imagene-solutions__pager .imagene-mobile-pager__btn--next { right: 80px; }

	.imagene-solutions__pager .imagene-mobile-pager__dots {
		position: absolute;
		top: 520px;
		left: 50%;
		display: flex;
		gap: 8px;
		transform: translateX(-50%);
	}

	.imagene-solutions__pager .imagene-mobile-pager__dots button {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 1px solid #a8afed;
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
	}

	.imagene-solutions__pager .imagene-mobile-pager__dots button.is-active {
		border-color: #525cb2;
		background: #a8afed;
	}
}