/*
Theme Name: Hands-On Verdict
Theme URI: https://handsonverdict.com/
Author: Hands-On Verdict
Author URI: https://handsonverdict.com/
Description: Classic PHP theme for the Hands-On Verdict affiliate review site. No block editor templates, no page builder, no jQuery, no external CSS/JS frameworks. Built to DESIGN-SPEC.md v1.0.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hov
Tags: affiliate, review, accessibility-ready, one-column
*/

/* ==========================================================================
   0. FONTS — self-hosted Poppins (DESIGN-SPEC §7.3)
   Drop the three .woff2 files into assets/fonts/. See README.md.
   NEVER replace these with the Google Fonts CDN.
   ========================================================================== */

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/poppins-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/poppins-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/poppins-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback so the swap does not shift layout (§7.3). */
@font-face {
	font-family: 'Poppins Fallback';
	src: local('Arial');
	size-adjust: 112%;
	ascent-override: 93%;
	descent-override: 31%;
	line-gap-override: 0%;
}

/* ==========================================================================
   1. TOKENS (DESIGN-SPEC §8.1, §8.2, §8.3)
   ========================================================================== */

:root {
	/* Brand — DO NOT change these values (§8.1). */
	--ink: #14213D;
	--paper: #F6F1E7;
	--amber: #F2A541;
	--green: #2E8B57;
	--red: #D1495B;
	--muted: #5B6475;

	/* Derived surfaces. */
	--paper-raised: #FFFDF8;
	--paper-sunk: #EFE8DA;
	--ink-12: rgba(20, 33, 61, .12);
	--ink-24: rgba(20, 33, 61, .24);
	--ink-72: rgba(20, 33, 61, .72);
	--paper-72: rgba(246, 241, 231, .72);

	/* ACCESSIBLE TEXT VARIANTS — required (§8.4 F2/F3/F4/F6).
	   --amber is a FILL only. --green/--red are GLYPH colours only.
	   Any green/red/amber TEXT uses the -text sibling below. */
	--green-text: #217045;   /* 5.38:1 on Paper */
	--red-text: #B03A4A;     /* 5.25:1 on Paper */
	--amber-text: #8A5A10;   /* 5.25:1 on Paper */
	--muted-strong: #4E5666; /* 6.55:1 on Paper */

	/* Fills that carry white text safely (§8.4 F4). */
	--green-fill: #217045;   /* white on this = 6.05:1 */
	--red-fill: #B03A4A;     /* white on this = 5.92:1 */

	/* Type (§8.2). */
	--font-sans: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

	--fs-display: clamp(2rem, 1.54rem + 1.96vw, 3rem);
	--fs-h1: clamp(1.75rem, 1.31rem + 1.88vw, 2.75rem);
	--fs-h2: clamp(1.375rem, 1.21rem + .7vw, 1.875rem);
	--fs-h3: clamp(1.125rem, 1.05rem + .31vw, 1.375rem);
	--fs-lead: clamp(1.125rem, 1.08rem + .19vw, 1.25rem);
	--fs-body: clamp(1.0625rem, 1.04rem + .11vw, 1.125rem);
	--fs-ui: clamp(.9375rem, .92rem + .09vw, 1rem);
	--fs-cta: clamp(1.0625rem, 1.04rem + .11vw, 1.125rem);
	--fs-small: .875rem;
	--fs-micro: .75rem;
	--fs-nano: .625rem;

	/* Spacing (§8.3) — 4px base, no arbitrary values. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* Layout. */
	--gutter: var(--sp-4);
	--container: 1200px;
	--measure: 68ch;
	--header-h: 48px;
	--sticky-h: 64px;
	--section-gap: var(--sp-7);
}

@media (min-width: 1024px) {
	:root {
		--gutter: 72px;
		--header-h: 64px;
		--section-gap: 72px;
	}
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.65; /* floor, not a suggestion (§8.2) */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Reserve room for the fixed bottom bar at first paint — stylesheet, never JS
   (§1.4 CLS guarantee 2). The bar itself is position:fixed and contributes
   zero to CLS regardless; this padding stops it occluding the footer. */
body.hov-has-sticky {
	padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
}

img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-3);
	font-weight: 700;
	color: var(--ink);
}

h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-ui); line-height: 1.4; }

p { margin: 0 0 var(--sp-4); }

@media (min-width: 1024px) {
	p { margin-bottom: 20px; }
}

