/* ============================================================
   NOVARA — Courses page
   ============================================================ */

body.courses-body {
  background: #F0F4F2;
  color: #1A2B27;
  cursor: auto;
}
body.courses-body * { cursor: auto; }
body.courses-body a, body.courses-body button { cursor: pointer; }

/* ── HERO ─────────────────────────────────────────────────── */
.cp-hero {
  background:
    radial-gradient(ellipse at 75% 0%,  rgba(43,168,138,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(201,162,74,0.14) 0%, transparent 55%),
    linear-gradient(160deg, #062B22 0%, #0D4438 55%, #14695A 100%);
  padding: 140px var(--pad-page) 72px;
  position: relative;
  overflow: hidden;
}

/* ── Dot-grid texture ── */
.cp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* ── Decorative rings (right side) ── */
.cp-hero::after {
  content: '';
  position: absolute;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  width: 640px; height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  pointer-events: none;
  z-index: 0;
  box-shadow:
    0 0 0 80px  rgba(255,255,255,0.025),
    0 0 0 160px rgba(255,255,255,0.015),
    0 0 0 260px rgba(255,255,255,0.008);
}

/* SVG decoration — animated illustration top-right */
.cp-hero-deco {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  max-width: 48%;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

/* ── Keyframes ── */
@keyframes deco-float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
@keyframes deco-float-slow {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}
@keyframes deco-pulse-ring {
  0%,100% { r: 18; opacity: 0.28; }
  50%      { r: 22; opacity: 0.12; }
}
@keyframes deco-pulse-dot {
  0%,100% { opacity: 1; r: 6; }
  50%      { opacity: 0.5; r: 4; }
}
@keyframes deco-gold-glow {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
@keyframes deco-dash-march {
  to { stroke-dashoffset: -40; }
}
@keyframes deco-badge-slide {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes deco-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes deco-progress {
  from { width: 0; }
  to   { width: 90px; }
}
@keyframes deco-book-breathe {
  0%,100% { opacity: 0.9; }
  50%      { opacity: 0.65; }
}
@keyframes deco-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Book — gentle breathe */
.cp-hero-deco .deco-book {
  animation: deco-book-breathe 5s ease-in-out infinite;
  transform-origin: 240px 240px;
}

/* Certificate card — float up/down */
.cp-hero-deco .deco-cert {
  animation: deco-float 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Seal inner ring — slow spin */
.cp-hero-deco .deco-seal-ring {
  animation: deco-spin-slow 12s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Gold seal glow */
.cp-hero-deco .deco-seal-glow {
  animation: deco-gold-glow 3s ease-in-out infinite;
}

/* Node 1 outer ring pulse */
.cp-hero-deco .deco-node1-ring {
  animation: deco-pulse-ring 3s ease-in-out infinite;
}
.cp-hero-deco .deco-node1-dot {
  animation: deco-pulse-dot 3s ease-in-out infinite;
}

/* Node 2 gold — faster pulse */
.cp-hero-deco .deco-node2-ring {
  animation: deco-pulse-ring 2.5s ease-in-out infinite 0.4s;
}
.cp-hero-deco .deco-node2-dot {
  animation: deco-gold-glow 2.5s ease-in-out infinite 0.4s;
}

/* Dashed connecting paths march */
.cp-hero-deco .deco-path {
  stroke-dasharray: 5 6;
  stroke-dashoffset: 0;
  animation: deco-dash-march 2.5s linear infinite;
}
.cp-hero-deco .deco-path2 {
  stroke-dasharray: 5 6;
  animation: deco-dash-march 3.5s linear infinite reverse;
}
.cp-hero-deco .deco-path3 {
  stroke-dasharray: 5 6;
  animation: deco-dash-march 4s linear infinite;
}

/* Badge pills — float at different rates */
.cp-hero-deco .deco-badge1 {
  animation: deco-float-slow 5s ease-in-out infinite 0s;
}
.cp-hero-deco .deco-badge2 {
  animation: deco-float-slow 6s ease-in-out infinite 1s;
}
.cp-hero-deco .deco-badge3 {
  animation: deco-float-slow 4.5s ease-in-out infinite 0.5s;
}

/* Progress bar — fill animation on load */
.cp-hero-deco .deco-progress-fill {
  animation: deco-progress 2.5s cubic-bezier(0.4,0,0.2,1) 0.6s both;
}
.cp-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cp-eyebrow {
  font-family: var(--font-mono-mod);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cp-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold-warm); display: inline-block; }
.cp-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #F7F1E6;
  margin-bottom: 20px;
}
.cp-title em {
  font-style: italic;
  font-family: var(--font-stylish);
  background: linear-gradient(120deg, #C9A24A 0%, #E0BF72 60%, #F7F1E6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cp-subtitle {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(247,241,230,0.65);
  max-width: 520px;
  margin-bottom: 36px;
}
.cp-search-wrap {
  position: relative;
  max-width: 500px;
  margin-bottom: 44px;
}
.cp-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: rgba(247,241,230,0.4); pointer-events: none;
}
.cp-search {
  width: 100%;
  background: rgba(255,255,255,0.09);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 14px 52px 14px 48px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #F7F1E6;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.cp-search::placeholder { color: rgba(247,241,230,0.36); }
.cp-search:focus { border-color: #E0BF72; background: rgba(255,255,255,0.13); }
.cp-search::-webkit-search-cancel-button { display: none; }
.cp-search-kbd {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono-mod); font-size: 0.67rem;
  color: rgba(247,241,230,0.3); background: rgba(255,255,255,0.07);
  padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12);
  pointer-events: none;
}
.cp-hero-stats { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cp-hstat { display: flex; flex-direction: column; gap: 2px; }
.cp-hstat-n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: #F7F1E6; line-height: 1; }
.cp-hstat-l { font-family: var(--font-mono-mod); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,241,230,0.4); }
.cp-hstat-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.14); flex-shrink: 0; }

/* ── CATEGORY STRIP ───────────────────────────────────────── */
.cp-strip-wrap {
  background: #fff;
  border-bottom: 1.5px solid #E0EBEA;
  position: sticky;
  top: 70px;
  z-index: 90;
  box-shadow: 0 2px 12px rgba(13,68,56,0.07);
}
.cp-strip {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-page);
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cp-strip::-webkit-scrollbar { display: none; }
.cp-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: #5B6D68;
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1.5px;
}
.cp-strip-btn:hover { color: #0D4438; }
.cp-strip-btn.active { color: #0D4438; border-bottom-color: #C9A24A; font-weight: 600; }
.cp-strip-btn .strip-icon { font-size: 0.95rem; }
.cp-strip-btn .strip-count {
  font-family: var(--font-mono-mod); font-size: 0.66rem;
  color: #94A39E; background: #F0F4F2; padding: 1px 6px; border-radius: 100px;
}
.cp-strip-btn.active .strip-count { background: #D6EDE5; color: #14695A; }

/* ── BODY LAYOUT ──────────────────────────────────────────── */
.cp-page { overflow-x: hidden; }
.cp-body {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 36px var(--pad-page) 100px;
  overflow: hidden;
}
.cp-body-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  min-width: 0;
}
@media (max-width: 1024px) {
  .cp-body-inner { grid-template-columns: 1fr; }
  .cp-sidebar { display: none; }
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.cp-sidebar { min-width: 0; }
.cp-sidebar-inner {
  position: sticky;
  top: 136px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Filter group */
.cp-fgroup {
  background: #fff;
  border: 1.5px solid #E0EBEA;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-fgroup-label {
  font-family: var(--font-mono-mod);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94A39E;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid #EEF3F1;
}

/* Level / duration buttons */
.cp-lvl-nav { display: flex; flex-direction: column; gap: 2px; }
.cp-lvl-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: #4A6560;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  transition: background 0.18s, color 0.18s;
}
.cp-lvl-btn:hover { background: #EBF3EF; color: #0D4438; }
.cp-lvl-btn.active { background: #D6EDE5; color: #0D4438; font-weight: 600; }
.cp-lvl-btn-icon { font-size: 0.7rem; color: #C8DDD7; }

/* Category sidebar nav */
.cp-cat-icon { font-size: 0.9rem; flex-shrink: 0; }
.cp-cat-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94A39E;
  background: #EBF3EF;
  border-radius: 20px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.cp-lvl-btn.active .cp-cat-count { background: #C3E0D5; color: #0D4438; }

/* Pips */
.lvl-pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pip-awareness { background: #94A39E; }
.pip-beginner  { background: #2BA88A; }
.pip-build     { background: #3B82F6; }
.pip-advanced  { background: #C9A24A; }
.pip-mastery   { background: #0D4438; }

/* Legend card */
.cp-legend {
  background: #fff;
  border: 1.5px solid #E0EBEA;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-legend-title {
  font-family: var(--font-mono-mod);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94A39E;
  padding-bottom: 8px;
  border-bottom: 1px solid #EEF3F1;
}
.cp-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
}
.cp-legend-row > div { display: flex; flex-direction: column; }
.cp-legend-row strong { color: #0D4438; font-weight: 600; font-size: 0.8rem; line-height: 1.2; }
.cp-legend-row span   { color: #94A39E; font-size: 0.72rem; }

/* Sidebar CTA */
.cp-sidebar-cta {
  background: linear-gradient(145deg, #0D4438 0%, #1F8772 100%);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-scta-emoji { font-size: 1.6rem; line-height: 1; }
.cp-scta-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: #F7F1E6; line-height: 1.25; }
.cp-scta-body  { font-family: var(--font-body); font-size: 0.79rem; line-height: 1.55; color: rgba(247,241,230,0.65); }
.cp-scta-btn {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.81rem;
  font-weight: 700;
  color: #0D4438;
  background: #E0BF72;
  border-radius: 8px;
  padding: 9px 14px;
  text-align: center;
  transition: background 0.2s;
}
.cp-scta-btn:hover { background: #F7F1E6; }

/* Main column — never overflow */
.cp-main { min-width: 0; overflow: hidden; }

/* ── TOOLBAR ──────────────────────────────────────────────── */
.cp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.cp-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-result-count {
  font-family: var(--font-mono-mod);
  font-size: 0.8rem;
  color: #94A39E;
  letter-spacing: 0.06em;
}
.cp-active-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: #D6EDE5; border: 1px solid #B8DECE;
  border-radius: 100px;
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 500; color: #0D4438;
}
.cp-tag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  background: rgba(13,68,56,0.12); border-radius: 50%;
  font-size: 0.65rem; border: none; color: #0D4438; padding: 0; line-height: 1;
  transition: background 0.2s;
}
.cp-tag-x:hover { background: rgba(13,68,56,0.25); }
.cp-toolbar-right { display: flex; gap: 6px; }
.cp-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
  color: #4A6560; background: #fff; border: 1.5px solid #D4E4DF;
  transition: all 0.2s;
}
.cp-view-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.cp-view-btn:hover { border-color: #0D4438; color: #0D4438; }
.cp-view-btn.active { background: #0D4438; color: #fff; border-color: #0D4438; }

/* ── ALL VIEW: HORIZONTAL ROWS ───────────────────────────── */
.cp-row-section { margin-bottom: 48px; }

.cp-row-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #E0EBEA;
}
.cp-row-header-left { display: flex; align-items: center; gap: 14px; }
.cp-row-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(13,68,56,0.2);
}
.cp-row-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: #0D4438; letter-spacing: -0.02em; line-height: 1.2; }
.cp-row-path {
  display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap;
}
.cp-path-pill {
  font-family: var(--font-mono-mod); font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.08em; padding: 2px 8px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 4px;
}
.cp-path-pill.pip-awareness { background: #F0F2F2; color: #5B6D68; }
.cp-path-pill.pip-beginner  { background: #E6F5F0; color: #14695A; }
.cp-path-pill.pip-build     { background: #EFF6FF; color: #1D4ED8; }
.cp-path-pill.pip-advanced  { background: #FEF8E7; color: #92621A; }
.cp-path-pill.pip-mastery   { background: #EDF4F1; color: #0D4438; }
.cp-path-arrow { font-size: 0.65rem; color: #C8DDD7; }
.cp-row-header-right { display: flex; align-items: center; gap: 12px; }
.cp-row-count {
  font-family: var(--font-mono-mod); font-size: 0.72rem; letter-spacing: 0.08em;
  color: #14695A; background: #D6EDE5; border: 1px solid #B8DECE;
  padding: 4px 12px; border-radius: 100px; white-space: nowrap;
}

/* Horizontal scroll strip */
.cp-hscroll-wrap {
  position: relative;
  /* prevent bleed outside the page */
  overflow: hidden;
  margin: 0 -4px;
}
.cp-hscroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 4px 12px;
  /* hide scrollbar but keep function */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* stop text selection while dragging */
  user-select: none;
  -webkit-user-select: none;
}
.cp-hscroll::-webkit-scrollbar { display: none; }
.cp-hscroll.dragging { cursor: grabbing; }

/* ── SINGLE-CATEGORY HEADER ───────────────────────────────── */
.cp-single-header {
  background: #fff;
  border: 1.5px solid #E0EBEA;
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(13,68,56,0.04);
}
.cp-single-header-top {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.cp-csec-icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(13,68,56,0.22);
}
.cp-csec-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: #0D4438; letter-spacing: -0.02em; line-height: 1.2; flex: 1; }
.cp-csec-sub  { font-family: var(--font-body); font-size: 0.8rem; color: #5B6D68; font-style: italic; margin-top: 2px; }
.cp-csec-badge {
  font-family: var(--font-mono-mod); font-size: 0.72rem; letter-spacing: 0.08em;
  color: #14695A; background: #D6EDE5; border: 1px solid #B8DECE;
  padding: 5px 14px; border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}

/* Level progression track */
.cp-track {
  display: flex; align-items: center; gap: 0;
  padding: 12px 16px; background: #F8FAF9; border-radius: 10px;
  border: 1px solid #EEF3F1; overflow-x: auto; scrollbar-width: none;
}
.cp-track::-webkit-scrollbar { display: none; }
.cp-track-step {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 5px 10px; border-radius: 8px;
  font-family: var(--font-body); font-size: 0.8rem; color: #C8DDD7;
}
.cp-track-step.track-active { background: #fff; border: 1px solid #E0EBEA; color: #0D4438; }
.cp-track-name { font-weight: 500; }
.cp-track-count {
  font-family: var(--font-mono-mod); font-size: 0.66rem;
  background: #D6EDE5; color: #14695A; padding: 1px 6px; border-radius: 100px;
}
.cp-track-line { flex: 1; min-width: 20px; max-width: 40px; height: 1px; background: #E0EBEA; flex-shrink: 0; }

/* ── COURSES GRID ─────────────────────────────────────────── */
.cp-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.cp-view-list .cp-courses-grid { grid-template-columns: 1fr; gap: 10px; }

/* ── COURSE CARD ──────────────────────────────────────────── */
.cp-card {
  background: #fff;
  border: 2px solid #C8DDD7;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s, box-shadow 0.28s, transform 0.25s;
  box-shadow: 0 2px 8px rgba(13,68,56,0.05);
}
.cp-card:hover {
  border-color: #2BA88A;
  box-shadow: 0 10px 36px rgba(13,68,56,0.13), 0 0 0 3px rgba(43,168,138,0.1);
  transform: translateY(-4px);
}

/* Compact card for horizontal scroll rows */
.cp-card-compact { width: 260px; flex-shrink: 0; }

/* Top colour bar */
.cp-card-topbar { height: 6px; width: 100%; flex-shrink: 0; }
.bar-awareness { background: linear-gradient(90deg,#94A39E,#B8C9C4); }
.bar-beginner  { background: linear-gradient(90deg,#2BA88A,#1F8772); }
.bar-build     { background: linear-gradient(90deg,#3B82F6,#6366F1); }
.bar-advanced  { background: linear-gradient(90deg,#C9A24A,#E0BF72); }
.bar-mastery   { background: linear-gradient(90deg,#0D4438,#14695A); }

/* Card inner */
.cp-card-inner { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cp-card-meta  { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cp-card-meta-right { display: flex; align-items: center; gap: 6px; }
.cp-card-num   { font-family: var(--font-mono-mod); font-size: 0.65rem; letter-spacing: 0.16em; color: #C8DDD7; font-weight: 600; }

/* Badges */
.cp-card-badge {
  display: inline-block; padding: 2px 8px; border-radius: 100px;
  font-family: var(--font-mono-mod); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; white-space: nowrap;
}
.cp-badge-popular { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.cp-badge-new     { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }

/* Level badge */
.cp-lvl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px;
  font-family: var(--font-mono-mod); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.08em; white-space: nowrap; flex-shrink: 0;
}
.badge-awareness { background: #F0F2F2; color: #5B6D68; border: 1px solid #C8D4D0; }
.badge-beginner  { background: #E6F5F0; color: #14695A; border: 1px solid #9ACFBE; }
.badge-build     { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.badge-advanced  { background: #FEF8E7; color: #92621A; border: 1px solid #EDD38A; }
.badge-mastery   { background: #EDF4F1; color: #0D4438; border: 1px solid #9ACFBE; }

/* Pips */
.lvl-pip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pip-awareness { background: #94A39E; }
.pip-beginner  { background: #2BA88A; }
.pip-build     { background: #3B82F6; }
.pip-advanced  { background: #C9A24A; }
.pip-mastery   { background: #0D4438; }

/* Card title & desc */
.cp-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 400;
  line-height: 1.35; color: #0A2E26;
  letter-spacing: -0.015em;
}
.cp-card-desc {
  font-family: var(--font-body);
  font-size: 0.8rem; line-height: 1.55;
  color: #5B6D68;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer */
.cp-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 12px; border-top: 1px solid #EEF3F1; margin-top: auto;
}
.cp-card-dur { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono-mod); font-size: 0.71rem; color: #94A39E; font-weight: 500; }
.cp-card-dur svg { width: 12px; height: 12px; }
.cp-card-cta-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; background: #0D4438; color: #F7F1E6;
  border-radius: 8px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  text-decoration: none; border: none; flex-shrink: 0;
  transition: background 0.2s;
}
.cp-card-cta-btn svg { width: 10px; height: 10px; transition: transform 0.2s; }
.cp-card:hover .cp-card-cta-btn { background: #14695A; }
.cp-card:hover .cp-card-cta-btn svg { transform: translateX(2px); }

/* List view */
.cp-view-list .cp-card { flex-direction: row; align-items: stretch; border-radius: 12px; }
.cp-view-list .cp-card-topbar { width: 6px; height: auto; border-radius: 12px 0 0 12px; }
.cp-view-list .cp-card-inner { flex-direction: row; align-items: center; padding: 14px 20px; gap: 16px; flex-wrap: wrap; }
.cp-view-list .cp-card:hover { transform: translateX(4px); }
.cp-view-list .cp-card-meta  { flex-shrink: 0; }
.cp-view-list .cp-card-title { font-size: 0.97rem; flex: 1; min-width: 160px; }
.cp-view-list .cp-card-desc  { display: none; }
.cp-view-list .cp-card-footer { border-top: none; padding-top: 0; margin-top: 0; flex-shrink: 0; }

@keyframes cardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.cp-card { animation: cardIn 0.34s ease both; }

/* ── LIST STACK (All + List view) ────────────────────────── */
.cp-list-stack { display: flex; flex-direction: column; gap: 8px; }

.cp-list-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 2px solid #C8DDD7;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
  box-shadow: 0 2px 6px rgba(13,68,56,0.05);
  animation: cardIn 0.32s ease both;
}
.cp-list-row:hover {
  border-color: #2BA88A;
  box-shadow: 0 6px 24px rgba(13,68,56,0.11), 0 0 0 3px rgba(43,168,138,0.09);
  transform: translateX(4px);
}

/* left colour strip */
.cp-list-row-bar { width: 5px; height: 100%; min-height: 60px; flex-shrink: 0; align-self: stretch; }

.cp-list-num {
  font-family: var(--font-mono-mod);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: #C8DDD7;
  font-weight: 600;
  flex-shrink: 0;
  width: 28px;
}

.cp-list-center {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
}
.cp-list-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: #0A2E26;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cp-list-desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #5B6D68;
  line-height: 1.45;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

.cp-list-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 14px 0;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cp-row-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #5B6D68;
  font-style: italic;
  margin-top: 2px;
}

/* Horizontal scroll — grab cursor */
.cp-hscroll { user-select: none; }

/* ── EMPTY ────────────────────────────────────────────────── */
.cp-empty { text-align: center; padding: 80px 20px; }
.cp-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.cp-empty h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: #0D4438; margin-bottom: 8px; }
.cp-empty p  { font-family: var(--font-body); font-size: 0.95rem; color: #5B6D68; margin-bottom: 24px; }
.cp-reset-btn {
  font-family: var(--font-body); font-size: 0.87rem; font-weight: 600;
  color: #fff; background: #0D4438; border: none; border-radius: 8px; padding: 11px 28px;
  transition: background 0.2s;
}
.cp-reset-btn:hover { background: #14695A; }

/* ── ENROL BANNER ─────────────────────────────────────────── */
.cp-enrol-banner {
  margin-top: 60px;
  background: linear-gradient(120deg, #0D4438 0%, #14695A 60%, #1F8772 100%);
  border-radius: 18px; padding: 40px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.cp-enrol-banner::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08); pointer-events: none;
}
.cp-enrol-left { flex: 1; min-width: 220px; position: relative; z-index: 1; }
.cp-enrol-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: #F7F1E6; margin-bottom: 8px; letter-spacing: -0.02em; }
.cp-enrol-sub  { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.65; color: rgba(247,241,230,0.7); max-width: 420px; }
.cp-enrol-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: #E0BF72; color: #0D4438;
  border-radius: 10px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.cp-enrol-btn:hover { background: #F7F1E6; transform: translateY(-2px); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cp-hero { padding: 120px 20px 52px; }
  .cp-body { padding: 24px 16px 60px; }
  .cp-hstat-sep { display: none; }
  .cp-enrol-banner { padding: 28px 24px; }
  .cp-courses-grid { grid-template-columns: 1fr; }
  .cp-strip-wrap { top: 56px; }
}