/* Shared base for every landing package (landings/<slug>/).
 * Packages set the --landing-* tokens on .vision-landing--<slug>. */

.vision-landing-page main {
	padding: 0;
}

.vision-landing {
	--landing-primary: #193b8d;
	--landing-accent: #79c26b;
	--landing-bg: #fff;
	--landing-body: #4f5c79;
	--landing-font-heading: sans-serif;
	--landing-font-body: sans-serif;
	--landing-h2: 700 32px/1.3 var(--landing-font-heading);
	--landing-body-14: 400 14px/1.5 var(--landing-font-body);
	--landing-container: min(1280px, calc(100% - 48px));
	/* Whole landing caps at this width on wide screens (packages may override). */
	/* --landing-max: 1600px; */

	width: 100%;
	max-width: var(--landing-max);
	margin: 0 auto;
	overflow-x: clip; /* section art that bleeds past the edges stops at the frame */
	background: var(--landing-bg);
	color: var(--landing-body);
	font: var(--landing-body-14);
}

.vision-landing *,
.vision-landing *::before,
.vision-landing *::after {
	box-sizing: border-box;
}

.vision-landing img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Blocksy colours h1–h6 site-wide; in a landing a heading takes its section's colour
 * unless the package styles it (:where keeps this rule weaker than any class). */
.vision-landing :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Blocksy's blockquote styling (side border, quote mark) is not part of any landing design. */
.vision-landing :where(blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.vision-landing :where(blockquote)::before,
.vision-landing :where(blockquote)::after {
	content: none;
}

.vision-landing h1,
.vision-landing h2,
.vision-landing h3,
.vision-landing p,
.vision-landing dl,
.vision-landing dd,
.vision-landing ul {
	margin: 0;
}

.vision-landing__container {
	width: var(--landing-container);
	margin-inline: auto;
}

.vision-landing__heading {
	color: var(--landing-primary);
	font: var(--landing-h2);
	letter-spacing: 0;
}

.vision-landing__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 100px;
	background: var(--landing-accent);
	color: var(--landing-bg);
	font: 600 16px/1.3 var(--landing-font-body);
	letter-spacing: 0.16px;
	text-decoration: none;
	text-transform: uppercase;
	transition: filter .2s ease;
}

.vision-landing__button:hover,
.vision-landing__button:focus-visible {
	color: var(--landing-bg);
	filter: brightness(.92);
}

.vision-landing .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.vision-landing {
		--landing-h2: 700 24px/1.3 var(--landing-font-heading);
	}
}