/*
 * Heranvi theme — global design foundation (WP-05 Step 07).
 *
 * Brand tokens themselves (colors, font stacks) are declared in style.css
 * and are locked — this file only builds the reusable system ON TOP of
 * them: spacing/type scale, layout primitives, components, and responsive
 * behavior. Deliberately not a large design-system framework — just the
 * tokens and components the templates in this step actually use.
 */

/* ---------------------------------------------------------------------
   1. Derived tokens (spacing / type scale / radius / shadow / neutrals)
   Neutrals below are DERIVED utility tones, not part of the five locked
   brand colors in style.css — used for borders/muted text/backgrounds.
   ------------------------------------------------------------------ */
:root {
	--heranvi-space-1: 0.25rem;
	--heranvi-space-2: 0.5rem;
	--heranvi-space-3: 0.75rem;
	--heranvi-space-4: 1rem;
	--heranvi-space-5: 1.5rem;
	--heranvi-space-6: 2rem;
	--heranvi-space-7: 3rem;
	--heranvi-space-8: 4rem;
	--heranvi-space-9: 6rem;

	--heranvi-container-max: 1280px;
	--heranvi-container-pad: var(--heranvi-space-5);

	--heranvi-radius-sm: 4px;
	--heranvi-radius-md: 10px;
	--heranvi-radius-lg: 18px;

	--heranvi-shadow-sm: 0 1px 3px rgba(41, 33, 47, 0.08);
	--heranvi-shadow-md: 0 6px 24px rgba(41, 33, 47, 0.10);

	--heranvi-neutral-100: #F6F1EE;
	--heranvi-neutral-200: #E9E1DC;
	--heranvi-neutral-400: #A99FA6;
	--heranvi-neutral-600: #6E6470;

	--heranvi-color-text: var(--heranvi-color-charcoal);
	--heranvi-color-text-muted: var(--heranvi-neutral-600);
	--heranvi-color-border: var(--heranvi-neutral-200);
	--heranvi-color-surface: #FFFFFF;
	--heranvi-color-bg: var(--heranvi-color-warm-white);

	--heranvi-focus-ring: 0 0 0 3px rgba(107, 47, 163, 0.35);

	/* Fluid-ish type scale — clamp() keeps headline sizes readable at
	   390px without a separate mobile override for every heading. */
	--heranvi-fs-body: 1rem;
	--heranvi-fs-small: 0.875rem;
	--heranvi-fs-h6: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--heranvi-fs-h5: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--heranvi-fs-h4: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--heranvi-fs-h3: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
	--heranvi-fs-h2: clamp(2rem, 1.6rem + 1.6vw, 2.875rem);
	--heranvi-fs-h1: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
}

/* ---------------------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body.heranvi-site {
	margin: 0;
	background: var(--heranvi-color-bg);
	color: var(--heranvi-color-text);
	font-family: var(--heranvi-font-body);
	font-size: var(--heranvi-fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--heranvi-font-headline);
	color: var(--heranvi-color-charcoal);
	line-height: 1.15;
	margin: 0 0 var(--heranvi-space-3);
	font-weight: 700;
}

h1 { font-size: var(--heranvi-fs-h1); }
h2 { font-size: var(--heranvi-fs-h2); }
h3 { font-size: var(--heranvi-fs-h3); }
h4 { font-size: var(--heranvi-fs-h4); }
h5 { font-size: var(--heranvi-fs-h5); }
h6 { font-size: var(--heranvi-fs-h6); }

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

a {
	color: var(--heranvi-color-primary-purple);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { color: var(--heranvi-color-deep-purple); }

ul, ol { padding-left: 1.25em; }

/* Visible, accessible focus state everywhere — never suppressed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--heranvi-color-primary-purple);
	outline-offset: 2px;
	border-radius: var(--heranvi-radius-sm);
}

/* Skip link — hidden until focused, first focusable element on the page. */
.heranvi-skip-link {
	position: absolute;
	left: var(--heranvi-space-3);
	top: -60px;
	z-index: 1000;
	background: var(--heranvi-color-charcoal);
	color: #fff;
	padding: var(--heranvi-space-3) var(--heranvi-space-4);
	border-radius: var(--heranvi-radius-sm);
	font-family: var(--heranvi-font-ui);
	font-weight: 600;
	transition: top 0.15s ease;
}
.heranvi-skip-link:focus {
	top: var(--heranvi-space-3);
	color: #fff;
}

/* Screen-reader-only utility (labels, landmarks). */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0; padding: 0; margin: -1px;
}

/* ---------------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------------ */
.heranvi-container {
	max-width: var(--heranvi-container-max);
	margin-inline: auto;
	padding-inline: var(--heranvi-container-pad);
}

.heranvi-section { padding-block: var(--heranvi-space-8); }
.heranvi-section--tight { padding-block: var(--heranvi-space-6); }
.heranvi-section--surface { background: var(--heranvi-color-surface); }
.heranvi-section--tint {
	background: linear-gradient(180deg, rgba(107,47,163,0.05), rgba(107,47,163,0) 60%);
}

