/* ══════════════════════════════════════════════════════════════════
   1 · DESIGN TOKENS
   Values taken directly from Profyt Brand Guidelines 2026.
   Change here, not in components.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* brand palette — guidelines, Brand Color page */
  --emerald:#0A6B4C;        /* primary. key actions, highlights, primary UI */
  --carbon:#2D2D2D;         /* primary text, dark backgrounds */
  --gold:#D99B32;           /* secondary accent. data viz and ratings only */
  --mint:#00BB82;           /* Primary Light, from the brand logo assets.
                               the accent for dark surfaces, not peach */
  --peach:#FAD8BD;          /* tertiary. BACKGROUNDS AND SUPPORTING VISUALS ONLY.
                               Never use peach for text — see note below. */
  --emerald-bright:#00BB82; /* the palette's designated accent for text on dark
                               surfaces. #0A6B4C has too little contrast on carbon. */
  --white:#FFFFFF;
  --grey-100:#F5F5F5;       /* light grey */
  --grey-200:#E0E0E0;       /* medium grey */
  --grey-500:#757575;       /* dark grey */

  /* derived tints. only for surfaces and states, do not introduce new hues */
  --emerald-08:rgba(10,107,76,.08);
  --emerald-14:rgba(10,107,76,.14);
  --emerald-dark:#075039;
  --gold-12:rgba(217,155,50,.12);
  --carbon-04:rgba(45,45,45,.04);

  /* type. brand typeface is Plus Jakarta Sans */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* guidelines scale: H1 800/52 · H2 700/36 · H3 600/24 · body 400/18 · caption 400/14
     UI chrome steps below the editorial scale for density. */
  --fs-h1:clamp(30px,4.4vw,52px);
  --fs-h2:clamp(24px,3vw,36px);
  --fs-h3:20px;
  --fs-lg:18px;
  --fs-base:15px;
  --fs-sm:13.5px;
  --fs-cap:12px;

  /* spacing, 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  --shadow-sm:0 1px 2px rgba(45,45,45,.05);
  --shadow-md:0 2px 12px rgba(45,45,45,.07);

  --header-h:64px;
  --maxw:1180px;
}

/* Colour discipline, from the brand guidelines:
   · emerald        primary. actions, highlights, accents on light surfaces
   · emerald-bright accents and text on dark surfaces only
   · gold           secondary emphasis, used sparingly. ratings, level tags
   · peach          BACKGROUNDS ONLY. never text, never an accent
   · carbon/greys   text and structure
   Do not introduce hues outside this set. */

/* ══════════════════════════════════════════════════════════════════
   2 · BASE
   ══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font); font-size:var(--fs-base);
  line-height:1.55; color:var(--carbon); background:var(--grey-100);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.2; letter-spacing:-.02em;}
h1{font-size:var(--fs-h1); font-weight:800;}
h2{font-size:var(--fs-h2); font-weight:700;}
h3{font-size:var(--fs-h3); font-weight:600;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; font-size:inherit; cursor:pointer; border:0; background:none;}
img,svg{display:block; max-width:100%;}
ul{margin:0; padding:0; list-style:none;}

:focus-visible{outline:2px solid var(--emerald); outline-offset:2px; border-radius:4px;}

/* a class that sets display beats the UA [hidden] rule, so force it.
   Without this the signed-in avatar and the signed-out buttons render together. */
[hidden]{display:none !important;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s5);}
.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;}

/* ══════════════════════════════════════════════════════════════════
   3 · HEADER + NAV
   ══════════════════════════════════════════════════════════════════ */
.header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:var(--white); border-bottom:1px solid var(--grey-200);
}
.header__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--s5);
  height:100%; display:flex; align-items:center; gap:var(--s8);
}
.brand{display:flex; align-items:center; gap:var(--s3); min-width:0;}
.brand__mark{width:22px; height:auto;}
.brand__text{display:flex; flex-direction:column; line-height:1.05; min-width:0;}
.brand__name{font-weight:800; font-size:15px; letter-spacing:-.02em; white-space:nowrap;}
.brand__name em{font-style:normal; color:var(--emerald);}
.brand__sub{font-size:10px; color:var(--grey-500); font-weight:500; letter-spacing:.01em;}

.nav{display:flex; gap:var(--s1); margin-left:auto;}
.nav__link{
  padding:var(--s2) var(--s4); border-radius:var(--r-full);
  font-size:var(--fs-sm); font-weight:600; color:var(--grey-500);
  display:flex; align-items:center; gap:var(--s2); transition:background .15s,color .15s;
}
.nav__link:hover{background:var(--carbon-04); color:var(--carbon);}
.nav__link[aria-current="page"]{background:var(--emerald-08); color:var(--emerald);}
.nav__link svg{width:16px; height:16px; stroke-width:2;}

.avatar{
  margin-left:var(--s4); display:flex; align-items:center; gap:var(--s2);
  padding:var(--s1) var(--s2) var(--s1) var(--s1); border-radius:var(--r-full);
  transition:background .15s;
}
.avatar:hover{background:var(--carbon-04);}
.avatar__circle{
  width:30px; height:30px; border-radius:50%; background:var(--emerald);
  color:var(--white); font-weight:700; font-size:13px;
  display:grid; place-items:center; flex-shrink:0;
}
.avatar__name{font-size:var(--fs-sm); font-weight:600; white-space:nowrap;}

.nav-toggle{display:none; margin-left:auto; padding:var(--s2); border-radius:var(--r-sm);}
.nav-toggle svg{width:22px; height:22px; stroke-width:2;}

@media (max-width:900px){
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--white); border-bottom:1px solid var(--grey-200);
    padding:var(--s2) var(--s5) var(--s4); margin:0; display:none;
  }
  .nav[data-open="true"]{display:flex;}
  .nav__link{border-radius:var(--r-sm); padding:var(--s3) var(--s3);}
  .nav-toggle{display:block;}
  .avatar__name{display:none;}
  .avatar{margin-left:var(--s3);}
}

/* ══════════════════════════════════════════════════════════════════
   4 · SHARED COMPONENTS
   ══════════════════════════════════════════════════════════════════ */
/* longhand on purpose: .page shares an element with .wrap, and a padding
   shorthand here would reset .wrap's horizontal gutters to zero. */
.page{padding-top:var(--s8); padding-bottom:var(--s16);}
.page__head{margin-bottom:var(--s6);}
.eyebrow{
  font-size:var(--fs-cap); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--emerald); margin-bottom:var(--s2);
}
.page__title{font-size:var(--fs-h2);}
.page__sub{color:var(--grey-500); margin-top:var(--s2); font-size:var(--fs-base);}

.card{
  background:var(--white); border:1px solid var(--grey-200);
  border-radius:var(--r-lg); padding:var(--s6);
}
.card--flush{padding:0; overflow:hidden;}

.section{margin-top:var(--s8);}
.section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s4);
}
.section__title{font-size:var(--fs-h3); font-weight:700;}
.link-more{
  font-size:var(--fs-sm); font-weight:600; color:var(--emerald);
  display:inline-flex; align-items:center; gap:6px;
}
.link-more svg{width:14px; height:14px; stroke-width:2.5;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  white-space:nowrap; line-height:1;
  padding:11px var(--s5); border-radius:var(--r-full);
  font-size:var(--fs-sm); font-weight:700; letter-spacing:-.01em;
  transition:background .15s, transform .1s, box-shadow .15s;
}
.btn:active{transform:translateY(1px);}
.btn svg{width:15px; height:15px; stroke-width:2.5;}
.btn--primary{background:var(--emerald); color:var(--white);}
.btn--primary:hover{background:var(--emerald-dark);}
.btn--ghost{background:var(--white); color:var(--carbon); border:1px solid var(--grey-200);}
.btn--ghost:hover{background:var(--grey-100);}
.btn--onDark{background:var(--white); color:var(--carbon);}
.btn--onDark:hover{background:var(--grey-100);}
.btn--sm{padding:8px var(--s4); font-size:var(--fs-cap);}
.btn--block{width:100%;}

.tag{
  display:inline-block; padding:4px 10px; border-radius:var(--r-full);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.tag--course{background:var(--emerald-08); color:var(--emerald);}
.tag--level{background:var(--grey-100); color:var(--grey-500);}
.tag--free{background:var(--emerald); color:var(--white);}

.meta{display:flex; flex-wrap:wrap; gap:var(--s4); color:var(--grey-500); font-size:var(--fs-cap);}
.meta span{display:inline-flex; align-items:center; gap:5px;}
.meta svg{width:13px; height:13px; stroke-width:2;}
.meta-inline{width:12px; height:12px; stroke-width:2; display:inline; vertical-align:-1px;}

.empty{text-align:center; padding:var(--s10) var(--s5);}
.card > .empty{padding:var(--s8) var(--s5);}
.empty__icon{
  width:52px; height:52px; margin:0 auto var(--s4); border-radius:50%;
  background:var(--emerald-08); display:grid; place-items:center; color:var(--emerald);
}
.empty__icon svg{width:24px; height:24px; stroke-width:2;}
.empty__title{font-size:var(--fs-lg); font-weight:700; margin-bottom:var(--s2);}
.empty__body{color:var(--grey-500); font-size:var(--fs-sm); max-width:34ch; margin:0 auto var(--s5);}

.grid{display:grid; gap:var(--s5);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .grid--3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid--3,.grid--2{grid-template-columns:1fr;} }

/* ══════════════════════════════════════════════════════════════════
   5 · CONVERSION BANNER
   The commercially critical element. ZLearn run the equivalent for
   ZFunds sign-ups. Content and targeting must be admin-controlled
   (see BRD FR-40, FR-41) — do not hard-code.
   ══════════════════════════════════════════════════════════════════ */
.promo{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--carbon); color:var(--white);
  padding:var(--s8) var(--s8); display:flex; align-items:center;
  gap:var(--s8); margin-bottom:var(--s8);
}
.promo::after{
  content:""; position:absolute; right:-90px; top:-120px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,var(--emerald-14) 0%,transparent 68%);
  pointer-events:none;
}
.promo__body{position:relative; flex:1; min-width:0;}
.promo__kicker{
  font-size:var(--fs-cap); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mint); margin-bottom:var(--s3);
}
.promo__title{font-size:clamp(20px,2.4vw,28px); font-weight:800; letter-spacing:-.025em;}
.promo__title em{font-style:normal; color:var(--mint);}
.promo__text{color:#C9C9C9; font-size:var(--fs-sm); margin-top:var(--s3); max-width:52ch;}
.promo__aside{position:relative; text-align:right; flex-shrink:0;}
.promo__stat{font-size:52px; font-weight:800; letter-spacing:-.04em; color:var(--emerald-bright); line-height:1;}
.promo__statLabel{font-size:var(--fs-cap); color:#A8A8A8; letter-spacing:.08em; text-transform:uppercase;}
@media (max-width:820px){
  .promo{flex-direction:column; align-items:flex-start; gap:var(--s5); padding:var(--s6);}
  .promo__aside{text-align:left;}
}

/* ══════════════════════════════════════════════════════════════════
   6 · JOURNEY RAIL  —  signature element
   Not decoration: the six steps are a real sequence, and the learner's
   position in it is the single most useful thing to show them. It also
   frames the course as a step toward an ARN rather than an end in itself.
   ══════════════════════════════════════════════════════════════════ */
.journey{padding:var(--s6);}
.journey__head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s6);}
.journey__pct{font-size:var(--fs-h3); font-weight:800; color:var(--emerald); letter-spacing:-.02em;}

