/**
 * SA — SEO PPC landing page (template-lp-seo.php).
 * Scoped to body.lp-seo-page so it never leaks into the rest of the theme.
 * Theme: white page with two black "bookend" sections (hero + final CTA),
 * and a bright, glowing yellow accent used for every CTA button throughout.
 */

.lp-seo-page {
	--lp-black: #191919;
	--lp-black-soft: #161616;
	--lp-yellow: #ffc300;
	--lp-yellow-bright: #ffd60a;
	--lp-yellow-glow: rgba(255, 195, 0, 0.55);
	--lp-amber-ink: #92660a;
	--lp-ink: #17233d;
	--lp-border: #e2e8f0;
	--lp-border-dark: rgba(255, 255, 255, 0.12);
	--lp-text-muted: #5b6b82;
	--lp-text-dim: rgba(255, 255, 255, 0.7);

	background: #fff;
	color: var(--lp-ink);
}

.lp-seo-page section {
	scroll-margin-top: 90px;
}

.lp-seo-page main h2 {
	color: var(--lp-ink);
	font-weight: 700;
}

.lp-seo-page .lp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.35rem 0.85rem;
	border-radius: 50rem;
	background: rgba(255, 195, 0, 0.14);
	color: var(--lp-amber-ink);
	border: 1px solid rgba(255, 195, 0, 0.4);
}

/* Black sections (hero, final CTA) need the brighter, dark-mode eyebrow */
.lp-hero .lp-eyebrow,
.lp-final-cta .lp-eyebrow {
	color: var(--lp-yellow-bright);
	border-color: rgba(255, 195, 0, 0.35);
}

/* ==========================================================================
   Header — logo, email, phone, single CTA. No nav menu.
   Stays white so the black logo remains visible.
   ========================================================================== */

.lp-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: #fff;
	padding-block: 1rem;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.lp-header__logo img {
	max-height: 40px;
	width: auto;
}

/* The logo is a wide horizontal wordmark — at a fixed 40px tall it can run
   ~280px wide, which crowds the header on narrow phones. Below desktop
   width, drop the header's CTA button (the sticky bottom bar already
   covers that action there) and shrink the logo a little further. */
@media (max-width: 991.98px) {
	.lp-header .lp-btn-cta {
		display: none;
	}
}
@media (max-width: 575.98px) {
	.lp-header__logo img {
		max-height: 28px;
	}
}

.lp-header__logo {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--lp-ink);
	text-decoration: none;
}

.lp-header__email {
	color: var(--lp-ink);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.95rem;
}
.lp-header__email:hover {
	color: var(--lp-yellow);
	filter: brightness(0.85);
}
.lp-header__email svg {
	flex-shrink: 0;
}

/* Final CTA band sits on black — its email link should read white/yellow, not navy-ink */
.lp-final-cta .lp-header__email {
	color: #fff;
}
.lp-final-cta .lp-header__email:hover {
	color: var(--lp-yellow-bright);
	filter: none;
}

/* ==========================================================================
   Logo slider — "Tools We Use" auto-scrolling strip under the header.
   ========================================================================== */

.lp-tools {
	background: #fff;
	border-bottom: 1px solid var(--lp-border);
	padding-block: 1.75rem 2rem;
	scroll-margin-top: 0 !important;
}
.lp-tools__label {
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--lp-ink);
	margin: 0 0 1.1rem;
}

.lp-tools__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-tools__track {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	width: max-content;
	animation: lp-tools-scroll 26s linear infinite;
}
.lp-tools__viewport:hover .lp-tools__track {
	animation-play-state: paused;
}

.lp-tools__item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.lp-tools__item img {
	height: 46px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
}
.lp-tools__item--placeholder {
	white-space: nowrap;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--lp-text-muted);
	border: 1px dashed var(--lp-border);
	border-radius: 0.5rem;
	padding: 0.4rem 0.9rem;
}

@keyframes lp-tools-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* Track content is rendered twice, so -50% is exactly one full loop. */
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-tools__track {
		animation: none;
	}
	.lp-tools__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ==========================================================================
   CTA buttons — bright yellow with a glow, so they stand out everywhere.
   ========================================================================== */

