/* Home page, top half (2026-11-12): hero with the Layers graphic, the moving strip of six sites, the
   "Engineers, not decorators." band and the proof section. Built from Chris's Design canvas
   https://claude.ai/artifact/Hc2i2Q7GexC8D2twCtCpPW. Loaded on the front page only (functions.php).
   Everything works without JavaScript: home.js only adds motion (Layers steps, the strip loop, count-ups,
   the scroll-driven proof). Without it, or with reduced motion, each part shows its finished state. */

.wxh-band {
	margin-block: 0 !important;
}
.wxh-wrap {
	box-sizing: border-box;
	max-width: calc(1200px + 2 * var(--wxh-pad));
	margin-inline: auto;
	padding-inline: var(--wxh-pad);
}
:root {
	--wxh-pad: clamp(16px, 4vw, 24px);
	--wxh-ink: var(--wp--preset--color--contrast);
	--wxh-blue: var(--wp--preset--color--accent);
	--wxh-line: var(--wp--preset--color--line);
}
.wxh-hero + .wxh-band,
.wp-block-post-content > .wxh-band {
	margin-top: 0 !important;
}

/* ---------- Hero ---------- */
.wxh-hero h1 {
	max-width: 14ch;
	margin-bottom: 0;
	line-height: 1.02;
	font-weight: 800;
}
.wxh-hero .wx-lede {
	max-width: 34em;
	margin-top: 22px;
	font-size: 1.125rem;
	line-height: 1.55;
}
.wxh-hero .wx-trust {
	margin-top: 20px;
}
.wxh-hero .wx-trust li {
	padding: 7px 16px;
}