a { color: var(--ink); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li { margin-bottom: var(--sp-2); }

strong, b { font-weight: 700; }

hr {
	height: 1px;
	margin: var(--sp-6) 0;
	border: 0;
	background: var(--ink-12);
}

blockquote {
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-left: 4px solid var(--ink);
	background: var(--paper-raised);
}

code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

/* Visible focus on everything focusable (§7.5). 7.78:1 both ways. */
:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
	border-radius: 2px;
}

.hov-on-ink :focus-visible,
.hov-sticky-bar :focus-visible,
.hov-footer :focus-visible,
.hov-site-header :focus-visible {
	outline-color: var(--amber);
}

/* Reduced motion (§7.4). */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-2);
	z-index: 100;
	padding: var(--sp-3) var(--sp-4);
	background: var(--ink);
	color: var(--paper);
	font-size: var(--fs-ui);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.skip-link:focus {
	top: 0;
	outline: 3px solid var(--amber);
	outline-offset: -3px;
}

.hov-container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.hov-stack > * + * { margin-top: var(--sp-4); }

[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* ==========================================================================
   4. SITE HEADER (§1.2 row 1, §1.3)
   Height is constant — it never grows or shrinks on scroll (§1.4 CLS #3).
   ========================================================================== */

.hov-site-header {
	position: relative;
	z-index: 30;
	background: var(--ink);
	color: var(--paper);
}

/* Sticky on desktop only (§1.3). Not sticky on mobile (§1.2). */
@media (min-width: 1024px) {
	.hov-site-header {
		position: sticky;
		top: 0;
	}
}

.hov-site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	min-height: var(--header-h);
	height: var(--header-h);
}

.hov-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--paper);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -.01em;
	line-height: 1.1;
	flex: 0 0 auto;
}

.hov-brand__mark { width: 28px; height: 28px; flex: 0 0 28px; }

/* The accent word is Amber ONLY because the header field is Ink (7.78:1).
   Amber text on Paper is 1.82:1 and is forbidden (§8.4 F2). */
.hov-brand__accent { color: var(--amber); }

.hov-tagline {
	margin: 0;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--paper-72);
	display: none;
}

@media (min-width: 1024px) {
	.hov-tagline { display: block; }
}

.hov-nav { margin-left: auto; }

.hov-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hov-nav__list li { margin: 0; }

.hov-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--sp-1);
	color: var(--paper);
	font-size: var(--fs-ui);
	font-weight: 500;
	text-decoration: none;
}

.hov-nav__list a:hover,
.hov-nav__list .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--amber);
	text-decoration-thickness: 2px;
}

.hov-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 2px solid var(--paper-72);
	border-radius: var(--radius-sm);
	color: var(--paper);
	cursor: pointer;
}

.hov-nav-toggle__bar,
.hov-nav-toggle__bar::before,
.hov-nav-toggle__bar::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: '';
}

.hov-nav-toggle__bar { position: relative; }
.hov-nav-toggle__bar::before { position: absolute; top: -6px; }
.hov-nav-toggle__bar::after { position: absolute; top: 6px; }

@media (max-width: 1023.98px) {
	.hov-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ink);
		border-top: 1px solid var(--paper-72);
	}

	.hov-nav[hidden] { display: none; }

	.hov-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--sp-2) var(--gutter) var(--sp-4);
	}

	.hov-nav__list a {
		min-height: 48px;
		border-bottom: 1px solid var(--ink-12);
	}
}

@media (min-width: 1024px) {
	.hov-nav-toggle { display: none; }
	.hov-nav[hidden] { display: block; }
}

/* ==========================================================================
   5. DISCLOSURE BAR (§4.1a, §8.5)
   Ink text, not Muted — prominence is a named FTC factor (§8.4 F6).
   Server-rendered, never collapsible, never inside <details>.
   ========================================================================== */

.hov-disclosure {
	background: var(--paper-sunk);
	border-bottom: 1px solid var(--ink-12);
	color: var(--ink);
}

.hov-disclosure__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-1) var(--sp-2);
	min-height: 34px;
	padding-block: var(--sp-1);
	font-size: .8125rem;
	line-height: 1.35;
}

@media (min-width: 1024px) {
	.hov-disclosure__inner { min-height: 40px; font-size: var(--fs-small); }
}

.hov-disclosure__text { margin: 0; color: var(--ink); }

