/*
 * Figma node 40000015:3953 — H2O product overview.
 * All selectors are isolated beneath .raft-h2o-product-figma.
 */

.raft-h2o-product-figma {
	--raft-h2o-product-navy: #000026;
	--raft-h2o-product-purple: #4f0657;
	--raft-h2o-product-coral: #f05252;
	--raft-h2o-product-gold: #f6d586;
	background:
		radial-gradient(ellipse 34% 32% at 100% 0%, rgba(240, 82, 82, 0.18) 0%, rgba(240, 82, 82, 0) 100%),
		radial-gradient(ellipse 38% 35% at 0% 100%, rgba(246, 213, 134, 0.30) 0%, rgba(243, 148, 108, 0.12) 48%, rgba(240, 82, 82, 0) 100%),
		#fff;
	box-sizing: border-box;
	color: var(--raft-h2o-product-navy);
	font-family: "Neue Einstellung", "NeueEinstellung", "Avenir Next", Avenir, Arial, sans-serif;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.raft-h2o-product-figma *,
.raft-h2o-product-figma *::before,
.raft-h2o-product-figma *::after {
	box-sizing: border-box;
}

.raft-h2o-product-figma__glow {
	background-image:
		radial-gradient(ellipse 28% 24% at 7% 92%, rgba(246, 213, 134, 0.48) 0%, rgba(243, 148, 108, 0.17) 55%, rgba(240, 82, 82, 0) 100%),
		radial-gradient(ellipse 24% 22% at 96% 9%, rgba(240, 82, 82, 0.24) 0%, rgba(240, 82, 82, 0) 100%);
	filter: blur(clamp(44px, 3.2vw, 62px));
	height: 100%;
	left: 0;
	max-height: none;
	max-width: none;
	opacity: 0.75;
	position: absolute;
	top: 0;
	transform: none;
	width: 100%;
}

.raft-h2o-product-figma__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(11px, 0.729167vw, 14px);
	margin: 0 auto;
	max-width: 1536px;
	padding: clamp(60px, 3.999844vw, 76.797px) 0 clamp(121px, 7.999688vw, 153.594px);
	position: relative;
	width: 80%;
	z-index: 1;
}

.raft-h2o-product-figma__card {
	align-items: center;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(79, 6, 87, 0.25);
	border-radius: clamp(19px, 1.25vw, 24px);
	display: grid;
	gap: 1.302083333%;
	grid-template-columns: 51.236979167% 47.4609375%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.raft-h2o-product-figma__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.041667vw, 20px);
	min-width: 0;
	padding: clamp(50px, 3.333333vw, 64px) 0 clamp(50px, 3.333333vw, 64px) clamp(50px, 3.333333vw, 64px);
	position: relative;
	z-index: 3;
}

.raft-h2o-product-figma__heading {
	padding: clamp(12px, 0.833333vw, 16px) 0 clamp(8px, 0.520833vw, 10px);
}

.raft-h2o-product-figma__kicker,
.raft-h2o-product-figma__heading h2,
.raft-h2o-product-figma__lead,
.raft-h2o-product-figma__feature h3,
.raft-h2o-product-figma__feature p,
.raft-h2o-product-figma__quote,
.raft-h2o-product-figma__quote p,
.raft-h2o-product-figma__outcome p,
.raft-h2o-product-figma__application p {
	margin: 0;
}

.raft-h2o-product-figma__kicker {
	color: var(--raft-h2o-product-coral);
	font-size: clamp(11px, 0.729167vw, 14px);
	font-weight: 700;
	letter-spacing: 0.98px;
	line-height: 1.6;
	text-transform: uppercase;
}

.raft-h2o-product-figma__heading h2 {
	color: var(--raft-h2o-product-navy);
	font-size: clamp(44px, 2.916667vw, 56px);
	font-weight: 700;
	letter-spacing: -2px;
	line-height: 1.25;
}

.raft-h2o-product-figma__lead {
	color: var(--raft-h2o-product-navy);
	font-size: clamp(16px, 1.041667vw, 20px);
	font-weight: 400;
	line-height: 1.6;
}

.raft-h2o-product-figma__feature-stack {
	display: flex;
	flex-direction: column;
	gap: clamp(9px, 0.625vw, 12px);
	padding: clamp(9px, 0.625vw, 12px) 0;
}

.raft-h2o-product-figma__feature,
.raft-h2o-product-figma__quote {
	align-items: center;
	border: 1px solid rgba(79, 6, 87, 0.25);
	border-radius: clamp(19px, 1.25vw, 24px);
	display: flex;
	gap: clamp(13px, 0.833333vw, 16px);
	overflow: hidden;
	padding: clamp(16px, 1.041667vw, 20px) clamp(19px, 1.25vw, 24px);
	width: 100%;
}

.raft-h2o-product-figma__feature {
	background: #f7f7f7;
}

