/* ---------- Hero ---------- */
.hp-hero {
	position: relative;
	height: 800px;
	overflow: hidden;
	background: var(--hp-ice);
}

.hp-hero__bg {
	position: absolute;
	top: 0;
	left: 50%;
	width: max(1487px, 100%);
	height: 100%;
	transform: translateX(-50%);
	object-fit: cover;
}

.hp-hero__wash {
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0.8;
}

.hp-hero__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 296px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.9) 75%, #fff 100%);
}

/* Video-background hero variant (patterns/home-v2-hero-video.php): the base wash/fade
 * above are tuned for a light photo bg with dark ink text; a video needs to stay visible,
 * so this variant swaps to a low wash + dark scrim and white text instead. */
.hp-hero--video .hp-hero__bg { object-position: center; }

.hp-hero--video .hp-hero__wash {
	background: transparent;
	opacity: 1;
}

.hp-hero--video .hp-hero__fade {
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.55) 100%);
}

.hp-hero--video .hp-hero__badge,
.hp-hero--video .hp-hero__title,
.hp-hero--video .hp-hero__desc {
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hp-hero--video .hp-hero__badge {
	background: rgba(255, 255, 255, 0.15);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
	text-shadow: none;
}

.hp-hero--video .hp-hero__mute {
	position: absolute;
	z-index: 3;
	right: 24px;
	bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, #6b2dff 4.7%, #db7c9c 93.17%);
	box-shadow: 0 2px 12px rgba(107, 45, 255, 0.45);
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-hero--video .hp-hero__mute:hover {
	transform: scale(1.08);
	box-shadow: 0 4px 16px rgba(107, 45, 255, 0.6);
}

.hp-hero--video .hp-hero__mute:active {
	transform: scale(0.92);
}

.hp-hero--video .hp-hero__mute-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.4) rotate(-15deg);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.hp-hero--video .hp-hero__mute[data-muted="true"] [data-icon-muted],
.hp-hero--video .hp-hero__mute[data-muted="false"] [data-icon-unmuted] {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.hp-hero--video .hp-hero__pause {
	position: absolute;
	z-index: 3;
	right: 74px;
	bottom: 24px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-hero--video.hp-hero--playing .hp-hero__pause {
	display: flex;
}

.hp-hero--video .hp-hero__pause:hover {
	transform: scale(1.08);
}

.hp-hero--video .hp-hero__pause:active {
	transform: scale(0.88);
}

/* One-shot expanding-ring feedback on click (JS toggles .hp-hero--burst); the CTA's
 * continuous idle pulse below resumes once the class is removed a moment later. */
.hp-hero--video .hp-hero__mute.hp-hero--burst,
.hp-hero--video .hp-hero__pause.hp-hero--burst {
	animation: hp-hero-btn-burst 0.45s ease-out;
}

@keyframes hp-hero-btn-burst {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
	100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}

@keyframes hp-hero-click-burst {
	0% { box-shadow: 0 0 0 0 rgba(196, 110, 138, 0.7); transform: scale(1); }
	100% { box-shadow: 0 0 0 20px rgba(196, 110, 138, 0); transform: scale(1.08); }
}

.hp-hero--video .hp-hero__btn .wp-block-button__link {
	background: rgba(0, 0, 0, 0.35);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	transition: transform 0.15s ease, background 0.2s ease;
}

.hp-hero--video .hp-hero__btn .wp-block-button__link:active {
	transform: scale(0.96);
}

.hp-hero__btn-label {
	transition: opacity 0.3s ease;
}

/* Click sequence: label fades out and the pill glows once (JS toggles this class), then —
 * only after that plays out — JS actually starts the video (see the playBtn click handler). */
.hp-hero--video .hp-hero__btn--launching .hp-hero__btn-label {
	opacity: 0;
}

.hp-hero--video .hp-hero__btn--launching .wp-block-button__link {
	animation: hp-hero-click-burst 0.45s ease-out;
}

.hp-hero--video .hp-hero__inner {
	opacity: 1;
	transition: opacity 0.5s ease;
}

.hp-hero--video.hp-hero--playing .hp-hero__inner {
	opacity: 0;
	pointer-events: none;
}

/* CTA doubles as a play trigger — pulse its play-icon circle like a media player while idle. */
.hp-hero--video .hp-hero__btn .wp-block-button__link::before {
	animation: hp-hero-play-pulse 2.2s ease-out infinite;
}

@keyframes hp-hero-play-pulse {
	0% { box-shadow: 0 0 0 0 rgba(196, 110, 138, 0.55); }
	70% { box-shadow: 0 0 0 14px rgba(196, 110, 138, 0); }
	100% { box-shadow: 0 0 0 0 rgba(196, 110, 138, 0); }
}

/* The site header is absolutely positioned over whatever hero sits at the top of the page.
 * Its light glass pill + dark logo wordmark are tuned for the photo hero's white wash; video
 * frames vary in brightness and can't guarantee that contrast, so darken/lighten it whenever
 * this video hero is present anywhere on the page. */
body:has(.hp-hero--video) .hp-nav {
	background: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

body:has(.hp-hero--video) .hp-nav__links .wp-block-navigation-item__content {
	color: #fff;
}

/* Core's navigation block reuses the same "hp-nav__links" class on both the <nav> and its
 * inner <ul>, so the video-hero white-text rule above still matches once the overlay's <ul>
 * gets rendered inside .is-menu-open — even though that panel has its own light ice-white
 * background. Restore dark ink there (higher specificity beats the rule above) or the open
 * mobile menu's links render white-on-white and become unreadable/untappable. */
body:has(.hp-hero--video) .hp-nav__links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--hp-ink);
}

body:has(.hp-hero--video) .hp-logo__word img {
	filter: brightness(0) invert(1);
}

.hp-hero__inner {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: calc(50% - 14px);
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: 763px;
	max-width: 100%;
	text-align: center;
}

.hp-hero__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.hp-hero__badge {
	display: inline-flex;
	align-items: center;
	height: 30px;
	margin-bottom: 10px;
	padding: 0 20px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
	color: var(--hp-ink);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2.8px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.hp-hero__title {
	color: var(--hp-ink);
	font-size: 80px;
	font-weight: 500;
	letter-spacing: -2px;
	line-height: 79px;
	white-space: nowrap;
}

.hp-hero__desc {
	color: var(--hp-text);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
}

.hp-hero__btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	height: 64px;
	padding: 8px 20px 8px 8px;
	border: 1px solid var(--hp-pink);
	border-radius: 140px;
	background: rgba(255, 255, 255, 0.2);
	color: var(--hp-ink);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	text-box: trim-both cap alphabetic;
	white-space: nowrap;
}

.hp-hero__btn .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: var(--hp-pink) url("../images/home-v2/play.svg") center / 30px 30px no-repeat;
	box-shadow: 0 0 17.1px #c46e8a, 0 0 8.55px #c46e8a, 0 0 2.44px #c46e8a, 0 0 1.22px #c46e8a;
}

@media (max-width: 992px) {
	.hp-hero {
		height: 666px;
	}

	.hp-hero__inner {
		top: calc(50% - 32px);
		gap: 30px;
		width: 333px;
	}

	.hp-hero__badge {
		height: 28.6px;
		margin-bottom: 10px;
		font-size: 12px;
		letter-spacing: 0.96px;
	}

	.hp-hero__title {
		font-size: 34px;
		line-height: 1.2;
	}

	.hp-hero__desc {
		font-size: 16px;
	}

	.hp-hero__btn .wp-block-button__link {
		gap: 10px;
		height: 50px;
		padding: 6px 20px 6px 8px;
		background: rgba(255, 255, 255, 0.1);
		font-size: 16px;
	}

	.hp-hero__btn .wp-block-button__link::before {
		width: 38px;
		height: 38px;
		background-size: 20px 20px;
	}
}
/* ---------- Fold 1: Experiments (patterns/home-v2-experiments.php) ----------
 * Ported from index2.html lines 233-376, same rule order (a few rules depend on it, see NOTE below).
 * Adaptations for native blocks:
 *  - <img class="x"> became <figure class="x hp-fill"><img></figure>; the figure carries position/size, the img fills it (hp-fill, base css).
 *  - inline style="" values became modifier classes (hp-wi--*, hp-s-row--*, hp-chip--o*, hp-ci--*, hp-w-bar--*, hp-i-flag__img--*).
 *  - <button>/<a> controls are core/button: the .wp-block-button WRAPPER carries the state class (is-active / is-disabled) and its box size;
 *    the inner .wp-block-button__link carries the visuals. Link rules use 3 classes to beat core/theme.json button styles.
 *  - Text elements are prefixed with .hp-exp (or use :is(.hp-scope, .lb-header) .hp-exp :where()) to beat theme.json element styles;
 *    the source's global `p,h2,h3{margin:0}` and `*{box-sizing:border-box}` are re-applied here, scoped to the fold.
 */

.hp-exp,
.hp-exp *,
.hp-exp *::before,
.hp-exp *::after {
	box-sizing: border-box;
}

:is(.hp-scope, .lb-header) .hp-exp { margin-top: 120px; }
:is(.hp-scope, .lb-header) .hp-exp :where(p, h2, h3) { margin: 0; }
.hp-exp .wp-block-button { margin: 0; }

.hp-exp__in { width: calc(100% + 3px); max-width: 1203px; }
.hp-exp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hp-exp__head .hp-head__title { align-items: flex-start; }
.hp-exp__head .hp-lead { width: 531px; flex: none; }

.hp-exp__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 60px; }

