/*
 * Reference skin — the look of the reference design (refrence/src, React + Tailwind) on the WordPress theme.
 *
 *   1. Palette: the reference colours (cream #FAF9F6 page, white #FFFFFF surfaces, zinc greys for text,
 *      lines and subtle fills) replace the theme's canvas / ink / line tokens site-wide.
 *      Buttons keep the theme's green (--brand) — the only accent.
 *   2. Homepage sections (#main.site-main--home, the hero excluded): reference section rhythm
 *      (py-12 / md:py-16, alternating cream / white bands with a hairline between them), «// eyebrow» +
 *      font-black headings with the description beside the title, white / cream bordered cards
 *      (rounded-2xl / 3xl), grey numbers, zinc-900 chips and dark zinc blocks.
 *
 * The hero keeps its current look (old token values re-declared locally) on the cream background.
 * Loaded after every other stylesheet (inc/enqueue.php → winners_enqueue_reference_skin).
 */

/* ================================================================== 1. palette */

/* Local monospace faces limited to printable ASCII without the space, so Persian text keeps its own spacing. */
@font-face {
	font-family: "Winners Ref Mono";
	src: local("JetBrains Mono"), local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"), local("Courier New");
	unicode-range: U+0021-007E;
	font-display: swap;
}

:root {
	/* Reference tokens (refrence/src/index.css + the Tailwind zinc scale it uses). */
	--ref-cream: #faf9f6;
	--ref-white: #ffffff;
	--zinc-50: #fafafa;
	--zinc-100: #f4f4f5;
	--zinc-200: #e4e4e7;
	--zinc-300: #d4d4d8;
	--zinc-400: #a1a1aa;
	--zinc-500: #71717a;
	--zinc-600: #52525b;
	--zinc-700: #3f3f46;
	--zinc-800: #27272a;
	--zinc-900: #18181b;
	--zinc-950: #09090b;
	--ref-border: rgb(228 228 231 / 0.8);
	--ref-hairline: rgb(228 228 231 / 0.6);
	--ref-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--ref-emerald: #059669;
	--ref-emerald-soft: #ecfdf5;
	--ref-emerald-line: rgb(167 243 208 / 0.6);
	--ref-emerald-ink: #065f46;
	/* Technical labels: a monospace face for Latin letters/digits only, Vazirmatn for Persian and spaces. */
	--ref-mono: "Winners Ref Mono", var(--font);

	/* Theme tokens mapped onto the reference palette. */
	--canvas: var(--ref-cream);
	--canvas-2: var(--zinc-100);
	--surface: var(--ref-white);
	--ink: #121417;
	--ink-2: var(--zinc-600);
	--ink-3: var(--zinc-500);
	--color-shade-30: var(--zinc-300);
	--color-shade-40: var(--zinc-400);
	--line: var(--ref-border);
	--line-strong: var(--zinc-300);
	--night: var(--zinc-900);
	--night-2: var(--zinc-800);
	--ambient-mint: transparent;
	--ambient-glacier: transparent;
	--ambient-sand: transparent;
}

body {
	background: var(--canvas);
}

/* The hero keeps its previous look (own copy of the old tokens) on the reference cream background. */
.hero {
	--canvas: var(--ref-cream);
	--canvas-2: #e9e9eb;
	--ink: #121212;
	--ink-2: #4a4a4a;
	--ink-3: #6b6b6b;
	--line: rgb(18 18 18 / 0.1);
	--line-strong: rgb(18 18 18 / 0.18);
	--night: #1a1a1a;
	--night-2: #262626;
	--ambient-mint: rgb(18 18 18 / 0.05);
	--ambient-glacier: rgb(18 18 18 / 0.06);
	--ambient-sand: rgb(18 18 18 / 0.035);
}

/* ================================================================== 2. homepage sections */

/* «۰۱، ۰۲ …» — Persian digits padded to two places, like the numbers of the reference cards. */
@counter-style winners-fa-pad {
	system: extends persian;
	pad: 2 "۰";
}

/* ---------------------------------------------------------------- bands */

/* The cream hero is child 1, so the bands alternate white / cream after it. */
#main.site-main--home > .section {
	padding-block: 3rem;
	border-bottom: 1px solid var(--ref-hairline);
	/* Cards sit on the other colour of the band: cream cards on white, white cards on cream. */
	--ref-bg: var(--ref-white);
	--ref-card: var(--ref-cream);
	background: var(--ref-bg);
	color: var(--zinc-600);
}

#main.site-main--home > .section:nth-child(odd) {
	--ref-bg: var(--ref-cream);
	--ref-card: var(--ref-white);
}

#main.site-main--home > .section:last-child {
	border-bottom: 0;
}

@media (min-width: 768px) {
	#main.site-main--home > .section {
		padding-block: 4rem;
	}
}

.site-main--home .section :is(h1, h2, h3, h4) {
	color: var(--zinc-950);
}

/* ---------------------------------------------------------------- section heading */

.site-main--home .section .section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 2rem;
}

.site-main--home .section .section-head__text {
	display: block;
	flex: 1 1 28rem;
	max-width: none;
}

