/* Generated by palette.py. Do not edit. Every value here was measured. */
:root{
  --ink:#121418;
  --ink2:#484A53;
  --ink3:#696B74;
  --edge:#9194A0;
  --hair:#DADCE3;
  --sunk:#ECEDF3;
  --far:#F9FAFD;
  --paper:#F4F6FA;
  --onk:#D4D6DC;
  --onk2:#AFB1B8;
  --ink-lift:#26282E;
  --near:#FFFFFF;
  --grid1:#E5E7EB;--grid2:#E6E8FA;
  --ink-08:rgba(18,20,24,0.08);
  --ink-24:rgba(18,20,24,0.24);
  --ink-40:rgba(18,20,24,0.4);
  --on-ink-14:rgba(255,255,255,0.14);
  --c1:#FF333C;--c1-f:#121418;--c1-d:#DF0025;--c1-p:#990015;--c1-s:#FFCAC5;--c1-t:#FFF1EF;--c1-e:#FABEB8;
  --c2:#FD7200;--c2-f:#121418;--c2-d:#B75000;--c2-p:#7B3400;--c2-s:#FFCDB3;--c2-t:#FFF1EB;--c2-e:#F7C2A8;
  --c3:#FAA400;--c3-f:#121418;--c3-d:#996300;--c3-p:#654000;--c3-s:#FDD19B;--c3-t:#FFF2E3;--c3-e:#ECC99D;
  --c4:#D6B300;--c4-f:#121418;--c4-d:#836D00;--c4-p:#564700;--c4-s:#EAD998;--c4-t:#FAF5E1;--c4-e:#DDD09B;
  --c5:#84C900;--c5-f:#121418;--c5-d:#4F7B00;--c5-p:#314F00;--c5-s:#C7E5AA;--c5-t:#EFF8E6;--c5-e:#C0D9A9;
  --c6:#00D083;--c6-f:#121418;--c6-d:#007F4E;--c6-p:#005230;--c6-s:#A9EBC4;--c6-t:#E7FAEE;--c6-e:#A9DEBE;
  --c7:#00CCBE;--c7-f:#121418;--c7-d:#007D74;--c7-p:#00514A;--c7-s:#96ECE1;--c7-t:#E2FBF7;--c7-e:#9ADFD6;
  --c8:#00C6EF;--c8-f:#121418;--c8-d:#007892;--c8-p:#004D5F;--c8-s:#9AE7FF;--c8-t:#E5F8FF;--c8-e:#9BDBEF;
  --c9:#006AE5;--c9-f:#FFFFFF;--c9-d:#006AE5;--c9-p:#00459A;--c9-s:#C3DBFF;--c9-t:#EEF5FF;--c9-e:#B3D1FE;
  --c10:#9200FE;--c10-f:#FFFFFF;--c10-d:#9200FE;--c10-p:#6100AB;--c10-s:#DFD0FF;--c10-t:#F6F2FF;--c10-e:#D6C6F7;
  --a:#5955FF;--a-f:#FFFFFF;--a-d:#5954FE;--a-p:#3A19CD;--a-s:#CFD7FF;--a-t:#F1F4FF;--a-e:#C3CCFE;
  --held:#00D179;--held-f:#121418;--held-d:#007F47;--held-p:#00522C;--held-s:#ACEAC1;--held-t:#E8FAED;--held-e:#ACDEBC;
  --done:#00CBC3;--done-f:#121418;--done-d:#007C77;--done-p:#00504D;--done-s:#94ECE5;--done-t:#E2FBF8;--done-e:#99DFD9;
  --rev:#FDA200;--rev-f:#121418;--rev-d:#9B6200;--rev-p:#673F00;--rev-s:#FED09C;--rev-t:#FFF2E4;--rev-e:#EEC89E;
  --take:#FF3534;--take-f:#121418;--take-d:#E00018;--take-p:#99000D;--take-s:#FFCBC4;--take-t:#FFF1EF;--take-e:#FABFB7;
  --sched:#008EFE;--sched-f:#121418;--sched-d:#006FC8;--sched-p:#004885;--sched-s:#BEDCFF;--sched-t:#EDF5FF;--sched-e:#AFD3FD;
}

/* Spatial. Phone first, one stylesheet for both pages.

   Depth is geometry, not blur. The page sits on an isometric ground drawn in two
   hairline gradients at +30 and -30 degrees, and everything above it is a plate lifted
   off that ground by a hard offset shadow tinted with the plate's own colour. There is one
   radius scale, one border weight, one offset scale, one soft drop, and one mono/sans split:
   numbers, meta and labels are mono and tabular, everything you read as prose is sans.

   Every colour in here comes from palette.css, which palette.py generates and proves.
   No hue is hand-typed. If you need a new one, add it to palette.py first. */

:root{
  /* offsets. Five steps, and how far a plate is lifted says how much it matters:
     12 the two commitment plates, 10 a section plate, 8 a card, 6 a row, 4 a control. */
  --o1:4px; --o2:6px; --o3:8px; --o4:10px; --o5:12px;
  --r:12px; --r-s:9px; --r-x:6px;
  --rail:6px;      /* one left-rail weight everywhere a plate is colour coded */
  --bw:1px;
  --drop:0 28px 40px -28px var(--ink-40);   /* the one soft drop, only ever under a hard one */
  --sp:18px;
  --col:880px;    /* the content rail. Only the two carousels bleed past it. */
  --ease:cubic-bezier(.22,.68,.36,1);
  /* Call & Response mark, BRAND.md. Ink and the response violet; --a-d is the
     brand hex #5954FE exactly, so the logo introduces no second violet. */
  --cyb-ink:var(--ink); --cyb-accent:var(--a-d);
  --sa:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mo:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:light;
}
/* Sora carries the wordmark only (BRAND.md, lockup). Self-hosted latin subset of
   the variable font, weights 500-600, because verify.js fails any request that
   leaves this host. SIL OFL. */
@font-face{font-family:"Sora";font-style:normal;font-weight:500 600;font-display:swap;
  src:url("fonts/sora-latin.woff2") format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;font-family:var(--sa);color:var(--ink);font-size:1rem;line-height:1.5;
  letter-spacing:-.004em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(30deg, var(--grid1) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(-30deg, var(--grid2) 0 1px, transparent 1px 48px);
  background-attachment:fixed}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.028em;font-weight:800}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
input,button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{max-width:calc(var(--col) + var(--sp) * 2);margin-inline:auto;padding-inline:var(--sp)}
:focus-visible{outline:3px solid var(--a);outline-offset:2px;border-radius:var(--r-x)}
/* on the ink plates the ring is white: an action-coloured ring on an action-coloured
   button was 1.42:1 against the thing it was outlining. */
.hero-plate :focus-visible,.fin-plate :focus-visible,.cert :focus-visible,
.resume :focus-visible,.pn-h :focus-visible{outline-color:var(--near)}
.skip{position:absolute;left:8px;top:-60px;z-index:99;background:var(--ink);color:var(--near);
  padding:12px 16px;border-radius:var(--r-s);font-weight:700;transition:top .18s var(--ease)}
.skip:focus{top:8px}

/* the plate. Everything on the page is one of these, or a variation of one. */
.plate{border:var(--bw) solid var(--edge);border-radius:var(--r);background:var(--near);
  box-shadow:var(--o3) var(--o3) 0 -1px var(--pt,var(--hair))}

/* ---------------------------------------------------------------- wordmark */
/* The Call & Response lockup, BRAND.md: mark height 1.4x the wordmark size
   (16px type, 22.4px mark, over the 22px lockup floor), gap 0.4x mark height,
   8.96 rounded to 9px. Clear space is one bar height, 22.4*16/38 = 9.4px, and
   the 44px row leaves 10.8px above and below. "Labs" takes --ink2, the palette's
   muted gray, in place of the brand doc's #5D6169: no hue is hand-typed here
   that palette.py did not prove. */
.mark{display:inline-flex;flex:0 0 auto;align-items:center;gap:9px;min-height:44px;padding-right:4px;
  font-size:1rem}
.mark-t{font-family:"Sora",var(--sa);font-weight:500;letter-spacing:-.01em;color:var(--ink2);white-space:nowrap}
.mark-t b{font-weight:600;color:var(--ink)}
svg.mark-g{height:22.4px;width:auto;flex:none}

/* -------------------------------------------------------------------- bars */
.bar{position:sticky;top:0;z-index:40;background:var(--near);border-bottom:var(--bw) solid var(--edge)}
.bar-in{display:flex;align-items:center;gap:14px;min-height:44px}
.nav{display:none;margin-left:auto}
.nav ul{display:flex;gap:2px}
.nav a{display:inline-flex;align-items:center;white-space:nowrap;min-height:44px;padding:0 7px;border-radius:var(--r-s);
  font-family:var(--mo);font-size:.7812rem;letter-spacing:-.01em;color:var(--ink2)}
.nav a:hover{color:var(--a-d);background:var(--a-t)}
.bar .btn-sm{display:none}

/* ------------------------------------------------------------------ button */
/* Buttons press. The bottom shadow is solid, and it shortens by exactly as much as the
   button moves, so the top face lands where the shadow was. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;
  letter-spacing:-.014em;border:var(--bw) solid var(--a-d);border-radius:var(--r-s);cursor:pointer;
  background:var(--a-d);color:var(--near);padding:0 18px;min-height:48px;
  box-shadow:0 var(--o2) 0 -1px var(--a-p);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s}
.btn:active{transform:translate3d(0,3px,0);box-shadow:0 3px 0 -1px var(--a-p)}
.btn-sm{white-space:nowrap;min-height:44px;padding:0 14px;font-size:.875rem}
.btn-2{border-color:var(--ink);background:var(--near);color:var(--ink);
  box-shadow:0 var(--o1) 0 -1px var(--edge)}
.btn-2:active{box-shadow:0 2px 0 -1px var(--edge)}
/* Every save-a-seat button wears the hero's dress: thin --a-p border, diagonal shadow. */
.btn-go{border:1px solid var(--a-p);box-shadow:var(--o2) var(--o2) 0 -1px var(--a-p)}

/* -------------------------------------------------------------------- hero */
.hero{padding:7px 0 2px}
.hero-plate{position:relative;padding:9px 12px 11px;border-color:var(--ink);
  background:var(--ink);color:var(--near);
  box-shadow:var(--o5) var(--o5) 0 -1px var(--a-s),var(--drop)}
.hero h1{margin:0;font-size:clamp(1.2188rem,5.2vw,3.375rem);letter-spacing:-.034em;font-weight:820;
  color:var(--near);text-wrap:balance}
