/* A course's first look (#294, explainer.js): one screen before /student, its button above the fold on a 667px phone.
   While it shows, the page's own content and the tab bar step aside. */
body.is-explaining .student-surface>:not(.explainer-screen),body.is-explaining .app-tabbar{display:none}
.explainer-screen{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vq-space-4);max-width:640px;margin:0 auto;padding:var(--vq-space-4) var(--vq-gutter) var(--vq-space-6);color:var(--vq-ink);font:var(--vq-weight-medium) var(--vq-text-md)/1.5 var(--vq-font)}
.explainer-head{display:grid;gap:var(--vq-space-2)}
.explainer-eyebrow{margin:0;color:var(--vq-accent);font:var(--vq-weight-bold) var(--vq-text-sm)/1.2 var(--vq-font)}
.explainer-head h1{margin:0;font:var(--vq-weight-bold) min(var(--vq-text-xl),7vw)/1.15 var(--vq-font);letter-spacing:var(--vq-tracking-tight);text-wrap:balance}
.explainer-points{display:grid;gap:var(--vq-space-2);margin:0;padding:0;list-style:none;counter-reset:pt}
.explainer-points li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--vq-space-3);padding:var(--vq-space-3);border:var(--vq-border);border-radius:var(--vq-radius-md);background:var(--vq-surface);counter-increment:pt;line-height:1.4}
.explainer-points li::before{content:counter(pt);grid-row:span 2;display:grid;place-items:center;width:var(--vq-space-5);height:var(--vq-space-5);border-radius:var(--vq-radius-pill);background:var(--vq-accent);color:var(--vq-on-ink);font:var(--vq-weight-bold) var(--vq-text-xs)/1 var(--vq-font)}
.explainer-points b{font-weight:var(--vq-weight-bold)}
.explainer-points span{color:var(--vq-ink-muted);font-size:var(--vq-text-sm)}
/* A short phone: the points scroll, the button stays on screen above them. */
.explainer-act{position:sticky;bottom:0;display:grid;gap:var(--vq-space-2);padding-block:var(--vq-space-3);background:var(--vq-paper);text-align:center}
.explainer-facts{margin:0;color:var(--vq-ink-muted);font-size:var(--vq-text-xs)}