.site-main--home .section .eyebrow {
	display: block;
	margin: 0 0 0.75rem;
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.site-main--home .section .eyebrow::before {
	content: "// ";
}

.site-main--home .section .section-head__title {
	max-width: 42rem;
	color: var(--zinc-950);
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1.25;
}

.site-main--home .section .section-head__description {
	max-width: 36rem;
	margin-top: 1rem;
	color: var(--zinc-600);
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

.site-main--home .section-head--center {
	justify-content: center;
	text-align: center;
}

.site-main--home .section .section-head--center .section-head__title,
.site-main--home .section .section-head--center .section-head__description {
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 640px) {
	.site-main--home .section .section-head__title {
		font-size: 2.25rem;
	}

	.site-main--home .section .section-head__description {
		font-size: 1rem;
	}
}

@media (min-width: 768px) {
	.site-main--home .section .section-head__title {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	/* Full-width headings: eyebrow + title on one side, the description beside them (reference layout). */
	:is(.site-main--home .section > .container, .site-main--home .how-it-works--no-photo .how-it-works__intro) > .section-head:not(.section-head--center) .section-head__text:has(> .section-head__description) {
		display: grid;
		grid-template-columns: minmax(0, 42rem) minmax(0, 28rem);
		justify-content: space-between;
		align-items: end;
		column-gap: 2rem;
	}

	:is(.site-main--home .section > .container, .site-main--home .how-it-works--no-photo .how-it-works__intro) > .section-head:not(.section-head--center) :is(.eyebrow, .section-head__title) {
		grid-column: 1;
	}

	:is(.site-main--home .section > .container, .site-main--home .how-it-works--no-photo .how-it-works__intro) > .section-head:not(.section-head--center) .section-head__description {
		grid-column: 2;
		grid-row: 1 / span 2;
		max-width: 28rem;
		margin: 0;
		text-align: right;
	}
}

/* ---------------------------------------------------------------- shared card pieces */

.ref-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pest categories stay two-up on phones (short cards); the text-heavy grids stack. */
.ref-grid--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.ref-grid--2,
	.ref-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ref-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ref-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ref-grid > li {
	display: flex;
}

.ref-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 2rem;
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--ref-card, var(--ref-white));
	box-shadow: var(--ref-shadow-xs);
	color: var(--zinc-600);
	text-decoration: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ref-card:hover {
	border-color: var(--zinc-300);
	color: var(--zinc-600);
}

.ref-num {
	color: var(--zinc-300);
	font-family: var(--ref-mono);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.2;
	transition: color 0.3s ease;
}

.ref-num--lg {
	font-size: 2.25rem;
}

.ref-card:hover .ref-num {
	color: var(--zinc-900);
}

.ref-icon-box {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 0.75rem;
	background: var(--zinc-100);
	color: var(--zinc-700);
}

.ref-icon-box .icon {
	width: 20px;
	height: 20px;
}

.ref-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.5rem;
	border-top: 1px solid var(--zinc-100);
	color: var(--zinc-700);
	font-size: 0.75rem;
	font-weight: 600;
}

.ref-card__foot .icon {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.ref-card:hover .ref-card__foot .icon {
	transform: translate(-2px, -2px);
}

.ref-card__foot--quiet {
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.625rem;
	font-weight: 400;
}

/* ---------------------------------------------------------------- pest categories (BrandIntro pillars) */

.ref-pillar {
	padding: 2rem;
	border-radius: 1rem;
}

.ref-pillar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.ref-pillar__media {
	display: block;
	margin-bottom: 1.25rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--zinc-100);
}

.ref-pillar__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

.ref-pillar:hover .ref-pillar__image {
	transform: scale(1.04);
}

.ref-pillar__title {
	margin-bottom: 1.5rem;
	color: var(--zinc-900);
	font-size: 1.125rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------- feature grid (WhyWinners advantages) */

.ref-adv__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--zinc-100);
}

.ref-adv__sub {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
}

.ref-adv__title {
	margin-bottom: 0.75rem;
	color: var(--zinc-950);
	font-size: 1.25rem;
	font-weight: 700;
}

.ref-adv__text {
	margin-bottom: 1.5rem;
	color: var(--zinc-600);
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

/* ---------------------------------------------------------------- how it works (HowItWorks step cards) */

.site-main--home .how-it-works__grid {
	gap: 2rem;
	align-items: start;
}

.site-main--home .how-it-works .section-head {
	margin-bottom: 2rem;
}

.site-main--home .how-it-works__photo {
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--zinc-100);
}

.site-main--home .how-it-works__steps-wrap {
	gap: 2rem;
}

.site-main--home .steps {
	position: relative;
	gap: 1.5rem;
}

.site-main--home .steps__item,
.site-main--home .steps__item:first-child {
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 2rem;
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--ref-card);
	box-shadow: var(--ref-shadow-xs);
	transition: border-color 0.3s ease;
}

.site-main--home .steps__item::before {
	display: none;
}

.site-main--home .steps__item:hover {
	border-color: var(--zinc-300);
}

.site-main--home .steps__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.site-main--home .steps__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--zinc-200);
	border-radius: 1rem;
	background: var(--ref-white);
	box-shadow: var(--ref-shadow-xs);
	color: var(--zinc-900);
}

.site-main--home .steps__item:nth-child(3n) .steps__icon {
	color: var(--ref-emerald);
}

.site-main--home .steps__icon .icon {
	width: 20px;
	height: 20px;
}

.site-main--home .steps__num {
	color: var(--zinc-300);
	font-family: var(--ref-mono);
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1.2;
	transition: color 0.3s ease;
}

.site-main--home .steps__item:hover .steps__num {
	color: var(--zinc-900);
}

.site-main--home .how-it-works .steps__title {
	margin-bottom: 0.75rem;
	color: var(--zinc-950);
	font-size: 1.125rem;
	font-weight: 700;
}

.site-main--home .steps__text {
	color: var(--zinc-600);
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

/* Without a photo: heading on top, the steps as a horizontal 3-card timeline (reference layout). */
.site-main--home .how-it-works--no-photo .how-it-works__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

@media (min-width: 1024px) {
	.site-main--home .how-it-works--no-photo .steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}

	.site-main--home .how-it-works--no-photo .steps::before {
		position: absolute;
		top: 3.5rem;
		right: 4rem;
		left: 4rem;
		height: 2px;
		background: var(--zinc-200);
		content: "";
	}
}

