/* ===========================================================
   CLRS Academy — public site design system
   Ink + oxblood on white. Light grounds carry the oxblood accent;
   dark grounds (course heroes, sidebar, player) carry white instead.
   Conference surfaces stay oxblood-filled so they read distinctly
   against the ink-filled course surfaces.
   =========================================================== */
:root{
  /* dark grounds */
  --ink:#11263f;--ink2:#1d3552;
  /* accent — oxblood, used only on light grounds */
  --ox:#8e1414;--ox2:#6b0e10;--ox-t:#f9ecec;--ox-l:#e5b0b0;
  /* on dark grounds the accent is simply white */
  --onink:#e5b0b0;--onink2:#a8adb6;
  /* grounds + rules: white pages; warm rose bands on marketing pages,
     cool navy tint (--paper2) for the app shell */
  --paper:#ffffff;--paper2:#f2f5f8;--warm:#fcf1ee;--warmb:#f2ddd6;--card:#fff;--card2:#fafbfc;
  --bd:#e4e6ea;--bd2:#edeff2;--bdh:#d7dae0;
  /* text */
  --tx:#11263f;--tx2:#4a4f57;--tx3:#666c75;--mut:#868c95;--mut2:#979da6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Public Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
::selection{background:var(--ox);color:#fff}
a{text-decoration:none;color:inherit}
.sf{font-family:'Source Serif 4',Georgia,serif}
.mn{font-family:'IBM Plex Mono',ui-monospace,monospace}
.wrap{max-width:1360px;margin:0 auto;padding-left:40px;padding-right:40px}
.dots{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0);background-size:18px 18px}
.btn{display:inline-block;font-size:15px;font-weight:600;padding:13px 24px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:.15s;text-align:center;white-space:nowrap}
.btn-bronze{background:var(--ox);color:#fff}.btn-bronze:hover{background:var(--ox2)}
.btn-out{background:none;color:var(--ink);border-color:#c9ced5}.btn-out:hover{border-color:var(--ink)}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--bdh)}
.hbar{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.blogo{height:46px;width:auto;display:block}
.seal{width:40px;height:40px;border-radius:6px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',serif;font-weight:700;font-size:20px;flex-shrink:0}
.bname{display:block;font-family:'Source Serif 4',serif;font-weight:700;font-size:18px;line-height:1.05}
.bsub{display:block;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.13em;color:var(--mut);text-transform:uppercase;margin-top:2px}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:15px;font-weight:500;color:var(--ink)}.nav a:hover{color:var(--ox)}
.nav a.on{color:var(--ox)}
.hact{display:flex;align-items:center;gap:14px}
.hact .btn{padding:10px 18px;font-size:14px}

/* footer */
footer{background:#0b1a2b;color:#9aa3b5;padding:54px 0 32px}
.fgrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.fcolh{font-family:'IBM Plex Mono',monospace;color:var(--onink);font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}
.fcol a{display:block;font-size:14px;line-height:2;color:#9aa3b5}.fcol a:hover{color:#fff}
.fwm{font-family:'Source Serif 4',serif;font-size:20px;color:#fff}
.fcr{font-size:12px;color:#6f7890;margin-top:6px;line-height:1.7}

/* ---------- course detail ---------- */
.chero{background:linear-gradient(175deg,#fdf1ee 0%,#fdf6f3 45%,#fff 100%);color:var(--tx);border-bottom:1px solid var(--warmb)}
.chero .wrap{padding:26px 40px 50px}
.crumb{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--ox);margin-bottom:26px}
.crumb a:hover{color:var(--ox2)}
.ceyb{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ox);margin-bottom:16px}
.ch1{font-family:'Source Serif 4',serif;font-weight:600;font-size:44px;line-height:1.08;letter-spacing:-.015em;margin:0;max-width:16em}
.cintro{font-size:17px;line-height:1.62;color:var(--tx2);margin:18px 0 0;max-width:36em}
.cmeta{display:grid;grid-template-columns:repeat(4,auto);gap:24px 40px;margin-top:30px}
.cmeta .ml{font-size:12px;color:var(--ox);margin-bottom:5px}
.cmeta .mv{font-weight:600;font-size:15px;color:var(--tx)}

.cgrid{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;padding-top:44px;padding-bottom:56px}
.cmain h2{font-family:'Source Serif 4',serif;font-weight:600;font-size:24px;margin:0 0 16px;letter-spacing:-.01em}
.cmain h2::before{content:"";display:block;width:36px;height:3px;background:var(--ox);margin-bottom:14px}
.cmain h2.mt{margin-top:48px}
.cmain .about p{font-size:15.5px;line-height:1.75;color:#1a1a1a;margin:0 0 14px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.cmain .about strong{color:var(--ink)}
/* Subsections inside a rich conference description: a heading a step down from
   the section h2, and lists and links that match the rest of the page. */
.cmain .about h3{font-family:'Source Serif 4',serif;font-weight:600;font-size:18.5px;color:var(--ink);letter-spacing:-.01em;margin:30px 0 12px}
.cmain .about ul{list-style:none;padding:0;margin:0 0 14px}
.cmain .about ul li{font-size:15.5px;line-height:1.75;color:#1a1a1a;padding-left:24px;position:relative;margin-bottom:12px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.cmain .about ul li::before{content:"";position:absolute;left:3px;top:11px;width:7px;height:7px;border:1.5px solid var(--ox);border-radius:50%}
.cmain .about a{color:var(--ox);text-decoration:underline;text-underline-offset:2px}
/* The Turnstile widget sits just above a form's submit button; give it room. */
.cf-turnstile{margin:14px 0 6px}

.learn{display:grid;grid-template-columns:1fr 1fr;gap:11px 28px;list-style:none;padding:0;margin:4px 0 0}
.learn li{font-size:14.5px;line-height:1.5;color:var(--tx2);padding-left:25px;position:relative}
.learn li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border:1.5px solid var(--ox);border-radius:50%}

.mod{border:1px solid var(--bd);border-radius:9px;margin-bottom:13px;overflow:hidden;background:var(--card);box-shadow:0 1px 5px rgba(17,38,63,.06)}
.modh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;background:#faf3f0;cursor:pointer;list-style:none}
.modh::-webkit-details-marker{display:none}
.mod[open] .modh{border-bottom:1px solid var(--bd)}
.modt{font-family:'Source Serif 4',serif;font-size:16px;font-weight:600}
.modright{display:flex;align-items:center;gap:13px;flex-shrink:0}
.modm{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut);white-space:nowrap}
.chev{width:8px;height:8px;border-right:2px solid #9aa3b5;border-bottom:2px solid #9aa3b5;transform:rotate(45deg);transition:transform .18s}
.mod[open] .chev{transform:rotate(-135deg)}
.les{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 18px;font-size:14px;border-top:1px solid #e9ebee}
.les:first-of-type{border-top:0}
.lesl{color:var(--tx2)}
.lesr{display:flex;align-items:center;gap:12px;flex-shrink:0}
.prev{font-family:'IBM Plex Mono',monospace;color:var(--ox);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.lest{font-family:'IBM Plex Mono',monospace;color:var(--mut2);font-size:11.5px}
a.les{cursor:pointer;transition:background .12s}
a.les:hover{background:var(--card2)}
a.les:hover .lesl{color:var(--ox)}
.lesgo{color:var(--ox);font-weight:700;opacity:0;transition:opacity .12s}
a.les:hover .lesgo{opacity:1}
/* dashboard notifications */
.lnkbtn{background:none;border:0;cursor:pointer;font-family:inherit;font-size:14px;color:var(--ox);font-weight:600;padding:0}
.lnkbtn:hover{color:var(--ox2);text-decoration:underline}
.notes{display:flex;flex-direction:column;gap:9px;margin-bottom:8px}
.note{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--bd);border-radius:11px;background:var(--card);text-decoration:none;color:inherit;box-shadow:0 1px 5px rgba(17,38,63,.06);transition:background .12s,border-color .12s}
.note:hover{background:var(--card2);border-color:var(--ox)}
.note.unread{border-left:3px solid var(--ox)}
.nico{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;background:var(--paper2);color:var(--ink)}
.nico-passed{background:#e6f2ea;color:#1f7a4d}
.nico-failed{background:#fdf0ef;color:#c62d2d}
.nico-enrolled{background:#eef0f2;color:var(--ink)}
.nbody{display:flex;flex-direction:column;gap:2px;min-width:0}
.ntitle{font-weight:700;color:var(--tx)}
.ntext{font-size:14px;color:var(--tx3)}
.ntime{font-size:11.5px;color:var(--mut2);font-family:'IBM Plex Mono',monospace;margin-top:3px}
/* auth modal (sign in / create account popup) */
.authmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s}
.authmodal.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .24s ease,visibility 0s}
.authmodal-overlay{position:fixed;inset:0;background:rgba(17,38,63,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.authmodal-card{position:relative;z-index:1;width:100%;max-width:430px;background:var(--paper);border:1px solid var(--bd);border-radius:16px;padding:30px 32px 26px;box-shadow:0 30px 80px -28px rgba(17,38,63,.6);opacity:0;transform:translateY(16px) scale(.975);transition:opacity .26s ease,transform .3s cubic-bezier(.16,.84,.44,1)}
.authmodal.open .authmodal-card{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.authmodal,.authmodal.open,.authmodal-card,.authmodal.open .authmodal-card{transition-duration:.01ms}}
.authmodal-x{position:absolute;top:13px;right:16px;background:none;border:0;font-size:26px;line-height:1;color:var(--mut);cursor:pointer;padding:4px}
.authmodal-x:hover{color:var(--ink)}
.authmodal-head{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.authmodal-brand{font-size:17px;font-weight:700;color:var(--ink)}
.authmodal-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.authtabs{display:flex;gap:6px;background:#faf3f0;border:1px solid var(--warmb);border-radius:10px;padding:4px;margin-bottom:22px}
.authtab{flex:1;border:0;background:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--tx2);padding:9px;border-radius:7px;transition:.15s}
.authtab.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(17,38,63,.1)}
.authpanel{display:none}
.authpanel.on{display:block}
.authalt{text-align:center;margin:18px 0 0;font-size:13px}
.authalt a{color:var(--mut2)}
/* dashboard: complete-profile prompt */
.pprompt{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#11263f;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 0);background-size:18px 18px;color:#fff;border-radius:13px;padding:20px 24px;margin-bottom:18px}
.pprompt .ppbody{min-width:240px;flex:1}
.pprompt .ppt{font-size:18px;font-weight:600;margin-bottom:4px}
.pprompt p{margin:0;font-size:14px;color:rgba(255,255,255,.78);line-height:1.55}
.pprompt .ppact{display:flex;align-items:center;gap:14px}
.pprompt .ppskip{background:none;border:0;color:rgba(255,255,255,.7);cursor:pointer;font-family:inherit;font-size:13.5px;text-decoration:underline}
.pprompt .ppskip:hover{color:#fff}
/* catalogue filter bar + card rating */
.catfilter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.catfilter .field{margin-bottom:0;width:auto}
.catfilter .catsearch{flex:1;min-width:220px}
.catfilter select.field{cursor:pointer;padding-right:30px}
.catclear{font-size:13px;color:var(--mut2);text-decoration:underline}
.catempty{padding:30px 0}
.leslock .lesl{color:var(--mut2)}
.lesunlock{color:var(--ox);font-size:11px;letter-spacing:.02em;white-space:nowrap}
/* dashboard announcements */
.annlist{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.ann{display:block;border:1px solid var(--bd);border-left:3px solid var(--ox);border-radius:11px;padding:15px 18px;background:var(--card);text-decoration:none;color:inherit;box-shadow:0 1px 5px rgba(17,38,63,.06);transition:background .12s,border-color .12s}
.ann:hover{background:var(--card2)}
.annhd{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.anncode{font-size:11px;color:var(--ox);font-weight:600;letter-spacing:.04em}
.anndate{font-size:11px;color:var(--mut2)}
.anntitle{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:3px}
.annbody{font-size:13.5px;color:var(--tx3);line-height:1.55}
/* course prerequisites (enrol rail) */
.prereqs{border:1px solid var(--bd);border-radius:9px;padding:12px 14px;margin-bottom:14px;background:var(--card2)}
.prereqh{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.prereq{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tx2);text-decoration:none;padding:3px 0}
.prereq:hover{color:var(--ox)}
.prereqi{color:var(--mut2);font-size:12px}
.prereq.met .prereqi{color:#1f7a4d}
/* lesson Q&A (player) */
.tabn{display:inline-block;background:var(--ox);color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 6px;margin-left:5px;vertical-align:middle}
.qaform{margin-bottom:20px}
.qanote{font-size:13.5px;color:var(--tx3);margin:0 0 10px}
.qa{border-top:1px solid var(--bd);padding:16px 0}
.qahd{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.qaav{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.qaname{font-weight:600;color:var(--ink);font-size:14px}
.qadate{font-size:11px;color:var(--mut2)}
.qabody{font-size:14px;color:var(--tx2);line-height:1.6;white-space:pre-line}
.qareply{margin:12px 0 0 30px;padding:12px 0 0 14px;border-left:2px solid var(--bd)}
.qarep{margin:10px 0 0 30px}
.qarep summary{cursor:pointer;font-size:13px;color:var(--ox);font-weight:600}
.qarep .qaform{margin-top:10px}
/* affiliate dashboard */
.reflink{display:flex;gap:10px;align-items:center}
.reflink .field{flex:1}
.refstatus{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600}
.refstatus-pending{background:#eef0f2;color:var(--tx2)}
.refstatus-approved{background:#f9ecec;color:var(--ox)}
.refstatus-paid{background:#e6f2ea;color:#1f7a4d}
/* conference paper submission status */
.papstat{margin-top:12px;padding-top:14px;border-top:1px solid var(--bd2)}
.papst{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.papt{font-size:15px;font-weight:600;color:var(--ink);margin:3px 0 8px}
.papbadge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;background:#eef0f2;color:var(--tx2)}
.papbadge-abstract_approved,.papbadge-paper_accepted{background:#e6f2ea;color:#1f7a4d}
.papbadge-abstract_rejected,.papbadge-paper_rejected{background:#fdf0ef;color:#c62d2d}
.papbadge-paper_submitted{background:#f9ecec;color:var(--ox)}
/* conference action modals */
.cmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s}
.cmodal.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .24s ease,visibility 0s}
.cmodal-overlay{position:fixed;inset:0;background:rgba(17,38,63,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cmodal-card{position:relative;z-index:1;width:100%;max-width:480px;background:var(--paper);border:1px solid var(--bd);border-radius:16px;padding:28px 30px;box-shadow:0 30px 80px -28px rgba(17,38,63,.6);opacity:0;transform:translateY(16px) scale(.975);transition:opacity .26s ease,transform .3s cubic-bezier(.16,.84,.44,1)}
.cmodal.open .cmodal-card{opacity:1;transform:none}
.cmodal-x{position:absolute;top:13px;right:16px;background:none;border:0;font-size:26px;line-height:1;color:var(--mut);cursor:pointer;padding:4px}
.cmodal-x:hover{color:var(--ink)}
.cmodal-kick{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.cmodal-h{font-size:23px;font-weight:600;color:var(--ink);margin:0 0 16px}
.presentlink{display:block;width:100%;text-align:center;background:none;border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--ox);padding:2px 0}
.presentlink:hover{text-decoration:underline}
@media (prefers-reduced-motion: reduce){.cmodal,.cmodal.open,.cmodal-card,.cmodal.open .cmodal-card{transition-duration:.01ms}}
/* exam countdown timer */
.examtimer{margin-left:auto;background:var(--ink);color:#fff;font-size:15px;font-weight:600;padding:7px 14px;border-radius:8px;letter-spacing:.02em;min-width:74px;text-align:center}
.examtimer.warn{background:#c62d2d;animation:tpulse 1s ease-in-out infinite}
@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.7}}

.instr{display:flex;gap:17px;align-items:flex-start;border:1px solid var(--bd);border-radius:9px;padding:20px;background:var(--card);box-shadow:0 1px 5px rgba(17,38,63,.06)}
.iav{width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--onink);display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',serif;font-size:21px;flex-shrink:0}
.inm{font-family:'Source Serif 4',serif;font-size:18px;font-weight:600}
.irole{font-size:13px;color:var(--ox);font-weight:600;margin:3px 0 2px}
.iorg{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut2);margin-bottom:10px}
.ibio{font-size:14px;line-height:1.65;color:#4a4f57;margin:0;text-align:justify;-webkit-hyphens:auto;hyphens:auto}

aside.rail{position:sticky;top:96px;align-self:start}
.enrol{background:var(--card);border:1px solid var(--bd);border-radius:11px;overflow:hidden;box-shadow:0 18px 44px -26px rgba(17,38,63,.5)}
.eprev{aspect-ratio:16/9;background:var(--ink);position:relative}
.eprev iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.eplay{position:relative;width:48px;height:48px;border-radius:50%;border:2px solid var(--onink);color:var(--onink);display:flex;align-items:center;justify-content:center;font-size:14px;padding-left:4px}
.ebody{padding:22px 20px}
.eprice{font-family:'Source Serif 4',serif;font-size:30px;font-weight:700;line-height:1;margin-bottom:16px}
.eprice small{font-size:13px;color:var(--mut2);font-family:'Public Sans',sans-serif;font-weight:400}
.estart{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ox);margin:9px 0 17px;letter-spacing:.02em}
.ebtn{display:block;margin-bottom:10px}
.einc{list-style:none;padding:17px 0 0;margin:16px 0 0;border-top:1px solid #e9ebee}
.einc li{font-size:13.5px;color:var(--tx2);padding:6px 0 6px 26px;position:relative;line-height:1.5}
.einc li b{font-weight:600;color:var(--ink)}
.einc li::before{content:"\2713";position:absolute;left:0;top:5px;color:var(--ox);font-weight:600}

/* ---------- catalogue ---------- */
.lhero{background:linear-gradient(175deg,#fdf1ee 0%,#fdf6f3 45%,#fff 100%);color:var(--tx);border-bottom:1px solid var(--warmb)}
.lhero .wrap{padding:40px 40px 46px}
.lhero .ceyb{margin-bottom:14px}
.lh1{font-family:'Source Serif 4',serif;font-weight:600;font-size:38px;line-height:1.1;letter-spacing:-.015em;margin:0}
.lhsub{font-size:16px;color:var(--tx2);margin:14px 0 0;max-width:42em}
.catwrap{padding-top:40px;padding-bottom:56px}
.cgridcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ccard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:12px;overflow:hidden;transition:.16s}
.ccard:hover{box-shadow:0 20px 44px -28px rgba(17,38,63,.45);transform:translateY(-3px)}
.cchead{height:92px;padding:15px 18px;display:flex;align-items:flex-start;justify-content:space-between;background-image:linear-gradient(160deg,rgba(255,255,255,.09),transparent 55%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0);background-size:auto,16px 16px}
.cccode{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.82)}
.cclevel{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(255,255,255,.16);padding:4px 9px;border-radius:20px}
.ccbody{padding:18px;display:flex;flex-direction:column;flex:1}
.cccat{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ox);margin-bottom:9px}
.cctitle{font-family:'Source Serif 4',serif;font-size:18px;font-weight:600;line-height:1.25;margin-bottom:9px}
.ccsum{font-size:13.5px;color:var(--tx3);line-height:1.55;margin-bottom:16px;flex:1}
.ccfoot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--bd2);padding-top:14px}
.ccprice{font-family:'Source Serif 4',serif;font-size:19px;font-weight:700}
.ccmeta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut)}

/* ---------- homepage ---------- */
.kick{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ox)}
.btn-navy{background:var(--ink);color:#fff}.btn-navy:hover{background:var(--ink2)}
.btn-out2{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}.btn-out2:hover{background:rgba(255,255,255,.14)}

.hero{display:grid;grid-template-columns:1fr .82fr;gap:48px;align-items:center;padding-top:44px;padding-bottom:60px}
.h1{font-family:'Source Serif 4',serif;font-weight:600;font-size:58px;line-height:1.04;letter-spacing:-.015em;margin:22px 0 24px}
.lede{font-size:18px;line-height:1.65;color:var(--tx2);max-width:30em;margin:0 0 32px}
.hbtns{display:flex;gap:14px;flex-wrap:wrap}
/* homepage hero: warm wash + icon stat chips */
.herowash{background:linear-gradient(175deg,#fdf1ee 0%,#fdf6f3 34%,#fff 76%)}
.hstats{display:flex;gap:34px;margin-top:46px;padding-top:30px;border-top:1px solid #f0dcd6;flex-wrap:wrap}
.hstat{display:flex;gap:13px;align-items:center}
.stic{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.stic svg{width:22px;height:22px}
.stic-red{background:#f9e4e0;color:var(--ox)}
.stic-navy{background:#e5edf5;color:var(--ink)}
.stat .stic{width:40px;height:40px;margin-bottom:12px}
.stat .stic svg{width:19px;height:19px}
.pills.p3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.pills.p3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pills.p3{grid-template-columns:1fr}}
.stn{font-family:'Source Serif 4',serif;font-weight:700;font-size:30px}
.stl{font-size:13px;color:var(--tx3);margin-top:2px}
.fcard{background:var(--card);border:1px solid var(--bd);border-radius:12px;overflow:hidden;box-shadow:0 24px 60px -34px rgba(17,38,63,.4)}
.fhead{height:200px;background-color:var(--ink);background-image:linear-gradient(160deg,rgba(255,255,255,.09),transparent 55%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0);background-size:auto,18px 18px;position:relative;display:flex;align-items:flex-end;padding:22px}
.fhi{position:relative}
.fhk{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--onink);text-transform:uppercase}
.fht{font-family:'Source Serif 4',serif;color:#fff;font-size:25px;font-weight:600;line-height:1.18;margin-top:8px;max-width:13em}
.fbody{padding:24px}
.fmeta{display:flex;gap:18px;font-size:13px;color:var(--tx3);margin-bottom:16px;flex-wrap:wrap}
.fbody p{font-size:14.5px;line-height:1.6;color:var(--tx2);margin:0 0 20px}
.fprice{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid #e9ebee}
.fpr{font-family:'Source Serif 4',serif;font-weight:700;font-size:26px}
.fpr small{font-size:13px;color:var(--mut2);font-family:'Public Sans',sans-serif;font-weight:400}

.sec{padding-top:56px;padding-bottom:56px}
.secw{background:var(--warm);border-top:1px solid var(--warmb);border-bottom:1px solid var(--warmb)}
.shd{font-family:'Source Serif 4',serif;font-weight:600;font-size:34px;letter-spacing:-.01em;margin:12px 0 0}
.srow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px}
.more{font-size:15px;font-weight:600;color:var(--ink)}.more:hover{color:var(--ox)}

.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:42px}
.pill{border:1px solid var(--bd);border-radius:10px;padding:26px 24px;background:var(--card2);transition:.15s}
.pill:hover{box-shadow:0 16px 34px -24px rgba(17,38,63,.35);transform:translateY(-3px)}
/* Scoped to .pill deliberately. Bare .pk made a 42px round chip, and the
   course player's top-bar crumb also uses .pk — it was being poured into that
   circle and clipped to "-101 ·". Every chip in the site lives inside .pill. */
.pill .pk{font-family:'Source Serif 4',serif;font-size:16px;font-weight:700;color:var(--ox);width:42px;height:42px;border-radius:50%;background:#f9e4e0;display:flex;align-items:center;justify-content:center}
.pt{font-family:'Source Serif 4',serif;font-size:21px;font-weight:600;margin:14px 0 10px}
.pill p{font-size:14px;line-height:1.55;color:var(--tx3);margin:0 0 18px}
.pc{font-size:13px;font-weight:600;color:var(--ox)}

.conf{background:linear-gradient(135deg,#9e1919 0%,var(--ox) 45%,#6b0e10 100%);color:#fff;border-radius:14px;padding:50px 54px;display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;position:relative;overflow:hidden}
.confk{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#e5b0b0;margin-bottom:14px}
.conf h2{font-family:'Source Serif 4',serif;font-weight:600;font-size:32px;line-height:1.15;margin:0 0 12px;max-width:18em}
.conf p{font-size:15.5px;line-height:1.55;color:#ecd6d8;margin:0;max-width:32em}
.confbtn{position:relative;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ox);font-size:15px;font-weight:700;padding:15px 26px;border-radius:7px}

.fac{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.faccard{border:1px solid var(--bd);border-radius:11px;overflow:hidden;background:var(--card2)}
.facimg{height:160px;background:linear-gradient(160deg,#f9e4e0,#fdf4f1);display:flex;align-items:center;justify-content:center;color:var(--ox);font-family:'Source Serif 4',serif;font-size:34px}
.facbody{padding:22px}
.facn{font-family:'Source Serif 4',serif;font-size:19px;font-weight:600}
.facr{font-size:13px;color:var(--ox);font-weight:600;margin:4px 0 3px}
.faco{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut2);letter-spacing:.03em;margin-bottom:14px}
.facbody p{font-size:13.5px;line-height:1.6;color:#4a4f57;margin:0}

.cta{background:linear-gradient(180deg,#fff 0%,#fcf1ee 50%,#f7dfd8 100%);color:var(--tx);position:relative;overflow:hidden}
.cta .wrap{padding:56px 40px;text-align:center;position:relative}
.cta h2{font-family:'Source Serif 4',serif;font-weight:600;font-size:40px;line-height:1.12;letter-spacing:-.015em;margin:0 0 16px}
.cta p{font-size:17px;color:var(--tx2);margin:0 auto 32px;max-width:34em;line-height:1.6}

/* ---------- conference / event ---------- */
.btn-maroon{background:var(--ox);color:#fff}.btn-maroon:hover{background:var(--ox2)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}.btn-ghost:hover{background:rgba(255,255,255,.2)}
.ehero{background:linear-gradient(172deg,#fbe9e6 0%,#fdf3f0 42%,#fff 100%);color:var(--tx);border-bottom:1px solid var(--warmb);position:relative;overflow:hidden}
.ehero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(142,20,20,.05) 1px,transparent 0);background-size:20px 20px;pointer-events:none}
.ehero .wrap{padding:34px 40px 44px;position:relative;z-index:1}
.ehero .crumb{color:var(--ox);margin-bottom:26px}
.ehero .crumb a:hover{color:var(--ox2)}
.ebadge{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ox);background:#f9e4e0;border:1px solid #eec8c4;padding:6px 13px;border-radius:20px;margin-bottom:18px}
.eh1{font-family:'Source Serif 4',serif;font-weight:600;font-size:46px;line-height:1.06;letter-spacing:-.015em;margin:0;max-width:15em}
.eintro{font-size:17px;line-height:1.6;color:var(--tx2);margin:16px 0 0;max-width:38em}
.emeta{display:grid;grid-template-columns:repeat(4,auto);gap:22px 44px;margin:30px 0 26px}
.emeta .ml{font-size:12px;color:var(--ox);margin-bottom:5px}
.emeta .mv{font-weight:600;font-size:15px;color:var(--tx)}
.ecta{display:flex;gap:12px;flex-wrap:wrap}
.egrid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start;padding-top:44px;padding-bottom:56px}
.egrid .rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
@media(max-width:860px){.egrid{grid-template-columns:1fr}.egrid .rail{position:static}}
.emain h2{font-family:'Source Serif 4',serif;font-weight:600;font-size:24px;margin:0 0 16px}
.emain h2::before{content:"";display:block;width:36px;height:3px;background:var(--ox);margin-bottom:14px}
.emain h2.mt{margin-top:46px}
.emain p{font-size:15.5px;line-height:1.75;color:var(--tx2);margin:0 0 14px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.trk{background:var(--card);border:1px solid var(--bd);border-radius:9px;padding:15px 17px}
.trk .tn{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--ox);margin-bottom:6px}
.trk .tt{font-family:'Source Serif 4',serif;font-size:16px;font-weight:600;line-height:1.25}
.agenda{background:var(--card);border:1px solid var(--bd);border-radius:11px;overflow:hidden;box-shadow:0 1px 5px rgba(17,38,63,.06)}
.arow{display:flex;gap:20px;padding:16px 20px;border-top:1px solid #e9ebee}
.arow:first-child{border-top:0}
.atime{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ox);font-weight:500;width:108px;flex-shrink:0;padding-top:2px}
.att{font-family:'Source Serif 4',serif;font-size:16.5px;font-weight:600;line-height:1.3}
.asp{font-size:13.5px;color:var(--tx3);margin-top:3px}
.akey{background:#faf6f6}
.spk{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.spk .sp{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:16px}
.spav{width:52px;height:52px;border-radius:50%;background:var(--ox);color:#ecd6d8;display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',serif;font-size:19px;flex-shrink:0}
.spn{font-family:'Source Serif 4',serif;font-size:16px;font-weight:600;line-height:1.15}
.spr{font-size:12.5px;color:var(--ox);font-weight:600;margin:3px 0 1px}
.spo{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--mut2)}
.reg{background:var(--card);border:1px solid var(--bd);border-radius:11px;overflow:hidden;box-shadow:0 18px 44px -26px rgba(142,20,20,.35)}
.regtop{background:var(--ox);color:#fff;padding:18px 20px}
.regd{font-family:'Source Serif 4',serif;font-size:26px;font-weight:700;line-height:1}
.regw{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ox-l);letter-spacing:.04em;margin-top:7px}
.regbody{padding:20px}
.fee{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid #e9ebee;font-size:14px}
.fee:last-of-type{border-bottom:0}
.fee b{font-family:'Source Serif 4',serif;font-size:17px}
.feel{color:var(--tx2)}
.regacts{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #e9ebee}
.regbtn{display:flex;align-items:center;justify-content:center;width:100%;margin:0}
.regnote{font-size:11px;color:var(--mut);text-align:center;margin-top:12px;letter-spacing:.02em}
.cfp{margin-top:16px;padding-top:16px;border-top:1px solid #e9ebee}
.cfph{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ox);margin-bottom:7px}
.cfp p{font-size:13px;color:var(--tx3);margin:0 0 10px;line-height:1.55}

/* ---------- auth (login / register) ---------- */
.auth{display:grid;grid-template-columns:0.92fr 1.08fr;min-height:100vh}
.apanel{background:var(--ink);color:#fff;padding:46px 52px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.apanel::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);background-size:20px 20px;pointer-events:none}
.abrand{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.aname{font-family:'Source Serif 4',serif;font-weight:700;font-size:19px;line-height:1.05}
.asub{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.13em;color:#8a93a8;text-transform:uppercase;margin-top:2px;display:block}
.amid{margin-top:auto;margin-bottom:auto;position:relative;z-index:1;padding:40px 0}
.akick{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--onink);margin-bottom:18px}
.ahead{font-family:'Source Serif 4',serif;font-size:38px;font-weight:600;line-height:1.16;letter-spacing:-.015em;margin:0;max-width:12em}
.alist{list-style:none;padding:0;margin:30px 0 0}
.alist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#c3cad8;margin-bottom:15px;max-width:24em}
.alist svg{width:18px;height:18px;color:var(--onink);flex-shrink:0;margin-top:2px}
.afoot{position:relative;z-index:1;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#7e879b;letter-spacing:.03em}
.aform{display:flex;align-items:center;justify-content:center;padding:46px;background:linear-gradient(180deg,#fdf6f4,#fff 60%)}
.fbox{width:100%;max-width:418px}
.ftitle{font-family:'Source Serif 4',serif;font-size:30px;font-weight:600;letter-spacing:-.01em;margin:0 0 7px}
.fsub{font-size:15px;color:var(--tx3);margin:0 0 28px}
.fsub a{color:var(--ox);font-weight:600}
.lbl{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}
.field{width:100%;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:13px 15px;font-family:'Public Sans',sans-serif;font-size:15px;color:var(--ink);outline:none;transition:.15s;margin-bottom:16px}
.field:focus{border-color:var(--ox);box-shadow:0 0 0 3px rgba(142,20,20,.13)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg{display:flex;gap:8px;margin-bottom:18px}
.seg label{flex:1;position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:11px;border:1px solid var(--bd);border-radius:8px;font-size:14px;font-weight:600;color:var(--tx2);background:var(--card);transition:.15s}
.seg input:checked + span{border-color:var(--ox);background:#f9ecec;color:var(--ink);box-shadow:0 0 0 2px rgba(142,20,20,.12)}
.frow{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 22px}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--tx2);cursor:pointer}
.chk.start{align-items:flex-start;font-size:13.5px;margin:2px 0 22px;line-height:1.5}
.chk input{width:16px;height:16px;accent-color:var(--ox)}
.chk.start input{margin-top:2px;flex-shrink:0}
.chk a{color:var(--ox);font-weight:600}
.flink{font-size:14px;color:var(--ox);font-weight:600}
.auth .btn{display:block;width:100%;text-align:center;padding:14px;border-radius:8px}
.ferr{background:#fdf0ef;border:1px solid #f0cfcd;color:#b02a2a;font-size:13.5px;padding:11px 14px;border-radius:8px;margin-bottom:18px}
.ferr ul{margin:0;padding-left:18px}

@media(max-width:980px){.cgridcards{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding-top:50px;padding-bottom:50px}.pills{grid-template-columns:1fr 1fr}.fac{grid-template-columns:1fr}.conf{grid-template-columns:1fr;padding:38px 30px}.egrid{grid-template-columns:1fr;gap:30px}.tracks,.spk{grid-template-columns:1fr}.eh1{font-size:34px}.emeta{grid-template-columns:1fr 1fr}.arow{flex-direction:column;gap:4px}.atime{width:auto}}
@media(max-width:880px){.auth{grid-template-columns:1fr}.apanel{display:none}.aform{min-height:100vh;padding:32px 22px}}

/* ===== logged-in app shell (dashboard / player / settings) =====
   The site header sits above this grid, so the rail hangs from underneath it
   rather than from the top of the viewport. --hh is that header's height, and
   the rail and the grid both measure themselves against it. */
:root{--hh:74px}
.app{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - var(--hh))}
.app .btn{display:inline-flex;align-items:center;gap:7px;font-size:14px;padding:10px 18px;border-radius:6px}
.app svg{display:block}

/* A light rail, so the header and the navigation read as one surface the way
   they do on the public pages. The dark rail underneath a white header made
   two separate slabs of a thing that should feel continuous. */
.side{background:var(--paper);color:var(--tx2);position:sticky;top:var(--hh);height:calc(100vh - var(--hh));display:flex;flex-direction:column;padding:16px 12px;border-right:1px solid var(--bd)}
.suser{margin-top:auto;display:flex;align-items:center;gap:11px;padding:14px 10px 6px;border-top:1px solid var(--bd2)}
.suser:hover .sun{color:var(--ox)}
.savatar{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',serif;font-size:15px;flex-shrink:0}
.sun{font-size:14px;font-weight:600;color:var(--ink);line-height:1.15}
.sue{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.snavh{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);padding:14px 10px 7px}
.snav form{margin:0}
.snav a,.snav button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:7px;font-size:14.5px;font-weight:500;color:var(--tx2);margin-bottom:2px;position:relative;width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.snav a svg,.snav button svg{width:18px;height:18px;opacity:.7;flex-shrink:0}
.snav a:hover,.snav button:hover{background:#f3f5f8;color:var(--ink)}
.snav a:hover svg,.snav button:hover svg{opacity:1}
.snav a.on{background:var(--ox-t);color:var(--ox)}
.snav a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--ox)}
.snav a.on svg{opacity:1;color:var(--ox)}
.main{min-width:0}
/* A wash of the brand oxblood over white rather than the flat cool grey, so
   the shell warms in the same direction the public pages do. Kept faint and
   short: the marketing hero can carry a solid band because a headline and a
   card sit on it, whereas here it would be several hundred pixels of colour
   behind not very much.
   Only this surface changes: --paper2 is still the player, the exam page and
   table headers, and those are better off neutral. */
.app .main{background:var(--paper) linear-gradient(180deg,rgba(142,20,20,.045),rgba(142,20,20,0)) no-repeat top/100% 300px}
/* The page title, in the flow rather than in a band of its own: it used to be
   a sticky white bar with its own border on top of a grey page, which made a
   heading read as a second header under the real one.
   It still needs to sit apart from what follows, so it gets a hairline and
   nothing else — no fill, no shadow. The rule is ink at 8%, which stays quiet
   on the warm wash at the top of the page and on plain white further down. */
.app .top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:20px 36px 13px;max-width:1400px;border-bottom:1px solid rgba(17,38,63,.08)}
.greet{font-family:'Source Serif 4',serif;font-size:27px;font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0}
.gsub{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--tx3);margin-top:5px;letter-spacing:.02em}
.gtight{display:none}
.tright{display:flex;align-items:center;gap:14px}
.content{padding:20px 36px 56px;max-width:1400px}
.flash{background:#edf4ec;border:1px solid #cfe3cb;color:#2f5b32;font-size:14px;font-weight:500;padding:13px 18px;border-radius:9px;margin-bottom:24px}
.flash.flashbad{background:#fbeded;border-color:#efc9c9;color:#8e1414}
.sech{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px}
.sech h2{font-family:'Source Serif 4',serif;font-size:20px;font-weight:600;margin:0}
.sech a{font-size:13.5px;font-weight:600;color:var(--ox)}
.sech a:hover{color:var(--ox2)}
.app .mt{margin-top:38px}
/* Every section heading is spaced off whatever came before it, rather than
   waiting for someone to remember the mt class: four of the ten in here had
   been missed, which is why Continue learning sat flush against the block
   above it. Nothing precedes the first one, so it starts tight to the rule. */
.app .content > .sech{margin-top:38px}
.app .content > .sech:first-child,
.app .content > .mt:first-child{margin-top:0}
.empty{background:#fdf7f5;border:1px dashed var(--warmb);border-radius:12px;padding:42px;text-align:center}
/* In the shell the ground is itself warm at the top, where this tint vanishes
   into it, and white further down, where it does not. Two of these on one page
   looked like two different components. White reads on both. */
.app .empty{background:var(--card)}
.empty .et{font-family:'Source Serif 4',serif;font-size:20px;font-weight:600;margin-bottom:8px}
.empty p{color:var(--tx3);font-size:14.5px;margin:0 0 20px}
.resume{display:grid;grid-template-columns:230px 1fr;background:var(--ink);border-radius:13px;overflow:hidden;color:#fff}
.rthumb{background:var(--ink2);position:relative;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);background-size:16px 16px}
.rplay{width:50px;height:50px;border-radius:50%;border:2px solid var(--onink);color:var(--onink);display:flex;align-items:center;justify-content:center;padding-left:4px}
.resume .rbody{padding:26px 30px;display:flex;flex-direction:column;justify-content:center}
.rkick{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--onink);margin-bottom:9px}
.rtitle{font-family:'Source Serif 4',serif;font-size:23px;font-weight:600;line-height:1.2}
.rles{font-size:14px;color:#bcc4d4;margin:7px 0 18px}
.rbar{height:7px;border-radius:5px;background:rgba(255,255,255,.13);overflow:hidden;margin-bottom:8px;max-width:480px}
.rbar i{display:block;height:100%;background:var(--onink);border-radius:5px}
.resume .rmeta{display:flex;align-items:center;justify-content:space-between;max-width:480px;margin-bottom:18px}
.rpct{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#bcc4d4}
.rbtn{align-self:flex-start}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:18px 20px}
.stat .sl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.stat .sn{font-family:'Source Serif 4',serif;font-size:32px;font-weight:700;line-height:1}
.stat .sx{font-size:12.5px;color:var(--tx3);margin-top:5px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{background:var(--card);border:1px solid var(--bd);border-radius:11px;overflow:hidden;transition:.15s;display:block}
.pcard:hover{box-shadow:0 18px 40px -28px rgba(17,38,63,.4);transform:translateY(-3px)}
.pchead{height:84px;padding:14px 16px;position:relative;display:flex;align-items:flex-start;background-image:linear-gradient(160deg,rgba(255,255,255,.09),transparent 55%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0);background-size:auto,16px 16px}
.pcode{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.78)}
.pcbody{padding:16px 18px 18px}
.pct{font-family:'Source Serif 4',serif;font-size:16.5px;font-weight:600;line-height:1.25;margin-bottom:12px;min-height:2.4em}
.pbar{height:6px;border-radius:4px;background:#e8eaee;overflow:hidden;margin-bottom:8px}
.pbar i{display:block;height:100%;background:var(--ox);border-radius:4px}
.pcfoot{display:flex;align-items:center;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut)}
.pcfoot b{color:var(--ox);font-weight:500}
.sess{background:var(--card);border:1px solid var(--bd);border-radius:11px;overflow:hidden}
.srow:first-child{border-top:0}
.sdate{text-align:center;flex-shrink:0;width:50px}
.sd{font-family:'Source Serif 4',serif;font-size:22px;font-weight:700;line-height:1}
.sm{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.sinfo{flex:1;min-width:0}
.stt{font-weight:600;font-size:15px}
.stm{font-size:13px;color:var(--tx3);margin-top:2px}
.stag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ox);background:#f9ecec;border:1px solid var(--bd);padding:5px 11px;border-radius:20px;flex-shrink:0}
@media(max-width:1000px){.stats{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}}
/* The rail folds away at exactly the width the header's menu collapses (1100),
   so there is one breakpoint and one menu rather than a band where half the
   navigation has gone into a button and half has not. */
@media(max-width:1100px){.app{grid-template-columns:1fr}.side{display:none}}
@media(max-width:640px){.resume{grid-template-columns:1fr}.rthumb{height:120px}.grid3{grid-template-columns:1fr}.app .top{padding:16px 20px 12px}.greet{font-size:23px}.content{padding:16px 20px 46px}
  /* Side by side, a button left the subtitle a column three or four words
     wide, and a monospaced sentence broken that narrow is unreadable. The
     heading takes the full width and the button goes underneath it. */
  .app .top{flex-direction:column;align-items:stretch;gap:14px}
  .app .tright{width:100%}
  .app .tright .btn{flex:1;justify-content:center}
  /* The byline is one line. Monospaced text wrapping mid-phrase reads as a
     paragraph that ran out of room rather than as a subtitle, so it drops a
     point in size and is held to a single line. The ellipsis is a backstop
     only: every byline is written short enough not to reach it. */
  .app .top .gsub{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
/* At 320, the narrowest phone anyone still carries, the full weekday date
   pushed the line 6px past the edge and tripped the ellipsis. */
@media(max-width:400px){
  .gwide{display:none}
  .gtight{display:inline}
}

/* ===== course player (full-width, no sidebar) ===== */
.player{height:100vh;overflow:hidden;display:flex;flex-direction:column;background:var(--paper2)}
.player .btn{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;padding:9px 16px;border-radius:6px}
.player .btn-out{background:var(--card);color:var(--ink);border-color:#c9ced5}
.player svg{display:block}
.pbrand{display:flex;align-items:center;gap:9px}
/* The player bar is white, so the logo needs no plaque here. */
.plogo{height:30px;width:auto;display:block;flex-shrink:0}
.pdiv{width:1px;height:30px;background:var(--bd);margin:0 4px}
.player .main{min-width:0;display:flex;flex-direction:column;flex:1;min-height:0}
.ptop{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;border-bottom:1px solid var(--bdh);background:var(--paper)}
.pback{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.pcrumb{min-width:0;overflow:hidden}
.pbk{width:36px;height:36px;border:1px solid var(--bd);border-radius:8px;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--tx2);flex-shrink:0}
.pbk:hover{border-color:var(--ink);color:var(--ink)}
.pcrumb .pk{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ox);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcrumb .ph{font-family:'Source Serif 4',serif;font-size:16px;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42ch}
.pnav{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pgrid{display:grid;grid-template-columns:1fr 350px;flex:1;min-height:0}
.pmain{min-width:0;overflow:auto}
.video{aspect-ratio:16/9;background:#0a1523;position:relative;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 0);background-size:20px 20px}
.vplay{width:64px;height:64px;border-radius:50%;border:2px solid var(--onink);color:var(--onink);display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:5px}
.vbar{position:absolute;left:0;right:0;bottom:0;padding:14px 20px;display:flex;align-items:center;gap:14px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.vtrack{flex:1;height:5px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.vtrack i{display:block;height:100%;width:0;background:var(--onink)}
.vtime{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#dfe4ee}
.lwrap{padding:30px 40px 64px;max-width:800px;margin:0 auto}
.lk{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ox);margin-bottom:8px}
.lh{font-family:'Source Serif 4',serif;font-size:28px;font-weight:600;line-height:1.18;letter-spacing:-.01em;margin:0}
.lact{display:flex;align-items:center;gap:11px;margin:18px 0 22px;padding-bottom:22px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.lact .sp{flex:1;background:none;border:0;padding:0;box-shadow:none}
.player .tabs{display:flex;gap:26px;border-bottom:1px solid var(--bd);margin-bottom:22px}
.player .tab{font-size:14px;font-weight:600;color:var(--tx3);padding:0 0 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.player .tab:hover{color:var(--ink)}
.player .tab.on{color:var(--ink);border-color:var(--ox)}
/* .pane is ONLY the tab-visibility mechanism. The typography below is .prose,
   shared by the player's tab panels and the blog article body — both render
   HTML imported from the old WordPress site and want the same treatment.
   They were one class until the blog turned out to be relying on it: article
   bodies carried .pane, inherited display:none, and stayed visible only
   because .artbodycopy{display:block} happened to sit later in the file with
   equal specificity. Any reordering would have hidden every post. */
.pane{display:none}.pane.on{display:block}
.prose p{font-size:15.5px;line-height:1.78;color:var(--tx2);margin:0 0 15px;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.prose h1,.prose h2,.prose h3,.prose h4{font-family:'Source Serif 4',serif;font-weight:600;color:var(--ink);line-height:1.25;margin:26px 0 10px}
.prose h1{font-size:24px}.prose h2{font-size:21px}.prose h3{font-size:18px}.prose h4{font-size:16px}
.prose ul,.prose ol{margin:0 0 15px;padding-left:22px;color:var(--tx2);font-size:15.5px;line-height:1.7}
.prose li{margin-bottom:6px}
.prose a{color:var(--ox);text-decoration:underline}
.prose strong,.prose b{color:var(--ink)}
.prose img{max-width:100%;height:auto;border-radius:8px;margin:12px 0}
.prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.prose td,.prose th{border:1px solid var(--bd);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--paper2)}
.prose blockquote{border-left:3px solid var(--ox);margin:14px 0;padding:4px 0 4px 16px;color:var(--tx3);font-style:italic}
.res{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--bd);border-radius:9px;padding:14px 16px;margin-bottom:11px}
.ricon{width:40px;height:40px;border-radius:8px;background:#f9ecec;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--ox);flex-shrink:0}
.res .rname{font-weight:600;font-size:14.5px}
.player .rmeta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut);margin-top:2px}
.rdl{margin-left:auto;color:var(--ox)}
.plist{border-left:1px solid var(--bd);background:var(--card2);overflow:auto;display:flex;flex-direction:column}
.plh{padding:18px 20px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--card2);z-index:2}
.plt{font-family:'Source Serif 4',serif;font-size:16px;font-weight:600}
.plbar{height:6px;border-radius:4px;background:#e8eaee;overflow:hidden;margin:12px 0 7px}
.plbar i{display:block;height:100%;background:var(--ox);border-radius:4px}
.plp{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut);display:flex;justify-content:space-between}
.pmod{padding:14px 20px 6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.player .les{display:flex;align-items:center;gap:12px;padding:11px 20px;border-left:3px solid transparent}
.player a.les:hover{background:#f5f6f8}
.player .les.on{background:#f9ecec;border-left-color:var(--ox)}
.lez{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.lez.done{background:var(--ox);color:#fff}
.lez.cur{border:2px solid var(--ox);color:var(--ox)}
.lez.todo{border:1.5px solid #cbd0d6}
.player .les .lt{font-size:14px;font-weight:500;line-height:1.3;flex:1}
.player .les.on .lt{font-weight:600}
.player .les .ld{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--mut2);flex-shrink:0;min-width:24px;text-align:right}
.player .les .lty{color:#a8adb5;flex-shrink:0;display:flex;align-items:center}
.player .les.on .lty{color:var(--ox)}
.player .les.done .lt{color:var(--tx2)}
/* Nothing in the course player prints. Ctrl+P cannot be intercepted reliably
   in JavaScript, and the print preview is generated by the browser itself, so
   the honest place to stop it is the print stylesheet: whatever route is used
   to reach it, the page has no printable content. Scoped to .player so the
   certificate, which is meant to be printed, is untouched. */
@media print {
  .player { display: none !important; }
  body:has(.player)::after {
    content: 'Course material cannot be printed. Sign in and read it in the course player.';
    display: block;
    padding: 40px;
    font: 15px/1.6 'Public Sans', system-ui, sans-serif;
    color: #11263f;
  }
}

/* Our own PDF reader. Replaces .pdfwrap, which handed the file to the
   browser's built-in viewer and its download, print and share buttons. */
/* The lesson body carries the reader's address tiled behind it, set inline
   because the value differs per reader. Repeats so it covers a lesson of any
   length, and sits behind the text rather than over it, so nothing is harder
   to read. */
.player .pane.prose[style*="background-image"]{background-repeat:repeat;background-position:0 0}
.player .licnote{margin-top:34px;padding-top:14px;border-top:1px solid var(--bd);font-size:11.5px;color:var(--mut)}

/* Lesson prose is not selectable either. Unlike the PDF, which is a canvas
   with no text in it at all, a text lesson genuinely is in the page HTML, so
   this stops the casual drag-and-copy and nothing more. What a student types
   themselves stays selectable: their own notes and their own question are
   theirs, and a textarea you cannot select inside is broken. */
.player .pmain{-webkit-user-select:none;user-select:none}
.player .pmain textarea,.player .pmain input,.player .pmain [contenteditable]{-webkit-user-select:text;user-select:text}

/* Nothing here is selectable. The pages are drawn to a canvas with no text
   layer, so there is no text to select in the first place; this stops the
   surrounding chrome being dragged over and removes the selection handles that
   appear on a long-press on a touchscreen. */
.player .pdfview{background:#3f4247;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;height:72vh;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.player .pdfbar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:#2c2f33;color:#e8eaed;flex-shrink:0}
.player .pdfb{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#e8eaed;cursor:pointer;padding:0}
.player .pdfb:hover{background:rgba(255,255,255,.12)}
.player .pdfb:focus-visible{outline:2px solid var(--onink);outline-offset:2px}
.player .pdfpage{font-size:12px;color:#c9cdd3;min-width:8.5em;text-align:center}
.player .pdfsep{width:1px;height:20px;background:rgba(255,255,255,.16);margin:0 4px}
.player .pdfstage{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px;scroll-behavior:smooth}
.player .pdfpg{flex-shrink:0}
.player .pdfstage canvas{display:block;box-shadow:0 6px 24px rgba(0,0,0,.35);background:#fff;max-width:100%}
.player .pdfstatus{color:#c9cdd3;font-size:12.5px;padding:24px}
@media(max-width:1100px){.player .pdfview{height:80vh}}

/* live session card */
.livecard{background-color:#11263f;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);background-size:20px 20px;color:#fff;padding:40px 44px;min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.livetag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--onink);display:flex;align-items:center;gap:9px;margin-bottom:10px}
.live--live .livetag{color:#ff7a7a}
.livedot{width:9px;height:9px;border-radius:50%;background:#ff5252;animation:livepulse 1.6s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(255,82,82,.6)}70%{box-shadow:0 0 0 10px rgba(255,82,82,0)}100%{box-shadow:0 0 0 0 rgba(255,82,82,0)}}
.livewhen{font-family:'Source Serif 4',serif;font-size:26px;font-weight:600;line-height:1.2}
.livesub{font-size:14.5px;color:#c3cad8;max-width:34em;margin-top:7px}
.livebtn{margin-top:20px}

/* lesson preview frame */
.pvpage{background:var(--paper2);min-height:100vh}
.pvbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 26px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:10}
.pvbar .pvt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--onink)}
.pvbar .pvc{font-size:13px;font-weight:600;color:#c3cad8}.pvbar .pvc:hover{color:#fff}
.pvbody{max-width:900px;margin:0 auto}

/* ===== exam ===== */
.exampage{min-height:100vh;background:var(--paper2)}
.exambar{display:flex;align-items:center;gap:14px;padding:14px 28px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bdh);position:sticky;top:0;z-index:10}
.exambar .pbk{width:36px;height:36px;border:1px solid var(--bd);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--tx2);flex-shrink:0}
.examkick{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ox)}
.examtitle{font-size:17px;font-weight:600}
.examwrap{max-width:760px;margin:0 auto;padding:34px 24px 80px}
.exammeta{display:flex;gap:24px;flex-wrap:wrap;font-size:13.5px;color:var(--tx3);padding-bottom:20px;border-bottom:1px solid var(--bd);margin-bottom:24px}
.exammeta b{color:var(--ink)}
.examintro{font-size:15px;line-height:1.7;color:var(--tx2);background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:16px 18px;margin-bottom:24px}
.exampass{background:#edf4ec;border:1px solid #cfe3cb;color:#2f5b32;font-size:14px;padding:12px 16px;border-radius:9px;margin-bottom:22px}
.exampass a{color:#2f5b32;font-weight:600;text-decoration:underline}
.examq{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:22px 24px;margin-bottom:18px}
.examqh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.examqn{font-size:11px;letter-spacing:.1em;color:var(--ox)}
.exampts{font-size:11px;color:var(--mut2)}
.examprompt{font-size:16px;font-weight:500;line-height:1.5;color:var(--ink)}
.examhint{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:6px}
.examopts{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.examopt{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--bd);border-radius:8px;cursor:pointer;font-size:15px;line-height:1.5;transition:.12s}
.examopt:hover{border-color:#cbd0d6;background:var(--card2)}
.examopt input{margin-top:3px;accent-color:var(--ox);width:16px;height:16px;flex-shrink:0}
.examopt:has(input:checked){border-color:var(--ox);background:#f9ecec}
.examsubmit{display:flex;align-items:center;gap:14px;margin-top:24px}
.examresult{display:flex;align-items:center;gap:24px;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:26px 28px;margin-bottom:30px;flex-wrap:wrap}
.examresult.pass{border-left:5px solid #3f9a57}
.examresult.fail{border-left:5px solid var(--ox)}
.examscore{font-size:46px;font-weight:700;line-height:1}
.examresult.pass .examscore{color:#3f9a57}.examresult.fail .examscore{color:var(--ox)}
.examverdict{flex:1;min-width:140px}
.exambadge{font-family:'Source Serif 4',serif;font-size:20px;font-weight:600}
.examsub{font-size:13.5px;color:var(--tx3);margin-top:3px}
.examact{display:flex;gap:10px;flex-wrap:wrap}
.examreviewh{font-size:20px;font-weight:600;margin:0 0 16px}
.examq.review.ok{border-left:4px solid #5aa56e}
.examq.review.no{border-left:4px solid #dda9a4}
.reviewopt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;font-size:14.5px;color:var(--tx2)}
.reviewopt.c{background:#edf4ec;color:#2f5b32}
.reviewopt.wrong{background:#fdf0ef;color:#b02a2a}
.reviewmark{width:14px;flex-shrink:0;font-weight:700}
.reviewyou{margin-left:auto;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut2)}
.examexpl{font-size:13.5px;line-height:1.6;color:var(--tx2);background:var(--card2);border:1px solid var(--bd2);border-radius:8px;padding:12px 14px;margin-top:14px}
@media(max-width:560px){.examwrap{padding:24px 16px 60px}}

/* student notes */
.notearea{width:100%;min-height:200px;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:14px 16px;font-family:'Public Sans',sans-serif;font-size:15px;line-height:1.7;color:var(--ink);resize:vertical;outline:none}
.notearea:focus{border-color:var(--ox);box-shadow:0 0 0 3px rgba(142,20,20,.13)}
.noterow{display:flex;align-items:center;gap:14px;margin-top:14px}
.notestatus{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ox)}
@media(max-width:1100px){.player{height:auto;overflow:visible}.player .main{min-height:auto}.pgrid{grid-template-columns:1fr;flex:none}.pmain{overflow:visible}.plist{border-left:0;border-top:1px solid var(--bd);overflow:visible;max-height:none}.plh{position:static}.lwrap{max-width:none}}
/* On a phone the player is laid out for a thumb, not shrunk from a desktop.
   The top bar carries only where-you-are; moving through the course happens on
   a bar fixed at the bottom, where the hand already is, and which no longer
   competes with the brand for a 380px row. */
@media(max-width:760px){
  .ptop{padding:10px 14px;gap:10px}
  .pdiv{display:none}
  /* The crumb is the only thing telling you which course you are in once the
     curriculum list has moved below the fold, so it stays, truncated. */
  .pcrumb{display:block;min-width:0}
  .pcrumb .ph{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .plogo{height:26px}

  /* Kept low: on a phone every row this bar takes is a row the document does
     not get. 44px tall targets, which is the accessible minimum, and no more. */
  .player .pnav{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:flex;gap:8px;
    padding:6px 12px calc(6px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--bd);
    box-shadow:0 -8px 24px -18px rgba(17,38,63,.5);
  }
  /* Both controls share the row evenly, so neither is a small target. */
  .player .pnav .btn,.player .pnav form{flex:1 1 0;min-width:0}
  .player .pnav form .btn{width:100%}
  .player .pnav .btn{justify-content:center;padding:9px 12px;font-size:13.5px;gap:5px}

  /* Room for that bar, so the last line of a lesson is never behind it. */
  .lwrap{padding:22px 22px 76px}
  .lh{font-size:23px}
  .player .plist{padding-bottom:64px}

  /* The document gets the room. Its own toolbar is slimmed for the same
     reason: it is chrome, and chrome should not cost a phone a third of the
     page it came to read. */
  .player .pdfview{height:76vh}
  .player .pdfbar{padding:5px 8px;gap:4px}
  .player .pdfb{width:30px;height:30px}
  .player .pdfpage{font-size:11px;min-width:0;flex:1}
  .player .pdfstage{padding:10px;gap:10px}
}
@media(max-width:460px){
  .lwrap{padding:20px 18px 76px}
  .player .tabs{gap:18px}
  .player .pdfview{height:72vh}
}

/* ===== settings (app shell) ===== */
.app .card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:26px 28px;margin-bottom:22px}
.app .ch{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.app .ch h2{font-family:'Source Serif 4',serif;font-size:19px;font-weight:600;margin:0}
.app .chd{font-size:13.5px;color:var(--tx3);margin:0 0 22px}
.app .save{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.app textarea.field{resize:vertical;min-height:88px;line-height:1.55}
.app .avrow{display:flex;align-items:center;gap:18px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--bd2)}
.app .avbig{width:68px;height:68px;border-radius:50%;background:var(--ink);color:var(--onink);display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',serif;font-size:27px;flex-shrink:0}
.app .an{font-weight:600;font-size:15px}
.app .am{font-size:13px;color:var(--tx3);margin-top:2px}
.app .toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid var(--bd2)}
.app .toggle.first{border-top:0}
.app .tt{font-weight:600;font-size:14.5px}
.app .td{font-size:13px;color:var(--tx3);margin-top:2px;max-width:46ch}
.sw{position:relative;width:44px;height:25px;flex-shrink:0;display:inline-block}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;background:#d3d7dd;border-radius:20px;transition:.18s;cursor:pointer}
.sw span::before{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked + span{background:var(--ox)}
.sw input:checked + span::before{transform:translateX(19px)}
.app .dgr{display:flex;align-items:center;justify-content:space-between;gap:20px}
.app .btn-danger{background:var(--card);color:var(--ox);border-color:#e6cbc9}.app .btn-danger:hover{background:#fdf5f4}

/* ===== certificate ===== */
.certpage{background:#eceef1;min-height:100vh}
.certpage .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 28px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bdh);position:sticky;top:0;z-index:10}
.certpage .bback{display:flex;align-items:center;gap:11px}
.certpage .pbk{width:36px;height:36px;border:1px solid var(--bd);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--tx2)}
.certpage .pbk:hover{border-color:var(--ink);color:var(--ink)}
.certpage .btitle{font-family:'Source Serif 4',serif;font-size:16px;font-weight:600}
.certpage .bsub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mut);margin-top:2px}
.certpage .bact{display:flex;gap:10px}
.certpage .btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:10px 16px;border-radius:7px;cursor:pointer;border:1px solid transparent}
.certpage .btn svg{width:16px;height:16px}
.certpage .btn-out{background:#fff;color:var(--ink);border-color:#c9ced5}.certpage .btn-out:hover{border-color:var(--ink)}
.certpage .stage{padding:42px 24px 60px;display:flex;justify-content:center}
.cert{width:100%;max-width:940px;aspect-ratio:1.414/1;background:#ffffff;box-shadow:0 30px 70px -30px rgba(17,38,63,.5);position:relative;padding:20px}
.cert .frame{position:absolute;inset:18px;border:2px solid var(--ox);pointer-events:none}
.cert .frame::before{content:"";position:absolute;inset:6px;border:1px solid #d9b8bc}
.cert .cwm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cert .cwm span{font-family:'Source Serif 4',serif;font-size:340px;font-weight:700;color:rgba(142,20,20,.045);line-height:1}
.cert .inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:54px 70px}
.cseal{width:60px;height:60px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',serif;font-weight:700;font-size:30px;margin-bottom:14px}
.cinst{font-family:'Source Serif 4',serif;font-size:23px;font-weight:700;letter-spacing:.02em}
.cinst small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-top:6px}
.crule{width:60px;height:2px;background:var(--ox);margin:20px 0}
.ctype{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--ox)}
.clead{font-size:14.5px;color:var(--tx3);margin:24px 0 10px}
.cname{font-family:'Source Serif 4',serif;font-size:46px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.ccred{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em;color:var(--mut);margin-top:9px}
.cunder{width:340px;max-width:70%;height:1px;background:var(--bdh);margin:14px 0 0}
.cert .cbody{font-size:15px;color:var(--tx2);margin:22px 0 6px;max-width:30em;line-height:1.65}
.ccourse{font-family:'Source Serif 4',serif;font-size:24px;font-weight:600;font-style:italic;color:var(--ink);margin:2px 0}
.cmetaline{font-size:13.5px;color:var(--tx3);margin-top:4px}
.csign{display:flex;justify-content:space-between;align-items:flex-end;width:100%;margin-top:auto;gap:40px}
.sigcol{flex:1;text-align:center}
.sigmark{font-family:'Source Serif 4',serif;font-style:italic;font-size:24px;color:var(--ink);margin-bottom:8px;height:30px}
.sigline{height:1px;background:#c9ced5;margin-bottom:8px}
.signame{font-weight:600;font-size:14px}
.sigrole{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.medal{width:78px;height:78px;flex-shrink:0;border-radius:50%;border:2px solid var(--ox);background:radial-gradient(circle at 50% 38%,#fbf3f3,#f0dcde);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ox2);box-shadow:0 4px 14px -6px rgba(142,20,20,.45)}
.medal b{font-family:'Source Serif 4',serif;font-size:13px;line-height:1}
.medal small{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.12em;margin-top:3px}
.cfooter{display:flex;justify-content:space-between;width:100%;margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--mut2);letter-spacing:.04em}
.cfooter b{color:var(--tx2);font-weight:500}
@media print{.certpage .bar{display:none}.certpage{background:#fff}.certpage .stage{padding:0}.cert{box-shadow:none}}
@media(max-width:720px){.certpage .bar{padding:12px 16px;flex-wrap:wrap}.certpage .bact .btn span{display:none}.certpage .bact .btn{padding:10px}.cert .inner{padding:30px 22px}.cname{font-size:30px}.cinst{font-size:18px}.ctype{font-size:10px;letter-spacing:.2em}.ccourse{font-size:18px}.csign{flex-direction:column;gap:22px}.medal{order:-1}.cert .cwm span{font-size:180px}.cfooter{flex-direction:column;gap:4px;text-align:center;align-items:center}}
@media(max-width:860px){.cgrid{grid-template-columns:1fr;gap:30px}aside.rail{position:static}.learn{grid-template-columns:1fr}.ch1{font-size:34px}.cmeta{grid-template-columns:1fr 1fr}.wrap{padding-left:24px;padding-right:24px}.cgridcards{grid-template-columns:1fr}.lh1{font-size:30px}}
@media(max-width:600px){.h1{font-size:42px}.pills{grid-template-columns:1fr}.stats{flex-wrap:wrap;gap:24px}}

/* checkout order-summary heads share the cover sheen */
.covergrad{background-image:linear-gradient(160deg,rgba(255,255,255,.09),transparent 55%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0);background-size:auto,16px 16px}

/* ===== mobile navigation + mobile-first polish ===== */
.menub{display:none;width:42px;height:42px;border:1px solid var(--bd);border-radius:9px;background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.navauth{display:none}
.cobody{padding:26px 28px}
/* ===== blog / news ===== */
.kindbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.kindchip{font-size:13px;font-weight:600;padding:7px 15px;border-radius:20px;border:1px solid var(--bd);color:var(--tx2);background:var(--card)}
.kindchip:hover{border-color:var(--ox);color:var(--ox)}
.kindchip.on{background:var(--ox);border-color:var(--ox);color:#fff}
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.artcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:12px;overflow:hidden;transition:.16s}
.artcard:hover{border-color:var(--ox);box-shadow:0 22px 46px -30px rgba(17,38,63,.45);transform:translateY(-3px)}
/* Posters are portrait; contain shows them whole rather than cropping the
   title off, and the tinted plate fills the space around them. */
.artcover{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:#f2f5f8;
  background-image:radial-gradient(circle at 1px 1px,rgba(17,38,63,.06) 1px,transparent 0);background-size:14px 14px}
.artcover--plain{display:flex;align-items:flex-end;padding:16px 18px}
.artkind{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.artbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.artmeta{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut2);margin-bottom:8px}
.arttitle{font-size:17.5px;font-weight:600;line-height:1.3;color:var(--tx)}
.artsum{font-size:13.5px;line-height:1.6;color:var(--tx3);margin:9px 0 14px;flex:1}
.artgo{font-size:13px;font-weight:600;color:var(--ox)}
.pager{margin-top:32px}
.artbyline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--tx2);margin-top:16px}
.artwrap{max-width:760px;padding-top:40px;padding-bottom:56px}
/* The cover runs the full page width, aligned with the headline above it.
   Migrated covers are posters of every shape, so the sharp image is centred
   at its own proportions over a blurred copy of itself rather than cropped. */
/* Article headlines are long and carry the full name of the organiser, so they
   get the whole page width rather than the narrow measure the other heroes use. */
.arth1{max-width:none}
.arthero{padding-top:36px}
.artfig{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;height:480px;margin:0;background:var(--paper2)}
.artfig::before{content:"";position:absolute;inset:-50px;background-image:var(--cover);
  background-size:cover;background-position:center;filter:blur(34px) saturate(1.15) brightness(.94);opacity:.75}
.artherohero{position:relative;max-height:100%;max-width:100%;width:auto;display:block;
  border-radius:6px;box-shadow:0 14px 38px rgba(17,38,63,.24)}
.artlede{font-size:18px;line-height:1.6;color:var(--tx2);margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--bd)}
.artbodycopy{display:block}
.artext{margin-top:26px}
.artfoot{margin-top:34px;padding-top:20px;border-top:1px solid var(--bd)}
.artback{font-size:14px;font-weight:600;color:var(--ox)}

/* ===== legal pages ===== */
.legalwrap{display:grid;grid-template-columns:230px 1fr;gap:48px;align-items:start;padding-top:40px;padding-bottom:60px}
.legalnav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px}
.legalnavh{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.legalnav a{font-size:14.5px;color:var(--tx2);padding:8px 12px;border-radius:8px;border-left:3px solid transparent}
.legalnav a:hover{background:var(--paper2);color:var(--tx)}
.legalnav a.on{background:#f9e4e0;border-left-color:var(--ox);color:var(--ox);font-weight:600}
.legalnote{font-size:12.5px;line-height:1.6;color:var(--tx3);margin-top:18px;padding-top:16px;border-top:1px solid var(--bd)}
.legalnote a{color:var(--ox);font-weight:600}
.legalbody{max-width:70ch;min-width:0}
.legallede{font-size:17px;line-height:1.65;color:var(--tx2);padding-bottom:22px;margin:0 0 8px;border-bottom:1px solid var(--bd)}
.legalbody h2{font-family:'Source Serif 4',serif;font-size:20px;font-weight:600;color:var(--tx);margin:32px 0 10px;letter-spacing:-.01em}
.legalbody p{font-size:15.5px;line-height:1.75;color:var(--tx2);margin:0 0 13px}
.legalbody ul{margin:0 0 14px;padding-left:22px;color:var(--tx2);font-size:15.5px;line-height:1.75}
.legalbody li{margin-bottom:6px}
.legalbody a{color:var(--ox);font-weight:600;text-decoration:underline}
.legalbody strong{color:var(--tx)}

@media(max-width:900px){
  .artgrid{grid-template-columns:1fr 1fr;gap:16px}
  .legalwrap{grid-template-columns:1fr;gap:26px;padding-top:28px}
  /* the policy switcher becomes a scrollable row above the text */
  .legalnav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;padding-bottom:18px;border-bottom:1px solid var(--bd)}
  .legalnavh{width:100%;margin-bottom:2px}
  .legalnav a{border-left:0;border:1px solid var(--bd);border-radius:20px;padding:7px 14px;font-size:13px}
  .legalnav a.on{border-color:var(--ox)}
  .legalnote{width:100%;margin-top:6px;padding-top:12px}
}
@media(max-width:600px){
  .artgrid{grid-template-columns:1fr}
  .artwrap{padding-top:26px}
  .arthero{padding-top:22px}
  .artfig{height:300px;border-radius:12px}
  .artlede{font-size:16px}
  .artbyline{font-size:12.5px;gap:6px}
  .legalbody h2{font-size:18px;margin:26px 0 8px}
  .legalbody p,.legalbody ul{font-size:15px;line-height:1.7}
  .legallede{font-size:15.5px}
  .kindbar{gap:7px;margin-bottom:20px}
  .kindchip{font-size:12.5px;padding:6px 13px}
}

/* expert panel */
.expgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.expcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:12px;overflow:hidden;transition:.15s}
.expcard:hover{border-color:var(--ox);box-shadow:0 20px 44px -30px rgba(17,38,63,.45);transform:translateY(-3px)}
.expphoto{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;display:block;background:#f9e4e0}
.expinitials{display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:600;color:var(--ox)}
.expbody{padding:18px 20px 20px}
.expname{font-size:17.5px;font-weight:600;color:var(--tx);line-height:1.3}
.exprole{font-size:13.5px;line-height:1.5;color:var(--tx2);margin-top:5px}
.expcountry{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut2);margin-top:7px}
.expbio{font-size:13.5px;line-height:1.6;color:var(--tx3);margin:10px 0 0}
@media(max-width:900px){.expgrid{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:560px){.expgrid{grid-template-columns:1fr}}

/* split attendee / presenter fee scales */
.feeh{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ox);margin-bottom:6px}
.feelist2{margin-top:16px;padding-top:14px;border-top:1px solid var(--bd2)}
.feenote{font-size:11.5px;color:var(--mut2);margin-top:8px;line-height:1.5}

/* concluded conference: status card sits beside the title, not in an empty rail */
.eherogrid{display:grid;grid-template-columns:1fr 330px;gap:48px;align-items:start}
.eherogrid .eheromain{min-width:0}
.eherogrid .concluded{margin-top:34px}
@media(max-width:860px){
  .eherogrid{grid-template-columns:1fr;gap:22px}
  .eherogrid .concluded{margin-top:0}
}

/* catalogue filters: inline on desktop, collapsed behind a toggle on phones */
.catmore{display:contents}
.catmore .catsum{display:none}
.catsels{display:contents}
@media(max-width:700px){
  .catfilter{gap:8px}
  .catfilter .catsearch{flex:1 1 auto;min-width:0}
  .catgo{flex:0 0 auto}
  .catmore{display:block;width:100%}
  .catmore .catsum{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
    font-size:13.5px;font-weight:600;color:var(--ox);padding:2px 0}
  .catmore .catsum::-webkit-details-marker{display:none}
  .catmore .catsum::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .18s}
  .catmore[open] .catsum::after{transform:rotate(-135deg);margin-top:2px}
  .catsels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .catsels .field{margin-bottom:0;font-size:14px;padding:10px 12px}
  .catsels .field:first-child{grid-column:1 / -1}
  .catwrap{padding-top:24px}
}

/* struck original price */
.ccwas{margin-left:7px;font-size:13px;font-weight:400;color:var(--mut2);font-family:'Public Sans',sans-serif}
.mbprices{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.mbwas{font-size:12.5px;color:var(--mut2)}

/* sticky mobile action bar (course / bundle / conference) */
.mobar,.mobar-space{display:none}
@media(max-width:860px){
  /* Pinned to --mbh so the clearance below the page and the account bar's
     offset are arithmetic rather than guesses. Trimmed from 70px: it is a
     price and a button, and on a phone every pixel it takes is a pixel of the
     page you cannot see. */
  .mobar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:95;
    height:calc(var(--mbh) + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid var(--bd);padding:8px 16px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 26px -18px rgba(17,38,63,.5)}
  .mobar .mbprice{font-size:17px;font-weight:700;color:var(--tx);white-space:nowrap}
  .mobar form{flex:1;margin:0}
  /* Both share the row and both may shrink. The secondary used to refuse to
     give ground (flex:0 0 auto) while the primary could not shrink past its
     text, so on a 320px screen the second button ran off the edge. */
  .mobar .btn{flex:1 1 0;min-width:0;width:auto;padding:10px;font-size:14px;white-space:nowrap}
  .mobar .mbalt{flex:1 1 0;width:auto}
  /* This was meant to keep the footer clear of the fixed bar, but it sits
     above the footer, so the footer itself still finished underneath it — at
     the very bottom of a course page the last 63px of it were behind the bar.
     Clearance has to go below the last thing on the page, not above it. */
  .mobar-space{display:none}
  body:has(.mobar){padding-bottom:calc(var(--mbh) + 8px + env(safe-area-inset-bottom))}

  /* Signed in, the account bar already owns the bottom edge, so the enrol bar
     rides on top of it instead of the two sharing the same strip of screen,
     and the page has to clear both. Signed out there is no account bar and
     this stays where it was. */
  .hasbn .mobar{bottom:calc(var(--bnh) + env(safe-area-inset-bottom))}
  .hasbn:has(.mobar){padding-bottom:calc(var(--bnh) + var(--mbh) + 8px + env(safe-area-inset-bottom))}
}

/* bundle detail: courses included + value rail */
.bcourses{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.bcourse{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:18px 20px;transition:.15s}
.bcourse:hover{border-color:var(--ox);box-shadow:0 18px 40px -30px rgba(17,38,63,.45);transform:translateY(-2px)}
.bccode{display:flex;align-items:center;justify-content:center;height:56px;border-radius:9px;color:#fff;font-size:11px;letter-spacing:.06em;text-align:center;padding:0 6px}
.bcbody{display:flex;flex-direction:column;gap:5px;min-width:0}
.bct{font-size:17px;font-weight:600;color:var(--tx);line-height:1.3}
.bcs{font-size:13.5px;line-height:1.55;color:var(--tx3)}
.bcm{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut2)}
.bcright{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.bcprice{font-size:17px;font-weight:700;color:var(--tx)}
.bcgo{font-size:12.5px;font-weight:600;color:var(--ox)}
.bwas{font-size:13px;color:var(--mut2);text-decoration:line-through;margin-bottom:2px}
.bsave{display:inline-block;background:#f9e4e0;color:var(--ox);font-size:12px;font-weight:600;border-radius:20px;padding:3px 11px;margin-top:8px}
.bacts{display:flex;flex-direction:column;gap:9px;margin-top:18px}
@media(max-width:620px){
  .bcourse{grid-template-columns:1fr;gap:12px}
  .bccode{height:38px;width:76px}
  .bcright{flex-direction:row;align-items:center;gap:14px}
}

/* about: figures band, collaborators, contact desks */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--warmb);border:1px solid var(--warmb);border-radius:12px;overflow:hidden}
.statcell{background:#fffdfc;padding:22px 20px;text-align:center}
.statn{font-size:38px;font-weight:700;color:var(--ox);line-height:1}
.statl{font-size:13px;color:var(--tx3);margin-top:8px;line-height:1.45}
.collabstrip{margin-top:34px;padding-top:26px;border-top:1px solid var(--warmb)}
.collabnames{display:flex;flex-wrap:wrap;gap:12px}
.collabname{display:flex;flex-direction:column;gap:3px;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:13px 18px;transition:.15s}
.collabname:hover{border-color:var(--ox);transform:translateY(-2px)}
.cnname{font-size:15.5px;font-weight:600;color:var(--tx);line-height:1.3}
.cnmeta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}
.deskgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.desk{display:block;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:20px 22px;transition:.15s}
.desk:hover{border-color:var(--ox);box-shadow:0 16px 34px -26px rgba(17,38,63,.45);transform:translateY(-2px)}
.deskt{font-size:17px;font-weight:600;color:var(--tx);margin-bottom:6px}
.desk p{font-size:13.5px;line-height:1.55;color:var(--tx3);margin:0 0 12px}
.deskmail{font-size:12.5px;color:var(--ox);word-break:break-all}
@media(max-width:820px){.statband{grid-template-columns:1fr 1fr}.deskgrid{grid-template-columns:1fr}}
@media(max-width:520px){.statband{grid-template-columns:1fr}}

/* concluded conference rail + institutional collaboration card */
.concluded{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:22px 24px;text-align:center}
.conch{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.concd{font-size:21px;font-weight:600;color:var(--tx);margin-bottom:10px}
.concluded p{font-size:13.5px;line-height:1.6;color:var(--tx3);margin:0 0 16px}
/* Coming soon reuses the concluded box, but reads as an announcement rather
   than an ending: the brand rose wash instead of a flat grey, and the kicker
   in oxblood so "Coming soon" carries the eye. */
.concluded.coming{background:linear-gradient(170deg,#fdf3f0,#fff 72%);border-color:var(--warmb)}
.concluded.coming .conch{color:var(--maroon)}
.collab{background:linear-gradient(170deg,#fdf3f0,#fff 70%);border:1px solid var(--warmb);border-radius:12px;padding:22px 24px}
.collabh{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ox);margin-bottom:6px}
.collabt{font-size:19px;font-weight:600;color:var(--tx);line-height:1.25;margin-bottom:9px}
.collab p{font-size:13.5px;line-height:1.6;color:var(--tx2);margin:0 0 16px}

/* previous conferences (the record) */
.pastlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--warmb)}
.pastitem{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--warmb)}
.pastyear{font-size:12.5px;color:var(--ox);letter-spacing:.02em;white-space:nowrap}
.pasttitle{display:inline-block;font-size:17px;font-weight:600;color:var(--tx);line-height:1.3}
a.pasttitle:hover{color:var(--ox)}
.pasttheme{font-size:13.5px;color:var(--tx3);margin-top:3px}
.pastnote{font-size:13px;color:var(--mut2);margin-top:3px}
.pastmode{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);white-space:nowrap}
@media(max-width:700px){.pastitem{grid-template-columns:1fr;gap:4px}.pastmode{display:none}}

/* about: numbered steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}
.steps li{display:flex;gap:16px;align-items:flex-start}
.stepn{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:#f9e4e0;color:var(--ox);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.stept{font-size:17px;font-weight:600;margin-bottom:5px}
.steps p{font-size:14.5px;line-height:1.6;color:var(--tx3);margin:0}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:18px}}

/* free-preview (sample) player */
.samplenote{font-size:13px;color:var(--tx3)}
.player .les.leslocked{cursor:default;opacity:.55}
.player .les.leslocked:hover{background:none}

/* journal page */
.jmeta{display:flex;flex-wrap:wrap;gap:18px 44px;margin-top:26px}
.jmeta .ml{font-size:12px;color:var(--ox);margin-bottom:4px}
.jmeta .mv{font-weight:600;font-size:15px;color:var(--tx)}
.jgrid{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.jcard{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:22px 24px;box-shadow:0 18px 44px -30px rgba(17,38,63,.4)}
.jcardh{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ox);margin-bottom:10px}
.jcard p{font-size:14px;line-height:1.6;color:var(--tx2);margin:0 0 14px}
.jticks{list-style:none;padding:0;margin:0 0 18px}
.jticks li{position:relative;padding-left:24px;font-size:13.5px;color:var(--tx2);margin-bottom:8px;line-height:1.5}
.jticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--ox);font-weight:700}
.jlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.jlink{display:block;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:22px 24px;transition:.15s}
.jlink:hover{border-color:var(--ox);box-shadow:0 18px 40px -28px rgba(17,38,63,.45);transform:translateY(-3px)}
.jlt{font-size:18px;font-weight:600;margin-bottom:8px}
.jlink p{font-size:14px;line-height:1.55;color:var(--tx3);margin:0 0 14px}
.jlgo{font-size:13.5px;font-weight:600;color:var(--ox)}
@media(max-width:900px){.jgrid{grid-template-columns:1fr;gap:30px}.jlinks{grid-template-columns:1fr}}

/* conference timeline (important dates) */
.tline{list-style:none;margin:4px 0 0;padding:0;position:relative}
.tline::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--bd)}
.tl{position:relative;display:flex;gap:18px;align-items:flex-start;padding:0 0 20px 30px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--card);border:2px solid var(--bdh);z-index:1}
.tl--done::before{background:var(--bdh);border-color:var(--bdh)}
.tl--next::before{background:var(--ox);border-color:var(--ox);box-shadow:0 0 0 4px #f9e4e0}
.tldate{font-size:12.5px;color:var(--tx2);width:96px;flex-shrink:0;padding-top:3px;letter-spacing:.02em}
.tl--next .tldate{color:var(--ox);font-weight:500}
.tlbody{min-width:0}
.tllabel{font-size:15.5px;font-weight:600;color:var(--tx);line-height:1.35}
.tlnext{display:inline-block;margin-left:9px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ox);background:#f9e4e0;border-radius:3px;padding:2px 6px;vertical-align:2px}
.tlnote{font-size:13.5px;color:var(--tx3);margin-top:2px}
.tl--done .tldate,.tl--done .tllabel,.tl--done .tlnote{color:var(--mut2)}
.tl--done .tllabel{text-decoration:line-through;text-decoration-thickness:1px}
@media(max-width:600px){.tl{flex-direction:column;gap:2px;padding-left:26px}.tldate{width:auto}}

/* abstract-ID confirmation panel (presenter registration) */
.abscheck{border-radius:10px;padding:12px 14px;margin:-6px 0 16px;font-size:13.5px;line-height:1.5}
.abscheck--wait{background:var(--paper2);color:var(--tx3)}
.abscheck--good{background:#eef6f1;border:1px solid #cfe3d6;color:#215c40}
.abscheck--bad{background:#fdf0ef;border:1px solid #f0cfcd;color:#b02a2a}
.absk{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.abst{font-size:16px;font-weight:600;color:var(--tx);line-height:1.3}
.absa{font-size:13px;color:var(--tx2);margin-top:3px}
.absp{font-size:13px;opacity:.8;margin-top:4px}

/* conference partners */
.ptgroups{display:flex;flex-wrap:wrap;align-items:flex-start;gap:26px 40px}
.ptgroup{max-width:100%}
.pttype{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ox);margin-bottom:12px}
.ptrow{display:flex;flex-wrap:wrap;gap:14px}
.ptcard{display:flex;align-items:center;justify-content:center;min-width:150px;height:82px;padding:14px 22px;background:var(--card);border:1px solid var(--bd);border-radius:11px;transition:.15s}
a.ptcard:hover{border-color:var(--ox);box-shadow:0 12px 26px -18px rgba(17,38,63,.45);transform:translateY(-2px)}
.ptcard img{max-height:52px;max-width:180px;width:auto;height:auto;object-fit:contain;display:block}
.ptname{font-size:17px;font-weight:600;color:var(--tx);text-align:center;line-height:1.25}
@media(max-width:600px){.ptgroups{gap:22px}.ptgroup{width:100%}.ptrow{gap:10px}.ptcard{min-width:0;flex:1 1 calc(50% - 5px);height:72px;padding:10px 14px}.ptcard img{max-height:44px;max-width:100%}}

/* abstract modal: wider card, one block per author */
.cmodal-wide{max-width:760px}
.authgrp{border:1px solid var(--bd);border-radius:11px;padding:16px 18px 4px;margin-bottom:16px;background:var(--card2)}
.authgrp-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ox);margin-bottom:14px}
.authgrp-h span{text-transform:none;letter-spacing:0;color:var(--mut2);font-family:'Public Sans',sans-serif;font-size:12px}
.formnote{font-size:12.5px;color:var(--tx3);margin:-4px 0 14px;line-height:1.5}
@media(max-width:600px){.cmodal-wide{max-width:none}.authgrp{padding:14px 14px 2px}}

.fbrand{text-align:right}
/* .appmenub and .sscrim lived here: a floating button that opened the rail as
   an overlay. It was a second menu, in a second corner, holding the other half
   of the navigation. The rail's links go into the header's menu instead. */

/* ---- the account avatar in the header ----
   Hidden while the Dashboard and Log out buttons are on show; it replaces them
   the moment they fold away, so signing out is never behind a menu. */
.uav{display:none;position:relative}
.uavb{width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;letter-spacing:.01em}
.uavb:hover{background:var(--ink2)}
.uavm{display:none;position:absolute;right:0;top:calc(100% + 10px);min-width:222px;background:#fff;border:1px solid var(--bd);border-radius:11px;box-shadow:0 18px 40px -14px rgba(17,38,63,.4);padding:6px;z-index:70}
.uav.open .uavm{display:block}
.uavu{padding:10px 12px 12px;border-bottom:1px solid var(--bd2);margin-bottom:6px}
.uavn{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.uave{font-size:12px;color:var(--tx3);margin-top:3px;word-break:break-all}
.uavm form{margin:0}
.uavm a,.uavm button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:7px;font-size:14.5px;font-weight:500;color:var(--tx2);background:none;border:0;cursor:pointer;font-family:inherit}
.uavm a:hover,.uavm button:hover{background:#f3f5f8;color:var(--ink)}
.uavm button[type=submit]{color:var(--ox)}
.uavm button[type=submit]:hover{background:var(--ox-t)}

/* ---- the bottom bar ----
   The rail's five destinations once the rail has folded away. One tap from
   anywhere, at the end of the screen the thumb actually reaches. */
/* Pinned rather than left to the content, because the course, bundle and
   conference pages put their own action bar along the bottom edge too, and
   that one has to sit exactly on top of this one. Both read --bnh. */
:root{--bnh:59px;--mbh:58px}
.bnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:100;height:calc(var(--bnh) + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom)}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 2px 8px;color:var(--tx3);min-width:0}
.bnav svg{width:21px;height:21px;display:block}
.bnav span{font-size:10.5px;font-weight:500;letter-spacing:.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnav a.on{color:var(--ox)}
.bnav a.on svg{color:var(--ox)}

/* 1100, not 860. Signed in, the bar needs about 1093px to lay out inline:
   logo 136 + nav 616 + the Dashboard/Log out pair 213, plus gaps and padding.
   Collapsing at 860 left a band roughly 860-1093 wide where the buttons
   overflowed the viewport and every page scrolled sideways. */
@media(max-width:1100px){
  .menub{display:flex}
  /* the bar carries the logo and the menu button only — auth moves inside */
  .hact > .btn,.hact > form{display:none}
  header .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:6px 18px 16px;border-bottom:1px solid var(--bd);box-shadow:0 22px 34px -20px rgba(20,22,26,.3)}
  header .nav.open{display:flex}
  header .nav > a{padding:14px 2px;border-top:1px solid var(--bd2);font-size:16px}
  header .nav > a:first-child{border-top:0}
  .navauth{display:flex;gap:10px;margin-top:14px;padding-top:16px;border-top:1px solid var(--bd)}
  .navauth form{flex:1;margin:0}
  .navauth .btn{flex:1;width:100%;padding:12px 14px}
  /* The rail has folded away by now. Its links are in the bottom bar and the
     account is on the avatar, so this menu carries the site nav and nothing
     else. */
  .uav{display:block}
  .bnav{display:flex}
  /* The bar is fixed, so whatever ends the page — a card, the footer — would
     otherwise finish underneath it. Set on the body because the bar now rides
     the public pages too, which have no .app to hang it off. */
  .hasbn{padding-bottom:calc(var(--bnh) + env(safe-area-inset-bottom) + 7px)}
}

@media(max-width:600px){
  .wrap{padding-left:18px;padding-right:18px}
  .sec{padding-top:36px;padding-bottom:36px}
  .hbar{height:62px}
  /* keeps the app grid measuring against the header it actually has */
  :root{--hh:62px}
  .blogo{height:36px}
  .h1{font-size:28px;line-height:1.12;margin:12px 0 14px}
  .kick{font-size:10.5px;letter-spacing:.12em}
  .lede{font-size:15.5px;line-height:1.55;margin-bottom:20px}
  .shd{font-size:24px}
  .hero{padding-top:24px;padding-bottom:32px;gap:22px}
  .hbtns{flex-direction:column;gap:10px}
  .hbtns .btn{width:100%;padding:12px 18px;font-size:14.5px}
  .hstats{flex-direction:column;align-items:flex-start;gap:13px;margin-top:26px;padding-top:20px}
  .stic{width:38px;height:38px}
  .stic svg{width:18px;height:18px}
  .stn{font-size:24px}
  .stl{font-size:12.5px}
  .cta .wrap{padding:38px 18px}
  .cobody{padding:20px 18px}
  .certpage .stage{padding:20px 12px 34px}
  .examwrap{padding:26px 18px 56px}
  .cta h2{font-size:27px}
  .conf{padding:26px 20px;border-radius:12px}
  .conf h2{font-size:23px}
  .confbtn{width:100%;justify-content:center}
  .lhero .wrap{padding:28px 18px 34px}
  .chero .wrap{padding:16px 18px 34px}
  .ch1{font-size:27px}
  .lh1{font-size:26px}
  .cmeta{gap:14px 22px;margin-top:20px}
  .fgrid{gap:24px}
  .fbrand{text-align:left}
  .pills{gap:14px}
  .pill{padding:20px 18px}
  .cgridcards{gap:16px}
  .facimg{height:110px}
}

/* footer legal row */
.flegal{font-size:12px;color:var(--mut2);margin-top:10px}
.flegal a{color:#9ba0a8}
.flegal a:hover{color:#fff}
@media(max-width:600px){.flegal{margin-top:12px}}

/* certificate: the real logo replaces the monogram + wordmark */
.cert .clogo{height:74px;width:auto;margin-bottom:18px;display:block}
@media(max-width:720px){.cert .clogo{height:52px;margin-bottom:12px}}

/* dashboard: everything finished */
.alldone{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--card);border:1px solid var(--warmb);border-radius:13px;padding:22px 26px}
.adtick{width:46px;height:46px;border-radius:50%;flex-shrink:0;background:#eef6f1;color:#215c40;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.adbody{flex:1;min-width:220px}
.adt{font-size:18px;font-weight:600;color:var(--tx);margin-bottom:3px}
.alldone p{font-size:14px;color:var(--tx3);margin:0;line-height:1.55}
.adacts{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:600px){.alldone{padding:18px 18px;gap:14px}.adacts{width:100%}.adacts .btn{flex:1}}

/* blog cards: a small kind chip rather than a large block of flat colour */
.artkindchip{display:inline-block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  padding:3px 8px;border-radius:3px;margin-right:8px;vertical-align:1px}
.artkindchip--notice{background:#f9e4e0;color:var(--ox)}
.artkindchip--news{background:#e5edf5;color:var(--ink)}
.artkindchip--article{background:var(--paper2);color:var(--tx2)}
.artcard{border-top:3px solid var(--bd)}
.artcard:hover{border-top-color:var(--ox)}

/* auth panel: the logo is navy artwork, so it sits on a white plaque */
.alogo{display:inline-block;background:#fff;border-radius:10px;padding:12px 16px;line-height:0;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
.alogo img{height:44px;width:auto;display:block}
@media(max-width:880px){.alogo img{height:38px}}

/* blog: designed plate when a post has no image */
.artplate{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px,rgba(17,38,63,.07) 1px,transparent 0);background-size:14px 14px}
.artplate--article{background-color:#f2f5f8}
.artplate--news{background-color:#eef3f8}
.artplate--notice{background-color:#fdf1ee}
.artplate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(255,255,255,.75),transparent 62%)}
.artmark{position:relative;z-index:1;width:58%;max-width:210px;height:auto;opacity:.5}
.artplate--notice .artmark{opacity:.55}
@media(max-width:600px){.artmark{width:52%}}

/* faculty cards can now carry a real photograph */
/* Panel photographs are square or near-square, so a wide letterbox crop threw
   away half of each one. A square frame shows the whole picture. */
.facphoto{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top;display:block;padding:0}
.facmore{margin:26px 0 0;max-width:760px;color:var(--tx2);font-size:15px;line-height:1.7}
.facmore a{color:var(--ox);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* a value the holder can read but not edit */
.fieldlock{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--bd);border-radius:8px;background:var(--paper2);
  padding:11px 13px;color:var(--tx2);margin-bottom:6px}
.fieldlockv{font-weight:500;color:var(--tx)}
.fieldlock svg{color:var(--mut2);flex-shrink:0}
.fieldnote{font-size:12.5px;line-height:1.6;color:var(--tx3);margin:0 0 18px}
.fieldnote a{color:var(--ox);font-weight:600}
.absref{margin-top:8px;font-size:12px;color:var(--tx3);letter-spacing:.02em}
.absref b{color:var(--ink);letter-spacing:.06em}
.cpaper{margin-top:8px;font-size:19px;font-style:italic;color:var(--ink);line-height:1.4;max-width:30em;margin-left:auto;margin-right:auto;font-family:'Source Serif 4',serif}

/* author submission lookup */
.findwrap{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;max-width:940px}
.findform{border:1px solid var(--bd);border-radius:14px;background:var(--card);padding:28px 30px;
  box-shadow:0 1px 6px rgba(22,35,63,.06)}
.findnote{font-size:12.5px;color:var(--tx3);margin:-8px 0 18px;line-height:1.6}
.findaside{border:1px solid var(--bd2);border-radius:14px;background:var(--paper2);padding:24px 26px}
.findasideh{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:10px}
.findaside p{font-size:13.5px;line-height:1.7;color:var(--tx2);margin:0 0 12px}
.findaside p:last-child{margin-bottom:0}
.findaside a{color:var(--ox);font-weight:600}
@media(max-width:860px){
  .findwrap{grid-template-columns:1fr;gap:22px}
  .findform{padding:22px 20px}
  .findaside{padding:20px}
}

/* Stacked on a phone, the hero actions were ragged: four buttons at four
   different natural widths. One column, one width. */
@media(max-width:600px){
  .ecta{gap:10px}
  .ecta .btn{width:100%;justify-content:center}
}

/* On a phone the paired rows were squeezing every field to about 116px:
   "Designation & institution" in a box that narrow is unusable, and the
   abstract form is nine of them. One field per row; .field already carries
   the 16px rhythm, so the grid gap goes. */
@media(max-width:600px){
  .two{grid-template-columns:1fr;gap:0}
  .cmodal{padding:24px 12px}
  .cmodal-card{padding:22px 18px;border-radius:14px}
  .cmodal-h{font-size:21px}
  .authgrp{padding:14px 13px 2px}
  .authgrp-h span{display:block;margin-top:3px}
}

/* ===== conference page on a phone =====
   The hero carried a hardcoded 40px gutter, so it sat inset from every
   section below it, which follow the responsive .wrap padding of 18px.
   Nothing lined up down the left edge. */
@media(max-width:600px){
  .ehero .wrap{padding:20px 18px 26px}
  .ehero .crumb{margin-bottom:16px}
  .ebadge{margin-bottom:13px;font-size:11px;padding:5px 11px;letter-spacing:.1em}
  .eh1{font-size:29px;line-height:1.14}
  .eintro{font-size:15.5px;line-height:1.62;margin-top:12px}

  /* The four facts were a 2x2 grid of floating label/value pairs, which is a
     desktop row cut in half. On a phone they read as what they are: a short
     list of details, label left, value right, on one card. */
  .emeta{display:block;margin:20px 0 0;background:rgba(255,255,255,.72);
    border:1px solid var(--warmb);border-radius:12px;padding:2px 14px}
  .emeta > div{display:flex;align-items:baseline;justify-content:space-between;
    gap:16px;padding:11px 0;border-bottom:1px solid rgba(242,221,214,.75)}
  .emeta > div:last-child{border-bottom:0}
  .emeta .ml{font-size:11.5px;margin:0;flex:0 0 auto}
  .emeta .mv{font-size:14px;text-align:right;min-width:0}

  .egrid{padding-top:24px;padding-bottom:34px;gap:24px}
  .eherogrid{gap:18px}
  .emain h2{font-size:20px}
  .emain h2.mt{margin-top:34px}

  /* These two were text links wrapping onto two centred lines, reading as
     afterthoughts under the buttons above them. They are the same kind of
     action, so they get the same shape. The leading question goes: it is
     what forced the wrap, and the fee card already gives the context. */
  .regacts .presentlink{display:flex;align-items:center;justify-content:center;
    width:100%;padding:12px 14px;border:1px solid var(--bd);border-radius:9px;
    background:var(--card);font-size:14px;line-height:1.25;color:var(--ox)}
  .regacts .presentlink:hover{border-color:var(--ox);text-decoration:none}
  .regacts .lq{display:none}
}

/* Wherever the two columns collapse, which is also where the sticky action
   bar appears, two things stop making sense. */
@media(max-width:860px){
  /* The hero row, the fee card and the bar became three copies of the same
     buttons down one screen. The bar is always in reach and the fee card
     gives them context, so the hero keeps none of them. */
  .ehero .ecta{display:none}
  /* Stacking buried the fees and dates under the whole description, about
     two thousand pixels down, when they are the first thing anyone wants.
     Dissolving the rail lets its two cards be placed separately: the fees
     lead, the pitch to institutions stays at the end where it belongs. */
  .egrid .rail{display:contents}
  .egrid .reg{order:-1}
}

/* Below the narrowest real phone the pair still needs a little more room. */
@media(max-width:340px){
  .mobar{gap:8px;padding-left:12px;padding-right:12px}
  .mobar .btn{padding:10px 8px;font-size:13px}
}

/* access has run out: still enrolled, lessons need renewing */
.expnote{background:#fdf5f5;border:1px solid #eccdcd;border-radius:10px;padding:14px 16px;margin-bottom:14px}
.expnote .expt{font-weight:600;color:var(--ox);font-size:14.5px;margin-bottom:5px}
.expnote p{font-size:13.5px;color:var(--tx2);line-height:1.55;margin:0}

/* a module's self-check, in the player's curriculum list */
.player .les.lesquiz .lt{font-style:italic}
.player .les.lesquiz .lty{color:var(--ox)}

/* signed in as somebody else, for support. deliberately loud */
.impbar{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;background:#8e1414;color:#fff;font-size:13.5px;padding:9px 18px;text-align:center}
.impbar strong{font-weight:700}
.impbar a{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap}