/* ZI2 design layer — instrument-grade surfaces, flow choreography, commerce and
   enterprise components. Loaded alongside app.css; every selector is z-prefixed
   so it never collides with the base theme. */

:root {
	--z-void: #08050f;
	--z-surface: #0d0a1c;
	--z-raise: #16112b;
	--z-line: rgba(255, 255, 255, .10);
	--z-line-2: rgba(255, 255, 255, .20);
	--z-text: #ece9f8;
	--z-dim: #a79fc6;
	--z-faint: #6f6790;
	--z-signal: #8a6ff0;
	--z-signal-ink: #120b2e;
	--z-warm: #ffb020;
	--z-r-sm: 10px;
	--z-r: 14px;
	--z-r-lg: 22px;
	--z-wrap: 1240px;
	--z-gut: clamp(18px, 4vw, 40px);
	--z-sec: clamp(60px, 7.4vw, 116px);
	--z-ease: cubic-bezier(.2, .8, .2, 1);
	--z-ease-out: cubic-bezier(.16, 1, .3, 1);
	--z-dur: .72s;
	--z-stagger: 70ms;
	--z-glass: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
	--z-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -32px rgba(0, 0, 0, .9);
	--z-glow: 0 0 0 1px rgba(138, 111, 240, .35), 0 14px 44px -14px rgba(138, 111, 240, .5);
}

/* Light companion: the signal is darkened because the dark-mode mint fails
   contrast on paper, and the grid lines invert rather than disappear. */
[data-theme="light"] {
	--z-void: #f7f5fc;
	--z-surface: #ffffff;
	--z-raise: #ffffff;
	--z-line: rgba(18, 14, 36, .11);
	--z-line-2: rgba(18, 14, 36, .2);
	--z-text: #120e24;
	--z-dim: #55507a;
	--z-faint: #837da6;
	--z-signal: #5b45b0;
	--z-signal-ink: #ffffff;
	--z-glass: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(246, 249, 253, .8));
	--z-shadow: 0 1px 2px rgba(18, 14, 36, .06), 0 24px 48px -30px rgba(18, 14, 36, .35);
	--z-glow: 0 0 0 1px rgba(91, 69, 176, .3), 0 14px 40px -16px rgba(91, 69, 176, .35);
}

/* ---------- shell ---------- */

.z-sec {
	position: relative;
	background: var(--z-void);
	color: var(--z-text);
	padding-block: var(--z-sec);
	overflow: clip;
}

.z-sec > .z-in,
.z-in {
	width: 100%;
	max-width: var(--z-wrap);
	margin-inline: auto;
	padding-inline: var(--z-gut);
	box-sizing: border-box;
}

.z-sec--flush {
	padding-block: 0;
}

.z-sec--tight {
	padding-block: clamp(40px, 5vw, 72px);
}

/* The theme's bar is position:fixed at every width, so the first section on a
   page has to reserve the measured chrome height or the headline renders
   underneath it — most visibly on phones. */
.z-sec--hero {
	padding-top: calc(var(--chrome-h, 120px) + clamp(20px, 3vw, 48px));
}

/* Instrument grid, faded by a radial mask so it reads as depth not wallpaper. */
.z-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--z-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--z-line) 1px, transparent 1px);
	background-size: 68px 68px;
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 0%, #000 15%, transparent 78%);
	mask-image: radial-gradient(ellipse 78% 62% at 50% 0%, #000 15%, transparent 78%);
	opacity: .85;
}

.z-grid-bg > * {
	position: relative;
	z-index: 1;
}

.z-aura::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset-inline: -10%;
	top: -30%;
	height: 70%;
	pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--z-signal) 22%, transparent), transparent 72%);
	filter: blur(30px);
	opacity: .55;
}

/* ---------- type ---------- */

.z-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--z-dim);
}

.z-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--z-signal);
	flex: none;
}

.z-display {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(2.4rem, 6.4vw, 5rem);
	line-height: .98;
	letter-spacing: -.035em;
	font-weight: 700;
	text-wrap: balance;
	color: var(--z-text);
}