.rail{display:grid; grid-template-columns:repeat(6,1fr); position:relative;}
.rail::before{
  content:""; position:absolute; left:calc(100%/12); right:calc(100%/12); top:13px;
  height:2px; background:var(--grey-200);
}
.rail__fill{
  position:absolute; left:calc(100%/12); top:13px; height:2px;
  background:var(--emerald); transition:width .5s ease;
}
.step{position:relative; text-align:center; padding-top:0;}
.step__dot{
  width:28px; height:28px; margin:0 auto var(--s3); border-radius:50%;
  background:var(--white); border:2px solid var(--grey-200);
  display:grid; place-items:center; position:relative; z-index:1;
  font-size:11px; font-weight:700; color:var(--grey-500);
}
.step__label{font-size:var(--fs-cap); font-weight:600; color:var(--grey-500); line-height:1.3;}
.step[data-state="done"] .step__dot{background:var(--emerald); border-color:var(--emerald); color:var(--white);}
.step[data-state="done"] .step__label{color:var(--carbon);}
.step[data-state="current"] .step__dot{
  background:var(--white); border-color:var(--emerald); color:var(--emerald);
  box-shadow:0 0 0 4px var(--emerald-08);
}
.step[data-state="current"] .step__label{color:var(--emerald); font-weight:700;}
.step__dot svg{width:13px; height:13px; stroke-width:3;}
@media (max-width:760px){
  .rail{grid-template-columns:1fr; gap:var(--s4);}
  .rail::before,.rail__fill{display:none;}
  .step{display:flex; align-items:center; gap:var(--s4); text-align:left;}
  .step__dot{margin:0;}
}

/* ══════════════════════════════════════════════════════════════════
   7 · STAT TILES
   ══════════════════════════════════════════════════════════════════ */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); margin-bottom:var(--s8);}
.stat{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-md); padding:var(--s5);}
.stat__label{
  font-size:var(--fs-cap); font-weight:600; color:var(--grey-500);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--s2);
  display:flex; align-items:center; gap:6px;
}
.stat__label svg{width:13px; height:13px; stroke-width:2; color:var(--emerald);}
.stat__value{font-size:26px; font-weight:800; letter-spacing:-.03em;}
.stat__value small{font-size:14px; font-weight:600; color:var(--grey-500);}
@media (max-width:900px){ .stats{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .stats{grid-template-columns:repeat(2,1fr); gap:var(--s3);} }

/* ══════════════════════════════════════════════════════════════════
   8 · COURSE / MOCK / BLOG CARDS
   ══════════════════════════════════════════════════════════════════ */
.tile{
  background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
.tile:hover{box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:#D2D2D2;}
.tile__banner{
  position:relative; aspect-ratio:16/9;
  background:var(--carbon) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%232D2D2D'/%3E%3Cg opacity='.22' stroke='%2300BB82' stroke-width='2' fill='none'%3E%3Cpath d='M0 150 L60 120 L110 132 L170 84 L230 96 L320 30'/%3E%3C/g%3E%3Cg opacity='.14' fill='%2300BB82'%3E%3Crect x='36' y='128' width='14' height='36'/%3E%3Crect x='96' y='112' width='14' height='52'/%3E%3Crect x='156' y='94' width='14' height='70'/%3E%3Crect x='216' y='76' width='14' height='88'/%3E%3Crect x='276' y='54' width='14' height='110'/%3E%3C/g%3E%3Cg opacity='.25' fill='%23D99B32'%3E%3Ccircle cx='170' cy='84' r='4'/%3E%3Ccircle cx='320' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
  display:grid; place-items:center; padding:var(--s5); text-align:center;
}
.tile__banner::after{
  content:""; position:absolute; right:-40px; bottom:-70px; width:190px; height:190px;
  border-radius:50%; background:radial-gradient(circle,var(--emerald-14) 0%,transparent 70%);
}
.tile__bannerText{position:relative; color:var(--white); font-weight:800; font-size:17px; letter-spacing:-.02em;}
.tile__bannerText span{display:block; font-size:var(--fs-cap); font-weight:600; color:var(--mint);
  letter-spacing:.1em; text-transform:uppercase; margin-top:6px;}
.tile__rating{
  position:absolute; top:var(--s3); right:var(--s3); z-index:1;
  background:rgba(255,255,255,.94); color:var(--carbon);
  border-radius:var(--r-full); padding:3px 9px;
  font-size:var(--fs-cap); font-weight:700; display:flex; align-items:center; gap:4px;
}
.tile__rating svg{width:11px; height:11px; fill:var(--gold); stroke:none;}
.tile__body{padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); flex:1;}
.tile__tags{display:flex; flex-wrap:wrap; gap:6px;}
.tile__title{font-size:var(--fs-lg); font-weight:700; letter-spacing:-.02em;}
.tile__desc{font-size:var(--fs-sm); color:var(--grey-500); flex:1;}
.tile__foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding-top:var(--s4); border-top:1px solid var(--grey-200); margin-top:auto;
}
.tile__price{font-weight:800; color:var(--emerald); font-size:var(--fs-base);}
.tile__price--paid{color:var(--carbon);}
.tile__price small{display:block; font-size:10.5px; font-weight:600; color:var(--grey-500);
  letter-spacing:.06em; text-transform:uppercase;}

.progress{height:6px; border-radius:var(--r-full); background:var(--grey-200); overflow:hidden;}
.progress__fill{height:100%; background:var(--emerald); border-radius:var(--r-full); transition:width .4s ease;}
.progress__meta{display:flex; justify-content:space-between; font-size:var(--fs-cap);
  color:var(--grey-500); margin-top:6px; font-weight:600;}

/* ══════════════════════════════════════════════════════════════════
   9 · SEARCH / FILTERS / CATEGORIES
   ══════════════════════════════════════════════════════════════════ */
.toolbar{display:flex; gap:var(--s3); margin-bottom:var(--s6);}
.search{
  flex:1; display:flex; align-items:center; gap:var(--s3);
  background:var(--white); border:1px solid var(--grey-200);
  border-radius:var(--r-full); padding:11px var(--s5);
}
.search svg{width:17px; height:17px; stroke-width:2; color:var(--grey-500); flex-shrink:0;}
.search input{
  border:0; outline:none; flex:1; font-family:inherit;
  font-size:var(--fs-base); color:var(--carbon); background:none; min-width:0;
}
.search input::placeholder{color:var(--grey-500);}
.select{
  background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-full);
  padding:11px var(--s5); font-family:inherit; font-size:var(--fs-sm);
  font-weight:600; color:var(--carbon); cursor:pointer;
}
@media (max-width:620px){ .toolbar{flex-direction:column;} .select{width:100%;} }

.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-bottom:var(--s8);}
.cat{
  text-align:left; background:var(--white); border:1px solid var(--grey-200);
  border-radius:var(--r-md); padding:var(--s3) var(--s4);
  transition:border-color .15s, background .15s;
}
.cat:hover{border-color:var(--emerald);}
.cat[aria-pressed="true"]{background:var(--emerald-08); border-color:var(--emerald);}
.cat__name{font-size:var(--fs-sm); font-weight:700; letter-spacing:-.01em;}
.cat__count{font-size:var(--fs-cap); color:var(--grey-500); margin-top:3px;}
.cat[aria-pressed="true"] .cat__name{color:var(--emerald);}
@media (max-width:900px){ .cats{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .cats{grid-template-columns:1fr;} }

/* ══════════════════════════════════════════════════════════════════
   10 · ANALYTICS
   ══════════════════════════════════════════════════════════════════ */
.analytics{display:grid; grid-template-columns:1fr 1.35fr; gap:var(--s5);}
@media (max-width:900px){ .analytics{grid-template-columns:1fr;} }
.kv{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  padding:var(--s4) 0; border-bottom:1px solid var(--grey-200);}
.kv:last-child{border-bottom:0; padding-bottom:0;}
.kv__k{font-size:var(--fs-sm); color:var(--grey-500); font-weight:600;}
.kv__v{font-size:var(--fs-lg); font-weight:800; letter-spacing:-.02em;}
.chart{width:100%; height:auto;}
.chart text{font-family:var(--font); font-size:10px; fill:var(--grey-500); font-weight:600;}
.bkRow{display:flex; align-items:center; border-bottom:1px solid var(--grey-200);}
.bkRow:last-child{border-bottom:0;}
.bkThumb{width:56px; height:36px; border-radius:8px; background:var(--carbon); color:var(--emerald-bright);
  display:grid; place-items:center; flex-shrink:0;}
.bkThumb svg{width:16px; height:16px; stroke-width:2;}
.bkRemove{width:38px; height:38px; margin-right:var(--s4); border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--grey-500); flex-shrink:0;}
.bkRemove:hover{background:#FBE7DC; color:#A8471F;}
.bkRemove svg{width:15px; height:15px; stroke-width:2.5;}
.donuts{display:flex; justify-content:space-evenly; align-items:center; gap:var(--s4); flex:1;}
.donut{width:clamp(130px, 38%, 168px); text-align:center;}
.donut svg{width:100%; height:auto;}
.donut__l{font-size:var(--fs-cap); color:var(--grey-500); font-weight:600; margin-top:var(--s2);}
.legend{display:flex; gap:var(--s5); margin-top:var(--s4); font-size:var(--fs-cap);
  color:var(--grey-500); font-weight:600;}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:14px; height:3px; border-radius:2px; display:inline-block;}

