:root{
  /* brand palette sampled from the logo */
  --bg:#0c1220;
  --surface:#121a2b;
  --surface-2:#172034;
  --border:#26314c;
  --border-soft:#1b2439;
  --text:#e8eefb;
  --muted:#8ea0c4;
  --muted-2:#6277b0;
  --indigo:#6366f1;
  --indigo-hi:#7d80f5;
  --teal:#2dd4bf;
  --teal-soft:rgba(45,212,191,.12);
  --indigo-soft:rgba(99,102,241,.13);
  --ok:#2dd4bf;
  --flag:#f0a58a;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:800px;margin:0 auto;padding:0 28px}

/* ---------- preview bar ---------- */

/* ---------- header ---------- */
header.site{border-bottom:1px solid var(--border-soft);position:sticky;top:0;background:rgba(12,18,32,.94);backdrop-filter:blur(12px);z-index:40}
header.site .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:40px;width:auto}
nav.main{display:flex;gap:26px;margin-left:auto;align-items:center;font-size:14px}
nav.main a{color:var(--muted);text-decoration:none;transition:.15s}
nav.main a:hover,nav.main a.active{color:var(--text)}
nav.main a.cta{color:#fff;background:var(--indigo);padding:8px 18px;border-radius:99px;font-weight:500}
nav.main a.cta:hover{background:var(--indigo-hi)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.022em;margin:0}
h1{font-size:clamp(34px,5.2vw,53px);line-height:1.08}
h2{font-size:clamp(24px,3.2vw,32px);line-height:1.2}
h3{font-size:19px;line-height:1.32;letter-spacing:-.012em}
p{margin:0 0 1.1em}
.lede{font-size:18.5px;color:var(--muted);line-height:1.6;font-weight:400}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:18px}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-size:14.5px;font-weight:500;padding:13px 28px;border-radius:99px;transition:.18s;cursor:pointer;border:1px solid transparent;font-family:var(--sans)}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-hi)}
.btn-ghost{border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}

/* ---------- hero ---------- */
.hero{padding:92px 0 82px;border-bottom:1px solid var(--border-soft);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;top:-40%;right:-10%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.16),transparent 68%);pointer-events:none}
.hero .wrap{position:relative}
.hero .heromark{height:132px;width:auto;margin-bottom:34px;opacity:.97}
.hero h1{max-width:17ch}
.hero .lede{max-width:53ch;margin-top:22px}
.hero .actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border-soft)}
.split > div{padding:64px 44px}
.split > div:first-child{border-right:1px solid var(--border-soft)}
.split h2{margin-bottom:14px}
.pricetag{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--teal);border:1px solid rgba(45,212,191,.32);border-radius:99px;padding:6px 14px;margin-bottom:22px}
.split ul{list-style:none;padding:0;margin:22px 0 30px;font-size:15px}
.split li{padding:9px 0 9px 24px;position:relative;color:var(--muted);border-bottom:1px solid var(--border-soft)}
.split li:before{content:"";position:absolute;left:2px;top:18px;width:9px;height:2px;background:var(--teal);border-radius:2px}

section.pad{padding:80px 0}
.sec-head{margin-bottom:44px;max-width:62ch}
.sec-head h2{margin-bottom:12px}

/* ---------- module cards ---------- */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px}
.modcard{background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;padding:26px 24px 22px;text-decoration:none;display:flex;flex-direction:column;transition:.18s;position:relative;overflow:hidden}
.modcard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--indigo);opacity:0;transition:.18s}
.modcard:hover{border-color:var(--border);background:var(--surface-2);transform:translateY(-2px)}
.modcard:hover:before{opacity:1}
.modcard .num{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:14px}
.modcard h3{margin-bottom:10px}
.modcard p{font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.55}
.modcard .meta{margin-top:auto;display:flex;gap:16px;font-size:12px;color:var(--muted-2);padding-top:14px;border-top:1px solid var(--border-soft)}

