/* ══════════════════════════════════════════════════════════════════
   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-badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
  border-radius:var(--r-full); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  font-size:var(--fs-cap); font-weight:600; color:#D6D6D6; white-space:nowrap;
}
.lp-badge b{color:var(--emerald-bright); font-weight:700;}
.lp-h1{font-size:clamp(30px,4.4vw,50px); font-weight:800; line-height:1.08;
  letter-spacing:-.03em; margin-top:var(--s5);}
.lp-h1 em{font-style:normal; color:var(--emerald-bright);}
.lp-sub{font-size:var(--fs-lg); color:#C3C3C3; margin-top:var(--s5); max-width:46ch; line-height:1.55;}
.lp-cta{display:flex; gap:var(--s3); margin-top:var(--s8); flex-wrap:wrap;}
.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);}
.lp-trust{display:flex; gap:var(--s6); margin-top:var(--s8); flex-wrap:wrap;
  font-size:var(--fs-cap); color:#A8A8A8; font-weight:600;}
.lp-trust span{display:inline-flex; align-items:center; gap:6px;}
.lp-trust svg{width:14px; height:14px; stroke-width:2; color:var(--emerald-bright);}

/* product preview, composed rather than a screenshot */
.lp-shot{
  background:var(--white); border-radius:var(--r-lg); padding:var(--s5);
  box-shadow:0 24px 60px rgba(0,0,0,.35); transform:rotate(-1.4deg);
  color:var(--carbon);
}
.lp-shot__bar{display:flex; gap:5px; margin-bottom:var(--s4);}
.lp-shot__bar i{width:8px; height:8px; border-radius:50%; background:var(--grey-200);}
.lp-shot__bar i:first-child{background:var(--gold);}
.lp-shot__bar i:nth-child(2){background:var(--emerald-bright);}
.lp-shot__t{font-size:var(--fs-cap); font-weight:700; color:var(--grey-500);
  letter-spacing:.08em; text-transform:uppercase;}
.lp-shot__row{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s3);}
.lp-shot__cell{background:var(--grey-100); border-radius:var(--r-sm); padding:var(--s3);}
.lp-shot__k{font-size:9.5px; color:var(--grey-500); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;}
.lp-shot__v{font-size:17px; font-weight:800; letter-spacing:-.02em; margin-top:2px;}
.lp-shot__steps{display:flex; align-items:center; gap:6px; margin-top:var(--s4);}
.lp-shot__dot{width:18px; height:18px; border-radius:50%; border:2px solid var(--grey-200);
  display:grid; place-items:center; font-size:9px; font-weight:700; color:var(--grey-500); flex-shrink:0;}
.lp-shot__dot--on{background:var(--emerald); border-color:var(--emerald); color:#fff;}
.lp-shot__line{height:2px; flex:1; background:var(--grey-200);}
.lp-shot__line--on{background:var(--emerald);}

@media (max-width:980px){
  .lp-hero__inner{grid-template-columns:1fr; gap:var(--s10); padding:var(--s12) var(--s5);}
  .lp-shot{transform:none;}
}
@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-trust{gap:var(--s3) var(--s5); margin-top:var(--s6);}
}

/* 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);} }

/* why-choose cards */
.why{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-lg);
  padding:var(--s6);}
.why__icon{width:42px; height:42px; border-radius:var(--r-md); background:var(--emerald-08);
  color:var(--emerald); display:grid; place-items:center; margin-bottom:var(--s4);}
.why__icon svg{width:20px; height:20px; stroke-width:2;}
.why__t{font-size:var(--fs-lg); font-weight:700; letter-spacing:-.01em;}
.why__d{font-size:var(--fs-sm); color:var(--grey-500); margin-top:var(--s2);}
.lp-sec--tint .why{background:var(--grey-100); border-color:transparent;}

/* 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__t{font-size:var(--fs-h2); font-weight:800; letter-spacing:-.025em;}
.lp-band__t em{font-style:normal; color:var(--emerald-bright);}
.lp-band__d{color:#BDBDBD; margin-top:var(--s4); font-size:var(--fs-base);}
@media (max-width:620px){ .lp-band__inner{padding:var(--s10) var(--s4);} }


/* ══════════════════════════════════════════════════════════════════
   21 · AUTH  (sign up and sign in)
   Modelled on ZLearn's stepped flow: Mobile → Verify → Profile →
   Professional details. OTP here is a dummy — any code passes.
   ══════════════════════════════════════════════════════════════════ */