/* ---------- Layers graphic (fixed 580 x 460 inside; home.js scales it to its column) ---------- */
.wxl-fit {
	width: 100%;
	max-width: 580px;
	margin-left: auto;
	overflow: hidden;
	border-radius: 18px;
}
.wxl {
	--wxl-ease: cubic-bezier(.2, .8, .2, 1);
	position: relative;
	box-sizing: border-box;
	width: 580px;
	height: 460px;
	overflow: hidden;
	border-radius: 18px;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px var(--wxh-line), 0 30px 60px -30px rgba(15, 23, 42, 0.45);
	color: var(--wxh-ink);
	font-family: var(--wp--preset--font-family--body);
	line-height: normal;
	transform-origin: 0 0;
}
.wxl *,
.wxl *::before {
	box-sizing: border-box;
}
.wxl__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 14px;
	background: #F2F5FA;
	border-bottom: 1px solid var(--wxh-line);
}
.wxl__lights,
.wxs__lights,
.wxp__lights {
	display: flex;
	gap: 5px;
}
.wxl__lights i,
.wxs__lights i,
.wxp__lights i {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #CBD3DF;
}
.wxl__url {
	flex: 1;
	margin-right: 40px;
	padding: 4px 0;
	border-radius: 6px;
	background: #FFFFFF;
	text-align: center;
	font-size: 11px;
	color: #475569;
}
.wxl__screen {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 370px;
	padding: 12px 16px 0;
}
.wxl__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 24px;
}
.wxl__name {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.wxl__count {
	padding: 3px 10px;
	border-radius: 999px;
	background: #EEF3FF;
	color: var(--wxh-blue);
	font-family: var(--wp--preset--font-family--numbers);
	font-size: 12px;
	font-weight: 700;
}
.wxl__chips {
	display: flex;
	gap: 6px;
	height: 24px;
}
.wxl__chip {
	display: flex;
	align-items: center;
	padding: 0 10px;
	border: 1px solid #F5C77E;
	border-radius: 999px;
	background: #FFF4E5;
	color: #7A4A00;
	font-size: 11.5px;
	font-weight: 700;
	opacity: 0;
	transform: translateY(-46px);
	transition: opacity 500ms var(--wxl-ease), transform 500ms var(--wxl-ease);
}
.wxl__title {
	position: relative;
	height: 26px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.wxl__title-a {
	color: #64748B;
}
.wxl__title-b {
	display: none;
	color: var(--wxh-ink);
}
.wxl__search {
	display: flex;
	gap: 8px;
	height: 30px;
}
.wxl__input {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0 12px;
	border: 1px solid var(--wxh-line);
	border-radius: 8px;
	font-size: 12px;
	color: #64748B;
}
.wxl__go {
	display: flex;
	align-items: center;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--wxh-blue);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
}
.wxl__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 4px;
}
.wxl__card {
	position: relative;
	height: 88px;
}
.wxl__ph,
.wxl__real {
	display: flex;
	gap: 12px;
	align-items: center;
	height: 100%;
	padding: 10px;
	border-radius: 10px;
}
.wxl__ph {
	border: 1px dashed #CBD5E1;
	background: #F8FAFC;
}
.wxl__ph-img {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: #E2E8F0;
}
.wxl__ph-lines {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
}
.wxl__ph-lines span {
	font-size: 12px;
	font-weight: 700;
	color: #64748B;
}
.wxl__ph-lines i {
	display: block;
	width: 80%;
	height: 7px;
	border-radius: 4px;
	background: #E2E8F0;
}
.wxl__ph-lines i + i {
	width: 55%;
}
.wxl__real {
	position: absolute;
	inset: 0;
	border: 1px solid var(--wxh-line);
	background: #FFFFFF;
	box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.5);
	opacity: 0;
	transform: translateY(-18px);
	transition: opacity 450ms var(--wxl-ease), transform 450ms var(--wxl-ease);
}
.wxl__th {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid #DBE6FF;
	border-radius: 8px;
	background: #DBE6FF;
	color: var(--wxh-blue);
	font-weight: 800;
	text-align: center;
	line-height: 1.15;
	transition: background 400ms, border 400ms;
}
.wxl__ini {
	font-size: 15px;
}
.wxl__photo {
	display: none;
	font-size: 9.5px;
}
.wxl__txt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.wxl__n {
	font-size: 12.5px;
	line-height: 1.25;
	font-weight: 700;
}
.wxl__m {
	font-size: 11.5px;
	color: #475569;
}
.wxl__map {
	position: absolute;
	top: 126px;
	right: 16px;
	width: 212px;
	overflow: hidden;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px var(--wxh-line), 0 22px 40px -18px rgba(15, 23, 42, 0.55);
	opacity: 0;
	transform: translateY(24px) scale(0.96);
	transition: opacity 600ms var(--wxl-ease), transform 600ms var(--wxl-ease);
}
.wxl__map-h {
	padding: 7px 10px;
	border-bottom: 1px solid var(--wxh-line);
	font-size: 11px;
	font-weight: 800;
}
.wxl__map-b {
	position: relative;
	height: 122px;
	background: #EAF1E8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='212' height='122' viewBox='0 0 212 122'%3E%3Cpath d='M0 70 C60 60 120 90 212 64' stroke='%23CFE0F5' stroke-width='10' fill='none'/%3E%3Cpath d='M0 40 L212 52 M70 0 L96 122 M150 0 L132 122 M0 100 L212 92' stroke='%23FFFFFF' stroke-width='5' fill='none'/%3E%3C/svg%3E") no-repeat 0 0 / 212px 122px;
}
.wxl__pin {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 4px;
	opacity: 0;
	transform: translateY(-16px);
	transition: opacity 400ms var(--wxl-ease), transform 400ms var(--wxl-ease);
}
.wxl__pin i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wxh-blue);
	box-shadow: 0 0 0 2px #FFFFFF;
}
.wxl__pin b {
	padding: 1px 6px;
	border-radius: 6px;
	background: #FFFFFF;
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
}
.wxl__pin--1 { left: 112px; top: 14px; }
.wxl__pin--2 { left: 30px; top: 34px; }
.wxl__pin--3 { left: 8px; top: 80px; }
.wxl__pin--4 { left: 102px; top: 72px; }
.wxl__msg {
	position: absolute;
	left: 16px;
	bottom: 70px;
	width: 318px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px var(--wxh-line), 0 24px 44px -18px rgba(15, 23, 42, 0.55);
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 550ms var(--wxl-ease), transform 550ms var(--wxl-ease);
}
.wxl__msg-h {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: #475569;
}
.wxl__sent {
	padding: 2px 8px;
	border-radius: 999px;
	background: #E7F6EC;
	color: #166534;
	font-weight: 700;
	opacity: 0;
	transition: opacity 400ms ease;
}
.wxl__msg-b {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
}
.wxl__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 56px;
	padding: 0 8px 0 16px;
	background: #F8FAFC;
	border-top: 1px solid var(--wxh-line);
}
.wxl__cap {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.wxl__num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wxh-blue);
}
.wxl__caption {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.wxl__ctl {
	display: flex;
	align-items: center;
}
.wxl__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.wxl__dot i {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #CBD5E1;
	transition: width 250ms;
}
.wxl__dot.is-done i {
	background: var(--wxh-blue);
}
.wxl__dot[aria-current="step"] i {
	width: 22px;
}
.wxl__pause {
	min-height: 44px;
	margin-left: 6px;
	padding: 0 14px;
	border: 1px solid var(--wxh-line);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--wxh-ink);
	font: 700 13px var(--wp--preset--font-family--body);
	cursor: pointer;
}
.wxl__dot:focus-visible,
.wxl__pause:focus-visible,
.wxs__pause:focus-visible,
.wxs__item:focus-visible,
.wxs__viewport:focus-visible,
.wxp__visit:focus-visible,
.wxp__card:focus-visible {
	outline: 3px solid var(--wxh-blue);
	outline-offset: 2px;
}