/* ══════════════════════════════════════════════════════════════════
   11 · PROFILE
   ══════════════════════════════════════════════════════════════════ */
.tabs{display:flex; gap:var(--s1); border-bottom:1px solid var(--grey-200); margin-bottom:var(--s6);}
.tab{
  padding:var(--s3) var(--s5); font-size:var(--fs-sm); font-weight:700;
  color:var(--grey-500); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab[aria-selected="true"]{color:var(--emerald); border-bottom-color:var(--emerald);}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5);}
@media (max-width:620px){ .fields{grid-template-columns:1fr;} }
.field__label{font-size:var(--fs-cap); font-weight:700; color:var(--grey-500);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--s2);}
/* read-only values render as text, not disabled-looking inputs (tech review) */
.field__value{
  padding:6px 0 0; font-size:var(--fs-base); font-weight:600;
  border-bottom:1px solid var(--grey-200); padding-bottom:10px;
}
.field__value--empty{color:var(--grey-500);}


/* ══════════════════════════════════════════════════════════════════
   12 · BREADCRUMB
   ══════════════════════════════════════════════════════════════════ */
.crumbs{display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm);
  color:var(--grey-500); font-weight:600; margin-bottom:var(--s5); flex-wrap:wrap;}
.crumbs a:hover{color:var(--emerald);}
.crumbs svg{width:13px; height:13px; stroke-width:2.5; opacity:.6;}
.crumbs span[aria-current]{color:var(--carbon);}

/* ══════════════════════════════════════════════════════════════════
   13 · COURSE DETAIL
   ══════════════════════════════════════════════════════════════════ */
.detail{display:grid; grid-template-columns:1fr 340px; gap:var(--s8); align-items:start;}
/* The ARN page has two short columns; stretching them removes the dead space
   left under whichever one finishes first. */
.detail--even{align-items:stretch;}
.detail--even > .card, .detail--even .detail__aside > .card{height:100%;}
.detail--even .detail__aside{position:static; align-content:stretch;}
@media (max-width:1000px){ .detail{grid-template-columns:1fr;} }
.detail__aside{position:sticky; top:calc(var(--header-h) + var(--s5)); display:grid; gap:var(--s5);}
@media (max-width:1000px){ .detail__aside{position:static;} }

.hero{background:var(--carbon) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%232D2D2D'/%3E%3Cg opacity='.22' stroke='%2300BB82' stroke-width='2' fill='none'%3E%3Cpath d='M0 150 L60 120 L110 132 L170 84 L230 96 L320 30'/%3E%3C/g%3E%3Cg opacity='.14' fill='%2300BB82'%3E%3Crect x='36' y='128' width='14' height='36'/%3E%3Crect x='96' y='112' width='14' height='52'/%3E%3Crect x='156' y='94' width='14' height='70'/%3E%3Crect x='216' y='76' width='14' height='88'/%3E%3Crect x='276' y='54' width='14' height='110'/%3E%3C/g%3E%3Cg opacity='.25' fill='%23D99B32'%3E%3Ccircle cx='170' cy='84' r='4'/%3E%3Ccircle cx='320' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E") right -40px center/420px no-repeat; color:var(--white); border-radius:var(--r-xl);
  padding:var(--s8); position:relative; overflow:hidden; margin-bottom:var(--s6);}
.hero::after{content:""; position:absolute; right:-80px; bottom:-140px; width:320px; height:320px;
  border-radius:50%; background:radial-gradient(circle,var(--emerald-14) 0%,transparent 70%);}
