/* HVACB — how-it-works section.

   Block-safe rewrite. Native core blocks, so every decorative element that was
   an empty div/span, and every repeated inline <svg>, is now CSS.

     .hx__wash          ->  .hx:before
     .hx__eyebrow i     ->  .hx__eyebrow:before
     .hx__gatedot       ->  .hx__gate:before
     16x tick <svg>     ->  .hx__checks li:before   (mask + background-color)
     3x shield <svg>    ->  .hx__gatein:before      (mask)
     style="--a;--k"    ->  .hx__stage--1 .. --4
     .hx__mark span     ->  .hx__lead mark

   The two icon shapes are identical everywhere they appear; only the colour
   changes, so one mask each plus background-color:var(--a) replaces all 19.
*/

/* Neutralise theme + block-layout margins inside the section. */
.hx p,
.hx h2,
.hx h3 { margin: 0; }
.hx > *,
.hx .wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

.hx {
	position: relative;
	background: #FFFFFF;
	padding: clamp(4rem, 8vw, 7.5rem) clamp(18px, 4vw, 48px) clamp(3rem, 6vw, 5rem);
	overflow: hidden;

	--ico-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18A9 9 0 0 0 10 1Zm4.8 6.4-5.4 5.4a1 1 0 0 1-1.5 0L5.3 10.9a1.05 1.05 0 0 1 1.5-1.5l1.85 1.85 4.65-4.65a1.05 1.05 0 0 1 1.5 1.5Z' fill='black'/%3E%3C/svg%3E");
	--ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 17 6v4.5c0 4-3 6.6-7 7.5-4-.9-7-3.5-7-7.5V6l7-3.5Z'/%3E%3C/svg%3E");
}

.hx * { box-sizing: border-box; }

/* Was .hx__wash. */
.hx:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 54% 32% at 88% 0%, rgba(190, 172, 240, .45), transparent 62%),
		radial-gradient(ellipse 44% 28% at 2% 58%, rgba(237, 176, 136, .18), transparent 62%),
		radial-gradient(ellipse 50% 30% at 60% 100%, rgba(227, 218, 247, .45), transparent 64%);
}

.hx .hx__in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

.hx .hx-rev {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
}

.hx .hx-rev.in { opacity: 1; transform: none; }

.hx .hx__head { max-width: 900px; margin: 0 0 clamp(3rem, 5.5vw, 4.5rem); }

.hx .hx__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin: 0 0 26px;
	padding: 11px 24px;
	border-radius: 999px;
	background: linear-gradient(105deg, #3A2C7A 0%, #6B4FB8 42%, #D96A2B 100%);
	box-shadow: 0 16px 34px -12px rgba(75, 59, 143, .6);
}

.hx .hx__eyebrow:before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #FFFFFF;
	flex: none;
	animation: hxPing 2.6s ease-out infinite;
}

@keyframes hxPing {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); }
	70%  { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.hx .hx__h2 {
	font-size: clamp(36px, 6vw, 80px);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: .98;
	margin: 0 0 24px;
	color: #14121F;
}

.hx .hx__h2 em {
	font-style: normal;
	background: linear-gradient(104deg, #4B3B8F 0%, #8A5CC4 42%, #D96A2B 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hx .hx__lead {
	font-size: clamp(17px, 1.75vw, 24px);
	line-height: 1.5;
	color: #2E2B3D;
	margin: 0;
	max-width: 44ch;
	font-weight: 500;
}

/* Was span.hx__mark — now core's highlight format. */
.hx .hx__lead mark {
	font-weight: 800;
	color: #14121F;
	background: linear-gradient(180deg, transparent 60%, rgba(217, 106, 43, .3) 60%);
	padding: 0 2px;
}

.hx .hx__track { position: relative; padding-left: clamp(58px, 7vw, 96px); }

.hx .hx__spine {
	position: absolute;
	top: 10px;
	bottom: 24px;
	left: clamp(22px, 3vw, 36px);
	width: 3px;
	background: rgba(20, 18, 31, .08);
	border-radius: 3px;
	overflow: hidden;
}

/* #hxFill is driven by assets/js/how-it-works.js — keep the id. */
.hx .hx__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, #4B3B8F, #8A5CC4 46%, #D96A2B);
	border-radius: 3px;
}

.hx .hx__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 392px);
	gap: clamp(22px, 3.4vw, 52px);
	align-items: center;
	padding-bottom: clamp(2.25rem, 3.4vw, 3.25rem);
}

