.hero {
	min-height: clamp(16rem, 42svh, 22rem);
	display: grid;
	align-content: center;

	padding-block: var(--sp-sm);
	color: var(--c-on-dark);
	background:
		radial-gradient(circle at 88% 12%, var(--c-hero-glow), transparent 55%),
		linear-gradient(135deg, var(--c-ink-deep) 0%, var(--c-ink-deep-2) 100%);
}

.hero__inner {
	max-width: 34rem;
}

.hero h1 {
	color: inherit;
}

.hero__inner > p:not(.trust-badge) {
	color: var(--c-on-dark-muted);
	margin-block-start: var(--sp-md);
}

.cta-block__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	margin-block-start: var(--sp-md);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-sm);
	min-height: 48px;
	min-width: 44px;
	padding: 0 var(--sp-lg);
	border: 0;
	border-radius: var(--r-md);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.btn svg {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.btn--primary {
	background: var(--c-brand);
	color: var(--c-on-brand);
}

.btn--primary:hover {
	background: var(--c-brand-dim);
	color: var(--c-on-brand);
}

.btn--secondary {
	background: transparent;
	color: var(--c-ink-deep);
	border: 2px solid var(--c-ink-deep);
}

.hero .btn--secondary,
.site-footer .btn--secondary {
	color: var(--c-on-dark);
	border-color: var(--c-on-dark);
}

.cat-card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;

	gap: var(--sp-sm);
	padding: var(--sp-md);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	box-shadow: var(--sh-1);

	transition: box-shadow var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease);
}

.cat-card:hover,
.cat-card:focus-within {
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
}

.cat-card__media {
	flex: none;
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 5rem;
	aspect-ratio: 4/3;
	border-radius: var(--r-sm);
	background: var(--c-surface-3);
}

.cat-card__media > svg {
	width: 42%;
	height: auto;
	color: var(--c-ink-deep);
}

.cat-card__media > img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
}

.cat-card__media > img.cat-card__art {
	object-fit: contain;
	padding: 8%;
}

.cat-card__body {
	min-width: 0;
}

.cat-card__title a {
	color: var(--c-ink-deep);
	text-decoration: none;
}

.cat-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--r-lg);
}

.cat-card__symptoms {
	margin-block-start: var(--sp-sm);
	color: var(--c-ink-muted);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
}

.trust-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-xs);
	margin-block-start: var(--sp-sm);
	padding: var(--sp-xs) var(--sp-md);
	border-radius: var(--r-md);
	background: var(--c-brand);
	color: var(--c-on-brand);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: 1.4;
}

.catch-all__lede {
	margin-block-start: var(--sp-md);
	color: var(--c-ink-muted);
}

.disc {
	margin-block-start: var(--sp-sm);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: var(--c-surface-2);
}

.disc > summary {
	display: block;
	min-height: 44px;
	padding: var(--sp-md);
	color: var(--c-ink-deep);
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	line-height: 1.25;
	list-style: none;
	cursor: pointer;
}

.disc > summary::-webkit-details-marker {
	display: none;
}

.disc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-md);
}

.disc__row svg {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	transition: transform var(--dur-fast) var(--ease);
}

.disc[open] > summary .disc__row svg {
	transform: rotate(180deg);
}

.disc__body {
	padding: 0 var(--sp-lg) var(--sp-lg);
}

.disc__body p {
	color: var(--c-ink-muted);
}

.disc__links {
	display: grid;
	gap: var(--sp-sm);
	margin-block-start: var(--sp-md);
	list-style: none;
}

.disc__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: var(--fw-bold);
}

.selftest p,
.diff p {
	margin-block-start: var(--sp-md);
	color: var(--c-ink-muted);
}

.selftest__cta {
	margin-block-start: var(--sp-lg);
}

.cta-block {
	margin-block-start: var(--sp-lg);
}

.cta-block__note {
	margin-block-start: var(--sp-md);
	color: var(--c-ink-muted);
}

.callbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	height: 56px;
	box-shadow: inset 0 3px 0 var(--c-brand);
	background: var(--c-ink-deepest);
}

.callbar .btn {
	flex: 1 1 50%;

	min-width: 0;
	padding: 0 var(--sp-sm);
	border-radius: 0;
}

body {
	padding-block-end: 3.5rem;
}

