:root{
  --bg: #0b0d12;
  --surface: rgba(255,255,255,.72);
  --surface-dark: rgba(20,22,28,.72);
  --stroke: rgba(0,0,0,.08);
  --stroke-dark: rgba(255,255,255,.12);
  --text: rgba(0,0,0,.92);
  --text-dark: rgba(255,255,255,.92);
  --muted: rgba(0,0,0,.62);
  --muted-dark: rgba(255,255,255,.68);
  --primary: #0a84ff;
  --primary-press: #0066cc;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --shadow-dark: 0 12px 34px rgba(0,0,0,.45);
  --max: 1120px;
  --legal-footer-height: 44px;
  --nav-text-size: 14px;
  --gutter: 32px;
  --tap: 44px;
  /* Header logo sizing (responsive) */
  /* Larger than original, but not oversized */
  --brand-logo-w: clamp(240px, 36vw, 420px);
  --brand-logo-h: clamp(84px, 10vw, 140px);
  --site-header-h: 0px;
  --legal-footer-h: var(--legal-footer-height);
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust: 100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(10,132,255,.20), transparent 55%),
    radial-gradient(900px 600px at 90% -10%, rgba(88,86,214,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(248,248,250,1));
  color: var(--text);
  padding-bottom: var(--legal-footer-height);
  padding-bottom: calc(var(--legal-footer-height) + env(safe-area-inset-bottom));
}

/* Module page: full-screen lesson player (no page scroll) */
body.module-page{
  overflow: hidden;
  padding-bottom: 0;
  padding-top: env(safe-area-inset-top);
}
body.module-page .site-header{
  display: none;
}
body.module-page .main{
  padding: 16px 0;
}
body.module-page main[data-module]{
  height: calc(100svh - var(--site-header-h) - var(--legal-footer-h));
}
body.module-page main[data-module] > .shell{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.module-page .breadcrumb{margin: 0}
body.module-page .module-progress{margin: 8px 0 12px}

/* Breadcrumb + "Lesson # of #" on one line (desktop) */
.module-toprow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.module-toprow__right{
  flex: 0 0 auto;
}
.module-toprow__right .module-progress__text{
  font-size: 13px;
  font-weight: 500;
}
body.module-page .module-layout{
  flex: 1;
  min-height: 0;
}
body.module-page .module-objectives{
  position: static;
  height: 100%;
}
body.module-page .module-objectives__content{
  height: calc(100% - 74px); /* header area */
  overflow: auto;
}
body.module-page .module-body{
  height: 100%;
}
body.module-page .module-body__content{
  height: 100%;
  min-height: 0;
  gap: 0;
}
body.module-page .module-section{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.module-page .module-section__body{
  flex: 1;
  min-height: 0;
  overflow: auto;
}
body.module-page .module-section__footer{
  flex: 0 0 auto;
}

body.nav-open{overflow:hidden}

img,svg,video{max-width:100%; height:auto}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

@media (prefers-color-scheme: dark){
  body{
    background:
      radial-gradient(1200px 800px at 15% -10%, rgba(10,132,255,.25), transparent 55%),
      radial-gradient(900px 600px at 90% -10%, rgba(88,86,214,.22), transparent 55%),
      linear-gradient(180deg, rgba(10,12,16,1), rgba(9,10,14,1));
    color: var(--text-dark);
  }
}

.shell{
  width: min(100% - var(--gutter), var(--max));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:16px;
  padding:10px 12px;
  border-radius: 10px;
  background: #fff;
  color:#000;
  text-decoration: none;
  box-shadow: var(--shadow);
  z-index: 9999;
}
.skip-link:focus{left:16px}

.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: #000;
  color: rgba(255,255,255,.92);
  padding-top: env(safe-area-inset-top);
}

/* Header-specific colors on black */
.site-header .nav-link{
  color: rgba(255,255,255,.72);
}
.site-header .nav-link::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .42s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}

/* Dropdown toggle: underline only the "Courses" label, not the caret */
.site-header .dropdown-toggle::after{content:none}
.site-header .dropdown-toggle .nav-label{
  position: relative;
  display: inline-block;
}
.site-header .dropdown-toggle .nav-label::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .42s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.site-header .nav-link:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
}
.site-header .nav-link:focus-visible{
  outline: 3px solid rgba(10,132,255,.35);
  outline-offset: 2px;
}
.site-header .nav-link[aria-current="page"]{
  color: rgba(255,255,255,.92);
}
.underline-armed .site-header .nav-link[aria-current="page"]::after{
  transform: scaleX(1);
  opacity: .9;
}
.underline-armed .site-header .dropdown-toggle[aria-current="page"] .nav-label::after{
  transform: scaleX(1);
  opacity: .9;
}
.site-header .btn-ghost{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.site-header .btn-ghost:hover{
  background: rgba(255,255,255,.12);
}
.site-header .btn[aria-current="page"]{
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.90);
}
.site-header .nav-toggle{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 0;
  text-decoration:none;
  color: inherit;
  min-width: max-content;
  padding: 0;
}

