/* =====================================================================
   GenieAI Academy — styles.css
   Brand design system v7. Semantic app tokens that swap in dark mode.
   Hero cards, course-cover with bg-template images, kp-lists, callouts.
   Font slider (а → А), grayscale dark, sectioned sidebar.
   ===================================================================== */

:root {
  /* Brand palette */
  --primary-900: #1B0B57;
  --primary-500: #673AB7;
  --primary-400: #8E1AD6;
  --primary-300: #B389E9;
  --primary-200: #D3B4F7;
  --primary-100: #F2E7FE;
  --primary-50:  #F9F5FE;

  /* Spacing scale — strict 4px grid. Single source of truth for padding / margin / gap.
     Snap every spacing value to one of these; never leave off-grid or split composites. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 60px;
  --space-12: 64px;
  --space-13: 120px;

  --blue-500: #3448FE;
  --deep-purple: #5F1ED9;
  --accent-rgb: 103, 58, 183;

  /* Neutrals */
  --zinc-900: #212121;
  --zinc-700: #424242;
  --zinc-600: #616161;
  --zinc-500: #878787;
  --zinc-400: #A0A0A0;
  --zinc-300: #E0E0E0;
  --zinc-200: #CFCFCF;
  --zinc-100: #F2F2F2;
  --white: #FFFFFF;
  --off-white: #FDFDFD;
  --warm-white: #FBF8FE;

  /* App semantic (light theme) */
  --app-bg: #FDFDFD;
  --app-surface: #FFFFFF;
  --app-surface-2: #FAFAFA;
  --app-border: #F2E7FE;
  --app-border-strong: #E0E0E0;
  --app-text: #212121;
  --app-text-muted: #424242;
  --app-text-subtle: #616161;
  --app-purple: #673AB7;
  --app-purple-soft: #F2E7FE;
  --app-purple-50: #F9F5FE;
  --app-chip-bg: #F2E7FE;
  --app-chip-text: #673AB7;
  --app-sidebar-bg: #FFFFFF;
  --app-sidebar-border: #F2F2F2;
  --app-shadow-sm: 0 4px 10px rgba(var(--accent-rgb), 0.10);
  --app-shadow-md: 0 5px 20px rgba(var(--accent-rgb), 0.10);
  --app-shadow-lg: 0 10px 30px rgba(var(--accent-rgb), 0.08);

  /* Layout */
  --sidebar-width: 288px;
  --sidebar-width-collapsed: 72px;
  --header-height: 64px;
  --content-max: 1120px;
  --transition: 0.2s ease;
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode. Neutral grayscale. Primary purple only on CTAs/active. */
html[data-theme="dark"] {
  --app-bg: #171717;
  --app-surface: #242424;
  --app-surface-2: #1E1E1E;
  --app-border: var(--primary-200);
  --app-border-strong: var(--primary-300);
  --app-text: #FFFFFF;
  --app-text-muted: #E0E0E0;
  --app-text-subtle: #A0A0A0;
  --app-purple: #B389E9;
  --app-purple-soft: rgba(179, 137, 233, 0.12);
  --app-purple-50: rgba(179, 137, 233, 0.08);
  --app-chip-bg: rgba(179, 137, 233, 0.18);
  --app-chip-text: #D3B4F7;
  --app-sidebar-bg: #1A1A1A;
  --app-sidebar-border: var(--primary-200);
  --app-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.30);
  --app-shadow-md: 0 5px 20px rgba(0, 0, 0, 0.35);
  --app-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.40);
}

/* ---------- Reset + base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: calc(16px * var(--fs-scale, 1));
  scroll-behavior: smooth;
}

body {
  font-family: 'Google Sans Flex', 'Google Sans', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--app-bg);
  color: var(--app-text);
  line-height: calc(1.5 * var(--line-scale, 1));
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Accessibility. High contrast mode (WCAG AAA capable). */
html[data-contrast="high"] {
  --app-text: #000000;
  --app-text-muted: #1A1A1A;
  --app-text-subtle: #333333;
  --app-bg: #FFFFFF;
  --app-surface: #FFFFFF;
  --app-surface-2: #F5F5F5;
  --app-border: #767676;
  --app-border-strong: #4A4A4A;
  --app-purple: #4A148C;
  --app-purple-soft: #E8D5F5;
  --app-purple-50: #F0E0FF;
  --app-chip-bg: #E8D5F5;
  --app-chip-text: #4A148C;
  --app-sidebar-border: #767676;
  --app-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.15);
  --app-shadow-md: 0 5px 20px rgba(0, 0, 0, 0.15);
  --app-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --primary-100: #767676;
  --primary-200: #767676;
  --primary-300: #5C5C5C;
  --primary-500: #4A148C;
}
html[data-contrast="high"][data-theme="dark"] {
  --app-text: #FFFFFF;
  --app-text-muted: #F0F0F0;
  --app-text-subtle: #D0D0D0;
  --app-bg: #000000;
  --app-surface: #1A1A1A;
  --app-surface-2: #111111;
  --app-border: #888888;
  --app-border-strong: #BBBBBB;
  --app-purple: #D3B4F7;
  --app-purple-soft: rgba(211, 180, 247, 0.2);
  --app-purple-50: rgba(211, 180, 247, 0.15);
  --app-chip-bg: rgba(211, 180, 247, 0.25);
  --app-chip-text: #F2E7FE;
  --app-sidebar-bg: #0A0A0A;
  --app-sidebar-border: #888888;
  --app-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.4);
  --app-shadow-md: 0 5px 20px rgba(0, 0, 0, 0.4);
  --app-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Accessibility. Reduced motion. */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--primary-100); color: var(--primary-900); }
html[data-theme="dark"] ::selection { background: rgba(179, 137, 233, 0.3); color: var(--white); }

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--transition-slow);
}
.app[data-sidebar="collapsed"] {
  grid-template-columns: 0 1fr;
}
.app[data-sidebar="collapsed"] .sidebar {
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--app-sidebar-bg);
  border-right: 1px solid var(--app-sidebar-border);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all var(--transition-slow);
  z-index: 50;
}

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 0 32px;
  height: var(--header-height);
}
.sidebar-logo {
  display: flex;
  align-items: center;
  color: var(--app-text);
  text-decoration: none;
  overflow: hidden;
  width: 100%;
}
.sidebar-logo:hover { color: var(--app-text); text-decoration: none; }
.sidebar-logo .logo-lockup {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.sidebar-logo .logo-mark { display: none; }
/* Dark mode. Full logo goes white (brand spec "Lockup white"). */
html[data-theme="dark"] .sidebar-logo .logo-lockup,
html[data-theme="dark"] .sidebar-logo .logo-mark {
  filter: brightness(0) invert(1);
}

.sidebar-toggle {
  width: 36px; height: 36px;
  border-radius: 8px;
  color: var(--app-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
}
/* Sidebar toggle stays static on hover — no background/highlight (only :active press feedback). */
.sidebar-toggle:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.sidebar-toggle .tog-close { display: inline-flex; }
.sidebar-toggle .tog-open { display: none; }
.app[data-sidebar="collapsed"] .sidebar-toggle .tog-close { display: none; }
.app[data-sidebar="collapsed"] .sidebar-toggle .tog-open { display: inline-flex; }
.app[data-sidebar="collapsed"] .sidebar-toggle { background: none; }
.app[data-sidebar="collapsed"] .sidebar-toggle:hover { background: none; }
.header-logo-mark{display:none;align-items:center;flex-shrink:0;}
.header-logo-mark img{height:24px;width:auto;}
.app[data-sidebar="collapsed"] .header-logo-mark{display:inline-flex;}

/* Mobile burger, sidebar close, backdrop, lockup, crumb bar (hidden on desktop) */
.mobile-burger{display:none;}
.sidebar-backdrop{display:none;}
.sidebar-close{display:none;}
.header-logo-lockup{display:none;}
.mobile-crumb-bar{display:none;}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 32px;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 4px; }

.sidebar-section {
  margin-bottom: 20px;
}
.sidebar-spacer { flex: 1; min-height: 12px; }

.nav-section-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--app-text-subtle);
  padding: 8px 12px 4px;
}
.app[data-sidebar="collapsed"] .nav-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; pointer-events: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--app-text-muted);
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
}
.nav-item:hover { background: var(--app-purple-50); color: var(--app-text); text-decoration: none; }
.nav-item.active {
  background: var(--app-chip-bg);
  color: var(--app-chip-text);
  font-weight: 600;
}
.nav-item .nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav-item .badge {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 9999px;
  background: var(--primary-500);
  color: var(--primary-on, var(--white));
  letter-spacing: 0.02em;
}
.nav-item .badge.badge-outline {
  background: transparent;
  border: 1px solid var(--app-border);
  color: var(--app-text-muted);
}
.app[data-sidebar="collapsed"] .nav-item .nav-label,
.app[data-sidebar="collapsed"] .nav-item .badge { display: none; }
.app[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 12px 0; gap: 0; }

.sidebar-footer {
  padding: 12px; /* shared 12px inset for the "Try Genie free" button + the docked card */
  position: relative; /* containing block for the docked "Complete your profile" card */
}
.sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 16px;
  border-radius: 9999px;
  background: var(--primary-500);
  color: var(--primary-on, var(--white));
  font-size: 1rem;
  font-weight: 400;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
  transition: all var(--transition);
}
.sidebar-cta:hover { color: var(--primary-on, var(--white)); text-decoration: none; box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.sidebar-cta:active { box-shadow: inset 0 0 8px rgba(27,11,87,0.4); }
.app[data-sidebar="collapsed"] .sidebar-cta .cta-label,
.app[data-sidebar="collapsed"] .sidebar-cta svg { display: none; }
.app[data-sidebar="collapsed"] .sidebar-cta { padding: 12px; }

/* ---------- Top bar ---------- */
.main-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.header {
  height: var(--header-height);
  background: color-mix(in oklab, var(--app-bg) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--app-sidebar-border);
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 20px;
}
.header-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-text-subtle);
  font-size: 1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.header-crumb .crumb-current {
  color: var(--app-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-crumb a { flex-shrink: 0; white-space: nowrap; }
.header-crumb .crumb-sep { color: var(--app-text-subtle); display: inline-flex; flex-shrink: 0; }
.header-crumb .crumb-sep svg { width: 16px; height: 16px; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.header-actions .btn-outline,
.header-actions .btn-primary { font-size: 1rem; }

/* ---------- Buttons (host-case-study style: generous padding, pill shape) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: box-shadow var(--transition), border-color var(--transition), color var(--transition), background var(--transition);
  cursor: pointer;
  line-height: 1;
}
.btn-primary {
  background: var(--primary-500);
  color: var(--primary-on, var(--white));
  border: var(--primary-btn-border, none);
  box-shadow: var(--app-shadow-sm);
}
.btn-primary:hover {
  color: var(--primary-on, var(--white));
  text-decoration: none;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
}
.btn-primary:active {
  box-shadow: inset 0 0 8px rgba(27,11,87,0.4);
}
.btn-primary:disabled {
  background: var(--app-border);
  color: var(--app-text-muted);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.btn-outline {
  background: var(--app-surface);
  border-color: var(--app-border); /* brand: pale purple #F2E7FE, same as card borders */
  color: var(--app-text);
}
.btn-outline:hover {
  color: var(--primary-hover-text, var(--primary-500));
  text-decoration: none;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
}
.btn-outline:active {
  box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15);
}
.btn-ghost {
  color: var(--app-text-muted);
  padding: 12px 16px;
}
.btn-ghost:hover { color: var(--app-text); background: var(--app-purple-50); text-decoration: none; box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.btn-ghost:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.btn-lg { padding: 16px 24px; font-size: 1rem; }
.btn-sm { padding: 12px 24px; font-size: 1rem; }
.btn-sm.btn-icon-left { padding: 12px 24px 12px 20px; }
.btn-sm.btn-icon-right { padding: 12px 20px 12px 24px; }
.btn-reset-default {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 400; white-space: nowrap;
  color: var(--app-text); background: none;
  border: 1px solid var(--app-border); border-radius: 9999px;
  cursor: pointer; transition: box-shadow 0.15s, color 0.15s;
}
.btn-reset-default:hover { color: var(--app-text); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.btn-reset-default:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
html[data-theme="dark"] .btn-outline { border-color: var(--app-border); }
html[data-theme="dark"] .btn-reset-default { border-color: var(--app-border); }
.contact-email { color: var(--app-text-muted); text-decoration: underline; transition: color 0.15s; }
.contact-email:hover { color: var(--primary-hover-text, var(--app-purple)); }
.header-btn { height: 40px; padding: 0 20px; font-size: 1rem; }

/* ---------- Content wrapper ---------- */
.main {
  flex: 1;
  min-width: 0;
}
.scroll {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 48px 80px;
  letter-spacing: calc(0.005em + var(--letter-scale, 0em));
  /* 12-column container. Content sits on the middle 10 columns. */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-content: start;
}
.scroll > * { grid-column: 2 / -2; min-width: 0; }
/* Cards, images, carousels span all 12 columns */
.scroll > .course-list,
.scroll > .hero-carousel,
.scroll > .news-grid,
.scroll > .module-card,
.scroll > .course-landing-iframe,
.scroll > .lesson-grid { grid-column: 1 / -1; }
/* ---------- Embedded iframe (What's New, etc.) ---------- */
.embed-frame {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: var(--app-bg);
}

/* ---------- Hero card (rounded, self-contained) ---------- */
.hero {
  position: relative;
  padding: 0;
  margin-bottom: 48px;
  border-radius: 28px;
  background-color: var(--app-surface);
  background-image: url('backgrounds/bg-hero-cd.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--app-border);
  overflow: hidden;
}
html[data-theme="dark"] .hero {
  background-image: linear-gradient(135deg, rgba(var(--accent-rgb),0.28), rgba(27,11,87,0.55)), url('backgrounds/bg-hero-cd.jpg');
  background-blend-mode: overlay;
  background-color: var(--app-surface);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-purple);
  background: var(--app-surface);
  padding: 8px 12px;
  border-radius: 9999px;
  border: 1px solid var(--app-border);
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 720px;
  color: var(--app-text);
}
.hero-sub {
  font-size: 1.125rem;
  color: var(--app-text-muted);
  margin-top: 16px;
  max-width: 640px;
  line-height: 1.4;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ---------- Hero carousel (horizontal slide) ---------- */
.carousel-track {
  display: flex;
  width: 100%;
  will-change: transform;
  /* transition is set inline so we can disable it for the seamless snap-back */
}
.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 56px 56px 64px;
}
/* Matches the host-case-study product carousel controls (pill dots + circular
   progress ring around the play/pause button). */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  margin-bottom: 36px;
}
.carousel-dots-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 20px;
  border-radius: 9999px;
  background: var(--primary-50);
  border: 0;
}
.carousel-dots-pill:hover { background: var(--primary-200); }
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-300);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.carousel-dot:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.carousel-dot:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.carousel-dot.active {
  background: var(--primary-500);
  width: 32px;
  border-radius: 9999px;
}
.carousel-playpause {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease;
  padding: 0;
}
.carousel-playpause:hover { background: var(--primary-200); }
.carousel-playpause:active { background: var(--primary-100); }
.carousel-playpause svg.pp-icon-play,
.carousel-playpause svg.pp-icon-pause {
  width: 16px;
  height: 16px;
  fill: currentColor;
  position: relative;
  z-index: 1;
}
.carousel-playpause .pp-icon-play { display: none; }
.carousel-playpause.is-paused .pp-icon-pause { display: none; }
.carousel-playpause.is-paused .pp-icon-play { display: inline-block; }

/* Circular progress ring around the play/pause button. Fills over INTERVAL_MS. */
.pp-progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: rotate(-90deg);
  overflow: visible;
}
.pp-progress-track,
.pp-progress-fill {
  fill: none;
  stroke-width: 2;
}
.pp-progress-track { stroke: var(--primary-200); }
.pp-progress-fill {
  stroke: var(--primary-500);
  stroke-linecap: round;
  stroke-dasharray: 125.664;   /* 2 * PI * 20 */
  stroke-dashoffset: 125.664;
}
.carousel-playpause.is-paused .pp-progress-fill {
  transition: stroke-dashoffset 0.2s ease;
}

/* ---------- Page header (non-hero pages) ---------- */
.page-header { margin-bottom: 40px; }
.page-eyebrow {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-purple);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.page-title {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--app-text);
}
.page-lede {
  margin-top: 16px;
  font-size: 1.0625rem;
  color: var(--app-text-muted);
  max-width: 930px;
  line-height: 1.5;
}

/* ---------- Sections ---------- */
.section { margin-bottom: 48px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--app-purple);
}
.link:hover { text-decoration: underline; color: var(--app-purple); }

/* ---------- Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ---------- Tags ---------- */
/* Golden tag/badge sample = the 'In progress' module-pill: 0.8125rem / 500 /
   4px 12px / pill / 1px border. Every tag shares these metrics; the base border
   is transparent and each colour variant supplies a soft bg + darker same-hue
   text + a calm same-hue 1px stroke. Colours are fixed per hue (a hue is always
   the same shade) and stay light in both themes, exactly like the golden sample. */
.tag {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: var(--app-chip-bg);
  color: var(--app-chip-text);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  text-transform: capitalize;
}
.tag-beginner { background: #F2FAEE; color: #379643; border-color: #E7FBDE; }
.tag-intermediate { background: #FFFBEB; color: #B45309; border-color: #FEF3C7; }
.tag-advanced { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
.tag-new { background: var(--primary-500); color: var(--white); }
.tag-purple { background: var(--primary-50); color: var(--app-purple); border-color: var(--primary-100); }

/* ---------- Course / Use-case cards ---------- */
/* Concentric radius. Card 24, inner padding 6, cover radius 18 (24 - 6). */
.course-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 28px;
  padding: var(--space-2) var(--space-2) 0;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: var(--app-text);
}
.course-card:hover {
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
  text-decoration: none;
  color: var(--app-text);
}
.course-card:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }

.course-cover {
  height: 160px;
  position: relative;
  background: linear-gradient(135deg, var(--primary-50), var(--warm-white));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--app-border);
}
html[data-theme="dark"] .course-cover {
  background: linear-gradient(135deg, var(--accent-tint, rgba(179,137,233,0.10)), var(--app-surface-2));
}

.cover-label {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-500);
  text-align: center;
  padding: 24px;
  max-width: 80%;
}
html[data-theme="dark"] .cover-label { color: var(--primary-300); }

/* Concentric: cover radius 18, icon inset 14, icon radius 4 (18-14=4 too small so bump to 10 for aesthetic). */
.cover-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--white);
  color: var(--primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.08);
  z-index: 1;
}
html[data-theme="dark"] .cover-icon {
  background: var(--app-surface);
  color: var(--primary-300);
  box-shadow: none;
  border: 1px solid var(--app-border);
}
.cover-icon svg { width: 18px; height: 18px; }

.cover-number {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--app-text-subtle);
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--white);
  border: 1px solid var(--app-border);
  letter-spacing: 0.01em;
  z-index: 1;
}
html[data-theme="dark"] .cover-number { background: var(--app-surface); }

.course-body {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.course-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.course-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-top: 4px;
  color: var(--app-text);
  line-height: 1.35;
}
.course-desc {
  font-size: 1rem;
  color: var(--app-text-muted);
  line-height: 1.5;
  flex: 1;
}
.course-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 4px;
  font-size: 1rem;
  color: var(--app-text-subtle);
}
.course-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Continue learning ---------- */
.continue-card {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 28px;
  text-decoration: none;
  color: var(--app-text);
  transition: border-color var(--transition);
}
.continue-card:hover { color: var(--app-text); text-decoration: none; box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.continue-card:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.continue-thumb {
  height: 100px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-50), var(--warm-white));
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="dark"] .continue-thumb {
  background: linear-gradient(135deg, var(--accent-tint, rgba(179,137,233,0.10)), var(--app-surface-2));
}
.continue-thumb .play {
  width: 52px; height: 52px;
  border-radius: 9999px;
  background: var(--white);
  color: var(--primary-500);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(var(--accent-rgb), 0.12);
}
html[data-theme="dark"] .continue-thumb .play {
  background: var(--app-surface);
  color: var(--primary-300);
  border: 1px solid var(--app-border);
  box-shadow: none;
}
.continue-thumb .play svg { width: 20px; height: 20px; margin-left: var(--space-1); }
.continue-body .course-name {
  font-size: 1rem;
  color: var(--app-text-subtle);
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.continue-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--app-text);
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.progress-bar {
  flex: 1;
  height: 8px;
  border-radius: 9999px;
  background: var(--primary-50);
  overflow: visible;
}
.progress-bar-fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  position: relative;
  width: calc(var(--pct, 0) * 1%);
  background: linear-gradient(90deg, var(--primary-100) 0%, var(--primary-200) 20%, var(--primary-300) 48%, var(--primary-400) 78%, var(--primary-500) 88%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(10000% / var(--pct)) 100%;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.30);
  --glow: max(0, calc((var(--pct) - 40) * 0.0025));
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.progress-bar-fill::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -1px;
  bottom: -8px;
  left: 20%;
  right: 0;
  border-radius: 9999px;
  background: radial-gradient(ellipse 72% 125% at 90% 62%, rgba(var(--accent-rgb), var(--glow,0)) 0%, rgba(var(--accent-rgb),0) 78%);
  filter: blur(4px);
}
.progress-label {
  font-size: 1rem;
  color: var(--app-text-subtle);
  font-weight: 400;
  min-width: 36px;
  text-align: right;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step-card {
  padding: 28px 24px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 20px;
}
.step-num {
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: var(--app-chip-bg);
  color: var(--app-chip-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 16px;
}
.step-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--app-text);
}
.step-card p {
  font-size: 1rem;
  color: var(--app-text-muted);
  line-height: 1.5;
}

