/*
 * Mainland sections ("Yard Pro", 4 Oct 2026): the home hero with its glass stat plate, the stat list, the
 * Max-Atlas badge and the home and marketing bands printed by the theme's section blocks (inc/sections.php:
 * mainland/hero-home, mainland/band-*, mainland/max-atlas-badge) and mainland/stat-band (mainland-core).
 * Loaded only where one of those blocks renders (functions.php, mainland_block_styles()), after theme.css, so
 * every token, surface context (--mn-*) and utility in theme.css is available here.
 *
 * Reference: mockup A "Yard Pro"; the chassis rental band is direction B's (navy-ink, Newsreader accent, ruled
 * features, framed photo, Rental fleet card). Unit cards, the new-arrivals rail and the shop-by-type tiles are in
 * units.css. Breakpoints: 600, 782 (chrome), 960, 1224, and 1400 for the stat plate's row layout (02 §8).
 *
 *  1. Home hero (the carousel's own rules are in home.css)
 *  3. Stat plate and stat band
 *  4. Chassis rental band (B)
 *  5. Shop by type head
 *  6. Max-Atlas band
 *  7. Financing band and the Blue Capital plate
 *  8. Driver and customer hub, roadside bar
 *  9. More at the yard
 * 11. Motion
 * The Max-Atlas dealer badge and model cards, the "Visit the yard" panel and the address card print well beyond these
 * bands (page heroes, the Max-Atlas hub, the contact page, the unit page), so they are panels.css, asked for by their
 * own renderers.
 */

/* 1. Home hero --------------------------------------------------------------------------------------------- */
/* The photo runs full-bleed under the glass header: the hero pulls up by the header's height and pads it back. */

.mn-main > .mn-hero { margin-block-start: calc(-1 * var(--mn-header-h)); }

.mn-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: flex;
	flex-direction: column;
	min-block-size: clamp(680px, calc(100svh - var(--mn-utility-h) - var(--mn-ticker-h) - var(--mn-adminbar)), 900px);
	background: var(--wp--preset--color--ink-0);
	color: var(--mn-text);
}
.mn-hero__media { --mn-photo-pos: 72% 62%; z-index: var(--mn-z-under); }
.mn-hero__glow { pointer-events: none; }

.mn-hero__body {
	flex: 1;
	display: flex;
	align-items: center;
	padding-block: calc(var(--mn-header-h) + clamp(40px, 7vh, 88px)) clamp(40px, 6vh, 72px);
}
.mn-hero__copy { max-inline-size: 45rem; }
:where(.mn-hero__copy > *) { margin: 0; }

.mn-hero__title { margin-block-start: 22px; }
.mn-hero__title .mn-soft { display: block; }
.mn-hero__sub {
	display: block;
	margin-block-start: 26px;
	color: var(--mn-text-strong);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
}
.mn-hero__lede {
	margin-block-start: 6px;
	max-inline-size: 54ch;
	/* Brighter than on-dark-2: the hero photo keeps its colour now, so the lede needs the extra margin (4.9:1 at 820 px). */
	color: var(--mn-hero-lede);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--lede);
}
.mn-hero__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-block-start: 34px; }

@media (min-width: 782px) and (max-width: 1223px) {
	/* The copy spans more of the photo here, so the side scrim holds its weight further right. */
	.mn-hero__media .mn-scrim--hero {
		--mn-scrim:
			linear-gradient(90deg, rgba(var(--wp--custom--ink-rgb), 0.94) 0%, rgba(var(--wp--custom--ink-rgb), 0.86) 40%, rgba(var(--wp--custom--ink-rgb), 0.62) 68%, rgba(var(--wp--custom--ink-rgb), 0.3) 100%),
			linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.7) 0%, rgba(var(--wp--custom--ink-rgb), 0) 24%, rgba(var(--wp--custom--ink-rgb), 0) 52%, rgba(var(--wp--custom--ink-rgb), 0.92) 100%);
	}
}

/* No photo: the stage with its grid and glow, the copy straight under the header. */
.mn-hero--no-photo .mn-hero__body { padding-block-start: calc(var(--mn-header-h) + var(--wp--preset--spacing--80)); }