/* ---------- video ---------- */
.vid{margin-bottom:52px}
.frame{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:radial-gradient(120% 100% at 30% 20%,#1b2540 0%,#111a2c 58%,#0d1322 100%);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.frame:after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(141,160,196,.03) 0 1px,transparent 1px 3px);pointer-events:none}
/* framing corners, lifted from the logo */
.frame .cn{position:absolute;width:22px;height:22px;border:2px solid rgba(45,212,191,.5);z-index:2}
.frame .cn.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.frame .cn.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 3px 0 0}
.frame .cn.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-color:rgba(99,102,241,.5);border-radius:0 0 0 3px}
.frame .cn.br{bottom:14px;right:14px;border-left:0;border-top:0;border-color:rgba(99,102,241,.5);border-radius:0 0 3px 0}
.play{width:66px;height:66px;border-radius:50%;border:1px solid rgba(232,238,251,.28);display:flex;align-items:center;justify-content:center;transition:.2s;background:rgba(12,18,32,.45);z-index:3}
.frame:hover .play{border-color:var(--indigo);background:rgba(99,102,241,.2)}
.play:before{content:"";border-left:15px solid rgba(232,238,251,.9);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:5px}
.stillnote{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-size:11.5px;color:var(--muted-2);background:linear-gradient(transparent,rgba(9,13,24,.94));font-style:italic;z-index:2}
.dur{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.08em;background:rgba(9,13,24,.72);border:1px solid var(--border);border-radius:4px;padding:3px 9px;color:var(--muted);z-index:3}
.vid .tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);font-weight:700;display:block;margin-bottom:8px}
.vid h3{margin-bottom:9px;font-size:22px}
.vid p{font-size:15px;color:var(--muted);margin:0;max-width:62ch}

/* ---------- page head ---------- */
.pagehead{padding:56px 0 44px;border-bottom:1px solid var(--border-soft);margin-bottom:56px}
.crumb{font-size:12.5px;color:var(--muted-2);margin-bottom:20px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--teal)}
.pagehead h1{font-size:clamp(30px,4.4vw,44px);max-width:20ch}
.pagehead .lede{margin-top:16px;max-width:58ch;font-size:17px}

/* ---------- homework ---------- */
/* The homework link is the end of a module page and the one thing a student
   is meant to do next, so it is deliberately the brightest block on the page -
   turned up 16 August 2026 because the old faint wash read as a footnote.
   Same indigo family as the rest of the course furniture; do not switch it to
   teal, which means the casting tools everywhere else on this site. */
.hwlink{display:block;text-decoration:none;border:1px solid rgba(125,128,245,.55);background:linear-gradient(180deg,rgba(99,102,241,.24),rgba(99,102,241,.08));border-radius:8px;padding:34px 32px;margin:34px 0 20px;transition:.18s;box-shadow:0 0 0 1px rgba(99,102,241,.08)}
.hwlink:hover{border-color:var(--indigo-hi);background:linear-gradient(180deg,rgba(99,102,241,.34),rgba(99,102,241,.14));box-shadow:0 6px 24px rgba(99,102,241,.18)}
.hwlink .eyebrow{margin-bottom:10px;color:var(--indigo-hi)}
.hwlink h3{font-size:26px;margin-bottom:8px;color:var(--text)}
.hwlink p{margin:0;color:var(--muted);font-size:14.5px}
.hwlink .go{margin-top:16px;font-size:14px;color:var(--indigo-hi);font-weight:600}

.dl{display:flex;align-items:center;gap:18px;text-decoration:none;border:1px solid var(--border-soft);background:var(--surface);border-radius:8px;padding:18px 22px;margin-bottom:12px;transition:.18s}
.dl:hover{border-color:var(--teal);background:var(--surface-2)}
.dl .kind{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--teal);border:1px solid rgba(45,212,191,.3);border-radius:4px;padding:6px 10px;white-space:nowrap}
.dl .t{font-size:15px;flex:1}
.dl .ext{font-size:12px;color:var(--muted-2);letter-spacing:.08em}
.dl .flag{display:block;font-size:11.5px;color:var(--flag);font-style:italic;margin-top:3px}

.pagenav{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:28px;border-top:1px solid var(--border-soft);font-size:14px}
.pagenav a{color:var(--muted);text-decoration:none;transition:.15s}
.pagenav a:hover{color:var(--teal)}
.pagenav .sp{color:var(--muted-2)}

/* ---------- locked ---------- */
.locked-screen{padding:104px 0 118px;text-align:center}
.locked-screen .mark{height:96px;width:auto;margin:0 auto 30px;opacity:.9}
.locked-screen h1{font-size:34px;margin-bottom:16px}
.locked-screen p{max-width:48ch;margin:0 auto 12px;color:var(--muted)}
.locked-screen .actions{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.status{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;padding:14px 20px;margin-bottom:40px}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px rgba(45,212,191,.18)}
.status b{color:var(--text);font-weight:600}

