/* ================================================================
   Sell My Car Online — landing.css
   Loaded ONLY on pages using the landing-condition template.

   Design language: same tokens as home.css. Sharp corners, yellow +
   black, hairline borders. Consistent with the rest of the theme.

   Sections:
     1. Shared section heads
     2. Hero
     3. Review Strip
     4. As Featured In
     5. How It Works
     6. Why Us (yellow background, bordered cards)
     7. Reviews
     8. FAQ (grouped)
     9. Final CTA
     10. Responsive
   ================================================================ */


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

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

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

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


/* ================================================================
   2. HERO
   Mirrors the homepage hero (see home.css §2). Desktop: white canvas,
   two-column layout, express-lane motif inside .lp-hero-visual behind
   the car image. Mobile: yellow canvas with lanes spanning the whole
   section behind stacked content, car below.
   ================================================================ */

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

/* Mobile-only lanes — hidden on desktop. Enabled + styled in the mobile
   breakpoint at the bottom of this file. */
.lp-hero-mobile-lanes { display: none; }

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

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

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

/* Eyebrow — small uppercase label above the H1 that names the page topic
   (e.g. "SELL YOUR NON-RUNNING CAR"). Muted gray with tight letter-spacing
   so it reads as a subtle kicker rather than competing with the headline. */
.lp-hero-eyebrow {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	margin: 0 0 var(--sp-3);
	line-height: 1.2;
}

.lp-hero-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);
}

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

.lp-hero-form {
	max-width: 560px;
	margin-top: var(--sp-6);
}
.lp-hero-form > *:first-child { margin-top: 0; }
.lp-hero-form > *:last-child  { margin-bottom: 0; }

.lp-hero-trust {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

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

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

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

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

/* Payment reassurance badges — small horizontal row sitting below the
   trust block. Three check-icon items ("Certified funds", "Instant
   bank transfer", "Free towing" by default). Designed to read like a
   bank-level proof line rather than decorative chrome.

   Structure: <ul class="lp-hero-badges"><li class="lp-hero-badge">
   <svg/> <span/></li>…</ul>. The SVG comes from smco_icon('check')
   and inherits currentColor. */
.lp-hero-badges {
	list-style: none;
	margin: var(--sp-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
}
.lp-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	color: var(--color-ink);
	line-height: 1;
}
.lp-hero-badge svg {
	width: 14px;
	height: 14px;
	color: var(--color-black);
	flex-shrink: 0;
}

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

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

.lp-hero-lanes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 1;
}

.lp-hero-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 */
.lp-hero-lane--express {
	background: #fef5c1;
	left: 24%;
	width: 100px;
}

/* 2. Double white lines — the HOV divider / // from the logo */
.lp-hero-line {
	background: var(--color-white);
	width: 10px;
}
.lp-hero-line--inner { left: calc(24% + 100px); }
.lp-hero-line--outer { left: calc(24% + 120px); }

/* 3. Main highway — warmer yellow, the lane EVERYONE ELSE is in */
.lp-hero-lane--main {
	background: #fff19f;
	left: calc(24% + 110px);
	right: 0;
}

.lp-hero-car {
	position: relative;
	z-index: 2;
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.12));
}


/* ================================================================
   3. REVIEW STRIP
   Same treatment as the homepage trust bar (home.css §3). Subtle light
   band between the white hero above and the content below, with yellow
   hairlines top/bottom as the brand cue. Intentionally not black so it
   doesn't compete with the black CTA buttons elsewhere on the page.
   ================================================================ */

.lp-review-strip {
	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);
}

.lp-review-strip-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-6);
	flex-wrap: wrap;
	text-align: center;
}

.lp-review-strip-stars {
	color: var(--color-star);
	letter-spacing: 3px;
	font-size: var(--fs-lg);
	line-height: 1;
}

.lp-review-strip-rating {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.lp-review-strip-rating-num {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-black);
	line-height: 1;
}
.lp-review-strip-rating-max {
	font-size: var(--fs-sm);
	color: var(--color-muted);
}
.lp-review-strip-count {
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
}
.lp-review-strip-count strong {
	color: var(--color-black);
	font-weight: var(--fw-bold);
}
.lp-review-strip-logos {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-4);
	padding-left: var(--sp-4);
	border-left: 1px solid var(--color-border);
}
.lp-review-strip-logo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-black);
}


/* ================================================================
   4. AS FEATURED IN
   ================================================================ */

.lp-featured {
	border-bottom: 1px solid var(--color-border);
	padding: var(--sp-6) 0;
	background: var(--color-white);
}

