/*
 * CarFaultIQ — Premium Graphics & Motion v1 (PRE-INTEGRATION)
 * ------------------------------------------------------------------
 * Prepared by Claude ahead of Codex asset generation. Contains:
 *   1. the .cfiq-graphic slot layering contract (so a dropped-in SVG lands
 *      correctly without template or z-index work);
 *   2. a premium presentation for the resolver's EXISTING no-image fallback;
 *   3. Diagnostic Run placement spacing.
 *
 * OWNERSHIP: nothing here touches inc/vehicle-media.php, the image registry,
 * generation precedence, or any image binding. The fallback rules below style
 * a class the resolver ALREADY emits (.cfiq-vehicle-media--fallback) and make
 * no assumption that any particular image exists.
 *
 * FEATURE FLAG: enqueued only when cfiq_theme_graphics_enabled() is true.
 *   define( 'CFIQ_PREMIUM_GRAPHICS', false );  // wp-config.php
 *   add_filter( 'cfiq_premium_graphics', '__return_false' );
 * Premium v1/v1.1 is NOT gated by this and remains active either way.
 *
 * ROLLBACK: remove this file + its enqueue. v1.1 is untouched.
 * ------------------------------------------------------------------
 */

/* ---------- 1. Graphic slot base — the Codex layering contract ---------- */
/*
 * Any SVG dropped into assets/images/graphics/{slug}.svg is wrapped in
 * .cfiq-graphic.cfiq-graphic--{slug} and is decorative (aria-hidden).
 * Defaults below are deliberately inert: a new asset inherits sane behaviour
 * and only needs a positioning rule if it is a background layer.
 */

.cfiq-graphic {
	display: block;
	pointer-events: none;
	line-height: 0;
}

.cfiq-graphic svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Background layers must never intercept clicks or sit above content. */
.cfiq-graphic--hero-layer,
.cfiq-graphic--motif,
.cfiq-graphic--evidence {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

/* G-02 hero chassis topology: above mesh/beam, below .cfiq-product-hero__shell.
   The shell already establishes its own stacking context above this. */
.cfiq-graphic--hero-layer {
	inset: 0;
	opacity: 0.08;
	color: var(--cfiq-cyan, #3dd6f5);
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent 78%);
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent 78%);
}

.cfiq-graphic--hero-layer svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.cfiq-graphic--hero-technical img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

/* Reuse the existing restrained opacity primitive; the path itself stays
   static, and only one low-amplitude node sequence runs in the hero viewport. */
@media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
	.cfiq-graphic--hero-layer .cfiq-topology__node {
		animation: cfiq17g-danger 4.8s ease-in-out infinite;
	}
	.cfiq-graphic--hero-layer .cfiq-topology__node--2 { animation-delay: -0.6s; }
	.cfiq-graphic--hero-layer .cfiq-topology__node--3 { animation-delay: -1.2s; }
	.cfiq-graphic--hero-layer .cfiq-topology__node--4 { animation-delay: -1.8s; }
	.cfiq-graphic--hero-layer .cfiq-topology__node--5 { animation-delay: -2.4s; }
	.cfiq-graphic--hero-layer .cfiq-topology__node--6 { animation-delay: -3s; }
	.cfiq-graphic--hero-layer .cfiq-topology__node--7 { animation-delay: -3.6s; }
	.cfiq-graphic--hero-layer .cfiq-topology__node--8 { animation-delay: -4.2s; }
}

@media (max-width: 640px) {
	/* Mobile: crop to the left third, quieter, and no node cycling (below). */
	.cfiq-graphic--hero-layer {
		opacity: 0.05;
		-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent 45%);
		mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent 45%);
	}
}

/* G-03 category motif override: sits exactly where the v1 CSS mask motif does. */
.cfiq-graphic--motif {
	top: -14px;
	right: -6px;
	width: 148px;
	height: 64px;
	opacity: 0.07;
	color: var(--cfiq-cat-accent, var(--cfiq-cat-default));
}