/* ---------------------------------------------------------------- frequency visualizer (Technology panel) */

.site-main--home .freq-viz {
	--fv-grid: #e4e4e7;
	--fv-baseline: #18181b;
	--fv-wave: #18181b;
	--fv-static: #a1a1aa;
}

.site-main--home .freq-viz :is(h1, h2, h3) {
	color: var(--zinc-950);
}

.site-main--home .freq-viz .section-head__description {
	color: var(--zinc-600);
}

.site-main--home .freq-viz__panel,
.site-main--home .freq-viz__panel.glass--dark {
	padding: 1.5rem;
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--ref-card);
	box-shadow: none;
	color: var(--zinc-600);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.site-main--home .freq-viz__panel::before {
	display: none;
}

@media (min-width: 640px) {
	.site-main--home .freq-viz__panel,
	.site-main--home .freq-viz__panel.glass--dark {
		padding: 2.5rem;
	}
}

.site-main--home .freq-viz__readout {
	color: var(--zinc-950);
}

.site-main--home .freq-viz__value {
	font-family: var(--ref-mono);
	font-weight: 900;
}

.site-main--home .freq-viz__unit,
.site-main--home .freq-viz__presets-label {
	color: var(--zinc-400);
	font-size: 0.75rem;
}

.site-main--home .freq-viz__stage {
	border: 1px solid var(--ref-border);
	border-radius: 1rem;
	background: var(--ref-white);
}

.site-main--home .freq-viz__badge {
	border: 1px solid var(--zinc-200);
	background: rgb(255 255 255 / 0.9);
	box-shadow: none;
	color: var(--zinc-600);
	font-family: var(--ref-mono);
	font-size: 0.6875rem;
}

/* ---------------------------------------------------------------- chips, icon buttons, slider (reference controls) */

.site-main--home .section .chip,
.site-main--home .section .chip--dark {
	min-height: 0;
	padding: 0.625rem 1rem;
	border: 1px solid var(--ref-border);
	border-radius: 0.75rem;
	background: var(--ref-white);
	box-shadow: none;
	color: var(--zinc-600);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site-main--home .section button.chip:hover {
	border-color: var(--zinc-400);
	background: var(--zinc-100);
	color: var(--zinc-900);
}

.site-main--home .section .chip[aria-pressed="true"],
.site-main--home .section .chip.is-active,
.site-main--home .section .chip[aria-selected="true"] {
	border-color: var(--zinc-900);
	background: var(--zinc-900);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	color: #fff;
}

.site-main--home .section .icon-btn,
.site-main--home .section .icon-btn--dark {
	width: 40px;
	height: 40px;
	border: 1px solid var(--zinc-200);
	border-radius: 0.75rem;
	background: var(--ref-white);
	box-shadow: none;
	color: var(--zinc-700);
}

.site-main--home .section .icon-btn:hover {
	background: var(--zinc-100);
	color: var(--zinc-900);
}

.site-main--home .section .icon-btn .icon {
	width: 16px;
	height: 16px;
}

.site-main--home .slider-nav__dot {
	width: 8px;
	height: 8px;
	background: var(--zinc-300);
}

.site-main--home .slider-nav__dot.is-active {
	width: 24px;
	background: var(--zinc-900);
}

/* ---------------------------------------------------------------- engineering specs (stats band) */

.site-main--home .engineering {
	color: var(--zinc-600);
}

.site-main--home .engineering__bg {
	display: none;
}

.site-main--home .engineering__grid {
	gap: 2rem;
}

.site-main--home .engineering__specs {
	gap: 1.5rem;
}

.site-main--home .spec-card,
.site-main--home .spec-card.glass--dark {
	justify-content: flex-end;
	padding: 2rem;
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--ref-card);
	box-shadow: none;
	color: var(--zinc-600);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.site-main--home .spec-card::before {
	display: none;
}

.site-main--home .spec-card__value {
	color: var(--zinc-950);
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1.2;
}

.site-main--home .spec-card__label {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ref-hairline);
	color: var(--zinc-500);
	font-size: 0.8125rem;
	font-weight: 600;
}

@media (min-width: 1024px) {
	.site-main--home .spec-card__value {
		font-size: 3rem;
	}
}

/* The dark-glass button of the (formerly dark) band becomes the regular light glass button. */
.site-main--home .engineering .btn--glass-dark {
	background: var(--glass-fill);
	box-shadow: var(--glass-shadow);
	color: var(--ink);
}

.site-main--home .engineering .btn--glass-dark::before {
	background: var(--glass-rim);
}

.site-main--home .engineering .btn--glass-dark:hover {
	background: var(--glass-fill-strong);
	color: var(--ink);
}

/* ---------------------------------------------------------------- applications */

.site-main--home .applications__tabs {
	gap: 0.5rem;
	margin-bottom: 2rem;
	padding: 0 0 0.25rem;
}

.site-main--home .applications__card {
	border: 1px solid rgb(228 228 231 / 0.9);
	border-radius: 1.5rem;
	background: var(--ref-card);
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.site-main--home .applications__media {
	min-height: 18rem;
	background: var(--zinc-900);
}

.site-main--home .applications__shade {
	background: linear-gradient(to top, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.2) 50%, transparent);
}

.site-main--home .applications__overlay {
	right: 1.5rem;
	bottom: 1.5rem;
	left: 1.5rem;
}

.site-main--home .applications .applications__title {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
}