.hero__inner{position:relative;}
.hero h1{font-size:clamp(21px,2.4vw,27px); margin-top:var(--s3);}
.hero__sub{color:var(--mint); font-size:var(--fs-lg); font-weight:600; margin-top:var(--s2);}
.hero__desc{color:#C9C9C9; font-size:var(--fs-base); margin-top:var(--s4); max-width:62ch;}
.hero .meta{color:#A8A8A8; margin-top:var(--s5);}
.hero .tag--course{background:rgba(255,255,255,.12); color:var(--mint);}
.hero .tag--level{background:rgba(255,255,255,.10); color:#D8D8D8;}

.faculty{display:flex; gap:var(--s5); align-items:flex-start;}
.faculty__photo{width:96px; height:120px; object-fit:cover; border-radius:var(--r-md);
  flex-shrink:0; border:1px solid var(--grey-200);}
.faculty__photo--lg{width:128px; height:160px;}
.faculty__points{display:grid; gap:8px; margin-top:var(--s4);}
.faculty__points li{display:flex; gap:9px; font-size:var(--fs-sm); color:#3E3E3E; align-items:flex-start;}
.faculty__points svg{width:14px; height:14px; stroke-width:2.5; color:var(--emerald); flex-shrink:0; margin-top:3px;}
.faculty__ln{display:inline-flex; align-items:center; gap:6px; margin-top:var(--s4);
  font-size:var(--fs-sm); font-weight:700; color:var(--emerald);}
.faculty__ln svg{width:13px; height:13px; stroke-width:2.5;}
@media (max-width:520px){ .faculty{flex-direction:column;} .faculty__photo--lg{width:110px; height:138px;} }

.faculty__avatar{width:56px; height:56px; border-radius:50%; background:var(--emerald-08);
  color:var(--emerald); display:grid; place-items:center; font-weight:800; font-size:20px; flex-shrink:0;}
.faculty__name{font-size:var(--fs-lg); font-weight:700;}
.faculty__role{font-size:var(--fs-cap); font-weight:700; color:var(--emerald);
  letter-spacing:.08em; text-transform:uppercase; margin-top:3px;}
.faculty__bio{font-size:var(--fs-sm); color:var(--grey-500); margin-top:var(--s3);}

.lesson__gate{display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  font-size:11px; font-weight:700; color:var(--emerald);
  background:var(--emerald-08); border-radius:var(--r-full); padding:3px 9px;}
.lesson__gate svg{width:11px; height:11px; stroke-width:2.5;}
.hero__cta{display:flex; align-items:center; gap:var(--s4); margin-top:var(--s6); flex-wrap:wrap;}
.hero__ctaNote{font-size:var(--fs-cap); color:#A8A8A8; font-weight:600;}

.introVid{background:var(--carbon); border-radius:var(--r-xl); overflow:hidden;}
.introVid__player{display:block; width:100%; aspect-ratio:16/9; background:#000;}
.introVid__bar{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s4) var(--s5);}
.introVid__t{color:var(--white); font-weight:800; font-size:var(--fs-base); letter-spacing:-.01em;}

.siteFrame{margin-top:16px; border:1px solid var(--grey-200); border-radius:var(--r-lg);
  overflow:hidden; background:var(--white);}
.siteFrame__bar{display:flex; align-items:center; gap:var(--s3);
  padding:10px var(--s4); border-bottom:1px solid var(--grey-200); background:var(--grey-100);}
.siteFrame__dot{width:9px; height:9px; border-radius:50%; background:var(--emerald-bright);}
.siteFrame__url{font-size:var(--fs-cap); font-weight:700; color:var(--grey-500);
  letter-spacing:.03em; flex:1;}
.siteFrame__open{display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-cap); font-weight:700; color:var(--emerald);}
.siteFrame__open svg{width:12px; height:12px; stroke-width:2.5;}
.siteFrame__frame{display:block; width:100%; height:420px; border:0; background:var(--grey-100);}
.siteFrame__note{padding:10px var(--s4); font-size:var(--fs-cap); color:var(--grey-500);
  border-top:1px solid var(--grey-200); background:var(--grey-100);}
@media (max-width:620px){ .siteFrame__frame{height:70vh;} }

/* Ask Sheetal dock: signed-in learners can reach the faculty from inside
   the course, alongside the two scheduled mentoring calls. */
.qaFab{position:fixed; right:20px; bottom:20px; z-index:70;
  display:none; align-items:center; gap:9px; padding:12px 18px;
  border-radius:var(--r-full); background:var(--emerald); color:var(--white);
  font-weight:700; font-size:var(--fs-sm); box-shadow:0 10px 28px rgba(10,107,76,.35);}
.qaFab:hover{background:var(--emerald-dark);}
.qaFab svg{width:16px; height:16px; stroke-width:2;}
body[data-qa="show"] .qaFab{display:inline-flex;}
body[data-qa-open="true"] .qaFab{display:none;}

.qaPanel{position:fixed; top:0; right:0; bottom:0; width:min(380px,100vw); z-index:80;
  background:var(--white); border-left:1px solid var(--grey-200);
  box-shadow:-16px 0 48px rgba(45,45,45,.14);
  display:none; flex-direction:column;}
body[data-qa-open="true"] .qaPanel{display:flex;}
.qaPanel__head{display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--grey-200);}
.qaPanel__photo{width:40px; height:40px; border-radius:50%; object-fit:cover;}
.qaPanel__name{font-weight:800; font-size:var(--fs-sm); letter-spacing:-.01em;}
.qaPanel__meta{font-size:11px; color:var(--grey-500); font-weight:600;}
.qaPanel__close{margin-left:auto; width:34px; height:34px; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--grey-500);}
.qaPanel__close:hover{background:var(--grey-100);}
.qaPanel__close svg{width:15px; height:15px; stroke-width:2.5;}
.qaThread{flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--grey-100);}
.pfPic{position:relative; width:76px; height:76px; flex-shrink:0;}
.pfPic img{width:76px; height:76px; border-radius:50%; object-fit:cover;
  border:1px solid var(--grey-200);}
.pfPic__init{width:76px; height:76px; border-radius:50%; background:var(--emerald);
  color:#fff; display:grid; place-items:center; font-size:28px; font-weight:800;}
.pfPic__edit{position:absolute; right:-2px; bottom:-2px; width:30px; height:30px;
  border-radius:50%; background:var(--white); border:1px solid var(--grey-200);
  display:grid; place-items:center; cursor:pointer; color:var(--carbon);}
.pfPic__edit:hover{border-color:var(--emerald); color:var(--emerald);}
.pfPic__edit svg{width:15px; height:15px; stroke-width:2;}
.pfPic__rm{font-size:12px; font-weight:700; color:#B3261E; margin-top:4px;}

.playerAside{position:sticky; top:calc(var(--header-h) + var(--s5)); display:grid; gap:var(--s5);}
@media (max-width:1000px){ .playerAside{position:static;} }
.qaInline{display:flex; flex-direction:column; overflow:hidden;}
.qaInline__head{display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--grey-200);}
.qaInline__photo{width:34px; height:34px; border-radius:50%; object-fit:cover;}
.qaInline__t{font-weight:800; font-size:var(--fs-sm); letter-spacing:-.01em;}
.qaInline__c{font-size:11px; color:var(--grey-500); font-weight:600;}
.qaThread--inline{max-height:280px; min-height:180px;}
.qaForm--inline{padding:10px;}
.qaForm--inline input{padding:9px 14px; font-size:13px;}
.qaForm--inline button{width:36px; height:36px;}
.qaForm--inline button svg{width:14px; height:14px;}

.qaLine{display:flex; gap:8px; align-items:flex-end;}
.qaLine--me{flex-direction:row-reverse;}
.qaAv{width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid var(--grey-200);}
.qaBot{background:var(--emerald-08); color:var(--emerald); display:grid; place-items:center;
  border:1px solid rgba(10,107,76,.2);}
.qaBot svg{width:14px; height:14px; stroke-width:2;}
.qaBot--lg{width:34px; height:34px; border-radius:10px; flex-shrink:0;}
.qaBot--lg svg{width:17px; height:17px;}
.qaScope{display:flex; gap:7px; align-items:flex-start; background:var(--white);
  border:1px solid var(--grey-200); border-radius:10px; padding:9px 11px;
  font-size:11.5px; color:var(--grey-500); line-height:1.45; margin-bottom:4px;}
.qaScope svg{width:13px; height:13px; stroke-width:2; color:var(--emerald); flex-shrink:0; margin-top:1px;}
.qaCite{display:block; margin-top:7px; padding-top:6px; border-top:1px solid var(--grey-200);
  font-size:11px; font-weight:700; color:var(--emerald);}
.qaAv--init{background:var(--emerald); color:#fff; display:grid; place-items:center;
  font-size:11px; font-weight:800; border:0;}
.qaMsg{max-width:calc(85% - 34px); padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5;}
.qaMsg--fac{background:var(--white); border:1px solid var(--grey-200); align-self:flex-start;
  border-bottom-left-radius:4px;}
.qaMsg--me{background:var(--emerald); color:var(--white); align-self:flex-end;
  border-bottom-right-radius:4px;}
.qaMsg__t{display:block; font-size:10px; opacity:.65; margin-top:5px;}
.qaNote{font-size:11px; color:var(--grey-500); text-align:center; padding:2px 8px;}
.qaForm{display:flex; gap:8px; padding:12px; border-top:1px solid var(--grey-200);}
.qaForm input{flex:1; border:1.5px solid var(--grey-200); border-radius:var(--r-full);
  padding:10px 16px; font-family:inherit; font-size:var(--fs-sm); outline:none;}
.qaForm input:focus{border-color:var(--emerald);}
.qaForm button{width:42px; height:42px; border-radius:50%; background:var(--emerald);
  color:#fff; display:grid; place-items:center; flex-shrink:0;}
.qaForm button svg{width:16px; height:16px; stroke-width:2.5;}

.joinBar{
  margin-top:var(--s10); background:var(--carbon); color:var(--white);
  border-radius:var(--r-lg); padding:var(--s8); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
}
.joinBar::after{content:""; position:absolute; right:-90px; top:-130px; width:340px; height:340px;
  border-radius:50%; background:radial-gradient(circle,var(--emerald-14) 0%,transparent 68%);}
.joinBar__body{position:relative; flex:1; min-width:0;}
.joinBar__t{font-size:var(--fs-h3); font-weight:800; letter-spacing:-.025em;}
.joinBar__d{color:#BDBDBD; font-size:var(--fs-sm); margin-top:var(--s2); max-width:56ch;}
.joinBar .btn{position:relative; flex-shrink:0;}
@media (max-width:760px){
  .introVid{background:var(--carbon); border-radius:var(--r-xl); overflow:hidden;}
.introVid__player{display:block; width:100%; aspect-ratio:16/9; background:#000;}
.introVid__bar{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s4) var(--s5);}
.introVid__t{color:var(--white); font-weight:800; font-size:var(--fs-base); letter-spacing:-.01em;}

.siteFrame{margin-top:16px; border:1px solid var(--grey-200); border-radius:var(--r-lg);
  overflow:hidden; background:var(--white);}
.siteFrame__bar{display:flex; align-items:center; gap:var(--s3);
  padding:10px var(--s4); border-bottom:1px solid var(--grey-200); background:var(--grey-100);}
.siteFrame__dot{width:9px; height:9px; border-radius:50%; background:var(--emerald-bright);}
.siteFrame__url{font-size:var(--fs-cap); font-weight:700; color:var(--grey-500);
  letter-spacing:.03em; flex:1;}
.siteFrame__open{display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-cap); font-weight:700; color:var(--emerald);}
.siteFrame__open svg{width:12px; height:12px; stroke-width:2.5;}
.siteFrame__frame{display:block; width:100%; height:420px; border:0; background:var(--grey-100);}
.siteFrame__note{padding:10px var(--s4); font-size:var(--fs-cap); color:var(--grey-500);
  border-top:1px solid var(--grey-200); background:var(--grey-100);}
@media (max-width:620px){ .siteFrame__frame{height:70vh;} }

.joinBar{flex-direction:column; align-items:flex-start; padding:var(--s6); gap:var(--s5);}
  .joinBar .btn{width:100%;}
}

.includes{display:grid; gap:var(--s3);}
.includes li{display:flex; gap:var(--s3); font-size:var(--fs-sm); align-items:flex-start;}
.includes svg{width:16px; height:16px; stroke-width:2.5; color:var(--emerald); flex-shrink:0; margin-top:2px;}

/* ── syllabus accordion ── */
.mod{border:1px solid var(--grey-200); border-radius:var(--r-md); overflow:hidden;
  background:var(--white); margin-bottom:var(--s3);}
.mod__head{width:100%; display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s5); text-align:left; transition:background .15s;}
.mod__head:hover{background:var(--grey-100);}
.mod__num{width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--grey-100); color:var(--grey-500);}
.mod[data-done="true"] .mod__num{background:var(--emerald); color:var(--white);}
.mod[data-current="true"] .mod__num{background:var(--white); color:var(--emerald);
  box-shadow:inset 0 0 0 2px var(--emerald);}
.mod__num svg{width:13px; height:13px; stroke-width:3;}
.mod__title{flex:1; min-width:0;}
.mod__name{display:block; font-size:var(--fs-base); font-weight:700; letter-spacing:-.01em;}
.mod__meta{display:block; font-size:var(--fs-cap); color:var(--grey-500); margin-top:3px;}
.mod__chev{width:16px; height:16px; stroke-width:2.5; color:var(--grey-500);
  flex-shrink:0; transition:transform .2s;}
.mod[data-open="true"] .mod__chev{transform:rotate(180deg);}
.mod__body{display:none; border-top:1px solid var(--grey-200); padding:var(--s2) 0;}
.mod[data-open="true"] .mod__body{display:block;}

.lesson{width:100%; display:flex; align-items:center; gap:var(--s4);
  padding:var(--s3) var(--s5) var(--s3) 64px; text-align:left; transition:background .15s;}
.lesson:hover{background:var(--emerald-08);}
.lesson[aria-disabled="true"]{cursor:not-allowed; opacity:.55;}
.lesson[aria-disabled="true"]:hover{background:none;}
.lesson__icon{width:26px; height:26px; border-radius:var(--r-sm); flex-shrink:0;
  display:grid; place-items:center; background:var(--grey-100); color:var(--grey-500);}
.lesson__icon svg{width:13px; height:13px; stroke-width:2;}
.lesson[data-done="true"] .lesson__icon{background:var(--emerald-08); color:var(--emerald);}
.lesson[data-active="true"]{background:var(--emerald-08);}
.lesson[data-active="true"] .lesson__name{color:var(--emerald);}
.lesson__name{flex:1; font-size:var(--fs-sm); font-weight:600; min-width:0;}
.lesson__dur{font-size:var(--fs-cap); color:var(--grey-500); font-weight:600; flex-shrink:0;}
.lesson__score{font-size:var(--fs-cap); font-weight:700; color:var(--emerald); flex-shrink:0;}

/* ══════════════════════════════════════════════════════════════════
   14 · LESSON PLAYER
   ══════════════════════════════════════════════════════════════════ */
.player{display:grid; grid-template-columns:1fr 320px; gap:var(--s6); align-items:start;}
@media (max-width:1000px){ .player{grid-template-columns:1fr;} }
.stage{background:var(--carbon); border-radius:var(--r-lg); aspect-ratio:16/9;
  display:grid; place-items:center; position:relative; overflow:hidden;}
.stage::after{content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 20%,var(--emerald-14) 0%,transparent 60%);}
.stage__play{position:relative; width:66px; height:66px; border-radius:50%;
  background:var(--white); display:grid; place-items:center; box-shadow:0 4px 20px rgba(0,0,0,.3);
  transition:transform .15s;}