.z-split .z-display {
	font-size: clamp(2.2rem, 4.6vw, 3.75rem);
}

.z-h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	line-height: 1.05;
	letter-spacing: -.028em;
	font-weight: 700;
	text-wrap: balance;
}

.z-h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	font-weight: 700;
}

/* Two-tone heading: the trailing span recedes, the way editorial decks do. */
.z-h2 .z-mute,
.z-display .z-mute {
	color: var(--z-faint);
}

.z-lede {
	margin: 18px 0 0;
	max-width: 62ch;
	font-size: clamp(1.02rem, 1.35vw, 1.2rem);
	line-height: 1.6;
	color: var(--z-dim);
}

.z-sub {
	margin: 8px 0 0;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--z-dim);
}

.z-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Declared here rather than assumed from core, so the pinned stage's figures
   still reach assistive tech if the block library stylesheet is dequeued. */
.z-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.z-center {
	text-align: center;
}

.z-center .z-lede {
	margin-inline: auto;
}

.z-head {
	max-width: 760px;
}

.z-head--center {
	margin-inline: auto;
	text-align: center;
}

/* ---------- controls ---------- */

.z-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--z-line-2);
	border-radius: 100px;
	background: transparent;
	color: var(--z-text);
	font: inherit;
	font-weight: 650;
	font-size: .96rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s var(--z-ease), background .18s var(--z-ease), border-color .18s var(--z-ease), box-shadow .18s var(--z-ease);
}

.z-btn:hover {
	transform: translateY(-1px);
	border-color: var(--z-signal);
}

.z-btn:active {
	transform: translateY(0);
}

.z-btn--signal {
	background: var(--z-signal);
	border-color: var(--z-signal);
	color: var(--z-signal-ink);
}

.z-btn--signal:hover {
	box-shadow: var(--z-glow);
}

.z-btn--ghost {
	background: var(--z-glass);
}

.z-btn--sm {
	min-height: 40px;
	padding: 0 16px;
	font-size: .88rem;
}

.z-btn--block {
	width: 100%;
}

/* Core button bridge: keeps CTAs as editable wp:button blocks while wearing the
   ZI2 skin, matching the .wp-block-button.MODIFIER > __link convention app.css
   already uses. */
.wp-block-buttons.z-actions {
	gap: 12px;
	margin-top: 30px;
}

.wp-block-button.z-b > .wp-block-button__link,
.wp-block-button.z-b-signal > .wp-block-button__link,
.wp-block-button.z-b-ghost > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--z-line-2);
	border-radius: 100px;
	background: transparent;
	color: var(--z-text);
	font-family: inherit;
	font-weight: 650;
	font-size: .96rem;
	line-height: 1;
	transition: transform .18s var(--z-ease), border-color .18s var(--z-ease), box-shadow .18s var(--z-ease);
}

.wp-block-button.z-b-signal > .wp-block-button__link {
	background: var(--z-signal);
	border-color: var(--z-signal);
	color: var(--z-signal-ink);
}

.wp-block-button.z-b-ghost > .wp-block-button__link {
	background: var(--z-glass);
}

.wp-block-button.z-b > .wp-block-button__link:hover,
.wp-block-button.z-b-signal > .wp-block-button__link:hover,
.wp-block-button.z-b-ghost > .wp-block-button__link:hover {
	transform: translateY(-1px);
	border-color: var(--z-signal);
}

.wp-block-button.z-b-signal > .wp-block-button__link:hover {
	box-shadow: var(--z-glow);
}

.z-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.z-head--center .z-actions {
	justify-content: center;
}

a.z-link {
	color: var(--z-text);
	text-decoration: none;
	font-weight: 650;
	border-bottom: 1px solid var(--z-line-2);
	padding-bottom: 2px;
	transition: border-color .18s var(--z-ease), color .18s var(--z-ease);
}

a.z-link:hover {
	color: var(--z-signal);
	border-color: var(--z-signal);
}