@media (max-width: 781px) {
	.mn-hero { min-block-size: 0; }
	/* The photo fills the top 420 px and fades into the stage (the scrim's phone ramp ends on ink-0 at 420 px).
	   Below 480 px it is the square phone file, cut at this same 76 % (MAINLAND_HERO_PHONE_X in mainland-core
	   media.php): change the two together. */
	.mn-hero__media { --mn-photo-pos: 76% 50%; inset-block-end: auto; block-size: 420px; }
	.mn-hero__grid { --mn-grid-mask: linear-gradient(180deg, transparent 40%, var(--wp--preset--color--ink-0) 70%, transparent); }
	.mn-hero__glow { inset-inline-start: -30%; inset-block-end: -10%; inline-size: 120%; block-size: 50%; }
	.mn-hero__body { align-items: flex-end; padding-block: 300px 36px; }
	.mn-hero--no-photo .mn-hero__body { padding-block-start: calc(var(--mn-header-h) + var(--wp--preset--spacing--70)); }
	.mn-hero__title { margin-block-start: 18px; }
	.mn-hero__sub { margin-block-start: 18px; }
	.mn-hero__actions { margin-block-start: 26px; }
}
@media (max-width: 599px) {
	.mn-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* 3. Stat plate and stat band ------------------------------------------------------------------------------- */
/* The same list prints on the hero's glass plate (home) and as a standalone band (mainland/stat-band). */

.mn-hero__stats { position: relative; z-index: var(--mn-z-over); }
.mn-hero__stats > .mn-container { position: relative; }
.mn-hero__stats--empty .mn-hero__visit { inset-block-end: 18px; }

/* "Visit the yard · address": a small glass pill above the plate, right-aligned with the content. */
.mn-hero__visit {
	position: absolute;
	inset-inline-end: var(--mn-gutter);
	inset-block-end: calc(100% + 18px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: var(--wp--custom--target--min);
	padding: 0 12px;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--xs);
	background: rgba(var(--wp--custom--ink-rgb), 0.5);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--micro);
	letter-spacing: 0.02em;
	text-decoration: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-hero__visit .mn-icon { inline-size: 14px; block-size: 14px; color: var(--mn-link); transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out); }
.mn-hero__visit:hover { border-color: var(--mn-rule-3); color: var(--mn-text-strong); }
@media (hover: hover) and (pointer: fine) { .mn-hero__visit:hover .mn-icon--arrow-right { transform: translateX(2px); } }
/* Below 1224 px the pill steps aside, so the slide picker keeps its names on tablets (and the contact page and the
   yard band carry the address). */
@media (max-width: 1223px) { .mn-hero__visit { display: none; } }

.mn-stats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.mn-stats__cell {
	display: grid;
	grid-template-areas: "value" "caption" "note";
	align-content: start;
	row-gap: 3px;
	min-inline-size: 0;
	padding: 20px 0 20px 18px;
}
.mn-stats__cell:nth-child(odd) { padding-inline-start: 0; }
.mn-stats__cell:nth-child(even) { border-inline-start: 1px solid var(--mn-rule); }
.mn-stats__cell:nth-child(n + 3) { border-block-start: 1px solid var(--mn-rule); }
:where(.mn-stats__cell > *) { margin: 0; }

.mn-stats__value {
	grid-area: value;
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	margin-block-end: 7px;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	white-space: nowrap;
	font-synthesis: none;
}
.mn-stats__star { display: inline-flex; align-self: center; color: var(--wp--preset--color--cyan); }
.mn-stats__star .mn-icon { inline-size: 0.5em; block-size: 0.5em; fill: currentColor; stroke: none; }
.mn-stats__caption {
	grid-area: caption;
	color: var(--mn-text-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
}
.mn-stats__note { grid-area: note; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); line-height: 1.35; }
.mn-stats__link { color: inherit; text-decoration: none; }
.mn-stats__note .mn-stats__link {
	color: var(--mn-text);
	text-decoration: underline;
	text-decoration-color: var(--mn-rule-3);
	text-underline-offset: 3px;
}
/* The hero clips its overflow and the plate sits on its bottom edge, so a cell's ring there is drawn by a
   pseudo-element: outside the cell on three sides, just inside it at the bottom (no edge is lost). */
