/* ==========================================================================
   RazorMetrics GP — site styles
   Brand: Yellix (display) + Open Sans (body)
   Palette: Deep Razor Blue #000436 · Razor Blue #04006E · Metrics Blue #5A88FF
            Light #E3E7F0 · Magenta #A31099 · Yellow #FFC021 · Ink #2C2C2C
   ========================================================================== */

/* ---------- Fonts (Yellix self-hosted from theme) ---------- */
@font-face {
	font-family: 'Yellix';
	src: url('../fonts/Yellix-Medium.woff2') format('woff2'), url('../fonts/Yellix-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Yellix';
	src: url('../fonts/Yellix-SemiBold.woff2') format('woff2'), url('../fonts/Yellix-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Yellix';
	src: url('../fonts/Yellix-Bold.woff2') format('woff2'), url('../fonts/Yellix-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--navy: #000436;
	--blue: #04006E;
	--bright: #5A88FF;
	--light: #E3E7F0;
	--magenta: #A31099;
	--yellow: #FFC021;
	--ink: #2C2C2C;
	--paper: #FFFFFF;
	--paper-soft: #F5F7FE;
	--line: rgba(4, 0, 110, .10);
	--ondark-dim: rgba(227, 231, 240, .78);

	--grad-title: linear-gradient(92deg, #5A88FF 0%, #04006E 55%, #000436 100%);
	--grad-kpi: linear-gradient(92deg, #A31099 0%, #FFC021 100%);
	--grad-band: linear-gradient(135deg, #04006E 0%, #000436 70%);

	--font-display: 'Yellix', 'Open Sans', sans-serif;
	--font-body: 'Open Sans', sans-serif;

	--ease: cubic-bezier(.16, 1, .3, 1);
	--rail: 1200px;
	--edge: clamp(3rem, 6.5vw, 6rem); /* razor-edge depth */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Page canvas matches the footer so Chrome's sub-pixel rounding can't show a
   1px white sliver of body background beneath the full-width navy footer. */
html { background: var(--navy); }
.rm-body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	/* footer pins to the viewport bottom on short pages (404, lead flow) */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.rm-main { flex: 1 0 auto; }
.rm-footer { flex-shrink: 0; }

.rm-rail {
	max-width: var(--rail);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

img { max-width: 100%; height: auto; }

.rm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--navy);
	color: #fff;
	padding: .6rem 1.2rem;
}
.rm-skip:focus { left: 0; }

/* Typography */
h1, h2, h3 {
	font-family: var(--font-display);
	color: var(--blue);
	line-height: 1.12;
	margin: 0 0 .6em;
}
h1 { font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -.02em; }
.rm-h2 { font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.015em; max-width: 26ch; }
h3 { font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { margin: 0 0 1em; max-width: 62ch; }

.rm-h2--ondark { color: #fff; }

.rm-eyebrow {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--magenta);
	margin-bottom: 1rem;
}
.rm-eyebrow--ondark { color: var(--yellow); }

/* Gradient text */
.rm-grad-title, .rm-grad-kpi {
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.rm-grad-title { background-image: var(--grad-title); }
.rm-grad-kpi { background-image: var(--grad-kpi); }

/* Buttons */
.rm-btn {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 1rem 1.9rem;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
	will-change: transform;
}
.rm-btn:active { transform: translateY(1px) scale(.98); }
.rm-btn--primary { background: var(--blue); color: #fff; }
.rm-btn--primary:hover { background: var(--bright); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(4, 0, 110, .45); }
.rm-btn--ghost { color: var(--blue); border: 2px solid var(--blue); padding: calc(1rem - 2px) calc(1.9rem - 2px); }
.rm-btn--ghost:hover { border-color: var(--bright); color: var(--bright); transform: translateY(-2px); }
.rm-btn--light { background: #fff; color: var(--blue); }
.rm-btn--light:hover { background: var(--light); transform: translateY(-2px); }
.rm-btn--gold { background: var(--yellow); color: var(--navy); }
.rm-btn--gold:hover { background: #ffd35e; transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); }

.rm-arrowlink {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
	position: relative;
}
.rm-arrowlink::after {
	content: '\2192';
	display: inline-block;
	margin-left: .45em;
	transition: transform .25s var(--ease);
}
.rm-arrowlink:hover { color: var(--bright); }
.rm-arrowlink:hover::after { transform: translateX(.3em); }
.rm-arrowlink--ondark { color: var(--ondark-dim); }
.rm-arrowlink--ondark:hover { color: #fff; }

/* Razor-edge dividers (signature diagonal) */
.rm-edge-top { clip-path: polygon(0 var(--edge), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--edge) * -1); }
.rm-edge-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge)), 0 100%); }
.rm-edge-both { clip-path: polygon(0 var(--edge), 100% 0, 100% calc(100% - var(--edge)), 0 100%); }

/* Reveal states — hidden ONLY when JS is running (html.rm-js set inline);
   GSAP animates to visible; .rm-no-motion restores everything instantly. */
html.rm-js [data-rm-reveal], html.rm-js [data-rm-reveal-group] > * { opacity: 0; transform: translateY(28px); }
html.rm-js [data-rm-hero-item] { opacity: 0; transform: translateY(24px); }
html.rm-js .rm-no-motion [data-rm-reveal], html.rm-js .rm-no-motion [data-rm-reveal-group] > *,
html.rm-js .rm-no-motion [data-rm-hero-item] { opacity: 1; transform: none; }

/* ==========================================================================
   News ticker
   ========================================================================== */
.rm-ticker {
	background: var(--navy);
	color: #fff;
	font-size: .82rem;
}
.rm-ticker__rail { display: flex; align-items: center; gap: 1rem; min-height: 2.4rem; }
.rm-ticker__label {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .68rem;
	color: var(--yellow);
	flex: none;
}
.rm-ticker__type { position: relative; overflow: hidden; flex: 1; white-space: nowrap; }
.rm-ticker .rm-ticker__link {
	color: #fff;
	text-decoration: none;
	display: none;
	border-right: 2px solid var(--bright); /* typewriter caret */
	padding-right: .25em;
	animation: rm-caret 1s steps(1) infinite;
}
.rm-ticker .rm-ticker__link.is-current { display: inline-block; }
.rm-ticker .rm-ticker__link:hover { color: var(--yellow); }
@keyframes rm-caret { 50% { border-color: transparent; } }

/* ==========================================================================
   Header
   ========================================================================== */
.rm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rm-header.is-scrolled { border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(0, 4, 54, .25); }
.rm-header__rail { display: flex; align-items: center; gap: 2rem; min-height: 4.5rem; }
.rm-header__logo { flex: none; display: flex; }
.rm-header__logo img { width: 190px; height: auto; }

.rm-nav { margin-left: auto; }
.rm-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.rm-nav__list li { position: relative; }
.rm-nav__list a {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	color: var(--navy);
	text-decoration: none;
	padding: .55rem .85rem;
	border-radius: 8px;
	transition: color .2s var(--ease), background-color .2s var(--ease);
}
.rm-nav__list a:hover { color: var(--bright); }

/* Dropdowns */
.rm-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: .5rem;
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 24px 48px -20px rgba(0, 4, 54, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.rm-nav__list li:hover > .sub-menu,
.rm-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.rm-nav__list .sub-menu a { padding: .5rem .8rem; }
.rm-nav__list .sub-menu a:hover { background: var(--paper-soft); }

/* Last item ("Request Demo") as a button */
.rm-nav__list > li:last-child > a {
	background: var(--blue);
	color: #fff;
	border-radius: 999px;
	padding: .65rem 1.4rem;
	margin-left: .5rem;
}
.rm-nav__list > li:last-child > a:hover { background: var(--bright); color: #fff; }

/* Burger (mobile) */
.rm-header__burger {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 10px;
}
.rm-header__burger span {
	display: block;
	height: 2px;
	background: var(--navy);
	margin: 5px 0;
	border-radius: 2px;
	transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.rm-header.is-open .rm-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rm-header.is-open .rm-header__burger span:nth-child(2) { opacity: 0; }
.rm-header.is-open .rm-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
	.rm-header__burger { display: block; }
	.rm-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		box-shadow: 0 30px 50px -20px rgba(0, 4, 54, .35);
		max-height: calc(100dvh - 7rem);
		overflow-y: auto;
	}
	.rm-header.is-open .rm-nav { display: block; }
	.rm-nav__list { flex-direction: column; align-items: stretch; padding: 1rem; gap: 0; }
	.rm-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 .5rem 1rem;
	}
	.rm-nav__list > li:last-child > a { margin: .75rem 0 0; text-align: center; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.rm-hero {
	position: relative;
	background: var(--paper-soft);
	overflow: clip;
}
.rm-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.rm-hero__orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.rm-hero__orb--a { width: 480px; height: 480px; right: -120px; top: -140px; background: radial-gradient(circle, #5A88FF 0%, transparent 70%); }
.rm-hero__orb--b { width: 420px; height: 420px; right: 22%; bottom: -200px; background: radial-gradient(circle, #A31099 0%, transparent 70%); opacity: .22; }
.rm-hero__pill { position: absolute; right: -60px; bottom: -40px; width: 380px; opacity: .14; transform: rotate(-12deg); }

.rm-hero__rail {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 3rem;
	align-items: center;
	padding-top: clamp(3.5rem, 7vw, 6.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.rm-hero__title { margin-bottom: .35em; }
.rm-hero__claim { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.35rem); color: var(--navy); margin-bottom: .4em; }
.rm-hero__sub { color: #4A4A57; margin-bottom: 1.8em; }
.rm-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Hero art: animated Codex chip video */
.rm-hero__art--chip { min-height: 0; display: flex; align-items: center; justify-content: center; }
.rm-hero__chipvideo, .rm-hero__chipposter {
	width: 100%;
	max-width: 560px;
	border-radius: 26px;
	box-shadow: 0 40px 80px -40px rgba(0, 4, 54, .4);
}
.rm-hero__chipposter { display: none; }
@media (prefers-reduced-motion: reduce) {
	.rm-hero__chipvideo { display: none; }
	.rm-hero__chipposter { display: block; }
}

/* Floating KPI chips */
.rm-hero__art { position: relative; min-height: 340px; }
.rm-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .8rem;
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 48px -20px rgba(0, 4, 54, .28);
	backdrop-filter: blur(8px);
	border-radius: 18px;
	padding: 1rem 1.3rem;
	animation: rm-float 7s ease-in-out infinite;
}
.rm-chip strong {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
	background-image: var(--grad-kpi);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.rm-chip strong small {
	display: block;
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.rm-chip span {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .78rem;
	line-height: 1.25;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--blue);
}
.rm-chip--a { top: 6%; right: 8%; animation-delay: 0s; }
.rm-chip--b { top: 42%; right: 38%; animation-delay: -2.4s; }
.rm-chip--c { bottom: 4%; right: 2%; animation-delay: -4.8s; }
@keyframes rm-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

/* Change-orders live ticker (flows seamlessly into the stats band below) */
.rm-hero__orders { position: relative; background: var(--navy); color: #fff; box-shadow: inset 0 -1px 0 rgba(90, 136, 255, .25); }
.rm-hero__ordersrail { display: flex; align-items: center; gap: 1.25rem; min-height: 3rem; }
.rm-orders__label {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ondark-dim);
	flex: none;
}
.rm-orders__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--yellow);
	animation: rm-pulse 1.8s ease-in-out infinite;
}
@keyframes rm-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .45; transform: scale(.75); }
}
.rm-orders__list { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; min-height: 1.4em; }
.rm-orders__list li {
	position: absolute;
	inset: 0;
	font-size: .88rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.rm-orders__list li.is-current { opacity: 1; transform: none; }

@media (max-width: 880px) {
	.rm-hero__rail { grid-template-columns: 1fr; gap: 1.5rem; }
	.rm-hero__art { min-height: 230px; }
	.rm-chip--b { right: auto; left: 0; }
	.rm-orders__label span:last-child { display: none; }
}

/* ==========================================================================
   Stats band
   ========================================================================== */
.rm-stats {
	position: relative;
	background: var(--navy);
	color: #fff;
	padding: 3.5rem 0 calc(var(--edge) + 2.5rem);
}
.rm-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	text-align: center;
}
.rm-stat__num {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.rm-stat__label {
	display: block;
	margin-top: .4rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ondark-dim);
}
.rm-stat__tbd { opacity: .55; }
.rm-stats__cta { text-align: center; margin: 2.5rem 0 0; }
.rm-stats__cta .rm-arrowlink { color: var(--bright); }
.rm-stats__cta .rm-arrowlink:hover { color: #fff; }

@media (max-width: 720px) {
	.rm-stats__grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ==========================================================================
   Who we help
   ========================================================================== */
.rm-who { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.rm-who__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 2.2rem;
}
.rm-who__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--blue);
	text-decoration: none;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.5rem 1.4rem;
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.rm-who__tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--grad-band);
	opacity: 0;
	transition: opacity .3s var(--ease);
}
.rm-who__tile span, .rm-who__arrow { position: relative; z-index: 1; transition: color .3s var(--ease); }
.rm-who__tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(0, 4, 54, .4); color: #fff; }
.rm-who__tile:hover::before { opacity: 1; }
.rm-who__tile:hover span, .rm-who__tile:hover .rm-who__arrow { color: #fff; }
.rm-who__arrow {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	border-radius: 50%;
	border: 2px solid currentColor;
	display: grid;
	place-items: center;
	transition: transform .3s var(--ease);
}
.rm-who__arrow::after { content: '\2192'; font-size: .8rem; line-height: 1; }
.rm-who__tile:hover .rm-who__arrow { transform: translateX(4px); }

@media (max-width: 960px) { .rm-who__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rm-who__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Process (dark band)
   ========================================================================== */
.rm-process {
	background: var(--grad-band);
	color: var(--ondark-dim);
	padding: calc(var(--edge) + 3rem) 0 calc(var(--edge) + 3rem);
}
.rm-process__rail {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 3.5rem;
	align-items: center;
}
.rm-process__kpis {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.8rem;
	margin-top: .4rem;
	font-size: .85rem;
}
.rm-process__kpis strong {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--yellow);
	margin-right: .3em;
}
.rm-process__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; }
.rm-process__facts { display: grid; gap: 1rem; }
.rm-fact {
	display: flex;
	align-items: baseline;
	gap: 1.1rem;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(90, 136, 255, .25);
	border-radius: 14px;
	padding: 1rem 1.3rem;
}
.rm-fact strong {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.7rem;
	color: var(--yellow);
	flex: none;
	min-width: 4.2ch;
	font-variant-numeric: tabular-nums;
}
.rm-fact span { font-size: .92rem; }
.rm-fact--accent { border-color: var(--yellow); background: rgba(255, 192, 33, .08); }

/* Video placeholder (kept for when the process video is produced — currently unused) */
.rm-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	background:
		radial-gradient(circle at 28% 22%, rgba(90, 136, 255, .35), transparent 55%),
		radial-gradient(circle at 78% 80%, rgba(163, 16, 153, .3), transparent 55%),
		rgba(255, 255, 255, .04);
	border: 1px solid rgba(90, 136, 255, .3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .6);
	display: grid;
	place-items: center;
}
.rm-video__play {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
	position: relative;
	animation: rm-float 7s ease-in-out infinite;
}
.rm-video__play::after {
	content: '';
	position: absolute;
	left: 53%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 14px 0 14px 24px;
	border-color: transparent transparent transparent var(--blue);
}
.rm-video__caption {
	margin: 1rem 0 0;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .85rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ondark-dim);
}

@media (max-width: 880px) {
	.rm-process__rail { grid-template-columns: 1fr; gap: 2rem; }
}

/* Logo-knockout window (Acreage-style): the RM mark as a mask, with a
   slow-rotating brand aurora behind it. Swap the aurora for the process
   video when it's produced — same mask, video inside the mark. */
.rm-cutout {
	position: relative;
	width: min(380px, 64%);
	aspect-ratio: 24 / 28;
	margin: 3.5rem auto 0;
	overflow: hidden;
	-webkit-mask: url('/wp-content/uploads/2021/09/razor_metrics_mark.svg') center / contain no-repeat;
	mask: url('/wp-content/uploads/2021/09/razor_metrics_mark.svg') center / contain no-repeat;
}
.rm-cutout__aurora {
	position: absolute;
	inset: -55%;
	background:
		radial-gradient(38% 38% at 32% 30%, rgba(90, 136, 255, .95), transparent 70%),
		radial-gradient(34% 34% at 70% 58%, rgba(163, 16, 153, .85), transparent 70%),
		radial-gradient(30% 30% at 48% 80%, rgba(255, 192, 33, .75), transparent 70%),
		#0B1060;
	animation: rm-aurora 18s linear infinite;
	will-change: transform;
}
@keyframes rm-aurora { to { transform: rotate(360deg); } }
.rm-cutout__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
	.rm-cutout__aurora { animation: none; }
	.rm-cutout__video { display: none; } /* static aurora instead */
}

/* ==========================================================================
   Why RazorMetrics (zig-zag)
   ========================================================================== */
.rm-why { padding: clamp(3.5rem, 7vw, 6.5rem) 0 2rem; }
.rm-why__row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding: clamp(2rem, 4vw, 3.2rem) 0;
	border-top: 1px solid var(--line);
	margin-top: 1rem;
}
.rm-why__row:first-of-type { border-top: 0; margin-top: 2rem; }
.rm-why__row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rm-why__row--flip .rm-why__kpi { order: 2; text-align: right; }
.rm-why__row--flip .rm-why__body { order: 1; }
.rm-why__kpi span {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(4.5rem, 10vw, 8rem);
	line-height: .95;
	letter-spacing: -.03em;
}
.rm-why__kpi span small {
	display: block;
	font-size: .22em;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: .2em;
}
.rm-why__kpi em {
	display: block;
	margin-top: .5rem;
	font-style: normal;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--magenta);
}
.rm-why__body h3 { margin-bottom: .4em; }
.rm-why__body p { margin-bottom: 1.2em; }

@media (max-width: 760px) {
	.rm-why__row, .rm-why__row--flip { grid-template-columns: 1fr; gap: 1rem; }
	.rm-why__row--flip .rm-why__kpi { order: 0; text-align: left; }
	.rm-why__row--flip .rm-why__body { order: 1; }
}

/* ==========================================================================
   Logo marquee
   ========================================================================== */
.rm-logos { padding: 2.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
/* Titled variant (audience pages): heading above the running logo line. */
.rm-logos--titled { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.rm-logos--titled .rm-h2 { margin-bottom: 1.6rem; }
.rm-logos__track { display: flex; width: max-content; animation: rm-marquee 110s linear infinite; }
.rm-logos:hover .rm-logos__track { animation-play-state: paused; }
.rm-logos__set { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 4.5rem); padding-right: clamp(2.5rem, 6vw, 4.5rem); }
.rm-logos__set img { height: 34px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) brightness(.35) sepia(1) hue-rotate(200deg) saturate(2.5); opacity: .65; transition: filter .3s, opacity .3s; }
.rm-logos__set img:hover { filter: none; opacity: 1; }
@keyframes rm-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Experience
   ========================================================================== */
.rm-exp { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.rm-exp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.rm-exp__step {
	position: relative;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 2.2rem 2rem 1.6rem;
}
.rm-exp__num {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 3.4rem;
	line-height: 1;
	margin-bottom: .6rem;
}
.rm-exp__icon { display: block; width: 64px; height: 64px; margin-bottom: 1.1rem; }
.rm-exp__kicker { margin-bottom: .35rem; font-size: .72rem; }
.rm-exp__cta { margin-top: 2.2rem; }

@media (max-width: 760px) { .rm-exp__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   ROI guarantee (dark band)
   ========================================================================== */
.rm-roi { background: var(--navy); color: var(--ondark-dim); padding: calc(var(--edge) + 3rem) 0; }
.rm-roi__rail {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 3rem;
	align-items: center;
}
.rm-roi__badge {
	position: relative;
	text-align: center;
	display: grid;
	place-content: center;
	gap: .7rem;
	padding: 2.5rem 1rem;
	margin-inline: auto;
}
/* Breathing glow — two layers on offset rhythms (transform/opacity only) */
.rm-roi__badge::before,
.rm-roi__badge::after {
	content: '';
	position: absolute;
	inset: -12%;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform, opacity;
}
.rm-roi__badge::before {
	background: radial-gradient(closest-side, rgba(90, 136, 255, .26), transparent 72%);
	animation: rm-glow-a 9s ease-in-out infinite;
}
.rm-roi__badge::after {
	background: radial-gradient(closest-side, rgba(163, 16, 153, .16), transparent 70%);
	animation: rm-glow-b 7s ease-in-out infinite;
}
.rm-roi__badge span, .rm-roi__badge em { position: relative; z-index: 1; }
@keyframes rm-glow-a {
	0%, 100% { transform: scale(.94); opacity: .65; }
	50% { transform: scale(1.08); opacity: 1; }
}
@keyframes rm-glow-b {
	0%, 100% { transform: scale(1.06) translate(4%, -3%); opacity: .5; }
	50% { transform: scale(.92) translate(-4%, 3%); opacity: .85; }
}
.rm-roi__badge span {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(5.5rem, 10vw, 8.5rem);
	line-height: .95;
	letter-spacing: -.03em;
}
.rm-roi__badge em {
	font-style: normal;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ondark-dim);
}
.rm-roi__copy .rm-btn { margin-top: .5rem; }

@media (max-width: 880px) {
	.rm-roi__rail { grid-template-columns: 1fr; }
	.rm-roi__badge { padding: 1.5rem 1rem; }
}

/* ==========================================================================
   The Razor Advantage (home)
   ========================================================================== */
.rm-advantage { padding: clamp(3.5rem, 7vw, 6.5rem) 0; background: var(--paper); }
.rm-advantage__lede { font-size: 1.1rem; max-width: 72ch; }
.rm-advantage > .rm-rail > p { max-width: 72ch; }
.rm-advantage__kicker { font-family: var(--font-display); font-weight: 700; color: var(--navy); margin-top: 2rem; }
.rm-advantage .rm-feats__grid { margin-top: 1.2rem; }
.rm-advantage .rm-feat h3 { margin-bottom: 0; }
.rm-advantage__cta { margin-top: 2rem; }

/* ==========================================================================
   RazorCodex flow
   ========================================================================== */
.rm-codex { padding: clamp(3.5rem, 7vw, 6.5rem) 0; background: var(--paper-soft); }
.rm-codex__lede { font-size: 1.1rem; }
.rm-codex__flow { position: relative; margin: 3rem 0 1rem; padding-left: 2.4rem; }
.rm-codex__line {
	position: absolute;
	left: .65rem;
	top: .8rem;
	bottom: .8rem;
	width: 3px;
	border-radius: 3px;
	background: var(--line);
	overflow: hidden;
}
.rm-codex__progress {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #A31099, #5A88FF, #FFC021);
	transform-origin: top;
	transform: scaleY(0);
}
.rm-no-motion .rm-codex__progress { transform: none; }
.rm-codex__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: rm-step; }
.rm-codex__steps li {
	position: relative;
	counter-increment: rm-step;
	display: flex;
	align-items: center;
	gap: 1.3rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1rem 1.6rem 1rem 1.1rem;
	max-width: 640px;
	opacity: .35;
	transform: translateX(14px);
	transition: opacity .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.rm-codex__steps li.is-active { box-shadow: 0 18px 36px -22px rgba(0, 4, 54, .35); }
.rm-codex__art {
	width: 104px;
	height: 104px;
	flex: none;
	border-radius: 12px;
	object-fit: cover;
}
@media (max-width: 520px) {
	.rm-codex__art { width: 72px; height: 72px; }
}
.rm-codex__steps li.is-active, .rm-no-motion .rm-codex__steps li { opacity: 1; transform: none; border-color: rgba(90, 136, 255, .5); }
.rm-codex__steps li::before {
	content: counter(rm-step);
	position: absolute;
	left: -2.65rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .8rem;
	color: #fff;
	background: var(--blue);
	border: 3px solid var(--paper-soft);
}
.rm-codex__steps li.is-active::before { background: var(--magenta); }
.rm-codex__steps li strong { font-family: var(--font-display); font-weight: 600; color: var(--navy); }
.rm-codex__desc { display: block; font-size: .92rem; margin-top: .3rem; }
.rm-codex__art--badge { width: 64px; height: 64px; object-fit: contain; }
.rm-codex__cta { margin-top: 2.4rem; }

/* --- Codex scrollytelling (homepage): sticky stage + scrolling steps.
       Default rendering is the flat card list (mobile / no-JS / reduced
       motion); JS adds .is-scrolly on wide viewports. --- */
.rm-codex2 { margin-top: 3rem; }
.rm-codex2__stage { display: none; margin: 0; }
.rm-codex2__line { display: none; }
.rm-codex2__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.rm-codex2__steps li {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1rem 1.4rem 1rem 1rem;
	max-width: 640px;
}
.rm-codex2__steps li img { width: 72px; height: 72px; flex: none; border-radius: 10px; }
.rm-codex2__steps li em {
	display: block;
	font-style: normal;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--magenta);
	margin-bottom: .25rem;
}
.rm-codex2__steps li strong { font-family: var(--font-display); font-weight: 600; color: var(--navy); }

@media (min-width: 821px) {
	.rm-codex2.is-scrolly {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2.5rem, 6vw, 5rem);
		align-items: start;
	}
	/* Stage sits just below the pinned header, roughly centred in the viewport
	   (moved down from the old top:8rem so the scroll "centres" the active step). */
	.rm-codex2.is-scrolly .rm-codex2__stage {
		display: block;
		position: sticky;
		top: 13rem;
	}
	/* Keep the "How it works" header pinned (lede scrolls away) while the steps
	   scroll, so the section title stays visible. The header is in normal flow on
	   mobile (where the stage is hidden), so it lives outside the stage. Compact
	   band so it doesn't crowd the centred image below it. */
	.rm-codex .rm-codex__head {
		position: sticky;
		top: 5.5rem;
		z-index: 2;
		background: var(--paper-soft);
		padding: .9rem 0 .8rem;
	}
	.rm-codex .rm-codex__head .rm-eyebrow { margin-bottom: .2rem; }
	.rm-codex .rm-codex__head .rm-h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
	.rm-codex2.is-scrolly .rm-codex2__imgs {
		position: relative;
		aspect-ratio: 1;
		max-width: 420px;
	}
	.rm-codex2.is-scrolly .rm-codex2__imgs img,
	.rm-codex2.is-scrolly .rm-codex2__imgs video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 26px;
		box-shadow: 0 36px 70px -34px rgba(0, 4, 54, .4);
		opacity: 0;
		transform: scale(.97);
		transition: opacity .45s var(--ease), transform .45s var(--ease);
	}
	.rm-codex2.is-scrolly .rm-codex2__imgs img.is-on,
	.rm-codex2.is-scrolly .rm-codex2__imgs video.is-on { opacity: 1; transform: none; }
	.rm-codex2.is-scrolly .rm-codex2__count {
		margin-top: 1.2rem;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 1.05rem;
		letter-spacing: .18em;
		color: var(--magenta);
		font-variant-numeric: tabular-nums;
	}
	.rm-codex2.is-scrolly .rm-codex2__rail { position: relative; padding-left: 2.6rem; }
	.rm-codex2.is-scrolly .rm-codex2__line {
		display: block;
		position: absolute;
		left: .5rem;
		top: 0;
		bottom: 0;
		width: 3px;
		border-radius: 3px;
		background: var(--line);
		overflow: hidden;
	}
	.rm-codex2.is-scrolly .rm-codex2__progress {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, #A31099, #5A88FF, #FFC021);
		transform-origin: top;
		transform: scaleY(0);
	}
	.rm-codex2.is-scrolly .rm-codex2__steps {
		gap: 30vh;
		padding: 16vh 0 24vh;
	}
	.rm-codex2.is-scrolly .rm-codex2__steps li {
		display: block;
		background: none;
		border: 0;
		padding: 0;
		max-width: 22ch;
	}
	.rm-codex2.is-scrolly .rm-codex2__steps li img { display: none; }
	.rm-codex2.is-scrolly .rm-codex2__steps li em { opacity: .45; transition: opacity .4s var(--ease); }
	.rm-codex2.is-scrolly .rm-codex2__steps li strong {
		display: block;
		font-weight: 700;
		font-size: clamp(1.5rem, 2.6vw, 2.1rem);
		line-height: 1.18;
		letter-spacing: -.015em;
		color: var(--blue);
		opacity: .22;
		transform: translateX(10px);
		transition: opacity .4s var(--ease), transform .4s var(--ease);
	}
	.rm-codex2.is-scrolly .rm-codex2__steps li.is-active em { opacity: 1; }
	.rm-codex2.is-scrolly .rm-codex2__steps li.is-active strong { opacity: 1; transform: none; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
/* Bottom padding clears the rm-edge-top section below (it pulls up --edge and
   its diagonal clips the bottom-right card otherwise). */
.rm-quotes { padding: clamp(3.5rem, 7vw, 6rem) 0 calc(var(--edge) + 2rem); }
.rm-quotes__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.rm-quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 2rem 2rem 1.8rem;
}
.rm-quote blockquote {
	margin: 0 0 1.2rem;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	line-height: 1.45;
	color: var(--blue);
	flex: 1;
}
.rm-quote figcaption {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--magenta);
	margin-bottom: 1.2rem;
}
.rm-quote .rm-pilllink { align-self: flex-start; background: #fff; }
@media (max-width: 760px) {
	.rm-quotes__grid { grid-template-columns: 1fr; }
}
.rm-pilllink {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .9rem;
	color: var(--blue);
	text-decoration: none;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding: .6rem 1.3rem;
	transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.rm-pilllink:hover { border-color: var(--bright); color: var(--bright); transform: translateY(-2px); }

/* ==========================================================================
   Contact band
   ========================================================================== */
.rm-contact {
	background: var(--grad-band);
	color: var(--ondark-dim);
	padding: calc(var(--edge) + 3.5rem) 0 4.5rem;
	text-align: center;
}
.rm-contact__rail { display: grid; justify-items: center; }
.rm-contact .rm-h2 { max-width: 22ch; }
.rm-contact .rm-btn { margin-top: .8rem; }
.rm-contact__phone { margin-top: 1rem; font-size: .95rem; }
.rm-contact__phone a { color: var(--yellow); text-decoration: none; font-family: var(--font-display); font-weight: 600; }
.rm-contact__phone a:hover { color: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.rm-footer { background: var(--navy); color: var(--ondark-dim); }
.rm-footer__rail {
	display: grid;
	grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr));
	gap: 2.5rem;
	padding-top: 3.5rem;
	padding-bottom: 3rem;
}
.rm-footer__mark { width: 44px; }
.rm-footer__tag { font-family: var(--font-display); font-weight: 600; color: #fff; margin: 1rem 0 1.2rem; }
.rm-footer__social { display: flex; gap: .9rem; }
.rm-footer__social a { opacity: .7; transition: opacity .2s, transform .2s var(--ease); }
.rm-footer__social a:hover { opacity: 1; transform: translateY(-2px); }
.rm-footer__col h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bright);
	margin-bottom: 1rem;
}
.rm-footer__col a {
	display: block;
	color: var(--ondark-dim);
	text-decoration: none;
	font-size: .92rem;
	padding: .28rem 0;
	transition: color .2s;
}
.rm-footer__col a:hover { color: #fff; }
.rm-footer__legal { border-top: 1px solid rgba(227, 231, 240, .14); font-size: .78rem; }
.rm-footer__legalrail { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.rm-footer__legal p { margin: 0; }
.rm-footer__legal a { color: var(--ondark-dim); text-decoration: none; margin-left: 1.4rem; }
.rm-footer__legal a:first-child { margin-left: 0; }
.rm-footer__legal a:hover { color: #fff; }

@media (max-width: 880px) {
	.rm-footer__rail { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.rm-footer__rail { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ==========================================================================
   Audience / solution pages (template-audience.php)
   ========================================================================== */
.rm-phero {
	background: var(--grad-band);
	color: #fff;
	padding: clamp(3.5rem, 7vw, 6rem) 0 calc(var(--edge) + 3rem);
}
.rm-phero__title {
	color: #fff;
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
	max-width: 22ch;
	margin-bottom: .3em;
}
.rm-phero__lede {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	color: var(--ondark-dim);
	max-width: 50ch;
	margin: 0;
}

/* Hero art (original page graphics restored on the right of the band) */
.rm-phero__rail { display: grid; grid-template-columns: 1fr; align-items: center; gap: 2rem; }
.rm-phero--art .rm-phero__rail { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.rm-phero__art { display: flex; justify-content: center; }
.rm-phero__art img { max-height: 300px; width: auto; max-width: 100%; }
.rm-phero--art .rm-phero__art img[src$='.png'] { border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
@media (max-width: 820px) {
	.rm-phero--art .rm-phero__rail { grid-template-columns: 1fr; }
	.rm-phero__art img { max-height: 200px; }
}

.rm-sects { padding: clamp(2.5rem, 5vw, 4rem) 0 1rem; }
/* A page whose section run is followed by the evidence band: the band's diagonal
   starts at the top-left, so the last section needs air before the angle bites. */
.rm-sects--toband { padding-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.rm-sects--toband .rm-sect:last-child { padding-bottom: 0; }
.rm-sect {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding: clamp(2rem, 4vw, 3rem) 0;
}
.rm-sect + .rm-sect { border-top: 1px solid var(--line); }
/* Full-width intro + card grid variant (partner types etc.) */
.rm-sect--cards { display: block; }
.rm-sect--cards .rm-sect__copy--wide { max-width: 64ch; }
.rm-sect--flip .rm-sect__copy { order: 2; }
.rm-sect--flip .rm-sect__media, .rm-sect--flip .rm-sect__stat { order: 1; }
.rm-sect__lead { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: 1.1rem; }
/* Section body bullets → brand gradient check list (nicer than plain discs) */
.rm-sect__copy ul { list-style: none; margin: 1.1rem 0; padding: 0; display: grid; gap: .6rem; }
.rm-sect__copy ul li { position: relative; padding-left: 1.85rem; line-height: 1.5; }
.rm-sect__copy ul li::before {
	content: ""; position: absolute; left: 0; top: .28em;
	width: 1.15rem; height: 1.15rem; border-radius: 50%;
	background: linear-gradient(135deg, #FFC021, #A31099 55%, #04006E);
}
.rm-sect__copy ul li::after {
	content: ""; position: absolute; left: .34rem; top: .58em;
	width: .5rem; height: .26rem;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}
/* Inline body links in light-background copy. WP global-styles is dequeued on
   themed views, so a bare <a> in prose inherits text color and reads as
   unstyled. This safety net covers every light-bg copy container so a raw link
   from the content team is always styled. (.rm-btn CTAs and card-wrapper links
   like .rm-who__tile / .rm-rescard keep their own styling — they aren't inside
   these prose contexts.) Dark-band ledes are intentionally excluded (blue would
   be low-contrast); they have no inline links and would need an on-dark variant. */
.rm-sect__copy a:not(.rm-btn),
.rm-feats__intro a:not(.rm-btn),
.rm-feat p a:not(.rm-btn),
.rm-faq__item a:not(.rm-btn),
.rm-prod p a:not(.rm-btn),
.rm-report__intro a:not(.rm-btn) {
	color: var(--blue);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(4, 0, 110, .35);
	text-underline-offset: 2px;
	transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.rm-sect__copy a:not(.rm-btn):hover,
.rm-feats__intro a:not(.rm-btn):hover,
.rm-feat p a:not(.rm-btn):hover,
.rm-faq__item a:not(.rm-btn):hover,
.rm-prod p a:not(.rm-btn):hover,
.rm-report__intro a:not(.rm-btn):hover { color: var(--bright); text-decoration-color: currentColor; }
.rm-sect__media img {
	width: min(100%, 380px);
	border-radius: 24px;
	box-shadow: 0 30px 60px -30px rgba(0, 4, 54, .35);
	display: block;
	margin-inline: auto;
}
/* Transparent device mockups bring their own frame — no card chrome, no upscale */
.rm-sect__media img[src*='rxadvocate-phone'] {
	width: auto;
	max-width: 100%;
	max-height: 460px;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 24px 40px rgba(0, 4, 54, .3));
}
/* Partners: transparent isometric illustration floats free — no card chrome */
.rm-sect__media img[src*='partners-graphic'] {
	width: min(100%, 480px);
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 26px 46px rgba(0, 4, 54, .24));
}
/* Partners: hero is an oval-cropped transparent PNG — float it with a
   shape-following drop-shadow, no rectangular card behind the oval */
.rm-sect__media img[src*='partners-hero'] {
	width: min(100%, 460px);
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 24px 40px rgba(0, 4, 54, .22));
}
/* Partners page only: de-box the remaining codex illustrations (laptop, bag)
   so every section image floats consistently. Other audience pages keep the card. */
.page-id-7124 .rm-sect__media img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 24px 44px rgba(0, 4, 54, .24)); }
.rm-sect__stat { text-align: center; }
.rm-sect__stat span {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(4rem, 8vw, 6.5rem);
	line-height: 1;
	letter-spacing: -.03em;
}
.rm-sect__stat em {
	display: block;
	margin: .8rem auto 0;
	max-width: 26ch;
	font-style: normal;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
}
@media (max-width: 820px) {
	.rm-sect, .rm-sect--flip { grid-template-columns: 1fr; gap: 1.5rem; }
	.rm-sect--flip .rm-sect__copy { order: 0; }
	.rm-sect--flip .rm-sect__media, .rm-sect--flip .rm-sect__stat { order: 1; }
	.rm-sect__media img { width: min(100%, 300px); }
}

.rm-feats { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.rm-feats__intro { margin-top: -0.5rem; }
.rm-feats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 1.6rem; }
.rm-feats__grid--four { grid-template-columns: repeat(2, 1fr); }
.rm-feat {
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 1.8rem 1.7rem;
}
.rm-feat__icon { display: block; width: 48px; height: 48px; margin-bottom: 1rem; }
.rm-feat h3 { margin-bottom: .5em; }
.rm-feat p { margin: 0; font-size: .95rem; }
@media (max-width: 820px) { .rm-feats__grid, .rm-feats__grid--four { grid-template-columns: 1fr; } }

/* ==========================================================================
   Evidence band — cited third-party research on a navy razor band.
   Retired 2026-06-22 and again 2026-08-07: the "stat pills" component that used
   to live here (boxed chips with gradient dots, sources styled identically to
   data). Do not bring it back. Findings here are two-sided by nature, so the
   component sets a figure against its counterweight across a fulcrum, and the
   citation is fine print. Typographic on colour — no cards, no boxes, no dots.
   ========================================================================== */
.rm-evidence {
	background: var(--grad-band);
	color: #fff;
	padding: calc(var(--edge) + 3.5rem) 0 calc(var(--edge) + 1.25rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.rm-evidence__title { max-width: 22ch; }
.rm-evidence__intro { margin: 1.1rem 0 0; max-width: 60ch; font-size: 1.05rem; color: var(--ondark-dim); }

/* --- a single finding --- */
.rm-finding__copy h3 {
	font-family: var(--font-display); font-weight: 700; color: #fff;
	letter-spacing: -.015em; margin: 0 0 .5em;
}
.rm-finding__copy p { margin: 0; color: var(--ondark-dim); font-size: .97rem; line-height: 1.6; }
.rm-finding__source {
	margin: 1.1rem 0 0;
	font-family: var(--font-display); font-weight: 600;
	font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(227, 231, 240, .5);
}

/* --- the figure pair --- */
.rm-finding__figures { display: grid; gap: .85rem; justify-items: start; }
.rm-figure__val {
	/* inline-block so background-clip:text ramps across the glyphs, not across the
	   whole grid column — otherwise a right-aligned figure samples only the gold
	   end and stops matching the magenta-to-gold figures beside it */
	display: inline-block;
	font-family: var(--font-display); font-weight: 700;
	line-height: .92; letter-spacing: -.035em;
	font-variant-numeric: tabular-nums;
	background-image: var(--grad-kpi);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
/* The receding / "before" side of a pair reads in Metrics Blue, so the two
   figures are legible as an opposition rather than as two of the same thing. */
.rm-figure--down .rm-figure__val,
.rm-figure--from .rm-figure__val {
	background-image: none; color: var(--bright); -webkit-text-fill-color: var(--bright);
}
.rm-figure__label {
	display: block; margin-top: .5rem; max-width: 24ch;
	font-family: var(--font-display); font-weight: 600;
	font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ondark-dim);
}
/* fulcrum: horizontal between stacked figures, vertical between split ones */
.rm-finding__fulcrum {
	display: block; width: 100%; max-width: 7rem; height: 1px;
	background: linear-gradient(90deg, rgba(227, 231, 240, .45), rgba(227, 231, 240, 0));
}

/* --- lead finding: the thesis, figures split across a vertical fulcrum --- */
.rm-finding--lead { margin-top: clamp(2.8rem, 6vw, 4.5rem); }
.rm-finding__figures--split {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.2rem, 5vw, 4rem);
	min-height: clamp(9rem, 17vw, 14rem);
	justify-items: stretch;
}
.rm-finding__figures--split .rm-figure { min-width: 0; }
.rm-finding__figures--split .rm-figure:first-child { text-align: right; }
.rm-finding__figures--split .rm-figure:first-child .rm-figure__label { margin-left: auto; }
.rm-finding__figures--split .rm-figure:last-child { text-align: left; }
/* the divergence is structural, so it survives with motion off */
.rm-finding__figures--split .rm-figure--up { align-self: start; }
.rm-finding__figures--split .rm-figure--down { align-self: end; }
.rm-finding__figures--split .rm-figure__val { font-size: clamp(3rem, 8.5vw, 6.6rem); }
.rm-finding__figures--split .rm-figure__label { font-size: .82rem; max-width: 20ch; }
.rm-finding__figures--split .rm-finding__fulcrum {
	width: 2px; max-width: none; height: auto; align-self: stretch;
	transform-origin: center;
	background: linear-gradient(180deg, rgba(227, 231, 240, 0), rgba(227, 231, 240, .5) 50%, rgba(227, 231, 240, 0));
}
/* base p{max-width:62ch} would leave these in a narrow left-hung box, so the
   centring has nothing to centre against — widen and centre the box itself */
.rm-finding__note {
	margin: 1.3rem auto 0; max-width: none; text-align: center;
	font-family: var(--font-display); font-weight: 500;
	font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(227, 231, 240, .55);
}
.rm-finding--lead .rm-finding__copy {
	margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 60ch; text-align: center;
}
.rm-finding--lead .rm-finding__copy h3 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
.rm-finding--lead .rm-finding__copy p { margin-inline: auto; }
.rm-finding--lead .rm-finding__source { max-width: none; text-align: center; }

/* --- supporting findings --- */
.rm-findings {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.6rem, 3.4vw, 2.8rem);
	margin-top: clamp(2.6rem, 5vw, 4rem);
	padding-top: clamp(2.2rem, 4vw, 3.2rem);
	border-top: 1px solid rgba(227, 231, 240, .16);
}
.rm-findings .rm-finding:not(:first-child) {
	border-left: 1px solid rgba(227, 231, 240, .16);
	padding-left: clamp(1.6rem, 3.4vw, 2.8rem);
}
/* uniform figure-block height so the three headings sit on one line across;
   subgrid does it exactly (labels wrap to different line counts per column),
   the min-height is the fallback that gets it close without it */
.rm-findings .rm-finding__figures { min-height: clamp(8.5rem, 13vw, 10.5rem); align-content: start; }
@supports (grid-template-rows: subgrid) {
	@media (min-width: 981px) {
		.rm-findings { grid-template-rows: auto auto auto; }
		.rm-findings .rm-finding {
			display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
		}
		.rm-findings .rm-finding__figures { min-height: 0; }
	}
}
.rm-findings .rm-figure:first-child .rm-figure__val { font-size: clamp(2.3rem, 4.2vw, 3.2rem); }
.rm-findings .rm-figure:last-child .rm-figure__val { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.rm-findings .rm-figure:last-child .rm-figure__label { font-size: .72rem; }
/* One gradient number per finding. A short string only ever renders the magenta
   end of --grad-kpi, so a second gradient figure reads as an accident rather
   than a rank; the counterweight goes solid unless it's the "after" of a shift. */
.rm-findings .rm-figure:last-child:not(.rm-figure--to) .rm-figure__val {
	background-image: none; color: var(--light); -webkit-text-fill-color: var(--light);
}
.rm-findings .rm-finding__copy { margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.rm-findings .rm-finding__copy h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

@media (max-width: 980px) {
	.rm-findings { grid-template-columns: 1fr 1fr; }
	.rm-findings .rm-finding:nth-child(3) {
		border-left: 0; padding-left: 0;
		padding-top: clamp(1.6rem, 3.4vw, 2.4rem);
		border-top: 1px solid rgba(227, 231, 240, .16);
		grid-column: 1 / -1;
	}
}
@media (max-width: 700px) {
	.rm-finding__figures--split {
		grid-template-columns: 1fr; min-height: 0;
		gap: 1.1rem; justify-items: start;
	}
	.rm-finding__figures--split .rm-figure:first-child,
	.rm-finding__figures--split .rm-figure:last-child { text-align: left; }
	.rm-finding__figures--split .rm-figure:first-child .rm-figure__label { margin-left: 0; }
	.rm-finding__figures--split .rm-figure--up,
	.rm-finding__figures--split .rm-figure--down { align-self: start; }
	.rm-finding__figures--split .rm-finding__fulcrum {
		width: 100%; max-width: 7rem; height: 1px; align-self: start;
		background: linear-gradient(90deg, rgba(227, 231, 240, .45), rgba(227, 231, 240, 0));
	}
	.rm-finding__note, .rm-finding--lead .rm-finding__copy,
	.rm-finding--lead .rm-finding__source { text-align: left; }
	.rm-finding--lead .rm-finding__copy { margin-inline: 0; }
	.rm-findings { grid-template-columns: 1fr; }
	.rm-findings .rm-finding:not(:first-child) {
		border-left: 0; padding-left: 0;
		padding-top: clamp(1.6rem, 3.4vw, 2.4rem);
		border-top: 1px solid rgba(227, 231, 240, .16);
	}
	.rm-findings .rm-finding:nth-child(3) { grid-column: auto; }
}

/* KPI Bento — RxEdge / RxAdvocate feature blocks. Numbers promoted to navy
   gradient-KPI tiles; benefits as glass tiles echoing the block's gradient
   line-icon faintly in the corner (the careercard object-behind-content look). */
.rm-bentoblock + .rm-bentoblock { margin-top: 0; }
.rm-bentoblock__head { display: flex; gap: 1.1rem; align-items: flex-start; max-width: 72ch; margin: 0 0 1.5rem; }
.rm-bentoblock__ico { width: 64px; height: 64px; flex: none; object-fit: contain; }
.rm-bentoblock__head h3 { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: clamp(1.5rem, 2.7vw, 2.15rem); letter-spacing: -.015em; margin: 0 0 .4em; }
.rm-bentoblock__head p { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.65; max-width: 62ch; }
.rm-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; grid-auto-flow: row dense; }
.rm-bentile { position: relative; overflow: hidden; border-radius: 20px; padding: 1.4rem 1.5rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); min-height: 140px; display: flex; flex-direction: column; justify-content: flex-end; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.rm-bentile:hover { box-shadow: 0 26px 52px -30px rgba(0, 4, 54, .32), inset 0 1px 0 rgba(255, 255, 255, .55); transform: translateY(-2px); }
.rm-bentile--b2 { grid-column: span 2; }
.rm-bentile--b3 { grid-column: span 3; }
.rm-bentile__ico { position: absolute; right: -14px; bottom: -16px; width: 120px; height: 120px; opacity: .12; z-index: 0; pointer-events: none; }
.rm-bentile p { position: relative; z-index: 1; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: .98rem; line-height: 1.42; color: var(--navy); max-width: 86%; }
.rm-bentile--kpi { grid-column: span 2; grid-row: span 2; justify-content: center; border: 0; background: var(--grad-band); box-shadow: 0 26px 52px -34px rgba(0, 4, 54, .6); }
.rm-bentile--kpi-sm { grid-row: span 1; }
.rm-kpi__num { font-family: var(--font-display); font-weight: 700; line-height: .95; font-size: clamp(2.6rem, 5vw, 3.7rem); background-image: var(--grad-kpi); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-bentile--kpi-sm .rm-kpi__num { font-size: clamp(2rem, 4vw, 2.7rem); }
.rm-kpi__label { position: relative; z-index: 1; color: var(--ondark-dim); font-family: var(--font-display); font-weight: 500; font-size: .92rem; line-height: 1.4; margin-top: .55rem; max-width: 94%; }
.rm-bentile--kpi-sm .rm-kpi__label { font-size: .85rem; margin-top: .35rem; }
.rm-bento-rule { height: 3px; margin: clamp(2.4rem, 5vw, 4rem) 0; background: var(--grad-kpi); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); opacity: .85; }
@media (max-width: 820px) {
	.rm-bento { grid-template-columns: 1fr; }
	.rm-bentile, .rm-bentile--b2, .rm-bentile--b3, .rm-bentile--kpi { grid-column: 1 / -1; grid-row: auto; }
	.rm-bentile p, .rm-kpi__label { max-width: 100%; }
	.rm-bentoblock__head { flex-direction: column; gap: .7rem; }
}

/* Partner / client logo grid — duotone treatment so mismatched logo files
   read as one consistent set (same recipe as the homepage marquee) */
.rm-logogrid { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--line); }
.rm-logogrid__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .8rem;
	margin-top: 1.8rem;
}
.rm-logogrid__cell {
	display: grid;
	place-items: center;
	background: var(--paper-soft);
	border-radius: 14px;
	padding: 1.5rem 1.4rem;
	min-height: 96px;
	transition: background-color .25s var(--ease);
}
.rm-logogrid__cell:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.rm-logogrid__cell img {
	max-height: 32px;
	max-width: 72%;
	width: auto;
	object-fit: contain;
	filter: grayscale(1) brightness(.35) sepia(1) hue-rotate(200deg) saturate(2.5);
	opacity: .6;
	transition: filter .25s, opacity .25s;
}
.rm-logogrid__cell:hover img { filter: none; opacity: 1; }
@media (max-width: 960px) { .rm-logogrid__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .rm-logogrid__grid { grid-template-columns: repeat(2, 1fr); } }

/* FAQ — side-by-side Q&A blocks */
.rm-faq { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.rm-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.5rem; margin-top: 1.6rem; }
.rm-faq__item h3 { font-size: 1.05rem; margin-bottom: .4em; }
.rm-faq__item p { margin: 0; font-size: .95rem; }
@media (max-width: 760px) { .rm-faq__grid { grid-template-columns: 1fr; } }

.rm-quotes--single { padding-bottom: 1rem; }
.rm-quote--solo {
	background: none;
	border: 0;
	padding: 0;
	max-width: 700px;
	margin-inline: auto;
	text-align: center;
}
.rm-quote--solo blockquote { font-size: clamp(1.25rem, 2.4vw, 1.65rem); flex: none; }
.rm-quote--solo figcaption { margin-bottom: 0; }

.rm-prods { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.rm-prods__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.6rem; perspective: 1100px; }
.rm-prods__grid--one { grid-template-columns: minmax(0, 640px); justify-content: center; }
.rm-prod {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 2.2rem 2rem;
	transform-style: preserve-3d;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
	will-change: transform;
}
.rm-prod:hover { box-shadow: 0 26px 52px -28px rgba(0, 4, 54, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
.rm-prod__glare {
	position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
	transition: opacity .3s var(--ease);
	background: radial-gradient(220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, .5), transparent 60%);
	mix-blend-mode: soft-light;
}
.rm-prod:hover .rm-prod__glare { opacity: 1; }
.rm-prod > :not(.rm-prod__glare) { position: relative; z-index: 1; }
.rm-prod__logo { height: 40px; width: auto; max-width: 260px; object-fit: contain; }
.rm-prod p { margin: 0; flex: 1; }
.rm-no-motion .rm-prod { transition: none; }
@media (max-width: 760px) { .rm-prods__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Interior pages (content as-is) — neutralize homepage-hero class collisions;
   these pages carry their own embedded styles.
   ========================================================================== */
.rm-interior .rm-hero { background: none; overflow: visible; }
.rm-interior { font-family: var(--font-body); }
/* Intro copy beneath the Speakers Bureau hero band (rm-phero is rm-edge-bottom,
   so clear the diagonal) — constrained for readability above the speaker cards. */
.rm-speakers-intro { max-width: 760px; padding-top: calc( var(--edge) + 2.5rem ); padding-bottom: .5rem; }
.rm-speakers-intro p { margin: 0 0 1.1rem; font-size: 1.05rem; color: var(--ink); }

/* ==========================================================================
   Resource Center
   ========================================================================== */

/* Crop-proof media pane: blurred cover backdrop + fully contained image —
   any aspect ratio displays whole (fixes the butchered featured images). */
.rm-resmedia {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: var(--navy);
}
.rm-resmedia__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(26px) saturate(1.15);
	opacity: .55;
	transform: scale(1.15);
}
.rm-resmedia__fg {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.rm-resmedia--empty { background: var(--grad-band); }

/* Featured post card */
.rm-resfeat { padding: clamp(2.5rem, 5vw, 4rem) 0 1rem; }
.rm-resfeat__card {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	text-decoration: none;
	color: inherit;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: clamp(1.2rem, 3vw, 2.2rem);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rm-resfeat__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 4, 54, .35); }
.rm-resfeat__body { display: grid; gap: .7rem; justify-items: start; }
.rm-resfeat__body strong {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--blue);
}
.rm-resfeat__excerpt { color: var(--ink); }
.rm-resfeat__meta {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #5A5A66;
}
@media (max-width: 820px) { .rm-resfeat__card { grid-template-columns: 1fr; } }

/* Upcoming webinar band (Resource Center) — the one event slot.
   Dark on a page of light article cards, because an event is not an article and
   should not have to be read to be told apart. The hairline between the two
   halves is the razor cut the webinar page makes at full size; here it is only a
   seam, since this card points at the argument rather than making it. */
.rm-resevent { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.rm-resevent__card {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(1.4rem, 4vw, 3rem);
	align-items: center;
	text-decoration: none;
	color: var(--light);
	background: var(--grad-band);
	border-radius: 24px;
	padding: clamp(1.4rem, 3.2vw, 2.4rem);
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rm-resevent__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0, 4, 54, .55); }
.rm-resevent__card:hover .rm-arrowlink { color: #fff; }

.rm-resevent__when { position: relative; display: grid; gap: .55rem; justify-items: start; align-content: center; }
.rm-resevent__when::after {
	content: "";
	position: absolute;
	top: -2rem;
	bottom: -2rem;
	right: -1.1rem;
	width: 1px;
	background: linear-gradient(180deg, rgba(90, 136, 255, 0) 0%, rgba(90, 136, 255, .5) 42%, rgba(255, 192, 33, .55) 100%);
	transform: rotate(6deg);
	pointer-events: none;
}
.rm-resevent__chip {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--navy);
	background: var(--yellow);
	border-radius: 999px;
	padding: .32rem .75rem;
}
.rm-resevent__date {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	line-height: 1.1;
	letter-spacing: -.01em;
	color: #fff;
}
.rm-resevent__time { font-size: .85rem; color: var(--ondark-dim); }
.rm-resevent__dot { padding: 0 .2rem; opacity: .6; }

.rm-resevent__body { display: grid; gap: .7rem; justify-items: start; }
.rm-resevent__body strong {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	color: #fff;
}
.rm-resevent__lede { color: var(--ondark-dim); }
.rm-resevent__people { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.rm-resevent__person { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ondark-dim); }
.rm-resevent__person img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }

@media (max-width: 820px) {
	.rm-resevent__card { grid-template-columns: 1fr; }
	.rm-resevent__when::after { content: none; }
}

/* Filters */
.rm-resgrid { padding: clamp(2rem, 4vw, 3.5rem) 0 4rem; }
.rm-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.rm-filters .rm-pilllink.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Card grid */
.rm-resgrid__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}
.rm-rescard {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rm-rescard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -26px rgba(0, 4, 54, .35); }
.rm-rescard .rm-resmedia { border-radius: 0; }
.rm-rescard__body { display: grid; gap: .45rem; padding: 1.2rem 1.3rem 1.4rem; justify-items: start; }
.rm-rescard__chip {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--magenta);
}
.rm-rescard__body strong {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.08rem;
	line-height: 1.3;
	color: var(--navy);
}
.rm-rescard:hover .rm-rescard__body strong { color: var(--bright); }
.rm-rescard__meta { font-size: .78rem; color: #5A5A66; }
@media (max-width: 960px) { .rm-resgrid__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rm-resgrid__grid { grid-template-columns: 1fr; } }

/* Search */
.rm-search { display: flex; gap: .7rem; margin: 1.6rem 0; max-width: 460px; }
.rm-search input {
	flex: 1;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding: .7rem 1.2rem;
	outline: none;
	transition: border-color .2s;
}
.rm-search input:focus { border-color: var(--bright); }
.rm-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.rm-filters__row .rm-filters { margin-bottom: 0; }
.rm-search--inline { margin: 0; max-width: 260px; }
.rm-search--inline input { padding: .55rem 1.1rem; font-size: .92rem; }
.rm-resgrid__searchnote { margin: -.8rem 0 1.6rem; font-size: .95rem; color: #5A5A66; }
.rm-resgrid__searchnote a { color: var(--blue); }

/* Pager */
.rm-pager { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 2.5rem; }
.rm-pager__count {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .85rem;
	color: #5A5A66;
}
.rm-resgrid__empty { padding: 2rem 0; }
.rm-resgrid__empty a { color: var(--blue); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.rm-contactpage { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.rm-contactpage__rail {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.rm-contactpage__form > .rm-eyebrow { margin-bottom: .8rem; }
.rm-contactpage__form > p { margin-bottom: 1.2rem; }
.rm-contactpage__reassure {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	color: var(--navy);
	margin: 0 0 1.6rem;
	max-width: none;
}
.rm-contactpage__reassure svg { flex: none; color: var(--bright); }
.rm-contactpage__embed {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: clamp(1.5rem, 3vw, 2.2rem);
	box-shadow: 0 24px 48px -28px rgba(0, 4, 54, .25);
}

/* HubSpot form — brand styling (renders inline in .rm-contactpage__embed;
   targeted !important beats HubSpot's runtime-injected stylesheet) */
.rm-contactpage__embed .hs-form { width: 100%; }
.rm-contactpage__embed .hs-form-field { margin-bottom: 1.15rem; }
.rm-contactpage__embed .hs-form-field > label {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .9rem;
	color: var(--navy);
	margin-bottom: .4rem;
}
.rm-contactpage__embed .hs-form-required { color: var(--magenta); margin-left: .12em; }
.rm-contactpage__embed .hs-input:not([type=checkbox]):not([type=radio]) {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: var(--paper-soft);
	border: 1px solid var(--line) !important;
	border-radius: 12px;
	padding: .85rem 1rem;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.rm-contactpage__embed textarea.hs-input { min-height: 130px; resize: vertical; line-height: 1.5; }
.rm-contactpage__embed .hs-input:focus {
	outline: none;
	background: #fff;
	border-color: var(--bright) !important;
	box-shadow: 0 0 0 3px rgba(90, 136, 255, .18);
}
.rm-contactpage__embed .hs-input::placeholder { color: rgba(44, 44, 44, .42); }
.rm-contactpage__embed .hs-input.invalid.error,
.rm-contactpage__embed .hs-input.invalid { border-color: var(--magenta) !important; }
.rm-contactpage__embed .hs-error-msgs { list-style: none; margin: .4rem 0 0; padding: 0; }
.rm-contactpage__embed .hs-error-msg,
.rm-contactpage__embed .hs-error-msgs label { color: var(--magenta); font-size: .85rem; }
.rm-contactpage__embed .hs-field-desc { color: var(--ink); opacity: .7; font-size: .85rem; margin: .3rem 0; }

/* Two-up first/last name once the card is wide enough */
@media (min-width: 560px) {
	.rm-contactpage__embed .hs-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
	.rm-contactpage__embed .hs-form-field,
	.rm-contactpage__embed .hs_submit { grid-column: 1 / -1; }
	.rm-contactpage__embed .hs_firstname { grid-column: 1 / 2; }
	.rm-contactpage__embed .hs_lastname { grid-column: 2 / 3; }
}

/* Submit button → brand pill */
.rm-contactpage__embed .hs-submit { margin-top: .3rem; }
.rm-contactpage__embed .hs-button {
	display: inline-block;
	font-family: var(--font-display) !important;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	background: var(--blue) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 1rem 2.2rem !important;
	width: auto !important;
	box-shadow: none;
	transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.rm-contactpage__embed .hs-button:hover {
	background: var(--bright) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(4, 0, 110, .45);
}
.rm-contactpage__embed .hs-button:active { transform: translateY(1px) scale(.98); }
.rm-contactpage__embed .submitted-message {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--navy);
}

/* Right column: info card stacked over HQ map */
.rm-contactpage__aside { display: grid; gap: 1.25rem; align-content: start; }
.rm-contactpage__info {
	background: var(--grad-band);
	color: var(--ondark-dim);
	border-radius: 20px;
	padding: 2rem 1.9rem;
}
.rm-contactpage__info h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bright);
	margin: 1.6rem 0 .4rem;
}
.rm-contactpage__info h2:first-child { margin-top: 0; }
.rm-contactpage__info p { margin: 0; }
.rm-contactpage__info a { color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 600; }
.rm-contactpage__info a:hover { color: var(--yellow); }
.rm-contactpage__info .rm-footer__social { margin-top: .6rem; }
.rm-contactpage__proof {
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 1.9rem;
}
.rm-contactpage__proof .rm-eyebrow { margin-bottom: .9rem; }
.rm-proof__lead {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.4rem, 6vw, 3rem);
	line-height: 1;
	margin: 0;
}
.rm-proof__leadlabel {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--navy);
	font-size: .95rem;
	margin: .35rem 0 0;
}
.rm-proof__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
}
.rm-proof__grid span {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.8rem;
	line-height: 1;
}
.rm-proof__grid em {
	display: block;
	font-style: normal;
	color: var(--ink);
	opacity: .75;
	font-size: .82rem;
	margin-top: .4rem;
}
@media (max-width: 820px) { .rm-contactpage__rail { grid-template-columns: 1fr; } }

/* What happens next */
.rm-nextsteps {
	background: var(--paper-soft);
	border-top: 1px solid var(--line);
	padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
}
.rm-nextsteps__list {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.4rem, 3vw, 2.4rem);
	counter-reset: rm-ns;
}
.rm-nextsteps__list li { counter-increment: rm-ns; }
.rm-nextsteps__list li::before {
	content: counter(rm-ns);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: .95rem;
}
.rm-nextsteps__list h3 { color: var(--navy); margin-bottom: .3em; }
.rm-nextsteps__list p { color: var(--ink); margin: 0; }
@media (max-width: 760px) {
	.rm-nextsteps__list { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ==========================================================================
   About page
   ========================================================================== */
/* About band is rm-edge-both (diagonal top AND bottom); the base .rm-stats
   top padding (3.5rem, sized for the homepage's edge-bottom-only band) lets the
   top-left numbers crowd the angled edge. Add edge compensation like .rm-band/.rm-roi. */
.rm-stats--about { margin-top: 1rem; padding-top: calc( var(--edge) + 3.5rem ); }
.rm-stats__grid--six { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
@media (max-width: 720px) { .rm-stats__grid--six { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }

/* ==========================================================================
   Legacy timeline (About) — scrollytelling: sticky giant year morphs as the
   milestone list activates. Mirrors the codex2 "How it works" scroll language.
   ========================================================================== */
.rm-legacy { margin-top: 2.5rem; }
.rm-legacy__stage { display: none; margin: 0; }
.rm-legacy__line { display: none; }
.rm-legacy__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.rm-legacy__steps li { position: relative; padding-left: 1.5rem; border-left: 3px solid var(--line); }
.rm-legacy__steps li em {
	display: block; font-style: normal; font-family: var(--font-display); font-weight: 700;
	font-size: 1.35rem; line-height: 1; margin-bottom: .45rem;
	background-image: var(--grad-kpi); -webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.rm-legacy__steps li strong { font-family: var(--font-display); font-weight: 600; color: var(--navy); line-height: 1.3; }

@media (min-width: 821px) {
	.rm-legacy.is-scrolly {
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
		gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
		margin-top: 3rem;
	}
	/* Centre the year in the viewport WITHOUT an upward transform (translateY(-50%)
	   pulled the big year up into the intro paragraphs before it stuck). A full-height
	   sticky flex container centres the year in the viewport while keeping it strictly
	   inside the section, so it never overlaps the copy above. */
	.rm-legacy.is-scrolly .rm-legacy__stage {
		position: sticky; top: 0; min-height: 100vh;
		display: flex; flex-direction: column; justify-content: center;
	}
	.rm-legacy.is-scrolly .rm-legacy__years { position: relative; min-height: clamp(5rem, 13vw, 11rem); }
	.rm-legacy.is-scrolly .rm-legacy__year {
		position: absolute; left: 0; top: 0; white-space: nowrap;
		font-family: var(--font-display); font-weight: 700;
		font-size: clamp(5rem, 13vw, 11rem); line-height: .92; letter-spacing: -.035em;
		opacity: 0; transform: translateY(18px);
		transition: opacity .5s var(--ease), transform .5s var(--ease);
	}
	.rm-legacy.is-scrolly .rm-legacy__year.is-on { opacity: 1; transform: none; }
	.rm-legacy.is-scrolly .rm-legacy__count {
		margin-top: 1.3rem; font-family: var(--font-display); font-weight: 700;
		font-size: 1.05rem; letter-spacing: .18em; color: var(--magenta); font-variant-numeric: tabular-nums;
	}
	.rm-legacy.is-scrolly .rm-legacy__rail { position: relative; padding-left: 2.6rem; }
	.rm-legacy.is-scrolly .rm-legacy__line {
		display: block; position: absolute; left: .5rem; top: 0; bottom: 0;
		width: 3px; border-radius: 3px; background: var(--line); overflow: hidden;
	}
	.rm-legacy.is-scrolly .rm-legacy__progress {
		position: absolute; inset: 0; background: linear-gradient(180deg, #A31099, #5A88FF, #FFC021);
		transform-origin: top; transform: scaleY(0);
	}
	.rm-legacy.is-scrolly .rm-legacy__steps { gap: 26vh; padding: 14vh 0 22vh; }
	.rm-legacy.is-scrolly .rm-legacy__steps li { border-left: 0; padding-left: 0; max-width: 32ch; }
	.rm-legacy.is-scrolly .rm-legacy__steps li em { opacity: .4; font-size: 1.2rem; transition: opacity .4s var(--ease); }
	.rm-legacy.is-scrolly .rm-legacy__steps li strong {
		display: block; font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.75rem);
		line-height: 1.25; letter-spacing: -.01em; color: var(--navy);
		opacity: .25; transform: translateX(10px);
		transition: opacity .4s var(--ease), transform .4s var(--ease);
	}
	.rm-legacy.is-scrolly .rm-legacy__steps li.is-active em { opacity: 1; }
	.rm-legacy.is-scrolly .rm-legacy__steps li.is-active strong { opacity: 1; transform: none; }
}

.rm-feat--award img {
	display: block;
	height: 110px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin-bottom: 1.1rem;
}

/* Awards marquee bar — full color (paid badges), seamless loop, pause on hover */
.rm-awardbar { padding: clamp(2.5rem, 5vw, 4rem) 0; overflow: hidden; }
.rm-awardbar__track { display: flex; width: max-content; margin-top: 2rem; animation: rm-marquee 45s linear infinite; }
.rm-awardbar:hover .rm-awardbar__track,
.rm-awardbar:focus-within .rm-awardbar__track { animation-play-state: paused; }
.rm-awardbar__set a { display: flex; border-radius: 8px; }
.rm-awardbar__set a:focus-visible { outline: 3px solid var(--bright); outline-offset: 4px; }
.rm-awardbar__set { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4rem); padding-right: clamp(2.5rem, 5vw, 4rem); }
.rm-awardbar__set img { height: clamp(64px, 9vw, 92px); width: auto; max-width: 170px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
	.rm-awardbar__track { animation: none; flex-wrap: wrap; width: auto; }
	.rm-awardbar__set[aria-hidden] { display: none; }
}
.rm-feat--award em {
	display: block;
	font-style: normal;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--yellow);
	background: var(--navy);
	border-radius: 999px;
	padding: .3rem .8rem;
	width: fit-content;
	margin-bottom: 1rem;
}
.rm-feat--award p { color: #666; }

.rm-team { padding: clamp(2.5rem, 5vw, 4.5rem) 0 1rem; }
.rm-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.2rem 1.5rem;
	margin-top: 2rem;
}
.rm-team__card { text-align: center; }
.rm-team__card img {
	width: min(100%, 170px);
	aspect-ratio: 1;
	object-fit: contain;
	margin-inline: auto;
	display: block;
	transition: transform .3s var(--ease);
}
.rm-team__card:hover img { transform: translateY(-4px); }
.rm-team__card h3 { font-size: 1.02rem; margin: .8rem 0 .15rem; }
.rm-team__card h3 a { color: var(--blue); text-decoration: none; }
.rm-team__card h3 a:hover { color: var(--bright); }
.rm-team__card p { font-size: .82rem; color: #5A5A66; margin: 0; }
.rm-team__li {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-top: .65rem; padding: .34rem .72rem .34rem .58rem;
	border-radius: 999px;
	background: var(--blue); color: #fff;
	font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .01em;
	text-decoration: none;
	transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.rm-team__li:hover { background: var(--magenta); transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(163, 16, 153, .55); }
.rm-team__li svg { flex: none; }
@media (max-width: 960px) { .rm-team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .rm-team__grid { grid-template-columns: 1fr 1fr; } }

/* Extra bottom clearance: the contact band below is rm-edge-top (negative top
   margin + diagonal) and was overlapping the bottom row of cards. */
.rm-careers { padding: clamp(2.5rem, 5vw, 4rem) 0 calc( var(--edge) + 3.5rem ); }
.rm-careers .rm-feats__grid--four { margin-top: 2.2rem; }

/* Career cards (experiment): soft brand tint + RM gradient line-icon + a faint
   corner accent (object-behind-content) + cursor glare and a subtle 3D tilt. */
.rm-careercards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2.2rem; perspective: 1100px; }
.rm-careercard {
	position: relative; overflow: hidden;
	border-radius: 22px; padding: 2rem 1.9rem;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
	transform-style: preserve-3d;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
	will-change: transform;
}
.rm-careercard:hover { box-shadow: 0 26px 52px -28px rgba(0, 4, 54, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
/* the card's own RM line-icon, oversized + faint, peeking from the bottom-right */
.rm-careercard__icon { position: absolute; right: -14px; bottom: -16px; width: 118px; height: 118px; opacity: .8; z-index: 0; pointer-events: none; object-fit: contain; }
/* non-scaling stroke = thin, crisp lines (in real px) even at this large size */
.rm-careercard__icon svg > * { vector-effect: non-scaling-stroke; }
.rm-careercard__icon svg { width: 100%; height: 100%; }
.rm-careercard h3, .rm-careercard p { position: relative; z-index: 1; }
.rm-careercard__glare {
	position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
	transition: opacity .3s var(--ease);
	background: radial-gradient(190px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, .5), transparent 60%);
	mix-blend-mode: soft-light;
}
.rm-careercard:hover .rm-careercard__glare { opacity: 1; }
.rm-careercard h3 { margin: 0 0 .45em; font-size: 1.25rem; }
.rm-careercard p { margin: 0; font-size: .95rem; color: var(--ink); max-width: 88%; }
@media (max-width: 820px) { .rm-careercards { grid-template-columns: 1fr; } }
.rm-no-motion .rm-careercard { transition: none; }

.rm-nowrap { white-space: nowrap; }

/* ==========================================================================
   404
   ========================================================================== */
.rm-404 {
	/* fills the viewport between header and footer (body is flex column) */
	flex: 1;
	display: flex;
	align-items: center;
	padding: clamp(2rem, 5vh, 4rem) 0;
}
.rm-404__rail {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	width: 100%;
}
.rm-404__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 5vw, 3.9rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--blue);
	margin: 0 0 .4em;
}
.rm-404__lede { font-size: clamp(1.2rem, 2vw, 1.45rem); margin-bottom: 1.5em; max-width: 30ch; }
.rm-404__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; }
.rm-404__small { font-size: 1rem; color: #5A5A66; }
.rm-404__small a { color: var(--blue); }
.rm-404__art img {
	width: 100%;
	/* image's white bg blends into the page; no card chrome */
}
@media (max-width: 820px) {
	.rm-404__rail { grid-template-columns: 1fr; }
	.rm-404__art { order: -1; }
}

/* ==========================================================================
   Lead flow (typeform-style savings analysis)
   ========================================================================== */
.rm-leadflow {
	background: var(--grad-band);
	color: var(--ondark-dim);
	min-height: calc(100dvh - 4.5rem);
	display: flex;
	flex-direction: column;
	position: relative;
}
.rm-leadflow__progress {
	height: 4px;
	background: rgba(227, 231, 240, .15);
}
.rm-leadflow__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #A31099, #5A88FF, #FFC021);
	transition: width .4s var(--ease);
}
.rm-leadflow__rail {
	flex: 1;
	display: grid;
	align-content: center;
	padding-top: clamp(2.5rem, 6vh, 5rem);
	padding-bottom: clamp(2.5rem, 6vh, 5rem);
	position: relative;
	width: 100%;
}
.rm-leadflow__screen { display: none; max-width: 680px; }
.rm-leadflow__screen.is-on { display: block; animation: lf-in .45s var(--ease); }
@keyframes lf-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
.rm-leadflow__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 .5em;
}
.rm-leadflow__lede { font-size: 1.1rem; max-width: 54ch; margin-bottom: 1.6em; }
.rm-leadflow__lede a { color: var(--yellow); }
.rm-leadflow__hint { display: block; margin-top: 1rem; font-size: .78rem; opacity: .6; }
.rm-leadflow__hint kbd, .rm-leadflow__choice kbd {
	font-family: var(--font-display);
	border: 1px solid rgba(227, 231, 240, .4);
	border-radius: 5px;
	padding: .1em .45em;
	font-size: .85em;
}
.rm-leadflow__count {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .16em;
	color: var(--bright);
	margin-bottom: .8rem;
}
.rm-leadflow__q {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.18;
	color: #fff;
	margin: 0 0 .6em;
}
.rm-leadflow__note { font-size: .95rem; opacity: .85; margin-bottom: 1.2em; }
.rm-leadflow__choices { display: grid; gap: .7rem; max-width: 460px; }
.rm-leadflow__choice {
	display: flex;
	align-items: center;
	gap: .9rem;
	text-align: left;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: #fff;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(90, 136, 255, .35);
	border-radius: 12px;
	padding: .9rem 1.2rem;
	cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.rm-leadflow__choice:hover, .rm-leadflow__choice:focus-visible {
	background: rgba(90, 136, 255, .22);
	border-color: var(--bright);
	transform: translateX(4px);
}
.rm-leadflow__choice kbd { flex: none; opacity: .65; }
.rm-leadflow__fields { display: grid; gap: 1.1rem; max-width: 440px; margin-bottom: 1.4rem; }
.rm-leadflow__field span {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .85rem;
	letter-spacing: .04em;
	margin-bottom: .35rem;
	color: #fff;
}
.rm-leadflow__field em { font-style: normal; opacity: .6; font-weight: 400; }
.rm-leadflow__field input {
	width: 100%;
	font: inherit;
	font-size: 1.05rem;
	color: #fff;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(90, 136, 255, .35);
	border-radius: 10px;
	padding: .8rem 1rem;
	outline: none;
	transition: border-color .2s;
}
.rm-leadflow__field input:focus { border-color: var(--yellow); }
.rm-leadflow__field small { display: block; margin-top: .4rem; font-size: .8rem; opacity: .7; }
.rm-leadflow__err { color: var(--yellow); font-weight: 600; margin: 0 0 1rem; }
.rm-leadflow__back {
	display: block;
	margin-top: 2rem;
	background: none;
	border: 0;
	color: var(--ondark-dim);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	padding: 0;
}
.rm-leadflow__back:hover { color: #fff; }
.rm-leadflow .rm-leadflow__hint { margin-left: 1rem; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .rm-leadflow__screen.is-on { animation: none; } }

/* ==========================================================================
   Single blog post
   ========================================================================== */
.rm-phero--post .rm-phero__title { max-width: 24ch; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.rm-post__crumb { color: inherit; text-decoration: none; }
.rm-post__crumb:hover { color: #fff; }
.rm-post__meta { margin-top: .9rem; color: var(--ondark-dim); font-size: .95rem; }
.rm-post__media { max-width: 880px; margin: 2.5rem auto 0; }

.rm-post { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.rm-prose { max-width: 720px; margin-inline: auto; font-size: 1.06rem; line-height: 1.75; }
.rm-prose p { max-width: none; margin: 0 0 1.35em; }
.rm-prose h2, .rm-prose h3, .rm-prose h4 { margin: 1.8em 0 .6em; line-height: 1.25; }
.rm-prose h2 { font-size: 1.65rem; }
.rm-prose h3 { font-size: 1.3rem; }
.rm-prose a { color: var(--blue); }
.rm-prose a:hover { color: var(--bright); }
.rm-prose ul, .rm-prose ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.rm-prose li { margin-bottom: .45em; }
.rm-seoprose { padding: 4.5rem 0 5.5rem; }
.rm-seoprose .rm-prose > h2:first-child { margin-top: 0; }
.rm-prose img { border-radius: 14px; height: auto; }
.rm-prose blockquote {
	margin: 1.8em 0;
	padding: .4em 0 .4em 1.4em;
	border-left: 4px solid var(--magenta);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.15em;
	color: var(--blue);
}
.rm-prose figure { margin: 1.8em 0; }
.rm-prose figcaption { font-size: .85rem; color: #5A5A66; margin-top: .5em; }
.rm-prose iframe { max-width: 100%; }
.rm-prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.rm-prose .wp-block-table td, .rm-prose .wp-block-table th { border: 1px solid var(--line); padding: .6em .8em; }

/* Author bio box — spec per the approved 2026-06-02 prototype */
.rm-author-box {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	background: #f4f6ff;
	border: 1px solid #e3e8ff;
	border-top: 4px solid #A31099;
	border-radius: 14px;
	padding: 28px;
	margin-top: 48px;
}
.rm-author-box__photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.rm-author-box__body p { margin: 0 0 .35em; max-width: none; }
.rm-author-box__eyebrow {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #A31099;
}
.rm-author-box__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: #04006E;
}
.rm-author-box__role { font-weight: 600; color: #5A88FF; font-size: .95rem; }
.rm-author-box__bio { color: #333; font-size: .97rem; line-height: 1.65; margin-top: .5em !important; }
@media (max-width: 600px) {
	.rm-author-box { flex-direction: column; align-items: center; text-align: center; }
}

.rm-post__tags { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 720px; margin: 2rem auto 0; }
.rm-pilllink--static { cursor: default; }
.rm-post__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1.5rem;
	align-items: center;
	max-width: 880px;
	margin: 3rem auto 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
	font-size: .95rem;
}
.rm-post__nav-next { text-align: right; }
.rm-arrowlink--back::after { content: none; }
.rm-arrowlink--back::before {
	content: '90';
	display: inline-block;
	margin-right: .45em;
	transition: transform .25s var(--ease);
}
.rm-arrowlink--back:hover::before { transform: translateX(-.3em); }
.rm-post__related { padding: clamp(2rem, 4vw, 3.5rem) 0; background: var(--paper-soft); }
.rm-post__related .rm-resgrid__grid { margin-top: 1.4rem; }
@media (max-width: 700px) {
	.rm-post__nav { grid-template-columns: 1fr; text-align: left; }
	.rm-post__nav-next { text-align: left; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.rm-chip, .rm-orders__dot, .rm-logos__track, .rm-ticker__link,
	.rm-roi__badge::before, .rm-roi__badge::after { animation: none !important; }
	.rm-btn, .rm-who__tile, .rm-pilllink { transition: none; }
}

/* ==========================================================================
   v0.21.0 additions — testimonial tilt, process video launcher, footer
   ========================================================================== */

/* ---------- Testimonial cards: 3D tilt + cursor glare (mirrors .rm-prod) ---------- */
.rm-quotes__grid { perspective: 1100px; }
.rm-quote {
	position: relative;
	overflow: hidden;
	transform-style: preserve-3d;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
	will-change: transform;
}
.rm-quote:hover { box-shadow: 0 26px 52px -28px rgba(0, 4, 54, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
.rm-quote__glare {
	position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
	transition: opacity .3s var(--ease);
	background: radial-gradient(220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, .5), transparent 60%);
	mix-blend-mode: soft-light;
}
.rm-quote:hover .rm-quote__glare { opacity: 1; }
.rm-quote > :not(.rm-quote__glare) { position: relative; z-index: 1; }
.rm-no-motion .rm-quote { transition: none; }

/* ---------- Process section: trimmed copy + stat chips + video launcher ---------- */
.rm-process__lede { font-size: 1.12rem; max-width: 44ch; margin: 0 0 1.6rem; }
.rm-process__stats { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.8rem; }
.rm-pstat {
	flex: 1 1 140px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(90, 136, 255, .25);
	border-radius: 14px;
	padding: 1rem 1.1rem;
}
.rm-pstat strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--yellow);
	font-variant-numeric: tabular-nums;
	margin-bottom: .4rem;
}
.rm-pstat span { display: block; font-size: .82rem; line-height: 1.4; }

.rm-process__media { display: flex; justify-content: center; }
.rm-videolaunch {
	appearance: none; -webkit-appearance: none;
	border: 0; background: transparent; padding: 0; cursor: pointer;
	display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
	color: inherit; width: 100%;
}
.rm-videolaunch__stage { position: relative; width: min(360px, 80%); }
.rm-videolaunch .rm-cutout { display: block; width: 100%; margin: 0; transition: transform .4s var(--ease); }
.rm-videolaunch:hover .rm-cutout { transform: scale(1.02); }
.rm-videolaunch__play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 78px; height: 78px; border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rm-videolaunch__play::after {
	content: ''; position: absolute; left: 53%; top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid; border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--blue);
}
.rm-videolaunch:hover .rm-videolaunch__play {
	transform: translate(-50%, -50%) scale(1.08);
	box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .6);
}
.rm-videolaunch__label {
	font-family: var(--font-display); font-weight: 600;
	font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ondark-dim);
}
.rm-videolaunch:hover .rm-videolaunch__label { color: #fff; }

/* ---------- Video lightbox ---------- */
body.rm-modal-open { overflow: hidden; }
.rm-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 5vw; }
.rm-modal[hidden] { display: none; }
.rm-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 4, 54, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rm-modal__dialog { position: relative; z-index: 1; width: min(960px, 100%); }
.rm-modal__frame {
	position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
	background: #000; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
}
.rm-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rm-modal__close {
	position: absolute; top: -3rem; right: 0;
	width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .16); color: #fff;
	font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .2s;
}
.rm-modal__close:hover { background: rgba(255, 255, 255, .3); }

/* ---------- Footer: Meridian-style big CTA + scroll reveal ---------- */
/* Curtain reveal: the footer is pinned behind the page and the content
   scrolls up to uncover it. site.js measures the footer, sets --rm-footer-h,
   and adds .rm-reveal (only when the footer fits the viewport). Without JS the
   footer just sits in normal flow — fully progressive. */
.rm-footer > * { position: relative; z-index: 1; }
.rm-reveal .rm-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
.rm-reveal .rm-main {
	position: relative;
	z-index: 1;
	background: var(--paper);
	/* Overlap the footer's top edge by 2px (handles the very-bottom rest state). */
	margin-bottom: calc(var(--rm-footer-h, 0px) - 2px);
	/* …and cap main's own bottom edge with navy. Chrome composites the fixed
	   footer separately and anti-aliases .rm-main's WHITE background edge into a
	   1px hairline where the content layer meets the footer WHILE scrolling —
	   visible only at 100% zoom (Firefox doesn't). A navy bottom border makes
	   main's last pixels navy, so the seam is navy-on-navy with nothing to
	   anti-alias white. (border-box: the border sits inside the box under the
	   navy contact band, so no layout shift / nothing visible is covered.) */
	border-bottom: 3px solid var(--navy);
}
/* The reveal gap below .rm-main (its margin, plus any sub-pixel seam above the
   fixed footer) exposes the body canvas. Paint that canvas navy so the seam
   matches the footer instead of flashing the white page background. .rm-main's
   own paper background still covers the footer for the light page sections. */
body.rm-reveal { background: var(--navy); }
/* The contact band is the homepage's last section before the revealed footer.
   Its 135deg --grad-band ends lighter than the footer's flat --navy, leaving a
   visible tonal line at the reveal boundary. Fade it straight down to the exact
   footer navy so the contact band and footer read as one continuous surface. */
.rm-contact { background: linear-gradient(180deg, var(--blue) 0%, var(--navy) 100%); }

/* Footer brand chip — the RazorCodex chip sitting on the footer: a soft brand
   glow grounding it, a gentle float, and a "magic" pulse that breathes along
   the thin gradient rim (no data rain). Replaces the old small mark. */
.rm-footer__chip { position: relative; width: min(215px, 100%); margin: -.3rem 0 1.3rem -.3rem; }
.rm-footer__chip::before {
	content: ''; position: absolute; inset: 12% 6% 2% 6%; z-index: 0;
	background: radial-gradient(56% 50% at 50% 56%, rgba(163, 16, 153, .45), rgba(90, 136, 255, .28) 46%, transparent 72%);
	filter: blur(24px);
	animation: rm-chip-glow 6.5s ease-in-out infinite;
}
.rm-footer__chip img {
	position: relative; z-index: 1; display: block; width: 100%; height: auto;
	animation: rm-chip-float 7s ease-in-out infinite, rm-chip-rim 3.6s ease-in-out infinite;
}
@keyframes rm-chip-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}
@keyframes rm-chip-glow {
	0%, 100% { opacity: .45; transform: scale(1); }
	50% { opacity: .8; transform: scale(1.05); }
}
/* Rim "magic": a brand-gradient glow that hugs the chip's alpha edge (the thin
   colored rim) and breathes, as if the chip is energizing. */
@keyframes rm-chip-rim {
	0%, 100% { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .45)) drop-shadow(0 0 4px rgba(163, 16, 153, .12)) drop-shadow(0 0 5px rgba(90, 136, 255, .12)); }
	50%      { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .45)) drop-shadow(0 0 12px rgba(163, 16, 153, .6)) drop-shadow(0 0 15px rgba(90, 136, 255, .55)); }
}
@media (prefers-reduced-motion: reduce) {
	.rm-footer__chip img, .rm-footer__chip::before { animation: none; }
}

.rm-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: 3rem; align-items: start;
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: 2.4rem;
}
.rm-footer__headline {
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.08;
	letter-spacing: -.01em; color: #fff; margin: .5rem 0 1rem;
}
.rm-footer__lead { max-width: 46ch; margin: 0 0 1.8rem; color: var(--ondark-dim); }
.rm-footer__top .rm-footer__brand { align-self: start; }
@media (max-width: 880px) {
	.rm-footer__top { grid-template-columns: 1fr; gap: 2rem; }
}

/* nav row is now 3 columns (brand moved into the top CTA band) */
.rm-footer__rail {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid rgba(227, 231, 240, .14);
	padding-top: 2.6rem;
}
@media (max-width: 880px) { .rm-footer__rail { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rm-footer__rail { grid-template-columns: 1fr; gap: 1.8rem; } }

@media (prefers-reduced-motion: reduce) {
	.rm-videolaunch .rm-cutout, .rm-videolaunch__play { transition: none; }
}

/* ==========================================================================
   Legal / content pages (template-legal.php): privacy, accessibility, security
   ========================================================================== */
.rm-legal__rail { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.rm-legal__head { padding-bottom: 1.5rem; margin-bottom: 2.2rem; border-bottom: 1px solid var(--line); }
.rm-legal__head .rm-eyebrow { margin-bottom: .5rem; }
.rm-legal__title { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.rm-legal__body { max-width: 760px; }
.rm-legal__body > :first-child { margin-top: 0; }
.rm-legal__body h1 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin: 2.4rem 0 .55rem; line-height: 1.2; }
.rm-legal__body h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 2rem 0 .55rem; line-height: 1.25; }
.rm-legal__body h3 { font-size: 1.12rem; margin: 1.5rem 0 .4rem; }
.rm-legal__body p { max-width: none; margin: 0 0 1.05em; }
.rm-legal__body ul, .rm-legal__body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.rm-legal__body li { margin-bottom: .4em; }
.rm-legal__body a { color: var(--magenta); text-decoration: underline; text-underline-offset: 2px; }
.rm-legal__body a:hover { color: var(--blue); }
/* Synced/legacy content leaves empty paragraphs — collapse the extra air. */
.rm-legal__body p:empty { display: none; }

/* ==========================================================================
   Report landing (template-report.php) — gated downloadable asset + capture
   ========================================================================== */

/* Hero: copy on the left, white capture card on the right of the navy band */
.rm-report__herorail {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.rm-report__meta {
	margin: 1.4rem 0 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--yellow);
}
@media (max-width: 900px) {
	.rm-report__herorail { grid-template-columns: 1fr; }
}

/* Capture card */
.rm-report__capture {
	background: var(--paper);
	color: var(--ink);
	border-radius: 24px;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.rm-report__cover {
	display: block;
	width: auto;
	max-height: 150px;
	border-radius: 10px;
	box-shadow: 0 18px 36px -22px rgba(0, 4, 54, .55);
	margin: 0 auto 1.3rem;
}
.rm-report__capturecopy { text-align: center; margin-bottom: 1.3rem; }
.rm-report__captitle { color: var(--blue); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: .15em 0 .3em; }
.rm-report__caplede { margin: 0; font-size: .95rem; color: var(--ink); }

/* HubSpot form embed sits inside the white capture card. We borrow the contact
   page's field styling (.rm-contactpage__embed .hs-*) and neutralize its card
   chrome here so it doesn't render as a card-within-a-card. */
.rm-report__embed { margin-top: .4rem; }
.rm-report__capture .rm-contactpage__embed {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.rm-report__phone { margin: 1rem 0 0; text-align: center; font-size: .9rem; color: #5A5A66; }
.rm-report__phone a { color: var(--blue); font-weight: 600; text-decoration: none; }
.rm-report__phone a:hover { color: var(--bright); }

/* Key findings — gradient KPI chips */
.rm-report__findings { padding: clamp(2.8rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.rm-report__intro { max-width: 70ch; margin: .6rem 0 0; color: var(--ink); }
.rm-report__kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.3rem;
	margin-top: 2.2rem;
}
.rm-report__kpi {
	background: var(--paper-soft);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 1.8rem 1.6rem;
	text-align: center;
}
.rm-report__kpinum {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 5vw, 3.6rem);
	line-height: 1;
	letter-spacing: -.02em;
	background-image: var(--grad-kpi);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.rm-report__kpilabel {
	display: block;
	margin-top: .8rem;
	font-size: .92rem;
	line-height: 1.45;
	color: var(--navy);
}
@media (max-width: 820px) {
	.rm-report__kpis { grid-template-columns: 1fr; }
}

/* Closing statement band */
.rm-report__closing {
	background: var(--grad-band);
	color: #fff;
	padding: calc(var(--edge) + 2.5rem) 0 clamp(3rem, 6vw, 5rem);
	text-align: center;
}
.rm-report__quote {
	max-width: 32ch;
	margin: 0 auto 1.8rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 3.2vw, 2.3rem);
	line-height: 1.25;
	color: #fff;
}


/* ==========================================================================
   Webinar pages — template-webinar.php + template-webinars.php
   All classes prefixed .wb-  ·  added v0.28.0
   ========================================================================== */
/* ==========================================================================
   RazorMetrics — Webinar landing page
   Extends site.css. All new classes are prefixed .wb-
   Structure: the prescription's path, cut three times.
   ========================================================================== */

:root {
	--wb-s1: .5rem;
	--wb-s2: 1rem;
	--wb-s3: 1.6rem;
	--wb-s4: 2.6rem;
	--wb-s5: 4.2rem;
	--wb-s6: clamp(4.5rem, 9vw, 8rem);
	--wb-seam: 3px;                 /* the razor hairline */
	--wb-doc: var(--grad-band);     /* physician side: the exam room */
	--wb-mem: #F2F5FD;              /* member side: the counter */
}

/* Keyboard focus. The theme only defines this in a few scoped places, and this
   page's primary action is a gold pill on navy where the UA ring disappears. */
.wb-hero a:focus-visible,
.wb-register a:focus-visible,
.wb-attend a:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 4px;
	border-radius: 999px;
}
.wb-setup a:focus-visible,
.wb-breaks a:focus-visible,
.wb-speaker a:focus-visible {
	outline: 3px solid var(--bright);
	outline-offset: 4px;
}

/* ==========================================================================
   1. Hero — the thesis. The headline is cut in half by the razor.
   ========================================================================== */
.wb-hero {
	position: relative;
	background: var(--navy);
	color: #fff;
	padding-block: clamp(3rem, 6vw, 5rem) 0;
	overflow: hidden;
}

/* A wide, very soft field of Metrics Blue behind the type so the navy
   isn't a flat wall. Offset + blur, never a zero-offset halo. */
.wb-hero::before {
	content: '';
	position: absolute;
	inset: -55% 30% -10% -45%;
	background: radial-gradient(closest-side, rgba(90, 136, 255, .26), transparent 78%);
	pointer-events: none;
}
.wb-hero__rail { position: relative; z-index: 1; }

/* The split headline. Two planes, one cut. */
.wb-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	color: #fff;
	font-size: clamp(2.6rem, 7.2vw, 5.6rem);
	line-height: .95;
	letter-spacing: -.035em;
	margin: 0;
	max-width: 18ch;
}
.wb-hero__line { display: block; }
.wb-hero__line--b {
	padding-left: clamp(1.2rem, 5vw, 4.5rem);
	color: var(--yellow);
}

/* The cut itself: a full-bleed gold hairline on the razor's angle,
   sitting between the two halves of the headline. */
.wb-hero__cut {
	display: block;
	position: relative;
	height: clamp(1.4rem, 3vw, 2.6rem);
	margin: .1em 0;
	pointer-events: none;
}
.wb-hero__cut::before {
	content: '';
	position: absolute;
	left: -50vw;
	right: -50vw;
	top: 50%;
	height: var(--wb-seam);
	background: var(--grad-kpi);
	transform: rotate(-1.55deg);
	transform-origin: center;
	box-shadow: 0 6px 26px -6px rgba(255, 192, 33, .55);
}

.wb-hero__lede {
	font-size: clamp(1.05rem, 1.5vw, 1.28rem);
	line-height: 1.55;
	color: var(--ondark-dim);
	max-width: 56ch;
	margin: var(--wb-s4) 0 0;
}

/* Facts bar + action */
.wb-hero__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wb-s3);
	margin-top: var(--wb-s4);
}
.wb-hero__note {
	font-size: .92rem;
	color: var(--ondark-dim);
	margin: 0;
	max-width: 30ch;
}

.wb-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: var(--wb-s4) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(227, 231, 240, .22);
	border-bottom: 1px solid rgba(227, 231, 240, .22);
}
.wb-fact {
	padding: 1.15rem clamp(1.2rem, 3vw, 2.4rem) 1.15rem 0;
	margin-right: clamp(1.2rem, 3vw, 2.4rem);
	border-right: 1px solid rgba(227, 231, 240, .22);
}
.wb-fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.wb-fact__label {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .7rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(227, 231, 240, .62);
	margin-bottom: .3rem;
}
.wb-fact__value {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	color: #fff;
	letter-spacing: -.01em;
}
.wb-fact__alt { color: rgba(227, 231, 240, .62); font-weight: 600; }

/* Designed "not yet announced" state. Kept for the next webinar built on this
   template, where the date is not set at launch. Reads as deliberate, not broken. */
.wb-fact__value--tba {
	color: var(--yellow);
	font-weight: 600;
	font-size: clamp(.95rem, 1.5vw, 1.1rem);
}
.wb-fact__value--tba::before {
	content: '';
	display: inline-block;
	width: .55rem;
	height: .55rem;
	margin-right: .5rem;
	border-radius: 2px;
	background: rgba(255, 192, 33, .32);
	border: 1px solid var(--yellow);
	vertical-align: baseline;
}

/* Presenter credit — both speakers, equal weight. Small enough not to
   compete with the thesis. The padding clears the hero's razor edge so no
   name lands inside the diagonal. */
.wb-hero__by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem clamp(1.5rem, 3.5vw, 3rem);
	list-style: none;
	margin: var(--wb-s4) 0 0;
	padding: 0 0 calc(var(--edge) + 2.5rem);
}
.wb-person { display: flex; align-items: center; gap: .85rem; }
.wb-person__img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	border: 2px solid rgba(90, 136, 255, .55);
}
.wb-person__text { font-size: .88rem; line-height: 1.4; color: var(--ondark-dim); }
.wb-person__text strong { display: block; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: .98rem; }

