/*
 * Integrations page — built to assets-source/reference/foodyx_integraties_overzicht.png.
 *
 * Same material as /producten/, on purpose: off-white ground, bordered white
 * cards, hairline separators, tinted bands, small radii, no shadow, no gradient,
 * one restrained petrol accent. The two pages are siblings and should feel like
 * it — an explanatory page has no business inventing a second visual language.
 *
 * 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 /integraties/ only; see foodyx_enqueue_styles().
 */

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

/* The chapter rhythm, set once, same as /producten/. */
.fx-cats,
.fx-hubband,
.fx-cases,
.fx-ask,
.fx-ipcta {
	margin-block-start: var(--wp--preset--spacing--80);
}

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

.fx-ip__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-ip__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--60);
}

.fx-ip .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

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

/*
 * No eyebrow here. The comp goes straight to the h1, and on a page whose whole
 * job is to explain, a label above the heading would be the third thing saying
 * "integrations" before the reader has learned anything.
 */
.fx-ip__intro {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

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

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

/*
 * The three promises. Rows divided by a hairline, never cards — and the same
 * component as /producten/ and /contact/, because a reader moving between the
 * three pages should recognise it rather than re-read it.
 */
.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;
}

/* ---- Categories --------------------------------------------------------- */

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

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

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

/*
 * A category card is one column: icon, heading, what it is for, who it is with,
 * then what it changes. The partner list is the middle of the card, not the
 * point of it — the operational line under the hairline is the point, and it is
 * the last thing read.
 */
.fx-cat {
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	align-content: start;
	box-sizing: border-box;
	padding: 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-cat__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-cat__icon svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

.fx-cat__title {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.25;
}

.fx-cat__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;
}

/*
 * NOT A LOGO WALL. The mark is 28px, it sits beside a real text name, and it
 * carries no background of its own beyond the badge it was supplied as. Delete
 * every logo from this list and the page loses nothing it was relying on.
 */
.fx-cat__partners {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

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

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

.fx-partner__logo {
	display: block;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
}

/*
 * Exact and Twinfield have no approved mark. They hold the logo column's width
 * and show nothing in it, so the four cards keep one internal rhythm and a
 * reader does not read the absence as a broken image. It is emptiness on
 * purpose — the alternative is a logo nobody cleared.
 */
.fx-partner__logo--none {
	background: none;
}

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

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

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

.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);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

/* ---- The wiring diagram -------------------------------------------------- */

/*
 * FOUR FAMILIES INTO ONE HUB, AND THE HUB INTO THE PRODUCTS. Never a chain: a
 * row of nodes in sequence would say the families run in order and that three
 * of them reach POSHUB through the others. Each family has a line of its own,
 * they meet on one trunk, and the trunk continues to the products.
 *
 * Phones put the four in a 2 x 2 and run the trunk down the COLUMN GAP, which
 * is the one vertical strip on the grid that is guaranteed to be empty. From
 * 48rem the four move to a single row above the hub and the trunk becomes a
 * rail beneath them.
 *
 * Every length is derived from the grid's own gaps. A family's elbow travels
 * from its own centre (50%) to the grid's centre, which for two equal columns
 * is 50% + colgap / 2 and for four is 150% + 1.5 x colgap from the outer
 * column. Change a gap and the diagram stays joined.
 */