.heranvi-grid {
	display: grid;
	gap: var(--heranvi-space-6);
}
.heranvi-grid--3 { grid-template-columns: repeat(3, 1fr); }
.heranvi-grid--4 { grid-template-columns: repeat(4, 1fr); }
.heranvi-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1023px) {
	.heranvi-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.heranvi-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.heranvi-grid--4,
	.heranvi-grid--3,
	.heranvi-grid--2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   4. Section header (used across homepage / archive sections)
   ------------------------------------------------------------------ */
.heranvi-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--heranvi-space-4);
	margin-bottom: var(--heranvi-space-6);
	border-bottom: 2px solid var(--heranvi-color-charcoal);
	padding-bottom: var(--heranvi-space-3);
}
.heranvi-section-header__eyebrow {
	display: block;
	font-family: var(--heranvi-font-ui);
	font-size: var(--heranvi-fs-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--heranvi-color-primary-purple);
	margin-bottom: var(--heranvi-space-1);
}
.heranvi-section-header h2,
.heranvi-section-header h1 { margin-bottom: 0; }
.heranvi-section-header__link {
	font-family: var(--heranvi-font-ui);
	font-weight: 600;
	font-size: var(--heranvi-fs-small);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------ */
.heranvi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--heranvi-space-2);
	font-family: var(--heranvi-font-ui);
	font-weight: 600;
	font-size: var(--heranvi-fs-small);
	line-height: 1;
	padding: 0.85em 1.5em;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.heranvi-btn:active { transform: translateY(1px); }

.heranvi-btn--primary {
	background: var(--heranvi-color-primary-purple);
	color: #fff;
	border-color: var(--heranvi-color-primary-purple);
}
.heranvi-btn--primary:hover { background: var(--heranvi-color-deep-purple); border-color: var(--heranvi-color-deep-purple); color: #fff; }

.heranvi-btn--accent {
	background: var(--heranvi-color-accent-yellow);
	color: var(--heranvi-color-charcoal);
	border-color: var(--heranvi-color-accent-yellow);
}
.heranvi-btn--accent:hover { background: #e6b420; border-color: #e6b420; color: var(--heranvi-color-charcoal); }

.heranvi-btn--outline {
	background: transparent;
	color: var(--heranvi-color-charcoal);
	border-color: var(--heranvi-color-charcoal);
}
.heranvi-btn--outline:hover { background: var(--heranvi-color-charcoal); color: #fff; }

.heranvi-btn--sm { padding: 0.6em 1.1em; font-size: 0.8125rem; }
.heranvi-btn--block { width: 100%; }
.heranvi-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.heranvi-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--heranvi-font-ui);
	font-weight: 600;
}
.heranvi-link-arrow::after { content: "\2192"; transition: transform 0.15s ease; }
.heranvi-link-arrow:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   6. Cards (editorial story card + product card share a base)
   ------------------------------------------------------------------ */
.heranvi-card {
	display: flex;
	flex-direction: column;
	background: var(--heranvi-color-surface);
	border-radius: var(--heranvi-radius-md);
	overflow: hidden;
	border: 1px solid var(--heranvi-color-border);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.heranvi-card:hover { box-shadow: var(--heranvi-shadow-md); transform: translateY(-2px); }

.heranvi-card__media {
	position: relative;
	aspect-ratio: 3 / 2; /* GATE 5.2.1 — matches heranvi-card's registered 720x480, was 4/3 */
	background: linear-gradient(135deg, var(--heranvi-color-primary-purple), var(--heranvi-color-deep-purple));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.heranvi-card__media img { width: 100%; height: 100%; object-fit: cover; }
.heranvi-card__media-fallback {
	font-family: var(--heranvi-font-headline);
	font-size: 2.5rem;
	color: rgba(255,255,255,0.85);
}

.heranvi-card__body {
	padding: var(--heranvi-space-4) var(--heranvi-space-4) var(--heranvi-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--heranvi-space-2);
	flex: 1;
}

.heranvi-eyebrow {
	font-family: var(--heranvi-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--heranvi-color-primary-purple);
}

.heranvi-card__title {
	font-size: var(--heranvi-fs-h5);
	margin: 0;
}
.heranvi-card__title a { color: inherit; text-decoration: none; }
.heranvi-card__title a:hover { color: var(--heranvi-color-primary-purple); }

.heranvi-card__excerpt {
	color: var(--heranvi-color-text-muted);
	font-size: 0.9375rem;
	margin: 0;
}

.heranvi-card__meta {
	margin-top: auto;
	padding-top: var(--heranvi-space-2);
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	color: var(--heranvi-color-text-muted);
	display: flex;
	gap: var(--heranvi-space-2);
	align-items: center;
}

/* Hero (lead story) — a larger variant of the same card language. */
.heranvi-hero {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--heranvi-space-7);
	align-items: center;
}
.heranvi-hero__media {
	aspect-ratio: 16 / 11;
	border-radius: var(--heranvi-radius-lg);
	background: linear-gradient(135deg, var(--heranvi-color-primary-purple), var(--heranvi-color-deep-purple));
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.heranvi-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.heranvi-hero h1,
.heranvi-hero h2 { font-size: var(--heranvi-fs-h1); margin-bottom: var(--heranvi-space-4); }
.heranvi-hero__excerpt { font-size: 1.125rem; color: var(--heranvi-color-text-muted); }

@media (max-width: 899px) {
	.heranvi-hero { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   7. Product card
   ------------------------------------------------------------------ */
.heranvi-product-card__price {
	font-family: var(--heranvi-font-ui);
	font-weight: 700;
	color: var(--heranvi-color-charcoal);
}
.heranvi-product-card__score {
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--heranvi-color-primary-purple);
}

/* ---------------------------------------------------------------------
   8. Trust badges
   ------------------------------------------------------------------ */
.heranvi-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--heranvi-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.heranvi-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--heranvi-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.4em 0.85em;
	border-radius: 999px;
	background: var(--heranvi-neutral-100);
	color: var(--heranvi-color-charcoal);
	border: 1px solid var(--heranvi-color-border);
}
.heranvi-badge--pick {
	background: var(--heranvi-color-primary-purple);
	color: #fff;
	border-color: var(--heranvi-color-primary-purple);
}
.heranvi-badge--tested {
	background: var(--heranvi-color-deep-purple);
	color: #fff;
	border-color: var(--heranvi-color-deep-purple);
}
.heranvi-badge--expert {
	background: #fff;
	color: var(--heranvi-color-deep-purple);
	border-color: var(--heranvi-color-deep-purple);
}
.heranvi-badge--popular {
	background: var(--heranvi-color-accent-yellow);
	color: var(--heranvi-color-charcoal);
	border-color: var(--heranvi-color-accent-yellow);
}

/* Disclosure notices — visually distinct from trust badges, never hidden
   in footer-only text (Step 07 §12). */
.heranvi-disclosure {
	display: flex;
	align-items: flex-start;
	gap: var(--heranvi-space-2);
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	line-height: 1.5;
	padding: var(--heranvi-space-3) var(--heranvi-space-4);
	border-radius: var(--heranvi-radius-sm);
	background: var(--heranvi-neutral-100);
	border: 1px solid var(--heranvi-color-border);
	color: var(--heranvi-color-text-muted);
}
.heranvi-disclosure--sponsored {
	background: #FFF6DC;
	border-color: var(--heranvi-color-accent-yellow);
	color: var(--heranvi-color-charcoal);
}
.heranvi-disclosure__tag {
	flex-shrink: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--heranvi-color-charcoal);
}

/* ---------------------------------------------------------------------
   9. Score presentation
   ------------------------------------------------------------------ */
.heranvi-score-panel {
	display: flex;
	gap: var(--heranvi-space-5);
	align-items: flex-start;
	padding: var(--heranvi-space-5);
	background: var(--heranvi-neutral-100);
	border-radius: var(--heranvi-radius-md);
	flex-wrap: wrap;
}
.heranvi-score-panel__number {
	font-family: var(--heranvi-font-headline);
	font-size: 3rem;
	font-weight: 700;
	color: var(--heranvi-color-primary-purple);
	line-height: 1;
	flex-shrink: 0;
}
.heranvi-score-panel__number span { font-size: 1.25rem; color: var(--heranvi-color-text-muted); font-family: var(--heranvi-font-ui); }
.heranvi-score-panel__copy { font-size: 0.875rem; color: var(--heranvi-color-text-muted); max-width: 46ch; }

.heranvi-score-bars { display: flex; flex-direction: column; gap: var(--heranvi-space-2); margin-top: var(--heranvi-space-4); }
.heranvi-score-bar__label {
	display: flex;
	justify-content: space-between;
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.2em;
}
.heranvi-score-bar__track {
	height: 6px;
	background: var(--heranvi-color-border);
	border-radius: 999px;
	overflow: hidden;
}
.heranvi-score-bar__fill {
	height: 100%;
	background: var(--heranvi-color-primary-purple);
	border-radius: 999px;
}

/* ---------------------------------------------------------------------
   10. Purchase / offer box
   ------------------------------------------------------------------ */
.heranvi-purchase-box {
	border: 1px solid var(--heranvi-color-border);
	border-radius: var(--heranvi-radius-md);
	padding: var(--heranvi-space-5);
	background: var(--heranvi-color-surface);
	box-shadow: var(--heranvi-shadow-sm);
}
.heranvi-purchase-box__label {
	font-family: var(--heranvi-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--heranvi-color-text-muted);
	margin-bottom: var(--heranvi-space-1);
}
.heranvi-purchase-box__price {
	font-family: var(--heranvi-font-headline);
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: var(--heranvi-space-1);
}
.heranvi-purchase-box__meta {
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	color: var(--heranvi-color-text-muted);
	margin-bottom: var(--heranvi-space-4);
}
.heranvi-offer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--heranvi-space-3);
	padding: var(--heranvi-space-3) 0;
	border-top: 1px solid var(--heranvi-color-border);
	font-family: var(--heranvi-font-ui);
	font-size: 0.875rem;
}
.heranvi-offer-row:first-of-type { border-top: none; }

