/* AI Academy waitlist, enquire and status pages (success, verify, unsubscribe, erase).
   Each page's script (waitlist.js, enquire.js, success.js, verify.js, unsubscribe.js,
   erase.js) shows one state by adding .show or .active; everything else starts
   hidden here. Ported from the old pages' inline styles onto the site tokens. */

.status{max-width:720px;}
.status h1{font-size:clamp(29px, 1.76vw + 14.5px, 45px);line-height:1.08;}
.status h2{font-size:clamp(21px, 0.72vw + 14.5px, 25.5px);}
.status h3{margin-bottom:12px;}
.status .form-row{margin-top:32px;}
.pref-card,.verify-card,.status-form,.status-done,.success-next{
  margin-top:32px;padding:clamp(24px, 3vw, 36px);border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-edge);
}
.status p{color:var(--text-muted);}
.status p + p{margin-top:12px;}
.status a:not(.btn){color:var(--highlight);text-decoration:underline;text-underline-offset:3px;}
.status strong{color:var(--text);}
.status form .btn,.status .pref-block form{margin-top:20px;}

/* ---------- forms: waitlist and enquire (each script hides the form and shows .status-done) ---------- */
.status-done{display:none;}
.status-done.show{display:block;}
.status-done p{margin-top:12px;}
.status-form.hide{display:none;}
/* The first field follows the hidden error box, so it carries no top margin of its own. */
.status-form .form-error + .form-row{margin-top:0;}
.form-error{display:none;margin-bottom:20px;padding:12px 16px;border-radius:var(--r-xs);border:1px solid var(--line-strong);background:var(--tint);color:var(--error-text);}
.form-error.show{display:block;}
/* waitlist.js shows this, with the course from ?track=, by setting its display inline. */
.selected-track-pill{margin-bottom:20px;padding:6px 14px;border-radius:999px;border:1px solid var(--line-hover);font-size:12px;color:var(--text);}
.status-form .body-mono{margin-top:14px;text-align:center;}

/* ---------- booking confirmation ---------- */
.success-mark{display:grid;place-items:center;width:56px;height:56px;margin-bottom:28px;border-radius:50%;border:2px solid var(--highlight);color:var(--highlight);font-size:19px;}
.success-next ul{margin:0;padding-left:20px;color:var(--text-muted);}
.success-next li{margin-bottom:8px;}
.status > .btn{margin-top:32px;}
.success-ref{margin-top:18px;font-family:var(--mono);font-size:12px;overflow-wrap:anywhere;}

/* ---------- certificate verification ---------- */
.verify-input-row{display:flex;gap:8px;}
.verify-input-row .form-input{flex:1;}
.verify-state{display:none;}
.verify-state.show{display:block;}
.verify-icon{display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:50%;font-size:21px;font-weight:600;}
.verify-icon.ok{border:2px solid var(--positive);color:var(--positive);}
.verify-icon.err{border:2px solid var(--error-text);color:var(--error-text);}
.verify-card h2{margin-bottom:12px;}
.verify-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.verify-row-label{flex:0 0 120px;color:var(--text-muted);}
.verify-row-value{flex:1;color:var(--text);overflow-wrap:anywhere;}
.verify-footnote{margin-top:32px;font-size:12px;}

/* ---------- unsubscribe and erase ---------- */
.pref-block{display:none;}
.pref-block.active{display:block;}

@media (max-width:560px){
  .verify-input-row{flex-direction:column;}
  .verify-row{flex-direction:column;gap:4px;}
  .verify-row-label{flex:none;}
}