.lp-btn-cta {
	background: var(--lp-yellow);
	border: none;
	color: #14110a;
	font-weight: 700;
	padding: 0.65rem 1.4rem;
	border-radius: 0.5rem;
	white-space: nowrap;
	display: inline-block;
	text-decoration: none;
	box-shadow: 0 0 12px 2px var(--lp-yellow-glow), 0 0 0 0 rgba(255, 195, 0, 0);
	animation: lp-pulse-glow 2.4s ease-in-out infinite;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-btn-cta:hover,
.lp-btn-cta:focus {
	background: var(--lp-yellow-bright);
	color: #14110a;
	text-decoration: none;
	transform: translateY(-1px);
	animation-play-state: paused;
	box-shadow: 0 0 24px 6px var(--lp-yellow-glow), 0 0 45px 12px rgba(255, 195, 0, 0.35);
}
.lp-btn-cta--lg {
	padding: 0.9rem 2rem;
	font-size: 1.05rem;
}

@keyframes lp-pulse-glow {
	0%,
	100% {
		box-shadow: 0 0 10px 1px var(--lp-yellow-glow), 0 0 22px 4px rgba(255, 195, 0, 0.25);
	}
	50% {
		box-shadow: 0 0 18px 4px var(--lp-yellow-glow), 0 0 38px 10px rgba(255, 195, 0, 0.45);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-btn-cta {
		animation: none;
		box-shadow: 0 0 16px 3px var(--lp-yellow-glow);
	}
}

/* ==========================================================================
   Hero / banner
   ========================================================================== */

.lp-hero {
	background: var(--lp-black);
	color: #fff;
	padding-block: 3.5rem;
	position: relative;
	overflow: hidden;
}

.lp-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 85% 20%, rgba(255, 195, 0, 0.12), transparent 45%);
	pointer-events: none;
}

/* Decorative background: dot-grid texture + drifting glow orbs + a faint
   "rankings climbing" line chart, to give the hero some depth and motion. */
.lp-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 35%, #000 55%, transparent 100%);
	mask-image: radial-gradient(ellipse 100% 90% at 50% 35%, #000 55%, transparent 100%);
}

.lp-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	opacity: 0.8;
	will-change: transform;
}
.lp-hero__orb--1 {
	width: 26rem;
	height: 26rem;
	top: -8rem;
	right: -6rem;
	background: radial-gradient(circle, rgba(255, 195, 0, 0.85), transparent 70%);
	animation: lp-orb-drift-1 22s ease-in-out infinite;
}
.lp-hero__orb--2 {
	width: 19rem;
	height: 19rem;
	bottom: -6rem;
	left: 4%;
	background: radial-gradient(circle, rgba(255, 214, 10, 0.6), transparent 70%);
	animation: lp-orb-drift-2 18s ease-in-out infinite;
}
.lp-hero__orb--3 {
	width: 15rem;
	height: 15rem;
	top: 22%;
	left: 38%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
	animation: lp-orb-drift-3 26s ease-in-out infinite;
}

@keyframes lp-orb-drift-1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-3rem, 2rem) scale(1.1); }
}
@keyframes lp-orb-drift-2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(2.5rem, -1.5rem) scale(1.08); }
}
@keyframes lp-orb-drift-3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-1.5rem, -2rem) scale(0.95); }
}

.lp-hero__chart {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(54rem, 78%);
	height: auto;
	opacity: 0.9;
}
.lp-hero__chart-line {
	stroke: var(--lp-yellow-bright);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 700;
	stroke-dashoffset: 700;
	filter: drop-shadow(0 0 10px rgba(255, 195, 0, 0.85)) drop-shadow(0 0 22px rgba(255, 195, 0, 0.45));
	animation: lp-chart-draw 2.2s 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.lp-hero__chart-fill {
	fill: rgba(255, 195, 0, 0.16);
	stroke: none;
	opacity: 0;
	animation: lp-chart-fade 1.5s 1.6s ease-out forwards;
}

@keyframes lp-chart-draw {
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes lp-chart-fade {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-hero__orb {
		animation: none;
	}
	.lp-hero__chart-line {
		animation: none;
		stroke-dashoffset: 0;
	}
	.lp-hero__chart-fill {
		animation: none;
		opacity: 1;
	}
}

@media (max-width: 767.98px) {
	.lp-hero__chart {
		display: none;
	}
}

.lp-hero__inner {
	position: relative;
	z-index: 1;
}

.lp-hero__headline {
	font-size: clamp(2rem, 4vw, 2.9rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 1rem 0 1rem;
}

.lp-hero__headline .lp-highlight {
	color: var(--lp-yellow-bright);
}

.lp-hero__sub {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.8);
	max-width: 42rem;
}

.lp-hero__bullets {
	list-style: none;
	padding: 0;
	margin: 1.75rem 0 0;
	display: grid;
	gap: 0.65rem;
}
.lp-hero__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 500;
	color: #fff;
}
.lp-hero__bullets svg {
	flex-shrink: 0;
	margin-top: 0.15rem;
	color: var(--lp-yellow-bright);
}

/* Form card — stays white for legibility/trust */

.lp-form-card {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 195, 0, 0.08);
	padding: 1.25rem 1.5rem 1.4rem;
	position: relative;
	overflow: hidden;
}
.lp-form-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--lp-yellow), var(--lp-yellow-bright));
}
.lp-form-card h2 {
	color: var(--lp-ink);
	font-size: 1.3rem;
	margin-bottom: 0.85rem;
}

