/* ═══════════════════════════════════════════════════════════════════════════
   SECTION BASE — the shell every ACF section renders inside, the heading group
   every family instances, the button in all six hierarchies, and the card,
   stat, quote and gallery lists.

   Hand-written, plain CSS, no Tailwind rebuild (same rule as assets/css/cpt/*).
   It re-opens `@layer components` so Tailwind utilities still win over it:
   main.css declares the layer order and is parsed first, which is why this file
   depends on `rmd-main` in the enqueue.

   ★ EVERY value is a var() with the DS number as its fallback, so the design is
   exact even if tokens.css fails to load — and decision D-03 is proven end to
   end without touching a single existing literal.

   LIGHT MODE ONLY (decision D-02). The two surfaces below are the only two the
   catalog measured across all 63 layouts.

   Scope: section content on owned views. The chrome keeps its own UNLAYERED
   stylesheet because the parent theme's sheets are unlayered and a layered rule
   can never out-rank them — but on an owned view those are dequeued, so section
   content can safely live in a layer.

   Spec: RMD-design-system/catalog/section-catalog.md — shell §1, heading §2, buttons §4.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer components {

	/* ══ BREAKPOINTS ═══════════════════════════════════════════════════════
	   SIX, and tests/audit.py holds the list. This file ran FIFTEEN — 480, 560,
	   600, 640, 680, 720, 760, 860, 900, 1000, 1023, 1100, 1120, 1248 — each
	   picked per variant against a 1440 render, under a premise (recorded in
	   tokens.css and now corrected) that the DS gave no tiers below desktop
	   and they were ours to invent. ↪ Layout Grid (46791:49869) says otherwise.

	   Clustered 22/10, every move ROUNDED UP:
	     480 / 560 / 600 →  640     680 / 720 →  760
	     860              →  900     1000      → 1023      1100 → 1120
	   Up, never down, because a max-width rule that fires EARLIER can only
	   collapse a layout sooner — it can never leave one overflowing between
	   the old value and the new. The two min-width rules move with the
	   max-width they pair with (861 → 901 beside 900; 1249 stays beside 1248).

	   ⚠ 560 → 640 moved 21 rules, by far the largest shift, and it is the one
	   to look at: those bands now go single-column at 640 rather than 560, so
	   a 600px-wide viewport sees one column where it used to see two.

	   These six are NOT yet the DS's three tiers. The DS gives the column
	   arithmetic (12/78/24, 8/72/20, 6/40/16) but no viewport widths, and every
	   UI Block is drawn at 1440, so there is nothing to check a three-tier
	   rewrite against. Six measured tiers beat three invented ones; converging
	   is a separate job with a render in front of you. */


	/* ── 1. the shell (§1) ───────────────────────────────────────────────── */

	.rmd-s {
		padding-block: var(--space-100, 100px);
		background: var(--color-surface-canvas, #fff);
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s--surface-canvas     { background: var(--color-surface-canvas, #fff); }
	.rmd-s--surface-canvas-alt { background: var(--color-surface-canvas-alt, #f8fafc); }

	/* The token is the CONTENT width the DS draws in — 1200 inside a 1440 frame
	   — so the gutter belongs OUTSIDE it. `max-width: 1200` with 24 of padding
	   is a 1152 content box (everything is border-box, from Tailwind's
	   preflight), and EVERY column width in the measured blocks below was read
	   off a 1200 one: Features 01's 550 + 67 + 576, Features 13's 568 + 24 +
	   608, Features 15's 585 + 48 + 567. They were each 48px short of the
	   design, which is also why fixed-pixel columns crowded their neighbours.
	   Adding the gutter back reproduces the DS's own margin exactly: at a 1440
	   viewport the content starts 120 from the edge, which is where Figma puts
	   it. A band that runs edge to edge sets --rmd-gutter: 0 rather than
	   zeroing the padding, so the max-width follows it in one move. */
	.rmd-s-wrap {
		--rmd-gutter: var(--space-2xl, 24px);
		max-width: calc(var(--screen-desktop-max-content, 1200px)
			+ 2 * var(--rmd-gutter, var(--space-2xl, 24px)));
		margin-inline: auto;
		padding-inline: var(--rmd-gutter, var(--space-2xl, 24px));
	}

	/* ── 2. the heading group (§2) ───────────────────────────────────────── */
	/* Three DS variants. `stacked` is two 584 columns; `left-aligned` puts body
	   and CTA on one row under the title; `centered` stacks everything middle. */

	/* 48 under the heading group, not 64. The structural read guessed 64 and
	   every variant measured since has contradicted it: 31 of them state 48
	   outright — Features 01, 13 and 15 were each read straight off their node
	   (heading container 104 or 172 tall, first band at 152 or 220) — and the
	   only two that differ, Content 07 and Features 07, say 64 because there
	   the gutter belongs to an inner panel rather than to the band. Thirty
	   variants never stated it and were inheriting the wrong number. */
	.rmd-s-head {
		display: grid;
		gap: var(--space-2xl, 24px);
		margin-bottom: var(--spacing-48, 48px);
	}
	.rmd-s-head--stacked     { grid-template-columns: 1fr 1fr; align-items: end; }
	.rmd-s-head--centered    { justify-items: center; text-align: center; }
	.rmd-s-head-main         { min-width: 0; }
	.rmd-s-head-aside        { min-width: 0; display: grid; gap: var(--space-2xl, 24px); align-content: start; }
	.rmd-s-head--centered .rmd-s-head-aside { justify-items: center; }

	/* A carousel's heading shares its row with the arrows, which sit at the
	   BOTTOM of it (46968:16167, items-end) — level with the last line of the
	   lead, not with the title. */
	/* Same 48 under it: this is the same heading group with the arrows beside
	   it, and a carousel does not stand further from its band than a grid. */
	.rmd-s-headrow {
		display: flex;
		align-items: flex-end;
		gap: var(--spacing-32, 32px);
		margin-bottom: var(--spacing-48, 48px);
	}
	/* 0,3,0: a family's « 48 under every heading » (Features) is 0,2,0 and
	   later, and beat this — Features 01's heading kept its 48 inside the row,
	   so the arrows, aligned to its foot, sat 48 BELOW the title (23/10). */
	.rmd-s .rmd-s-headrow > .rmd-s-head { flex: 1 1 0; min-width: 0; margin-bottom: 0; }

	/* The DS has ONE overline and it is a PILL: indigo tint, radius full, a
	   Label XL in accent/on-indigo and a two-colour arrow badge, carrying the
	   same three-way 2% shadow. Every node that shows an overline binds that
	   component — the heroes and the CTA band, but also all nine Content
	   variants, Stats 01 and 02, Bento 05, Cards 02 and 05. It used to be
	   listed variant by variant, so the eleven that were not on the list fell
	   back to spaced uppercase Inter, which is not in the design file at all.
	   A node that hides its overline renders nothing here either, because the
	   field is empty.
	   `margin: 0` on purpose: the 16 above the title is the heading group's
	   own gap (every alignment sets it), and a margin here would add to it —
	   which is exactly how Stats 01 came out at 28. */
	.rmd-s-overline {
		margin: 0;
		justify-self: start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-sm, 8px);
		padding: 10px 10px 10px 18px;
		border-radius: 100px;
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-xl, 14px);
		letter-spacing: normal;
		text-transform: none;
		box-shadow: 0 4px 10px rgba(0, 0, 0, .02), 4px 0 10px rgba(0, 0, 0, .02),
			-4px 0 10px rgba(0, 0, 0, .02);
	}
	.rmd-s-overline::after {
		content: "";
		width: 32px;
		height: 20px;
		flex: none;
		background: url("../img/sections/overline-arrow.svg") center / contain no-repeat;
	}

	.rmd-s-title {
		margin: 0;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-h3, 40px);
		line-height: 1.3;
		color: var(--color-content-primary, #0f172b);
	}
	/* The one heading scale of the theme, owner's call 04/11: variants inherit
	   it and set no size of their own, even where the Figma node drew another.
	   The DS defines no mobile type scale. The featured bento cards are the only
	   exception (their own rules, below the card title). */
	h1.rmd-s-title { font-size: var(--font-size-h2, 48px); }
	@media (max-width: 760px) {
		.rmd-s-title { font-size: var(--font-size-h4, 32px); }
		h1.rmd-s-title { font-size: var(--font-size-h3, 40px); }
	}
	/* §3.4: two ramps are in use at different angles and the designer has not
	   settled one, so both ship as named utilities and the block picks. */
	.rmd-s-title--sunrise,
	.rmd-s-title--dawn {
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}
	.rmd-s-title--sunrise { background-image: var(--gradient-promotional-sunrise, linear-gradient(142.72deg, #ec003f 0%, #fb2c36 50%, #ff8904 100%)); }
	.rmd-s-title--dawn    { background-image: var(--gradient-text-dawn, linear-gradient(149.7deg, #3943FF 40%, #E4004D 70%, #FA9329 100%)); }

	.rmd-s-lead {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s-lead p { margin: 0 0 var(--space-lg, 16px); }
	.rmd-s-lead > :last-child { margin-bottom: 0; }

	.rmd-s-actions { display: flex; flex-wrap: wrap; gap: var(--space-md, 12px); }

	/* ── 3. the button (§4.2 size · §4.3 shape · §4.4 hierarchy) ─────────── */
	/* Three INDEPENDENT axes, so three class groups. Adding a size must never
	   multiply the hierarchy list. */

	.rmd-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs, 4px);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		border: 0;
		cursor: pointer;
		transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	}

	/* size — the height does the work; py is always none (§4.2) */
	.rmd-btn--xs { height: var(--scale-28, 28px); padding-inline: var(--space-md, 12px); font-size: var(--font-size-label-md, 12px); }
	.rmd-btn--sm { height: var(--scale-36, 36px); padding-inline: var(--space-md, 12px); font-size: var(--font-size-label-lg, 13px); }
	.rmd-btn--md { height: var(--scale-40, 40px); padding-inline: var(--space-md, 12px); font-size: var(--font-size-label-xl, 14px); }
	.rmd-btn--lg { height: var(--scale-48, 48px); padding-inline: var(--space-lg, 16px); font-size: var(--font-size-label-2xl, 16px); }

	/* shape (§4.3) — radius/4 or a full pill. Nothing else changes. */
	.rmd-btn--standard { border-radius: var(--radius-4, 4px); }
	.rmd-btn--rounded  { border-radius: var(--radius-full, 9999px); }

	/* hierarchy (§4.4) */
	.rmd-btn--primary {
		background: var(--color-button-primary-default, #1e1a4d);
		color: var(--color-content-static-white, #fff);
	}
	.rmd-btn--primary:hover { background: var(--color-button-primary-hover, #312c85); }

	.rmd-btn--secondary {
		background: var(--color-button-secondary-default, #432dd7);
		color: var(--color-content-static-white, #fff);
	}
	.rmd-btn--secondary:hover { background: var(--color-button-secondary-hover, #372aac); }

	.rmd-btn--tertiary {
		background: var(--color-button-tertiary-default, #fff);
		border: 1px solid var(--color-border-control-default, #cad5e2);
		color: var(--color-content-inverse-b, #000);
		font-weight: 500; /* §4.4: tertiary is Medium, not SemiBold */
	}
	/* The FILL as well as the border. The node gives tertiary its own hover
	   colour (color/button/tertiary/hover) and only the border was being
	   set — from a different token that happens to carry the same value, so
	   the white button never tinted on hover and nothing looked wrong. */
	.rmd-btn--tertiary:hover {
		background: var(--color-button-tertiary-hover, #e9eef5);
		border-color: var(--color-border-control-hover, #e9eef5);
	}

	.rmd-btn--quaternary {
		background: var(--color-button-quaternary-default, #4f39f6);
		color: var(--color-content-static-white, #fff);
	}
	.rmd-btn--quaternary:hover { background: var(--color-button-quaternary-hover, #432dd7); }

	/* §4.4: quinary is the text/link button — no background, no padding. */
	.rmd-btn--quinary {
		background: none;
		padding-inline: 0;
		border-radius: var(--radius-8, 8px);
		color: var(--color-accent-on-indigo, #4f39f6);
		font-weight: 500;
	}
	.rmd-btn--quinary:hover { text-decoration: underline; text-underline-offset: 3px; }

	.rmd-btn--promotional {
		background-image: var(--gradient-promotional-sunrise, linear-gradient(142.72deg, #ec003f 0%, #fb2c36 50%, #ff8904 100%));
		color: var(--color-content-static-white, #fff);
	}
	.rmd-btn--promotional:hover { filter: brightness(1.06); }

	/* ── the other four states (46756:38495) ─────────────────────────────────
	   The node defines default / hover / pressed / focused / disabled for every
	   role, and only `hover` was built — so twelve --color-button-*-pressed and
	   -focused tokens were declared in tokens.css and referenced by nothing,
	   and a section CTA had no visible keyboard focus at all. That last one is
	   not a fidelity gap, it is the only way some people operate the page.

	   `:focus-visible`, never `:focus`: a mouse click on a button would
	   otherwise leave the ring behind, which reads as stuck rather than
	   focused. The ring is drawn with outline + offset rather than a border so
	   it cannot change the button's height, which is the one thing every size
	   class pins. */
	.rmd-btn:focus-visible {
		outline: 2px solid var(--color-border-control-focus, #2b7fff);
		outline-offset: 2px;
	}


	/* The focused FILL, which is its own value per role and not the default one
	   in three of the four — the ring above is the second half of the state. */
	.rmd-btn--primary:focus-visible     { background: var(--color-button-primary-focused, #1e1a4d); }
	.rmd-btn--secondary:focus-visible   { background: var(--color-button-secondary-focused, #432dd7); }
	.rmd-btn--tertiary:focus-visible    { background: var(--color-button-tertiary-focused, #f1f5f9); }
	.rmd-btn--quaternary:focus-visible  { background: var(--color-button-quaternary-focused, #4f39f6); }

	/* PRESSED LAST. At equal specificity the later rule wins, and these used to
	   sit before the focused fills — so pressing a button from the keyboard,
	   which makes it :active and :focus-visible at once, drew the FOCUSED fill
	   and the pressed state never showed. Hover < focused < pressed. */
	.rmd-btn--primary:active     { background: var(--color-button-primary-pressed, #372aac); }
	.rmd-btn--secondary:active   { background: var(--color-button-secondary-pressed, #312c85); }
	.rmd-btn--tertiary:active    { background: var(--color-button-tertiary-pressed, #e2e8f0); }
	.rmd-btn--quaternary:active  { background: var(--color-button-quaternary-pressed, #372aac); }

	/* Disabled is ONE treatment across the roles — the node greys the fill and
	   the label rather than tinting each hierarchy separately. `pointer-events`
	   stays on so a disabled control still answers a hover, which is how a
	   title attribute explaining WHY gets read. */
	.rmd-btn:disabled,
	.rmd-btn[aria-disabled="true"] {
		background: var(--color-state-disabled, #f5f8fb);
		background-image: none;
		border-color: var(--color-border-control-disabled, #f6f9fb);
		color: var(--color-content-disabled, #cad5e2);
		cursor: not-allowed;
	}
	.rmd-btn:disabled:hover,
	.rmd-btn[aria-disabled="true"]:hover { filter: none; }

	/* ── 4. the card list (§6.2) — one repeater, four families ───────────── */

	.rmd-s-cards,
	.rmd-s-stats,
	.rmd-s-quotes,
	.rmd-s-gallery,
	.rmd-s-partners {
		/* The count comes in as --rmd-cols-spec (inline, from the spec or the
		   editor's « Colonnes ») and is MAPPED here, per breakpoint, so the
		   rules below and every variant's own can still change it. */
		--rmd-cols: var(--rmd-cols-spec, 3);
		/* ONE gutter, because a carousel computes its slide width from it. A
		   variant that overrode `gap` alone would leave every slide short by
		   the difference — Testimonials 04 wants 16 and would have lost 8px a
		   card. Override --rmd-gap, never gap. */
		--rmd-gap: var(--space-2xl, 24px);
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(var(--rmd-cols, 3), minmax(0, 1fr));
		gap: var(--rmd-gap, var(--space-2xl, 24px));
	}

	/* Once assets/js/sections.js has given a list its arrows, the arrows are
	   the control and no node draws a scrollbar: hidden. Without JS there are
	   no arrows, and the thin scrollbar stays the only sign it scrolls. */
	/* 0,3,0: the carousel rule below sets the thin one at 0,2,0, later. */
	.rmd-s [data-display][data-rmd-arrows="on"] { scrollbar-width: none; }
	.rmd-s [data-display][data-rmd-arrows="on"]::-webkit-scrollbar { display: none; }

	/* A carousel is a behaviour, not a layout (§6.4): the same list, scrolled. */
	.rmd-s-cards[data-display="carousel"],
	.rmd-s-quotes[data-display="carousel"],
	.rmd-s-gallery[data-display="carousel"] {
		grid-auto-flow: column;
		/* A FIXED track, never minmax(0, …). With a minimum of 0 the grid sizes
		   every track to share the width it has, so the row could never
		   overflow: a carousel squeezed ALL its slides into view instead of
		   scrolling — Features 01's three full-width slides came out 333 wide
		   under 576 photographs. tests/audit.py fails on the minmax form. */
		grid-auto-columns: calc((100% - (var(--rmd-cols, 3) - 1) * var(--rmd-gap, var(--space-2xl, 24px))) / var(--rmd-cols, 3));
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}
	.rmd-s-cards[data-display="carousel"] > *,
	.rmd-s-quotes[data-display="carousel"] > *,
	.rmd-s-gallery[data-display="carousel"] > * { scroll-snap-align: start; }

	/* Invisible until a card lays its picture BESIDE its words, where it is
	   what holds them in a column of their own (Cards 07). */
	.rmd-s-card-body { display: contents; }
	.rmd-s-card {
		display: flex;
		flex-direction: column;
		gap: var(--space-md, 12px);
		min-width: 0;
		padding: var(--space-2xl, 24px);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		background: var(--color-surface-canvas, #fff);
		box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .04); /* Elevation/MD */
	}

	.rmd-s-card-ico {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		padding: var(--space-md, 12px);
		border-radius: 7.2px; /* DS literal, off the radius scale */
		background: var(--color-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}
	.rmd-s-card-ico svg { width: 24px; height: 24px; display: block; }

	.rmd-s-card-media img,
	.rmd-s-card-img { display: block; width: 100%; height: auto; border-radius: var(--radius-6, 6px); }
	.rmd-s-card-media--avatar img { width: 50px; height: 50px; border-radius: var(--radius-full, 9999px); object-fit: cover; }

	.rmd-s-card-overline {
		margin: 0;
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 600;
		font-size: var(--font-size-overline-lg, 12px);
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s-card-title {
		margin: 0;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-h5, 24px);
		line-height: var(--line-height-headline-sm, 1.4);
		color: var(--color-content-primary, #0f172b);
	}
	@media (max-width: 760px) {
		.rmd-s-card-title { font-size: var(--font-size-h6, 20px); }
	}
	.rmd-s-card-text {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s-card-text p { margin: 0; }
	/* A card's rich copy can hold several paragraphs, a list and links (a
	   guide set as cards): spaced, marked and coloured like running copy.
	   Ticked lists keep their own marker. */
	.rmd-s-card-text :is(p, ul, ol) + :is(p, ul, ol) { margin-top: var(--space-sm, 8px); }
	.rmd-s:not(.rmd-s--list-checks) .rmd-s-card-text ul { list-style: disc; padding-left: var(--space-xl, 20px); }
	.rmd-s:not(.rmd-s--list-checks) .rmd-s-card-text ol { list-style: decimal; padding-left: var(--space-xl, 20px); }
	.rmd-s-card-text a { color: var(--color-intent-idle, #4f39f6); text-underline-offset: 2px; }
	.rmd-s-card-link {
		margin-top: auto;
		align-self: start;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 13px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s-card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

	/* ── 5. stats ────────────────────────────────────────────────────────── */

	.rmd-s-stat { display: flex; flex-direction: column; gap: var(--space-2xs, 4px); min-width: 0; }
	.rmd-s-stat-value {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 400;
		font-size: var(--font-size-h3, 40px);
		line-height: 1.05;
		letter-spacing: -0.8px;
		color: var(--color-content-primary, #0f172b);
		font-variant-numeric: tabular-nums;
	}
	.rmd-s-stat-label {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-size: var(--font-size-label-xl, 14px);
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s-stat-sub {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-xs, 12px);
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s-stat-img { display: block; width: 40px; height: auto; margin-bottom: var(--space-sm, 8px); }

	/* ── 6. testimonials ─────────────────────────────────────────────────── */

	.rmd-s-quote {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg, 16px);
		min-width: 0;
		padding: var(--space-3xl, 32px);
		border-radius: var(--radius-8, 8px);
		background: var(--color-surface-modal, #fff);
		box-shadow: 0 10px 30px -18px rgba(15, 23, 43, .35); /* Elevation/LG */
	}
	/* Invisible by default: on every variant but Testimonials 02 the card IS
	   the row, so the wrapper must not introduce a box of its own. 02 gives it
	   back its display and the panel moves here, beside the photo. */
	.rmd-s-quote-body { display: contents; }
	.rmd-s-quote-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-6, 6px); }
	.rmd-s-quote-text {
		margin: 0;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-size: var(--font-size-h6, 20px);
		font-weight: 400;
		line-height: 1.4;
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s-quote-text p { margin: 0; }
	/* The attribution is measured further down, on 47716:15719. It used to be
	   declared twice at this same specificity — a grid of 12 with a label-xl
	   name here, a flex of 16 with an h6 name there — and the later one won
	   silently for every testimonial. One declaration only. */

	/* ── 7. media, gallery, partners ─────────────────────────────────────── */

	.rmd-s-media { margin-top: var(--space-3xl, 32px); }
	.rmd-s-media img,
	.rmd-s-media-img { display: block; width: 100%; height: auto; border-radius: var(--radius-8, 8px); }
	.rmd-s-gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius-6, 6px); }
	/* The strip itself is measured further down, on Hero 01's own node. */
	.rmd-s-partners img { display: block; width: 100%; height: auto; }

	/* ── 8. prose ────────────────────────────────────────────────────────── */

	.rmd-s-prose,
	.rmd-standalone-prose {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	/* Aligned with the sections above it, for the reason .rmd-s-wrap carries:
	   the token is a CONTENT width, so the gutter goes outside it. With
	   max-width 1200 the prose was 1152 wide and sat 24px inside every band on
	   the page — a jog down the left edge wherever a builder page carries a
	   footnote under its last section. */
	.rmd-standalone-prose {
		max-width: calc(var(--screen-desktop-max-content, 1200px)
			+ 2 * var(--space-2xl, 24px));
		margin-inline: auto;
		padding: var(--space-6xl, 64px) var(--space-2xl, 24px);
	}
	.rmd-s-prose > :first-child, .rmd-standalone-prose > :first-child { margin-top: 0; }
	.rmd-s-prose > :last-child,  .rmd-standalone-prose > :last-child  { margin-bottom: 0; }
	.rmd-s-prose p, .rmd-standalone-prose p { margin: 0 0 var(--space-lg, 16px); }
	.rmd-s-prose h2, .rmd-s-prose h3,
	.rmd-standalone-prose h2, .rmd-standalone-prose h3 {
		margin: var(--space-3xl, 32px) 0 var(--space-md, 12px);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		line-height: 1.3;
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s-prose h2, .rmd-standalone-prose h2 { font-size: var(--font-size-h5, 24px); }
	.rmd-s-prose h3, .rmd-standalone-prose h3 { font-size: var(--font-size-h6, 20px); }
	.rmd-s-prose a, .rmd-standalone-prose a { color: var(--color-intent-idle, #4f39f6); text-underline-offset: 2px; }
	.rmd-s-prose ul, .rmd-s-prose ol,
	.rmd-standalone-prose ul, .rmd-standalone-prose ol { margin: 0 0 var(--space-lg, 16px); padding-left: var(--space-2xl, 24px); }
	.rmd-s-prose li, .rmd-standalone-prose li { margin-bottom: var(--space-sm, 8px); }
	/* main.css's preflight sets list-style:none on every list; a list in
	   running copy is read as a list only with its markers. */
	.rmd-s-prose ul, .rmd-standalone-prose ul { list-style: disc; }
	.rmd-s-prose ol, .rmd-standalone-prose ol { list-style: decimal; }
	/* A long-form guide set across the full 1200 runs 160+ characters a line.
	   Capped at a reading measure (about 75 characters of Body MD), left on the
	   page grid, with more air above each subsection than inside it. */
	.rmd-s--rich_text .rmd-s-prose { max-width: min(100%, 760px); }
	.rmd-s--rich_text .rmd-s-prose h2:not(:first-child) { margin-top: var(--space-5xl, 48px); }

	/* ── 9. phones ───────────────────────────────────────────────────────── */
	/* CLAUDE.md, measured 03/09: never leave a grid item at min-width:auto
	   around prose, and never lay a box outside the viewport. minmax(0,1fr)
	   above is that guard; here the grids simply collapse. */

	@media (max-width: 1023px) {
		.rmd-s-cards, .rmd-s-stats, .rmd-s-quotes, .rmd-s-gallery { --rmd-cols: var(--rmd-cols-tab, 2); }
		.rmd-s-partners { --rmd-cols: 3; }
		.rmd-s-head--stacked { grid-template-columns: 1fr; }
	}
	@media (max-width: 760px) {
		.rmd-s { padding-block: var(--space-6xl, 64px); }
		.rmd-s-cards, .rmd-s-stats, .rmd-s-quotes, .rmd-s-gallery { --rmd-cols: 1; }
		.rmd-s-partners { --rmd-cols: 2; }
		.rmd-standalone-prose { padding-block: var(--space-5xl, 48px); }
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSITION — driven by the variant SPEC, not by variant names.

   rmd_section_open() prints the spec onto the section: `rmd-s--l-<layout>`,
   `rmd-s--c-<card>`, `rmd-s--list-<list>`. Two variants that share a shape
   therefore share these rules, and only what genuinely differs needs a
   `rmd-s--features-01` selector. That is what keeps 63 layouts from becoming
   63 stylesheets.

   These shape rules are the FLOOR, not the finish. All 63 variants are now
   built from their own node in the MEASURED VARIANTS block further down, and
   what lives up here is only what several of them genuinely share. When the
   two disagree the measured block wins, because it names the node it was read
   from and this does not.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer components {

	/* ── card treatment ──────────────────────────────────────────────────── */
	/* `plain` is the Features 03 case: no border, no panel, content straight on
	   the canvas. `panel` is the bordered, shadowed card. `none` has no shell. */

	.rmd-s--c-plain .rmd-s-card,
	.rmd-s--c-none .rmd-s-card {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	/* Features 03's tile is smaller than the mega panel's 60px one. */
	.rmd-s--c-plain .rmd-s-card-ico {
		width: 44px;  /* touch target; the scale has 40 and 48, no 44 */
		height: 44px;
		padding: var(--space-sm, 8px);
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--c-plain .rmd-s-card-ico svg { width: 20px; height: 20px; }

	/* ── layout: split ───────────────────────────────────────────────────── */
	/* Heading on one side, media on the other — Hero and most of Content.
	   ⚠ The WRAPPER is not the splitter. It was, before rmd_section_compose()
	   existed: `split` then meant "the wrap is two columns". The composer now
	   emits a .rmd-s-split INSIDE the wrap, so leaving the rule here applied
	   the split TWICE — the inner split landed in one half, its own columns
	   halved again, and a testimonial card ended up about 50px wide with one
	   word per line. The composition owns the arrangement; the wrap only ever
	   owns the page gutter. */
	.rmd-s--l-split .rmd-s-head { margin-bottom: 0; }
	.rmd-s--l-split .rmd-s-media { margin-top: 0; }


	/* ── Content's compositions (nine nodes, 20/10) ─────────────────────────
	   Keyed on the COMPOSITION class, never on a variant name, so two variants
	   that share a shape share these rules. */

	/* split (Content 01) and split-list (Content 06): two columns that stack
	   on a phone. minmax(0,1fr) and not 1fr — a bare URL in a card would
	   otherwise widen the layout viewport (CLAUDE.md, measured 03/09). */
	.rmd-s-split {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6xl, 64px);
		align-items: center;
	}
	.rmd-s-split > .rmd-s-col { min-width: 0; }
	.rmd-s-split .rmd-s-head { margin-bottom: var(--space-3xl, 32px); }
	.rmd-s-split .rmd-s-media { margin-top: 0; }
	/* ⚠ No column override here. This used to force --rmd-cols: 1 on every
	   split, which is right for Content 06 and Features 05/06 (stacked in the
	   column) and WRONG for Features 02 and 13 (two across inside it). Worse,
	   it covered only .rmd-s-cards — so a quotes list in a split kept its
	   multi-column grid and Testimonials 01 came out as narrow strips.
	   The SPEC carries the count, per variant, and is the only thing that
	   should set it. */

	/* aside (Content 05): the heading takes a narrow column, the list the rest,
	   and the band's image runs full width underneath. */
	.rmd-s-aside {
		display: grid;
		grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
		gap: var(--space-5xl, 48px);
		align-items: start;
	}
	.rmd-s-aside-head,
	.rmd-s-aside-list { min-width: 0; }
	/* 0,3,0: the Features family gives every heading 48 below it at 0,2,0,
	   later in the file — inside an aside that stacked on the aside's own 48
	   gap, 96 between the lead and the list on a phone (23/10). The aside's
	   gap is the space; the heading states none. */
	.rmd-s .rmd-s-aside .rmd-s-head { margin-bottom: 0; }
	.rmd-s--l-aside .rmd-s-media { margin-top: var(--space-5xl, 48px); }

	/* rows (Content 04 and 09): the band stacks instead of gridding, so the
	   heading keeps its own rhythm and the rows carry theirs. */
	.rmd-s--l-rows .rmd-s-head { margin-bottom: var(--space-6xl, 64px); }

	/* rows: full-width bands that alternate sides. The flip
	   is a source-order swap in PHP, so the reading order is always text-then-
	   media on a phone, whichever side the desktop shows it on. */
	.rmd-s-rows {
		display: grid;
		gap: var(--space-6xl, 64px);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5xl, 48px);
		align-items: center;
	}
	.rmd-s-row-text,
	.rmd-s-row-media { min-width: 0; }
	/* The zig-zag, on wide screens only — see rmd_section_rows(). */
	@media (min-width: 901px) {
		.rmd-s-row--flip .rmd-s-row-media { order: -1; }
	}
	.rmd-s-row-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-8, 8px); }

	/* overlay cards (Content 09 and 10): the caption sits ON the image. The
	   scrim is a gradient rather than a flat tint so the words hold their
	   contrast over a light photo as well as a dark one. */
	.rmd-s--cl-overlay .rmd-s-card,
	.rmd-s--cl-overlay .rmd-s-row-media {
		position: relative;
		overflow: hidden;
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--cl-overlay .rmd-s-card { display: grid; }
	.rmd-s--cl-overlay .rmd-s-card > .rmd-s-card-media { grid-area: 1 / 1; }
	/* Content 10 states its own 24 on the card, and this added a second 24
	   inside it — the node has the caption flush at 24. */
	.rmd-s--content-10 .rmd-s-card > :not(.rmd-s-card-media) { padding-inline: 0; }
	.rmd-s--cl-overlay .rmd-s-card > :not(.rmd-s-card-media) {
		grid-area: 1 / 1;
		align-self: end;
		z-index: 1;
		margin: 0;
		padding: 0 var(--space-2xl, 24px);
		color: #fff;
	}
	.rmd-s--cl-overlay .rmd-s-card::after {
		content: "";
		grid-area: 1 / 1;
		background: linear-gradient(to top, rgba(4, 17, 53, .78) 0%, rgba(4, 17, 53, .45) 38%, transparent 70%);
	}
	.rmd-s--cl-overlay .rmd-s-card-title,
	.rmd-s--cl-overlay .rmd-s-card-text { color: #fff; }

	/* row cards (Content 06, Cards 07 and 08, Features 05 and 11): the media
	   or the icon sits BESIDE the words. FLEX, because every one of those five
	   measured blocks is written in flex — this used to be a grid, under which
	   their phone rules (flex-direction: column) did nothing: Cards 07 put its
	   words in a 90px column beside a 72px sliver, Content 06 and Features 11
	   ran their cards off a 390 screen. The words need a box of their own here
	   (.rmd-s-card-body is display: contents by default). No disc and no width
	   on the ICON: none of the five draws a round picture, and 128 is a
	   picture's width — it stretched Features 05/11's 60 tile to 128x60. */
	.rmd-s--cl-row .rmd-s-card {
		display: flex;
		flex-direction: row;
		gap: var(--space-xl, 20px);
		align-items: center;
	}
	.rmd-s--cl-row .rmd-s-card > .rmd-s-card-media,
	.rmd-s--cl-row .rmd-s-card > .rmd-s-card-ico { flex: none; }
	.rmd-s--cl-row .rmd-s-card > .rmd-s-card-media { width: 128px; }
	.rmd-s--cl-row .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-width: 0;
	}

	/* split cards (Features 01): the panel itself is two columns — words on one
	   side, a large masked image on the other. */
	.rmd-s--cl-split .rmd-s-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-5xl, 48px);
		align-items: center;
	}
	.rmd-s--cl-split .rmd-s-card > .rmd-s-card-media {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
	}
	.rmd-s--cl-split .rmd-s-card > :not(.rmd-s-card-media) { grid-column: 1; }

	/* centred cards (Features 07, 08): icon, words and button all in the axis. */
	.rmd-s--ca-center .rmd-s-card { text-align: center; justify-items: center; }
	.rmd-s--ca-center .rmd-s-card-link { justify-self: center; }

	/* the connector (Features 11): a rule from each icon down to the next. Drawn
	   on every card but the last, so the timeline ends where the list ends. */
	.rmd-s--connected .rmd-s-card { position: relative; }
	.rmd-s--connected .rmd-s-card:not(:last-child)::before {
		content: "";
		position: absolute;
		left: calc(var(--rmd-connector-x, 30px) - 1px);
		top: var(--rmd-connector-top, 68px);
		/* To the card's own foot by default, not past it: the node's line runs
		   80 and leaves the gap between cards clear (47287:32537). */
		bottom: var(--rmd-connector-bottom, calc(var(--space-xl, 20px) * -1));
		width: 2px;
		/* border/surface/floating — measured 241,245,249 on the render. The
		   divider tint it used is several shades too dark for a timeline. */
		background: var(--color-border-surface-floating, #f1f5f9);
	}

	@media (max-width: 900px) {
		.rmd-s--cl-split .rmd-s-card { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--cl-split .rmd-s-card > .rmd-s-card-media { grid-column: 1; grid-row: auto; }
		.rmd-s--connected .rmd-s-card:not(:last-child)::before { display: none; }
	}

	/* the ticked list (Content 01, Features 01) */
	.rmd-s-checks {
		display: grid;
		gap: var(--space-md, 12px);
		margin: var(--space-3xl, 32px) 0 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s-check {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--space-lg, 16px);
		align-items: start;
	}
	/* 24 disc in button/tertiary/pressed — a cool grey, not the indigo tint
	   (46968:16126). The tick over it IS indigo: #4F39F6, read off the icon's
	   own stroke. */
	.rmd-s-check-mark {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: var(--color-button-tertiary-pressed, #e2e8f0);
		position: relative;
		flex: none;
	}
	.rmd-s-check-mark::after {
		content: "";
		position: absolute;
		inset: 0;
		margin: auto;
		width: 9px;
		height: 5px;
		border-left: 2px solid var(--color-accent-on-indigo, #4f39f6);
		border-bottom: 2px solid var(--color-accent-on-indigo, #4f39f6);
		transform: translateY(-1px) rotate(-45deg);
	}
	.rmd-s-check-text {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-md, 16px);
		color: var(--color-content-tertiary, #5b6478);
	}

	@media (max-width: 900px) {
		.rmd-s-split,
		.rmd-s-aside,
		/* At 0,3,0: Content 04, Content 09 and Features 15 each state their
		   desktop columns at 0,2,0, and at 0,1,0 this lost to all three — the
		   words and the chart stayed side by side at 390, the title cut off
		   behind the panel (23/10). Rows stack; that is the family's promise. */
		.rmd-s .rmd-s-rows > .rmd-s-row { grid-template-columns: minmax(0, 1fr); }
	}

	/* stack / stack-reverse (Hero 04 and 05, measured 20/10). The only thing
	   that differs is which side of the words the image sits on — the renderer
	   emits them in order, so the CSS only has to fix the rhythm. */
	.rmd-s--l-stack .rmd-s-media { margin-top: var(--space-5xl, 48px); }
	.rmd-s--l-stack-reverse .rmd-s-media { margin-top: 0; margin-bottom: var(--space-5xl, 48px); }
	.rmd-s--l-stack-reverse .rmd-s-head { margin-bottom: 0; }

	/* ── Hero 01's partner strip (47287:31119) ──────────────────────────────
	   A label, a vertical rule, then the names. Names, not logos: the design
	   sets fourteen wordmarks as text. The rule is a border on the list, so a
	   strip with no label has no stray line either. */
	.rmd-s-partners {
		display: flex;
		align-items: center;
		gap: var(--space-3xl, 32px);
		margin-top: var(--space-5xl, 48px);
		flex-wrap: wrap;
	}
	/* Poppins, not Inter. This rule said Inter and had never once rendered:
	   Hero 01 is the only variant in the catalog that draws a partner strip
	   (the spec enforces it, tests/audit.py checks it), and its measured block
	   sets Poppins — so the base was dead code contradicting the node it was
	   supposed to generalise. The strip's NAMES beside it (.rmd-s-partner)
	   were Poppins all along. */
	.rmd-s-partners-label {
		margin: 0;
		flex: none;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-size: var(--font-size-label-xl, 14px);
		font-weight: 500;
		color: var(--color-content-tertiary, #5b6478);
	}
	.rmd-s-partners-list {
		display: flex;
		align-items: center;
		gap: var(--space-3xl, 32px);
		flex-wrap: wrap;
		margin: 0;
		padding: 0 0 0 var(--space-3xl, 32px);
		list-style: none;
		border-left: 1px solid var(--color-border-surface-divider, #e2e5ec);
		min-width: 0;
	}
	.rmd-s-partners-label:only-child + .rmd-s-partners-list,
	.rmd-s-partners-list:first-child { border-left: 0; padding-left: 0; }
	.rmd-s-partner {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-size: var(--font-size-label-3xl, 18px);
		font-weight: 600;
		color: var(--color-content-primary, #0f172b);
		white-space: nowrap;
	}

	/* The marquee composition (Hero 01): the bands run EDGE TO EDGE, wider than
	   the 1200 wrapper — in the design the images start at x=-1138 and end past
	   2338. overflow-x: clip on the section is what makes that safe on a phone:
	   it is not a scroll container, so the overflow can never reach the page and
	   let iOS drag it sideways (CLAUDE.md, measured 03/09). */
	.rmd-s--l-marquee { overflow-x: clip; }
	.rmd-s--l-marquee .rmd-s-marquee { margin-inline: calc(50% - 50vw); }

	/* ── the image marquee: two rows, opposite ways ─────────────────────────
	   Each row holds its images twice, so translating by exactly -50% lands on
	   an identical frame and the loop has no seam. The band is wider than the
	   section on purpose, so it runs off both edges — it is clipped by the
	   section, never by the page (CLAUDE.md: never lay a box outside the
	   viewport). prefers-reduced-motion stops it dead. */
	.rmd-s-marquee {
		display: grid;
		gap: var(--space-md, 12px);
		margin-top: var(--space-4xl, 40px);
		overflow: hidden;
	}
	.rmd-s-marquee-row {
		display: flex;
		gap: var(--space-md, 12px);
		margin: 0;
		padding: 0;
		list-style: none;
		width: max-content;
	}
	.rmd-s-marquee-row--ltr { animation: rmdMarqueeLtr 48s linear infinite; }
	.rmd-s-marquee-row--rtl { animation: rmdMarqueeRtl 48s linear infinite; }
	.rmd-s-marquee-row > li { flex: none; width: clamp(220px, 28vw, 424px); }
	.rmd-s-marquee-img {
		display: block;
		width: 100%;
		aspect-ratio: 424 / 280;
		object-fit: cover;
		border-radius: var(--radius-8, 8px);
	}
	@keyframes rmdMarqueeLtr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
	@keyframes rmdMarqueeRtl { from { transform: translateX(-50%); } to { transform: translateX(0); } }
	@media (prefers-reduced-motion: reduce) {
		.rmd-s-marquee-row--ltr,
		.rmd-s-marquee-row--rtl { animation: none; }
	}

	/* ── layout: carousel ────────────────────────────────────────────────── */
	/* Features 01: wide panels, the neighbours deliberately peeking at both
	   edges so the row reads as continuing. One across, not three. */

	.rmd-s--l-carousel .rmd-s-cards {
		--rmd-cols: var(--rmd-cols-spec, 1);
		grid-auto-flow: column;
		grid-auto-columns: 86%; /* fixed, see the carousel rule above */
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-lg, 16px);
	}
	.rmd-s--l-carousel .rmd-s-card { scroll-snap-align: center; }

	/* The split panel is NOT a property of the carousel — Features 01 happens to
	   have one, Testimonials 02 and 05 are carousels without one. It lives on
	   .rmd-s--cl-split, which says exactly that. */
	.rmd-s--cl-split.rmd-s--l-carousel .rmd-s-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5xl, 48px);
		align-items: center;
		padding: var(--space-5xl, 48px);
	}
	.rmd-s--cl-split.rmd-s--l-carousel .rmd-s-card-media { grid-row: span 5; }

	/* ── list: checks ────────────────────────────────────────────────────── */
	/* Features 01's tick-list. The card text carries a <ul>; the tick is CSS so
	   adding a line needs no markup from the editor. */

	.rmd-s--list-checks .rmd-s-card-text ul {
		list-style: none;
		margin: var(--space-lg, 16px) 0 0;
		padding: 0;
		display: grid;
		gap: var(--space-md, 12px);
	}
	.rmd-s--list-checks .rmd-s-card-text li {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-md, 12px);
		align-items: start;
		margin: 0;
		font-size: var(--font-size-body-sm, 14px);
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--list-checks .rmd-s-card-text li::before {
		content: "";
		width: 20px;
		height: 20px;
		border-radius: var(--radius-4, 4px);
		background: var(--color-accent-indigo, #eef2ff) no-repeat center;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f39f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
		background-size: 12px 12px;
	}

	/* ── layout: banner · row · bento ────────────────────────────────────── */

	.rmd-s--l-banner .rmd-s-head { margin-bottom: 0; }
	.rmd-s--l-row .rmd-s-stats   { gap: var(--space-5xl, 48px); }

	/* A marquee of LIST items — Cards 08/09, Gallery 04/05, Testimonials 06.
	   The hero's image marquee above is the same idea on a different element;
	   this one scrolls the family's own list. It runs edge to edge like the
	   hero band, clipped by the section so it can never reach the page. */
	.rmd-s--l-marquee .rmd-s-cards,
	.rmd-s--l-marquee .rmd-s-gallery,
	.rmd-s--l-marquee .rmd-s-quotes {
		display: flex;
		gap: var(--space-2xl, 24px);
		margin-inline: calc(50% - 50vw);
		padding-inline: var(--space-3xl, 32px);
		/* Snapping must know about that padding, or mandatory snap scrolls it
		   away on load and the band opens off its start (Cards 09, 23/10). */
		scroll-padding-inline: var(--space-3xl, 32px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		grid-template-columns: none;
	}
	.rmd-s--l-marquee .rmd-s-cards::-webkit-scrollbar,
	.rmd-s--l-marquee .rmd-s-gallery::-webkit-scrollbar,
	.rmd-s--l-marquee .rmd-s-quotes::-webkit-scrollbar { display: none; }
	/* A list that is a ROW of a two-row marquee (Cards 08, Gallery 04/05) sits
	   inside .rmd-s-marquee, which already runs edge to edge. Bleeding again
	   resolved calc(50% - 50vw) against the marquee's ~5900 grid track: Cards
	   08's rows started 2240 to the right, and the band showed one row under
	   a blank one. The row starts where the marquee does. */
	.rmd-s--l-marquee .rmd-s-marquee > .rmd-s-marquee-row {
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
	.rmd-s--l-marquee .rmd-s-cards > li,
	.rmd-s--l-marquee .rmd-s-gallery > li,
	.rmd-s--l-marquee .rmd-s-quotes > li {
		flex: none;
		width: clamp(260px, calc(100% / var(--rmd-cols, 4) - var(--space-2xl, 24px)), 420px);
		scroll-snap-align: start;
	}

	/* The cross cut-out (Content 01, Features 01). The DS ships it as an image
	   component and specs no geometry, so this is read off the render: a square
	   with its four corners removed — a plus. The notch depth is a custom
	   property, because the two layouts cut at slightly different depths and a
	   designer will want to say which without touching a polygon. */
	/* Traced off Content 01's render (47395:29631) one row at a time, because
	   the DS ships this as a flattened PNG with no geometry to read. Every
	   edge lands on a sixth. It is NOT symmetric — the earlier clip-path drew
	   a neat plus, which this shape is not: its lower-right corner steps in
	   to 4/6 and its left side notches twice, not once. This is CONTENT 01's
	   cut-out and the default for the family; Features 01 was traced the same
	   way and came back a different shape, so it overrides it below. */
	.rmd-s-card-media--masked,
	.rmd-s-media--masked {
		/* BLOCK, said here. The card media is a <span>, inline by default, and
		   a clip-path on an inline box clips to its LINE boxes — which are
		   empty around the block-level <img> — so the whole picture was cut
		   away. Inside a card it survived by accident (a flex or grid item is
		   blockified); in Features 15's rows, whose media column is a plain
		   block, all three photographs vanished. */
		display: block;
		clip-path: polygon(
			16.667% 0, 83.333% 0,
			83.333% 16.667%, 100% 16.667%,
			100% 33.333%, 83.333% 33.333%,
			83.333% 66.667%, 100% 66.667%,
			100% 83.333%, 66.667% 83.333%,
			66.667% 100%, 0 100%,
			0 66.667%, 16.667% 66.667%,
			16.667% 50%, 0 50%,
			0 16.667%, 16.667% 16.667%
		);
	}
	.rmd-s-media--masked img,
	.rmd-s-card-media--masked img { border-radius: 0; }

	/* ── carousel arrows and the pager ──────────────────────────────────────
	   The buttons are injected by assets/js/sections.js and only when the list
	   really overflows, so these rules never style furniture. */
	.rmd-s-arrows {
		display: flex;
		gap: var(--spacing-8, 8px);
		justify-content: flex-end;
		margin-top: var(--space-2xl, 24px);
	}
	/* The heading row is the arrows' real home on every carousel that has a
	   heading, so there they sit flush — the margin only serves the fallback
	   position under the list. */
	.rmd-s-arrowslot { flex: none; }
	.rmd-s-arrowslot .rmd-s-arrows { margin-top: 0; }

	/* Measured on 46968:16167, and the radius re-read off the render: a 48
	   rounded square at radius 4 — not 8, and not a bordered circle. The tint
	   already reaches the corner on the third pixel row of the button.
	   Each variant that departs from it says so below. */
	.rmd-s-arrow {
		width: 48px;
		height: 48px;
		display: grid;
		place-items: center;
		border: 0;
		border-radius: var(--radius-4, 4px);
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
		cursor: pointer;
		transition: background .15s ease, color .15s ease, opacity .15s ease;
	}
	/* 30, which is what makes the GLYPH match. The chevron is a 24-unit lucide
	   path whose ink fills 8 of those units across and 14 down (stroke 2, round
	   caps), so a 20 box drew roughly 7 x 12 where both arrow components in the
	   DS draw 10 x 18 — measured on the renders of 46998:11472 and 47299:36589,
	   which are identical to the pixel despite one being indigo and the other
	   intent/danger. 10 x 24/8 = 30. */
	.rmd-s-arrow svg { width: 30px; height: 30px; }
	.rmd-s-arrow:hover:not(:disabled) {
		background: var(--color-accent-on-indigo, #4f39f6);
		color: var(--color-surface-accent-indigo, #eef2ff);
	}
	.rmd-s-arrow:disabled { opacity: .35; cursor: default; }
	/* The direction modifiers are not decoration: content is FR/EN and later AR
	   (CLAUDE.md), and in a right-to-left document "previous" points the other
	   way. The chevron follows the writing direction; the scroll maths in
	   sections.js already does, because scrollLeft is negative in RTL. */
	[dir="rtl"] .rmd-s-arrow--prev svg,
	[dir="rtl"] .rmd-s-arrow--next svg { transform: scaleX(-1); }

	/* Gallery 01's pager — the one layout in the catalog that carries one. */
	.rmd-s-pager {
		display: flex;
		gap: var(--space-sm, 8px);
		justify-content: center;
		margin-top: var(--space-2xl, 24px);
	}
	/* 20 wide, four of them 8 apart — 104 in all, which is the figure the node
	   carries. The idle bar is the pale indigo tint, not the grey divider. */
	.rmd-s-pager > span {
		width: 20px;
		height: 2px;
		background: var(--color-surface-accent-indigo, #eef2ff);
	}
	.rmd-s-pager > span:first-child { background: var(--color-accent-on-indigo, #4f39f6); }

	/* A marquee nobody drives runs by itself. The list carries its items twice
	   (PHP), so -50% lands on an identical frame. Hover and reduced motion both
	   stop it: a band that never pauses is unreadable, and motion is a setting. */
	.rmd-s-auto {
		width: max-content;
		animation: rmdBandScroll 48s linear infinite;
		overflow: visible;
		scroll-snap-type: none;
	}
	.rmd-s-auto:hover { animation-play-state: paused; }
	@keyframes rmdBandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
	@media (prefers-reduced-motion: reduce) {
		.rmd-s-auto { animation: none; }
	}

	/* CTA 01 sets the whole band on a panel (§5.9). The other three sit on the
	   page, which is why this is the card frame on the band and not a surface. */
	.rmd-s-panel {
		background: var(--color-surface-region, #f7f8fb);
		border: 1px solid var(--color-border-surface-divider, #e2e5ec);
		border-radius: var(--radius-8, 8px);
		padding: var(--space-6xl, 64px) var(--space-5xl, 48px);
		margin-inline: auto;
		/* CTA 01 measures 1008; Content 07 and Features 07 fill the wrapper.
		   One property, set per family, rather than five panel classes. */
		max-width: var(--rmd-panel-max, 100%);
	}
	.rmd-s--cta .rmd-s-panel { --rmd-panel-max: 1008px; }
	.rmd-s-panel .rmd-s-head { margin-bottom: 0; }
	/* CTA 01 already did this for itself; Stats 03 and Testimonials 05 did not,
	   and kept 48 of side padding inside a 342 column on a phone. */
	@media (max-width: 640px) {
		.rmd-s-panel { padding: var(--space-5xl, 48px) var(--space-2xl, 24px); }
	}

	/* Bento: the cells are deliberately NOT all the same size. The first spans
	   two columns; the rest fill around it. */
	.rmd-s--l-bento .rmd-s-cards { grid-auto-flow: dense; }
	.rmd-s--l-bento .rmd-s-card:first-child { grid-column: span 2; }
	/* No "mirrored bento" rule here (removed 23/10): it was written before
	   Bento 05 was measured, and at one class more specific it beat the
	   measured block — the lead card fell into column 1 instead of holding
	   the right half, the last icon card stretched over two columns and the
	   bottom right cell stayed empty. Bento 05 places every cell itself. */

	@media (max-width: 1023px) {
		.rmd-s--cl-split.rmd-s--l-carousel .rmd-s-card { grid-template-columns: 1fr; gap: var(--space-3xl, 32px); }
		.rmd-s--l-carousel .rmd-s-cards { grid-auto-columns: 92%; }
		.rmd-s--l-bento .rmd-s-card:first-child { grid-column: auto; }
	}
}

/* ── page-only: the rhythm BETWEEN bands ──────────────────────────────────
   An article component never has a neighbour above it. A section always does,
   so the band owns its own vertical rhythm and can meet the one before it
   flush when the two share a surface. */

@layer components {
	.rmd-s--sp-tight { padding-block: var(--space-6xl, 64px); }
	.rmd-s--sp-roomy { padding-block: calc(var(--space-100, 100px) * 1.4); }
	.rmd-s--sp-flush { padding-top: 0; }

	@media (max-width: 760px) {
		.rmd-s--sp-roomy { padding-block: var(--space-6xl, 64px); }
	}

	/* ══ MEASURED VARIANTS ═══════════════════════════════════════════════════
	   Below this line, rules keyed on a VARIANT class carry values read off the
	   Figma node named in the comment — not inferred from the catalog's
	   structural summary. The generic compositions above get a band roughly
	   right; only a measured block gets it right. Each one names its node so
	   the next person can check it rather than trust it. */

	/* ── Testimonials 01 — 46968:16168, read 21/10 ──────────────────────────
	   A flexible quote card beside a FIXED 450px image, not two equal columns.
	   Section padding 100/0; wrapper max 1200, gap 16, items centred. */
	.rmd-s--testimonials-01 .rmd-s-split {
		display: flex;
		gap: var(--spacing-16, 16px);
		align-items: center;
	}
	.rmd-s--testimonials-01 .rmd-s-col:first-child { flex: 1 1 0; min-width: 0; }
	.rmd-s--testimonials-01 .rmd-s-col:last-child  { flex: 0 0 450px; align-self: stretch; }
	.rmd-s--testimonials-01 .rmd-s-media { height: 100%; margin: 0; }
	.rmd-s--testimonials-01 .rmd-s-media img {
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--testimonials-01 .rmd-s-quotes { display: block; }
	.rmd-s--testimonials-01 .rmd-s-quote {
		/* 48. The 56 bound on the panel above is the profile block's own
		   HEIGHT — 50 of avatar against 28+2+26 of text — not this gap. */
		gap: var(--spacing-48, 48px);
		padding: var(--space-5xl, 48px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-surface-modal, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	/* The quote IS the heading here — h3, not body copy. */
	.rmd-s--testimonials-01 .rmd-s-quote-text {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-h3, 40px);
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
		color: var(--color-content-primary, #0f172b);
	}

	/* The profile block: avatar beside a stacked name and role (47716:15719). */
	.rmd-s-quote-by {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-16, 16px);
		/* To the foot of the card, so a row of quotes aligns on its faces
		   however long the words above them run. */
		margin-top: auto;
	}
	.rmd-s-quote-who {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs, 2px);
		min-width: 0;
	}
	/* The DS Avatar (47271:13260): the portrait on a DISC graded top to bottom
	   from 300 to 600 of one accent — rose, indigo or orange per node. A cut-out
	   portrait shows it; an opaque photograph simply covers it. */
	.rmd-s-quote-avatar {
		flex: none;
		width: 50px;
		height: 50px;
		border-radius: var(--radius-full, 999px);
		object-fit: cover;
		background: linear-gradient(to bottom,
			var(--rmd-av-from, var(--color-rose-300, #ffa1ad)),
			var(--rmd-av-to, var(--color-rose-600, #ec003f)));
	}
	.rmd-s-quote-initials {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--color-content-static-white, #fff);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-size: var(--font-size-label-2xl, 16px);
		font-weight: 500;
		line-height: 1;
	}
	/* The accents, read off each node's Avatar instances: Testimonials 01
	   orange, 02 indigo, 05 rose; 04's three cards rose, indigo, orange. */
	.rmd-s--testimonials-01 {
		--rmd-av-from: var(--color-orange-300, #ffb86a);
		--rmd-av-to: var(--color-orange-600, #f54900);
	}
	.rmd-s--testimonials-02,
	.rmd-s--testimonials-04 .rmd-s-quotes > li:nth-child(3n+2) {
		--rmd-av-from: var(--color-indigo-300, #a3b3ff);
		--rmd-av-to: var(--color-indigo-600, #4f39f6);
	}
	.rmd-s--testimonials-04 .rmd-s-quotes > li:nth-child(3n) {
		--rmd-av-from: var(--color-orange-300, #ffb86a);
		--rmd-av-to: var(--color-orange-600, #f54900);
	}
	.rmd-s-quote-name {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-h6, 20px);
		line-height: 1.4;
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s-quote-role {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 400;
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	@media (max-width: 900px) {
		.rmd-s--testimonials-01 .rmd-s-split { flex-direction: column; }
		.rmd-s--testimonials-01 .rmd-s-col:last-child { flex: none; width: 100%; }
		.rmd-s--testimonials-01 .rmd-s-quote-text { font-size: var(--font-size-h5, 28px); }
	}

	/* ── Testimonials 02 — 46968:16167, read 21/10 ──────────────────────────
	   A FIXED 761 panel with a flexible image beside it — the mirror of 01,
	   where the panel flexed and the image was fixed. Section padding 100/0;
	   wrapper max 1200, gap 48 between the heading row and the slide. */
	.rmd-s--testimonials-02 .rmd-s-headrow { margin-bottom: var(--space-5xl, 48px); }
	.rmd-s--testimonials-02 .rmd-s-head { gap: var(--space-xl, 20px); }
	.rmd-s--testimonials-02 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); }
	.rmd-s--testimonials-02 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	/* The lead is SMALLER here than the shared one: body-sm at weight 500. */
	.rmd-s--testimonials-02 .rmd-s-lead {
		max-width: 489px;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	.rmd-s--testimonials-02 .rmd-s-quotes { --rmd-gap: var(--spacing-16, 16px); }
	/* The row is the slide, not the card: transparent, and the panel is one of
	   its two children. */
	.rmd-s--testimonials-02 .rmd-s-quote {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-16, 16px);
		padding: 0;
		background: none;
		box-shadow: none;
		border-radius: 0;
	}
	.rmd-s--testimonials-02 .rmd-s-quote-body {
		display: flex;
		flex-direction: column;
		/* The DS pushes the words to the BOTTOM of the panel (justify-end), so a
		   short quote drops rather than floats. */
		justify-content: flex-end;
		gap: var(--space-4xl, 40px);
		flex: 0 0 761px;
		max-width: 761px;
		height: 423px;
		padding: var(--space-5xl, 48px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-surface-modal, #f4f7fa);
		border-radius: var(--radius-8, 8px);
	}
	/* h4 Regular — NOT the h3 Medium of Testimonials 01. */
	.rmd-s--testimonials-02 .rmd-s-quote-text {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 400;
		font-size: var(--font-size-h4, 32px);
		line-height: 1.3;
		letter-spacing: normal;
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s--testimonials-02 .rmd-s-quote-photo {
		flex: 1 1 0;
		min-width: 0;
		height: 423px;
	}
	.rmd-s--testimonials-02 .rmd-s-quote-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-8, 8px);
	}

	@media (max-width: 1120px) {
		/* Below the 1200 frame the fixed panel cannot hold; it becomes the
		   greater share of the row instead of an absolute width. */
		.rmd-s--testimonials-02 .rmd-s-quote-body { flex: 1 1 60%; max-width: none; }
	}
	@media (max-width: 900px) {
		.rmd-s--testimonials-02 .rmd-s-headrow { flex-direction: column; align-items: stretch; }
		.rmd-s--testimonials-02 .rmd-s-quote { flex-direction: column; align-items: stretch; }
		.rmd-s--testimonials-02 .rmd-s-quote-body,
		.rmd-s--testimonials-02 .rmd-s-quote-photo { flex: none; height: auto; }
		.rmd-s--testimonials-02 .rmd-s-quote-photo { height: 260px; }
		.rmd-s--testimonials-02 .rmd-s-quote-text { font-size: var(--font-size-h5, 28px); }
	}

	/* ── Testimonials 04 — 46968:16164, read 21/10 ──────────────────────────
	   Three review cards of equal height, gutter 16, under the same heading row
	   as 02. Section padding 100/0; wrapper max 1200, gap 48. */

	/* The heading row is the SAME component on both (47410:29087): heading group
	   flexes, arrows sit at its bottom-right, 32 between them. */
	.rmd-s--testimonials-02 .rmd-s-headrow,
	.rmd-s--testimonials-04 .rmd-s-headrow { margin-bottom: var(--space-5xl, 48px); }
	.rmd-s--testimonials-04 .rmd-s-head { gap: var(--space-xl, 20px); }
	.rmd-s--testimonials-04 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); }
	.rmd-s--testimonials-04 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--testimonials-04 .rmd-s-lead {
		max-width: 489px;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	.rmd-s--testimonials-04 .rmd-s-quotes { --rmd-gap: var(--spacing-16, 16px); }
	.rmd-s--testimonials-04 .rmd-s-quote-by { margin-top: 0; }
	.rmd-s--testimonials-04 .rmd-s-quote {
		/* Top-aligned with the slack below, which is what the node draws:
		   Content at y=28 of a 348 card, 258 tall, 62 left over. Centring
		   it (and the family's margin-top:auto on the person) moved the
		   whole block down. */
		justify-content: flex-start;
		gap: var(--space-3xl, 32px);
		/* 28, written out: the DS has two collections under the name
		   --space-2xl and the testimonials one is 28 while ours is 24
		   (RMD-design-system/tokens/design-tokens.md:416). A token here would be 4px short. */
		padding: 28px;
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-modals, #e2e8f0);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	/* Inter body-lg, not the DS's h5: real reviews run to 300+ characters
	   and h5 made every card twice the height of its text. */
	.rmd-s--testimonials-04 .rmd-s-quote-text {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 400;
		font-size: var(--font-size-body-lg, 18px);
		line-height: 1.6;
		letter-spacing: normal;
		color: var(--color-content-primary, #0f172b);
	}

	@media (max-width: 1023px) {
		.rmd-s--testimonials-04 .rmd-s-quotes { --rmd-cols: 2; }
	}
	@media (max-width: 760px) {
		.rmd-s--testimonials-04 .rmd-s-quotes { --rmd-cols: 1; }
		.rmd-s--testimonials-04 .rmd-s-headrow { flex-direction: column; align-items: stretch; }
	}

	/* ── Testimonials 05 — 46968:16166, read 21/10 ──────────────────────────
	   No heading group at all: the quote is the section, centred on a panel,
	   with one arrow pinned inside each edge. Section padding 100/0. */
	.rmd-s--testimonials-05 .rmd-s-panel {
		position: relative;
		background: var(--color-surface-canvas-alt, #f5f8fb);
		border: 1px solid var(--color-border-surface-modals, #e2e8f0);
		border-radius: var(--radius-8, 8px);
		padding: var(--spacing-80, 80px) var(--spacing-48, 48px);
		overflow: hidden;
	}
	/* The arrows are inside the panel, at its two inner edges and vertically
	   centred — not a row under the list. The bar itself must not swallow
	   clicks meant for the quote between them. */
	.rmd-s--testimonials-05 .rmd-s-arrows {
		position: absolute;
		inset: 0;
		margin: 0;
		padding-inline: var(--spacing-48, 48px);
		align-items: center;
		justify-content: space-between;
		pointer-events: none;
	}
	.rmd-s--testimonials-05 .rmd-s-arrow { pointer-events: auto; }

	/* The slide FILLS its track and the 924 is the words': a 924 slide centred
	   in a 1102 track snapped by its start edge, so the carousel opened 89px
	   scrolled — off centre, « previous » lit (23/10). */
	.rmd-s--testimonials-05 .rmd-s-quote {
		align-items: center;
		text-align: center;
		gap: var(--space-5xl, 48px);
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}
	.rmd-s--testimonials-05 .rmd-s-quote-text {
		max-width: 924px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-h3, 40px);
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	/* The only variant that stacks the likeness ABOVE the name, and the only
	   64 avatar in the file. */
	.rmd-s--testimonials-05 .rmd-s-quote-by {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-16, 16px);
	}
	.rmd-s--testimonials-05 .rmd-s-quote-avatar { width: 64px; height: 64px; }
	.rmd-s--testimonials-05 .rmd-s-quote-who { align-items: center; }

	@media (max-width: 900px) {
		.rmd-s--testimonials-05 .rmd-s-panel {
			padding: var(--space-5xl, 48px) var(--space-2xl, 24px);
		}
		/* No room to flank the words at this width: the arrows come back out
		   from under the quote and sit beneath it. */
		.rmd-s--testimonials-05 .rmd-s-arrows {
			position: static;
			padding-inline: 0;
			justify-content: center;
			margin-top: var(--space-3xl, 32px);
			pointer-events: auto;
		}
		.rmd-s--testimonials-05 .rmd-s-quote-text { font-size: var(--font-size-h5, 24px); }
	}

	/* ── Testimonials 06 — 46968:16163, read 21/10 ──────────────────────────
	   A band of FIXED 336x458 cards under the same heading row as 02 and 04.
	   It starts at the content edge and runs off the right of the screen —
	   not the edge-to-edge bleed the other marquees use. */
	.rmd-s--testimonials-06 .rmd-s-headrow { margin-bottom: var(--space-5xl, 48px); }
	.rmd-s--testimonials-06 .rmd-s-head { gap: var(--space-xl, 20px); }
	.rmd-s--testimonials-06 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); }
	.rmd-s--testimonials-06 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--testimonials-06 .rmd-s-lead {
		max-width: 489px;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	.rmd-s--testimonials-06 .rmd-s-quotes {
		/* Right edge only. The shared marquee bleeds both sides; this one is
		   flush with the heading above it. */
		margin-inline: 0 calc(50% - 50vw);
		padding-inline: 0;
		scroll-padding-inline: 0;
		gap: var(--spacing-16, 16px);
	}
	.rmd-s--testimonials-06 .rmd-s-quotes > .rmd-s-quote {
		width: 336px;
		height: 458px;
		gap: var(--spacing-24, 24px);
		padding: 0;
		overflow: hidden;
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	/* The person IS the card's picture here — no avatar, and the photo takes
	   whatever height the words leave. */
	.rmd-s--testimonials-06 .rmd-s-quote-photo {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
	}
	.rmd-s--testimonials-06 .rmd-s-quote-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	.rmd-s--testimonials-06 .rmd-s-quote-body {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-32, 32px);
		width: 100%;
		padding: 0 var(--spacing-16, 16px) var(--spacing-16, 16px);
	}
	.rmd-s--testimonials-06 .rmd-s-quote-text {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 400;
		font-size: var(--font-size-h6, 20px);
		line-height: 1.4;
		letter-spacing: normal;
	}
	.rmd-s--testimonials-06 .rmd-s-quote-who { gap: 4px; }
	/* Alone in the family, the name and role are Inter rather than Poppins,
	   on their own tracking — a different card component in the DS. */
	.rmd-s--testimonials-06 .rmd-s-quote-name {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 600;
		font-size: var(--font-size-h6, 20px);
		line-height: 1.15;
		letter-spacing: -0.4px;
	}
	.rmd-s--testimonials-06 .rmd-s-quote-role {
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.5;
		letter-spacing: -0.32px;
	}

	@media (max-width: 760px) {
		.rmd-s--testimonials-06 .rmd-s-headrow { flex-direction: column; align-items: stretch; }
		.rmd-s--testimonials-06 .rmd-s-quotes > .rmd-s-quote { width: 280px; height: 420px; }
	}

	/* ── Hero 03 — 46900:13721, read 21/10 ──────────────────────────────────
	   The one band with NO vertical padding: the image is flush top and bottom
	   and gives the section its height. Words left, 660 image right. */
	.rmd-s--hero-03 {
		position: relative;
		padding-block: 0;
		overflow: hidden;
	}
	/* The gradient arcs behind the words, at 30% as the node sets them. Purely
	   decorative, so it is a background and never reaches the accessible tree. */
	.rmd-s--hero-03::before {
		content: "";
		position: absolute;
		left: -424px;
		top: 50%;
		width: 832px;
		height: 832px;
		transform: translateY(-50%);
		background: url("../img/sections/hero-03-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--hero-03 .rmd-s-wrap { --rmd-gutter: 0px; position: relative; }
	.rmd-s--hero-03 .rmd-s-split {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0;
	}
	.rmd-s--hero-03 .rmd-s-col:first-child {
		flex: 1 1 0;
		min-width: 0;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--spacing-48, 48px) var(--spacing-48, 48px) var(--spacing-48, 48px) 0;
	}
	.rmd-s--hero-03 .rmd-s-col:last-child { flex: 0 0 660px; align-self: stretch; }
	.rmd-s--hero-03 .rmd-s-media { margin: 0; height: 100%; }
	/* Square: the photograph runs flush to the band's top and bottom (47226:141). */
	.rmd-s--hero-03 .rmd-s-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

	/* The left-aligned heading group (47410:21598), measured the same on
	   Hero 03 and 04 and Stats 02 and 06: 20 from the title block to the
	   frame under it, 16 inside the block. The row that wraps a lead and a
	   pair of buttons stays with the variants that were measured carrying
	   one, since an unmeasured family may not. */
	.rmd-s-head--left-aligned { gap: var(--space-xl, 20px); }
	.rmd-s-head--left-aligned .rmd-s-head-main {
		display: grid;
		gap: var(--spacing-16, 16px);
	}
	.rmd-s--hero-03 .rmd-s-head { margin-bottom: 0; }
	.rmd-s--hero-03 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); }
	.rmd-s--hero-03 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	/* Not lettered uppercase text: a pill with an arrow badge after it.
	   This belongs to the shared Heading group (47410:22033), so all three
	   heroes read it from here rather than each keeping a copy. */
	/* The pill is the base .rmd-s-overline now, for every variant. */

	/* The lead and the buttons share a ROW — lead left, pair right, bottom
	   aligned. This was scoped to Hero 03 and 04 because they were the only
	   two measured carrying one, with the note that an unmeasured family might
	   not. The ↪ Typography page settles it: 47410:21606 is the heading
	   group's own `Layout=left-aligned`, and it draws that row as part of the
	   COMPONENT. So it belongs to every left-aligned band, not to two heroes.

	   The 416 does NOT come with it. That is the hero's tall column pushing
	   the pair to its foot, which is a property of those two bands and not of
	   the heading group; everything else keeps the 24 row gap from the base
	   rule, so a wrapped pair sits a normal gap under the lead. */
	.rmd-s-head--left-aligned .rmd-s-head-aside {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		column-gap: var(--spacing-16, 16px);
	}
	.rmd-s--hero-03 .rmd-s-head-aside,
	.rmd-s--hero-04 .rmd-s-head-aside { row-gap: 416px; }
	.rmd-s--hero-03 .rmd-s-lead,
	.rmd-s--hero-04 .rmd-s-lead {
		width: min(100%, 489px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--hero-01 .rmd-s-actions,
	.rmd-s--hero-03 .rmd-s-actions,
	.rmd-s--hero-04 .rmd-s-actions,
	.rmd-s--hero-05 .rmd-s-actions { gap: var(--spacing-16, 16px); align-items: flex-start; }
	/* The leader carries a 32 arrow. A mask, not an image, so it takes the
	   button's own colour in every state. */
	.rmd-s .rmd-btn--primary::after,
	.rmd-s .rmd-btn--promotional::after {
		content: "";
		width: 32px;
		height: 32px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	@media (max-width: 1248px) {
		.rmd-s--hero-03 .rmd-s-wrap { --rmd-gutter: var(--space-2xl, 24px); }
	}
	@media (max-width: 1023px) {
		/* Below the frame there is no column left to push the buttons down. */
		.rmd-s--hero-03 .rmd-s-head-aside,
		.rmd-s--hero-04 .rmd-s-head-aside { row-gap: var(--space-5xl, 48px); }
		.rmd-s--hero-03 .rmd-s-col:last-child { flex: 0 0 45%; }
	}
	@media (max-width: 760px) {
		.rmd-s--hero-03 { padding-block: var(--space-6xl, 64px); }
		.rmd-s--hero-03::before { display: none; }
		.rmd-s--hero-03 .rmd-s-split { flex-direction: column; }
		.rmd-s--hero-03 .rmd-s-col:first-child { padding: 0 0 var(--space-3xl, 32px); }
		.rmd-s--hero-03 .rmd-s-col:last-child { flex: none; width: 100%; }
		/* Inside the gutters now, like every other picture on a phone. */
		.rmd-s--hero-03 .rmd-s-media img { height: 320px; border-radius: var(--radius-8, 8px); }
	}

	/* ── Hero 04 — 46900:13718, read 21/10 ──────────────────────────────────
	   The same heading group as 03 — pill, title, then the lead and the buttons
	   on ONE row — over a full-width image. Section padding 100/0, and the
	   container itself is 832 tall, which is what gives the image its height. */
	.rmd-s--hero-04 { position: relative; overflow: hidden; }
	/* The arcs sit top-RIGHT here, and a different corner of the same drawing. */
	.rmd-s--hero-04::before {
		content: "";
		position: absolute;
		right: 0;
		top: calc(50% - 352px);
		width: 832px;
		height: 832px;
		transform: translateY(-50%);
		background: url("../img/sections/hero-03-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--hero-04 .rmd-s-wrap {
		position: relative;
		min-height: 832px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-5xl, 48px);
	}
	.rmd-s--hero-04 .rmd-s-head { gap: var(--space-xl, 20px); margin-bottom: 0; }
	.rmd-s--hero-04 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); }
	.rmd-s--hero-04 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--hero-04 .rmd-s-media { flex: 1 1 0; min-height: 280px; margin: 0; }
	.rmd-s--hero-04 .rmd-s-media img { width: 100%; height: 100%; object-fit: cover; }

	/* ── Hero 05 — 46900:13713, read 21/10 ──────────────────────────────────
	   Image first, then a TWO-COLUMN heading: pill and title left, a
	   right-aligned lead over right-aligned buttons on the other, 32 between
	   them, both columns sitting on the same baseline. The band is 832 tall in
	   all and the words take what the image leaves. */
	.rmd-s--hero-05 {
		position: relative;
		padding-block: 0;
		min-height: 832px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	/* A larger drawing than 03 and 04 use, turned, and hung off the left. */
	.rmd-s--hero-05::before {
		content: "";
		position: absolute;
		left: -174px;
		top: -120px;
		width: 1184px;
		height: 1184px;
		transform: rotate(180deg) scaleY(-1);
		background: url("../img/sections/hero-05-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--hero-05 .rmd-s-wrap {
		position: relative;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-5xl, 48px);
		padding-block: var(--space-100, 100px);
	}
	.rmd-s--hero-05 .rmd-s-media { flex: 1 1 0; min-height: 280px; margin: 0; }
	.rmd-s--hero-05 .rmd-s-media img { width: 100%; height: 100%; object-fit: cover; }

	/* The two-column heading group (47410:21616), measured the same on Hero 05
	   and Stats 09: 32 between the columns, both sitting on the same baseline,
	   16 inside the title block. CTA 04 and 05 are `stacked` too but set their
	   own gap, and win on specificity. */
	.rmd-s-head--stacked { gap: var(--space-3xl, 32px); }
	.rmd-s-head--stacked .rmd-s-head-main {
		display: grid;
		gap: var(--spacing-16, 16px);
		align-content: end;
	}
	.rmd-s--hero-05 .rmd-s-head { margin-bottom: 0; }
	/* NO tracking: 03 and 04 are at -1. */
	.rmd-s--hero-05 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: normal;
	}
	.rmd-s--hero-05 .rmd-s-head-aside {
		gap: var(--space-2xl, 24px);
		justify-items: end;
		align-content: end;
		text-align: right;
	}
	.rmd-s--hero-05 .rmd-s-lead {
		width: min(100%, 429px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	@media (max-width: 900px) {
		.rmd-s--hero-04 .rmd-s-wrap { min-height: 0; }
		.rmd-s--hero-04 .rmd-s-media,
		.rmd-s--hero-05 .rmd-s-media { flex: none; height: 320px; }
		.rmd-s--hero-05 { min-height: 0; padding-block: 0; }
		/* Two columns and a right-aligned lead stop making sense here. */
		.rmd-s--hero-05 .rmd-s-head-aside {
			justify-items: start;
			text-align: left;
		}
		.rmd-s--hero-04::before,
		.rmd-s--hero-05::before { display: none; }
	}

	/* ── Hero 01 — 47287:31119, read 21/10 ──────────────────────────────────
	   Centred heading, partner strip, two-row image band. No section padding:
	   the container opens with 48 of its own and the band runs to the foot. */
	.rmd-s--hero-01 { position: relative; padding-block: 0; overflow: hidden; }
	/* Very faint curved shapes behind the words, at 20%. */
	.rmd-s--hero-01::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 1440px;
		height: 974px;
		transform: translateX(-50%);
		opacity: .2;
		background: url("../img/sections/hero-01-shapes.svg") center / cover no-repeat;
		pointer-events: none;
	}
	.rmd-s--hero-01 .rmd-s-wrap { position: relative; padding-top: var(--space-5xl, 48px); }

	/* The node nests its gaps 24 then 32, which is exactly our head /
	   head-aside pair: title block → lead, then lead → buttons. */
	.rmd-s--hero-01 .rmd-s-head {
		max-width: 1104px;
		margin-inline: auto;
		margin-bottom: 0;
		gap: var(--space-2xl, 24px);
	}
	.rmd-s--hero-01 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); justify-items: center; }
	.rmd-s--hero-01 .rmd-s-head-aside { gap: var(--space-3xl, 32px); }
	.rmd-s--hero-01 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--hero-01 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	/* The partner strip: a label, a 48 rule, then the names. The grid the
	   shared rule gives this wrapper is wrong here — it is one row. */
	.rmd-s--hero-01 .rmd-s-partners {
		display: flex;
		align-items: center;
		gap: 28px;
		margin-top: var(--space-6xl, 64px);
	}
	.rmd-s--hero-01 .rmd-s-partners-label {
		flex: none;
		margin: 0;
		display: flex;
		align-items: center;
		height: 48px;
		padding-right: 28px;
		border-right: 1px solid var(--color-border-control-default, #cad5e2);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-xl, 14px);
		color: var(--color-content-tertiary, #3b4b62);
	}
	/* No rule of its own: the label carries the node's one rule (above). The
	   shared list rule draws a left border too, and the strip showed two (23/10). */
	.rmd-s--hero-01 .rmd-s-partners-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--space-2xl, 24px);
		row-gap: 0;
		min-width: 0;
		border-left: 0;
		padding-left: 0;
	}
	/* Set at 40% in varying weights so the row reads as logos, not as a list.
	   The node's order of weights does not repeat; this three-step cycle
	   stands in for it and is the one value here not read off the node. */
	.rmd-s--hero-01 .rmd-s-partner {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 700;
		font-size: var(--font-size-h6, 20px);
		line-height: 28px;
		letter-spacing: -0.2px;
		color: var(--color-content-primary, #0f172b);
		opacity: .4;
		white-space: nowrap;
	}
	.rmd-s--hero-01 .rmd-s-partner:nth-child(3n+2) { font-weight: 600; }
	.rmd-s--hero-01 .rmd-s-partner:nth-child(3n)   { font-weight: 300; }

	.rmd-s--hero-01 .rmd-s-marquee { margin-top: var(--space-2xl, 24px); }
	.rmd-s--hero-01 .rmd-s-marquee-row > li {
		position: relative;
		width: 424px;
		height: 280px;
		border-radius: var(--radius-6, 6px);
		overflow: hidden;
		background: var(--color-surface-region, #fcfcfd);
		box-shadow: 0 3px 12px rgba(0, 0, 0, .04); /* Elevation/MD */
	}
	/* The dark wash the node lays over every shot. */
	.rmd-s--hero-01 .rmd-s-marquee-row > li::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var(--radius-6, 6px);
		background: linear-gradient(to bottom, rgba(4, 17, 53, 0) 0%, rgba(4, 17, 53, .35) 30%, rgba(4, 17, 53, .88) 100%);
		pointer-events: none;
	}
	.rmd-s--hero-01 .rmd-s-marquee-img {
		width: 100%;
		height: 100%;
		border-radius: var(--radius-6, 6px);
	}
	/* The second row starts a card and a half further left, which is what
	   keeps the two from ever lining up. */
	.rmd-s--hero-01 .rmd-s-marquee-row--rtl { margin-left: -608px; }

	@media (max-width: 900px) {
		.rmd-s--hero-01::before { display: none; }
		.rmd-s--hero-01 .rmd-s-partners { flex-wrap: wrap; gap: var(--spacing-16, 16px); }
		.rmd-s--hero-01 .rmd-s-partners-label { border-right: 0; padding-right: 0; height: auto; }
		.rmd-s--hero-01 .rmd-s-marquee-row > li { width: 260px; height: 172px; }
		.rmd-s--hero-01 .rmd-s-marquee-row--rtl { margin-left: -180px; }
	}

	/* ── CTA 01 — 46933:3548, read 21/10 ────────────────────────────────────
	   Everything below is read off the four CTA nodes. What they share first:
	   the band is surface/region, carries no padding of its own (the content
	   frame holds 48), its leader is the promotional button one step larger
	   than elsewhere, and a pale shape is drawn behind the words. */
	.rmd-s--cta {
		position: relative;
		padding-block: 0;
		overflow: hidden;
		background: var(--color-surface-region, #fcfcfd);
	}
	.rmd-s--cta .rmd-s-wrap { position: relative; padding-block: var(--spacing-48, 48px); }
	.rmd-s--cta .rmd-s-head { margin-bottom: 0; }
	/* label-3xl, not the label-2xl every other family's buttons use. */
	.rmd-s--cta .rmd-btn--promotional { font-size: var(--font-size-label-3xl, 18px); }
	.rmd-s--cta .rmd-s-actions { gap: var(--spacing-16, 16px); align-items: flex-start; }
	.rmd-s--cta::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1900px;
		height: 1565px;
		transform: translate(-50%, -50%);
		background: center / contain no-repeat;
		pointer-events: none;
	}

	/* 01: the one CTA on a panel — radius 24, padding 64, 1008 wide. */
	.rmd-s--cta-01::before {
		background-image: url("../img/sections/cta-01-shape.svg");
		top: calc(50% - 73px);
	}
	.rmd-s--cta-01 .rmd-s-panel {
		background: none;
		border: 0;
		border-radius: 24px;
		/* 84.5 above and below, and the words OVERHANG the panel by 24 per
		   side — 1056 of text across a 1008 background (46904:11075 sits at
		   x -24). 64 all round made the band 41 short and clamped the h1 to
		   an 880 box, so it wrapped earlier than the design. */
		padding: 84.5px 0;
	}
	/* 24 from the title block to the lead, 32 from the lead to the buttons. */
	.rmd-s--cta-01 .rmd-s-head { gap: var(--spacing-24, 24px); max-width: 1056px; margin-inline: auto; }
	.rmd-s--cta-01 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); justify-items: center; }
	.rmd-s--cta-01 .rmd-s-head-aside { gap: var(--spacing-32, 32px); }
	.rmd-s--cta-01 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-2, -2px);
	}
	.rmd-s--cta-01 .rmd-s-head .rmd-s-lead {
		width: min(100%, 481px);
		max-width: 100%;
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	/* ── CTA 03 — 46933:3551, read 21/10 ────────────────────────────────────
	   The same band without the panel and without a lead: pill, title, buttons,
	   48 apart. */
	.rmd-s--cta-03::before {
		background-image: url("../img/sections/cta-01-shape.svg");
		top: calc(50% + 78px);
	}
	.rmd-s--cta-03 .rmd-s-head {
		gap: var(--spacing-48, 48px);
		max-width: 1056px;
		margin-inline: auto;
	}
	.rmd-s--cta-03 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); justify-items: center; }
	.rmd-s--cta-03 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-2, -2px);
	}

	/* ── CTA 04 — 46933:3550, read 21/10 ────────────────────────────────────
	   Two columns on one baseline: the title takes the room, the buttons take
	   what they need. 48 between, and 48 of padding inside the rounded box. */
	.rmd-s--cta-04::before {
		background-image: url("../img/sections/cta-04-shape.svg");
		height: 1641px;
		top: calc(50% + 148px);
	}
	.rmd-s--cta-04 .rmd-s-head {
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: var(--spacing-48, 48px);
		border-radius: 16px;
		padding-block: var(--spacing-48, 48px);
	}
	.rmd-s--cta-04 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); }
	.rmd-s--cta-04 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}

	/* ── CTA 05 — 46933:3553, read 21/10 ────────────────────────────────────
	   The shortest band of the four: title left, and a 439 column on the right
	   holding the lead over the buttons. */
	.rmd-s--cta-05::before {
		background-image: url("../img/sections/cta-05-shape.svg");
		width: 1703px;
		left: calc(50% + 53px);
		top: calc(50% + 164px);
	}
	.rmd-s--cta-05 .rmd-s-head {
		grid-template-columns: 1fr 439px;
		align-items: end;
		gap: var(--spacing-24, 24px);
		border-radius: 16px;
	}
	.rmd-s--cta-05 .rmd-s-head-main { display: grid; gap: var(--spacing-16, 16px); }
	.rmd-s--cta-05 .rmd-s-head-aside { gap: var(--spacing-32, 32px); align-content: center; }
	.rmd-s--cta-05 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-2, -2px);
	}
	.rmd-s--cta-05 .rmd-s-lead {
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	/* 04 and 05 run flush with the 1200 frame; only below it do they need the
	   page's own gutter. */
	@media (min-width: 1249px) {
		.rmd-s--cta-04 .rmd-s-wrap,
		.rmd-s--cta-05 .rmd-s-wrap { --rmd-gutter: 0px; }
	}
	@media (max-width: 900px) {
		.rmd-s--cta-04 .rmd-s-head,
		.rmd-s--cta-05 .rmd-s-head { grid-template-columns: 1fr; }
		.rmd-s--cta-01 .rmd-s-panel { padding: var(--space-5xl, 48px) var(--space-2xl, 24px); }
		.rmd-s--cta::before { display: none; }
	}

	/* ── CTA 06 — mock "Split avec photo", read 03/11 ───────────────────────
	   Not from the UI Blocks canvas and not from a Figma node: Variation 1 of
	   the agence-seo-maroc CTA proposal, approved by the owner as a mock, so
	   the 63 stays 63. A band on canvas-alt, two equal columns 64 apart (the
	   generic split), words left: the pill, the title (H3 through the shared
	   clamp), the lead in Body LG and ONE filled primary button with an arrow.
	   Right: a 4 / 3 photograph, radius 8, over 24 of padding (48 once
	   stacked), and a white rating card (radius 8, 1px border, Elevation LG)
	   at its bottom-left corner: the score in H4 beside five stars over one
	   Body SM line. The card hangs 32 outside the photo on desktop and sits 16
	   inside it below 901. Behind the photo, the pale Rhillane stripes, 500
	   wide, 200 past the band's right edge. Section padding is 48, 64 from 901
	   and 100 from 1249, the mock's own band-pad ramp.

	   The orange of the stars is the series token the mock reads
	   (chart/series/4, orange-400). Phones: the button takes the full width and
	   may wrap onto two lines, because its label is long. */
	.rmd-s--cta-06 { background: var(--color-surface-canvas-alt, rgb(245 248 251)); }
	.rmd-s--cta-06::before {
		display: block;
		left: auto;
		right: -200px;
		top: -64px;
		width: 500px;
		height: 528px;
		transform: none;
		opacity: .6;
		background-image: url("../img/sections/cta-06-stripes.svg");
	}
	.rmd-s--cta-06 .rmd-s-wrap { padding-block: var(--spacing-48, 48px); }
	.rmd-s--cta-06 .rmd-s-split .rmd-s-head { margin-bottom: 0; }
	.rmd-s--cta-06 .rmd-s-head { gap: var(--space-xl, 20px); }
	.rmd-s--cta-06 .rmd-s-head-main { display: grid; gap: var(--space-md, 12px); }
	.rmd-s--cta-06 .rmd-s-head-aside {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--space-xl, 20px);
	}
	.rmd-s--cta-06 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--cta-06 .rmd-s-lead {
		max-width: 600px;
		font-size: var(--font-size-body-lg, 18px);
		line-height: 1.6;
	}
	.rmd-s--cta-06 .rmd-s-actions { margin-top: var(--space-3xl, 32px); gap: var(--space-lg, 16px) var(--space-2xl, 24px); }
	.rmd-s--cta-06 .rmd-btn {
		height: auto;
		min-height: var(--scale-48, 48px);
		padding-block: var(--space-sm, 8px);
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
	.rmd-s--cta-06 .rmd-btn::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-right.svg") center / contain no-repeat;
	}
	.rmd-s--cta-06 .rmd-s-photo { position: relative; padding-bottom: var(--spacing-48, 48px); }
	.rmd-s--cta-06 .rmd-s-media { margin: 0; }
	.rmd-s--cta-06 .rmd-s-media-img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--cta-06 .rmd-s-rating,
	.rmd-s--cta-07 .rmd-s-rating {
		position: absolute;
		left: var(--spacing-16, 16px);
		right: var(--spacing-16, 16px);
		bottom: 0;
		width: fit-content;
		max-width: calc(100% - 2 * var(--spacing-16, 16px));
		display: flex;
		align-items: center;
		gap: var(--space-lg, 16px);
		padding: var(--space-lg, 16px) var(--space-xl, 20px);
		background: var(--color-surface-canvas, rgb(255 255 255));
		border: 1px solid var(--color-border-surface-modals, rgb(226 232 240));
		border-radius: var(--radius-8, 8px);
		box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, .05));
	}
	.rmd-s--cta-06 .rmd-s-rating-score,
	.rmd-s--cta-07 .rmd-s-rating-score {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-h4, 32px);
		line-height: 1;
		white-space: nowrap;
		color: var(--color-content-primary, rgb(15 23 43));
	}
	.rmd-s--cta-06 .rmd-s-rating-meta,
	.rmd-s--cta-07 .rmd-s-rating-meta {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs, 4px);
		min-width: 0;
	}
	.rmd-s--cta-06 .rmd-s-rating-stars,
	.rmd-s--cta-07 .rmd-s-rating-stars { display: inline-flex; gap: 2px; color: var(--color-orange-400, rgb(255 137 4)); }
	.rmd-s--cta-06 .rmd-s-rating-stars svg,
	.rmd-s--cta-07 .rmd-s-rating-stars svg { width: 16px; height: 16px; fill: currentColor; }
	.rmd-s--cta-06 .rmd-s-rating-label,
	.rmd-s--cta-07 .rmd-s-rating-label {
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.3;
		color: var(--color-content-tertiary, rgb(59 75 98));
	}
	@media (min-width: 901px) {
		.rmd-s--cta-06 .rmd-s-wrap { padding-block: var(--space-6xl, 64px); }
		.rmd-s--cta-06 .rmd-s-photo { padding-bottom: var(--spacing-24, 24px); }
		.rmd-s--cta-06 .rmd-s-rating { left: calc(var(--spacing-32, 32px) * -1); right: auto; }
	}
	@media (min-width: 1249px) {
		.rmd-s--cta-06 .rmd-s-wrap { padding-block: var(--space-100, 100px); }
	}
	@media (max-width: 760px) {
		.rmd-s--cta-06 .rmd-s-actions { align-self: stretch; }
		.rmd-s--cta-06 .rmd-s-actions .rmd-btn { width: 100%; }
	}

	/* ── CTA 07 — mock "Collage et 3 étapes", read 03/11 ────────────────────
	   Variation 7 of the agence-seo-maroc CTA proposal, approved as a mock and
	   not drawn in Figma. A band on canvas, two equal columns 64 apart, words
	   first when stacked (below 901) and the collage FIRST on desktop, as the
	   mock orders it. Words: the pill, the title (H3 through the shared clamp,
	   one word in the sunrise ramp), the steps and ONE filled primary button
	   with an arrow, 20 apart. Steps: a 40 disc (indigo-600, 3px indigo-50
	   ring, white Poppins figure), a 1px connector down to the next disc, the
	   title in Title MD and one Body SM line, 24 between steps, 32 under the
	   title. Collage: 1.2fr / 1fr, two rows, 16 gaps, 1 / .9, radius 8; the
	   first photo spans both rows. The rating card is CTA 06's, hung 16 off the
	   bottom-right corner. Section padding is 48, 64 from 901, 100 from 1249. */
	.rmd-s--cta-07 { background: var(--color-surface-canvas, rgb(255 255 255)); }
	.rmd-s--cta-07::before { display: none; }
	.rmd-s--cta-07 .rmd-s-wrap { padding-block: var(--spacing-48, 48px); }
	.rmd-s--cta-07 .rmd-s-split > .rmd-s-col:first-child { display: grid; gap: var(--space-xl, 20px); align-content: center; }
	.rmd-s--cta-07 .rmd-s-split .rmd-s-head { margin-bottom: 0; }
	.rmd-s--cta-07 .rmd-s-head-main { display: grid; gap: var(--space-md, 12px); }
	.rmd-s--cta-07 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--cta-07 .rmd-s-grad,
	.rmd-s--hero-06 .rmd-s-grad {
		background-image: var(--gradient-promotional-sunrise, linear-gradient(142.72deg, rgb(236 0 63) 0%, rgb(251 44 54) 50%, rgb(255 137 4) 100%));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
	.rmd-s--cta-07 .rmd-s-steps {
		display: grid;
		margin: var(--space-md, 12px) 0 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s--cta-07 .rmd-s-step {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--space-lg, 16px);
		padding-bottom: var(--spacing-24, 24px);
	}
	.rmd-s--cta-07 .rmd-s-step:last-child { padding-bottom: 0; }
	.rmd-s--cta-07 .rmd-s-step::before {
		content: "";
		position: absolute;
		left: calc(var(--scale-40, 40px) / 2 - 1px);
		top: var(--scale-40, 40px);
		bottom: 0;
		width: 1px;
		background: var(--color-border-surface-divider, rgb(202 213 226));
	}
	.rmd-s--cta-07 .rmd-s-step:last-child::before { display: none; }
	.rmd-s--cta-07 .rmd-s-step-n {
		position: relative;
		z-index: 1;
		display: grid;
		place-items: center;
		box-sizing: border-box;
		width: var(--scale-40, 40px);
		height: var(--scale-40, 40px);
		border-radius: 50%;
		background: var(--color-indigo-600, rgb(79 57 246));
		border: 3px solid var(--color-indigo-50, rgb(238 242 255));
		color: var(--color-content-static-white, rgb(255 255 255));
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-2xl, 16px);
		line-height: 1;
	}
	.rmd-s--cta-07 .rmd-s-step-body { min-width: 0; }
	.rmd-s--cta-07 .rmd-s-step-title {
		display: block;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-title-md, 18px);
		line-height: 1.3;
		color: var(--color-content-primary, rgb(15 23 43));
	}
	.rmd-s--cta-07 .rmd-s-step-text {
		margin: var(--space-2xs, 4px) 0 0;
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.5;
		color: var(--color-content-tertiary, rgb(59 75 98));
	}
	.rmd-s--cta-07 .rmd-s-actions { margin-top: var(--space-md, 12px); justify-content: flex-start; gap: var(--space-lg, 16px) var(--space-2xl, 24px); }
	.rmd-s--cta-07 .rmd-btn {
		height: auto;
		min-height: var(--scale-48, 48px);
		padding-block: var(--space-sm, 8px);
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
	.rmd-s--cta-07 .rmd-btn::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-right.svg") center / contain no-repeat;
	}
	.rmd-s--cta-07 .rmd-s-photo { position: relative; }
	.rmd-s--cta-07 .rmd-s-collage {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: var(--space-lg, 16px);
		aspect-ratio: 1 / .9;
	}
	.rmd-s--cta-07 .rmd-s-collage-tile { min-width: 0; min-height: 0; }
	.rmd-s--cta-07 .rmd-s-collage-tile:first-child { grid-row: span 2; }
	.rmd-s--cta-07 .rmd-s-collage-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--cta-07 .rmd-s-rating {
		left: auto;
		right: var(--spacing-16, 16px);
		bottom: calc(var(--spacing-16, 16px) * -1);
	}
	@media (min-width: 901px) {
		.rmd-s--cta-07 .rmd-s-wrap { padding-block: var(--space-6xl, 64px); }
		.rmd-s--cta-07 .rmd-s-split > .rmd-s-col:last-child { order: -1; }
	}
	@media (min-width: 1249px) {
		.rmd-s--cta-07 .rmd-s-wrap { padding-block: var(--space-100, 100px); }
	}
	@media (max-width: 760px) {
		.rmd-s--cta-07 .rmd-s-actions { align-self: stretch; }
		.rmd-s--cta-07 .rmd-s-actions .rmd-btn { width: 100%; }
	}

	/* ── CTA 08 — mock "Mini-formulaire avec aperçu", read 03/11 ────────────
	   Variation 5 of the agence-seo-maroc CTA proposal, approved as a mock and
	   not drawn in Figma. A band on canvas, two equal columns 64 apart, stacked
	   below 901. Words: the pill, the title (H3 through the shared clamp), a
	   ticked list (teal-50 disc, teal-600 tick) and a form on a container card
	   (radius 8, 1px border, 24 of padding): a Body SM medium label, then a 48
	   high URL input and the filled primary button on one row, stacked below
	   640. The form is a plain GET, so it needs no script. Right: a decorative
	   dashboard card (aria-hidden): a container-coloured browser bar with three
	   8 dots and a domain chip, a body of 24 with a title and a success pill,
	   three region-coloured rows (an indigo-50 tile with a Lucide icon, a Title
	   SM label, an 8 high track filled by the chart gradient at 82, 64 and 48)
	   and a ruled foot with the rating. The pale Rhillane stripes sit behind it,
	   64 off its right edge and 48 above it. Section padding is 48, 64 from 901
	   and 100 from 1249. */
	.rmd-s--cta-08 { background: var(--color-surface-canvas, rgb(255 255 255)); }
	.rmd-s--cta-08::before { display: none; }
	.rmd-s--cta-08 .rmd-s-wrap { padding-block: var(--spacing-48, 48px); }
	.rmd-s--cta-08 .rmd-s-split > .rmd-s-col:first-child { min-width: 0; }
	.rmd-s--cta-08 .rmd-s-split > .rmd-s-col:last-child { min-width: 0; align-self: center; }
	.rmd-s--cta-08 .rmd-s-split .rmd-s-head { margin-bottom: 0; }
	.rmd-s--cta-08 .rmd-s-head-main { display: grid; gap: var(--space-md, 12px); }
	.rmd-s--cta-08 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--cta-08 .rmd-s-checks { margin-top: var(--space-xl, 20px); }
	.rmd-s--cta-08 .rmd-s-check-mark,
	.rmd-s--hero-06 .rmd-s-check-mark { background: var(--color-teal-50, rgb(240 253 250)); }
	.rmd-s--cta-08 .rmd-s-check-mark::after,
	.rmd-s--hero-06 .rmd-s-check-mark::after { border-color: var(--color-teal-600, rgb(0 150 137)); }
	.rmd-s--cta-08 .rmd-s-check-text,
	.rmd-s--hero-06 .rmd-s-check-text { color: var(--color-content-secondary, rgb(29 41 61)); }
	.rmd-s--cta-08 .rmd-s-urlform {
		margin-top: var(--space-3xl, 32px);
		padding: var(--spacing-24, 24px);
		background: var(--color-surface-container, rgb(248 250 252));
		border: 1px solid var(--color-border-surface-modals, rgb(226 232 240));
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--cta-08 .rmd-s-urlform-label {
		display: block;
		margin-bottom: var(--space-sm, 8px);
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.4;
		color: var(--color-content-tertiary, rgb(59 75 98));
	}
	.rmd-s--cta-08 .rmd-s-urlform-row { display: flex; flex-direction: column; gap: var(--space-md, 12px); }
	.rmd-s--cta-08 .rmd-s-urlform input {
		box-sizing: border-box;
		width: 100%;
		height: var(--scale-48, 48px);
		padding: 0 var(--space-lg, 16px);
		border: 1px solid var(--color-border-control-default, rgb(202 213 226));
		border-radius: var(--radius-4, 4px);
		background: var(--color-surface-canvas, rgb(255 255 255));
		color: var(--color-content-primary, rgb(15 23 43));
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-md, 16px);
	}
	.rmd-s--cta-08 .rmd-s-urlform input::placeholder { color: var(--color-content-quaternary, rgb(173 187 206)); }
	.rmd-s--cta-08 .rmd-s-urlform input:hover { border-color: var(--color-border-control-hover, rgb(233 238 245)); background: var(--color-field-hover, rgb(246 249 251)); }
	.rmd-s--cta-08 .rmd-s-urlform input:focus {
		outline: none;
		border-color: var(--color-border-control-focus, rgb(43 127 255));
		box-shadow: 0 0 0 2px var(--color-border-control-focus, rgb(43 127 255));
	}
	.rmd-s--cta-08 .rmd-btn {
		height: auto;
		min-height: var(--scale-48, 48px);
		padding-block: var(--space-sm, 8px);
		max-width: 100%;
		white-space: normal;
		text-align: center;
		cursor: pointer;
	}
	.rmd-s--cta-08 .rmd-btn::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-right.svg") center / contain no-repeat;
	}
	.rmd-s--cta-08 .rmd-s-dashwrap { position: relative; }
	.rmd-s--cta-08 .rmd-s-dashwrap::before {
		content: "";
		position: absolute;
		z-index: 0;
		right: -64px;
		top: -48px;
		width: 400px;
		aspect-ratio: 529 / 558;
		opacity: .7;
		pointer-events: none;
		background: url("../img/sections/cta-06-stripes.svg") center / contain no-repeat;
	}
	.rmd-s--cta-08 .rmd-s-dash,
	.rmd-s--hero-06 .rmd-s-dash {
		position: relative;
		z-index: 1;
		overflow: hidden;
		background: var(--color-surface-canvas, rgb(255 255 255));
		border: 1px solid var(--color-border-surface-modals, rgb(226 232 240));
		border-radius: var(--radius-8, 8px);
		box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, .05));
	}
	.rmd-s--cta-08 .rmd-s-dash-bar,
	.rmd-s--hero-06 .rmd-s-dash-bar {
		display: flex;
		align-items: center;
		gap: var(--space-sm, 8px);
		padding: var(--space-md, 12px) var(--space-lg, 16px);
		background: var(--color-surface-container, rgb(248 250 252));
		border-bottom: 1px solid var(--color-border-surface-modals, rgb(226 232 240));
	}
	.rmd-s--cta-08 .rmd-s-dash-bar i,
	.rmd-s--hero-06 .rmd-s-dash-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-surface-divider, rgb(202 213 226)); }
	.rmd-s--cta-08 .rmd-s-dash-bar span,
	.rmd-s--hero-06 .rmd-s-dash-bar span {
		flex: 1;
		min-width: 0;
		margin-left: var(--space-sm, 8px);
		padding: var(--space-2xs, 4px) var(--space-md, 12px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background: var(--color-surface-canvas, rgb(255 255 255));
		border: 1px solid var(--color-border-surface-modals, rgb(226 232 240));
		border-radius: var(--radius-4, 4px);
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-sm, 14px);
		color: var(--color-content-tertiary, rgb(59 75 98));
	}
	.rmd-s--cta-08 .rmd-s-dash-body,
	.rmd-s--hero-06 .rmd-s-dash-body { display: grid; gap: var(--space-xl, 20px); padding: var(--spacing-24, 24px); }
	.rmd-s--cta-08 .rmd-s-dash-title,
	.rmd-s--hero-06 .rmd-s-dash-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md, 12px); }
	.rmd-s--cta-08 .rmd-s-dash-title b,
	.rmd-s--hero-06 .rmd-s-dash-title b {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-title-lg, 20px);
		line-height: 1.4;
		color: var(--color-content-primary, rgb(15 23 43));
	}
	.rmd-s--cta-08 .rmd-s-dash-pill,
	.rmd-s--hero-06 .rmd-s-dash-pill {
		flex: none;
		padding: var(--space-2xs, 4px) var(--space-md, 12px);
		border-radius: var(--radius-full, 9999px);
		background: var(--color-teal-50, rgb(240 253 250));
		color: var(--color-teal-600, rgb(0 150 137));
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.4;
	}
	.rmd-s--cta-08 .rmd-s-dash-row,
	.rmd-s--hero-06 .rmd-s-dash-row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--space-2xs, 4px) var(--space-lg, 16px);
		align-items: center;
		padding: var(--space-lg, 16px);
		background: var(--color-surface-region, rgb(252 252 253));
		border: 1px solid var(--color-border-soft, rgb(244 247 250));
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--cta-08 .rmd-s-dash-icon,
	.rmd-s--hero-06 .rmd-s-dash-icon {
		grid-row: span 2;
		display: grid;
		place-items: center;
		width: var(--scale-40, 40px);
		height: var(--scale-40, 40px);
		border-radius: var(--radius-8, 8px);
		background: var(--color-indigo-50, rgb(238 242 255));
		color: var(--color-indigo-600, rgb(79 57 246));
	}
	.rmd-s--cta-08 .rmd-s-dash-icon svg,
	.rmd-s--hero-06 .rmd-s-dash-icon svg { width: 20px; height: 20px; }
	.rmd-s--cta-08 .rmd-s-dash-row b,
	.rmd-s--hero-06 .rmd-s-dash-row b {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-title-sm, 16px);
		line-height: 1.3;
		color: var(--color-content-primary, rgb(15 23 43));
	}
	.rmd-s--cta-08 .rmd-s-dash-track,
	.rmd-s--hero-06 .rmd-s-dash-track { height: 8px; border-radius: var(--radius-full, 9999px); background: var(--color-state-hover, rgb(233 238 245)); overflow: hidden; }
	.rmd-s--cta-08 .rmd-s-dash-track i,
	.rmd-s--hero-06 .rmd-s-dash-track i {
		display: block;
		height: 100%;
		border-radius: var(--radius-full, 9999px);
		background: linear-gradient(90deg, var(--color-indigo-700, rgb(67 45 215)) 0%, var(--color-pink-600, rgb(230 0 118)) 50%, var(--color-orange-400, rgb(255 137 4)) 100%);
	}
	.rmd-s--cta-08 .rmd-s-dash-foot,
	.rmd-s--hero-06 .rmd-s-dash-foot { padding-top: var(--space-lg, 16px); border-top: 1px solid var(--color-border-soft, rgb(244 247 250)); }
	.rmd-s--cta-08 .rmd-s-rating,
	.rmd-s--hero-06 .rmd-s-rating {
		position: static;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs, 4px) var(--space-md, 12px);
		min-width: 0;
	}
	.rmd-s--cta-08 .rmd-s-rating-meta,
	.rmd-s--hero-06 .rmd-s-rating-meta { display: contents; }
	.rmd-s--cta-08 .rmd-s-rating-stars,
	.rmd-s--hero-06 .rmd-s-rating-stars { order: 0; display: inline-flex; gap: 2px; color: var(--color-orange-400, rgb(255 137 4)); }
	.rmd-s--cta-08 .rmd-s-rating-stars svg,
	.rmd-s--hero-06 .rmd-s-rating-stars svg { width: 16px; height: 16px; fill: currentColor; }
	.rmd-s--cta-08 .rmd-s-rating-score,
	.rmd-s--hero-06 .rmd-s-rating-score {
		order: 1;
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 600;
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.4;
		white-space: nowrap;
		color: var(--color-content-primary, rgb(15 23 43));
	}
	.rmd-s--cta-08 .rmd-s-rating-label,
	.rmd-s--hero-06 .rmd-s-rating-label {
		order: 2;
		margin-left: calc(var(--space-2xs, 4px) - var(--space-md, 12px));
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.4;
		color: var(--color-content-tertiary, rgb(59 75 98));
	}
	@media (min-width: 640px) {
		.rmd-s--cta-08 .rmd-s-urlform-row { flex-direction: row; }
		.rmd-s--cta-08 .rmd-s-urlform input { flex: 1 1 150px; width: auto; min-width: 0; }
		.rmd-s--cta-08 .rmd-s-urlform .rmd-btn { flex: 0 1 auto; }
	}
	@media (min-width: 901px) {
		.rmd-s--cta-08 .rmd-s-wrap { padding-block: var(--space-6xl, 64px); }
	}
	@media (min-width: 1249px) {
		.rmd-s--cta-08 .rmd-s-wrap { padding-block: var(--space-100, 100px); }
	}
	@media (max-width: 900px) {
		.rmd-s--cta-08 .rmd-s-dashwrap::before { right: -24px; width: 280px; }
	}

	/* ── Hero 06 — mock "Carte et canaux", read 03/11 ───────────────────────
	   Variation 2 of the agence-seo-maroc hero proposal, approved as a mock and
	   not drawn in Figma. A band on canvas, two equal columns 64 apart, stacked
	   below 1024 with the art under the words. Words: the pill, the H1 (48, -2
	   tracking, 30 on a phone) with one phrase in the sunrise ramp, a Body LG
	   lead, the primary button with its arrow beside the white bordered one,
	   then three Body SM reassurances with a teal disc. Art: CTA 08's diagnostic
	   card, drawn by the same rules (grouped with CTA 08 above), and a white
	   card over its bottom-right corner: an overline label over three region
	   tiles, each a 24 mark, the name and a teal pill with a tick. Below 761 the
	   channels card leaves the overlap and flows under the diagnostic card.
	   Section padding 64, and 80 over 100 from 1249. */
	.rmd-s--hero-06 { background: var(--color-surface-canvas, rgb(255 255 255)); padding-block: var(--space-6xl, 64px); }
	.rmd-s--hero-06 .rmd-s-split { gap: var(--space-6xl, 64px); }
	.rmd-s--hero-06 .rmd-s-split .rmd-s-head { gap: var(--space-2xl, 24px); margin-bottom: 0; }
	.rmd-s--hero-06 .rmd-s-head-main { display: grid; gap: var(--space-2xl, 24px); }
	.rmd-s--hero-06 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-2, -2px);
	}
	.rmd-s--hero-06 .rmd-s-head-aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-content: start;
		align-items: start;
		gap: var(--space-3xl, 32px);
	}
	.rmd-s--hero-06 .rmd-s-lead {
		max-width: 34em;
		font-size: var(--font-size-body-lg, 18px);
		line-height: 1.6;
		color: var(--color-content-tertiary, rgb(59 75 98));
	}
	.rmd-s--hero-06 .rmd-s-actions { gap: var(--space-md, 12px); align-items: flex-start; }
	.rmd-s--hero-06 .rmd-s-overline { padding: var(--space-sm, 8px) var(--space-lg, 16px); }
	.rmd-s--hero-06 .rmd-s-overline::after { display: none; }
	.rmd-s--hero-06 .rmd-btn--primary::after { width: 20px; height: 20px; }
	.rmd-s--hero-06 .rmd-s-checks { margin-top: var(--space-2xl, 24px); gap: var(--space-sm, 8px); }
	.rmd-s--hero-06 .rmd-s-check { gap: var(--space-sm, 8px); align-items: center; }
	.rmd-s--hero-06 .rmd-s-check-mark { width: 20px; height: 20px; }
	.rmd-s--hero-06 .rmd-s-check-mark::after { width: 7px; height: 4px; }
	.rmd-s--hero-06 .rmd-s-check-text { font-size: var(--font-size-body-sm, 14px); line-height: 1.5; }
	.rmd-s--hero-06 .rmd-s-split > .rmd-s-col:last-child {
		position: relative;
		padding: 0 var(--space-2xl, 24px) calc(var(--space-100, 100px) + var(--spacing-56, 56px)) 0;
	}
	.rmd-s--hero-06 .rmd-s-channels {
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		width: min(100%, 380px);
		padding: var(--space-lg, 16px);
		background: var(--color-surface-canvas, rgb(255 255 255));
		border: 1px solid var(--color-border-surface-modals, rgb(226 232 240));
		border-radius: var(--radius-8, 8px);
		box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, .05));
	}
	.rmd-s--hero-06 .rmd-s-channels-k {
		display: block;
		margin-bottom: var(--space-md, 12px);
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 600;
		font-size: var(--font-size-overline-sm, 10px);
		line-height: 1.4;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--color-content-tertiary, rgb(59 75 98));
	}
	.rmd-s--hero-06 .rmd-s-channels-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-sm, 8px);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s--hero-06 .rmd-s-channel {
		display: grid;
		justify-items: center;
		align-content: start;
		gap: var(--space-sm, 8px);
		min-width: 0;
		padding: var(--space-md, 12px) var(--space-sm, 8px);
		background: var(--color-surface-region, rgb(252 252 253));
		border: 1px solid var(--color-border-soft, rgb(244 247 250));
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--hero-06 .rmd-s-channel-mark svg { display: block; width: 24px; height: 24px; fill: currentColor; color: var(--color-content-primary, rgb(15 23 43)); }
	.rmd-s--hero-06 .rmd-s-channel-name {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-xl, 14px);
		line-height: 1.2;
		color: var(--color-content-primary, rgb(15 23 43));
	}
	.rmd-s--hero-06 .rmd-s-channel-ok {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		padding: var(--space-3xs, 2px) var(--space-sm, 8px);
		border-radius: var(--radius-full, 9999px);
		background: var(--color-teal-50, rgb(240 253 250));
		color: var(--color-teal-600, rgb(0 150 137));
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-md, 12px);
		line-height: 1.4;
		white-space: nowrap;
	}
	.rmd-s--hero-06 .rmd-s-channel-ok svg { width: 14px; height: 14px; }
	@media (min-width: 1249px) {
		.rmd-s--hero-06 { padding-block: var(--spacing-80, 80px) var(--space-100, 100px); }
	}
	@media (max-width: 1023px) {
		.rmd-s--hero-06 .rmd-s-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5xl, 48px); }
	}
	@media (max-width: 760px) {
		.rmd-s--hero-06 .rmd-s-title { letter-spacing: var(--font-letter-spacing-negative-1, -1px); }
		.rmd-s--hero-06 .rmd-s-split > .rmd-s-col:last-child { padding: 0; }
		.rmd-s--hero-06 .rmd-s-dash-body { padding: var(--spacing-16, 16px); }
		.rmd-s--hero-06 .rmd-s-channels { position: static; width: auto; margin-top: var(--space-md, 12px); }
	}
	@media (max-width: 640px) {
		.rmd-s--hero-06 .rmd-s-actions .rmd-btn { width: 100%; justify-content: center; padding-inline: var(--space-md, 12px); text-align: center; }
	}

	/* ── Stats 03 — 46933:8322, read 21/10 ──────────────────────────────────
	   What the whole family shares, read here and confirmed on 04: the band is
	   ruled above and below by a 1px line, opens 100/0, and sets its figures on
	   a surface/region plate at radius 8. */
	.rmd-s--stats {
		border-block: 1px solid var(--color-border-surface-region, #f6f9fb);
	}
	.rmd-s--stats .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--stats .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--stats .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	/* The figure is a HEADLINE, not a large label: h1 Regular at -2. */
	.rmd-s--stats .rmd-s-stat-value {
		font-size: var(--font-size-h1, 56px);
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-2, -2px);
	}
	/* The plate under the figures is 03 and 04's, not the family's — six of
	   the ten nodes have none. */
	.rmd-s--stats-03 .rmd-s-stats,
	.rmd-s--stats-04 .rmd-s-stats {
		background: var(--color-surface-region, #fcfcfd);
		border-radius: var(--radius-8, 8px);
	}

	/* The centred heading group, measured identically on Hero 01, CTA 01,
	   Stats 03 and Stats 04 (47410:22642 → 21609): 32 from the words to the
	   buttons, 24 from the title to the lead, 16 inside the title block. Four
	   nodes agreeing is the component, not a coincidence — so it lives here
	   once. CTA 03 opens its own to 48 and still wins, being more specific. */
	.rmd-s-head--centered { gap: var(--spacing-24, 24px); }
	.rmd-s-head--centered .rmd-s-head-main {
		display: grid;
		gap: var(--spacing-16, 16px);
		justify-items: center;
	}
	.rmd-s-head--centered .rmd-s-head-aside { gap: var(--spacing-32, 32px); }
	/* The base pill is justify-self:start, which beats the grid's justify-items; a centred heading centres its pill too (Content 08). */
	.rmd-s-head--centered .rmd-s-overline { justify-self: center; }
	/* The centred heading component draws its lead at x=300, 600 wide — so it
	   is capped, not full-width. A variant that measures its own must say so
	   at more than 0,2,0: these rules come LATER than most variant blocks, so
	   a tie goes to them (CTA 01's 481 rendered 600 until 23/10). */
	.rmd-s-head--centered .rmd-s-lead { width: min(100%, 600px); }

	/* 03 itself: a bordered plate of 32, each figure in its own 16/32 cell. */
	.rmd-s--stats-03 .rmd-s-stats {
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		padding: var(--space-3xl, 32px);
		--rmd-gap: var(--spacing-24, 24px);
		align-items: stretch;
	}
	.rmd-s--stats-03 .rmd-s-stat {
		align-items: center;
		text-align: center;
		gap: var(--spacing-16, 16px);
		padding: var(--spacing-32, 32px) var(--spacing-16, 16px);
		border-radius: var(--radius-16, 16px);
	}
	.rmd-s--stats-03 .rmd-s-stat-label {
		font-size: var(--font-size-h6, 20px);
		font-weight: 500;
		line-height: 1.4;
		color: var(--color-content-secondary, #1d293d);
	}

	/* ── Stats 04 — 46933:8323, read 21/10 ──────────────────────────────────
	   The same band without the border, wider gutters, and a third line: the
	   label becomes h5 in content/primary with a body-md note under it. */
	.rmd-s--stats-04 .rmd-s-stats {
		padding: var(--space-4xl, 40px) var(--space-2xl, 24px);
		--rmd-gap: var(--spacing-48, 48px);
	}
	.rmd-s--stats-04 .rmd-s-stat {
		align-items: center;
		text-align: center;
		/* 0, because the two gaps DIFFER: 16 to the label, 8 to the note.
		   A gap reaches every child (the renderer emits the three spans
		   flat), so each number is stated where it belongs rather than
		   adding to one. */
		gap: 0;
	}
	.rmd-s--stats-04 .rmd-s-stat-label {
		margin-top: var(--spacing-16, 16px);
		font-size: var(--font-size-h5, 24px);
		font-weight: 500;
		line-height: 1.4;
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s--stats-04 .rmd-s-stat-sub {
		margin-top: var(--space-sm, 8px);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	@media (max-width: 900px) {
		.rmd-s--stats-03 .rmd-s-stats,
		.rmd-s--stats-04 .rmd-s-stats { --rmd-cols: 2; }
	}
	@media (max-width: 640px) {
		.rmd-s--stats-03 .rmd-s-stats,
		.rmd-s--stats-04 .rmd-s-stats { --rmd-cols: 1; }
		/* Three paddings deep (panel, plate, cell) left a 146px column, and
		   « +1 600 » broke after the +1 (23/10). */
		.rmd-s--stats-03 .rmd-s-stats { padding: var(--spacing-16, 16px); }
		.rmd-s--stats-03 .rmd-s-stat { padding: var(--spacing-24, 24px) var(--spacing-16, 16px); }
	}

	/* The DS's Gradient/Border/Dawn, as a 2px rule down the left of a figure.
	   tokens.css records the token itself as NOT CAPTURED and Figma's codegen
	   flattens it to a single colour, so these stops are sampled from the
	   rendered rule — on 46902:3109 (Stats 02), :3198 (06) and :3263 (09).
	   That sampling is also what showed 09 runs the ramp the other way; at
	   thumbnail size the three lines look identical.
	   The 2px is written out: the DS exposes --border-width-2xl as 1.5px in one
	   collection and 2px in the one these nodes read (tokens.css §border). */
	.rmd-s--stats-02 .rmd-s-stat,
	.rmd-s--stats-06 .rmd-s-stat {
		border-left: 2px solid transparent;
		border-image: linear-gradient(to bottom,
			#3842fe 0%, #9121a3 25%, #ec3a3e 50%, #f9842e 75%, #fa9329 100%) 1;
	}
	/* 09's ramp is NOT 02/06's mirrored, which is how it was written. Sampled
	   down its own 2px rule: orange held for the first eighth, through red,
	   magenta and purple, reaching indigo by about 62% — and indigo holds from
	   there to the foot. Mirroring 02/06 put orange where the node is already
	   red and purple where it is fully indigo. */
	.rmd-s--stats-09 .rmd-s-stat {
		border-left: 2px solid transparent;
		border-image: linear-gradient(to bottom,
			#fa9329 0%, #fa9329 12%, #f35e36 20%, #e92444 30%, #cb0a67 40%,
			#8824ae 50%, #433ef4 60%, #3943ff 65%, #3943ff 100%) 1;
	}

	/* ── Stats 09 — 46933:8325, read 21/10 ──────────────────────────────────
	   Four figures spread across the band, each hung off a 2px rule, under the
	   two-column heading. No plate, no border around the group. */
	.rmd-s--stats-09 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: normal;
	}
	/* The lead reads right, against the title — as on Hero 05, which states
	   its own: listed here too, this LATER rule beat Hero 05's phone rule and
	   kept its lead right-aligned on a phone (23/10). */
	.rmd-s--stats-09 .rmd-s-head-aside {
		gap: var(--space-2xl, 24px);
		justify-items: end;
		align-content: end;
		text-align: right;
	}
	.rmd-s--stats-09 .rmd-s-lead { width: min(100%, 429px); }

	.rmd-s--stats-09 .rmd-s-stats {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: var(--spacing-32, 32px);
	}
	.rmd-s--stats-09 .rmd-s-stat {
		width: 264px;
		gap: var(--spacing-16, 16px);
		padding: var(--spacing-16, 16px) 0 var(--spacing-16, 16px) var(--spacing-32, 32px);
	}
	.rmd-s--stats-09 .rmd-s-stat-label {
		font-size: var(--font-size-h6, 20px);
		font-weight: 500;
		line-height: 1.4;
		color: var(--color-content-primary, #0f172b);
	}

	@media (max-width: 900px) {
		.rmd-s--stats-09 .rmd-s-head-aside { justify-items: start; text-align: left; }
		.rmd-s--stats-09 .rmd-s-lead { width: auto; }
		.rmd-s--stats-09 .rmd-s-stat { width: calc(50% - var(--spacing-16, 16px)); }
	}
	@media (max-width: 640px) {
		.rmd-s--stats-09 .rmd-s-stat { width: 100%; }
	}

	/* ── Stats 02 — 46933:8319, read 21/10 ──────────────────────────────────
	   The heading on the left, a 528 column of figures on the right, 48 apart
	   and 48 between the figures. Each hangs off the Dawn rule, with no top or
	   bottom padding — the rule is exactly as tall as the figure. */
	/* 624 of heading, 48, then 528 of figures — not the generic 0.4fr/1fr,
	   which gave the heading about half its width and the figures 300 too
	   much. (`flex: none` was inert here: the aside is a grid.) */
	.rmd-s--stats-02 .rmd-s-aside {
		align-items: start;
		grid-template-columns: minmax(0, 624fr) minmax(0, 528fr);
	}
	.rmd-s--stats-02 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--stats-02 .rmd-s-lead { width: min(100%, 489px); max-width: 100%; }
	.rmd-s--stats-02 .rmd-s-stats {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-48, 48px);
	}
	.rmd-s--stats-02 .rmd-s-stat {
		/* 0, because the two gaps DIFFER: 16 to the label, 8 to the note.
		   A gap reaches every child (the renderer emits the three spans
		   flat), so each number is stated where it belongs rather than
		   adding to one. */
		gap: 0;
		padding: 0 0 0 var(--spacing-32, 32px);
	}
	.rmd-s--stats-02 .rmd-s-stat-label {
		margin-top: var(--spacing-16, 16px);
		font-size: var(--font-size-h5, 24px);
		font-weight: 500;
		line-height: 1.4;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--stats-02 .rmd-s-stat-sub {
		margin-top: var(--space-sm, 8px);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	/* ── Stats 06 — 46933:8324, read 21/10 ──────────────────────────────────
	   The same pairing, but the figures are a 576 block of two by two — 64
	   between the rows, 48 between the columns — and the two sides are centred
	   against each other rather than hung from the top. No third line here. */
	/* 576 and 576 with the 48 between — an even split, not 0.4fr/1fr. */
	.rmd-s--stats-06 .rmd-s-aside {
		align-items: center;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.rmd-s--stats-06 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	/* Its lead and buttons share a row and wrap — at 32, not the 416 the hero
	   group uses to drop them to the foot of a tall column. */
	.rmd-s--stats-06 .rmd-s-head-aside {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		column-gap: var(--spacing-16, 16px);
		row-gap: var(--spacing-32, 32px);
	}
	.rmd-s--stats-06 .rmd-s-lead { width: min(100%, 489px); max-width: 100%; }
	.rmd-s--stats-06 .rmd-s-stats {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		column-gap: var(--spacing-48, 48px);
		row-gap: var(--spacing-64, 64px);
	}
	.rmd-s--stats-06 .rmd-s-stat {
		width: 264px;
		gap: var(--spacing-16, 16px);
		padding: var(--spacing-16, 16px) 0 var(--spacing-16, 16px) var(--spacing-32, 32px);
	}
	.rmd-s--stats-06 .rmd-s-stat-label {
		font-size: var(--font-size-h6, 20px);
		font-weight: 500;
		line-height: 1.4;
		color: var(--color-content-primary, #0f172b);
	}

	@media (max-width: 900px) {
		.rmd-s--stats-02 .rmd-s-aside,
		.rmd-s--stats-06 .rmd-s-aside { grid-template-columns: 1fr; }
		.rmd-s--stats-06 .rmd-s-stat { width: calc(50% - var(--spacing-24, 24px)); }
	}
	@media (max-width: 640px) {
		.rmd-s--stats-06 .rmd-s-stat { width: 100%; }
	}

	/* ── Stats 07 — 46933:8326, read 21/10 ──────────────────────────────────
	   No plate: four cards of their own, 16 apart, each as tall as the row.
	   This card is shared with 08 and 10; only the padding and the shadow
	   differ between them. */
	.rmd-s--stats-07 .rmd-s-stats,
	.rmd-s--stats-08 .rmd-s-stats,
	.rmd-s--stats-10 .rmd-s-stats { --rmd-gap: var(--spacing-16, 16px); }
	.rmd-s--stats-07 .rmd-s-stat,
	.rmd-s--stats-08 .rmd-s-stat,
	.rmd-s--stats-10 .rmd-s-stat {
		align-items: center;
		text-align: center;
		gap: var(--spacing-16, 16px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--stats-07 .rmd-s-stat-label,
	.rmd-s--stats-08 .rmd-s-stat-label {
		font-size: var(--font-size-h6, 20px);
		font-weight: 500;
		line-height: 1.4;
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s--stats-07 .rmd-s-stat-sub,
	.rmd-s--stats-08 .rmd-s-stat-sub,
	.rmd-s--stats-10 .rmd-s-stat-sub {
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	/* The 16 to the note is the card's own gap; stating it again here
	   doubled it to 32. */
	.rmd-s--stats-07 .rmd-s-stat { padding: var(--spacing-24, 24px); }

	/* ── Stats 08 — 46933:8327, read 21/10 ──────────────────────────────────
	   Three of the same card, roomier, and the only figures in the family
	   that are lifted off the page. */
	.rmd-s--stats-08 .rmd-s-stat {
		padding: var(--spacing-32, 32px);
		box-shadow: 0 2px 3px rgba(0, 0, 0, .03); /* Elevation/SM */
	}

	/* ── Stats 10 — 46933:8328, read 21/10 ──────────────────────────────────
	   Four cards like 07's but roomier, and the figure stands alone above its
	   note — this is the layout with no label line. */
	.rmd-s--stats-10 .rmd-s-stat { padding: var(--spacing-32, 32px); }

	@media (max-width: 900px) {
		.rmd-s--stats-07 .rmd-s-stats,
		.rmd-s--stats-08 .rmd-s-stats,
		.rmd-s--stats-10 .rmd-s-stats { --rmd-cols: 2; }
	}
	@media (max-width: 640px) {
		.rmd-s--stats-07 .rmd-s-stats,
		.rmd-s--stats-08 .rmd-s-stats,
		.rmd-s--stats-10 .rmd-s-stats { --rmd-cols: 1; }
	}

	/* ── Stats 01 — 46933:8318, read 21/10 ──────────────────────────────────
	   Five OVERLAY tiles of 500: a photograph fills each one and the figure is
	   set over it in white at the foot. Two across, then three. */
	.rmd-s--stats-01 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: normal;
	}
	.rmd-s--stats-01 .rmd-s-head-aside {
		gap: var(--space-2xl, 24px);
		justify-items: end;
		align-content: end;
		text-align: right;
	}
	.rmd-s--stats-01 .rmd-s-lead { width: min(100%, 429px); }
	/* Six columns so the first row can take three each and the second two. */
	.rmd-s--stats-01 .rmd-s-stats {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		--rmd-gap: var(--spacing-16, 16px);
	}
	.rmd-s--stats-01 .rmd-s-stat:nth-child(-n+2) { grid-column: span 3; }
	.rmd-s--stats-01 .rmd-s-stat:nth-child(n+3)  { grid-column: span 2; }
	.rmd-s--stats-01 .rmd-s-stat {
		/* Its own stacking context: the wash (::before) must paint OVER the
		   picture, which is absolutely positioned and comes later in the tree,
		   so without this it covered the wash and white text sat on the bare
		   image (1.1:1 over the placeholder). The picture goes to the bottom
		   of this context with z-index: -1; see tests/audit.py. */
		isolation: isolate;
		position: relative;
		height: 500px;
		justify-content: flex-end;
		gap: 0;
		padding: var(--spacing-24, 24px) var(--spacing-32, 32px);
		overflow: hidden;
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-region, #f6f9fb);
		border-radius: var(--radius-8, 8px);
		color: var(--color-content-static-white, #fff);
	}
	.rmd-s--stats-01 .rmd-s-stat-img {
		z-index: -1;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
	}
	/* The DS's wash for white text over a photograph, declared on Hero 01's
	   card (47287:31198) and on Bento 02's (46904:9180) with the same values.
	   This node's own content frame declares none, but its render darkens the
	   foot of every photograph, and white text over an editor's own photo
	   needs it to stay readable. */
	.rmd-s--stats-01 .rmd-s-stat::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(4, 17, 53, 0) 0%, rgba(4, 17, 53, .35) 30%, rgba(4, 17, 53, .88) 100%);
		pointer-events: none;
	}
	.rmd-s--stats-01 .rmd-s-stat-value,
	.rmd-s--stats-01 .rmd-s-stat-label,
	.rmd-s--stats-01 .rmd-s-stat-sub { position: relative; color: inherit; }
	/* 20 from the number to the label, 8 from the label to its note. */
	.rmd-s--stats-01 .rmd-s-stat-label {
		margin-top: var(--space-xl, 20px);
		font-size: var(--font-size-h6, 20px);
		font-weight: 400;
		line-height: 1.4;
	}
	.rmd-s--stats-01 .rmd-s-stat-sub {
		margin-top: var(--space-sm, 8px);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
	}

	/* ── Stats 05 — 46933:8321, read 21/10 ──────────────────────────────────
	   Four figures and four photographs alternating across two rows of four,
	   16 apart. The second row leads with a photograph, so the two rows never
	   line up — that is the `order` swap below, and it resets to document order
	   once the grid is a single column. */
	.rmd-s--stats-05 .rmd-s-stats {
		--rmd-cols: var(--rmd-cols-spec, 4);
		--rmd-gap: var(--spacing-16, 16px);
		align-items: stretch;
	}
	.rmd-s--stats-05 .rmd-s-stats > :nth-child(5) { order: 6; }
	.rmd-s--stats-05 .rmd-s-stats > :nth-child(6) { order: 5; }
	.rmd-s--stats-05 .rmd-s-stats > :nth-child(7) { order: 8; }
	.rmd-s--stats-05 .rmd-s-stats > :nth-child(8) { order: 7; }
	.rmd-s--stats-05 .rmd-s-stat {
		justify-content: flex-end;
		gap: var(--spacing-16, 16px);
		padding: var(--spacing-32, 32px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--stats-05 .rmd-s-stat-label {
		font-size: var(--font-size-title-md, 18px);
		font-weight: 500;
		line-height: 1.5;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--stats-05 .rmd-s-stat-sub {
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}

	/* A photograph standing as a cell of the grid (Stats 05). */
	.rmd-s-shot {
		min-width: 0;
		overflow: hidden;
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s-shot-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (max-width: 1023px) {
		.rmd-s--stats-01 .rmd-s-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.rmd-s--stats-01 .rmd-s-stat:nth-child(-n+2),
		.rmd-s--stats-01 .rmd-s-stat:nth-child(n+3) { grid-column: auto; }
		.rmd-s--stats-01 .rmd-s-stat { height: 380px; }
		.rmd-s--stats-05 .rmd-s-stats { --rmd-cols: 2; }
		.rmd-s--stats-01 .rmd-s-head-aside { justify-items: start; text-align: left; }
		.rmd-s--stats-01 .rmd-s-lead { width: auto; }
	}
	@media (max-width: 640px) {
		.rmd-s--stats-01 .rmd-s-stats { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--stats-05 .rmd-s-stats { --rmd-cols: 1; }
		/* One column: the swap would separate a figure from its photograph. */
		.rmd-s--stats-05 .rmd-s-stats > :nth-child(n) { order: 0; } /* as heavy as the swap above */
		.rmd-s--stats-05 .rmd-s-shot { height: 220px; }
	}

	/* ── Bento 04 — 46968:16132, read 21/10 ─────────────────────────────────
	   A four-column grid 646 tall: the lead card takes two columns and both
	   rows, the other four take one cell each. 16 throughout. */
	.rmd-s--bento-04 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--bento-04 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--bento-04 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--bento-04 .rmd-s-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(0, 1fr);
		min-height: 646px;
		--rmd-gap: var(--spacing-16, 16px);
	}
	.rmd-s--bento-04 .rmd-s-card:first-child { grid-column: span 2; grid-row: span 2; }
	.rmd-s--bento-04 .rmd-s-card {
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
		overflow: hidden;
	}

	/* The lead card: photograph over words, the words pushed to the foot. */
	.rmd-s--bento-04 .rmd-s-card:first-child {
		padding: 0;
		gap: 0;
		justify-content: flex-start;
	}
	.rmd-s--bento-04 .rmd-s-card:first-child .rmd-s-card-media {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		margin: 0;
	}
	.rmd-s--bento-04 .rmd-s-card:first-child .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	/* The words take the lower half and sit at its foot. There is no wrapper
	   around them, so the card becomes the grid and they share a row. */
	.rmd-s--bento-04 .rmd-s-card:first-child .rmd-s-card-title {
		margin-top: auto;
		padding: var(--spacing-24, 24px) var(--spacing-24, 24px) 0;
		font-size: var(--font-size-h4, 32px);
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: normal;
	}
	@media (max-width: 760px) {
		.rmd-s--bento-04 .rmd-s-card:first-child .rmd-s-card-title { font-size: var(--font-size-h5, 24px); }
	}
	.rmd-s--bento-04 .rmd-s-card:first-child .rmd-s-card-text {
		padding: var(--space-xl, 20px) var(--spacing-24, 24px) 0;
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	/* A text link, not a filled button: 13px indigo with a 20 arrow. */
	.rmd-s--bento-04 .rmd-s-card:first-child .rmd-s-card-link {
		margin: var(--spacing-32, 32px) var(--spacing-24, 24px) var(--spacing-24, 24px);
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 36px;
		border-radius: var(--radius-8, 8px);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 13px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--bento-04 .rmd-s-card:first-child .rmd-s-card-link::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	/* The four neighbours: an icon tile above words held at the foot. */
	.rmd-s--bento-04 .rmd-s-card:not(:first-child) {
		justify-content: flex-end;
		gap: var(--spacing-32, 32px);
		padding: var(--spacing-24, 24px);
	}
	/* The WORDS in a box of their own. The 32 above is the gap between the icon
	   tile and the words; with .rmd-s-card-body at its default display:contents
	   it reached the title and the text as well, and on top of the text's own 8
	   that drew 40 between title and text. Boxed, the card's gap stops at the
	   box and the 8 is the only space inside it. */
	.rmd-s--bento-04 .rmd-s-card:not(:first-child) .rmd-s-card-body {
		display: flex;
		flex-direction: column;
	}
	.rmd-s--bento-04 .rmd-s-card-ico {
		display: grid;
		place-items: center;
		width: 60px;
		height: 60px;
		padding: 12px;
		border-radius: 7.2px;
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}
	.rmd-s--bento-04 .rmd-s-card-ico svg { width: 32px; height: 32px; }
	.rmd-s--bento-04 .rmd-s-card:not(:first-child) .rmd-s-card-title {
		font-weight: 500;
	}
	/* 8 under the title, and the body is the smallest text in the catalog. */
	.rmd-s--bento-04 .rmd-s-card:not(:first-child) .rmd-s-card-text {
		margin-top: var(--spacing-8, 8px);
		font-size: var(--font-size-body-xs, 12px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}

	@media (max-width: 900px) {
		.rmd-s--bento-04 .rmd-s-cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-auto-rows: auto;
			min-height: 0;
		}
		.rmd-s--bento-04 .rmd-s-card:first-child { grid-column: span 2; grid-row: auto; }
		.rmd-s--bento-04 .rmd-s-card:first-child .rmd-s-card-media { height: 260px; flex: none; }
	}
	@media (max-width: 640px) {
		.rmd-s--bento-04 .rmd-s-cards { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--bento-04 .rmd-s-card:first-child { grid-column: auto; }
	}

	/* ── Bento 05 — 46968:16131, read 21/10 ─────────────────────────────────
	   Bento 04 turned around: the four icon cards on the left, the lead card
	   on the right — and inside it the words come FIRST, the photograph under
	   them. Its icon tile is smaller too, and its heading carries the pill. */
	.rmd-s--bento-05 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--bento-05 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--bento-05 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--bento-05 .rmd-s-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(0, 1fr);
		min-height: 646px;
		--rmd-gap: var(--spacing-16, 16px);
	}
	/* Placed rather than ordered: the lead card holds the right half and the
	   four others flow into the two columns it leaves. */
	.rmd-s--bento-05 .rmd-s-card:first-child { grid-column: 3 / span 2; grid-row: 1 / span 2; }
	.rmd-s--bento-05 .rmd-s-card {
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
		overflow: hidden;
	}

	.rmd-s--bento-05 .rmd-s-card:first-child {
		padding: 0;
		gap: 0;
		justify-content: flex-start;
	}
	/* The words lead; the photograph follows. */
	.rmd-s--bento-05 .rmd-s-card:first-child .rmd-s-card-media {
		order: 2;
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		margin: 0;
	}
	.rmd-s--bento-05 .rmd-s-card:first-child .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	.rmd-s--bento-05 .rmd-s-card:first-child .rmd-s-card-title {
		margin-top: auto;
		padding: var(--spacing-24, 24px) var(--spacing-24, 24px) 0;
		font-size: var(--font-size-h4, 32px);
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: normal;
	}
	@media (max-width: 760px) {
		.rmd-s--bento-05 .rmd-s-card:first-child .rmd-s-card-title { font-size: var(--font-size-h5, 24px); }
	}
	.rmd-s--bento-05 .rmd-s-card:first-child .rmd-s-card-text {
		padding: var(--space-xl, 20px) var(--spacing-24, 24px) 0;
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--bento-05 .rmd-s-card:first-child .rmd-s-card-link {
		margin: var(--spacing-32, 32px) var(--spacing-24, 24px) auto;
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 36px;
		border-radius: var(--radius-8, 8px);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 13px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--bento-05 .rmd-s-card:first-child .rmd-s-card-link::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	.rmd-s--bento-05 .rmd-s-card:not(:first-child) {
		justify-content: flex-end;
		gap: var(--spacing-32, 32px);
		padding: var(--spacing-24, 24px);
	}
	/* The WORDS in a box of their own. The 32 above is the gap between the icon
	   tile and the words; with .rmd-s-card-body at its default display:contents
	   it reached the title and the text as well, and on top of the text's own 8
	   that drew 40 between title and text. Boxed, the card's gap stops at the
	   box and the 8 is the only space inside it. */
	.rmd-s--bento-05 .rmd-s-card:not(:first-child) .rmd-s-card-body {
		display: flex;
		flex-direction: column;
	}
	/* 50 at radius 6 around a 24 icon — 04's is 60 at 7.2 around a 32. */
	.rmd-s--bento-05 .rmd-s-card-ico {
		display: grid;
		place-items: center;
		width: 50px;
		height: 50px;
		padding: 10px;
		border-radius: var(--radius-6, 6px);
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}
	.rmd-s--bento-05 .rmd-s-card-ico svg { width: 24px; height: 24px; }
	.rmd-s--bento-05 .rmd-s-card:not(:first-child) .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--bento-05 .rmd-s-card:not(:first-child) .rmd-s-card-text {
		margin-top: var(--spacing-8, 8px);
		font-size: var(--font-size-body-xs, 12px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}

	@media (max-width: 900px) {
		.rmd-s--bento-05 .rmd-s-cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-auto-rows: auto;
			min-height: 0;
		}
		.rmd-s--bento-05 .rmd-s-card:first-child { grid-column: span 2; grid-row: auto; }
		.rmd-s--bento-05 .rmd-s-card:first-child .rmd-s-card-media { height: 260px; flex: none; }
	}
	@media (max-width: 640px) {
		.rmd-s--bento-05 .rmd-s-cards { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--bento-05 .rmd-s-card:first-child { grid-column: auto; }
	}

	/* ── Bento 03 — 46968:16133, read 21/10 ─────────────────────────────────
	   Four cells, 703 tall, on a four-column grid. Everything is PLACED here
	   rather than flowed, because the shot and the three cards each have their
	   own spot and the markup order is shot, big card, icon card, text card. */
	.rmd-s--bento-03 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--bento-03 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--bento-03 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--bento-03 .rmd-s-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		min-height: 703px;
		--rmd-gap: var(--spacing-16, 16px);
	}
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(1) { grid-area: 1 / 1 / 2 / 2; } /* shot */
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) { grid-area: 1 / 3 / 3 / 5; } /* big */
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(3) { grid-area: 1 / 2 / 2 / 3; } /* icon */
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(4) { grid-area: 2 / 1 / 3 / 3; } /* text */
	.rmd-s--bento-03 .rmd-s-card {
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
		overflow: hidden;
		justify-content: flex-end;
		gap: var(--spacing-32, 32px);
		padding: var(--spacing-24, 24px);
	}

	/* The card's gap is the MEDIA to the words; it must not reach inside
	   them, or every margin below lands on top of it. */
	.rmd-s--bento-03 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	/* The tall card: photograph over words, words at the foot, ending on the
	   text link. */
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) { padding: 0; gap: 0; justify-content: flex-start; }
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) .rmd-s-card-media {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		margin: 0;
	}
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) .rmd-s-card-title {
		margin-top: auto;
		padding: var(--spacing-24, 24px) var(--spacing-24, 24px) 0;
		font-size: var(--font-size-h4, 32px);
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: normal;
	}
	@media (max-width: 760px) {
		.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) .rmd-s-card-title { font-size: var(--font-size-h5, 24px); }
	}
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) .rmd-s-card-text {
		padding: var(--space-xl, 20px) var(--spacing-24, 24px) 0;
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) .rmd-s-card-link {
		margin: var(--spacing-32, 32px) var(--spacing-24, 24px) var(--spacing-24, 24px);
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 36px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 13px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) .rmd-s-card-link::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	/* The icon card, and the text-only one which has no media at all. */
	.rmd-s--bento-03 .rmd-s-card-ico {
		display: grid;
		place-items: center;
		width: 60px;
		height: 60px;
		padding: 12px;
		border-radius: 7.2px;
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}
	.rmd-s--bento-03 .rmd-s-card-ico svg { width: 32px; height: 32px; }
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(3) .rmd-s-card-title {
		font-weight: 500;
	}
	/* The text card opens 24 above its words where the icon card opens 8. */
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(4) .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(3) .rmd-s-card-text { margin-top: var(--spacing-8, 8px); }
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(4) .rmd-s-card-text { margin-top: var(--spacing-24, 24px); }
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(3) .rmd-s-card-text,
	.rmd-s--bento-03 .rmd-s-cards > :nth-child(4) .rmd-s-card-text {
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}

	@media (max-width: 900px) {
		.rmd-s--bento-03 .rmd-s-cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: none;
			grid-auto-rows: auto;
			min-height: 0;
		}
		.rmd-s--bento-03 .rmd-s-cards > :nth-child(1),
		.rmd-s--bento-03 .rmd-s-cards > :nth-child(3) { grid-area: auto; }
		.rmd-s--bento-03 .rmd-s-cards > :nth-child(2),
		.rmd-s--bento-03 .rmd-s-cards > :nth-child(4) { grid-area: auto; grid-column: span 2; }
		.rmd-s--bento-03 .rmd-s-shot { height: 240px; }
		.rmd-s--bento-03 .rmd-s-cards > :nth-child(2) .rmd-s-card-media { height: 260px; flex: none; }
	}
	@media (max-width: 640px) {
		.rmd-s--bento-03 .rmd-s-cards { grid-template-columns: minmax(0, 1fr); }
		/* :nth-child(n): the tablet rule above spans :nth-child(2) and (4) over
		   two columns at 0,3,0, and a reset at 0,2,0 never ran — the span made
		   an implicit column and the photograph's was 0px wide (23/10). */
		.rmd-s--bento-03 .rmd-s-cards > :nth-child(n) { grid-column: auto; }
	}

	/* ── Bento 02 — 46968:16136, read 21/10 ─────────────────────────────────
	   Three columns of 516: an overlay card, two icon cards stacked, and a
	   bare photograph. Placed, since the markup order is shot, overlay, icon,
	   icon. */
	.rmd-s--bento-02 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--bento-02 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--bento-02 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--bento-02 .rmd-s-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		min-height: 516px;
		--rmd-gap: var(--spacing-16, 16px);
	}
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(1) { grid-area: 1 / 3 / 3 / 4; } /* shot */
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(2) { grid-area: 1 / 1 / 3 / 2; } /* overlay */
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
	.rmd-s--bento-02 .rmd-s-card {
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-region, #f6f9fb);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}

	/* The overlay card: the photograph fills it, the words sit at its foot in
	   white over the DS's wash. */
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(2) {
		/* Its own stacking context: the wash (::before) must paint OVER the
		   picture, which is absolutely positioned and comes later in the tree,
		   so without this it covered the wash and white text sat on the bare
		   image (1.1:1 over the placeholder). The picture goes to the bottom
		   of this context with z-index: -1; see tests/audit.py. */
		isolation: isolate;
		position: relative;
		overflow: hidden;
		justify-content: flex-end;
		gap: var(--space-xl, 20px);
		padding: var(--spacing-24, 24px);
		color: var(--color-content-static-white, #fff);
	}
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(2) .rmd-s-card-media {
		z-index: -1;
		position: absolute;
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(2) .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(2)::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(4, 17, 53, 0) 0%, rgba(4, 17, 53, .35) 30%, rgba(4, 17, 53, .88) 100%);
		pointer-events: none;
	}
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(2) .rmd-s-card-title,
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(2) .rmd-s-card-text {
		position: relative;
		color: inherit;
	}

	/* The two icon cards: roomier than the bento's usual, and 24 under the
	   tile where 03 and 04 use 32. */
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(3),
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(4) {
		justify-content: flex-start;
		gap: var(--space-2xl, 24px);
		padding: var(--spacing-32, 32px);
	}
	.rmd-s--bento-02 .rmd-s-card-ico {
		display: grid;
		place-items: center;
		width: 60px;
		height: 60px;
		padding: 12px;
		border-radius: 7.2px;
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}
	.rmd-s--bento-02 .rmd-s-card-ico svg { width: 32px; height: 32px; }
	.rmd-s--bento-02 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--bento-02 .rmd-s-card-text {
		margin-top: var(--spacing-16, 16px);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--bento-02 .rmd-s-cards > :nth-child(2) .rmd-s-card-text { margin-top: 0; }

	@media (max-width: 900px) {
		.rmd-s--bento-02 .rmd-s-cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: none;
			grid-auto-rows: auto;
			min-height: 0;
		}
		/* :nth-child(n), not *: the placements above are :nth-child(k), and a
		   reset one class lighter never ran (23/10). */
		.rmd-s--bento-02 .rmd-s-cards > :nth-child(n) { grid-area: auto; }
		.rmd-s--bento-02 .rmd-s-cards > :nth-child(2) { min-height: 380px; }
		.rmd-s--bento-02 .rmd-s-shot { height: 380px; }
	}
	@media (max-width: 640px) {
		.rmd-s--bento-02 .rmd-s-cards { grid-template-columns: minmax(0, 1fr); }
	}

	/* ── Gallery 01 — 46968:16157, read 21/10 ───────────────────────────────
	   Three 336 x 386 photographs, 24 apart, with an arrow standing at each
	   end of the row — the room they need is the list's own padding, so the
	   pictures land on the same 336 the node gives them. */
	.rmd-s--gallery-01 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--gallery-01 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--gallery-01 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--gallery-01 .rmd-s-wrap { position: relative; }
	/* NOT justify-content: center. This list is built to OVERFLOW — that is
	   what makes sections.js draw its arrows — and a centred flex row that
	   overflows spills its leading items past the scroll origin, where no
	   amount of scrolling reaches them: the first images of the band could
	   simply never be seen. Auto margins on the ends centre the row when it
	   fits and collapse to zero when it does not. */
	.rmd-s--gallery-01 .rmd-s-gallery {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--spacing-24, 24px);
		/* 48 for the arrow and 24 beside it, at both ends — and the snap told
		   so, or it scrolled the 72 away on load (23/10). */
		padding-inline: 72px;
		scroll-padding-inline: 72px;
	}
	/* 336 FIXED, three of them filling the 1200 with their 24 gutters and
	   the 72 either side. Sharing the row instead (flex: 1 1 0) meant the
	   list never overflowed, so sections.js — which only enhances a list
	   that really scrolls — never drew the arrows this node has. */
	.rmd-s--gallery-01 .rmd-s-gallery > li:first-child { margin-inline-start: auto; }
	.rmd-s--gallery-01 .rmd-s-gallery > li:last-child  { margin-inline-end: auto; }
	.rmd-s--gallery-01 .rmd-s-gallery > li {
		flex: 0 0 336px;
		min-width: 0;
		height: 386px;
		scroll-snap-align: start;
	}
	.rmd-s--gallery-01 .rmd-s-gallery img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-6, 6px);
	}
	.rmd-s--gallery-01 .rmd-s-arrows {
		position: absolute;
		/* The wrapper's PADDING box reaches 24 past the content edge, and the
		   node has the arrow flush with the 1200 content (photographs start 72
		   in, which is this 48 plus 24). Inset by the gutter to get there. */
		inset-inline: var(--rmd-gutter, var(--space-2xl, 24px));
		/* The row, not the whole wrapper: the heading sits above it. */
		bottom: 0;
		height: 386px;
		margin: 0;
		align-items: center;
		justify-content: space-between;
		pointer-events: none;
	}
	.rmd-s--gallery-01 .rmd-s-arrow { pointer-events: auto; }
	.rmd-s--gallery-01 .rmd-s-pager { margin-top: var(--spacing-48, 48px); }
	/* `bottom: 0` is the wrapper's foot, and the pager is the last thing in it
	   — so with one rendered the arrows sat 50 below the row they flank. Ask
	   whether there IS a pager rather than assuming either way. */
	.rmd-s--gallery-01 .rmd-s-wrap:has(.rmd-s-pager) .rmd-s-arrows {
		bottom: calc(var(--spacing-48, 48px) + 2px);
	}

	@media (max-width: 900px) {
		.rmd-s--gallery-01 .rmd-s-gallery { padding-inline: 0; scroll-padding-inline: 0; }
		.rmd-s--gallery-01 .rmd-s-gallery > li { height: 260px; }
		/* No room to flank at this width: the arrows come back under the row. */
		.rmd-s--gallery-01 .rmd-s-arrows {
			position: static;
			height: auto;
			justify-content: center;
			margin-top: var(--spacing-24, 24px);
			pointer-events: auto;
		}
	}

	/* ── Gallery 03 — 46968:16158, read 21/10 ───────────────────────────────
	   A square photograph spanning two of four columns and both rows, four
	   more beside it, 16 throughout — which makes a column 288 and a row 288,
	   and 4 x 288 plus three gaps the 1200 frame exactly. The buttons sit
	   under the band, 48 below it. */
	.rmd-s--gallery-03 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--gallery-03 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--gallery-03 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--gallery-03 .rmd-s-gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(0, 1fr);
		--rmd-gap: var(--spacing-16, 16px);
	}
	/* The square is what sets every other measurement here. */
	.rmd-s--gallery-03 .rmd-s-gallery > li:first-child {
		grid-column: span 2;
		grid-row: span 2;
		aspect-ratio: 1;
	}
	.rmd-s--gallery-03 .rmd-s-gallery > li { min-width: 0; }
	.rmd-s--gallery-03 .rmd-s-gallery img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--gallery-03 .rmd-s-actions--after { margin-top: var(--spacing-48, 48px); }

	/* Buttons set after a list rather than in the heading. */
	.rmd-s-actions--after { display: flex; justify-content: center; gap: var(--spacing-16, 16px); }

	@media (max-width: 900px) {
		.rmd-s--gallery-03 .rmd-s-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.rmd-s--gallery-03 .rmd-s-gallery > li:first-child { grid-column: span 2; grid-row: auto; }
		/* Rows as tall as what is in them: the desktop's equal rows took the
		   big square's 342 for every row, 180 of air under each pair. */
		.rmd-s--gallery-03 .rmd-s-gallery { grid-auto-rows: auto; }
		.rmd-s--gallery-03 .rmd-s-gallery > li:not(:first-child) { aspect-ratio: 1; }
	}

	/* ── Gallery 02 — 46968:16161, read 21/10 ───────────────────────────────
	   Fixed 248 x 304 photographs, 16 apart, flush with the heading above and
	   running off the right of the screen. */
	.rmd-s--gallery-02 .rmd-s-headrow { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--gallery-02 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	/* 20 under the title, like the other carousels that share this heading
	   component — the node puts the Body frame at y=124 under a 104 title. */
	.rmd-s--gallery-02 .rmd-s-head { gap: var(--space-xl, 20px); }
	.rmd-s--gallery-02 .rmd-s-lead {
		width: min(100%, 489px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--gallery-02 .rmd-s-gallery {
		display: flex;
		align-items: center;
		gap: var(--spacing-16, 16px);
		grid-template-columns: none;
		/* Right edge only, as Testimonials 06. */
		margin-inline: 0 calc(50% - 50vw);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.rmd-s--gallery-02 .rmd-s-gallery::-webkit-scrollbar { display: none; }
	.rmd-s--gallery-02 .rmd-s-gallery > li {
		flex: none;
		width: 248px;
		height: 304px;
		scroll-snap-align: start;
	}
	.rmd-s--gallery-02 .rmd-s-gallery img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-6, 6px);
	}

	@media (max-width: 760px) {
		.rmd-s--gallery-02 .rmd-s-headrow { flex-direction: column; align-items: stretch; }
		.rmd-s--gallery-02 .rmd-s-gallery > li { width: 200px; height: 248px; }
	}

	/* ── Gallery 04 — 46968:16159, read 21/10 ───────────────────────────────
	   Two rows of 304 x 280, 12 apart, edge to edge, under a two-column
	   heading whose lead reads right. */
	.rmd-s--gallery-04 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--gallery-04 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: normal;
	}
	.rmd-s--gallery-04 .rmd-s-head-aside {
		gap: var(--space-2xl, 24px);
		justify-items: end;
		align-content: end;
		text-align: right;
	}
	/* 32 between the two heading columns: the title column is 584 at x=0
	   and the lead column starts at 616. */
	.rmd-s--gallery-04 .rmd-s-head { gap: var(--space-3xl, 32px); }
	.rmd-s--gallery-04 .rmd-s-lead {
		width: min(100%, 429px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--gallery-04 .rmd-s-marquee-row > li { width: 304px; height: 280px; }
	.rmd-s--gallery-04 .rmd-s-marquee-img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		border-radius: var(--radius-8, 8px);
	}

	/* ── Gallery 05 — 47287:30555, read 21/10 ───────────────────────────────
	   Hero 01's band at a wider gutter and a softer radius, with NO heading
	   at all — the one section in the file that is only pictures. The second
	   row starts 608 further left, as there. */
	/* 48 BETWEEN THE ROWS — row 1 is 280 tall at y=0 and row 2 starts at
	   328. The 16 below is the horizontal gutter, which is right. */
	.rmd-s--gallery-05 .rmd-s-marquee { gap: var(--spacing-48, 48px); margin-top: 0; }
	.rmd-s--gallery-05 .rmd-s-marquee-row { gap: var(--spacing-16, 16px); }
	.rmd-s--gallery-05 .rmd-s-marquee-row > li {
		position: relative;
		width: 424px;
		height: 280px;
		overflow: hidden;
		background: var(--color-surface-region, #fcfcfd);
		/* 8.94 and the 2% shadow are the node's own, a scaled-down Elevation/MD. */
		border-radius: 8.94px;
		box-shadow: 0 2.554px 6.386px rgba(0, 0, 0, .02),
			2.554px 0 6.386px rgba(0, 0, 0, .02),
			-2.554px 0 6.386px rgba(0, 0, 0, .02);
	}
	.rmd-s--gallery-05 .rmd-s-marquee-row > li::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 8.94px;
		background: linear-gradient(to bottom, rgba(4, 17, 53, 0) 0%, rgba(4, 17, 53, .35) 30%, rgba(4, 17, 53, .88) 100%);
		pointer-events: none;
	}
	.rmd-s--gallery-05 .rmd-s-marquee-img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		border-radius: 8.94px;
	}
	.rmd-s--gallery-05 .rmd-s-marquee-row--rtl { margin-left: -608px; }

	@media (max-width: 900px) {
		.rmd-s--gallery-04 .rmd-s-head { flex-direction: column; }
		.rmd-s--gallery-04 .rmd-s-head-aside { justify-items: start; text-align: left; }
		.rmd-s--gallery-04 .rmd-s-lead { width: auto; }
		.rmd-s--gallery-04 .rmd-s-marquee-row > li { width: 220px; height: 200px; }
		.rmd-s--gallery-05 .rmd-s-marquee-row > li { width: 280px; height: 185px; }
		.rmd-s--gallery-05 .rmd-s-marquee-row--rtl { margin-left: -180px; }
	}

	/* ── Cards 02 — 46957:11876, read 21/10 ─────────────────────────────────
	   The family's plain card: 450 tall, the photograph taking the top half
	   and the words the bottom. Both halves are flex:1, so a taller card grows
	   its picture along with its words. */
	.rmd-s--cards-02 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--cards-02 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--cards-02 .rmd-s-cards {
		--rmd-gap: var(--spacing-16, 16px);
		align-items: stretch;
	}
	.rmd-s--cards-02 .rmd-s-card {
		min-height: 450px;
		padding: 0;
		gap: 0;
		overflow: hidden;
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	.rmd-s--cards-02 .rmd-s-card-media {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		margin: 0;
	}
	.rmd-s--cards-02 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	.rmd-s--cards-02 .rmd-s-card-title {
		padding: var(--spacing-24, 24px) var(--spacing-24, 24px) 0;
		font-weight: 500;
	}
	.rmd-s--cards-02 .rmd-s-card-text {
		padding: var(--spacing-16, 16px) var(--spacing-24, 24px) var(--spacing-24, 24px);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	@media (max-width: 900px) {
		.rmd-s--cards-02 .rmd-s-cards { --rmd-cols: 2; }
	}
	@media (max-width: 640px) {
		.rmd-s--cards-02 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--cards-02 .rmd-s-card { min-height: 380px; }
	}

	/* ── Cards 07 — 46957:11873, read 21/10 ─────────────────────────────────
	   Two rows of two, each card a 136 square beside its words. The only card
	   in the family ruled with border/surface/modals rather than
	   border/surface/container. */
	.rmd-s--cards-07 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--cards-07 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--cards-07 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--cards-07 .rmd-s-cards { --rmd-gap: var(--spacing-16, 16px); }
	.rmd-s--cards-07 .rmd-s-card {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-24, 24px);
		padding: var(--spacing-16, 16px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-modals, #e2e8f0);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	.rmd-s--cards-07 .rmd-s-card > .rmd-s-card-media {
		flex: none;
		width: 136px;
		height: 136px;
		margin: 0;
	}
	.rmd-s--cards-07 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-6, 6px);
	}
	/* 8 between the title and its text, 16 before the link — the column's own
	   8 plus 8 here. */
	.rmd-s--cards-07 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-width: 0;
		gap: 0;
	}
	.rmd-s--cards-07 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--cards-07 .rmd-s-card-text {
		margin-top: var(--spacing-8, 8px);
		font-size: var(--font-size-body-xs, 12px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--cards-07 .rmd-s-card-link {
		margin-top: var(--spacing-16, 16px);
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 40px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-xl, 14px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--cards-07 .rmd-s-card-link::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	@media (max-width: 760px) {
		.rmd-s--cards-07 .rmd-s-cards { --rmd-cols: 1; }
	}
	@media (max-width: 640px) {
		.rmd-s--cards-07 .rmd-s-card { flex-direction: column; align-items: stretch; }
		.rmd-s--cards-07 .rmd-s-card > .rmd-s-card-media { width: 100%; height: 180px; }
	}

	/* ── Cards 05 — 46957:11877, read 21/10 ─────────────────────────────────
	   Four frameless cards, 16 apart: a 272 photograph, then words inset 12
	   at the sides and nothing else — no plate, no rule, no padding. */
	.rmd-s--cards-05 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--cards-05 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--cards-05 .rmd-s-cards { --rmd-gap: var(--spacing-16, 16px); align-items: start; }
	.rmd-s--cards-05 .rmd-s-card {
		gap: var(--spacing-16, 16px);
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.rmd-s--cards-05 .rmd-s-card-media { height: 272px; width: 100%; margin: 0; }
	.rmd-s--cards-05 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-6, 6px);
	}
	.rmd-s--cards-05 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding-inline: var(--space-md, 12px);
	}
	/* title-md on a 'normal' line-height, not a headline ramp — which is why
	   it sets tighter than the rest of the family. */
	.rmd-s--cards-05 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--cards-05 .rmd-s-card-text {
		margin-top: var(--spacing-8, 8px);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--cards-05 .rmd-s-card-link {
		margin-top: var(--spacing-16, 16px);
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 36px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 13px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--cards-05 .rmd-s-card-link::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	@media (max-width: 1023px) {
		.rmd-s--cards-05 .rmd-s-cards { --rmd-cols: 2; }
	}
	@media (max-width: 640px) {
		.rmd-s--cards-05 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--cards-05 .rmd-s-card-media { height: 220px; }
	}

	/* ── Cards 09 — 46957:11865, read 21/10 ─────────────────────────────────
	   294 x 392 tinted cards running off both edges, each with a letterform
	   behind its words, and the arrows centred underneath. */
	.rmd-s--cards-09 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--cards-09 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: normal;
	}
	.rmd-s--cards-09 .rmd-s-head-aside {
		gap: var(--space-2xl, 24px);
		justify-items: end;
		align-content: end;
		text-align: right;
	}
	.rmd-s--cards-09 .rmd-s-lead {
		width: min(100%, 429px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--cards-09 .rmd-s-cards {
		gap: var(--spacing-16, 16px);
		padding-block: var(--spacing-24, 24px);
		/* The node fades the cards at each end to say "this scrolls". A band
		   that really scrolls wants the fade at the EDGE, not on particular
		   cards, or it would travel with them. */
		-webkit-mask: linear-gradient(to right, transparent, #000 96px,
			#000 calc(100% - 96px), transparent);
		mask: linear-gradient(to right, transparent, #000 96px,
			#000 calc(100% - 96px), transparent);
	}
	.rmd-s--cards-09 .rmd-s-cards > .rmd-s-card {
		/* Its own stacking context: the wash (::before) must paint OVER the
		   picture, which is absolutely positioned and comes later in the tree,
		   so without this it covered the wash and white text sat on the bare
		   image (1.1:1 over the placeholder). The picture goes to the bottom
		   of this context with z-index: -1; see tests/audit.py. */
		isolation: isolate;
		position: relative;
		width: 294px;
		height: 392px;
		padding: 0;
		gap: 0;
		justify-content: flex-end;
		overflow: hidden;
		border: 1px solid var(--color-border-surface-region, #f6f9fb);
		border-radius: var(--radius-8, 8px);
		box-shadow: 0 3px 12px rgba(0, 0, 0, .04); /* Elevation/MD */
	}
	/* The tints cycle; the node's own order does not repeat. */
	.rmd-s--cards-09 .rmd-s-card:nth-child(3n+1) { background: var(--color-surface-accent-rose, #fff1f2); }
	.rmd-s--cards-09 .rmd-s-card:nth-child(3n+2) { background: var(--color-surface-accent-orange, #fff7ed); }
	.rmd-s--cards-09 .rmd-s-card:nth-child(3n)   { background: var(--color-surface-accent-indigo, #eef2ff); }

	/* The letterform fills the card and is allowed to run off it. */
	.rmd-s--cards-09 .rmd-s-card-media {
		z-index: -1;
		position: absolute;
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}
	.rmd-s--cards-09 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	/* No navy: the overlay family's ::after darkens a photograph for white
	   captions (Content 09, 10). This one washes to WHITE for dark words, and
	   the navy showed through as a grey band across every letterform where the
	   white was not yet solid (23/10). */
	.rmd-s--cards-09 .rmd-s-cards > .rmd-s-card::after { content: none; }
	/* White from 50% down, solid by 65% — what lets the words sit over it. */
	.rmd-s--cards-09 .rmd-s-cards > .rmd-s-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom,
			rgba(255, 255, 255, 0) 50%, var(--color-surface-canvas, #fff) 65%);
		pointer-events: none;
	}
	.rmd-s--cards-09 .rmd-s-card > .rmd-s-card-body {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-16, 16px);
		padding: var(--spacing-24, 24px);
	}
	.rmd-s--cards-09 .rmd-s-card-title {
		/* Dark over the white foot. The overlay layout makes card words white
		   because its OTHER variants wash to navy; this one washes to white. */
		color: var(--color-content-primary, #0f172b);
		font-weight: 500;
	}
	.rmd-s--cards-09 .rmd-s-card-text {
		font-size: var(--font-size-body-xs, 12px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	/* Centred under the band, not in the heading row. */
	.rmd-s--cards-09 .rmd-s-arrows {
		justify-content: center;
		margin-top: var(--spacing-24, 24px);
	}

	@media (max-width: 900px) {
		.rmd-s--cards-09 .rmd-s-head { flex-direction: column; }
		.rmd-s--cards-09 .rmd-s-head-aside { justify-items: start; text-align: left; }
		.rmd-s--cards-09 .rmd-s-lead { width: auto; }
		.rmd-s--cards-09 .rmd-s-cards {
			-webkit-mask: none;
			mask: none;
		}
	}

	/* ── Cards 08 — 46957:11867, read 21/10 ─────────────────────────────────
	   Two rows of 588 cards going opposite ways, each a 148 square beside its
	   words. Edge to edge, 24 above and below each row. */
	.rmd-s--cards-08 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--cards-08 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: normal;
	}
	.rmd-s--cards-08 .rmd-s-head-aside {
		gap: var(--space-2xl, 24px);
		justify-items: end;
		align-content: end;
		text-align: right;
	}
	.rmd-s--cards-08 .rmd-s-lead {
		width: min(100%, 429px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--cards-08 .rmd-s-marquee { gap: 0; margin-top: 0; }
	.rmd-s--cards-08 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		gap: var(--spacing-16, 16px);
		padding-block: var(--spacing-24, 24px);
		width: max-content;
	}
	.rmd-s--cards-08 .rmd-s-card {
		flex: none;
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-24, 24px);
		padding: var(--space-md, 12px);
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
		border: 1px solid transparent;
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
		transition: background-color .15s ease, border-color .15s ease;
	}
	/* The node's 588, stated where it WINS. The shared list-marquee rule
	   (.rmd-s--l-marquee .rmd-s-cards > li, one element more specific) clamps
	   every item to 420 at most, as a percentage of the list — and this list
	   is a max-content marquee ROW sized by its items, so the percentage was
	   circular too: cards of 420 in a row box of 7260 for 4344 of cards, and
	   the -50% loop slid far enough to leave half the band empty. */
	.rmd-s--cards-08 .rmd-s-cards > .rmd-s-card { width: 588px; }
	/* The node draws one card in its hover state, and names it so. */
	.rmd-s--cards-08 .rmd-s-card:hover {
		background: var(--color-surface-region, #fcfcfd);
		border-color: var(--color-surface-modal, #f4f7fa);
	}
	.rmd-s--cards-08 .rmd-s-card > .rmd-s-card-media {
		flex: none;
		width: 148px;
		height: 148px;
		margin: 0;
	}
	.rmd-s--cards-08 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--cards-08 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-width: 0;
		gap: 0;
		padding-block: var(--space-md, 12px);
	}
	.rmd-s--cards-08 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--cards-08 .rmd-s-card-text {
		margin-top: var(--spacing-8, 8px);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	/* A chevron, not the arrow the rest of the file uses. */
	.rmd-s--cards-08 .rmd-s-card-link {
		margin-top: var(--spacing-16, 16px);
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 36px;
		padding-inline: 0;
		border-radius: var(--radius-4, 4px);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 13px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
		transition: background-color .15s ease, color .15s ease, padding .15s ease;
	}
	.rmd-s--cards-08 .rmd-s-card-link::after {
		content: "";
		width: 16px;
		height: 16px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/chevron-right.svg") center / contain no-repeat;
		mask: url("../img/sections/chevron-right.svg") center / contain no-repeat;
	}
	/* On hover the link becomes the filled secondary button the node shows. */
	.rmd-s--cards-08 .rmd-s-card:hover .rmd-s-card-link {
		padding-inline: var(--space-md, 12px);
		background: var(--color-button-secondary-default, #432dd7);
		color: var(--color-content-static-white, #fff);
		font-weight: 600;
	}

	@media (max-width: 900px) {
		.rmd-s--cards-08 .rmd-s-head { flex-direction: column; }
		.rmd-s--cards-08 .rmd-s-head-aside { justify-items: start; text-align: left; }
		.rmd-s--cards-08 .rmd-s-lead { width: auto; }
		.rmd-s--cards-08 .rmd-s-cards > .rmd-s-card { width: 400px; }
		.rmd-s--cards-08 .rmd-s-card > .rmd-s-card-media { width: 110px; height: 110px; }
	}

	/* ── Cards 03 — 46957:11874, read 21/10 ─────────────────────────────────
	   A 613 lead card beside two that share what is left, all 600 tall. The
	   lead is not merely wider: it speaks a size louder. */
	.rmd-s--cards-03 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--cards-03 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--cards-03 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--cards-03 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		align-items: stretch;
		gap: var(--spacing-16, 16px);
		min-height: 600px;
	}
	.rmd-s--cards-03 .rmd-s-card { flex: 1 1 0; min-width: 0; }
	.rmd-s--cards-03 .rmd-s-card:first-child { flex: 0 0 613px; }
	.rmd-s--cards-03 .rmd-s-card {
		padding: 0;
		gap: 0;
		overflow: hidden;
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	.rmd-s--cards-03 .rmd-s-card-media {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		margin: 0;
	}
	.rmd-s--cards-03 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	/* The lower half: the words at its top, the link held at its foot. */
	.rmd-s--cards-03 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-height: 0;
		/* 0: the gaps inside the words DIFFER (20 under the title, 48 before
		   the link), and a gap reaches every child alike. Each pair states
		   its own, so no two numbers add up. */
		gap: 0;
		padding: var(--spacing-24, 24px);
	}
	.rmd-s--cards-03 .rmd-s-card-text { margin-top: var(--space-xl, 20px); }
	.rmd-s--cards-03 .rmd-s-card-link { margin-top: auto; }
	/* The two narrower cards hold their words together in the middle instead. */
	.rmd-s--cards-03 .rmd-s-card:not(:first-child) .rmd-s-card-body { justify-content: center; }
	.rmd-s--cards-03 .rmd-s-card:not(:first-child) .rmd-s-card-link {
		margin-top: var(--spacing-48, 48px);
	}

	.rmd-s--cards-03 .rmd-s-card:first-child .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--cards-03 .rmd-s-card:first-child .rmd-s-card-text {
		max-width: 565px;
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--cards-03 .rmd-s-card:not(:first-child) .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--cards-03 .rmd-s-card:not(:first-child) .rmd-s-card-text {
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--cards-03 .rmd-s-card-link {
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 36px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 13px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--cards-03 .rmd-s-card-link::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	@media (max-width: 1120px) {
		.rmd-s--cards-03 .rmd-s-card:first-child { flex: 1 1 0; }
	}
	@media (max-width: 760px) {
		.rmd-s--cards-03 .rmd-s-cards { flex-direction: column; min-height: 0; }
		/* Their own height once stacked: at 420 the small cards centred their
		   words in what was left, a 70px hole under the photograph. */
		.rmd-s--cards-03 .rmd-s-card,
		.rmd-s--cards-03 .rmd-s-card:first-child { flex: none; min-height: 0; }
		.rmd-s--cards-03 .rmd-s-card:not(:first-child) .rmd-s-card-body { justify-content: flex-start; }
		/* The photograph and the words share the card's height (flex 1 1 0) —
		   with no card height to share, each takes its own here. */
		.rmd-s--cards-03 .rmd-s-card-media { flex: none; height: 220px; }
		.rmd-s--cards-03 .rmd-s-card-body { flex: none; }
	}

	/* ── Cards 01 — 46957:11871, read 21/10 ─────────────────────────────────
	   Two 800-tall cards, ruled at 2px — the only ones in the file that are —
	   titling as loudly as the section itself. */
	.rmd-s--cards-01 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--cards-01 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--cards-01 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--cards-01 .rmd-s-cards { --rmd-gap: var(--spacing-16, 16px); align-items: stretch; }
	.rmd-s--cards-01 .rmd-s-card {
		min-height: 800px;
		padding: 0;
		gap: 0;
		overflow: hidden;
		background: var(--color-surface-region, #fcfcfd);
		/* 2, written out — see tokens.css §border on --border-width-2xl. */
		border: 2px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	.rmd-s--cards-01 .rmd-s-card-media {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		margin: 0;
	}
	.rmd-s--cards-01 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	/* The words take only what they need; the picture keeps the rest. */
	.rmd-s--cards-01 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		flex: none;
		/* 0: the gaps inside the words DIFFER (20 under the title, 48 before
		   the link), and a gap reaches every child alike. Each pair states
		   its own, so no two numbers add up. */
		gap: 0;
		padding: var(--spacing-24, 24px);
	}
	.rmd-s--cards-01 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--cards-01 .rmd-s-card-text {
		margin-top: var(--space-xl, 20px);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--cards-01 .rmd-s-card-link {
		margin-top: var(--spacing-48, 48px);
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 48px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-2xl, 16px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--cards-01 .rmd-s-card-link::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	@media (max-width: 760px) {
		.rmd-s--cards-01 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--cards-01 .rmd-s-card { min-height: 560px; }
	}

	/* ── Content 01 — 46968:16126, read 21/10 ───────────────────────────────
	   A 616 square under the cut-out on the left, the words on the right in a
	   576 column, and a ticked list between them and the buttons. The band
	   sits on canvas-alt, with a pale arc hung off its bottom-left. */
	.rmd-s--content-01 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-01::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 1000px;
		height: 1000px;
		transform: rotate(180deg) scaleY(-1);
		background: url("../img/sections/content-01-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-01 .rmd-s-wrap { position: relative; }
	.rmd-s--content-01 .rmd-s-split {
		display: flex;
		gap: var(--spacing-48, 48px);
		align-items: stretch;
	}
	/* The picture is fixed; the words take what is left. */
	.rmd-s--content-01 .rmd-s-col:first-child { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
	/* 576 and 576 with 48 between — the node's own 1200 (47395:29644 is a
	   576 square and the words frame beside it is 576 too). 616 asked for
	   1280 inside a 1200 wrapper, so the picture came out squeezed. */
	.rmd-s--content-01 .rmd-s-col:last-child { flex: 0 0 576px; }
	.rmd-s--content-01 .rmd-s-media { margin: 0; }
	.rmd-s--content-01 .rmd-s-media img {
		width: min(100%, 576px);
		max-width: 100%;
		height: 576px;
		object-fit: cover;
	}
	.rmd-s--content-01 .rmd-s-head {
		max-width: 576px;
		margin-bottom: 0;
	}
	.rmd-s--content-01 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--content-01 .rmd-s-lead {
		width: min(100%, 489px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	/* 32 under the heading, then 56 before the buttons. */
	.rmd-s--content-01 .rmd-s-checks { margin-top: var(--spacing-32, 32px); }
	.rmd-s--content-01 .rmd-s-check-text {
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--content-01 .rmd-s-actions { margin-top: var(--spacing-56, 56px); }

	@media (max-width: 1023px) {
		.rmd-s--content-01 .rmd-s-split { flex-direction: column-reverse; }
		.rmd-s--content-01 .rmd-s-col:last-child { flex: none; }
		.rmd-s--content-01 .rmd-s-media img { height: auto; aspect-ratio: 616 / 615; }
		.rmd-s--content-01::before { display: none; }
	}

	/* ── Content 07 — 46968:16120, read 21/10 ───────────────────────────────
	   Three 352 icon cards under a centred heading, on canvas-alt, with a
	   pale tracery across the top. 64 under the heading, not the usual 48. */
	.rmd-s--content-07 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-07::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 1920px;
		height: 600px;
		transform: translateX(-50%);
		background: url("../img/sections/content-07-center.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-07 .rmd-s-wrap { position: relative; }
	.rmd-s--content-07 .rmd-s-head { margin-bottom: var(--spacing-64, 64px); }
	.rmd-s--content-07 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--content-07 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	/* The cards are a FIXED 352 and centre as a group, rather than sharing
	   the row out between them. */
	.rmd-s--content-07 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: var(--spacing-16, 16px);
	}
	.rmd-s--content-07 .rmd-s-card {
		flex: none;
		width: min(100%, 352px);
		gap: var(--space-3xl, 32px);
		padding: var(--spacing-24, 24px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	/* The card's gap is the ICON to the words and must not reach inside
	   them: the words are their own column, spaced by their margins. */
	.rmd-s--content-07 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.rmd-s--content-07 .rmd-s-card-ico {
		display: grid;
		place-items: center;
		width: 60px;
		height: 60px;
		padding: 12px;
		border-radius: 7.2px;
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}
	.rmd-s--content-07 .rmd-s-card-ico svg { width: 32px; height: 32px; }
	.rmd-s--content-07 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--content-07 .rmd-s-card-text {
		margin-top: var(--spacing-8, 8px);
		font-size: var(--font-size-body-xs, 12px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}

	@media (max-width: 640px) {
		.rmd-s--content-07 .rmd-s-card { width: 100%; }
		.rmd-s--content-07::before { display: none; }
	}

	/* ── Content 08 — 46968:16118, read 21/10 ───────────────────────────────
	   Four cards of words alone, 16 apart, on canvas-alt. Its heading carries
	   a title and its buttons and NOTHING between them. */
	.rmd-s--content-08 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-08::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1000px;
		height: 1000px;
		transform: translateY(-50%) rotate(180deg) scaleY(-1);
		background: url("../img/sections/content-08-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-08 .rmd-s-wrap { position: relative; }
	.rmd-s--content-08 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--content-08 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--content-08 .rmd-s-cards { --rmd-gap: var(--spacing-16, 16px); align-items: start; }
	.rmd-s--content-08 .rmd-s-card {
		/* No media in this one, so the card's gap only ever stood between the
		   title and its text — on top of the 12 stated below. */
		gap: 0;
		padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	.rmd-s--content-08 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--content-08 .rmd-s-card-text {
		margin-top: var(--space-md, 12px);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}

	@media (max-width: 1023px) {
		.rmd-s--content-08 .rmd-s-cards { --rmd-cols: 2; }
	}
	@media (max-width: 640px) {
		.rmd-s--content-08 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--content-08::before { display: none; }
	}

	/* ── Content 05 — 46968:16123, read 21/10 ───────────────────────────────
	   A 450 heading column beside three icon cards, and a 512 photograph the
	   full width underneath. 32 everywhere the generic aside uses 48. */
	.rmd-s--content-05 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-05::before {
		content: "";
		position: absolute;
		right: 180px;
		top: calc(50% - 339px);
		width: 1000px;
		height: 1000px;
		transform: translateY(-50%);
		background: url("../img/sections/content-05-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-05 .rmd-s-wrap { position: relative; }
	.rmd-s--content-05 .rmd-s-aside {
		grid-template-columns: 450px minmax(0, 1fr);
		gap: var(--spacing-32, 32px);
		align-items: start;
	}
	.rmd-s--content-05 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--content-05 .rmd-s-lead {
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--content-05 .rmd-s-cards { --rmd-gap: var(--spacing-16, 16px); align-items: stretch; }
	.rmd-s--content-05 .rmd-s-card {
		gap: var(--spacing-24, 24px);
		padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	/* The card's gap is the ICON to the words and must not reach inside
	   them: the words are their own column, spaced by their margins. */
	.rmd-s--content-05 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.rmd-s--content-05 .rmd-s-card-ico {
		display: grid;
		place-items: center;
		width: 60px;
		height: 60px;
		padding: 12px;
		border-radius: 7.2px;
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}
	.rmd-s--content-05 .rmd-s-card-ico svg { width: 32px; height: 32px; }
	.rmd-s--content-05 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--content-05 .rmd-s-card-text {
		margin-top: var(--space-md, 12px);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	/* The photograph under both columns. */
	.rmd-s--content-05 .rmd-s-media { margin-top: var(--spacing-32, 32px); }
	.rmd-s--content-05 .rmd-s-media img {
		width: 100%;
		height: 512px;
		object-fit: cover;
		border-radius: var(--radius-8, 8px);
	}

	@media (max-width: 1023px) {
		.rmd-s--content-05 .rmd-s-aside { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--content-05 .rmd-s-cards { --rmd-cols: 3; }
	}
	@media (max-width: 760px) {
		.rmd-s--content-05 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--content-05 .rmd-s-media img { height: 300px; }
		.rmd-s--content-05::before { display: none; }
	}

	/* ── Content 06 — 46968:16119, read 21/10 ───────────────────────────────
	   A 524 column of three row-cards beside a 524 SQUARE panel for the
	   chart — the band is 524 tall, which is what squares it. Shares Content
	   07's tracery. */
	.rmd-s--content-06 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-06::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 1920px;
		height: 600px;
		transform: translateX(-50%);
		background: url("../img/sections/content-07-center.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-06 .rmd-s-wrap { position: relative; }
	.rmd-s--content-06 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--content-06 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--content-06 .rmd-s-lead {
		width: min(100%, 600px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--content-06 .rmd-s-split {
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: var(--spacing-16, 16px);
		height: 524px;
	}
	.rmd-s--content-06 .rmd-s-col { flex: 0 0 524px; min-width: 0; }
	.rmd-s--content-06 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--spacing-16, 16px);
		height: 100%;
	}
	/* Ruled in the visible grey, not the nearly invisible container tint. */
	.rmd-s--content-06 .rmd-s-card {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-16, 16px);
		padding: var(--space-md, 12px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-divider, #cad5e2);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	/* A 128 SQUARE at radius 4 — not a disc. */
	.rmd-s--content-06 .rmd-s-card > .rmd-s-card-media {
		flex: none;
		width: 128px;
		height: 128px;
		margin: 0;
		border-radius: var(--radius-4, 4px);
		overflow: hidden;
	}
	.rmd-s--content-06 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-4, 4px);
	}
	.rmd-s--content-06 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-width: 0;
		gap: var(--spacing-8, 8px);
	}
	.rmd-s--content-06 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--content-06 .rmd-s-card-text {
		font-size: var(--font-size-body-xs, 12px);
		line-height: 1.6;
		color: var(--color-content-tertiary, #3b4b62);
	}
	/* The smallest link in the file: 28 tall at label-md with a 16 arrow. */
	.rmd-s--content-06 .rmd-s-card-link {
		margin-top: auto;
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 28px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-md, 12px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--content-06 .rmd-s-card-link::after {
		content: "";
		width: 16px;
		height: 16px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}
	/* The chart sits on its own panel, 32 in from every edge. */
	.rmd-s--content-06 .rmd-s-media {
		margin: 0;
		height: 100%;
		padding: var(--space-3xl, 32px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-divider, #cad5e2);
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--content-06 .rmd-s-media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 0;
	}

	@media (max-width: 1120px) {
		.rmd-s--content-06 .rmd-s-split { flex-direction: column; height: auto; }
		.rmd-s--content-06 .rmd-s-col { flex: none; width: 100%; }
		.rmd-s--content-06 .rmd-s-cards { height: auto; }
		.rmd-s--content-06 .rmd-s-media { height: 420px; }
		.rmd-s--content-06::before { display: none; }
	}
	@media (max-width: 640px) {
		.rmd-s--content-06 .rmd-s-card { flex-direction: column; align-items: stretch; }
		.rmd-s--content-06 .rmd-s-card > .rmd-s-card-media { width: 100%; height: 180px; }
	}

	/* ── Content 10 — 46968:16121, read 21/10 ───────────────────────────────
	   Two rows that do not share a column structure — 660 + 524, then three
	   equal 390s — so the list WRAPS rather than gridding: the first two fill
	   a line exactly and the rest take the next. */
	.rmd-s--content-10 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-10::before {
		content: "";
		position: absolute;
		left: 0;
		top: -479px;
		width: 1440px;
		height: 1363px;
		transform: rotate(180deg) scaleY(-1);
		background: url("../img/sections/content-10-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-10 .rmd-s-wrap { position: relative; }
	.rmd-s--content-10 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--content-10 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: normal;
	}
	.rmd-s--content-10 .rmd-s-head-aside {
		gap: var(--space-2xl, 24px);
		justify-items: end;
		align-content: end;
		text-align: right;
	}
	.rmd-s--content-10 .rmd-s-lead {
		width: min(100%, 429px);
		max-width: 100%;
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--content-10 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		flex-wrap: wrap;
		gap: var(--spacing-16, 16px);
	}
	/* 55% and whatever is left fill the first line exactly, so the three that
	   follow are pushed onto the next of their own accord. */
	/* 660 and 524 with the 16 between: 55% of the 1200 content is already
	   exactly 660, so subtracting the gutter took 8 off this cell and
	   handed it to the chart beside it. */
	/* Keyed on WHAT each cell is, not where it falls. rmd_section_cards()
	   emits the chart (`bento_shot`) FIRST, so `:nth-child(1)` handed the
	   chart the card's 660; and the rest, at `flex: 1 1 0` with no minimum,
	   never wrapped at all — five cells on one line, the cards 119 wide under
	   photographs laid out at 227. The node is a card of 660 beside the chart's
	   524 square, then three equal cards on a line of their own. */
	.rmd-s--content-10 .rmd-s-shot + .rmd-s-card,
	.rmd-s--content-10 .rmd-s-cards > .rmd-s-card:first-child { order: -1; flex: 0 0 660px; height: 524px; }
	.rmd-s--content-10 .rmd-s-cards > .rmd-s-shot { flex: 0 0 calc(100% - 676px); height: 524px; }
	.rmd-s--content-10 .rmd-s-card ~ .rmd-s-card { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; height: 412px; }

	/* The chart on its own panel. */
	.rmd-s--content-10 .rmd-s-shot {
		padding: var(--space-3xl, 32px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-divider, #cad5e2);
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--content-10 .rmd-s-shot-img { object-fit: contain; }

	/* The four cards are overlays: the photograph fills them, the words sit at
	   the foot in white over the DS's wash. */
	.rmd-s--content-10 .rmd-s-card {
		/* Its own stacking context: the wash (::before) must paint OVER the
		   picture, which is absolutely positioned and comes later in the tree,
		   so without this it covered the wash and white text sat on the bare
		   image (1.1:1 over the placeholder). The picture goes to the bottom
		   of this context with z-index: -1; see tests/audit.py. */
		isolation: isolate;
		position: relative;
		justify-content: flex-end;
		padding: var(--spacing-24, 24px);
		overflow: hidden;
		background: none;
		border: 0;
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
		color: var(--color-content-static-white, #fff);
	}
	.rmd-s--content-10 .rmd-s-card-media {
		z-index: -1;
		position: absolute;
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}
	.rmd-s--content-10 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	.rmd-s--content-10 .rmd-s-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(4, 17, 53, 0) 0%, rgba(4, 17, 53, .35) 30%, rgba(4, 17, 53, .88) 100%);
		pointer-events: none;
	}
	.rmd-s--content-10 .rmd-s-card-body {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-16, 16px);
	}
	.rmd-s--content-10 .rmd-s-card-title {
		font-weight: 500;
		color: inherit;
	}
	.rmd-s--content-10 .rmd-s-card-text {
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: inherit;
	}

	@media (max-width: 1023px) {
		.rmd-s--content-10 .rmd-s-head { flex-direction: column; }
		.rmd-s--content-10 .rmd-s-head-aside { justify-items: start; text-align: left; }
		.rmd-s--content-10 .rmd-s-lead { width: auto; }
		.rmd-s--content-10 .rmd-s-cards > :nth-child(1),
		.rmd-s--content-10 .rmd-s-cards > :nth-child(2) { flex: 1 1 100%; height: 420px; }
		.rmd-s--content-10 .rmd-s-cards > :nth-child(n+3) { flex: 1 1 calc(50% - 8px); }
		.rmd-s--content-10::before { display: none; }
	}
	@media (max-width: 640px) {
		.rmd-s--content-10 .rmd-s-cards > :nth-child(n+3) { flex: 1 1 100%; }
	}

	/* ── Content 04 — 46968:16117, read 21/10 ───────────────────────────────
	   Three alternating rows of 524: words beside a square chart panel, 48
	   between them and 48 between rows. The rows are inset 52 from the
	   wrapper — 1096 inside 1200, the only band narrower than its own frame. */
	.rmd-s--content-04 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-04::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 1920px;
		height: 600px;
		transform: translateX(-50%);
		background: url("../img/sections/content-07-center.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-04 .rmd-s-wrap { position: relative; }
	.rmd-s--content-04 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--content-04 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--content-04 .rmd-s-lead {
		/* 600 and centred, as the node draws it (Body Text x=300 w=600). */
		width: min(100%, 600px);
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--content-04 .rmd-s-rows {
		gap: var(--spacing-48, 48px);
		margin-inline: 52px;
	}
	.rmd-s--content-04 .rmd-s-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-48, 48px);
		align-items: center;
		min-height: 524px;
	}
	.rmd-s--content-04 .rmd-s-row-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.rmd-s--content-04 .rmd-s-card-title {
		font-weight: 500;
	}
	/* 20 under the title, and the body stops at 450 inside a 524 column. */
	.rmd-s--content-04 .rmd-s-card-text {
		margin-top: var(--space-xl, 20px);
		max-width: 450px;
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--content-04 .rmd-s-card-link {
		margin-top: var(--spacing-48, 48px);
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 40px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-xl, 14px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--content-04 .rmd-s-card-link::after {
		content: "";
		width: 20px;
		height: 20px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}
	/* Each chart on its own square panel. */
	.rmd-s--content-04 .rmd-s-row-media {
		height: 524px;
		padding: var(--space-3xl, 32px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-divider, #cad5e2);
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--content-04 .rmd-s-row-media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 0;
	}

	@media (max-width: 1023px) {
		.rmd-s--content-04 .rmd-s-rows { margin-inline: 0; }
	}
	@media (max-width: 900px) {
		.rmd-s--content-04 .rmd-s-row { min-height: 0; }
		.rmd-s--content-04 .rmd-s-row-media { height: 380px; }
		.rmd-s--content-04::before { display: none; }
	}

	/* ── Content 03 — 46968:16124, read 21/10 ───────────────────────────────
	   Two 524 cards, each a square chart over its words, the pair centred
	   with 68 either side of the 1200 frame. */
	.rmd-s--content-03 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-03::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 1440px;
		height: 600px;
		transform: translateX(-50%);
		background: url("../img/sections/content-07-center.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-03 .rmd-s-wrap { position: relative; }
	.rmd-s--content-03 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--content-03 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--content-03 .rmd-s-lead {
		/* 600 and centred, as the node draws it (Body Text x=300 w=600). */
		width: min(100%, 600px);
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--content-03 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		justify-content: center;
		align-items: flex-start;
		gap: var(--spacing-16, 16px);
		margin-inline: 68px;
	}
	.rmd-s--content-03 .rmd-s-card {
		flex: 0 0 524px;
		max-width: 100%;
		gap: var(--spacing-24, 24px);
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}
	/* The chart on its own square panel, as in Content 04, 06 and 10. */
	.rmd-s--content-03 .rmd-s-card-media {
		width: 100%;
		height: 524px;
		margin: 0;
		padding: var(--space-3xl, 32px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-divider, #cad5e2);
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--content-03 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 0;
	}
	.rmd-s--content-03 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-16, 16px);
		padding-inline: var(--space-md, 12px);
	}
	.rmd-s--content-03 .rmd-s-card-title {
		font-weight: 500;
	}
	/* body-lg — the only card text in the file set at 18. */
	.rmd-s--content-03 .rmd-s-card-text {
		font-size: var(--font-size-body-lg, 18px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	/* A real bordered button, not the indigo text link, and an arrow that
	   points RIGHT rather than up-right. */
	.rmd-s--content-03 .rmd-s-card-link {
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs, 4px);
		height: 48px;
		padding-inline: var(--space-lg, 16px);
		background: var(--color-button-tertiary-default, #fff);
		border: 1px solid var(--color-border-control-default, #cad5e2);
		border-radius: var(--radius-4, 4px);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-2xl, 16px);
		color: var(--color-content-inverse-b, #000);
		text-decoration: none;
	}
	.rmd-s--content-03 .rmd-s-card-link::after {
		content: "";
		width: 32px;
		height: 32px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/arrow-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-right.svg") center / contain no-repeat;
	}

	/* ── Content 09 — 46968:16116, read 21/10 ───────────────────────────────
	   A 524 chart panel beside a 660 overlay card, twice, the second row
	   reversed. 16 between the two and 16 between the rows — the tightest
	   gutter of any rows band. */
	.rmd-s--content-09 {
		position: relative;
		overflow: hidden;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--content-09::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 1920px;
		height: 600px;
		transform: translateX(-50%);
		background: url("../img/sections/content-07-center.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--content-09 .rmd-s-wrap { position: relative; }
	.rmd-s--content-09 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--content-09 .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--content-09 .rmd-s-lead {
		/* 600 and centred, as the node draws it (Body Text x=300 w=600). */
		width: min(100%, 600px);
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--content-09 .rmd-s-rows { gap: var(--spacing-16, 16px); }
	/* 660 and 524 make the 1200 frame with their 16 between. */
	/* 660 of words and 524 of chart — but `grid-template-columns` is
	   POSITIONAL and row 1 flips (media_first), so written this way it
	   described row 2 and handed row 1's chart the 660. The flipped row states
	   its own order. */
	.rmd-s--content-09 .rmd-s-row {
		grid-template-columns: minmax(0, 660fr) minmax(0, 524fr);
		gap: var(--spacing-16, 16px);
		height: 524px;
	}
	.rmd-s--content-09 .rmd-s-row--flip {
		grid-template-columns: minmax(0, 524fr) minmax(0, 660fr);
	}
	/* Both cells are the full 524 of the row; left to themselves they shrank
	   to their content — the overlay card to about 136. */
	.rmd-s--content-09 .rmd-s-row > * { height: 100%; }
	/* The words sit over the card's own photograph. */
	.rmd-s--content-09 .rmd-s-row-text {
		/* Its own stacking context: the wash (::before) must paint OVER the
		   picture, which is absolutely positioned and comes later in the tree,
		   so without this it covered the wash and white text sat on the bare
		   image (1.1:1 over the placeholder). The picture goes to the bottom
		   of this context with z-index: -1; see tests/audit.py. */
		isolation: isolate;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: var(--spacing-16, 16px);
		padding: var(--spacing-24, 24px);
		overflow: hidden;
		border-radius: var(--radius-8, 8px);
		color: var(--color-content-static-white, #fff);
	}
	.rmd-s--content-09 .rmd-s-row-text > .rmd-s-card-img {
		z-index: -1;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	/* THE SCRIM. Four variants set white text over their imagery — Content 09
	   and 10, Bento 02, Stats 01 — and this gradient is what keeps it readable.
	   It used to run 6% black for the top third and reach 60% only at the very
	   foot: right for the designer's dark photograph and nothing else. Over a
	   light picture the upper lines of a caption sat near 2:1 contrast.
	   A placeholder cannot fix that — it was navy for one revision and the
	   problem simply moved to the first light photo an editor uploaded. So the
	   ramp carries the weight instead: 35% a third of the way down, 88% at the
	   foot, in the brand navy the overlay ::after already uses rather than flat
	   black. Over a dark photograph it reads slightly richer; over a light one
	   it is the difference between legible and not. */
	.rmd-s--content-09 .rmd-s-row-text::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(4, 17, 53, 0) 0%, rgba(4, 17, 53, .35) 30%, rgba(4, 17, 53, .88) 100%);
		pointer-events: none;
	}
	.rmd-s--content-09 .rmd-s-card-title,
	.rmd-s--content-09 .rmd-s-card-text { position: relative; color: inherit; }
	.rmd-s--content-09 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--content-09 .rmd-s-card-text {
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
	}
	.rmd-s--content-09 .rmd-s-row-media {
		padding: var(--space-3xl, 32px);
		background: var(--color-surface-region, #fcfcfd);
		border: 1px solid var(--color-border-surface-divider, #cad5e2);
		border-radius: var(--radius-8, 8px);
	}
	.rmd-s--content-09 .rmd-s-row-media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 0;
	}

	@media (max-width: 1023px) {
		.rmd-s--content-03 .rmd-s-cards { margin-inline: 0; flex-wrap: wrap; }
		.rmd-s--content-03 .rmd-s-card { flex: 1 1 320px; }
		.rmd-s--content-03 .rmd-s-card-media { height: 380px; }
		.rmd-s--content-09 .rmd-s-row { height: auto; }
		.rmd-s--content-09 .rmd-s-row-text { min-height: 380px; }
		.rmd-s--content-09 .rmd-s-row-media { height: 380px; }
		.rmd-s--content-03::before,
		.rmd-s--content-09::before { display: none; }
	}

	/* ── Features 04 — 46948:9731, read 21/10 ───────────────────────────────
	   Below this comment is the FAMILY's card, read on 46902:4812 and shared
	   by almost every Features variant. A variant that departs from it says so
	   in its own block. */
	.rmd-s--features .rmd-s-card {
		gap: var(--spacing-24, 24px);
		padding: var(--spacing-24, 24px);
		background: var(--color-surface-region, #fcfcfd);
		/* The VISIBLE grey rule — Content and Cards use the container tint. */
		border: 1px solid var(--color-border-surface-divider, #cad5e2);
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	.rmd-s--features .rmd-s-card-ico {
		display: grid;
		place-items: center;
		width: 60px;
		height: 60px;
		padding: 12px;
		border-radius: 7.2px;
		background: var(--color-surface-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}
	.rmd-s--features .rmd-s-card-ico svg { width: 32px; height: 32px; }
	.rmd-s--features .rmd-s-card-title {
		font-weight: 500;
	}
	/* The card's 24 is the ICON TILE to the words and must stop there. While
	   the words were `display: contents` it reached between them too, so the
	   8 and the 16 below landed on top of it and the family card drew
	   24 / 32 / 40 where its node (46902:4812) says 24 / 8 / 16. Eight of the
	   fifteen variants inherited that; the other seven had each given the body
	   a box of its own, which is what this now does once. */
	.rmd-s--features .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.rmd-s--features .rmd-s-card-text {
		margin-top: var(--spacing-8, 8px);
		font-size: var(--font-size-body-sm, 14px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	/* 16 under the words, and a chevron rather than the arrow. */
	.rmd-s--features .rmd-s-card-link {
		margin-top: var(--spacing-16, 16px);
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs, 4px);
		height: 36px;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 13px);
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: none;
	}
	.rmd-s--features .rmd-s-card-link::after {
		content: "";
		width: 16px;
		height: 16px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("../img/sections/chevron-right.svg") center / contain no-repeat;
		mask: url("../img/sections/chevron-right.svg") center / contain no-repeat;
	}
	.rmd-s--features .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--features .rmd-s-title {
		line-height: 1.3;
		letter-spacing: var(--font-letter-spacing-negative-1, -1px);
	}
	.rmd-s--features .rmd-s-lead {
		font-size: var(--font-size-body-sm, 14px);
		font-weight: 500;
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--features .rmd-s-cards { --rmd-gap: var(--spacing-16, 16px); }

	/* 04 itself: three cards of 389 under a title ALONE — no lead, no
	   buttons — with an arc hung off the right. */
	.rmd-s--features-04 { position: relative; overflow: hidden; }
	.rmd-s--features-04::before {
		content: "";
		position: absolute;
		left: 539px;
		top: -181px;
		width: 1000px;
		height: 1000px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-04 .rmd-s-wrap { position: relative; }
	.rmd-s--features-04 .rmd-s-cards { align-items: stretch; }

	@media (max-width: 900px) {
		.rmd-s--features-04 .rmd-s-cards { --rmd-cols: 2; }
	}
	@media (max-width: 640px) {
		.rmd-s--features-04 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--features-04::before { display: none; }
	}

	/* ── Features 07 — 46948:9732, read 21/10 ───────────────────────────────
	   The family card, centred: icon, words and link all on the middle line,
	   the title up to h5 and the body down to body-xs. The band is inset 48,
	   which is what makes its cards 357 rather than 389. */
	.rmd-s--features-07 { position: relative; overflow: hidden; }
	.rmd-s--features-07::before {
		content: "";
		position: absolute;
		left: 539px;
		top: -190px;
		width: 1000px;
		height: 1000px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-07 .rmd-s-wrap { position: relative; }
	.rmd-s--features-07 .rmd-s-head,
	.rmd-s--features-07 .rmd-s-cards { margin-inline: 48px; }
	.rmd-s--features-07 .rmd-s-head { margin-bottom: var(--spacing-64, 64px); }
	.rmd-s--features-07 .rmd-s-card {
		align-items: center;
		text-align: center;
		gap: var(--spacing-32, 32px);
	}
	/* The card's gap is the MEDIA to the words; it must not reach inside
	   them, or every margin below lands on top of it. */
	.rmd-s--features-07 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.rmd-s--features-07 .rmd-s-card-text {
		margin-top: var(--spacing-16, 16px);
		font-size: var(--font-size-body-xs, 12px);
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--features-07 .rmd-s-card-link {
		align-self: center;
		margin-top: var(--spacing-24, 24px);
	}

	/* ── Features 09 — 46948:9724, read 21/10 ───────────────────────────────
	   A bento: one 592 card beside two 288s, 16 apart, 286 tall. The wide one
	   speaks louder — body-md, and an ARROW where the family uses a chevron —
	   and every card holds its link at its own foot. */
	.rmd-s--features-09 { position: relative; overflow: hidden; }
	.rmd-s--features-09::before {
		content: "";
		position: absolute;
		left: 539px;
		top: -203px;
		width: 1000px;
		height: 1000px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-09 .rmd-s-wrap { position: relative; }
	/* Four columns: the wide card takes two, the others one each. */
	.rmd-s--features-09 .rmd-s-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: stretch;
		min-height: 286px;
	}
	.rmd-s--features-09 .rmd-s-card:first-child { grid-column: span 2; }
	.rmd-s--features-09 .rmd-s-card-link { margin-top: auto; padding-top: var(--spacing-24, 24px); }
	.rmd-s--features-09 .rmd-s-card:not(:first-child) .rmd-s-card-text {
		font-size: var(--font-size-body-xs, 12px);
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--features-09 .rmd-s-card:first-child .rmd-s-card-text {
		font-size: var(--font-size-body-md, 16px);
		color: var(--color-content-secondary, #1d293d);
	}
	/* The wide card's link points up-right, where the narrow ones keep the
	   family's chevron. */
	.rmd-s--features-09 .rmd-s-card:first-child .rmd-s-card-link::after {
		width: 20px;
		height: 20px;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	@media (max-width: 900px) {
		.rmd-s--features-07 .rmd-s-head,
		.rmd-s--features-07 .rmd-s-cards { margin-inline: 0; }
		.rmd-s--features-07 .rmd-s-cards { --rmd-cols: 2; }
		.rmd-s--features-09 .rmd-s-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.rmd-s--features-09 .rmd-s-card:first-child { grid-column: span 2; }
	}
	@media (max-width: 640px) {
		.rmd-s--features-07 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--features-09 .rmd-s-cards { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--features-09 .rmd-s-card:first-child { grid-column: auto; }
		.rmd-s--features-07::before,
		.rmd-s--features-09::before { display: none; }
	}

	/* ── Features 08 — 46948:9726, read 21/10 ───────────────────────────────
	   A 272 photograph over centred words. The one Features card at radius 16
	   and ruled in the pale container tint rather than the divider grey. */
	/* Centred in the row: the node's cards sit at y=9.5 of a 487 container. */
	.rmd-s--features-08 .rmd-s-cards { align-items: center; }
	.rmd-s--features-08 .rmd-s-card {
		padding: 0;
		gap: 0;
		overflow: hidden;
		border-color: var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-16, 16px);
	}
	.rmd-s--features-08 .rmd-s-card-media {
		width: 100%;
		height: 272px;
		margin: 0;
	}
	.rmd-s--features-08 .rmd-s-card-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
	.rmd-s--features-08 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--spacing-24, 24px);
	}
	.rmd-s--features-08 .rmd-s-card-text {
		margin-top: var(--spacing-16, 16px);
		font-size: var(--font-size-body-xs, 12px);
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--features-08 .rmd-s-card-link {
		align-self: center;
		margin-top: var(--spacing-24, 24px);
	}

	/* ── Features 14 — 46948:9719, read 21/10 ───────────────────────────────
	   Six of the family card, three across and two down, 16 apart both ways.
	   Its title is h5 and its body body-sm, only 12 apart — the tightest in
	   the family. No decoration behind this one. */
	.rmd-s--features-14 .rmd-s-cards { align-items: stretch; }
	.rmd-s--features-14 .rmd-s-card-text { margin-top: var(--space-md, 12px); }

	@media (max-width: 900px) {
		.rmd-s--features-08 .rmd-s-cards,
		.rmd-s--features-14 .rmd-s-cards { --rmd-cols: 2; }
	}
	@media (max-width: 640px) {
		.rmd-s--features-08 .rmd-s-cards,
		.rmd-s--features-14 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--features-08 .rmd-s-card-media { height: 220px; }
	}

	/* ── Features 03 — 46948:9730, read 21/10 ───────────────────────────────
	   Two frameless cards of 592: no plate, no rule, no padding — the icon
	   straight on the page. The loudest card in the family. */
	.rmd-s--features-03 .rmd-s-cards { align-items: start; }
	.rmd-s--features-03 .rmd-s-card {
		gap: var(--space-3xl, 32px);
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	/* The card's gap is the MEDIA to the words; it must not reach inside
	   them, or every margin below lands on top of it. */
	.rmd-s--features-03 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.rmd-s--features-03 .rmd-s-card-text {
		margin-top: var(--space-md, 12px);
		font-size: var(--font-size-body-lg, 18px);
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--features-03 .rmd-s-card-link {
		margin-top: var(--spacing-32, 32px);
		height: 40px;
		font-size: var(--font-size-label-xl, 14px);
	}
	.rmd-s--features-03 .rmd-s-card-link::after {
		width: 20px;
		height: 20px;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}

	@media (max-width: 760px) {
		.rmd-s--features-03 .rmd-s-cards { --rmd-cols: 1; }
	}

	/* ── Features 10 — 46948:9723, read 21/10 ───────────────────────────────
	   A 576 heading column beside a 576 column of four frameless cards, two
	   by two — half the frame each, 48 apart. */
	.rmd-s--features-10 .rmd-s-aside {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-48, 48px);
		align-items: start;
	}
	.rmd-s--features-10 .rmd-s-cards { --rmd-cols: var(--rmd-cols-spec, 2); --rmd-gap: var(--spacing-16, 16px); }
	.rmd-s--features-10 .rmd-s-card {
		gap: var(--spacing-24, 24px);
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* ── Features 11 — 46948:9722, read 21/10 ───────────────────────────────
	   Four cards with the icon BESIDE the words, joined by a 2px line that
	   runs from under one icon to the next. The line begins 68 down — the icon
	   is 60, plus 8 — and the last card has none. */
	.rmd-s--features-11 { position: relative; overflow: hidden; }
	.rmd-s--features-11::before {
		content: "";
		position: absolute;
		left: 822px;
		top: 1042px;
		width: 822px;
		height: 822px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-11 .rmd-s-wrap { position: relative; }
	.rmd-s--features-11 .rmd-s-aside {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-48, 48px);
		align-items: start;
	}
	.rmd-s--features-11 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		flex-direction: column;
		gap: var(--spacing-16, 16px);
			/* 16 of padding top and bottom inside the column: the first card
		   sits at y=16 and the last ends 16 clear of 620. */
		padding-block: var(--spacing-16, 16px);
}
	.rmd-s--features-11 .rmd-s-card {
		flex-direction: row;
		align-items: flex-start;
		/* 16 of clear space: the tile spans 16..76 and the words start at 92. */
		gap: var(--spacing-16, 16px);
		padding: 0 0 0 var(--spacing-16, 16px);
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.rmd-s--features-11 .rmd-s-card-ico { flex: none; }
	.rmd-s--features-11 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-width: 0;
	}
	/* body-md here, not the family's body-sm: the node binds Body MD and
	   its lines measure 26. */
	.rmd-s--features-11 .rmd-s-card-text {
		font-size: var(--font-size-body-md, 16px);
	}
	/* The icon is 16 in and 60 wide, so the line falls on its middle. */
	/* The line falls on the middle of the icon HOLDER (x 41-42 measured), not
	   of the tile, and it stops at the card's own foot — 80 long, leaving
	   the 16 between cards clear. */
	.rmd-s--features-11 .rmd-s-cards {
		--rmd-connector-x: 42px;
		--rmd-connector-top: 68px;
		--rmd-connector-bottom: 0px;
	}

	@media (max-width: 900px) {
		.rmd-s--features-10 .rmd-s-aside,
		.rmd-s--features-11 .rmd-s-aside { grid-template-columns: minmax(0, 1fr); }
	}
	@media (max-width: 640px) {
		.rmd-s--features-10 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--features-11 .rmd-s-card { flex-direction: column; padding-left: 0; }
		.rmd-s--features-11::before { display: none; }
	}

	/* ── Features 02 — 46948:9725, read 21/10 ───────────────────────────────
	   Heading and two frameless cards in a 576 column, and a 576 square
	   photograph starting at the wrapper's right edge and running off the
	   screen — which is why the words keep to half the frame. */
	.rmd-s--features-02 { position: relative; overflow: hidden; }
	.rmd-s--features-02::before {
		content: "";
		position: absolute;
		left: 539px;
		top: -272px;
		width: 1000px;
		height: 1000px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-02 .rmd-s-wrap { position: relative; }
	/* 576 of words, 48 of gutter, 576 of picture — exactly the 1200. The node
	   has the photograph at 624 and ending on the frame's right edge; it was
	   read as starting there and running off the screen, which is what the
	   `overflow: visible` and the 0 gutter were for. */
	.rmd-s--features-02 .rmd-s-split {
		display: grid;
		grid-template-columns: minmax(0, 576fr) minmax(0, 576fr);
		gap: var(--spacing-48, 48px);
		align-items: start;
	}
	.rmd-s--features-02 .rmd-s-head { margin-bottom: var(--spacing-48, 48px); }
	.rmd-s--features-02 .rmd-s-cards { --rmd-cols: var(--rmd-cols-spec, 2); --rmd-gap: var(--spacing-16, 16px); }
	.rmd-s--features-02 .rmd-s-card {
		gap: var(--spacing-24, 24px);
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.rmd-s--features-02 .rmd-s-card-text {
		font-size: var(--font-size-body-xs, 12px);
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--features-02 .rmd-s-card-link {
		height: 40px;
		font-size: var(--font-size-label-xl, 14px);
	}
	/* The picture is 576 square and allowed to leave the frame. */
	/* The link ends on the 20 arrow, not the family chevron. */
	.rmd-s--features-02 .rmd-s-card-link::after {
		width: 20px;
		height: 20px;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}
	.rmd-s--features-02 .rmd-s-media { margin: 0; }
	.rmd-s--features-02 .rmd-s-media img {
		width: 100%;
		aspect-ratio: 1;
		height: auto;
		object-fit: cover;
		/* No radius: this photograph is a CUT-OUT (band_media), and the
		   silhouette is its shape. */
		border-radius: 0;
	}

	/* ── Features 12 — 46948:9721, read 21/10 ───────────────────────────────
	   Four of the family's framed card stacked in a 576 column beside a 576
	   heading, 16 apart. Its title is h4 — the tallest any framed Features
	   card carries. */
	.rmd-s--features-12 { position: relative; overflow: hidden; }
	.rmd-s--features-12::before {
		content: "";
		position: absolute;
		left: 1498px;
		top: 1470px;
		width: 1498px;
		height: 1498px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-12 .rmd-s-wrap { position: relative; }
	.rmd-s--features-12 .rmd-s-aside {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-48, 48px);
		align-items: start;
	}
	.rmd-s--features-12 .rmd-s-cards {
		--rmd-cols: var(--rmd-cols-spec, 1);
		--rmd-gap: var(--spacing-16, 16px);
	}
	/* body-md here, not the family's body-sm: the node binds Body MD and
	   its lines measure 26. */
	.rmd-s--features-12 .rmd-s-card-text {
		font-size: var(--font-size-body-md, 16px);
	}
	/* 16 under the icon tile, where the family card says 24: the node puts
	   the words at y=100 under a tile ending at 84. */
	.rmd-s--features-12 .rmd-s-card { gap: var(--spacing-16, 16px); }
	.rmd-s--features-12 .rmd-s-card-text { margin-top: var(--spacing-16, 16px); }

	@media (max-width: 900px) {
		.rmd-s--features-02 .rmd-s-split { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--features-02 .rmd-s-media img { width: 100%; height: 320px; }
		.rmd-s--features-12 .rmd-s-aside { grid-template-columns: minmax(0, 1fr); }
	}
	@media (max-width: 640px) {
		.rmd-s--features-02 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--features-02::before,
		.rmd-s--features-12::before { display: none; }
	}

	/* ── Features 05 — 46948:9729, read 21/10 ───────────────────────────────
	   Four row-cards against a 2px rail on their left, beside a 592 square
	   photograph. The rail runs the full height of the column, 16 out from
	   the cards. */
	.rmd-s--features-05 { position: relative; overflow: hidden; }
	.rmd-s--features-05::before {
		content: "";
		position: absolute;
		left: 539px;
		top: -270px;
		width: 1000px;
		height: 1000px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-05 .rmd-s-wrap { position: relative; }
	.rmd-s--features-05 .rmd-s-split {
		display: grid;
		grid-template-columns: minmax(0, 592fr) minmax(0, 592fr);
		gap: var(--spacing-16, 16px);
		align-items: start;
	}
	.rmd-s--features-05 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		flex-direction: column;
		gap: var(--spacing-16, 16px);
		/* The rail (Content Bar 47287:30067): 2px at the column's left edge,
		   in the DS's Dawn ramp and painted only about 96 down before it fades
		   out — NOT the flat grey full-height rule this had. Sampled off the
		   render: #3943FF to #E40C4A to #FA8E2D, gone by a quarter of the way.
		   A border cannot fade, so it is drawn. */
		position: relative;
		padding-left: var(--spacing-16, 16px);
	}
	.rmd-s--features-05 .rmd-s-cards::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 2px;
		height: 96px;
		background: linear-gradient(to bottom, #3943ff 0%, #e40c4a 55%, #fa8e2d 100%);
	}
	/* The cards keep the family's plate — surface/region at radius 8, measured
	   on the render as #fcfcfd panels over the #f5f8fb page — with no rule and
	   no shadow. They were drawn frameless. */
	.rmd-s--features-05 .rmd-s-card {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--spacing-24, 24px);
		padding: var(--spacing-16, 16px);
		background: var(--color-surface-region, #fcfcfd);
		border: 0;
		border-radius: var(--radius-8, 8px);
		box-shadow: none;
	}
	.rmd-s--features-05 .rmd-s-card-ico { flex: none; }
	.rmd-s--features-05 .rmd-s-card-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-width: 0;
		padding-top: var(--space-sm, 8px);
	}
	/* body-md here, not the family's body-sm: the node binds Body MD and
	   its lines measure 26. */
	.rmd-s--features-05 .rmd-s-card-text {
		font-size: var(--font-size-body-md, 16px);
	}
	.rmd-s--features-05 .rmd-s-card-link {
		/* 16 before the link: its node puts the button at y=118 under a
		   container ending at 102. */
		margin-top: var(--spacing-16, 16px);
		height: 40px;
		font-size: var(--font-size-label-xl, 14px);
	}
	/* The link ends on the 20 arrow, not the family chevron. */
	.rmd-s--features-05 .rmd-s-card-link::after {
		width: 20px;
		height: 20px;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}
	.rmd-s--features-05 .rmd-s-media { margin: 0; }
	.rmd-s--features-05 .rmd-s-media img,
	.rmd-s--features-06 .rmd-s-media img {
		width: 100%;
		aspect-ratio: 1;
		height: auto;
		object-fit: cover;
		/* No radius: this photograph is a CUT-OUT (band_media), and the
		   silhouette is its shape. */
		border-radius: 0;
	}

	/* ── Features 06 — 46948:9728, read 21/10 ───────────────────────────────
	   The same pairing with the icons dropped: three cards of words alone,
	   indented 32, the block centred against the picture rather than hung
	   from its top. */
	.rmd-s--features-06 { position: relative; overflow: hidden; }
	.rmd-s--features-06::before {
		content: "";
		position: absolute;
		left: 539px;
		top: -270px;
		width: 1000px;
		height: 1000px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-06 .rmd-s-wrap { position: relative; }
	.rmd-s--features-06 .rmd-s-split {
		display: grid;
		grid-template-columns: minmax(0, 530fr) minmax(0, 592fr);
		gap: 78px;
		align-items: center;
	}
	.rmd-s--features-06 .rmd-s-cards {
		display: flex;
		grid-template-columns: none;
		flex-direction: column;
		gap: var(--spacing-16, 16px);
	}
	/* Each card carries a 2px Dawn rule on its left edge, full card height
	   (46902:4931 binds Gradient/Border/Dawn with border-width-2xl = 2);
	   measured on the render as #3943FF to #E60A4C to #F87D2F. The gradient
	   token comes back flat through codegen, so the stops are the pixels'. */
	.rmd-s--features-06 .rmd-s-card {
		padding: 0 0 0 var(--spacing-32, 32px);
		background: none;
		border: 0;
		border-left: 2px solid transparent;
		border-image: linear-gradient(to bottom,
			#3943ff 0%, #e60a4c 55%, #f87d2f 100%) 1;
		border-radius: 0;
		box-shadow: none;
	}
	/* body-md here, not the family's body-sm: the node binds Body MD and
	   its lines measure 26. */
	.rmd-s--features-06 .rmd-s-card-text {
		font-size: var(--font-size-body-md, 16px);
	}
	.rmd-s--features-06 .rmd-s-media { margin: 0; }

	@media (max-width: 900px) {
		.rmd-s--features-05 .rmd-s-split,
		.rmd-s--features-06 .rmd-s-split { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32, 32px); }
	}
	@media (max-width: 640px) {
		.rmd-s--features-05 .rmd-s-card { flex-direction: column; }
		.rmd-s--features-05::before,
		.rmd-s--features-06::before { display: none; }
	}

	/* ── Features 13 — 46948:9720, read 21/10 ───────────────────────────────
	   Four framed cards two by two in a 568 column beside a 608 square
	   photograph, 24 apart, the block centred against the picture. */
	.rmd-s--features-13 { position: relative; overflow: hidden; }
	.rmd-s--features-13::before {
		content: "";
		position: absolute;
		left: 539px;
		top: -272px;
		width: 1000px;
		height: 1000px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-13 .rmd-s-wrap { position: relative; }
	.rmd-s--features-13 .rmd-s-split {
		display: grid;
		grid-template-columns: minmax(0, 568fr) minmax(0, 608fr);
		gap: var(--spacing-24, 24px);
		align-items: center;
	}
	.rmd-s--features-13 .rmd-s-cards { --rmd-cols: var(--rmd-cols-spec, 2); --rmd-gap: var(--spacing-16, 16px); }
	.rmd-s--features-13 .rmd-s-card-text {
		font-size: var(--font-size-body-xs, 12px);
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--features-13 .rmd-s-media { margin: 0; }
	.rmd-s--features-13 .rmd-s-media img {
		width: 100%;
		aspect-ratio: 1;
		height: auto;
		object-fit: cover;
		/* No radius: this photograph is a CUT-OUT (band_media), and the
		   silhouette is its shape. */
		border-radius: 0;
	}

	/* ── Features 15 — 47299:35995, read 21/10 ──────────────────────────────
	   Three alternating rows of 567: a square photograph on one side, and on
	   the other a column inset 64 with a title, a lead and a ticked list.
	   Only the last row carries buttons, which is content, not structure. */
	.rmd-s--features-15 {
		position: relative;
		overflow: hidden;
	}
	.rmd-s--features-15::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 1440px;
		height: 600px;
		transform: translateX(-50%);
		background: url("../img/sections/content-07-center.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-15 .rmd-s-wrap { position: relative; }
	.rmd-s--features-15 .rmd-s-rows { gap: var(--spacing-48, 48px); }
	.rmd-s--features-15 .rmd-s-row {
		grid-template-columns: minmax(0, 585fr) minmax(0, 567fr);
		gap: var(--spacing-48, 48px);
		align-items: center;
		min-height: 567px;
	}
	/* The flipped row puts the picture first, so its columns are the other
	   way round: 567 of photograph against 585 of words. Reordering alone
	   handed the picture the 585 and stretched it 18 past square. */
	.rmd-s--features-15 .rmd-s-row--flip {
		grid-template-columns: minmax(0, 567fr) minmax(0, 585fr);
	}
	.rmd-s--features-15 .rmd-s-row-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-inline: 64px;
	}
	.rmd-s--features-15 .rmd-s-card-title {
		font-weight: 500;
	}
	.rmd-s--features-15 .rmd-s-card-text {
		margin-top: var(--space-xl, 20px);
		max-width: 429px;
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.6;
		color: var(--color-content-secondary, #1d293d);
	}
	/* The list rows measure 29, which is 18 on a 1.6 line — so its text is a
	   size ABOVE the lead. The 32 over the list, the 12 between its rows and
	   the 16 from tick to text are already the shared list's own. */
	.rmd-s--features-15 .rmd-s-check-text {
		font-size: var(--font-size-body-lg, 18px);
		line-height: 1.6;
	}
	.rmd-s--features-15 .rmd-s-row-media { height: 567px; }
	.rmd-s--features-15 .rmd-s-row-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* No radius: this photograph is a CUT-OUT (band_media), and the
		   silhouette is its shape. */
		border-radius: 0;
	}

	@media (max-width: 1023px) {
		.rmd-s--features-13 .rmd-s-split { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--features-15 .rmd-s-row { min-height: 0; }
		.rmd-s--features-15 .rmd-s-row-text { padding-inline: 0; }
		.rmd-s--features-15 .rmd-s-row-media { height: 380px; }
		.rmd-s--features-15::before { display: none; }
	}
	@media (max-width: 640px) {
		.rmd-s--features-13 .rmd-s-cards { --rmd-cols: 1; }
		.rmd-s--features-13::before { display: none; }
	}

	/* ── Features 01 — 46948:9733, read 21/10 ───────────────────────────────
	   A carousel of FULL-WIDTH slides, the track pitched 1300 for a 1200
	   slide. Each slide is a panel of the family's own surface and rule at
	   radius 8, holding a 550 column of words 44 in and 68 down — h4 title,
	   body-md lead 20 under it, a ticked list 36 under that, a 40 button 36
	   under the list — and a 576 SQUARE cut-out photograph that hangs 24
	   above the panel, 37 past its right edge and 37 below its foot. The 36s
	   are the DS's own space-3xl on S-FEAT, which is 36 there and 32
	   everywhere else (tokens.css records the conflict), so they are written
	   out rather than taken from the variable. */
	.rmd-s--features-01 { position: relative; overflow: hidden; }
	.rmd-s--features-01::before {
		content: "";
		position: absolute;
		left: 59px;
		top: -272px;
		width: 1000px;
		height: 1000px;
		background: url("../img/sections/features-side.svg") center / contain no-repeat;
		pointer-events: none;
	}
	.rmd-s--features-01 .rmd-s-wrap { position: relative; }
	.rmd-s--features-01 .rmd-s-headrow {
		gap: var(--spacing-48, 48px);
		margin-bottom: var(--spacing-48, 48px);
	}
	/* The ONE carousel in the catalog whose arrows leave the indigo tint:
	   intent/danger with white chevrons at radius 4 (47299:36589). */
	.rmd-s--features-01 .rmd-s-arrow {
		background: var(--color-intent-danger, #ff2056);
		color: var(--color-content-static-white, #fff);
	}
	.rmd-s--features-01 .rmd-s-arrow:hover:not(:disabled) {
		background: var(--color-rose-600, #ec003f);
		color: var(--color-content-static-white, #fff);
	}
	/* The photograph hangs out of the panel on three sides and a scroll
	   container clips both axes, so the track is handed that room as padding
	   and gives it straight back as a negative margin. */
	.rmd-s--features-01 .rmd-s-cards {
		grid-auto-columns: 100%;
		gap: 100px;
		margin-block: -24px -37px;
		padding-block: 24px 37px;
		/* The band runs to the SCREEN's edges, as the node draws it: the
		   neighbouring panels show in the gutters and the 37 the photograph
		   hangs past its panel's right edge is no longer clipped by the track
		   (23/10). The padding gives the bleed back, so a panel is still the
		   content's width; the section clips, never the page. */
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
	}
	/* CENTRED, not start: inside a symmetric bleed that lands every panel on
	   the content edges at any width, a scrollbar included. */
	.rmd-s--features-01 .rmd-s-cards > .rmd-s-card { scroll-snap-align: center; }
	.rmd-s--features-01 .rmd-s-cards > .rmd-s-card {
		grid-template-columns: minmax(0, 550fr) minmax(0, 606fr);
		gap: 0;
		align-items: start;
		padding: 68px 0 68px 44px;
		overflow: visible;
	}
	/* Row 1 by name: the photograph comes first in the markup and spans five
	   rows of column 2, so auto-placement put the words in ROW 2 and the
	   title stood 57 lower than the node's 68 (23/10). */
	.rmd-s--features-01 .rmd-s-card-body {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.rmd-s--features-01 .rmd-s-card-text {
		margin-top: var(--space-xl, 20px);
		font-size: var(--font-size-body-md, 16px);
	}
	/* Its ticks sit on the indigo tint, where Content 01's sit on grey. */
	.rmd-s--features-01 .rmd-s-checks { margin-top: 36px; }
	.rmd-s--features-01 .rmd-s-check-mark {
		background: var(--color-accent-indigo, #eef2ff);
	}
	.rmd-s--features-01 .rmd-s-check-text {
		font-size: var(--font-size-body-lg, 18px);
		color: var(--color-content-secondary, #1d293d);
	}
	.rmd-s--features-01 .rmd-s-card-link {
		margin-top: 36px;
		height: 40px;
		font-size: var(--font-size-label-xl, 14px);
	}
	.rmd-s--features-01 .rmd-s-card-link::after {
		width: 20px;
		height: 20px;
		-webkit-mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
		mask: url("../img/sections/arrow-up-right.svg") center / contain no-repeat;
	}
	.rmd-s--features-01 .rmd-s-card > .rmd-s-card-media {
		grid-column: 2;
		align-self: start;
		width: 576px;
		max-width: none;
		height: 576px;
		margin: -92px -37px 0 67px;
	}
	.rmd-s--features-01 .rmd-s-card-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* Its OWN cut-out, traced off this node's render: the four side notches
	   of the family shape, plus a square hole in the lower left that Content
	   01 does not have. The hole is cut by winding the path back on itself at
	   the one corner where it meets the outline. */
	.rmd-s--features-01 .rmd-s-card-media--masked {
		clip-path: polygon(
			16.667% 0, 83.333% 0,
			83.333% 16.667%, 100% 16.667%,
			100% 50%, 83.333% 50%,
			83.333% 66.667%, 100% 66.667%,
			100% 83.333%, 83.333% 83.333%,
			83.333% 100%, 16.667% 100%,
			16.667% 83.333%, 33.333% 83.333%,
			33.333% 66.667%, 16.667% 66.667%,
			16.667% 83.333%, 0 83.333%,
			0 16.667%, 16.667% 16.667%
		);
	}

	@media (max-width: 1023px) {
		/* gap 0: the photograph's own 24 margin IS the gap — the family's 32
		   would stack on it (56). */
		.rmd-s--features-01 .rmd-s-cards > .rmd-s-card {
			grid-template-columns: minmax(0, 1fr);
			gap: 0;
			padding: var(--spacing-24, 24px);
		}
		.rmd-s--features-01 .rmd-s-card > .rmd-s-card-media {
			grid-column: 1;
			grid-row: auto;
			width: 100%;
			height: auto;
			aspect-ratio: 1;
			margin: var(--spacing-24, 24px) 0 0;
		}
		/* One panel at a time, as on desktop: the family's 92% would show a
		   3px sliver of the next one past this 24 gap. The arrows say more. */
		.rmd-s--features-01 .rmd-s-cards {
			grid-auto-columns: 100%;
			margin-block: 0;
			padding-block: 0;
			margin-inline: 0;
			padding-inline: 0;
			gap: var(--spacing-24, 24px);
		}
		.rmd-s--features-01::before { display: none; }
	}
	/* The arrows go UNDER the title on a phone: beside it, at 48 apart, they
	   left the title 190 wide and five lines tall at 390. */
	@media (max-width: 640px) {
		.rmd-s--features-01 .rmd-s-headrow {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--spacing-24, 24px);
		}
	}

	/* ── FAQ 01 — 46948:9721, read 31/10 ────────────────────────────────────
	   Built from UI Blocks Features 12, restacked on the owner's call (03/11):
	   the heading and lead on top, the questions under them at the full
	   container width, 48 below the lead and 16 apart. Each row is the family's framed card (the
	   border, radius, fill and Elevation MD of .rmd-s-card, padding 24).

	   DELIBERATE DEPARTURES from Features 12, which draws four cards with an
	   h4 (32): each card is a native details/summary disclosure; the question
	   is Title LG (Poppins Medium 20) because 6 to 8 questions at 32 make a
	   wall; the answer is Body MD (Inter 16, 1.6); a 24px chevron sits right
	   of the question and turns over when the row is open; the first row is
	   open. The ::before decoration of Features 12 is not carried over.

	   The padding sits on the SUMMARY and the answer, not on the card, so the
	   whole strip is the click target rather than its one line of text. */
	.rmd-s--faq-01 .rmd-s-aside {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--spacing-48, 48px);
		align-items: start;
	}
	.rmd-s--faq-01 .rmd-s-faq {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-16, 16px);
		width: 100%;
	}
	.rmd-s--faq-01 .rmd-s-faq-item {
		min-width: 0;
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		background: var(--color-surface-canvas, #fff);
		box-shadow: var(--shadow-md, 0 3px 12px 0 rgba(0, 0, 0, .04));
	}
	.rmd-s--faq-01 .rmd-s-faq-q {
		display: flex;
		align-items: center;
		gap: var(--space-2xl, 24px);
		padding: var(--space-2xl, 24px);
		cursor: pointer;
		list-style: none;
	}
	.rmd-s--faq-01 .rmd-s-faq-q::-webkit-details-marker { display: none; }
	.rmd-s--faq-01 .rmd-s-faq-q:focus-visible {
		outline: 2px solid var(--color-border-control-focus, #2b7fff);
		outline-offset: -2px;
	}
	.rmd-s--faq-01 .rmd-s-faq-q-text {
		flex: 1 1 0;
		min-width: 0;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-title-lg, 20px);
		line-height: 1.4;
		letter-spacing: var(--font-letter-spacing-none, 0);
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s--faq-01 .rmd-s-faq-chev {
		display: flex;
		flex: none;
		width: 24px;
		height: 24px;
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--faq-01 .rmd-s-faq-chev svg { width: 100%; height: 100%; }
	.rmd-s--faq-01 .rmd-s-faq-item[open] .rmd-s-faq-chev svg { transform: rotate(180deg); }
	/* An open row sets its answer 12 under the question: the summary gives up
	   12 of its foot and the answer closes the card with the other 24. */
	.rmd-s--faq-01 .rmd-s-faq-item[open] > .rmd-s-faq-q { padding-bottom: var(--space-md, 12px); }
	.rmd-s--faq-01 .rmd-s-faq-a {
		padding: 0 var(--space-2xl, 24px) var(--space-2xl, 24px);
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-weight: 400;
		font-size: var(--font-size-body-md, 16px);
		line-height: var(--line-height-body, 1.6);
		letter-spacing: var(--font-letter-spacing-none, 0);
		color: var(--color-content-tertiary, #3b4b62);
	}
	.rmd-s--faq-01 .rmd-s-faq-a > * { margin: 0; }
	.rmd-s--faq-01 .rmd-s-faq-a > * + * { margin-top: var(--space-md, 12px); }
	.rmd-s--faq-01 .rmd-s-faq-a :is(ul, ol) { padding-left: var(--space-2xl, 24px); }
	.rmd-s--faq-01 .rmd-s-faq-a a {
		color: var(--color-accent-on-indigo, #4f39f6);
		text-decoration: underline;
	}
	/* A phone: Title MD in a tighter card. At 20 a long question runs four or
	   five lines in the width left beside the icon. */
	@media (max-width: 640px) {
		.rmd-s--faq-01 .rmd-s-faq-q {
			gap: var(--space-lg, 16px);
			padding: var(--space-xl, 20px);
		}
		.rmd-s--faq-01 .rmd-s-faq-item[open] > .rmd-s-faq-q { padding-bottom: var(--space-md, 12px); }
		.rmd-s--faq-01 .rmd-s-faq-q-text { font-size: var(--font-size-title-md, 18px); }
		.rmd-s--faq-01 .rmd-s-faq-a { padding: 0 var(--space-xl, 20px) var(--space-xl, 20px); }
	}

	/* ── Contact map 01 — mock-contact-map, read 02/11 ──────────────────────
	   Not read off a Figma node: the owner approved the section from the
	   agence-seo-maroc mock. One framed card on a canvas-alt band, two columns
	   2fr / 3fr. Left: the heading, a rating pill, icon rows, then the button
	   and a directions link. Right: the Google Maps embed, filling its column.
	   Below 900 the card stacks, the map under the words.

	   DEPARTURE from the mock: the card's radius is the DS's largest step (16),
	   not 24, which the token set has no step for. */
	.rmd-s--contact_map-01 .rmd-s-cm {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		overflow: hidden;
		background: var(--color-surface-canvas, #fff);
		border: 1px solid var(--color-border-surface-modals, #e2e8f0);
		border-radius: var(--radius-16, 16px);
		box-shadow: var(--shadow-lg, 0 4px 20px 0 rgba(0, 0, 0, .05)), 0 24px 48px -24px rgba(15, 23, 43, .18);
	}
	.rmd-s--contact_map-01 .rmd-s-cm--nomap { grid-template-columns: minmax(0, 1fr); }
	.rmd-s--contact_map-01 .rmd-s-cm-info {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xl, 24px);
		padding: var(--space-5xl, 48px);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-info .rmd-s-head { margin: 0; }
	.rmd-s--contact_map-01 .rmd-s-cm-info .rmd-s-title {
		line-height: 1.3;
	}
	.rmd-s--contact_map-01 .rmd-s-cm-rating {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: var(--space-sm, 8px);
		padding: var(--space-xs, 6px) var(--space-md, 12px);
		border-radius: var(--radius-full, 9999px);
		background: var(--color-surface-accent-orange, #fff7ed);
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 14px);
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-rating svg {
		width: 16px;
		height: 16px;
		color: var(--color-orange-500, #ff6900);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-list {
		display: grid;
		gap: var(--space-lg, 16px);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s--contact_map-01 .rmd-s-cm-list li {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		gap: var(--space-md, 12px);
		align-items: start;
	}
	.rmd-s--contact_map-01 .rmd-s-cm-ico {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: var(--radius-8, 8px);
		background: var(--color-surface-accent-orange, #fff7ed);
		color: var(--color-orange-500, #ff6900);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-ico svg { width: 20px; height: 20px; }
	.rmd-s--contact_map-01 .rmd-s-cm-label {
		display: block;
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-md, 12px);
		color: var(--color-content-secondary, #62748e);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-value {
		display: block;
		font-family: var(--font-family-secondary, Inter, system-ui, sans-serif);
		font-size: var(--font-size-body-md, 16px);
		line-height: 1.5;
		color: var(--color-content-primary, #0f172b);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-value a { color: inherit; text-decoration: none; }
	.rmd-s--contact_map-01 .rmd-s-cm-value a:hover { color: var(--color-intent-idle, #4f39f6); }
	.rmd-s--contact_map-01 .rmd-s-cm-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-lg, 16px);
		padding-top: var(--space-md, 12px);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-actions .rmd-btn--primary {
		background: var(--color-orange-500, #ff6900);
		border-color: var(--color-orange-500, #ff6900);
		color: var(--color-content-static-white, #fff);
		text-align: center;
		line-height: 1.3;
	}
	.rmd-s--contact_map-01 .rmd-s-cm-actions .rmd-btn--primary:hover {
		background: var(--color-orange-600, #f54900);
		border-color: var(--color-orange-600, #f54900);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-maplink {
		font-family: var(--font-family-primary, Poppins, system-ui, sans-serif);
		font-weight: 500;
		font-size: var(--font-size-label-lg, 14px);
		color: var(--color-intent-idle, #4f39f6);
		text-underline-offset: 2px;
	}
	.rmd-s--contact_map-01 .rmd-s-cm-map {
		position: relative;
		min-height: 520px;
		background: var(--color-surface-canvas-alt, #f5f8fb);
	}
	.rmd-s--contact_map-01 .rmd-s-cm-map iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	@media (max-width: 900px) {
		.rmd-s--contact_map-01 .rmd-s-cm { grid-template-columns: minmax(0, 1fr); }
		.rmd-s--contact_map-01 .rmd-s-cm-map { min-height: 360px; }
	}
	@media (max-width: 640px) {
		.rmd-s--contact_map-01 .rmd-s-cm-info { padding: var(--space-3xl, 32px) var(--space-2xl, 24px); }
		.rmd-s--contact_map-01 .rmd-s-cm-map { min-height: 300px; }
	}

	/* ── Logos 01 — mock-logos-01, read 03/11 ───────────────────────────────
	   Not read off a Figma node: the owner approved proposal 1 of the client
	   logos study ("Marquee centré", tools/pages/templates/logos), without its
	   overline and headline. A strip, not a band: 48 above and below, no heading
	   group. Both copies of the list sit in ONE row, so rmdMarqueeLtr (-50%)
	   lands on an identical frame; the row is at least twice the strip so a
	   short list still spreads edge to edge. The logos arrive sized by
	   rmd_section_logo() (one visual area each); this only inks them.
	   Mono ink: grayscale at 55%, full on hover, and the hover pauses the row.
	   Phone: 16 either side and about 65% of the computed size. Reduced motion:
	   still, no fade, the logos wrap centred 24 apart, the duplicate copy gone.

	   DEPARTURE from the mock: the logos are <img>, not background spans, so the
	   mock's invert(1) (its sample marks were white) is dropped. */
	.rmd-s--logos-01.rmd-s--sp-normal { padding-block: var(--spacing-48, 48px); }
	.rmd-s--logos-01.rmd-s--sp-flush { padding-bottom: var(--spacing-48, 48px); }
	.rmd-s--logos-01 .rmd-s-lg-marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.rmd-s--logos-01 .rmd-s-lg-row {
		display: flex;
		width: max-content;
		min-width: 200%;
		animation: rmdMarqueeLtr 48s linear infinite;
	}
	.rmd-s--logos-01 .rmd-s-lg-marquee:hover .rmd-s-lg-row { animation-play-state: paused; }
	.rmd-s--logos-01 .rmd-s-lg-list {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s--logos-01 .rmd-s-lg {
		flex: none;
		display: flex;
		align-items: center;
		margin: 0;
		padding-inline: var(--spacing-32, 32px);
	}
	.rmd-s--logos-01 .rmd-s-lg-img {
		display: block;
		max-width: none;
		filter: grayscale(1);
		opacity: .55;
		transition: opacity .2s ease;
	}
	.rmd-s--logos-01 .rmd-s-lg:hover .rmd-s-lg-img { opacity: 1; }
	@media (max-width: 760px) {
		.rmd-s--logos-01 .rmd-s-lg { padding-inline: var(--spacing-16, 16px); }
		.rmd-s--logos-01 .rmd-s-lg-img { zoom: .65; }
	}
	@media (prefers-reduced-motion: reduce) {
		.rmd-s--logos-01 .rmd-s-lg-marquee { -webkit-mask-image: none; mask-image: none; }
		.rmd-s--logos-01 .rmd-s-lg-row { animation: none; width: auto; min-width: 0; }
		.rmd-s--logos-01 .rmd-s-lg-list {
			flex: 1 1 auto;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: var(--spacing-24, 24px);
		}
		.rmd-s--logos-01 .rmd-s-lg-list[aria-hidden] { display: none; }
	}

	/* ── Logos 02 — mock-logos-02, read 03/11 ───────────────────────────────
	   Proposal 2 of the client logos study, without its left label and its
	   heading: Logos 01's marquee between two 1px lines, 40 of padding above and
	   below, 32 on a phone, 52s. The lines sit on the section so they run edge
	   to edge, and stay when the band is flush against the one above. */
	.rmd-s--logos-02 { border-block: 1px solid var(--color-border-surface-divider, rgb(202 213 226)); }
	.rmd-s--logos-02.rmd-s--sp-normal { padding-block: var(--space-4xl, 40px); }
	.rmd-s--logos-02.rmd-s--sp-flush { padding-bottom: var(--space-4xl, 40px); }
	.rmd-s--logos-02 .rmd-s-lg-marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.rmd-s--logos-02 .rmd-s-lg-row {
		display: flex;
		width: max-content;
		min-width: 200%;
		animation: rmdMarqueeLtr 52s linear infinite;
	}
	.rmd-s--logos-02 .rmd-s-lg-marquee:hover .rmd-s-lg-row { animation-play-state: paused; }
	.rmd-s--logos-02 .rmd-s-lg-list {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s--logos-02 .rmd-s-lg {
		flex: none;
		display: flex;
		align-items: center;
		margin: 0;
		padding-inline: var(--spacing-32, 32px);
	}
	.rmd-s--logos-02 .rmd-s-lg-img {
		display: block;
		max-width: none;
		filter: grayscale(1);
		opacity: .55;
		transition: opacity .2s ease;
	}
	.rmd-s--logos-02 .rmd-s-lg:hover .rmd-s-lg-img { opacity: 1; }
	@media (max-width: 760px) {
		.rmd-s--logos-02.rmd-s--sp-normal { padding-block: var(--spacing-32, 32px); }
		.rmd-s--logos-02.rmd-s--sp-flush { padding-bottom: var(--spacing-32, 32px); }
		.rmd-s--logos-02 .rmd-s-lg { padding-inline: var(--spacing-16, 16px); }
		.rmd-s--logos-02 .rmd-s-lg-img { zoom: .65; }
	}
	@media (prefers-reduced-motion: reduce) {
		.rmd-s--logos-02 .rmd-s-lg-marquee { -webkit-mask-image: none; mask-image: none; }
		.rmd-s--logos-02 .rmd-s-lg-row { animation: none; width: auto; min-width: 0; }
		.rmd-s--logos-02 .rmd-s-lg-list {
			flex: 1 1 auto;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: var(--spacing-24, 24px);
		}
		.rmd-s--logos-02 .rmd-s-lg-list[aria-hidden] { display: none; }
	}

	/* ── Logos 03 — mock-logos-03, read 03/11 ───────────────────────────────
	   Proposal 3, without its overline and headline: the marquee on canvas-alt
	   (the spec's surface), each logo inside a white framed tile, 176 x 96, 16
	   apart, 56s. The tile IS the list item, so the markup stays Logos 01's.
	   The logos are drawn at 75% of the computed size, in 70% mono ink.
	   Phone: tiles 128 x 72, logos at the same 65% of that. */
	.rmd-s--logos-03.rmd-s--sp-normal { padding-block: var(--spacing-48, 48px); }
	.rmd-s--logos-03.rmd-s--sp-flush { padding-bottom: var(--spacing-48, 48px); }
	.rmd-s--logos-03 .rmd-s-lg-marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.rmd-s--logos-03 .rmd-s-lg-row {
		display: flex;
		width: max-content;
		min-width: 200%;
		animation: rmdMarqueeLtr 56s linear infinite;
	}
	.rmd-s--logos-03 .rmd-s-lg-marquee:hover .rmd-s-lg-row { animation-play-state: paused; }
	.rmd-s--logos-03 .rmd-s-lg-list {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s--logos-03 .rmd-s-lg {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 176px;
		height: 96px;
		margin: 0 var(--spacing-8, 8px);
		padding: 0;
		border: 1px solid var(--color-border-surface-container, #f4f7fa);
		border-radius: var(--radius-8, 8px);
		background: var(--color-surface-canvas, #fff);
		box-shadow: var(--shadow-md, 0 3px 12px rgba(0, 0, 0, .04)); /* Elevation/MD */
	}
	.rmd-s--logos-03 .rmd-s-lg-img {
		display: block;
		max-width: none;
		zoom: .75;
		filter: grayscale(1);
		opacity: .7;
		transition: opacity .2s ease;
	}
	.rmd-s--logos-03 .rmd-s-lg:hover .rmd-s-lg-img { opacity: 1; }
	@media (max-width: 760px) {
		.rmd-s--logos-03 .rmd-s-lg { width: 128px; height: 72px; }
		.rmd-s--logos-03 .rmd-s-lg-img { zoom: calc(.75 * .65); }
	}
	@media (prefers-reduced-motion: reduce) {
		.rmd-s--logos-03 .rmd-s-lg-marquee { -webkit-mask-image: none; mask-image: none; }
		.rmd-s--logos-03 .rmd-s-lg-row { animation: none; width: auto; min-width: 0; }
		.rmd-s--logos-03 .rmd-s-lg-list {
			flex: 1 1 auto;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: var(--spacing-24, 24px);
		}
		.rmd-s--logos-03 .rmd-s-lg-list[aria-hidden] { display: none; }
	}

	/* ── Logos 04 — mock-logos-04, read 03/11 ───────────────────────────────
	   Proposal 4, without its overline and headline: two marquee rows, 24
	   apart, the second one running the other way (rmdMarqueeRtl) and starting
	   from the middle of the list (rmd_section_logos()). 44s and 52s, so they
	   drift out of step. Each row pauses on its own hover. Ink, sizing and
	   phone as Logos 01. Reduced motion: the first row wraps still, the second
	   one, which only repeats it, is gone. */
	.rmd-s--logos-04.rmd-s--sp-normal { padding-block: var(--spacing-48, 48px); }
	.rmd-s--logos-04.rmd-s--sp-flush { padding-bottom: var(--spacing-48, 48px); }
	.rmd-s--logos-04 .rmd-s-lg-marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.rmd-s--logos-04 .rmd-s-lg-row {
		display: flex;
		width: max-content;
		min-width: 200%;
		animation: rmdMarqueeLtr 44s linear infinite;
	}
	.rmd-s--logos-04 .rmd-s-lg-marquee:hover .rmd-s-lg-row { animation-play-state: paused; }
	.rmd-s--logos-04 .rmd-s-lg-list {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s--logos-04 .rmd-s-lg-marquee + .rmd-s-lg-marquee { margin-top: var(--spacing-24, 24px); }
	.rmd-s--logos-04 .rmd-s-lg-marquee--rev .rmd-s-lg-row {
		animation-name: rmdMarqueeRtl;
		animation-duration: 52s;
	}
	.rmd-s--logos-04 .rmd-s-lg {
		flex: none;
		display: flex;
		align-items: center;
		margin: 0;
		padding-inline: var(--spacing-32, 32px);
	}
	.rmd-s--logos-04 .rmd-s-lg-img {
		display: block;
		max-width: none;
		filter: grayscale(1);
		opacity: .55;
		transition: opacity .2s ease;
	}
	.rmd-s--logos-04 .rmd-s-lg:hover .rmd-s-lg-img { opacity: 1; }
	@media (max-width: 760px) {
		.rmd-s--logos-04 .rmd-s-lg { padding-inline: var(--spacing-16, 16px); }
		.rmd-s--logos-04 .rmd-s-lg-img { zoom: .65; }
	}
	@media (prefers-reduced-motion: reduce) {
		.rmd-s--logos-04 .rmd-s-lg-marquee { -webkit-mask-image: none; mask-image: none; }
		.rmd-s--logos-04 .rmd-s-lg-row { animation: none; width: auto; min-width: 0; }
		.rmd-s--logos-04 .rmd-s-lg-list {
			flex: 1 1 auto;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: var(--spacing-24, 24px);
		}
		.rmd-s--logos-04 .rmd-s-lg-list[aria-hidden] { display: none; }
		.rmd-s--logos-04 .rmd-s-lg-marquee--rev { display: none; }
	}

	/* ── Logos 05 — mock-logos-05, read 03/11 ───────────────────────────────
	   Proposal 5, without its overline and headline: Logos 01's marquee on the
	   brand navy, the primary button's own fill. The surface field has no navy
	   choice, so the band paints itself. The logos are forced white whatever
	   their colour, 80% and full on hover; the edge fade is a mask, so it
	   fades to the navy. 48s, phone as Logos 01. */
	.rmd-s--logos-05 { background: var(--color-button-primary-default, rgb(30 26 77)); }
	.rmd-s--logos-05.rmd-s--sp-normal { padding-block: var(--spacing-48, 48px); }
	.rmd-s--logos-05.rmd-s--sp-flush { padding-bottom: var(--spacing-48, 48px); }
	.rmd-s--logos-05 .rmd-s-lg-marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.rmd-s--logos-05 .rmd-s-lg-row {
		display: flex;
		width: max-content;
		min-width: 200%;
		animation: rmdMarqueeLtr 48s linear infinite;
	}
	.rmd-s--logos-05 .rmd-s-lg-marquee:hover .rmd-s-lg-row { animation-play-state: paused; }
	.rmd-s--logos-05 .rmd-s-lg-list {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.rmd-s--logos-05 .rmd-s-lg {
		flex: none;
		display: flex;
		align-items: center;
		margin: 0;
		padding-inline: var(--spacing-32, 32px);
	}
	.rmd-s--logos-05 .rmd-s-lg-img {
		display: block;
		max-width: none;
		filter: brightness(0) invert(1);
		opacity: .8;
		transition: opacity .2s ease;
	}
	.rmd-s--logos-05 .rmd-s-lg:hover .rmd-s-lg-img { opacity: 1; }
	@media (max-width: 760px) {
		.rmd-s--logos-05 .rmd-s-lg { padding-inline: var(--spacing-16, 16px); }
		.rmd-s--logos-05 .rmd-s-lg-img { zoom: .65; }
	}
	@media (prefers-reduced-motion: reduce) {
		.rmd-s--logos-05 .rmd-s-lg-marquee { -webkit-mask-image: none; mask-image: none; }
		.rmd-s--logos-05 .rmd-s-lg-row { animation: none; width: auto; min-width: 0; }
		.rmd-s--logos-05 .rmd-s-lg-list {
			flex: 1 1 auto;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: var(--spacing-24, 24px);
		}
		.rmd-s--logos-05 .rmd-s-lg-list[aria-hidden] { display: none; }
	}

	/* ── Logos 06 — mock-logos-06, read 03/11 ───────────────────────────────
	   Proposal 6, without its heading: nothing drifts. A scroll-snap rail of
	   framed tiles, 104 tall, 16 apart: six in view, four up to 1023, 2.4 up
	   to 640 so the next tile shows and invites the swipe. The logos are drawn
	   at 85% of the computed size and never wider than 80% of the tile. The
	   arrows are the theme's (data-arrows, sections.js), and with no heading
	   row they land under the rail. Nothing moves, so reduced motion has
	   nothing to undo. Phone: the logos at the same 65% again. */
	.rmd-s--logos-06.rmd-s--sp-normal { padding-block: var(--spacing-48, 48px); }
	.rmd-s--logos-06.rmd-s--sp-flush { padding-bottom: var(--spacing-48, 48px); }
	.rmd-s--logos-06 .rmd-s-lg-rail {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 5 * var(--spacing-16, 16px)) / 6);
		gap: var(--spacing-16, 16px);
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}
	.rmd-s--logos-06 .rmd-s-lg {
		scroll-snap-align: start;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 104px;
		margin: 0;
		padding: 0;
		border: 1px solid var(--color-border-surface-divider, rgb(202 213 226));
		border-radius: var(--radius-8, 8px);
		background: var(--color-surface-canvas, #fff);
	}
	.rmd-s--logos-06 .rmd-s-lg-img {
		display: block;
		max-width: 80%;
		object-fit: contain;
		zoom: .85;
		filter: grayscale(1);
		opacity: .6;
		transition: opacity .2s ease;
	}
	.rmd-s--logos-06 .rmd-s-lg:hover .rmd-s-lg-img { opacity: 1; }
	@media (max-width: 1023px) {
		.rmd-s--logos-06 .rmd-s-lg-rail { grid-auto-columns: calc((100% - 3 * var(--spacing-16, 16px)) / 4); }
	}
	@media (max-width: 760px) {
		.rmd-s--logos-06 .rmd-s-lg-img { zoom: calc(.85 * .65); }
	}
	@media (max-width: 640px) {
		.rmd-s--logos-06 .rmd-s-lg-rail { grid-auto-columns: calc((100% - var(--spacing-16, 16px)) / 2.4); }
	}

	/* ── Shortcode — not a DS section ───────────────────────────────────────
	   Whatever another plugin renders — an Elementor form or template —
	   placed between sections (rmd_render_section_shortcode()). `contained`
	   keeps it in the 1200 grid like every band; `full` runs it edge to edge
	   the way the bands that bleed do: the CHILD moves, never the wrap's
	   padding (tests/audit.py). body.rmd-body clips the overshoot. */
	.rmd-s--shortcode-full .rmd-s-shortcode { margin-inline: calc(50% - 50vw); }
	/* The admin preview draws this box instead of running the shortcode: its
	   <head> carries none of the plugin's assets. */
	.rmd-s-shortcode-preview {
		display: grid;
		gap: var(--spacing-8, 8px);
		justify-items: center;
		padding: var(--spacing-48, 48px) var(--spacing-24, 24px);
		border: 2px dashed var(--color-border-surface-divider, #cad5e2);
		border-radius: var(--radius-8, 8px);
		color: var(--color-content-tertiary, #3b4b62);
		font-size: var(--font-size-body-sm, 14px);
		text-align: center;
	}
	.rmd-s-shortcode-preview code {
		color: var(--color-content-primary, #0f172b);
		font-size: var(--font-size-body-xs, 12px);
		overflow-wrap: anywhere;
	}

	/* ── the DS Icon container, chosen per card (↪ Icons, 47005:356) ────────
	   The editor's override of the tile a variant draws; empty = the variant
	   decides. Read off the component: padding 20% of the box, the glyph
	   16/20/24/24/32, the square corner 4/4/6/6/7.2, the round one a circle,
	   the fill accent/indigo under an accent/on-indigo glyph. Strokes are the
	   component's 1.25/1.25/1.5/1.5/1.75 px, written in the icon's 24-unit
	   viewBox (24 x px / glyph). LAST in the file and as specific as the most
	   specific tile rule, so a choice always wins over the variant's own. */
	.rmd-s .rmd-s-card-ico.rmd-ico--s24 { width: 24px; height: 24px; padding: 4.8px; border-radius: var(--radius-4, 4px); }
	.rmd-s .rmd-s-card-ico.rmd-ico--s32 { width: 32px; height: 32px; padding: 6.4px; border-radius: var(--radius-4, 4px); }
	.rmd-s .rmd-s-card-ico.rmd-ico--s40 { width: 40px; height: 40px; padding: 8px; border-radius: var(--radius-6, 6px); }
	.rmd-s .rmd-s-card-ico.rmd-ico--s50 { width: 50px; height: 50px; padding: 10px; border-radius: var(--radius-6, 6px); }
	.rmd-s .rmd-s-card-ico.rmd-ico--s60 { width: 60px; height: 60px; padding: 12px; border-radius: 7.2px; }
	.rmd-s .rmd-s-card-ico.rmd-ico--s24 svg { width: 16px; height: 16px; stroke-width: 1.875; }
	.rmd-s .rmd-s-card-ico.rmd-ico--s32 svg { width: 20px; height: 20px; stroke-width: 1.5; }
	.rmd-s .rmd-s-card-ico.rmd-ico--s40 svg,
	.rmd-s .rmd-s-card-ico.rmd-ico--s50 svg { width: 24px; height: 24px; stroke-width: 1.5; }
	.rmd-s .rmd-s-card-ico.rmd-ico--s60 svg { width: 32px; height: 32px; stroke-width: 1.3125; }
	/* Shape after size, so "round" survives any size's square corner. A shape
	   on its own keeps the variant's size, and takes the component's corner. */
	.rmd-s .rmd-s-card-ico.rmd-ico--square { border-radius: var(--radius-6, 6px); }
	.rmd-s .rmd-s-card-ico.rmd-ico--square.rmd-ico--s24,
	.rmd-s .rmd-s-card-ico.rmd-ico--square.rmd-ico--s32 { border-radius: var(--radius-4, 4px); }
	.rmd-s .rmd-s-card-ico.rmd-ico--square.rmd-ico--s60 { border-radius: 7.2px; }
	.rmd-s .rmd-s-card-ico.rmd-ico--rounded { border-radius: 50%; }
	.rmd-s .rmd-s-card-ico[class*="rmd-ico--"] {
		background: var(--color-accent-indigo, #eef2ff);
		color: var(--color-accent-on-indigo, #4f39f6);
	}

}