/**
 * Public-facing pages.
 *
 * Ported section by section from the mockup homepage. Where the mockup uses a
 * Tailwind utility, the equivalent computed value is used here rather than an
 * approximation: max-w-7xl is 80rem, the gap between sections is mt-16 (4rem),
 * and rounded-2xl resolves against the mockup's own --radius-2xl of 1.75rem,
 * not Tailwind's default.
 *
 * Order matches the page: hero, feature strip, stats, category rail, unit
 * rail, how it works, live, app, community, testimonials, about band, FAQ.
 */

/* Sections stack at a fixed 4rem rhythm, matching the mockup's mt-16. The
   feature strip is the exception: it overlaps the hero by 2.5rem. */
.rcm-section {
	max-width: var(--rcm-container);
	margin-inline: auto;
	margin-top: 4rem;
	padding-inline: var(--rcm-gutter);
}

.rcm-section--narrow {
	max-width: 48rem;
}

/* 72rem. Inner content pages sit a step narrower than the homepage, which
   runs the full 80rem. */
.rcm-section--mid {
	max-width: 72rem;
}

.rcm-section--tight {
	margin-top: 2.5rem;
}

.rcm-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.rcm-section-head + * {
	margin-top: 1.5rem;
}

/* ------------------------------------------------------------------- hero */

.rcm-hero {
	position: relative;
	max-width: var(--rcm-container);
	margin: 1rem auto 0;
	border-radius: var(--rcm-radius-lg);
	overflow: hidden;
	background: var(--rcm-navy-deep);
	isolation: isolate;
}

@media (min-width: 40rem) {
	.rcm-hero {
		border-radius: var(--rcm-radius-2xl);
	}
}

.rcm-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.rcm-hero__slide.is-active {
	opacity: 1;
}

/*
 * Full strength, with the darkening done once above them.
 *
 * Each image used to carry opacity: 0.55 of its own. During a crossfade two
 * of them are painted at once, the navy behind shows through both, and the
 * scrim lightens — which is a hero with two photographs visible through each
 * other and white text over whatever bright thing happens to be underneath.
 * One overlay above the image layer keeps the darkening constant whatever the
 * slides are doing.
 */
.rcm-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

/*
 * Above every slide, below the copy. Stronger at the left, where the words
 * are, and stronger again at the foot for the dots.
 */
.rcm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to right, rgb(7 21 58 / 0.92) 0%, rgb(7 21 58 / 0.78) 45%, rgb(7 21 58 / 0.55) 100%),
		linear-gradient(to top, rgb(7 21 58 / 0.65) 0%, rgb(7 21 58 / 0) 40%);
}

/* Left-weighted scrim: the copy sits left, so the image stays readable right. */

/* The extra bottom padding below 64rem is not decorative: the feature strip
   overlaps the hero by 2.5rem, and without it the strip covers the slide dots.
   The arrows are hidden under 48rem, so the dots are the only control a phone
   user has. */
.rcm-hero__inner {
	position: relative;
	display: grid;
	gap: 1.5rem;
	padding: 2rem 1.25rem 4.5rem;
	/*
	 * Above the overlay, which sits at 1 over the slide layer. A second rule
	 * raising this elsewhere in the file was overridden by this one and the
	 * copy came out dimmed — the z-index belongs where the element is laid
	 * out, not in a patch further up.
	 */
	z-index: 2;
}

@media (min-width: 40rem) {
	.rcm-hero__inner {
		gap: 2rem;
		padding: 3rem 3rem 4.5rem;
	}
}

@media (min-width: 64rem) {
	.rcm-hero__inner {
		grid-template-columns: 7fr 5fr;
		align-items: center;
		padding: 4rem;
	}
}

.rcm-hero__copy-slide[hidden] {
	display: none;
}

.rcm-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--rcm-radius-pill);
	background: rgb(255 255 255 / 0.1);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
	color: #fff;
	font-size: var(--rcm-text-xs);
	font-weight: 600;
}

.rcm-hero__kicker .rcm-icon {
	color: var(--rcm-gold);
	fill: var(--rcm-gold);
}

.rcm-hero__title {
	margin: 1rem 0 0;
	font-size: var(--rcm-text-4xl);
	font-weight: 800;
	color: #fff;
	line-height: 1.02;
}

.rcm-hero__title span {
	display: block;
	color: var(--rcm-gold);
	margin-top: 0.1em;
}

.rcm-hero__text {
	margin: 1rem 0 0;
	max-width: 36rem;
	color: rgb(255 255 255 / 0.8);
	font-size: var(--rcm-text-sm);
	line-height: 1.65;
}

@media (min-width: 40rem) {
	.rcm-hero__text {
		font-size: var(--rcm-text-base);
	}
}

.rcm-hero__actions {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

@media (min-width: 40rem) {
	.rcm-hero__actions {
		display: flex;
		flex-wrap: wrap;
		margin-top: 2rem;
	}
}

.rcm-hero__dots {
	display: flex;
	gap: 0.125rem;
	margin-top: 1.6rem;
	margin-left: -0.5rem;
}

/* 6px of paint inside a 44px target. background-clip keeps the dot visually
   the same size while padding gives a thumb something to hit — without this
   the carousel had no usable control on a phone. */
.rcm-hero__dot {
	box-sizing: content-box;
	height: 0.375rem;
	width: 0.625rem;
	border: 0;
	padding: 1.1rem 0.5rem;
	background-clip: content-box;
	border-radius: var(--rcm-radius-pill);
	background-color: rgb(255 255 255 / 0.4);
	transition: width 0.25s ease, background-color 0.25s ease;
	cursor: pointer;
}

.rcm-hero__dot[aria-current="true"] {
	width: 2rem;
	background-color: var(--rcm-gold);
}

.rcm-hero__arrow {
	position: absolute;
	/*
	 * Above the copy column, not merely above the overlay.
	 *
	 * The arrows come before .rcm-hero__inner in the markup, so at the same
	 * z-index the column paints over them — it spans the full width of the
	 * hero, so it covered both arrows completely and the clicks landed on it
	 * instead. They were unreachable rather than merely dim.
	 */
	z-index: 3;
	top: 50%;
	translate: 0 -50%;
	display: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.15);
	color: #fff;
	backdrop-filter: blur(4px);
	cursor: pointer;
}