.mn-hero__stats .mn-stats__cell.mn-card-host:has(.mn-stretch:focus-visible) { outline: none; }
.mn-hero__stats .mn-stats__cell.mn-card-host:has(.mn-stretch:focus-visible)::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--wp--custom--focus--offset)) calc(-1 * var(--wp--custom--focus--offset)) var(--wp--custom--focus--offset);
	border: var(--wp--custom--focus--width) solid var(--mn-focus);
	border-radius: var(--wp--custom--radius--xs);
	pointer-events: none;
}
.mn-stats__cell.mn-card-host:hover .mn-stats__link { color: var(--mn-text-strong); text-decoration: underline; text-decoration-color: var(--wp--preset--color--cyan); text-underline-offset: 3px; }

@media (max-width: 781px) {
	/* On phones the plate sits below the photo: plain stage, no blur; the figures one step up. */
	.mn-hero__stats.mn-glass { background: var(--wp--preset--color--ink-0); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.mn-stats__value { font-size: var(--wp--preset--font-size--xxx-large); }
}

@media (min-width: 782px) {
	.mn-stats__list { grid-template-columns: repeat(var(--mn-stat-cells, 4), minmax(0, 1fr)); }
	.mn-stats__cell,
	.mn-stats__cell:nth-child(odd) { padding: 22px 20px; border-block-start: 0; border-inline-start: 1px solid var(--mn-rule); }
	.mn-stats__cell:first-child { padding-inline-start: 0; border-inline-start: 0; }
}

@media (min-width: 1400px) {
	/* The figure beside its caption and note. Cells align to the top, so every figure sits on one line even when a
	   note wraps (the dated Google rating). */
	.mn-stats__cell,
	.mn-stats__cell:nth-child(odd) {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas: "value caption" "value note";
		align-content: start;
		align-items: start;
		column-gap: 18px;
		row-gap: 3px;
		padding: 26px 28px;
	}
	.mn-stats__cell:first-child { padding-inline-start: 0; }
	.mn-stats__value { margin-block-end: 0; }
	.mn-stats__caption { padding-block-start: 2px; }
}

/* Home bands after the new-arrivals rail render as they near the screen (15 §3.1, mobile LCP): until then the
   browser skips their layout, so their images, and the Newsreader face the rental accent needs, stay out of the
   first view's bytes. The remembered size (auto) keeps the scrollbar steady once a band has rendered; find in page,
   anchors and screen readers still reach the skipped content. */
.mn-home > .mn-band:not(.mn-rail-band) { content-visibility: auto; contain-intrinsic-size: auto 960px; }

/* 4. Chassis rental band (direction B) ------------------------------------------------------------------- */

.mn-rental__light {
	position: absolute;
	inset: 0;
	z-index: var(--mn-z-under);
	background: radial-gradient(70% 90% at 100% 0%, rgba(var(--wp--custom--cyan-rgb), 0.13), transparent 62%);
	pointer-events: none;
}
.mn-rental__grid { display: grid; gap: clamp(48px, 7vw, 112px); align-items: center; }
:where(.mn-rental__copy > *) { margin: 0; }

.mn-rental__title {
	margin-block-start: 20px;
	color: var(--mn-text-strong);
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--tracking--heading);
}
.mn-rental__title .mn-accent { color: var(--mn-text-strong); }
.mn-rental__lede {
	margin-block-start: 20px;
	max-inline-size: var(--mn-measure);
	color: var(--mn-text);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--lede);
}