/* ---------------------------------------------------------------------
   11. Forms (search, newsletter)
   ------------------------------------------------------------------ */
.heranvi-field {
	font-family: var(--heranvi-font-ui);
	font-size: 0.9375rem;
	padding: 0.75em 1em;
	border: 1px solid var(--heranvi-color-border);
	border-radius: var(--heranvi-radius-sm);
	background: #fff;
	color: var(--heranvi-color-text);
	width: 100%;
}
.heranvi-field:focus { border-color: var(--heranvi-color-primary-purple); }

label.heranvi-label {
	display: block;
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: var(--heranvi-space-1);
}

.heranvi-search-form,
.heranvi-newsletter-form {
	display: flex;
	gap: var(--heranvi-space-2);
	flex-wrap: wrap;
}
.heranvi-search-form .heranvi-field,
.heranvi-newsletter-form .heranvi-field { flex: 1; min-width: 0; }

.heranvi-newsletter-form--unavailable { display: block; }
.heranvi-newsletter-form__notice { margin: 0; font-size: 0.9375rem; opacity: 0.85; }

/* Static loading skeleton shown inside the Reach mount div until Reach's
   own script inserts the real iframe (see heranvi_render_newsletter_
   form()'s own doc comment). Deliberately no animation/shimmer — a still
   skeleton is sufficient and avoids adding motion. Semi-transparent white
   bars read correctly on every current placement (footer/homepage/
   article all sit on the same deep-purple `.heranvi-newsletter`
   background). `aria-hidden` on the wrapper (see the PHP) keeps this out
   of the accessibility tree; these are plain non-interactive <span>s
   with no fallback content, so a CSS failure just leaves empty, inert
   elements — never a fake control.

   IMPORTANT: confirmed by direct inspection that Reach's script APPENDS
   its <iframe> as a sibling inside this div rather than clearing it
   first — so the skeleton is hidden here, in CSS, once an iframe is
   actually present, rather than assumed to disappear on its own. `:has()`
   has solid support in every current evergreen browser; if a browser
   somehow lacks it, the (rare) fallback is the skeleton staying visible
   alongside the real form rather than anything broken or misleading. */
