/* belle-unify-v1: one visual language across all pages (2026-06-12)
   Loads LAST. Pins the header every page to the courses-page look Janette loves,
   removes the hero-logo box, makes the state map pop, surfaces the accessibility button. */

/* ===== 1. ONE header for every page (the courses look) ===== */
body[data-belle-route] .site-header {
  background: rgba(10,5,8,.84) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(196,163,90,.28) !important;
  min-height: 64px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
}
body[data-belle-route] .site-header .logo { font-size: 19px !important; gap: 10px !important; display: flex !important; align-items: center !important; }
body[data-belle-route] .site-header .logo-img { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
body[data-belle-route] .site-header .logo span { color: #C4A35A !important; }
body[data-belle-route] .site-header nav a { font-size: 14px !important; }
body[data-belle-route] .site-header nav a:hover, body[data-belle-route] .site-header nav a.active { color: #C4A35A !important; }
body[data-belle-route] .site-header nav a::after { background: #C4A35A !important; }
body[data-belle-route] .site-header .header-cta, body[data-belle-route] .site-header nav a.header-cta {
  background: linear-gradient(135deg, #C4A35A 0%, #b08d3f 100%) !important;
  color: #1a0a10 !important;
  border: 1px solid transparent !important;
}

/* ===== 2. Hero logo: no box, same treatment everywhere ===== */
body[data-belle-route="inner"] .hero-logo-wrap { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
body[data-belle-route="inner"] .hero-logo-wrap img, body[data-belle-route="inner"] .hero-logo-animated {
  mix-blend-mode: screen !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 36px rgba(196,163,90,.45)) !important;
  width: 120px !important;
  height: 120px !important;
  object-fit: contain !important;
}

/* ===== 3. State map: make the states POP, kill the blur ===== */
body[data-belle-route="inner"] .sm-tile {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #FBF4EC !important;
  border: 1.5px solid rgba(98,3,3,.22) !important;
  color: #4A1F2E !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  box-shadow: 0 2px 6px rgba(74,31,46,.12) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
body[data-belle-route="inner"] .sm-tile:hover { transform: translateY(-3px) scale(1.07) !important; box-shadow: 0 10px 22px rgba(74,31,46,.28) !important; z-index: 3; }
body[data-belle-route="inner"] .sm-tile.sm-bucket-doe { background: #620303 !important; color: #FBEFD8 !important; border: 1.5px solid #C4A35A !important; box-shadow: 0 3px 10px rgba(98,3,3,.35) !important; }
body[data-belle-route="inner"] .sm-tile.sm-bucket-district { background: #9a5b13 !important; color: #FBEFD8 !important; border: 1.5px solid #d9b262 !important; }

/* the final CTA section under the map: crisp, not hazy */
body[data-belle-route="inner"] .av-final-mesh { opacity: .5 !important; }
body[data-belle-route="inner"] .av-final-h2, body[data-belle-route="inner"] .av-final-sub { filter: none !important; text-shadow: none !important; }

/* ===== 4. Accessibility button: visible, friendly, bottom-LEFT (bots live bottom-right) ===== */
body[data-belle-route="inner"] .a11y-fab {
  left: 22px !important;
  right: auto !important;
  bottom: 22px !important;
  width: 58px !important;
  height: 58px !important;
  background: #C4A35A !important;
  color: #1a0a10 !important;
  border: 2.5px solid #FBEFD8 !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.45) !important;
  z-index: 99990 !important;
  animation: belleA11yPulse 3.5s ease-in-out infinite;
}
body[data-belle-route="inner"] .a11y-fab svg { width: 26px !important; height: 26px !important; }
@keyframes belleA11yPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 768px) { .a11y-fab { left: 14px !important; bottom: 14px !important; } }

/* ===== v3 additions (2026-06-12): header logo, nav type, bottom CTAs, shimmer footer ===== */

/* header logo: transparent glyph, no square */
body[data-belle-route] .site-header .logo-img {
  content: url("../images/iteachai-logo-256.png");
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 34px !important; height: 34px !important;
}

/* nav letters: one size, one weight, one color on every page */
body[data-belle-route] .site-header nav a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.85) !important;
  letter-spacing: .2px !important;
}
body[data-belle-route] .site-header nav a:hover,
body[data-belle-route] .site-header nav a.active { color: #C4A35A !important; }

/* bottom CTA sections: crisp, buttons match the top gold */
body[data-belle-route="inner"] .hv2-final { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body[data-belle-route="inner"] .hv2-final * { filter: none !important; text-shadow: none !important; }
body[data-belle-route="inner"] .hv2-btn-primary, body[data-belle-route="inner"] .av-final .btn, body[data-belle-route="inner"] .hv2-cta {
  background: linear-gradient(135deg, #C4A35A 0%, #b08d3f 100%) !important;
  color: #1a0a10 !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 28px rgba(196,163,90,.30) !important;
}
body[data-belle-route="inner"] .hv2-btn-ghost {
  background: transparent !important;
  color: #C4A35A !important;
  border: 1.5px solid rgba(196,163,90,.65) !important;
}
body[data-belle-route="inner"] .hv2-btn-ghost:hover { background: rgba(196,163,90,.12) !important; }

/* shimmer footer for every inner page (home keeps its own) */
body[data-belle-route="home"] #belle-footer { display: none !important; }
#belle-footer {
  background: linear-gradient(160deg, #0D0A12 0%, #1E0A10 30%, #2C1018 60%, #4A2028 85%, #6B3040 100%);
  color: rgba(255,255,255,.65);
  padding: 56px 32px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  position: relative;
}
#belle-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #C4A35A 25%, #f3dca3 50%, #C4A35A 75%, transparent);
  background-size: 200% 100%;
  animation: belleShimmer 6s linear infinite;
}
@keyframes belleShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
#belle-footer .bf-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
#belle-footer .bf-brand { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: #FBEFD8; }
#belle-footer .bf-brand img { width: 34px; height: 34px; }
#belle-footer .bf-brand span { color: #C4A35A; }
#belle-footer .bf-tag { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: #C4A35A; margin-top: 4px; }
#belle-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
#belle-footer nav a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; }
#belle-footer nav a:hover { color: #C4A35A; }
#belle-footer .bf-legal { width: 100%; text-align: center; font-size: 12px; color: rgba(255,255,255,.45); border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; margin-top: 10px; }

/* ============================================================
   v4 DESIGN SYSTEM (2026-06-12): tokens, type, buttons, auth,
   heroes, contact. Guard G = every page except the robot home.
   ============================================================ */

/* ---- 1. TOKENS: one gold, everywhere (overrides all per-page golds) ---- */
body[data-belle-route="inner"] .page-content,
body[data-belle-route="inner"] {
  --ac-gold: #C4A35A; --ac-gold-light: #d9bc7a;
  --pt-gold: #C4A35A; --pt-gold-glow: rgba(196,163,90,.35);
  --spd-gold: #C4A35A; --spd-gold-glow: rgba(196,163,90,.30);
  --hv2-gold: #C4A35A;
}

/* ---- 2. TYPE SCALE: same headline sizes on every page ---- */
body[data-belle-route="inner"] .page-content h1 { font-size: clamp(38px, 4.6vw, 54px) !important; line-height: 1.15 !important; }
body[data-belle-route="inner"] .page-content h2 { font-size: clamp(26px, 3vw, 36px) !important; line-height: 1.2 !important; }

/* ---- 3. LINKS + FOCUS RINGS (accessibility) ---- */
body[data-belle-route="inner"] a:focus-visible,
body[data-belle-route="inner"] button:focus-visible,
body[data-belle-route="inner"] input:focus-visible,
body[data-belle-route="inner"] select:focus-visible {
  outline: 3px solid #620303 !important; outline-offset: 2px !important;
}

/* ---- 4. BUTTON SYSTEM: gold primary, gold-outline secondary, 10px radius ---- */
body[data-belle-route="inner"] .btn,
body[data-belle-route="inner"] .hv2-btn,
body[data-belle-route="inner"] .auth-form button[type="submit"] {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}
body[data-belle-route="inner"] .btn-primary,
body[data-belle-route="inner"] .btn.btn-primary {
  background: linear-gradient(135deg, #C4A35A 0%, #b08d3f 100%) !important;
  color: #1a0a10 !important;
  border: 1px solid transparent !important;
}
body[data-belle-route="inner"] .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
body[data-belle-route="inner"] .btn-outline {
  background: transparent !important;
  color: #C4A35A !important;
  border: 1.5px solid rgba(196,163,90,.65) !important;
}

/* ---- 5. HEROES: no vh voids, one centered layout ---- */
body[data-belle-route="inner"] .cert-hero,
body[data-belle-route="inner"] .av-hero {
  min-height: 0 !important; height: auto !important;
  padding: 104px 24px 72px !important;
}
body[data-belle-route="inner"] .cert-hero .cert-hero-inner {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important;
  gap: 6px !important; max-width: 880px !important; margin: 0 auto !important;
}
body[data-belle-route="inner"] .cert-hero .hero-logo-wrap { order: -1; margin: 0 auto 22px !important; position: static !important; }
.school-pd-v2 .hv2-hero h1 { font-size: clamp(36px, 4.2vw, 54px) !important; max-width: 760px; }

/* ---- 6. AUTH PAGES: welcome them back to the brand ---- */
body:has(.auth-container) .page-content {
  background: linear-gradient(160deg, #0D0A12 0%, #2C1018 55%, #4A2028 100%) !important;
  min-height: 100vh;
}
.auth-container {
  background: #FBF6F0 !important;
  border: 1px solid rgba(196,163,90,.45) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
}
.auth-logo {
  content: url("../images/iteachai-logo-256.png");
  width: 84px !important; height: 84px !important;
  background: transparent !important; border-radius: 0 !important;
  filter: drop-shadow(0 4px 14px rgba(98,3,3,.25));
}
.auth-title { color: #620303 !important; }
.auth-container a { color: #8a2f3e !important; }
.auth-form input {
  border: 1.5px solid rgba(98,3,3,.25) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
.auth-container::after {
  content: "6 State DOE-Approved \00B7 All 50 States Served \00B7 $25 Courses";
  display: block; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 1.1px;
  text-transform: uppercase; color: #9a7f5c; margin-top: 16px;
}
.auth-divider + * { border: 1.5px solid rgba(98,3,3,.2) !important; border-radius: 10px !important; }

/* ---- 7. CONTACT: standard cards, readable text ---- */
.contact-card {
  border: 1px solid rgba(98,3,3,.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 12px rgba(74,31,46,.08) !important;
}
.contact-card-detail { font-size: 15px !important; line-height: 1.6 !important; }
.contact-card a { color: #8a2f3e !important; font-weight: 600; }

/* ---- 8. STATE CARDS (certifications): tighter, clearer counts ---- */
.cert-v2-state-card { padding: 18px 14px !important; }
.cert-v2-state-count { font-size: 13.5px !important; color: #8a5a13 !important; font-weight: 600 !important; }

/* ---- v4.1 fixes ---- */
/* certifications + school-pd heroes: centered like everything else */
body[data-belle-route="inner"] .cert-v2-hero .hv2-hero-inner,
.school-pd-v2 .hv2-hero .hv2-hero-inner {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important;
  max-width: 880px !important; margin: 0 auto !important;
}
body[data-belle-route="inner"] .cert-v2-hero .hv2-orb,
.school-pd-v2 .hv2-hero .hv2-orb {
  order: -1 !important; position: static !important;
  margin: 0 auto 18px !important; transform: none !important;
}
/* auth trust line: inside the form, not floating */
.auth-container::after { content: none !important; }
.auth-form::after {
  content: "6 State DOE-Approved \00B7 All 50 States Served \00B7 $25 Courses";
  display: block; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 11.5px; letter-spacing: 1px;
  text-transform: uppercase; color: #9a7f5c; margin-top: 18px;
}
/* auth logo: tint the glyph bordeaux so it reads on the light card */
.auth-logo {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(-28deg) brightness(0.55) !important;
}

/* ---- v6.1: About gold accent + course-bot widget brand match ---- */
.belle-gold-accent { color: #C4A35A !important; font-style: italic; }

/* bot greeting: warm card, no oval clipping */
#iteachai-cb-greeting {
  background: #FBF6F0 !important;
  border: 1.5px solid rgba(196,163,90,.65) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  color: #2C1810 !important;
  padding: 14px 38px 14px 16px !important;
  max-width: 300px !important;
  overflow: visible !important;
  line-height: 1.5 !important;
}
#iteachai-cb-greeting-text { color: #2C1810 !important; }
#iteachai-cb-greeting-text strong { color: #620303 !important; }

/* bot launcher bubble + panel: bordeaux/gold instead of rose */
#iteachai-cb-bubble {
  background: linear-gradient(135deg, #620303 0%, #8a2f3e 100%) !important;
  border: 2px solid #C4A35A !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.4) !important;
}
#iteachai-cb-panel {
  border: 1.5px solid rgba(196,163,90,.5) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
}
#iteachai-cb-header {
  background: linear-gradient(135deg, #620303 0%, #6b2d42 100%) !important;
  color: #FBEFD8 !important;
}
#iteachai-cb-send {
  background: linear-gradient(135deg, #C4A35A 0%, #b08d3f 100%) !important;
  color: #1a0a10 !important;
}


/* === BELLE course-overview redesign 20260630-190614 === */
/* ============================================================
   iTeachAI Academy — Course Overview
   Premium course page. EVERY selector scoped under
   .course-overview so this file is safe to append to the
   global stylesheet (no leakage onto other pages).
   ============================================================ */

.course-overview {
  /* ---- Brand tokens (local scope only) ---- */
  --co-bordeaux:    #620303;
  --co-bordeaux-dk: #7d0a0a;
  --co-deep:        #4A1F2E;
  --co-amber:       #b56d22;
  --co-amber-dk:    #934f12;   /* hover/active — AA on cream */
  --co-gold:        #c9a14a;
  --co-champagne:   #debf8f;
  --co-cream:       #FDF6F0;
  --co-cream-soft:  #F7E9DC;
  --co-page:        #efe4da;
  --co-ink:         #2C1810;
  --co-muted:       #8b7a6a;
  --co-muted-dk:    #6f5f51;   /* AA-safe muted on cream/white */
  --co-done:        #2e7d52;   /* completion green, AA on white */

  /* ---- Lines & surfaces ---- */
  --co-card:        #ffffff;
  --co-line:        rgba(98, 3, 3, 0.10);
  --co-line-soft:   rgba(74, 31, 46, 0.08);
  --co-shadow:      0 1px 2px rgba(44, 24, 16, 0.05),
                    0 8px 24px rgba(44, 24, 16, 0.07);
  --co-shadow-sm:   0 2px 10px -8px rgba(74, 31, 46, 0.40);

  /* ---- Type ---- */
  --co-serif-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --co-serif-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --co-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* ---- Layout ---- */
  --co-max:    920px;
  --co-pad:    32px;
  --co-radius: 16px;
  --co-radius-sm: 12px;

  /* The single centered container — header + curriculum share
     this exact width and left edge (fixes the misalignment +
     edge-clip bug). */
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--co-max) + var(--co-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--co-pad) 80px;

  background: var(--co-page);
  color: var(--co-ink);
  font-family: var(--co-serif-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.course-overview *,
.course-overview *::before,
.course-overview *::after {
  box-sizing: border-box;
}

/* ============================================================
   HERO BAND — burgundy gradient, bleeds flush to column edges
   ============================================================ */
.course-overview .course-overview-header {
  position: relative;
  /* Bleed to the column edges (cancel the side padding) so the
     band runs flush, while text stays comfortably inset. */
  margin: 0 calc(var(--co-pad) * -1) 40px;
  padding: 56px var(--co-pad) 52px;
  background: linear-gradient(135deg, #7d0a0a 0%, #620303 52%, #4A1F2E 100%);
  border-radius: 0 0 var(--co-radius) var(--co-radius);
  border-bottom: 3px solid var(--co-gold);
  box-shadow: 0 14px 34px -22px rgba(74, 31, 46, 0.85);
  overflow: hidden;
}

/* Thin gold hairline accent across the top of the band */
.course-overview .course-overview-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--co-pad);
  right: var(--co-pad);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(201, 161, 74, 0) 0%,
    rgba(201, 161, 74, 0.9) 22%,
    rgba(222, 191, 143, 0.95) 50%,
    rgba(201, 161, 74, 0.9) 78%,
    rgba(201, 161, 74, 0) 100%);
}

.course-overview .course-overview-header h1 {
  margin: 0 0 18px;
  font-family: var(--co-serif-head);
  font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-wrap: balance;
}

.course-overview .course-overview-header p {
  margin: 0;
  max-width: 65ch;
  font-family: var(--co-serif-body);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--co-champagne);
  font-weight: 400;
}

/* ============================================================
   ENROLL CTA — amber pill button (scoped, never global)
   ============================================================ */
.course-overview .btn {
  font-family: var(--co-sans);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.course-overview .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin: 0 0 36px;
  padding: 16px 40px;
  font-family: var(--co-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #ffffff;
  background: var(--co-amber) !important;
  border: 1px solid var(--co-amber-dk) !important;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(44, 24, 16, 0.12),
              0 10px 22px rgba(181, 109, 34, 0.24);
  transition: background-color 0.18s ease, transform 0.12s ease,
              box-shadow 0.18s ease;
}

.course-overview .btn.btn-primary:hover {
  background: var(--co-amber-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(44, 24, 16, 0.14),
              0 14px 28px rgba(147, 79, 18, 0.32);
}

.course-overview .btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(44, 24, 16, 0.16);
}

.course-overview .btn.btn-primary:focus-visible {
  outline: 3px solid var(--co-gold);
  outline-offset: 3px;
}

/* ============================================================
   PROGRESS BAR (enrolled state)
   ============================================================ */
.course-overview .progress-bar-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 40px;
  padding: 20px 22px;
  background: var(--co-cream);
  border: 1px solid rgba(201, 161, 74, 0.35);
  border-radius: var(--co-radius-sm);
  box-shadow: var(--co-shadow-sm);
}

.course-overview .progress-bar-bg {
  width: 100%;
  height: 12px;
  background: var(--co-cream-soft);
  border: 1px solid rgba(139, 122, 106, 0.25);
  border-radius: 999px;
  overflow: hidden;
}

.course-overview .progress-bar-fill {
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--co-gold) 0%, var(--co-amber) 100%);
  transition: width 0.4s ease;
}

.course-overview .progress-text {
  font-family: var(--co-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--co-deep);
}

/* ============================================================
   CURRICULUM — white cards, cream module headers
   ============================================================ */
.course-overview .curriculum {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: none;
  margin: 0;
  padding: 0;
}

.course-overview .curriculum-section {
  margin: 0;
  background: var(--co-card);
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  overflow: hidden;
}

/* Module heading */
.course-overview .section-header {
  position: relative;
  padding: 20px 26px;
  font-family: var(--co-serif-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.8vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--co-bordeaux);
  background: linear-gradient(180deg, var(--co-cream) 0%, var(--co-cream-soft) 100%);
  border-bottom: 2px solid var(--co-gold);
}

/* Small amber underline flourish, editorial touch */
.course-overview .section-header::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--co-amber);
}

.course-overview .lesson-list {
  display: flex;
  flex-direction: column;
}

/* ---- Lesson row ---- */
.course-overview .lesson-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;            /* comfortable >=44px tap target */
  padding: 14px 26px;
  font-family: var(--co-serif-body);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--co-ink);
  text-decoration: none;
  border-top: 1px solid var(--co-line-soft);
  transition: background-color 0.16s ease, padding-left 0.16s ease, color 0.16s ease;
}

.course-overview .lesson-list .lesson-link:first-child {
  border-top: none;
}

.course-overview .lesson-link:hover {
  background: var(--co-cream);
  color: var(--co-bordeaux);
  padding-left: 30px;
}

.course-overview .lesson-link:focus-visible {
  outline: 3px solid var(--co-amber-dk);
  outline-offset: -3px;
  background: var(--co-cream);
}

/* Subtle de-emphasis for completed rows (reinforces icon, not
   color-alone — completed text simply reads slightly quieter) */
.course-overview .lesson-link:has(.completion-icon.done) {
  color: var(--co-muted-dk);
}

/* ---- Completion icon (left) — shape + glyph differ, not color-alone ---- */
.course-overview .completion-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: var(--co-sans);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.course-overview .completion-icon.done {
  color: #ffffff;
  background: var(--co-done);
  border: 1px solid var(--co-done);
  box-shadow: 0 0 0 3px rgba(46, 125, 82, 0.14);
}

.course-overview .completion-icon.pending {
  color: transparent;
  background: #ffffff;
  border: 2px dashed var(--co-muted);
}

/* ---- Duration (right) — muted pill, always legible ---- */
.course-overview .lesson-meta {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 12px;
  font-family: var(--co-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--co-muted-dk);
  background: rgba(222, 191, 143, 0.22);
  border: 1px solid rgba(201, 161, 74, 0.28);
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE — mobile-first refinements (QR scan on phones)
   ============================================================ */
@media (max-width: 640px) {
  .course-overview {
    --co-pad: 16px;
    font-size: 17px;
    padding-bottom: 56px;
  }

  .course-overview .course-overview-header {
    margin: 0 calc(var(--co-pad) * -1) 28px;
    padding: 38px var(--co-pad) 34px;
    border-radius: 0 0 12px 12px;
  }

  .course-overview .btn.btn-primary {
    display: flex;
    width: 100%;
    margin-bottom: 28px;
  }

  .course-overview .progress-bar-container {
    padding: 16px;
    margin-bottom: 28px;
  }

  .course-overview .curriculum {
    gap: 18px;
  }

  .course-overview .section-header {
    padding: 18px 18px;
  }

  .course-overview .section-header::after {
    left: 18px;
  }

  /* Lesson rows wrap: icon + title on line 1, duration drops
     below, aligned under the title and still legible. */
  .course-overview .lesson-link {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 14px;
    padding: 14px 18px;
    font-size: 1rem;
  }

  .course-overview .lesson-link:hover,
  .course-overview .lesson-link:focus-visible {
    padding-left: 18px;       /* no nudge on touch */
  }

  .course-overview .completion-icon {
    margin-top: 2px;
  }

  .course-overview .lesson-meta {
    flex-basis: 100%;
    width: max-content;
    margin-left: 38px;        /* line up under the title, past the icon */
  }
}

/* Very narrow phones (~360px and below) */
@media (max-width: 390px) {
  .course-overview .course-overview-header h1 {
    font-size: 1.85rem;
  }
  .course-overview .lesson-link {
    font-size: 0.9375rem;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .course-overview *,
  .course-overview *::before,
  .course-overview *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}