/* Layer order — must be first */
@layer reset, base, components, routes, overrides;

/* Same-origin navigations cross-fade (cross-document view transitions). */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* ============================================
   Font Registration (outside layers — global)
   ============================================ */

@font-face {
	font-family: 'Rubik';
	src: url('/fonts/Rubik-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Rubik';
	src: url('/fonts/Rubik-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/fonts/Nunito-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/fonts/Nunito-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/fonts/Nunito-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================
   CSS Custom Properties with @property (outside layers — global)
   ============================================ */

@property --color-primary-l {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 68%;
}

@property --color-primary-c {
	syntax: '<number>';
	inherits: true;
	initial-value: 0.19;
}

@property --color-primary-h {
	syntax: '<number>';
	inherits: true;
	initial-value: 296;
}

@property --color-secondary-l {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 76%;
}

@property --color-secondary-c {
	syntax: '<number>';
	inherits: true;
	initial-value: 0.16;
}

@property --color-secondary-h {
	syntax: '<number>';
	inherits: true;
	initial-value: 56;
}

/* ============================================
   Reset Layer
   ============================================ */

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
		padding: 0;
	}

	html {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		scroll-behavior: smooth;
	}
}

/* ============================================
   Base Layer
   ============================================ */

@layer base {
	/* Color System (oklch with relative colors) */
	:root {
		/* Base colors */
		--color-primary: oklch(var(--color-primary-l) var(--color-primary-c) var(--color-primary-h));
		--color-secondary: oklch(
			var(--color-secondary-l) var(--color-secondary-c) var(--color-secondary-h)
		);

		/* Primary palette - relative colors */
		--color-primary-50: oklch(from var(--color-primary) 97% 0.02 h);
		--color-primary-100: oklch(from var(--color-primary) 92% 0.04 h);
		--color-primary-200: oklch(from var(--color-primary) 85% 0.08 h);
		--color-primary-300: oklch(from var(--color-primary) 75% 0.14 h);
		--color-primary-400: oklch(from var(--color-primary) 68% 0.19 h);
		--color-primary-500: oklch(from var(--color-primary) 58% 0.19 h);
		--color-primary-600: oklch(from var(--color-primary) 48% 0.17 h);
		--color-primary-700: oklch(from var(--color-primary) 38% 0.14 h);
		--color-primary-800: oklch(from var(--color-primary) 28% 0.1 h);
		--color-primary-900: oklch(from var(--color-primary) 18% 0.06 h);
		--color-primary-950: oklch(from var(--color-primary) 10% 0.04 h);

		/* Secondary palette - relative colors */
		--color-secondary-50: oklch(from var(--color-secondary) 97% 0.02 h);
		--color-secondary-100: oklch(from var(--color-secondary) 92% 0.04 h);
		--color-secondary-200: oklch(from var(--color-secondary) 85% 0.08 h);
		--color-secondary-300: oklch(from var(--color-secondary) 78% 0.12 h);
		--color-secondary-400: oklch(from var(--color-secondary) 76% 0.16 h);
		--color-secondary-500: oklch(from var(--color-secondary) 65% 0.16 h);
		--color-secondary-600: oklch(from var(--color-secondary) 55% 0.14 h);
		--color-secondary-700: oklch(from var(--color-secondary) 45% 0.12 h);
		--color-secondary-800: oklch(from var(--color-secondary) 35% 0.08 h);
		--color-secondary-900: oklch(from var(--color-secondary) 25% 0.05 h);
		--color-secondary-950: oklch(from var(--color-secondary) 15% 0.03 h);

		/* Neutral palette (desaturated primary) */
		--color-neutral-50: oklch(98% 0.005 var(--color-primary-h));
		--color-neutral-100: oklch(95% 0.008 var(--color-primary-h));
		--color-neutral-200: oklch(88% 0.01 var(--color-primary-h));
		--color-neutral-300: oklch(78% 0.012 var(--color-primary-h));
		--color-neutral-400: oklch(65% 0.015 var(--color-primary-h));
		--color-neutral-500: oklch(55% 0.015 var(--color-primary-h));
		--color-neutral-600: oklch(45% 0.012 var(--color-primary-h));
		--color-neutral-700: oklch(35% 0.01 var(--color-primary-h));
		--color-neutral-800: oklch(25% 0.008 var(--color-primary-h));
		--color-neutral-900: oklch(18% 0.015 var(--color-primary-h));
		--color-neutral-950: oklch(14% 0.02 var(--color-primary-h));

		/* Semantic colors */
		--color-surface: oklch(17% 0.02 var(--color-primary-h));
		--color-surface-elevated: oklch(21% 0.018 var(--color-primary-h));
		--color-surface-hover: oklch(25% 0.016 var(--color-primary-h));
		--color-text: var(--color-neutral-100);
		--color-text-muted: var(--color-neutral-300);
		--color-border: var(--color-neutral-800);
		--color-border-subtle: var(--color-neutral-900);

		/* Typography */
		--font-title: 'Rubik', system-ui, sans-serif;
		--font-body: 'Nunito', system-ui, sans-serif;
		--font-size-sm: 0.875rem;
		--font-size-base: 1rem;

		/* Layout */
		--container-gutter: clamp(1rem, 4vw, 2rem);
		--container-max-width: 75rem;

		/* Spacing */
		--space-xs: 0.25rem;
		--space-sm: 0.5rem;
		--space-md: 1rem;
		--space-lg: 1.5rem;
		--space-xl: 2rem;
		--space-2xl: 3rem;
		--space-3xl: 4rem;

		/* Border radius */
		--radius-sm: 0.25rem;
		--radius-md: 0.5rem;
		--radius-lg: 0.75rem;
		--radius-xl: 1rem;
		--radius-2xl: 1.25rem;
		--radius-full: 9999px;

		/* Transitions */
		--transition-fast: 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
		--transition-base: 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
		--transition-slow: 350ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	body {
		font-family: var(--font-body);
		font-size: 1rem;
		line-height: 1.6;
		color: var(--color-text);
		background-color: var(--color-surface);
		min-height: 100dvh;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-title);
		font-weight: 700;
		line-height: 1.2;
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
	}

	a {
		color: var(--color-primary);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	a:hover {
		color: var(--color-primary-300);
	}

	/* Utility Classes */
	.container {
		width: 100%;
		max-width: min(var(--container-max-width), 100%);
		margin-inline: auto;
		padding-inline: var(--container-gutter);
	}

	.visually-hidden {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		display: block;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.skip-link {
		position: absolute;
		inset-block-start: var(--space-sm);
		inset-inline-start: var(--space-sm);
		z-index: 200;
		padding-block: var(--space-xs);
		padding-inline: var(--space-md);
		background-color: var(--color-surface-elevated);
		color: var(--color-text);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		transform: translateY(-220%);
		transition: transform var(--transition-fast);
	}

	.skip-link:focus-visible {
		transform: translateY(0);
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	#main-content:focus {
		outline: none;
	}
}

/* ============================================
   Overrides Layer
   ============================================ */

@layer overrides {
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms;
			animation-iteration-count: 1;
			transition-duration: 0.01ms;
			scroll-behavior: auto;
		}
	}
}

@layer components {
	/* ============================================
     Button Components
     ============================================ */

	:where(a.btn, button.btn) {
		appearance: none;
		-webkit-appearance: none;
		margin: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: center;
	}

	:where(button.icon-button-square, a.icon-button-square) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: oklch(from var(--color-surface-elevated) l c h / 0.7);
		color: var(--color-text);
		cursor: pointer;
		text-decoration: none;
		transition:
			border-color var(--transition-fast),
			background-color var(--transition-fast),
			color var(--transition-fast),
			transform var(--transition-fast);
	}

	:where(button.icon-button-square, a.icon-button-square):is(:hover, :focus-visible) {
		border-color: var(--color-primary);
		background: oklch(from var(--color-primary) l c h / 0.14);
		color: var(--color-primary-200);
	}

	:where(button.icon-button-square, a.icon-button-square):focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	.icon-button-square--surface {
		background: oklch(from var(--color-surface-elevated) l c h / 0.9);
	}

	.btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-sm);
		padding-block: var(--space-sm);
		padding-inline: var(--space-lg);
		font-family: var(--font-body);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.4;
		text-decoration: none;
		border: 2px solid transparent;
		border-radius: var(--radius-md);
		cursor: pointer;
		overflow: hidden;
		transition:
			background-color var(--transition-base),
			border-color var(--transition-base),
			color var(--transition-base),
			box-shadow var(--transition-base),
			transform var(--transition-base);
	}

	/* Shimmer sweep effect on buttons */
	.btn::after {
		content: '';
		position: absolute;
		inset-block: 0;
		width: 60%;
		background: linear-gradient(
			105deg,
			transparent 20%,
			oklch(from var(--color-neutral-100) l c h / 0.12) 45%,
			oklch(from var(--color-neutral-100) l c h / 0.2) 50%,
			oklch(from var(--color-neutral-100) l c h / 0.12) 55%,
			transparent 80%
		);
		translate: -120% 0;
		pointer-events: none;
		transition: none;
	}

	.btn:hover:not(:disabled)::after {
		animation: btn-shimmer 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	@keyframes btn-shimmer {
		to {
			translate: 120% 0;
		}
	}

	.btn:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	.btn:active {
		transform: translateY(1px);
	}

	.btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}

	/* Button Sizes */
	.btn-sm {
		padding-block: var(--space-xs);
		padding-inline: var(--space-md);
		font-size: 0.8125rem;
	}

	.btn-lg {
		padding-block: var(--space-md);
		padding-inline: var(--space-xl);
		font-size: 1.0625rem;
	}

	.btn-hero {
		padding-block: var(--space-md);
		padding-inline: var(--space-2xl);
		font-size: 1.1rem;
		border-radius: var(--radius-lg);
	}

	/* Filled Buttons */
	.btn-filled {
		background-color: var(--color-primary);
		color: oklch(from var(--color-primary) 15% 0.02 h);
	}

	.btn-filled:hover:not(:disabled) {
		background-color: var(--color-primary-300);
		transform: translateY(-1px) scale(1.02);
		box-shadow: 0 6px 20px oklch(from var(--color-primary) l c h / 0.3);
	}

	.btn-filled.btn-secondary {
		background-color: var(--color-secondary);
		color: oklch(from var(--color-secondary) 15% 0.02 h);
	}

	.btn-filled.btn-secondary:hover:not(:disabled) {
		background-color: var(--color-secondary-300);
		transform: translateY(-1px) scale(1.02);
		box-shadow: 0 6px 20px oklch(from var(--color-secondary) l c h / 0.3);
	}

	/* Outline Buttons */
	.btn-outline {
		background-color: transparent;
		border-color: var(--color-primary);
		color: var(--color-primary);
	}

	.btn-outline:hover:not(:disabled) {
		background-color: oklch(from var(--color-primary) l c h / 0.1);
		border-color: var(--color-primary-300);
		color: var(--color-primary-300);
		transform: translateY(-1px);
		box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 0.15);
	}

	.btn-outline.btn-secondary {
		border-color: var(--color-secondary);
		color: var(--color-secondary);
	}

	.btn-outline.btn-secondary:hover:not(:disabled) {
		background-color: oklch(from var(--color-secondary) l c h / 0.1);
		border-color: var(--color-secondary-300);
		color: var(--color-secondary-300);
	}

	/* Text Buttons (link-style, no chrome) */
	.btn-text {
		background: none;
		border: none;
		padding: 0;
		color: var(--color-primary);
		font-weight: 500;
		text-decoration: none;
	}

	.btn-text:hover:not(:disabled) {
		text-decoration: underline;
		text-underline-offset: 3px;
		color: var(--color-primary-300);
	}

	@media (max-width: 640px) {
		.btn-hero {
			padding-block: 0.875rem;
			padding-inline: var(--space-lg);
			font-size: 0.9375rem;
		}
	}

	/* ============================================
     Badge Components
     ============================================ */

	.badge {
		--badge-height: 1.875rem;
		--badge-padding-inline: 0.875rem;
		--badge-font-size: 0.8125rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		gap: 0.35rem;
		inline-size: max-content;
		max-inline-size: 100%;
		height: var(--badge-height);
		padding-inline: var(--badge-padding-inline);
		font-family: var(--font-body);
		font-size: var(--badge-font-size);
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.01em;
		text-align: center;
		border: 1px solid transparent;
		border-radius: var(--radius-full);
		white-space: nowrap;
		vertical-align: middle;
		justify-self: start;
		align-self: start;
	}

	.badge > :where(svg) {
		flex-shrink: 0;
	}

	/* Filled Badges */
	.badge-filled {
		background-color: var(--color-primary-300);
		border-color: oklch(from var(--color-primary) l c h / 0.24);
		color: oklch(from var(--color-primary) 18% 0.02 h);
	}

	.badge-filled.badge-secondary {
		background-color: var(--color-secondary-300);
		border-color: oklch(from var(--color-secondary) l c h / 0.24);
		color: oklch(from var(--color-secondary) 18% 0.02 h);
	}

	.badge-filled.badge-neutral {
		background-color: var(--color-neutral-700);
		border-color: oklch(from var(--color-neutral-300) l c h / 0.18);
		color: var(--color-text);
	}

	/* Soft Badges (subtle background) */
	.badge-soft {
		background-color: oklch(from var(--color-primary) l c h / 0.1);
		border-color: oklch(from var(--color-primary) l c h / 0.2);
		color: var(--color-primary-200);
	}

	.badge-soft.badge-secondary {
		background-color: oklch(from var(--color-secondary) l c h / 0.1);
		border-color: oklch(from var(--color-secondary) l c h / 0.2);
		color: var(--color-secondary-200);
	}

	.badge-soft.badge-neutral {
		background-color: oklch(from var(--color-neutral-800) l c h / 0.92);
		border-color: oklch(from var(--color-neutral-300) l c h / 0.14);
		color: var(--color-neutral-200);
	}

	/* Outline Badges */
	.badge-outline {
		background-color: transparent;
		border-color: var(--color-primary);
		color: var(--color-primary);
	}

	.badge-outline.badge-secondary {
		border-color: var(--color-secondary);
		color: var(--color-secondary);
	}

	.badge-outline.badge-neutral {
		border-color: var(--color-border);
		color: var(--color-text-muted);
	}

	/* Badge Sizes */
	.badge-sm {
		--badge-height: 1.625rem;
		--badge-padding-inline: 0.75rem;
		--badge-font-size: 0.75rem;
	}

	/* ============================================
     Card Components
     ============================================ */

	.card {
		background-color: var(--color-surface-hover);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-lg);
		padding: var(--space-lg);
	}

	.surface-panel {
		background-color: var(--color-surface-hover);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-lg);
	}

	.card-hover {
		transition:
			border-color var(--transition-fast),
			box-shadow var(--transition-fast);
	}

	.card-hover:hover {
		border-color: var(--color-border);
		box-shadow: 0 4px 20px oklch(from var(--color-primary) 20% 0.05 h / 0.3);
	}

	:where(.content-card, .featured-content-card, .learning-path-card)::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(
			105deg,
			transparent 40%,
			oklch(from var(--color-neutral-100) l c h / 0.04) 48%,
			oklch(from var(--color-neutral-100) l c h / 0.07) 50%,
			oklch(from var(--color-neutral-100) l c h / 0.04) 52%,
			transparent 60%
		);
		translate: -120% 0;
		pointer-events: none;
	}

	:where(.content-card, .featured-content-card, .learning-path-card):hover::after {
		animation: card-shine 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	@keyframes card-shine {
		to {
			translate: 120% 0;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		:where(.content-card, .featured-content-card, .learning-path-card)::after {
			display: none;
		}
	}

	.icon-feature-card {
		position: relative;
		overflow: hidden;
		isolation: isolate;
		min-height: 12rem;
		padding-block-end: 1.5rem;
		border-color: var(--color-border-subtle);
		background-color: var(--color-surface-elevated);
	}

	.icon-feature-card > :is(h3, .icon-feature-card-description) {
		position: relative;
		z-index: 1;
		max-width: min(78%, 18rem);
	}

	.icon-feature-card[data-has-icon-media='false'] > :is(h3, .icon-feature-card-description) {
		max-width: none;
	}

	.icon-feature-card h3 {
		margin-bottom: var(--space-sm);
		color: var(--color-primary);
	}

	.icon-feature-card-description {
		color: var(--color-text-muted);
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	.icon-feature-card-description :where(p) {
		margin: 0;
	}

	.icon-feature-card-description :where(p + p) {
		margin-top: var(--space-xs);
	}

	.icon-feature-card-icon {
		position: absolute;
		inset-inline-end: -0.35rem;
		inset-block-end: -0.5rem;
		width: clamp(5rem, 7.3vw, 6.25rem);
		height: auto;
		object-fit: contain;
		opacity: 0.5;
		pointer-events: none;
		z-index: 0;
		filter: saturate(1.05);
		transform: translate(8%, 8%);
		transition:
			transform var(--transition-base),
			opacity var(--transition-base);
	}

	.icon-feature-card-slot {
		position: absolute;
		inset-inline-end: -0.15rem;
		inset-block-end: -0.35rem;
		width: clamp(3.2rem, 5.5vw, 4rem);
		height: clamp(3.2rem, 5.5vw, 4rem);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-full);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.28);
		background: linear-gradient(
			165deg,
			oklch(from var(--color-primary) l c h / 0.2),
			oklch(from var(--color-secondary) l c h / 0.15)
		);
		font-size: clamp(1.35rem, 2.4vw, 1.75rem);
		line-height: 1;
		opacity: 0.96;
		pointer-events: none;
		z-index: 0;
		transform: translate(6%, 6%);
		transition:
			transform var(--transition-base),
			opacity var(--transition-base);
	}

	.icon-feature-card:hover .icon-feature-card-icon {
		transform: translate(4%, 4%);
		opacity: 0.44;
	}

	.icon-feature-card:hover .icon-feature-card-slot {
		transform: translate(4%, 4%);
		opacity: 0.9;
	}

	@media (max-width: 640px) {
		.icon-feature-card {
			min-height: auto;
			padding-bottom: 1.25rem;
		}

		.icon-feature-card > :is(h3, .icon-feature-card-description) {
			max-width: min(76%, 18rem);
		}

		.icon-feature-card-icon {
			width: 4.9rem;
			right: -0.45rem;
			bottom: -0.55rem;
			transform: translate(6%, 8%);
		}

		.icon-feature-card-slot {
			width: 3rem;
			height: 3rem;
			right: -0.25rem;
			bottom: -0.4rem;
			font-size: 1.3rem;
		}
	}

	/* ============================================
     Page Layout Utilities
     ============================================ */

	.page-stack {
		--page-section-space: var(--space-2xl);
		--page-content-gap: var(--space-lg);
		min-height: 100dvh;
	}

	.page-stack-rhythm-relaxed {
		--page-section-space-start: clamp(3.25rem, 6vw, 5.25rem);
		--page-section-space-stack-start: clamp(1.75rem, 3.5vw, 3rem);
		--page-section-space-end: clamp(2.25rem, 4.5vw, 3.5rem);
	}

	.page-stack-rhythm-roomy {
		--page-section-space-start: clamp(3.5rem, 6.25vw, 5.5rem);
		--page-section-space-stack-start: clamp(2.25rem, 4.25vw, 3.5rem);
		--page-section-space-end: clamp(2.5rem, 4.75vw, 3.75rem);
	}

	.page-stack-rhythm-legal {
		--page-section-space-start: clamp(2.5rem, 4.5vw, 3.5rem);
		--page-section-space-stack-start: clamp(1.5rem, 3vw, 2rem);
		--page-section-space-end: clamp(1.75rem, 3vw, 2.5rem);
	}

	.page-section {
		padding-block-start: var(--page-section-space-start, var(--page-section-space));
		padding-block-end: var(--page-section-space-end, var(--page-section-space));
	}

	.page-stack
		> :where(.page-hero, .page-section, .newsletter-section)
		+ :where(.page-hero, .page-section, .newsletter-section) {
		padding-block-start: var(
			--page-section-space-stack-start,
			var(--page-section-space-start, var(--page-section-space))
		);
	}

	.list-reset {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.section-flow {
		display: grid;
		gap: var(--page-content-gap);
	}

	.metadata-badge-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-sm);
	}

	.stretch-grid > li {
		display: flex;
	}

	.stretch-grid > li > * {
		flex: 1;
		width: 100%;
	}

	.page-stack .section-heading {
		margin-bottom: 0;
	}

	.page-stack .page-hero,
	.page-stack .newsletter-section {
		padding-block-start: var(--page-section-space-start, var(--page-section-space));
		padding-block-end: var(--page-section-space-end, var(--page-section-space));
	}

	@media (max-width: 1024px) {
		.page-stack {
			--page-section-space: var(--space-3xl);
			--page-content-gap: var(--space-xl);
		}
	}

	@media (max-width: 640px) {
		.page-stack {
			--page-section-space: var(--space-2xl);
			--page-content-gap: var(--space-lg);
		}
	}

	/* ============================================
     Page Hero (shared across routes)
     ============================================ */

	.page-hero {
		padding-block: var(--space-3xl);
		text-align: center;
	}

	.page-hero h1 {
		font-size: clamp(2rem, 5vw, 3rem);
		background: linear-gradient(
			135deg,
			var(--color-text) 0%,
			var(--color-primary) 50%,
			var(--color-secondary) 100%
		);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		margin-block-end: var(--space-md);
	}

	.page-hero-description {
		max-width: min(100%, 38rem);
		margin-inline: auto;
		font-size: 1.125rem;
		color: var(--color-text-muted);
	}

	/* ============================================
     Section Heading (shared)
     ============================================ */

	.section-kicker {
		margin: 0;
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--color-secondary-300);
	}

	.section-pill-label {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: var(--space-sm);
		padding: 0.28rem 0.8rem;
		border-radius: var(--radius-full);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.28);
		background: oklch(from var(--color-primary) l c h / 0.1);
		color: var(--color-primary-200);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.section-heading {
		text-align: center;
		margin-block-end: var(--space-xl);
	}

	.section-heading h2 {
		font-size: 2rem;
		margin-block-end: var(--space-sm);
	}

	.section-heading p {
		color: var(--color-text-muted);
		max-width: min(100%, 38rem);
		margin-inline: auto;
	}

	.section-heading-left {
		text-align: start;
	}

	/* ============================================
     Catalog Sections (courses & articles)
     ============================================ */

	.catalog-section-title {
		font-size: clamp(1.6rem, 3.2vw, 2.25rem);
		margin-bottom: 0;
	}

	.catalog-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
		gap: var(--space-lg);
	}

	.catalog-empty {
		text-align: center;
		padding-block: var(--space-2xl);
		padding-inline: var(--space-lg);
		color: var(--color-text-muted);
	}

	.catalog-toggle {
		display: flex;
		justify-content: center;
	}

	.catalog-more > summary + * {
		margin-block-start: var(--space-lg);
	}

	.catalog-more > summary {
		list-style: none;
		cursor: pointer;
	}

	.catalog-more > summary::-webkit-details-marker {
		display: none;
	}

	.catalog-more > summary:focus-visible {
		outline: none;
	}

	.catalog-more > summary:focus-visible .btn {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	.catalog-more:not([open]) .catalog-more-open,
	.catalog-more[open] .catalog-more-closed {
		display: none;
	}

	.catalog-featured-with-sidebar {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: var(--space-lg);
		align-items: stretch;
	}

	.catalog-featured-sidebar {
		display: flex;
		min-height: 0;
	}

	.catalog-featured-sidebar > * {
		flex: 1;
	}

	@media (max-width: 1024px) {
		.catalog-featured-with-sidebar {
			grid-template-columns: 1fr;
		}
	}

	/* ============================================
     Newsletter (shared)
     ============================================ */

	.newsletter-section {
		padding-block: var(--space-3xl);
	}

	.newsletter-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-md);
	}

	.newsletter-section h2 {
		font-size: 2rem;
	}

	.newsletter-content > p {
		color: var(--color-text-muted);
		max-width: 500px;
	}

	.newsletter-form {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-sm);
		margin-block-start: var(--space-md);
		width: 100%;
		max-width: min(100%, 28rem);
	}

	.newsletter-form > * {
		width: 100%;
	}

	.newsletter-form > .newsletter-honeypot {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.newsletter-input {
		flex: 1;
		padding-block: var(--space-sm);
		padding-inline: var(--space-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background-color: var(--color-surface);
		font-size: 0.9375rem;
	}

	.newsletter-input::placeholder {
		color: var(--color-text-muted);
	}

	.newsletter-input:focus {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		border-color: var(--color-primary);
	}

	.newsletter-feedback {
		width: 100%;
		max-width: min(100%, 28rem);
		padding: var(--space-sm) var(--space-md);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-md);
		font-size: 0.9375rem;
	}

	.newsletter-feedback-success {
		color: var(--color-neutral-100);
		background: oklch(from var(--color-secondary) l c h / 0.12);
		border-color: oklch(from var(--color-secondary) l c h / 0.32);
	}

	.newsletter-feedback-error {
		margin-block-start: var(--space-sm);
		color: oklch(85% 0.05 20);
		background: oklch(55% 0.18 20 / 0.14);
		border-color: oklch(62% 0.18 20 / 0.35);
	}

	.newsletter-disclaimer {
		font-size: 0.8125rem;
		color: var(--color-neutral-500);
	}
}