/* ==========================================================================
   2. The two surveys — the setup, and where the path begins.
   ========================================================================== */
.wb-setup { background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem) var(--wb-s6); }
.wb-setup__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.wb-setup__copy p { font-size: 1.08rem; line-height: 1.7; }
.wb-setup__copy p:last-child { margin-bottom: 0; }

/* The two source plates. They carry the same light/dark split the findings
   use, so the reader learns the page's two sides here before the first cut. */
.wb-sources { display: grid; gap: var(--wb-s2); }
.wb-source {
	position: relative;
	padding: var(--wb-s3);
	border-radius: 16px;
}
.wb-source--mem { background: var(--wb-mem); border: 1px solid var(--line); }
.wb-source--doc { background: var(--wb-doc); color: #fff; }

.wb-source__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .75rem;
	margin-bottom: .5rem;
}
.wb-source__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--blue);
	line-height: 1.2;
	margin: 0;
}
.wb-source--doc .wb-source__title { color: #fff; }

/* The survey's vintage, set beside the title rather than above it. */
.wb-source__meta {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .78rem;
	line-height: 1;
	padding: .35rem .6rem;
	border-radius: 999px;
	color: var(--magenta);
	background: rgba(163, 16, 153, .10);
}
.wb-source--doc .wb-source__meta { color: var(--yellow); background: rgba(255, 192, 33, .14); }

.wb-source__desc { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--ink); max-width: none; }
.wb-source--doc .wb-source__desc { color: rgba(227, 231, 240, .84); }