.hov-disclosure__link {
	color: var(--ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

/* ==========================================================================
   6. REVIEW TOP — the above-the-fold grid (§1.2 mobile, §1.3 desktop)
   ========================================================================== */

.hov-review-top { padding-top: var(--sp-3); }

.hov-review-top__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

@media (min-width: 1024px) {
	.hov-review-top__grid {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		gap: var(--sp-5);
		align-items: start;
	}
}

.hov-breadcrumb {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-micro);
	line-height: 1.4;
	color: var(--muted-strong);
}

.hov-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hov-breadcrumb li { margin: 0; }
.hov-breadcrumb li + li::before { content: '\203A'; margin-right: var(--sp-1); }
.hov-breadcrumb a { color: var(--muted-strong); }

/* The H1 is the mobile LCP element (§1.2). No image above it, ever. */
.hov-page-title { margin: 0 0 var(--sp-2); }

.hov-dek {
	margin: 0 0 var(--sp-3);
	max-width: var(--measure);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--muted-strong);
}

/* MetaStrip (§4.2). */
.hov-meta-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-micro);
	line-height: 1.4;
	color: var(--muted-strong);
}

.hov-meta-strip__author {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--ink);
	font-weight: 500;
}

.hov-meta-strip__avatar {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--paper-sunk);
	object-fit: cover;
}

.hov-meta-strip__sep { color: var(--ink-24); }

/* ==========================================================================
   7. VERDICT BOX (§2.1)
   ========================================================================== */

.hov-verdict {
	position: relative;
	overflow: hidden;
	background: var(--paper-raised);
	border: 2px solid var(--ink);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 0 0 var(--ink); /* hard "printed card" offset, cheap to paint */
	padding: 20px;
}

@media (min-width: 1024px) {
	.hov-verdict { padding: 28px; }
}

/* 6px Amber accent along the top inner edge. Fill only, never text (§8.4 F2). */
.hov-verdict::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--amber);
	content: '';
}

.hov-verdict > :first-child { margin-top: var(--sp-2); }

.hov-verdict__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	margin-bottom: var(--sp-3);
}

.hov-verdict__product {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Verdict pill: Ink bg, Paper text — 14.19:1 (§8.5). */
.hov-verdict-pill {
	display: inline-block;
	padding: var(--sp-1) var(--sp-3);
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hov-verdict__sentence {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-lead);
	line-height: 1.45;
	color: var(--ink);
}

/* Score — only rendered when evidence_basis != research_based (§2.3). */
.hov-score {
	display: flex;
	align-items: baseline;
	gap: var(--sp-1);
	margin: 0 0 var(--sp-1);
}

.hov-score__value { font-size: 2.125rem; font-weight: 700; line-height: 1; }
.hov-score__max { font-size: 55%; color: var(--muted-strong); font-weight: 500; }

.hov-score__note {
	margin: 0 0 var(--sp-3);
	font-size: .8125rem;
	color: var(--muted-strong);
}

.hov-verdict__price {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--muted-strong);
}

.hov-verdict__price b { color: var(--ink); font-weight: 600; }

.hov-price-stale {
	display: block;
	margin-top: var(--sp-1);
	color: var(--red-text);
	font-weight: 500;
}

.hov-verdict__checked {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-micro);
	color: var(--muted-strong);
}

.hov-verdict__jump {
	display: none;
	margin-left: var(--sp-4);
	font-size: var(--fs-ui);
	font-weight: 500;
	color: var(--ink);
}

@media (min-width: 1024px) {
	.hov-verdict__jump { display: inline-block; }
}

.hov-verdict__cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: var(--sp-3);
}

.hov-verdict__cta-row .hov-cta-block { flex: 1 1 auto; margin: 0; min-width: 0; }

/* best_for / skip_if inside the box: desktop only. On mobile they live in the
   BestForSkipIf block below the fold (§1.2 cut #2). */
.hov-verdict .hov-bfsi { display: none; }

@media (min-width: 1024px) {
	.hov-verdict .hov-bfsi { display: grid; margin-bottom: var(--sp-4); }
}

.hov-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-4);
	margin: var(--sp-3) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-micro);
	color: var(--muted-strong);
}

.hov-trust-row li {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
}

.hov-trust-row svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* ==========================================================================
   8. CTA BUTTON (§2.4, §8.5)
   Primary = Amber fill + INK label (7.78:1) + 2px Ink border.
   The border is required: Amber on Paper is 1.82:1 and fails SC 1.4.11 (F1).
   NEVER white text on Amber (2.05:1).
   ========================================================================== */

.hov-cta-block { margin: var(--sp-4) 0; }

.hov-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	min-height: 52px;
	padding: var(--sp-4) var(--sp-5);
	background: var(--amber);
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--fs-cta);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

@media (min-width: 1024px) {
	.hov-cta {
		min-height: 56px;
		padding: 18px var(--sp-6);
		width: auto;
	}
}