footer.site{border-top:1px solid var(--border-soft);padding:52px 0;margin-top:96px;font-size:13.5px;color:var(--muted-2)}
footer.site .wrap{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--teal)}
footer.site .sp{margin-left:auto}

@media(max-width:760px){
  .split{grid-template-columns:1fr}
  .split > div{padding:48px 28px}
  .split > div:first-child{border-right:0;border-bottom:1px solid var(--border-soft)}
  nav.main{gap:16px;font-size:13px}
  .hero{padding:60px 0 56px}
  .hero .heromark{height:92px}
  .brand img{height:28px}
}

/* ---------- homework instructions ---------- */
.instr{font-size:16.5px;line-height:1.7}
.instr > p{color:var(--muted);max-width:66ch}
.instr .lead{color:var(--text);font-size:17.5px;max-width:66ch}
.optlist{list-style:none;counter-reset:opt;padding:0;margin:26px 0 30px}
.optlist li{counter-increment:opt;position:relative;padding:16px 20px 16px 62px;margin-bottom:10px;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;color:var(--muted);font-size:15.5px;line-height:1.6}
.optlist li:before{content:counter(opt);position:absolute;left:20px;top:16px;width:26px;height:26px;border-radius:50%;
  background:var(--indigo-soft);border:1px solid rgba(99,102,241,.4);color:var(--indigo-hi);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.keyline{display:flex;align-items:center;gap:16px;margin:34px 0;padding:22px 26px;border-radius:8px;
  background:linear-gradient(90deg,rgba(45,212,191,.12),rgba(99,102,241,.1));border:1px solid rgba(45,212,191,.28)}
.keyline .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--teal);white-space:nowrap}
.keyline .val{font-size:20px;font-weight:700;letter-spacing:-.01em}
.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.tool{display:flex;flex-direction:column;text-decoration:none;padding:26px 24px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);transition:.18s;position:relative;overflow:hidden}
.tool:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--indigo));opacity:.55;transition:.18s}
.tool:hover{border-color:var(--indigo);background:var(--surface-2);transform:translateY(-2px)}
.tool:hover:before{opacity:1}
.tool .kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:12px}
.tool h3{font-size:19px;margin-bottom:8px}
.tool p{font-size:14px;color:var(--muted);margin:0 0 18px;line-height:1.55}
.tool .go{margin-top:auto;font-size:13.5px;font-weight:500;color:var(--indigo-hi)}
@media(max-width:700px){.toolgrid{grid-template-columns:1fr}.keyline{flex-direction:column;align-items:flex-start;gap:8px}}
.instr .optintro{color:var(--text);font-weight:500;margin:30px 0 4px}
.instr .optlist{margin-top:14px;margin-bottom:8px}

/* --- the numbered 'how this works' block at the top of homework-4 and -5 --- */
.steps{margin:0 0 34px}
.steps .stepnote{display:block;margin-top:9px;padding-left:14px;border-left:2px solid rgba(45,212,191,.5);
  font-size:14px;color:var(--teal);line-height:1.5}

/* --- static (non-clickable) module cards, disabled buttons, notice banner --- */
.modcard.is-static{cursor:default}
.modcard.is-static:hover{border-color:var(--border-soft);background:var(--surface);transform:none}
.modcard.is-static:hover:before{opacity:0}
.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.notice{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:6px;padding:12px 16px;margin-bottom:26px;font-size:13.5px}
.notice b{color:var(--teal);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:700}
.notice span{color:var(--muted)}
#modules{scroll-margin-top:90px}

/* header sign-in: utility link, deliberately quieter than a primary CTA */
nav.main a.signin{color:var(--text)}
nav.main a.signin:hover{color:var(--teal)}

/* cards with no meta strip shouldn't sit bottom-heavy */
.modcard.is-static > p:last-child{margin-bottom:0}

/* ================= MEMBER AREA ==================================
   Signed-in pages sit on a slightly lifted surface and carry a
   member bar. Deliberately still dark - these pages are video-first
   and a light surface glares around the player.
   ================================================================ */
body.member{
  --bg:#0f1626;
  --surface:#16203a;
  --surface-2:#1c2745;
  --border-soft:#212d4a;
  --border:#2c3a5e;
}
body.member header.site{background:rgba(15,22,38,.94)}