@layer components {
	.all-access-membership-pricing-panel {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
		align-items: center;
	}

	.all-access-membership-pricing-panel-toggle {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.all-access-membership-pricing-panel-card {
		width: 100%;
		max-width: var(--pricing-card-standard-width);
		margin-inline: auto;
	}

	.all-access-membership-pricing-panel-card .btn {
		width: 100%;
	}

	/* The shown interval's amount and period join the price row's flex layout. */
	.pricing-card-price > [data-interval] {
		display: contents;
	}

	.all-access-membership-pricing-panel:has([value='monthly']:checked) [data-interval='yearly'],
	.all-access-membership-pricing-panel:has([value='yearly']:checked) [data-interval='monthly'] {
		display: none;
	}
}

@layer components {
	.billing-interval-toggle {
		display: inline-grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		width: min(100%, 22rem);
		position: relative;
		isolation: isolate;
		border: 0;
		border-radius: var(--radius-full);
		background-color: var(--color-surface-hover);
		padding: 4px;
		gap: 4px;
		margin: 0;
		min-inline-size: 0;
	}

	.billing-interval-toggle-indicator {
		position: absolute;
		inset-block: 4px;
		inset-inline-start: 4px;
		width: calc(50% - 6px);
		border-radius: var(--radius-full);
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-200) 100%);
		box-shadow: 0 8px 20px oklch(from var(--color-primary) 45% 0.11 h / 25%);
		transform: translateX(0);
		transition:
			transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 340ms ease;
		pointer-events: none;
		z-index: 0;
	}

	.billing-interval-toggle:has([value='yearly']:checked) .billing-interval-toggle-indicator {
		transform: translateX(calc(100% + 4px));
	}

	.billing-interval-toggle-option {
		position: relative;
		z-index: 1;
		cursor: pointer;
	}

	.billing-interval-toggle-option-content {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 0.15rem;
		width: 100%;
		min-height: 3.15rem;
		padding: 0.625rem var(--space-lg);
		border-radius: var(--radius-full);
		background: transparent;
		color: var(--color-text-muted);
		font-family: var(--font-title);
		font-size: 0.9375rem;
		font-weight: 600;
		transition:
			color 240ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 240ms ease;
	}

	.billing-interval-toggle-option-label {
		line-height: 1;
	}

	.billing-interval-toggle-option-savings {
		font-size: 0.6875rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.01em;
		color: var(--color-secondary-200);
		white-space: nowrap;
		opacity: 0.88;
		transition:
			color 240ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 240ms ease;
	}

	.billing-interval-toggle-option:hover:not(:has(:checked))
		.billing-interval-toggle-option-content {
		color: var(--color-text);
	}

	.billing-interval-toggle-option:hover:not(:has(:checked))
		.billing-interval-toggle-option-savings {
		color: var(--color-secondary-100);
	}

	.billing-interval-toggle-input:focus-visible + .billing-interval-toggle-option-content {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	.billing-interval-toggle-option:has(:checked) .billing-interval-toggle-option-content {
		color: oklch(from var(--color-primary) 15% 0.02 h);
		transform: translateY(-1px);
	}

	.billing-interval-toggle-option:has(:checked) .billing-interval-toggle-option-savings {
		color: oklch(from var(--color-primary) 20% 0.02 h);
		opacity: 1;
	}

	@media (prefers-reduced-motion: reduce) {
		.billing-interval-toggle-indicator,
		.billing-interval-toggle-option-content,
		.billing-interval-toggle-option-savings {
			transition: none;
		}
	}
}

@layer components {
	/* ============================================
     Content Card Component
     ============================================ */

	.content-card {
		position: relative;
		container-type: inline-size;
		background-color: var(--color-surface-elevated);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.03);
		transition:
			border-color var(--transition-base),
			box-shadow var(--transition-base),
			transform var(--transition-base);
	}

	.content-card:hover {
		border-color: oklch(from var(--color-primary) l c h / 0.2);
		box-shadow:
			0 8px 28px oklch(from var(--color-primary) 20% 0.05 h / 0.3),
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.05);
		transform: translateY(-3px);
	}

	.content-card-link {
		display: flex;
		flex-direction: column;
		block-size: 100%;
		text-decoration: none;
		color: inherit;
	}

	.content-card-link:focus-visible {
		outline: none;
		box-shadow: inset 0 0 0 2px var(--color-primary);
	}

	.content-card-thumbnail {
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background-color: var(--color-neutral-800);
	}

	.content-card-thumbnail-link {
		display: block;
		block-size: 100%;
		color: inherit;
		text-decoration: none;
	}

	.content-card-thumbnail-link:focus-visible {
		outline: none;
		box-shadow: inset 0 0 0 2px var(--color-primary);
	}

	.content-card-thumbnail .image {
		inline-size: 100%;
		block-size: 100%;
	}

	.content-card-thumbnail .image img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		transition: transform var(--transition-slow);
	}

	.content-card:hover .content-card-thumbnail .image img {
		transform: scale(1.05);
	}

	.content-card-content {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		padding-block: var(--space-lg);
		padding-inline: var(--space-lg);
		flex-grow: 1;
	}

	.content-card-title {
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--color-text);
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.content-card:hover .content-card-title {
		color: var(--color-primary);
	}

	.content-card-summary {
		color: var(--color-text-muted);
		font-size: 0.9375rem;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		flex-grow: 1;
	}

	@supports (line-clamp: 2) {
		.content-card-title {
			line-clamp: 2;
		}

		.content-card-summary {
			line-clamp: 3;
		}
	}

	.content-card-date {
		font-size: 0.8125rem;
		color: var(--color-text-muted);
		margin-block-start: auto;
	}

	.content-card-title-link {
		color: inherit;
		text-decoration: none;
	}

	.content-card-title-link:focus-visible {
		outline: none;
		text-decoration: underline;
		text-decoration-color: var(--color-primary);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.2em;
	}

	.content-card--with-thumbnail-overlay .content-card-thumbnail {
		position: relative;
		isolation: isolate;
	}

	.content-card--with-thumbnail-overlay .content-card-thumbnail::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		opacity: 0;
		transition: opacity var(--transition-base);
		background: linear-gradient(
			180deg,
			oklch(from var(--color-neutral-900) l c h / 0) 25%,
			oklch(from var(--color-neutral-900) l c h / 0.74) 100%
		);
	}

	.content-card-thumbnail-overlay {
		position: absolute;
		left: 0.65rem;
		right: 0.65rem;
		bottom: 0.65rem;
		z-index: 2;
		opacity: 0;
		transform: translateY(0.35rem);
		pointer-events: none;
		transition:
			opacity var(--transition-base),
			transform var(--transition-base);
	}

	.content-card-thumbnail-overlay > * {
		pointer-events: auto;
	}

	.content-card-thumbnail-actions {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.7rem;
	}

	.content-card-thumbnail-action {
		justify-content: center;
		text-wrap: nowrap;
		min-inline-size: 0;
		padding-block: 0.34rem;
		padding-inline: 0.5rem;
		font-size: 0.76rem;
		border-width: 1px;
		border-radius: 0.6rem;
	}

	.content-card--with-thumbnail-overlay .content-card-thumbnail:hover::after,
	.content-card--with-thumbnail-overlay .content-card-thumbnail:focus-within::after {
		opacity: 1;
	}

	.content-card--with-thumbnail-overlay
		.content-card-thumbnail:hover
		.content-card-thumbnail-overlay,
	.content-card--with-thumbnail-overlay
		.content-card-thumbnail:focus-within
		.content-card-thumbnail-overlay {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	@container (max-width: 32rem) {
		.content-card-thumbnail-actions {
			justify-content: stretch;
		}

		.content-card-thumbnail-action {
			flex: 1 1 auto;
		}
	}

	@media (hover: none) {
		.content-card--with-thumbnail-overlay .content-card-thumbnail::after {
			opacity: 1;
		}

		.content-card-thumbnail-overlay {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}
	}
}

@layer components {
	.course-curriculum-list {
		display: grid;
		gap: var(--space-md);
	}

	.course-curriculum-item {
		padding: 0;
		overflow: clip;
	}

	.course-curriculum-item-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-lg);
		width: 100%;
		min-width: 0;
		padding: var(--space-lg);
	}

	.course-curriculum-item-header {
		min-width: 0;
		display: grid;
		gap: var(--space-xs);
	}

	.course-curriculum-item-title {
		font-size: 1.0625rem;
		font-family: var(--font-title);
		font-weight: 700;
		margin: 0;
		color: var(--color-text);
	}

	.course-curriculum-section-toggle {
		display: block;
		list-style: none;
		width: 100%;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		color: inherit;
		text-align: start;
		cursor: pointer;
		font: inherit;
		transition: background-color var(--transition-fast);
	}

	.course-curriculum-section-toggle:hover {
		background-color: oklch(from var(--color-primary) l c h / 0.06);
	}

	.course-curriculum-section-toggle:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		border-radius: var(--radius-sm);
	}

	.course-curriculum-item-right {
		display: inline-flex;
		align-items: center;
		gap: var(--space-sm);
		flex-shrink: 0;
	}

	.course-curriculum-section-chevron {
		color: var(--color-text-muted);
		transition:
			transform var(--transition-fast),
			color var(--transition-fast);
	}

	.course-curriculum-section-toggle:hover .course-curriculum-section-chevron {
		color: var(--color-text);
	}

	.course-curriculum-section-toggle::-webkit-details-marker {
		display: none;
	}

	.course-curriculum-item[open] .course-curriculum-section-chevron {
		transform: rotate(180deg);
	}

	.course-curriculum-item-meta {
		color: var(--color-text-muted);
		font-size: 0.875rem;
		margin: 0;
	}

	.course-curriculum-lecture-list {
		display: grid;
		gap: 0;
		padding: var(--space-xs) var(--space-lg) var(--space-lg);
		border-top: 1px solid var(--color-border-subtle);
		background: linear-gradient(
			180deg,
			oklch(from var(--color-primary) l c h / 0.05) 0%,
			transparent 30%
		);
	}

	.course-curriculum-lecture-item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-md);
		padding-block: 0.6rem;
		font-size: 0.9375rem;
		color: var(--color-text);
		line-height: 1.4;
		border-top: 1px solid oklch(from var(--color-border-subtle) l c h / 0.55);
	}

	.course-curriculum-lecture-item:first-child {
		border-top: none;
	}

	.course-curriculum-lecture-index {
		color: var(--color-text-muted);
		font-family: var(--font-title);
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		min-width: 2ch;
		text-transform: uppercase;
	}

	.course-curriculum-lecture-title {
		min-width: 0;
		color: var(--color-text);
	}

	.course-curriculum-lecture-duration {
		color: var(--color-primary-100);
		font-family: var(--font-title);
		font-size: 0.8125rem;
		white-space: nowrap;
		padding: 0.2rem 0.55rem;
		border-radius: var(--radius-full);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.28);
		background: oklch(from var(--color-primary) l c h / 0.1);
	}

	.course-curriculum-item-duration {
		width: fit-content;
		font-family: var(--font-title);
		font-size: 0.875rem;
		white-space: nowrap;
	}

	@media (max-width: 640px) {
		.course-curriculum-item-main {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-sm);
		}

		.course-curriculum-item-right {
			width: 100%;
			justify-content: space-between;
		}

		.course-curriculum-lecture-list {
			padding: var(--space-xs) var(--space-md) var(--space-md);
		}

		.course-curriculum-item-duration {
			font-size: 0.9375rem;
		}

		.course-curriculum-lecture-item {
			grid-template-columns: auto minmax(0, 1fr);
			gap: var(--space-sm);
		}

		.course-curriculum-lecture-duration {
			grid-column: 2;
			justify-self: start;
		}
	}
}

@layer components {
	.course-preview-media-shell {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: oklch(from var(--color-surface-elevated) 24% c h);
	}

	.course-preview-media-shell--hero {
		border-radius: inherit;
	}

	.course-preview-media-image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.course-preview-media-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.course-preview-media-shell .video-player {
		max-width: none;
		margin-inline: 0;
	}

	.course-preview-media-placeholder {
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(
			150deg,
			oklch(from var(--color-surface-elevated) 24% c h),
			oklch(from var(--color-surface-elevated) 28% c h)
		);
		transition:
			opacity var(--transition-base),
			visibility var(--transition-base);
	}

	.course-preview-media-placeholder::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			105deg,
			transparent 35%,
			oklch(100% 0 0 / 0.04) 46%,
			oklch(100% 0 0 / 0.12) 50%,
			oklch(100% 0 0 / 0.04) 54%,
			transparent 65%
		);
		transform: translateX(-140%);
		animation: course-preview-media-shimmer 1.8s ease-in-out infinite;
	}

	.course-preview-media-shell[data-ready='true'] .course-preview-media-placeholder {
		opacity: 0;
		visibility: hidden;
	}

	@keyframes course-preview-media-shimmer {
		100% {
			transform: translateX(140%);
		}
	}
}

@layer components {
	/* ============================================
     Featured Content Card
     ============================================ */

	.featured-content-card {
		position: relative;
		container-type: inline-size;
		background:
			radial-gradient(
				circle at top right,
				oklch(from var(--color-primary) l c h / 0.2),
				transparent 50%
			),
			var(--color-surface-elevated);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-xl);
		overflow: hidden;
		box-shadow: inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.04);
		transition:
			border-color var(--transition-base),
			box-shadow var(--transition-base),
			transform var(--transition-base);
	}

	.featured-content-card:hover {
		border-color: oklch(from var(--color-primary) l c h / 0.25);
		box-shadow:
			0 12px 36px oklch(from var(--color-primary) 20% 0.05 h / 0.35),
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.06);
		transform: translateY(-3px);
	}

	.featured-content-card-link {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		min-block-size: 100%;
		color: inherit;
		text-decoration: none;
	}

	.featured-content-card-link:focus-visible {
		outline: none;
		box-shadow: inset 0 0 0 2px var(--color-primary);
	}

	.featured-content-card-link-no-media {
		grid-template-columns: 1fr;
	}

	.featured-content-card-media {
		min-block-size: 100%;
		background: var(--color-neutral-800);
	}

	.featured-content-card-media > .image {
		inline-size: 100%;
		block-size: 100%;
		min-block-size: 100%;
	}

	.featured-content-card-media > .image img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.featured-content-card-content {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		padding-block: var(--space-xl);
		padding-inline: var(--space-xl);
	}

	.featured-content-card-label {
		align-self: flex-start;
		color: var(--color-primary-200);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.featured-content-card-title {
		font-size: clamp(1.375rem, 2.1vw, 2rem);
		line-height: 1.2;
		color: var(--color-text);
	}

	.featured-content-card-summary {
		color: var(--color-text-muted);
		font-size: 1rem;
		line-height: 1.6;
		max-width: 54ch;
	}

	.featured-content-card-metadata {
		gap: var(--space-xs);
	}

	.featured-content-card-metadata-badge {
		color: var(--color-secondary-300);
	}

	.featured-content-card-cta {
		align-items: center;
		color: var(--color-primary-300);
		display: inline-flex;
		font-size: 0.95rem;
		font-weight: 700;
		gap: var(--space-sm);
		margin-block-start: auto;
	}

	@container (max-width: 42rem) {
		.featured-content-card-link {
			grid-template-columns: 1fr;
		}

		.featured-content-card-media {
			aspect-ratio: 16 / 9;
		}
	}
}