.hov-cta:hover { background: #E89B31; color: var(--ink); }
.hov-cta:active { transform: translateY(1px); }

.hov-cta--secondary {
	background: transparent;
	color: var(--ink);
	border: 2px solid var(--ink);
}

.hov-cta--secondary:hover { background: var(--paper-sunk); }

.hov-cta--full { width: 100%; }

.hov-cta__arrow { flex: 0 0 auto; width: 16px; height: 16px; }

/* Microcopy — FTC proximity factor (§4.1b). Muted-strong, never Amber. */
.hov-cta__microcopy {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-micro);
	line-height: 1.4;
	color: var(--muted-strong);
}

/* ==========================================================================
   9. EVIDENCE BADGE (§4.3)
   research_based is the PRIMARY path. It must read as a deliberate,
   credible design decision — not a degraded state.
   ========================================================================== */

.hov-evidence {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-1) var(--sp-3);
	border: 1px solid var(--muted);
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-size: var(--fs-micro);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

.hov-evidence svg { width: 14px; height: 14px; flex: 0 0 14px; }

.hov-evidence--hands_on {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.hov-evidence--hybrid { border-color: var(--amber-text); }

/* Full-width variant: takes the space the score would have used (§2.3). */
.hov-evidence-panel {
	display: block;
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	background: var(--paper-sunk);
	border: 1px solid var(--ink-12);
	border-left: 4px solid var(--ink);
	border-radius: var(--radius-sm);
	color: var(--ink);
	text-decoration: none;
}

.hov-evidence-panel__label {
	display: block;
	font-size: var(--fs-ui);
	font-weight: 700;
	line-height: 1.3;
}

.hov-evidence-panel__body {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--muted-strong);
}

.hov-evidence-panel__more {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	color: var(--ink);
	font-weight: 500;
}

/* ==========================================================================
   10. RAIL / HERO (§1.3, §7.2)
   On mobile the rail follows the VerdictBox in the DOM, so the hero image
   sits BELOW the verdict box and contributes 0 above-fold image bytes.
   ========================================================================== */

.hov-rail { min-width: 0; }

@media (min-width: 1024px) {
	.hov-rail {
		position: sticky;
		top: calc(var(--header-h) + var(--sp-5));
		align-self: start;
	}
}

.hov-rail__card {
	background: var(--paper-raised);
	border: 2px solid var(--ink);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.hov-hero {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--paper-sunk);
	border-bottom: 2px solid var(--ink);
}

.hov-rail__body { padding: var(--sp-4); }

.hov-rail__price {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-small);
	color: var(--muted-strong);
}

.hov-rail__price b { color: var(--ink); font-weight: 600; }

/* The rail's duplicate CTA is desktop-only: on mobile the bottom bar owns
   the persistent CTA role and two competing CTAs read as desperate (§1.4). */
.hov-rail__cta { display: none; }

@media (min-width: 1024px) {
	.hov-rail__cta { display: block; }
}

.hov-hero-caption {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-micro);
	color: var(--muted-strong);
}

/* ==========================================================================
   11. ARTICLE SECTIONS
   ========================================================================== */

.hov-article { padding-block: var(--sp-6) var(--sp-8); }

.hov-section { margin-bottom: var(--section-gap); }

.hov-section > h2 { margin-bottom: var(--sp-3); }

@media (min-width: 1024px) {
	.hov-section > h2 { margin-bottom: var(--sp-4); }
}

.hov-prose { max-width: var(--measure); }
.hov-prose > :last-child { margin-bottom: 0; }

.hov-prose h3 { margin-top: var(--sp-5); }

.hov-prose a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.hov-prose img {
	height: auto;
	border-radius: var(--radius-sm);
}

/* Table of contents — <details>, below the VerdictBox, never above it (§1.2). */
.hov-toc {
	margin: var(--sp-5) 0 0;
	padding: 0;
	background: var(--paper-raised);
	border: 1px solid var(--ink-12);
	border-radius: var(--radius-md);
}

.hov-toc > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-ui);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.hov-toc > summary::after {
	margin-left: auto;
	content: '\25BE';
	color: var(--muted-strong);
}

.hov-toc[open] > summary::after { content: '\25B4'; }

.hov-toc__list {
	margin: 0;
	padding: 0 var(--sp-4) var(--sp-3);
	list-style: none;
}

.hov-toc__list li { margin-bottom: 0; }

.hov-toc__list a {
	display: block;
	min-height: 44px;
	padding: var(--sp-2) 0;
	font-size: var(--fs-ui);
	color: var(--ink);
}