.heranvi-newsletter-form--reach { display: block; }
.heranvi-newsletter-form--reach:has( iframe ) .heranvi-newsletter-skeleton { display: none; }
.heranvi-newsletter-skeleton {
	display: flex;
	flex-direction: column;
	gap: var(--heranvi-space-2);
}
.heranvi-newsletter-skeleton__label {
	width: 84px;
	height: 11px;
	border-radius: var(--heranvi-radius-sm);
	background: rgba(255, 255, 255, 0.28);
}
.heranvi-newsletter-skeleton__input {
	width: 100%;
	height: 42px;
	border-radius: var(--heranvi-radius-sm);
	background: rgba(255, 255, 255, 0.16);
}
.heranvi-newsletter-skeleton__button {
	width: 100%;
	height: 44px;
	border-radius: var(--heranvi-radius-md);
	background: rgba(255, 255, 255, 0.28);
}
.heranvi-newsletter-skeleton__attribution {
	width: 72px;
	height: 8px;
	border-radius: var(--heranvi-radius-sm);
	background: rgba(255, 255, 255, 0.16);
	align-self: center;
	margin-top: var(--heranvi-space-1);
}

/* Post-submission "Check your inbox" message — revealed via a `hidden`
   attribute toggle by assets/js/newsletter-status.js once Reach's own
   embed.js confirms submission. Deliberately no text-align of its own:
   every current placement (.heranvi-newsletter, .heranvi-newsletter--
   compact) already sets the alignment this should inherit. Colors match
   the existing .heranvi-newsletter p / deep-purple background tokens
   directly above, since this sits on the same background in every
   placement. */
.heranvi-newsletter-status[hidden] { display: none; }
.heranvi-newsletter-status {
	margin-top: var(--heranvi-space-4);
}
.heranvi-newsletter-status__heading {
	margin: 0 0 0.35em;
	color: #fff;
	font-family: var(--heranvi-font-ui);
	font-weight: 700;
}
.heranvi-newsletter-status__body {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}
.heranvi-newsletter-status__secondary {
	margin: var(--heranvi-space-2) 0 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------------
   12. Newsletter CTA block
   ------------------------------------------------------------------ */
.heranvi-newsletter {
	background: var(--heranvi-color-deep-purple);
	color: #fff;
	border-radius: var(--heranvi-radius-lg);
	padding: var(--heranvi-space-7) var(--heranvi-space-6);
	text-align: center;
}
.heranvi-newsletter h2 { color: #fff; }
.heranvi-newsletter p { color: rgba(255,255,255,0.85); max-width: 50ch; margin-inline: auto; }
.heranvi-newsletter .heranvi-newsletter-form { max-width: 420px; margin: var(--heranvi-space-5) auto 0; }
.heranvi-newsletter .heranvi-field { background: rgba(255,255,255,0.95); border: none; }

/* ---------------------------------------------------------------------
   12a. Article newsletter CTA (compact/horizontal) — single.php ONLY.
   Reach's embed renders as a cross-origin <iframe> (confirmed by direct
   inspection: <iframe src="https://reach-forms.hostingerusercontent.com/
   form/...">), so its own internal email-field/button layout cannot be
   reached or restyled by theme CSS at all — that is Reach's own page on
   Reach's own origin. Everything below only resizes/repositions the
   OUTER container Heranvi actually owns (the copy column and the
   iframe's wrapping box); it never targets anything inside the iframe.
   Desktop-first, matching this file's existing convention — base rules
   below are the >=768px two-column layout; the 767px query stacks it.
   ------------------------------------------------------------------ */
.heranvi-newsletter--compact {
	display: flex;
	align-items: center;
	gap: var(--heranvi-space-6);
	text-align: left;
	padding: var(--heranvi-space-5) var(--heranvi-space-6);
	max-width: var(--heranvi-container-max);
	margin-inline: auto;
}
.heranvi-newsletter--compact .heranvi-newsletter__copy {
	flex: 0 1 38%;
	min-width: 0;
}
.heranvi-newsletter--compact .heranvi-newsletter__copy h2 { margin: 0 0 0.35em; }
.heranvi-newsletter--compact .heranvi-newsletter__copy p { margin: 0; max-width: none; }
.heranvi-newsletter--compact .heranvi-newsletter-form {
	flex: 1 1 60%;
	max-width: none;
	min-width: 0;
	margin: 0;
}
/* A reasonable placeholder height only for the moment before Reach's
   iframe reports its real content height back to the page — prevents
   the row from visibly collapsing to nothing while that handshake is in
   flight. Scoped to this one placement; the footer/homepage instances
   are untouched. */
.heranvi-newsletter--compact .heranvi-newsletter-form--reach { min-height: 44px; }

@media (max-width: 767px) {
	.heranvi-newsletter--compact {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: var(--heranvi-space-6) var(--heranvi-space-5);
		gap: var(--heranvi-space-4);
	}
	.heranvi-newsletter--compact .heranvi-newsletter__copy,
	.heranvi-newsletter--compact .heranvi-newsletter-form {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}
	.heranvi-newsletter--compact .heranvi-newsletter__copy p { margin-inline: auto; max-width: 50ch; }
}

/* ---------------------------------------------------------------------
   13. Header
   ------------------------------------------------------------------ */
.heranvi-header {
	background: var(--heranvi-color-warm-white);
	border-bottom: 1px solid var(--heranvi-color-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.heranvi-header__bar {
	display: flex;
	align-items: center;
	gap: var(--heranvi-space-5);
	padding-block: var(--heranvi-space-4);
}
.heranvi-brand {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	margin-right: auto;
}
.heranvi-brand__wordmark {
	font-family: var(--heranvi-font-headline);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--heranvi-color-charcoal);
	letter-spacing: 0.01em;
}
.heranvi-brand__tagline {
	font-family: var(--heranvi-font-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--heranvi-color-primary-purple);
}

.heranvi-nav {
	display: flex;
	align-items: center;
	gap: var(--heranvi-space-5);
}
.heranvi-nav ul {
	display: flex;
	align-items: center;
	gap: var(--heranvi-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--heranvi-font-ui);
	font-weight: 600;
	font-size: 0.9375rem;
}
.heranvi-nav a {
	color: var(--heranvi-color-charcoal);
	text-decoration: none;
	padding: 0.25em 0;
	border-bottom: 2px solid transparent;
}
.heranvi-nav a:hover,
.heranvi-nav .current-menu-item > a {
	color: var(--heranvi-color-primary-purple);
	border-bottom-color: var(--heranvi-color-accent-yellow);
}
.heranvi-nav__placeholder {
	color: var(--heranvi-color-text-muted);
	cursor: default;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}
.heranvi-nav__placeholder-badge {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--heranvi-neutral-200);
	color: var(--heranvi-color-text-muted);
	padding: 0.15em 0.5em;
	border-radius: 999px;
}

.heranvi-header__actions {
	display: flex;
	align-items: center;
	gap: var(--heranvi-space-3);
}
.heranvi-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--heranvi-color-border);
	color: var(--heranvi-color-charcoal);
	cursor: pointer;
	text-decoration: none;
}
.heranvi-icon-btn:hover { background: var(--heranvi-neutral-100); }