.auth{min-height:calc(100vh - var(--header-h)); display:grid; place-items:center;
  padding:var(--s8) var(--s4); background:var(--carbon); position:relative; overflow:hidden;}
.auth::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%);}
.auth__card{position:relative; width:100%; max-width:460px; background:var(--white);
  border-radius:var(--r-xl); padding:var(--s8); box-shadow:0 24px 64px rgba(0,0,0,.35);}
.auth__title{font-size:26px; font-weight:800; letter-spacing:-.03em; text-align:center;}
.auth__sub{text-align:center; color:var(--grey-500); font-size:var(--fs-sm); margin-top:var(--s2);}

.authSteps{display:flex; justify-content:center; gap:var(--s6); margin:var(--s6) 0 var(--s8);}
.astep{display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:var(--fs-cap); font-weight:600; color:var(--grey-500);}
.astep__dot{width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--grey-100); border:1.5px solid var(--grey-200);
  font-size:12px; font-weight:700; color:var(--grey-500);}
.astep[data-state="current"] .astep__dot{background:var(--emerald); border-color:var(--emerald); color:#fff;}
.astep[data-state="current"]{color:var(--emerald);}
.astep[data-state="done"] .astep__dot{background:var(--emerald-08); border-color:var(--emerald); color:var(--emerald);}
.astep__dot svg{width:13px; height:13px; stroke-width:3;}
@media (max-width:420px){ .authSteps{gap:var(--s4);} }

.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);}
.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__error{font-size:var(--fs-cap); color:#B3261E; font-weight:600; margin-top:var(--s2);}

.otpNote{background:var(--emerald-08); border:1px solid rgba(10,107,76,.25);
  border-radius:var(--r-md); padding:var(--s4); font-size:var(--fs-sm);
  display:flex; gap:var(--s3); align-items:flex-start; margin-bottom:var(--s5);}
.otpNote svg{width:16px; height:16px; stroke-width:2; color:var(--emerald); flex-shrink:0; margin-top:2px;}
.f__input--otp{text-align:center; letter-spacing:.5em; font-size:22px; font-weight:700;}

.authNav{display:flex; gap:var(--s3); margin-top:var(--s6);}
.authNav .btn{flex:1;}
.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;}

.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);}

/* ══════════════════════════════════════════════════════════════════
   17 · FOOTER
   ══════════════════════════════════════════════════════════════════ */
.footer{background:var(--carbon); color:#B5B5B5; margin-top:var(--s16); padding:var(--s10) 0 var(--s8);}
.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;}

/* ══════════════════════════════════════════════════════════════════
   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%;}
.att__confirm{margin-top:var(--s5); padding:var(--s4); border-radius:var(--r-md); border:1px solid #F2C9AF; background:#FBE7DC; display:flex; gap:var(--s3); align-items:center; justify-content:space-between; flex-wrap:wrap;}
.att__confirm p{font-size:var(--fs-sm); font-weight:600; color:#5C3A18;}
@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{display:grid; gap:var(--s4); margin-top:var(--s5);}
.rev__q{border:1px solid var(--grey-200); border-radius:var(--r-md); padding:var(--s5); background:var(--white);}
.rev__q[data-ok="true"]{border-left:4px solid var(--emerald);}
.rev__q[data-ok="false"]{border-left:4px solid #C4622D;}
.rev__q[data-ok="skip"]{border-left:4px solid var(--grey-200);}
.rev__head{display:flex; justify-content:space-between; gap:var(--s3); font-size:var(--fs-cap); font-weight:700; color:var(--grey-500); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--s2);}
.rev__text{font-weight:700; margin-bottom:var(--s3); line-height:1.45;}
.rev__opts{display:grid; gap:6px;}
.rev__opt{display:flex; gap:var(--s3); align-items:flex-start; padding:9px var(--s3); border-radius:var(--r-sm); font-size:var(--fs-sm); border:1px solid transparent; color:var(--grey-500);}
.rev__opt[data-correct="true"]{background:var(--emerald-08); border-color:rgba(10,107,76,.25); color:var(--carbon); font-weight:600;}
.rev__opt[data-chosen="true"][data-correct="false"]{background:#FBE7DC; border-color:#F2C9AF; color:#5C3A18;}
.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);}