/* ==========================================================================
   3. The breaks — a dark field cut by the razor. Three of them.
      --slant is the width of the gap. It narrows on the third.
   ========================================================================== */
/* Extra bottom clearance: the attend band below is rm-edge-top, which pulls
   itself up by --edge to cut into this section. */
.wb-breaks { background: var(--paper); padding-bottom: calc(var(--edge) + 3rem); }

.wb-breaks__head { max-width: 60ch; margin-bottom: var(--wb-s5); }
.wb-breaks__head::before {
	content: '';
	display: block;
	width: 64px;
	height: var(--wb-seam);
	background: var(--grad-kpi);
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.wb-breaks__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	color: var(--blue);
	margin: var(--wb-s2) 0 .6rem;
}
.wb-breaks__lede { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--ink); }

.wb-break { --slant: clamp(2rem, 5.5vw, 5rem); margin-bottom: var(--wb-s5); }
.wb-break:last-child { margin-bottom: 0; }

.wb-break__head { margin-bottom: var(--wb-s3); max-width: 62ch; }
.wb-break__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--blue);
	margin: 0 0 .5rem;
}
.wb-break__tension { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink); }

/* The field: two panels, parallel diagonal edges, a gap of --slant between.
   Subgrid keeps the two stats on shared rows, so the comparison actually
   lines up. That alignment is the whole argument. */