.lp-featured-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-12);
	flex-wrap: wrap;
}

.lp-featured-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-muted);
}

.lp-featured-logo {
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
	color: var(--color-muted);
}
.lp-featured-logo--serif { font-family: Georgia, 'Times New Roman', serif; font-weight: var(--fw-bold); }
.lp-featured-logo--serif-italic { font-family: Georgia, serif; font-style: italic; }


/* ================================================================
   5. HOW IT WORKS
   ================================================================ */

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

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

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

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

.lp-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-bold);
	font-size: var(--fs-md);
	color: var(--color-black);
}

.lp-hiw-step-title {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	margin: 0;
	letter-spacing: -0.02em;
}

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


/* ================================================================
   6. WHY US (yellow background, white cards with sharp borders)
   ================================================================ */

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

.lp-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-5);
}

.lp-why-card {
	background: var(--color-white);
	border: 2px solid var(--color-black);
	padding: var(--sp-6) var(--sp-6);
}

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

.lp-why-card-num {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-yellow-dark);
	letter-spacing: 0.05em;
}

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

.lp-why-card-title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--sp-3);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

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


/* ================================================================
   7. REVIEWS MOSAIC (3-cell, styled to match the homepage)
   Same border + typography + badge treatment as home.css §9. Kept at
   3 cells (vs. homepage's 6) because landing pages are focused; the
   extra testimonials live on the homepage.
   ================================================================ */

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

.lp-reviews-stars {
	color: var(--color-star);
	letter-spacing: 2px;
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-3);
}

.lp-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;
}

.lp-review-cell {
	padding: var(--sp-6);
	border-right: 2px solid var(--color-black);
	background: var(--color-white);
}
.lp-review-cell:last-child { border-right: 0; }

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

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

.lp-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;
}

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

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


/* ================================================================
   8. FAQ (grouped accordions)
   ================================================================ */

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

.lp-faq-group {
	margin-bottom: var(--sp-10);
}
.lp-faq-group:last-child {
	margin-bottom: 0;
}

.lp-faq-group-title {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-black);
	margin-bottom: var(--sp-3);
	padding-bottom: var(--sp-3);
	border-bottom: 2px solid var(--color-black);
}

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

.lp-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);
	line-height: 1.4;
}
.lp-faq-question::-webkit-details-marker { display: none; }
.lp-faq-question:hover { color: var(--color-yellow-dark); }

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

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


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

.lp-cta {
	background: var(--color-yellow);
	padding: var(--sp-24) 0;
	position: relative;
	overflow: hidden;
}

.lp-cta-lanes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lp-cta-lane {
	position: absolute;
	top: -100px;
	height: 1400px;
	background: var(--color-white);
	transform: skewX(-20deg);
}
.lp-cta-lane-l1 { left: -50px;  width: 180px; opacity: 0.45; }
.lp-cta-lane-l2 { left: 140px;  width: 60px;  opacity: 0.65; }
.lp-cta-lane-r1 { right: -50px; width: 180px; opacity: 0.45; }
.lp-cta-lane-r2 { right: 140px; width: 60px;  opacity: 0.65; }

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

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

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

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

.lp-cta-form {
	background: var(--color-white);
	padding: var(--sp-5);
	max-width: 540px;
	margin: 0 auto;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}


/* ================================================================
   10. RESPONSIVE
   ================================================================ */

@media (max-width: 1024px) {
	/* Tablet — stack the hero; car + lanes shrink but remain visible */
	.lp-hero { padding: var(--sp-10) 0 var(--sp-8); }
	.lp-hero-inner {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
		min-height: 0;
	}
	.lp-hero-content { max-width: 100%; }
	.lp-hero-visual { min-height: 360px; }
	.lp-hero-subhead { max-width: 100%; }

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

	/* Reviews stay 3-col on tablet — the mosaic is the point */

	.lp-featured-inner { gap: var(--sp-6); }
}

