/* ============================================================
     DESIGN TOKENS
     ============================================================ */
  :root{
    /* — palette (the only five brand colors + their tints) — */
    --green:#8CCF1F;  --green-press:#7CBB14;  --green-ink:#173000;
    --blue:#C1DFF0;   --blue-soft:#E7F1F8;
    --teal-dark:#358784;
    --teal:#2D848A;
    --teal-deep:#2D898B;
    /* — warm neutrals — */
    --bg:#FAF8F3;  --bg-2:#F2EFE7;  --surface:#FFFFFF;
    --ink:#16302F;  --ink-2:#33514F;  --muted:#65817F;
    --line:#E6E2D8;  --line-strong:#D7D2C6;

    /* — 8-pt spacing scale (4 = half-step) — */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
    --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

    /* — type ramp — */
    --fz-display:clamp(40px,6vw,66px);
    --fz-h2:clamp(30px,4vw,44px);
    --fz-h3:24px;
    --fz-h4:19px;
    --fz-lead:clamp(18px,2.1vw,21px);
    --fz-body:17px;
    --fz-sm:15px;
    --fz-xs:13px;
    --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.6;

    /* — radius scale — */
    --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-pill:999px;

    /* — elevation (two levels, neutral) — */
    --sh-1:0 1px 2px rgba(16,40,38,.05), 0 6px 18px rgba(16,40,38,.05);
    --sh-2:0 2px 6px rgba(16,40,38,.07), 0 22px 48px rgba(16,40,38,.10);

    --maxw:1160px;
    --disp:'Bricolage Grotesque', system-ui, sans-serif;
    --body:'Hanken Grotesk', system-ui, sans-serif;
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  /* ============================================================
     BASE
     ============================================================ */
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--body); font-size:var(--fz-body); line-height:var(--lh-body);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  h1,h2,h3{font-family:var(--disp); line-height:var(--lh-tight); margin:0; letter-spacing:-0.02em;}
  h1{font-size:var(--fz-display); font-weight:800;}
  h2{font-size:var(--fz-h2); font-weight:700;}
  h3{font-size:var(--fz-h3); font-weight:700; line-height:var(--lh-snug);}
  h4{font-family:var(--body); font-size:var(--fz-h4); font-weight:700; margin:0; line-height:var(--lh-snug);}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--green); color:var(--green-ink);}
  :focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:var(--r-xs);}
  mark{background:var(--green); color:var(--green-ink); border-radius:3px; padding:0 2px;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--sp-5);}
  .eyebrow{
    font-family:var(--body); font-weight:700; font-size:var(--fz-xs); letter-spacing:.12em;
    text-transform:uppercase; color:var(--teal); margin:0 0 var(--sp-4);
  }
  .muted{color:var(--muted);}
  .is-hidden{display:none !important;}

  /* ============================================================
     BUTTONS  (one component language)
     ============================================================ */
  .btn{
    font-family:var(--body); font-weight:700; font-size:var(--fz-sm); cursor:pointer;
    border:1.5px solid transparent; border-radius:var(--r-pill); padding:var(--sp-3) var(--sp-5);
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
    white-space:nowrap; line-height:1;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--green); color:var(--green-ink);}
  .btn-primary:hover{background:var(--green-press);}
  .btn-dark{background:var(--teal-deep); color:#fff;}
  .btn-dark:hover{background:var(--teal-dark);}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
  .btn-ghost:hover{border-color:var(--teal); color:var(--teal-deep);}
  .btn-white{background:#fff; color:var(--teal-deep);}
  .btn-white:hover{background:var(--blue-soft);}
  .btn-block{width:100%;}
  .btn.is-loading{opacity:.85; cursor:default;}

  /* spinner (shared by quiz + buttons) */
  .spinner{
    width:16px; height:16px; border-radius:50%; flex:none;
    border:2.5px solid currentColor; border-right-color:transparent;
    animation:spin .7s linear infinite; display:inline-block;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  /* chips */
  .chip{
    font-family:var(--body); font-weight:600; font-size:var(--fz-sm); cursor:pointer;
    background:var(--surface); border:1.5px solid var(--line-strong); color:var(--ink-2);
    padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill);
    transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
  }
  .chip:hover{border-color:var(--teal); color:var(--teal-deep);}
  .chip.active{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff;}

  /* ============================================================
     HEADER
     ============================================================ */
  header{
    position:sticky; top:0; z-index:60;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; gap:var(--sp-5); height:72px;}
  .logo{display:flex; align-items:center; gap:var(--sp-3); font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:-0.02em;}
  .logo .mark{width:30px; height:30px; border-radius:var(--r-sm); background:var(--teal-deep); position:relative; flex:none;}
  .logo .mark::after{content:""; position:absolute; inset:8px; background:var(--green); border-radius:4px; transform:rotate(45deg);}
  .field{
    display:flex; align-items:center; gap:var(--sp-3); background:var(--surface);
    border:1.5px solid var(--line-strong); border-radius:var(--r-pill); color:var(--muted);
    transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
  }
  .field:focus-within{border-color:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent);}
  .field svg{flex:none;}
  .field input{border:none; outline:none; background:none; font-family:var(--body); color:var(--ink); width:100%;}
  .header-search{flex:1; max-width:420px; padding:var(--sp-2) var(--sp-4);}
  .header-search input{font-size:var(--fz-sm);}
  .nav-right{display:flex; align-items:center; gap:var(--sp-4); margin-left:auto;}
  .nav-link{font-weight:600; color:var(--ink-2); font-size:var(--fz-sm);}
  .nav-link:hover{color:var(--teal-deep);}

  /* ============================================================
     HERO
     ============================================================ */
  .hero{padding:var(--sp-9) 0 var(--sp-6); text-align:center;}
  .hero h1{max-width:15ch; margin:0 auto;}
  .hero .lead{font-size:var(--fz-lead); color:var(--ink-2); max-width:54ch; margin:var(--sp-5) auto 0; line-height:1.5;}
  .hero-search{max-width:560px; margin:var(--sp-6) auto 0; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5); box-shadow:var(--sh-1);}
  .hero-search input{font-size:var(--fz-body);}
  .hero-search .btn{padding-inline:var(--sp-5);}
  .chips{display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; margin:var(--sp-5) auto 0; max-width:640px;}
  .facts{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); justify-content:center; align-items:center; margin:var(--sp-6) auto 0; color:var(--muted); font-size:var(--fz-sm); font-weight:600;}
  .facts .d{width:5px; height:5px; border-radius:50%; background:var(--line-strong);}

  /* ============================================================
     SECTIONS
     ============================================================ */
  section{padding:var(--sp-9) 0;}
  .sec-head{max-width:60ch;}
  .sec-head.center{margin:0 auto; text-align:center;}
  .sec-head p{font-size:var(--fz-lead); color:var(--ink-2); margin-top:var(--sp-4); line-height:1.5;}

  /* — AI engine — */
  .ai{background:var(--bg-2);}
  .ai-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:var(--sp-8); align-items:center;}
  .ai-list{display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-6);}
  .ai-item{display:flex; gap:var(--sp-4); align-items:flex-start;}
  .ai-item .ic{width:40px; height:40px; border-radius:var(--r-sm); background:var(--blue-soft); color:var(--teal-dark); display:grid; place-items:center; flex:none;}
  .ai-item p{color:var(--muted); font-size:var(--fz-sm); margin-top:var(--sp-1);}

  /* AI quiz panel */
  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--sh-2); padding:var(--sp-5); transition:box-shadow .3s var(--ease);
  }
  .panel.pulse{animation:pulse 1.1s var(--ease);}
  @keyframes pulse{0%{box-shadow:var(--sh-2);}30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 30%,transparent), var(--sh-2);}100%{box-shadow:var(--sh-2);}}
  .panel-top{display:flex; align-items:center; gap:var(--sp-3); padding-bottom:var(--sp-4); border-bottom:1px solid var(--line);}
  .panel-top .dots{display:flex; gap:var(--sp-1);}
  .panel-top .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-strong); display:block;}
  .panel-top .tag{margin-left:auto; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--teal-deep); background:var(--blue-soft); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);}
  .quiz-progress{height:4px; background:var(--line); border-radius:var(--r-pill); margin:var(--sp-4) 0 var(--sp-5); overflow:hidden;}
  .quiz-progress span{display:block; height:100%; width:0; background:var(--teal-deep); border-radius:var(--r-pill); transition:width .35s var(--ease);}
  .quiz-steps{min-height:268px; display:flex; flex-direction:column;}
  .quiz-q{font-family:var(--disp); font-weight:700; font-size:20px; line-height:var(--lh-snug); margin-bottom:var(--sp-4);}
  .quiz-opts{display:flex; flex-direction:column; gap:var(--sp-3);}
  .quiz-opt{
    text-align:left; font-family:var(--body); font-weight:600; font-size:var(--fz-sm); cursor:pointer;
    background:var(--surface); border:1.5px solid var(--line-strong); color:var(--ink);
    padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm);
    transition:background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
  }
  .quiz-opt:hover{border-color:var(--teal); background:var(--blue-soft);}
  .quiz-opt.sel{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff;}
  .quiz-back{align-self:flex-start; margin-top:var(--sp-4); background:none; border:none; color:var(--muted); font-family:var(--body); font-weight:600; font-size:var(--fz-sm); cursor:pointer;}
  .quiz-back:hover{color:var(--teal-deep);}
  .quiz-loading{display:flex; align-items:center; gap:var(--sp-3); color:var(--teal-deep); font-weight:700; margin-bottom:var(--sp-4);}
  .skeleton-list{display:flex; flex-direction:column; gap:var(--sp-3);}
  .sk-row{height:64px; border-radius:var(--r-sm); background:linear-gradient(100deg, var(--bg-2) 30%, var(--line) 50%, var(--bg-2) 70%); background-size:200% 100%; animation:shimmer 1.3s linear infinite;}
  @keyframes shimmer{to{background-position:-200% 0;}}
  .quiz-result-head{font-weight:700; color:var(--ink-2); font-size:var(--fz-sm); margin-bottom:var(--sp-4);}
  .rec-list{display:flex; flex-direction:column; gap:var(--sp-3);}
  .rec{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); opacity:0;}
  .rec-in{animation:recIn .4s var(--ease) forwards;}
  @keyframes recIn{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}
  .rec-badge{width:42px; height:42px; border-radius:var(--r-sm); flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:15px;}
  .rec-body{flex:1; min-width:0;}
  .rec-body h5{font-family:var(--body); font-size:var(--fz-sm); font-weight:700; margin:0;}
  .rec-body p{font-size:13px; color:var(--muted); margin:2px 0 0;}
  .rec-match{font-size:var(--fz-sm); font-weight:700; color:var(--teal-deep); text-align:right; flex:none;}
  .rec-match small{display:block; font-weight:600; color:var(--muted); font-size:11px;}
  .quiz-actions{margin-top:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);}
  .quiz-restart{background:none; border:none; color:var(--muted); font-family:var(--body); font-weight:600; font-size:var(--fz-sm); cursor:pointer;}
  .quiz-restart:hover{color:var(--teal-deep);}

  /* ============================================================
     LIBRARY
     ============================================================ */
  .lib-top{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-6);}
  .filters{display:flex; gap:var(--sp-2); flex-wrap:wrap;}
  #result-count{font-size:var(--fz-sm); font-weight:600; color:var(--muted); margin:0 0 var(--sp-4);}
  .courses{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5);}
  .course{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-1); overflow:hidden; display:flex; flex-direction:column;
    transition:box-shadow .22s var(--ease), transform .22s var(--ease);
  }
  .course:hover{box-shadow:var(--sh-2); transform:translateY(-3px);}
  .course .top{position:relative; height:168px; overflow:hidden;}
  .thumb{display:block; width:100%; height:100%;}
  .cat-chip{
    position:absolute; top:var(--sp-3); left:var(--sp-3); z-index:2;
    font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink); background:color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter:blur(4px); padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);
  }
  .free-chip{
    position:absolute; top:var(--sp-3); right:var(--sp-3); z-index:2;
    font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--green-ink); background:var(--green);
    padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);
  }

  /* category tracks (home + library) */
  .cat-track{margin-top:var(--sp-8);}
  .cat-track-head{margin-bottom:var(--sp-5);}
  .cat-track-head h3{font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.4vw,26px); color:var(--ink); letter-spacing:-0.01em;}
  .cat-track-head p{color:var(--muted); font-size:var(--fz-sm); margin-top:4px;}
  /* coming-soon course cards */
  .soon-chip{position:absolute; top:var(--sp-3); right:var(--sp-3); z-index:2; font-size:11px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; color:#5a4a00; background:#ffd54a;
    padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);}
  .course--soon{opacity:.97;}
  .course--soon .top{height:168px; background:linear-gradient(135deg, var(--blue-soft,#dfeceb), #cce0dc);}
  .course--soon .body h3{font-family:var(--body); font-weight:700; font-size:var(--fz-base); color:var(--ink); margin:0;}
  .course--soon .desc{color:var(--ink-2); font-size:var(--fz-sm);}
  .course--soon .meta{color:var(--muted);}

  /* "Why Pro" section */
  .why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); max-width:900px; margin:var(--sp-7) auto 0;}
  .why-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-6); box-shadow:var(--sh-1);}
  .why-item h4{font-family:var(--disp); font-weight:700; font-size:18px; margin-bottom:var(--sp-2); color:var(--ink);}
  .why-item p{color:var(--ink-2); font-size:var(--fz-sm); line-height:1.55;}
  @media (max-width:720px){ .why-grid{grid-template-columns:1fr;} }
  .course .body{padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); flex:1;}
  .course .desc{color:var(--ink-2); font-size:var(--fz-sm);}
  .course .meta{display:flex; align-items:center; gap:var(--sp-3); color:var(--muted); font-size:var(--fz-xs); font-weight:600; flex-wrap:wrap;}
  .course .meta .d{width:4px; height:4px; border-radius:50%; background:var(--line-strong);}
  .toggle{
    margin-top:var(--sp-1); display:flex; align-items:center; justify-content:space-between;
    width:100%; background:none; border:none; cursor:pointer; padding:var(--sp-3) 0 0;
    border-top:1px solid var(--line); font-family:var(--body); font-weight:700;
    font-size:var(--fz-sm); color:var(--teal-deep);
  }
  .toggle .chev{transition:transform .25s var(--ease); display:inline-flex;}
  .toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}
  .lessons{overflow:hidden; max-height:0; transition:max-height .35s var(--ease);}
  .lessons ul{list-style:none; margin:var(--sp-2) 0 0; padding:0;}
  .lessons li{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); font-size:var(--fz-sm);}
  .lessons li:last-child{border-bottom:none;}
  .lessons .num{width:26px; height:26px; border-radius:var(--r-xs); background:var(--blue-soft); color:var(--teal-dark); font-weight:700; font-size:13px; display:grid; place-items:center; flex:none;}
  .lessons .lx{color:var(--ink-2); flex:1;}
  .lessons .ex{margin-left:auto; font-size:11px; font-weight:700; color:var(--teal); background:var(--blue-soft); padding:2px 8px; border-radius:var(--r-pill); flex:none; text-transform:uppercase; letter-spacing:.04em;}
  #no-results{text-align:center; color:var(--muted); margin-top:var(--sp-7);}

  /* ============================================================
     COMPARISON
     ============================================================ */
  .compare{background:var(--bg-2);}
  .cmp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-7);}
  .cmp{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-6); box-shadow:var(--sh-1); display:flex; flex-direction:column;}
  .cmp.us{border:2px solid var(--teal-deep); box-shadow:var(--sh-2); position:relative;}
  .cmp.us .tagtop{position:absolute; top:-13px; left:var(--sp-6); background:var(--green); color:var(--green-ink); font-weight:700; font-size:12px; padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill);}
  .cmp .name{font-family:var(--disp); font-weight:700; font-size:22px;}
  .cmp .sub{color:var(--muted); font-size:var(--fz-sm); margin:var(--sp-1) 0 var(--sp-5);}
  .cmp ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3);}
  .cmp li{display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fz-sm); color:var(--ink-2);}
  .mk{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; margin-top:1px;}
  .mk.y{background:#E4F2EA; color:var(--teal-dark);}
  .mk.n{background:#F7E7EB; color:#B0475C;}
  .mk.m{background:#F6F0DF; color:#A87C16;}

  /* ============================================================
     PRICING
     ============================================================ */
  .price-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); margin-top:var(--sp-7); align-items:stretch; max-width:760px; margin-inline:auto;}
  .tier{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-6); box-shadow:var(--sh-1); display:flex; flex-direction:column;}
  .tier.feat{background:var(--teal-deep); color:#fff; box-shadow:var(--sh-2); position:relative;}
  .tier .flag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--green); color:var(--green-ink); font-weight:700; font-size:12px; padding:var(--sp-1) var(--sp-4); border-radius:var(--r-pill);}
  .tier .tname{font-family:var(--disp); font-weight:700; font-size:20px;}
  .tier .tprice{font-family:var(--disp); font-weight:800; font-size:46px; margin:var(--sp-3) 0 var(--sp-1); letter-spacing:-0.03em;}
  .tier .tprice span{font-family:var(--body); font-size:var(--fz-sm); font-weight:600; color:var(--muted);}
  .tier.feat .tprice span{color:rgba(255,255,255,.78);}
  .tier .tdesc{font-size:var(--fz-sm); color:var(--ink-2); min-height:42px;}
  .tier.feat .tdesc{color:rgba(255,255,255,.82);}
  .tier ul{list-style:none; margin:var(--sp-5) 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); flex:1;}
  .tier li{display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fz-sm);}
  .tier li svg{flex:none; margin-top:2px; color:var(--teal-deep);}
  .tier.feat li svg{color:var(--green);}
  .plan-current{display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
    padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); font-weight:700; font-size:var(--fz-sm);
    background:rgba(140,207,31,.16); color:#2f5e00; border:1px solid rgba(140,207,31,.45);}
  .tier.feat .plan-current{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4);}
  .plan-current svg{flex:none;}

  /* "Pro" badge shown next to the account name in the header when signed in as Pro */
  .pro-pill{display:inline-block; background:var(--green); color:var(--green-ink); font-weight:700;
    font-size:11px; line-height:1; padding:3px 7px; border-radius:var(--r-pill); margin-left:6px;
    vertical-align:middle; letter-spacing:.02em;}

  /* ============================================================
     FINAL CTA
     ============================================================ */
  .cta .box{background:var(--teal-deep); border-radius:var(--r-lg); padding:var(--sp-9) var(--sp-6); color:#fff; text-align:center; box-shadow:var(--sh-2);}
  .cta h2{color:#fff; max-width:18ch; margin:0 auto;}
  .cta p{color:rgba(255,255,255,.85); margin:var(--sp-4) auto var(--sp-6); max-width:46ch; font-size:var(--fz-lead);}

  /* ============================================================
     FOOTER
     ============================================================ */
  footer{background:var(--ink); color:#CFE0DE; padding:var(--sp-8) 0 var(--sp-6);}
  .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--sp-7);}
  footer .logo{color:#fff;}
  footer .blurb{color:#9DBAB7; font-size:var(--fz-sm); margin-top:var(--sp-4); max-width:32ch;}
  .foot-col h5{font-family:var(--body); font-weight:700; font-size:var(--fz-xs); letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 var(--sp-4);}
  .foot-col a{display:block; color:#9DBAB7; font-size:var(--fz-sm); padding:var(--sp-1) 0; transition:color .14s var(--ease);}
  .foot-col a:hover{color:var(--green);}
  .socials{display:flex; gap:var(--sp-2); margin-top:var(--sp-5);}
  .socials a{width:38px; height:38px; border-radius:var(--r-sm); background:rgba(255,255,255,.07); display:grid; place-items:center; color:#CFE0DE; transition:background .15s var(--ease), color .15s var(--ease);}
  .socials a:hover{background:var(--teal-deep); color:#fff;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:var(--sp-7); padding-top:var(--sp-5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); color:#7E9C99; font-size:var(--fz-xs);}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:920px){
    .ai-grid{grid-template-columns:1fr; gap:var(--sp-7);}
    .courses{grid-template-columns:1fr;}
    .cmp-grid{grid-template-columns:1fr;}
    .price-grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .header-search{display:none;}
  }
  @media (max-width:640px){
    body{font-size:16px;}
    .nav-links{display:none;}
    section{padding:var(--sp-8) 0;}
    .hero{padding:var(--sp-7) 0 var(--sp-5);}
    .hero-search{flex-direction:row;}
    .foot-grid{grid-template-columns:1fr 1fr; gap:var(--sp-6);}
    .foot-bottom{justify-content:flex-start;}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }


  /* ============================================================
     SHARED PAGE STYLES (catalog, course detail, content, auth)
     ============================================================ */
  .menu-toggle{display:none; background:none; border:1.5px solid var(--line-strong); border-radius:var(--r-sm); width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; color:var(--ink); margin-left:auto;}
  .nav-drawer{display:none;}

  /* breadcrumb */
  .crumbs{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fz-sm); color:var(--muted); font-weight:600; padding-top:var(--sp-6);}
  .crumbs a:hover{color:var(--teal-deep);}
  .crumbs .sep{color:var(--line-strong);}

  /* generic page hero */
  .page-hero{padding:var(--sp-8) 0 var(--sp-6);}
  .page-hero .eyebrow{margin-bottom:var(--sp-3);}
  .page-hero h1{font-size:clamp(34px,5vw,56px); max-width:18ch;}
  .page-hero p.lead{font-size:var(--fz-lead); color:var(--ink-2); max-width:60ch; margin-top:var(--sp-5); line-height:1.5;}

  /* prose (about, help, legal) */
  .prose{max-width:72ch; margin:0 auto;}
  .prose h2{font-size:28px; margin:var(--sp-8) 0 var(--sp-4);}
  .prose h3{font-size:20px; margin:var(--sp-6) 0 var(--sp-3);}
  .prose p{margin:0 0 var(--sp-4); color:var(--ink-2);}
  .prose ul{margin:0 0 var(--sp-4) var(--sp-5); padding:0; color:var(--ink-2); display:flex; flex-direction:column; gap:var(--sp-2);}
  .prose li{padding-left:var(--sp-1);}
  .prose a{color:var(--teal-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-color:color-mix(in srgb,var(--teal) 40%,transparent);}
  .prose a:hover{text-decoration-color:var(--teal);}
  .prose .small{font-size:var(--fz-sm); color:var(--muted);}

  /* catalog */
  .catalog-head{text-align:center; max-width:60ch; margin:0 auto var(--sp-6);}
  .catalog-tools{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6);}
  .catalog-tools .field{flex:1; min-width:240px; max-width:420px; padding:var(--sp-3) var(--sp-4);}
  .catalog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
  @media (max-width:920px){.catalog-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.catalog-grid{grid-template-columns:1fr;}}

  /* course card as a link (catalog + related) */
  a.course{color:inherit;}
  .course .view{margin-top:var(--sp-1); display:flex; align-items:center; gap:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--line); font-weight:700; font-size:var(--fz-sm); color:var(--teal-deep);}
  .course .view svg{transition:transform .2s var(--ease);}
  a.course:hover .view svg{transform:translateX(3px);}
  h3 a.title-link{color:inherit;}
  h3 a.title-link:hover{color:var(--teal-deep);}

  /* explore-all band */
  .explore-band{display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); margin-top:var(--sp-7); text-align:center;}
  .explore-band p{color:var(--muted); font-size:var(--fz-sm);}

  /* ============================================================
     COURSE DETAIL
     ============================================================ */
  .cd-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-8); align-items:center; padding-top:var(--sp-5);}
  .cd-hero .cat-chip{position:static; display:inline-block; margin-bottom:var(--sp-4); background:var(--blue-soft); color:var(--teal-dark);}
  .cd-hero h1{font-size:clamp(32px,4.5vw,52px); max-width:16ch;}
  .cd-hero .lead{font-size:var(--fz-lead); color:var(--ink-2); margin-top:var(--sp-5); line-height:1.5;}
  .cd-meta{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6);}
  .cd-meta .pill{display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:var(--sp-2) var(--sp-4); font-size:var(--fz-sm); font-weight:600; color:var(--ink-2);}
  .cd-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6);}
  .cd-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:16/10;}
  .cd-media image-slot{display:block; width:100%; height:100%;}

  .learn{background:var(--bg-2);}
  .learn-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4) var(--sp-7); margin-top:var(--sp-6);}
  .learn-item{display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fz-body);}
  .learn-item svg{flex:none; margin-top:3px; color:var(--teal-deep);}
  @media (max-width:720px){.learn-grid{grid-template-columns:1fr;}}

  /* curriculum modules (accordion) */
  .module{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-3); overflow:hidden; box-shadow:var(--sh-1);}
  .module-head{display:flex; align-items:center; gap:var(--sp-4); width:100%; background:none; border:none; cursor:pointer; padding:var(--sp-5); text-align:left; font-family:var(--body);}
  .module-head .mi{width:40px; height:40px; border-radius:var(--r-sm); background:var(--blue-soft); color:var(--teal-dark); display:grid; place-items:center; font-family:var(--disp); font-weight:700; flex:none;}
  .module-head h4{flex:1;}
  .module-head .cnt{color:var(--muted); font-size:var(--fz-sm); font-weight:600;}
  .module-head .chev{transition:transform .25s var(--ease); color:var(--teal-deep); display:inline-flex;}
  .module-head[aria-expanded="true"] .chev{transform:rotate(180deg);}
  .module-body{overflow:hidden; max-height:0; transition:max-height .35s var(--ease);}
  .module-body ul{list-style:none; margin:0; padding:0 var(--sp-5) var(--sp-3);}
  .module-body li{display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3) 0; border-top:1px solid var(--line); font-size:var(--fz-sm);}
  .module-body .num{width:26px; height:26px; border-radius:var(--r-xs); background:var(--bg-2); color:var(--teal-dark); font-weight:700; font-size:13px; display:grid; place-items:center; flex:none;}
  .module-body .lx{flex:1; color:var(--ink);}
  .module-body .lx small{display:block; color:var(--muted); font-weight:400; font-size:13px; margin-top:2px;}
  a.lx{transition:color .14s var(--ease);}
  a.lx:hover{color:var(--teal-deep);}
  a.lx:hover small{color:var(--teal);}
  .module-body .ex{margin-left:auto; font-size:11px; font-weight:700; color:var(--teal); background:var(--blue-soft); padding:2px 8px; border-radius:var(--r-pill); flex:none; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}

  /* highlight callouts (advanced AI) */
  .callouts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-6);}
  @media (max-width:920px){.callouts{grid-template-columns:1fr;}}
  .callout{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--sh-1);}
  .callout .ic{width:42px; height:42px; border-radius:var(--r-sm); background:var(--blue-soft); color:var(--teal-dark); display:grid; place-items:center; margin-bottom:var(--sp-4);}
  .callout h4{margin-bottom:var(--sp-2);}
  .callout p{color:var(--muted); font-size:var(--fz-sm);}

  /* faq */
  .faq{max-width:76ch; margin:var(--sp-6) auto 0;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); width:100%; background:none; border:none; cursor:pointer; padding:var(--sp-5) 0; text-align:left; font-family:var(--body); font-weight:700; font-size:var(--fz-h4); color:var(--ink);}
  .faq-q .chev{transition:transform .25s var(--ease); color:var(--teal-deep); flex:none; display:inline-flex;}
  .faq-q[aria-expanded="true"] .chev{transform:rotate(180deg);}
  .faq-a{overflow:hidden; max-height:0; transition:max-height .35s var(--ease);}
  .faq-a p{color:var(--ink-2); font-size:var(--fz-sm); padding-bottom:var(--sp-5);}

  .related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-6);}
  @media (max-width:920px){.related-grid{grid-template-columns:1fr;}}

  /* sticky enroll bar */
  .enroll-bar{position:sticky; bottom:0; z-index:40; background:color-mix(in srgb,var(--surface) 92%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:var(--sp-3) 0;}
  .enroll-bar .inner{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;}
  .enroll-bar .ti{font-family:var(--disp); font-weight:700; font-size:var(--fz-h4);}
  .enroll-bar .pr{color:var(--muted); font-size:var(--fz-sm); font-weight:600;}

  @media (max-width:920px){
    .cd-hero{grid-template-columns:1fr; gap:var(--sp-6);}
    .cd-media{order:-1;}
  }

  /* ============================================================
     AUTH
     ============================================================ */
  .auth-wrap{min-height:calc(100vh - 72px); display:grid; place-items:center; padding:var(--sp-7) var(--sp-5);}
  .auth-card{width:100%; max-width:440px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:var(--sp-7);}
  .auth-card h1{font-size:30px; text-align:center;}
  .auth-card .sub{text-align:center; color:var(--muted); font-size:var(--fz-sm); margin:var(--sp-3) 0 var(--sp-6);}
  .auth-tabs{display:flex; gap:var(--sp-1); background:var(--bg-2); border-radius:var(--r-pill); padding:var(--sp-1); margin-bottom:var(--sp-6);}
  .auth-tab{flex:1; border:none; background:none; cursor:pointer; font-family:var(--body); font-weight:700; font-size:var(--fz-sm); padding:var(--sp-3); border-radius:var(--r-pill); color:var(--muted);}
  .auth-tab.active{background:var(--surface); color:var(--ink); box-shadow:var(--sh-1);}
  .auth-field{margin-bottom:var(--sp-4);}
  .auth-field label{display:block; font-size:var(--fz-sm); font-weight:600; color:var(--ink-2); margin-bottom:var(--sp-2);}
  .auth-field input{width:100%; border:1.5px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); font-family:var(--body); font-size:var(--fz-body); color:var(--ink); background:var(--surface); outline:none; transition:border-color .16s var(--ease), box-shadow .16s var(--ease);}
  .auth-field input:focus{border-color:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 16%,transparent);}
  .auth-row{display:flex; align-items:center; justify-content:space-between; font-size:var(--fz-sm); margin-bottom:var(--sp-5);}
  .auth-row a{color:var(--teal-deep); font-weight:600;}
  .auth-foot{text-align:center; color:var(--muted); font-size:var(--fz-sm); margin-top:var(--sp-5);}
  .auth-foot a{color:var(--teal-deep); font-weight:600;}
  .auth-divider{display:flex; align-items:center; gap:var(--sp-3); color:var(--muted); font-size:var(--fz-sm); margin:var(--sp-5) 0;}
  .auth-divider::before,.auth-divider::after{content:""; flex:1; height:1px; background:var(--line);}
  .sso{display:flex; flex-direction:column; gap:var(--sp-3);}
  .sso .btn{width:100%; border-color:var(--line-strong);}

  /* mobile drawer open state */
  @media (max-width:760px){
    .menu-toggle{display:inline-flex;}
    .nav-right .nav-links{display:none;}
    .nav-right .nav-link, .nav-right .btn{ }
    .nav-drawer.open{display:block; position:fixed; top:72px; left:0; right:0; z-index:55; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--sh-2); padding:var(--sp-4) var(--sp-5);}
    .nav-drawer a{display:block; padding:var(--sp-3) 0; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line);}
    .nav-drawer a:last-child{border-bottom:none;}
    .nav-right > .nav-link, .nav-right > .btn{display:none;}
  }
  
  /* ============================================================
     HERO PROOF BAR
     ============================================================ */
  .hero-proof{
    display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
    justify-content:center; align-items:center;
    margin:var(--sp-5) auto 0; color:var(--muted);
    font-size:var(--fz-sm); font-weight:600;
  }
  .hero-proof .stars{ color:var(--green); letter-spacing:2px; -webkit-text-stroke:.4px var(--teal-dark); }
  .hero-proof .d{ width:5px; height:5px; border-radius:50%; background:var(--line-strong); }

  /* ============================================================
     TESTIMONIALS
     ============================================================ */
  .testi-grid{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:var(--sp-5); margin-top:var(--sp-7);
  }
  .testi-card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-md); padding:var(--sp-6);
    box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:var(--sp-4);
    transition:box-shadow .22s var(--ease), transform .22s var(--ease);
  }
  .testi-card:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); }
  .testi-stars{ color:var(--green); letter-spacing:3px; font-size:18px; -webkit-text-stroke:.4px var(--teal-dark); }
  .testi-quote{
    color:var(--ink-2); font-size:var(--fz-sm); line-height:1.65;
    flex:1; margin:0;
  }
  .testi-person{
    display:flex; align-items:center; gap:var(--sp-3);
    padding-top:var(--sp-4); border-top:1px solid var(--line);
    font-size:var(--fz-sm);
  }
  .testi-person strong{ display:block; color:var(--ink); font-weight:700; }
  .testi-person span{ color:var(--muted); font-size:var(--fz-xs); }
  .testi-avatar{
    width:40px; height:40px; border-radius:var(--r-sm); flex:none;
    background:var(--teal-deep); color:#fff;
    font-family:var(--disp); font-weight:700; font-size:14px;
    display:grid; place-items:center;
  }
  @media (max-width:920px){ .testi-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

  /* ============================================================
     LESSON PAGES
     ============================================================ */

  /* Sticky lesson progress bar (sits below the main header) */
  .lesson-bar{
    background:color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:var(--sp-3) 0;
    position:sticky; top:72px; z-index:50;
  }
  .lesson-bar-inner{display:flex; align-items:center; gap:var(--sp-5);}
  .lesson-bar a{font-weight:600; font-size:var(--fz-sm); color:var(--muted); white-space:nowrap; flex:none;}
  .lesson-bar a:hover{color:var(--teal-deep);}
  .lb-progress{flex:1; display:flex; align-items:center; gap:var(--sp-3); min-width:0;}
  .lb-label{font-size:var(--fz-xs); font-weight:700; color:var(--muted); white-space:nowrap;}
  .lb-track{flex:1; height:6px; background:var(--line); border-radius:var(--r-pill); overflow:hidden;}
  .lb-fill{height:100%; background:var(--teal-deep); border-radius:var(--r-pill);}
  .lb-next-link{font-weight:700; font-size:var(--fz-sm); color:var(--teal-deep) !important;}
  .lb-next-link:hover{color:var(--teal-dark) !important;}

  /* Lesson hero */
  .lesson-hero{background:var(--bg-2); padding:var(--sp-8) 0 var(--sp-7);}
  .lesson-content{max-width:800px;}
  .lesson-meta-row{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4); flex-wrap:wrap;}
  .lesson-pill{
    display:inline-flex; align-items:center; padding:var(--sp-1) var(--sp-3);
    border-radius:var(--r-pill); font-size:var(--fz-xs); font-weight:700;
    letter-spacing:.05em; text-transform:uppercase;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  }
  .lesson-pill-num{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff;}
  .lesson-pill-ex{background:var(--blue-soft); border-color:var(--blue); color:var(--teal-dark);}
  .lesson-pill-proj{background:var(--green); border-color:var(--green); color:var(--green-ink);}
  .lesson-hero h1{font-size:clamp(32px,4vw,50px); max-width:22ch;}
  .lesson-hero .lead{font-size:var(--fz-lead); color:var(--ink-2); margin-top:var(--sp-4); line-height:1.5; max-width:58ch;}

  /* Lesson body */
  .lesson-body{padding:var(--sp-8) 0 var(--sp-10);}

  /* In-prose callout boxes */
  .lesson-callout{
    background:var(--surface); border:1px solid var(--line);
    border-left:4px solid var(--teal-deep);
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    padding:var(--sp-4) var(--sp-5); margin:var(--sp-6) 0;
  }
  .lesson-callout p{margin:0; color:var(--ink-2); font-size:var(--fz-sm);}
  .lesson-callout strong{color:var(--teal-deep);}

  /* Exercise block */
  .exercise-block{
    background:var(--blue-soft); border:1px solid var(--blue);
    border-radius:var(--r-md); padding:var(--sp-6); margin:var(--sp-8) 0;
  }
  .exercise-label{
    display:inline-flex; align-items:center; padding:var(--sp-1) var(--sp-3);
    border-radius:var(--r-pill); font-size:var(--fz-xs); font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    background:var(--teal-deep); color:#fff; margin-bottom:var(--sp-4);
  }
  .exercise-block h3{font-size:22px; margin:0 0 var(--sp-3);}
  .exercise-block p{color:var(--ink-2); font-size:var(--fz-sm); margin:0 0 var(--sp-4);}
  .exercise-steps{display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-5);}
  .ex-step{display:flex; gap:var(--sp-4); align-items:flex-start;}
  .ex-step-num{
    width:32px; height:32px; border-radius:var(--r-sm);
    background:var(--teal-deep); color:#fff; font-weight:700; font-size:14px;
    display:grid; place-items:center; flex:none;
  }
  .ex-step-body{flex:1;}
  .ex-step-body p{color:var(--ink-2); margin:0; font-size:var(--fz-sm);}
  .ex-step-body strong{color:var(--ink); font-weight:700; display:block; margin-bottom:var(--sp-1);}

  /* Key takeaways */
  .takeaways{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-md); padding:var(--sp-6); margin-top:var(--sp-8);
    box-shadow:var(--sh-1);
  }
  .takeaways-label{
    display:inline-flex; align-items:center; padding:var(--sp-1) var(--sp-3);
    border-radius:var(--r-pill); font-size:var(--fz-xs); font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    background:var(--green); color:var(--green-ink); margin-bottom:var(--sp-4);
  }
  .takeaways h3{font-size:20px; margin:0 0 var(--sp-4);}
  .takeaways ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3);}
  .takeaways li{
    display:flex; gap:var(--sp-3); align-items:flex-start;
    font-size:var(--fz-sm); color:var(--ink-2);
  }
  .takeaways li::before{
    content:"→"; color:var(--teal-deep); font-weight:700; flex:none; margin-top:1px;
  }

  /* Lesson footer nav */
  .lesson-nav-footer{
    display:grid; grid-template-columns:1fr 1fr;
    gap:var(--sp-4); margin-top:var(--sp-9);
    padding-top:var(--sp-6); border-top:1px solid var(--line);
  }
  .lnf-link{
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-4) var(--sp-5);
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-md); color:var(--ink); font-size:var(--fz-sm);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
    box-shadow:var(--sh-1); text-decoration:none;
  }
  .lnf-link:hover{border-color:var(--teal); box-shadow:var(--sh-2); transform:translateY(-2px);}
  .lnf-next{justify-content:flex-end; text-align:right;}
  .lnf-link span{display:block; font-size:var(--fz-xs); color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
  .lnf-link strong{display:block; margin-top:2px; font-weight:600;}
  .lnf-link svg{flex:none; color:var(--teal-deep);}
  .lnf-link.lnf-only{grid-column:2;}

  @media (max-width:640px){
    .lesson-nav-footer{grid-template-columns:1fr;}
    .lnf-link.lnf-only{grid-column:1;}
    .lesson-bar-inner .lb-progress{display:none;}
  }

  /* ============================================================
     PROGRESS TRACKING (mark-complete + saved state)
     ============================================================ */

  /* lesson page: mark-complete control */
  .lesson-complete{
    margin-top:var(--sp-8); padding-top:var(--sp-6);
    border-top:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center;
  }
  .lesson-complete .btn{padding:var(--sp-4) var(--sp-7);}
  .lesson-complete .btn svg{margin-right:2px;}
  .lesson-complete-note{font-size:var(--fz-sm); color:var(--muted); font-weight:600; margin:0;}

  /* sticky lesson bar: completed badge */
  .lesson-bar.lesson-done .lb-label::after{
    content:"✓ Done"; margin-left:var(--sp-2);
    color:var(--green-press); font-weight:800;
  }
  .lesson-bar.lesson-done .lb-fill{background:var(--green-press);}

  /* course page: completed lesson rows */
  .module-body li.is-done .lx{color:var(--muted);}
  .module-body li.is-done .num{background:var(--green); color:var(--green-ink);}
  .done-check{
    display:inline-flex; align-items:center; flex:none;
    color:var(--green-press); margin-left:var(--sp-2);
  }
  .module-body li.is-done .ex{margin-left:var(--sp-2);}

  /* shared progress bar (course header + cards) */
  .cp-track{height:8px; background:var(--line); border-radius:var(--r-pill); overflow:hidden; flex:1;}
  .cp-fill{display:block; height:100%; background:var(--green-press); border-radius:var(--r-pill); transition:width .4s var(--ease);}
  .cp-label{font-size:var(--fz-sm); font-weight:700; color:var(--teal-deep); white-space:nowrap;}

  .course-progress{
    display:flex; align-items:center; gap:var(--sp-4);
    margin-top:var(--sp-5); max-width:520px;
  }

  .card-progress{
    display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-1);
  }
  .card-progress .cp-label{font-size:var(--fz-xs);}

  /* per-course / global reset buttons */
  .cp-reset, .dash-reset{
    background:none; border:1.5px solid var(--line-strong); border-radius:var(--r-pill);
    color:var(--ink-2); font-family:var(--body); font-weight:700; cursor:pointer;
    transition:border-color .16s var(--ease), color .16s var(--ease); white-space:nowrap;
  }
  .cp-reset:hover, .dash-reset:hover{border-color:#B0475C; color:#B0475C;}
  .cp-reset{padding:var(--sp-1) var(--sp-3); font-size:var(--fz-xs); flex:none;}
  .dash-reset{padding:var(--sp-2) var(--sp-4); font-size:var(--fz-sm);}

  /* homepage progress dashboard */
  .dashboard{
    display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-1); padding:var(--sp-5) var(--sp-6); margin-bottom:var(--sp-6);
  }
  .dash-ring{
    width:84px; height:84px; border-radius:50%; flex:none; display:grid; place-items:center;
    background:conic-gradient(var(--green-press) 0%, var(--line) 0);
  }
  .dash-ring::before{
    content:""; grid-area:1/1; width:64px; height:64px; border-radius:50%; background:var(--surface);
  }
  .dash-ring span{
    grid-area:1/1; z-index:1; font-family:var(--disp); font-weight:800; font-size:19px; color:var(--ink);
  }
  .dash-text{flex:1; min-width:200px;}
  .dash-eyebrow{
    font-family:var(--body); font-weight:700; font-size:var(--fz-xs); letter-spacing:.12em;
    text-transform:uppercase; color:var(--teal); margin:0 0 var(--sp-1);
  }
  .dash-sub{color:var(--ink-2); font-size:var(--fz-body); margin:0;}
  .dash-sub strong{color:var(--ink); font-weight:800;}
  @media (max-width:560px){
    .dashboard{justify-content:center; text-align:center;}
    .dash-reset{width:100%;}
  }