.hero .sub{margin:5px 0 0;font-size:1rem;line-height:1.4;color:var(--onk)}
.hero-cred{margin:10px 0 0;font-size:.8438rem;line-height:1.45;color:var(--onk2)}
.cdown{display:block;margin:6px 0 0;font-family:var(--mo);font-size:.75rem;line-height:1.34;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cd-d{display:block;color:var(--onk2)}
.cd-k{color:var(--onk);font-weight:700}
.cd-t{display:block;color:var(--onk)}
.cd-n,.cd-c{color:var(--near);font-weight:700}
.signup{display:flex;gap:7px;margin:6px 0 0;flex-wrap:wrap}
.signup input{flex:1 1 130px;min-width:0;min-height:48px;border:var(--bw) solid var(--edge);
  border-radius:var(--r-s);padding:0 12px;background:var(--near);color:var(--ink);
  box-shadow:inset 0 2px 3px var(--ink-08)}
.signup input::placeholder{color:var(--ink3);opacity:1;font-size:.875rem}
.signup input:focus{outline:0;border-color:var(--a);box-shadow:0 0 0 3px var(--a-s)}
.signup .btn{flex:0 1 auto;padding:0 13px;font-size:.9375rem}
.hero-plate .signup input,.fin-plate .signup input{background:var(--ink-lift);color:var(--near);
  border-color:var(--onk2);box-shadow:none}
/* This rule used to kill the focus ring on both email fields, because both of them are
   inside a plate: same specificity, declared later, so :focus never won. */
.hero-plate .signup input:focus,.fin-plate .signup input:focus{border-color:var(--a);
  box-shadow:0 0 0 3px var(--a-s)}
.hero-plate .signup input::placeholder,.fin-plate .signup input::placeholder{color:var(--onk2)}
@media (min-width:420px){.signup .btn{padding:0 18px;font-size:1rem}}

/* the seat meter. It lives on the ink plate, so the fill is the plate's own accent,
   --a-s, the colour the plate already wears as its offset shadow. The width is typed
   inline next to the two numbers it comes from; checkschema.py re-derives all three
   and fails the build if they disagree. The animation only replays that width from zero. */
.seats{margin:8px 0 0;display:flex;align-items:center;gap:9px}
.seats-bar{flex:0 1 170px;height:7px;border-radius:99px;background:var(--on-ink-14);overflow:hidden}
.seats-bar>span{display:block;height:100%;border-radius:99px;background:var(--a-s);
  animation:fill 1.1s .15s var(--ease) both}
@keyframes fill{from{width:0}}
.seats-n{font-family:var(--mo);font-size:.75rem;line-height:1.34;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--onk);white-space:nowrap}
.seats-n b{color:var(--near);font-weight:700}

/* ------------------------------------------------------------ proof strip */
/* Five plates, one per number, each lifted in its own hue. It used to be a strip
   that scrolled sideways, which hid two of the five numbers on a phone. */
.strip{margin-top:22px}
.strip ul{display:flex;flex-wrap:wrap;gap:9px;max-width:calc(var(--col) + var(--sp) * 2);
  margin-inline:auto;padding-inline:var(--sp)}
.strip li{flex:1 1 96px;padding:10px 11px 9px;border:var(--bw) solid var(--edge);
  border-radius:var(--r-s);background:var(--near);box-shadow:var(--o2) var(--o2) 0 -1px var(--ct)}
.strip b{display:block;font-family:var(--mo);font-size:1.75rem;line-height:1;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--cd)}
.strip span{display:block;font-size:.7812rem;color:var(--ink2);margin-top:5px;line-height:1.24}
.strip .s1{--cd:var(--c1-d);--ct:var(--c1-s)}
.strip .s2{--cd:var(--c3-d);--ct:var(--c3-s)}
.strip .s3{--cd:var(--c5-d);--ct:var(--c5-s)}
.strip .s4{--cd:var(--c8-d);--ct:var(--c8-s)}
.strip .s5{--cd:var(--c10-d);--ct:var(--c10-s)}

/* ---------------------------------------------------------------- sections */
section{scroll-margin-top:64px}
.kick{display:flex;align-items:center;gap:9px;font-family:var(--mo);font-size:.7188rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);line-height:1.3}
.kick::before{content:"";width:12px;height:12px;flex:0 0 auto;background:var(--a);
  transform:rotate(45deg) scale(.9)}
.big{margin:11px 0 0;font-size:clamp(1.4375rem,5.6vw,2.375rem);letter-spacing:-.03em}
.lede{margin:10px 0 0;font-size:1rem;line-height:1.5;color:var(--ink2)}
.note{margin:14px 0 0;font-size:1rem;line-height:1.5;color:var(--ink2)}


.sc-r{padding:12px 0;border-top:var(--bw) solid var(--hair)}
.sc-r:first-child{border-top:0;padding-top:4px}
.sc-r dt{font-family:var(--mo);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}
.sc-r dd{margin:4px 0 0;font-size:1rem;line-height:1.5;color:var(--ink)}
@media (min-width:640px){
  .sc-r{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline}
  .sc-r dd{margin-top:0}
}

/* ------------------------------------------------------- the differentiator */
/* --------------------------------------------------------------------- why */
/* The stakes block: four numbers from real studies, each card carrying its source. */
.why{padding:30px 0 6px}
.why .big{margin-top:12px}
.why-l{margin:20px 0 0;padding:0}
.why-l li{display:grid;grid-template-columns:1fr;padding:14px 0 10px;
  border-top:var(--bw) solid var(--hair)}
.why-n{font-family:var(--mo);font-size:clamp(1.625rem,5.6vw,2.25rem);line-height:1;
  letter-spacing:-.04em;font-weight:700;color:var(--a-d);font-variant-numeric:tabular-nums}
.why-l h3{margin:7px 0 0;font-size:1.0312rem;letter-spacing:-.025em;line-height:1.28;
  overflow-wrap:anywhere}
.why-l p{margin:6px 0 0;font-size:1rem;line-height:1.46;color:var(--ink2)}
.why-l .src{display:flex;align-items:center;min-height:44px;margin:4px 0 -8px;
  font-family:var(--mo);font-size:.75rem;letter-spacing:-.02em;
  color:var(--ink2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--edge);overflow-wrap:anywhere}
.why-l .src:hover{color:var(--a-d);text-decoration-color:currentColor}
.why-out{margin-top:18px;padding-top:16px;border-top:var(--bw) solid var(--hair)}
@media (min-width:760px){
  .why-l li{grid-template-columns:150px 1fr;column-gap:18px}
  .why-n{grid-column:1;grid-row:1/span 3}
  .why-l h3{grid-column:2;margin-top:2px}
  .why-l p,.why-l .src{grid-column:2}
}

/* -------------------------------------------------------------------- diff */
.diff{padding:30px 0 6px}
.diff-plate{--pt:var(--a-s);padding:19px 22px 19px 16px;border-left:var(--rail) solid var(--a-d);
  box-shadow:var(--o4) var(--o4) 0 -1px var(--a-s)}
.diff .big{margin-top:12px}
/* The future-courses note, under the plate: the map's replacement, 2026-08-24 */
.prog-next{margin-top:18px;scroll-margin-top:64px}
.prog-next .lede+.lede{margin-top:10px}
/* The receipt, inside the programme plate. Nobody signs up for a thing they have
   not been told the shape of: six rows, mono label, plain value. */
.sc-k{margin:20px 0 0;padding-top:16px;border-top:var(--bw) solid var(--hair);
  font-family:var(--mo);font-size:.7188rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2)}
.sc-l{margin:6px 0 0}

/* ---------------------------------------------------------------- carousel */
.courses{padding:30px 0 8px}
.ch{position:relative}
.rail-ui{display:flex;align-items:center;gap:12px;margin-top:16px}
.counter{font-family:var(--mo);font-variant-numeric:tabular-nums;letter-spacing:-.04em;
  font-size:.875rem;color:var(--ink2)}
.counter b{font-size:1.625rem;font-weight:700;color:var(--live,var(--ink))}
.counter i{font-style:normal;margin-left:4px}
.arrows{margin-left:auto;display:flex;gap:8px}
.no-js .arrows,.no-js .btn-copy{display:none}
/* the day count is computed by app.js; with the script gone the static number would
   rot one day per day, so a no-js reader gets the date line only, which never rots */
