/* ================================================================
   Sell My Car Online — home.css
   Loaded ONLY on the front page (via wp_enqueue conditional in functions.php).

   Sections:
     1. Shared Section Heads
     2. Hero
     3. Trust Bar (merged — rating + live proof + press)
     4. How It Works
     5. Why Us Mosaic
     6. (reserved — Instant Offer removed)
     7. Bold Statement
     8. Recent Sales (Motorway-style)
     9. Reviews Mosaic
     10. Recent Guides
     11. FAQ Accordion
     12. Final CTA (Express Lane)
     13. Responsive breakpoints
   ================================================================ */


/* ================================================================
   1. SHARED SECTION HEADS
   ================================================================ */

.home-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--sp-12);
}

.home-section-heading {
	font-size: var(--fs-3xl);
	font-weight: var(--fw-black);
	letter-spacing: -0.03em;
	margin-bottom: var(--sp-3);
}

.home-section-subhead {
	font-size: var(--fs-md);
	color: var(--color-ink-soft);
	line-height: var(--lh-base);
}


/* ================================================================
   2. HERO (v2) — white background with express lane motif
   The active hero. See front-page.php → hero.php.

   Visual language:
     - Whole section has a clean white background
     - Copy sits on the left, car image + lane stripes on the right
     - Three layered stripes behind the car represent a highway:
         • express lane (narrow, lighter yellow) — passes through car's rear
         • double white lines — HOV divider, also the // from the logo
         • main highway (wider, brand yellow) — offset further out
     - The car visually sits in the express lane
   ================================================================ */

.home-hero-v2 {
	background: var(--color-white);
	padding: var(--sp-16) 0 var(--sp-12);
	position: relative;
	overflow: hidden;
}

.home-hero-v2-inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--sp-10);
	align-items: center;
	min-height: 520px;
}

/* ---- Content (left side) ---- */

.home-hero-v2-content {
	max-width: 650px;
	position: relative;
	z-index: 2;
}

.home-hero-v2-headline {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: var(--fw-bold);
	letter-spacing: -0.04em;
	line-height: 1.02;
	margin: 0 0 var(--sp-5);
	color: var(--color-black);
}

.home-hero-v2-subhead {
	font-size: var(--fs-md);
	color: var(--color-ink);
	line-height: 1.55;
	margin: 0 0 var(--sp-7);
	max-width: 560px;
}

/* Form wrapper — no styling of its own, the shortcode provides its own
   .smco-container visual. We just control spacing around it. */
.home-hero-v2-form {
	max-width: 560px;
	margin-top: var(--sp-6);
}
.home-hero-v2-form > *:first-child { margin-top: 0; }
.home-hero-v2-form > *:last-child  { margin-bottom: 0; }

.home-hero-v2-trust {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}
.home-hero-v2-trust-avatars {
	max-width: 120px;
	width: auto;
	height: 32px;
	flex-shrink: 0;
	display: block;
}
.home-hero-v2-trust-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.home-hero-v2-trust-stars {
	color: var(--color-star);              /* darker gold — passes 3:1 on white */
	letter-spacing: 2px;
	font-size: var(--fs-sm);
	line-height: 1;
}
.home-hero-v2-trust-text {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	color: var(--color-ink);
	margin: 0;
	line-height: 1;
}

/* ---- Visual (right side): lanes + car ---- */

.home-hero-v2-visual {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Lane container — spans the whole visual area */
.home-hero-v2-lanes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 1;
}

/* Shared: every stripe is skewed, anchored from top, full-height */
.home-hero-v2-lane {
	position: absolute;
	top: -40px;
	bottom: -40px;
	transform: skewX(-18deg);
	transform-origin: top left;
}

/* 1. Express lane — subtle pale yellow, the lane YOU are in */
.home-hero-v2-lane--express {
	background: #fef5c1;
	left: 24%;
	width: 100px;
}

/* 2a + 2b. Double white lines — the HOV divider / // from the logo.
   Rendered AFTER the main highway in the DOM so they paint on top of
   both lanes. Two parallel white stripes sitting between the express
   lane and the main highway, with a visible gap between them so the
   main highway shows through — the classic double-white HOV marking. */