.stage__play:hover{transform:scale(1.06);}
.stage__play svg{width:22px; height:22px; fill:var(--emerald); stroke:none; margin-left:3px;}
.stage__note{position:absolute; bottom:var(--s4); left:0; right:0; text-align:center;
  color:#8A8A8A; font-size:var(--fs-cap); font-weight:600;}
.player__bar{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); margin-top:var(--s5); flex-wrap:wrap;}
.player__nav{display:flex; gap:var(--s3);}
.icon-btn{display:inline-flex; align-items:center; gap:var(--s2); padding:9px var(--s4);
  border:1px solid var(--grey-200); border-radius:var(--r-full); background:var(--white);
  font-size:var(--fs-sm); font-weight:700; transition:background .15s,border-color .15s;}
.icon-btn:hover{background:var(--grey-100);}
.icon-btn[aria-pressed="true"]{background:var(--emerald-08); border-color:var(--emerald); color:var(--emerald);}
.icon-btn svg{width:15px; height:15px; stroke-width:2.5;}
.icon-btn[disabled]{opacity:.4; cursor:not-allowed;}
.notes{margin-top:var(--s6);}
.notes h3{margin-bottom:var(--s3);}
.notes p{font-size:var(--fs-base); color:#4A4A4A; margin-bottom:var(--s4);}
.notes ul{display:grid; gap:var(--s2); margin-bottom:var(--s4);}
.notes ul li{display:flex; gap:var(--s3); font-size:var(--fs-base); color:#4A4A4A;}
.notes ul li::before{content:"·"; color:var(--emerald); font-weight:800; flex-shrink:0;}
.outline{max-height:560px; overflow-y:auto;}
.outline__head{padding:var(--s4) var(--s5); border-bottom:1px solid var(--grey-200);}
.outline__title{font-size:var(--fs-sm); font-weight:700;}
.outline__meta{font-size:var(--fs-cap); color:var(--grey-500); margin-top:3px;}

/* ══════════════════════════════════════════════════════════════════
   15 · MOCK PAPERS + RESULT
   ══════════════════════════════════════════════════════════════════ */
.paper{display:flex; align-items:center; gap:var(--s4); padding:var(--s5);
  border-bottom:1px solid var(--grey-200); text-align:left; width:100%;}
.paper:last-child{border-bottom:0;}
.paper__n{width:34px; height:34px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--grey-100); color:var(--grey-500); display:grid; place-items:center;
  font-weight:800; font-size:13px;}
.paper[data-done="true"] .paper__n{background:var(--emerald-08); color:var(--emerald);}
.paper__body{flex:1; min-width:0;}
.paper__name{font-size:var(--fs-base); font-weight:700;}
.paper__meta{font-size:var(--fs-cap); color:var(--grey-500); margin-top:3px;}
.paper__score{text-align:right; flex-shrink:0;}
.paper__scoreVal{font-size:var(--fs-lg); font-weight:800; letter-spacing:-.02em;}
.paper__scoreLbl{font-size:10.5px; color:var(--grey-500); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;}

.result{background:var(--carbon); color:var(--white); border-radius:var(--r-xl);
  padding:var(--s8); display:flex; align-items:center; gap:var(--s8);
  flex-wrap:wrap; position:relative; overflow:hidden; margin-bottom:var(--s6);}
.result::after{content:""; position:absolute; right:-70px; top:-120px; width:300px; height:300px;
  border-radius:50%; background:radial-gradient(circle,var(--emerald-14) 0%,transparent 68%);}
.result__score{position:relative; font-size:64px; font-weight:800; letter-spacing:-.04em; line-height:1;}
.result__body{position:relative; flex:1; min-width:240px;}
.result__verdict{font-size:var(--fs-h3); font-weight:800; letter-spacing:-.02em; color:var(--white);}
.result__verdict--pass{color:var(--mint);}
.result__note{color:#C9C9C9; font-size:var(--fs-sm); margin-top:var(--s3); max-width:52ch;}
.badge-first{display:inline-block; background:var(--mint); color:var(--carbon);
  padding:4px 10px; border-radius:var(--r-full); font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--s3);}

.subj{display:grid; gap:var(--s4);}
.subj__row{display:grid; grid-template-columns:1fr 62px; gap:var(--s4); align-items:center;}
.subj__name{font-size:var(--fs-sm); font-weight:600;}
.subj__bar{height:7px; border-radius:var(--r-full); background:var(--grey-200);
  overflow:hidden; margin-top:6px;}
.subj__fill{height:100%; border-radius:var(--r-full); transition:width .5s ease;}
.subj__pct{font-size:var(--fs-base); font-weight:800; text-align:right; letter-spacing:-.02em;}
.subj__row[data-weak="true"] .subj__name{color:#A8471F;}

/* ══════════════════════════════════════════════════════════════════
   16 · ARTICLE + CHECKLIST
   ══════════════════════════════════════════════════════════════════ */
.prose{max-width:68ch;}
.prose h2{font-size:var(--fs-h3); margin:var(--s8) 0 var(--s3);}
.prose p{font-size:var(--fs-lg); line-height:1.7; color:#3E3E3E; margin-bottom:var(--s4);}
.prose ul{display:grid; gap:var(--s2); margin:0 0 var(--s5);}
.prose ul li{display:flex; gap:var(--s3); font-size:var(--fs-lg); line-height:1.65; color:#3E3E3E;}
.prose ul li::before{content:"·"; color:var(--emerald); font-weight:800;}
.prose__lead{font-size:20px; line-height:1.6; color:var(--carbon); font-weight:500;}
.checklist{display:grid; gap:var(--s3);}
.checklist li{display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--fs-base);
  padding:var(--s4); background:var(--grey-100); border-radius:var(--r-sm);}
.checklist svg{width:17px; height:17px; stroke-width:2.5; color:var(--emerald);
  flex-shrink:0; margin-top:2px;}
.steps-num{display:grid; gap:var(--s4); counter-reset:st;}
.steps-num li{display:flex; gap:var(--s4); counter-increment:st;}
.steps-num li::before{content:counter(st); width:28px; height:28px; border-radius:50%;
  background:var(--emerald); color:var(--white); display:grid; place-items:center;
  font-size:13px; font-weight:800; flex-shrink:0;}
.steps-num strong{display:block; font-size:var(--fs-base);}
.steps-num span{font-size:var(--fs-sm); color:var(--grey-500);}

/* clickable journey step */
.step--link{cursor:pointer;}
.step--link:hover .step__label{color:var(--emerald);}


/* ══════════════════════════════════════════════════════════════════
   19 · SIGNED-OUT HEADER
   ══════════════════════════════════════════════════════════════════ */
.authBtns{display:flex; align-items:center; gap:var(--s2); margin-left:auto; flex-shrink:0;}
.authBtns .btn{padding:9px var(--s5); font-size:var(--fs-sm);}
@media (max-width:620px){
  .authBtns .btn{padding:8px var(--s4); font-size:var(--fs-cap);}
  /* the ghost button is the lower-value action, so it goes first at 380px */
  .authBtns .btn--ghost{padding:8px var(--s3);}
}
/* Signed out, the header carries two buttons as well as the menu. Below 440px
   the wordmark gives way to the mark alone rather than everything crowding. */
@media (max-width:440px){
  body[data-session="out"] .brand__text{ display:none; }
  body[data-session="out"] .brand__mark{ width:24px; }
}
@media (max-width:340px){ .authBtns .btn--ghost{ display:none; } }

/* profile menu, so signing out is reachable */
.userWrap{position:relative; margin-left:var(--s4);}
.menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:196px; z-index:60;
  background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-md);
  box-shadow:0 6px 24px rgba(45,45,45,.12); padding:var(--s2); display:none;
}
.menu[data-open="true"]{display:block;}
.menu__head{padding:var(--s3) var(--s3) var(--s2); border-bottom:1px solid var(--grey-200);
  margin-bottom:var(--s2);}
.menu__name{font-size:var(--fs-sm); font-weight:700;}
.menu__meta{font-size:var(--fs-cap); color:var(--grey-500); margin-top:1px;}
.menu__item{
  width:100%; display:flex; align-items:center; gap:var(--s3); text-align:left;
  padding:var(--s3); border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600;
}
.menu__item:hover{background:var(--grey-100);}
.menu__item svg{width:15px; height:15px; stroke-width:2; color:var(--grey-500);}
.menu__item--danger{color:#B3261E;}
.menu__item--danger svg{color:#B3261E;}

/* ══════════════════════════════════════════════════════════════════
   20 · LANDING PAGE  (signed out)
   ══════════════════════════════════════════════════════════════════ */
.lp-hero{
  background:var(--carbon); color:var(--white); position:relative; overflow:hidden;
}
.lp-hero::after{
  content:""; position:absolute; right:-140px; top:-180px; width:620px; height:620px;
  border-radius:50%; background:radial-gradient(circle,var(--emerald-14) 0%,transparent 66%);
  pointer-events:none;
}
.lp-hero__inner{
  max-width:var(--maxw); margin:0 auto; padding:var(--s16) var(--s5);
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s12); align-items:center;
  position:relative;
}
.lp-h1{font-size:clamp(34px,4.8vw,56px); font-weight:800; line-height:1.06; letter-spacing:-.03em;}
.lp-h1 em{font-style:normal; color:var(--emerald-bright);}
.lp-sub{font-size:var(--fs-lg); color:#C3C3C3; margin-top:var(--s6); max-width:46ch; line-height:1.55;}
.lp-cta{display:flex; gap:var(--s3); margin-top:var(--s8); flex-wrap:wrap;}
.lp-cta--center{justify-content:center;}
.btn--outline{background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.28);}
.btn--outline:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45);}

