/* =========================================================================
   Zlaark Deals - frontend styles & motion system
   Colours, spacing and motion toggles are all overridable from the Elementor
   Style tab; these rules provide structure plus the animation layer.
   ========================================================================= */

@property --zd-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

/* -------------------------------------------------------------------------
   Widths inside the widgets are border-box. Without this, any `width: 100%`
   element that also has padding (a full-width button, an input) overflows
   its own column - the theme cannot be relied on to set it.
   ------------------------------------------------------------------------- */

.zd-hero,
.zd-hero *, 
.zd-hero *::before,
.zd-hero *::after,
.zd-hc,
.zd-hc *, 
.zd-hc *::before,
.zd-hc *::after,
.zd-hf,
.zd-hf *, 
.zd-hf *::before,
.zd-hf *::after,
.zd-bento,
.zd-bento *, 
.zd-bento *::before,
.zd-bento *::after,
.zd-nav,
.zd-nav *, 
.zd-nav *::before,
.zd-nav *::after,
.zd-about,
.zd-about *, 
.zd-about *::before,
.zd-about *::after,
.zd-deals,
.zd-deals *, 
.zd-deals *::before,
.zd-deals *::after,
.zd-picks,
.zd-picks *, 
.zd-picks *::before,
.zd-picks *::after,
.zd-compare,
.zd-compare *, 
.zd-compare *::before,
.zd-compare *::after,
.zd-stats,
.zd-stats *, 
.zd-stats *::before,
.zd-stats *::after,
.zd-marquee,
.zd-marquee *, 
.zd-marquee *::before,
.zd-marquee *::after,
.zd-index,
.zd-index *, 
.zd-index *::before,
.zd-index *::after,
.zd-panel,
.zd-panel *, 
.zd-panel *::before,
.zd-panel *::after,
.zd-home,
.zd-home *, 
.zd-home *::before,
.zd-home *::after {
	box-sizing: border-box;
}

/* =========================================================================
   0. Design tokens - "Verified Green"
   Green means saved-and-verified, ember means expiring, ink is biased green
   rather than neutral grey. Every value below is measured against WCAG AA.
   ========================================================================= */

.zd-hero,
.zd-hc,
.zd-hf,
.zd-bento,
.zd-nav,
.zd-about,
.zd-deals,
.zd-picks,
.zd-compare,
.zd-stats,
.zd-marquee,
.zd-index,
.zd-panel,
.zd-home,
.zd-footer {
	/* Type - all three faces are SIL Open Font License (free, self-hostable). */
	--zd-font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--zd-font-display: 'Bricolage Grotesque', 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
	--zd-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

	/* Brand */
	--zd-accent: #0b7a4f;          /* 5.37:1 on white  */
	--zd-accent-2: #065f42;        /* 7.71:1 on white  */
	--zd-accent-lite: #5fd9a4;     /* dark grounds only */
	--zd-accent-tint: #e6f5ee;     /* ground only       */
	--zd-on-accent: #ffffff;

	/* Ember - urgency only, never more than ~5% of a screen */
	--zd-ember: #c2410c;           /* 5.18:1 on white  */
	--zd-ember-lite: #fdba74;
	--zd-ember-tint: #fff1e6;

	/* Ink - green-biased neutrals */
	--zd-ink: #0a1310;             /* 18.86:1 on white */
	--zd-heading: #101a16;
	--zd-body: #4a5a52;            /* 7.30:1 on white  */
	--zd-muted: #5e6c64;           /* 5.52:1 on white  */
	--zd-hairline: #dce3df;        /* non-text          */
	--zd-surface: #f4f7f5;
	--zd-track: #ebf0ed;

	/* Semantic score ramp - every rating colours itself by value */
	--zd-score-good: #0b7a4f;
	--zd-score-fair: #a16207;
	--zd-score-weak: #b91c1c;

	/* Shape - three radii, nothing else. 999px is the nav CTA alone. */
	--zd-r-sm: 8px;
	--zd-r-md: 16px;
	--zd-r-lg: 28px;

	/* Depth */
	--zd-shadow-rest: 0 1px 2px rgba(10, 19, 16, 0.05);
	--zd-shadow-hover: 0 12px 32px rgba(10, 19, 16, 0.10);

	/* Motion */
	--zd-lift: -4px;
	--zd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--zd-dur-in: 420ms;
	--zd-dur-hover: 180ms;
	--zd-ambient-speed: 18s;

	/* Layout */
	--zd-container: 1240px;

	font-family: var(--zd-font-sans);
	color: var(--zd-body);
}

.zd-hero,
.zd-deals,
.zd-picks,
.zd-compare,
.zd-stats,
.zd-marquee {
	perspective: 1400px;
}

/* -------------------------------------------------------------------------
   0b. Font-family, asserted hard enough to survive Elementor.

   Elementor's global typography ships as two-class selectors such as
   `.elementor-widget-heading .elementor-heading-title`, and several of the
   add-ons on this site ship their own resets. A single class on the widget
   root loses that fight, which is why every widget was rendering in the
   system UI stack. The root class is repeated to raise specificity rather
   than reaching for !important, so Style-tab overrides still win.
   ------------------------------------------------------------------------- */

.zd-hero.zd-hero *,
.zd-hc.zd-hc *,
.zd-hf.zd-hf *,
.zd-bento.zd-bento *,
.zd-nav.zd-nav *,
.zd-about.zd-about *,
.zd-deals.zd-deals *,
.zd-picks.zd-picks *,
.zd-compare.zd-compare *,
.zd-stats.zd-stats *,
.zd-marquee.zd-marquee *,
.zd-index.zd-index *,
.zd-panel.zd-panel *,
.zd-home.zd-home *,
.zd-footer.zd-footer *,
.zd-single.zd-single *,
.zd-card.zd-card *,
.zd-board.zd-board * {
	font-family: var(--zd-font-sans);
}

.zd-hero.zd-hero :is(h1, h2, h3, h4, h5, h6),
.zd-hc.zd-hc :is(h1, h2, h3, h4, h5, h6),
.zd-hf.zd-hf :is(h1, h2, h3, h4, h5, h6),
.zd-bento.zd-bento :is(h1, h2, h3, h4, h5, h6),
.zd-nav.zd-nav :is(h1, h2, h3, h4, h5, h6),
.zd-about.zd-about :is(h1, h2, h3, h4, h5, h6),
.zd-deals.zd-deals :is(h1, h2, h3, h4, h5, h6),
.zd-picks.zd-picks :is(h1, h2, h3, h4, h5, h6),
.zd-compare.zd-compare :is(h1, h2, h3, h4, h5, h6),
.zd-stats.zd-stats :is(h1, h2, h3, h4, h5, h6),
.zd-marquee.zd-marquee :is(h1, h2, h3, h4, h5, h6),
.zd-index.zd-index :is(h1, h2, h3, h4, h5, h6),
.zd-panel.zd-panel :is(h1, h2, h3, h4, h5, h6),
.zd-home.zd-home :is(h1, h2, h3, h4, h5, h6),
.zd-footer.zd-footer :is(h1, h2, h3, h4, h5, h6),
.zd-single.zd-single :is(h1, h2, h3, h4, h5, h6),
.zd-card.zd-card :is(h1, h2, h3, h4, h5, h6),
.zd-board.zd-board :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--zd-font-display);
	color: var(--zd-heading);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.zd-hero.zd-hero :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-hc.zd-hc :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-hf.zd-hf :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-bento.zd-bento :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-nav.zd-nav :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-about.zd-about :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-deals.zd-deals :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-picks.zd-picks :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-compare.zd-compare :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-stats.zd-stats :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-marquee.zd-marquee :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-index.zd-index :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-panel.zd-panel :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-home.zd-home :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-footer.zd-footer :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-single.zd-single :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-card.zd-card :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono),
.zd-board.zd-board :is([class*="__price"], [class*="__score"], [class*="__rating"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__stat-value"], .zd-mono) {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   1. Scroll-reveal engine
   `translate`/`scale`/`rotate` are used instead of `transform` so the
   hover-tilt transform stays free for the cursor to drive.
   ========================================================================= */

.zd-reveal {
	transition:
		opacity 0.75s var(--zd-ease),
		translate 0.75s var(--zd-ease),
		scale 0.75s var(--zd-ease),
		rotate 0.75s var(--zd-ease);
	transition-delay: var(--zd-delay, 0ms);
	will-change: opacity, translate;
}

.zd-reveal[data-zd-reveal="rise"]  { translate: 0 30px; }
.zd-reveal[data-zd-reveal="fade"]  { translate: 0 0; }
.zd-reveal[data-zd-reveal="zoom"]  { scale: 0.92; }
.zd-reveal[data-zd-reveal="slide"] { translate: -40px 0; }
.zd-reveal[data-zd-reveal="flip"]  { translate: 0 24px; rotate: x 16deg; }
.zd-reveal[data-zd-reveal="none"]  { opacity: 1; }

.zd-reveal.is-in {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	rotate: none;
	will-change: auto;
}

/* =========================================================================
   2. Shared atoms - buttons, ticks, rating rings, score bars, empty state
   ========================================================================= */

.zd-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border: 2px solid transparent;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.35s var(--zd-ease), box-shadow 0.35s var(--zd-ease),
		background-color 0.3s ease, color 0.3s ease;
}

.zd-btn--solid {
	background-color: var(--zd-accent);
	color: var(--zd-on-accent);
}

.zd-btn--ghost {
	background-color: transparent;
	border-color: var(--zd-ink);
	color: var(--zd-ink);
}

/* Gradient wash that wipes in from the left on hover. */
.zd-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, var(--zd-accent), var(--zd-accent-2));
	opacity: 0;
	transform: translateX(-100%);
	transition: transform 0.5s var(--zd-ease), opacity 0.3s ease;
	z-index: 0;
}

.zd-btn:hover::before {
	opacity: 1;
	transform: translateX(0);
}

.zd-btn:hover {
	color: #fff;
	box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--zd-accent) 70%, transparent);
}

.zd-btn__label,
.zd-btn__arrow {
	position: relative;
	z-index: 1;
}

.zd-btn__arrow {
	display: inline-flex;
	transform: translateX(-3px);
	opacity: 0.65;
	transition: transform 0.35s var(--zd-ease), opacity 0.35s ease;
}

.zd-btn:hover .zd-btn__arrow {
	transform: translateX(2px);
	opacity: 1;
}

.zd-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--zd-accent), var(--zd-accent-2));
	color: #fff;
	box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--zd-accent) 65%, transparent);
}

/* --- animated rating ring ------------------------------------------------ */

.zd-ring {
	position: relative;
	width: var(--zd-ring-size, 62px);
	height: var(--zd-ring-size, 62px);
	flex: 0 0 auto;
}

.zd-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.zd-ring circle {
	fill: none;
	stroke-width: 5;
	stroke-linecap: round;
}

.zd-ring__track {
	stroke: var(--zd-track);
}

.zd-ring__bar {
	stroke: var(--zd-accent);
	stroke-dasharray: var(--zd-ring-circ, 163);
	stroke-dashoffset: var(--zd-ring-circ, 163);
	transition: stroke-dashoffset 1.4s var(--zd-ease) var(--zd-delay, 0ms);
	filter: drop-shadow(0 0 5px color-mix(in srgb, var(--zd-accent) 55%, transparent));
}

.zd-ring.is-in .zd-ring__bar {
	stroke-dashoffset: var(--zd-ring-target, 0);
}

.zd-ring__value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--zd-ring-size, 62px) * 0.29);
	font-weight: 800;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

/* --- score bars ---------------------------------------------------------- */

.zd-scores {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zd-score__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
}

.zd-score__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--zd-muted);
}

.zd-score__value {
	font-size: 14px;
	font-weight: 800;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

.zd-score__track {
	display: block;
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: var(--zd-track);
	overflow: hidden;
}

.zd-score__bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--zd-accent), var(--zd-accent-2));
	transition: width 1.2s var(--zd-ease);
	transition-delay: calc(var(--zd-i, 0) * 110ms);
}

/* Light travelling down the filled portion of each bar. */
.zd-score__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: translateX(-100%);
	animation: zd-bar-sheen 2.6s ease-in-out infinite;
	animation-delay: 1.2s;
}

@keyframes zd-bar-sheen {
	0%, 55% { transform: translateX(-100%); }
	85%, 100% { transform: translateX(220%); }
}

.zd-empty {
	padding: 22px;
	border: 1px dashed #dce3df;
	border-radius: 12px;
	color: #5e6c64;
	font-size: 14px;
	text-align: center;
}

/* =========================================================================
   3. Card motion - tilt, shine sweep, rotating border glow
   ========================================================================= */

.zd-card,
.zd-pick {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.45s var(--zd-ease), box-shadow 0.45s var(--zd-ease);
}

.zd-tilt {
	transform: perspective(1000px)
		rotateX(var(--zd-rx, 0deg))
		rotateY(var(--zd-ry, 0deg))
		translateY(var(--zd-ty, 0px));
}

.zd-tilt.is-hover {
	--zd-ty: var(--zd-lift);
	transition-duration: 0.15s;
}

.zd-card__shine {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
	z-index: 3;
}

.zd-card__shine::before {
	content: "";
	position: absolute;
	top: -60%;
	left: -80%;
	width: 55%;
	height: 220%;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255, 255, 255, 0.55),
		transparent
	);
	transform: rotate(14deg) translateX(0);
	opacity: 0;
	transition: transform 0.85s var(--zd-ease), opacity 0.3s ease;
}

.zd-shine:hover .zd-card__shine::before {
	opacity: 1;
	transform: rotate(14deg) translateX(380%);
}

/* Conic gradient that rotates around the card edge on hover. */
.zd-card__glow,
.zd-pick__glow {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(
		from var(--zd-angle),
		transparent 0deg 150deg,
		var(--zd-accent) 230deg,
		var(--zd-accent-2) 300deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	z-index: 2;
}

/*
 * The rotating conic ring was an outer glow, and a spinning one at that. A
 * card that is being pointed at should get firmer, not luminous: the border
 * darkens to the brand and the resting shadow deepens. Same affordance, no
 * neon.
 */
.zd-glow:hover .zd-card__glow,
.zd-glow:hover .zd-pick__glow {
	opacity: 0;
}

.zd-glow:hover {
	border-color: var(--zd-accent);
	box-shadow: var(--zd-shadow-hover);
}

@keyframes zd-spin-angle {
	to { --zd-angle: 360deg; }
}

/* =========================================================================
   4. Hero
   ========================================================================= */

.zd-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, #ffffff 0%, #f4f7f5 100%);
}

.zd-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 64px;
	max-width: 1480px;
	margin: 0 auto;
}

.zd-hero__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.zd-hero__media {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.zd-hero__media img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 30px 70px -30px rgba(10, 19, 16, 0.45);
}

.zd-hero--image-left .zd-hero__inner { flex-direction: row-reverse; }

.zd-hero--centered .zd-hero__inner {
	flex-direction: column;
	text-align: center;
}

.zd-hero--centered .zd-hero__content {
	width: 100%;
	align-items: center;
}

.zd-hero--centered .zd-hero__media { width: 100%; }
.zd-hero--text-only .zd-hero__inner { max-width: 820px; }

/* --- ambient background layers ------------------------------------------ */

.zd-hero__aurora {
	position: absolute;
	inset: -20%;
	z-index: 0;
	filter: blur(70px);
	opacity: 0.42;
	pointer-events: none;
}

.zd-hero__bloom {
	position: absolute;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	mix-blend-mode: multiply;
}

.zd-hero__bloom--1 {
	top: 4%;
	left: 2%;
	background: radial-gradient(circle, color-mix(in srgb, var(--zd-accent) 55%, transparent), transparent 70%);
	animation: zd-drift-a var(--zd-ambient-speed) ease-in-out infinite alternate;
}

.zd-hero__bloom--2 {
	bottom: 0%;
	right: 6%;
	background: radial-gradient(circle, color-mix(in srgb, var(--zd-accent-2) 50%, transparent), transparent 70%);
	animation: zd-drift-b calc(var(--zd-ambient-speed) * 1.3) ease-in-out infinite alternate;
}

.zd-hero__bloom--3 {
	top: 30%;
	left: 45%;
	width: 34%;
	background: radial-gradient(circle, color-mix(in srgb, var(--zd-accent-lite) 40%, transparent), transparent 70%);
	animation: zd-drift-c calc(var(--zd-ambient-speed) * 0.8) ease-in-out infinite alternate;
}

@keyframes zd-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(14%, 12%, 0) scale(1.18); }
}

@keyframes zd-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.1); }
	to   { transform: translate3d(-16%, -10%, 0) scale(0.9); }
}

@keyframes zd-drift-c {
	from { transform: translate3d(-8%, 6%, 0) scale(0.85); }
	to   { transform: translate3d(10%, -8%, 0) scale(1.25); }
}

.zd-hero__grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(to right, rgba(10, 19, 16, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(10, 19, 16, 0.055) 1px, transparent 1px);
	background-size: 62px 62px;
	mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 20%, transparent 78%);
	animation: zd-grid-pan calc(var(--zd-ambient-speed) * 2) linear infinite;
	pointer-events: none;
}

@keyframes zd-grid-pan {
	to { background-position: 62px 62px; }
}

.zd-hero__orbs {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.zd-hero__orb {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--zd-accent), var(--zd-accent-2));
	opacity: 0.16;
	animation: zd-float var(--zd-ambient-speed) ease-in-out infinite alternate;
}