.no-js .cd-t,.no-js #stickydays{display:none}
.arw{width:44px;height:44px;border-radius:var(--r-s);background:var(--near);
  border:var(--bw) solid var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 var(--o1) 0 -1px var(--edge);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.arw:hover{border-color:var(--a-d);background:var(--a-t)}
.arw:active{transform:translate3d(0,2px,0);box-shadow:0 2px 0 -1px var(--edge)}
.arw[aria-disabled="true"]{opacity:.34;pointer-events:none}
.rail{margin-top:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:max(var(--sp), calc(50% - var(--col) / 2))}
.rail::-webkit-scrollbar{display:none}
/* the carousel is the one thing that crosses the rail. It starts on the rail and
   bleeds right, so a card cut off at the edge is the invitation to swipe. */
.track{display:flex;gap:16px;align-items:stretch;padding:4px 0 22px;
  padding-inline-start:max(var(--sp), calc(50% - var(--col) / 2))}
.card{flex:0 0 84%;max-width:340px;scroll-snap-align:center;scroll-snap-stop:always}
.card-in{height:100%;background:var(--near);border:var(--bw) solid var(--edge);
  border-left:var(--rail) solid var(--cc-d);border-radius:var(--r);padding:14px 15px 15px;
  display:flex;flex-direction:column;box-shadow:var(--o3) var(--o3) 0 -1px var(--cc-s);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card.is-live .card-in{transform:translate3d(-2px,-2px,0);
  box-shadow:var(--o4) var(--o4) 0 -1px var(--cc-s),var(--drop)}
.card-top{display:flex;align-items:center;gap:9px}
.num{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-s);
  border:var(--bw) solid var(--ink-24);background:var(--cc);color:var(--cc-f);
  font-family:var(--mo);font-weight:700;font-size:1rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.flag{font-family:var(--mo);font-size:.6562rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--near);border-radius:var(--r-x);
  padding:3px 7px}
.card h3{margin:12px 0 0;font-size:1.25rem;letter-spacing:-.03em;overflow-wrap:anywhere}
.facts{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 0}
.facts li{font-family:var(--mo);font-size:.7188rem;letter-spacing:-.02em;color:var(--cc-d);
  background:var(--cc-t);border:var(--bw) solid var(--cc-e);border-radius:var(--r-x);
  padding:3px 7px;font-variant-numeric:tabular-nums}
.facts b{font-weight:700}
.leave{margin:13px 0 0;font-size:1rem;font-weight:650;line-height:1.38}
.leave-k{display:block;font-family:var(--mo);font-size:.6562rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.pre{margin:auto 0 0;padding-top:12px;font-family:var(--mo);font-size:.7188rem;color:var(--ink2)}
.card[data-n="1"]{--cc:var(--c1);--cc-f:var(--c1-f);--cc-d:var(--c1-d);--cc-s:var(--c1-s);--cc-t:var(--c1-t);--cc-e:var(--c1-e)}
.card[data-n="2"]{--cc:var(--c2);--cc-f:var(--c2-f);--cc-d:var(--c2-d);--cc-s:var(--c2-s);--cc-t:var(--c2-t);--cc-e:var(--c2-e)}
.card[data-n="3"]{--cc:var(--c3);--cc-f:var(--c3-f);--cc-d:var(--c3-d);--cc-s:var(--c3-s);--cc-t:var(--c3-t);--cc-e:var(--c3-e)}
.card[data-n="4"]{--cc:var(--c4);--cc-f:var(--c4-f);--cc-d:var(--c4-d);--cc-s:var(--c4-s);--cc-t:var(--c4-t);--cc-e:var(--c4-e)}
.card[data-n="5"]{--cc:var(--c5);--cc-f:var(--c5-f);--cc-d:var(--c5-d);--cc-s:var(--c5-s);--cc-t:var(--c5-t);--cc-e:var(--c5-e)}
.card[data-n="6"]{--cc:var(--c6);--cc-f:var(--c6-f);--cc-d:var(--c6-d);--cc-s:var(--c6-s);--cc-t:var(--c6-t);--cc-e:var(--c6-e)}
.card[data-n="7"]{--cc:var(--c7);--cc-f:var(--c7-f);--cc-d:var(--c7-d);--cc-s:var(--c7-s);--cc-t:var(--c7-t);--cc-e:var(--c7-e)}
.card[data-n="8"]{--cc:var(--c8);--cc-f:var(--c8-f);--cc-d:var(--c8-d);--cc-s:var(--c8-s);--cc-t:var(--c8-t);--cc-e:var(--c8-e)}
.card[data-n="9"]{--cc:var(--c9);--cc-f:var(--c9-f);--cc-d:var(--c9-d);--cc-s:var(--c9-s);--cc-t:var(--c9-t);--cc-e:var(--c9-e)}
.card[data-n="10"]{--cc:var(--c10);--cc-f:var(--c10-f);--cc-d:var(--c10-d);--cc-s:var(--c10-s);--cc-t:var(--c10-t);--cc-e:var(--c10-e)}
.rail-end{flex:0 0 calc(max(var(--sp), calc(50vw - var(--col) / 2)) - 16px);list-style:none}
.dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
/* four weeks, so each dot can own a whole 44px box. At ten courses they were 30px
   wide and the 44px probe landed on the neighbour. */
.dots a{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.dot-b{display:block;width:20px;height:5px;background:var(--edge);
  transition:background .3s,width .3s var(--ease)}
.dots a:hover .dot-b{background:var(--ink2)}
.dots .on .dot-b{background:var(--live,var(--ink));width:26px}

/* ----------------------------------------------------------------- anatomy */
.anat{padding:30px 0 6px}
.anat-box{margin-top:18px}
.anat-cap{font-family:var(--mo);font-size:.875rem;color:var(--ink2);margin-bottom:9px;line-height:1.4}
/* One plate cut into five, not five plates in a row. A gap between flex items is added
   on top of the percentages, so the old row sat 16px past its own container at every
   width. Here the blocks tile the container exactly and each one is drawn at its true
   share of the 90 minutes, with a hairline where two of them meet. */
.scale{display:flex;gap:0;height:48px;border:var(--bw) solid var(--edge);border-radius:var(--r-s);
  overflow:hidden;background:var(--near);box-shadow:var(--o1) var(--o1) 0 -1px var(--hair)}
.seg{flex:0 0 var(--w);min-width:0;position:relative;display:grid;
  place-items:center;background:var(--sc-t);border-right:var(--bw) solid var(--near);
  transition:background .22s var(--ease)}
.seg:last-child{border-right:0}
.seg-n{font-family:var(--mo);font-size:.875rem;font-weight:700;color:var(--sc-d);
  font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chip{display:inline-flex;flex-direction:column;justify-content:center;min-height:46px;
  padding:5px 12px;border-radius:var(--r-s);border:var(--bw) solid var(--edge);
  background:var(--near);cursor:pointer;line-height:1.2;
  box-shadow:var(--o1) var(--o1) 0 -1px var(--hair);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s}
.chip:active{transform:translate3d(2px,2px,0);box-shadow:2px 2px 0 -1px var(--hair)}
.chip:hover{border-color:var(--ink3);background:var(--far)}
.chip-n{font-size:.8438rem;font-weight:750;letter-spacing:-.02em}
.chip-m{font-family:var(--mo);font-size:.6875rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.ch1{--sc:var(--c1);--sc-f:var(--c1-f);--sc-d:var(--c1-d);--sc-s:var(--c1-s)}
.ch2{--sc:var(--c3);--sc-f:var(--c3-f);--sc-d:var(--c3-d);--sc-s:var(--c3-s)}
.ch3{--sc:var(--c5);--sc-f:var(--c5-f);--sc-d:var(--c5-d);--sc-s:var(--c5-s)}
.ch4{--sc:var(--c8);--sc-f:var(--c8-f);--sc-d:var(--c8-d);--sc-s:var(--c8-s)}
.ch5{--sc:var(--c10);--sc-f:var(--c10-f);--sc-d:var(--c10-d);--sc-s:var(--c10-s)}
.seg1,.p1{--sc:var(--c1);--sc-f:var(--c1-f);--sc-d:var(--c1-d);--sc-s:var(--c1-s);--sc-t:var(--c1-t);--sc-e:var(--c1-e)}
.seg2,.p2{--sc:var(--c3);--sc-f:var(--c3-f);--sc-d:var(--c3-d);--sc-s:var(--c3-s);--sc-t:var(--c3-t);--sc-e:var(--c3-e)}
.seg3,.p3{--sc:var(--c5);--sc-f:var(--c5-f);--sc-d:var(--c5-d);--sc-s:var(--c5-s);--sc-t:var(--c5-t);--sc-e:var(--c5-e)}
.seg4,.p4{--sc:var(--c8);--sc-f:var(--c8-f);--sc-d:var(--c8-d);--sc-s:var(--c8-s);--sc-t:var(--c8-t);--sc-e:var(--c8-e)}
.seg5,.p5{--sc:var(--c10);--sc-f:var(--c10-f);--sc-d:var(--c10-d);--sc-s:var(--c10-s);--sc-t:var(--c10-t);--sc-e:var(--c10-e)}
.anat-ps{margin-top:12px}
.anat-p{display:none;border:var(--bw) solid var(--edge);border-left:var(--rail) solid var(--sc-d);
  border-radius:var(--r);padding:13px 15px 13px 16px;background:var(--near);
  box-shadow:var(--o3) var(--o3) 0 -1px var(--sc-s)}
.anat-h{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-weight:750;font-size:1.0312rem;
  letter-spacing:-.025em}
.anat-h em{font-family:var(--mo);font-style:normal;font-weight:600;color:var(--ink2);
  font-size:.7812rem;margin-left:auto;font-variant-numeric:tabular-nums}
.anat-i{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-x);
  border:var(--bw) solid var(--ink-24);background:var(--sc);color:var(--sc-f);
  font-family:var(--mo);font-size:.75rem;font-weight:700}
.anat-d{margin-top:7px;font-size:1rem;line-height:1.48;color:var(--ink2)}
.anat-rail{display:block;margin-top:11px;height:7px;border:var(--bw) solid var(--edge);
  border-radius:99px;background:var(--sunk);overflow:hidden}
.anat-rail i{display:block;height:100%;width:var(--pct);background:var(--sc-d)}
.anat-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding:11px 15px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--ink);
  color:var(--near);font-family:var(--mo);font-size:.9375rem;font-weight:600;letter-spacing:-.02em;
  box-shadow:var(--o3) var(--o3) 0 -1px var(--hair);font-variant-numeric:tabular-nums}
#an1:checked~.anat-ps .p1,#an2:checked~.anat-ps .p2,#an3:checked~.anat-ps .p3,
#an4:checked~.anat-ps .p4,#an5:checked~.anat-ps .p5{display:block}
#an1:checked~.scale .seg1,#an2:checked~.scale .seg2,#an3:checked~.scale .seg3,
#an4:checked~.scale .seg4,#an5:checked~.scale .seg5{background:var(--sc)}
#an1:checked~.scale .seg1 .seg-n,#an2:checked~.scale .seg2 .seg-n,#an3:checked~.scale .seg3 .seg-n,
#an4:checked~.scale .seg4 .seg-n,#an5:checked~.scale .seg5 .seg-n{color:var(--sc-f)}
#an1:checked~.chips .ch1,#an2:checked~.chips .ch2,#an3:checked~.chips .ch3,
#an4:checked~.chips .ch4,#an5:checked~.chips .ch5{background:var(--sc);border-color:var(--ink-24);
  color:var(--sc-f);box-shadow:var(--o2) var(--o2) 0 -1px var(--sc-s)}
/* .chip:active is (0,2,0) and the checked-chip rule below is (1,2,1), so the selected chip
   used to slide with its shadow instead of pressing into it. */
#an1:checked~.chips .ch1:active,#an2:checked~.chips .ch2:active,#an3:checked~.chips .ch3:active,
#an4:checked~.chips .ch4:active,#an5:checked~.chips .ch5:active{box-shadow:2px 2px 0 -1px var(--sc-s)}
#an1:checked~.chips .ch1 .chip-m,#an2:checked~.chips .ch2 .chip-m,#an3:checked~.chips .ch3 .chip-m,
#an4:checked~.chips .ch4 .chip-m,#an5:checked~.chips .ch5 .chip-m{color:var(--sc-f)}
#an1:focus-visible~.chips .ch1,#an2:focus-visible~.chips .ch2,#an3:focus-visible~.chips .ch3,
#an4:focus-visible~.chips .ch4,#an5:focus-visible~.chips .ch5{outline:3px solid var(--a);outline-offset:2px}

/* ------------------------------------------------------------ certificates */
.team{padding-top:30px}
.certs{padding:30px 0 6px}
.cert{position:relative;overflow:hidden;margin:18px 0 0;background:var(--ink);color:var(--near);
  border:var(--bw) solid var(--ink);border-radius:var(--r);padding:23px 22px 17px 21px;
  box-shadow:var(--o4) var(--o4) 0 -1px var(--a-s)}
/* the ten courses as one object: the spectrum, in ten hard stops, across the lid */
.cert::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,
  var(--c1) 0 10%,var(--c2) 10% 20%,var(--c3) 20% 30%,var(--c4) 30% 40%,var(--c5) 40% 50%,
  var(--c6) 50% 60%,var(--c7) 60% 70%,var(--c8) 70% 80%,var(--c9) 80% 90%,var(--c10) 90% 100%)}
