/*
 * Help center (HELP-1 A, 2026-10-14): /{lang}/help/, /help/whats-new/, /help/{slug}/.
 * Drawn first in the brand guide (#help), which loads this file too.
 *
 * Redesign 2026-10-14 (HELP-PLUGIN = A + redesign; widths measured on nine real
 * help centres, docs/help-and-pro-design-research-2026-10-14.md). The width
 * tokens live in design-system.css:
 *   --mot-help-page  1120 px  the hub grid, What's new cards, "Still stuck?"
 *   --mot-help-text   680 px  every reading column (about 70 characters a line)
 *   --mot-help-rail   240 px  the article's rail ("In this article", related)
 * --_help-w is the page's content width; "Still stuck?" takes it, so it lines
 * up with the content above it on every page type (hub, article, What's new).
 *
 * Tokens only (design-system.css), BEM, Lucide. Cards = border + shadow;
 * emphasis = raised surface + border, never inverted; orange stays for the
 * page's one primary action, and help pages have none (search is secondary).
 * Headings use doubled classes: `.mot-page-wrap h1..h4` (0,1,1) would win over one.
 * Modifiers sit BELOW their base rule, including the base's phone rule: a
 * phone override of a base property sits directly under the base, above the
 * modifier, or the later media rule beats the modifier (tester 2026-10-14).
 */

/* ─── Page ─────────────────────────────────────────────────────────────── */
.mot-help {
	--_help-w: min(var(--mot-help-page), calc(100% - 2 * var(--sp-4, 1rem)));
	padding-bottom: var(--sp-16, 4rem);
}
/* The article page: the reading column + the rail. */
.mot-help--article { --_help-w: min(calc(var(--mot-help-text) + var(--mot-help-rail) + var(--sp-16, 4rem)), calc(100% - 2 * var(--sp-4, 1rem))); }

/* ─── Hero band: crumbs, title, lead, search, centred ───────────────────
   The brand pattern behind it (--mot-pattern-hero, a file per theme), v2,
   3000x1500, at `cover` (Ayrton 2026-10-14). On a band wider than 2:1 (from
   about 500 px) cover fits the WIDTH and only the y of the position moves it;
   on a phone it fits the HEIGHT and only the x moves it. 28 % shows the band where the route comes down right
   of the title and passes behind the search field's right end (the field is
   opaque): clear of crumbs, title and lead by 8 px from 1100 px up. Below
   that the centred text takes too much of the band: the route's long right
   arm and its top loop are under some text at EVERY position (measured
   1024/768/390/360, NL), so the band keeps the least crossing: 18 % on a
   phone (the top loop beside the crumbs, the right arm at the edge). The
   lines stay >= 4.5:1 under every text colour on the band (brand guide
   #pattern). */
.mot-help-hero {
	padding-block: var(--sp-10, 2.5rem) var(--sp-12, 3rem);
	background-color: var(--mot-bg-raised);
	background-image: var(--mot-pattern-hero);
	background-repeat: no-repeat;
	background-position: 18% 28%;
	background-size: cover;
	border-bottom: 1px solid var(--mot-border);
	margin-bottom: var(--sp-10, 2.5rem);
	text-align: center;
}
@media (max-width: 600px) {
	.mot-help-hero { padding-block: var(--sp-6, 1.5rem) var(--sp-8, 2rem); margin-bottom: var(--sp-6, 1.5rem); }
}
.mot-help-hero__inner {
	width: min(var(--mot-help-text), calc(100% - 2 * var(--sp-4, 1rem)));
	margin-inline: auto;
}
.mot-help-hero__crumbs { margin-bottom: var(--sp-5, 1.25rem); }
.mot-help-hero__crumbs ol { justify-content: center; }
.mot-help-hero__title.mot-help-hero__title {
	font-family: var(--mot-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 var(--sp-3, .75rem);
	text-wrap: balance;
}
.mot-help-hero__lead {
	margin: 0 auto var(--sp-6, 1.5rem);
	max-width: 52ch;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--mot-text-muted);
}
.mot-help-hero--plain { padding-block: var(--sp-8, 2rem) var(--sp-10, 2.5rem); }
@media (max-width: 600px) {
	.mot-help-hero--plain { padding-block: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem); }
}
.mot-help-hero--plain .mot-help-hero__lead { margin-bottom: 0; }