.raft-h2o-product-figma__feature-icon {
	align-items: center;
	background: linear-gradient(249.065846deg, var(--raft-h2o-product-gold) 0%, var(--raft-h2o-product-coral) 99.604%);
	border-radius: 999px;
	display: flex;
	flex: 0 0 clamp(60px, 3.958333vw, 76px);
	height: clamp(60px, 3.958333vw, 76px);
	justify-content: center;
	position: relative;
	width: clamp(60px, 3.958333vw, 76px);
}

.raft-h2o-product-figma__feature-icon img {
	display: block;
	max-width: none;
}

.raft-h2o-product-figma__feature-icon--check img {
	height: clamp(72px, 4.791667vw, 92px);
	width: clamp(72px, 4.739583vw, 91px);
}

.raft-h2o-product-figma__feature-icon--leaf img,
.raft-h2o-product-figma__feature-icon--droplet img {
	height: clamp(37px, 2.447917vw, 47px);
	width: clamp(36px, 2.395833vw, 46px);
}

.raft-h2o-product-figma__feature-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: clamp(6px, 0.416667vw, 8px);
	justify-content: center;
	min-width: 0;
}

.raft-h2o-product-figma__feature h3,
.raft-h2o-product-figma__quote p {
	color: var(--raft-h2o-product-navy);
	font-size: clamp(17px, 1.145833vw, 22px);
	font-weight: 500;
	line-height: 1.6;
}

.raft-h2o-product-figma__feature p {
	color: var(--raft-h2o-product-navy);
	font-size: clamp(14px, 0.9375vw, 18px);
	font-weight: 400;
	line-height: 1.6;
}

.raft-h2o-product-figma__quote {
	background: rgba(240, 82, 82, 0.18);
	border-color: var(--raft-h2o-product-purple);
}

.raft-h2o-product-figma__quote-icon {
	align-items: center;
	display: flex;
	flex: 0 0 clamp(60px, 3.958333vw, 76px);
	height: clamp(60px, 3.958333vw, 76px);
	justify-content: center;
	width: clamp(60px, 3.958333vw, 76px);
}

.raft-h2o-product-figma__quote-icon img {
	display: block;
	height: clamp(43px, 2.864583vw, 55px);
	max-width: none;
	width: clamp(43px, 2.8125vw, 54px);
}

.raft-h2o-product-figma__button {
	align-items: center;
	align-self: flex-start;
	background: linear-gradient(249.065846deg, var(--raft-h2o-product-gold) 0%, var(--raft-h2o-product-coral) 99.604%);
	border-radius: clamp(9px, 0.625vw, 12px);
	color: #fff;
	display: inline-flex;
	font-size: clamp(14px, 0.9375vw, 18px);
	font-weight: 900;
	gap: clamp(13px, 0.833333vw, 16px);
	justify-content: center;
	letter-spacing: 0.5px;
	line-height: 1.25;
	padding: clamp(16px, 1.041667vw, 20px) clamp(25px, 1.666667vw, 32px);
	text-align: center;
	text-decoration: none;
}

.raft-h2o-product-figma__button:focus-visible {
	outline: 3px solid var(--raft-h2o-product-purple);
	outline-offset: 3px;
}

.raft-h2o-product-figma__button img {
	display: block;
	height: clamp(19px, 1.25vw, 24px);
	max-width: none;
	width: clamp(19px, 1.25vw, 24px);
}

.raft-h2o-product-figma__visual {
	height: 58.4375vw;
	max-height: 1122px;
	position: relative;
	z-index: 2;
}

.raft-h2o-product-figma__art {
	bottom: -5.438021vw;
	left: 22.135417vw;
	position: absolute;
	top: -5.655729vw;
	width: 63.072917vw;
	z-index: 1;
}

.raft-h2o-product-figma__unit {
	height: 40.104167vw;
	left: 18.59375vw;
	-webkit-mask-image: var(--raft-h2o-product-unit-mask);
	mask-image: var(--raft-h2o-product-unit-mask);
	-webkit-mask-position: -2.604167vw -5.815729vw;
	mask-position: -2.604167vw -5.815729vw;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 47.083333vw 75.104167vw;
	mask-size: 47.083333vw 75.104167vw;
	position: absolute;
	top: 5.815729vw;
	width: 40.104167vw;
}

.raft-h2o-product-figma__unit img {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
	width: 100%;
}

.raft-h2o-product-figma__outcomes {
	align-items: center;
	display: flex;
	justify-content: space-between;
	left: 2.1875vw;
	padding: clamp(6px, 0.416667vw, 8px);
	position: absolute;
	top: 43.9vw;
	width: 33.645833vw;
}

.raft-h2o-product-figma__outcome {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 0.416667vw, 8px);
	justify-content: center;
	padding: clamp(6px, 0.416667vw, 8px);
}

