/* Shared design system for chrisusina.com, Forward Mentoring and BA Professional Programmes.
   One type scale, one button size, one card shape, left alignment everywhere.
   Headings are always larger than the subheading beneath them; there are no labels above headings. */
:root{
  --font-heading:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fs-h1:clamp(2.25rem,5.2vw,3.5rem);
  --fs-h2:clamp(1.75rem,3.4vw,2.375rem);
  --fs-h3:1.375rem;
  --fs-sub-lg:1.25rem;   /* subheading under h1 */
  --fs-sub:1.125rem;     /* subheading under h2 */
  --fs-sub-sm:1rem;      /* subheading under h3 */
  --fs-body:1.0625rem;
  --fs-card:1rem;
  --fs-small:.875rem;
  --fs-ui:.9375rem;      /* buttons, navigation, tags */
  --radius-card:12px; --radius-btn:10px; --radius-tag:4px;
  --pad-card:1.5rem; --gap:1rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--page);color:var(--ink);font:400 var(--fs-body)/1.65 var(--font-body);text-align:left}
h1,h2,h3{font-family:var(--font-heading);margin:0;text-wrap:balance;font-style:normal}
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.08;letter-spacing:-.025em}
h2{font-size:var(--fs-h2);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--h2)}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25;letter-spacing:-.01em}
p{margin:0;max-width:64ch}
em,i,cite,dfn,var,address{font-style:normal}
a{color:inherit}
.sub{margin:0;font:600 var(--fs-sub)/1.4 var(--font-heading);color:var(--sub);letter-spacing:0}
h1 + .sub{font-size:var(--fs-sub-lg)}
h3 + .sub{font-size:var(--fs-sub-sm)}
.muted{color:var(--muted)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(3.5rem,7vw,5.5rem)}
.band{background:var(--band);color:var(--band-ink)}
.band h2{color:var(--band-h2)}
.band .sub{color:var(--band-sub)}
.head{display:grid;gap:.5rem;margin-bottom:2rem;max-width:46rem;align-content:start}
.head p:not(.sub){color:var(--muted)}
.band .head p:not(.sub){color:inherit}
.prose{display:grid;gap:1rem;max-width:46rem}

/* skip link and screen-reader text */
.skip{position:absolute;left:-9999px;top:0;background:var(--focus-bg);color:var(--focus-fg);padding:.75rem 1rem;z-index:50;font:600 var(--fs-ui) var(--font-heading)}
.skip:focus{left:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.band a:focus-visible,.band button:focus-visible,.dark a:focus-visible,.dark button:focus-visible,.bar a:focus-visible{outline-color:var(--focus-on-dark)}

/* header */
.topback{background:var(--topback-bg)}
.topback .wrap{min-height:40px;display:flex;align-items:center}
.topback a{font:600 var(--fs-small)/1 var(--font-heading);color:var(--topback-fg);text-decoration:none}
.topback a:hover{text-decoration:underline}
.bar{position:sticky;top:0;z-index:20;background:var(--bar-bg);color:var(--bar-fg);border-bottom:1px solid var(--bar-line)}
.bar .wrap{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{font:800 1.125rem/1.15 var(--font-heading);letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:center}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav ul a{font:600 var(--fs-ui)/1 var(--font-heading);text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--accent)}
@media (max-width:900px){.nav ul{display:none}}

/* hero */
.hero .wrap{padding-block:clamp(3.5rem,8vw,6rem)}
.hero-body{display:grid;gap:1.25rem;max-width:46rem}
.hero h1{color:var(--hero-h1)}
.hero p:not(.sub){font-size:1.1875rem}

/* buttons: one size everywhere */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.25rem;border-radius:var(--radius-btn);
  font:600 var(--fs-ui)/1.2 var(--font-heading);letter-spacing:0;text-decoration:none;text-align:center;white-space:nowrap;
  border:2px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.b-main{background:var(--main-bg);color:var(--main-fg);border-color:var(--main-bg)}
.b-main:hover{background:var(--main-hover);border-color:var(--main-hover)}
.b-alt{background:var(--alt-bg);color:var(--alt-fg);border-color:var(--alt-bg)}
.b-wa{background:var(--wa-bg);color:var(--wa-fg);border-color:var(--wa-bg)}
.b-mail{background:var(--mail-bg);color:var(--mail-fg);border-color:var(--mail-bg)}
.b-li{background:var(--li-bg);color:var(--li-fg);border-color:var(--li-bg)}
/* no outlines on any button: hover darkens the fill instead */
.b-alt:hover,.b-wa:hover,.b-mail:hover,.b-li:hover,.topics button:hover{filter:brightness(.9)}
.btns{display:flex;flex-wrap:nowrap;gap:.625rem}
.b-book{min-width:11rem}
.contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;max-width:30rem;width:100%}
.contact .btn{padding:0 .5rem}
@media (max-width:640px){
  .btns .btn{flex:1 1 0;min-width:0;padding:0 .75rem}
  .contact{max-width:none}
}

