/* ================================================================
   educatIA — Design System v2
   Clean, technical, spacious — no icons, no emojis
   ================================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --black:#171717;--white:#fff;--bg:#f5f5f7;--surface:#fff;
    --border:#ebebeb;--border-lt:#f0f0f0;
    --text:#1d1d1f;--text2:#6e6e73;--text3:#86868b;
    --blue:#0071e3;--blue-h:#0077ed;--blue-lt:#e8f4ff;
    --green:#00875a;--green-lt:#e6f7f0;
    --orange:#e68900;--orange-lt:#fff8e6;
    --red:#de350b;--red-lt:#ffeee6;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --mono:'JetBrains Mono','SF Mono',monospace;
    --r-sm:6px;--r-md:8px;--r-lg:12px;
    --nav-h:56px;--max-w:1120px;--tr:200ms ease;
    --shadow-ring:0 0 0 1px rgba(0,0,0,0.06);
    --shadow-card:0 0 0 1px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04),0 12px 20px -8px rgba(0,0,0,0.04);
    --shadow-hover:0 0 0 1px rgba(0,0,0,0.1),0 4px 12px rgba(0,0,0,0.06),0 20px 40px -12px rgba(0,0,0,0.06);
}

html{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--sans);color:var(--text);background:var(--white);line-height:1.47;min-height:100vh;font-feature-settings:"liga" 1;letter-spacing:-0.022em}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}
#app{min-height:calc(100vh - var(--nav-h));padding-top:var(--nav-h);transition:opacity var(--tr)}
.skip-link{position:fixed;top:16px;left:16px;z-index:2100;padding:10px 14px;border-radius:var(--r-md);background:var(--black);color:var(--white);transform:translateY(-200%);transition:transform var(--tr)}
.skip-link:focus{transform:translateY(0);text-decoration:none}
.noscript-banner{padding:12px 16px;background:var(--red-lt);color:var(--red);text-align:center;font-size:.87rem;font-weight:600}

/* ── Typography ── */
h1{font-size:1.75rem;font-weight:600;line-height:1.3;letter-spacing:-.02em}
h2{font-size:1.25rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
h3{font-size:1.05rem;font-weight:600;line-height:1.4}
.text-sm{font-size:.87rem}.text-xs{font-size:.8rem}.text-muted{color:var(--text2)}

/* ── Layout ── */
.page-wrap{max-width:var(--max-w);margin:0 auto;padding:40px 24px 80px}
.page-hd{margin-bottom:32px}
.page-hd h1{margin-bottom:6px}
.page-hd p{color:var(--text2);font-size:.93rem}
.section{margin-bottom:48px}
.section__label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:16px}

/* ── Navigation ── */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,0.85);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:none;box-shadow:var(--shadow-ring);z-index:1000;display:flex;align-items:center;padding:0 24px}
.nav__inner{max-width:var(--max-w);margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav__brand{font-size:1.1rem;font-weight:700;color:var(--black);text-decoration:none;letter-spacing:-.03em;flex-shrink:0}
.nav__brand:hover{text-decoration:none}
.nav__links{display:flex;align-items:center;gap:4px;flex:1}
.nav__link{font-size:.87rem;font-weight:500;color:var(--text2);padding:6px 12px;border-radius:var(--r-md);text-decoration:none;transition:color var(--tr),background var(--tr);white-space:nowrap}
.nav__link:hover{color:var(--text);background:var(--bg);text-decoration:none}
.nav__link--on{color:var(--text);background:var(--bg)}
.nav__right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav__user{font-size:.87rem;font-weight:500;color:var(--text);padding:6px 12px}
.nav__mob{display:none;background:none;border:none;font-size:1.3rem;padding:6px;color:var(--text)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.87rem;font-weight:500;padding:8px 16px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:all var(--tr);text-decoration:none;white-space:nowrap;line-height:1.4}
.btn:hover{text-decoration:none}
.btn--pri{background:var(--black);color:var(--white);border-color:var(--black)}
.btn--pri:hover{background:#333;border-color:#333}
.btn--blue{background:var(--blue);color:var(--white);border-color:var(--blue)}
.btn--blue:hover{background:var(--blue-h);border-color:var(--blue-h)}
.btn--out{background:var(--white);color:var(--text);border-color:var(--border)}
.btn--out:hover{background:var(--bg);border-color:#ccc}
.btn--ghost{background:transparent;color:var(--text2);border:none;padding:6px 10px}
.btn--ghost:hover{color:var(--text);background:var(--bg)}
.btn--sm{font-size:.8rem;padding:5px 10px}
.btn--full{width:100%}
.btn--danger{background:var(--white);color:var(--red);border-color:var(--red)}
.btn--danger:hover{background:var(--red-lt)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Forms ── */
.fg{margin-bottom:20px}
.fl{display:block;font-size:.87rem;font-weight:500;margin-bottom:6px;color:var(--text)}
.fh{font-size:.8rem;color:var(--text3);margin-top:4px}
.fi{width:100%;min-height:44px;padding:9px 12px;font-size:.93rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--white);color:var(--text);transition:border-color var(--tr);outline:none}
.fi:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,255,.1)}
.fi::placeholder{color:var(--text3)}
textarea.fi{min-height:100px;resize:vertical;line-height:1.5}
select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-check{display:flex;align-items:flex-start;gap:8px;font-size:.87rem;cursor:pointer}
.f-check input[type="checkbox"]{margin-top:3px;flex-shrink:0}

/* ── Cards ── */
.card{background:var(--white);border:none;border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card)}

/* ── Tabs ── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:24px}
.tab{font-size:.87rem;font-weight:500;color:var(--text2);padding:10px 16px;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--tr);white-space:nowrap}
.tab:hover{color:var(--text)}
.tab--on{color:var(--text);border-bottom-color:var(--black)}

/* ── Item List ── */
.il{display:flex;flex-direction:column}
.ir{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border-lt)}
.ir:last-child{border-bottom:none}
.ir__body{flex:1;min-width:0}
.ir__title{font-weight:500;font-size:.93rem;margin-bottom:2px}
.ir__title a{color:var(--text);text-decoration:none}
.ir__title a:hover{text-decoration:underline}
.ir__meta{font-size:.8rem;color:var(--text2)}
.ir__acts{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* ── Progress Bar ── */
.pb{height:4px;background:var(--border-lt);border-radius:2px;overflow:hidden;margin-top:8px}
.pb__fill{height:100%;background:var(--blue);border-radius:2px;transition:width 300ms ease}
.pb--ok .pb__fill{background:var(--green)}

/* ── Stats Grid ── */
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:32px}
.sc{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.sc__val{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:4px}
.sc__lbl{font-size:.8rem;color:var(--text2)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;font-size:.73rem;font-weight:600;padding:2px 8px;border-radius:10px;letter-spacing:.02em}
.badge--ok{background:var(--green-lt);color:var(--green)}
.badge--warn{background:var(--orange-lt);color:var(--orange)}
.badge--err{background:var(--red-lt);color:var(--red)}
.badge--info{background:var(--blue-lt);color:var(--blue)}
.badge--mute{background:#ececec;color:#424242}

/* ── Status Messages ── */
.smsg{font-size:.87rem;padding:10px 14px;border-radius:var(--r-md);margin-top:12px}
.smsg:empty{display:none}
.smsg--err{background:var(--red-lt);color:var(--red)}
.smsg--ok{background:var(--green-lt);color:var(--green)}
.smsg--info{background:var(--blue-lt);color:var(--blue)}

/* ── Empty State ── */
.empty{text-align:center;padding:60px 24px;color:var(--text2)}
.empty h3{margin-bottom:8px;color:var(--text)}
.empty p{margin-bottom:20px;font-size:.93rem}

/* ── Table ── */
.dt{width:100%;border-collapse:collapse;font-size:.87rem}
.dt th{text-align:left;font-weight:600;padding:10px 12px;border-bottom:2px solid var(--border);font-size:.8rem;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.dt td{padding:12px;border-bottom:1px solid var(--border-lt);vertical-align:middle}
.dt tr:last-child td{border-bottom:none}
.dt tr:hover td{background:var(--bg)}

/* ── Auth Layout ── */
.auth{display:flex;min-height:calc(100vh - var(--nav-h))}
.auth__aside{flex:0 0 420px;background:var(--black);color:var(--white);padding:60px 48px;display:flex;flex-direction:column;justify-content:center}
.auth__aside-ey{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:16px}
.auth__aside h1{font-size:1.5rem;line-height:1.35;margin-bottom:16px;color:var(--white)}
.auth__aside p{font-size:.93rem;color:rgba(255,255,255,.7);line-height:1.6}
.auth__main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.auth-card{width:100%;max-width:420px}
.auth-card__back{font-size:.8rem;color:var(--text2);display:inline-block;margin-bottom:24px}
.auth-card__hd{margin-bottom:32px}
.auth-card__hd h2{font-size:1.5rem;margin-bottom:8px}
.auth-card__hd p{color:var(--text2);font-size:.93rem}
.auth-card__form{display:flex;flex-direction:column;gap:20px}
.auth-card__div{text-align:center;color:var(--text3);font-size:.8rem;margin:24px 0;position:relative}
.auth-card__div::before,.auth-card__div::after{content:'';position:absolute;top:50%;width:calc(50% - 60px);height:1px;background:var(--border)}
.auth-card__div::before{left:0}.auth-card__div::after{right:0}
.auth-card__links{margin-top:24px;font-size:.87rem;color:var(--text2);display:flex;flex-direction:column;gap:6px}
.auth-social{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:9px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--white);color:var(--text);font-size:.87rem;font-weight:500;cursor:pointer;transition:background var(--tr)}
.auth-social:hover{background:var(--bg)}
.auth-legal{font-size:.8rem;color:var(--text3);margin-top:20px;line-height:1.5}
.auth-legal button{background:none;border:none;color:var(--blue);font-size:inherit;padding:0;cursor:pointer;text-decoration:underline}
.auth-notice{background:var(--blue-lt);color:var(--blue);padding:12px 16px;border-radius:var(--r-md);font-size:.87rem;margin-bottom:24px;line-height:1.5}

/* ── Landing Hero ── */
.hero{max-width:var(--max-w);margin:0 auto;padding:80px 24px 60px;text-align:center}
.hero h1{font-size:2.5rem;letter-spacing:-.03em;margin-bottom:16px;max-width:720px;margin-left:auto;margin-right:auto}
.hero p{font-size:1.05rem;color:var(--text2);max-width:560px;margin:0 auto 32px;line-height:1.6}
.hero__acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Landing Sections ── */
.lsec{max-width:var(--max-w);margin:0 auto;padding:0 24px 64px}
.lsec__hd{margin-bottom:32px}
.lsec__hd h2{font-size:1.5rem;margin-bottom:8px}
.lsec__hd p{color:var(--text2);font-size:.93rem}

.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

.lcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;transition:border-color var(--tr);cursor:pointer;text-decoration:none;color:var(--text);display:block}
.lcard:hover{border-color:#ccc;text-decoration:none}
.lcard__title{font-weight:600;font-size:.93rem;margin-bottom:4px}
.lcard__sub{font-size:.8rem;color:var(--text2);margin-bottom:8px}
.lcard__tag{font-size:.73rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}

.linfo{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.linfo-card{padding:24px 0}
.linfo-card h3{margin-bottom:8px}
.linfo-card p{font-size:.87rem;color:var(--text2);line-height:1.6}

.lsteps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;counter-reset:step}
.lstep{counter-increment:step;padding:24px 0}
.lstep::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--black);color:var(--white);font-size:.8rem;font-weight:700;margin-bottom:12px}
.lstep h3{margin-bottom:6px;font-size:.93rem}
.lstep p{font-size:.87rem;color:var(--text2);line-height:1.6}

/* ── Footer ── */
.footer{background:var(--black);color:rgba(255,255,255,.7);padding:48px 24px 32px}
.footer__inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;margin-bottom:40px}
.footer__brand{font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:12px}
.footer__desc{font-size:.87rem;line-height:1.6;max-width:280px}
.footer__col h4{color:var(--white);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.footer__col a{display:block;font-size:.87rem;color:rgba(255,255,255,.6);margin-bottom:10px;text-decoration:none}
.footer__col a:hover{color:var(--white);text-decoration:none}
.footer__btm{max-width:var(--max-w);margin:0 auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:rgba(255,255,255,.58);display:flex;justify-content:space-between;align-items:center}

/* ── Course Grid ── */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.ccard{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;display:flex;flex-direction:column;gap:12px;transition:border-color var(--tr)}
.ccard:hover{border-color:#ccc}
.ccard__title{font-weight:600;font-size:1rem}
.ccard__title a{color:var(--text)}.ccard__title a:hover{text-decoration:underline}
.ccard__desc{font-size:.87rem;color:var(--text2);line-height:1.5;line-clamp:2;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.ccard__meta{font-size:.8rem;color:var(--text3);display:flex;gap:16px;flex-wrap:wrap}
.ccard__acts{display:flex;gap:8px;margin-top:auto}

/* ── Lesson Page ── */
.lp{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - var(--nav-h))}
.lp-side{background:var(--white);border-right:1px solid var(--border);padding:20px 0;overflow-y:auto;max-height:calc(100vh - var(--nav-h));position:sticky;top:var(--nav-h)}
.lp-side__hd{padding:0 16px 16px;border-bottom:1px solid var(--border-lt);margin-bottom:8px}
.lp-side__hd h3{font-size:.87rem;margin-bottom:2px}
.lp-side__hd a{font-size:.8rem;color:var(--text2)}
.lp-side__mod{padding:12px 16px 4px;font-size:.73rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.lp-side__it{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:.87rem;color:var(--text2);cursor:pointer;transition:background var(--tr);text-decoration:none;border:none;background:none;width:100%;text-align:left}
.lp-side__it:hover{background:var(--bg);text-decoration:none}
.lp-side__it--on{background:var(--blue-lt);color:var(--blue);font-weight:500}
.lp-side__it--done{color:var(--green)}
.lp-side__ck{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.6rem}
.lp-side__it--done .lp-side__ck{background:var(--green);border-color:var(--green);color:white}
.lp-side__it--done .lp-side__ck::after{content:'\2713'}
.lp-side__it--on .lp-side__ck{border-color:var(--blue)}
.lp-main{padding:32px 48px 80px;max-width:800px}
.lp-main h1{margin-bottom:8px}
.lp-main__mod{font-size:.8rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.lp-main__body{font-size:.93rem;line-height:1.75;color:var(--text);margin:24px 0}
.lp-main__body p{margin-bottom:16px}
.lp-video{width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r-lg);margin-bottom:24px;overflow:hidden}
.lp-video iframe,.lp-video video{width:100%;height:100%;border:none}
.lp-acts{display:flex;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-lt)}

/* ── Course Detail ── */
.cd{max-width:var(--max-w);margin:0 auto;padding:40px 24px 80px}
.cd__hd{margin-bottom:40px}
.cd__hd h1{margin-bottom:8px}
.cd__hd-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.87rem;color:var(--text2);margin-bottom:16px}
.cd__hd-acts{display:flex;gap:12px;flex-wrap:wrap}
.cd__grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
.cd__side{position:sticky;top:calc(var(--nav-h) + 24px)}
.cd__side .card{margin-bottom:16px}

/* ── Module Accordion ── */
.ml{display:flex;flex-direction:column;gap:8px}
.mb{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.mb__hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-weight:600;font-size:.93rem;color:var(--text);transition:background var(--tr)}
.mb__hd:hover{background:var(--bg)}
.mb__cnt{font-weight:400;font-size:.8rem;color:var(--text3)}
.mb__body{border-top:1px solid var(--border-lt)}
.mb__body--hide{display:none}
.mb__it{display:flex;align-items:center;gap:12px;padding:12px 20px;font-size:.87rem;border-bottom:1px solid var(--border-lt);color:var(--text);text-decoration:none}
.mb__it:last-child{border-bottom:none}
.mb__it:hover{background:var(--bg);text-decoration:none}
.mb__it-type{font-size:.73rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;width:64px;flex-shrink:0}
.mb__it-title{flex:1}
.mb__it-st{font-size:.8rem;color:var(--text3);flex-shrink:0}

/* ── Coach Panel ── */
.coach{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;flex-direction:column;max-height:480px}
.coach__hd{padding:14px 20px;border-bottom:1px solid var(--border-lt);font-weight:600;font-size:.87rem}
.coach__msgs{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.coach__msg{padding:10px 14px;border-radius:var(--r-lg);font-size:.87rem;line-height:1.5;max-width:85%}
.coach__msg--bot{background:var(--bg);color:var(--text);align-self:flex-start}
.coach__msg--user{background:var(--black);color:var(--white);align-self:flex-end}
.coach__in{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border-lt)}
.coach__in input{flex:1;border:1px solid var(--border);border-radius:var(--r-md);padding:8px 12px;font-size:.87rem;outline:none}
.coach__in input:focus{border-color:var(--blue)}
.coach__in button{background:var(--black);color:var(--white);border:none;border-radius:var(--r-md);padding:8px 14px;font-size:.8rem;font-weight:500}

/* ── Notification ── */
.ni{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-lt);align-items:flex-start}
.ni:last-child{border-bottom:none}
.ni__dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:6px}
.ni__dot--read{background:transparent}
.ni__body{flex:1}
.ni__title{font-weight:500;font-size:.93rem;margin-bottom:2px}
.ni__text{font-size:.87rem;color:var(--text2);line-height:1.5}
.ni__date{font-size:.73rem;color:var(--text3);margin-top:4px}
.ni__act{flex-shrink:0}

/* ── Quiz ── */
.qp{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:16px}
.qp__title{font-weight:600;margin-bottom:4px}
.qp__desc{font-size:.87rem;color:var(--text2);margin-bottom:16px}
.qq{margin-bottom:24px}
.qq__text{font-weight:500;margin-bottom:10px;font-size:.93rem}
.qo{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:6px;cursor:pointer;transition:border-color var(--tr),background var(--tr);font-size:.87rem}
.qo:hover{border-color:#ccc;background:var(--bg)}
.qo--sel{border-color:var(--blue);background:var(--blue-lt)}
.qo input[type="radio"]{flex-shrink:0}

/* ── Manage Panel (Teacher) ── */
.mp{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:16px}
.mp__hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-lt)}
.mp__hd h3{font-size:.93rem}
.mp__body{padding:16px 20px}
.mp__empty{text-align:center;padding:32px;color:var(--text3);font-size:.87rem}

/* ── Modal ── */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:var(--white);border-radius:var(--r-lg);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:32px}
.modal__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.modal__hd h2{font-size:1.1rem}
.modal__x{background:none;border:none;font-size:1.2rem;color:var(--text3);cursor:pointer;padding:4px}

/* ── Content Pages ── */
.cp{max-width:720px;margin:0 auto;padding:48px 24px 80px}
.cp h1{margin-bottom:24px}
.cp p{font-size:.93rem;line-height:1.75;color:var(--text2);margin-bottom:16px}
.cp h3{margin-top:32px;margin-bottom:12px}

/* ── Filter Bar ── */
.fbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.fchip{font-size:.8rem;font-weight:500;padding:6px 14px;border:1px solid var(--border);border-radius:20px;background:var(--white);color:var(--text2);cursor:pointer;transition:all var(--tr)}
.fchip:hover{border-color:#ccc}
.fchip--on{background:var(--black);color:var(--white);border-color:var(--black)}

/* ── Loading ── */
.loading{text-align:center;padding:60px 24px;color:var(--text2);font-size:.93rem}

/* ── Responsive ── */
@media(max-width:1024px){
    .cd__grid{grid-template-columns:1fr}
    .cd__side{position:static}
    .footer__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    :root{--nav-h:52px}
    h1{font-size:1.5rem}
    .hero h1{font-size:1.75rem}
    .hero{padding:48px 24px 40px}
    .nav__links{display:none}
    .nav__mob{display:block}
    .nav--open .nav__links{display:flex;flex-direction:column;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);padding:12px 24px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
    .auth{flex-direction:column}
    .auth__aside{flex:none;padding:32px 24px}
    .auth__main{padding:32px 24px}
    .lp{grid-template-columns:1fr}
    .lp-side{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--border)}
    .lp-main{padding:24px}
    .footer__inner{grid-template-columns:1fr;gap:32px}
    .sg{grid-template-columns:1fr 1fr}
    .f-row{grid-template-columns:1fr}
    .lgrid,.cgrid{grid-template-columns:1fr}
}
@media(max-width:480px){
    .page-wrap{padding:24px 16px 60px}
    .hero{padding:32px 16px}
    .lsec{padding:0 16px 48px}
    .sg{grid-template-columns:1fr}
    .hero__acts{flex-direction:column;align-items:center}
}

/* ── Utilities ── */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.hidden{display:none!important}
/* ================================================================
   educatIA Design System — Tesla-Inspired
   ================================================================
    Color Philosophy: Monochrome + one accent (Coursera Blue)
   Typography: Source Sans Pro
   Elevation: Subtle shadows. Depth via cards.
   Borders: Minimal. Separation via whitespace.
   ================================================================ */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    /* Primary */
    --electric-blue: #0056D2;
    --electric-blue-hover: #003E99;
    --electric-blue-light: #E8F0FE;
    --electric-blue-glow: rgba(0, 86, 210, 0.12);

    /* Surfaces */
    --white: #FFFFFF;
    --light-ash: #F5F5F5; /* Coursera section bg */
    --carbon-dark: #1F1F1F; /* Coursera black */
    --frosted-glass: #FFFFFF;
    --dark-surface-1: #272729;
    --dark-surface-2: #262628;
    --dark-surface-3: #28282a;

    /* Text */
    --text-primary: #1d1d1f;
    --text-secondary: #1d1d1f;
    --text-tertiary: #86868b;
    --text-placeholder: #86868b;
    --text-on-dark: #FFFFFF;
    --text-on-dark-secondary: #D9D9D9;

    /* Links */
    --link-light: #0056D2;
    --link-dark: #0056D2;

    /* Borders */
    --border-light: #D9D9D9;
    --border-subtle: #ECECEC;

    /* Typography */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Sizing */
    --hero-title: 3.5rem; /* 56px */
    --section-title: 2.5rem; /* 40px */
    --card-title: 1.25rem; /* 20px */
    --nav-text: 0.875rem; /* 14px */
    --body-text: 1rem; /* 16px */
    --small-text: 0.875rem; /* 14px */
    --tiny-text: 0.75rem; /* 12px */

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;

    /* Layout */
    --max-width: 1200px;
    --nav-height: 104px; /* Taller for double header */
    --sidebar-width: 260px;
    --chat-width: 380px;

    /* Radius - Coursera uses sharp/square elements */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 4px; /* Override pill to be square */
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.4s ease;

    /* Shadows */
    --shadow-soft: 0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
}

/* ===== RESET ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-text);
    font-size: var(--body-text);
    font-weight: 400;
    line-height: 1.47;
    color: var(--text-primary);
    background-color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1;
    letter-spacing: -0.022em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    border: none;
    outline: none;
    background: none;
}

/* ===== NAV POSITIONING ===== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
}

.dropdown-link:hover {
    color: var(--electric-blue) !important;
}

button {
    cursor: pointer;
}

/* Global SVG icon sizing — all inline SVGs default to 18px */
svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn--lg svg {
    width: 20px;
    height: 20px;
}

.btn--sm svg,
.btn--icon.btn--sm svg {
    width: 16px;
    height: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.016em;
}

/* ===== TYPOGRAPHY UTILITIES ===== */
.text-display {
    font-size: var(--hero-title);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.28px;
}

.text-section-title {
    font-size: var(--section-title);
    font-weight: 600;
    line-height: 1.1;
}

.text-card-title {
    font-family: var(--font-display);
    font-size: var(--card-title);
    font-weight: 700;
    line-height: 1.19;
    letter-spacing: 0.231px;
}

.text-body {
    font-family: var(--font-text);
    font-size: var(--body-text);
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: -0.374px;
    color: var(--text-secondary);
}

.text-small {
    font-family: var(--font-text);
    font-size: var(--small-text);
    font-weight: 400;
    line-height: 1.29;
    letter-spacing: -0.224px;
    color: var(--text-tertiary);
}

.text-tiny {
    font-family: var(--font-text);
    font-size: var(--tiny-text);
    font-weight: 400;
    line-height: 1.33;
    letter-spacing: -0.12px;
    color: var(--text-placeholder);
}

/* ===== LAYOUT UTILITIES ===== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-4xl) 0;
}

.section--full {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section--alt {
    background-color: var(--light-ash);
}

.section--dark {
    background-color: var(--carbon-dark);
    color: var(--text-on-dark);
}

.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ===== NAVIGATION ===== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Coursera subtle shadow */
}

/* We don't use transparent/solid toggle anymore */
.site-nav--transparent, .site-nav--solid {
    background-color: var(--white);
}

.site-nav__top {
    height: 40px;
    background-color: var(--carbon-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 13px;
    padding: 0 var(--space-xl);
}

.site-nav__top-links {
    display: flex;
    gap: var(--space-lg);
    width: 100%;
    max-width: var(--max-width);
}

.site-nav__top-link {
    color: var(--white);
    opacity: 0.8;
    cursor: pointer;
    text-transform: capitalize;
}

.site-nav__top-link.active, .site-nav__top-link:hover {
    opacity: 1;
    font-weight: 600;
}

.site-nav__inner {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-xl);
    background-color: var(--white);
}

.site-nav__inner--student {
    height: var(--nav-height);
    gap: 24px;
}

.site-nav__brand {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.site-nav__student-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-nav__student-link {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    padding: 8px 0;
}

.site-nav__student-link:hover,
.site-nav__student-link.active {
    color: var(--electric-blue);
}

.site-nav__student-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 2px;
    border-radius: 999px;
    background: var(--electric-blue);
}

.site-nav__search--student {
    max-width: 380px;
}

.site-nav__search-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    border-radius: 0 20px 20px 0;
    background: var(--electric-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-nav__search--student input {
    padding-left: 16px;
    padding-right: 54px;
}

.site-nav__actions--student {
    gap: 6px;
}

.site-nav__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--electric-blue);
    cursor: pointer;
}

.site-nav__links {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: var(--space-lg);
}

.site-nav__explorer {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    margin-right: var(--space-lg);
    font-size: 14px;
}

.site-nav__search {
    flex: 1;
    max-width: 400px;
    position: relative;
    display: flex;
    align-items: center;
}

.site-nav__search input {
    width: 100%;
    border: 1px solid var(--text-primary);
    border-radius: 20px; /* Search input pill */
    padding: 8px 16px 8px 40px;
    font-size: 14px;
    color: var(--text-primary);
}

.site-nav__search svg {
    position: absolute;
    left: 12px;
    color: var(--text-primary);
    width: 16px;
    height: 16px;
}

.site-nav__search-button svg {
    position: static;
    left: auto;
    color: currentColor;
}

.site-nav__link {
    font-size: var(--small-text);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    transition: color var(--transition-base);
    cursor: pointer;
}

.site-nav__link:hover {
    color: var(--electric-blue);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.site-nav__profile-menu {
    position: relative;
}

.site-nav__profile-trigger {
    width: auto;
    padding: 0 10px;
    gap: 4px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
}

.site-nav__profile-avatar,
.site-nav__profile-summary-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0056D2 0%, #1d8cf8 100%);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.site-nav__profile-summary-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.site-nav__profile-avatar img,
.site-nav__profile-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-nav__profile-trigger-caret {
    display: inline-flex;
    align-items: center;
    color: var(--text-tertiary);
}

.site-nav__profile-trigger-caret svg {
    width: 14px;
    height: 14px;
}

.site-nav__profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    background: var(--white);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
    display: none;
}

.site-nav__profile-dropdown.active {
    display: block;
}

.site-nav__profile-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}

.site-nav__profile-summary div {
    min-width: 0;
}

.site-nav__profile-summary strong {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.site-nav__profile-summary span {
    font-size: 12px;
    color: var(--text-tertiary);
}

.site-nav__profile-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text-secondary);
}

.site-nav__profile-link:hover {
    background: var(--light-ash);
    color: var(--electric-blue);
}

.site-nav__profile-link svg {
    width: 16px;
    height: 16px;
}

.site-nav__profile-link--button {
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.site-nav__icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
    position: relative;
}

.site-nav__icon-btn:hover {
    color: var(--electric-blue);
}

.site-nav--transparent .site-nav__icon-btn,
.site-nav--solid .site-nav__icon-btn {
    color: var(--text-on-dark);
}

.site-nav--transparent .site-nav__icon-btn:hover,
.site-nav--solid .site-nav__icon-btn:hover {
    color: var(--text-on-dark-secondary);
}

.site-nav__icon-btn svg {
    width: 20px;
    height: 20px;
}

.site-nav__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: var(--electric-blue);
    border-radius: var(--radius-full);
}

.site-nav__mobile-toggle {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.site-nav__mobile-toggle svg {
    width: 22px;
    height: 22px;
}

/* Mobile menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white);
    z-index: 999;
    padding: calc(var(--nav-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
    flex-direction: column;
    gap: var(--space-sm);
    overflow-y: auto;
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu__link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}

.mobile-menu__link:hover {
    background-color: var(--electric-blue-light);
}

.mobile-menu__divider {
    height: 1px;
    background-color: var(--border-light);
    margin: var(--space-sm) 0;
}

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: var(--carbon-dark); /* Apple typical hero bg */
    color: var(--text-on-dark);
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 980px;
    padding: 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__title {
    font-size: var(--hero-title);
    font-weight: 600;
    color: var(--text-on-dark);
    margin-bottom: var(--space-sm);
    line-height: 1.07;
    letter-spacing: -0.28px;
}

.hero__subtitle {
    font-size: 1.3125rem; /* 21px */
    font-weight: 400;
    color: var(--text-on-dark);
    margin-bottom: var(--space-xl);
    line-height: 1.19;
    letter-spacing: 0.231px;
}

.hero__actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

/* ===== BUTTONS — Apple-inspired pill system ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 17px;
    font-weight: 400;
    padding: 8px 20px;
    border-radius: 980px;
    min-height: 40px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: -0.01em;
}

.btn:focus {
    outline: 2px solid var(--electric-blue);
    outline-offset: 2px;
}

.btn:active {
    opacity: 0.82;
}

.btn--primary {
    background-color: #0071e3;
    color: var(--white);
}

.btn--primary:hover {
    background-color: #0077ed;
}

.btn--secondary {
    background-color: #f5f5f7;
    color: #1d1d1f;
}

.btn--secondary:hover {
    background-color: #e8e8ed;
}

.btn--outline {
    background-color: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
}

.btn--outline:hover {
    background-color: rgba(0, 102, 204, 0.06);
}

.btn--dark-outline {
    background-color: transparent;
    color: #1d1d1f;
    border: 1px solid #1d1d1f;
}

.btn--dark-outline:hover {
    background-color: rgba(29, 29, 31, 0.04);
}

.btn--ghost {
    background-color: transparent;
    color: #0066cc;
    font-weight: 400;
    padding: 8px 16px;
}

.btn--ghost:hover {
    text-decoration: underline;
}

.btn--dark {
    background-color: #1d1d1f;
    color: var(--white);
}

.btn--dark:hover {
    background-color: #000000;
}

.btn--sm {
    min-height: 32px;
    min-width: auto;
    padding: 5px 14px;
    font-size: 14px;
}

.btn--lg {
    min-height: 48px;
    padding: 12px 32px;
    font-size: 18px;
    font-weight: 300;
}

.btn--icon {
    min-width: auto;
    width: 40px;
    height: 40px;
    padding: 0;
}

.btn--icon svg {
    width: 20px;
    height: 20px;
}

.btn--full {
    width: 100%;
}

/* ===== CARDS ===== */
.card {
    background-color: var(--light-ash);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: none; /* Apple flat by default */
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card__image img {
    transform: scale(1.03);
}

.card__badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    font-size: var(--tiny-text);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background-color: var(--frosted-glass);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
}

.card__body {
    padding: var(--space-lg);
}

.card__tag {
    font-size: var(--tiny-text);
    font-weight: 500;
    color: var(--electric-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.card__title {
    font-family: var(--font-display);
    font-size: var(--card-title);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.19;
    letter-spacing: 0.231px;
}

.card__desc {
    font-size: var(--small-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.card__meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.card__meta-item svg {
    width: 14px;
    height: 14px;
}

/* Feature Card (for objectives section) */
.feature-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background-color: var(--light-ash);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

.feature-card__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--electric-blue-light);
    color: var(--electric-blue);
}

.feature-card__icon svg {
    width: 28px;
    height: 28px;
}

.feature-card__title {
    font-family: var(--font-display);
    font-size: var(--card-title);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.14;
    letter-spacing: 0.196px;
}

.feature-card__desc {
    font-size: var(--small-text);
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Stat Card */
.stat-card {
    text-align: center;
    padding: var(--space-xl);
}

.stat-card__number {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--electric-blue);
    margin-bottom: var(--space-xs);
    line-height: 1;
}

.stat-card__label {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

/* Course Card (in dashboard) */
.course-card {
    background: var(--light-ash);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: none;
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.course-card__image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.course-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card__progress-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-light);
}

.course-card__progress-fill {
    height: 100%;
    background: var(--electric-blue);
    transition: width 0.5s ease;
}

.course-card__body {
    padding: var(--space-md);
}

.course-card__category {
    font-size: var(--tiny-text);
    font-weight: 500;
    color: var(--electric-blue);
    margin-bottom: 4px;
}

.course-card__title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.course-card__instructor {
    font-size: var(--tiny-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

.course-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
}

.course-card__stat {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
    display: flex;
    align-items: center;
    gap: 4px;
}

.course-card__stat svg {
    width: 12px;
    height: 12px;
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: var(--small-text);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.form-input {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-md);
    font-size: var(--body-text);
    color: var(--text-primary);
    background-color: var(--white);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base);
}

.form-input:focus {
    border-color: var(--electric-blue);
}

.form-input::placeholder {
    color: var(--text-placeholder);
}

.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--space-md);
    font-size: var(--body-text);
    color: var(--text-primary);
    background-color: var(--white);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base);
    resize: vertical;
}

.form-textarea:focus {
    border-color: var(--electric-blue);
}

.form-select {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-md);
    font-size: var(--body-text);
    color: var(--text-primary);
    background-color: var(--white);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5E62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.form-select:focus {
    border-color: var(--electric-blue);
}

.form-hint {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
    margin-top: var(--space-xs);
}

.form-error {
    font-size: var(--tiny-text);
    color: #D32F2F;
    margin-top: var(--space-xs);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--electric-blue);
    cursor: pointer;
}

.form-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--text-placeholder);
    font-size: var(--small-text);
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--border-light);
}

/* File Upload */
.file-upload {
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

.file-upload:hover {
    border-color: var(--electric-blue);
    background-color: var(--electric-blue-light);
}

.file-upload__icon {
    margin: 0 auto var(--space-md);
    color: var(--text-placeholder);
}

.file-upload__icon svg {
    width: 32px;
    height: 32px;
}

.file-upload__text {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

.file-upload__text span {
    color: var(--electric-blue);
    font-weight: 500;
}

/* ===== SIDEBAR ===== */
.layout-with-sidebar {
    display: flex;
    min-height: calc(100vh - var(--nav-height));
    padding-top: var(--nav-height);
}

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--white);
    border-right: 1px solid var(--border-light);
    padding: var(--space-lg) 0;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 100;
}

.sidebar__section {
    margin-bottom: var(--space-lg);
}

.sidebar__section-title {
    font-size: var(--tiny-text);
    font-weight: 600;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 var(--space-lg);
    margin-bottom: var(--space-sm);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px var(--space-lg);
    font-size: var(--body-text);
    font-weight: 400;
    color: var(--text-tertiary);
    transition: color var(--transition-base), background-color var(--transition-base);
    cursor: pointer;
    position: relative;
}

.sidebar__link:hover {
    color: var(--text-primary);
    background-color: var(--electric-blue-light);
}

.sidebar__link.active {
    color: var(--electric-blue);
    font-weight: 500;
}

.sidebar__link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background-color: var(--electric-blue);
    border-radius: 0 2px 2px 0;
}

.sidebar__link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar__link-badge {
    margin-left: auto;
    font-size: var(--tiny-text);
    font-weight: 600;
    color: var(--electric-blue);
    background-color: var(--electric-blue-light);
    padding: 2px 8px;
    border-radius: 10px;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: var(--space-xl);
    min-height: calc(100vh - var(--nav-height));
}

/* ===== DASHBOARD ===== */
.dashboard-header {
    margin-bottom: var(--space-xl);
}

.dashboard-header__greeting {
    font-size: var(--section-title);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.dashboard-header__subtitle {
    font-size: var(--body-text);
    color: var(--text-tertiary);
}

.dashboard-section {
    margin-bottom: var(--space-2xl);
}

.dashboard-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.learning-dashboard {
    min-height: calc(100vh - var(--nav-height));
    padding-top: var(--nav-height);
    background: #f6f8fb;
}

.learning-dashboard--loading {
    display: flex;
    align-items: center;
}

.learning-dashboard__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}

.learning-dashboard__loading {
    min-height: calc(100vh - var(--nav-height) - 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-secondary);
}

.learning-dashboard__loading-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--electric-blue-light);
    color: var(--electric-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-dashboard__loading-icon svg {
    width: 24px;
    height: 24px;
}

.learning-dashboard__header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.learning-dashboard__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0a3a8f;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    flex-shrink: 0;
}

.learning-dashboard__welcome {
    min-width: 0;
}

.learning-dashboard__welcome h1 {
    font-size: 2.1rem;
    line-height: 1.05;
    margin-bottom: 8px;
}

.learning-dashboard__welcome p {
    font-size: 15px;
    color: var(--text-secondary);
}

.learning-dashboard__welcome a {
    color: var(--electric-blue);
    font-weight: 600;
}

.learning-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.learning-stat-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    padding: 18px 20px;
}

.learning-stat-card__value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.learning-stat-card__label {
    font-size: 13px;
    color: var(--text-tertiary);
}

.learning-dashboard__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.learning-dashboard__main,
.learning-dashboard__coach {
    display: grid;
    gap: 20px;
    align-self: start;
}

.learning-dashboard__overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.learning-dashboard__coach {
    position: sticky;
    top: calc(var(--nav-height) + 20px);
}

.learning-panel {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.03);
}

.learning-panel--soft {
    background: #f3f7ff;
    border-color: #dce7ff;
}

.learning-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.learning-panel__header h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.learning-panel__header span,
.learning-panel__header a {
    font-size: 13px;
    color: var(--electric-blue);
    font-weight: 600;
}

.learning-panel__header--stacked {
    align-items: flex-start;
}

.learning-panel__header--stacked p {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.learning-panel__header--compact {
    margin-bottom: 18px;
}

.learning-goals {
    display: grid;
    gap: 14px;
}

.learning-goal {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.learning-goal__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #d4dbe6;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.learning-goal__icon.completed {
    background: #e8f7eb;
    border-color: #91d9a7;
    color: #0f8c43;
}

.learning-goal__icon svg {
    width: 14px;
    height: 14px;
}

.learning-goal__body a {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.learning-goal__body p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.learning-goal__counter {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.learning-plan-days {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.learning-plan-day {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-plan-day.active {
    border-color: #cfdcff;
    background: #eef4ff;
    color: var(--electric-blue);
}

.learning-calendar {
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
}

.learning-calendar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.learning-calendar__top strong {
    font-size: 15px;
    text-transform: capitalize;
}

.learning-calendar__arrows {
    display: flex;
    gap: 8px;
}

.learning-calendar__arrows button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-calendar__arrows button svg {
    width: 14px;
    height: 14px;
}

.learning-calendar__weekdays,
.learning-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.learning-calendar__weekdays {
    margin-bottom: 8px;
}

.learning-calendar__weekdays span {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    text-transform: lowercase;
}

.learning-calendar__day {
    min-height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.learning-calendar__day--today {
    border: 2px solid #6c3fe3;
    color: #6c3fe3;
    font-weight: 700;
}

.learning-calendar__day--muted {
    background: transparent;
}

.learning-plan-notes {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.learning-plan-notes div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.learning-plan-notes span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6c3fe3;
    flex-shrink: 0;
}

.learning-summary-list {
    display: grid;
    gap: 14px;
}

.learning-summary-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.learning-summary-list__item span {
    color: var(--text-secondary);
}

.learning-summary-list__item strong {
    color: var(--text-primary);
}

.learning-coach-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.learning-coach-strip__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: lowercase;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.learning-coach-strip h2 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.learning-coach-strip p {
    font-size: 14px;
    color: var(--text-secondary);
}

.learning-coach-strip__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.learning-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.learning-tab {
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--white);
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 700;
}

.learning-tab.active {
    background: #344054;
    border-color: #344054;
    color: var(--white);
}

.learning-course-list {
    display: grid;
}

.learning-course-row {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.9fr) auto auto;
    gap: 16px;
    align-items: center;
    padding: 22px 0;
    border-top: 1px solid var(--border-subtle);
}

.learning-course-row:first-child {
    border-top: none;
    padding-top: 8px;
}

.learning-course-row__details h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.learning-course-row__meta,
.learning-course-row__date {
    font-size: 13px;
    color: var(--text-secondary);
}

.learning-course-row__date {
    margin-top: 6px;
}

.learning-course-row__progress {
    margin-top: 14px;
}

.learning-course-row__progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.learning-course-row__progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6c3fe3 0%, #0056D2 100%);
}

.learning-course-row__foot {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.learning-course-row__activity {
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: #fbfcfe;
    padding: 16px;
    display: grid;
    gap: 6px;
}

.learning-course-row__activity strong {
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
}

.learning-course-row__activity span {
    font-size: 12px;
    color: var(--text-tertiary);
}

.learning-course-row__button {
    min-width: 120px;
}

.learning-course-row__more {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-tertiary);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-course-row__more:hover {
    background: #f3f4f6;
}

.learning-coach-panel__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.learning-coach-panel__hero {
    text-align: center;
    margin-bottom: 18px;
}

.learning-coach-panel__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: #eef4ff;
    color: var(--electric-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-coach-panel__avatar svg {
    width: 28px;
    height: 28px;
}

.learning-coach-panel__hero h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.learning-coach-panel__hero p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.learning-coach-panel__quick-actions {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.learning-coach-panel__context {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
    margin-bottom: 16px;
}

.learning-coach-panel__context span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.learning-coach-panel__context strong {
    font-size: 14px;
    color: var(--text-primary);
}

.learning-coach-panel__messages {
    display: grid;
    gap: 12px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 4px;
}

.learning-coach-message {
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
}

.learning-coach-message--bot {
    background: #f3f7ff;
    color: var(--text-primary);
}

.learning-coach-message--user {
    background: #0056D2;
    color: var(--white);
}

.learning-coach-panel__composer {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 8px 10px;
}

.learning-coach-panel__composer input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.learning-coach-panel__composer button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--electric-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-coach-panel__composer button:disabled,
.learning-coach-panel__composer input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.learning-empty-state {
    padding: 42px 24px;
    text-align: center;
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    background: var(--white);
}

.learning-empty-state--compact {
    margin-top: 8px;
}

.learning-empty-state__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #eef4ff;
    color: var(--electric-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.learning-empty-state__icon svg {
    width: 24px;
    height: 24px;
}

.learning-empty-state h2,
.learning-empty-state h3 {
    margin-bottom: 10px;
}

.learning-empty-state p {
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 18px;
    line-height: 1.6;
}

.teacher-dashboard {
    display: grid;
    gap: 24px;
    max-width: 1400px;
}

.teacher-dashboard__header {
    justify-content: space-between;
}

.teacher-dashboard__header .learning-dashboard__welcome {
    flex: 1;
}

.teacher-dashboard__header-actions {
    margin-left: auto;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.teacher-dashboard__overview-copy {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.teacher-dashboard__course-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.teacher-dashboard__status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.teacher-dashboard__status-badge.is-active {
    color: #0f8c43;
    background: #edf9f0;
    border-color: #cde8d4;
}

.teacher-dashboard__status-badge.is-hidden {
    color: #5f6b7a;
    background: #f4f6f8;
    border-color: #dde3ea;
}

.teacher-dashboard__activity-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.teacher-dashboard__activity-meta span {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.2;
}

.teacher-dashboard__course-preview {
    text-decoration: none;
}

.teacher-dashboard__course-preview svg {
    width: 18px;
    height: 18px;
}

.teacher-dashboard__side-panel .learning-coach-panel__messages {
    max-height: none;
}

.dashboard-section__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.dashboard-section__action {
    font-size: var(--small-text);
    color: var(--electric-blue);
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.dashboard-section__action:hover {
    opacity: 0.8;
}

/* Resume Card (prominent) */
.resume-card {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    background: var(--light-ash);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    cursor: pointer;
    transition: transform var(--transition-base);
}

.resume-card:hover {
    transform: translateY(-2px);
}

.resume-card__image {
    width: 200px;
    height: 120px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.resume-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume-card__content {
    flex: 1;
}

.resume-card__tag {
    font-size: var(--tiny-text);
    font-weight: 500;
    color: var(--electric-blue);
    margin-bottom: var(--space-sm);
}

.resume-card__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.resume-card__lesson {
    font-size: var(--small-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

.resume-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.stats-row__item {
    padding: var(--space-lg);
    background: var(--light-ash);
    border-radius: var(--radius-md);
}

.stats-row__number {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.stats-row__label {
    font-size: var(--tiny-text);
    color: var(--text-tertiary);
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
    height: 6px;
    background-color: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background-color: var(--electric-blue);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-bar--lg {
    height: 8px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-xs);
}

.progress-info__text {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.progress-info__percent {
    font-size: var(--tiny-text);
    font-weight: 500;
    color: var(--electric-blue);
}

/* ===== CHATBOT ===== */
.chat-panel {
    width: var(--chat-width);
    background: var(--white);
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-height));
    position: fixed;
    top: var(--nav-height);
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform var(--transition-base);
}

.chat-panel.open {
    transform: translateX(0);
}

.chat-panel__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-panel__title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.chat-panel__title-dot {
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
    border-radius: var(--radius-full);
}

.chat-panel__messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.teacher-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #fff 0%, #e8f0fe 42%, #b6d4fe 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 86, 210, 0.18);
    animation: teacher-float 3s ease-in-out infinite;
}

.teacher-avatar__svg {
    width: 34px;
    height: 34px;
}

@keyframes teacher-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.anti-cheat-banner {
    background: #e8f0fe;
    border: 1px solid rgba(0, 86, 210, 0.22);
    color: #0056D2;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.anti-cheat-banner--danger {
    background: #fff3f1;
    border-color: rgba(211, 47, 47, 0.25);
    color: #A72828;
}

.chat-message {
    max-width: 85%;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--small-text);
    line-height: 1.5;
}

.chat-message--bot {
    background-color: var(--light-ash);
    color: var(--text-secondary);
    align-self: flex-start;
    border-bottom-left-radius: var(--radius-sm);
}

.chat-message--user {
    background-color: var(--electric-blue);
    color: var(--text-on-dark);
    align-self: flex-end;
    border-bottom-right-radius: var(--radius-sm);
}

.chat-message__time {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
    margin-top: var(--space-xs);
}

.chat-panel__input-area {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.chat-panel__input {
    flex: 1;
    height: 40px;
    padding: 0 var(--space-md);
    font-size: var(--small-text);
    color: var(--text-primary);
    background: var(--light-ash);
    border-radius: 20px;
    border: none;
}

.chat-panel__input::placeholder {
    color: var(--text-placeholder);
}

.chat-panel__send {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--electric-blue);
    color: var(--text-on-dark);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base);
    flex-shrink: 0;
}

.chat-panel__send:hover {
    background-color: var(--electric-blue-hover);
}

.chat-panel__send svg {
    width: 18px;
    height: 18px;
}

/* ===== TABLES ===== */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th {
    font-size: var(--tiny-text);
    font-weight: 600;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.data-table tbody td {
    font-size: var(--body-text);
    color: var(--text-secondary);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background-color: var(--electric-blue-light);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== NOTIFICATIONS ===== */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    transition: background-color var(--transition-base);
    cursor: pointer;
}

.notification-item:hover {
    background-color: var(--electric-blue-light);
}

.notification-item--unread {
    background-color: var(--electric-blue-light);
}

.notification-item__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--light-ash);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.notification-item__icon--blue {
    background-color: var(--electric-blue-light);
    color: var(--electric-blue);
}

.notification-item__icon svg {
    width: 18px;
    height: 18px;
}

.notification-item__content {
    flex: 1;
}

.notification-item__title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.notification-item__body {
    font-size: var(--small-text);
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.notification-item__time {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.notification-item__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.notification-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--electric-blue);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.notification-item__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 110px;
}

.notification-item__done {
    font-size: 12px;
    font-weight: 700;
    color: #137333;
}

.notifications-page {
    background:
        radial-gradient(circle at top left, rgba(0, 86, 210, 0.08), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 28%, #ffffff 100%);
}

.notifications-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    padding: 18px 0 8px;
}

.notifications-hero h1 {
    font-size: clamp(2rem, 3vw, 2.8rem);
    margin-bottom: 10px;
}

.notifications-hero p {
    max-width: 720px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.notifications-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.notifications-panel {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    display: grid;
    gap: 18px;
}

.notifications-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.notifications-summary__card {
    padding: 20px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.notifications-summary__card strong {
    display: block;
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.notifications-summary__card span {
    color: var(--text-tertiary);
    font-size: 13px;
}

.notifications-filter-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notifications-filter {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.notifications-filter span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--electric-blue);
    font-size: 12px;
}

.notifications-filter--active {
    background: var(--carbon-dark);
    border-color: var(--carbon-dark);
    color: var(--white);
}

.notifications-filter--active span {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

.notifications-list {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.notifications-empty {
    min-height: 260px;
    padding: 70px 28px;
    text-align: center;
    border-radius: 8px;
    border: 1px dashed rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.88);
    display: grid;
    place-content: center;
}

.notifications-empty h3 {
    margin-bottom: 8px;
}

.notifications-empty p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ===== PROFILE ===== */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-2xl) 0;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--electric-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--electric-blue);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero-card {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.profile-hero-card__media {
    flex-shrink: 0;
}

.profile-hero-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-hero-card__content strong {
    font-size: 1.125rem;
    color: var(--text-primary);
}

.profile-hero-card__content span,
.profile-hero-card__content small {
    color: var(--text-tertiary);
}

.profile-info__name {
    font-size: var(--section-title);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.profile-info__role {
    font-size: var(--body-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

.profile-info__meta {
    display: flex;
    gap: var(--space-lg);
}

.profile-info__meta-item {
    font-size: var(--small-text);
    color: var(--text-placeholder);
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-info__meta-item svg {
    width: 14px;
    height: 14px;
}

/* ===== SETTINGS / TOGGLES ===== */
.settings-section {
    margin-bottom: var(--space-2xl);
}

.settings-section__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
}

.settings-item__info {
    flex: 1;
}

.settings-item__label {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.settings-item__desc {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

.toggle {
    width: 44px;
    height: 24px;
    background-color: var(--border-subtle);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition-base);
    flex-shrink: 0;
}

.toggle.active {
    background-color: var(--electric-blue);
}

.toggle__handle {
    width: 20px;
    height: 20px;
    background-color: var(--white);
    border-radius: var(--radius-full);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-base);
}

.toggle.active .toggle__handle {
    transform: translateX(20px);
}

/* ===== BADGES ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tiny-text);
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
}

.badge--blue {
    background-color: var(--electric-blue-light);
    color: var(--electric-blue);
}

.badge--green {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.badge--orange {
    background-color: rgba(0, 86, 210, 0.08);
    color: #0056D2;
}

.badge--red {
    background-color: rgba(211, 47, 47, 0.1);
    color: #D32F2F;
}

.badge--gray {
    background-color: var(--light-ash);
    color: var(--text-tertiary);
}

/* ===== TABS ===== */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-xl);
}

.tab {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
}

.tab:hover {
    color: var(--text-primary);
}

.tab.active {
    color: var(--electric-blue);
    border-bottom-color: var(--electric-blue);
}

/* ===== SEARCH ===== */
.search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--light-ash);
    border-radius: var(--radius-md);
    padding: 0 var(--space-md);
    height: 48px;
    transition: background-color var(--transition-base);
}

.search-bar:focus-within {
    background-color: var(--white);
    outline: 2px solid var(--electric-blue);
}

.search-bar__icon {
    color: var(--text-placeholder);
    flex-shrink: 0;
}

.search-bar__icon svg {
    width: 20px;
    height: 20px;
}

.search-bar__input {
    flex: 1;
    height: 100%;
    font-size: var(--body-text);
    color: var(--text-primary);
    background: transparent;
}

.search-bar__input::placeholder {
    color: var(--text-placeholder);
}

/* Filter Pills */
.filter-pills {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.filter-pill {
    padding: 6px 16px;
    font-size: var(--small-text);
    font-weight: 500;
    color: var(--text-tertiary);
    background: var(--light-ash);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}

.filter-pill:hover {
    background-color: var(--electric-blue-light);
    color: var(--text-primary);
}

.filter-pill.active {
    background-color: var(--electric-blue);
    color: var(--text-on-dark);
}

/* ===== FOOTER ===== */
.site-footer {
    background-color: var(--carbon-dark);
    color: var(--text-on-dark);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.footer__brand {
    max-width: 280px;
}

.footer__logo {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-on-dark);
    margin-bottom: var(--space-md);
}

.footer__desc {
    font-size: var(--small-text);
    color: var(--text-on-dark-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.footer__social {
    display: flex;
    gap: var(--space-sm);
}

.footer__social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-dark-secondary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.footer__social-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-on-dark);
}

.footer__social-link svg {
    width: 18px;
    height: 18px;
}

.footer__column-title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-on-dark);
    margin-bottom: var(--space-lg);
}

.footer__link {
    display: block;
    font-size: var(--small-text);
    color: var(--text-on-dark-secondary);
    padding: 4px 0;
    transition: color var(--transition-base);
}

.footer__link:hover {
    color: var(--text-on-dark);
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copyright {
    font-size: var(--tiny-text);
    color: var(--text-on-dark-secondary);
}

.footer__bottom-links {
    display: flex;
    gap: var(--space-lg);
}

.footer__bottom-link {
    font-size: var(--tiny-text);
    color: var(--text-on-dark-secondary);
    transition: color var(--transition-base);
}

.footer__bottom-link:hover {
    color: var(--text-on-dark);
}

/* ===== AUTH PAGES ===== */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-page__form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-2xl);
}

.auth-page__form-container {
    width: 100%;
    max-width: 420px;
}

.auth-page__back {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--small-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2xl);
    cursor: pointer;
    transition: color var(--transition-base);
}

.auth-page__back:hover {
    color: var(--text-primary);
}

.auth-page__back svg {
    width: 16px;
    height: 16px;
}

.auth-page__title {
    font-size: var(--section-title);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.auth-page__subtitle {
    font-size: var(--body-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-xl);
}

.auth-page__image-side {
    position: relative;
    overflow: hidden;
}

.auth-page__image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-page__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(23, 26, 32, 0.4), rgba(62, 106, 225, 0.2));
}

.auth-page__footer {
    margin-top: var(--space-xl);
    text-align: center;
}

.auth-page__footer-text {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

.auth-page__footer-link {
    color: var(--electric-blue);
    font-weight: 500;
    cursor: pointer;
}

.auth-page__footer-link:hover {
    text-decoration: underline;
}

/* Verification badge */
.verification-badge {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--electric-blue-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.verification-badge__icon {
    color: var(--electric-blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.verification-badge__icon svg {
    width: 20px;
    height: 20px;
}

.verification-badge__text {
    font-size: var(--small-text);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ===== COURSE VIEW ===== */
.course-hero {
    position: relative;
    height: 280px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.course-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23, 26, 32, 0.8), transparent);
    display: flex;
    align-items: flex-end;
    padding: var(--space-xl);
}

.course-hero__info {
    color: var(--text-on-dark);
}

.course-hero__title {
    font-size: var(--section-title);
    font-weight: 500;
    margin-bottom: var(--space-sm);
    color: var(--text-on-dark);
}

.course-hero__meta {
    display: flex;
    gap: var(--space-lg);
    font-size: var(--small-text);
    color: var(--text-on-dark-secondary);
}

/* Lesson Sidebar */
.lesson-sidebar {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lesson-sidebar__module {
    border-bottom: 1px solid var(--border-light);
}

.lesson-sidebar__module:last-child {
    border-bottom: none;
}

.lesson-sidebar__module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.lesson-sidebar__module-header:hover {
    background-color: var(--electric-blue-light);
}

.lesson-sidebar__module-title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
}

.lesson-sidebar__module-count {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.lesson-sidebar__lessons {
    padding: 0 var(--space-lg) var(--space-md);
}

.lesson-sidebar__lesson {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--small-text);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.lesson-sidebar__lesson:hover {
    background-color: var(--electric-blue-light);
    color: var(--text-primary);
}

.lesson-sidebar__lesson.active {
    background-color: var(--electric-blue-light);
    color: var(--electric-blue);
    font-weight: 500;
}

.lesson-sidebar__lesson.completed {
    color: var(--text-placeholder);
}

.lesson-sidebar__lesson-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lesson-sidebar__lesson-icon svg {
    width: 16px;
    height: 16px;
}

/* ===== LESSON VIEW ===== */
.lesson-layout {
    display: grid;
    grid-template-columns: 1fr var(--chat-width);
    gap: 0;
    min-height: calc(100vh - var(--nav-height));
}

.lesson-content {
    padding: var(--space-xl) var(--space-2xl);
    max-width: 800px;
}

.lesson-content h2 {
    font-size: 1.375rem;
    margin-bottom: var(--space-lg);
}

.lesson-content p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.lesson-nav {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-2xl);
    margin-top: var(--space-2xl);
    border-top: 1px solid var(--border-light);
}

/* ===== PROFILE PAGE ===== */
.profile-page {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background:
        radial-gradient(circle at top left, rgba(0, 86, 210, 0.08), transparent 26%),
        linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
}

.profile-page__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 24px 48px;
    display: grid;
    gap: 24px;
}

.profile-hero,
.profile-card {
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.profile-hero {
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: center;
}

.profile-hero__identity {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.profile-hero__avatar {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0056d2 0%, #1d8cf8 100%);
    color: var(--white);
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-hero__eyebrow {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-blue);
}

.profile-hero h1 {
    font-size: 40px;
    margin-bottom: 8px;
}

.profile-hero p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.profile-hero__actions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.profile-stat {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--border-subtle);
    background: #f8fafc;
}

.profile-stat strong {
    display: block;
    font-size: 30px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.profile-stat span {
    display: block;
    font-size: 13px;
    color: var(--text-tertiary);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.profile-card {
    padding: 24px;
}

.profile-card--loading,
.profile-card--error {
    padding: 40px;
    text-align: center;
}

.profile-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.profile-card__header h2 {
    font-size: 22px;
}

.profile-card__header span {
    display: inline-flex;
    color: var(--electric-blue);
}

.profile-card__empty {
    font-size: 14px;
    color: var(--text-secondary);
}

.profile-detail-list,
.profile-activity-list,
.profile-certificates {
    display: grid;
    gap: 12px;
}

.profile-detail-row,
.profile-activity-item,
.profile-certificate-item {
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 16px;
    background: #fbfdff;
}

.profile-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.profile-detail-row span {
    color: var(--text-tertiary);
    font-size: 14px;
}

.profile-detail-row strong,
.profile-activity-item strong,
.profile-certificate-item strong {
    color: var(--text-primary);
}

.profile-activity-item p,
.profile-certificate-item span {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.profile-stack {
    display: grid;
    gap: 24px;
}

.profile-card__subtle {
    margin-top: 8px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.profile-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.profile-inline-message {
    margin-top: 14px;
}

.profile-editor-grid {
    display: grid;
    gap: 14px;
}

.profile-editor-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.profile-chip__remove {
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.profile-skill-adder {
    margin-top: 16px;
    display: flex;
    gap: 10px;
}

.profile-skill-adder .fi {
    flex: 1;
}

.profile-divider {
    height: 1px;
    margin: 22px 0;
    background: rgba(15, 23, 42, 0.08);
}

.profile-repeater {
    display: grid;
    gap: 14px;
}

.profile-repeater__item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 18px;
    background: #fbfdff;
}

.profile-repeater__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.profile-card__muted {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.profile-savebar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.profile-savebar--start {
    justify-content: flex-start;
}

/* ===== STUDENT ONBOARDING ===== */
.onboarding-page {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background:
        linear-gradient(180deg, #f5f8fd 0%, #ffffff 42%, #f7f9fc 100%);
}

.onboarding-banner {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: 42px 0 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: 32px;
    align-items: center;
}

.onboarding-banner__copy {
    min-width: 0;
}

.onboarding-banner h1 {
    margin: 10px 0 14px;
    max-width: 760px;
    color: #0f172a;
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 0;
}

.onboarding-banner p {
    max-width: 680px;
    margin: 0;
    color: #4b5563;
    font-size: 18px;
    line-height: 1.62;
}

.onboarding-banner__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.onboarding-banner__metrics span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.onboarding-banner__metrics strong {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #0056d2;
    color: #ffffff;
    font-size: 12px;
}

.onboarding-banner__media {
    min-height: 300px;
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(0, 86, 210, 0.12), rgba(33, 193, 122, 0.10)),
        #ffffff;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.onboarding-banner__media img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    display: block;
}

.onboarding-shell {
    width: min(980px, calc(100% - 40px));
    margin: 0 auto;
    padding: 8px 0 72px;
}

.onboarding-card__head p {
    color: #64748b;
    font-size: 16px;
    line-height: 1.72;
}

.onboarding-card {
    padding: 34px;
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.onboarding-card__head {
    margin-bottom: 26px;
}

.onboarding-card__head span {
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.onboarding-card__head h2 {
    margin: 8px 0 10px;
    color: #0f172a;
    font-size: 34px;
    line-height: 1.1;
}

.onboarding-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.onboarding-card label,
.onboarding-notes,
.onboarding-choice {
    display: grid;
    gap: 8px;
}

.onboarding-card label span,
.onboarding-choice legend {
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
}

.onboarding-card input,
.onboarding-card select,
.onboarding-card textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    outline: none;
}

.onboarding-card textarea {
    padding-top: 12px;
    resize: vertical;
}

.onboarding-card input:focus,
.onboarding-card select:focus,
.onboarding-card textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.onboarding-choice {
    margin: 20px 0 0;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.onboarding-choice label {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
}

.onboarding-choice input {
    width: 16px;
    min-height: 16px;
}

.onboarding-notes {
    margin-top: 20px;
}

.onboarding-msg {
    min-height: 22px;
    margin-top: 14px;
    color: #dc2626;
    font-size: 14px;
    font-weight: 700;
}

.onboarding-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 18px;
}

/* ===== COURSE DETAIL ===== */
.course-detail-page {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 44%, #f8fafc 100%);
}

.course-detail-page--loading {
    display: block;
}

.course-detail__shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 24px 56px;
}

.course-detail__loading {
    margin-top: 18px;
    padding: 32px;
    background: var(--white);
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    text-align: center;
}

.course-detail__loading--error {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.course-detail__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 18px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.course-detail__breadcrumbs a:hover {
    color: var(--electric-blue);
}

.course-detail__breadcrumbs svg {
    width: 14px;
    height: 14px;
}

.course-detail__hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at 78% 22%, rgba(37, 99, 235, 0.12), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
    padding: clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: clamp(28px, 5vw, 58px);
    align-items: center;
}

.course-detail__hero-copy {
    position: relative;
    z-index: 2;
}

.course-detail__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 18px;
}

.course-detail__hero h1 {
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.02;
    max-width: 760px;
    margin-bottom: 16px;
}

.course-detail__hero p {
    max-width: 700px;
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.course-detail__instructor {
    margin-top: 16px;
    font-size: 15px;
    color: var(--text-secondary);
}

.course-detail__instructor a {
    color: var(--electric-blue);
    font-weight: 600;
}

.course-detail__hero-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.course-detail__hero-graphic {
    position: relative;
    display: grid;
    gap: 14px;
    margin: 0;
    min-height: 0;
}

.course-detail__hero-graphic img {
    display: block;
    width: 100%;
    min-height: 280px;
    max-height: 380px;
    object-fit: cover;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.16);
}

.course-detail__hero-graphic figcaption {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.course-detail__hero-graphic figcaption strong {
    color: var(--text-primary);
    font-size: 14px;
}

.course-detail__hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 28px solid rgba(0, 86, 210, 0.08);
}

.course-detail__hero-ring--large {
    width: 360px;
    height: 360px;
    right: -120px;
    top: -10px;
}

.course-detail__hero-ring--medium {
    width: 240px;
    height: 240px;
    right: -40px;
    top: 60px;
    border-width: 22px;
}

.course-detail__hero-ring--small {
    width: 140px;
    height: 140px;
    right: 24px;
    top: 110px;
    border-width: 18px;
}

.course-detail__stats {
    margin: -28px auto 0;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.course-detail__stat {
    padding: 20px 22px;
    border-right: 1px solid var(--border-subtle);
}

.course-detail__stat:last-child {
    border-right: none;
}

.course-detail__stat strong {
    display: block;
    font-size: 26px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.course-detail__stat span {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.course-detail__stat small {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.course-detail__tabs {
    margin-top: 28px;
    display: flex;
    gap: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
}

.course-detail__tabs a {
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.course-detail__tabs a.active,
.course-detail__tabs a:hover {
    color: var(--electric-blue);
    border-bottom-color: var(--electric-blue);
}

.course-detail__section {
    margin-top: 28px;
    padding: 28px;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
}

.course-detail__section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.course-detail__section-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-blue);
    margin-bottom: 8px;
}

.course-detail__section h2 {
    font-size: 30px;
}

.course-detail__section-badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: #edf4ff;
    color: var(--electric-blue);
    font-size: 12px;
    font-weight: 700;
}

.course-detail__outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.course-detail__outcome {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid var(--border-subtle);
}

.course-detail__outcome span {
    color: #059669;
}

.course-detail__outcome p {
    line-height: 1.7;
    color: var(--text-secondary);
}

.course-detail__info-grid,
.course-detail__modules,
.course-workspace__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.course-detail__info-card,
.course-detail__module-card,
.course-workspace__info-card {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: #fbfdff;
}

.course-detail__info-card strong,
.course-workspace__info-card h3 {
    display: block;
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.course-detail__info-card p,
.course-detail__module-card p,
.course-workspace__empty {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.course-detail__module-meta {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--electric-blue);
    margin-bottom: 10px;
}

.course-detail__module-card h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.course-detail__module-lessons {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.course-detail__module-lessons li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: var(--text-secondary);
}

.course-detail__module-lessons li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--electric-blue);
}

.course-detail__empty-card,
.course-detail__review-placeholder {
    padding: 22px;
    border-radius: 20px;
    background: #f8fbff;
    border: 1px solid var(--border-subtle);
}

.course-detail__empty-card strong,
.course-detail__review-placeholder strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.course-detail__empty-card p,
.course-detail__review-placeholder p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ===== COURSE WORKSPACE ===== */
.course-workspace__document {
    display: grid;
    gap: 24px;
}

.course-workspace__hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.course-workspace__metric {
    padding: 18px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid var(--border-subtle);
}

.course-workspace__metric strong {
    display: block;
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.course-workspace__metric span {
    font-size: 13px;
    color: var(--text-tertiary);
}

.course-workspace__next,
.course-workspace__section {
    padding: 22px;
    border-radius: 20px;
    background: #fbfdff;
    border: 1px solid var(--border-subtle);
}

.course-workspace__next {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.course-workspace__next h2 {
    font-size: 28px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.course-workspace__next p,
.course-workspace__section p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.course-workspace__next-actions {
    flex-shrink: 0;
}

.course-workspace__bullet-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.course-workspace__bullet-list li {
    position: relative;
    padding-left: 20px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.course-workspace__bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--electric-blue);
}

.course-workspace__info-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.course-workspace__info-card-head span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf4ff;
    color: var(--electric-blue);
    font-size: 12px;
    font-weight: 700;
}

.course-workspace__action-list,
.course-workspace__resource-list,
.course-workspace__certificate-list {
    display: grid;
    gap: 10px;
}

.course-workspace__action-item,
.course-workspace__resource-item,
.course-workspace__certificate-item,
.lesson-rail__item--button {
    width: 100%;
    text-align: left;
    font: inherit;
    border: 1px solid var(--border-subtle);
    background: var(--white);
}

.course-workspace__action-item,
.course-workspace__resource-item {
    padding: 14px;
    border-radius: 16px;
    display: grid;
    gap: 4px;
}

.course-workspace__action-item strong,
.course-workspace__resource-item strong,
.course-workspace__certificate-item strong {
    color: var(--text-primary);
}

.course-workspace__action-item span,
.course-workspace__resource-item span,
.course-workspace__certificate-item span {
    font-size: 13px;
    color: var(--text-secondary);
}

.course-workspace__action-item:hover,
.course-workspace__resource-item:hover {
    border-color: rgba(0, 86, 210, 0.18);
    background: #f3f7ff;
}

.course-workspace__certificate-item {
    padding: 14px;
    border-radius: 16px;
    display: grid;
    gap: 4px;
}

.course-workspace__quiz-panel {
    min-height: 24px;
}

/* ===== LESSON WORKSPACE ===== */
.lesson-workspace {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background: linear-gradient(180deg, #edf2fb 0%, #f7f9fc 100%);
}

.lesson-workspace--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-height) + 32px) 24px 40px;
}

.lesson-workspace__loading-card {
    width: min(560px, 100%);
    padding: 32px;
    border-radius: 24px;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
    text-align: center;
}

.lesson-workspace__loading-card--error {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.lesson-workspace__top,
.lesson-workspace__grid {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.lesson-workspace__top {
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.lesson-workspace__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-secondary);
}

.lesson-workspace__back:hover {
    color: var(--electric-blue);
}

.lesson-workspace__progress {
    min-width: 280px;
    display: grid;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
}

.lesson-workspace__progress span {
    font-size: 13px;
    color: var(--text-secondary);
}

.lesson-workspace__progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.lesson-workspace__progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0056d2 0%, #5ca9ff 100%);
    border-radius: inherit;
}

.lesson-workspace__grid {
    padding-top: 16px;
    padding-bottom: 32px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.lesson-rail,
.lesson-stage__card,
.lesson-coach__panel {
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.lesson-rail,
.lesson-coach__panel {
    position: sticky;
    top: calc(var(--nav-height) + 16px);
    max-height: calc(100vh - var(--nav-height) - 28px);
    overflow: auto;
}

.lesson-rail__header {
    padding: 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.lesson-rail__eyebrow,
.lesson-stage__eyebrow,
.lesson-stage__meta,
.lesson-rail__module-meta,
.lesson-stage__section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-blue);
}

.lesson-rail__header h2 {
    font-size: 28px;
    margin: 10px 0 8px;
}

.lesson-rail__header p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.lesson-rail__modules {
    padding: 18px;
    display: grid;
    gap: 14px;
}

.lesson-rail__module {
    padding: 16px;
    border-radius: 18px;
    background: #fafcff;
    border: 1px solid var(--border-subtle);
}

.lesson-rail__module h3 {
    font-size: 18px;
    margin: 8px 0 6px;
}

.lesson-rail__module p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.lesson-rail__items {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.lesson-rail__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--white);
}

.lesson-rail__item:hover {
    border-color: rgba(0, 86, 210, 0.14);
    background: #f3f7ff;
}

.lesson-rail__item.active {
    border-color: rgba(0, 86, 210, 0.18);
    background: #edf4ff;
}

.lesson-rail__item.completed .lesson-rail__item-icon {
    color: #059669;
    background: #ecfdf3;
}

.lesson-rail__item-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: var(--electric-blue);
}

.lesson-rail__item-icon svg {
    width: 16px;
    height: 16px;
}

.lesson-rail__item-body {
    min-width: 0;
}

.lesson-rail__item-body small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}

.lesson-rail__item-body strong {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}

.lesson-rail__item-state {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.lesson-stage__card {
    padding: 34px;
}

.lesson-stage__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin: 12px 0 24px;
}

.lesson-stage__meta {
    margin-bottom: 10px;
}

.lesson-stage__header h1 {
    font-size: 56px;
    line-height: 1.02;
    margin-bottom: 12px;
}

.lesson-stage__summary {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.lesson-stage__status {
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.lesson-stage__status.completed {
    background: #dff7e9;
    color: #0f766e;
}

.lesson-stage__video {
    margin-bottom: 26px;
    border-radius: 18px;
    overflow: hidden;
    background: #0f172a;
}

.lesson-stage__video iframe,
.lesson-stage__video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
    background: #000;
}

.lesson-stage__external-video {
    padding: 28px;
    display: flex;
    justify-content: center;
}

.lesson-stage__notice,
.lesson-stage__completion-box,
.lesson-stage__transcript {
    border-radius: 18px;
    border: 1px solid rgba(0, 86, 210, 0.12);
    background: #f8fbff;
}

.lesson-stage__notice {
    margin-bottom: 24px;
    padding: 18px;
    display: grid;
    gap: 6px;
}

.lesson-stage__notice strong {
    color: var(--text-primary);
}

.lesson-stage__notice span {
    color: var(--text-secondary);
    font-size: 14px;
}

.lesson-stage__transcript {
    margin-bottom: 24px;
    padding: 20px;
}

.lesson-stage__transcript-body {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.lesson-stage__content {
    display: grid;
    gap: 14px;
}

.lesson-stage__body {
    display: grid;
    gap: 14px;
}

.lesson-stage__body p,
.lesson-stage__empty {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.lesson-stage__actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lesson-stage__completion-box {
    margin-top: 24px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.lesson-stage__completion-box strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.lesson-stage__completion-box p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.lesson-coach__panel {
    padding: 0;
}

.lesson-coach__header {
    padding: 18px 18px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.lesson-coach__header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--text-tertiary);
}

.lesson-coach__intro {
    padding: 18px;
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.lesson-coach__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f0fe;
    color: var(--electric-blue);
}

.lesson-coach__avatar svg {
    width: 28px;
    height: 28px;
}

.lesson-coach__intro h3 {
    font-size: 22px;
    line-height: 1.25;
}

.lesson-coach__intro p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.lesson-coach__quick-actions {
    padding: 0 18px 18px;
    display: grid;
    gap: 8px;
}

.lesson-coach__quick-btn {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 86, 210, 0.3);
    border-radius: 12px;
    color: var(--electric-blue);
    font-weight: 600;
    text-align: left;
    background: var(--white);
}

.lesson-coach__quick-btn:hover {
    background: #f3f7ff;
}

.lesson-coach__messages {
    padding: 0 18px 18px;
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow: auto;
}

.lesson-coach__message {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.6;
}

.lesson-coach__message--bot {
    background: #f4f7fb;
    color: var(--text-primary);
}

.lesson-coach__message--user {
    background: var(--electric-blue);
    color: var(--white);
}

.lesson-coach__composer {
    padding: 18px;
    border-top: 1px solid var(--border-subtle);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.lesson-coach__composer input {
    min-width: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f4f7fb;
    color: var(--text-primary);
}

.lesson-coach__composer button {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--electric-blue);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lesson-coach__composer button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== GRADE TABLE ===== */
.grade-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.grade-summary__card {
    padding: var(--space-xl);
    background: var(--light-ash);
    border-radius: var(--radius-md);
    text-align: center;
}

.grade-summary__value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.grade-summary__value--blue {
    color: var(--electric-blue);
}

.grade-summary__label {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

/* ===== TEACHER DASHBOARD ===== */
.analytics-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.analytics-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.analytics-card__title {
    font-size: var(--card-title);
    font-weight: 500;
    color: var(--text-primary);
}

.chart-placeholder {
    width: 100%;
    height: 200px;
    background: var(--light-ash);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
}

.chart-bar {
    width: 32px;
    background: var(--electric-blue);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.5s ease;
    position: relative;
}

.chart-bar::after {
    content: attr(data-label);
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
    white-space: nowrap;
}

.chart-bar--secondary {
    background: var(--border-light);
}

/* Student Row (teacher view) */
.student-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-light);
}

.student-row:last-child {
    border-bottom: none;
}

.student-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--electric-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--small-text);
    font-weight: 600;
    color: var(--electric-blue);
    flex-shrink: 0;
}

.student-row__info {
    flex: 1;
}

.student-row__name {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
}

.student-row__detail {
    font-size: var(--tiny-text);
    color: var(--text-tertiary);
}

.student-row__progress {
    width: 120px;
}

.student-row__grade {
    font-size: var(--body-text);
    font-weight: 500;
    min-width: 48px;
    text-align: center;
}

/* ===== EMPTY STATE ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4xl) var(--space-lg);
    text-align: center;
}

.empty-state__icon {
    width: 64px;
    height: 64px;
    color: var(--text-placeholder);
    margin-bottom: var(--space-lg);
}

.empty-state__icon svg {
    width: 100%;
    height: 100%;
}

.empty-state__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.empty-state__desc {
    font-size: var(--body-text);
    color: var(--text-tertiary);
    max-width: 400px;
    margin-bottom: var(--space-xl);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-slide-in {
    animation: slideInRight 0.33s ease forwards;
}

.stagger-1 { animation-delay: 0.1s; opacity: 0; }
.stagger-2 { animation-delay: 0.2s; opacity: 0; }
.stagger-3 { animation-delay: 0.3s; opacity: 0; }
.stagger-4 { animation-delay: 0.4s; opacity: 0; }

/* Page transition */
#app {
    animation: fadeIn 0.3s ease;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-placeholder);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .footer__grid {
        grid-template-columns: 1fr repeat(2, 1fr);
        gap: var(--space-xl);
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .grade-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .learning-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .learning-dashboard__overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .learning-dashboard__coach {
        grid-column: 1 / -1;
        position: static;
    }

    .learning-coach-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-hero {
        grid-template-columns: 1fr;
    }

    .lesson-workspace__grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .lesson-coach {
        grid-column: 1 / -1;
    }

    .lesson-coach__panel {
        position: static;
        max-height: none;
    }

    .course-detail__hero {
        grid-template-columns: 1fr;
    }

    .course-detail__hero-graphic {
        min-height: 180px;
    }

    .course-detail__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .course-detail__info-grid,
    .course-detail__modules,
    .course-workspace__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .lesson-layout {
        grid-template-columns: 1fr;
    }

    .chat-panel {
        width: 100%;
        max-width: 420px;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: 200;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-nav__student-links {
        display: none;
    }

    .site-nav__inner--student {
        gap: 16px;
    }

    .learning-dashboard__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .learning-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .learning-dashboard__overview {
        grid-template-columns: 1fr;
    }

    .learning-course-row {
        grid-template-columns: 1fr;
    }

    .learning-course-row__button,
    .learning-course-row__more {
        justify-self: start;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .lesson-workspace__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .lesson-workspace__progress {
        width: 100%;
    }

    .lesson-workspace__grid {
        grid-template-columns: 1fr;
    }

    .lesson-rail,
    .lesson-stage__card,
    .lesson-coach__panel {
        position: static;
        max-height: none;
    }

    .lesson-stage__header {
        flex-direction: column;
    }

    .lesson-stage__header h1 {
        font-size: 42px;
    }

    .course-detail__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-workspace__hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-workspace__next {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    :root {
        --hero-title: 1.75rem;
        --section-title: 1.375rem;
    }

    .site-nav__links {
        display: none;
    }

    .site-nav__mobile-toggle {
        display: flex;
    }

    .site-nav__search--student {
        max-width: none;
    }

    .site-nav__actions--student .site-nav__icon-btn {
        display: none;
    }

    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 280px;
    }

    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-page__image-side {
        display: none;
    }

    .auth-page__form-side {
        padding: var(--space-xl) var(--space-lg);
    }

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .resume-card {
        flex-direction: column;
    }

    .resume-card__image {
        width: 100%;
        height: 160px;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-info__meta {
        justify-content: center;
    }

    .grade-summary {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 0 var(--space-md);
    }

    .section {
        padding: var(--space-3xl) 0;
    }

    .learning-dashboard__inner {
        padding: 20px 16px 32px;
    }

    .learning-dashboard__header {
        flex-direction: column;
        gap: 14px;
    }

    .teacher-dashboard__header-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .learning-dashboard__stats {
        grid-template-columns: 1fr;
    }

    .learning-panel {
        padding: 18px;
        border-radius: 16px;
    }

    .learning-tabs {
        width: 100%;
    }

    .learning-tab {
        flex: 1;
        justify-content: center;
        text-align: center;
    }

    .learning-coach-strip__actions {
        width: 100%;
        justify-content: stretch;
    }

    .teacher-dashboard__header-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-dashboard__header-actions .btn {
        width: 100%;
    }

    .learning-coach-strip__actions .btn {
        flex: 1;
    }

    .site-nav__profile-dropdown {
        right: -12px;
    }

    .profile-page__inner {
        padding: 20px 16px 32px;
    }

    .profile-hero {
        padding: 20px;
    }

    .profile-hero__identity {
        flex-direction: column;
    }

    .profile-hero h1 {
        font-size: 30px;
    }

    .profile-hero__stats {
        grid-template-columns: 1fr;
    }

    .profile-detail-row,
    .lesson-stage__completion-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .lesson-workspace__top,
    .lesson-workspace__grid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .lesson-stage__card {
        padding: 20px;
    }

    .lesson-stage__header h1 {
        font-size: 34px;
    }

    .lesson-stage__actions .btn,
    .lesson-stage__completion-box .btn {
        width: 100%;
    }

    .course-detail__shell {
        padding: 16px 16px 32px;
    }

    .course-detail__hero {
        padding: 22px;
    }

    .course-detail__hero h1 {
        font-size: 34px;
    }

    .course-detail__stats,
    .course-detail__outcomes,
    .course-detail__info-grid,
    .course-detail__modules,
    .course-workspace__cards,
    .course-workspace__hero-metrics {
        grid-template-columns: 1fr;
    }

    .course-detail__tabs {
        gap: 16px;
    }

    .onboarding-banner,
    .onboarding-shell,
    .onboarding-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-banner {
        padding-top: 28px;
    }

    .onboarding-banner__media {
        min-height: 220px;
    }

    .onboarding-banner__media img {
        min-height: 220px;
    }

    .onboarding-actions {
        flex-direction: column;
    }

    .onboarding-actions .btn {
        width: 100%;
    }

    .course-detail__section,
    .course-workspace__next,
    .course-workspace__section,
    .course-workspace__info-card {
        padding: 20px;
    }

    .course-detail__section-head {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr;
    }

    .site-nav {
        padding: 0 var(--space-md);
    }
}

/* ===== SECTION HEADERS ===== */
.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.section-header__tag {
    font-size: var(--tiny-text);
    font-weight: 600;
    color: var(--electric-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.section-header__title {
    font-size: var(--section-title);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.section-header__title--white {
    color: var(--text-on-dark);
}

.section-header__desc {
    font-size: var(--body-text);
    color: var(--text-tertiary);
    line-height: 1.6;
}

.section-header__desc--white {
    color: var(--text-on-dark-secondary);
}

/* ===== COURSE CONTENT (Maestro) ===== */
.material-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--light-ash);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.material-item__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: var(--radius-sm);
    color: var(--electric-blue);
}

.material-item__icon svg {
    width: 20px;
    height: 20px;
}

.material-item__info {
    flex: 1;
}

.material-item__name {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
}

.material-item__size {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.material-item__actions {
    display: flex;
    gap: var(--space-sm);
}

/* ===== INLINE CHART (SVG) ===== */
.mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 32px;
}

.mini-chart__bar {
    width: 4px;
    background: var(--electric-blue);
    border-radius: 2px;
    transition: height 0.3s ease;
}

.mini-chart__bar--muted {
    background: var(--border-light);
}

/* ===== STUDENT SHELLLESS PAGES ===== */
.student-content-page {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background:
        radial-gradient(circle at top left, rgba(0, 86, 210, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 30%, #ffffff 100%);
}

.student-content-page__inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 24px 56px;
}

.student-content-page__inner--wide {
    max-width: 1240px;
}

.student-content-page__inner--narrow {
    max-width: 860px;
}

/* ===== EXPLORE CATALOG ===== */
.explore-page {
    background:
        radial-gradient(circle at top right, rgba(13, 110, 253, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 26%, #ffffff 100%);
}

.explore-context {
    display: grid;
    gap: 24px;
    margin-bottom: 36px;
}

.explore-context__breadcrumbs {
    margin-bottom: 0;
}

.explore-context__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.explore-context__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 86, 210, 0.08);
    color: var(--electric-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
}

.explore-context__title {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    line-height: 0.98;
    max-width: 760px;
    margin-bottom: 12px;
}

.explore-context__description {
    max-width: 760px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.explore-context__save {
    flex-shrink: 0;
}

.explore-search-panel {
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 16px;
}

.explore-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 980px;
    background: #ffffff;
}

.explore-search__icon {
    color: var(--electric-blue);
}

.explore-search input {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
}

.explore-search input::placeholder {
    color: var(--text-placeholder);
}

.explore-search-panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.explore-meta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 980px;
    background: #eef3fb;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.explore-meta-pill--query {
    border: 1px solid rgba(0, 86, 210, 0.16);
    color: var(--electric-blue);
    background: #ffffff;
}

.explore-section {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
}

.explore-section--muted {
    padding: 32px;
    border-radius: 32px;
    background: #edf2fb;
}

.explore-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.explore-section__title {
    font-size: clamp(1.8rem, 2.5vw, 2.3rem);
    margin-bottom: 8px;
}

.explore-section__description {
    max-width: 760px;
    color: var(--text-secondary);
    line-height: 1.65;
}

.explore-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.explore-chip {
    padding: 10px 16px;
    border-radius: 980px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.explore-chip:hover {
    background: #f5f5f7;
    border-color: rgba(15, 23, 42, 0.18);
}

.explore-chip.active {
    background: var(--carbon-dark);
    border-color: var(--carbon-dark);
    color: var(--white);
}

.explore-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.explore-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.explore-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.10);
    border-color: rgba(0, 86, 210, 0.08);
}

.explore-card__media {
    position: relative;
    min-height: 172px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.explore-card__media::before {
    content: '';
    position: absolute;
    inset: auto -20% -25% auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    filter: blur(2px);
}

.explore-card__provider,
.explore-card__badge,
.explore-card__publish-id {
    position: relative;
    z-index: 1;
}

.explore-card__provider,
.explore-card__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.explore-card__provider {
    background: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.explore-card__badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
}

.explore-card__icon {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.94);
}

.explore-card__icon svg {
    width: 56px;
    height: 56px;
}

.explore-card__publish-id {
    font-size: 30px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.explore-card__body {
    display: grid;
    gap: 10px;
    padding: 20px;
    flex: 1;
}

.explore-card__meta {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--electric-blue);
}

.explore-card__title {
    font-size: 22px;
    line-height: 1.18;
}

.explore-card__subtitle {
    color: var(--text-secondary);
    line-height: 1.6;
    min-height: 68px;
}

.explore-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.explore-card--cobalt .explore-card__media {
    background: linear-gradient(135deg, #0b56d8 0%, #1ca2ff 100%);
}

.explore-card--ember .explore-card__media {
    background: linear-gradient(135deg, #0f172a 0%, #f97316 100%);
}

.explore-card--aurora .explore-card__media {
    background: linear-gradient(135deg, #14532d 0%, #74d18c 100%);
}

.explore-card--slate .explore-card__media {
    background: linear-gradient(135deg, #1f2937 0%, #64748b 100%);
}

.explore-card--amber .explore-card__media {
    background: linear-gradient(135deg, #9a3412 0%, #fbbf24 100%);
}

.explore-card--mint .explore-card__media {
    background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%);
}

.explore-section__footer {
    display: flex;
    justify-content: flex-start;
}

.explore-show-more {
    border-radius: 999px;
}

.explore-spotlight {
    margin: 12px 0 32px;
    border-radius: 32px;
    background: linear-gradient(135deg, #05070d 0%, #111827 55%, #0b152c 100%);
    color: var(--white);
    overflow: hidden;
    box-shadow: 0 28px 56px rgba(5, 7, 13, 0.24);
}

.explore-spotlight__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
    padding: 36px;
    align-items: stretch;
}

.explore-spotlight__copy {
    display: grid;
    align-content: center;
    gap: 16px;
}

.explore-spotlight__eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.explore-spotlight__title {
    font-size: clamp(2rem, 3vw, 3rem);
    color: var(--white);
    line-height: 1.02;
}

.explore-spotlight__description {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    max-width: 580px;
}

.explore-spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.explore-spotlight__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.explore-spotlight-card {
    min-height: 230px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    align-content: space-between;
    gap: 14px;
    transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.explore-spotlight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
}

.explore-spotlight-card__type {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.explore-spotlight-card__title {
    color: var(--white);
    font-size: 24px;
    line-height: 1.14;
}

.explore-spotlight-card__description {
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.65;
}

.explore-spotlight-card__link {
    color: var(--white);
    font-weight: 700;
}

.explore-collection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.explore-collection-card {
    min-height: 240px;
    padding: 24px;
    border-radius: 26px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.explore-collection-card__eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.explore-collection-card__title {
    font-size: 24px;
    margin-bottom: 10px;
}

.explore-collection-card__description {
    color: var(--text-secondary);
    line-height: 1.65;
}

.explore-collection-card__action {
    align-self: flex-start;
    border-radius: 999px;
}

.explore-collection-card--cobalt {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.explore-collection-card--cobalt .explore-collection-card__eyebrow {
    color: #0b56d8;
}

.explore-collection-card--ember {
    background: linear-gradient(180deg, #fff8f5 0%, #ffffff 100%);
}

.explore-collection-card--ember .explore-collection-card__eyebrow {
    color: #ea580c;
}

.explore-collection-card--aurora {
    background: linear-gradient(180deg, #f5fff8 0%, #ffffff 100%);
}

.explore-collection-card--aurora .explore-collection-card__eyebrow {
    color: #15803d;
}

.explore-collection-card--slate {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.explore-collection-card--slate .explore-collection-card__eyebrow {
    color: #334155;
}

.explore-collection-card--amber {
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.explore-collection-card--amber .explore-collection-card__eyebrow {
    color: #b45309;
}

.explore-collection-card--mint {
    background: linear-gradient(180deg, #f2fffc 0%, #ffffff 100%);
}

.explore-collection-card--mint .explore-collection-card__eyebrow {
    color: #0f766e;
}

.explore-state-card {
    padding: 32px;
    border-radius: 24px;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.explore-state-card h3 {
    margin-bottom: 8px;
    font-size: 22px;
}

.explore-state-card p {
    color: var(--text-secondary);
    line-height: 1.65;
}

.explore-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 320px);
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
}

.explore-rail .explore-card {
    scroll-snap-align: start;
}

.explore-rail::-webkit-scrollbar {
    height: 8px;
}

.explore-rail::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}

@media (max-width: 1200px) {
    .explore-card-grid,
    .explore-card-grid--published,
    .explore-collection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .student-content-page__inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .explore-context__head,
    .explore-section__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .explore-card-grid,
    .explore-card-grid--published,
    .explore-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .explore-spotlight__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .student-content-page__inner {
        padding: 24px 16px 40px;
    }

    .explore-search-panel,
    .explore-section--muted,
    .explore-spotlight__layout {
        padding: 20px;
    }

    .explore-card-grid,
    .explore-card-grid--published,
    .explore-spotlight__cards,
    .explore-collection-grid {
        grid-template-columns: 1fr;
    }

    .explore-card__subtitle {
        min-height: 0;
    }

    .explore-spotlight__actions {
        width: 100%;
    }

    .explore-spotlight__actions .btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .explore-context__title {
        font-size: 2rem;
    }

    .explore-card__body,
    .explore-collection-card,
    .explore-state-card {
        padding: 18px;
    }
}

/* ===== LANDING HOME ===== */
.footer__brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-dark-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.footer__meta {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.footer__meta span {
    color: var(--text-on-dark-secondary);
    font-size: 13px;
}

.landing-home {
    background:
        radial-gradient(circle at top left, rgba(0, 86, 210, 0.06), transparent 24%),
        radial-gradient(circle at top right, rgba(24, 144, 255, 0.06), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 24%, #ffffff 100%);
}

.landing-home__hero,
.landing-section,
.landing-home__signal {
    scroll-margin-top: calc(var(--nav-height) + 24px);
}

.landing-home__hero {
    padding-top: calc(var(--nav-height) + 36px);
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.landing-home__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 246, 255, 0.8) 100%);
    pointer-events: none;
}

.landing-home__hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 48px;
    align-items: center;
}

.landing-home__hero-copy {
    display: grid;
    gap: 24px;
}

.landing-home__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 86, 210, 0.08);
    color: var(--electric-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.landing-home__eyebrow--dark {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
}

.landing-home__hero-title {
    font-size: clamp(3rem, 5.6vw, 4.9rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    max-width: 760px;
}

.landing-home__hero-subtitle {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.landing-home__search {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 18px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    max-width: 720px;
}

.landing-home__search-icon {
    color: var(--electric-blue);
}

.landing-home__search input {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
}

.landing-home__search input::placeholder {
    color: var(--text-placeholder);
}

.landing-home__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.landing-home__hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 820px;
}

.landing-home__hero-stat {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.landing-home__hero-stat strong {
    display: block;
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.landing-home__hero-stat span {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.landing-home__hero-visual {
    position: relative;
    min-height: 640px;
}

.landing-home__hero-glow {
    position: absolute;
    inset: 14% 10% auto 10%;
    height: 360px;
    background: radial-gradient(circle, rgba(0, 86, 210, 0.26) 0%, rgba(0, 86, 210, 0.08) 35%, transparent 72%);
    filter: blur(8px);
}

.landing-home__hero-orb {
    position: absolute;
    top: 120px;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translateX(-50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-home__hero-core {
    position: relative;
    z-index: 2;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b56d8 0%, #3aa0ff 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 60px rgba(0, 86, 210, 0.28);
}

.landing-home__hero-core svg {
    width: 44px;
    height: 44px;
}

.landing-home__hero-ring {
    position: absolute;
    inset: 50%;
    border-radius: 50%;
    border: 1px solid rgba(0, 86, 210, 0.16);
    transform: translate(-50%, -50%);
    animation: landingOrbitPulse 8s ease-in-out infinite;
}

.landing-home__hero-ring--one {
    width: 180px;
    height: 180px;
}

.landing-home__hero-ring--two {
    width: 260px;
    height: 260px;
    animation-delay: 1.2s;
}

.landing-home__hero-ring--three {
    width: 340px;
    height: 340px;
    animation-delay: 2.4s;
}

.landing-home__hero-card,
.landing-home__hero-metric {
    position: absolute;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(16px);
}

.landing-home__hero-card {
    width: 260px;
    padding: 20px;
    display: grid;
    gap: 10px;
    animation: landingFloat 6s ease-in-out infinite;
}

.landing-home__hero-card--primary {
    top: 60px;
    left: 18px;
}

.landing-home__hero-card--secondary {
    right: 24px;
    bottom: 100px;
    animation-delay: 1.4s;
}

.landing-home__hero-card-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--electric-blue);
}

.landing-home__hero-card strong {
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.15;
}

.landing-home__hero-card p,
.landing-home__hero-metric span {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
}

.landing-home__mini-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.landing-home__mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b56d8 0%, #3aa0ff 100%);
}

.landing-home__hero-metric {
    padding: 18px 20px;
    min-width: 170px;
}

.landing-home__hero-metric strong {
    display: block;
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 26px;
}

.landing-home__hero-metric--top {
    right: 32px;
    top: 68px;
}

.landing-home__hero-metric--bottom {
    left: 74px;
    bottom: 32px;
}

.landing-home__signal {
    padding: 26px 0 12px;
}

.landing-home__signal-inner {
    padding: 26px 30px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0d1d38 0%, #0b56d8 100%);
    color: var(--white);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: center;
}

.landing-home__signal-copy h2 {
    color: var(--white);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.08;
    margin-top: 12px;
}

.landing-home__signal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.landing-home__signal-pills span {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 13px;
}

.landing-section {
    padding: 86px 0;
}

.landing-section--muted {
    background: linear-gradient(180deg, #f5f8fd 0%, #eef3fa 100%);
}

.landing-section__head {
    max-width: 780px;
    display: grid;
    gap: 12px;
    margin-bottom: 32px;
}

.landing-section__head h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.02;
}

.landing-section__head p {
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: 17px;
}

.landing-value-grid,
.landing-category-grid,
.landing-course-grid,
.landing-path-grid,
.landing-beginner-grid,
.landing-testimonial-grid,
.landing-project-grid {
    display: grid;
    gap: 14px;
}

.landing-value-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-value-card,
.landing-category-card,
.landing-course-card,
.landing-path-card,
.landing-beginner-card,
.landing-testimonial-card,
.landing-project-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.landing-value-card {
    border-radius: 26px;
    padding: 24px;
    display: grid;
    gap: 16px;
}

.landing-value-card__icon,
.landing-category-card__icon,
.landing-project-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 86, 210, 0.08);
    color: var(--electric-blue);
}

.landing-value-card__icon svg,
.landing-category-card__icon svg,
.landing-project-card__icon svg {
    width: 32px;
    height: 32px;
}

.landing-value-card h3,
.landing-category-card h3,
.landing-beginner-card h3,
.landing-project-card h3 {
    font-size: 24px;
    line-height: 1.14;
}

.landing-value-card p,
.landing-category-card p,
.landing-beginner-card p,
.landing-project-card p,
.landing-path-card p,
.landing-testimonial-card p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.landing-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-category-card {
    text-align: left;
    border-radius: 24px;
    padding: 22px;
    display: grid;
    gap: 14px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.landing-category-card:hover,
.landing-course-card:hover,
.landing-project-card:hover,
.landing-beginner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
    border-color: rgba(0, 86, 210, 0.08);
}

.landing-category-card span {
    color: var(--electric-blue);
    font-weight: 700;
    font-size: 13px;
}

.landing-course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-course-card {
    text-align: left;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.landing-course-card__media {
    min-height: 180px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.landing-course-card__provider,
.landing-course-card__badge,
.landing-beginner-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.landing-course-card__provider {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.96);
}

.landing-course-card__badge,
.landing-beginner-card__badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
}

.landing-course-card__body {
    padding: 20px;
    display: grid;
    gap: 10px;
}

.landing-course-card__body h3 {
    font-size: 24px;
    line-height: 1.14;
}

.landing-course-card__instructor {
    color: var(--text-secondary);
    font-size: 14px;
}

.landing-course-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.landing-course-card--cobalt .landing-course-card__media {
    background: linear-gradient(135deg, #0b56d8 0%, #2aa2ff 100%);
}

.landing-course-card--mint .landing-course-card__media {
    background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%);
}

.landing-course-card--ember .landing-course-card__media {
    background: linear-gradient(135deg, #111827 0%, #f97316 100%);
}

.landing-course-card--slate .landing-course-card__media {
    background: linear-gradient(135deg, #1f2937 0%, #64748b 100%);
}

.landing-course-card--amber .landing-course-card__media {
    background: linear-gradient(135deg, #9a3412 0%, #fbbf24 100%);
}

.landing-course-card--aurora .landing-course-card__media {
    background: linear-gradient(135deg, #14532d 0%, #4ade80 100%);
}

.landing-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-path-card {
    padding: 24px;
    border-radius: 28px;
    display: grid;
    gap: 16px;
}

.landing-path-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.landing-path-card__eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--electric-blue);
}

.landing-path-card__head h3 {
    font-size: 26px;
    line-height: 1.08;
}

.landing-path-card__duration {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.landing-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.landing-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b56d8 0%, #2aa2ff 100%);
}

.landing-path-card__progress-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.landing-path-card__progress-label strong {
    font-size: 28px;
    color: var(--text-primary);
}

.landing-path-card__progress-label span {
    color: var(--text-secondary);
    font-size: 14px;
}

.landing-path-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landing-path-card__chips span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.landing-path-card--cobalt {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.landing-path-card--slate {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.landing-path-card--mint {
    background: linear-gradient(180deg, #f2fffc 0%, #ffffff 100%);
}

.landing-beginner-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-beginner-card {
    padding: 22px;
    border-radius: 24px;
    display: grid;
    gap: 14px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.landing-beginner-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.landing-promo-block {
    padding: 34px;
    border-radius: 34px;
    background: linear-gradient(135deg, #06080d 0%, #10192d 52%, #111827 100%);
    color: var(--white);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 26px;
    box-shadow: 0 28px 58px rgba(5, 7, 13, 0.26);
}

.landing-promo-block__copy {
    display: grid;
    align-content: center;
    gap: 14px;
}

.landing-promo-block__copy h2,
.landing-testimonial-card__author strong {
    color: var(--white);
}

.landing-promo-block__copy h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
}

.landing-promo-block__copy p,
.landing-promo-card p {
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.72;
}

.landing-promo-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-promo-block__cards {
    display: grid;
    gap: 16px;
}

.landing-promo-card {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 12px;
}

.landing-promo-card span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.68);
}

.landing-promo-card strong {
    color: var(--white);
    font-size: 24px;
    line-height: 1.12;
}

.landing-testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-testimonial-card {
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, #0d1d38 0%, #13284b 100%);
    display: grid;
    gap: 18px;
}

.landing-testimonial-card__quote {
    font-size: 44px;
    line-height: 0.8;
    color: rgba(255, 255, 255, 0.32);
}

.landing-testimonial-card p {
    color: rgba(255, 255, 255, 0.8);
}

.landing-testimonial-card__author {
    display: grid;
    gap: 4px;
}

.landing-testimonial-card__author span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
}

.landing-project-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-project-card {
    padding: 24px;
    border-radius: 26px;
    display: grid;
    gap: 16px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.landing-project-card__skills {
    color: var(--electric-blue);
    font-size: 13px;
    font-weight: 700;
}

.landing-register-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 7, 13, 0.56);
    backdrop-filter: blur(6px);
    padding: 20px;
}

.landing-register-modal.active {
    display: flex;
}

.landing-register-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 36px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18);
    display: grid;
    gap: 18px;
}

.landing-register-modal__dialog h2 {
    font-size: 30px;
}

.landing-register-modal__dialog p {
    color: var(--text-secondary);
    line-height: 1.65;
}

.landing-register-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f6fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.landing-register-modal__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.landing-register-modal__tab {
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: var(--text-primary);
    font-weight: 700;
}

.landing-register-modal__tab.active {
    background: var(--electric-blue);
    border-color: var(--electric-blue);
    color: var(--white);
}

.landing-register-modal__form {
    display: grid;
    gap: 14px;
}

.landing-register-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.landing-register-modal__form label {
    display: grid;
    gap: 6px;
}

.landing-register-modal__form label span {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.landing-register-modal__status {
    min-height: 18px;
    font-size: 13px;
    font-weight: 600;
}

.landing-register-modal__status--error {
    color: #d32f2f;
}

.landing-register-modal__status--info {
    color: var(--electric-blue);
}

.footer-info-modal__dialog {
    max-width: 640px;
}

.footer-info-modal__body {
    display: grid;
    gap: 12px;
}

.footer-info-modal__body p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.footer-info-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

@keyframes landingFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes landingOrbitPulse {
    0%, 100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.03);
    }
}

@media (max-width: 1200px) {
    .landing-value-grid,
    .landing-category-grid,
    .landing-project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-beginner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .landing-home__hero-inner,
    .landing-home__signal-inner,
    .landing-promo-block {
        grid-template-columns: 1fr;
    }

    .landing-home__hero-visual {
        min-height: 560px;
    }

    .landing-home__signal-pills {
        justify-content: flex-start;
    }

    .landing-value-grid,
    .landing-category-grid,
    .landing-course-grid,
    .landing-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-path-grid,
    .landing-testimonial-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .landing-home__hero {
        padding-bottom: 48px;
    }

    .landing-home__hero-title {
        font-size: 2.6rem;
    }

    .footer-info-modal__actions .btn {
        width: 100%;
    }

    .landing-home__hero-subtitle,
    .landing-section__head p {
        font-size: 16px;
    }

    .landing-home__search {
        flex-wrap: wrap;
        border-radius: 24px;
    }

    .landing-home__search .btn {
        width: 100%;
    }

    .landing-home__hero-actions,
    .landing-promo-block__actions {
        flex-direction: column;
    }

    .landing-home__hero-actions .btn,
    .landing-promo-block__actions .btn {
        width: 100%;
    }

    .landing-home__hero-stats,
    .landing-value-grid,
    .landing-category-grid,
    .landing-course-grid,
    .landing-beginner-grid,
    .landing-project-grid {
        grid-template-columns: 1fr;
    }

    .landing-home__hero-visual {
        min-height: 480px;
    }

    .landing-home__hero-orb {
        width: 240px;
        height: 240px;
        top: 110px;
    }

    .landing-home__hero-ring--one {
        width: 150px;
        height: 150px;
    }

    .landing-home__hero-ring--two {
        width: 210px;
        height: 210px;
    }

    .landing-home__hero-ring--three {
        width: 270px;
        height: 270px;
    }

    .landing-home__hero-card--primary {
        left: 0;
    }

    .landing-home__hero-card--secondary {
        right: 0;
        bottom: 86px;
    }

    .landing-home__hero-metric--top {
        right: 0;
        top: 28px;
    }

    .landing-home__hero-metric--bottom {
        left: 0;
        bottom: 12px;
    }

    .landing-section,
    .landing-home__signal {
        padding: 64px 0;
    }

    .landing-home__signal-inner,
    .landing-promo-block,
    .landing-register-modal__dialog {
        padding: 24px;
    }

    .landing-register-modal__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .landing-home__hero-title,
    .landing-section__head h2,
    .landing-promo-block__copy h2 {
        font-size: 2.05rem;
    }

    .landing-home__hero-card,
    .landing-home__hero-metric {
        position: static;
        width: 100%;
    }

    .landing-home__hero-visual {
        min-height: auto;
        display: grid;
        gap: 16px;
    }

    .landing-home__hero-orb,
    .landing-home__hero-glow {
        position: relative;
        inset: auto;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
    }

    .landing-home__hero-orb {
        width: 220px;
        height: 220px;
    }

    .landing-course-card__body,
    .landing-path-card,
    .landing-beginner-card,
    .landing-testimonial-card,
    .landing-project-card {
        padding: 20px;
    }
}


/* ========================================================================
   educatIA — Vercel-Inspired Design System Override
   Shadow-as-border, achromatic palette, compressed typography, gallery space
   ======================================================================== */

:root {
    /* ── Vercel Core Palette ── */
    --v-black: #171717;
    --v-white: #ffffff;
    --v-true-black: #000000;

    /* Workflow accents (functional only) */
    --v-ship-red: #ff5b4f;
    --v-preview-pink: #de1d8d;
    --v-develop-blue: #0a72ef;

    /* Console / code */
    --v-console-blue: #0070f3;
    --v-console-purple: #7928ca;
    --v-console-pink: #eb367f;

    /* Interactive */
    --v-link: #0072f5;
    --v-focus: hsla(212, 100%, 48%, 1);
    --v-ring: rgba(147, 197, 253, 0.5);

    /* Neutral scale */
    --v-gray-900: #171717;
    --v-gray-600: #4d4d4d;
    --v-gray-500: #666666;
    --v-gray-400: #808080;
    --v-gray-100: #ebebeb;
    --v-gray-50: #fafafa;

    /* Overlay / surface */
    --v-overlay: hsla(0, 0%, 98%, 1);
    --v-badge-bg: #ebf5ff;
    --v-badge-text: #0068d6;

    /* Shadow layers (Vercel signature system) */
    --v-border-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    --v-subtle-elevation: rgba(0, 0, 0, 0.04) 0px 2px 2px;
    --v-card-shadow: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px inset;
    --v-ring-border: rgb(235, 235, 235) 0px 0px 0px 1px;
    --v-card-shadow-hover: rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 4px 6px, rgba(0,0,0,0.04) 0px 12px 12px -8px;

    /* Map to existing design tokens */
    --electric-blue: var(--v-link);
    --electric-blue-hover: #005cc5;
    --electric-blue-light: var(--v-badge-bg);
    --electric-blue-glow: rgba(0, 114, 245, 0.1);

    --white: var(--v-white);
    --light-ash: var(--v-gray-50);
    --carbon-dark: var(--v-black);
    --frosted-glass: var(--v-white);
    --dark-surface-1: var(--v-black);
    --dark-surface-2: #1a1a1a;
    --dark-surface-3: #1f1f1f;

    --text-primary: var(--v-black);
    --text-secondary: var(--v-gray-600);
    --text-tertiary: var(--v-gray-500);
    --text-placeholder: var(--v-gray-400);
    --text-on-dark: var(--v-white);
    --text-on-dark-secondary: rgba(255, 255, 255, 0.7);
    --link-light: var(--v-link);
    --link-dark: var(--v-link);
    --border-light: var(--v-gray-100);
    --border-subtle: var(--v-gray-100);

    /* Typography — Inter as Geist Sans proxy, JetBrains Mono as Geist Mono proxy */
    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, monospace;

    /* Sizing — Vercel scale */
    --hero-title: clamp(2.5rem, 4.8vw, 3rem);
    --section-title: clamp(1.75rem, 3vw, 2.5rem);
    --card-title: 1.5rem;
    --nav-text: 0.875rem;
    --body-text: 1rem;
    --body-large: 1.25rem;
    --small-text: 0.875rem;
    --tiny-text: 0.75rem;

    /* Spacing — 8px base */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 80px;
    --space-5xl: 120px;

    /* Layout */
    --max-width: 1200px;
    --nav-height: 64px;
    --sidebar-width: 260px;

    /* Radius — Vercel (not rounded, subtle) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --radius-pill: 9999px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.35s ease;

    /* Shadows */
    --shadow-soft: var(--v-card-shadow);
    --shadow-soft-hover: var(--v-card-shadow-hover);

    /* Landing vertical rhythm */
    --landing-space: clamp(64px, 8vw, 120px);
}

/* ── Global ── */
body {
    background: var(--v-white);
    color: var(--text-secondary);
    font-feature-settings: "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--v-black);
    font-weight: 600;
    font-feature-settings: "liga" 1;
}

/* Vercel signature: aggressive negative letter-spacing at display sizes */
h1 { letter-spacing: -2.4px; line-height: 1.08; }
h2 { letter-spacing: -1.28px; line-height: 1.2; }
h3 { letter-spacing: -0.96px; line-height: 1.25; }
h4 { letter-spacing: -0.32px; }

a { color: var(--v-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus ring (Vercel standard) */
:focus-visible {
    outline: 2px solid var(--v-focus);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════════════════════ */
.site-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: none;
    box-shadow: var(--v-border-shadow);
    height: var(--nav-height);
    padding: 0 24px;
}

.site-nav__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}
.site-nav__inner--public { gap: 20px; }

.site-nav__logo {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--v-black);
    text-decoration: none;
}
.site-nav__logo:hover { text-decoration: none; opacity: 0.8; }

.site-nav__brand--public {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Explorer toggle — nav link style */
.site-nav__explorer-toggle {
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--v-gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    transition: color var(--transition-fast);
}
.site-nav__explorer-toggle:hover { color: var(--v-black); }
.site-nav__explorer-toggle svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.site-nav__explorer-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Nav search */
.site-nav__search {
    flex: 1;
    max-width: 480px;
    display: flex;
    align-items: center;
    background: var(--v-white);
    box-shadow: var(--v-ring-border);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    height: 40px;
    border: none;
    transition: box-shadow var(--transition-fast);
}
.site-nav__search:focus-within { box-shadow: 0 0 0 1px var(--v-black); }
.site-nav__search input {
    border: none;
    background: transparent;
    font-family: var(--font-text);
    font-size: 14px;
    color: var(--v-black);
    width: 100%;
    outline: none;
}
.site-nav__search input::placeholder { color: var(--v-gray-400); }
.site-nav__search-button {
    background: none;
    border: none;
    color: var(--v-gray-400);
    cursor: pointer;
    display: flex;
    padding: 4px;
}
.site-nav__search-button:hover { color: var(--v-black); }
.site-nav__search-button svg { width: 16px; height: 16px; }

/* Nav actions */
.site-nav__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-nav__link--quiet {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--v-gray-600);
    text-decoration: none;
    padding: 6px 0;
}
.site-nav__link--quiet:hover { color: var(--v-black); text-decoration: none; }
.site-nav__mobile-toggle { display: none; }

/* ════════════════════════════════════════════════════════════════════
   BUTTONS — Vercel (6px radius, shadow-border ghost)
   ════════════════════════════════════════════════════════════════════ */
.btn {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--v-black); color: var(--v-white); }
.btn--primary:hover { background: #333; }

.btn--secondary,
.btn--outline { background: var(--v-white); color: var(--v-black); box-shadow: var(--v-ring-border); }
.btn--secondary:hover,
.btn--outline:hover { background: var(--v-gray-50); }

.btn--ghost { background: transparent; color: var(--v-gray-600); }
.btn--ghost:hover { background: var(--v-gray-50); color: var(--v-black); }

.btn--dark { background: var(--v-black); color: var(--v-white); }
.btn--dark:hover { background: #333; }

.btn--sm { font-size: 13px; padding: 6px 12px; }
.btn--lg { font-size: 16px; padding: 10px 20px; }
.btn--icon { padding: 8px; border-radius: var(--radius-sm); }

/* Badge / Pill */
.badge,
.course-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--v-badge-bg);
    color: var(--v-badge-text);
}

/* ════════════════════════════════════════════════════════════════════
   CARDS — shadow stack, no CSS border (Vercel signature)
   ════════════════════════════════════════════════════════════════════ */
.analytics-card,
.dashboard-card,
.course-card,
.course-card-inner,
.student-content-card,
.stat-card {
    background: var(--v-white);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow);
    transition: box-shadow var(--transition-base);
}
.analytics-card:hover,
.course-card:hover {
    box-shadow: var(--v-card-shadow-hover);
}

/* ════════════════════════════════════════════════════════════════════
   FORMS — shadow-border inputs
   ════════════════════════════════════════════════════════════════════ */
.form-input,
.form-textarea,
textarea,
select {
    font-family: var(--font-text);
    font-size: 14px;
    color: var(--v-black);
    background: var(--v-white);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--v-ring-border);
    padding: 8px 12px;
    transition: box-shadow var(--transition-fast);
    outline: none;
    width: 100%;
}
.form-input:focus,
.form-textarea:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 1px var(--v-black);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--v-gray-400); }

.form-label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--v-black);
    margin-bottom: 6px;
    display: block;
}

/* ════════════════════════════════════════════════════════════════════
   EXPLORAR DROPDOWN (mega menu)
   ════════════════════════════════════════════════════════════════════ */
.explorar-dropdown {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--v-white);
    box-shadow: var(--v-border-shadow), 0 16px 32px rgba(0,0,0,0.08);
    z-index: 1000;
    display: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.explorar-dropdown.active { display: block; }

.explorar-dropdown__shell {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px 24px;
}

.explorar-dropdown__intro {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}
.explorar-dropdown__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--v-gray-500);
    margin-bottom: 4px;
    display: block;
}
.explorar-dropdown__intro h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: var(--v-black);
    margin: 0;
    max-width: 480px;
}
.explorar-dropdown__intro p {
    font-size: 14px;
    color: var(--v-gray-600);
    max-width: 320px;
    line-height: 1.5;
}

.explorar-dropdown__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.explorar-dropdown__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.explorar-dropdown__group-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--v-gray-100);
}
.explorar-dropdown__group-icon {
    display: flex;
    color: var(--v-gray-500);
    flex-shrink: 0;
    margin-top: 2px;
}
.explorar-dropdown__group-icon svg { width: 16px; height: 16px; }
.explorar-dropdown__group-head h4 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.32px;
    color: var(--v-black);
    margin: 0;
}
.explorar-dropdown__group-head p {
    font-size: 12px;
    color: var(--v-gray-500);
    margin: 2px 0 0;
    line-height: 1.4;
}
.explorar-dropdown__group-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.explorar-dropdown__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast);
}
.explorar-dropdown__item:hover { background: var(--v-gray-50); text-decoration: none; }
.explorar-dropdown__item strong { font-size: 14px; font-weight: 500; color: var(--v-black); }
.explorar-dropdown__item span { font-size: 12px; color: var(--v-gray-500); line-height: 1.4; }

.explorar-dropdown__footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--v-gray-100);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--v-gray-500);
}
.explorar-dropdown__footer-link { font-weight: 500; color: var(--v-black); text-decoration: none; }
.explorar-dropdown__footer-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   LANDING — Hero
   ════════════════════════════════════════════════════════════════════ */
.landing-home {
    background: var(--v-white);
    padding-top: 0;
}

.landing-home__hero {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: var(--landing-space);
    position: relative;
    overflow: visible;
}
.landing-home__hero::before { display: none; }

.landing-home__hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.landing-home__hero-copy {
    display: grid;
    gap: 20px;
}

/* Eyebrow — Vercel mono uppercase */
.landing-home__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--v-gray-500);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.landing-home__eyebrow--dark {
    background: none;
    color: rgba(255, 255, 255, 0.5);
}

.landing-home__hero-title {
    font-family: var(--font-display);
    font-size: var(--hero-title);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: -2.4px;
    color: var(--v-black);
    max-width: 560px;
}

.landing-home__hero-subtitle {
    max-width: 520px;
    font-size: 18px;
    line-height: 1.56;
    color: var(--v-gray-600);
    font-weight: 400;
}

/* Hero points */
.landing-home__hero-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.landing-home__hero-point {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--v-gray-600);
    line-height: 1.5;
}
.landing-home__hero-point svg {
    width: 16px;
    height: 16px;
    color: var(--v-gray-400);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Hero actions */
.landing-home__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.landing-home__hero-actions .btn--primary { padding: 10px 24px; font-size: 16px; }
.landing-home__hero-actions .btn--secondary { padding: 10px 24px; font-size: 16px; }

/* Hero proof metrics */
.landing-home__hero-proof {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.landing-home__hero-proof-item {
    display: flex;
    flex-direction: column;
}
.landing-home__hero-proof-item strong {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1.28px;
    color: var(--v-black);
    line-height: 1.2;
}
.landing-home__hero-proof-item span {
    font-size: 13px;
    color: var(--v-gray-500);
}

/* Hero visual panels (right side) */
.landing-home__hero-visual {
    position: relative;
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}

.landing-home__hero-panel {
    background: var(--v-white);
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow);
    padding: 20px;
    display: grid;
    gap: 10px;
}
.landing-home__hero-panel h2 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.64px;
    margin: 0;
}
.landing-home__hero-panel p {
    font-size: 13px;
    color: var(--v-gray-500);
    line-height: 1.5;
    margin: 0;
}

.landing-home__hero-panel--primary {
    grid-column: span 2;
}
.landing-home__hero-panel--secondary {
    grid-column: span 1;
}
.landing-home__hero-panel--accent {
    grid-column: span 1;
}
.landing-home__hero-panel--accent strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--v-black);
    line-height: 1.4;
}

.landing-home__hero-panel-top {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Hero chips */
.landing-home__hero-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--v-badge-bg);
    color: var(--v-badge-text);
}
.landing-home__hero-chip--soft {
    background: var(--v-gray-50);
    color: var(--v-gray-600);
    box-shadow: var(--v-ring-border);
}
.landing-home__hero-chip--dark {
    background: var(--v-black);
    color: var(--v-white);
}

/* Hero progress */
.landing-home__hero-progress {
    display: grid;
    gap: 6px;
    margin-top: 4px;
}
.landing-home__hero-progress-bar {
    height: 4px;
    background: var(--v-gray-100);
    border-radius: 2px;
    overflow: hidden;
}
.landing-home__hero-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--v-black);
}
.landing-home__hero-progress-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.landing-home__hero-progress-meta strong {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.64px;
    color: var(--v-black);
}
.landing-home__hero-progress-meta span {
    font-size: 12px;
    color: var(--v-gray-500);
}

/* Hero modules list */
.landing-home__hero-modules {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.landing-home__hero-module {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.landing-home__hero-module.is-active {
    background: var(--v-gray-50);
}
.landing-home__hero-module-index {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--v-gray-400);
    margin-top: 2px;
    flex-shrink: 0;
}
.landing-home__hero-module strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--v-black);
}
.landing-home__hero-module span {
    font-size: 12px;
    color: var(--v-gray-500);
}

/* Hero stack items */
.landing-home__hero-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.landing-home__hero-stack-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--v-gray-100);
}
.landing-home__hero-stack-item:last-child { border-bottom: none; }
.landing-home__hero-stack-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--v-black);
    margin-bottom: 2px;
}
.landing-home__hero-stack-item span {
    font-size: 12px;
    color: var(--v-gray-500);
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════
   LANDING — Signal strip
   ════════════════════════════════════════════════════════════════════ */
.landing-home__signal {
    padding: 48px 0;
    background: var(--v-white);
    border-top: 1px solid var(--v-gray-100);
    border-bottom: 1px solid var(--v-gray-100);
}
.landing-home__signal-inner {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--v-black);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: start;
}
.landing-home__signal-copy h2 {
    color: var(--v-black);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    letter-spacing: -1.28px;
    margin-top: 12px;
}
.landing-home__signal-copy p {
    color: var(--v-gray-600);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 8px;
}
.landing-home__signal-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.landing-home__signal-card {
    background: var(--v-white);
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.landing-home__signal-card strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--v-black);
}
.landing-home__signal-card span {
    font-size: 13px;
    color: var(--v-gray-500);
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════
   LANDING — Sections (shared)
   ════════════════════════════════════════════════════════════════════ */
.landing-section {
    padding: var(--landing-space) 0;
    border-top: 1px solid var(--v-gray-100);
}
.landing-section--muted {
    background: var(--v-white);
}

.landing-section__head {
    max-width: 600px;
    display: grid;
    gap: 10px;
    margin-bottom: 40px;
}
.landing-section__head h2 {
    font-size: var(--section-title);
    line-height: 1.2;
    letter-spacing: -1.28px;
}
.landing-section__head p {
    color: var(--v-gray-600);
    line-height: 1.56;
    font-size: 16px;
}

/* ════════════════════════════════════════════════════════════════════
   LANDING — Category cards
   ════════════════════════════════════════════════════════════════════ */
.landing-category-grid {
    grid-template-columns: repeat(3, 1fr);
}

.landing-category-card {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow);
    background: var(--v-white);
    padding: 20px;
    display: grid;
    gap: 10px;
    transition: box-shadow var(--transition-base), transform 0s;
    cursor: pointer;
}
.landing-category-card:hover {
    box-shadow: var(--v-card-shadow-hover);
    transform: none;
    border-color: transparent;
}

.landing-category-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v-gray-50);
    color: var(--v-gray-500);
}
.landing-category-card__icon svg { width: 20px; height: 20px; }

.landing-category-card h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
    line-height: 1.3;
}
.landing-category-card p {
    font-size: 13px;
    color: var(--v-gray-500);
    line-height: 1.5;
}
.landing-category-card span {
    font-size: 13px;
    font-weight: 500;
    color: var(--v-black);
}
.landing-category-card__action {
    font-size: 13px;
    font-weight: 500;
    color: var(--v-black);
}

/* ════════════════════════════════════════════════════════════════════
   LANDING — Featured course cards
   ════════════════════════════════════════════════════════════════════ */
.landing-course-grid {
    grid-template-columns: repeat(2, 1fr);
}

.landing-course-card {
    text-align: left;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform 0s;
    background: var(--v-white);
}
.landing-course-card:hover {
    box-shadow: var(--v-card-shadow-hover);
    transform: none;
    border-color: transparent;
}

.landing-course-card__media {
    min-height: 100px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.landing-course-card__provider {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
}
.landing-course-card__preview {
    text-align: right;
}
.landing-course-card__preview span {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.landing-course-card__preview strong {
    font-size: 13px;
    color: var(--v-white);
}

.landing-course-card__body {
    padding: 20px;
    display: grid;
    gap: 8px;
}
.landing-course-card__body h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.64px;
    line-height: 1.3;
}
.landing-course-card__instructor {
    color: var(--v-gray-500);
    font-size: 13px;
}
.landing-course-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--v-gray-500);
}

/* Course card theme accents — Vercel: minimal gradient headers */
.landing-course-card--cobalt .landing-course-card__media { background: linear-gradient(135deg, #171717 0%, #333 100%); }
.landing-course-card--mint .landing-course-card__media { background: linear-gradient(135deg, #171717 0%, #2a3a2a 100%); }
.landing-course-card--ember .landing-course-card__media { background: linear-gradient(135deg, #171717 0%, #3a2a1a 100%); }
.landing-course-card--slate .landing-course-card__media { background: linear-gradient(135deg, #171717 0%, #2a2a3a 100%); }

/* ════════════════════════════════════════════════════════════════════
   LANDING — Learning path cards
   ════════════════════════════════════════════════════════════════════ */
.landing-path-grid {
    grid-template-columns: repeat(3, 1fr);
}

.landing-path-card {
    padding: 24px;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow);
    background: var(--v-white);
    display: grid;
    gap: 12px;
}
.landing-path-card:hover {
    box-shadow: var(--v-card-shadow-hover);
}

.landing-path-card--featured {
    grid-column: span 2;
}

/* Remove theme-specific gradients; all white */
.landing-path-card--cobalt,
.landing-path-card--slate,
.landing-path-card--mint {
    background: var(--v-white);
}

.landing-path-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.landing-path-card__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--v-gray-500);
    margin-bottom: 4px;
}
.landing-path-card__head h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.96px;
    line-height: 1.2;
}
.landing-path-card__duration {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--v-gray-500);
}
.landing-path-card__audience {
    font-size: 13px;
    color: var(--v-gray-500);
    line-height: 1.5;
}

/* Progress bar */
.landing-progress {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--v-gray-100);
    overflow: hidden;
}
.landing-progress span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--v-black);
}
.landing-path-card__progress-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.landing-path-card__progress-label strong {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: var(--v-black);
}
.landing-path-card__progress-label span {
    color: var(--v-gray-500);
    font-size: 13px;
}

/* Module preview items */
.landing-path-card__preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.landing-path-card__preview-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.landing-path-card__preview-item.is-active {
    background: var(--v-gray-50);
}
.landing-path-card__preview-item > span:first-child {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--v-gray-400);
    flex-shrink: 0;
    margin-top: 2px;
}
.landing-path-card__preview-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--v-black);
}
.landing-path-card__preview-item small {
    font-size: 12px;
    color: var(--v-gray-500);
}

.landing-path-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--v-gray-100);
}
.landing-path-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.landing-path-card__chips span {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--v-gray-50);
    color: var(--v-gray-600);
    box-shadow: var(--v-ring-border);
}

/* ════════════════════════════════════════════════════════════════════
   LANDING — Project cards
   ════════════════════════════════════════════════════════════════════ */
.landing-project-grid {
    grid-template-columns: repeat(3, 1fr);
}

.landing-project-card {
    padding: 24px;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow);
    background: var(--v-white);
    display: grid;
    gap: 10px;
    transition: box-shadow var(--transition-base), transform 0s;
}
.landing-project-card:hover {
    box-shadow: var(--v-card-shadow-hover);
    transform: none;
    border-color: transparent;
}

.landing-project-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v-gray-50);
    color: var(--v-gray-500);
}
.landing-project-card__icon svg { width: 20px; height: 20px; }

.landing-project-card__format {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--v-gray-500);
}

.landing-project-card h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.64px;
    line-height: 1.3;
}
.landing-project-card p {
    font-size: 14px;
    color: var(--v-gray-600);
    line-height: 1.5;
}
.landing-project-card__skills {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--v-gray-500);
    margin-top: auto;
}

/* ════════════════════════════════════════════════════════════════════
   LANDING — Promo CTA section
   ════════════════════════════════════════════════════════════════════ */
.landing-promo-block {
    padding: 32px;
    border-radius: var(--radius-md);
    background: var(--v-black);
    color: var(--v-white);
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 24px;
    box-shadow: none;
}
.landing-promo-block__copy {
    display: grid;
    align-content: center;
    gap: 14px;
}
.landing-promo-block__copy h2 {
    color: var(--v-white);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    letter-spacing: -1.28px;
}
.landing-promo-block__copy p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    font-size: 14px;
}
.landing-promo-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.landing-promo-block__actions .btn--primary {
    background: var(--v-white);
    color: var(--v-black);
}
.landing-promo-block__actions .btn--primary:hover {
    background: var(--v-gray-100);
}
.landing-promo-block__actions .btn--secondary {
    background: transparent;
    color: var(--v-white);
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px;
}
.landing-promo-block__actions .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

.landing-promo-block__cards { display: grid; gap: 12px; }
.landing-promo-card {
    padding: 20px;
    border-radius: var(--radius-md);
    border: none;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
    display: grid;
    gap: 8px;
}
.landing-promo-card span {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.45);
}
.landing-promo-card strong {
    color: var(--v-white);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
    line-height: 1.3;
}
.landing-promo-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1.5;
}

/* ── Landing Video Grid ── */
.landing-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.landing-video-card--main {
    grid-column: 1 / -1;
}
.landing-video-card h3 { margin: 12px 0 4px; font-size: 16px; font-weight: 600; }
.landing-video-card p { color: var(--text2, #666); font-size: 14px; margin: 0; }
.landing-video-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: var(--radius-md, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
}
.landing-video-placeholder__play {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,0.15); display: flex;
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px); transition: transform .2s;
}
.landing-video-card:hover .landing-video-placeholder__play { transform: scale(1.1); }
.landing-video-placeholder__label {
    color: rgba(255,255,255,0.6); font-size: 13px; letter-spacing: .5px;
}
.landing-video-card--main .landing-video-placeholder__play { width: 80px; height: 80px; }
@media(max-width:640px){
    .landing-video-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   LANDING v5 — Coursera-style
   ══════════════════════════════════════════════════════════════ */
/* Hero */
.lhero { background: #ffffff; padding: 40px 0 36px; }
.lhero__inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); gap: 52px; align-items: center; }
.lhero__eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #7c746c; margin-bottom: 12px; }
.lhero__badge { display: inline-flex; align-items: center; gap: 10px; background: #f6f2ec; border-radius: 999px; padding: 8px 18px 8px 8px; font-size: 13px; color: #2e2a26; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(17,17,17,.05); }
.lhero__brand-logo { border-radius: 999px; }
.lhero__title { font-size: 48px; font-weight: 700; line-height: 1.06; color: #101010; margin: 0 0 16px; letter-spacing: -.05em; max-width: 12ch; }
.lhero__subtitle { font-size: 17px; color: #5f5a54; line-height: 1.72; margin: 0 0 22px; max-width: 58ch; }
.lhero__points { display: grid; gap: 10px; margin-bottom: 26px; }
.lhero__point { display: grid; gap: 3px; padding: 16px 20px; background: #fbf8f4; border-radius: 28px; box-shadow: 0 18px 40px rgba(17,17,17,.05); }
.lhero__point strong { font-size: 14px; color: #141414; }
.lhero__point span { font-size: 13px; color: #6b645d; }
.lhero__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.lhero__brandbar { margin-bottom: 24px; }
.lhero__brand-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #7c746c; margin-bottom: 10px; }
.lhero__logos { display: flex; flex-wrap: wrap; gap: 10px; }
.lhero__logo-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: #ffffff; color: #222; border-radius: 999px; box-shadow: 0 14px 34px rgba(17,17,17,.08); }
.lhero__logo-pill img { width: 20px; height: 20px; object-fit: contain; }
.lhero__logo-pill span { font-size: 13px; font-weight: 600; }
.lhero__proof { display: flex; gap: 14px; flex-wrap: wrap; }
.lhero__stat { display: flex; flex-direction: column; min-width: 122px; padding: 18px 20px; background: #f7f4ef; border-radius: 30px; box-shadow: 0 18px 40px rgba(17,17,17,.05); }
.lhero__stat strong { font-size: 24px; font-weight: 700; color: #151515; }
.lhero__stat span { font-size: 12px; color: #6f6760; line-height: 1.45; }
.lhero__visual { position: relative; min-height: 620px; }
.lhero__media { position: absolute; inset: 0 0 48px 0; padding: 18px; background: linear-gradient(180deg, #f6f2ec 0%, #efebe5 100%); border-radius: 42px; box-shadow: 0 40px 120px rgba(17,17,17,.1); overflow: hidden; }
.lhero__image { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 32px; }
.lhero__island { position: absolute; max-width: 270px; padding: 18px 20px; background: rgba(255,255,255,.86); border-radius: 28px; box-shadow: 0 24px 60px rgba(17,17,17,.12); backdrop-filter: blur(18px); }
.lhero__island--top { top: 22px; right: -8px; }
.lhero__island--bottom { left: -14px; bottom: 0; }
.lhero__island-label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a8178; margin-bottom: 8px; }
.lhero__island strong { display: block; font-size: 18px; line-height: 1.25; color: #111; margin-bottom: 6px; }
.lhero__island p { font-size: 13px; color: #5d5750; line-height: 1.5; }
@media(max-width:980px){
    .lhero__inner { grid-template-columns: 1fr; }
    .lhero__visual { min-height: 480px; }
    .lhero__title { font-size: 38px; max-width: none; }
}
@media(max-width:640px){
    .lhero__visual { min-height: auto; display: grid; gap: 12px; }
    .lhero__media { position: static; inset: auto; min-height: 320px; }
    .lhero__island { position: static; max-width: none; }
    .lhero__title { font-size: 31px; }
}

/* Trust strip */
.ltrust { background: #fff; padding: 12px 0 22px; }
.ltrust__label { font-size: 13px; color: #7d756d; text-align: center; margin: 0 0 16px; }
.ltrust__logos { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ltrust__chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fbf8f4; color: #1d1d1d; border-radius: 999px; box-shadow: 0 16px 34px rgba(17,17,17,.06); }
.ltrust__chip span { font-size: 13px; font-weight: 600; }
.ltrust__logo { max-height: 24px; width: auto; object-fit: contain; }

/* Generic section */
.lsec { padding: 64px 0; }
.lsec--alt { background: #f8f9fa; }
.lsec__hd { text-align: center; margin-bottom: 40px; }
.lsec__hd h2 { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
.lsec__hd p { font-size: 15px; color: #666; margin: 0; max-width: 600px; margin-left: auto; margin-right: auto; }

/* Value grid */
.lvalue-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.lvalue-card { background: #fff; border: none; border-radius: 32px; padding: 30px 26px; transition: box-shadow .2s, transform .2s; box-shadow: 0 18px 44px rgba(17,17,17,.06); }
.lvalue-card:hover { box-shadow: 0 26px 64px rgba(17,17,17,.1); transform: translateY(-2px); }
.lvalue-card__icon { margin-bottom: 12px; color: #171717; }
.lvalue-card__icon svg { width: 28px; height: 28px; }
.lvalue-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.lvalue-card p { font-size: 14px; color: #666; margin: 0; line-height: 1.5; }
@media(max-width:768px){ .lvalue-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .lvalue-grid { grid-template-columns: 1fr; } }

/* Category grid */
.lcat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.lcat-card { display: flex; gap: 16px; padding: 26px; background: #fff; border: none; border-radius: 32px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; box-shadow: 0 18px 44px rgba(17,17,17,.06); }
.lcat-card:hover { box-shadow: 0 26px 64px rgba(17,17,17,.1); transform: translateY(-2px); }
.lcat-card__icon { flex-shrink: 0; width: 52px; height: 52px; background: #f6f2ec; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #171717; }
.lcat-card__icon svg { width: 24px; height: 24px; }
.lcat-card__body h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.lcat-card__body p { font-size: 13px; color: #666; margin: 0 0 8px; line-height: 1.4; }
.lcat-card__count { font-size: 12px; color: #171717; font-weight: 700; }
@media(max-width:768px){ .lcat-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .lcat-grid { grid-template-columns: 1fr; } }

/* Featured course cards */
.lfeat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.lfeat-card { background: #fff; border: none; border-radius: 32px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; box-shadow: 0 18px 44px rgba(17,17,17,.06); }
.lfeat-card:hover { box-shadow: 0 26px 64px rgba(17,17,17,.1); transform: translateY(-2px); }
.lfeat-card__img { height: 160px; background: linear-gradient(145deg,#1f1f1f,#7c746c); position: relative; display: flex; align-items: flex-end; padding: 12px; }
.lfeat-card__badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.78); color: #111; font-size: 11px; padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(8px); }
.lfeat-card__body { padding: 16px; }
.lfeat-card__uni { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; margin-bottom: 8px; }
.lfeat-card__uni img { border-radius: 50%; }
.lfeat-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.lfeat-card__prof { font-size: 13px; color: #666; margin: 0 0 8px; }
.lfeat-card__meta { display: flex; gap: 12px; font-size: 12px; color: #888; }
@media(max-width:768px){ .lfeat-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .lfeat-grid { grid-template-columns: 1fr; } }

/* Accordion */
.laccordion { max-width: 800px; margin: 0 auto; }
.laccordion__item { border: none; border-radius: 30px; margin-bottom: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px rgba(17,17,17,.06); }
.laccordion__header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; border: none; background: none; cursor: pointer; font-size: 15px; font-weight: 600; }
.laccordion__header:hover { background: #f8f9fa; }
.laccordion__count { font-size: 13px; color: #888; font-weight: 400; margin-right: 8px; }
.laccordion__arrow { transition: transform .2s; display: inline-flex; }
.laccordion__arrow svg { width: 16px; height: 16px; }
.laccordion__item--open .laccordion__arrow { transform: rotate(180deg); }
.laccordion__body { display: none; padding: 0 20px 20px; }
.laccordion__item--open .laccordion__body { display: block; }
.laccordion__grid { display: grid; gap: 8px; }
.laccordion__course { padding: 14px 16px; background: #f8f5f1; border-radius: 22px; }
.laccordion__course-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.laccordion__course-meta { display: flex; gap: 12px; font-size: 12px; color: #888; }
.laccordion__course-area { background: #efe9e2; color: #171717; padding: 5px 10px; border-radius: 999px; font-size: 11px; }

/* Steps */
.lsteps { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.lstep { text-align: center; padding: 28px 24px; background: #fff; border-radius: 30px; box-shadow: 0 18px 44px rgba(17,17,17,.06); }
.lstep__n { width: 40px; height: 40px; border-radius: 999px; background: #171717; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 12px; }
.lstep h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.lstep p { font-size: 14px; color: #666; margin: 0; line-height: 1.5; }
@media(max-width:768px){ .lsteps { grid-template-columns: repeat(2,1fr); } }

/* CTA */
.lcta { padding: 80px 0; background: linear-gradient(180deg, #ffffff, #f7f4ef); }

/* Scroll animations */
.anim-wait { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; }
.anim-in { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   EXPLORAR v3 — Coursera-style
   ══════════════════════════════════════════════════════════════ */
.exp-wrap { min-height: 100vh; }
.exp-hero { background: #fff; padding: 24px 0 40px; color: var(--text); border-bottom: 1px solid var(--border); }
.exp-hero__panel { max-width: 920px; margin: 0 auto; padding: 40px 44px; background: #edf4ff; border-radius: 28px; box-shadow: var(--shadow-card); }
.exp-hero__copy { min-width: 0; }
.exp-hero__logo { display: block; width: min(100%, 220px); height: auto; margin: 0 0 18px; }
.exp-hero__title { font-size: clamp(34px, 4vw, 54px); font-weight: 600; margin: 0 0 12px; text-align: left; color: var(--black); letter-spacing: -0.045em; line-height: 1.05; max-width: 620px; }
.exp-hero__sub { font-size: 16px; color: var(--text2); text-align: left; margin: 0 0 24px; max-width: 620px; line-height: 1.56; letter-spacing: -0.018em; }
.exp-search-box { display: flex; max-width: 620px; margin: 0 0 18px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.exp-search-box__icon { display: flex; align-items: center; padding: 0 0 0 16px; color: #888; }
.exp-search-box__input { flex: 1; border: none; padding: 14px 12px; font-size: 15px; outline: none; color: #333; }
.exp-search-box__btn { border: none; background: var(--black); color: #fff; padding: 14px 20px; cursor: pointer; font-weight: 600; }
.exp-search-box__btn:hover { background: #2f2f2f; }
.exp-tags { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.exp-tags__label { font-size: 13px; color: var(--text3); }
.exp-tag { border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 4px 14px; border-radius: 16px; font-size: 13px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.exp-tag:hover { background: #ececf1; border-color: #d6d6db; }
.exp-body { padding: 32px 0 64px; }
.exp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.exp-filter { border: 1px solid #ddd; background: #fff; color: #333; padding: 6px 16px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: all .2s; }
.exp-filter:hover { border-color: #0056D2; color: #0056D2; }
.exp-filter--on { background: #0056D2; color: #fff; border-color: #0056D2; }
.exp-results { font-size: 14px; color: #666; margin: 0 0 24px; }
.exp-section { margin-bottom: 40px; }
.exp-section__title { font-size: 20px; font-weight: 700; margin: 0 0 20px; }
.exp-course-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media(max-width:1024px){ .exp-course-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:768px){ .exp-course-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .exp-course-grid { grid-template-columns: 1fr; } }

/* Course cards */
.exp-ccard { display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.exp-ccard:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); transform: translateY(-2px); }
.exp-ccard__img { height: 160px; position: relative; display: flex; align-items: flex-end; padding: 10px 12px; background: linear-gradient(135deg,#0f3460,#1a1a2e); }
.exp-ccard__img--ia { background: linear-gradient(135deg,#1a237e,#0d47a1); }
.exp-ccard__img--programacion { background: linear-gradient(135deg,#1565c0,#0288d1); }
.exp-ccard__img--matematicas { background: linear-gradient(135deg,#6a1b9a,#7b1fa2); }
.exp-ccard__img--sistemas { background: linear-gradient(135deg,#00695c,#00897b); }
.exp-ccard__img--teoria { background: linear-gradient(135deg,#e65100,#f4511e); }
.exp-ccard__img--idiomas { background: linear-gradient(135deg,#33691e,#558b2f); }
.exp-ccard__img--gestion { background: linear-gradient(135deg,#37474f,#546e7a); }
.exp-ccard__img--investigacion { background: linear-gradient(135deg,#4e342e,#6d4c41); }
.exp-ccard__badge-pub { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.92); color: #1f2937; font-size: 11px; padding: 4px 10px; border-radius: 4px; font-weight: 700; }
.exp-ccard__area-label { color: rgba(255,255,255,.7); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.exp-ccard__body { padding: 14px 12px; flex: 1; display: flex; flex-direction: column; }
.exp-ccard__uni { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #616161; margin-bottom: 8px; }
.exp-ccard__uni img { width: 18px; height: 18px; object-fit: contain; }
.exp-ccard__title { font-size: 14px; font-weight: 600; margin: 0 0 8px; line-height: 1.35; color: #1f1f1f; }
.exp-ccard__type { font-size: 12px; color: #616161; margin-top: auto; }

/* Explore accordion */
.exp-acc-item { border: 1px solid #e5e5e5; border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: #fff; }
.exp-acc-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; border: none; background: none; cursor: pointer; }
.exp-acc-header:hover { background: #f8f9fa; }
.exp-acc-header__left { display: flex; align-items: center; gap: 12px; }
.exp-acc-header__badge { width: 36px; height: 36px; border-radius: 8px; background: #0056D2; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.exp-acc-header__title { font-size: 15px; font-weight: 600; }
.exp-acc-header__right { display: flex; align-items: center; gap: 8px; }
.exp-acc-header__count { font-size: 13px; color: #888; }
.exp-acc-header__arrow { transition: transform .2s; display: inline-flex; }
.exp-acc-header__arrow svg { width: 16px; height: 16px; }
.exp-acc-item--open .exp-acc-header__arrow { transform: rotate(180deg); }
.exp-acc-body { display: none; padding: 0 20px 20px; }
.exp-acc-item--open .exp-acc-body { display: block; }

/* ════════════════════════════════════════════════════════════════════
   AUTH — Vercel split layout
   ════════════════════════════════════════════════════════════════════ */
.auth-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background: var(--v-white);
}
.auth-shell__aside {
    background: var(--v-black);
    color: var(--v-white);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
}
.auth-shell__brand {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--v-white);
    text-decoration: none;
}
.auth-shell__brand:hover { text-decoration: none; opacity: 0.8; }
.auth-shell__brand-wrap { margin-bottom: 16px; }
.auth-shell__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    display: block;
}
.auth-shell__headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1.28px;
    line-height: 1.2;
    color: var(--v-white);
    margin-bottom: 12px;
}
.auth-shell__copy {
    font-size: 16px;
    line-height: 1.56;
    color: rgba(255, 255, 255, 0.7);
}
.auth-shell__benefits { display: flex; flex-direction: column; gap: 12px; }
.auth-shell__benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
}
.auth-shell__benefit-icon { display: flex; flex-shrink: 0; color: rgba(255, 255, 255, 0.5); }
.auth-shell__benefit-icon svg { width: 18px; height: 18px; }
.auth-shell__benefit-title { font-size: 14px; font-weight: 600; color: var(--v-white); margin-bottom: 2px; }
.auth-shell__benefit-text { font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.4; }

.auth-shell__stats { display: flex; gap: 32px; margin-top: 16px; }
.auth-shell__stat { display: flex; flex-direction: column; }
.auth-shell__stat strong {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: var(--v-white);
}
.auth-shell__stat span { font-size: 12px; color: rgba(255, 255, 255, 0.5); }

/* Auth card (form side) */
.auth-shell__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card__header { margin-bottom: 24px; }
.auth-card__badge {
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--v-badge-bg);
    color: var(--v-badge-text);
    margin-bottom: 12px;
}
.auth-card__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: var(--v-black);
    margin-bottom: 4px;
}
.auth-card__subtitle { font-size: 14px; color: var(--v-gray-600); }

.auth-card__form { display: grid; gap: 16px; }

.auth-card__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    font-size: 12px;
    color: var(--v-gray-400);
}
.auth-card__divider::before,
.auth-card__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--v-gray-100);
}

.auth-card__status { font-size: 13px; padding: 8px 12px; border-radius: var(--radius-sm); min-height: 20px; }
.auth-card__status--error { background: #fef2f2; color: #dc2626; box-shadow: rgba(220,38,38,0.1) 0px 0px 0px 1px; }
.auth-card__status--success { background: #f0fdf4; color: #16a34a; box-shadow: rgba(22,163,74,0.1) 0px 0px 0px 1px; }
.auth-card__status--info { background: var(--v-badge-bg); color: var(--v-badge-text); box-shadow: rgba(0,104,214,0.1) 0px 0px 0px 1px; }

.auth-card__footer { margin-top: 16px; text-align: center; font-size: 14px; color: var(--v-gray-500); }
.auth-card__footer a { font-weight: 500; color: var(--v-black); }

.auth-card__terms { font-size: 12px; color: var(--v-gray-400); text-align: center; line-height: 1.5; }
.auth-card__terms a { color: var(--v-gray-500); text-decoration: underline; }

/* Social auth buttons */
.auth-social-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.auth-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--v-white);
    box-shadow: var(--v-ring-border);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--v-black);
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-social-button:hover { background: var(--v-gray-50); }
.auth-social-button__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--v-white);
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER — Vercel dark
   ════════════════════════════════════════════════════════════════════ */
.footer {
    background: var(--v-black);
    color: rgba(255, 255, 255, 0.7);
    padding: 48px 24px 32px;
    border-top: none;
}
.footer .container { max-width: var(--max-width); margin: 0 auto; }
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}
.footer__logo {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--v-white);
    margin-bottom: 8px;
}
.footer__brand-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
    background: none;
    padding: 0;
    border-radius: 0;
}
.footer__desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.56;
    margin-bottom: 16px;
    max-width: 320px;
}
.footer__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    margin-bottom: 16px;
}
.footer__meta span { color: rgba(255, 255, 255, 0.35); }
.footer__social { display: flex; gap: 8px; }
.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    transition: background var(--transition-fast);
}
.footer__social-link:hover { background: rgba(255, 255, 255, 0.14); color: var(--v-white); text-decoration: none; }
.footer__social-link svg { width: 16px; height: 16px; }

.footer__column-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--v-white);
    margin-bottom: 12px;
    letter-spacing: -0.16px;
}
.footer__link {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    padding: 3px 0;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer__link:hover { color: var(--v-white); text-decoration: none; }

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__copyright { font-size: 12px; color: rgba(255, 255, 255, 0.35); }
.footer__bottom-links { display: flex; gap: 16px; }
.footer__bottom-link { font-size: 12px; color: rgba(255, 255, 255, 0.4); text-decoration: none; }
.footer__bottom-link:hover { color: var(--v-white); text-decoration: none; }

/* Footer info panel */
.footer-info-panel {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 24px;
}
.footer-info-panel__title { font-size: 14px; font-weight: 600; color: var(--v-white); margin-bottom: 8px; }
.footer-info-panel__body { font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; }
.footer-info-panel__close { margin-top: 12px; background: none; border: none; font-size: 12px; color: rgba(255, 255, 255, 0.4); cursor: pointer; }
.footer-info-panel__close:hover { color: var(--v-white); }

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR (logged-in)
   ════════════════════════════════════════════════════════════════════ */
.sidebar { background: var(--v-white); border-right: none; box-shadow: var(--v-border-shadow); }
.sidebar-link {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--v-gray-600);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}
.sidebar-link:hover { background: var(--v-gray-50); color: var(--v-black); }
.sidebar-link.active { background: var(--v-black); color: var(--v-white); }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════════════════════════ */
.dashboard-header__greeting {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1.28px;
    color: var(--v-black);
}
.dashboard-header__subtitle { font-size: 16px; color: var(--v-gray-600); line-height: 1.56; }

/* ════════════════════════════════════════════════════════════════════
   EXPLORE PAGE
   ════════════════════════════════════════════════════════════════════ */
.explore-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -1.28px; color: var(--v-black); }
.explore-search {
    background: var(--v-white);
    box-shadow: var(--v-ring-border);
    border: none;
    border-radius: var(--radius-sm);
}
.explore-search:focus-within { box-shadow: 0 0 0 1px var(--v-black); }
.explore-filter-pill {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 9999px;
    border: none;
    background: var(--v-white);
    box-shadow: var(--v-ring-border);
    color: var(--v-gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.explore-filter-pill:hover,
.explore-filter-pill.active {
    background: var(--v-black);
    color: var(--v-white);
    box-shadow: none;
}
.explore-collection-card {
    background: var(--v-white);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow);
    transition: box-shadow var(--transition-base);
}
.explore-collection-card:hover { box-shadow: var(--v-card-shadow-hover); }

/* ════════════════════════════════════════════════════════════════════
   COURSE DETAIL
   ════════════════════════════════════════════════════════════════════ */
.course-hero { background: var(--v-black); color: var(--v-white); }
.course-hero__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -1.28px; }
.course-hero__info { display: flex; align-items: center; gap: 12px; }

/* Progress bar */
.progress-bar { background: var(--v-gray-100); border-radius: 2px; height: 4px; }
.progress-bar__fill { background: var(--v-black); border-radius: 2px; height: 100%; transition: width var(--transition-slow); }

/* Tabs */
.tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--v-gray-100); }
.tab-btn {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--v-gray-500);
    padding: 10px 16px;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}
.tab-btn:hover { color: var(--v-black); }
.tab-btn.active { color: var(--v-black); font-weight: 600; border-bottom-color: var(--v-black); }

/* Registration modal (landing) */
.landing-register-modal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.registration-modal {
    background: var(--v-white);
    border-radius: var(--radius-md);
    box-shadow: var(--v-card-shadow), 0 24px 48px rgba(0,0,0,0.12);
}

/* ════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════════ */
.animate-fade-in { animation: vercelFadeIn 0.4s ease both; }
.animate-fade-in-up { animation: vercelFadeIn 0.5s ease both; }
@keyframes vercelFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.stagger-1 { animation-delay: 0s; }
.stagger-2 { animation-delay: 0.06s; }
.stagger-3 { animation-delay: 0.12s; }
.stagger-4 { animation-delay: 0.18s; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--v-gray-100); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--v-gray-400); }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .landing-course-grid { grid-template-columns: 1fr 1fr; }
    .landing-home__hero-visual {
        grid-template-columns: 1fr 1fr;
    }
    .landing-home__hero-panel--primary {
        grid-column: span 2;
    }
}

@media (max-width: 1024px) {
    .explorar-dropdown__grid { grid-template-columns: repeat(2, 1fr); }
    .landing-category-grid { grid-template-columns: repeat(2, 1fr); }
    .landing-path-grid { grid-template-columns: 1fr 1fr; }
    .landing-path-card--featured { grid-column: span 2; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-shell__aside { display: none; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .landing-home__hero-inner {
        grid-template-columns: 1fr;
    }
    .landing-home__hero-visual {
        max-width: 600px;
    }
    .landing-home__signal-inner {
        grid-template-columns: 1fr;
    }
    .landing-promo-block {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 56px;
        --landing-space: 48px;
    }

    .site-nav__search--public { display: none; }
    .site-nav__link--quiet { display: none; }
    .site-nav__mobile-toggle {
        display: flex;
        background: none;
        border: none;
        color: var(--v-black);
        cursor: pointer;
        padding: 6px;
    }
    .site-nav__mobile-toggle svg { width: 20px; height: 20px; }

    .explorar-dropdown__grid { grid-template-columns: 1fr; }
    .explorar-dropdown__intro { flex-direction: column; }

    .landing-home__hero-title {
        font-size: clamp(2rem, 6vw, 2.5rem);
        letter-spacing: -1.28px;
    }
    .landing-home__hero-points { flex-direction: column; gap: 10px; }
    .landing-home__hero-proof { gap: 24px; }
    .landing-home__hero-visual {
        grid-template-columns: 1fr;
    }
    .landing-home__hero-panel--primary,
    .landing-home__hero-panel--secondary,
    .landing-home__hero-panel--accent {
        grid-column: auto;
    }
    .landing-home__signal-points { grid-template-columns: 1fr; }

    .landing-category-grid { grid-template-columns: 1fr; }
    .landing-course-grid { grid-template-columns: 1fr; }
    .landing-path-grid { grid-template-columns: 1fr; }
    .landing-path-card--featured { grid-column: auto; }
    .landing-project-grid { grid-template-columns: 1fr; }

    .auth-social-group { grid-template-columns: 1fr; }
    .auth-card { padding: 24px 16px; }

    .footer__grid { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer__bottom-links { justify-content: center; }

    .landing-section__head h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
    .landing-promo-block__copy h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}

@media (max-width: 480px) {
    .landing-home__hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .landing-home__hero-actions .btn { width: 100%; }
    .landing-promo-block__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .landing-promo-block__actions .btn { width: 100%; }
}

/* Premium landing refinement */
:root {
    --landing-space: clamp(56px, 6vw, 92px);
}

.landing-home .container {
    max-width: 1120px;
}

.landing-section {
    padding: var(--landing-space) 0;
}

.landing-section__head {
    max-width: 720px;
    gap: 12px;
    margin-bottom: 32px;
}

.landing-section__head h2 {
    max-width: 12ch;
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    letter-spacing: -1.4px;
}

.landing-section__head p {
    max-width: 56ch;
    font-size: 15px;
    line-height: 1.73;
    color: #4a4a4a;
}

.landing-home__eyebrow {
    color: #5d5d5d;
}

.landing-home__eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    margin-right: 10px;
    background: currentColor;
    align-self: center;
}

.landing-home__eyebrow--dark {
    color: rgba(255, 255, 255, 0.72);
}

.landing-home__hero {
    padding-top: calc(var(--nav-height) + 56px);
    padding-bottom: clamp(44px, 6vw, 88px);
}

.landing-home__hero-inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 56px;
    align-items: center;
}

.landing-home__hero-copy {
    gap: 24px;
}

.landing-home__hero-title {
    max-width: 10.5ch;
    font-size: clamp(3rem, 5.6vw, 4.6rem);
    line-height: 0.96;
}

.landing-home__hero-subtitle {
    max-width: 54ch;
    font-size: 17px;
    line-height: 1.76;
    color: #444444;
}

.landing-home__hero-points {
    gap: 0;
    max-width: 560px;
}

.landing-home__hero-point {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--v-gray-100);
    font-size: 15px;
    line-height: 1.65;
    color: #3f3f3f;
}

.landing-home__hero-point:last-child {
    border-bottom: 1px solid var(--v-gray-100);
}

.landing-home__hero-point svg {
    display: none;
}

.landing-home__hero-point-index {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #6a6a6a;
    padding-top: 3px;
}

.landing-home__hero-actions {
    gap: 14px;
    align-items: center;
}

.landing-home__hero-actions .btn--primary {
    min-width: 220px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: rgba(23, 23, 23, 0.12) 0 12px 26px -14px;
}

.landing-home__hero-actions .btn--primary:hover {
    background: #0f0f0f;
    box-shadow: rgba(23, 23, 23, 0.2) 0 16px 30px -16px;
}

.landing-home__hero-actions .btn--secondary {
    min-width: 176px;
    padding: 13px 18px;
    background: #f7f7f7;
    box-shadow: none;
    color: #171717;
}

.landing-home__hero-actions .btn--secondary:hover {
    background: #efefef;
}

.landing-home__hero-proof {
    gap: 24px;
    margin-top: 4px;
    padding-top: 6px;
}

.landing-home__hero-proof-item strong {
    font-size: 28px;
}

.landing-home__hero-proof-item span {
    font-size: 12px;
    color: #5c5c5c;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.landing-home__hero-visual {
    align-self: stretch;
    padding: 18px;
    gap: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    box-shadow: inset 0 0 0 1px var(--v-gray-100);
}

.landing-home__hero-panel {
    padding: 24px;
    gap: 12px;
    box-shadow: rgba(17, 17, 17, 0.06) 0 1px 2px, rgba(17, 17, 17, 0.06) 0 0 0 1px;
}

.landing-home__hero-panel--secondary,
.landing-home__hero-panel--accent {
    background: rgba(255, 255, 255, 0.84);
}

.landing-home__hero-panel h2 {
    font-size: 20px;
}

.landing-home__hero-panel p {
    font-size: 14px;
    line-height: 1.6;
    color: #5a5a5a;
}

.landing-home__hero-chip {
    background: #efefef;
    color: #3f3f3f;
}

.landing-home__hero-chip--soft {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #e7e7e7;
}

.landing-home__hero-progress-meta strong {
    font-size: 24px;
}

.landing-home__hero-module {
    padding: 10px 12px;
}

.landing-home__hero-module.is-active,
.landing-path-card__preview-item.is-active {
    background: #f5f5f5;
}

.landing-home__signal {
    padding: 12px 0 0;
    border-top: none;
    border-bottom: none;
}

.landing-home__signal-inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 28px;
    padding: 32px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
    box-shadow: inset 0 0 0 1px var(--v-gray-100);
}

.landing-home__signal-copy {
    display: grid;
    gap: 10px;
    align-content: start;
}

.landing-home__signal-copy h2 {
    margin-top: 10px;
    max-width: 13ch;
    font-size: clamp(1.85rem, 3vw, 2.4rem);
}

.landing-home__signal-copy p {
    margin: 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.7;
    color: #474747;
}

.landing-home__signal-note {
    color: #5c5c5c;
}

.landing-home__signal-points {
    gap: 10px;
}

.landing-home__signal-card {
    padding: 18px;
    min-height: 152px;
    box-shadow: rgba(17, 17, 17, 0.05) 0 1px 1px, rgba(17, 17, 17, 0.06) 0 0 0 1px;
}

.landing-home__signal-card strong {
    font-size: 15px;
}

.landing-home__signal-card span {
    font-size: 14px;
    color: #565656;
}

.landing-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.landing-category-card {
    min-height: 190px;
    padding: 24px;
    gap: 16px;
    align-content: start;
}

.landing-category-card__icon {
    display: none;
}

.landing-category-card__content {
    display: grid;
    gap: 10px;
}

.landing-category-card__label,
.landing-project-card__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a6a6a;
}

.landing-category-card h3,
.landing-project-card h3,
.landing-path-card__head h3,
.landing-course-card__body h3 {
    font-size: 22px;
    letter-spacing: -0.84px;
}

.landing-category-card p,
.landing-project-card p,
.landing-course-card__instructor,
.landing-path-card > p,
.landing-path-card__audience {
    font-size: 14px;
    line-height: 1.65;
    color: #555555;
}

.landing-category-card__action {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--v-gray-100);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.landing-course-grid,
.landing-path-grid,
.landing-project-grid {
    gap: 16px;
}

.landing-course-card--featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
}

.landing-course-card--featured .landing-course-card__media {
    min-height: 100%;
}

.landing-course-card__media {
    padding: 20px;
    min-height: 136px;
}

.landing-course-card__body {
    padding: 24px;
    gap: 10px;
}

.landing-course-card__meta {
    padding-top: 10px;
    border-top: 1px solid var(--v-gray-100);
    font-size: 13px;
    color: #4f4f4f;
}

.landing-path-card {
    padding: 24px;
    gap: 14px;
    min-height: 100%;
}

.landing-path-card--featured {
    box-shadow: rgba(17, 17, 17, 0.08) 0 1px 2px, rgba(17, 17, 17, 0.08) 0 0 0 1px, rgba(17, 17, 17, 0.05) 0 18px 30px -24px;
}

.landing-path-card__footer {
    padding-top: 12px;
}

.landing-path-card__chips span {
    background: #ffffff;
}

.landing-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-project-card {
    min-height: 236px;
    padding: 24px;
    gap: 12px;
}

.landing-project-card__icon {
    display: none;
}

.landing-project-card__format {
    font-size: 12px;
    color: #525252;
}

.landing-project-card .btn {
    margin-top: auto;
    width: fit-content;
}

.landing-promo-block {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
    gap: 28px;
    padding: 36px;
}

.landing-promo-block__copy {
    gap: 16px;
}

.landing-promo-block__copy h2 {
    max-width: 12ch;
    font-size: clamp(2rem, 3vw, 2.6rem);
}

.landing-promo-block__copy p {
    max-width: 48ch;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.76);
}

.landing-promo-card {
    padding: 18px;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.landing-promo-card p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
}

.landing-promo-block__actions .btn--primary {
    min-width: 200px;
    font-weight: 600;
}

.landing-promo-block__actions .btn--secondary {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1024px) {
    .landing-home__hero-inner {
        align-items: start;
    }

    .landing-course-card--featured {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .landing-home__eyebrow::before {
        width: 24px;
    }

    .landing-home__hero-title {
        max-width: 12ch;
        font-size: clamp(2.4rem, 8vw, 3.1rem);
    }

    .landing-home__hero-point {
        grid-template-columns: 28px 1fr;
    }

    .landing-home__hero-visual {
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .landing-home__signal-inner {
        padding: 24px;
    }

    .landing-category-grid,
    .landing-project-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    body {
        background: #fff;
        color: #000;
    }

    #site-header,
    #site-footer,
    .site-nav,
    .mobile-menu,
    .lesson-coach,
    .coach,
    .btn,
    .skip-link,
    .noscript-banner {
        display: none !important;
    }

    #app {
        min-height: auto;
        padding-top: 0;
    }

    .page-wrap,
    .lesson-workspace,
    .lesson-stage,
    .card {
        max-width: none;
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
}

/* ================================================================
   DASHBOARD ALUMNO — Mi Aprendizaje (Coursera style)
   ================================================================ */
.dash-wrap{max-width:1200px;margin:0 auto;padding:32px 24px 64px}
.dash-header{display:flex;align-items:center;gap:20px;margin-bottom:32px}
.dash-header__avatar{width:64px;height:64px;border-radius:50%;background:#0056D2;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;flex-shrink:0}
.dash-header__info h1{font-size:24px;font-weight:700;margin:0;color:#1a1a1a}
.dash-header__goal{font-size:14px;color:#666;margin:4px 0 0;display:flex;align-items:center;gap:8px}
.dash-header__edit{color:#0056D2;font-size:13px;text-decoration:underline}
.dash-body{display:grid;grid-template-columns:320px 1fr;gap:32px;align-items:start}
.dash-left{display:flex;flex-direction:column;gap:16px}
.dash-right{min-width:0}
.dash-card{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:20px;transition:box-shadow .15s}
.dash-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.dash-card__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.dash-card__hd h3{font-size:16px;font-weight:600;margin:0;color:#1a1a1a}
.dash-card__link{font-size:13px;color:#0056D2;text-decoration:none}
.dash-card__link:hover{text-decoration:underline}
.dash-goals{display:flex;flex-direction:column;gap:12px}
.dash-goal{display:flex;align-items:center;gap:10px;font-size:14px;color:#333}
.dash-goal__icon{width:20px;height:20px;flex-shrink:0;color:#0056D2}
.dash-goal__icon svg{width:20px;height:20px}
.dash-goal__text{flex:1}
.dash-goal__count{font-size:13px;color:#999;font-weight:500}
.dash-week{display:flex;gap:6px;margin-bottom:14px}
.dash-week__day{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;font-weight:500;color:#666;background:#f5f5f5}
.dash-week__day--active{background:#0056D2;color:#fff}
.dash-calendar{margin-top:4px}
.cal__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal__nav-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666}
.cal__nav-btn svg{width:18px;height:18px}
.cal__nav-btn:hover{color:#0056D2}
.cal__month{font-size:14px;font-weight:600;color:#1a1a1a;text-transform:capitalize}
.cal__header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px}
.cal__day-label{font-size:11px;font-weight:600;color:#999;padding:4px 0}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px}
.cal__cell{font-size:13px;padding:6px 0;border-radius:50%;color:#333;cursor:default}
.cal__cell--empty{visibility:hidden}
.cal__cell--today{background:#0056D2;color:#fff;font-weight:600}
.dash-activity{display:flex;flex-direction:column;gap:10px}
.dash-activity__row{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.dash-activity__label{color:#666}
.dash-activity__val{color:#1a1a1a;font-size:16px}
.dash-tabs{display:flex;gap:0;border-bottom:2px solid #e5e5e5;margin-bottom:20px}
.dash-tab{padding:12px 20px;font-size:14px;font-weight:500;color:#666;background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.dash-tab:hover{color:#0056D2}
.dash-tab--on{color:#0056D2;border-bottom-color:#0056D2;font-weight:600}
.dash-course{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 0;border-bottom:1px solid #f0f0f0;gap:16px}
.dash-course:last-child{border-bottom:none}
.dash-course__body{flex:1;min-width:0}
.dash-course__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dash-course__title{font-size:16px;font-weight:600;color:#1a1a1a;text-decoration:none}
.dash-course__title:hover{color:#0056D2;text-decoration:underline}
.dash-course__more{background:none;border:none;cursor:pointer;padding:4px;color:#999;position:relative}
.dash-course__more:hover{color:#333}
.dash-course__instructor{font-size:13px;color:#666;margin:4px 0 0}
.dash-course__meta{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.dash-course__time{font-size:12px;color:#999}
.dash-course__lessons{font-size:12px;color:#999;margin-top:6px}
.dash-badge{font-size:12px;font-weight:500;padding:2px 10px;border-radius:12px;background:#f0f0f0;color:#666}
.dash-badge--ok{background:#e6f4ea;color:#137333}
.dash-badge--prog{background:#e8f0fe;color:#1a73e8}
.dash-pb{height:6px;background:#e5e5e5;border-radius:3px;margin-top:10px;overflow:hidden}
.dash-pb__fill{height:100%;background:#0056D2;border-radius:3px;transition:width .3s}
.dash-course__action{flex-shrink:0}
.btn--blue{display:inline-flex;align-items:center;justify-content:center;padding:8px 24px;font-size:14px;font-weight:600;color:#fff;background:#0056D2;border:none;border-radius:4px;cursor:pointer;text-decoration:none;transition:background .15s}
.btn--blue:hover{background:#0041a3}
.dash-ctx-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);min-width:200px;z-index:100;overflow:hidden}
.dash-ctx-menu__item{display:block;width:100%;padding:10px 16px;font-size:13px;color:#333;text-decoration:none;border:none;background:none;cursor:pointer;text-align:left}
.dash-ctx-menu__item:hover{background:#f5f5f5}
.dash-ctx-menu__item--danger{color:#d32f2f}
.dash-ctx-menu__item--danger:hover{background:#fef0f0}
.dash-empty{text-align:center;padding:48px 24px}
.dash-empty h3{font-size:18px;color:#1a1a1a;margin:0 0 8px}
.dash-empty p{font-size:14px;color:#666;margin:0 0 20px}
@media(max-width:768px){
    .dash-body{grid-template-columns:1fr}
    .dash-header__avatar{width:48px;height:48px;font-size:20px}
    .dash-header__info h1{font-size:20px}
    .dash-tab{padding:10px 14px;font-size:13px}
}

/* ================================================================
   PERSONAL HOME - Authenticated student landing
   ================================================================ */
.personal-home {
    background: #ffffff;
    color: #111827;
}

.personal-home .container {
    max-width: 1344px;
}

.ph-hero {
    position: relative;
    padding: 64px 0 48px;
    border-bottom: 0;
    background:
        linear-gradient(90deg, rgba(7, 17, 31, 0.96) 0%, rgba(7, 17, 31, 0.91) 48%, rgba(7, 17, 31, 0.58) 78%, rgba(7, 17, 31, 0.82) 100%),
        url('../assets/images/course-exani-main.png') right center / cover no-repeat;
    overflow: hidden;
}

.ph-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
}

.ph-hero > .container {
    position: relative;
    z-index: 1;
}

.ph-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 48px;
    align-items: center;
}

.ph-hero__copy {
    max-width: 760px;
}

.ph-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ph-hero__copy h1,
.ph-section-head h2,
.ph-side h2 {
    margin: 0;
    color: #111827;
    letter-spacing: 0;
}

.ph-hero__copy h1 {
    max-width: 820px;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.08;
}

.ph-hero__copy p,
.ph-section-head p {
    margin: 14px 0 0;
    max-width: 720px;
    color: #5f6368;
    font-size: 18px;
    line-height: 1.56;
}

.ph-hero .ph-kicker {
    color: #93c5fd;
}

.ph-hero__copy p {
    color: #dbeafe;
}

.ph-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.ph-hero .btn--outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.06);
}

.ph-hero .btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ph-summary {
    min-height: 320px;
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background: rgba(248, 251, 255, 0.94);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    padding: 26px;
    display: grid;
    align-content: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.ph-summary::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 86, 210, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 86, 210, 0.08) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: 0.45;
}

.ph-summary > * {
    position: relative;
    z-index: 1;
}

.ph-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #475569;
    font-size: 13px;
}

.ph-summary__head strong {
    color: #111827;
}

.ph-summary__ring {
    width: 128px;
    height: 128px;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(#0056d2 0 var(--progress), #dbeafe var(--progress) 100%);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 28px rgba(0, 86, 210, 0.18);
}

.ph-summary__ring span {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #111827;
    font-size: 28px;
    font-weight: 800;
}

.ph-summary__bars {
    display: grid;
    gap: 8px;
}

.ph-summary__bars span {
    height: 9px;
    border-radius: 999px;
    background: #dbeafe;
    overflow: hidden;
}

.ph-summary__bars span::before {
    content: '';
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0056d2, #21c17a);
}

.ph-summary p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.ph-stats {
    padding: 24px 0;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.ph-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ph-stat {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.ph-stat span {
    color: #64748b;
    font-size: 13px;
}

.ph-stat strong {
    color: #111827;
    font-size: 30px;
    line-height: 1;
}

.ph-section {
    padding: 54px 0;
    background: #ffffff;
}

.ph-section--soft {
    background: #f5f7fb;
}

.ph-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
}

.ph-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 24px;
}

.ph-section-head h2,
.ph-side h2 {
    font-size: 30px;
    line-height: 1.14;
}

.ph-link {
    color: #0056d2;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ph-link:hover {
    text-decoration: underline;
}

.ph-course-list {
    display: grid;
    gap: 14px;
}

.ph-course-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.ph-course-row__main {
    min-width: 0;
    flex: 1;
}

.ph-course-row__status {
    color: #0056d2;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.ph-course-row h3 {
    margin: 7px 0 6px;
    font-size: 18px;
    line-height: 1.25;
}

.ph-course-row h3 a {
    color: #111827;
    text-decoration: none;
}

.ph-course-row h3 a:hover {
    color: #0056d2;
}

.ph-course-row p {
    margin: 0;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.5;
}

.ph-course-row__side {
    display: grid;
    justify-items: end;
    gap: 12px;
    min-width: 128px;
}

.ph-course-row__side strong {
    color: #111827;
    font-size: 24px;
}

.ph-progress-line {
    height: 8px;
    margin-top: 14px;
    border-radius: 999px;
    background: #e5edf8;
    overflow: hidden;
}

.ph-progress-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0056d2, #21c17a);
}

.ph-side {
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background: #f8fbff;
    padding: 24px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.ph-plan {
    display: grid;
    gap: 16px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.ph-plan li {
    display: grid;
    gap: 4px;
    padding-left: 18px;
    border-left: 3px solid #0056d2;
}

.ph-plan strong {
    color: #111827;
    font-size: 15px;
}

.ph-plan span {
    color: #5f6368;
    font-size: 14px;
    line-height: 1.5;
}

.ph-empty {
    padding: 34px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
}

.ph-empty h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 22px;
}

.ph-empty p {
    margin: 0 0 20px;
    color: #5f6368;
    line-height: 1.55;
}

.ph-offer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ph-offer-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid #d8e0ef;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.ph-offer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.1);
}

.ph-offer-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #0056d2, #21a67a);
    overflow: hidden;
}

.ph-offer-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ph-offer-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.48));
}

.ph-offer-card__media span {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.ph-offer-card__body {
    display: grid;
    gap: 9px;
    padding: 18px;
}

.ph-offer-card__body small {
    color: #0056d2;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.ph-offer-card__body h3 {
    margin: 0;
    color: #111827;
    font-size: 17px;
    line-height: 1.28;
}

.ph-offer-card__body p {
    margin: 0;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.48;
}

.ph-offer-card__body strong {
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
}

.ph-anim-wait {
    opacity: 0;
    transform: translateY(14px);
}

.ph-anim-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 420ms ease, transform 420ms ease;
    transition-delay: var(--delay, 0ms);
}

@media (max-width: 1100px) {
    .ph-hero__grid,
    .ph-grid {
        grid-template-columns: 1fr;
    }

    .ph-summary,
    .ph-side {
        max-width: 620px;
    }

    .ph-offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .ph-hero {
        padding: 32px 0 24px;
    }

    .ph-hero__copy h1 {
        font-size: 30px;
    }

    .ph-hero__copy p,
    .ph-section-head p {
        font-size: 15px;
    }

    .ph-stats__grid,
    .ph-offer-grid {
        grid-template-columns: 1fr;
    }

    .ph-section-head,
    .ph-course-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ph-course-row__side {
        justify-items: start;
    }

    .notifications-hero,
    .notifications-layout {
        grid-template-columns: 1fr;
    }

    .notifications-hero {
        flex-direction: column;
    }

    .notifications-panel {
        position: static;
    }

    .notifications-filter-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .notifications-filter {
        width: auto;
    }
}

/* ================================================================
   Personalized learner home - Coursera-inspired structure
   ================================================================ */
.learning-home {
    min-height: calc(100vh - var(--nav-height));
    background: #f6f7fb;
    color: #111827;
}

.learning-home--loading {
    display: grid;
    place-items: center;
}

.lh-loading {
    display: grid;
    gap: 12px;
    justify-items: center;
    color: #475569;
}

.lh-loading span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e3f5;
    border-radius: 8px;
    background: #ffffff;
    color: #0056d2;
}

.lh-loading svg {
    width: 24px;
    height: 24px;
}

.lh-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 24px 64px;
}

.lh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.lh-top__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.lh-top__avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d7e3f5;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.lh-top__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lh-kicker {
    display: inline-flex;
    margin-bottom: 6px;
    color: #0056d2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lh-top h1,
.lh-panel h2,
.lh-continue h2,
.lh-next-step h3,
.lh-course-row h3,
.lh-offer-card h3 {
    margin: 0;
    color: #111827;
    letter-spacing: 0;
}

.lh-top h1 {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.12;
}

.lh-top p {
    margin: 5px 0 0;
    color: #5f6368;
    font-size: 14px;
}

.lh-top__actions,
.lh-continue__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lh-continue {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 0;
    overflow: hidden;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.lh-continue__main {
    min-width: 0;
    padding: clamp(24px, 4vw, 38px);
}

.lh-continue h2 {
    max-width: 760px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.1;
}

.lh-continue p {
    max-width: 720px;
    margin: 12px 0 0;
    color: #5f6368;
    font-size: 15px;
    line-height: 1.55;
}

.lh-progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6edf7;
}

.lh-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0056d2, #21a67a);
}

.lh-continue .lh-progress {
    max-width: 680px;
    margin-top: 20px;
}

.lh-continue__meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: #667085;
    font-size: 13px;
}

.lh-continue__meta strong {
    color: #111827;
}

.lh-continue__actions {
    margin-top: 24px;
}

.lh-next-step {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 30px;
    background: #0f172a;
    color: #dbeafe;
}

.lh-next-step span {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.lh-next-step h3 {
    color: #ffffff;
    font-size: 24px;
    line-height: 1.16;
}

.lh-next-step p {
    margin: 0;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.5;
}

.lh-ring {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    margin-top: 4px;
    border-radius: 50%;
    background: conic-gradient(#21a67a 0 var(--progress), #334155 var(--progress) 100%);
}

.lh-ring strong {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    font-size: 24px;
}

.lh-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.lh-stat {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
}

.lh-stat span {
    color: #64748b;
    font-size: 13px;
}

.lh-stat strong {
    color: #111827;
    font-size: 28px;
    line-height: 1;
}

.lh-stat small {
    color: #667085;
    font-size: 12px;
}

.lh-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.lh-main,
.lh-side {
    min-width: 0;
}

.lh-side {
    display: grid;
    gap: 14px;
    position: sticky;
    top: calc(var(--nav-height) + 18px);
}

.lh-panel {
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.lh-panel:not(.lh-panel--courses):not(.lh-recs) {
    padding: 20px;
}

.lh-panel__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.lh-panel--courses .lh-panel__head,
.lh-recs .lh-panel__head {
    padding: 22px 24px 0;
}

.lh-panel h2 {
    font-size: 22px;
    line-height: 1.2;
}

.lh-panel__head p,
.lh-panel--goal p {
    margin: 8px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}

.lh-link {
    color: #0056d2;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.lh-link:hover {
    text-decoration: underline;
}

.lh-tabs {
    display: flex;
    gap: 0;
    margin-top: 20px;
    padding: 0 24px;
    border-bottom: 1px solid #e5e7eb;
}

.lh-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border-bottom: 3px solid transparent;
    color: #667085;
    font-size: 14px;
    font-weight: 800;
}

.lh-tab span {
    display: inline-flex;
    min-width: 24px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
}

.lh-tab:hover,
.lh-tab.is-active {
    color: #0056d2;
}

.lh-tab.is-active {
    border-bottom-color: #0056d2;
}

.lh-tab.is-active span {
    background: #e8f0fe;
    color: #0056d2;
}

.lh-course-list {
    display: grid;
    min-height: 220px;
}

.lh-course-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1.2fr) minmax(220px, 0.72fr) auto;
    gap: 16px;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid #edf1f7;
}

.lh-course-row:last-child {
    border-bottom: 0;
}

.lh-course-row__mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e8f0fe;
    color: #0056d2;
    font-size: 14px;
    font-weight: 900;
}

.lh-course-row__details,
.lh-course-row__next,
.lh-course-row__action {
    min-width: 0;
}

.lh-course-row__details > span,
.lh-course-row__next > span {
    color: #0056d2;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.lh-course-row h3 {
    margin-top: 5px;
    font-size: 18px;
    line-height: 1.25;
}

.lh-course-row h3 a {
    color: #111827;
    text-decoration: none;
}

.lh-course-row h3 a:hover {
    color: #0056d2;
    text-decoration: underline;
}

.lh-course-row p {
    display: -webkit-box;
    margin: 6px 0 12px;
    overflow: hidden;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lh-course-row__details small,
.lh-course-row__next small {
    display: block;
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

.lh-course-row__next {
    padding: 14px;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    background: #fbfcfe;
}

.lh-course-row__next strong {
    display: block;
    margin-top: 5px;
    color: #111827;
    font-size: 15px;
    line-height: 1.3;
}

.lh-course-row__action {
    position: relative;
    display: grid;
    justify-items: end;
    gap: 10px;
}

.lh-course-row__action > strong {
    color: #111827;
    font-size: 22px;
    line-height: 1;
}

.lh-more {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #e5eaf2;
    border-radius: 50%;
    color: #667085;
}

.lh-more:hover {
    background: #f3f6fb;
    color: #111827;
}

.lh-menu {
    position: absolute;
    top: calc(100% - 4px);
    right: 0;
    z-index: 20;
    min-width: 200px;
    overflow: hidden;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.lh-menu__item {
    display: block;
    width: 100%;
    padding: 11px 14px;
    color: #344054;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
}

.lh-menu__item:hover {
    background: #f5f8fc;
}

.lh-menu__item--danger {
    color: #c62828;
}

.lh-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 44px 24px;
    text-align: center;
}

.lh-empty__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e8f0fe;
    color: #0056d2;
}

.lh-empty__icon svg {
    width: 24px;
    height: 24px;
}

.lh-empty h3 {
    margin: 0;
    color: #111827;
    font-size: 20px;
}

.lh-empty p {
    max-width: 520px;
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}

.lh-goals {
    display: grid;
    gap: 13px;
}

.lh-goal {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.lh-goal__icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e3f5;
    border-radius: 50%;
    color: #0056d2;
}

.lh-goal__icon svg {
    width: 14px;
    height: 14px;
}

.lh-goal.is-done .lh-goal__icon {
    border-color: #bde7cf;
    background: #e8f7ef;
    color: #17864d;
}

.lh-goal__body {
    display: grid;
    gap: 3px;
}

.lh-goal__body strong {
    color: #111827;
    font-size: 14px;
    line-height: 1.3;
}

.lh-goal__body small {
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

.lh-goal em {
    color: #667085;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.lh-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
    margin-top: 14px;
}

.lh-week span {
    min-height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #e5eaf2;
    border-radius: 999px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.lh-week span.is-today {
    border-color: #0056d2;
    background: #e8f0fe;
    color: #0056d2;
}

.lh-cal {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #edf1f7;
}

.lh-cal__top {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.lh-cal__top button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #e5eaf2;
    border-radius: 50%;
    color: #667085;
}

.lh-cal__top button:hover {
    background: #f3f6fb;
    color: #0056d2;
}

.lh-cal__top svg {
    width: 16px;
    height: 16px;
}

.lh-cal__top strong {
    color: #111827;
    font-size: 14px;
    text-align: center;
    text-transform: capitalize;
}

.lh-cal__labels,
.lh-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.lh-cal__labels {
    margin-bottom: 6px;
}

.lh-cal__labels span {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.lh-cal__day {
    min-height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #475569;
    font-size: 12px;
}

.lh-cal__day--empty {
    visibility: hidden;
}

.lh-cal__day--today {
    background: #0056d2;
    color: #ffffff;
    font-weight: 900;
}

.lh-panel--goal {
    background: #f8fbff;
}

.lh-panel--goal h2 {
    font-size: 20px;
}

.lh-recs {
    margin-top: 18px;
    padding-bottom: 24px;
}

.lh-offer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 20px 24px 0;
}

.lh-offer-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.lh-offer-card:hover {
    border-color: #b9cbe7;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
    transform: translateY(-2px);
    text-decoration: none;
}

.lh-offer-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0f172a;
}

.lh-offer-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.lh-offer-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 44%, rgba(15, 23, 42, 0.72));
}

.lh-offer-card__media span {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 1;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.lh-offer-card__body {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.lh-offer-card__body small {
    color: #0056d2;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.lh-offer-card h3 {
    font-size: 16px;
    line-height: 1.25;
}

.lh-offer-card p {
    display: -webkit-box;
    min-height: 60px;
    margin: 0;
    overflow: hidden;
    color: #5f6368;
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.lh-offer-card strong {
    color: #334155;
    font-size: 12px;
    line-height: 1.4;
}

.lh-anim-wait {
    opacity: 0;
    transform: translateY(12px);
}

.lh-anim-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 360ms ease, transform 360ms ease;
    transition-delay: var(--delay, 0ms);
}

@media (max-width: 1120px) {
    .lh-continue,
    .lh-layout {
        grid-template-columns: 1fr;
    }

    .lh-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lh-panel--goal {
        grid-column: 1 / -1;
    }

    .lh-course-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .lh-course-row__next,
    .lh-course-row__action {
        grid-column: 2;
    }

    .lh-course-row__action {
        justify-items: start;
        grid-template-columns: auto auto auto;
        align-items: center;
    }

    .lh-offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .lh-shell {
        padding: 20px 16px 44px;
    }

    .lh-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .lh-top__actions,
    .lh-top__actions .btn,
    .lh-continue__actions,
    .lh-continue__actions .btn {
        width: 100%;
    }

    .lh-top__actions .btn,
    .lh-continue__actions .btn {
        justify-content: center;
    }

    .lh-continue__main,
    .lh-next-step {
        padding: 22px;
    }

    .lh-continue h2 {
        font-size: 28px;
    }

    .lh-stats,
    .lh-side,
    .lh-offer-grid {
        grid-template-columns: 1fr;
    }

    .lh-panel__head,
    .lh-panel--courses .lh-panel__head,
    .lh-recs .lh-panel__head {
        align-items: flex-start;
        flex-direction: column;
        padding-left: 18px;
        padding-right: 18px;
    }

    .lh-tabs {
        padding: 0 18px;
        overflow-x: auto;
    }

    .lh-tab {
        flex: 0 0 auto;
        padding: 0 12px;
        font-size: 13px;
    }

    .lh-course-row {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .lh-course-row__mark,
    .lh-course-row__next,
    .lh-course-row__action {
        grid-column: auto;
    }

    .lh-course-row__action {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .lh-course-row__action .btn {
        justify-content: center;
    }

    .lh-more {
        justify-self: start;
    }

    .lh-offer-grid {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ================================================================
   AUTH MODAL — Floating island Apple style
   ================================================================ */
.auth-modal-overlay{position:fixed;inset:0;background:rgba(248,245,241,.68);backdrop-filter:blur(14px);z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding-top:80px;opacity:0;pointer-events:none;transition:opacity .2s}
.auth-modal-overlay.active{opacity:1;pointer-events:auto}
.auth-modal{background:rgba(255,255,255,.88);width:440px;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);overflow-y:auto;border-radius:34px;box-shadow:0 30px 90px rgba(17,17,17,.18),0 0 0 1px rgba(17,17,17,.04);transform:translateY(-10px);transition:transform .25s cubic-bezier(.2,.9,.3,1);position:relative;backdrop-filter:blur(18px)}
.auth-modal-overlay.active .auth-modal{transform:translateY(0)}
.auth-modal__close{position:absolute;top:18px;right:18px;background:#f6f2ec;border:none;cursor:pointer;color:#5f5a54;padding:9px;border-radius:999px;z-index:1;box-shadow:0 8px 20px rgba(17,17,17,.08)}
.auth-modal__close svg{width:20px;height:20px}
.auth-modal__close:hover{color:#1a1a1a}
.auth-modal__header{padding:32px 32px 0;text-align:center}
.auth-modal__brand{font-size:20px;font-weight:700;color:#1a1a1a;margin-bottom:8px;letter-spacing:-.03em}
.auth-modal__title{font-size:22px;font-weight:700;color:#111;margin:0 0 6px;letter-spacing:-.04em}
.auth-modal__sub{font-size:13px;color:#655f58;line-height:1.55;max-width:280px;margin:0 auto}
.auth-modal__body{padding:24px 32px 32px}
.auth-modal__form .fg{margin-bottom:16px}
.auth-modal__form .fl{display:block;font-size:13px;font-weight:600;color:#2f2b27;margin-bottom:6px}
.auth-modal__form .fi{width:100%;padding:13px 16px;border:1px solid rgba(17,17,17,.08);border-radius:24px;font-size:14px;outline:none;transition:border-color .15s, box-shadow .15s;box-sizing:border-box;background:#fcfaf7;color:#1b1b1b}
.auth-modal__form .fi:focus{border-color:#222;box-shadow:0 0 0 4px rgba(17,17,17,.06)}
.auth-modal__form .btn--modal-pri{width:100%;padding:14px;font-size:14px;font-weight:600;color:#fff;background:#111;border:none;border-radius:999px;cursor:pointer;transition:background .15s, transform .15s;box-shadow:0 14px 34px rgba(17,17,17,.18)}
.auth-modal__form .btn--modal-pri:hover{background:#222;transform:translateY(-1px)}
.auth-modal__form .btn--modal-pri:disabled{opacity:.6;cursor:not-allowed}
.auth-modal__divider{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:12px;color:#8a837a}
.auth-modal__divider::before,.auth-modal__divider::after{content:'';flex:1;height:1px;background:#ebe5dd}
.auth-modal__social{display:flex;flex-direction:column;gap:8px}
.auth-modal__social-btn{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;padding:12px 14px;border:none;border-radius:28px;background:rgba(255,255,255,.94);color:#181818;cursor:pointer;transition:transform .15s, box-shadow .15s;box-shadow:0 14px 30px rgba(17,17,17,.08)}
.auth-modal__social-btn:hover{transform:translateY(-1px);box-shadow:0 18px 38px rgba(17,17,17,.12)}
.auth-modal__social-mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#f6f2ec;border-radius:999px;flex-shrink:0}
.auth-modal__social-icon{width:20px;height:20px;object-fit:contain}
.auth-modal__social-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left}
.auth-modal__social-copy strong{font-size:14px;font-weight:700;color:#171717}
.auth-modal__social-copy small{font-size:12px;color:#746c64}
.auth-modal__links{text-align:center;padding:0 32px 24px;font-size:13px;color:#666}
.auth-modal__links a{color:#171717;text-decoration:underline}
.auth-modal__footer{text-align:center;padding:0 32px 28px;font-size:13px;color:#666;display:flex;flex-direction:column;align-items:center;gap:4px}
.auth-modal__footer a{color:#171717;text-decoration:underline}
.auth-modal__footer p{margin:0}
.auth-modal__msg{padding:10px 14px;border-radius:20px;font-size:13px;margin-top:12px;text-align:center}
.auth-modal__msg--ok{background:#e6f4ea;color:#137333}
.auth-modal__msg--err{background:#fef0f0;color:#d32f2f}
.auth-modal__msg--info{background:#f4efe8;color:#3d372f}
.auth-approval-msg{background:#fff8e1;border:1px solid #f9e68c;border-radius:24px;padding:24px;text-align:center;margin-top:16px}
.auth-approval-msg h3{font-size:16px;font-weight:600;color:#b8860b;margin:0 0 8px}
.auth-approval-msg p{font-size:14px;color:#866b16;margin:0}
.login-bar{position:fixed;top:0;left:0;right:0;z-index:8000;background:#fff;border-bottom:1px solid #e5e5e5;padding:10px 24px;display:flex;align-items:center;justify-content:flex-end;gap:12px;transform:translateY(-100%);transition:transform .25s;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.login-bar.active{transform:translateY(0)}
.login-bar__msg{font-size:13px;color:#666;flex:1}
.login-bar__actions{display:flex;align-items:center;gap:8px}
.login-bar__btn{border:1px solid #d0d0d0;background:#fff;color:#1a1a1a;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.login-bar__btn:hover{background:#f6f8fb;border-color:#b8c2d1}
.login-bar__link{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:#0056D2;color:#fff;text-decoration:none;font-size:13px;font-weight:600}
.login-bar__link:hover{background:#0041a3}
.login-bar__close{background:none;border:none;cursor:pointer;color:#999;padding:4px}
.login-bar__close svg{width:16px;height:16px}
@media(max-width:768px){
    .login-bar{padding:12px 16px;align-items:flex-start;flex-wrap:wrap}
    .login-bar__msg{flex-basis:100%}
    .login-bar__actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
}

/* ================================================================
   ADMIN DASHBOARD — Enhanced
   ================================================================ */
.admin-wrap{max-width:1200px;margin:0 auto;padding:32px 24px 64px}
.admin-header{margin-bottom:28px}
.admin-header h1{font-size:24px;font-weight:700;margin:0 0 4px;color:#1a1a1a}
.admin-header p{font-size:14px;color:#666;margin:0}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.admin-stat{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:16px;text-align:center}
.admin-stat__val{font-size:28px;font-weight:700;color:#0056D2}
.admin-stat__lbl{font-size:12px;color:#666;margin-top:4px}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th{text-align:left;padding:10px 12px;font-weight:600;color:#666;border-bottom:2px solid #e5e5e5;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.admin-table td{padding:10px 12px;border-bottom:1px solid #f0f0f0;color:#333}
.admin-table tr:hover td{background:#fafafa}
.admin-course-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0}
.admin-course-item:last-child{border-bottom:none}
.admin-pending-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #f0f0f0;gap:12px}
.admin-pending-item:last-child{border-bottom:none}
.btn--approve{padding:6px 16px;font-size:13px;font-weight:500;color:#fff;background:#137333;border:none;border-radius:4px;cursor:pointer}
.btn--approve:hover{background:#0d5c28}
.btn--reject{padding:6px 16px;font-size:13px;font-weight:500;color:#d32f2f;background:#fff;border:1px solid #d32f2f;border-radius:4px;cursor:pointer}
.btn--reject:hover{background:#fef0f0}
.admin-users-shell{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,0.95fr);gap:20px;align-items:start}
.admin-table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:18px;background:#fff;box-shadow:0 16px 36px rgba(15,23,42,.05)}
.admin-student-panel{position:sticky;top:96px;display:grid;gap:18px;padding:22px;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);border:1px solid rgba(15,23,42,.08);box-shadow:0 18px 40px rgba(15,23,42,.08)}
.admin-student-panel--placeholder{min-height:360px;align-content:center;text-align:center}
.admin-student-panel--placeholder p{color:#64748b;line-height:1.7}
.admin-student-panel__hero{display:flex;gap:14px;align-items:flex-start}
.admin-student-panel__avatar{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0056d2 0%,#1d8cf8 100%);color:#fff;font-size:22px;font-weight:700;overflow:hidden}
.admin-student-panel__avatar img{width:100%;height:100%;object-fit:cover}
.admin-student-panel__eyebrow{display:inline-flex;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0056d2}
.admin-student-panel__hero h3{font-size:24px;margin:0 0 6px;color:#0f172a}
.admin-student-panel__hero p{margin:0;color:#475569;line-height:1.6}
.admin-student-panel__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.admin-student-panel__meta span,.admin-student-panel__tag{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#eef3fb;color:#334155;font-size:12px;font-weight:700}
.admin-student-panel__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.admin-student-panel__metric{padding:14px;border-radius:18px;border:1px solid rgba(15,23,42,.08);background:#fff}
.admin-student-panel__metric strong{display:block;font-size:24px;color:#0f172a;margin-bottom:4px}
.admin-student-panel__metric span{font-size:12px;color:#64748b}
.admin-student-panel__section{display:grid;gap:12px}
.admin-student-panel__section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.admin-student-panel__section-head h4{font-size:16px;margin:0;color:#0f172a}
.admin-student-panel__section-head span{font-size:12px;color:#64748b}
.admin-student-panel__fields{display:grid;gap:10px}
.admin-student-panel__field{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;font-size:13px}
.admin-student-panel__field span{color:#64748b}
.admin-student-panel__field strong{color:#0f172a;text-align:right}
.admin-student-panel__summary{font-size:14px;line-height:1.7;color:#334155;margin:0}
.admin-student-panel__list{display:grid;gap:10px}
.admin-student-panel__card,.admin-student-panel__course,.admin-student-panel__link{display:grid;gap:6px;padding:14px;border-radius:18px;border:1px solid rgba(15,23,42,.08);background:#fff;text-decoration:none}
.admin-student-panel__card strong,.admin-student-panel__course strong,.admin-student-panel__link strong{color:#0f172a}
.admin-student-panel__card span,.admin-student-panel__link span{font-size:13px;color:#64748b}
.admin-student-panel__card p{font-size:13px;line-height:1.6;color:#475569;margin:0}
.admin-student-panel__tags{display:flex;flex-wrap:wrap;gap:8px}
.admin-student-panel__muted{font-size:14px;color:#64748b;line-height:1.7;margin:0}

/* ================================================================
   INFO PAGES — Dedicated content pages for footer links
   ================================================================ */
.info-page{max-width:800px;margin:0 auto;padding:48px 24px 80px}
.info-page h1{font-size:28px;font-weight:700;color:#1a1a1a;margin:0 0 8px}
.info-page__breadcrumb{font-size:13px;color:#999;margin-bottom:24px}
.info-page__breadcrumb a{color:#0056D2;text-decoration:none}
.info-page__breadcrumb a:hover{text-decoration:underline}
.info-page__body{font-size:15px;line-height:1.7;color:#444}
.info-page__body h2{font-size:20px;font-weight:600;color:#1a1a1a;margin:32px 0 12px}
.info-page__body h3{font-size:16px;font-weight:600;color:#333;margin:24px 0 8px}
.info-page__body p{margin:0 0 16px}
.info-page__body ul{margin:0 0 16px;padding-left:24px}
.info-page__body li{margin-bottom:8px}
.info-page__body a{color:#0056D2}
.info-page__body code{font-family:var(--mono);font-size:.85em;background:#f3f4f6;padding:2px 6px;border-radius:5px;color:#1a1a1a}
.info-page__lead{font-size:17px;line-height:1.6;color:#555;margin:0 0 16px;max-width:70ch}
.info-page__updated{font-size:12.5px;color:#999;margin:0 0 28px;padding-bottom:20px;border-bottom:1px solid #eee}
.info-page__cta{margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5;display:flex;gap:12px;flex-wrap:wrap}

/* ================================================================
   APPLE LANDING REFRESH — Public nav, hero devices, colored course grid
   ================================================================ */
:root {
    --font-display: "SF Pro Display", "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-text: "SF Pro Text", "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --nav-height: 82px;
}

.site-nav {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06);
    padding: 0 24px;
}

.site-nav__inner--public {
    gap: 18px;
}

.site-nav__logo--apple {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.site-nav__logo-mark {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #111111, #59524b);
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.18);
}

.site-nav__public-link {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: #615a54;
    padding: 10px 0;
    text-decoration: none;
}

.site-nav__public-link.active,
.site-nav__public-link:hover {
    color: #111111;
    text-decoration: none;
}

.site-nav__search--public {
    max-width: 560px;
    height: 52px;
    padding: 0 10px 0 16px;
    border-radius: 999px;
    background: rgba(247, 244, 239, 0.88);
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.04), 0 12px 32px rgba(17, 17, 17, 0.05);
}

.site-nav__search--public:focus-within {
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.18), 0 16px 40px rgba(17, 17, 17, 0.08);
}

.site-nav__search-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7d756e;
    margin-right: 10px;
}

.site-nav__search-glyph svg {
    width: 16px;
    height: 16px;
}

.site-nav__search--public input {
    font-size: 15px;
    color: #151515;
}

.site-nav__search--public input::placeholder {
    color: #847b74;
}

.site-nav__search--public .site-nav__search-button {
    position: static;
    width: auto;
    min-width: 78px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.site-nav__search--public .site-nav__search-button:hover {
    background: #232323;
    color: #ffffff;
}

.site-nav__actions--public {
    gap: 10px;
}

.site-nav__actions--public .site-nav__link--quiet {
    color: #232323;
    font-weight: 600;
}

.site-nav__cta {
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.18);
}

.site-nav__cta:hover {
    background: #232323;
}

.lhero {
    background: #ffffff;
    padding: 56px 0 28px;
}

.lhero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: 60px;
    align-items: center;
}

.lhero__eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #887f77;
    margin-bottom: 14px;
}

.lhero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    background: rgba(247, 244, 239, 0.9);
    color: #2e2823;
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.06);
    margin-bottom: 20px;
}

.lhero__brand-logo {
    border-radius: 999px;
}

.lhero__title {
    font-size: clamp(42px, 6vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.06em;
    color: #111111;
    max-width: 11ch;
    margin: 0 0 18px;
}

.lhero__subtitle {
    font-size: 17px;
    line-height: 1.74;
    color: #5f5953;
    max-width: 60ch;
    margin: 0 0 28px;
}

.lhero__acts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.lhero__acts .btn {
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
}

.lhero__acts .btn--pri {
    background: #111111;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.18);
}

.lhero__acts .btn--out {
    background: rgba(247, 244, 239, 0.9);
    color: #111111;
    border: none;
    box-shadow: 0 14px 32px rgba(17, 17, 17, 0.07);
}

.lhero__proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.lhero__stat {
    padding: 18px 18px 16px;
    background: #f8f5f0;
    border-radius: 28px;
    box-shadow: 0 16px 36px rgba(17, 17, 17, 0.05);
}

.lhero__stat strong {
    display: block;
    font-size: 28px;
    line-height: 1;
    color: #131313;
    margin-bottom: 8px;
}

.lhero__stat span {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: #726963;
}

.lhero__visual {
    position: relative;
}

.lhero__scene {
    position: relative;
    padding: 18px 18px 90px;
}

.lhero__browser {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 40px 110px rgba(17, 17, 17, 0.13);
    backdrop-filter: blur(18px);
}

.lhero__browser-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(248, 245, 240, 0.92);
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.lhero__traffic {
    display: flex;
    gap: 8px;
}

.lhero__traffic span,
.lhero__browser-tools span {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.lhero__traffic span:nth-child(1) { background: #ff5f57; }
.lhero__traffic span:nth-child(2) { background: #febc2e; }
.lhero__traffic span:nth-child(3) { background: #28c840; }

.lhero__browser-bar {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #7b726a;
    font-size: 13px;
    font-weight: 600;
}

.lhero__browser-tools {
    display: flex;
    gap: 8px;
}

.lhero__browser-tools span {
    background: rgba(17, 17, 17, 0.12);
}

.lhero__browser-view {
    background: #ffffff;
    padding: 18px;
}

.lhero__mini-nav {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 24px;
    background: #fbf8f4;
    margin-bottom: 16px;
}

.lhero__mini-logo,
.lhero__mini-link,
.lhero__mini-action,
.lhero__mini-cta {
    font-size: 11px;
    font-weight: 700;
    color: #181818;
}

.lhero__mini-search {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #7e756f;
    font-size: 11px;
}

.lhero__mini-cta {
    padding: 8px 10px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
}

.lhero__mini-hero {
    padding: 18px 0 16px;
}

.lhero__mini-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f6f2ec;
    font-size: 11px;
    font-weight: 700;
    color: #25201b;
    margin-bottom: 12px;
}

.lhero__mini-hero strong {
    display: block;
    max-width: 30ch;
    font-size: 21px;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: #111111;
    margin-bottom: 14px;
}

.lhero__mini-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.lhero__mini-metric {
    padding: 10px 12px;
    border-radius: 18px;
    background: #fbf8f4;
}

.lhero__mini-metric strong {
    display: block;
    font-size: 18px;
    color: #141414;
    margin-bottom: 4px;
}

.lhero__mini-metric span {
    display: block;
    font-size: 10px;
    line-height: 1.4;
    color: #746d66;
}

.lhero__mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.lhero__mini-card {
    min-height: 132px;
    padding: 14px;
    border-radius: 24px;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 34px rgba(17, 17, 17, 0.08);
}

.lhero__mini-card--azure,
.lfeat-card--azure { background: linear-gradient(180deg, #4f89ff, #1f5eff); }
.lhero__mini-card--emerald,
.lfeat-card--emerald { background: linear-gradient(180deg, #34a88a, #17775f); }
.lhero__mini-card--cobalt,
.lfeat-card--cobalt { background: linear-gradient(180deg, #5a86ff, #2a5ae4); }
.lhero__mini-card--forest,
.lfeat-card--forest { background: linear-gradient(180deg, #2d9a7f, #167159); }
.lhero__mini-card--sky,
.lfeat-card--sky { background: linear-gradient(180deg, #6aa8ff, #3b75e8); }
.lhero__mini-card--mint,
.lfeat-card--mint { background: linear-gradient(180deg, #57b999, #258064); }

.lhero__mini-card-period {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 10px;
}

.lhero__mini-card h3 {
    font-size: 14px;
    line-height: 1.22;
    color: #ffffff;
    margin: 0 0 6px;
}

.lhero__mini-card p {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.84);
    margin: 0 0 10px;
}

.lhero__mini-card-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 10px;
    font-weight: 700;
}

.lhero__mini-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.lhero__mini-trust span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f7f4ef;
    color: #232323;
    font-size: 10px;
    font-weight: 700;
}

.lhero__mini-footer {
    font-size: 13px;
    font-weight: 700;
    color: #151515;
}

.lhero__phone {
    position: absolute;
    right: -8px;
    bottom: 68px;
    width: 210px;
    padding: 12px;
    border-radius: 36px;
    background: linear-gradient(180deg, #151515, #323232);
    box-shadow: 0 26px 60px rgba(17, 17, 17, 0.25);
}

.lhero__phone-notch {
    width: 86px;
    height: 22px;
    border-radius: 0 0 16px 16px;
    background: #000000;
    margin: 0 auto 10px;
}

.lhero__phone-screen {
    padding: 16px 14px 18px;
    border-radius: 28px;
    background: linear-gradient(180deg, #fbf8f4, #f1ece5);
    min-height: 360px;
}

.lhero__phone-brand {
    font-size: 11px;
    font-weight: 700;
    color: #7a726a;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.lhero__phone-title {
    display: block;
    font-size: 22px;
    line-height: 1.05;
    color: #111111;
    letter-spacing: -0.05em;
    margin-bottom: 12px;
}

.lhero__phone-metric {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
}

.lhero__phone-card {
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, #4f89ff, #1f5eff);
    color: #ffffff;
    margin-bottom: 10px;
}

.lhero__phone-card--ghost {
    background: #ffffff;
    color: #141414;
}

.lhero__phone-card span,
.lhero__phone-card small {
    display: block;
    font-size: 11px;
    line-height: 1.4;
}

.lhero__phone-card strong {
    display: block;
    font-size: 15px;
    line-height: 1.2;
    margin: 4px 0;
}

.lhero__dock {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 20px 50px rgba(17, 17, 17, 0.12);
    backdrop-filter: blur(20px);
}

.lhero__dock-app {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

.lhero__dock-app--finder { background: linear-gradient(180deg, #7cb8ff, #3d7fe7); }
.lhero__dock-app--safari { background: linear-gradient(180deg, #3ec6ff, #1a78ff); }
.lhero__dock-app--code { background: linear-gradient(180deg, #3aa5ff, #006ae6); }
.lhero__dock-app--spotify { background: linear-gradient(180deg, #35d067, #178944); }
.lhero__dock-app--discord { background: linear-gradient(180deg, #7889ff, #5865f2); }

.lhero__desk {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 0;
    height: 36px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(226, 205, 180, 0.8), rgba(203, 177, 145, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ltrust {
    padding: 14px 0 18px;
}

.ltrust__label {
    color: #756d66;
}

.ltrust__chip {
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(17, 17, 17, 0.06);
}

.lfeat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.lfeat-card {
    position: relative;
    min-height: 250px;
    border-radius: 30px;
    color: #ffffff;
    box-shadow: 0 22px 52px rgba(17, 17, 17, 0.08);
}

.lfeat-card__img {
    height: 0;
    padding: 0;
    background: transparent;
}

.lfeat-card__badge {
    top: 18px;
    left: auto;
    right: 18px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.lfeat-card__body {
    padding: 22px;
}

.lfeat-card__uni,
.lfeat-card__prof,
.lfeat-card__meta {
    color: rgba(255, 255, 255, 0.84);
}

.lfeat-card__uni img {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: 1px;
}

.lfeat-card h3 {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.15;
    margin: 10px 0 10px;
}

.lfeat-card__meta span:last-child {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.site-footer .footer__bottom {
    flex-wrap: wrap;
    row-gap: 12px;
}

.site-footer .footer__closing {
    width: 100%;
    font-size: clamp(24px, 4vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.05em;
    color: #ffffff;
    margin-bottom: 6px;
}

@media (max-width: 1100px) {
    .lhero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .lhero__title {
        max-width: none;
    }

    .lhero__phone {
        right: 8px;
    }
}

@media (max-width: 900px) {
    .site-nav__search--public {
        display: none !important;
    }

    .site-nav__actions--public .site-nav__link--quiet {
        display: none;
    }

    .site-nav__mobile-toggle {
        display: inline-flex;
    }

    .lhero__proof,
    .lhero__mini-metrics,
    .lhero__mini-grid,
    .lfeat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .site-nav {
        padding: 0 16px;
    }

    .site-nav__inner--public {
        gap: 12px;
    }

    .site-nav__public-link {
        display: none;
    }

    .site-nav__cta {
        min-height: 42px;
        padding: 0 16px;
        font-size: 13px;
    }

    .lhero {
        padding-top: 42px;
    }

    .lhero__badge {
        font-size: 12px;
    }

    .lhero__proof,
    .lfeat-grid {
        grid-template-columns: 1fr;
    }

    .lhero__scene {
        padding: 0 0 66px;
    }

    .lhero__browser-top {
        grid-template-columns: auto 1fr;
    }

    .lhero__browser-tools {
        display: none;
    }

    .lhero__mini-nav {
        grid-template-columns: auto 1fr auto;
    }

    .lhero__mini-link,
    .lhero__mini-action {
        display: none;
    }

    .lhero__mini-metrics,
    .lhero__mini-grid {
        grid-template-columns: 1fr;
    }

    .lhero__phone {
        position: static;
        width: 100%;
        max-width: 240px;
        margin: 14px auto 0;
    }

    .lhero__dock {
        position: static;
        transform: none;
        margin: 12px auto 0;
    }

    .lhero__desk {
        left: 0;
        right: 0;
    }

    .ltrust__logos {
        gap: 10px;
    }

    .ltrust__chip {
        width: calc(50% - 5px);
        justify-content: center;
    }

    .site-footer .footer__closing {
        font-size: 28px;
    }
}

/* ================================================================
   Landing Page v7 — Vercel / Apple inspired
   ================================================================ */

/* ── Hero Banner ── */
.lp-banner { width: 100%; background: #fff; padding: 28px 24px 16px; }
.lp-banner__img { position: relative; width: min(100%, 1440px); margin: 0 auto; max-height: none; aspect-ratio: auto; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); }
.lp-banner__img img { width: 100%; height: auto; object-fit: contain; display: block; }
.lp-banner__premium-btn { position: absolute; bottom: 12%; left: 5%; display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #0056D2 0%, #1a8cff 100%); border-radius: 980px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,86,210,0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; z-index: 2; letter-spacing: -0.01em; }
.lp-banner__premium-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,86,210,0.45); text-decoration: none; }
.lp-banner__premium-btn:active { transform: translateY(0); }
.lp-banner__overlay { display: none; }
.lp-banner__content { max-width: var(--max-w); margin: 0 auto; width: 100%; color: #fff; }
.lp-banner__eyebrow { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin-bottom: 14px; font-weight: 500; }
.lp-banner__title { font-size: clamp(32px, 5vw, 56px); font-weight: 600; line-height: 1.07; letter-spacing: -0.04em; margin: 0 0 14px; }
.lp-banner__sub { font-size: 17px; line-height: 1.47; opacity: 0.8; margin: 0 0 28px; max-width: 540px; letter-spacing: -0.022em; }
.lp-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--white { background: #fff; color: #0a0a0a; border: 1px solid #fff; }
.btn--white:hover { background: #f0f0f0; text-decoration: none; }
.btn--blue { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
.btn--blue:hover { background: var(--blue-h); border-color: var(--blue-h); text-decoration: none; }
.btn--outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn--outline:hover { background: var(--bg); text-decoration: none; }
.btn--lg { padding: 12px 28px; font-size: .93rem; font-weight: 600; }

/* ── Live Activity Bar ── */
.lp-livebar { background: #000; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.lp-livebar__inner { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: -0.01em; }
.lp-livebar__dot { width: 6px; height: 6px; border-radius: 50%; background: #30d158; animation: lp-pulse 2s ease-in-out infinite; flex-shrink: 0; }
.lp-livebar__item strong { color: #fff; font-weight: 600; }
.lp-livebar__sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
@keyframes lp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Trust Logos ── */
.lp-trust { padding: 48px 0; background: var(--white); }
.lp-trust__label { text-align: center; font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 24px; font-weight: 500; }
.lp-trust__row { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.lp-trust__logo-item { display: flex; align-items: center; justify-content: center; }
.lp-trust__logo-item img { height: 24px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.4; transition: filter 0.3s, opacity 0.3s; }
.lp-trust__logo-item:hover img { filter: grayscale(0%); opacity: 1; }
.lp-trust__logo-item--homepage img { height: 72px; filter: none; opacity: 1; }

/* ── Career Spotlight ── */
.lp-career { padding: 0 0 80px; background: var(--white); }
.lp-career .container { display: grid; gap: 32px; }
.lp-career__features { background: #edf4ff; border-radius: 28px; padding: 40px; box-shadow: inset 0 0 0 1px rgba(0,113,227,0.06); }
.lp-career__features-head { margin-bottom: 28px; }
.lp-career__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.lp-career__features-head h2,
.lp-career__copy h2 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.12; letter-spacing: -0.04em; color: var(--black); }
.lp-career__feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lp-career__feature { display: grid; align-content: start; gap: 10px; }
.lp-career__feature-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,0.7); color: var(--blue); font-family: var(--mono); font-size: 12px; font-weight: 600; box-shadow: var(--shadow-ring); }
.lp-career__feature h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--black); }
.lp-career__feature p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text2); }
.lp-career__spotlight { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 36px; align-items: center; padding: 12px 0 0; }
.lp-career__copy { max-width: 620px; }
.lp-career__copy p:not(.lp-career__eyebrow) { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--text2); letter-spacing: -0.022em; }
.lp-career__actions { margin-top: 28px; }
.lp-career__visual { display: flex; justify-content: flex-end; }
.lp-career__visual-frame { width: 100%; min-height: 360px; border-radius: 32px; background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 52%, #f7f9fc 100%); box-shadow: var(--shadow-card); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.lp-career__visual-frame::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; top: -72px; right: -56px; background: radial-gradient(circle, rgba(0,113,227,0.18) 0%, rgba(0,113,227,0) 72%); }
.lp-career__visual-frame::after { content: ''; position: absolute; inset: auto auto 26px 26px; width: 120px; height: 120px; border-radius: 28px; border: 1px dashed rgba(0,113,227,0.28); transform: rotate(-10deg); }
.lp-career__visual-label { position: relative; z-index: 1; display: inline-flex; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.84); color: var(--black); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-ring); }
.lp-career__visual-note { position: relative; z-index: 1; max-width: 320px; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--text2); }

/* ── Stats Bar ── */
.lp-stats { padding: 48px 0; background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-stats__grid { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; text-align: center; }
.lp-stats__item { display: flex; flex-direction: column; }
.lp-stats__item strong { font-size: 40px; font-weight: 600; color: var(--black); letter-spacing: -0.04em; line-height: 1.1; }
.lp-stats__item span { font-size: 13px; color: var(--text3); margin-top: 6px; letter-spacing: -0.01em; }

/* ── Sections ── */
.lp-section { padding: 80px 0; background: var(--white); }
.lp-section--alt { background: var(--bg); }
.lp-section__header { text-align: center; margin-bottom: 56px; }
.lp-section__header h2 { font-size: 32px; font-weight: 600; color: var(--black); margin: 0 0 10px; letter-spacing: -0.04em; line-height: 1.1; }
.lp-section__header p { font-size: 17px; color: var(--text2); margin: 0 auto; max-width: 560px; line-height: 1.47; letter-spacing: -0.022em; }

/* ── Value Cards (numbered) ── */
.lp-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.lp-value-card { background: var(--white); border: none; border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--shadow-card); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.lp-value-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.lp-value-card__number { display: block; font-size: 12px; font-weight: 600; color: var(--text3); margin-bottom: 14px; font-family: var(--mono); letter-spacing: 0.04em; }
.lp-value-card h3 { font-size: 16px; font-weight: 600; color: var(--black); margin: 0 0 8px; letter-spacing: -0.02em; }
.lp-value-card p { font-size: 14px; color: var(--text2); margin: 0; line-height: 1.5; }

/* ── Course Cards ── */
.lp-courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.lp-course-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.lp-course-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); transform: translateY(-2px); text-decoration: none; }
.lp-course-card__img { height: 160px; position: relative; display: flex; align-items: flex-end; padding: 10px 12px; background: linear-gradient(135deg,#1a237e,#0d47a1); }
.lp-course-card__img--ia { background: linear-gradient(135deg,#1a237e,#0d47a1); }
.lp-course-card__img--programacion { background: linear-gradient(135deg,#1565c0,#0288d1); }
.lp-course-card__img--matematicas { background: linear-gradient(135deg,#6a1b9a,#7b1fa2); }
.lp-course-card__img--sistemas { background: linear-gradient(135deg,#00695c,#00897b); }
.lp-course-card__img--teoria { background: linear-gradient(135deg,#e65100,#f4511e); }
.lp-course-card__img--idiomas { background: linear-gradient(135deg,#33691e,#558b2f); }
.lp-course-card__img--gestion { background: linear-gradient(135deg,#37474f,#546e7a); }
.lp-course-card__img--investigacion { background: linear-gradient(135deg,#4e342e,#6d4c41); }
.lp-course-card__area-label { color: rgba(255,255,255,.7); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.lp-course-card__body { padding: 14px 12px; flex: 1; display: flex; flex-direction: column; }
.lp-course-card__uni { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #616161; margin-bottom: 8px; }
.lp-course-card__uni img { width: 18px; height: 18px; object-fit: contain; }
.lp-course-card__body h3 { font-size: 14px; font-weight: 600; color: #1f1f1f; margin: 0 0 8px; line-height: 1.35; letter-spacing: -0.01em; }
.lp-course-card__type { font-size: 12px; color: #616161; margin-top: auto; }

/* ── Area Cards ── */
.lp-areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.lp-area-card { display: block; padding: 24px; background: var(--white); border: none; border-radius: var(--r-lg); text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.lp-area-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); text-decoration: none; }
.lp-area-card h3 { font-size: 16px; font-weight: 600; color: var(--black); margin: 0 0 6px; letter-spacing: -0.02em; }
.lp-area-card p { font-size: 14px; color: var(--text2); margin: 0 0 14px; line-height: 1.5; }
.lp-area-card__count { font-size: 12px; font-weight: 600; color: var(--blue); font-family: var(--mono); }

/* ── Activity Feed ── */
.lp-feed { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 0 24px; }
.lp-feed__item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border: none; border-radius: var(--r-md); box-shadow: var(--shadow-ring); transition: opacity 0.5s, transform 0.5s; }
.lp-feed__item--new { animation: lp-fadeIn 0.5s ease-out; }
@keyframes lp-fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.lp-feed__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.lp-feed__text { flex: 1; font-size: 14px; color: var(--text); line-height: 1.4; }
.lp-feed__text strong { font-weight: 600; }
.lp-feed__time { font-size: 12px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }
.lp-feed__more { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text3); display: flex; align-items: center; justify-content: center; gap: 8px; }
.lp-feed__live-dot { width: 6px; height: 6px; border-radius: 50%; background: #30d158; animation: lp-pulse 2s ease-in-out infinite; }

/* ── Testimonials ── */
.lp-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.lp-testimonial-card { background: var(--white); border: none; border-radius: var(--r-lg); padding: 28px 24px; box-shadow: var(--shadow-card); }
.lp-testimonial-card__quote { font-size: 15px; color: var(--text); line-height: 1.6; margin: 0 0 24px; font-style: normal; }
.lp-testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.lp-testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.lp-testimonial-card__author strong { display: block; font-size: 14px; font-weight: 600; color: var(--black); }
.lp-testimonial-card__author span { font-size: 12px; color: var(--text3); }

/* ── Accordion ── */
.laccordion { max-width: 800px; margin: 0 auto; }
.laccordion__item { border: none; border-radius: var(--r-lg); margin-bottom: 8px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-ring); }
.laccordion__header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; border: none; background: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text); transition: background 0.15s; }
.laccordion__header:hover { background: var(--bg); }
.laccordion__count { font-size: 13px; color: var(--text3); font-weight: 400; margin-right: 8px; }
.laccordion__arrow { transition: transform 0.2s; display: inline-flex; }
.laccordion__arrow svg { width: 16px; height: 16px; }
.laccordion__item--open .laccordion__arrow { transform: rotate(180deg); }
.laccordion__body { display: none; padding: 0 20px 16px; }
.laccordion__item--open .laccordion__body { display: block; }
.laccordion__grid { display: grid; gap: 6px; }
.laccordion__course { padding: 12px 14px; background: var(--bg); border-radius: var(--r-md); }
.laccordion__course-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.laccordion__course-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text3); }
.laccordion__course-area { background: var(--blue-lt); color: var(--blue); padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 500; }

/* ── Steps ── */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.lp-step { text-align: center; padding: 28px 20px; background: var(--white); border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.lp-step__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.lp-step h3 { font-size: 16px; font-weight: 600; color: var(--black); margin: 0 0 8px; letter-spacing: -0.02em; }
.lp-step p { font-size: 14px; color: var(--text2); margin: 0; line-height: 1.5; }

/* ── CTA ── */
.lp-cta { padding: 96px 0; background: #000; color: #fff; text-align: center; }
.lp-cta h2 { font-size: 32px; font-weight: 600; margin: 0 0 14px; color: #fff; letter-spacing: -0.04em; line-height: 1.1; }
.lp-cta p { font-size: 17px; color: rgba(255,255,255,0.6); margin: 0 auto 32px; max-width: 520px; line-height: 1.47; letter-spacing: -0.022em; }
.lp-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.lp-cta__note { font-size: 12px; color: rgba(255,255,255,0.4); letter-spacing: -0.01em; }

/* ── Nav override (glass) ── */
.site-nav__inner--public {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--nav-h);
}
.site-nav__logo--apple { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; color: var(--black); text-decoration: none; letter-spacing: -0.03em; }
.site-nav__logo--apple:hover { text-decoration: none; }
.site-nav__logo-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.site-nav__public-link { font-size: 0.87rem; font-weight: 500; color: var(--text2); text-decoration: none; padding: 6px 12px; border-radius: var(--r-md); transition: color var(--tr), background var(--tr); }
.site-nav__public-link:hover { color: var(--text); background: rgba(0,0,0,0.04); text-decoration: none; }
.site-nav__public-link.active { color: var(--text); }
.site-nav__search--public { flex: 1; max-width: 520px; display: flex; align-items: center; background: rgba(0,0,0,0.04); border: none; border-radius: var(--r-md); padding: 0 12px; height: 40px; box-shadow: var(--shadow-ring); transition: box-shadow 0.15s; }
.site-nav__search--public:focus-within { box-shadow: 0 0 0 2px var(--blue); }
.site-nav__search-glyph { display: flex; align-items: center; color: var(--text3); margin-right: 8px; flex-shrink: 0; }
.site-nav__search-glyph svg { width: 16px; height: 16px; }
.site-nav__search--public input { flex: 1; border: none; background: transparent; font-size: 0.87rem; color: var(--text); outline: none; height: 100%; }
.site-nav__search--public input::placeholder { color: var(--text3); }
.site-nav__search-button { background: var(--black); color: #fff; border: none; padding: 6px 14px; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.site-nav__search-button:hover { background: #333; }
.site-nav__actions--public { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.site-nav__link--quiet { font-size: 0.87rem; font-weight: 500; color: var(--text2); text-decoration: none; padding: 6px 12px; }
.site-nav__link--quiet:hover { color: var(--text); text-decoration: none; }
.btn--primary { background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: var(--r-md); }
.btn--primary:hover { background: var(--blue-h); border-color: var(--blue-h); text-decoration: none; }
.site-nav__cta { font-size: 0.87rem; font-weight: 500; padding: 8px 18px; white-space: nowrap; }

/* ── Footer override ── */
.site-footer { background: #000; color: rgba(255,255,255,0.6); }
.site-footer .footer__grid { padding-top: 48px; }
.site-footer .footer__logo { color: #fff; }
.site-footer .footer__brand-badge { color: var(--blue); }
.site-footer .footer__desc { color: rgba(255,255,255,0.5); }
.site-footer .footer__meta span { color: rgba(255,255,255,0.3); }
.site-footer .footer__social-link { color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.1); }
.site-footer .footer__social-link:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.site-footer .footer__column-title { color: #fff; font-weight: 600; }
.site-footer .footer__link { color: rgba(255,255,255,0.5); }
.site-footer .footer__link:hover { color: #fff; }
.site-footer .footer__bottom { border-top-color: rgba(255,255,255,0.06); }
.site-footer .footer__closing { color: #fff; }
.site-footer .footer__copyright { color: rgba(255,255,255,0.35); }
.site-footer .footer__bottom-link { color: rgba(255,255,255,0.4); }
.site-footer .footer__bottom-link:hover { color: #fff; }

/* ── Scroll Animations ── */
.anim-wait { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.anim-in { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .exp-hero__panel { padding: 32px; }
    .exp-hero__title { font-size: clamp(30px, 4vw, 42px); }
    .lp-career__feature-grid { grid-template-columns: 1fr; }
    .lp-career__spotlight { grid-template-columns: 1fr; }
    .lp-career__visual { justify-content: stretch; }
    .lp-value-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-courses-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-steps { grid-template-columns: repeat(2, 1fr); }
    .lp-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .exp-hero__panel { padding: 26px 22px; }
    .exp-hero__logo { margin: 0 auto 16px; width: min(100%, 190px); }
    .exp-hero__title { font-size: 32px; text-align: center; max-width: none; }
    .exp-hero__sub { text-align: center; max-width: none; }
    .exp-search-box { margin: 0 auto 16px; }
    .exp-tags { justify-content: center; }
    .lp-banner { padding: 20px 16px 12px; }
    .lp-banner__img { border-radius: 20px; }
    .lp-banner__premium-btn { font-size: 14px; padding: 12px 24px; bottom: 10%; left: 4%; }
    .lp-career { padding-bottom: 56px; }
    .lp-career__features { padding: 28px 24px; border-radius: 22px; }
    .lp-career__features-head h2,
    .lp-career__copy h2 { font-size: 24px; }
    .lp-career__spotlight { gap: 24px; }
    .lp-career__visual-frame { min-height: 280px; border-radius: 24px; }
    .lp-trust__row { gap: 24px; }
    .lp-stats__grid { gap: 32px; }
    .lp-stats__item strong { font-size: 32px; }
    .lp-section { padding: 56px 0; }
    .lp-section__header { margin-bottom: 36px; }
    .lp-section__header h2 { font-size: 28px; }
    .lp-areas-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-testimonials-grid { grid-template-columns: 1fr; }
    .lp-courses-grid { grid-template-columns: 1fr; }
    .lp-cta { padding: 64px 0; }
    .site-nav__search--public { display: none; }
}

@media (max-width: 480px) {
    .exp-hero { padding: 16px 0 32px; }
    .exp-hero__panel { padding: 22px 16px; border-radius: 22px; }
    .exp-hero__logo { width: min(100%, 170px); }
    .exp-hero__title { font-size: 28px; }
    .exp-hero__sub { font-size: 14px; }
    .lp-banner { padding: 12px 12px 8px; }
    .lp-banner__img { border-radius: 16px; }
    .lp-banner__premium-btn { font-size: 12px; padding: 10px 18px; bottom: 8%; left: 3%; }
    .lp-career__features { padding: 24px 18px; }
    .lp-career__features-head h2,
    .lp-career__copy h2 { font-size: 21px; }
    .lp-career__feature-grid { gap: 20px; }
    .lp-career__visual-frame { min-height: 220px; border-radius: 20px; padding: 24px; }
    .lp-value-grid { grid-template-columns: 1fr; }
    .lp-areas-grid { grid-template-columns: 1fr; }
    .lp-steps { grid-template-columns: 1fr; }
    .lp-stats__grid { flex-direction: column; gap: 16px; }
    .lp-trust__row { gap: 16px; }
    .lp-trust__logo-item img { height: 20px; }
    .lp-trust__logo-item--brand img { height: 34px; }
}

/* ================================================================
   MOBILE FIXES — Navbar overflow & Hero banner button
   ================================================================ */

/* ── Navbar: corregir overflow horizontal en todos los shells ── */
@media (max-width: 768px) {
    /* Distribuye logo a la izquierda y hamburger a la derecha */
    .site-nav__inner,
    .site-nav__inner--student,
    .site-nav__inner--public {
        padding: 0 16px;
        gap: 8px;
        justify-content: space-between;
    }

    /* Shell alumno: oculta links de navegación y barra de búsqueda
       (se acceden desde el menú hamburger) */
    .site-nav__student-links {
        display: none !important;
    }
    .site-nav__search--student {
        display: none !important;
    }
    /* Ocultar menú de perfil desplegable en mobile (usar hamburger) */
    .site-nav__profile-menu {
        display: none !important;
    }

    /* Nav pública: ocultar explorer toggle y CTA button */
    .site-nav__explorer-toggle {
        display: none !important;
    }
    .site-nav__cta {
        display: none !important;
    }
    .site-nav__public-link {
        display: none !important;
    }

    /* Fix: backdrop-filter en .site-nav convierte al nav en containing block
       de sus hijos position:fixed, lo que confina el mobile-menu al área del
       nav (60px) en lugar de cubrir toda la pantalla → menú aparece en blanco.
       Solución: eliminar blur en mobile y usar fondo sólido opaco.          */
    .site-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #ffffff !important;
    }

    /* Garantizar que el hamburger sea siempre visible */
    .site-nav__mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background: none;
        border: none;
        color: var(--text-primary, #1d1d1f);
        cursor: pointer;
        border-radius: 6px;
    }
    .site-nav__mobile-toggle svg {
        width: 22px;
        height: 22px;
    }

    /* Icono del brand ocupa el espacio sobrante */
    .site-nav__brand {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .site-nav {
        padding: 0;
    }
    .site-nav__inner,
    .site-nav__inner--student,
    .site-nav__inner--public {
        padding: 0 12px;
    }
}

/* ── Hero banner: botón premium fluye debajo de la imagen en mobile ──
   En desktop: position:absolute sobre la imagen (efecto visual atractivo)
   En mobile: se vuelve estático y se centra debajo de la imagen         ── */
@media (max-width: 768px) {
    /* Permitir que el botón fluya fuera del contenedor de recorte */
    .lp-banner__img {
        overflow: visible;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    /* Aplicar radio y sombra directamente sobre la imagen */
    .lp-banner__img img {
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
        max-height: 320px;
        object-fit: cover;
        object-position: center top;
    }
    /* Cambiar de absoluto a bloque inline centrado */
    .lp-banner__premium-btn {
        position: static;
        display: block;
        width: fit-content;
        margin: 14px auto 0;
        text-align: center;
        font-size: 15px;
        padding: 13px 28px;
    }
}

@media (max-width: 480px) {
    .lp-banner__img img {
        border-radius: 16px;
        max-height: 220px;
        object-fit: cover;
        object-position: center top;
    }
    .lp-banner__premium-btn {
        font-size: 13px;
        padding: 11px 22px;
        margin: 10px auto 0;
        width: calc(100% - 24px);
        text-align: center;
    }
}

/* ================================================================
   EXANI-II Explore catalog
   ================================================================ */
.exani-explore {
    background: #ffffff;
    color: #111827;
}

.exani-explore .container {
    max-width: 1344px;
}

.exani-hero {
    padding: 58px 0 46px;
    background:
        linear-gradient(120deg, rgba(0, 86, 210, 0.08), rgba(49, 182, 107, 0.06) 52%, rgba(255,255,255,0) 78%),
        #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.exani-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 46px;
    align-items: center;
}

.exani-eyebrow,
.exani-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    color: #0056d2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.exani-kicker--light {
    color: rgba(255,255,255,0.78);
}

.exani-hero h1 {
    max-width: 820px;
    margin: 0 0 16px;
    color: #111827;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 0.98;
    letter-spacing: 0;
}

.exani-hero p,
.exani-overview p,
.exani-section-head p,
.exani-plan-band p {
    margin: 0;
    color: #5f6368;
    font-size: 17px;
    line-height: 1.56;
}

.exani-hero__copy p {
    max-width: 760px;
}

.exani-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.exani-hero__panel {
    min-height: 390px;
    display: grid;
    align-content: center;
    gap: 22px;
    padding: 28px;
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.95), rgba(239,246,255,0.94)),
        repeating-linear-gradient(0deg, rgba(0,86,210,0.08), rgba(0,86,210,0.08) 1px, transparent 1px, transparent 34px),
        repeating-linear-gradient(90deg, rgba(0,86,210,0.08), rgba(0,86,210,0.08) 1px, transparent 1px, transparent 34px);
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.09);
}

.exani-orbit {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(from 220deg, #0056d2, #21c17a, #f97316, #0056d2);
    display: grid;
    place-items: center;
}

.exani-orbit::before {
    content: '';
    position: absolute;
    inset: 22px;
    border-radius: inherit;
    background: #ffffff;
}

.exani-orbit > span {
    position: relative;
    z-index: 1;
    color: #111827;
    font-size: 30px;
    font-weight: 900;
}

.exani-orbit i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.18);
}

.exani-hero__mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.exani-hero__mini-grid div,
.exani-detail__numbers div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #dbe5f4;
    text-align: center;
}

.exani-hero__mini-grid strong,
.exani-detail__numbers strong {
    color: #111827;
    font-size: 26px;
    line-height: 1;
}

.exani-hero__mini-grid span,
.exani-detail__numbers span {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
}

.exani-overview {
    padding: 36px 0 18px;
}

.exani-overview__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    gap: 32px;
    align-items: end;
}

.exani-overview h2,
.exani-section-head h2,
.exani-plan-band h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.08;
}

.exani-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f5f7fb;
    border: 1px solid #d9e2ef;
}

.exani-search svg {
    width: 18px;
    height: 18px;
}

.exani-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 15px;
}

.exani-search button {
    border: 0;
    border-radius: 6px;
    padding: 8px 10px;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.exani-filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-top: 12px;
    padding-bottom: 24px;
    scrollbar-width: none;
}

.exani-filter-row::-webkit-scrollbar {
    display: none;
}

.exani-filter {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.exani-filter.is-active {
    border-color: #111827;
    background: #111827;
    color: #ffffff;
}

.exani-catalog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 430px);
    gap: 28px;
    align-items: start;
    padding-bottom: 56px;
}

.exani-section-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
}

.exani-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.exani-module-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.exani-module-card:hover,
.exani-module-card.is-selected {
    transform: translateY(-2px);
    border-color: #0056d2;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.exani-module-card__type,
.exani-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 6px;
    background: #eef4ff;
    color: #0056d2;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.exani-module-card--green .exani-module-card__type,
.exani-pill--green { background: #e9f8ef; color: #15803d; }
.exani-module-card--orange .exani-module-card__type,
.exani-pill--orange { background: #fff1e7; color: #c2410c; }
.exani-module-card--violet .exani-module-card__type,
.exani-pill--violet { background: #f3e8ff; color: #6d28d9; }
.exani-module-card--pink .exani-module-card__type,
.exani-pill--pink { background: #fce7f3; color: #be185d; }
.exani-module-card--teal .exani-module-card__type,
.exani-pill--teal { background: #e6fffb; color: #0f766e; }
.exani-module-card--slate .exani-module-card__type,
.exani-pill--slate { background: #eef2f7; color: #334155; }
.exani-module-card--amber .exani-module-card__type,
.exani-pill--amber { background: #fff7d6; color: #b45309; }

.exani-module-card h3 {
    margin: 0;
    color: #111827;
    font-size: 20px;
    line-height: 1.18;
}

.exani-module-card p {
    margin: 0;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.45;
}

.exani-module-card__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.exani-detail {
    position: sticky;
    top: calc(var(--nav-height, 72px) + 18px);
    max-height: calc(100vh - 110px);
    overflow: auto;
    padding: 22px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.09);
}

.exani-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.exani-detail h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 30px;
    line-height: 1.1;
}

.exani-detail > p {
    margin: 0 0 16px;
    color: #5f6368;
    font-size: 15px;
    line-height: 1.52;
}

.exani-detail__numbers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.exani-subarea-list {
    display: grid;
    gap: 12px;
}

.exani-subarea {
    padding: 16px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.exani-subarea__title {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.exani-subarea__title span {
    color: #0056d2;
    font-size: 12px;
    font-weight: 900;
}

.exani-subarea h3 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    line-height: 1.25;
}

.exani-subarea ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.exani-subarea li {
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.exani-detail__note {
    margin-top: 14px;
    padding: 12px;
    border-radius: 8px;
    background: #eef4ff;
    color: #344054;
    font-size: 12px;
    line-height: 1.45;
}

.exani-plan-band {
    padding: 54px 0;
    background: linear-gradient(100deg, #0056d2 0%, #0b63ce 58%, #31b66b 100%);
    color: #ffffff;
}

.exani-plan-band h2,
.exani-plan-band p {
    color: #ffffff;
}

.exani-plan-band p {
    opacity: 0.84;
}

.exani-plan-band__grid {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

.exani-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.exani-flow span {
    min-height: 104px;
    display: grid;
    place-items: center;
    padding: 18px;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    font-weight: 900;
    text-align: center;
}

.exani-published {
    padding: 50px 0 80px;
}

.exani-published__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.exani-published-card,
.exani-empty {
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #d9e2ef;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
}

.exani-published-card span {
    color: #0056d2;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.exani-published-card h3,
.exani-empty h3 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    line-height: 1.25;
}

.exani-published-card p,
.exani-empty p {
    margin: 0;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.45;
}

.exani-empty--inline {
    grid-column: 1 / -1;
}

@media (max-width: 1180px) {
    .exani-hero__grid,
    .exani-overview__grid,
    .exani-catalog,
    .exani-plan-band__grid {
        grid-template-columns: 1fr;
    }

    .exani-detail {
        position: static;
        max-height: none;
    }

    .exani-module-grid,
    .exani-published__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .exani-hero {
        padding: 34px 0 28px;
    }

    .exani-hero__grid {
        gap: 22px;
    }

    .exani-hero h1 {
        font-size: 36px;
    }

    .exani-module-grid,
    .exani-published__grid,
    .exani-flow {
        grid-template-columns: 1fr;
    }

    .exani-hero__panel {
        min-height: 0;
    }
}

/* ================================================================
   Landing EXANI-II focus
   ================================================================ */
.landing--exani {
    background: #ffffff;
}

.landing--exani .lp-banner {
    padding: 0 0 28px;
    background: #ffffff;
    overflow-x: hidden;
}

.landing--exani .lp-banner__img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: clamp(380px, 27vw, 520px);
    border-radius: 0;
    box-shadow: none;
    background: #ffffff;
}

.landing--exani .lp-banner__img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
}

.landing--exani .lp-banner__premium-btn {
    bottom: clamp(22px, 2vw, 38px);
    left: clamp(150px, 15vw, 300px);
    background: linear-gradient(135deg, #006de5 0%, #1288ff 100%);
    box-shadow: 0 16px 34px rgba(0, 91, 210, 0.28);
}

.landing--exani .lp-career {
    padding-top: 20px;
}

.landing--exani .lp-course-card__body p {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text2);
}

.landing--exani .lp-cta .btn--outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    .landing--exani .lp-banner {
        padding: 0 0 24px;
    }

    .landing--exani .lp-banner__img {
        overflow: visible;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        height: auto;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .landing--exani .lp-banner__img img {
        height: auto;
        border-radius: 0;
        max-height: none;
        object-fit: contain;
        box-shadow: none;
    }

    .landing--exani .lp-banner__premium-btn {
        position: static;
        width: 100%;
        margin: 14px auto 0;
        justify-content: center;
    }
}

/* ================================================================
   Explore page compatibility for published-only catalog
   ================================================================ */
.explore-hero {
    padding: 56px 0 30px;
}

.explore-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.75fr);
    gap: 32px;
    align-items: end;
}

.explore-eyebrow,
.explore-context__label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(0, 86, 210, 0.08);
    color: #0056d2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.explore-hero__copy h1 {
    max-width: 760px;
    margin: 0 0 12px;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 0.98;
    color: #151515;
}

.explore-hero__copy p {
    max-width: 680px;
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ================================================================
   Landing marketplace refresh
   ================================================================ */
.landing--market {
    background: #ffffff;
    color: #1f1f1f;
}

.landing--market .container {
    max-width: 1344px;
}

.landing--market .lp-banner {
    padding: 0;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    overflow: hidden;
}

.landing--market .lp-banner__img {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    background: #ffffff;
    overflow: visible;
    line-height: 0;
}

.landing--market .lp-banner__img img {
    width: clamp(100vw, 123vw, 2350px);
    max-width: none;
    height: auto;
    display: block;
    margin-left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center center;
}

.landing--market .lp-banner__premium-btn {
    bottom: clamp(22px, 2vw, 38px);
    left: clamp(150px, 15vw, 300px);
    border-radius: 6px;
    padding: 13px 22px;
    line-height: 1;
}

.lp-market-top {
    padding: 44px 0 32px;
    background: #ffffff;
}

.lp-market-top__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) 520px;
    gap: 48px;
    align-items: center;
}

.lp-market-top__copy {
    max-width: 680px;
}

.lp-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lp-kicker--light {
    color: rgba(255,255,255,0.72);
}

.lp-market-top__copy h1 {
    margin: 0 0 14px;
    max-width: 780px;
    color: #111827;
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: 0;
}

.lp-market-top__copy p {
    margin: 0;
    color: #5f6368;
    font-size: 18px;
    line-height: 1.56;
}

.lp-market-top__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.lp-progress-panel {
    min-height: 300px;
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fbff 0%, #eaf3ff 64%, #f8fbff 100%);
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
    padding: 26px;
    display: grid;
    align-content: center;
    gap: 18px;
    overflow: hidden;
    position: relative;
}

.lp-progress-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 86, 210, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 86, 210, 0.08) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: 0.45;
}

.lp-progress-panel > * {
    position: relative;
    z-index: 1;
}

.lp-progress-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #475569;
    font-size: 13px;
}

.lp-progress-panel__head strong {
    color: #111827;
}

.lp-progress-panel__ring {
    width: 128px;
    height: 128px;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(#0056d2 0 68%, #dbeafe 68% 100%);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 28px rgba(0, 86, 210, 0.18);
}

.lp-progress-panel__ring span {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: #111827;
    font-size: 28px;
    font-weight: 800;
}

.lp-progress-panel__bars {
    display: grid;
    gap: 8px;
}

.lp-progress-panel__bars span {
    height: 9px;
    border-radius: 999px;
    background: #dbeafe;
    overflow: hidden;
}

.lp-progress-panel__bars span::before {
    content: '';
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0056d2, #21c17a);
}

.lp-progress-panel p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.lp-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid #e5e7eb;
}

.lp-stat-strip__item {
    display: grid;
    gap: 4px;
    text-align: center;
}

.lp-stat-strip__item strong {
    color: #111827;
    font-size: 32px;
    line-height: 1;
}

.lp-stat-strip__item span {
    color: #6b7280;
    font-size: 13px;
}

.lp-market-shelf {
    padding: 52px 0;
    background: #ffffff;
}

.lp-market-shelf--soft {
    background: #f5f6f8;
}

.lp-shelf-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.lp-shelf-head--center {
    justify-content: center;
    text-align: center;
}

.lp-shelf-head h2 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: 0;
}

.lp-shelf-head p {
    margin: 0;
    max-width: 620px;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.5;
}

.lp-shelf-link {
    color: #0056d2;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.lp-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 14px;
    scrollbar-width: none;
}

.lp-tabs::-webkit-scrollbar {
    display: none;
}

.lp-tab {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #111827;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.lp-tab--active {
    color: #ffffff;
    background: #1f2937;
    border-color: #1f2937;
}

.lp-card-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(278px, 1fr);
    gap: 16px;
    overflow-x: auto;
    padding: 2px 2px 18px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.lp-market-card {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    overflow: hidden;
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.lp-market-card:hover {
    transform: translateY(-3px);
    border-color: #b8c7dc;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    text-decoration: none;
}

.lp-market-card__media {
    height: 166px;
    position: relative;
    background: linear-gradient(135deg, #0056d2, #5fb66f);
    overflow: hidden;
}

.lp-market-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.lp-market-card:first-child .lp-market-card__media img {
    object-fit: cover;
    object-position: center center;
}

.lp-market-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.42));
}

.lp-market-card__label {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 1;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.lp-market-card__body {
    min-height: 224px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 14px 16px;
}

.lp-market-card__provider {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 13px;
}

.lp-market-card__provider span {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 4px;
    background: #eef4ff;
    color: #0056d2;
    font-weight: 800;
}

.lp-market-card__body h3 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    line-height: 1.32;
}

.lp-market-card__body p {
    margin: 0;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.45;
}

.lp-market-card__meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: #111827;
    font-size: 13px;
    margin-top: auto;
}

.lp-market-card__body strong {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

.lp-blue-band {
    padding: 54px 0;
    background: linear-gradient(100deg, #0056d2 0%, #0b63ce 58%, #31b66b 100%);
    color: #ffffff;
    overflow: hidden;
}

.lp-blue-band__grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.lp-blue-band__copy h2 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.16;
    letter-spacing: 0;
}

.lp-blue-band__copy p {
    margin: 0 0 22px;
    color: rgba(255,255,255,0.84);
    font-size: 16px;
    line-height: 1.5;
}

.lp-route-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.lp-route-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    transition: transform 180ms ease;
}

.lp-route-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
}

.lp-route-card span {
    color: #0056d2;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.lp-route-card h3 {
    margin: 14px 0 8px;
    font-size: 17px;
    line-height: 1.24;
}

.lp-route-card p {
    margin: 0;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.45;
}

.lp-route-card strong {
    margin-top: auto;
    color: #111827;
    font-size: 13px;
}

.lp-partners {
    padding: 36px 0;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.lp-partners h2 {
    margin: 0 0 16px;
    color: #111827;
    font-size: 20px;
    letter-spacing: 0;
}

.lp-logo-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.lp-logo-pills::-webkit-scrollbar {
    display: none;
}

.lp-logo-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #d9e2ef;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.lp-category-marquee {
    overflow: hidden;
    margin: 12px 0 26px;
    border-block: 1px solid #e5e7eb;
    background: #f8fafc;
}

.lp-category-marquee__track {
    display: flex;
    width: max-content;
    gap: 10px;
    padding: 13px 0;
    animation: lp-market-marquee 36s linear infinite;
}

.lp-category-marquee:hover .lp-category-marquee__track {
    animation-play-state: paused;
}

.lp-category-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d9e2ef;
    color: #111827;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.lp-skill-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.lp-skill-card {
    min-height: 164px;
    padding: 20px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lp-skill-card:hover {
    transform: translateY(-2px);
    border-color: #b8c7dc;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    text-decoration: none;
}

.lp-skill-card span {
    display: inline-flex;
    margin-bottom: 14px;
    color: #0056d2;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.lp-skill-card h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 18px;
    line-height: 1.24;
}

.lp-skill-card p {
    margin: 0;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.45;
}

.lp-skill-card--green span { color: #08875d; }
.lp-skill-card--orange span { color: #c2410c; }
.lp-skill-card--slate span { color: #475569; }
.lp-skill-card--violet span { color: #7c3aed; }

.lp-promo-row {
    padding: 44px 0 52px;
    background: #ffffff;
}

.lp-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.lp-promo {
    min-height: 246px;
    display: grid;
    grid-template-columns: 1fr 240px;
    align-items: stretch;
    overflow: hidden;
    border-radius: 8px;
    color: #ffffff;
    background: #052e73;
}

.lp-promo--2 {
    background: #14315f;
}

.lp-promo__copy {
    padding: 30px;
}

.lp-promo h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: 0;
}

.lp-promo p {
    margin: 0 0 20px;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    line-height: 1.48;
}

.lp-promo__link {
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
}

.lp-promo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-outcome-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.lp-outcome-card {
    min-height: 170px;
    padding: 22px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.lp-outcome-card span {
    width: 40px;
    height: 40px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #111827;
    color: #ffffff;
    font-weight: 800;
}

.lp-outcome-card h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 17px;
}

.lp-outcome-card p {
    margin: 0;
    color: #5f6368;
    font-size: 14px;
    line-height: 1.44;
}

.landing--market .lp-testimonials-grid {
    padding: 0;
}

.landing--market .lp-testimonial-card {
    border: 1px solid #d9e2ef;
    border-radius: 8px;
}

.landing--market .anim-wait {
    transform: translateY(16px);
    transition-delay: var(--delay, 0ms);
}

@keyframes lp-market-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-category-marquee__track {
        animation: none;
    }
    #app {
        transition: none;
    }
    .anim-wait,
    .landing--market .anim-wait {
        opacity: 1;
        transform: none;
        transition: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1120px) {
    .lp-market-top__grid,
    .lp-blue-band__grid {
        grid-template-columns: 1fr;
    }

    .lp-route-row,
    .lp-outcome-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-skill-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .landing--market .lp-banner__premium-btn {
        border-radius: 8px;
        left: 22px;
        bottom: 14px;
        padding: 10px 14px;
        font-size: 12px;
    }

    .lp-market-top {
        padding: 30px 0 24px;
    }

    .lp-market-top__copy h1 {
        font-size: 30px;
    }

    .lp-market-top__copy p {
        font-size: 16px;
    }

    .lp-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-card-rail {
        grid-auto-columns: minmax(272px, 82%);
    }

    .lp-route-row,
    .lp-skill-grid,
    .lp-promo-grid,
    .lp-outcome-grid {
        grid-template-columns: 1fr;
    }

    .lp-promo {
        grid-template-columns: 1fr;
    }

    .lp-promo img {
        height: 190px;
    }
}

@media (max-width: 480px) {
    .lp-market-top__copy h1 {
        font-size: 27px;
    }

    .lp-shelf-head {
        align-items: start;
        flex-direction: column;
    }

    .lp-stat-strip__item strong {
        font-size: 26px;
    }
}

/* ================================================================
   Mobile marketplace landing
   ================================================================ */
.edu-mob-market {
    background: #ffffff;
    color: #101828;
    max-width: 100%;
    overflow-x: hidden;
}

.edu-mob-market,
.edu-mob-market * {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
}

.edu-mob-market__top {
    display: none;
}

.edu-mob-market__brand {
    color: #111827;
    font-weight: 800;
    text-decoration: none;
}

.edu-mob-market__nav {
    display: flex;
    gap: 8px;
}

.edu-mob-market__nav a {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.edu-mob-hero-market {
    display: grid;
    gap: 18px;
    padding-top: 20px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.edu-mob-market .edu-mob-section {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.edu-mob-hero-market__copy {
    min-width: 0;
}

.edu-mob-hero-market__copy span {
    color: #0056d2;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.edu-mob-hero-market__copy h1 {
    margin: 8px 0 10px;
    color: #111827;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

.edu-mob-hero-market__copy p {
    margin: 0 0 18px;
    color: #5f6368;
    font-size: 15px;
    line-height: 1.48;
}

.edu-mob-hero-market img {
    width: 100%;
    height: 220px;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}

.edu-mob-market__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.edu-mob-market__stats div:last-child {
    grid-column: 1 / -1;
}

.edu-mob-market__stats div {
    min-height: 74px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 10px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
}

.edu-mob-market__stats strong {
    color: #111827;
    font-size: 15px;
}

.edu-mob-market__stats span {
    color: #667085;
    font-size: 11px;
}

.edu-mob-title--row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.edu-mob-title--row a {
    display: none;
}

.edu-mob-course-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, calc(100vw - 64px));
    gap: 12px;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px 2px 12px;
    scroll-snap-type: x proximity;
}

.edu-mob-course-card {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    scroll-snap-align: start;
}

.edu-mob-course-card img {
    width: 100%;
    height: 118px;
    object-fit: cover;
}

.edu-mob-course-card span {
    margin: 12px 12px 6px;
    color: #0056d2;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.edu-mob-course-card h3 {
    margin: 0 12px 8px;
    color: #111827;
    font-size: 16px;
    line-height: 1.26;
}

.edu-mob-course-card p {
    margin: auto 12px 14px;
    color: #667085;
    font-size: 13px;
}

.edu-mob-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.edu-mob-chip-cloud a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d9e2ef;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.edu-mob-market .edu-mob-list-icon {
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
}

.edu-mob-premium-panel {
    padding: 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0056d2, #14315f);
    color: #ffffff;
}

.edu-mob-premium-panel span {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.edu-mob-premium-panel h2 {
    margin: 8px 0 10px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.16;
}

.edu-mob-premium-panel p {
    margin: 0 0 20px;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    line-height: 1.48;
}

.explore-search-card {
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.explore-search-card__label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.explore-search-card__control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 999px;
    background: #f5f7fb;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.explore-search-card__control svg {
    width: 18px;
    height: 18px;
}

.explore-search-card__control input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
}

.explore-search-card__control button,
.explore-tags button,
.explore-filter-chip {
    border: 0;
    cursor: pointer;
}

.explore-search-card__control button {
    padding: 8px 12px;
    border-radius: 999px;
    color: #ffffff;
    background: #111111;
    font-size: 12px;
    font-weight: 700;
}

.explore-tags,
.explore-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.explore-tags {
    margin-top: 14px;
}

.explore-tags button,
.explore-filter-chip {
    padding: 10px 14px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.explore-filter-chip.is-active {
    background: #111111;
    color: #ffffff;
}

.explore-content {
    display: grid;
    gap: 28px;
    padding-bottom: 88px;
}

.explore-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    padding: 34px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.07);
}

.explore-context__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.explore-course-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.explore-course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.10);
    text-decoration: none;
}

.explore-course-card__media {
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    color: rgba(255, 255, 255, 0.78);
    background: linear-gradient(135deg, #0056d2, #43a3ff);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.explore-course-card--green .explore-course-card__media { background: linear-gradient(135deg, #0f766e, #22c55e); }
.explore-course-card--orange .explore-course-card__media { background: linear-gradient(135deg, #c2410c, #fb923c); }
.explore-course-card--purple .explore-course-card__media { background: linear-gradient(135deg, #5b21b6, #a855f7); }
.explore-course-card--pink .explore-course-card__media { background: linear-gradient(135deg, #be185d, #f472b6); }
.explore-course-card--teal .explore-course-card__media { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.explore-course-card--slate .explore-course-card__media { background: linear-gradient(135deg, #1f2937, #64748b); }

.explore-course-card__body {
    display: grid;
    gap: 9px;
    padding: 18px;
}

.explore-course-card__provider,
.explore-course-card__meta {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.explore-course-card__body h3 {
    margin: 0;
    color: #151515;
    font-size: 18px;
    line-height: 1.25;
}

.explore-course-card__body p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.explore-course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.explore-state-card {
    padding: 46px 28px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    text-align: center;
}

.explore-state-card h3 {
    margin: 0 0 10px;
    font-size: 22px;
}

.explore-state-card p {
    max-width: 620px;
    margin: 0 auto 20px;
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .explore-hero__inner,
    .explore-context {
        grid-template-columns: 1fr;
    }

    .explore-context__meta {
        justify-content: flex-start;
    }
}

/* ================================================================
   Public navbar alignment for full-width hero
   ================================================================ */
@media (min-width: 901px) {
    .site-nav {
        padding-left: clamp(48px, 5vw, 92px);
        padding-right: clamp(48px, 5vw, 92px);
    }

    .site-nav__inner.site-nav__inner--public {
        width: 100%;
        max-width: none;
        height: var(--nav-height);
        display: grid;
        grid-template-columns: minmax(190px, 0.72fr) minmax(420px, 560px) minmax(260px, 0.72fr);
        align-items: center;
        gap: clamp(24px, 3vw, 56px);
        margin: 0;
    }

    .site-nav__brand--public {
        justify-self: start;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 24px;
    }

    .site-nav__search--public {
        justify-self: center;
        width: 100%;
        max-width: 560px;
        margin: 0;
    }

    .site-nav__actions--public {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        gap: 18px;
        white-space: nowrap;
    }

    .site-nav__actions--public .site-nav__link--quiet {
        padding: 0 8px;
    }
}

/* ================================================================
   EXANI-II explore marketplace
   ================================================================ */
.exm-page {
    min-height: 100vh;
    background: #ffffff;
    color: #111827;
}

.exm-page .container {
    width: min(100%, 1344px);
    max-width: 1344px;
}

.exm-hero {
    overflow: hidden;
    border-bottom: 0;
    background: #000000;
}

.exm-hero__grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.76fr) minmax(520px, 1.24fr);
    gap: clamp(24px, 4vw, 62px);
    align-items: center;
    min-height: clamp(286px, 23vw, 324px);
    padding-top: clamp(20px, 2.8vw, 32px);
    padding-bottom: 0;
}

.exm-hero__copy span,
.exm-program-band__copy span {
    display: inline-flex;
    color: #9ec5ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.exm-hero__copy h1 {
    max-width: 610px;
    margin: 10px 0 12px;
    color: #ffffff;
    font-size: clamp(36px, 3.35vw, 48px);
    line-height: 1.06;
    letter-spacing: 0;
}

.exm-hero__copy p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 16px;
    line-height: 1.5;
}

.exm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.exm-hero__actions .btn--blue {
    border-color: #ffffff;
    background: #ffffff;
    color: #0056d2;
}

.exm-hero__actions .btn--blue:hover {
    border-color: #eef4ff;
    background: #eef4ff;
}

.exm-hero__actions .btn--outline {
    border-color: rgba(255, 255, 255, 0.58);
    background: transparent;
    color: #ffffff;
}

.exm-hero__actions .btn--outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
}

.exm-hero__visual {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 256px;
    overflow: hidden;
    background: transparent;
}

.exm-hero__visual img {
    display: block;
    width: min(710px, 100%);
    height: 100%;
    min-height: 0;
    margin-left: auto;
    object-fit: contain;
    object-position: right center;
    transform: translateX(44px);
}

.exm-main {
    display: grid;
    gap: 44px;
    padding-top: 34px;
    padding-bottom: 88px;
}

.exm-search-band {
    display: grid;
    grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.exm-search {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 7px 7px 16px;
    border: 1px solid #d9e2ef;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.exm-search svg {
    width: 18px;
    height: 18px;
    color: #111827;
}

.exm-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 15px;
}

.exm-search button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.exm-search-band__chips,
.exm-category-chips,
.exm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.exm-search-band__chips span,
.exm-category-chips button,
.exm-tabs button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid #d9e2ef;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.exm-search-band__chips span {
    background: #f3f7ff;
    color: #344054;
}

.exm-tabs button,
.exm-category-chips button {
    cursor: pointer;
}

.exm-tabs button.is-active {
    border-color: #111827;
    background: #111827;
    color: #ffffff;
}

.exm-section,
.exm-categories,
.exm-catalog,
.exm-module-row {
    display: grid;
    gap: 18px;
}

.exm-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.exm-section-head h2,
.exm-categories h2,
.exm-detail h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(26px, 2.5vw, 34px);
    line-height: 1.1;
    letter-spacing: 0;
}

.exm-section-head p {
    max-width: 720px;
    margin: 6px 0 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.45;
}

.exm-section-head > button {
    border: 0;
    background: transparent;
    color: #0056d2;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.exm-card-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.exm-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.exm-card:hover,
.exm-card.is-selected {
    transform: translateY(-2px);
    border-color: #0056d2;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
}

.exm-card__media {
    position: relative;
    overflow: hidden;
    height: 172px;
    background: #eaf2ff;
}

.exm-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exm-card__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 70px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.72));
}

.exm-card__media span {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.exm-card__body {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.exm-card__provider {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.exm-card__provider span {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eef4ff;
    color: #0056d2;
    font-weight: 900;
}

.exm-card h3 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    line-height: 1.25;
}

.exm-card p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.48;
}

.exm-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: auto;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.exm-card small {
    color: #0056d2;
    font-size: 12px;
    font-weight: 900;
}

.exm-card--compact .exm-card__media {
    height: 122px;
}

.exm-card--compact .exm-card__body {
    min-height: 190px;
}

.exm-program-band {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 22px;
    overflow: hidden;
    padding: 28px;
    border-radius: 8px;
    background: linear-gradient(115deg, #0056d2 0%, #0069e9 46%, #31b778 100%);
    color: #ffffff;
}

.exm-program-band__copy {
    align-self: center;
}

.exm-program-band__copy span,
.exm-program-band__copy h2,
.exm-program-band__copy p {
    color: #ffffff;
}

.exm-program-band__copy h2 {
    margin: 10px 0 10px;
    font-size: 30px;
    line-height: 1.12;
}

.exm-program-band__copy p {
    margin: 0 0 22px;
    opacity: 0.9;
    line-height: 1.5;
}

.exm-program-band__cards {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 14px;
}

.exm-program-band .exm-card {
    box-shadow: none;
}

.exm-catalog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 22px;
    align-items: start;
}

.exm-compact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.exm-compact-card {
    min-height: 166px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.exm-compact-card:hover {
    border-color: #0056d2;
}

.exm-compact-card span {
    color: #0056d2;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.exm-compact-card h3 {
    margin: 0;
    color: #111827;
    font-size: 17px;
    line-height: 1.25;
}

.exm-compact-card p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
}

.exm-compact-card strong {
    color: #344054;
    font-size: 12px;
}

.exm-detail {
    position: sticky;
    top: calc(var(--nav-height) + 18px);
    overflow: hidden;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.exm-detail__media {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.exm-detail__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exm-detail__media span {
    position: absolute;
    left: 16px;
    bottom: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0056d2;
    font-size: 12px;
    font-weight: 900;
}

.exm-detail__content {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.exm-detail__top,
.exm-detail__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.exm-detail__top {
    color: #667085;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.exm-detail p {
    margin: 0;
    color: #667085;
    line-height: 1.55;
}

.exm-detail__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.exm-detail__stats div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 8px;
    background: #f3f7ff;
}

.exm-detail__stats strong {
    color: #111827;
    font-size: 18px;
}

.exm-detail__stats span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.exm-detail__subareas {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.exm-detail__subareas section {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.exm-detail__subareas h3 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: #111827;
    font-size: 15px;
}

.exm-detail__subareas h3 span {
    color: #0056d2;
    font-size: 12px;
}

.exm-detail__subareas ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 18px;
}

.exm-detail__subareas li {
    color: #667085;
    font-size: 13px;
    line-height: 1.4;
}

.exm-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.exm-section--soft {
    padding: 28px;
    border-radius: 8px;
    background: #f6f7fb;
}

.exm-published-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.exm-published-card,
.exm-empty {
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
}

.exm-published-card {
    display: grid;
    gap: 9px;
    padding: 18px;
    color: inherit;
    text-decoration: none;
}

.exm-published-card span {
    color: #0056d2;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.exm-published-card h3,
.exm-empty h3 {
    margin: 0;
    color: #111827;
    font-size: 18px;
}

.exm-published-card p,
.exm-empty p {
    margin: 0;
    color: #667085;
    line-height: 1.45;
}

.exm-empty {
    grid-column: 1 / -1;
    padding: 28px;
    text-align: center;
}

@media (max-width: 1180px) {
    .exm-hero__grid,
    .exm-search-band,
    .exm-catalog__grid,
    .exm-program-band {
        grid-template-columns: 1fr;
    }

    .exm-hero__grid {
        gap: 16px;
    }

    .exm-hero__visual {
        min-height: 260px;
    }

    .exm-hero__visual img {
        width: min(720px, 100%);
        min-height: 0;
        margin: 0 auto;
        transform: translateX(0);
    }

    .exm-card-row,
    .exm-program-band__cards,
    .exm-published-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exm-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exm-detail {
        position: static;
    }
}

@media (max-width: 760px) {
    .exm-hero__grid {
        padding-top: 28px;
        padding-bottom: 30px;
    }

    .exm-hero__copy h1 {
        font-size: 36px;
    }

    .exm-hero__copy p {
        font-size: 16px;
    }

    .exm-hero__visual {
        min-height: 218px;
    }

    .exm-hero__visual img {
        min-height: 0;
    }

    .exm-card-row,
    .exm-program-band__cards,
    .exm-compact-grid,
    .exm-published-grid,
    .exm-detail__stats {
        grid-template-columns: 1fr;
    }

    .exm-main {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .exm-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .exm-program-band,
    .exm-section--soft {
        padding: 20px;
    }
}

/* ================================================================
   Text-first course reader
   ================================================================ */
.lesson-workspace--textual {
    min-height: 100vh;
    background: #17181d;
    color: #eef2ff;
}

.lesson-workspace--textual .lesson-workspace__top {
    max-width: none;
    padding: 14px 28px;
    border-bottom: 1px solid #2c2d36;
    background: #202127;
}

.lesson-workspace--textual .lesson-workspace__back {
    color: #d7dae7;
}

.lesson-workspace--textual .lesson-workspace__back:hover {
    color: #ffffff;
}

.lesson-workspace--textual .lesson-workspace__progress {
    border-color: #383a46;
    background: #17181d;
}

.lesson-workspace--textual .lesson-workspace__progress span {
    color: #c6cad9;
}

.lesson-workspace--textual .lesson-workspace__progress-bar {
    background: #30323b;
}

.lesson-workspace--textual .lesson-workspace__progress-bar span {
    background: linear-gradient(90deg, #6c63ff 0%, #20d2a8 100%);
}

.lesson-workspace--textual .lesson-workspace__grid {
    max-width: 1600px;
    grid-template-columns: minmax(280px, 340px) minmax(0, 820px) minmax(280px, 330px);
    gap: 18px;
    padding-top: 0;
    padding-bottom: 0;
}

.lesson-workspace--textual .lesson-rail,
.lesson-workspace--textual .lesson-stage__card,
.lesson-workspace--textual .lesson-coach__panel {
    border-color: #2f303b;
    border-radius: 0;
    background: #1d1e24;
    box-shadow: none;
}

.lesson-workspace--textual .lesson-rail,
.lesson-workspace--textual .lesson-coach__panel {
    top: calc(var(--nav-height) + 58px);
    max-height: calc(100vh - var(--nav-height) - 58px);
}

.lesson-workspace--textual .lesson-rail {
    border-left: 0;
}

.lesson-workspace--textual .lesson-rail__header,
.lesson-workspace--textual .lesson-coach__header,
.lesson-workspace--textual .lesson-coach__composer {
    border-color: #2f303b;
}

.lesson-workspace--textual .lesson-rail__eyebrow,
.lesson-workspace--textual .lesson-stage__eyebrow,
.lesson-workspace--textual .lesson-stage__meta,
.lesson-workspace--textual .lesson-rail__module-meta,
.lesson-workspace--textual .lesson-stage__section-title {
    color: #8ea2ff;
}

.lesson-workspace--textual .lesson-rail__header h2,
.lesson-workspace--textual .lesson-rail__module h3,
.lesson-workspace--textual .lesson-stage__header h1,
.lesson-workspace--textual .lesson-stage__card h2,
.lesson-workspace--textual .lesson-coach__intro h3 {
    color: #f8fafc;
}

.lesson-workspace--textual .lesson-rail__header p,
.lesson-workspace--textual .lesson-rail__module p,
.lesson-workspace--textual .lesson-stage__summary,
.lesson-workspace--textual .lesson-coach__intro p {
    color: #b6bccd;
}

.lesson-workspace--textual .lesson-rail__module {
    border-color: #30313c;
    border-radius: 8px;
    background: #17181d;
}

.lesson-workspace--textual .lesson-rail__item {
    border-radius: 8px;
    background: transparent;
}

.lesson-workspace--textual .lesson-rail__item:hover {
    border-color: #46485a;
    background: #242631;
}

.lesson-workspace--textual .lesson-rail__item.active {
    border-color: #6c63ff;
    background: #282a36;
}

.lesson-workspace--textual .lesson-rail__item-icon {
    border-radius: 8px;
    background: #2b2d3a;
    color: #8ea2ff;
}

.lesson-workspace--textual .lesson-rail__item-body small,
.lesson-workspace--textual .lesson-rail__item-state {
    color: #8e94aa;
}

.lesson-workspace--textual .lesson-rail__item-body strong {
    color: #e5e7eb;
}

.lesson-workspace--textual .lesson-stage__card {
    min-height: calc(100vh - var(--nav-height) - 58px);
    padding: clamp(28px, 4vw, 56px);
}

.lesson-workspace--textual .lesson-stage__header {
    margin-bottom: 28px;
}

.lesson-workspace--textual .lesson-stage__header h1 {
    max-width: 760px;
    font-size: clamp(42px, 5vw, 64px);
    letter-spacing: 0;
}

.lesson-workspace--textual .lesson-stage__status {
    background: #2b2d35;
    color: #d7dae7;
}

.lesson-workspace--textual .lesson-stage__status.completed {
    background: rgba(32, 210, 168, 0.14);
    color: #5eead4;
}

.lesson-reader-banner,
.lesson-reader-panel,
.lesson-lab,
.lesson-checkpoint,
.lesson-workspace--textual .lesson-stage__transcript,
.lesson-workspace--textual .lesson-stage__completion-box,
.lesson-workspace--textual .lesson-stage__notice {
    border: 1px solid #353743;
    border-radius: 8px;
    background: #23242b;
}

.lesson-reader-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 18px;
    align-items: center;
    margin-bottom: 28px;
    padding: 18px;
}

.lesson-reader-banner span,
.lesson-lab__head span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 6px;
    color: #20d2a8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-reader-banner strong {
    display: block;
    color: #f8fafc;
    font-size: 22px;
    line-height: 1.2;
}

.lesson-reader-banner p {
    margin: 0;
    color: #b6bccd;
    line-height: 1.55;
}

.lesson-workspace--textual .lesson-stage__content {
    gap: 18px;
}

.lesson-workspace--textual .lesson-stage__body {
    max-width: 760px;
    gap: 18px;
}

.lesson-workspace--textual .lesson-stage__body p,
.lesson-workspace--textual .lesson-stage__empty {
    color: #e5e7eb;
    font-size: 18px;
    line-height: 1.82;
}

.lesson-reading-heading {
    margin: 18px 0 4px;
    color: #f8fafc;
    font-size: 30px;
    line-height: 1.2;
}

.lesson-reading-heading--sub {
    font-size: 22px;
}

.lesson-reading-list,
.lesson-reader-checklist {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 22px;
}

.lesson-reading-list--ordered {
    list-style: decimal;
}

.lesson-reading-list li,
.lesson-reader-checklist li {
    color: #d7dae7;
    line-height: 1.65;
}

.lesson-reading-callout {
    margin: 6px 0;
    padding: 18px 20px;
    border: 1px solid #334155;
    border-left: 4px solid #38bdf8;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(15, 23, 42, 0.78));
}

.lesson-reading-callout p {
    margin: 0;
    color: #dbeafe;
}

.lesson-reading-figure {
    overflow: hidden;
    margin: 10px 0 4px;
    border: 1px solid #303342;
    border-radius: 8px;
    background: #111827;
}

.lesson-reading-figure img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
}

.lesson-reading-figure figcaption {
    padding: 10px 14px;
    border-top: 1px solid #303342;
    color: #aab0c2;
    font-size: 13px;
}

.lesson-stage__body code:not(.lesson-code-block code) {
    padding: 2px 6px;
    border-radius: 5px;
    background: #2b2d36;
    color: #dbeafe;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 0.9em;
}

.lesson-stage__body strong {
    color: #f8fafc;
}

.lesson-code-block,
.lesson-lab__editor {
    overflow: auto;
    margin: 0;
    padding: 18px;
    border: 1px solid #3a3c49;
    border-radius: 8px;
    background: #111217;
    color: #dbeafe;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 14px;
    line-height: 1.6;
}

.lesson-reader-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.lesson-reader-panel {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.lesson-reader-panel--accent {
    background: linear-gradient(135deg, #23242b 0%, #1f2c35 100%);
}

.lesson-lab {
    display: grid;
    gap: 18px;
    margin-top: 24px;
    padding: 22px;
}

.lesson-lab__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.lesson-lab__head h2,
.lesson-checkpoint h2 {
    margin: 4px 0 0;
    color: #f8fafc;
    font-size: 26px;
}

.lesson-lab__workspace {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 14px;
}

.lesson-lab__prompt {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid #3a3c49;
    border-radius: 8px;
    background: #1a1b21;
}

.lesson-lab__prompt strong {
    color: #f8fafc;
}

.lesson-lab__prompt p {
    margin: 0;
    color: #c6cad9;
    line-height: 1.6;
}

.lesson-checkpoint {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 18px;
    margin-top: 24px;
    padding: 22px;
}

.lesson-checkpoint p {
    margin: 8px 0 0;
    color: #b6bccd;
    line-height: 1.55;
}

.lesson-checkpoint__options {
    display: grid;
    gap: 10px;
}

.lesson-checkpoint__options button {
    min-height: 42px;
    border: 1px solid #45485a;
    border-radius: 8px;
    background: #17181d;
    color: #eef2ff;
    font-weight: 800;
    text-align: left;
    padding: 0 14px;
}

.lesson-checkpoint__options button:hover {
    border-color: #8ea2ff;
    background: #252735;
}

.lesson-workspace--textual .lesson-stage__actions .btn,
.lesson-workspace--textual .lesson-stage__completion-box .btn {
    border-radius: 8px;
}

.lesson-workspace--textual .lesson-coach__avatar {
    background: linear-gradient(135deg, #6c63ff 0%, #20d2a8 100%);
    color: #ffffff;
}

.lesson-workspace--textual .lesson-coach__quick-btn {
    border-color: #3b3d4b;
    border-radius: 8px;
    background: #17181d;
    color: #e5e7eb;
}

.lesson-workspace--textual .lesson-coach__quick-btn:hover {
    border-color: #8ea2ff;
    background: #252735;
}

.lesson-workspace--textual .lesson-coach__message--bot {
    background: #292b34;
    color: #e5e7eb;
}

.lesson-workspace--textual .lesson-coach__message--user {
    background: #6c63ff;
}

.lesson-workspace--textual .lesson-coach__composer input {
    border: 1px solid #3b3d4b;
    border-radius: 8px;
    background: #17181d;
    color: #eef2ff;
}

.lesson-workspace--textual .lesson-coach__composer button {
    border-radius: 8px;
    background: #6c63ff;
}

@media (max-width: 1180px) {
    .lesson-workspace--textual .lesson-workspace__grid {
        grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    }

    .lesson-workspace--textual .lesson-coach {
        grid-column: 1 / -1;
    }

    .lesson-workspace--textual .lesson-coach__panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 820px) {
    .lesson-workspace--textual .lesson-workspace__top {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 16px;
    }

    .lesson-workspace--textual .lesson-workspace__progress {
        width: 100%;
        min-width: 0;
    }

    .lesson-workspace--textual .lesson-workspace__grid,
    .lesson-reader-banner,
    .lesson-reader-grid,
    .lesson-lab__workspace,
    .lesson-checkpoint {
        grid-template-columns: 1fr;
    }

    .lesson-workspace--textual .lesson-rail,
    .lesson-workspace--textual .lesson-coach__panel {
        position: static;
        max-height: none;
    }

    .lesson-workspace--textual .lesson-stage__card {
        padding: 24px 18px;
    }

    .lesson-workspace--textual .lesson-stage__header {
        flex-direction: column;
    }

    .lesson-workspace--textual .lesson-stage__header h1 {
        font-size: 38px;
    }

    .lesson-workspace--textual .lesson-rail__item {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: flex-start;
    }

    .lesson-workspace--textual .lesson-rail__item-state {
        grid-column: 2;
        justify-self: start;
        margin-top: -6px;
    }
}

/* ================================================================
   Professional white course reader
   ================================================================ */
.lesson-workspace--textual {
    min-height: 100vh;
    background: #ffffff;
    color: #172033;
}

.lesson-workspace--textual .lesson-workspace__top {
    max-width: none;
    padding: 14px 32px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.lesson-workspace--textual .lesson-workspace__back {
    color: #1f2937;
    font-weight: 700;
}

.lesson-workspace--textual .lesson-workspace__back:hover {
    color: #0056d2;
}

.lesson-workspace--textual .lesson-workspace__progress {
    border-color: #d8dee9;
    background: #ffffff;
}

.lesson-workspace--textual .lesson-workspace__progress span {
    color: #4b5563;
}

.lesson-workspace--textual .lesson-workspace__progress-bar {
    background: #e7eef8;
}

.lesson-workspace--textual .lesson-workspace__progress-bar span {
    background: #0056d2;
}

.lesson-workspace--textual .lesson-workspace__grid {
    max-width: 1520px;
    grid-template-columns: minmax(280px, 330px) minmax(0, 820px) minmax(260px, 310px);
    gap: 20px;
    padding-top: 0;
}

.lesson-workspace--textual .lesson-rail,
.lesson-workspace--textual .lesson-stage__card,
.lesson-workspace--textual .lesson-coach__panel {
    border-color: #e1e5ec;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.lesson-workspace--textual .lesson-rail,
.lesson-workspace--textual .lesson-coach__panel {
    top: calc(var(--nav-height) + 58px);
    max-height: calc(100vh - var(--nav-height) - 58px);
}

.lesson-workspace--textual .lesson-rail {
    border-left: 0;
}

.lesson-workspace--textual .lesson-rail__header,
.lesson-workspace--textual .lesson-coach__header,
.lesson-workspace--textual .lesson-coach__composer {
    border-color: #e1e5ec;
}

.lesson-workspace--textual .lesson-rail__eyebrow,
.lesson-workspace--textual .lesson-stage__eyebrow,
.lesson-workspace--textual .lesson-stage__meta,
.lesson-workspace--textual .lesson-rail__module-meta,
.lesson-workspace--textual .lesson-stage__section-title {
    color: #0056d2;
}

.lesson-workspace--textual .lesson-rail__header h2,
.lesson-workspace--textual .lesson-rail__module h3,
.lesson-workspace--textual .lesson-stage__header h1,
.lesson-workspace--textual .lesson-stage__card h2,
.lesson-workspace--textual .lesson-coach__intro h3 {
    color: #111827;
}

.lesson-workspace--textual .lesson-rail__header p,
.lesson-workspace--textual .lesson-rail__module p,
.lesson-workspace--textual .lesson-stage__summary,
.lesson-workspace--textual .lesson-coach__intro p {
    color: #5f6b7a;
}

.lesson-workspace--textual .lesson-rail__module {
    border-color: #edf0f5;
    border-radius: 0;
    background: #ffffff;
}

.lesson-workspace--textual .lesson-rail__item {
    grid-template-columns: minmax(0, 1fr) auto;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
}

.lesson-workspace--textual .lesson-rail__item:hover {
    border-color: #d8dee9;
    background: #f7f9fc;
}

.lesson-workspace--textual .lesson-rail__item.active {
    border-color: #0056d2;
    background: #eef5ff;
}

.lesson-workspace--textual .lesson-rail__item-icon {
    display: none;
}

.lesson-workspace--textual .lesson-rail__item-body small,
.lesson-workspace--textual .lesson-rail__item-state {
    color: #667085;
}

.lesson-workspace--textual .lesson-rail__item-body strong {
    color: #111827;
}

.lesson-workspace--textual .lesson-stage__card {
    min-height: calc(100vh - var(--nav-height) - 58px);
    padding: clamp(32px, 4vw, 58px);
}

.lesson-workspace--textual .lesson-stage__header {
    margin-bottom: 28px;
}

.lesson-workspace--textual .lesson-stage__header h1 {
    max-width: 760px;
    font-size: clamp(40px, 4.6vw, 58px);
    line-height: 1.08;
    letter-spacing: 0;
}

.lesson-workspace--textual .lesson-stage__status {
    background: #f3f4f6;
    color: #374151;
}

.lesson-workspace--textual .lesson-stage__status.completed {
    background: #e8f5ee;
    color: #047857;
}

.lesson-workspace--textual .lesson-reader-banner,
.lesson-workspace--textual .lesson-reader-panel,
.lesson-workspace--textual .lesson-lab,
.lesson-workspace--textual .lesson-checkpoint,
.lesson-workspace--textual .lesson-stage__transcript,
.lesson-workspace--textual .lesson-stage__completion-box,
.lesson-workspace--textual .lesson-stage__notice {
    border: 1px solid #e1e5ec;
    border-radius: 6px;
    background: #ffffff;
}

.lesson-workspace--textual .lesson-reader-banner {
    border-left: 4px solid #0056d2;
}

.lesson-workspace--textual .lesson-reader-banner span,
.lesson-workspace--textual .lesson-lab__head span {
    color: #0056d2;
}

.lesson-workspace--textual .lesson-reader-banner strong {
    color: #111827;
}

.lesson-workspace--textual .lesson-reader-banner p,
.lesson-workspace--textual .lesson-checkpoint p,
.lesson-workspace--textual .lesson-lab__prompt p {
    color: #5f6b7a;
}

.lesson-workspace--textual .lesson-stage__body p,
.lesson-workspace--textual .lesson-stage__empty {
    color: #1f2937;
    font-size: 18px;
    line-height: 1.82;
}

.lesson-workspace--textual .lesson-reading-heading {
    color: #111827;
}

.lesson-workspace--textual .lesson-reading-list li,
.lesson-workspace--textual .lesson-reader-checklist li {
    color: #243042;
}

.lesson-workspace--textual .lesson-code-block,
.lesson-workspace--textual .lesson-lab__editor {
    border-color: #d8dee9;
    background: #f8fafc;
    color: #111827;
}

.lesson-workspace--textual .lesson-reader-panel--accent {
    background: #f8fbff;
}

.lesson-workspace--textual .lesson-lab__head h2,
.lesson-workspace--textual .lesson-checkpoint h2,
.lesson-workspace--textual .lesson-lab__prompt strong {
    color: #111827;
}

.lesson-workspace--textual .lesson-lab__prompt {
    border-color: #e1e5ec;
    background: #f8fafc;
}

.lesson-workspace--textual .lesson-checkpoint__options button {
    border-color: #d8dee9;
    background: #ffffff;
    color: #172033;
}

.lesson-workspace--textual .lesson-checkpoint__options button:hover {
    border-color: #0056d2;
    background: #f4f8ff;
}

.lesson-workspace--textual .lesson-coach__quick-btn {
    border-color: #d8dee9;
    border-radius: 6px;
    background: #ffffff;
    color: #172033;
}

.lesson-workspace--textual .lesson-coach__quick-btn:hover {
    border-color: #0056d2;
    background: #f4f8ff;
}

.lesson-workspace--textual .lesson-coach__message--bot {
    background: #f3f6fb;
    color: #243042;
}

.lesson-workspace--textual .lesson-coach__message--user {
    background: #0056d2;
    color: #ffffff;
}

.lesson-workspace--textual .lesson-coach__composer input {
    border: 1px solid #d8dee9;
    border-radius: 6px;
    background: #ffffff;
    color: #172033;
}

.lesson-workspace--textual .lesson-coach__composer button {
    min-width: 72px;
    border-radius: 6px;
    background: #0056d2;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.course-workspace {
    background: #ffffff;
}

.course-workspace .lesson-workspace__top {
    max-width: none;
    padding: 14px 32px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.course-workspace .lesson-workspace__grid {
    max-width: 1520px;
    gap: 20px;
}

.course-workspace .lesson-rail,
.course-workspace .lesson-stage__card,
.course-workspace .lesson-coach__panel {
    border-color: #e1e5ec;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.course-workspace .course-workspace__metric,
.course-workspace .course-workspace__next,
.course-workspace .course-workspace__section,
.course-workspace .course-workspace__info-card,
.course-workspace .course-workspace__action-item,
.course-workspace .course-workspace__resource-item,
.course-workspace .course-workspace__certificate-item {
    border-color: #e1e5ec;
    border-radius: 6px;
    background: #ffffff;
}

.course-workspace .course-workspace__next,
.course-workspace .course-workspace__section {
    border-left: 4px solid #0056d2;
}

.course-workspace .lesson-workspace__back {
    color: #1f2937;
    font-weight: 700;
}

.course-workspace .lesson-stage__header h1,
.course-workspace .course-workspace__next h2,
.course-workspace .course-workspace__info-card h3 {
    color: #111827;
}

.course-workspace .lesson-stage__summary,
.course-workspace .course-workspace__next p,
.course-workspace .course-workspace__section p,
.course-workspace .course-workspace__empty {
    color: #5f6b7a;
}

@media (max-width: 820px) {
    .lesson-workspace--textual .lesson-workspace__grid {
        grid-template-columns: 1fr;
    }

    .lesson-workspace--textual .lesson-stage__header h1 {
        font-size: 36px;
    }

    .lesson-workspace--textual .lesson-rail__item {
        grid-template-columns: minmax(0, 1fr);
    }

    .lesson-workspace--textual .lesson-rail__item-state {
        grid-column: 1;
        margin-top: -4px;
    }
}

/* ================================================================
   Course reader spatial refresh
   ================================================================ */
.lesson-workspace,
.lesson-workspace--textual,
.course-workspace {
    background: #f8fafc;
    color: #172033;
}

.lesson-workspace__top,
.lesson-workspace--textual .lesson-workspace__top,
.course-workspace .lesson-workspace__top {
    max-width: 1840px;
    margin: 0 auto;
    padding: 20px clamp(20px, 3vw, 40px);
    border-bottom: 1px solid #e6eaf0;
    background: #ffffff;
}

.lesson-workspace__grid,
.lesson-workspace--textual .lesson-workspace__grid,
.course-workspace .lesson-workspace__grid {
    max-width: 1840px;
    margin: 0 auto;
    padding: 28px clamp(20px, 3vw, 40px) 88px;
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(300px, 360px);
    gap: clamp(24px, 2vw, 36px);
    align-items: start;
}

.lesson-workspace--textual .lesson-workspace__grid {
    grid-template-columns: minmax(280px, 330px) minmax(0, 900px) minmax(300px, 360px);
}

.course-workspace .lesson-workspace__grid {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1080px) minmax(300px, 360px);
}

.lesson-stage {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.course-workspace .lesson-stage {
    max-width: 1080px;
}

.lesson-rail,
.lesson-workspace--textual .lesson-rail,
.course-workspace .lesson-rail,
.lesson-stage__card,
.lesson-workspace--textual .lesson-stage__card,
.course-workspace .lesson-stage__card,
.lesson-coach__panel,
.lesson-workspace--textual .lesson-coach__panel,
.course-workspace .lesson-coach__panel {
    border: 1px solid #e1e5ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}

.lesson-rail,
.lesson-workspace--textual .lesson-rail,
.course-workspace .lesson-rail {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    max-height: calc(100vh - var(--nav-height) - 48px);
    overflow: auto;
}

.lesson-rail__header {
    padding: 26px 24px 22px;
}

.lesson-rail__header h2 {
    font-size: clamp(26px, 2vw, 34px);
    line-height: 1.05;
}

.lesson-rail__module,
.lesson-workspace--textual .lesson-rail__module {
    padding: 16px;
    border-radius: 8px;
    background: #fbfdff;
}

.lesson-rail__item,
.lesson-workspace--textual .lesson-rail__item,
.course-workspace .lesson-rail__item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    min-height: 54px;
    padding: 13px 14px;
    border-radius: 8px;
}

.lesson-workspace--textual .lesson-rail__item-icon,
.course-workspace .lesson-rail__item-icon {
    display: none;
}

.lesson-rail__item-body strong {
    font-size: 14px;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.lesson-stage__card,
.lesson-workspace--textual .lesson-stage__card {
    min-height: calc(100vh - var(--nav-height) - 112px);
    padding: clamp(36px, 4vw, 64px);
}

.course-workspace .lesson-stage__card {
    min-height: auto;
    padding: clamp(34px, 3.8vw, 56px);
}

.lesson-stage__header {
    gap: 24px;
}

.lesson-stage__header h1,
.lesson-workspace--textual .lesson-stage__header h1 {
    max-width: 820px;
    font-size: clamp(42px, 4.2vw, 60px);
    line-height: 1.06;
}

.course-workspace .lesson-stage__header h1 {
    font-size: clamp(44px, 4vw, 64px);
}

.lesson-stage__summary {
    max-width: 780px;
}

.course-workspace__document {
    gap: 30px;
}

.course-workspace__hero-metrics {
    gap: 16px;
}

.course-workspace .course-workspace__metric,
.course-workspace .course-workspace__next,
.course-workspace .course-workspace__section,
.course-workspace .course-workspace__info-card,
.course-workspace .course-workspace__action-item,
.course-workspace .course-workspace__resource-item,
.course-workspace .course-workspace__certificate-item {
    border-radius: 8px;
}

.course-workspace__metric {
    padding: 20px;
}

.course-workspace__next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    padding: 28px;
    align-items: center;
}

.course-workspace__section {
    padding: 28px;
}

.course-workspace__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.course-workspace__info-card {
    padding: 24px;
}

.lesson-coach {
    min-width: 0;
    align-self: start;
}

.lesson-coach__panel,
.lesson-workspace--textual .lesson-coach__panel,
.course-workspace .lesson-coach__panel {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    max-height: calc(100vh - var(--nav-height) - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lesson-coach__panel::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #0056d2 0%, #20b486 100%);
}

.lesson-coach__header,
.lesson-workspace--textual .lesson-coach__header {
    padding: 16px 18px;
    gap: 16px;
    border-bottom-color: #e1e5ec;
}

.lesson-coach__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.lesson-coach__identity span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.lesson-coach__identity strong {
    color: #111827;
    font-size: 15px;
    line-height: 1.1;
}

.lesson-coach__identity small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.lesson-coach__avatar,
.lesson-workspace--textual .lesson-coach__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #0056d2;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.lesson-coach__header-action {
    width: auto;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.lesson-coach__header-action:hover {
    background: #f1f5f9;
    color: #111827;
}

.lesson-coach__intro {
    padding: 18px 20px 12px;
    justify-items: start;
    text-align: left;
}

.lesson-coach__intro h3,
.lesson-workspace--textual .lesson-coach__intro h3 {
    color: #111827;
    font-size: 20px;
}

.lesson-coach__intro p {
    color: #5f6b7a;
}

.lesson-coach__quick-actions {
    padding: 0 20px 16px;
}

.lesson-coach__quick-btn,
.lesson-workspace--textual .lesson-coach__quick-btn {
    padding: 11px 12px;
    border-radius: 8px;
    border-color: #cfe0ff;
    color: #0056d2;
    font-size: 13px;
    line-height: 1.35;
}

.lesson-coach__messages {
    padding: 0 20px 16px;
    max-height: 220px;
}

.lesson-coach__message {
    border-radius: 8px;
}

.lesson-coach__composer,
.lesson-workspace--textual .lesson-coach__composer {
    margin-top: auto;
    padding: 14px;
    border-top-color: #e1e5ec;
}

.lesson-coach__composer input,
.lesson-workspace--textual .lesson-coach__composer input {
    border: 1px solid #d8dee9;
    border-radius: 8px;
    background: #f8fafc;
}

.lesson-coach__composer button,
.lesson-workspace--textual .lesson-coach__composer button {
    width: auto;
    min-width: 72px;
    height: 44px;
    padding: 0 16px;
    border-radius: 8px;
}

@media (max-width: 1320px) {
    .lesson-workspace__grid,
    .lesson-workspace--textual .lesson-workspace__grid,
    .course-workspace .lesson-workspace__grid {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    }

    .lesson-coach {
        grid-column: 2;
        width: min(380px, 100%);
        justify-self: end;
    }

    .lesson-coach__panel,
    .lesson-workspace--textual .lesson-coach__panel,
    .course-workspace .lesson-coach__panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 960px) {
    .lesson-workspace__top,
    .lesson-workspace--textual .lesson-workspace__top,
    .course-workspace .lesson-workspace__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .lesson-workspace__progress {
        width: 100%;
        min-width: 0;
    }

    .lesson-workspace__grid,
    .lesson-workspace--textual .lesson-workspace__grid,
    .course-workspace .lesson-workspace__grid {
        grid-template-columns: 1fr;
        padding-bottom: 48px;
    }

    .lesson-rail,
    .lesson-workspace--textual .lesson-rail,
    .course-workspace .lesson-rail {
        position: static;
        max-height: none;
    }

    .lesson-coach {
        grid-column: auto;
        width: 100%;
        justify-self: stretch;
    }

    .course-workspace__hero-metrics,
    .course-workspace__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .lesson-workspace__top,
    .lesson-workspace--textual .lesson-workspace__top,
    .course-workspace .lesson-workspace__top {
        padding: 16px;
    }

    .lesson-workspace__grid,
    .lesson-workspace--textual .lesson-workspace__grid,
    .course-workspace .lesson-workspace__grid {
        padding: 18px 14px 36px;
        gap: 18px;
    }

    .lesson-stage__card,
    .lesson-workspace--textual .lesson-stage__card,
    .course-workspace .lesson-stage__card {
        padding: 24px 18px;
    }

    .lesson-stage__header {
        flex-direction: column;
    }

    .lesson-stage__header h1,
    .lesson-workspace--textual .lesson-stage__header h1,
    .course-workspace .lesson-stage__header h1 {
        font-size: 36px;
    }

    .course-workspace__hero-metrics,
    .course-workspace__cards,
    .course-workspace__next {
        grid-template-columns: 1fr;
    }
}

/* Coursera-style full reader: content first, Nia as floating help. */
.lesson-workspace--textual .lesson-workspace__grid,
.course-workspace .lesson-workspace__grid {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
    width: 100%;
    max-width: none;
    padding: 28px clamp(24px, 3vw, 58px) 96px;
    gap: clamp(22px, 2.4vw, 38px);
    align-items: start;
}

.lesson-workspace--textual .lesson-stage,
.course-workspace .lesson-stage {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
}

.lesson-workspace--textual .lesson-stage__card,
.course-workspace .lesson-stage__card {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 8px;
    border: 1px solid #d8dee9;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
    padding: clamp(36px, 4vw, 70px);
}

.lesson-workspace--textual .lesson-stage__header,
.course-workspace .lesson-stage__header {
    max-width: 1120px;
}

.lesson-workspace--textual .lesson-stage__body,
.course-workspace .lesson-stage__body {
    max-width: 980px;
    color: #1f2937;
}

.lesson-workspace--textual .lesson-stage__body p,
.course-workspace .lesson-stage__body p {
    font-size: 19px;
    line-height: 1.85;
}

.lesson-workspace--textual .lesson-stage__body strong,
.course-workspace .lesson-stage__body strong,
.lesson-workspace--textual .lesson-reading-list li,
.course-workspace .lesson-reading-list li,
.lesson-workspace--textual .lesson-reader-checklist li,
.course-workspace .lesson-reader-checklist li {
    color: #1f2937;
}

.lesson-workspace--textual .lesson-stage__body code:not(.lesson-code-block code),
.course-workspace .lesson-stage__body code:not(.lesson-code-block code) {
    background: #eef4ff;
    color: #0f172a;
}

.lesson-workspace--textual .lesson-reading-callout,
.course-workspace .lesson-reading-callout {
    border: 1px solid #cfe0ff;
    border-left: 4px solid #0056d2;
    background: #f5f9ff;
}

.lesson-workspace--textual .lesson-reading-callout p,
.course-workspace .lesson-reading-callout p {
    color: #1f2937;
}

.lesson-workspace--textual .lesson-code-block,
.lesson-workspace--textual .lesson-lab__editor,
.course-workspace .lesson-code-block,
.course-workspace .lesson-lab__editor {
    border: 1px solid #d8dee9;
    background: #f8fafc;
    color: #1f2937;
}

.lesson-workspace--textual .lesson-reader-banner,
.lesson-workspace--textual .lesson-reader-grid,
.lesson-workspace--textual .lesson-lab,
.lesson-workspace--textual .lesson-checkpoint,
.course-workspace .lesson-reader-banner,
.course-workspace .lesson-reader-grid,
.course-workspace .lesson-lab,
.course-workspace .lesson-checkpoint {
    max-width: 1120px;
}

.lesson-reading-figure,
.lesson-workspace--textual .lesson-reading-figure,
.course-workspace .lesson-reading-figure {
    display: grid !important;
    gap: 10px;
    margin: 34px 0;
    padding: 0;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.lesson-reading-figure img,
.lesson-workspace--textual .lesson-reading-figure img,
.course-workspace .lesson-reading-figure img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    background: #f8fafc;
}

.lesson-reading-figure figcaption,
.lesson-workspace--textual .lesson-reading-figure figcaption,
.course-workspace .lesson-reading-figure figcaption {
    padding: 0 18px 16px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
}

.lesson-coach,
.lesson-workspace--textual .lesson-coach,
.course-workspace .lesson-coach {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 1500;
    grid-column: auto !important;
    width: min(390px, calc(100vw - 32px)) !important;
    min-width: 0;
    justify-self: auto !important;
    align-self: auto !important;
    pointer-events: none;
}

.lesson-coach__launcher {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 18px 8px 8px;
    border: 1px solid #bfd6ff;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    cursor: pointer;
}

.lesson-coach__launcher:hover {
    border-color: #0056d2;
    box-shadow: 0 20px 54px rgba(0, 86, 210, 0.2);
}

.lesson-coach.is-open .lesson-coach__launcher {
    display: none;
}

.lesson-coach__panel,
.lesson-workspace--textual .lesson-coach__panel,
.course-workspace .lesson-coach__panel {
    pointer-events: auto;
    position: static !important;
    display: none;
    width: 100%;
    max-height: min(680px, calc(100vh - 112px)) !important;
    overflow: hidden;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid #d8dee9;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
}

.lesson-coach.is-open .lesson-coach__panel,
.lesson-coach.is-open .lesson-coach__panel:not([hidden]) {
    display: flex;
}

.lesson-coach__header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.lesson-coach__close {
    width: auto;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d8dee9;
    border-radius: 8px;
    background: #ffffff;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.lesson-coach__close:hover {
    background: #f8fafc;
    color: #0f172a;
}

.lesson-coach__messages {
    max-height: 260px;
}

@media (max-width: 1100px) {
    .lesson-workspace--textual .lesson-workspace__grid,
    .course-workspace .lesson-workspace__grid {
        grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important;
        padding-inline: 20px;
    }

    .lesson-workspace--textual .lesson-stage__card,
    .course-workspace .lesson-stage__card {
        padding: 34px 28px;
    }
}

@media (max-width: 860px) {
    .lesson-workspace--textual .lesson-workspace__grid,
    .course-workspace .lesson-workspace__grid {
        grid-template-columns: 1fr !important;
        padding: 18px 14px 88px;
    }

    .lesson-workspace--textual .lesson-stage__body p,
    .course-workspace .lesson-stage__body p {
        font-size: 17px;
        line-height: 1.75;
    }

    .lesson-coach,
    .lesson-workspace--textual .lesson-coach,
    .course-workspace .lesson-coach {
        right: 16px !important;
        bottom: 16px !important;
        width: min(390px, calc(100vw - 32px)) !important;
    }
}

/* ================================================================
   Universal learning reader layout
   Applies to every active lesson, regardless of course subject.
   ================================================================ */
.lesson-workspace--textual {
    min-height: calc(100vh - var(--nav-height));
    background: #f8fafc;
    color: #0f172a;
}

.lesson-workspace--textual .lesson-workspace__top {
    position: sticky;
    top: var(--nav-height);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px clamp(18px, 2.6vw, 38px);
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

.lesson-workspace--textual .lesson-workspace__back {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    box-shadow: none;
}

.lesson-workspace--textual .lesson-workspace__back:hover {
    color: #2563eb;
    background: transparent;
}

.lesson-workspace--textual .lesson-workspace__toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 0 18px;
}

.lesson-workspace--textual .lesson-workspace__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.lesson-workspace--textual .lesson-workspace__tool:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.lesson-workspace--textual .lesson-workspace__progress {
    width: min(360px, 40vw);
    min-width: 220px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lesson-workspace--textual .lesson-workspace__progress span {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.lesson-workspace--textual .lesson-workspace__progress-bar {
    height: 7px;
    border-radius: 999px;
    background: #e2e8f0;
}

.lesson-workspace--textual .lesson-workspace__progress-bar span {
    background: #2563eb;
}

.lesson-workspace--textual .lesson-workspace__grid {
    display: grid;
    grid-template-columns: 384px minmax(0, 1fr) 244px !important;
    gap: 0 !important;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: calc(100vh - var(--nav-height) - 64px);
    margin: 0;
    padding: 0 !important;
}

.lesson-workspace--textual .lesson-rail {
    position: sticky;
    top: calc(var(--nav-height) + 64px);
    height: calc(100vh - var(--nav-height) - 64px);
    max-height: none;
    overflow: auto;
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.lesson-workspace--textual .lesson-rail__header {
    padding: 28px 24px 22px;
    border-bottom: 1px solid #e2e8f0;
}

.lesson-workspace--textual .lesson-rail__eyebrow,
.lesson-workspace--textual .lesson-stage__eyebrow,
.lesson-workspace--textual .lesson-stage__meta,
.lesson-workspace--textual .lesson-stage__section-title,
.lesson-workspace--textual .lesson-rail__module-meta,
.lesson-outline__title {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-workspace--textual .lesson-rail__header h2 {
    margin: 8px 0;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.22;
    font-weight: 850;
}

.lesson-workspace--textual .lesson-rail__header p {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.lesson-rail__search {
    display: grid;
    gap: 7px;
    margin: 18px 0 12px;
}

.lesson-rail__search span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.lesson-rail__search input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    outline: none;
}

.lesson-rail__search input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.lesson-rail__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lesson-rail__filters button {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.lesson-rail__filters button.active,
.lesson-rail__filters button:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.lesson-workspace--textual .lesson-rail__modules {
    display: grid;
    gap: 0;
    padding: 0;
}

.lesson-workspace--textual .lesson-rail__module {
    padding: 22px 16px;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    background: #ffffff;
}

.lesson-workspace--textual .lesson-rail__module h3 {
    margin: 7px 8px 6px;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
}

.lesson-workspace--textual .lesson-rail__module p {
    margin: 0 8px 14px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.lesson-workspace--textual .lesson-rail__items {
    display: grid;
    gap: 5px;
}

.lesson-workspace--textual .lesson-rail__item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    min-height: 48px;
    padding: 12px 12px 12px 16px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #0f172a;
    text-decoration: none;
    box-shadow: none;
}

.lesson-workspace--textual .lesson-rail__item:hover {
    border-color: #e2e8f0;
    border-left-color: #93c5fd;
    background: #f8fafc;
}

.lesson-workspace--textual .lesson-rail__item.active {
    border-color: #bfdbfe;
    border-left-color: #2563eb;
    background: #eff6ff;
}

.lesson-workspace--textual .lesson-rail__item-body small,
.lesson-workspace--textual .lesson-rail__item-state {
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lesson-workspace--textual .lesson-rail__item-body strong {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.38;
    font-weight: 800;
}

.lesson-workspace--textual .lesson-rail__item.completed .lesson-rail__item-state {
    color: #16a34a;
}

.lesson-workspace--textual .lesson-stage {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 48px clamp(42px, 5.4vw, 104px) 96px;
    background: #ffffff;
}

.lesson-workspace--textual .lesson-stage__card {
    width: min(100%, 940px);
    max-width: 940px !important;
    min-height: auto;
    margin: 0 auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}

.lesson-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-bottom: 24px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.lesson-breadcrumb a {
    color: #475569;
    font-weight: 700;
    text-decoration: none;
}

.lesson-breadcrumb a:hover {
    color: #2563eb;
}

.lesson-breadcrumb span:not(:last-child)::after,
.lesson-breadcrumb a::after {
    content: "/";
    margin-left: 9px;
    color: #cbd5e1;
}

.lesson-workspace--textual .lesson-stage__header {
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 38px;
    padding: 0 0 26px;
    border-bottom: 1px solid #e2e8f0;
}

.lesson-workspace--textual .lesson-stage__header h1 {
    max-width: 860px;
    margin: 8px 0 12px;
    color: #0f172a;
    font-size: clamp(38px, 3.7vw, 54px);
    line-height: 1.08;
    letter-spacing: 0;
    font-weight: 850;
}

.lesson-workspace--textual .lesson-stage__summary {
    max-width: 780px;
    margin: 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.65;
}

.lesson-workspace--textual .lesson-stage__status {
    flex: 0 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
}

.lesson-workspace--textual .lesson-stage__status.completed {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.lesson-workspace--textual .lesson-reader-banner,
.lesson-workspace--textual .lesson-reader-grid,
.lesson-workspace--textual .lesson-lab,
.lesson-workspace--textual .lesson-checkpoint,
.lesson-workspace--textual .lesson-stage__transcript,
.lesson-workspace--textual .lesson-stage__notice,
.lesson-workspace--textual .lesson-stage__completion-box {
    display: none !important;
}

.lesson-workspace--textual .lesson-stage__content {
    margin: 0;
}

.lesson-workspace--textual .lesson-stage__section-title {
    margin: 0 0 22px;
}

.lesson-workspace--textual .lesson-stage__body {
    max-width: 820px;
    color: #1e293b;
}

.lesson-workspace--textual .lesson-stage__body p,
.lesson-workspace--textual .lesson-stage__empty {
    margin: 0 0 26px;
    color: #1e293b;
    font-size: 18px;
    line-height: 1.86;
    font-weight: 400;
}

.lesson-workspace--textual .lesson-reading-heading {
    margin: 46px 0 16px;
    color: #0f172a;
    font-size: clamp(26px, 2.3vw, 34px);
    line-height: 1.18;
    letter-spacing: 0;
    font-weight: 850;
}

.lesson-workspace--textual .lesson-reading-heading--sub {
    font-size: clamp(21px, 1.7vw, 26px);
}

.lesson-workspace--textual .lesson-reading-list {
    display: grid;
    gap: 11px;
    margin: 0 0 28px 22px;
    padding: 0;
    color: #1e293b;
    font-size: 18px;
    line-height: 1.75;
}

.lesson-workspace--textual .lesson-reading-list li {
    padding-left: 4px;
}

.lesson-workspace--textual .lesson-reading-callout {
    margin: 34px 0;
    padding: 22px 26px;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 6px;
    background: #eff6ff;
}

.lesson-workspace--textual .lesson-reading-callout p {
    margin-bottom: 0;
    color: #1e293b;
}

.lesson-workspace--textual .lesson-code-block {
    margin: 30px 0;
    padding: 20px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #0f172a;
    color: #e2e8f0;
}

.lesson-workspace--textual .lesson-stage__actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin: 56px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), #ffffff 36%);
}

.lesson-workspace--textual .lesson-stage__actions .btn {
    min-height: 44px;
    border-radius: 6px;
    font-weight: 850;
}

.lesson-outline {
    position: sticky;
    top: calc(var(--nav-height) + 64px);
    height: calc(100vh - var(--nav-height) - 64px);
    padding: 44px 22px;
    border-left: 1px solid #e2e8f0;
    background: #ffffff;
    overflow: auto;
}

.lesson-outline__title {
    margin-bottom: 18px;
}

.lesson-outline__list {
    display: grid;
    gap: 14px;
}

.lesson-outline__item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.lesson-outline__dot {
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: 50%;
    background: #cbd5e1;
}

.lesson-workspace--textual .lesson-coach,
.lesson-coach {
    position: fixed !important;
    right: 26px !important;
    bottom: 26px !important;
    z-index: 1500;
    width: min(390px, calc(100vw - 32px)) !important;
    pointer-events: none;
}

.lesson-workspace--textual .lesson-coach__launcher {
    pointer-events: auto;
    min-height: 50px;
    padding: 8px 18px 8px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.lesson-workspace--textual .lesson-coach__panel {
    pointer-events: auto;
    position: static !important;
    max-height: min(680px, calc(100vh - 112px)) !important;
    border-radius: 12px;
}

@media (max-width: 1320px) {
    .lesson-workspace--textual .lesson-workspace__grid {
        grid-template-columns: 344px minmax(0, 1fr) !important;
    }

    .lesson-outline {
        display: none;
    }

    .lesson-workspace--textual .lesson-stage {
        padding-inline: clamp(34px, 5vw, 80px);
    }
}

@media (max-width: 920px) {
    .lesson-workspace--textual .lesson-workspace__top {
        position: static;
        gap: 14px;
        align-items: flex-start;
        flex-direction: column;
    }

    .lesson-workspace--textual .lesson-workspace__progress {
        width: 100%;
        min-width: 0;
    }

    .lesson-workspace--textual .lesson-workspace__toolbar {
        width: 100%;
        justify-content: flex-start;
        padding: 0;
        overflow-x: auto;
    }

    .lesson-workspace--textual .lesson-workspace__grid {
        grid-template-columns: 1fr !important;
    }

    .lesson-workspace--textual .lesson-rail {
        position: static;
        height: auto;
        max-height: 440px;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .lesson-workspace--textual .lesson-stage {
        padding: 34px 22px 92px;
    }

    .lesson-workspace--textual .lesson-stage__card {
        max-width: none !important;
    }

    .lesson-workspace--textual .lesson-stage__header {
        flex-direction: column;
    }

    .lesson-workspace--textual .lesson-stage__header h1 {
        font-size: 34px;
    }
}

@media (max-width: 640px) {
    .lesson-workspace--textual .lesson-rail__filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lesson-workspace--textual .lesson-rail__filters button {
        padding-inline: 8px;
        font-size: 12px;
    }

    .lesson-workspace--textual .lesson-stage__body p,
    .lesson-workspace--textual .lesson-reading-list {
        font-size: 16px;
        line-height: 1.75;
    }

    .lesson-workspace--textual .lesson-stage__actions {
        justify-content: stretch;
    }

    .lesson-workspace--textual .lesson-stage__actions .btn {
        flex: 1 1 100%;
    }
}

/* ================================================================
   Universal course overview reader
   ================================================================ */
.course-workspace--reader {
    min-height: calc(100vh - var(--nav-height));
    background: #f8fafc;
    color: #0f172a;
}

.course-workspace--reader .lesson-workspace__top {
    position: sticky;
    top: var(--nav-height);
    z-index: 80;
    display: flex;
    min-height: 64px;
    max-width: none;
    margin: 0;
    padding: 10px clamp(24px, 4vw, 72px);
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.course-workspace--reader .lesson-workspace__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}

.course-workspace--reader .lesson-workspace__progress {
    width: min(280px, 34vw);
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    box-shadow: none;
}

.course-workspace--reader .lesson-workspace__grid {
    display: grid;
    grid-template-columns: 384px minmax(0, 1fr) 244px !important;
    gap: 0 !important;
    width: 100%;
    max-width: none !important;
    min-height: calc(100vh - var(--nav-height) - 64px);
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch;
}

.course-workspace--reader .lesson-rail {
    position: sticky;
    top: calc(var(--nav-height) + 64px);
    height: calc(100vh - var(--nav-height) - 64px);
    max-height: none;
    overflow: auto;
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.course-workspace--reader .lesson-rail__header {
    padding: 30px 24px 22px;
    border-bottom: 1px solid #e2e8f0;
}

.course-workspace--reader .lesson-rail__eyebrow,
.course-workspace--reader .lesson-rail__module-meta,
.course-workspace--reader .lesson-stage__eyebrow,
.course-workspace--reader .lesson-stage__meta,
.course-workspace--reader .lesson-stage__section-title,
.course-workspace--reader .course-detail__section-kicker {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.course-workspace--reader .lesson-rail__header h2 {
    margin: 8px 0 10px;
    color: #0f172a;
    font-size: 31px;
    line-height: 1.08;
    font-weight: 900;
}

.course-workspace--reader .lesson-rail__header p,
.course-workspace--reader .lesson-rail__module p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.62;
}

.course-workspace--reader .lesson-rail__search {
    margin-top: 18px;
}

.course-workspace--reader .lesson-rail__search input {
    min-height: 42px;
    border-radius: 6px;
}

.course-workspace--reader .lesson-rail__filters button {
    border-radius: 999px;
}

.course-workspace--reader .lesson-rail__modules {
    padding: 22px 18px 42px;
}

.course-workspace--reader .lesson-rail__module {
    padding: 0 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.course-workspace--reader .lesson-rail__module + .lesson-rail__module {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.course-workspace--reader .lesson-rail__module h3 {
    color: #0f172a;
    font-size: 16px;
    line-height: 1.34;
    font-weight: 850;
}

.course-workspace--reader .lesson-rail__items {
    gap: 8px;
    margin-top: 14px;
}

.course-workspace--reader .lesson-rail__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 13px 13px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    text-decoration: none;
    box-shadow: none;
}

.course-workspace--reader .lesson-rail__item:hover {
    border-color: #bfdbfe;
    background: #f8fafc;
}

.course-workspace--reader .lesson-rail__item.active {
    border-color: #2563eb;
    background: #eff6ff;
}

.course-workspace--reader .lesson-rail__item.completed {
    border-color: #bbf7d0;
}

.course-workspace--reader .lesson-rail__item-body small,
.course-workspace--reader .lesson-rail__item-state {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.course-workspace--reader .lesson-rail__item-body strong {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 850;
}

.course-workspace--reader .lesson-stage {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px clamp(42px, 5.4vw, 104px) 100px;
    background: #ffffff;
}

.course-workspace--reader .lesson-stage__card {
    width: min(100%, 940px);
    max-width: 940px !important;
    min-height: auto;
    margin: 0 auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.course-workspace--reader .lesson-breadcrumb {
    margin-bottom: 30px;
    color: #64748b;
    font-size: 13px;
}

.course-workspace--reader .lesson-stage__header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 38px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e2e8f0;
}

.course-workspace--reader .lesson-stage__header h1 {
    max-width: 760px;
    margin: 12px 0 14px;
    color: #0f172a;
    font-size: clamp(38px, 3.5vw, 54px);
    line-height: 1.05;
    letter-spacing: 0;
    font-weight: 900;
}

.course-workspace--reader .lesson-stage__summary {
    max-width: 760px;
    color: #475569;
    font-size: 18px;
    line-height: 1.72;
}

.course-workspace--reader .lesson-stage__status {
    flex: 0 0 auto;
    margin-top: 38px;
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
}

.course-workspace--reader .lesson-stage__status.completed {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.course-reader__next,
.course-reader__section {
    margin: 34px 0;
    padding: 0 0 34px;
    border-bottom: 1px solid #e2e8f0;
}

.course-reader__next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 22px 24px;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 6px;
    background: #eff6ff;
}

.course-reader__next h2,
.course-reader__section h2 {
    margin: 8px 0 12px;
    color: #0f172a;
    font-size: clamp(25px, 2vw, 32px);
    line-height: 1.16;
    font-weight: 880;
}

.course-reader__next p,
.course-reader__section p {
    max-width: 780px;
    color: #475569;
    font-size: 17px;
    line-height: 1.78;
}

.course-reader__modules {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.course-reader__module {
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
}

.course-reader__module-head {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.course-reader__module-head span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.course-reader__module-head strong {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.course-reader__items {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.course-reader__item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 14px;
    width: 100%;
    min-height: 54px;
    padding: 13px 14px;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.course-reader__item:hover {
    border-color: #bfdbfe;
    background: #f8fafc;
}

.course-reader__item-type {
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.course-reader__item strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 850;
}

.course-reader__item-state {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.course-reader__item-state.completed {
    color: #16a34a;
}

.course-reader__resource-list {
    display: grid;
    gap: 10px;
    margin: 16px 0 28px;
}

.course-reader__resource {
    display: grid;
    gap: 5px;
    width: 100%;
    min-height: 58px;
    padding: 15px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.course-reader__resource:hover {
    border-color: #bfdbfe;
    background: #f8fafc;
}

.course-reader__resource strong {
    font-size: 15px;
    line-height: 1.35;
}

.course-reader__resource span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.course-workspace--reader .course-workspace__quiz-panel {
    margin-top: 24px;
}

.course-workspace--reader .lesson-stage__actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 52px;
    padding: 18px 0 0;
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), #ffffff 36%);
}

.course-workspace--reader .lesson-stage__actions .btn,
.course-workspace--reader .course-workspace__next-actions .btn {
    min-height: 44px;
    border-radius: 6px;
    font-weight: 850;
}

.course-workspace--reader .lesson-outline {
    display: block;
    position: sticky;
    top: calc(var(--nav-height) + 64px);
    height: calc(100vh - var(--nav-height) - 64px);
    padding: 44px 22px;
    border-left: 1px solid #e2e8f0;
    background: #ffffff;
    overflow: auto;
}

.course-workspace--reader .lesson-coach {
    position: fixed !important;
    right: 26px !important;
    bottom: 26px !important;
    z-index: 1500;
    width: min(390px, calc(100vw - 32px)) !important;
    min-width: 0;
    pointer-events: none;
}

.course-workspace--reader .lesson-coach__launcher {
    pointer-events: auto;
    min-height: 50px;
    padding: 8px 18px 8px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.course-workspace--reader .lesson-coach__panel {
    pointer-events: auto;
    position: static !important;
    max-height: min(680px, calc(100vh - 112px)) !important;
    border-radius: 12px;
}

@media (max-width: 1320px) {
    .course-workspace--reader .lesson-workspace__grid {
        grid-template-columns: 344px minmax(0, 1fr) !important;
    }

    .course-workspace--reader .lesson-outline {
        display: none;
    }

    .course-workspace--reader .lesson-stage {
        padding-inline: clamp(34px, 5vw, 80px);
    }
}

@media (max-width: 920px) {
    .course-workspace--reader .lesson-workspace__top {
        position: static;
        gap: 14px;
        align-items: flex-start;
        flex-direction: column;
    }

    .course-workspace--reader .lesson-workspace__progress {
        width: 100%;
        min-width: 0;
    }

    .course-workspace--reader .lesson-workspace__grid {
        grid-template-columns: 1fr !important;
    }

    .course-workspace--reader .lesson-rail {
        position: static;
        height: auto;
        max-height: 440px;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .course-workspace--reader .lesson-stage {
        padding: 34px 22px 92px;
    }

    .course-workspace--reader .lesson-stage__card {
        width: 100%;
        max-width: none !important;
    }

    .course-workspace--reader .lesson-stage__header {
        flex-direction: column;
    }

    .course-workspace--reader .lesson-stage__header h1 {
        font-size: 34px;
    }
}

@media (max-width: 640px) {
    .course-workspace--reader .course-reader__next,
    .course-workspace--reader .course-reader__item {
        grid-template-columns: 1fr;
    }

    .course-workspace--reader .lesson-stage__actions {
        justify-content: stretch;
    }

    .course-workspace--reader .lesson-stage__actions .btn,
    .course-workspace--reader .course-workspace__next-actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Final learning workspace polish: one clear reader column plus floating Nia. */
.lesson-workspace--textual .lesson-workspace__grid,
.course-workspace--reader .lesson-workspace__grid {
    grid-template-columns: minmax(280px, 372px) minmax(0, 1fr) !important;
}

.lesson-workspace--textual .lesson-outline,
.course-workspace--reader .lesson-outline {
    display: none !important;
}

.lesson-workspace--textual .lesson-stage,
.course-workspace--reader .lesson-stage {
    padding-inline: clamp(42px, 7vw, 132px);
}

.lesson-workspace--textual .lesson-stage__card,
.course-workspace--reader .lesson-stage__card {
    width: min(100%, 1060px);
    max-width: 1060px !important;
}

.lesson-workspace--textual .lesson-stage__body,
.course-workspace--reader .lesson-stage__body {
    max-width: 920px;
}

.course-workspace--reader .lesson-workspace__toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 0 18px;
}

.course-workspace--reader .lesson-workspace__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.course-workspace--reader .lesson-workspace__tool:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

@media (max-width: 920px) {
    .lesson-workspace--textual .lesson-workspace__grid,
    .course-workspace--reader .lesson-workspace__grid {
        grid-template-columns: 1fr !important;
    }

    .lesson-workspace--textual .lesson-stage,
    .course-workspace--reader .lesson-stage {
        padding-inline: 22px;
    }

    .course-workspace--reader .lesson-workspace__toolbar {
        width: 100%;
        justify-content: flex-start;
        padding: 0;
        overflow-x: auto;
    }
}

/* Learning reader hard override: universal course layout, wide content, floating Nia. */
.lesson-workspace--textual,
.course-workspace--reader {
    background: #f6f8fb;
}

.lesson-workspace--textual .lesson-workspace__grid,
.course-workspace--reader .lesson-workspace__grid {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: minmax(288px, 360px) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: start;
}

.lesson-workspace--textual .lesson-rail,
.course-workspace--reader .lesson-rail {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lesson-workspace--textual .lesson-stage,
.course-workspace--reader .lesson-stage {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(26px, 3.2vw, 48px) clamp(28px, 4vw, 76px) 104px !important;
    box-sizing: border-box;
}

.lesson-workspace--textual .lesson-stage__card,
.course-workspace--reader .lesson-stage__card {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, 0.045) !important;
}

.lesson-workspace--textual .lesson-stage__body,
.course-workspace--reader .lesson-stage__body,
.lesson-workspace--textual .lesson-stage__summary,
.course-workspace--reader .lesson-stage__summary {
    max-width: 980px !important;
}

.lesson-workspace--textual .lesson-stage__header h1,
.course-workspace--reader .lesson-stage__header h1 {
    max-width: 940px !important;
}

.lesson-workspace--textual .lesson-outline,
.course-workspace--reader .lesson-outline {
    display: none !important;
}

.lesson-workspace--textual .lesson-coach,
.course-workspace--reader .lesson-coach {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;
    z-index: 80 !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
}

.lesson-workspace--textual .lesson-coach.is-open,
.course-workspace--reader .lesson-coach.is-open {
    width: min(390px, calc(100vw - 32px)) !important;
}

.lesson-workspace--textual .lesson-coach__launcher,
.course-workspace--reader .lesson-coach__launcher {
    margin-left: auto !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16) !important;
}

.lesson-workspace--textual .lesson-coach__panel,
.course-workspace--reader .lesson-coach__panel {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 12px) !important;
    top: auto !important;
    width: min(390px, calc(100vw - 32px)) !important;
    max-height: min(620px, calc(100vh - 128px)) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
}

@media (max-width: 980px) {
    .lesson-workspace--textual .lesson-workspace__grid,
    .course-workspace--reader .lesson-workspace__grid {
        grid-template-columns: 1fr !important;
    }

    .lesson-workspace--textual .lesson-rail,
    .course-workspace--reader .lesson-rail {
        position: static !important;
        max-height: none !important;
        border-right: 0 !important;
    }

    .lesson-workspace--textual .lesson-stage,
    .course-workspace--reader .lesson-stage {
        padding: 20px 16px 96px !important;
    }
}

/* Final deploy-prep learning polish: compact chrome and focused forms. */
#app:has(> .lesson-workspace--textual),
#app:has(> .course-workspace--reader) {
    background: #ffffff;
}

.lesson-workspace--textual .lesson-workspace__top,
.course-workspace--reader .lesson-workspace__top {
    min-height: 52px !important;
    padding: 7px clamp(20px, 3vw, 44px) !important;
    border-top: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 1px 0 rgba(226, 232, 240, 0.9) !important;
}

.lesson-workspace--textual .lesson-workspace__back,
.course-workspace--reader .lesson-workspace__back {
    min-height: 34px !important;
    padding: 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 14px !important;
}

.lesson-workspace--textual .lesson-workspace__toolbar,
.course-workspace--reader .lesson-workspace__toolbar {
    gap: 8px !important;
}

.lesson-workspace--textual .lesson-workspace__tool,
.course-workspace--reader .lesson-workspace__tool {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    font-size: 13px !important;
}

.lesson-workspace--textual .lesson-workspace__progress,
.course-workspace--reader .lesson-workspace__progress {
    width: min(360px, 28vw) !important;
    min-width: 260px !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.lesson-workspace--textual .lesson-workspace__progress span,
.course-workspace--reader .lesson-workspace__progress span {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.lesson-workspace--textual .lesson-workspace__progress-bar,
.course-workspace--reader .lesson-workspace__progress-bar {
    height: 5px !important;
    margin-top: 5px !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
}

.lesson-workspace--textual .lesson-workspace__grid,
.course-workspace--reader .lesson-workspace__grid {
    grid-template-columns: minmax(292px, 356px) minmax(0, 1fr) !important;
    min-height: calc(100vh - var(--nav-height) - 52px) !important;
}

.lesson-workspace--textual .lesson-rail,
.course-workspace--reader .lesson-rail {
    top: calc(var(--nav-height) + 52px) !important;
    height: calc(100vh - var(--nav-height) - 52px) !important;
}

.lesson-workspace--textual .lesson-stage,
.course-workspace--reader .lesson-stage {
    padding: clamp(22px, 2.8vw, 38px) clamp(24px, 4.8vw, 92px) 104px !important;
}

.lesson-workspace--textual .lesson-stage__card,
.course-workspace--reader .lesson-stage__card {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lesson-workspace--textual .lesson-stage__header,
.course-workspace--reader .lesson-stage__header {
    margin-bottom: 28px !important;
    padding-bottom: 24px !important;
}

.course-workspace--quiz-focus .lesson-stage {
    padding-top: clamp(18px, 2.4vw, 32px) !important;
}

.course-reader__document--quiz-focus {
    max-width: 1040px !important;
}

.course-workspace--quiz-focus .course-workspace__quiz-panel {
    margin-top: 22px !important;
}

.course-workspace--quiz-focus .course-workspace__quiz-panel .analytics-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.055) !important;
}

.course-quiz-focus__header {
    margin-bottom: 20px !important;
}

.course-quiz-focus__header h1 {
    font-size: clamp(34px, 3.2vw, 48px) !important;
}

.course-reader__actions--quiz {
    position: static !important;
    justify-content: flex-start !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
}

@media (max-width: 980px) {
    .lesson-workspace--textual .lesson-workspace__top,
    .course-workspace--reader .lesson-workspace__top {
        position: static !important;
        min-height: auto !important;
        padding: 10px 16px !important;
        gap: 10px !important;
    }

    .lesson-workspace--textual .lesson-workspace__progress,
    .course-workspace--reader .lesson-workspace__progress {
        width: 100% !important;
        min-width: 0 !important;
    }

    .lesson-workspace--textual .lesson-rail,
    .course-workspace--reader .lesson-rail {
        height: auto !important;
    }
}

/* Course enrollment page: Coursera-style public course entry. */
.course-enroll {
    padding-top: 0;
    overflow-x: hidden;
    background: #ffffff;
    color: #0f172a;
}

.course-enroll__band {
    min-height: 618px;
    padding: 0 0 92px;
    background: #eef4ff;
    overflow: hidden;
}

.course-enroll__shell {
    width: min(100%, 1392px);
    margin: 0 auto;
    padding: 0 32px;
}

.course-enroll__breadcrumbs {
    margin: 0;
    padding: 19px 0 18px;
    color: #334155;
    font-size: 14px;
}

.course-enroll__breadcrumbs a {
    color: #1d4ed8;
    font-weight: 650;
}

.course-enroll__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(360px, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 520px;
}

.course-enroll__copy {
    position: relative;
    z-index: 3;
    min-width: 0;
    max-width: 720px;
    padding: 28px 0 48px;
}

.course-enroll__provider {
    display: flex;
    align-items: center;
    min-height: 45px;
    margin-bottom: 34px;
}

.course-enroll__brand-mark {
    display: inline-flex;
    align-items: center;
    min-height: 45px;
    padding: 0 18px;
    border: 1px solid #dbeafe;
    border-radius: 2px;
    background: #ffffff;
    color: #0f172a;
    font-size: 24px;
    font-weight: 850;
    line-height: 1;
}

.course-enroll__hero h1 {
    max-width: 720px;
    margin: 0 0 14px;
    color: #020617;
    font-size: clamp(36px, 4vw, 58px);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.course-enroll__lead {
    max-width: 660px;
    margin: 0;
    color: #020617;
    font-size: 16px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.course-enroll__instructor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    color: #0f172a;
    font-size: 15px;
}

.course-enroll__instructor a {
    color: #0f172a;
    font-weight: 700;
    text-decoration: underline;
}

.course-enroll__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #ffffff;
    color: #2563eb;
    font-size: 15px;
    font-weight: 900;
}

.course-enroll__actions {
    margin-top: 34px;
}

.course-enroll__primary {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(280px, 100%);
    min-height: 64px;
    padding: 11px 22px;
    border: 1px solid #0056d2;
    border-radius: 6px;
    background: #0056d2;
    color: #ffffff;
    font: inherit;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
}

.course-enroll__primary:hover {
    background: #0047b8;
    border-color: #0047b8;
    color: #ffffff;
    text-decoration: none;
}

.course-enroll__primary:disabled {
    cursor: wait;
    opacity: 0.74;
}

.course-enroll__primary span {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.15;
}

.course-enroll__primary small {
    display: block;
    max-width: 100%;
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
}

.course-enroll__trial,
.course-enroll__included,
.course-enroll__plus {
    max-width: 760px;
    margin: 10px 0 0;
    color: #020617;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.course-enroll__included {
    margin-top: 16px;
}

.course-enroll__plus {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.course-enroll__plus strong:first-of-type {
    color: #0056d2;
    font-weight: 900;
}

.course-enroll__text-link {
    color: #020617;
    font-weight: 650;
    text-decoration: underline;
}

.course-enroll__visual {
    position: relative;
    z-index: 1;
    min-height: 500px;
}

.course-enroll__visual img {
    position: absolute;
    right: clamp(40px, 7vw, 118px);
    top: 52%;
    width: min(420px, 36vw);
    max-height: 420px;
    object-fit: contain;
    opacity: 0.16;
    transform: translateY(-50%);
}

.course-enroll__arc {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.course-enroll__arc--large {
    right: 12px;
    top: 80px;
    width: 490px;
    height: 490px;
    border: 72px solid rgba(37, 99, 235, 0.08);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 54% 70%, 54% 100%, 0 100%);
}

.course-enroll__arc--small {
    right: 168px;
    top: 166px;
    width: 245px;
    height: 245px;
    border: 30px solid rgba(37, 99, 235, 0.13);
    clip-path: polygon(0 0, 100% 0, 100% 65%, 60% 65%, 60% 100%, 0 100%);
}

.course-enroll__ask {
    position: absolute;
    right: 0;
    bottom: 106px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 4px 6px 4px 16px;
    border-radius: 999px;
    background: rgba(125, 225, 235, 0.68);
    color: #020617;
    font-size: 13px;
    font-weight: 800;
}

.course-enroll__ask a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border: 2px solid #22d3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #020617;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.course-enroll__ask a:hover {
    border-color: #0891b2;
    text-decoration: none;
}

.course-enroll .course-detail__stats {
    width: min(100%, 1120px);
    margin: -60px auto 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.course-enroll .course-detail__stat {
    min-height: 92px;
    padding: 18px 28px;
    border-right: 1px solid #e2e8f0;
}

.course-enroll .course-detail__stat strong {
    margin: 0 0 2px;
    color: #020617;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.2;
}

.course-enroll .course-detail__stat span {
    color: #020617;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.2;
}

.course-enroll .course-detail__stat small {
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.course-enroll .course-detail__tabs {
    width: min(100%, 1120px);
    margin: 0 auto 20px;
    padding: 0;
    border-bottom: 0;
    gap: 28px;
}

.course-enroll .course-detail__tabs a {
    padding: 14px 0 13px;
    color: #020617;
    font-size: 15px;
    font-weight: 800;
    border-bottom: 3px solid transparent;
}

.course-enroll .course-detail__tabs a.active,
.course-enroll .course-detail__tabs a:hover {
    color: #0056d2;
    border-bottom-color: #0056d2;
    text-decoration: none;
}

.course-enroll .course-detail__section {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 34px 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
    border-radius: 0;
    background: transparent;
}

.course-enroll .course-detail__section h2 {
    color: #020617;
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 850;
    letter-spacing: 0;
}

.course-enroll .course-detail__section-kicker,
.course-enroll .course-detail__module-meta {
    color: #0056d2;
}

.course-enroll .course-detail__outcome,
.course-enroll .course-detail__info-card,
.course-enroll .course-detail__module-card,
.course-enroll .course-detail__empty-card,
.course-enroll .course-detail__review-placeholder {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.course-enroll .course-detail__module-card h3,
.course-enroll .course-detail__info-card strong,
.course-enroll .course-detail__empty-card strong,
.course-enroll .course-detail__review-placeholder strong {
    color: #020617;
}

@media (max-width: 1100px) {
    .course-enroll__hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-bottom: 40px;
    }

    .course-enroll__copy {
        max-width: 820px;
    }

    .course-enroll__visual {
        position: absolute;
        inset: 60px 0 auto auto;
        width: 42vw;
        min-height: 360px;
        opacity: 0.55;
    }

    .course-enroll__ask {
        position: relative;
        right: auto;
        bottom: auto;
        justify-self: start;
        margin-top: 12px;
    }
}

@media (max-width: 760px) {
    .course-enroll__band {
        min-height: 0;
        padding-bottom: 74px;
    }

    .course-enroll__shell {
        width: 100%;
        max-width: 100%;
        padding: 0 18px;
        overflow: hidden;
    }

    .course-enroll__breadcrumbs {
        padding-top: 14px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .course-enroll__provider {
        margin-bottom: 22px;
    }

    .course-enroll__brand-mark {
        min-height: 40px;
        font-size: 21px;
    }

    .course-enroll__hero h1 {
        font-size: clamp(32px, 11vw, 42px);
    }

    .course-enroll__hero,
    .course-enroll__copy,
    .course-enroll__lead,
    .course-enroll__trial,
    .course-enroll__included,
    .course-enroll__plus {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .course-enroll__lead,
    .course-enroll__trial,
    .course-enroll__included,
    .course-enroll__plus {
        word-break: break-word;
    }

    .course-enroll__visual {
        display: none;
    }

    .course-enroll__ask {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        border-radius: 8px;
    }

    .course-enroll__ask a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .course-enroll .course-detail__stats {
        grid-template-columns: 1fr;
        margin-top: -48px;
    }

    .course-enroll .course-detail__stat {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .course-enroll .course-detail__stat:last-child {
        border-bottom: 0;
    }

    .course-enroll .course-detail__tabs {
        gap: 22px;
        overflow-x: auto;
    }

    .course-enroll .course-detail__outcomes,
    .course-enroll .course-detail__info-grid,
    .course-enroll .course-detail__modules {
        grid-template-columns: 1fr;
    }

    .course-enroll .course-detail__section-head {
        flex-direction: column;
    }
}
.admin-course-cover-preview {
    display: grid;
    min-height: 190px;
    overflow: hidden;
    place-items: center;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    text-align: center;
}

.admin-course-cover-preview img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
}

.exm-published-card img {
    width: 100%;
    height: 150px;
    margin: -2px -2px 14px;
    border-radius: 8px 8px 0 0;
    object-fit: cover;
    background: #eff6ff;
}

.course-enroll__visual--contain img,
.course-enroll__visual--wide img {
    object-fit: contain;
}

.course-enroll__visual--custom img {
    width: min(520px, 42vw);
    max-height: 460px;
    opacity: 0.96;
    filter: drop-shadow(0 28px 54px rgba(15, 23, 42, 0.16));
}

.course-enroll__visual--left img {
    right: auto;
    left: clamp(18px, 4vw, 72px);
}

.course-enroll__visual--right img {
    right: clamp(18px, 4vw, 72px);
}

.course-enroll__visual--center img {
    right: clamp(40px, 7vw, 118px);
}

.lesson-reading-figure--small {
    max-width: min(420px, 100%);
}

.lesson-reading-figure--medium {
    max-width: min(680px, 100%);
}

.lesson-reading-figure--wide {
    max-width: min(980px, 100%);
}

.lesson-reading-figure--full {
    max-width: 100%;
}

.lesson-reading-figure--center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.lesson-reading-figure--left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.lesson-reading-figure--right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.lesson-reading-figure--small img {
    max-height: 260px;
}

.lesson-reading-figure--medium img {
    max-height: 360px;
}

.lesson-reading-figure--wide img,
.lesson-reading-figure--full img {
    max-height: 520px;
}

@media (max-width: 760px) {
    .admin-course-cover-preview {
        min-height: 160px;
    }

    .exm-published-card img {
        height: 130px;
    }
}

/* Final learner polish: subscription state, clean avatars, and stable course chrome. */
.site-nav__premium-badge,
.site-nav__premium-cta {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #0b5ed7;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.site-nav__premium-badge {
    padding: 3px 12px 3px 5px;
}

.site-nav__premium-badge img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.site-nav__premium-cta {
    padding: 0 14px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.site-nav__premium-cta:hover,
.site-nav__premium-badge:hover {
    border-color: #2563eb;
    background: #dbeafe;
    text-decoration: none;
}

.site-nav__premium-cta:disabled {
    cursor: wait;
    opacity: 0.72;
}

.site-nav__profile-trigger {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.site-nav__profile-avatar--image,
.site-nav__profile-summary-avatar--image,
.mobile-menu__user-avatar--image,
.lh-top__avatar--image {
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.site-nav__profile-avatar--image img,
.site-nav__profile-summary-avatar--image img,
.mobile-menu__user-avatar--image img,
.lh-top__avatar--image img {
    border-radius: 999px;
    background: transparent;
}

.lh-subscription {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.lh-subscription--premium {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.lh-subscription__mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #0056d2;
}

.lh-subscription__mark img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.lh-subscription__mark svg {
    width: 22px;
    height: 22px;
}

.lh-subscription__copy {
    min-width: 0;
}

.lh-subscription__copy span {
    display: block;
    margin-bottom: 3px;
    color: #0056d2;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lh-subscription__copy strong {
    display: block;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.2;
}

.lh-subscription__copy p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.lh-subscription__actions,
.lh-next-step__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lh-next-step__actions {
    margin-top: 4px;
}

.btn--white {
    border-color: #ffffff;
    background: #ffffff;
    color: #0b5ed7;
}

.btn--ghost-light {
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.learning-home--personal .lh-shell {
    padding-top: 26px;
}

.learning-home--personal .lh-top {
    padding: 22px 24px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.learning-home--personal .lh-subscription {
    border-color: #bfdbfe;
}

.course-enroll {
    padding-top: calc(var(--nav-height) + 12px);
}

.course-enroll__breadcrumbs {
    padding-top: 24px;
    line-height: 1.55;
}

.site-nav,
.site-nav__logo,
.site-nav__logo *,
.site-nav__student-link,
.site-nav__link--quiet,
.course-detail__breadcrumbs,
.course-detail__breadcrumbs a,
.course-enroll__provider,
.course-enroll__brand-mark {
    user-select: none;
}

.site-nav__logo,
.site-nav__logo *,
.site-nav__student-link,
.site-nav__link--quiet,
.course-detail__breadcrumbs a,
.course-enroll__primary,
.course-enroll__text-link,
button,
.btn {
    cursor: pointer;
}

@media (max-width: 1120px) {
    .site-nav__premium-badge span,
    .site-nav__premium-cta {
        font-size: 12px;
    }
}

@media (max-width: 760px) {
    .site-nav__premium-badge span {
        display: none;
    }

    .site-nav__premium-badge {
        width: 40px;
        padding: 3px;
    }

    .site-nav__premium-cta {
        display: none;
    }

    .lh-subscription {
        grid-template-columns: 1fr;
    }

    .course-enroll {
        padding-top: calc(var(--nav-height) + 4px);
    }
}