@layer components {
	.site-footer {
		position: relative;
		margin-top: clamp(3rem, 6vw, 5rem);
		padding-bottom: clamp(1rem, 2vw, 1.5rem);
	}

	.site-footer::before {
		content: '';
		position: absolute;
		inset-inline: 0;
		inset-block-start: 0;
		height: 1px;
		pointer-events: none;
		background: oklch(from var(--color-neutral-100) l c h / 0.08);
	}

	.footer-frame {
		display: grid;
	}

	.footer-shell {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 4vw, var(--space-3xl));
		align-items: start;
		padding: clamp(1.75rem, 4vw, 3rem);
	}

	.brand-panel {
		display: grid;
		gap: var(--space-md);
		align-content: start;
		max-width: 36rem;
	}

	.brand-logo {
		width: auto;
		height: 1.85rem;
	}

	.brand-note {
		max-width: 38ch;
		color: var(--color-neutral-300);
		font-size: 0.98rem;
	}

	.footer-socials {
		margin-block-start: var(--space-sm);
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-sm);
	}

	.footer-socials a {
		width: 2.4rem;
		height: 2.4rem;
		color: var(--color-neutral-200);
		border-color: oklch(from var(--color-neutral-100) l c h / 0.08);
		background: oklch(from var(--color-surface) l c h / 0.55);
		box-shadow: inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.04);
	}

	.footer-socials a:is(:hover, :focus-visible) {
		transform: translateY(-2px);
		border-color: oklch(from var(--color-primary) l c h / 0.45);
		color: var(--color-primary-100);
	}

	.footer-links-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1rem, 2.4vw, 1.75rem);
		align-content: start;
		align-items: start;
	}

	.footer-links-block {
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		gap: var(--space-sm);
		padding-inline-start: clamp(0.9rem, 1.5vw, 1.25rem);
		align-content: start;
	}

	.footer-links-block::before {
		content: '';
		position: absolute;
		inset-inline-start: 0;
		inset-block: 0.15rem;
		width: 1px;
		background: oklch(from var(--color-neutral-100) l c h / 0.08);
	}

	.footer-links-block h2 {
		min-block-size: 1em;
		font-size: 0.76rem;
		letter-spacing: 0.16em;
		line-height: 1;
		text-transform: uppercase;
		color: var(--color-neutral-400);
		margin: 0;
	}

	.footer-links {
		display: grid;
		gap: 0.75rem;
		align-content: start;
	}

	.footer-links a {
		display: inline-flex;
		align-items: center;
		width: fit-content;
		color: var(--color-text);
		text-decoration: none;
		font-weight: 600;
		transition: color var(--transition-fast);
	}

	.footer-links a:is(:hover, :focus-visible) {
		color: var(--color-primary-200);
	}

	.footer-links a:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		border-radius: var(--radius-sm);
	}

	.footer-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-sm);
		padding: var(--space-md) clamp(1.75rem, 4vw, 3rem) clamp(1rem, 2vw, 1.35rem);
		border-top: 1px solid oklch(from var(--color-neutral-100) l c h / 0.08);
		color: var(--color-neutral-400);
		font-size: 0.82rem;
	}

	@media (max-width: 1024px) {
		.footer-shell {
			grid-template-columns: 1fr;
		}

		.brand-panel {
			max-width: none;
		}
	}

	@media (max-width: 640px) {
		.site-footer {
			margin-top: var(--space-2xl);
		}

		.footer-shell {
			padding: var(--space-lg);
		}

		.footer-links-grid {
			grid-template-columns: 1fr;
		}

		.footer-links-block {
			padding-inline-start: 0;
			padding-block-start: var(--space-sm);
		}

		.footer-links-block::before {
			inset-inline: 0;
			inset-block: 0 auto;
			width: auto;
			height: 1px;
		}

		.footer-bottom {
			padding-inline: var(--space-lg);
		}
	}

	@media (max-width: 480px) {
		.footer-links {
			gap: var(--space-md);
		}

		.footer-bottom {
			flex-direction: column;
			gap: var(--space-sm);
			text-align: center;
		}
	}
}

@layer components {
	.header {
		position: relative;
		z-index: 100;
		padding-block: var(--space-md);
		background-color: var(--color-surface);
		border-bottom: 1px solid var(--color-border-subtle);
		transition:
			background-color var(--transition-base),
			border-bottom-color var(--transition-base),
			box-shadow var(--transition-base),
			backdrop-filter var(--transition-base),
			-webkit-backdrop-filter var(--transition-base);
	}

	.header-on-hero {
		background-color: transparent;
		border-bottom-color: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.header-inner {
		position: relative;
		z-index: 170;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-lg);
		min-height: 4.5rem;
	}

	.header-logo {
		display: flex;
		align-items: center;
		transition:
			opacity var(--transition-base),
			transform var(--transition-base);
	}

	.header-logo:hover {
		opacity: 0.88;
		transform: scale(1.02);
	}

	.header-logo img {
		height: 2.5rem;
		width: auto;
	}

	.header-nav {
		min-inline-size: 0;
	}

	.header-nav-list {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
	}

	.nav-link {
		padding-block: var(--space-sm);
		padding-inline: var(--space-md);
		font-size: 1.0625rem;
		font-weight: 600;
		color: var(--color-text-muted);
		border-radius: var(--radius-md);
		transition:
			color var(--transition-base),
			background-color var(--transition-base),
			transform var(--transition-base);
	}

	.nav-link:hover {
		color: var(--color-text);
		background-color: oklch(from var(--color-surface-hover) l c h / 0.8);
	}

	.nav-link[aria-current='page'] {
		color: var(--color-primary);
	}

	.header-auth {
		display: flex;
		align-items: center;
		margin-inline-start: auto;
	}

	.header-auth > .btn {
		font-size: 0.9375rem;
	}

	.header-menu-toggle {
		display: none;
	}

	.header-mobile-shell {
		position: fixed;
		inset: 6rem 0 auto;
		margin: 0;
		padding: 0;
		border: 0;
		inline-size: auto;
		background: transparent;
		color: inherit;
		overflow: visible;
	}

	.header-mobile-shell::backdrop {
		background: oklch(0% 0 0 / 0.45);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	.header-menu-close,
	.header:has(.header-mobile-shell:popover-open) .header-menu-open {
		display: none;
	}

	.header:has(.header-mobile-shell:popover-open) .header-menu-close {
		display: block;
	}

	.header-mobile-panel {
		display: grid;
		gap: var(--space-lg);
		margin-top: var(--space-sm);
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.18);
		background: linear-gradient(
			160deg,
			oklch(from var(--color-surface-elevated) l c h / 0.98),
			oklch(from var(--color-surface-hover) l c h / 0.95)
		);
		box-shadow:
			0 20px 48px oklch(0% 0 0 / 0.34),
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.05);
	}

	.header-mobile-nav-list {
		display: grid;
		gap: var(--space-xs);
	}

	.header-mobile-nav-list .nav-link {
		display: flex;
		align-items: center;
		min-height: 3rem;
		width: 100%;
		padding-inline: var(--space-md);
	}

	.header-mobile-auth {
		display: flex;
		justify-content: stretch;
	}

	.header-mobile-auth > * {
		width: 100%;
	}

	@media (max-width: 1024px) {
		.header-inner {
			min-height: 4rem;
		}

		.header-logo {
			margin-inline-end: auto;
		}

		.header-nav {
			display: none;
		}

		.header-auth {
			display: none;
		}

		.header-menu-toggle {
			display: inline-flex;
		}
	}

	@media (max-width: 480px) {
		.header {
			padding-block: var(--space-sm);
		}

		.header-logo img {
			height: 2rem;
		}

		.header-inner {
			min-height: 3.5rem;
		}

		.header-mobile-shell {
			inset-block-start: 4.5rem;
		}

		.header-mobile-panel {
			padding: var(--space-md);
			border-radius: var(--radius-lg);
		}

		.header-mobile-nav-list .nav-link {
			min-height: 2.75rem;
			padding-inline: 0.75rem;
			font-size: 0.9375rem;
		}
	}

	@supports (backdrop-filter: blur(12px)) {
		.header {
			background-color: oklch(from var(--color-surface) l c h / 0.72);
			backdrop-filter: blur(20px) saturate(1.4);
			-webkit-backdrop-filter: blur(20px) saturate(1.4);
			border-bottom-color: oklch(from var(--color-primary) l c h / 0.08);
			box-shadow:
				0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.04),
				0 4px 24px oklch(from var(--color-surface) l c h / 0.5),
				inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.05);
		}

		.header-on-hero {
			background-color: transparent;
			border-bottom-color: transparent;
			box-shadow: none;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
	}
}

@layer components {
	/* ============================================
     Home hero — shell and content
     ============================================ */

	.hero {
		--_header-h: calc(2 * var(--space-md) + 2.5rem);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-block-start: clamp(3rem, 6vw, 6rem);
		padding-block-start: var(--space-xl);
		padding-block-end: var(--space-lg);
		overflow-x: clip;
	}

	.hero-glow {
		position: absolute;
		top: 50%;
		left: 35%;
		width: clamp(600px, 70vw, 1100px);
		height: clamp(600px, 70vw, 1100px);
		transform: translate(-50%, -50%);
		background: radial-gradient(
			circle,
			oklch(from var(--color-primary) l c h / 0.1) 0%,
			oklch(from var(--color-primary) l c h / 0.03) 35%,
			transparent 60%
		);
		pointer-events: none;
		animation: hero-glow-breathe 8s ease-in-out infinite alternate;
	}

	@keyframes hero-glow-breathe {
		0% {
			transform: translate(-50%, -50%) scale(1);
		}
		100% {
			transform: translate(-50%, -50%) scale(1.08);
		}
	}

	.hero-content {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var(--space-3xl);
	}

	.hero-glass {
		position: absolute;
		inset: calc(-1 * var(--space-3xl));
		z-index: 0;
		overflow: hidden;
		border: 1px solid oklch(100% 0 0 / 0.045);
		border-radius: 1.5rem;
		background: oklch(from var(--color-primary) 25% 0.025 h / 0.2);
		-webkit-backdrop-filter: blur(11px) saturate(1.08);
		backdrop-filter: blur(11px) saturate(1.08);
		box-shadow:
			0 5px 20px oklch(0% 0 0 / 0.15),
			inset 0 1px 0 oklch(100% 0 0 / 0.04),
			inset 3px -3px 14px -8px oklch(from var(--color-primary) l c h / 0.045);
		pointer-events: none;
		opacity: 0;
		animation: hero-fade-up 800ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
	}

	.hero-glass::before {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(
			135deg,
			oklch(from var(--color-primary) 39% 0.075 h / 0.05) 0%,
			transparent 40%,
			transparent 60%,
			oklch(from var(--color-secondary) 33% 0.055 h / 0.04) 100%
		);
		pointer-events: none;
	}

	.hero-glass::after {
		content: '';
		position: absolute;
		bottom: -2rem;
		left: -2rem;
		width: 16rem;
		height: 16rem;
		background: radial-gradient(
			circle at center,
			oklch(from var(--color-primary) l c h / 0.075) 0%,
			oklch(from var(--color-primary) l c h / 0.022) 40%,
			transparent 70%
		);
		border-radius: var(--radius-full);
		pointer-events: none;
		animation: hero-orb-breathe 8s ease-in-out infinite alternate;
	}

	@keyframes hero-orb-breathe {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(1.06);
		}
	}

	@supports not (backdrop-filter: blur(1px)) {
		.hero-glass {
			background: oklch(from var(--color-primary) 23% 0.025 h / 0.32);
		}
	}

	.hero-text {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-lg);
		text-align: start;
	}

	.hero-proof {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		font-size: 0.95rem;
		color: oklch(from var(--color-text) l c h / 0.55);
		opacity: 0;
		animation: hero-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.hero-proof strong {
		color: var(--color-text);
		font-weight: 700;
	}

	.hero-proof svg {
		flex-shrink: 0;
		color: var(--color-primary);
	}

	.hero-headline {
		font-size: clamp(3rem, 7vw, 5.5rem);
		line-height: 1.1;
		letter-spacing: -0.04em;
		padding-bottom: 0.05em;
		white-space: nowrap;
		background: linear-gradient(
			160deg,
			var(--color-text) 0%,
			var(--color-text) 40%,
			var(--color-primary) 70%,
			var(--color-secondary) 100%
		);
		background-size: 200% 200%;
		background-position: 50% 50%;
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		filter: drop-shadow(0 0 40px oklch(from var(--color-primary) l c h / 0.15))
			drop-shadow(0 0 80px oklch(from var(--color-primary) l c h / 0.08));
		animation: hero-fade-up 800ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
	}

	.hero-tagline {
		inline-size: 100%;
		max-width: none;
		font-size: clamp(1.1rem, 2.2vw, 1.5rem);
		line-height: 1.6;
		color: var(--color-neutral-300);
		text-wrap: balance;
		opacity: 0;
		animation: hero-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
	}

	.hero-actions {
		display: flex;
		gap: var(--space-md);
		margin-block-start: var(--space-md);
		opacity: 0;
		animation: hero-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 550ms both;
	}

	@keyframes hero-fade-up {
		from {
			opacity: 0;
			transform: translateY(2rem);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* ============================================
     Home hero — course mosaic
     ============================================ */

	.hero-mosaic {
		position: relative;
		width: 100%;
		opacity: 0;
		animation: hero-fade-up 800ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both;
	}

	.hero-mosaic-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 0;
		width: 80%;
		height: 80%;
		transform: translate(-50%, -50%);
		background: radial-gradient(
			ellipse,
			oklch(from var(--color-primary) l c h / 0.1) 0%,
			oklch(from var(--color-secondary) l c h / 0.04) 40%,
			transparent 70%
		);
		border-radius: var(--radius-full);
		pointer-events: none;
		animation: mosaic-glow-breathe 6s ease-in-out infinite alternate;
	}

	@keyframes mosaic-glow-breathe {
		0% {
			transform: translate(-50%, -50%) scale(1);
		}
		100% {
			transform: translate(-50%, -50%) scale(1.06);
		}
	}

	.hero-mosaic-grid {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-sm);
	}

	.hero-mosaic-cell {
		--_opacity: calc(1 - var(--cell-dist, 0) * 0.55);

		position: relative;
		opacity: var(--_opacity);
		transition: opacity var(--transition-base);
		animation: hero-fade-up 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--cell-delay, 600ms) both;
	}

	.hero-mosaic-card {
		position: relative;
		display: block;
		overflow: hidden;
		width: 100%;
		border-radius: var(--radius-lg);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.12);
		background-color: var(--color-surface-elevated);
		aspect-ratio: 4 / 3;
		box-shadow:
			0 4px 16px oklch(from var(--color-primary) 16% 0.06 h / 0.1),
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.04);
		transition:
			border-color var(--transition-base),
			box-shadow var(--transition-base);
	}

	.hero-mosaic-cell:hover .hero-mosaic-card {
		border-color: oklch(from var(--color-primary) l c h / 0.35);
		box-shadow:
			0 12px 40px oklch(from var(--color-primary) 16% 0.06 h / 0.25),
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.06);
	}

	.hero-mosaic-card:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	.hero-mosaic-card-image {
		width: 100%;
		height: 100%;
	}

	.hero-mosaic-card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--transition-base);
	}

	.hero-mosaic-cell:hover .hero-mosaic-card-image img {
		transform: scale(1.05);
	}

	.hero-mosaic-card::before {
		content: '';
		position: absolute;
		inset: -20%;
		z-index: 1;
		background: linear-gradient(
			135deg,
			oklch(from var(--color-primary) 85% 0.14 h / 0.35) 0%,
			oklch(from var(--color-primary) 90% 0.08 h / 0.15) 25%,
			transparent 55%
		);
		pointer-events: none;
		transition: opacity var(--transition-base);
	}

	.hero-mosaic-cell:hover .hero-mosaic-card::before {
		opacity: 0.6;
	}

	.hero-mosaic-card-fallback {
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, var(--color-surface-elevated), var(--color-surface-hover));
	}

	.hero-mosaic-card-scrim {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 30%, oklch(0% 0 0 / 0.8) 100%);
		pointer-events: none;
		transition: opacity var(--transition-base);
	}

	.hero-mosaic-cell:hover .hero-mosaic-card-scrim {
		opacity: 0.85;
	}

	.hero-mosaic-card-label {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		padding: var(--space-xs) var(--space-sm);
		font-size: var(--font-size-sm);
		font-weight: 700;
		line-height: 1.3;
		color: var(--color-neutral-100);
		pointer-events: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hero-mosaic-card--all-courses {
		display: block;
		text-decoration: none;
		color: inherit;
		background: linear-gradient(160deg, var(--color-surface-elevated), var(--color-surface-hover));
	}

	.hero-mosaic-card--all-courses::before {
		display: none;
	}

	.hero-mosaic-all-courses-svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		padding: 12%;
		transition: transform var(--transition-base);
	}

	.hero-mosaic-cell:hover .hero-mosaic-all-courses-svg {
		transform: scale(1.05);
	}

	.hero-mosaic-all-courses-card {
		animation: mosaic-all-float 3s ease-in-out infinite alternate;
	}

	@keyframes mosaic-all-float {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-2px);
		}
	}

	/* ============================================
     Home hero — customer proof strip
     ============================================ */

	.customer-proof {
		position: relative;
		z-index: 2;
		width: 100%;
		margin-block-start: var(--space-3xl);
		padding-block: var(--space-md) var(--space-lg);
		opacity: 0;
		animation: customer-proof-fade-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 700ms both;
	}

	.customer-proof-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-lg);
	}

	.customer-proof-label {
		font-size: 0.75rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: oklch(from var(--color-text) l c h / 0.35);
		white-space: nowrap;
		flex-shrink: 0;
	}

	.customer-proof-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-md);
	}

	.customer-proof-item {
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		color: oklch(from var(--color-text) l c h / 0.4);
		white-space: nowrap;
		flex-shrink: 0;
		transition: color 300ms ease;
	}

	.customer-proof-item + .customer-proof-item::before {
		content: '\00b7';
		margin-inline-end: var(--space-md);
		font-weight: 300;
		font-size: 1.1em;
		color: oklch(from var(--color-text) l c h / 0.2);
	}

	.customer-proof-item:hover {
		color: oklch(from var(--color-text) l c h / 0.7);
	}

	@keyframes customer-proof-fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@media (max-width: 1200px) {
		.hero-glass {
			display: none;
		}

		.customer-proof-inner {
			flex-direction: column;
			gap: var(--space-sm);
		}

		.customer-proof-list {
			gap: var(--space-sm);
		}

		.customer-proof-item + .customer-proof-item::before {
			margin-inline-end: var(--space-sm);
		}
	}

	@media (max-width: 1024px) {
		.hero {
			margin-block-start: var(--space-lg);
			padding-block-start: var(--space-2xl);
			padding-block-end: var(--space-xl);
		}

		.hero-glow {
			width: min(34rem, 90vw);
			height: min(34rem, 90vw);
			top: 42%;
			left: 50%;
		}

		.hero-content {
			grid-template-columns: 1fr;
			gap: var(--space-xl);
		}

		.hero-text {
			align-items: center;
			text-align: center;
		}

		.hero-headline {
			white-space: normal;
			font-size: clamp(2.75rem, 10vw, 4.75rem);
		}

		.hero-tagline {
			max-width: 34rem;
		}
	}

	@media (max-width: 768px) {
		.hero-actions {
			max-width: none;
			width: 100%;
			flex-wrap: wrap;
			justify-content: center;
		}
	}

	@media (max-width: 640px) {
		.hero {
			padding-block-start: var(--space-xl);
		}

		.hero-proof {
			font-size: 0.875rem;
		}

		.hero-actions {
			gap: var(--space-sm);
		}

		.hero-mosaic-grid {
			gap: var(--space-xs);
		}

		.hero-mosaic-card-label {
			font-size: 0.8125rem;
		}
	}

	@media (max-width: 480px) {
		.hero-headline {
			font-size: clamp(2rem, 12vw, 2.8rem);
		}

		.hero-tagline {
			font-size: 0.9375rem;
		}

		.hero-actions {
			flex-direction: column;
			align-items: center;
		}

		.hero-actions .btn {
			min-width: 15rem;
			padding-block: 0.875rem;
			font-size: 0.9375rem;
		}

		.customer-proof-item {
			font-size: 0.75rem;
		}

		.customer-proof-list {
			gap: var(--space-xs);
		}

		.customer-proof-item + .customer-proof-item::before {
			margin-inline-end: var(--space-xs);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hero-mosaic,
		.customer-proof {
			opacity: 1;
			animation: none;
		}

		.hero-mosaic-glow,
		.hero-mosaic-cell,
		.hero-mosaic-all-courses-card {
			animation: none;
		}

		.hero-mosaic-card,
		.hero-mosaic-card-image,
		.hero-mosaic-all-courses-svg,
		.customer-proof-item {
			transition: none;
		}
	}
}