/* Feed (News / What's new). Simple list. Quiet soft-gradient thumb with
   uppercase tag label centred. Same vibe as host-case-study. */
.feed-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 20px;
  border: 1px solid var(--app-border);
  border-radius: 28px;
  cursor: pointer;
  align-items: center;
  text-decoration: none;
  color: var(--app-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 12px;
}
.feed-item:last-child { margin-bottom: 0; }
.feed-item:hover { text-decoration: none; color: var(--app-text); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.feed-item:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.feed-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-50), var(--warm-white));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}
html[data-theme="dark"] .feed-thumb {
  background: linear-gradient(135deg, var(--accent-tint, rgba(179,137,233,0.10)), var(--app-surface-2));
}
.feed-thumb-label {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-500);
  text-align: center;
}
html[data-theme="dark"] .feed-thumb-label { color: var(--primary-300); }

.feed-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--space-2) 0;
  color: var(--app-text);
  line-height: 1.4;
}
.feed-body p {
  font-size: 1rem;
  color: var(--app-text); /* body text -> #212121 (light) */
  line-height: 1.5;
}
/* Title + tag share one row (the date is not shown on the What's-new cards). */
/* Date sits on top of the title (updates read as fresh); gray-500, secondary. */
.feed-date { font-size: 0.75rem; color: var(--zinc-500); margin-bottom: var(--space-1); }
.feed-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 var(--space-1);
}
.feed-head h3 { margin: 0; }
/* Tag matches the small ".lesson-kind-tag" (Live webinar) — 11px, tight, 8px radius. */
.feed-head .tag { font-size: 0.8125rem; font-weight: 500; padding: 4px 12px; border-radius: 9999px; }

@media (max-width: 900px) {
  .feed-item { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- News magazine layout (featured + grid) ---------- */
.news-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 28px;
  margin-bottom: 40px;
  text-decoration: none;
  color: var(--app-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.news-featured:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
  text-decoration: none;
  color: var(--app-text);
}
.news-featured:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.news-featured-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-50), var(--warm-white));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
html[data-theme="dark"] .news-featured-thumb {
  background: linear-gradient(135deg, var(--accent-tint, rgba(179,137,233,0.12)), var(--app-surface-2));
}
.news-featured-body h2 {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: var(--space-3) 0 var(--space-3);
  color: var(--app-text);
}
.news-featured-body p {
  font-size: 1rem;
  color: var(--app-text-muted);
  line-height: 1.55;
  margin-bottom: 8px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--app-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.news-card:hover {
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
  text-decoration: none;
  color: var(--app-text);
}
.news-card:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.news-card-thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--primary-50), var(--warm-white));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-bottom: 1px solid var(--app-border);
}
html[data-theme="dark"] .news-card-thumb {
  background: linear-gradient(135deg, var(--accent-tint, rgba(179,137,233,0.12)), var(--app-surface-2));
  border-bottom-color: var(--app-border);
}
.news-card-body {
  padding: var(--space-5) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.news-card-body h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--app-text);
  line-height: 1.35;
  margin: var(--space-1) 0 var(--space-1);
}
.news-card-body p {
  font-size: 1rem;
  color: var(--app-text-muted);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .news-featured { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .news-featured-body h2 { font-size: 1.375rem; }
  .news-grid { grid-template-columns: 1fr; }
}

/* ---------- Lesson detail ---------- */
.lesson-shell {
  max-width: 780px;
  margin: 0 auto;
  padding: 60px 48px 80px;
}
.lesson-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--app-text-subtle);
  margin-bottom: 16px;
}
.lesson-breadcrumb a { color: var(--app-purple); font-weight: 500; }
.lesson-breadcrumb a:hover { text-decoration: underline; color: var(--app-purple); }
.lesson-breadcrumb svg { color: var(--app-text-subtle); flex-shrink: 0; }

.lesson-header { margin-bottom: 40px; }
.lesson-title {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--app-text);
}
.lesson-desc {
  font-size: 1.25rem;
  color: #212121;
  margin-top: 12px;
  line-height: 1.5;
}
.lesson-subtitle {
  font-size: 1.0625rem;
  color: var(--app-text-muted);
  margin-top: 12px;
  line-height: 1.5;
}
.lesson-meta-row {
  display: flex;
  gap: 16px;
  margin-top: 0;
  font-size: 1rem;
  color: var(--app-text-subtle);
  flex-wrap: wrap;
}
.lesson-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Lesson media placeholders. Quiet primary-50 → warm-white gradient.
   Centred uppercase label. Play icon is understated, no filled circle. */
.video-ph, .image-ph {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin: 28px 0;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary-50), var(--warm-white));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--primary-500);
}
html[data-theme="dark"] .video-ph,
html[data-theme="dark"] .image-ph {
  background: linear-gradient(135deg, var(--accent-tint, rgba(179,137,233,0.10)), var(--app-surface-2));
  color: var(--primary-300);
}

.play-btn {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--white);
  color: var(--primary-500);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
  position: relative;
  z-index: 1;
  border: 0;
  cursor: pointer;
}
html[data-theme="dark"] .play-btn {
  background: var(--app-surface);
  color: var(--primary-300);
  border: 1px solid var(--app-border);
  box-shadow: none;
}
.play-btn:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.play-btn:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.play-btn svg { width: 24px; height: 24px; }

.video-caption, .image-ph-label {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-500);
  text-align: center;
  padding: 0 24px;
  max-width: 80%;
}
html[data-theme="dark"] .video-caption,
html[data-theme="dark"] .image-ph-label { color: var(--primary-300); }

.image-ph .image-ph-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.image-ph .image-ph-inner svg { width: 24px; height: 24px; opacity: 0.6; }

.lesson-blocks { display: flex; flex-direction: column; gap: 64px; }
.lesson-blocks > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.lesson-block { display: flow-root; }
.lesson-block h2 {
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 32px;
  letter-spacing: -0.005em;
  color: var(--app-text);
}
.lesson-block h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--app-text);
}
.lesson-block p {
  font-size: 1.0625rem;
  color: var(--app-text);
  line-height: 1.65;
  margin-bottom: 24px;
}
.lesson-block p:last-child { margin-bottom: 0; }
.lesson-block > *:last-child { margin-bottom: 0; }

/* Card modifier for text blocks */
.lesson-block-card {
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 28px;
  padding: 36px 40px;
  box-shadow: 0 4px 24px rgba(103,58,183,0.08);
}
.lesson-block-card-grey {
  background: #F9F9F9;
  border-color: #F2F2F2;
  box-shadow: none;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 20px;
}
/* Card tuck-up margins removed: inter-block rhythm is the single 64px flex gap
   (no margin + padding + border compositing that produced 53/70). */

/* Quote block */
.lesson-quote {
  text-align: center;
  padding: 60px 0;
  margin: 0;
}
.lesson-quote blockquote {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--app-text);
  margin: 0;
}
.lesson-quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.9375rem;
}
.cite-name {
  font-weight: 600;
  color: var(--app-text);
}
.cite-role {
  color: var(--app-text-subtle);
}

/* Shift card (From → To) */
.shift-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin-top: 60px;
  margin-bottom: 0;
}
.shift-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: var(--app-text-subtle);
}
.shift-arrow svg {
  width: 24px;
  height: 24px;
}
.shift-from,
.shift-to {
  padding: 24px;
  border-radius: 28px;
}
.shift-from {
  background: #F9F9F9;
  border: 1px solid #F2F2F2;
}
.shift-to {
  background: #F2FAEE;
  border: 1px solid #C6F0B4;
}
.shift-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.shift-from .shift-label {
  color: var(--app-text-subtle);
}
.shift-to .shift-label {
  color: #379643;
}
.shift-from p {
  color: var(--app-text);
}
.shift-to p {
  font-weight: 600;
  color: #1B5E20;
}

.kp-list {
  padding: 20px 24px;
  background: var(--app-purple-50);
  border: 1px solid var(--app-border);
  border-radius: 16px;
}
.kp-list h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-purple);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.kp-list ul { list-style: none; padding: 0; }
.kp-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 1rem;
  color: var(--app-text);
}
.kp-list li svg {
  color: var(--app-purple);
  flex-shrink: 0;
  margin-top: 4px;
  width: 16px;
  height: 16px;
}

.kp-plain { list-style: none; padding: 20px 40px 0; margin: 0; }
.kp-plain li:last-child { padding-bottom: 0; }
.kp-plain li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 0;
  line-height: 1.5;
}
.kp-plain li + li { border-top: 1px solid var(--app-border); }
.kp-plain li svg {
  color: var(--app-purple);
  flex-shrink: 0;
  margin-top: 0;
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.callout {
  display: flex;
  gap: 16px;
  padding: 20px 20px;
  border-radius: 16px;
  background: var(--app-purple-50);
  border: 1px solid var(--app-border);
  margin: 20px 0;
}
.callout-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--app-chip-bg);
  color: var(--app-chip-text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.callout-icon svg { width: 20px; height: 20px; }
.callout-body h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--app-text);
}
.callout-body p {
  font-size: 1rem;
  color: var(--app-text);
  line-height: 1.5;
  margin: 0;
}
.callout-body p + p {
  margin-top: 12px;
}

/* Poll (Was this helpful?) */
.vote {
  padding: 24px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  margin-top: 16px;
}
.vote h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--app-text);
}
.vote-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--app-text-muted);
  transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.vote-btn:hover { color: var(--app-purple); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.vote-btn:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.vote-btn.active {
  background: var(--app-purple);
  color: var(--white);
  border-color: var(--app-purple);
}
.vote-btn svg { width: 16px; height: 16px; }
.vote-thanks {
  margin-top: 16px;
  font-size: 1rem;
  color: var(--app-text-muted);
}

/* Lesson nav (Previous / Next cards) */
.lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 60px;
}
.lesson-nav a {
  padding: 20px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow 0.15s ease;
  text-decoration: none;
  color: var(--app-text);
}
.lesson-nav a:hover { color: var(--app-text); text-decoration: none; box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.lesson-nav a:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.lesson-nav a.next { text-align: right; align-items: flex-end; }
.lesson-nav .dir {
  font-size: 1rem;
  color: var(--app-purple);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lesson-nav .t {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text);
}

/* Lesson list in course detail */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Week blocks - each week is its own card */
.week-block {
  display: flex;
  flex-direction: column;
}
.week-lessons {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 20px;
  overflow: hidden;
}

/* Week headers */
.week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 8px;
}
.week-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-muted);
  white-space: nowrap;
}
.week-lock {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: #A0A0A0;
  white-space: nowrap;
}
.week-lock svg { width: 12px; height: 12px; }

/* Locked lesson rows */
.lesson-item.week-locked {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
.lesson-item.week-locked .chev { color: #A0A0A0; }

.lesson-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--app-border);
  transition: background 0.12s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: var(--app-text);
}
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover { background: var(--app-purple-50); text-decoration: none; color: var(--app-text); }
.lesson-item:active { background: var(--app-purple-50); }
.lesson-item .num {
  width: 38px; height: 38px;
  border-radius: 9999px;
  background: var(--app-chip-bg);
  color: var(--app-chip-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex: none;
}
.lesson-item.completed .num {
  background: var(--primary-500);
  color: var(--white);
}
.lesson-item.completed .num svg { width: 16px; height: 16px; }
.lesson-item h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #212121;
}
.lesson-item p {
  font-size: 1rem;
  color: #212121;
  line-height: 1.4;
}
.lesson-item .dur {
  font-size: 1rem;
  color: #212121;
}
.lesson-item .chev { display: none; }

/* Webinar lesson rows */
.lesson-item.lesson-webinar .num,
.lesson-item.lesson-webinar .webinar-num {
  background: #FFF8E1; color: #F0A000;
}
.lesson-item.lesson-webinar.completed .num,
.lesson-item.lesson-webinar.completed .webinar-num {
  background: var(--primary-500); color: var(--white);
}
[data-theme="dark"] .lesson-item.lesson-webinar .num,
[data-theme="dark"] .lesson-item.lesson-webinar .webinar-num {
  background: rgba(240, 160, 0, 0.15); color: #FFB300;
}
.lesson-item h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lesson-kind-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 500; line-height: 1; padding: 4px 12px; border: 1px solid transparent; border-radius: 9999px; white-space: nowrap; }
.lesson-kind-tag.webinar { background: #FFFBEB; color: #B45309; border-color: #FEF3C7; }
/* Audit rows (green / Maker Life) */
.lesson-item.lesson-interstitial.audit .num {
  background: #E8F5E9; color: #2E7D32;
}
.lesson-item.lesson-interstitial.audit.completed .num {
  background: var(--primary-500); color: var(--white);
}
[data-theme="dark"] .lesson-item.lesson-interstitial.audit .num {
  background: rgba(46, 125, 50, 0.15); color: #66BB6A;
}
/* Onboarding rows (light purple) */
.lesson-item.lesson-interstitial.onboarding .num {
  background: var(--app-purple-50); color: var(--primary-500);
}
.lesson-item.lesson-interstitial.onboarding.completed .num {
  background: var(--primary-500); color: var(--white);
}
[data-theme="dark"] .lesson-item.lesson-interstitial.onboarding .num {
  background: rgba(103, 58, 183, 0.15); color: var(--app-purple-300);
}
/* Lab rows (blue - distinct from sessions) */
.lesson-item.lesson-interstitial.lab .num {
  background: #E3F2FD; color: #1565C0;
}
.lesson-item.lesson-interstitial.lab.completed .num {
  background: var(--primary-500); color: var(--white);
}
[data-theme="dark"] .lesson-item.lesson-interstitial.lab .num {
  background: rgba(21, 101, 192, 0.15); color: #42A5F5;
}

/* ---------- Course page (2-col header with cert card) ---------- */
.course-hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
  margin-bottom: 40px;
}

@media (max-width: 900px) {
  .course-hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Prompt Builder ---------- */
.pb-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
.pb-main {
  padding: 28px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 28px;
}
.pb-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text-muted);
  margin-bottom: 8px;
  display: block;
}
.pb-input {
  width: 100%;
  min-height: 100px;
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  color: var(--app-text);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.pb-input:focus { outline: none; border-color: var(--primary-400); }

.pb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-chip {
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  font-family: inherit;
  font-size: 1rem;
  color: var(--app-text-muted);
  font-weight: 500;
  transition: box-shadow 0.15s ease, color 0.12s ease;
}
.pb-chip:hover { color: var(--app-purple); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.pb-chip:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.pb-chip.selected {
  background: var(--app-chip-bg);
  color: var(--app-chip-text);
  border-color: transparent;
  font-weight: 600;
}
.pb-example {
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  font-family: inherit;
  font-size: 1rem;
  color: var(--app-text-muted);
  cursor: pointer;
  transition: box-shadow 0.15s ease, color 0.12s ease;
}
.pb-example:hover { color: var(--app-purple); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.pb-example:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }

.pb-output {
  margin-top: 24px;
  padding: 20px;
  border-radius: 28px;
  background: var(--primary-900);
  color: #E9E1FF;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
html[data-theme="dark"] .pb-output { background: #0E0530; }
.pb-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Google Sans Flex', sans-serif;
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-300);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pb-output-head button {
  color: var(--primary-200);
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pb-output-head button:hover { background: rgba(255,255,255,0.14); }

.pb-aside { display: flex; flex-direction: column; gap: 16px; }
.pb-card {
  padding: 20px 20px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
}
.pb-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-purple);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb-card p {
  font-size: 1rem;
  color: var(--app-text-muted);
  line-height: 1.5;
}

/* ---------- Webinars ---------- */
.webinar-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: var(--app-text);
}
.webinar-card:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); text-decoration: none; color: var(--app-text); }
.webinar-card:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.webinar-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary-50), var(--warm-white));
  border-bottom: 1px solid var(--app-border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
html[data-theme="dark"] .webinar-thumb {
  background: linear-gradient(135deg, var(--accent-tint, rgba(179,137,233,0.10)), var(--app-surface-2));
  border-bottom-color: var(--app-border);
}
.play-small {
  width: 48px; height: 48px;
  border-radius: 9999px;
  background: var(--white);
  color: var(--primary-500);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(var(--accent-rgb), 0.12);
  position: relative;
  z-index: 1;
}
html[data-theme="dark"] .play-small {
  background: var(--app-surface);
  color: var(--primary-300);
  border: 1px solid var(--app-border);
  box-shadow: none;
}
.play-small svg { width: 18px; height: 18px; margin-left: 2px; }
.webinar-thumb .pill {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--app-text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: 9999px;
  background: var(--white);
  border: 1px solid var(--app-border);
  letter-spacing: 0.01em;
  z-index: 1;
}
html[data-theme="dark"] .webinar-thumb .pill { background: var(--app-surface); }
.live-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  padding: 4px 12px;
  border-radius: 9999px;
  background: #E11D48;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 9999px; background: var(--white);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.webinar-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.webinar-body h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--app-text);
}
.webinar-body .speaker { font-size: 1rem; color: var(--app-text-muted); }
.webinar-body .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 1rem;
  color: var(--app-text-subtle);
}
.webinar-body .meta span {
  display: inline-flex; align-items: center; gap: 4px;
}

/* ---------- Templates ---------- */
.tpl-card {
  padding: var(--space-6);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--app-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tpl-card:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); text-decoration: none; color: var(--app-text); }
.tpl-card:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.tpl-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--app-chip-bg);
  color: var(--app-chip-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.tpl-ico svg { width: 20px; height: 20px; }
.tpl-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text);
}
.tpl-card p {
  font-size: 1rem;
  color: var(--app-text-muted);
  line-height: 1.5;
  flex: 1;
}
.tpl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  color: var(--app-text-subtle);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--app-border);
}
.tpl-meta .use-link {
  color: var(--app-purple);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Certificates ---------- */
.cert-actions {
  display: flex;
  gap: 12px;
}
.cert-actions .btn {
  padding: 8px 16px;
  font-size: 1rem;
  flex: 1;
  justify-content: center;
}

/* ---------- Settings ---------- */
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-card {
  padding: 28px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 20px;
}
.settings-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--app-text);
}
.settings-card .hint {
  font-size: 1rem;
  color: var(--app-text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--app-border);
  flex-wrap: wrap;
}
.setting-row:last-child { padding-bottom: 0; }
.setting-row:first-of-type { border-top: 0; padding-top: 0; }
.setting-label { flex: 1; min-width: 220px; display: flex; gap: 16px; align-items: flex-start; }
.setting-icon {
  flex-shrink: 0;
  color: var(--app-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(1em * 1.5 * var(--line-scale, 1));
  letter-spacing: 0;
}
.fs-control{letter-spacing:0;}
.setting-icon svg { width: 1.25em; height: 1.25em; stroke-width: 1.75; }
.setting-label .setting-text .name { font-weight: 500; color: var(--app-text); margin-bottom: 4px; }
.setting-label .setting-text .help { font-size: 0.875rem; color: var(--app-text-muted); line-height: 1.45; }

/* Toggle switch for on/off settings (Reduce motion etc.) */
.switch {
  position: relative;
  width: 44px;
  height: 26px;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute;
  inset: 0;
  background: var(--app-border-strong);
  border-radius: 9999px;
  transition: background 0.2s ease;
}
.switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #FFFFFF;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.switch input:checked ~ .track { background: var(--primary-500); }
.switch input:checked ~ .thumb { transform: translateX(18px); }

/* Font slider (а → А) */
.fs-slider-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 280px;
  letter-spacing: 0;
}
.fs-left {
  font-size: 1rem;
  color: var(--app-text-subtle);
  width: 20px;
  text-align: center;
}
.fs-right {
  font-size: 1.375rem;
  color: var(--app-text);
  width: 32px;
  text-align: center;
  font-weight: 500;
}
.fs-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--app-chip-bg);
  border-radius: 9999px;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.fs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: var(--primary-500);
  cursor: grab;
  border: 3px solid #FFFFFF;
  box-shadow: var(--app-shadow-sm);
  transition: transform var(--transition);
}
html[data-theme="dark"] .fs-slider::-webkit-slider-thumb { border-color: rgba(255, 255, 255, 0.92); }
.fs-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.fs-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: var(--primary-500);
  cursor: grab;
  border: 3px solid #FFFFFF;
}
html[data-theme="dark"] .fs-slider::-moz-range-thumb { border-color: rgba(255, 255, 255, 0.92); }