.brandsub{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--muted);padding:5px 10px;margin-left:-14px;border-left:1px solid var(--border);
  padding-left:14px;white-space:nowrap;
}

.memberbar{
  background:linear-gradient(90deg,rgba(45,212,191,.1),rgba(99,102,241,.07));
  border-bottom:1px solid rgba(45,212,191,.24);
  font-size:12.5px;position:relative;
}
.memberbar:before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--indigo));
}
.memberbar .wrap{display:flex;align-items:center;gap:11px;padding-top:11px;padding-bottom:11px}
.mb-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;
  box-shadow:0 0 0 3px rgba(45,212,191,.2)}
.mb-area{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;color:var(--teal)}
.mb-sep{color:var(--muted-2)}
.mb-ctx{color:var(--muted)}
.mb-acct{margin-left:auto;color:var(--muted);text-decoration:none;transition:.15s}
.mb-acct:hover{color:var(--teal)}

@media(max-width:560px){
  .brandsub{display:none}
  .memberbar .wrap{gap:8px;font-size:12px}
  .mb-sep,.mb-ctx{display:none}
}

/* ================= SPLIT HERO (course.php) ======================
   Copy + buttons left, intro video right. Stacks on mobile so the
   Enrol button is never pushed below the fold.
   ================================================================ */
.herosplit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.herosplit .hs-copy h1{max-width:none}
.herosplit .hs-copy .lede{max-width:42ch}
.herosplit .actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hs-cap{margin:14px 0 0;font-size:13px;color:var(--muted-2)}

/* placeholder frame - same language as the module video blocks */
.introframe{
  position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:radial-gradient(120% 100% at 30% 20%,#1b2540 0%,#111a2c 58%,#0d1322 100%);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
}
.introframe:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(141,160,196,.03) 0 1px,transparent 1px 3px);
}
.introframe .cn{position:absolute;width:22px;height:22px;border:2px solid rgba(45,212,191,.5);z-index:2}
.introframe .cn.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.introframe .cn.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 3px 0 0}
.introframe .cn.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-color:rgba(99,102,241,.5);border-radius:0 0 0 3px}
.introframe .cn.br{bottom:14px;right:14px;border-left:0;border-top:0;border-color:rgba(99,102,241,.5);border-radius:0 0 3px 0}
.introframe .stillnote{
  position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-size:11.5px;
  color:var(--muted-2);background:linear-gradient(transparent,rgba(9,13,24,.94));
  font-style:italic;z-index:2;
}

/* real Vimeo embed drops straight in here */
.vimeo{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:#0d1322}
.vimeo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* closing call to action under the modules */
.closer{
  margin-top:56px;padding:44px 40px;border-radius:8px;text-align:center;
  background:linear-gradient(180deg,rgba(99,102,241,.1),rgba(99,102,241,.02));
  border:1px solid rgba(99,102,241,.28);
}
.closer h2{margin-bottom:10px}
.closer p{margin:0 auto 24px;max-width:46ch}

@media(max-width:860px){
  .herosplit .wrap{grid-template-columns:1fr;gap:34px}
  .herosplit .hs-copy .lede{max-width:none}
  .closer{padding:36px 26px}
}

/* ================= ABOUT PAGE =================================== */
.portraitframe{
  position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;
  background:radial-gradient(120% 100% at 30% 20%,#1b2540 0%,#111a2c 58%,#0d1322 100%);
  border:1px solid var(--border);
}
.portraitframe:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(141,160,196,.03) 0 1px,transparent 1px 3px);
}
.portraitframe .cn{position:absolute;width:22px;height:22px;border:2px solid rgba(45,212,191,.5);z-index:2}
.portraitframe .cn.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.portraitframe .cn.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 3px 0 0}
.portraitframe .cn.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-color:rgba(99,102,241,.5);border-radius:0 0 0 3px}
.portraitframe .cn.br{bottom:14px;right:14px;border-left:0;border-top:0;border-color:rgba(99,102,241,.5);border-radius:0 0 3px 0}
.portraitframe .stillnote{
  position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-size:11.5px;
  color:var(--muted-2);background:linear-gradient(transparent,rgba(9,13,24,.94));
  font-style:italic;z-index:2;
}
img.portrait{width:100%;height:auto;border-radius:8px;border:1px solid var(--border)}

