/* ============================================================
   MentorMe Academy — design system
   Brand tokens pulled live from mentorme.com.
   Display: Playfair Display (serif) · UI/Body: Inter
   Aesthetic: editorial-premium, calm, content-first.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* exact mentorme.com palette */
  --bg:#030F1A; --surface:#0A1929; --card:#0F2338; --card-2:#0C1B2C;
  --ink:#F0FDFA; --dim:#93B4C0; --mute:#5C6273;
  --accent:#2DD4BF; --accent-hover:#5EEAD4; --accent-deep:#0F766E; --accent-glow:#2dd4bf40;
  --amber:#F59E0B; --amber-soft:#FDE68A; --purple:#A855F7;
  --line:rgba(45,212,191,.16); --line-soft:rgba(240,253,250,.07);
  --r:18px; --r-lg:24px;
  --maxw:1180px; --readw:760px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
::selection{background:var(--accent);color:#04221c}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---- ambient canvas: radial teal glow + whisper grid ---- */
.canvas-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -6%,rgba(45,212,191,.14),transparent 60%),
    radial-gradient(700px 500px at 8% 8%,rgba(168,85,247,.07),transparent 55%),
    var(--bg);}
.canvas-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(45,212,191,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%);}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(3,15,26,.72);border-bottom:1px solid var(--line-soft)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.01em;font-size:18px}
.brand img{height:26px;width:auto}
.brand .sep{color:var(--mute);font-weight:400}
.brand .ac{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent-hover)}
.nav .links{display:flex;align-items:center;gap:30px;font-size:14.5px;color:var(--dim)}
.nav .links a{transition:color .2s}.nav .links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;border-radius:100px;
  padding:11px 22px;transition:transform .15s var(--ease),box-shadow .2s,background .2s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg,var(--accent-hover),var(--accent));color:#04221c;
  box-shadow:0 6px 24px -8px var(--accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px -10px var(--accent)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);background:rgba(45,212,191,.06)}

/* ---- hero ---- */
.hero{padding:118px 0 84px;text-align:center}
.hero .eyebrow{justify-content:center;margin-bottom:30px}
.hero .eyebrow::before{display:none}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(48px,7.2vw,94px);line-height:1.02;
  letter-spacing:-.02em;max-width:16ch;margin:0 auto 26px}
.hero h1 em{font-style:italic;color:var(--accent-hover)}
.hero .lede{font-size:clamp(18px,2.1vw,22px);color:var(--dim);max-width:60ch;margin:0 auto 38px;line-height:1.55}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .stats{display:flex;gap:46px;justify-content:center;margin-top:62px;flex-wrap:wrap}
.hero .stat .n{font-family:var(--serif);font-size:40px;font-weight:700;color:var(--ink);line-height:1}
.hero .stat .l{font-size:13px;color:var(--mute);letter-spacing:.04em;margin-top:8px;text-transform:uppercase}

/* section heading */
.shead{max-width:680px;margin:0 0 48px}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{font-family:var(--serif);font-weight:700;font-size:clamp(32px,4.2vw,50px);letter-spacing:-.02em;line-height:1.08;margin:18px 0 16px}
.shead p{font-size:18px;color:var(--dim);line-height:1.6}

/* ---- the learning path (curriculum spine) ---- */
.path{padding:40px 0 96px}
.spine{position:relative;max-width:880px;margin:0 auto;padding-left:0}
.step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:26px;padding:22px 0}
.step:not(:last-child)::after{content:"";position:absolute;left:31px;top:74px;bottom:-22px;width:2px;
  background:linear-gradient(180deg,var(--accent),rgba(45,212,191,.12))}
.step .idx{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:26px;font-weight:700;color:var(--accent-hover);
  background:radial-gradient(circle at 35% 30%,rgba(45,212,191,.18),rgba(15,35,56,.9));
  border:1px solid var(--line);position:relative;z-index:2}
.step .body{padding-top:6px}
.step .k{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.step h3{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.01em;margin:7px 0 8px}
.step p{color:var(--dim);font-size:16px;max-width:60ch}
.step .meta{margin-top:12px;font-size:13px;color:var(--mute);display:flex;gap:16px;flex-wrap:wrap}
.step .meta span{display:inline-flex;align-items:center;gap:6px}
.step a.go{color:var(--accent-hover);font-weight:600;font-size:14.5px;display:inline-flex;gap:7px;margin-top:12px;
  transition:gap .2s}.step a.go:hover{gap:12px}

/* ---- course cards grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.course{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s}
.course:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.5)}
.course .thumb{aspect-ratio:16/9;background:radial-gradient(700px 300px at 50% 0%,rgba(45,212,191,.12),transparent),var(--surface);
  display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line-soft)}
.course .thumb .play{width:56px;height:56px;border-radius:50%;background:rgba(45,212,191,.14);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent-hover)}
.course .thumb .num{position:absolute;top:14px;left:16px;font-family:var(--serif);font-size:15px;color:var(--accent);font-weight:700;letter-spacing:.1em}
.course .c-body{padding:22px 24px 24px}
.course .tag{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.course h3{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.01em;margin:10px 0 9px;line-height:1.18}
.course p{color:var(--dim);font-size:15px;line-height:1.55}
.course .foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;
  align-items:center;font-size:13px;color:var(--mute)}
.course .foot .dur{display:inline-flex;align-items:center;gap:7px}

/* ---- tracks (pillars) ---- */
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.track{padding:28px 26px;border-radius:var(--r);border:1px solid var(--line-soft);background:rgba(10,25,41,.5)}
.track .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(135deg,rgba(45,212,191,.16),rgba(45,212,191,.04));border:1px solid var(--line);margin-bottom:16px}
.track h4{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:7px}
.track p{font-size:14.5px;color:var(--dim);line-height:1.55}