.site-main--home .applications__title-en {
	margin-bottom: 0.25rem;
	color: var(--zinc-300);
	font-family: var(--ref-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.site-main--home .applications__area {
	padding: 0.25rem 0.75rem;
	background: rgb(255 255 255 / 0.2);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 400;
}

.site-main--home .applications__details {
	padding: 2rem;
}

.site-main--home .applications__panel {
	gap: 1.5rem;
}

.site-main--home .applications__meta {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--zinc-100);
}

.site-main--home .applications__counter {
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 400;
}

.site-main--home .applications__model {
	padding: 0.25rem 0.625rem;
	background: var(--zinc-100);
	color: var(--zinc-700);
	font-size: 0.75rem;
	font-weight: 500;
}

.site-main--home .applications .applications__label {
	margin-bottom: 0.5rem;
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 500;
}

.site-main--home .applications__challenge {
	color: var(--zinc-900);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.6;
}

.site-main--home .applications__desc {
	color: var(--zinc-600);
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

.site-main--home .applications__checklist {
	padding: 1rem;
	border: 1px solid var(--zinc-100);
	border-radius: 1rem;
	background: var(--zinc-50);
}

.site-main--home .applications__check {
	color: var(--zinc-700);
	font-size: 0.75rem;
}

.site-main--home .applications__check .icon {
	width: 16px;
	height: 16px;
	color: var(--ref-emerald);
}

.site-main--home .applications__details .slider-nav {
	padding-top: 1.5rem;
	border-top: 1px solid var(--zinc-100);
}

@media (min-width: 640px) {
	.site-main--home .applications__media {
		min-height: 24rem;
	}

	.site-main--home .applications .applications__title {
		font-size: 1.875rem;
	}

	.site-main--home .applications__details {
		padding: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.site-main--home .applications__media {
		min-height: 30rem;
	}
}

/* ---------------------------------------------------------------- credibility (StatsCredibility) */

.site-main--home .credibility__stats {
	gap: 1.5rem;
	margin-bottom: 4rem;
}

.site-main--home .credibility__stat {
	gap: 0.5rem;
	padding: 2rem;
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--ref-card);
	box-shadow: none;
}

.site-main--home .credibility__value {
	gap: 0.25rem;
	color: var(--zinc-950);
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1.1;
}

.site-main--home .credibility__suffix {
	color: var(--zinc-400);
	font-size: 1.5rem;
	font-weight: 700;
}

.site-main--home .credibility .credibility__label {
	color: var(--zinc-900);
	font-size: 1rem;
	font-weight: 700;
}

.site-main--home .credibility__desc {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--ref-hairline);
	color: var(--zinc-500);
	font-size: 0.75rem;
	line-height: 1.7;
}

.site-main--home .credibility__trust {
	gap: 2rem;
	margin-top: 0;
	padding: 2rem;
	border-radius: 1.5rem;
	background: var(--zinc-900);
	color: var(--zinc-400);
}

.site-main--home .credibility__badge {
	gap: 1rem;
}

.site-main--home .credibility__badge-icon {
	width: 48px;
	height: 48px;
	border-radius: 1rem;
	background: rgb(255 255 255 / 0.1);
	box-shadow: none;
	color: #34d399;
}

.site-main--home .credibility__badge-icon .icon {
	width: 24px;
	height: 24px;
}

.site-main--home .credibility .credibility__badge-title {
	margin-bottom: 0.25rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
}

.site-main--home .credibility__badge-text {
	color: var(--zinc-400);
	font-size: 0.75rem;
	line-height: 1.7;
}

@media (min-width: 640px) {
	.site-main--home .credibility__value {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	.site-main--home .credibility__value {
		font-size: 3.75rem;
	}
}

/* ---------------------------------------------------------------- products (ProductShowcase cards) */

.site-main--home .products-grid {
	gap: 1rem;
}

.site-main--home .product-card {
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	overflow: hidden;
	background: var(--ref-white);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-main--home .product-card::before {
	display: none;
}

@media (hover: hover) {
	.site-main--home .product-card:hover {
		border-color: var(--zinc-300);
		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
		transform: none;
	}
}

.site-main--home .product-card__media {
	margin: 0;
	padding: 1.5rem;
	border-bottom: 1px solid var(--zinc-100);
	border-radius: 0;
	background: linear-gradient(to bottom, rgb(250 250 250 / 0.8), #fff 50%, rgb(250 250 250 / 0.4));
}

.site-main--home .product-card__image {
	object-fit: contain;
	filter: drop-shadow(0 12px 24px rgb(0 0 0 / 0.12));
}

.site-main--home .product-card__image--hover {
	inset: 1.5rem;
	width: calc(100% - 3rem);
	height: calc(100% - 3rem);
}

.site-main--home .product-card__badges {
	top: 1rem;
	inset-inline-start: auto;
	inset-inline-end: 1rem;
}

.site-main--home .product-card__badges .badge {
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.5;
}

.site-main--home .product-card__badges .badge--glass {
	background: var(--zinc-900);
	color: #fff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.site-main--home .product-card__body {
	gap: 0.5rem;
	padding: 1rem;
}

.site-main--home .product-card .product-card__title {
	color: var(--zinc-950);
	font-size: 0.9375rem;
	font-weight: 900;
}

.site-main--home .product-card__link,
.site-main--home .product-card__link:hover {
	color: var(--zinc-950);
}

.site-main--home .product-card__coverage {
	align-self: flex-start;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--zinc-100);
	border-radius: 0.75rem;
	background: var(--zinc-50);
	color: var(--zinc-900);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 700;
}

.site-main--home .product-card__summary {
	color: var(--zinc-500);
	font-size: 0.75rem;
	line-height: 1.7;
}

.site-main--home .product-card__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.site-main--home .product-card__facts li {
	padding: 0.625rem;
	border: 1px solid var(--zinc-100);
	border-radius: 0.75rem;
	background: var(--zinc-50);
	color: var(--zinc-900);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 700;
}

.site-main--home .product-card__footer {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--zinc-100);
}

.site-main--home .product-card__price {
	color: var(--zinc-950);
}

@media (min-width: 640px) {
	.site-main--home .product-card__body {
		padding: 2rem;
	}

	.site-main--home .product-card .product-card__title {
		font-size: 1.25rem;
	}
}

@media (min-width: 900px) {
	.site-main--home .products-grid {
		gap: 2rem;
	}
}

/* ---------------------------------------------------------------- device finder (calculator form style) */

.site-main--home .finder__quiz {
	max-width: 960px;
	padding: 1.5rem;
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--ref-card);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.site-main--home .finder__quiz::before {
	display: none;
}

@media (min-width: 640px) {
	.site-main--home .finder__quiz {
		padding: 2rem;
	}
}

.site-main--home .finder__progress {
	height: 8px;
	border-radius: 0.5rem;
	background: var(--zinc-200);
	box-shadow: none;
}

.site-main--home .finder__progress-bar {
	background: var(--zinc-900);
}

.site-main--home .finder__step-label {
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 500;
}

.site-main--home .finder .finder__question {
	color: var(--zinc-900);
	font-size: 1.25rem;
	font-weight: 700;
}

.site-main--home .finder__option {
	border: 1px solid var(--zinc-200);
	border-radius: 1rem;
	background: var(--ref-white);
	box-shadow: none;
	color: var(--zinc-700);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform var(--dur-fast);
}

.site-main--home .finder__option:hover {
	border-color: var(--zinc-400);
	background: var(--ref-white);
}

.site-main--home .finder__option[aria-checked="true"] {
	border-color: var(--zinc-900);
	box-shadow: 0 0 0 1px var(--zinc-900);
	color: var(--zinc-900);
}

.site-main--home .finder__option-media {
	border-radius: 0.75rem;
	background: var(--zinc-100);
}

.site-main--home .finder__option-check {
	background: var(--zinc-900);
}

.site-main--home .finder__option-label {
	font-size: 0.875rem;
}

.site-main--home .finder__option-scale {
	background: var(--zinc-200);
}

.site-main--home .finder__option--area[aria-checked="true"] .finder__option-scale {
	background: var(--zinc-900);
}

.site-main--home .finder__result-device {
	border: 1px solid var(--zinc-100);
	border-radius: 1rem;
}

.site-main--home .finder .finder__result-name {
	font-weight: 900;
}

/* ---------------------------------------------------------------- model comparison (ProductComparison table) */

.site-main--home .model-matrix__box {
	border: 1px solid rgb(228 228 231 / 0.9);
	border-radius: 1.5rem;
	background: var(--ref-white);
	box-shadow: var(--ref-shadow-xs);
}

.site-main--home .model-matrix__table {
	font-size: 0.75rem;
}

.site-main--home .model-matrix__table :is(th, td) {
	padding: 1.25rem;
	border-bottom: 1px solid var(--zinc-100);
}

.site-main--home .model-matrix__table thead tr {
	background: rgb(250 250 250 / 0.7);
}

.site-main--home .model-matrix__table thead :is(th, td) {
	padding: 1.5rem;
	border-bottom-color: var(--zinc-200);
}

.site-main--home .model-matrix__table .is-featured {
	border-inline: 1px solid var(--ref-hairline);
	background: rgb(244 244 245 / 0.5);
}

.site-main--home .model-matrix__corner {
	color: var(--zinc-900);
	font-size: 0.875rem;
	font-weight: 700;
}

.site-main--home .model-matrix__thumb {
	width: 80px;
	height: 80px;
	padding: 0.25rem;
	border: 1px solid var(--zinc-100);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px rgb(0 0 0 / 0.05);
}

.site-main--home .model-matrix__name {
	color: var(--zinc-900);
	font-size: 1rem;
	font-weight: 700;
}

.site-main--home .model-matrix__sub,
.site-main--home .model-matrix__model.is-featured .model-matrix__sub {
	color: var(--zinc-500);
	font-size: 0.6875rem;
	font-weight: 400;
}

.site-main--home .model-matrix__param {
	color: var(--zinc-900);
	font-weight: 500;
}

.site-main--home .model-matrix__tip {
	color: var(--zinc-400);
	font-size: 0.625rem;
}

.site-main--home .model-matrix__cell {
	color: var(--zinc-700);
}

.site-main--home .model-matrix__cell.is-featured {
	color: var(--zinc-900);
	font-weight: 700;
}

@media (hover: hover) {
	.site-main--home .model-matrix__table tbody tr:hover {
		background: rgb(250 250 250 / 0.8);
	}
}

.site-main--home .model-matrix__table tfoot tr {
	border-top: 1px solid var(--zinc-200);
	background: rgb(250 250 250 / 0.5);
}

.site-main--home .model-matrix__table tfoot td {
	padding: 1.5rem;
}

/* ---------------------------------------------------------------- smart calculator (SmartCalculator) */

.site-main--home .smart-calc__grid {
	gap: 2rem;
}

.site-main--home .smart-calc__form {
	gap: 1.5rem;
	padding: 1.5rem;
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--ref-card);
}

.site-main--home .smart-calc__label {
	color: var(--zinc-800);
	font-size: 0.75rem;
	font-weight: 700;
}

.site-main--home .smart-calc__options {
	gap: 0.5rem;
}

.site-main--home .section .smart-calc__option {
	justify-content: center;
	padding: 0.625rem 0.75rem;
	color: var(--zinc-700);
}

.site-main--home .smart-calc__area {
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--zinc-200);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--zinc-900);
	font-family: var(--ref-mono);
	font-size: 1rem;
	font-weight: 700;
}