/* ─── Search field: 56 px in the hero, compact in the article rail ─────── */
.mot-help-search { max-width: var(--mot-help-text); margin-inline: auto; text-align: left; }
.mot-help-search__bar { padding-right: 6px; }
.mot-help-search__bar.mot-searchbar--inline { box-shadow: var(--mot-shadow); }
.mot-help-search__bar .mot-searchbar__icon { left: 20px; width: 18px; height: 18px; }
.mot-help-search__input.mot-searchbar__input { min-height: 56px; padding-left: 50px; font-size: 1rem; }
/* HELP-POLISH (Chrome tester 2026-10-16). Chrome's native cancel "x" is blue and off-system; the site
   has no clear button for a search field, and Escape already clears this one (help-search.js: the first
   Escape closes the list, the second empties the field), so the native one goes. The bar's focus is the
   text-field standard (FOCUS-1 = B, `.mot-input:focus`: border + 1 px ring in the text colour), not the
   inline searchbar's orange: orange is the CTA's only. */
.mot-help-search__input::-webkit-search-cancel-button,
.mot-help-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.mot-help-search__bar.mot-searchbar--inline:focus-within { border-color: var(--mot-text); box-shadow: var(--mot-shadow), 0 0 0 1px var(--mot-text); }
.mot-help-search--compact .mot-help-search__bar.mot-searchbar--inline:focus-within { box-shadow: 0 0 0 1px var(--mot-text); }
.mot-help-search__go.mot-btn { flex: none; border-radius: var(--mot-radius-pill); min-height: 44px; padding-inline: 20px; }
.mot-help-search--compact { max-width: none; margin: 0 0 var(--sp-3, .75rem); }
.mot-help-search--compact .mot-help-search__bar.mot-searchbar--inline { box-shadow: none; }
.mot-help-search--compact .mot-help-search__bar .mot-searchbar__icon { left: 14px; width: 16px; height: 16px; }
.mot-help-search--compact .mot-help-search__input.mot-searchbar__input { min-height: 44px; padding: 8px 14px 8px 40px; font-size: .875rem; }
.mot-help-search--compact .mot-help-search__go { display: none; }

/* ─── Suggestions under the search field (HELP-SEARCH A, 2026-10-14) ───────
   help-search.js. The panel IS the hero search dropdown (`.mot-searchbar__results`:
   card surface, border, raised shadow, the dropdown entrance) and every row is a
   `.mot-suggestion` (its hover = keyboard highlight). What is help's own: text
   rows (title over topic, no tile: an article has no picture), the typed part in
   bold, the quiet EN label, opening upwards when the field sits low. Monochrome:
   no orange in the list (focus ring aside). */
.mot-help-suggest {
	padding: var(--sp-2, .5rem);
	max-height: var(--mot-help-suggest-max, 420px);
}
.mot-help-suggest__list[hidden],
.mot-help-suggest__empty[hidden] { display: none; }
.mot-help-suggest__option {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 44px;
	justify-content: center;
	padding: var(--sp-2, .5rem) var(--sp-3, .75rem);
	border: 1px solid transparent;
	color: var(--mot-text);
}
.mot-help-suggest__list .mot-suggestion + .mot-suggestion { margin-top: 2px; }
.mot-help-suggest__title {
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.mot-help-suggest__hit {
	background: none;
	color: inherit;
	font-weight: 700;
}
.mot-help-suggest__meta {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2, .5rem);
	font-size: .8125rem;
	line-height: 1.3;
	color: var(--mot-text-muted);
}
.mot-help-suggest__empty {
	margin: 0;
	padding: var(--sp-4, 1rem) var(--sp-3, .75rem);
	font-size: .875rem;
	line-height: 1.45;
	color: var(--mot-text-muted);
	text-align: center;
}
/* Opens upwards when there is more room above (the article rail, a short window). */
.mot-help-suggest--up {
	top: auto;
	bottom: calc(100% + 8px);
}
/* The rail (from 1000 px, where it is a 240 px column): at least 360 px wide,
   growing to the left from the field's right edge (the rail itself does not clip:
   only "In this article" is sticky and scrolls, 2026-10-14). Below 1000 px the rail is a full-width card: the panel keeps the
   field's width (wider overflowed the 390 px screen by 6 px, beta 2026-10-14). */