.fx-wiring {
	--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 1fr auto auto;
	grid-template-areas:
		"f1 f2"
		"f3 f4"
		"hub hub"
		"prod prod";
	row-gap: var(--fx-gap);
	column-gap: var(--fx-colgap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-wiring__node {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/*
	 * Stretch to the row, centre the content inside it. Stretching is what makes
	 * the node's 50% the row's 50% — the line every elbow is measured from —
	 * even when the node beside it wraps to two lines.
	 */
	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-wiring__node--f1 { grid-area: f1; }
.fx-wiring__node--f2 { grid-area: f2; }
.fx-wiring__node--f3 { grid-area: f3; }
.fx-wiring__node--f4 { grid-area: f4; }
.fx-wiring__node--hub { grid-area: hub; }
.fx-wiring__node--prod { grid-area: prod; }

.fx-wiring__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-wiring__mark svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

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

/*
 * POSHUB is one pill, icon and name together. It is the only saturated element
 * in the band and the only node shaped differently — which is the point: the
 * four families look alike because they are alike, and the layer they meet in
 * does not. It is a layer, not a product, so it gets no product-style card.
 */
.fx-wiring__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-wiring__node--hub .fx-wiring__mark {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--field);
}

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

/*
 * The products node is a white pill rather than a square mark: it is the one
 * thing in the diagram that is not an integration and not the layer, and it
 * reads better as a destination than as a fifth peer.
 */
.fx-wiring__node--prod {
	flex-direction: row;
	justify-self: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) 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-wiring__node--prod .fx-wiring__mark {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--accent);
}

.fx-wiring__node--prod .fx-wiring__label {
	color: var(--wp--preset--color--ink);
	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 borders, and which way the box grows, is all
 * that changes between the four families and the two layouts.
 */
.fx-wiring__node--f1::after,
.fx-wiring__node--f2::after,
.fx-wiring__node--f3::after,
.fx-wiring__node--f4::after,
.fx-wiring__node--hub::before,
.fx-wiring__node--hub::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	border: 0 dashed var(--wp--preset--color--connector);
}

/*
 * A family node hangs its content from the TOP of its row rather than centring
 * it. Two things fall out of that: the four marks line up across a row whatever
 * their labels do, and the mark's centre becomes a known distance from the
 * node's top — half a mark — which is the line every tick is drawn on. Centred
 * content would put that line somewhere between the mark and the label, which is
 * where the first version drew it.
 */
.fx-wiring__node--f1,
.fx-wiring__node--f2,
.fx-wiring__node--f3,
.fx-wiring__node--f4 {
	justify-content: flex-start;
}

/*
 * Phones. Each family sends a tick sideways from the EDGE OF ITS MARK — not
 * from the edge of its grid cell, which would leave the line floating in the
 * whitespace beside the icon — into the column gap. f1 and f3 carry the trunk
 * down that gap as well, f1 from its row to the next and f3 from there to the
 * hub. f2 and f4 tick into the same line from the other side, so the trunk is
 * drawn once and tapped four times.
 */
.fx-wiring__node--f1::after,
.fx-wiring__node--f3::after {
	top: calc(var(--fx-mark) / 2);
	left: calc(50% + var(--fx-mark) / 2);
	width: calc(50% - var(--fx-mark) / 2 + var(--fx-colgap) / 2);
	border-block-start-width: var(--wp--custom--border--connector);
	border-inline-end-width: var(--wp--custom--border--connector);
}

/* Row to row: a whole row plus the gap between them. */
.fx-wiring__node--f1::after {
	height: calc(100% + var(--fx-gap));
}

/* Row to hub: the same, less the half mark this box already started below. */
.fx-wiring__node--f3::after {
	height: calc(100% + var(--fx-gap) - var(--fx-mark) / 2);
}

.fx-wiring__node--f2::after,
.fx-wiring__node--f4::after {
	top: calc(var(--fx-mark) / 2);
	right: calc(50% + var(--fx-mark) / 2);
	width: calc(50% - var(--fx-mark) / 2 + var(--fx-colgap) / 2);
	height: 0;
	border-block-start-width: var(--wp--custom--border--connector);
}

/* The hub's own line down to the products. */
.fx-wiring__node--hub::after {
	top: 100%;
	left: 50%;
	height: var(--fx-gap);
	border-inline-start-width: var(--wp--custom--border--connector);
}

/* ---- Practical 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--40) 0 0;
	max-width: 52ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}

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

/* Same card construction as /producten/, so the two pages 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"
		"rel rel";
	align-content: start;
	column-gap: var(--wp--preset--spacing--50);
	box-sizing: border-box;
	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__relevant {
	grid-area: rel;
	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);
	font-weight: 700;
	line-height: 1.5;
}

/* ---- Missing integration ------------------------------------------------- */

.fx-ask {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--surface--accent-wash);
}