.home-hero-v2-line {
	background: var(--color-white);
	width: 10px;
}
.home-hero-v2-line--inner { left: calc(24% + 100px); }
.home-hero-v2-line--outer { left: calc(24% + 120px); }

/* 3. Main highway — warmer yellow, wider, the lane EVERYONE ELSE is in.
   Starts right after the express lane and extends to the edge of the
   hero container. The gap between the two white lines exposes this. */
.home-hero-v2-lane--main {
	background: #fff19f;
	left: calc(24% + 110px);
	right: 0;
}

/* Car sits over the lanes */
.home-hero-v2-car {
	position: relative;
	z-index: 2;
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	/* Subtle drop shadow so the car lifts off the lanes */
	filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.12));
}


/* Mobile-only lane set — hidden on desktop. Turned on + styled inside
   the mobile breakpoint (§13). Lives as a direct child of .home-hero-v2
   so it can span the whole hero; the desktop set lives inside .home-hero-v2-visual. */
.home-hero-v2-mobile-lanes { display: none; }


/* ================================================================
   2b. HERO (v1) — archived, reachable via template-homepage-v1.php
   Original yellow-background hero. Kept for fallback / A-B testing.
   ================================================================ */

.home-hero {
	position: relative;
	background: var(--color-yellow);
	padding: var(--sp-16) 0 var(--sp-20);
	overflow: hidden;
}

/* Skewed yellow lane stripes — the // motif blown up */
.home-hero-lanes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.home-hero-lanes .lane {
	position: absolute;
	top: -60px;
	height: 1400px;
	background: #ffec85;
	transform: skewX(-20deg);
}
.home-hero-lanes .lane-1 { left: 55%; width: 140px; }
.home-hero-lanes .lane-2 { left: 68%; width: 90px;  opacity: 0.7; }
.home-hero-lanes .lane-3 { left: 78%; width: 200px; opacity: 0.5; }
.home-hero-lanes .lane-4 { left: 92%; width: 60px; }

.home-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--sp-10);
	align-items: center;
}

.home-hero-content { max-width: 560px; }

.home-hero-headline {
	font-size: clamp(2.5rem, 5.5vw, 3.75rem);
	font-weight: var(--fw-black);
	letter-spacing: -0.04em;
	line-height: 1.02;
	margin-bottom: var(--sp-4);
	color: var(--color-black);
}

.home-hero-subhead {
	font-size: var(--fs-md);
	color: var(--color-ink);
	line-height: 1.5;
	margin-bottom: var(--sp-6);
	max-width: 480px;
}

/* Hero form container — shortcode provides its own styling, we just control spacing */
.home-hero-form {
	max-width: 560px;
	margin-top: var(--sp-6);
}

/* Reset any padding/margin the shortcode might add */
.home-hero-form > *:first-child { margin-top: 0; }
.home-hero-form > *:last-child  { margin-bottom: 0; }

/* Hero trust badge — avatar image + stars + "trusted by" text */
.home-hero-trust {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.home-hero-trust-avatars {
	max-width: 120px;
	width: auto;
	height: 32px;
	display: block;
	flex-shrink: 0;
}

.home-hero-trust-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.home-hero-trust-stars {
	color: var(--color-black);
	letter-spacing: 2px;
	font-size: var(--fs-sm);
	line-height: 1;
}

.home-hero-trust-text {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	color: var(--color-ink);
	margin: 0;
	line-height: 1;
}

/* Hero image area */
.home-hero-image {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-hero-image img,
.home-hero-image svg {
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
}


/* ================================================================
   3. TRUST BAR (merged — rating + press)
   Sits directly under the hero. Subtle light-gray band separates it
   from the white hero above and the white How-It-Works below, while
   staying clear of the black CTA buttons so nothing competes. Yellow
   hairlines top/bottom carry the brand cue without shouting.
   ================================================================ */

.home-trust-bar {
	background: var(--color-bg-alt);
	color: var(--color-ink);
	padding: var(--sp-5) 0;
	border-top: 2px solid var(--color-yellow);
	border-bottom: 2px solid var(--color-yellow);
}

.home-trust-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
}

/* Each zone stays a horizontal group — items inside never wrap on their
   own. The whole bar either fits on one line at desktop or collapses to
   a horizontal-scroll strip on mobile (handled in the breakpoint below). */
.home-trust-zone {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-4);
	flex-shrink: 0;
}

