/**
 * Final CTA — template-parts/final-cta.php, front-page.php only, the
 * last content section before the footer.
 *
 * Reused as-is, nothing redefined except the card radius (bumped to
 * radius-xl to match the hero section's photo rounding): color/spacing/
 * type/shadow tokens, .container, .section, .section-label, .btn/
 * .btn--primary/.btn--lg, .star-rating (main.css). No new tokens.
 */

.final-cta__card {
	max-width: 44rem;
	margin-inline: auto;
	padding: var(--space-9) var(--space-6);
	text-align: center;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-xl);
	/* Flat offset shadow, not a soft blur — same "special moment, hard
	   elevation" language as the hero's panels and the pricing section's
	   "Populaire" card. */
	box-shadow: var(--shadow-hard);
	/* Flat low-opacity accent tint — deliberately NOT a gradient (this
	   brief explicitly rules out "a soft gradient glow"). 8% keeps the
	   resulting background close enough to --color-surface's luminance
	   that every text-contrast ratio already verified for --color-text/
	   --color-text-muted on --color-surface still holds here without
	   needing separate re-verification. */
	background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

@media (min-width: 640px) {
	.final-cta__card {
		padding: var(--space-11) var(--space-9);
	}
}

/* No .final-cta__label centering rule needed: .section-label is
   inline-flex (main.css), so .final-cta__card's text-align: center
   already centers the whole badge. */

.final-cta__title {
	max-width: 26ch;
	margin-inline: auto;
}

.final-cta__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.final-cta__proof-text {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.final-cta__proof-text strong {
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

.final-cta__proof-divider {
	color: var(--color-text-faint);
}

/* Block-level flex + auto margins centers the button on the card itself,
   and max-width + wrapping keeps it inside the card on narrow screens —
   .btn's nowrap plus uppercase tracking otherwise overflows it. */
.final-cta__button {
	display: flex;
	width: fit-content;
	max-width: 100%;
	margin: var(--space-7) auto 0;
	white-space: normal;
	text-align: center;
	line-height: 1.2;
}

.final-cta__reassurance {
	margin-top: var(--space-4);
	font-size: var(--fs-xs);
	color: var(--color-text-faint);
}