.wb-break__field {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto auto;
	min-height: 260px;
}
.wb-break__panel {
	position: relative;
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: subgrid;
	align-content: start;
	padding: clamp(1.8rem, 3.4vw, 3rem);
	transition: transform .9s var(--ease);
}
.wb-break__panel--doc {
	grid-column: 1;
	background: var(--wb-doc);
	color: #fff;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
	padding-right: calc(var(--slant) + clamp(1.8rem, 3.4vw, 3rem));
}
.wb-break__panel--mem {
	grid-column: 2;
	background: var(--wb-mem);
	color: var(--ink);
	clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
	padding-left: calc(var(--slant) + clamp(1.8rem, 3.4vw, 3rem));
}
/* Browsers without subgrid still get a sane stacked panel. */
@supports not (grid-template-rows: subgrid) {
	.wb-break__panel { display: flex; flex-direction: column; }
}

/* --- Finding two: asymmetric. ---------------------------------------------
   One side counts events, the other counts people. Pairing them on a shared
   numeric baseline would imply an equivalence the data does not support, so
   only the legend row aligns and each side keeps its own shape. */
.wb-break--asym .wb-break__field { grid-template-rows: auto 1fr; }

.wb-pair { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wb-s3); }
.wb-pair__item {
	display: grid;
	gap: .3rem;
	padding-left: 1rem;
	border-left: 1px solid rgba(4, 0, 110, .22);
}
.wb-pair__q {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--blue);
}
.wb-pair__a { font-size: .98rem; line-height: 1.55; color: var(--ink); }