.theme-seg {
  display: inline-flex;
  padding: 4px;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 9999px;
  gap: 4px;
}
.theme-seg button {
  padding: 8px 20px 8px 16px;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--app-text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.theme-seg button.active {
  background: var(--primary-500);
  color: var(--primary-on, var(--white));
  border: var(--primary-btn-border, none);
  font-weight: 600;
}

/* View mode toggle (grid / list on Learn page) */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--app-border);
  border-radius: 9999px;
  padding: 4px;
  gap: 4px;
  background: var(--app-surface);
}
.view-toggle button {
  padding: 8px 12px;
  border-radius: 9999px;
  color: var(--app-text-subtle);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.view-toggle button svg { width: 16px; height: 16px; }
.view-toggle button:hover { color: var(--app-text); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.view-toggle button:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.view-toggle button.active {
  background: var(--app-chip-bg);
  color: var(--app-chip-text);
  font-weight: 600;
}

/* Course list view — horizontal rows instead of cards */
.course-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* card-to-card gap = 24 */
}
.course-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 20px;
  text-decoration: none;
  color: var(--app-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.course-row:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); text-decoration: none; color: var(--app-text); }
.course-row:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.course-row .row-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-500);
}
html[data-theme="dark"] .course-row .row-icon {
  color: var(--primary-300);
}
.course-row .row-icon svg { width: 40px; height: 40px; }
.course-row .row-body h3 { font-size: 1.25rem; font-weight: 600; margin: 0 0 4px; color: var(--app-text); }
.course-row .row-body p { font-size: 1rem; color: var(--app-text-muted); margin: 0; line-height: 1.4; }
.course-row .row-body .row-meta { margin-top: 8px; font-size: 1rem; color: var(--app-text-subtle); display: flex; gap: 12px; }
.course-row .row-body .row-meta span { display: inline-flex; align-items: center; gap: 4px; }
.course-row .row-action { color: var(--app-text-subtle); }

/* ---------- Use-case triplet (problem/solution/outcome) ---------- */
.uc-section {
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text-subtle);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 12px;
}
.uc-section.outcome { color: var(--app-purple); }
.uc-body {
  font-size: 1rem;
  color: var(--app-text-muted);
  line-height: 1.5;
  margin-top: 4px;
}
.uc-body.outcome { color: var(--app-text); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in var(--transition);
}
html[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%;
  max-width: 600px;
  background: #FFFFFF;
  border: 1px solid var(--app-border);
  border-radius: 28px;
  padding: var(--space-9);
  position: relative;
  box-shadow: var(--app-shadow-lg);
  animation: modal-in var(--transition-slow);
}
@keyframes modal-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--app-text);
}
.modal p {
  font-size: 1rem;
  color: var(--app-text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.modal textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-4) var(--space-4);
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid var(--app-border);
  background: #FFFFFF;
  color: var(--app-text);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
  line-height: 1.5;
}
.modal textarea:focus, .modal .fb-input:focus { outline: none; border-color: var(--primary-400); }
/* Feedback form: label above each field + example placeholder inside. */
.fb-field { margin-top: 16px; }
.fb-field label { display: block; font-size: 0.9375rem; font-weight: 500; color: var(--app-text); margin-bottom: var(--space-2); }
.fb-field .fb-hint { font-weight: 400; color: var(--app-text-subtle); }
.modal .fb-input { width: 100%; padding: var(--space-4) var(--space-4); border: 1px solid var(--app-border); border-radius: 16px; background: #FFFFFF; color: var(--app-text); font-family: inherit; font-size: 1rem; outline: none; transition: border-color .15s; }
.fb-field textarea { margin-top: 0; }

/* Waiting-list modal consent block (register-interest pattern).
   Reuses the shared .modal shell, .fb-field inputs, .switch toggle and
   .modal-success icon; only the consent rows + privacy footer are new here. */
.wl-consent { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 4px; }
.wl-consent-row { display: flex; align-items: center; gap: 16px; border: 1px solid var(--app-border); border-radius: 16px; padding: var(--space-4) var(--space-5); transition: border-color .2s ease, box-shadow .2s ease; }
.wl-consent-row .wl-txt { font-size: 0.9375rem; color: var(--app-text); line-height: 1.45; flex: 1; }
.wl-consent-row.needed { border-color: #E7A3A3; box-shadow: 0 0 0 3px rgba(231, 163, 163, .15); }
.wl-check { position: relative; width: 26px; height: 26px; flex: 0 0 auto; cursor: pointer; display: inline-block; }
.wl-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wl-check .box { position: absolute; inset: 0; border: 1.5px solid var(--primary-300); border-radius: 8px; background: #FFFFFF; transition: .2s ease; }
.wl-check .box svg { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; stroke: #fff; fill: none; opacity: 0; transition: .2s ease; }
.wl-check input:checked ~ .box { background: var(--primary-500); border-color: var(--primary-500); }
.wl-check input:checked ~ .box svg { opacity: 1; }
.wl-privacy { font-size: 0.8125rem; color: var(--zinc-400); line-height: 1.5; text-align: center; margin-top: 16px; }
.wl-privacy a { color: var(--zinc-400); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- "Complete your profile" nudge card ----------
   Look, spacing and ALL animations are ported verbatim from profile-nudge-mockup.html
   (the source of truth), scoped under .profile-nudge.
   PLACEMENT: docked INSIDE the left sidebar, pinned to the bottom directly above the
   "Try Genie free" button. It is absolutely positioned inside .sidebar-footer (which
   uses the shared 12px inset), so it spans the sidebar's inner width (left/right = 12px,
   matching the button) and its bottom sits at the footer's top edge (a 12px gap to the
   button). It floats ON TOP of the nav (higher z-index) — the card's top overlaps the
   nav items above and its soft shadow separates it; the nav does not move (card is out
   of flow). It never extends into the main content (the sidebar clips overflow). */
@keyframes nudgeIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.profile-nudge {
  position: absolute; left: 12px; right: 12px; bottom: 100%; z-index: 20;
  background: #FFFFFF; border: 1px solid var(--app-purple-soft); border-radius: 20px;
  box-shadow: 0 0 26px rgba(var(--accent-rgb), .25); overflow: visible;
  transition: .18s ease; animation: nudgeIn .6s cubic-bezier(.16, 1, .3, 1) .35s both;
}
.profile-nudge .head { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px 16px; transition: padding .4s cubic-bezier(.16, 1, .3, 1); cursor: pointer; }
.profile-nudge .title { font-size: .875rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #212121; }
.profile-nudge .rightslot { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 24px; min-width: 58px; }
.profile-nudge .counter { font-size: .875rem; font-weight: 400; color: #A0A0A0; white-space: nowrap; display: inline-flex; align-items: center; transition: opacity .2s ease; }
.profile-nudge .controls { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 0; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.profile-nudge:hover .counter { opacity: 0; }
.profile-nudge:hover .controls { opacity: 1; pointer-events: auto; }
.profile-nudge .iconbtn { width: 30px; height: 30px; flex: 0 0 auto; border: 0; background: transparent; color: #A0A0A0; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.profile-nudge .iconbtn:hover { color: #616161; }
.profile-nudge .iconbtn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }
.profile-nudge .dots svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.profile-nudge .chev { margin-left: -4px; }
.profile-nudge .chev svg { transition: transform .2s ease; }
.profile-nudge .menu { position: absolute; top: 44px; right: 8px; background: #FFFFFF; border: 1px solid #EDE7F6; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 8px; display: none; z-index: 5; }
.profile-nudge .menu.open { display: block; }
.profile-nudge .menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; font: inherit; font-size: .9rem; font-weight: 600; color: #424242; padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.profile-nudge .menu button:hover { background: #F9F5FE; color: var(--app-purple); }
.profile-nudge .menu button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.profile-nudge .bar { height: 8px; margin: 0 16px; background: var(--primary-50); border-radius: 9999px; overflow: visible; }
.profile-nudge .bar > i { display: block; height: 100%; border-radius: 9999px; position: relative; width: calc(var(--pct, 0) * 1%); background: linear-gradient(90deg, var(--primary-100) 0%, var(--primary-200) 20%, var(--primary-300) 48%, var(--primary-400) 78%, var(--primary-500) 88%); background-repeat: no-repeat; background-position: left center; background-size: calc(10000% / var(--pct)) 100%; box-shadow: inset 0 1px 1px rgba(255,255,255,.30); --glow: max(0, calc((var(--pct) - 40) * 0.0025)); transition: width .4s cubic-bezier(.16,1,.3,1); }
.profile-nudge .bar > i::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -1px; bottom: -8px; left: 20%; right: 0; border-radius: 9999px; background: radial-gradient(ellipse 72% 125% at 90% 62%, rgba(var(--accent-rgb), var(--glow,0)) 0%, rgba(var(--accent-rgb),0) 78%); filter: blur(4px); }
.profile-nudge .collapsible { max-height: 400px; overflow: hidden; transition: max-height .48s cubic-bezier(.16, 1, .3, 1); }
.profile-nudge .collapsible-inner { overflow: hidden; opacity: 1; transition: opacity .4s cubic-bezier(.16, 1, .3, 1); }
.profile-nudge .body { padding: 16px 16px 4px 16px; }
.profile-nudge .why { font-size: .875rem; color: #212121; line-height: 1.55; margin: 0 0 12px; }
.profile-nudge .list { margin: 0 -12px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.profile-nudge .row { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: #212121; text-decoration: none; padding: 12px; border-radius: 16px; cursor: pointer; transition: background .15s ease; }
.profile-nudge .row:hover { background: #F9F5FE; }
.profile-nudge .ck { width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid rgba(var(--accent-rgb), .45); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.profile-nudge .ck svg { width: 9px; height: 9px; stroke: #fff; fill: none; opacity: 0; }
.profile-nudge .row.done .ck { background: var(--app-purple); border-color: var(--app-purple); }
.profile-nudge .row.done .ck svg { opacity: 1; }
.profile-nudge .row.done .txt { color: #A0A0A0; text-decoration: line-through; }
.profile-nudge .row.done { cursor: default; order: 1; }
.profile-nudge .row.done:hover { background: transparent; }
.profile-nudge .ring { display: none; width: 20px; height: 20px; flex: 0 0 auto; align-items: center; justify-content: center; }
.profile-nudge .ring svg { width: 20px; height: 20px; display: block; }
/* Collapsed-state ring follows the accent (was hardcoded purple in the SVG). */
.profile-nudge .ring circle { stroke: var(--primary-100); }
.profile-nudge .ring circle.ring-prog { stroke: var(--primary-500); }
/* collapsed */
.profile-nudge.collapsed { cursor: pointer; }
.profile-nudge.collapsed .head { padding-top: 16px; padding-bottom: 16px; }
.profile-nudge.collapsed .title, .profile-nudge.collapsed .counter { line-height: 20px; }
.profile-nudge.collapsed .rightslot { height: 20px; min-width: 0; }
.profile-nudge.collapsed .dots { display: none; }
.profile-nudge.collapsed .collapsible { max-height: 0; }
.profile-nudge.collapsed .collapsible-inner { opacity: 0; }
.profile-nudge.collapsed .ring { display: flex; }
.profile-nudge.collapsed .chev svg { transform: rotate(180deg); }

/* Branded success modal (purple check + Close). */
.modal-success { text-align: center; }
.modal-success-icon { width: 5rem; height: 5rem; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; }
.modal-success h3 { margin-bottom: var(--space-2); }
.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: 24px;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--app-surface); color: var(--app-text); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.modal-close:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-900);
  color: #FFFFFF;
  border: none;
  padding: 12px 20px;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 4px 24px rgba(103, 58, 183, 0.45);
  z-index: 200;
  opacity: 0;
  /* Base state governs the fade-OUT: 0.5s ease-in, smooth. */
  transition: opacity 0.5s ease-in, transform 0.5s ease-in;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Icon inherits the text colour (white) via currentColor — never dark/purple. */
.toast svg { color: #FFFFFF; }
/* Shown state governs the fade-IN: quick, as it was (var(--transition) = 0.2s ease).
   Held ~1.5s before fade-out; .show is removed after 1700ms = 0.2s fade-in + 1.5s hold. */
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); transition: opacity var(--transition), transform var(--transition); }

/* ---------- Utilities ---------- */
.hidden { display: none !important; }
.text-muted { color: var(--app-text-muted); }
.text-subtle { color: var(--app-text-subtle); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .pb-shell { grid-template-columns: 1fr; }
  .scroll { padding: 32px 32px 60px; }
  .lesson-shell { padding: 32px 32px 60px; }
}

@media (max-width: 900px) {
  /* ---- Mobile: sidebar is a fixed overlay, closed by default ---- */
  .app { grid-template-columns: 1fr; }
  .app[data-sidebar="open"] { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    max-width: 85vw;
    z-index: 100;
    transform: translateX(-100%);
    box-shadow: none;
    border-right: none;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  }
  .app[data-sidebar="open"] .sidebar {
    transform: translateX(0);
    box-shadow: var(--app-shadow-lg);
    opacity: 1;
    pointer-events: auto;
  }

  /* Backdrop */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
  }
  .app[data-sidebar="open"] .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Sidebar close button (inside sidebar, visible on mobile only) */
  .sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--app-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    transition: background var(--transition);
  }
  .sidebar-close:hover { background: var(--app-purple-50); color: var(--app-text); }
  .sidebar-header { justify-content: space-between; }

  /* ---- Header: logo left, burger right ---- */
  .header {
    height: 56px;
    padding: 0 16px 0 20px;
    gap: 8px;
  }
  .header-logo-mark { display: inline-flex; flex-shrink: 0; }
  .sidebar-toggle { display: none !important; }
  .header-crumb {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
  }
  .header-crumb span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-actions { display: none !important; }
  .mobile-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--app-text);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    order: 99;
    transition: background var(--transition);
  }
  .mobile-burger:hover { background: var(--app-purple-50); }

  /* ---- Content areas: 20px side padding (brand mobile spec) ---- */
  .scroll {
    display: block;
    padding: 24px 20px 64px;
    max-width: none;
  }
  .lesson-shell { padding: 24px 20px 64px; }

  /* ---- Typography: mobile scale ---- */
  .page-title { font-size: 2rem; }
  .lesson-title { font-size: 1.75rem; }
  .hero { padding: 0; }

  /* ---- Cards: 22px radius on mobile ---- */
  .module-card { border-radius: 28px; }
  .module-preview { border-radius: 28px; }
  .cert-banner { border-radius: 28px; }
  .quiz-result { border-radius: 28px; }
  .cert-doc-border { border-radius: 28px; padding: 28px; }

  /* ---- Module accordion: tighter on mobile ---- */
  .module-head { padding: 16px; gap: 12px; }
  .module-body { padding: 4px 16px 16px; }
  .module-head-right { gap: 8px; }
  .module-index { width: 36px; height: 36px; }
  .module-index svg { width: 28px; height: 28px; }
  .module-head-body h3 { font-size: 1rem; margin: var(--space-1) 0 var(--space-2); }
  .module-head-body p { font-size: 0.875rem; }
  .module-eyebrow { font-size: 0.875rem; }

  /* ---- Lesson rows: tighter grid ---- */
  .lesson-item { padding: 16px; gap: 12px; grid-template-columns: 36px 1fr auto; }
  .lesson-item .num { width: 34px; height: 34px; font-size: 0.875rem; }
  .lesson-item h4 { font-size: 0.9375rem; }
  .lesson-item p { font-size: 0.875rem; }

  /* ---- Assessment row ---- */
  .assess-row { padding: 16px; gap: 12px; }
  .assess-info { font-size: 0.875rem; }

  /* ---- Tabs ---- */
  .course-tabs { margin-top: 32px; gap: 0; }
  .course-tab { padding: 12px 12px; font-size: 0.875rem; }

  /* ---- Progress bar section ---- */
  .learn-head-row { flex-direction: column; gap: 8px; }

  /* ---- Carousel ---- */
  .carousel-slide { padding: 24px 20px; }

  /* ---- Grids go single column ---- */
  .grid-3, .grid-2, .steps { grid-template-columns: 1fr; }
  .continue-card { grid-template-columns: 1fr; }
  .feed-item { grid-template-columns: 1fr; }

  /* ---- Lesson nav ---- */
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav a.next { text-align: left; align-items: flex-start; }

  /* ---- Course landing ---- */
  .scroll.course-landing { padding-top: 24px; }
  .course-landing .page-header { margin: 12px 0 24px; }
  .course-landing .section { margin-top: 40px; }

  /* ---- Certificate ---- */
  .cert-doc-head { flex-direction: column; gap: 12px; }
  .cert-recipient { font-size: 1.75rem; }

  /* ---- Quiz ---- */
  .quiz-opt { padding: 12px 16px; border-radius: 12px; }
  .quiz-q legend { font-size: 1rem; }

  /* ---- FAQ ---- */
  .faq-item summary { padding: 20px 4px; font-size: 1.125rem; gap: 16px; }
  .faq-a { font-size: 1rem; }

  /* ---- Vote ---- */
  .vote { padding: 20px; border-radius: 16px; }

  /* ---- Callout ---- */
  .callout { padding: 16px; gap: 12px; border-radius: 12px; }

  /* ---- Lesson module strip ---- */
  .lesson-module-strip { padding: 8px 12px; gap: 8px; }
  .lms-module { font-size: 0.875rem; }
  .lms-count { font-size: 0.875rem; }

  /* ---- Prompt Lab chat ---- */
  .pl-part { grid-template-columns: 80px 1fr auto; }
}

/* ========================================================================
   V3 — First Contract lesson: real media, cards, steps, tips
   ===================================================================== */

/* Video */
.lesson-video {
  margin: 8px 0 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  background: #000;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.lesson-video video { display: block; width: 100%; height: auto; }
.media-caption {
  text-align: center;
  font-size: 1rem;
  margin: 0 0 32px;
  color: var(--app-text-subtle);
}

/* Real images with graceful fallback */
.lesson-img {
  position: relative;
  margin: 8px 0 12px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
}
.lesson-img img { display: block; width: 100%; height: auto; }
.lesson-img-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  color: var(--app-text-subtle);
  font-size: 1rem;
  text-align: center;
  padding: 24px;
}
.lesson-img-wide {
  width: calc(var(--content-max) - 96px);
  margin-left: calc((100% - (var(--content-max) - 96px)) / 2);
  margin-right: calc((100% - (var(--content-max) - 96px)) / 2);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none;
  border-radius: 0;
  background: none;
}
.lesson-img-wide.lesson-img-flush {
  margin-top: -76px !important;
  margin-bottom: -60px !important;
}
.lesson-img.img-missing img { display: none; }
.lesson-img.img-missing .lesson-img-fallback { display: flex; }

/* "What you get back" cards */
.lesson-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
  margin-bottom: 0;
  width: min(1120px, calc(100vw - 320px));
  margin-left: 50%;
  transform: translateX(-50%);
}
.lesson-cards:has(.lesson-card:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
.lesson-card {
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  border-radius: 28px;
  padding: 24px 20px;
}
.lesson-card-icon {
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-500);
  margin-bottom: 16px;
}
.lesson-card-icon svg { width: 3rem; height: 3rem; stroke: url(#lgrad); }
.lesson-card h4 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--app-text); }
.lesson-card p  { margin: 0; font-size: 1rem; line-height: 1.55; color: #212121; }

/* Journal prompts (interactive, per-question save) */
.journal-block { display: flex; flex-direction: column; }
.journal-prompts { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.journal-prompt { display: flex; flex-direction: column; gap: 8px; }
.journal-label { font-size: 1rem; font-weight: 500; color: #212121; line-height: 1.5; }
.journal-input-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.journal-input {
  width: 100%; padding: 16px; border: 1px solid #F2E7FE; border-radius: 16px;
  font-size: 1rem; line-height: 1.55; color: #212121; background: #FFFFFF;
  font-family: inherit; resize: vertical; transition: border-color .2s ease, background .2s ease;
}
.journal-input::-webkit-resizer{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M7 11L11 7M4.5 11L11 4.5M2 11L11 2' stroke='%23D3B4F7' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;}
.journal-input:focus { outline: none; border-color: var(--primary-500); background: #FFFFFF; }
.journal-prompt-save { padding: 12px 20px; }
.journal-copy-hint { font-size: 0.875rem; color: #A0A0A0; margin-right: 4px; }
/* Saved answer: plain text + pencil */
.journal-saved-wrap { display: flex; align-items: flex-start; gap: 8px; }
.lesson-block .journal-answer {
  flex: 1; margin: 0; font-size: 1rem; line-height: 1.55; color: #212121; white-space: pre-wrap;
  padding-left: 16px; position: relative;
}
.journal-answer::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: #F2E7FE; border-radius: 4px;
}
.journal-pencil {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  height: calc(1rem * 1.55); padding: 0;
  border: none; background: none; color: #A0A0A0; cursor: pointer;
  transition: color .2s ease;
}
.journal-pencil:hover { color: var(--primary-500); }
#nextLesson.gated { opacity: 0.4; pointer-events: none; }

/* Self-audit interactive rating */
.lesson-block .audit-intro {
  font-size: 1rem;
  color: var(--default-400);
  line-height: 1.6;
  margin: 0 0 36px;
}
.audit-card {
  background: #fff;
  border: 1px solid var(--primary-100);
  border-radius: 28px;
  padding: 40px;
  margin: 36px 0 0;
}
.audit-card-head h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--default-900);
  margin: 0 0 8px;
}
.audit-card-desc {
  font-size: 1rem;
  color: var(--default-400);
  margin: 0 0 28px;
  line-height: 1.5;
}
.audit-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--primary-100);
  border-radius: 28px;
  padding: 32px 24px;
  margin: 0;
  box-shadow: 0 0 20px rgba(142, 26, 214, 0.08);
}
.audit-avg-num {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--primary-500);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.audit-avg-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--default-400);
}
.audit-domains {
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
}
.audit-domain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--default-100);
}
.audit-domain:first-child {
  padding-top: 0;
}
.audit-domain:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.audit-domain-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.audit-domain-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--default-900);
  line-height: 1.5;
}
.audit-domain-desc {
  font-size: 1rem;
  font-weight: 400;
  color: var(--default-400);
  line-height: 1.5;
}
.audit-domain-score {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-500);
  opacity: 0.3;
  min-width: 24px;
  text-align: right;
  transition: opacity .2s ease;
}
.audit-domain-score.rated { opacity: 1; }
.audit-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 400;
  color: #212121;
  padding: 0;
}
.audit-rating {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.audit-btn {
  background: #fff;
  border: 1px solid var(--primary-100);
  border-radius: 12px;
  padding: 12px 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--default-900);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.audit-btn:hover { background: var(--primary-50); border-color: rgba(var(--accent-rgb), 0.4); }
.audit-btn.active {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: #fff;
}
.audit-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
.audit-btn:disabled.active {
  opacity: 1;
}
.audit-save-wrap {
  display: flex;
  justify-content: flex-end;
}
.audit-save {
  padding: 16px 24px;
}
.audit-result {
  margin-top: 60px;
}
.audit-result-text {
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--default-400);
  max-width: 380px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .audit-card { padding: 20px 16px; }
  .audit-avg { padding: 24px 20px; margin: 0; }
  .audit-avg-num { font-size: 1.75rem; }
  .audit-rating { gap: 4px; }
  .audit-btn { padding: 8px 0; font-size: 0.75rem; border-radius: 8px; }
  .audit-domain-title { font-size: 0.9375rem; }
  .audit-domain-desc { font-size: 0.875rem; }
}