body:not(:has(.callbar)) {
	padding-block-end: 0;
}

.nav {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--c-ink-deep);
	cursor: pointer;
}

.nav__toggle svg {
	width: 24px;
	height: 24px;
}

.nav__list {
	display: none;
	width: 100%;
	margin-block: var(--sp-sm);
	padding: var(--sp-sm);
	list-style: none;
	background: var(--c-surface-2);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
}

.nav__sub {
	display: none;
	margin: 0;
	padding: 0 0 var(--sp-xs) var(--sp-md);
	list-style: none;
}

[aria-expanded="true"] + .nav__list { display: block; }
[aria-expanded="true"] + .nav__sub { display: block; }

.nav__list li,
.nav__sub li {
	max-width: none;
}

.nav__link,
.nav__disclosure {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	min-height: 44px;
	padding-inline: var(--sp-md);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--fs-body);
	line-height: 1.3;
	text-decoration: none;
}

.nav__disclosure {
	width: 100%;
	border: 0;
	background: transparent;
	font-weight: var(--fw-regular);
	cursor: pointer;
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__disclosure:hover,
.nav__disclosure:focus-visible {
	background: var(--c-surface-3);
	color: var(--c-ink);
}

.nav__link[aria-current="page"] {
	font-weight: var(--fw-bold);
	box-shadow: inset 0 -3px 0 var(--c-brand);
}

.nav__chevron {
	display: inline-flex;
	transition: transform var(--dur-fast) var(--ease);
}

.nav__chevron svg {
	width: 1.1em;
	height: 1.1em;
}

[aria-expanded="true"] .nav__chevron {
	transform: rotate(180deg);
}

.footer-heading {
	color: var(--c-on-dark);
	font-size: var(--fs-title);
	margin-block-end: var(--sp-md);
}

.contact-line {
	display: grid;
	grid-template-columns: 1.25em 1fr;
	gap: var(--sp-sm);
	align-items: start;
}

.contact-line > svg {
	width: 1.25em;
	height: 1.25em;
	margin-block-start: .2em;
	color: var(--c-ink-muted);
}

.footer-item {
	display: grid;
	grid-template-columns: 1.25em 1fr;
	gap: var(--sp-sm);
	align-items: start;
	max-width: none;
	margin-block-end: var(--sp-md);
	color: var(--c-on-dark);
}

.footer-item > svg {
	width: 1.25em;
	height: 1.25em;
	margin-block-start: .2em;
	color: var(--c-on-dark-muted);
}

.footer-item--muted {
	color: var(--c-on-dark-muted);
}

.footer-item a {
	color: var(--c-on-dark);
}

.footer-phones {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-xs);
}

.footer-phone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: var(--fw-bold);
	color: var(--c-on-dark);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm) var(--sp-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links li {
	max-width: none;
}

.footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--c-on-dark-muted);
}

.footer-legal {
	margin-block-start: var(--sp-2xl);
	padding-block-start: var(--sp-md);
	border-block-start: 1px solid rgb(255 255 255 / .14);
}

.footer-legal a {
	color: var(--c-on-dark-muted);
}

.notice {
	display: grid;
	grid-template-columns: 1.25em 1fr;
	gap: var(--sp-sm);
	align-items: start;
	max-width: none;
	margin-block-end: var(--sp-xl);
	padding: var(--sp-md);
	border-radius: var(--r-md);
}

.notice > svg {
	width: 1.25em;
	height: 1.25em;
	margin-block-start: .2em;
}

.notice--error {
	background: var(--c-danger-surface);
	color: var(--c-danger-ink);
}

.notice--success {
	background: var(--c-success-surface);
	color: var(--c-success-ink);
}

.holiday-banner {
	background: var(--c-ink-deepest);
	color: var(--c-on-dark);
	box-shadow: inset 0 -3px 0 var(--c-brand);
}

.holiday-banner__inner {
	display: grid;
	grid-template-columns: 1.25em 1fr;
	gap: var(--sp-sm);
	align-items: start;
	padding-block: var(--sp-md);
}

.holiday-banner__inner > svg {
	width: 1.25em;
	height: 1.25em;
	margin-block-start: .2em;
}

.holiday-banner p {
	max-width: none;
	margin-block: 0;
}