.wrap-narrow .abt-h{
  font-size:22px;margin:52px 0 16px;padding-top:26px;
  border-top:1px solid var(--border-soft);
}
.wrap-narrow .abt-h:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.wrap-narrow p{color:var(--muted);font-size:16.5px;line-height:1.72;max-width:66ch}

.pullquote{
  margin:34px 0;padding:24px 28px;border-radius:8px;font-size:19px;line-height:1.5;
  color:var(--text);
  background:linear-gradient(90deg,rgba(45,212,191,.1),rgba(99,102,241,.07));
  border-left:3px solid var(--teal);
}

@media(max-width:860px){
  .portraitframe{aspect-ratio:16/9}
}

/* ================= MODULE CARD THUMBNAILS =======================
   Cards now carry a still from the module. Padding moves off the
   card and onto .mc-body so the image sits flush to the edges.
   ================================================================ */
.modcard{padding:0}
.modcard .thumb{position:relative;width:100%;height:0;padding-top:56.25%;overflow:hidden;background:var(--surface-2);flex:none}
.modcard .thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;transition:transform .45s ease}
.modcard:hover .thumb img{transform:scale(1.035)}
/* photo settles into the card rather than stopping at a hard edge */
.modcard .thumb:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;
  background:linear-gradient(transparent,var(--surface));
}
.modcard .mc-body{display:flex;flex-direction:column;flex:1;padding:20px 24px 20px}
.modcard:hover .thumb:after{background:linear-gradient(transparent,var(--surface-2))}
.modcard.is-static .mc-body > p:last-child{margin-bottom:0}

/* ================= CLICK-TO-PLAY VIDEO FACADE ===================
   The still is a real <img>; the Vimeo iframe is only injected on
   click. Keeps five videos on a module page from loading five players.
   ================================================================ */
.frame.vfacade{cursor:pointer;padding:0}
.frame.vfacade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.frame.vfacade .play{position:relative;z-index:3;background:rgba(12,18,32,.45);backdrop-filter:blur(3px);border:1px solid rgba(232,238,251,.34);cursor:pointer;padding:0}
.frame.vfacade:hover .play{border-color:var(--indigo);background:rgba(99,102,241,.34)}
.frame.vfacade:focus-within .play{border-color:var(--teal)}
.frame.vfacade.is-pending{cursor:default}
.frame.vfacade .vsoon{
  position:absolute;z-index:3;bottom:14px;left:14px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--muted);
  background:rgba(9,13,24,.72);border:1px solid var(--border);border-radius:99px;padding:6px 12px;
}
.frame.vfacade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
/* once playing, drop the decorative corners so nothing sits over the video */
.frame.vfacade.is-playing .cn,
.frame.vfacade.is-playing .stillnote{display:none}

/* ================= PRICING ====================================== */
.pricegrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.pricecard{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;
  padding:34px 32px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
/* the course card is the one we want chosen */
.pricecard.is-lead{border-color:rgba(99,102,241,.42);background:linear-gradient(180deg,rgba(99,102,241,.08),transparent 55%),var(--surface)}
.pricecard.is-lead:before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--indigo));
}
.pc-kicker{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:12px}
.pricecard h2{font-size:27px;margin-bottom:18px}
.pc-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pc-price .amt{font-size:52px;font-weight:700;letter-spacing:-.03em;line-height:1}
.pc-price .amt-free{color:var(--teal)}
.pc-price .per{font-size:14px;color:var(--muted)}
.pc-price .was{font-size:14px;color:var(--muted-2);text-decoration:line-through}
.gst{display:block;font-size:11.5px;color:var(--muted-2);margin-top:8px}
.pc-note{font-size:14px;color:var(--muted);margin:14px 0 0;line-height:1.55}

/* --- the introductory offer. Rendered only while intro_offer() is live,
       so this whole block disappears by itself when the offer expires. --- */
.pc-offer{margin-top:16px;padding:14px 16px;border-radius:8px;
  background:linear-gradient(90deg,rgba(45,212,191,.12),rgba(99,102,241,.1));
  border:1px solid rgba(45,212,191,.28)}
.pc-offer .off{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--teal);margin-bottom:6px}
.pc-offer p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}
/* the code has to be readable and copyable - it is the whole point of the box */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.94em;
  font-weight:700;letter-spacing:.06em;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid var(--border-soft);
  border-radius:5px;padding:2px 7px;white-space:nowrap}