.zd-hero__orb--1 { width: 14px; height: 14px; top: 18%; left: 8%;  animation-duration: calc(var(--zd-ambient-speed) * 0.7); }
.zd-hero__orb--2 { width: 26px; height: 26px; top: 68%; left: 16%; animation-duration: calc(var(--zd-ambient-speed) * 1.1); }
.zd-hero__orb--3 { width: 10px; height: 10px; top: 34%; right: 22%; animation-duration: calc(var(--zd-ambient-speed) * 0.9); }
.zd-hero__orb--4 { width: 34px; height: 34px; top: 12%; right: 10%; animation-duration: calc(var(--zd-ambient-speed) * 1.4); }
.zd-hero__orb--5 { width: 18px; height: 18px; bottom: 12%; right: 32%; animation-duration: calc(var(--zd-ambient-speed) * 1.2); }

@keyframes zd-float {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	to   { transform: translate3d(18px, -34px, 0) rotate(180deg); }
}

/* --- hero content -------------------------------------------------------- */

.zd-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-family: var(--zd-font-sans);
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--zd-muted);
}

.zd-hero__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--zd-accent);
	flex: 0 0 auto;
}

.zd-hero__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: zd-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes zd-ping {
	0%   { transform: scale(1); opacity: 0.75; }
	80%, 100% { transform: scale(2.8); opacity: 0; }
}

.zd-hero__title {
	margin: 0 0 18px;
	font-size: clamp(34px, 5.2vw, 60px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--zd-ink);
}

/* Per-word mask reveal. */
.zd-word {
	display: inline-block;
	overflow: hidden;
	/* Tall enough to clear descenders (y, g, p, q, j) on bold display type -
	   too little here clips letters like the "y" in "pay" mid-animation. */
	padding-bottom: 0.32em;
	margin-bottom: -0.32em;
	vertical-align: bottom;
}

.zd-word > span {
	display: inline-block;
	translate: 0 105%;
	rotate: 4deg;
	opacity: 0;
	transition:
		translate 0.85s var(--zd-ease),
		rotate 0.85s var(--zd-ease),
		opacity 0.6s ease;
	transition-delay: calc(var(--zd-i, 0) * 75ms);
}

.is-in .zd-word > span {
	translate: 0 0;
	rotate: 0deg;
	opacity: 1;
}

.zd-word--accent > span {
	color: var(--zd-accent-2);
}

@keyframes zd-gradient-pan {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

/* Underline that draws itself once the title lands. */
.zd-word--accent {
	position: relative;
}

/* The underline only draws when the widget's "Highlight Underline" control
   adds .zd-word--underline - the gradient text fill above works either way. */
.zd-word--accent.zd-word--underline::after {
	content: "";
	position: absolute;
	left: 2%;
	bottom: 0.22em;
	width: 96%;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--zd-accent), var(--zd-accent-2));
	box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--zd-accent) 55%, transparent);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.9s var(--zd-ease) 0.55s;
}

.is-in .zd-word--accent.zd-word--underline::after {
	transform: scaleX(1);
}

.zd-hero__desc {
	margin: 0 0 30px;
	font-size: 17px;
	line-height: 1.65;
	color: #4a5a52;
}

.zd-hero__desc p:last-child { margin-bottom: 0; }

.zd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.zd-magnetic {
	transform: translate3d(var(--zd-mx, 0px), var(--zd-my, 0px), 0);
	transition: transform 0.35s var(--zd-ease), box-shadow 0.35s var(--zd-ease);
}

.zd-magnetic.is-hover { transition-duration: 0.12s; }

.zd-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(10, 19, 16, 0.08);
	width: 100%;
}

.zd-stat__value {
	margin: 0 0 4px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

.zd-stat__label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--zd-muted);
}

/* --- hero media ---------------------------------------------------------- */

.zd-hero__media--float img {
	animation: zd-bob 6.5s ease-in-out infinite;
}

@keyframes zd-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

.zd-parallax {
	transform: translate3d(var(--zd-px, 0px), var(--zd-py, 0px), 0);
	transition: transform 0.6s var(--zd-ease);
}

.zd-hero__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 118%;
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	z-index: 1;
	background: conic-gradient(
		from 0deg,
		transparent 0deg 140deg,
		color-mix(in srgb, var(--zd-accent) 70%, transparent) 210deg,
		color-mix(in srgb, var(--zd-accent-2) 70%, transparent) 280deg,
		transparent 360deg
	);
	-webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 63.5%, transparent 64.5%);
	mask: radial-gradient(circle, transparent 61%, #000 62%, #000 63.5%, transparent 64.5%);
	animation: zd-spin calc(var(--zd-ambient-speed) * 1.4) linear infinite;
	pointer-events: none;
}

.zd-hero__ring--inner {
	width: 92%;
	opacity: 0.55;
	animation-direction: reverse;
	animation-duration: var(--zd-ambient-speed);
}

@keyframes zd-spin {
	to { transform: rotate(360deg); }
}

.zd-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 22px;
	translate: -50% 0;
	width: 26px;
	height: 42px;
	border: 2px solid rgba(10, 19, 16, 0.22);
	border-radius: 999px;
	z-index: 2;
}

.zd-hero__cue-wheel {
	position: absolute;
	top: 8px;
	left: 50%;
	translate: -50% 0;
	width: 4px;
	height: 8px;
	border-radius: 4px;
	background: var(--zd-accent);
	animation: zd-cue 1.9s ease-in-out infinite;
}

@keyframes zd-cue {
	0%   { transform: translateY(0); opacity: 0; }
	25%  { opacity: 1; }
	75%  { transform: translateY(14px); opacity: 0; }
	100% { transform: translateY(14px); opacity: 0; }
}

/* =========================================================================
   5. Section heading + filter tabs
   ========================================================================= */

.zd-section__head { margin-bottom: 26px; }

.zd-section__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zd-muted);
}

.zd-section__bar {
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--zd-accent), var(--zd-accent-2));
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.7s var(--zd-ease) 0.15s;
}

.zd-reveal.is-in .zd-section__bar { transform: scaleX(1); }

.zd-section__sub {
	margin: 8px 0 0;
	font-size: 15px;
	color: #5e6c64;
}

.zd-tabs {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 22px;
	padding: 5px;
	border-radius: 999px;
	background: rgba(10, 19, 16, 0.045);
	width: fit-content;
	max-width: 100%;
}

.zd-tabs__indicator {
	position: absolute;
	top: 5px;
	left: 0;
	height: calc(100% - 10px);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 14px -6px rgba(10, 19, 16, 0.4);
	transition: transform 0.45s var(--zd-ease), width 0.45s var(--zd-ease);
	pointer-events: none;
	z-index: 0;
}

.zd-tabs__btn {
	position: relative;
	z-index: 1;
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 14px;
	font-weight: 700;
	color: var(--zd-muted);
	cursor: pointer;
	transition: color 0.3s ease;
}

.zd-tabs__btn.is-active { color: var(--zd-ink); }

/* =========================================================================
   6. Deals grid
   ========================================================================= */

.zd-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 24px;
}

.zd-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(10, 19, 16, 0.04), 0 10px 28px -14px rgba(10, 19, 16, 0.35);
	overflow: hidden;
}

.zd-card.is-filtered-out {
	display: none;
}

.zd-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 22px;
}

.zd-grid--stack .zd-card__inner {
	flex-direction: column;
	align-items: flex-start;
}

.zd-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	padding: 6px 14px;
	border-radius: 0 0 0 14px;
	background: linear-gradient(100deg, var(--zd-accent), var(--zd-accent-2));
	background-size: 200% 100%;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	animation: zd-gradient-pan 4.5s ease-in-out infinite;
}

.zd-card__media {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	padding: 11px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 6px 18px -8px rgba(10, 19, 16, 0.45);
	overflow: hidden;
	transition: transform 0.5s var(--zd-ease), box-shadow 0.5s var(--zd-ease);
}

.zd-card:hover .zd-card__media {
	transform: translateZ(30px) rotate(-4deg) scale(1.06);
	box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--zd-accent) 55%, transparent);
}

.zd-card__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.zd-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.zd-card__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--zd-ink);
}

.zd-card__tagline {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--zd-muted);
}

.zd-card__pricing {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
}

.zd-card__price {
	font-size: 25px;
	font-weight: 800;
	line-height: 1.2;
	color: #0b7a4f;
	font-variant-numeric: tabular-nums;
}

.zd-card__old-price {
	font-size: 16px;
	color: #5e6c64;
}

.zd-card__rating { flex: 0 0 auto; }

/* =========================================================================
   7. Top picks
   ========================================================================= */

.zd-picks__head {
	max-width: 720px;
	margin: 0 auto 34px;
	text-align: center;
}

.zd-picks__heading {
	margin: 0 0 10px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--zd-ink);
}

.zd-picks__sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--zd-muted);
}

.zd-picks__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
	padding-top: 22px;
}

.zd-pick {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px 22px 22px;
	background: #fff;
	border: 1px solid var(--zd-hairline);
	border-radius: var(--zd-r-lg);
	box-shadow: var(--zd-shadow-rest);
}

.zd-pick--featured {
	box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--zd-accent) 60%, transparent),
		0 2px 4px rgba(10, 19, 16, 0.05);
}

.zd-pick--featured::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(140deg, var(--zd-accent), var(--zd-accent-2));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

/* Medal that counter-rotates a gradient ring around the rank number. */
.zd-pick__medal {
	position: absolute;
	top: -16px;
	left: 22px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
}

.zd-pick__medal-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--zd-accent), var(--zd-accent-2), var(--zd-accent));
	animation: zd-spin 5.5s linear infinite;
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--zd-accent) 75%, transparent);
}

.zd-pick__medal-num {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	font-size: 15px;
	font-weight: 800;
	color: var(--zd-ink);
}

.zd-pick__head { position: relative; z-index: 1; }

.zd-pick__rank-label {
	margin: 0 0 12px;
	padding-left: 46px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zd-accent);
	min-height: 14px;
}

.zd-pick__media {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 54px;
	margin-bottom: 14px;
	transition: transform 0.5s var(--zd-ease);
}

.zd-pick:hover .zd-pick__media { transform: translateZ(26px) scale(1.05); }

.zd-pick__media img {
	max-height: 100%;
	width: auto;
	max-width: 70%;
	object-fit: contain;
}

.zd-pick__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	color: var(--zd-ink);
}

.zd-pick__tagline {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--zd-muted);
}

.zd-pick__score {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}

.zd-pick__score-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zd-muted);
}

.zd-pick__pricing {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
}

.zd-pick__price {
	font-size: 24px;
	font-weight: 800;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

.zd-pick__old-price {
	font-size: 15px;
	color: #5e6c64;
}

.zd-pick__list {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 14px;
	line-height: 1.45;
	color: #4a5a52;
}

.zd-pick__list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	opacity: 0;
	translate: 0 8px;
	transition: opacity 0.5s ease, translate 0.5s var(--zd-ease);
	transition-delay: calc(0.25s + var(--zd-i, 0) * 90ms);
}

.zd-pick.is-in .zd-pick__list li {
	opacity: 1;
	translate: 0 0;
}

.zd-pick__foot {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: 4px;
}

.zd-pick__foot .zd-btn {
	width: 100%;
	justify-content: center;
}

/* =========================================================================
   8. Comparison
   ========================================================================= */

.zd-compare__heading {
	margin: 0 0 26px;
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--zd-ink);
}

.zd-compare__grid {
	display: grid;
	gap: 20px;
}

.zd-compare--cards .zd-compare__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zd-compare--rows .zd-compare__grid {
	grid-template-columns: minmax(0, 1fr);
}

.zd-compare__col,
.zd-compare__row {
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 1px 2px rgba(10, 19, 16, 0.04), 0 12px 30px -18px rgba(10, 19, 16, 0.4);
	transition: transform 0.4s var(--zd-ease), box-shadow 0.4s var(--zd-ease);
}

.zd-compare__col:hover,
.zd-compare__row:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(10, 19, 16, 0.05), 0 22px 44px -22px color-mix(in srgb, var(--zd-accent) 65%, transparent);
}

.zd-compare__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.zd-compare__top {
	display: flex;
	align-items: center;
	gap: 14px;
}

.zd-compare__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--zd-surface);
	overflow: hidden;
	transition: transform 0.45s var(--zd-ease);
}

.zd-compare__col:hover .zd-compare__logo,
.zd-compare__row:hover .zd-compare__logo {
	transform: rotate(-6deg) scale(1.08);
}

.zd-compare__logo img {
	max-width: 74%;
	max-height: 74%;
	object-fit: contain;
}

.zd-compare__ident { flex: 1 1 auto; min-width: 0; }

.zd-compare__name {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--zd-ink);
}

.zd-compare__price,
.zd-compare__tagline {
	margin: 3px 0 0;
	font-size: 13px;
	color: var(--zd-muted);
}

.zd-compare__overall { flex: 0 0 auto; }

.zd-compare__foot { margin-top: auto; }

.zd-compare__col .zd-btn {
	width: 100%;
	justify-content: center;
}

/* rows variant */
.zd-compare__row {
	display: grid;
	grid-template-columns: auto auto minmax(160px, 1.1fr) minmax(220px, 2fr) auto auto;
	align-items: center;
	gap: 20px;
}

.zd-compare__rank {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--zd-accent), var(--zd-accent-2));
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

.zd-compare__bars .zd-scores { gap: 10px; }
.zd-compare__bars .zd-score__head { margin-bottom: 5px; }

/* =========================================================================
   9. Stats
   ========================================================================= */

.zd-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.zd-stat-card {
	position: relative;
	padding: 28px 24px;
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10, 19, 16, 0.04), 0 12px 30px -18px rgba(10, 19, 16, 0.4);
	transition: transform 0.45s var(--zd-ease), box-shadow 0.45s var(--zd-ease);
}

.zd-stat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 2px 5px rgba(10, 19, 16, 0.06), 0 24px 46px -24px color-mix(in srgb, var(--zd-accent) 70%, transparent);
}

