.lesson-start { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 0 0 26px; }
.lesson-start > span { color: var(--ink-2); font-size: 14px; }
.developer-lesson { scroll-margin-top: 105px; padding: 36px 0 40px; border-top: 1px solid var(--hair-cool); }
.lesson-eyebrow { color: var(--ink-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin: 0 0 12px; }
.lesson-heading { max-width: 780px; margin-bottom: 24px; }
.lesson-heading h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.18; margin: 0 0 16px; }
.lesson-heading > p:last-child { max-width: 65ch; color: var(--ink-2); margin: 0; }
.lesson-watch { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: center; }
#developer-lesson-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 16px; }
.lesson-outcomes h3 { font-size: 22px; line-height: 1.25; margin: 0 0 14px; }
.lesson-outcomes ul { padding-left: 21px; margin: 0 0 16px; color: var(--ink-2); }
.lesson-outcomes li + li { margin-top: 10px; }
.lesson-no-login { font-weight: 600; margin: 0 0 8px; }
.lesson-notes { margin: 24px 0; border: 1px solid var(--hair-cool); border-radius: 12px; background: var(--paper); }
.lesson-notes summary { padding: 16px 20px; cursor: pointer; font-weight: 500; min-height: 48px; }
.lesson-notes > div { padding: 0 20px 16px; max-width: 80ch; color: var(--ink-2); }
.lesson-notes strong { color: var(--ink); }
.lesson-video-error { color: #8b1742; }
.lesson-next { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; border: 1px solid var(--hair-lime); background: var(--lime-paper); border-radius: 20px; padding: 30px; margin-bottom: 40px; align-items: center; }
.lesson-next h2 { font-size: 30px; margin: 0 0 12px; line-height: 1.2; }
.lesson-next > div > p:last-child { color: var(--ink-2); margin-bottom: 0; }
.lesson-next-action p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 760px) {
  .lesson-watch, .lesson-next { grid-template-columns: minmax(0, 1fr); }
  .lesson-outcomes { padding-top: 4px; }
  .lesson-next { padding: 22px 18px; border-radius: 16px; }
  .lesson-next { gap: 24px; }
  .lesson-start { align-items: flex-start; flex-direction: column; gap: 14px; }
  .lesson-start > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
}