/*
 * Products page — built to assets-source/reference/foodyx_producten_voor_de_horeca.png.
 *
 * Same material as the rest of the site: off-white ground, bordered white
 * cards, hairline separators, two tinted bands, small radii, no shadow and no
 * gradient. Nothing here is a new visual language; it is the contact page's
 * vocabulary applied to a different argument.
 *
 * Every value is a theme.json token. Mobile-first: the 360px case is the
 * unconditional default and is widened with min-width only. Breakpoints match
 * the ones already in use — 48rem, 64rem, 80rem.
 *
 * Loaded on /producten/ only; see foodyx_enqueue_styles().
 */

.fx-pp {
	margin-block-start: var(--wp--preset--spacing--80);
}

/*
 * The chapter rhythm of the page. One value, set once, so the five sections are
 * separated by the same distance and no section carries a bespoke margin.
 */
.fx-families,
.fx-hubband,
.fx-cases,
.fx-ppcta {
	margin-block-start: var(--wp--preset--spacing--80);
}

/* ---- Shared page furniture ---------------------------------------------- */

/*
 * The eyebrow and action row repeat home.css's treatment, which is not loaded
 * on this route. Kept as their own rules rather than promoted to style.css: the
 * home section they belong to is frozen, and lifting a rule out from under a
 * frozen section to share it is a change to that section.
 */
.fx-pp__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

.fx-pp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Matches the rest of the site: a tap target, not a text link in a box. */
.fx-pp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---- Intro -------------------------------------------------------------- */

/*
 * Eyebrow, title, lede and value list are direct grid children. On phones that
 * is one column in source order; from 64rem the value list moves beside the
 * lede and shares its row.
 */
.fx-pp__intro {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.fx-pp__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-sm);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.fx-pp__lede {
	margin: 0;
	max-width: 52ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}

/*
 * The three promises. Horizontal rows divided by a hairline, never three cards
 * — the comp is explicit about it, and it is what keeps the top of the page
 * calm enough for the h1 to carry the weight.
 */
.fx-values {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-values__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	max-width: none;
}