.zd-stat-card__orbit {
	position: absolute;
	top: -46px;
	right: -46px;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg 200deg,
		color-mix(in srgb, var(--zd-accent) 60%, transparent) 280deg,
		color-mix(in srgb, var(--zd-accent-2) 60%, transparent) 330deg,
		transparent 360deg
	);
	-webkit-mask: radial-gradient(circle, transparent 66%, #000 67%);
	mask: radial-gradient(circle, transparent 66%, #000 67%);
	animation: zd-spin 9s linear infinite;
	opacity: 0.85;
	pointer-events: none;
}

.zd-stat-card__value {
	position: relative;
	margin: 0 0 8px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

.zd-stats--gradient .zd-stat-card__value {
	color: var(--zd-accent-2);
}

.zd-stat-card__label {
	position: relative;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #101a16;
}

.zd-stat-card__note {
	position: relative;
	margin: 5px 0 0;
	font-size: 13px;
	color: var(--zd-muted);
}

/* =========================================================================
   10. Logo marquee
   ========================================================================= */

.zd-marquee {
	--zd-marquee-speed: 32s;
	position: relative;
	overflow: hidden;
}

.zd-marquee__label {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: #5e6c64;
}

.zd-marquee__viewport {
	display: flex;
	width: 100%;
	overflow: hidden;
}

.zd-marquee--fade .zd-marquee__viewport {
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.zd-marquee__track {
	display: flex;
	align-items: center;
	gap: 56px;
	flex: 0 0 auto;
	padding-right: 56px;
	animation: zd-marquee var(--zd-marquee-speed) linear infinite;
}

.zd-marquee--right .zd-marquee__track {
	animation-direction: reverse;
}

@keyframes zd-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.zd-marquee--pause:hover .zd-marquee__track {
	animation-play-state: paused;
}

.zd-marquee__item {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	transition: transform 0.4s var(--zd-ease), filter 0.4s ease, opacity 0.4s ease;
}

.zd-marquee__item img {
	height: 40px;
	width: auto;
	max-width: none;
	object-fit: contain;
}

.zd-marquee--gray .zd-marquee__item {
	filter: grayscale(1);
	opacity: 0.55;
}

.zd-marquee--gray .zd-marquee__item:hover {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.12);
}

/* =========================================================================
   11. Responsive
   ========================================================================= */

@media (max-width: 1024px) {
	.zd-hero__inner { gap: 36px; }

	.zd-compare__row {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		row-gap: 16px;
	}

	.zd-compare__bars {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.zd-hero__inner,
	.zd-hero--image-left .zd-hero__inner {
		flex-direction: column;
		text-align: center;
	}

	.zd-hero__content { align-items: center; }
	.zd-hero__actions { justify-content: center; }
	.zd-hero__stats { justify-content: center; gap: 24px; }

	.zd-grid,
	.zd-picks__grid,
	.zd-stats,
	.zd-compare--cards .zd-compare__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zd-card__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.zd-compare__row {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.zd-compare__foot,
	.zd-compare__overall {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   12. Reduced motion - keep the layout, drop the movement
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.zd-hero__bloom,
	.zd-hero__orb,
	.zd-hero__grid,
	.zd-hero__ring,
	.zd-hero__media--float img,
	.zd-hero__dot::after,
	.zd-hero__cue-wheel,
	.zd-pick__medal-ring,
	.zd-stat-card__orbit,
	.zd-marquee__track,
	.zd-card__badge,
	.zd-word--accent > span,
	.zd-stats--gradient .zd-stat-card__value,
	.zd-score__bar::after {
		animation: none !important;
	}

	.zd-reveal,
	.zd-word > span,
	.zd-pick__list li {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
		transition: none !important;
	}

	.zd-tilt,
	.zd-magnetic,
	.zd-parallax {
		transform: none !important;
	}
}

/* =========================================================================
   13. Hero Bento - collage of wired cards beside oversized display type
   ========================================================================= */

.zd-bento {
	--zd-accent: #0b7a4f;
	--zd-accent-2: #065f42;
	--zd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	background: #fff;
}

.zd-bento__inner {
	--zd-bento-col: 0.95fr;
	display: grid;
	grid-template-columns: var(--zd-bento-col) 1fr;
	align-items: center;
	gap: 56px;
	max-width: 1440px;
	margin: 0 auto;
}

.zd-bento--right .zd-bento__inner {
	grid-template-columns: 1fr var(--zd-bento-col);
}

.zd-bento--right .zd-bento__stage { order: 2; }
.zd-bento--right .zd-bento__content { order: 1; }

/* --- the collage stage --------------------------------------------------- */

.zd-bento__stage {
	--zd-bento-radius: 22px;
	--zd-wire: #111111;
	--zd-ghost: #e8ece9;
	--zd-float-speed: 7s;
	position: relative;
	width: 100%;
	aspect-ratio: var(--zd-stage-w, 540) / var(--zd-stage-h, 700);
}

.zd-bento__ghost,
.zd-bento__card,
.zd-bento__tile {
	position: absolute;
	/* Parallax rides on `translate` so the float keyframes keep `transform`
	   and the hover pop keeps `scale` - three effects, no collisions. */
	translate:
		calc(var(--zd-px, 0px) * var(--zd-depth, 1))
		calc(var(--zd-py, 0px) * var(--zd-depth, 1));
	transition: translate 0.55s var(--zd-ease), scale 0.4s var(--zd-ease),
		box-shadow 0.4s var(--zd-ease);
}

.zd-bento__ghost {
	border: 1.5px solid var(--zd-ghost);
	border-radius: calc(var(--zd-bento-radius) * 0.7);
}

.zd-bento__card {
	margin: 0;
	border-radius: var(--zd-bento-radius);
	overflow: hidden;
	background: #f4f7f5;
	box-shadow: 0 10px 30px -14px rgba(10, 10, 10, 0.28);
}

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

/* Card 2 carries the outlined treatment from the reference. */
.zd-bento__card--2 {
	background: #fff;
	border: 2px solid var(--zd-wire);
	box-shadow: none;
}

.zd-bento__card--3 {
	background: #0a1310;
	border: 2px solid var(--zd-wire);
}

.zd-bento__card--4 {
	background: #0a1310;
}

/* Dashed centre line inside the large panel. */
.zd-bento__dash {
	position: absolute;
	top: 8%;
	bottom: 8%;
	left: 50%;
	width: 0;
	border-left: 1.5px dashed rgba(10, 10, 10, 0.28);
	transform: translateX(-50%);
}

/* Dark rounded badge at the panel's centre. */
.zd-bento__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 21%;
	aspect-ratio: 1;
	border-radius: 28%;
	background: #0a1310;
	color: #fff;
	font-size: 17px;
	box-shadow: 0 8px 20px -8px rgba(10, 10, 10, 0.6);
	animation: zd-badge-pulse 3.6s ease-in-out infinite;
}

.zd-bento__badge svg { width: 1em; height: 1em; fill: currentColor; }

@keyframes zd-badge-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

/* The overlay stat pill on the dark tile. */
.zd-bento__stat-pill {
	position: absolute;
	top: 7%;
	left: 6%;
	right: 6%;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 7px;
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.zd-bento__stat-icon {
	display: inline-flex;
	font-size: 10px;
	opacity: 0.85;
}

.zd-bento__stat-icon svg { width: 1em; height: 1em; fill: currentColor; }

.zd-bento__stat-num { flex: 1 1 auto; }

.zd-bento__stat-delta {
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 10px;
}

/* The small coloured icon squares. */
.zd-bento__tile {
	display: grid;
	place-items: center;
	border-radius: 30%;
	color: #fff;
	font-size: 18px;
	box-shadow: 0 10px 24px -10px rgba(10, 10, 10, 0.45);
}

.zd-bento__tile svg { width: 1em; height: 1em; fill: currentColor; }

/* --- connector wires ----------------------------------------------------- */

.zd-bento__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.zd-bento__wires path {
	stroke: var(--zd-wire);
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
}

.zd-bento__node {
	fill: var(--zd-wire);
}

.zd-bento__wires--draw path {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	transition: stroke-dashoffset 0.9s var(--zd-ease);
	transition-delay: calc(0.3s + var(--zd-i, 0) * 160ms);
}

.zd-bento__wires--draw.is-in path { stroke-dashoffset: 0; }

.zd-bento__wires--draw .zd-bento__node {
	opacity: 0;
	transition: opacity 0.4s ease 0.9s;
}

.zd-bento__wires--draw.is-in .zd-bento__node { opacity: 1; }

/* --- collage motion ------------------------------------------------------ */

.zd-bento__stage--float .zd-bento__card,
.zd-bento__stage--float .zd-bento__tile {
	animation: zd-bento-float var(--zd-float-speed) ease-in-out infinite alternate;
	animation-delay: calc(var(--zd-i, 0) * -0.9s);
}

.zd-bento__stage--float .zd-bento__ghost {
	animation: zd-bento-float calc(var(--zd-float-speed) * 1.6) ease-in-out infinite alternate;
	animation-delay: calc(var(--zd-i, 0) * -0.7s);
}

@keyframes zd-bento-float {
	from { transform: translateY(0) rotate(0deg); }
	to   { transform: translateY(-11px) rotate(0.6deg); }
}

.zd-bento__stage--pop .zd-bento__card:hover,
.zd-bento__stage--pop .zd-bento__tile:hover {
	scale: 1.06;
	box-shadow: 0 22px 46px -18px rgba(10, 10, 10, 0.45);
	z-index: 5;
}

/* --- the text column ----------------------------------------------------- */

.zd-bento__content {
	min-width: 0;
}

.zd-bento__title {
	margin: 0 0 22px;
	font-size: 76px;
	line-height: 0.98;
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--zd-ink);
}

.zd-bento__desc {
	margin: 0 0 30px;
	max-width: 400px;
	font-size: 17px;
	line-height: 1.5;
	color: #4a5a52;
}

.zd-bento__desc p:last-child { margin-bottom: 0; }

.zd-bento__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 56px;
}

.zd-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 24px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.35s var(--zd-ease), box-shadow 0.35s var(--zd-ease);
}

.zd-pill--solid {
	background: #0a1310;
	color: #fff;
}

.zd-pill--bare {
	padding-left: 12px;
	padding-right: 12px;
	background: transparent;
	color: var(--zd-ink);
}

.zd-pill--solid::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, var(--zd-accent), var(--zd-accent-2));
	opacity: 0;
	transform: translateX(-100%);
	transition: transform 0.55s var(--zd-ease), opacity 0.3s ease;
}

.zd-pill--solid:hover::before { opacity: 1; transform: translateX(0); }

.zd-pill--solid:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -12px rgba(10, 10, 10, 0.6);
}

.zd-pill__label,
.zd-pill__arrow {
	position: relative;
	z-index: 1;
}

.zd-pill__arrow {
	display: inline-flex;
	transition: transform 0.35s var(--zd-ease);
}

.zd-pill:hover .zd-pill__arrow { transform: translateX(4px); }

/* Underline that wipes in under the bare link. */
.zd-pill--bare::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 1.5px;
	background: currentColor;
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.45s var(--zd-ease);
}

.zd-pill--bare:hover::after { transform: scaleX(1); }

.zd-bento__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: 560px;
}

.zd-bento__stat-value {
	margin: 0 0 6px;
	font-size: 42px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

.zd-bento__stat-label {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--zd-muted);
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
	.zd-bento__title { font-size: 58px; }
	.zd-bento__inner { gap: 36px; }
}

@media (max-width: 900px) {
	.zd-bento__inner,
	.zd-bento--right .zd-bento__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.zd-bento--right .zd-bento__stage,
	.zd-bento--right .zd-bento__content {
		order: initial;
	}

	.zd-bento__stage {
		max-width: 460px;
		margin: 0 auto 40px;
	}

	.zd-bento__title { font-size: clamp(36px, 8vw, 56px); }
	.zd-bento__desc { max-width: 100%; }
}

@media (max-width: 520px) {
	.zd-bento__stats { gap: 12px; }
	.zd-bento__stat-value { font-size: 28px; }
	.zd-bento__stat-label { font-size: 12px; }
	.zd-bento__actions { margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.zd-bento__stage--float .zd-bento__card,
	.zd-bento__stage--float .zd-bento__tile,
	.zd-bento__stage--float .zd-bento__ghost,
	.zd-bento__badge {
		animation: none !important;
	}

	.zd-bento__ghost,
	.zd-bento__card,
	.zd-bento__tile {
		translate: none !important;
	}

	.zd-bento__wires--draw path { stroke-dashoffset: 0 !important; }
	.zd-bento__wires--draw .zd-bento__node { opacity: 1 !important; }
}

/* =========================================================================
   14. Navbar - logo, centred pill menu with a sliding indicator, actions
   ========================================================================= */

.zd-nav {
	--zd-nav-accent: #0b7a4f;
	--zd-nav-link: #4a5a52;
	--zd-nav-link-lit: #ffffff;
	--zd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	z-index: 90;
	background: #fff;
	border-bottom: 1px solid #dce3df;
}

.zd-nav--sticky {
	position: sticky;
	top: 0;
}

.zd-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 18px 28px;
	transition: padding 0.35s var(--zd-ease);
}

.zd-nav--shrink.is-stuck .zd-nav__inner {
	padding-top: 11px;
	padding-bottom: 11px;
}

.zd-nav.is-stuck {
	box-shadow: 0 6px 22px -14px rgba(10, 10, 10, 0.5);
}

/* --- logo ---------------------------------------------------------------- */

.zd-nav__logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--zd-ink);
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.zd-nav__logo:hover { opacity: 0.72; }

.zd-nav__logo img {
	display: block;
	height: 34px;
	width: auto;
}

/* --- menu capsule -------------------------------------------------------- */

.zd-nav__menu {
	position: relative;
	display: flex;
	align-items: center;
	padding: 6px;
	border: 1px solid #dce3df;
	border-radius: 999px;
	background: #fff;
}

.zd-nav__list {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zd-nav__list li { margin: 0; }

.zd-nav__list a {
	display: block;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: var(--zd-nav-link);
	transition: color 0.28s ease;
}

.zd-nav__list a.is-lit,
.zd-nav__list a.is-active {
	color: var(--zd-nav-link-lit);
}

/* The indicator sits behind the labels and is positioned by script. */
.zd-nav__pill {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 0;
	border-radius: 999px;
	background: var(--zd-nav-accent);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.42s var(--zd-ease), width 0.42s var(--zd-ease),
		height 0.42s var(--zd-ease), opacity 0.3s ease;
}

/* Until the script has measured, the active item paints its own pill so the
   bar never flashes an unstyled state. */
.zd-nav:not(.is-ready) .zd-nav__list a.is-active,
.zd-nav:not(.is-ready) .zd-nav__list .current-menu-item > a {
	background: var(--zd-nav-accent);
	color: var(--zd-nav-link-lit);
}

/* --- actions ------------------------------------------------------------- */

.zd-nav__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.zd-nav__actions--panel { display: none; }

.zd-nav__link-action {
	font-size: 15px;
	font-weight: 500;
	color: var(--zd-ink);
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.zd-nav__link-action:hover { opacity: 0.65; }

.zd-nav__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 13px 28px;
	border-radius: 999px;
	background: #0a1310;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transform: translate3d(var(--zd-mx, 0px), var(--zd-my, 0px), 0);
	transition: transform 0.35s var(--zd-ease), background-color 0.3s ease,
		box-shadow 0.35s var(--zd-ease);
}

.zd-nav__cta:hover {
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(10, 10, 10, 0.7);
}

.zd-nav__cta.is-hover { transition-duration: 0.12s; }

/* --- hamburger ----------------------------------------------------------- */

.zd-nav__burger {
	display: none;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #dce3df;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
}

.zd-nav__burger span {
	display: block;
	width: 18px;
	height: 2px;
	margin: 3px auto;
	border-radius: 2px;
	background: #0a1310;
	transition: transform 0.35s var(--zd-ease), opacity 0.25s ease;
}

.zd-nav.is-open .zd-nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.zd-nav.is-open .zd-nav__burger span:nth-child(2) { opacity: 0; }
.zd-nav.is-open .zd-nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- collapsed layout ---------------------------------------------------- */

.zd-nav--collapsed .zd-nav__burger { display: block; }

.zd-nav--collapsed .zd-nav__inner > .zd-nav__actions { display: none; }

.zd-nav--collapsed .zd-nav__menu {
	position: absolute;
	top: 100%;
	left: 12px;
	right: 12px;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 14px;
	border-radius: 18px;
	box-shadow: 0 24px 48px -24px rgba(10, 10, 10, 0.5);
	opacity: 0;
	translate: 0 -10px;
	pointer-events: none;
	transition: opacity 0.3s ease, translate 0.35s var(--zd-ease);
}

.zd-nav--collapsed.is-open .zd-nav__menu {
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
}

.zd-nav--collapsed .zd-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.zd-nav--collapsed .zd-nav__list a {
	padding: 12px 16px;
	border-radius: 12px;
}

.zd-nav--collapsed .zd-nav__list a.is-active,
.zd-nav--collapsed .zd-nav__list .current-menu-item > a {
	background: var(--zd-nav-accent);
	color: var(--zd-nav-link-lit);
}

.zd-nav--collapsed .zd-nav__pill { display: none; }

.zd-nav--collapsed .zd-nav__actions--panel {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--zd-hairline);
}

.zd-nav--collapsed .zd-nav__actions--panel .zd-nav__cta { flex: 1 1 auto; justify-content: center; }

/* --- intro ---------------------------------------------------------------- */

.zd-nav--intro .zd-nav__logo,
.zd-nav--intro .zd-nav__menu,
.zd-nav--intro .zd-nav__inner > .zd-nav__actions {
	animation: zd-nav-drop 0.7s var(--zd-ease) both;
}

.zd-nav--intro .zd-nav__logo { animation-delay: 0.05s; }
.zd-nav--intro .zd-nav__menu { animation-delay: 0.15s; }
.zd-nav--intro .zd-nav__inner > .zd-nav__actions { animation-delay: 0.25s; }

@keyframes zd-nav-drop {
	from { opacity: 0; translate: 0 -12px; }
	to   { opacity: 1; translate: 0 0; }
}

/* Collapsed panels are positioned, not animated, so the intro must not
   leave them offset. */
.zd-nav--collapsed.zd-nav--intro .zd-nav__menu {
	animation: none;
	opacity: 0;
	translate: 0 -10px;
}

.zd-nav--collapsed.zd-nav--intro.is-open .zd-nav__menu {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.zd-nav--intro .zd-nav__logo,
	.zd-nav--intro .zd-nav__menu,
	.zd-nav--intro .zd-nav__inner > .zd-nav__actions {
		animation: none;
		opacity: 1;
		translate: none;
	}

	.zd-nav__pill { transition: none !important; }
	.zd-nav__cta { transform: none !important; }
}

/* =========================================================================
   15. Text colour hardening
   Themes commonly style `a` and its descendants with selectors specific
   enough to beat a single class, which left button labels rendering in the
   theme's link colour instead of the widget's. Labels inherit from the
   anchor, and the anchor states are pinned so a visited/hover rule can't
   repaint them.
   ========================================================================= */

.zd-btn__label,
.zd-btn__arrow,
.zd-pill__label,
.zd-pill__arrow {
	color: inherit;
}

.zd-btn--solid,
.zd-btn--solid:link,
.zd-btn--solid:visited,
.zd-btn--solid:hover,
.zd-btn--solid:focus,
.zd-btn--solid:active {
	color: #fff;
}

.zd-btn--ghost,
.zd-btn--ghost:link,
.zd-btn--ghost:visited,
.zd-btn--ghost:focus,
.zd-btn--ghost:active {
	color: var(--zd-ink, #0a1310);
}

.zd-pill--solid,
.zd-pill--solid:link,
.zd-pill--solid:visited,
.zd-pill--solid:hover,
.zd-pill--solid:focus,
.zd-pill--solid:active {
	color: #fff;
}

.zd-pill--bare,
.zd-pill--bare:link,
.zd-pill--bare:visited,
.zd-pill--bare:hover,
.zd-pill--bare:focus,
.zd-pill--bare:active {
	color: var(--zd-ink);
}

.zd-card__button,
.zd-card__button:link,
.zd-card__button:visited,
.zd-card__button:hover,
.zd-card__button:focus {
	color: #fff;
}

.zd-nav__cta,
.zd-nav__cta:link,
.zd-nav__cta:visited,
.zd-nav__cta:hover,
.zd-nav__cta:focus {
	color: #fff;
}

/* Headings that animate word by word must never be left invisible: if the
   reveal class never lands (script blocked, or the element is inside a
   container the observer can't see), show the words after a short beat. */
.zd-word > span {
	animation: zd-word-failsafe 0s linear 2.5s forwards;
}

@keyframes zd-word-failsafe {
	to {
		translate: 0 0;
		rotate: 0deg;
		opacity: 1;
	}
}

.is-in .zd-word > span {
	animation: none;
}

/* =========================================================================
   16. Hero Bento - ambient background, accent dots and floating chips
   ========================================================================= */

.zd-bento {
	--zd-bloom-1: #0b7a4f;
	--zd-bloom-2: #5fd9a4;
	overflow: hidden;
	isolation: isolate;
}

.zd-bento__inner {
	position: relative;
	z-index: 2;
	max-width: 1480px;
	gap: 72px;
}

.zd-bento__ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.zd-bento__ambient-grid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(10, 10, 10, 0.13) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 10%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 10%, transparent 75%);
	animation: zd-bento-grid 34s linear infinite;
}