/* ---- Zone 1 — Rating ---- */

.home-trust-stars {
	color: var(--color-star);              /* darker gold — passes 3:1 on light bg */
	letter-spacing: 3px;
	font-size: var(--fs-lg);
	line-height: 1;
}

.home-trust-rating {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
}

.home-trust-rating-num {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-black);
	line-height: 1;
}

.home-trust-rating-max {
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

.home-trust-count {
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
	white-space: nowrap;
}

.home-trust-count strong {
	color: var(--color-black);
	font-weight: var(--fw-bold);
}

.home-trust-logos {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-4);
}

.home-trust-logo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-black);
	white-space: nowrap;
}

/* Trustpilot — the star icon picks up the success-green, the wordmark
   stays black for readability. This threads --color-success through the
   palette as a trust-accent color without competing with the wordmark. */
.home-trust-logo--trustpilot svg {
	color: var(--color-success);
}

/* ---- Zone 2 — Press ---- */

.home-trust-zone--press {
	gap: var(--sp-4);
}

.home-trust-press-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-muted);
	white-space: nowrap;
}

.home-trust-press-logos {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-5);
	flex-wrap: nowrap;
}

.home-trust-press-logo {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--color-ink-soft);
	white-space: nowrap;
}

.home-trust-press-logo--serif {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: var(--fw-bold);
}

.home-trust-press-logo--serif-italic {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
}


/* ================================================================
   4. HOW IT WORKS
   ================================================================ */

.home-hiw {
	padding: var(--sp-20) 0;
}

.home-hiw-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-6);
}

.home-hiw-step-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: var(--sp-5);
}
.home-hiw-step-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-hiw-step-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #d8d6cc 0%, #b5b3a8 100%);
}

.home-hiw-step-header {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-2);
}

.home-hiw-step-num {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: var(--color-yellow);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fw-black);
	font-size: var(--fs-md);
	color: var(--color-black);
}

.home-hiw-step-title {
	font-size: var(--fs-xl);
	font-weight: var(--fw-extra);
	margin: 0;
}

.home-hiw-step-text {
	color: var(--color-ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.6;
}


/* ================================================================
   5. WHY US MOSAIC
   ================================================================ */

.home-why {
	padding: var(--sp-20) 0;
	background: var(--color-bg-alt);
}

.home-why-mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 2px solid var(--color-black);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-white);
}

.home-why-cell {
	padding: var(--sp-8) var(--sp-6);
	background: var(--color-white);
	border-right: 2px solid var(--color-black);
	border-bottom: 2px solid var(--color-black);
}
.home-why-cell:nth-child(3n) { border-right: 0; }
.home-why-cell:nth-last-child(-n+3) { border-bottom: 0; }

.home-why-cell-meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--sp-4);
}

.home-why-cell-num {
	font-size: var(--fs-sm);
	font-weight: var(--fw-black);
	color: var(--color-yellow);
	letter-spacing: 0.05em;
}

.home-why-cell-mark {
	display: inline-block;
	transform: skewX(-20deg);
	color: var(--color-yellow);
	font-weight: var(--fw-black);
	letter-spacing: -0.1em;
	font-size: var(--fs-md);
	line-height: 1;
}

.home-why-cell-title {
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	margin: 0 0 var(--sp-3);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.home-why-cell-text {
	color: var(--color-ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.65;
}


/* ================================================================
   6. (reserved)
   The Instant Offer + phone mockup section was removed. Its CSS
   used to live here. If you need to revive it, pull from git history.
   ================================================================ */


/* ================================================================
   7. BOLD STATEMENT
   ================================================================ */

.home-bs {
	background: var(--lane-base);
	padding: var(--sp-24) 0;
	position: relative;
	overflow: hidden;
}

.home-bs-lanes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Shared: every lane is skewed and anchored from top, full height */
.home-bs-express-l,
.home-bs-express-r,
.home-bs-line {
	position: absolute;
	top: -100px;
	height: 1400px;
	transform: skewX(-18deg);
}

/* Left side: express lane + double highway divider */
.home-bs-express-l {
	background: var(--lane-express);
	left: -60px;
	width: 340px;
}
.home-bs-line {
	background: var(--lane-highway);
	width: 10px;
}
.home-bs-line-l1 { left: 280px; }
.home-bs-line-l2 { left: 300px; }

/* Right side: mirrored */
.home-bs-line-r1 { right: 300px; }
.home-bs-line-r2 { right: 280px; }
.home-bs-express-r {
	background: var(--lane-express);
	right: -60px;
	width: 340px;
}

.home-bs-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-12);
	align-items: center;
}