@layer components {
	/* ============================================
     Learning Paths — "Choose how you learn" section
     ============================================ */

	#home-learning {
		scroll-margin-top: 6.5rem;
	}

	.learning-paths-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg);
		width: 100%;
		max-width: 900px;
	}

	/* ---- Card ---- */

	.learning-path-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		padding: var(--space-2xl) var(--space-xl);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
		background-color: oklch(24% 0.018 var(--color-primary-h));
		box-shadow: inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.06);
		text-align: start;
		overflow: hidden;
		transition:
			border-color var(--transition-base),
			box-shadow var(--transition-base),
			transform var(--transition-base);
	}

	.learning-path-card:hover {
		border-color: oklch(from var(--color-primary) l c h / 0.35);
		box-shadow:
			0 12px 40px oklch(from var(--color-primary) 16% 0.06 h / 0.22),
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.06);
		transform: translateY(-4px);
	}

	/* ---- Featured variant (Membership) ---- */

	.learning-path-card--featured {
		border-color: oklch(from var(--color-primary) l c h / 0.35);
		background: linear-gradient(
			165deg,
			oklch(from var(--color-primary) l c h / 0.08) 0%,
			oklch(24% 0.018 var(--color-primary-h)) 40%,
			oklch(from var(--color-secondary) l c h / 0.06) 100%
		);
	}

	.learning-path-card--featured:hover {
		border-color: oklch(from var(--color-primary) l c h / 0.5);
		box-shadow:
			0 16px 48px oklch(from var(--color-primary) 16% 0.06 h / 0.28),
			0 0 0 1px oklch(from var(--color-primary) l c h / 0.12);
	}

	/* Decorative accent orbs — featured card only */
	.lp-card-orb {
		position: absolute;
		border-radius: 50%;
		pointer-events: none;
		filter: blur(40px);
		z-index: 0;
	}

	.lp-card-orb--1 {
		width: 160px;
		height: 160px;
		top: -40px;
		right: -20px;
		background: oklch(from var(--color-primary) l c h / 0.08);
	}

	.lp-card-orb--2 {
		width: 120px;
		height: 120px;
		bottom: -20px;
		left: -12px;
		background: oklch(from var(--color-secondary) l c h / 0.06);
	}

	/* ---- Badge — absolute top-right ribbon ---- */

	.learning-path-card .badge {
		position: absolute;
		top: var(--space-md);
		right: var(--space-md);
		z-index: 2;
	}

	/* ---- Headings ---- */

	.learning-path-card h3 {
		position: relative;
		z-index: 1;
		font-size: 1.25rem;
	}

	.learning-path-card--featured h3 {
		background: linear-gradient(
			135deg,
			oklch(from var(--color-primary) 85% c h) 0%,
			oklch(from var(--color-secondary) 82% c h) 100%
		);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.learning-path-card .btn {
		position: relative;
		z-index: 1;
		margin-block-start: auto;
		align-self: flex-start;
	}

	/* ---- SVG artwork ---- */

	.learning-path-art {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
		margin-block-end: var(--space-sm);
	}

	/* All-access grid thumbnails — gentle float */
	.lp-grid-thumb {
		animation: lp-float 3s ease-in-out infinite;
	}

	@keyframes lp-float {
		0%,
		100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-3px);
		}
	}

	/* Connecting wave */
	.lp-infinity-line {
		stroke-dasharray: 8 6;
	}

	/* Single-course spotlight pulse */
	.lp-spotlight {
		animation: lp-spotlight-pulse 3s ease-in-out infinite;
	}

	@keyframes lp-spotlight-pulse {
		0%,
		100% {
			opacity: 0.06;
		}
		50% {
			opacity: 0.12;
		}
	}

	/* Single-course hero card subtle hover glow (via parent) */
	.learning-path-card:hover .lp-hero-card {
		stroke-opacity: 0.28;
	}

	/* ---- Benefits list ---- */

	.learning-path-benefits {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-block: var(--space-sm);
		flex-grow: 1;
	}

	.learning-path-benefits li {
		display: flex;
		align-items: baseline;
		gap: var(--space-xs);
		font-size: 0.9375rem;
		color: var(--color-text-muted);
		line-height: 1.55;
	}

	.learning-path-benefits li::before {
		content: '✓';
		flex-shrink: 0;
		font-weight: 700;
		font-size: 0.8125rem;
		color: oklch(from var(--color-primary) l c h / 0.7);
	}

	/* Featured card benefits — brighter, gradient-tinted checks */
	.learning-path-benefits--featured li {
		color: var(--color-text);
	}

	.learning-path-benefits--featured li::before {
		color: oklch(from var(--color-primary) 78% c h);
	}

	/* ---- Reduced motion ---- */

	@media (prefers-reduced-motion: reduce) {
		.learning-path-card {
			transition: none;
		}

		.lp-grid-thumb,
		.lp-spotlight {
			animation: none;
		}
	}

	/* ---- Responsive ---- */

	@media (max-width: 1024px) {
		.learning-paths-grid {
			grid-template-columns: 1fr;
			max-width: 25rem;
		}
	}

	@media (max-width: 640px) {
		#home-learning {
			scroll-margin-top: 8rem;
		}

		.learning-path-card {
			padding: var(--space-xl) var(--space-lg);
		}
	}
}

@layer components {
	/* ── Shell ── */
	.skills-now-shell {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(var(--space-xl), 5vw, 4.5rem);
		width: 100%;
		max-width: 1080px;
		margin-inline: auto;
		text-align: center;
	}

	/* ── Orbit visual ── */
	.skills-now-visual {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.skills-now-orbit {
		position: relative;
		width: min(420px, 75vw);
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.skills-now-orbit::before {
		content: '';
		position: absolute;
		width: 60%;
		height: 60%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: radial-gradient(
			circle,
			oklch(from var(--color-primary) l c h / 0.12) 0%,
			oklch(from var(--color-primary) l c h / 0.04) 50%,
			transparent 70%
		);
		border-radius: var(--radius-full);
		pointer-events: none;
	}

	.skills-now-figure {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.skills-now-image {
		width: 65%;
		height: auto;
		filter: drop-shadow(0 16px 40px oklch(from var(--color-primary) 15% 0.08 h / 0.3));
	}

	/* ── Ring ── */
	.skills-now-ring {
		position: absolute;
		inset: 0;
		border: 1px solid oklch(from var(--color-primary) l c h / 0.12);
		border-radius: var(--radius-full);
	}

	.skills-now-ring::before {
		content: '';
		position: absolute;
		inset: -1px;
		border-radius: var(--radius-full);
		border: 2px solid transparent;
		border-top-color: oklch(from var(--color-primary) l c h / 0.35);
		border-right-color: oklch(from var(--color-primary) l c h / 0.15);
		animation: skills-now-orbit-spin 20s linear infinite;
		pointer-events: none;
	}

	@keyframes skills-now-orbit-spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* ── Ring dot markers ── */
	.skills-now-ring-dot {
		margin: 0;
		position: absolute;
		width: 1rem;
		height: 1rem;
		-webkit-appearance: none;
		appearance: none;
		border: 2px solid oklch(from var(--color-primary) l c h / 0.4);
		border-radius: var(--radius-full);
		background: oklch(from var(--color-surface-elevated) l c h / 0.9);
		box-shadow: 0 0 12px oklch(from var(--color-primary) l c h / 0.15);
		transform: translate(-50%, -50%);
		transition:
			transform var(--transition-fast),
			box-shadow var(--transition-fast),
			border-color var(--transition-fast),
			background-color var(--transition-fast);
		cursor: pointer;
		z-index: 2;
		padding: 0;
	}

	.skills-now-ring-dot[data-ring-index='1'] {
		top: 0%;
		left: 50%;
	}

	.skills-now-ring-dot[data-ring-index='2'] {
		top: 78%;
		left: 98%;
	}

	.skills-now-ring-dot[data-ring-index='3'] {
		top: 78%;
		left: 2%;
	}

	.skills-now-ring-dot:checked {
		border-color: var(--color-primary);
		background: var(--color-primary);
		box-shadow: 0 0 18px oklch(from var(--color-primary) l c h / 0.45);
		transform: translate(-50%, -50%) scale(1.35);
	}

	.skills-now-ring-dot:is(:hover, :focus-visible) {
		border-color: oklch(from var(--color-primary) l c h / 0.7);
		box-shadow: 0 0 16px oklch(from var(--color-primary) l c h / 0.3);
		transform: translate(-50%, -50%) scale(1.2);
	}

	.skills-now-ring-dot:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 3px;
	}

	/* ── Card grid ── */
	.skills-now-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-md);
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.skills-now-card {
		display: flex;
		flex-direction: column;
		gap: 0.42rem;
		height: 100%;
		padding: clamp(var(--space-md), 2.2vw, var(--space-lg));
		border: 1px solid oklch(from var(--color-primary) l c h / 0.14);
		border-radius: var(--radius-xl, 1.25rem);
		background: linear-gradient(
			165deg,
			oklch(from var(--color-surface-elevated) l c h / 0.94) 0%,
			oklch(from var(--color-surface-elevated) l c h / 0.82) 100%
		);
		box-shadow:
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.04),
			0 8px 24px oklch(from var(--color-text) l c h / 0.06);
		text-align: start;
		transition:
			border-color 320ms ease,
			box-shadow 320ms ease;
	}

	.skills-now-shell:has(#skills-now-dot-ai-agents-tools:checked) #skills-now-card-ai-agents-tools,
	.skills-now-shell:has(#skills-now-dot-best-practices-patterns:checked)
		#skills-now-card-best-practices-patterns,
	.skills-now-shell:has(#skills-now-dot-crucial-fundamentals:checked)
		#skills-now-card-crucial-fundamentals {
		border-color: oklch(from var(--color-primary) l c h / 0.4);
		background: linear-gradient(
			165deg,
			oklch(from var(--color-surface-elevated) l c h / 0.98) 0%,
			oklch(from var(--color-surface-elevated) l c h / 0.88) 100%
		);
		box-shadow:
			inset 0 1px 0 oklch(from var(--color-primary) l c h / 0.08),
			0 14px 36px oklch(from var(--color-primary) 16% 0.08 h / 0.18);
	}

	/* ── Card content (always visible) ── */
	.skills-now-card-title {
		font-size: clamp(1.08rem, 1.45vw, 1.28rem);
		line-height: 1.22;
		letter-spacing: -0.015em;
		color: var(--color-text);
		margin: 0;
	}

	.skills-now-card-body {
		font-size: 0.91rem;
		line-height: 1.53;
		color: var(--color-text-muted);
		margin: 0;
		text-wrap: pretty;
	}

	.skills-now-card-list {
		display: grid;
		gap: var(--space-xs);
		align-content: start;
		margin: 0;
		padding: 0;
	}

	.skills-now-card-list-item {
		position: relative;
		padding-inline-start: 1.25rem;
		color: var(--color-text);
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.skills-now-card-list-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.55em;
		width: 0.4rem;
		height: 0.4rem;
		border-radius: var(--radius-full);
		background: oklch(from var(--color-primary) l c h / 0.85);
	}

	.skills-now-card-outcome {
		margin: auto 0 0;
		padding-top: var(--space-sm);
		font-size: 0.8125rem;
		font-weight: 500;
		color: var(--color-text-muted);
		line-height: 1.45;
		border-top: 1px solid oklch(from var(--color-primary) l c h / 0.12);
	}

	.skills-now-card-outcome strong {
		color: var(--color-text);
	}

	/* ── CTA ── */
	.skills-now-cta {
		align-self: center;
		min-width: clamp(15rem, 28vw, 19rem);
	}

	/* ── Reduced motion ── */
	@media (prefers-reduced-motion: reduce) {
		.skills-now-ring::before {
			animation: none;
		}

		.skills-now-ring-dot {
			transition: none;
		}

		.skills-now-card {
			transition: none;
		}
	}

	/* ── Responsive: tablet ── */
	@media (max-width: 768px) {
		.skills-now-orbit {
			width: min(320px, 80vw);
		}

		.skills-now-ring-dot {
			width: 0.85rem;
			height: 0.85rem;
		}
	}

	/* ── Responsive: phone ── */
	@media (max-width: 1024px) {
		.skills-now-cards {
			grid-template-columns: 1fr;
			max-width: 31rem;
		}
	}

	@media (max-width: 640px) {
		.skills-now-cards {
			grid-template-columns: 1fr;
		}

		.skills-now-card {
			padding: var(--space-lg) var(--space-md);
		}

		.skills-now-card-title {
			font-size: 1.1rem;
		}
	}
}

@layer components {
	.image {
		position: relative;
		display: block;
		overflow: hidden;
		background: linear-gradient(
			135deg,
			oklch(from var(--color-surface-elevated) 24% c h),
			oklch(from var(--color-surface-hover) 28% c h)
		);
		isolation: isolate;
	}

	.image > img {
		display: block;
		inline-size: 100%;
		block-size: auto;
	}
}

@layer components {
	.instructor-card {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		overflow: hidden;
		width: 100%;
		height: 100%;
		padding: 0;
		border-radius: var(--radius-xl);
		background: linear-gradient(
			160deg,
			oklch(from var(--color-surface-elevated) l c h / 0.95),
			oklch(from var(--color-surface-hover) l c h / 0.95)
		);
	}

	.instructor-card-image {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background-color: var(--color-neutral-800);
	}

	.instructor-card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.instructor-card-content {
		display: flex;
		flex-direction: column;
		padding: var(--space-lg);
		text-align: start;
	}

	.instructor-card-content h3 {
		font-size: 1.25rem;
		margin-block-end: var(--space-xs);
	}

	.instructor-card-role {
		font-size: 0.875rem;
		color: var(--color-primary-200);
		font-weight: 700;
		letter-spacing: 0.01em;
		margin-block-end: var(--space-md);
	}

	.instructor-card-bio {
		font-size: 0.9375rem;
		color: var(--color-text-muted);
		line-height: 1.63;
		margin-block-end: var(--space-md);
	}

	.instructor-card-links {
		display: flex;
		gap: var(--space-sm);
		margin-top: auto;
	}

	.instructor-card-social-link {
		width: 40px;
		height: 40px;
		background-color: oklch(from var(--color-surface) l c h / 0.65);
		color: var(--color-text-muted);
	}

	.instructor-card-social-link:hover,
	.instructor-card-social-link:focus-visible {
		border-color: oklch(from var(--color-primary) l c h / 0.3);
		color: var(--color-primary);
	}
}

@layer components {
	.instructor-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--space-2xl);
		max-width: 840px;
		width: 100%;
		margin-inline: auto;
	}

	@media (max-width: 640px) {
		.instructor-grid {
			grid-template-columns: 1fr;
			gap: var(--space-xl);
			max-width: 400px;
		}
	}
}