/* Tabs: .hp-exp__tabs = core/buttons, .hp-exp__tab = core/button wrapper (size + is-active), link = the visible pill */
.hp-exp .hp-exp__tabs { display: flex; flex-wrap: nowrap; align-items: stretch; margin-left: 1px; scroll-behavior: smooth; }
.hp-exp .hp-exp__tab { width: 220px; height: 47px; }
.hp-exp .hp-exp__tab .wp-block-button__link {
	display: flex; align-items: center; justify-content: safe center; /* overflowing labels start at the left padding, like a centred <button> */ width: 100%; height: 100%; padding: 4px 30px 0; border: 0; border-radius: 10px; background: none;
	color: var(--hp-gray); font-size: 22px; font-weight: 500; letter-spacing: 6px; line-height: 1; text-transform: uppercase; white-space: nowrap;
	transition: color .2s; /* source used text-box: trim-both (n/a on a flex container): the 4px top padding reproduces its 2px downward shift */
}
.hp-exp .hp-exp__tab:last-child .wp-block-button__link { padding: 4px 20px 0; }
.hp-exp .hp-exp__tab .wp-block-button__link:hover { color: var(--hp-ink); }
.hp-exp .hp-exp__tab.is-active .wp-block-button__link { background: var(--hp-ink); color: var(--hp-mist); }

/* Arrows: .hp-exp__nav = core/buttons; .hp-exp__arrow wrapper carries the size and .is-disabled; the icon is drawn on ::before (mask) so it follows currentColor */
.hp-exp .hp-exp__nav { display: flex; flex-wrap: nowrap; gap: 10px; }
.hp-exp .hp-exp__arrow { width: 52px; height: 44px; transition: filter .2s ease, transform .2s ease; }
.hp-exp .hp-exp__arrow .wp-block-button__link {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border-radius: 12px; border: 1.5px solid var(--hp-purple); background: var(--hp-purple); color: var(--hp-ice);
	font-size: 0; /* label text ("Previous"/"Next") stays in the DOM as the accessible name, but is not painted */
}
.hp-exp .hp-exp__arrow .wp-block-button__link::before {
	content: ""; flex: none; width: 24px; height: 24px; background-color: currentColor;
	-webkit-mask: url("../images/ui/arrow-left-mask.svg") center / 24px 24px no-repeat;
	mask: url("../images/ui/arrow-left-mask.svg") center / 24px 24px no-repeat;
}
.hp-exp .hp-exp__arrow.is-disabled .wp-block-button__link { background: transparent; color: var(--hp-purple); cursor: default; }
.hp-exp .hp-exp__arrow--next .wp-block-button__link::before { transform: rotate(180deg); }