/* cards */
.card{border-radius:var(--radius-card);padding:var(--pad-card);display:flex;flex-direction:column;gap:.75rem;min-width:0;background:var(--card-bg,var(--surface));color:var(--card-fg,var(--ink));border:1px solid var(--card-bd,var(--line))}
.card .card-head{display:grid;gap:.25rem}
.card .card-head .sub{color:var(--card-sub,var(--sub))}
.card p:not(.sub){font-size:var(--fs-card)}
.card p.muted{color:var(--card-muted,var(--muted))}
.card .contact,.card .btns{margin-top:auto;padding-top:.5rem}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g2,.g3{grid-template-columns:1fr}}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags span{font:600 var(--fs-small)/1 var(--font-heading);padding:.5rem .75rem;border-radius:var(--radius-tag);background:var(--tag-bg);color:var(--tag-fg)}

/* lists */
.list-head{margin:.5rem 0 0;font:700 var(--fs-sub-sm)/1.35 var(--font-heading)}
.ticks{list-style:disc;margin:0;padding-left:1.25rem;display:grid;gap:.375rem;font-size:var(--fs-card)}
.ticks li::marker{color:var(--tick)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);counter-reset:s}
.steps li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:start}
.steps .n{width:2.5rem;height:2.5rem;border-radius:var(--radius-tag);background:var(--main-bg);color:var(--main-fg);display:grid;place-items:center;font:700 var(--fs-ui)/1 var(--font-heading)}
.steps .s-body{display:grid;gap:.375rem}
.steps p{color:var(--muted);font-size:var(--fs-card)}

/* questions */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2rem}
.faq .head{margin:0}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding-block:.75rem;font:700 var(--fs-sub-sm)/1.35 var(--font-heading)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex-shrink:0;width:1.5rem;text-align:center;font:700 1.25rem/1 var(--font-heading);color:var(--accent)}
details[open] summary::after{content:"\2013"}
details p{color:var(--muted);padding-bottom:1rem;font-size:var(--fs-card)}
@media (max-width:820px){.faq{grid-template-columns:1fr}}