@media (max-width: 640px) {
	.lp-section-head { margin-bottom: var(--sp-8); }
	.lp-section-heading { font-size: var(--fs-2xl); }

	/* ---- Hero mobile ----
	   White canvas with the full 4-stripe lane motif reproduced from desktop:
	   express lane (pale #fef5c1) + main highway (warm #fff19f) + double
	   white HOV lines. Same hex colors as desktop, just shifted further right
	   and sized for a phone viewport. Content stacks: headline → subhead →
	   form → trust → badges → car.

	   Note on skew angle: desktop uses -18deg (the logo // angle). On a narrow
	   phone a tall element at -18deg drifts too far horizontally across the
	   hero, so we use a gentler -10deg here. Same diagonal language, sized
	   for a 380px-wide viewport. */
	.lp-hero {
		background: var(--color-white);
		padding: var(--sp-10) 0 var(--sp-12);
	}
	.lp-hero-inner { min-height: 0; position: relative; z-index: 1; }
	.lp-hero-content { position: relative; z-index: 1; }

	.lp-hero-headline {
		font-size: clamp(2rem, 9vw, 2.5rem);
		line-height: 1.02;
		margin-bottom: var(--sp-4);
	}
	.lp-hero-eyebrow {
		font-size: 11px;
		margin-bottom: var(--sp-2);
	}
	.lp-hero-subhead {
		font-size: var(--fs-sm);
		max-width: 280px;
		margin-bottom: var(--sp-5);
		font-weight: var(--fw-semi);
	}
	.lp-hero-form { padding: 0; }

	/* Desktop lanes hidden on mobile — mobile block below takes over */
	.lp-hero-lanes { display: none; }

	/* Mobile lanes wrapper — fills the hero, holds the 4-stripe pattern. */
	.lp-hero-mobile-lanes {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
		overflow: hidden;
		z-index: 0;
	}

	/* 1. Express lane — pale yellow, narrow. Matches desktop #fef5c1 exactly. */
	.lp-hero-mobile-lane--express {
		position: absolute;
		top: -40px;
		bottom: -40px;
		left: 64%;
		width: 72px;
		background: #fef5c1;
		transform: skewX(-10deg);
		transform-origin: top left;
	}

	/* 2. Main highway — warmer yellow, bleeds past the right edge. Starts
	   at +80px (inside the gap between the two white lines) so the lines
	   paint over it, revealing warm yellow through the 8px gap — same
	   overlap trick as desktop. Matches desktop #fff19f exactly. */
	.lp-hero-mobile-lane--main {
		position: absolute;
		top: -40px;
		bottom: -40px;
		left: calc(64% + 80px);
		right: -30%;
		background: #fff19f;
		transform: skewX(-10deg);
		transform-origin: top left;
	}

	/* 3a + 3b. Double white HOV lines — the // from the logo, painted last
	   so they sit on top of both lanes. */
	.lp-hero-mobile-line {
		position: absolute;
		top: -40px;
		bottom: -40px;
		width: 8px;
		background: var(--color-white);
		transform: skewX(-10deg);
		transform-origin: top left;
	}
	.lp-hero-mobile-line--inner { left: calc(64% + 72px); }
	.lp-hero-mobile-line--outer { left: calc(64% + 88px); }

	.lp-hero-visual {
		min-height: 0;
		margin-top: var(--sp-8);
		position: relative;
		z-index: 1;
	}
	.lp-hero-car {
		width: 100%;
		max-width: 420px;
		height: auto;
		margin: 0 auto;
		display: block;
		filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.18));
	}

	/* Trust stars stay the default gold — the canvas is white now, no need
	   for the black-on-yellow override the old mobile treatment used. */

	/* Payment badges — let them wrap instead of forcing a single row on
	   narrow screens. Tight gap keeps it compact. */
	.lp-hero-badges { gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }
	.lp-hero-badge  { font-size: 12px; }

	/* ---- Trust strip / Featured strip — horizontal scroll on mobile ---- */
	.lp-review-strip { padding: var(--sp-4) 0; }
	.lp-review-strip-inner {
		gap: var(--sp-3);
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.lp-review-strip-inner::-webkit-scrollbar { display: none; }
	.lp-review-strip-inner > * { flex-shrink: 0; }
	.lp-review-strip-logos { padding-left: var(--sp-3); gap: var(--sp-3); }

	.lp-featured-inner {
		gap: var(--sp-4);
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: var(--sp-2);
	}
	.lp-featured-logo { white-space: nowrap; }

	.lp-hiw,
	.lp-why,
	.lp-reviews,
	.lp-faq,
	.lp-cta {
		padding: var(--sp-12) 0;
	}

	.lp-hiw-grid,
	.lp-why-grid {
		grid-template-columns: 1fr;
	}

	/* Reviews mosaic stacks on mobile — vertical dividers become horizontal */
	.lp-reviews-mosaic {
		grid-template-columns: 1fr;
	}
	.lp-review-cell {
		border-right: 0;
		border-bottom: 2px solid var(--color-black);
	}
	.lp-review-cell:last-child { border-bottom: 0; }

	.lp-cta-heading { font-size: clamp(1.75rem, 7vw, 2.5rem); }
	.lp-faq-question { font-size: var(--fs-base); }
}