/* Layers states: is-s1 … is-s4 are set for every step reached (step 1 = template only). */
.wxl.is-s1 .wxl__real { opacity: 1; transform: none; }
.wxl.is-s1 .wxl__card:nth-child(1) .wxl__real { transition-delay: 250ms; }
.wxl.is-s1 .wxl__card:nth-child(2) .wxl__real { transition-delay: 510ms; }
.wxl.is-s1 .wxl__card:nth-child(3) .wxl__real { transition-delay: 770ms; }
.wxl.is-s1 .wxl__card:nth-child(4) .wxl__real { transition-delay: 1030ms; }
.wxl.is-s2 .wxl__map { opacity: 1; transform: none; }
.wxl.is-s2 .wxl__pin { opacity: 1; transform: none; }
.wxl.is-s2 .wxl__pin--1 { transition-delay: 500ms; }
.wxl.is-s2 .wxl__pin--2 { transition-delay: 720ms; }
.wxl.is-s2 .wxl__pin--3 { transition-delay: 940ms; }
.wxl.is-s2 .wxl__pin--4 { transition-delay: 1160ms; }
.wxl.is-s3 .wxl__chip { opacity: 1; transform: none; }
.wxl.is-s3 .wxl__chip:nth-child(2) { transition-delay: 300ms; }
.wxl.is-s3 .wxl__chip:nth-child(3) { transition-delay: 600ms; }
.wxl.is-s3 .wxl__title-a { display: none; }
.wxl.is-s3 .wxl__title-b { display: inline; }
.wxl.is-s4 .wxl__th { border: 2px dashed var(--wxh-blue); background: #FFFFFF; }
.wxl.is-s4 .wxl__ini { display: none; }
.wxl.is-s4 .wxl__photo { display: inline; }
.wxl.is-s4 .wxl__msg { opacity: 1; transform: none; transition-delay: 300ms; }
.wxl.is-s4 .wxl__sent { opacity: 1; transition-delay: 1400ms; }

/* ---------- Strip of six sites ---------- */
.wxh-band--strip {
	padding-bottom: 24px;
}
.wxs__ctl {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 8px;
}
.wxs__ctl:has(.wxs__pause[hidden]) {
	padding-bottom: 0;
}
.wxs__pause {
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wxh-line);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--wxh-ink);
	font: 600 14px var(--wp--preset--font-family--body);
	cursor: pointer;
}
.wxs__pause[hidden] {
	display: none;
}
.wxs__viewport {
	overflow-x: auto;
	padding: 4px 0 24px;
	scrollbar-width: none;
}
.wxs__viewport::-webkit-scrollbar {
	display: none;
}
.wxs__track {
	display: flex;
	gap: 28px;
	width: max-content;
	padding-left: 28px;
	padding-right: 28px;
}
.wxs.is-moving .wxs__viewport {
	overflow: hidden;
}
.wxs.is-moving .wxs__track {
	padding-right: 0;
	animation: wxh-strip 90s linear infinite;
}
.wxs.is-moving .wxs__viewport:hover .wxs__track,
.wxs.is-moving .wxs__viewport:focus-within .wxs__track,
.wxs.is-paused .wxs__track {
	animation-play-state: paused;
}
@keyframes wxh-strip {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.wxs__item {
	display: block;
	flex: none;
	width: 420px;
	border-radius: 14px;
	color: var(--wxh-ink);
	text-decoration: none;
}
.wxs__item:hover .wxs__name {
	text-decoration: underline;
}
.wxs__shot {
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px var(--wxh-line), 0 24px 48px -28px rgba(15, 23, 42, 0.4);
}
.wxs__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 30px;
	padding: 0 12px;
	background: #F2F5FA;
	border-bottom: 1px solid var(--wxh-line);
}
.wxs__lights i {
	width: 8px;
	height: 8px;
}
.wxs__url {
	flex: 1;
	margin-right: 36px;
	padding: 3px 0;
	border-radius: 6px;
	background: #FFFFFF;
	text-align: center;
	font-size: 11px;
	color: var(--wp--preset--color--muted);
}
.wxs__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
	background: #E8EDF5;
}
.wxs__fig {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 14px;
}
.wxs__stat {
	font-family: var(--wp--preset--font-family--numbers);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wxh-blue);
}
.wxs__label {
	font-size: 14px;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}