@media (min-width: 1000px) {
	.mot-help-search--compact .mot-help-suggest {
		left: auto;
		right: 0;
		width: max(100%, 360px);
	}
}

/* ─── Topics: equal cards, rows that fill ──────────────────────────────
   HELP-COLS-3 (Ayrton 2026-10-18: "4 kolommen te veel ... 3 kolommen"): two
   columns from 640 px, three from 1200 px (7 = 3 + 3 + 1). A
   last card that WOULD stand alone in its row takes the whole row and puts
   its articles in columns, so a row never holds one narrow card,
   whatever number of topics has published articles. */
.mot-help-topics {
	width: var(--_help-w);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4, 1rem);
}
@media (min-width: 640px) {
	.mot-help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5, 1.25rem); }
}
@media (min-width: 640px) and (max-width: 1199px) {
	.mot-help-topic:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.mot-help-topic:last-child:nth-child(odd) .mot-help-topic__list { columns: 2; column-gap: var(--sp-6, 1.5rem); }
}
@media (min-width: 1200px) {
	.mot-help-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mot-help-topic:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	.mot-help-topic:last-child:nth-child(3n + 1) .mot-help-topic__list { columns: 3; column-gap: var(--sp-6, 1.5rem); }
}
.mot-help-topic {
	display: flex;
	flex-direction: column;
	background: var(--mot-bg-card);
	border: 1px solid var(--mot-border);
	border-radius: var(--mot-radius-lg);
	box-shadow: var(--mot-shadow-sm);
	padding: var(--sp-5, 1.25rem) var(--sp-5, 1.25rem) var(--sp-2, .5rem);
	scroll-margin-top: var(--mot-header-offset);
}
.mot-help-topic__head {
	display: flex;
	align-items: center;
	gap: var(--sp-3, .75rem);
}
/* The icon tells the topics apart: muted glyph on a raised tile, never orange. */
.mot-help-topic__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--mot-radius);
	background: var(--mot-bg-raised);
	border: 1px solid var(--mot-border);
	color: var(--mot-text);
}
.mot-help-topic__icon svg { width: 20px; height: 20px; }
.mot-help-topic__title.mot-help-topic__title {
	font-family: var(--mot-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.mot-help-topic__lead {
	margin: var(--sp-3, .75rem) 0 var(--sp-2, .5rem);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--mot-text-muted);
}
.mot-help-topic__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mot-help-topic__list li { border-top: 1px solid var(--mot-border); break-inside: avoid; }
.mot-help-topic__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2, .5rem);
	min-height: var(--mot-control-h);
	padding-block: 10px;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mot-text);
}
.mot-help-topic__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* "EN": the article is shown in English in this language (no translation yet). Quiet, never a pill per row. */
.mot-help-lang {
	flex: none;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--mot-text-muted);
	text-decoration: none;
}