.rcm-hero__arrow:hover {
	background: rgb(255 255 255 / 0.25);
}

.rcm-hero__arrow--prev {
	left: 0.75rem;
}

.rcm-hero__arrow--next {
	right: 0.75rem;
	background: var(--rcm-navy);
}

.rcm-hero__arrow--next:hover {
	background: var(--rcm-navy-hover);
}

@media (min-width: 48rem) {
	.rcm-hero__arrow {
		display: grid;
	}
}

/* Floating cards, hidden below lg where they would push the headline off a
   phone screen. */
.rcm-hero__aside {
	display: none;
}

@media (min-width: 64rem) {
	.rcm-hero__aside {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.75rem;
	}
}

.rcm-hero__mini {
	width: 18rem;
	padding: 1rem;
	border-radius: var(--rcm-radius-lg);
	background: var(--rcm-card);
	box-shadow: var(--rcm-shadow-lift);
}

.rcm-hero__mini--dark {
	background: var(--rcm-navy-mid);
	color: #fff;
}

.rcm-hero__mini-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

/* Progress ring on the dark mini card. */
.rcm-ring {
	position: relative;
	width: 4rem;
	height: 4rem;
	flex: 0 0 auto;
}

.rcm-ring svg {
	width: 100%;
	height: 100%;
	rotate: -90deg;
}

.rcm-ring__track {
	stroke: rgb(255 255 255 / 0.15);
}

.rcm-ring__value {
	stroke: var(--rcm-gold);
	stroke-linecap: round;
}

.rcm-ring__label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: var(--rcm-text-xs);
	font-weight: 700;
	color: #fff;
}

/* --------------------------------------------------------- feature strip */

.rcm-features {
	position: relative;
	z-index: 2;
	max-width: 72rem;
	margin: -2.5rem auto 0;
	padding-inline: var(--rcm-gutter);
}

.rcm-features__inner {
	display: grid;
	gap: 1rem;
	padding: 1.25rem 1rem;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-lg);
	box-shadow: var(--rcm-shadow-lift);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.rcm-features__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.rcm-features__inner {
		grid-template-columns: repeat(5, 1fr);
	}
}

.rcm-feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	border-radius: var(--rcm-radius);
	text-decoration: none;
	color: inherit;
	padding: 0.25rem;
}

a.rcm-feature:hover {
	background: var(--rcm-muted);
}

.rcm-feature__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--rcm-navy-08);
	color: var(--rcm-navy);
}

.rcm-feature__title {
	display: block;
	font-size: var(--rcm-text-sm);
	font-weight: 700;
	margin: 0;
}

.rcm-feature__text {
	display: block;
	font-size: var(--rcm-text-xs);
	line-height: 1.55;
	color: var(--rcm-muted-fg);
	margin: 0.15rem 0 0;
}

/* ------------------------------------------------------------ stats band */

.rcm-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--rcm-navy-deep);
	border-radius: var(--rcm-radius-lg);
	color: #fff;
}

@media (min-width: 40rem) {
	.rcm-stats {
		padding: 1.25rem 2.5rem;
	}
}

.rcm-stat {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 7rem;
}

.rcm-stat__icon {
	color: var(--rcm-gold);
	flex: 0 0 auto;
	display: grid;
}

.rcm-stat__value {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin: 0;
	color: #fff;
}

.rcm-stat__label {
	font-size: var(--rcm-text-xs);
	color: rgb(255 255 255 / 0.7);
	margin: 0;
}

/* ------------------------------------------------------- programme cards */

.rcm-program {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: box-shadow 0.16s ease;
}

.rcm-program:hover {
	box-shadow: var(--rcm-shadow-soft);
}

/* Circle, 3rem, tinted per programme. Tones mirror the mockup's Tailwind
   pairs (bg-*-50 with text-*-700); 'navy' is the fallback when a term has no
   accent set. */
.rcm-program__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--rcm-navy-08);
	color: var(--rcm-navy);
}