.holiday-banner strong {
	font-weight: var(--fw-bold);
	color: var(--c-on-dark);
}

.form {
	max-width: var(--form-measure);
}

.field {
	margin-block-end: var(--sp-lg);
}

.field__label {
	display: block;
	margin-block-end: var(--sp-xs);
	font-weight: var(--fw-bold);
}

.field__req {
	color: var(--c-danger);
}

.field__control {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--sp-md);
	background: var(--c-surface-3);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);

	transition: background-color var(--dur-fast) var(--ease);
}

textarea.field__control {
	min-height: 8rem;
	padding: var(--sp-sm) var(--sp-md);
	resize: vertical;
}

.field__control[aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--c-danger);
}

.field__help {
	margin-block-start: var(--sp-xs);
	color: var(--c-ink-muted);
}

.field__error {
	display: flex;
	gap: var(--sp-sm);
	align-items: flex-start;
	margin-block-start: var(--sp-xs);
	color: var(--c-danger);
}

.field__error > svg {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	margin-block-start: .2em;
}

.consent {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	align-items: flex-start;
	min-height: 44px;
}

.consent__box {
	flex: none;
	width: 24px;
	height: 24px;
	accent-color: var(--c-ink-deep);
}

.consent__label {
	flex: 1 1 0;
	min-width: 0;
}

.consent .field__error {
	flex: 1 0 100%;
}

input[type="file"]::file-selector-button {
	min-height: 44px;
	margin-inline-end: var(--sp-md);
	padding: 0 var(--sp-md);
	background: transparent;
	border: 2px solid var(--c-ink-deep);
	border-radius: var(--r-md);
	color: var(--c-ink-deep);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

.filelist {
	margin-block-start: var(--sp-md);
	padding: 0;
	list-style: none;
}

.filelist__row {
	display: flex;
	gap: var(--sp-md);
	align-items: center;
	padding-block: var(--sp-xs);
}

.filelist__thumb {
	flex: none;
	width: 48px;
	height: 48px;
	background: var(--c-surface-3);
	border-radius: var(--r-sm);
	object-fit: cover;
}

.filelist__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.filelist__size {
	flex: none;
	color: var(--c-ink-muted);
}

.filelist__remove {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--r-sm);
	color: var(--c-ink-muted);
	cursor: pointer;
}

.filelist__remove > svg {
	width: 1.25em;
	height: 1.25em;
}

.filelist__remove:hover {
	color: var(--c-danger);
}

.hp {
	position: absolute;
	top: -100vh;
	left: -100vw;
}

.svc__intro,
.svc__symptoms {
	margin-block-start: var(--sp-md);
	color: var(--c-ink-muted);
}

.svc__fixes ul,
.svc__related ul,
.svc__prices ul {
	list-style: none;
	display: grid;
	gap: var(--sp-sm);
	margin-block-start: var(--sp-md);
}

.svc__fixes li,
.svc__related li,
.svc__prices li {
	position: relative;
	padding-inline-start: var(--sp-lg);
}

.svc__fixes li::before,
.svc__related li::before,
.svc__prices li::before {
	content: "";
	position: absolute;
	inset-block-start: .6em;
	inset-inline-start: 0;
	width: 8px;
	height: 8px;
	border-radius: var(--r-sm);
	background: var(--c-brand);
}

.svc__fixes .svc__symptoms {
	margin-block-start: var(--sp-lg);
}

.svc__process ol {
	display: grid;
	gap: var(--sp-sm);
	margin-block-start: var(--sp-md);
	padding-inline-start: var(--sp-lg);
}

.svc__warranty p {
	margin-block-start: var(--sp-md);
}

.svc__warranty__term {
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	color: var(--c-ink-deep);
}

.svc__block + .svc__block {
	margin-block-start: var(--sp-xl);
}

.svc__block p {
	margin-block-start: var(--sp-md);
	max-width: var(--measure);
}

.svc__block--steps ol,
.svc__block--callout p:first-of-type,
.svc__block--prose p:first-of-type {
	margin-block-start: var(--sp-md);
}

.svc__block--steps ol {
	display: grid;
	gap: var(--sp-sm);
	padding-inline-start: var(--sp-lg);
}