.cfiq-graphic--motif svg,
.cfiq-graphic--evidence svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 480px) {
	.cfiq-graphic--motif { width: 100px; height: 44px; top: -8px; right: -4px; }
}

/* When a bespoke motif asset is present, retire the v1 CSS mask motif so the
   two never double up. Automatic — no template change needed. */
.cfiq-cat-identity:has(.cfiq-graphic--motif) .cfiq-cat-identity__motif {
	display: none;
}

/* G-06 evidence provenance marks. */
.cfiq-graphic--evidence {
	top: 0;
	right: 0;
	width: 120px;
	height: 48px;
	opacity: 0.06;
	color: var(--cfiq-cat-evidence, var(--cfiq-cyan, #3dd6f5));
}

/* Slot containers need a positioning context for the absolute layers above. */
.cfiq-product-hero,
.cfiq-evidence__summary {
	position: relative;
}

/* ---------- 2. Premium no-image vehicle fallback ---------- */
/*
 * The resolver already emits a semantically correct fallback:
 *   <span class="cfiq-vehicle-media cfiq-vehicle-media--fallback"
 *         role="img" aria-label="…"> <car-{style}.svg> </span>
 * Roughly 83% of published vehicle pages currently hit this path, so it
 * deserves to look deliberate rather than like a failed image load.
 * Presentation only — no resolver contact, no assumption an image exists.
 */

.cfiq-vehicle-media--fallback {
	position: relative;
	border-radius: var(--cfiq-radius, 14px);
	border: 1px solid var(--cfiq-border, #e4e9f0);
	overflow: hidden;
	/* Replaces the flat blue-grey gradient with the site's own paper surface. */
	background:
		linear-gradient(
			160deg,
			color-mix(in srgb, var(--cfiq-slate, #24324a) 3%, var(--cfiq-paper, #f7f9fc)),
			color-mix(in srgb, var(--cfiq-slate, #24324a) 7%, var(--cfiq-paper, #f7f9fc))
		);
}

/* Same low-contrast diagnostic grid used on archive headers in v1.1 — ties the
   empty state into the system instead of leaving it a blank plate. */
.cfiq-vehicle-media--fallback::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.45;
	background-image:
		linear-gradient(to right, var(--cfiq-line, rgba(122, 162, 247, 0.16)) 1px, transparent 1px),
		linear-gradient(to bottom, var(--cfiq-line, rgba(122, 162, 247, 0.16)) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 72%);
	mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 72%);
}

/* Silhouette reads as a schematic, not a broken image. */
.cfiq-vehicle-media--fallback svg {
	position: relative;
	z-index: 1;
	opacity: 0.42;
	color: var(--cfiq-slate, #24324a);
}

.cfiq-vehicle-media--fallback svg * {
	fill: currentColor;
	stroke: currentColor;
}

/* ---------- 3. Diagnostic Run placement ---------- */

.cfiq-drun-section {
	margin-block: clamp(2rem, 4.5vw, 3.5rem);
}

/* The reusable run also appears inside selected guide articles. */
.cfiq-article .cfiq-drun-section .cfiq-container {
	width: 100%;
	padding-inline: 0;
}

/* ---------- 4. Reduced motion ---------- */
/*
 * The Diagnostic Run's own reduced-motion handling already lives in main.css
 * (car parked at Action, every node lit). This only covers assets Codex adds
 * later into the slots above, so an ambient loop can never start unrequested.
 */
@media (prefers-reduced-motion: reduce) {
	.cfiq-graphic,
	.cfiq-graphic * {
		animation: none !important;
		transition: none !important;
	}

	.cfiq-hero-motion-car--sedan,
	.cfiq-hero-motion-car--pickup {
		display: none;
	}

	.cfiq-hero-motion-car--suv {
		opacity: 0.88;
		transform: translate3d(122%, 0, 0);
	}
}

/* Mobile: no ambient hero motion regardless of preference (per the brief). */
@media (max-width: 640px) {
	.cfiq-graphic--hero-layer,
	.cfiq-graphic--hero-layer * {
		animation: none !important;
	}
}

/* ========================================================================
   Premium Graphics & Motion v1.1 — visual integration + deferred systems
   Loaded only behind the existing graphics flag. No new script runtime.
   ======================================================================== */

/* Hero topology now occupies the open technical field beside the headline,
   rather than washing across paragraph text or disappearing under cards. */
@media (min-width: 981px) {
	.cfiq-graphic--hero-technical {
		inset: 0.25rem -1% auto 46%;
		height: 16rem;
		opacity: 0.84;
		-webkit-mask-image: radial-gradient(ellipse at 54% 52%, #000 56%, transparent 91%);
		mask-image: radial-gradient(ellipse at 54% 52%, #000 56%, transparent 91%);
	}

	.cfiq-graphic--hero-technical img {
		object-fit: contain;
		object-position: center top;
	}
}

@media (min-width: 641px) and (max-width: 980px) {
	.cfiq-graphic--hero-technical {
		inset: 1.15rem -10% auto 52%;
		height: 11rem;
		opacity: 0.54;
		-webkit-mask-image: radial-gradient(ellipse at 64% 54%, #000 45%, transparent 86%);
		mask-image: radial-gradient(ellipse at 64% 54%, #000 45%, transparent 86%);
	}
	.cfiq-graphic--hero-technical img { object-fit: contain; object-position: center top; }
}

/* A dedicated road lane connects the vehicle story to the diagnostic console
   without crossing any lookup, count, or source text. */
.cfiq-hero-motion-stage {
	position: relative;
	z-index: 1;
	display: block;
	height: 5rem;
	margin: -0.25rem 0 0;
	overflow: hidden;
	color: #78e7fa;
	border-block: 1px solid rgba(122, 162, 247, 0.14);
	background: linear-gradient(90deg, transparent, rgba(61, 214, 245, 0.045) 35% 65%, transparent);
}

.cfiq-graphic--console-vehicles {
	position: absolute;
	inset: 0;
	display: block;
}

.cfiq-graphic--console-vehicles svg {
	width: 100%;
	height: 100%;
}

.cfiq-console-road__vehicle {
	display: none;
}

.cfiq-hero-motion-car {
	position: absolute;
	top: -0.58rem;
	left: 0;
	z-index: 1;
	display: block;
	width: 28%;
	min-width: 9.5rem;
	max-width: 12.25rem;
	opacity: 0;
	transform: translate3d(-120%, 0, 0);
	will-change: transform, opacity;
}

.cfiq-hero-motion-car img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
	filter: saturate(0.82) contrast(1.08) brightness(0.9);
	-webkit-mask-image: radial-gradient(ellipse at 51% 54%, #000 42%, rgba(0, 0, 0, 0.82) 63%, transparent 82%);
	mask-image: radial-gradient(ellipse at 51% 54%, #000 42%, rgba(0, 0, 0, 0.82) 63%, transparent 82%);
	box-shadow: 0 0 22px rgba(61, 214, 245, 0.1);
}

@keyframes cfiq-home-vehicle-pass {
	0% { opacity: 0; transform: translate3d(-120%, 0, 0); }
	6%, 28% { opacity: 0.88; }
	36%, 100% { opacity: 0; transform: translate3d(470%, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
	.cfiq-hero-motion-car--sedan {
		animation: cfiq-home-vehicle-pass 15s linear infinite;
	}

	.cfiq-hero-motion-car--suv {
		animation: cfiq-home-vehicle-pass 15s linear -10s infinite;
	}

	.cfiq-hero-motion-car--pickup {
		animation: cfiq-home-vehicle-pass 15s linear -5s infinite;
	}
}

@media (min-width: 641px) and (max-width: 980px) {
	.cfiq-hero-motion-car--sedan,
	.cfiq-hero-motion-car--pickup { display: none; }
	.cfiq-hero-motion-stage { height: 4.4rem; }
	.cfiq-hero-motion-car--suv { width: 26%; }
}

/* Three meaningful severity zones and one restrained needle sweep. The base
   main.css gauge breath is retired for this asset so the needle is the only
   motion competing for attention in the upper console. */
.cfiq-product-console__cluster .cfiq-graphic--hero-severity-gauge {
	display: block;
	width: min(280px, 90%);
}

.cfiq-product-console__cluster .cfiq-graphic--hero-severity-gauge svg {
	width: 100%;
	height: auto;
	animation: none;
	filter: drop-shadow(0 0 20px rgba(61, 214, 245, 0.22));
}

.cfiq-hero-gauge__needle {
	transform: rotate(-28deg);
	transform-origin: 140px 132px;
	transform-box: view-box;
}

.cfiq-hero-gauge__zone--green,
.cfiq-hero-gauge__zone--red {
	opacity: 0.48;
}

.cfiq-hero-gauge__zone--amber {
	opacity: 1;
}

@keyframes cfiq-home-severity-sweep {
	0%, 14% { transform: rotate(-58deg); }
	43% { transform: rotate(-4deg); }
	70%, 77% { transform: rotate(58deg); }
	100% { transform: rotate(-58deg); }
}

@keyframes cfiq-home-severity-green {
	0%, 14%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(53, 196, 124, 0.7)); }
	36%, 84% { opacity: 0.4; filter: none; }
}

@keyframes cfiq-home-severity-amber {
	0%, 18%, 82%, 100% { opacity: 0.4; filter: none; }
	40%, 52% { opacity: 1; filter: drop-shadow(0 0 4px rgba(243, 180, 65, 0.72)); }
}

@keyframes cfiq-home-severity-red {
	0%, 48%, 100% { opacity: 0.4; filter: none; }
	68%, 78% { opacity: 1; filter: drop-shadow(0 0 4px rgba(242, 100, 100, 0.72)); }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
	.cfiq-hero-gauge__needle {
		animation: cfiq-home-severity-sweep 9.6s ease-in-out infinite;
	}

	.cfiq-hero-gauge__zone--green {
		animation: cfiq-home-severity-green 9.6s ease-in-out infinite;
	}

	.cfiq-hero-gauge__zone--amber {
		animation: cfiq-home-severity-amber 9.6s ease-in-out infinite;
	}

	.cfiq-hero-gauge__zone--red {
		animation: cfiq-home-severity-red 9.6s ease-in-out infinite;
	}
}

/* One visual intake surface: search, quick paths and finder read as stages of
   the same action flow, while their original forms and behaviour stay intact. */
.cfiq-product-hero__workspace {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(90deg, rgba(61, 214, 245, 0.055), transparent 18%),
		rgba(255, 255, 255, 0.94);
}

.cfiq-product-hero__workspace::before {
	content: "";
	position: absolute;
	inset: 1rem auto 1rem 0;
	width: 2px;
	background: linear-gradient(transparent, rgba(8, 127, 155, 0.45) 18%, rgba(61, 214, 245, 0.42) 82%, transparent);
}

.cfiq-product-hero .cfiq-search-panel {
	position: relative;
	z-index: 1;
	border-color: rgba(20, 31, 54, 0.08);
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.07);
}

.cfiq-product-hero__selector .cfiq-find-car {
	background: linear-gradient(180deg, rgba(245, 251, 255, 0.72), rgba(255, 255, 255, 0.72));
	border-color: transparent;
	border-top-color: rgba(8, 127, 155, 0.18);
	border-radius: 9px;
}

.cfiq-product-hero__paths a {
	box-shadow: none;
	background: rgba(255, 255, 255, 0.72);
}

/* The dark authority panel becomes a connected diagnostic console rather
   than a grid of unrelated boxes. Data, links and source semantics are not
   touched. */
.cfiq-product-console__grid,
.cfiq-product-console__stats {
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(122, 162, 247, 0.2);
	border-radius: 14px;
	overflow: hidden;
}

.cfiq-product-console__grid { gap: 0; }

.cfiq-product-console__tile {
	min-height: 64px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.cfiq-product-console__tile + .cfiq-product-console__tile {
	border-top: 1px solid rgba(122, 162, 247, 0.16);
}

.cfiq-product-console__stats { gap: 0; position: relative; }

.cfiq-product-console__stats::before,
.cfiq-product-console__stats::after {
	content: "";
	position: absolute;
	z-index: 2;
	pointer-events: none;
	background: rgba(122, 162, 247, 0.16);
}

.cfiq-product-console__stats::before { inset: 0 auto 0 50%; width: 1px; }
.cfiq-product-console__stats::after { inset: 50% 0 auto; height: 1px; }

.cfiq-product-console__stats a {
	min-height: 66px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.cfiq-product-console__stats a:hover,
.cfiq-product-console__stats a:focus-visible {
	background: rgba(61, 214, 245, 0.09);
	box-shadow: inset 0 0 0 1px rgba(61, 214, 245, 0.34);
}

/* G-07 — node-terminated pathway connector. It groups already-related
   records and deliberately does not encode direction or causality. */
.cfiq-related--premium .cfiq-related__group {
	padding-left: 1rem;
}

.cfiq-related--premium .cfiq-related__group::before {
	left: -0.2rem;
	top: 0.3rem;
	bottom: 0.6rem;
	width: 0.7rem;
	border-radius: 0;
	background:
		radial-gradient(circle at 50% 0.3rem, var(--cfiq-rel-accent, var(--cfiq-accent)) 0 0.18rem, transparent 0.2rem),
		linear-gradient(var(--cfiq-rel-accent, var(--cfiq-accent)), var(--cfiq-rel-accent, var(--cfiq-accent))) center 0.62rem / 1px calc(100% - 0.78rem) no-repeat;
	opacity: 0.56;
}

.cfiq-related--premium .cfiq-related__group::after {
	content: "";
	position: absolute;
	left: 0.04rem;
	bottom: 0.5rem;
	width: 0.32rem;
	height: 0.32rem;
	border-right: 1px solid var(--cfiq-rel-accent, var(--cfiq-accent));
	border-bottom: 1px solid var(--cfiq-rel-accent, var(--cfiq-accent));
	transform: rotate(45deg);
	opacity: 0.65;
}

/* G-08 — balanced quantitative comparison framing. Identical styling on both
   sides; magnitude tracks appear only where PHP confirmed plain counts. */
.cfiq-comparison-frame {
	position: relative;
	padding: clamp(1rem, 2.5vw, 1.4rem);
	background: linear-gradient(145deg, rgba(245, 249, 253, 0.95), rgba(255, 255, 255, 0.98));
	border: 1px solid var(--cfiq-border, #e4e9f0);
	border-radius: var(--cfiq-radius, 14px);
}

.cfiq-comparison-frame__note {
	max-width: 72ch;
	margin: -0.35rem 0 0.9rem;
	color: var(--cfiq-text-2, #475467);
	font-size: 0.82rem;
	line-height: 1.5;
}

.cfiq-comparison-frame tbody td {
	position: relative;
	min-width: 10rem;
}

.cfiq-comparison-frame tbody td + td {
	border-left: 2px solid color-mix(in srgb, var(--cfiq-slate, #24324a) 13%, transparent);
}

.cfiq-comparison-frame__value { display: block; }

.cfiq-comparison-frame__track {
	display: block;
	height: 0.24rem;
	margin-top: 0.45rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--cfiq-slate, #24324a) 9%, transparent);
	border-radius: 999px;
}

.cfiq-comparison-frame__track > span {
	display: block;
	width: var(--cfiq-comparison-value, 0%);
	height: 100%;
	background: color-mix(in srgb, var(--cfiq-slate, #24324a) 56%, var(--cfiq-cyan, #3dd6f5));
	border-radius: inherit;
}

/* Resolver-neutral vehicle framing: corners suggest an inspection viewport
   while every family/generation image and fallback keeps its existing source. */
.cfiq-car-hero__photo,
.cfiq-article__vehicle-photo {
	position: relative;
	padding: 0.35rem;
	background:
		linear-gradient(135deg, rgba(61, 214, 245, 0.12), transparent 38%),
		color-mix(in srgb, var(--cfiq-slate, #24324a) 3%, var(--cfiq-paper, #f7f9fc));
	border: 1px solid color-mix(in srgb, var(--cfiq-slate, #24324a) 12%, transparent);
	border-radius: calc(var(--cfiq-radius, 14px) + 0.25rem);
	box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
}

.cfiq-car-hero__photo::before,
.cfiq-car-hero__photo::after,
.cfiq-article__vehicle-photo::before,
.cfiq-article__vehicle-photo::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 1.1rem;
	height: 1.1rem;
	pointer-events: none;
}

.cfiq-car-hero__photo::before,
.cfiq-article__vehicle-photo::before {
	top: 0.7rem;
	left: 0.7rem;
	border-top: 1px solid rgba(8, 127, 155, 0.58);
	border-left: 1px solid rgba(8, 127, 155, 0.58);
}

.cfiq-car-hero__photo::after,
.cfiq-article__vehicle-photo::after {
	right: 0.7rem;
	bottom: 0.7rem;
	border-right: 1px solid rgba(8, 127, 155, 0.58);
	border-bottom: 1px solid rgba(8, 127, 155, 0.58);
}

/* G-09 telltales share the existing emblem, severity colour and pulse rules. */
.cfiq-light-emblem svg { overflow: visible; }

@media (max-width: 640px) {
	.cfiq-graphic--hero-technical { display: none; }
	.cfiq-hero-motion-stage { height: 3.25rem; }
	.cfiq-hero-motion-car { top: -0.8rem; width: 36%; min-width: 8rem; }
	.cfiq-hero-motion-car--sedan,
	.cfiq-hero-motion-car--pickup { display: none; }
	.cfiq-hero-motion-car--suv { opacity: 0.88; transform: translate3d(122%, 0, 0); animation: none; }
	.cfiq-hero-gauge__needle { transform: rotate(-28deg); animation: none; }

	.cfiq-product-hero__workspace::before { inset-block: 0.8rem; }
	.cfiq-product-console__cluster { min-height: 88px; }

	.cfiq-related--premium .cfiq-related__group { padding-left: 0.7rem; }
	.cfiq-related--premium .cfiq-related__group::before { left: -0.3rem; }
	.cfiq-related--premium .cfiq-related__group::after { left: -0.06rem; }

	.cfiq-comparison-frame { padding: 0.85rem; }
	.cfiq-comparison-frame .cfiq-table-scroll { overflow: visible; }
	.cfiq-comparison-frame .cfiq-table,
	.cfiq-comparison-frame .cfiq-table tbody,
	.cfiq-comparison-frame .cfiq-table tr { display: block; width: 100%; }
	.cfiq-comparison-frame .cfiq-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.cfiq-comparison-frame .cfiq-table tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-bottom: 1px solid var(--cfiq-border, #e4e9f0);
	}
	.cfiq-comparison-frame .cfiq-table tr:last-child { border-bottom: 0; }
	.cfiq-comparison-frame .cfiq-table th[scope="row"] {
		grid-column: 1 / -1;
		padding-bottom: 0.35rem;
		border-bottom: 0;
	}
	.cfiq-comparison-frame .cfiq-table td {
		min-width: 0;
		padding-top: 0.35rem;
	}
	.cfiq-comparison-frame .cfiq-table td::before {
		content: attr(data-cfiq-label);
		display: block;
		margin-bottom: 0.25rem;
		color: var(--cfiq-text-2, #475467);
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
}

/* This final override intentionally follows the responsive blocks: reduced
   motion always resolves to one stationary, realistic SUV and an amber gauge. */
@media (prefers-reduced-motion: reduce) {
	.cfiq-hero-motion-car--sedan,
	.cfiq-hero-motion-car--pickup {
		display: none;
	}

	.cfiq-hero-motion-car--suv {
		display: block;
		opacity: 0.88;
		transform: translate3d(122%, 0, 0);
	}

	.cfiq-hero-gauge__needle {
		animation: none !important;
		transform: rotate(0deg);
	}
}