/*--------------------------------------------------------------
# Block contents
--------------------------------------------------------------*/
.lp-multi-column {
	display: flex;
	padding-block: var(--margin-vertical-wider);
	padding-inline: 4vw;
}

.lp-multi-column .block-contents {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
	gap: var(--lp-space-content, calc(2rem + 1.5em));
}

.lp-multi-column__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--max-width-narrow);
}

/* The section intro's rhythm (2026-09-29): set on each element by what it
follows, from the generated pages' tokens (inc/look.php density presets),
instead of the margins each element carried. The fallbacks keep a page
without a preset close to the older spacing. */
.lp-multi-column__intro > * {
	margin-block: 0;
}

.lp-multi-column__intro > .lp-multi-column__eyebrow {
	margin-block: 0 var(--lp-space-eyebrow, 0.75rem);
}

.lp-multi-column__intro > .lp-multi-column__sub-header {
	margin-top: var(--lp-space-intro, 0.5rem);
}

.lp-multi-column__intro > .lp-multi-column__body {
	margin-top: var(--lp-space-intro, 1em);
}

.lp-multi-column__body p {
	margin-block: 0;
}

.lp-multi-column__body p + p {
	margin-top: var(--lp-space-paragraph, 1.5em);
}

/* The intro beside the heading (2026-10-12, from the modern gap mockups):
the eyebrow, heading and sub header on the left, the text on the right,
their bottoms on one line, across the section's width. Below 900px the
intro stacks as it always did, left aligned. */
@media screen and (min-width: 900px) {
	.lp-multi-column--intro-beside .lp-multi-column__intro {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(32px, 6vw, 96px);
		align-items: end;
		width: 100%;
		max-width: none;
		text-align: left;
	}

	.lp-multi-column--intro-beside .lp-multi-column__intro > * {
		grid-column: 1;
		justify-self: start;
		max-width: 15em;
		text-align: left;
	}

	.lp-multi-column--intro-beside .lp-multi-column__intro > .lp-multi-column__eyebrow {
		max-width: none;
	}

	.lp-multi-column--intro-beside .lp-multi-column__intro > .lp-multi-column__body {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: end;
		max-width: 34em;
		margin: 0;
	}
}

@media screen and (max-width: 899px) {
	.lp-multi-column--intro-beside .lp-multi-column__intro,
	.lp-multi-column--intro-beside .lp-multi-column__intro > * {
		align-items: flex-start;
		text-align: left;
	}
}

/* Grid Layout
--------------------------------------------- */
/* The grid is centred even when the items' text is left aligned
(2026-09-28). Two tracks per column: every item spans two, so a short
last row can start half a column in and sit in the middle. For N
columns the first item of a last row holding k items starts at track
N - k + 1. A pair of columns also gets a narrower grid, so two short
items do not stretch across the whole container. Subgrid card rows are
untouched: only columns change. The timeline keeps its rows as they
are, since its connector runs from one step to the next. */
.lp-multi-column__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: var(--lp-grid-gap, 1.5rem);
	width: 100%;
}

.lp-multi-column__grid > * {
	grid-column: span 2;
}

.lp-multi-column--cols-2 .lp-multi-column__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 960px;
	margin-inline: auto;
}

.lp-multi-column--cols-4 .lp-multi-column__grid {
	grid-template-columns: repeat(8, minmax(0, 1fr));
}

.lp-multi-column--cols-5 .lp-multi-column__grid {
	grid-template-columns: repeat(10, minmax(0, 1fr));
}

@media screen and (min-width: 768px) {
	.lp-multi-column--cols-2:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(2n + 1):nth-last-child(1) { grid-column: 2 / span 2; }

	.lp-multi-column--cols-3:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(3n + 1):nth-last-child(1) { grid-column: 3 / span 2; }
	.lp-multi-column--cols-3:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }

	.lp-multi-column--cols-4:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(4n + 1):nth-last-child(1) { grid-column: 4 / span 2; }
	.lp-multi-column--cols-4:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(4n + 1):nth-last-child(2) { grid-column: 3 / span 2; }
	.lp-multi-column--cols-4:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(4n + 1):nth-last-child(3) { grid-column: 2 / span 2; }

	.lp-multi-column--cols-5:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(5n + 1):nth-last-child(1) { grid-column: 5 / span 2; }
	.lp-multi-column--cols-5:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(5n + 1):nth-last-child(2) { grid-column: 4 / span 2; }
	.lp-multi-column--cols-5:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(5n + 1):nth-last-child(3) { grid-column: 3 / span 2; }
	.lp-multi-column--cols-5:not(.lp-multi-column--timeline):not(.lp-multi-column--featured-tall) .lp-multi-column__grid > :nth-child(5n + 1):nth-last-child(4) { grid-column: 2 / span 2; }
}

/* Strip: a compact band with no intro, items in one row separated by
hairlines. Stats and trust badges under a hero. */
.lp-multi-column--strip {
	padding-block: var(--margin-vertical-normal, 50px);
}

.lp-multi-column--strip .lp-multi-column__grid {
	gap: 0;
}