.svc__block--callout,
.svc__block--urgent {
	background: var(--c-surface-2);
	border-radius: var(--r-lg);
	padding: var(--sp-lg);
	border-inline-start: 3px solid var(--c-ink-deep);
}

.svc__block--urgent {
	background: var(--c-danger-surface);
	border-inline-start-color: var(--c-danger);
	color: var(--c-danger-ink);
}

.svc__block--urgent h2 {
	color: var(--c-danger-ink);
}

.breadcrumbs {
	margin-block-end: var(--sp-md);
	font-size: var(--fs-body);
	color: var(--c-ink-muted);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	align-items: center;
}

.breadcrumbs li + li::before {
	content: "/";
	color: var(--c-ink-muted);
	padding-inline: var(--sp-sm);
}

.breadcrumbs a {
	display: inline-block;
	padding-block: var(--sp-sm);
	color: var(--c-link);
}

.breadcrumbs [aria-current] {
	display: inline-block;
	padding-block: var(--sp-sm);
	color: var(--c-ink);
}

.brand-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm) var(--sp-md);
	margin-block-start: var(--sp-lg);
	list-style: none;
}

.brand-row__item {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: var(--sp-md);
	border-radius: var(--r-md);
	background: var(--c-surface-2);
	color: var(--c-ink-deep);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
}

.brand-row__item--more {
	background: none;
	color: var(--c-ink-muted);
	font-weight: var(--fw-regular);
}

.brand-row__item > img {
	display: block;
	max-height: 24px;
	width: auto;
}

.brand-row__note {
	margin-block-start: var(--sp-md);
	max-width: var(--measure);
	color: var(--c-ink-muted);
	font-size: var(--fs-body);
}

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
	margin-block-start: var(--sp-lg);
	min-height: 44px;
	padding-inline: var(--sp-md);
	border-radius: var(--r-md);
	background: var(--c-ink-deep);
	color: var(--c-on-dark);
	text-decoration: none;
}

.rating-badge:hover {
	background: var(--c-ink-deep-2);
}

.rating-badge:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
}

.rating-badge__star {
	display: inline-flex;
	color: var(--c-brand);
}

.rating-badge__star > svg {
	width: 1.15em;
	height: 1.15em;
}

.rating-badge__score {
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
}

.rating-badge__label {
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
}

.evidence {
	display: grid;
	grid-template-columns: repeat(2, 100px);
	gap: var(--sp-md);
	margin-block-start: var(--sp-lg);
	list-style: none;
}

.evidence img {
	display: block;
	width: 100px;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--r-md);
	background: var(--c-surface-3);
}

.evidence figcaption {
	margin-block-start: var(--sp-sm);
	color: var(--c-ink-muted);
	font-size: var(--fs-body);
}

.confirm p {
	max-width: var(--measure);
	color: var(--c-ink);
}

.confirm p + p {
	margin-block-start: var(--sp-md);
}

@media (min-width: 35rem) {
	.hero { padding-block: var(--sp-2xl); }
	.cta-block__actions {
		gap: var(--sp-lg);
		margin-block-start: var(--sp-xl);
	}
	.trust-badge { margin-block-start: var(--sp-lg); }

	.evidence { grid-template-columns: repeat(3, 100px); }

	.cat-card {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
		overflow: hidden;
	}

	.cat-card__media {
		width: 100%;
		aspect-ratio: 16/10;
		border-radius: 0;
	}

	.cat-card__body {
		padding: var(--sp-lg);
	}
}

@media (min-width: 56.25rem) {
	.callbar {
		display: none;
	}

	body {
		padding-block-end: 0;
	}

	.nav__toggle {
		display: none;
	}

	.nav__toggle[aria-expanded="true"] + .nav__list,
	.nav__list {
		display: flex;
		align-items: center;
		gap: var(--sp-xl);
		width: auto;
		margin-block: 0;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.nav__item--has-sub {
		position: relative;
	}

	.nav__sub {
		position: absolute;
		inset-block-start: calc(100% + var(--sp-sm));
		inset-inline-end: 0;
		z-index: 20;
		width: max-content;
		min-width: 22rem;
		max-width: 26rem;
		padding: var(--sp-md);
		background: var(--c-surface-2);
		border-radius: var(--r-lg);
		box-shadow: var(--sh-2);
	}

	.nav__sub .nav__link {
		white-space: nowrap;
	}
}