.home-bs-image {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.home-bs-image img { width: 100%; height: 100%; object-fit: cover; }
.home-bs-image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #d8d6cc 0%, #b5b3a8 100%);
}

.home-bs-heading {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: var(--fw-black);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: var(--sp-5);
	color: var(--color-black);
}

.home-bs-text {
	font-size: var(--fs-md);
	color: var(--color-ink);
	margin-bottom: var(--sp-6);
	max-width: 440px;
	line-height: 1.5;
}


/* ================================================================
   8. RECENT SALES (Motorway-style)
   ================================================================ */

.home-sales {
	padding: var(--sp-20) 0;
}

.home-sales-row-wrap {
	position: relative;
	padding: var(--sp-2) 0;
	overflow: hidden;
}

.home-sales-fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}
.home-sales-fade-left  { left: 0;  background: linear-gradient(to right, var(--color-white), transparent); }
.home-sales-fade-right { right: 0; background: linear-gradient(to left,  var(--color-white), transparent); }

.home-sales-row {
	display: flex;
	gap: var(--sp-3);
	padding: 0 var(--sp-8);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.home-sales-row::-webkit-scrollbar { display: none; }

.home-sale-card {
	flex: 0 0 280px;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	scroll-snap-align: start;
}

.home-sale-card-text { flex: 1; min-width: 0; }

.home-sale-card-name {
	font-size: var(--fs-sm);
	font-weight: var(--fw-extra);
	margin-bottom: 2px;
	color: var(--color-black);
}

.home-sale-card-detail {
	font-size: var(--fs-xs);
	color: var(--color-ink);
	margin-bottom: 6px;
	line-height: 1.3;
}

.home-sale-card-time {
	font-size: 11px;
	color: var(--color-muted);
}

.home-sale-card-image {
	width: 96px;
	height: 76px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}
.home-sale-card-image img { width: 100%; height: 100%; object-fit: cover; }
.home-sale-card-image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #d8d6cc 0%, #b5b3a8 100%);
}


/* ================================================================
   9. REVIEWS MOSAIC
   ================================================================ */

.home-reviews {
	background: var(--color-white);
	padding: var(--sp-20) 0;
}

.home-reviews-stars {
	color: var(--color-star);              /* darker gold — passes 3:1 on white */
	letter-spacing: 2px;
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-3);
}

.home-reviews-mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 2px solid var(--color-black);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.home-review-cell {
	padding: var(--sp-6);
	border-right: 2px solid var(--color-black);
	border-bottom: 2px solid var(--color-black);
	background: var(--color-white);
}
.home-review-cell:nth-child(3n) { border-right: 0; }
.home-review-cell:nth-last-child(-n+3) { border-bottom: 0; }

.home-review-cell-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--sp-2);
}

.home-review-cell-name {
	font-weight: var(--fw-black);
	font-size: var(--fs-base);
	color: var(--color-black);
	margin: 0;
}

.home-review-cell-badge {
	background: var(--color-black);
	color: var(--color-yellow);
	padding: 3px 8px;
	font-size: 9px;
	font-weight: var(--fw-extra);
	border-radius: 4px;
	letter-spacing: 0.05em;
}

.home-review-cell-stars {
	color: var(--color-black);
	letter-spacing: 1px;
	font-size: var(--fs-sm);
}

.home-review-cell-text {
	font-size: var(--fs-sm);
	line-height: 1.5;
	margin-top: var(--sp-3);
	color: var(--color-ink);
}

.home-reviews-cta {
	text-align: center;
	margin-top: var(--sp-8);
}


/* ================================================================
   10. RECENT GUIDES
   ================================================================ */

.home-guides {
	padding: var(--sp-20) 0;
	background: var(--color-white);
}

.home-guides-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--sp-10);
	gap: var(--sp-4);
}

.home-guides-head .home-section-heading {
	font-size: var(--fs-3xl);
	margin: 0;
	text-align: left;
}

