/*
 * CarFaultIQ homepage hero V9 — BMW diagnostic scan.
 *
 * Fully scoped under .cfiq-h9 (nothing here can leak into the rest of the theme). Loaded on the homepage only.
 * Scene geometry: one 1672x941 frame. .cfiq-h9__pin exposes --W/--H/--PT so every overlay (SVG, callouts, tags,
 * the coverage panel) is positioned against the same frame as the photograph.
 *
 * Animation state is written by hero-v9.js as custom properties on .cfiq-h9:
 *   --scan (band position, % of the car box) · --q1..q4 (system zones) · --dq (callouts hand over to tags)
 *   --jp (journey progress 0..1) · --band · --idle · --cue
 * With no script (or reduced motion) the defaults below are the finished frame.
 */

/* ---------- root + state ------------------------------------------------------------------------------------------ */
.cfiq-h9 {
	--ink: #f4f8fc;
	--blue: #2f9bff;
	--amber: #ffae3e;
	--shell: min(1520px, calc(100% - 144px));
	--travel: 820px;
	--gutter: max(72px, calc((100cqw - 1520px) / 2));
	--scan: 104; --band: 0; --idle: 0; --q1: 1; --q2: 1; --q3: 1; --q4: 1; --dq: 1; --cue: 0; --jp: 1;
	position: relative;
	height: calc(100svh + var(--travel));
	color: var(--ink);
	box-sizing: border-box;
}
.cfiq-h9 *, .cfiq-h9 *::before, .cfiq-h9 *::after { box-sizing: border-box; }
html.cfiq-js .cfiq-h9 { --scan: -4; --band: 0; --idle: 1; --q1: 0; --q2: 0; --q3: 0; --q4: 0; --dq: 0; --cue: 1; --jp: 0; }
html.cfiq-h9-lock { overflow: hidden; }

.cfiq-h9__pin button, .cfiq-h9__pin input { font: inherit; }
.cfiq-h9__pin a { color: inherit; }
.cfiq-h9 .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cfiq-h9 .shell { width: var(--shell); margin-inline: auto; }
.cfiq-h9 :focus-visible { outline: 3px solid rgba(101, 211, 255, .85); outline-offset: 3px; }

.cfiq-h9__pin {
	position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #06121f;
	container-type: size;
	--W: max(100cqw, calc(177.11cqh));
	--H: calc(var(--W) * .56278);
	--PT: min(0px, max(calc(100cqh - var(--H)), calc(56cqh - var(--H) * .6)));
}