/* split layout */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* LinkedIn icon link */
.li-link{display:inline-grid;place-items:center;width:48px;height:48px;margin-left:-10px;border-radius:var(--radius-btn)}
.li-link:hover svg rect{fill:#004182}

/* footer */
footer{background:var(--foot-bg);color:var(--foot-fg);font-size:var(--fs-small)}
footer .wrap{min-height:72px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.5rem 1.5rem;padding-block:1.25rem}
footer a{color:inherit}

/* BA Professional Programmes colour: Pantone 2728 C #0047BB · Pantone 2758 C #001E60 · Pantone 2717 C #A7C6ED · Pantone 353 C #80E0A7
   Pantone Black 6 C #101820 · Cool Gray 11 C #53565A · Cool Gray 1 C #D9D9D6 · White */
:root{
  --page:#FFFFFF; --surface:#FFFFFF; --ink:#101820; --muted:#53565A; --line:#D9D9D6; --h2:#0047BB; --sub:#53565A; --accent:#0047BB;
  --band:#A7C6ED; --band-ink:#101820; --band-h2:#001E60; --band-sub:#001E60; --hero-h1:#001E60;
  --bar-bg:#FFFFFF; --bar-fg:#101820; --bar-line:#D9D9D6;
  --main-bg:#0047BB; --main-fg:#FFFFFF; --main-hover:#001E60;
  --alt-bg:#FFFFFF; --alt-fg:#101820;
  --wa-bg:#0047BB; --wa-fg:#FFFFFF; --mail-bg:#80E0A7; --mail-fg:#101820; --li-bg:#A7C6ED; --li-fg:#101820;
  --tag-bg:#A7C6ED; --tag-fg:#101820; --tick:#0047BB;
  --focus:#0047BB; --focus-on-dark:#80E0A7; --focus-bg:#0047BB; --focus-fg:#FFFFFF;
  --foot-bg:#001E60; --foot-fg:#FFFFFF;
}
.mark{display:block;flex-shrink:0;width:48px;height:48px}
.logo{gap:.625rem}
.logo .name{font-size:.9375rem;line-height:1.15}
.c-light{--card-bg:#A7C6ED;--card-fg:#101820;--card-bd:#A7C6ED;--card-sub:#001E60;--card-muted:#101820;--tick:#001E60;--li-bg:#FFFFFF;--wa-bg:#FFFFFF;--wa-fg:#001E60}
.c-night{--card-bg:#001E60;--card-fg:#FFFFFF;--card-bd:#001E60;--card-sub:#A7C6ED;--card-muted:#FFFFFF;--tick:#80E0A7;--li-bg:#FFFFFF;--main-bg:#80E0A7;--main-fg:#101820;--main-hover:#FFFFFF}
.c-mint{--card-bg:#80E0A7;--card-fg:#101820;--card-bd:#80E0A7;--card-sub:#001E60;--card-muted:#101820;--mail-bg:#FFFFFF;--mail-fg:#101820}
.mint{background:#80E0A7}
.mint .head p:not(.sub){color:#101820}.mint .sub{color:#001E60}
.lightblue{background:#A7C6ED}
.lightblue .sub{color:#001E60}
.lightblue{--li-bg:#FFFFFF}
.night-panel{background:#001E60;color:#FFFFFF;border-radius:var(--radius-card);padding:clamp(1.5rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:end}
.night-panel h2{color:#FFFFFF}
.night-panel .head p:not(.sub){color:#FFFFFF}.night-panel .sub{color:#80E0A7}
.night-panel .b-main{--main-bg:#80E0A7;--main-fg:#101820;--main-hover:#FFFFFF}
@media (max-width:820px){.night-panel{grid-template-columns:1fr;align-items:start}}
.cgroup + .cgroup{margin-top:3rem}
.cgroup .head{margin-bottom:1.25rem}
.card p.hours{font:700 var(--fs-card)/1.3 var(--font-heading)}
/* cohort bar, moving ribbon */
.cohort-top{background:#001E60;color:#FFFFFF}
.cohort-top .wrap{min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem;padding-block:.5rem;font:600 var(--fs-small)/1.4 var(--font-heading)}
.cohort-top a{color:#80E0A7;text-underline-offset:3px}
.ribbon{background:#80E0A7;color:#001E60;overflow:hidden;white-space:nowrap}
.ribbon-track{display:inline-flex;animation:ribbon 45s linear infinite;will-change:transform}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon span{display:inline-flex;align-items:center;font:700 1rem/1 var(--font-heading);padding-block:1rem}
.ribbon span::after{content:"";width:10px;height:10px;border-radius:50%;background:#0047BB;margin:0 1.5rem}
.ribbon-dark{background:#001E60;color:#FFFFFF}.ribbon-dark span::after{background:#80E0A7}
@keyframes ribbon{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ribbon-track{animation:none}}


/* hero with programme summaries */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.hero-grid .hero-body{max-width:none}
.picks{display:grid;gap:1rem}
.pick-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.pick-stats div{border-radius:var(--radius-tag);padding:.75rem .875rem;background:var(--fact-bg);color:var(--fact-fg)}
.pick-stats b{display:block;font:800 1.25rem/1.15 var(--font-heading)}
.pick-stats span{display:block;font-size:var(--fs-small);line-height:1.35;margin-top:.25rem}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* market stats */
.dark{background:#001E60;color:#FFFFFF}
.dark h2{color:#FFFFFF}
.dark .sub{color:#80E0A7}
.dark .head p:not(.sub){color:#FFFFFF}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.stats li{border-top:4px solid #80E0A7;padding-top:1rem;display:grid;gap:.375rem;align-content:start}
.stats b{font:800 clamp(1.5rem,2.4vw,1.875rem)/1.15 var(--font-heading);color:#FFFFFF;letter-spacing:-.01em}
.stats span{font-size:var(--fs-card);line-height:1.45;color:#FFFFFF}
.sources{margin-top:2rem;font-size:var(--fs-body);color:#FFFFFF;max-width:64ch;border-left:4px solid #80E0A7;padding-left:1rem}
@media (max-width:980px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* programme panels */
.time-note{margin-bottom:var(--gap)}
.prog{border-radius:var(--radius-card);padding:clamp(1.5rem,4vw,3rem);display:grid;gap:2rem;background:var(--card-bg);color:var(--card-fg);scroll-margin-top:96px}
.prog + .prog{margin-top:var(--gap)}
.prog-top{display:grid;gap:.5rem;max-width:52rem}
.prog-top .sub{color:var(--card-sub)}
.prog h3{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800}
.prog-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:start}
.prog-col{display:grid;gap:1.75rem;align-content:start}
.prog h4{font:800 1.25rem/1.3 var(--font-heading);margin:0 0 .75rem}
.prog h5{font:700 var(--fs-sub-sm)/1.35 var(--font-heading);margin:0 0 .375rem;color:var(--card-sub)}
.prog p{font-size:var(--fs-card)}
.prog-col p + p{margin-top:.75rem}
.prog .ticks{gap:.5rem}
.mods{display:grid;gap:1.25rem}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem;margin:0;padding:0;list-style:none}
.facts li{border-radius:var(--radius-tag);padding:.875rem 1rem;background:var(--fact-bg);color:var(--fact-fg)}
.facts b{display:block;font:800 1.25rem/1.2 var(--font-heading)}
.facts span{display:block;font-size:var(--fs-small);line-height:1.35;margin-top:.25rem}
.c-light{--fact-bg:#FFFFFF;--fact-fg:#101820}
.c-night{--fact-bg:#0047BB;--fact-fg:#FFFFFF}
.c-white{--card-bg:#FFFFFF;--card-fg:#101820;--card-bd:#FFFFFF;--card-sub:#001E60;--card-muted:#101820;--fact-bg:#A7C6ED;--fact-fg:#101820}
.prog .btns{margin-top:0}
@media (max-width:900px){.prog-cols{grid-template-columns:1fr}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cohort-callout{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.5rem;align-items:center;background:#001E60;color:#FFFFFF;border-radius:var(--radius-card);padding:1.25rem 1.5rem;border-left:8px solid #80E0A7}
.cohort-callout .cc-dates{display:flex;gap:.5rem}
.cohort-callout .cc-date{width:88px;height:88px;border-radius:var(--radius-card);background:#80E0A7;color:#001E60;display:grid;place-content:center;text-align:center;font-family:var(--font-heading)}
.cohort-callout .cc-date b{font:800 2.25rem/1 var(--font-heading)}
.cohort-callout .cc-date span{font:700 .8125rem/1.2 var(--font-heading)}
.cohort-callout .cc-text{display:grid;gap:.25rem}
.cohort-callout .cc-main{font:800 clamp(1.25rem,2.4vw,1.625rem)/1.25 var(--font-heading);max-width:none}
.cohort-callout .b-main{--main-bg:#80E0A7;--main-fg:#101820;--main-hover:#FFFFFF}
.cohort-callout a:focus-visible{outline-color:#80E0A7}
@media (max-width:760px){.cohort-callout{grid-template-columns:1fr;gap:1rem}}
.impact{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.impact li{border-radius:var(--radius-card);padding:1.5rem;display:grid;gap:.5rem;align-content:start;position:relative;overflow:hidden}
.impact li::before{content:"";position:absolute;right:-18px;top:-18px;width:72px;height:72px;border-radius:50%;background:var(--ring)}
.impact b{font:800 clamp(2.5rem,4.5vw,3.25rem)/1 var(--font-heading);letter-spacing:-.02em;position:relative}
.impact span{font:600 var(--fs-card)/1.4 var(--font-heading);position:relative}
.impact .i1{background:#001E60;color:#FFFFFF;--ring:#0047BB}.impact .i1 b{color:#80E0A7}
.impact .i2{background:#0047BB;color:#FFFFFF;--ring:#001E60}
.impact .i3{background:#80E0A7;color:#101820;--ring:#FFFFFF}.impact .i3 b{color:#001E60}
.impact .i4{background:#A7C6ED;color:#101820;--ring:#FFFFFF}.impact .i4 b{color:#001E60}
@media (max-width:900px){.impact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.impact{grid-template-columns:1fr}}
/* free introduction */
.mint .card{--card-bd:#FFFFFF}
.after{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.after li{display:grid;gap:.375rem;align-content:start}
.after b{font:800 1.25rem/1.3 var(--font-heading);color:#001E60}
.after p{font-size:var(--fs-card)}
.intro-cta{margin-top:2rem}
@media (max-width:760px){.after{grid-template-columns:1fr}}

/* journey timeline */
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem;position:relative}
.journey li{position:relative;display:grid;gap:.5rem;align-content:start}
.journey li:not(:last-child)::after{content:"";position:absolute;left:56px;right:calc(-1.25rem + 8px);top:23px;height:3px;background:#A7C6ED}
.journey .n{width:48px;height:48px;border-radius:50%;background:#0047BB;color:#FFFFFF;display:grid;place-items:center;font:800 var(--fs-ui)/1 var(--font-heading);margin-bottom:.5rem}
.journey li:first-child .n{background:#80E0A7;color:#001E60}
.journey h3,.journey h4{font:700 1.25rem/1.3 var(--font-heading);margin:0}
.stats4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){.stats4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.how-in{scroll-margin-top:96px;margin-bottom:clamp(3rem,6vw,4.5rem)}
.how-in .card-head h4{font:700 var(--fs-h3)/1.25 var(--font-heading);margin:0}
.how-in .live{margin-top:2.5rem}
.journey p{font-size:var(--fs-card);color:var(--muted)}
@media (max-width:900px){
  .journey{grid-template-columns:1fr;gap:1.5rem}
  .journey li:not(:last-child)::after{left:22px;right:auto;top:56px;bottom:calc(-1.5rem + 8px);width:3px;height:auto}
  .journey li{grid-template-columns:48px minmax(0,1fr);column-gap:1rem}
  .journey .n{grid-row:span 2;margin:0}
}
.live{margin-top:3rem}

/* industries */
.ind{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0;padding:0;list-style:none}
.ind li{background:#0047BB;color:#FFFFFF;border-radius:var(--radius-card);padding:var(--pad-card);display:grid;gap:.375rem;align-content:start}
.ind b{font:700 1.125rem/1.3 var(--font-heading)}
.ind span{font-size:var(--fs-card);line-height:1.5}
@media (max-width:900px){.ind{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ind{grid-template-columns:1fr}}

/* programme summary cards (previous site design) */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap)}
.pcard{border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line);background:#FFFFFF;scroll-margin-top:96px}
.pcard-head{padding:var(--pad-card);display:grid;gap:.5rem;background:var(--ph-bg);color:var(--ph-fg)}
.pcard-head .sub{color:var(--ph-sub)}
.pcard-head h3{font-size:1.75rem;font-weight:800}
.pcard-head p:not(.sub){font-size:var(--fs-card)}
.pcard-head .pick-stats{margin-top:.5rem}
.pcard-head .meta-line{font:700 var(--fs-card)/1.45 var(--font-heading)}
.pcard-body{padding:var(--pad-card);display:grid;gap:1.25rem;flex:1;align-content:start}
.pcard-body h4{font:700 var(--fs-sub-sm)/1.35 var(--font-heading);margin:0 0 .375rem;color:#001E60;padding-bottom:.375rem;border-bottom:1px solid var(--line)}
.pcard-body .ticks{gap:.25rem}
.pcard-foot{padding:0 var(--pad-card) var(--pad-card)}
.pcard-foot .b-alt{--alt-bg:#A7C6ED;--alt-fg:#101820}
.pcard.f{--ph-bg:#A7C6ED;--ph-fg:#101820;--ph-sub:#001E60;--fact-bg:#FFFFFF;--fact-fg:#101820}
.pcard.a{--ph-bg:#001E60;--ph-fg:#FFFFFF;--ph-sub:#A7C6ED;--fact-bg:#0047BB;--fact-fg:#FFFFFF}
@media (max-width:900px){.pcards{grid-template-columns:1fr}}

/* inside the programmes: tabs */
.inside{margin-top:clamp(3rem,6vw,4.5rem)}
.tabs{display:flex;gap:.625rem;margin-bottom:1.5rem}
.tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.25rem;border-radius:var(--radius-btn);border:2px solid #A7C6ED;
  background:#A7C6ED;color:#101820;font:600 var(--fs-ui)/1.2 var(--font-heading);cursor:pointer;min-width:11rem}
.tabs button[aria-selected="true"]{background:#0047BB;border-color:#0047BB;color:#FFFFFF}
.tabs button:hover{filter:brightness(.95)}
@media (max-width:640px){.tabs button{flex:1 1 0;min-width:0}}
.tabpanel{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
.tabpanel[hidden]{display:none}
.block-head{display:grid;gap:.375rem;margin-bottom:1.25rem;max-width:46rem}
.block-head h3{font-size:clamp(1.5rem,2.6vw,1.875rem);font-weight:800;color:#001E60}
.block-head p:not(.sub){color:var(--muted)}

/* snapshots */
.snaps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.snap{display:grid;gap:.75rem;align-content:start}
.snap h4{font:700 1.125rem/1.3 var(--font-heading);margin:0}
.snap p{font-size:var(--fs-card);color:var(--muted)}
.snap-note{margin-top:1rem;font-size:var(--fs-small);color:var(--muted)}
.screen{border:1px solid #D9D9D6;border-radius:10px;background:#FFFFFF;overflow:hidden;aspect-ratio:4/3;display:flex;flex-direction:column;font-family:var(--font-body);color:#101820}
.scr-bar{background:#0047BB;color:#FFFFFF;display:flex;align-items:center;gap:6px;padding:6px 8px;font:700 9px/1 var(--font-heading)}
.scr-bar i{width:12px;height:12px;border-radius:3px;background:#FFFFFF;display:inline-block}
.scr-bar .pbar{margin-left:auto;width:52px;height:5px;border-radius:3px;background:#001E60;overflow:hidden}
.scr-bar .pbar b{display:block;height:100%;width:34%;background:#80E0A7}
.scr-body{flex:1;display:grid;padding:8px;gap:6px;font-size:8.5px;line-height:1.3;min-height:0}
.portal{grid-template-columns:38% 1fr}
.rail{display:grid;gap:3px;align-content:start}
.rail span{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:3px;background:#F2F2F0}
.rail span::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid #53565A;flex-shrink:0}
.rail span.done::before{background:#0047BB;border-color:#0047BB}
.rail span.on{background:#A7C6ED}
.quiz{display:grid;gap:3px;align-content:start}
.quiz b{font:700 9px/1.25 var(--font-heading)}
.quiz span{padding:3px 5px;border:1px solid #D9D9D6;border-radius:3px}
.quiz span.ok{background:#80E0A7;border-color:#80E0A7}
.live-scr{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr auto;background:#001E60}
.live-scr span{border-radius:4px;background:#0047BB;color:#FFFFFF;display:grid;place-items:center;font:700 11px/1 var(--font-heading)}
.live-scr span.me{background:#80E0A7;color:#001E60}
.live-scr em{grid-column:1/-1;color:#FFFFFF;font:600 8.5px/1.3 var(--font-heading)}
.lab{grid-template-rows:auto 1fr auto;align-content:start}
.lab b{font:700 9px/1.25 var(--font-heading)}
.flow{display:flex;align-items:center;gap:4px}
.flow span{flex:1;border:1.5px solid #0047BB;border-radius:4px;padding:5px 3px;text-align:center;font-weight:600;background:#FFFFFF}
.flow span.hl{background:#A7C6ED}
.flow i{width:8px;height:1.5px;background:#0047BB;flex-shrink:0}
.steps-mini{display:grid;gap:2px}
.steps-mini span{display:flex;gap:4px;align-items:center}
.steps-mini span::before{content:"";width:7px;height:7px;border-radius:2px;border:1px solid #53565A}
.steps-mini span.done::before{background:#80E0A7;border-color:#80E0A7}
.cv{grid-template-columns:1fr 34%}
.cv-doc{border:1px solid #D9D9D6;border-radius:3px;padding:5px;display:grid;gap:4px;align-content:start}
.cv-doc b{font:700 9px/1 var(--font-heading)}
.cv-doc i{display:block;height:4px;border-radius:2px;background:#D9D9D6}
.cv-doc i.mark{background:#80E0A7}
.cv-side{display:grid;gap:4px;align-content:start}
.cv-side span{border-radius:3px;padding:4px;background:#A7C6ED;font-weight:600}
.cv-side span.n{background:#001E60;color:#FFFFFF}
@media (max-width:1000px){.snaps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.snaps{grid-template-columns:1fr}.scr-body{font-size:11px}.quiz b,.lab b,.cv-doc b{font-size:12px}.scr-bar{font-size:12px}}

.portal2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px}
.pt{border:1px solid #D9D9D6;border-radius:4px;padding:5px;display:grid;gap:3px;align-content:start;min-height:0;overflow:hidden}
.pt em{font:700 7.5px/1 var(--font-heading);color:#0047BB}
.pt b{font:700 8.5px/1.2 var(--font-heading)}
.pt-art i{display:block;height:3px;border-radius:2px;background:#D9D9D6}
.pt-vid{background:#001E60;border-color:#001E60;place-items:center;align-content:center;position:relative}
.pt-vid em{color:#80E0A7;position:absolute;top:5px;left:5px}
.pt-vid .play{width:0;height:0;border-left:12px solid #FFFFFF;border-top:8px solid transparent;border-bottom:8px solid transparent}
.pt-vid u{position:absolute;left:5px;right:5px;bottom:5px;height:3px;border-radius:2px;background:#0047BB;text-decoration:none}
.pt-vid u s{display:block;width:40%;height:100%;background:#80E0A7;border-radius:2px;text-decoration:none}
.drag{display:grid;gap:2px}
.drag span{border:1px dashed #0047BB;border-radius:3px;padding:2px 4px;font-weight:600}
.drag span.on{background:#A7C6ED;border-style:solid}
.pt-quiz span{padding:2px 4px;border:1px solid #D9D9D6;border-radius:3px}
.pt-quiz span.ok{background:#80E0A7;border-color:#80E0A7}
@media (max-width:560px){.pt em{font-size:10px}.pt b{font-size:11px}}
/* module accordions */
.modlist{display:grid;gap:.5rem}
.mod{border:1px solid var(--line);border-radius:var(--radius-card);background:#FFFFFF}
.mod:first-child{border-top:1px solid var(--line)}
.mod summary{padding:.75rem 1.25rem;min-height:64px;display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;gap:1rem;align-items:center}
.mod summary::after{grid-column:3}
.mod .code{width:2.5rem;height:2.5rem;border-radius:var(--radius-tag);background:#A7C6ED;color:#001E60;display:grid;place-items:center;font:800 var(--fs-ui)/1 var(--font-heading)}
.mod.adv .code{background:#001E60;color:#FFFFFF}
.mod .mt{display:grid;gap:.125rem}
.mod .mt b{font:700 1.0625rem/1.3 var(--font-heading)}
.mod .mt small{font:500 var(--fs-small)/1.35 var(--font-body);color:var(--muted)}
.mod[open]{border-color:#0047BB}
.mod-body{padding:0 1.25rem 1.25rem calc(1.25rem + 3.5rem);display:grid;gap:.75rem}
.mod-body p{color:var(--ink)!important;padding:0!important}
.mod-body h5{font:700 var(--fs-small)/1.3 var(--font-heading);margin:0;color:#001E60}
.mod-body .ticks{gap:.375rem}
@media (max-width:640px){.mod-body{padding-left:1.25rem}}

/* on completion */
.complete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--gap)}
.complete .stats-box{background:#001E60;color:#FFFFFF;border-radius:var(--radius-card);padding:var(--pad-card);display:grid;gap:1rem;align-content:start}
.complete .stats-box h4,.complete .next h4{font:800 1.25rem/1.3 var(--font-heading);margin:0}
.complete .stats-box ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.complete .stats-box li{border-top:3px solid #80E0A7;padding-top:.75rem;display:grid;gap:.25rem}
.complete .stats-box li b{font:800 1.5rem/1.15 var(--font-heading)}
.complete .stats-box li span{font-size:var(--fs-card)}
.complete .next{background:#80E0A7;color:#101820;border-radius:var(--radius-card);padding:var(--pad-card);display:grid;gap:1rem;align-content:start}
.complete .next ol{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:n}
.complete .next li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:start}
.complete .next li::before{counter-increment:n;content:counter(n);width:2.5rem;height:2.5rem;border-radius:50%;background:#001E60;color:#FFFFFF;display:grid;place-items:center;font:800 var(--fs-ui)/1 var(--font-heading)}
.complete .next li div{display:grid;gap:.25rem}
.complete .next li b{font:700 1.0625rem/1.3 var(--font-heading)}
.complete .next li p{font-size:var(--fs-card)}
.complete .btns{margin-top:.5rem}
@media (max-width:860px){.complete{grid-template-columns:1fr}}

.hero-body .btns,.btns.stack{flex-wrap:wrap}
@media (max-width:640px){.hero-body .btns .btn,.btns.stack .btn{flex:1 1 100%}}
.explore .card .btns{margin-top:auto}

.legal{padding-block:clamp(2.5rem,6vw,4rem)}
.legal .doc{max-width:46rem;display:grid;gap:0}
.legal h1{color:var(--h2);margin-bottom:1rem}
.legal h2{font-size:var(--fs-h3);margin:2rem 0 .5rem;color:var(--h2)}
.legal h3{font-size:var(--fs-sub-sm);margin:1.25rem 0 .25rem;color:var(--ink)}
.legal p,.legal li{color:var(--ink);font-size:var(--fs-card)}
.legal p + p{margin-top:.75rem}
.legal .lead{font-size:1.1875rem}
.legal .updated{color:var(--muted);font-size:var(--fs-small);margin-top:.5rem}
.legal ul{padding-left:1.25rem;margin:.5rem 0;display:grid;gap:.375rem}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}