.z-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var(--z-line);
	border-radius: 100px;
	background: var(--z-glass);
	font-size: .78rem;
	font-weight: 650;
	letter-spacing: .01em;
	color: var(--z-dim);
	white-space: nowrap;
}

.z-chip--signal {
	color: var(--z-signal);
	border-color: color-mix(in srgb, var(--z-signal) 45%, transparent);
}

.z-chip--warm {
	color: var(--z-warm);
	border-color: color-mix(in srgb, var(--z-warm) 45%, transparent);
}

.z-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

:where(.z-btn, .z-link, .z-card, .z-cat, .z-prod a, .z-rail > *):focus-visible {
	outline: 3px solid var(--z-signal);
	outline-offset: 3px;
	border-radius: var(--z-r-sm);
}

/* ---------- layout primitives ---------- */

.z-grid {
	display: grid;
	gap: clamp(14px, 1.8vw, 22px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.z-grid > * {
	min-width: 0;
}

.z-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.z-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.z-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.z-split {
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.z-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.z-split--wide-end {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	}
}

.z-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	background: var(--z-glass);
	box-shadow: var(--z-shadow);
	overflow: hidden;
	transition: border-color .22s var(--z-ease), transform .22s var(--z-ease);
}

.z-card:hover {
	border-color: var(--z-line-2);
	transform: translateY(-2px);
}

/* Light sweep tracks the pointer; the vars are set by flow.js on hover only. */
.z-card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(340px circle at var(--z-mx, 50%) var(--z-my, 0%), color-mix(in srgb, var(--z-signal) 13%, transparent), transparent 65%);
	transition: opacity .3s var(--z-ease);
}

.z-card:hover::after {
	opacity: 1;
}

.z-card__icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	border: 1px solid var(--z-line);
	background: var(--z-raise);
	color: var(--z-signal);
	flex: none;
}

.z-card__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.z-card p {
	margin: 0;
	color: var(--z-dim);
	font-size: .96rem;
	line-height: 1.6;
}

.z-card--pad-lg {
	padding: clamp(26px, 3.2vw, 40px);
}

/* ---------- flow choreography ---------- */

/* Class-based, not data-attribute based: the block editor strips unknown
   attributes from core blocks on re-save, but className survives. Hidden state
   applies only once JS has claimed the document, so a failed or blocked script
   leaves every section readable instead of blank. */
.z-js .z-f {
	opacity: 0;
	will-change: opacity, transform;
}

.z-f {
	transition:
		opacity var(--z-dur) var(--z-ease-out),
		transform var(--z-dur) var(--z-ease-out),
		filter var(--z-dur) var(--z-ease-out),
		clip-path var(--z-dur) var(--z-ease-out);
	transition-delay: calc(var(--z-i, 0) * var(--z-stagger));
}

.z-js .z-f--up { transform: translate3d(0, 30px, 0); }
.z-js .z-f--rise { transform: translate3d(0, 64px, 0) scale(.972); }
.z-js .z-f--left { transform: translate3d(-32px, 0, 0); }
.z-js .z-f--right { transform: translate3d(32px, 0, 0); }
.z-js .z-f--scale { transform: scale(.93); }
.z-js .z-f--blur { filter: blur(16px); transform: translate3d(0, 20px, 0); }
.z-js .z-f--mask { clip-path: inset(0 0 101% 0); }
.z-js .z-f--wipe { clip-path: inset(0 101% 0 0); }

.z-f.z-vis {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: none;
	will-change: auto;
}

/* Only the wipe variants keep a clip once revealed; a blanket inset(0) would
   crop badges and rings that sit outside the element's own box. */
.z-f--mask.z-vis,
.z-f--wipe.z-vis {
	clip-path: inset(0 0 0 0);
}

/* Scroll-linked depth: flow.js writes --z-p (0 at entry, 1 at exit). */
.z-par {
	transform: translate3d(0, calc((var(--z-p, .5) - .5) * -64px), 0);
}

.z-par--soft {
	transform: translate3d(0, calc((var(--z-p, .5) - .5) * -30px), 0);
}

