/**
 * 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;
}

.rcm-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	opacity: 0.55;
}

/* Left-weighted scrim: the copy sits left, so the image stays readable right. */
.rcm-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--rcm-navy-deep),
		rgb(7 21 58 / 0.8) 45%,
		rgb(7 21 58 / 0.25)
	);
}

/* 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;
	z-index: 1;
}

@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;
	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;
	z-index: 2;
}

.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;
}