/* Step-by-step (Apple style) */
.lesson-steps { list-style: none; margin: 8px 0 0; padding: 0; }
.lesson-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  padding: 0 0 32px 0;
  position: relative;
}
.lesson-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 42px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--app-border);
}
.step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-500);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  z-index: 1;
}
.step-body { padding-top: 4px; }
.step-body h3 { margin: 8px 0 8px; font-size: 1.15rem; font-weight: 600; color: var(--app-text); }
.step-body p  { margin: 0 0 12px; line-height: 1.6; color: var(--app-text-muted); }
.step-img { margin-top: 16px; }
.callout-inline { margin: 12px 0 4px; }

/* Tips block */
.lesson-tips {
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  border-radius: 16px;
  padding: 24px 28px 8px;
  margin-top: 12px;
}
.lesson-tips > h2 {
  display: flex; align-items: center; gap: 12px;
  color: var(--primary-500);
  margin-top: 0;
}
.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  margin: 16px 0 20px;
}
.tip h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; color: var(--app-text); }
.tip p  { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--app-text-subtle); }

@media (max-width: 720px) {
  .lesson-cards { grid-template-columns: 1fr; width: auto; margin-left: 0; transform: none; }
  .tips-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   V3 — round 2 polish: inline callout icons, prompt box, white tips, thumb
   ===================================================================== */

/* Callout: icon now sits inline with the title/first line */
.callout {
  display: block;
  padding: 16px 20px;
  margin: 16px 0;
}
.callout-inline { margin: 16px 0 4px; }
.callout-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-text);
  line-height: 1.45;
}
h4.callout-head { margin-bottom: 8px; }
.callout-head svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--primary-500);
  margin-top: 4px;
}
.callout-head span { font-weight: 400; color: #212121; }
.callout-body p { margin: 0; }

/* Starter prompt box with copy button */
.prompt-box {
  margin: 16px 0 4px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface);
  overflow: hidden;
}
.prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--app-purple-50);
  border-bottom: 1px solid var(--app-border);
}
.prompt-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--primary-500);
}
.prompt-label svg { width: 16px; height: 16px; }
.copy-prompt-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 1rem; font-weight: 500;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.copy-prompt-btn svg { width: 12px; height: 12px; }
.copy-prompt-btn:hover { background: var(--app-purple-50); border-color: var(--primary-500); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.copy-prompt-btn:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.copy-prompt-btn.copied { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }
.prompt-text {
  margin: 0;
  padding: 16px 16px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--app-text-muted);
}

/* Tips: white card, stacked line by line */
.lesson-tips {
  background: var(--app-surface);
  padding: 24px 28px;
}
.lesson-tips > h2 { margin-bottom: 8px; }
.tips-grid {
  display: block;
  margin: 4px 0 0;
}
.tips-grid .tip {
  padding: 16px 0;
  border-bottom: 1px solid var(--app-border);
}
.tips-grid .tip:last-child { border-bottom: none; padding-bottom: 4px; }
.tip h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; color: var(--app-text); }
.tip p  { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--app-text-subtle); }

/* Branded lesson thumbnail fills the card cover */
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ========================================================================
   V3 — round 3: branded responsive thumbnail + bigger separation gaps
   ===================================================================== */

/* Responsive overlay thumbnail (never clips text at any width) */
.thumb-cover {
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 16px 16px 0;
  text-align: left;
}
.thumb-eyebrow {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--primary-500);
  margin-bottom: 4px;
}
.thumb-title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  color: #2A1659;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thumb-doc {
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding: 12px 12px 12px;
  box-shadow: 0 -2px 14px rgba(74, 42, 138, 0.12);
}
.thumb-doc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.thumb-doc-bar { width: 60px; height: 8px; border-radius: 4px; background: var(--primary-500); }
.thumb-doc-pill {
  font-size: 8.5px; font-weight: 600; color: var(--primary-500);
  background: var(--app-purple-50); padding: 4px 8px; border-radius: 12px;
}
.thumb-doc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.thumb-doc-row:last-child { margin-bottom: 0; }
.thumb-doc-row .d { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.thumb-doc-row .d.g { background: #2BB673; }
.thumb-doc-row .d.a { background: #F2A93B; }
.thumb-doc-row .d.r { background: #E5484D; }
.thumb-doc-row .l { height: 8px; border-radius: 4px; background: #ECECF1; flex: 1; }
.thumb-doc-row:nth-child(2) .l { max-width: 80%; }
.thumb-doc-row:nth-child(3) .l { max-width: 94%; }
.thumb-doc-row:nth-child(4) .l { max-width: 60%; }

/* Bigger separation: prompt box -> tip callout */
.prompt-box { margin: 16px 0 16px; }
.step-body .callout-inline { margin-top: 20px; }

/* Bigger separation: text -> image */
.step-img { margin-top: 24px; }

/* ========================================================================
   V3 — round 4: MK-Dons-matched video facade, peek hero carousel,
   smaller controls, aligned radii, more breathing room, news images
   ===================================================================== */

/* ---- Video: facade with centred purple play button (matches MK Dons) ---- */
.lesson-video {
  position: relative;
  margin: 8px 0 12px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  background: #000;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.lv-aspect { position: relative; padding-bottom: 56.25%; height: 0; }
.video-facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
  background: #000;
  cursor: pointer;
  display: block;
}
.video-facade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block; border: 0;
}
.video-facade .play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--primary-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(var(--accent-rgb),0.18), 0 4px 14px rgba(var(--accent-rgb),0.22);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  margin: 0;
}
.video-facade:hover .play-btn {
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
}
.video-facade:active .play-btn { transform: translate(-50%, -50%); box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.video-facade .play-btn svg { width: 32px; height: 32px; margin: 0; color: #fff; }
.lv-player { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
@media (max-width: 767px) {
  .video-facade .play-btn { width: 64px; height: 64px; }
  .video-facade .play-btn svg { width: 24px; height: 24px; }
}

/* ===== Hero carousel — Apple-TV peek slider (JS sets card + lane widths) ===== */
.hero-carousel { overflow: hidden; margin: var(--space-2) 0 var(--space-5); }
.hc-track { display: flex; gap: 24px; align-items: stretch; will-change: transform; }
.hc-card {
  flex: 0 0 auto;                 /* width set inline by JS */
  box-sizing: border-box;
  border-radius: 40px;
  border: 1px solid var(--app-border);
  background-color: var(--app-surface);
  background-image: url('backgrounds/bg-hero-cd.jpg');
  background-size: cover;
  background-position: center;
  padding: var(--space-10) var(--space-11) var(--space-11);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 340px;
}
html[data-theme="dark"] .hc-card {
  background-image: linear-gradient(135deg, rgba(var(--accent-rgb),0.28), rgba(27,11,87,0.55)), url('backgrounds/bg-hero-cd.jpg');
  background-blend-mode: overlay;
}
.hc-card .hero-eyebrow { align-self: flex-start; }
.hc-card .hero-title { margin: 12px 0 0; }
.hc-card .hero-sub { margin-top: var(--space-4); }
.hc-card .hero-actions { margin-top: 28px; }
@media (max-width: 900px) {
  .hero-carousel { overflow: hidden; margin: 0 0 12px; }
  .hc-track { gap: 12px; }
  .hc-card {
    padding: 32px 24px;
    min-height: 240px;
    border-radius: 40px;
    width: 100% !important;  /* override JS inline width */
    flex: 0 0 100%;
  }
  .hc-card .hero-title { font-size: clamp(24px, 6vw, 32px); }
  .hc-card .hero-sub { font-size: 1rem; }
  .hc-card .hero-actions { gap: 8px; }
  .hc-card .hero-actions .btn { font-size: 0.9375rem; padding: var(--space-3) var(--space-5); }
}

/* ---- Carousel control ---- */
.carousel-controls { margin-top: 8px; }
.carousel-dot { width: 7px; height: 7px; }

/* ---- Aligned corner radii (MK Dons tokens) ---- */
.lesson-img { border-radius: 20px; }
.lesson-card, .prompt-box, .lesson-tips { border-radius: 28px; }
.callout { border-radius: 20px; }
.feed-thumb { border-radius: 12px; }

/* ---- More breathing room between blocks ---- */
.step-body p { margin-bottom: 16px; }
.prompt-box { margin: 28px 0; }
.step-body .callout-inline { margin-top: 28px; }
.step-img { margin-top: 32px; }
.lesson-step { padding-bottom: 40px; }
.lesson-step:last-child { padding-bottom: 0; }
.lesson-tips { margin-top: 28px; }

/* ---- Real news thumbnails on the home feed ---- */
.feed-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- round 9: hero reverted to v2 — restore v2 control sizing ---- */
.carousel-playpause { width: 44px; height: 44px; }
.carousel-playpause svg.pp-icon-play,
.carousel-playpause svg.pp-icon-pause { width: 16px; height: 16px; }

/* ---- What's New: embed the real site, crop its top header band ---- */
.embed-clip { position: relative; width: 100%; height: 100%; overflow: hidden; }
.embed-clip .embed-frame {
  position: absolute;
  left: 0;
  top: -88px;                 /* hide the embedded site's top header */
  width: 100%;
  height: calc(100% + 88px);
  border: 0;
}

/* ---- Distinct background per hero card ---- */
.hc-card.hc-lessons        { background-image: url('hero/bg1.jpg'); }
.hc-card.hc-genie-3-launch { background-image: url('hero/bg2.jpg'); }
.hc-card.hc-lord-wei-course{ background-image: url('hero/bg3.jpg'); }
html[data-theme="dark"] .hc-card.hc-lessons,
html[data-theme="dark"] .hc-card.hc-genie-3-launch,
html[data-theme="dark"] .hc-card.hc-lord-wei-course {
  background-image: linear-gradient(135deg, rgba(var(--accent-rgb),0.30), rgba(27,11,87,0.55));
}

/* =====================================================================
   V4 — COURSE EXPERIENCE (Future Lawyer Training Program)
   Max font-weight 600 (SemiBold) anywhere, per GenieAI brand.
   ===================================================================== */

/* ---- Course landing extras ---- */
.price-amount { font-size: 2.25rem; font-weight: 600; color: var(--app-text); line-height: 1; }
.price-label { font-size: 1rem; color: var(--app-text-subtle); margin-top: 4px; }
.price-note { font-size: 1rem; color: var(--app-text-muted); margin: 12px 0 0; line-height: 1.5; }
.partner-row { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-chip { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface-2); }
.partner-name { font-size: 1rem; font-weight: 600; color: var(--app-text); }
.partner-sub { font-size: 1rem; color: var(--app-text-subtle); }
.enrolled-note { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--app-purple); background: var(--app-purple-50); padding: 8px 16px; border-radius: 12px; }

.track-card { padding: 20px; border: 1px solid var(--app-border); border-radius: 28px; background: var(--app-surface); }
.track-tagline { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-purple); }
.track-card h3 { margin: var(--space-2) 0 var(--space-2); font-size: 1.125rem; font-weight: 600; color: var(--app-text); }
.track-card p { margin: 0; font-size: 1rem; color: var(--app-text-muted); line-height: 1.5; }

.module-preview-list { display: flex; flex-direction: column; gap: 12px; }
.module-preview { display: flex; gap: 16px; padding: var(--space-5); border: 1px solid var(--app-border); border-radius: 28px; background: var(--app-surface); }
.module-preview-num { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--app-purple-50); color: var(--app-purple); }
.module-preview-eyebrow { font-size: 1rem; font-weight: 600; color: var(--app-purple); text-transform: uppercase; letter-spacing: 0.03em; }
.module-preview-body h4 { margin: var(--space-1) 0 var(--space-1); font-size: 1.0625rem; font-weight: 600; color: var(--app-text); }
.module-preview-body p { margin: 0; font-size: 1rem; color: var(--app-text-muted); line-height: 1.5; }
.module-preview-meta { margin-top: 8px; font-size: 1rem; color: var(--app-text-subtle); }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field > span { display: block; font-size: 1rem; font-weight: 500; color: var(--app-text-muted); }
.field input { width: 100%; padding: 12px 16px; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface); color: var(--app-text); font-size: 1rem; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.field input:focus { outline: none; border-color: transparent; background-image: linear-gradient(var(--app-surface), var(--app-surface)), linear-gradient(135deg, #8E1AD6, #673AB7, #9C72E6); background-origin: border-box; background-clip: padding-box, border-box; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-banner { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--app-purple); background: var(--app-purple-50); border: 1px solid var(--app-border); border-radius: 12px; padding: 12px 12px; margin-bottom: 16px; }

/* ---- Learn dashboard ---- */
.learn-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.learn-welcome { margin: 8px 0 0; font-size: 1rem; color: var(--app-text-muted); }
.course-tabs { display: flex; gap: 8px; margin-top: 60px; border-bottom: 1px solid var(--app-border); }
.course-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 1rem; font-weight: 500; color: var(--app-text-subtle); text-decoration: none; margin-bottom: -1px; position: relative; }
.course-tab:hover { color: var(--app-purple); text-decoration: none; }
.course-tab:active { color: var(--app-purple); }
.course-tab.active { color: var(--app-purple); }
.course-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--app-purple); border-radius: 9999px; }

/* ---- Module accordion ---- */
.module-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.module-card { border: 1px solid var(--app-border); border-radius: 28px; background: var(--app-surface); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.2s ease; }
.module-card.open { border-color: var(--primary-200); box-shadow: var(--app-shadow-sm); }
.module-card.locked { background: var(--app-surface-2); }
.module-head { width: 100%; display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--app-text); }
/* Module summary hover = soft shadow lift (like buttons/cohort cards). Scoped to the
   head so hovering a lesson row inside doesn't lift the whole card — rows get their own
   purple-50 fill hover instead (a shadow wouldn't fit on an inner row). */
.module-card:not(.locked):has(.module-head:hover) { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.module-card:not(.locked):has(.module-head:active) { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.module-head.is-locked, .module-head:disabled { cursor: not-allowed; }
.module-index { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.0625rem; font-weight: 600; background: none; color: var(--app-purple); }
.module-index svg { width: 34px; height: 34px; stroke: url(#mgrad); }
.module-index.done { background: none; }
.module-index.done svg { width: 34px; height: 34px; stroke: url(#mgrad); }
.module-index.locked { background: none; color: #A0A0A0; border: none; }
.module-index.locked svg { stroke: #A0A0A0; }
.module-head-body { flex: 1; min-width: 0; }
.module-eyebrow { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--app-purple); }
.module-card.locked .module-eyebrow { color: #A0A0A0; }
.module-head-body h3 { margin: var(--space-1) 0 var(--space-3); font-size: 1.125rem; font-weight: 600; color: var(--app-text); }
.module-head-body p { margin: 0; font-size: 1rem; color: var(--app-text-muted); line-height: 1.5; }
.module-head-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; align-self: flex-start; gap: var(--space-3); }
.module-pill { font-size: 0.8125rem; font-weight: 500; line-height: 1; padding: 4px 12px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.module-pill.locked { background: #F9F9F9; color: #616161; border: 1px solid #F2F2F2; }
.module-pill.done { background: var(--primary-50); color: var(--app-purple); border: 1px solid var(--primary-100); }
.module-pill.prog { background: #FFFBEB; color: #B45309; border: 1px solid #FEF3C7; }
.module-pill.available { background: #F2FAEE; color: #379643; border: 1px solid #E7FBDE; }
.module-chev { color: var(--app-text-subtle); transition: transform 0.2s ease; display: inline-flex; }
.module-chev.open { transform: rotate(180deg); }
.module-body { padding: 4px 20px 20px; }
.module-locked-hint { padding: 0 24px 20px; font-size: 1rem; color: var(--app-text-subtle); display: flex; align-items: center; gap: 8px; }

/* ---- Assessment row inside a module ---- */
.assess-row { margin-top: var(--space-4); padding: 20px; border-radius: 16px; background: radial-gradient(circle at -20% 40%, #fff 25%, var(--primary-200) 140%); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border: 1px solid var(--primary-100); }
.assess-row.ready { border-color: var(--primary-100); }
.assess-info { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--app-text-muted); }
.assess-info svg { color: var(--app-purple); flex: none; }

/* ---- Certificate banner on dashboard ---- */
.cert-banner { margin-top: 24px; display: flex; align-items: center; gap: var(--space-5); padding: 20px; border: 1px dashed var(--app-border); border-radius: 28px; background: var(--app-surface-2); flex-wrap: wrap; }
.cert-banner.earned { border-style: solid; border-color: var(--primary-200); background: linear-gradient(135deg, var(--app-purple-50), var(--app-surface)); }
.cert-banner-icon { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--app-purple-50); color: var(--app-purple); }
.cert-banner.earned .cert-banner-icon { background: var(--app-purple); color: #fff; }
.cert-banner-body { flex: 1; min-width: 200px; }
.cert-banner-body h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; color: var(--app-text); }
.cert-banner-body p { margin: 0; font-size: 1rem; color: var(--app-text-muted); }

/* ---- Lesson player module strip + button-style next ---- */
.lesson-module-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--app-purple-50); border-radius: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.lms-module { font-size: 1rem; font-weight: 600; color: var(--app-purple); }
.lms-count { font-size: 1rem; color: var(--app-text-subtle); }
.lms-done { color: var(--app-purple); font-weight: 600; }
.lesson-nav .next.as-btn { padding: 20px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 16px; display: flex; flex-direction: column; gap: 4px; transition: box-shadow 0.15s ease; color: var(--app-text); cursor: pointer; font-family: inherit; text-align: right; align-items: flex-end; }
.lesson-nav .next.as-btn:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.lesson-nav .next.as-btn:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }

/* ---- Quiz / assessment ---- */
.quiz { margin-top: 8px; }
.quiz-q { border: none; padding: 0; margin: 0 0 24px; }
.quiz-q legend { font-size: 1.0625rem; font-weight: 600; color: var(--app-text); margin-bottom: 16px; display: flex; gap: 12px; align-items: flex-start; padding: 0; }
.quiz-qnum { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--app-purple-50); color: var(--app-purple); display: grid; place-items: center; font-size: 1rem; font-weight: 600; }
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px; border: 1px solid var(--app-border); border-radius: 12px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; background: var(--app-surface); }
.quiz-opt:hover { border-color: var(--app-purple); background: var(--app-purple-50); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.quiz-opt:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.quiz-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.quiz-letter { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--app-border); display: grid; place-items: center; font-size: 1rem; font-weight: 600; color: var(--app-text-subtle); }
.quiz-opt-text { flex: 1; font-size: 1rem; color: var(--app-text); }
.quiz-mark { flex: none; opacity: 0; transition: opacity 0.15s ease; color: var(--app-purple); }
.quiz-opt.selected { border-color: var(--app-purple); background: var(--app-purple-50); }
.quiz-opt.selected .quiz-letter { background: var(--app-purple); color: #fff; border-color: var(--app-purple); }
.quiz-opt.selected .quiz-mark { opacity: 1; }
.quiz-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.quiz-actions .btn-outline { padding: 12px 24px 12px 20px !important; }
.quiz-actions .btn-primary { padding: 12px 24px !important; }
.demo-inline { color: var(--app-purple); font-weight: 500; }
.quiz-result { margin-top: 24px; padding: 28px; border-radius: 28px; text-align: center; }
.quiz-result.pass { background: linear-gradient(135deg, var(--app-purple-50), var(--app-surface)); border: 1px solid var(--primary-200); }
.quiz-result.fail { background: var(--app-surface-2); border: 1px solid var(--app-border); }
.qr-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 8px; }
.quiz-result.pass .qr-icon { color: var(--app-purple); }
.quiz-result.fail .qr-icon { color: var(--app-text-subtle); }
.quiz-result h3 { margin: var(--space-2) 0; font-size: 1.375rem; font-weight: 600; color: var(--app-text); }
.quiz-result p { margin: 0 0 16px; color: var(--app-text-muted); font-size: 1rem; }
.qr-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Gate Submission form ---- */
.gate-form { display: flex; flex-direction: column; gap: 28px; }
.gate-field { display: flex; flex-direction: column; gap: 8px; }
.gate-label { font-size: 1.0625rem; font-weight: 600; color: var(--app-text); line-height: 1.3; }
.gate-desc { font-size: 1rem; color: #212121; line-height: 1.5; margin: 0; }
.gate-textarea { width: 100%; padding: 16px; font-family: inherit; font-size: 1rem; line-height: 1.55; color: #212121; background: #FFFFFF; border: 1px solid #F2E7FE; border-radius: 16px; resize: vertical; min-height: 100px; transition: border-color 0.2s ease, background 0.2s ease; }
.gate-textarea::-webkit-resizer{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M7 11L11 7M4.5 11L11 4.5M2 11L11 2' stroke='%23D3B4F7' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;}
.gate-textarea:focus { outline: none; border-color: var(--primary-500); background: #FFFFFF; }
.gate-textarea:disabled { opacity: 0.6; cursor: not-allowed; background: var(--app-surface-2); }
.gate-textarea::placeholder { color: var(--app-text-subtle); }
.gate-tip { margin-top: 56px; margin-bottom: 56px; border-radius: 16px; }
.gate-pass-note { background: var(--app-purple-50); border: 1px solid var(--app-purple-100); border-radius: 20px; padding: 16px 20px; margin-bottom: 4px; }
.gate-pass-note p { margin: 0; font-size: 1rem; color: var(--app-text-muted); line-height: 1.5; }
.gate-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.gate-actions .btn-outline { padding: 12px 24px 12px 20px !important; }
.gate-actions .btn-primary { padding: 12px 24px !important; }

/* Gate submitted result card */
.gate-submitted-card { max-width: 600px; margin: 60px auto 40px; text-align: center; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 28px; padding: 48px 40px; }
.gate-submitted-icon { margin-bottom: 20px; }
.gate-submitted-card h3 { font-size: 1.625rem; font-weight: 500; line-height: 1.15; margin-bottom: 12px; }
.gate-submitted-card p { font-size: 1.0625rem; line-height: 1.65; color: var(--app-text-muted); margin-bottom: 0; }

.gate-passed-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; color: var(--app-purple); }

/* ---- Certificate document ---- */
.cert-doc { margin: 8px 0 24px; }
.cert-doc-border { position: relative; border: 2px solid var(--app-purple); border-radius: 16px; padding: 44px; background: var(--app-surface); box-shadow: var(--app-shadow-md); overflow: hidden; }
.cert-doc-border::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, var(--app-purple-50), transparent 55%); pointer-events: none; }
.cert-doc-border > * { position: relative; z-index: 1; }
.cert-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cert-logos { display: flex; align-items: center; gap: 16px; }
.cert-logo-name { font-size: 1rem; font-weight: 600; color: var(--app-text); letter-spacing: 0.01em; }
.cert-logo-sep { width: 1px; height: 18px; background: var(--app-border-strong); display: inline-block; }
.cert-issuer { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-purple); }
.cert-doc-body { text-align: center; padding: 28px 0 24px; }
.cert-kicker { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--app-text-subtle); }
.cert-this { margin-top: 20px; font-size: 1rem; color: var(--app-text-muted); }
.cert-recipient { font-size: 2.25rem; font-weight: 600; color: var(--app-text); margin: 8px 0 12px; letter-spacing: 0.01em; }
.cert-statement { font-size: 1rem; color: var(--app-text-muted); }
.cert-program { font-size: 1.375rem; font-weight: 600; color: var(--app-purple); margin: 8px 0 16px; }
.cert-blurb { max-width: 560px; margin: 0 auto; font-size: 1rem; color: var(--app-text-muted); line-height: 1.6; }
.cert-doc-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 8px; flex-wrap: wrap; }
.cert-sig-block { text-align: center; }
.cert-sig-line { font-size: 1rem; font-weight: 600; color: var(--app-text); }
.cert-sig-role { font-size: 1rem; color: var(--app-text-subtle); margin-top: 4px; }
.cert-seal { flex: none; width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--app-purple); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--app-purple); }
.cert-seal span { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-top: 4px; }
.cert-meta-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--app-border); font-size: 1rem; color: var(--app-text-subtle); }
.cert-id { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--app-purple); }
.cert-actions-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cert-verify-note { margin-top: 16px; font-size: 1rem; color: var(--app-text-subtle); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.cert-verify-note strong { color: var(--app-text); font-weight: 600; }

/* ---- Course responsive ---- */
@media (max-width: 640px) {
  .learn-head-row { flex-direction: column; }
  .module-head { padding: 16px; gap: 12px; }
  .module-head-right { flex-direction: row; align-items: center; }
  .cert-doc-border { padding: 28px 20px; }
  .cert-recipient { font-size: 1.75rem; }
  .cert-doc-foot { gap: 16px; }
}

/* ---- Print: certificate only ---- */
@media print {
  .sidebar, .header, .sidebar-toggle, .lesson-breadcrumb, .page-header,
  .cert-actions-row, .cert-verify-note, .toast { display: none !important; }
  .app, .main-col, .main, .scroll { display: block !important; margin: 0 !important; }
  .cert-doc-border { box-shadow: none; }
}

/* =====================================================================
   V4.1 — Round-2 refinements
   ===================================================================== */

/* ---- Course landing: full-width about, fact strip, pricing block ---- */
.course-about { max-width: 760px; color: var(--app-text-muted); line-height: 1.65; }
.course-about p { margin: 0 0 16px; }
.pricing-block .pricing-line { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.pricing-amount { font-size: 2.5rem; font-weight: 600; color: var(--app-text); line-height: 1; }
.pricing-label { font-size: 1rem; color: var(--app-text-subtle); }
.pricing-note { max-width: 640px; margin: 0 0 12px; font-size: 1rem; color: var(--app-text-muted); line-height: 1.6; }
.pricing-supported { max-width: 640px; margin: 0; font-size: 1rem; color: var(--app-text-subtle); line-height: 1.6; }
.enrolled-note a { display: inline-flex; align-items: center; gap: 4px; color: var(--app-purple); font-weight: 600; margin-left: 4px; }

/* ---- Media library ---- */
.media-section { padding-top: 28px; }
.doc-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface); text-decoration: none; color: var(--app-text); transition: border-color 0.15s ease, box-shadow 0.2s ease; }
.doc-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--app-purple-50); color: var(--app-purple); }
.doc-body { flex: 1; min-width: 0; }
.doc-format { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-purple); margin-bottom: 4px; }
.doc-body h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; color: var(--app-text); line-height: 1.35; }
.doc-meta { font-size: 1rem; color: var(--app-text-subtle); }
.doc-action { flex: none; color: var(--app-text-subtle); margin-top: 4px; }