.fx-values__item + .fx-values__item {
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.fx-values__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-values__icon svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.fx-values__text {
	display: block;
}

.fx-values__title {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.35;
}

.fx-values__what {
	display: block;
	margin-block-start: 0.125rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

/* ---- Product families --------------------------------------------------- */

/*
 * Four families, one card each. One column on phones, two from 48rem, four from
 * 80rem — the same progression the frozen home grid uses, so the two pages feel
 * like one site even though they answer different questions.
 *
 * The cards STRETCH. "Keuken" holds one product and "In de zaak" holds four;
 * equal heights are what stop the row reading as four unrelated boxes. Nothing
 * here sets a height — grid's default stretch does it.
 */
.fx-families {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

/*
 * The card's four parts are FLAT children, not wrapped in a header div, so the
 * icon can sit beside the title at every width while the description spans the
 * full card. A wrapper would force the description into the icon's column.
 */
.fx-fam {
	display: grid;
	grid-template-columns: var(--wp--custom--size--icon) minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"icon what"
		"list list";
	align-content: start;
	column-gap: var(--wp--preset--spacing--50);
	box-sizing: border-box;
	/*
	 * Shorter than it is wide in its padding. "In de zaak" holds four products
	 * and sets the height of all four cards, so every block of air inside it is
	 * air that "Keuken" and "Inzicht" have to fill with nothing. Trimming the
	 * vertical padding and the run-up to the list takes that height out of the
	 * tallest card, and the sparse ones stop looking like they are missing
	 * something. The inline padding is untouched: the cards are narrow enough
	 * already and the text needs its margins.
	 */
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
}

.fx-fam__icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	width: var(--wp--custom--size--icon);
	height: var(--wp--custom--size--icon);
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-fam__icon svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

.fx-fam__title {
	grid-area: title;
	margin: 0;
	align-self: start;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.25;
}

.fx-fam__what {
	grid-area: what;
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/*
 * One hairline, above the product list. The comp rules this edge and nothing
 * else inside the card — the list does not need a line per row to be legible.
 */
.fx-fam__list {
	grid-area: list;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40) 0 0;
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	list-style: none;
}

.fx-fam__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: none;
}

.fx-fam__item + .fx-fam__item {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * The chevron is a marker, not an affordance. There is no product route yet, so
 * nothing in this list is clickable; the glyph stays muted-accent and the name
 * stays ink, which reads as "listed" rather than "link".
 */
.fx-fam__chev {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
}

.fx-fam__chev svg {
	display: block;
	width: 0.875rem;
	height: 0.875rem;
}

.fx-fam__name {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

/* The acronym expansion CONTENT.md requires, kept out of the scan's way. */
.fx-fam__note {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
}

.fx-fam__note::before {
	content: "— ";
}

/* ---- POSHUB band -------------------------------------------------------- */

/*
 * A tinted band, not a full-bleed one: in the comp it holds the same width as
 * the cards above and below it. Making it full-bleed would turn a paragraph
 * into a chapter break and split the page in two.
 */
.fx-hubband {
	display: grid;
	gap: var(--wp--preset--spacing--80);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--surface--accent-wash);
}

.fx-hubband__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
	text-wrap: balance;
}

.fx-hubband__body {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 44ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
	font-size: var(--wp--preset--font-size--sm);
}

/* ---- The hub schematic --------------------------------------------------- */

/*
 * FOUR FAMILIES AROUND ONE HUB — never a chain. A row of five nodes reads as a
 * sequence and says three families reach POSHUB through the others. POSHUB is
 * the layer they each plug into, so it sits in the middle with two families on
 * one side and two on the other, and it owns a separate connection to each.
 *
 * Phones put two families over the hub and two under it; from 48rem they move
 * to two left and two right. The nodes and the connections are the same both
 * ways — only the grid areas and the direction of the elbows change.
 *
 * THE CONNECTIONS ARE BORDERS on ::after of each family and ::before/::after of
 * the hub. Every length is derived, not eyeballed: a family's elbow runs from
 * its own centre (50%) to the midpoint of the gap it shares with the hub
 * (50% + gap / 2), where the hub's own stub meets it. Change --fx-gap or
 * --fx-colgap and the whole diagram stays joined.
 */
.fx-spokes {
	--fx-mark: 3.25rem;
	--fx-gap: var(--wp--preset--spacing--70);
	--fx-colgap: var(--wp--preset--spacing--60);

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 1fr auto 1fr;
	grid-template-areas:
		"a b"
		"hub hub"
		"c d";
	row-gap: var(--fx-gap);
	column-gap: var(--fx-colgap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-spokes__node {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/*
	 * A node STRETCHES to its row and centres its own content inside it. Both
	 * halves matter: stretching is what makes the node's 50% the row's 50%, so
	 * an elbow aimed at "half of me plus half the gap" really does land on the
	 * grid's centre line even when the node beside it wraps to two lines; the
	 * centring is what keeps the mark where the elbow leaves from.
	 */
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	text-align: center;
	/* style.css caps every li at the reading measure; a diagram node is not prose. */
	max-width: none;
}

.fx-spokes__node--a { grid-area: a; }
.fx-spokes__node--b { grid-area: b; }
.fx-spokes__node--c { grid-area: c; }
.fx-spokes__node--d { grid-area: d; }
.fx-spokes__node--hub { grid-area: hub; }

.fx-spokes__mark {
	display: grid;
	place-items: center;
	width: var(--fx-mark);
	height: var(--fx-mark);
	box-sizing: border-box;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
	color: var(--wp--preset--color--ink-muted);
}

.fx-spokes__mark svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

.fx-spokes__label {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
}

/*
 * The hub is one pill, icon and name together, not a node with a caption. It is
 * the only saturated element in the band and the only one shaped differently —
 * which is the whole point: the four families look alike because they are
 * alike, and POSHUB does not.
 */
.fx-spokes__node--hub {
	flex-direction: row;
	justify-self: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--accent);
}

.fx-spokes__node--hub .fx-spokes__mark {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--field);
}

.fx-spokes__node--hub .fx-spokes__label {
	color: var(--wp--preset--color--field);
	font-weight: 700;
}

/* ---- The connections ----------------------------------------------------- */

/*
 * One shared skeleton: a zero-content box anchored to a node, wearing two
 * dashed borders that form an elbow. Which two borders, and which way the box
 * grows, is all that differs between the four families and the two layouts.
 */
.fx-spokes__node--a::after,
.fx-spokes__node--b::after,
.fx-spokes__node--c::after,
.fx-spokes__node--d::after,
.fx-spokes__node--hub::before,
.fx-spokes__node--hub::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	border: 0 dashed var(--wp--preset--color--connector);
}

/*
 * Phones. The two families above drop a stub from their centre to the midpoint
 * of the row gap, then run in to the hub's centre line; the hub sends one stub
 * up to meet them. The pair below is the same thing mirrored.
 *
 * Width is 50% of the node plus half the column gap: that is exactly the
 * distance from a column's centre to the grid's centre, which is where the hub
 * stub is waiting.
 */
.fx-spokes__node--a::after,
.fx-spokes__node--b::after {
	top: 100%;
	height: calc(var(--fx-gap) / 2);
	width: calc(50% + var(--fx-colgap) / 2);
	border-block-end-width: var(--wp--custom--border--connector);
}

.fx-spokes__node--c::after,
.fx-spokes__node--d::after {
	bottom: 100%;
	height: calc(var(--fx-gap) / 2);
	width: calc(50% + var(--fx-colgap) / 2);
	border-block-start-width: var(--wp--custom--border--connector);
}

.fx-spokes__node--a::after,
.fx-spokes__node--c::after {
	left: 50%;
	border-inline-start-width: var(--wp--custom--border--connector);
}

.fx-spokes__node--b::after,
.fx-spokes__node--d::after {
	right: 50%;
	border-inline-end-width: var(--wp--custom--border--connector);
}

.fx-spokes__node--hub::before,
.fx-spokes__node--hub::after {
	left: 50%;
	height: calc(var(--fx-gap) / 2);
	border-inline-start-width: var(--wp--custom--border--connector);
}

.fx-spokes__node--hub::before {
	bottom: 100%;
}

.fx-spokes__node--hub::after {
	top: 100%;
}

/* ---- Situations --------------------------------------------------------- */

.fx-cases__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
	text-wrap: balance;
}