.z-par--deep {
	transform: translate3d(0, calc((var(--z-p, .5) - .5) * -120px), 0);
}

.z-scale-p {
	transform: scale(calc(1 + (1 - var(--z-p, 1)) * .06));
}

.z-bar {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--z-line);
	overflow: hidden;
}

.z-bar::after {
	content: "";
	display: block;
	height: 100%;
	width: calc(var(--z-p, 0) * 100%);
	background: var(--z-signal);
}

/* ---------- sequence (pinned scrollytelling) ---------- */

.z-seq {
	display: grid;
	gap: clamp(20px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	.z-seq {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		align-items: start;
	}
}

.z-seq__stage {
	position: sticky;
	top: calc(var(--chrome-h, 72px) + 16px);
	z-index: 1;
	display: grid;
	place-items: center;
	min-height: 240px;
	height: clamp(196px, 34vh, 286px);
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--z-signal) 12%, transparent), transparent 62%),
		var(--z-raise);
	box-shadow: var(--z-shadow);
	overflow: hidden;
}

@media (min-width: 1000px) {
	.z-seq__stage {
		height: min(56vh, 460px);
		order: 2;
	}
}

.z-seq__frame {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: clamp(18px, 3vw, 40px);
	text-align: center;
	opacity: 0;
	transform: scale(.96);
	transition: opacity .55s var(--z-ease-out), transform .55s var(--z-ease-out);
	pointer-events: none;
}

.z-seq__frame.z-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.z-seq__frame img {
	max-width: 100%;
	height: auto;
	border-radius: var(--z-r);
	display: block;
}

.z-seq__figure {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(2.6rem, 7vw, 4.6rem);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--z-signal);
}

.z-seq__caption {
	margin: 10px 0 0;
	color: var(--z-dim);
	font-size: .95rem;
}

.z-seq__steps {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Each step needs real scroll distance or the pinned stage flicks through every
   frame in one thumb swipe; phones get it too, just shorter. */
.z-seq__step {
	min-height: 46vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 1000px) {
	.z-seq__steps {
		order: 1;
	}

	.z-seq__step {
		min-height: 62vh;
	}
}

.z-seq__step {
	position: relative;
	padding: clamp(18px, 2.4vw, 26px) 0 clamp(18px, 2.4vw, 26px) 26px;
	border-inline-start: 2px solid var(--z-line);
	transition: border-color .4s var(--z-ease), opacity .4s var(--z-ease);
}

.z-seq__step[data-on="0"] {
	opacity: .45;
}

.z-seq__step[data-on="1"] {
	opacity: 1;
	border-inline-start-color: var(--z-signal);
}

.z-seq__step::before {
	content: "";
	position: absolute;
	inset-inline-start: -7px;
	top: calc(clamp(18px, 2.4vw, 26px) + 6px);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--z-void);
	border: 2px solid var(--z-line-2);
	transition: border-color .4s var(--z-ease), box-shadow .4s var(--z-ease);
}

@media (min-width: 1000px) {
	.z-seq__step::before {
		top: calc(50% - 6px);
	}
}

.z-seq__step[data-on="1"]::before {
	border-color: var(--z-signal);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--z-signal) 22%, transparent);
}

.z-seq__idx {
	display: block;
	margin-bottom: 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--z-faint);
}

/* ---------- category rail ---------- */

.z-cats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(132px, 1fr);
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--z-gut);
	margin-inline: calc(var(--z-gut) * -1);
	padding: 4px var(--z-gut) 14px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.z-cats::-webkit-scrollbar {
	display: none;
}

