/**
 * CodesBlock Liquid Glass Visual Design System & Refinement Layer
 *
 * Combines full structural harmony with prominent liquid glass surfaces,
 * specular borders, backdrop blurs, dynamic ambient background glows,
 * and high-end micro-interactions across every page.
 */

:root {
	--cb-radius-sm: 12px;
	--cb-radius-md: 18px;
	--cb-radius-lg: 28px;
	--cb-radius-pill: 9999px;

	--cb-shadow-soft: 0 14px 40px rgba(16, 24, 40, .08);
	--cb-shadow-lift: 0 24px 70px rgba(16, 24, 40, .14);
	--cb-focus: 0 0 0 4px rgba(37, 99, 235, .2);

	/* Liquid Glass Tokens */
	--cb-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.45) 100%);
	--cb-glass-bg-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.62) 100%);
	--cb-glass-border: rgba(255, 255, 255, 0.85);
	--cb-glass-border-hover: rgba(37, 99, 235, 0.4);
	--cb-glass-shadow: inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.02), 0 16px 42px -10px rgba(16, 24, 40, 0.07);
	--cb-glass-shadow-hover: inset 0 2px 1.5px 0 rgba(255, 255, 255, 1), 0 26px 60px -12px rgba(37, 99, 235, 0.18);
	--cb-blur-main: blur(18px) saturate(180%);

	--cb-dark-glass-bg: linear-gradient(145deg, rgba(16, 24, 40, 0.92) 0%, rgba(15, 23, 42, 0.82) 100%);
	--cb-dark-glass-border: rgba(255, 255, 255, 0.16);
	--cb-dark-glass-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.22), 0 28px 75px rgba(0, 0, 0, 0.35);
}

/* ─────────────────────────────────────────────────────────────
   1. GLOBAL BODY & TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
body {
	background:
		radial-gradient(circle at 8% 2%, rgba(24, 182, 216, .12), transparent 28rem),
		radial-gradient(circle at 92% 18%, rgba(19, 185, 129, .12), transparent 32rem),
		radial-gradient(circle at 50% 70%, rgba(121, 87, 213, .08), transparent 36rem),
		var(--bg);
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
	font-family: var(--font-body);
}

:where(h1, h2, h3, h4, .brand-copy strong) {
	font-family: var(--font-heading);
	letter-spacing: -.035em;
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

:where(a, button, input, textarea, select):focus-visible {
	box-shadow: var(--cb-focus);
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   2. TOP PROMO BAR & HEADER NAVIGATION
   ───────────────────────────────────────────────────────────── */
.promo-badge {
	background: rgba(255, 255, 255, 0.18) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.32) !important;
	border-radius: var(--cb-radius-pill) !important;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
	font-weight: 800 !important;
	letter-spacing: .04em;
	padding: 4px 12px !important;
	text-transform: uppercase;
}

/* Campaign bar: compact like the reference, but unmistakably CodesBlock. */
.top-promo-bar {
	--promo-start: #0d1b38;
	--promo-middle: #173a8a;
	--promo-end: #087a59;
	--promo-accent: #9ff5d0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(105deg, var(--promo-start) 0%, var(--promo-middle) 52%, var(--promo-end) 100%);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(15, 23, 42, .12);
	isolation: isolate;
	overflow: hidden;
	transition: opacity .2s ease, transform .2s ease;
}

.top-promo-bar.promo-scheme-midnight {
	--promo-start: #080f21;
	--promo-middle: #172554;
	--promo-end: #263f86;
	--promo-accent: #bfdbfe;
}

.top-promo-bar.promo-scheme-emerald {
	--promo-start: #09251f;
	--promo-middle: #075e54;
	--promo-end: #173a8a;
	--promo-accent: #a7f3d0;
}

.top-promo-bar.promo-scheme-sunset {
	--promo-start: #3b1636;
	--promo-middle: #8a2f59;
	--promo-end: #c45b32;
	--promo-accent: #ffdfb8;
}

.top-promo-bar.promo-status-setup-needed {
	--promo-start: #35230a;
	--promo-middle: #8a4b12;
	--promo-end: #7c2d12;
	--promo-accent: #fde68a;
}

.promo-status-setup-needed .promo-badge {
	background: rgba(254, 243, 199, .2) !important;
	border-color: rgba(254, 243, 199, .45) !important;
}

.top-promo-bar.is-leaving {
	opacity: 0;
	transform: translateY(-8px);
}

.promo-glow {
	background: var(--promo-accent);
	border-radius: 999px;
	filter: blur(26px);
	height: 46px;
	opacity: .16;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 150px;
	z-index: -1;
}

.promo-glow-one {
	left: 10%;
}

.promo-glow-two {
	right: 8%;
}

.top-promo-inner {
	gap: clamp(10px, 1.3vw, 18px);
	max-width: 1240px;
	min-height: 52px;
	padding: 7px 54px 7px 18px;
}

.promo-icon {
	align-items: center;
	background: rgba(255, 255, 255, .11);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
	display: inline-flex;
	font-size: 1rem;
	height: 30px;
	justify-content: center;
	line-height: 1;
	max-width: 64px;
	overflow: hidden;
	width: 30px;
}

.promo-message {
	align-items: center;
	display: flex;
	gap: 10px;
	min-width: 0;
}

.promo-message p {
	color: #fff;
	font-size: clamp(.78rem, 1vw, .88rem);
	font-weight: 650;
	letter-spacing: -.01em;
	line-height: 1.35;
	margin: 0;
}

.promo-badge {
	color: #fff;
	flex: 0 0 auto;
	font-size: .64rem !important;
	line-height: 1;
	padding: 5px 9px !important;
}

.promo-countdown {
	align-items: center;
	background: rgba(5, 15, 35, .28);
	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .76);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: .65rem;
	font-weight: 700;
	gap: 5px;
	padding: 5px 9px;
	white-space: nowrap;
}

.promo-countdown svg {
	fill: none;
	height: 13px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 13px;
}

.promo-countdown strong {
	color: #fff;
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

.top-promo-inner .promo-cta {
	align-items: center;
	background: var(--promo-accent);
	border: 1px solid rgba(255, 255, 255, .56);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 18px rgba(3, 12, 28, .2);
	color: #0c2532;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 5px;
	line-height: 1;
	min-height: 30px;
	padding: 7px 11px;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}

.top-promo-inner .promo-cta:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 9px 22px rgba(3, 12, 28, .28);
	color: #071c26;
	transform: translateY(-1px);
}

.promo-cta svg {
	fill: none;
	height: 14px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 14px;
}

.promo-dismiss:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
	outline-color: #fff;
}

@media (max-width: 760px) {
	.top-promo-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 7px 48px 7px 12px;
		text-align: left;
	}

	.promo-icon {
		display: none;
	}

	.promo-message {
		gap: 7px;
	}

	.promo-message p {
		display: -webkit-box;
		font-size: .76rem;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.promo-countdown {
		grid-column: 1;
		justify-self: start;
		margin-top: -3px;
		padding-block: 4px;
	}

	.top-promo-inner .promo-cta {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 640px) {
	.promo-hide-mobile {
		display: none;
	}
}

@media (max-width: 520px) {

	.promo-badge {
		display: none;
	}

	.top-promo-inner {
		gap: 6px 9px;
		min-height: 48px;
		padding-left: 10px;
	}

	.top-promo-inner .promo-cta {
		font-size: .7rem;
		padding-inline: 9px;
	}

	.promo-countdown > span,
	.promo-countdown svg {
		display: none;
	}
}

/* Keep the final fallback course in the open lower-left desk space. */
@media (min-width: 981px) {
	body.home .course-desk > .course-card[href$="/courses/"] {
		grid-column: 1 / span 4;
		grid-row: 3;
	}
	body.home .course-desk > .course-card[href*="/dsa-patterns-with-python/"] {
		align-self: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.top-promo-bar,
	.top-promo-inner .promo-cta {
		transition: none;
	}
}

.site-header:not(.is-scrolled) {
	background: rgba(247, 251, 255, .78);
	backdrop-filter: var(--cb-blur-main);
	-webkit-backdrop-filter: var(--cb-blur-main);
	border-bottom: 1px solid rgba(219, 231, 243, .7);
	box-shadow: 0 1px 0 rgba(16, 24, 40, .03), 0 12px 34px rgba(16, 24, 40, .035);
}

/* Scrolled Floating Pill Navigation Capsule */
.site-header.is-scrolled .primary-nav {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 100%);
	backdrop-filter: blur(28px) saturate(180%);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--cb-radius-pill);
	box-shadow: inset 0 1.5px 1px #fff, 0 12px 38px rgba(16, 24, 40, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
	padding: 6px 12px;
}

.brand-logo {
	filter: drop-shadow(0 8px 16px rgba(16, 24, 40, .16));
}

.brand-copy strong {
	font-weight: 800;
	background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.primary-nav .menu a,
.header-link,
.header-button {
	letter-spacing: -.015em;
}

.primary-nav .menu a {
	border-radius: var(--cb-radius-pill);
	color: #334155;
	font-weight: 700;
	transition: all .2s ease;
}

.primary-nav .menu a:hover,
.primary-nav .menu li.current-menu-item > a,
.primary-nav .menu li.current_page_item > a {
	background: rgba(37, 99, 235, 0.08) !important;
	color: var(--blue) !important;
	backdrop-filter: blur(8px);
}

.header-coffee-btn {
	align-items: center;
	background: linear-gradient(135deg, #ffdd00 0%, #ffb700 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.95) !important;
	border-radius: 50% !important;
	box-shadow: inset 0 1.5px 1px #fff, 0 4px 14px rgba(255, 221, 0, 0.38) !important;
	display: inline-flex !important;
	height: 38px !important;
	width: 38px !important;
	justify-content: center !important;
	padding: 0 !important;
	text-decoration: none !important;
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease !important;
	flex-shrink: 0 !important;
}

.header-coffee-btn:hover {
	background: linear-gradient(135deg, #ffe01a 0%, #ffc000 100%) !important;
	box-shadow: inset 0 2px 1.5px #fff, 0 8px 22px rgba(255, 221, 0, 0.55) !important;
	transform: translateY(-2px) scale(1.08) !important;
}

.header-coffee-btn svg {
	height: 20px !important;
	width: 20px !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.header-signin-button {
	align-items: center;
	background: rgba(255,255,255,.7);
	border: 1px solid rgba(159,176,201,.55);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(23,32,51,.06);
	display: inline-flex;
	gap: 7px;
	text-decoration: none;
	transition: border-color .18s, box-shadow .18s, color .18s, transform .18s;
}

.header-signin-button svg {
	fill: none;
	height: 15px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 15px;
}

.header-signin-button:hover {
	border-color: rgba(49,95,216,.42);
	box-shadow: 0 8px 20px rgba(23,32,51,.09);
	color: #244fbe;
	transform: translateY(-1px);
}

.header-learning-button { align-items: center; display: inline-flex; gap: 7px; text-decoration: none; }
.header-learning-button > span { font-size: .58rem; }

.header-button,
.button,
.btn-enroll,
.btn-view-course,
.explore-courses-btn {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--cb-radius-sm);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 8px 24px rgba(37, 99, 235, 0.25);
	color: #fff;
	font-weight: 800;
	position: relative;
	overflow: hidden;
	transition: transform .22s var(--cb-ease-bounce), box-shadow .22s var(--cb-ease-bounce), background-color .22s ease;
}

:where(.header-button, .button, .btn-enroll, .btn-view-course, .explore-courses-btn):hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 32px rgba(37, 99, 235, 0.38);
	transform: translateY(-2px) scale(1.015);
}

.button-secondary {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(184, 201, 220, 0.85);
	box-shadow: inset 0 1px 1px #fff, 0 4px 14px rgba(16, 24, 40, 0.05);
	color: var(--ink);
}

.button-secondary:hover {
	background: #fff;
	border-color: var(--blue);
	box-shadow: inset 0 1px 1px #fff, 0 8px 22px rgba(37, 99, 235, 0.15);
	color: var(--blue);
}

/* ─────────────────────────────────────────────────────────────
   3. HERO & FLOATING LIQUID GLASS SKETCH DECK
   ───────────────────────────────────────────────────────────── */
.hero {
	isolation: isolate;
	overflow: clip;
	position: relative;
}

.hero::before,
.hero::after {
	border-radius: 999px;
	content: "";
	filter: blur(40px);
	opacity: .75;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.hero::before {
	background: radial-gradient(circle, rgba(19, 185, 129, .22), rgba(19, 185, 129, 0) 68%);
	height: 36rem;
	right: -8rem;
	top: -12rem;
	width: 36rem;
}

.hero::after {
	background: radial-gradient(circle, rgba(37, 99, 235, .2), rgba(121, 87, 213, 0) 70%);
	bottom: -14rem;
	height: 34rem;
	left: -10rem;
	width: 34rem;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 1px 1px #fff, 0 6px 16px rgba(16, 24, 40, 0.05);
	border-radius: var(--cb-radius-pill);
	color: #1e40af;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .08em;
	padding: 5px 14px;
	text-transform: uppercase;
}

.eyebrow::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 8px #10b981;
}

.hero-copy h1 {
	font-size: clamp(2.8rem, 5.4vw, 5.4rem);
	letter-spacing: -.055em;
	line-height: .98;
	max-width: 11ch;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.hero-lede {
	font-size: clamp(1rem, 1.5vw, 1.18rem);
	line-height: 1.75;
	max-width: 60ch;
}

.hero-sketch {
	filter: drop-shadow(0 24px 50px rgba(16, 24, 40, .14));
}

/* Liquid Glass Cards in Hero Sketch Deck */
.sketch-card {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.58) 100%);
	backdrop-filter: var(--cb-blur-main);
	-webkit-backdrop-filter: var(--cb-blur-main);
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--cb-radius-md);
	box-shadow: inset 0 1.5px 1px #fff, inset 0 -1px 1px rgba(0, 0, 0, 0.03), 0 18px 45px rgba(16, 24, 40, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sketch-card:hover {
	border-color: rgba(37, 99, 235, 0.4);
	box-shadow: inset 0 2px 1.5px #fff, 0 24px 55px rgba(37, 99, 235, 0.18);
}