/* ==========================================================================
   12. TLDR / BEST FOR / SKIP IF
   ========================================================================== */

.hov-tldr {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: var(--measure);
}

.hov-tldr li {
	position: relative;
	margin-bottom: var(--sp-3);
	padding-left: var(--sp-5);
	font-size: var(--fs-ui);
	line-height: 1.55;
}

.hov-tldr li::before {
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	background: var(--ink);
	border-radius: 2px;
	content: '';
}

.hov-bfsi {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
}

@media (min-width: 768px) {
	.hov-bfsi { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}

.hov-bfsi__col {
	padding: var(--sp-4);
	background: var(--paper-raised);
	border: 1px solid var(--ink-12);
	border-radius: var(--radius-md);
}

.hov-verdict .hov-bfsi__col {
	padding: var(--sp-3);
	background: var(--paper-sunk);
}

.hov-bfsi__heading {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-ui);
	font-weight: 700;
	line-height: 1.3;
}

/* Column headings may use the text-tier colours (5.38:1 / 5.25:1). */
.hov-bfsi__heading--good { color: var(--green-text); }
.hov-bfsi__heading--bad { color: var(--red-text); }

.hov-bfsi__list { margin: 0; padding: 0; list-style: none; }

.hov-bfsi__list li {
	display: flex;
	gap: var(--sp-2);
	margin-bottom: var(--sp-2);
	font-size: var(--fs-ui);
	line-height: 1.45;
	color: var(--ink); /* item text is ALWAYS Ink, never green/red (§8.4 F3) */
}

.hov-glyph {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: .15em;
}

/* Glyphs only — 3.77:1 / 3.87:1 clears the 3:1 graphical-object threshold. */
.hov-glyph--good { color: var(--green); }
.hov-glyph--bad { color: var(--red); }

/* ==========================================================================
   13. PROS AND CONS (§5.2.8)
   Cons render FIRST in the DOM on mobile — a pros-first mobile stack reads
   as a sales page. CSS order flips them back on desktop.
   ========================================================================== */

.hov-proscons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

@media (min-width: 768px) {
	.hov-proscons { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
	.hov-proscons__col--pros { order: 1; }
	.hov-proscons__col--cons { order: 2; }
}

.hov-proscons__heading {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-h3);
}

.hov-proscons__heading--pros { color: var(--green-text); }
.hov-proscons__heading--cons { color: var(--red-text); }

.hov-proscons__list { margin: 0; padding: 0; list-style: none; }

.hov-proscons__item {
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--ink-12);
}

.hov-proscons__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.hov-proscons__item h4 {
	display: flex;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-1);
	font-size: var(--fs-ui);
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
}

.hov-proscons__item p {
	margin: 0;
	font-size: var(--fs-ui);
	line-height: 1.6;
	color: var(--ink);
}

/* Rating bars — Ink fill, never Amber (§8.4 F2, §8.5). */
.hov-ratings { margin: var(--sp-6) 0 0; max-width: var(--measure); }

.hov-rating {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--sp-1) var(--sp-3);
	margin-bottom: var(--sp-4);
}

.hov-rating__name { font-size: var(--fs-ui); font-weight: 500; }
.hov-rating__value { font-size: var(--fs-ui); font-weight: 700; font-variant-numeric: tabular-nums; }

.hov-rating__track {
	grid-column: 1 / -1;
	height: 10px;
	background: var(--ink-12);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.hov-rating__fill {
	height: 100%;
	background: var(--ink);
	border-radius: var(--radius-pill);
}

.hov-rating__note {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--fs-micro);
	color: var(--muted-strong);
}

/* ==========================================================================
   14. TABLES (§8.5)
   ========================================================================== */

.hov-table-wrap {
	max-width: 100%;
	margin: 0 0 var(--sp-4);
	overflow-x: auto;
	border: 1px solid var(--ink-12);
	border-radius: var(--radius-md);
}

.hov-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-ui);
	line-height: 1.5;
	background: var(--paper-raised);
}

.hov-table caption {
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	font-size: var(--fs-micro);
	color: var(--muted-strong);
	caption-side: bottom;
}

.hov-table th,
.hov-table td {
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ink-12);
}

.hov-table thead th {
	background: var(--ink);
	color: var(--paper);
	font-weight: 700;
	font-size: var(--fs-micro);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 0;
}

.hov-table tbody tr:nth-child(even) { background: var(--paper-sunk); }
.hov-table tbody tr:last-child th,
.hov-table tbody tr:last-child td { border-bottom: 0; }

.hov-table th[scope="row"] { font-weight: 600; }