.brand-badge{
  /* no blue badge/padding — let the logo stand on its own */
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  /* Reserve space for the visually scaled logo, but avoid colliding with nav controls */
  width: min(var(--brand-logo-w), calc(100vw - (var(--tap) + 64px)));
  height: var(--brand-logo-h);
  border-radius: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}

.brand-logo{
  display:block;
  width: min(var(--brand-logo-w), calc(100vw - (var(--tap) + 64px))); /* match the wide logo aspect ratio */
  height: auto;
  max-height: var(--brand-logo-h); /* keep header height stable */
  object-fit: contain;
  transition: transform .18s ease;
  will-change: transform;
}

.brand-logo:hover{
  transform: scale(1.04);
}

/* Keep a nice keyboard affordance without tying hover to the whole (wide) brand area */
.brand:focus-visible .brand-logo{
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce){
  .brand-logo{transition:none}
  .site-header .nav-link::after{transition:none}
  .site-header .dropdown-toggle .nav-label::after{transition:none}
  .dropdown-item .dropdown-label::after{transition:none}
  .course-card{transition:none}
  .course-card:hover{transform:none}
}

.brand-fallback{
  display:none;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 12px;
}

.brand--no-logo .brand-logo{display:none}
.brand--no-logo .brand-fallback{display:block}

.brand-name{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 20px;
}

@media (max-width: 860px){
  .module-toprow{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
  }
  .module-toprow__right{
    display:flex;
    justify-content: flex-end;
  }
  /* Mobile-only: make the logo bigger, while still protecting the hamburger button */
  :root{
    /* Wider & taller on phones; still capped and constrained by the width calc() in .brand-logo */
    --brand-logo-w: clamp(220px, 64vw, 340px);
    --brand-logo-h: clamp(72px, 18vw, 112px);
  }
}

.nav-toggle{
  margin-left: auto;
  display:none;
  align-items:center;
  justify-content:center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.55);
  color: inherit;
}
@media (prefers-color-scheme: dark){
  .nav-toggle{border-color: var(--stroke-dark); background: rgba(255,255,255,.06)}
}

.nav-toggle:focus-visible{outline: 3px solid rgba(10,132,255,.35); outline-offset: 2px}