.intro-line{font-size:14px;color:var(--muted);margin:14px 0 0;line-height:1.6;max-width:52ch}

.pc-list{list-style:none;padding:0;margin:26px 0 28px;font-size:15px}
.pc-list li{position:relative;padding:11px 0 11px 26px;color:var(--muted);border-bottom:1px solid var(--border-soft)}
.pc-list li:last-child{border-bottom:0}
.pc-list li strong{color:var(--text);font-weight:600}
.pc-list li:before{
  content:"";position:absolute;left:2px;top:19px;width:10px;height:5px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);border-radius:1px;
}
.pc-cta{margin-top:auto;text-align:center}
.pc-fine{font-size:12.5px;color:var(--muted-2);margin:14px 0 0;text-align:center}

/* questions */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.faq-item h3{font-size:17px;margin-bottom:8px}
.faq-item p{font-size:15px;color:var(--muted);margin:0;line-height:1.65}

@media(max-width:840px){
  .pricegrid{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr;gap:24px}
  .pricecard{padding:28px 24px 26px}
  .pc-price .amt{font-size:44px}
}

/* ---------- narrow phones ----------
   320-380px devices were tight: 28px of wrap padding each side plus a
   300px minimum grid track overflowed the viewport. min() above fixes
   the track; this reclaims some side padding and stops anything else
   dragging the page sideways.
   ------------------------------------ */
@media(max-width:420px){
  .wrap,.wrap-narrow{padding:0 18px}
  .pagehead{padding:40px 0 32px;margin-bottom:38px}
  .vid{margin-bottom:38px}
  .play{width:54px;height:54px}
  .play:before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
}
/*  overflow-x:CLIP, not hidden. Both stop sideways scrolling; only hidden
    turns the document into a scroll container, and a scroll container is
    what makes position:sticky on the header do nothing at all. The header
    had never actually stuck before this was changed, 16 August 2026.
    Keep the hidden fallback line above it for very old browsers - they
    lose sticky, which is what they had anyway.                          */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}

/* signed-in strip on PUBLIC pages - quieter than the member-area bar,
   its only job is to say "you're logged in" and offer the way back in */
.memberbar.mb-public{background:rgba(45,212,191,.06);border-bottom-color:var(--border-soft)}
.memberbar.mb-public:before{opacity:.55}
.enrolled-note{margin:16px 0 0;font-size:13.5px;color:var(--teal)}

/* a single casting tool shouldn't stretch across the full two-column grid */
.toolgrid.toolgrid-one{grid-template-columns:1fr;max-width:420px}

/* ---------- self tape submission form ---------- */
.subform{display:flex;flex-direction:column;gap:22px;max-width:520px;margin:8px 0 0}
.subform .fld{display:flex;flex-direction:column;gap:7px}
.subform .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.subform input[type=text],.subform select{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:6px;padding:12px 14px;font:inherit;font-size:15px;width:100%}
.subform input[type=text]:focus,.subform select:focus{outline:none;border-color:var(--teal)}
.subform input[type=file]{color:var(--muted);font-size:14px}
.subform .hint{font-size:13px;color:var(--muted-2);line-height:1.5}
.subform textarea{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:6px;padding:12px 14px;font:inherit;font-size:15px;width:100%;
  line-height:1.6;resize:vertical;min-height:150px}
.subform textarea:focus{outline:none;border-color:var(--teal)}
/* the honeypot. Off-screen rather than display:none - some bots skip
   anything hidden, and all of them fill in what they can reach. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the error variant of the keyline pull-out */
.keyline.is-flag{background:linear-gradient(90deg,rgba(240,165,138,.14),rgba(240,165,138,.06));
  border-color:rgba(240,165,138,.36)}