.sketch-card.code-card {
	background: linear-gradient(145deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.85) 100%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 20px 50px rgba(15, 23, 42, 0.3);
	color: #7dd3fc;
}

/* Hero Search Form Liquid Capsule */
.hero-search-form {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.5) 100%);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 1.5px 1px #fff, 0 16px 40px rgba(16, 24, 40, 0.08);
}

.keyword-picker a {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 1px 1px #fff, 0 4px 12px rgba(16, 24, 40, 0.04);
	transition: all .2s ease;
}

.keyword-picker a:hover {
	background: #fff;
	border-color: var(--blue);
	color: var(--blue);
	transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────
   4. LIQUID CARDS (COURSES, BENTO, ARTICLES & SIDEBARS)
   ───────────────────────────────────────────────────────────── */
.hero-copy,
.hero-grid > *,
.courses-workspace > *,
.course-card,
.course-card-inner,
.course-card-face,
.footer-grid > * {
	min-width: 0;
}

:where(.course-card, .post-card, .side-card, .site-footer) :where(h2, h3, p, a, strong, small, span) {
	overflow-wrap: anywhere;
}

.course-card {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.2s ease;
}

.course-card-inner.static {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 250, 255, 0.72) 100%);
	backdrop-filter: var(--cb-blur-main);
	-webkit-backdrop-filter: var(--cb-blur-main);
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--cb-radius-md);
	box-shadow: inset 0 1.5px 1px #fff, 0 14px 38px rgba(16, 24, 40, 0.07);
	height: 100%;
	min-height: 240px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card-inner.static .course-card-face {
	background: transparent !important;
	height: 100%;
	min-height: 240px;
	display: flex !important;
	flex-direction: column !important;
	position: relative;
	padding: 18px 20px !important;
}

.course-card h3 {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 1.1rem !important;
	line-height: 1.25 !important;
	margin-bottom: 6px !important;
}

.course-card .card-desc {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3 !important;
	color: #475569 !important;
	font-size: 0.84rem !important;
	line-height: 1.4 !important;
	margin-bottom: 10px !important;
}

.card-footer-row {
	margin-top: auto !important;
	padding-top: 8px !important;
}

.course-card:hover {
	transform: translateY(-8px) scale(1.02) rotate(0deg) !important;
	z-index: 10 !important;
}

.course-card:hover .course-card-inner.static {
	border-color: rgba(19, 185, 129, 0.55) !important;
	box-shadow: inset 0 2px 1.5px #fff, 0 24px 55px rgba(19, 185, 129, 0.2), 0 8px 24px rgba(16, 24, 40, 0.08) !important;
}

.course-badge {
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.06)) !important;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(37, 99, 235, 0.28) !important;
	color: #1e40af !important;
	font-weight: 800 !important;
	border-radius: var(--cb-radius-pill) !important;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
	padding: 4px 12px !important;
}

.course-badge-free {
	background: linear-gradient(135deg, rgba(19, 185, 129, 0.14), rgba(19, 185, 129, 0.06)) !important;
	border-color: rgba(19, 185, 129, 0.3) !important;
	color: #047857 !important;
}

/* Filter Pills (Archive & Homepage) */
.filter-pill {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: var(--cb-radius-pill);
	box-shadow: inset 0 1px 1px #fff, 0 4px 14px rgba(16, 24, 40, 0.05);
	color: #475569;
	font-size: .88rem;
	font-weight: 700;
	padding: 9px 20px;
	transition: all 0.22s var(--cb-ease-bounce);
}

.filter-pill:hover,
.filter-pill.is-active {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 22px rgba(37, 99, 235, 0.3);
	color: #fff;
	transform: translateY(-2px);
}

.section-heading h2,
.courses-h2,
.article-section h2,
.course-archive-hero h1,
.articles-hero h1 {
	font-size: clamp(2rem, 4vw, 3.7rem);
	line-height: 1.05;
}

.course-card h3,
.post-card h3,
.bento-card h2,
.bento-card h3,
.course-card-v2 h2 {
	line-height: 1.18;
}

.course-card-inner,
.course-thumb,
.featured-article-media,
.article-featured-media {
	border-radius: var(--cb-radius-md);
}

.sticky-card-placeholder {
	align-items: center;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(135deg, #101828, #173a8a 58%, #087a59);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	justify-content: center;
	padding: 24px;
	text-align: center;
}

.sticky-card-placeholder span {
	align-items: center;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 14px;
	display: inline-flex;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 800;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.sticky-card-placeholder strong {
	font-family: var(--font-heading);
	font-size: .92rem;
	letter-spacing: -.02em;
}

.sticky-card-body,
.sticky-price {
	color: var(--ink);
}

.article-content {
	font-size: clamp(1rem, 1.2vw, 1.08rem);
	line-height: 1.86;
}

.article-content :where(h2, h3) {
	line-height: 1.2;
	margin-top: 1.8em;
}

.article-content :where(blockquote, pre, .wp-block-code) {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45));
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--cb-radius-sm);
	box-shadow: inset 0 1px 1px #fff;
}

/* ─────────────────────────────────────────────────────────────
   6. SITE FOOTER (MIDNIGHT LIQUID GLASS)
   ───────────────────────────────────────────────────────────── */
.site-footer {
	background:
		radial-gradient(circle at 10% 10%, rgba(24, 182, 216, .16), transparent 26rem),
		radial-gradient(circle at 90% 40%, rgba(19, 185, 129, .14), transparent 30rem),
		#101828;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer .footer-grid {
	grid-template-columns: minmax(0, 1.15fr) minmax(160px, .55fr) minmax(280px, 1.1fr);
}

.site-footer .footer-brand + p {
	max-width: 48ch;
}

.footer-newsletter-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--cb-radius-md);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 20px 48px rgba(0, 0, 0, 0.28);
	padding: 24px;
}

.footer-form input {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--cb-radius-sm);
	color: #fff;
}

.footer-form input:focus {
	background: rgba(255, 255, 255, 0.14);
	border-color: #7dd3fc;
}

.footer-form button {
	border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────
   7. RESPONSIVE BREAKPOINTS & ACCESSIBILITY
   ───────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
	.hero-copy h1 {
		font-size: clamp(2.35rem, 10vw, 3.8rem);
		letter-spacing: -.045em;
		line-height: 1;
		max-width: 12ch;
	}

	.header-inner-full {
		padding-inline: 18px;
	}

	.sketch-card,
	.learning-search,
	.side-card,
	.post-card,
	.bento-card,
	.course-section,
	.course-sticky-card {
		border-radius: 16px;
	}
}

@media (max-width: 980px) {
	.course-card-inner.static,
	.course-card-inner.static .course-card-face {
		min-height: 238px;
	}

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

	.site-footer .footer-grid > :last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.hero-copy h1 {
		font-size: clamp(2.2rem, 11vw, 3.25rem);
	}

	.course-card-inner.static,
	.course-card-inner.static .course-card-face {
		min-height: 232px;
	}

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

	.site-footer .footer-grid > :last-child {
		grid-column: auto;
	}
}

/* ── Liquid Glass Community & Social Section ───────────── */
/* ── Minimal Liquid Glass Community Pills ───────────────── */
.member-section {
	background:
		radial-gradient(circle at 18% 28%, rgba(255, 221, 0, 0.08), transparent 45%),
		radial-gradient(circle at 82% 72%, rgba(37, 99, 235, 0.06), transparent 50%),
		linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.75) 100%);
	padding: 20px 0 !important;
	position: relative;
}

.member-strip {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	width: 100%;
}

.member-strip-copy {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	flex: 0 0 auto;
}

.member-strip-copy .eyebrow {
	margin-bottom: 0 !important;
}

.community-subtext {
	color: #64748b;
	font-size: 0.82rem;
	font-weight: 600;
	margin: 0;
	white-space: nowrap !important;
}

.community-grid {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
	flex: 1 1 auto;
	width: auto !important;
	overflow: visible !important;
}

.community-card {
	align-items: center;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.18) 100%) !important;
	backdrop-filter: blur(20px) saturate(190%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(190%) !important;
	border: 1px solid rgba(255, 255, 255, 0.88) !important;
	border-radius: 999px !important;
	box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.95), 0 6px 20px rgba(31, 38, 135, 0.05) !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	justify-content: center !important;
	gap: 8px !important;
	min-width: 0 !important;
	padding: 8px 14px !important;
	position: relative;
	text-decoration: none;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}

.community-icon-badge {
	align-items: center;
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	height: 26px;
	width: 26px;
	justify-content: center;
	position: relative;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
	transition: transform 0.22s ease;
}