/* --- Finding three: joined. -----------------------------------------------
   The sides agree, so the field stops being two fields. No slant, one ground,
   and the cut reduced to a hairline scar down the middle. */
.wb-break--joined { --slant: 0px; }
/* The gradient lives on the FIELD, not on each panel, so the two halves share
   one continuous ground instead of restarting the ramp at the seam. */
.wb-break--joined .wb-break__field {
	grid-template-rows: auto auto auto auto;
	background: var(--wb-doc);
}
/* On the joined navy ground the member track must read light, not the dark
   track it uses against paper. */
.wb-break--joined .wb-break__panel--mem .wb-mark { background: rgba(227, 231, 240, .18); }
.wb-break--joined .wb-break__panel {
	background: none;
	color: #fff;
	clip-path: none;
	padding: clamp(1.8rem, 3.4vw, 3rem) clamp(2rem, 4vw, 3.4rem);
}
/* These selectors must out-specify .wb-break__panel--mem further down the file,
   which otherwise repaints the member number Razor Blue on navy. */
.wb-break--joined .wb-break__panel--doc .wb-break__side { color: var(--bright); }
.wb-break--joined .wb-break__panel--mem .wb-break__side { color: #F09BE9; }
/* Both numbers turn gold once the two sides land on the same answer. */
.wb-break--joined .wb-break__panel .wb-stat__num { color: var(--yellow); }
.wb-break--joined .wb-break__panel .wb-stat__label { color: rgba(227, 231, 240, .84); }
.wb-break--joined .wb-break__field::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: var(--wb-seam);
	background: var(--grad-kpi);
	transform: translateX(-50%);
}