.cert-h{display:flex;align-items:center;gap:8px;font-family:var(--mo);font-size:.6875rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--onk)}
.cert-q{margin:9px 0 0;font-size:clamp(1.1875rem,4.8vw,1.625rem);font-weight:750;letter-spacing:-.03em;
  line-height:1.18}
.cert-n{margin:11px 0 0;font-size:1rem;line-height:1.5;color:var(--onk)}

/* ------------------------------------------------------------------ access */
.access{padding:30px 0 6px}
.acc-list{margin-top:18px;display:grid;gap:10px}
.acc-list li{display:flex;gap:12px;align-items:flex-start;background:var(--near);
  border:var(--bw) solid var(--edge);border-radius:var(--r);padding:13px 14px;
  box-shadow:var(--o2) var(--o2) 0 -1px var(--ac-s)}
.acc-n{flex:0 0 28px;height:28px;border-radius:var(--r-x);display:grid;place-items:center;
  font-family:var(--mo);font-size:.8125rem;font-weight:700;color:var(--ac-f);background:var(--ac);
  border:var(--bw) solid var(--ink-24)}
.acc-list li:nth-child(1){--ac:var(--c1);--ac-f:var(--c1-f);--ac-s:var(--c1-s)}
.acc-list li:nth-child(2){--ac:var(--c3);--ac-f:var(--c3-f);--ac-s:var(--c3-s)}
.acc-list li:nth-child(3){--ac:var(--c5);--ac-f:var(--c5-f);--ac-s:var(--c5-s)}
.acc-list li:nth-child(4){--ac:var(--c8);--ac-f:var(--c8-f);--ac-s:var(--c8-s)}
.acc-list p{font-size:1rem;line-height:1.46;color:var(--ink2)}
@media (min-width:760px){.acc-list{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- audience */
.aud{padding:30px 0 6px}
.aud:has(#audn:checked) .aud-box{border-left-color:var(--ink3);box-shadow:var(--o3) var(--o3) 0 -1px var(--hair)}
.aud-box{margin-top:16px;border:var(--bw) solid var(--edge);border-left:var(--rail) solid var(--held-d);
  border-radius:var(--r);background:var(--near);padding:14px;
  box-shadow:var(--o3) var(--o3) 0 -1px var(--held-s)}
.aud-tabs{display:flex;gap:6px;background:var(--sunk);border:var(--bw) solid var(--edge);
  border-radius:var(--r-s);padding:4px}
.aud-t{flex:1;text-align:center;padding:11px 8px;border-radius:var(--r-x);font-size:.9375rem;
  font-weight:750;cursor:pointer;color:var(--ink2);border:var(--bw) solid transparent;
  transition:background .2s var(--ease),color .2s}
.aud-l{display:none;margin-top:13px}
.aud-l li{position:relative;padding:11px 0 11px 30px;border-bottom:var(--bw) solid var(--hair);
  font-size:1rem;line-height:1.46;color:var(--ink2)}
.aud-l li:last-child{border-bottom:0}
.aud-l li::before{position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:var(--r-x);
  display:grid;place-items:center;font-size:.75rem;font-weight:800;
  border:var(--bw) solid var(--ink-24)}
.ly li::before{content:"✓";background:var(--held);color:var(--held-f)}
.ln li::before{content:"✕";background:var(--near);color:var(--ink2);border-color:var(--edge)}
#audy:checked~.aud-tabs .ty,#audn:checked~.aud-tabs .tn{background:var(--near);color:var(--ink);
  border-color:var(--edge);box-shadow:0 2px 0 -1px var(--edge)}
#audy:checked~.ly,#audn:checked~.ln{display:block}
#audy:focus-visible~.aud-tabs .ty,#audn:focus-visible~.aud-tabs .tn{outline:3px solid var(--a);outline-offset:2px}

/* ------------------------------------------------------------- final, foot */
.final{padding:32px 0 4px}
.fin-plate{padding:20px 12px;border-color:var(--ink);background:var(--ink);color:var(--near);
  box-shadow:var(--o5) var(--o5) 0 -1px var(--a-s),var(--drop)}
.fin-plate .big{color:var(--near)}
.fin-plate .lede{color:var(--onk)}
.cond{margin:14px 0 0;padding-top:12px;border-top:var(--bw) solid var(--onk2);font-size:1rem;
  line-height:1.5;color:var(--onk)}
.cdown-lg{margin-top:12px}
.foot{margin-top:30px;padding:0 0 30px}
.foot-in{padding-top:20px;border-top:var(--bw) solid var(--edge)}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:4px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;
  border-radius:var(--r-s);font-family:var(--mo);font-size:.7812rem;color:var(--ink2);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--edge)}
.foot-nav a:hover{color:var(--a-d);background:var(--a-t)}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:10px var(--sp) calc(10px + env(safe-area-inset-bottom));background:var(--near);
  border-top:var(--bw) solid var(--edge);
  transform:translateY(110%);transition:transform .3s var(--ease)}
.sticky.on{transform:none}
.sticky-t{font-family:var(--mo);font-size:.7188rem;line-height:1.3;min-width:0;color:var(--ink2);
  letter-spacing:-.02em}
.sticky-t b{display:block;font-weight:700;font-size:.8125rem;color:var(--ink)}
.sticky .btn{white-space:nowrap;padding:0 16px}
.landing{padding-bottom:6rem}
/* rem in a media query answers to the reader's own font size, so this fires exactly when
   the text has outgrown the screen rather than at some width. A fixed bar with a sentence
   in it took five lines and 449px of a 380px phone at the largest setting; the date and
   the button are the parts that have to survive, and neither is hidden anywhere else. */
@media (max-width:22rem){
  .sticky-t b{display:none}
}
@media (min-width:760px){
  :root{--sp:26px}
  .hero{padding:24px 0 8px}
  .hero-plate{padding:24px 22px}
  .hero .sub{font-size:1.0625rem;line-height:1.5;margin-top:12px}
  .cdown{font-size:.8438rem;margin-top:14px}
  .signup{max-width:520px;margin-top:14px;gap:10px}
  .lede{font-size:1.0312rem}
  .diff,.courses,.anat,.certs,.access,.aud,.prog,.who,.faq,.team{padding-top:52px}
  .aud-box,.fin-plate{padding:28px 26px}
  .diff-plate{padding:28px 26px 28px 20px}
  .cert{padding:32px 26px 28px 25px}
  .anat-p{padding-left:20px}
  .strip{margin-top:26px}
  .strip li{flex:1 1 0}
  .final{padding-top:56px}
}
@media (min-width:1000px){
  .hero-plate{display:grid;grid-template-columns:1.15fr .85fr;gap:0 44px;padding:34px 30px}
  .hero h1{grid-column:1;grid-row:1}
  .hero .sub{grid-column:1;grid-row:2;margin-top:14px}
  .hero-cred{grid-column:1;grid-row:3;margin-top:14px}
  .hero-r{grid-column:2;grid-row:1/4;align-self:center}
}
/* The header's own width, measured, not guessed. Six nav labels plus the wordmark plus
   the button need 916px including the two 14px gaps, and the content rail caps the row at
   932, so the switch is at 980. Below that the sticky bar carries the call to action,
   which is what it is for. verify.js measures the row at 980 and fails if it does not fit,
   so adding a seventh label cannot quietly clip the button the way the sixth one did. */
@media (min-width:980px){
  .landing{padding-bottom:0}
  .sticky{display:none}
  .nav{display:block}
  .bar-in{min-height:58px;padding-block:7px}
  .bar .btn-sm{display:inline-flex}
}
@media (min-width:900px){.card{flex-basis:32%}}
@media (min-width:560px) and (max-width:899px){.card{flex-basis:58%}}

/* ================================================================ path page */
.pathpage{padding-bottom:8.75rem}
.phead{position:sticky;top:0;z-index:40;background:var(--near);
  border-bottom:var(--bw) solid var(--edge);padding:9px 0 10px}
.phead>*{max-width:calc(var(--col) + var(--sp) * 2);margin-inline:auto;padding-inline:var(--sp)}
.sw{position:relative;z-index:3}
.sw-trg{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;
  border:var(--bw) solid var(--edge);border-radius:var(--r);background:var(--near);
  padding:5px 10px 5px 5px;box-shadow:var(--o1) var(--o1) 0 -1px var(--c1-s)}
.sw-trg::-webkit-details-marker{display:none}
.sw[open] .sw-trg{border-color:var(--a);box-shadow:var(--o1) var(--o1) 0 -1px var(--a-s)}
.sw-av{flex:0 0 36px;height:36px;border-radius:var(--r-x);background:var(--c1);color:var(--c1-f);
  border:var(--bw) solid var(--ink-24);display:grid;place-items:center;font-family:var(--mo);
  font-weight:700;font-size:.8125rem}
.sw-tt{min-width:0;line-height:1.24}
.sw-tt b{display:block;font-size:.9062rem;font-weight:750;letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-tt span{font-family:var(--mo);font-size:.7188rem;color:var(--ink2)}
.sw-cv{margin-left:auto;color:var(--a-d);display:grid;place-items:center;width:32px;height:32px;
  transition:transform .22s var(--ease)}
.sw[open] .sw-cv{transform:rotate(180deg)}
/* taller than 70vh, and its inner scrollbar is invisible on touch, so the bottom edge
   has to say there is more below it */
.sw-sheet{position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--near);
  border-bottom:3px solid var(--a);
  border:var(--bw) solid var(--edge);border-radius:var(--r);padding:15px 14px;max-height:70vh;
  overflow:auto;box-shadow:var(--o4) var(--o4) 0 -1px var(--hair),var(--drop)}