.wxs__name {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 700;
}
.wxs__pips {
	display: none;
}

/* Wide screens: the strip sits in the page's 1200px column, not edge to edge (Chris, 12 Nov), three cards
   across, fading out at both ends. The moving track keeps one gap of padding on the right so the loop's
   -50% lands exactly on the copy of the first card. */
@media (min-width: 768px) {
	.wxs__viewport {
		width: calc(100% - 2 * var(--wxh-pad));
		max-width: 1200px;
		margin-inline: auto;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
	}
	.wxs__track {
		padding-left: 0;
		padding-right: 0;
	}
	.wxs.is-moving .wxs__track {
		padding-right: 28px;
	}
	.wxs__item {
		width: calc((min(100vw - 2 * var(--wxh-pad), 1200px) - 56px) / 3);
		min-width: 300px;
	}
}

/* ---------- Engineers, not decorators. ---------- */
.wxh-band--eng {
	background: #0F172A;
	color: #F1F5F9;
}
.wxe {
	padding: 88px 0;
}
.wxe__head {
	display: grid;
	grid-template-columns: 56fr 44fr;
	gap: 64px;
	align-items: end;
}
.wxe .wxe__eyebrow {
	margin: 0 0 14px;
	color: #93B4FF;
}
.wxe__title {
	margin: 0;
	font-size: clamp(2.25rem, 4.2vw, 3.75rem);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.035em;
	color: #F1F5F9;
}
.wxe__lede {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.55;
	color: #CBD5E1;
}
.wxe__figs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 64px 0 0;
	padding: 0;
	border-top: 1px solid #334155;
	list-style: none;
}
.wxe__figs li {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 28px 24px 0 0;
}
.wxe__num {
	font-family: var(--wp--preset--font-family--numbers);
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #FFFFFF;
}
.wxe__label {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.4;
	color: #CBD5E1;
}
.wxe__site {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	color: #93B4FF;
}
.wxe__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin-top: 56px;
}
.wxe__points h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: normal;
	color: #F1F5F9;
}
.wxe__points p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #CBD5E1;
}