.home-guides-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-6);
}

.home-guide-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.home-guide-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.home-guide-card-image {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}
.home-guide-card-image img { width: 100%; height: 100%; object-fit: cover; }
.home-guide-card-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #d8d6cc 0%, #b5b3a8 100%);
}

.home-guide-card-body { padding: var(--sp-6); }

.home-guide-card-meta {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-muted);
	margin-bottom: var(--sp-2);
}

.home-guide-card-title {
	font-size: var(--fs-xl);
	font-weight: var(--fw-extra);
	margin: 0 0 var(--sp-2);
	line-height: 1.3;
	letter-spacing: -0.02em;
}
.home-guide-card-title a {
	color: var(--color-black);
	transition: color var(--t-fast) var(--ease);
}
.home-guide-card-title a:hover { color: var(--color-yellow-dark); }

.home-guide-card-excerpt {
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
}


/* ================================================================
   11. FAQ ACCORDION
   ================================================================ */

.home-faq {
	padding: var(--sp-20) 0;
	background: var(--color-bg-alt);
}

.home-faq-list { margin-top: var(--sp-8); }

.home-faq-item {
	border-bottom: 1px solid #d6d6d6;
	padding: var(--sp-5) 0;
}

.home-faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	cursor: pointer;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	list-style: none;
	color: var(--color-black);
}
.home-faq-question::-webkit-details-marker { display: none; }
.home-faq-question:hover { color: var(--color-yellow-dark); }

.home-faq-toggle {
	flex-shrink: 0;
	position: relative;
	width: 22px;
	height: 22px;
}
.home-faq-toggle::before,
.home-faq-toggle::after {
	content: '';
	position: absolute;
	background: var(--color-muted);
	transition: all var(--t-base) var(--ease);
}
.home-faq-toggle::before {
	top: 50%; left: 0;
	width: 100%; height: 3px;
	transform: translateY(-50%);
}
.home-faq-toggle::after {
	left: 50%; top: 0;
	width: 3px; height: 100%;
	transform: translateX(-50%);
}
.home-faq-item[open] .home-faq-toggle::before { background: var(--color-yellow-dark); }
.home-faq-item[open] .home-faq-toggle::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.home-faq-answer {
	margin-top: var(--sp-3);
	color: var(--color-ink-soft);
	font-size: var(--fs-base);
	line-height: 1.7;
}


/* ================================================================
   12. FINAL CTA (Express Lane)
   ================================================================ */

.home-cta {
	background: var(--lane-base);
	padding: var(--sp-20) 0;
	position: relative;
	overflow: hidden;
}

.home-cta-lanes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.home-cta-lane {
	position: absolute;
	top: -100px;
	height: 1400px;
	transform: skewX(-18deg);
}

/* Left side: express lane + double highway divider */
.home-cta-express-l {
	background: var(--lane-express);
	left: -60px;
	width: 340px;
}
.home-cta-line {
	background: var(--lane-highway);
	width: 10px;
}
.home-cta-line-l1 { left: 280px; }
.home-cta-line-l2 { left: 300px; }

/* Right side: mirrored */
.home-cta-line-r1 { right: 300px; }
.home-cta-line-r2 { right: 280px; }
.home-cta-express-r {
	background: var(--lane-express);
	right: -60px;
	width: 340px;
}

.home-cta-inner {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 640px;
}

.home-cta-eyebrow {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: var(--fw-extra);
	letter-spacing: 0.3em;
	color: var(--color-black);
	text-transform: uppercase;
	margin-bottom: var(--sp-5);
}
.home-cta-eyebrow-mark {
	display: inline-block;
	transform: skewX(-20deg);
	letter-spacing: -0.1em;
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
}

.home-cta-heading {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: var(--fw-black);
	color: var(--color-black);
	letter-spacing: -0.04em;
	margin-bottom: var(--sp-4);
	line-height: 1;
}

.home-cta-subhead {
	font-size: var(--fs-md);
	color: var(--color-ink);
	margin-bottom: var(--sp-8);
}

.home-cta-form {
	max-width: 540px;
	margin: var(--sp-6) auto 0;
}