/* ---- gated / membership band ---- */
.band{margin:90px 0;padding:60px 52px;border-radius:var(--r-lg);text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(45,212,191,.13),rgba(168,85,247,.08));border:1px solid var(--line)}
.band h2{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.band p{color:var(--dim);font-size:18px;max-width:56ch;margin:0 auto 30px}
.lock{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--amber);
  border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08);border-radius:100px;padding:6px 15px;margin-bottom:22px}

/* ---- footer ---- */
.foot-main{border-top:1px solid var(--line-soft);padding:46px 0;margin-top:60px;color:var(--mute);font-size:14px}
.foot-main .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.foot-main .links{display:flex;gap:22px}.foot-main a:hover{color:var(--dim)}

/* ============================================================
   LESSON READER
   ============================================================ */
.lesson{display:grid;grid-template-columns:280px 1fr;gap:0;max-width:1240px;margin:0 auto;min-height:calc(100vh - 68px)}
.lsidebar{border-right:1px solid var(--line-soft);padding:34px 26px;position:sticky;top:68px;height:calc(100vh - 68px);overflow-y:auto}
.lsidebar .back{font-size:13px;color:var(--mute);display:inline-flex;gap:7px;margin-bottom:24px}
.lsidebar .back:hover{color:var(--accent)}
.lsidebar .ttl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:16px}
.lnav{list-style:none;display:flex;flex-direction:column;gap:2px}
.lnav a{display:flex;gap:12px;padding:10px 12px;border-radius:11px;font-size:14.5px;color:var(--dim);transition:background .15s,color .15s}
.lnav a:hover{background:rgba(45,212,191,.06);color:var(--ink)}
.lnav a.active{background:rgba(45,212,191,.1);color:var(--ink)}
.lnav a .n{font-family:var(--serif);color:var(--accent);font-size:14px;width:18px;flex:0 0 auto}
.lnav a.active .n{color:var(--accent-hover)}
.lprogress{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft)}
.lprogress .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.lprogress .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-hover),var(--accent))}
.lprogress .lab{font-size:12px;color:var(--mute);margin-top:9px}

.reader{padding:54px clamp(28px,6vw,90px) 120px;max-width:calc(var(--readw) + 180px)}
.reader .crumb{font-size:13px;color:var(--mute);margin-bottom:18px}
.reader .crumb b{color:var(--accent)}
.reader h1{font-family:var(--serif);font-weight:700;font-size:clamp(36px,5vw,58px);line-height:1.05;letter-spacing:-.02em;margin-bottom:14px}
.reader h1 em{font-style:italic;color:var(--accent-hover)}
.reader .sub{font-size:20px;color:var(--dim);line-height:1.5;max-width:var(--readw);margin-bottom:14px}
.reader .lmeta{font-size:13px;color:var(--mute);letter-spacing:.03em;margin-bottom:34px;display:flex;gap:18px;flex-wrap:wrap}
.reader video{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);background:#000;margin:8px 0 44px;box-shadow:0 30px 80px -40px #000}
.prose{max-width:var(--readw);font-size:17.5px;line-height:1.72}
.prose h2{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:-.01em;margin:48px 0 14px;padding-top:10px}
.prose h3{font-size:18px;font-weight:700;color:var(--accent-hover);margin:28px 0 8px}
.prose p{margin:14px 0;color:#DCEBE8}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{margin:14px 0;padding-left:24px}.prose li{margin:9px 0;color:#DCEBE8}
.prose em{color:var(--dim);font-style:italic}
.callout{border-left:3px solid var(--accent);background:rgba(45,212,191,.06);border-radius:0 14px 14px 0;padding:18px 22px;margin:26px 0;font-size:16px;color:var(--dim)}
.callout b{color:var(--accent-hover)}
.callout.amber{border-color:var(--amber);background:rgba(245,158,11,.07);color:var(--amber-soft)}
.callout.purple{border-color:var(--purple);background:rgba(168,85,247,.08);color:#D6BCFA}
.prompt{position:relative;background:#06131F;border:1px solid var(--line);border-radius:16px;padding:22px;margin:24px 0;
  font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:13.5px;line-height:1.65;color:#CDE7E2;white-space:pre-wrap;overflow-x:auto}
.copybtn{position:absolute;top:13px;right:13px;background:var(--accent);color:#04221c;border:0;border-radius:9px;padding:7px 13px;
  font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.prose th,.prose td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--accent);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.prose .kd{color:var(--accent-hover);font-weight:700}
.lpager{display:flex;justify-content:space-between;gap:14px;margin-top:54px;border-top:1px solid var(--line-soft);padding-top:26px;max-width:var(--readw)}
.lpager a{flex:1;border:1px solid var(--line);border-radius:14px;padding:15px 18px;font-size:14.5px;color:var(--dim);transition:border-color .2s,color .2s}
.lpager a:hover{border-color:var(--accent);color:var(--ink)}
.lpager a.next{text-align:right}
.lpager .l{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}

@media(max-width:880px){
  .lesson{grid-template-columns:1fr}.lsidebar{display:none}
  .nav .links{display:none}
  .step{grid-template-columns:48px 1fr;gap:18px}.step .idx{width:48px;height:48px;font-size:21px}
  .step:not(:last-child)::after{left:23px;top:58px}
}