.mn-rental__feats { margin-block: 36px 40px; border-color: var(--mn-rule-2); }
/* B's list: a 44 px ring and an 18 px gap; on phones the gap is 14 px so the roadside line fits one row at 390. */
.mn-rental__feats > li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding-block: 16px;
	border-color: var(--mn-rule-2);
}
.mn-rental__feat > * { display: block; }
@media (min-width: 600px) { .mn-rental__feats > li { gap: 18px; } }
.mn-rental__feat strong { color: var(--mn-text-strong); font-size: var(--wp--preset--font-size--medium); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.mn-rental__feat > span { margin-block-start: 2px; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.45; }
.mn-rental__feat a { color: var(--mn-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mn-rental__feat > span a { display: inline-flex; align-items: center; min-block-size: var(--wp--custom--target--min); margin-block: -13px; }
.mn-rental__feat a:hover { color: var(--mn-link-hover); }

.mn-rental__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); }

/* The framed photo: graded chassis stack, offset cyan hairline frame, corner brackets. */
.mn-rental__visual { --mn-offset: 18px; position: relative; padding: 0 var(--mn-offset) var(--mn-offset) 0; }
.mn-rental__photo {
	--mn-photo-pos: 50% 70%;
	/* B's grade for the chassis stack, as Avi approved it (02 §7.28): pinned so the lighter site default doesn't move it. */
	--mn-grade-gray: 0.7;
	--mn-grade-con: 1.16;
	--mn-grade-bri: 0.86;
	--mn-grade-tint: 0.42;
	--mn-grade-grain: 0.1;
	--mn-bk-inset: 16px;
	--mn-bk-size: 26px;
	aspect-ratio: 5 / 6;
	border-radius: var(--wp--custom--radius--sm);
}
.mn-rental__visual--no-photo { padding: 0; }

/* The white "Rental fleet" card, overlapping the photo's lower left. */
.mn-fleet {
	position: absolute;
	z-index: var(--mn-z-raised);
	inset-inline-start: clamp(-64px, -4.4vw, -24px);
	inset-block-end: calc(-1 * var(--mn-offset));
	box-sizing: border-box;
	inline-size: min(340px, 78%);
	padding: 22px 22px 10px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--mn-surface);
	box-shadow: 0 0 0 1px rgba(var(--wp--custom--ink-rgb), 0.06), var(--wp--preset--shadow--pop);
}
.mn-rental__visual--no-photo .mn-fleet { position: relative; inset: auto; inline-size: 100%; max-inline-size: 26rem; }
.mn-fleet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block-end: 12px;
	border-block-end: 1px solid var(--mn-rule);
}
.mn-fleet__head .mn-eyebrow { margin: 0; font-size: 0.6875rem; }
.mn-fleet__head > span { color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--micro); }
.mn-fleet ul { margin: 0; padding: 0; list-style: none; }
.mn-fleet__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-block-size: 46px;
	border-block-end: 1px solid var(--mn-rule);
	color: var(--mn-text-strong);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-fleet li:last-child .mn-fleet__link { border-block-end: 0; }
.mn-fleet__label { flex: 1; min-inline-size: 0; transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-fleet__status { display: inline-flex; align-items: center; gap: 6px; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--micro); font-weight: 500; white-space: nowrap; }
.mn-fleet__status .mn-led-dot--pending { background: var(--wp--preset--color--led-amber); box-shadow: none; }
.mn-fleet__link .mn-icon--arrow-right {
	inline-size: 16px;
	block-size: 16px;
	color: var(--mn-text-muted);
	transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-fleet__link:hover { color: var(--mn-link); }
.mn-fleet__link:hover .mn-icon--arrow-right { color: var(--mn-link); }
@media (hover: hover) and (pointer: fine) {
	.mn-fleet__link:hover .mn-fleet__label { transform: translateX(4px); }
	.mn-fleet__link:hover .mn-icon--arrow-right { transform: translateX(2px); }
}

@media (min-width: 960px) {
	.mn-rental__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: 56px; }
	.mn-rental__grid--solo { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1224px) {
	.mn-rental__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); column-gap: clamp(48px, 7vw, 112px); }
}
/* Below 1224 px the photo column is too narrow for the card to sit over the photo and leave it readable: the photo
   takes the landscape crop and the card sits under it, overlapping only its foot; the offset frame steps aside (it
   would peek out beside the card). 1440 px keeps B as Avi approved it. */
@media (max-width: 1223px) {
	.mn-rental__visual { padding: 0; }
	.mn-rental__frame::before { content: none; }
	.mn-rental__photo { aspect-ratio: 4 / 3; }
	.mn-fleet { position: relative; inset: auto; inline-size: auto; max-inline-size: 30rem; margin: -28px 16px 0; }
}
@media (min-width: 960px) and (max-width: 1223px) {
	.mn-fleet { max-inline-size: 26rem; }
}
@media (max-width: 599px) {
	.mn-rental__actions { flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--20); }
	.mn-rental__actions > .mn-arrow-link { align-self: flex-start; }
	.mn-fleet { margin-inline: 12px; padding-inline: 18px; }
}