.heranvi-menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--heranvi-color-border);
	border-radius: var(--heranvi-radius-sm);
	padding: 0.5em 0.75em;
	cursor: pointer;
}

.heranvi-header__search {
	display: none;
	border-top: 1px solid var(--heranvi-color-border);
	padding-block: var(--heranvi-space-4);
}
.heranvi-header__search.is-open { display: block; }

@media (max-width: 899px) {
	.heranvi-nav { display: none; }
	.heranvi-nav.is-open {
		display: block;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--heranvi-color-warm-white);
		border-bottom: 1px solid var(--heranvi-color-border);
		padding: var(--heranvi-space-4) 0;
	}
	.heranvi-nav.is-open ul {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--heranvi-space-3);
		padding-inline: var(--heranvi-container-pad);
	}
	.heranvi-menu-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
}

/* Fixes a real horizontal-overflow bug caught during WP-05 Step 08's
   390px validation pass: brand + hamburger + search icon + "Subscribe"
   text pill together exceeded very narrow viewports (~397px content at
   a 375px viewport). Subscribe remains reachable via the homepage and
   footer, so it is dropped from the header bar only below 400px rather
   than redesigning the header row. */
@media (max-width: 399px) {
	.heranvi-header__actions .heranvi-btn--accent { display: none; }
}

/* ---------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------ */
.heranvi-footer {
	background: var(--heranvi-color-charcoal);
	color: rgba(255,255,255,0.82);
	margin-top: var(--heranvi-space-9);
}
.heranvi-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.heranvi-footer a:hover { color: var(--heranvi-color-accent-yellow); }
.heranvi-footer__top {
	padding-block: var(--heranvi-space-8);
	display: grid;
	grid-template-columns: 1.3fr repeat(4, 1fr);
	gap: var(--heranvi-space-6);
}
.heranvi-footer__brand .heranvi-brand__wordmark { color: #fff; }
.heranvi-footer__brand p { color: rgba(255,255,255,0.65); font-size: 0.875rem; max-width: 32ch; }
.heranvi-footer h3 {
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	margin-bottom: var(--heranvi-space-3);
}
.heranvi-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--heranvi-space-2); font-size: 0.875rem; }
.heranvi-footer__unlinked { color: rgba(255,255,255,0.45); }
.heranvi-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-block: var(--heranvi-space-5);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--heranvi-space-3);
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.55);
	flex-wrap: wrap;
}