.keyline.is-flag .lbl{color:var(--flag)}
.subform button{align-self:flex-start;margin-top:4px}
/* the three slots: photos, slate, takes */
.slots{display:flex;flex-direction:column;gap:14px}
.slot{background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;padding:18px 20px}
.slot-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.slot-head h3{margin:0;font-size:16px}
.slot .count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted-2);white-space:nowrap}
.slot.full .count{color:var(--teal)}
.slot-note{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.slot .picked{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.slot .picked li{display:flex;align-items:center;gap:12px;background:var(--surface-2);border-radius:6px;padding:9px 12px;font-size:13.5px}
.slot .picked .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .picked .fs{color:var(--muted-2);font-size:12px;white-space:nowrap}
.slot .picked .rm{background:none;border:0;color:var(--muted-2);font:inherit;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.slot .picked .rm:hover{color:var(--flag)}
/* a real <button>; the file input beside it is hidden and opened from JS.
   Do not go back to a <label> wrapping a hidden input - it silently fails
   to open the picker on iOS Safari. */
.addbtn{display:inline-block;margin-top:14px;background:none;font:inherit;
  border:1px solid var(--border);border-radius:99px;padding:8px 18px;font-size:13.5px;
  color:var(--text);cursor:pointer;transition:.15s}
.addbtn:hover{border-color:var(--teal);color:var(--teal)}
.slot.full .addbtn{display:none}

.subprog{max-width:520px;margin:8px 0 0}
.subprog .bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;border:1px solid var(--border-soft)}
.subprog .bar span{display:block;height:100%;width:0;background:var(--teal);transition:width .25s ease}
.subprog .pmsg{margin:12px 0 4px;font-size:15px}
.subprog .pfine{margin:0;font-size:13px;color:var(--muted-2)}
.subdone{max-width:560px;border-left:3px solid var(--teal);background:var(--surface);padding:22px 24px;border-radius:6px}
.subdone h2{margin:0 0 10px}
.suberr{max-width:560px;border-left:3px solid var(--flag);background:var(--surface);padding:16px 20px;border-radius:6px;margin-top:18px}
.suberr p{margin:0;font-size:14.5px;color:var(--flag)}

.guide-link{margin:26px 0 0;font-size:14px}
.guide-link a{color:var(--indigo-hi);text-decoration:none}
.guide-link a:hover{color:var(--teal)}
.wrap-narrow .optlist li strong{color:var(--text);font-weight:600}

/* ---------- the credits grid on casting.php ---------- */
/*  Three across on a desktop, two on a tablet, one on a phone. The
    minmax(min(320px,100%),1fr) shape is deliberate and is written up in
    CLAUDE.md: a bare 320px minimum overflows a narrow phone, because the
    track cannot shrink below it. Row count is NOT fixed - a 27th credit
    just flows on.                                                        */
.tvcgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));margin:30px 0 8px}
.tvc{margin:0}
.tvc .frame{margin:0}
.tvc figcaption{margin-top:10px;font-size:14.5px;font-weight:500;color:var(--text);letter-spacing:-.01em}
/*  a credit with no still yet: the title sits in the frame instead of a
    broken image, so it can go up before its picture arrives  */
.tvc .frame.vfacade .vsoon{font-size:15px}
@media(min-width:1000px){.tvcgrid{gap:26px}}

/*  Play button bottom-left on the credits tiles only.

    Centred, it landed square on the actor's face in most of these stills,
    which on a page whose whole job is showing casting work is the one
    thing it must not cover.

    It takes the PLACE of the bottom-left corner mark rather than sitting
    on top of it - .cn.bl is hidden here. The corners are fixed 14px/22px
    while the tile scales, so any percentage offset collides with that
    bracket at some width; giving the button the corner outright is the
    only version that holds at every size. The other three marks still
    frame the shot.

    Scoped to .tvc: the course module videos keep theirs centred.        */
.tvc .frame.vfacade .cn.bl{display:none}
.tvc .frame.vfacade .play{position:absolute;left:14px;bottom:14px;width:52px;height:52px;margin:0}
.tvc .frame.vfacade .play:before{border-left-width:12px;border-top-width:7px;border-bottom-width:7px;margin-left:4px}
/*  the whole tile is the click target, so the button is an affordance,
    not the only way in - it lights up with the tile, not just itself  */
.tvc .frame.vfacade:hover .play{border-color:var(--indigo);background:rgba(99,102,241,.42)}

/* ---------- the video lightbox (casting.php credits) ---------- */
/*  The tile is a real button - role/tabindex are on the div - so it takes
    a keyboard focus ring like anything else clickable.                  */
.tvc .frame.vfacade{cursor:pointer}
.tvc .frame.vfacade:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

#lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,9,16,.92);backdrop-filter:blur(6px)}
#lightbox.show{display:flex}
/*  16:9 driven off available HEIGHT as well as width, so the player can
    never be taller than the viewport - same trick as the record view in
    the casting tools, and the reason dvh is used rather than vh.       */