.community-icon-badge svg {
	height: 16px;
	width: 16px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.community-icon-badge.coffee-icon {
	background: linear-gradient(135deg, #ffdd00, #ffb700);
	color: #4a2c00;
	box-shadow: 0 3px 10px rgba(255, 221, 0, 0.35);
}

.community-icon-badge.youtube-icon {
	background: linear-gradient(135deg, #ff0000, #cc0000);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(255, 0, 0, 0.35);
}

.community-icon-badge.instagram-icon {
	background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(225, 48, 108, 0.35);
}

.community-icon-badge.github-icon {
	background: linear-gradient(135deg, #24292e, #0f1419);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(15, 20, 25, 0.35);
}

.community-icon-badge.member-icon {
	background: linear-gradient(135deg, #10b981, #059669);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

.community-icon-badge.signin-icon,
.community-icon-badge.profile-icon,
.community-icon-badge.admin-icon {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

.community-card strong {
	color: #0f172a;
	font-family: var(--font-heading);
	font-size: 0.8rem !important;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap !important;
}

@media (max-width: 1100px) {
	.member-strip {
		align-items: stretch !important;
		flex-direction: column !important;
		min-width: 0;
	}

	.member-strip-copy {
		align-items: flex-start !important;
		flex-wrap: wrap;
		min-width: 0;
		width: 100%;
	}

	.community-subtext {
		white-space: normal !important;
	}

	.community-grid {
		justify-content: flex-start !important;
		max-width: 100%;
		min-width: 0;
		overflow-x: auto !important;
		overscroll-behavior-x: contain;
		padding: 2px 2px 8px !important;
		scroll-snap-type: x proximity;
		width: 100% !important;
	}

	.community-card {
		flex: 0 0 auto !important;
		min-width: 140px !important;
		scroll-snap-align: start;
	}
}

/* Hover effects for minimal liquid glass community pills */
.community-card:hover {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 100%) !important;
	transform: translateY(-3px) scale(1.02);
	box-shadow: inset 0 1.5px 1px #fff, 0 12px 28px rgba(16, 24, 40, 0.1) !important;
}

.community-card.coffee-card:hover {
	border-color: rgba(255, 221, 0, 0.6) !important;
}

.community-card.youtube-card:hover {
	border-color: rgba(255, 0, 0, 0.5) !important;
}

.community-card.instagram-card:hover {
	border-color: rgba(225, 48, 108, 0.5) !important;
}

.community-card.github-card:hover {
	border-color: rgba(15, 20, 25, 0.5) !important;
}

.community-card:hover .community-icon-badge {
	transform: scale(1.08);
}

@media (max-width: 900px) {
	.header-inner > * {
		min-width: 0;
	}

	.primary-nav {
		overflow: hidden !important;
	}

	.primary-nav .menu {
		max-width: 100%;
		overscroll-behavior-x: contain;
	}
}

@media (max-width: 520px) {
	.header-coffee-btn {
		display: none !important;
	}

	.header-inner {
		column-gap: 8px;
	}

	.header-actions {
		gap: 4px;
	}

	.header-link,
	.header-button {
		padding-inline: 9px;
	}
}

@media (max-width: 400px) {
	.brand {
		flex: 0 0 auto;
	}

	.brand-copy {
		display: none;
	}

	.brand-mark {
		height: 40px;
		width: 40px;
	}

	.community-card {
		min-width: 126px !important;
	}
}

/* --------------------------------------------------------------------------
   8. FINAL EXPERIENCE POLISH
   Restrained, late-cascade refinements for navigation, hero contrast,
   separated account/purchase dialogs, and the paid-course gate.
   -------------------------------------------------------------------------- */

/* Navigation: reserve the blue treatment for the exact current destination. */
.primary-nav .menu > li:not(.current-menu-item):not(.current_page_item) > a {
	color: #475569 !important;
}

.primary-nav .menu > li:not(.current-menu-item):not(.current_page_item) > a:hover,
.primary-nav .menu > li:not(.current-menu-item):not(.current_page_item) > a:focus-visible {
	background: rgba(255, 255, 255, .82) !important;
	border-color: rgba(203, 213, 225, .82) !important;
	color: #172033 !important;
}

.primary-nav .menu > li.current-menu-item > a,
.primary-nav .menu > li.current_page_item > a {
	background: #eaf1ff !important;
	border: 1px solid #c8d8ff !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 5px 14px rgba(37, 99, 235, .1);
	color: #1d4ed8 !important;
}

/* Keep the homepage copy above the decorative deck and restore code contrast. */
.hero-copy {
	color: #172033;
	position: relative;
	z-index: 3;
}

.hero-copy h1 {
	color: #0f172a;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.hero-lede {
	color: #3d4b61;
}

.sketch-card.code-card {
	background: linear-gradient(145deg, #10203d 0%, #123b5d 100%);
	border-color: rgba(147, 197, 253, .28);
}

.sketch-card.code-card code {
	color: #e0f2fe !important;
	text-shadow: 0 1px 10px rgba(56, 189, 248, .12);
}

.hero-sketch :where(.lesson-card, .quiz-card, .extra-card) {
	color: #172033;
}

/* A quieter rhythm and type scale keeps long pages feeling intentional. */
.section {
	padding-block: clamp(64px, 7vw, 88px);
}

.section-heading {
	margin-bottom: clamp(22px, 3vw, 30px);
}

.section-heading h2,
.article-section h2 {
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.08;
}

.courses-h2 {
	font-size: clamp(1.4rem, 2vw, 1.9rem);
	line-height: 1.15;
}

.course-archive-hero h1,
.articles-hero h1 {
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	line-height: 1.06;
}

.section-heading p:not(.eyebrow) {
	line-height: 1.65;
	max-width: 65ch;
}

@media (hover: hover) and (pointer: fine) {
	.course-card:hover {
		transform: translateY(-4px) scale(1.01) !important;
	}
}

/* Separated account and purchase dialogs share a premium shell, not content. */
#member-overlay .cb-auth-modal,
#paywall-overlay .cb-purchase-modal {
	border: 1px solid rgba(255, 255, 255, .88);
	box-shadow: 0 30px 90px rgba(8, 15, 30, .28), 0 8px 24px rgba(8, 15, 30, .12);
	overflow: auto;
}

#member-overlay .cb-auth-modal {
	max-width: 560px;
}

#paywall-overlay .cb-purchase-modal {
	max-width: 860px;
}

.cb-member-body.cb-auth-only,
.cb-member-body.cb-purchase-only {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.cb-auth-only .cb-auth-card {
	padding: 34px 40px 32px;
}

.cb-auth-only .cb-auth-tab.is-active {
	color: #1d4ed8;
}

.cb-purchase-only .cb-plan-panel {
	background:
		radial-gradient(circle at 100% 0, rgba(91, 109, 235, .13), transparent 34%),
		linear-gradient(155deg, #f8faff, #f1f5fb);
	border-left: 0;
	padding: 34px 38px 30px;
}

.cb-purchase-only .cb-plan-heading {
	max-width: 640px;
	padding-right: 42px;
}

.cb-purchase-only .cb-plan-heading h2 {
	color: #172033;
	font-size: clamp(1.55rem, 3vw, 2rem);
	letter-spacing: -.035em;
	line-height: 1.12;
	margin: 6px 0 8px;
}

.cb-purchase-only .cb-plan-heading p {
	font-size: .82rem;
	line-height: 1.55;
	margin-bottom: 18px;
}

.cb-purchase-only .cb-plan-option,
.cb-purchase-only .cb-free-plan,
.cb-purchase-only .cb-lifetime-row {
	border-color: #d7e1ee;
}

.cb-purchase-only .cb-plan-option.is-featured {
	border-color: #5f7ee6;
	box-shadow: 0 14px 34px rgba(49, 87, 213, .12);
}

.cb-purchase-only .cb-payment-preview {
	background: linear-gradient(145deg, #101c36, #14284b);
}

/* Course access card: show a useful preview, then a clear purchase decision. */
body.single-course .content-gate-wrapper {
	background: #fff;
	border: 1px solid #d9e4f1;
	border-radius: 20px;
	box-shadow: 0 18px 44px rgba(16, 24, 40, .08);
	isolation: isolate;
	margin-bottom: 0;
	min-height: 0;
	overflow: hidden;
}

body.single-course .content-gate-preview {
	background: #fff;
	color: #475569;
	filter: none !important;
	max-height: 170px !important;
	opacity: 1 !important;
	overflow: hidden;
	padding: 22px 24px 54px;
	pointer-events: auto;
	user-select: text;
	-webkit-mask-image: linear-gradient(#000 58%, transparent 100%);
	mask-image: linear-gradient(#000 58%, transparent 100%);
}

body.single-course .content-gate-preview p {
	font-size: .96rem;
	line-height: 1.72;
	margin: 0;
}

body.single-course .content-gate-overlay {
	align-items: flex-start;
	background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
	border-top: 1px solid #e2eaf4;
	inset: auto;
	justify-content: flex-start;
	padding: 24px !important;
	position: relative;
	text-align: left;
}

body.single-course .content-gate-eyebrow {
	background: #eaf1ff;
	border: 1px solid #c8d8ff;
	border-radius: 999px;
	color: #1d4ed8;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: 10px;
	padding: 5px 9px;
	text-transform: uppercase;
}

body.single-course .content-gate-overlay h3 {
	color: #172033;
	font-size: clamp(1.25rem, 2.4vw, 1.65rem);
	line-height: 1.18;
	margin: 0 0 8px;
}

body.single-course .content-gate-overlay > p {
	color: #59677b;
	font-size: .9rem;
	line-height: 1.58;
	margin: 0 0 16px;
	max-width: 620px;
}

body.single-course .content-gate-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

body.single-course .content-gate-benefits li {
	align-items: center;
	color: #40516a;
	display: inline-flex;
	font-size: .78rem;
	font-weight: 700;
	gap: 7px;
}

body.single-course .content-gate-benefits li::before {
	align-items: center;
	background: #e8f8f0;
	border-radius: 999px;
	color: #087a59;
	content: "✓";
	display: inline-flex;
	font-size: .66rem;
	height: 18px;
	justify-content: center;
	width: 18px;
}

body.single-course .content-gate-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}

body.single-course .content-gate-actions .button {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 11px;
	box-shadow: 0 9px 22px rgba(37, 99, 235, .22);
	font-size: .86rem;
	margin: 0;
	min-height: 44px;
	padding: 10px 16px;
}

body.single-course .content-gate-secondary {
	appearance: none;
	background: transparent;
	border: 0;
	color: #3157d5;
	cursor: pointer;
	font: inherit;
	font-size: .8rem;
	font-weight: 800;
	padding: 9px 2px;
	text-decoration: none;
}

body.single-course .content-gate-secondary:hover {
	color: #173a8a;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.single-course .course-sticky-card {
	border-color: #d7e2ef;
	border-radius: 18px;
	box-shadow: 0 20px 56px rgba(16, 24, 40, .16);
}

body.single-course .sticky-card-placeholder {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 20px 20px,
		linear-gradient(135deg, #122241, #1e4c85 58%, #0b6b57);
}

body.single-course .btn-enroll {
	border-radius: 11px;
	font-size: .95rem;
	min-height: 46px;
	padding: 12px 14px;
}

@media (max-width: 900px) {
	.header-inner-full {
		padding-inline: 16px;
	}

	.site-header.is-scrolled .primary-nav {
		max-width: calc(100vw - 24px);
		overflow: hidden !important;
	}

	.site-header.is-scrolled .primary-nav .menu {
		overflow-x: auto !important;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.hero {
		padding: 48px 0 42px;
	}

	.hero-grid {
		gap: 36px;
	}

	.hero-copy {
		max-width: 720px;
	}

	.hero-copy h1 {
		font-size: clamp(2.4rem, 7vw, 3.35rem);
		line-height: 1.02;
	}

	.section {
		padding-block: 60px;
	}
}

@media (min-width: 461px) and (max-width: 980px) {
	body.single-course .course-sticky-card {
		grid-template-columns: minmax(132px, .42fr) minmax(0, .58fr);
	}

	body.single-course .course-sticky-card .sticky-card-thumb {
		aspect-ratio: auto;
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.container {
		padding-inline: 16px;
	}

	.section {
		padding-block: 48px;
	}

	.section-heading {
		margin-bottom: 20px;
	}

	.section-heading h2,
	.article-section h2,
	.course-archive-hero h1,
	.articles-hero h1 {
		font-size: clamp(1.55rem, 7vw, 2rem);
		line-height: 1.12;
	}

	.courses-h2 {
		font-size: clamp(1.3rem, 6vw, 1.6rem);
	}

	.section-heading p:not(.eyebrow) {
		font-size: .94rem;
		line-height: 1.58;
	}

	.hero {
		padding: 34px 0 32px;
	}

	.hero-copy h1 {
		font-size: clamp(2.05rem, 9.5vw, 2.65rem);
		letter-spacing: -.045em;
		line-height: 1.04;
		margin-bottom: 16px;
	}

	.hero-lede {
		font-size: .95rem;
		line-height: 1.62;
	}

	.hero-actions {
		gap: 10px;
		margin: 22px 0 20px;
	}

	.learning-search {
		gap: 10px;
	}

	.hero-search-form {
		border-radius: 16px;
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 6px;
	}

	.hero-search-form input {
		font-size: .84rem;
		min-height: 42px;
		padding-inline: 8px;
	}

	.hero-search-form button {
		border-radius: 11px;
		font-size: .78rem;
		min-height: 42px;
		padding-inline: 14px;
	}

	.keyword-picker {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding: 2px 1px 5px;
		scrollbar-width: none;
	}

	.keyword-picker::-webkit-scrollbar {
		display: none;
	}

	.keyword-picker > * {
		flex: 0 0 auto;
	}

	.keyword-picker a {
		font-size: .72rem;
		padding: 6px 10px;
	}

	#member-overlay,
	#paywall-overlay {
		align-items: flex-end;
		padding: 0;
	}

	#member-overlay .cb-auth-modal,
	#paywall-overlay .cb-purchase-modal {
		border-bottom: 0;
		border-radius: 22px 22px 0 0;
		max-height: 94dvh;
		max-width: none;
		width: 100%;
	}

	.cb-auth-only .cb-auth-card {
		padding: 26px 18px 22px;
	}

	.cb-purchase-only .cb-plan-panel {
		padding: 26px 18px 24px;
	}

	.cb-purchase-only .cb-plan-heading h2 {
		font-size: 1.42rem;
		padding-right: 30px;
	}

	body.single-course .content-gate-wrapper {
		border-radius: 16px;
	}

	body.single-course .content-gate-preview {
		max-height: 145px !important;
		padding: 18px 18px 44px;
	}

	body.single-course .content-gate-preview p {
		font-size: .88rem;
		line-height: 1.62;
	}

	body.single-course .content-gate-overlay {
		padding: 20px 18px !important;
	}

	body.single-course .content-gate-overlay h3 {
		font-size: 1.25rem;
	}

	body.single-course .content-gate-overlay > p {
		font-size: .84rem;
		line-height: 1.52;
	}

	body.single-course .content-gate-benefits {
		gap: 8px 12px;
	}
}

@media (max-width: 480px) {
	.header-inner-full {
		padding-inline: 12px;
	}

	.header-inner {
		padding-top: 8px;
	}

	.brand-copy {
		display: none;
	}

	.brand-mark {
		height: 40px;
		width: 40px;
	}

	.header-actions {
		gap: 4px;
	}

	.header-link,
	.header-button {
		font-size: .72rem;
		padding-inline: 9px;
	}

	.hero-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.hero-actions .button {
		width: 100%;
	}

	.cb-purchase-only .cb-plan-list {
		grid-template-columns: 1fr;
	}

	body.single-course .content-gate-benefits {
		display: grid;
		grid-template-columns: 1fr;
	}

	body.single-course .content-gate-actions {
		align-items: stretch;
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}

	body.single-course .content-gate-actions .button,
	body.single-course .content-gate-secondary {
		justify-content: center;
		text-align: center;
		width: 100%;
	}
}

:where(.filter-pill, .syllabus-module-header, .ai-tutor-tab, .ai-tutor-close, .ai-tutor-toggle, .community-card):focus-visible {
	outline: 3px solid rgba(37, 99, 235, .38);
	outline-offset: 3px;
}

/* System Design Interview Lab: a public, editorial course preview. */
body.single-course .course-about-preview {
	background:
		linear-gradient(135deg, rgba(20, 184, 166, .08), transparent 50%),
		var(--paper);
	border-top: 4px solid var(--green);
}

body.single-course .course-about-preview h2 {
	font-size: clamp(1.5rem, 2.5vw, 2.15rem);
	line-height: 1.12;
	max-width: 760px;
}

body.single-course .course-about-preview > p:last-of-type {
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.68;
	max-width: 760px;
}

.cb-signup-benefits {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: -6px 0 18px;
	padding: 0;
}

.cb-signup-benefits li {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
	font-size: .68rem;
	font-weight: 800;
	padding: 8px 6px;
	text-align: center;
}



@media (max-width: 640px) {

	.cb-signup-benefits {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* --------------------------------------------------------------------------
   10. ENGINEER'S FIELD NOTEBOOK
   An editorial, tactile layer for long-scroll discovery. The restrained
   grids, paper tones, ink rules, and section changes add rhythm without
   replacing the existing CodesBlock components or navigation.
   -------------------------------------------------------------------------- */

:root {
	--cb-canvas: #f5f8fc;
	--cb-paper: #fffef9;
	--cb-paper-warm: #fbf7ea;
	--cb-paper-mint: #edf8f3;
	--cb-paper-blue: #edf3ff;
	--cb-ink-rule: rgba(29, 78, 216, .16);
	--cb-pencil-rule: rgba(71, 85, 105, .12);
	--cb-grid-blue: rgba(37, 99, 235, .055);
	--cb-grid-green: rgba(8, 122, 89, .055);
	--cb-paper-shadow: 8px 9px 0 rgba(23, 58, 138, .055), 0 20px 45px rgba(15, 23, 42, .07);
}

/* Give every page a quiet material base instead of a single empty wash. */
body:not(.wp-admin) {
	background-color: var(--cb-canvas);
	background-image:
		radial-gradient(circle at 8% 2%, rgba(24, 182, 216, .10), transparent 28rem),
		radial-gradient(circle at 92% 18%, rgba(19, 185, 129, .09), transparent 32rem),
		linear-gradient(rgba(23, 58, 138, .018) 1px, transparent 1px);
	background-size: auto, auto, 100% 32px;
}

/* Homepage: each major chapter gets its own surface and visual tempo. */
.learning-strip,
body.home .section.courses,
body.home .section.articles {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.learning-strip > .container,
body.home .section > .container {
	position: relative;
	z-index: 1;
}

.learning-strip {
	background-color: var(--cb-paper);
	background-image:
		linear-gradient(90deg, transparent 0 49px, rgba(244, 114, 182, .14) 49px 50px, transparent 50px),
		linear-gradient(rgba(23, 58, 138, .045) 1px, transparent 1px);
	background-size: 100% 100%, 100% 28px;
	box-shadow: inset 0 1px #fff, inset 0 -1px rgba(15, 23, 42, .08);
}

body.home .section.courses {
	background:
		radial-gradient(circle at 86% 16%, rgba(19, 185, 129, .13), transparent 25rem),
		linear-gradient(135deg, rgba(255, 255, 255, .76), rgba(237, 248, 243, .76));
	border-bottom: 1px solid rgba(8, 122, 89, .12);
}

body.home .section.courses::before,
.course-archive-section::before {
	background-image:
		linear-gradient(var(--cb-grid-green) 1px, transparent 1px),
		linear-gradient(90deg, var(--cb-grid-green) 1px, transparent 1px);
	background-size: 28px 28px;
	content: "";
	inset: 0;
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	opacity: .62;
	pointer-events: none;
	position: absolute;
}

body.home .section.articles {
	background:
		linear-gradient(90deg, transparent 0 8%, rgba(244, 114, 182, .11) 8% calc(8% + 1px), transparent calc(8% + 1px)),
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(71, 85, 105, .045) 31px 32px),
		var(--cb-paper-warm);
	border-bottom: 1px solid rgba(120, 98, 47, .14);
}

/* Editorial rules make headings feel like useful wayfinding landmarks. */
.section-heading,
.dashboard-intro {
	position: relative;
}

.section-heading::before,
.dashboard-intro::before {
	background: linear-gradient(90deg, var(--green), var(--blue) 58%, var(--amber));
	border-radius: 999px;
	content: "";
	display: block;
	height: 3px;
	margin-bottom: 14px;
	width: 54px;
}

.section-heading .eyebrow,
.dashboard-intro .eyebrow {
	letter-spacing: .1em;
}

body.home .course-card-inner.static,
body.home .post-card {
	box-shadow: var(--cb-paper-shadow);
}

body.home .post-card:nth-child(2) .post-image {
	filter: hue-rotate(18deg) saturate(.86);
}

body.home .post-card:nth-child(3) .post-image {
	filter: hue-rotate(-18deg) saturate(.88);
}

/* Course catalogue: a blueprint shelf followed by a warmer decision zone. */
.archive-main {
	background: var(--cb-canvas);
}

body.post-type-archive-course .course-archive-hero {
	background-image:
		linear-gradient(var(--cb-grid-blue) 1px, transparent 1px),
		linear-gradient(90deg, var(--cb-grid-blue) 1px, transparent 1px),
		radial-gradient(circle at 76% 24%, rgba(19, 185, 129, .14), transparent 24rem),
		linear-gradient(135deg, #eef4ff, #f8fbff 55%, #eaf8f5);
	background-size: 36px 36px, 36px 36px, auto, auto;
	border-bottom: 1px solid rgba(29, 78, 216, .12);
}

.course-archive-section {
	background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(237, 248, 243, .72));
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.course-archive-section > .container {
	position: relative;
	z-index: 1;
}

body.post-type-archive-course .course-archive-grid .course-card-v2 {
	box-shadow: 7px 8px 0 rgba(23, 58, 138, .07), 0 18px 40px rgba(15, 23, 42, .08);
}

.course-pricing-section {
	background:
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(120, 98, 47, .05) 31px 32px),
		linear-gradient(135deg, #fffef8, #faf3dd) !important;
	border-block: 1px solid rgba(120, 98, 47, .15);
}

/* Article dashboard: more like a curated technical desk than a card dump. */
.articles-dashboard-page {
	background:
		radial-gradient(circle at 8% 5%, rgba(19, 185, 129, .14), transparent 25rem),
		radial-gradient(circle at 88% 22%, rgba(37, 99, 235, .12), transparent 28rem),
		linear-gradient(var(--cb-grid-blue) 1px, transparent 1px),
		linear-gradient(90deg, var(--cb-grid-blue) 1px, transparent 1px),
		#f4f8fc;
	background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

.dashboard-blog-shell {
	border-bottom: 1px solid rgba(29, 78, 216, .12);
}

.dashboard-category-bar,
.recommendations-card,
.bento-card {
	box-shadow: 7px 8px 0 rgba(23, 58, 138, .055), 0 18px 38px rgba(15, 23, 42, .07);
}

/* Long-form reading: lined paper, a clear reading column, and useful margins. */
.article-reading-page {
	background:
		radial-gradient(circle at 8% 5%, rgba(19, 185, 129, .09), transparent 24rem),
		radial-gradient(circle at 92% 18%, rgba(37, 99, 235, .09), transparent 27rem),
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(71, 85, 105, .035) 31px 32px),
		#f7f8f5;
}

.article-reading-header {
	background:
		linear-gradient(90deg, transparent 0 14%, rgba(244, 114, 182, .12) 14% calc(14% + 1px), transparent calc(14% + 1px)),
		linear-gradient(var(--cb-grid-blue) 1px, transparent 1px),
		linear-gradient(90deg, var(--cb-grid-blue) 1px, transparent 1px),
		linear-gradient(135deg, #fffef9, #f3f7ff 62%, #edf8f3);
	background-size: auto, 36px 36px, 36px 36px, auto;
	border-bottom: 1px solid rgba(29, 78, 216, .13);
	box-shadow: inset 0 -8px 0 rgba(29, 78, 216, .025);
}

.article-reading-header .article-title-wrap {
	position: relative;
}

.article-reading-header .article-title-wrap::before {
	background: linear-gradient(90deg, var(--green), var(--blue), var(--amber));
	border-radius: 999px;
	content: "";
	display: block;
	height: 4px;
	margin-bottom: 18px;
	width: 72px;
}

.article-reading-layout {
	grid-template-columns: 230px minmax(0, 760px) 250px;
	max-width: 1420px;
	padding-top: 30px;
}

.article-toc-panel {
	border-right: 0;
	padding-right: 0;
}

.article-side-card,
.article-recommend-panel .article-side-card {
	background: var(--cb-paper);
	border: 1px solid rgba(120, 98, 47, .2);
	border-radius: 10px;
	box-shadow: 5px 6px 0 rgba(120, 98, 47, .065);
	padding: 17px;
}

.article-toc-panel .article-side-card {
	border-top: 4px solid var(--green);
}

.article-recommend-panel .article-side-card:nth-child(odd) {
	border-top: 4px solid var(--blue);
}

.article-recommend-panel .article-side-card:nth-child(even) {
	border-top: 4px solid var(--amber);
}

.article-reading-layout .article-content {
	background:
		linear-gradient(90deg, transparent 0 42px, rgba(244, 114, 182, .10) 42px 43px, transparent 43px),
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(71, 85, 105, .035) 31px 32px),
		var(--cb-paper);
	border: 1px solid rgba(120, 98, 47, .18);
	border-radius: 10px;
	box-shadow: var(--cb-paper-shadow);
	padding: clamp(28px, 4vw, 48px) clamp(28px, 4.5vw, 54px);
}

.article-reading-layout .article-content :where(p, li) {
	max-width: 72ch;
}

.article-reading-layout .article-content h2 {
	border-bottom: 1px solid rgba(29, 78, 216, .14);
	padding-bottom: 10px;
	position: relative;
}

.article-reading-layout .article-content h2::before {
	background: var(--green);
	box-shadow: 7px 0 0 rgba(37, 99, 235, .28);
	content: "";
	display: inline-block;
	height: 9px;
	margin-right: 14px;
	transform: translateY(-2px);
	width: 9px;
}

.article-reading-page .comments-area {
	background:
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(71, 85, 105, .035) 31px 32px),
		var(--cb-paper-warm);
	border-top: 1px solid rgba(120, 98, 47, .15);
}

/* Course detail: preserve the strong hero and make the chapters below tactile. */
.single-course-wrap {
	background:
		radial-gradient(circle at 92% 22%, rgba(19, 185, 129, .10), transparent 25rem),
		linear-gradient(var(--cb-grid-blue) 1px, transparent 1px),
		linear-gradient(90deg, var(--cb-grid-blue) 1px, transparent 1px),
		#f3f7fb;
	background-size: auto, 40px 40px, 40px 40px, auto;
}

body.single-course .course-hero-banner {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

body.single-course .course-hero-banner::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 32px 32px;
	content: "";
	inset: 0;
	mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
	pointer-events: none;
	position: absolute;
}

body.single-course .course-hero-banner > .container {
	position: relative;
	z-index: 1;
}

/* Shared detail-page context trail: quiet enough for reading, clear enough for a quick return. */
.cb-breadcrumbs {
	color: rgba(229, 239, 255, .72);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .015em;
	margin: 0 0 22px;
}

.cb-breadcrumbs ol {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 9px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cb-breadcrumbs li {
	align-items: center;
	display: inline-flex;
	gap: 9px;
	max-width: 100%;
}

.cb-breadcrumbs li + li::before {
	color: currentColor;
	content: '/';
	opacity: .45;
}

.cb-breadcrumbs a {
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.cb-breadcrumbs a:hover,
.cb-breadcrumbs a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.cb-breadcrumbs [aria-current='page'] {
	color: #fff;
	font-weight: 600;
	min-width: 0;
}

.cb-breadcrumbs [aria-current='page'] span {
	overflow-wrap: anywhere;
}

.article-reading-header .cb-breadcrumbs {
	color: #66788f;
	margin-bottom: 16px;
}

.article-reading-header .cb-breadcrumbs a:hover,
.article-reading-header .cb-breadcrumbs a:focus-visible,
.article-reading-header .cb-breadcrumbs [aria-current='page'] {
	color: #1d4ed8;
}

.article-header:not(.article-reading-header) .cb-breadcrumbs {
	color: #66788f;
}

.article-header:not(.article-reading-header) .cb-breadcrumbs a:hover,
.article-header:not(.article-reading-header) .cb-breadcrumbs a:focus-visible,
.article-header:not(.article-reading-header) .cb-breadcrumbs [aria-current='page'] {
	color: #1d4ed8;
}

@media (max-width: 640px) {
	.cb-breadcrumbs {
		font-size: .7rem;
		margin-bottom: 16px;
	}

	.cb-breadcrumbs ol,
	.cb-breadcrumbs li {
		gap: 5px;
	}
}

body.single-course .course-layout {
	position: relative;
}

body.single-course .course-section {
	background:
		linear-gradient(90deg, rgba(37, 99, 235, .035), transparent 34%),
		var(--cb-paper);
	border-color: rgba(120, 98, 47, .18);
	border-radius: 12px;
	box-shadow: 7px 8px 0 rgba(23, 58, 138, .055), 0 16px 34px rgba(15, 23, 42, .06);
	position: relative;
}

body.single-course .course-section::before {
	background: linear-gradient(180deg, var(--blue), var(--green));
	border-radius: 12px 0 0 12px;
	content: "";
	inset: 0 auto 0 0;
	opacity: .78;
	position: absolute;
	width: 4px;
}

@media (max-width: 1180px) {
	.article-reading-layout {
		grid-template-columns: minmax(0, 760px) 250px;
	}
}

@media (max-width: 900px) {
	.article-reading-layout {
		grid-template-columns: minmax(0, 760px);
	}
}

@media (max-width: 640px) {
	body:not(.wp-admin) {
		background-size: auto, auto, 100% 28px;
	}

	.learning-strip {
		background-image: linear-gradient(rgba(23, 58, 138, .045) 1px, transparent 1px);
		background-size: 100% 26px;
	}

	body.home .section.articles {
		background:
			repeating-linear-gradient(0deg, transparent 0 27px, rgba(71, 85, 105, .04) 27px 28px),
			var(--cb-paper-warm);
	}

	.article-reading-layout {
		padding-top: 18px;
	}

	.article-reading-layout .article-content {
		background:
			repeating-linear-gradient(0deg, transparent 0 29px, rgba(71, 85, 105, .035) 29px 30px),
			var(--cb-paper);
		border-radius: 8px;
		box-shadow: 4px 5px 0 rgba(23, 58, 138, .05);
		padding: 25px 20px;
	}

	.article-reading-layout .article-content h2::before {
		margin-right: 9px;
	}

	body.single-course .course-section {
		border-radius: 10px;
		box-shadow: 4px 5px 0 rgba(23, 58, 138, .05);
	}
}

/* --------------------------------------------------------------------------
   11. BOLD EDITORIAL OVERRIDE
   Technical-manual colour blocking, strong ink edges, and print-like offset
   shadows. This deliberately moves beyond the earlier quiet notebook layer.
   -------------------------------------------------------------------------- */

/* Retained for reference, but intentionally disabled after visual review. */
@media (max-width: 0px) {
:root {
	--cb-bold-ink: #0c1830;
	--cb-bold-cobalt: #2855d9;
	--cb-bold-mint: #78dfb4;
	--cb-bold-amber: #f3ca52;
	--cb-bold-coral: #f17870;
	--cb-bold-cream: #fff9e7;
	--cb-bold-line: 2px solid var(--cb-bold-ink);
	--cb-bold-shadow: 9px 10px 0 var(--cb-bold-ink);
}

/* The first fold remains familiar, but now lands with a firmer edge. */
body.home .hero {
	border-bottom: 5px solid var(--cb-bold-ink);
	box-shadow: inset 0 -12px 0 rgba(40, 85, 217, .08);
}

body.home .hero-copy h1 {
	letter-spacing: -.065em;
}

body.home .hero-actions .button-primary,
body.home .hero-search-form button {
	box-shadow: 5px 6px 0 var(--cb-bold-ink);
}

body.home .hero-actions .button-primary:hover,
body.home .hero-search-form button:hover {
	box-shadow: 2px 3px 0 var(--cb-bold-ink);
	transform: translate(3px, 3px);
}

/* A dark contents strip creates an unmistakable start to the journey. */
body.home .learning-strip {
	background:
		linear-gradient(rgba(120, 223, 180, .1) 1px, transparent 1px),
		var(--cb-bold-ink);
	background-size: 100% 28px, auto;
	border-bottom: 5px solid var(--cb-bold-cobalt);
	color: #fff;
}

body.home .learning-strip .strip-item {
	border-color: rgba(255, 255, 255, .2);
	color: #fff;
	padding-block: 24px;
}

body.home .learning-strip .strip-item:hover,
body.home .learning-strip .strip-item:focus-within {
	background: var(--cb-bold-cobalt);
}

body.home .learning-strip .strip-item h2 {
	color: #fff;
}

body.home .learning-strip .strip-item p {
	color: #cbd7ea;
}

body.home .learning-strip .strip-item:nth-child(1) > span {
	color: var(--cb-bold-mint);
}

body.home .learning-strip .strip-item:nth-child(2) > span {
	color: var(--cb-bold-amber);
}

body.home .learning-strip .strip-item:nth-child(3) > span {
	color: var(--cb-bold-coral);
}

/* Courses become a deep blueprint room with a physical paper workbench. */
body.home .section.courses {
	background:
		linear-gradient(rgba(120, 223, 180, .09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 223, 180, .09) 1px, transparent 1px),
		var(--cb-bold-ink);
	background-size: 34px 34px, 34px 34px, auto;
	border-bottom: 8px solid var(--cb-bold-mint);
	color: #fff;
}

body.home .section.courses::before {
	display: none;
}

body.home .courses .eyebrow {
	background: var(--cb-bold-mint);
	border: 2px solid #fff;
	box-shadow: 4px 4px 0 var(--cb-bold-cobalt);
	color: var(--cb-bold-ink);
}

body.home .courses :where(.courses-h2, .courses-subhead) {
	color: #fff;
}

body.home .courses .courses-subhead {
	color: #c8d5ea;
}

body.home .courses .courses-subhead strong {
	color: var(--cb-bold-mint);
}

body.home .courses .explore-courses-btn {
	background: var(--cb-bold-amber);
	border: 2px solid #fff;
	box-shadow: 5px 6px 0 var(--cb-bold-cobalt);
	color: var(--cb-bold-ink);
}

body.home .courses-workspace {
	gap: 28px;
}

body.home .course-desk {
	background:
		linear-gradient(rgba(40, 85, 217, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(40, 85, 217, .08) 1px, transparent 1px),
		var(--cb-bold-cream);
	background-size: 28px 28px, 28px 28px, auto;
	border: var(--cb-bold-line);
	box-shadow: var(--cb-bold-shadow);
}

body.home .course-card-inner.static,
body.home .courses .side-card {
	background: #fff;
	border: var(--cb-bold-line);
	border-radius: 8px;
	box-shadow: 6px 7px 0 rgba(12, 24, 48, .22);
}

body.home .course-card:nth-child(2) .course-card-inner.static {
	background: #effcf7;
}

body.home .course-card:nth-child(3) .course-card-inner.static {
	background: #fff4c9;
}

body.home .course-card:nth-child(4) .course-card-inner.static {
	background: #eef3ff;
}

body.home .course-card:nth-child(5) .course-card-inner.static {
	background: #ffefed;
}

body.home .courses .course-card :where(h3, .card-desc, .course-meta, .card-enrolled) {
	color: var(--cb-bold-ink);
}

body.home .courses .course-card .card-desc,
body.home .courses .course-card .card-enrolled {
	color: #526078;
}

body.home .course-card:hover .course-card-inner.static,
body.home .courses .side-card:hover {
	box-shadow: 3px 4px 0 rgba(12, 24, 48, .28);
	transform: translate(3px, 3px);
}

/* The writing shelf gets a saturated magazine-cover treatment. */
body.home .section.articles {
	background:
		linear-gradient(rgba(12, 24, 48, .11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(12, 24, 48, .11) 1px, transparent 1px),
		var(--cb-bold-amber);
	background-size: 36px 36px, 36px 36px, auto;
	border-bottom: 8px solid var(--cb-bold-coral);
}

body.home .articles .eyebrow {
	background: var(--cb-bold-coral);
	border: 2px solid var(--cb-bold-ink);
	box-shadow: 4px 4px 0 var(--cb-bold-ink);
	color: var(--cb-bold-ink);
}

body.home .articles .post-card {
	background: #fff;
	border: var(--cb-bold-line);
	border-radius: 7px;
	box-shadow: var(--cb-bold-shadow);
}

body.home .articles .post-card:nth-child(1) .post-card-media {
	background: var(--cb-bold-cobalt) !important;
	filter: none;
}

body.home .articles .post-card:nth-child(2) .post-card-media {
	background: var(--cb-bold-coral) !important;
	filter: none;
}

body.home .articles .post-card:nth-child(3) .post-card-media {
	background: var(--cb-bold-ink) !important;
	filter: none;
}

/* Course catalogue: dark blueprint masthead, mint shelf, ink-edged cards. */
body.post-type-archive-course .course-archive-hero {
	background:
		linear-gradient(rgba(120, 223, 180, .11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 223, 180, .11) 1px, transparent 1px),
		radial-gradient(circle at 78% 24%, rgba(40, 85, 217, .74), transparent 31rem),
		var(--cb-bold-ink);
	background-size: 34px 34px, 34px 34px, auto, auto;
	border-bottom: 8px solid var(--cb-bold-mint);
}

body.post-type-archive-course .course-archive-hero :where(h1, p) {
	color: #fff;
}

body.post-type-archive-course .course-archive-hero > .container > .eyebrow {
	background: var(--cb-bold-mint);
	border: 2px solid #fff;
	box-shadow: 5px 5px 0 var(--cb-bold-cobalt);
	color: var(--cb-bold-ink);
}

body.post-type-archive-course .course-archive-proof span,
body.post-type-archive-course .filter-pill {
	background: var(--cb-bold-cream);
	border: var(--cb-bold-line);
	box-shadow: 3px 4px 0 rgba(255, 255, 255, .24);
	color: var(--cb-bold-ink);
}

body.post-type-archive-course .filter-pill.is-active {
	background: var(--cb-bold-amber);
	box-shadow: 4px 5px 0 var(--cb-bold-cobalt);
}

body.post-type-archive-course .course-archive-section {
	background:
		linear-gradient(rgba(12, 24, 48, .1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(12, 24, 48, .1) 1px, transparent 1px),
		var(--cb-bold-mint);
	background-size: 38px 38px, 38px 38px, auto;
	border-bottom: 8px solid var(--cb-bold-ink);
}

body.post-type-archive-course .course-archive-section::before {
	display: none;
}

body.post-type-archive-course .course-archive-grid .course-card-v2 {
	border: var(--cb-bold-line);
	border-radius: 8px;
	box-shadow: var(--cb-bold-shadow);
}

body.post-type-archive-course .course-archive-grid .course-card-v2:hover {
	box-shadow: 4px 5px 0 var(--cb-bold-ink);
	transform: translate(4px, 5px);
}

body.post-type-archive-course .course-thumb-placeholder {
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

body.post-type-archive-course .course-pricing-section {
	background:
		linear-gradient(rgba(12, 24, 48, .09) 1px, transparent 1px),
		var(--cb-bold-amber) !important;
	background-size: 100% 32px, auto !important;
	border-block: 6px solid var(--cb-bold-ink);
}

/* Article dashboard: a real dark control room with printed content cards. */
.articles-dashboard-page {
	background: var(--cb-bold-ink);
}

.articles-dashboard-page .dashboard-blog-shell {
	background:
		linear-gradient(rgba(120, 223, 180, .09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 223, 180, .09) 1px, transparent 1px),
		var(--cb-bold-ink);
	background-size: 36px 36px, 36px 36px, auto;
	border-bottom: 8px solid var(--cb-bold-mint);
}

.articles-dashboard-page .dashboard-intro h1 {
	color: #fff;
}

.articles-dashboard-page .dashboard-intro p:not(.eyebrow) {
	color: #c8d5ea;
}

.articles-dashboard-page .dashboard-intro .eyebrow {
	background: var(--cb-bold-mint);
	border: 2px solid #fff;
	box-shadow: 4px 4px 0 var(--cb-bold-cobalt);
	color: var(--cb-bold-ink);
}

.articles-dashboard-page .dashboard-search,
.articles-dashboard-page .dashboard-category-bar {
	background: #fff;
	border: var(--cb-bold-line);
	box-shadow: 7px 8px 0 var(--cb-bold-cobalt);
}

.articles-dashboard-page .dashboard-search input,
.articles-dashboard-page .dashboard-search input::placeholder,
.articles-dashboard-page .dashboard-category-bar a {
	color: var(--cb-bold-ink);
}

.articles-dashboard-page .dashboard-category-bar a.is-active,
.articles-dashboard-page .dashboard-category-bar a:hover {
	background: var(--cb-bold-amber);
	color: var(--cb-bold-ink);
}

.articles-dashboard-page .bento-card {
	background: var(--cb-bold-cream);
	border: var(--cb-bold-line);
	border-radius: 8px;
	box-shadow: var(--cb-bold-shadow);
}

.articles-dashboard-page .bento-card:hover {
	box-shadow: 4px 5px 0 var(--cb-bold-ink);
	transform: translate(5px, 5px);
}

.articles-dashboard-page .bento-card:nth-child(3n + 1) .bento-media {
	background: var(--cb-bold-mint);
}

.articles-dashboard-page .bento-card:nth-child(3n + 2) .bento-media {
	background: var(--cb-bold-amber);
}

.articles-dashboard-page .bento-card:nth-child(3n) .bento-media {
	background: var(--cb-bold-coral);
}

.articles-dashboard-page .recommendations-card {
	background: var(--cb-bold-mint);
	border: var(--cb-bold-line);
	border-radius: 8px;
	box-shadow: 7px 8px 0 var(--cb-bold-cobalt);
}

.articles-dashboard-page .recommendations-card.course-tab {
	background: var(--cb-bold-amber);
}

/* Long-form reading now opens like a strong technical handbook cover. */
.article-reading-page {
	background:
		linear-gradient(rgba(12, 24, 48, .075) 1px, transparent 1px),
		#e7deca;
	background-size: 100% 32px, auto;
}

.article-reading-page .article-reading-header {
	background:
		linear-gradient(rgba(120, 223, 180, .11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 223, 180, .11) 1px, transparent 1px),
		radial-gradient(circle at 82% 20%, rgba(40, 85, 217, .82), transparent 30rem),
		var(--cb-bold-ink);
	background-size: 36px 36px, 36px 36px, auto, auto;
	border-bottom: 8px solid var(--cb-bold-mint);
}

.article-reading-page .article-reading-header h1 {
	color: #fff;
	max-width: 19ch;
}

.article-reading-page .article-reading-header :where(.article-back, .article-meta, a) {
	color: var(--cb-bold-mint);
}

.article-reading-page .article-reading-header .cb-breadcrumbs {
	color: rgba(255, 255, 255, .7);
}

.article-reading-page .article-reading-header .cb-breadcrumbs a:hover,
.article-reading-page .article-reading-header .cb-breadcrumbs a:focus-visible,
.article-reading-page .article-reading-header .cb-breadcrumbs [aria-current='page'] {
	color: var(--cb-bold-mint);
}

.article-reading-page .article-reading-header .article-title-wrap::before {
	background: linear-gradient(90deg, var(--cb-bold-mint), var(--cb-bold-amber), var(--cb-bold-coral));
	height: 6px;
	width: 96px;
}

.article-reading-page .article-reading-layout .article-content {
	background:
		linear-gradient(90deg, transparent 0 42px, rgba(241, 120, 112, .22) 42px 44px, transparent 44px),
		repeating-linear-gradient(0deg, transparent 0 31px, rgba(12, 24, 48, .055) 31px 32px),
		var(--cb-bold-cream);
	border: var(--cb-bold-line);
	border-radius: 8px;
	box-shadow: var(--cb-bold-shadow);
}

.article-reading-page .article-side-card,
.article-reading-page .article-recommend-panel .article-side-card {
	border: var(--cb-bold-line);
	border-radius: 7px;
	box-shadow: 6px 7px 0 var(--cb-bold-ink);
}

.article-reading-page .article-toc-panel .article-side-card {
	background: var(--cb-bold-mint);
	border-top: var(--cb-bold-line);
}

.article-reading-page .article-recommend-panel .article-side-card:nth-child(odd) {
	background: #eef3ff;
	border-top: var(--cb-bold-line);
}

.article-reading-page .article-recommend-panel .article-side-card:nth-child(even) {
	background: var(--cb-bold-amber);
	border-top: var(--cb-bold-line);
}

.article-reading-page .article-reading-layout .article-content h2 {
	border-bottom: 3px solid var(--cb-bold-ink);
}

.article-reading-page .article-content :where(blockquote, pre, .wp-block-code) {
	background: var(--cb-bold-ink);
	border: 2px solid var(--cb-bold-cobalt);
	box-shadow: 5px 6px 0 var(--cb-bold-mint);
	color: #f7fbff;
}

/* Course pages keep their excellent panel, but the chapters now feel built. */
body.single-course .course-hero-banner {
	border-bottom: 8px solid var(--cb-bold-amber);
}

body.single-course .single-course-wrap {
	background:
		linear-gradient(rgba(12, 24, 48, .1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(12, 24, 48, .1) 1px, transparent 1px),
		var(--cb-bold-mint);
	background-size: 42px 42px, 42px 42px, auto;
}

body.single-course .course-section {
	background: var(--cb-bold-cream);
	border: var(--cb-bold-line);
	border-radius: 8px;
	box-shadow: var(--cb-bold-shadow);
}

body.single-course .course-section::before {
	background: var(--cb-bold-cobalt);
	border-radius: 0;
	opacity: 1;
	width: 8px;
}

body.single-course .course-sticky-card {
	border: var(--cb-bold-line);
	border-radius: 8px;
	box-shadow: var(--cb-bold-shadow);
}

body.single-course .btn-enroll {
	box-shadow: 5px 6px 0 var(--cb-bold-ink);
}

@media (max-width: 900px) {
	:root {
		--cb-bold-shadow: 6px 7px 0 var(--cb-bold-ink);
	}

	body.home .course-desk,
	body.home .articles .post-card,
	.articles-dashboard-page .bento-card,
	.article-reading-page .article-reading-layout .article-content,
	body.single-course .course-section,
	body.single-course .course-sticky-card {
		box-shadow: var(--cb-bold-shadow);
	}
}

@media (max-width: 640px) {
	body.home .learning-strip .strip-item {
		padding-block: 18px;
	}

	body.home .section.courses,
	body.home .section.articles,
	body.post-type-archive-course .course-archive-section,
	.articles-dashboard-page .dashboard-blog-shell,
	body.single-course .single-course-wrap {
		background-size: 28px 28px, 28px 28px, auto;
	}

	body.home .course-desk,
	body.home .course-card-inner.static,
	body.home .courses .side-card,
	body.home .articles .post-card,
	body.post-type-archive-course .course-archive-grid .course-card-v2,
	.articles-dashboard-page .bento-card,
	.articles-dashboard-page .recommendations-card,
	.article-reading-page .article-side-card,
	.article-reading-page .article-reading-layout .article-content,
	body.single-course .course-section,
	body.single-course .course-sticky-card {
		box-shadow: 4px 5px 0 var(--cb-bold-ink);
	}

	.article-reading-page .article-reading-layout .article-content {
		background:
			repeating-linear-gradient(0deg, transparent 0 29px, rgba(12, 24, 48, .05) 29px 30px),
			var(--cb-bold-cream);
	}
}
}

/* --------------------------------------------------------------------------
   12. QUIET GEOMETRY
   Softer visual interest through curves, orbital lines, and partial shapes.
   These accents sit behind content and preserve the restrained colour system.
   -------------------------------------------------------------------------- */

:root {
	--cb-shape-blue: rgba(37, 99, 235, .16);
	--cb-shape-green: rgba(19, 185, 129, .16);
	--cb-shape-amber: rgba(248, 189, 59, .2);
	--cb-shape-pink: rgba(244, 114, 182, .15);
}

/* Hero orbit: a soft hand-drawn target behind the existing course panel. */
body.home .hero {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

body.home .hero::before,
body.home .hero::after {
	border-radius: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
}

body.home .hero::before {
	border: 2px solid var(--cb-shape-blue);
	height: clamp(360px, 42vw, 680px);
	right: clamp(-260px, -12vw, -110px);
	top: clamp(-250px, -14vw, -110px);
	width: clamp(360px, 42vw, 680px);
	z-index: -1;
}

body.home .hero::after {
	border: 1px dashed var(--cb-shape-green);
	height: clamp(280px, 34vw, 540px);
	right: clamp(-180px, -7vw, -60px);
	top: clamp(-160px, -8vw, -55px);
	transform: rotate(-12deg);
	width: clamp(380px, 46vw, 720px);
	z-index: -1;
}

/* Section headings carry a short curved signal rather than heavier blocks. */
.section-heading,
.section-heading-split-cta,
.dashboard-intro {
	position: relative;
}

.section-heading::after,
.section-heading-split-cta::after,
.dashboard-intro::after {
	border-top: 2px solid var(--cb-shape-blue);
	border-radius: 50%;
	content: "";
	height: 28px;
	pointer-events: none;
	position: absolute;
	right: 2%;
	top: 8px;
	transform: rotate(-5deg);
	width: clamp(70px, 10vw, 140px);
}

/* Courses: one open orbital curve and two quiet calibration dots. */
body.home .section.courses::after {
	border: 2px solid var(--cb-shape-green);
	border-left-color: transparent;
	border-radius: 50%;
	content: "";
	height: 430px;
	pointer-events: none;
	position: absolute;
	right: -245px;
	top: 96px;
	transform: rotate(18deg);
	width: 430px;
}

body.home .course-desk {
	position: relative;
}

body.home .course-desk::before,
body.home .course-desk::after {
	border-radius: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

body.home .course-desk::before {
	background: var(--cb-shape-amber);
	height: 92px;
	right: 9%;
	top: 7%;
	width: 92px;
}

body.home .course-desk::after {
	border: 2px dashed var(--cb-shape-blue);
	bottom: 7%;
	height: 120px;
	left: 8%;
	width: 120px;
}

body.home .course-desk > * {
	position: relative;
	z-index: 1;
}

/* Articles: a soft double-loop frames the cards without recolouring them. */
body.home .section.articles::after {
	border: 2px solid var(--cb-shape-pink);
	border-right-color: transparent;
	border-radius: 50%;
	content: "";
	height: 360px;
	pointer-events: none;
	position: absolute;
	right: -185px;
	top: 35px;
	transform: rotate(-18deg);
	width: 500px;
}

body.home .post-card {
	position: relative;
}

body.home .post-card::after {
	background: currentColor;
	border-radius: 999px;
	content: "";
	height: 3px;
	bottom: 14px;
	left: 18px;
	opacity: .18;
	pointer-events: none;
	position: absolute;
	width: 42px;
}

/* Article dashboard receives two large, low-contrast orbital outlines. */
.articles-dashboard-page .dashboard-blog-shell {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.articles-dashboard-page .dashboard-blog-shell::before,
.articles-dashboard-page .dashboard-blog-shell::after {
	border-radius: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
}

.articles-dashboard-page .dashboard-blog-shell::before {
	border: 2px solid var(--cb-shape-green);
	height: 480px;
	right: -260px;
	top: -190px;
	width: 620px;
}

.articles-dashboard-page .dashboard-blog-shell::after {
	border: 1px dashed var(--cb-shape-blue);
	bottom: -220px;
	height: 470px;
	left: -260px;
	transform: rotate(12deg);
	width: 620px;
}

.articles-dashboard-page .dashboard-blog-shell > .container {
	position: relative;
	z-index: 1;
}

/* Reading pages: one calm orbital shape in the masthead and margin curves. */
.article-reading-page .article-reading-header {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.article-reading-page .article-reading-header::after {
	border: 2px solid var(--cb-shape-blue);
	border-left-color: var(--cb-shape-green);
	border-radius: 50%;
	content: "";
	height: 380px;
	pointer-events: none;
	position: absolute;
	right: -150px;
	top: -210px;
	transform: rotate(-16deg);
	width: 560px;
	z-index: 0;
}

.article-reading-page .article-reading-header > .container {
	position: relative;
	z-index: 1;
}

.article-reading-page .article-reading-layout .article-content {
	position: relative;
}

.article-reading-page .article-reading-layout .article-content::after {
	border-bottom: 2px solid var(--cb-shape-green);
	border-radius: 50%;
	content: "";
	height: 38px;
	pointer-events: none;
	position: absolute;
	right: 34px;
	top: 24px;
	transform: rotate(-8deg);
	width: 96px;
}

/* Course archive and course chapters share the same gentle orbital language. */
body.post-type-archive-course .course-archive-hero {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

body.post-type-archive-course .course-archive-hero::after {
	border: 2px solid var(--cb-shape-green);
	border-bottom-color: transparent;
	border-radius: 50%;
	content: "";
	height: 480px;
	pointer-events: none;
	position: absolute;
	right: -220px;
	top: -210px;
	transform: rotate(24deg);
	width: 620px;
}

body.post-type-archive-course .course-archive-hero > .container {
	position: relative;
	z-index: 1;
}

body.post-type-archive-course .course-thumb-placeholder {
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .32);
}

body.single-course .course-section::after {
	border-top: 2px solid var(--cb-shape-blue);
	border-radius: 50%;
	content: "";
	height: 32px;
	pointer-events: none;
	position: absolute;
	right: 22px;
	top: 18px;
	transform: rotate(-9deg);
	width: 82px;
}

@media (max-width: 900px) {
	.section-heading::after,
	.section-heading-split-cta::after,
	.dashboard-intro::after {
		right: 0;
		width: 76px;
	}

	body.home .section.courses::after,
	body.home .section.articles::after {
		opacity: .68;
	}
}

@media (max-width: 640px) {
	body.home .hero::before {
		height: 300px;
		right: -205px;
		top: -135px;
		width: 300px;
	}

	body.home .hero::after,
	.section-heading::after,
	.section-heading-split-cta::after,
	.dashboard-intro::after,
	body.home .course-desk::before,
	body.home .course-desk::after,
	.article-reading-page .article-reading-header::after,
	.article-reading-page .article-reading-layout .article-content::after,
	body.single-course .course-section::after {
		display: none;
	}

	body.home .section.courses::after,
	body.home .section.articles::after,
	.articles-dashboard-page .dashboard-blog-shell::before,
	.articles-dashboard-page .dashboard-blog-shell::after,
	.article-reading-page .article-reading-header::after,
	body.post-type-archive-course .course-archive-hero::after {
		opacity: .42;
	}
}

/* --------------------------------------------------------------------------
   13. LONG-PAGE WAYFINDING AND CONTENT CLARITY
   Compact headings, complete recommendation visuals, and subtle cues that
   make the page easier to scan without turning it into an animated showcase.
   -------------------------------------------------------------------------- */

.cb-scroll-progress {
	background: linear-gradient(90deg, var(--green), var(--blue) 58%, var(--amber));
	height: 3px;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	transform: scaleX(0);
	transform-origin: left center;
	width: 100%;
	z-index: 10020;
}
body.home .articles .section-heading h2,
body.home .cta h2 {
	font-size: clamp(2rem, 3vw, 2.65rem);
	letter-spacing: -.035em;
	line-height: 1.08;
}

body.home .course-desk::before {
	align-items: center;
	color: #7b5b00;
	content: "PICK YOUR PATH";
	display: flex;
	font-size: .62rem;
	font-weight: 850;
	justify-content: center;
	letter-spacing: .08em;
	line-height: 1.2;
	padding: 14px;
	text-align: center;
}

body.home .side-card-list {
	display: grid;
	gap: 9px;
}

body.home .side-card-link {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: 54px minmax(0, 1fr);
	padding: 9px;
}

body.home .side-card-thumb {
	background: #eaf1ff;
	border: 1px solid rgba(29, 78, 216, .15);
	border-radius: 9px;
	display: block;
	height: 54px;
	overflow: hidden;
	width: 54px;
}

body.home .side-card-thumb-course {
	background: #e8f8f0;
	border-color: rgba(8, 122, 89, .16);
}

body.home .side-card-thumb img,
body.home .side-card-thumb-fallback {
	height: 100%;
	width: 100%;
}

body.home .side-card-thumb img {
	display: block;
	object-fit: cover;
}

body.home .side-card-thumb-fallback {
	align-items: center;
	background:
		linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px),
		linear-gradient(145deg, #315ed4, #173a8a);
	background-size: 10px 10px, 10px 10px, auto;
	color: #fff;
	display: flex;
	font-size: .86rem;
	font-weight: 900;
	justify-content: center;
	letter-spacing: .04em;
}

body.home .side-card-thumb-course .side-card-thumb-fallback {
	background:
		linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px),
		linear-gradient(145deg, #13936d, #075e54);
	background-size: 10px 10px, 10px 10px, auto;
}

body.home .side-card-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

body.home .side-card-copy small,
body.home .side-card-copy strong {
	display: block;
}

.course-jump-nav {
	align-items: center;
	backdrop-filter: blur(14px);
	background: rgba(255, 254, 249, .9);
	border: 1px solid rgba(29, 78, 216, .15);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
	display: flex;
	gap: 18px;
	justify-content: space-between;
	margin-top: 24px;
	padding: 10px 12px 10px 16px;
	position: sticky;
	top: 78px;
	z-index: 30;
}

.course-jump-nav > span {
	color: var(--muted);
	font-size: .68rem;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.course-jump-nav > div {
	align-items: center;
	display: flex;
	gap: 5px;
}

.course-jump-nav a {
	border-radius: 999px;
	color: var(--ink);
	font-size: .76rem;
	font-weight: 750;
	padding: 7px 10px;
	text-decoration: none;
}

.course-jump-nav a:hover,
.course-jump-nav a:focus-visible {
	background: #eaf1ff;
	color: var(--blue);
}

body.single-course .course-access-section {
	background: linear-gradient(145deg, #fffef9, #eef4ff);
}

body.single-course .content-gate-wrapper-compact {
	box-shadow: none;
}

body.single-course .content-gate-overlay-static {
	min-height: 0;
}

body.single-course .course-utility-card h2 {
	font-size: 1.15rem;
	line-height: 1.2;
	margin-bottom: 14px;
}

body.single-course .course-browse-link {
	justify-content: center;
	width: 100%;
}

body.single-course .course-share-label {
	border-top: 1px solid var(--line);
	display: block;
	font-size: .72rem;
	letter-spacing: .04em;
	margin-top: 18px;
	padding-top: 16px;
	text-transform: uppercase;
}

body.single-course .course-share-links {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 1fr;
	margin-top: 10px;
}

body.single-course .course-share-links .btn-view-course {
	font-size: .76rem;
	padding: 9px;
	text-align: center;
}

body.single-course .course-share-linkedin {
	background: #0a66c2;
}

.cb-motion-ready .cb-reveal-item {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.cb-motion-ready .cb-reveal-item.is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 980px) {
	.course-jump-nav {
		position: relative;
		top: auto;
	}
}

@media (max-width: 640px) {
	body.home .course-desk::before {
		display: none;
	}
	body.home .articles .section-heading h2,
	body.home .cta h2 {
		font-size: clamp(1.65rem, 7.5vw, 2rem);
		line-height: 1.12;
	}

	body.home .side-card-link {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	body.home .side-card-thumb {
		height: 48px;
		width: 48px;
	}

	.course-jump-nav {
		align-items: flex-start;
		display: grid;
		gap: 7px;
		margin-inline: -2px;
		overflow: hidden;
	}

	.course-jump-nav > div {
		overflow-x: auto;
		scrollbar-width: none;
		width: 100%;
	}

	.course-jump-nav > div::-webkit-scrollbar {
		display: none;
	}

	.course-jump-nav a {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cb-motion-ready .cb-reveal-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* A single footer finish: community stays a compact social strip above it. */
.site-footer .footer-contact-card {
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(178, 205, 227, .2);
	border-radius: 16px;
	padding: 24px;
}

.site-footer .footer-contact-card .footer-kicker {
	color: #67e8c0;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.site-footer .footer-contact-card h2 {
	font-size: 1.1rem;
	line-height: 1.3;
	margin: 0 0 8px;
}

.site-footer .footer-contact-card > p:not(.footer-kicker) {
	color: #b7c4d7;
	font-size: .92rem;
	line-height: 1.55;
	margin: 0 0 18px;
}

.site-footer .footer-contact-button {
	align-items: center;
	background: #19c997;
	border-radius: 10px;
	color: #07281f;
	display: inline-flex;
	font-weight: 800;
	gap: 8px;
	padding: 11px 14px;
	text-decoration: none;
}

.site-footer .footer-contact-button:hover,
.site-footer .footer-contact-button:focus-visible {
	background: #5de2bd;
	color: #07281f;
}

@media (max-width: 760px) {
	.site-footer .footer-contact-card {
		padding: 20px;
	}
}

/* Course access uses the same bright, technical card language as the homepage. */
#paywall-overlay .cb-member-backdrop {
	background: rgba(15, 30, 58, .7);
}

#paywall-overlay .cb-purchase-modal {
	background: #f7fbff;
	border: 1px solid rgba(219, 231, 243, .96);
	border-radius: 24px;
	box-shadow: 0 32px 90px rgba(15, 30, 58, .24), 0 8px 24px rgba(15, 30, 58, .1);
	max-width: 960px;
	overflow: hidden;
}

#paywall-overlay .cb-member-close {
	background: rgba(255, 255, 255, .9);
	border: 1px solid #dbe7f3;
	color: #26364d;
}

.cb-purchase-only .cb-plan-panel {
	background:
		radial-gradient(circle at 92% 0, rgba(19, 185, 129, .14), transparent 24rem),
		radial-gradient(circle at 0 18%, rgba(37, 99, 235, .1), transparent 25rem),
		linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px),
		#f7fbff;
	background-size: auto, auto, 28px 28px, 28px 28px, auto;
	padding: 34px 38px 32px;
}

.cb-purchase-brand {
	align-items: center;
	color: #2f4059;
	display: flex;
	font-size: .72rem;
	font-weight: 800;
	gap: 9px;
	letter-spacing: .02em;
	margin: 0 48px 20px 0;
}

.cb-purchase-brand span {
	align-items: center;
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	border-radius: 10px;
	box-shadow: 0 7px 18px rgba(37, 99, 235, .2);
	color: #fff;
	display: inline-flex;
	font-size: .67rem;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.cb-purchase-only .cb-plan-heading {
	max-width: 700px;
}

.cb-purchase-only .cb-plan-heading > span {
	background: rgba(255, 255, 255, .76);
	border: 1px solid #cbdcff;
	border-radius: 999px;
	color: #1d4ed8;
	display: inline-flex;
	font-size: .64rem;
	letter-spacing: .09em;
	padding: 5px 9px;
}

.cb-purchase-only .cb-plan-heading h2 {
	color: #0f172a;
	font-size: clamp(1.85rem, 4vw, 2.6rem);
	letter-spacing: -.045em;
	line-height: 1.04;
	margin: 10px 0 9px;
}

.cb-purchase-only .cb-plan-heading p {
	color: #536278;
	font-size: .88rem;
	line-height: 1.6;
	margin-bottom: 22px;
	max-width: 66ch;
}

.cb-purchase-only .cb-free-plan,
.cb-purchase-only .cb-plan-option,
.cb-purchase-only .cb-lifetime-row {
	background: rgba(255, 255, 255, .9);
	border-color: #d7e3ef;
	box-shadow: 0 10px 26px rgba(32, 59, 94, .055);
}

.cb-purchase-only .cb-free-plan {
	border-left: 3px solid #13b981;
	padding: 14px 16px;
}

.cb-purchase-only .cb-plan-list {
	gap: 14px;
}

.cb-purchase-only .cb-plan-option {
	border-radius: 16px;
	padding: 17px;
}

.cb-purchase-only .cb-plan-option.is-featured {
	border: 2px solid #2563eb;
	box-shadow: 0 16px 36px rgba(37, 99, 235, .13);
}

.cb-purchase-only .cb-plan-option-top strong {
	color: #0f172a;
	font-size: 1.3rem;
}

.cb-purchase-only .cb-plan-option p {
	color: #627086;
	font-size: .72rem;
	line-height: 1.5;
}

.cb-purchase-only .cb-plan-option a {
	background: #edf3ff;
	border: 1px solid #d5e2ff;
	color: #1d4ed8;
	min-height: 38px;
}

.cb-purchase-only .cb-plan-option.is-featured a {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	border-color: transparent;
	box-shadow: 0 8px 18px rgba(37, 99, 235, .2);
	color: #fff;
}

.cb-purchase-only .cb-payment-preview {
	background: rgba(255, 255, 255, .82);
	border: 1px solid #d7e3ef;
	color: #24344d;
}

.cb-purchase-only .cb-payment-preview-heading > span,
.cb-purchase-only .cb-payment-methods b {
	color: #24344d;
}

.cb-purchase-only .cb-payment-preview-heading small {
	color: #a16207;
}

.cb-purchase-only .cb-payment-methods > span {
	background: #f3f7fc;
	border-color: #e0e8f2;
}

.cb-purchase-only .cb-payment-methods small,
.cb-purchase-only .cb-payment-preview p {
	color: #66758a;
}

.cb-purchase-only .cb-payment-upi b,
.cb-purchase-only .cb-payment-preview p span {
	color: #087a59;
}

@media (max-width: 820px) {
	#paywall-overlay .cb-purchase-modal {
		border-radius: 22px 22px 0 0;
	}

	.cb-purchase-only .cb-plan-panel {
		padding: 28px 24px 30px;
	}
}

@media (max-width: 520px) {
	.cb-purchase-brand {
		margin-bottom: 16px;
	}

	.cb-purchase-only .cb-plan-panel {
		padding: 24px 18px 26px;
	}

	.cb-purchase-only .cb-plan-heading h2 {
		font-size: 1.65rem;
	}

	.cb-purchase-only .cb-plan-heading p {
		font-size: .8rem;
	}
}

/* Floating Animation for Sketch Cards */
@keyframes sketchFloat {
	0% { transform: translateY(0px) rotate(var(--sk-rot, 0deg)); }
	50% { transform: translateY(-8px) rotate(calc(var(--sk-rot, 0deg) + 1deg)); }
	100% { transform: translateY(0px) rotate(var(--sk-rot, 0deg)); }
}

@keyframes sketchPulse {
	0% { box-shadow: inset 0 1.5px 1px #fff, inset 0 -1px 1px rgba(0, 0, 0, 0.03), 0 18px 45px rgba(16, 24, 40, 0.1); }
	50% { box-shadow: inset 0 2px 2px #fff, inset 0 -1px 1px rgba(0, 0, 0, 0.05), 0 25px 60px rgba(37, 99, 235, 0.15); }
	100% { box-shadow: inset 0 1.5px 1px #fff, inset 0 -1px 1px rgba(0, 0, 0, 0.03), 0 18px 45px rgba(16, 24, 40, 0.1); }
}

.sketch-card.lesson-card {
	--sk-rot: 0deg;
	animation: sketchFloat 6s ease-in-out infinite, sketchPulse 6s ease-in-out infinite;
}

.sketch-card.quiz-card {
	--sk-rot: 0deg;
	animation: sketchFloat 7s ease-in-out infinite alternate, sketchPulse 7s ease-in-out infinite alternate;
	animation-delay: 1s;
}

.sketch-card.code-card {
	--sk-rot: -1deg;
	animation: sketchFloat 8s ease-in-out infinite, sketchPulse 8s ease-in-out infinite;
	animation-delay: 2s;
}

.sketch-card.extra-card {
	--sk-rot: 1.5deg;
	animation: sketchFloat 6.5s ease-in-out infinite alternate, sketchPulse 6.5s ease-in-out infinite alternate;
	animation-delay: 0.5s;
}


/* Mesmerising Hero Background */
.hero {
	position: relative;
	overflow: visible;
}
.hero::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(147,197,253,0.05) 40%, transparent 70%);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: -1;
	animation: pulseOrb 12s infinite alternate ease-in-out;
}
@keyframes pulseOrb {
	0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
	100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}


/* Dynamic Mesmerising Hero Background Override */
.hero {
	background: linear-gradient(-45deg, #f7fbff, #eef8ff, #e0f2fe, #f0fdf4);
	background-size: 400% 400%;
	animation: heroGradient 15s ease infinite;
	overflow: hidden;
}

@keyframes heroGradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}