.sw-sheet h2{font-size:1rem;letter-spacing:-.03em;margin-top:18px}
.sw-sheet h2:first-child{margin-top:0}
.sw-note{font-size:1rem;line-height:1.45;color:var(--ink2);margin-top:5px}
.sw-list{margin-top:12px;display:grid;gap:9px}
.sw-i{position:relative;display:flex;gap:11px;min-height:52px;padding:10px 11px;
  align-items:flex-start;border:var(--bw) solid var(--edge);border-left:var(--rail) solid var(--sd);
  border-radius:var(--r-s);background:var(--near);
  box-shadow:var(--o1) var(--o1) 0 -1px var(--ss)}
.sw-n{flex:0 0 32px;height:32px;border-radius:var(--r-x);display:grid;place-items:center;
  font-family:var(--mo);font-size:.7812rem;font-weight:700;font-variant-numeric:tabular-nums;
  border:var(--bw) solid var(--ink-24)}
.sw-b{min-width:0;font-size:.9375rem;font-weight:700;letter-spacing:-.02em;display:block;padding-top:3px}
.sw-b a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--edge)}
.sw-b a::after{content:"";position:absolute;inset:0;border-radius:var(--r-s)}
.sw-b em{display:flex;align-items:center;gap:6px;font-style:normal;font-family:var(--mo);
  font-size:.7188rem;font-weight:500;color:var(--ink2);margin-top:4px;line-height:1.4}
.sw-b em .ic{flex:0 0 14px;width:14px;height:14px}
.sw-active{border-color:var(--a);border-left-color:var(--a);background:var(--a-t);
  box-shadow:var(--o1) var(--o1) 0 -1px var(--a-s)}
.sw-locked{background:var(--far);border-style:dashed;border-left-style:solid;box-shadow:none}
.sw-locked .sw-n{background:var(--sunk)!important;color:var(--ink2)!important;border-color:var(--edge)}
.sw-locked .sw-b{color:var(--ink2)}
.sw-paths{margin-top:12px;display:grid;gap:9px}
.sw-paths li{background:var(--far);border:var(--bw) solid var(--edge);border-radius:var(--r-s);
  padding:10px 11px;font-size:.8438rem}
.sw-paths b{font-weight:750;letter-spacing:-.02em}
.sw-paths span{display:block;font-family:var(--mo);font-size:.7188rem;color:var(--ink2);margin-top:3px}
.sw-paths em{display:block;font-style:normal;font-family:var(--mo);font-size:.7188rem;font-weight:700;
  color:var(--done-d);margin-top:3px}
.sw-i.c1,.sw-n.c1{--sd:var(--c1-d);--ss:var(--c1-s)}
.sw-n.c1{background:var(--c1);color:var(--c1-f)}
.sw-n.c2{background:var(--c2);color:var(--c2-f)}
.sw-n.c3{background:var(--c3);color:var(--c3-f)}
.sw-n.c4{background:var(--c4);color:var(--c4-f)}
.sw-n.c5{background:var(--c5);color:var(--c5-f)}
.sw-n.c6{background:var(--c6);color:var(--c6-f)}
.sw-n.c7{background:var(--c7);color:var(--c7-f)}
.sw-n.c8{background:var(--c8);color:var(--c8-f)}
.sw-n.c9{background:var(--c9);color:var(--c9-f)}
.sw-n.c10{background:var(--c10);color:var(--c10-f)}
.sw-i:nth-child(1){--sd:var(--c1-d);--ss:var(--c1-s)}
.sw-i:nth-child(2){--sd:var(--c2-d);--ss:var(--c2-s)}
.sw-i:nth-child(3){--sd:var(--c3-d);--ss:var(--c3-s)}
.sw-i:nth-child(4){--sd:var(--c4-d);--ss:var(--c4-s)}
.sw-i:nth-child(5){--sd:var(--c5-d);--ss:var(--c5-s)}
.sw-i:nth-child(6){--sd:var(--c6-d);--ss:var(--c6-s)}
.sw-i:nth-child(7){--sd:var(--c7-d);--ss:var(--c7-s)}
.sw-i:nth-child(8){--sd:var(--c8-d);--ss:var(--c8-s)}
.sw-i:nth-child(9){--sd:var(--c9-d);--ss:var(--c9-s)}
.sw-i:nth-child(10){--sd:var(--c10-d);--ss:var(--c10-s)}
.cadence{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-top:10px}
.ring{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--held-d) var(--p),var(--hair) 0);position:relative}
.ring::after{content:"";position:absolute;inset:4px;background:var(--near);border-radius:50%}
.ring b{position:relative;z-index:1;font-family:var(--mo);font-size:.8125rem;font-weight:700}
.cad-t{font-size:.8125rem;font-weight:700;line-height:1.3}
.cad-t em{display:block;font-family:var(--mo);font-style:normal;font-weight:500;color:var(--ink2);
  font-size:.7188rem;margin-top:2px}
.pmain{padding:0 var(--sp);max-width:calc(var(--col) + var(--sp) * 2);margin-inline:auto}

/* the resume plate. The one primary action on the page, so the deepest offset on it. */
.resume{margin-top:18px;background:var(--ink);color:var(--near);border:var(--bw) solid var(--ink);
  border-left:var(--rail) solid var(--a);border-radius:var(--r);padding:16px 15px;
  box-shadow:var(--o4) var(--o4) 0 -1px var(--a-s),var(--drop)}
.res-k{display:flex;align-items:center;gap:8px;font-family:var(--mo);font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--onk)}
.live-dot{width:11px;height:11px;flex:0 0 auto;background:var(--a);transform:rotate(45deg) scale(.9)}
.resume h1{margin:10px 0 0;font-size:1.3125rem;letter-spacing:-.032em;line-height:1.2;color:var(--near)}
.res-id{display:inline-block;background:var(--on-ink-14);border-radius:var(--r-x);padding:1px 7px;
  font-family:var(--mo);font-size:.8125rem;font-weight:700;vertical-align:2px;margin-right:5px}
.res-m{margin:9px 0 0;font-family:var(--mo);font-size:.7812rem;color:var(--onk);letter-spacing:-.02em}
.res-m b{color:var(--near);font-weight:700}
.res-bar{display:flex;gap:5px;margin:12px 0 0}
.res-bar span{flex:1;height:7px;border-radius:99px;background:var(--on-ink-14)}
.res-bar .on{background:var(--a)}
.btn-res{margin-top:14px;width:100%}
@media (min-width:600px){.btn-res{width:auto;min-width:260px}}
.res-c{margin:11px 0 0;font-family:var(--mo);font-size:.7188rem;color:var(--onk2)}

/* --------------------------------------------------------- module carousel */
.pathnav{margin-top:24px}
.mtabs{overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--sp) * -1);padding:4px var(--sp) 8px}
.mtabs::-webkit-scrollbar{display:none}
.mtabs ol{display:flex;gap:9px}
.mt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:46px;
  padding:6px 13px;border-radius:var(--r-s);background:var(--near);
  border:var(--bw) solid var(--edge);border-left:var(--rail) solid var(--mc-d);white-space:nowrap;
  box-shadow:var(--o1) var(--o1) 0 -1px var(--mc-s);
  transition:background .2s var(--ease),color .2s}
.mt:hover{border-color:var(--mc-d);background:var(--far)}
.mt:active{transform:translate3d(2px,2px,0);box-shadow:2px 2px 0 -1px var(--mc-s)}
.mt b{font-size:.8125rem;font-weight:750;letter-spacing:-.02em}
.mt span{font-family:var(--mo);font-size:.6875rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.mt.on,.mt[aria-current]{background:var(--a);border-color:var(--ink-24);color:var(--a-f);
  box-shadow:var(--o1) var(--o1) 0 -1px var(--a-s)}
.mt.on span,.mt[aria-current] span{color:var(--a-f)}
.m1,.m2,.m3,.m4{--mc:var(--c1);--mc-f:var(--c1-f);--mc-d:var(--c1-d);--mc-s:var(--c1-s)}
.deck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:6px calc(var(--sp) * -1) 0;padding:0 var(--sp) 16px;gap:16px;
  -webkit-overflow-scrolling:touch;align-items:flex-start;transition:height .38s var(--ease)}
.deck::-webkit-scrollbar{display:none}
.panel{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;background:var(--near);
  border:var(--bw) solid var(--edge);border-radius:var(--r);padding:13px;outline:0;
  box-shadow:var(--o3) var(--o3) 0 -1px var(--mc-s)}
/* the module banner: an ink lid the sessions sit under, rail in the module's hue */
.pn-h{background:var(--ink);color:var(--near);border-radius:var(--r-s);padding:12px 13px;
  border-left:var(--rail) solid var(--mc);box-shadow:var(--o1) var(--o1) 0 -1px var(--mc-s)}
.pn-k{font-family:var(--mo);font-size:.6875rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--onk2)}
.pn-h h3{margin:6px 0 0;font-size:1.1875rem;letter-spacing:-.03em;line-height:1.24;color:var(--near)}
.pn-p{display:flex;align-items:center;gap:9px;margin-top:10px;font-family:var(--mo);font-size:.7188rem;
  color:var(--onk);font-variant-numeric:tabular-nums}
.pn-bar{flex:0 0 84px;height:7px;border-radius:99px;background:var(--on-ink-14);overflow:hidden}
.pn-bar>span{display:block;height:100%;border-radius:99px;background:var(--mc)}

/* the nodes, and the beam between two of them. The beam takes the colour of the
   node above it, so the held stretch is green and everything past today is grey. */
.nodes{margin-top:26px;display:grid;gap:26px;position:relative}
.nd{position:relative;display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  padding:11px 12px;border:var(--bw) solid var(--edge);border-left:var(--rail) solid var(--nd,var(--edge));
  border-radius:var(--r-s);background:var(--near);
  box-shadow:var(--o2) var(--o2) 0 -1px var(--nds,var(--hair))}
.nd::after{content:"";position:absolute;left:calc(50% - 13px);top:calc(100% + 1px);width:26px;
  height:26px;transform:skewX(var(--sk,-20deg));border-radius:2px;
  background:linear-gradient(var(--bm,var(--hair)) 0 42%, var(--bm2,var(--edge)) 42% 100%)}
.nd:nth-child(even)::after{--sk:20deg}
.nd:last-child::after{display:none}
.nd-ic{display:grid;place-items:center;width:26px;padding-top:1px}
.ic{color:var(--nd,var(--ink2))}
.nd-b{min-width:0}
.nd-m{display:block;font-family:var(--mo);font-size:.6562rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ndm,var(--ink2))}
.nd-h{display:block;margin-top:4px}
.nd-t{display:flex;align-items:center;min-height:44px;font-size:1rem;font-weight:700;
  letter-spacing:-.022em;line-height:1.3;overflow-wrap:anywhere}