.nav-toggle-icon{
  width: 18px;
  height: 12px;
  position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-toggle-icon::before{top:0}
.nav-toggle-icon::after{bottom:0}

.nav-panel{
  flex: 1;
  min-width: 0;
  display:flex;
  align-items:center;
  gap: 18px;
}

.nav-links{
  display:flex;
  flex: 1;
  justify-content: center;
  /* Even, comfortable spacing between top-level links (desktop). */
  gap: clamp(10px, 2.2vw, 22px);
  margin:0;
  padding:0;
  list-style:none;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  text-decoration:none;
  color: inherit;
  font-size: var(--nav-text-size);
  color: var(--muted);
  position: relative;
}
@media (prefers-color-scheme: dark){
  .nav-link{color: var(--muted-dark)}
}

.nav-link:hover{
  color: inherit;
  background: rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  .nav-link:hover{background: rgba(255,255,255,.08)}
}

/* Courses dropdown */
.dropdown-toggle{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.dropdown-caret{
  display:inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  position: relative;
  top: 1px;
}
.dropdown-caret::before{
  content:"";
  display:block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .9;
}

.nav-item--dropdown{
  position: relative;
}

.dropdown-menu{
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.92);
  box-shadow: var(--shadow-dark);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.dropdown-item{
  display:flex;
  align-items:center;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  text-decoration:none;
  position: relative;
  /* Match header link tone so dropdown text doesn't look visually larger. */
  color: rgba(255,255,255,.72);
  font-size: var(--nav-text-size);
}
.dropdown-item .dropdown-label{
  position: relative;
  display: inline-block;
}
.dropdown-item .dropdown-label::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .42s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.dropdown-item:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
}
.dropdown-item:focus-visible{
  outline: 3px solid rgba(10,132,255,.35);
  outline-offset: 2px;
}

.dropdown-item[aria-current="page"]{
  color: rgba(255,255,255,.92);
}
.underline-armed .dropdown-item[aria-current="page"] .dropdown-label::after{transform: scaleX(1); opacity: .9}

/* Desktop popover behavior */
@media (min-width: 861px){
  /* Prevent hover from dropping in the gap between button and menu */
  .nav-item--dropdown::after{
    content:"";
    position:absolute;
    left: 0;
    top: 100%;
    height: 10px;
    width: max(100%, 220px);
  }

  .dropdown-menu{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 200;
  }

  .nav-item--dropdown:hover .dropdown-menu,
  .nav-item--dropdown:focus-within .dropdown-menu,
  .nav-item--dropdown[data-open="true"] .dropdown-menu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.nav-actions{
  display:flex;
  align-items:center;
  gap: 6px;
  margin-left: auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  text-decoration:none;
  font-size: var(--nav-text-size);
  font-weight: 600;
  border: 1px solid transparent;
}

.btn-ghost{
  color: inherit;
  border-color: var(--stroke);
  background: rgba(255,255,255,.55);
}
@media (prefers-color-scheme: dark){
  .btn-ghost{border-color: var(--stroke-dark); background: rgba(255,255,255,.06)}
}

.btn-ghost:hover{background: rgba(0,0,0,.05)}
@media (prefers-color-scheme: dark){
  .btn-ghost:hover{background: rgba(255,255,255,.10)}
}

.btn-primary{
  /* Apple system orange for the primary CTA ("Get started") */
  background: #ff9500;
  color: #000;
  box-shadow: none;
}
.btn-primary:hover{background: #e68600}
.btn-primary:active{background: #cc7600}

.main{padding: 56px 0}
.hero-title{font-size: clamp(32px, 4vw, 48px); line-height: 1.08; margin: 0 0 10px; letter-spacing: -0.01em}
.hero-subtitle{margin:0; max-width: 60ch; color: var(--muted); font-size: 16px; line-height: 1.5}
@media (prefers-color-scheme: dark){.hero-subtitle{color: var(--muted-dark)}}

/* Sections */
.section-header{margin-top: 28px}
.section-title{
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.section-subtitle{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
@media (prefers-color-scheme: dark){.section-subtitle{color: var(--muted-dark)}}

/* Course grid */
.courses-section{margin-top: 22px}
.course-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .course-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 520px){
  .course-grid{grid-template-columns: 1fr}
}

.course-card{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  padding: 16px 16px 14px;
  min-height: 110px;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change: transform;
  outline: none;
}
@media (prefers-color-scheme: dark){
  .course-card{
    border-color: var(--stroke-dark);
    background: rgba(20,22,28,.62);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
  }
}

@media (hover:hover) and (pointer:fine){
  .course-card:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow);
    border-color: rgba(10,132,255,.22);
  }
  @media (prefers-color-scheme: dark){
    .course-card:hover{
      box-shadow: var(--shadow-dark);
      border-color: rgba(10,132,255,.35);
    }
  }
}

.course-card:focus-visible{
  outline: 3px solid rgba(10,132,255,.35);
  outline-offset: 3px;
}

.course-card__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.course-card__meta{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
@media (prefers-color-scheme: dark){.course-card__meta{color: var(--muted-dark)}}

/* Breadcrumb */
.breadcrumb{
  margin-bottom: 24px;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
}
.breadcrumb-sep{
  margin: 0 8px;
  color: var(--muted);
  user-select: none;
}
@media (prefers-color-scheme: dark){
  .breadcrumb-sep{color: var(--muted-dark)}
}
.breadcrumb-current{
  font-size: 14px;
  color: var(--text);
}
@media (prefers-color-scheme: dark){
  .breadcrumb-current{color: var(--text-dark)}
}
.breadcrumb-link{
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease;
}
@media (prefers-color-scheme: dark){
  .breadcrumb-link{color: var(--muted-dark)}
}
.breadcrumb-link:hover{
  color: var(--text);
}
@media (prefers-color-scheme: dark){
  .breadcrumb-link:hover{color: var(--text-dark)}
}

/* Module header */
.module-header{
  margin-bottom: 32px;
}
.module-header__row{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.module-header__titles{min-width: 0}
.module-header__actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.module-description{
  margin: 16px 0 0;
  max-width: 65ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
@media (prefers-color-scheme: dark){
  .module-description{color: var(--muted-dark)}
}

/* Module content */
.module-content{
  margin-top: 28px;
}

/* Module Progress Bar */
.module-progress{
  margin: 32px 0 40px;
}
.module-progress__track{
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
  position: relative;
}
@media (prefers-color-scheme: dark){
  .module-progress__track{
    background: rgba(255,255,255,.12);
  }
}
.module-progress__fill{
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width .3s cubic-bezier(.16,1,.3,1);
  will-change: width;
}
.module-progress__label{
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.module-progress__text{
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
@media (prefers-color-scheme: dark){
  .module-progress__text{color: var(--muted-dark)}
}

/* Module Layout: Two-column (Objectives + Content) */
.module-layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}


/* Module Objectives Sidebar */
.module-objectives{
  position: sticky;
  top: calc(100px + env(safe-area-inset-top));
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  overflow: hidden;
}
@media (prefers-color-scheme: dark){
  .module-objectives{
    border-color: var(--stroke-dark);
    background: rgba(20,22,28,.62);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
  }
}
.module-objectives__header{
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--stroke);
}
@media (prefers-color-scheme: dark){
  .module-objectives__header{
    border-bottom-color: var(--stroke-dark);
  }
}
.module-objectives__title{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.module-objectives__subtitle{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
@media (prefers-color-scheme: dark){
  .module-objectives__subtitle{color: var(--muted-dark)}
}
.module-objectives__content{
  padding: 18px;
}
.module-objectives__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.module-objectives__row{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .module-objectives__row:hover{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.06);
  }
  @media (prefers-color-scheme: dark){
    .module-objectives__row:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.10);
    }
  }
}

/* Keep the active lesson highlighted (same treatment as hover) */
.module-objectives__row[data-active="true"]{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .module-objectives__row[data-active="true"]{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
  }
}

.module-objectives__link{
  display:grid;
  grid-template-columns: 24px 1fr;
  column-gap: 10px;
  align-items:center;
  text-decoration:none;
  color: inherit;
  border-radius: 10px;
  outline: none;
  width: 100%;
}

.module-objectives__link:focus-visible{
  outline: 3px solid rgba(10,132,255,.35);
  outline-offset: 2px;
}
.module-objectives__link[data-active="true"] .module-objectives__link-text{
  color: var(--text);
  font-weight: 600;
}
@media (prefers-color-scheme: dark){
  .module-objectives__link[data-active="true"] .module-objectives__link-text{
    color: var(--text-dark);
  }
}
.module-objectives__link-text{
  display:block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  margin-top: 0;
}
@media (prefers-color-scheme: dark){
  .module-objectives__link-text{color: var(--muted-dark)}
}
.module-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.82);
  background: rgba(0,0,0,.06);
  flex: 0 0 auto;
  margin-top: 0;
}
@media (prefers-color-scheme: dark){
  .module-pill{
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.10);
  }
}


/* Module Body Content */
.module-body{
  min-width: 0;
}
.module-body__content{
  display:flex;
  flex-direction: column;
  gap: 14px;
  min-height: 400px;
}

/* Module sections (cards) */
.module-section{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  overflow: hidden;
  scroll-margin-top: 120px;
}
@media (prefers-color-scheme: dark){
  .module-section{
    border-color: var(--stroke-dark);
    background: rgba(20,22,28,.62);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
  }
}
.module-section__header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--stroke);
}
@media (prefers-color-scheme: dark){
  .module-section__header{border-bottom-color: var(--stroke-dark)}
}
.module-section__title{
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.module-section__meta{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
@media (prefers-color-scheme: dark){
  .module-section__meta{color: var(--muted-dark)}
}
.module-section__body{
  padding: 18px;
  min-height: 140px;
}
.module-section__footer{
  padding: 14px 18px 18px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

/* Single-section player behavior (JS toggles [hidden]) */
.module-section[hidden]{
  display:none !important;
}


/* Lesson list */
.lesson-list{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
}

.lesson-card{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  padding: 18px 18px 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change: transform;
}
@media (prefers-color-scheme: dark){
  .lesson-card{
    border-color: var(--stroke-dark);
    background: rgba(20,22,28,.62);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
  }
}

@media (hover:hover) and (pointer:fine){
  .lesson-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: rgba(10,132,255,.22);
  }
  @media (prefers-color-scheme: dark){
    .lesson-card:hover{
      box-shadow: var(--shadow-dark);
      border-color: rgba(10,132,255,.35);
    }
  }
}

.lesson-card__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.lesson-card__title{
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.lesson-card__duration{
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark){
  .lesson-card__duration{color: var(--muted-dark)}
}

.lesson-card__description{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
@media (prefers-color-scheme: dark){
  .lesson-card__description{color: var(--muted-dark)}
}

/* Mobile */
@media (max-width: 860px){
  :root{
    --gutter: 24px;
    --nav-text-size: 15px;
  }

  .nav-toggle{display:inline-flex}
  .nav-panel{
    position: absolute;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    top: calc(100% + 10px);
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.92);
    box-shadow: var(--shadow-dark);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    max-height: min(70vh, 520px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .nav{position:relative}
  .nav-links{flex-direction: column}
  .nav-link{width: 100%; justify-content: flex-start}
  .nav-actions{flex-direction: column; align-items: stretch}
  .btn{width: 100%}

  /* Mobile active state: underline text only (not the full row width) */
  .site-header .nav-panel .nav-link::after{content:none}
  .site-header .nav-panel .dropdown-toggle .nav-label::after{content:none}
  .underline-armed .site-header .nav-panel .nav-link[aria-current="page"]::after{content:none}
  .underline-armed .site-header .nav-panel .dropdown-toggle[aria-current="page"] .nav-label::after{content:none}
  .site-header .nav-panel [aria-current="page"]{
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
  }

  .nav-item--dropdown{width: 100%}
  .dropdown-toggle{width: 100%; justify-content: space-between}
  .dropdown-menu{
    position: static;
    padding: 6px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: none;
  }
  .nav-item--dropdown[data-open="true"] .dropdown-menu{display:block}
  .dropdown-item{color: rgba(255,255,255,.86)}
  .dropdown-item:hover{background: rgba(255,255,255,.10)}

  .nav-panel[data-state="open"]{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* iOS-like tap targets and spacing */
  .nav-link,
  .btn,
  .dropdown-item{
    min-height: var(--tap);
    height: auto;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .dropdown-menu{border-radius: 14px}

  .main{padding: 32px 0}
  .hero-title{font-size: clamp(28px, 7vw, 40px)}
  .hero-subtitle{font-size: 15px; line-height: 1.55}

  .breadcrumb{
    margin-bottom: 20px;
  }
  .breadcrumb-link{
    font-size: 15px;
  }

  .module-header{
    margin-bottom: 24px;
  }
  .module-header__row{
    align-items: flex-start;
  }
  .module-description{
    font-size: 15px;
    line-height: 1.55;
  }

  /* Module Progress Bar - Mobile */
  .module-progress{
    margin: 24px 0 28px;
  }
  .module-progress__track{
    height: 6px;
  }
  .module-progress__text{
    font-size: 12px;
  }

  /* Module Layout - Mobile: Stack vertically */
  .module-layout{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Full-screen player on mobile: don't stack objectives + content (use overlay) */
  body.module-page .module-layout{
    gap: 0;
  }
  body.module-page .module-objectives{
    display: none;
  }

  /* Module Objectives - Mobile */
  .module-objectives{
    position: static;
    order: 2;
  }
  .module-objectives__header{
    padding: 16px 16px 12px;
  }
  .module-objectives__title{
    font-size: 15px;
  }
  .module-objectives__subtitle{
    font-size: 12px;
  }
  .module-objectives__content{
    padding: 16px;
  }
  .module-objectives__list{
    gap: 12px;
  }
  .module-objectives__row{
    padding: 8px 8px;
  }
  .module-objectives__link-text{
    font-size: 13px;
  }
  .module-pill{
    width: 22px;
    height: 22px;
    border-radius: 8px;
  }
  /* Module Body - Mobile */
  .module-body{
    order: 1;
  }
  .module-body__content{
    min-height: 300px;
  }
  .module-section__header{
    padding: 16px 16px 12px;
  }
  .module-section__title{
    font-size: 17px;
  }
  .module-section__body{
    padding: 16px;
    min-height: 120px;
  }
  .module-section__footer{
    padding: 12px 16px 16px;
  }

  .lesson-card{
    padding: 16px 16px 14px;
  }
  .lesson-card__header{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .lesson-card__title{
    font-size: 16px;
  }
  .lesson-card__duration{
    font-size: 12px;
  }
  .lesson-card__description{
    font-size: 13px;
    line-height: 1.55;
  }
}

/* Sticky legal footer */
.legal-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  min-height: var(--legal-footer-height);
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
@media (prefers-color-scheme: dark){
  .legal-footer{
    border-top-color: var(--stroke-dark);
    background: rgba(20,22,28,.72);
  }
}
.legal-footer__inner{
  min-height: var(--legal-footer-height);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px 0;
  padding-bottom: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
.legal-footer__text{
  display: block;
  width: 100%;
  font-size: 12px;
  letter-spacing: .15px;
  color: var(--muted);
  text-align:center;
}
@media (prefers-color-scheme: dark){
  .legal-footer__text{color: var(--muted-dark)}
}