/**
 * post — CPT stylesheet (W1 blog). Loaded by inc/enqueue.php ONLY on blog
 * articles and the blog listing (rmd_enqueue_cpt_style + rmd_is_blog_view).
 *
 * Ported from redesign-blog/ — _src/_shared.css, _src/_promo-card.css and the
 * per-page <style> blocks of blog-single / blog-archive, merged into the one
 * file the per-CPT convention asks for. The mockups stay the design source and
 * are never deployed; this is the theme's copy.
 *
 * ── Two things changed in the port, both load-bearing ───────────────────────
 * 1. EVERYTHING IS SCOPED TO `.rmd-bl`, the class both templates put on <main>.
 *    The mockups left the shared components unscoped because a standalone file
 *    has nothing to collide with. Here .rmd-card, .rmd-chip, .rmd-btn and
 *    .rmd-wrap share a page with parent Vault, UiCore and Elementor. Same rule
 *    as case_study.css, which scopes to `.rmd-case`.
 * 2. `--shadow-card` was RENAMED to `--sh-card` (and its pair to `--sh-lift`).
 *    main.css publishes a --shadow-card of its own, with a different value;
 *    redeclaring the name on .rmd-bl would silently shadow the theme token for
 *    everything inside the blog. Different value, different name.
 *
 * ── @layer components is load-bearing ───────────────────────────────────────
 * main.css establishes the layer order and puts its component rules in
 * `components`. Rejoining that layer keeps Tailwind UTILITIES winning over
 * these rules; an unlayered file would silently beat every utility class in the
 * templates. This file must load AFTER main.css — enqueue.php declares that
 * dependency, don't drop it.
 *
 * Hand-written plain CSS: no @apply, no Tailwind functions, only var(--token).
 * No build step — edit and deploy.
 */

