.course-page .on-green .hero { padding-top: var(--s7); padding-bottom: var(--s7); gap: var(--s4); }
.course-page .hero h1 { max-width: 21ch; }
.course-page .hero .lede { font-size: var(--t-body); max-width: 48ch; }
.course-page .hero__row { gap: var(--s3); }
.course-selection { padding-top: var(--s7); }
.course-selection__head { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.course-selection__head h2 { font-size: var(--d-3); }
.course-choices { display: grid; gap: var(--s4); }
.course-choice { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.course-choice:hover, .course-choice:focus-within { border-color: var(--ink); background: var(--paper); }
.course-choice__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.course-choice__head h3 { font-size: var(--d-4); }
.course-choice__head .num { font-size: var(--t-body); font-weight: var(--w-emph); }
.course-choice .micro { color: var(--ink-soft); }
.course-choice__link { display: inline-flex; align-items: center; min-height: 44px; gap: var(--s3); font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--line-firm); }
.course-choice__link:hover { text-decoration-color: var(--ink); }
.course-choice__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: auto; }
.course-choice__actions .btn--do { min-width: 0; min-height: 44px; padding-inline: var(--s5); }
.course-page .courses { padding-top: var(--s8); }
.course-page .course { scroll-margin-top: var(--s6); }
.course-guide { display: grid; gap: var(--s6); padding-top: var(--s10); }
.course-guide > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.course-guide > div { display: grid; align-content: center; gap: var(--s5); }
.course-guide .lede { font-size: var(--t-body); }
@media (min-width: 640px) {
  .course-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .course-choice { grid-template-rows: auto auto 1fr auto; }
}
@media (min-width: 1024px) {
  .course-page .on-green .hero { padding-top: var(--s8); padding-bottom: var(--s8); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--s10); align-items: end; }
  .course-page .hero > .eyebrow { grid-column: 1 / -1; }
  .course-page .hero__row { padding-bottom: var(--s1); }
  .course-selection { padding-top: var(--s8); }
  .course-selection__head { display: flex; justify-content: space-between; align-items: baseline; }
  .course-choice { padding: var(--s7); }
  .course-guide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s10); }
}

.lesson-summary { display: block; margin-top: var(--s2); font-size: var(--t-xs); color: var(--muted); line-height: 1.6; }
.course-materials { margin-top: var(--s6); }
.course-materials h3 { font-size: var(--t-sm); }
.course-materials ul { padding-left: var(--s5); margin-top: var(--s3); line-height: 1.8; }