/**
 * Course storefront: the pieces the catalog (/courses/) and the course pages share. Tier badges,
 * buttons, prices, facts and stats, the finance-motif covers, the course card, the premium
 * spotlight and the ink surface.
 *
 * Cascade notes (docs/stock-dashboard-build-contract.md:25-33):
 * - Every rule on an element the legacy stack styles uses two or more classes, so it outranks
 *   `.roc-kit a/h1/h2/button` (0,1,1). Hover and focus states use three, to beat `.roc-kit a:hover`
 *   and `.roc-kit button:focus` (0,2,1). Buttons set :focus before :hover.
 * - style.css strips box-shadow, outline and underline from a/button with !important, and forces
 *   every phone h2 to 35px with !important, so those properties carry !important here too.
 * - Every var() keeps a literal fallback: WP Rocket inlines a per-URL subset of the shared token
 *   stylesheets, and the token block is not guaranteed to survive it.
 * - Class names use the roc-crs- prefix only, so stale used-CSS rows for the old rcl- markup can't
 *   touch the new pages.
 * Motion follows docs/elementor-removal-implementation.md section 7: nothing waits to become
 * readable, reveals move but never fade, nothing loops, only transform/scale/clip animate.
 * Hover follows the homepage card language (components.css): the highlight (border, glow, cursor
 * spotlight) for everyone, the pop (lift, zoom) only without reduced motion, and the same effect on
 * keyboard focus. Lifts use `transform`: the scroll reveal animates `translate` and `scale`, and its
 * forwards fill would override a hover on either.
 */