/* ================================================================
   13. RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {

	/* v2 hero — stack copy above car, lanes shrink but stay */
	.home-hero-v2 { padding: var(--sp-10) 0 var(--sp-8); }
	.home-hero-v2-inner {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
		min-height: 0;
	}
	.home-hero-v2-content { max-width: 100%; text-align: left; }
	.home-hero-v2-visual { min-height: 360px; }
	.home-hero-v2-subhead { max-width: 100%; }

	.home-hero { padding: var(--sp-12) 0 var(--sp-16); }
	.home-hero-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
	.home-hero-image { min-height: 240px; max-width: 480px; margin: 0 auto; }
	.home-hero-content { max-width: 100%; }

	.home-hiw-grid,
	.home-guides-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Reviews mosaic: drop from 3 cols to 2, reset borders */
	.home-reviews-mosaic {
		grid-template-columns: repeat(2, 1fr);
	}
	.home-review-cell {
		border-right: 2px solid var(--color-black);
		border-bottom: 2px solid var(--color-black);
	}
	.home-review-cell:nth-child(3n) { border-right: 2px solid var(--color-black); }
	.home-review-cell:nth-child(2n) { border-right: 0; }
	.home-review-cell:nth-last-child(-n+3) { border-bottom: 2px solid var(--color-black); }
	.home-review-cell:nth-last-child(-n+2) { border-bottom: 0; }

	/* Why Us mosaic is only 3 cells — keep as a 3-column row on tablet (fits fine).
	   Drops to single column on mobile below. */

	.home-bs { padding: var(--sp-16) 0; }
	.home-bs-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
	.home-bs-image { max-width: 480px; margin: 0 auto; }

	/* Trust bar — tighten spacing between the rating and press zones on tablet. */
	.home-trust-bar-inner { gap: var(--sp-6); }
}