@keyframes zd-bento-grid {
	to { background-position: 26px 26px; }
}

.zd-bento__bloom {
	position: absolute;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.32;
}

.zd-bento__bloom--1 {
	top: -14%;
	right: 6%;
	background: radial-gradient(circle, var(--zd-bloom-1), transparent 68%);
	animation: zd-bento-bloom-a 22s ease-in-out infinite alternate;
}

.zd-bento__bloom--2 {
	bottom: -18%;
	left: 24%;
	background: radial-gradient(circle, var(--zd-bloom-2), transparent 68%);
	animation: zd-bento-bloom-b 27s ease-in-out infinite alternate;
}

@keyframes zd-bento-bloom-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-12%, 16%, 0) scale(1.22); }
}

@keyframes zd-bento-bloom-b {
	from { transform: translate3d(0, 0, 0) scale(1.15); }
	to   { transform: translate3d(14%, -12%, 0) scale(0.9); }
}

/* Large dashed circle sitting behind the text column. */
.zd-bento__ambient-ring {
	position: absolute;
	top: 50%;
	right: 4%;
	width: 46%;
	aspect-ratio: 1;
	max-width: 720px;
	translate: 0 -50%;
	border: 1.5px dashed rgba(10, 10, 10, 0.09);
	border-radius: 50%;
	animation: zd-spin 90s linear infinite;
}

.zd-bento__ambient-ring::after {
	content: "";
	position: absolute;
	inset: 14%;
	border: 1.5px dashed rgba(10, 10, 10, 0.07);
	border-radius: 50%;
}

.zd-bento--right .zd-bento__ambient-ring {
	right: auto;
	left: 4%;
}

/* Small accent dots sprinkled through the collage. */
.zd-bento__dot-accent {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--zd-accent), var(--zd-accent-2));
	opacity: 0.55;
	translate:
		calc(var(--zd-px, 0px) * var(--zd-depth, 1))
		calc(var(--zd-py, 0px) * var(--zd-depth, 1));
	transition: translate 0.55s var(--zd-ease);
}

.zd-bento__stage--float .zd-bento__dot-accent {
	animation: zd-bento-float calc(var(--zd-float-speed) * 1.3) ease-in-out infinite alternate;
	animation-delay: calc(var(--zd-i, 0) * -1.1s);
}

/* --- floating glass chips ------------------------------------------------ */

.zd-bento__content { position: relative; }

.zd-bento__chips {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.zd-bento__chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid rgba(10, 10, 10, 0.07);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 14px 34px -18px rgba(10, 10, 10, 0.5);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--zd-ink);
	animation: zd-chip-float 8s ease-in-out infinite alternate;
	animation-delay: calc(var(--zd-i, 0) * -1.7s);
}

.zd-bento__chip-icon {
	display: inline-flex;
	font-size: 13px;
}

.zd-bento__chip-icon svg { width: 1em; height: 1em; fill: currentColor; }

.zd-bento__chip--1 { top: -2%; right: 4%; }
.zd-bento__chip--2 { top: 46%; right: 1%; }
.zd-bento__chip--3 { bottom: 4%; right: 16%; }

@keyframes zd-chip-float {
	from { transform: translateY(0) rotate(-1deg); }
	to   { transform: translateY(-14px) rotate(1.5deg); }
}

/* --- eyebrow pill -------------------------------------------------------- */

.zd-bento__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-family: var(--zd-font-sans);
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--zd-muted);
}

.zd-bento__eyebrow-dot {
	position: relative;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--zd-bloom-1);
}

.zd-bento__eyebrow-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: zd-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* --- title rhythm -------------------------------------------------------- */

.zd-bento__title {
	line-height: 1.02;
	text-wrap: balance;
}

/* Chips overlap the text badly once the columns stack. */
@media (max-width: 1200px) {
	.zd-bento__chip--2 { right: 2%; }
}

@media (max-width: 900px) {
	.zd-bento__chips { display: none; }
	.zd-bento__ambient-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.zd-bento__ambient-grid,
	.zd-bento__bloom,
	.zd-bento__ambient-ring,
	.zd-bento__chip,
	.zd-bento__eyebrow-dot::after,
	.zd-bento__stage--float .zd-bento__dot-accent {
		animation: none !important;
	}
}

/* =========================================================================
   17. Hero Bento - height-fit sizing
   The collage holds a fixed proportion, so driving it from a height keeps the
   whole composition inside one screen instead of growing with column width.
   ========================================================================= */

.zd-bento {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.zd-bento__inner {
	width: 100%;
	align-items: center;
}

/* The stage is a grid item, so it stretches to the column by default; the
   height control overrides these, but they keep the auto-width case sane. */
.zd-bento__stage {
	justify-self: center;
	max-width: 100%;
	max-height: 100%;
}


@media (max-width: 900px) {
	/* Stacked layout: let the collage use the width it has rather than a
	   viewport height that would leave it tiny beside full-width text. */
	.zd-bento__stage {
		height: auto !important;
		width: 100% !important;
		max-width: 420px;
		margin: 0 auto 40px;
	}
}

/* =========================================================================
   18. Hero Classic - text + framed media, premium treatment
   ========================================================================= */

.zd-hc {
	--zd-accent: #0b7a4f;
	--zd-accent-2: #065f42;
	--zd-ink: #0a1310;
	--zd-muted: #5e6c64;
	--zd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, #ffffff 0%, #f4f7f5 100%);
	perspective: 1400px;
}

.zd-hc__inner {
	--zd-hc-col: 1.05fr;
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: var(--zd-hc-col) 1fr;
	align-items: center;
	gap: 72px;
	width: 100%;
	max-width: 1480px;
	margin: 0 auto;
}

.zd-hc--left .zd-hc__inner { grid-template-columns: 1fr var(--zd-hc-col); }
.zd-hc--left .zd-hc__content { order: 2; }
.zd-hc--left .zd-hc__media { order: 1; }

.zd-hc--center .zd-hc__inner,
.zd-hc--none .zd-hc__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 900px;
	text-align: center;
}

.zd-hc--center .zd-hc__content,
.zd-hc--none .zd-hc__content {
	align-items: center;
	text-align: center;
}

.zd-hc--center .zd-hc__desc { margin-inline: auto; }

.zd-hc__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* --- backdrop ------------------------------------------------------------ */

.zd-hc__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.zd-hc__mesh {
	position: absolute;
	width: 52%;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.3;
}

.zd-hc__mesh--1 {
	top: -18%;
	left: -8%;
	background: radial-gradient(circle, var(--zd-accent), transparent 68%);
	animation: zd-hc-mesh-a 24s ease-in-out infinite alternate;
}

.zd-hc__mesh--2 {
	bottom: -22%;
	right: -6%;
	background: radial-gradient(circle, var(--zd-accent-2), transparent 68%);
	animation: zd-hc-mesh-b 30s ease-in-out infinite alternate;
}

@keyframes zd-hc-mesh-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(16%, 14%, 0) scale(1.2); }
}

@keyframes zd-hc-mesh-b {
	from { transform: translate3d(0, 0, 0) scale(1.15); }
	to   { transform: translate3d(-14%, -12%, 0) scale(0.92); }
}

.zd-hc__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(10, 19, 16, 0.11) 1px, transparent 1px);
	background-size: 24px 24px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 5%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 5%, transparent 72%);
	animation: zd-hc-dots 30s linear infinite;
}

@keyframes zd-hc-dots {
	to { background-position: 24px 24px; }
}

/* --- eyebrow ------------------------------------------------------------- */

.zd-hc__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-family: var(--zd-font-sans);
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--zd-muted);
}

.zd-hc__eyebrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--zd-accent), var(--zd-accent-2));
	color: #fff;
	font-size: 10px;
	box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--zd-accent) 65%, transparent);
}

.zd-hc__eyebrow-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* --- title & copy -------------------------------------------------------- */

.zd-hc__title {
	margin: 0 0 22px;
	font-size: 60px;
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--zd-ink);
	text-wrap: balance;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.zd-hc__word--accent {
	position: relative;
	color: var(--zd-accent);
}

.zd-hc__word--accent.zd-hc__word--underline::after {
	content: "";
	position: absolute;
	left: 2%;
	bottom: 0.12em;
	width: 96%;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--zd-accent), var(--zd-accent-2));
}

.zd-hc__desc {
	margin: 0 0 28px;
	max-width: 520px;
	font-size: 17.5px;
	line-height: 1.7;
	color: #4a5a52;
}

.zd-hc__desc p:last-child { margin-bottom: 0; }

/* --- feature ticks ------------------------------------------------------- */

.zd-hc__features {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: flex;
	gap: 10px 12px;
	font-size: 14px;
	color: var(--zd-body);
}

.zd-hc__features--inline { flex-wrap: wrap; }
.zd-hc__features--stack { flex-direction: column; align-items: flex-start; }

.zd-hc__features li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 8px;
	border: 1px solid rgba(10, 19, 16, 0.07);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-weight: 500;
	transition: border-color 0.3s ease, transform 0.3s var(--zd-ease), box-shadow 0.3s ease;
}

.zd-hc__features li:hover {
	border-color: color-mix(in srgb, var(--zd-accent) 35%, transparent);
	box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--zd-accent) 55%, transparent);
	transform: translateY(-1px);
}

/* --- actions ------------------------------------------------------------- */

.zd-hc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 34px;
}

.zd-hc .zd-btn--ghost {
	border-color: rgba(10, 19, 16, 0.16);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.zd-hc .zd-btn--solid {
	box-shadow: 0 10px 24px -14px rgba(10, 19, 16, 0.55);
}

.zd-btn__icon {
	display: inline-flex;
	position: relative;
	z-index: 1;
	font-size: 11px;
}

.zd-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }

/* --- social proof -------------------------------------------------------- */

.zd-hc__proof {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.zd-hc__avatars {
	display: flex;
	align-items: center;
}

.zd-hc__avatar {
	display: block;
	width: 38px;
	height: 38px;
	margin-left: -11px;
	border-radius: 50%;
	border: 2.5px solid #fff;
	overflow: hidden;
	background: #ebf0ed;
	box-shadow: 0 4px 12px -6px rgba(10, 19, 16, 0.6);
	transition: transform 0.35s var(--zd-ease);
}

.zd-hc__avatar:first-child { margin-left: 0; }

.zd-hc__avatars:hover .zd-hc__avatar { transform: translateY(-3px); }

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

.zd-hc__proof-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	color: var(--zd-muted);
}

.zd-hc__stars {
	display: inline-flex;
	gap: 2px;
	font-size: 15px;
	line-height: 1;
}

.zd-hc__star {
	position: relative;
	display: inline-block;
	color: #dce3df;
}

.zd-hc__star-fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--zd-ember);
	white-space: nowrap;
}

.zd-hc__proof-label { font-weight: 500; }

/* --- media --------------------------------------------------------------- */

.zd-hc__media {
	position: relative;
	min-width: 0;
	transform: translate3d(var(--zd-px, 0px), var(--zd-py, 0px), 0);
	transition: transform 0.6s var(--zd-ease);
}

/* Soft blurred accent wash sitting behind the frame - gives the media a
   sense of depth instead of floating flat on the backdrop. */
.zd-hc__media-glow {
	position: absolute;
	inset: -10%;
	z-index: 0;
	border-radius: 40%;
	background: linear-gradient(135deg, var(--zd-accent), var(--zd-accent-2));
	opacity: 0.22;
	filter: blur(60px);
	animation: zd-hc-glow-pulse 9s ease-in-out infinite;
	pointer-events: none;
}

@keyframes zd-hc-glow-pulse {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50%      { transform: scale(1.08) rotate(4deg); }
}

.zd-hc__frame,
.zd-hc__statcard,
.zd-hc__livebadge {
	position: relative;
	z-index: 1;
}

.zd-hc__media--float .zd-hc__frame {
	animation: zd-hc-bob 7s ease-in-out infinite;
}

@keyframes zd-hc-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-13px); }
}

.zd-hc__frame {
	position: relative;
}

.zd-hc__frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* Plain: the image on its own, no card, no shadow - for graphics that
   already carry their own transparent background. */
.zd-hc__frame--plain {
	background: transparent;
	box-shadow: none;
}

/* Glass panel: a hairline gradient edge plus an inner highlight. */
.zd-hc__frame--glass {
	padding: 10px;
	border-radius: 24px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.62);
	box-shadow:
		0 2px 4px rgba(10, 19, 16, 0.04),
		0 30px 70px -32px rgba(10, 19, 16, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.85);
}

.zd-hc__frame--glass img { border-radius: 15px; }

.zd-hc__frame--glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(150deg,
		color-mix(in srgb, var(--zd-accent) 55%, transparent),
		transparent 45%,
		color-mix(in srgb, var(--zd-accent-2) 45%, transparent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

/* A faint diagonal gloss across the top of the panel, like light on glass. */
.zd-hc__frame--glass::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.5) 0%, transparent 32%);
	pointer-events: none;
}

/* Browser window chrome. */
.zd-hc__frame--window {
	padding-top: 38px;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 2px 4px rgba(10, 19, 16, 0.04),
		0 30px 70px -32px rgba(10, 19, 16, 0.55);
	border: 1px solid rgba(10, 19, 16, 0.08);
}

.zd-hc__chrome {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 38px;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 15px;
	background: #f4f7f5;
	border-bottom: 1px solid rgba(10, 19, 16, 0.07);
}

.zd-hc__chrome span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #dce3df;
}

.zd-hc__chrome span { display: none; }

/* --- overlapping cards --------------------------------------------------- */

.zd-hc__statcard {
	position: absolute;
	left: -26px;
	bottom: 34px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px 14px 16px;
	border: 1px solid rgba(10, 19, 16, 0.06);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 20px 44px -20px rgba(10, 19, 16, 0.5);
	animation: zd-hc-card-float 6s ease-in-out infinite alternate;
}

.zd-hc__statcard-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: linear-gradient(140deg, var(--zd-accent), var(--zd-accent-2));
	color: #fff;
	font-size: 15px;
}

.zd-hc__statcard-icon svg { width: 1em; height: 1em; fill: currentColor; }

.zd-hc__statcard-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.zd-hc__statcard-value {
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

.zd-hc__statcard-label {
	font-size: 12.5px;
	color: var(--zd-muted);
}

.zd-hc__livebadge {
	position: absolute;
	top: 26px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(10, 19, 16, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 16px 32px -18px rgba(10, 19, 16, 0.9);
	animation: zd-hc-card-float 7.5s ease-in-out infinite alternate-reverse;
}

.zd-hc__livedot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--zd-accent);
	flex: 0 0 auto;
}

.zd-hc__livedot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: zd-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes zd-hc-card-float {
	from { transform: translateY(0); }
	to   { transform: translateY(-12px); }
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
	.zd-hc__title { font-size: 48px; }
	.zd-hc__inner { gap: 44px; }
	.zd-hc__statcard { left: -12px; }
	.zd-hc__livebadge { right: -6px; }
}

@media (max-width: 900px) {
	.zd-hc__inner,
	.zd-hc--left .zd-hc__inner {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.zd-hc--left .zd-hc__content,
	.zd-hc--left .zd-hc__media { order: initial; }

	.zd-hc__content { align-items: center; }
	.zd-hc__desc { margin-inline: auto; }
	.zd-hc__features { justify-content: center; }
	.zd-hc__actions { justify-content: center; }
	.zd-hc__proof { justify-content: center; }

	.zd-hc__media {
		max-width: 560px;
		margin: 12px auto 0;
	}

	.zd-hc__title { font-size: clamp(32px, 7vw, 46px); }
}

@media (max-width: 560px) {
	.zd-hc__statcard {
		left: 50%;
		bottom: -22px;
		translate: -50% 0;
	}

	.zd-hc__livebadge { right: 8px; }
	.zd-hc__features--inline { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
	.zd-hc__mesh,
	.zd-hc__dots,
	.zd-hc__media--float .zd-hc__frame,
	.zd-hc__media-glow,
	.zd-hc__statcard,
	.zd-hc__livebadge,
	.zd-hc__livedot::after {
		animation: none !important;
	}

	.zd-hc__media { transform: none !important; }

	.zd-hc__features li {
		opacity: 1 !important;
		translate: none !important;
	}
}

/* =========================================================================
   19. Logo Marquee - label placement, edge fade width, muted press-strip look
   ========================================================================= */

.zd-marquee {
	--zd-fade: 10%;
}

.zd-marquee__label {
	margin: 0 0 18px;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #5e6c64;
}

/* Label sitting beside the track instead of above it. */
.zd-marquee--label-left {
	display: flex;
	align-items: center;
	gap: 34px;
}

.zd-marquee--label-left .zd-marquee__label {
	flex: 0 0 auto;
	margin: 0;
	max-width: 190px;
}

.zd-marquee--label-left .zd-marquee__viewport {
	flex: 1 1 auto;
	min-width: 0;
}

.zd-marquee--fade .zd-marquee__viewport {
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 var(--zd-fade),
		#000 calc(100% - var(--zd-fade)),
		transparent
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		#000 var(--zd-fade),
		#000 calc(100% - var(--zd-fade)),
		transparent
	);
}

/* The strip reads as one continuous band, so items keep a steady rhythm
   rather than being spaced by their own differing widths. */
.zd-marquee__item {
	justify-content: center;
	opacity: 0.55;
	transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s var(--zd-ease, ease);
}

.zd-marquee--gray .zd-marquee__item {
	filter: grayscale(1);
}

.zd-marquee--gray .zd-marquee__item:hover,
.zd-marquee__item:hover {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.08);
}

