/* Avanti Academy beta: same family as the website (fonts, grid, off-white), red-led, own header. */
@font-face{font-family:'Gillius ADF';font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/gillius-adf-regular.woff2) format('woff2')}
@font-face{font-family:'Gillius ADF';font-style:normal;font-weight:700;font-display:swap;src:url(../../assets/fonts/gillius-adf-bold.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url(../../assets/fonts/source-sans-3.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:200 900;font-display:swap;src:url(../../assets/fonts/source-sans-3-italic.woff2) format('woff2')}

:root{
  --red:#DE0000;--red-d:#B80000;--red-tint:#F7E2E2;
  --ink:#3A4245;--near:#1A1A1A;--body:#333333;--mute:#4A5356;
  --paper:#F5F3F0;--cream:#E8E0D0;--stone:#DEDBD7;--white:#FFFFFF;
  --sand-deep:#D8CCB6;   /* v65 (R12-1): the darker sand, a deeper tint of the stone family */
  --line:rgba(26,26,26,.14);--pad:28px;--max:1440px;
}
html{font-size:16px}
html[data-size="l"]{font-size:18px}
html[data-size="xl"]{font-size:20px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}
small{font-size:max(1rem,.85em)}
.mono{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:60;background:var(--near);color:#fff;padding:10px 14px}
:focus-visible{outline:2px solid var(--near);outline-offset:3px}
[hidden]{display:none !important}
/* On the dark parts of the page the keyboard focus ring is white, so it can be seen */
.crossbar :focus-visible,.tasters :focus-visible,.soc-band :focus-visible,.afoot :focus-visible,.pl-lock :focus-visible,.aa-toast :focus-visible,.skip:focus-visible{outline-color:#fff}
em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-weight:400;letter-spacing:0}

/* ---------- header: charcoal crossbar + red academy bar ---------- */
.crossbar{background:var(--ink);color:var(--cream);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:16px;padding:0 var(--pad);min-height:36px;font-size:1rem}
.crossbar>a,.cb-r{display:inline-flex;align-items:center;min-height:36px}
.crossbar a:hover{color:#fff}
.crossbar>a{padding:0 6px;margin:0 -6px}
.crossbar>a:focus-visible{outline-offset:-2px}
.sz{display:flex;gap:2px}
.sz button{background:none;border:1px solid rgba(232,224,208,.35);color:var(--cream);font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:16px;padding:3px 8px;min-width:40px}
.sz button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
.sz button:focus-visible{outline-offset:1px}
.ahead{background:var(--red);color:#fff;display:flex;align-items:stretch;justify-content:space-between;position:sticky;top:0;z-index:30;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.logo{display:flex;align-items:center;padding:0 var(--pad) 0 calc(var(--pad) - 14px)}
.logo img{height:68px;width:auto}
.anav{display:flex;align-items:stretch}
.anav a{display:flex;align-items:center;padding:0 20px;font-size:1rem;font-weight:500;color:#fff;border-left:1px solid rgba(255,255,255,.22);transition:background .15s}
.anav a:hover{background:var(--red-d)}
.anav a.on{box-shadow:inset 0 -4px 0 var(--red)}
.anav a.ask{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-size:1.25rem;font-weight:400}
.anav a.signin{background:var(--near);font-weight:600;padding:0 26px}
.anav a.signin:hover{background:#000}
.menu-btn{display:none;background:none;border:0;flex-direction:column;justify-content:center;gap:5px;padding:0 var(--pad)}
.menu-btn i{display:block;width:24px;height:1.5px;background:#fff}

/* ---------- shared bits ---------- */
.btn{display:inline-flex;align-items:center;gap:20px;background:var(--red);color:#fff;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;padding:17px 22px;border:0;transition:background .15s,gap .15s}
.btn b{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:300;font-size:1.25rem;line-height:0}
.btn:hover{background:var(--red-d);gap:28px}
.btn.dark{background:var(--ink)}.btn.dark:hover{background:var(--near)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{background:#fff;color:var(--red)}.btn.light:hover{background:var(--paper)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.k{color:var(--red);display:block;margin-bottom:18px}
.link{display:inline-flex;gap:14px;font-weight:600;color:var(--red);border-bottom:1.5px solid var(--red);padding-bottom:5px;margin-top:20px}
.sh{max-width:var(--max);padding:0 var(--pad);margin:0 auto 34px}
.sh h2,.blk2 h2,.cta2 h2{font-size:clamp(2rem,3.6vw,3.5rem);font-weight:500;letter-spacing:0;line-height:.98}
.sh h2 em,.blk2 h2 em,.aph h1 em,.ahero h1 em{color:var(--red)}
.sh p{margin-top:16px;max-width:560px;font-size:1.0625rem;line-height:1.55;color:var(--body)}
.prose{max-width:760px}
.prose p{font-size:1.0625rem;line-height:1.68;color:var(--body);margin-bottom:1em}
.prose p.big{font-size:clamp(1.25rem,1.8vw,1.625rem);line-height:1.42;color:var(--ink);letter-spacing:0}

/* ---------- home hero ---------- */
.ahero{display:grid;grid-template-columns:repeat(12,1fr);max-width:var(--max);margin:0 auto;padding:30px var(--pad) 70px;gap:0 24px;position:relative}
.hx{grid-column:1/-1;color:var(--mute)}
.ahero h1{grid-column:1/-1;font-weight:500;font-size:clamp(3.5rem,9vw,9rem);line-height:.88;letter-spacing:0;margin-top:clamp(30px,5vw,70px)}
.ahero h1 span{display:block}
.ahero h1 .s{padding-left:8%}
.ahero h1 em{letter-spacing:0}
.hc{grid-column:1/7;margin-top:44px}
.hc p{font-size:1.1875rem;line-height:1.55;color:var(--body);max-width:540px}
.hpanel{grid-column:9/13;align-self:end;background:var(--red);color:#fff;padding:28px 28px 26px;display:flex;flex-direction:column;gap:10px;margin-top:44px;position:relative}
.hpanel::before{content:"";position:absolute;left:-10px;top:10px;bottom:-10px;width:10px;background:var(--ink)}
.hpanel b{font-size:2.25rem;font-weight:500;letter-spacing:0;line-height:1}
.hpanel p{font-size:1rem;line-height:1.5}
.hpanel a{font-weight:600;border-bottom:1.5px solid #fff;align-self:flex-start;padding-bottom:4px;margin-top:6px}

/* ---------- red figures band ---------- */
.aband{display:grid;grid-template-columns:repeat(6,1fr);background:var(--red);color:#fff}
.aband>div{padding:40px var(--pad) 36px;border-right:1px solid rgba(255,255,255,.25)}
.aband>div:last-child{border-right:0}
.aband b{display:block;font-size:clamp(2rem,3.6vw,3.5rem);font-weight:500;letter-spacing:0;line-height:1}
.aband .mono{display:block;margin-top:12px}
@media (min-width:861px) and (max-width:1100px){.aband{grid-template-columns:repeat(3,1fr)}.aband>div:nth-child(3n){border-right:0}.aband>div:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.25)}}
@media (min-width:861px) and (max-width:1300px){html[data-size="l"] .aband,html[data-size="xl"] .aband{grid-template-columns:repeat(3,1fr)}html[data-size="l"] .aband>div:nth-child(3n),html[data-size="xl"] .aband>div:nth-child(3n){border-right:0}html[data-size="l"] .aband>div:nth-child(-n+3),html[data-size="xl"] .aband>div:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.25)}}

/* ---------- three paths ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--max);margin:0 auto;padding:90px var(--pad) 40px;gap:0}
.paths .sh{grid-column:1/-1;padding:0;margin:0 0 40px}
.path{padding:30px 28px 34px;border-top:4px solid var(--ink);background:#fff;margin-right:-1px;border-right:1px solid var(--line);transition:border-color .15s}
a.path:hover{border-top-color:var(--red)}
.path .mono{color:var(--red)}
.path h3,.path h2{font-size:1.75rem;font-weight:500;letter-spacing:0;margin:16px 0 12px;line-height:1.05}
.path p{font-size:1rem;line-height:1.55;color:var(--body)}
.paths.three{padding-top:60px;padding-bottom:80px}

/* ---------- academy tiles ---------- */
.acads{padding:70px 0 90px}
.agrid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.atile{position:relative;padding:30px 28px 70px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:250px;transition:background .15s,color .15s;background:var(--paper)}
.atile .mono{color:var(--mute)}
.atile h3{font-size:clamp(2rem,3vw,2.75rem);font-weight:500;letter-spacing:0;margin:14px 0 12px;line-height:1}
.atile p{font-size:1rem;line-height:1.5;color:var(--body);max-width:360px}
.atile .ac{position:absolute;left:28px;bottom:26px;color:var(--red)}
.atile .arr{position:absolute;right:26px;bottom:14px;font-size:2.5rem;font-weight:300;color:var(--red);transition:transform .15s}
.atile:hover{background:var(--red);color:#fff}
.atile:hover .mono,.atile:hover p,.atile:hover .ac,.atile:hover .arr{color:#fff}
.atile:hover .arr{transform:translateX(6px)}
.atile:first-child{background:var(--red);color:#fff}
.atile:first-child .mono,.atile:first-child p,.atile:first-child .ac,.atile:first-child .arr{color:#fff}
.atile:first-child:hover{background:var(--red-d)}

/* ---------- popular row ---------- */
.pops{padding:0 0 90px}
.poprow{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pop{background:#fff;padding:24px 22px 22px;display:flex;flex-direction:column;gap:10px;border-left:4px solid var(--red);transition:transform .15s,box-shadow .15s}
.pop:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(26,26,26,.08)}
.pop .k{margin:0}
.pop h3{font-size:1.375rem;font-weight:500;letter-spacing:0;line-height:1.1}
.pop p{font-size:1rem;color:var(--mute);line-height:1.45;flex:1}
.pop .d{color:var(--ink)}

/* ---------- tasters (charcoal block) ---------- */
.tasters{background:var(--ink);color:#fff;padding:80px 0 90px}
.sh.light .k{color:#fff}
.sh.light h2 em{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:4px;text-underline-offset:8px}
.sh.light p{color:#fff}
.tlist{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18)}
.tst{display:flex;gap:16px;align-items:flex-start;padding:22px 20px;background:var(--ink);transition:background .15s}
.tst:hover{background:var(--near)}
.tst .play{flex:none;width:38px;height:38px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:1rem;padding-left:3px}
.tst b{display:block;font-weight:500;font-size:1.0625rem;line-height:1.25}
.tst small{display:block;margin-top:6px;color:var(--cream);font-size:1rem}

.why{display:grid;grid-template-columns:5fr 7fr;max-width:var(--max);margin:0 auto;padding:90px var(--pad)}
.why .sh{padding:0;margin:0}

/* ---------- inner page head ---------- */
.aph{max-width:var(--max);margin:0 auto;padding:26px var(--pad) 60px;border-bottom:1px solid var(--line)}
.crumbs{color:var(--mute)}
.crumbs a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{text-decoration:underline}
.aph h1{font-size:clamp(3rem,7.6vw,7.5rem);line-height:.92;letter-spacing:0;font-weight:500;margin-top:clamp(30px,5vw,70px);max-width:1200px}
.aph .lede{margin-top:30px;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.5;color:var(--body);max-width:760px}
.aph .lede em{color:var(--ink);font-size:1.1em}
.aph .meta{display:flex;flex-wrap:wrap;gap:0;margin-top:30px}
.aph .meta span{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;background:#fff;border:1px solid var(--line);margin:0 -1px -1px 0}
.aph .meta span:first-child{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- side + body blocks ---------- */
.blk2{display:grid;grid-template-columns:4fr 8fr;max-width:var(--max);margin:0 auto;border-bottom:1px solid var(--line)}
.blk2.alt{max-width:none;background:#fff;padding:0 max(0px,calc((100vw - var(--max))/2))}
.blk2 .side{padding:64px var(--pad)}
.blk2 .side h2{font-size:clamp(1.875rem,3vw,2.75rem);position:relative}
.blk2 .side h2::before{content:"";position:absolute;left:0;top:-16px;width:52px;height:4px;background:var(--red)}
.blk2 .side p{margin-top:20px;font-size:1rem;line-height:1.6;color:var(--body);max-width:360px}
.blk2 .side p a{color:var(--red);border-bottom:1px solid currentColor}
.blk2 .body{padding:64px var(--pad) 72px;min-width:0}
.k2{display:block;color:var(--mute);margin-bottom:16px}

/* topic rows */
.tlist2{border-top:1.5px solid var(--ink)}
.trow{display:grid;grid-template-columns:1fr 110px 130px;gap:14px;align-items:center;padding:18px 12px;border-bottom:1px solid var(--line);border-left:4px solid transparent;transition:background .15s,border-color .15s}
.trow:hover{background:#fff;border-left-color:var(--red)}
.trow .tn{color:var(--red)}
.trow b{display:block;font-size:1.375rem;font-weight:500;letter-spacing:0;line-height:1.15}
.trow small{display:block;color:var(--mute);margin-top:4px;font-size:1rem}
.trow .tf{color:var(--mute)}
.st{justify-self:end;padding:6px 10px;border:1px solid var(--stone);color:var(--mute);white-space:nowrap}
.st.on{background:var(--red);border-color:var(--red);color:#fff}

/* programme cards */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pcard{background:var(--paper);padding:24px 22px 20px;border-top:4px solid var(--ink);display:flex;flex-direction:column;gap:8px;transition:border-color .15s,background .15s}
.blk2:not(.alt) .pcard{background:#fff}
.pcard:hover{border-top-color:var(--red)}
.pcard.fl{border-top-color:var(--red)}
.pcard .flag{color:var(--red)}
.pcard h3{font-size:1.5rem;font-weight:500;letter-spacing:0;line-height:1.05}
.pcard .sub{color:var(--mute);font-size:1rem;flex:1}
.pm{display:flex;gap:14px;flex-wrap:wrap;color:var(--ink);margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}

/* ways-to-take-it table */
.ways{width:100%;border-collapse:collapse}
.ways th{text-align:left;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:400;padding:10px 8px;border-bottom:1.5px solid var(--ink)}
.ways td{padding:16px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.ways tr:hover td{background:#fff}
.ways td:first-child{white-space:nowrap;width:1%}
.ways b{display:block;font-weight:500;font-size:1.0625rem;letter-spacing:0}
.ways small{display:block;color:var(--mute);font-size:1rem;margin-top:3px}
.ways .tm{display:block;margin-top:7px;color:var(--mute)}
.ways .rg{white-space:nowrap}
.ways .rg .mono{display:block;color:var(--mute);margin-bottom:6px}
.sq{display:flex;gap:3px;flex-wrap:wrap;max-width:200px}
.sq i{width:10px;height:10px;border:1px solid var(--ink);display:block}
.sq i.f{background:var(--red);border-color:var(--red)}
.go{color:var(--red);white-space:nowrap;font-weight:500}
.go:hover{text-decoration:underline}
.go.off{color:var(--mute)}
.chip{display:inline-block;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;color:#fff;background:var(--ink)}
.chip.t-taster{background:#fff;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.chip.t-bitesize{background:var(--red-tint);color:var(--near)}
.chip.t-focus{background:var(--stone);color:var(--near)}
.chip.t-explore{background:var(--ink)}
.chip.t-immerse{background:var(--red)}

/* module lists */
.mods{list-style:none;border-top:1.5px solid var(--ink)}
.mods li{display:grid;grid-template-columns:56px 1fr auto;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.mods .mn{color:var(--red)}
.mods .mt{font-size:1.0625rem;line-height:1.35}
.mods .mt b{display:block;font-weight:500;font-size:1.1875rem;letter-spacing:0}
.mods .mt small{display:block;color:var(--mute);font-size:1rem;margin-top:4px}
.mods .mt small.mono{color:var(--mute);font-size:1rem;margin-top:8px}
.mods .mt small a{color:var(--red)}
.mods .mm{color:var(--mute)}

/* levels */
.levels{max-width:var(--max);margin:0 auto;padding:60px var(--pad) 80px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-bottom:1px solid var(--line)}
.lv{padding:26px 22px 30px;border-left:1px solid var(--line);position:relative}
.lv:nth-child(n){padding-top:calc(26px + var(--i,0) * 1px)}
.lv h3,.lv h2{font-size:2rem;font-weight:500;letter-spacing:0;margin:18px 0 6px}
.lv .mono{color:var(--red)}
.lv p{margin-top:14px;font-size:1rem;line-height:1.5;color:var(--body)}
.lv:nth-child(2){margin-top:30px}.lv:nth-child(3){margin-top:60px}.lv:nth-child(4){margin-top:90px}.lv:nth-child(5){margin-top:120px}

/* red cta */
.cta2{background:var(--red);color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding:60px max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
.cta2 h2{max-width:820px}
.cta2 h2 em{color:#fff}
.nf{display:flex;gap:0;flex-wrap:wrap}
.nf input{font:inherit;font-size:1rem;padding:16px;border:0;min-width:260px}
.nf p{font-size:1.0625rem}

/* footer */
.afoot{background:var(--near);color:var(--cream);margin-top:0}
.af-big{display:flex;align-items:center;gap:30px;padding:44px var(--pad) 30px;border-bottom:1px solid rgba(232,224,208,.18);flex-wrap:wrap}
.af-big img{height:84px;width:auto}
.af-big p{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-size:1.75rem;line-height:1.15;color:#fff}
.af-cols{display:grid;grid-template-columns:repeat(3,1fr);padding:30px var(--pad);gap:24px}
.af-cols div{display:flex;flex-direction:column;gap:12px}
.af-cols b{color:#fff;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.af-cols a:hover{color:#fff}
.af-legal{padding:0 var(--pad) 96px;font-size:1rem;line-height:1.6;color:#E8E0D0;text-transform:none}
.af-base{display:flex;justify-content:space-between;padding:18px var(--pad);border-top:1px solid rgba(232,224,208,.18)}

/* my learning */
.mlist{display:grid;gap:12px}
.mlist .empty a{color:var(--red);border-bottom:1px solid currentColor}
.mli{display:grid;grid-template-columns:1fr 220px auto;gap:20px;align-items:center;background:#fff;padding:20px 22px;border-left:4px solid var(--red)}
.mli b{font-size:1.25rem;font-weight:500}
.bar{height:6px;background:var(--stone);position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--red);width:0;transition:width .3s}

/* ---------- Socrates panel ---------- */
.soc{position:fixed;inset:0;background:rgba(26,26,26,.55);z-index:50;display:flex;justify-content:flex-end}
.soc[hidden]{display:none}
.soc-card{background:var(--paper);width:min(460px,100%);height:100%;overflow:auto;padding:34px 30px;position:relative;border-left:8px solid var(--red)}
.soc-x{position:absolute;right:16px;top:12px;background:none;border:0;font-size:2rem;color:var(--ink)}
.soc-k{color:var(--red)}
.soc h2{font-size:2.25rem;font-weight:500;letter-spacing:0;line-height:1;margin:16px 0 14px}
.soc p{font-size:1rem;line-height:1.55;color:var(--body)}
.soc-q{margin:26px 0 10px;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{background:#fff;border:1.5px solid var(--ink);padding:10px 14px;font-size:1rem;color:var(--ink)}
.chips button:hover,.chips button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- player ---------- */
body.is-player{height:100vh;overflow:hidden}
.is-player .ahead .logo img{height:52px}
.player{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - 36px - 52px);min-height:0}
.pl-side{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.pl-top{padding:18px 20px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.pl-top .back{color:var(--red)}
.pl-prog{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:4px}
.cert{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--mute);line-height:1.5}
.cert.done{color:var(--red)}
.pl-mods{list-style:none;overflow:auto;flex:1}
.pl-mods>li{border-bottom:1px solid var(--line)}
.pl-mods .mh{width:100%;display:grid;grid-template-columns:40px 1fr auto;gap:8px;text-align:left;background:none;border:0;padding:14px 20px;align-items:baseline;color:var(--ink)}
.pl-mods .mh:hover{background:var(--paper)}
.pl-mods .mh .mono{color:var(--red)}
.pl-mods .mh b{font-weight:500;font-size:1rem;line-height:1.3}
.pl-mods .mh small{color:var(--mute);font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem}
.pl-mods li.cur>.mh{background:var(--red-tint)}
.pl-mods li.off{opacity:.42}
.pl-mods li.off .mh small{grid-column:2/-1}
.sl-list{list-style:none;padding:0 0 10px 60px;display:none}
.pl-mods li.open .sl-list{display:block}
.sl-list button{display:flex;gap:10px;align-items:center;width:100%;background:none;border:0;text-align:left;padding:6px 20px 6px 0;font-size:1rem;color:var(--body)}
.sl-list button::before{content:"";width:9px;height:9px;border:1px solid var(--ink);flex:none}
.sl-list button.w::before{background:var(--ink)}
.sl-list button.now{color:var(--red);font-weight:600}
.sl-list button.now::before{border-color:var(--red);background:var(--red)}
.pl-main{overflow:auto;padding:22px 34px 30px;display:flex;flex-direction:column;gap:16px;min-width:0}
.pl-head .mono{color:var(--mute)}
.pl-head h1{font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:500;letter-spacing:0;margin-top:6px;line-height:1.05}
.stage{background:var(--near);position:relative;width:100%;max-width:1100px}
.slide{aspect-ratio:16/9;background:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:6% 8%;border-top:10px solid var(--red)}
.slide::after{content:"";position:absolute;right:0;top:0;bottom:0;width:22%;background:var(--paper)}
.sl-k{color:var(--red);position:relative;z-index:1}
.sl-t{font-size:clamp(1.5rem,3.4vw,3.25rem);font-weight:500;letter-spacing:0;line-height:1;margin-top:18px;max-width:72%;position:relative;z-index:1;color:var(--ink)}
.sl-n{color:var(--mute);margin-top:22px;position:relative;z-index:1}
.sl-logo{position:absolute;right:3%;bottom:6%;height:12%;width:auto;z-index:1}
.sl-bar{height:5px;background:#333}
.sl-bar i{display:block;height:100%;width:0;background:var(--red)}
.pl-ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:1100px}
.pc{background:#fff;border:1.5px solid var(--ink);color:var(--ink);height:46px;min-width:46px;font-size:1.125rem;padding:0 14px}
.pc:hover{background:var(--ink);color:#fff}
.pc.play{background:var(--red);border-color:var(--red);color:#fff;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;padding:0 22px}
.pc.play:hover{background:var(--red-d)}
.pl-ctrl .code{color:var(--mute);margin-left:10px}
.pl-ctrl .auto{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--mute)}
.caps{background:#fff;padding:18px 22px;border-left:4px solid var(--ink);max-width:1100px}
.caps .k{color:var(--mute);margin-bottom:8px}
.caps p{font-size:1.0625rem;line-height:1.6;color:var(--body)}
.demo-note{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--mute)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .anav a{padding:0 12px;font-size:1rem}
  .agrid{grid-template-columns:repeat(2,1fr)}
  .poprow,.tlist{grid-template-columns:repeat(2,1fr)}
  .levels{grid-template-columns:repeat(3,1fr)}
  .lv:nth-child(n){margin-top:0}
  .player{grid-template-columns:290px 1fr}
}
@media (max-width:860px){
  :root{--pad:16px}
  .menu-btn{display:flex}
  .logo img{height:54px}
  .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream)}
  .anav.open{display:flex}
  .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
  .anav a.signin{padding:0 12px}
  .ahero{grid-template-columns:1fr}
  .ahero>*{grid-column:1/-1 !important}
  .ahero h1 .s{padding-left:0}
  .hpanel::before{display:none}
  .aband{grid-template-columns:repeat(2,1fr)}
  .aband>div{border-bottom:1px solid rgba(255,255,255,.25);padding:24px var(--pad)}
  .paths,.agrid,.poprow,.tlist,.pgrid,.levels,.af-cols{grid-template-columns:1fr}
  .paths{padding-top:60px}
  .path{margin:0 0 -1px}
  .why,.blk2{grid-template-columns:1fr}
  .blk2 .side{padding:44px var(--pad) 0}
  .blk2 .body{padding:28px var(--pad) 50px}
  .trow{grid-template-columns:1fr;row-gap:8px}
  .trow .tf{grid-column:1}
  .trow .st{grid-column:1;justify-self:start}
  .ways thead{display:none}
  .ways tr{display:grid;grid-template-columns:1fr auto;padding:14px 0;border-bottom:1px solid var(--line)}
  .ways td{border:0;padding:4px 0}
  .ways td:nth-child(2){grid-column:1/-1}
  .ways td:nth-child(3){grid-column:1/-1}
  .mods li{grid-template-columns:40px 1fr}
  .mods .mm{grid-column:2}
  .crossbar{font-size:1rem}
  body.is-player{height:auto;overflow:auto}
  .player{grid-template-columns:1fr;height:auto}
  .pl-side{order:2;border-right:0}
  .pl-mods{max-height:none}
  .pl-main{padding:16px}
  .pl-ctrl .auto{margin-left:0}
  .mli{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
.ways td:last-child{text-align:right;white-space:nowrap}
.ways .pr{display:block;font-size:1.25rem;font-weight:500;letter-spacing:0;margin-bottom:4px}
@media (min-width:861px) and (max-width:1200px){
  .ways thead{display:none}
  .ways tr{display:grid;grid-template-columns:7rem minmax(0,1fr) 10.5rem;column-gap:22px;padding:18px 8px;border-bottom:1px solid var(--line)}
  .ways td{border:0;padding:0;width:auto}
  .ways td:nth-child(1){grid-column:1;grid-row:1/3}
  .ways td:nth-child(2){grid-column:2;grid-row:1}
  .ways td:nth-child(3){grid-column:2;grid-row:2;padding-top:10px}
  .ways td:nth-child(4){grid-column:3;grid-row:1/3}
}
@media (max-width:1200px){.ways td:first-child{width:auto}.ways .rg{white-space:normal}}
html[data-size="l"] .ways .rg,html[data-size="xl"] .ways .rg{white-space:normal}
@media (min-width:861px) and (max-width:1000px){
  html[data-size="l"] .ways tr,html[data-size="xl"] .ways tr{grid-template-columns:1fr auto;padding:14px 0}
  html[data-size="l"] .ways td,html[data-size="xl"] .ways td{grid-column:auto;grid-row:auto;padding:4px 0}
  html[data-size="l"] .ways td:nth-child(2),html[data-size="l"] .ways td:nth-child(3),html[data-size="xl"] .ways td:nth-child(2),html[data-size="xl"] .ways td:nth-child(3){grid-column:1/-1}
}

/* founders */
.fds{padding:0 0 90px}
.fdrow{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fd{display:grid;grid-template-columns:200px 1fr;gap:26px;background:#fff;align-items:start}
.fd img{width:200px;height:240px;object-fit:cover;border-right:6px solid var(--red)}
.fd>div{padding:24px 24px 24px 0}
.fd .mono{color:var(--red)}
.fd h3{font-size:1.875rem;font-weight:500;letter-spacing:0;margin:10px 0 12px;line-height:1}
.fd p{font-size:1rem;line-height:1.55;color:var(--body)}
.fds.compact{max-width:var(--max);margin:0 auto;padding:44px var(--pad) 50px;border-bottom:1px solid var(--line)}
.fds.compact .fdrow{padding:0;max-width:900px}
.fds.compact .fd{grid-template-columns:96px 1fr;gap:18px;align-items:center}
.fds.compact .fd img{width:96px;height:96px}
.fds.compact .fd>div{padding:0}
.fds.compact h3{font-size:1.375rem;margin:6px 0 0}
@media (max-width:860px){.fdrow{grid-template-columns:1fr}.fd{grid-template-columns:120px 1fr}.fd img{width:120px;height:160px}}

/* player fit: keep controls above the fold */
.stage{max-width:min(1100px,calc((100vh - 360px) * 16 / 9));min-width:320px}
.slide::after{display:none}
.sl-logo{height:9%}
.sl-t{max-width:88%}
@media (max-width:860px){.stage{max-width:none;min-width:0}}
.pl-side{min-width:0}
@media (max-width:860px){.player{grid-template-columns:minmax(0,1fr)}}
/* On wider screens the player fills the space under the two bars, however tall they grow (the menu can wrap onto two lines
   with A+ or A++, with something in the basket, or when signed in), and the hidden helper texts in its main column stay
   inside it, so the page is never taller than the window */
@media not all and (max-width:860px){.is-player main{display:flex;flex-direction:column;min-height:0}.is-player .player{flex:1;height:auto}.pl-main{position:relative}}
/* Phones turned sideways and other short windows (500px tall or less, or 650px tall or less when wider than tall, as on
   a laptop with a 1366 by 768 screen): the page scrolls, with the slide list under the video as on phones and the
   header scrolling away (so nothing is fixed to the top or bottom to keep clear of), and the video is sized to fit on
   screen with its controls below it. (Beside the list, the video was too small there: the slide text was cut off
   with A+ or A++ and the course lock could be taller than the window.) Phones held upright are not changed. */
@media (max-height:500px), (orientation:landscape) and (max-height:650px){body.is-player{height:auto;overflow:auto}.is-player .ahead{position:relative}.player{grid-template-columns:minmax(0,1fr);height:auto}html:has(body.is-player){scroll-padding:0}.pl-side{order:2;border-right:0}.pl-mods{max-height:none}.pl-main{padding:16px}.stage{max-width:calc((100vh - 100px) * 16 / 9);max-width:calc((100svh - 100px) * 16 / 9);min-width:0}}
/* The menu behind the Menu button scrolls when the screen is too short to show all of it (phones held sideways), so
   My learning and the basket can always be reached */
@media (max-width:860px){.anav{max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}}
/* With A+ or A++ the whole menu needs about 900px or 965px beside the logo (signed in, with something in the basket;
   measured 7 October 2026), so on screens under 940px or 1024px wide it goes behind the Menu button, as on phones,
   with room to spare for a scroll bar */
@media (min-width:861px) and (max-width:939px){
  html[data-size="l"] .menu-btn{display:flex}
  html[data-size="l"] .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}
  html[data-size="l"] .anav.open{display:flex}
  html[data-size="l"] .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  html[data-size="l"] .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
  html[data-size="l"] .anav a.signin{padding:0 12px}
}
@media (min-width:861px) and (max-width:1023px){
  html[data-size="xl"] .menu-btn{display:flex}
  html[data-size="xl"] .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}
  html[data-size="xl"] .anav.open{display:flex}
  html[data-size="xl"] .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  html[data-size="xl"] .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
  html[data-size="xl"] .anav a.signin{padding:0 12px}
}
/* The page stays put when the slide changes: the browser never anchors its scrolling to the changing slide text */
.stage{overflow-anchor:none}
/* Links in the course lock's messages, the checkout's notes, renewals and payment messages */
.pl-lock p a{color:#fff;border-bottom:1px solid currentColor}
#ck>.note{margin:0 0 16px}
.ck-rn{display:block;margin-top:2px}
.ck-err a{color:inherit;border-bottom:1px solid currentColor}
/* Back from paying on My learning or My team: what to do if the payment could not be confirmed, under the heading */
.aph .pay-msg{margin-top:24px;max-width:760px;font-weight:600}
/* ...and moving keyboard focus to Play (or Next) brings the whole video into view with it, not just the button */
@media (max-height:500px), (orientation:landscape) and (max-height:650px){.pl-ctrl>*{scroll-margin-top:calc(min(100vh - 95px, (100vw - 32px) * 9 / 16 + 5px) + 16px);scroll-margin-top:calc(min(100svh - 95px, (100vw - 32px) * 9 / 16 + 5px) + 16px);scroll-margin-bottom:8px}}
/* Skip from the top of the course list to the video's controls: shows when it has keyboard focus */
.pl-skip{position:absolute;left:-9999px}
.pl-skip:focus{position:static;display:inline-block;margin:0 0 12px;padding:10px 14px;background:var(--near);color:#fff}

/* v2 catalogue blocks */
.two{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.dots{list-style:none;border-top:1.5px solid var(--ink)}
.dots li{padding:14px 0 14px 22px;border-bottom:1px solid var(--line);position:relative;font-size:1.0625rem;line-height:1.4}
.dots li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;background:var(--red)}
@media (min-width:861px){.trow{grid-template-columns:1fr 150px 120px}}
.trow small{max-width:640px}
.soon-k{margin-top:34px}
.soon{list-style:none;border-top:1px solid var(--line)}
.soon li{display:flex;justify-content:space-between;gap:16px;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--mute)}
.fpart{margin-bottom:34px}
.fh{background:var(--paper);padding:18px 20px;border-left:4px solid var(--red);margin-bottom:0}
.blk2:not(.alt) .fh{background:#fff}
.fh .mono{color:var(--red)}
.fh h3{font-size:1.625rem;font-weight:500;letter-spacing:0;margin:8px 0 4px}
.fh p{color:var(--mute);font-size:1rem}
.mods .mt small.d{color:var(--body);font-size:1rem;margin-top:6px;line-height:1.45}
.outs{list-style:none;border-top:1.5px solid var(--ink)}
.outs li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:18px 4px;border-bottom:1px solid var(--line);font-size:1.1875rem;line-height:1.4;letter-spacing:0}
.outs .mn{color:var(--red);font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-size:1.75rem;line-height:1}
.ptbl{width:100%;border-collapse:collapse;border-top:1.5px solid var(--ink)}
.ptbl th{text-align:left;font-weight:500;font-size:1.25rem;letter-spacing:0;padding:18px 8px;border-bottom:1px solid var(--line)}
.ptbl th small{display:block;font-weight:400;font-size:1rem;color:var(--mute);letter-spacing:0;margin-top:4px}
.ptbl td{text-align:right;padding:18px 8px;border-bottom:1px solid var(--line);font-size:1.375rem;font-weight:500;color:var(--red);white-space:nowrap;vertical-align:top}
.levels.seven{grid-template-columns:repeat(7,1fr)}
.levels.seven .lv:nth-child(2){margin-top:20px}.levels.seven .lv:nth-child(3){margin-top:40px}.levels.seven .lv:nth-child(4){margin-top:60px}
.levels.seven .lv:nth-child(5){margin-top:80px}.levels.seven .lv:nth-child(6){margin-top:100px}.levels.seven .lv:nth-child(7){margin-top:120px}
.chip.t-programme{background:var(--near)}
.chip.t-academy{background:var(--red);box-shadow:inset 0 0 0 2px var(--near)}
@media (max-width:1100px){.levels.seven{grid-template-columns:repeat(3,1fr)}.levels.seven .lv:nth-child(n){margin-top:0}}
@media (min-width:861px) and (max-width:1300px){html[data-size="l"] .levels.seven,html[data-size="xl"] .levels.seven{grid-template-columns:repeat(3,1fr)}html[data-size="l"] .levels.seven .lv:nth-child(n),html[data-size="xl"] .levels.seven .lv:nth-child(n){margin-top:0}}
@media (max-width:860px){.two{grid-template-columns:1fr}.levels.seven{grid-template-columns:1fr}.ptbl td{font-size:1.125rem}}
.ptbl td{white-space:normal;width:38%}
@media (max-width:860px){.ptbl th{font-size:1.0625rem}.ptbl td{width:40%}}

/* Socrates chat */
.soc-card{width:min(600px,100%);display:flex;flex-direction:column;padding:0}
.soc-top{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 26px 16px;border-bottom:1px solid var(--line);background:#fff}
.soc-top h2{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-weight:400;font-size:2.5rem;margin:4px 0 0;letter-spacing:0;color:var(--red)}
.soc-x{position:static}
.soc-log{flex:1;overflow:auto;padding:20px 26px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:92%;font-size:1rem;line-height:1.55;padding:12px 16px}
.msg.bot{background:#fff;border-left:4px solid var(--red);align-self:flex-start;color:var(--body)}
.msg.bot a{color:var(--red);border-bottom:1px solid currentColor}
.msg.bot p+p,.msg.bot p+.recs,.msg.bot .recs+p{margin-top:10px}
.msg.me{background:var(--ink);color:#fff;align-self:flex-end}
.recs{display:grid;gap:8px}
.rec{display:grid;gap:4px;background:var(--paper);padding:14px 14px 12px;border-top:3px solid var(--ink);transition:border-color .15s,background .15s}
.msg.bot a.rec{border-bottom:0;color:var(--ink)}
.rec:hover{border-top-color:var(--red);background:var(--red-tint)}
.rec .chip{justify-self:start}
.rec b{font-size:1.125rem;font-weight:500;letter-spacing:0;margin-top:4px}
.rec small{color:var(--mute);font-size:1rem}
.rec .rm{color:var(--ink);margin-top:4px}
.rec .rwhy{font-size:1rem;color:var(--body);border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.soc-also{font-size:1rem}
.soc-in{padding:14px 26px 6px;border-top:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow:auto}
.soc-in .chips button{font-size:1rem;padding:9px 12px}
.soc-in .chips button:disabled{opacity:.4}
.soc-row{display:flex;justify-content:flex-end}
.soc-row .btn:disabled{opacity:.4;cursor:not-allowed}
.soc-free{display:flex;gap:0}
.soc-free input{flex:1;min-width:0;font:inherit;font-size:1rem;padding:12px;border:1.5px solid var(--ink);border-right:0;background:var(--paper)}
.soc-free .btn{padding:12px 16px}
.soc-foot{padding:8px 26px 14px;color:var(--mute);background:#fff;margin:0}
.chip.t-flagship{background:var(--red)}
.chip.t-academy{background:var(--near);box-shadow:none}
.soc .soc-foot{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:1rem;line-height:1.5}

/* Socrates as a career and development coach */
.soc-step{align-self:stretch;color:var(--red);border-top:1px solid var(--line);padding-top:12px;margin-top:6px;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.soc-free{flex-direction:column;gap:10px}
.soc-free input,.soc-free textarea{width:100%;border-right:1.5px solid var(--ink)}
.soc-free textarea{font:inherit;font-size:1rem;padding:12px;border:1.5px solid var(--ink);background:var(--paper);resize:vertical;min-height:120px}
.soc-row{gap:8px}
.soc-row .btn{padding:12px 16px}
.rate{display:grid;gap:12px}
.rate-row{display:grid;gap:6px}
.rate-row>span{font-size:1rem;color:var(--near);font-weight:500}
.rate-row em{font-style:normal;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-left:6px}
.pdp-msg{max-width:100%}
.pdp-k{color:var(--red);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.pdp-sum{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:6px 14px;margin:12px 0 4px;font-size:1rem}
.pdp-sum dt{color:var(--mute)}
.pdp-sum dd{margin:0;color:var(--near)}
.pdp h3{font-size:1.125rem;font-weight:500;letter-spacing:0;margin:18px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--red);color:var(--near)}
.pdp .soc-also{margin-top:16px}
.rec.on{border-top-color:var(--red);opacity:.75}
.rdone{color:var(--red)}
button.rec{text-align:left;width:100%;border:0;border-top:3px solid var(--ink);font:inherit;color:var(--ink);cursor:pointer}
button.rec.on{background:var(--red-tint);border-top-color:var(--red);opacity:1}
button.rec.on b::before{content:'✓ ';color:var(--red)}
.ticks{max-height:none}
.chip.t-psychometric,.chip.t-profile{background:var(--near)}   /* v85 (RULE-PROFILES): t-profile, the basket's and passport's chip for the new type word */
.chip.t-coaching{background:var(--red)}
.chip.t-action-learning{background:var(--ink)}
.chip.t-review{background:#fff;color:var(--near);box-shadow:inset 0 0 0 1.5px var(--near)}
@media (max-width:520px){.pdp-sum{grid-template-columns:1fr;gap:2px}.pdp-sum dd{margin-bottom:8px}}
@media print{
  body.print-plan>*:not(.soc){display:none !important}
  body.print-plan .soc{position:static;background:none;display:block}
  body.print-plan .soc-card{width:100%;height:auto;border:0;display:block}
  body.print-plan .soc-top .soc-x,body.print-plan .soc-in,body.print-plan .soc-foot,body.print-plan .soc-log>*:not(.pp){display:none !important}
  body.print-plan .soc-log{overflow:visible;padding:0}
  body.print-plan .msg.bot{border-left:0;padding:0}
}

/* Socrates: launcher, first-visit nudge and home band (replaces the nav tab) */
.soc-log{position:relative}
.soc-in .chips button.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:500;flex-basis:100%;text-align:left}
.soc-in .chips button.primary::after{content:' →'}
.soc-fab{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:12px;background:var(--near);color:#fff;border:0;padding:10px 20px 10px 10px;box-shadow:0 10px 30px rgba(26,26,26,.28);cursor:pointer;transition:transform .15s,background .15s;text-align:left}
.soc-fab:hover{background:#000;transform:translateY(-2px)}
.fab-mark{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--red);font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-size:1.9rem;line-height:1;color:#fff}
.fab-t{display:grid;gap:3px}
.fab-t em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-size:1.5rem;line-height:1;color:#fff}
.fab-s{font-size:1rem;color:var(--cream)}
body.soc-open .soc-fab,body.soc-open .soc-nudge{display:none}
.soc-nudge{position:fixed;right:24px;bottom:100px;z-index:40;width:min(300px,calc(100vw - 48px));background:#fff;border-top:4px solid var(--red);padding:18px 20px 16px;box-shadow:0 10px 30px rgba(26,26,26,.2);animation:nudge .35s ease-out}
.soc-nudge[hidden]{display:none}
.soc-nudge p{font-size:1rem;line-height:1.45;color:var(--near);padding-right:18px}
.soc-nudge a{display:inline-block;margin-top:12px;color:var(--red);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid var(--red);padding-bottom:3px}
.soc-nudge .nx{position:absolute;right:8px;top:6px;background:none;border:0;font-size:1.5rem;color:var(--ink);line-height:1;padding:4px}
@keyframes nudge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.soc-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center;background:var(--ink);color:#fff;padding:88px var(--pad);margin:0 0 24px}
.soc-band .k{color:#fff;opacity:.85}
.soc-band h2{font-size:clamp(2rem,3.6vw,3.5rem);font-weight:500;letter-spacing:0;line-height:.98}
.soc-band h2 em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-weight:400;color:#fff;border-bottom:4px solid var(--red)}
.soc-band p{color:#fff;margin-top:18px;max-width:58ch;line-height:1.55}
.soc-band p.big{font-size:1.25rem;line-height:1.45}
.sb-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:30px 0 6px;border-top:1px solid rgba(255,255,255,.3)}
.sb-steps li{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);padding:14px 12px 0 0}
.sb-steps b{display:block;color:#fff;font-size:1.5rem;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:500;letter-spacing:0;margin-bottom:6px}
.sb-chat{background:var(--paper);color:var(--near);border-left:8px solid var(--red);box-shadow:0 20px 50px rgba(0,0,0,.3);padding:0 0 22px}
.sb-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;background:#fff;padding:16px 22px;border-bottom:1px solid var(--line);margin-bottom:16px}
.sb-top em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-size:2rem;color:var(--red);line-height:1}
.sb-top span{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.sb-msg{margin:0 22px 10px;background:#fff;border-left:4px solid var(--red);padding:11px 14px;max-width:85%;font-size:1rem}
.sb-msg.me{margin-left:auto;background:var(--ink);color:#fff;border-left:0;max-width:70%;width:fit-content}
.sb-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 22px 12px}
.sb-chips span{border:1.5px solid var(--ink);background:#fff;padding:7px 10px;font-size:1rem;color:var(--ink)}
.sb-chips span.on{background:var(--red);border-color:var(--red);color:#fff}
.sb-plan{margin:6px 22px 0;background:#fff;border-top:3px solid var(--ink);padding:12px 14px;display:grid;gap:4px}
.sb-plan span{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.sb-plan b{font-weight:500}
@media (max-width:860px){
  .soc-band{grid-template-columns:1fr;padding:64px var(--pad);gap:40px}
  .sb-steps{grid-template-columns:repeat(2,1fr)}
  .soc-fab{right:16px;bottom:16px;padding:8px 16px 8px 8px}
  .fab-mark{width:38px;height:38px;font-size:1.6rem}
  .fab-t em{font-size:1.25rem}
  .soc-nudge{right:16px;bottom:80px}
}
@media print{.soc-fab,.soc-nudge{display:none !important}}

/* Buying and doing: basket, development products, checkout, My learning */
.anav a.basket{gap:8px}
.bk-n{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;background:rgba(255,255,255,.2);color:#fff;font-size:1rem}
.basket.has .bk-n{background:#fff;color:var(--red)}
.buy{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;border:0;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;padding:11px 14px;cursor:pointer;white-space:nowrap}
.buy:hover{background:var(--red-d)}
.buy.sm{padding:8px 10px;margin-top:6px}
.ways td .pr{display:block}
.btn.sm{padding:10px 14px;font-size:1rem;gap:8px}
.btn.sm.ghost{box-shadow:inset 0 0 0 1.5px var(--ink)}
button.btn{cursor:pointer;border:0}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dcard{display:flex;flex-direction:column;gap:8px;background:#fff;padding:20px;border-top:3px solid var(--ink)}
.blk2.alt .dcard{background:var(--paper)}
.dcard.wide{grid-column:1/-1}
.dcard .chip{align-self:flex-start}
.dcard h3{font-size:1.25rem;font-weight:500;letter-spacing:0;line-height:1.15;margin-top:4px}
.dcard p{color:var(--body);font-size:1rem;line-height:1.5}
.dhow{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:1rem;color:var(--mute)}
.dbuy{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.dbuy .pr{font-size:1rem;color:var(--mute)}
.chip.t-focus-shot{background:var(--red)}
.cklist{list-style:none;display:grid;gap:10px}
.cklist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center;background:#fff;padding:16px 18px;border-left:4px solid var(--red)}
.ck-t b{display:block;font-weight:500;font-size:1.0625rem}
.ck-t small{color:var(--mute);font-size:1rem}
.cklist .pr{font-size:1rem;white-space:nowrap}
.ck-x{background:none;border:0;color:var(--mute);text-decoration:underline;font-size:1rem;cursor:pointer}
.ck-tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:20px 0;border-bottom:2px solid var(--ink);margin-bottom:24px}
.ck-tot b{font-size:1.5rem;font-weight:500;letter-spacing:0}
.ck-form{display:grid;gap:10px;max-width:520px}
.ck-form input{font:inherit;padding:14px;border:1.5px solid var(--ink);background:#fff}
.ck-form .btn{justify-self:start}
.ck-form p.mono{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none}
.empty a{color:var(--red);border-bottom:1px solid currentColor}
.olist{display:grid;gap:12px}
.oli{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:20px;align-items:center;background:var(--paper);padding:18px 20px;border-left:4px solid var(--red)}
.oli.done{border-left-color:var(--ink);opacity:.8}
.oli-h{display:grid;gap:4px}
.oli-h .chip{justify-self:start}
.oli-h b{font-size:1.125rem;font-weight:500;margin-top:4px}
.oli-h small{color:var(--mute);font-size:1rem}
.oli-a{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;max-width:420px}
.oli-a .ok{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:1rem;color:var(--ink);background:#fff;padding:7px 10px}
.slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.slots button{background:#fff;border:1.5px solid var(--ink);padding:7px 10px;font-size:1rem;cursor:pointer}
.slots button:hover{background:var(--red);border-color:var(--red);color:#fff}
.fsparts{margin:6px 0 0 18px;font-size:1rem;color:var(--body);display:grid;gap:2px}
.fsparts .mono{font-size:1rem;color:var(--mute);letter-spacing:.02em}
.mlplan{background:#fff;padding:22px;border-top:3px solid var(--red);display:grid;gap:12px;justify-items:start}
.mlplan .bar{display:block;width:100%;height:6px;background:var(--stone)}
.mlplan .bar i{display:block;height:100%;background:var(--red)}
.k2{color:var(--red);font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.soc-link{background:none;border:0;padding:0;font:inherit;color:var(--red);border-bottom:1px solid currentColor;cursor:pointer}
.aa-toast{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;bottom:24px;transform:translateY(20px);opacity:0;pointer-events:none;z-index:60;background:var(--near);color:#fff;padding:14px 18px;font-size:1rem;max-width:560px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:opacity .2s,transform .2s;border-left:4px solid var(--red)}
.aa-toast.on{opacity:1;transform:none;pointer-events:auto}
.aa-toast.up{bottom:auto}
.aa-toast a{color:#fff;border-bottom:1px solid currentColor;margin-left:6px}
@media (max-width:860px){
  .dgrid{grid-template-columns:1fr}
  .cklist li{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .cklist li .chip{grid-column:1/-1;justify-self:start}
  .oli{grid-template-columns:1fr}
  .oli-a{justify-content:flex-start;max-width:none}
  .aa-toast{bottom:84px}
}
.af-cols b.af-sub{margin-top:18px}
.ck-form textarea{font:inherit;padding:14px;border:1.5px solid var(--ink);background:#fff}

/* Account: home band, sign-in page, My learning line */
.acct{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding:64px var(--pad);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:#fff}
.acct h2{font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:0;line-height:1.05;margin:12px 0 16px}
.acct h2 em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-weight:400;color:var(--red)}
.acct .big{font-size:1.25rem;line-height:1.5;max-width:560px}
.acct .acts{margin-top:26px}
.ac-r{list-style:none;margin:0;padding:0;align-self:center}
.ac-r li{padding:18px 0;border-top:1px solid var(--line)}
.ac-r li:last-child{border-bottom:1px solid var(--line)}
.ac-r b{display:block;font-size:1.125rem;font-weight:600;margin-bottom:4px}
.ac-r span{color:var(--mute)}
.beta-note{margin-top:14px;color:var(--mute);font-size:1rem}
.ml-who{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;margin-top:18px;font-size:1rem}
.ml-who .soc-link{margin-left:10px}
.ml-who a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.acct{grid-template-columns:1fr;gap:24px;padding:44px var(--pad)}}
.si-tabs{display:flex;gap:0;margin-bottom:22px;border-bottom:1.5px solid var(--ink)}
.si-tabs button{background:none;border:0;padding:12px 18px;font:inherit;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1.5px}
.si-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--red)}
#signin-form[data-mode="in"] .su-only,#signin-form[data-mode="up"] .in-only{display:none}
#signin-form label{display:block;margin-top:14px}
.si-hint{display:block;color:var(--mute);margin-top:4px;font-size:1rem}
.si-err{color:var(--red);margin-top:12px}
.si-forgot{display:inline-block;margin-top:14px;font-size:1rem}
#signin-form input{display:block;width:100%;max-width:520px;box-sizing:border-box;margin-top:6px}
.si-msg{margin-top:12px;padding:12px 14px;background:#fff;border-left:4px solid var(--ink)}
#reset-form{max-width:520px}
#reset-form h3{font-size:1.5rem;font-weight:500;margin-bottom:6px}
#reset-form input{display:block;width:100%;box-sizing:border-box;margin-top:6px}
#reset-form label{display:block;margin-top:14px}
.anav a.basket[hidden]{display:none}
.rec-w{display:grid;background:var(--paper)}
.rec-w .rec{background:none}
.rec-add{justify-self:start;margin:0 14px 12px;background:var(--red);color:#fff;border:0;padding:8px 12px;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rec-add:hover{background:var(--ink)}
.rec-st{margin:0 14px 12px;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.soc-buyall{margin-top:12px}
@media print{.rec-add,.rec-st,.soc-buyall{display:none}}

/* Coming soon: set by live-status.js when the Dropbox spreadsheet says it is not on sale yet */
[data-live].not-yet,[data-live].not-yet:hover{background:#E6E2DA;color:#3A4245;cursor:default}

/* real narrated slide videos in the player */
.sl-video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-top:10px solid var(--red);cursor:pointer}
.slide[hidden],.sl-video[hidden]{display:none}

/* ---------- buy before you play ---------- */
.pl-lock{aspect-ratio:16/9;background:var(--near);color:#fff;border-top:10px solid var(--red);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:5% 8%}
.stage.locked .slide,.stage.locked .sl-video,.stage.locked .sl-bar{display:none}
.pl-lock[hidden]{display:none}
.pl-lock .k{color:var(--cream);margin:0}
.pl-lock h2{font-size:clamp(1.5rem,3vw,2.75rem);font-weight:500;letter-spacing:0;line-height:1.05;max-width:20ch}
.pl-lock p{color:var(--cream);max-width:56ch;line-height:1.55}
.lk-buy{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.lk-pr{font-size:1.75rem;font-weight:500;letter-spacing:0;display:flex;flex-direction:column;line-height:1.1}
.lk-pr small{font-size:1rem;color:var(--cream);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.lk-alt{background:none;border:0;color:#fff;border-bottom:1px solid currentColor;padding:2px 0;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.pl-lock .lk-free{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:1rem;color:var(--cream)}
.pl-lock .lk-free a{color:#fff;border-bottom:1px solid currentColor}
.pc:disabled{opacity:.4;cursor:not-allowed}
.pc.wait,.pc.wait:hover{opacity:.45;cursor:not-allowed;background:#fff;color:var(--ink)}
#sl-img-go.wait{opacity:.45;cursor:not-allowed}
.pc.play.ready{box-shadow:0 0 0 4px var(--red-tint)}
.buy.owned{background:var(--ink)}.buy.owned:hover{background:var(--near)}
.ck-pay{background:#fff;border-left:4px solid var(--ink);padding:16px 18px;display:grid;gap:6px;margin:6px 0 8px}
.ck-pay .k{margin:0}
.ck-test{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--mute);font-size:1rem;line-height:1.5}
@media (max-width:700px){.pl-lock{aspect-ratio:auto;padding:28px 22px}}

/* ---------- full screen ---------- */
.pc.fs{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.stage:fullscreen,.stage.fs{max-width:none;width:100vw;height:100vh;background:#000;display:flex;flex-direction:column;justify-content:center}
.stage:-webkit-full-screen{max-width:none;width:100vw;height:100vh;background:#000;display:flex;flex-direction:column;justify-content:center}
.stage.fs .sl-video{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-top:0}
.stage.fs .slide{width:min(100vw,calc((100vh - 5px) * 16 / 9));margin:0 auto}
.stage.fs .sl-bar{flex:none}
/* Captions: CC button and the caption text over the video */
.pc.cc{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.02em;font-weight:700}
.pc.cc.on{background:var(--ink);color:#fff}
.pc[hidden]{display:none}
.sl-video::cue{background:rgba(26,26,26,.85);color:#fff;font-family:'Source Sans 3',system-ui,sans-serif;font-size:max(16px,1.05em);line-height:1.35}
.ck-err{color:var(--red);font-weight:600;margin:4px 0}
.ck-err[hidden]{display:none}

/* Memberships and team licences (3 Oct 2026) */
.cta2-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta2 .buy{background:#fff;color:var(--red);padding:16px 20px;font-size:1rem}
.cta2 .buy:hover{background:#F4F2EF}
.tlic{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line,#DEDBD7)}
.tlic li{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line,#DEDBD7)}
.tlic li b{display:block;font-weight:600}
.tlic li small{display:block;color:#4A5356;font-size:1rem;margin-top:2px}
.tlic .pr{font-weight:600;white-space:nowrap}
.steps{margin:0;padding-left:1.2em;display:grid;gap:10px;line-height:1.55;color:#333}
.note{color:#4A5356;font-size:1rem;margin-top:14px}
.ck-opt{display:flex;gap:12px;align-items:flex-start;padding:12px 0;cursor:pointer}
.ck-opt input{margin-top:4px;accent-color:var(--red)}
.ck-opt b{display:block}
.ck-opt small{display:block;color:#4A5356;line-height:1.5;margin-top:2px;font-size:1rem}
.ck-org,.ck-inv{display:grid;gap:8px;margin:8px 0 4px}
.ck-org input,.ck-inv input,#mt-code input,.mt-copy input{font:inherit;padding:12px 14px;border:1px solid #B9B4AD;background:#fff;color:#1A1A1A;width:100%;box-sizing:border-box}
.ck-done{display:grid;gap:12px}
.ck-done h3{font-size:1.5rem;font-weight:500;letter-spacing:0;margin:0}
#mt-code{display:grid;gap:10px;max-width:460px}
.mt-team{padding:24px 0;border-bottom:1px solid var(--line,#DEDBD7);display:grid;gap:14px}
.mt-team h3{font-size:1.6rem;font-weight:500;letter-spacing:0;margin:4px 0}
.mt-copy{display:flex;gap:8px}
.mt-copy input{flex:1;min-width:0;font-size:1rem}
.mt-tbl{width:100%;border-collapse:collapse;font-size:1rem}
.mt-tbl th{text-align:left;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:#4A5356;font-weight:400;padding:8px 8px 8px 0;border-bottom:1px solid #1A1A1A}
.mt-tbl td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line,#DEDBD7);word-break:break-word}
.mt-x{background:none;border:1px solid #B9B4AD;padding:6px 10px;font:inherit;font-size:1rem;cursor:pointer;color:#1A1A1A;white-space:nowrap}
.mt-x:hover{border-color:var(--red);color:var(--red)}
@media (max-width:700px){.tlic li{grid-template-columns:1fr auto}.tlic li .buy{grid-column:1/-1;justify-self:start}.mt-tbl th:nth-child(2),.mt-tbl td:nth-child(2){display:none}}
.ck-seats{display:flex;align-items:center;gap:10px;margin-top:10px}
.ck-seats input{width:84px;font:inherit;padding:8px 10px;border:1px solid #B9B4AD;background:#fff;color:#1A1A1A}
.mt-add{display:grid;gap:8px}
.buy.alt{background:#fff;color:#1A1A1A;border:1px solid #1A1A1A}
.buy.alt:hover{background:#1A1A1A;color:#fff}
@media (max-width:700px){.mt-add .mt-copy{flex-wrap:wrap}.mt-add .mt-copy input{flex-basis:100%}}
/* My team on phones (560px wide or less): each person on their own, with what each number is, so the table never runs
   off the screen (it did at 320px, and with A+ or A++ on most phones). Screen readers still have the table. */
.mt-lab{display:none}
@media (max-width:560px){
  .mt-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .mt-tbl,.mt-tbl tbody{display:block}
  .mt-tbl tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line,#DEDBD7)}
  .mt-tbl td,.mt-tbl td:nth-child(2){display:block;padding:0;border:0}
  .mt-tbl td:first-child{flex:1 1 100%;font-weight:500;color:#1A1A1A}
  .mt-tbl td:last-child{flex:1 1 100%;margin-top:6px}
  .mt-lab{display:inline;color:#4A5356}
}

/* Accessibility fixes (4 Oct 2026) */
.pl-mods li.cur>.mh span{color:#1A1A1A}
/* Player: speed, mute, 10s back, transcript, shortcuts and content notes */
.pc.sm{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.pc.sm.on{background:var(--ink);color:#fff}
.pl-ctrl .spd{color:var(--mute);margin-left:6px}
.spd-s{height:46px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);padding:0 8px;font-size:1rem}
.caps-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.caps-h .k,.tx-top .k{margin:0;font-size:1rem;font-weight:500}
.tx-btn{background:none;border:0;padding:4px 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:1rem}
.tx-btn:hover{color:var(--red)}
.txbox{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.tx-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tx-list{list-style:none;padding:0;margin:10px 0 0;max-height:420px;overflow:auto}
.tx-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.tx-list b{display:block;font-size:1rem;color:var(--ink)}
.tx-list p{font-size:1rem;line-height:1.6;color:var(--body);margin-top:4px}
.keys{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;max-width:1100px;color:var(--mute);font-size:1rem}
.keys summary{cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.keys ul{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:6px 18px}
.keys kbd{display:inline-block;border:1px solid var(--ink);padding:1px 6px;color:var(--ink);font-family:inherit}
.keys label{display:flex;gap:8px;align-items:center;margin:8px 0}
.keys p a{color:var(--ink)}
.cnote{background:#fff;border-left:4px solid var(--red);padding:16px 20px;max-width:1100px}
.cnote p{font-size:1rem;line-height:1.6;color:var(--body)}
.cnote p+p{margin-top:10px}
.pl-note summary{cursor:pointer;color:var(--ink);font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.pl-note[open] summary{margin-bottom:10px}
.pl-note[hidden]{display:none}
/* Signed-off module detail inside a Bitesize (from the build template) */
.mdl{margin-top:10px}
.mdl summary{cursor:pointer;color:var(--ink);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.mdl-i{margin-top:12px;padding-left:12px;border-left:2px solid var(--line)}
.mdl-i b{display:block;font-size:1rem;color:var(--ink)}
.mdl-i p{font-size:1rem;line-height:1.55;color:var(--body);margin:4px 0}
.mdl-i ul{margin:4px 0 0;padding-left:1.1em}
.mdl-i li{font-size:1rem;line-height:1.5;color:var(--body)}
.mods .mdl-i li{display:list-item;padding:0;border:0;gap:0;grid-template-columns:none;margin-bottom:4px}
/* Keyboard focus never hides behind the sticky header or the Socrates launcher (WCAG 2.4.11): pages scroll a
   focused item clear of both, and the footer leaves room for the launcher at the very bottom of the page */
html{scroll-padding-top:80px;scroll-padding-bottom:104px}
body:has(#soc-fab) .afoot::after{content:'';display:block;height:96px}
@media (max-width:760px){html{scroll-padding-top:66px;scroll-padding-bottom:84px}body:has(#soc-fab) .afoot::after{height:76px}}
/* Reflow at 320px with the largest text size (WCAG 1.4.4 and 1.4.10): long words break, buttons wrap */
.blk2>*{min-width:0}
.ck-form{grid-template-columns:minmax(0,1fr)}.ck-form>*{min-width:0}
.ck-form input,.ck-form textarea,.ck-form select{max-width:100%;box-sizing:border-box}
@media (max-width:480px){
  h1,h2,h3{hyphens:auto}
  .aband{grid-template-columns:repeat(auto-fit,minmax(max(34%,min(100%,calc(7.75rem + 32px))),1fr))}
  .buy,.btn{white-space:normal;max-width:100%}
  .fd{grid-template-columns:1fr}.fd img{width:120px;height:150px}
}
h1,h2,h3,p,a{overflow-wrap:break-word}
.ahero>*{min-width:0}
.txbox{scroll-margin-top:80px;scroll-margin-bottom:24px}

/* ---------- Softer look and Amanda's fonts (7 Oct 2026) ----------
   Same as the website: headings in Gillius ADF (the free match for the Gill Sans on the slides), body in Source Sans 3,
   body text 18px at about 1.5 line spacing, left-aligned, charcoal. Every heading stack lists Source Sans 3 straight
   after Gillius, so Welsh letters Gillius lacks (w and y with a circumflex) fall back cleanly. Rounded cards, buttons
   and fields, lighter lines and soft shadows in place of the hard rules and boxes. */
:root{--fh:'Gillius ADF','Source Sans 3',system-ui,sans-serif;--fb:'Source Sans 3',system-ui,sans-serif;--edge:#7A8184;--r:18px;--r-s:12px;--shadow:0 1px 2px rgba(26,26,26,.05),0 8px 24px rgba(26,26,26,.07);--line:rgba(26,26,26,.1)}
body{font-family:var(--fb);line-height:1.5}
h1,h2,h3,h4,.aband b,.hpanel b,.sl-t,.sb-steps b,.lk-pr,.af-big p,.trow b,.rec b,.mli b,.oli-h b,.ways b,.ptbl th,.tst b,.ck-tot b,.mods .mt b,.fab-t em,.sb-top em{font-family:var(--fh);font-weight:400;letter-spacing:0}
.ptbl th small{font-family:var(--fb)}
em{font-family:inherit;font-style:italic;letter-spacing:0}
h1 em,h2 em,h3 em,h4 em,.fab-t em,.sb-top em,.anav a.ask,.fab-mark,.soc-top h2{font-family:var(--fh);font-style:normal;font-weight:400}
.ahero h1{line-height:.98;letter-spacing:-.01em}
.aph h1{line-height:1;letter-spacing:-.01em}
.sh h2,.blk2 h2,.cta2 h2,.soc-band h2,.atile h3,.lv h3,.lv h2,.soc h2,.acct h2{line-height:1.04}
.mono,.btn,.buy,.chip,.k2{font-family:var(--fb)}
.mono{font-weight:600;letter-spacing:.06em}
/* 18px body text, about 1.5 line spacing */
.sh p,.prose p,.path p,.atile p,.pop p,.blk2 .side p,.lv p,.fd p,.soc p,.msg,.dcard p,.caps p,.hpanel p,.soc-band p,.soc-nudge p,.steps,.dots li{font-size:1.125rem}
.prose p{line-height:1.6}
.sh p,.path p,.atile p,.pop p,.blk2 .side p,.lv p,.fd p,.dcard p,.hpanel p{line-height:1.55}
/* buttons: rounded, sentence-style labels */
.btn,.buy,.pc.play,.rec-add{border-radius:999px;font-weight:600;letter-spacing:.01em;text-transform:none}
.btn{font-size:1.125rem;padding:15px 26px;gap:14px;box-shadow:0 2px 8px rgba(222,0,0,.18)}
.btn:hover{gap:20px}
.btn.dark,.btn.ghost,.btn.light{box-shadow:none}
.btn.ghost{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.sm{padding:10px 16px}
.buy{padding:10px 18px}
.buy.sm{padding:8px 14px}
.cta2 .buy{padding:15px 24px}
.pc{border-radius:10px;border-color:var(--edge)}
.pc.play{padding:0 24px}
.sz button{border-radius:6px}
.chip{border-radius:999px;padding:4px 12px;font-weight:600}
.st{border-radius:999px;padding:5px 12px}
.aph .meta{gap:8px}
.aph .meta span{border-radius:999px;margin:0;padding:7px 14px;font-weight:600}
.chips button,.slots button,.sb-chips span{border-radius:999px;border-color:var(--edge)}
.chips button{padding:9px 16px}
/* header */
.anav a{border-left-color:rgba(255,255,255,.16)}
@media (min-width:1100px){.anav a.signin{margin:14px var(--pad) 14px 10px;border-radius:999px;padding:0 24px}}
/* home */
.hpanel{border-radius:var(--r);box-shadow:0 14px 34px rgba(222,0,0,.22)}
.hpanel::before{display:none}
.hpanel a{border-bottom-width:1px}
.aband>div{border-right-color:rgba(255,255,255,.2)}
.paths{gap:16px}
.path{border:1px solid var(--line);border-radius:var(--r);margin:0;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s,transform .15s}
a.path:hover{border-color:var(--red);transform:translateY(-2px)}
.agrid{gap:16px;border:0}
.atile{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.atile:first-child{border-color:var(--red)}
.atile:hover{border-color:var(--red)}
.pop{border-left:0;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.tlist{gap:12px;background:none;border:0}
.tst{border-radius:var(--r-s);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.tst:hover{background:rgba(255,255,255,.12)}
.soc-band{border-radius:0}
.sb-chat{border-left:0;border-radius:var(--r);overflow:hidden}
.sb-msg{border-left:0;border-radius:14px;border:1px solid var(--line)}
.sb-msg.me{border:0}
.sb-plan{border-top:0;border-radius:var(--r-s);border:1px solid var(--line)}
.acct{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fd{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
/* topic and programme pages */
.tlist2,.mods,.dots,.outs,.ptbl{border-top:1px solid var(--line)}
.trow{border-left:0;border-radius:var(--r-s)}
.trow:hover{box-shadow:var(--shadow)}
.dots li::before{border-radius:50%;width:9px;height:9px}
.pcard{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.pcard:hover{border-color:var(--red)}
.pcard.fl{border-color:var(--red)}
.ways th{border-bottom:1px solid var(--line);font-weight:600}
.sq i{border-radius:2px}
.fh{border-left:0;border:1px solid var(--line);border-radius:var(--r-s)}
.levels{border-bottom-color:var(--line)}
.dcard{border-top:0;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.mlplan{border-top:0;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.mli,.cklist li,.oli{border-left:0;border:1px solid var(--line);border-radius:var(--r-s);box-shadow:inset 4px 0 0 var(--red)}
.oli.done{box-shadow:inset 4px 0 0 var(--ink)}
.bar,.bar i,.mlplan .bar,.mlplan .bar i{border-radius:999px}
.ck-tot{border-bottom:1px solid var(--line)}
.ck-pay,.si-msg,.caps{border-left:0;border:1px solid var(--line);border-radius:var(--r-s)}
.si-tabs{border-bottom:1px solid var(--line)}
.si-tabs button{margin-bottom:-1px}
/* fields: rounded with a clear edge */
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:var(--r-s)}
.ck-form input,.ck-form textarea,.soc-free input,.soc-free textarea,.pl-top select,.ck-org input,.ck-inv input,#mt-code input,.mt-copy input,.ck-seats input{border:1.5px solid var(--edge)}
.soc-free input{border-right:1.5px solid var(--edge)}
.nf{gap:10px}
.nf input{border-radius:999px;padding:14px 20px}
.mt-x{border-radius:999px;border-color:var(--edge)}
/* Socrates */
.soc-card{border-left:0;border-radius:var(--r) 0 0 var(--r)}
.msg{border-radius:16px}
.msg.bot{border-left:0;border:1px solid var(--line)}
.rec{border-top:0;border:1px solid var(--line);border-radius:var(--r-s)}
button.rec{border-top:0;border:1px solid var(--line)}
.rec:hover,.rec.on,button.rec.on{border-color:var(--red)}
.rec-w{border-radius:var(--r-s)}
.soc-fab{border-radius:999px;padding:8px 22px 8px 8px}
.fab-mark{border-radius:50%}
.soc-nudge{border-top:0;border:1px solid var(--line);border-radius:var(--r)}
.aa-toast{border-left:0;border-radius:14px}
/* player side list */
.pl-mods li.cur>.mh{border-radius:0}
.sl-list button::before{border-radius:50%}

/* ---------- Amanda's player and topic page (8 Oct 2026) ----------
   Header: the A, A+ and A++ buttons sit behind an "Aa" button, and "Avanti Change" is a quiet link under the red bar.
   Player: big round previous, play and next buttons, a row of pill buttons, a switch for playing on, and the
   transcript behind a "Show transcript" button with "Read instead". Topic page: the title slide as a picture,
   three figures, overview and outcomes from the products sheet, and the parts with a lock until they are yours. */
.ahead{justify-content:flex-start}
.szw{margin-left:auto;display:flex;align-items:center;position:relative;padding:0 6px 0 12px}
.sz-btn{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.9);border-radius:10px;font-family:var(--fh);font-size:1.25rem;line-height:1;padding:0 14px;min-height:44px;min-width:56px}
.sz-btn:hover,.sz-btn[aria-expanded="true"]{background:#fff;color:var(--red)}
.ahead :focus-visible{outline-color:#fff}
.sz-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:45;background:#fff;color:var(--ink);border-radius:var(--r-s);box-shadow:0 10px 30px rgba(26,26,26,.18);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:220px}
.sz-pop :focus-visible{outline-color:var(--near)}
.sz-h{font-size:1rem;color:var(--mute);font-weight:600}
.sz-pop .sz{display:flex;gap:8px}
.sz-pop .sz button{flex:1;min-height:44px;min-width:52px;background:#fff;color:var(--ink);border:1.5px solid var(--edge);border-radius:10px;font-family:var(--fb);font-weight:600;font-size:1rem;padding:0 8px}
.sz-pop .sz button[data-size="l"]{font-size:1.125rem}
.sz-pop .sz button[data-size="xl"]{font-size:1.25rem}
.sz-pop .sz button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.anav{margin-left:6px}
@media (max-width:860px){.szw{padding:0 0 0 12px}.menu-btn{padding:0 var(--pad) 0 14px}}
@media (min-width:861px) and (max-width:939px){html[data-size="l"] .menu-btn{padding:0 var(--pad) 0 14px}}
@media (min-width:861px) and (max-width:1023px){html[data-size="xl"] .menu-btn{padding:0 var(--pad) 0 14px}}
.toback{max-width:var(--max);margin:0 auto;width:100%;padding:6px var(--pad) 0}
.toback a{display:inline-flex;align-items:center;gap:8px;min-height:36px;color:var(--mute);font-size:1rem}
.toback a:hover{color:var(--red)}
.is-player .toback{max-width:none}

/* player: title block */
.pl-where{color:var(--mute);font-size:1.125rem;line-height:1.4}
.pl-head h1{font-family:var(--fh);font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;margin-top:4px}
/* the video: rounded on computers, edge to edge on phones, with a thin progress line along its foot */
.stage{flex:none;border-radius:var(--r-s);overflow:hidden;max-width:min(1100px,calc((100vh - 470px) * 16 / 9))}
.sl-video{border-top:0}
.sl-bar{height:5px;background:#4A5356}
.pl-meta,.pl-ctrl,.caps,.pl-about,.keys{max-width:1100px}
.pl-meta{display:flex;justify-content:space-between;gap:12px;color:var(--mute);font-size:1.125rem;margin-top:-4px;font-variant-numeric:tabular-nums}
.pl-meta span:empty{display:none}
/* controls */
.pl-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.pl-tp{display:flex;align-items:center;gap:16px}
.pc.rd{width:56px;height:56px;min-width:0;padding:0;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center}
.pc.rd svg{width:24px;height:24px;fill:currentColor}
.pc.rd:hover{background:var(--ink);color:#fff}
.pc.rd.play{width:72px;height:72px;padding:0;background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 14px rgba(222,0,0,.25)}
.pc.rd.play svg{width:30px;height:30px}
.pc.rd.play:not(.on) svg{margin-left:4px}
.pc.rd.play:hover{background:var(--red-d);border-color:var(--red-d)}
.pc.rd.play.ready{box-shadow:0 0 0 5px var(--red-tint)}
.pl-pills{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pc.pill,.spd-s.pill{height:44px;min-width:52px;border-radius:999px;border:1.5px solid var(--edge);background:transparent;color:var(--ink);padding:0 16px;font-family:var(--fb);font-weight:600;font-size:1.0625rem;letter-spacing:0;text-transform:none}
.spd-s.pill{padding:0 10px 0 14px;cursor:pointer}
.pc.pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pc.pill.on,.pc.pill.cc.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pl-auto{display:flex;align-items:center;gap:14px;font-size:1.125rem;color:var(--ink);cursor:pointer;margin-left:auto}
.pl-auto input{appearance:none;-webkit-appearance:none;flex:none;width:54px;height:32px;border-radius:999px;border:2px solid var(--edge);background:#fff;position:relative;cursor:pointer;margin:0;transition:background .15s,border-color .15s}
.pl-auto input::before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--edge);transition:transform .15s,background .15s}
.pl-auto input:checked{background:var(--red);border-color:var(--red)}
.pl-auto input:checked::before{transform:translateX(22px);background:#fff}
.pl-auto input:focus-visible{outline:2px solid var(--near);outline-offset:3px}
.pl-cap{color:var(--mute);font-size:1.0625rem;line-height:1.5;max-width:1100px}
.pl-cap:empty{display:none}
.pl-cchint{margin:10px 0 0;padding:10px 14px;border-left:4px solid var(--teal,#2E7F76);background:#F5F3F0;color:#1A1A1A;font-size:1.0625rem;line-height:1.45;max-width:640px}
.pl-cchint[hidden]{display:none}
/* transcript */
.caps{background:none;border:0;border-radius:0;padding:0}
.tx-tog{width:100%;min-height:56px;display:flex;align-items:center;justify-content:center;gap:12px;background:transparent;border:1.5px solid var(--ink);border-radius:var(--r-s);color:var(--near);font-family:var(--fh);font-size:1.375rem;padding:8px 16px}
.tx-tog:hover{background:#fff}
.tx-tog .chev{width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.tx-tog.on .chev{transform:translateY(3px) rotate(-135deg)}
.tx-alt{text-align:center;color:var(--mute);font-size:1.125rem;margin-top:12px}
.tx-read{background:none;border:0;padding:0 0 2px;color:var(--red);font-weight:600;font-size:inherit;border-bottom:2px solid var(--red)}
.tx-read:hover{color:var(--red-d);border-color:var(--red-d)}
.txbox{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;padding:16px 20px}
.tx-h{font-family:var(--fh);font-size:1.375rem;line-height:1.2;color:var(--near)}
.tx-btn{font-size:1rem}
.tx-list{max-height:460px}
.tx-list li{padding:12px 0 12px 14px;border-left:4px solid transparent}
.tx-list li.now{border-left-color:var(--red)}
.tx-list li:focus{outline:2px solid var(--near);outline-offset:-2px}
.tx-list p{font-size:1.125rem}
/* About this course, and the same overview and outcomes on topic and programme pages */
.pl-about{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
.pl-about-h{font-family:var(--fh);font-size:1.75rem;line-height:1.15;color:var(--near)}
.pl-about h3,.about h3{font-family:var(--fh);font-size:1.5rem;line-height:1.2;color:var(--near);margin:22px 0 10px}
.about h3:first-child{margin-top:0}
.pl-about p,.about p{font-size:1.125rem;line-height:1.6;color:var(--body);max-width:68ch}
.outs-lead{color:var(--mute) !important;margin-bottom:12px}
.outs2{list-style:none;display:grid;gap:12px;padding:0;margin:0}
.outs2 li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);box-shadow:inset 4px 0 0 var(--red);padding:16px 18px 16px 20px;font-size:1.125rem;line-height:1.5;color:var(--body)}
.pl-about .outs2 li{background:var(--paper)}
.outs2 .n{font-family:var(--fh);font-size:2rem;line-height:1;color:var(--red)}
.draft-gap{border:1.5px dashed var(--edge);border-radius:var(--r-s);padding:12px 16px;color:var(--mute) !important}
.mdl-i h4{font-family:var(--fh);font-weight:400;font-size:1.25rem;color:var(--near);margin:14px 0 6px}
.mdl-i h4:first-child{margin-top:4px}
.mdl summary{text-transform:none;letter-spacing:0;font-weight:600}
.mdl .outs2 li{grid-template-columns:28px 1fr;padding:12px 14px 12px 16px;font-size:1rem}
.mdl .outs2 .n{font-size:1.5rem}
.mdl .outs-lead{font-size:1rem}
.mdl-i{border-left:0;padding-left:0}
.mods .mdl-i li{display:grid;grid-template-columns:28px 1fr;gap:12px;border:1px solid var(--line);margin:0}
/* topic page head */
.tph h1{margin-top:clamp(20px,3vw,40px)}
.tp-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,44px);margin-top:34px;align-items:start;max-width:1200px}
.tp-card{position:relative;display:flex;flex-direction:column;justify-content:center;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#5C5652,#3A3633);color:#fff;padding:7% 8%;box-shadow:var(--shadow)}
.tp-logo{position:absolute;top:6%;left:4%;width:30%;max-width:220px;height:auto;border-radius:4px}
.tp-k{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:center;margin-top:8%}
.tp-t{font-family:var(--fh);font-size:clamp(1.25rem,2.6vw,2.25rem);line-height:1.15;text-align:center;margin-top:8px}
.tp-play{position:absolute;left:4%;bottom:7%;width:64px;height:64px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.tp-play svg{width:28px;height:28px;fill:#fff;margin-left:4px}
.tp-chip{position:absolute;right:4%;bottom:7%;background:#fff;color:var(--near);border-radius:999px;padding:6px 14px;font-weight:600;font-size:1rem;max-width:60%}
a.tp-card:hover .tp-play{background:var(--red-d)}
a.tp-card:hover .tp-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tp-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0}
.tp-stats li{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;font-size:1rem;color:var(--mute);line-height:1.3}
.tp-stats b{display:block;font-family:var(--fh);font-weight:400;font-size:1.5rem;color:var(--red);margin-bottom:2px}
.tph .acts{flex-direction:column;align-items:stretch;margin-top:20px}
.tph .acts .btn{justify-content:center}
.tp-note{margin-top:12px;color:var(--mute);font-size:1rem;line-height:1.5}
@media (max-width:860px){
  .tp-grid{grid-template-columns:minmax(0,1fr)}
  .tp-play{width:52px;height:52px}
  .tp-play svg{width:22px;height:22px}
}
/* phones: the title sits clear of the play button and the Taster label, and the three figures stay side by side */
@media (max-width:600px){
  .tp-card{aspect-ratio:auto;min-height:220px;padding:76px 18px 84px}
  .tp-logo{width:42%;max-width:170px;top:14px;left:14px}
  .tp-k{margin-top:0}
  .tp-t{font-size:1.375rem}
  .tp-play{left:14px;bottom:14px}
  .tp-chip{right:14px;bottom:22px;max-width:calc(100% - 96px)}
  .tp-stats{gap:8px}
  .tp-stats li{padding:10px 10px}
  .tp-stats b{font-size:1.25rem}
}
/* parts: Free taster on part 1, a lock until a part is yours */
.mods .mm{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.pt-free{color:var(--red);font-weight:600;letter-spacing:0;text-transform:none;font-size:1rem}
.pt-lock{display:inline-flex;color:var(--mute)}
.pt-lock svg{width:20px;height:20px;fill:currentColor}
.pt-own{display:none;color:var(--ink);font-weight:600;letter-spacing:0;text-transform:none;font-size:1rem}
.mods li.own .pt-lock{display:none}
.mods li.own .pt-own{display:inline}
@media (max-width:860px){.mods .mm{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left}}
.tp-try p{margin-top:12px;font-size:1.125rem;color:#fff}

/* phones: the video runs edge to edge and the controls stack as in Amanda's mock-up */
@media (max-width:860px){
  .pl-main{gap:14px}
  .stage{border-radius:0;margin:0 -16px;width:calc(100% + 32px);max-width:none}
  .pl-ctrl{flex-direction:column;align-items:stretch;gap:20px}
  .pl-tp{justify-content:center;gap:clamp(20px,9vw,44px)}
  .pc.rd{width:60px;height:60px}
  .pc.rd.play{width:80px;height:80px}
  .pc.rd.play svg{width:34px;height:34px}
  .pl-pills{justify-content:space-evenly;gap:10px 4px}
  .pc.pill{padding:0 10px;font-size:1rem}
  .spd-s.pill{padding:0 2px 0 8px;font-size:1rem}
  .pl-auto{margin-left:0;justify-content:space-between}
}
/* short windows and phones held sideways keep the stacked player (see above); the video is sized to the window */
@media (max-height:500px), (orientation:landscape) and (max-height:650px){.stage{border-radius:0}}
@media (max-height:500px), (orientation:landscape) and (max-height:650px){.stage{margin:0;width:100%;min-width:0;max-width:calc((100vh - 100px) * 16 / 9);max-width:calc((100svh - 100px) * 16 / 9)}}
/* the slide count and time line up with the video's edges */
.pl-meta{max-width:min(1100px,calc((100vh - 470px) * 16 / 9));min-width:320px}
@media (max-width:860px){.pl-meta{max-width:none;min-width:0}}
@media (max-height:500px), (orientation:landscape) and (max-height:650px){.pl-meta{min-width:0;max-width:calc((100vh - 100px) * 16 / 9);max-width:calc((100svh - 100px) * 16 / 9)}}
/* While Socrates is open the page behind it is out of use, so the Avanti Change link under the header hides with it */
body.soc-open .toback{visibility:hidden}
.stage:fullscreen,.stage.fs{border-radius:0}
/* Each part's overview and outcomes show open, no dropdown (Ben, 8 Oct 2026) */
.mods .mdl{margin-top:14px}
.mdl-h{font-family:var(--fh);font-weight:400;font-size:1.25rem;color:var(--near);margin:14px 0 6px}
/* The course's subtitle under its title in the player (products sheet, 8 Oct 2026) */
.pl-sub{font-size:1.125rem;line-height:1.45;color:var(--body);margin:6px 0 0}
.pl-sub:empty{display:none}
/* Each part's own page is linked plainly from the topic page (Ben, 8 Oct 2026: "make it obvious") */
.mods .mt b a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.mods .mt b a:hover{color:var(--red)}
.pt-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;padding:0 18px;border-radius:999px;background:var(--red);color:#fff;font-weight:600;font-size:1rem;text-decoration:none}
.pt-more:hover{background:var(--red-d)}
.pt-more:focus-visible{outline:3px solid var(--near);outline-offset:2px}
.pt-about .about h3:first-child{margin-top:0}

/* ---------- Streamlined Academy (Ben, 9 Oct 2026: "much easier to use", closer to his mock-up) ---------- */
/* Home: one red hero with one button. The Avanti Change link under the header joins the red. */
body:has(main > .hx) .toback{max-width:none;background:var(--red);padding:6px max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad))) 0}
body:has(main > .hx) .toback a{color:#fff}
body:has(main > .hx) .toback a:hover{color:#fff;text-decoration:underline}
body:has(main > .hx) .toback :focus-visible{outline-color:#fff}
.hx{background:var(--red);color:#fff;padding:clamp(40px,6vw,96px) var(--pad) clamp(56px,7vw,112px)}
.hx-in{max-width:var(--max);margin:0 auto}
.hx h1{font-family:var(--fh);font-weight:400;font-size:clamp(2.5rem,5.6vw,5rem);line-height:1.06;letter-spacing:0;max-width:15em;color:#fff}
.hx-p{margin-top:28px;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.5;max-width:34em}
.hx .hx-btn{margin-top:36px;border-radius:999px;padding:17px 30px}
.hx-note{margin-top:18px;font-size:1rem;line-height:1.5}
.hx :focus-visible{outline-color:#fff}

/* The two shelves of topics */
.shelves{scroll-margin-top:var(--hh,84px)}
.shelf{padding:clamp(56px,7vw,100px) var(--pad)}
.shelf-in{max-width:var(--max);margin:0 auto}
.shelf-k{font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.shelf h2,.ways3 h2{font-family:var(--fh);font-weight:400;font-size:clamp(2.25rem,4.2vw,3.5rem);line-height:1.08;letter-spacing:0;color:var(--near);margin-top:12px}
.shelf-p{margin-top:18px;max-width:760px;padding-bottom:28px;border-bottom:2px solid var(--near);font-size:1.125rem;line-height:1.55;color:var(--body)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:40px 40px;margin-top:40px}
.sg h3{font-family:var(--fb);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--near);margin-bottom:12px}
.shelf ul{list-style:none}
.shelf li{font-size:1.125rem;line-height:1.35}
.shelf li a{display:inline-block;padding:6px 0;color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
.shelf li a:hover{color:var(--red);text-decoration-color:currentColor}
.shelf .soon-t{padding:6px 0;color:var(--mute)}
.shelf .tag{display:inline-block;font-size:1rem;font-weight:600;line-height:1.2;padding:2px 10px;border:1px solid currentColor;border-radius:999px;margin-left:4px;white-space:nowrap}
.shelf.dark{background:var(--ink);color:#fff}
.shelf.dark .shelf-k{color:var(--cream)}
.shelf.dark h2{color:#fff}
.shelf.dark .shelf-p{color:#fff;border-bottom-color:var(--cream)}
.shelf.dark :focus-visible{outline-color:#fff}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:20px;margin-top:40px;align-items:start}
.sc{background:#4A5356;border-radius:var(--r);padding:30px 28px 26px}
.sc h3{font-family:var(--fh);font-weight:700;font-size:1.5rem;line-height:1.2;letter-spacing:0;color:#fff;margin-bottom:14px}
.shelf.dark li a{color:#fff}
.shelf.dark li a:hover{color:#fff;text-decoration-color:currentColor}
.shelf.dark .soon-t{color:var(--cream)}

/* Three plain ways in */
.ways3{background:#fff;padding:clamp(56px,7vw,96px) var(--pad);border-bottom:1px solid var(--line)}
.w3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:16px;margin-top:32px}
.w3c{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 24px;transition:border-color .15s,transform .15s}
.w3c:hover{border-color:var(--red);transform:translateY(-2px)}
.w3c h3{font-family:var(--fh);font-weight:400;font-size:1.625rem;line-height:1.15;color:var(--near)}
.w3c p{font-size:1.0625rem;line-height:1.5;color:var(--body);flex:1}
.w3-go{color:var(--red);font-weight:600;font-size:1rem;margin-top:6px}
.w3-go b{font-weight:400}

/* Topic page: one list. Each part and each Focus has its price and button beside it, so there is no separate price table. */
.pt-buy{display:flex;align-items:center;gap:10px;margin-top:4px;letter-spacing:0;text-transform:none}
.pt-buy .pr,.fh-buy .pr{font-weight:700;font-size:1.125rem;color:var(--near);letter-spacing:0}
.pt-buy .buy.sm,.fh-buy .buy.sm{margin-top:0;border-radius:999px;padding:9px 16px}
.mods .mm .owned{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.fh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 24px;flex-wrap:wrap}
.fh-t{flex:1 1 18rem;min-width:0}
.fh-buy{display:flex;align-items:center;gap:12px;flex:none}
.side-buy{margin-top:26px}
.side-buy .btn{border-radius:999px}
@media (max-width:860px){.pt-buy{margin-top:0;margin-left:auto}.mods .mm{flex-wrap:wrap}}
/* The red stays for the overview link and the main buttons: a part's own Add to basket is outlined */
.pt-buy .buy.sm,.fh-buy .buy.sm{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pt-buy .buy.sm:hover,.fh-buy .buy.sm:hover{background:var(--ink);color:#fff}
.fds.compact .fdrow{margin-left:0}

/* ---------- Jon and Amanda's review (10 Oct 2026), Pass 1: structure ---------- */
/* S7 menu: "My learning passport" on the right of the menu; Sign in steps aside once signed in */
.anav a.passport{font-weight:600}
.anav a[hidden]{display:none}
.af-li{display:inline-flex;align-items:center;gap:8px}
.li-ic{width:18px;height:18px;fill:currentColor;flex:none}

/* S7 Academy landing: About the Academy, a search box, three columns and the Signature programmes */
.ab-ac{background:#fff;padding:clamp(48px,6vw,88px) var(--pad);border-bottom:1px solid var(--line)}
.ab-ac h2,.cols h2{font-family:var(--fh);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:0;color:var(--near)}
.ph-copy{margin-top:18px;max-width:760px;padding:14px 18px;border:1.5px dashed var(--edge);border-radius:var(--r-s);color:var(--mute);font-size:1.125rem;line-height:1.5}
.ab-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,4vw,56px);margin-top:36px;align-items:start}
.ab-grid h3{font-family:var(--fb);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--near);margin-bottom:14px}
.ab-ways,.ab-how{list-style:none;border-top:1px solid var(--line)}
.ab-ways li{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.ab-ways .chip{display:none}
.ab-ways b{font-family:var(--fh);font-weight:400;font-size:1.375rem;color:var(--near)}
.ab-ways .mono{color:var(--mute);grid-column:3;grid-row:1;white-space:nowrap}
.ab-ways p{grid-column:2;grid-row:1;font-size:1.0625rem;line-height:1.45;color:var(--body)}
.ab-how li{padding:16px 0;border-bottom:1px solid var(--line)}
.ab-how b{font-family:var(--fh);font-weight:400;font-size:1.375rem;color:var(--near)}
.ab-how p{margin-top:4px;font-size:1.0625rem;line-height:1.5;color:var(--body)}
.ab-how .link,.ab-grid>div>.link{margin-top:10px}
@media (max-width:860px){
  .ab-grid{grid-template-columns:minmax(0,1fr)}
  .ab-ways li{grid-template-columns:minmax(0,1fr) auto}
  .ab-ways b{grid-column:1;grid-row:1}
  .ab-ways .mono{grid-column:2;grid-row:1}
  .ab-ways p{grid-column:1/-1;grid-row:2}
}
.asearch{padding:clamp(36px,5vw,56px) var(--pad) 0}
.asearch label{display:block;font-family:var(--fh);font-size:1.5rem;color:var(--near);margin-bottom:10px}
.asearch input{width:100%;max-width:760px;min-height:52px;padding:10px 18px;font-size:1.125rem;color:var(--ink);background:#fff;border:1.5px solid var(--edge);border-radius:999px}
.asearch input:focus-visible{outline:3px solid var(--near);outline-offset:2px}
.as-n{margin-top:10px;font-size:1rem;color:var(--mute);min-height:1.5em}
.as-res{list-style:none;max-width:760px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);margin-top:4px;overflow:hidden}
.as-res a{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding:12px 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.as-res li:last-child a{border-bottom:0}
.as-res a:hover,.as-res a:focus-visible{background:var(--paper)}
.as-res a:focus-visible{outline:3px solid var(--near);outline-offset:-3px}
.as-res b{font-weight:600;font-size:1.0625rem}
.as-res small{color:var(--mute);font-size:1rem}
.as-res .as-k{margin-left:auto;font-size:1rem;color:var(--red);font-weight:600}
.cols{padding:clamp(40px,5vw,72px) var(--pad) clamp(56px,7vw,96px);scroll-margin-top:var(--hh,84px)}
.cgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.cols.four .cgrid3{grid-template-columns:repeat(4,minmax(0,1fr))}
.ccol{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 24px;box-shadow:var(--shadow)}
.ccol h2{font-size:clamp(1.625rem,2.4vw,2.125rem);margin-bottom:6px}
.cg{margin-top:20px}
.cg h3{font-family:var(--fb);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.ccol ul{list-style:none}
.ccol li{font-size:1.0625rem;line-height:1.35}
.ccol li a{display:inline-block;padding:5px 0;color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
.ccol li a:hover{color:var(--red);text-decoration-color:currentColor}
.ccol .soon-t{padding:5px 0;color:var(--mute)}
.ccol .tag{display:inline-block;font-size:1rem;font-weight:600;line-height:1.2;padding:2px 10px;border:1px solid currentColor;border-radius:999px;margin-left:4px;white-space:nowrap}
.plist{margin-top:14px}
.plist li{padding:8px 0;border-top:1px solid var(--line)}
.plist li:first-child{border-top:0}
.plist li a{font-family:var(--fh);font-size:1.25rem;padding:2px 0}
.plist small{display:block;color:var(--mute);font-size:1rem}
@media (max-width:1100px){.cols.four .cgrid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.cgrid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.cols.four .cgrid3{grid-template-columns:minmax(0,1fr)}}

/* S8 topic sales page, after the mock-up (sales.html) */
.tph .lede{margin-top:14px}
.tp-sub{font-family:var(--fh);font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;color:var(--red);margin-top:10px}
.tp-grid{grid-template-columns:minmax(0,4fr) minmax(0,3fr);max-width:none}
.tp-card{justify-content:center;align-items:center;text-align:center;background:linear-gradient(135deg,#4A5356,#2E3436)}
.tp-k{margin-top:0;font-size:1rem}
.tp-t{font-size:clamp(1.75rem,3vw,2.75rem)}
.tp-s{font-family:var(--fh);font-size:clamp(1.375rem,2.2vw,2rem);line-height:1.15;margin-top:6px}
.tp-go{position:absolute;left:4%;bottom:7%;display:flex;align-items:center;gap:16px;font-weight:600;font-size:1.125rem;color:#fff;text-align:left}
.tp-go .tp-play{position:static;flex:none}
a.tp-card:hover .tp-go{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.tp-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.tp-card{padding:64px 18px 96px}.tp-go{left:14px;bottom:16px;right:14px;font-size:1.0625rem;gap:12px}}
.tp-buy{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,30px);box-shadow:var(--shadow)}
.tp-buy .acts{flex-direction:column;align-items:stretch;margin-top:20px}
.tp-buy .acts .btn{justify-content:center}
.tp-also{margin-top:18px;font-size:1.0625rem;color:var(--body)}
.opts{margin-top:10px}
.opts summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 18px;background:var(--paper);border:1.5px solid var(--edge);border-radius:var(--r-s);font-weight:600;font-size:1.0625rem;color:var(--ink);cursor:pointer}
.opts summary::-webkit-details-marker{display:none}
.opts summary::after{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid currentColor;flex:none;transition:transform .15s}
.opts[open] summary::after{transform:rotate(180deg)}
.opts summary:focus-visible{outline:3px solid var(--near);outline-offset:2px}
.opts-l{list-style:none;margin-top:8px;border:1px solid var(--line);border-radius:var(--r-s);max-height:26rem;overflow-y:auto}
.opts-l li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.opts-l li:last-child{border-bottom:0}
.opts-l .ot{min-width:0}
.opts-l b{display:block;font-weight:600;font-size:1rem;line-height:1.3;color:var(--near)}
.opts-l small{display:block;color:var(--mute);font-size:1rem}
.opts-l .buy.sm,.opts-l .owned{flex:none;border-radius:999px;padding:9px 16px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);text-transform:none;letter-spacing:0}
.opts-l .buy.sm:hover{background:var(--ink);color:#fff}
.tp-buy .tp-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tp-over .big{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.55;color:var(--ink);max-width:46em}
.tp-who{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tp-who li{background:var(--cream);color:var(--ink);border-radius:999px;padding:8px 16px;font-size:1rem;line-height:1.35}
.tps{max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,84px) var(--pad);border-top:1px solid var(--line)}
.tps>h2{font-family:var(--fh);font-weight:400;font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.04;letter-spacing:0;color:var(--near)}
.tps>h2 em{color:var(--red)}
.gain{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.gain li{background:#fff;border-radius:var(--r);border-top:4px solid var(--red);padding:24px 26px;box-shadow:var(--shadow)}
.gain .n{display:block;font-family:var(--fh);font-size:2.5rem;line-height:1;color:var(--red);margin-bottom:12px}
.gain p{font-size:1.0625rem;line-height:1.55;color:var(--body)}
.allouts{margin-top:20px}
.allouts summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:1.0625rem;color:var(--red);cursor:pointer}
.allouts summary:focus-visible{outline:3px solid var(--near);outline-offset:2px}
.allouts .outs2{margin-top:12px;max-width:900px}
@media (max-width:860px){.gain{grid-template-columns:minmax(0,1fr)}}
.mgroup{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tps>h2+.mgroup{margin-top:30px}
.mg-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 20px;background:var(--cream);padding:18px 24px}
.mg-h h3{font-family:var(--fh);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--near)}
.mg-h .mono{color:var(--ink)}
.mlist{list-style:none}
.mlist>li{border-top:1px solid var(--line)}
.mlist>li:first-child{border-top:0}
.mlist summary,.mlist .mrow{display:grid;grid-template-columns:3.25rem minmax(0,1fr) auto 1.5rem;gap:4px 16px;align-items:center;padding:16px 24px}
.mlist .mrow{grid-template-columns:3.25rem minmax(0,1fr) auto}
.mlist summary{list-style:none;cursor:pointer}
.mlist summary::-webkit-details-marker{display:none}
.mlist summary:hover{background:var(--paper)}
.mlist summary:focus-visible{outline:3px solid var(--near);outline-offset:-3px}
.mlist .mn{font-family:var(--fh);font-size:1.5rem;color:var(--red)}
.mlist .mt b{font-weight:600;font-size:1.125rem;color:var(--near);margin-right:10px}
.mlist .mt small{display:block;margin-top:4px;font-size:1rem;line-height:1.45;color:var(--body)}
.mlist .mm{color:var(--mute);font-size:1rem;white-space:nowrap}
.mlist .chev{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--ink);justify-self:center;transition:transform .15s}
.mlist details[open] .chev{transform:rotate(180deg)}
.mlist .mx{padding:0 24px 20px calc(24px + 3.25rem + 16px)}
.mlist .mx p{font-size:1.0625rem;line-height:1.55;color:var(--body);max-width:52em}
.mlist .mx .link{margin-top:12px}
.tg-free{display:inline-block;vertical-align:2px;background:var(--red);color:#fff;border-radius:999px;padding:2px 10px;font-weight:700;font-size:1rem;line-height:1.3}
@media (max-width:600px){
  .mlist summary,.mlist .mrow{grid-template-columns:2.25rem minmax(0,1fr) 1.25rem;padding:14px 16px}
  .mlist .mrow{grid-template-columns:2.25rem minmax(0,1fr)}
  .mlist .mm{grid-column:2;grid-row:2}
  .mlist .chev{grid-column:3;grid-row:1}
  .mlist .mx{padding:0 16px 18px calc(16px + 2.25rem + 16px)}
  .mg-h{padding:16px}
}
.wfp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px;max-width:1100px}
.wfp .fd{display:flex;align-items:center;gap:18px;background:#fff;border-radius:var(--r);border-left:4px solid var(--red);padding:18px 22px;box-shadow:var(--shadow)}
.wfp .fd img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:0;flex:none}
.wfp h3{font-family:var(--fb);font-weight:700;font-size:1.125rem;color:var(--near)}
.wfp span{display:block;font-size:1rem;color:var(--mute);margin-top:2px}
@media (max-width:760px){.wfp{grid-template-columns:minmax(0,1fr)}}
.tps .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));margin-top:30px}
.tps .pcard{background:#fff}
/* the slim bar once the buy box has scrolled away: under the menu on wide screens, at the foot of the screen on phones */
.tp-bar{position:fixed;left:0;right:0;top:var(--hh,84px);z-index:25;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(26,26,26,.08)}
.tp-bar-in{max-width:var(--max);margin:0 auto;padding:10px var(--pad);display:flex;align-items:center;gap:12px}
.tp-bar b{font-family:var(--fh);font-weight:400;font-size:1.375rem;color:var(--near);margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-bar .btn{border-radius:999px}
@media (max-width:860px){
  .tp-bar{top:auto;bottom:0;border-bottom:0;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(26,26,26,.08)}
  .tp-bar-in{flex-wrap:wrap;padding:10px 16px}
  .tp-bar b{flex:1 0 100%;font-size:1.125rem}
  .tp-bar .btn{flex:1 1 0;justify-content:center;padding:10px 12px}
}
html.has-bar{scroll-padding-top:calc(var(--hh,84px) + 80px)}
@media (max-width:860px){html.has-bar{scroll-padding-top:var(--hh,84px);scroll-padding-bottom:140px}body.has-bar main{padding-bottom:140px}}
/* S10 the licensed instruments, in one line */
.lic-note{margin-top:24px;max-width:46em;font-size:1.125rem;line-height:1.55;color:var(--body)}
/* With "Academy Home" and "My learning passport" in the menu (S7) it needs more room beside the logo, so it goes
   behind the Menu button under 1024px (A), 1100px (A+) and 1200px (A++) */
@media (min-width:861px) and (max-width:1023px){
  .menu-btn{display:flex}
  .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}
  .anav.open{display:flex}
  .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
  .anav a.signin{padding:0 12px}
}
@media (min-width:1024px) and (max-width:1099px){
  html[data-size="l"] .menu-btn,html[data-size="xl"] .menu-btn{display:flex}
  html[data-size="l"] .anav,html[data-size="xl"] .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}
  html[data-size="l"] .anav.open,html[data-size="xl"] .anav.open{display:flex}
  html[data-size="l"] .anav a,html[data-size="xl"] .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  html[data-size="l"] .anav a.on,html[data-size="xl"] .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
}
@media (min-width:1100px) and (max-width:1199px){
  html[data-size="xl"] .menu-btn{display:flex}
  html[data-size="xl"] .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}
  html[data-size="xl"] .anav.open{display:flex}
  html[data-size="xl"] .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  html[data-size="xl"] .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
}

/* ---------- Jon and Amanda's review (10 Oct 2026), Pass 2 ---------- */
/* B1: the free Taster form, a modal dialog over the page (mock-up D9) */
.tgate{border:0;padding:0;margin:auto;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 24px 60px rgba(26,26,26,.25)}
.tgate::backdrop{background:rgba(26,26,26,.55)}
.tg-in{position:relative;padding:40px 44px 34px}
.tg-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);font-size:28px;line-height:1}
.tg-x:hover{background:var(--paper)}
.tg-k{color:var(--red);margin:0 0 10px;padding-right:40px}
.tgate h2{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-weight:400;font-size:clamp(1.9rem,4.5vw,2.5rem);line-height:1.1;color:var(--ink);margin:0 0 14px}
.tgate h2 em{color:var(--red)}
.tg-intro,.tg-done p{font-size:1.125rem;line-height:1.55;color:var(--body);margin:0 0 20px}
.tg-f{display:grid}
.tg-f label{font-weight:700;color:var(--ink);margin:0 0 8px;font-size:1.0625rem}
.tg-f input[type=text],.tg-f input:not([type]),.tg-f input[type=email]{font:inherit;font-size:1.125rem;padding:14px 18px;border:1.5px solid #8A8178;border-radius:12px;background:#fff;color:var(--near);margin:0 0 18px;width:100%}
.tg-f input::placeholder{color:#6B6560;opacity:1}
.tg-f input[aria-invalid=true]{border-color:var(--red);margin-bottom:6px}
.tg-fe{color:var(--red-d);margin:0 0 16px;font-size:1rem}
.tg-news{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:4px 0 20px}
.tg-news input{width:22px;height:22px;margin-top:2px;accent-color:var(--ink)}
.tg-news label{font-weight:400;margin:0;color:var(--body);font-size:1.0625rem;line-height:1.5}
.tg-ts{margin:0 0 16px}
.tg-err{color:var(--red-d);margin:0 0 14px}
.tgate .tg-go{justify-self:stretch;justify-content:center;width:100%}
.tg-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:1rem;line-height:1.6;color:var(--mute)}
.tg-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tg-done:focus{outline:none}
@media (max-width:560px){.tg-in{padding:34px 22px 26px}}

/* B5: modules open in order */
.lk-ic{display:inline-flex;width:1em;height:1em;vertical-align:-.12em;margin-right:6px}
.lk-ic svg{width:100%;height:100%;fill:currentColor}
.pl-mods li.locked .mh b{color:var(--mute)}
.pl-mods li.locked .sl-list button{color:var(--mute);cursor:not-allowed}
.lk-why{display:flex;align-items:flex-start;gap:2px;margin:0 14px 10px;padding:8px 12px;background:var(--paper);border-left:3px solid var(--ink);font-size:1rem;color:var(--ink)}
.lk-why .lk-ic{margin-top:3px}
.pl-lock h2 .lk-ic{width:.8em;height:.8em}
.tx-end{display:grid;gap:8px;justify-items:start;padding:14px 0 4px;border-top:1px solid var(--line);margin-top:8px}
.tx-end-n{color:var(--mute);font-size:1rem;max-width:60ch}
.tx-rd{font-weight:600}
.tx-rd:disabled{text-decoration:none;color:var(--mute);cursor:default}

/* B7: each module's first slide (its title page) before the video plays */
.sl-poster{display:none}
.slide.has-poster{padding:0;border-top:0;background:var(--near)}
.slide.has-poster::after,.slide.has-poster .sl-n,.slide.has-poster .sl-logo{display:none}
.slide.has-poster .sl-poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.has-poster .sl-k,.slide.has-poster .sl-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* B1: the passport on My learning passport, the emailed sign-in link and the checkout invitation */
.pp-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 22px;font-size:1.0625rem}
.pp-dl dt{font-weight:700;color:var(--ink)}
.pp-dl dd{color:var(--body);overflow-wrap:anywhere}
.pp-none{color:var(--mute)}
.pp-news{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:0 0 8px;max-width:620px}
.pp-news input{width:22px;height:22px;margin-top:2px;accent-color:var(--ink)}
.pp-news label{line-height:1.5}
.pp-pw{margin-top:28px}
.pp-pw h3{font-size:1.25rem;color:var(--ink)}
.pp-pw p{color:var(--body);line-height:1.55}
.pp-box .btn{margin-top:12px}
.si-or{margin-top:14px;font-size:1rem}
.si-link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:1rem;font-weight:600}
.si-link:hover{color:var(--red)}
.ck-pw{margin:0 0 18px;padding:12px 16px;background:#fff;border-left:4px solid var(--ink);line-height:1.55}
.ck-pw a{text-decoration:underline;text-underline-offset:3px}

/* ---- Pass 3: Style (Jon and Amanda's review, 10 Oct 2026) ---- */
/* ST3: the part-italic headings come back: the accent word in a heading is Instrument Serif Italic, in red */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../../assets/fonts/instrument-serif-italic.woff2) format('woff2')}
:root{--fi:'Instrument Serif',Georgia,serif}
html:root body :is(h1,h2,h3,h4) em,html:root body .tp-sub,html:root body .tp-s{font-family:var(--fi);font-style:italic;font-weight:400;letter-spacing:0}
:is(h1,h2,h3,h4) em,.tp-sub{color:var(--red)}
/* ST1: the menu strip is sand, with ink text and the page you are on in red */
.ahead{background:var(--cream);color:var(--ink);box-shadow:0 1px 0 rgba(58,66,69,.14)}
.anav a,.anav a:visited{color:var(--ink);border-left-color:rgba(58,66,69,.16)}
.anav a:hover{background:#DDD3C0}
.anav a.on{color:var(--red-d)}
.anav a.signin,.anav a.signin:visited{color:#fff}
.menu-btn i{background:var(--ink)}
.sz-btn{color:var(--ink);border-color:var(--ink)}
.sz-btn:hover,.sz-btn[aria-expanded="true"]{background:var(--ink);color:#fff}
.bk-n{background:rgba(58,66,69,.12);color:var(--ink)}
.basket.has .bk-n{background:var(--red);color:#fff}
.ahead :focus-visible{outline-color:var(--ink)}
/* ST2: less red on the Academy landing page: the hero is sand with ink text; red stays for buttons and accents */
body:has(main > .hx) .toback{background:var(--cream)}
body:has(main > .hx) .toback a{color:var(--ink)}
body:has(main > .hx) .toback a:hover{color:var(--red-d)}
body:has(main > .hx) .toback :focus-visible{outline-color:var(--ink)}
.hx{background:var(--cream);color:var(--ink)}
.hx h1{color:var(--ink)}
.hx .hx-btn{background:var(--red);color:#fff}
.hx .hx-btn:hover{background:var(--red-d)}
.hx :focus-visible{outline-color:var(--ink)}
.fds.compact .fds-h{font-family:var(--fh);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:0;color:var(--near);margin-bottom:24px}
/* the phone menu drops down full width, with a shadow so it stands clear of a sand page */
.anav.open{margin-left:0;box-shadow:0 10px 18px rgba(26,26,26,.12);border-bottom:1px solid rgba(58,66,69,.18)}
.anav.open a{padding-left:var(--pad);padding-right:var(--pad)}
/* C11: where our own instruments' thinking comes from, in one place */
.own-note{margin-top:24px;max-width:46em;font-size:1.125rem;line-height:1.55;color:var(--body)}
.own-note a{color:var(--red-d);text-decoration:underline;text-underline-offset:3px}

/* ---------- Amanda's v42 list (10 Oct 2026) ---------- */
/* L1: the search sits in the hero in place of the old "Find your topic" button: a white field about 620px wide */
.hx .asearch{padding:0;margin-top:32px;max-width:620px}
.hx .asearch label{display:block;font-family:var(--fh);font-size:1.5rem;line-height:1.2;color:var(--ink);margin-bottom:10px}
.hx .asearch input{max-width:620px;background:#fff;border-color:var(--ink)}
.hx .asearch input::placeholder{color:var(--mute);opacity:1}
.hx .as-n{color:var(--ink)}
.hx .as-res{max-width:620px}
.hx .hx-note{margin-top:6px}
/* L3: the third box is "Programmes": the flagship list under a small red label, then the Signature programmes in a
   sand panel */
.cp-k{margin-top:14px;font-family:var(--fb);font-weight:600;font-size:1rem;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.cprog .plist{margin-top:8px}
.cprog .csig{margin-top:22px;background:var(--cream);border-radius:var(--r-s);padding:16px 18px 12px}
.cprog .csig .cp-k{margin-top:0;color:var(--red-d)}
.cprog .csig .plist li{border-top-color:rgba(58,66,69,.18)}
.cprog .csig .plist li:first-child{border-top:0}
.cprog .csig .plist small{color:var(--ink)}
/* S1: a section next to sand is paper, not white (About the Academy) */
.ab-ac{background:var(--paper)}
/* N1: "My learning passport" is a soft grey pill, apart from the black Sign in button; the other items keep the
   active-page underline */
.anav a.passport,.anav a.passport:visited{background:var(--stone);color:var(--ink)}
.anav a.passport:hover{background:#CFCBC6}
.anav a.passport[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--ink)}
@media (min-width:1101px){
  html:not([data-size="l"]):not([data-size="xl"]) .anav a.passport{margin:14px 0 14px 10px;border-radius:999px;padding:0 22px;border-left:0}
}
/* W1: Ways to Learn as equal boxes (white cards on paper, the same height, tops aligned) in two labelled groups */
.ways-boxes{max-width:var(--max);margin:0 auto;padding:48px var(--pad) 72px;border-bottom:1px solid var(--line)}
.wgroup+.wgroup{margin-top:44px}
.wg-h{font-family:var(--fh);font-weight:400;font-size:clamp(1.625rem,2.4vw,2.125rem);line-height:1.15;color:var(--near)}
.wgrid{list-style:none;display:grid;gap:16px;margin-top:18px;align-items:stretch}
.wgrid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.wgrid.two{grid-template-columns:repeat(5,minmax(0,1fr))}
.wbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 20px 24px;display:flex;flex-direction:column;align-items:flex-start}
.wbox h3{font-family:var(--fh);font-weight:400;font-size:1.75rem;line-height:1.1;color:var(--near);margin:16px 0 6px}
.wbox .mono{color:var(--red-d)}
.wbox p{margin-top:12px;font-size:1rem;line-height:1.5;color:var(--body)}
@media (max-width:1100px){.wgrid.five,.wgrid.two{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.wgrid.five,.wgrid.two{grid-template-columns:minmax(0,1fr)}}

/* ---- v43, the copy refresh (Jon and Amanda, 10 Oct 2026) ---- */
/* Academy home: the line under each box heading, the About the Academy text and the founders' one-line descriptions */
.ccol .cc-line{font-size:1.0625rem;line-height:1.45;color:var(--body);margin:0 0 14px;max-width:34em}
.ab-intro{margin-top:18px;max-width:820px}
.ab-intro p{font-size:1.125rem;line-height:1.6;color:var(--body)}
.ab-intro p+p{margin-top:12px}
.fds.compact .fd p{margin-top:6px;font-size:1rem;line-height:1.45}
/* Academy pages: the membership band has a line under its heading */
.cta2 h2+p{margin-top:12px;font-size:1.125rem;line-height:1.5;color:#fff;max-width:640px}
/* Programmes: Signature cards */
.pcard.sig{border-top-color:var(--ink)}
.chip.t-signature{background:var(--ink)}
/* Development: the "For you" and "For your team or organisation" groups */
.dsub{font-family:var(--fh);font-weight:400;font-size:1.625rem;line-height:1.15;color:var(--near);margin:0 0 14px}
.dgrid+.dsub{margin-top:36px}
.dteam{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:0 0 16px}
.dteam li{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.dteam li b{font-size:1.125rem;color:var(--near)}
.dteam li span{font-size:1rem;line-height:1.5;color:var(--body)}
@media (max-width:700px){.dteam{grid-template-columns:1fr}}

/* ---- v44, Amanda's v43 review and Jon's notes ---- */
/* AC1 (the hero photo) is replaced by AC3 in the v45 block below */
/* AC2: half the space between the three boxes and About the Academy */
.cols{padding-bottom:clamp(28px,3.5vw,48px)}
.ab-ac{padding-top:clamp(24px,3vw,44px)}
/* DV1: the labels under the Development title are plain, none picked out */
.aph .meta.plain span,.aph .meta.plain span:first-child{background:#fff;color:var(--ink);border-color:var(--line)}
/* DV2: "Register interest" while an item has no price */
.buy.reg{background:#fff;color:var(--near);box-shadow:inset 0 0 0 1.5px var(--near)}
.buy.reg:hover{background:var(--near);color:#fff}
/* TP2: a short headline in each "What you will gain" box */
.gain h3{font-family:var(--fh);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--near);margin:0 0 8px}
/* OR1: the line under How it works */
.steps-after{margin-top:18px;font-size:1.125rem;line-height:1.55;color:var(--body)}

/* ---- v45, Amanda's v44 review and Jon's decisions (12 Oct 2026) ---- */
/* AC3: the desk and valley photo fills the top section behind the title and search, with a sand wash on the left
   where the words sit; on phones and tablets it is the background too, with the words at the top (v49). Built only
   when HERO_LICENSED is on in build_academy.py (on since v48). */
.hx.has-img{position:relative;overflow:hidden;isolation:isolate}
.hx-img img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:861px){
  .hx-img{position:absolute;inset:0;z-index:-1}
  .hx-img img{object-position:center 60%}
  .hx-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(232,224,208,.97) 0%,rgba(232,224,208,.94) 38%,rgba(232,224,208,.72) 52%,rgba(232,224,208,0) 72%)}
  .hx.has-img .hx-in{position:relative}
  .hx.has-img h1,.hx.has-img .hx-p,.hx.has-img .asearch{max-width:min(620px,52%)}
  .hx.has-img h1{max-width:min(13em,54%)}
}
@media (max-width:860px){
  /* v49 (Amanda via Ben, 12 Oct 2026): on phones and tablets too the photo is the background, with the title on top.
     The words sit at the top on a light sand wash over the sky and hills (solid sand at the very top, so the photo has
     no hard edge under the back link); below the search box the wash fades away so the desk, mug and laptop show.
     The wash is the same strength through the words: on short tablets 45% can fall below the next stop, and two
     different strengths there drew a hard line across the photo above the search box.
     Soft sand glows keep every word readable: at least 3.1 to 1 for the large text and 4.5 to 1 for the paragraph
     at 320 to 860px and every text size. */
  .hx.has-img{padding-top:clamp(36px,6vw,56px);padding-bottom:clamp(190px,42vw,290px)}
  .hx-img{position:absolute;inset:0;z-index:-1}
  .hx-img img{object-position:58% 100%}
  .hx-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(232,224,208,1) 0px,rgba(232,224,208,.7) clamp(60px,12vw,100px),rgba(232,224,208,.8) 45%,rgba(232,224,208,.8) calc(100% - clamp(310px,66vw,410px)),rgba(232,224,208,.3) calc(100% - clamp(180px,38vw,260px)),rgba(232,224,208,0) calc(100% - clamp(110px,24vw,180px)))}
  .hx.has-img .hx-in{position:relative}
  html:root body .hx.has-img h1{text-shadow:0 0 14px rgba(232,224,208,.95),0 0 28px rgba(232,224,208,.85),0 0 4px rgba(232,224,208,.9)}
  html:root body .hx.has-img h1 em{text-shadow:0 0 6px rgba(232,224,208,1),0 0 16px rgba(232,224,208,.98),0 0 32px rgba(232,224,208,.9),0 0 48px rgba(232,224,208,.6)}
  .hx.has-img .hx-p,.hx.has-img .asearch label{text-shadow:0 0 10px rgba(232,224,208,.95),0 0 3px rgba(232,224,208,.95)}
  /* a search hint too long for a narrow box ends in "..." rather than being cut mid-letter */
  .hx .asearch input{text-overflow:ellipsis}
  /* "We develop it." moves down a line as a whole instead of leaving "We" at the end of the line above */
  .hx.has-img h1 em{display:inline-block}
}
/* AC2: the three topic boxes end level, so the space above About the Academy is the same all the way across (the short
   boxes made it look far bigger than the gaps between the other sections), and the two paragraphs run the full width */
.cgrid3{align-items:stretch}
.cols{padding-bottom:0}
.ab-ac{padding-top:clamp(48px,6vw,88px)}
.ab-intro{max-width:none}
/* AC1: About the Academy as two rows of equal white boxes, stacking on phones */
.abx-h{font-family:var(--fh);font-weight:400;font-size:clamp(1.5rem,2.2vw,1.875rem);line-height:1.15;color:var(--near);margin:40px 0 16px}
.abx-row{list-style:none;display:grid;gap:16px;align-items:stretch}
.abx5{grid-template-columns:repeat(5,minmax(0,1fr))}
.abx3{grid-template-columns:repeat(3,minmax(0,1fr))}
.abx{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 22px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.abx .chip{display:none}
.abx h4{font-family:var(--fh);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--near);margin:0}
.abx .mono{color:var(--mute)}
.abx p{font-size:1.0625rem;line-height:1.5;color:var(--body)}
.abx .link{margin-top:auto;padding-top:10px}
.abx-row+.link{display:inline-block;margin-top:16px}
@media (max-width:1100px){.abx5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.abx3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.abx5{grid-template-columns:minmax(0,1fr)}}
/* PR1 and DV1: full-width rows that open in place, in the style of the main site's What We Do cards */
.arows{max-width:var(--max);margin:0 auto;padding:clamp(28px,4vw,48px) var(--pad) clamp(48px,6vw,80px);display:flex;flex-direction:column;gap:12px}
.arows-h{font-family:var(--fh);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;color:var(--near);margin-bottom:12px}
.arow{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);scroll-margin-top:calc(var(--hh,84px) + 16px)}
.arow>summary{display:flex;align-items:center;gap:20px;padding:22px clamp(18px,2.4vw,32px);cursor:pointer;list-style:none;border-radius:var(--r)}
.arow>summary::-webkit-details-marker{display:none}
.ar-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ar-h{font-family:var(--fh);font-weight:400;font-size:clamp(1.75rem,2.8vw,2.375rem);line-height:1.1;color:var(--near);margin:0}
.ar-l{font-size:1.0625rem;line-height:1.45;color:var(--body)}
.ar-m{font-size:1.875rem;line-height:1;color:var(--red);transition:transform .2s;flex:none}
.arow[open] .ar-m{transform:rotate(90deg)}
.arow>summary:hover .ar-h{color:var(--red-d,#B80000)}
.arow>summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.ar-body{padding:4px clamp(18px,2.4vw,32px) 32px}
.ar-body>.ar-lead{font-size:1.125rem;line-height:1.6;color:var(--body);max-width:52em;margin-bottom:22px}
.ar-body .own-note,.ar-body .lic-note{max-width:52em}
@media (prefers-reduced-motion:reduce){.ar-m{transition:none}}
/* LP1: "My learning passport" is a charcoal button with white text on every Academy page */
.anav a.passport,.anav a.passport:visited{background:var(--ink);color:#fff}
.anav a.passport:hover{background:var(--near);color:#fff}
.anav a.passport[aria-current="page"]{box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--ink)}
.anav a.passport:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* TP1: the topic line under the title is Gillius ADF Bold in Avanti red, upright, the same size as before */
html:root body .tp-sub{font-family:var(--fh);font-weight:700;font-style:normal;color:var(--red)}
/* CT2: a short message beside a field that needs putting right */
.f-err{margin:-4px 0 6px;font-size:1.0625rem;line-height:1.4;font-weight:600;color:var(--red-d,#B80000)}
.f-err[hidden]{display:none}
.ck-form [aria-invalid="true"]{border-color:var(--red-d,#B80000)}
/* BK1: the invoice address, and the invoice details for more seats on My team */
.ck-inv textarea,.mt-inv input,.mt-inv textarea{font:inherit;padding:12px 14px;border:1.5px solid var(--edge);border-radius:var(--r-s);background:#fff;color:#1A1A1A;width:100%;box-sizing:border-box;resize:vertical}
.mt-inv{display:grid;gap:8px;margin-top:6px}
.mt-inv[hidden]{display:none}
.ck-inv [aria-invalid="true"],.ck-org [aria-invalid="true"],.mt-inv [aria-invalid="true"]{border-color:var(--red-d)}
/* AC4 (v44 to v45 list): every Academy heading in Gillius ADF. The audit across all templates found two left in Source Sans:
   the founders' names under "Who you will learn from" and the module titles in a topic's list of Parts. */
html:root body .wfp h3{font-family:var(--fh);font-weight:700;letter-spacing:0}
html:root body .mlist .mt b{font-family:var(--fh);font-weight:700;letter-spacing:0}
/* ---- v46, Ben's v45 comments (12 Oct 2026) ---- */
/* Academy home, Ways to learn: the five names (Taster, Bitesize, Focus, Explore, Immerse) in red (5.1 to 1 on white) */
html:root body .abx5 .abx h4{color:var(--red)}
/* Academy home, Who You Will Learn From: the heading, the two profiles and the link centred on the page */
.fds.compact{text-align:center}
html:root body .fds.compact .fdrow{margin-left:auto;margin-right:auto}
.fds.compact .fd{text-align:left}
/* Academy menu with Talk to Us (v46): labels never break over two lines. It needs about 1240px (A), 1320px (A+) or
   1420px (A++) on one line with tighter spacing (signed out, something in the basket; measured 12 October 2026), and
   1340px, 1420px or 1510px with the usual spacing. Narrower than that, it goes behind the Menu button. */
/* v51: with Psychometrics added (PG7) it needs about 1540px (A), 1645px (A+) or 1750px (A++) with tighter spacing, and
   1650px, 1760px or 1860px with the usual spacing (signed out, something in the basket; measured 15 October 2026), so the
   ranges below were widened to match: narrower than that, the menu goes behind the Menu button and the logo is never
   squeezed. */
@media (min-width:861px){.anav a{white-space:nowrap}}
@media (min-width:1540px) and (max-width:1649px){html:not([data-size="l"]):not([data-size="xl"]) .anav a:not(.passport):not(.signin):not(.basket){padding:0 12px}}
@media (min-width:1645px) and (max-width:1759px){html[data-size="l"] .anav a:not(.passport):not(.signin):not(.basket){padding:0 12px}}
@media (min-width:1750px) and (max-width:1859px){html[data-size="xl"] .anav a:not(.passport):not(.signin):not(.basket){padding:0 12px}}
@media (min-width:1024px) and (max-width:1539px){
  html:not([data-size="l"]):not([data-size="xl"]) .menu-btn{display:flex}
  html:not([data-size="l"]):not([data-size="xl"]) .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}
  html:not([data-size="l"]):not([data-size="xl"]) .anav.open{display:flex}
  html:not([data-size="l"]):not([data-size="xl"]) .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  html:not([data-size="l"]):not([data-size="xl"]) .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
  html:not([data-size="l"]):not([data-size="xl"]) .anav a.signin{padding:0 12px}
}
@media (min-width:1100px) and (max-width:1644px){
  html[data-size="l"] .menu-btn{display:flex}
  html[data-size="l"] .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}
  html[data-size="l"] .anav.open{display:flex}
  html[data-size="l"] .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  html[data-size="l"] .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
  html[data-size="l"] .anav a.signin{padding:0 12px}
}
@media (min-width:1200px) and (max-width:1749px){
  html[data-size="xl"] .menu-btn{display:flex}
  html[data-size="xl"] .anav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto}
  html[data-size="xl"] .anav.open{display:flex}
  html[data-size="xl"] .anav a{height:52px;border-left:0;border-top:1px solid rgba(58,66,69,.18)}
  html[data-size="xl"] .anav a.on{box-shadow:inset 4px 0 0 var(--red)}
  html[data-size="xl"] .anav a.signin{padding:0 12px}
}
/* the same full-width rows as under 1024px, with the pills flattened */
@media (min-width:1024px) and (max-width:1539px){
  html:not([data-size="l"]):not([data-size="xl"]) .anav a,html:not([data-size="l"]):not([data-size="xl"]) .anav a.passport,html:not([data-size="l"]):not([data-size="xl"]) .anav a.signin{margin:0;border-radius:0;padding:0 var(--pad)}
}
@media (min-width:1100px) and (max-width:1644px){
  html[data-size="l"] .anav a,html[data-size="l"] .anav a.passport,html[data-size="l"] .anav a.signin{margin:0;border-radius:0;padding:0 var(--pad)}
}
@media (min-width:1200px) and (max-width:1749px){
  html[data-size="xl"] .anav a,html[data-size="xl"] .anav a.passport,html[data-size="xl"] .anav a.signin{margin:0;border-radius:0;padding:0 var(--pad)}
}

/* ---- v48: the desk and valley photo switched on (Ben, 12 Oct 2026) ---- */
/* Where the sand wash fades into the photo, "We develop it." could sit on darker picture (red #DE0000 needs 3 to 1 at
   this size). A soft sand glow behind the red words keeps it at 3 to 1 or better at every width and text size. */
@media (min-width:861px){
  html:root body .hx.has-img h1 em{text-shadow:0 0 14px rgba(232,224,208,.95),0 0 28px rgba(232,224,208,.85),0 0 4px rgba(232,224,208,.9)}
}
/* "We develop it." stays together on laptops and wider (on its own line rather than "We" left at the end of the line
   above), and "it." never sits alone on phones (a no-break space in the build) */
@media (min-width:861px){.hx.has-img h1 em{white-space:nowrap}}
/* "My learning passport" keeps its rounded pill at the larger text sizes too, wherever the menu is on one line (A+ from
   1330px, A++ from 1430px; narrower than that the Menu button shows instead) */
@media (min-width:1330px){html[data-size="l"] .anav a.passport{margin:14px 0 14px 10px;border-radius:999px;padding:0 22px;border-left:0}}
@media (min-width:1430px){html[data-size="xl"] .anav a.passport{margin:14px 0 14px 10px;border-radius:999px;padding:0 22px;border-left:0}}

/* ---- v50: certificates and the end-of-programme assessment (Jon's decision, 15 Oct 2026) ---- */
.tp-cert{margin-top:12px;font-size:1rem;line-height:1.4;color:var(--ink);font-weight:600}
/* "Your certificate" (QZ1): in the player under the controls, two cards side by side, stacked on phones */
.pl-certs{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);margin:18px 0}
.pl-certs>p{font-size:1.125rem;line-height:1.6;color:var(--body);margin-top:8px}
.ce-h{font-family:var(--fh);font-size:1.75rem;line-height:1.15;color:var(--near)}
.ce-h:focus{outline:none}
.ce-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.ce-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:20px}
.ce-card h3{font-family:var(--fh);font-size:1.375rem;line-height:1.2;color:var(--near)}
.ce-card p{font-size:1rem;line-height:1.55;color:var(--body)}
.ce-card .btn{margin-top:auto}
.ce-note{margin-top:14px;font-size:1rem;line-height:1.55;color:var(--mute)}
.ce-st{color:var(--ink);letter-spacing:.04em}
.ce-out:empty{display:none}
.ce-out{margin-top:16px;display:grid;gap:12px;justify-items:start}
.ce-out .si-msg,.ce-out .si-err{margin-top:0}
.ce-out .si-msg:focus{outline:2px solid var(--near);outline-offset:2px}
.ce-name{margin-top:4px}
.ce-name h3{font-family:var(--fh);font-size:1.375rem;line-height:1.2;color:var(--near)}
.ce-name h3:focus{outline:none}
.ce-name .mono{letter-spacing:.04em}
@media (max-width:860px){.ce-cards{grid-template-columns:1fr}.pl-certs{padding:18px 16px}}
/* The Certificates section of My learning passport (CE9) */
.ce-box{display:grid;gap:14px}
.ce-sub{font-family:var(--fh);font-size:1.5rem;line-height:1.2;color:var(--near);margin-top:10px}
.ce-sub:first-child{margin-top:0}
.ce-rows,.ce-list{list-style:none;display:grid;gap:10px}
.ce-row,.ce-cert{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px}
.blk2:not(.alt) .ce-row,.blk2:not(.alt) .ce-cert{background:#fff}
.ce-row-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.ce-row-h b{font-family:var(--fh);font-weight:400;font-size:1.25rem;line-height:1.25;color:var(--near)}
.ce-row-h .ce-st{flex-basis:100%}
.ce-row-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ce-cert{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.ce-cert>div{display:grid;gap:2px;min-width:0}
.ce-cert b{font-family:var(--fh);font-weight:400;font-size:1.25rem;line-height:1.25;color:var(--near)}
.ce-cert span{font-size:1rem;line-height:1.45;color:var(--body)}
.ce-cert span.mono{color:var(--mute);letter-spacing:.04em}
.ce-cert.wd b,.ce-cert.wd span{color:var(--mute)}
.ce-nm{display:grid;gap:10px;justify-items:start;margin-top:8px}
.ce-nm p{font-size:1rem;line-height:1.5;color:var(--body)}
/* The assessment page (QZ9) */
.as-wrap{max-width:var(--max);margin:0 auto;padding:48px var(--pad) 80px}
.as{max-width:760px;display:grid;gap:18px;justify-items:start}
.as>p,.as-q p{font-size:1.125rem;line-height:1.6;color:var(--body)}
.as-h{font-family:var(--fh);font-size:clamp(1.625rem,2.6vw,2.25rem);line-height:1.15;color:var(--near)}
.as-h:focus{outline:none}
.as-of{color:var(--ink);letter-spacing:.04em}
.as-bar{width:100%;height:8px;background:var(--stone);border-radius:999px;overflow:hidden}
.as-bar i{display:block;height:100%;background:var(--red);border-radius:999px}
.as-q{width:100%;display:grid;gap:16px}
.as-q fieldset{border:0;display:grid;gap:10px;min-width:0}
.as-q legend{font-family:var(--fh);font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.3;color:var(--near);margin-bottom:12px;padding:0}
.as-q legend:focus{outline:none}
.as-opt{position:relative}
.as-opt input{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:22px;height:22px;margin:0;accent-color:var(--red)}
.as-opt label{display:block;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-s);padding:16px 18px 16px 54px;font-size:1.125rem;line-height:1.45;color:var(--body);cursor:pointer}
.as-opt label:hover{border-color:var(--ink)}
.as-opt input:checked+label{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);color:var(--near)}
.as-opt input:focus-visible+label{outline:2px solid var(--near);outline-offset:3px}
.as-saved{min-height:1.5em;color:var(--mute);letter-spacing:.04em}
.as-nav{display:flex;flex-wrap:wrap;gap:12px}
.as-rv{width:100%;display:grid;gap:10px;padding-left:1.5em}
.as-rv li{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;display:grid;gap:6px;justify-items:start}
.as-rv li.none{border-color:var(--red)}
.as-rv-q{font-size:1.0625rem;line-height:1.45;color:var(--near)}
.as-rv-a{font-size:1rem;line-height:1.45;color:var(--body)}
.as-rv-a .mono{color:var(--red-d);letter-spacing:.04em}
.as-mods{display:grid;gap:8px;padding-left:1.25em;font-size:1.125rem;line-height:1.5}
.as-mods a,.as a:not(.btn){color:var(--red-d);border-bottom:1px solid currentColor}
.as-score b{font-family:var(--fh);font-weight:400;font-size:1.5rem;color:var(--near)}
@media (max-width:860px){.as-wrap{padding:32px 16px 64px}.as-nav .btn{flex:1 1 auto;justify-content:center}}
/* Gillius joins "oe" into one letter (does would read "dœs"): not in the assessment's questions */
.as-q legend,.as-h,.ce-h,.ce-card h3,.ce-sub,.ce-row-h b,.ce-cert b{font-variant-ligatures:no-common-ligatures}

/* ---------- Avanti Psychometrics (Jon, 15 Oct 2026, PG1 to PG4): suite, instrument and combined offer pages ---------- */
/* G3: red, sand, paper and ink only; nothing below 16px; pictures carry no words, their figures are in the table beneath */
.py :is(h1,h2,h3,em,.py-big,.py-met){font-variant-ligatures:no-common-ligatures}
.py-sec .side h2{max-width:420px}
.py-lead{font-size:clamp(1.1875rem,1.6vw,1.375rem);line-height:1.5;color:var(--near);max-width:760px}
.py-sec .body>p{font-size:1.125rem;line-height:1.65;color:var(--body);max-width:760px}
.py-sec .body>p+p,.py-sec .body>.py-lead+p{margin-top:18px}
.py-ul{list-style:none;display:grid;gap:10px;max-width:820px}
.py-ul li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:14px 18px 14px 44px;font-size:1.125rem;line-height:1.5;color:var(--body)}
.blk2.alt .py-ul li{background:var(--paper)}
.py-ul li::before{content:"";position:absolute;left:20px;top:24px;width:10px;height:10px;border-radius:50%;background:var(--red)}
.py-cards{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.py-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.py-cards li{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.blk2.alt .py-cards li{background:var(--paper);box-shadow:none}
.py-cards h3,.py-ic h3,.py-oc h3,.py-lvs h3,.py-rel h3,.py-h3{font-family:var(--fh);font-weight:500;font-size:1.375rem;line-height:1.2;color:var(--near)}
.py-cards p,.py-ic p,.py-oc p,.py-lvs p{font-size:1.0625rem;line-height:1.55;color:var(--body)}
.py-sec .py-lead+.py-cards,.py-sec .py-lead+.py-ul{margin-top:24px}
.py-h3{margin:36px 0 16px}
/* suite page */
.py-ics,.py-ocs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.py-ic,.py-oc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.py-ic .chip{border-radius:999px;padding:5px 12px}
.py-ic .chip.you{background:var(--red)}
.py-met{font-family:var(--fh);font-style:italic;font-size:1.25rem;color:var(--red-d)}
.py-who{color:var(--ink) !important}
.py-who .mono{display:block;color:var(--mute);margin-bottom:2px}
.py-ic .link{margin-top:auto;padding-top:6px}
.py-oc h3 a{color:inherit}
.py-oc h3 a{border-bottom:2px solid var(--red)}
.py-oc h3 a:hover{color:var(--red-d)}
.py-big{font-family:var(--fh);font-size:clamp(1.375rem,2.2vw,1.875rem);line-height:1.25;color:var(--near);max-width:760px}
.py-lvs{list-style:none;counter-reset:lv;display:grid;gap:10px;max-width:900px}
.py-lvs li{counter-increment:lv;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:18px 20px}
.py-lvs li::before{content:counter(lv);grid-row:1/4;font-family:var(--fh);font-size:2rem;line-height:1;color:var(--red)}
.py-lv-i{color:var(--ink) !important;font-weight:600}
.py-nots{list-style:none;display:grid;gap:10px;max-width:820px}
.py-nots li{background:var(--paper);border-radius:var(--r-s);box-shadow:inset 4px 0 0 var(--red);padding:16px 20px;font-size:1.125rem;line-height:1.5;color:var(--body)}
.py-nots b{color:var(--near)}
.py-all{max-width:var(--max);margin:0 auto;padding:4px 0 8px}
.py-all .link{margin-top:12px}
/* the hero panel and its picture */
.py-hero{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;padding:56px var(--pad);border-bottom:1px solid var(--line)}
.py-hero.solo{grid-template-columns:minmax(0,1fr)}
.py-hero-t h2{font-family:var(--fh);font-weight:500;font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.04;color:var(--near)}
.py-hero-t h2::before{content:"";display:block;width:52px;height:4px;background:var(--red);margin-bottom:16px}
.py-hero-t p{margin-top:18px;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.55;color:var(--body);max-width:620px}
.py-hero-t .py-big{margin-top:28px;padding-left:20px;border-left:4px solid var(--red)}
.py-fig{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;min-width:0}
.py-svg{display:block;width:100%;height:auto;max-height:520px}
.py-lg{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.py-lg li{display:flex;align-items:flex-start;gap:10px;font-size:1rem;line-height:1.4;color:var(--ink)}
.py-sw{flex:none;display:inline-block;width:18px;height:18px;margin-top:1px;border-radius:4px}
.sw-red,.sw-dot{background:var(--red)}.sw-dot{border-radius:50%}
.sw-ink,.sw-square,.sw-self{background:var(--ink)}
.sw-self{border-radius:0;width:12px;height:12px;margin:4px 3px 0}
.sw-sand{background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sw-ring{border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px var(--ink)}
.sw-open{background:transparent;border:2.5px dashed var(--ink)}
.sw-dash{background:transparent;border-bottom:4px dashed var(--ink);border-radius:0;height:10px}
.sw-rdash{background:transparent;border-bottom:4px dashed var(--red);border-radius:0;height:10px}   /* v92: the Map's own-view contour */
.sw-line{background:var(--ink);height:5px;margin-top:7px;border-radius:3px}
.sw-arrow{background:var(--red);height:5px;margin-top:7px;border-radius:3px}
.sw-moon{border-radius:50%;background:linear-gradient(90deg,var(--paper) 50%,var(--red) 50%);box-shadow:inset 0 0 0 2px var(--ink)}
.sw-note{display:none}
.py-note{margin-top:12px;font-size:1rem;color:var(--mute)}
.py-tbl{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.py-tbl summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;font-size:1.0625rem;color:var(--red-d)}
.py-tw{overflow-x:auto}
.py-t{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4;margin-top:8px}
.py-t+.py-t{margin-top:22px}
.py-t caption{text-align:left;font-weight:600;color:var(--near);padding:6px 0 8px;font-size:1.0625rem}
.py-t th,.py-t td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--body)}
.py-t thead th{color:var(--near);font-weight:600;border-bottom:1.5px solid var(--ink)}
.py-t tbody th{font-weight:600;color:var(--near)}
.py-t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.py-rows{list-style:none;display:grid;gap:4px}
.py-rows li{display:grid;grid-template-columns:minmax(0,1fr);row-gap:2px}
.py-rl{font-size:1rem;line-height:1.3;font-weight:600;color:var(--near)}
.py-poles{display:flex;justify-content:space-between;gap:12px;font-size:1rem;line-height:1.2;color:var(--mute)}
.py-trk{display:block;width:100%;height:auto}
.py-wxs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.py-wx{border-radius:var(--r-s);padding:16px 14px 14px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.py-wx.b-signature{background:var(--red);color:#fff}
.py-wx.b-established{background:var(--ink);color:#fff}
.py-wx.b-growing{background:var(--cream);color:var(--near);box-shadow:inset 0 0 0 1.5px var(--ink)}
.py-wn{font-family:var(--fh);font-size:1.1875rem;line-height:1.15}
.py-bar{display:block;width:100%;height:auto}
/* the end of an instrument page: buy box or conversation, downloads, related */
.py-buy{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;max-width:760px;display:grid;gap:14px;justify-items:start}
.py-buy p{font-size:1.125rem;line-height:1.55;color:var(--body)}
.py-buy .ph-copy{margin-top:0}
.py-buy .btn[disabled]{opacity:1;background:var(--stone);color:var(--near);cursor:default}
.py-pv1{font-size:1rem !important;color:var(--ink) !important;border-top:1px solid var(--line);padding-top:12px}
.py-dl{list-style:none;display:flex;flex-wrap:wrap;gap:0 32px;margin-top:10px}
.py-rel{margin-top:30px}
.py-rel ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 32px}
.cta2 .py-cta-dl{color:#fff;border-bottom:1.5px solid #fff;font-weight:600}
/* the journey table becomes a list of stages on a phone */
.py-tw.j .py-t td:nth-child(3){min-width:260px}
@media (max-width:1100px){
  .py-hero{grid-template-columns:minmax(0,1fr)}
  .py-cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .py-hero{padding:40px var(--pad);gap:28px}
  .py-cards,.py-cards.three,.py-ics,.py-ocs{grid-template-columns:minmax(0,1fr)}
  .py-wxs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .py-fig{padding:16px}
  .py-all{padding:4px var(--pad) 8px}
  .py-tw.j .py-t thead{display:none}
  .py-tw.j .py-t tr{display:grid;grid-template-columns:minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--line)}
  .py-tw.j .py-t th,.py-tw.j .py-t td{border:0;padding:3px 0;min-width:0}
  .py-tw.j .py-t td:nth-child(2){color:var(--red-d);font-weight:600}
}

/* ---------- v52: Jon's launch product suite ---------- */
/* Player: the Sources and attribution image with Continue (IM3), the quick check (MC3 to MC9), title and closing rows */
.sl-img{margin:0;background:#fff;border-top:10px solid var(--red);display:flex;flex-direction:column;gap:14px;padding:16px;aspect-ratio:16/9;justify-content:center}
.sl-img img{width:100%;height:auto;max-height:calc(100% - 70px);object-fit:contain;flex:1;min-height:0}
.sl-img-c{font-size:1rem;color:var(--ink);line-height:1.4}
.sl-img .sl-go{align-self:flex-start}
.stage.locked .sl-img,.stage.locked .qc,.stage.qc-on .sl-bar{display:none}
.qc{background:#fff;border-top:10px solid var(--red);padding:clamp(20px,4vw,44px);min-height:min(100%,420px);display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.qc h2{font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.1}
.qc h2:focus{outline:none}
.qc-line,.qc-score{font-size:1.125rem;line-height:1.55;max-width:60ch}
.qc-score{font-size:1.375rem}
.qc-n{color:var(--red)}
.qc fieldset{border:0;display:grid;gap:10px}
.qc legend{font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:10px;max-width:60ch}
.qc legend:focus{outline:none}
.qc-o{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s,6px);padding:12px 14px}
.qc-o input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--red)}
.qc-o label{font-size:1.0625rem;line-height:1.45;cursor:pointer;flex:1}
.qc-o:has(input:focus-visible){outline:2px solid var(--near);outline-offset:2px}
.qc-o.ok{border-color:#1F6B3A;background:#E6F2EA}
.qc-o.no{border-color:var(--red);background:var(--red-tint)}
.qc-fb p{font-size:1.0625rem;line-height:1.55;max-width:64ch;margin-top:6px}
.qc-r.ok b{color:#1F6B3A}.qc-r.no b{color:var(--red-d)}
.qc-r:focus{outline:none}
.qc-err{color:var(--red-d);font-weight:600;font-size:1rem}
.qc-err a{text-decoration:underline}
.qc-acts{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:6px}
.qc-again{background:none;border:0;border-bottom:1px solid currentColor;color:var(--ink);padding:2px 0;font-size:1rem}
.pl-mods .pl-x .sx{width:100%;text-align:left;background:none;border:0;padding:12px 20px 12px 68px;font-size:1rem;color:var(--body)}
.pl-mods .pl-x .sx.now{color:var(--red);font-weight:600}
.pl-mods .pl-x.locked .sx{opacity:.6}
.pl-mods .pl-stage h2{font-size:1rem;color:var(--mute);padding:14px 20px 6px;margin:0}
.pl-mods .mh .pl-tt{display:block;font-weight:400}
.pl-mods .qc-ok{display:block;color:#1F6B3A}
.sl-list button.q{font-weight:600}
@media (max-width:700px){.sl-img{aspect-ratio:auto}.sl-img img{max-height:none}}
/* Product pages, Signature details (IM2), the paused memberships band (PR5), the catalogue link (DL1), the compare table (LV6) */
.sig-dl{display:grid;gap:0;margin:0}
.sig-dl>div{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.sig-dl dt{font-weight:600;font-size:1rem;color:var(--ink)}
.sig-dl dd{margin:0;font-size:1.125rem;line-height:1.5;color:var(--body)}
.sig-dl .dots{margin:0;padding-left:1.1em}
@media (max-width:600px){.sig-dl>div{grid-template-columns:1fr;gap:4px}}
.soon-band p.big{font-size:1.25rem;line-height:1.5;max-width:70ch;color:#fff}
.abx-more{margin:18px 0 8px;font-size:1.125rem;line-height:1.5}
.abx-more .link{margin-left:6px}
.dl-cat{margin-top:14px;font-size:1rem}
.aph .dl-cat .link,.dl-cat .link{border-bottom:1px solid currentColor}
.tw{overflow-x:auto}
.cmp{min-width:720px}
.cmp th,.cmp td{font-size:1rem;text-align:left;vertical-align:top;white-space:normal;width:auto;color:var(--ink)}
.cmp thead th{font-weight:600;border-bottom:1.5px solid var(--ink)}
.cmp tbody th{font-size:1.125rem}
.dteam .pr{display:block;font-size:1rem;color:var(--mute);margin-top:4px}
.py-buy .py-price{font-size:1.375rem;font-weight:500;color:var(--red);margin-bottom:8px}
/* Basket places and group lines (PR3, PR4), passport modules (MC7), assessment beta flag (MC8) */
.ck-qty select{font:inherit;font-size:1rem;padding:6px 10px;border:1.5px solid var(--edge);background:#fff;color:#1A1A1A}
.ck-off span{white-space:nowrap}
.oli-mods{margin-top:8px;font-size:1rem}
.oli-mods summary{cursor:pointer}
.oli-mods ol{margin:6px 0 0 1.25em}
.oli-mods .ok{font-family:'Source Sans 3',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:1rem}
.as-beta{margin:0 0 12px}

/* ======================================================================================================================
   v53, Jon's brief of 16 October 2026 (from Amanda's review notes)
   ====================================================================================================================== */
:root{--gold:#C9A03F;--teal:#2E7F76;--navy:#1F3864;--stone2:#E8E0D0}
/* ---- Level badges (section 2): Taster gold, Bitesize teal, Focus charcoal, Explore navy, Immerse red, Flagship red with a
   gold outline, Signature gold with a red outline. Text is white or near-black, whichever passes 4.5 to 1: white on teal
   4.8, on red 5.1, on charcoal 10.4, on navy 12.6; near-black on gold 7.1. */
.lvl{display:inline-flex;align-items:center;align-self:flex-start;font-family:var(--fb);font-weight:700;font-size:1rem;line-height:1.1;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;color:#fff;background:var(--ink)}
.lvl.lv-taster{background:var(--gold);color:var(--near)}
.lvl.lv-bitesize{background:var(--teal)}
.lvl.lv-focus{background:var(--ink)}
.lvl.lv-explore{background:var(--navy)}
.lvl.lv-immerse{background:var(--red)}
.lvl.lv-flagship{background:var(--red);box-shadow:inset 0 0 0 2.5px var(--gold)}
.lvl.lv-signature{background:var(--gold);color:var(--near);box-shadow:inset 0 0 0 2.5px var(--red)}

/* ---- Shelves (section 2) ---- */
.nshelves{padding:clamp(28px,4vw,56px) 0 clamp(20px,3vw,40px);scroll-margin-top:var(--hh,84px)}
.nshelf{max-width:var(--max);margin:0 auto;padding:0 0 clamp(18px,2.4vw,30px)}
.nshelf+.nshelf{margin-top:clamp(6px,1vw,14px)}
.sh-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:0 var(--pad)}
.sh-head h2{font-family:var(--fh);font-weight:400;font-size:clamp(1.625rem,2.3vw,2.125rem);line-height:1.1;color:var(--near)}
.sh-n{font-size:1rem;color:var(--mute)}
.sh-more{margin:0 0 0 auto;font-size:1rem}
.sh-lede{padding:6px var(--pad) 0;font-size:1.0625rem;color:var(--body)}
.sh-play{display:inline-flex;align-items:center;gap:8px;margin-left:auto;align-self:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink);font:600 1rem/1 var(--fb);cursor:pointer}
.sh-more+.sh-play{margin-left:0}
.sh-play:hover{background:var(--ink);color:#fff}
.sh-play svg{fill:currentColor}
.sh-play .i-play{display:none}
.sh-play[aria-pressed="true"] .i-pause{display:none}
.sh-play[aria-pressed="true"] .i-play{display:inline}
.sh-wrap{position:relative}
.sh-row{list-style:none;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(270px,25vw,372px);gap:clamp(12px,1.4vw,20px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
  padding:16px var(--pad) 22px;scrollbar-width:thin;scrollbar-color:rgba(58,66,69,.35) transparent}
.sh-row:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.nc-li{scroll-snap-align:start;display:flex}
/* the card: a 16:9 cover with the title, subtitle, badge and time over its foot */
.nc{position:relative;display:block;flex:1;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--ink);color:#fff;
  box-shadow:0 1px 2px rgba(26,26,26,.08),0 6px 18px rgba(26,26,26,.1);transform-origin:center;transition:transform .22s ease,box-shadow .22s ease;isolation:isolate}
.nc-img,.nc-img>*{position:absolute;inset:0;width:100%;height:100%}
.nc-cv{object-fit:cover;z-index:1}
.nc-img video{object-fit:cover;z-index:2}
/* the drawn title card, until a cover is uploaded (or if one fails to load) */
.nc-fb{display:flex;flex-direction:column;justify-content:flex-start;padding:14px 16px;background:linear-gradient(135deg,var(--ink) 0%,#2A3033 100%)}
.nc-fb.lv-taster{background:linear-gradient(135deg,#8C6E22 0%,#5E4A17 100%)}
.nc-fb.lv-bitesize{background:linear-gradient(135deg,#2E7F76 0%,#1E5650 100%)}
.nc-fb.lv-explore{background:linear-gradient(135deg,#1F3864 0%,#14243F 100%)}
.nc-fb.lv-immerse,.nc-fb.lv-flagship{background:linear-gradient(135deg,#B80000 0%,#7A0000 100%)}
.nc-fb.lv-signature{background:linear-gradient(135deg,#3A4245 0%,#1A1A1A 100%)}
.nc-fb-logo{width:auto;height:30px;border-radius:4px;align-self:flex-start}
.nc-fb-t{display:none}
.nc-ov{position:absolute;inset:auto 0 0 0;z-index:3;display:flex;flex-direction:column;gap:3px;padding:44px 16px 14px;
  background:linear-gradient(180deg,rgba(26,26,26,0) 0%,rgba(26,26,26,.78) 42%,rgba(26,26,26,.92) 100%)}
.nc-ov .lvl{margin-bottom:5px}
.nc-t{font-family:var(--fh);font-weight:700;font-size:1.25rem;line-height:1.15;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-s,.nc-d{font-size:1rem;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.nc-d{color:var(--cream)}
.nc-soon{position:absolute;top:12px;right:12px;font-weight:700;font-size:1rem;padding:5px 11px;border-radius:999px;background:#fff;color:var(--near)}
.nc.soon .nc-img{filter:grayscale(.7) brightness(.92)}
.nc-more{display:none;flex-direction:column;gap:8px;margin-top:4px}
.nc-sum{font-size:1rem;line-height:1.35;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nc-view{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:1rem;padding:7px 16px;border-radius:999px;background:var(--red);color:#fff}
/* hover or focus (desktop): the card grows, lifts and shows its summary and View */
@media (hover:hover) and (pointer:fine){
  .nc:hover,.nc:focus-visible{transform:scale(1.08);z-index:5;box-shadow:0 14px 34px rgba(26,26,26,.32)}
  .nc:hover .nc-s,.nc:hover .nc-d,.nc:focus-visible .nc-s,.nc:focus-visible .nc-d{display:none}
  .nc:hover .nc-more,.nc:focus-visible .nc-more{display:flex}
  .nc:hover .nc-ov,.nc:focus-visible .nc-ov{background:linear-gradient(180deg,rgba(26,26,26,.25) 0%,rgba(26,26,26,.9) 38%,rgba(26,26,26,.95) 100%)}
}
.nc:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sh-row .nc-li:first-child .nc{transform-origin:left center}
.sh-row .nc-li:last-child .nc{transform-origin:right center}
/* the arrow buttons at each edge (desktop); on touch screens you swipe, with the next card peeking in */
.sh-arr{position:absolute;top:calc(50% - 24px);z-index:8;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--near);font-size:1.375rem;
  box-shadow:0 2px 10px rgba(26,26,26,.25);cursor:pointer;display:grid;place-items:center}
.sh-arr:hover{background:var(--near);color:#fff}
.sh-prev{left:max(6px,calc(var(--pad) - 18px))}
.sh-next{right:max(6px,calc(var(--pad) - 18px))}
.sh-arr[hidden]{display:none}
@media (hover:none),(pointer:coarse){.sh-arr{display:none}}
@media (max-width:700px){.sh-row{grid-auto-columns:80vw}}
@media (prefers-reduced-motion:reduce){.nc{transition:none}.nc:hover,.nc:focus-visible{transform:none}}
/* Academy home: the old topic columns, folded under the shelves as an A to Z by theme */
.cols-fold{padding-top:0}
.cfold{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 var(--pad)}
.cfold>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none;padding:20px 0;font-family:var(--fh);font-size:1.5rem;color:var(--near)}
.cfold>summary::-webkit-details-marker{display:none}
.cfold>summary .chev{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.cfold[open]>summary .chev{transform:rotate(225deg)}
.cfold .cgrid3{padding:8px 0 36px}
.acad-shelves{border-bottom:1px solid var(--line)}

/* ---- The full-screen sales page (section 2): the cover fills the right of the first screen, with the summary, facts and
   main button beside it; on phones the cover sits on top. The card's cover expands into it (view transitions). */
.sp-hero{position:relative;display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);min-height:calc(100vh - var(--hh,72px));min-height:calc(100svh - var(--hh,72px));
  background:var(--cream);border-bottom:1px solid var(--line)}
.sp-pic{position:relative;order:2;overflow:hidden;background:var(--ink);min-height:320px}
.sp-pic>*{position:absolute;inset:0;width:100%;height:100%}
.sp-cv{object-fit:cover;z-index:1}
.sp-pic{view-transition-name:aa-cover}
.sp-pic .nc-fb{padding:clamp(18px,2.4vw,34px)}
.sp-pic .nc-fb-logo{height:clamp(40px,4vw,60px)}
.sp-pic .nc-fb-t{display:block;margin-top:auto;font-family:var(--fh);font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.05;color:#fff;max-width:16ch}
.sp-in{order:1;display:flex;flex-direction:column;justify-content:center;gap:0;padding:clamp(24px,3.4vw,56px) var(--pad) clamp(30px,4vw,64px);max-width:760px}
.sp-in .crumbs{margin-bottom:clamp(18px,2.4vw,34px)}
.sp-in h1{font-family:var(--fh);font-weight:400;font-size:clamp(2.5rem,4.6vw,4.5rem);line-height:1;color:var(--near);margin-top:16px}
.sp-sub{margin-top:14px;font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.35;color:var(--ink)}
.sp-sub em{font-style:normal}
.sp-sum{margin-top:16px;font-size:1.1875rem;line-height:1.55;color:var(--body)}
.sp-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.sp-facts div{display:flex;flex-direction:column;gap:2px}
.sp-facts dt{font-size:1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.sp-facts dd{margin:0;font-size:1.125rem;font-weight:600;color:var(--near)}
.sp-credit{margin-top:14px;font-size:1rem;line-height:1.45;color:var(--body)}
.sp-in .acts{margin-top:24px}
.sp-back{position:absolute;top:16px;right:16px;z-index:4;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;
  background:rgba(26,26,26,.72);color:#fff;font-weight:600;font-size:1rem;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.sp-back:hover{background:var(--near)}
.sp-back:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--near)}
.sp-back[hidden]{display:none}
@media (max-width:900px){
  .sp-hero{grid-template-columns:1fr;min-height:0}
  .sp-pic{order:0;aspect-ratio:16/9;min-height:0}
  .sp-in{max-width:none}
}
/* Moving from a card to its sales page: the cover grows into place where the browser supports cross-page view
   transitions; elsewhere the page simply fades in. Neither happens with reduced motion. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}
@supports not (view-transition-name:none){@media (prefers-reduced-motion:no-preference){.sp-hero{animation:aa-fade .35s ease-out both}}}
@keyframes aa-fade{from{opacity:0}to{opacity:1}}
::view-transition-group(aa-cover){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.nc-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;min-width:0}
.nc-row .lvl{margin:0;flex:none}
.nc-row .nc-d{-webkit-line-clamp:1}
.sh-row{grid-auto-columns:clamp(280px,27vw,400px)}
.nc-ov{padding-top:36px;background:linear-gradient(180deg,rgba(26,26,26,0) 0%,rgba(26,26,26,.74) 34%,rgba(26,26,26,.9) 100%)}
@media (hover:hover) and (pointer:fine){.nc:hover .nc-d,.nc:focus-visible .nc-d{display:-webkit-box}}
/* the muted preview fades in over the cover once it is playing */
.nc-img video.nc-pv{opacity:0;transition:opacity .3s ease}
.nc.pv-on video.nc-pv{opacity:1}
.nc.soon video.nc-pv{display:none}
/* Academy home search with nothing found (section 1): "We don't have that yet" and a button to Talk to us */
.as-none{margin-top:12px;padding:18px 20px;border-radius:14px;background:#fff;color:var(--near);box-shadow:0 6px 18px rgba(26,26,26,.14);max-width:640px}
.as-none p{font-size:1.0625rem;line-height:1.5;color:var(--body);margin:0 0 14px}
.as-none p b{color:var(--near)}
.as-none[hidden]{display:none}
/* the cover keeps the slide's own 16:9 shape (a title slide has words on it, so it is never cropped), set beside the
   course's name and facts on the first screen */
.sp-hero{grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;column-gap:clamp(24px,3vw,56px);padding:0 var(--pad);
  max-width:none}
.sp-in{padding-left:0;padding-right:0;margin-left:auto;width:100%}
.sp-pic{align-self:center;aspect-ratio:16/9;min-height:0;border-radius:18px;box-shadow:0 18px 44px rgba(26,26,26,.22);margin:clamp(24px,3vw,48px) 0}
.sp-back{top:auto;bottom:calc(100% + 12px)}
.sp-hero>.sp-back{top:16px;bottom:auto;right:var(--pad)}
@media (max-width:900px){
  .sp-hero{padding:0;column-gap:0}
  .sp-pic{border-radius:0;box-shadow:none;margin:0}
  .sp-in{padding:clamp(24px,3.4vw,56px) var(--pad) clamp(30px,4vw,64px)}
  .sp-hero>.sp-back{top:12px;right:12px}
}
.sh-arr:disabled{opacity:0;pointer-events:none}
.sh-arr{transition:opacity .2s}

/* ---- v53 (Jon's brief, section 1): the Academy menu on desktop again ----
   From 901px wide the menu shows in full: on one line where it fits (from about 1540px, 1645px with A+ or 1750px with
   A++, as v51 measured), and narrower than that on a second row under the logo, where the links wrap onto another line
   rather than shrink, so nothing goes under 16px at any text size. The Menu button is only used at 900px and under. */
@media (min-width:901px) and (max-width:1539px){
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead{flex-wrap:wrap}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.logo img{height:58px}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.menu-btn{display:none}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav{display:flex;flex-direction:row;position:static;order:3;flex:1 0 100%;flex-wrap:wrap;align-items:center;margin:0;padding:6px calc(var(--pad) - 14px);gap:4px 2px;
    max-height:none;overflow:visible;background:var(--paper,#F5F3F0);border-top:1px solid rgba(58,66,69,.14)}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav a{width:auto;height:44px;padding:0 14px;margin:0;border:0;border-radius:999px;box-shadow:none}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav a.on,html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red);border-radius:0}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav a.basket{margin-left:auto}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav a.passport{padding:0 20px;margin-left:6px}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav a.signin{padding:0 22px;margin-left:6px}
}
@media (min-width:901px) and (max-width:1644px){
  html[data-size="l"]:root body header.ahead{flex-wrap:wrap}
  html[data-size="l"]:root body header.ahead>.logo img{height:58px}
  html[data-size="l"]:root body header.ahead>.menu-btn{display:none}
  html[data-size="l"]:root body header.ahead>.anav{display:flex;flex-direction:row;position:static;order:3;flex:1 0 100%;flex-wrap:wrap;align-items:center;margin:0;padding:6px calc(var(--pad) - 14px);gap:4px 2px;
    max-height:none;overflow:visible;background:var(--paper,#F5F3F0);border-top:1px solid rgba(58,66,69,.14)}
  html[data-size="l"]:root body header.ahead>.anav a{width:auto;height:44px;padding:0 14px;margin:0;border:0;border-radius:999px;box-shadow:none}
  html[data-size="l"]:root body header.ahead>.anav a.on,html[data-size="l"]:root body header.ahead>.anav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red);border-radius:0}
  html[data-size="l"]:root body header.ahead>.anav a.basket{margin-left:auto}
  html[data-size="l"]:root body header.ahead>.anav a.passport{padding:0 20px;margin-left:6px}
  html[data-size="l"]:root body header.ahead>.anav a.signin{padding:0 22px;margin-left:6px}
}
@media (min-width:901px) and (max-width:1749px){
  html[data-size="xl"]:root body header.ahead{flex-wrap:wrap}
  html[data-size="xl"]:root body header.ahead>.logo img{height:58px}
  html[data-size="xl"]:root body header.ahead>.menu-btn{display:none}
  html[data-size="xl"]:root body header.ahead>.anav{display:flex;flex-direction:row;position:static;order:3;flex:1 0 100%;flex-wrap:wrap;align-items:center;margin:0;padding:6px calc(var(--pad) - 14px);gap:4px 2px;
    max-height:none;overflow:visible;background:var(--paper,#F5F3F0);border-top:1px solid rgba(58,66,69,.14)}
  html[data-size="xl"]:root body header.ahead>.anav a{width:auto;height:44px;padding:0 14px;margin:0;border:0;border-radius:999px;box-shadow:none}
  html[data-size="xl"]:root body header.ahead>.anav a.on,html[data-size="xl"]:root body header.ahead>.anav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red);border-radius:0}
  html[data-size="xl"]:root body header.ahead>.anav a.basket{margin-left:auto}
  html[data-size="xl"]:root body header.ahead>.anav a.passport{padding:0 20px;margin-left:6px}
  html[data-size="xl"]:root body header.ahead>.anav a.signin{padding:0 22px;margin-left:6px}
}
.ahead.ah-tall{position:relative}
.anav-acct{display:contents}
@media (min-width:901px) and (max-width:1539px){
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav .anav-acct{position:absolute;top:0;right:var(--szw,80px);height:var(--logoh,58px);display:flex;align-items:center;gap:6px}
  html:not([data-size="l"]):not([data-size="xl"]):root body header.ahead>.anav .anav-acct a{margin:0}
}
@media (min-width:901px) and (max-width:1644px){
  html[data-size="l"]:root body header.ahead>.anav .anav-acct{position:absolute;top:0;right:var(--szw,80px);height:var(--logoh,58px);display:flex;align-items:center;gap:6px}
  html[data-size="l"]:root body header.ahead>.anav .anav-acct a{margin:0}
}
@media (min-width:901px) and (max-width:1749px){
  html[data-size="xl"]:root body header.ahead>.anav .anav-acct{position:absolute;top:0;right:var(--szw,80px);height:var(--logoh,58px);display:flex;align-items:center;gap:6px}
  html[data-size="xl"]:root body header.ahead>.anav .anav-acct a{margin:0}
}
/* v53: the transcript, closed, is hidden from sight only (screen readers still have it) */
.txbox.tx-shut{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* v53: the VAT switch, only when assets/settings.json turns it on */
.vat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px var(--pad);background:#fff;border-bottom:1px solid var(--line)}
.vat-l{font-weight:600;font-size:1rem;color:var(--ink);margin-right:4px}
.vat-bar button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:600 1rem/1 var(--fb);cursor:pointer}
.vat-bar button[aria-pressed="true"]{background:var(--ink);color:#fff}
/* v53: prototypes (section 3), never linked from the site */
.proto-bar{padding:12px var(--pad);background:var(--gold);color:var(--near);font-size:1rem;line-height:1.45}
.proto-bar a{color:var(--near);text-decoration:underline}
.proto-l{display:grid;gap:14px;padding-left:1.2em}
.lvl.lv-psy{background:var(--navy)}
.lvl.lv-coach{background:var(--teal)}
.lvl.lv-al{background:var(--ink)}
.nc-fb.lv-psy{background:linear-gradient(135deg,#1F3864 0%,#14243F 100%)}
.nc-fb.lv-coach{background:linear-gradient(135deg,#2E7F76 0%,#1E5650 100%)}
.nc-fb.lv-al{background:linear-gradient(135deg,#3A4245 0%,#1A1A1A 100%)}
.nc-s.pv-2{-webkit-line-clamp:2}
.py-who2{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.py-who2-c{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:20px}
.py-who2-c h3{font-family:var(--fh);font-size:1.5rem;color:var(--near);margin-bottom:8px}
.py-who2-c p{font-size:1.0625rem;line-height:1.55;color:var(--body)}
@media (max-width:700px){.py-who2{grid-template-columns:minmax(0,1fr)}}
.py-team{margin-top:16px}
button.buy[data-preview-buy]{cursor:not-allowed}
/* the course page's crumbs sit on stone: the darker red keeps them at 4.5 to 1 */
.sp-in .crumbs a{color:var(--red-d)}
.txbox.tx-shut .tx-list{overflow:visible;max-height:none}
/* the card keeps 16:9, but grows taller rather than cut its words off at the larger text sizes (A+ and A++) or on
   narrow phones: the overlay sits in the flow at the card's foot, the cover fills the card behind it */
.nc{display:flex;flex-direction:column;justify-content:flex-end;overflow:visible;border-radius:14px}
.nc-img{border-radius:14px;overflow:hidden}
.nc-ov{position:relative;inset:auto;border-radius:0 0 14px 14px;padding-top:30px}
.nc-soon{z-index:4}
@media (hover:hover) and (pointer:fine){
  .nc:hover .nc-ov,.nc:focus-visible .nc-ov{position:absolute;inset:auto 0 0 0}
  .nc:hover,.nc:focus-visible{min-height:var(--nc-h,auto)}
}
html[data-size="l"] .nc-sum,html[data-size="xl"] .nc-sum{-webkit-line-clamp:2}
@media (hover:hover) and (pointer:fine){.nc:hover .nc-ov,.nc:focus-visible .nc-ov{padding-top:14px}}

/* ---- v54 (Amanda's review 2, 16 Oct 2026) ---- */
/* R2-3: the footer takes the main site's side-strip charcoal (--ink) on every page; cream on it is 8.3 to 1 */
.afoot{background:var(--ink)}

/* R2-10: the card. The cover shows clean (the title slide already carries the title); the title, subtitle, level badge
   and learning time sit below it on white. On hover or keyboard focus the one-line summary takes the subtitle's place
   and View appears beside the badge, so the card never changes size. */
.nc.nc54{display:flex;flex-direction:column;justify-content:flex-start;aspect-ratio:auto;overflow:hidden;background:#fff;color:var(--near);
  border-radius:14px;box-shadow:0 1px 2px rgba(26,26,26,.08),0 6px 18px rgba(26,26,26,.1)}
.nc.nc54 .nc-img{position:relative;inset:auto;height:auto;width:100%;aspect-ratio:16/9;flex:none;border-radius:14px 14px 0 0;overflow:hidden;background:var(--ink)}
.nc.nc54 .nc-img>.nc-soon{inset:auto;top:12px;right:12px;width:auto;height:auto}
.nc.nc54 .nc-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px;min-width:0}
.nc.nc54 .nc-t{color:var(--near);font-size:1.25rem;line-height:1.2;min-height:2.4em}
.nc.nc54 .nc-sw{position:relative;min-height:2.7em}
.nc.nc54 .nc-s{display:-webkit-box;-webkit-line-clamp:2;color:var(--body);line-height:1.35;transition:opacity .15s}
.nc.nc54 .nc-sum{position:absolute;inset:0;display:-webkit-box;-webkit-line-clamp:2;color:var(--body);line-height:1.35;opacity:0;transition:opacity .15s}
.nc.nc54 .nc-row{display:flex;align-items:center;gap:10px;margin:auto 0 0;min-width:0}
.nc.nc54 .nc-d{color:var(--mute);display:-webkit-box;-webkit-line-clamp:1}
.nc.nc54 .nc-view{margin-left:auto;flex:none;padding:6px 14px;opacity:0;transition:opacity .15s}
.nc.nc54 .nc-fb-t{display:none}
@media (hover:hover) and (pointer:fine){
  .nc.nc54:hover,.nc.nc54:focus-visible{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 30px rgba(26,26,26,.22);min-height:0}
  .nc.nc54.has-sum:hover .nc-s,.nc.nc54.has-sum:focus-visible .nc-s{opacity:0}
  .nc.nc54:hover .nc-sum,.nc.nc54:focus-visible .nc-sum{opacity:1}
  .nc.nc54:hover .nc-view,.nc.nc54:focus-visible .nc-view{opacity:1}
}
@media (prefers-reduced-motion:reduce){.nc.nc54,.nc.nc54:hover,.nc.nc54:focus-visible{transform:none;transition:none}}
/* the shelf's arrow buttons sit halfway down the cover, not the whole card */
.sh-arr{top:calc(16px + clamp(280px,27vw,400px) * .28125 - 24px)}
.sh-head h3{font-family:var(--fh);font-weight:400;font-size:clamp(1.5rem,2vw,1.875rem);line-height:1.1;color:var(--near)}

/* R2-7 to R2-9: every topic by theme. The names are always on show; a name opens its shelf directly beneath it, in a
   band that spans the theme's columns (the grid fills in around it), and the open name is highlighted. */
.tp-browse{background:var(--paper)}
.tp-kicker{max-width:var(--max);margin:0 auto;padding:clamp(28px,3.4vw,48px) var(--pad) 0;font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tp-sec{padding:clamp(24px,3.4vw,48px) 0 clamp(14px,2vw,26px)}
.tp-sec+.tp-sec,.tp-sec+.nshelf,.nshelf+.tp-sec{border-top:1px solid var(--line)}
.tp-kicker+.tp-sec{padding-top:10px}
.tp-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.tp-sec h2{font-family:var(--fh);font-weight:400;font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;color:var(--near)}
.tp-sec h2 em{color:var(--red)}
.tp-line{margin-top:10px;font-size:1.1875rem;line-height:1.5;color:var(--body);max-width:62ch}
.tp-g{margin-top:clamp(20px,2.4vw,30px)}
.tp-g h3{font-family:var(--fb);font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.tp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));grid-auto-flow:row dense;gap:10px}
.tp-sec>.tp-in>.tp-list{margin-top:20px}
.tp-i{min-width:0}
.tp-b{width:100%;height:100%;display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 16px;border-radius:12px;background:#fff;
  border:1.5px solid rgba(58,66,69,.2);text-align:left;font:inherit;color:var(--near);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tp-n{flex:1;min-width:0;font-family:var(--fh);font-size:1.25rem;line-height:1.2}
.tp-c{flex:none;font-size:1rem;color:var(--mute)}
.tp-chev{flex:none;width:10px;height:10px;margin:0 4px 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.tp-b:hover{border-color:var(--ink)}
.tp-b:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.tp-b[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tp-b[aria-expanded="true"] .tp-c{color:var(--cream)}
.tp-b[aria-expanded="true"] .tp-chev{transform:rotate(225deg);margin:4px 4px 0}
.tp-soon{display:flex;align-items:center;gap:10px;min-height:58px;padding:12px 16px;border-radius:12px;border:1.5px dashed rgba(58,66,69,.3);color:var(--mute)}
.tp-soon .tp-n{color:var(--ink)}
.tp-p{grid-column:1/-1;background:var(--cream);border-radius:16px;margin:0 0 6px;box-shadow:inset 0 3px 0 var(--ink)}
.tp-p[hidden]{display:none}
.tp-p .nshelf{max-width:none;margin:0;padding:0 0 14px}
.tp-p .sh-row{padding:18px 20px 18px;scroll-padding-inline:20px}
.tp-p .sh-prev{left:6px}
.tp-p .sh-next{right:6px}
.tp-p .sh-more{display:inline-flex;margin:0 20px}
@media (prefers-reduced-motion:reduce){.tp-b,.tp-chev{transition:none}}
.tp-progs .nshelf,.tp-tasters .nshelf{margin-top:clamp(16px,2vw,24px)}
.tp-progs .nshelf+.nshelf{margin-top:clamp(10px,1.4vw,18px)}
/* the six Topic Academies */
.ac6{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ac-t{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px 22px 20px;border-radius:14px;background:#fff;border-top:4px solid var(--red);
  box-shadow:0 1px 2px rgba(26,26,26,.06),0 6px 18px rgba(26,26,26,.07);color:var(--near);transition:box-shadow .15s}
.ac-t:hover{box-shadow:0 10px 26px rgba(26,26,26,.16)}
.ac-t:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.ac-n{font-family:var(--fh);font-size:1.5rem;line-height:1.15}
.ac-p{font-size:1.0625rem;line-height:1.5;color:var(--body)}
.ac-m{font-size:1rem;color:var(--mute)}
.ac-go{margin-top:auto;font-weight:600;color:var(--red-d)}
@media (max-width:1000px){.ac6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ac6{grid-template-columns:minmax(0,1fr)}}

/* R2-12 and a v53 fix: the course page opens with its cover flush under the menu, with no gap (the strip under the
   menu is gone from every page, see R2-5); on phones the cover is full width on top, then the details beneath it (v53
   left the page in two narrow columns at 390px). */
.sp-hero{align-items:start;padding:0 0 0 var(--pad);min-height:0}
.sp-hero>.sp-pic{margin:0;border-radius:0 0 0 18px;align-self:start}
.sp-in{padding-top:clamp(24px,3vw,44px)}
@media (max-width:900px){
  .sp-hero{grid-template-columns:minmax(0,1fr);padding:0}
  .sp-hero>.sp-pic{order:0;border-radius:0;width:100%}
  .sp-in{order:1;margin:0;padding:22px var(--pad) 30px;max-width:none}
}

/* R2-5: the Academy menu, as on the Avanti pages: one bar at the very top of the page, the logo on the left, the
   links across, then My learning passport, Sign in and Aa on the right. From 901px wide it is never folded away; where it
   does not fit on one line (a narrower screen, or A+ and A++), the links take a second line in the same bar. At 900px
   and under it is the Menu button. The "Avanti Change" link is in the menu (and the footer). */
@media (min-width:901px){
  #ahead{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;min-height:64px;background:var(--cream);box-shadow:0 1px 0 rgba(58,66,69,.14)}
  #ahead>.logo{order:0;flex:none;padding:0;background:var(--red)}
  #ahead>.logo img{height:64px;width:auto}
  #ahead>.menu-btn{display:none}
  #ahead>.szw{order:2;flex:none;margin:0;padding:0 var(--pad) 0 8px;align-self:center}
  #ahead>.anav{order:1;flex:1 1 auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;align-content:stretch;position:static;min-width:0;
    margin:0 0 0 6px;padding:0;max-height:none;overflow:visible;background:transparent;border:0;box-shadow:none}
  #ahead>.anav>a{height:auto;min-height:64px;padding:0 14px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;white-space:nowrap;font-size:1rem}
  #ahead>.anav>a:hover{background:transparent;color:var(--red-d)}
  #ahead>.anav>a.on{color:var(--red-d);box-shadow:inset 0 -3px 0 var(--red)}
  #ahead>.anav>.anav-site{display:none}
  #ahead .anav-acct{display:flex;align-items:center;gap:8px;margin-left:auto;padding:0 0 0 8px;position:static;height:auto}
  #ahead .anav-acct a{height:44px;min-height:44px;margin:0;padding:0 20px;border:0;border-radius:999px;white-space:nowrap}
  #ahead .anav-acct a.basket{padding:0 16px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
}
/* where the links take a second line, they keep the full bar's height between them */
@media (min-width:901px) and (max-width:1279px){#ahead>.anav>a{min-height:52px}}
.anav-site{display:none}
@media (max-width:900px){#ahead .anav.open>.anav-site{display:flex;gap:8px}}
/* a little tighter on laptop widths, so the bar stays on one line down to about 1280px (A, normal text) */
@media (min-width:901px) and (max-width:1439px){
  #ahead>.anav>a{padding:0 9px}
  #ahead>.anav{margin-left:2px}
  #ahead .anav-acct{gap:6px;padding-left:4px}
  #ahead .anav-acct a{padding:0 15px}
  #ahead>.szw{padding:0 14px 0 6px}
}
/* on touch screens and narrow windows there is no hover: the whole card is the link, so View is left out and the
   learning time has the row to itself (it wraps rather than being cut off) */
@media (hover:none),(pointer:coarse),(max-width:700px){
  .nc.nc54 .nc-view{display:none}
  .nc.nc54 .nc-d{display:block;-webkit-line-clamp:unset}
}
@media (max-width:700px){.sh-arr{display:none}}

/* ---- v55 (Amanda's review 3, 16 Oct 2026) ---- */
/* R3-10: one card everywhere. The clean cover, then the topic label, the title (up to three lines, never cut: the build
   check measures every card), and one line of level, standard length and price that wraps rather than cutting off.
   Cards in a row are the same height: the row stretches its items, the card fills its item, and the level line sits at
   the foot. */
.nc-li{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.nc.nc55{display:flex;flex-direction:column;flex:1 1 auto;aspect-ratio:auto;overflow:hidden;background:#fff;color:var(--near);border-radius:14px;
  box-shadow:0 1px 2px rgba(26,26,26,.08),0 6px 18px rgba(26,26,26,.1);transition:box-shadow .2s ease,transform .2s ease}
.nc.nc55 .nc-img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;flex:none;border-radius:14px 14px 0 0;overflow:hidden;background:var(--ink)}
.nc.nc55 .nc-img>.nc-soon{inset:auto;top:12px;right:12px;width:auto;height:auto}
.nc.nc55 .nc-body{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;padding:12px 14px 14px;min-width:0}
.nc.nc55 .nc-k{font-size:1rem;line-height:1.3;color:var(--mute);font-weight:600}
.nc.nc55 .nc-t{font-family:var(--fh);font-weight:700;font-size:1.1875rem;line-height:1.22;color:var(--near);display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
.nc.nc55 .nc-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:auto 0 0;min-width:0;font-size:1rem;line-height:1.3}
.nc.nc55 .nc-row .lvl{margin:0 2px 0 0;flex:none}
.nc.nc55 .nc-d{display:inline;color:var(--body);-webkit-line-clamp:unset}
.nc.nc55 .nc-sep{color:var(--mute)}
.nc.nc55 .nc-p{font-weight:700;color:var(--near);white-space:nowrap}
.nc.nc55 .nc-fb-t{display:none}
.nc.nc55:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.nc.nc55:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(26,26,26,.18)}}
@media (prefers-reduced-motion:reduce){.nc.nc55,.nc.nc55:hover{transform:none;transition:none}}
/* R3-11: a Signature card's Talk to us, beside the card (never a basket) */
.nc-talk{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;
  font-weight:600;font-size:1rem}
.nc-talk:hover{background:var(--near)}
.nc-talk:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* R3-13: "In your passport", on a card the learner holds or has started */
.nc-own{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--teal,#2E7F76);color:#fff;font-weight:600;font-size:1rem;line-height:1.3}
.nc-own::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}

/* R3-12: rows. Snap to each card, part of the next card showing: about five on a desktop, three on a tablet, one and a
   third on a phone. Arrow buttons with a mouse, swipe on touch, arrow keys between cards (academy.js). Nothing moves on
   its own. */
.sh-row{grid-auto-columns:calc((100% - 4 * var(--sg)) / 5.3);--sg:clamp(12px,1.4vw,20px);gap:var(--sg);align-items:stretch}
.nc-li{scroll-snap-align:start}
@media (max-width:1199px){.sh-row{grid-auto-columns:calc((100% - 3 * var(--sg)) / 4.3)}}
@media (max-width:999px){.sh-row{grid-auto-columns:calc((100% - 2 * var(--sg)) / 3.3)}}
@media (max-width:759px){.sh-row{grid-auto-columns:calc((100% - var(--sg)) / 2.3)}}
@media (max-width:599px){.sh-row{grid-auto-columns:calc((100% - var(--sg)) / 1.33)}}
.sh-arr{top:calc(16px + (min(100vw, var(--max)) - 2 * var(--pad)) / 5.6 * .5625 / 2 - 24px)}
@media (max-width:1199px){.sh-arr{top:calc(16px + (100vw - 2 * var(--pad)) / 4.6 * .5625 / 2 - 24px)}}
@media (max-width:999px){.sh-arr{top:calc(16px + (100vw - 2 * var(--pad)) / 3.6 * .5625 / 2 - 24px)}}
.sh-head h2,.sh-head h3{font-family:var(--fh);font-weight:400;line-height:1.1;color:var(--near)}
.sh-head h2 em,.sh-head h3 em,.tp55 h2 em,.ac55-sec h2 em{color:var(--red)}
.rows55{padding:clamp(20px,3vw,40px) 0 clamp(10px,2vw,20px)}
.rows55>.nshelf+.nshelf,.rows55>.nshelf+.tp-sec{margin-top:clamp(12px,2vw,26px)}
.rows55>.tp-sec{border-top:1px solid var(--line)}
.sh-head .sh-more{margin-left:auto}

/* R3-7 and R3-6: the six Academies, each with its name and number of topics */
.ac55-sec{padding:clamp(28px,4vw,56px) 0 clamp(20px,3vw,40px)}
.ac55-sec h2{font-family:var(--fh);font-weight:400;font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;color:var(--near)}
.ac55-sec .tp-line{margin-top:10px;font-size:1.1875rem;line-height:1.5;color:var(--body);max-width:62ch}
.ac55-sec .ac6{margin-top:clamp(18px,2.4vw,28px)}
.ac-t.ac55{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:6px 16px;min-height:110px;padding:20px 22px}
.ac55 .ac-n{grid-column:1;font-family:var(--fh);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--near);margin:0}
.ac55 .ac-m{grid-column:1;font-size:1.0625rem;color:var(--mute)}
.ac55 .ac-go{grid-column:2;grid-row:1/3;margin:0;font-size:1.75rem;line-height:1;color:var(--red-d)}
.home-who{background:var(--paper)}
.home-start{padding:clamp(24px,3.4vw,48px) 0 clamp(20px,3vw,40px);border-top:1px solid var(--line)}
.home-start .sh-head h2,.rows55 .sh-head h2{font-size:clamp(1.75rem,2.6vw,2.375rem)}

/* R3-4: the way back to the Avanti home page, under the search */
.hx-back{margin-top:28px;border-radius:999px;padding:14px 24px;gap:12px;text-transform:none;letter-spacing:0;font-size:1.0625rem}
.hx-back:hover{gap:12px}

/* R3-9: the topic page. The title and its one line, then the three options side by side (stacked on a phone), then
   Other sizes, closed until opened. */
.tph55{padding-bottom:clamp(28px,3vw,44px)}
.tph55 h1{font-size:clamp(2.5rem,5.6vw,5.5rem)}
.tp-one{margin-top:18px;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;color:var(--body)}
.tp-one em{font-style:italic;color:var(--ink)}
.opt3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(24px,3vw,40px)}
.opt{display:flex;flex-direction:column;min-width:0}
.opt-h{font-family:var(--fh);font-weight:400;font-size:clamp(1.5rem,2vw,1.875rem);line-height:1.1;color:var(--near)}
.opt-l{margin:6px 0 12px;font-size:1rem;line-height:1.45;color:var(--body)}
.opt-c{list-style:none;margin:0;padding:0;display:flex;flex:1 1 auto}
.opt-c>.nc-li{flex:1 1 auto}
.opt-whole .opt-h{color:var(--red-d)}
@media (max-width:820px){.opt3{grid-template-columns:minmax(0,1fr)}.opt-c>.nc-li{max-width:520px}}
.osz{margin-top:clamp(22px,3vw,34px);border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(58,66,69,.22)}
.osz>summary{display:flex;align-items:center;gap:14px;min-height:58px;padding:12px 20px;cursor:pointer;list-style:none;font-weight:600;font-size:1.125rem;color:var(--near)}
.osz>summary::-webkit-details-marker{display:none}
.osz>summary .chev{flex:none;width:10px;height:10px;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.osz[open]>summary .chev{transform:rotate(225deg)}
.osz>summary:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:14px}
.osz-in{padding:4px 0 10px;border-top:1px solid var(--line)}
.osz .nshelf{max-width:none;padding-bottom:6px}
.osz .sh-head{padding:14px 20px 0}
.osz .sh-row{padding:12px 20px 16px;scroll-padding-inline:20px}
.tph55 .tp-note{margin-top:18px;font-size:1rem;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.osz>summary .chev{transition:none}}

/* R3-8: an Academy's topic tiles, as in the beta, under the rows */
.tp55{padding:clamp(24px,3.4vw,44px) 0 clamp(14px,2vw,26px)}
.tp55 .sh-head{padding:0}
.tp55 .sh-head h2{font-size:clamp(1.75rem,2.6vw,2.375rem)}
.tp55 .tp-list{margin-top:18px}
.org-acts{margin-top:28px}
.org-links{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.org-links p{margin-top:6px}

/* R3-14: on phones no word is ever hyphenated or broken across lines. Headings that would not fit a long word step down
   in size instead (checked at 360 and 390px wide). */
@media (max-width:700px){
  html body *{hyphens:none !important;-webkit-hyphens:none !important}
  h1,h2,h3,h4,p,a,li,span,button,dd,dt,summary,label{overflow-wrap:normal;word-break:normal}
  .aph h1{font-size:clamp(2.25rem,10.5vw,3rem)}
}
/* a Signature programme's stage headings (Week 1, Session 1) take the whole row, not the number column (they ran out of
   it on phones) */
.mods.ing .ing-stage{display:block}
.anc+.anc{margin-top:clamp(12px,2vw,26px)}

/* v55: a card's length and price stay together, so a narrow card moves both under the level, never leaving a stray dot */
.nc.nc55 .nc-dp{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nc.nc55 .nc-sp{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nc.nc55.sig .nc-dp{display:inline;white-space:normal}   /* "Live with Jon and Amanda" may need two lines on a phone */
.nc.nc55.sig .nc-sp{margin-left:8px}
@media (max-width:700px){ .nc.nc55.sig .nc-sep{display:none} .nc.nc55.sig .nc-sp{display:flex;margin-left:0} }   /* phones: Bespoke on its own line, no stray dot */
/* v55 (R3-6): Psychometrics links on the topics they fit */
.tp-psy{padding-top:8px}
.tp-psy p{max-width:60ch;margin:0 0 12px}
.tp-psy .py-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px}

/* v56 (Amanda's review 4) ------------------------------------------------------------------------------------------- */
/* R4-8: the way back to the Avanti home page sits just under the Avanti | Academy logo, top left, on every page */
.bk56{padding:12px var(--pad) 0 calc(var(--pad) - 14px);background:transparent}
.bk56-a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border:1.5px solid var(--ink);border-radius:999px;
  font-size:1rem;font-weight:600;color:var(--near);background:rgba(255,255,255,.55)}
.bk56-a:hover{background:#fff}
.bk56-a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
body:has(.hx) .bk56{background:var(--cream)}
body:has(.sp-hero) .bk56{padding-bottom:12px}
@media (max-width:700px){.bk56{padding:10px var(--pad) 0}.bk56-a{padding:6px 16px}}
/* R4-5: the scroll arrow at the bottom middle of the hero image */
.hx.has-img,.hx{position:relative}
.hx-down{position:absolute;left:50%;bottom:clamp(14px,2.4vw,28px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--near);box-shadow:0 4px 16px rgba(26,26,26,.18);z-index:2}
.hx-down svg{width:30px;height:30px;fill:currentColor}
.hx-down:hover{background:#fff}
.hx-down:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hx-down svg{animation:hx56-bob 1.8s ease-in-out infinite}
  @keyframes hx56-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
}
#develop{scroll-margin-top:72px}
#develop:focus{outline:none}
/* R4-5 and R4-6: the nine category cards, 3 by 3, then 2 across on a tablet and 1 on a phone (.ac6 does the columns) */
.cat9 .ac-n{font-size:clamp(1.375rem,1.8vw,1.625rem)}
.home-cats{padding-top:clamp(36px,5vw,64px)}
/* R4-6: a topic row's heading is the topic's name and opens its page */
.cat56-rows .sh-head h2 a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cat56-rows .sh-head h2 a:hover{color:var(--red-d)}
/* R4-9: Development, two sections with three tabs each */
.dv56{padding:clamp(32px,4.4vw,64px) 0}
.dv56.alt{background:var(--paper)}
.dv56 h2{font-family:var(--fh);font-weight:400;font-size:clamp(1.875rem,3vw,2.625rem);line-height:1.1;color:var(--near)}
.dv56 .tp-line{max-width:70ch;margin-top:12px;font-size:1.125rem;line-height:1.55}
.dv56:focus{outline:none}
#psychometrics,#coaching{scroll-margin-top:72px}
.tl56{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 18px;padding:0;border-bottom:1px solid var(--line)}
.tl56 [role=tab]{font:inherit;font-size:1.0625rem;font-weight:600;color:var(--ink);background:none;border:0;border-bottom:4px solid transparent;
  padding:12px 16px 10px;min-height:48px;cursor:pointer;margin-bottom:-1px}
.tl56 [role=tab]:hover{color:var(--near);border-bottom-color:var(--stone)}
.tl56 [role=tab][aria-selected=true]{color:var(--near);border-bottom-color:var(--red)}
.tl56 [role=tab]:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.tp56:focus-visible{outline:3px solid var(--red);outline-offset:6px;border-radius:6px}
.tp56-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dv56 .dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.dv56 .dcard h4{font-size:1.25rem;font-weight:600;line-height:1.2;margin-top:4px;color:var(--near)}
.dv56 .dcard h4 a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.dv56 .dcard .dbuy{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dv56 .dcard .pr{font-weight:600}
.dv56-lead{max-width:70ch;margin:0 0 16px;font-size:1.125rem;line-height:1.55}
.dv56-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3.4vw,44px)}
.dv56-more h3{font-family:var(--fh);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--near);margin-bottom:12px}
.dv56-offers{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.dv56-offers p{margin-top:4px;font-size:1.0625rem;line-height:1.5}
.dv56 .py-nots{margin:0 0 14px}
.dv56 .own-note,.dv56 .lic-note{margin-top:18px;max-width:80ch;font-size:1rem;color:var(--mute)}
@media (max-width:1000px){.dv56 .dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.dv56 .dgrid,.dv56-more{grid-template-columns:minmax(0,1fr)}.tl56 [role=tab]{padding:10px 12px 8px;font-size:1rem}}

/* v57 (Amanda's review 5) ------------------------------------------------------------------------------------------- */
/* R5-4: the Academy home hero fills the rest of the first screen exactly, down to the bottom of the window (100svh), so no
   strip of the next section shows. The title block sits higher and a little smaller on short laptop screens, so the scroll
   arrow is always whole on screen at the bottom middle. --hx-top is where the hero starts, under the menu and the back
   button (academy.js measures it; 120px until then). The hero only grows past the screen when its words need more room
   (a very short window, or A+ and A++). */
.hx.has-img{box-sizing:border-box;display:flex;flex-direction:column;min-height:calc(100vh - var(--hx-top,120px));min-height:calc(100svh - var(--hx-top,120px))}
.hx.has-img .hx-in{width:100%}
@media (min-width:861px){
  .hx.has-img{padding-top:clamp(24px,5svh,56px);padding-bottom:calc(56px + clamp(14px,2.4vw,28px) + 24px)}
  .hx.has-img h1{font-size:min(clamp(2.5rem,5.6vw,5rem),9svh)}
  .hx.has-img .hx-p{margin-top:min(28px,2.6svh)}
  .hx.has-img .asearch{margin-top:min(32px,3svh)}
}
@media (max-width:860px){
  .hx.has-img{padding-bottom:calc(56px + 14px + 24px)}
  .hx.has-img .hx-in{flex:1 1 auto;display:flex;flex-direction:column}
}
@media (max-width:860px) and (max-height:700px){   /* small and older phones (360 by 640, 375 by 667): a little tighter */
  .hx.has-img{padding-top:16px;padding-bottom:calc(56px + 14px + 16px)}
  .hx.has-img h1{font-size:2.25rem}
  .hx.has-img .hx-p{margin-top:14px}
  .hx.has-img .asearch{margin-top:16px}
}

/* R5-5: a card's length and price never overlap or run off the card. The level comes first; then the length on the left
   and the price on the right of the same line. Where both don't fit ("Multi-day, online" with "From £549" on a narrow
   card, or at A+ and A++), the price drops onto its own line under the length. The dot between them is no longer needed. */
.nc.nc55 .nc-dp,.nc.nc55.sig .nc-dp{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;flex:1 1 auto;min-width:0;white-space:normal}
.nc.nc55 .nc-d{min-width:0}
.nc.nc55 .nc-sp,.nc.nc55.sig .nc-sp{display:inline-flex;margin-left:0;white-space:nowrap}
.nc.nc55 .nc-sep,.nc.nc55.sig .nc-sep{display:none}

/* R5-6 (replaces R2-12): every product page opened from a carousel shows its cover set in from the edges by a small border
   of the page background, with rounded corners like the cards: 20px on desktop, 14px on phones. The Back button sits
   inside the cover's corner. */
.sp-hero>.sp-pic{margin:20px 20px 20px 0;border-radius:14px}
.sp-hero>.sp-back{top:32px;right:32px}
@media (max-width:900px){
  .sp-hero>.sp-pic{margin:14px 14px 0;width:auto;border-radius:14px}
  .sp-hero>.sp-back{top:24px;right:24px}
}

/* v59 (Amanda's review 6) ------------------------------------------------------------------------------------------- */
/* R6-4: the quick check uses the player's full content width on desktop (the slide area is narrower, sized to the
   screen's height, and left empty space on the right), with its content in a centred column of at most 900px for
   readability. On phones it is already full width, with its side padding. */
@media (min-width:861px){.stage.qc-on{max-width:none;width:100%}}
.stage.qc-on .qc>*{width:100%;max-width:900px;margin-left:auto;margin-right:auto}
/* R6-5: slides viewed so far, and the locked Start button's note */
.qc-prog{font-size:1.0625rem;font-weight:600;color:var(--ink)}
.qc-prog.ok{color:#1F6B3A}
.qc .btn[aria-disabled=true]{background:var(--line);color:var(--ink);box-shadow:none;cursor:not-allowed}
.qc-lock{display:flex;gap:8px;align-items:center;font-size:1rem;line-height:1.5;color:var(--ink)}
.qc-lock .lk-ic svg{width:18px;height:18px;fill:currentColor;display:block}
/* R6-6 to R6-13 (behind the 'takeaways' switch): the player's takeaway box and the passport's new sections */
.tk-slot{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:10px;text-align:left}
.tk-h{font-family:var(--fh);font-size:1.375rem;line-height:1.2;color:var(--near);font-weight:400}
.tk-ask,.tk-lab,.tk-edit label,.tk-note label{font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.tk-slot textarea,.tk-edit textarea,.tk-note textarea,.tk-tools input{font:inherit;font-size:1.0625rem;width:100%;max-width:100%;box-sizing:border-box;padding:12px 14px;border:1.5px solid var(--edge);border-radius:var(--r-s);background:#fff;color:var(--near)}
.tk-slot textarea:focus-visible,.tk-edit textarea:focus-visible,.tk-note textarea:focus-visible,.tk-tools input:focus-visible{outline:3px solid var(--near);outline-offset:2px}
.tk-hint{font-size:1rem;line-height:1.5;color:var(--mute)}
.tk-hint:empty{display:none}
.tk-hint a,.tk-share a{color:var(--red);border-bottom:1px solid currentColor}
.tk-acts,.tk-foot,.tk-confirm{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.tk-slot .si-msg,.tk-slot .si-err{margin-top:0}
.tk-tools{display:grid;gap:8px;max-width:520px}
.tk-count{margin:14px 0 10px;font-size:1rem;color:var(--mute)}
.tk-count:empty{margin:8px 0}
.tk-list,.dr-list,.dr-sum{list-style:none;display:grid;gap:12px}
.tk-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:18px 20px;display:grid;gap:12px}
.blk2.alt .tk-item{background:var(--paper)}
.tk-meta h3{font-family:var(--fh);font-weight:400;font-size:1.25rem;line-height:1.25;color:var(--near)}
.tk-meta span{display:block;margin-top:2px;font-size:1rem;color:var(--mute)}
.tk-body{margin:0;padding-left:14px;border-left:4px solid var(--red);font-size:1.125rem;line-height:1.5;color:var(--near);white-space:pre-wrap;overflow-wrap:anywhere}
.tk-out{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.tk-out-l{font-weight:600;margin-right:4px}
.tk-pill{font:inherit;font-size:1rem;font-weight:600;padding:8px 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.tk-pill[aria-pressed=true]{background:var(--ink);color:#fff}
.tk-note,.tk-edit{display:grid;gap:8px}
.tk-note .btn,.tk-edit .btn{justify-self:start}
.tk-link{font:inherit;font-size:1rem;font-weight:600;background:none;border:0;padding:6px 2px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tk-danger{color:var(--red-d)}
.tk-foot{margin-top:18px}
.tk-confirm{margin-top:12px;padding:14px 16px;background:var(--red-tint);border-radius:var(--r-s)}
.tk-confirm p{flex-basis:100%;font-weight:600;color:var(--near)}
.tk-item .si-msg,.tk-item .si-err{margin-top:0}
.rc-box{display:grid;gap:22px}
.rc-round h3{font-family:var(--fh);font-weight:400;font-size:1.375rem;line-height:1.2;color:var(--near);margin-bottom:12px}
.rc-q{display:grid;gap:10px;margin-bottom:18px;max-width:720px}
.rc-q fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.rc-q legend{font-weight:600;font-size:1.0625rem;line-height:1.45;color:var(--near);margin-bottom:8px}
.rc-q .btn{justify-self:start}
.rc-fb:empty{display:none}
.dr-sum{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}
.dr-sum li{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;font-size:1rem;line-height:1.4}
.dr-sum b{display:block;font-family:var(--fh);font-weight:400;font-size:1.75rem;color:var(--near)}
.dr-list li{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.dr-at{grid-row:span 3;font-size:1rem;color:var(--mute)}
.dr-what{font-size:1rem;font-weight:600;color:var(--red-d)}
.dr-list b{font-weight:600;color:var(--near)}
.dr-d{font-size:1rem;color:var(--mute)}
.rm-box{display:grid;gap:10px}
.rm-box .pp-news input:disabled+label{color:var(--mute)}
.sh-box{margin-top:26px;display:grid;gap:10px;max-width:640px}
.sh-box p,.tk-share{font-size:1rem;line-height:1.55}
.tk-share{margin-top:14px;padding:12px 14px;background:var(--paper);border-left:4px solid var(--ink);max-width:620px}
@media (max-width:860px){.dr-sum{grid-template-columns:1fr}.dr-list li{grid-template-columns:1fr}.dr-at{grid-row:auto}.tk-item{padding:16px}}

/* v60 (Amanda's review 7) ------------------------------------------------------------------------------------------- */
/* R7-1: the footer takes the side strip's grey from one token, --foot, which is --ink (#3A4245), the Avanti side strip's
   own colour, set the same way in site.css; the integrity check fails if any footer differs from the side strip. */
:root{--foot:var(--ink)}
.afoot{background:var(--foot)}

/* R7-2: twice the room between the hero heading and the line under it (28px becomes 56px; 14px on small phones becomes
   28px). The scroll arrow stays whole on screen: on short laptop screens the gap shrinks with the window height. */
.hx-p{margin-top:56px}
@media (min-width:861px){.hx.has-img .hx-p{margin-top:min(56px,5.2svh)}}
@media (max-width:860px){.hx.has-img .hx-p{margin-top:56px}}
@media (max-width:860px) and (max-height:700px){.hx.has-img .hx-p{margin-top:28px}}

/* Section 2: the counter strip, under the hero and above "What do you want to develop?". Four equal columns with a thin
   line between them; two by two under 600px. Warm grey (--stone) with a thin border and rounded corners. The numbers are
   Avanti red in the headings' serif (Instrument Serif, already on the site): 3.7 to 1 on --stone, and at 40px and up they
   are large text, so AA. Labels in charcoal, 7.3 to 1. A column whose figure can't be loaded stays hidden; the others share
   the width equally. No links or buttons. */
.cs60{background:var(--paper);padding:clamp(28px,4vw,48px) 0 0}
.cs60-l{list-style:none;margin:0;padding:0;display:flex;gap:1px;background:rgba(58,66,69,.28);border:1px solid rgba(58,66,69,.28);border-radius:var(--r);overflow:hidden}
.cs60-i{flex:1 1 0;min-width:0;background:var(--stone);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(20px,2.6vw,32px) 12px}
.cs60-i[hidden]{display:none}
.cs60-n{display:block;font-family:var(--fi);font-style:italic;font-weight:400;color:var(--red);font-size:clamp(2.75rem,4.4vw,4rem);line-height:1;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.cs60-k{display:block;margin-top:10px;color:var(--ink);font-size:1.125rem;font-weight:600;line-height:1.3}
.cs60-w{display:block;margin-top:4px;color:var(--ink);font-size:1rem;line-height:1.3}
.cs60-w[hidden]{display:none}
@media (max-width:599px){
  .cs60-l{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cs60-l[data-cols="1"]{grid-template-columns:minmax(0,1fr)}
  .cs60-l[data-cols="3"]>.cs60-i:not([hidden])~.cs60-i:not([hidden])~.cs60-i:not([hidden]){grid-column:1/-1}
  .cs60-n{font-size:2.75rem}
}
html[data-size="xl"] .cs60-n{font-size:clamp(2.75rem,4vw,3.5rem)}

/* R7-3: My learning passport lists each completed course once: title, level, completion date, certificate type, and the
   Download button on the same row. On phones each course becomes a small card, with the labels shown. */
.ce-tw{margin-top:14px}
.ce-tbl{width:100%;border-collapse:collapse;font-size:1.0625rem}
.ce-tbl th,.ce-tbl td{text-align:left;vertical-align:middle;padding:14px 12px;border-bottom:1px solid var(--line)}
.ce-tbl thead th{font-size:1rem;font-weight:600;color:var(--mute);border-bottom:2px solid var(--ink);padding-top:8px;padding-bottom:10px}
.ce-tbl tbody th{font-weight:600;color:var(--near)}
.ce-tbl .ce-act{text-align:right}
.ce-act .btn+.btn{margin-left:8px}
.ce-act{white-space:nowrap}
.ce-state{display:inline-block;color:var(--ink);font-weight:600;margin-right:12px}
.ce-alt{display:block;margin:8px 0 0 auto;background:none;border:0;padding:4px 0;font:inherit;font-size:1rem;font-weight:600;color:var(--red);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ce-alt:hover{color:var(--red-d)}
#ce-act:not(:empty){margin-top:16px}
@media (max-width:760px){
  .ce-tbl,.ce-tbl tbody,.ce-tbl tr,.ce-tbl th,.ce-tbl td{display:block}
  .ce-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ce-tbl tr{border:1px solid var(--line);border-radius:var(--r-s);background:#fff;padding:14px 16px;margin-bottom:12px}
  .ce-tbl th,.ce-tbl td{border:0;padding:3px 0}
  .ce-tbl tbody th{font-size:1.125rem;margin-bottom:6px}
  .ce-tbl td[data-l]::before{content:attr(data-l) ": ";color:var(--mute);font-weight:600}
  .ce-tbl .ce-act{text-align:left;white-space:normal;padding-top:10px}
  .ce-alt{margin-left:0}
}

/* v60: the staff-only counter page (admin/counter/) */
.cadm{padding-bottom:56px}
.cadm-sec{margin-top:36px}
.cadm-sec h2{font-family:var(--fh);font-weight:400;font-size:1.75rem;color:var(--near);margin-bottom:12px}
.cadm-sec p{font-size:1.0625rem;line-height:1.55;max-width:62em;margin-top:8px}
.cadm-now{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:rgba(58,66,69,.28);border:1px solid rgba(58,66,69,.28);border-radius:var(--r-s);overflow:hidden}
.cadm-now li{background:var(--stone);padding:16px;text-align:center;display:flex;flex-direction:column;gap:4px}
.cadm-now b{font-family:var(--fi);font-style:italic;font-weight:400;color:var(--red);font-size:2.25rem;line-height:1.1}
.cadm-now span{color:var(--ink);font-weight:600}
.cadm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.cadm-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:18px 20px;margin-top:16px}
.cadm-grid .cadm-card{margin-top:0}
.cadm-card h3{font-family:var(--fh);font-weight:400;font-size:1.375rem;color:var(--near)}
.cadm-h{color:var(--mute);font-size:1rem;line-height:1.5}
.cadm-f{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.cadm-f label,.cadm-fs legend{font-weight:600;color:var(--ink);font-size:1rem}
.cadm-f input,.cadm-f textarea{font:inherit;font-size:1rem;padding:10px 12px;border:1.5px solid var(--edge);border-radius:8px;background:#fff;color:var(--near);width:100%}
.cadm-fs{border:0;padding:0;margin:14px 0 0}
.cadm-ck{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:1rem}
.cadm-ck input{width:20px;height:20px;accent-color:var(--red)}
.cadm-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.cadm-when{color:var(--mute);font-size:1rem}
.cadm-log{list-style:none;margin:0;padding:0}
.cadm-log li{padding:10px 0;border-bottom:1px solid var(--line);font-size:1rem}

/* v61 (Amanda's review 8, 18 Oct 2026) -------------------------------------------------------------------------------- */
/* R8-10: the "Leadership is a craft" band at the top of every Academy footer is the lighter stone (#F5F3F0), its words
   black, with "We develop it" in Avanti red (red on the stone is 4.6 to 1, black 16.4 to 1). A hairline keeps it apart
   from a page that ends on the same stone. */
.af-big{background:var(--paper);border-top:1px solid var(--line);border-bottom:0;padding-top:36px;padding-bottom:36px}
.af-big p{color:var(--near)}
.af-big p em{color:var(--red);font-style:normal}

/* R8-11: the labels under a page title ("13 programmes", "Avanti certificate", "Online, at your own pace", and a category's
   topics and products) are plainly information: one colour, no border, fill or hover, each with a small mark */
.aph .meta,.aph .meta.plain{gap:8px 28px}
.aph .meta span,.aph .meta span:first-child,.aph .meta.plain span,.aph .meta.plain span:first-child{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;color:var(--ink);display:inline-flex;align-items:center;gap:10px;cursor:default}
.aph .meta span::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}

/* R8-12: every psychometric button is teal with white text (white on teal #2E7F76 is 5.0 to 1) */
.buy.psy61,.buy.reg.psy61,.btn.psy61{background:#2E7F76;color:#fff;box-shadow:none;border-color:#2E7F76}
.buy.psy61:hover,.buy.reg.psy61:hover,.btn.psy61:hover{background:#246860;color:#fff;border-color:#246860}

/* R8-13: the paragraphs under Avanti Psychometrics and Coaching use the content width, up to about 1100px */
.dv56 .tp-line.dv61-wide{max-width:1100px}

/* R8-14: What They Are Not, above the combined offers, one point per box: 4 across on a computer, 2 on a tablet, stacked
   on a phone */
.dv61-not,.dv61-comb{margin-top:clamp(28px,3.4vw,44px)}
.dv61-not h3,.dv61-comb h3{font-family:var(--fh);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--near);margin-bottom:14px}
.dv61-nots,.dv61-offers{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.dv61-nots{grid-template-columns:repeat(4,minmax(0,1fr))}
.dv61-nots li{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:var(--r-s);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.dv61-nots b{font-size:1.125rem;color:var(--near)}
.dv61-nots span{font-size:1.0625rem;line-height:1.5;color:var(--body)}
/* R8-15: the two combined offers side by side, each a box with its link */
.dv61-offers{grid-template-columns:repeat(2,minmax(0,1fr))}
.dv61-offer{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.dv61-offer h4{font-size:1.25rem;font-weight:600;line-height:1.2;color:var(--near)}
.dv61-offer p{font-size:1.0625rem;line-height:1.5;color:var(--body)}
.dv61-offer .dv61-save{font-weight:600;color:var(--ink)}
.dv61-offer .link{margin-top:auto;align-self:flex-start}
.dv61-guide{margin-top:18px}
@media (max-width:1000px){.dv61-nots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dv61-nots,.dv61-offers{grid-template-columns:minmax(0,1fr)}}

/* R8-19 and R8-22: the first screen of For Organisations and of each category page reaches the bottom of the window,
   with the round scroll arrow from the home hero (R4-5) at its bottom middle. --f61-top is where it starts (academy.js). */
.fold61{display:flex;flex-direction:column;min-height:calc(100vh - var(--f61-top,120px));min-height:calc(100svh - var(--f61-top,120px))}
.fold61>.aph{width:100%;box-sizing:border-box}
.fold61-foot{margin-top:auto;display:flex;justify-content:center;padding:4px 0 6px}
.fold61 .hx-down.fold61-down{position:relative;left:auto;bottom:auto;transform:none;background:#fff;border:1px solid var(--line)}
#team:focus,#cat61-more:focus{outline:none}
#team,#cat61-more{scroll-margin-top:72px}

/* R8-17 and R8-18: For Organisations. The first paragraph runs the full content width; the red band is narrower, so the
   title, paragraph, Talk to us, the band and the arrow all fit the first screen */
.aph.aph61-wide .lede{max-width:none}
.org61 .aph{padding-bottom:clamp(20px,3svh,40px);border-bottom:0}
.org61 .aph h1{margin-top:clamp(12px,3svh,48px);font-size:clamp(3rem,min(7.6vw,11svh),7.5rem)}
.org61 .aph .lede{margin-top:clamp(14px,2.4svh,30px)}
.org61 .org-acts{margin-top:clamp(14px,2.4svh,30px)}
.org61 .soon-band{padding-top:clamp(16px,2.4svh,28px);padding-bottom:clamp(16px,2.4svh,28px);align-items:center}
.org61 .soon-band p.big{max-width:min(100ch,calc(100vw - 480px))}
@media (max-width:900px){.org61 .soon-band p.big{max-width:none}}
.org61 .fold61-foot{padding:12px 0 clamp(12px,2svh,20px)}

/* R8-21: a category page's title is a little smaller and the space above and between the rows is less, so the first row
   (Start here) is whole on the first screen at 1440 by 900 and 1366 by 768 */
.cat61 .aph{padding-top:14px;padding-bottom:clamp(14px,2.2svh,24px)}
.cat61 .aph h1{margin-top:clamp(10px,2svh,22px);font-size:clamp(2.5rem,min(5vw,6.4svh),4.5rem)}
.cat61 .aph .lede{margin-top:clamp(8px,1.4svh,14px);font-size:clamp(1.0625rem,1.3vw,1.25rem)}
.cat61 .aph .meta{margin-top:clamp(8px,1.4svh,14px)}
.cat61-first.rows55{padding-top:clamp(12px,2svh,20px);padding-bottom:0}
.cat61-first .sh-head h2{font-size:clamp(1.5rem,2.2vw,2rem)}
.cat61-first .nshelf{padding-bottom:0}
.cat61-first .sh-row{padding-bottom:10px}
.cat61-rest.rows55{padding-top:clamp(12px,2vw,24px)}

/* R8-16 and R8-8: a red asterisk marks a required field, with one line at the top of the form saying so */
.req{color:var(--red);font-weight:700}
.req-note{font-size:1rem;color:var(--ink);margin:0 0 14px}
/* v61 R8-13: the closing notes under Psychometrics run full width too, up to about 1100px */
.dv56 .own-note,.dv56 .lic-note,.dv56 .dv56-lead,.dv56 .dv61-guide{max-width:1100px}

/* ---- v62 (Jon's review 9, 18 Oct 2026) ----
   For Organisations, rebuilt (review 9, section 3): the site's own tokens (red #DE0000, charcoal #3A4245, pale stone
   #E8E0D0, lighter stone #F5F3F0), the existing buttons, eyebrows (.k) and italic-accent headings. Body 18px; section
   headings 44 to 52px on desktop; the hero heading 76px, down to 40px on phones; buttons at least 44px tall; cards 18px
   radius with the soft shadow. Contrast: white on red 5.0 to 1, white on charcoal 10.4 to 1, stone on charcoal 8.3 to 1,
   charcoal on stone 8.0 to 1. Red never sits on charcoal (2.0 to 1), so the dark card and panel use white and stone. */
html:has(.org62){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(.org62){scroll-behavior:auto}}
.org62,.o62-sec,.o62-talk{hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word}
.org61.org62>.aph{margin-top:auto;margin-bottom:auto}
.org61.org62 .aph h1{font-size:clamp(2.5rem,5.4vw,4.75rem);line-height:1.02;margin-top:clamp(12px,3svh,40px)}
.org62 .aph .lede{font-size:1.125rem;line-height:1.5}
.o62-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3svh,32px)}
.org62 .btn,.o62-sec .btn,.o62-talk .btn{min-height:44px;box-sizing:border-box;justify-content:center}
.org62 .btn.ghost,.o62-sec .btn.ghost{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.org62 .btn.ghost:hover,.o62-sec .btn.ghost:hover{background:var(--ink);color:#fff}
.org61.org62 .fold61-foot{margin-top:0}
.o62-sec{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
.o62-sec:focus,.o62-talk:focus{outline:0}
.o62-sec.o62-white{background:#fff}
.o62-sec .k{margin-bottom:12px}
.o62-sec h2,.o62-talk h2{font-size:clamp(2.125rem,3.4vw,3.25rem);line-height:1.04;font-weight:400;margin:0 0 clamp(24px,3vw,40px);color:var(--near)}
.o62-sec h2 em{color:var(--red)}
.o62-sec p,.o62-talk p{font-size:1.125rem;line-height:1.5}
.o62-intro{max-width:72ch;margin:-12px 0 clamp(28px,3vw,40px);color:var(--body)}
.o62-grid{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.o62-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.o62-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.o62-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
.o62-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:28px 26px}
.o62-card h3{font-size:1.625rem;line-height:1.15;margin:0 0 10px;color:var(--near)}
.o62-card p{color:var(--body);margin:0}
.o62-card .o62-go{margin-top:auto;padding-top:20px;align-self:flex-start;border-bottom:0;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;font-size:1.125rem}
.o62-card.o62-dark{background:var(--ink);border-color:var(--ink)}
.o62-dark h3,.o62-dark p{color:#fff}
.o62-dark .o62-go{color:#fff}
.o62-dark .o62-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
.o62-steps li{border-top:4px solid var(--red);padding-top:18px}
.o62-n{display:block;font-family:var(--fi);font-style:italic;font-weight:400;color:var(--red);font-size:3.5rem;line-height:1;margin-bottom:10px}
.o62-steps h3,.o62-points h3,.o62-faq h3{font-size:1.375rem;line-height:1.2;margin:0 0 8px;color:var(--near)}
.o62-steps p,.o62-points p,.o62-faq p{color:var(--body);margin:0}
.o62-acts2{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.o62-strip{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;background:var(--cream);border-radius:18px;padding:22px 28px;margin-top:32px}
.o62-strip p{margin:0;color:var(--ink);font-weight:600}
.o62-points{margin-bottom:32px}
.o62-points li{padding-left:18px;border-left:3px solid var(--red)}
.o62-formats .o62-card{background:var(--paper);box-shadow:none}
.o62-bes{margin-top:auto!important;padding-top:18px;font-weight:600;color:var(--ink)!important}
.o62-bes a{color:var(--red);text-decoration:underline;text-underline-offset:4px}
.o62-foot{margin-top:24px;color:var(--ink)}
.o62-panel{margin-top:40px;background:var(--ink);color:#fff;border-radius:18px;padding:clamp(28px,3.4vw,44px)}
.o62-panel h3{font-size:clamp(1.75rem,2.4vw,2.25rem);line-height:1.1;margin:0 0 20px;color:#fff}
html:root body .o62-panel h3 em{color:var(--cream)}
.o62-panel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}
.o62-panel .link{color:#fff;border-bottom-color:#fff;margin-top:0;font-size:1.125rem}
.o62-panel .link:focus-visible{outline:3px solid #fff;outline-offset:3px}
.o62-panel p{color:var(--cream);margin:12px 0 0}
.o62-quote figure{margin:0;max-width:1000px}
.o62-quote blockquote p{font-family:var(--fi);font-style:italic;font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.25;color:var(--near)}
.o62-quote figcaption{margin-top:20px;font-size:1.125rem;font-weight:600;color:var(--ink)}
.o62-talk{background:var(--red);color:#fff;padding:clamp(56px,7vw,96px) 0}
.o62-talk-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:start}
.o62-talk h2{color:#fff}
html:root body .o62-talk h2 em{color:#fff}
.o62-talk-t p{color:#fff;max-width:46ch}
.o62-talk-f{background:#fff;color:var(--ink);border-radius:18px;padding:clamp(24px,3vw,36px);box-shadow:var(--shadow)}
.o62-form{max-width:none}
.o62-form label{font-size:1rem;color:var(--ink)}
.o62-form input,.o62-form textarea{font:inherit;font-size:1.125rem;min-height:44px}
.o62-form .btn{justify-self:start;margin-top:6px}
.o62-form .dhow{font-size:1rem;color:var(--ink);margin:0}
.o62-ok b{display:block;font-family:var(--fh);font-weight:400;font-size:1.75rem;color:var(--near)}
.o62-ok p{color:var(--ink);margin-top:8px}
@media (max-width:1024px){.o62-4{grid-template-columns:repeat(2,minmax(0,1fr))}.o62-talk-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.o62-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .o62-4,.o62-2,.o62-panel ul{grid-template-columns:minmax(0,1fr)}
  .o62-acts,.o62-acts2{flex-direction:column;align-items:stretch}
  .o62-acts .btn,.o62-acts2 .btn,.o62-strip .btn,.o62-form .btn{width:100%;justify-self:stretch}
  .o62-strip{padding:20px}
}

/* R9-11: the counter strip sits under the category cards, before the free Tasters */
.home-cats+.cs60{padding-top:0;padding-bottom:clamp(28px,4vw,48px)}
/* Gillius draws "oe" as one letter (as in "Does"); the v62 page's headings keep the two letters, as on the v50 pages */
.org62 :is(h1,h2,h3),.o62-sec :is(h2,h3),.o62-talk :is(h2,h3){font-variant-ligatures:no-common-ligatures}
/* R9-15 to R9-17: the longer paragraphs under each Programmes section keep a readable line length */
#one-day .sh-lede,#flagship .sh-lede,#signature .sh-lede{max-width:1100px;font-size:1.125rem;line-height:1.55}
/* My Team: the "How group buying works" link under the join code reads as a link */
#mt-code .note a{color:var(--red);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* ---- v63 (Jon's review 10 with Amanda's tenth review, 18 Oct 2026) ----
   The heading font joins "oe" into one letter ("Does" read "Dœs") through a required ligature: off everywhere. */
html{font-feature-settings:"rlig" 0}
/* R10-0: one rule for every intro paragraph under a page or section heading (ph() in build_academy.py, the shelves'
   lede, and the section lines that use the same class): left-aligned, full content width, capped at 1100px. */
.intro63{max-width:1100px;margin-left:0;margin-right:auto;text-align:left}
.sh-lede.intro63{max-width:calc(1100px + 2 * var(--pad))}
/* R10-2: the Academy home hero paragraph is wider, so it takes fewer lines and the scroll arrow stays on the first screen.
   The sand wash behind the words reaches a little further so the text keeps its contrast. */
@media (min-width:861px){
  .hx.has-img .hx-p,.hx.has-img .asearch{max-width:min(740px,57%)}
  .hx-img::after{background:linear-gradient(90deg,rgba(232,224,208,.97) 0%,rgba(232,224,208,.95) 46%,rgba(232,224,208,.78) 60%,rgba(232,224,208,0) 78%)}
}
/* R10-6 and R10-8: "We develop it." in the closing band is the red italic serif of the headings (the band is shared, so it
   changes on every Avanti Academy page, Programmes and Development included) */
.af-big p em{font-family:var(--fi);font-style:italic;font-size:1.12em;color:var(--red)}
/* R10-4: topic pages open on a first screen with the round scroll arrow at its foot */
.tp63>.aph{width:100%}
.tp63-next{scroll-margin-top:72px;outline:0}

/* R10-9: For Organisations. The paper-chain photo fills the first screen edge to edge (object-fit: cover), the figures
   kept in view at the top on every width; a pale stone wash rises from the bottom behind the words, so charcoal text and the
   red crumb link stay above 4.5 to 1 and the large red heading word above 3 to 1. TODO(JH): the image licence. */
.org63{position:relative;isolation:isolate;overflow:hidden;background:var(--cream)}
.o63-img{position:absolute;inset:0;z-index:-1}
.o63-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.o63-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(245,243,240,.97) 0%,rgba(245,243,240,.95) 50%,rgba(245,243,240,.5) 62%,rgba(245,243,240,0) 72%)}
.org61.org62.org63>.aph{margin-top:auto;margin-bottom:0;background:none}
.org63 .fold61-foot{margin-top:0}
@media (max-width:860px){
  .o63-img img{object-position:28% 0}
  .o63-img::after{background:linear-gradient(0deg,rgba(245,243,240,.98) 0%,rgba(245,243,240,.96) 66%,rgba(245,243,240,.5) 76%,rgba(245,243,240,0) 86%)}
}
/* R10-10: no gap between the "More than 19 people?" strip and the Signature programmes */
#group.o62-sec{padding-bottom:clamp(32px,3.6vw,48px)}
#room.o62-sec{padding-top:clamp(32px,3.6vw,48px)}
/* R10-12 and R10-13: "Enhance Any Programme". The full red is 2 to 1 on the charcoal panel, so "Any Programme" takes the
   site's lighter red tint (12 to 1); the new paragraph sits under the heading. */
html:root body .o62-panel h3 em{color:var(--red-tint);font-family:var(--fi);font-style:italic}
.o62-panel p.o63-panel-p{max-width:1100px;margin:0 0 24px;font-size:1.125rem;color:#fff}

/* ---- Section 3: "Where it fits. Keep going." on every topic product page ---- */
.fit63 .fit-line{margin-top:16px;font-size:1.125rem;line-height:1.5}
.fit63 .fit-line a,.ft-note a,.ft-also a,.how63-foot a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.fit63 .fit-how{margin-top:12px}
.fb{margin:0 0 36px}
.fb:last-child{margin-bottom:0}
.fb-h{font-family:var(--fb);font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.ftp{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:6px}
.ft{flex:1 1 0;min-width:0;border-radius:16px;background:#fff;color:var(--near);border:1px solid var(--line);hyphens:none;overflow-wrap:normal}
.ft>a,.ft-here{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 16px 18px;border-radius:16px;color:inherit}
.ft>a:hover{box-shadow:0 6px 18px rgba(26,26,26,.14)}
.ft>a:focus-visible{outline:3px solid var(--near);outline-offset:3px}
.ft-bitesize{background:#F4D9D4;border-color:#F4D9D4}
.ft-focus{background:#EBA9A0;border-color:#EBA9A0}
.ft-explore{background:var(--red-d);border-color:var(--red-d);color:#fff}
.ft-immerse{background:#3A4245;border-color:#3A4245;color:#fff}
.ft-taster{background:#fff;border:2px solid var(--ink)}
.ft.ft-here{background:#fff;border:3px solid var(--red);color:var(--near);height:auto}
.ft-tag{align-self:flex-start;font-family:var(--fb);font-weight:700;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;margin-bottom:6px}
.ft-here .ft-tag{color:var(--red)}
.ft-lv{font-family:var(--fi);font-style:italic;font-size:1.75rem;line-height:1.05}
.ft-name{font-weight:600;font-size:1rem;line-height:1.3}
.ft-len{font-size:1rem}
.ft-pr{margin-top:auto;padding-top:8px;font-weight:700;font-size:1.0625rem}
.ft-arr{flex:none;display:flex;align-items:center;justify-content:center;width:18px;color:var(--red);font-size:1.25rem;font-weight:700}
.ft-note,.ft-also{margin-top:14px;font-size:1rem;color:var(--ink)}
.fr{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fr li+li{border-top:1px solid var(--line)}
.fr a{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;padding:14px 18px;color:var(--ink)}
.fr a:hover{background:var(--paper)}
.fr a:focus-visible{outline:3px solid var(--near);outline-offset:-3px}
.fr-t b{color:var(--red);font-weight:700}
.fr-sub{color:var(--ink)}
.fr-m{flex:none;display:flex;gap:16px;font-size:1rem;white-space:nowrap}
.fr-pr{font-weight:700;min-width:3.5em;text-align:right}
.fr-more{margin-top:14px}
.is-owned .ft-pr,.is-owned .fr-pr,.is-owned .hs-pr{color:inherit}
@media (max-width:1100px){
  .ftp{flex-wrap:wrap;gap:12px}
  .ft{flex:1 1 calc(50% - 6px)}
  .ft-arr{display:none}
}
@media (max-width:600px){
  .ftp{flex-direction:column;gap:0}
  .ft{flex:none}
  .ft-arr{display:flex;width:auto;height:30px}
  .ft-arr span{display:inline-block;transform:rotate(90deg)}
  .fr a{flex-direction:column;align-items:flex-start;gap:4px}
  .fr-sep{display:none}
  .fr-sub{display:block}
  .fr-pr{text-align:left;min-width:0}
}

/* ---- Section 4: "How it works", full size (Academy home, For Organisations) and the strip (topic pages) ---- */
.how63{background:var(--paper);border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) var(--pad)}
.how63-in{max-width:1200px;margin:0 auto}
.how63 .k{color:var(--red);letter-spacing:.12em}
.how63 h2{font-size:52px;line-height:1.05;margin:10px 0 0;color:var(--near)}
.how63 h2 em{color:var(--red)}
.how63-sub{margin-top:16px;font-size:1.25rem;line-height:1.5;max-width:1100px}
.how63-br{position:relative;height:20px;border:3px solid var(--red);border-bottom:0;border-radius:6px 6px 0 0;margin:56px 0 18px}
.how63-pill{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:var(--red);color:#fff;font-weight:700;font-size:1rem;line-height:1.2;padding:6px 16px;border-radius:999px;white-space:nowrap}
.how63-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:end;border-bottom:4px solid var(--ink)}
.hw{display:flex;flex-direction:column;border-radius:16px 16px 0 0;padding:20px 18px 18px;background:#fff;color:var(--near);hyphens:none}
.hw:nth-child(1){height:230px}.hw:nth-child(2){height:270px}.hw:nth-child(3){height:310px}.hw:nth-child(4){height:350px}.hw:nth-child(5){height:390px}
.hw-taster{border:2px solid var(--ink);border-bottom:0}
.hw-bitesize{background:#F4D9D4}
.hw-focus{background:#EBA9A0}
.hw-explore{background:var(--red-d);color:#fff}
.hw-immerse{background:#3A4245;color:#fff}
.hw-lv{font-family:var(--fi);font-style:italic;font-size:32px;line-height:1}
.hw-len{margin-top:8px;font-size:17px}
.hw-desc{margin-top:6px;font-size:16px;line-height:1.35}
.hw-pr{margin-top:auto;font-weight:700;font-size:42px;line-height:1}
.hw-up{margin-top:8px;font-weight:700;font-size:16px}
.how63-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.how63-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.how63-box p{font-size:1.0625rem;line-height:1.5}
.how63-box p.how63-sum{font-weight:700;font-size:1.25rem;color:var(--near);margin-bottom:6px}
.how63-pink{background:#F4D9D4;border-color:#F4D9D4}
.how63-foot{margin-top:24px;font-size:1rem;color:var(--ink);max-width:1100px}
@media (max-width:900px){
  .how63 h2{font-size:40px}
  .hw-lv{font-size:24px}
  .hw-pr{font-size:32px}
  .hw-desc{display:none}
  .hw{padding:16px 12px}
}
@media (max-width:600px){
  .how63-br{height:auto;border:0;border-radius:0;margin:28px 0 0}
  .how63-pill{position:static;transform:none;display:inline-block;white-space:normal;border-radius:14px}
  .how63-steps{display:flex;flex-direction:column;gap:10px;border-bottom:0;border-left:3px solid var(--red);padding:14px 0 0 14px;margin-top:0}
  .hw,.hw:nth-child(n){height:auto;display:grid;grid-template-columns:1fr auto;grid-template-areas:"lv pr" "len up";gap:4px 12px;border-radius:14px;align-items:baseline}
  .hw-taster{border-bottom:2px solid var(--ink)}
  .hw-lv{grid-area:lv}.hw-len{grid-area:len;margin:0}.hw-pr{grid-area:pr;margin:0;text-align:right}.hw-up{grid-area:up;margin:0;text-align:right}
  .how63-boxes{grid-template-columns:minmax(0,1fr)}
}
.hs63{padding:clamp(40px,5vw,64px) var(--pad);border-top:1px solid var(--line)}
.hs63-card{max-width:var(--max);margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 20px rgba(26,26,26,.08);padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 32px;align-items:center}
.hs63 .k{color:var(--red)}
.hs63-say{margin:8px 0 6px}
.hs63-say em{font-family:var(--fi);font-style:italic;font-size:1.75rem;line-height:1.15;color:var(--near)}
.hs63-t p{line-height:1.45}
.hs63-t .link{margin-top:6px}
.hs63-tiles{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.hs{flex:1 1 0;min-width:0;border-radius:14px;background:#fff;color:var(--near);hyphens:none}
.hs>a{display:flex;flex-direction:column;gap:2px;height:100%;padding:14px;border-radius:14px;color:inherit}
.hs>a:focus-visible{outline:3px solid var(--near);outline-offset:3px}
.hs>a:hover{box-shadow:0 6px 16px rgba(26,26,26,.16)}
.hs-taster{border:2px solid var(--ink)}
.hs-bitesize{background:#F4D9D4}
.hs-focus{background:#EBA9A0}
.hs-explore{background:var(--red-d);color:#fff}
.hs-immerse{background:#3A4245;color:#fff}
.hs-lv{font-family:var(--fi);font-style:italic;font-size:21px;line-height:1.1}
.hs-pr{font-weight:700;font-size:20px}
.hs-len{font-size:16px}
@media (max-width:900px){.hs63-card{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.hs63-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
.nw63{white-space:nowrap}
.fb-top .ft-also-top{margin:18px 0 10px}
.org63 .crumbs a{color:var(--red-d)}
.dcard h4 a{display:inline-block;padding:2px 0}

/* ---- v64 (Jon's review 11 with Amanda's eleventh review, 18 Oct 2026) ----
   R10-0 fix: ".aph .lede" (760px) out-ranked the shared intro rule, so Academy page intros still stopped at 760px. Every
   intro now runs the full content width, capped at 1100px, as R10-0 asked. */
.aph .lede.intro63{max-width:1100px}
/* R11-4: the Development intro sits on one line on a computer: full content width, and its size follows the window so it
   never wraps from 1024px up. It may wrap on tablets and phones. */
@media (min-width:1024px){.aph .lede.dev64{max-width:none;font-size:max(1.125rem,min(1.375rem,1.52vw))}}   /* v71: never under 18px (it was 15.6px at 1024px) */
/* R11-3: "All 35 topics" never breaks across lines */
.nw64{white-space:nowrap}
/* R11-6: For Organisations. One smaller section spacing for every section on the page, so Three Ways In, Buy for Your
   Group and Before You Buy each sit closer to what comes before. */
:root{--sec64:clamp(36px,4.2vw,60px)}
.o62-sec,#group.o62-sec,#room.o62-sec,#how-it-works-org.how63,.o62-talk{padding-top:var(--sec64);padding-bottom:var(--sec64)}
.o62-sec h2,.o62-talk h2{margin-bottom:clamp(20px,2.4vw,32px)}
#how-it-works-org .how63-br{margin-top:clamp(36px,4vw,48px)}
/* R11-7: the "Talk to us about your organisation" band is sand (#E8E0D0) instead of red: charcoal words (8.0 to 1),
   "Your Organisation." in red italic (3.9 to 1, large heading text, 34px and up), and the red Send button with white words
   (5.0 to 1) on the white form card. */
.o62-talk{background:var(--cream);color:var(--ink);border-top:1px solid var(--line)}
.o62-talk h2{color:var(--near)}
html:root body .o62-talk h2 em{color:var(--red)}
.o62-talk-t p{color:var(--ink)}
.o62-talk-f{box-shadow:0 6px 20px rgba(26,26,26,.08)}
/* R11-8: each step-up tile in "Where it fits" says clearly what the visitor will pay: "You pay £X" large and bold, then
   "Full price £Y" smaller under it, or "Owned". */
.ft-pay{margin-top:auto;padding-top:10px;font-weight:700;font-size:1.5rem;line-height:1.15}
.ft-full{font-size:1rem;line-height:1.3}
.ft-full[hidden]{display:none}
.is-owned .ft-pay{color:inherit}
/* R11-5: psychometrics in the basket. The "how many people" step opens under the teal Add to basket; the basket line has
   a People box; each discount (combined offer, or 10, 50 or 100 reports) is a line of its own; the optional feedback
   session is offered under the list. */
.psy-n{margin-top:12px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.psy-n label{display:block;font-weight:700;color:var(--near)}
.psy-n-h{margin:4px 0 10px;font-size:1rem;color:var(--ink)}
.psy-n-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.psy-n input{width:7.5em;min-height:44px;font:inherit;padding:8px 10px;border:1.5px solid var(--edge);border-radius:10px;background:#fff;color:#1A1A1A}
.psy-n .buy{min-height:44px}
.psy-n .buy.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.psy-n .buy.ghost:hover{background:var(--ink);color:#fff}
.psy-n-e{margin-top:8px}
.ck-ppl input{width:7em;min-height:40px}
.cklist li.ck-disc{grid-template-columns:minmax(0,1fr) auto;box-shadow:inset 4px 0 0 #2E7F76;margin-top:-2px}
.ck-disc .ck-t b{color:#246860}
.ck-disc .pr{color:#246860;font-weight:700}
.ck-fb{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:14px 0 0;padding:16px 18px;background:#fff;border:1px dashed var(--edge);border-radius:var(--r-s)}
.ck-fb p{margin:0;max-width:60ch}
.psy-pre{display:block;max-width:46ch;font-size:1rem;color:var(--ink)}

/* v65 (Jon's review 12, 19 Oct 2026) ---------------------------------------------------------------------------------- */
/* R12-1 (replaces R8-10's lighter stone): the "Leadership is a craft" band above every Academy footer is the darker sand
   --sand-deep, so it stands apart from the page. Its words stay black (#1A1A1A on the sand is 11.0 to 1). "We develop it."
   stays Avanti red: red on the sand is 3.2 to 1, which passes for large text, and the line is 31px (1.75rem x 1.12, more
   with the Aa sizes), so it is large text at every width. */
.af-big{background:var(--sand-deep);border-top:0}
.af-big p{color:var(--near)}
html:root body .af-big p em{color:var(--red);white-space:nowrap}   /* "We develop it." never splits on a phone */
/* R12-2 (R10-12 again): "Enhance Any Programme" with "Any Programme" in Avanti red italic. Red on the old charcoal panel was
   2.0 to 1 and failed even for large text, which is why v63 used the pale red tint. The panel is now sand, like the
   "Talk to us" band (R11-7): red on sand is 3.9 to 1 for a 28 to 36px heading (large text needs 3 to 1), the heading
   black 13.3 to 1 and the words charcoal 7.8 to 1. The two links are black with a red underline (red text would be 3.9 to 1,
   too low at 18px). */
.o62-panel{background:var(--cream);color:var(--ink)}
.o62-panel h3{color:var(--near)}
html:root body .o62-panel h3 em{color:var(--red);font-family:var(--fi);font-style:italic}
.o62-panel p,.o62-panel p.o63-panel-p{color:var(--ink)}
.o62-panel .link{color:var(--near);border-bottom-color:var(--red)}
.o62-panel .link:focus-visible{outline:2px solid var(--near);outline-offset:3px}
/* ---- v66 (Jon's "Loading products, revisions and video protection", 19 Oct 2026) ----
   CP1: the notice directly above every course player, in ordinary page text (not over the video, not a pop-up, not timed),
   read in order before the player. Charcoal on the page's paper is 9.6 to 1. CP2: the same words in the footer of course
   pages and as a line at the foot of the player page, and the terms link under the Pay button. CP7: "Play here instead?"
   sits under the stage, never over the video. Nothing here is under 16px. */
.pl-copy{font-size:1rem;line-height:1.5;color:var(--ink);margin:12px 0 10px;max-width:none}
.pl-foot{padding:18px var(--pad) 28px;border-top:1px solid var(--stone)}
.pl-foot p{font-size:1rem;line-height:1.5;color:var(--ink);margin:0}
.af-base .af-vid{max-width:760px}
.ck-terms{font-size:1rem;line-height:1.5;color:var(--ink);margin:12px 0 0}
.ck-terms a{color:var(--near);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.pl-dev{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:12px 0 0;padding:14px 16px;border:2px solid var(--near);border-radius:12px;background:var(--paper)}
.pl-dev[hidden]{display:none}
.pl-dev p{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--near);font-weight:600}
#pl-cap .btn{margin-top:4px}
@media (max-width:700px){.af-base{flex-wrap:wrap;gap:8px 16px}}

/* v67 (Jon's review 14, R14-7): two-step sign-in on the staff pages (staff-gate.js) */
.stf-steps{margin:0 0 1rem 1.2rem;padding:0}
.stf-steps li{margin:.3rem 0}
.stf-qr img{display:block;background:#fff;padding:8px;border:1px solid #D8CCB6;border-radius:8px;max-width:100%;height:auto}
.stf-key{font-size:1rem;word-break:break-all;background:#F5F3F0;padding:2px 6px;border-radius:4px}
.stf-f input{max-width:12rem;letter-spacing:.2em;font-size:1.125rem}

/* ---- v68 (Jon's review 15, 20 Oct 2026) ------------------------------------------------------------------------------ */
/* R15-2, as changed by v71 (Jon's review 17, R17-1 to R17-3, 20 Oct 2026): Topics, Programmes, Development and For
   Organisations open on Jon's picture with the Academy home hero's own treatment (.hx.has-img above), in place of R15-2's
   near-black wash: the same sand #E8E0D0 fading from the left (the same stops), the same dark grey #3A4245 words and the
   red #DE0000 accent word in the heading only. The picture starts right under the menu: the back button sits on it, on
   the sand, instead of on a light strip of its own. It fills the window to the bottom (--h15-top is now the menu's
   height, academy.js), with the shared scroll arrow (R15-1, scroll-cue.css) on it at the bottom middle.
   On phones and portrait tablets (860px and narrower) the words run the full width, so the sand comes down from the top
   behind them instead, travelling with the words (.aph::before) so it is behind every line at every height and text
   size, and fades out below them so the lower part of the picture shows (as Academy home on a phone).
   Contrast is checked against the darkest pixel under every line of text (integrity/hero-contrast.cjs). */
main:has(> .h15) > .bk56{position:absolute;left:0;right:0;z-index:3;background:transparent}
.h15{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;
  min-height:calc(100vh - var(--h15-top,64px));min-height:calc(100svh - var(--h15-top,64px));background:var(--cream);color:var(--ink);
  padding-top:calc(68px + clamp(16px,4svh,48px));padding-bottom:max(96px,calc(76px + env(safe-area-inset-bottom,0px)))}
.h15.scue-host.scue-room{padding-bottom:max(96px,calc(76px + env(safe-area-inset-bottom,0px)))}
.h15-img{position:absolute;inset:0;z-index:-1;background:var(--cream)}
.h15-img img{display:block;width:100%;height:100%;object-fit:cover}
.h15>.aph{position:relative;width:100%;max-width:var(--max);margin:0 auto;box-sizing:border-box;background:none;border-bottom:0;padding-top:0;padding-bottom:0}
.h15 .aph h1{margin-top:clamp(12px,3svh,32px);font-size:min(clamp(2.5rem,5.6vw,5rem),9svh);line-height:1.06}
.h15 .aph h1,.h15 .aph .lede,.h15 .aph .lede em,.h15 .crumbs,.h15 .crumbs a,.h15 .aph .meta span{color:var(--ink)}
.h15 .aph h1 em{color:var(--red)}
.h15 .aph .lede{margin-top:min(28px,2.6svh)}
.h15 .crumbs a:hover{color:var(--near);text-decoration-thickness:2px}
.h15 a:focus-visible,.h15 .btn:focus-visible{outline:3px solid var(--near);outline-offset:3px}
@media (min-width:861px){
  .h15-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(232,224,208,.97) 0%,rgba(232,224,208,.94) 38%,rgba(232,224,208,.72) 52%,rgba(232,224,208,0) 72%)}
  /* the words keep to the sand side, a little inside Academy home's widths (on a 1024px screen the end of a line at 52%
     was on thinner sand), and the red words have the home hero's soft sand glow (v48), for the largest text sizes */
  .h15 .aph h1{max-width:min(13em,52%)}
  .h15 .aph .crumbs,.h15 .aph .lede,.h15 .aph .meta,.h15 .aph .acts,.h15 .aph .lede.intro63{max-width:min(620px,48%)}
  .h15 .aph h1 em{white-space:nowrap;text-shadow:0 0 6px rgba(232,224,208,1),0 0 16px rgba(232,224,208,.98),0 0 32px rgba(232,224,208,.9),0 0 48px rgba(232,224,208,.6)}
}
/* wider than the page (1440px), the words start further in from the left of the screen, so the heading stops at 45% of
   the screen, where the sand is still at least 83%: at A++ the red words were on thinner sand there */
@media (min-width:1441px){
  .h15 .aph h1{max-width:min(13em,calc(var(--max) / 2 - var(--pad) - 5vw))}
  html[data-size="xl"] .h15 .aph h1 em{white-space:normal}   /* at A++ a long red phrase may take two lines */
  /* and the fade keeps to the words: its stops sit where they would on a 1440px screen, measured from the page's edge,
     never nearer the left than on Academy home (so from 1441px to 1600px it is the same fade) */
  .h15-img::after{background:linear-gradient(90deg,rgba(232,224,208,.97) 0%,rgba(232,224,208,.94) max(38%,calc(50% - 173px)),
    rgba(232,224,208,.72) max(52%,calc(50% + 29px)),rgba(232,224,208,0) max(72%,calc(50% + 317px)))}
}
@media (max-width:860px){
  .h15{justify-content:flex-start;padding-top:calc(60px + 20px)}
  .h15 .aph h1{font-size:clamp(2.25rem,10.5vw,3rem)}
  .h15>.aph::before{content:"";position:absolute;z-index:-1;top:-100vh;bottom:-96px;left:-100vw;right:-100vw;pointer-events:none;
    background:linear-gradient(180deg,rgba(232,224,208,.92) 0,rgba(232,224,208,.92) calc(100% - 96px),rgba(232,224,208,.6) calc(100% - 48px),rgba(232,224,208,0) 100%)}
}
@media (max-width:860px) and (max-height:700px){.h15{padding-top:calc(56px + 12px)}}

/* R15-4: Talk to us in the menu, a red button beside the basket (and a red row in the phone menu) */
.anav a.talk15,.anav a.talk15:visited{background:var(--red);color:#fff;font-weight:600}
.anav a.talk15:hover{background:var(--red-d);color:#fff}
.anav a.talk15:focus-visible{outline:3px solid var(--near);outline-offset:3px}
@media (min-width:901px){#ahead .anav-acct a.talk15{padding:0 18px}#ahead .anav-acct a.talk15:hover{color:#fff}}

/* R15-5: Talk to us in the closing band "Leadership is a craft" */
.af-big .af-talk15{margin-left:auto}
@media (max-width:700px){.af-big .af-talk15{margin-left:0}}

/* R15-6: no extra space under the Taster row on Academy home; How it works starts at the usual gap between sections */
.home-start{padding-bottom:0}
.home-start .nshelf{padding-bottom:0}
.home-start+.how63{padding-top:clamp(28px,5vw,70px)}

/* R15-7: For Organisations, the established tools our practitioners use (no prices, no Buy buttons, no logos) */
.pt15{margin-top:clamp(32px,4vw,56px);padding:clamp(22px,3vw,36px);background:var(--paper);border:1px solid var(--line);border-radius:14px;max-width:1100px}
.pt15 p{font-size:1.125rem;line-height:1.55;color:var(--body);margin:0 0 16px;max-width:900px}
.pt15-cols{display:grid;grid-template-columns:2fr 1fr;gap:12px 40px;margin:8px 0 6px}
.pt15 .pt15-h{font-weight:600;color:var(--near);margin:0 0 8px}
.pt15-list{margin:0 0 12px;padding-left:1.3em;list-style:disc}
.pt15-list li{font-size:1.125rem;line-height:1.5;margin:4px 0;color:var(--body)}
.pt15 .pt15-tm{font-size:1rem;color:var(--mute);margin-bottom:22px}
.pt15 .pt15-act{margin:8px 0 0}
@media (max-width:760px){.pt15-cols{grid-template-columns:1fr}}

/* R15-8: "Next step" on a programme page is a button that names where it goes; a long title wraps inside it */
.ns15-p{margin:0}
.btn.ns15{white-space:normal;text-align:left;max-width:100%;line-height:1.3}

/* v69 (Jon's review 16, R16-6): hero pictures sit in a <picture> (AVIF, WebP, JPEG); it takes no box of its own */
picture.pic{display:contents}

/* v70 (Jon's Addendum 2, LF7): a draft's preview page says so, in a band above the sales hero (only ever seen on the beta) */
.draft70{margin:0;padding:12px var(--pad);background:var(--cream);color:var(--near);font-size:1rem;line-height:1.45;border-bottom:1px solid var(--line)}
/* LF10: a Flagship built from Explores lists each Explore's modules under it, collapsed */
.mods .mt details.ing70{margin-top:10px}
.mods .mt details.ing70 summary{cursor:pointer;color:var(--ink);font-size:1rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;width:fit-content}
.mods .mt details.ing70 summary:hover{color:var(--red)}
.mods .mt details.ing70 summary:focus-visible{outline:3px solid var(--near);outline-offset:3px}
.mods .mt .ing70-l{list-style:decimal;margin:10px 0 4px;padding-left:1.4em}
.mods .mt .ing70-l li{display:list-item;border:0;padding:6px 0;font-size:1rem;line-height:1.45;color:var(--body)}
.mods .mt .ing70-l li b{display:inline;font-family:inherit;font-weight:600;font-size:1rem;color:var(--near)}
.mods .mt .ing70-l li small{display:inline;margin:0 0 0 2px;color:var(--mute);font-size:1rem}

/* v72 (Jon's review 18, R18-1, 20 Oct 2026): Academy home gets R17-1's two fixes, so it matches the four pages that copied
   it. The picture comes right up to the menu: the back button sits on the picture, on the sand, instead of on a sand strip
   of its own (--hx-top, measured by academy.js, is now the menu's height). On phones and portrait tablets (860px and
   narrower) the sand comes down from the top behind the words (.hx-in::before), travelling with them so it is behind every
   line at every height and text size, and fades out below the search box so the desk and valley show underneath, as on
   Topics, Programmes, Development and For Organisations. Contrast: integrity/hero-contrast.cjs, now with Academy home. */
main:has(> .hx.has-img) > .bk56{position:absolute;left:0;right:0;z-index:3;background:transparent}
@media (min-width:861px){
  /* the back button now sits inside the hero, so the words start below it, and the gaps and heading are a little tighter
     on laptop screens so the scroll arrow stays on the first screen (R5-4) */
  .hx.has-img{padding-top:calc(60px + clamp(12px,2.4svh,40px));padding-bottom:calc(56px + clamp(14px,2.4vw,28px) + 12px)}
  .hx.has-img h1{font-size:min(clamp(2.5rem,5.6vw,5rem),8.4svh)}
  .hx.has-img .hx-p{margin-top:min(56px,3.6svh)}
  .hx.has-img .asearch{margin-top:min(32px,2.6svh)}
}
@media (max-width:860px){
  .hx.has-img{justify-content:flex-start;padding-top:calc(60px + 20px)}
  .hx.has-img .hx-in{flex:0 0 auto}
  .hx-img::after{background:none}
  .hx.has-img .hx-in::before{content:"";position:absolute;z-index:-1;top:-100vh;bottom:-96px;left:-100vw;right:-100vw;pointer-events:none;
    background:linear-gradient(180deg,rgba(232,224,208,.92) 0,rgba(232,224,208,.92) calc(100% - 96px),rgba(232,224,208,.6) calc(100% - 48px),rgba(232,224,208,0) 100%)}
}
@media (max-width:860px) and (max-height:700px){.hx.has-img{padding-top:calc(56px + 12px)}}

/* v72 (R18-5): the free Taster form asks a visitor who is not signed in to create a free account or sign in */
.tgate .tg-have{margin:0 0 18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:1rem}
.tgate .tg-have .btn{min-height:44px}
.tgate .tg-new{font-family:var(--fh);font-weight:400;font-size:1.375rem;line-height:1.2;color:var(--near);margin:4px 0 10px;padding-top:16px;border-top:1px solid var(--line)}

/* v74 (Jon's review 20, R20-3): the beta's listening check page (academy/admin/listen/) for re-recorded title slides */
.ls74{margin-top:40px;max-width:960px}
.ls74 h2{font-family:var(--fh);font-weight:400;font-size:1.75rem;color:var(--near);margin:6px 0 14px}
.ls74-k{font-size:1rem;color:var(--mute)}
.ls74-v video{display:block;width:100%;aspect-ratio:16/9;background:#1A1A1A;border-radius:var(--r-s)}
.ls74 p,.ls74-l{font-size:1.0625rem;line-height:1.55;margin-top:12px}
.ls74-l{padding-left:1.25em}
.ls74-m:empty{display:none}

/* v75 (Jon's 21 Oct answers): R16-D1 the consent to start straight away, before Pay on a card purchase; R16-B3 the 25%
   floor line under the basket's credit lines; R16-A the one lead-in above each outcome list */
.ck-consent{display:flex;align-items:flex-start;gap:12px;margin:18px 0 6px;font-size:1rem;line-height:1.5;color:var(--ink);cursor:pointer}
.ck-consent[hidden]{display:none}
.ck-consent input{flex:0 0 auto;width:24px;height:24px;margin:1px 0 0;accent-color:var(--red)}
.ck-consent input[aria-invalid="true"]{outline:2px solid var(--red);outline-offset:2px}
.ck-floor{display:block;margin-top:4px;font-size:1rem;line-height:1.45;color:var(--ink)}
.outs-lead{font-size:1.0625rem;line-height:1.5;margin:0 0 10px;color:var(--ink)}
/* v75 (R16-H11, Q62, Q63): the one line that stands for products still to come */
.more75{font-size:17px;line-height:1.5;color:var(--muted,#3A4245);margin:18px 0 0}
/* v75 (Jon's R16-H16, Q69): a shorter opening on topic pages, so the scroll arrow shows on a 1366 by 768 laptop. On a
   wide screen the three option cards lie on their side (the cover on the left, uncropped, the words beside it), and the
   space above the title is tighter. Nothing is removed; below 1100px wide the cards stand up as before. */
@media (min-width:1100px){
  .tph55{padding-top:14px;padding-bottom:8px}
  .tph55 h1{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(2.5rem,3.8vw,3.5rem)}
  .tph55 .osz>summary{min-height:48px;padding:8px 20px}
  .tph55 .tp-one{margin-top:10px}
  .tph55 .opt3{margin-top:clamp(16px,1.6vw,22px)}
  .tph55 .opt-h{font-size:1.5rem}
  .tph55 .opt-l{margin-bottom:10px}
  .tph55 .opt-c .nc.nc55{flex-direction:row;align-items:stretch;aspect-ratio:auto}
  .tph55 .opt-c .nc.nc55 .nc-img{width:40%;flex:0 0 40%;align-self:flex-start;border-radius:14px 0 0 14px}
  .tph55 .opt-c .nc.nc55 .nc-body{justify-content:center;padding:10px 14px}
  .tph55 .osz{margin-top:18px}
}
.tp75-note{max-width:var(--max);margin:0 auto;padding:14px var(--pad) 0;box-sizing:border-box}
/* v75 (R16-K5, Q37): feedback as an optional extra under "What you receive" */
.py-fb{margin-top:16px;font-size:1.0625rem;line-height:1.55;max-width:760px}

/* v75 (Jon's R16-M, 21 Oct 2026): programme feedback (feedback.js): the live form on academy/feedback/ and the optional
   form in the course player above the certificate panel. The prototype's layout (a step bar over one panel), in the
   Academy's type and colours; nothing under 16px. The rating buttons are radio buttons, so each statement is one group:
   the chosen one is red with white text, the rest white with a grey edge (3.9 to 1 on white). */
.fb75-page{max-width:760px;padding-bottom:56px}
.fb75-page #fb-live,.pl-fb{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);margin:18px 0}
.fb75{display:flex;flex-direction:column;gap:18px}
.fb75-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fb75-steps li{font-size:1rem;font-weight:600;border:1.5px solid var(--edge);color:var(--ink);background:var(--paper);border-radius:999px;padding:3px 12px}
.fb75-steps li[aria-current=step]{background:var(--ink);border-color:var(--ink);color:#fff}
.fb75-steps li.done{border-color:#2E7F76;color:#246860}
.fb75-k{font-size:1rem;font-weight:600;color:var(--mute);letter-spacing:.04em}
.fb75-h{font-family:var(--fh);font-weight:400;font-size:1.75rem;color:var(--near);line-height:1.2}
.fb75-h:focus{outline:none}.fb75-h:focus-visible{outline:2px solid var(--near);outline-offset:3px}
.fb75-lead{font-size:1.125rem;line-height:1.55;color:var(--body);max-width:60ch;margin-top:6px}
.fb75-f{display:flex;flex-direction:column;gap:6px}
.fb75-f label,.fb75-q legend{font-weight:600;color:var(--near);font-size:1.0625rem;line-height:1.45}
.fb75-opt{font-weight:400;color:var(--mute)}
.fb75-hint{color:var(--mute);font-size:1rem;line-height:1.5}
.fb75-hint a,.fb75-lead a{text-decoration:underline}
.fb75 input[type=text],.fb75 input[type=email],.fb75 input[type=date],.fb75 select,.fb75 textarea{font:inherit;font-size:1rem;padding:10px 12px;border:1.5px solid var(--edge);border-radius:8px;background:#fff;color:var(--near);width:100%;max-width:100%}
.fb75 textarea{min-height:110px;resize:vertical}
.fb75 [aria-invalid=true]{border-color:var(--red)}
.fb75-q{border:0;border-top:1px solid var(--line);padding:16px 0 0;margin:0;min-width:0}
.fb75-q legend{float:left;width:100%;padding:0;margin-bottom:10px;max-width:62ch}
.fb75-q legend+*{clear:both}
.fb75-sc{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fb75-sc.fb75-11{grid-template-columns:repeat(11,1fr);gap:4px}
.fb75-sc label{position:relative;display:block}
.fb75-sc input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.fb75-sc label>span{display:flex;align-items:center;justify-content:center;min-height:44px;font-weight:700;font-size:1.0625rem;font-variant-numeric:tabular-nums;border:1.5px solid var(--edge);border-radius:8px;background:#fff;color:var(--near)}
.fb75-sc input:hover+span{border-color:var(--ink)}
.fb75-sc input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.fb75-sc input:focus-visible+span{outline:2px solid var(--near);outline-offset:3px}
.fb75-ends{display:flex;justify-content:space-between;gap:12px;font-size:1rem;color:var(--mute);margin-top:6px}
.fb75-ch{display:flex;gap:12px;align-items:flex-start;max-width:64ch;margin-top:10px;font-size:1rem;line-height:1.5;cursor:pointer}
.fb75-ch input{margin-top:0;width:24px;height:24px;accent-color:var(--red);flex:none}
.fb75-ch.off{color:var(--mute);cursor:not-allowed}
.fb75-q .fb75-ch:first-of-type{margin-top:0}
.fb75-priv{border-top:1px solid var(--line);padding-top:16px}
.fb75-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb75-nav,.fb75-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}
.fb75-row{justify-content:flex-start;margin-top:14px}
.fb75 .si-err,.fb75 .si-msg{margin-top:0}
.fb75-done{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fb75-tick{width:48px;height:48px;border-radius:50%;background:#DCEEEB;color:#246860;display:grid;place-items:center;font-size:1.5rem;font-weight:700}
@media (max-width:560px){.fb75-page #fb-live,.pl-fb{padding:18px 16px}.fb75-sc.fb75-11{grid-template-columns:repeat(6,1fr)}}

/* v78 (Jon's review 19, R19-C4): Avanti Leadership Preferences online (psy-lp.js). The questionnaire, the report (on
   screen and printed with "Save as PDF") and the places and invitations in the learning passport. Nothing under 16px. */
.lp-qw{max-width:880px}
.lp-form{width:100%;display:grid;gap:22px}
.lp-item{border:0;min-width:0;display:grid;gap:12px;background:#fff;border-radius:var(--r-s);box-shadow:var(--shadow);padding:20px 22px}
.lp-item legend{float:left;width:100%;padding:0;margin-bottom:10px;color:var(--mute)}
.lp-item legend+*{clear:both}
.lp-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-pair p{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:1.125rem;line-height:1.5;color:var(--near);background:var(--paper);border-radius:var(--r-s);padding:14px 16px}
.lp-pair b{color:var(--red-d)}
.lp-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lp-opt{position:relative}
.lp-opt input{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;margin:0;accent-color:var(--red)}
.lp-opt label{display:flex;align-items:center;height:100%;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-s);padding:12px 12px 12px 46px;font-size:1rem;line-height:1.35;color:var(--body);cursor:pointer}
.lp-opt label:hover{border-color:var(--ink)}
.lp-opt input:checked+label{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);color:var(--near)}
.lp-opt input:focus-visible+label{outline:2px solid var(--near);outline-offset:3px}
@media (max-width:760px){.lp-pair,.lp-scale{grid-template-columns:1fr}.lp-item{padding:16px}}
/* the report */
.lp-wrap{max-width:var(--max);margin:0 auto;padding:40px var(--pad) 80px}
.lp{max-width:900px;display:grid;gap:28px}
.lp p,.lp li,.lp dd{font-size:1.125rem;line-height:1.6;color:var(--body)}
.lp .k{color:var(--red-d)}
.lp h1:focus,.lp h2:focus{outline:none}
.lp a:not(.btn){color:var(--red-d);border-bottom:1px solid currentColor}
.lp-cover{background:var(--near);color:#fff;border-radius:var(--r);padding:36px 32px;display:grid;gap:12px;justify-items:start}
.lp-cover .k{color:var(--cream)}
.lp-cover h1{font-family:var(--fh);font-size:clamp(2.25rem,5vw,3.5rem);line-height:1;color:#fff}
.lp-cover p,.lp-cover label,.lp-cover .note{color:var(--cream)}
.lp-sub{font-size:1.375rem !important}
.lp-who{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.lp-who b{font-family:var(--fh);font-weight:400;font-size:1.5rem;color:#fff}
.lp-code{font-size:2rem !important;letter-spacing:.14em;color:#fff !important}
.lp-line{font-style:italic}
.lp-tools{display:grid;gap:10px;justify-items:start;margin-top:8px}
.lp-share{display:flex;gap:10px;align-items:center;font-size:1.0625rem;cursor:pointer}
.lp-share input{width:22px;height:22px;accent-color:var(--red)}
.lp-sec{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:32px;display:grid;gap:14px}
.lp-sec h2{font-family:var(--fh);font-size:clamp(1.625rem,3vw,2.25rem);line-height:1.1;color:var(--near)}
.lp-sec h3{font-family:var(--fh);font-size:1.375rem;line-height:1.25;color:var(--near);margin-top:8px}
.lp-sec h4{font-family:var(--fh);font-size:1.1875rem;color:var(--near)}
.lp-sec h2,.lp-sec h3,.lp-sec h4,.lp-cover h1,.lp-who b{font-variant-ligatures:no-common-ligatures}
.lp-dl{display:grid;gap:10px}
.lp-dl dt{font-weight:600;color:var(--near);font-size:1.125rem}
.lp-ul{display:grid;gap:6px;padding-left:1.25em}
.lp-moons{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-moons li{display:flex;gap:14px;align-items:center;background:var(--paper);border-radius:var(--r-s);padding:14px}
.lp-moons li>span{display:grid;gap:4px}
.lp-moons b{font-family:var(--fh);font-weight:400;font-size:1.25rem;color:var(--near)}
.lp-moon{flex:none}
.lp-moon-d{fill:var(--stone);stroke:var(--ink);stroke-width:1.5}
.lp-moon-l{fill:var(--red)}
.lp-tw{overflow-x:auto}
.lp-pieces{width:100%;border-collapse:collapse;font-size:1.0625rem}
.lp-pieces th,.lp-pieces td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--body)}
.lp-pieces thead th{font-family:var(--fb);font-weight:600;color:var(--mute)}
.lp-pieces tbody th{font-family:var(--fh);font-weight:400;color:var(--near);font-size:1.125rem}
.lp-pieces tr.lead{background:var(--red-tint)}
.lp-pieces td:nth-child(2),.lp-pieces td:nth-child(3){white-space:nowrap}
.lp-bar{display:block;width:120px;height:8px;background:var(--stone);border-radius:999px;overflow:hidden;margin-bottom:4px}
.lp-bar i{display:block;height:100%;background:var(--red)}
.lp-pair-d,.lp-piece,.lp-tip{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.lp-pair-d .lp-moon{float:right;margin-left:12px}
.lp-q{font-style:italic;color:var(--ink) !important}
.lp-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lp-box{background:var(--paper);border-radius:var(--r-s);padding:20px 22px;display:grid;gap:10px}
.lp-card{border:2px solid var(--near);border-radius:var(--r);padding:24px;display:grid;gap:12px}
.lp-card-h{display:grid;gap:4px}
.lp-card-h b{font-family:var(--fh);font-weight:400;font-size:1.5rem;color:var(--near)}
.lp-quote{border-left:4px solid var(--red);padding-left:14px}
.lp-prompts{display:grid;gap:16px;padding-left:1.4em}
.lp-write{display:block;height:3.2em;border-bottom:1px solid var(--line)}
@media (max-width:760px){.lp-wrap{padding:24px 16px 64px}.lp-sec,.lp-cover{padding:22px 18px}.lp-moons,.lp-two{grid-template-columns:1fr}}
/* the learning passport */
.lp-qs{margin-top:28px;display:grid;gap:14px}
.lp-qs h3{font-family:var(--fh);font-size:1.5rem;color:var(--near)}
.lp-places{list-style:none;display:grid;gap:8px;margin-top:10px}
.lp-places li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;align-items:center;font-size:1.0625rem;border-top:1px solid var(--line);padding-top:8px}
.lp-places li>span:last-child{display:flex;flex-wrap:wrap;gap:8px}
.lp-free{margin-top:10px;font-size:1.0625rem}
.lp-buy [data-take]{margin-top:8px}
.lp-inv{display:grid;gap:6px;justify-items:start;margin-top:14px;max-width:420px}
.lp-inv input{width:100%}
.lp-msg{min-height:1.5em;margin-top:8px}
/* "Save as PDF": the report alone, one part to a page */
@media print{
  body.lp-print{background:#fff}
  body.lp-print .ahead,body.lp-print .afoot,body.lp-print .bk56,body.lp-print .skip,body.lp-print .lp-tools,body.lp-print .aa-toast,body.lp-print .soc-fab,body.lp-print .soc-nudge{display:none !important}
  body.lp-print .lp-wrap{padding:0;max-width:none}
  body.lp-print .lp{max-width:none;gap:0}
  body.lp-print .lp-sec{box-shadow:none;border-radius:0;padding:0;break-before:page}
  body.lp-print .lp-cover{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.lp-print .lp-moon,body.lp-print .lp-bar,body.lp-print tr.lead{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.lp-print .lp-pair-d,body.lp-print .lp-piece,body.lp-print .lp-tip,body.lp-print .lp-card,body.lp-print .lp-box,body.lp-print .lp-moons li{break-inside:avoid}
  body.lp-print .lp a:not(.btn){border:0;color:inherit}
  body.lp-print .lp-sec h3,body.lp-print .lp-sec h4{break-after:avoid}
  /* v92 (Jon's launch ten, PF9, the report layout standard): a red front page of its own; every section starts a new page
     (above); no chart, table or box is split across two pages */
  body.lp-print .lp-cover{background:#DE0000;color:#fff;border-radius:0;min-height:250mm;align-content:center;padding:24mm 18mm;break-after:page}
  body.lp-print .lp-cover h1,body.lp-print .lp-cover h1 em,body.lp-print .lp-cover p,body.lp-print .lp-cover .k,body.lp-print .lp-cover .lp-code{color:#fff}
  body.lp-print .lp-moons,body.lp-print .lp-tw,body.lp-print table,body.lp-print .lp-dl>div,body.lp-print .lp-prompts li,body.lp-print .lp-two,body.lp-print figure,body.lp-print svg{break-inside:avoid}
}

/* v79 (Jon's review 20, item 7): room for the spam check (Cloudflare Turnstile) on the passport and feedback forms */
.pp-ts,.fb75-ts{margin:0 0 16px}
.pp-ts:empty,.fb75-ts:empty{margin:0}

/* v87 (Jon's review 28 addendum, R28-F): a Taster card's hover line (Jon's one-line promise) covers the whole card on hover
   or keyboard focus, white on solid near-black. The whole card, not the cover alone: on the narrow cards (a topic page's
   options at desktop widths) the cover is under 100px tall, too short for a two-sentence line */
.nc.nc55.has-hv{position:relative}
.nc.nc55 .nc-hv{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:14px 16px;border-radius:14px;
  font-size:1rem;line-height:1.35;color:#fff;background:#1A1A1A;opacity:0;transition:opacity .15s;pointer-events:none}
.nc.nc55:focus-visible .nc-hv{opacity:1}
@media (hover:hover) and (pointer:fine){.nc.nc55:hover .nc-hv{opacity:1}}
@media (prefers-reduced-motion:reduce){.nc.nc55 .nc-hv{transition:none}}
/* v92 (Jon's launch ten, PF6): the delivery line under a profile's price, on Development and in the basket */
.dcard .droute{margin:12px 0 0;font-size:1rem;line-height:1.45;color:var(--ink)}
.ck-t .ck-route{display:block;margin-top:2px;font-size:1rem}

/* v98 (Jon's review 58, A1.1): the top bar's Sign in and Create free account (signed out) or My learning passport (signed
   in: html.aa-in, set before the page draws). Create free account is the bright Avanti red; Talk to us steps back to an
   outline so the two never compete. */
html.aa-in .hd-out{display:none!important}
html:not(.aa-in) .hd-in{display:none!important}
.anav a.hd-join,.anav a.hd-join:visited{background:var(--red);color:#fff;font-weight:600}
.anav a.hd-join:hover{background:var(--red-d);color:#fff}
.anav a.hd-signin,.anav a.hd-signin:visited{background:var(--ink);color:#fff;font-weight:600}
.anav a.hd-signin:hover{background:var(--near);color:#fff}
.anav a.hd-join:focus-visible,.anav a.hd-signin:focus-visible{outline:3px solid var(--near);outline-offset:3px}
@media (min-width:901px){
  #ahead .anav-acct a.talk15,#ahead .anav-acct a.talk15:visited{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
  #ahead .anav-acct a.talk15:hover{background:var(--stone);color:var(--ink)}
  #ahead .anav-acct a.hd-join:hover,#ahead .anav-acct a.hd-signin:hover{color:#fff}
}
/* phones: Sign in stays in the top bar beside the menu; both buttons are in the menu too */
.hd-msign{display:none}
@media (max-width:900px){
  #ahead>.hd-msign{display:flex;align-items:center;align-self:center;margin-left:10px;min-height:44px;padding:0 14px;border-radius:999px;
    background:var(--ink);color:#fff;font-weight:600;font-size:1rem;text-decoration:none;white-space:nowrap}
  #ahead>.hd-msign:hover{background:var(--near)}
  #ahead>.hd-msign:focus-visible{outline:3px solid var(--near);outline-offset:3px}
}
/* v98 (A1.3): the welcome after creating an account */
.aa-welcome{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:16px var(--pad,24px);padding:14px 18px;border-left:4px solid var(--red);background:#fff;
  box-shadow:0 1px 0 rgba(58,66,69,.14);color:var(--ink);font-size:1.0625rem;line-height:1.45}
.aa-welcome p{margin:0;flex:1 1 280px}
.aa-welcome a{color:var(--red-d);font-weight:600}
.aa-welcome-x{flex:none;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:1rem;cursor:pointer}
.ck-form .btn-join{background:var(--red);color:#fff}
/* v98 (A3): a line under the footer's Topics and Learning headings, saying how each column browses */
.af-cols .af-line{display:block;margin:-6px 0 2px;color:rgba(255,255,255,.82);font-size:1rem;font-style:italic;line-height:1.4}
/* v98 (A4): the worked example of upgrade credit on Prices */
.cr-ex{margin-top:28px;padding:20px 22px;background:var(--stone,#F5F3F0);border-left:4px solid var(--teal,#2E7F76)}
.cr-ex h3{margin:0 0 10px}
.cr-ex p{margin:0 0 10px;font-size:1.0625rem;line-height:1.55}
.cr-ex p:last-child{margin-bottom:0}
.ck-save{font-weight:600;color:var(--ink)}
/* v98 (B7): The CPD Group badge and line in the footer */
.af-cpd{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:0 var(--pad) 24px}
.af-cpd img{height:80px;width:auto;display:block;background:#fff}
.af-cpd p{margin:0;color:#fff;font-size:1rem;line-height:1.45;max-width:36em}
/* v98 (B2): Try a free Taster, in the home hero and on each topic page */
.hx98-try,.tp98-try{margin-top:18px}
/* v99 (Jon's review 60): the site tour (R60-B), the free call (R60-C), Help me choose (R60-D), the FAQ (R60-F) and the testers' quotes (R60-J) */
.tour99{margin:0}
.tour99 video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:12px}
.tour99 figcaption{font-size:1rem;line-height:1.5;margin-top:10px;color:var(--ink)}
.call99{margin-top:20px}
.call99 p{font-size:1.125rem;line-height:1.5;margin-top:12px;color:var(--ink);max-width:30em}
.hx .acts.hx98-try{display:flex;flex-wrap:wrap;gap:12px}
.hx99{max-width:720px;margin-top:36px;position:relative}
.hx99 .tour99 figcaption,.hx99 .call99 p{background:rgba(255,255,255,.9);padding:6px 10px;border-radius:8px;display:inline-block}
.hx99 .call99 .btn.ghost{background:#fff}
.hx99 .call99 .btn.ghost:hover{background:var(--ink);color:#fff}
.ch99 fieldset{border:0;padding:0;margin:0}
.ch99 legend{padding:0;margin-bottom:18px}
.ch99 legend:focus{outline:none}
.ch99-n{display:block;font-size:1rem;color:var(--mute);margin-bottom:6px}
.ch99-q{display:block;font-family:var(--fh);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;color:var(--near)}
.ch99-a{display:flex;align-items:center;gap:14px;font-size:1.125rem;line-height:1.4;padding:14px 18px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;background:#fff;min-height:48px}
.ch99-a:hover{border-color:var(--ink)}
.ch99-a:has(input:checked){border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.ch99-a input{width:22px;height:22px;flex:none;accent-color:var(--red);margin:0}
.ch99-err{color:var(--red);font-size:1rem;font-weight:600;margin:6px 0 0}
.ch99 .acts,.ch99-out .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ch99-out h2{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1}
.ch99-out h2:focus{outline:none}
.ch99-what,.ch99-line{font-size:1.125rem;line-height:1.55;margin-top:14px;max-width:38em}
.ch99-line{border-left:4px solid var(--red);padding-left:14px}
.ch99-out h3{font-size:1.375rem;margin-top:32px}
.ch99-topics{margin:12px 0 0;padding-left:1.2em}
.ch99-topics li{font-size:1.125rem;line-height:1.6}
.ch99-more{margin-top:48px;max-width:720px}
.faq99-body{padding:64px var(--pad)}
.faq99-g{margin-bottom:36px}
.faq99-g h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:12px}
.faq99{border-bottom:1px solid var(--line)}
.faq99 summary{cursor:pointer;font-size:1.125rem;font-weight:600;line-height:1.4;padding:16px 0;min-height:48px;color:var(--near)}
.faq99 p{font-size:1.125rem;line-height:1.6;margin:0 0 18px;max-width:42em}
.q99{background:var(--paper);padding:72px var(--pad)}
.q99 h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08}
.q99-lede{font-size:1.125rem;line-height:1.5;margin-top:12px;color:var(--ink)}
.q99-list{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.q99-list li{background:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 1px 2px rgba(26,26,26,.05),0 8px 24px rgba(26,26,26,.07)}
.q99 blockquote{margin:0}
.q99 blockquote p{font-family:var(--fh);font-size:1.375rem;line-height:1.4;color:var(--near)}
.q99-red{color:var(--red);font-style:italic}
.q99-who{font-size:1rem;line-height:1.5;margin-top:20px;color:var(--ink)}
@media (max-width:980px){.q99-list{grid-template-columns:1fr}}
/* v100 (Jon's review 61, R61-B.1): a jump to any section stops below the sticky top bar (zero specificity, so the
   existing scroll margins still win where they are set) */
:where(main [id]){scroll-margin-top:var(--hh,72px)}
/* v100 (Jon's review 63, R63-A and R63-B): the site tour block (video, "← How to navigate the Academy", the call button)
   sits just under the Academy home picture, which fills the first screen again; the scroll arrow comes down to it */
.tour-sec99{padding:clamp(32px,5vw,64px) var(--pad);background:var(--paper);scroll-margin-top:var(--hh,72px)}
.tour-sec99:focus{outline:none}
.blk99{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,3vw,40px);align-items:center}
.blk99-acts{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.blk99 .call99{margin-top:0}
.blk99 .btn{text-align:left}
.tour99 video:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.ch99-more .blk99{grid-template-columns:1fr}
@media (max-width:860px){.blk99{grid-template-columns:1fr}}
/* v100 (R63-B.2 and B.4): with the video block out of the hero, the picture fits the first screen again. "Try a free
   Taster" and "Help me choose" stay in it, side by side on a phone (a little tighter) so the scroll arrow stays on screen */
.hx.has-img .hx98-try{margin-top:min(18px,1.4svh)}
@media (max-width:860px){
  .hx .hx98-try{flex-wrap:nowrap;gap:8px}
  .hx .hx98-try .btn{padding:12px 14px;gap:8px;font-size:1rem;white-space:nowrap}
}
@media (min-width:861px){.hx.has-img .hx-p{margin-top:min(56px,3svh)}}
/* v100 (R63-D): in Help me choose the result column is narrower than a full row, so its cards keep a row card's width */
.ch99-cards .sh-row{grid-auto-columns:clamp(220px,31%,280px)}
@media (max-width:700px){.ch99-cards .sh-row{grid-auto-columns:72vw}}

/* v102 (review 64a, R64a-A): the seek bar over the slide's progress bar; the lighter band is as far as the learner may move */
.sl-bar{position:relative}
.sl-bar i{position:relative;z-index:1}
.sl-far{position:absolute;left:0;top:0;bottom:0;width:0;background:#8A9396}
.sl-seek{position:absolute;left:0;right:0;bottom:0;width:100%;height:24px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:2}
.sl-seek:disabled{display:none}
.sl-seek::-webkit-slider-runnable-track{height:24px;background:transparent}
.sl-seek::-moz-range-track{height:24px;background:transparent}
.sl-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:#fff;border:3px solid var(--red)}
.sl-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--red)}
.sl-seek:focus{outline:none}
.sl-seek:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:inset 0 0 0 6px #1A1A1A}
/* v102 (Amanda, review 64a, R64a-C): on the home pages the two buttons beside the site tour are solid red; dark focus ring */
.blk99 .btn:not(.ghost):focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* v102 (Amanda, review 64a, R64a-E): "More topics arrive every month" centred below the Tasters strip on Academy home */
.more102{text-align:center;margin-left:auto;margin-right:auto}

/* v104 (review 65, R65-B.1): The CPD Group badge in the "Leadership is a craft" band above the footer links, 72px */
.af-big .cpd64b{display:block;line-height:0}
.af-big .cpd64b img{display:block;height:72px;width:auto;background:#fff}
.af-big .cpd64b:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* v105 (Jon's review 68) */
/* item 3: "Free with an account" under a Taster button */
.fwa105{margin:10px 0 0;font-size:1rem;font-weight:600;line-height:1.4;color:var(--ink)}
.hx-in .fwa105{margin-top:12px}
/* item 4: the line under the counter strip */
.cs105-line{margin:14px 0 0;text-align:center;font-size:1.125rem;color:var(--ink)}
/* item 5: the three next steps when a search finds nothing; the "showing results for" line */
.as-next105{list-style:none;margin:10px 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.as-next105 a{font-weight:600}
.as-fix105{margin:8px 0 0;font-size:1rem;color:var(--ink)}
.as-fix105 b{font-weight:700}
/* item 7: in the open phone menu, "Create free account" is the one red button; Talk to us and Sign in are plain links */
.anav.open a.talk15,.anav.open a.talk15:visited,.anav.open a.hd-signin,.anav.open a.hd-signin:visited{background:none;color:var(--near);font-weight:600;box-shadow:none}
.anav.open a.talk15:hover,.anav.open a.hd-signin:hover{background:var(--stone);color:var(--near)}
html[data-size] .anav.open a.talk15,html[data-size] .anav.open a.hd-signin{background:none;color:var(--near)}
/* item 7.3: the basket icon in the phone top bar, only when the basket is not empty */
.hd-bk105{display:none}
@media (max-width:900px){
  #ahead>.hd-bk105:not([hidden]){display:flex;align-items:center;align-self:center;gap:4px;margin-left:auto;min-height:44px;min-width:44px;padding:0 10px;border-radius:999px;color:var(--near);text-decoration:none;font-weight:700;font-size:1rem}
  #ahead>.hd-bk105 svg{width:24px;height:24px;fill:currentColor}
  #ahead>.hd-bk105 .hd-bk105-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:1rem}
  #ahead>.hd-bk105:focus-visible{outline:3px solid var(--near);outline-offset:3px}
  #ahead>.hd-bk105:not([hidden])+.hd-msign{margin-left:6px}
}
/* item 8: phones. The category tiles two across; the Tasters strip ends with "See all Tasters" */
@media (max-width:640px){
  .home-cats .cat9{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .home-cats .cat9 .ac-t.ac55{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:96px;padding:14px 14px 12px;gap:6px}
  .home-cats .cat9 .ac-n{font-size:1.125rem;line-height:1.2}
  .home-cats .cat9 .ac-m{font-size:1rem}
  .home-cats .cat9 .ac-go{display:none}
}
.sh-all105{display:flex}
.sh-all105 a{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;width:100%;min-height:100%;padding:22px;border-radius:14px;background:#fff;
  border:2px solid var(--red);color:var(--red-d);font-weight:700;font-size:1.25rem;text-decoration:none}
.sh-all105 a small{font-weight:400;font-size:1rem;color:var(--ink)}
.sh-all105 a:hover{background:var(--stone)}
.sh-all105 a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* item 9: the tour button's arrow points at the video: left on a computer, up on a phone where the video sits above */
.ar105-u{display:none}
@media (max-width:860px){.ar105-l{display:none}.ar105-u{display:inline}}
.ch99-more .ar105-l{display:none}.ch99-more .ar105-u{display:inline}   /* Help me choose: the video is always above the button */
/* item 10.3: under the Places dropdown */
.ck-20{display:block;margin-top:6px;font-size:1rem;color:var(--ink)}
/* v106 (Jon's review 69, R69-I): on a phone the tour is the 9x16 version above the buttons, no taller than about 75% of the screen */
@media (max-width:860px){.tour99 video{aspect-ratio:9/16;height:min(75vh,177vw);width:auto;max-width:100%;margin:0 auto}}
.ch99-note{margin-top:12px}
/* v112 (Jon's review 73, R73-4.1): the seek bar has its own strip under the slide, so it never sits over the bottom of the
   video (the copyright bar on the slides) and the slide's footer never sits under the controls, on a computer or a phone */
.sl-bar{height:24px;background:#1A1A1A}
.sl-bar::before{content:"";position:absolute;left:0;right:0;top:9.5px;height:5px;background:#4A5356}
.sl-bar i{height:5px;top:9.5px}
.sl-far{top:9.5px;bottom:auto;height:5px}
.sl-seek{top:0;bottom:auto;height:24px}

/* review 71a: live takes real payments, so the test-mode notices are hidden here (the testers site keeps them) */
.ck-test{display:none!important}

/* v116 (Jon's review 77, A1): the owner's name, the date and the Avanti copyright at the top of every printed section of a profile report */
.lp-run{display:none}
@media print{body.lp-print .lp-run{display:block;font-size:12pt;line-height:1.3;color:#404040;margin:0 0 6mm;padding-bottom:2mm;border-bottom:1px solid #D8CCB6}}