/* the hero's product card: "My learning" as an illustration, composed rather than a screenshot */
.lp-card{background:var(--white); border-radius:var(--r-xl); color:var(--carbon); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35); width:100%; max-width:480px; margin-left:auto; text-align:left;}
.lp-card__top{padding:var(--s6) var(--s6) var(--s5);}
.lp-card__head{display:flex; justify-content:space-between; align-items:center; gap:var(--s3);}
.lp-card__eyebrow{font-size:var(--fs-cap); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-500);}
.lp-card__eyebrow--em{color:var(--emerald);}
.lp-card__chip{padding:4px 10px; border-radius:var(--r-full); background:var(--emerald-08); color:var(--emerald);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;}
.lp-card__progress{display:flex; justify-content:space-between; align-items:baseline; margin-top:var(--s4);}
.lp-card__pct{font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1;}
.lp-card__pct small{font-size:22px;}
.lp-card__where{font-size:var(--fs-sm); font-weight:600; color:var(--grey-500);}
.lp-card__bar{height:6px; border-radius:var(--r-full); background:var(--grey-200); margin-top:var(--s3); overflow:hidden;}
.lp-card__bar i{display:block; height:100%; background:var(--emerald); border-radius:inherit;}
.lp-card__rows{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s3);}
.lp-card__row{display:flex; align-items:center; gap:var(--s3); font-size:var(--fs-sm);}
.lp-card__dot{width:22px; height:22px; border-radius:50%; border:2px solid var(--grey-200); display:grid; place-items:center;
  flex-shrink:0; color:var(--white);}
.lp-card__dot svg{width:12px; height:12px; stroke-width:3;}
.lp-card__row[data-state="done"] .lp-card__dot{background:var(--emerald); border-color:var(--emerald);}
.lp-card__row[data-state="current"] .lp-card__dot{border-color:var(--emerald);}
.lp-card__label{font-weight:700;}
.lp-card__row[data-state="todo"] .lp-card__label{color:var(--grey-500); font-weight:600;}
.lp-card__meta{margin-left:auto; font-size:var(--fs-cap); color:var(--grey-500); text-align:right;}
.lp-card__row[data-state="current"] .lp-card__meta{color:var(--emerald); font-weight:700;}
.lp-card__next{background:var(--emerald-08); border-top:1px solid var(--emerald-14); padding:var(--s5) var(--s6);}
.lp-card__nextT{font-size:var(--fs-lg); font-weight:800; letter-spacing:-.02em; margin-top:var(--s1);}
.lp-card__nextD{font-size:var(--fs-sm); color:var(--grey-500); margin-top:2px;}

@media (max-width:980px){
  .lp-hero__inner{grid-template-columns:1fr; gap:var(--s10); padding:var(--s12) var(--s5);}
  .lp-card{margin:0 auto;}
}
@media (max-width:620px){
  .lp-hero__inner{padding:var(--s10) var(--s4);}
  .lp-sub{font-size:var(--fs-base);}
  .lp-cta{gap:var(--s2);}
  .lp-cta .btn{width:100%;}
  .lp-card__pct{font-size:36px;}
  .lp-card__top, .lp-card__next{padding-left:var(--s5); padding-right:var(--s5);}
}

/* stats strip */
.lp-strip{background:var(--white); border-bottom:1px solid var(--grey-200);}
.lp-strip__inner{max-width:var(--maxw); margin:0 auto; padding:var(--s8) var(--s5);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); text-align:center;}
.lp-strip__n{font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--emerald);}
.lp-strip__l{font-size:var(--fs-cap); color:var(--grey-500); font-weight:600; margin-top:4px;}
@media (max-width:620px){
  .lp-strip__inner{grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s4); padding:var(--s6) var(--s4);}
  .lp-strip__n{font-size:24px;}
}

/* generic centred section head */
.lp-sec{padding:var(--s16) 0;}
.lp-sec--tint{background:var(--white);}
.lp-head{text-align:center; max-width:62ch; margin:0 auto var(--s10);}
.lp-pill{display:inline-block; padding:5px 14px; border-radius:var(--r-full);
  background:var(--emerald-08); color:var(--emerald);
  font-size:var(--fs-cap); font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
.lp-h2{font-size:var(--fs-h2); font-weight:800; letter-spacing:-.025em; margin-top:var(--s4);}
.lp-lead{color:var(--grey-500); font-size:var(--fs-base); margin-top:var(--s3);}
@media (max-width:620px){ .lp-sec{padding:var(--s10) 0;} .lp-head{margin-bottom:var(--s6);} }

/* how-it-works step cards */
.how{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-lg); padding:var(--s8) var(--s6);}
.how__top{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s6);}
.how__icon{width:48px; height:48px; border-radius:var(--r-md); background:var(--emerald-08); color:var(--emerald);
  display:grid; place-items:center; flex-shrink:0;}
.how__icon svg{width:22px; height:22px; stroke-width:2;}
.how__n{font-size:var(--fs-sm); font-weight:700; letter-spacing:.12em; color:var(--grey-500);}
.how__t{font-size:var(--fs-lg); font-weight:700; letter-spacing:-.01em;}
.how__d{font-size:var(--fs-sm); color:var(--grey-500); margin-top:var(--s2); line-height:1.6;}

/* testimonial */
.quote{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-lg);
  padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4);}
.quote__stars{display:flex; gap:2px; color:var(--gold);}
.quote__stars svg{width:14px; height:14px; fill:currentColor; stroke:none;}
.quote__body{font-size:var(--fs-sm); color:#3E3E3E; flex:1; line-height:1.6;}
.quote__who{display:flex; align-items:center; gap:var(--s3); padding-top:var(--s4);
  border-top:1px solid var(--grey-200);}
.quote__av{width:36px; height:36px; border-radius:50%; background:var(--emerald-08);
  color:var(--emerald); display:grid; place-items:center; font-weight:800; font-size:13px; flex-shrink:0;}
.quote__n{font-size:var(--fs-sm); font-weight:700;}
.quote__r{font-size:var(--fs-cap); color:var(--grey-500);}

/* closing band */
.lp-band{background:var(--carbon); color:var(--white); position:relative; overflow:hidden;}
.lp-band::after{content:""; position:absolute; left:-120px; bottom:-200px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle,var(--emerald-14) 0%,transparent 68%);}
.lp-band__inner{max-width:var(--maxw); margin:0 auto; padding:var(--s16) var(--s5);
  text-align:center; position:relative;}
.lp-band__icon{width:44px; height:44px; margin:0 auto var(--s5); color:var(--emerald-bright);}
.lp-band__icon svg{width:44px; height:44px; stroke-width:1.6;}
.lp-band__t{font-size:var(--fs-h2); font-weight:800; letter-spacing:-.025em; max-width:24ch; margin:0 auto;}
.lp-band__t em{font-style:normal; color:var(--emerald-bright);}
@media (max-width:620px){ .lp-band__inner{padding:var(--s10) var(--s4);} }


/* ══════════════════════════════════════════════════════════════════
   21 · AUTH  (sign up and sign in)
   One page for both: a dark side panel with the promise, the form on
   the right on white. Sign-up is two steps (name + mobile, then code +
   what you do + PIN code); sign-in is mobile, then code. The code is
   six boxes that behave as one field (bindCode in auth.js).
   ══════════════════════════════════════════════════════════════════ */
.auth{min-height:calc(100vh - var(--header-h)); display:grid; grid-template-columns:minmax(0,48fr) minmax(0,52fr);}
.auth__side{background:var(--carbon); color:var(--white); position:relative; overflow:hidden;
  display:flex; flex-direction:column; padding:var(--s16) var(--s10);}
.auth__side::after{content:""; position:absolute; right:-160px; top:-200px; width:560px; height:560px;
  border-radius:50%; background:radial-gradient(circle,var(--emerald-14) 0%,transparent 66%); pointer-events:none;}
.auth__sideInner{position:relative; margin:auto 0; max-width:34rem;}
.auth__sideT{font-size:clamp(30px,3.6vw,44px); font-weight:800; line-height:1.08; letter-spacing:-.03em;}
.auth__sideT em{font-style:normal; color:var(--emerald-bright);}
.auth__points{list-style:none; margin:var(--s8) 0 0; padding:0; display:grid; gap:var(--s4);
  font-size:var(--fs-base); color:#D6D6D6;}
.auth__points li{display:flex; align-items:center; gap:var(--s3);}
.auth__points svg{width:22px; height:22px; padding:4px; border-radius:50%; background:var(--emerald-14);
  color:var(--emerald-bright); stroke-width:3; flex-shrink:0;}
.auth__sideNote{position:relative; padding-top:var(--s10); font-size:var(--fs-cap); color:#8A8A8A;
  max-width:44ch; line-height:1.6;}
.auth__main{background:var(--white); display:flex; align-items:center; justify-content:center;
  padding:var(--s16) var(--s8);}
.auth__form{width:100%; max-width:440px;}
.auth__title{font-size:30px; font-weight:800; letter-spacing:-.03em; margin-bottom:var(--s6);}
.auth__submit{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); width:100%;
  padding:15px var(--s6); border-radius:var(--r-full); font-size:var(--fs-base);}
.auth__submit:disabled{opacity:.55; cursor:not-allowed;}
.auth__back{display:inline-flex; align-items:center; gap:var(--s2); margin-bottom:var(--s5); padding:0;
  font-size:var(--fs-sm); font-weight:600; color:var(--grey-500);}
.auth__back svg{width:16px; height:16px; stroke-width:2;}
.auth__back:hover{color:var(--carbon);}
.auth__alt{text-align:center; font-size:var(--fs-sm); color:var(--grey-500); margin-top:var(--s5);}
.auth__alt a{color:var(--emerald); font-weight:700; cursor:pointer;}
.auth__agree{text-align:center; font-size:var(--fs-cap); color:var(--grey-500); line-height:1.6;
  margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--grey-200);}
.auth__agree a{color:var(--emerald); font-weight:700;}

.f{margin-bottom:var(--s5);}
.f__label{display:block; font-size:var(--fs-sm); font-weight:700; margin-bottom:var(--s2);}
.f__input{width:100%; padding:13px var(--s4); border:1.5px solid var(--grey-200);
  border-radius:var(--r-md); font-family:inherit; font-size:var(--fs-base);
  color:var(--carbon); background:var(--white); transition:border-color .15s;}
.f__input:focus{outline:none; border-color:var(--emerald);}
.f__input::placeholder{color:var(--grey-500);}
.f__select{cursor:pointer; padding-right:var(--s10);}
.prefixed{display:flex; align-items:stretch; border:1.5px solid var(--grey-200);
  border-radius:var(--r-md); overflow:hidden; background:var(--white);}
.prefixed:focus-within{border-color:var(--emerald);}
.prefixed__tag{display:grid; place-items:center; padding:0 12px; background:var(--grey-100);
  border-right:1.5px solid var(--grey-200); font-weight:700; font-size:var(--fs-base);
  color:var(--grey-500); white-space:nowrap;}