@media (max-width: 700px) {
	.zd-marquee--label-left {
		display: block;
	}

	.zd-marquee--label-left .zd-marquee__label {
		margin: 0 0 14px;
		max-width: none;
	}
}

/* =========================================================================
   20. Logo Marquee - equal slots per view, larger logos
   ========================================================================= */

.zd-marquee--fit .zd-marquee__item {
	flex: 0 0 var(--zd-item-w, 180px);
	max-width: var(--zd-item-w, 180px);
}

.zd-marquee--auto .zd-marquee__item {
	flex: 0 0 auto;
}

.zd-marquee__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* The logo scales down to fit its slot but never past its natural size, so a
   narrow wordmark and a wide one still read at the same optical weight. */
.zd-marquee__item img {
	height: 58px;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.zd-marquee__viewport {
	align-items: center;
}

/* =========================================================================
   21. Deals Grid - card layouts, equal heights, accent bar
   ========================================================================= */

.zd-grid--equal { align-items: stretch; }

.zd-grid--equal .zd-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.zd-grid--equal .zd-card__inner { flex: 1 1 auto; }

/* Body carries the title block; foot carries price + CTA. Each layout below
   only has to say where those two sit. */
.zd-card__main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.zd-card__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.zd-card__foot .zd-card__pricing { margin-bottom: 12px; }

/* --- row: logo beside a stacked title/price/button ----------------------- */

.zd-grid--row .zd-card__inner {
	flex-direction: row;
	align-items: center;
}

/* --- stack: logo above everything ---------------------------------------- */

.zd-grid--stack .zd-card__inner {
	flex-direction: column;
	align-items: flex-start;
}

/* --- panel: tall card, button pinned to the base ------------------------- */

.zd-grid--panel .zd-card__inner {
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	height: 100%;
}

.zd-grid--panel .zd-card__main { width: 100%; }

.zd-grid--panel .zd-card__body { margin-bottom: 18px; }

.zd-grid--panel .zd-card__foot {
	margin-top: auto;
	width: 100%;
	padding-top: 16px;
	border-top: 1px solid rgba(10, 19, 16, 0.08);
}

.zd-grid--panel .zd-card__foot .zd-btn {
	width: 100%;
	justify-content: center;
}

.zd-grid--panel .zd-card__media {
	width: 64px;
	height: 64px;
	border-radius: 16px;
}

.zd-grid--panel .zd-card__rating {
	position: absolute;
	top: 22px;
	right: 22px;
}

/* --- split: details left, price and CTA right ---------------------------- */

.zd-grid--split .zd-card__inner {
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.zd-grid--split .zd-card__main {
	flex-direction: row;
	align-items: center;
	gap: 24px;
	width: 100%;
}

.zd-grid--split .zd-card__body { flex: 1 1 auto; }

.zd-grid--split .zd-card__foot {
	flex: 0 0 auto;
	align-items: flex-end;
	text-align: right;
	padding-left: 24px;
	border-left: 1px solid rgba(10, 19, 16, 0.08);
}

.zd-grid--split .zd-card__foot .zd-card__pricing {
	margin-bottom: 10px;
	justify-content: flex-end;
}

/* --- accent bar ---------------------------------------------------------- */

.zd-card__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 4;
	background: linear-gradient(90deg, var(--zd-accent), var(--zd-accent-2));
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.55s var(--zd-ease);
	pointer-events: none;
}

.zd-card:hover .zd-card__bar { transform: scaleX(1); }

/* --- compact: dense single-line rows -------------------------------------- */

.zd-grid--compact .zd-card {
	border-radius: 14px;
}

.zd-grid--compact .zd-card__inner {
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

.zd-grid--compact .zd-card__main {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.zd-grid--compact .zd-card__body { flex: 1 1 auto; min-width: 0; }

.zd-grid--compact .zd-card__title {
	margin-bottom: 2px;
	font-size: 16px;
}

.zd-grid--compact .zd-card__tagline {
	margin-bottom: 0;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zd-grid--compact .zd-card__media {
	width: 44px;
	height: 44px;
	padding: 7px;
	border-radius: 12px;
}

.zd-grid--compact .zd-card__foot {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

.zd-grid--compact .zd-card__pricing { margin-bottom: 0; }

.zd-grid--compact .zd-card__price { font-size: 17px; }

.zd-grid--compact .zd-btn {
	padding: 9px 16px;
	font-size: 13px;
}

.zd-grid--compact .zd-card__rating { display: none; }

/* --- spotlight: full-bleed image with overlay text ------------------------ */

.zd-grid--spotlight .zd-card {
	position: relative;
	min-height: 340px;
	background: #0a1310;
}

.zd-grid--spotlight .zd-card__inner {
	position: absolute;
	inset: 0;
	align-items: flex-end;
	padding: 26px;
}

.zd-grid--spotlight .zd-card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 0;
	background: #0a1310;
	box-shadow: none;
	z-index: 0;
}

.zd-grid--spotlight .zd-card:hover .zd-card__media {
	transform: scale(1.05);
	box-shadow: none;
}

.zd-grid--spotlight .zd-card__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	opacity: 0.72;
}

/* Scrim so white text stays legible over any photo. */
.zd-grid--spotlight .zd-card__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(10, 12, 20, 0.05) 30%, rgba(10, 12, 20, 0.92) 100%);
	pointer-events: none;
}

.zd-grid--spotlight .zd-card__main,
.zd-grid--spotlight .zd-card__rating {
	position: relative;
	z-index: 2;
}

.zd-grid--spotlight .zd-card__main {
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.zd-grid--spotlight .zd-card__title {
	color: #fff;
	font-size: 21px;
}

.zd-grid--spotlight .zd-card__tagline {
	color: rgba(255, 255, 255, 0.72);
}

.zd-grid--spotlight .zd-card__foot { width: 100%; }

.zd-grid--spotlight .zd-card__price {
	color: #fff;
}

.zd-grid--spotlight .zd-card__old-price {
	color: rgba(255, 255, 255, 0.55);
}

.zd-grid--spotlight .zd-card__foot .zd-btn {
	width: 100%;
	justify-content: center;
}

.zd-grid--spotlight .zd-card__rating {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 3;
}

.zd-grid--spotlight .zd-ring__value { color: #fff; }

.zd-grid--spotlight .zd-card__badge {
	z-index: 3;
}

/* --- narrow columns ------------------------------------------------------ */

@media (max-width: 900px) {
	.zd-grid--split .zd-card__main {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.zd-grid--split .zd-card__foot {
		align-items: flex-start;
		text-align: left;
		padding-left: 0;
		padding-top: 16px;
		border-left: 0;
		border-top: 1px solid rgba(10, 19, 16, 0.08);
		width: 100%;
	}

	.zd-grid--split .zd-card__foot .zd-card__pricing { justify-content: flex-start; }
}

/* =========================================================================
   22. About Section - image collage/single frame, mission points, stats
   ========================================================================= */

.zd-about {
	--zd-accent: #0b7a4f;
	--zd-accent-2: #065f42;
	--zd-ink: #0a1310;
	--zd-muted: #5e6c64;
	--zd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #fff;
}

.zd-about__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 80px;
	max-width: 1480px;
	margin: 0 auto;
}

.zd-about--right .zd-about__inner { grid-template-columns: 1fr 1fr; }
.zd-about--right .zd-about__media { order: 2; }
.zd-about--right .zd-about__content { order: 1; }

.zd-about__dots {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(10, 19, 16, 0.1) 1px, transparent 1px);
	background-size: 24px 24px;
	mask-image: radial-gradient(ellipse 70% 60% at 20% 40%, #000 5%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 20% 40%, #000 5%, transparent 72%);
	animation: zd-hc-dots 32s linear infinite;
}

.zd-about--right .zd-about__dots {
	mask-image: radial-gradient(ellipse 70% 60% at 80% 40%, #000 5%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 80% 40%, #000 5%, transparent 72%);
}

/* --- media column ---------------------------------------------------------- */

.zd-about__media {
	position: relative;
	min-width: 0;
	transform: translate3d(var(--zd-px, 0px), var(--zd-py, 0px), 0);
	transition: transform 0.6s var(--zd-ease);
}

.zd-about__frame {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	background: #f4f7f5;
	box-shadow:
		0 2px 4px rgba(10, 19, 16, 0.04),
		0 30px 70px -32px rgba(10, 19, 16, 0.5);
}

.zd-about__frame img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/*
 * Every frame is sized by aspect-ratio unless the widget's "Image Height"
 * control sets --zd-about-img-h - an explicit height overrides an
 * aspect-ratio per spec, so setting the variable is enough to lock every
 * style below to a chosen height without touching each one individually.
 */
.zd-about__frame--main,
.zd-about__frame--second,
.zd-about__frame--grid {
	height: var(--zd-about-img-h, auto);
}

/* single frame */
.zd-about__media--single .zd-about__frame--main {
	aspect-ratio: 4 / 5;
}

.zd-about__media--single .zd-about__frame--main img {
	width: 100%;
	height: 100%;
}

/* collage: main frame plus a smaller second frame overlapping the corner */
.zd-about__media--collage {
	padding: 20px 34px 34px 0;
}

.zd-about--right .zd-about__media--collage {
	padding: 20px 0 34px 34px;
}

.zd-about__media--collage .zd-about__frame--main {
	aspect-ratio: 4 / 5;
}

.zd-about__media--collage .zd-about__frame--main img {
	width: 100%;
	height: 100%;
}

.zd-about__frame--second {
	position: absolute;
	right: -6%;
	bottom: -8%;
	width: 46%;
	aspect-ratio: 1;
	z-index: 3;
	border: 5px solid #fff;
}

.zd-about--right .zd-about__frame--second {
	right: auto;
	left: -6%;
}

.zd-about__frame--second img {
	width: 100%;
	height: 100%;
}

.zd-about__media--float .zd-about__frame--main {
	animation: zd-hc-bob 7.5s ease-in-out infinite;
}

.zd-about__media--float .zd-about__frame--second {
	animation: zd-hc-bob 6s ease-in-out infinite reverse;
}

/* --- stacked: two layered photos, offset and gently counter-tilted -------- */

.zd-about__media--stacked {
	padding: 10px 40px 40px 10px;
}

.zd-about--right .zd-about__media--stacked {
	padding: 10px 10px 40px 40px;
}

.zd-about__media--stacked .zd-about__frame--main {
	aspect-ratio: 4 / 5;
	width: 78%;
	rotate: -2.5deg;
	box-shadow:
		0 2px 4px rgba(10, 19, 16, 0.04),
		0 34px 60px -28px rgba(10, 19, 16, 0.55);
}

.zd-about__media--stacked .zd-about__frame--main img {
	width: 100%;
	height: 100%;
}

.zd-about__media--stacked .zd-about__frame--second {
	position: absolute;
	right: -2%;
	bottom: -6%;
	width: 54%;
	aspect-ratio: 4 / 5;
	rotate: 3deg;
	border: 6px solid #fff;
	z-index: 2;
}

.zd-about--right .zd-about__media--stacked .zd-about__frame--second {
	right: auto;
	left: -2%;
}

.zd-about__media--stacked .zd-about__frame--second img {
	width: 100%;
	height: 100%;
}

.zd-about__media--stacked.zd-about__media--float .zd-about__frame--main {
	animation: zd-about-stack-a 8s ease-in-out infinite;
}

.zd-about__media--stacked.zd-about__media--float .zd-about__frame--second {
	animation: zd-about-stack-b 6.5s ease-in-out infinite;
}

@keyframes zd-about-stack-a {
	0%, 100% { transform: translateY(0) rotate(-2.5deg); }
	50%      { transform: translateY(-10px) rotate(-3.5deg); }
}

@keyframes zd-about-stack-b {
	0%, 100% { transform: translateY(0) rotate(3deg); }
	50%      { transform: translateY(-14px) rotate(4.5deg); }
}

/* --- shape: single image on a blurred blob, framed by a dashed ring ------- */

.zd-about__media--shape {
	padding: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zd-about__media--shape .zd-about__frame--main {
	position: relative;
	z-index: 2;
	width: 84%;
	aspect-ratio: 4 / 5;
	border-radius: 32px;
}

.zd-about__media--shape .zd-about__frame--main img {
	width: 100%;
	height: 100%;
}

.zd-about__blob {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
	background: linear-gradient(135deg, var(--zd-accent), var(--zd-accent-2));
	opacity: 0.24;
	filter: blur(6px);
	animation: zd-about-blob 12s ease-in-out infinite;
}

@keyframes zd-about-blob {
	0%, 100% { border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; transform: rotate(0deg) scale(1); }
	50%      { border-radius: 55% 45% 40% 60% / 55% 60% 40% 45%; transform: rotate(8deg) scale(1.04); }
}

.zd-about__ring {
	position: absolute;
	top: 6%;
	left: 6%;
	right: 6%;
	bottom: 6%;
	z-index: 1;
	border: 2px dashed color-mix(in srgb, var(--zd-accent) 55%, transparent);
	border-radius: 36px;
	rotate: -4deg;
	pointer-events: none;
}

.zd-about__media--shape.zd-about__media--float .zd-about__frame--main {
	animation: zd-hc-bob 7s ease-in-out infinite;
}

/* --- grid: four images in a 2×2 grid --------------------------------------- */

.zd-about__media--grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.zd-about__frame--grid {
	aspect-ratio: 1;
	border-radius: 18px;
	transition: transform 0.5s var(--zd-ease);
}

.zd-about__frame--grid img {
	width: 100%;
	height: 100%;
}

.zd-about__frame--grid:hover {
	transform: translateY(-6px) scale(1.03);
	z-index: 2;
}

.zd-about__media--grid.zd-about__media--float .zd-about__frame--grid {
	animation: zd-hc-bob 7s ease-in-out infinite;
	animation-delay: calc(var(--zd-i, 0) * -1.4s);
}

/* --- overlapping stat card -------------------------------------------------- */

.zd-about__statcard {
	position: absolute;
	left: 8px;
	top: 26px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px 14px 16px;
	border: 1px solid rgba(10, 19, 16, 0.06);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 20px 44px -20px rgba(10, 19, 16, 0.5);
	animation: zd-hc-card-float 6.5s ease-in-out infinite alternate;
}

.zd-about--right .zd-about__statcard {
	left: auto;
	right: -22px;
}

.zd-about__statcard-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: linear-gradient(140deg, var(--zd-accent), var(--zd-accent-2));
	color: #fff;
	font-size: 15px;
	flex: 0 0 auto;
}

.zd-about__statcard-icon svg { width: 1em; height: 1em; fill: currentColor; }

.zd-about__statcard-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.zd-about__statcard-value {
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

.zd-about__statcard-label {
	font-size: 12.5px;
	color: var(--zd-muted);
}

/* --- text column ------------------------------------------------------------ */

.zd-about__content { min-width: 0; }

.zd-about__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zd-accent);
}

.zd-about__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--zd-accent), var(--zd-accent-2));
}

.zd-about__title {
	margin: 0 0 20px;
	font-size: 44px;
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--zd-ink);
	text-wrap: balance;
}

.zd-about__desc {
	margin: 0 0 32px;
	font-size: 17px;
	line-height: 1.7;
	color: #4a5a52;
}

.zd-about__desc p:last-child { margin-bottom: 0; }

/* --- mission points ---------------------------------------------------------- */

.zd-about__points {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-bottom: 32px;
}

.zd-about__point {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	opacity: 0;
	translate: 0 10px;
	transition: opacity 0.55s ease, translate 0.55s var(--zd-ease);
	transition-delay: calc(0.15s + var(--zd-i, 0) * 110ms);
}

.zd-about__points.is-in .zd-about__point {
	opacity: 1;
	translate: 0 0;
}

.zd-about__point-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: #e6f5ee;
	color: #0b7a4f;
	font-size: 17px;
	transition: transform 0.4s var(--zd-ease);
}

.zd-about__point:hover .zd-about__point-icon {
	transform: rotate(-6deg) scale(1.08);
}

.zd-about__point-icon svg { width: 1em; height: 1em; fill: currentColor; }

.zd-about__point-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 4px;
}

.zd-about__point-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--zd-ink);
}

.zd-about__point-text {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--zd-muted);
}

/* --- actions + stats -------------------------------------------------------- */

.zd-about__actions { margin-bottom: 36px; }

.zd-about__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(10, 19, 16, 0.08);
}

