/* =============================================================================
 * Block: Vision — centered card.  Handle: pb-ll-vision-centered
 *
 * Centered section header above a single full-width, bordered, rounded white
 * card holding multiple body paragraphs over a faint decorative mesh. Matches
 * the Fitness §09 "Future Vision" cut (card #ffffff, ink #1d2433, faint mesh).
 *
 * Self-contained: the design palette is scoped to .block-ll-vision-centered (no
 * :root leak) and the font is var(--ll-font, <literal Montserrat stack>) so the
 * block styles correctly even without the shared tokens sheet (e.g. inserter
 * preview). A per-page override hook class (<page-slug>-ll-vision-centered) is
 * also printed on the section so a specific page can layer overrides.
 * ========================================================================== */
.block-ll-vision-centered {
	--c-ink: #1d2433;
	--c-muted: #768297;
	--c-grey1: #f7f8fa;
	--c-body: #1d2433;
	--c-stroke: #e5e7eb;
	--c-white: #fff;
}

/* Shared section header */
.block-ll-vision-centered .block-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	text-align: center;
}
.block-ll-vision-centered .block-head__eyebrow {
	font: 700 12px/16px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #768297;
}
.block-ll-vision-centered .block-head__title {
	margin: 0;
	font: 600 36px/48px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	letter-spacing: -1px;
	color: #1d2433;
}
.block-ll-vision-centered .block-head__subtitle {
	margin: 0;
	font: 400 16px/27px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: #566072;
}
@media (max-width: 1024px) {
	.block-ll-vision-centered .block-head__title { font-size: 30px; line-height: 40px; }
}
@media (max-width: 767px) {
	.block-ll-vision-centered .block-head__title { font-size: 24px; line-height: 32px; letter-spacing: -0.5px; }
}

/* Vision — centered card */
.block-ll-vision-centered {
	background: var(--c-grey1);
	padding: 70px 0;
}
.block-ll-vision-centered__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}
.block-ll-vision-centered .block-head { max-width: 888px; }
.block-ll-vision-centered__box {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: var(--c-white);
	border: 1px solid var(--c-stroke);
	border-radius: 20px;
	padding: 32px 40px;
}
.block-ll-vision-centered__mesh {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
	opacity: 0.28;
	pointer-events: none;
	user-select: none;
}
.block-ll-vision-centered__text { position: relative; z-index: 1; }
.block-ll-vision-centered__text p {
	margin: 0 0 16px;
	font: 400 16px/27px var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	color: var(--c-body);
}
.block-ll-vision-centered__text p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
 * OPT-IN centered CTA button (fvc_cta). AI-Marketing §11. The __inner is a
 * centered flex column, so the button sits centered below the card by default.
 * -------------------------------------------------------------------------- */
.block-ll-vision-centered__cta { display: flex; justify-content: center; }
.block-ll-vision-centered__cta-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 34px;
	border-radius: 999px;
	background: #1690d3;
	color: #ffffff;
	font: 600 16px/1 var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	text-decoration: none;
	transition: opacity .15s ease;
}
.block-ll-vision-centered__cta-btn:hover { opacity: .9; }

@media (max-width: 1024px) {
	.block-ll-vision-centered { padding: 56px 0; }
	.block-ll-vision-centered__inner { padding: 0 40px; gap: 32px; }
	.block-ll-vision-centered__box { padding: 28px 28px; }
}
@media (max-width: 767px) {
	.block-ll-vision-centered { padding: 44px 0; }
	.block-ll-vision-centered__inner { padding: 0 20px; gap: 24px; }
	.block-ll-vision-centered__box { padding: 24px 20px; }
	.block-ll-vision-centered__text p { font-size: 15px; line-height: 24px; }
}