@media (min-width: 980px) {
	.z-cats {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

.z-cat {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	min-width: 0;
	padding: 18px 10px 14px;
	border: 1px solid var(--z-line);
	border-radius: var(--z-r);
	background: var(--z-glass);
	color: var(--z-text);
	text-decoration: none;
	text-align: center;
	font-size: .85rem;
	font-weight: 650;
	line-height: 1.25;
	transition: border-color .2s var(--z-ease), transform .2s var(--z-ease), color .2s var(--z-ease);
}

.z-cat:hover {
	border-color: var(--z-signal);
	transform: translateY(-2px);
}

.z-cat svg {
	width: 30px;
	height: 30px;
	display: block;
	color: var(--z-signal);
}

.z-cat__n {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	color: var(--z-faint);
}

/* ---------- product cards ---------- */

.z-prod {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	background: var(--z-glass);
	overflow: hidden;
	transition: border-color .22s var(--z-ease), transform .22s var(--z-ease), box-shadow .22s var(--z-ease);
}

.z-prod:hover {
	border-color: var(--z-line-2);
	transform: translateY(-3px);
	box-shadow: var(--z-shadow);
}

.z-prod__media {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	background:
		radial-gradient(110% 90% at 50% 8%, color-mix(in srgb, var(--z-signal) 14%, transparent), transparent 60%),
		var(--z-raise);
	border-bottom: 1px solid var(--z-line);
	overflow: hidden;
}

.z-prod__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--z-ease);
}

.z-prod:hover .z-prod__media img {
	transform: scale(1.04);
}

.z-prod__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--z-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--z-line) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
	mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
	opacity: .7;
}

/* Placeholder is art-directed rather than absent, so a catalog with no photos
   yet still looks finished. */
.z-prod__ph {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(84px, 44%, 124px);
	aspect-ratio: 1;
	border: 1px solid var(--z-line);
	border-radius: 20px;
	background: var(--z-glass);
	box-shadow: var(--z-shadow);
	color: var(--z-dim);
}

.z-prod__ph svg {
	width: 46%;
	height: 46%;
	display: block;
}

.z-prod__flag {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	padding: 5px 10px;
	border-radius: 100px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--z-warm);
	color: #1b1200;
}

.z-prod__flag--signal {
	background: var(--z-signal);
	color: var(--z-signal-ink);
}

.z-prod__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 18px 18px 20px;
}

.z-prod__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.25;
}

.z-prod__title a {
	color: inherit;
	text-decoration: none;
}

.z-prod__desc {
	margin: 0;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--z-dim);
}

.z-prod__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
}

.z-prod__spec {
	padding: 4px 9px;
	border: 1px solid var(--z-line);
	border-radius: 7px;
	font-size: .72rem;
	font-weight: 600;
	color: var(--z-dim);
	white-space: nowrap;
}

.z-prod__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	margin-top: 4px;
	border-top: 1px solid var(--z-line);
}

.z-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.24rem;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.z-price s {
	font-size: .82rem;
	font-weight: 500;
	color: var(--z-faint);
	text-decoration-thickness: 1px;
}

.z-price__unit {
	font-size: .74rem;
	font-weight: 600;
	color: var(--z-faint);
	letter-spacing: 0;
}

/* ---------- spotlight ---------- */

.z-spot {
	position: relative;
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(26px, 4vw, 56px);
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	background:
		radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--z-signal) 12%, transparent), transparent 58%),
		var(--z-glass);
	box-shadow: var(--z-shadow);
	overflow: hidden;
}

@media (min-width: 900px) {
	.z-spot {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}

	.z-spot--flip .z-spot__media {
		order: -1;
	}
}

.z-spot__media {
	position: relative;
	min-width: 0;
	aspect-ratio: 5 / 4;
	border: 1px solid var(--z-line);
	border-radius: var(--z-r);
	background: var(--z-raise);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.z-spot__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--z-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--z-line) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
	mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
	opacity: .7;
}

.z-spot__media > * {
	position: relative;
}

.z-spot__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.z-specrows {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	border-top: 1px solid var(--z-line);
}

.z-specrows li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--z-line);
	font-size: .92rem;
}

.z-specrows dt,
.z-specrows .z-k {
	color: var(--z-dim);
}

