/* ============================================================
   Course waitlist page. Palette + fonts come from styles.css.
   ============================================================ */

body.course{padding:56px 20px 64px;-webkit-user-select:auto;user-select:auto}
.course main{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.course .head{gap:10px}
/* top pill, same look as the bouquet builder's step pills */
.pill-tag{padding:8px 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--mat);
  color:var(--muted);font:600 11px Karla,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.course .title{font-size:clamp(40px,8vw,56px);line-height:1.02}
.course .title em{color:var(--red)}
.course .sub{max-width:40ch}
.course a{color:var(--price)}

#waitlist{width:100%;max-width:460px;display:flex;flex-direction:column;gap:12px}
#waitlist .row{display:flex;gap:8px;padding:6px;background:var(--mat);border:1.5px solid var(--line);border-radius:999px}
#waitlist input[type=email]{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 15px Karla,sans-serif;padding:8px 14px;color:var(--ink)}
#waitlist .row:focus-within{border-color:var(--red)}
#waitlist .pill-dark{margin:0}
#waitlist .pill-dark:disabled{opacity:.6;cursor:default}

.ask{border:0;margin:0;padding:0;font-size:14px;color:var(--muted)}
.ask legend{margin:0 auto 6px}
.ask legend span{color:var(--muted-2)}
.ask label{margin:0 10px;cursor:pointer;white-space:nowrap}
.ask input{accent-color:var(--red)}

.thanks{font-family:'Instrument Serif',Georgia,serif;font-size:30px;margin:0;color:var(--red)}

@media (max-width:460px){
  #waitlist .row{flex-direction:column;border-radius:20px}
  #waitlist .pill-dark{justify-content:center}
}