.site-main--home .smart-calc__area small {
	color: var(--zinc-500);
	font-family: var(--font);
	font-size: 0.75rem;
}

.site-main--home .smart-calc__scale {
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.625rem;
}

.site-main--home .range::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 0.5rem;
	background: linear-gradient(to left, var(--zinc-900) var(--range-progress, 50%), var(--zinc-200) var(--range-progress, 50%));
}

.site-main--home .range::-moz-range-track {
	height: 8px;
	border-radius: 0.5rem;
	background: var(--zinc-200);
}

.site-main--home .range::-moz-range-progress {
	height: 8px;
	border-radius: 0.5rem;
	background: var(--zinc-900);
}

.site-main--home .range::-webkit-slider-thumb {
	margin-top: -9px;
}

.site-main--home .smart-calc__result {
	gap: 1rem;
	padding: 2rem;
	border-radius: 1.5rem;
	background: var(--zinc-900);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	color: var(--zinc-400);
}

.site-main--home .smart-calc__kicker {
	margin-bottom: 0.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--zinc-800);
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.6875rem;
	font-weight: 500;
}

.site-main--home .smart-calc__product {
	padding: 0.75rem;
	border: 1px solid rgb(63 63 70 / 0.6);
	border-radius: 1rem;
	background: rgb(39 39 42 / 0.6);
}