/* The authored moment: the panels start joined and the razor opens them. */
.wb-anim .wb-break__panel--doc { transform: translateX(calc(var(--slant) * .5)); }
.wb-anim .wb-break__panel--mem { transform: translateX(calc(var(--slant) * -.5)); }
.wb-anim .wb-break.is-cut .wb-break__panel--doc,
.wb-anim .wb-break.is-cut .wb-break__panel--mem { transform: none; }

/* A legend, not an eyebrow: it names which population owns the number
   below it, so it reads as a key with a swatch. */
.wb-break__side {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
	padding-bottom: var(--wb-s4);
	color: var(--bright);
}
.wb-break__side::before {
	content: '';
	flex: none;
	width: 11px;
	height: 11px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.wb-break__panel--mem .wb-break__side { color: var(--magenta); }

.wb-stat__num {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: .92;
	letter-spacing: -.04em;
	font-size: clamp(2.4rem, 5.2vw, 4.1rem);
	color: #fff;
	margin-bottom: .55rem;
	text-wrap: balance;
}
.wb-break__panel--mem .wb-stat__num { color: var(--blue); }
.wb-stat__label {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(227, 231, 240, .84);
	max-width: 30ch;
}
.wb-break__panel--mem .wb-stat__label { color: var(--ink); }

/* --- Proportion marks ----------------------------------------------------
   Drawn from the real survey values, never a decorative bar. --v carries the
   measured figure, so the mark and the number can never drift apart. */
.wb-mark {
	position: relative;
	height: 9px;
	margin-top: var(--wb-s3);
	max-width: 30ch;
	border-radius: 999px;
	background: rgba(227, 231, 240, .18);
	overflow: hidden;
}
.wb-break__panel--mem .wb-mark { background: rgba(4, 0, 110, .12); }
.wb-mark__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--v);
	border-radius: 999px;
	background: var(--grad-kpi);
	transform-origin: left center;
	transition: transform 1.1s var(--ease) .15s;
}
/* Default (no JS, reduced motion) is the true value already drawn. Only the
   animated build starts at zero, and each bar waits for its OWN observer so it
   never grows while it is still below the fold. */