.hp-exp__viewport { margin-top: 60px; overflow: hidden; }
.hp-exp__track { display: flex; will-change: transform; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.hp-exp__card { flex: 0 0 100%; min-width: 0; display: flex; height: 510px; }
.hp-exp__logo, .hp-exp__copy, .hp-widget { transition: opacity 0.5s ease 0.2s; }
.hp-exp__card:not(.is-active) .hp-exp__logo, .hp-exp__card:not(.is-active) .hp-exp__copy, .hp-exp__card:not(.is-active) .hp-widget { opacity: 0; transition-delay: 0s; }
/* NOTE: as in the source, these two modifiers sit BEFORE the base .hp-exp__logo rule (same specificity), so the base wins and they are inert.
 * Kept in the same order on purpose so the render matches the source; move them after .hp-exp__logo to make the design's intended logo sizes effective. */
.hp-exp__logo--w { width: 56.5px; }
.hp-exp__logo--s { width: 51.8px; height: 51.8px; left: 35.1px; top: 35.7px; }

/* slides 2-4: artwork drawn on a 603 x 510 stage (scaled down on mobile) */
.hp-stage { position: absolute; left: 50%; top: 0; width: 603px; height: 510px; margin-left: -301.5px; transition: opacity 0.5s ease 0.2s; }
.hp-exp__card:not(.is-active) .hp-stage { opacity: 0; transition-delay: 0s; }
.hp-exp__shot--black { background: #000; } /* NOTE: also inert in the source (base .hp-exp__shot background comes later); the sphere artwork covers the whole shot anyway */
/* source: .hp-stage img { max-width: none } -> already in base (.hp-scope .wp-block-image img) */

/* Wizword */
.hp-w-photo { position: absolute; left: -1px; top: 0; width: 604px; height: 714.46px; overflow: hidden; }
.hp-w-photo__img { position: absolute; left: 0.05%; top: -15.1%; width: 99.93%; height: 99.96%; }
.hp-w-tone { position: absolute; left: 350px; top: 192px; width: 198px; height: 195px; object-fit: cover; } /* figure: the img inherits object-fit via .hp-fill */
.hp-w-listen {
	position: absolute; left: 166px; top: 2.1px; width: 270.72px; height: 49.11px; padding: 2.4px 22.76px; display: flex; align-items: center; justify-content: space-between;
	border-radius: 0 0 23.958px 23.958px; background: #0f0f0f; color: #fff; font: 500 14.375px/15.573px -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; white-space: nowrap;
}
.hp-w-wave { display: flex; align-items: center; gap: 2.396px; }
/* source: <i style="height:Npx">; heights by class, in px: 1=11.45 2=14.295 3=8.25 4=3.806 5=10.028 6=13.405 7=15.54 8=17.382 9=5.948 */
.hp-w-bar { display: block; width: 2.396px; border-radius: 2.396px; background: #d9d9d9; }
.hp-w-bar--1 { height: 11.45px; }
.hp-w-bar--2 { height: 14.295px; }
.hp-w-bar--3 { height: 8.25px; }
.hp-w-bar--4 { height: 3.806px; }
.hp-w-bar--5 { height: 10.028px; }
.hp-w-bar--6 { height: 13.405px; }
.hp-w-bar--7 { height: 15.54px; }
.hp-w-bar--8 { height: 17.382px; }
.hp-w-bar--9 { height: 5.948px; }
.hp-w-card { position: absolute; left: 57.32px; top: 124.52px; width: 195.56px; height: 108.6px; display: flex; align-items: center; justify-content: center; }
.hp-w-card__clip { position: relative; display: block; width: 193.75px; height: 105.24px; overflow: hidden; transform: rotate(-1deg); } /* was .hp-w-card span */
.hp-w-card__img { position: absolute; left: -10.11%; top: -25.08%; width: 120.31%; height: 147.66%; } /* was .hp-w-card img */
.hp-w-note { position: absolute; left: 84.21px; top: 148.28px; width: 150.54px; height: 43.54px; display: flex; align-items: center; justify-content: center; }
.hp-w-note p {
	width: 149.64px; transform: rotate(-1.36deg); font: 400 13.461px/1.5 Sora, "HelveticaNeue", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.135px;
	background-image: linear-gradient(90deg, #ffb143, #fff); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hp-w-note s { text-decoration-color: rgba(255, 190, 110, 0.95); }

/* Sphere */
.hp-s-bg { position: absolute; left: -279px; top: -106px; width: 1160px; height: 652px; overflow: hidden; }
.hp-s-bg__img { position: absolute; left: 0.01%; top: 0.06%; width: 99.95%; height: 99.9%; }
.hp-s-row { position: absolute; display: flex; align-items: center; gap: 13.663px; height: 36.06px; }
/* source inline styles on each row: position + opacity + blur */
.hp-s-row--1 { left: 49.38px; top: 60px; opacity: 0.3; filter: blur(0.455px); }
.hp-s-row--2 { left: 86.28px; top: 104.45px; opacity: 0.24; filter: blur(0.683px); }
.hp-s-row--3 { left: 120.67px; top: 148.9px; opacity: 0.3; filter: blur(0.683px); }
.hp-s-row--4 { left: 80.41px; top: 193.35px; opacity: 0.12; filter: blur(0.455px); }
.hp-chip {
	flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8.387px; padding: 8.387px 15.097px; border: 0.839px solid #2b2b2b; border-radius: 67.1px; background: #000;
	color: #fff; font: 400 11.742px/17.416px Manrope, "HelveticaNeue", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.083px; white-space: nowrap;
}
.hp-chip--glow { border-color: #a4ddff; background: radial-gradient(ellipse at center, #082637 0%, #04131c 50%, #02090e 75%, #000 100%); filter: drop-shadow(0 3.355px 10.064px rgba(164, 221, 255, 0.3)); }
/* source inline chip opacity */
.hp-chip--o3 { opacity: 0.3; }
.hp-chip--o5 { opacity: 0.5; }
.hp-chip--o7 { opacity: 0.7; }
/* chip icons: source <img width height>; 1=17.416 2=14.165 3=14.003x12.581 4=13.419 5=14.147x14.258 6=13.814x12.357 7=13.419x11.427 */
.hp-ci { flex: none; }
.hp-ci--1 { width: 17.416px; height: 17.416px; }
.hp-ci--2 { width: 14.165px; height: 14.165px; }
.hp-ci--3 { width: 14.003px; height: 12.581px; }
.hp-ci--4 { width: 13.419px; height: 13.419px; }
.hp-ci--5 { width: 14.147px; height: 14.258px; }
.hp-ci--6 { width: 13.814px; height: 12.357px; }
.hp-ci--7 { width: 13.419px; height: 11.427px; }
.hp-s-title { position: absolute; left: 302px; top: 123px; transform: translateX(-50%); color: #f4f4f4; font: 500 18.283px/10.13px Manrope, "HelveticaNeue", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; }
.hp-s-name { position: absolute; left: 318.2px; top: 162.4px; transform: translateX(-50%); color: #fff; font: 500 12.502px/13.904px Manrope, "HelveticaNeue", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.155px; white-space: nowrap; }
.hp-s-mark { position: absolute; left: 266px; top: 161.2px; width: 25.85px; height: 25.8px; }
.hp-s-orb { position: absolute; left: 42.6px; top: 280px; width: 512px; height: 512px; }

/* IP per Tab */
.hp-i-photo { position: absolute; left: -43px; top: 0; width: 765px; height: 510px; object-fit: cover; } /* figure: img inherits object-fit via .hp-fill */
.hp-i-cards { position: absolute; left: 301.66px; top: 323px; transform: translateX(-50%); display: flex; align-items: center; gap: 21.069px; }
.hp-i-card {
	display: flex; flex-direction: column; align-items: center; gap: 22.336px; padding: 22.336px; border: 1px solid rgba(236, 231, 253, 0.45); border-radius: 16.752px;
	background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); color: #fff; font: 600 16.752px/22.336px -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; white-space: nowrap;
}
.hp-i-card:not(.hp-i-card--add) { width: 152.163px; }
.hp-i-card--add { justify-content: center; }
.hp-i-plus { flex: none; width: 56.18px; height: 56.18px; } /* source: <img width=56.18 height=56.18> */
.hp-i-flag { position: relative; width: 46.82px; height: 46.82px; overflow: hidden; }
.hp-i-flag__img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* source inline styles on the layered US flag */
.hp-i-flag__img--a { inset: 0.66%; width: 98.68%; height: 98.68%; }
.hp-i-flag__img--b { inset: 0.66% 50.03% 46.15% 0.66%; width: 49.31%; height: 53.19%; }
.hp-exp__info { position: relative; flex: 600 1 0; min-width: 0; background: var(--hp-mist); border-radius: 30px 0 0 30px; overflow: hidden; }
.hp-exp__logo { position: absolute; left: 36px; top: 36px; width: 48.5px; height: 44px; }
.hp-exp__copy { position: absolute; left: 36px; bottom: 36px; width: min(504px, calc(100% - 72px)); display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.hp-exp .hp-exp__label { height: 11.4px; margin-bottom: 20px; color: var(--hp-text); font-size: 16px; font-weight: 400; letter-spacing: 1.6px; line-height: 1; text-transform: uppercase; text-box: trim-both cap alphabetic; }
.hp-exp .hp-exp__title { color: #000; font-family: inherit; font-size: 36px; font-weight: 500; letter-spacing: -0.72px; line-height: 1.2; }
.hp-exp .hp-exp__desc { width: 438px; max-width: 100%; margin-top: 10px; color: #7b7483; font-size: 18px; font-weight: 400; letter-spacing: -0.36px; line-height: 1.4; }
/* CTA: .hp-exp__cta = core/button wrapper (hover/active filter + scale come from base css), link = the gradient pill */
.hp-exp .hp-exp__cta { transition: filter .2s ease, transform .2s ease; }
.hp-exp .hp-exp__cta .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; height: 58.85px; padding: 0 26px; border-radius: 14px;
	background: linear-gradient(108.15deg, var(--hp-purple) 0%, var(--hp-pink) 100%);
	color: #fff; font-size: 18px; font-weight: 500; line-height: 1; text-decoration: none;
}

.hp-exp__shot { position: relative; flex: 603 1 0; min-width: 0; background: var(--hp-text); border-radius: 0 30px 30px 0; overflow: hidden; }
.hp-exp__photo { position: absolute; left: -106px; top: -84px; width: 779px; height: 716px; }
.hp-exp__photo img { position: absolute; inset: 0; } /* fills the figure by absolute inset (robust on mobile where the figure height comes from aspect-ratio) */
.hp-widget {
	position: absolute; left: calc(50% - 0.4px); top: 221px; transform: translateX(-50%); padding: 8.767px; border-radius: 8.767px;
	background: linear-gradient(179.77deg, rgba(255,255,255,0.7) 0.51%, rgba(255,255,255,0) 214.67%); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); color: #001219;
	font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; transform-origin: 50% 0;
}
.hp-widget__head { width: 192px; margin: 0 auto 17.533px; display: flex; flex-direction: column; gap: 0.877px; }
.hp-widget__title { font-size: 14.027px; font-weight: 700; letter-spacing: -0.28px; line-height: 1.2; }
.hp-widget__sub { font-size: 12.273px; font-weight: 400; letter-spacing: -0.245px; line-height: 1.2; }
.hp-widget__row { display: flex; align-items: flex-start; }
.hp-widget__item { width: 87.666px; display: flex; flex-direction: column; align-items: center; gap: 8.767px; font-size: 10.52px; font-weight: 500; line-height: 1.2; }
.hp-widget__icon { position: relative; width: 52.6px; height: 52.6px; overflow: hidden; border-radius: 50%; }
/* sprite crop: was `.hp-widget__icon img` + inline left/width per icon */
.hp-wi { position: absolute; height: 504.43%; width: 760.4%; top: -225.62%; }
.hp-wi--photo { left: -104.93%; width: 756.65%; }
.hp-wi--label { left: -252.48%; }
.hp-wi--barcode { left: -399.01%; }
.hp-wi--voice { left: -547.76%; width: 764.18%; }
.hp-widget__sep { position: relative; width: 0; height: 52.6px; }
.hp-widget__sep::before { content: ""; position: absolute; left: -0.22px; top: 0; bottom: 0; width: 0.44px; background: #001219; }

/* Dots: .hp-exp__dot wrapper is the pill (size, colour, .is-active); the link just fills it and its text is not painted */
.hp-exp .hp-exp__dots { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; margin-top: 40px; }
.hp-exp .hp-exp__dot { flex: none; width: 12px; height: 8px; border-radius: 5px; background: var(--hp-line); transition: width .25s ease, background-color .25s ease; }
.hp-exp .hp-exp__dot.is-active { width: 30px; border-radius: 6px; background: var(--hp-ink); }
.hp-exp .hp-exp__dot .wp-block-button__link { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; font-size: 0; }

@media (max-width: 992px) {
	:is(.hp-scope, .lb-header) .hp-exp { margin-top: 60px; }
	.hp-exp__in { width: 100%; }
	.hp-exp__head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.hp-exp__head .hp-lead { width: 348px; max-width: 100%; }
	.hp-exp__bar { position: relative; margin-top: 40px; }
	/* overflow-x: auto also clips the y axis, which would cut off the floating "Coming Soon" badges
	 * (::after, top: -32px, see hp-tab-1/hp-tab-2 rules below) above the row. padding-top gives them
	 * room inside the scrollable box; the matching negative margin-top cancels the visual shift. */
	.hp-exp .hp-exp__tabs { margin-left: 0; width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-top: 36px; margin-top: -36px; }
	.hp-exp .hp-exp__tabs::-webkit-scrollbar { display: none; }
	.hp-exp .hp-exp__nav { display: none; }
	.hp-exp .hp-exp__tab { flex: none; width: 146px; height: 34px; }
	.hp-exp .hp-exp__tab .wp-block-button__link { padding: 2px 30px 0; font-size: 14px; } /* trims like the source's text-box: trim-both */
	/* Scroll hint: the mobile tab strip is wider than the viewport (4 x 146px tabs) but has no visible
	 * Prev/Next control (.hp-exp__nav is hidden above). Fade the right edge so it reads as scrollable. */
	.hp-exp__bar::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 32px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
	}
	.hp-exp__viewport { margin-top: 40px; }
	.hp-exp__card { flex-direction: column-reverse; height: auto; }
	.hp-exp__shot { flex: none; height: 310px; border-radius: 18px 18px 0 0; }
	.hp-exp__photo { left: 50%; top: -50.98px; width: max(472.65px, 129%); height: auto; aspect-ratio: 779 / 716; transform: translateX(calc(-50% - 11px)); }
	.hp-widget { top: 134.14px; transform: translateX(-50%) scale(0.607); }
	.hp-stage { transform: scale(0.607); transform-origin: 50% 0; }
	.hp-exp__logo--w { width: 34.5px; } /* inert, see NOTE above */
	.hp-exp__logo--s { width: 31.6px; height: 31.6px; left: 21.4px; top: 21.8px; } /* inert, see NOTE above */
	.hp-exp__info { flex: none; height: 294px; border-radius: 0 0 18px 18px; }
	.hp-exp__logo { left: 22px; top: 22px; width: 29.58px; height: 26.84px; }
	.hp-exp__copy { left: 22px; bottom: 21.86px; width: min(307.44px, calc(100% - 44px)); gap: 18.3px; }
	.hp-exp .hp-exp__label { height: 7.1px; margin-bottom: 12.2px; font-size: 10px; letter-spacing: 1px; }
	.hp-exp .hp-exp__title { font-size: 22px; letter-spacing: -0.44px; }
	.hp-exp .hp-exp__desc { width: 262px; margin-top: 6.1px; font-size: 12px; letter-spacing: -0.24px; }
	.hp-exp .hp-exp__cta .wp-block-button__link { height: 35.9px; padding: 0 15.86px; border-radius: 8.54px; font-size: 10.98px; }
	.hp-exp .hp-exp__dots { gap: 6px; margin-top: 30px; }
	.hp-exp .hp-exp__dot { position: relative; width: 9px; height: 6px; border-radius: 3.75px; }
	.hp-exp .hp-exp__dot.is-active { width: 22.5px; border-radius: 4.5px; }
	/* Visible dot stays tiny (design intent); the tap target grows to ~44x44 via an absolutely
	 * positioned, invisible-background link centered over the dot, so it stays comfortably tappable. */
	.hp-exp .hp-exp__dot .wp-block-button__link {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
}

/* ---------- Block editor: the carousel JS does not run there, so show every slide stacked and fully visible ---------- */
.editor-styles-wrapper .hp-exp__viewport { height: auto; overflow: visible; }
.editor-styles-wrapper .hp-exp__track { display: block; transform: none; }
.editor-styles-wrapper .hp-exp__card { margin-bottom: 24px; }
.editor-styles-wrapper .hp-exp__card :is(.hp-exp__logo, .hp-exp__copy, .hp-widget, .hp-stage) { opacity: 1; }

/* Reduced motion: the tab strip must not scroll smoothly either */
@media (prefers-reduced-motion: reduce) {
	.hp-exp .hp-exp__tabs { scroll-behavior: auto; }
}

/* ---------- Fold 2: Same task ---------- */
.hp-cmp {
	margin-top: 160px;
}

.hp-cmp__head {
	width: 689px;
	max-width: 100%;
	margin: 0 auto;
}

.hp-cmp__head .hp-lead {
	min-width: 100%;
}

.hp-cmp__grid {
	position: relative;
	display: grid;
	grid-template-columns: 342fr 52fr 413fr 17fr 376fr;
	margin-top: 60px;
}

.hp-cmp .hp-cmp__prompt {
	grid-column: 1;
	margin-top: 134px;
}

.hp-cmp__mid {
	position: relative;
	grid-column: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 521px;
}

.hp-cmp__out {
	grid-column: 5;
	margin-top: 134px;
}

.hp-cmp__chev {
	position: absolute;
	top: 336px;
	width: 15.5px;
	height: 16px;
}

.hp-cmp__chev--1 {
	left: 31.83%;
}

.hp-cmp__chev--2 {
	left: 64%;
}

.hp-cmp__block {
	position: relative;
}

.hp-cmp__label {
	position: absolute;
	left: 10px;
	top: 0;
	color: var(--hp-text);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.2px;
	line-height: var(--hp-lh-normal);
	text-transform: uppercase;
	white-space: nowrap;
}

.hp-cmp__card {
	position: relative;
	border-radius: 14px;
	background: linear-gradient(151.41deg, rgba(205, 184, 255, 0.1) 3.54%, rgba(255, 255, 255, 0.083) 95.15%);
	box-shadow: inset 0 0 0 1px var(--hp-mist), 0 0.244px 20px #efe8ff;
}

.hp-cmp__prompt .hp-cmp__card {
	height: 247px;
	margin-top: 86px;
	-webkit-backdrop-filter: blur(7.59px);
	backdrop-filter: blur(7.59px);
}

.hp-cmp__who {
	position: absolute;
	left: 25px;
	top: 23px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hp-text);
	font-size: 14px;
}

.hp-cmp__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid #1e1e24;
	border-radius: 15px;
	background: var(--hp-ink);
	color: var(--hp-gray);
	font-size: 12px;
	line-height: 1;
}

.hp-cmp__text {
	position: absolute;
	left: 25px;
	top: 69px;
	width: 292px;
	color: var(--hp-text);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
}

.hp-cmp__text em {
	color: var(--hp-pink);
	font-style: normal;
}

.hp-cmp__rule {
	position: absolute;
	left: 25px;
	top: 175px;
	width: 292px;
	height: 1px;
	background: rgba(30, 30, 36, 0.5);
}

.hp-cmp__tags {
	position: absolute;
	left: 23px;
	top: 197px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #1e1e24;
	font-size: 14px;
	line-height: 1;
}

.hp-cmp__chips {
	display: flex;
	gap: 6px;
}

.hp-cmp__chip {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border: 0.5px solid var(--hp-pink);
	border-radius: 30px;
	background: rgba(252, 107, 156, 0.1);
	color: #8b1e43;
	font-size: 14px;
	line-height: 1;
}

.hp-cmp__chip + .hp-cmp__chip {
	background: rgba(252, 107, 156, 0.145);
}

/* Normal AI / PureLabs Approach switch: buttons block with the option class on each core button */
.hp-cmp__pill {
	display: inline-flex;
	flex: none;
	flex-wrap: nowrap;
	align-items: center;
	gap: 20px;
	padding: 10px 30px 10px 10px;
	border: 1px solid #9da2b3;
	border-radius: 60px;
}

.hp-cmp__opt {
	position: relative;
	isolation: isolate;
	height: 54px;
}

.hp-cmp__opt:not(.hp-cmp__opt--purelabs) {
	width: 169px;
}

.hp-cmp__opt .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--hp-ink);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition: color 0.3s ease;
}

.hp-cmp__opt::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 -24px;
	border-radius: 60px;
	background: var(--hp-pink);
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.hp-cmp__opt:not(.hp-cmp__opt--purelabs)::before {
	inset: 0;
}

.hp-cmp__opt.is-active .wp-block-button__link {
	color: var(--hp-ice);
}

.hp-cmp__opt.is-active::before {
	opacity: 1;
	transform: none;
}

/* PureLabs Approach: pixelate all six input-bundle labels with real crops of the artwork (matches the Figma prototype's masking, not a generic blur) */
.hp-cmp__mask {
	position: absolute;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.hp-cmp__blur {
	display: block;
	transform: rotate(-13.32deg);
	border-radius: 6px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	image-rendering: pixelated;
}

.hp-cmp__mask--1 { left: calc(50% + 0.4px); top: 26.67px; width: 112.66px; height: 44.26px; }
.hp-cmp__mask--1 .hp-cmp__blur { width: 111.24px; height: 19.14px; background-image: url("../images/home-v2/mask-1.webp"); }
.hp-cmp__mask--2 { left: calc(50% + 2.67px); top: 79.11px; width: 73.77px; height: 34.02px; }
.hp-cmp__mask--2 .hp-cmp__blur { width: 71.55px; height: 18.02px; background-image: url("../images/home-v2/mask-2.webp"); }
.hp-cmp__mask--3 { left: calc(50% + 4.05px); top: 126.53px; width: 66.96px; height: 35.73px; }
.hp-cmp__mask--3 .hp-cmp__blur { width: 63.69px; height: 21.64px; background-image: url("../images/home-v2/mask-3.webp"); }
.hp-cmp__mask--4 { left: calc(50% + 3.86px); top: 177.44px; width: 52.45px; height: 30.6px; }
.hp-cmp__mask--4 .hp-cmp__blur { width: 49.21px; height: 19.79px; background-image: url("../images/home-v2/mask-4.webp"); }
.hp-cmp__mask--5 { left: calc(50% + 12.26px); top: 221.34px; width: 79.55px; height: 37.08px; }
.hp-cmp__mask--5 .hp-cmp__blur { width: 77.04px; height: 19.86px; background-image: url("../images/home-v2/mask-5.webp"); }
.hp-cmp__mask--6 { left: calc(50% + 9.92px); top: 270.81px; width: 70.77px; height: 36.7px; }
.hp-cmp__mask--6 .hp-cmp__blur { width: 67.59px; height: 21.71px; background-image: url("../images/home-v2/mask-6.webp"); }

#same-task[data-mode="purelabs"] .hp-cmp__mask {
	opacity: 1;
}

.hp-cmp__bundle {
	position: absolute;
	left: 69px;
	top: 134px;
	width: 240px;
	height: 387px;
}

.hp-cmp__stack {
	position: absolute;
	left: 10px;
	top: 32px;
	width: 257px;
	height: 350px;
}

.hp-cmp__stack-in {
	position: absolute;
	left: calc(50% - 0.98px);
	top: -13.25px;
	width: 337.04px;
	height: 397.48px;
	transform: translateX(-50%);
	overflow: hidden;
}

.hp-cmp__stack-img {
	position: absolute;
	left: -64.89%;
	top: -25.44%;
	width: 220.46%;
	height: 161.4%;
}

.hp-cmp__out .hp-cmp__card {
	height: 218px;
	margin-top: 101px;
	background: linear-gradient(156.37deg, rgba(205, 184, 255, 0.1) 3.54%, rgba(255, 255, 255, 0.083) 95.15%), transparent;
	box-shadow: inset 0 0 0 2px var(--hp-mist), 0 0.244px 20px #efe8ff;
}

.hp-cmp__bars {
	position: absolute;
	left: 24px;
	top: 24px;
	right: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hp-cmp__bar {
	display: block;
	height: 10px;
	border-radius: 2px;
	background: rgba(211, 214, 224, 0.6);
}

.hp-cmp__bar:nth-child(2) {
	width: 191px;
}

.hp-cmp__wait {
	position: absolute;
	left: 24px;
	top: 84px;
	color: #1e1e24;
	font-size: 14px;
	line-height: 1.6;
	white-space: nowrap;
}

/* Run Task / Reset: swap the skeleton/waiting state for the result (Figma: instant swap, no loading state) */
.hp-cmp__result {
	display: none;
	position: absolute;
	inset: 24px;
	flex-direction: column;
	gap: 16px;
}

.hp-cmp__card.is-done .hp-cmp__bars,
.hp-cmp__card.is-done .hp-cmp__wait {
	display: none;
}

.hp-cmp__card.is-done .hp-cmp__result {
	display: flex;
}

.hp-cmp__result-status {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #3ba049;
	font-size: 14px;
	line-height: 1.4;
}

.hp-cmp__result-check {
	flex: none;
	width: 18px;
	height: 18px;
}

.hp-cmp__result-quote {
	color: var(--hp-ink);
	font-size: 16px;
	line-height: 1.5;
}

.hp-cmp__result-quote em {
	color: var(--hp-pink);
	font-style: normal;
}

.hp-cmp__result-meta {
	margin-top: auto;
	color: var(--hp-muted);
	font-size: 13px;
	line-height: 1.4;
}

/* :is(.hp-scope, .lb-header) prefix: outranks the base `:is(.hp-scope, .lb-header) .wp-block-buttons { margin: 0 }` reset */
:is(.hp-scope, .lb-header) .hp-cmp__runrow {
	justify-content: center;
	margin-top: 60px;
}

.hp-cmp__run .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 62.3px;
	padding: 0 60px;
	border: 0;
	border-radius: 60px;
	background: linear-gradient(-17.45deg, #ff8766 1.95%, #5620bb 57.61%), #fff;
	color: var(--hp-ice);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	transition: opacity 0.2s ease;
}


@media (max-width: 992px) {
	.hp-cmp {
		margin-top: 100px;
	}

	.hp-cmp__head {
		width: 366px;
	}

	.hp-cmp__head .hp-head__title {
		gap: 10px;
	}

	.hp-cmp__grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40px;
	}

	.hp-cmp__chev {
		display: none;
	}

	.hp-cmp__mid {
		display: contents;
	}

	.hp-cmp__pill {
		order: 1;
		gap: 15px;
		padding: 7.5px 22.5px 7.5px 7.5px;
		border-width: 0.75px;
		border-radius: 45px;
	}

	.hp-cmp__opt {
		height: 40.5px;
	}

	.hp-cmp__opt .wp-block-button__link {
		font-size: 16px;
	}

	.hp-cmp__opt:not(.hp-cmp__opt--purelabs) {
		width: 126.75px;
	}

	.hp-cmp__opt::before {
		inset: 0 -18px;
		border-radius: 45px;
	}

	.hp-cmp__opt:not(.hp-cmp__opt--purelabs)::before {
		inset: 0;
	}

	.hp-cmp .hp-cmp__prompt {
		order: 2;
		width: 342px;
		max-width: 100%;
		margin-top: 40px;
	}

	.hp-cmp__prompt .hp-cmp__card {
		margin-top: 52px;
	}

	.hp-cmp__bundle {
		order: 3;
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 366px;
		height: 387px;
		margin-top: 50px;
	}

	.hp-cmp__bundle .hp-cmp__label {
		left: 38px;
	}

	.hp-cmp__stack {
		left: 38px;
	}

	.hp-cmp__out {
		order: 4;
		width: 342px;
		max-width: 100%;
		margin-top: 50px;
	}

	.hp-cmp__out .hp-cmp__card {
		margin-top: 52px;
	}

	.hp-cmp__bars {
		right: 28px;
	}

	:is(.hp-scope, .lb-header) .hp-cmp__runrow {
		margin-top: 30px;
	}

	.hp-cmp__run .wp-block-button__link {
		height: 47.4px;
		padding: 0 45px;
		border-radius: 45px;
		font-size: 16px;
	}
}

/* ---------- Fold 3: Three ways ---------- */
.hp-ways {
	margin-top: 160px;
}

.hp-ways .hp-h2 {
	white-space: nowrap;
}

.hp-ways__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1198px;
	margin: 60px auto 0;
}

/* Cards scale with their own width: 1u = card width / 386 */
.hp-way {
	--u: calc(100cqw / 386);
	container-type: inline-size;
	position: relative;
	aspect-ratio: 386 / 348;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.hp-way--1 {
	background-image: url("../images/home-v2/card-base-1.svg");
	--g: linear-gradient(119.07deg, #6b2dff 4.7%, #db7c9c 93.17%);
}

.hp-way--2 {
	background-image: url("../images/home-v2/card-base-2.svg");
	--g: linear-gradient(125.89deg, #6b2dff 4.7%, #db7c9c 93.17%);
}

.hp-way--3 {
	background-image: url("../images/home-v2/card-base-3.svg");
	--g: linear-gradient(125.89deg, #6b2dff 4.7%, #db7c9c 93.17%);
}

.hp-way__num {
	position: absolute;
	left: calc(34 * var(--u));
	top: calc(34 * var(--u));
	height: calc(71 * var(--u));
	font-size: calc(100 * var(--u));
	font-weight: 300;
	line-height: 1;
	white-space: nowrap;
	background-image: var(--g);
	text-box: trim-both cap alphabetic;
}

.hp-way__body {
	position: absolute;
	left: calc(34 * var(--u));
	top: calc(155 * var(--u));
	display: flex;
	flex-direction: column;
	gap: calc(14 * var(--u));
	width: calc(318 * var(--u));
}

.hp-way__title {
	color: var(--hp-ink);
	font-size: calc(24 * var(--u));
	font-weight: 500;
	line-height: var(--hp-lh-normal);
}

.hp-way__desc {
	color: var(--hp-muted);
	font-size: calc(18 * var(--u));
	font-weight: 300;
	line-height: 1.4;
}

/* ---------- Fold 4: Ecosystem ---------- */
.hp-eco {
	margin-top: 160px;
}

.hp-eco .hp-head__title,
.hp-eco .hp-lead {
	width: 709px;
	max-width: 100%;
}

.hp-eco__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 20px;
	max-width: 1201px;
	margin: 60px auto 0;
}

/* Tiles scale with their own width: 1u = column width / 387 */
.hp-eco__col {
	--u: calc(100cqw / 387);
	container-type: inline-size;
}

.hp-eco__tile {
	position: relative;
	height: calc(376 * var(--u));
	border-radius: calc(30 * var(--u));
	background: var(--hp-ice);
	overflow: hidden;
}

.hp-eco__pic {
	position: absolute;
	left: 50%;
	top: calc(70 * var(--u));
	width: calc(236 * var(--u));
	height: calc(236 * var(--u));
	transform: translateX(-50%);
	overflow: hidden;
	filter:
		drop-shadow(0 calc(48 * var(--u)) calc(13 * var(--u)) rgba(182, 156, 252, 0))
		drop-shadow(0 calc(31 * var(--u)) calc(12 * var(--u)) rgba(182, 156, 252, 0.03))
		drop-shadow(0 calc(17 * var(--u)) calc(10 * var(--u)) rgba(182, 156, 252, 0.11))
		drop-shadow(0 calc(8 * var(--u)) calc(8 * var(--u)) rgba(182, 156, 252, 0.19))
		drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(182, 156, 252, 0.22));
}

.hp-eco__pic--2 {
	width: calc(233 * var(--u));
}

.hp-eco__pic--3 {
	width: calc(232 * var(--u));
}

.hp-eco__img {
	position: absolute;
}

.hp-eco__img--1 { left: -4.34%; top: -5.28%; width: 108.3%; height: 108.3%; }
.hp-eco__img--2 { left: -19.14%; top: -8.75%; width: 134.98%; height: 121.97%; }
.hp-eco__img--3 { left: -11.11%; top: -9.2%; width: 120.47%; height: 118.39%; }

.hp-eco__copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 40px;
	color: var(--hp-text);
}

.hp-eco__title {
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -0.96px;
	line-height: 1.2;
}

.hp-eco__desc {
	max-width: 354px;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
}

@media (max-width: 992px) {
	.hp-ways {
		margin-top: 100px;
	}

	.hp-ways .hp-h2 {
		max-width: 324px;
		white-space: normal;
	}

	.hp-ways__grid {
		grid-template-columns: 1fr;
		margin-top: 40px;
	}

	.hp-way--1 {
		--g: linear-gradient(118.75deg, #4a1fb0 4.7%, #c36e8b 93.17%);
	}

	.hp-way--2,
	.hp-way--3 {
		--g: linear-gradient(125.59deg, #4a1fb0 4.7%, #c36e8b 93.17%);
	}

	.hp-eco {
		margin-top: 100px;
	}

	.hp-eco .hp-head__title {
		width: 366px;
	}

	.hp-eco .hp-lead {
		width: 262px;
	}

	.hp-eco__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-top: 40px;
	}

	.hp-eco__tile {
		height: 313px;
	}

	.hp-eco__pic {
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.hp-eco__copy {
		gap: 9.457px;
		margin-top: 20px;
	}

	.hp-eco__title {
		font-size: 24px;
		letter-spacing: -0.72px;
	}

	.hp-eco__desc {
		max-width: none;
		font-size: 16px;
	}
}

/* ---------- Fold 5: Stats ---------- */
.hp-stats {
	margin-top: 160px;
}

.hp-stats__inner {
	position: relative;
	max-width: 1201px;
	margin: 0 auto;
}

.hp-stats__head .hp-head__title {
	align-items: flex-start;
}

.hp-stats__head .hp-h2 {
	width: 610px;
	max-width: 100%;
}

.hp-stats__note {
	position: absolute;
	left: 787px;
	top: 121px;
	width: 411px;
	max-width: calc(100% - 787px);
}

.hp-stats__row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 46px;
	margin-top: 30px;
}

.hp-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	width: 220px;
	white-space: nowrap;
}

.hp-stat--n4 {
	width: 259px;
}

.hp-stat__num {
	width: max-content;
	transform: scaleX(1.13);
	transform-origin: 0 50%;
	font-size: 60px;
	font-weight: 500;
	letter-spacing: -2.4px;
	line-height: 1.21;
	background-image: linear-gradient(149.48deg, #6b2dff 4.7%, #db7c9c 93.17%);
}

.hp-stat--sm .hp-stat__num {
	font-size: 50px;
	letter-spacing: -2px;
}

.hp-stat--n1 .hp-stat__num {
	background-image: linear-gradient(153.47deg, #6b2dff 4.7%, #db7c9c 93.17%);
}

.hp-stat--n4 .hp-stat__num {
	background-image: linear-gradient(156.46deg, #6b2dff 4.7%, #db7c9c 93.17%);
}

.hp-stat__label {
	color: var(--hp-muted);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
}

.hp-stats__div {
	flex: none;
	width: 3px;
	height: 189px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #c6adff 50%, rgba(255, 255, 255, 0));
}

/* ---------- Fold 6: The filter ---------- */
.hp-filter {
	position: relative;
	width: min(1200px, 100%);
	height: 706px;
	margin: 60px auto 0;
	overflow: hidden;
}

.hp-filter__bg {
	position: absolute;
	left: 16px;
	top: 64px;
	width: 1168px;
	height: 657px;
	opacity: 0.7;
	object-fit: cover;
}

.hp-filter__blobs {
	position: absolute;
	left: calc(50% - 156px);
	top: 8px;
	width: 338.38px;
	height: 377.62px;
	mix-blend-mode: hard-light;
}

.hp-filter__rings {
	position: absolute;
	left: calc(50% - 513px);
	top: -504px;
	width: 1027.23px;
	height: 1107px;
	mix-blend-mode: color-burn;
}

.hp-filter__dots {
	position: absolute;
	left: 0;
	top: 106px;
	width: 1200px;
	height: 843px;
	background-image: radial-gradient(circle at 0.88px 0.85px, rgba(255, 255, 255, 0.6) 0.88px, transparent 0.98px);
	background-size: 12.727px 12.727px;
}

.hp-filter__fade {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 275px;
	background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0));
}

.hp-filter__copy {
	position: absolute;
	left: 50%;
	top: 226px;
	transform: translateX(-50%);
	width: 762px;
	max-width: 100%;
}

.hp-filter__copy .hp-h2 {
	width: 762px;
	max-width: 100%;
}

@media (max-width: 992px) {
	.hp-stats {
		margin-top: 100px;
	}

	.hp-stats__head {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.hp-stats__head .hp-h2 {
		width: 366px;
		font-size: 36px;
		letter-spacing: -2px;
	}

	.hp-stats__note {
		position: static;
		width: 366px;
		max-width: 100%;
	}

	.hp-stats__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 129.3px 120.5px;
		row-gap: 21px;
		margin-top: 42px;
	}

	.hp-stat,
	.hp-stat--n4 {
		align-self: center;
		gap: 6.5px;
		width: auto;
	}

	.hp-stats__row > .hp-stat--n1 { grid-area: 1 / 1; justify-self: start; }

	.hp-stats__row > .hp-stat--n2 { grid-area: 1 / 2; justify-self: end; width: 150.5px; }

	.hp-stats__row > .hp-stat--n3 { grid-area: 2 / 1; justify-self: start; }

	.hp-stats__row > .hp-stat--n4 { grid-area: 2 / 2; justify-self: end; width: 156px; }

	.hp-stat__num,
	.hp-stat--sm .hp-stat__num {
		font-size: 30px;
		letter-spacing: -1.2px;
	}

	.hp-stat__label {
		font-size: 12.314px;
	}

	.hp-stats__div {
		grid-column: 1 / -1;
		width: 2px;
		height: 100%;
		margin-left: calc(50% - 11.5px);
	}

	.hp-stats__div--1 { grid-row: 1; }

	.hp-stats__div--2 { display: none; }

	.hp-stats__div--3 { grid-row: 2; }

	.hp-filter {
		width: 100%;
		height: 490px;
		margin-top: 60px;
	}

	.hp-filter__bg {
		left: calc(50% - 302px);
		top: 119px;
		width: 604px;
		height: 340px;
	}

	.hp-filter__blobs {
		left: calc(50% - 102px);
		top: 39px;
		width: 206px;
		height: 230px;
	}

	.hp-filter__rings {
		left: calc(50% - 268px);
		top: -186.4px;
		width: 541.4px;
		height: 583.5px;
	}

	.hp-filter__dots {
		left: calc(50% - 268px);
		top: -81px;
		opacity: 0.25;
	}

	.hp-filter__fade {
		display: none;
	}

	.hp-filter__copy {
		top: 91px;
		width: 356px;
	}

	.hp-filter__copy .hp-head {
		gap: 10px;
	}

	.hp-filter__copy .hp-h2 {
		width: 356px;
		font-size: 36px;
		letter-spacing: -2px;
	}

	.hp-filter__copy .hp-lead {
		width: 296px;
	}
}



.hp-foot .hp-foot__form .purelabs-subscribe__form br {
	display: none;
}

.wp-block-button:has(#hp-tab-1),
.wp-block-button:has(#hp-tab-2) {
	position: relative;
}

.wp-block-button:has(#hp-tab-1)::after,
.wp-block-button:has(#hp-tab-2)::after {
	content: "Coming Soon";
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX(-50%);
	background: #111;
	color: #fff;
	padding: 6px 9px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	z-index: 99;
	pointer-events: none;
	animation: comingSoonBlink 1.5s ease-in-out infinite;
}

@keyframes comingSoonBlink {

	0%,
	100% {
		opacity: 1;
		filter: brightness(1);
	}

	50% {
		opacity: 0.65;
		filter: brightness(1.6);
	}
}


@media (max-width: 768px) {
    .hp-exp .hp-exp__tab .wp-block-button__link {
        padding: 2px 15px 0;
        font-size: 11px;
    }

	 .hp-exp .hp-exp__tab {
       
    }
}