@media (max-width: 899px) {
	.heranvi-footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.heranvi-footer__top { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   15. Article template
   ------------------------------------------------------------------ */
.heranvi-article__header { max-width: 760px; margin: 0 auto var(--heranvi-space-6); text-align: center; }
.heranvi-article__meta {
	font-family: var(--heranvi-font-ui);
	font-size: 0.875rem;
	color: var(--heranvi-color-text-muted);
	display: flex;
	gap: var(--heranvi-space-3);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--heranvi-space-3);
}
.heranvi-article__featured-image {
	max-width: 960px;
	margin: 0 auto var(--heranvi-space-7);
	border-radius: var(--heranvi-radius-lg);
	overflow: hidden;
	aspect-ratio: 3 / 2; /* GATE 5.2.2 — matches heranvi-article-hero's registered 1200x800, was 16/8 (2:1) */
	background: linear-gradient(135deg, var(--heranvi-color-primary-purple), var(--heranvi-color-deep-purple));
}
.heranvi-article__featured-image img { width: 100%; height: 100%; object-fit: cover; }

.heranvi-article__content {
	max-width: 720px;
	margin: 0 auto;
	font-size: 1.0625rem;
	line-height: 1.75;
}
.heranvi-article__content h2 { margin-top: var(--heranvi-space-7); }
.heranvi-article__content h3 { margin-top: var(--heranvi-space-6); }
.heranvi-article__content blockquote {
	border-left: 3px solid var(--heranvi-color-accent-yellow);
	margin: var(--heranvi-space-6) 0;
	padding-left: var(--heranvi-space-4);
	font-family: var(--heranvi-font-headline);
	font-style: italic;
	font-size: 1.25rem;
}
.heranvi-article__content figure { margin: var(--heranvi-space-6) 0; }

.heranvi-author-box {
	max-width: 720px;
	margin: var(--heranvi-space-8) auto 0;
	display: flex;
	gap: var(--heranvi-space-4);
	padding: var(--heranvi-space-5);
	background: var(--heranvi-neutral-100);
	border-radius: var(--heranvi-radius-md);
	align-items: flex-start;
}
.heranvi-author-box__avatar img { border-radius: 50%; width: 64px; height: 64px; }
.heranvi-author-box__name { font-family: var(--heranvi-font-ui); font-weight: 700; margin-bottom: 0.25em; }
.heranvi-author-box__bio { font-size: 0.9375rem; color: var(--heranvi-color-text-muted); margin: 0; }

/* ---------------------------------------------------------------------
   16. Product template
   ------------------------------------------------------------------ */
.heranvi-product__header {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--heranvi-space-7);
	align-items: start;
}
.heranvi-product__media {
	aspect-ratio: 1;
	border-radius: var(--heranvi-radius-lg);
	background: linear-gradient(135deg, var(--heranvi-color-primary-purple), var(--heranvi-color-deep-purple));
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 96px;
}
.heranvi-product__media img { width: 100%; height: 100%; object-fit: cover; }

.heranvi-product__brand {
	font-family: var(--heranvi-font-ui);
	font-weight: 700;
	color: var(--heranvi-color-primary-purple);
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
}
.heranvi-product__title { margin-top: var(--heranvi-space-1); }
.heranvi-product__type { color: var(--heranvi-color-text-muted); font-family: var(--heranvi-font-ui); margin-bottom: var(--heranvi-space-4); }

.heranvi-product__section { margin-top: var(--heranvi-space-7); }
.heranvi-product__section h2 { font-size: var(--heranvi-fs-h4); }

.heranvi-taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--heranvi-space-2); }
.heranvi-taglist li {
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--heranvi-neutral-100);
	padding: 0.4em 0.9em;
	border-radius: 999px;
}

.heranvi-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--heranvi-space-5); }
.heranvi-pros-cons h3 { font-size: var(--heranvi-fs-h6); font-family: var(--heranvi-font-ui); }
.heranvi-pros-cons ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--heranvi-space-2); }
.heranvi-pros-cons li { padding-left: 1.5em; position: relative; font-size: 0.9375rem; }
.heranvi-pros li::before { content: "+"; position: absolute; left: 0; color: var(--heranvi-color-primary-purple); font-weight: 700; }
.heranvi-cons li::before { content: "\2212"; position: absolute; left: 0; color: var(--heranvi-color-text-muted); font-weight: 700; }