.z-specrows .z-v {
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* ---------- compare ---------- */

.z-cmp-wrap {
	position: relative;
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	background: var(--z-glass);
	overflow: hidden;
}

.z-cmp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.z-cmp {
	width: 100%;
	min-width: 620px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .92rem;
}

.z-cmp th,
.z-cmp td {
	padding: 14px 16px;
	text-align: start;
	border-bottom: 1px solid var(--z-line);
	vertical-align: middle;
}

.z-cmp thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--z-raise);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
}

/* First column stays put so a spec row keeps its label while scrolling wide
   tables on a phone. */
.z-cmp th:first-child,
.z-cmp td:first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 2;
	background: var(--z-surface);
	color: var(--z-dim);
	font-weight: 600;
	border-inline-end: 1px solid var(--z-line);
}

.z-cmp thead th:first-child {
	z-index: 4;
}

.z-cmp tbody tr:last-child th,
.z-cmp tbody tr:last-child td {
	border-bottom: 0;
}

.z-cmp td .z-num,
.z-cmp td {
	font-variant-numeric: tabular-nums;
}

.z-cmp .z-yes {
	color: var(--z-signal);
	font-weight: 700;
}

.z-cmp .z-no {
	color: var(--z-faint);
}

.z-cmp__hint {
	display: block;
	padding: 10px 16px;
	font-size: .78rem;
	color: var(--z-faint);
	border-top: 1px solid var(--z-line);
}

@media (min-width: 760px) {
	.z-cmp__hint {
		display: none;
	}
}

/* ---------- metrics ---------- */

.z-metrics {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
	background: var(--z-line);
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	overflow: hidden;
}

.z-metric {
	min-width: 0;
	padding: clamp(20px, 2.6vw, 32px);
	background: var(--z-void);
}

.z-metric__n {
	display: block;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--z-text);
}

.z-metric__l {
	display: block;
	margin-top: 10px;
	font-size: .85rem;
	line-height: 1.45;
	color: var(--z-dim);
}

/* ---------- trust wall ---------- */

.z-trust {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr));
	background: var(--z-line);
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	overflow: hidden;
}

.z-trust__cell {
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 92px;
	padding: 18px;
	background: var(--z-void);
	color: var(--z-dim);
	font-weight: 700;
	font-size: .92rem;
	letter-spacing: .04em;
	text-align: center;
	transition: color .3s var(--z-ease), background .3s var(--z-ease);
}

.z-trust__cell:hover {
	color: var(--z-text);
	background: var(--z-raise);
}

/* ---------- pricing ---------- */

.z-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	background: var(--z-glass);
}

.z-tier--lead {
	border-color: color-mix(in srgb, var(--z-signal) 55%, transparent);
	box-shadow: var(--z-glow);
}

.z-tier p {
	margin: 0;
}

.z-tier__tag {
	position: absolute;
	z-index: 3;
	line-height: 1.5;
	top: -13px;
	inset-inline-start: clamp(24px, 3vw, 34px);
	padding: 4px 12px;
	border-radius: 100px;
	background: var(--z-signal);
	color: var(--z-signal-ink);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.z-tier__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(2.1rem, 3.4vw, 2.8rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.z-tier__per {
	font-size: .82rem;
	font-weight: 600;
	color: var(--z-faint);
	letter-spacing: 0;
}

.z-feat {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: .92rem;
	color: var(--z-dim);
}

.z-feat li {
	position: relative;
	padding-inline-start: 28px;
	line-height: 1.5;
}

.z-feat li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--z-signal) 45%, transparent);
	background: color-mix(in srgb, var(--z-signal) 16%, transparent);
}

.z-feat li::after {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	top: 5.5px;
	width: 4px;
	height: 8px;
	border-inline-end: 2px solid var(--z-signal);
	border-block-end: 2px solid var(--z-signal);
	transform: rotate(45deg);
}

.z-tier .z-btn {
	margin-top: auto;
}

/* ---------- process ---------- */

