.course-sales .course-sales-hero {
  background: radial-gradient(ellipse at top right, #243849, #101419 70%);
  padding: clamp(3rem, 8vw, 6rem) 0;
  min-height: auto;
}

.course-sales .hero h1 { max-width: 19ch; }
.course-sales .hero p { max-width: 66ch; }
.course-sales .course-return { margin-top: 1.5rem; font-size: .95rem; }
.course-sales a:not(.btn) { text-underline-offset: .2em; }
.course-sales .course-sales-band { background: #161c23; }
.course-sales h2 { line-height: 1.2; }
.course-sales .grid { align-items: start; }
.course-sales .card { height: 100%; }
.course-sales [id] { scroll-margin-top: 100px; }

.course-syllabus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  padding-left: 1.8rem;
  margin-top: 2rem;
}
.course-syllabus li { padding: 1rem 0 1rem .4rem; border-top: 1px solid var(--line); }
.course-syllabus li::marker { color: #a9d5f2; font-weight: 700; }
.course-syllabus h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.course-syllabus p { margin: 0; color: var(--muted); }
.course-sample h3 { margin-top: 1.5rem; }
.course-access { margin-top: 1.5rem; }
.course-access summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; }
.course-access summary:focus-visible { outline: 2px solid #a9d5f2; outline-offset: 6px; }

@media (max-width: 650px) {
  .course-syllabus { grid-template-columns: 1fr; }
  .course-sales .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .course-sales .actions { align-items: stretch; }
  .course-sales .actions .btn { width: 100%; text-align: center; }
}