@layer components {

/* ══════════════════════════════════════════════════════════════════════════
   TOKENS
   Mapped onto main.css's @theme tokens where one exists, so a palette change
   in src/tailwind.css reaches the blog too; the literal is the fallback that
   keeps this sheet readable on its own. The rest (gradients, the reading
   measure, the type scale) have no @theme equivalent and are declared here.
   ══════════════════════════════════════════════════════════════════════════ */

.rmd-bl {
	--ink: var(--color-ink, #041135);
	--purp: var(--color-purp, #3943FF);
	--purpsoft: var(--color-purpsoft, #F3F4FF);
	--slight: var(--color-slight, #596980);
	--bord: var(--color-bord, #E9EAF2);
	--redder: var(--color-redder, #E4004D);
	--orng: var(--color-orng, #FA9329);
	--nuk: var(--color-nuk, #F9FAFB);

	--grad-cta: linear-gradient(90deg, #D7045A 50%, #FC8831 100%);
	--grad-edge: linear-gradient(155deg, #3943FF 58%, #E4004D 85%, #FA9329 100%);
	--sh-card: 0 8px 26px rgba(4, 17, 53, .05);
	--sh-lift: 0 20px 40px -20px rgba(4, 17, 53, .18);

	/* THE READING MEASURE — and, since 13/08, the ONLY width in the column.
	   ~72 characters per line at 19px, inside the 45–75 the eye tracks without
	   losing its place. In pixels and not in `ch`: `ch` is the width of the "0",
	   and Poppins' zero is wide — 68ch came out at 714px, i.e. 95 characters, the
	   opposite of the intent.

	   IT USED TO BE 620, AGAINST A 720 COLUMN, and the 100px offset was the
	   mockup's deliberate rhythm: text short, figures wide. That reads as rhythm
	   in a page of prose with the occasional picture. It does not survive this
	   blog, where the articles carry tables and stat cards every few paragraphs —
	   the right edge then jumps 100px in and out on almost every block, and what
	   was meant as a breath reads as things failing to line up. One edge now:
	   text, figures, tables and components all stop at the same place. Restoring
	   the offset means putting --measure back to 620 and this to 680, nothing
	   more. */
	--measure: 680px;

	--lh-body: 1.9;
	--lh-text: 1.72;

	/* THE TYPE SCALE. Six roles, six values, for both templates. Any new size
	   must fit one of these roles, or the scale scatters again.
	     --t-label  uppercase eyebrows, chips, counters, table headers
	     --t-meta   dates, breadcrumbs, card footers, credits
	     --t-ui     buttons, filters, contents, search, arrow links, captions
	     --t-sec    card excerpts, tables, bio, promo-card copy
	     --t-lead   callouts, FAQ, key-points, steps
	     --t-body   the article's running text
	   Headings keep their own shorter run: 18 (card) · 21 (h3) · 23 (promo) ·
	   26 (section title), then the clamp()s of h1/h2. */
	--t-label: 11.5px;
	--t-meta: 13px;
	--t-ui: 15px;
	--t-sec: 16px;
	--t-lead: 17px;
	--t-body: 19px;

	--wrap: var(--container-content, 1200px);

	font-family: var(--font-sans, 'Poppins', ui-sans-serif, system-ui, sans-serif);
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

/* Neither the injected chrome nor parent Vault sets box-sizing, and every fixed
   height then comes out padding-taller than asked — the opening band set to
   440px measured 508. Scoped to .rmd-bl only: the header and footer are shared
   with the case studies and were laid out in content-box, so their model is not
   changed under their feet. */
.rmd-bl, .rmd-bl *, .rmd-bl *::before, .rmd-bl *::after { box-sizing: border-box; }

.rmd-bl :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
.rmd-bl :where(ul, ol) { list-style: none; }
/* Bold stops at 600 everywhere; without this a <strong> outside .rmd-prose falls
   back to the browser's `bolder` (700) and a fifth weight appears. `:where()` so
   component rules keep the upper hand. */
.rmd-bl :where(strong, b) { font-weight: 600; }
/* Neutralise the parent theme's link colour at ZERO specificity. Written
   `.rmd-bl a` this would be (0,1,1) and beat every single-class component rule:
   the white button on the navy promo card would inherit the card's white and
   disappear. `:where()` adds nothing, so the rule only applies by default. */
:where(.rmd-bl a) { color: inherit; }
.rmd-bl img { max-width: 100%; display: block; }

/* One focus rule for the whole design, declared once rather than added
   component by component — that is how one gets forgotten. */
.rmd-bl :where(a, button, summary, input, [tabindex]):focus-visible {
	outline: 3px solid var(--purp);
	outline-offset: 3px;
	border-radius: 4px;
}

.rmd-bl .rmd-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.rmd-bl .rmd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Chips ────────────────────────────────────────────────────────────────
   One chip in the whole blog, taken as-is from .rmd-cscard__chip. No colour
   code per section: the section is written in the chip's text, and tinting it
   would only add a second alphabet to learn. */
.rmd-bl .rmd-chip {
	display: inline-flex; align-items: center; align-self: flex-start;
	background: var(--purpsoft); color: var(--purp);
	font-size: var(--t-label); font-weight: 600; letter-spacing: .04em;
	padding: 5px 12px; border-radius: 9999px;
	text-decoration: none;
}
.rmd-bl a.rmd-chip:hover { background: #E7E9FF; }

/* The footer's eyebrow (.rmd-fd-lbl), in a light-background version. */
.rmd-bl .rmd-lbl {
	font-size: var(--t-label); font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--slight);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   The solid gradient is reserved for the primary action: the header button and
   the footer button already carry it, and a third decorative use would cost it
   its value as a signal. */
.rmd-bl .rmd-btn {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	border: 1px solid transparent; border-radius: 10px;
	padding: 14px 26px;
	font: inherit; font-size: var(--t-ui); font-weight: 500; line-height: 1.2;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: transform .15s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rmd-bl .rmd-btn svg { flex: 0 0 auto; }

.rmd-bl .rmd-btn--cta { color: #fff; background-image: var(--grad-cta); box-shadow: 0 14px 34px -18px rgba(215, 4, 90, .6); }
.rmd-bl .rmd-btn--cta:hover { opacity: .95; }
.rmd-bl .rmd-btn--cta::before {
	content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg); animation: rmdCtaShine 3s ease-in-out infinite;
}
.rmd-bl .rmd-btn--ghost { color: var(--ink); background: #fff; border-color: var(--bord); }
/* The secondary action turns violet, not grey: it sits on a white card where
   the old --nuk hover was invisible. Violet is the brand's link colour — it
   announces a target without reaching for the gradient next to it. */
.rmd-bl .rmd-btn--ghost:hover { color: var(--purp); background: var(--purpsoft); border-color: #C9CEFF; }
.rmd-bl .rmd-btn--onink { color: var(--ink); background: #fff; }
.rmd-bl .rmd-btn--onink:hover { background: rgba(255, 255, 255, .88); }
.rmd-bl .rmd-btn--outink { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .28); }
.rmd-bl .rmd-btn--outink:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.rmd-bl .rmd-btn--sm { padding: 10px 18px; }

/* The shine keyframes the CTA button calls, declared here as case_study.css and
   rmd-chrome.css each declare it — IDENTICALLY, and that is the point: a sheet
   that uses the animation carries its definition, so no stylesheet depends on
   another one being loaded to make its own button move. The mockup's build
   script had synthesised a 60% stop; the theme's value is 25%, and the theme's
   is the one that ships. */
@keyframes rmdCtaShine {
	0%   { left: -75%; }
	25%  { left: 125%; }
	100% { left: 125%; }
}

/* Arrow link — same red and same slide as .rmd-cscard__more. */
.rmd-bl .rmd-more {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--redder); font-size: var(--t-ui); font-weight: 600; text-decoration: none;
	/* 24px minimum height: the link measured 23px and missed the minimum touch
	   target (WCAG 2.5.8). min-height rather than padding — it clears the
	   threshold without moving what surrounds it. */
	min-height: 24px;
}
.rmd-bl .rmd-more svg { transition: transform .25s ease; }
.rmd-bl .rmd-more:hover svg { transform: translateX(4px); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.rmd-bl .rmd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-meta); color: var(--slight); }
.rmd-bl .rmd-crumbs a { text-decoration: none; }
.rmd-bl .rmd-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.rmd-bl .rmd-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.rmd-bl .rmd-crumbs li + li::before { content: '›'; color: #B9BFCE; }
.rmd-bl .rmd-crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ── Byline ───────────────────────────────────────────────────────────────
   The portrait carries the same red ring as the footer's expert band
   (.rmd-fd-face-img). That is what makes a face read as "someone to talk to"
   rather than stock illustration; the blog inherits the sign. */
.rmd-bl .rmd-by { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.rmd-bl .rmd-by__face { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--redder); }
.rmd-bl .rmd-by__who { font-size: var(--t-ui); font-weight: 600; }
.rmd-bl .rmd-by__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-meta); color: var(--slight); }
.rmd-bl .rmd-by__meta li + li::before { content: '·'; margin-right: 10px; color: #B9BFCE; }
.rmd-bl .rmd-by__meta li { display: inline-flex; align-items: center; }

/* ── Article card ─────────────────────────────────────────────────────────
   Twin of .rmd-cscard (assets/css/cpt/case_study.css): same radius, border,
   shadow and gradient-edge lift on hover. An article card and a case-study
   card must be able to share a grid without a visible seam. */
.rmd-bl .rmd-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--bord); border-radius: 16px; overflow: hidden;
	box-shadow: var(--sh-card);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rmd-bl .rmd-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.rmd-bl .rmd-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--nuk); overflow: hidden; }
.rmd-bl .rmd-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.rmd-bl .rmd-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.rmd-bl .rmd-card__title { margin-top: 14px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.rmd-bl .rmd-card__ex {
	margin-top: 10px; color: var(--slight); font-size: var(--t-sec); line-height: var(--lh-text);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rmd-bl .rmd-card__foot {
	display: flex; align-items: center; gap: 10px;
	margin-top: auto; padding-top: 16px;
	font-size: var(--t-meta); color: var(--slight);
}
.rmd-bl .rmd-card__foot .rmd-card__sep { color: #B9BFCE; }
.rmd-bl .rmd-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-lift);
	border-color: transparent;
	background-image: linear-gradient(#fff, #fff), var(--grad-edge);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

/* No featured image → the same branded placeholder a thumbnail-less case study
   renders (.rmd-cscard__media--empty + .rmd-cscard__placeholder-logo). The mark
   is an <img> placed by the template, not a background on the frame: the .5
   opacity must touch the LOGO only — on the frame it would wash out the tint
   behind it too. */
.rmd-bl .rmd-card__media--empty {
	background: linear-gradient(135deg, #EEF0FF 0%, #FBFCFE 55%, #F6F4FF 100%);
}
.rmd-bl .rmd-card__placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
}
.rmd-bl .rmd-card__placeholder-logo { width: 46%; max-width: 188px; height: auto; opacity: .5; }

/* Reading time — the one figure a reader checks before clicking. */
.rmd-bl .rmd-clock { display: inline-flex; align-items: center; gap: 6px; }
.rmd-bl .rmd-clock svg { width: 13px; height: 13px; flex: none; opacity: .8; }

/* ── The Google result ────────────────────────────────────────────────────
   The object of the trade, drawn in HTML rather than captured as an image: it
   resizes without pixelating, it translates, and it is fixed in one line the
   day Google redraws its results. One scale to set — everything is in em, the
   container gives the font-size (9.5px in a promo card, 14px as a figure).

   Kept in the theme even though no template prints one today: it is what the
   promo card below shows by default, and an editor pasting that markup into a
   Custom HTML block gets the component whole. */
.rmd-bl .rmd-serp {
	display: flex; flex-direction: column; gap: .85em;
	font-size: 13px;
	background: #fff; border: 1px solid var(--bord); border-radius: .9em; padding: 1em;
}
.rmd-bl .rmd-serp__q {
	display: flex; align-items: center; gap: .6em;
	border: 1px solid var(--bord); border-radius: 9999px; padding: .5em .9em;
	font-size: .92em; color: var(--slight);
}
.rmd-bl .rmd-serp__q svg { width: 1em; height: 1em; flex: none; opacity: .55; }
.rmd-bl .rmd-serp__r { display: grid; gap: .28em; }
.rmd-bl .rmd-serp__u { display: flex; align-items: center; gap: .5em; font-size: .76em; color: var(--slight); }
.rmd-bl .rmd-serp__fav { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background-image: var(--grad-edge); }
.rmd-bl .rmd-serp__h { font-size: .96em; font-weight: 500; line-height: 1.3; color: #1A0DAB; }
.rmd-bl .rmd-serp__d { font-size: .78em; line-height: 1.45; color: var(--slight); }
.rmd-bl .rmd-serp__r--win { position: relative; padding-left: .9em; }
.rmd-bl .rmd-serp__r--win::before {
	content: ''; position: absolute; left: 0; top: .1em; bottom: .1em;
	width: 3px; border-radius: 3px; background: var(--grad-cta);
}
.rmd-bl .rmd-serp__r--win .rmd-serp__h { color: var(--purp); }
/* Competitors: the shape is enough — text there would add nothing and invent
   brand names. */
.rmd-bl .rmd-serp__bar { height: .55em; border-radius: .3em; background: var(--bord); }
.rmd-bl .rmd-serp__bar--s { width: 55%; }
.rmd-bl .rmd-serp__bar--m { width: 78%; }
.rmd-bl .rmd-serp__pos {
	display: inline-flex; align-items: center; gap: .45em; align-self: flex-start;
	background: rgba(22, 179, 100, .1); color: #0F8F4E;
	font-size: .72em; font-weight: 600; letter-spacing: .03em;
	padding: .35em .8em; border-radius: 9999px;
}

/* ── Section heading ──────────────────────────────────────────────────────── */
.rmd-bl .rmd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.rmd-bl .rmd-head__t { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.rmd-bl .rmd-head__t .thin { font-weight: 300; color: var(--slight); }
.rmd-bl .rmd-head__s { margin-top: 10px; max-width: 58ch; font-size: var(--t-sec); line-height: var(--lh-text); color: var(--slight); }

/* ══════════════════════════════════════════════════════════════════════════
   THE PROMO CARD
   The requested component (reference: hims.com/blog). Five variants, ONE
   markup — only the container class changes.

     .rmd-promo             Google result on the right, two actions  (default)
     .rmd-promo--photo      the visual becomes an image
     .rmd-promo--flat       no visual, one action                    (mid-text)
     .rmd-promo--ink        navy, end of article
     .rmd-promo--stack      visual on top, for a grid cell

   It stops at four lines of copy. A card that grows becomes a section, and the
   reader skips it like an ad.

   NO TEMPLATE PRINTS ONE YET — there are no fields for it. The CSS ships so an
   editor can paste the markup into a Custom HTML block and get the component
   whole; giving it an authoring UI (ACF, or a block) is its own piece of work.
   Dosage, when that happens: one card per third of an article, three maximum,
   never before the first chapter.
   ══════════════════════════════════════════════════════════════════════════ */

.rmd-bl .rmd-promo {
	position: relative;
	display: flex; align-items: center; gap: 26px;
	background: #fff;
	border: 1px solid var(--bord); border-radius: 18px;
	padding: 22px;
	box-shadow: var(--sh-card);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* The lift is the case-study card's: gradient border, 3px rise. The card is not
   clickable as a whole (its two buttons go to two different places), so the lift
   fires on hover only, never on focus — it would announce a target that is not
   there. */
.rmd-bl .rmd-promo:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-lift);
	border-color: transparent;
	background-image: linear-gradient(#fff, #fff), var(--grad-edge);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.rmd-bl .rmd-promo__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rmd-bl .rmd-promo__t {
	margin-top: 12px;
	font-size: 23px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2;
	color: var(--ink);
	text-wrap: balance;
}
.rmd-bl .rmd-promo__p { margin-top: 8px; max-width: 46ch; font-size: var(--t-sec); line-height: var(--lh-text); color: var(--slight); }
.rmd-bl .rmd-promo__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Fixed width, stretched height: the cards do not all carry the same amount of
   copy, and a free-ratio image would make the height jump from one card to the
   next inside one article. */
.rmd-bl .rmd-promo__media {
	flex: 0 0 188px; align-self: stretch; min-height: 168px;
	position: relative; overflow: hidden;
	border-radius: 12px; background: #fff; border: 1px solid var(--bord);
}
.rmd-bl .rmd-promo .rmd-serp {
	height: 100%; justify-content: center;
	font-size: 9.5px; border: 0; border-radius: 0; padding: 1.2em;
}

/* ── Image variant ──────────────────────────────────────────────────────── */
.rmd-bl .rmd-promo--photo .rmd-promo__media {
	background: linear-gradient(135deg, #EEF0FF 0%, #FBFCFE 55%, #F6F4FF 100%);
	border-color: transparent;
}
.rmd-bl .rmd-promo--photo .rmd-promo__media img { position: relative; width: 100%; height: 100%; object-fit: cover; }

/* ── Navy variant — end of article ──────────────────────────────────────────
   Same navy as the footer, and the same gradient rule on the top edge: the card
   announces the contact band that follows instead of competing with it. */
.rmd-bl .rmd-promo--ink { background: var(--ink); border-color: var(--ink); color: #fff; overflow: hidden; }
.rmd-bl .rmd-promo--ink::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--grad-cta);
}
.rmd-bl .rmd-promo--ink .rmd-promo__t { color: #fff; }
.rmd-bl .rmd-promo--ink .rmd-promo__p { color: rgba(255, 255, 255, .62); }
.rmd-bl .rmd-promo--ink .rmd-chip { background: rgba(255, 255, 255, .1); color: #fff; }
.rmd-bl .rmd-promo--ink .rmd-promo__media { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.rmd-bl .rmd-promo--ink .rmd-serp { background: rgba(255, 255, 255, .06); }
.rmd-bl .rmd-promo--ink .rmd-serp__u { color: rgba(255, 255, 255, .6); }
.rmd-bl .rmd-promo--ink .rmd-serp__h { color: #fff; }
.rmd-bl .rmd-promo--ink .rmd-serp__bar { background: rgba(255, 255, 255, .16); }
/* No gradient border here: on navy it disappears. The card rises, that is all. */
.rmd-bl .rmd-promo--ink:hover { background-image: none; border-color: var(--ink); }

/* ── Visual-less variant ────────────────────────────────────────────────────
   For the mid-text breathers, where one more image would break the thread. The
   vertical gradient rule replaces the visual: the footer accordions' 16×2 mark,
   stood upright. */
.rmd-bl .rmd-promo--flat { gap: 20px; padding: 20px 24px; }
.rmd-bl .rmd-promo--flat::before {
	content: ''; flex: 0 0 3px; align-self: stretch;
	border-radius: 3px; background: var(--grad-cta);
}
.rmd-bl .rmd-promo--flat .rmd-promo__main { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }
.rmd-bl .rmd-promo--flat .rmd-promo__t { margin-top: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.rmd-bl .rmd-promo--flat .rmd-promo__acts { margin-top: 0; margin-left: auto; }

/* ── Grid-cell variant ──────────────────────────────────────────────────────
   The visual moves on top so the card lines up with the article cards beside
   it: same image height, same text start. */
.rmd-bl .rmd-promo--stack { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.rmd-bl .rmd-promo--stack .rmd-promo__media {
	flex: none; align-self: auto; min-height: 0; aspect-ratio: 16 / 10;
	display: flex; padding: 22px;
	border-radius: 0; border: 0; border-bottom: 1px solid var(--bord);
	background: linear-gradient(135deg, #EEF0FF 0%, #FBFCFE 55%, #F6F4FF 100%);
}
.rmd-bl .rmd-promo--stack .rmd-serp {
	height: auto; width: 100%; margin: auto;
	font-size: 11px; padding: 1em;
	background: #fff; border: 1px solid var(--bord); border-radius: 8px;
	box-shadow: 0 14px 34px -22px rgba(4, 17, 53, .4);
}
.rmd-bl .rmd-promo--stack .rmd-promo__main { padding: 22px; }
.rmd-bl .rmd-promo--stack .rmd-promo__t { font-size: 21px; }
.rmd-bl .rmd-promo--stack .rmd-promo__acts { margin-top: auto; padding-top: 18px; }

@media (max-width: 720px) {
	.rmd-bl .rmd-promo { flex-direction: column; align-items: stretch; gap: 18px; }
	/* The visual goes UNDER the copy: on a phone the screen opens on the promise,
	   not on a picture that pushes the title out of view. */
	.rmd-bl .rmd-promo__media { order: 2; flex: none; align-self: auto; min-height: 0; aspect-ratio: 16 / 9; }
	.rmd-bl .rmd-promo__main { order: 1; }
	.rmd-bl .rmd-promo__t { font-size: 21px; }
	.rmd-bl .rmd-promo__acts { width: 100%; }
	.rmd-bl .rmd-promo__acts .rmd-btn { flex: 1 1 auto; }

	.rmd-bl .rmd-promo--flat { flex-direction: row; }
	.rmd-bl .rmd-promo--flat .rmd-promo__acts { width: auto; margin-left: 0; }
	.rmd-bl .rmd-promo--flat .rmd-promo__main { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ARTICLE  (.rmd-bp)
   ══════════════════════════════════════════════════════════════════════════ */

/* `padding-top` and never the `padding` shorthand: .rmd-bp__top, .rmd-bp__grid
   and .rmd-bp__end ALSO carry .rmd-wrap, whose 24px sides a shorthand would
   reset to zero. Invisible on a wide screen — the page has its own margins —
   and the text touched the edge on a phone. */
/* The band now carries its own padding, so .rmd-bp__top starts flush against it
   and holds only the credits. */
.rmd-bl .rmd-bp__top { padding-top: 0; }
.rmd-bl .rmd-bp__h1 {
	margin-top: 16px; max-width: 900px;
	font-size: clamp(30px, 5vw, 48px); font-weight: 500;
	letter-spacing: -.03em; line-height: 1.06; color: var(--ink);
	text-wrap: balance;
}
/* An uncategorised post has no chip, so the title lands straight under the
   breadcrumb — where 16px is a collision rather than a gap. */
.rmd-bl .rmd-bp__coverin > nav + .rmd-bp__h1 { margin-top: 24px; }
/* The standfirst in 300: the theme already uses that weight for the light half
   of its headings (.thin in the footer and the case studies). Here it separates
   the promise from the body without changing family. */
.rmd-bl .rmd-bp__lead {
	margin-top: 20px; max-width: 62ch;
	font-size: clamp(17px, 2vw, 21px); font-weight: 300; line-height: 1.62; color: var(--slight);
}
/* The rule sits UNDER the credits, not over them: the band's own edge already
   closes what is above, and a second line two dozen pixels below it read as a
   mistake. Here it does the job that was always the point — it ends the credits
   and opens the article. */
.rmd-bl .rmd-bp__by {
	margin-top: 0; padding: 22px 0 24px;
	border-bottom: 1px solid var(--bord);
	justify-content: space-between;
}
.rmd-bl .rmd-bp__byin { gap: 14px; }
.rmd-bl .rmd-bp__share { display: flex; align-items: center; gap: 8px; }
.rmd-bl .rmd-bp__sh {
	position: relative;              /* anchor for the "Link copied" confirmation */
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	border: 1px solid var(--bord); background: #fff; color: var(--slight);
	cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.rmd-bl .rmd-bp__sh:hover { color: var(--ink); border-color: #D8DAE8; background: var(--nuk); }
.rmd-bl .rmd-bp__sh svg { width: 16px; height: 16px; fill: currentColor; }
/* The copy-link confirmation: the button says what just happened, where the
   click happened. A banner at the top of the screen would have to be hunted. */
.rmd-bl .rmd-bp__sh[data-copied]::after {
	content: attr(data-copied);
	position: absolute; margin-top: -62px;
	background: var(--ink); color: #fff; font-size: var(--t-label); font-weight: 500;
	padding: 6px 10px; border-radius: 7px; white-space: nowrap;
}

/* ── The opening band ──────────────────────────────────────────────────────
   Cover, breadcrumb, title and standfirst in ONE dark block, edge to edge. It
   sits OUTSIDE .rmd-wrap — a child of the container cannot break out of its
   1200px — so the band is full-bleed and its inner div carries the container.

   MIN-height, not height: the band has a floor, and the title decides the rest.
   A fixed height would either clip a four-line headline or leave a hole under a
   short one. The floor is in clamp() rather than a ratio for the reason the
   picture-only version already had: at full width a 3/1 is 480px on a 1440
   screen but 640px on a 1920, and the band ends up pushing the title out of view
   on the large displays it was supposed to flatter.

   `isolation: isolate` makes this a stacking context, which is what lets the
   image (-2) and the scrim (-1) sit BEHIND the text without either escaping the
   band or needing a z-index on the text itself. */
.rmd-bl .rmd-bp__cover {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: flex-end;
	min-height: clamp(360px, 44vw, 580px);
	background: var(--ink);
	color: #fff;
}
.rmd-bl .rmd-bp__cover > img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
}

/* THE SCRIM. A photo chosen for a blog post was not chosen to be read on, so
   the type cannot depend on it: the gradient is heaviest exactly where the text
   sits and lifts off towards the top, where the picture is still the subject.
   Values are the brand navy at opacity, not black — black over a warm photo
   reads as a printing fault, the navy reads as the site. */
.rmd-bl .rmd-bp__cover--photo::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(
		to top,
		rgba(4, 17, 53, .94) 0%,
		rgba(4, 17, 53, .86) 26%,
		rgba(4, 17, 53, .66) 55%,
		rgba(4, 17, 53, .46) 80%,
		rgba(4, 17, 53, .38) 100%
	);
}

/* No featured image: the band keeps its shape and swaps its ground for the
   brand's own light — the same two sweeps the footer and the case-study covers
   use, over the navy. One layout for both states, one set of text colours. */
.rmd-bl .rmd-bp__cover--flat {
	background:
		radial-gradient(120% 130% at 8% -20%, rgba(57, 67, 255, .55) 0%, rgba(57, 67, 255, 0) 58%),
		radial-gradient(90% 120% at 102% 108%, rgba(228, 0, 77, .42) 0%, rgba(228, 0, 77, 0) 62%),
		var(--ink);
}

/* The container. Bottom padding is the small one — the copy sits low in the
   band, near the article it introduces; the top padding only matters when a long
   title grows the band past its floor. */
.rmd-bl .rmd-bp__coverin {
	position: relative; width: 100%;
	padding-top: clamp(64px, 9vw, 128px);
	padding-bottom: clamp(30px, 3.4vw, 52px);
}

/* Text on the band. Every colour here is an override of the light-ground rule
   further up, kept together so the on-dark palette is one block to read rather
   than five exceptions scattered through the file. */
.rmd-bl .rmd-bp__cover .rmd-crumbs { color: rgba(255, 255, 255, .68); }
.rmd-bl .rmd-bp__cover .rmd-crumbs a:hover { color: #fff; }
.rmd-bl .rmd-bp__cover .rmd-crumbs li + li::before { color: rgba(255, 255, 255, .38); }
.rmd-bl .rmd-bp__cover .rmd-crumbs [aria-current] { color: #fff; }
/* THE CHIP, IN THE BRAND'S OWN VIOLET. Two earlier tries were wrong in the same
   way — both were pale. Translucent white read as grey on grey over a photo; the
   lavender pill from the archive cards is a LIGHT-ground treatment, and on the
   navy band a near-white pill is a hole punched in the picture rather than a
   label. Solid #3943FF is the mark itself: the colour of every link in the body,
   of the chapter numbers, of the chip's own text everywhere else.
   White on it is 6.1:1 — comfortably past AA at this size and weight.

   NOT the CTA gradient, deliberately, however "brand" it looks. It is reserved
   for the primary action (see the button block above): the header button and the
   footer button carry it, and spending it on a category label — an element that
   names something rather than asks for a click — is exactly the third decorative
   use that costs it its value as a signal. */
.rmd-bl .rmd-bp__cover .rmd-chip {
	margin-top: 20px;
	background: var(--purp); color: #fff;
}
.rmd-bl .rmd-bp__cover a.rmd-chip:hover { background: #2A34F0; }
.rmd-bl .rmd-bp__cover .rmd-bp__h1 { color: #fff; }
.rmd-bl .rmd-bp__cover .rmd-bp__lead { color: rgba(255, 255, 255, .76); }

/* ── The layout: reading column + rail ─────────────────────────────────────
   The column is 680px — the reading measure itself, see --measure — the rail
   290, the gap 56. The whole is centred, which leaves the column slightly left
   of the page centre: exactly the gutter the chapter numbers hang into (see
   .rmd-bp__h2).

   The column was 720 while the text inside it was 620. Collapsing the two to one
   value is what removes the 100px step the right edge used to make at every
   figure and every table. */
/* The gutter went 56 → 88 with the single-width column. It had never needed to
   be wide: the text used to stop 100px short of the column's edge, so the rail
   already had 156px of air in front of it and only the rare full-width figure
   came close. Now that every block runs to 680, that 156 became 56 for the whole
   article and the rail sat right on the text. The 88 buys back most of the
   breathing room while keeping the aligned edge that replaced it. */
.rmd-bl .rmd-bp__grid,
.rmd-bl .rmd-bp__end { display: grid; gap: 0 88px; grid-template-columns: minmax(0, 680px); justify-content: center; }
.rmd-bl .rmd-bp__grid { padding-top: 46px; }
@media (min-width: 1040px) {
	/* The end block (author, and anything added later) reuses the SAME layout,
	   second column included even though it puts nothing there: that is what
	   gives it exactly the body's left edge. Centred on 720px alone it landed
	   166px further right, and the page stepped sideways at the very moment the
	   reader finished reading. */
	.rmd-bl .rmd-bp__grid,
	.rmd-bl .rmd-bp__end { grid-template-columns: minmax(0, 680px) 290px; }
}

/* ── The table of contents ─────────────────────────────────────────────────
   THE sign of the page. A vertical rail that fills with the brand gradient as
   the reader descends: the footer accordions' mark, stood upright and put to
   work. Two things read at once — how much is left, and which chapter this is.

   It only appears from 1040px. Below that it becomes a collapsed <details> at
   the top of the article: on a phone one more column has nowhere to go. */
.rmd-bl .rmd-bp__rail { display: none; }
@media (min-width: 1040px) {
	.rmd-bl .rmd-bp__rail { display: block; grid-row: 1; grid-column: 2; }
	/* A LONG ARTICLE MUST NOT LOSE ITS LAST CHAPTERS. The rail is sticky, so its
	   height is whatever the list needs — and past a dozen chapters that is taller
	   than the screen. The overflow was simply unreachable: it sat below the fold
	   of a box that never scrolls, so on the longest guides (the ones that need a
	   table of contents most) the final entries could not be clicked at all.

	   Bounded to the viewport minus the sticky offset and a little air, it scrolls
	   on its own. `overscroll-behavior: contain` stops the page from taking over
	   the moment the list hits its end — without it, a reader scrolling the rail
	   gets thrown down the article the instant they reach the last chapter. */
	.rmd-bl .rmd-bp__railin {
		position: sticky; top: 112px;
		max-height: calc(100vh - 112px - 28px);
		overflow-y: auto;
		overscroll-behavior: contain;
		/* Room for the scrollbar so it never sits on the chapter titles, and a
		   thin one where the browser allows it — the rail is a quiet object. */
		padding-right: 6px;
		scrollbar-width: thin;
		scrollbar-color: var(--bord) transparent;
	}
	.rmd-bl .rmd-bp__railin::-webkit-scrollbar { width: 6px; }
	.rmd-bl .rmd-bp__railin::-webkit-scrollbar-track { background: transparent; }
	.rmd-bl .rmd-bp__railin::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 3px; }
	.rmd-bl .rmd-bp__railin:hover::-webkit-scrollbar-thumb { background: #D8DAE8; }
}
.rmd-bl .rmd-toc { position: relative; margin-top: 16px; padding-left: 20px; }
.rmd-bl .rmd-toc__track { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--bord); overflow: hidden; }
.rmd-bl .rmd-toc__fill {
	display: block; width: 100%; height: 0;
	background: linear-gradient(180deg, #D7045A 0%, #FC8831 100%);
	transition: height .12s linear;
}
.rmd-bl .rmd-toc ol { display: grid; }
.rmd-bl .rmd-toc__l {
	display: flex; gap: 11px; padding: 9px 0;
	font-size: var(--t-ui); line-height: 1.45; color: var(--slight); text-decoration: none;
	transition: color .18s ease, padding-left .18s ease;
}
.rmd-bl .rmd-toc__l:hover { color: var(--ink); padding-left: 5px; }
.rmd-bl .rmd-toc__l[aria-current="true"] { color: var(--ink); font-weight: 500; }
.rmd-bl .rmd-toc__n { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; color: #B9BFCE; padding-top: .18em; }
.rmd-bl .rmd-toc__l[aria-current="true"] .rmd-toc__n { color: var(--purp); }

/* Collapsed version, under 1040px. */
.rmd-bl .rmd-bp__toc-m { margin-top: 34px; border: 1px solid var(--bord); border-radius: 14px; background: var(--nuk); padding: 4px 18px; }
@media (min-width: 1040px) { .rmd-bl .rmd-bp__toc-m { display: none; } }
.rmd-bl .rmd-bp__toc-m > summary { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; }
.rmd-bl .rmd-bp__toc-m > summary::-webkit-details-marker { display: none; }
.rmd-bl .rmd-bp__toc-m > summary::before { content: ''; flex: 0 0 auto; width: 16px; height: 2px; border-radius: 2px; background: var(--grad-cta); }
.rmd-bl .rmd-bp__toc-m .rmd-bp__chev { margin-left: auto; transition: transform .22s ease; color: var(--slight); }
.rmd-bl .rmd-bp__toc-m[open] .rmd-bp__chev { transform: rotate(180deg); }
.rmd-bl .rmd-bp__toc-m .rmd-toc { margin: 0; padding: 0 0 12px 0; }
.rmd-bl .rmd-bp__toc-m .rmd-toc__track { display: none; }

/* ── The body ──────────────────────────────────────────────────────────────
   Two widths, not one. Text stops at the reading measure (--measure, 620px);
   figures, tables and promo cards take the column's full 720px and therefore
   overhang the text column. That offset is what gives the page its rhythm —
   without it everything falls on one edge and the article reads as a document. */
.rmd-bl .rmd-prose { max-width: var(--measure); font-size: var(--t-body); line-height: var(--lh-body); color: rgba(4, 17, 53, .84); }

/* THE FLOW PARENTS. The measure and the rhythm are applied to the CHILDREN of a
   flow parent, not to every descendant — a <p> inside a table cell or inside a
   promo card is not part of the article's flow and must keep its own spacing.
   `.rmd-prose` is the flow parent for the classic and block editors, whose
   content sits directly inside it. Elementor's text widget nests its paragraphs
   three wrappers deep, so `.elementor-widget-container` is a flow parent too;
   without it an Elementor-built article got the measure applied to the whole
   Elementor tree and no rhythm at all between its paragraphs. Two posts on
   staging are built that way — the same fix covers any future one. */
.rmd-bl .rmd-prose > *,
.rmd-bl .rmd-prose .elementor-widget-container > * { max-width: var(--measure); }
.rmd-bl .rmd-prose > figure,
.rmd-bl .rmd-prose > .rmd-tw,
.rmd-bl .rmd-prose > .wp-block-table,
.rmd-bl .rmd-prose > .rmd-promo,
.rmd-bl .rmd-prose .elementor-widget-container > figure,
.rmd-bl .rmd-prose .elementor-widget-container > .rmd-tw { max-width: none; }
.rmd-bl .rmd-prose > * + *,
.rmd-bl .rmd-prose .elementor-widget-container > * + * { margin-top: 40px; }

/* PASS-THROUGH WRAPPERS — markup that exists only to hold other markup. They get
   no measure of their own, or the article would be capped at 620px twice: once
   on the wrapper, once on the text inside it, and the figures could never reach
   the full column. Declared after the flow rules and with one class more, so it
   wins on both counts. */
.rmd-bl .rmd-prose :is(
	.elementor, .elementor-section, .elementor-container, .elementor-row,
	.elementor-column, .elementor-column-wrap, .elementor-widget-wrap,
	.elementor-element, .elementor-widget, .elementor-widget-container,
	.e-con, .e-con-inner, .e-child, .e-parent,
	.wp-block-group, .wp-block-group__inner-container, .entry-content
) { max-width: none; width: auto; }

.rmd-bl .rmd-prose strong, .rmd-bl .rmd-prose b { font-weight: 600; color: var(--ink); }
.rmd-bl .rmd-prose a:not(.rmd-btn):not(.rmd-more) {
	color: var(--purp); text-decoration: underline;
	text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.rmd-bl .rmd-prose a:not(.rmd-btn):not(.rmd-more):hover { text-decoration-thickness: 2px; }
.rmd-bl .rmd-prose ul { display: grid; gap: 12px; }
.rmd-bl .rmd-prose ul li { position: relative; padding-left: 24px; }
.rmd-bl .rmd-prose ul li::before {
	content: ''; position: absolute; left: 4px; top: .78em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--purp);
}
/* Ordered lists keep their numbers — the reset above removed the marker for
   every list, and a numbered procedure is the one place the number IS the
   information. */
.rmd-bl .rmd-prose ol { display: grid; gap: 12px; counter-reset: rmdol; }
.rmd-bl .rmd-prose ol li { position: relative; padding-left: 34px; counter-increment: rmdol; }
.rmd-bl .rmd-prose ol li::before {
	content: counter(rmdol) '.';
	position: absolute; left: 0; top: 0;
	font-weight: 600; color: var(--purp); font-variant-numeric: tabular-nums;
}
/* ── Sub-headings ────────────────────────────────────────────────────────────
   h2 is the CHAPTER and is styled as .rmd-bp__h2 further down — the class is put
   there by rmd_blog_prepare_content(), which also numbers it. The rule below is
   the floor for the ones it could not reach (an <h2> a page builder rewrote, an
   empty heading it skipped on purpose): a chapter title must never fall back to
   body text, whatever happened upstream.

   THE SPACING IS ASYMMETRIC ON PURPOSE. A heading with the same air above and
   below belongs to neither side and reads as one more paragraph — which is
   exactly how the sub-headings came out on staging. Each one gets a wide gap
   above and a narrow one to the text it introduces, so the hierarchy is legible
   from the shape of the page before a word is read. */
/* :where() so this contributes NO specificity: .rmd-bp__h2 stays the one
   authority on how a chapter title looks, and this only fills the gap when the
   class is absent. */
.rmd-bl .rmd-prose :where(h2) { font-size: clamp(24px, 3.2vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.rmd-bl .rmd-prose h3 { margin-top: 62px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--ink); }
.rmd-bl .rmd-prose h4 { margin-top: 50px; font-size: var(--t-lead); font-weight: 600; line-height: 1.4; color: var(--ink); }
.rmd-bl .rmd-prose h5 { margin-top: 42px; font-size: var(--t-sec); font-weight: 600; line-height: 1.45; color: var(--ink); }
/* h6 is the one heading level that cannot get bigger than the level above it, so
   it is set apart by weight and colour instead of size. */
.rmd-bl .rmd-prose h6 { margin-top: 38px; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--purp); }

.rmd-bl .rmd-prose :is(h2, h3, h4, h5, h6) + *,
.rmd-bl .rmd-prose .elementor-widget-container > :is(h2, h3, h4, h5, h6) + * { margin-top: 20px; }
/* Two headings in a row are a title and its subtitle, not two sections. 22px is
   more than the 16px a heading gives its own text and far less than the 50 it
   takes from the previous one — the pair reads as one unit. */
.rmd-bl .rmd-prose :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: 26px; }

.rmd-bl .rmd-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em; background: var(--nuk); border: 1px solid var(--bord);
	border-radius: 5px; padding: .12em .4em;
}

/* A figure, a table or one of the components is not a paragraph: it needs air on
   both sides. Sibling margins collapse, hence the rule on the NEXT element rather
   than a margin-bottom that would be swallowed.

   The list is every block an editor can insert from the library (inc/blocks.php)
   plus the two the editors produce on their own. `.rmd-cmp` is the wrapper a
   component carries when it is used OFF the blog — harmless here, and it means
   one rule covers both cases. */
.rmd-bl .rmd-prose > :is(figure, .rmd-tw, .rmd-promo, .rmd-key, .rmd-steps, .rmd-faq, .rmd-src, .rmd-quote, .rmd-cmp) { margin-top: 54px; }
.rmd-bl .rmd-prose > :is(figure, .rmd-tw, .rmd-promo, .rmd-key, .rmd-steps, .rmd-faq, .rmd-src, .rmd-quote, .rmd-cmp) + * { margin-top: 54px; }
/* …except before a chapter title, which opens its own space already. */
.rmd-bl .rmd-prose > :is(figure, .rmd-tw, .rmd-promo, .rmd-key, .rmd-steps, .rmd-faq, .rmd-src, .rmd-quote, .rmd-cmp) + :is(h2, .rmd-bp__h2) { margin-top: 76px; }

/* Chapter title. The number hangs in the gutter from 1240px — below that it
   goes back in line, or it would bite into the edge of the screen. */
.rmd-bl .rmd-bp__h2 {
	display: flex; gap: 14px; margin-top: 76px;
	font-size: clamp(24px, 3.2vw, 30px); font-weight: 600;
	letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
	scroll-margin-top: 112px;
}
.rmd-bl .rmd-bp__n {
	flex: 0 0 auto; padding-top: .55em;
	font-size: var(--t-meta); font-weight: 600; letter-spacing: .1em;
	color: var(--purp); font-variant-numeric: tabular-nums;
}
@media (min-width: 1240px) {
	.rmd-bl .rmd-bp__h2 { margin-left: -46px; }
	.rmd-bl .rmd-bp__n { width: 32px; }
}

/* ── Key points ────────────────────────────────────────────────────────────
   Lavender = information, white-with-border = action (the promo cards), navy =
   "let's talk". Three backgrounds, three intentions. Authored as a Custom HTML
   block for now. */
.rmd-bl .rmd-key { border: 1px solid #E3E5FF; border-radius: 16px; background: var(--purpsoft); padding: 24px 26px; }
.rmd-bl .rmd-key__h { font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--purp); }
/* Selectors deliberately as long as the body's (`.rmd-prose ul li`): at equal
   specificity order decides, and this block is declared later. Written shorter,
   the body's round bullet came back in front of the tick. */
.rmd-bl .rmd-key ul { display: grid; gap: 11px; margin-top: 16px; }
.rmd-bl .rmd-key ul li { position: relative; padding-left: 26px; font-size: var(--t-lead); line-height: var(--lh-text); color: rgba(4, 17, 53, .84); }
.rmd-bl .rmd-key ul li::before {
	content: ''; position: absolute; left: 2px; top: .42em;
	width: 11px; height: 6px; border-radius: 0;
	border-left: 2px solid var(--purp); border-bottom: 2px solid var(--purp);
	background: none; transform: rotate(-45deg);
}

/* ── Aside callout ─────────────────────────────────────────────────────────
   The label is the case studies' eyebrow (`.rmd-case .eyebrow`): white pill,
   rule, violet text and the house arrow at the end — astride the panel's edge.
   Background --nuk and not lavender: lavender is taken by the key points, and a
   practical aside ranks one notch below. */
.rmd-bl .rmd-tip {
	position: relative;
	border: 1px solid var(--bord); border-radius: 16px;
	background: var(--nuk); padding: 32px 26px 26px;
}
.rmd-bl .rmd-tip__l {
	position: absolute; top: 0; left: 22px; transform: translateY(-50%);
	display: inline-flex; align-items: center; gap: 12px;
	border-radius: 9999px; border: 1px solid var(--bord); background: #fff;
	padding: 8px 13px 8px 18px;
	font-size: var(--t-meta); font-weight: 500; letter-spacing: -.01em; color: var(--purp);
	box-shadow: var(--sh-card);
}
/* The brand arrow as a background rather than markup: the label stays a single
   text node, read as-is by a screen reader. */
.rmd-bl .rmd-tip__l::after {
	content: ''; flex: 0 0 auto; width: 28px; height: 17px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18' fill='none'%3E%3Cpath d='M2 9h24m0 0-6-6m6 6-6 6' stroke='%233943FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.rmd-bl .rmd-tip p { font-size: var(--t-lead); line-height: var(--lh-text); color: var(--slight); }
.rmd-bl .rmd-tip p strong { color: var(--ink); font-weight: 600; }
/* The pill overhangs the top edge: without this reserve it bites into the
   preceding paragraph. */
.rmd-bl .rmd-prose > .rmd-tip { margin-top: 48px; }
.rmd-bl .rmd-prose > .rmd-tip + * { margin-top: 42px; }
@media (max-width: 620px) {
	.rmd-bl .rmd-tip { padding: 30px 20px 22px; }
	.rmd-bl .rmd-tip__l { left: 16px; padding-left: 15px; font-size: 13px; }
}

/* ── Numbered steps ────────────────────────────────────────────────────────
   Numbered because the order carries the information. The counter comes from
   CSS, not the markup — inserting a step in the middle costs no renumbering. */
.rmd-bl .rmd-steps { counter-reset: rmdstep; display: grid; gap: 2px; }
.rmd-bl .rmd-steps li { counter-increment: rmdstep; position: relative; padding: 18px 0 18px 52px; border-top: 1px solid var(--bord); }
.rmd-bl .rmd-steps li:last-child { border-bottom: 1px solid var(--bord); }
.rmd-bl .rmd-steps li::before {
	content: counter(rmdstep, decimal-leading-zero);
	position: absolute; left: 0; top: 19px;
	font-size: var(--t-meta); font-weight: 600; letter-spacing: .08em;
	color: var(--purp); font-variant-numeric: tabular-nums;
}
.rmd-bl .rmd-steps b { display: block; font-size: var(--t-lead); font-weight: 600; color: var(--ink); }
.rmd-bl .rmd-steps p { margin-top: 6px; font-size: var(--t-sec); line-height: var(--lh-text); color: var(--slight); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.rmd-bl .rmd-tw { overflow-x: auto; border: 1px solid var(--bord); border-radius: 14px; }
.rmd-bl .rmd-table { width: 100%; border-collapse: collapse; font-size: var(--t-sec); line-height: var(--lh-text); min-width: 660px; }
.rmd-bl .rmd-table th, .rmd-bl .rmd-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--bord); }
/* The first column carries the screen reading ("Impressions ↗ · clicks →"):
   broken across two lines on the middot it becomes unreadable. So it never
   wraps — the table scrolls instead. */
.rmd-bl .rmd-table tbody td:first-child { white-space: nowrap; }
.rmd-bl .rmd-table thead th { background: var(--nuk); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slight); }
.rmd-bl .rmd-table tbody tr:last-child td { border-bottom: 0; }
.rmd-bl .rmd-table td b { color: var(--ink); font-weight: 600; }
.rmd-bl .rmd-table .rmd-ok { color: #0F8F4E; font-weight: 600; }

/* ── Pull quote ────────────────────────────────────────────────────────────
   No panel and no drawn quote mark: a gradient rule above, and the text
   breathes on white. Same choice as the case studies' client quotes. */
.rmd-bl .rmd-quote { padding-top: 26px; }
.rmd-bl .rmd-quote::before { content: ''; display: block; width: 54px; height: 3px; border-radius: 3px; background: var(--grad-cta); margin-bottom: 20px; }
.rmd-bl .rmd-quote p { font-size: clamp(20px, 2.4vw, 23px); font-weight: 300; line-height: 1.55; letter-spacing: -.01em; color: var(--ink); }
.rmd-bl .rmd-quote footer { margin-top: 14px; font-size: var(--t-meta); color: var(--slight); }

/* ── FAQ ───────────────────────────────────────────────────────────────────
   Native <details>: the answers stay in the DOM for Google and work without
   JavaScript. Same grammar as the footer accordions. Rank Math owns the
   FAQPage schema — the theme emits none. */
.rmd-bl .rmd-faq { margin-top: 26px; }
.rmd-bl .rmd-faq details { border-top: 1px solid var(--bord); }
.rmd-bl .rmd-faq details:last-of-type { border-bottom: 1px solid var(--bord); }
.rmd-bl .rmd-faq summary {
	display: flex; align-items: center; gap: 14px; padding: 18px 4px;
	cursor: pointer; list-style: none;
	font-size: var(--t-lead); font-weight: 500; color: var(--ink);
	transition: padding-left .18s ease;
}
.rmd-bl .rmd-faq summary::-webkit-details-marker { display: none; }
.rmd-bl .rmd-faq summary:hover { padding-left: 10px; }
.rmd-bl .rmd-faq summary::before { content: ''; flex: 0 0 auto; width: 16px; height: 2px; border-radius: 2px; background: var(--grad-cta); }
.rmd-bl .rmd-faq__chev {
	margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	border: 1px solid var(--bord); color: var(--slight);
	transition: transform .22s ease, border-color .18s ease, color .18s ease;
}
.rmd-bl .rmd-faq details[open] .rmd-faq__chev { transform: rotate(180deg); color: var(--ink); border-color: #D8DAE8; }
.rmd-bl .rmd-faq__a { padding: 0 4px 22px 34px; font-size: var(--t-sec); line-height: var(--lh-text); color: var(--slight); }

/* ── Sources ─────────────────────────────────────────────────────────────── */
.rmd-bl .rmd-src { margin-top: 20px; counter-reset: rmdsrc; display: grid; gap: 12px; }
.rmd-bl .rmd-src li { counter-increment: rmdsrc; position: relative; padding-left: 34px; font-size: var(--t-ui); line-height: var(--lh-text); color: var(--slight); }
.rmd-bl .rmd-src li::before {
	content: counter(rmdsrc);
	position: absolute; left: 0; top: 1px;
	width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--nuk); border: 1px solid var(--bord);
	font-size: var(--t-label); font-weight: 600; color: var(--slight); font-variant-numeric: tabular-nums;
}
.rmd-bl .rmd-src a { color: var(--purp); text-decoration: underline; text-underline-offset: 3px; }

/* ── Author box ──────────────────────────────────────────────────────────── */
.rmd-bl .rmd-auth { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; border: 1px solid var(--bord); border-radius: 16px; background: var(--nuk); padding: 26px; }
.rmd-bl .rmd-auth__face { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top center; border: 3px solid var(--redder); }
.rmd-bl .rmd-auth__b { flex: 1 1 260px; }
.rmd-bl .rmd-auth__n { font-size: var(--t-lead); font-weight: 600; color: var(--ink); }
.rmd-bl .rmd-auth__r { font-size: var(--t-meta); color: var(--purp); font-weight: 500; margin-top: 2px; }
.rmd-bl .rmd-auth__p { margin-top: 12px; font-size: var(--t-sec); line-height: var(--lh-text); color: var(--slight); }
.rmd-bl .rmd-auth__l { margin-top: 14px; }

/* ── End blocks ──────────────────────────────────────────────────────────── */
.rmd-bl .rmd-bp__end { padding-top: 56px; }
.rmd-bl .rmd-bp__endin > * + * { margin-top: 44px; }
.rmd-bl .rmd-rel { padding: 64px 0 88px; border-top: 1px solid var(--bord); margin-top: 64px; }
.rmd-bl .rmd-rel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
@media (max-width: 900px) { .rmd-bl .rmd-rel__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rmd-bl .rmd-rel__grid { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
	.rmd-bl .rmd-bp__by { gap: 14px; }
	/* THE AIR COMES BACK DOWN ON A PHONE. 40px between paragraphs is generous on a
	   720px column and oppressive on a 350px one: the same gap is a rest there and
	   half a screen of nothing here, and the reader loses the thread between two
	   blocks they can no longer see at once. The desktop rhythm is the one that was
	   widened; this keeps the phone at what it already read well at. */
	.rmd-bl .rmd-prose > * + *,
	.rmd-bl .rmd-prose .elementor-widget-container > * + * { margin-top: 30px; }
	.rmd-bl .rmd-prose h3 { margin-top: 46px; }
	.rmd-bl .rmd-prose h4 { margin-top: 38px; }
	.rmd-bl .rmd-bp__h2 { margin-top: 56px; }
	.rmd-bl .rmd-prose > :is(figure, .rmd-tw, .rmd-promo, .rmd-key, .rmd-steps, .rmd-faq, .rmd-src, .rmd-quote, .rmd-cmp) { margin-top: 38px; }
	.rmd-bl .rmd-prose > :is(figure, .rmd-tw, .rmd-promo, .rmd-key, .rmd-steps, .rmd-faq, .rmd-src, .rmd-quote, .rmd-cmp) + * { margin-top: 38px; }
	/* On a phone the band is the whole first screen. Its floor comes down and the
	   share row drops under the byline instead of squeezing beside it. */
	.rmd-bl .rmd-bp__cover { min-height: clamp(320px, 78vw, 430px); }
	.rmd-bl .rmd-bp__share { margin-left: -2px; }
	/* The body drops a notch on a phone — carried by the TOKEN, not by
	   .rmd-prose: everything expressed in --t-body follows without being asked. */
	.rmd-bl { --t-body: 17.5px; }
	.rmd-bl .rmd-bp__end { padding-top: 40px; }
	.rmd-bl .rmd-rel { padding: 44px 0 64px; margin-top: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EDITOR BRIDGE
   The mockup's article body was hand-written markup. A real one is not: the 193
   posts on this site were written in THREE different editors, and all three are
   still in the archive.

     classic     bare <h2>, <p>, <table>, <img> — no classes at all (~2/3)
     block       .wp-block-heading, <figure class="wp-block-table">, … (~1/3)
     Elementor   the same tags, buried under .elementor-widget-container

   So nothing here may key on a block class alone. Each rule below is written
   against the ELEMENT, and the block/builder classes only ever ADD to it. That
   is what was missing: the port styled `.wp-block-table` and left the classic
   editor's bare <table> to the parent theme, which drew it as five columns of
   naked text — the "tables not styled" report.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Images ──────────────────────────────────────────────────────────────────
   Bare <img> included: the classic editor drops one straight into a <p>, with a
   width/height attribute pair that has nothing to do with this column. */
.rmd-bl .rmd-prose img {
	max-width: 100%; height: auto; border-radius: 14px;
}
.rmd-bl .rmd-prose figure img { display: block; }
.rmd-bl .rmd-prose figcaption {
	margin-top: 16px; font-size: var(--t-ui); line-height: var(--lh-text); color: var(--slight);
}
.rmd-bl .rmd-prose figcaption b, .rmd-bl .rmd-prose figcaption strong { color: var(--ink); font-weight: 600; }
.rmd-bl .rmd-prose .wp-block-image { margin-left: 0; margin-right: 0; }
/* An image alone in a paragraph is a figure that lost its frame — give it the
   figure's full column rather than the text measure. */
.rmd-bl .rmd-prose > p:has(> img:only-child) { max-width: none; }

/* ── Tables ──────────────────────────────────────────────────────────────────
   Three wrappers, one design: <figure class="wp-block-table"> from the block
   editor, .rmd-tw from the components below, and .rmd-tw again from
   rmd_blog_wrap_bare_tables() (inc/blog.php), which frames the classic editor's
   unwrapped tables at render time. The frame has to be a box that is NOT the
   table: `overflow-x: auto` on a <table> loses the border-radius. */
.rmd-bl .rmd-prose .wp-block-table,
.rmd-bl .rmd-prose .rmd-tw {
	overflow-x: auto; border: 1px solid var(--bord); border-radius: 14px;
}
.rmd-bl .rmd-prose table {
	width: 100%; border-collapse: collapse;
	font-size: var(--t-sec); line-height: var(--lh-text);
}
.rmd-bl .rmd-prose th,
.rmd-bl .rmd-prose td {
	text-align: left; padding: 14px 18px;
	border: 0; border-bottom: 1px solid var(--bord);
	vertical-align: top;
}
.rmd-bl .rmd-prose thead th {
	background: var(--nuk);
	font-size: var(--t-label); font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--slight);
}
.rmd-bl .rmd-prose tbody tr:last-child td { border-bottom: 0; }
/* The classic editor writes no <thead>: the header row is the first <tr>, and
   the only thing marking it is a <b> in every cell. Read it as the header — but
   only the tint and the weight, never the uppercase transform, because if the
   guess is wrong that row is a sentence of real content shouting. */
.rmd-bl .rmd-prose table:not(:has(thead)) tbody tr:first-child td {
	background: var(--nuk); color: var(--ink); font-weight: 600;
}
/* Cells hold paragraphs in classic markup — one per line of text. Left alone
   they inherit the article's 1.9 line-height and 32px rhythm and each row grows
   to three times its height. */
.rmd-bl .rmd-prose th > p,
.rmd-bl .rmd-prose td > p { max-width: none; line-height: var(--lh-text); }
.rmd-bl .rmd-prose th > p + p,
.rmd-bl .rmd-prose td > p + p { margin-top: 6px; }
.rmd-bl .rmd-prose td b, .rmd-bl .rmd-prose td strong { color: var(--ink); font-weight: 600; }
/* The caption belongs under the frame, not inside the scroll area. */
.rmd-bl .rmd-prose .wp-block-table figcaption { padding: 0 18px 16px; margin-top: 12px; }

/* ── Quotes — core's blockquote, given the pull quote's gradient rule. ─────── */
.rmd-bl .rmd-prose blockquote { padding-top: 26px; }
.rmd-bl .rmd-prose blockquote::before { content: ''; display: block; width: 54px; height: 3px; border-radius: 3px; background: var(--grad-cta); margin-bottom: 20px; }
.rmd-bl .rmd-prose blockquote p { font-size: clamp(20px, 2.4vw, 23px); font-weight: 300; line-height: 1.55; letter-spacing: -.01em; color: var(--ink); }
.rmd-bl .rmd-prose blockquote cite { display: block; margin-top: 14px; font-size: var(--t-meta); font-style: normal; color: var(--slight); }

/* Separator and code block. */
.rmd-bl .rmd-prose hr, .rmd-bl .rmd-prose .wp-block-separator { border: 0; border-top: 1px solid var(--bord); margin-top: 54px; }
.rmd-bl .rmd-prose pre {
	overflow-x: auto; padding: 18px 20px; border-radius: 12px;
	background: var(--nuk); border: 1px solid var(--bord);
	font-size: var(--t-sec); line-height: 1.6;
}
.rmd-bl .rmd-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Embeds keep their aspect ratio inside the column. The bare <iframe> case is
   the classic editor's: a YouTube embed pasted as raw markup carries a fixed
   560×315 and nothing else, so it juts out of a 620px column on desktop and off
   the screen on a phone. 16/9 rather than the attribute pair, because the
   attributes are what is wrong. */
.rmd-bl .rmd-prose iframe {
	display: block; width: 100%; max-width: 100%; border: 0; border-radius: 14px;
}
.rmd-bl .rmd-prose iframe:not([height]),
.rmd-bl .rmd-prose .wp-block-embed iframe { aspect-ratio: 16 / 9; height: auto; }
/* An embed is a figure, not a sentence: it takes the whole column. */
.rmd-bl .rmd-prose > .wp-block-embed,
.rmd-bl .rmd-prose > iframe,
.rmd-bl .rmd-prose > p:has(> iframe:only-child) { max-width: none; }

/* Core's alignment classes: full/wide are as wide as the column allows, and no
   wider — this is a 720px reading column, not a page builder. */
.rmd-bl .rmd-prose .alignfull,
.rmd-bl .rmd-prose .alignwide { max-width: none; }
.rmd-bl .rmd-prose .aligncenter { margin-left: auto; margin-right: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   THE ARCHIVE  (.rmd-ba)
   Reuses the case-study archive's frame: same width, same breathing room, same
   pagination. The site's two archives must look alike.
   ══════════════════════════════════════════════════════════════════════════ */

.rmd-bl.rmd-ba { padding-bottom: 88px; }

/* ── Opening band ──────────────────────────────────────────────────────────
   Full screen width, like the article's cover: the blog's two pages open on the
   same gesture. It sits OUTSIDE .rmd-wrap — its children carry the container,
   it does not.

   ONE column since 13/08. It was two — the title on the left, a search box on
   the right, section filter chips on a rule under both. Search and filters were
   removed; what is left is a title, and a title does not need a grid. Putting
   them back means bringing back the second column (minmax(0, 400px)), the 940px
   single-column override, and the .rmd-ba__ftbar row under the band. */
/* THE BAND NEEDS A FLOOR NOW THAT IT ONLY HOLDS A TITLE. With the search box and
   the filter row gone there was nothing left to give it height, and it collapsed
   to 162px — a strip, against the article's 580px band. The two pages stopped
   opening on the same gesture, which is the whole reason this band exists, and
   the brand curves behind it had no room to read as anything but a smudge.

   A floor, not a fixed height: a long term name or a two-line standfirst still
   grows it. ~345px at 1440 — about three fifths of the article's band, which is
   the right relation. A listing announces, a cover carries. */
.rmd-bl .rmd-ba__hero {
	position: relative; overflow: hidden;
	display: flex; align-items: center;
	min-height: clamp(230px, 24vw, 360px);
	background: #fff; border-bottom: 1px solid var(--bord);
	padding-top: 32px;
}
.rmd-bl .rmd-ba__bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
/* The content goes back above the background — without this it disappears
   under the SVG. `width: 100%` because the wrap is now a flex ITEM: without it
   it shrinks to its longest line and the whole band lurches to the centre. */
.rmd-bl .rmd-ba__hero > .rmd-wrap { position: relative; z-index: 1; width: 100%; }
.rmd-bl .rmd-ba__heroin { padding: 26px 0 30px; }

.rmd-bl .rmd-ba__h1 {
	font-size: clamp(32px, 5vw, 48px); font-weight: 500;
	letter-spacing: -.03em; line-height: 1.08; color: var(--ink);
}
.rmd-bl .rmd-ba__h1 .thin { font-weight: 300; color: var(--slight); }
.rmd-bl .rmd-ba__sub { margin-top: 16px; max-width: 46ch; font-size: var(--t-lead); line-height: var(--lh-text); color: var(--slight); }

/* ── Featured ──────────────────────────────────────────────────────────────
   The same card, laid on its side. Not one more component: the format changes,
   not the nature of the object — and the reader recognises the card they will
   meet again in the grid. */
.rmd-bl .rmd-ba__lead { margin-top: 46px; }
.rmd-bl .rmd-ba__lead .rmd-card { margin-top: 16px; }
/* The grid is carried by the LINK, not the card: `display:contents` on an <a>
   removes it from the accessibility tree in several browsers — the title would
   stay clickable with a mouse and invisible to a keyboard. */
.rmd-bl .rmd-card--wide .rmd-card__link { display: grid; grid-template-columns: 1.05fr 1fr; }
.rmd-bl .rmd-card--wide .rmd-card__media { aspect-ratio: auto; height: 100%; min-height: 260px; }
.rmd-bl .rmd-card--wide .rmd-card__body { padding: 34px 36px; justify-content: center; }
.rmd-bl .rmd-card--wide .rmd-card__title { margin-top: 16px; font-size: clamp(21px, 2.4vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.rmd-bl .rmd-card--wide .rmd-card__ex { margin-top: 14px; font-size: var(--t-sec); -webkit-line-clamp: 4; }
.rmd-bl .rmd-card--wide .rmd-card__foot { margin-top: 22px; padding-top: 0; }
@media (max-width: 820px) {
	.rmd-bl .rmd-card--wide .rmd-card__link { grid-template-columns: 1fr; }
	.rmd-bl .rmd-card--wide .rmd-card__media { aspect-ratio: 16 / 10; min-height: 0; }
	.rmd-bl .rmd-card--wide .rmd-card__body { padding: 24px 22px 22px; }
}

/* ── The grid ──────────────────────────────────────────────────────────────
   Three columns, like the case-study archive, and the same breakpoints — the
   two pages must fold at the same place. */
.rmd-bl .rmd-ba__all { margin-top: 52px; }
.rmd-bl .rmd-ba__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
@media (max-width: 900px) { .rmd-bl .rmd-ba__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rmd-bl .rmd-ba__grid { grid-template-columns: 1fr; } }

/* ── Pagination ────────────────────────────────────────────────────────────
   Styled on the markup the_posts_pagination() actually prints (nav.pagination >
   .page-numbers), rather than on the mockup's hand-built .rmd-ba__pg: core
   already gets the ellipsis and the prev/next edge cases right. */
.rmd-bl .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.rmd-bl .pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rmd-bl .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rmd-bl .pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--bord); border-radius: 10px;
	color: var(--ink); font-size: var(--t-ui); font-weight: 500; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.rmd-bl .pagination a.page-numbers:hover { background: #F3F4F6; }
.rmd-bl .pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.rmd-bl .pagination .page-numbers.dots { border: 0; min-width: 20px; color: #B9BFCE; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.rmd-bl .rmd-ba__empty { padding: 72px 0 40px; text-align: center; }
.rmd-bl .rmd-ba__empty-h { font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.rmd-bl .rmd-ba__empty-p { margin-top: 12px; font-size: var(--t-sec); line-height: var(--lh-text); color: var(--slight); }
.rmd-bl .rmd-ba__empty .rmd-more { margin-top: 22px; }

@media (max-width: 720px) {
	.rmd-bl.rmd-ba { padding: 30px 0 64px; }
	.rmd-bl .rmd-ba__lead { margin-top: 34px; }
	.rmd-bl .rmd-ba__all { margin-top: 38px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.rmd-bl *, .rmd-bl *::before, .rmd-bl *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.rmd-bl .rmd-card:hover, .rmd-bl .rmd-promo:hover { transform: none; }
}

}