/* Contact Form 7 styling inside the card — no <label> elements; the
   placeholder text carries the field name (and a "*" for required ones). */
.lp-form-card .wpcf7-form-control:not([type="submit"]) {
	width: 100%;
	border: 1px solid var(--lp-border);
	border-radius: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
	font-family: inherit;
	background: #f5f8fc;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lp-form-card .wpcf7-form-control::placeholder {
	color: #6b7a90;
	opacity: 1;
}
.lp-form-card .wpcf7-form-control:not([type="submit"]):focus {
	outline: none;
	border-color: var(--lp-yellow);
	box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.2);
	background: #fff;
}
.lp-form-card textarea.wpcf7-form-control {
	min-height: 56px;
	resize: vertical;
}
.lp-form-card .wpcf7-submit {
	width: 100%;
	background: var(--lp-yellow);
	color: #14110a;
	border: none;
	border-radius: 0.5rem;
	padding: 0.65rem 1rem;
	font-weight: 700;
	font-size: 1.02rem;
	margin-top: 0.15rem;
	box-shadow: 0 0 14px 2px var(--lp-yellow-glow);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.lp-form-card .wpcf7-submit:hover {
	background: var(--lp-yellow-bright);
	box-shadow: 0 0 22px 5px var(--lp-yellow-glow);
}
.lp-form-card .wpcf7-spinner {
	margin: 0.5rem auto 0;
}
.lp-form-card .wpcf7-not-valid-tip {
	font-size: 0.8rem;
	color: #dc2626;
	margin-top: 0.25rem;
}
.lp-form-card .wpcf7-response-output {
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	font-size: 0.9rem;
	margin: 1rem 0 0;
	border: 1px solid var(--lp-border);
}
.lp-form-card form.sent .wpcf7-response-output {
	border-color: rgba(22, 163, 74, 0.4);
	background: rgba(22, 163, 74, 0.08);
	color: #0f7d38;
}
.lp-form-card form.failed .wpcf7-response-output,
.lp-form-card form.invalid .wpcf7-response-output,
.lp-form-card form.spam .wpcf7-response-output {
	border-color: rgba(220, 38, 38, 0.35);
	background: rgba(220, 38, 38, 0.06);
	color: #b91c1c;
}
.lp-form-card__note {
	font-size: 0.78rem;
	color: var(--lp-text-muted);
	text-align: center;
	margin-top: 0.5rem;
	margin-bottom: 0;
}
.lp-form-card__note a {
	color: var(--lp-ink);
}

/* ==========================================================================
   Industries grid — "SEO works for every kind of business"
   ========================================================================== */

.lp-industry-card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--lp-border);
	border-radius: 0.85rem;
	padding: 1.5rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.lp-industry-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 195, 0, 0.5);
	border-color: color-mix(in srgb, var(--card-accent, var(--lp-yellow)) 55%, transparent);
	box-shadow: 0 12px 25px rgba(23, 35, 61, 0.08);
	box-shadow: 0 12px 25px color-mix(in srgb, var(--card-accent, var(--lp-yellow)) 18%, transparent);
}
.lp-industry-card__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.65rem;
	background: rgba(255, 195, 0, 0.14);
	background: color-mix(in srgb, var(--card-accent, var(--lp-yellow)) 14%, #fff);
	color: var(--card-accent, var(--lp-amber-ink));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.lp-industry-card h3 {
	font-size: 1.05rem;
	color: var(--lp-ink);
	margin-bottom: 0.4rem;
}
.lp-industry-card p {
	color: var(--lp-text-muted);
	font-size: 0.92rem;
	margin-bottom: 0;
}

/* ==========================================================================
   Stats band
   ========================================================================== */

.lp-stats-band {
	background: #f5f8fc;
	border-top: 1px solid var(--lp-border);
	border-bottom: 1px solid var(--lp-border);
}
.lp-stat__num {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 700;
	color: var(--lp-ink);
	line-height: 1;
}
.lp-stat__label {
	color: var(--lp-text-muted);
	font-size: 0.9rem;
	margin-top: 0.35rem;
}

/* ==========================================================================
   Google-style SERP ranking animation — a realistic "browser" mock-up card
   ========================================================================== */

.lp-serp-demo__browser {
	background: #fff;
	border: 1px solid var(--lp-border);
	border-radius: 1rem;
	box-shadow: 0 20px 45px rgba(23, 35, 61, 0.12);
	overflow: hidden;
}

.lp-serp-demo__chrome {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.7rem 1rem;
	background: #f1f3f4;
	border-bottom: 1px solid var(--lp-border);
}
.lp-serp-demo__dots {
	display: flex;
	gap: 0.35rem;
	flex-shrink: 0;
}
.lp-serp-demo__dots span {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: #d1d5db;
	display: block;
}
.lp-serp-demo__url {
	background: #fff;
	border-radius: 50rem;
	padding: 0.3rem 1rem;
	font-size: 0.78rem;
	color: #5f6368;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border: 1px solid #e0e0e0;
}

.lp-serp-demo__searchbar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1.25rem auto 0.5rem;
	max-width: 30rem;
	border: 1px solid var(--lp-border);
	border-radius: 50rem;
	padding: 0.55rem 1.1rem;
	color: #3c4043;
	font-size: 0.95rem;
}
.lp-serp-demo__searchbar svg {
	color: #9aa0a6;
	flex-shrink: 0;
}