.fx-cases__intro {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: 46ch;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.fx-cases__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--70);
}

/* Same card construction as a family, so the two rows read as one system. */
.fx-case {
	display: grid;
	grid-template-columns: var(--wp--custom--size--icon) minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"icon what"
		"combo combo";
	align-content: start;
	column-gap: var(--wp--preset--spacing--50);
	box-sizing: border-box;
	/* Matched to .fx-fam, deliberately: two card types on one page, one system. */
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
}

.fx-case__icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	width: var(--wp--custom--size--icon);
	height: var(--wp--custom--size--icon);
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-case__icon svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

.fx-case__title {
	grid-area: title;
	align-self: start;
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.25;
}

.fx-case__what {
	grid-area: what;
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.fx-case__combo {
	grid-area: combo;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40) 0 0;
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.fx-case__label {
	display: block;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* ---- Closing CTA -------------------------------------------------------- */

/*
 * The page's ending, and the same tint as the POSHUB band. It repeats the home
 * page's closing pair — one filled control, one outline — because a visitor who
 * reaches the bottom of either page is at the same point in the same decision.
 */
.fx-ppcta {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--surface--accent-wash);
}

.fx-ppcta__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
	text-wrap: balance;
}

.fx-ppcta__body {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 52ch;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

/* ---- 48rem -------------------------------------------------------------- */

@media (min-width: 48rem) {
	.fx-families,
	.fx-cases__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * SUBGRID is what aligns the hairlines. "In de zaak" holds four products and
	 * a three-line description; "Inzicht" holds one and two lines. Left to
	 * themselves the cards put their rule at four different heights and the row
	 * reads as four unrelated boxes.
	 *
	 * Each card borrows its three rows from the parent, so the title row, the
	 * description row and the list row are the same height in every card and the
	 * rule lands on one line across the row. Nothing is given a fixed height and
	 * no copy is padded to fit — the tallest card sets the tracks and the rest
	 * follow.
	 *
	 * row-gap: 0 because the parent's gap separates the CARDS; inside a card the
	 * spacing is the children's own margins. A subgrid may override the gap it
	 * inherits, which is exactly what this does.
	 */
	@supports (grid-template-rows: subgrid) {
		.fx-fam,
		.fx-case {
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
		}
	}

	/*
	 * The hub turns on its side: two families left, POSHUB in the middle
	 * spanning both rows, two families right. Same five nodes, same four
	 * connections, elbows rotated a quarter turn.
	 *
	 * The two rows are 1fr each so they are equal whatever the labels do, which
	 * is what puts the hub's centre exactly on the row gap's midpoint — the
	 * point every elbow is aimed at.
	 *
	 * max-width keeps the diagram from stretching across the whole column. A
	 * hub with a metre of dashes on either side stops reading as a hub.
	 */
	.fx-spokes {
		--fx-colgap: var(--wp--preset--spacing--70);

		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-template-areas:
			"a hub b"
			"c hub d";
		max-width: 40rem;
		margin-inline: auto;
	}

	.fx-spokes__node--hub {
		align-self: center;
	}

	/*
	 * Sideways, the label moves BESIDE the mark and the pair packs against the
	 * hub. Two things fall out of that, and both are why it is worth doing:
	 * the node's content is now exactly one mark tall, so the mark's centre is
	 * the node's centre is the row's centre — which is the line every elbow is
	 * measured from — and the mark sits flush against the column edge, so a
	 * connection leaves the icon instead of leaving a gap beside it.
	 */
	.fx-spokes__node--a,
	.fx-spokes__node--b,
	.fx-spokes__node--c,
	.fx-spokes__node--d {
		align-items: center;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--40);
	}

	.fx-spokes__node--a,
	.fx-spokes__node--c {
		flex-direction: row-reverse;
		text-align: right;
	}

	.fx-spokes__node--b,
	.fx-spokes__node--d {
		flex-direction: row;
		text-align: left;
	}

	.fx-spokes__mark {
		flex: 0 0 auto;
	}

	/*
	 * Each family now runs OUT from its own middle to the midpoint of the column
	 * gap, then turns and travels to the hub's centre line. Height is 50% of the
	 * node plus half the row gap: the distance from a row's centre to the grid's
	 * centre, which is where the hub's stub meets it.
	 */
	.fx-spokes__node--a::after,
	.fx-spokes__node--b::after,
	.fx-spokes__node--c::after,
	.fx-spokes__node--d::after {
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		width: calc(var(--fx-colgap) / 2);
		height: calc(50% + var(--fx-gap) / 2);
		border-width: 0;
	}

	.fx-spokes__node--a::after,
	.fx-spokes__node--c::after {
		left: 100%;
		border-inline-end-width: var(--wp--custom--border--connector);
	}

	.fx-spokes__node--b::after,
	.fx-spokes__node--d::after {
		right: 100%;
		border-inline-start-width: var(--wp--custom--border--connector);
	}

	.fx-spokes__node--a::after,
	.fx-spokes__node--b::after {
		top: 50%;
		border-block-start-width: var(--wp--custom--border--connector);
	}

	.fx-spokes__node--c::after,
	.fx-spokes__node--d::after {
		bottom: 50%;
		border-block-end-width: var(--wp--custom--border--connector);
	}

	/* The hub's two stubs travel sideways now, one to each pair. */
	.fx-spokes__node--hub::before,
	.fx-spokes__node--hub::after {
		top: 50%;
		bottom: auto;
		left: auto;
		width: calc(var(--fx-colgap) / 2);
		height: 0;
		border-width: 0;
		border-block-start-width: var(--wp--custom--border--connector);
	}

	.fx-spokes__node--hub::before {
		right: 100%;
	}

	.fx-spokes__node--hub::after {
		left: 100%;
	}

	.fx-hubband,
	.fx-ppcta {
		padding: var(--wp--preset--spacing--80);
	}

	/*
	 * The closing band goes side by side: copy left, controls right, aligned on
	 * their centres so the buttons sit against the middle of the two text lines
	 * rather than against the heading.
	 */
	.fx-ppcta {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--wp--preset--spacing--70);
	}

	.fx-ppcta__actions {
		margin-block-start: 0;
		justify-content: flex-end;
	}
}