/* ---------- Proof: two sites, taken apart ---------- */
.wxh-band--proof {
	border-bottom: 1px solid #DDE3EC;
}
.wxp__intro {
	padding-top: 88px;
	padding-bottom: 24px;
}
.wxp__intro .wx-eyebrow {
	margin: 0 0 14px;
}
.wxp__title {
	margin: 0;
	font-size: clamp(2.25rem, 4.2vw, 3.75rem);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.035em;
}
.wxp__lede {
	max-width: 60ch;
	margin: 20px 0 0;
	font-size: 1.125rem;
	line-height: 1.55;
	color: #334155;
}
.wxp__site {
	padding-top: 56px;
	padding-bottom: 40px;
}
.wxp__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid #DDE3EC;
}
.wxp__live {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	background: #166534;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.wxp__name {
	margin: 12px 0 0;
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.wxp__line {
	margin: 8px 0 0;
	font-size: 1.125rem;
	color: #334155;
}
.wxp__visit {
	flex: none;
	padding: 14px 24px;
	border-radius: 999px;
	background: var(--wxh-blue);
	color: #FFFFFF;
	font-weight: 700;
	text-decoration: none;
}
.wxp__visit:hover {
	background: var(--wp--preset--color--accent-dark);
	color: #FFFFFF;
}
.wxp__grid {
	display: grid;
	grid-template-columns: 58fr 42fr;
	gap: 56px;
	align-items: start;
	margin-top: 40px;
}
.wxp__stick {
	position: sticky;
	top: 40px;
}
.wxp__fig {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px #DDE3EC, 0 30px 60px -34px rgba(15, 23, 42, 0.5);
}
.wxp__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 14px;
	background: #F2F5FA;
	border-bottom: 1px solid #DDE3EC;
}
.wxp__url {
	flex: 1;
	margin-right: 40px;
	padding: 4px 0;
	border-radius: 6px;
	background: #FFFFFF;
	text-align: center;
	font-size: 12px;
	color: #475569;
}
.wxp__shot {
	position: relative;
	display: block;
	aspect-ratio: 66 / 42;
	background: #E8EDF5;
	counter-reset: wxp-zone;
}
.wxp__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}
/* Outlines. Positions are % of the 1320 x 840 screenshot, measured from the live pages' own elements
   when the screenshots were taken (12 Nov 2026). Re-measure if a screenshot is re-shot. */