.wb-anim .wb-mark__fill { transform: scaleX(0); }
.wb-anim .wb-mark.is-shown .wb-mark__fill { transform: scaleX(1); }

.wb-stat__also {
	margin: var(--wb-s2) 0 0;
	padding-top: var(--wb-s2);
	border-top: 1px solid rgba(227, 231, 240, .22);
	font-size: .93rem;
	line-height: 1.5;
	color: rgba(227, 231, 240, .72);
	max-width: 30ch;
}
.wb-break__panel--mem .wb-stat__also {
	border-top-color: var(--line);
	color: #55607A;
}

/* The payoff line under each field. */
.wb-break__see {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	margin: var(--wb-s3) 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	max-width: 74ch;
}
.wb-break__see::before {
	content: '';
	flex: none;
	width: 26px;
	height: var(--wb-seam);
	background: var(--grad-kpi);
	transform: translateY(-.35em);
}

/* ==========================================================================
   4. Who should attend — a list, not a card grid.
   ========================================================================== */
.wb-attend { background: var(--navy); color: #fff; padding-block: var(--wb-s6); }
.wb-attend__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.wb-attend__title { color: #fff; margin-bottom: var(--wb-s2); }
.wb-attend__lede { color: var(--ondark-dim); margin: 0; font-size: 1.05rem; line-height: 1.6; }

.wb-attend__list { list-style: none; margin: 0; padding: 0; }
.wb-attend__item {
	display: flex;
	gap: 1.1rem;
	align-items: baseline;
	padding: 1.15rem 0;
	border-bottom: 1px solid rgba(227, 231, 240, .18);
	font-size: clamp(1.02rem, 1.5vw, 1.18rem);
	line-height: 1.5;
	color: #fff;
}
.wb-attend__item:first-child { padding-top: 0; }
.wb-attend__item:last-child { border-bottom: 0; padding-bottom: 0; }
.wb-attend__item svg { flex: none; width: 20px; height: 20px; transform: translateY(.25em); color: var(--yellow); }

/* ==========================================================================
   5. Speaker
   ========================================================================== */
.wb-speaker { background: var(--paper); padding-block: var(--wb-s6); }
.wb-speaker__head { margin-bottom: var(--wb-s4); }

/* Two speakers, one treatment. Same portrait ratio, same razor cut, same
   scale: the roles differ, the presentation does not. */
.wb-speakers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
/* Rows: portrait, name, role, LinkedIn, bio. Fixed rows keep both cards'
   names and bios on the same lines even when a role wraps. */
.wb-spk { display: grid; grid-template-rows: auto auto auto auto auto; align-content: start; justify-items: start; }
.wb-spk__figure { margin: 0 0 var(--wb-s3); }
.wb-spk__figure img {
	display: block;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 8%;
	background: #8CB4FF;
	/* the same razor cut the break fields use */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%);
}
.wb-spk__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	color: var(--blue);
	line-height: 1.15;
	letter-spacing: -.015em;
	margin: 0 0 .2rem;
}
.wb-spk__role {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	color: var(--magenta);
	margin: 0 0 var(--wb-s2);
}
.wb-spk__bio { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); max-width: 46ch; }