.rcm-tone-navy    { background: var(--rcm-navy-08); color: var(--rcm-navy); }
.rcm-tone-emerald { background: #ecfdf5; color: #047857; }
.rcm-tone-sky     { background: #f0f9ff; color: #0369a1; }
.rcm-tone-amber   { background: #fffbeb; color: #b45309; }
.rcm-tone-indigo  { background: #eef2ff; color: #4338ca; }
.rcm-tone-rose    { background: #fff1f2; color: #be123c; }
.rcm-tone-teal    { background: #f0fdfa; color: #0f766e; }
.rcm-tone-orange  { background: #fff7ed; color: #c2410c; }
.rcm-tone-violet  { background: #f5f3ff; color: #6d28d9; }
.rcm-tone-cyan    { background: #ecfeff; color: #0e7490; }
.rcm-tone-lime    { background: #f7fee7; color: #4d7c0f; }

.rcm-program__name {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	line-height: 1.35;
	margin: 1rem 0 0;
}

.rcm-program__blurb {
	font-size: var(--rcm-text-xs);
	line-height: 1.6;
	color: var(--rcm-muted-fg);
	margin: 0.5rem 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.rcm-program__count {
	font-size: var(--rcm-text-xs);
	font-weight: 600;
	color: var(--rcm-navy);
	margin: 1rem 0 0;
}

/* ------------------------------------------------------------ unit cards */

.rcm-unit {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	height: 100%;
}

.rcm-unit__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.rcm-unit__level {
	font-size: var(--rcm-text-xs);
	color: var(--rcm-muted-fg);
}

.rcm-unit__title {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-base);
	font-weight: 600;
	line-height: 1.35;
	margin: 0.75rem 0 0;
}

.rcm-unit__title a {
	color: inherit;
	text-decoration: none;
}

.rcm-unit__title a:hover {
	color: var(--rcm-navy);
}

.rcm-unit__summary {
	flex: 1;
	font-size: var(--rcm-text-sm);
	line-height: 1.55;
	color: var(--rcm-muted-fg);
	margin: 0.5rem 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

/* auto, not a fixed margin: a card showing a progress bar would otherwise push
   its price and buttons a few pixels below its neighbours' in the same row. */
.rcm-unit__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 1rem;
	flex-wrap: wrap;
}

.rcm-unit__actions {
	display: flex;
	gap: 0.5rem;
}

/* With no fee to show there is nothing on the left, so the buttons move right
   rather than sitting against the card edge with dead space beside them. */
.rcm-unit__foot--no-price {
	justify-content: flex-end;
}

.rcm-price {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-base);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--rcm-navy);
	margin: 0;
}

/* --------------------------------------------------------- how it works */

.rcm-how {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64rem) {
	.rcm-how {
		grid-template-columns: 1fr 1fr;
	}
}

/* Numbered because the content really is a sequence: pick, pay, join, sit.
   The numerals are the only gold in this block. */
.rcm-how__steps {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.rcm-how__step {
	display: flex;
	gap: 1rem;
}

.rcm-how__n {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-2xl);
	font-weight: 700;
	color: var(--rcm-gold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.rcm-how__title {
	font-weight: 600;
	margin: 0;
}

.rcm-how__text {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	margin: 0.15rem 0 0;
	line-height: 1.6;
}

.rcm-how__media {
	border-radius: var(--rcm-radius-2xl);
	overflow: hidden;
	max-height: 22rem;
}

.rcm-how__media img {
	width: 100%;
	height: 100%;
	max-height: 22rem;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------- live rows */

.rcm-live-grid {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 48rem) {
	.rcm-live-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rcm-live {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.16s ease;
}

.rcm-live:hover {
	border-color: var(--rcm-navy-12);
}

.rcm-live__level {
	font-size: var(--rcm-text-xs);
	font-weight: 600;
	color: var(--rcm-navy);
	margin: 0;
}

.rcm-live__title {
	font-weight: 600;
	font-size: var(--rcm-text-base);
	margin: 0.1rem 0 0;
	line-height: 1.35;
}

.rcm-live__meta {
	font-size: var(--rcm-text-xs);
	color: var(--rcm-muted-fg);
	margin: 0.15rem 0 0;
}

.rcm-live__empty {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	margin: 0;
}

/* Countdown to the next sitting. */
.rcm-countdown {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--rcm-gold-12);
	border: 1px solid rgb(232 163 23 / 0.35);
	border-radius: var(--rcm-radius-lg);
}

.rcm-countdown__value {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-2xl);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	margin: 0.15rem 0 0;
	color: var(--rcm-navy-deep);
}

/* -------------------------------------------------------------- app promo */

.rcm-app {
	position: relative;
	overflow: hidden;
	background: var(--rcm-navy-deep);
	border-radius: var(--rcm-radius-2xl);
	color: #fff;
}

.rcm-app__inner {
	display: grid;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem 1.25rem;
}

@media (min-width: 40rem) {
	.rcm-app__inner {
		padding: 2rem;
	}
}

@media (min-width: 64rem) {
	.rcm-app__inner {
		grid-template-columns: 1.25fr 0.75fr;
		gap: 2rem;
		padding: 2rem 2.5rem;
	}
}

.rcm-app__title {
	font-size: var(--rcm-text-3xl);
	font-weight: 700;
	color: #fff;
	margin: 0.5rem 0 0;
}

.rcm-app__title span {
	color: var(--rcm-gold);
}

.rcm-app__rule {
	display: block;
	width: 3.5rem;
	height: 2px;
	border-radius: var(--rcm-radius-pill);
	background: var(--rcm-gold);
	margin-top: 0.5rem;
}

.rcm-app__lede {
	margin: 0.75rem 0 0;
	max-width: 32rem;
	font-size: var(--rcm-text-sm);
	line-height: 1.65;
	color: rgb(255 255 255 / 0.8);
}

.rcm-app__lede strong {
	color: var(--rcm-gold);
}

.rcm-app__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.rcm-app__nav li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rcm-app__nav-icon {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid rgb(232 163 23 / 0.7);
	color: var(--rcm-gold);
	flex: 0 0 auto;
}

.rcm-app__nav-icon .rcm-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.rcm-app__nav-label {
	font-size: var(--rcm-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rcm-gold);
}

.rcm-app__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.rcm-app__device {
	display: grid;
	place-items: center;
}

/* Placeholder handset, used until a real screenshot is exported to
   assets/img/app-phone.png. */
.rcm-device {
	width: min(100%, 13rem);
	aspect-ratio: 9 / 18;
	padding: 0.5rem;
	border-radius: 2.5rem;
	background: #0a0d16;
	box-shadow: 0 28px 50px -18px rgb(0 0 0 / 0.65);
}

.rcm-device__screen {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.75rem;
	height: 100%;
	border-radius: 2rem;
	background: var(--rcm-navy-mid);
	padding: 1rem;
	text-align: center;
}

.rcm-device__screen img {
	width: 5rem;
	height: auto;
}

.rcm-device__screen p {
	font-family: var(--rcm-font-display);
	font-weight: 700;
	color: #fff;
	margin: 0;
	font-size: var(--rcm-text-xs);
}

/* ---------------------------------------------------------- study groups */

.rcm-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: border-color 0.16s ease;
}

.rcm-group:hover {
	border-color: var(--rcm-navy-12);
}

.rcm-group__body {
	min-width: 0;
}

.rcm-group__program {
	font-size: var(--rcm-text-xs);
	font-weight: 600;
	color: var(--rcm-navy);
	margin: 0;
}

.rcm-group__name {
	font-weight: 600;
	margin: 0.1rem 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rcm-group__meta {
	font-size: var(--rcm-text-xs);
	color: var(--rcm-muted-fg);
	margin: 0.15rem 0 0;
}

/* ---------------------------------------------------------- testimonials */

.rcm-quotes {
	display: grid;
	gap: 1rem;
}

@media (min-width: 48rem) {
	.rcm-quotes {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rcm-quote {
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	padding: 1.5rem;
	margin: 0;
}

.rcm-quote__person {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.rcm-quote__avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.rcm-quote__name {
	font-weight: 600;
	margin: 0;
}

.rcm-quote__role {
	font-size: var(--rcm-text-xs);
	color: var(--rcm-muted-fg);
	margin: 0;
}

.rcm-quote__body {
	margin: 1rem 0 0;
	font-size: var(--rcm-text-sm);
	line-height: 1.65;
	color: rgb(18 24 38 / 0.8);
}

/* ------------------------------------------------------------ about band */

.rcm-about {
	display: grid;
	align-items: center;
	overflow: hidden;
	background: var(--rcm-navy-deep);
	border-radius: var(--rcm-radius-2xl);
	color: #fff;
}

@media (min-width: 64rem) {
	.rcm-about {
		grid-template-columns: 1fr 1fr;
	}
}

.rcm-about__img {
	width: 100%;
	height: 16rem;
	object-fit: cover;
	display: block;
}

@media (min-width: 64rem) {
	.rcm-about__img {
		height: 100%;
		min-height: 22rem;
	}
}

.rcm-about__body {
	padding: 2.5rem 1.5rem;
}

@media (min-width: 40rem) {
	.rcm-about__body {
		padding: 2.5rem;
	}
}

.rcm-about__title {
	font-size: var(--rcm-text-3xl);
	font-weight: 700;
	color: #fff;
	margin: 0.5rem 0 0;
}

.rcm-about__body p {
	font-size: var(--rcm-text-sm);
	line-height: 1.65;
	color: rgb(255 255 255 / 0.75);
	margin: 0.75rem 0 0;
}

/* ------------------------------------------------------------------- FAQ */

.rcm-faq {
	display: flex;
	flex-direction: column;
	margin-top: 1.5rem;
}

.rcm-faq__item {
	border-bottom: 1px solid var(--rcm-border);
}

.rcm-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.rcm-faq__item summary::-webkit-details-marker {
	display: none;
}

/* Chevron, rotated when open — the mockup uses a caret rather than +/−. Drawn
   as a border triangle so it needs no icon markup inside <summary>. */
.rcm-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.2rem;
	border-right: 2px solid var(--rcm-muted-fg);
	border-bottom: 2px solid var(--rcm-muted-fg);
	rotate: 45deg;
	translate: 0 -0.15rem;
	transition: rotate 0.18s ease, border-color 0.18s ease;
}

.rcm-faq__item[open] summary::after {
	rotate: -135deg;
	translate: 0 0.15rem;
	border-color: var(--rcm-navy);
}

.rcm-faq__answer {
	padding: 0 0 1rem;
	color: var(--rcm-muted-fg);
	font-size: var(--rcm-text-sm);
	line-height: 1.7;
	margin: 0;
	max-width: 68ch;
}

.rcm-center {
	text-align: center;
}

/* -------------------------------------------------------- M-Pesa paybill */

.rcm-paybill {
	display: grid;
	gap: 0.35rem;
	padding: 1rem 1.15rem;
	border: 1px dashed var(--rcm-border);
	border-radius: var(--rcm-radius);
	background: var(--rcm-card);
}

.rcm-paybill__number {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-xl);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	margin: 0;
	color: var(--rcm-navy);
}

/* ----------------------------------------- certificate verification form

   Markup and base CSS come from RCM_LD_Certificate_Verification (Code
   Snippets), which prints a <style> block inside the shortcode output — in the
   body, after this stylesheet in <head>. At equal specificity its rules would
   win, so every selector here is a two-class descendant to outrank its
   single-class rules without resorting to !important.

   Nothing below changes the markup. If the snippet's classes are renamed,
   these rules stop applying and the form falls back to the snippet's own
   royal-blue styling rather than breaking.                                   */

.rcm-cert-wrap .rcm-cert-card {
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-xl);
	box-shadow: var(--rcm-shadow-soft);
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.rcm-cert-wrap .rcm-cert-card h2 {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-3xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--rcm-fg);
	margin-bottom: 0.5rem;
}

.rcm-cert-wrap .rcm-cert-card p {
	font-size: var(--rcm-text-base);
	color: var(--rcm-muted-fg);
	line-height: 1.6;
}

.rcm-cert-wrap .rcm-cert-form input {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-lg);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.9rem 1.1rem;
	border-radius: var(--rcm-radius);
	border: 1px solid var(--rcm-border);
	background: var(--rcm-bg);
	color: var(--rcm-fg);
}

/* The snippet sets placeholder colour to near-black at 0.75 opacity, which
   reads as filled-in text. Placeholders must not look like values. */
.rcm-cert-wrap .rcm-cert-form input::placeholder {
	color: var(--rcm-muted-fg);
	opacity: 1;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.rcm-cert-wrap .rcm-cert-form button {
	background: var(--rcm-navy);
	border-radius: var(--rcm-radius);
	font-family: var(--rcm-font-sans);
	font-size: var(--rcm-text-base);
	font-weight: 600;
	padding: 0.9rem 1.6rem;
	transition: background-color 0.16s ease;
}

.rcm-cert-wrap .rcm-cert-form button:hover {
	background: var(--rcm-navy-hover);
}

.rcm-cert-wrap .rcm-cert-valid {
	background: rgb(6 118 71 / 0.08);
	border: 1px solid var(--rcm-success);
	border-radius: var(--rcm-radius-lg);
	padding: 1.5rem;
}

.rcm-cert-wrap .rcm-cert-invalid {
	background: rgb(180 35 24 / 0.07);
	border: 1px solid var(--rcm-danger);
	border-radius: var(--rcm-radius-lg);
	padding: 1.5rem;
	color: var(--rcm-danger);
	font-size: var(--rcm-text-base);
}

.rcm-cert-wrap .rcm-cert-status {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-xl);
	font-weight: 800;
	color: var(--rcm-success);
	margin-bottom: 1rem;
}

.rcm-cert-wrap .rcm-cert-details {
	font-size: var(--rcm-text-base);
	gap: 0.75rem 1rem;
}

.rcm-cert-wrap .rcm-cert-details strong {
	color: var(--rcm-muted-fg);
	font-weight: 600;
}

.rcm-cert-wrap .rcm-cert-details span {
	color: var(--rcm-fg);
	font-weight: 600;
}

/* Serial numbers are read aloud and typed by hand; tabular figures stop 1 and
   7 from shifting the line as the reader scans it. */
.rcm-cert-wrap .rcm-certificate-serial,
.rcm-cert-wrap .rcm-cert-details span {
	font-variant-numeric: tabular-nums;
}

/* Two-line app store badges, as on the deployed mockup: a small lead-in above
   the store name rather than a single sentence on a button. */
.rcm-store {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.05rem;
	padding: 0.5rem 1.1rem;
	border-radius: var(--rcm-radius);
	background: #fff;
	color: var(--rcm-navy-deep);
	text-decoration: none;
	line-height: 1.15;
	transition: background-color 0.16s ease;
}

.rcm-store:hover {
	background: var(--rcm-muted);
	color: var(--rcm-navy-deep);
}

.rcm-store__pre {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	opacity: 0.75;
}

.rcm-store__name {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-base);
	font-weight: 700;
}

.rcm-app__note {
	margin: 0.85rem 0 0;
	font-size: var(--rcm-text-xs);
	color: rgb(255 255 255 / 0.6);
}

/* --------------------------------------------------------- page header

   Matches the mockup's inner-page opening: max-w-7xl, py-10, a gold eyebrow,
   a 4xl display title and a lede capped at max-w-2xl.                      */

.rcm-page-header {
	margin-top: 2.5rem;
}

/* 2.25rem measured off the mockup, not the hero's 3.75rem. The clamp only
   steps down on narrow screens; it never goes above 36px. */
.rcm-page-header__title {
	font-family: var(--rcm-font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0.25rem 0 0;
	line-height: 1.15;
}

.rcm-page-header__lede {
	margin: 0.5rem 0 0;
	max-width: 42rem;
	font-size: var(--rcm-text-base);
	line-height: 1.6;
	color: var(--rcm-muted-fg);
}

/* Programme grid, as used on /programs: three columns, board above the name,
   a three-line blurb, and "From Ksh X" at the foot. Distinct from the
   homepage rail, which is narrower and shows a course count instead. */
.rcm-program-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.rcm-program-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.rcm-program-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rcm-program-grid .rcm-program {
	padding: 1.5rem;
}

.rcm-program__board {
	font-size: var(--rcm-text-xs);
	font-weight: 600;
	color: var(--rcm-navy);
	margin: 1rem 0 0;
}

.rcm-program-grid .rcm-program__name {
	font-size: var(--rcm-text-lg);
	margin-top: 0;
}

.rcm-program-grid .rcm-program__blurb {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.rcm-program__from {
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	margin: 1rem 0 0;
}

/* ------------------------------------------------------------ filter bar */

.rcm-filters__search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius);
}

.rcm-filters__search .rcm-icon {
	color: var(--rcm-muted-fg);
}

.rcm-filters__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: var(--rcm-text-base);
	color: var(--rcm-fg);
	padding: 0.35rem 0;
}

.rcm-filters__search input:focus {
	outline: none;
}

/* Chips scroll rather than wrap: eleven programmes would otherwise push the
   catalogue two rows down the page on a phone. */
.rcm-chips {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
	margin-inline: calc(var(--rcm-gutter) * -1);
	padding-inline: var(--rcm-gutter);
}

.rcm-chips::-webkit-scrollbar {
	display: none;
}

@media (min-width: 40rem) {
	.rcm-chips {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

.rcm-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-pill);
	background: var(--rcm-card);
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	color: var(--rcm-fg);
	text-decoration: none;
	white-space: nowrap;
}

.rcm-chip:hover {
	border-color: var(--rcm-navy);
	color: var(--rcm-navy);
}

.rcm-chip.is-active {
	background: var(--rcm-navy);
	border-color: var(--rcm-navy);
	color: #fff;
}

/* --------------------------------------------------------------- contact */

.rcm-contact {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64rem) {
	.rcm-contact {
		grid-template-columns: 1fr 1fr;
		max-width: 72rem;
	}
}

.rcm-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	font-size: var(--rcm-text-sm);
}

.rcm-contact__list li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	line-height: 1.5;
}

.rcm-contact__list .rcm-icon {
	color: var(--rcm-navy);
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1rem;
}

.rcm-contact__list a {
	font-weight: 600;
	color: var(--rcm-fg);
	text-decoration: none;
	margin-right: 0.75rem;
}

.rcm-contact__list a:hover {
	text-decoration: underline;
}

.rcm-contact__mpesa {
	margin-top: 2rem;
	padding: 1.25rem;
	border-radius: var(--rcm-radius-2xl);
	background: var(--rcm-muted);
	font-size: var(--rcm-text-sm);
}

.rcm-contact__mpesa p {
	margin: 0.25rem 0 0;
	color: var(--rcm-muted-fg);
}

.rcm-contact__mpesa-title {
	font-weight: 700;
	color: var(--rcm-fg) !important;
	margin: 0 !important;
}

.rcm-contact__offices {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

@media (min-width: 40rem) {
	.rcm-contact__offices {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rcm-contact__office-name {
	font-size: var(--rcm-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rcm-gold);
	margin: 0;
}

.rcm-contact__office-lines {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	margin: 0.25rem 0 0;
	line-height: 1.5;
}

.rcm-contact__form-wrap {
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
	height: fit-content;
}

.rcm-contact__form-title {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-xl);
	font-weight: 700;
	margin: 0;
}

.rcm-contact__form-note {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	margin: 0.35rem 0 1.25rem;
}

.rcm-contact__form label {
	display: block;
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.rcm-contact__form input,
.rcm-contact__form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	margin-bottom: 1rem;
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius);
	background: var(--rcm-bg);
	font-family: inherit;
	font-size: var(--rcm-text-base);
	color: var(--rcm-fg);
}

.rcm-contact__form textarea {
	resize: vertical;
}

/* The app screenshot is a device render whose own corners are filled near
   black, which would read as a dark square on the navy panel. Clipping them
   in CSS lets the panel show through, and keeps the file a 49KB JPEG rather
   than a 300KB PNG with an alpha channel. */
.rcm-app__shot {
	display: block;
	width: min(100%, 19rem);
	height: auto;
	border-radius: 2.1rem;
	box-shadow: 0 28px 50px -18px rgb(0 0 0 / 0.55);
}

.rcm-dashapp__device .rcm-app__shot {
	width: min(100%, 11rem);
	border-radius: 1.25rem;
}

/* =========================================================================
 * SIGN IN / JOIN
 * Split card: photo panel left, form right, sharing one rounded shell.
 * ====================================================================== */

.rcm-auth {
	max-width: 72rem;
	margin: 3rem auto;
	padding-inline: var(--rcm-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

@media (min-width: 64rem) {
	.rcm-auth {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.rcm-auth__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--rcm-radius-2xl) var(--rcm-radius-2xl) 0 0;
	min-height: 16rem;
	isolation: isolate;
}

@media (min-width: 64rem) {
	.rcm-auth__media {
		border-radius: var(--rcm-radius-2xl) 0 0 var(--rcm-radius-2xl);
		min-height: 40rem;
	}
}

.rcm-auth__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bottom-weighted scrim: the copy sits low, so the top of the photo stays
   readable while the text below keeps its contrast. */
.rcm-auth__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(7 21 58 / 0.92),
		rgb(7 21 58 / 0.55) 45%,
		rgb(7 21 58 / 0.15)
	);
}

.rcm-auth__pitch {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2rem;
	color: #fff;
}

.rcm-auth__headline {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-3xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0.5rem 0 0;
	line-height: 1.15;
}

.rcm-auth__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	font-size: var(--rcm-text-sm);
	color: rgb(255 255 255 / 0.85);
}

.rcm-auth__card {
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: 0 0 var(--rcm-radius-2xl) var(--rcm-radius-2xl);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	box-shadow: var(--rcm-shadow-soft);
}

@media (min-width: 64rem) {
	.rcm-auth__card {
		border-radius: 0 var(--rcm-radius-2xl) var(--rcm-radius-2xl) 0;
		border-left: 0;
	}
}

.rcm-auth__title {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.rcm-auth__lede {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	line-height: 1.6;
	margin: 0.5rem 0 1.5rem;
}

.rcm-auth__social {
	display: grid;
	gap: 0.625rem;
}

/* Rule with the label sitting in a gap, rather than a background swatch that
   would break on any panel colour other than white. */
.rcm-auth__divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0;
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
}

.rcm-auth__divider::before,
.rcm-auth__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rcm-border);
}

.rcm-auth__form label {
	display: block;
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	margin-bottom: 0.4rem;
}

/* Typed selectors miss any input type added later — email was added for the
   registration form and inherited nothing. Excluding checkboxes is easier to
   keep right than listing every type. */
.rcm-auth__form input:not([type="checkbox"]):not([type="submit"]) {
	width: 100%;
	padding: 0.8rem 0.9rem;
	margin-bottom: 1rem;
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius);
	background: var(--rcm-card);
	font-family: inherit;
	font-size: var(--rcm-text-base);
	color: var(--rcm-fg);
}

.rcm-auth__form input:focus {
	border-color: var(--rcm-navy);
	box-shadow: 0 0 0 3px rgb(0 51 160 / 0.12);
	outline: none;
}

.rcm-auth__pwd {
	position: relative;
}

.rcm-auth__pwd input {
	padding-right: 2.75rem !important;
}

.rcm-auth__reveal {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	background: transparent;
	border-radius: 50%;
	color: var(--rcm-muted-fg);
	cursor: pointer;
}

.rcm-auth__reveal:hover {
	background: var(--rcm-muted);
	color: var(--rcm-fg);
}

.rcm-auth__reveal[aria-pressed="true"] {
	color: var(--rcm-navy);
}

.rcm-auth__remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500 !important;
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	margin-bottom: 1.25rem;
}

.rcm-auth__remember input {
	width: auto;
	margin: 0;
	accent-color: var(--rcm-navy);
}

.rcm-auth__foot {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	margin: 1rem 0 0;
	text-align: center;
}

.rcm-auth__foot a {
	font-weight: 600;
	color: var(--rcm-navy);
	text-decoration: none;
}

.rcm-auth__foot a:hover {
	text-decoration: underline;
}

/* =========================================================================
 * ABOUT PAGE
 * ====================================================================== */

.rcm-about-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.rcm-about-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rcm-about-pair img {
	width: 100%;
	height: 100%;
	max-height: 20rem;
	object-fit: cover;
	border-radius: var(--rcm-radius-2xl);
	display: block;
}

/* ------------------------------------------------------------- offices */

.rcm-offices {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.rcm-offices {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rcm-office {
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	padding: 1.25rem 1.5rem;
}

.rcm-office__label {
	font-size: var(--rcm-text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rcm-gold);
	margin: 0 0 0.5rem;
}

.rcm-office__line {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-fg);
	margin: 0;
	line-height: 1.6;
}

/* ---------------------------------------------------------- how we teach */

.rcm-teach {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (min-width: 64rem) {
	.rcm-teach {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
	}
}

.rcm-teach__title {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.rcm-teach__text {
	font-size: var(--rcm-text-sm);
	line-height: 1.75;
	color: var(--rcm-muted-fg);
	margin: 0 0 1rem;
	max-width: 34rem;
}

.rcm-teach__media img {
	width: 100%;
	height: auto;
	max-height: 22rem;
	object-fit: cover;
	border-radius: var(--rcm-radius-2xl);
	display: block;
}

/* ------------------------------------------------------------- callout */

.rcm-callout {
	background: var(--rcm-navy-deep);
	border-radius: var(--rcm-radius-2xl);
	color: #fff;
	padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

.rcm-callout__title {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
}

.rcm-callout__text {
	font-size: var(--rcm-text-sm);
	line-height: 1.65;
	color: rgb(255 255 255 / 0.75);
	margin: 0.6rem 0 0;
	max-width: 34rem;
}

.rcm-callout__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Secondary action on a dark panel: a translucent fill rather than a white
   button, so it reads as secondary to the gold rather than competing. */
.rcm-btn--ghost-light {
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}

.rcm-btn--ghost-light:hover,
.rcm-btn--ghost-light:focus {
	background: rgb(255 255 255 / 0.18);
	color: #fff;
}

/* =========================================================================
 * RESOURCES
 * ====================================================================== */

.rcm-resources {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}

@media (min-width: 48rem) {
	.rcm-resources {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.rcm-resources {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rcm-resource {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
}

.rcm-resource .rcm-badge {
	align-self: flex-start;
}

.rcm-resource__title {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-lg);
	font-weight: 600;
	line-height: 1.3;
	margin: 0.75rem 0 0;
}

.rcm-resource__blurb {
	flex: 1;
	font-size: var(--rcm-text-sm);
	line-height: 1.6;
	color: var(--rcm-muted-fg);
	margin: 0.5rem 0 0;
}

.rcm-resource__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1rem;
}

.rcm-resource__price {
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	color: var(--rcm-fg);
	font-variant-numeric: tabular-nums;
}

.rcm-resources__foot {
	margin-top: 2rem;
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
}

.rcm-resources__foot a {
	font-weight: 600;
	color: var(--rcm-navy);
	text-decoration: none;
}

.rcm-resources__foot a:hover {
	text-decoration: underline;
}

/* Full catalogue: a grid, not the homepage scroller. A rail is a way to
   preview eight things; it is a poor way to browse a hundred. */
.rcm-unit-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

@media (min-width: 48rem) {
	.rcm-unit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.rcm-unit-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rcm-unit-grid > * {
	min-width: 0;
	width: auto;
}

/* Sign-in feedback. role=alert on errors, so a screen reader announces a
   failed attempt rather than leaving the student wondering. */
.rcm-auth__message {
	padding: 0.8rem 1rem;
	border-radius: var(--rcm-radius);
	font-size: var(--rcm-text-sm);
	line-height: 1.5;
	margin: 0 0 1.25rem;
}

.rcm-auth__message--error {
	background: rgb(180 35 24 / 0.08);
	border: 1px solid rgb(180 35 24 / 0.3);
	color: var(--rcm-danger);
}

.rcm-auth__message--notice {
	background: var(--rcm-navy-08);
	border: 1px solid var(--rcm-navy-12);
	color: var(--rcm-navy);
}

.rcm-auth__hint {
	font-size: var(--rcm-text-xs);
	color: var(--rcm-muted-fg);
	margin: -0.5rem 0 1.25rem;
}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a field they can see is one they fill in. */
.rcm-auth__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
 * NEWS
 * ====================================================================== */

.rcm-news__chips {
	margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------ lead story */

.rcm-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

@media (min-width: 52rem) {
	.rcm-lead {
		/* The image takes a little over half: enough to carry a photograph,
		   not so much that the headline is squeezed. */
		grid-template-columns: 1.15fr 1fr;
		align-items: stretch;
	}
}

.rcm-lead:hover {
	border-color: var(--rcm-navy-12);
	box-shadow: var(--rcm-shadow-soft);
}

/* A fixed proportion, so the card has a predictable height whatever shape the
   photograph is. Without it a portrait image drives the row and the lead story
   becomes a seven-hundred-pixel wall with three lines of text beside it. */
.rcm-lead__media {
	display: block;
	background: var(--rcm-muted);
	aspect-ratio: 16 / 10;
}

@media (min-width: 52rem) {
	/*
	 * Beside the text, the image is taken out of flow so the story sets the
	 * height of the card. Left in flow a portrait photograph made the row as
	 * tall as itself — a seven-hundred-pixel wall with four lines of text
	 * beside it.
	 */
	.rcm-lead__media {
		position: relative;
		aspect-ratio: auto;
		min-height: 16rem;
		overflow: hidden;
	}

	.rcm-lead__media img {
		position: absolute;
		inset: 0;
	}
}

.rcm-lead__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rcm-lead__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.75rem;
	justify-content: center;
}

.rcm-lead__meta {
	font-size: var(--rcm-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rcm-gold-ink, #8a6116);
}

.rcm-lead__title {
	font-family: var(--rcm-font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.rcm-lead__excerpt {
	font-size: var(--rcm-text-sm);
	line-height: 1.6;
	color: var(--rcm-muted-fg);
}

.rcm-lead__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	color: var(--rcm-navy);
}

.rcm-lead__more svg {
	width: 1rem;
	height: 1rem;
}

/* ----------------------------------------------------------------- grid */

.rcm-newsgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 1.25rem;
}

@media (min-width: 40rem) {
	.rcm-newsgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.rcm-newsgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rcm-newscard {
	display: flex;
	flex-direction: column;
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.rcm-newscard:hover {
	border-color: var(--rcm-navy-12);
	box-shadow: var(--rcm-shadow-soft);
	transform: translateY(-2px);
}

.rcm-newscard__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--rcm-muted);
	overflow: hidden;
}

.rcm-newscard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A notice with no picture still needs to be the same height as one with. */
.rcm-newscard__blank {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--rcm-navy-30, #8a9ac4);
}

.rcm-newscard__blank svg {
	width: 2rem;
	height: 2rem;
}

.rcm-newscard__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1.25rem 1.35rem;
}

.rcm-newscard__meta {
	font-size: var(--rcm-text-xs);
	color: var(--rcm-muted-fg);
}

.rcm-newscard__title {
	font-family: var(--rcm-font-display);
	font-size: var(--rcm-text-base);
	font-weight: 700;
	line-height: 1.35;
	/* Three lines, then stop: an exam notice can have a long title and a
	   ragged row of cards reads as broken. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rcm-newscard__excerpt {
	font-size: var(--rcm-text-sm);
	line-height: 1.55;
	color: var(--rcm-muted-fg);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------------ news search */

.rcm-newssearch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.rcm-newssearch input[type="search"] {
	flex: 1 1 18rem;
	min-width: 0;
	min-height: 2.9rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-pill);
	background: var(--rcm-card);
	font-family: inherit;
	font-size: var(--rcm-text-sm);
	color: var(--rcm-fg);
}

.rcm-newssearch input[type="search"]:focus {
	outline: none;
	border-color: var(--rcm-navy);
	box-shadow: 0 0 0 3px var(--rcm-navy-12);
}

.rcm-newssearch__clear {
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	color: var(--rcm-muted-fg);
}

.rcm-newssearch__clear:hover {
	color: var(--rcm-navy);
}

.rcm-news__found {
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	margin: 0 0 1rem;
}

@media (max-width: 30rem) {
	/* The button goes full width rather than shrinking to a word beside a
	   field that is already too narrow. */
	.rcm-newssearch input[type="search"] {
		flex: 1 1 100%;
	}

	.rcm-newssearch .rcm-btn {
		flex: 1 1 auto;
	}
}

/* =========================================================================
 * SINGLE NOTICE
 * ====================================================================== */

.rcm-post {
	max-width: var(--rcm-container);
	margin-inline: auto;
	padding-inline: var(--rcm-gutter);
}

/*
 * One measure, in rem.
 *
 * It was 68ch on each block, and ch resolves against the font size of the
 * element it is written on — so the heading block, the body at 1.0625rem and
 * the footer all came out different widths and the column visibly stepped in
 * and out down the page.
 */
.rcm-post {
	--rcm-measure: 44rem;
}

.rcm-post__head,
.rcm-post__body,
.rcm-post__foot,
.rcm-post__comments {
	max-width: var(--rcm-measure);
	margin-inline: auto;
}

.rcm-post__head {
	padding-top: 2.5rem;
}

.rcm-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: var(--rcm-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rcm-gold-ink, #8a6116);
	margin: 0 0 0.6rem;
}

.rcm-post__meta a {
	color: inherit;
}

.rcm-post__title {
	font-family: var(--rcm-font-display);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.12;
	margin: 0;
}

.rcm-post__byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: var(--rcm-text-sm);
	color: var(--rcm-muted-fg);
	margin: 0.75rem 0 0;
}

/* The photograph runs wider than the text: a notice about a new building
   deserves the room, and the measure still governs the words. */
.rcm-post__media {
	max-width: 58rem;
	margin: 2rem auto 0;
	padding: 0;
}

.rcm-post__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--rcm-radius-2xl);
}

.rcm-post__media figcaption {
	font-size: var(--rcm-text-xs);
	color: var(--rcm-muted-fg);
	margin-top: 0.6rem;
	text-align: center;
}

.rcm-post__body {
	margin-top: 2rem;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.rcm-post__body > * + * {
	margin-top: 1.15em;
}

.rcm-post__body h2,
.rcm-post__body h3 {
	font-family: var(--rcm-font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin-top: 2em;
}

.rcm-post__body h2 {
	font-size: 1.5rem;
}

.rcm-post__body h3 {
	font-size: 1.2rem;
}

.rcm-post__body a {
	color: var(--rcm-navy);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.rcm-post__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--rcm-radius-lg);
}

.rcm-post__body blockquote {
	margin-inline: 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--rcm-gold);
	font-size: 1.125rem;
	color: var(--rcm-muted-fg);
}

.rcm-post__body ul,
.rcm-post__body ol {
	padding-left: 1.35rem;
}

.rcm-post__body li + li {
	margin-top: 0.4em;
}

.rcm-post__foot {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rcm-border);
}

.rcm-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.rcm-chip--sm {
	font-size: var(--rcm-text-xs);
	padding: 0.3rem 0.7rem;
}

.rcm-post__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.rcm-post__sharelabel {
	font-size: var(--rcm-text-sm);
	font-weight: 600;
	margin-right: 0.25rem;
}

.rcm-post__share svg {
	width: 1rem;
	height: 1rem;
}

.rcm-post__more {
	margin-bottom: 1.25rem;
}



/* A search that is running should look like it, without the results jumping. */
.rcm-news__results[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 0.12s ease;
}

/* The related notices run to the full container; the comment thread follows
   the article's measure, because a comment is prose and reads by the same
   rules the notice does. */
.rcm-post__related {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--rcm-border);
}

.rcm-post__comments {
	max-width: 44rem;
	margin-inline: auto;
}

.rcm-post__comments .comment-respond,
.rcm-post__comments .comments-area {
	background: var(--rcm-card);
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius-2xl);
	padding: 1.5rem;
}

.rcm-post__comments textarea {
	width: 100%;
	min-height: 7rem;
	padding: 0.75rem;
	border: 1px solid var(--rcm-border);
	border-radius: var(--rcm-radius);
	font-family: inherit;
	font-size: var(--rcm-text-sm);
	line-height: 1.6;
}

/* ---------------------------------------------------------------- reviews */

.rcm-section-head--center {
	justify-content: center;
	text-align: center;
}

.rcm-reviews__widget {
	margin-top: 1.5rem;
}

/*
 * The widget is Trustindex's own markup and is not restyled — a review badge
 * that has been recoloured stops looking like proof and starts looking like a
 * graphic. Only the things that would otherwise break the page are touched.
 */
.rcm-reviews__widget img {
	max-width: 100%;
	height: auto;
}

.rcm-reviews__widget iframe {
	max-width: 100%;
}

/* Trustindex sliders can set a wider inline width than the column. */
.rcm-reviews__widget > * {
	max-width: 100%;
}