/* ─── Search results + generic row list ────────────────────────────────── */
.mot-help-results {
	width: min(var(--mot-help-text), calc(100% - 2 * var(--sp-4, 1rem)));
	margin-inline: auto;
}
.mot-help-results__title.mot-help-results__title {
	font-family: var(--mot-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 var(--sp-4, 1rem);
}
.mot-help-results__empty { color: var(--mot-text-muted); }
.mot-help-results__back { margin-top: var(--sp-6, 1.5rem); }
.mot-help-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--mot-bg-card);
	border: 1px solid var(--mot-border);
	border-radius: var(--mot-radius-lg);
	box-shadow: var(--mot-shadow-sm);
	overflow: hidden;
}
.mot-help-list__item + .mot-help-list__item { border-top: 1px solid var(--mot-border); }
.mot-help-list__link {
	display: grid;
	gap: var(--sp-1, .25rem);
	padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
	color: var(--mot-text);
	transition: background var(--mot-transition);
}
.mot-help-list__link:hover { background: var(--mot-bg-raised); }
.mot-help-list__title { font-weight: 700; }
.mot-help-list__summary { font-size: .875rem; color: var(--mot-text-muted); }
.mot-help-list__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-2, .5rem);
	font-size: .75rem;
	color: var(--mot-text-muted);
}

/* ─── What's new: the site's blog cards (_blog-card.php, blog.css) ────────
   The blog's own grid (.mot-blog-grid: 1 column, 2 from 600 px, 3 from
   960 px) in the page width, on the hub (the three newest) and on
   /help/whats-new/ (all of them). Nothing of its own but the block's head. */