a.nd-t::after{content:"";position:absolute;inset:0;border-radius:var(--r-s);z-index:1}
a.nd-t:hover{color:var(--a-d)}
.nd-lk{color:var(--ink2);font-weight:650}
.nd-s{display:block;font-size:1rem;line-height:1.45;color:var(--ink2);margin-top:5px}
.nd-s b{font-weight:750;color:var(--ink)}
.nd-lk~.nd-s b,.s-locked .nd-s b,.s-skipped .nd-s b{color:var(--ink2)}
.nd-out{display:block;font-size:1rem;line-height:1.45;color:var(--a-d);background:var(--a-t);
  border:var(--bw) solid var(--a-e);border-radius:var(--r-x);padding:7px 9px;margin-top:7px}
.s-held{--nd:var(--held-d);--nds:var(--held-s);--bm:var(--held);--bm2:var(--held-d);--ndm:var(--held-d)}
.s-done{--nd:var(--done-d);--nds:var(--done-s);--bm:var(--done);--bm2:var(--done-d);--ndm:var(--done-d)}
.s-in_progress{--nd:var(--a);--nds:var(--a-s);--bm:var(--a);--bm2:var(--a-d);--ndm:var(--a-d)}
.s-needs_revision{--nd:var(--rev-d);--nds:var(--rev-s);--bm:var(--rev);--bm2:var(--rev-d);--ndm:var(--rev-d)}
.s-retake{--nd:var(--take-d);--nds:var(--take-s);--bm:var(--take);--bm2:var(--take-d);--ndm:var(--take-d)}
.s-scheduled{--nd:var(--sched-d);--nds:var(--sched-s);--bm:var(--sched);--bm2:var(--sched-d);--ndm:var(--sched-d)}
.s-skipped,.s-locked{--nd:var(--edge);--nds:var(--hair);--bm:var(--hair);--bm2:var(--edge)}
.s-held.nd{background:var(--held-t)}
.s-done.nd{background:var(--done-t)}
.s-needs_revision.nd{background:var(--rev-t)}
.s-retake.nd{background:var(--take-t)}
.s-scheduled.nd{background:var(--sched-t)}
.s-skipped.nd,.s-locked.nd{background:var(--far);border-style:dashed;border-left-style:solid;
  box-shadow:none}
.s-locked .nd-t,.s-skipped .nd-t{color:var(--ink2)}
.is-today{border-color:var(--a);background:var(--near);
  box-shadow:var(--o4) var(--o4) 0 -1px var(--a-s),var(--drop)}
.is-today .nd-t{color:var(--a-d)}
.marker{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;box-shadow:none;
  --bm:var(--a);--bm2:var(--a-d)}
.mk-l{flex:1 1 auto;height:0;border-top:var(--bw) dashed var(--a)}
.mk-t{order:-1;font-family:var(--mo);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a-d);border:var(--bw) solid var(--a);border-radius:99px;
  padding:6px 11px;background:var(--near)}
.deck-hint{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:4px;
  font-family:var(--mo);font-size:.7188rem;color:var(--ink2)}
.sw-ic{width:22px;height:12px;border-radius:99px;border:var(--bw) solid var(--edge);position:relative}
.sw-ic::after{content:"";position:absolute;top:2px;left:2px;width:6px;height:6px;border-radius:50%;
  background:var(--ink2);animation:swipe 2.4s var(--ease) infinite}
@keyframes swipe{0%,100%{transform:none}50%{transform:translateX(10px)}}
@media (min-width:900px){
  .panel{flex-basis:calc(50% - 8px);scroll-snap-align:start}
  .deck{margin-inline:-10px;padding-inline:10px}   /* room for the right panel's shadow */
  .mtabs{margin-inline:0;padding-inline:0}
  .deck-hint{display:none}
}

/* ---------------------------------------------------------- copy, tabs, fab */
.copy{margin-top:24px;background:var(--near);border:var(--bw) solid var(--edge);
  border-radius:var(--r);padding:14px;box-shadow:var(--o3) var(--o3) 0 -1px var(--c8-s)}
.copy-h{font-family:var(--mo);font-size:.7188rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink2)}
.copy-p{margin:11px 0 0;font-family:var(--mo);font-size:.9375rem;line-height:1.6;
  background:var(--far);border:var(--bw) solid var(--edge);border-radius:var(--r-s);padding:12px;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.btn-copy{margin-top:12px;width:100%;background:var(--near);color:var(--ink);border-color:var(--ink);
  box-shadow:0 var(--o1) 0 -1px var(--edge)}
.btn-copy:active{box-shadow:0 2px 0 -1px var(--edge)}
.btn-copy.ok{background:var(--held-d);border-color:var(--held-d);color:var(--near);
  box-shadow:0 var(--o1) 0 -1px var(--held-p)}
/* the bottom dock: the jump button lives inside it, above the tabs, on an opaque
   ground. It used to float over the list, where it sat on top of a node's own link. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--near);
  border-top:var(--bw) solid var(--edge);
  padding:8px var(--sp) calc(4px + env(safe-area-inset-bottom))}
.jump{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
  min-width:0;overflow-wrap:anywhere;text-align:center;
  margin:0 auto 8px;padding:0 15px;max-width:var(--col);
  border:var(--bw) solid var(--ink);border-radius:var(--r-s);background:var(--near);color:var(--ink);
  font-weight:750;font-size:.875rem;box-shadow:0 var(--o1) 0 -1px var(--edge);
  transition:color .2s,border-color .2s}
.jump:active{transform:translate3d(0,2px,0);box-shadow:0 2px 0 -1px var(--edge)}
/* already on today: the control stays exactly where it is, and says so */
.jump.away{color:var(--ink2);border-color:var(--edge);box-shadow:none}
.tabbar{display:flex;max-width:var(--col);margin-inline:auto}
.tabbar li{flex:1;min-width:0}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;
  min-width:0;overflow-wrap:anywhere;text-align:center;
  min-height:52px;font-size:.6562rem;font-weight:700;color:var(--ink2);border-radius:var(--r-x)}
.tabbar a[aria-current]{color:var(--a-d);background:var(--a-t);box-shadow:inset 0 3px 0 var(--a)}
/* the dock is phone chrome. The landing page drops its sticky bar at 800 and this has to
   agree: one row, the jump button beside the tabs instead of stacked above them. */
@media (min-width:760px){
  .dock{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
    padding:8px var(--sp) calc(8px + env(safe-area-inset-bottom))}
  .jump{margin:0;order:2;max-width:none}
  .tabbar{max-width:none;margin-inline:0;gap:4px;flex-wrap:wrap;justify-content:center}
  .tabbar li{flex:0 1 auto}
  .tabbar a{flex-direction:row;gap:8px;min-height:44px;padding:0 14px;font-size:.8438rem;
    border-radius:var(--r-s)}
  .pathpage{padding-bottom:5.75rem}
}
.tb-i{width:21px;height:21px;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.tb-0{-webkit-mask-image:var(--m0);mask-image:var(--m0)}
.tb-1{-webkit-mask-image:var(--m1);mask-image:var(--m1)}
.tb-2{-webkit-mask-image:var(--m2);mask-image:var(--m2)}
.tb-3{-webkit-mask-image:var(--m3);mask-image:var(--m3)}
.tb-4{-webkit-mask-image:var(--m4);mask-image:var(--m4)}
:root{
 --m0:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18c4-1 5-6 9-7s6 2 7 1'/%3E%3Ccircle cx='4' cy='18' r='2'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3C/svg%3E");
 --m1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v16H5z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
 --m2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v5h4M9 13h6M9 17h4'/%3E%3C/svg%3E");
 --m3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M3.5 19c.7-3 3-4.5 5.5-4.5s4.8 1.5 5.5 4.5M16 14.6c2 .4 3.6 1.8 4.2 4.4'/%3E%3C/svg%3E");
 --m4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.5 20c1-4 4-6 7.5-6s6.5 2 7.5 6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- print */
/* Chrome prints with background graphics off by default, so an ink plate prints white
   text on white paper and the headline disappears. On paper the plates go back to ink on
   white, the two scrollers unroll so all ten courses and all five session parts are there,
   and the fixed bars do not print at all. */
@media print{
  body{background:#fff;color:#000}
  .sticky,.dock,.skip,.arrows,.dots,.deck-hint,.rail-ui{display:none}
  .hero-plate,.fin-plate,.cert,.resume,.pn-h,.anat-total{background:#fff!important;color:#000!important;
    border:1px solid #000!important;box-shadow:none!important}
  .hero h1,.fin-plate .big,.cert-q,.resume h1,.pn-h h3,.hero .sub,.cert-n,.cond,.fin-plate .lede,
  .res-m,.res-c,.pn-k,.pn-p,.cd-d,.cd-t,.cd-n,.cd-c,.cert-h,.res-k,.anat-total .at-l,
  .anat-total .at-n,.seats-n,.seats-n b{color:#000!important}
  .seats-bar{display:none}
  .plate,.card-in,.strip li,.acc-list li,.aud-box,.diff-plate,.anat-p,.nd,.panel,.copy{
    box-shadow:none!important;border:1px solid #767676!important}
  .rail,.deck,.mtabs{overflow:visible!important}
  .track,.deck{display:block!important}
  .card,.panel{max-width:none!important;width:auto!important;page-break-inside:avoid;margin-bottom:8px}
  .anat-p{display:block!important;page-break-inside:avoid;margin-bottom:6px}
  .aud-l{display:block!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75rem}
}

/* ------------------------------------------------------- reflow, big text */
.card-in>*,.nd>*,.sw-i>*,.acc-list li>*,.strip li>*{min-width:0}
.card h3,.nd-t,.sw-tt b,.pn-h h3,.resume h1,.sw-paths b,.chip-n,.anat-h{overflow-wrap:anywhere}
.facts li,.pre,.nd-m,.res-m,.sw-b em,.cdown,.sticky-t{overflow-wrap:anywhere}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rail,.deck{scroll-snap-type:none}
  .btn:active,.arw:active,.chip:active,.jump:active,.btn-copy:active{transform:none!important}
}
@media (prefers-contrast:more){
  :root{--hair:var(--edge)}
}

/* team block. reuses figure.cert for its frame; these are the parts inside it. */
.team-fig{padding-bottom:18px}
/* the label is a caption for the pair below it, so it needs air under it or it reads as
   Julien's own line. 16px: clear of the avatars, still inside the same block. */
.team-fig .cert-h{margin-bottom:16px}
.members{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.member{display:flex;gap:14px;align-items:flex-start}
/* round, and both ringed in the action colour, the wordmark's first bar, so the two
   founders read as one pair rather than as two labelled things. The ring sits outside a
   2px gap in the surface colour, so it reads whatever the photograph's background happens
   to be. --avg is that surface: the ink plate here, paper on the team page. */
.ava{flex:0 0 auto;width:64px;height:64px;border-radius:50%;display:block;overflow:hidden;
  background:var(--ink-lift);
  box-shadow:0 0 0 2px var(--avg,var(--ink)),0 0 0 4px var(--av,var(--onk2))}
.ava img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
.ava.a1,.ava.a2{--av:var(--a)}
.member-b{min-width:0}
.member h3{margin:0 0 2px;font-size:1.05rem;line-height:1.25}
.member-r{margin:0 0 8px;font-size:.9375rem;color:var(--onk2);font-weight:600}
.member-t{margin:0 0 8px;font-size:1rem;line-height:1.55;color:var(--onk)}
.member-l{margin:0;display:flex;flex-wrap:wrap;gap:0}
.member-l a{font-size:.9375rem;font-weight:600;color:var(--a-s);min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center}
/* the 44px tap box pads the 19px icon; pull the first box back so the glyph sits
   flush left, and let neighbouring boxes overlap 6px so the visual gap halves
   while every box stays 44px for the tap-target gate */
.member-l a:first-child{margin-left:-12px}
.member-l a+a{margin-left:-6px}
.member-l svg{fill:currentColor}
.member-l .ic-li{width:19px;height:19px}
.member-l .ic-x{width:16px;height:16px}
.flags{display:inline-flex;gap:5px;margin-left:7px;vertical-align:-1px}
.flags .flg{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(127,127,127,.4)}
@media (min-width:760px){
  .members{grid-template-columns:1fr 1fr;gap:26px}
  .ava{width:76px;height:76px}
}
/* the way through to the full team page. On the ink plate, so the link colour is the
   pale end of the action ramp rather than the deep one. */
.team-more{margin:16px 0 0;padding-top:14px;border-top:var(--bw) solid var(--onk2)}
.team-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:1rem;
  font-weight:650;color:var(--a-s);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--onk2);transition:color .15s ease,text-decoration-color .15s ease}
.team-more a::after{content:"\2192";font-family:var(--mo);font-weight:700}
.team-more a:hover{color:var(--near);text-decoration-color:var(--near)}

/* team page */
.tp-hero{padding:26px 0 6px}
.tp-hero .big{margin-top:6px}
.tp-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:26px}
.tp-list .member{flex-direction:column}
.tp-list .member-r{color:var(--ink3)}
.tp-list .member-t{color:var(--ink2)}
.tp-list .member-l a{color:var(--a-p)}
.tp-note{margin:22px 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink3)}
.tp-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem}
.tp-list .ava{width:88px;height:88px;--avg:var(--paper)}
@media (min-width:760px){.tp-list{grid-template-columns:1fr 1fr;gap:34px}}

/* the programme: ten courses, one hue each in course order. Course 1 is the only one
   that is open, and the only one allowed a tag. The other nine are named with an
   honest note (.prog-f) that they are still being built; checkschema.py fails the
   build if the note goes while the names stay. */
.prog{padding:30px 0 6px}
.prog-l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px;
  counter-reset:prog}