.hov-table__note {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-micro);
	color: var(--muted-strong);
}

.hov-table__price { font-weight: 600; white-space: nowrap; }

.hov-table ul { margin: 0; padding-left: 1.1em; }
.hov-table li { margin-bottom: var(--sp-1); }

/* Pricing table: per-tier TEXT link, never a button (§3.2). */
.hov-table__link {
	font-size: var(--fs-ui);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.hov-tag {
	display: inline-block;
	padding: 2px var(--sp-2);
	border: 1px solid var(--ink-24);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 500;
	white-space: nowrap;
}

.hov-tag--free { border-color: var(--green-text); color: var(--green-text); }
.hov-tag--downsell { border-color: var(--red-text); color: var(--red-text); }

/* Status chips for the UnverifiedClaims table. White on the -fill tiers:
   6.05:1 and 5.92:1 (§8.4 F4). Never white on the raw brand green/red. */
.hov-status {
	display: inline-block;
	padding: 2px var(--sp-2);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.hov-status--verified { background: var(--green-fill); color: #FFF; }
.hov-status--vendor_claim { background: var(--paper-sunk); color: var(--ink); border: 1px solid var(--ink-24); }
.hov-status--could_not_verify { background: var(--red-fill); color: #FFF; }

/* ==========================================================================
   15. METHODOLOGY / UNVERIFIED CLAIMS (§4.3)
   Transparency reads as a feature here, not an apology.
   ========================================================================== */

.hov-methodology__intro {
	max-width: var(--measure);
	padding: var(--sp-4) 0 0;
	font-size: var(--fs-body);
}

.hov-methodology__intro > :first-child { margin-top: 0; }

.hov-method-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: var(--sp-5) 0;
	padding: 0;
	list-style: none;
	counter-reset: hov-step;
}

@media (min-width: 768px) {
	.hov-method-steps { grid-template-columns: repeat(3, 1fr); }
}

.hov-method-steps li {
	margin: 0;
	padding: var(--sp-4);
	background: var(--paper-raised);
	border: 1px solid var(--ink-12);
	border-radius: var(--radius-md);
	counter-increment: hov-step;
}

.hov-method-steps li h3 {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-ui);
	font-weight: 700;
}

.hov-method-steps li h3::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: var(--sp-2);
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	content: counter(hov-step);
	vertical-align: middle;
}

.hov-method-steps li p { margin: 0; font-size: var(--fs-small); line-height: 1.55; }

.hov-claims__lead {
	max-width: var(--measure);
	margin: var(--sp-5) 0 var(--sp-3);
	font-size: var(--fs-ui);
	color: var(--muted-strong);
}

/* ==========================================================================
   16. CALLOUT (§5.2.16)
   Never a red background with white text at body size (§8.4 F4).
   ========================================================================== */

.hov-callout {
	max-width: var(--measure);
	margin: var(--sp-5) 0;
	padding: var(--sp-4);
	background: var(--paper-raised);
	border: 1px solid var(--ink-12);
	border-left: 4px solid var(--ink);
	border-radius: var(--radius-sm);
}

.hov-callout--caution { border-left-color: var(--red-text); }
.hov-callout--limitation { border-left-color: var(--muted); }

.hov-callout__title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-ui);
	font-weight: 700;
}

.hov-callout > :last-child { margin-bottom: 0; }

/* ==========================================================================
   17. GALLERY / EMBEDS (§5.2.15, §5.2.23)
   ========================================================================== */

.hov-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-4);
}

@media (min-width: 640px) {
	.hov-gallery { grid-template-columns: repeat(2, 1fr); }
}

.hov-gallery figure {
	margin: 0;
	background: var(--paper-raised);
	border: 1px solid var(--ink-12);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.hov-gallery img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--paper-sunk);
}

.hov-gallery figcaption {
	padding: var(--sp-3);
	font-size: var(--fs-micro);
	line-height: 1.45;
	color: var(--muted-strong);
}

/* Vendor material must be visibly credited (§4.3.6). */
.hov-gallery__credit {
	display: block;
	margin-top: var(--sp-1);
	font-weight: 600;
	color: var(--ink);
}

.hov-embed {
	margin: var(--sp-5) 0;
	background: var(--paper-raised);
	border: 1px solid var(--ink-12);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* height is reserved inline per-embed so a third-party iframe cannot shift
   layout (§5.2.23). */
.hov-embed__frame { width: 100%; }
.hov-embed__frame > * { max-width: 100%; }

.hov-embed__label {
	padding: var(--sp-2) var(--sp-3);
	background: var(--paper-sunk);
	font-size: var(--fs-micro);
	font-weight: 600;
}

.hov-embed__consent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4);
	font-size: var(--fs-small);
	color: var(--muted-strong);
}