/* ---- 64rem -------------------------------------------------------------- */

@media (min-width: 64rem) {
	.fx-families,
	.fx-hubband,
	.fx-cases,
	.fx-ppcta {
		margin-block-start: var(--wp--preset--spacing--90);
	}

	/*
	 * Intro splits. The title and lede take the wider column; the value list
	 * takes the narrower one and is separated by a vertical hairline, exactly as
	 * in the comp. The eyebrow and title stay in column one, so the rule starts
	 * level with the h1 rather than at the top of the page.
	 */
	.fx-pp__intro {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--90);
		row-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.fx-pp__eyebrow,
	.fx-pp__title,
	.fx-pp__lede {
		grid-column: 1;
	}

	.fx-pp__title {
		font-size: var(--wp--preset--font-size--display);
		max-width: 16ch;
	}

	/*
	 * The list spans the title and lede rows and hangs off a hairline. The
	 * hairline is on the list, not a separate element, so it cannot drift out of
	 * alignment with the column it divides.
	 */
	.fx-values {
		grid-column: 2;
		grid-row: 2 / span 2;
		padding-inline-start: var(--wp--preset--spacing--80);
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	}

	/* The POSHUB band splits: copy left, schematic right. */
	.fx-hubband {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		align-items: center;
		gap: var(--wp--preset--spacing--90);
	}

	/*
	 * Situations: heading left, intro right, on one row above the cards. The
	 * intro is right-aligned against the grid's edge in the comp; it stays
	 * left-aligned text so it does not become a ragged left block.
	 */
	.fx-cases {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--90);
		align-items: end;
	}

	.fx-pp__eyebrow,
	.fx-cases__title {
		grid-column: 1;
	}

	.fx-cases__intro {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
	}

	.fx-cases__grid {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- 80rem -------------------------------------------------------------- */

@media (min-width: 80rem) {
	/* Four families across, as in the comp. */
	.fx-families {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}