/* Per-stage tokens, were inline style attributes. */
.hx .hx__stage--1 { --a: #4B3B8F; --k: #4B3B8F; }
.hx .hx__stage--2 { --a: #6B4FB8; --k: #5B3FA6; }
.hx .hx__stage--3 { --a: #A8481A; --k: #A8481A; }
.hx .hx__stage--4 { --a: #D96A2B; --k: #A8481A; }

.hx .hx__node {
	position: absolute;
	left: calc(clamp(22px, 3vw, 36px) - clamp(58px, 7vw, 96px) - 25px);
	top: -2px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 3px solid var(--a);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 800;
	color: var(--a);
	box-shadow: 0 16px 30px -14px rgba(20, 18, 31, .45);
	z-index: 3;
}

.hx .hx__stage--opt .hx__node { border-style: dashed; }

.hx .hx__body { display: flex; flex-direction: column; }

.hx .hx__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--k);
	margin: 0 0 9px;
}

.hx .hx__kicker:before {
	content: "";
	width: 30px;
	height: 2px;
	background: var(--a);
	border-radius: 2px;
	flex: none;
}

.hx .hx__t {
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 800;
	letter-spacing: -.038em;
	line-height: 1.02;
	margin: 0 0 12px;
	background: linear-gradient(100deg, #14121F 34%, var(--a) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hx .hx__d {
	font-size: clamp(15px, 1.3vw, 17.5px);
	line-height: 1.6;
	color: #2E2B3D;
	margin: 0 0 20px;
	max-width: 46ch;
	font-weight: 500;
}

.hx .hx__optchip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--k);
	background: #FFFFFF;
	border: 1.5px dashed var(--a);
	border-radius: 999px;
	padding: 6px 15px;
	margin: 0 0 11px;
}

.hx .hx__checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1.5px solid rgba(20, 18, 31, .1);
}

.hx .hx__checks li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 0;
	font-size: clamp(13.5px, 1.15vw, 15.5px);
	font-weight: 700;
	color: #14121F;
	line-height: 1.3;
	letter-spacing: -.01em;
	border-bottom: 1.5px solid rgba(20, 18, 31, .06);
}

/* Was a repeated inline <svg> tick, coloured per stage. */
.hx .hx__checks li:before {
	content: "";
	flex: none;
	width: 19px;
	height: 19px;
	background-color: var(--a);
	-webkit-mask-image: var(--ico-tick);
	mask-image: var(--ico-tick);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 19px 19px;
	mask-size: 19px 19px;
}

.hx .hx__shot {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 34px 64px -34px rgba(20, 18, 31, .4);
}

.hx .hx__shot img { display: block; width: 100%; height: auto; }

.hx .hx__gate { position: relative; padding-bottom: clamp(2.25rem, 3.4vw, 3.25rem); }

/* Was span.hx__gatedot. */
.hx .hx__gate:before {
	content: "";
	position: absolute;
	left: calc(clamp(22px, 3vw, 36px) - clamp(58px, 7vw, 96px) - 6px);
	top: 16px;
	width: 15px;
	height: 15px;
	border-radius: 4px;
	background: #D96A2B;
	transform: rotate(45deg);
	box-shadow: 0 0 0 6px rgba(217, 106, 43, .16);
	z-index: 3;
}

.hx .hx__gatein {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	background: linear-gradient(100deg, #D96A2B, #A8481A);
	color: #FFFFFF;
	border-radius: 999px;
	padding: 14px 28px;
	font-size: clamp(14px, 1.35vw, 17px);
	font-weight: 800;
	letter-spacing: -.015em;
	box-shadow: 0 20px 38px -16px rgba(168, 72, 26, .7);
}

/* Was the inline shield <svg>. */
.hx .hx__gatein:before {
	content: "";
	flex: none;
	width: 19px;
	height: 19px;
	background-color: #FFFFFF;
	-webkit-mask-image: var(--ico-shield);
	mask-image: var(--ico-shield);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 19px 19px;
	mask-size: 19px 19px;
}

.hx .hx__foot {
	margin-top: clamp(2rem, 3.5vw, 3rem);
	padding-top: 30px;
	border-top: 1.5px solid rgba(20, 18, 31, .1);
}

.hx .hx__foott {
	font-size: clamp(18px, 2.1vw, 28px);
	line-height: 1.42;
	color: #14121F;
	margin: 0;
	max-width: 38ch;
	font-weight: 800;
	letter-spacing: -.028em;
}

.hx .hx__foott .hx__foott-sub {
	color: #5A5670;
	font-weight: 500;
	letter-spacing: -.012em;
}

@media (max-width: 940px) {
	.hx .hx__stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.hx .hx__node {
		width: 44px;
		height: 44px;
		font-size: 14px;
		left: calc(clamp(22px, 3vw, 36px) - clamp(58px, 7vw, 96px) - 20px);
	}
}

@media (max-width: 560px) {
	.hx .hx__checks { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.hx .hx-rev { opacity: 1; transform: none; transition: none; }
	.hx .hx__eyebrow:before { animation: none; }
}