/* Apex Academy: brand taken from the ApexAnalytica sign-in page (navy APEX, red wordmark, platform blue actions). */
:root{
  --navy:#2d3748; --red:#c53030; --red-soft:#feb2b2; --slate:#68747d; --blue:#2094f3;
  --ink:#09090b; --muted:#71717a; --line:#e4e4e7; --card:#ffffff; --wash1:#eff6ff; --wash2:#e0e7ff; --good:#16a34a;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(to bottom right,var(--wash1),var(--wash2)) fixed;background-color:var(--wash1);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1120px;margin:0 auto;padding-block:20px 80px;display:grid;gap:48px}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance;color:var(--navy)}
h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.05rem;font-weight:600}
p{margin:0;max-width:68ch}
a{color:var(--blue)}
.muted{color:var(--muted)}
.eyebrow{font-size:.74rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--slate)}
section{display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 6px -1px rgba(0,0,0,.06),0 2px 4px -2px rgba(0,0,0,.05)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn{display:inline-block;background:var(--blue);color:#fafcff;border:0;border-radius:6px;padding:9px 16px;font:inherit;font-weight:500;font-size:.9rem;text-decoration:none;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);cursor:pointer}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.tag{font-size:.72rem;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--slate);background:#fafafa;white-space:nowrap}
.tag.live{background:var(--red);border-color:var(--red);color:#fff}

/* Top bar: Apex Innovation Labs mark */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ail{display:flex;align-items:center;gap:12px;text-decoration:none}
.bars{position:relative;width:52px;height:32px}
.bars .pin{position:absolute;top:1px;left:50%;transform:translateX(-50%);display:grid;justify-items:center}
.bars .pin i{width:8px;height:8px;border:1px solid var(--red);border-radius:50%;background:#fff}
.bars .pin b{width:2px;height:6px;background:var(--red);margin-top:-2px}
.bars .row{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:2px;align-items:flex-end}
.bars .row span{width:4px;background:linear-gradient(to top,var(--red),var(--red-soft))}
.ail .w b{display:block;font-size:1.3rem;font-weight:800;letter-spacing:.05em;color:var(--navy);line-height:1}
.ail .w small{font-size:.6rem;font-weight:300;letter-spacing:.05em;color:var(--slate)}
.wordmark{font-size:1rem;letter-spacing:.14em}
.wordmark b{font-weight:800;color:var(--navy)} .wordmark span{font-weight:300;color:var(--red)}

/* Home hero */
.hero{display:grid;justify-items:center;text-align:center;gap:12px;padding-top:8px}
.target{width:88px;height:88px}
.word{font-size:clamp(2.4rem,7vw,4.2rem);line-height:1;letter-spacing:.04em;margin:4px 0 0}
.word .a{font-weight:800;color:var(--navy)}
.word .b{font-weight:300;color:var(--red);letter-spacing:.06em}
.tagline{font-size:.76rem;font-weight:500;letter-spacing:.32em;color:var(--slate)}
.lede{font-size:1.08rem;color:#3f3f46;max-width:60ch}
.next{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px;padding:12px 14px 12px 18px;background:#fff;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--navy);box-shadow:0 4px 6px -1px rgba(0,0,0,.06)}
.next:hover{border-color:var(--blue)}
.next-k{font-size:.72rem;font-weight:600;color:#fff;background:var(--red);padding:3px 10px;border-radius:999px}
.next-t{font-weight:600}
.next-go{background:var(--blue);color:#fafcff;border-radius:6px;padding:7px 14px;font-weight:500;font-size:.9rem}

/* Chapters */
.chapters{overflow:hidden}
.ch{border-bottom:1px solid var(--line)}
.ch:last-child{border-bottom:0}
.ch>button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:16px 20px}
.ch>button:hover{background:#fafafa}
.ch>button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.ch .num{font-weight:800;color:var(--red);font-size:1.05rem;letter-spacing:.05em}
.ch .t{font-weight:600;color:var(--navy)}
.ch .t small{display:block;font-weight:400;font-size:.9rem;color:var(--muted)}
.who{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ch .body{padding:0 20px 18px 92px}
.ch ol{margin:0;padding-left:1.1em;display:grid;gap:6px}
.ch li span{color:var(--muted)}
.ch li a{font-weight:600;color:var(--red);text-decoration:none}
.ch li a:hover{text-decoration:underline}
.staff{border-left:3px solid var(--navy)}
@media (max-width:640px){.ch>button{grid-template-columns:36px 1fr}.who{grid-column:2;justify-content:flex-start}.ch .body{padding-left:20px}}

/* Lesson */
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.lesson-head{display:grid;gap:8px}
.lesson-head h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.part{padding:clamp(16px,3vw,28px);display:grid;gap:14px}
.part-h{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.k{font-size:.74rem;font-weight:600;color:#fff;background:var(--red);padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.player{border-radius:12px;overflow:hidden;background:#0f1520;box-shadow:0 20px 40px -12px rgba(15,21,32,.35)}
.player video{display:block;width:100%;height:auto;background:#0f1520}
.player video::cue{background:rgba(15,21,32,.86);color:#fff;font-family:var(--sans);font-size:.95em;line-height:1.4}
.walk{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.walk li{counter-increment:s;display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff}
.walk li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center}
.walk li.now{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.walk b{color:var(--navy)}
.walk .ui{font-weight:600;background:#f4f4f5;border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:.92em;white-space:nowrap}
.walk .jump{all:unset;cursor:pointer;font-family:var(--mono);font-size:.78rem;color:var(--blue);padding:2px 6px;border-radius:4px;white-space:nowrap}
.walk .jump:hover{background:var(--wash1)}
.walk .jump:focus-visible{outline:2px solid var(--blue)}
.note{border-left:3px solid var(--blue);background:#f5faff;padding:10px 14px;border-radius:0 8px 8px 0;font-size:.95rem}
.checks{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.checks label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.checks input{margin-top:5px;accent-color:var(--good)}
.done{color:var(--good);font-weight:600}
.q{border:1px solid var(--line);border-radius:8px;background:#fff}
.q summary{cursor:pointer;padding:12px 14px;font-weight:600;color:var(--navy)}
.q p{padding:0 14px 12px}
.pending{color:var(--muted);font-style:italic}
.nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Apex Academy on academy.apexinnovationlabs.co.uk: account area, notices and forms. */
[hidden]{display:none !important}
.account{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.account .who-am-i{font-weight:600;color:var(--navy)}
.notice{border-left:3px solid var(--red);background:#fff;padding:12px 16px;border-radius:0 8px 8px 0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.notice.wait{border-left-color:var(--blue)}
.notice.flash{animation:notice-flash 1.2s ease}
@keyframes notice-flash{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.05)}30%{box-shadow:0 0 0 4px rgba(37,99,235,.35)}}
@media (prefers-reduced-motion:reduce){.notice.flash{animation:none;outline:3px solid var(--blue)}}
.invite{color:#3f3f46}
.form-card{padding:clamp(20px,4vw,36px);max-width:560px;width:100%;margin:0 auto;display:grid;gap:16px}
.form-card h1{font-size:clamp(1.5rem,3.5vw,2rem)}
.form{display:grid;gap:14px}
.field{display:grid;gap:6px;font-weight:500;color:var(--navy)}
.field small{font-weight:400;color:var(--muted)}
.field input,.field textarea{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.form .btn{justify-self:start}
.msg{padding:10px 14px;border-radius:6px;background:#f4f4f5}
.msg.good{background:#f0fdf4;color:#166534}
.msg.bad{background:#fef2f2;color:#991b1b}
/* Films (academy-film.js): the viewer's email drifts faintly over the picture, so a screen recording names who
   made it; full screen is the frame, not the bare video, so the email stays on in full screen too. */
.film{position:relative;line-height:0;container-type:inline-size}
.film video{width:100%;display:block}
/* One full-screen control: the frame's own (the browser's greyed one is hidden). */
.film video::-webkit-media-controls-fullscreen-button{display:none}
/* The email sits at the picture's edges, clear of the middle where the film's own text is, and grows with the
   picture so it stays readable in full screen. */
.film .mark{position:absolute;pointer-events:none;user-select:none;font:600 max(12px,1.25cqi)/1.2 system-ui,sans-serif;color:rgba(255,255,255,.5);text-shadow:0 0 3px rgba(0,0,0,.7);white-space:nowrap;transition:opacity .6s ease;z-index:2}
.film:fullscreen .mark{font-size:max(16px,1.25cqi)}
.film .full{position:absolute;right:10px;top:10px;z-index:3;line-height:1;font:600 12px/1 system-ui,sans-serif;padding:7px 10px;border-radius:6px;border:0;background:rgba(15,23,42,.72);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s}
.film:hover .full,.film .full:focus-visible{opacity:1}
.film:fullscreen{background:#000;display:flex;align-items:center}
.film:fullscreen video{max-height:100vh}
.film-state{margin:10px 0 0;font-size:.9rem;color:var(--muted)}
.film-state.good{color:var(--good)}
.film-state.warn{color:#9a3412}
/* The course, in order: number, title and screen, state. */
.ch ol.lessons{list-style:none;padding:0;gap:2px}
.lesson{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:8px}
.lesson .lnum small{display:block;font-size:.72rem;font-weight:500;color:var(--muted)}
.next a.next-go{text-decoration:none}
.lesson .lnum{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.lesson .lt small{display:block;color:var(--muted);font-size:.85rem}
.lesson .ln{font-weight:600;color:var(--navy)}
.lesson a.ln{color:var(--red);text-decoration:none}
.lesson a.ln:hover{text-decoration:underline}
.lesson.soon .ln,.lesson.locked .ln,.lesson.soon .lnum,.lesson.locked .lnum{color:var(--muted);font-weight:500}
.lesson.next{background:var(--wash1);outline:1px solid #bfdbfe}
.lesson .lstate{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.tag.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.tag.up{background:var(--red);border-color:var(--red);color:#fff}
.tag.soon{background:#fff;border-style:dashed}
.film-state .resume{display:block;margin:8px 0 0;font:inherit;font-size:.85rem;padding:4px 10px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.plain-page{margin-top:48px}
.tag.warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
@media (max-width:640px){.lesson{grid-template-columns:56px 1fr}.lesson .lstate{grid-column:2;justify-content:flex-start}}
.next-k.wait{background:var(--slate)}
.next-k.done{background:var(--good)}
.next .next-go.off{background:#e4e4e7;color:#52525b}
.progress{font-size:.85rem;color:var(--muted)}
.btn.locked{background:#e4e4e7;color:#52525b;box-shadow:none;cursor:not-allowed}
.nav-note{margin:0 0 8px;color:var(--muted);font-size:.9rem}
.film .film-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1.4;padding:16px;text-align:center;background:#0f172a;color:#fff;font:500 15px/1.4 system-ui,sans-serif}