.prefixed__input{flex:1; min-width:0; border:0; outline:none; padding:13px var(--s4);
  font-family:inherit; font-size:var(--fs-base); color:var(--carbon); background:none;}
.prefixed__input::placeholder{color:var(--grey-500);}

.f__hint{font-size:var(--fs-cap); color:var(--grey-500); margin-top:var(--s2);}
.f__hint a{color:var(--emerald); font-weight:700; cursor:pointer;}
.f__error{font-size:var(--fs-cap); color:#B3261E; font-weight:600; margin-top:var(--s2);}

/* the one-time code as six boxes */
.otp{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s3);}
.otp__box{width:100%; min-width:0; height:56px; text-align:center; font-family:inherit; font-size:22px; font-weight:700;
  color:var(--carbon); background:var(--white); border:1.5px solid var(--grey-200); border-radius:var(--r-md);}
.otp__box:focus{outline:none; border-color:var(--emerald);}

.choice{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3);}
@media (max-width:380px){ .choice{grid-template-columns:1fr;} }
.choice button{padding:12px; border:1.5px solid var(--grey-200); border-radius:var(--r-md);
  font-weight:700; font-size:var(--fs-sm); color:var(--grey-500); background:var(--white);}
.choice button[aria-pressed="true"]{border-color:var(--emerald); color:var(--emerald);
  background:var(--emerald-08);}

@media (max-width:900px){
  .auth{grid-template-columns:1fr; min-height:0;}
  .auth__side{padding:var(--s8) var(--s5);}
  .auth__sideInner{margin:0;}
  .auth__sideT{font-size:26px;}
  .auth__points{margin-top:var(--s5); gap:var(--s3); font-size:var(--fs-sm);}
  .auth__sideNote{display:none;}
  .auth__main{padding:var(--s8) var(--s4) var(--s10);}
}
@media (max-width:620px){
  .auth__points{display:none;}
  .auth__title{font-size:26px;}
  .otp{gap:var(--s2);}
  .otp__box{height:50px; font-size:20px;}
}

/* ══════════════════════════════════════════════════════════════════
   17 · FOOTER
   ══════════════════════════════════════════════════════════════════ */
.footer{background:var(--carbon); color:#B5B5B5; margin-top:var(--s16); padding:var(--s10) 0 var(--s8); position:relative; overflow:hidden;}
/* soft green glow in the footer's top-left corner, matching the closing band above it (design, 10 Sep 2026) */
.footer::after{content:""; position:absolute; left:-140px; top:-240px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,var(--emerald-14) 0%,transparent 68%); pointer-events:none;}
.footer > .wrap{position:relative; z-index:1;}
.footer__top{display:flex; justify-content:space-between; gap:var(--s8); flex-wrap:wrap;
  padding-bottom:var(--s6); border-bottom:1px solid rgba(255,255,255,.12);}
.footer__tag{font-size:var(--fs-sm); max-width:40ch; margin-top:var(--s3);}
.footer__links{display:flex; gap:var(--s6); font-size:var(--fs-sm); font-weight:600;}
.footer__links a:hover{color:var(--white);}
.footer__legal{margin-top:var(--s6); font-size:11.5px; color:#8A8A8A; line-height:1.6; max-width:88ch;}
.footer .brand__name{color:var(--white);}
.footer .brand__sub{color:#8A8A8A;}
/* "Connect with us": icons appear only for the links set in the admin (footer content block) */
.footer__social{margin-top:var(--s6); display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;}
.footer__socialT{font-size:var(--fs-sm); font-weight:700; color:var(--white);}
.footer__icons{display:flex; gap:var(--s3);}
.footer__icons a{width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#B5B5B5;}
.footer__icons a:hover{color:var(--white); background:rgba(255,255,255,.14);}
.footer__icons svg{width:18px; height:18px; fill:currentColor;}
/* "My learning" in the footer is for signed-in learners only */
body[data-session="out"] .footer__links [data-signed-in]{display:none;}

/* ══════════════════════════════════════════════════════════════════
   18 · MOBILE REFINEMENTS
   Consolidated so mobile behaviour is in one place rather than
   scattered across component blocks. Target device is a mid-range
   Android handset, 360 to 400px, which is most of our audience.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  :root{ --header-h:56px; }

  /* the header runs out of room once the auth buttons appear. Drop the
     strapline first, then tighten the gap, before touching the buttons. */
  .header__inner{ gap:var(--s3); }
  /* nav is off-canvas here, so the toggle claims the free space and the
     auth cluster sits tight against it on the right */
  .authBtns{ margin-left:var(--s3); }
  .brand__name{ font-size:14px; }
  .brand__mark{ width:20px; }

  /* tighter gutters: 20px each side wastes a lot of a 360px screen */
  .wrap, .header__inner{ padding:0 var(--s4); }
  .page{ padding-top:var(--s5); padding-bottom:var(--s10); }

  /* cards earn their padding back */
  .card{ padding:var(--s5); border-radius:var(--r-md); }
  .section{ margin-top:var(--s6); }

  /* the orphan 5th stat tile left a hole beside it. 2-up, last spans full. */
  .stats{ grid-template-columns:repeat(2,1fr); gap:var(--s3); margin-bottom:var(--s6); }
  .stat{ padding:var(--s4); }
  .stat:last-child{ grid-column:1 / -1; display:flex; align-items:baseline;
    justify-content:space-between; }
  .stat:last-child .stat__label{ margin-bottom:0; }
  .stat__value{ font-size:22px; }

  /* promo banner: the stat was floating away from the copy */
  .promo{ padding:var(--s5); gap:var(--s4); border-radius:var(--r-lg); }
  .promo__aside{ display:flex; align-items:baseline; gap:var(--s3);
    padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.14); width:100%; }
  .promo__stat{ font-size:38px; }
  .promo__statLabel{ font-size:10.5px; }

  /* journey rail: two columns removes six near-empty rows */
  .journey{ padding:var(--s5); }
  .journey__head{ margin-bottom:var(--s5); }
  .rail{ grid-template-columns:1fr 1fr; gap:var(--s4) var(--s3); }
  .step{ gap:var(--s3); }
  .step__dot{ width:24px; height:24px; font-size:10.5px; }
  .step__label{ font-size:11.5px; }

  /* syllabus: a 64px indent left almost nothing for the lesson title */
  .lesson{ padding-left:var(--s8); padding-right:var(--s4); gap:var(--s3); }
  .lesson__name{ line-height:1.35; }
  .lesson__dur, .lesson__score{ font-size:11px; flex-shrink:0; }
  .mod__head{ padding:var(--s4); gap:var(--s3); }
  .mod__name{ font-size:14.5px; line-height:1.3; }

  /* the lesson counter was sitting flush against the viewport edge.
     stacking it also stops the heading being squeezed. */
  .section__head{ flex-direction:column; align-items:flex-start; gap:var(--s1); }

  /* hero and any sticky side rail on the course and player screens */
  .hero{ padding:var(--s5); border-radius:var(--r-lg); }
  .detail__aside, .outline{ position:static; max-height:none; }
  /* what's included and the enrol card ahead of the syllabus on mobile (tech review) */
  .detail{ display:flex; flex-direction:column; }
  .detail__aside{ order:-1; }

  /* empty states were taller than the content around them */
  .empty{ padding:var(--s8) var(--s4); }
  .card > .empty{ padding:var(--s6) var(--s4); }
  .empty__icon{ width:44px; height:44px; margin-bottom:var(--s3); }

  /* meta rows wrap rather than squeeze */
  .meta{ gap:var(--s2) var(--s4); }
}

@media (max-width:400px){
  .promo__title{ font-size:19px; }
  .page__title{ font-size:23px; }
  .step__label{ font-size:11px; }
}

@media (max-width:339px){
  /* only below entry-level Android does the rail need one column */
  .rail{ grid-template-columns:1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   M1 additions: loading, toasts, consent, attempt screen, review
   ══════════════════════════════════════════════════════════════════ */
main[data-loading="true"]{opacity:.55; pointer-events:none; transition:opacity .15s;}
.loadbar{position:fixed; top:0; left:0; height:3px; width:0; background:var(--emerald-bright); z-index:200; transition:width .3s, opacity .3s; opacity:0;}
.loadbar[data-on="true"]{width:70%; opacity:1;}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); z-index:300;
  background:var(--carbon); color:var(--white); padding:12px 18px; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:min(92vw,520px); text-align:center;}
.toast[data-show="true"]{opacity:1; transform:translateX(-50%) translateY(0);}
.toast--error{background:#8C3A1E;}

.consent{display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--fs-sm); color:var(--grey-500); margin-top:var(--s4); cursor:pointer;}
.consent input{margin-top:3px; width:16px; height:16px; accent-color:var(--emerald); flex-shrink:0;}
.consent a{color:var(--emerald); font-weight:700;}

.notice{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) var(--s4); border-radius:var(--r-md);
  background:var(--emerald-08); color:var(--carbon); font-size:var(--fs-sm); border:1px solid rgba(10,107,76,.15);}
.notice svg{width:16px; height:16px; stroke-width:2.5; color:var(--emerald); flex-shrink:0; margin-top:2px;}
.notice--warn{background:#FBE7DC; border-color:#F2C9AF;}
.notice--warn svg{color:#A8471F;}

/* ── attempt (test taking) ── */
.att{display:grid; grid-template-columns:1fr 300px; gap:var(--s6); align-items:start;}
.att__head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5);}
.att__title{font-size:var(--fs-h3); font-weight:800; letter-spacing:-.02em;}
.att__meta{font-size:var(--fs-cap); color:var(--grey-500); font-weight:600; margin-top:2px;}
.att__timer{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-full);
  background:var(--white); border:1px solid var(--grey-200); font-weight:800; font-variant-numeric:tabular-nums; font-size:var(--fs-base);}