/* ==========================================================================
   18. FAQ (§5.2.14) — native <details>, zero JS, keyboard-operable
   ========================================================================== */

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

.hov-faq__item {
	margin-bottom: var(--sp-2);
	background: var(--paper-raised);
	border: 1px solid var(--ink-12);
	border-radius: var(--radius-md);
}

.hov-faq__item > summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 44px;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-ui);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

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

.hov-faq__item > summary::after {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 1.125rem;
	color: var(--muted-strong);
	content: '+';
}

.hov-faq__item[open] > summary::after { content: '\2212'; }

.hov-faq__answer {
	padding: 0 var(--sp-4) var(--sp-4);
	font-size: var(--fs-ui);
	line-height: 1.6;
}

.hov-faq__answer > :last-child { margin-bottom: 0; }

/* ==========================================================================
   19. FINAL VERDICT / AUTHOR / RELATED / UPDATE LOG
   ========================================================================== */

.hov-final {
	padding: var(--sp-5);
	background: var(--paper-raised);
	border: 2px solid var(--ink);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 0 0 var(--ink);
}

@media (min-width: 1024px) {
	.hov-final { padding: var(--sp-6); }
}

.hov-final__restate {
	max-width: var(--measure);
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-lead);
	line-height: 1.5;
}

.hov-final .hov-cta { width: 100%; }

.hov-author {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: var(--paper-sunk);
	border-radius: var(--radius-md);
}

.hov-author__photo {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-pill);
	object-fit: cover;
	background: var(--paper-raised);
}

.hov-author__name { margin: 0 0 var(--sp-1); font-size: var(--fs-h3); }

.hov-author__role {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--muted-strong);
}

.hov-author__bio { margin: 0 0 var(--sp-3); font-size: var(--fs-ui); }

.hov-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
}

.hov-author__links li { margin: 0; }

.hov-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.hov-cards { grid-template-columns: repeat(2, 1fr); }
}

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

.hov-cards li { margin: 0; }

.hov-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--paper-raised);
	border: 2px solid var(--ink);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.hov-card__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--paper-sunk);
	border-bottom: 2px solid var(--ink);
}

.hov-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	flex: 1 1 auto;
	padding: var(--sp-4);
}

.hov-card__title { margin: 0; font-size: var(--fs-h3); }

.hov-card__title a { text-decoration: none; }
.hov-card__title a:hover { text-decoration: underline; }

.hov-card__dek { margin: 0; font-size: var(--fs-ui); color: var(--muted-strong); }

.hov-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: auto;
	padding-top: var(--sp-2);
	font-size: var(--fs-micro);
	color: var(--muted-strong);
}

.hov-updatelog { margin: 0; padding: 0; max-width: var(--measure); }

.hov-updatelog div {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-1);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--ink-12);
}

@media (min-width: 640px) {
	.hov-updatelog div { grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp-4); }
}

.hov-updatelog dt {
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--muted-strong);
}

.hov-updatelog dd { margin: 0; font-size: var(--fs-ui); }

/* ==========================================================================
   20. STICKY CTA BAR (§1.4)
   Shipped in the initial HTML, transform: translateY(100%).
   Only transform + visibility animate → compositor only, zero CLS.
   ========================================================================== */

.hov-sticky-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: var(--sticky-h);
	padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
	background: var(--ink);
	color: var(--paper);
	border-top: 1px solid var(--amber);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 180ms ease-out, visibility 0s linear 180ms;
	contain: layout paint style;
	will-change: transform;
}

.hov-sticky-bar.is-visible {
	transform: translateY(0);
	visibility: visible;
	transition: transform 180ms ease-out, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
	.hov-sticky-bar { transition: none; }
}

/* The bottom bar runs at every width, by editorial decision: an offer link must
   be reachable at any scroll position on any device, not only below 1024px.
   The desktop rail still exists; the JS hides the bar whenever the final CTA is
   on screen, so the two never shout at the reader simultaneously. */

.hov-sticky-bar__info { flex: 1 1 60%; min-width: 0; }

.hov-sticky-bar__name {
	display: block;
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* On Ink, only Paper or Amber (§8.4 F5) — never green or red. */
.hov-sticky-bar__price {
	display: block;
	font-size: var(--fs-micro);
	line-height: 1.3;
	color: var(--paper-72);
}

/* The disclosure travels with the link — FTC requirement (§4.1c). */
.hov-sticky-bar__disclosure {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-nano);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--paper-72);
}