/* 5. Shop by type head (the bento tiles are in units.css) --------------------------------------------------- */

.mn-shop .mn-section-head--split > .mn-arrow-link { flex: none; }

/* 6. Max-Atlas band (its model cards and the dealer badge are panels.css) ---------------------------------------- */

.mn-maxatlas .mn-section-head--split { align-items: flex-end; }

/* Card lists (hub tiles): one column on phones; each band sets its own columns in its media rules. (The model cards
   are panels.css.) */
.mn-hub__tiles { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }

.mn-maxatlas__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-block-start: 36px; }

@media (max-width: 781px) {
	.mn-maxatlas .mn-badge { inline-size: 100%; }
}
@media (max-width: 599px) {
	.mn-maxatlas__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* 7. Financing band and the Blue Capital plate (claims C5, C3) ---------------------------------------------- */

.mn-finance__grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
.mn-finance__copy .mn-section-head { margin-block-end: 0; }
.mn-finance__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-inline-size: 56ch;
	margin: 18px 0 0;
	color: var(--mn-text-muted);
	font-size: var(--wp--preset--font-size--small);
}
.mn-finance__note .mn-icon { inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--mn-link); }
.mn-finance__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-block-start: 32px; }

.mn-bc {
	position: relative;
	isolation: isolate;
	overflow: clip;
	box-sizing: border-box;
	padding: clamp(28px, 3.4vw, 44px);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--gradient--blue-capital);
	box-shadow: var(--wp--preset--shadow--raised);
}
:where(.mn-bc > p) { margin: 0; }
.mn-bc__glow { --mn-glow-strength: 0.28; inset-inline-end: -30%; inset-block-start: -40%; inline-size: 90%; block-size: 90%; filter: none; }
.mn-bc__logo .mn-partner-logo { display: block; inline-size: auto; block-size: 30px; }
.mn-bc__big {
	margin-block-start: 34px;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: var(--wp--custom--tracking--display);
	font-synthesis: none;
}
.mn-bc__sub { max-inline-size: 36ch; margin-block-start: 14px; color: var(--mn-text); font-size: var(--wp--preset--font-size--medium); line-height: var(--wp--custom--line-height--lede); }
.mn-bc__list { margin-block-start: 28px; border-color: rgba(255, 255, 255, 0.12); }
.mn-bc__list > li { gap: var(--wp--preset--spacing--30); border-color: rgba(255, 255, 255, 0.12); color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--ui); font-weight: 500; }
.mn-bc__list .mn-icon { color: var(--mn-ring-fg); }
.mn-bc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30); margin-block-start: 22px; }
.mn-bc__estimate .mn-icon--calculator { inline-size: 20px; block-size: 20px; }
.mn-bc__estimate:hover .mn-icon--calculator { transform: none; }
.mn-bc__domain { color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--micro); }

@media (min-width: 960px) {
	.mn-finance__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}
