/* /learn pages. LaTeX typography (Computer Modern, self-hosted) on the dark
   site; navigation and UI in the site's sans-serif. Mobile first. */
@font-face{font-family:'CMU Serif';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cmu/cmunrm.8da2bd09fcb4.woff2") format('woff2')}
@font-face{font-family:'CMU Serif';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/cmu/cmunbx.a8b7291ecb05.woff2") format('woff2')}
@font-face{font-family:'CMU Serif';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cmu/cmunti.61953bc21f78.woff2") format('woff2')}
@font-face{font-family:'CMU Serif';font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/cmu/cmunbi.82a0a9c06b54.woff2") format('woff2')}
:root{--bg:#020617;--card:rgba(255,255,255,.035);--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
--txt:#d4d8e0;--txt2:#9aa3b5;--txt3:#6c7590;--hi:#f1f3f7;--accent:#8B7CFF;--accent2:#3ECF8E;--link:#a9b8ff;
--serif:'CMU Serif','Latin Modern Roman',Georgia,serif;--sans:Inter,system-ui,sans-serif}
.learn-page main{padding:28px 0 72px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}
/* header: Learn stands out */
.ct-nav a.ct-nav-learn{color:#fff;font-weight:600;position:relative}
.ct-nav a.ct-nav-learn::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,#8B7CFF,#3ECF8E)}
.ct-free{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0b1020;background:linear-gradient(90deg,#8B7CFF,#3ECF8E);vertical-align:2px}
/* breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 28px;padding:0;font:500 13.5px/1.4 var(--sans);color:var(--txt3)}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--txt3)}
.crumbs a{color:var(--txt2);text-decoration:none}.crumbs a:hover{color:#fff}
.crumbs li[aria-current]{color:var(--txt)}
/* hero */
.kicker{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin:0 0 14px}
.lhero h1,.mhead h1{font:600 46px/1.1 'Space Grotesk',var(--sans);color:var(--hi);margin:0 0 16px;letter-spacing:-.01em}
.lede{font:400 19px/1.6 var(--sans);color:var(--txt2);max-width:720px;margin:0 0 26px}
.lhero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;padding:12px 20px;border-radius:10px;font:600 15px var(--sans);text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#7a6af0}
.btn-ghost{border:1px solid var(--line2);color:var(--txt)}.btn-ghost:hover{border-color:var(--accent);color:#fff}
.lhero-stats{font:400 14px var(--sans);color:var(--txt3);margin:0}.lhero-stats b{color:var(--txt)}
.lhero{padding:8px 0 30px;border-bottom:1px solid var(--line);margin-bottom:28px}
/* search */
.find input{width:100%;max-width:520px;padding:12px 16px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:#fff;font:400 15px var(--sans);margin-bottom:26px}
.find input:focus{outline:none;border-color:var(--accent)}
/* module grid */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:56px}
.mcard{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;transition:border-color .15s,transform .15s}
.mcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.mno{font:600 12px var(--sans);color:var(--accent);letter-spacing:.08em}
.mtitle{font:600 18px/1.3 'Space Grotesk',var(--sans);color:var(--hi)}
.mdesc{font:400 14px/1.5 var(--sans);color:var(--txt2);flex:1}
.mmeta{display:flex;align-items:center;gap:10px;font:500 12.5px var(--sans);color:var(--txt3);margin-top:6px}
.mbar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}.mbar i{display:block;height:100%;background:linear-gradient(90deg,#8B7CFF,#3ECF8E)}
/* curriculum lists */
.section-title{font:600 28px 'Space Grotesk',var(--sans);color:var(--hi);margin:0 0 18px}
.curriculum{columns:2 440px;column-gap:40px}
.mlist{break-inside:avoid;margin:0 0 30px}
.mlist h2{display:flex;align-items:baseline;gap:10px;font:600 19px 'Space Grotesk',var(--sans);margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mlist h2 a{color:var(--hi);text-decoration:none}.mlist h2 a:hover{color:var(--accent)}
.lessons{list-style:none;margin:0;padding:0}
.lrow a,.lrow.is-planned{display:flex;gap:12px;padding:7px 8px;border-radius:8px;text-decoration:none}
.lrow a:hover{background:rgba(139,124,255,.1)}
.lnum{flex:0 0 22px;font:500 13px/1.6 var(--sans);color:var(--txt3);text-align:right}
.ltxt{display:flex;flex-direction:column}
.ltitle{font:500 15px/1.5 var(--sans);color:var(--txt)}
.lrow a .ltitle{color:var(--hi)}
.lsum{font:400 13.5px/1.45 var(--sans);color:var(--txt2)}
.lsoon{font:500 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.lrow.is-planned .ltitle{color:var(--txt3)}
.lessons.big .lrow a,.lessons.big .lrow.is-planned{padding:12px 12px}
.lessons.big .ltitle{font-size:17px}
.lessons.big .lnum{font-size:15px;flex-basis:28px}
.lessons.big{border-top:1px solid var(--line)}
.lessons.big .lrow{border-bottom:1px solid var(--line)}
/* module page */
.mhead{padding-bottom:26px}
.mintro{font:400 16px/1.65 var(--sans);color:var(--txt);max-width:720px;margin:0 0 16px}
/* pager */
.pager{display:flex;gap:14px;margin:40px 0 0}
.pager a{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;color:var(--hi);font:600 16px 'Space Grotesk',var(--sans);text-decoration:none}
.pager a span{font:500 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.pager a:hover{border-color:var(--accent)}
.pager .pager-next{text-align:right}
.pager .is-planned{color:var(--txt3);pointer-events:none}
/* lesson layout */
.lesson-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.lside{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;padding-right:6px}
.lside summary{font:600 15px 'Space Grotesk',var(--sans);color:var(--hi);cursor:pointer;padding:6px 8px;list-style:none}
.lside summary span{color:var(--txt3);font:400 13px var(--sans)}
.lside summary::-webkit-details-marker{display:none}
.lessons.small .ltitle{font-size:13.5px}.lessons.small .lnum{font-size:12px}
.lessons.small .lrow a,.lessons.small .lrow.is-planned{padding:5px 8px}
.lessons.small .lsum,.lessons.small .lsoon{display:none}
.lrow.is-current a{background:rgba(139,124,255,.16)}.lrow.is-current .ltitle{color:#fff}
.lrow.is-current a{box-shadow:inset 2px 0 0 var(--accent)}
.allmods{display:block;margin:12px 8px;font:500 13px var(--sans);color:var(--link);text-decoration:none}
/* lesson article: LaTeX-like typography on dark */
.lesson{max-width:720px;font-family:var(--serif);color:var(--txt)}
.lesson .kicker{font-family:var(--sans)}
.lesson h1{font:400 38px/1.2 var(--serif);color:var(--hi);margin:0 0 14px}
.byline{font:400 16px/1.5 var(--serif);color:var(--txt);margin:0 0 26px}
.bname{font-variant:small-caps;letter-spacing:.03em;color:var(--hi)}
.bmeta{color:var(--txt3);font-size:14.5px}
.summary{border-left:3px solid var(--accent2);background:rgba(62,207,142,.06);padding:14px 18px;margin:0 0 30px;font:400 17px/1.6 var(--serif);color:var(--txt)}
.summary b{color:var(--hi)}
.body{counter-reset:sec fig;font-size:18.4px;line-height:1.65;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.body p{margin:0 0 .9em;color:var(--txt)}
.body p+p{text-indent:1.5em}
.body h2{counter-increment:sec;font:700 21px/1.3 var(--serif);color:var(--hi);margin:2em 0 .7em;text-align:left}
.body h2::before{content:counter(sec) "\2003"}
.body h3{font:700 18px var(--serif);color:var(--hi);margin:1.5em 0 .5em}
.body a{color:var(--link);text-decoration:none}.body a:hover{text-decoration:underline}
.body strong{color:var(--hi)}
.body ul,.body ol{padding-left:1.6em}.body li{margin:.35em 0}
.body figure{margin:1.8em 0 1.6em}
.body figure img{display:block;max-width:100%;height:auto;margin:0 auto;border:1px solid var(--line2)}
.body figcaption{counter-increment:fig;margin:.7em 1.5em 0;font-size:15.5px;line-height:1.45;text-align:left;hyphens:none}
.body figcaption::before{content:"Figure " counter(fig) ". ";font-weight:700;color:var(--hi)}
.body table{margin:1.4em auto 1.6em;border-collapse:collapse;border-top:1.5px solid #c9ced8;border-bottom:1.5px solid #c9ced8;font-variant-numeric:lining-nums tabular-nums}
.body th,.body td{padding:5px 14px;color:var(--txt);text-align:left;white-space:nowrap}
.body th{font-weight:400;border-bottom:.8px solid #c9ced8}
.body img{max-width:100%;height:auto}
.seealso{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--sans)}
.seealso h2{font:600 15px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--txt2);margin:0 0 8px}
.seealso ul{margin:0 0 22px;padding-left:1.2em}.seealso a{color:var(--link);text-decoration:none;font-size:16px}
.cta-levels{margin:30px 0 0;padding:16px 18px;border-radius:12px;border:1px solid rgba(139,124,255,.35);background:rgba(139,124,255,.08);font:500 15px var(--sans);color:var(--txt)}
.cta-levels a{color:#fff;font-weight:600}
.disclaimer{font:400 13px var(--sans);color:var(--txt3);margin-top:18px}
@media (max-width:900px){
 .lesson-grid{grid-template-columns:1fr;gap:18px}
 .lside{position:static;max-height:none;border:1px solid var(--line);border-radius:12px;padding:6px}
 .lside details:not([open]) summary::after{content:" ▸"}
 .lhero h1,.mhead h1{font-size:34px}
 .lesson h1{font-size:30px}
 .body{text-align:left;font-size:17.5px}
 .pager{flex-direction:column}
 .body table{display:block;overflow-x:auto}
}

.counter{max-width:520px;margin-top:6px}
.counter-num{font:500 15px var(--sans);color:var(--txt2);margin-bottom:8px}
.counter-num b{font:600 26px 'Space Grotesk',var(--sans);color:var(--hi);margin-right:2px}
.counter-bar{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.counter-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#8B7CFF,#3ECF8E)}
.counter-note{font:400 13px var(--sans);color:var(--txt3);margin-top:8px}
.track{grid-column:1/-1;font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin:18px 0 0}
.curriculum .track-wide{column-span:all;margin:10px 0 18px}
.lmeta{display:flex;gap:8px;align-items:center;margin-top:2px}
.lfmt{font:600 10.5px var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--txt2)}
.lfmt-how-to{color:#8fd9b6;border-color:rgba(62,207,142,.35)}
.lfmt-practice{color:#ffcf85;border-color:rgba(255,196,107,.35)}
.lfmt-example{color:#b9b0ff;border-color:rgba(139,124,255,.4)}
.lfmt-where-to-find{color:#8ec5ff;border-color:rgba(100,170,255,.35)}
.lfmt-market-read{color:#ff9fb0;border-color:rgba(255,120,150,.35)}
.lessons.small .lmeta{display:none}
/* progress + sign-up prompts */
.me-card{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px;padding:18px 20px;border-radius:14px;border:1px solid rgba(139,124,255,.35);background:linear-gradient(135deg,rgba(139,124,255,.12),rgba(62,207,142,.06))}
.me-card>div{flex:1 1 320px}
.me-card .counter-bar{margin-top:10px;max-width:420px}
.me-hi{font:600 18px 'Space Grotesk',var(--sans);color:var(--hi);margin:0 0 4px}
.me-sub{font:400 14.5px/1.5 var(--sans);color:var(--txt2);margin:0}.me-sub b{color:var(--txt)}
.me-login{font:500 14px var(--sans);color:var(--txt2);text-decoration:none}.me-login:hover{color:#fff}
.lp-card{margin:40px 0 0;padding:20px;border-radius:14px;border:1px solid var(--line2);background:var(--card);font-family:var(--sans)}
.lp-btn{padding:12px 20px;border-radius:10px;border:1px solid var(--accent2);background:transparent;color:#8fd9b6;font:600 15px var(--sans);cursor:pointer}
.lp-btn:hover{background:rgba(62,207,142,.1)}
.lp-btn.is-done{background:rgba(62,207,142,.16);color:#fff;border-color:rgba(62,207,142,.6)}
.lp-note{margin:12px 0 0;font:400 14px var(--sans);color:var(--txt2)}.lp-note a{color:var(--link)}
.lp-join{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.lp-join p{flex:1 1 100%;margin:0;font:400 15px/1.55 var(--sans);color:var(--txt)}.lp-join b{color:var(--hi)}
.lrow.is-done .lnum{color:transparent;position:relative}
.lrow.is-done .lnum::after{content:"✓";position:absolute;right:0;color:var(--accent2);font-weight:700}
.seealso,.seealso h2,.seealso ul{text-align:left}
.notify{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding-top:12px;border-top:1px solid var(--line);font:500 13.5px var(--sans);color:var(--txt2)}
.notify label,.optin{display:inline-flex;gap:6px;align-items:center;color:var(--txt);cursor:pointer}
.optin{flex:1 1 100%;font:400 14px var(--sans);color:var(--txt2)}
.notify input,.optin input{accent-color:#8B7CFF}
.me-card>.notify{flex:1 1 100%}

/* formulas (MathML) and code */
.body math{font-family:var(--serif);font-size:1.05em}
.body .formula{margin:1.2em 0;overflow-x:auto;text-align:center;text-indent:0}
.body pre{overflow-x:auto;background:rgba(255,255,255,.05);padding:14px 16px;border-radius:8px;font-size:14px;line-height:1.5;text-align:left;hyphens:none}
.body code{font-size:.9em}
.body blockquote{margin:1.2em 2em;color:var(--txt);border-left:2px solid var(--line2);padding-left:14px}
.staff-banner{margin:0 0 22px;padding:12px 16px;border-radius:10px;font:500 14px var(--sans);color:#FFC46B;background:rgba(255,196,107,.08);border:1px solid rgba(255,196,107,.25)}
.newsletter{margin-top:22px;padding:16px 18px;border-radius:12px;border:1px dashed var(--line2);font:400 14px var(--sans);color:var(--txt2)}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 26px;font-family:var(--sans)}
.case-facts div{padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.case-facts span{display:block;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--txt3)}
.case-facts b{font:600 15px var(--sans);color:var(--hi)}
.tag-planned{display:inline-block;padding:2px 9px;border-radius:999px;font:600 11px var(--sans);color:#8fd9b6;border:1px solid rgba(62,207,142,.4)}
.tag-after{color:#ffcf85;border-color:rgba(255,196,107,.4)}
.byline a.bname{text-decoration:none;color:var(--hi)}.byline a.bname:hover{text-decoration:underline}
/* Selected text must stay readable on every grey and white tone. */
.learn-page ::selection{background:rgba(139,124,255,.55);color:#fff}
.learn-page ::-moz-selection{background:rgba(139,124,255,.55);color:#fff}