/* ---- Certificate: brand background, locked light palette, layout fixes ---- */
.cert-doc-border {
  background: #FDFDFD url('backgrounds/bg-hero-cd.jpg') center / cover no-repeat;
  border-color: #673AB7;
}
.cert-doc-border::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.62) 55%, rgba(255, 255, 255, 0.30) 100%);
}
/* The certificate face always reads as a light document, in both themes. */
.cert-doc-border .cert-kicker { color: #616161; text-indent: 0.18em; }
.cert-doc-border .cert-this, .cert-doc-border .cert-statement { color: #424242; }
.cert-doc-border .cert-recipient { color: #212121; }
.cert-doc-border .cert-program { color: #673AB7; }
.cert-doc-border .cert-blurb { color: #424242; }
.cert-doc-border .cert-sig-line { color: #212121; }
.cert-doc-border .cert-sig-role { color: #616161; }
.cert-doc-border .cert-seal { border-color: #673AB7; color: #673AB7; }
.cert-doc-border .cert-meta-bar { color: #616161; border-top-color: rgba(var(--accent-rgb), 0.18); }
.cert-doc-border .cert-id { color: #673AB7; }
.cert-doc-border .cert-logo-sep { background: rgba(var(--accent-rgb), 0.25); }

.cert-lockup { height: 30px; width: auto; display: block; }
.cert-supporters { display: flex; align-items: center; gap: 12px; }
.cert-supported-label { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #616161; margin-right: 4px; }
.cert-supporter { font-size: 1rem; font-weight: 600; color: #212121; letter-spacing: 0.01em; }

.cert-actions-row { justify-content: flex-end; }
.cert-verify-note { align-items: flex-start; }
.cert-verify-note svg { flex: none; margin-top: 3px; }

@media print {
  .cert-doc-border { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =====================================================================
   V4.2 — Brand alignment with Design System v7
   Cards: white surface, #F2E7FE border, 28 px radius (concentric inside).
   Buttons/badges stay pill. Bigger, even vertical rhythm on the landing.
   ===================================================================== */

/* ---- Course landing: full-width text + generous rhythm ---- */
.course-landing .page-lede { max-width: none; font-size: 1.125rem; line-height: 1.55; }
.course-landing .course-about { max-width: none; font-size: 1.0625rem; }
.course-landing .course-about p { margin: 0 0 16px; }
.course-landing .section { margin: 72px 0 0; }
.course-landing .section-head { margin-bottom: 28px; }
.course-landing .pricing-note,
.course-landing .pricing-supported { max-width: none; }

/* ---- Landing CTA row (after the fact strip) ---- */
.landing-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 32px; }

/* ---- Light CTA card under the pricing paragraphs ---- */
.pricing-cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: var(--space-7);
  padding: 24px 28px;
  border: 1px solid var(--app-border);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--app-surface) 35%, var(--app-purple-50) 100%);
}
.pricing-cta-text { margin: 0; font-size: 1rem; font-weight: 500; color: var(--app-text); }

/* ---- Final "Ready to start?" CTA card ---- */
.cta-final-card {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 40px;
  border: 1px solid var(--primary-200);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--app-surface) 35%, var(--app-purple-50) 100%);
}
.cta-final-body { flex: 1; min-width: 260px; }
.cta-final-body h2 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 600; color: var(--app-text); }
.cta-final-body p { margin: 0; font-size: 1rem; color: var(--app-text-muted); line-height: 1.55; }

/* ---- Card radii per radius scale (28 outer, 22 medium, concentric inner) ---- */
.module-card { border-radius: 28px; }
.module-preview { border-radius: 28px; padding: 24px; }
.track-card { border-radius: 28px; padding: 28px; }
.doc-card { border-radius: 16px; }
.cert-banner { border-radius: 28px; }
.quiz-result { border-radius: 28px; }
.quiz-opt { border-radius: 16px; }

.assess-row { border-radius: 16px; }
.cert-doc-border { border-radius: 28px; }
.enrolled-note { border-radius: 9999px; padding: 8px 20px; }
.demo-banner { border-radius: 12px; }
.lesson-module-strip { border-radius: 12px; }
.field input { border-radius: 16px; }

/* ---- Cards are always white (locked/placeholder states signal via content, not surface) ---- */
.module-card.locked { background: var(--app-surface); }
.module-card.locked .module-head-body { opacity: 0.7; }
.cert-banner { background: var(--app-surface); }

/* ---- Interactive card hover per design system ---- */
.doc-card:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); }
.doc-card:active { box-shadow: inset 0 0 6px rgba(var(--accent-rgb), 0.15); }
.doc-card { transition: box-shadow 0.15s ease, border-color 0.15s ease; }

/* ---- Course landing: responsive ---- */
@media (max-width: 880px) {
  .course-landing .section { margin-top: 56px; }
}
@media (max-width: 560px) {
  .cert-supporters { flex-wrap: wrap; }
}

/* ---- Prompt-meter (FLF Module 1 · L5) ---- */
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
@media(max-width:760px){.pm-grid{grid-template-columns:1fr;}}
.pm-input{width:100%;min-height:152px;border:1px solid var(--app-border);border-radius:16px;padding:16px;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--app-text);background:var(--app-surface);resize:vertical;}
.pm-input:focus{outline:none;border-color:var(--app-purple);box-shadow:0 0 0 3px var(--app-purple-soft);}
.pm-actions{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;}
.pm-gauge-box{text-align:center;color:var(--app-text);}
.pm-gauge{max-width:100%;height:auto;}
.pm-label{font-size:1.25rem;font-weight:600;margin-top:4px;}
.pm-score{font-size:1rem;color:var(--app-text-subtle);margin-bottom:8px;}
.pm-criteria{text-align:left;margin-top:8px;}
.pm-crit{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--app-border);font-size:1rem;}
.pm-crit:first-child{border-top:0;}
.pm-ic{flex:0 0 24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:#fff;margin-top:0;background:#cfcfd8;}
.pm-crit.hit .pm-ic{background:#1faa6b;}
.pm-ct{flex:1;}
.pm-ct b{font-weight:600;}
.pm-tip{display:block;color:var(--app-text-subtle);font-size:1rem;margin-top:4px;}
.pm-crit.hit .pm-tip{display:none;}

/* ---- Lecture numbered circles (no dash) ---- */
.lb-numbered{display:flex;align-items:center;gap:12px;}
.lb-num{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--app-purple);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;}
.lb-num-title{font-weight:600;}

/* ---- Glossary as a dictionary ---- */
.glossary-dl{border:1px solid var(--app-border);border-radius:28px;overflow:hidden;background:var(--app-surface);margin:8px 0 8px;}
.gloss-row{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px 20px;border-top:1px solid var(--app-border);}
.gloss-row:first-child{border-top:0;}
.gloss-row dt{font-weight:600;color:var(--app-text);}
.gloss-row dd{margin:0;color:var(--app-text);}
@media(max-width:640px){.gloss-row{grid-template-columns:1fr;gap:4px;}}

/* ---- Step (number vs title) alignment ---- */
.lesson-step{grid-template-columns:28px 1fr;gap:0 16px;align-items:start;}
.lesson-step .step-num{width:28px;height:28px;margin-top:4px;}
.lesson-step .step-body h3{margin:0 0 8px;line-height:1.3;}
.lesson-step:not(:last-child)::before{top:42px;bottom:6px;}

/* ---- Clickable breadcrumb ---- */
.crumb-link{color:var(--app-text-subtle);text-decoration:none;}
.crumb-link:hover{color:var(--app-purple);text-decoration:underline;}

/* ---- Understated pricing panel ---- */
.pricing-panel{display:grid;grid-template-columns:1.1fr 1fr auto;gap:24px;align-items:center;background:var(--app-surface);border:1px solid var(--app-border);border-radius:20px;padding:24px 28px;box-shadow:var(--app-shadow-sm);}
@media(max-width:760px){.pricing-panel{grid-template-columns:1fr;gap:16px;}}
.pp-eyebrow{color:var(--app-purple);font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;}
.pp-price{font-size:1.8rem;font-weight:600;margin-top:4px;}
.pp-price-label{font-size:1rem;font-weight:500;color:var(--app-text-subtle);}
.pp-note{color:var(--app-text-subtle);font-size:1rem;margin:8px 0 0;}
.pp-includes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:1rem;}
.pp-includes li{display:flex;gap:8px;align-items:flex-start;color:var(--app-text-muted);}
.pp-includes li svg{color:#1faa6b;flex:0 0 auto;margin-top:3px;}
.pp-action{display:flex;justify-content:flex-end;}

/* ---- Onboarding wizard (prototype) ---- */
.onb{max-width:900px;margin:0 auto;}
.onb-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 24px;}
.onb-step{display:flex;align-items:center;gap:8px;color:var(--app-text-subtle);font-size:1rem;font-weight:500;}
.onb-step-num{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--app-border);color:var(--app-text-subtle);font-size:1rem;font-weight:500;}
.onb-step.current{color:var(--app-text);}
.onb-step.current .onb-step-num{background:var(--app-purple);color:#fff;}
.onb-step.done .onb-step-num{background:#1faa6b;color:#fff;}
.onb-step-sep{width:28px;height:3px;background:var(--app-border);border-radius:999px;}
.onb-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:28px;padding:28px;box-shadow:var(--app-shadow-sm);display:flex;flex-direction:column;gap:var(--space-4);}
.onb-card .field{margin-bottom:0;}
.onb-head{margin-bottom:16px;}
.onb-full{width:100%;justify-content:center;margin-bottom:12px;}
.onb-or{display:flex;align-items:center;text-align:center;color:var(--app-text-subtle);font-size:1rem;margin:16px 0;}
.onb-or::before,.onb-or::after{content:'';flex:1;height:1px;background:var(--app-border);}
.onb-or span{padding:0 12px;}
.onb-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.onb-grid{grid-template-columns:1fr;}}
.onb-field{display:flex;flex-direction:column;gap:8px;}
.onb-field-exp{margin-bottom:16px;display:flex;flex-direction:column;gap:8px;}
.field-lbl{display:block;font-weight:500;font-size:1rem;}
.field-optional{font-weight:400;color:var(--app-text-muted);font-size:0.875rem;}
.field-hint{margin:0;color:var(--app-text-subtle);font-size:1rem;}
/* Small privacy note under a field (e.g. LinkedIn). Overrides the .field > span label styling. */
.field > span.field-note{display:inline-flex;align-items:center;gap:4px;margin:8px 0 0;font-size:0.8125rem;font-weight:400;color:var(--app-text-subtle);}
.field > span.field-note svg{color:var(--app-text-subtle);flex:none;}
/* Stripe embedded checkout container — brand-purple frame with even padding around the form
   (Stripe's iframe is purple, so this reads as one cohesive card with left/right/bottom padding). */
.stripe-embed{margin-top:16px;min-height:300px;border-radius:20px;overflow:hidden;background:#673AB7;padding:0 20px 40px;}
.stripe-embed iframe{display:block;border-radius:12px;}
.stripe-embed-note{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;color:rgba(255,255,255,0.92);font-size:0.9375rem;line-height:1.5;padding:44px 20px;}
.stripe-embed-note svg{flex:none;}
.onb-linkedin.connected{border-color:#1faa6b;color:#1faa6b;}
.onb-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px;}
.onb-actions .btn-outline{padding:12px 24px 12px 20px;}
.onb-actions .btn-primary{padding:12px 20px 12px 24px;}
.onb-actions-center{justify-content:center;}
.onb-fine{display:flex;align-items:center;gap:8px;color:var(--app-text-subtle);font-size:1rem;margin-top:16px;justify-content:center;}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--app-purple-soft);color:var(--app-purple);border-radius:999px;padding:8px 8px 8px 12px;font-size:1rem;font-weight:500;}
.chip-remove{display:inline-flex;align-items:center;border:0;background:transparent;color:inherit;cursor:pointer;padding:4px;border-radius:50%;}
.chip-remove:hover{background:rgba(var(--accent-rgb),0.15);}
.chip-add-input{border:1px dashed var(--primary-100);border-radius:999px;padding:8px 16px;font-family:inherit;font-size:1rem;width:auto;background:transparent;color:var(--app-text);}
.chip-add-input:focus{outline:none;border-color:var(--app-purple);}
.onb-summary{background:var(--app-surface-2);border:1px solid var(--app-border);border-radius:28px;padding:16px 20px;margin-bottom:16px;}
.onb-sum-row{display:flex;justify-content:space-between;font-weight:600;font-size:1.05rem;}
.onb-sum-price{color:var(--app-purple);}
.onb-sum-sub{color:var(--app-text-subtle);font-size:1rem;margin:4px 0 12px;}
.onb-incl{margin:0;}
.onb .field textarea{width:100%;border:1px solid var(--app-border);border-radius:16px;padding:12px;font-family:inherit;font-size:0.875rem;color:var(--app-text);background:var(--app-surface);resize:vertical;}
.onb .field textarea::-webkit-resizer,
.modal textarea::-webkit-resizer{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M7 11L11 7M4.5 11L11 4.5M2 11L11 2' stroke='%23D3B4F7' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;}
.onb .field textarea:focus{outline:none;border-color:var(--app-purple);}
.onb .field input::placeholder,.onb .field textarea::placeholder{font-size:0.875rem;}

/* ---- Onboarding polish: width, linked account, LinkedIn button, password meter ---- */
.onb-card-wide{max-width:none;grid-column:1 / -1 !important;padding:40px;}
/* Narrower steps (account/payment) stay comfortably centred within the wide page */
.onb-card:not(.onb-card-wide){max-width:560px;margin-left:auto;margin-right:auto;}
/* Deep-link scroll targets (nudge card -> profile) clear the sticky header. */
#pr-photo,#pr-intro,#pr-story,#pr-about,#pr-linkedin{scroll-margin-top:calc(var(--header-height) + 20px);}

.onb-account{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-5);}
.onb-account-photo{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--app-surface);box-shadow:0 2px 12px rgba(0,0,0,.12);flex:none;}
.onb-account-name{font-size:1.5rem;font-weight:600;line-height:1.15;display:flex;align-items:center;gap:8px;}
.onb-account-sub{color:var(--app-text-subtle);font-size:1rem;margin-top:var(--space-1);display:flex;align-items:center;gap:var(--space-2);}