.roc-crs {
	--crs-blue-50: var(--roc-blue-50, #eff6ff);
	--crs-blue-100: var(--roc-blue-100, #dbeafe);
	--crs-blue-200: var(--roc-blue-200, #bfdbfe);
	--crs-blue-300: var(--roc-blue-300, #93c5fd);
	--crs-blue-500: var(--roc-blue-500, #3b82f6);
	--crs-blue: var(--roc-blue-600, #2563eb);
	--crs-blue-700: var(--roc-blue-700, #1d4ed8);
	--crs-blue-800: var(--roc-blue-800, #1e40af);
	--crs-blue-900: var(--roc-blue-900, #1e3a8a);
	--crs-ink: var(--roc-ink, #020617);
	--crs-text: var(--roc-slate-900, #0f172a);
	--crs-text-2: var(--roc-slate-700, #334155);
	--crs-muted: var(--roc-slate-600, #475569);
	--crs-subtle: var(--roc-slate-500, #64748b);
	--crs-border: var(--roc-slate-200, #e2e8f0);
	--crs-border-strong: var(--roc-slate-300, #cbd5e1);
	--crs-surface-alt: var(--roc-slate-50, #f8fafc);
	--crs-display: var(--roc-font-display, "Raleway", "Raleway Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
	--crs-body: var(--roc-font-body, "Roboto", "Roboto Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
	--crs-ease: var(--roc-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
	--crs-ease-out: var(--roc-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	--crs-spring: var(--roc-ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1));
	--crs-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.06);
	--crs-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.05), 0 22px 40px -16px rgba(37, 99, 235, 0.28);
	--crs-shadow-float: 0 34px 64px -30px rgba(2, 6, 23, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.06);
	--crs-shadow-glow: var(--roc-shadow-glow, 0 22px 44px -18px rgba(37, 99, 235, 0.42), 0 2px 6px rgba(15, 23, 42, 0.05));
	--crs-shadow-ink-glow: 0 48px 90px -40px rgba(2, 6, 23, 0.75), 0 26px 64px -32px rgba(37, 99, 235, 0.6), 0 0 0 1px rgba(147, 197, 253, 0.34);
	/* Hover timing: the highlight, the settle back, and the springy pop out */
	--crs-rest: border-color 220ms var(--crs-ease), box-shadow 320ms var(--crs-ease-out);
	--crs-lift: var(--crs-rest), transform 320ms var(--crs-ease-out);
	--crs-pop: var(--crs-rest), transform 520ms var(--crs-spring);
	--crs-ink-surface: radial-gradient(75% 95% at 88% 0%, rgba(37, 99, 235, 0.42), transparent 62%), radial-gradient(55% 80% at 0% 100%, rgba(30, 64, 175, 0.38), transparent 70%), linear-gradient(165deg, #020617 0%, #020617 52%, #0b1a4a 100%);
	--crs-sticky: var(--roc-sticky-top, 0px);
	color: var(--crs-text);
	font-family: var(--crs-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.roc-crs *,
.roc-crs *::before,
.roc-crs *::after {
	box-sizing: border-box;
}

/* Filtered catalog items, closed tools and status lines: [hidden] must win over component display */
.roc-crs [hidden] {
	display: none !important;
}

.roc-crs .roc-crs-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.roc-crs .roc-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

/* Lists the components own; Bootstrap's reboot indents and spaces every ul/ol */
.roc-crs :is(.roc-crs-facts, .roc-crs-stats, .roc-crs-trust, .roc-crs-grid, .roc-crs-checks, .roc-crs-bullets, .roc-crs-includes, .roc-crs-outcomes,
	.roc-crs-bento, .roc-crs-map, .roc-crs-modules, .roc-crs-lessons, .roc-crs-seg, .roc-crs-chips, .roc-crs-path__steps, .roc-crs-numbers,
	.roc-crs-creds, .roc-crs-logos, .roc-crs-toolchips, .roc-crs-secnav__list, .roc-crs-byline__stats) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------- type */

.roc-crs .roc-crs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--crs-blue-700);
	font: 700 0.75rem / 1 var(--crs-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.roc-crs .roc-crs-eyebrow .roc-icon {
	width: 16px;
	height: 16px;
}

.roc-crs .roc-crs-h2 {
	margin: 0;
	color: var(--crs-text);
	font: 800 clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem) / 1.12 var(--crs-display) !important;
	font-variant-numeric: lining-nums;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.roc-crs .roc-crs-h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--crs-text);
	font: 700 1.25rem / 1.3 var(--crs-display);
	letter-spacing: -0.01em;
}

.roc-crs .roc-crs-h3 .roc-icon {
	width: 22px;
	height: 22px;
	color: var(--crs-blue);
}

.roc-crs .roc-crs-lead {
	max-width: 62ch;
	margin: 12px 0 0;
	color: var(--crs-muted);
	font-size: 1.125rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.roc-crs .roc-crs-grad {
	background: linear-gradient(100deg, var(--crs-blue) 10%, var(--crs-blue-800) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.roc-crs .roc-crs-sec {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.roc-crs .roc-crs-sec--tint {
	background: var(--crs-surface-alt);
	border-block: 1px solid var(--crs-border);
}

.roc-crs .roc-crs-sechead {
	max-width: 760px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.roc-crs .roc-crs-sechead--center {
	margin-inline: auto;
	text-align: center;
}

.roc-crs .roc-crs-sechead--center .roc-crs-lead {
	margin-inline: auto;
}

/* ---------------------------------------------------------------- breadcrumb */

.roc-crs .roc-crs-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	color: var(--crs-subtle);
	font: 500 0.8125rem / 1.4 var(--crs-body);
}

.roc-crs .roc-crs-crumbs li + li::before {
	content: "/";
	margin-right: 6px;
	opacity: 0.6;
}

.roc-crs .roc-crs-crumbs a {
	color: var(--crs-muted);
}

.roc-crs .roc-crs-crumbs a:hover {
	color: var(--crs-blue-800);
	text-decoration: underline !important;
}

.roc-crs .roc-crs-ink .roc-crs-crumbs ol,
.roc-crs .roc-crs-ink .roc-crs-crumbs a {
	color: var(--crs-blue-200);
}

.roc-crs .roc-crs-ink .roc-crs-crumbs a:hover {
	color: #ffffff;
}

/* ---------------------------------------------------------------- links */

.roc-crs .roc-crs-textlink {
	color: var(--crs-blue-700);
	font-weight: 600;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.roc-crs .roc-crs-textlink:hover {
	color: var(--crs-blue-900);
	text-decoration-thickness: 2px;
}

.roc-crs .roc-crs-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--crs-blue-700);
	font: 600 0.9375rem / 1 var(--crs-body);
	white-space: nowrap;
}

.roc-crs .roc-crs-arrowlink:hover {
	color: var(--crs-blue-900);
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

.roc-crs .roc-crs-arrowlink .roc-icon {
	width: 18px;
	height: 18px;
}

/* A card's main link covers the whole card; other controls in it sit above with .roc-crs-raise */
.roc-crs .roc-crs-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.roc-crs .roc-crs-stretch:focus-visible {
	outline: none !important;
}

.roc-crs .roc-crs-raise {
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------------- buttons */

.roc-crs .roc-crs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	margin: 0;
	padding: 0.625rem 1.125rem;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
	color: inherit;
	font: 600 0.9375rem / 1.2 var(--crs-body);
	letter-spacing: 0.005em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 150ms var(--crs-ease), color 150ms var(--crs-ease), border-color 150ms var(--crs-ease),
		box-shadow 150ms var(--crs-ease), scale 90ms var(--crs-ease);
}

.roc-crs .roc-crs-btn .roc-icon {
	width: 18px;
	height: 18px;
}

.roc-crs .roc-crs-btn--lg {
	min-height: 52px;
	padding: 0.8125rem 1.375rem;
	border-radius: 14px;
	font-size: 1rem;
}

.roc-crs .roc-crs-btn--block {
	width: 100%;
}

.roc-crs .roc-crs-btn--primary,
.roc-crs .roc-crs-btn--primary:focus {
	background-color: var(--crs-blue);
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 8px 18px -8px rgba(37, 99, 235, 0.65) !important;
}

.roc-crs .roc-crs-btn--primary:hover,
.roc-crs .roc-crs-btn--primary:focus-visible {
	background-color: var(--crs-blue-800);
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 14px 26px -10px rgba(37, 99, 235, 0.7) !important;
}

.roc-crs .roc-crs-btn--secondary,
.roc-crs .roc-crs-btn--secondary:focus {
	border-color: var(--crs-border-strong);
	background: #ffffff;
	color: var(--crs-text);
}

.roc-crs .roc-crs-btn--secondary:hover,
.roc-crs .roc-crs-btn--secondary:focus-visible {
	border-color: var(--crs-blue);
	background: var(--crs-blue-50);
	color: var(--crs-blue-800);
}

.roc-crs .roc-crs-btn--light,
.roc-crs .roc-crs-btn--light:focus {
	background-color: #ffffff;
	color: var(--crs-blue-800);
	box-shadow: 0 10px 24px -12px rgba(147, 197, 253, 0.65) !important;
}

.roc-crs .roc-crs-btn--light:hover,
.roc-crs .roc-crs-btn--light:focus-visible {
	background-color: var(--crs-blue-50);
	color: var(--crs-blue-900);
}

.roc-crs .roc-crs-btn--ghost,
.roc-crs .roc-crs-btn--ghost:focus {
	border-color: rgba(191, 219, 254, 0.45);
	background: rgba(255, 255, 255, 0.04);
	color: #ffffff;
}

.roc-crs .roc-crs-btn--ghost:hover,
.roc-crs .roc-crs-btn--ghost:focus-visible {
	border-color: rgba(191, 219, 254, 0.8);
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.roc-crs .roc-crs-btn[disabled] {
	cursor: progress;
	opacity: 0.8;
}

/* The main calls to action catch the light once on hover or focus: a sheen band in a background layer that
   exists only then, sweeping from off the left edge to off the right. A layer rather than a positioned overlay,
   so the buttons keep their paint order; at rest they render exactly as before. Keyboard focus darkens the fill
   as hover does, so at the band's peak the white label keeps 5.3:1 on blue-800 and the light button's label
   at least 6.4:1. */
.roc-crs :is(.roc-crs-btn--primary, .roc-crs-btn--light) {
	background-position: 110% 0;
	background-repeat: no-repeat;
	background-size: 250% 100%;
}

.roc-crs .roc-crs-btn--light {
	--crs-sheen: rgba(37, 99, 235, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
	.roc-crs .roc-crs-btn {
		transition: background-color 150ms var(--crs-ease), color 150ms var(--crs-ease), border-color 150ms var(--crs-ease),
			box-shadow 220ms var(--crs-ease), transform 220ms var(--crs-ease-out), scale 90ms var(--crs-ease);
	}

	.roc-crs .roc-crs-btn:not([disabled]):is(:hover, :focus-visible) {
		transform: translateY(-2px);
	}

	.roc-crs .roc-crs-btn:not([disabled]):active {
		transform: translateY(0);
		scale: 0.97;
	}

	.roc-crs :is(.roc-crs-btn--primary, .roc-crs-btn--light):not([disabled]):is(:hover, :focus-visible) {
		background-image: linear-gradient(105deg, transparent 40%, var(--crs-sheen, rgba(255, 255, 255, 0.2)) 50%, transparent 60%);
		background-position: -10% 0;
		transition: background-color 150ms var(--crs-ease), color 150ms var(--crs-ease), border-color 150ms var(--crs-ease),
			box-shadow 220ms var(--crs-ease), transform 220ms var(--crs-ease-out), scale 90ms var(--crs-ease), background-position 900ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.roc-crs .roc-crs-btn .roc-icon--arrow,
	.roc-crs .roc-crs-arrowlink .roc-icon--arrow {
		transition: translate 150ms var(--crs-ease);
	}

	.roc-crs .roc-crs-btn:is(:hover, :focus-visible) .roc-icon--arrow,
	.roc-crs .roc-crs-arrowlink:is(:hover, :focus-visible) .roc-icon--arrow {
		translate: 3px 0;
	}
}

/* ---------------------------------------------------------------- tier badges, level, tags */

.roc-crs .roc-crs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px 6px 9px;
	border-radius: 999px;
	font: 700 0.6875rem / 1 var(--crs-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.roc-crs .roc-crs-badge .roc-icon {
	width: 14px;
	height: 14px;
}

/* blue-800 on blue-50: 8.0:1 */
.roc-crs .roc-crs-badge--free {
	background: var(--crs-blue-50);
	color: var(--crs-blue-800);
	box-shadow: inset 0 0 0 1px var(--crs-blue-200);
}

/* white on ink: 20:1; the spark is blue-300 */
.roc-crs .roc-crs-badge--premium {
	background: var(--crs-ink);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.4), 0 6px 16px -8px rgba(37, 99, 235, 0.8);
}

.roc-crs .roc-crs-badge--premium .roc-icon {
	color: var(--crs-blue-300);
}

.roc-crs .roc-crs-badge--on-ink {
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.45);
}

.roc-crs .roc-crs-level {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--crs-muted);
	font: 500 0.8125rem / 1.2 var(--crs-body);
}

.roc-crs .roc-crs-level .roc-icon {
	width: 15px;
	height: 15px;
	color: var(--crs-blue);
}

.roc-crs .roc-crs-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 999px;
	font: 700 0.6875rem / 1.1 var(--crs-body);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.roc-crs .roc-crs-tag--preview {
	background: var(--crs-blue-50);
	color: var(--crs-blue-800);
	box-shadow: inset 0 0 0 1px var(--crs-blue-200);
}

.roc-crs .roc-crs-tag--next {
	background: var(--crs-blue);
	color: #ffffff;
}

/* ---------------------------------------------------------------- facts, stats, price, progress */

.roc-crs .roc-crs-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	color: var(--crs-subtle);
	font: 500 0.8125rem / 1.3 var(--crs-body);
}

.roc-crs .roc-crs-facts li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.roc-crs .roc-crs-facts .roc-icon {
	width: 15px;
	height: 15px;
	color: var(--crs-blue);
}

.roc-crs .roc-crs-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 0;
}

.roc-crs .roc-crs-stats li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-inline: 0 22px;
}

.roc-crs .roc-crs-stats li + li {
	padding-left: 22px;
	border-left: 1px solid var(--crs-border);
}

.roc-crs .roc-crs-stats strong {
	color: var(--crs-text);
	font: 800 1.75rem / 1 var(--crs-display);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.02em;
}

.roc-crs .roc-crs-stats span {
	color: var(--crs-muted);
	font: 500 0.8125rem / 1.2 var(--crs-body);
}

@media (max-width: 639.98px) {
	.roc-crs .roc-crs-stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px 12px;
	}

	.roc-crs .roc-crs-stats li,
	.roc-crs .roc-crs-stats li + li {
		padding: 0 0 0 12px;
		border-left: 2px solid var(--crs-blue-200);
	}

	.roc-crs .roc-crs-ink .roc-crs-stats li,
	.roc-crs .roc-crs-ink .roc-crs-stats li + li {
		border-left-color: rgba(147, 197, 253, 0.35);
	}
}

.roc-crs .roc-crs-stats .roc-icon {
	width: 18px;
	height: 18px;
	color: var(--crs-blue-300);
}

.roc-crs .roc-crs-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
}

.roc-crs .roc-crs-price__amount {
	color: var(--crs-text);
	font: 800 2.25rem / 1 var(--crs-display);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.025em;
}

/* Terms sit on their own line, so the web font swapping in (a wider amount) can never rewrap them */
.roc-crs .roc-crs-price__terms {
	flex-basis: 100%;
	color: var(--crs-muted);
	font: 500 0.875rem / 1.35 var(--crs-body);
}

.roc-crs .roc-crs-price--inline .roc-crs-price__amount {
	font-size: 1.75rem;
}

/* A sale shows the regular price struck through (WooCommerce on-sale products) */
.roc-crs .roc-crs-price__regular {
	color: var(--crs-subtle);
	font: 600 1rem / 1 var(--crs-body);
	text-decoration: line-through;
}

.roc-crs .roc-crs-price--ink .roc-crs-price__regular {
	color: var(--crs-blue-200);
}

.roc-crs .roc-crs-price--ink .roc-crs-price__amount {
	color: #ffffff;
}

.roc-crs .roc-crs-price--ink .roc-crs-price__terms {
	color: var(--crs-blue-200);
}

.roc-crs .roc-crs-progress {
	display: grid;
	gap: 8px;
}

.roc-crs .roc-crs-progress__bar {
	position: relative;
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--crs-blue-100);
}

.roc-crs .roc-crs-progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--p, 0%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--crs-blue) 0%, var(--crs-blue-800) 100%);
}

.roc-crs .roc-crs-progress__text {
	color: var(--crs-muted);
	font: 500 0.875rem / 1.35 var(--crs-body);
}

.roc-crs .roc-crs-progress__text strong {
	color: var(--crs-text);
}

/* ---------------------------------------------------------------- checklists */

.roc-crs .roc-crs-checks {
	display: grid;
	gap: 12px;
}

.roc-crs .roc-crs-checks li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	color: var(--crs-text-2);
	line-height: 1.5;
}

.roc-crs .roc-crs-checks .roc-icon {
	width: 24px;
	height: 24px;
	padding: 4px;
	border-radius: 50%;
	background: var(--crs-blue-50);
	color: var(--crs-blue);
	stroke-width: 2.6;
}

.roc-crs .roc-crs-checks--ink li {
	color: var(--crs-blue-100);
}

.roc-crs .roc-crs-checks--ink .roc-icon {
	background: rgba(147, 197, 253, 0.14);
	color: var(--crs-blue-300);
}

.roc-crs .roc-crs-bullets {
	display: grid;
	gap: 10px;
}

.roc-crs .roc-crs-bullets li {
	position: relative;
	padding-left: 22px;
	color: var(--crs-text-2);
	line-height: 1.5;
}

.roc-crs .roc-crs-bullets li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 4px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--crs-blue);
	rotate: 45deg;
}

/* ---------------------------------------------------------------- the ink (premium) surface */

.roc-crs .roc-crs-ink {
	background: var(--crs-ink-surface);
	color: #ffffff;
}

.roc-crs .roc-crs-ink :is(a, button, summary, input):focus-visible {
	outline: 3px solid var(--crs-blue-300) !important;
	outline-offset: 2px !important;
}

/* ---------------------------------------------------------------- finance-motif covers */

.roc-crs .roc-crs-cover {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(110% 90% at 88% 0%, rgba(59, 130, 246, 0.2), transparent 56%),
		linear-gradient(165deg, #f8fbff 0%, var(--crs-blue-50) 100%);
	color: var(--crs-blue);
}

.roc-crs .roc-crs-cover--premium {
	background:
		radial-gradient(80% 85% at 72% 16%, rgba(37, 99, 235, 0.5), transparent 62%),
		radial-gradient(70% 70% at 0% 100%, rgba(30, 64, 175, 0.5), transparent 70%),
		var(--crs-ink);
}

.roc-crs .roc-crs-cover__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.roc-crs-cover .c-grid { fill: none; stroke: rgba(37, 99, 235, 0.09); stroke-width: 1; }
.roc-crs-cover .c-axis { fill: none; stroke: rgba(30, 64, 175, 0.32); stroke-width: 1.5; }
.roc-crs-cover .c-line { fill: none; stroke: var(--crs-blue); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.roc-crs-cover .c-line--soft { stroke: var(--crs-blue-300); stroke-width: 4; }
.roc-crs-cover .c-line--faint { stroke: rgba(37, 99, 235, 0.3); stroke-width: 3; }
.roc-crs-cover .c-line--dash { stroke: var(--crs-blue-800); stroke-width: 2.5; stroke-dasharray: 10 9; }
.roc-crs-cover .c-line--hero { stroke-width: 5.5; }
.roc-crs-cover .c-area { fill: rgba(37, 99, 235, 0.1); }
.roc-crs-cover .c-area--soft { fill: rgba(147, 197, 253, 0.22); }
.roc-crs-cover .c-dot { fill: #ffffff; stroke: var(--crs-blue); stroke-width: 3; }
.roc-crs-cover .c-dot--accent { fill: var(--crs-blue-800); stroke: #ffffff; stroke-width: 3; }
.roc-crs-cover .c-scatter { fill: none; stroke: var(--crs-blue-300); stroke-width: 9; stroke-linecap: round; opacity: 0.75; }
.roc-crs-cover .c-bars { fill: rgba(37, 99, 235, 0.18); }
.roc-crs-cover .c-bars--tail { fill: var(--crs-blue-800); }
.roc-crs-cover .c-cut { fill: none; stroke: var(--crs-blue-800); stroke-width: 2.5; stroke-dasharray: 6 6; }
.roc-crs-cover .c-label { fill: var(--crs-blue-800); font: 600 15px var(--crs-body); opacity: 0.72; }
.roc-crs-cover .c-label--strong { opacity: 1; font-weight: 700; }
.roc-crs-cover .c-glyph { fill: var(--crs-blue-800); font: italic 600 46px Georgia, "Times New Roman", serif; }
.roc-crs-cover .c-glyph--soft { opacity: 0.55; }
.roc-crs-cover .c-glyph--faint { opacity: 0.16; }

.roc-crs-cover--premium .c-grid { stroke: rgba(147, 197, 253, 0.1); }
.roc-crs-cover--premium .c-axis { stroke: rgba(219, 234, 254, 0.3); }
.roc-crs-cover--premium .c-line { stroke: var(--crs-blue-300); }
.roc-crs-cover--premium .c-line--soft { stroke: var(--crs-blue-500); }
.roc-crs-cover--premium .c-line--faint { stroke: rgba(147, 197, 253, 0.38); }
.roc-crs-cover--premium .c-line--hero { stroke: #ffffff; filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.95)); }
.roc-crs-cover--premium .c-area { fill: rgba(59, 130, 246, 0.2); }
.roc-crs-cover--premium .c-dot { fill: var(--crs-ink); stroke: var(--crs-blue-300); }
.roc-crs-cover--premium .c-dot--accent { fill: #ffffff; stroke: var(--crs-blue-500); }
.roc-crs-cover--premium .c-label { fill: var(--crs-blue-100); opacity: 0.85; }

/* One clip reveal of the curves on load (clip only, never a fade); the static drawing otherwise */
@media (prefers-reduced-motion: no-preference) {
	.roc-crs-cover .c-draw {
		animation: roc-crs-draw 900ms var(--crs-ease-out) 80ms both;
	}

	.roc-crs .roc-crs-cover__svg {
		transition: scale 600ms var(--crs-ease-out);
	}
}

@keyframes roc-crs-draw {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* ---------------------------------------------------------------- course card */

.roc-crs .roc-crs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.roc-crs .roc-crs-grid__item {
	display: flex;
	min-width: 0;
	container-type: inline-size;
}

.roc-crs .roc-crs-grid__item--wide {
	grid-column: 1 / -1;
}

.roc-crs .roc-crs-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid var(--crs-border);
	border-radius: 18px;
	background: #ffffff;
	box-shadow: var(--crs-shadow-card);
	transition: var(--crs-rest);
}

/* The homepage card language: a gradient rule that draws across the top on hover */
.roc-crs .roc-crs-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
	height: 3px;
	background: linear-gradient(90deg, var(--crs-blue) 0%, var(--crs-blue-800) 100%);
	scale: 0 1;
	transform-origin: left;
	pointer-events: none;
}

/* The homepage's cursor spotlight, over a surface and under its content (z-index -1 in an isolated box).
   The course scripts move it with a fine pointer; otherwise it lights the top edge. */
.roc-crs :is(.roc-crs-card, .roc-crs-spot, .roc-crs-plan, .roc-crs-path, .roc-crs-tile)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(var(--crs-glow-size, 380px) circle at var(--crs-mx, 50%) var(--crs-my, 0%), var(--crs-glow, rgba(59, 130, 246, 0.1)), transparent 62%);
	opacity: 0;
	transition: opacity 220ms var(--crs-ease);
	pointer-events: none;
}

.roc-crs :is(.roc-crs-card, .roc-crs-spot, .roc-crs-plan, .roc-crs-path, .roc-crs-tile):is(:hover, :focus-within)::after {
	opacity: 1;
}

/* Lit, a light surface would take the slate-500 fine print (facts, struck prices) to about 4.2:1, so it
   darkens to slate-600: 6.7:1 at the spotlight's centre */
.roc-crs :is(.roc-crs-card, .roc-crs-plan, .roc-crs-path, .roc-crs-tile):is(:hover, :focus-within) {
	--crs-subtle: var(--roc-slate-600, #475569);
}

.roc-crs .roc-crs-card:is(:hover, :focus-within) {
	border-color: var(--crs-blue-200);
	box-shadow: var(--crs-shadow-glow);
}

.roc-crs .roc-crs-card:is(:hover, :focus-within)::before {
	scale: 1 1;
}

.roc-crs .roc-crs-card:is(:hover, :focus-within) .roc-crs-card__title a {
	color: var(--crs-blue-800);
}

.roc-crs .roc-crs-card:has(.roc-crs-stretch:focus-visible) {
	outline: 3px solid var(--crs-blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.roc-crs .roc-crs-card {
		transition: var(--crs-lift);
	}

	.roc-crs .roc-crs-card::before {
		transition: scale 500ms var(--crs-ease-out);
	}

	.roc-crs .roc-crs-card:is(:hover, :focus-within) {
		transform: translateY(-6px);
		transition: var(--crs-pop);
	}

	.roc-crs .roc-crs-card:active {
		transform: translateY(-2px) scale(0.99);
		transition-duration: 90ms;
	}

	.roc-crs .roc-crs-card:is(:hover, :focus-within) .roc-crs-cover__svg {
		scale: 1.06;
	}
}

.roc-crs .roc-crs-card__cover {
	border-bottom: 1px solid var(--crs-border);
}

.roc-crs .roc-crs-card__cover .roc-crs-cover {
	aspect-ratio: 16 / 8.5;
}

.roc-crs .roc-crs-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 8px;
}

.roc-crs .roc-crs-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.roc-crs .roc-crs-card__title {
	margin: 2px 0 0;
	color: var(--crs-text);
	font: 700 1.1875rem / 1.3 var(--crs-display);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.roc-crs .roc-crs-card__title a {
	color: inherit;
}

.roc-crs .roc-crs-card__title a:hover {
	color: var(--crs-blue-800);
}

.roc-crs .roc-crs-card__summary {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--crs-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.roc-crs .roc-crs-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding: 14px 20px 18px;
	border-top: 1px dashed var(--crs-border);
}

.roc-crs .roc-crs-card__price {
	color: var(--crs-blue-800);
	font: 800 1rem / 1 var(--crs-display);
}

.roc-crs .roc-crs-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--crs-blue-700);
	font: 600 0.9375rem / 1 var(--crs-body);
}

.roc-crs .roc-crs-card__cta .roc-icon {
	width: 18px;
	height: 18px;
}

.roc-crs .roc-crs-card__progress {
	display: grid;
	flex: 1;
	gap: 6px;
	max-width: 180px;
	color: var(--crs-muted);
	font: 600 0.8125rem / 1 var(--crs-body);
}

@media (prefers-reduced-motion: no-preference) {
	.roc-crs .roc-crs-card__cta .roc-icon--arrow {
		transition: translate 220ms var(--crs-ease-out);
	}

	.roc-crs .roc-crs-card:is(:hover, :focus-within) .roc-crs-card__cta .roc-icon--arrow {
		translate: 4px 0;
	}
}

/* A card given a whole row (a single "next course") lays out sideways */
@container (min-width: 680px) {
	.roc-crs .roc-crs-card {
		display: grid;
		grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
	}

	.roc-crs .roc-crs-card__cover {
		grid-row: 1 / span 2;
		border-right: 1px solid var(--crs-border);
		border-bottom: 0;
	}

	.roc-crs .roc-crs-card__cover .roc-crs-cover {
		height: 100%;
		aspect-ratio: auto;
		min-height: 240px;
	}

	.roc-crs .roc-crs-card__body {
		padding: 26px 28px 8px;
	}

	.roc-crs .roc-crs-card__foot {
		padding: 16px 28px 22px;
	}

	.roc-crs .roc-crs-card__summary {
		-webkit-line-clamp: 3;
	}
}

/* ---------------------------------------------------------------- premium spotlight */

.roc-crs .roc-crs-spot {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	border-radius: 28px;
	box-shadow: 0 40px 80px -40px rgba(2, 6, 23, 0.7), 0 0 0 1px rgba(147, 197, 253, 0.14);
	container-type: inline-size;
	transition: var(--crs-rest);
	--crs-glow: rgba(96, 165, 250, 0.26);
	--crs-glow-size: 620px;
}

/* On ink the spotlight is a blue light. Where it meets the surface's brightest corner, blue-200 type
   still measures 5.8:1, blue-100 6.7:1 and white 8.2:1 */
.roc-crs .roc-crs-spot:is(:hover, :focus-within) {
	box-shadow: var(--crs-shadow-ink-glow);
}

/* A hairline of light along the top edge */
.roc-crs .roc-crs-spot::before {
	content: "";
	position: absolute;
	inset: 0 10% auto;
	z-index: 3;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(191, 219, 254, 0.75), transparent);
	pointer-events: none;
}

.roc-crs .roc-crs-spot:has(.roc-crs-stretch:focus-visible) {
	outline: 3px solid var(--crs-blue);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.roc-crs .roc-crs-spot {
		transition: var(--crs-lift);
	}

	.roc-crs .roc-crs-spot:is(:hover, :focus-within) {
		transform: translateY(-4px);
		transition: var(--crs-pop);
	}

	.roc-crs .roc-crs-spot:active {
		transform: translateY(-1px) scale(0.996);
		transition-duration: 90ms;
	}

	.roc-crs .roc-crs-spot::before {
		transition: scale 600ms var(--crs-ease-out);
	}

	.roc-crs .roc-crs-spot:is(:hover, :focus-within)::before {
		scale: 1.2 1;
	}

	.roc-crs .roc-crs-spot:is(:hover, :focus-within) .roc-crs-cover__svg {
		scale: 1.05;
	}
}

.roc-crs .roc-crs-spot__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(28px, 4vw, 52px);
}

.roc-crs .roc-crs-spot__art {
	position: relative;
	order: 2;
	min-height: 300px;
}

/* The drawing keeps its own 16:10 frame, centred in the column, and fades into the card on every side */
.roc-crs .roc-crs-spot__art .roc-crs-cover {
	position: absolute;
	inset: 50% 0 auto;
	translate: 0 -50%;
	aspect-ratio: 16 / 10;
	background: transparent;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	mask-composite: intersect;
}

.roc-crs .roc-crs-spot__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.roc-crs .roc-crs-spot__top .roc-crs-level,
.roc-crs .roc-crs-ink .roc-crs-level {
	color: var(--crs-blue-200);
}

.roc-crs .roc-crs-ink .roc-crs-level .roc-icon {
	color: var(--crs-blue-300);
}

.roc-crs .roc-crs-spot__title {
	margin: 0;
	max-width: 18ch;
	color: #ffffff;
	font: 800 clamp(1.75rem, 1.2rem + 2vw, 2.625rem) / 1.08 var(--crs-display);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.roc-crs .roc-crs-spot__title a,
.roc-crs .roc-crs-spot__title a:hover {
	color: #ffffff;
}

.roc-crs .roc-crs-spot__promise {
	max-width: 54ch;
	margin: 0;
	color: var(--crs-blue-100);
	font-size: 1.0625rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.roc-crs .roc-crs-stats--ink li + li {
	border-left-color: rgba(147, 197, 253, 0.22);
}

.roc-crs .roc-crs-stats--ink li {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 4px 8px;
}

.roc-crs .roc-crs-stats--ink strong {
	color: #ffffff;
	font-size: 1.5rem;
}

.roc-crs .roc-crs-stats--ink span {
	grid-column: 1 / -1;
	color: var(--crs-blue-200);
}

.roc-crs .roc-crs-spot__buy {
	display: grid;
	gap: 16px;
	margin-top: 6px;
	padding-top: 20px;
	border-top: 1px solid rgba(147, 197, 253, 0.18);
}

.roc-crs .roc-crs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@container (max-width: 760px) {
	.roc-crs .roc-crs-spot__body {
		padding: 28px 24px;
	}

	.roc-crs .roc-crs-stats--ink {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.roc-crs .roc-crs-stats--ink li,
	.roc-crs .roc-crs-stats--ink li + li {
		padding: 0 0 0 12px;
		border-left: 2px solid rgba(147, 197, 253, 0.35);
	}
}

@media (max-width: 859.98px) {
	.roc-crs .roc-crs-spot {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 22px;
	}

	.roc-crs .roc-crs-spot__art {
		order: -1;
		min-height: 0;
		aspect-ratio: 16 / 8;
	}

	.roc-crs .roc-crs-spot__art .roc-crs-cover {
		inset: 0;
		translate: none;
		aspect-ratio: auto;
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	}

	.roc-crs .roc-crs-spot__body {
		padding-top: 4px;
	}

	.roc-crs .roc-crs-actions .roc-crs-btn {
		flex: 1 1 220px;
	}
}

/* ---------------------------------------------------------------- scroll reveal (move, never fade) */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.roc-crs :is(.roc-crs-card, .roc-crs-path, .roc-crs-plan, .roc-crs-tile, .roc-crs-map__item, .roc-crs-panel) {
			animation: roc-crs-rise linear forwards;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

@keyframes roc-crs-rise {
	from { translate: 0 26px; scale: 0.985; }
	to { translate: 0 0; scale: 1; }
}

/* ---------------------------------------------------------------- forced colours and print */

@media (forced-colors: active) {
	.roc-crs .roc-crs-grad {
		background: none;
		color: CanvasText;
	}

	.roc-crs :is(.roc-crs-badge, .roc-crs-tag, .roc-crs-card, .roc-crs-spot, .roc-crs-plan) {
		border: 1px solid CanvasText;
	}

	/* The spotlights and the button sheen are decoration */
	.roc-crs :is(.roc-crs-card, .roc-crs-spot, .roc-crs-plan, .roc-crs-path, .roc-crs-tile)::after {
		content: none;
	}

	.roc-crs :is(.roc-crs-btn--primary, .roc-crs-btn--light):not([disabled]):is(:hover, :focus-visible) {
		background-image: none;
	}
}

@media print {
	.roc-crs .roc-crs-grad {
		background: none;
		color: #000000;
	}

	.roc-crs .roc-crs-ink,
	.roc-crs .roc-crs-hero--premium::before {
		background: #ffffff !important;
	}

	.roc-crs .roc-crs-ink,
	.roc-crs .roc-crs-ink * {
		color: #000000 !important;
	}

	.roc-crs .roc-crs-spot__art {
		display: none;
	}

	.roc-crs .roc-crs-spot {
		grid-template-columns: minmax(0, 1fr);
		box-shadow: none;
		border: 1px solid #000000;
	}
}