.fx-ask__copy {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
}

.fx-ask__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	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-ask__icon svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

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

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

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

/*
 * Centred on the page ground, not in a band. The comp is explicit about it and
 * it is the right call: the strip above is already tinted, and two tinted bands
 * back to back would turn the end of the page into a wall.
 */
.fx-ipcta {
	text-align: center;
}

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

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

.fx-ipcta__actions {
	justify-content: center;
}

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

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

	/*
	 * SUBGRID is what aligns the hairlines. "Loyaliteit" names one partner and
	 * "Betalingen" names three; left alone the cards put their rule at three
	 * different heights and the row reads as four unrelated boxes.
	 *
	 * Each card borrows its five rows from the parent, so icon, heading, copy,
	 * partner list and operational line are the same height in every card. The
	 * partner row is the one that stretches, which is why the rule above the
	 * operational line lands on one line across the row.
	 */
	@supports (grid-template-rows: subgrid) {
		.fx-cats__grid {
			grid-auto-rows: auto auto auto 1fr auto;
		}

		.fx-cat {
			grid-row: span 5;
			grid-template-rows: subgrid;
			row-gap: 0;
		}

		.fx-case {
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
		}
	}

	/*
	 * The diagram turns the right way up: four families in one row, the hub
	 * beneath them, the products beneath that. Each family drops a line to the
	 * rail in the row gap and runs along it to the centre; the hub picks the
	 * line up from there.
	 */
	.fx-wiring {
		--fx-colgap: var(--wp--preset--spacing--50);

		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"f1 f2 f3 f4"
			"hub hub hub hub"
			"prod prod prod prod";
		max-width: 44rem;
		margin-inline: auto;
	}

	.fx-wiring__node--f1::after,
	.fx-wiring__node--f2::after,
	.fx-wiring__node--f3::after,
	.fx-wiring__node--f4::after {
		top: 100%;
		bottom: auto;
		left: auto;
		right: auto;
		height: calc(var(--fx-gap) / 2);
		border-width: 0;
		border-block-end-width: var(--wp--custom--border--connector);
	}

	/*
	 * From the outer columns the rail has one and a half columns and one and a
	 * half gaps to travel; from the inner ones, half of each. That is the exact
	 * distance to the centre of a four-column grid, so all four meet on the same
	 * vertical line as the hub's stub.
	 */
	.fx-wiring__node--f1::after,
	.fx-wiring__node--f2::after {
		left: 50%;
		border-inline-start-width: var(--wp--custom--border--connector);
	}

	.fx-wiring__node--f3::after,
	.fx-wiring__node--f4::after {
		right: 50%;
		border-inline-end-width: var(--wp--custom--border--connector);
	}

	.fx-wiring__node--f1::after,
	.fx-wiring__node--f4::after {
		width: calc(150% + 1.5 * var(--fx-colgap));
	}

	.fx-wiring__node--f2::after,
	.fx-wiring__node--f3::after {
		width: calc(50% + var(--fx-colgap) / 2);
	}

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

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

	/* The strip goes side by side: copy left, the one control right. */
	.fx-ask {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--wp--preset--spacing--70);
	}

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

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

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

	/*
	 * Intro splits, exactly as on /producten/ and /contact/: title and lede in
	 * the wider column, the value list in the narrower one behind a vertical
	 * hairline.
	 */
	.fx-ip__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-ip__title,
	.fx-ip__lede {
		grid-column: 1;
	}

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

	/*
	 * 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: 1 / span 2;
		padding-inline-start: var(--wp--preset--spacing--80);
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	}

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

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

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

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