/* -- Profile photo row -- */
.onb-photo-row{display:flex;align-items:center;gap:28px;margin:40px 0;}
.onb-avatar{position:relative;width:140px;height:140px;border-radius:50%;flex:none;overflow:visible;}
.onb-avatar-img{width:140px;height:140px;border-radius:50%;object-fit:cover;object-position:50% 40%;box-shadow:0 0 0 1px var(--primary-100);}
.onb-avatar-initials{width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--app-purple);color:#fff;font-size:1.75rem;font-weight:600;letter-spacing:0.02em;box-shadow:0 0 0 1px var(--primary-100);}
.onb-avatar-edit{position:absolute;bottom:4px;right:4px;width:30px;height:30px;border-radius:50%;background:var(--app-surface);border:1px solid var(--app-border);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(108,93,211,.18);transition:background .15s;}
.onb-avatar-edit:hover{background:var(--app-bg);}
.onb-linked-badge{display:inline-flex;align-items:center;font-size:0.8125rem;font-weight:500;color:#1faa6b;background:rgba(31,170,107,.08);padding:1px 8px;border-radius:999px;}

/* -- Email privacy note -- */
.onb-email-note{display:flex;align-items:center;gap:4px;font-size:0.8125rem;color:var(--app-text-subtle);margin-top:4px;}

/* -- LinkedIn row -- */
.onb-linkedin-row{display:flex;align-items:center;gap:12px;margin-top:4px;margin-bottom:16px;}
.onb-linkedin-row .btn-sm{padding:12px 24px;}
.onb-linkedin-connected{display:inline-flex;align-items:center;gap:8px;color:#1faa6b;font-size:1rem;font-weight:500;text-decoration:none;}
.onb-linkedin-connected:hover{opacity:.75;}

/* -- Media pairs -- */
.media-pairs{display:flex;flex-direction:column;gap:12px;}
.media-pair{display:flex;flex-direction:column;gap:8px;position:relative;}
.media-pair input{width:100%;padding:12px 12px;border:1px solid var(--app-border);border-radius:16px;font:inherit;background:transparent;color:var(--app-text);box-sizing:border-box;}
.media-remove{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:transparent;color:var(--app-text-subtle);cursor:pointer;border-radius:8px;}
.media-remove:hover{background:var(--app-bg);color:var(--app-text);}
.btn-add-media{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--app-purple);font:inherit;font-size:0.9375rem;font-weight:500;cursor:pointer;padding:8px 0;margin-top:4px;}
.btn-add-media:hover{opacity:.75;}
.btn-icon{border:0;background:transparent;cursor:pointer;}

/* -- Work experience entries -- */
.exp-entries{display:flex;flex-direction:column;gap:12px;}
.exp-entries .btn-add-media{margin-top:0;}
.exp-entry{position:relative;border:1px solid var(--app-border);border-radius:28px;padding:20px 20px 24px;background:var(--app-surface);}
.exp-entry .field{margin-top:12px;margin-bottom:0;}
.exp-entry .field:first-of-type{margin-top:0;}
.exp-remove{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--app-border);background:var(--app-bg);color:var(--app-text-subtle);cursor:pointer;border-radius:50%;}
.exp-remove:hover{background:var(--app-surface);color:var(--app-text);}
.exp-dates{display:flex;gap:20px;margin-top:12px;}
.exp-date-group{flex:1;}
.field-lbl-sm{display:block;font-weight:500;font-size:0.875rem;margin-bottom:4px;color:var(--app-text);}
.exp-date-row{display:flex;gap:8px;}
.exp-date-row select{flex:1;padding:12px 36px 12px 16px;border:1px solid var(--app-border);border-radius:16px;font:inherit;font-size:0.9375rem;color:var(--app-text);-webkit-appearance:none;appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;}
.exp-date-row select:disabled{opacity:0.4;}
.exp-present-lbl{display:flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--app-text-muted);margin-top:8px;cursor:pointer;}
.exp-present-lbl input{accent-color:var(--app-purple);}
.exp-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}
.exp-card{border:1px solid var(--app-border);border-radius:16px;padding:16px;background:var(--app-surface);overflow-wrap:anywhere;word-break:break-word;}
.exp-card + .exp-card{margin-top:12px;}
.exp-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.exp-card-info{display:flex;flex-direction:column;gap:4px;}
.exp-card-company{font-weight:600;font-size:1rem;color:var(--app-text);}
.exp-card-title{font-weight:400;font-size:0.9375rem;color:var(--app-text-muted);}
.exp-card-date{font-size:0.8125rem;color:var(--app-text-muted);}
/* Read-only CV entry on the profile view: role headline + "Company · dates" line. */
.exp-card-role{font-weight:600;font-size:1rem;color:var(--app-text);}
.exp-card-meta{font-size:0.875rem;color:var(--app-text-muted);}
.exp-card-desc{margin:8px 0 0;font-size:0.9375rem;color:#212121;line-height:1.5;white-space:pre-line;}
.exp-edit{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--app-border);background:var(--app-bg);color:var(--app-text-subtle);cursor:pointer;border-radius:50%;flex-shrink:0;}
.exp-edit:hover{background:var(--app-surface);color:var(--app-text);}
.media-card{border:1px solid var(--app-border);border-radius:16px;padding:16px;background:var(--app-surface);}
.media-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.media-card-info{display:flex;flex-direction:column;gap:4px;min-width:0;}
.media-card-title{font-weight:500;font-size:1rem;color:var(--app-text);}
.media-card-url{font-size:0.875rem;color:var(--app-purple);text-decoration:none;display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;}
.media-card-url .media-link-ic{flex:none;opacity:.55;}
.media-card-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.media-card-url:hover{opacity:.75;}
.media-edit{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--app-border);background:var(--app-bg);color:var(--app-text-subtle);cursor:pointer;border-radius:50%;flex-shrink:0;}
.media-edit:hover{background:var(--app-surface);color:var(--app-text);}
.media-form{border:1px solid var(--app-border);border-radius:28px;padding:20px 20px 24px;background:var(--app-surface);}
.media-form .field{margin-top:12px;margin-bottom:0;}
.media-form .field:first-of-type{margin-top:0;}
.media-pairs{display:flex;flex-direction:column;gap:8px;}
.media-pairs .btn-add-media{margin-top:0;}

.onb-linkedin{display:inline-flex;align-items:center;gap:8px;width:auto;padding:8px 16px;border:1px solid var(--app-border-strong);border-radius:999px;background:var(--app-surface);color:var(--app-text);font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;}
.onb-linkedin:hover{box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);}
.onb-linkedin:active{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.onb-linkedin.connected{border-color:#1faa6b;color:#1faa6b;}
.onb-linkedin svg{flex:none;}
.field-error,.field-error:focus{border-color:#E53935 !important;box-shadow:0 0 0 2px rgba(229,57,53,.18) !important;background-image:none !important;background-clip:border-box !important;}
.onb-section-divider{border-top:1px solid var(--app-border);margin:12px 0;}
.onb-sso{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:12px;}
.onb-sso-label{font-size:1.25rem;color:#212121;font-weight:500;margin-bottom:8px;}
.onb-sso-stack{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
/* Only one SSO provider available (e.g. Microsoft hidden): keep the single button at
   its ORIGINAL half-row width (one grid track = 50% minus half the 12px gap) and
   align it flush LEFT (same left edge as the Email/Password fields) — not stretched,
   not centered. */
.onb-sso-stack.solo{grid-template-columns:calc(50% - 6px);justify-content:start;}
.onb-sso-btn{padding:12px 24px;justify-content:center;gap:8px;font-size:1rem;line-height:1;background:var(--app-surface);}
.onb-sso-btn:hover{box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);color:var(--app-text);}
.onb-sso-btn:active{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.onb-sso-ic{width:22px;height:22px;flex:none;display:block;}
.onb-login-link{color:var(--app-purple);text-decoration:underline;font-weight:500;}
.onb-terms{font-size:0.875rem;color:var(--app-text-subtle);text-align:center;margin-top:16px;}
.onb-terms-link{text-decoration:underline;cursor:pointer;}
.header-greeting{font-size:1rem;font-weight:500;color:var(--app-text);display:inline-flex;align-items:center;}

/* ---------- User pill (logged-in header) ---------- */
.user-pill{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  height:40px;padding:0 12px 0 4px;border-radius:9999px;
  border:1px solid var(--app-border);background:var(--app-bg);
  cursor:pointer;transition:border-color .15s,box-shadow .15s;
  -webkit-user-select:none;user-select:none;outline:none;
}
.user-pill:hover{box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);}
.user-pill:active{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.user-pill-avatar{
  width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--app-purple);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:600;line-height:1;
  /* Clean 1px hairline ring (not a blurred/doubled border). box-shadow sits outside
     the box, so overflow:hidden clips the image to the circle without clipping the ring. */
  box-shadow:0 0 0 1px var(--primary-100);
}
.user-pill-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;}
.user-pill-name{font-size:1rem;font-weight:500;line-height:1;color:var(--app-text);white-space:nowrap;}
.user-pill-chev{width:20px;height:20px;margin-right:-1px;color:var(--app-text-subtle);transition:transform .15s;flex:none;}
.user-pill[aria-expanded="true"] .user-pill-chev{transform:rotate(180deg);}

/* dropdown */
.user-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;min-width:240px;
  background:var(--app-bg);border:1px solid var(--app-border);border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);padding:8px 0;
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .15s,transform .15s;z-index:600;
}
.user-pill[aria-expanded="true"] .user-dropdown{opacity:1;pointer-events:auto;transform:translateY(0);}
.user-dropdown-item{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;
  border:none;background:none;cursor:pointer;font-size:0.875rem;font-weight:400;
  color:var(--app-text);text-align:left;transition:background .1s;font-family:inherit;
}
.user-dropdown-item:hover{background:var(--app-surface);}
.user-dropdown-item svg{width:16px;height:16px;color:var(--app-text);flex:none;opacity:.55;}
.user-dropdown-sep{height:1px;background:var(--app-border);margin:4px 0;}

/* progress header in dropdown */
.ud-progress-header{
  display:flex;align-items:center;gap:12px;padding:12px 16px 12px;
}
.ud-progress-ring{position:relative;width:40px;height:40px;flex:none;}
.ud-ring-svg{width:100%;height:100%;}
.ud-ring-pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:0.6875rem;font-weight:600;color:var(--app-text);
}
.ud-progress-info{display:flex;flex-direction:column;gap:4px;}
.ud-progress-label{font-size:0.8125rem;color:var(--app-text-muted);line-height:1.3;font-weight:400;}
.ud-status-badge{
  display:inline-flex;align-items:center;font-size:0.8125rem;font-weight:500;
  padding:4px 12px;border:1px solid transparent;border-radius:9999px;width:fit-content;line-height:1;letter-spacing:0.02em;
}
.ud-status-fellow{background:var(--primary-50);color:var(--app-purple);border-color:var(--primary-100);}
.ud-status-graduate{background:#F2FAEE;color:#379643;border-color:#E7FBDE;}

/* continue learning highlight */
.ud-continue{color:var(--primary-hover-text, var(--app-purple)) !important;font-weight:500;}
.ud-continue svg{color:var(--primary-hover-text, var(--app-purple)) !important;opacity:1 !important;}

/* locked certificate */
.ud-locked{opacity:.5;cursor:default;}
.ud-locked:hover{background:none;}
.ud-lock-icon{width:12px !important;height:12px !important;margin-left:auto;opacity:.4 !important;}

/* referral item */
.ud-referral{color:var(--primary-hover-text, var(--app-purple)) !important;}
.ud-referral svg{color:var(--primary-hover-text, var(--app-purple)) !important;opacity:.8 !important;}

/* ---------- Accent colour swatches ---------- */
.setting-row-block{flex-wrap:wrap;}
.accent-swatches{display:flex;gap:12px;margin-top:4px;}
.accent-swatch{
  position:relative;width:40px;height:40px;border-radius:50%;
  border:2px solid transparent;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color .15s, box-shadow .2s ease, transform .1s ease;
}
.accent-swatch.active{border-color:var(--sw);}
.accent-swatch:hover{box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);}
.accent-swatch:active{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.sw-dot{
  width:28px;height:28px;border-radius:50%;
  background:var(--sw, var(--app-purple));display:block;
}
.accent-custom{
  overflow:visible;
  border:none;
  background:conic-gradient(#E91E63, #FF9800, #FFEB3B, #4CAF50, #2196F3, #673AB7, #E91E63);
  padding:4px;
}
.accent-custom .sw-dot{
  width:100%;height:100%;border-radius:50%;
  background:var(--sw, var(--app-bg));
  box-shadow:none;
}
.accent-custom.active{
  border:none;
}
.accent-picker-icon{display:none;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Custom colour picker popover */
.accent-swatches{position:relative;}
.accent-color-input{
  position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none;
}
.accent-custom{cursor:pointer;}

/* On-brand custom colour picker popover */
.cpick{position:fixed;z-index:1000;width:240px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:16px;box-shadow:var(--app-shadow-lg);padding:12px;}
.cpick-area{position:relative;width:100%;height:150px;border-radius:12px;cursor:crosshair;touch-action:none;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12);}
.cpick-handle{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none;}
.cpick-row{display:flex;align-items:center;gap:12px;margin-top:12px;}
.cpick-eye{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--app-text-muted);border:1px solid var(--app-border);background:var(--app-surface);transition:background .15s,color .15s;}
.cpick-eye:hover{background:var(--app-purple-soft);color:var(--app-purple);}
.cpick-current{width:32px;height:32px;flex:0 0 auto;border-radius:50%;border:1px solid var(--app-border);}
.cpick-hue{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:12px;border-radius:9999px;background:linear-gradient(to right,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);outline:none;cursor:pointer;}
.cpick-hue::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4);cursor:pointer;}
.cpick-hue::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4);cursor:pointer;}
.cpick-hexrow{display:flex;align-items:center;gap:8px;margin-top:12px;border:1px solid var(--app-border);border-radius:12px;padding:8px 12px;transition:border-color .15s;}
.cpick-hexrow:focus-within{border-color:var(--app-purple);}
.cpick-hexlbl{font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--app-text-subtle);}
.cpick-hash{color:var(--app-text-subtle);}
.cpick-hex{flex:1;min-width:0;border:0;background:transparent;outline:none;font-family:inherit;font-size:.9375rem;letter-spacing:.06em;text-transform:uppercase;color:var(--app-text);}

@media(max-width:600px){.onb-sso{flex-direction:column;}.onb-sso .onb-sso-btn{width:100%;}}

.pw-meter{display:none;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-3);}
.pw-meter[data-level="1"],.pw-meter[data-level="2"],.pw-meter[data-level="3"]{display:flex;}
.pw-meter-track{width:180px;height:8px;border-radius:999px;background:var(--app-border);overflow:hidden;flex:none;}
.pw-meter-fill{display:block;height:100%;width:0;border-radius:999px;background:#e5484d;transition:width .4s cubic-bezier(.22,.61,.36,1),background .4s ease;}
.pw-meter[data-level="1"] .pw-meter-fill{width:33%;background:#e5484d;}
.pw-meter[data-level="2"] .pw-meter-fill{width:66%;background:#f5a623;}
.pw-meter[data-level="3"] .pw-meter-fill{width:100%;background:#1faa6b;}
.pw-meter-label{font-size:1rem;color:var(--app-text-subtle);}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:var(--space-10);}
.pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;background:transparent;color:var(--app-text-subtle);cursor:pointer;border-radius:8px;}
.pw-toggle:hover{color:var(--app-text);background:var(--app-purple-50);}
.pw-reqs-title{font-size:1rem;font-weight:600;color:var(--app-text);margin-top:var(--space-4);}
.pw-reqs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.pw-req{display:inline-flex;align-items:center;gap:8px;font-size:1rem;color:var(--app-text);}
.pw-req-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;}
.pw-req-dot{width:5px;height:5px;border-radius:50%;background:var(--app-text-subtle);}
.pw-req-check{display:none;color:var(--app-purple);}
.pw-req-tx{transition:color .2s ease;}
.pw-req.met .pw-req-dot{display:none;}
.pw-req.met .pw-req-check{display:inline-flex;}
.pw-req.met .pw-req-tx{color:var(--app-text-subtle);text-decoration:line-through;}
@media(max-width:600px){.onb-account-photo{width:88px;height:88px;}.onb-account-name{font-size:1.3rem;}}

/* ---- Course: top CTA, trust strip, FAQ, single offer panel ---- */
.course-top-cta{margin:20px 0 4px;}

.trust-strip{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:16px 20px;border:1px solid var(--app-border);border-radius:28px;background:var(--app-surface);}
.trust-item{display:inline-flex;align-items:center;gap:8px;font-size:1rem;color:var(--app-text-muted);font-weight:500;}
.trust-item svg{color:var(--app-purple);flex:0 0 auto;}

.faq{display:flex;flex-direction:column;gap:12px;}
.faq-item{border:1px solid var(--app-border);border-radius:28px;background:var(--app-surface);overflow:hidden;}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-weight:600;font-size:1rem;color:var(--app-text);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{color:var(--app-purple);transition:transform .2s;display:inline-flex;flex:0 0 auto;}
.faq-item[open] .faq-plus{transform:rotate(90deg);}
.faq-a{padding:0 20px 20px;color:var(--app-text-subtle);font-size:1rem;line-height:1.6;}

/* ---- Next-word prediction demo (L3) ---- */
.pd-wrap{border:1px solid var(--app-border);border-radius:16px;padding:20px;background:var(--app-surface-2);}
.pd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.pd-eyebrow{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--app-purple);}
.pd-sentence{font-size:1.2rem;font-weight:500;line-height:1.6;min-height:2.2em;color:var(--app-text);}
.pd-word{opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;}
.pd-word.in{opacity:1;transform:none;}
.pd-cands{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.pd-cand{display:grid;grid-template-columns:128px 1fr 48px;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface);transition:.2s;}
.pd-cand.picked{border-color:var(--app-purple);background:var(--app-purple-soft);}
.pd-cand-w{font-weight:500;font-size:1rem;}
.pd-bar{height:8px;background:var(--app-border);border-radius:999px;overflow:hidden;}
.pd-bar-fill{display:block;height:100%;background:var(--app-purple);border-radius:999px;transition:width .3s;}
.pd-cand.picked .pd-bar-fill{background:#1faa6b;}
.pd-cand-p{font-size:1rem;color:var(--app-text-subtle);text-align:right;}
.pd-caption{margin-top:16px;font-size:1rem;color:var(--app-text-subtle);line-height:1.5;}

/* ---- Glossary: tighter, term in purple, optional icon ---- */
.glossary-desc{margin-bottom:0;}
.glossary-dl{padding:36px 40px !important;margin:60px 0 0 !important;}
.gloss-row{grid-template-columns:200px 1fr;gap:20px;padding:12px 0;border-top:1px solid var(--app-border);}
.gloss-row:first-child{border-top:0;padding-top:0;}
.gloss-row:last-child{padding-bottom:0;}
.gloss-row dt{color:var(--app-purple);font-weight:600;display:flex;align-items:center;gap:12px;}
.gloss-row:hover{background:transparent;}
.gloss-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;}
.gloss-icon svg{width:20px;height:20px;stroke:var(--app-purple);}