.mot-help-newsblock {
	width: var(--_help-w);
	margin: var(--sp-16, 4rem) auto 0;
}
@media (max-width: 600px) {
	.mot-help-newsblock { margin-top: var(--sp-12, 3rem); }
}
.mot-help-newsblock__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4, 1rem);
	margin-bottom: var(--sp-4, 1rem);
}
.mot-help-newsblock__title.mot-help-newsblock__title {
	font-family: var(--mot-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}
.mot-help-newsblock .mot-blog-grid { padding-bottom: 0; }
.mot-help-newsblock__more { margin-top: var(--sp-6, 1.5rem); }
.mot-help-newsblock--page { margin-top: 0; }

/* ─── Article: reading column + rail ─────────────────────────────────────
   From 1000 px only "In this article" is sticky; related and the search
   follow under it and scroll with the page. The whole rail (about 615 px)
   used to be sticky, which on a short article meant it scrolled away anyway
   (tester 2026-10-14). The rail stretches to the article's height so the
   contents stay in view to the end; what scrolls up passes under them. */
.mot-help-layout {
	width: var(--_help-w);
	margin: var(--sp-6, 1.5rem) auto 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-10, 2.5rem);
}
@media (min-width: 1000px) {
	.mot-help-layout {
		grid-template-columns: minmax(0, var(--mot-help-text)) var(--mot-help-rail);
		justify-content: space-between;
		gap: var(--sp-16, 4rem);
	}
	.mot-help-aside { padding-top: 44px; }
}
.mot-help-article { min-width: 0; max-width: var(--mot-help-text); }
.mot-help-article__crumbs { margin-bottom: var(--sp-5, 1.25rem); }
.mot-help-article__head { margin-bottom: var(--sp-5, 1.25rem); }
.mot-help-article__title.mot-help-article__title {
	font-family: var(--mot-font-heading);
	font-size: clamp(1.75rem, 3.6vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--sp-2, .5rem);
	text-wrap: balance;
}
.mot-help-article__updated {
	margin: 0;
	font-size: .8125rem;
	color: var(--mot-text-muted);
}
/* The short answer: emphasis = raised + border. */
.mot-help-article__answer {
	margin: 0 0 var(--sp-6, 1.5rem);
	padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
	background: var(--mot-bg-raised);
	border: 1px solid var(--mot-border);
	border-radius: var(--mot-radius);
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--mot-text);
}
.mot-help-article__body { font-size: 1.0625rem; line-height: 1.7; color: var(--mot-text); }
.mot-help-article__body > :first-child { margin-top: 0; }
.mot-help-article__body p,
.mot-help-article__body li { color: var(--mot-text); }
.mot-help-article__body h2 {
	font-family: var(--mot-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin: var(--sp-10, 2.5rem) 0 var(--sp-3, .75rem);
	scroll-margin-top: var(--mot-header-offset);
}
.mot-help-article__body h3 {
	font-family: var(--mot-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	margin: var(--sp-6, 1.5rem) 0 var(--sp-2, .5rem);
}
.mot-help-article__body a { text-decoration: underline; text-underline-offset: 3px; }
.mot-help-article__body img {
	border-radius: var(--mot-radius);
	border: 1px solid var(--mot-border);
}
.mot-help-article__body ul { padding-left: 1.25rem; }
.mot-help-article__body li + li { margin-top: 6px; }
/* Numbered steps: a real sequence, so the numbers are drawn, not decoration. */
.mot-help-article__body ol {
	list-style: none;
	padding-left: 0;
	counter-reset: mot-help-step;
}
.mot-help-article__body ol > li {
	counter-increment: mot-help-step;
	position: relative;
	padding-left: 2.75rem;
	min-height: 1.75rem;
}
.mot-help-article__body ol > li + li { margin-top: var(--sp-3, .75rem); }
.mot-help-article__body ol > li::before {
	content: counter(mot-help-step);
	position: absolute;
	left: 0;
	top: .05em;
	display: grid;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: var(--mot-radius-pill);
	border: 1px solid var(--mot-border-strong, var(--mot-border));
	background: var(--mot-bg-raised);
	font-family: var(--mot-font-heading);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1;
}
.mot-help-article__faq { margin-top: var(--sp-10, 2.5rem); }
.mot-help-article__faq .mot-faq { margin-bottom: 0; }
/* The FAQ is a section of the article: its title is an article h2 (20 px),
   not the page-level h2 (24 px) that out-ranked them (tester 2026-10-14). */
.mot-help-article__faq .mot-faq__title {
	font-family: var(--mot-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--sp-3, .75rem);
}
.mot-help-article .mot-notice { margin: 0 0 var(--sp-4, 1rem); }

/* "In this article": the text's h2s. A closed disclosure above the text on a
   phone and tablet (--inline), a list in the rail from 1000 px (--rail). */
.mot-help-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--mot-border);
}
.mot-help-toc__link {
	display: block;
	margin-left: -1px;
	padding: 6px 0 6px var(--sp-3, .75rem);
	border-left: 2px solid transparent;
	font-size: .875rem;
	line-height: 1.4;
	color: var(--mot-text-muted);
}
.mot-help-toc__link:hover { color: var(--mot-text); border-left-color: var(--mot-text); }
.mot-help-toc--inline {
	margin: 0 0 var(--sp-6, 1.5rem);
	border: 1px solid var(--mot-border);
	border-radius: var(--mot-radius);
	background: var(--mot-bg-card);
}
.mot-help-toc--inline .mot-help-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2, .5rem);
	min-height: 48px;
	padding: 0 var(--sp-4, 1rem);
	font-weight: 700;
	font-size: .9375rem;
	cursor: pointer;
	list-style: none;
}
.mot-help-toc--inline .mot-help-toc__title::-webkit-details-marker { display: none; }
.mot-help-toc--inline .mot-help-toc__chevron { width: 16px; height: 16px; color: var(--mot-text-muted); transition: transform var(--mot-transition); }
.mot-help-toc--inline[open] .mot-help-toc__chevron { transform: rotate(180deg); }
.mot-help-toc--inline .mot-help-toc__list { margin: 0 var(--sp-4, 1rem) var(--sp-4, 1rem); }
.mot-help-toc--rail { display: none; }
@media (min-width: 1000px) {
	.mot-help-toc--inline { display: none; }
	/* Sticky, on the page ground so what scrolls up under it is hidden. It
	   sticks right under the header with its own ground filling the gap down
	   to --mot-header-offset (padding, pulled back by the margin), and padding,
	   not margin, below it: related scrolled up into either gap and showed
	   through (beta 2026-10-14). */
	.mot-help-toc--rail {
		display: block;
		position: sticky;
		top: var(--mot-header-h, 64px);
		z-index: 1;
		max-height: calc(100vh - var(--mot-header-h, 64px) - var(--sp-6, 1.5rem));
		overflow-y: auto;
		margin-top: calc(var(--mot-header-h, 64px) - var(--mot-header-offset));
		padding-top: calc(var(--mot-header-offset) - var(--mot-header-h, 64px));
		padding-bottom: var(--sp-8, 2rem);
		background: var(--mot-bg);
	}
}