.lp-serp-demo__caption {
	text-align: center;
	font-size: 0.75rem;
	color: #9aa0a6;
	margin-bottom: 1rem;
}

.lp-serp-demo__results {
	position: relative;
	margin: 0 1rem 1.25rem;
	--lp-row-h: 4.6rem;
	height: calc(var(--lp-row-h) * 5);
}

.lp-serp-row {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--lp-row-h);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	padding: 0.5rem 0.85rem;
	border-radius: 0.5rem;
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.4s ease, box-shadow 0.4s ease;
	will-change: transform;
}

/* Rows animate between fixed-height slots, so their text must stay on one
   line — otherwise a wrapped title/description on a narrow phone would
   spill into the row below it. */
.lp-serp-row__url,
.lp-serp-row__title,
.lp-serp-row__desc {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lp-serp-row__url {
	font-size: 0.78rem;
	color: #006621;
}
.lp-serp-row__title {
	font-size: 1rem;
	color: #1a0dab;
	font-weight: 500;
}
.lp-serp-row__desc {
	font-size: 0.8rem;
	color: #4d5156;
}

.lp-serp-row--you {
	background: rgba(255, 195, 0, 0.1);
	box-shadow: inset 0 0 0 1px rgba(255, 195, 0, 0.4);
}
.lp-serp-row--you .lp-serp-row__title {
	color: var(--lp-ink);
	font-weight: 700;
}
.lp-serp-row--you .lp-serp-row__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: var(--lp-yellow);
	color: #14110a;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.15rem 0.55rem;
	border-radius: 50rem;
	margin-left: 0.5rem;
}
.lp-serp-row--you.is-top {
	box-shadow: inset 0 0 0 1.5px rgba(255, 195, 0, 0.7), 0 8px 20px rgba(255, 195, 0, 0.25);
}

.lp-serp-demo__status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1rem 1.5rem;
	font-weight: 600;
	color: var(--lp-ink);
	font-size: 0.95rem;
}
.lp-serp-demo__status strong {
	color: #b8860b;
	font-size: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
	.lp-serp-row {
		transition: none;
	}
}

/* ==========================================================================
   Process steps
   ========================================================================== */

.lp-process {
	background: #f2f4f7;
}

.lp-timeline {
	position: relative;
	max-width: 40rem;
	margin: 0 auto;
}

/* Static grey rail behind every step, plus a yellow "fill" that grows
   downward (in JS, to the exact centre of each circle) as steps reveal. */
.lp-timeline__track {
	position: absolute;
	left: 1.375rem;
	top: 1.375rem;
	bottom: 1.375rem;
	width: 3px;
	background: rgba(23, 35, 61, 0.12);
	border-radius: 2px;
	transform: translateX(-50%);
}
.lp-timeline__fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, var(--lp-yellow), var(--lp-yellow-bright));
	box-shadow: 0 0 8px rgba(255, 195, 0, 0.5);
	border-radius: 2px;
	transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-timeline-step {
	position: relative;
	padding-left: 3.75rem;
	padding-bottom: 2.75rem;
}
.lp-timeline-step:last-child {
	padding-bottom: 0;
}