.zd-about__stat-value {
	margin: 0 0 4px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--zd-ink);
	font-variant-numeric: tabular-nums;
}

.zd-about__stat-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--zd-muted);
}

/* --- responsive --------------------------------------------------------------- */

@media (max-width: 1100px) {
	.zd-about__title { font-size: 36px; }
	.zd-about__inner { gap: 48px; }
}

@media (max-width: 900px) {
	.zd-about__inner,
	.zd-about--right .zd-about__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.zd-about--right .zd-about__media,
	.zd-about--right .zd-about__content {
		order: initial;
	}

	.zd-about__media {
		max-width: 480px;
		margin: 0 auto 20px;
	}

	.zd-about__media--collage,
	.zd-about--right .zd-about__media--collage {
		padding: 20px 30px 30px 0;
	}

	.zd-about__title { font-size: clamp(28px, 7vw, 38px); }
}

@media (max-width: 560px) {
	.zd-about__statcard {
		left: 50%;
		top: -18px;
		translate: -50% 0;
	}

	.zd-about--right .zd-about__statcard {
		right: auto;
		left: 50%;
	}

	.zd-about__stats { gap: 20px 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.zd-about__dots,
	.zd-about__media--float .zd-about__frame--main,
	.zd-about__media--float .zd-about__frame--second,
	.zd-about__statcard {
		animation: none !important;
	}

	.zd-about__media { transform: none !important; }

	.zd-about__point {
		opacity: 1 !important;
		translate: none !important;
	}
}

/* =========================================================================
   15. Hero Fresh - clean, flat, two colour themes (no purple/pink anywhere)
   ========================================================================= */

.zd-hf {
	--zd-hf-ease: cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	background: var(--zd-hf-bg);
}

/* Theme 1 - Monochrome: white surface, near-black type, orange accent. */
.zd-hf--mono {
	--zd-hf-bg: #ffffff;
	--zd-hf-ink: #0a1310;
	--zd-hf-muted: #5e6c64;
	--zd-hf-accent: #0b7a4f;
	--zd-hf-accent-2: #c2410c;
	--zd-hf-border: #dce3df;
}

/* Theme 2 - Fresh: white surface, slate type, green + yellow accent. */
.zd-hf--green {
	--zd-hf-bg: #ffffff;
	--zd-hf-ink: #0a1310;
	--zd-hf-muted: #5e6c64;
	--zd-hf-accent: #0b7a4f;
	--zd-hf-accent-2: #c2410c;
	--zd-hf-border: #dce3df;
}

.zd-hf__inner {
	display: flex;
	align-items: center;
	gap: 72px;
	max-width: 1480px;
	margin: 0 auto;
}

.zd-hf--left .zd-hf__inner { flex-direction: row-reverse; }

.zd-hf__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* --- eyebrow (optional) ---------------------------------------------------- */

.zd-hf__eyebrow {
	margin: 0 0 20px;
	padding: 7px 15px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--zd-hf-accent) 10%, #fff);
	font-size: 13px;
	font-weight: 700;
	color: color-mix(in srgb, var(--zd-hf-accent) 80%, var(--zd-hf-ink));
}

/* --- title ------------------------------------------------------------------ */

.zd-hf__title {
	margin: 0 0 20px;
	font-size: clamp(32px, 4.6vw, 52px);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--zd-hf-ink);
}

.zd-hf__word--accent {
	color: var(--zd-hf-accent);
}

/* --- description -------------------------------------------------------------- */

.zd-hf__desc {
	margin: 0 0 32px;
	max-width: 540px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--zd-hf-muted);
}

.zd-hf__mark {
	display: inline;
	padding: 0.05em 0.35em;
	border-radius: 5px;
	background: color-mix(in srgb, var(--zd-hf-accent) 14%, #fff);
	color: color-mix(in srgb, var(--zd-hf-accent) 80%, var(--zd-hf-ink));
	font-weight: 700;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* --- buttons ------------------------------------------------------------------- */

.zd-hf__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.zd-hf__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 14px 26px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.3s var(--zd-hf-ease), box-shadow 0.3s var(--zd-hf-ease),
		background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.zd-hf__btn--solid {
	background: var(--zd-hf-ink);
	color: #fff;
}

.zd-hf__btn--solid:hover {
	background: var(--zd-hf-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--zd-hf-accent) 65%, transparent);
	color: #fff;
}

.zd-hf__btn--outline {
	background: transparent;
	border: 1.5px solid var(--zd-hf-border);
	color: var(--zd-hf-ink);
}

.zd-hf__btn--outline:hover {
	border-color: var(--zd-hf-accent);
	color: var(--zd-hf-accent);
	transform: translateY(-2px);
}

/* --- media --------------------------------------------------------------------- */

.zd-hf__media {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.zd-hf__frame {
	position: relative;
	width: 100%;
	max-width: 560px;
	border-radius: 20px;
	overflow: hidden;
	background: color-mix(in srgb, var(--zd-hf-accent) 4%, #fff);
}

.zd-hf__frame img {
	display: block;
	width: 100%;
	height: auto;
}

.zd-hf__frame--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	aspect-ratio: 4 / 5;
	border: 1.5px dashed color-mix(in srgb, var(--zd-hf-accent) 40%, var(--zd-hf-border));
	padding: 32px;
	text-align: center;
	color: color-mix(in srgb, var(--zd-hf-accent) 55%, var(--zd-hf-muted));
}

.zd-hf__frame--empty svg { opacity: 0.85; }

.zd-hf__frame--empty span {
	max-width: 220px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.zd-hf__media--float .zd-hf__frame {
	animation: zd-hf-bob 6.5s ease-in-out infinite;
}

@keyframes zd-hf-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

/* --- responsive ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.zd-hf__inner { gap: 40px; }
	.zd-hf__frame { max-width: 460px; }
}

@media (max-width: 767px) {
	.zd-hf__inner,
	.zd-hf--left .zd-hf__inner {
		flex-direction: column-reverse;
		text-align: center;
	}

	.zd-hf__content { align-items: center; }
	.zd-hf__desc { max-width: 100%; }
	.zd-hf__actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.zd-hf__media--float .zd-hf__frame {
		animation: none !important;
	}
}

/* =========================================================================
   12. Schema-2 card parts - score, coupon, terms, verification
   Everything here renders only when the matching field is filled in, so
   existing deals degrade to the old card until they are backfilled.
   ========================================================================= */

.zd-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--zd-font-mono);
	font-size: 0.67rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--zd-r-sm);
	border: 1px solid transparent;
	white-space: nowrap;
}

.zd-chip--ember {
	background: var(--zd-ember-tint);
	color: var(--zd-ember);
	border-color: color-mix(in srgb, var(--zd-ember) 30%, transparent);
}

.zd-chip--neutral {
	background: var(--zd-surface);
	color: var(--zd-muted);
	border-color: var(--zd-hairline);
}

.zd-card__flag {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
}

/* ---- score, coloured by its own value ---- */

.zd-card__scoreline {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin: 4px 0 0;
}

.zd-card__score {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--zd-score-good);
}

.zd-score--fair { color: var(--zd-score-fair); }
.zd-score--weak { color: var(--zd-score-weak); }

.zd-card__scoremeta {
	font-size: 0.82rem;
	color: var(--zd-muted);
}

.zd-card__offerline {
	font-family: var(--zd-font-mono);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--zd-accent);
	margin: 6px 0 0;
}

/* ---- savings pill: computed, never typed ---- */

.zd-card__save {
	font-family: var(--zd-font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border-radius: 5px;
	padding: 3px 7px;
	margin-left: auto;
	white-space: nowrap;
}

/* ---- coupon ---- */

.zd-coupon {
	display: flex;
	align-items: stretch;
	border: 1px dashed var(--zd-hairline);
	border-radius: var(--zd-r-sm);
	overflow: hidden;
	background: var(--zd-surface);
	margin-top: 12px;
}

.zd-coupon__code {
	flex: 1;
	display: flex;
	align-items: center;
	font-family: var(--zd-font-mono);
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.11em;
	color: var(--zd-heading);
	padding: 10px 13px;
}

.zd-coupon__copy {
	font-family: var(--zd-font-sans);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border: 0;
	border-left: 1px dashed var(--zd-hairline);
	padding: 0 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--zd-dur-hover) ease, color var(--zd-dur-hover) ease;
}

.zd-coupon__copy:hover,
.zd-coupon__copy.is-copied {
	background: var(--zd-accent);
	color: var(--zd-on-accent);
}

/* ---- terms + verification ---- */

.zd-card__terms {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--zd-hairline);
	font-size: 0.82rem;
	color: var(--zd-muted);
}

.zd-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--zd-font-mono);
	font-size: 0.77rem;
	color: var(--zd-accent);
}

.zd-card__verified::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--zd-accent);
	flex: none;
}

.zd-card__review {
	display: block;
	margin-top: 9px;
	text-align: center;
	font-size: 0.83rem;
	color: var(--zd-muted);
	text-decoration: none;
	transition: color var(--zd-dur-hover) ease;
}

.zd-card__review:hover { color: var(--zd-accent); }

/* Touch targets meet the 44px platform minimum on coarse pointers. */
@media (pointer: coarse) {
	.zd-coupon__copy,
	.zd-card__review { min-height: 44px; }
	.zd-card__review { display: flex; align-items: center; justify-content: center; }
}


/* -------------------------------------------------------------------------
   [hidden] must win over the component display rules below it. Setting
   `display: grid` on .zd-row silently defeats the UA stylesheet, which is
   what made filtered-out rows keep rendering.
   ------------------------------------------------------------------------- */

.zd-index [hidden],
.zd-index__tray[hidden],
.zd-index__more[hidden],
.zd-row[hidden] {
	display: none !important;
}

/* =========================================================================
   13. Deals Index - the deals page
   ========================================================================= */

.zd-index { display: flex; flex-direction: column; gap: 24px; }

.zd-index__head { display: flex; flex-direction: column; gap: 10px; }

.zd-index__title {
	font-family: var(--zd-font-display);
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--zd-heading);
	margin: 0;
}

.zd-index__sub { margin: 0; color: var(--zd-body); max-width: 62ch; }

/* ---- counters ---- */

.zd-index__counters { display: flex; flex-wrap: wrap; gap: 28px; }

.zd-index__counter { display: flex; flex-direction: column; gap: 2px; }

.zd-index__counter b {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--zd-heading);
	line-height: 1;
}

.zd-index__counter span { font-size: 0.82rem; color: var(--zd-muted); }
.zd-index__counter--ember b { color: var(--zd-ember); }

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

.zd-index__controls {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--zd-hairline);
}

.zd-index__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.zd-index__row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
}

.zd-fchip,
.zd-tchip {
	font-family: var(--zd-font-sans);
	font-size: 0.86rem;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--zd-hairline);
	background: transparent;
	color: var(--zd-body);
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: background-color var(--zd-dur-hover) ease,
		color var(--zd-dur-hover) ease, border-color var(--zd-dur-hover) ease;
}

.zd-fchip:hover,
.zd-tchip:hover { border-color: var(--zd-muted); }

.zd-fchip.is-on {
	background: var(--zd-ink);
	color: #fff;
	border-color: var(--zd-ink);
	font-weight: 600;
}

.zd-fchip__n {
	font-family: var(--zd-font-mono);
	font-size: 0.72rem;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.zd-tchip {
	font-family: var(--zd-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--zd-r-sm);
	padding: 7px 11px;
}

.zd-tchip.is-on {
	background: var(--zd-accent-tint);
	color: var(--zd-accent);
	border-color: color-mix(in srgb, var(--zd-accent) 30%, transparent);
	font-weight: 600;
}

.zd-index__sortwrap { margin-left: auto; }

.zd-index__sort,
.zd-index__search {
	font-family: var(--zd-font-sans);
	font-size: 0.86rem;
	padding: 9px 13px;
	border-radius: var(--zd-r-sm);
	border: 1px solid var(--zd-hairline);
	background: transparent;
	color: var(--zd-heading);
}

.zd-index__searchwrap { flex: 1 1 200px; display: flex; }
.zd-index__search { width: 100%; }
.zd-index__search::placeholder { color: var(--zd-muted); }

/* ---- rows ---- */

.zd-index__list { display: flex; flex-direction: column; gap: 10px; }

.zd-row {
	display: grid;
	grid-template-columns: auto 56px 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--zd-hairline);
	border-radius: var(--zd-r-md);
	background: transparent;
	transition: border-color var(--zd-dur-hover) ease,
		box-shadow var(--zd-dur-hover) ease, transform var(--zd-dur-hover) var(--zd-ease);
}

.zd-row:hover {
	border-color: color-mix(in srgb, var(--zd-accent) 35%, var(--zd-hairline));
	box-shadow: var(--zd-shadow-hover);
	transform: translateY(var(--zd-lift));
}

.zd-row__pick { display: flex; align-items: center; }
.zd-row__pick input { width: 18px; height: 18px; accent-color: var(--zd-accent); cursor: pointer; }

.zd-row__logo {
	width: 56px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--zd-r-sm);
	background: var(--zd-surface);
	border: 1px solid var(--zd-hairline);
	overflow: hidden;
}

.zd-row__logo img { max-width: 80%; max-height: 70%; width: auto; height: auto; object-fit: contain; }

.zd-row__initials {
	font-family: var(--zd-font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--zd-muted);
	text-transform: uppercase;
}

.zd-row__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.zd-row__title {
	font-family: var(--zd-font-display);
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	color: var(--zd-heading);
	letter-spacing: -0.015em;
}

.zd-row__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	font-size: 0.82rem;
	color: var(--zd-muted);
}

.zd-row__score {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--zd-score-good);
}

.zd-row__verified { font-family: var(--zd-font-mono); font-size: 0.78rem; color: var(--zd-accent); }
.zd-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }

.zd-row__pricing {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
}

.zd-row__price { font-size: 1.2rem; font-weight: 600; color: var(--zd-heading); letter-spacing: -0.03em; }
.zd-row__old { font-size: 0.8rem; color: var(--zd-muted); }

.zd-row__save {
	font-family: var(--zd-font-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border-radius: 5px;
	padding: 3px 7px;
}

/* ---- empty, pagination, tray ---- */

.zd-index__empty {
	border: 1px dashed var(--zd-hairline);
	border-radius: var(--zd-r-md);
	padding: 30px;
	text-align: center;
	color: var(--zd-muted);
	margin: 0;
}

.zd-index__empty strong { display: block; color: var(--zd-heading); margin-bottom: 4px; }

.zd-index__clear {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--zd-font-sans);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border: 1px solid color-mix(in srgb, var(--zd-accent) 28%, transparent);
	border-radius: var(--zd-r-sm);
	padding: 9px 15px;
	cursor: pointer;
}

.zd-index__more { display: flex; justify-content: center; }

.zd-index__tray {
	position: sticky;
	bottom: 18px;
	z-index: 20;
	align-self: center;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px 11px 18px;
	border-radius: 999px;
	background: var(--zd-ink);
	color: #fff;
	box-shadow: var(--zd-shadow-hover);
}

.zd-index__traycount {
	font-family: var(--zd-font-mono);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.zd-index__traylabel { font-size: 0.86rem; opacity: 0.8; }

.zd-index__trayclear {
	background: none;
	border: 0;
	color: #fff;
	opacity: 0.75;
	font-family: var(--zd-font-sans);
	font-size: 0.84rem;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.zd-index__trayclear:hover { opacity: 1; }

@media (max-width: 860px) {
	.zd-row { grid-template-columns: auto 48px 1fr; row-gap: 12px; }
	.zd-row__flags { grid-column: 2 / -1; }
	.zd-row__end { grid-column: 2 / -1; align-items: stretch; }
	.zd-row__end .zd-btn { width: 100%; }
	.zd-index__sortwrap { margin-left: 0; }
}

@media (pointer: coarse) {
	.zd-fchip, .zd-tchip, .zd-index__sort, .zd-index__search, .zd-index__clear { min-height: 44px; }
	.zd-row__pick input { width: 22px; height: 22px; }
}

/* =========================================================================
   14. Deal Panel + comparison verdict caps
   ========================================================================= */

.zd-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	border: 1px solid var(--zd-hairline);
	border-radius: var(--zd-r-md);
	background: transparent;
	box-shadow: var(--zd-shadow-rest);
}

.zd-panel--sticky { position: sticky; align-self: start; }
.zd-panel--expired { opacity: 0.92; }

.zd-panel__expired {
	margin: 0;
	padding: 11px 13px;
	border-radius: var(--zd-r-sm);
	background: var(--zd-ember-tint);
	color: var(--zd-ember);
	font-size: 0.85rem;
	border: 1px solid color-mix(in srgb, var(--zd-ember) 28%, transparent);
}

.zd-panel__head { display: flex; align-items: flex-start; gap: 14px; }

.zd-panel__logo {
	width: 56px;
	height: 56px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--zd-r-sm);
	border: 1px solid var(--zd-hairline);
	background: var(--zd-surface);
	overflow: hidden;
}

.zd-panel__logo img { max-width: 78%; max-height: 70%; width: auto; height: auto; object-fit: contain; }

.zd-panel__ident { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }

.zd-panel__name {
	font-family: var(--zd-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: var(--zd-heading);
	letter-spacing: -0.02em;
}

.zd-panel__score { margin: 0; display: flex; align-items: baseline; gap: 7px; }

.zd-panel__scorenum {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--zd-score-good);
}