@media (max-width: 899px) {
	.heranvi-product__header { grid-template-columns: 1fr; }
	.heranvi-product__media { position: static; }
	.heranvi-pros-cons { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   17. Archive / category / search
   ------------------------------------------------------------------ */
.heranvi-archive-header { max-width: 760px; margin-bottom: var(--heranvi-space-7); }
.heranvi-archive-header__eyebrow { display:block; font-family: var(--heranvi-font-ui); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--heranvi-color-primary-purple); font-size:.8125rem; margin-bottom:.25em; }
.heranvi-archive-header p { color: var(--heranvi-color-text-muted); font-size: 1.0625rem; }

.heranvi-pagination {
	display: flex;
	gap: var(--heranvi-space-2);
	justify-content: center;
	margin-top: var(--heranvi-space-8);
	font-family: var(--heranvi-font-ui);
	font-weight: 600;
}
.heranvi-pagination a,
.heranvi-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.5em;
	border-radius: var(--heranvi-radius-sm);
	border: 1px solid var(--heranvi-color-border);
	text-decoration: none;
	color: var(--heranvi-color-charcoal);
}
.heranvi-pagination .current { background: var(--heranvi-color-primary-purple); border-color: var(--heranvi-color-primary-purple); color: #fff; }
.heranvi-pagination a:hover { border-color: var(--heranvi-color-primary-purple); }

.heranvi-search-tabs { display: flex; gap: var(--heranvi-space-2); margin-bottom: var(--heranvi-space-6); font-family: var(--heranvi-font-ui); font-weight: 600; }
.heranvi-search-tabs a {
	padding: 0.6em 1.2em;
	border-radius: 999px;
	border: 1px solid var(--heranvi-color-border);
	text-decoration: none;
	color: var(--heranvi-color-charcoal);
	font-size: 0.875rem;
}
.heranvi-search-tabs a.is-active { background: var(--heranvi-color-charcoal); color: #fff; border-color: var(--heranvi-color-charcoal); }
.heranvi-search-group { margin-bottom: var(--heranvi-space-7); }
.heranvi-search-group h2 { font-size: var(--heranvi-fs-h5); }

/* ---------------------------------------------------------------------
   18. Author template
   ------------------------------------------------------------------ */
.heranvi-author-header {
	display: flex;
	gap: var(--heranvi-space-5);
	align-items: center;
	margin-bottom: var(--heranvi-space-8);
	flex-wrap: wrap;
}
.heranvi-author-header__avatar img { border-radius: 50%; width: 96px; height: 96px; }
.heranvi-author-header__name { margin-bottom: var(--heranvi-space-2); }
.heranvi-author-header__bio { color: var(--heranvi-color-text-muted); max-width: 60ch; }

/* ---------------------------------------------------------------------
   19. 404
   ------------------------------------------------------------------ */
.heranvi-404 { text-align: center; max-width: 640px; margin-inline: auto; padding-block: var(--heranvi-space-8); }
.heranvi-404__code {
	font-family: var(--heranvi-font-headline);
	font-size: clamp(4rem, 3rem + 4vw, 7rem);
	color: var(--heranvi-color-primary-purple);
	line-height: 1;
	margin-bottom: var(--heranvi-space-4);
}
.heranvi-404 .heranvi-search-form { max-width: 420px; margin: var(--heranvi-space-6) auto; }

/* ---------------------------------------------------------------------
   20. Utility
   ------------------------------------------------------------------ */
.heranvi-text-center { text-align: center; }
.heranvi-muted { color: var(--heranvi-color-text-muted); }
.heranvi-mt-0 { margin-top: 0; }
.heranvi-empty-state {
	padding: var(--heranvi-space-7);
	text-align: center;
	color: var(--heranvi-color-text-muted);
	background: var(--heranvi-neutral-100);
	border-radius: var(--heranvi-radius-md);
}

/* ---------------------------------------------------------------------
   21. Public recommendation experience (WP-05 Step 08)
   ------------------------------------------------------------------ */

.heranvi-nav__cta {
	background: var(--heranvi-color-primary-purple);
	color: #fff !important;
	padding: 0.5em 1.1em;
	border-radius: 999px;
	border-bottom: none !important;
}
.heranvi-nav__cta:hover { background: var(--heranvi-color-deep-purple); color: #fff !important; }

/* Questionnaire */
.heranvi-questionnaire-wrap.is-hidden { display: none; }
.heranvi-questionnaire-wrap--intro { margin-top: 0; }

.heranvi-questionnaire {
	max-width: 720px;
	margin: 0 auto;
}
.heranvi-questionnaire fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
.heranvi-questionnaire legend {
	font-family: var(--heranvi-font-headline);
	font-size: var(--heranvi-fs-h4);
	color: var(--heranvi-color-charcoal);
	padding: 0;
	margin-bottom: var(--heranvi-space-5);
}
/* Gate 1 accessibility fix: recommend.js moves real keyboard focus to
   this legend (tabindex="-1" + .focus()) on every questionnaire step
   change, to announce the new step — removing its outline left that
   focus move with no visible indicator (WCAG 2.4.7). The existing global
   [tabindex]:focus-visible rule above already styles it correctly; this
   override just needs to not exist. */

.heranvi-q-step {
	padding-block: var(--heranvi-space-6);
	border-top: 1px solid var(--heranvi-color-border);
}
.heranvi-questionnaire.js-enhanced .heranvi-q-step {
	border-top: none;
	padding-top: 0;
}

.heranvi-q-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--heranvi-space-5);
}
.heranvi-questionnaire:not(.js-enhanced) .heranvi-q-progress { display: none; }
.heranvi-q-progress__text {
	font-family: var(--heranvi-font-ui);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--heranvi-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.heranvi-q-progress__dots { display: flex; gap: var(--heranvi-space-2); }
.heranvi-q-progress__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--heranvi-color-border);
}
.heranvi-q-progress__dot.is-active { background: var(--heranvi-color-primary-purple); }

.heranvi-q-error {
	color: #A3231B;
	background: #FCEBEA;
	border: 1px solid #F3C6C3;
	border-radius: var(--heranvi-radius-sm);
	padding: var(--heranvi-space-2) var(--heranvi-space-3);
	font-family: var(--heranvi-font-ui);
	font-size: 0.875rem;
	font-weight: 600;
}

.heranvi-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--heranvi-space-3);
}

.heranvi-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--heranvi-font-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 0.75em 1.25em;
	border: 2px solid var(--heranvi-color-border);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.heranvi-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.heranvi-chip:hover { border-color: var(--heranvi-color-primary-purple); }
.heranvi-chip.is-selected {
	background: var(--heranvi-color-primary-purple);
	border-color: var(--heranvi-color-primary-purple);
	color: #fff;
}
.heranvi-chip:has(input:focus-visible) {
	outline: 2px solid var(--heranvi-color-primary-purple);
	outline-offset: 2px;
}

.heranvi-chip--card {
	flex: 1 1 220px;
	padding: var(--heranvi-space-4) var(--heranvi-space-5);
	border-radius: var(--heranvi-radius-md);
	font-size: 1rem;
	justify-content: flex-start;
}

.heranvi-q-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--heranvi-space-6);
	gap: var(--heranvi-space-3);
}
.heranvi-questionnaire:not(.js-enhanced) .heranvi-q-back { display: none; }
.heranvi-questionnaire:not(.js-enhanced) .heranvi-q-next { display: none; }