.wxp__zone {
	position: absolute;
	box-sizing: border-box;
	border: 2px solid rgba(29, 78, 216, 0.35);
	border-radius: 10px;
	background: rgba(29, 78, 216, 0.04);
	counter-increment: wxp-zone;
	transition: opacity 400ms ease, transform 400ms cubic-bezier(.2, .8, .2, 1), border-color 300ms, background 300ms;
}
.wxp__zl {
	position: absolute;
	left: 10px;
	top: -13px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wxh-blue);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 300ms;
}
.wxp__site--carnivore [data-wxp-zone="0"] { left: 2.3%; top: 70.4%; width: 34.1%; height: 16%; }
.wxp__site--carnivore [data-wxp-zone="1"] { left: 57.9%; top: 37.1%; width: 38.3%; height: 37.4%; }
.wxp__site--carnivore [data-wxp-zone="2"] { left: 2.3%; top: 49%; width: 25%; height: 15.2%; }
.wxp__site--carnivore [data-wxp-zone="3"] { left: 2.3%; top: 87.1%; width: 51.4%; height: 9%; }
.wxp__site--motrisk [data-wxp-zone="0"] { left: 75.9%; top: 2.4%; width: 16.2%; height: 3.8%; }
.wxp__site--motrisk [data-wxp-zone="1"] { left: 51.9%; top: 18.3%; width: 40.2%; height: 46.2%; }
.wxp__site--motrisk [data-wxp-zone="2"] { left: 51.9%; top: 65%; width: 40.2%; height: 6.6%; }
.wxp__site--motrisk [data-wxp-zone="3"] { left: 7.9%; top: 49.7%; width: 40.2%; height: 11%; }
/* The motrisk source line sits at the very top of the screenshot: its label goes below it. */
.wxp__site--motrisk [data-wxp-zone="0"] .wxp__zl { top: auto; bottom: -26px; left: auto; right: 0; }
.wxp__progress {
	display: flex;
	gap: 6px;
	margin-top: 16px;
}
.wxp__progress i {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--wxh-blue);
	transition: background 300ms;
}
.wxp__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wxp__step {
	margin: 0;
	padding: 8px 0 32px;
}
.wxp__k {
	display: flex;
	align-items: center;
	gap: 12px;
}
.wxp__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wxh-blue);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--numbers);
	font-size: 15px;
	font-weight: 700;
	transition: background 300ms, color 300ms;
}
.wxp__kick {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wxh-blue);
}
.wxp__step h4 {
	margin: 16px 0 0;
	font-size: clamp(1.5rem, 2vw, 1.75rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wxh-ink);
	transition: color 300ms;
}
.wxp__step p {
	margin: 12px 0 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #334155;
	transition: color 300ms;
}
.wxp__step .wxp__f {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 18px;
}
.wxp__fv {
	font-family: var(--wp--preset--font-family--numbers);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wxh-blue);
}
.wxp__fl {
	font-size: 15px;
	color: #475569;
}
.wxp__more {
	padding-top: 40px;
	padding-bottom: 100px;
}
.wxp__more-title {
	margin: 0 0 24px;
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.wxp__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.wxp__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px #DDE3EC;
	color: var(--wxh-ink);
	text-decoration: none;
	transition: box-shadow 200ms;
}
.wxp__card:hover {
	box-shadow: 0 0 0 2px var(--wxh-blue);
}
.wxp__cn {
	font-size: 18px;
	font-weight: 800;
}
.wxp__cl {
	min-height: 40px;
	font-size: 14px;
	line-height: 1.45;
	color: #475569;
}
.wxp__cs {
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--numbers);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wxh-blue);
}
.wxp__cla {
	font-size: 13px;
	color: #475569;
}
.wxp__cb {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wxh-blue);
}

/* Desktop with home.js running: the screenshot stays pinned while the steps scroll past. Only the
   outlines of steps reached show, the current one solid with its label; earlier ones stay on. */
@media (min-width: 900px) {
	.wxp.is-live .wxp__steps {
		padding-bottom: 260px;
	}
	.wxp.is-live .wxp__step {
		min-height: 340px;
		padding-bottom: 0;
	}
	.wxp.is-live .wxp__zone {
		opacity: 0;
		transform: translateY(-12px);
	}
	.wxp.is-live .wxp__zone.is-on {
		opacity: 1;
		transform: none;
	}
	.wxp.is-live .wxp__zone.is-cur {
		border: 3px solid var(--wxh-blue);
		background: rgba(29, 78, 216, 0.1);
	}
	.wxp.is-live .wxp__zone.is-cur .wxp__zl {
		opacity: 1;
	}
	.wxp.is-live .wxp__progress i {
		background: #CBD5E1;
	}
	.wxp.is-live .wxp__progress i.is-on {
		background: var(--wxh-blue);
	}
	.wxp.is-live .wxp__step .wxp__n {
		background: #DDE3EC;
		color: #475569;
	}
	.wxp.is-live .wxp__step.is-on .wxp__n {
		background: var(--wxh-blue);
		color: #FFFFFF;
	}
	.wxp.is-live .wxp__step:not(.is-cur) .wxp__kick,
	.wxp.is-live .wxp__step:not(.is-cur) h4,
	.wxp.is-live .wxp__step:not(.is-cur) p:not(.wxp__f) {
		color: #5B6577;
	}
}