.zd-panel__scoreof { font-size: 0.8rem; color: var(--zd-muted); }
.zd-panel__flags { display: flex; flex-wrap: wrap; gap: 7px; }

.zd-panel__pricing {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
}

.zd-panel__price { font-size: 1.85rem; font-weight: 600; color: var(--zd-heading); letter-spacing: -0.035em; }
.zd-panel__old { font-size: 0.92rem; color: var(--zd-muted); }

.zd-panel__save {
	font-family: var(--zd-font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border-radius: 5px;
	padding: 4px 8px;
	margin-left: auto;
}

.zd-panel__terms {
	list-style: none;
	margin: 0;
	padding: 13px 0 0;
	border-top: 1px solid var(--zd-hairline);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--zd-muted);
}

.zd-panel__cta { width: 100%; }

.zd-panel__trust {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-family: var(--zd-font-mono);
	font-size: 0.78rem;
	color: var(--zd-muted);
}

.zd-panel__verified { color: var(--zd-accent); display: inline-flex; align-items: center; gap: 7px; }
.zd-panel__verified::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--zd-accent);
	flex: none;
}

.zd-panel__verdict,
.zd-panel__scores,
.zd-panel__fit { padding-top: 16px; border-top: 1px solid var(--zd-hairline); }

.zd-panel h3 {
	font-family: var(--zd-font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--zd-muted);
	margin: 0 0 10px;
}

.zd-panel__verdict p { margin: 0; color: var(--zd-body); font-size: 0.95rem; line-height: 1.6; }

.zd-panel__bars { display: flex; flex-direction: column; gap: 10px; }

.zd-panel__bar {
	display: grid;
	grid-template-columns: 1fr 76px 36px;
	gap: 11px;
	align-items: center;
	font-size: 0.84rem;
}

.zd-panel__bartrack {
	height: 6px;
	border-radius: 3px;
	background: var(--zd-track);
	overflow: hidden;
}

.zd-panel__barfill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: var(--zd-accent);
	transition: width 0.9s var(--zd-ease);
	transition-delay: calc(var(--zd-i, 0) * 80ms);
}

.zd-fill--fair { background: var(--zd-score-fair); }
.zd-fill--weak { background: var(--zd-score-weak); }

.zd-panel__bar b {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.82rem;
	font-weight: 600;
	text-align: right;
}

.zd-panel__fit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.zd-panel__fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.zd-panel__fit li {
	font-size: 0.86rem;
	color: var(--zd-body);
	padding-left: 18px;
	position: relative;
	line-height: 1.45;
}

.zd-panel__fit li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--zd-accent);
}

.zd-panel__fitcol--not li::before { background: var(--zd-ember); }

.zd-panel__review {
	display: block;
	text-align: center;
	font-size: 0.85rem;
	color: var(--zd-muted);
	text-decoration: none;
}

.zd-panel__review:hover { color: var(--zd-accent); }

/* ---- comparison verdict cap ---- */

.zd-compare__cap {
	display: block;
	text-align: center;
	font-family: var(--zd-font-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border: 1px solid color-mix(in srgb, var(--zd-accent) 28%, transparent);
	border-radius: var(--zd-r-sm);
	padding: 6px 10px;
	margin-bottom: 14px;
}

/* Only the top pick gets the solid fill, so one column leads. */
.zd-compare__cap--first {
	background: var(--zd-accent);
	color: var(--zd-on-accent);
	border-color: var(--zd-accent);
}

.zd-compare__pricenow { font-weight: 600; }
.zd-compare__priceold { color: var(--zd-muted); font-size: 0.85em; margin-left: 6px; }
.zd-compare__renewal { margin: 3px 0 0; font-size: 0.78rem; color: var(--zd-muted); }

.zd-compare__verified {
	margin: 10px 0 0;
	font-family: var(--zd-font-mono);
	font-size: 0.76rem;
	color: var(--zd-accent);
}

.zd-compare__review {
	display: block;
	margin-top: 9px;
	text-align: center;
	font-size: 0.82rem;
	color: var(--zd-muted);
	text-decoration: none;
}

.zd-compare__review:hover { color: var(--zd-accent); }

@media (max-width: 640px) {
	.zd-panel__fit { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
	.zd-panel__review, .zd-compare__review { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}


/* =========================================================================
   15. Zlaark Homepage - the whole page as one widget
   ========================================================================= */

.zd-home { display: block; }

/*
 * Sections bleed to the viewport edge while their inner column stays on the
 * container width, so the dark band and the marquee run edge to edge without
 * the page needing a separate full-width row per section.
 */
.zd-home__sec {
	margin-left: calc(50% - 50vw + var(--zd-sbw, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--zd-sbw, 0px) / 2);
	padding: 72px calc(50vw - 50% - var(--zd-sbw, 0px) / 2);
}

.zd-home__inner { margin-left: auto; margin-right: auto; }
.zd-home__tint { background: var(--zd-surface); }

/*
 * The eyebrow is a line of type with a rule, not a mono-caps category label.
 * It is meant to carry a fact - "Re-scored 18 August", "$8,400 spent testing" -
 * so it earns its place instead of decorating the heading below it.
 */
.zd-home__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--zd-font-sans);
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--zd-muted);
	margin: 0 0 12px;
}

.zd-home__eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--zd-hairline);
	flex: none;
}

.zd-home__head { margin-bottom: 30px; }

.zd-home__head h2 {
	font-family: var(--zd-font-display);
	font-size: clamp(1.45rem, 2.4vw, 1.8rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--zd-heading);
	margin: 0;
}

.zd-home__block { width: 100%; }
.zd-home__more { margin: 28px 0 0; display: flex; justify-content: center; }

/* ---- hero ---- */

.zd-home__hero {
	padding-top: 68px;
	padding-bottom: 76px;
}

.zd-home__herogrid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 60px; align-items: start; }
.zd-home__herogrid > .zd-home__board { margin-top: 48px; }

.zd-home__h1 {
	font-family: var(--zd-font-display);
	font-size: clamp(2.5rem, 5.6vw, 4.4rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.045em;
	color: var(--zd-heading);
	margin: 16px 0 0;
}

.zd-home__hl { font-style: normal; color: var(--zd-accent); }
.zd-home__lede { margin: 16px 0 0; font-size: 1.1rem; line-height: 1.55; max-width: 46ch; }
.zd-home__herocta { margin-top: 24px; }

/*
 * The savings board is a readout, not a card. Square corners, hard rules and a
 * reversed header keep it visually distinct from every deal card on the page -
 * if it wore the same chrome it would just read as one more panel.
 */
.zd-home__board {
	border: 1px solid var(--zd-ink);
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
}

.zd-home__boardhead {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	background: var(--zd-ink);
}

.zd-home__boardhead b {
	font-family: var(--zd-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--zd-on-accent);
}

.zd-home__live {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--zd-font-mono);
	font-size: 0.7rem;
	color: var(--zd-accent-lite);
}

.zd-home__live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zd-accent-lite);
}

.zd-home__boardrow {
	display: grid;
	grid-template-columns: 38px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 14px 19px;
	border-bottom: 1px solid var(--zd-hairline);
}

.zd-home__boardrow:last-child { border-bottom: 0; }

.zd-home__boardlogo {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--zd-surface);
	border: 1px solid var(--zd-hairline);
	font-family: var(--zd-font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--zd-muted);
	overflow: hidden;
}

.zd-home__boardlogo img { max-width: 78%; max-height: 70%; width: auto; height: auto; object-fit: contain; }
.zd-home__boardname { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zd-home__boardname b { font-size: 0.93rem; font-weight: 600; color: var(--zd-heading); }
.zd-home__boardname span { font-family: var(--zd-font-mono); font-size: 0.75rem; color: var(--zd-muted); }

.zd-home__boardpc {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.16rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--zd-heading);
}

/* ---- card grids ---- */

.zd-home__cards { display: grid; gap: 18px; align-items: stretch; }
.zd-home__cards--4 { grid-template-columns: repeat(4, 1fr); }
.zd-home__cards--3 { grid-template-columns: repeat(3, 1fr); }

.zd-home__sc,
.zd-home__dc,
.zd-home__pick {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 20px;
	border: 1px solid var(--zd-hairline);
	border-radius: var(--zd-r-md);
	box-shadow: var(--zd-shadow-rest);
	transition: transform var(--zd-dur-hover) var(--zd-ease),
		box-shadow var(--zd-dur-hover) var(--zd-ease),
		border-color var(--zd-dur-hover) ease;
}

.zd-home__sc:hover,
.zd-home__dc:hover,
.zd-home__pick:hover {
	transform: translateY(var(--zd-lift));
	box-shadow: var(--zd-shadow-hover);
	border-color: color-mix(in srgb, var(--zd-accent) 32%, var(--zd-hairline));
}

.zd-home__sctop { display: flex; align-items: center; gap: 12px; }
.zd-home__dchead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.zd-home__sclogo {
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--zd-surface);
	border: 1px solid var(--zd-hairline);
	font-family: var(--zd-font-mono);
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--zd-muted);
	overflow: hidden;
}

.zd-home__sclogo img { max-width: 78%; max-height: 70%; width: auto; height: auto; object-fit: contain; }

.zd-home__sc h3,
.zd-home__dc h3,
.zd-home__pick h3 {
	font-family: var(--zd-font-display);
	font-size: 1.02rem;
	font-weight: 700;
	margin: 0;
	color: var(--zd-heading);
	letter-spacing: -0.018em;
}

.zd-home__scov { margin: 2px 0 0; display: flex; align-items: baseline; gap: 6px; }
.zd-home__scov b { font-family: var(--zd-font-mono); font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 600; }
.zd-home__scov span { font-size: 0.76rem; color: var(--zd-muted); }

.zd-home__dcmeta { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: var(--zd-muted); }
.zd-home__dcmeta b { font-family: var(--zd-font-mono); font-variant-numeric: tabular-nums; font-size: 0.96rem; font-weight: 600; }

.zd-home__bars { display: flex; flex-direction: column; gap: 9px; }

.zd-home__bar {
	display: grid;
	grid-template-columns: 1fr 70px 32px;
	gap: 10px;
	align-items: center;
	font-size: 0.81rem;
}

.zd-home__bartrack { height: 6px; border-radius: 3px; background: var(--zd-track); overflow: hidden; }

.zd-home__barfill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: var(--zd-accent);
	transition: width 0.9s var(--zd-ease);
	transition-delay: calc(var(--zd-i, 0) * 80ms);
}

.zd-home__bar b {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	font-weight: 600;
	text-align: right;
}

.zd-home__scfoot {
	margin-top: auto;
	padding-top: 13px;
	border-top: 1px solid var(--zd-hairline);
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.zd-home__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
}

.zd-home__pricenow { font-size: 1.42rem; font-weight: 600; color: var(--zd-heading); letter-spacing: -0.03em; }
.zd-home__price s { font-size: 0.84rem; color: var(--zd-muted); }

.zd-home__save {
	font-style: normal;
	font-family: var(--zd-font-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border-radius: 5px;
	padding: 3px 7px;
	margin-left: auto;
}

.zd-home__dcterms {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--zd-hairline);
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 0.81rem;
	color: var(--zd-muted);
}

/* ---- picks ---- */

.zd-home__medal {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--zd-accent);
	color: var(--zd-on-accent);
	font-family: var(--zd-font-mono);
	font-weight: 600;
	font-size: 0.86rem;
}

.zd-home__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

/* Cards in a row carry different numbers of highlights, so the CTA is pushed
   to the base rather than floating wherever the content ends. */
.zd-home__pick > .zd-btn { margin-top: auto; }

.zd-home__ticks li { position: relative; padding-left: 20px; font-size: 0.88rem; line-height: 1.45; }

.zd-home__ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--zd-accent);
	border-bottom: 2px solid var(--zd-accent);
	transform: rotate(42deg);
}

/* ---- dark band ---- */

.zd-home__band { background: var(--zd-ink); }
.zd-home__band .zd-home__eyebrow { color: #9fb0a7; }
.zd-home__band .zd-home__eyebrow::before { background: #9fb0a7; opacity: .5; }

.zd-home__bandtitle {
	font-family: var(--zd-font-display);
	font-size: clamp(1.75rem, 3.3vw, 2.45rem);
	font-weight: 700;
	line-height: 1.08;
	color: #e8efea;
	margin: 0;
}

.zd-home__bandtext { margin: 14px 0 0; max-width: 58ch; color: #bdccc4; font-size: 1rem; line-height: 1.6; }

.zd-home__receipts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.zd-home__receipts div { display: flex; flex-direction: column; gap: 4px; }

.zd-home__receipts b {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 2.1rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--zd-accent-lite);
}

.zd-home__receipts span { font-size: 0.85rem; color: #9fb0a7; }


/* The dark band inverts the ground, so its headings must out-specify the
   shared display-heading colour rule above. */

.zd-home.zd-home .zd-home__band :is(h1, h2, h3, h4, h5, h6) {
	color: #e8efea;
}

.zd-home.zd-home .zd-home__band .zd-home__eyebrow {
	color: #9fb0a7;
}

/* ---- marquee section ---- */

.zd-home__mq { padding-top: 40px; padding-bottom: 40px; }

/* ---- closing CTA ---- */

.zd-home__cta {
	background: var(--zd-accent-tint);
	border: 1px solid color-mix(in srgb, var(--zd-accent) 22%, transparent);
	border-radius: var(--zd-r-md);
	padding: 28px 30px;
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

.zd-home__cta > div { flex: 1 1 300px; }
.zd-home__cta h2 { font-family: var(--zd-font-display); font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--zd-heading); }
.zd-home__cta p { margin: 5px 0 0; color: var(--zd-body); font-size: 0.94rem; }
.zd-home__ctaform { flex: 1 1 300px; }

@media (max-width: 1080px) {
	.zd-home__cards--4 { grid-template-columns: repeat(2, 1fr); }
	.zd-home__receipts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.zd-home__herogrid { grid-template-columns: 1fr; gap: 36px; }
	.zd-home__cards--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.zd-home__sec { padding-top: 52px; padding-bottom: 52px; }
	.zd-home__cards--3,
	.zd-home__cards--4 { grid-template-columns: 1fr; }
}


/* =========================================================================
   16. Zlaark Footer
   Closes the page the way the methodology band opens it. Colours come from
   footer-scoped tokens so the Style tab can recolour the whole block without
   any rule here needing a literal.
   ========================================================================= */

.zd-footer {
	--zd-footer-bg: #0a1310;
	--zd-footer-ink: #bdccc4;
	--zd-footer-heading: #e8efea;
	--zd-footer-accent: #5fd9a4;
	--zd-footer-rule: rgba(255, 255, 255, 0.13);

	/*
	 * The doubled reset (`.zd-footer.zd-footer :is(h1..h6)`) outranks any
	 * single-class rule here, so a heading would take the LIGHT-mode ink and
	 * vanish on this ground. Remap the generic tokens instead of fighting
	 * specificity - that also covers headings added later.
	 */
	--zd-ink: #e8efea;
	--zd-heading: #e8efea;
	--zd-body: #bdccc4;
	--zd-muted: #9fb0a7;
	--zd-hairline: rgba(255, 255, 255, 0.13);
	--zd-accent: #5fd9a4;
	--zd-surface: rgba(255, 255, 255, 0.04);

	background: var(--zd-footer-bg);
	color: var(--zd-footer-ink);
	margin-left: calc(50% - 50vw + var(--zd-sbw, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--zd-sbw, 0px) / 2);
	padding: 52px calc(50vw - 50% - var(--zd-sbw, 0px) / 2) 26px;
}

.zd-footer__inner {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.zd-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 32px;
}

.zd-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 13px;
	max-width: 34ch;
}

.zd-footer__logo { max-height: 34px; width: auto; }

.zd-footer__word {
	margin: 0;
	font-family: var(--zd-font-display);
	font-weight: 800;
	font-size: 1.06rem;
	letter-spacing: -0.03em;
	color: var(--zd-footer-heading);
}

.zd-footer__word span { color: var(--zd-footer-accent); }

.zd-footer__blurb {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--zd-footer-ink);
}

.zd-footer__figs { display: flex; gap: 22px; flex-wrap: wrap; }
.zd-footer__figs div { display: flex; flex-direction: column; }

.zd-footer__figs b {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--zd-footer-accent);
}

.zd-footer__figs span { font-size: 0.76rem; opacity: 0.8; }

/*
 * Column heads are navigation labels, not data, so they stay in the text face.
 * Mono caps is reserved for chips and figures, which keeps that treatment
 * meaning something instead of appearing everywhere.
 */
.zd-footer__colhead {
	margin: 0 0 13px;
	font-family: var(--zd-font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--zd-footer-heading);
}

.zd-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.zd-footer__col a {
	font-size: 0.88rem;
	color: var(--zd-footer-ink);
	text-decoration: none;
	transition: color var(--zd-dur-hover) ease;
}

.zd-footer__col a:hover { color: var(--zd-footer-accent); }

.zd-footer__money {
	border: 1px solid var(--zd-footer-rule);
	border-radius: var(--zd-r-md);
	padding: 20px 22px;
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.zd-footer__money > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 5px; }

.zd-footer__money b {
	font-family: var(--zd-font-display);
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--zd-footer-heading);
}

.zd-footer__money p { margin: 0; font-size: 0.85rem; line-height: 1.55; }
.zd-footer__money a { color: var(--zd-footer-accent); text-decoration: none; }
.zd-footer__money a:hover { text-decoration: underline; }