.hov-sticky-bar__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-4);
	background: var(--amber);
	color: var(--ink); /* 7.78:1. Never white. */
	border: 0;         /* on Ink the amber boundary is already 7.78:1 (§8.5) */
	border-radius: var(--radius-md);
	font-size: var(--fs-ui);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	max-width: 45%;
}

/* ==========================================================================
   21. HOMEPAGE
   ========================================================================== */

.hov-home-hero { padding-block: var(--sp-6) var(--sp-7); }

.hov-home-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	align-items: center;
}

@media (min-width: 1024px) {
	.hov-home-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-6); }
}

.hov-home-hero h1 { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -.02em; }

.hov-home-hero__lead {
	max-width: var(--measure);
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--muted-strong);
}

/* On mobile the homepage hero also sits below the H1 (§7.2). */
.hov-home-hero__art {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 2px solid var(--ink);
	border-radius: var(--radius-lg);
	background: var(--paper-sunk);
}

.hov-home-section { padding-block: var(--sp-7); }

.hov-home-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}

.hov-home-section__head h2 { margin: 0; }

.hov-home-section__more { font-size: var(--fs-ui); font-weight: 500; }

.hov-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hov-hstep;
}

@media (min-width: 768px) {
	.hov-steps { grid-template-columns: repeat(3, 1fr); }
}

.hov-steps li {
	margin: 0;
	padding: var(--sp-5);
	background: var(--paper-raised);
	border: 1px solid var(--ink-12);
	border-radius: var(--radius-md);
	counter-increment: hov-hstep;
}

.hov-steps h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.hov-steps p { margin: 0; font-size: var(--fs-ui); }

.hov-steps h3::before {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--muted-strong);
	content: 'STEP ' counter(hov-hstep);
}

/* ==========================================================================
   22. ARCHIVE / SEARCH / 404 / PAGE
   ========================================================================== */

.hov-page-head { padding-block: var(--sp-6) var(--sp-5); }

.hov-page-head .hov-dek { margin-bottom: 0; }

.hov-entry { padding-bottom: var(--sp-8); }

.hov-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-6);
}

.hov-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--sp-3);
	background: var(--paper-raised);
	border: 1px solid var(--ink-24);
	border-radius: var(--radius-sm);
	font-size: var(--fs-ui);
	font-weight: 500;
	text-decoration: none;
}

.hov-pagination .page-numbers.current {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.hov-search-form {
	display: flex;
	gap: var(--sp-2);
	max-width: 480px;
}

.hov-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	background: var(--paper-raised);
	border: 2px solid var(--ink);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-ui);
	color: var(--ink);
}

.hov-search-form__submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 var(--sp-4);
	background: var(--ink);
	color: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--fs-ui);
	font-weight: 700;
	cursor: pointer;
}

.hov-404 { padding-block: var(--sp-8) var(--sp-9); text-align: left; }
.hov-404__code { margin: 0 0 var(--sp-2); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; color: var(--muted-strong); }

.hov-links-list { margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.hov-links-list li { margin-bottom: var(--sp-2); }
.hov-links-list a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); font-weight: 500; }

/* ==========================================================================
   23. FOOTER
   Nothing green or red on Ink (§8.4 F5).
   ========================================================================== */

.hov-footer {
	background: var(--ink);
	color: var(--paper);
	padding-block: var(--sp-7) var(--sp-6);
}

.hov-footer a { color: var(--paper); }

.hov-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

@media (min-width: 768px) {
	.hov-footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-6); }
}

.hov-footer__brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: 1.0625rem; text-decoration: none; }

.hov-footer__about { margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--paper-72); max-width: 42ch; }

.hov-footer__nav ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-1) var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hov-footer__nav li { margin: 0; }

.hov-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--fs-ui);
	font-weight: 500;
}

.hov-footer__legal {
	margin: var(--sp-6) 0 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--paper-72);
	font-size: var(--fs-micro);
	line-height: 1.6;
	color: var(--paper-72);
}

.hov-footer__legal p { margin: 0 0 var(--sp-2); }
.hov-footer__legal p:last-child { margin-bottom: 0; }

/* ==========================================================================
   24. PRINT
   ========================================================================== */

@media print {
	.hov-sticky-bar,
	.hov-nav,
	.hov-nav-toggle,
	.hov-rail__cta,
	.skip-link { display: none !important; }

	body { background: #FFF; }
	.hov-cta { border: 2px solid #000; background: transparent; }
}