.raft-h2o-product-figma__outcome-icon {
	align-items: center;
	background: #f7f7f7;
	border: 1px solid rgba(79, 6, 87, 0.25);
	border-radius: 999px;
	display: flex;
	height: clamp(85px, 5.625vw, 108px);
	justify-content: center;
	width: clamp(85px, 5.625vw, 108px);
}

.raft-h2o-product-figma__outcome-icon img {
	display: block;
	height: clamp(54px, 3.541667vw, 68px);
	max-width: none;
	width: auto;
}

.raft-h2o-product-figma__outcome p {
	color: var(--raft-h2o-product-navy);
	display: flex;
	flex-direction: column;
	font-size: clamp(16px, 1.041667vw, 20px);
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
}

.raft-h2o-product-figma__application-rail {
	align-items: center;
	display: flex;
	gap: clamp(13px, 0.833333vw, 16px);
	height: clamp(73px, 4.84375vw, 93px);
	position: relative;
	width: 100%;
}

.raft-h2o-product-figma__rail-marker {
	background: radial-gradient(ellipse at -390% 292%, var(--raft-h2o-product-gold) 10%, #f3946c 25%, #f2735f 32.5%, var(--raft-h2o-product-coral) 40%, #c83f53 42.5%, #a02c55 45%, #771956 47.5%, var(--raft-h2o-product-purple) 50%, rgba(119, 25, 86, 0.75) 62.5%, rgba(160, 44, 85, 0.5) 75%, rgba(240, 82, 82, 0) 100%);
	flex: 0 0 clamp(4px, 0.260417vw, 5px);
	height: 100%;
	width: clamp(4px, 0.260417vw, 5px);
}

.raft-h2o-product-figma__application {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	gap: clamp(13px, 0.833333vw, 16px);
	justify-content: center;
	min-width: 0;
	padding-right: clamp(19px, 1.25vw, 24px);
}

.raft-h2o-product-figma__application--divided {
	border-right: 1px solid rgba(79, 6, 87, 0.25);
}

.raft-h2o-product-figma__application-icon {
	align-items: center;
	background: var(--raft-h2o-product-navy);
	border: 1px solid rgba(79, 6, 87, 0.25);
	border-radius: 999px;
	display: flex;
	flex: 0 0 clamp(69px, 4.53125vw, 87px);
	height: clamp(69px, 4.53125vw, 87px);
	justify-content: center;
	width: clamp(69px, 4.53125vw, 87px);
}

.raft-h2o-product-figma__application-icon img {
	display: block;
	max-width: none;
}

.raft-h2o-product-figma__application--1 .raft-h2o-product-figma__application-icon img {
	height: clamp(43px, 2.8125vw, 54px);
	width: clamp(41px, 2.708333vw, 52px);
}

.raft-h2o-product-figma__application--2 .raft-h2o-product-figma__application-icon img,
.raft-h2o-product-figma__application--3 .raft-h2o-product-figma__application-icon img,
.raft-h2o-product-figma__application--4 .raft-h2o-product-figma__application-icon img {
	height: clamp(40px, 2.65625vw, 51px);
	width: clamp(39px, 2.604167vw, 50px);
}

.raft-h2o-product-figma__application p {
	color: var(--raft-h2o-product-navy);
	font-size: clamp(17px, 1.145833vw, 22px);
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}

@media (min-width: 1920px) {
	.raft-h2o-product-figma__glow {
		height: 100%;
		top: 0;
		width: 100%;
	}

	.raft-h2o-product-figma__art {
		bottom: -104.41px;
		left: 425px;
		top: -108.59px;
		width: 1211px;
	}

	.raft-h2o-product-figma__unit {
		height: 770px;
		left: 357px;
		-webkit-mask-position: -50px -111.662px;
		mask-position: -50px -111.662px;
		-webkit-mask-size: 904px 1442px;
		mask-size: 904px 1442px;
		top: 111.662px;
		width: 770px;
	}

	.raft-h2o-product-figma__outcomes {
		left: 42px;
		top: 842.88px;
		width: 646px;
	}
}

/* Desktop is the signed-off target. This fallback prevents horizontal overflow on smaller screens. */
@media (max-width: 1050px) {
	.raft-h2o-product-figma__inner {
		width: calc(100% - 48px);
	}

	.raft-h2o-product-figma__card {
		display: block;
	}

	.raft-h2o-product-figma__copy {
		padding-right: clamp(24px, 5vw, 52px);
	}

	.raft-h2o-product-figma__visual,
	.raft-h2o-product-figma__art {
		display: none;
	}

	.raft-h2o-product-figma__application-rail {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto;
	}

	.raft-h2o-product-figma__rail-marker {
		display: none;
	}

	.raft-h2o-product-figma__application {
		border: 0;
		justify-content: flex-start;
		padding: 8px 0;
	}
}