.site-main--home .smart-calc__thumb {
	width: 80px;
	height: 80px;
	padding: 0.25rem;
	border-radius: 0.75rem;
}

.site-main--home .smart-calc__model {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 900;
}

.site-main--home .smart-calc__model-en {
	color: #34d399;
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 500;
}

.site-main--home .smart-calc__fact {
	padding: 1rem;
	border: 1px solid rgb(63 63 70 / 0.8);
	border-radius: 1rem;
	background: rgb(39 39 42 / 0.8);
	box-shadow: none;
	color: var(--zinc-300);
}

.site-main--home .smart-calc__fact dt {
	font-size: 0.75rem;
}

.site-main--home .smart-calc__fact dd {
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--zinc-700);
	border-radius: 0.75rem;
	background: var(--zinc-900);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
}

.site-main--home .smart-calc__fact--stack {
	padding: 0;
	border: 0;
	background: none;
}

.site-main--home .smart-calc__fact--stack dt {
	color: var(--zinc-400);
}

.site-main--home .smart-calc__fact--stack dd.smart-calc__advice {
	padding: 0;
	border: 0;
	background: none;
	color: var(--zinc-300);
	font-size: 0.75rem;
	line-height: 1.75;
	text-align: justify;
}

.site-main--home .smart-calc__actions {
	gap: 0.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--zinc-800);
}

.site-main--home .smart-calc__consult {
	color: var(--zinc-400);
	font-size: 0.75rem;
}

.site-main--home .smart-calc__consult:hover {
	color: #fff;
}

@media (min-width: 640px) {
	.site-main--home .smart-calc__form {
		padding: 2rem;
	}

	.site-main--home .smart-calc__model {
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------------- testimonials */

.site-main--home .testimonials__track {
	gap: 1.5rem;
}

.site-main--home .testimonials__card {
	gap: 0;
	padding: 2rem;
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	background: var(--ref-card);
	box-shadow: var(--ref-shadow-xs);
	transition: border-color 0.3s ease;
}

.site-main--home .testimonials__card:hover {
	border-color: var(--zinc-300);
}

.site-main--home .testimonials__mark {
	display: none;
}

.site-main--home .testimonials__result {
	gap: 0.375rem;
	margin-bottom: 1rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--ref-emerald-line);
	background: var(--ref-emerald-soft);
	color: var(--ref-emerald-ink);
	font-size: 0.6875rem;
	font-weight: 500;
}

.site-main--home .testimonials__result .icon {
	width: 14px;
	height: 14px;
	color: var(--ref-emerald);
}

.site-main--home .testimonials__quote {
	margin-bottom: 1.5rem;
	color: var(--zinc-700);
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

.site-main--home .testimonials__quote p::before {
	content: "«";
}

.site-main--home .testimonials__quote p::after {
	content: "»";
}

.site-main--home .testimonials__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ref-hairline);
}

.site-main--home .testimonials__author {
	color: var(--zinc-900);
	font-size: 0.875rem;
	font-weight: 700;
}

.site-main--home .testimonials__role {
	color: var(--zinc-500);
	font-size: 0.75rem;
}

.site-main--home .testimonials__city {
	margin-top: 0.125rem;
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.625rem;
}

.site-main--home .testimonials__model {
	display: grid;
	flex: none;
	gap: 0;
	padding: 0;
	background: none;
	text-align: left;
}

.site-main--home .testimonials__model-label {
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.625rem;
}

.site-main--home .testimonials__model-name {
	color: var(--zinc-800);
	font-size: 0.75rem;
	font-weight: 600;
}

.site-main--home .testimonials .slider-nav {
	margin-top: 0;
}