/* ---- Interactive quiz ---- */
.quiz-question{font-weight:500;margin-top:28px;}
.quiz-options{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.quiz-option{display:flex;align-items:baseline;gap:12px;text-align:left;background:#fff;border:1px solid var(--app-border);border-radius:16px;padding:16px 20px;cursor:pointer;transition:all 0.25s ease;font-family:inherit;font-size:inherit;}
.quiz-option:hover{transform:translateY(-4px);box-shadow:0 10px 40px rgba(103,58,183,0.15);}
.quiz-option-label{font-weight:600;color:var(--app-purple);font-size:0.875rem;text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0;}
.quiz-option-text{color:var(--app-text);line-height:1.5;}
.quiz-block[data-answered="true"] .quiz-option{cursor:default;pointer-events:none;transform:none;box-shadow:none;}
.quiz-option[data-state="correct"]{border-color:#34A853;background:#E8F5E9;}
.quiz-option[data-state="correct"] .quiz-option-label{color:#1B7A34;}
.quiz-option[data-state="wrong"]{border-color:#D93025;background:#FDECEA;}
.quiz-option[data-state="wrong"] .quiz-option-label{color:#A50E0E;}
.quiz-option[data-state="neutral"]{opacity:0.5;}
.quiz-answer{margin-top:24px;animation:quizReveal 0.3s ease;}
.quiz-answer .callout{border-radius:20px;}
.quiz-answer .callout-head{margin-bottom:8px;}
@keyframes quizReveal{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.quiz-block + .quiz-block{margin-top:-48px !important;}
.quiz-block + .quiz-block h2{display:none;}
.quiz-block + .quiz-block .quiz-question{margin-top:28px;}
@media(max-width:640px){.glossary-dl{padding:20px;}.gloss-row{grid-template-columns:1fr;gap:4px;}.quiz-option{padding:16px 20px;}}

/* ---- Inline paragraph labels (Question:/Output A:/Weak:/Strong:) ---- */
.para-label{font-weight:500;color:var(--app-purple);}

/* ---- Sidebar submenu under Courses ---- */
.nav-sub{display:flex;flex-direction:column;margin:4px 0 8px 0;padding-left:0;}
/* Level 2: the purchased course name (sits under "Courses"). */
.nav-sub-course{display:block;padding:8px 12px 8px 40px;border-radius:8px;font-size:1rem;font-weight:500;color:var(--app-text);text-decoration:none;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-sub-course:hover{color:var(--app-purple);}
/* Level 3: sections inside the course, indented one step further. */
.nav-subitem{display:block;padding:8px 12px 8px 40px;border-radius:8px;font-size:1rem;color:var(--app-text-muted);text-decoration:none;font-weight:400;}
.nav-subitem:hover{color:var(--app-purple);}
[data-sidebar="collapsed"] .nav-sub{display:none;}

/* ---- Cohort directory ---- */
.co-filters{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.co-search{display:flex;align-items:center;gap:8px;border:1px solid var(--app-border);border-radius:12px;padding:12px 16px;background:var(--app-surface);max-width:480px;}
.co-search svg{color:var(--app-text-subtle);flex:0 0 auto;}
.co-search input{border:0;outline:none;background:transparent;font-family:inherit;font-size:1rem;color:var(--app-text);width:100%;}
.co-chips{display:flex;flex-wrap:wrap;gap:8px;}
.co-chip{border:1px solid var(--app-border);background:var(--app-surface);border-radius:999px;padding:8px 16px;font-size:1rem;font-weight:500;color:var(--app-text-muted);cursor:pointer;font-family:inherit;transition:box-shadow .15s,color .15s;}
.co-chip:hover{border-color:var(--app-purple);box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);}
.co-chip:active{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.co-chip.on{background:var(--app-purple);border-color:var(--app-purple);color:#fff;}
/* stretch = every card in a row takes the height of the tallest, so cards are a
   fixed, uniform size; a card with little content just shows empty space. */
/* 12-column grid: cards span 3 columns => max 4 per row, all equal size. A lone
   card (e.g. just "You") spans 3 of 12 columns and never stretches full width. */
.co-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6);grid-column:1 / -1;align-items:stretch;}
.co-card{grid-column:span 4;min-width:0;border:1px solid rgba(var(--accent-rgb),0.2);border-radius:28px;padding:var(--space-6) var(--space-7);background:#fff;display:flex;flex-direction:column;gap:16px;text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow 0.15s ease;overflow-wrap:anywhere;word-break:break-word;}   /* 3 per row */
@media(max-width:820px){.co-card{grid-column:span 6;}}    /* 2 per row */
@media(max-width:560px){.co-card{grid-column:span 12;}}   /* 1 per row */
.co-card:hover{box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);text-decoration:none;color:inherit;}
.co-card:active{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.co-card.you{border-color:rgba(var(--accent-rgb),0.2);}
.co-card-top{display:flex;align-items:center;gap:var(--space-4);margin-bottom:8px;}
/* Cohort card avatar reuses the profile avatar component (.onb-avatar-img /
   .onb-avatar-initials) so it looks identical to the profile page: crisp photo,
   white border, soft purple shadow. The wrapper is just a 64px sizing box with NO
   background (a purple bg here used to bleed through the photo's rounded edge and
   read as a "purple outline"). */
/* Optically nudged a few px left so the circle reads as flush with the flush-left
   text below it (a circle at true 0 looks shifted right). position:relative anchors
   the "You" overlay badge. */
.co-avatar{position:relative;flex:0 0 auto;width:80px;height:80px;border-radius:50%;overflow:visible;margin-left:-4px;}
.co-avatar .onb-avatar-img{width:80px;height:80px;}
.co-avatar .onb-avatar-initials{width:80px;height:80px;font-size:1.5rem;}
.co-id{display:flex;flex-direction:column;}
.co-name{font-weight:600;line-height:1.25;}
.co-you{display:inline-flex;align-items:center;justify-content:center;background:var(--app-purple);color:#fff;font-size:0.6875rem;font-weight:600;padding:5px 8px 4px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;line-height:1;align-self:flex-start;margin-bottom:4px;}
.co-role{font-size:1rem;color:#212121;}
.co-about{font-size:1rem;color:var(--app-text-muted);margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.co-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.co-tag{background:var(--primary-50);color:var(--app-purple);border:1px solid var(--primary-100);border-radius:9999px;padding:4px 12px;font-size:0.875rem;font-weight:400;line-height:1;}
.co-profile-section{display:flex;flex-direction:column;gap:12px;}
.co-profile-heading{font-size:1rem;font-weight:600;margin:0;color:var(--app-text);}
.co-back{display:inline-flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--app-text-muted);text-decoration:none;font-weight:400;}
.co-back:hover{color:var(--app-purple);text-decoration:none;}
.co-back svg{flex:none;}
.co-card-label{font-size:0.875rem;font-weight:500;color:#212121;margin:0 0 4px;}
.co-card-text{font-size:0.875rem;color:#212121;margin:0;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.co-card-footer{margin-top:auto;padding-top:4px;text-align:right;}
.co-card-footer-link{font-size:0.875rem;font-weight:500;color:var(--app-purple);display:inline-flex;align-items:center;gap:4px;}
.co-card:hover .co-card-footer-link{text-decoration:underline;}

/* User-entered text must always wrap, even a long no-space string, so it can never
   overflow a card or the profile column. (Applies to profile + cohort user text.) */
.co-about,.co-name,.co-role,
.co-profile-section,.co-profile-section p,
.exp-card-desc,.exp-card-company,.exp-card-title,
.media-card-title,.media-card-url,
.onb-account-name{overflow-wrap:anywhere;word-break:break-word;}
.co-about{min-width:0;}

/* ---- Wider reading container ---- */
.lesson-shell{max-width:900px;}

/* ---- Sidebar submenu: only inside the programme ---- */
.nav-sub{display:none;}
.nav-sub.show{display:flex;}
.nav-subitem.active{color:var(--app-purple);background:transparent;}
.nav-subitem:focus{outline:none;}
.nav-subitem:focus-visible{outline:2px solid var(--app-purple);outline-offset:1px;}

/* ---- Course top CTA aligned right ---- */
.course-top-cta{display:flex;justify-content:flex-end;}

/* ---- Downloads Grid ---- */
.downloads-grid{display:flex;flex-direction:column;gap:16px;margin-top:48px;}
.download-card{display:flex;align-items:center;gap:20px;padding:20px 24px 20px 20px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:24px;text-decoration:none;color:var(--app-text);transition:border-color .2s,box-shadow .2s;}
.download-card:hover{box-shadow:0 0 16px rgba(103,58,183,0.15);}
.download-card:active{box-shadow:inset 0 0 6px rgba(103,58,183,0.15);}
.download-icon{width:52px;height:52px;border-radius:12px;background:var(--app-purple-50);color:var(--app-purple);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.download-body{flex:1;display:flex;flex-direction:column;gap:4px;}
.download-title{font-size:1rem;font-weight:500;}
.download-desc{font-size:0.875rem;color:var(--app-text-muted);}
.download-action{color:var(--app-purple);flex-shrink:0;opacity:0.6;transition:opacity .2s;}
.download-card:hover .download-action{opacity:1;}
@media(max-width:600px){
  .download-card{padding:var(--space-4);gap:var(--space-4);}
  .download-icon{width:44px;height:44px;}
}

/* ---- Pro access / promo code ---- */
.proaccess-link { color: #212121; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.proaccess-link:hover { color: var(--primary-500); }
.promo-code-card { margin-top: 24px; display: inline-flex; flex-direction: column; gap: 16px; background: #FFFFFF; border: 1px solid var(--app-border); border-radius: 28px; padding: 20px; }
.promo-code-label-row { display: flex; align-items: center; gap: 8px; }
.promo-code-label { font-size: 0.875rem; font-weight: 500; color: #212121; letter-spacing: 0.02em; text-transform: uppercase; }
.promo-code-copied { font-size: 0.75rem; font-weight: 500; color: #2E7D32; background: #E8F5E9; padding: var(--space-1) var(--space-3); border-radius: 9999px; opacity: 0; transition: opacity 1.5s ease; }
.promo-code-copied.visible { opacity: 1; transition: opacity 0.15s ease; }
.promo-code-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.promo-code-value { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 1.125rem; font-weight: 600; color: var(--primary-500); letter-spacing: 0.06em; background: var(--app-purple-50); padding: var(--space-3) var(--space-5); border-radius: 16px; text-align: center; white-space: nowrap; }

/* ---- Webinar Join Card ---- */
.webinar-join-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:28px;padding:24px 28px;display:flex;flex-direction:column;gap:8px;}
.webinar-join-date{font-size:1rem;font-weight:400;color:#212121;margin:0;}
.webinar-join-action{display:flex;align-items:center;gap:16px;}
.webinar-join-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px 12px 20px;border-radius:9999px;font-size:1rem;font-weight:500;text-decoration:none;transition:background .2s,box-shadow .2s,opacity .2s;}
.webinar-join-btn:disabled{opacity:0.5;cursor:default;}
.webinar-join-hint{font-size:0.875rem;color:var(--app-text-subtle);}
@media(max-width:600px){
  .webinar-join-card{padding:24px 20px;}
  .webinar-join-action{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ---- Lab CTA card (in L5) ---- */
.labcta{display:flex;align-items:center;gap:16px;border:1px solid var(--app-purple-soft);background:var(--app-purple-50);border-radius:16px;padding:20px 20px;text-decoration:none;color:var(--app-text);transition:box-shadow .15s,border-color .15s;}
.labcta:hover{border-color:var(--app-purple);box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);}
.labcta:active{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.labcta-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--app-purple);display:flex;align-items:center;justify-content:center;}
.labcta-body{flex:1;}
.labcta-title{display:block;font-weight:600;}
.labcta-sub{display:block;font-size:1rem;color:var(--app-text-muted);margin-top:4px;}
.labcta-arrow{color:var(--app-purple);flex:0 0 auto;}

/* ---- Prompt Lab ---- */
.pl-tips{background:var(--app-surface);border:1px solid var(--app-border);border-radius:28px;padding:24px 28px;margin-bottom:28px;}
.pl-tips-head{font-weight:600;font-size:1rem;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:#212121;}
.pl-tips-head svg{color:var(--app-purple);flex-shrink:0;}
.pl-tips ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:1rem;color:#212121;}
.pl-tips ul li span{font-weight:600;color:#212121;}

/* Composer (product-style chat input, 8 columns) */
.pl-chat{grid-column:2 / -2;padding-top:60px;}
.pl-composer{position:relative;background:var(--app-surface);border:1px solid #F2E7FE;border-radius:28px;box-shadow:0 4px 20px rgba(103,58,183,0.10);transition:border-color var(--transition), box-shadow var(--transition);}
.pl-composer:focus-within{border-color:transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(135deg, #673AB7, #3448FE, #B389E9);background-origin:border-box;background-clip:padding-box, border-box;box-shadow:0 2px 10px rgba(103,58,183,0.08);}
html[data-theme="dark"] .pl-composer{border-color:var(--app-border-strong);box-shadow:none;}
.pl-input{display:block;width:100%;min-height:120px;max-height:320px;border:0;background:transparent;padding:20px 24px 8px;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--app-text);resize:none;}
.pl-input:focus{outline:none;}
.pl-input::placeholder{color:var(--app-text-subtle);}
.pl-composer-bar{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px;}
.pl-iconbtn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--app-text-muted);transition:background var(--transition), color var(--transition);}
.pl-iconbtn:hover{background:var(--app-purple-soft);color:var(--app-purple);}
.pl-spacer{flex:1;}
.pl-send{width:40px;height:40px;border-radius:50%;background:var(--app-purple);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background var(--transition), transform var(--transition), opacity var(--transition);}
.pl-send:hover{background:var(--deep-purple);box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);}
.pl-send:active{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.pl-send:disabled{opacity:.55;cursor:default;transform:none;}
html[data-theme="dark"] .pl-send{background:var(--app-purple);color:#171717;}
.pl-mic.listening,.pl-mic.listening:hover{color:#fff;background:#e5573f;animation:pl-pulse 1.4s ease infinite;}
@keyframes pl-pulse{0%{box-shadow:0 0 0 0 rgba(229,87,63,.35)}70%{box-shadow:0 0 0 12px rgba(229,87,63,0)}100%{box-shadow:0 0 0 0 rgba(229,87,63,0)}}
.pl-below{display:flex;justify-content:center;margin-top:40px;margin-bottom:32px;}
.pl-strong{gap:8px;padding:16px 24px !important;}
.pl-strong svg{color:var(--app-purple);flex-shrink:0;}
.pl .page-lede{color:#212121;}

/* Scorecard (tick meter + per-part breakdown) */
.pl-scorecard{grid-column:2 / -2;position:relative;margin-top:28px;margin-bottom:60px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:28px;padding:24px 28px;overflow:visible;}
.pl-scorecard.revealing{opacity:0;transform:translateY(12px);}
.pl-scorecard.reveal-in{opacity:1;transform:translateY(0);transition:opacity .3s ease-out, transform .3s ease-out;}
.pl-sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.pl-pct{font-size:2.75rem;font-weight:600;line-height:1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;}
.pl-chip{font-size:0.8125rem;font-weight:500;padding:4px 12px;border-radius:999px;}
.pl-chip.low{background:rgba(229,87,63,.12);color:#c2452f;}
.pl-chip.mid{background:rgba(232,169,59,.16);color:#9a6b14;}
.pl-chip.good{background:rgba(31,170,107,.13);color:#15845a;}
html[data-theme="dark"] .pl-chip.low{color:#f0907c;}
html[data-theme="dark"] .pl-chip.mid{color:#eec27f;}
html[data-theme="dark"] .pl-chip.good{color:#5ecf9d;}
.pl-sc-row2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:0.875rem;font-weight:500;}
.pl-delta{color:var(--app-text-subtle);}
.pl-delta.up{color:#15845a;}
.pl-delta.down{color:#c2452f;}
html[data-theme="dark"] .pl-delta.up{color:#5ecf9d;}
html[data-theme="dark"] .pl-delta.down{color:#f0907c;}
.pl-target{color:var(--app-text-subtle);}
.pl-meter{position:relative;display:flex;gap:4px;height:32px;margin:24px 0 8px;}
.pl-tick{flex:1;border-radius:9999px;background:#E8E8EE;width:4px;transition:background .16s ease;}
html[data-theme="dark"] .pl-tick{background:#333333;}
.pl-marker{position:absolute;top:-16px;left:0;line-height:0;transform:translateX(-50%);transition:left .6s cubic-bezier(.2,.8,.2,1),opacity .3s ease,color .3s ease;opacity:0;color:var(--app-text);}
.pl-marker.on{opacity:1;}
.pl-scale{display:flex;justify-content:space-between;font-size:0.875rem;font-weight:500;color:var(--app-text-subtle);}
.pl-msg{font-size:1rem;color:var(--app-text);margin-top:20px;}
.pl-empty{margin-top:20px;font-size:1rem;color:var(--app-text-subtle);}
.pl-parts{margin-top:16px;border-top:1px solid var(--app-border);padding-top:16px;display:flex;flex-direction:column;gap:12px;}
.pl-recs{grid-column:2 / -2;margin-bottom:60px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:28px;padding:24px 28px;}
.pl-recs-head{display:flex;align-items:center;gap:8px;font-size:1.0625rem;font-weight:600;margin-bottom:20px;color:var(--app-text);}
.pl-recs-head svg{color:var(--app-purple);flex-shrink:0;}
.pl-recs-body{display:flex;flex-direction:column;gap:20px;}
.pl-rec-name{font-size:1rem;font-weight:600;margin-bottom:4px;}
.pl-rec-tip{font-size:1rem;color:#212121;line-height:1.55;margin:0;}
.pl-part{display:grid;grid-template-columns:120px 1fr auto;gap:4px 16px;align-items:center;}
.pl-part-name{font-size:1rem;font-weight:600;}
.pl-bar{height:8px;border-radius:9999px;background:#ECECF3;overflow:hidden;}
html[data-theme="dark"] .pl-bar{background:#333333;}
.pl-bar-fill{display:block;height:100%;border-radius:inherit;width:0;transition:width 1.1s cubic-bezier(.22,0,.1,1);}
.pl-status{font-size:0.875rem;font-weight:600;text-align:right;min-width:64px;}
.pl-part.s3 .pl-status{color:#15845a;} .pl-part.s3 .pl-bar-fill{background:#1faa6b;}
.pl-part.s2 .pl-status{color:#2e7d48;} .pl-part.s2 .pl-bar-fill{background:#4CAF50;}
.pl-part.s1 .pl-status{color:#9a6b14;} .pl-part.s1 .pl-bar-fill{background:#e8a93b;}
.pl-part.s0 .pl-status{color:#c2452f;} .pl-part.s0 .pl-bar-fill{background:#e5573f;}
html[data-theme="dark"] .pl-part.s3 .pl-status{color:#5ecf9d;}
html[data-theme="dark"] .pl-part.s2 .pl-status{color:#6dd58e;}
html[data-theme="dark"] .pl-part.s1 .pl-status{color:#eec27f;}
html[data-theme="dark"] .pl-part.s0 .pl-status{color:#f0907c;}
.pl-part-tip{grid-column:1 / -1;font-size:1rem;color:var(--app-text-subtle);line-height:1.45;margin-top:0;}
.pl-foot{display:none;}

/* "Show the ideal prompt" — subtle, centred under the composer */
.pl-ideal{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:500;border-radius:9999px;}
.pl-ideal svg{color:var(--app-purple);}
.pl-body[hidden]{display:none;}

/* Confetti burst, anchored to the meter line */
.pl-burst{position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:9999;}
.pl-burst .cp{position:absolute;left:0;top:0;display:block;line-height:0;will-change:transform,opacity;}
/* Keep the confetti/burst from ever producing a horizontal scrollbar */
.scroll.pl{overflow:visible;}

/* Embedded Prompt Lab inside a lesson page */
.pl-embed .pl-chat{grid-column:unset;padding-top:0;}
.pl-embed .pl-scorecard{grid-column:unset;margin-top:28px;margin-bottom:0;}
.pl-embed .pl-recs{grid-column:unset;margin-top:28px;margin-bottom:0;}
.pl-embed .pl-tips{margin-top:28px;margin-bottom:0;}
.pl-embed{overflow:visible;position:relative;}

@media (max-width:900px){
  .pl-chat,.pl-scorecard,.pl-recs{grid-column:1 / -1;}
  .pl-part{grid-template-columns:96px 1fr auto;}
}

/* ---- FAQ like the homepage ---- */
.faq{gap:0;border-top:1px solid var(--app-border);}
.faq-item{border:0;border-bottom:1px solid var(--app-border);border-radius:0;background:transparent;}
.faq-item summary{padding:24px 8px;font-size:1.15rem;font-weight:500;}
.faq-q{font-weight:500;}
.faq-plus{font-size:1.7rem;line-height:1;color:var(--app-purple);transition:transform .2s;flex:0 0 auto;font-weight:400;}
.faq-item[open] .faq-plus{transform:rotate(45deg);}
.faq-a{padding:0 8px 24px;font-size:1rem;line-height:1.7;color:var(--app-text-muted);max-width:66ch;}

/* ---- FAQ polish: match homepage spacing & scale ---- */
.faq{gap:0;border-top:1px solid var(--app-border);}
.faq-item{border:0;border-bottom:1px solid var(--app-border);border-radius:0;background:transparent;}
.faq-item summary{padding:28px 4px;font-size:1.3rem;font-weight:500;line-height:1.35;gap:32px;align-items:flex-start;}
.faq-q{font-weight:500;}
.faq-plus{font-size:1.6rem;font-weight:300;line-height:1.2;color:var(--app-purple);}
.faq-a{padding:4px 4px 32px;font-size:1.0625rem;line-height:1.75;color:var(--app-text-muted);max-width:72ch;}

/* ---- Course landing: ~10-column reading width ---- */
.scroll.course-landing{max-width:960px;}
.course-landing-iframe{width:100%;height:100vh;margin-top:calc(var(--header-height) * -1);border:none;display:block;}

/* ---- FAQ form (matched to genieai.co homepage) ---- */
.faq-head{margin-bottom:12px;}
.faq-head h2{font-size:1.9rem;font-weight:600;letter-spacing:-0.01em;margin:0;}
.faq-head p{color:var(--app-text-subtle);font-size:1.0625rem;margin:8px 0 20px;}
.faq-a p{margin:0 0 16px;font-size:1.0625rem;line-height:1.75;color:var(--app-text-muted);}
.faq-a p:last-of-type{margin-bottom:0;}
.faq-readmore{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--app-purple);font-weight:500;font-size:1rem;text-decoration:none;}
.faq-readmore:hover{text-decoration:underline;}
.faq-readmore svg{flex:0 0 auto;}

/* ---- Course product video ---- */
.course-video{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--app-purple-soft);box-shadow:var(--app-shadow-sm);}
.cv-video{display:block;width:100%;border-radius:20px;background:#000;}
.cv-facade{position:relative;width:100%;aspect-ratio:16/9;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(135deg, var(--app-purple-50) 0%, var(--app-surface) 70%);}
.cv-play{width:72px;height:72px;border-radius:50%;background:var(--app-purple);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(var(--accent-rgb),0.35);transition:transform .15s;}
.cv-facade:hover .cv-play{box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);}
.cv-label{font-weight:600;color:var(--app-text);font-size:1.0625rem;}

/* ---- Course video: autoplay muted teaser, click for sound; full 12-col width ---- */
.course-video-section{width:min(1120px, calc(100vw - 40px));max-width:none;margin-left:50%;transform:translateX(-50%);}
.cv-video{display:block !important;width:100%;border-radius:20px;background:#000;}
.cv-facade{position:absolute;inset:0;width:100%;aspect-ratio:auto;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(38,18,66,0.30);}
.cv-facade:hover{background:rgba(38,18,66,0.22);}
.cv-label{color:#fff;font-weight:600;font-size:1.0625rem;text-shadow:0 1px 4px rgba(0,0,0,0.45);}

/* ---- Course video polish: video visible/playing, brand-purple overlay & controls ---- */
.cv-video{display:block !important;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--app-purple-50);border-radius:20px;}
.cv-facade{background:linear-gradient(180deg, rgba(var(--accent-rgb),0.10) 0%, rgba(var(--accent-rgb),0.70) 100%);}
.cv-facade:hover{background:linear-gradient(180deg, rgba(var(--accent-rgb),0.06) 0%, rgba(var(--accent-rgb),0.60) 100%);}
/* Replace the browser's black controls gradient with brand purple (WebKit/Chrome) */
.cv-video::-webkit-media-controls-panel{background-image:linear-gradient(transparent, rgba(var(--accent-rgb),0.70)) !important;}
.cv-video::-webkit-media-controls-enclosure{background:transparent;}

/* ---- Course video: centered, no overlay wash, softer controls ---- */
.course-video-section{width:auto;max-width:none;margin-left:-80px;margin-right:-80px;transform:none;}
@media(max-width:1060px){.course-video-section{margin-left:0;margin-right:0;}}
.cv-facade{background:transparent;}
.cv-play{box-shadow:0 8px 26px rgba(var(--accent-rgb),0.45);}
.cv-label{text-shadow:0 1px 6px rgba(0,0,0,0.55);}
/* Soften native controls and remove the black shadow under the timeline (WebKit/Chrome) */
.cv-video::-webkit-media-controls-panel{background-image:linear-gradient(transparent, rgba(var(--accent-rgb),0.42)) !important;box-shadow:none !important;}
.cv-video::-webkit-media-controls-enclosure{background:transparent !important;box-shadow:none !important;border-radius:0 0 20px 20px;overflow:hidden;}

/* ---- Video: no overlay wash at all (just the video playing) ---- */
.cv-facade, .cv-facade:hover{background:transparent !important;}

/* ---- More air around the course title ---- */
.scroll.course-landing{padding-top:52px;}
.course-landing .page-header{margin:16px 0 40px;}
.course-landing .page-eyebrow{margin-bottom:12px;}
.course-landing .page-title{margin-bottom:16px;line-height:1.12;}

/* ---- No hover effect on the video ---- */
.cv-facade:hover .cv-play{box-shadow:0 0 16px rgba(var(--accent-rgb),0.25);}
.cv-facade:active .cv-play{box-shadow:inset 0 0 6px rgba(var(--accent-rgb),0.15);}
.cv-play{transition:none;}

/* ---- Video breakout: reliably wider (12 col) than the 10-col container, centered ---- */
.course-video-section{width:min(1120px, calc(100vw - 320px)) !important;max-width:none !important;margin-left:50% !important;margin-right:0 !important;transform:translateX(-50%) !important;}
@media(max-width:900px){.course-video-section{width:auto !important;margin-left:0 !important;transform:none !important;}}

/* ---- More air between the nav/breadcrumb and the course title ---- */
.course-landing .page-header{margin-top:48px;}

/* =====================================================================
   MOBILE MASTER — single source of truth, !important on layout props.
   Beats all desktop specificity (e.g. .app[data-sidebar="collapsed"]).
   ===================================================================== */
@media (max-width: 900px) {

  /* ---- App shell: always single column ---- */
  .app,
  .app[data-sidebar="open"],
  .app[data-sidebar="collapsed"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Sidebar: fixed overlay, no border bleed ---- */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    width: var(--sidebar-width);
    max-width: 85vw;
    height: 100vh; height: 100dvh;
    z-index: 100;
    transform: translateX(-100%);
    box-shadow: none;
    border-right: none !important;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    overflow-y: auto;
  }
  .app[data-sidebar="open"] .sidebar {
    transform: translateX(0);
    box-shadow: var(--app-shadow-lg);
  }
  .app[data-sidebar="collapsed"] .sidebar {
    width: var(--sidebar-width) !important;
    transform: translateX(-100%);
  }
  .app[data-sidebar="collapsed"] .sidebar-label,
  .app[data-sidebar="collapsed"] .sidebar-section-title,
  .app[data-sidebar="collapsed"] .nav-sub,
  .app[data-sidebar="collapsed"] .sidebar-cta {
    display: revert !important;
    opacity: 1 !important;
  }

  /* ---- Sidebar backdrop ---- */
  .sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 90;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition-slow);
  }
  .app[data-sidebar="open"] .sidebar-backdrop {
    opacity: 1; pointer-events: auto;
  }

  /* ---- Sidebar close button ---- */
  .sidebar-close {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: none; background: none; border-radius: 8px;
    color: var(--app-text-muted); cursor: pointer;
    flex-shrink: 0; margin-left: auto;
  }
  .sidebar-header { justify-content: space-between; }

  /* ---- Header: lockup left, burger RIGHT (no crumb in header) ---- */
  .header {
    height: 56px !important;
    padding: 0 16px 0 20px !important;
    gap: 8px;
    display: flex !important;
    align-items: center;
  }
  .header-logo-mark { display: none !important; }
  .header-logo-lockup {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    order: 0;
  }
  .header-logo-lockup img { height: 24px; width: auto; }
  .sidebar-toggle { display: none !important; }
  .header-crumb { display: none !important; }
  .header-actions { display: none !important; }
  .mobile-burger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: none; background: none; border-radius: 8px;
    color: var(--app-text); cursor: pointer;
    flex-shrink: 0;
    margin-left: auto !important;
    order: 99 !important;
  }

  /* ---- Crumb bar below header ---- */
  .mobile-crumb-bar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 0.875rem;
    color: var(--app-text-subtle);
    border-bottom: 1px solid var(--app-sidebar-border);
    background: var(--app-bg);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-crumb-bar:empty { display: none !important; }
  .mobile-crumb-bar a {
    color: var(--app-text-subtle);
    text-decoration: none;
    white-space: nowrap;
  }
  .mobile-crumb-bar a:hover { color: var(--app-purple); }
  .mobile-crumb-bar .crumb-current {
    color: var(--app-text);
    font-weight: 500;
    white-space: nowrap;
  }
  .mobile-crumb-bar .crumb-sep {
    color: var(--app-text-subtle);
    display: inline-flex;
    flex-shrink: 0;
  }
  .mobile-crumb-bar .crumb-sep svg { width: 12px; height: 12px; }

  /* ---- Content scroll: block layout, full width ---- */
  .scroll {
    display: block !important;
    max-width: none !important;
    padding: 24px 20px 64px !important;
    column-gap: 0 !important;
  }

  /* ---- Course landing ---- */
  .scroll.course-landing {
    max-width: none !important;
    padding-top: 24px !important;
  }
  .course-landing .page-header {
    margin: 12px 0 24px !important;
  }
  .course-landing .page-title { font-size: 2rem; }
  .course-landing .section { margin-top: 40px; }

  /* ---- Course video breakout: no negative margins on mobile ---- */
  .course-video-section {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /* ---- Course hero grid ---- */
  .course-hero-grid { grid-template-columns: 1fr !important; }

  /* ---- Hero carousel: full-width single cards ---- */
  .hero-carousel { overflow: hidden !important; margin: 0 0 12px; }
  .hc-track { gap: 12px; }
  .hc-card {
    padding: 32px 24px;
    min-height: 240px;
    border-radius: 40px;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  .hc-card .hero-title { font-size: clamp(24px, 6vw, 32px); }
  .hc-card .hero-sub { font-size: 1rem; }
  .hc-card .hero-actions { gap: 8px; flex-wrap: wrap; }
  .hc-card .hero-actions .btn { font-size: 0.9375rem; padding: var(--space-3) var(--space-5); }

  /* ---- Feed items: single column cards ---- */
  .feed-item {
    grid-template-columns: 1fr !important;
    padding: 16px;
    border-radius: 28px;
    gap: 12px;
  }
  .feed-thumb { aspect-ratio: 16/10; border-radius: 12px; }

  /* ---- News ---- */
  .news-featured { grid-template-columns: 1fr !important; padding: 20px; gap: 20px; }
  .news-featured-body h2 { font-size: 1.375rem; }
  .news-grid { grid-template-columns: 1fr !important; }

  /* ---- Grids ---- */
  .grid-3, .grid-2, .steps { grid-template-columns: 1fr !important; }
  .continue-card { grid-template-columns: 1fr !important; }

  /* ---- Typography ---- */
  .page-title { font-size: 2rem; }
  .lesson-title { font-size: 1.75rem; }
  .hero { padding: 0; }

  /* ---- Cards: 22px radius ---- */
  .module-card { border-radius: 28px; }
  .module-preview { border-radius: 28px; }
  .cert-banner, .quiz-result { border-radius: 28px; }
  .cert-doc-border { border-radius: 28px; padding: 28px; }

  /* ---- Module accordion ---- */
  .module-head { padding: 16px; gap: 12px; }
  .module-body { padding: 4px 16px 16px; }
  .module-head-right { gap: 8px; }
  .module-index { width: 36px; height: 36px; }
  .module-index svg { width: 28px; height: 28px; }
  .module-head-body h3 { font-size: 1rem; margin: var(--space-1) 0 var(--space-2); }
  .module-head-body p, .module-eyebrow { font-size: 0.875rem; }

  /* ---- Lesson rows ---- */
  .lesson-item { padding: 16px; gap: 12px; grid-template-columns: 36px 1fr auto; }
  .lesson-item .num { width: 34px; height: 34px; font-size: 0.875rem; }
  .lesson-item h4 { font-size: 0.9375rem; }
  .lesson-item p { font-size: 0.875rem; }

  /* ---- Lesson shell: full width ---- */
  .lesson-shell {
    max-width: none !important;
    padding: 24px 20px 64px;
  }

  /* ---- Lesson nav ---- */
  .lesson-nav { grid-template-columns: 1fr !important; }
  .lesson-nav a.next { text-align: left; align-items: flex-start; }

  /* ---- Assessment row ---- */
  .assess-row { padding: 16px; gap: 12px; }
  .assess-info { font-size: 0.875rem; }

  /* ---- Tabs ---- */
  .course-tabs { margin-top: 32px; gap: 0; }
  .course-tab { padding: 12px 12px; font-size: 0.875rem; }

  /* ---- Progress ---- */
  .learn-head-row { flex-direction: column; gap: 8px; }

  /* ---- Carousel ---- */
  .carousel-slide { padding: 24px 20px; }

  /* ---- FAQ ---- */
  .faq-item summary { padding: 20px 4px; font-size: 1.1rem; }
  .faq-a { font-size: 1rem; }

  /* ---- Certificate ---- */
  .cert-doc-head { flex-direction: column; gap: 12px; }
  .cert-recipient { font-size: 1.75rem; }

  /* ---- Quiz ---- */
  .quiz-opt { padding: 12px 16px; border-radius: 12px; }
  .quiz-q legend { font-size: 1rem; }

  /* ---- Vote ---- */
  .vote { padding: 20px; border-radius: 16px; }

  /* ---- Callout ---- */
  .callout { padding: 16px; gap: 12px; border-radius: 12px; }

  /* ---- Lesson module strip ---- */
  .lesson-module-strip { padding: 8px 12px; gap: 8px; }
  .lms-module, .lms-count { font-size: 0.875rem; }

  /* ---- Prompt Lab ---- */
  .pl-chat, .pl-scorecard, .pl-recs { grid-column: 1 / -1; }
  .pl-part { grid-template-columns: 80px 1fr auto; }
  .pb-shell { grid-template-columns: 1fr !important; }

  /* ---- Cohort grid ---- */
  .co-grid { grid-template-columns: 1fr !important; }

  /* ---- Journal ---- */
  .journal-block { border-radius: 16px; }
}

/* =====================================================================
   Lesson diagrams (Session 3): AI hierarchy, LLM flow, Looks right != is right
   Self-contained inline SVG, animated via CSS. Brand tokens only, max weight 600.
   ===================================================================== */
.dgm {
  background: #FFFFFF;
  border: 1px solid var(--app-border);
  border-radius: 28px;
  padding: 24px 20px;
  margin: 24px 0 8px;
  box-shadow: var(--app-shadow-md, 0 5px 20px rgba(103, 58, 183, 0.10));
  overflow: hidden;
}
.dgm-svg { display: block; width: 100%; height: auto; }
.dgm-svg text { font-family: inherit; letter-spacing: 0.01em; }

/* ---- 01. AI hierarchy (static) ---- */
.dgm-ai   { fill: #673AB7; font-size: 16px; font-weight: 600; }
.dgm-ml   { fill: #673AB7; font-size: 16px; font-weight: 600; }
.dgm-gen  { fill: #1B0B57; font-size: 15px; font-weight: 600; }
.dgm-llm  { fill: #FFFFFF; font-size: 20px; font-weight: 600; }
.dgm-llm-sub { fill: #F2E7FE; font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; }
.dgm-agents { fill: #673AB7; font-size: 15px; font-weight: 600; }

/* ---- 02. LLM flow (full motion) ---- */
.dgm-eyebrow { fill: #673AB7; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.llm-prompt  { fill: #212121; font-size: 12px; font-weight: 500; }
.llm-tok-t   { fill: #212121; font-size: 12px; font-weight: 500; }
.llm-plabel  { fill: #212121; font-size: 13px; font-weight: 500; }
.llm-ppct    { fill: #616161; font-size: 12.5px; font-weight: 500; }
.llm-ppct.is-top { fill: #673AB7; font-weight: 600; }
.llm-ptrack  { fill: #F2F2F2; }
.llm-seq-t   { fill: #5F1ED9; font-size: 12.5px; font-weight: 500; }

.llm-conn {
  stroke: #D3B4F7; stroke-width: 1; opacity: 0.45; stroke-dasharray: 4 7;
  animation: llmFlow 2.4s linear infinite; animation-delay: var(--d, 0s);
}
@keyframes llmFlow { to { stroke-dashoffset: -22; } }

.llm-node {
  fill: #B389E9; transform-box: fill-box; transform-origin: center;
  animation: llmNode 2.6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes llmNode {
  0%, 100% { fill: #B389E9; transform: scale(1); }
  45%      { fill: #673AB7; transform: scale(1.28); }
}

.llm-packet {
  fill: #673AB7; transform-box: fill-box; transform-origin: center;
  animation: llmPacket 2.8s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes llmPacket {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(300px); }
}

.llm-tok > rect {
  animation: llmTokRect 4.2s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes llmTokRect {
  0%, 100% { stroke: #D3B4F7; fill: #FFFFFF; }
  18%      { stroke: #673AB7; fill: #F9F5FE; }
  36%      { stroke: #D3B4F7; fill: #FFFFFF; }
}

.llm-pfill {
  fill: #B389E9; transform-box: fill-box; transform-origin: left center;
  animation: llmFill 3.2s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.llm-pfill.is-top { fill: #673AB7; }
@keyframes llmFill { 0%, 100% { transform: scaleX(0.82); } 50% { transform: scaleX(1); } }

.llm-check { transform-box: fill-box; transform-origin: center; animation: llmCheck 2.6s ease-in-out infinite; }
@keyframes llmCheck { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.llm-seq {
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: llmSeq 6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes llmSeq {
  0%  { opacity: 0; transform: translateY(6px); }
  8%  { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; }
  100%{ opacity: 0; }
}
.llm-seq-arw { opacity: 0; animation: llmArw 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes llmArw { 0%, 6% { opacity: 0; } 12% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }

.llm-loop-i { transform-box: fill-box; transform-origin: center; animation: llmSpin 5s linear infinite; }
@keyframes llmSpin { to { transform: rotate(360deg); } }

/* ---- 03. Looks right != is right (subtle reveal) ---- */
.lr-eyebrow  { fill: #673AB7; font-size: 12px; font-weight: 600; }
.lr-tag-t    { font-size: 11.5px; font-weight: 600; }
.lr-cite     { fill: #616161; font-size: 12.5px; font-weight: 500; animation: lrCite 6s ease-in-out infinite; }
.lr-cite-note{ fill: #8A5E10; font-size: 11px; font-weight: 500; opacity: 0; animation: lrNote 6s ease-in-out infinite; }
.lr-hero-top, .lr-hero-bot { fill: #212121; font-size: 23px; font-weight: 500; }
.lr-neq      { fill: #673AB7; font-size: 70px; font-weight: 600; transform-box: fill-box; transform-origin: center; animation: lrNeq 3s ease-in-out infinite; }
.lr-take     { fill: #616161; font-size: 13px; font-weight: 500; }

.lr-sweep { animation: lrSweep 6s ease-in-out infinite; }
@keyframes lrSweep { 0% { transform: translateY(0); } 45% { transform: translateY(320px); } 100% { transform: translateY(320px); } }

.lr-tagA { animation: lrTagA 6s ease-in-out infinite; }
.lr-tagB { opacity: 0; animation: lrTagB 6s ease-in-out infinite; }
@keyframes lrTagA { 0%, 42% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lrTagB { 0%, 42% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }

.lr-cite-underline { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: lrUnder 6s ease-in-out infinite; }
@keyframes lrUnder { 0%, 42% { transform: scaleX(0); } 52%, 95% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

.lr-cite-alert { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lrAlert 6s ease-in-out infinite; }
@keyframes lrAlert { 0%, 44% { opacity: 0; transform: scale(0.6); } 54% { opacity: 1; transform: scale(1); } 95% { opacity: 1; } 100% { opacity: 0; } }

@keyframes lrNote { 0%, 46% { opacity: 0; } 56%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lrCite { 0%, 46% { fill: #616161; } 56%, 95% { fill: #8A5E10; } 100% { fill: #616161; } }
@keyframes lrNeq { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (max-width: 600px) {
  .dgm { padding: 16px 12px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .dgm * { animation: none !important; }
  .llm-packet { opacity: 0; }
  .llm-pfill { transform: scaleX(1); }
  .llm-node { fill: #8E1AD6; }
  .llm-tok > rect { stroke: #D3B4F7; fill: #FFFFFF; }
  .llm-seq { opacity: 1; transform: none; }
  .llm-seq-arw { opacity: 1; }
  .lr-sweep { opacity: 0; }
  .lr-tagA { opacity: 0; }
  .lr-tagB { opacity: 1; }
  .lr-cite-underline { transform: scaleX(1); }
  .lr-cite-alert { opacity: 1; transform: none; }
  .lr-cite-note { opacity: 1; }
  .lr-cite { fill: #8A5E10; }
}

/* =====================================================================
   FLF mobile display refinements (v2)
   Mobile-scoped only (<=900px / <=600px); the signed-off desktop Module 1
   is untouched. Appended last so these win by source order.
   Fixes: wide-image/diagram overflow, tablet-portrait card layout,
   quote scale, vertical rhythm, prompt/code wrapping, self-audit tap size.
   ===================================================================== */
@media (max-width: 900px) {
  /* Wide diagrams/images must never break out or overflow on a phone.
     Desktop full-bleed math (calc(content-max - 96px) with negative side
     margins) computes far wider than the viewport, so contain them. */
  .lesson-img-wide,
  .lesson-img-wide.lesson-img-flush {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    background: var(--app-surface-2);
  }
  /* Parallel-concept cards go single column at the mobile switch (was 720px)
     so tablet-portrait no longer renders them narrow and off-centre. */
  .lesson-cards {
    grid-template-columns: 1fr;
    width: auto;
    margin-left: 0;
    transform: none;
    gap: 12px;
  }
  /* Tighter vertical rhythm reads better on a small screen. */
  .lesson-blocks { gap: 48px; }
  /* Quote scaled for a phone. */
  .lesson-quote { padding: 40px 0; }
  .lesson-quote blockquote { font-size: 1.375rem; line-height: 1.4; }
  /* Long prompts and code must wrap, never force horizontal scroll. */
  .prompt-text, .pl-input { overflow-wrap: anywhere; word-break: break-word; }
}

@media (max-width: 600px) {
  /* Self-audit: ten 1-to-10 buttons in one row are too small to tap on a
     phone. Wrap to two rows of five with comfortable targets. */
  .audit-rating { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .audit-btn { padding: 12px 0; font-size: 0.9375rem; border-radius: 12px; }
  /* Quote a touch smaller on the narrowest screens. */
  .lesson-quote blockquote { font-size: 1.25rem; }
}

@media (max-width: 900px) {
  /* Module card header (v2): the status pill ("Completed", "In progress")
     was sharing the top row and squeezing the eyebrow, title, and summary
     into a ~160px column. Restack on mobile: icon + pill on the top row,
     then the eyebrow, title, and description on a full-width row below. */
  .module-head {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "index right"
      "body  body";
    column-gap: 12px;
    row-gap: var(--space-3);
    align-items: center;
  }
  .module-index { grid-area: index; }
  .module-head-right {
    grid-area: right;
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-self: end;
    gap: 8px;
  }
  .module-head-body { grid-area: body; }
}