@media (min-width: 1224px) {
	.mn-finance__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); }
}
@media (max-width: 599px) {
	.mn-finance__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* 8. Driver and customer hub, roadside bar ---------------------------------------------------------------- */
/* On the white band (the page reads light): paper tiles that card-invert to ink on hover or focus, and the roadside
   bar as the band's one dark moment. From 960 px the documents tool stands on the left across two rows and the two
   link tiles stack beside it, each a compact row (icon, title and line, link), so no tile is left with a gap. */

.mn-hub-tile {
	--mn-tile-bg: var(--mn-surface-raised);
	--mn-tile-border: var(--mn-rule);
	--mn-tile-title: var(--mn-text-strong);
	--mn-tile-body: var(--mn-text);
	--mn-tile-accent: var(--mn-link);
	--mn-tile-chip-bg: var(--mn-tick-bg);
	--mn-tile-chip-fg: var(--mn-tick-fg);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border: 1px solid var(--mn-tile-border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-tile-bg);
	transition:
		background-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
:where(.mn-hub-tile > *) { margin: 0; }
/* Card invert: the whole tile turns ink with white type and a cyan chip. */
.mn-hub-tile.mn-card-host:is(:hover, :focus-within) {
	--mn-tile-bg: var(--wp--preset--color--ink-1);
	--mn-tile-border: var(--wp--preset--color--ink-1);
	--mn-tile-title: var(--wp--preset--color--white);
	--mn-tile-body: var(--wp--preset--color--on-dark-2);
	--mn-tile-accent: var(--wp--preset--color--cyan-300);
	--mn-tile-chip-bg: var(--wp--preset--color--cyan);
	--mn-tile-chip-fg: var(--wp--preset--color--ink-1);
	box-shadow: var(--wp--preset--shadow--lift);
}
@media (hover: hover) and (pointer: fine) {
	.mn-hub-tile.mn-card-host:hover { transform: translateY(-4px); }
}
.mn-hub-tile__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-tile-chip-bg);
	color: var(--mn-tile-chip-fg);
	transition: background-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease), color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-hub-tile__title {
	margin-block-start: 8px;
	color: var(--mn-tile-title);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
	transition: color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-hub-tile__text { color: var(--mn-tile-body); font-size: var(--wp--custom--font-size--ui); line-height: 1.5; transition: color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease); }
.mn-hub-tile .mn-hub-tile__link { align-self: flex-start; color: var(--mn-tile-accent); }
.mn-hub-tile .mn-hub-tile__link:hover { color: var(--mn-tile-accent); }

/* The roadside bar: ink on the light band, the cyan icon square and the number at display size. */
.mn-roadside {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: 20px;
	padding: 22px 26px;
	border-radius: var(--wp--custom--radius--lg);
	background: linear-gradient(90deg, rgba(var(--wp--custom--cyan-rgb), 0.16), rgba(var(--wp--custom--cyan-rgb), 0.03) 55%, transparent), var(--wp--preset--gradient--stage);
	box-shadow: var(--wp--preset--shadow--lift);
}
.mn-roadside__icon {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--cyan);
	box-shadow: 0 0 0 6px rgba(var(--wp--custom--cyan-rgb), 0.14);
	color: var(--wp--preset--color--ink-1);
}
.mn-roadside__text { margin: 0; }
.mn-roadside__text strong {
	display: block;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.mn-roadside__text span { display: block; margin-block-start: 3px; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); }
.mn-roadside__num {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-block-size: var(--wp--custom--target--button);
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--heading);
	text-decoration: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-roadside__num .mn-icon { color: var(--wp--preset--color--cyan); }
.mn-roadside__num:hover { color: var(--mn-link); }

@media (min-width: 600px) and (max-width: 959px) {
	.mn-hub__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mn-hub__tiles > .mn-doc-tool { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
	.mn-hub__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mn-hub__tiles--tool { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, auto); }
	.mn-hub__tiles--tool > .mn-doc-tool { grid-row: 1 / span 2; }
	/* The link tiles beside the tool: a compact row, centred in its half of the tool's height. */
	.mn-hub__tiles--tool > .mn-card-host {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		grid-template-areas: "icon title" "icon text" "icon link";
		align-content: center;
		gap: 6px 20px;
		padding: 24px 28px;
	}
	.mn-hub__tiles--tool > .mn-card-host .mn-hub-tile__icon { grid-area: icon; align-self: start; }
	.mn-hub__tiles--tool > .mn-card-host .mn-hub-tile__title { grid-area: title; margin: 0; }
	.mn-hub__tiles--tool > .mn-card-host .mn-hub-tile__text { grid-area: text; max-inline-size: 46ch; }
	.mn-hub__tiles--tool > .mn-card-host .mn-hub-tile__link { grid-area: link; justify-self: start; margin-block-start: 2px; }
}
@media (max-width: 781px) {
	.mn-roadside { grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; padding: 20px; }
	.mn-roadside__num { grid-column: 1 / -1; }
}

/* 9. More at the yard ------------------------------------------------------------------------------------- */