@layer components {
	.legal-hero .container {
		display: grid;
		justify-items: center;
		gap: var(--space-sm);
	}

	.legal-updated {
		margin: 0;
		font-size: 0.875rem;
		color: var(--color-text-muted);
	}

	.legal-content {
		display: grid;
		gap: var(--space-lg);
	}

	.legal-card {
		width: 100%;
		max-width: 900px;
		margin-inline: auto;
		padding: clamp(var(--space-lg), 2.5vw, var(--space-2xl));
	}

	.legal-prose {
		display: grid;
		gap: var(--space-md);
	}

	.legal-prose h2 {
		font-size: clamp(1.45rem, 2.5vw, 1.85rem);
		margin-top: var(--space-md);
		margin-bottom: 0;
	}

	.legal-prose h3 {
		font-size: clamp(1.18rem, 2vw, 1.4rem);
		margin-top: var(--space-sm);
		margin-bottom: 0;
	}

	.legal-prose p {
		margin: 0;
		color: var(--color-text-muted);
	}

	.legal-prose strong {
		color: var(--color-text);
		font-weight: 700;
	}

	.legal-prose ul,
	.legal-prose ol {
		margin: 0;
		padding-inline-start: var(--space-xl);
		display: grid;
		gap: var(--space-xs);
	}

	.legal-prose li {
		color: var(--color-text-muted);
	}

	.legal-prose a {
		color: var(--color-primary-300);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.legal-prose a:is(:hover, :focus-visible) {
		color: var(--color-secondary-300);
	}

	.legal-address {
		font-style: normal;
		display: grid;
		gap: 0.125rem;
		color: var(--color-text-muted);
	}

	.legal-note {
		margin-top: var(--space-sm);
		padding: var(--space-md);
		border-radius: var(--radius-md);
		border: 1px solid var(--color-border-subtle);
		background-color: oklch(from var(--color-surface-elevated) l c h / 0.65);
		color: var(--color-text-muted);
	}

	.legal-divider {
		height: 1px;
		border: 0;
		margin: var(--space-md) 0;
		background-color: var(--color-border-subtle);
	}

	@media (max-width: 640px) {
		.legal-card {
			padding: var(--space-lg);
		}
	}
}

@layer components {
	/* ============================================
     Markdown Content Styles
     ============================================ */

	.markdown-content {
		font-size: 1.0625rem;
		line-height: 1.75;
		color: var(--color-text);
	}

	.markdown-content h2 {
		margin-top: var(--space-2xl);
		margin-bottom: var(--space-md);
		font-size: clamp(1.5rem, 3vw, 1.875rem);
		color: var(--color-text);
	}

	.markdown-content h3 {
		margin-top: var(--space-xl);
		margin-bottom: var(--space-sm);
		font-size: clamp(1.25rem, 2.5vw, 1.5rem);
		color: var(--color-text);
	}

	.markdown-content p {
		margin-bottom: var(--space-md);
	}

	.markdown-content a {
		color: var(--color-primary);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.markdown-content a:hover {
		color: var(--color-primary-300);
	}

	.markdown-content strong {
		font-weight: 700;
		color: var(--color-text);
	}

	.markdown-content em {
		font-style: italic;
	}

	/* Code blocks */
	.markdown-content code {
		font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
		font-size: 0.9em;
		padding: 0.125rem 0.375rem;
		background-color: var(--color-surface-elevated);
		border-radius: var(--radius-sm);
		color: var(--color-primary-300);
	}

	.markdown-content pre {
		margin-block: var(--space-lg);
		padding: var(--space-md);
		background-color: var(--color-neutral-900);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-md);
		overflow-x: auto;
	}

	.markdown-content pre code {
		padding: 0;
		background-color: transparent;
		border-radius: 0;
		color: var(--color-text);
		font-size: 0.875rem;
		line-height: 1.6;
	}

	/* Lists */
	.markdown-content ul,
	.markdown-content ol {
		margin-bottom: var(--space-md);
		padding-inline-start: var(--space-xl);
	}

	.markdown-content ul {
		list-style-type: disc;
	}

	.markdown-content ol {
		list-style-type: decimal;
	}

	.markdown-content li {
		margin-bottom: var(--space-xs);
	}

	.markdown-content li::marker {
		color: var(--color-primary);
	}

	/* Blockquotes */
	.markdown-content blockquote {
		margin-block: var(--space-lg);
		padding: var(--space-md) var(--space-lg);
		border-inline-start: 4px solid var(--color-primary);
		background-color: oklch(from var(--color-primary) l c h / 0.05);
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
		font-style: italic;
		color: var(--color-text-muted);
	}

	.markdown-content blockquote p:last-child {
		margin-bottom: 0;
	}

	/* Horizontal rules */
	.markdown-content hr {
		margin-block: var(--space-2xl);
		border: none;
		border-top: 1px solid var(--color-border);
	}

	/* Images */
	.markdown-content :is(.markdown-image, img) {
		max-width: 100%;
		border-radius: var(--radius-md);
		margin-block: var(--space-lg);
	}

	.markdown-content .markdown-image img {
		border-radius: inherit;
		margin-block: 0;
	}

	/* Tables */
	.markdown-content table {
		display: block;
		width: 100%;
		margin-block: var(--space-lg);
		border-collapse: collapse;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.markdown-content th,
	.markdown-content td {
		padding: var(--space-sm) var(--space-md);
		border: 1px solid var(--color-border);
		text-align: start;
	}

	.markdown-content th {
		background-color: var(--color-surface-elevated);
		font-weight: 600;
	}

	.markdown-content tr:nth-child(even) {
		background-color: oklch(from var(--color-surface) l c h / 0.5);
	}
}

@layer components {
	.membership-hint-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: var(--space-xl);
		gap: var(--space-lg);
		background:
			radial-gradient(
				circle at bottom left,
				oklch(from var(--color-primary) l c h / 0.12),
				transparent 60%
			),
			var(--color-surface-elevated);
	}

	.membership-hint-card-content {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.membership-hint-card-eyebrow {
		margin: 0;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-primary-300);
	}

	.membership-hint-card-headline {
		margin: 0;
		font-size: clamp(1.125rem, 1.8vw, 1.375rem);
		font-weight: 700;
		line-height: 1.3;
		color: var(--color-text);
	}

	.membership-hint-card-highlights {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-block-start: var(--space-xs);
	}

	.membership-hint-card-highlights li {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-size: 0.875rem;
		color: var(--color-text-muted);
	}

	.membership-hint-card-check {
		color: var(--color-primary-400);
		flex-shrink: 0;
	}

	.membership-hint-card-footer {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.membership-hint-card-price {
		margin: 0;
		font-size: 0.9375rem;
		color: var(--color-text-muted);
	}

	.membership-hint-card-price strong {
		color: var(--color-primary);
		font-weight: 700;
	}

	.membership-hint-card-cta {
		width: 100%;
		text-align: center;
	}
}

@layer components {
	:root {
		--pricing-card-standard-width: 390px;
	}

	.pricing-card {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: var(--space-xl);
		text-align: start;
		border-radius: var(--radius-lg);
		border: 1px solid var(--color-border-subtle);
		background-color: var(--color-surface-elevated);
	}

	.pricing-card--featured,
	.all-access-membership-pricing-panel:has([value='yearly']:checked) .pricing-card {
		background:
			radial-gradient(
				ellipse at bottom left,
				oklch(from var(--color-primary) l c h / 0.1),
				transparent 55%
			),
			radial-gradient(
				ellipse at top right,
				oklch(from var(--color-primary) l c h / 0.06),
				transparent 50%
			),
			var(--color-surface-elevated);
		border-color: oklch(from var(--color-primary) l c h / 0.2);
	}

	.pricing-card--featured:hover,
	.all-access-membership-pricing-panel:has([value='yearly']:checked) .pricing-card:hover {
		border-color: oklch(from var(--color-primary) l c h / 0.35);
	}

	.pricing-card-header {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-bottom: var(--space-lg);
	}

	.pricing-card-header--badge-only {
		gap: 0;
		margin-bottom: var(--space-md);
	}

	.pricing-card-badge-row {
		min-height: 1.5rem;
	}

	.pricing-card-label-badge {
		color: var(--color-text-muted);
	}

	.pricing-card-title {
		margin: 0;
		font-size: 1.375rem;
		color: var(--color-text);
	}

	.pricing-card-tagline {
		margin: 0;
		font-size: 0.9375rem;
		color: var(--color-text-muted);
		line-height: 1.5;
	}

	.pricing-card-pricing {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-bottom: var(--space-lg);
		padding-bottom: var(--space-lg);
		border-bottom: 1px solid var(--color-border-subtle);
	}

	.pricing-card-price {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0.35rem;
		margin: 0;
	}

	.pricing-card-price-value {
		font-family: var(--font-title);
		font-size: 2.75rem;
		font-weight: 700;
		color: var(--color-text);
	}

	.pricing-card--featured .pricing-card-price-value,
	.all-access-membership-pricing-panel:has([value='yearly']:checked) .pricing-card-price-value {
		color: var(--color-primary-100);
	}

	.pricing-card-price-period {
		font-size: 1.125rem;
		color: var(--color-text-muted);
	}

	.pricing-card-original-price {
		font-size: 1.125rem;
		color: var(--color-text-muted);
		text-decoration: line-through;
	}

	.pricing-card-value-note {
		margin: 0;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--color-secondary);
		letter-spacing: 0.01em;
	}

	.pricing-card-value-enter {
		animation: pricing-card-value-enter 340ms cubic-bezier(0.22, 1, 0.36, 1);
		animation-fill-mode: both;
		will-change: transform, opacity;
	}

	.pricing-card-value-enter--delayed {
		animation-delay: 40ms;
	}

	@keyframes pricing-card-value-enter {
		0% {
			opacity: 0;
			transform: translateY(0.35rem) scale(0.985);
		}

		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	.pricing-card-highlights {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		margin-bottom: var(--space-xl);
		flex-grow: 1;
	}

	.pricing-card-highlights li {
		display: flex;
		align-items: flex-start;
		gap: var(--space-sm);
		font-size: 0.9375rem;
		color: var(--color-text);
	}

	.pricing-card-highlight-icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: var(--color-secondary);
		margin-top: 2px;
	}

	.pricing-card-footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-sm);
		margin-top: auto;
	}

	.pricing-card-primary-action,
	.pricing-card-primary-action > * {
		width: 100%;
	}

	.pricing-card-primary-action > .btn {
		justify-content: center;
	}

	.pricing-card-footer-content {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		align-items: center;
		width: 100%;
	}

	.pricing-card-footer-content > * {
		margin: 0;
	}

	.pricing-card-footer-meta {
		font-size: 0.8125rem;
		color: var(--color-text-muted);
		text-align: center;
	}

	@media (prefers-reduced-motion: reduce) {
		.pricing-card-value-enter,
		.pricing-card-value-enter--delayed {
			animation: none;
		}
	}
}

@layer components {
	.status-page {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		min-height: min(46rem, calc(100dvh - 9rem));
		padding-block: clamp(3.5rem, 8vw, 6rem);
		overflow: clip;
	}

	.status-page::before,
	.status-page::after {
		content: '';
		position: absolute;
		inset: auto;
		pointer-events: none;
		filter: blur(10px);
		z-index: -1;
	}

	.status-page::before {
		top: clamp(-6rem, -2vw, -2rem);
		right: clamp(-5rem, 5vw, 2rem);
		width: clamp(14rem, 34vw, 24rem);
		aspect-ratio: 1;
		border-radius: var(--radius-full);
		background: radial-gradient(
			circle,
			oklch(from var(--status-accent) l c h / 0.34) 0%,
			transparent 72%
		);
	}

	.status-page::after {
		bottom: clamp(-8rem, -4vw, -3rem);
		left: clamp(-6rem, 4vw, 1rem);
		width: clamp(18rem, 38vw, 30rem);
		aspect-ratio: 1;
		border-radius: var(--radius-full);
		background: radial-gradient(
			circle,
			oklch(from var(--status-accent-soft) l c h / 0.2) 0%,
			transparent 74%
		);
	}

	.status-page--not-found {
		--status-accent: var(--color-secondary);
		--status-accent-soft: var(--color-primary);
	}

	.status-page--error {
		--status-accent: oklch(72% 0.18 18);
		--status-accent-soft: oklch(70% 0.16 48);
	}

	.status-page__shell {
		position: relative;
		display: grid;
		gap: var(--space-lg);
	}

	.status-page__card {
		position: relative;
		display: grid;
		gap: var(--space-lg);
		padding: clamp(1.5rem, 4vw, 3rem);
		border: 1px solid oklch(from var(--status-accent) l c h / 0.22);
		border-radius: clamp(1.5rem, 3vw, 2rem);
		background:
			linear-gradient(
				160deg,
				oklch(from var(--color-surface-elevated) l c h / 0.98),
				oklch(from var(--color-surface-elevated) l c h / 0.88)
			),
			linear-gradient(135deg, oklch(from var(--status-accent) l c h / 0.08), transparent 45%);
		box-shadow:
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.06),
			0 24px 70px oklch(from var(--color-text) l c h / 0.16);
		overflow: hidden;
	}

	.status-page__card::before {
		content: '';
		position: absolute;
		top: -3rem;
		right: -2rem;
		width: clamp(8rem, 24vw, 14rem);
		aspect-ratio: 1;
		border-radius: var(--radius-full);
		background: radial-gradient(
			circle,
			oklch(from var(--status-accent) l c h / 0.22) 0%,
			transparent 72%
		);
		pointer-events: none;
	}

	.status-page__topline {
		display: flex;
		align-items: center;
		gap: var(--space-md);
		flex-wrap: wrap;
	}

	.status-page__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: clamp(3.5rem, 8vw, 4.5rem);
		aspect-ratio: 1;
		border-radius: 1.25rem;
		border: 1px solid oklch(from var(--status-accent) l c h / 0.24);
		background:
			linear-gradient(
				180deg,
				oklch(from var(--status-accent) l c h / 0.24),
				oklch(from var(--status-accent) l c h / 0.08)
			),
			oklch(from var(--color-surface) l c h / 0.55);
		color: var(--color-text);
		box-shadow:
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.08),
			0 12px 30px oklch(from var(--status-accent) l c h / 0.16);
	}

	.status-page__icon :where(svg) {
		width: 1.75rem;
		height: 1.75rem;
	}

	.status-page__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		min-height: 2rem;
		padding-inline: 0.875rem;
		border: 1px solid oklch(from var(--status-accent) l c h / 0.22);
		border-radius: var(--radius-full);
		background: oklch(from var(--status-accent) l c h / 0.11);
		color: var(--color-text);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.status-page__title-group {
		display: grid;
		gap: var(--space-md);
		max-width: 48rem;
	}

	.status-page__title {
		font-size: clamp(2.4rem, 7vw, 4.8rem);
		line-height: 0.98;
		letter-spacing: -0.04em;
		color: var(--color-text);
		max-width: 11ch;
	}

	.status-page__message {
		max-width: 42rem;
		font-size: clamp(1rem, 1.7vw, 1.15rem);
		line-height: 1.65;
		color: var(--color-text-muted);
	}

	.status-page__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.875rem;
	}

	.status-page__supporting {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-md);
	}

	.status-page__support-card {
		position: relative;
		display: grid;
		gap: 0.35rem;
		min-height: 100%;
		padding: 1rem 1.125rem;
		border: 1px solid oklch(from var(--color-neutral-100) l c h / 0.08);
		border-radius: var(--radius-xl);
		background: oklch(from var(--color-surface) l c h / 0.42);
	}

	.status-page__support-label {
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: oklch(from var(--status-accent) 84% c h);
	}

	.status-page__support-value {
		color: var(--color-text-muted);
		font-size: 0.95rem;
		line-height: 1.55;
	}

	.status-page__details {
		color: var(--color-text-muted);
		font-size: 0.875rem;
	}

	.status-page__details summary {
		cursor: pointer;
		color: var(--color-text);
		font-weight: 700;
	}

	.status-page__details pre {
		margin-top: var(--space-sm);
		padding: var(--space-md);
		overflow: auto;
		border-radius: var(--radius-lg);
		background: oklch(from var(--color-surface) l c h / 0.7);
		border: 1px solid oklch(from var(--color-neutral-100) l c h / 0.08);
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
		font-size: 0.8125rem;
		white-space: pre-wrap;
		word-break: break-word;
	}

	@media (max-width: 800px) {
		.status-page__supporting {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 640px) {
		.status-page {
			min-height: auto;
			padding-block: 2.5rem 4rem;
		}

		.status-page__card {
			gap: 1.25rem;
			padding: 1.25rem;
			border-radius: 1.5rem;
		}

		.status-page__actions {
			display: grid;
			grid-template-columns: 1fr;
		}

		.status-page__actions > :where(a, button) {
			width: 100%;
		}
	}
}

@layer components {
	promo-video {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
	}

	.promo-video-play {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.promo-video-play .image,
	.promo-video-play img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.promo-video-play-icon {
		position: absolute;
		inset: 50% auto auto 50%;
		display: grid;
		place-items: center;
		width: 4.5rem;
		height: 4.5rem;
		border-radius: var(--radius-full);
		color: var(--color-neutral-100);
		background: oklch(from var(--color-primary) l c h / 0.85);
		box-shadow: 0 12px 32px oklch(0% 0 0 / 0.45);
		transform: translate(-50%, -50%);
		transition:
			transform var(--transition-base),
			background-color var(--transition-base);
	}

	.promo-video-play:hover .promo-video-play-icon {
		background: var(--color-primary);
		transform: translate(-50%, -50%) scale(1.06);
	}

	.promo-video-play:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: -4px;
	}

	.promo-video-element {
		display: block;
		width: 100%;
		height: 100%;
		background: #000;
	}
}

@layer routes {
	/* ============================================
     Single Article Page
     ============================================ */

	.article-page {
		--article-shell-width: 900px;
	}

	/* ============================================
     Article Header
     ============================================ */

	.article-header {
		padding-block-start: clamp(2.25rem, 4.5vw, 3.25rem);
		padding-block-end: clamp(1.75rem, 3.5vw, 2.25rem);
		text-align: center;
	}

	.article-header h1 {
		font-size: clamp(1.75rem, 4vw, 2.5rem);
		max-width: var(--article-shell-width);
		margin-inline: auto;
		margin-bottom: var(--space-md);
		background: linear-gradient(
			135deg,
			var(--color-text) 0%,
			var(--color-primary) 50%,
			var(--color-secondary) 100%
		);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.article-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-sm);
		font-size: 0.9375rem;
		color: var(--color-text-muted);
	}

	.article-author {
		color: var(--color-primary);
		font-weight: 600;
	}

	.article-meta-separator {
		color: var(--color-border);
	}

	/* ============================================
     Article Hero Image
     ============================================ */

	.article-hero {
		padding-bottom: clamp(1.75rem, 3.5vw, 2.25rem);
	}

	.article-thumbnail {
		width: 100%;
		max-width: var(--article-shell-width);
		margin-inline: auto;
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-lg);
		box-shadow: 0 8px 32px oklch(0% 0 0 / 0.4);
	}

	.article-thumbnail img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ============================================
     Article Video
     ============================================ */

	.article-video {
		padding-block: clamp(1.75rem, 3.5vw, 2.25rem);
	}

	.article-video-wrapper {
		position: relative;
		width: 100%;
		max-width: var(--article-shell-width);
		margin-inline: auto;
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: 0 8px 32px oklch(0% 0 0 / 0.4);
	}

	.article-video-wrapper iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: none;
	}

	.article-video-consent {
		display: grid;
		place-items: center;
		padding: clamp(1.5rem, 5vw, 3rem);
		background:
			linear-gradient(135deg, oklch(0% 0 0 / 0.42), oklch(0% 0 0 / 0.68)),
			radial-gradient(
				circle at top left,
				oklch(from var(--color-primary) l c h / 0.18),
				transparent 42%
			),
			var(--color-surface-elevated);
		border: 1px solid var(--color-border);
		color: var(--color-text);
		text-align: center;
	}

	.article-video-consent-content {
		max-width: 34rem;
	}

	.article-video-consent-kicker {
		margin-bottom: var(--space-sm);
		color: var(--color-primary);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.article-video-consent h2 {
		margin-bottom: var(--space-sm);
		font-size: clamp(1.25rem, 3vw, 1.75rem);
	}

	.article-video-consent p:not(.article-video-consent-kicker) {
		color: var(--color-text-muted);
	}

	.article-video-consent-actions,
	.article-video-preference-actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-sm);
		margin-top: var(--space-lg);
	}

	.article-video-preference-actions {
		margin-inline: auto;
		max-width: var(--article-shell-width);
	}

	/* ============================================
     Article Content
     ============================================ */

	.article-content {
		padding-block-start: clamp(1.75rem, 3.5vw, 2.25rem);
		padding-block-end: clamp(2.25rem, 4.5vw, 3.25rem);
	}

	.article-container {
		max-width: min(var(--container-max-width), 100%);
	}

	.article-content .markdown-content {
		width: min(100%, var(--article-shell-width));
		margin-inline: auto;
	}
}

