/* Course list: photo half + form half on wide screens, stacked on phones. Black ground. Loaded after site.css. */
.cs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:100svh;background:#000;color:#fff}
.cs-media{position:sticky;top:0;height:100svh;overflow:hidden}
.cs-media .slot{position:absolute!important;inset:0;aspect-ratio:auto!important}
.cs-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.cs-side{padding:clamp(110px,15vh,150px) var(--m) clamp(56px,9vh,96px);max-width:680px}
.cs-side .micro{color:rgba(255,255,255,.6);margin-bottom:20px}
.cs-side .d1{font-size:clamp(3rem,5.4vw,5.8rem)}
.cs-lede{margin:20px 0 34px;font-size:clamp(16px,1.3vw,18px);color:rgba(255,255,255,.78);max-width:30em}
.cs-form{display:flex;flex-direction:column;gap:20px}
.cs-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.cs-f{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0}
.cs-f>span,.cs-f>legend{padding:0;font:500 10px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cs-f small{letter-spacing:.1em;text-transform:none;color:rgba(255,255,255,.4);margin-left:6px}
.cs-f input,.cs-f textarea{width:100%;min-width:0;height:52px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:#111;color:#fff;font:300 16px/1.4 var(--sans);outline:0;-webkit-appearance:none;transition:border-color .2s}
.cs-f textarea{height:auto;min-height:80px;padding:14px 18px;resize:vertical}
.cs-f input:focus,.cs-f textarea:focus{border-color:rgba(255,255,255,.6)}
.cs-f.bad input{border-color:#fff}
.cs-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:99px;background:#161616}
.cs-seg label,.cs-chips label{position:relative;cursor:pointer}
.cs-seg input,.cs-chips input{position:absolute;opacity:0;pointer-events:none}
.cs-seg span{display:flex;align-items:center;justify-content:center;height:44px;border-radius:99px;font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:background .2s,color .2s}
.cs-seg input:checked+span{background:#fff;color:#000}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chips span{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:99px;border:1px solid rgba(255,255,255,.22);font-size:14px;color:#fff;transition:background .2s,color .2s,border-color .2s}
.cs-chips input:checked+span{background:#fff;color:#000;border-color:#fff}
.cs-seg input:focus-visible+span,.cs-chips input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.cs-err{font-size:14px;color:#fff;padding:12px 16px;border-radius:12px;background:#1E1E1E}
.cs-go{height:58px;border-radius:99px;background:#fff;color:#000;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;margin-top:6px;transition:opacity .2s}
.cs-go:disabled{opacity:.5}
.cs-done .d2{margin:10px 0 0}
@media (max-width:699px){
  .cs{display:block}
  .cs-media{position:relative;height:46svh;min-height:320px}
  .cs-side{padding:32px 16px 56px}
  .cs-side .d1{font-size:clamp(2.6rem,12vw,3.2rem)}
  .cs-lede{margin:14px 0 26px;font-size:16px}
  .cs-two{grid-template-columns:1fr}
}
.pg-course .hdr{background:#000!important;color:#fff;border-color:rgba(255,255,255,.12)}
@media (min-width:700px){.cs{padding-top:64px}.cs-media{top:64px;height:calc(100svh - 64px)}}
.cs-go{text-align:center}
@media (max-width:699px){.cs{padding-top:56px}}
.cs-months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cs-months label{position:relative;cursor:pointer}
.cs-months input{position:absolute;opacity:0;pointer-events:none}
.cs-months span{display:flex;align-items:center;justify-content:center;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.22);font:400 1.15rem/1 var(--serif);color:#fff;transition:background .2s,color .2s,border-color .2s}
.cs-months input:checked+span{background:#fff;color:#000;border-color:#fff}
.cs-months input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.cs-f.bad .cs-months span{border-color:#fff}
.cs-lede b{color:#fff;font-weight:500}
@media (max-width:699px){.cs-months{grid-template-columns:repeat(2,minmax(0,1fr))}}