.mn-yard__grid { display: grid; gap: 20px; align-items: start; }

/* The row list: numbered rows with an icon square and one stretched action each. */
.mn-rows {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface-raised);
	box-shadow: var(--mn-shadow-card);
	list-style: none;
}
.mn-row {
	flex: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 16px;
	padding: 22px 20px;
	border-block-end: 1px solid var(--mn-rule);
	transition: background-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-row:last-child { border-block-end: 0; }
.mn-row::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background: var(--wp--preset--color--cyan);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-row:is(:hover, :focus-within) { background: var(--mn-surface); } /* paper on a white card, white on a paper card */
/* The list clips its rows, so a row's focus ring sits inside it. */
.mn-row.mn-card-host:has(.mn-stretch:focus-visible) { outline-offset: calc(-1 * var(--wp--custom--focus--offset)); }
.mn-row:is(:hover, :focus-within)::before { transform: scaleY(1); }
.mn-row__n { display: none; color: var(--mn-text-muted); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mn-row__icon {
	box-sizing: border-box;
	display: grid;
	grid-row: 1 / span 2;
	align-self: start;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-surface);
	color: var(--mn-text-strong);
	transition:
		background-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-row:is(:hover, :focus-within) .mn-row__icon { border-color: var(--wp--preset--color--ink-1); background: var(--wp--preset--color--ink-1); color: var(--wp--preset--color--cyan); }
:where(.mn-row__text > *) { margin: 0; }
.mn-row__title {
	color: var(--mn-text-strong);
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); /* A's row heading (02 §7.28) */
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: -0.025em;
}
.mn-row__text p { margin-block-start: 6px; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--ui); }
.mn-row .mn-row__go { grid-column: 2; justify-self: start; color: var(--mn-link); white-space: nowrap; }

@media (min-width: 782px) {
	.mn-row { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 22px; padding: 26px 28px; }
	.mn-row__n { display: block; inline-size: 24px; }
	.mn-row__icon { grid-row: auto; align-self: center; inline-size: 52px; block-size: 52px; }
	.mn-row .mn-row__go { grid-column: auto; justify-self: end; }
}
@media (min-width: 960px) {
	.mn-yard__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* Beside the rows the visit card keeps its own shape (it never stretches to the rows, so opening the sell stepper
   leaves it as it is); the rows keep their natural height. */
/* Phones: a floor height, no ratio (a ratio with a min-height would turn that height into a min-width). */
.mn-yard .mn-visit { min-block-size: 380px; }
@media (min-width: 600px) and (max-width: 959px) {
	.mn-yard .mn-visit { min-block-size: 0; aspect-ratio: 16 / 9; }
}
/* Beside the rows: about the rows' own height with three or four of them (4 : 5 while the rows are narrow and two
   lines tall, 5 : 4 from 1224 px). */
@media (min-width: 960px) {
	.mn-yard .mn-visit { min-block-size: 0; aspect-ratio: 4 / 5; }
}
@media (min-width: 1224px) {
	.mn-yard .mn-visit { aspect-ratio: 5 / 4; }
}
.mn-yard .mn-row { flex: none; }
/* Beside the visit panel the rows are narrow until 1224 px: the action goes under the line, so titles keep one line. */
@media (min-width: 960px) and (max-width: 1223px) {
	.mn-row { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 8px; padding-block: 22px; }
	.mn-row > :is(.mn-row__n, .mn-row__icon) { grid-row: 1 / span 2; }
	.mn-row .mn-row__go { grid-column: 3; justify-self: start; }
}

/* 11. Motion ------------------------------------------------------------------------------------------------ */
/* The hero photo settles once; the copy rises in (theme.css .mn-rise). Both only without reduced motion. */

@media (prefers-reduced-motion: no-preference) {
	:is(.mn-hero__media, .mn-hero__media > picture) > img { animation: mn-settle var(--wp--custom--motion--settle) var(--wp--custom--motion--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
	.mn-hub-tile.mn-card-host:hover { transform: none; }
	.mn-hero__visit:hover .mn-icon--arrow-right,
	.mn-fleet__link:hover .mn-fleet__label,
	.mn-fleet__link:hover .mn-icon--arrow-right { transform: none; }
}