.mot-help-aside__block + .mot-help-aside__block { margin-top: var(--sp-8, 2rem); }
.mot-help-aside__title.mot-help-aside__title {
	font-family: var(--mot-font-heading);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mot-text-muted);
	margin: 0 0 var(--sp-3, .75rem);
}
.mot-help-aside__list { list-style: none; margin: 0; padding: 0; }
.mot-help-aside__list li + li { border-top: 1px solid var(--mot-border); }
.mot-help-aside__link {
	display: block;
	padding-block: 10px;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mot-text);
}
.mot-help-aside__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mot-help-aside__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--mot-control-h);
	font-size: .875rem;
	font-weight: 600;
	color: var(--mot-text-muted);
}
.mot-help-aside__back:hover { color: var(--mot-text); }
/* Phone + tablet: the rail follows the article as one card. */
@media (max-width: 999px) {
	.mot-help-aside {
		padding: var(--sp-5, 1.25rem);
		background: var(--mot-bg-card);
		border: 1px solid var(--mot-border);
		border-radius: var(--mot-radius-lg);
		box-shadow: var(--mot-shadow-sm);
		max-width: var(--mot-help-text);
	}
}

/* ─── Still stuck? ─────────────────────────────────────────────────────── */
.mot-help-stuck {
	width: var(--_help-w);
	margin: var(--sp-16, 4rem) auto 0;
}
.mot-help-stuck__inner {
	display: grid;
	gap: var(--sp-5, 1.25rem);
	padding: var(--sp-6, 1.5rem);
	background: var(--mot-bg-raised);
	border: 1px solid var(--mot-border);
	border-radius: var(--mot-radius-lg);
}
@media (min-width: 768px) {
	.mot-help-stuck__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--sp-8, 2rem);
		padding: var(--sp-8, 2rem);
	}
}
.mot-help-stuck__title.mot-help-stuck__title {
	font-family: var(--mot-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 var(--sp-2, .5rem);
}
.mot-help-stuck__text { margin: 0; color: var(--mot-text); }
.mot-help-stuck__note {
	margin: var(--sp-2, .5rem) 0 0;
	font-size: .8125rem;
	color: var(--mot-text-muted);
}
.mot-help-stuck__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2, .5rem);
}
.mot-help-stuck__actions .mot-btn { max-width: 100%; overflow-wrap: anywhere; }

/* ─── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.mot-help-hero__lead { font-size: 1rem; margin-bottom: var(--sp-5, 1.25rem); }
	.mot-help-search__input.mot-searchbar__input { min-height: 52px; padding-left: 46px; }
	.mot-help-search__bar .mot-searchbar__icon { left: 16px; }
	.mot-help-search__go.mot-btn { padding-inline: 14px; }
	.mot-help-topic { padding: var(--sp-4, 1rem) var(--sp-4, 1rem) var(--sp-1, .25rem); }
	.mot-help-list__link { padding: var(--sp-3, .75rem) var(--sp-4, 1rem); }
	.mot-help-stuck { margin-top: var(--sp-12, 3rem); }
	.mot-help-stuck__inner { padding: var(--sp-5, 1.25rem); }
	.mot-help-article__body { font-size: 1rem; }
}