@layer routes {
	.community-hero-shell {
		display: grid;
		justify-items: center;
		gap: var(--space-md);
	}

	.community-hero-description {
		max-width: 700px;
	}

	.community-cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-xl);
	}

	.community-card {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-lg);
		padding: var(--space-xl);
	}

	.community-card-header {
		display: flex;
		align-items: flex-start;
		gap: var(--space-md);
	}

	.community-card-icon {
		width: 2.75rem;
		height: 2.75rem;
		border-radius: var(--radius-md);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--color-primary-200);
		background: oklch(from var(--color-primary) l c h / 0.18);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.3);
		flex-shrink: 0;
	}

	.community-card h2 {
		margin-bottom: var(--space-xs);
		font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	}

	.community-card-description {
		color: var(--color-text-muted);
	}

	.community-points {
		display: grid;
		gap: var(--space-sm);
	}

	.community-points li {
		display: flex;
		align-items: flex-start;
		gap: var(--space-sm);
		color: var(--color-neutral-200);
	}

	.community-points li svg {
		color: var(--color-secondary-300);
		flex-shrink: 0;
		margin-top: 0.125rem;
	}

	.community-form {
		width: 100%;
		max-width: none;
		margin-top: 0;
	}

	.community-card-footer {
		display: grid;
		gap: var(--space-sm);
		margin-top: auto;
	}

	.community-card-cta {
		align-self: flex-start;
	}

	.community-privacy-link {
		color: var(--color-secondary);
	}

	.community-privacy-link:is(:hover, :focus-visible) {
		color: var(--color-secondary-300);
	}

	.community-social-section {
		position: relative;
	}

	.community-social-shell {
		display: grid;
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		align-items: start;
		gap: var(--space-xl);
		padding: clamp(1.5rem, 3vw, 2.5rem);
		border: 1px solid var(--color-border-subtle);
		border-radius: calc(var(--radius-xl) + 0.1rem);
		background:
			linear-gradient(
				180deg,
				oklch(from var(--color-surface-elevated) l c h / 0.96) 0%,
				oklch(from var(--color-surface-hover) l c h / 0.92) 100%
			),
			linear-gradient(
				135deg,
				oklch(from var(--color-primary) l c h / 0.06) 0%,
				oklch(from var(--color-primary) l c h / 0) 40%,
				oklch(from var(--color-secondary) l c h / 0.05) 100%
			);
		box-shadow:
			0 16px 34px oklch(from var(--color-primary) 18% 0.03 h / 0.16),
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.04);
	}

	.community-social-intro {
		display: grid;
		gap: var(--space-sm);
		align-content: start;
	}

	.community-social-intro h2 {
		margin: 0;
		font-size: clamp(1.5rem, 3vw, 2.2rem);
	}

	.community-social-description {
		margin: 0;
		max-width: 34rem;
		color: var(--color-text-muted);
	}

	.community-social-nav {
		min-width: 0;
	}

	.community-social-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-md);
	}

	.community-social-card {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-md);
		min-height: 100%;
		padding: var(--space-lg);
		color: var(--color-text);
		text-decoration: none;
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-lg);
		background: oklch(from var(--color-surface) l c h / 0.54);
		transition:
			transform var(--transition-fast),
			border-color var(--transition-fast),
			box-shadow var(--transition-fast),
			background-color var(--transition-fast);
	}

	.community-social-card:is(:hover, :focus-visible) {
		transform: translateY(-2px);
		border-color: var(--color-primary);
		background-color: oklch(from var(--color-surface-elevated) l c h / 0.88);
		box-shadow: 0 12px 26px oklch(from var(--color-primary) 18% 0.04 h / 0.16);
	}

	.community-social-card:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		text-decoration: none;
	}

	.community-social-card-icon {
		width: 3rem;
		height: 3rem;
		border-radius: var(--radius-md);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--color-primary-200);
		background: oklch(from var(--color-primary) l c h / 0.14);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.24);
		flex-shrink: 0;
	}

	.community-social-card-copy {
		display: flex;
		align-items: center;
		min-width: 0;
	}

	.community-social-card-title {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.2;
	}

	.community-social-card-arrow {
		display: inline-flex;
		color: var(--color-text-muted);
	}

	.community-social-card:is(:hover, :focus-visible) .community-social-card-arrow {
		color: var(--color-primary-300);
	}

	@media (max-width: 1024px) {
		.community-cards,
		.community-social-grid {
			grid-template-columns: 1fr;
		}

		.community-card {
			padding: var(--space-lg);
		}

		.community-social-shell {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 640px) {
		.community-card-header {
			flex-direction: column;
		}

		.community-social-shell {
			padding: var(--space-lg);
		}

		.community-social-card {
			grid-template-columns: auto minmax(0, 1fr);
		}

		.community-social-card-arrow {
			display: none;
		}
	}
}

@layer routes {
	/* ============================================
     Course Landing Page
     ============================================ */

	.course-page-with-section-navigation {
		--course-section-navigation-sticky-top: var(--space-md);
		--course-section-navigation-scroll-offset: calc(
			var(--course-section-navigation-sticky-top) + var(--space-xl)
		);
	}

	.course-page-shell {
		display: grid;
		grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
		column-gap: var(--space-2xl);
		align-items: start;
	}

	.course-page-main-content {
		min-width: 0;
	}

	.course-page-with-section-navigation .course-page-main-content .container {
		max-width: none;
		padding-inline: 0;
	}

	.course-page-with-section-navigation
		.course-page-main-content
		.course-pitch-section-premium.page-section {
		padding-top: 0;
	}

	.course-page-with-section-navigation .course-section-anchor {
		scroll-margin-top: var(--course-section-navigation-scroll-offset);
	}

	.course-section-navigation {
		position: sticky;
		top: var(--course-section-navigation-sticky-top);
		align-self: start;
	}

	.course-section-navigation-desktop {
		padding: var(--space-sm);
		border-radius: var(--radius-lg);
		border-color: oklch(from var(--color-primary) l c h / 0.2);
		background: linear-gradient(
			165deg,
			oklch(from var(--color-surface-elevated) l c h / 0.98),
			oklch(from var(--color-surface-hover) l c h / 0.95)
		);
		box-shadow:
			0 1px 0 oklch(from var(--color-primary) l c h / 0.15),
			0 8px 18px oklch(0% 0 0 / 0.12);
	}

	.course-section-navigation-list {
		display: grid;
		gap: 0;
		scroll-target-group: auto;
	}

	.course-section-navigation-list > li + li {
		border-top: 1px solid oklch(from var(--color-border-subtle) l c h / 0.75);
	}

	.course-section-navigation-link {
		display: block;
		font-weight: 600;
		font-size: 0.9375rem;
		line-height: 1.35;
		color: var(--color-text-muted);
		padding: 0.68rem 0.75rem;
		border-radius: var(--radius-md);
		border: 1px solid transparent;
		transition:
			color var(--transition-fast),
			border-color var(--transition-fast),
			background-color var(--transition-fast);
	}

	.course-section-navigation-link:hover {
		color: var(--color-text);
		background-color: var(--color-surface);
	}

	.course-section-navigation-link:target-current {
		color: var(--color-primary);
		border-color: oklch(from var(--color-primary) l c h / 0.35);
		background-color: oklch(from var(--color-primary) l c h / 0.14);
	}

	.course-section-navigation-link:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	/* Section heading alignment: all left except pricing CTA */
	:where(
			.course-description-section,
			.course-features,
			.course-pitch-section,
			.course-learnings,
			.course-prerequisites,
			.course-audience,
			.course-curriculum
		)
		.section-heading {
		text-align: start;
	}

	:where(
			.course-description-section,
			.course-features,
			.course-pitch-section,
			.course-learnings,
			.course-prerequisites,
			.course-audience,
			.course-curriculum
		)
		.section-heading
		p {
		margin-inline: 0;
	}

	/* ============================================
     Hero Section
     ============================================ */

	.course-hero .container {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
		align-items: center;
	}

	@media (min-width: 1024px) {
		.course-hero .container {
			grid-template-columns: 1fr 1fr;
		}
	}

	.course-hero-content h1 {
		font-size: clamp(2.25rem, 5vw, 3.25rem);
		line-height: 1.15;
		margin-bottom: var(--space-md);
	}

	.course-hero-subtitle {
		font-size: clamp(1rem, 1.5vw + 0.5rem, 1.1875rem);
		color: var(--color-text-muted);
		margin-bottom: var(--space-lg);
		line-height: 1.6;
	}

	.course-hero-stats {
		margin: 0 0 var(--space-xl);
		gap: 0.75rem;
	}

	.course-hero-stats > li {
		display: flex;
	}

	.course-stat-badge {
		min-height: 2.5rem;
		padding: 0.42rem 1rem 0.42rem 0.5rem;
		gap: 0.55rem;
		line-height: 1.2;
		border-radius: var(--radius-full);
		border: 1px solid oklch(from var(--color-neutral-200) l c h / 0.28);
		background-color: oklch(from var(--color-surface-elevated) l c h / 0.74);
		color: var(--color-neutral-100);
		font-size: 0.9rem;
		font-weight: 650;
		letter-spacing: 0;
		box-shadow: 0 2px 10px oklch(0% 0 0 / 0.16);
		backdrop-filter: blur(10px);
		transition:
			border-color var(--transition-fast),
			background-color var(--transition-fast),
			box-shadow var(--transition-fast),
			transform var(--transition-fast);
	}

	.course-stat-badge svg {
		width: 1.75rem;
		height: 1.75rem;
		padding: 0.34rem;
		border-radius: var(--radius-full);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.32);
		background-color: oklch(from var(--color-primary) l c h / 0.18);
		color: var(--color-primary-200);
		flex-shrink: 0;
	}

	@media (hover: hover) and (pointer: fine) {
		.course-stat-badge:hover {
			transform: translateY(-1px);
			border-color: oklch(from var(--color-primary) l c h / 0.42);
			background-color: oklch(from var(--color-surface-elevated) l c h / 0.88);
			box-shadow: 0 8px 20px oklch(from var(--color-primary) 24% 0.06 h / 0.24);
		}
	}

	@media (max-width: 640px) {
		.course-stat-badge {
			min-height: 2.3rem;
			padding: 0.36rem 0.9rem 0.36rem 0.45rem;
			font-size: 0.85rem;
			gap: 0.45rem;
		}

		.course-stat-badge svg {
			width: 1.55rem;
			height: 1.55rem;
			padding: 0.3rem;
		}
	}

	.course-hero-actions {
		display: flex;
		gap: var(--space-md);
		flex-wrap: wrap;
	}

	@media (max-width: 640px) {
		.course-hero-actions {
			gap: var(--space-sm);
			flex-wrap: nowrap;
		}

		.course-hero-actions > .btn {
			flex: 1 1 0;
			min-width: 0;
			padding-block: 0.6875rem;
			padding-inline: 0.75rem;
			font-size: 0.875rem;
			white-space: nowrap;
		}
	}

	.course-hero-actions .btn-filled {
		box-shadow: 0 4px 20px oklch(from var(--color-primary) l c h / 0.4);
		transition: box-shadow var(--transition-fast);
	}

	.course-hero-actions .btn-filled:hover {
		box-shadow: 0 6px 28px oklch(from var(--color-primary) l c h / 0.5);
	}

	.course-hero-image {
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: 0 8px 32px oklch(0% 0 0 / 0.4);
	}

	.course-hero-image img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* ============================================
     Description Section
     ============================================ */

	.course-description-section h2 {
		font-size: 1.5rem;
		margin-bottom: 0;
	}

	:where(.course-description-content, .course-pitch-content) {
		max-width: 800px;
		color: var(--color-text-muted);
		font-size: 1.0625rem;
		line-height: 1.7;
	}

	:where(.course-description-content, .course-pitch-content) :where(p + p) {
		margin-top: var(--space-md);
	}

	:where(.course-description-content, .course-pitch-content) :where(ul, ol) {
		margin-top: var(--space-md);
		padding-inline-start: 1.25rem;
	}

	:where(.course-description-content, .course-pitch-content) :where(li + li) {
		margin-top: var(--space-xs);
	}

	.course-description-content a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 2px;
	}

	/* ============================================
     Structured Landing Sections
     ============================================ */

	.course-pitch-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-lg);
	}

	.course-pitch-intro {
		display: grid;
		gap: var(--space-xs);
	}

	.course-pitch-intro-label {
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-primary-200);
	}

	.course-pitch-intro h2 {
		font-size: clamp(1.55rem, 2.6vw, 2rem);
		margin: 0;
	}

	.course-pitch-section-premium .course-pitch-content {
		position: relative;
		max-width: none;
		font-size: 1rem;
		line-height: 1.75;
		padding-inline-start: var(--space-xl);
	}

	.course-pitch-section-premium .course-pitch-content::before {
		content: '';
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: 3px;
		border-radius: var(--radius-full);
		background: linear-gradient(
			180deg,
			var(--color-primary),
			oklch(from var(--color-secondary) l c h / 0.5)
		);
	}

	.course-pitch-section-premium .course-pitch-content .markdown-content {
		color: var(--color-text-muted);
	}

	.course-pitch-section-premium .course-pitch-content .markdown-content > p:first-child {
		color: var(--color-text);
		font-size: clamp(1.1rem, 1.3vw, 1.3rem);
		font-weight: 600;
		line-height: 1.6;
		margin-bottom: var(--space-lg);
	}

	.course-pitch-section-premium .course-pitch-content .markdown-content a {
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}

	/* ============================================
     Learnings – Numbered Feature Grid (checklist variant)
     ============================================ */

	.course-learnings-numbered {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-lg);
	}

	.course-learning-numbered-item {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: flex-start;
		gap: var(--space-lg);
		min-width: 0;
		padding: clamp(var(--space-lg), 2.5vw, var(--space-xl));
		border-radius: var(--radius-lg);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.18);
		background:
			radial-gradient(
				140% 130% at 0% 0%,
				oklch(from var(--color-primary) l c h / 0.1) 0%,
				oklch(from var(--color-primary) l c h / 0) 55%
			),
			linear-gradient(
				168deg,
				oklch(from var(--color-surface-elevated) l c h / 0.98),
				oklch(from var(--color-surface-hover) l c h / 0.95)
			);
		transition:
			border-color var(--transition-fast),
			box-shadow var(--transition-fast);
	}

	@media (hover: hover) {
		.course-learning-numbered-item:hover {
			border-color: oklch(from var(--color-primary) l c h / 0.3);
			box-shadow: 0 8px 24px oklch(from var(--color-primary) 20% 0.06 h / 0.2);
		}
	}

	.course-learning-number {
		font-family: var(--font-title);
		font-size: clamp(1.75rem, 2.5vw, 2.25rem);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.02em;
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		user-select: none;
		flex-shrink: 0;
		padding-top: 0.1em;
	}

	.course-learning-numbered-content {
		min-width: 0;
	}

	.course-learning-numbered-content h3 {
		margin: 0 0 var(--space-xs);
		font-size: 1.0625rem;
		line-height: 1.4;
		overflow-wrap: anywhere;
	}

	.course-learning-numbered-text {
		min-width: 0;
		color: var(--color-text-muted);
		font-size: 0.9375rem;
		line-height: 1.62;
		overflow-wrap: anywhere;
	}

	.course-learning-numbered-text .markdown-content {
		font-size: inherit;
		line-height: inherit;
		color: inherit;
	}

	.course-learning-numbered-text .markdown-content :where(p) {
		margin-bottom: 0;
	}

	.course-learning-numbered-text .markdown-content :where(p + p) {
		margin-top: var(--space-xs);
	}

	.course-learning-numbered-text .markdown-content :where(ul, ol) {
		margin-top: var(--space-xs);
		margin-bottom: 0;
		padding-inline-start: 1.15rem;
	}

	.course-learning-numbered-text .markdown-content :where(li + li) {
		margin-top: 0.35rem;
	}

	@media (max-width: 768px) {
		.course-learnings-numbered {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 640px) {
		.course-learning-numbered-item {
			gap: var(--space-md);
			padding: var(--space-md);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.course-learning-numbered-item {
			transition: none;
		}
	}

	/* ============================================
     Prerequisites – Accent Panel
     ============================================ */

	.course-prerequisites-panel {
		position: relative;
		padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
		padding-inline-start: clamp(
			calc(var(--space-lg) + var(--space-sm)),
			3.5vw,
			calc(var(--space-2xl) + var(--space-sm))
		);
		border-radius: var(--radius-lg);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.18);
		background:
			radial-gradient(
				120% 140% at 0% 0%,
				oklch(from var(--color-primary) l c h / 0.12) 0%,
				oklch(from var(--color-primary) l c h / 0) 55%
			),
			linear-gradient(
				165deg,
				oklch(from var(--color-surface-hover) l c h / 0.92),
				oklch(from var(--color-surface-elevated) l c h / 0.98)
			);
		box-shadow:
			0 1px 0 oklch(from var(--color-primary) l c h / 0.15),
			0 10px 24px oklch(0% 0 0 / 0.18);
	}

	.course-prerequisites-panel::before {
		content: '';
		position: absolute;
		inset-block: var(--space-lg);
		inset-inline-start: 0;
		width: 3px;
		border-radius: var(--radius-full);
		background: linear-gradient(
			180deg,
			var(--color-primary),
			oklch(from var(--color-secondary) l c h / 0.5)
		);
	}

	.course-prerequisites-list {
		display: grid;
		gap: 0;
	}

	.course-prerequisite-item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: flex-start;
		gap: var(--space-md);
		padding-block: var(--space-md);
		min-width: 0;
	}

	.course-prerequisite-item:first-child {
		padding-top: 0;
	}

	.course-prerequisite-item:last-child {
		padding-bottom: 0;
	}

	.course-prerequisite-item + .course-prerequisite-item {
		border-top: 1px solid oklch(from var(--color-border-subtle) l c h / 0.6);
	}

	.course-prerequisite-check {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.35rem;
		height: 1.35rem;
		margin-top: 0.15rem;
		border-radius: var(--radius-full);
		background: var(--color-primary);
		color: oklch(100% 0 0);
		flex-shrink: 0;
		box-shadow: 0 2px 8px oklch(from var(--color-primary) l c h / 0.35);
	}

	.course-prerequisite-content {
		min-width: 0;
	}

	.course-prerequisite-content .markdown-content {
		color: var(--color-text-muted);
		font-size: 0.9375rem;
		line-height: 1.62;
	}

	.course-prerequisite-content .markdown-content :where(p) {
		margin-bottom: 0;
	}

	.course-prerequisite-content .markdown-content :where(p + p) {
		margin-top: var(--space-sm);
	}

	.course-prerequisite-content .markdown-content :where(ul, ol) {
		margin-top: var(--space-sm);
		margin-bottom: 0;
		padding-inline-start: 1.15rem;
	}

	.course-prerequisite-content .markdown-content :where(li + li) {
		margin-top: 0.35rem;
	}

	@media (max-width: 640px) {
		.course-prerequisite-item {
			gap: var(--space-sm);
		}

		.course-prerequisites-panel {
			padding: var(--space-lg);
			padding-inline-start: calc(var(--space-lg) + var(--space-xs));
		}

		.course-prerequisites-panel::before {
			inset-block: var(--space-md);
			inset-inline-start: 0;
		}
	}

	/* ============================================
     Audience – Enhanced IconFeatureCard Overrides
     ============================================ */

	.course-audience-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--space-lg);
	}

	.course-audience-grid > li {
		min-width: 0;
	}

	.course-audience-feature-card {
		width: 100%;
		min-height: 12rem;
		border-color: oklch(from var(--color-primary) l c h / 0.18);
		background:
			radial-gradient(
				130% 120% at 100% 100%,
				oklch(from var(--color-primary) l c h / 0.08) 0%,
				oklch(from var(--color-primary) l c h / 0) 50%
			),
			var(--color-surface-elevated);
	}

	.course-audience-feature-card h3 {
		background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.course-audience-feature-card-text {
		color: var(--color-text-muted);
		font-size: 0.9375rem;
		line-height: 1.62;
		overflow-wrap: anywhere;
	}

	.course-audience-feature-card-text .markdown-content {
		font-size: inherit;
		line-height: inherit;
		color: inherit;
	}

	.course-audience-feature-card-icon {
		inset-inline-end: 0.25rem;
		inset-block-end: 0rem;
		width: clamp(3.2rem, 5.5vw, 4rem);
		height: clamp(3.2rem, 5.5vw, 4rem);
		font-size: clamp(1.35rem, 2.2vw, 1.6rem);
		border: 1.5px solid oklch(from var(--color-primary) l c h / 0.35);
		background: linear-gradient(
			165deg,
			oklch(from var(--color-primary) l c h / 0.22),
			oklch(from var(--color-secondary) l c h / 0.12)
		);
		color: var(--color-primary-100);
		box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 0.2);
	}

	@media (hover: hover) {
		.course-audience-feature-card:hover {
			border-color: oklch(from var(--color-primary) l c h / 0.3);
			box-shadow: 0 8px 28px oklch(from var(--color-primary) 20% 0.06 h / 0.25);
		}
	}

	/* ============================================
     Features Section
     ============================================ */

	.course-features .section-heading h2 {
		font-size: 1.5rem;
	}

	.course-features-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--space-lg);
	}

	.course-feature {
		padding: var(--space-xl);
		text-align: start;
		display: grid;
		align-content: start;
		gap: var(--space-sm);
		width: 100%;
	}

	.course-feature-icon {
		width: 56px;
		height: 56px;
		margin: 0 0 var(--space-sm);
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(
			135deg,
			oklch(from var(--color-primary) l c h / 0.2),
			oklch(from var(--color-secondary) l c h / 0.2)
		);
		border-radius: var(--radius-md);
		color: var(--color-primary);
	}

	.course-feature h3 {
		font-size: 1.125rem;
	}

	.course-feature p {
		color: var(--color-text-muted);
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	.course-feature-count {
		width: fit-content;
		color: var(--color-primary-200);
	}

	:where(.course-features-empty, .course-curriculum-empty) {
		padding: var(--space-lg);
		text-align: center;
		color: var(--color-text-muted);
	}

	/* ============================================
     Curriculum Section
     ============================================ */

	.course-curriculum .section-heading h2 {
		font-size: 1.5rem;
	}

	.course-curriculum-header-title-row {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--space-md);
		flex-wrap: wrap;
		margin-block-end: var(--space-sm);
	}

	.course-curriculum-header-title-row h2 {
		margin-block-end: 0;
	}

	.course-curriculum .section-heading p {
		margin-block-start: 0;
	}

	.course-curriculum-start-now {
		flex-shrink: 0;
		padding-block: 0.4rem;
		padding-inline: 0.9rem;
		font-size: 1rem;
		line-height: 1.2;
	}

	.course-curriculum-more {
		color: var(--color-text-muted);
		text-align: center;
		font-size: 0.9375rem;
	}

	/* ============================================
     CTA / Pricing Section
     ============================================ */

	.course-cta {
		text-align: center;
	}

	.course-cta .section-heading h2 {
		font-size: 1.75rem;
	}

	.course-cta .section-heading p {
		color: var(--color-text-muted);
	}

	/* Pricing Grid: two cards side by side with consistent CTA alignment */
	.course-pricing-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, var(--pricing-card-standard-width)));
		gap: var(--space-xl);
		max-width: calc(
			var(--pricing-card-standard-width) + var(--pricing-card-standard-width) + var(--space-xl)
		);
		margin-inline: auto;
		align-items: stretch;
		justify-content: center;
	}

	@media (max-width: 1200px) {
		.course-pricing-grid {
			grid-template-columns: minmax(0, var(--pricing-card-standard-width));
			max-width: min(100%, var(--pricing-card-standard-width));
		}
	}

	.course-pricing-grid > * {
		min-width: 0;
		height: 100%;
	}

	.course-pricing-card--membership {
		border-color: oklch(from var(--color-primary) l c h / 0.35);
	}

	.course-pricing-footer-note {
		text-align: center;
		font-size: 0.8125rem;
		color: var(--color-text-muted);
		margin-top: var(--space-lg);
	}

	@media (max-width: 1024px) {
		.course-page-with-section-navigation {
			--course-section-navigation-scroll-offset: var(--space-sm);
		}

		.course-page-shell {
			grid-template-columns: 1fr;
			row-gap: var(--space-lg);
		}

		.course-section-navigation {
			display: none;
		}
	}

	/* ============================================
     Mid-Page CTA Strip
     ============================================ */

	.course-midpage-cta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-sm);
		padding-block: var(--space-lg);
		text-align: center;
	}

	.course-midpage-cta p {
		font-size: 1.0625rem;
		color: var(--color-text-muted);
		margin: 0;
	}

	.course-midpage-cta .btn {
		color: var(--color-primary);
		font-weight: 600;
		gap: var(--space-xs);
	}

	/* ============================================
     Scroll Reveal Animations
     ============================================ */

	@keyframes scroll-reveal-enter {
		from {
			opacity: 0;
			transform: translateY(1.5rem);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.course-page .page-section:not(.course-hero),
			.course-page .course-midpage-cta {
				animation: scroll-reveal-enter linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 30%;
			}
		}
	}
}