/* ---------- scene: photograph + registered overlays -------------------------------------------------------------- */
.cfiq-h9 .stage { position: absolute; inset: 0; overflow: hidden; }
.cfiq-h9 .plane { position: absolute; right: 0; width: var(--W); height: var(--H); top: var(--PT); }
.cfiq-h9 .plate { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; user-select: none; }
.cfiq-h9 .carfx { position: absolute; left: 55.32%; top: 39.85%; width: 42.46%; height: 40.38%; pointer-events: none; }
.cfiq-h9 .tech {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: .95;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(var(--scan) * 1% - 2.4%), transparent calc(var(--scan) * 1% + .3%));
	mask-image: linear-gradient(90deg, #000 calc(var(--scan) * 1% - 2.4%), transparent calc(var(--scan) * 1% + .3%));
}
.cfiq-h9 .band {
	position: absolute; inset: 0; opacity: var(--band);
	-webkit-mask-image: url(../images/hero-v9/carmask.png); mask-image: url(../images/hero-v9/carmask.png);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.cfiq-h9 .band i {
	position: absolute; top: 0; bottom: 0; left: calc(var(--scan) * 1% - 5.5%); width: 5.5%; mix-blend-mode: screen;
	background: linear-gradient(90deg, rgba(120, 214, 255, 0) 0%, rgba(110, 206, 255, .07) 55%, rgba(150, 228, 255, .3) 93%, rgba(240, 251, 255, .92) 98.6%, rgba(255, 255, 255, 0) 100%);
}
.cfiq-h9 .bracket { position: absolute; width: 20px; height: 20px; border: 0 solid rgba(140, 208, 255, .55); opacity: calc(.9 - var(--dq) * .45); }
.cfiq-h9 .b-tl { left: -1.5%; top: -3%; border-top-width: 1.5px; border-left-width: 1.5px; }
.cfiq-h9 .b-tr { right: -1.5%; top: -3%; border-top-width: 1.5px; border-right-width: 1.5px; }
.cfiq-h9 .b-bl { left: -1.5%; bottom: -3%; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.cfiq-h9 .b-br { right: -1.5%; bottom: -3%; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.cfiq-h9 .overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cfiq-h9 .idle { opacity: var(--idle); }
.cfiq-h9 .ping { fill: #7fd3ff; stroke: rgba(127, 211, 255, .4); stroke-width: 6; animation: cfiq9-ping 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cfiq-h9 .ping:nth-child(2) { animation-delay: .5s; }
.cfiq-h9 .ping:nth-child(3) { animation-delay: 1s; }
.cfiq-h9 .ping:nth-child(4) { animation-delay: 1.5s; }
@keyframes cfiq9-ping { 0%, 100% { opacity: .95; transform: scale(1); } 50% { opacity: .5; transform: scale(1.35); } }

.cfiq-h9 .zone { opacity: clamp(0, calc(var(--q) * 1.7), 1); }
.cfiq-h9 .z-power { --q: var(--q4); }
.cfiq-h9 .z-elec { --q: var(--q3); }
.cfiq-h9 .z-brake { --q: var(--q2); }
.cfiq-h9 .z-emis { --q: var(--q1); }
.cfiq-h9 .zone .glow { mix-blend-mode: screen; }
.cfiq-h9 .outline { fill: rgba(255, 174, 62, .05); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cfiq-h9 .outline.amber { stroke: rgba(255, 190, 90, .9); }
.cfiq-h9 .outline.dash { fill: none; stroke-dasharray: 7 6; }
.cfiq-h9 .ring { fill: none; stroke: rgba(150, 222, 255, .75); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cfiq-h9 .ring-node { fill: rgba(5, 16, 29, .6); stroke: #ffc25c; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cfiq-h9 .trace { fill: none; stroke: rgba(130, 214, 255, .7); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.cfiq-h9 .meshfill { mix-blend-mode: screen; opacity: .42; }
.cfiq-h9 .lead { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - var(--q) * 1.25), 1); opacity: calc(1 - var(--dq) * .45); }
.cfiq-h9 .lead.amber { stroke: rgba(255, 196, 110, .85); }
.cfiq-h9 .lead.blue { stroke: rgba(130, 214, 255, .85); }
.cfiq-h9 .node { stroke-width: 6; }
.cfiq-h9 .node.amber { fill: #ffc25c; stroke: rgba(255, 174, 62, .35); }
.cfiq-h9 .node.blue { fill: #8fdcff; stroke: rgba(80, 190, 255, .35); }
.cfiq-h9 .route { fill: none; stroke: rgba(126, 214, 255, .95); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 9 8; vector-effect: non-scaling-stroke; animation: cfiq9-flow 1.6s linear infinite; filter: drop-shadow(0 0 5px rgba(80, 190, 255, .9)); }
@keyframes cfiq9-flow { to { stroke-dashoffset: -34; } }

/* scan-time callouts hand over to quiet tags at the end of the sequence */
.cfiq-h9 .callout {
	position: absolute; z-index: 3; display: flex; align-items: center; gap: .6rem; max-width: 15.5rem; padding: .55rem .8rem .55rem .65rem;
	border: 1px solid rgba(120, 196, 246, .34); border-radius: 11px; background: rgba(5, 16, 29, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04);
	opacity: calc(clamp(0, (var(--q) - .3) * 2.8, 1) * clamp(0, 1 - var(--dq) * 4, 1)); transform: translateY(calc((1 - var(--q)) * 8px));
	pointer-events: none;
}
.cfiq-h9 .callout svg { width: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cfiq-h9 .callout svg.mini { width: 46px; stroke-width: 1.4; }
.cfiq-h9 .callout p { display: grid; gap: .12rem; margin: 0; }
.cfiq-h9 .callout small { font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cfiq-h9 .callout b { color: #eaf5fb; font-size: .74rem; font-weight: 620; line-height: 1.3; }
.cfiq-h9 .c-power, .cfiq-h9 .c-brake { color: var(--amber); }
.cfiq-h9 .c-elec, .cfiq-h9 .c-emis { color: #78cfff; }
.cfiq-h9 .c-power { --q: var(--q4); right: 7.7%; top: 35%; }
.cfiq-h9 .c-elec { --q: var(--q3); right: 1.2%; top: 26%; }
.cfiq-h9 .c-brake { --q: var(--q2); left: 58.5%; top: 79.5%; }
.cfiq-h9 .c-emis { --q: var(--q1); left: 79.4%; top: 80.4%; }
.cfiq-h9 .tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; color: #78cfff; font-size: .58rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); pointer-events: none; opacity: clamp(0, calc((var(--dq) - .12) * 4), 1); }
.cfiq-h9 .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.cfiq-h9 .t-power { left: 90.7%; top: 38.4%; transform: translate(-50%, -100%); color: var(--amber); }
.cfiq-h9 .t-elec { left: 96.2%; top: 36.5%; transform: translate(-50%, -100%); }
.cfiq-h9 .t-brake { left: 65.4%; top: 80.3%; transform: translate(-50%, 0); color: var(--amber); }
.cfiq-h9 .t-emis { left: 80.9%; top: 80.9%; transform: translate(-50%, 0); }

/* legibility over the scene */
.cfiq-h9 .shade {
	position: absolute; z-index: 1; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(3, 10, 20, .86) 0%, rgba(3, 10, 20, .66) 30%, rgba(3, 10, 20, .2) 50%, transparent 62%),
		linear-gradient(0deg, rgba(3, 9, 18, .9) 0%, rgba(3, 9, 18, .35) 16%, transparent 32%),
		linear-gradient(180deg, rgba(3, 10, 20, .62) 0%, transparent 15%);
}

/* ---------- header: brand · featured destinations · Menu ------------------------------------------------------------ */
.cfiq-h9 .site-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 84px; }
.cfiq-h9 .header-inner { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.6rem; height: 100%; }
.cfiq-h9 .brand { justify-self: start; color: #f4f8fc; text-decoration: none; font-size: 1.85rem; font-weight: 720; letter-spacing: -.03em; }
.cfiq-h9 .brand span { color: var(--blue); }
.cfiq-h9 .direct-nav { display: none; justify-content: flex-end; gap: clamp(1.1rem, 2.1vw, 2.2rem); }
.cfiq-h9 .direct-nav a { padding: .7rem 0; color: #c2d2e0; font-size: .72rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .2s; }
.cfiq-h9 .direct-nav a:hover, .cfiq-h9 .direct-nav a:focus-visible { color: #fff; }
.cfiq-h9 .menu-toggle { grid-column: 3; display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; padding: 0 1.3rem 0 1.15rem; border: 1px solid rgba(120, 205, 255, .5); border-radius: 999px; background: rgba(8, 26, 42, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #eef8ff; font-size: .84rem; font-weight: 720; letter-spacing: .04em; cursor: pointer; transition: border-color .2s, background .2s; }
.cfiq-h9 .menu-toggle:hover, .cfiq-h9 .menu-toggle[aria-expanded="true"] { border-color: rgba(150, 222, 255, .9); background: rgba(14, 40, 62, .85); }
.cfiq-h9 .menu-toggle__bars { display: grid; gap: 4px; width: 18px; }
.cfiq-h9 .menu-toggle__bars i { display: block; height: 2px; border-radius: 2px; background: #8fdcff; transition: transform .25s ease, opacity .2s; }
.cfiq-h9 .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cfiq-h9 .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2) { opacity: 0; }
.cfiq-h9 .menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.cfiq-h9 .menu-panel { display: none; position: absolute; top: 76px; right: 0; z-index: 30; min-width: 260px; max-height: calc(100svh - 110px); overflow: auto; padding: .45rem 1.1rem; border: 1px solid rgba(120, 196, 246, .3); border-radius: 14px; background: rgba(5, 16, 29, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.cfiq-h9 .menu-panel.is-open { display: block; }
html:not(.cfiq-js) .cfiq-h9 .menu-panel { display: block; position: static; margin: 0 0 0 auto; box-shadow: none; }
.cfiq-h9 .menu-panel__list, .cfiq-h9 .menu-panel ul { list-style: none; margin: 0; padding: 0; }
.cfiq-h9 .menu-panel a { display: block; padding: .78rem .1rem; border-bottom: 1px solid rgba(140, 190, 225, .12); color: #dbe8f3; font-size: .78rem; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.cfiq-h9 .menu-panel li:last-child > a { border-bottom: 0; }
.cfiq-h9 .menu-panel a:hover, .cfiq-h9 .menu-panel a:focus-visible { color: #fff; }
.cfiq-h9 .menu-panel .current-menu-item > a { color: #8fdcff; }
.cfiq-h9 .menu-panel .cfiq-nav__item--diagnose > a { color: #8fd4ff; }
@media (min-width: 1100px) {
	.cfiq-h9 .direct-nav { display: flex; }
	.cfiq-h9 .header-inner { grid-template-columns: auto 1fr auto; }
}

/* ---------- copy: headline · search · examples · primary actions · supporting pathways --------------------------------------- */
.cfiq-h9 .copy-wrap { position: absolute; z-index: 10; inset: 0; display: flex; align-items: center; padding: 92px 0 128px; pointer-events: none; }
.cfiq-h9 .copy { position: relative; width: min(780px, calc(100cqw - .4395 * var(--W) - var(--gutter) - 32px)); pointer-events: auto; }
.cfiq-h9 h1 { margin: 0; padding: 0; color: #f4f8fc; font-size: clamp(2.2rem, 3.25vw, 3.75rem); line-height: 1.07; letter-spacing: -.032em; font-weight: 700; text-shadow: 0 8px 40px rgba(0, 0, 0, .4); }
.cfiq-h9 h1 span { display: block; white-space: nowrap; }
.cfiq-h9 h1 em { font-style: normal; background: linear-gradient(95deg, #3b9cff 0%, #74bdff 55%, #a9d5ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cfiq-h9 .lede { max-width: 33rem; margin: 1.15rem 0 1.5rem; color: #c3d0dc; font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.55; }
.cfiq-h9 .diagnose-form { position: relative; margin: 0; }
.cfiq-h9 .search-control { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; min-height: 64px; padding: 5px; border: 1px solid rgba(130, 190, 240, .3); border-radius: 14px; background: rgba(8, 22, 38, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04); }
.cfiq-h9 .search-control:focus-within { border-color: #69caff; box-shadow: 0 0 0 3px rgba(58, 169, 255, .2), 0 20px 50px rgba(0, 0, 0, .34); }
.cfiq-h9 .search-control svg { justify-self: center; width: 21px; fill: none; stroke: #9db9d0; stroke-width: 1.8; stroke-linecap: round; }
.cfiq-h9 .search-control input { min-width: 0; width: 100%; height: auto; margin: 0; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font-size: .86rem; text-overflow: ellipsis; }
.cfiq-h9 .search-control input::placeholder { color: #8299ad; opacity: 1; }
.cfiq-h9 .search-control input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.cfiq-h9 .search-control button { min-height: 50px; padding: 0 1.4rem; border: 0; border-radius: 10px; background: linear-gradient(135deg, #2ea3ff, #0a78f0); color: #fff; box-shadow: 0 9px 26px rgba(0, 115, 235, .34), inset 0 1px rgba(255, 255, 255, .28); font-weight: 760; white-space: nowrap; cursor: pointer; transition: filter .2s; }
.cfiq-h9 .search-control button:hover { filter: brightness(1.08); }
.cfiq-h9 .cfiq-search__suggest { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow: auto; border: 1px solid rgba(120, 196, 246, .32); border-radius: 12px; background: #06111d; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); color: #dbe8f3; }
.cfiq-h9 .cfiq-search__suggest[hidden] { display: none; }
.cfiq-h9 .cfiq-search__suggest a, .cfiq-h9 .cfiq-search__suggest [role="option"] { color: inherit; }
.cfiq-h9 .cfiq-search__suggest [role="option"][aria-selected="true"], .cfiq-h9 .cfiq-search__suggest [role="option"]:hover { background: rgba(58, 169, 255, .16); }
.cfiq-h9 .examples { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.cfiq-h9 .examples a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .9rem; border: 1px solid rgba(150, 195, 230, .26); border-radius: 999px; background: rgba(10, 26, 42, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #cfdbe6; font-size: .74rem; text-decoration: none; transition: border-color .2s, background .2s; }
.cfiq-h9 .examples a:hover { border-color: rgba(120, 210, 255, .6); background: rgba(14, 40, 62, .7); }
.cfiq-h9 .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.cfiq-h9 .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 54px; padding: 0 1.55rem; border-radius: 12px; font-size: .95rem; font-weight: 740; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .2s, border-color .2s, background .2s; }
.cfiq-h9 .btn svg { width: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cfiq-h9 .btn--primary { border: 0; background: linear-gradient(135deg, #2ea3ff, #0a78f0); color: #fff; box-shadow: 0 9px 26px rgba(0, 115, 235, .34), inset 0 1px rgba(255, 255, 255, .28); }
.cfiq-h9 .btn--primary:hover { filter: brightness(1.08); }
.cfiq-h9 .btn--secondary { border: 1px solid rgba(120, 205, 255, .55); background: rgba(8, 26, 42, .62); color: #e7f6ff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px rgba(255, 255, 255, .05); }
.cfiq-h9 .btn--secondary svg { stroke: #7fd3ff; }
.cfiq-h9 .btn--secondary:hover { border-color: rgba(150, 222, 255, .9); background: rgba(14, 40, 62, .78); }
.cfiq-h9 .paths { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; }
.cfiq-h9 .paths a { display: inline-flex; align-items: center; gap: .42rem; min-height: 34px; padding: 0 .68rem; border: 1px solid rgba(150, 195, 230, .18); border-radius: 9px; background: rgba(9, 24, 40, .4); color: #c4d3e0; font-size: .72rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.cfiq-h9 .paths a:hover { border-color: rgba(120, 210, 255, .5); color: #fff; background: rgba(14, 40, 62, .6); }
.cfiq-h9 .paths a > span { display: inline-flex; }
.cfiq-h9 .paths svg { width: 17px; height: 17px; color: #7fd3ff; }

/* ---------- database coverage: always readable, sits above the car ---------------------------------------------------------- */
.cfiq-h9 .coverage { position: absolute; z-index: 9; left: calc(100cqw - var(--W) * .4435); top: max(96px, calc(var(--PT) + var(--H) * .125)); width: 388px; margin: 0; padding: .7rem .8rem .6rem .95rem; border: 1px solid rgba(120, 196, 246, .3); border-radius: 12px; background: rgba(5, 16, 29, .74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04); }
.cfiq-h9 .coverage__title { margin: 0 0 .42rem; color: #78cfff; font-size: .6rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.cfiq-h9 .coverage ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.cfiq-h9 .coverage li { margin: 0; padding: 0 .5rem 0 .65rem; border-left: 1px solid rgba(140, 190, 225, .18); }
.cfiq-h9 .coverage li:first-child { padding-left: 0; border-left: 0; }
.cfiq-h9 .coverage a { display: grid; gap: .08rem; color: inherit; text-decoration: none; border-radius: 6px; }
.cfiq-h9 .coverage a:hover strong, .cfiq-h9 .coverage a:focus-visible strong { color: #8fdcff; }
.cfiq-h9 .coverage strong { color: #f1f8fd; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; transition: color .2s; }
.cfiq-h9 .coverage span { white-space: nowrap; color: #9db6c8; font-size: .6rem; font-weight: 600; letter-spacing: .02em; }
.cfiq-h9 .coverage__note { margin: .5rem 0 0; color: #8aa3b6; font-size: .6rem; letter-spacing: .03em; }

/* ---------- journey rail: persistent, clickable, progresses with the scan ---------------------------------------------------- */
.cfiq-h9 .journey { position: absolute; z-index: 8; left: 0; right: 0; bottom: 26px; width: var(--shell); margin: 0 auto; }
.cfiq-h9 .journey__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid rgba(125, 190, 235, .26); border-radius: 16px; background: rgba(5, 16, 29, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0, 0, 0, .34); }
.cfiq-h9 .journey__step { position: relative; margin: 0; }
.cfiq-h9 .journey__step a { position: relative; display: flex; align-items: center; gap: .75rem; height: 100%; padding: .85rem 1.1rem; color: inherit; text-decoration: none; transition: opacity .45s ease, background-color .45s ease; }
.cfiq-h9 .journey__step:not(:last-child) a::after { content: "→"; position: absolute; right: 1.1rem; color: #5f88a8; font-size: .95rem; }
.cfiq-h9 .journey__step b { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid rgba(110, 200, 255, .42); border-radius: 50%; color: #8fdcff; font-size: .7rem; font-weight: 750; transition: border-color .45s ease, box-shadow .45s ease, background-color .45s ease, color .45s ease; }
.cfiq-h9 .journey__text { display: grid; gap: .1rem; }
.cfiq-h9 .journey__text strong { color: #eaf5fc; font-size: .86rem; font-weight: 650; }
.cfiq-h9 .journey__text small { color: #9db4c6; font-size: .7rem; }
.cfiq-h9 .journey__step a:hover, .cfiq-h9 .journey__step a:focus-visible { background-color: rgba(58, 169, 255, .09); opacity: 1; }
.cfiq-h9 .journey__step[data-state="todo"] a { opacity: .82; }
.cfiq-h9 .journey__step[data-state="done"] a { opacity: .94; }
.cfiq-h9 .journey__step[data-state="done"] b { border-color: rgba(110, 200, 255, .6); background: rgba(58, 169, 255, .14); }
.cfiq-h9 .journey__step[data-state="active"] a { opacity: 1; background-color: rgba(58, 169, 255, .10); }
.cfiq-h9 .journey__step[data-state="active"] b { border-color: #6ad0ff; color: #fff; background: rgba(58, 169, 255, .22); box-shadow: 0 0 0 4px rgba(61, 169, 231, .11); }
.cfiq-h9 .journey__track { position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(140, 190, 225, .14); pointer-events: none; }
.cfiq-h9 .journey__fill { display: block; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--jp)); background: linear-gradient(90deg, #3aa9ff, #8fdcff); }
.cfiq-h9 .journey__note { position: absolute; right: .4rem; bottom: calc(100% + .55rem); margin: 0; color: #9db4c6; font-size: .68rem; letter-spacing: .03em; text-shadow: 0 1px 8px #000; }
.cfiq-h9[data-static] .journey__step a { opacity: 1; }
.cfiq-h9[data-static] .journey__fill { opacity: 0; }

.cfiq-h9 .cue { position: absolute; z-index: 8; left: 50%; bottom: 108px; display: flex; flex-direction: column; align-items: center; gap: .4rem; translate: -50% 0; color: #9eb6c8; opacity: clamp(0, var(--cue), 1); pointer-events: none; }
.cfiq-h9 .cue span { position: relative; width: 22px; height: 34px; border: 1px solid rgba(130, 205, 250, .45); border-radius: 12px; }
.cfiq-h9 .cue span::after { content: ""; position: absolute; top: 7px; left: 9.5px; width: 2.5px; height: 7px; border-radius: 2px; background: var(--blue); animation: cfiq9-cue 1.9s ease-in-out infinite; }
.cfiq-h9 .cue small { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
@keyframes cfiq9-cue { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(10px); opacity: 1; } }

/* ---------- Find my car: the site's own finder in a dialog ------------------------------------------------------------------- */
.cfiq-h9 .finder-dialog { width: min(830px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 1px solid rgba(16, 24, 40, .25); border-radius: 18px; background: #f4f8fc; color: #101828; box-shadow: 0 35px 100px rgba(0, 0, 0, .66); overflow: auto; }
.cfiq-h9 .finder-dialog::backdrop { background: rgba(2, 8, 14, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cfiq-h9 .finder-frame { position: relative; padding: 1.1rem 1.1rem 1.2rem; }
.cfiq-h9 .finder-dialog .cfiq-find-car { margin: 0; box-shadow: none; }
.cfiq-h9 .finder-dialog .cfiq-find-car__title { color: #101828; }
.cfiq-h9 .close-dialog { position: absolute; z-index: 5; top: .5rem; right: .7rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(16, 24, 40, .06); color: #344054; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.cfiq-h9 .close-dialog:hover { background: rgba(16, 24, 40, .14); color: #101828; }

/* ---------- release: dark hero hands over to the existing homepage ---------------------------------------------------------- */
body.cfiq-hero9-on main.cfiq-main { background: #06121f; }
body.cfiq-hero9-on .cfiq-h9 + .cfiq-sticky-search + .cfiq-density-home,
body.cfiq-hero9-on .cfiq-sticky-search + .cfiq-density-home { position: relative; z-index: 2; border-radius: 30px 30px 0 0; }

/* ---------- laptops / short screens ------------------------------------------------------------------------------------------ */
@media (max-width: 1360px) and (min-width: 1200px) and (min-aspect-ratio: 8/5) {
	.cfiq-h9 { --gutter: max(48px, calc((100cqw - 1520px) / 2)); --shell: min(1520px, calc(100% - 96px)); }
	.cfiq-h9 .callout b { font-size: .68rem; }
	.cfiq-h9 .callout { max-width: 13.5rem; }
	.cfiq-h9 .coverage { width: 340px; }
	.cfiq-h9 .coverage strong { font-size: 1.05rem; }
}
@media (min-width: 1200px) and (min-aspect-ratio: 8/5) and (max-height: 760px) {
	.cfiq-h9 .lede { margin: .6rem 0 .85rem; }
	.cfiq-h9 .copy-wrap { padding-bottom: 116px; }
	.cfiq-h9 .actions, .cfiq-h9 .paths, .cfiq-h9 .examples { margin-top: .7rem; }
	.cfiq-h9 .btn { min-height: 48px; }
	.cfiq-h9 .search-control { min-height: 56px; }
	.cfiq-h9 .journey__step a { padding: .6rem 1rem; }
	.cfiq-h9 .journey__text small { display: none; }
	.cfiq-h9 .cue { display: none; }
}

/* ---------- stacked layout: tablet + phone (no pin) ------------------------------------------------------------------------------ */
@media (max-width: 1199px), (max-aspect-ratio: 159/100) {
	.cfiq-h9 { --shell: min(1000px, calc(100% - 48px)); height: auto; }
	.cfiq-h9__pin { position: relative; height: auto; overflow: visible; container-type: normal; display: flex; flex-direction: column; }
	.cfiq-h9 .site-header { position: relative; z-index: 20; height: 74px; }
	.cfiq-h9 .brand { font-size: 1.5rem; }
	.cfiq-h9 .copy-wrap { position: relative; inset: auto; order: 1; padding: 12px 0 8px; pointer-events: auto; }
	.cfiq-h9 .copy { width: 100%; max-width: 660px; }
	.cfiq-h9 h1 { font-size: clamp(2.05rem, 7.4vw, 3.4rem); }
	.cfiq-h9 h1 span { display: inline; white-space: normal; }
	.cfiq-h9 .lede { max-width: 34rem; }
	.cfiq-h9 .shade { display: none; }
	.cfiq-h9 .stage { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 1.28; margin: 8px 0 0; }
	.cfiq-h9 .plane { width: 215%; height: auto; aspect-ratio: 1672 / 941; left: -114.6%; right: auto; top: -41%; }
	.cfiq-h9 .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #06121f 0, transparent 14%, transparent 84%, #06121f 100%); }
	.cfiq-h9 .callout, .cfiq-h9 .lead, .cfiq-h9 .idle, .cfiq-h9 .tag { display: none; }
	.cfiq-h9 .coverage { position: relative; inset: auto; order: 3; left: auto; top: auto; width: var(--shell); margin: 6px auto 0; }
	.cfiq-h9 .journey { position: relative; inset: auto; order: 4; bottom: auto; width: var(--shell); margin: 8px auto 0; padding-bottom: 34px; }
	.cfiq-h9 .journey__list { grid-template-columns: 1fr 1fr; }
	.cfiq-h9 .journey__step:not(:last-child) a::after { display: none; }
	.cfiq-h9 .journey__note { position: static; margin: .8rem .2rem 0; }
	.cfiq-h9 .cue { display: none; }
	.cfiq-h9 .actions .btn { flex: 1 1 210px; }
}
@media (min-width: 721px) and (max-width: 1199px), (min-width: 721px) and (max-aspect-ratio: 159/100) {
	.cfiq-h9 .stage { aspect-ratio: 1.5; }
	.cfiq-h9 .plane { width: 200%; left: -100%; top: -47%; }
}
@media (max-width: 720px) {
	.cfiq-h9 { --shell: calc(100% - 32px); }
	.cfiq-h9 .site-header { height: 68px; }
	.cfiq-h9 .brand { font-size: 1.4rem; }
	.cfiq-h9 .menu-toggle { min-height: 44px; padding: 0 1.05rem 0 .95rem; font-size: .78rem; }
	.cfiq-h9 .menu-panel { top: 66px; min-width: min(300px, calc(100vw - 32px)); }
	.cfiq-h9 h1 { font-size: clamp(2.15rem, 9.6vw, 2.9rem); line-height: 1.06; }
	.cfiq-h9 .lede { margin: .9rem 0 1.2rem; font-size: .95rem; }
	.cfiq-h9 .search-control { grid-template-columns: 40px 1fr; }
	.cfiq-h9 .search-control input { min-height: 46px; font-size: .84rem; }
	.cfiq-h9 .search-control button { grid-column: 1 / -1; width: 100%; min-height: 50px; margin-top: 4px; }
	.cfiq-h9 .examples a { min-height: 36px; padding-inline: .75rem; font-size: .7rem; }
	.cfiq-h9 .actions .btn { flex: 1 1 100%; min-height: 52px; }
	.cfiq-h9 .stage { margin-top: 14px; }
	.cfiq-h9 .coverage ul { grid-template-columns: 1fr 1fr; row-gap: .75rem; }
	.cfiq-h9 .coverage span { font-size: .68rem; }
	.cfiq-h9 .coverage__title { font-size: .64rem; }
	.cfiq-h9 .coverage__note { font-size: .66rem; }
	.cfiq-h9 .coverage li:nth-child(3) { padding-left: 0; border-left: 0; }
	.cfiq-h9 .journey__list { border-radius: 14px; }
	.cfiq-h9 .journey__step a { padding: .7rem .8rem; gap: .6rem; }
	.cfiq-h9 .journey__text strong { font-size: .8rem; }
	.cfiq-h9 .journey__text small { font-size: .66rem; }
	.cfiq-h9 .journey__step b { width: 26px; height: 26px; }
}
@media (max-width: 380px) {
	.cfiq-h9 .journey__text small { display: none; }
}

/* ---------- reduced motion: a stable, finished hero ---------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cfiq-h9 *, .cfiq-h9 *::before, .cfiq-h9 *::after { animation: none !important; transition-duration: .01ms !important; }
	.cfiq-h9 .cue { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1200px) and (min-aspect-ratio: 8/5) {
	.cfiq-h9 { height: auto; }
	.cfiq-h9__pin { position: relative; height: max(100svh, 700px); }
}

/* ---------- Menu de-duplication: the four featured links live in the header while it shows them (same 1100px breakpoint) ---------- */
@media (min-width: 1100px) {
	.cfiq-h9 .menu-panel .cfiq-h9-dup { display: none; }
}