.lp-timeline-step__num {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--lp-yellow);
	color: #14110a;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	box-shadow: 0 0 14px 2px rgba(255, 195, 0, 0.35);
	z-index: 1;
	opacity: 1;
	transform: scale(1);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
.lp-timeline-step__body {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hidden entrance state only applies once JS confirms it can reveal steps
   again on scroll — never hide content behind a state only JS can undo. */
.js .lp-timeline-step__num {
	opacity: 0;
	transform: scale(0.5);
}
.js .lp-timeline-step__body {
	opacity: 0;
	transform: translateY(14px);
}
.js .lp-timeline-step.is-visible .lp-timeline-step__num {
	opacity: 1;
	transform: scale(1);
}
.js .lp-timeline-step.is-visible .lp-timeline-step__body {
	opacity: 1;
	transform: translateY(0);
}

.lp-timeline-step__body h3 {
	font-size: 1.05rem;
	color: var(--lp-ink);
	margin-bottom: 0.35rem;
}
.lp-timeline-step__body p {
	color: var(--lp-text-muted);
	font-size: 0.92rem;
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.js .lp-timeline-step__num,
	.js .lp-timeline-step__body {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.lp-timeline__fill {
		transition: none !important;
		height: 100% !important;
	}
}

/* ==========================================================================
   FAQ accordion — themed via Bootstrap's own accordion CSS variables
   ========================================================================== */

.lp-faq {
	--bs-accordion-bg: #fff;
	--bs-accordion-border-color: var(--lp-border);
	--bs-accordion-border-radius: 0.85rem;
	--bs-accordion-inner-border-radius: 0.78rem;
	--bs-accordion-color: var(--lp-text-muted);
	--bs-accordion-btn-padding-x: 1.5rem;
	--bs-accordion-btn-padding-y: 1.2rem;
	--bs-accordion-body-padding-x: 1.5rem;
	--bs-accordion-body-padding-y: 1.1rem;
	--bs-accordion-active-bg: rgba(255, 195, 0, 0.08);
	--bs-accordion-active-color: var(--lp-ink);
	--bs-accordion-btn-color: var(--lp-ink);
	--bs-accordion-btn-focus-border-color: var(--lp-yellow);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.25);
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317233d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2392660a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
	overflow: hidden;
	border: 1px solid var(--lp-border);
	box-shadow: 0 12px 30px rgba(23, 35, 61, 0.07);
}
.lp-faq .accordion-item {
	transition: background-color 0.15s ease;
}
.lp-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
	box-shadow: inset 3px 0 0 var(--lp-yellow);
}
.lp-faq .accordion-button {
	font-size: 1.02rem;
	font-weight: 600;
}
.lp-faq .accordion-button:not(.collapsed) {
	box-shadow: none;
	font-weight: 700;
}
.lp-faq .accordion-button:hover {
	background-color: rgba(255, 195, 0, 0.05);
}
.lp-faq .accordion-body {
	padding-top: 1.1rem;
}

/* ==========================================================================
   Final CTA band
   ========================================================================== */

.lp-final-cta {
	background: var(--lp-black);
	color: #fff;
	border-top: 1px solid var(--lp-border-dark);
}
.lp-seo-page main .lp-final-cta h2 {
	color: #fff;
	font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.lp-footer {
	background: var(--lp-black);
	color: rgba(255, 255, 255, 0.65);
	padding-block: 2rem;
	font-size: 0.9rem;
}
.lp-footer a {
	color: #fff;
	text-decoration: none;
}
.lp-footer a:hover {
	color: var(--lp-yellow-bright);
}

/* ==========================================================================
   Mobile sticky CTA bar
   ========================================================================== */

.lp-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1040;
	background: #fff;
	box-shadow: 0 -6px 20px rgba(23, 35, 61, 0.15);
	padding: 0.6rem 0.85rem;
}
.lp-sticky-cta .lp-btn-cta {
	width: 100%;
	text-align: center;
}

@media (min-width: 992px) {
	.lp-sticky-cta {
		display: none;
	}
}
@media (max-width: 991.98px) {
	.lp-seo-page {
		padding-bottom: 4.2rem;
	}
}