.heranvi-privacy-note {
	font-family: var(--heranvi-font-ui);
	font-size: 0.8125rem;
	color: var(--heranvi-color-text-muted);
	background: var(--heranvi-neutral-100);
	border-radius: var(--heranvi-radius-sm);
	padding: var(--heranvi-space-3) var(--heranvi-space-4);
	margin-top: var(--heranvi-space-5);
}

/* Results */
.heranvi-results { margin-bottom: var(--heranvi-space-8); }

.heranvi-match-list {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--heranvi-space-6);
}

.heranvi-match-card {
	border: 1px solid var(--heranvi-color-border);
	border-radius: var(--heranvi-radius-lg);
	background: var(--heranvi-color-surface);
	padding: var(--heranvi-space-5);
}
.heranvi-match-card--primary {
	border: 2px solid var(--heranvi-color-primary-purple);
	box-shadow: var(--heranvi-shadow-md);
	padding: var(--heranvi-space-6);
}

.heranvi-match-card__roles {
	display: flex;
	gap: var(--heranvi-space-2);
	margin-bottom: var(--heranvi-space-4);
}

.heranvi-match-card__layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--heranvi-space-6);
	align-items: start;
}
.heranvi-match-card__media {
	aspect-ratio: 1;
	border-radius: var(--heranvi-radius-md);
	background: linear-gradient(135deg, var(--heranvi-color-primary-purple), var(--heranvi-color-deep-purple));
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.heranvi-match-card__media img { width: 100%; height: 100%; object-fit: cover; }

.heranvi-match-card__title { font-size: var(--heranvi-fs-h4); margin: 0.1em 0 0.5em; }
.heranvi-match-card__title a { color: inherit; text-decoration: none; }
.heranvi-match-card__title a:hover { color: var(--heranvi-color-primary-purple); }

.heranvi-match-card__meta {
	display: flex;
	gap: var(--heranvi-space-3);
	font-family: var(--heranvi-font-ui);
	font-size: 0.875rem;
	color: var(--heranvi-color-text-muted);
	margin-bottom: var(--heranvi-space-3);
}

.heranvi-match-card__summary {
	margin-top: var(--heranvi-space-3);
	color: var(--heranvi-color-text-muted);
}

.heranvi-match-why {
	margin-top: var(--heranvi-space-4);
	padding: var(--heranvi-space-4);
	background: var(--heranvi-neutral-100);
	border-radius: var(--heranvi-radius-md);
}
.heranvi-match-why__label {
	font-family: var(--heranvi-font-ui);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--heranvi-space-2);
}
.heranvi-match-why ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4em; }
.heranvi-match-why li {
	font-size: 0.9375rem;
	padding-left: 1.4em;
	position: relative;
}
.heranvi-match-why li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--heranvi-color-primary-purple);
	font-weight: 700;
}

.heranvi-match-card__purchase { margin-top: var(--heranvi-space-5); max-width: 420px; }
.heranvi-match-card__view { margin-top: var(--heranvi-space-4); margin-bottom: 0; }

@media (max-width: 767px) {
	.heranvi-match-card__layout { grid-template-columns: 1fr; }
	.heranvi-match-card__media { max-width: 160px; }
	.heranvi-match-card__purchase { max-width: none; }
	.heranvi-chip--card { flex-basis: 100%; }
	.heranvi-q-nav { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   22. Static Page template (GATE 3.3) — restrained editorial
   information-page layout for native WordPress Pages (Privacy Policy,
   Terms, Affiliate Disclosure, Editorial Policy, About, Contact,
   Advertise, and any future Page). Deliberately its own class, not a
   reuse of .heranvi-article__content, so this can never be affected by
   a future change to the Article template and vice versa — page.php
   is the only template that uses these two classes.

   Typography (headings, paragraphs, links, lists) is inherited from
   the site-wide base rules already defined earlier in this file
   (h1-h6 use --heranvi-font-headline / Playfair Display; body copy
   uses --heranvi-font-body; a { color: var(--heranvi-color-primary-
   purple) }; ul/ol already have list padding) — nothing here
   redefines them, it only constrains width and spacing.
   ------------------------------------------------------------------ */
.heranvi-page__header {
	max-width: 800px;
	margin: 0 auto var(--heranvi-space-6);
	text-align: center;
}

.heranvi-page__content {
	max-width: 800px;
	margin: 0 auto;
	font-size: 1.0625rem;
	line-height: 1.75;
}
.heranvi-page__content h2 { margin-top: var(--heranvi-space-7); }
.heranvi-page__content h3 { margin-top: var(--heranvi-space-6); }
.heranvi-page__content p,
.heranvi-page__content ul,
.heranvi-page__content ol { margin-bottom: var(--heranvi-space-4); }
.heranvi-page__content li { margin-bottom: var(--heranvi-space-2); }

@media (max-width: 599px) {
	.heranvi-page__header,
	.heranvi-page__content { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   23. Reduced motion (V1 release audit fix)

   Does not change default behavior for anyone who has NOT requested
   reduced motion — every rule here lives inside the media query, so
   normal transitions/hover effects (card lift, button press, link-
   arrow slide, chip color change, skip-link slide-in) are completely
   unaffected outside it. No interaction is redesigned; each one still
   fires, just without an animated glide, matching the standard,
   widely-used prefers-reduced-motion pattern (near-instant transitions
   rather than none at all, since some transitions communicate a genuine
   state change and abruptly hiding that is its own usability problem).
   .heranvi-card:hover's translateY is explicitly neutralized on top of
   that, since actual on-hover movement — not just its speed — is the
   one effect named in this fix's own brief.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.heranvi-card:hover {
		transform: none;
	}
}