.lb-inner{width:min(1180px,100%);max-width:calc((100dvh - 150px) * 16 / 9);position:relative}
.lb-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;
  border:1px solid var(--border)}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-bar{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.lb-title{font-size:17px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.lb-close{margin-left:auto;flex:none;width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:rgba(232,238,251,.08);border:1px solid var(--border);color:var(--text);
  font-size:20px;line-height:1;transition:.15s}
.lb-close:hover{background:rgba(99,102,241,.3);border-color:var(--indigo)}
.lb-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.lb-hint{font-size:12.5px;color:var(--muted-2);margin-top:10px;text-align:right}
@media(max-width:700px){
  #lightbox{padding:14px}
  .lb-title{font-size:15px}
  .lb-hint{display:none}          /* no Esc key on a phone */
}
/*  while the lightbox is open the page behind must not scroll under it  */
body.lb-open{overflow:hidden}
/*  director / production company, under the credit title  */
.tvc figcaption{line-height:1.35}
.tvc-dir{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:var(--muted);letter-spacing:0}

/*  Acknowledgement of Country, in the shared footer on every page.
    Deliberately NOT the smallest type on the page - it sits a step above
    the footer links rather than below them, because shrinking it to fine
    print is how a statement like this reads as box-ticking.            */
.acknow{max-width:78ch;margin:0 0 30px;padding-bottom:26px;font-size:14px;line-height:1.65;
  color:var(--muted);border-bottom:1px solid var(--border-soft)}

/*  eyebrow + a corner link on one line, used in the About page head  */
.ph-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.ph-top .eyebrow{margin-bottom:0}
.ph-top .btn{margin-left:auto}
.btn.btn-sm{padding:9px 18px;font-size:13.5px}
/*  On a phone the eyebrow takes the whole line so the button drops
    underneath it. Left beside it, the two together are wider than a 390px
    screen, and margin-left:auto would push the button off the edge.     */
@media(max-width:600px){
  .ph-top{gap:14px}
  .ph-top .eyebrow{flex:0 0 100%}
  .ph-top .btn{margin-left:0}
}

/*  Anchor targets have to clear the sticky header, or the browser scrolls
    the heading to y=0 and the header sits on top of it. 72px of header
    plus breathing room.                                                  */
[id]{scroll-margin-top:96px}
/*  Smooth only for people who have not asked the OS for less motion.
    Applies to any in-page jump on the site, which is the behaviour you
    want everywhere - it is only ever reached by clicking an anchor.     */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- the phone menu ---------- */
/*  Desktop is unchanged: nav, then the auth link, then nothing. The button
    only exists below 700px, and even then only once the script reveals it. */
.navauth{display:flex;align-items:center;gap:18px}
.navauth a{font-size:14px;text-decoration:none;color:var(--text);transition:.15s}
.navauth a:hover{color:var(--teal)}
.navtoggle{display:none}
.navtoggle[hidden]{display:none !important}

@media(max-width:700px){
  /*  the panel: absolutely positioned under the header, so opening it
      never reflows the page behind it  */
  nav.main{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:6px 0 10px;
    background:var(--bg);border-bottom:1px solid var(--border);
    box-shadow:0 18px 40px rgba(4,7,14,.55)}
  nav.main.open{display:flex}
  /*  48px tap targets - a nav you open on a phone is a nav you tap on a phone */
  nav.main a{padding:14px 28px;min-height:48px;display:flex;align-items:center;
    font-size:16px;color:var(--text)}
  nav.main a.active{color:var(--teal);box-shadow:inset 3px 0 0 var(--teal)}
  nav.main a:hover{background:rgba(232,238,251,.04)}

  .navauth{margin-left:auto}
  .navtoggle{display:flex;align-items:center;gap:9px;padding:9px 14px;min-height:44px;
    background:transparent;border:1px solid var(--border);border-radius:99px;
    color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;font-family:var(--sans)}
  .navtoggle:hover{border-color:var(--teal)}
  .navtoggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .navtoggle-bars{display:flex;flex-direction:column;justify-content:center;gap:3.5px;width:16px}
  .navtoggle-bars i{display:block;height:2px;background:currentColor;border-radius:2px;transition:.18s}
  /*  open state: the bars become a cross, so the button says how to undo itself */
  .navtoggle[aria-expanded="true"] .navtoggle-bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] .navtoggle-bars i:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] .navtoggle-bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
}