.zd-footer__legal {
	border-top: 1px solid var(--zd-footer-rule);
	padding-top: 19px;
	display: flex;
	flex-wrap: wrap;
	gap: 9px 20px;
	align-items: center;
	font-size: 0.81rem;
}

.zd-footer__legal a { color: var(--zd-footer-ink); text-decoration: none; }
.zd-footer__legal a:hover { color: var(--zd-footer-heading); text-decoration: underline; }
.zd-footer__sweep { margin-left: auto; opacity: 0.8; }

@media (max-width: 900px) {
	.zd-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.zd-footer__top { grid-template-columns: 1fr; }
	.zd-footer__sweep { margin-left: 0; }
}

@media (pointer: coarse) {
	.zd-footer__col a,
	.zd-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* =========================================================================
   17. Single deal pages without Elementor Pro
   The offer panel is injected into the_content, so a deal page gets the full
   treatment on free Elementor - or with Elementor switched off entirely.
   ========================================================================= */

.zd-single {
	--zd-font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--zd-font-display: 'Bricolage Grotesque', 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
	--zd-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
	--zd-accent: #0b7a4f;
	--zd-accent-2: #065f42;
	--zd-accent-lite: #5fd9a4;
	--zd-accent-tint: #e6f5ee;
	--zd-on-accent: #ffffff;
	--zd-ember: #c2410c;
	--zd-ember-tint: #fff1e6;
	--zd-ink: #0a1310;
	--zd-heading: #101a16;
	--zd-body: #4a5a52;
	--zd-muted: #5e6c64;
	--zd-hairline: #dce3df;
	--zd-surface: #f4f7f5;
	--zd-track: #ebf0ed;
	--zd-score-good: #0b7a4f;
	--zd-score-fair: #a16207;
	--zd-score-weak: #b91c1c;
	--zd-r-sm: 8px;
	--zd-r-md: 16px;
	--zd-r-lg: 28px;
	--zd-shadow-rest: 0 1px 2px rgba(10, 19, 16, 0.05);
	--zd-shadow-hover: 0 12px 32px rgba(10, 19, 16, 0.10);
	--zd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--zd-dur-hover: 180ms;
	--zd-lift: -4px;
}

.zd-single--side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 40px;
	align-items: start;
}

.zd-single__body { min-width: 0; }

.zd-single--above .zd-panel { margin-bottom: 32px; }

/* The panel only sticks when it sits beside the content. */
.zd-single--above .zd-panel--sticky { position: static; }

@media (max-width: 900px) {
	.zd-single--side { grid-template-columns: 1fr; gap: 28px; }
	.zd-single--side .zd-panel--sticky { position: static; }
	/* On one column the offer belongs above the long read, not buried under it. */
	.zd-single__aside { order: -1; }
}



/* =========================================================================
   18. The card system
   One rule: a card is a stack of optional slots with a guaranteed minimum,
   and the minimum still has to look composed. The body slot always carries
   something - score bars, a highlights checklist, or the tagline - so a thin
   deal can never render as a hairline floating above an empty gap.
   ========================================================================= */

.zd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border: 1px solid var(--zd-hairline);
	border-radius: var(--zd-r-md);
	box-shadow: var(--zd-shadow-rest);
	transition: transform var(--zd-dur-hover) var(--zd-ease),
		box-shadow var(--zd-dur-hover) var(--zd-ease),
		border-color var(--zd-dur-hover) ease;
}

.zd-card:hover {
	transform: translateY(var(--zd-lift));
	box-shadow: var(--zd-shadow-hover);
	border-color: color-mix(in srgb, var(--zd-accent) 32%, var(--zd-hairline));
}

/* ---- verdict cap / rank / urgency ---- */

.zd-card__cap {
	align-self: flex-start;
	font-family: var(--zd-font-mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border: 1px solid color-mix(in srgb, var(--zd-accent) 26%, transparent);
	border-radius: var(--zd-r-sm);
	padding: 5px 10px;
}

/* Only the top pick gets the solid fill, so one column leads the row. */
.zd-card__cap--lead {
	background: var(--zd-accent);
	color: var(--zd-on-accent);
	border-color: var(--zd-accent);
}

.zd-card__rank {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--zd-ink);
	color: var(--zd-on-accent);
	font-family: var(--zd-font-mono);
	font-weight: 600;
	font-size: 0.84rem;
}

.zd-card__flag {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: var(--zd-font-mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--zd-ember);
	background: var(--zd-ember-tint);
	border: 1px solid color-mix(in srgb, var(--zd-ember) 28%, transparent);
	border-radius: var(--zd-r-sm);
	padding: 4px 9px;
}

/* ---- brand row: logo, name, score, all on one line ---- */

.zd-cbrand {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
}

.zd-cbrand__logo {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--zd-surface);
	overflow: hidden;
}

.zd-cbrand__logo img {
	max-width: 84%;
	max-height: 76%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.zd-cbrand__logo i {
	font-style: normal;
	font-family: var(--zd-font-mono);
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--zd-muted);
	text-transform: uppercase;
}

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

.zd-cbrand__id h3 {
	margin: 0;
	font-family: var(--zd-font-display);
	font-size: 1.04rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.018em;
	color: var(--zd-heading);
}

.zd-cbrand__id span {
	font-size: 0.78rem;
	color: var(--zd-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zd-cscore {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 6px 8px;
	border-radius: var(--zd-r-sm);
	background: var(--zd-accent-tint);
	color: var(--zd-score-good);
	line-height: 1;
}

.zd-cscore b {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.04rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.zd-cscore i {
	font-style: normal;
	font-size: 0.55rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.72;
	margin-top: 3px;
}

.zd-cscore.zd-score--fair {
	background: color-mix(in srgb, var(--zd-score-fair) 13%, transparent);
	color: var(--zd-score-fair);
}

.zd-cscore.zd-score--weak {
	background: color-mix(in srgb, var(--zd-score-weak) 11%, transparent);
	color: var(--zd-score-weak);
}

/* ---- price: the savings stays with the price it describes ---- */

.zd-cprice {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
}

.zd-cprice b {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--zd-heading);
}

.zd-cprice--word { font-size: 1.16rem; letter-spacing: -0.02em; }
.zd-cprice s { font-size: 0.84rem; color: var(--zd-muted); }

.zd-cprice em {
	font-style: normal;
	font-family: var(--zd-font-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--zd-accent);
	background: var(--zd-accent-tint);
	border-radius: 5px;
	padding: 3px 7px;
}

/*
 * The body slot absorbs the slack when cards in a row are stretched to match.
 * Putting it here rather than above the footer is what keeps the empty gap
 * from opening up under a divider.
 */
.zd-card__slot { flex: 1 1 auto; display: flex; flex-direction: column; }
.zd-card__slot:empty { display: none; }

.zd-cbody { margin: 0; }

.zd-cbody--bars { display: flex; flex-direction: column; gap: 9px; }

.zd-cbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 68px 34px;
	gap: 10px;
	align-items: center;
	font-size: 0.82rem;
	color: var(--zd-body);
}

.zd-cbar__track { height: 6px; border-radius: 3px; background: var(--zd-track); overflow: hidden; }

.zd-cbar__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: var(--zd-accent);
	transition: width 0.9s var(--zd-ease);
	transition-delay: calc(var(--zd-i, 0) * 80ms);
}

.zd-cbar b {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.82rem;
	font-weight: 600;
	text-align: right;
}

.zd-cbody--ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.zd-cbody--ticks li {
	position: relative;
	padding-left: 21px;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--zd-body);
}

.zd-cbody--ticks li::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 0.4em;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--zd-accent);
	border-bottom: 2px solid var(--zd-accent);
	transform: rotate(42deg);
}

.zd-cbody--text { font-size: 0.88rem; line-height: 1.55; color: var(--zd-body); }

/* ---- terms: the divider only exists because there is content below it ---- */

.zd-cterms {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-top: 13px;
	border-top: 1px solid var(--zd-hairline);
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--zd-muted);
}

.zd-cverified {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--zd-font-mono);
	font-size: 0.76rem;
	color: var(--zd-accent);
}

.zd-cverified::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--zd-accent);
	flex: none;
}

.zd-card__foot { display: flex; flex-direction: column; gap: 8px; }

.zd-card__review {
	text-align: center;
	font-size: 0.8rem;
	color: var(--zd-muted);
	text-decoration: none;
	transition: color var(--zd-dur-hover) ease;
}

.zd-card__review:hover { color: var(--zd-accent); }

/* =========================================================================
   19. Browse by category · Ending soon · How we test · Questions
   ========================================================================= */

.zd-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.zd-cats__tile {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 18px;
	border: 1px solid var(--zd-hairline);
	border-radius: var(--zd-r-md);
	text-decoration: none;
	transition: border-color var(--zd-dur-hover) ease, transform var(--zd-dur-hover) var(--zd-ease);
}

.zd-cats__tile:hover {
	border-color: color-mix(in srgb, var(--zd-accent) 40%, var(--zd-hairline));
	transform: translateY(-3px);
}

.zd-cats__top { display: flex; flex-direction: column; gap: 3px; }

.zd-cats__name {
	font-family: var(--zd-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--zd-heading);
}

/* The reason to click, not the size of the pile behind it. */
.zd-cats__best {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--zd-accent);
}

/* Share of the catalogue, so the tiles read as a set rather than a list. */
.zd-cats__bar { display: block; height: 3px; border-radius: 2px; background: var(--zd-track); overflow: hidden; }

.zd-cats__bar i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: color-mix(in srgb, var(--zd-accent) 55%, transparent);
}

.zd-cats__n { font-family: var(--zd-font-mono); font-size: 0.74rem; color: var(--zd-muted); }

/* -------------------------------------------------------------------------
   The readout: used by the hero savings board and by "ending soon". Square,
   hard-ruled and mono-led, so it reads as an instrument rather than a card -
   and reusing it makes it a motif instead of a one-off.
   ------------------------------------------------------------------------- */

.zd-board { border: 1px solid var(--zd-ink); border-radius: 0; overflow: hidden; }

.zd-board__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	background: var(--zd-ink);
}

.zd-board__head b {
	font-family: var(--zd-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--zd-on-accent);
}

.zd-board__live {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--zd-font-mono);
	font-size: 0.7rem;
	color: var(--zd-accent-lite);
}

.zd-board__live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--zd-accent-lite);
}

.zd-board--ember .zd-board__live { color: var(--zd-ember-lite); }
.zd-board--ember .zd-board__live::before { background: var(--zd-ember-lite); }

.zd-board__row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto auto;
	gap: 16px;
	align-items: center;
	padding: 13px 16px;
	border-bottom: 1px solid var(--zd-hairline);
	background: var(--zd-paper, transparent);
}

.zd-board__row:last-child { border-bottom: 0; }

.zd-board__logo {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 4px;
	background: var(--zd-surface);
	overflow: hidden;
}

.zd-board__logo img { max-width: 80%; max-height: 74%; width: auto; height: auto; object-fit: contain; }

.zd-board__logo i {
	font-style: normal;
	font-family: var(--zd-font-mono);
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--zd-muted);
	text-transform: uppercase;
}

.zd-board__name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zd-board__name b { font-size: 0.95rem; font-weight: 600; color: var(--zd-heading); }

.zd-board__name span {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
	color: var(--zd-muted);
}

.zd-board__name s { opacity: 0.75; }

/* The countdown is the loudest thing on the row, because it is the point. */
.zd-board__count {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 62px;
	padding: 5px 9px;
	border-radius: var(--zd-r-sm);
	background: var(--zd-ember-tint);
	color: var(--zd-ember);
	line-height: 1;
}

.zd-board__count b {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.24rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.zd-board__count i {
	font-style: normal;
	font-size: 0.56rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.8;
	margin-top: 3px;
}

@media (max-width: 720px) {
	.zd-board__row { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 12px; }
	.zd-board__go { grid-column: 2 / -1; }
	.zd-board__go .zd-btn { width: 100%; }
}

/* ---- how we test: numbered because it genuinely is a sequence ---- */

.zd-method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 26px;
}

.zd-method li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }

.zd-method__n {
	font-family: var(--zd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--zd-accent);
	padding-top: 3px;
	border-top: 2px solid var(--zd-accent);
}

.zd-method h3 {
	margin: 0 0 5px;
	font-family: var(--zd-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--zd-heading);
}

.zd-method p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--zd-body); }

/* ---- questions ---- */

.zd-faq {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--zd-hairline);
	max-width: 72ch;
}

.zd-faq__item { border-bottom: 1px solid var(--zd-hairline); }

.zd-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 17px 34px 17px 0;
	position: relative;
	font-family: var(--zd-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--zd-heading);
}

.zd-faq__item summary::-webkit-details-marker { display: none; }

.zd-faq__item summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid var(--zd-muted);
	border-bottom: 2px solid var(--zd-muted);
	transform: rotate(45deg);
	transition: transform var(--zd-dur-hover) var(--zd-ease);
}

.zd-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.zd-faq__item p {
	margin: 0;
	padding: 0 34px 19px 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--zd-body);
	max-width: 68ch;
}

@media (pointer: coarse) {
	.zd-card__review { min-height: 44px; display: flex; align-items: center; justify-content: center; }
	.zd-faq__item summary { padding-top: 20px; padding-bottom: 20px; }
}


/* =========================================================================
   20. About us
   For a review site this section IS the credibility argument, so it names the
   people who do the testing rather than describing a "passionate team".
   ========================================================================= */

.zd-about2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }

.zd-about2__lead h2 {
	margin: 0;
	font-family: var(--zd-font-display);
	font-size: clamp(1.45rem, 2.4vw, 1.8rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--zd-heading);
}

.zd-about2__text { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--zd-body); max-width: 42ch; }
.zd-about2__cta { margin-top: 20px; }

.zd-about2__people {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.zd-about2__people li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; align-items: start; }

.zd-about2__photo {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--zd-surface);
	display: grid;
	place-items: center;
}

.zd-about2__photo img { width: 100%; height: 100%; object-fit: cover; }

.zd-about2__photo i {
	font-style: normal;
	font-family: var(--zd-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--zd-muted);
}

.zd-about2__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.zd-about2__who b {
	font-family: var(--zd-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--zd-heading);
}

.zd-about2__role {
	font-family: var(--zd-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--zd-accent);
}

.zd-about2__line { font-size: 0.87rem; line-height: 1.55; color: var(--zd-body); margin-top: 3px; }

@media (max-width: 900px) {
	.zd-about2 { grid-template-columns: 1fr; gap: 32px; }
}


/* =========================================================================
   Eyebrows
   A pill with a pulsing dot is the default treatment everywhere on the web
   right now, which is exactly why it stopped reading as a signal. These say
   the same thing with a rule and a line of text - quieter, and the rule
   doubles as the optical left edge for the headline underneath it.
   ========================================================================= */

.zd-hero__dot,
.zd-hc__eyebrow-icon,
.zd-bento__eyebrow-dot {
	flex: 0 0 auto;
	width: 26px;
	height: 1px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--zd-accent);
	box-shadow: none;
	animation: none;
	overflow: hidden;
	text-indent: -999px;
}

.zd-hero__dot::after,
.zd-bento__eyebrow-dot::after { content: none; }
.zd-hc__eyebrow-icon svg { display: none; }


/* =========================================================================
   Visually hidden
   The index used WordPress's `.screen-reader-text`, which is a THEME class -
   nothing here defines it. On a theme that omits it (or an Elementor canvas
   template) the label text laid out at full width and pushed the first grid
   track to 241px, collapsing the deal title to 31px at 390px wide. Owning the
   class removes the dependency.
   ========================================================================= */

.zd-index .screen-reader-text,
.zd-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A grid child defaults to min-width:auto, so one unbreakable run can force a
   track wider than the row. These may all shrink. */
.zd-row > * { min-width: 0; }


/* A four-up card row is too tight for a price and its struck original on a
   tablet; the grid only stepped down at 767px, so 768-1024 overflowed. */
@media (min-width: 768px) and (max-width: 1024px) {
	.zd-picks__grid,
	.zd-home__cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* =========================================================================
   Fail-visible
   Every entrance effect here hides its element first and reveals it later.
   That is fine while the runtime is alive and a disaster when it is not: a
   deferred script, a caching plugin that drops the handle, or a widget that
   mounts without firing Elementor's ready hook all leave a blank section on
   the page with no error to explain it.

   So hiding is opt-in. `.zd-js` is set by the runtime on the first line it
   executes; without it, nothing hides. And inside the Elementor editor
   everything is shown outright, because an entrance animation in a canvas the
   author is editing is noise at best and reads as a broken widget at worst.
   ========================================================================= */

/* :not(.is-in) rather than a bare .zd-reveal, because this rule sits at the
   end of the file and would otherwise outrank the .is-in rule that reveals
   them - which would hide every section permanently. */
.zd-js .zd-reveal:not(.is-in) { opacity: 0; }

.elementor-editor-active .zd-reveal,
.elementor-editor-preview .zd-reveal {
	opacity: 1 !important;
	translate: none !important;
	scale: none !important;
	rotate: none !important;
}

.elementor-editor-active .zd-nav--intro .zd-nav__logo,
.elementor-editor-active .zd-nav--intro .zd-nav__menu,
.elementor-editor-active .zd-nav--intro .zd-nav__inner > .zd-nav__actions {
	animation: none;
	opacity: 1;
	translate: none;
}