.att__timer svg{width:15px; height:15px; stroke-width:2.5; color:var(--emerald);}
.att__timer[data-low="true"]{border-color:#C4622D; color:#A8471F; background:#FBE7DC;}
.att__timer[data-low="true"] svg{color:#A8471F;}
.att__q{min-height:320px;}
.att__qn{font-size:var(--fs-cap); font-weight:700; color:var(--grey-500); letter-spacing:.06em; text-transform:uppercase; display:flex; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3);}
.att__qtext{font-size:var(--fs-lg); font-weight:700; letter-spacing:-.01em; line-height:1.45; margin-bottom:var(--s5);}
.att__opts{display:grid; gap:var(--s3);}
.att__opt{display:flex; gap:var(--s3); align-items:flex-start; text-align:left; padding:14px var(--s4); border:1px solid var(--grey-200);
  border-radius:var(--r-md); background:var(--white); font-size:var(--fs-base); line-height:1.4; cursor:pointer; transition:border-color .12s, background .12s;}
.att__opt:hover{border-color:var(--emerald);}
.att__opt[aria-pressed="true"]{border-color:var(--emerald); background:var(--emerald-08); font-weight:600;}
.att__optKey{flex-shrink:0; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--grey-100); color:var(--grey-500); font-size:var(--fs-cap); font-weight:800;}
.att__opt[aria-pressed="true"] .att__optKey{background:var(--emerald); color:var(--white);}
.att__foot{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); margin-top:var(--s6); flex-wrap:wrap;}
.att__foot > div{display:flex; gap:var(--s3); flex-wrap:wrap;}
.icon-btn[aria-pressed="true"]{color:#A8471F; border-color:#F2C9AF; background:#FBE7DC;}
.att__save{font-size:var(--fs-cap); color:var(--grey-500); font-weight:600;}
.qnav{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
.qnav button{aspect-ratio:1; border-radius:var(--r-sm); border:1px solid var(--grey-200); background:var(--white); font-weight:700; font-size:var(--fs-cap); cursor:pointer; position:relative;}
.qnav button[data-answered="true"]{background:var(--emerald); border-color:var(--emerald); color:var(--white);}
.qnav button[data-flagged="true"]::after{content:""; position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:#C4622D;}
.qnav button[data-current="true"]{outline:2px solid var(--carbon); outline-offset:1px;}
.qlegend{display:grid; gap:6px; margin-top:var(--s4); font-size:var(--fs-cap); color:var(--grey-500); font-weight:600;}
.qlegend span{display:inline-flex; align-items:center; gap:8px;}
.qlegend i{width:12px; height:12px; border-radius:3px; border:1px solid var(--grey-200); display:inline-block;}
.qlegend i[data-k="a"]{background:var(--emerald); border-color:var(--emerald);}
.qlegend i[data-k="f"]{background:#C4622D; border-color:#C4622D; border-radius:50%;}
@media (max-width:860px){ .att{grid-template-columns:1fr;} .att__aside{order:-1;} .qnav{grid-template-columns:repeat(10,1fr);} }

/* ── review after an attempt ── */
.rev__mark{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-left:auto; white-space:nowrap;}
.rev__expl{margin-top:var(--s3); padding-top:var(--s3); border-top:1px dashed var(--grey-200); font-size:var(--fs-sm); color:var(--grey-500); line-height:1.55;}
.rev__expl b{color:var(--carbon);}
.pill-filter{display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--s4);}
.pill-filter button{padding:6px 12px; border-radius:var(--r-full); border:1px solid var(--grey-200); background:var(--white); font-size:var(--fs-cap); font-weight:700; cursor:pointer;}
.pill-filter button[aria-pressed="true"]{background:var(--carbon); color:var(--white); border-color:var(--carbon);}
.inlineForm{display:flex; gap:8px; margin-top:var(--s3);}
.inlineForm input{flex:1; min-width:0; padding:10px 12px; border:1px solid var(--grey-200); border-radius:var(--r-sm); font:inherit; font-size:var(--fs-sm);}

/* courses: with the search/sort toolbar gone, the category row follows the heading directly and takes its breathing room */
.page__head + .cats{margin-top:var(--s8);}

/* ══════════════════════════════════════════════════════════════════
   BODY BLOCKS BEYOND h2 AND p — sub-headings, numbered steps, note boxes
   (renderBlocks in core.js; written by the admin's Legal and Blog editors)
   ══════════════════════════════════════════════════════════════════ */
.prose h3{font-size:var(--fs-base); font-weight:700; color:var(--carbon); margin:var(--s5) 0 var(--s2);}
.prose ol{display:grid; gap:var(--s2); margin:0 0 var(--s5); padding-left:var(--s5); list-style:decimal;}
.prose ol li{font-size:var(--fs-lg); line-height:1.65; color:#3E3E3E;}
.prose__note{background:var(--emerald-08); border-left:3px solid var(--emerald); border-radius:var(--r-sm);
  padding:var(--s4) var(--s5); margin:0 0 var(--s5); font-size:var(--fs-base); line-height:1.65; color:var(--carbon);}
.prose strong{font-weight:700; color:var(--carbon);}

/* ══════════════════════════════════════════════════════════════════
   MEDIA IN BODY TEXT — images, uploaded video, YouTube (renderBlocks in core.js)
   ══════════════════════════════════════════════════════════════════ */
.prose__media{margin:0 0 var(--s5);}
.prose__media img,.prose__media iframe{display:block; width:100%; max-width:100%; border:0;
  border-radius:var(--r-sm); background:var(--grey-100);}
.prose__media iframe{aspect-ratio:16/9; height:auto;}
.prose__media figcaption{margin-top:var(--s2); font-size:var(--fs-sm); color:var(--grey-500); line-height:1.5;}

/* ══════════════════════════════════════════════════════════════════
   BLOG ARTICLE — same shape as the course and lesson pages: text on the
   left, a 320px aside on the right. The aside itself is sticky inside a
   top-aligned grid, so the one call-to-action card rides along while the
   article is longer than the screen and stops at the article's end.
   Under 1000px the grid is one column and the card sits below the text.
   ══════════════════════════════════════════════════════════════════ */
.article{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s10); align-items:start;}
.article__main{min-width:0;}
.article__aside{position:sticky; top:calc(var(--header-h) + var(--s5));}
.article__cta{background:var(--carbon); border:0; color:#fff;}
.article__ctaTitle{font-weight:800; font-size:18px; letter-spacing:-.02em;}
.article__ctaText{color:#C9C9C9; font-size:14px; margin:8px 0 18px;}
@media (max-width:1000px){
  .article{grid-template-columns:1fr; gap:var(--s8);}
  .article__aside{position:static;}
  .article__cta{max-width:68ch;}
}

/* ══════════════════════════════════════════════════════════════════
   MODAL — the submit confirmation on the attempt screen: dimmed page,
   centred box. Above the header (50) and side panels (80), below the
   load bar (200) and toast (300). .modal[hidden] must out-rank .modal.
   ══════════════════════════════════════════════════════════════════ */
.modal{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:var(--s5);
  background:rgba(45,45,45,.55); backdrop-filter:blur(2px);}
.modal[hidden]{display:none;}
.modal__box{width:min(540px,100%); background:var(--white); border-radius:var(--r-lg); padding:28px 28px 24px;
  box-shadow:0 24px 64px rgba(0,0,0,.28); animation:modalIn .18s ease-out;}
.modal__eyebrow{font-size:var(--fs-cap); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8471F;}
.modal__title{font-size:var(--fs-h3); font-weight:800; letter-spacing:-.02em; line-height:1.35; color:var(--carbon); margin-top:var(--s2);}
.modal__actions{display:flex; gap:var(--s3); justify-content:flex-end; flex-wrap:wrap; margin-top:24px;}
@keyframes modalIn{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
@media (max-width:480px){
  .modal__box{padding:var(--s5);}
  .modal__actions{flex-direction:column-reverse;}
  .modal__actions .btn{width:100%; justify-content:center;}
}

/* ══════════════════════════════════════════════════════════════════
   REVIEW AFTER AN ATTEMPT — the attempt card, annotated. The correct
   option is green, a wrong pick is warm; the numbered grid on the right
   uses the same two colours plus grey for skipped, dims questions outside
   the current filter, and outlines the one on screen.
   ══════════════════════════════════════════════════════════════════ */
.rv__filters{margin:0 0 var(--s4);}
.rv__count{opacity:.7; font-weight:600; margin-left:2px;}
.rv__tally{font-size:12px; font-weight:700; color:var(--grey-500); letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px;}
.rv__verdict[data-ok="true"]{color:var(--emerald);}
.rv__verdict[data-ok="false"]{color:#A8471F;}
.rv__verdict[data-ok="skip"]{color:var(--grey-500);}
.rv__empty{display:grid; place-items:center; color:var(--grey-500); font-size:var(--fs-sm);}
.att__opt--review{cursor:default; color:var(--grey-500);}
.att__opt--review:hover{border-color:var(--grey-200);}
.att__opt--review[data-correct="true"]{border-color:rgba(10,107,76,.45); background:var(--emerald-08); color:var(--carbon); font-weight:600;}
.att__opt--review[data-correct="true"] .att__optKey{background:var(--emerald); color:var(--white);}
.att__opt--review[data-chosen="true"][data-correct="false"]{border-color:#F2C9AF; background:#FBE7DC; color:#5C3A18;}
.att__opt--review[data-chosen="true"][data-correct="false"] .att__optKey{background:#C4622D; color:var(--white);}
.att__opt--review .rev__mark{align-self:center; margin-left:auto;}
.qnav button[data-ok="true"]{background:var(--emerald); border-color:var(--emerald); color:var(--white);}
.qnav button[data-ok="false"]{background:#C4622D; border-color:#C4622D; color:var(--white);}
.qnav button[data-dim="true"]{opacity:.35;}
.qlegend i[data-k="w"]{background:#C4622D; border-color:#C4622D;}
.icon-btn[disabled], .btn[disabled]{opacity:.45; cursor:default;}

/* ── lesson video: an embedded YouTube player fills the stage; the stage's decorative overlay must not sit on top ── */
.stage:has(.stage__frame){display:block;}
.stage__frame{position:relative; z-index:2; display:block; width:100%; height:100%; border:0; border-radius:var(--r-lg);}
.stage:has(.stage__frame)::after, .stage:has(.introVid__player)::after{display:none;}