@layer routes {
	.courses-page {
		--courses-hero-space-start: clamp(3.75rem, 6.5vw, 5.75rem);
		--courses-hero-space-end: clamp(2.5rem, 4.75vw, 3.75rem);
	}

	.courses-page > .courses-overview-hero {
		--page-section-space-start: var(--courses-hero-space-start);
		--page-section-space-end: var(--courses-hero-space-end);
	}

	.courses-overview {
		position: relative;
		display: grid;
		width: 100%;
		justify-items: center;
		gap: clamp(1.5rem, 4vw, 2.5rem);
	}

	.courses-overview-heading {
		position: relative;
		z-index: 1;
		margin-bottom: 0;
	}

	.courses-overview-heading p {
		margin-inline: auto;
	}

	.courses-overview-heading .catalog-section-title {
		display: inline-block;
		font-size: clamp(2rem, 5vw, 3.2rem);
		line-height: 1.12;
		letter-spacing: -0.01em;
		padding-block-end: 0.08em;
		background: linear-gradient(
			135deg,
			var(--color-text) 0%,
			var(--color-primary) 52%,
			var(--color-secondary) 100%
		);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.courses-overview-description {
		margin-top: var(--space-sm);
		max-width: 58ch;
		color: var(--color-text-muted);
		font-size: clamp(1rem, 0.94rem + 0.3vw, 1.08rem);
		line-height: 1.6;
	}

	.courses-overview-stats {
		position: relative;
		z-index: 1;
		width: min(100%, 54rem);
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(0.9rem, 2vw, 1.75rem);
	}

	.courses-overview-stat {
		display: grid;
		justify-items: center;
		gap: 0.65rem;
		padding-inline: clamp(0.8rem, 2vw, 1.5rem);
		text-align: center;
		border-inline-end: 1px solid oklch(from var(--color-border) l c h / 0.7);
	}

	.courses-overview-stat:last-child {
		border-inline-end: 0;
	}

	.courses-overview-stat-value {
		color: var(--color-primary-200);
		font-family: var(--font-title);
		font-size: clamp(2rem, 4vw, 3rem);
		line-height: 0.95;
		font-weight: 700;
	}

	.courses-overview-stat-meta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		min-height: 1.5rem;
	}

	.courses-overview-stat-icon {
		display: inline-flex;
		color: var(--color-primary);
	}

	.courses-overview-stat-label {
		color: var(--color-text-muted);
		font-size: 0.78rem;
		font-weight: 700;
		line-height: 1.25;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	@media (min-width: 1024px) {
		.courses-overview {
			gap: clamp(1.75rem, 4vw, 2.75rem);
		}
	}

	@media (max-width: 1024px) {
		.courses-overview-stats {
			width: min(100%, 48rem);
		}
	}

	@media (max-width: 768px) {
		.courses-overview-heading .catalog-section-title {
			font-size: clamp(1.9rem, 10vw, 2.44rem);
		}

		.courses-overview-description {
			font-size: 0.96rem;
			max-width: 42ch;
		}

		.courses-overview-stats {
			grid-template-columns: 1fr;
			width: min(100%, 25rem);
			gap: 0.9rem;
		}

		.courses-overview-stat {
			gap: 0.5rem;
			padding-inline: 0;
			padding-bottom: 0.9rem;
			border-inline-end: 0;
			border-bottom: 1px solid oklch(from var(--color-border) l c h / 0.7);
		}

		.courses-overview-stat:last-child {
			padding-bottom: 0;
			border-bottom: 0;
		}

		.courses-overview-stat-value {
			font-size: clamp(1.8rem, 8vw, 2.35rem);
		}

		.courses-overview-stat-meta {
			min-height: 0;
			flex-wrap: wrap;
			row-gap: 0.35rem;
		}
	}
}

@layer routes {
	.page-stack {
		--home-section-rhythm: calc(var(--space-2xl) + var(--space-3xl));
		--home-section-header-width: min(100%, 52rem);
		--home-section-subheader-width: min(100%, 44rem);
	}

	/* ============================================
     Slide sections — Apple-style full viewport
     ============================================ */

	/* Decorations (glows, orbits, floating art) must not widen the page. */
	.home-section {
		overflow: hidden;
		padding-block: var(--home-section-rhythm);
	}

	.slide {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slide-full {
		min-height: 85dvh;
	}

	.slide-compact {
		min-height: 60dvh;
	}

	.slide-centered {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-2xl);
		width: 100%;
	}

	.slide-centered > header {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		align-items: center;
		width: 100%;
		max-width: var(--home-section-header-width);
		margin-inline: auto;
	}

	.slide-headline {
		font-size: clamp(2.5rem, 6vw, 4.5rem);
		line-height: 1.05;
		letter-spacing: -0.03em;
		color: var(--color-text);
	}

	.slide-body {
		font-size: clamp(0.98rem, 1.45vw, 1.1rem);
		color: var(--color-text-muted);
		inline-size: var(--home-section-subheader-width);
		margin-inline: auto;
		line-height: 1.42;
		text-wrap: balance;
	}

	.home-section.newsletter-section .newsletter-form {
		margin-top: 0;
	}

	/* ============================================
     AI Shifts section (Beyond ChatGPT) — sticky left, scrolling right
     ============================================ */

	/* Unclipped, so the sticky header and rail keep working. */
	.ai-story-section {
		position: relative;
		overflow: visible;
	}

	.ai-story-header {
		text-align: center;
		padding-block: 0 var(--space-2xl);
	}

	.ai-story-header .slide-body {
		inline-size: var(--home-section-subheader-width);
		text-wrap: balance;
	}

	/* ---------- Two-column grid ---------- */

	.ai-story-shell {
		width: 100%;
		max-width: 1160px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: minmax(15.5rem, 0.78fr) minmax(0, 1.32fr);
		gap: var(--space-xl);
		align-items: start;
		text-align: start;
	}

	/* ---------- Left rail — sticky ---------- */

	.ai-story-rail {
		position: relative;
		align-self: stretch;
	}

	.ai-story-rail-panel {
		position: sticky;
		top: var(--space-xl);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
		padding: clamp(1.5rem, 2.5vw, 2.5rem);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.18);
		border-radius: 1.5rem;
		background: linear-gradient(
			165deg,
			oklch(from var(--color-surface-elevated) l c h / 0.98),
			oklch(from var(--color-surface-elevated) l c h / 0.84)
		);
		box-shadow:
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.04),
			0 24px 50px oklch(from var(--color-text) l c h / 0.1);
		overflow: hidden;
		isolation: isolate;
	}

	.ai-story-rail-panel::before {
		content: '';
		position: absolute;
		width: 18rem;
		height: 18rem;
		top: -7rem;
		left: -4rem;
		border-radius: var(--radius-full);
		background: radial-gradient(
			circle,
			oklch(from var(--color-primary) l c h / 0.2),
			transparent 68%
		);
		pointer-events: none;
		z-index: -1;
	}

	/* ---------- SVG artwork in rail ---------- */

	.ai-story-art {
		position: relative;
		width: 100%;
		aspect-ratio: 4 / 3;
		border-radius: 1rem;
		overflow: hidden;
		pointer-events: none;
	}

	.ai-story-art::before {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background:
			radial-gradient(
				circle at 30% 24%,
				oklch(from var(--color-primary) l c h / 0.1),
				transparent 50%
			),
			radial-gradient(
				circle at 74% 72%,
				oklch(from var(--color-secondary) l c h / 0.07),
				transparent 44%
			),
			oklch(from var(--color-surface) l c h / 0.38);
	}

	.ai-story-art-frame {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transform: translateY(0.75rem) scale(0.96);
		transition:
			opacity var(--transition-slow),
			transform var(--transition-slow);
	}

	.ai-story-art-frame[data-active='true'] {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	.ai-story-art-figure {
		width: min(88%, 22rem);
		height: auto;
		filter: drop-shadow(0 0 18px oklch(from var(--color-primary) l c h / 0.1));
		opacity: 0.58;
	}

	.ai-story-art-figure[data-art='agentic-coding'] {
		color: oklch(from var(--color-primary) 78% 0.15 h);
	}

	.ai-story-art-figure[data-art='multi-agent'] {
		color: oklch(from var(--color-secondary) 82% 0.12 h);
	}

	.ai-story-art-figure[data-art='local-private'] {
		color: oklch(from var(--color-primary) 84% 0.08 h);
	}

	/* Shell / container shapes */

	.ai-story-art-shell {
		fill: currentColor;
		fill-opacity: 0.08;
		stroke: currentColor;
		stroke-width: 2;
	}

	/* Lines */

	.ai-story-art-line {
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 3;
	}

	.ai-story-art-line-primary {
		opacity: 0.95;
	}

	.ai-story-art-line-secondary {
		opacity: 0.4;
	}

	.ai-story-art-divider {
		fill: none;
		stroke: currentColor;
		stroke-width: 1;
		opacity: 0.18;
	}

	/* Fills */

	.ai-story-art-solid,
	.ai-story-art-dot,
	.ai-story-art-node,
	.ai-story-art-core {
		fill: currentColor;
	}

	.ai-story-art-solid {
		fill-opacity: 0.36;
	}

	.ai-story-art-tab-inactive {
		fill: currentColor;
		fill-opacity: 0.14;
	}

	.ai-story-art-dot {
		fill-opacity: 0.9;
	}

	/* Agent cursor — blinks */

	.ai-story-art-cursor {
		fill: currentColor;
		animation: ai-story-cursor-blink 1.2s step-end infinite;
	}

	/* Nodes — pulsing dots */

	.ai-story-art-node {
		fill-opacity: 0.95;
		animation: ai-story-pulse 4.2s ease-in-out infinite;
		transform-origin: center;
		transform-box: fill-box;
	}

	.ai-story-art-node-delay-1 {
		animation-delay: -0.4s;
	}

	.ai-story-art-node-delay-2 {
		animation-delay: -1.2s;
	}

	.ai-story-art-node-delay-3 {
		animation-delay: -2s;
	}

	.ai-story-art-node-delay-4 {
		animation-delay: -2.8s;
	}

	.ai-story-art-core {
		fill-opacity: 0.9;
		animation: ai-story-pulse 3.6s ease-in-out infinite;
		transform-origin: center;
		transform-box: fill-box;
	}

	/* Multi-agent: node ring */

	.ai-story-art-node-ring {
		fill: currentColor;
		fill-opacity: 0.06;
		stroke: currentColor;
		stroke-width: 2;
		stroke-opacity: 0.55;
	}

	/* Multi-agent: flow arrows */

	.ai-story-art-flow {
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-dasharray: 6 10;
		opacity: 0.55;
	}

	.ai-story-art-flow-cross {
		opacity: 0.25;
		stroke-dasharray: 4 12;
	}

	/* Local-private: chip & traces */

	.ai-story-art-chip {
		fill: currentColor;
		fill-opacity: 0.1;
		stroke: currentColor;
		stroke-width: 2;
		stroke-opacity: 0.6;
	}

	.ai-story-art-trace {
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		opacity: 0.45;
	}

	.ai-story-art-screen-inner {
		fill: currentColor;
		fill-opacity: 0.03;
		stroke: none;
	}

	/* ---------- Rail text ---------- */

	.ai-story-active-label {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: flex-end;
		min-height: 2.15em;
		font-size: clamp(1.65rem, 2.7vw, 2.6rem);
		line-height: 1;
		letter-spacing: -0.05em;
		color: var(--color-text);
		text-wrap: balance;
	}

	.ai-story-active-statement {
		position: relative;
		z-index: 1;
		max-width: 20ch;
		min-height: 3.6em;
		font-size: clamp(0.98rem, 1.45vw, 1.08rem);
		line-height: 1.58;
		color: var(--color-neutral-200);
	}

	/* ---------- Progress dots ---------- */

	.ai-story-progress {
		position: relative;
		z-index: 1;
		display: flex;
		gap: 0.5rem;
		margin-block-start: auto;
		padding-block-start: var(--space-lg);
	}

	.ai-story-progress-dot {
		width: 1.5rem;
		height: 0.2rem;
		border-radius: var(--radius-full);
		background-color: oklch(from var(--color-text) l c h / 0.15);
		transition:
			background-color var(--transition-base),
			width var(--transition-base);
	}

	.ai-story-progress-dot[data-active='true'] {
		width: 2rem;
		background-color: oklch(from var(--color-primary) l c h / 0.7);
	}

	/* ---------- Right content — flows naturally ---------- */

	.ai-story-content {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
	}

	.ai-story-topic-rail {
		display: none;
	}

	.ai-story-topic-group {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
		padding: clamp(1.5rem, 2.5vw, 2rem);
		border: 1px solid var(--color-border);
		border-radius: 1.25rem;
		background: linear-gradient(
			170deg,
			oklch(from var(--color-surface-elevated) l c h / 0.92),
			oklch(from var(--color-surface-elevated) l c h / 0.76)
		);
		box-shadow:
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.03),
			0 12px 32px oklch(from var(--color-text) l c h / 0.06);
	}

	.ai-story-topic-intro {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.ai-story-topic-overview {
		font-size: 0.96rem;
		line-height: 1.65;
		color: var(--color-text-muted);
	}

	.ai-story-tools-block {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		padding-block-start: var(--space-md);
		border-top: 1px solid oklch(from var(--color-border) l c h / 0.65);
	}

	.ai-story-tools-label {
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-secondary-300);
	}

	.ai-story-tool-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		list-style: none;
		padding: 0;
		padding-inline-start: 0;
		margin: 0;
		margin-inline-start: 0;
	}

	.ai-story-tool-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		padding: var(--space-sm) 0;
		border: none;
		border-bottom: 1px solid oklch(from var(--color-border) l c h / 0.35);
		border-radius: 0;
		background: none;
	}

	.ai-story-tool-item:last-child {
		border-bottom: none;
	}

	.ai-story-tool-head {
		width: 100%;
		display: flex;
		align-items: baseline;
		justify-content: flex-start;
		gap: var(--space-sm);
		flex-wrap: wrap;
	}

	.ai-story-tool-name {
		flex: 0 1 auto;
		font-size: 1.1rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
		color: var(--color-text);
	}

	.ai-story-tool-note {
		font-size: 0.92rem;
		line-height: 1.55;
		color: var(--color-text-muted);
	}

	.ai-story-tool-link {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		min-height: auto;
		margin-inline-start: 0;
		padding: 0;
		border: none;
		background: none;
		color: oklch(from var(--color-primary) l c h / 0.88);
		font-size: 0.72rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.04em;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		transition:
			color var(--transition-base),
			opacity var(--transition-base);
	}

	.ai-story-tool-link:hover,
	.ai-story-tool-link:focus-visible {
		color: var(--color-primary);
		opacity: 1;
	}

	.ai-story-tool-link:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}

	/* ---------- CTA card at end ---------- */

	.ai-story-cta-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: clamp(1.25rem, 3vw, 2.5rem);
		row-gap: var(--space-md);
		padding: clamp(1.5rem, 2.5vw, 2rem);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
		border-radius: 1.25rem;
		background: linear-gradient(
			170deg,
			oklch(from var(--color-surface-elevated) l c h / 0.95),
			oklch(from var(--color-surface-elevated) l c h / 0.82)
		);
		box-shadow:
			inset 0 1px 0 oklch(from var(--color-neutral-100) l c h / 0.04),
			0 12px 32px oklch(from var(--color-text) l c h / 0.06);
	}

	.ai-story-cta-text {
		margin: 0;
		font-size: clamp(1.2rem, 2.2vw, 1.5rem);
		line-height: 1.5;
		color: var(--color-text);
		max-width: 24ch;
		text-wrap: pretty;
	}

	.ai-story-cta {
		position: relative;
		z-index: 1;
		justify-self: end;
	}

	/* ---------- Responsive: tablet/mobile ---------- */

	@media (max-width: 768px) {
		.ai-story-shell {
			grid-template-columns: 1fr;
			gap: var(--space-xl);
		}

		.ai-story-rail {
			position: static;
			align-self: auto;
		}

		.ai-story-rail-panel {
			position: static;
			top: auto;
		}

		.ai-story-rail-panel {
			padding: var(--space-lg);
		}

		.ai-story-active-label {
			min-height: 0;
			font-size: clamp(1.45rem, 6.2vw, 2.1rem);
		}

		.ai-story-active-statement {
			min-height: 0;
			max-width: none;
		}

		.ai-story-rail {
			display: none;
		}

		.ai-story-topic-rail {
			display: grid;
			grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
			align-items: center;
			column-gap: var(--space-lg);
			padding: 0;
			padding-block-end: var(--space-md);
			border: none;
			border-radius: 0;
			background: none;
			overflow: visible;
			isolation: auto;
		}

		.ai-story-topic-rail::after {
			content: '';
			display: block;
			grid-column: 1 / -1;
			height: 1px;
			margin-block-start: var(--space-sm);
			background: linear-gradient(
				to right,
				oklch(from var(--color-primary) l c h / 0.35),
				oklch(from var(--color-border) l c h / 0.15) 60%,
				transparent
			);
		}

		.ai-story-topic-rail-media {
			position: relative;
			width: 100%;
			max-width: 10.5rem;
			justify-self: start;
		}

		.ai-story-topic-rail .ai-story-art {
			display: block;
			width: 100%;
			max-width: none;
			margin: 0;
		}

		.ai-story-topic-rail .ai-story-art-frame {
			position: relative;
			inset: auto;
			opacity: 1;
			transform: none;
		}

		.ai-story-topic-rail .ai-story-art-figure {
			width: min(82%, 10rem);
			opacity: 0.7;
		}

		.ai-story-topic-rail-label {
			position: absolute;
			inset: auto 0 0;
			z-index: 1;
			margin: 0;
			padding: 1rem 0.9rem 0.8rem;
			font-size: clamp(1.05rem, 3.2vw, 1.3rem);
			line-height: 1.08;
			letter-spacing: -0.04em;
			color: var(--color-text);
			text-wrap: balance;
			text-shadow: 0 2px 12px oklch(0% 0 0 / 0.45);
			background: linear-gradient(
				to top,
				oklch(from var(--color-surface) 12% 0.01 h / 0.94) 0%,
				oklch(from var(--color-surface) 12% 0.01 h / 0.72) 42%,
				transparent 100%
			);
			border-end-start-radius: 1rem;
			border-end-end-radius: 1rem;
			pointer-events: none;
		}

		.ai-story-topic-rail-statement {
			margin: 0;
			align-self: center;
			font-size: clamp(0.85rem, 1.3vw, 0.95rem);
			line-height: 1.5;
			color: var(--color-neutral-200);
		}

		.ai-story-topic-group {
			gap: var(--space-md);
			padding: var(--space-md);
		}

		.ai-story-topic-intro {
			gap: var(--space-md);
		}

		.ai-story-tools-block {
			padding-block-start: var(--space-sm);
		}

		.ai-story-tool-item {
			padding: var(--space-sm) 0;
		}

		.ai-story-cta-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: var(--space-sm);
			padding: var(--space-md);
			border: none;
			background: none;
			box-shadow: none;
		}

		.ai-story-cta-text {
			max-width: none;
		}
	}

	@keyframes ai-story-pulse {
		0%,
		100% {
			transform: scale(1);
			opacity: 0.95;
		}
		50% {
			transform: scale(1.08);
			opacity: 0.6;
		}
	}

	@keyframes ai-story-cursor-blink {
		0%,
		100% {
			opacity: 1;
		}
		50% {
			opacity: 0;
		}
	}

	/* ---------- Responsive: phone ---------- */

	@media (max-width: 640px) {
		.ai-story-shell {
			gap: var(--space-lg);
		}

		.ai-story-rail-panel {
			padding: var(--space-md);
			border-radius: 1.25rem;
		}

		.ai-story-cta-card {
			padding: var(--space-md);
			border-radius: 1rem;
		}

		.ai-story-topic-group {
			padding: var(--space-md);
			border-radius: 1rem;
		}

		.ai-story-topic-rail {
			display: block;
		}

		.ai-story-topic-rail-media {
			max-width: 8.5rem;
		}

		.ai-story-topic-rail .ai-story-art {
			max-width: none;
		}

		.ai-story-topic-rail-label {
			padding: 0.8rem 0.75rem 0.7rem;
			font-size: 0.98rem;
		}

		.ai-story-topic-rail-statement {
			display: none;
		}

		.ai-story-tool-item {
			padding: var(--space-sm) 0;
			border-radius: 0;
		}
	}

	/* ---------- Reduced motion ---------- */

	@media (prefers-reduced-motion: reduce) {
		.ai-story-art-frame,
		.ai-story-progress-dot {
			transition: none;
		}

		.ai-story-art-cursor,
		.ai-story-art-node,
		.ai-story-art-core {
			animation: none;
		}
	}

	/* ============================================
     How It Works section (features + access)
     ============================================ */

	/* ---- Feature Cards (Apple-inspired tall cards) ---- */

	.feature-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-lg);
		width: 100%;
		max-width: 1100px;
	}

	.feature-card {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--space-2xl) var(--space-xl);
		border-radius: var(--radius-2xl);
		min-height: 320px;
		overflow: hidden;
		color: var(--color-neutral-100);
		transition:
			transform var(--transition-base),
			box-shadow var(--transition-base);
	}

	.feature-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 20px 60px oklch(0% 0 0 / 0.35);
	}

	/* Card variant backgrounds */
	.feature-card--pace {
		background:
			radial-gradient(ellipse 120% 80% at 70% 90%, oklch(25% 0.08 270 / 0.6), transparent),
			linear-gradient(160deg, oklch(18% 0.02 270) 0%, oklch(12% 0.015 240) 100%);
	}

	.feature-card--tech {
		background:
			radial-gradient(ellipse 100% 100% at 50% 110%, oklch(30% 0.12 330 / 0.4), transparent),
			linear-gradient(160deg, oklch(15% 0.01 300) 0%, oklch(10% 0.02 340) 100%);
	}

	.feature-card--refund {
		background:
			radial-gradient(ellipse 120% 80% at 30% 90%, oklch(28% 0.06 160 / 0.5), transparent),
			linear-gradient(160deg, oklch(16% 0.015 180) 0%, oklch(11% 0.02 200) 100%);
	}

	.feature-card-label {
		text-align: center;
		align-self: center;
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		color: oklch(75% 0.12 var(--_card-accent-h, 270));
		margin-block-end: var(--space-xs);
	}

	.feature-card--pace .feature-card-label {
		--_card-accent-h: 270;
	}
	.feature-card--tech .feature-card-label {
		--_card-accent-h: 330;
		color: oklch(75% 0.15 330);
	}
	.feature-card--refund .feature-card-label {
		--_card-accent-h: 160;
		color: oklch(75% 0.12 160);
	}

	.feature-card-title {
		font-size: clamp(1.35rem, 2.2vw, 1.65rem);
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
		color: var(--color-neutral-100);
		margin-block-end: var(--space-sm);
	}

	.feature-card-desc {
		font-size: 0.9375rem;
		line-height: 1.55;
		color: oklch(80% 0 0);
	}

	.feature-card-illustration {
		display: block;
		width: calc(100% + 2 * var(--space-xl));
		max-width: none;
		margin-inline: calc(-1 * var(--space-xl));
		margin-block-start: auto;
		margin-block-end: calc(-1 * var(--space-2xl));
		height: auto;
		pointer-events: none;
		user-select: none;
		opacity: 0.85;
		transition: opacity var(--transition-base);
	}

	.feature-card:hover .feature-card-illustration {
		opacity: 1;
	}

	/* ============================================
     Stay Connected section (newsletter + social)
     ============================================ */

	.connect-socials {
		margin-block-start: var(--space-xl);
	}

	.socials-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-lg);
	}

	.socials-links a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--color-text-muted);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	.socials-links a:is(:hover, :focus-visible) {
		color: var(--color-primary);
	}

	.socials-links a:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 4px;
		border-radius: var(--radius-full);
	}

	@media (prefers-reduced-motion: reduce) {
		.feature-card {
			transition: none;
		}
	}

	/* ============================================
     Responsive
     ============================================ */

	@media (max-width: 1024px) {
		.slide-full,
		.slide-compact {
			min-height: auto;
		}

		.feature-cards {
			grid-template-columns: repeat(2, 1fr);
		}

		.feature-card {
			min-height: 280px;
		}

		.feature-card:hover {
			transform: none;
			box-shadow: none;
		}
	}

	@media (max-width: 640px) {
		.page-stack {
			--home-section-rhythm: var(--space-3xl);
		}

		.slide-headline {
			font-size: clamp(2rem, 8vw, 3rem);
		}

		.feature-cards {
			grid-template-columns: 1fr;
		}

		.feature-card {
			min-height: 260px;
		}

		.socials-links {
			gap: var(--space-md);
		}
	}
}