/* Visually hidden, still read aloud — lets each LinkedIn link carry the
   speaker's name so they are distinguishable out of context. */
.wb-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.wb-spk__li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 var(--wb-s2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .88rem;
	color: var(--blue);
	text-decoration: none;
	transition: color .2s var(--ease);
}
.wb-spk__li svg { width: 16px; height: 16px; flex: none; }
.wb-spk__li:hover { color: var(--bright); }

/* --- Run of show ---------------------------------------------------------
   Three beats on one line. The page's path motif, at the size of the ask. */
.wb-run {
	list-style: none;
	margin: var(--wb-s5) auto 0;
	padding: 0;
	max-width: 980px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	text-align: left;
}
.wb-run__step {
	position: relative;
	padding: var(--wb-s3) clamp(1rem, 2vw, 1.6rem) 0 0;
	border-top: 1px solid rgba(227, 231, 240, .26);
}
.wb-run__step::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: var(--wb-seam);
	background: var(--grad-kpi);
	transform: translateY(-1px);
}
.wb-run__what {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.08rem;
	color: #fff;
	margin-bottom: .35rem;
}
.wb-run__detail { display: block; font-size: .93rem; line-height: 1.55; color: rgba(227, 231, 240, .74); }
/* ==========================================================================
   6. Register — the close. The path joins.
   ========================================================================== */
.wb-register {
	background: var(--grad-band);
	color: #fff;
	padding-block: var(--wb-s6);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.wb-register::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -1px;
	width: 220vw;
	height: var(--wb-seam);
	background: var(--grad-kpi);
	transform: translateX(-50%) rotate(-1.1deg);
}
.wb-register__title {
	font-family: var(--font-display);
	font-weight: 700;
	color: #fff;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -.03em;
	margin: 0 auto var(--wb-s3);
	max-width: 24ch;
	text-wrap: balance;
}
.wb-register__lede {
	color: var(--ondark-dim);
	font-size: 1.08rem;
	line-height: 1.6;
	margin: 0 auto var(--wb-s4);
	max-width: 56ch;
}
.wb-register__facts {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .6rem 1.6rem;
	margin: var(--wb-s4) 0 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
	color: rgba(227, 231, 240, .72);
}
.wb-register__facts li { display: flex; align-items: center; gap: .5rem; }
.wb-register__facts svg { width: 16px; height: 16px; color: var(--yellow); flex: none; }

.wb-register .rm-btn--gold { font-size: 1.06rem; padding: 1.15rem 2.4rem; margin-top: var(--wb-s5); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.wb-setup__grid,
	.wb-attend__grid { grid-template-columns: 1fr; }
	.wb-run { grid-template-columns: 1fr; gap: var(--wb-s2); }
	.wb-run__step { padding-right: 0; }
	/* Speakers stay two-up as long as they fit; below 640 they stack, still
	   sharing one treatment. */
	.wb-speakers { gap: 1.6rem; }
	.wb-spk__bio { font-size: .95rem; }
}

@media (max-width: 640px) {
	.wb-speakers { grid-template-columns: 1fr; gap: var(--wb-s4); }
	.wb-spk__figure img { max-width: 200px; }
}

@media (max-width: 780px) {
	/* The cut turns horizontal: the razor edge the theme already uses. */
	.wb-break__field { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
	.wb-break__panel {
		grid-row: auto;
		grid-column: 1;
		display: flex;
		flex-direction: column;
	}
	.wb-break__side { padding-bottom: var(--wb-s3); }
	.wb-break__panel--doc {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
		padding-right: clamp(1.8rem, 3.4vw, 3rem);
		padding-bottom: calc(var(--slant) + 1.6rem);
	}
	.wb-break__panel--mem {
		clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
		padding-left: clamp(1.8rem, 3.4vw, 3rem);
		padding-top: calc(var(--slant) + 1.6rem);
		/* Leaves a wedge of paper between the panels, so the gap survives the
		   stack. Proportional to --slant, so finding three still reads tighter. */
		margin-top: calc(var(--slant) * -.7);
	}
	.wb-anim .wb-break__panel--doc { transform: translateY(calc(var(--slant) * .4)); }
	.wb-anim .wb-break__panel--mem { transform: translateY(calc(var(--slant) * -.4)); }
	.wb-stat__label, .wb-stat__also { max-width: none; }

	/* Finding three stays joined when stacked: no slant, no offset, and the
	   vertical scar becomes a horizontal one between the two halves. */
	.wb-break--joined .wb-break__panel--mem { margin-top: 0; padding-top: clamp(1.8rem, 3.4vw, 3rem); }
	.wb-break--joined .wb-break__field::after {
		left: 0;
		right: 0;
		top: 50%;
		bottom: auto;
		width: auto;
		height: var(--wb-seam);
		transform: none;
	}
	.wb-anim .wb-break--joined .wb-break__panel { transform: none; }

	.wb-hero__title { max-width: none; }
	.wb-hero__line--b { padding-left: 1.2rem; }

	/* Two-up so the primary action still lands in the first viewport. */
	.wb-facts { display: grid; grid-template-columns: 1fr 1fr; }
	.wb-fact {
		padding: .9rem 1rem .9rem 0;
		margin-right: 0;
		border-right: 0;
		border-bottom: 1px solid rgba(227, 231, 240, .18);
	}
	.wb-fact:nth-child(odd) { border-right: 1px solid rgba(227, 231, 240, .18); padding-right: 1.2rem; }
	.wb-fact:nth-child(even) { padding-left: 1.2rem; }
	.wb-fact:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wb-anim .wb-break__panel--doc,
	.wb-anim .wb-break__panel--mem { transform: none !important; }
	.wb-break__panel { transition: none; }
}

/* ---------- /webinars/ hub ---------- */
.wb-hubhero {
	background: var(--navy);
	color: #fff;
	padding-block: clamp(3rem, 6vw, 5rem) calc(var(--edge) + 3rem);
	position: relative;
	overflow: hidden;
}
.wb-hubhero::before {
	content: '';
	position: absolute;
	inset: -60% 35% -10% -40%;
	background: radial-gradient(closest-side, rgba(90, 136, 255, .26), transparent 78%);
	pointer-events: none;
}
.wb-hubhero .rm-rail { position: relative; z-index: 1; }
.wb-hubhero__title {
	font-family: var(--font-display);
	font-weight: 700;
	color: #fff;
	font-size: clamp(2.6rem, 6.5vw, 5rem);
	line-height: .98;
	letter-spacing: -.035em;
	margin: 0 0 var(--wb-s3);
}
.wb-hubhero__lede {
	font-size: clamp(1.05rem, 1.5vw, 1.24rem);
	line-height: 1.6;
	color: var(--ondark-dim);
	max-width: 58ch;
	margin: 0;
}

.wb-hub { background: var(--paper); padding-block: var(--wb-s6); }
.wb-hub .rm-h2 { margin-bottom: var(--wb-s4); }
.wb-hub__h2--past { margin-top: var(--wb-s6); }

/* auto-fit with a max keeps ONE card looking deliberate rather than stretched */
.wb-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
	justify-content: start;
	gap: clamp(1.5rem, 3vw, 2.4rem);
}

.wb-card {
	position: relative;
	background: var(--paper-soft);
	border: 1px solid var(--line);
	/* the razor cut, at card scale */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), 0 100%);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wb-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -26px rgba(0, 4, 54, .45); }
.wb-card__body { padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2rem) calc(1.6rem + clamp(1.4rem, 2.6vw, 2rem)); }

.wb-card__when {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .85rem;
	color: var(--magenta);
	margin: 0 0 .6rem;
}
.wb-card__dot { margin: 0 .45rem; opacity: .5; }
.wb-card__tba { color: #7A6A2E; }

.wb-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 0 0 .6rem;
}
.wb-card__title a { color: var(--blue); text-decoration: none; }
.wb-card__title a:hover { color: var(--bright); }
/* the whole card is the hit area, without nesting interactive elements */
.wb-card__title a::after { content: ''; position: absolute; inset: 0; }

.wb-card__blurb { margin: 0 0 var(--wb-s3); font-size: .98rem; line-height: 1.6; color: var(--ink); max-width: none; }

.wb-card__people { list-style: none; margin: 0 0 var(--wb-s3); padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.wb-card__people li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #55607A; }
.wb-card__people img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }

.wb-card--past { background: var(--paper); }
.wb-card--past .wb-card__when { color: #55607A; }

.wb-hub__empty {
	max-width: 56ch;
	padding-top: var(--wb-s2);
	border-top: var(--wb-seam) solid transparent;
}
.wb-hub__empty p { font-size: 1.05rem; line-height: 1.65; margin-bottom: var(--wb-s3); }

@media (max-width: 700px) {
	.wb-hub__grid { grid-template-columns: 1fr; }
}