/* Mobile ≤ 640px */
@media (max-width: 640px) {

	.home-section-head { margin-bottom: var(--sp-8); }
	.home-section-heading { font-size: var(--fs-2xl); }

	/* ---- Homepage v2 hero mobile ----
	   Yellow canvas fills the hero on mobile. Content stacks: headline →
	   subhead → form → trust → car. The express-lane motif returns as a
	   separate mobile-only markup block (see hero.php) that spans the
	   whole section behind all content. Desktop-lane markup is hidden. */
	.home-hero-v2 {
		background: var(--color-yellow);
		padding: var(--sp-10) 0 var(--sp-12);
		overflow: hidden;
		position: relative;
	}

	.home-hero-v2-inner {
		min-height: 0;
		position: relative;
		z-index: 1;
	}

	.home-hero-v2-content { position: relative; z-index: 1; }

	.home-hero-v2-headline {
		font-size: clamp(2rem, 9vw, 2.5rem);
		line-height: 1.02;
		margin-bottom: var(--sp-4);
	}

	.home-hero-v2-subhead {
		font-size: var(--fs-sm);
		max-width: 280px;
		margin-bottom: var(--sp-5);
		font-weight: var(--fw-semi);
	}

	.home-hero-v2-form { padding: 0; }

	/* Desktop lane motif (inside .home-hero-v2-visual) is hidden on mobile —
	   the mobile-lanes block below takes over. */
	.home-hero-v2-lanes { display: none; }

	/* Mobile-only lanes: cover the entire section, skewed at the same
	   -18deg as the desktop version. One pale-yellow express lane plus
	   two thin white HOV dividers — the logo's // blown up into the bg. */
	.home-hero-v2-mobile-lanes {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
		z-index: 0;
	}
	.home-hero-v2-mobile-lane--express {
		position: absolute;
		top: -40px;
		bottom: -40px;
		left: 55%;
		width: 62px;
		background: var(--lane-express);
		transform: skewX(-18deg);
	}
	.home-hero-v2-mobile-line {
		position: absolute;
		top: -40px;
		bottom: -40px;
		width: 4px;
		background: rgba(255, 255, 255, 0.7);
		transform: skewX(-18deg);
	}
	.home-hero-v2-mobile-line--inner { left: calc(55% + 64px); }
	.home-hero-v2-mobile-line--outer { left: calc(55% + 76px); }

	/* Re-enable the car — sits inside the yellow hero, below the trust stack,
	   centered, with a soft drop shadow to lift it off the yellow canvas. */
	.home-hero-v2-visual {
		display: block;
		min-height: 0;
		margin-top: var(--sp-8);
		position: relative;
		z-index: 1;
	}
	.home-hero-v2-car {
		width: 100%;
		max-width: 420px;
		height: auto;
		margin: 0 auto;
		display: block;
		filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.2));
	}

	/* Trust stars — black reads crisper than gold against the yellow canvas */
	.home-hero-v2-trust-stars { color: var(--color-black); }

	/* Trust badge — keep on one row, shrink avatars + text, left-align */
	.home-hero-v2-trust,
	.home-hero-trust,
	.lp-hero-trust,
	.page-hero-trust {
		flex-wrap: nowrap;
		gap: var(--sp-2);
		margin-top: var(--sp-4);
	}
	.home-hero-v2-trust-avatars,
	.home-hero-trust-avatars,
	.lp-hero-trust-avatars,
	.page-hero-trust-avatars {
		max-width: 80px;
		height: 24px;
		flex-shrink: 0;
	}
	.home-hero-v2-trust-text,
	.home-hero-trust-text,
	.lp-hero-trust-text,
	.page-hero-trust-text {
		font-size: 11px;
		line-height: 1.2;
	}
	.home-hero-v2-trust-stars,
	.home-hero-trust-stars,
	.lp-hero-trust-stars,
	.page-hero-trust-stars {
		font-size: 11px;
	}

	.home-hero { padding: var(--sp-10) 0 var(--sp-12); }
	.home-hero-headline { font-size: clamp(2rem, 8vw, 2.75rem); }
	.home-hero-form-row { flex-direction: column; }
	.home-hero-form-row .btn { width: 100%; }

	/* Trust bar — horizontal scroll on mobile to keep all three zones visible
	   without wrapping into a tall block. Zone borders stay, but gap tightens. */
	.home-trust-bar { padding: var(--sp-4) 0; }
	.home-trust-bar-inner {
		gap: var(--sp-5);
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: var(--sp-1);
	}
	.home-trust-bar-inner::-webkit-scrollbar { display: none; }

	/* Tighten everything inside the zones for mobile — smaller type, less gap. */
	.home-trust-zone { gap: var(--sp-3); }
	.home-trust-stars { font-size: var(--fs-md); letter-spacing: 2px; }
	.home-trust-rating-num { font-size: var(--fs-lg); }
	.home-trust-logos { gap: var(--sp-3); }
	.home-trust-press-logos { gap: var(--sp-4); }

	.home-hiw,
	.home-why,
	.home-bs,
	.home-sales,
	.home-reviews,
	.home-guides,
	.home-faq,
	.home-cta {
		padding: var(--sp-12) 0;
	}

	.home-hiw-grid,
	.home-why-mosaic,
	.home-reviews-mosaic,
	.home-guides-grid {
		grid-template-columns: 1fr;
	}

	/* Single-column mosaic — reset all borders */
	.home-why-cell,
	.home-review-cell {
		border-right: 0 !important;
		border-bottom: 2px solid var(--color-black);
	}
	.home-why-cell:last-child,
	.home-review-cell:last-child { border-bottom: 0; }

	.home-bs-heading { font-size: clamp(2rem, 8vw, 2.75rem); }

	.home-guides-head { flex-direction: column; align-items: flex-start; }

	.home-cta-heading { font-size: clamp(2rem, 8vw, 2.75rem); }

	.home-sales-row { padding: 0 var(--sp-4); }
	.home-sale-card { flex: 0 0 260px; }

	/* ---- Mobile lane motif: single-side (left only), centered content ----
	   Hide the mirrored right-side spans on every yellow section so we have
	   just one express lane + two highway stripes + the section background.
	   Tighten the left-side geometry so it doesn't crowd the content. */
	.home-cta-express-r,
	.home-cta-line-r1,
	.home-cta-line-r2,
	.home-bs-express-r,
	.home-bs-line-r1,
	.home-bs-line-r2 { display: none; }

	.home-cta-express-l { left: -30px; width: 160px; }
	.home-cta-line-l1   { left: 120px; width: 6px; }
	.home-cta-line-l2   { left: 134px; width: 6px; }

	.home-bs-express-l { left: -30px; width: 160px; }
	.home-bs-line-l1   { left: 120px; width: 6px; }
	.home-bs-line-l2   { left: 134px; width: 6px; }
}