.z-steps {
	counter-reset: zstep;
	display: grid;
	gap: clamp(14px, 2vw, 20px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.z-step {
	position: relative;
	min-width: 0;
	padding: clamp(22px, 2.6vw, 30px);
	border: 1px solid var(--z-line);
	border-radius: var(--z-r-lg);
	background: var(--z-glass);
}

.z-step::before {
	counter-increment: zstep;
	content: counter(zstep, decimal-leading-zero);
	display: block;
	margin-bottom: 14px;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--z-signal);
}

/* ---------- quote / proof ---------- */

.z-quote {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.z-quote blockquote {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.35rem, 3vw, 2.2rem);
	line-height: 1.28;
	letter-spacing: -.02em;
	font-weight: 600;
	text-wrap: balance;
}

.z-quote figcaption {
	margin-top: 20px;
	font-size: .9rem;
	color: var(--z-dim);
}

/* Neutralises the core quote block's own border/indent so the pull quote keeps
   the ZI2 scale instead of inheriting two competing treatments. */
.z-quote .wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
}

.z-quote blockquote p {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
}

.z-quote cite {
	display: block;
	margin-top: 22px;
	font-size: .9rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--z-dim);
}

/* ---------- sticky action bar ---------- */

.z-buybar {
	position: sticky;
	bottom: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px var(--z-gut) calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--z-line);
	background: color-mix(in srgb, var(--z-surface) 86%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
}

.z-buybar__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.z-buybar__name {
	font-weight: 700;
	font-size: .95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.z-buybar__meta {
	font-size: .78rem;
	color: var(--z-faint);
}

.z-buybar__act {
	display: flex;
	gap: 10px;
	flex: none;
}

@media (max-width: 520px) {
	.z-buybar__act {
		width: 100%;
	}

	.z-buybar__act .z-btn {
		flex: 1;
	}
}

/* ---------- marquee skin ---------- */

/* Rides the theme's existing .marquee engine (app.js clones the track); this
   only restyles it, so there is one scroller implementation. */
.marquee.z-marq {
	border-block-color: var(--z-line);
	background: var(--z-void);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee.z-marq span,
.marquee.z-marq p {
	font-size: clamp(1.05rem, 2vw, 1.45rem);
	color: var(--z-dim);
	opacity: .75;
}

.marquee.z-marq b,
.marquee.z-marq strong {
	color: var(--z-signal);
}

.marquee.z-marq:hover .track {
	animation-play-state: paused;
}

/* ---------- faq ---------- */

.z-faq {
	border-top: 1px solid var(--z-line);
}

.z-faq details {
	border-bottom: 1px solid var(--z-line);
}

.z-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	font-weight: 650;
	letter-spacing: -.01em;
}

.z-faq summary::-webkit-details-marker {
	display: none;
}

.z-faq summary::after {
	content: "";
	flex: none;
	width: 13px;
	height: 13px;
	border-inline-end: 2px solid var(--z-signal);
	border-block-end: 2px solid var(--z-signal);
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform .28s var(--z-ease);
}

.z-faq details[open] summary::after {
	transform: rotate(225deg) translate(-3px, -3px);
}

.z-faq p {
	margin: 0 0 22px;
	max-width: 72ch;
	color: var(--z-dim);
	line-height: 1.65;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.z-js .z-f,
	.z-f {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.z-par,
	.z-par--soft,
	.z-par--deep,
	.z-scale-p {
		transform: none !important;
	}

	.z-marq__t {
		animation: none;
	}

	.z-seq__frame {
		transition: none;
	}
}

/* Mirrors the theme's own accessibility switch, which users can set even when
   the OS reports no motion preference. */
html[data-a11y-motion="reduce"] .z-f {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
	transition: none !important;
}

html[data-a11y-motion="reduce"] .z-par,
html[data-a11y-motion="reduce"] .z-par--soft,
html[data-a11y-motion="reduce"] .z-par--deep,
html[data-a11y-motion="reduce"] .z-scale-p {
	transform: none !important;
}

html[data-a11y-motion="reduce"] .z-marq__t {
	animation: none;
}

@media print {
	.z-sec {
		padding-block: 18px;
	}

	.z-f {
		opacity: 1 !important;
		transform: none !important;
	}

	.z-buybar {
		display: none;
	}
}