.prog-l li{padding:14px 16px;background:var(--near);border:var(--bw) solid var(--edge);
  border-left:var(--rail) solid var(--nc-d);border-radius:var(--r);
  box-shadow:var(--o2) var(--o2) 0 -1px var(--nc-s)}
.prog-l h3{margin:0 0 4px;font-size:1.05rem;line-height:1.3}
.prog-l h3::before{counter-increment:prog;content:counter(prog,decimal-leading-zero);
  font-family:var(--mo);font-size:.75rem;font-weight:700;color:var(--nc-d);
  margin-right:8px;letter-spacing:.04em}
.prog-l p{margin:0;font-size:1rem;line-height:1.55;color:var(--ink2)}
.prog-l li:nth-child(1){--nc-d:var(--c1-d);--nc-s:var(--c1-s)}
.prog-l li:nth-child(2){--nc-d:var(--c2-d);--nc-s:var(--c2-s)}
.prog-l li:nth-child(3){--nc-d:var(--c3-d);--nc-s:var(--c3-s)}
.prog-l li:nth-child(4){--nc-d:var(--c4-d);--nc-s:var(--c4-s)}
.prog-l li:nth-child(5){--nc-d:var(--c5-d);--nc-s:var(--c5-s)}
.prog-l li:nth-child(6){--nc-d:var(--c6-d);--nc-s:var(--c6-s)}
.prog-l li:nth-child(7){--nc-d:var(--c7-d);--nc-s:var(--c7-s)}
.prog-l li:nth-child(8){--nc-d:var(--c8-d);--nc-s:var(--c8-s)}
.prog-l li:nth-child(9){--nc-d:var(--c9-d);--nc-s:var(--c9-s)}
.prog-l li:nth-child(10){--nc-d:var(--c10-d);--nc-s:var(--c10-s)}
.prog-l .prog-open{background:#fff;border-color:var(--nc-d)}
.tag{display:inline-block;margin-left:6px;padding:3px 8px 2px;vertical-align:2px;
  font-family:var(--mo);font-size:.6562rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--a-d);border-radius:var(--r-s)}
.fin-act{margin:16px 0 0}
/* pages with no sticky bar do not reserve room for one */
.landing.no-sticky{padding-bottom:0}
.sc-act{margin:18px 0 0}
.sc-note{margin:8px 0 0;font-family:var(--mo);font-size:.7812rem;color:var(--ink2)}
.prog-f,.who-f{margin:18px 0 0;font-size:1rem;line-height:1.55;color:var(--ink3)}
@media (min-width:760px){.prog-l{grid-template-columns:1fr 1fr}}

/* press. text wordmarks, not logo artwork: naming an outlet to state a true fact is
   fine, reproducing its logo is a trademark question we do not need to have. */
.press{padding:26px 0 6px}
.press-l{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 26px}
.press-l a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.pr-n{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.0625rem;
  letter-spacing:.01em;color:var(--ink3);filter:grayscale(1);transition:color .15s ease}
.press-l a:hover .pr-n,.press-l a:focus-visible .pr-n{color:var(--ink)}
.press-n{margin:14px 0 0;font-size:.9375rem;line-height:1.55;color:var(--ink3)}
@media (prefers-reduced-motion:reduce){.pr-n{transition:none}}

/* --------------------------------------------------------------- before this */
.press-seen{position:relative}
.pr-lead{margin:10px 0 0;color:var(--ink2);line-height:1.6}
/* The mastheads that covered Holberton, the school Julien built before this one.
   Logos, one ink, no dates and no links: the block is here to settle a reader, not to
   send them somewhere else. The articles behind every one of these marks are listed with
   their headlines, dates and URLs in VERIFICATION.md, which is where the proof lives.

   brightness(0) flattens every colour in the artwork to black and leaves alpha, masks and
   clip paths alone, so one rule turns nine differently coloured marks into one ink. The
   files are the upstream artwork, unedited.

   Heights are deliberately unequal. Equal cap height makes a 7.4:1 masthead nearly five
   times the width of a 1.5:1 monogram, and the row reads as one huge logo beside small
   ones. Each height is K / sqrt(aspect ratio), which gives every mark about the same
   optical area, clamped at the top so a square badge does not become a block. Computed
   from each file's own viewBox, not guessed. */
/* One line, always. The row is wider than any phone, so it scrolls, and a slow marquee
   carries it rather than asking the reader to swipe. Pure CSS: with scripting off it is
   an ordinary scrollable row, it pauses on hover and on keyboard focus, and
   prefers-reduced-motion stops it dead and leaves the row swipeable. */
/* The rail takes keyboard focus so it can be scrolled without a mouse, which makes it a
   target: it has to clear 44px even though the tallest mark is 36. The padding does it
   and gives the row air at the same time. */
.logo-rail{margin:12px 0 0;padding:8px 0;min-height:44px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
.logo-rail::-webkit-scrollbar{display:none}
.logo-rail:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r)}
.logo-track{display:flex;width:max-content;animation:logo-run 42s linear infinite}
.logo-rail:hover .logo-track,.logo-rail:focus-within .logo-track{animation-play-state:paused}
@keyframes logo-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-set{margin:0;padding:0 13px;list-style:none;display:flex;flex-wrap:nowrap;
  align-items:center;gap:26px}
.logo-set li{display:flex;align-items:center;flex:0 0 auto}
.logo-set img{display:block;width:auto;height:var(--h,20px);
  filter:grayscale(1) brightness(0);opacity:.62;transition:opacity .18s ease}
.logo-set li:hover img{opacity:1}
/* FT is a knockout: white letters inside a solid square. brightness(0) fills the letters
   in and leaves a black block, so this one mark keeps its own fill and is pushed to black
   and white by contrast instead. Same result on the page, one ink either way. */
.lg-financial-times img{filter:grayscale(1) contrast(1.45);opacity:.72}
.lg-financial-times img:hover{opacity:1}
/* GENERATED sizes, by tools_pressstrip.py. Do not hand-edit: rerun it. */
.lg-nyt{--h:22px}.lg-frenchweb{--h:20px}.lg-forbes{--h:31px}.lg-financial-times{--h:42px}.lg-la-tribune{--h:21px}.lg-fortune{--h:29px}.lg-zdnet{--h:42px}.lg-le-monde-informatique{--h:26px}.lg-fast-company{--h:23px}.lg-wef{--h:42px}.lg-les-echos{--h:29px}.lg-techcrunch{--h:42px}.lg-challenges{--h:30px}.lg-forbes-afrique{--h:30px}
@media (min-width:800px){.lg-nyt{--h:25px}.lg-frenchweb{--h:23px}.lg-forbes{--h:36px}.lg-financial-times{--h:48px}.lg-la-tribune{--h:24px}.lg-fortune{--h:33px}.lg-zdnet{--h:48px}.lg-le-monde-informatique{--h:30px}.lg-fast-company{--h:26px}.lg-wef{--h:48px}.lg-les-echos{--h:33px}.lg-techcrunch{--h:48px}.lg-challenges{--h:35px}.lg-forbes-afrique{--h:35px}
  .logo-set{gap:34px}}
@media (min-width:980px){.lg-nyt{--h:29px}.lg-frenchweb{--h:26px}.lg-forbes{--h:41px}.lg-financial-times{--h:54px}.lg-la-tribune{--h:27px}.lg-fortune{--h:37px}.lg-zdnet{--h:54px}.lg-le-monde-informatique{--h:34px}.lg-fast-company{--h:29px}.lg-wef{--h:54px}.lg-les-echos{--h:38px}.lg-techcrunch{--h:54px}.lg-challenges{--h:39px}.lg-forbes-afrique{--h:39px}
  .logo-set{gap:34px}}