/* Two cards per view from tablets up, as in the reference grid (the carousel keeps scrolling the rest). */
@media (min-width: 768px) {
	.site-main--home .testimonials__card {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}

/* ---------------------------------------------------------------- blog preview (KnowledgeCenter article cards) */

.site-main--home .post-grid {
	gap: 2rem;
}

.site-main--home .post-card {
	border: 1px solid var(--ref-border);
	border-radius: 1.5rem;
	overflow: hidden;
	background: var(--ref-card);
	box-shadow: var(--ref-shadow-xs);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: border-color 0.3s ease;
}

@media (hover: hover) {
	.site-main--home .post-card:hover {
		border-color: rgb(161 161 170 / 0.8);
		box-shadow: var(--ref-shadow-xs);
	}
}

.site-main--home .post-card__media {
	margin: 0.5rem 0.5rem 0;
	border-radius: 1.125rem;
	background: var(--zinc-100);
}

.site-main--home .post-card__body {
	gap: 0.75rem;
	padding: 1.5rem 2rem 2rem;
}

.site-main--home .post-card__category {
	padding: 0.25rem 0.625rem;
	border-radius: 0.375rem;
	background: var(--zinc-100);
	color: var(--zinc-700);
	font-size: 0.75rem;
	font-weight: 500;
}

.site-main--home .post-card .post-card__title {
	color: var(--zinc-950);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.6;
}

.site-main--home .post-card__link,
.site-main--home .post-card__link:hover {
	color: inherit;
}

.site-main--home .post-card:hover .post-card__link {
	color: var(--zinc-700);
}

.site-main--home .post-card__excerpt {
	color: var(--zinc-600);
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

.site-main--home .post-card__meta {
	justify-content: space-between;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--zinc-100);
	color: var(--zinc-400);
	font-family: var(--ref-mono);
	font-size: 0.6875rem;
}

@media (min-width: 640px) {
	.site-main--home .post-card .post-card__title {
		font-size: 1.25rem;
	}
}

/* ---------------------------------------------------------------- FAQ (FaqAccordion) */

.site-main--home .faq-list {
	counter-reset: faq;
	gap: 0.75rem;
	max-width: 56rem;
	margin-inline: auto;
}

.site-main--home .faq-item {
	counter-increment: faq;
	overflow: hidden;
	border: 1px solid var(--ref-border);
	border-radius: 1rem;
	background: rgb(255 255 255 / 0.7);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-main--home .faq-item:hover {
	border-color: var(--zinc-300);
	background: #fff;
}

.site-main--home .faq-item[open] {
	border-color: var(--zinc-300);
	background: #fff;
	box-shadow: var(--ref-shadow-xs), 0 0 0 1px rgb(24 24 27 / 0.05);
}

.site-main--home .faq-item__question {
	justify-content: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-radius: 0;
	color: var(--zinc-900);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.6;
}

.site-main--home .faq-item__question::before {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 0.5rem;
	background: var(--zinc-100);
	color: var(--zinc-500);
	content: counter(faq, winners-fa-pad);
	font-family: var(--ref-mono);
	font-size: 0.75rem;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.site-main--home .faq-item[open] .faq-item__question::before {
	background: var(--zinc-900);
	color: #fff;
}

.site-main--home .faq-item__text {
	flex: 1;
	min-width: 0;
}

.site-main--home .faq-item__icon {
	width: 28px;
	height: 28px;
	padding: 6px;
	border: 1px solid var(--zinc-200);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	color: var(--zinc-400);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.site-main--home .faq-item[open] .faq-item__icon {
	border-color: var(--zinc-300);
	background: var(--zinc-100);
	color: var(--zinc-900);
	transform: rotate(180deg);
}

.site-main--home .faq-item__answer {
	margin-top: 0.25rem;
	padding: 0.25rem 1.25rem 1.25rem;
	border-top: 1px solid var(--zinc-100);
}

.site-main--home .faq-item__answer p {
	margin-top: 1rem;
	padding: 1rem;
	border: 1px solid rgb(228 228 231 / 0.5);
	border-radius: 0.75rem;
	background: rgb(250 250 250 / 0.7);
	color: var(--zinc-700);
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

@media (min-width: 640px) {
	.site-main--home .faq-item__question {
		font-size: 0.9375rem;
	}
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 639.98px) {
	#main.site-main--home > .section {
		padding-block: 2.5rem;
	}

	.site-main--home .section .section-head {
		margin-bottom: 1.5rem;
	}

	.site-main--home .section .section-head__title {
		font-size: 1.75rem;
	}

	.site-main--home .section .section-head__description {
		margin-top: 0.75rem;
	}

	/* Justified text leaves wide gaps on narrow lines. */
	#main.site-main--home :is(.section-head__description, .ref-adv__text, .steps__text, .applications__desc, .testimonials__quote, .post-card__excerpt, .faq-item__answer p, .smart-calc__advice) {
		text-align: start;
	}

	/* cards */
	.ref-grid {
		gap: 1rem;
	}

	.ref-grid--4 {
		gap: 0.75rem;
	}

	.ref-card,
	.ref-pillar {
		padding: 1.25rem;
	}

	.ref-card__foot {
		padding-top: 1rem;
	}

	.ref-pillar__head,
	.ref-adv__head {
		margin-bottom: 1rem;
	}

	.ref-adv__head {
		padding-bottom: 1rem;
	}

	.ref-pillar .ref-num {
		font-size: 1.25rem;
	}

	.ref-pillar .ref-icon-box {
		width: 36px;
		height: 36px;
	}

	.ref-pillar__title {
		margin-bottom: 1rem;
		font-size: 1rem;
	}

	.ref-pillar .ref-card__foot {
		font-size: 0.6875rem;
	}

	.ref-num--lg {
		font-size: 1.75rem;
	}

	.ref-adv__title {
		font-size: 1.125rem;
	}

	.ref-adv__text {
		margin-bottom: 1rem;
	}

	/* how it works */
	.site-main--home .steps {
		gap: 1rem;
	}

	.site-main--home .steps__item,
	.site-main--home .steps__item:first-child {
		padding: 1.25rem;
	}

	.site-main--home .steps__head {
		margin-bottom: 1rem;
	}

	.site-main--home .steps__icon {
		width: 44px;
		height: 44px;
	}

	.site-main--home .steps__num {
		font-size: 1.5rem;
	}

	/* frequency visualizer */
	.site-main--home .freq-viz__panel,
	.site-main--home .freq-viz__panel.glass--dark {
		padding: 1rem;
	}

	.site-main--home .freq-viz__modes {
		flex: 1 1 auto;
	}

	.site-main--home .freq-viz__modes .chip {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* engineering specs */
	.site-main--home .engineering__specs {
		gap: 0.75rem;
	}

	.site-main--home .spec-card,
	.site-main--home .spec-card.glass--dark {
		padding: 1.25rem;
	}

	.site-main--home .spec-card__value {
		font-size: 1.75rem;
	}

	.site-main--home .spec-card__label {
		margin-top: 0.75rem;
		padding-top: 0.75rem;
		font-size: 0.75rem;
	}

	/* applications */
	.site-main--home .applications__tabs {
		margin-bottom: 1.25rem;
	}

	.site-main--home .applications__media {
		min-height: 15rem;
	}

	.site-main--home .applications__overlay {
		right: 1rem;
		bottom: 1rem;
		left: 1rem;
	}

	.site-main--home .applications .applications__title {
		font-size: 1.25rem;
	}

	.site-main--home .applications__details {
		padding: 1.25rem;
	}

	.site-main--home .applications__panel {
		gap: 1.1rem;
	}

	/* credibility */
	.site-main--home .credibility__stats {
		gap: 0.75rem;
		margin-bottom: 1.5rem;
	}

	.site-main--home .credibility__stat {
		padding: 1.25rem;
	}

	.site-main--home .credibility__value {
		font-size: 1.75rem;
	}

	.site-main--home .credibility__suffix {
		font-size: 1rem;
	}

	.site-main--home .credibility .credibility__label {
		font-size: 0.9375rem;
	}

	.site-main--home .credibility__desc {
		padding-top: 0.75rem;
	}

	.site-main--home .credibility__trust {
		gap: 1.5rem;
		padding: 1.5rem 1.25rem;
	}

	/* products: phones keep the theme's compact two-up card (photo, name, coverage, price, add) */
	.site-main--home .products-grid {
		gap: 0.75rem;
	}

	.site-main--home .product-card__summary,
	.site-main--home .product-card__facts {
		display: none;
	}

	.site-main--home .product-card__media {
		padding: 0.75rem;
	}

	.site-main--home .product-card__image--hover {
		inset: 0.75rem;
		width: calc(100% - 1.5rem);
		height: calc(100% - 1.5rem);
	}

	.site-main--home .product-card__badges {
		top: 0.625rem;
		inset-inline-end: 0.625rem;
	}

	.site-main--home .product-card__body {
		padding: 0.875rem;
	}

	.site-main--home .product-card__coverage {
		padding: 0.125rem 0.5rem;
		font-size: 0.6875rem;
	}

	.site-main--home .product-card__footer {
		padding-top: 0.75rem;
	}

	/* device finder */
	.site-main--home .finder__quiz {
		padding: 1rem;
	}

	.site-main--home .finder .finder__question {
		font-size: 1.0625rem;
	}

	/* model comparison (the table scrolls sideways inside its box) */
	.site-main--home .model-matrix__table :is(th, td),
	.site-main--home .model-matrix__table thead :is(th, td),
	.site-main--home .model-matrix__table tfoot td {
		padding: 0.875rem;
	}

	.site-main--home .model-matrix__thumb {
		width: 64px;
		height: 64px;
	}

	/* smart calculator */
	.site-main--home .smart-calc__grid {
		gap: 1rem;
	}

	.site-main--home .smart-calc__form,
	.site-main--home .smart-calc__result {
		padding: 1.25rem;
	}

	.site-main--home .smart-calc__thumb {
		width: 64px;
		height: 64px;
	}

	.site-main--home .smart-calc__model {
		font-size: 1.125rem;
	}

	.site-main--home .smart-calc__fact {
		padding: 0.75rem;
	}

	.site-main--home .smart-calc__fact dd {
		font-size: 0.875rem;
	}

	/* testimonials */
	.site-main--home .testimonials__track {
		gap: 1rem;
	}

	.site-main--home .testimonials__card {
		padding: 1.5rem 1.25rem;
	}

	.site-main--home .testimonials__footer {
		padding-top: 1rem;
	}

	/* blog */
	.site-main--home .post-grid {
		gap: 1rem;
	}

	.site-main--home .post-card__body {
		padding: 1.25rem;
	}

	/* FAQ */
	.site-main--home .faq-item__question {
		padding: 0.875rem 1rem;
	}

	.site-main--home .faq-item__answer {
		padding: 0.25rem 1rem 1rem;
	}

	.site-main--home .faq-item__answer p {
		padding: 0.875rem;
	}
}

/* Tablets: two-up engineering stats and product cards keep a readable card padding. */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.site-main--home .spec-card,
	.site-main--home .spec-card.glass--dark,
	.site-main--home .credibility__stat {
		padding: 1.5rem;
	}

	.site-main--home .product-card__body {
		padding: 1.25rem;
	}
}

/* ---------------------------------------------------------------- reduced transparency */

/* main.css forces glass surfaces to solid surface / night fills with !important under this preference;
   the reference cards above are already opaque, so they keep their own fills. */
@media (prefers-reduced-transparency: reduce) {
	.site-main--home .freq-viz__panel.glass,
	.site-main--home .spec-card.glass,
	.site-main--home .finder__quiz.glass {
		background: var(--ref-card) !important;
	}

	.site-main--home .engineering .btn--glass-dark {
		background: var(--surface) !important;
	}
}