.lp-multi-column--strip .lp-multi-column__grid > * {
	padding: 0.75rem 1.25rem;
	border-left: 1px solid var(--border-default, #6b717e);
}

.lp-multi-column--strip .lp-multi-column__grid > :first-child {
	border-left: 0;
}

/* Two columns on medium screens regardless of the setting (four
tracks, two per column); a last item on its own is centred. */
@media screen and (max-width: 767px) {
	.lp-multi-column__grid,
	.lp-multi-column--cols-2 .lp-multi-column__grid,
	.lp-multi-column--cols-4 .lp-multi-column__grid,
	.lp-multi-column--cols-5 .lp-multi-column__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lp-multi-column:not(.lp-multi-column--timeline) .lp-multi-column__grid > :nth-child(2n + 1):nth-last-child(1) {
		grid-column: 2 / span 2;
	}

	.lp-multi-column--strip .lp-multi-column__grid > * {
		border-left: 0;
		border-top: 1px solid var(--border-default, #6b717e);
	}

	.lp-multi-column--strip .lp-multi-column__grid > :nth-child(-n + 2) {
		border-top: 0;
	}

	/* Two per row (2026-09-29): a hairline between the pair as well. */
	.lp-multi-column--strip .lp-multi-column__grid > :nth-child(2n) {
		border-left: 1px solid var(--border-default, #6b717e);
	}
}

/* One column on small screens (two tracks); strips stay two per row. */
@media screen and (max-width: 500px) {
	.lp-multi-column__grid,
	.lp-multi-column--cols-2 .lp-multi-column__grid,
	.lp-multi-column--cols-4 .lp-multi-column__grid,
	.lp-multi-column--cols-5 .lp-multi-column__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-multi-column:not(.lp-multi-column--timeline) .lp-multi-column__grid > :nth-child(2n + 1):nth-last-child(1) {
		grid-column: span 2;
	}

	/* Stats and badges stay two per row on a phone (2026-09-29): one per
	row made four stats a 405px column. An odd last one is centred. */
	.lp-multi-column.lp-multi-column--strip .lp-multi-column__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lp-multi-column.lp-multi-column--strip:not(.lp-multi-column--timeline) .lp-multi-column__grid > :nth-child(2n + 1):nth-last-child(1) {
		grid-column: 2 / span 2;
	}
}

/* Lifted strip (2026-10-12, from the modern gap mockups): a strip straight
after the hero rises over the hero's bottom edge as one card of facts,
the items parted by the strip's hairlines; the hero makes room
(hero.css). The block's own band goes: the card is the strip. On phones
the card holds two by two, the hairlines between (the strip rules above).
--lp-lift is the overlap, shared with the hero. */
.lp-multi-column--lift,
.lp-hero:has(+ .lp-multi-column--lift) {
	--lp-lift: 72px;
}

.lp-multi-column.lp-multi-column--lift {
	position: relative;
	z-index: 4;
	margin-top: calc(-1 * var(--lp-lift));
	padding-top: 0;
	padding-bottom: clamp(24px, 4vw, 48px);
	background: transparent;
}

.lp-multi-column--lift .lp-multi-column__grid {
	padding: 24px 8px;
	border-radius: var(--card-radius, 12px);
	background: var(--surface-card, #fff);
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0 1px 4px);
}

@media screen and (max-width: 767px) {
	.lp-multi-column--lift,
	.lp-hero:has(+ .lp-multi-column--lift) {
		--lp-lift: 48px;
	}

	.lp-multi-column--lift .lp-multi-column__grid {
		padding: 16px 4px;
	}
}

/* The editor canvas wraps every block in its own element, and puts its
own space between them (28px above and below each): the lifted strip's
wrapper and the hero's before it close that gap, so the strip rises as
it does on the page. */
.editor-styles-wrapper .wp-block:has(> .lp-multi-column--lift) {
	margin-top: 0;
}

.editor-styles-wrapper .wp-block:has(+ .wp-block > .lp-multi-column--lift) {
	margin-bottom: 0;
}

/* Standard card
--------------------------------------------- */

/* TODO: Come up with global card color scheme */
.lp-multi-column__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--surface-card);
	border: var(--card-border, 0 solid transparent);
	border-top: var(--card-top, var(--card-border, 0 solid transparent));
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
	border-radius: var(--card-radius, 12px);
	overflow: hidden;
}

/* The photo takes the top of the card, about two fifths of a typical
card, as a fixed ratio rather than a fixed height so wide and narrow
columns keep the same shape. */
.lp-multi-column__card-img-wrapper {
	width: 100%;
	aspect-ratio: 16 / 10;
}

/* Background style: the photo fills the card, the text sits at the
bottom over a dark fade and reads light (the card carries is-dark). */
.lp-multi-column__card--image-background {
	position: relative;
	min-height: 320px;
	background: var(--neutral-400, #1e2023);
}

.lp-multi-column__card--image-background .lp-multi-column__card-img-wrapper {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}

.lp-multi-column__card--image-background .lp-multi-column__card-img-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.lp-multi-column__card--image-background .lp-multi-column__card-contents {
	position: relative;
	z-index: 1;
	justify-content: flex-end;
	color: var(--white, #fff);
}

.lp-multi-column__card--image-background .lp-multi-column__card-title,
.lp-multi-column__card--image-background .lp-multi-column__card-body {
	color: var(--white, #fff);
}

.lp-multi-column__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* This ensures that the card image is not set to height: auto
which happens by default in the block editor. */
.editor-styles-wrapper .lp-multi-column__card-img {
	height: 100%;
}

.lp-multi-column__card-contents {
	display: flex;
	flex-direction: column;
	gap: var(--lp-card-gap, 8px);
	padding: var(--lp-card-pad, 1.25rem);
	flex: 1;
}

/* FIXME: selector is temporary, without a.btn there is a specificity issue
where style.css will override any '.lp-multi-column__card-btn' selector here. */
a.btn.lp-multi-column__card-btn {
	align-self: flex-end;
	margin-top: auto;
}

/* Icon card
--------------------------------------------- */
.lp-multi-column__icon-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* The icon sits on a tinted shape chosen by the block's icon_shape field:
a circle by default, a rounded square with the same tint
(lp-multi-column--icon-square), or nothing at all
(lp-multi-column--icon-none), where the wrapper keeps its box so the
title and body stay on the same rows across a card row. */
.lp-multi-column__icon-wrapper {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	background-color: var(--brand-tint, #d5dce7);
	border-radius: 50%;
}

.lp-multi-column--icon-square .lp-multi-column__icon-wrapper {
	border-radius: 12px;
}

.lp-multi-column--icon-none .lp-multi-column__icon-wrapper {
	background-color: transparent;
	border-radius: 0;
}

.lp-multi-column__icon {
	max-width: 36px;
	max-height: 36px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.lp-multi-column--icon-none .lp-multi-column__icon {
	max-width: 60px;
	max-height: 60px;
}

/* An icon from the set by name (2026-10-04): inline SVG in the brand's
   colour, a finer line than the set's own on the light shape. A child
   theme's icon set supplies it (inc/icons.php). */
.lp-multi-column__icon--svg {
	display: block;
	width: 32px;
	height: 32px;
	max-width: none;
	max-height: none;
	color: var(--brand-default);
	stroke-width: 1.5;
}

.lp-multi-column--icon-none .lp-multi-column__icon--svg {
	width: 44px;
	height: 44px;
}

/* FIXME: selector is temporary, without a.btn there is a specificity issue
where style.css will override any '.lp-multi-column__icon-card-btn' selector
here. Pinned to the bottom so buttons align across a row of uneven cards.
Starts on the left with the icon and the text, one alignment per card. */
a.btn.lp-multi-column__icon-card-btn {
	align-self: flex-start;
	margin-top: auto;
}

/*--------------------------------------------------------------
# Background image
--------------------------------------------------------------*/
.lp-multi-column.anchor {
	position: relative;
}

.lp-multi-column__cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* This ensures that the cover image is not set to height: auto
which happens by default in the block editor. */
.editor-styles-wrapper .lp-multi-column__cover {
	height: 100%;
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/* Default Font Colors
--------------------------------------------- */
.lp-multi-column__eyebrow {
	text-align: center;
}

.lp-multi-column__header {
	font-size: var(--font-size-section-header, var(--font-size-h1, clamp(36px, 5vw, 60px)));
	font-weight: var(--font-weight-section-header, 700);
	color: var(--text-primary);
	text-align: center;
}

.lp-multi-column__sub-header {
	font-size: var(--font-size-section-sub-header, var(--font-size-h2, clamp(30px, 4vw, 48px)));
	font-weight: 400;
	color: var(--text-primary);
	text-align: center;
}

.lp-multi-column__body {
	color: var(--text-secondary);
	text-align: center;
}

.lp-multi-column__card-title {
	color: var(--text-primary);
}

/* Card titles (2026-09-29): one size and weight for every card type, a
step above body copy and well below the section header (22 against 17
and 40 in the regular density, a major third over body), semibold. From
the generated pages' tokens; without a preset each keeps its old size. */
.lp-multi-column__card-title,
.lp-multi-column__icon-card-title,
.lp-multi-column__numbered-card-title {
	font-size: var(--lp-card-title-size, var(--font-size-h3));
	font-weight: var(--lp-card-title-weight, 400);
	line-height: 1.25;
}

.lp-multi-column__pain-card-title,
.lp-multi-column__team-name {
	font-size: var(--lp-card-title-size, var(--font-size-h5, 20px));
	font-weight: var(--lp-card-title-weight, 400);
	line-height: 1.25;
}

.lp-multi-column__card-body {
	color: var(--text-secondary);
}

/* Card body paragraphs carry no outer margins (2026-09-29): the default
1em above and 1.5em below put 40px of air inside every card with a p,
most visibly between an icon card's title and its text. Two paragraphs
in one card get a short gap. */
.lp-multi-column__card-body p,
.lp-multi-column__icon-card-body p,
.lp-multi-column__numbered-card-body p,
.lp-multi-column__pain-card-body p {
	margin-block: 0;
}

.lp-multi-column__card-body p + p,
.lp-multi-column__icon-card-body p + p,
.lp-multi-column__numbered-card-body p + p,
.lp-multi-column__pain-card-body p + p {
	margin-top: 0.5em;
}

.lp-multi-column__icon-card-title {
	color: var(--text-primary);
}

.lp-multi-column__icon-card-body {
	color: var(--text-secondary);
}


/* Numbered card: steps, number from row position
--------------------------------------------- */
.lp-multi-column__numbered-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
}

.lp-multi-column__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--brand-default, #2f5387);
	color: var(--text-on-brand, #fff);
	font-family: var(--font-family-heading, inherit);
	font-size: var(--font-size-h4, 24px);
	font-weight: 700;
}

.lp-multi-column__numbered-card-title {
	color: var(--text-primary, #242527);
}

.lp-multi-column__numbered-card-body {
	color: var(--text-secondary, #6b717e);
}


/* Steps as cards (Isaac, 2026-09-29): on the grid layout each step is a
card like the others, number at the top left, with the cards' hover. The
timeline keeps its open, centred steps on the connector. */
.lp-multi-column--grid .lp-multi-column__numbered-card {
	align-items: flex-start;
	text-align: left;
	background-color: var(--surface-card, #fff);
	border: var(--card-border, 0 solid transparent);
	border-top: var(--card-top, var(--card-border, 0 solid transparent));
	border-radius: var(--card-radius, 12px);
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
	padding: var(--lp-card-pad, 1.5rem);
}

.lp-multi-column--grid .lp-multi-column__number {
	width: 48px;
	height: 48px;
	font-size: var(--font-size-h5, 20px);
}

.lp-multi-column.is-dark.lp-multi-column--grid .lp-multi-column__numbered-card {
	background-color: var(--lp-card-bg-dark);
	border: 1px solid var(--lp-card-border-dark);
	box-shadow: none;
}

/* Stat card: big number, short label
--------------------------------------------- */
.lp-multi-column__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25rem;
}

.lp-multi-column__stat-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
	margin-bottom: 0.5rem;
}

.lp-multi-column__stat-value {
	font-family: var(--font-family-heading, inherit);
	font-size: var(--font-size-h2, clamp(30px, 4vw, 48px));
	font-weight: 700;
	line-height: 1;
	color: var(--brand-default, #2f5387);
}

.is-dark .lp-multi-column__stat-value {
	color: var(--text-primary, #fff);
}

.lp-multi-column__stat-label {
	font-size: var(--font-size-small, 16px);
	color: var(--text-secondary, #6b717e);
}

/* The accent mark (2026-10-20, Isaac, the Wheel Equipment rebuild: option
1's product cards): a short bar in the accent's fill above each card's
title, in place of an icon. A shape, not text, so a light accent stays
itself. */
.lp-multi-column--marks :is(.lp-multi-column__card-title, .lp-multi-column__icon-card-title, .lp-multi-column__pain-card-title)::before {
	content: "";
	display: block;
	width: 28px;
	height: 5px;
	margin-bottom: 22px;
	background: var(--lp-accent-fill, var(--accent-300, #615ff8));
}

/* Pain point card: an accent bar, no icon. The bar is its own layer
(2026-09-29) so it can sit on any side (accent_position, left by default)
and, on hover, sweep through a gradient of the site's own colours (the
accent, the brand colour, the light accent) instead of vanishing with the
card border.
--------------------------------------------- */
.lp-multi-column__pain-card {
	--lp-accent-size: 4px;
	position: relative;
	overflow: hidden;
	background: var(--surface-card, #fff);
	border-radius: var(--card-radius, 12px);
	padding: var(--lp-card-pad, 1.25rem);
	padding-left: calc(var(--lp-card-pad, 1.25rem) + var(--lp-accent-size));
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.08) 0 1px 4px);
	display: flex;
	flex-direction: column;
	gap: var(--lp-card-gap, 8px);
	height: 100%;
}

.lp-multi-column__pain-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--lp-accent-size);
	background: linear-gradient(180deg, var(--accent-default, #615ff8) 0%, var(--accent-default, #615ff8) 33.3%, var(--brand-default, #2f5387) 66.6%, var(--accent-200, #a3a2ff) 100%);
	background-size: 100% 300%;
	background-position: 50% 0%;
	transition: background-position var(--motion-slow, 0.45s) ease, width var(--motion-fast, 0.2s) ease, height var(--motion-fast, 0.2s) ease;
}

.lp-multi-column__pain-card:hover::before {
	width: calc(var(--lp-accent-size) + 2px);
	background-position: 50% 100%;
}

.lp-multi-column--accent-right .lp-multi-column__pain-card {
	padding-left: var(--lp-card-pad, 1.25rem);
	padding-right: calc(var(--lp-card-pad, 1.25rem) + var(--lp-accent-size));
}

.lp-multi-column--accent-right .lp-multi-column__pain-card::before {
	left: auto;
	right: 0;
}

.lp-multi-column--accent-top .lp-multi-column__pain-card,
.lp-multi-column--accent-bottom .lp-multi-column__pain-card {
	padding-left: var(--lp-card-pad, 1.25rem);
}

.lp-multi-column--accent-top .lp-multi-column__pain-card {
	padding-top: calc(var(--lp-card-pad, 1.25rem) + var(--lp-accent-size));
}

.lp-multi-column--accent-bottom .lp-multi-column__pain-card {
	padding-bottom: calc(var(--lp-card-pad, 1.25rem) + var(--lp-accent-size));
}

.lp-multi-column--accent-top .lp-multi-column__pain-card::before,
.lp-multi-column--accent-bottom .lp-multi-column__pain-card::before {
	right: 0;
	bottom: auto;
	width: auto;
	height: var(--lp-accent-size);
	background-image: linear-gradient(90deg, var(--accent-default, #615ff8) 0%, var(--accent-default, #615ff8) 33.3%, var(--brand-default, #2f5387) 66.6%, var(--accent-200, #a3a2ff) 100%);
	background-size: 300% 100%;
	background-position: 0% 50%;
}

.lp-multi-column--accent-bottom .lp-multi-column__pain-card::before {
	top: auto;
	bottom: 0;
}

.lp-multi-column--accent-top .lp-multi-column__pain-card:hover::before,
.lp-multi-column--accent-bottom .lp-multi-column__pain-card:hover::before {
	width: auto;
	height: calc(var(--lp-accent-size) + 2px);
	background-position: 100% 50%;
}

@media (prefers-reduced-motion: reduce) {
	.lp-multi-column__pain-card::before {
		transition: none;
	}
}

.lp-multi-column__pain-card-title {
	color: var(--text-primary, #242527);
}

.lp-multi-column__pain-card-body {
	color: var(--text-secondary, #6b717e);
}


/* Badge: icon and a short label, the trust strip item
--------------------------------------------- */
.lp-multi-column__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	font-weight: 600;
	color: var(--text-primary, #242527);
}

.lp-multi-column__badge-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	flex: none;
}

/* Badge icon above the text (Style tab, 2026-09-28). */
.lp-multi-column--badge-icon-above .lp-multi-column__badge {
	flex-direction: column;
	gap: 8px;
}

.lp-multi-column--badge-icon-above .lp-multi-column__badge-icon {
	width: 32px;
	height: 32px;
}

/* Team card: portrait on top, name, role, one line. Same shell as the
standard card so the two mix in a row.
--------------------------------------------- */
.lp-multi-column__team-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--surface-card, #fff);
	border: var(--card-border, 0 solid transparent);
	border-top: var(--card-top, var(--card-border, 0 solid transparent));
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
	border-radius: var(--card-radius, 12px);
	overflow: hidden;
}

.lp-multi-column__team-img-wrapper {
	width: 100%;
	aspect-ratio: 1 / 1;
}

.lp-multi-column__team-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Editor canvas sets img height to auto; the crop needs the full box. */
.editor-styles-wrapper .lp-multi-column__team-img {
	height: 100%;
}

.lp-multi-column__team-name {
	color: var(--text-primary, #242527);
	margin: 0;
}

.lp-multi-column__team-role {
	color: var(--text-secondary, #6b717e);
	font-size: var(--font-size-small, 16px);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
}

.lp-multi-column__team-body {
	color: var(--text-secondary, #6b717e);
	margin: 0.25rem 0 0;
}

/* Rows line up across a row of cards. Each card is a subgrid spanning
one track per slot it can hold (image or icon or number, title, body,
button), and every child sits on its own track, so a title that wraps
in one card pushes the body down in all of them and a missing element
leaves its track empty rather than shifting the rest. The card's own
row-gap keeps the inner spacing the flex layout had; the flex rules
above stay as the fallback where subgrid is unsupported.
--------------------------------------------- */
@supports (grid-template-rows: subgrid) {
	/* No empty space from empty tracks (2026-09-29). Every card spans four
	tracks so rows line up, and the grid's row gap sat between all of
	them, so a card with no icon and no button carried about 68px of
	blank space, and stacked cards on a phone sat 90px apart with 8px
	between title and body. The grid's row gap is now zero and the space
	between card rows is each card's own bottom margin (the grid gives the
	last row's back); inside a card, spacing is margins on its parts. */
	.lp-multi-column:not(.lp-multi-column--strip) .lp-multi-column__grid {
		row-gap: 0;
		margin-block-end: calc(-1 * var(--lp-grid-gap, 1.5rem));
	}

	.lp-multi-column:not(.lp-multi-column--strip) .lp-multi-column__grid > * {
		margin-block-end: var(--lp-grid-gap, 1.5rem);
	}

	/* Standard and team cards: image, then a padded contents subgrid. */
	.lp-multi-column__card,
	.lp-multi-column__team-card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
		height: auto;
	}

	.lp-multi-column__card-img-wrapper,
	.lp-multi-column__team-img-wrapper {
		grid-row: 1;
	}

	.lp-multi-column__card-contents {
		grid-row: 2 / span 3;
		display: grid;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.lp-multi-column__card-title {
		margin-bottom: var(--lp-card-gap, 8px);
	}

	.lp-multi-column__team-name {
		margin-bottom: 4px;
	}

	.lp-multi-column__team-body {
		margin-top: var(--lp-card-gap, 12px);
	}

	.lp-multi-column__card-title,
	.lp-multi-column__team-name {
		grid-row: 1;
	}

	.lp-multi-column__card-body,
	.lp-multi-column__team-role {
		grid-row: 2;
	}

	a.btn.lp-multi-column__card-btn,
	.lp-multi-column__team-body {
		grid-row: 3;
	}

	a.btn.lp-multi-column__card-btn {
		align-self: end;
		justify-self: end;
		margin-top: var(--lp-card-gap, 8px);
	}

	/* Icon card: icon, title, body, button. */
	.lp-multi-column__icon-card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
	}

	.lp-multi-column__icon-wrapper {
		grid-row: 1;
	}

	.lp-multi-column__icon-card-title {
		grid-row: 2;
		margin-bottom: var(--lp-card-gap, 0);
	}

	.lp-multi-column__icon-card-body {
		grid-row: 3;
	}

	a.btn.lp-multi-column__icon-card-btn {
		grid-row: 4;
		align-self: end;
		justify-self: start;
		margin-top: 1rem;
	}

	/* Numbered card: number, title, body, an empty fourth track. Every
	card type spans the same four tracks (media, title, body, extra) so a
	row that mixes types still lines up; before 2026-09-26 the spans
	differed (4, 3, 2) and a mixed row staggered into a bento. */
	.lp-multi-column__numbered-card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
		justify-items: center;
	}

	.lp-multi-column--grid .lp-multi-column__numbered-card {
		justify-items: start;
	}

	.lp-multi-column__number {
		grid-row: 1;
		margin-bottom: 0.75rem;
	}

	.lp-multi-column__numbered-card-title {
		grid-row: 2;
		margin-bottom: var(--lp-card-gap, 0.75rem);
	}

	.lp-multi-column__numbered-card-body {
		grid-row: 3;
	}

	/* Pain card: no media, so the title sits on the second track like
	every other title and the body on the third. */
	.lp-multi-column__pain-card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
		height: auto;
	}

	.lp-multi-column__pain-card-title {
		grid-row: 2;
		margin-bottom: var(--lp-card-gap, 8px);
	}

	.lp-multi-column__pain-card-body {
		grid-row: 3;
	}

	/* Stats and badges have no inner tracks; they span the same four so
	a stray one in a card row cannot stagger it. */
	.lp-multi-column__stat,
	.lp-multi-column__badge {
		grid-row: span 4;
	}

	/* The background image card keeps its own box: one item spanning the
	tracks, contents flowing to the bottom rather than on the tracks. */
	.lp-multi-column__card--image-background {
		display: flex;
		flex-direction: column;
	}

	.lp-multi-column__card--image-background .lp-multi-column__card-contents {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}

/* Why us on a dark band: icon cards become frosted panels. The panel's
colours are variables so the hover can shift them (components/motion.css,
2026-09-29) instead of taking the light card colour.
--------------------------------------------- */
.lp-multi-column.is-dark {
	--lp-card-bg-dark: hsl(0 0% 100% / 0.06);
	--lp-card-border-dark: hsl(0 0% 100% / 0.14);
}

.lp-multi-column.is-dark .lp-multi-column__icon-card {
	background: var(--lp-card-bg-dark);
	border: 1px solid var(--lp-card-border-dark);
	border-top: var(--card-top, 1px solid var(--lp-card-border-dark));
	border-radius: var(--card-radius, 12px);
	padding: var(--lp-card-pad, 1.5rem);
}

/* The icon shape on a dark band reads as a lighter frosted step rather
than the dark brand tint the .is-dark tokens would give it. */
.lp-multi-column.is-dark .lp-multi-column__icon-wrapper {
	background-color: rgba(255, 255, 255, 0.12);
}

.lp-multi-column.is-dark.lp-multi-column--icon-none .lp-multi-column__icon-wrapper {
	background-color: transparent;
}

.lp-multi-column.is-dark .lp-multi-column__icon--svg {
	color: #fff;
}

/* Timeline: the grid of numbered steps joined by a line through the
numbers. Horizontal on wide screens, one connector per step except the
last; vertical below the breakpoint with the number on the left. Other
card layouts on a timeline block render as the plain grid.
--------------------------------------------- */
.lp-multi-column--timeline .lp-multi-column__grid {
	position: relative;
}

.lp-multi-column--timeline .lp-multi-column__numbered-card {
	position: relative;
}

@media screen and (min-width: 768px) {
	/* The connector runs from the centre of this number to the next. */
	.lp-multi-column--timeline .lp-multi-column__numbered-card:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 28px;
		left: 50%;
		width: calc(100% + var(--lp-grid-gap, 1.5rem));
		height: 2px;
		background: var(--border-default, #b7b8b9);
		z-index: 0;
	}

	.lp-multi-column--timeline .lp-multi-column__number {
		position: relative;
		z-index: 1;
		box-shadow: 0 0 0 6px var(--surface-page, #fff);
	}

	.lp-multi-column--timeline.lp-block--has-bg .lp-multi-column__number {
		box-shadow: 0 0 0 6px var(--surface-subtle, #f3f4f6);
	}

	.lp-multi-column--timeline.is-dark .lp-multi-column__number {
		box-shadow: 0 0 0 6px var(--surface-page, #1e2023);
	}
}

@media screen and (max-width: 767px) {
	.lp-multi-column--timeline .lp-multi-column__grid {
		gap: 0;
	}

	/* The vertical timeline spaces its steps with padding, so its
	connector runs unbroken: no card margins here. */
	.lp-multi-column.lp-multi-column--timeline .lp-multi-column__grid,
	.lp-multi-column.lp-multi-column--timeline .lp-multi-column__grid > * {
		margin-block-end: 0;
	}

	.lp-multi-column--timeline .lp-multi-column__numbered-card {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 1rem;
		row-gap: 0.25rem;
		text-align: left;
		align-items: start;
		padding-bottom: 1.5rem;
	}

	.lp-multi-column--timeline .lp-multi-column__number {
		grid-row: 1 / span 2;
		width: 44px;
		height: 44px;
		font-size: var(--font-size-h5, 20px);
		position: relative;
		z-index: 1;
	}

	.lp-multi-column--timeline .lp-multi-column__numbered-card:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 44px;
		bottom: 0;
		left: 21px;
		width: 2px;
		background: var(--border-default, #b7b8b9);
	}

	.lp-multi-column--timeline .lp-multi-column__numbered-card-title {
		grid-column: 2;
		align-self: center;
	}

	.lp-multi-column--timeline .lp-multi-column__numbered-card-body {
		grid-column: 2;
	}
}

/* Spotlight (2026-09-29): a card reached from the page header's card
   dropdown stays at full strength and its neighbours fade until the
   visitor hovers another card, taps, or scrolls out of the section. The
   page header's script sets the classes; without it nothing fades. */
.lp-multi-column__grid > * {
	transition: opacity 0.3s ease;
}
.lp-multi-column__grid.has-spotlight > :not(.is-spotlight) {
	opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
	.lp-multi-column__grid > * { transition: none; }
}

/* Price cards (2026-10-08, from ~/Desktop/Featured cards review/): a row
of nothing but price cards is a pricing row, its own grid outside the
paired tracks and subgrid rows above. One card centred for a single
offer, two or three side by side, four in a row; one featured (the
template decides which): the accent border, the filled button, and on
three a little taller. Built only on the theme's tokens, so the palette,
fonts, card preset and density carry through. The note and the list are
the body: its paragraph, then its list with a check per item. */
.lp-multi-column__pricing {
	display: grid;
	grid-template-columns: repeat(var(--lp-pricing-cols, 3), minmax(0, 1fr));
	gap: var(--lp-grid-gap, 24px);
	align-items: stretch;
	width: 100%;
	margin-inline: auto;
}

.lp-multi-column__pricing--1 {
	--lp-pricing-cols: 1;
	max-width: 560px;
}

.lp-multi-column__pricing--2 {
	--lp-pricing-cols: 2;
	max-width: 840px;
}

.lp-multi-column__pricing--4 {
	--lp-pricing-cols: 4;
}

.lp-multi-column__price {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(24px, 2.6vw, 36px);
	background-color: var(--surface-card, #fff);
	border: var(--card-border, 1px solid var(--border-default));
	border-radius: var(--card-radius, 12px);
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
	color: var(--text-primary);
}

.lp-multi-column__price.is-featured {
	border: 2px solid var(--cta-default);
	box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--cta-default) 60%, transparent);
}

.lp-multi-column__price-badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--accent-badge-bg);
	color: var(--accent-badge-text);
	font-family: var(--font-family-button);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-transform: uppercase;
}

.lp-multi-column__price.is-featured .lp-multi-column__price-badge {
	background: var(--cta-default);
	color: var(--cta-text, #fff);
}

.lp-multi-column__price-name {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-family-heading);
	font-size: var(--lp-card-title-size, 22px);
	font-weight: var(--lp-card-title-weight, 600);
	line-height: 1.25;
}

.lp-multi-column__price-value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 2px 0 0;
}

.lp-multi-column__price-amount {
	color: var(--text-primary);
	font-family: var(--font-family-heading);
	font-size: clamp(40px, 4.4vw, 58px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.lp-multi-column__price-words {
	color: var(--text-secondary);
	font-size: 15px;
	font-weight: 600;
}

.lp-multi-column__price-body {
	display: grid;
	gap: 14px;
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1.5;
}

.lp-multi-column__price-body > * {
	margin: 0;
}

.lp-multi-column__price-body p {
	color: var(--text-secondary);
	font-size: 16px;
}

/* Above the theme's list rule (.lp-block :is(ul, ol):not([class])). */
.lp-multi-column .lp-multi-column__price-body ul:not([class]) {
	display: grid;
	gap: 10px;
	padding: 18px 0 0;
	border-top: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
	list-style: none;
}

.lp-multi-column .lp-multi-column__price-body li {
	position: relative;
	margin: 0;
	padding-left: 28px;
	color: var(--text-primary);
	font-size: 16px;
	line-height: 1.45;
}

.lp-multi-column__price-body li::before {
	content: "";
	position: absolute;
	top: 0.12em;
	left: 0;
	width: 18px;
	height: 18px;
	background-color: var(--cta-default);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.lp-multi-column__price-actions {
	display: grid;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
}

.lp-multi-column__price-actions .btn {
	display: block;
	margin: 0;
	text-align: center;
}

.lp-multi-column__price-small {
	margin: 0;
	color: var(--text-secondary);
	font-size: 14px;
	text-align: center;
}

/* One offer: centred, like an invitation. */
.lp-multi-column__pricing--1 .lp-multi-column__price {
	align-items: center;
	text-align: center;
}

.lp-multi-column__pricing--1 .lp-multi-column__price-badge {
	align-self: center;
}

.lp-multi-column__pricing--1 .lp-multi-column__price-value {
	justify-content: center;
}

.lp-multi-column__pricing--1 :is(.lp-multi-column__price-body, .lp-multi-column__price-actions) {
	width: 100%;
}

.lp-multi-column .lp-multi-column__pricing--1 .lp-multi-column__price-body ul:not([class]) {
	text-align: left;
}

/* Three: the featured one stands a little taller. */
@media screen and (min-width: 900px) {
	.lp-multi-column__pricing--3 .lp-multi-column__price.is-featured {
		margin-block: -12px;
		padding-block: calc(clamp(24px, 2.6vw, 36px) + 12px);
	}
}

/* Narrower: three and four stack in one centred column of cards. */
@media screen and (max-width: 899px) {
	.lp-multi-column__pricing--3,
	.lp-multi-column__pricing--4 {
		--lp-pricing-cols: 1;
		max-width: 560px;
	}
}

@media screen and (max-width: 767px) {
	.lp-multi-column__pricing {
		--lp-pricing-cols: 1;
	}
}

/* Logo cards (2026-10-09, from ~/Desktop/Calm tones review/): a row of
nothing but logo cards is a logo row, the reference's compact brand
cards: the logo up to 180 by 70, the name under it, the card on the
theme's tokens. Wide screens: side by side, centred, up to six. Phones:
the shared carousel (components/carousel.css, js/carousel.js), two and a
bit cards in view so the next one shows, with its dots. */
.lp-multi-column__logos {
	max-width: 900px;
	margin-inline: auto;
}

.lp-multi-column__logos .lp-carousel__track {
	gap: 20px;
	padding: 4px;
}

.lp-multi-column__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 12px 14px;
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-default);
	border-radius: var(--card-radius, 14px);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 10%, transparent);
	text-align: center;
}

.lp-multi-column__logo-img {
	display: block;
	width: 100%;
	max-width: 180px;
	height: 70px;
	object-fit: contain;
}

.lp-multi-column__logo-img--empty {
	display: grid;
	place-items: center;
	border: 1px dashed var(--border-default);
	border-radius: 8px;
	color: var(--text-secondary);
	font-size: 13px;
}

.lp-multi-column__logo-name {
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

@media screen and (min-width: 766px) {
	.lp-multi-column__logos .lp-carousel__track {
		display: grid;
		grid-template-columns: repeat(var(--lp-logo-cols, 3), minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
	}

	.lp-multi-column__logos--1 { --lp-logo-cols: 1; max-width: 300px; }
	.lp-multi-column__logos--2 { --lp-logo-cols: 2; max-width: 600px; }
	.lp-multi-column__logos--4 { --lp-logo-cols: 4; max-width: 1000px; }
	.lp-multi-column__logos--5 { --lp-logo-cols: 5; max-width: 1100px; }
	.lp-multi-column__logos--6 { --lp-logo-cols: 6; max-width: 1200px; }

	.lp-multi-column__logos .lp-carousel__nav {
		display: none;
	}
}

@media screen and (max-width: 765px) {
	.lp-multi-column__logos .lp-carousel__track {
		gap: 12px;
	}

	.lp-multi-column__logos .lp-carousel__slide {
		flex: 0 0 calc((100% - 24px) / 2.4);
	}

	.lp-multi-column__logo {
		padding: 14px 8px 12px;
	}

	.lp-multi-column__logo-img {
		height: 48px;
	}

	.lp-multi-column__logo-name {
		font-size: 13px;
	}

	.lp-multi-column__logos .lp-carousel__button {
		display: none;
	}
}

/* Icon cards in a card (2026-10-09, the block's Icon cards setting): the
page's card style around each icon card on a light band, as the
testimonials and standard cards have it: the card colour, the preset's
border and accent bar, its radius and shadow. Dark bands box them
already (above). */
.lp-multi-column--icon-cards-boxed:not(.is-dark) .lp-multi-column__icon-card {
	height: 100%;
	padding: var(--lp-card-pad, 1.5rem);
	background-color: var(--surface-card);
	border: var(--card-border, 0 solid transparent);
	border-top: var(--card-top, var(--card-border, 0 solid transparent));
	border-radius: var(--card-radius, 12px);
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
}

/* Numbered icon cards (2026-10-12, the block's Numbers switch, from the
modern gap mockups): the card's number large and faint in its top corner,
a kicker line above the title. Open cards keep the number at their edge;
boxed and dark cards inset it by their padding. The kicker and title sit
in one wrapper on the title's subgrid track, so rows still line up. */
.lp-multi-column--numbered .lp-multi-column__icon-card {
	position: relative;
}

.lp-multi-column__icon-card-number {
	position: absolute;
	top: var(--lp-number-inset, 0);
	right: var(--lp-number-inset, 0);
	font-family: var(--font-family-heading, inherit);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: color-mix(in srgb, var(--brand-default, #2f5387) 16%, transparent);
	pointer-events: none;
}

.lp-multi-column--icon-cards-boxed .lp-multi-column__icon-card,
.lp-multi-column.is-dark .lp-multi-column__icon-card {
	--lp-number-inset: var(--lp-card-pad, 1.5rem);
}

.lp-multi-column.is-dark .lp-multi-column__icon-card-number {
	color: rgb(255 255 255 / 0.16);
}

.lp-multi-column__icon-card-kicker {
	margin: 0 0 4px;
	font-family: var(--font-family-button);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-accent);
}

@supports (grid-template-rows: subgrid) {
	.lp-multi-column__icon-card-heading {
		grid-row: 2;
	}
}

/* The featured first card (2026-10-14, the block's Feature the first card
switch, from the modern gap mockups): the first icon card drawn in the
accent (the fill and its ink, style.css), its figure and label at the
bottom. With a figure to fill the height it stands two card rows tall
(eight subgrid tracks) in one column from 1024px, the grid flowing
densely around it (the block's --featured-tall); the last row's centring
above skips those grids, since the dense flow fills the rows. Without a
figure the card keeps its row, as the automatic first card did. The card leaves the subgrid for a flex column, so its figure can
sit at its foot. */
/* The block class is part of the selector so the card wins over the dark
band's and the boxed style's own card rules at equal specificity. */
.lp-multi-column .lp-multi-column__icon-card.is-featured {
	display: flex;
	flex-direction: column;
	padding: var(--lp-card-pad, 1.5rem);
	border: 1px solid transparent;
	border-radius: var(--card-radius, 12px);
	color: var(--lp-accent-ink, #fff);
	background: var(--lp-accent-fill, var(--accent-300));
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
}

.lp-multi-column__icon-card.is-featured :is(.lp-multi-column__icon-card-title, h3),
.lp-multi-column__icon-card.is-featured .lp-multi-column__icon-card-body,
.lp-multi-column__icon-card.is-featured .lp-multi-column__icon-card-kicker {
	color: inherit;
}

.lp-multi-column .lp-multi-column__icon-card.is-featured .lp-multi-column__icon-wrapper {
	background-color: color-mix(in srgb, var(--lp-accent-ink, #fff) 16%, transparent);
}

.lp-multi-column .lp-multi-column__icon-card.is-featured .lp-multi-column__icon--svg {
	color: inherit;
}

.lp-multi-column__icon-card.is-featured .lp-multi-column__icon-card-number {
	color: color-mix(in srgb, var(--lp-accent-ink, #fff) 20%, transparent);
}

.lp-multi-column__icon-card-figure {
	display: flex;
	flex-direction: column;
	margin: auto 0 0;
	padding-top: 24px;
}

.lp-multi-column__icon-card-figure-value {
	font-family: var(--font-family-heading, inherit);
	font-size: clamp(56px, 6vw, 88px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.lp-multi-column__icon-card-figure-label {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media screen and (min-width: 1024px) {
	.lp-multi-column--featured-tall .lp-multi-column__grid {
		grid-auto-flow: row dense;
	}

	@supports (grid-template-rows: subgrid) {
		.lp-multi-column--featured-tall .lp-multi-column__icon-card.is-featured {
			grid-row: span 8;
		}
	}
}

/* Tabs (2026-10-14, the block's Tabs layout, from the modern gap mockups):
image cards as tabs. The tab list (each card's title and its Tab icon) on
the left from 900px, one card open beside it as a panel, the photo beside
the text, with the card's Panel eyebrow, Panel heading and Panel tags; on
narrower screens the tab list is a row that scrolls sideways over the open
card. js/tabs.js unhides the list, marks the wrapper is-tabbed and hides
the closed panels. Without it every card shows, stacked in one column, a
card with its own heading under its tab's name; the editor canvas, which
runs no view script, shows the list beside every card, stacked, so each
card can be seen while it is edited in the sidebar.
--------------------------------------------- */
.lp-multi-column__tabs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	width: 100%;
	text-align: left;
}

@media screen and (min-width: 900px) {
	.lp-multi-column__tabs:has(> .lp-multi-column__tablist:not([hidden])) {
		grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
		align-items: start;
	}
}

.lp-multi-column__tablist {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lp-multi-column__tablist[hidden] {
	display: none;
}

/* The block class lifts the tab over style.css's own button rules. */
.lp-multi-column .lp-multi-column__tab {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 8px 16px 8px 8px;
	border: var(--card-border, 0 solid transparent);
	border-radius: var(--card-radius, 12px);
	font-family: var(--font-family-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var(--text-primary);
	background: var(--surface-card, #fff);
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lp-multi-column__tab:not(:has(.lp-multi-column__tab-icon)) {
	padding-left: 16px;
}

.lp-multi-column__tab:hover {
	box-shadow: var(--card-hover-shadow, rgba(0, 0, 0, 0.18) 0px 10px 28px);
}

.lp-multi-column__tab:focus-visible {
	outline: 2px solid var(--primary-300);
	outline-offset: 2px;
}

.lp-multi-column__tab-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: var(--primary-300);
	background: color-mix(in srgb, var(--primary-300) 9%, transparent);
}

.lp-multi-column__tab-icon svg {
	width: 20px;
	height: 20px;
}

/* Modern's arrow on the open tab (styles/modern.css). */
.lp-multi-column__tab-arrow {
	display: none;
}

.lp-multi-column__tab[aria-selected="true"] {
	color: var(--text-on-brand, #fff);
	background: var(--primary-300);
	border-color: transparent;
}

.lp-multi-column__tab[aria-selected="true"] .lp-multi-column__tab-icon {
	color: inherit;
	background: rgb(255 255 255 / 0.14);
}

/* On a dark band the open tab takes the accent's fill and ink. */
.lp-multi-column.is-dark .lp-multi-column__tab-icon {
	color: var(--text-primary);
	background: rgb(255 255 255 / 0.1);
}

.lp-multi-column.is-dark .lp-multi-column__tab[aria-selected="true"] {
	color: var(--lp-accent-ink, #fff);
	background: var(--lp-accent-fill, var(--accent-300));
}

.lp-multi-column.is-dark .lp-multi-column__tab[aria-selected="true"] .lp-multi-column__tab-icon {
	color: inherit;
}

.lp-multi-column__panels {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* A card's tab name over it while the cards are stacked. */
.lp-multi-column__panel-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 -10px;
	font-family: var(--font-family-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text-primary);
}

.lp-multi-column__panel-tab:first-child {
	margin-top: 0;
}

.lp-multi-column__tabs.is-tabbed .lp-multi-column__panel-tab {
	display: none;
}

/* With the tab list showing (the canvas) the first card's tab is the open
one beside it, so that card needs no name over it: the canvas starts as
the page does, the other cards follow under their names. */
.lp-multi-column__tabs:has(> .lp-multi-column__tablist:not([hidden])) .lp-multi-column__panel-tab:first-child {
	display: none;
}

.lp-multi-column__panel[hidden] {
	display: none !important;
}

/* The panel leaves the card grid's subgrid for its own two columns. */
.lp-multi-column__tabs .lp-multi-column__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	grid-template-rows: auto;
	grid-row: auto;
	height: auto;
	margin: 0;
}

.lp-multi-column__tabs .lp-multi-column__panel:hover {
	transform: none;
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
}

.lp-multi-column__tabs .lp-multi-column__panel--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.lp-multi-column__tabs .lp-multi-column__card-img-wrapper {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	height: 100%;
	min-height: 360px;
	aspect-ratio: auto;
}

.lp-multi-column__tabs .lp-multi-column__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-multi-column__tabs .lp-multi-column__card-contents {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	padding: clamp(24px, 3.6vw, 48px);
}

.lp-multi-column__tabs .lp-multi-column__panel--no-image .lp-multi-column__card-contents {
	grid-column: 1;
}

.lp-multi-column__tabs .lp-multi-column__card-title {
	margin: 0 0 12px;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.15;
}

.lp-multi-column__tabs a.btn.lp-multi-column__card-btn {
	align-self: flex-start;
	justify-self: auto;
	margin-top: 12px;
}

.lp-multi-column__card-eyebrow {
	margin: 0 0 10px;
	font-family: var(--font-family-button);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-accent);
}

.lp-multi-column__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 8px;
	padding: 0;
	list-style: none;
}

.lp-multi-column__tags li {
	margin: 0;
}

.lp-multi-column__tags :is(a, span) {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--border-default);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-primary);
	text-decoration: none;
}

.lp-multi-column__tags a:hover {
	border-color: var(--primary-300);
	color: var(--primary-300);
}

/* What the editor needs to know (the canvas only). */
.lp-multi-column__note {
	margin: 0;
	padding: 10px 14px;
	border: 1px dashed var(--border-default);
	border-radius: 8px;
	font-size: 14px;
	color: var(--text-secondary);
}

@media screen and (max-width: 899px) {
	.lp-multi-column__tablist {
		flex-direction: row;
		overflow-x: auto;
		margin-inline: -4vw;
		padding: 4px 4vw 8px;
		scroll-padding-inline: 4vw;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.lp-multi-column__tablist::-webkit-scrollbar {
		display: none;
	}

	.lp-multi-column .lp-multi-column__tab {
		flex: none;
		width: auto;
		min-height: 52px;
		scroll-snap-align: start;
		font-size: 16px;
	}

	.lp-multi-column__tabs .lp-multi-column__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-multi-column__tabs .lp-multi-column__card-img-wrapper {
		height: 220px;
		min-height: 220px;
	}

	.lp-multi-column__tabs .lp-multi-column__card-contents {
		grid-column: 1;
		grid-row: 2;
	}
}

/*--------------------------------------------------------------
# Six more shapes (2026-10-20, Isaac, from the layout variants review)
--------------------------------------------------------------*/
/* The arrow the list's rows and the tiles' links share. */
.lp-multi-column {
	--lp-mc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* List (the List layout; trades): image and icon cards as rows, one
column on phones and two from 768px: a small square of the photo or the
card's icon on its shape, the title, the first line of its text and, with
a Button, an arrow at the right edge, the whole row that link (the title's
link stretched over the row). Room for eight or more. */
.lp-multi-column__list {
	--lp-row-media: 64px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(32px, 4vw, 56px);
	width: 100%;
	text-align: left;
}

.lp-multi-column__row {
	position: relative;
	display: grid;
	grid-template-columns: var(--lp-row-media) minmax(0, 1fr) 20px;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--border-default, #d9dbe0);
}

.lp-multi-column__row--no-media {
	grid-template-columns: minmax(0, 1fr) 20px;
}

.lp-multi-column__row:not(.has-link) {
	grid-template-columns: var(--lp-row-media) minmax(0, 1fr);
}

.lp-multi-column__row--no-media:not(.has-link) {
	grid-template-columns: minmax(0, 1fr);
}

.lp-multi-column__row-media {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--brand-tint, #d5dce7);
}

.lp-multi-column__row-media:not(.lp-multi-column__icon-wrapper) {
	border-radius: min(var(--card-radius, 12px), 14px);
}

/* A row with an icon: the icon's own size, on the block's icon shape. */
.lp-multi-column__row--icon {
	--lp-row-media: 48px;
}

.lp-multi-column__row-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.editor-styles-wrapper .lp-multi-column__row-img {
	height: 100%;
}

/* An icon card's icon in the photo's square, on the block's icon shape. */
.lp-multi-column .lp-multi-column__row-media.lp-multi-column__icon-wrapper {
	width: 100%;
	height: auto;
	margin: 0;
}

.lp-multi-column--icon-none .lp-multi-column__row-media.lp-multi-column__icon-wrapper {
	background: transparent;
}

.lp-multi-column__row-title {
	margin: 0 0 2px;
	color: var(--text-primary);
	font-size: min(var(--lp-card-title-size, 20px), 20px);
	font-weight: var(--lp-card-title-weight, 600);
	line-height: 1.25;
	transition: color 0.2s ease;
}

.lp-multi-column__row-link {
	color: inherit;
	text-decoration: none;
}

.lp-multi-column__row-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lp-multi-column__row-link:focus-visible {
	outline: none;
}

.lp-multi-column__row-link:focus-visible::after {
	outline: 2px solid var(--primary-300);
	outline-offset: 2px;
	border-radius: 6px;
}

.lp-multi-column__row-line {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--font-size-small, 16px);
	line-height: 1.5;
}

.lp-multi-column__row-price {
	margin: 4px 0 0;
	color: var(--text-accent);
	font-size: var(--font-size-small, 16px);
	font-weight: 700;
}

.lp-multi-column__row-arrow {
	width: 20px;
	height: 20px;
	color: var(--text-secondary);
	background: currentColor;
	-webkit-mask: var(--lp-mc-arrow) center / contain no-repeat;
	mask: var(--lp-mc-arrow) center / contain no-repeat;
	transition: transform 0.2s ease, color 0.2s ease;
}

.lp-multi-column__row.has-link:hover .lp-multi-column__row-title,
.lp-multi-column__row.has-link:hover .lp-multi-column__row-arrow {
	color: var(--text-accent);
}

.lp-multi-column__row.has-link:hover .lp-multi-column__row-arrow {
	transform: translateX(3px);
}

/* The canvas keeps its clicks for selecting the block. */
.editor-styles-wrapper .lp-multi-column__row-link::after {
	content: none;
}

@media screen and (min-width: 768px) {
	.lp-multi-column__list {
		--lp-row-media: 80px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-multi-column__row {
		gap: 20px;
	}

	.lp-multi-column__row--icon {
		--lp-row-media: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-multi-column__row-title,
	.lp-multi-column__row-arrow {
		transition: none;
	}

	.lp-multi-column__row.has-link:hover .lp-multi-column__row-arrow {
		transform: none;
	}
}

/* Result card (professional): the figure large with its label under it,
then the client in the accent and the outcome, under a rule. On the grid's
four tracks, so a row's clients and outcomes line up. */
.lp-multi-column__result {
	display: flex;
	flex-direction: column;
	padding-top: 24px;
	border-top: 2px solid color-mix(in srgb, var(--text-primary) 16%, transparent);
	text-align: left;
}

.lp-multi-column__result-figure {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.lp-multi-column__result-value {
	color: var(--text-primary);
	font-family: var(--font-family-heading);
	font-size: clamp(40px, 4.4vw, 56px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.lp-multi-column__result-label {
	color: var(--text-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-small, 16px);
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.4;
}

.lp-multi-column__result-client {
	margin: 18px 0 6px;
	color: var(--text-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.lp-multi-column__result-outcome {
	margin: 0;
	color: var(--text-secondary);
}

@supports (grid-template-rows: subgrid) {
	.lp-multi-column__result {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
	}

	.lp-multi-column__result-figure {
		grid-row: 1;
	}

	.lp-multi-column__result-client {
		grid-row: 2;
		align-self: start;
	}

	.lp-multi-column__result-outcome {
		grid-row: 3;
	}
}

/* The footnote (any layout): a small line under the cards. */
.lp-multi-column__footnote {
	max-width: var(--max-width-narrow);
	margin: 0;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.lp-multi-column--intro-beside .lp-multi-column__footnote {
	align-self: flex-start;
	text-align: left;
}

/* Category tiles (retail): the Background image style, extended rather
than a new Tile choice, since Background already was the tile (the photo
under the whole card, the title and text over a dark fade at its foot).
Now tall, 3 by 4, and with a Button the whole card is that link: the
button's link stretched over the card (the contents fill it), shown as a
quiet line with an arrow rather than a filled button. The markup is as it
was. No transform on the link: it would shrink the stretched layer. */
.lp-multi-column__card--image-background {
	aspect-ratio: 3 / 4;
}

.lp-multi-column .lp-multi-column__card--image-background a.btn.lp-multi-column__card-btn {
	position: static;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	justify-self: start;
	gap: 8px;
	min-height: 0;
	margin-top: 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--white, #fff);
	background: none;
	box-shadow: none;
	font-size: var(--font-size-small, 16px);
	font-weight: 700;
	text-decoration: none;
	transform: none;
}

.lp-multi-column .lp-multi-column__card--image-background a.btn.lp-multi-column__card-btn:hover {
	color: var(--white, #fff);
	background: none;
	transform: none;
}

.lp-multi-column .lp-multi-column__card--image-background a.btn.lp-multi-column__card-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lp-multi-column .lp-multi-column__card--image-background a.btn.lp-multi-column__card-btn::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--lp-mc-arrow) center / contain no-repeat;
	mask: var(--lp-mc-arrow) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.lp-multi-column__card--image-background:hover a.btn.lp-multi-column__card-btn::after {
	transform: translateX(3px);
}

.lp-multi-column .lp-multi-column__card--image-background a.btn.lp-multi-column__card-btn:focus-visible {
	outline: none;
}

.lp-multi-column .lp-multi-column__card--image-background a.btn.lp-multi-column__card-btn:focus-visible::before {
	outline: 2px solid var(--white, #fff);
	outline-offset: -6px;
	border-radius: var(--card-radius, 12px);
}

/* The canvas keeps its clicks for selecting the block. */
.editor-styles-wrapper .lp-multi-column__card--image-background a.btn.lp-multi-column__card-btn::before {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.lp-multi-column__card--image-background:hover a.btn.lp-multi-column__card-btn::after {
		transform: none;
	}
}

/* Two to a row on phones for a grid of nothing but tiles or product cards,
as a shop window (one tile to a row was 480px tall at 390); a last one on
its own sits in the middle. */
@media screen and (max-width: 500px) {
	.lp-multi-column .lp-multi-column__grid:not(:has(> :not(.lp-multi-column__card--image-background, .lp-multi-column__product))) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 12px;
	}

	.lp-multi-column .lp-multi-column__grid:not(:has(> :not(.lp-multi-column__card--image-background, .lp-multi-column__product))) > :nth-child(2n + 1):nth-last-child(1) {
		grid-column: 2 / span 2;
	}

	.lp-multi-column__grid > .lp-multi-column__card--image-background {
		min-height: 0;
	}

	.lp-multi-column__grid > .lp-multi-column__card--image-background .lp-multi-column__card-contents {
		padding: 14px;
	}

	.lp-multi-column__grid > .lp-multi-column__card--image-background .lp-multi-column__card-title {
		font-size: 18px;
	}

	.lp-multi-column .lp-multi-column__grid > .lp-multi-column__card--image-background :is(.lp-multi-column__card-body, .lp-multi-column__card-body p, a.btn.lp-multi-column__card-btn) {
		font-size: 14px;
		line-height: 1.4;
	}
}

/* Product card (retail): the page's card with a square photo, a badge
over its corner, the title, a detail line, then the price and an optional
button at the foot, which sits at the bottom so a row's prices line up.
Without a photo the badge leads the text. */
.lp-multi-column__product {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-align: left;
	background-color: var(--surface-card, #fff);
	border: var(--card-border, 0 solid transparent);
	border-top: var(--card-top, var(--card-border, 0 solid transparent));
	border-radius: var(--card-radius, 12px);
	box-shadow: var(--card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
}

.lp-multi-column__product-media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
}

.lp-multi-column__product-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.editor-styles-wrapper .lp-multi-column__product-img {
	height: 100%;
}

.lp-multi-column__product-badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	color: var(--accent-badge-text);
	background: var(--accent-badge-bg);
	font-family: var(--font-family-button);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.lp-multi-column__product-media .lp-multi-column__product-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

.lp-multi-column__product-contents {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	padding: var(--lp-card-pad, 1.25rem);
}

.lp-multi-column__product-contents > .lp-multi-column__product-badge {
	margin-bottom: 6px;
}

.lp-multi-column__product-title {
	margin: 0;
	color: var(--text-primary);
	font-size: min(var(--lp-card-title-size, 20px), 20px);
	font-weight: var(--lp-card-title-weight, 600);
	line-height: 1.25;
}

.lp-multi-column__product-detail {
	margin: 0;
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.45;
}

.lp-multi-column__product-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-top: auto;
	padding-top: 12px;
}

.lp-multi-column__product-price {
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-family-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.lp-multi-column a.btn.lp-multi-column__product-btn {
	margin: 0;
	padding: 8px 16px;
	font-size: 14px;
}

.lp-multi-column__product[hidden] {
	display: none;
}

@supports (grid-template-rows: subgrid) {
	.lp-multi-column__product {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
		height: auto;
	}

	.lp-multi-column__product-media {
		grid-row: 1;
	}

	.lp-multi-column__product-contents {
		grid-row: 2 / span 3;
	}

	.lp-multi-column__product--no-image .lp-multi-column__product-contents {
		grid-row: 1 / span 4;
	}
}

/* A price line on icon cards (health): under the text in the accent, over
a hairline. It opens a foot that holds it and the button, on the card's
last track, so a row's prices line up under the longest text. */
.lp-multi-column__icon-card-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.lp-multi-column__icon-card-price {
	align-self: stretch;
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
	color: var(--text-accent);
	font-family: var(--font-family-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.lp-multi-column .lp-multi-column__icon-card-foot a.btn.lp-multi-column__icon-card-btn {
	align-self: flex-start;
	justify-self: auto;
	margin-top: 1rem;
}

.lp-multi-column__icon-card.is-featured .lp-multi-column__icon-card-price {
	color: inherit;
	border-top-color: color-mix(in srgb, currentColor 24%, transparent);
}

@supports (grid-template-rows: subgrid) {
	.lp-multi-column__icon-card-foot {
		grid-row: 4;
		align-self: start;
	}
}

/* Dense grid (the Dense grid layout; catalog): product cards small and
without photos, one to a row, two from 480px, four from 1024px: the
category as a small label, the title, the detail, and the price at the
right of a hairline foot; with a Button the whole card is that link (the
title's link stretched over it) and the button's words sit at the foot's
left. Over them the filter chips, a row that scrolls sideways on phones and
wraps from 768px; js/filters.js unhides them (the canvas shows them as
they are, every card under them). */
.lp-multi-column__catalog {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	text-align: left;
}

.lp-multi-column__filters {
	display: flex;
	gap: 8px;
	margin-inline: -4vw;
	padding: 2px 4vw 6px;
	overflow-x: auto;
	scroll-padding-inline: 4vw;
	scrollbar-width: none;
}

.lp-multi-column__filters::-webkit-scrollbar {
	display: none;
}

.lp-multi-column__filters[hidden] {
	display: none;
}

/* The block class lifts the chip over style.css's own button rules. */
.lp-multi-column .lp-multi-column__filter {
	flex: none;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--border-default, #d9dbe0);
	border-radius: 999px;
	color: var(--text-secondary);
	background: var(--surface-card, #fff);
	font-family: var(--font-family-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.lp-multi-column .lp-multi-column__filter:hover {
	color: var(--text-primary);
	border-color: color-mix(in srgb, var(--text-primary) 40%, transparent);
}

.lp-multi-column .lp-multi-column__filter:focus-visible {
	outline: 2px solid var(--primary-300);
	outline-offset: 2px;
}

.lp-multi-column .lp-multi-column__filter[aria-pressed="true"] {
	color: var(--text-on-brand, #fff);
	background: var(--primary-300);
	border-color: var(--primary-300);
}

.lp-multi-column.is-dark .lp-multi-column__filter[aria-pressed="true"] {
	color: var(--lp-accent-ink, #fff);
	background: var(--lp-accent-fill, var(--accent-300));
	border-color: transparent;
}

.lp-multi-column__dense {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

/* Out of the grid's four tracks: its own grid holds it. */
.lp-multi-column .lp-multi-column__product--dense {
	display: flex;
	flex-direction: column;
	grid-row: auto;
	height: 100%;
	transition: box-shadow 0.2s ease;
}

.lp-multi-column__product--dense[hidden] {
	display: none;
}

.lp-multi-column__product--dense .lp-multi-column__product-contents {
	padding: 18px 20px;
}

.lp-multi-column__product-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 24px;
	margin-bottom: 4px;
}

.lp-multi-column__product-category {
	color: var(--text-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.lp-multi-column__product-top .lp-multi-column__product-badge {
	padding: 2px 8px;
	font-size: 11px;
}

.lp-multi-column__product--dense .lp-multi-column__product-title {
	font-size: 17px;
}

.lp-multi-column__product--dense .lp-multi-column__product-detail {
	font-size: 14px;
	line-height: 1.5;
}

.lp-multi-column__product--dense .lp-multi-column__product-foot {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
}

/* At least 14px above the foot's hairline on the row's tallest card. */
.lp-multi-column__product--dense :is(.lp-multi-column__product-title, .lp-multi-column__product-detail):has(+ .lp-multi-column__product-foot) {
	margin-bottom: 10px;
}

.lp-multi-column__product--dense .lp-multi-column__product-price {
	margin-left: auto;
	font-size: 18px;
}

.lp-multi-column__product-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-accent);
	font-size: 14px;
	font-weight: 700;
}

.lp-multi-column__product-cta::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--lp-mc-arrow) center / contain no-repeat;
	mask: var(--lp-mc-arrow) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.lp-multi-column__product-link {
	color: inherit;
	text-decoration: none;
}

.lp-multi-column__product-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lp-multi-column__product-link:focus-visible {
	outline: none;
}

.lp-multi-column__product-link:focus-visible::after {
	outline: 2px solid var(--primary-300);
	outline-offset: -2px;
	border-radius: var(--card-radius, 12px);
}

.lp-multi-column__product--dense.has-link:hover {
	box-shadow: var(--card-hover-shadow, rgba(0, 0, 0, 0.18) 0px 10px 28px);
}

.lp-multi-column__product--dense.has-link:hover .lp-multi-column__product-title {
	color: var(--text-accent);
}

.lp-multi-column__product--dense.has-link:hover .lp-multi-column__product-cta::after {
	transform: translateX(3px);
}

/* The canvas keeps its clicks for selecting the block. */
.editor-styles-wrapper .lp-multi-column__product-link::after {
	content: none;
}

@media screen and (min-width: 480px) {
	.lp-multi-column__dense {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 768px) {
	.lp-multi-column__filters {
		flex-wrap: wrap;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}
}

@media screen and (min-width: 1024px) {
	.lp-multi-column__dense {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-multi-column .lp-multi-column__filter,
	.lp-multi-column .lp-multi-column__product--dense,
	.lp-multi-column__product-cta::after {
		transition: none;
	}

	.lp-multi-column__product--dense.has-link:hover .lp-multi-column__product-cta::after {
		transform: none;
	}
}