.course-hero { padding: 2.5rem 0 1.25rem; }
.course-hero h1 { max-width: 20ch; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; margin: .75rem 0 1rem; }
.course-hero .lead { max-width: 64ch; margin-bottom: 1rem; }
.course-preview { display: inline-block; color: var(--lime, #c8f000); border: 1px solid #4b6535; border-radius: .35rem; padding: .25rem .65rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.course-details { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0; padding: 0; list-style: none; color: #b8c8d7; font-size: .9rem; }
.course-area { padding: 0 0 3rem; }
.course-frame-wrap { background: #fff; border: 2px solid #9abd00; border-radius: 1rem; overflow: clip; }
.course-frame { display: block; width: 100%; min-height: 620px; border: 0; background: #fff; }
.course-caption { max-width: 80ch; color: #b8c8d7; margin: 1rem 0; font-size: .9rem; }
.course-help { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1.5rem 0; }
.course-fallback { padding: 1.25rem; background: #10242b; border: 1px solid #4b6535; border-radius: .5rem; }
.course-player-label { font-size: 1.1rem; margin: .25rem 0 1rem; }
@media (max-width: 45rem) { .course-hero { padding-top: 1.5rem; } .course-frame { min-height: 700px; } .course-frame-wrap { border-radius: .6rem; } .course-details { gap: .4rem 1rem; } }