/* END GENERATED sizes */
/* a logo the reader cannot make out is not proof of anything */
@media (prefers-contrast:more){.logo-set img{opacity:.9}}
@media (prefers-reduced-motion:reduce){.logo-set img{transition:none}}


/* ------------------------------------------------------------- who it is for */
/* Nine jobs, one hue each, walking the same spectrum the courses walk. A left rail
   rather than a badge, because a number here would imply an order that does not exist. */
.who{padding:30px 0 6px}
.who-l{margin-top:20px;display:grid;gap:10px}
.who-l li{background:var(--near);border:var(--bw) solid var(--edge);
  border-left:var(--rail) solid var(--wc-d);border-radius:var(--r);padding:13px 15px;
  box-shadow:var(--o2) var(--o2) 0 -1px var(--wc-s)}
.who-l h3{margin:0;font-size:1.0312rem;letter-spacing:-.025em;line-height:1.28;
  overflow-wrap:anywhere}
.who-l p{margin:6px 0 0;font-size:1rem;line-height:1.46;color:var(--ink2)}
.who-l li:nth-child(1){--wc-d:var(--c1-d);--wc-s:var(--c1-s)}
.who-l li:nth-child(2){--wc-d:var(--c2-d);--wc-s:var(--c2-s)}
.who-l li:nth-child(3){--wc-d:var(--c3-d);--wc-s:var(--c3-s)}
.who-l li:nth-child(4){--wc-d:var(--c4-d);--wc-s:var(--c4-s)}
.who-l li:nth-child(5){--wc-d:var(--c5-d);--wc-s:var(--c5-s)}
.who-l li:nth-child(6){--wc-d:var(--c6-d);--wc-s:var(--c6-s)}
.who-l li:nth-child(7){--wc-d:var(--c7-d);--wc-s:var(--c7-s)}
.who-l li:nth-child(8){--wc-d:var(--c8-d);--wc-s:var(--c8-s)}
.who-l li:nth-child(9){--wc-d:var(--c9-d);--wc-s:var(--c9-s)}
.who-l li:nth-child(10){--wc-d:var(--c10-d);--wc-s:var(--c10-s)}
.who-l li:nth-child(11){--wc-d:var(--c1-d);--wc-s:var(--c1-s)}
@media (min-width:620px){.who-l{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.who-l{grid-template-columns:repeat(3,1fr)}}

/* ------------------------------------------------------------------------ faq */
/* <details> and nothing else: every answer is in the served HTML whether it is open
   or shut, so a reader with no JavaScript, a printer and a crawler all see the same
   words. The marker is two background bars, so there is no icon to load. */
.faq{padding:30px 0 6px}
.fq-l{margin-top:20px;display:grid;gap:8px}
.fq-l>li{background:var(--near);border:var(--bw) solid var(--edge);border-radius:var(--r);
  box-shadow:var(--o2) var(--o2) 0 -1px var(--hair)}
.fq-l details{border-radius:var(--r)}
.fq-l summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 14px;
  cursor:pointer;list-style:none;border-radius:var(--r)}
.fq-l summary::-webkit-details-marker{display:none}
.fq-l summary h3{margin:0;font-size:1.0312rem;font-weight:750;letter-spacing:-.025em;
  line-height:1.3;overflow-wrap:anywhere}
.fq-l summary::after{content:"";flex:0 0 auto;margin-left:auto;width:24px;height:24px;
  border-radius:var(--r-x);border:var(--bw) solid var(--edge);background-color:var(--sunk);
  background-image:linear-gradient(var(--ink2),var(--ink2)),linear-gradient(var(--ink2),var(--ink2));
  background-repeat:no-repeat;background-position:center;background-size:11px 2px,2px 11px;
  transition:background-size .2s var(--ease),background-color .2s,border-color .2s}
.fq-l summary:hover{background:var(--far)}
.fq-l summary:hover::after{border-color:var(--ink3)}
.fq-l details[open]>summary::after{background-size:11px 2px,2px 0;border-color:var(--a-d);
  background-color:var(--a-t)}
.fq-l details[open]>summary h3{color:var(--a-p)}
.fq-a{padding:0 14px 15px}
.fq-a p{margin:0;font-size:1rem;line-height:1.55;color:var(--ink2)}
/* an inline link in an answer is one line of text tall. The invisible ::after pad
   brings its hit area to 44px without moving the line. */
.fq-a a{position:relative}
.fq-a a::after{content:"";position:absolute;left:-8px;right:-8px;top:-13px;bottom:-13px}
@media (min-width:760px){
  .fq-l summary{padding:14px 18px}
  .fq-a{padding:0 18px 18px}
}
/* the paper hero. Adopted 2026-08-24 from the hero tournament, variant 01 "Paper flip"
   (/hero/1.html): the commitment plate turns to paper, and the headline is set as the
   Call & Response motif writ large: the call in an ink bar, the answer arriving beneath
   it in the one violet bar, stepped right by the mark's own ratio (left edge at ~48% of
   the ink bar, gap .375 of bar height), ink first and violet second as BRAND.md orders
   the bars. The page now ends on ink (the final plate) instead of starting on it.
   Every rule is scoped under .hero-paper because the other nine gallery pages in
   src/hero/ build their own heroes on the dark base above; the base stays as their
   substrate and this block must not leak into them. */
.hero-paper{padding:10px 0 2px}
.hero-paper .hero-plate{background:var(--near);border-color:var(--edge);color:var(--ink);
  padding:24px 20px 26px;
  box-shadow:var(--o5) var(--o5) 0 -1px var(--a-s),var(--drop)}
.hero-paper .hero-plate :focus-visible{outline-color:var(--a)}
.hero-paper h1{display:flex;flex-direction:column;align-items:flex-start;gap:.55em;
  width:fit-content;max-width:100%;color:var(--ink);
  /* The calc keeps the call pill on one line: the plate's fixed padding eats
     proportionally more of a small screen, so pure vw can never fit at 380. Measured
     one line from 355px up; the .875rem floor keeps it readable below that. */
  font-size:clamp(.875rem,calc(5vw - 4px),2.5rem)}
@media (max-width:759px){
  /* Under 760 the pills hang 9px into the plate padding, buying 18px of width, which
     is what lets the font run past 5vw and still hold the line. The 2.2rem
     cap covers 640-759, where the wrap column stops growing with the viewport. */
  .hero-paper h1{font-size:clamp(.9625rem,calc(5.94vw - 4.4px),2.2rem);
    margin-inline:-9px;max-width:calc(100% + 18px)}
}
.hero-paper .h1-call,.hero-paper .h1-resp{display:block;border-radius:999px;padding:.14em .5em .2em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-paper .h1-call{background:var(--ink);color:var(--near)}
.hero-paper .h1-resp{background:var(--a-d);color:var(--near);align-self:flex-start;margin-left:2.6em}
@media (prefers-reduced-motion:no-preference){
  .hero-paper .h1-resp{animation:reply .5s var(--ease) .18s backwards}
  @keyframes reply{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
}
.hero-paper .sub{color:var(--ink2)}
.hero-paper .sub b{color:var(--ink);display:block;margin-top:.35em}
.hero-paper .hero-cred{display:flex;gap:11px;align-items:center;color:var(--ink2);margin-top:14px}
.hero-paper .cred-ava{flex:0 0 auto;display:flex}
.hero-paper .cred-ava img{width:38px;height:38px;border-radius:50%;border:2px solid var(--near);
  outline:var(--bw) solid var(--edge);object-fit:cover;display:block}
.hero-paper .cred-ava img+img{margin-left:-11px}
.hero-paper .hero-r{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.hero-paper .hero-r>*{margin:0}
.hero-paper .hero-r .seats{margin-top:-6px}
.hero-paper .hero-r .signup{margin-top:4px}
.hero-paper .cdown{display:block}
.hero-paper .cdown .cd-t{display:inline;color:var(--ink2);text-wrap:pretty}
.hero-paper .cdown .cd-d{display:inline;color:var(--ink2)}
.hero-paper .sub,.hero-paper .hero-cred{text-wrap:pretty}
.hero-paper .cdown .cd-c{color:var(--ink2);font-weight:inherit}
.hero-paper .cdown .cd-n{color:var(--ink)}
.hero-paper .signup input{background:var(--near);color:var(--ink);border-color:var(--edge);
  box-shadow:inset 0 2px 3px var(--ink-08)}
.hero-paper .signup input::placeholder{color:var(--ink3)}
.hero-paper .signup input:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--a-s)}
.hero-paper .perks{display:flex;flex-wrap:wrap;gap:3px 0;align-items:baseline}
.hero-paper .perks li{font-family:var(--mo);font-size:.9375rem;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.hero-paper .perks li:not(:last-child)::after{content:"\00B7";margin:0 .5em;color:var(--ink3)}
@media (max-width:479px){
  .hero-paper .perks{display:grid;grid-template-columns:auto auto;gap:3px 16px}
  .hero-paper .perks li::after{content:none!important}
  .hero-paper .hero-cred{font-size:.875rem}
}
.hero-paper .seats-bar{background:var(--ink-08)}
.hero-paper .seats-bar>span{background:var(--a-d)}
.hero-paper .seats-n{color:var(--ink2)}
.hero-paper .seats-n b{color:var(--ink)}
@media (min-width:760px){.hero-paper .hero-plate{padding:26px 24px 28px}}
@media (min-width:1000px){
  .hero-paper .hero-plate{padding:36px 32px;grid-template-columns:1.1fr .9fr;
    grid-template-rows:auto auto 1fr;gap:0 44px}
  /* 2.625rem keeps the call line whole: at 2.75rem it needs 833px against the 814px box. */
  .hero-paper h1{grid-column:1/-1;grid-row:1;font-size:2.625rem;width:fit-content;max-width:100%}
  .hero-paper .sub{grid-column:1;grid-row:2;margin-top:24px}
  .hero-paper .hero-cred{grid-column:1;grid-row:3;align-self:start;margin-top:12px}
  .hero-paper .cdown{max-width:34ch}
  .hero-paper .hero-r{grid-column:2;grid-row:2/4;align-self:start;justify-content:flex-start;
    margin-top:24px}
}

/* Carried over from website/src/style.css by website/deploy/publish_lp.py: the rule that puts the honeypot
   off screen. Without it the signup forms this host wires to /seat would show a
   visible box asking a real visitor to leave it empty. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}