@layer routes {
	.membership-section-heading {
		position: relative;
	}

	/* ── Hero ── */

	.membership-hero {
		position: relative;
	}

	.membership-hero-layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		align-items: center;
	}

	.membership-hero-content {
		display: grid;
		justify-items: start;
		gap: var(--space-lg);
		text-align: start;
	}

	.membership-hero-eyebrow {
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-primary-200);
	}

	.membership-hero h1 {
		max-width: 20ch;
		font-size: clamp(2.2rem, 5.5vw, 3.6rem);
		line-height: 1.1;
	}

	.membership-hero-highlights {
		display: grid;
		gap: var(--space-sm);
	}

	.membership-hero-highlights li {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-size: 1.05rem;
		color: var(--color-neutral-200);
	}

	.membership-hero-highlights svg {
		flex-shrink: 0;
		color: var(--color-primary-300);
	}

	.membership-hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-md);
	}

	.membership-hero-illustration {
		display: none;
	}

	.membership-hero-illustration img {
		width: 100%;
		height: auto;
		max-width: 520px;
	}

	/* ── Stats bar ── */

	.membership-stats-bar {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
		max-width: 860px;
		margin-inline: auto;
		margin-top: var(--space-2xl);
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border-subtle);
		background: oklch(from var(--color-surface-elevated) l c h / 0.7);
		backdrop-filter: blur(12px);
	}

	.membership-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.15rem;
		padding: var(--space-sm) var(--space-md);
		text-align: center;
	}

	.membership-stat-value {
		font-family: var(--font-title);
		font-size: clamp(1.5rem, 3vw, 2rem);
		font-weight: 700;
		color: var(--color-primary-200);
		line-height: 1.2;
	}

	.membership-stat-label {
		font-size: 0.8rem;
		color: var(--color-text-muted);
		letter-spacing: 0.02em;
	}

	/* ── Section h2 sizes ── */

	.membership-pillars .section-heading h2,
	.membership-courses .section-heading h2,
	.membership-pricing .section-heading h2,
	.membership-instructors .section-heading h2,
	.membership-faq .section-heading h2 {
		font-size: clamp(1.65rem, 2.7vw, 2.25rem);
	}

	/* ── Learning Pillars ── */

	.membership-pillars-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.membership-pillar-card {
		display: grid;
		grid-template-columns: 1fr;
		overflow: hidden;
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border-subtle);
		background: linear-gradient(
			160deg,
			oklch(from var(--color-surface-elevated) l c h / 0.95),
			oklch(from var(--color-surface-hover) l c h / 0.92)
		);
		box-shadow: 0 12px 32px oklch(from var(--color-primary) 16% 0.03 h / 0.2);
		transition:
			border-color var(--transition-base),
			box-shadow var(--transition-base);
	}

	.membership-pillar-card:hover {
		border-color: oklch(from var(--color-primary) l c h / 0.3);
		box-shadow: 0 20px 44px oklch(from var(--color-primary) 18% 0.05 h / 0.28);
	}

	.membership-pillar-card--ai {
		border-color: oklch(from var(--color-primary) l c h / 0.2);
	}

	.membership-pillar-card--fundamentals {
		border-color: oklch(from var(--color-secondary) l c h / 0.15);
	}

	.membership-pillar-card-illustration {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-xl);
		background: oklch(from var(--color-surface) l c h / 0.5);
	}

	.membership-pillar-card-illustration img {
		width: 100%;
		height: auto;
		max-width: 360px;
		max-height: 240px;
		object-fit: contain;
	}

	.membership-pillar-card-content {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		padding: var(--space-xl);
	}

	.membership-pillar-card-label {
		display: inline-flex;
		align-self: flex-start;
		padding: 0.25rem 0.75rem;
		border-radius: var(--radius-full);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.membership-pillar-card--ai .membership-pillar-card-label {
		background: oklch(from var(--color-primary) l c h / 0.12);
		color: var(--color-primary-200);
		border: 1px solid oklch(from var(--color-primary) l c h / 0.25);
	}

	.membership-pillar-card--fundamentals .membership-pillar-card-label {
		background: oklch(from var(--color-secondary) l c h / 0.12);
		color: var(--color-secondary-200);
		border: 1px solid oklch(from var(--color-secondary) l c h / 0.25);
	}

	.membership-pillar-card-content h3 {
		font-size: 1.25rem;
		color: var(--color-text);
		line-height: 1.25;
	}

	.membership-pillar-card-content > p {
		color: var(--color-text-muted);
		font-size: 0.94rem;
		line-height: 1.62;
	}

	.membership-pillar-topics {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.4rem;
		margin-top: var(--space-sm);
	}

	.membership-pillar-topics li {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		padding: 0.35rem 0;
		font-size: 0.9rem;
		color: var(--color-text);
	}

	.membership-pillar-topics li::before {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.membership-pillar-card--ai .membership-pillar-topics li::before {
		background: var(--color-primary);
	}

	.membership-pillar-card--fundamentals .membership-pillar-topics li::before {
		background: var(--color-secondary);
	}

	/* ── Course Library (expandable) ── */

	.membership-courses-reveal {
		position: relative;
	}

	.membership-courses-reveal-inner {
		display: grid;
		grid-template-rows: 1fr;
		overflow: hidden;
	}

	.membership-courses-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--space-lg);
		min-height: 0;
	}

	.membership-courses-grid > li {
		display: flex;
	}

	.membership-courses-grid > li > * {
		width: 100%;
	}

	.membership-courses-fade {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120px;
		background: linear-gradient(to bottom, transparent, var(--color-surface));
		pointer-events: none;
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	}

	.membership-courses:has(.catalog-more[open]) .membership-courses-fade {
		display: none;
	}

	.catalog-more:not([open]) .membership-courses-toggle .catalog-more-closed,
	.catalog-more[open] .membership-courses-toggle .catalog-more-open {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
	}

	.membership-courses-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		margin-inline: auto;
	}

	.membership-courses-toggle svg {
		width: 18px;
		height: 18px;
	}

	.membership-courses-empty {
		text-align: center;
		color: var(--color-text-muted);
		border: 1px dashed var(--color-border);
		border-radius: var(--radius-lg);
		padding: var(--space-2xl);
	}

	/* ── Pricing ── */

	.membership-pricing .section-heading {
		margin-bottom: var(--space-xl);
	}

	/* ── FAQ ── */

	.membership-faq-list {
		width: min(100%, 760px);
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}

	.membership-faq-list > li {
		width: 100%;
		min-width: 0;
	}

	.membership-faq-item {
		display: block;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		overflow: hidden;
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-lg);
		background-color: oklch(from var(--color-surface-hover) l c h / 0.88);
	}

	.membership-faq-question {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-md);
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		padding: var(--space-lg);
		font-family: var(--font-title);
		font-size: 1rem;
		font-weight: 600;
		color: var(--color-text);
		cursor: pointer;
		list-style: none;
		transition:
			color var(--transition-fast),
			background-color var(--transition-fast);
	}

	.membership-faq-question::-webkit-details-marker {
		display: none;
	}

	.membership-faq-question:hover {
		color: var(--color-primary);
	}

	.membership-faq-question:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: -2px;
		background-color: oklch(from var(--color-primary) l c h / 0.08);
	}

	.membership-faq-chevron {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: var(--color-text-muted);
		transition: transform var(--transition-base);
	}

	.membership-faq-item[open] .membership-faq-chevron {
		transform: rotate(180deg);
	}

	.membership-faq-answer {
		padding: 0 var(--space-lg) var(--space-lg);
		color: var(--color-text-muted);
		line-height: 1.68;
	}

	/* ── Responsive ── */

	@media (min-width: 768px) {
		.membership-stats-bar {
			grid-template-columns: repeat(4, 1fr);
		}

		.membership-pillar-topics {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (min-width: 1024px) {
		.membership-hero-layout {
			grid-template-columns: 1.1fr 0.9fr;
		}

		.membership-hero-illustration {
			display: flex;
			justify-content: center;
		}

		.membership-pillar-card {
			grid-template-columns: 0.45fr 0.55fr;
		}

		.membership-pillar-card:nth-child(even) {
			direction: rtl;
		}

		.membership-pillar-card:nth-child(even) > * {
			direction: ltr;
		}
	}

	@media (max-width: 768px) {
		.membership-hero-actions {
			max-width: none;
			width: 100%;
			flex-wrap: wrap;
			justify-content: center;
		}
	}

	@media (max-width: 640px) {
		.membership-hero h1 {
			font-size: clamp(1.8rem, 8vw, 2.8rem);
		}

		.membership-hero-highlights li {
			font-size: 0.95rem;
		}

		.membership-section-heading h2 {
			font-size: clamp(1.5rem, 7vw, 2.2rem);
		}

		.membership-stats-bar {
			gap: var(--space-sm);
		}

		.membership-pillar-card-content,
		.membership-pillar-card-illustration {
			padding: var(--space-md);
		}

		.membership-courses-grid {
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		}

		.membership-stat-value {
			font-size: clamp(1.5rem, 6vw, 2rem);
		}

		.membership-faq-question {
			padding: var(--space-md);
			font-size: 0.9375rem;
		}

		.membership-faq-answer {
			padding: 0 var(--space-md) var(--space-md);
		}
	}

	@media (max-width: 480px) {
		.membership-stats-bar {
			grid-template-columns: 1fr;
		}

		.membership-hero-content {
			gap: var(--space-md);
		}

		.membership-hero-actions {
			flex-direction: column;
			align-items: center;
		}

		.membership-hero-actions .btn {
			min-width: 15rem;
			padding-block: 0.875rem;
			font-size: 0.9375rem;
		}

		.membership-courses-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.membership-pillar-card,
		.pricing-card-value-enter,
		.pricing-card-value-enter--delayed,
		.membership-faq-chevron {
			animation: none;
			transition: none;
			transform: none;
		}
	}
}

@layer overrides {
	html,
	body {
		max-width: 100%;
	}

	html {
		touch-action: manipulation;
	}

	body {
		overflow-x: clip;
	}

	#main-content {
		min-width: 0;
	}

	.slide-body {
		max-width: min(100%, 38rem);
	}

	/* Breakpoints mirror src/lib/shared/responsive.ts. */
	@media (max-width: 768px) {
		.container {
			padding-inline: clamp(1rem, 5vw, 1.5rem);
		}

		.page-stack {
			--page-section-space: var(--space-2xl);
			--page-content-gap: var(--space-lg);
		}
	}

	@media (max-width: 480px) {
		:root {
			--container-gutter: 0.75rem;
		}

		.page-stack {
			--page-section-space: var(--space-xl);
			--page-content-gap: var(--space-md);
		}

		.section-heading h2 {
			font-size: clamp(1.55rem, 8vw, 2rem);
		}
	}

	@media (max-width: 1024px), (hover: none), (prefers-reduced-motion: reduce) {
		.hero-mosaic,
		.hero-mosaic-cell,
		.hero-proof,
		.hero-tagline,
		.hero-actions,
		.hero-glass,
		.customer-proof {
			opacity: 1;
			animation: none;
			transition: none;
			transform: none;
		}

		.hero-headline {
			animation: none;
		}

		.hero-glow,
		.ai-story-art-cursor,
		.ai-story-art-node,
		.ai-story-art-core,
		.lp-grid-thumb,
		.lp-spotlight {
			animation: none;
		}

		.btn,
		.feature-card,
		.learning-path-card,
		.content-card,
		.featured-content-card,
		.pricing-card,
		.membership-pillar-card,
		.membership-faq-chevron {
			transition-duration: 0.01ms;
		}
	}
}