/* Without the pinned view (phone, tablet, no script): every outline on, numbered to match its step. */
@media (max-width: 899px) {
	.wxp__zone::before {
		content: counter(wxp-zone);
		position: absolute;
		left: -9px;
		top: -9px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--wxh-blue);
		color: #FFFFFF;
		font-size: 11px;
		font-weight: 700;
	}
	.wxp__site--motrisk [data-wxp-zone="0"]::before {
		top: auto;
		bottom: -9px;
	}
	.wxp__zone {
		border-color: var(--wxh-blue);
	}
	.wxp__zl {
		display: none;
	}
	.wxp__stick {
		position: static;
	}
	.wxp__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.wxp__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wxe__head {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.wxe__figs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 8px;
	}
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
	.wxh-hero h1 {
		font-size: 2.375rem;
		line-height: 1.08;
	}
	.wxh-hero .wx-lede {
		margin-top: 18px;
		font-size: 1.0625rem;
	}
	.wxh-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.wxh-hero .wp-block-button,
	.wxh-hero .wp-block-button__link {
		box-sizing: border-box;
		width: 100%;
		text-align: center;
	}
	.wxh-hero .wx-trust {
		gap: 8px;
	}
	.wxh-hero .wx-trust li {
		padding: 6px 14px;
		font-size: 0.8125rem;
	}
	.wxl-fit {
		max-width: none;
		margin-left: 0;
	}
	/* Strip: a swipe row with dots, not moving (StripPhone on the canvas). */
	.wxh-band--strip {
		padding-bottom: 0;
	}
	.wxs__viewport {
		padding: 0 0 8px;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 16px;
	}
	.wxs__track {
		gap: 12px;
		padding-left: 16px;
		padding-right: 16px;
	}
	.wxs__item {
		width: min(330px, calc(100vw - 60px));
		scroll-snap-align: start;
	}
	.wxs__shot {
		border-radius: 12px;
		box-shadow: 0 0 0 1px var(--wxh-line), 0 20px 40px -24px rgba(15, 23, 42, 0.45);
	}
	.wxs__bar {
		height: 26px;
		padding: 0 10px;
	}
	.wxs__lights {
		display: none;
	}
	.wxs__url {
		margin-right: 0;
		background: transparent;
	}
	.wxs__fig {
		gap: 8px;
		margin-top: 12px;
	}
	.wxs__stat {
		font-size: 24px;
	}
	.wxs__label {
		font-size: 13px;
	}
	.wxs__pips {
		display: flex;
		justify-content: center;
		gap: 8px;
		padding: 14px 0;
	}
	.wxs__pips i {
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: #BFCADB;
		transition: width 250ms;
	}
	.wxs__pips i.is-on {
		width: 22px;
		background: var(--wxh-blue);
	}
	.wxe {
		padding: 56px 0;
	}
	.wxe__figs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 40px;
	}
	.wxe__figs li {
		padding: 22px 16px 0 0;
	}
	.wxe__points {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 40px;
	}
	.wxp__intro {
		padding-top: 56px;
	}
	.wxp__site {
		padding-top: 40px;
		padding-bottom: 16px;
	}
	.wxp__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.wxp__url {
		margin-right: 0;
	}
	.wxp__fv {
		font-size: 34px;
	}
	.wxp__cards {
		grid-template-columns: 1fr;
	}
	.wxp__cl {
		min-height: 0;
	}
	.wxp__more {
		padding-bottom: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wxl *,
	.wxp__zone,
	.wxp__zl,
	.wxp__n,
	.wxs__pips i {
		transition: none !important;
	}
	.wxs__track {
		animation: none !important;
	}
}

.wxl.is-instant,
.wxl.is-instant * {
	transition: none !important;
}
.wxh-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}