@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari:wght@400;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   FIRST LIGHT — the theme.

   It used to be midnight. Three reviewers said the same thing: dark,
   unwelcoming, nothing like Coursera. They were right — and the fix is not
   "make it grey". A gurukula begins at dawn, not at midnight. So the site now
   opens on paper and first light, and the only dark surface left is the
   recitation player, where darkness is the point.

   Five colours, each with one job:
     paper    #FCF7EF   warm ivory. the ground.
     indigo   #22306B   the ink. headings, links. Indian indigo, not black.
     sindoor  #C0451B   the ONLY call-to-action colour, so it always means "act".
     marigold #E8A317   garland gold. ratings, badges.
     leaf     #2C6A52   free, complete, safe.

   The variable NAMES are deliberately unchanged: all 13 pages and their inline
   styles keep working, and the entire site re-skins from this one file.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#FCF7EF; --panel:#FFFFFF; --panel-2:#F7F0E3; --panel-3:#FAF5EB;
  --line:#E7DBC7; --line-2:#D2BE9F;
  --indigo:#22306B; --sindoor:#C0451B; --marigold:#E8A317; --leaf:#2C6A52;
  --ember:#C0451B;                    /* primary button = sindoor */
  --gold:#A8720A;                     /* gold that is READABLE as text on paper */
  --rose:#8A4B6B; --violet:#5A52A8;
  --parchment:#141B3B;                /* headings — deepest indigo */
  --text:#2E3550; --muted:#6B6555; --faint:#8D8676;
  --ok:#2C6A52; --ok-line:#8FC0A9;
  --sans:'Inter',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --deva:'Noto Serif Devanagari','Fraunces',serif;
  --shadow:0 1px 2px rgba(20,27,59,.05), 0 8px 24px -12px rgba(20,27,59,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}                 /* mobile: never let a stray wide child force sideways scroll */
body{background:var(--ink);color:var(--text);font-family:var(--sans);line-height:1.65;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Media and wide content never blow past the viewport on a phone (owner: mobile compat).
   Text blocks scroll inside themselves instead of stretching the page. */
img,svg,video{max-width:100%;height:auto}
iframe{max-width:100%}
pre{max-width:100%;overflow-x:auto}
table{max-width:100%}
@media(max-width:640px){
  .wrap{padding:0 14px}
  h1{font-size:clamp(26px,7vw,40px)}
  .doc{padding-left:0;padding-right:0}
}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* header */
header{border-bottom:1px solid var(--line);background:rgba(252,247,239,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.hbar{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--parchment);white-space:nowrap}
.logo span{color:var(--sindoor)}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;background:#fff;border:1px solid var(--line-2);border-radius:22px;
  padding:8px 16px;color:var(--text);font-family:inherit;font-size:14px}
.search input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(34,48,107,.09)}
.hnav{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:14px;color:var(--muted)}
.hnav a:hover{color:var(--indigo)}
/* language hint — a small rounded pill in the header that explains how to use
   the browser's own translation (the Google widget it replaced is deprecated). */
.vslang-hint{font-family:inherit;font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--line-2);
  border-radius:20px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1}
.vslang-hint:hover{border-color:var(--indigo);color:var(--parchment)}
.vslang-hint:focus-visible{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(34,48,107,.09)}
@media(max-width:760px){.vslang-hint span{display:none}.vslang-hint{padding:6px 9px}}
.vslang-pop{position:absolute;z-index:60;width:300px;max-width:calc(100vw - 20px);
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;
  box-shadow:0 18px 48px -18px rgba(20,27,59,.45),0 2px 8px rgba(20,27,59,.12);
  font-size:13px;color:var(--text);animation:pcIn .14s ease}
.vslang-pop b{font-family:var(--serif);font-size:15px;color:var(--parchment)}
.vslang-pop p{color:var(--muted);margin:6px 0 8px;font-size:12.5px;line-height:1.5}
.vslang-pop ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.vslang-pop li{font-size:12.5px;line-height:1.5}
.vslang-pop li b{font-family:inherit;font-size:12.5px;color:var(--parchment)}
.vslang-note{display:block;margin-top:10px;font-size:11px;color:var(--faint);border-top:1px solid var(--line);padding-top:8px}
.avatar{width:31px;height:31px;border-radius:50%;background:var(--indigo);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.bell{position:relative}
.dot{position:absolute;top:-3px;right:-5px;background:var(--sindoor);color:#fff;font-size:10px;
  min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* stream nav */
.streams{border-bottom:1px solid var(--line);background:#fff;overflow-x:auto}
.streams .wrap{display:flex;gap:20px;padding-top:9px;padding-bottom:9px;white-space:nowrap}
.streams a{font-size:13px;color:var(--muted);padding-bottom:3px;border-bottom:2px solid transparent;font-weight:500}
.streams a:hover{color:var(--parchment)}
.streams a.on{color:var(--sindoor);border-bottom-color:var(--sindoor)}

h1{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--parchment);margin:26px 0 6px;line-height:1.15;letter-spacing:-.015em}
h2{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--parchment);margin:24px 0 12px;letter-spacing:-.01em}
h3{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:18px 0 8px;font-weight:600}
.sub{color:var(--muted);margin-bottom:20px}
.deva{font-family:var(--deva);line-height:2;color:var(--parchment)}
.iast{font-family:var(--serif);font-style:italic;color:var(--rose)}
.muted{color:var(--muted);font-size:13px}
.faint{color:var(--faint);font-size:12px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:12px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{margin-left:auto}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

/* ── the course card ───────────────────────────────────────────────────────
   It now carries a PICTURE, a rating, a price and a promise. Until today the
   "thumbnail" was a coloured square with a letter in it — no course on this
   platform had ever had an image. No colour scheme fixes that. ───────────── */
.ccard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.ccard:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 12px 28px -14px rgba(20,27,59,.28)}
.thumb{height:150px;display:flex;align-items:center;justify-content:center;font-family:var(--deva);font-size:38px;
  position:relative;overflow:hidden;background:var(--panel-2)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .tag{position:absolute;left:10px;top:10px;background:rgba(20,27,59,.86);color:#fff;font-size:10px;
  font-weight:700;letter-spacing:.5px;padding:4px 9px;border-radius:20px}
.ccard .cb{padding:14px;flex:1;display:flex;flex-direction:column}
.ctitle{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--parchment);line-height:1.3;margin-bottom:5px}
.stars{color:var(--marigold);font-size:12px;letter-spacing:.5px}
.rate-n{font-weight:700;color:var(--gold);font-size:12px}
.price{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--parchment)}
.was-price{font-size:12.5px;color:var(--faint);text-decoration:line-through}
.free-tag{color:var(--leaf);font-weight:700;font-size:12px}

/* pills */
.pill{display:inline-block;font-size:10px;padding:3px 9px;border-radius:20px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--muted);letter-spacing:.5px}
.pill.gold{border-color:var(--marigold);color:#7A5405;background:#FDF2DA}
.pill.warn{border-color:var(--sindoor);color:var(--sindoor);background:#FBEDE8}
.pill.ok{border-color:var(--ok-line);color:var(--leaf);background:#E9F4EE}
.pill.house{border-color:#C9AEBE;color:var(--rose);background:#F9EEF3}
.pill.on{border-color:var(--sindoor);color:var(--sindoor);background:#FBEDE8}

label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;font-weight:500}
input,select,textarea{width:100%;background:#fff;border:1px solid var(--line-2);color:var(--text);
  padding:10px 12px;border-radius:8px;font-family:inherit;font-size:14px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(34,48,107,.09)}
textarea.deva-in{font-family:var(--deva);font-size:17px;line-height:2}

button,.btn{background:var(--sindoor);color:#fff;border:0;padding:10px 18px;border-radius:8px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-block;text-align:center;transition:background .12s ease}
button:hover{background:#A93A15}
button:disabled{background:#E4DACA;color:#9A9383;cursor:not-allowed}
.btn-ghost{background:#fff;border:1px solid var(--line-2);color:var(--parchment)}
.btn-ink{background:var(--indigo)}
.btn-ink:hover{background:#1A2555}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--indigo)}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-full{width:100%}

.msg{padding:11px 14px;border-radius:7px;margin:12px 0;font-size:13px;display:none}
.msg.show{display:block}
.msg.err{background:#FBEDE8;border:1px solid #E2B5A4;color:#8E2F10}
.msg.ok{background:#E9F4EE;border:1px solid var(--ok-line);color:#1F5540}

/* progress */
.bar{height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.bar i{display:block;height:5px;background:var(--leaf);border-radius:3px}

/* curriculum */
.sec{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:8px;background:#fff}
.sechead{background:var(--panel-2);padding:11px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:600;color:var(--parchment)}
.lrow{padding:9px 13px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.lrow:hover{background:var(--panel-3)}
.lrow.on{background:#FBEDE8;color:var(--sindoor);font-weight:600}
.lrow.done{color:var(--leaf)}

/* bhasya stack */
.verse{background:var(--panel-3);border:1px solid var(--line);border-left:3px solid var(--marigold);
  padding:22px;margin:16px 0;text-align:center}
.verse .deva{font-size:20px}
.lensbar{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 12px}
.lenstab{padding:7px 14px;border-radius:20px;border:1px solid var(--line-2);background:#fff;
  color:var(--muted);font-size:12px;cursor:pointer;font-weight:600}
.lenstab.on{border-color:var(--indigo);color:#fff;background:var(--indigo)}
.lens{background:#fff;border:1px solid var(--line);border-left:3px solid var(--indigo);padding:15px 17px;margin-bottom:8px}
.lens .who{font-family:var(--serif);color:var(--indigo);font-weight:600;font-size:15px}
.lens .when{font-size:11px;color:var(--muted);margin-bottom:7px}
.samvada{background:#F2F0FA;border:1px solid #D6D1EE;border-left:3px solid var(--violet);padding:15px 17px;margin-top:12px}
.samvada h3{color:var(--violet);margin-top:0}

/* player */
.player{display:grid;grid-template-columns:1fr 280px;gap:18px;align-items:start}
.stage{background:#12100E;border-radius:10px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--gold)}
.side{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;position:sticky;top:120px;max-height:80vh;overflow-y:auto}
.tabs{display:flex;gap:6px;margin:12px 0;flex-wrap:wrap}
.tab{padding:7px 13px;border-radius:8px;border:1px solid var(--line-2);color:var(--muted);font-size:12px;cursor:pointer;background:#fff;font-weight:600}
.tab.on{border-color:var(--indigo);color:#fff;background:var(--indigo)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.stat b{display:block;font-family:var(--serif);font-size:24px;color:var(--parchment);font-weight:600}
.stat span{font-size:11px;color:var(--muted)}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
footer{border-top:1px solid var(--line);margin-top:60px;padding:28px 0;color:var(--faint);font-size:12px;background:#fff}
@media(max-width:820px){.player{grid-template-columns:1fr}.side{position:static;max-height:none}}

/* promo banners */
.promos{display:flex;gap:12px;overflow-x:auto;padding:4px 0 10px;margin-bottom:6px}
.promo{min-width:240px;flex:1;border-radius:12px;padding:18px;cursor:pointer;border:1px solid var(--line);position:relative;overflow:hidden;background:#fff}
.promo:hover{border-color:var(--marigold)}
.promo .g{position:absolute;right:10px;top:2px;font-family:var(--deva);font-size:56px;opacity:.10;color:var(--indigo)}
.promo b{display:block;font-family:var(--serif);font-size:18px;margin-bottom:4px;color:var(--parchment)}
.promo p{font-size:12px;line-height:1.55;color:var(--muted);position:relative}
.promo .c{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--sindoor)}
.hot{background:var(--sindoor);color:#fff;font-size:9px;padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:2px;font-weight:700}

/* live classes */
.live{background:#fff;border:1px solid var(--line);border-left:3px solid var(--sindoor);border-radius:0;padding:14px 16px;margin-bottom:8px}
.live.now{border-left-color:var(--leaf);background:#F0F7F3}
.dotlive{width:7px;height:7px;border-radius:50%;background:var(--sindoor);display:inline-block;margin-right:6px}
.dotlive.on{background:var(--leaf);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* policy pages */
.doc{max-width:760px}
.doc h2{margin-top:26px}
.doc p{margin:10px 0}
.doc strong{color:var(--parchment)}

/* brand lockup */
.brand{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.byline{font-size:9.5px;color:var(--muted);letter-spacing:.2px}
.byline-foot{font-size:11px;color:var(--muted)}
@media(max-width:640px){.byline{display:none}}

/* share bar */
.share{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0;font-size:12px}
.share a{color:var(--indigo);font-weight:600}
.share a:hover{text-decoration:underline}

/* analytics dashboard */
.funnel-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.funnel-bar{height:26px;background:var(--indigo);border-radius:4px;min-width:2px;display:flex;align-items:center;padding:0 8px;color:#fff;font-size:11px;font-weight:600}
.spark{display:flex;align-items:flex-end;gap:2px;height:56px}
.spark i{flex:1;background:var(--panel-2);border-radius:1px 1px 0 0;min-height:1px}
.spark i.hi{background:var(--marigold)}
table.an{width:100%;border-collapse:collapse;font-size:13px}
table.an th{text-align:left;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:7px 8px;border-bottom:1px solid var(--line)}
table.an td{padding:8px;border-bottom:1px solid var(--line)}

/* consent bar */
.consent{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--marigold);z-index:100;padding:16px 20px;box-shadow:0 -8px 30px -18px rgba(20,27,59,.4)}
.consent-in{max-width:1180px;margin:0 auto;display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.consent-in>div:first-child{flex:1;min-width:280px}
.consent b{color:var(--parchment)}
.consent p{font-size:12px;color:var(--muted);margin:6px 0 10px;line-height:1.6}
.ck{display:block;font-size:12px;color:var(--text);margin:5px 0;cursor:pointer}
.ck input{width:auto;margin-right:8px}
.consent-btns{display:flex;flex-direction:column;gap:7px;min-width:190px}
.consent-btns a{font-size:11px;text-align:center}

/* imported rich content (in-house courses only) */
.rich{line-height:1.75}
.rich h2,.rich h3,.rich h4{font-family:var(--serif);color:var(--parchment);margin:18px 0 8px}
.rich p{margin:10px 0}
.rich img,.rich svg{max-width:100%;height:auto;border-radius:8px;margin:12px 0}
.rich table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.rich th,.rich td{border:1px solid var(--line);padding:8px;text-align:left}
.rich th{background:var(--panel-2);color:var(--muted)}
.rich blockquote{border-left:3px solid var(--marigold);padding-left:14px;margin:12px 0;color:var(--muted)}
.rich code,.rich pre{background:var(--panel-2);padding:2px 6px;border-radius:4px;font-size:13px}
.rich a{color:var(--indigo);text-decoration:underline}


/* ══════════════ LANDING PAGE ══════════════════════════════════════════════
   The old home page was a filter form with a grid under it. It made no promise,
   showed no proof, and never once mentioned that the first lesson is free.
   ════════════════════════════════════════════════════════════════════════ */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:52px 0 40px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:var(--sindoor);font-weight:700;margin-bottom:14px}
.hero h1{font-size:46px;margin:0 0 16px;letter-spacing:-.02em}
.hero .lede{font-size:17px;color:var(--muted);max-width:34em;margin-bottom:26px}
.hero .cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero .note{font-size:12px;color:var(--faint);margin-top:14px}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:30px;padding:30px 0}.hero h1{font-size:33px}}

/* THE SIGNATURE. Not a stock photo of a laptop — the actual first line of the
   Ṛgveda, word by word, and the fact that its greatest readers disagree about
   what it means. That disagreement IS the product. Nobody else puts it on a
   marketing page because nobody else has it. */
.sutra{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--shadow)}
.sutra .mula{font-family:var(--deva);font-size:24px;line-height:1.95;color:var(--parchment);text-align:center;margin-bottom:4px}
.sutra .tr{font-family:var(--serif);font-style:italic;color:var(--rose);text-align:center;font-size:14px;margin-bottom:18px}
.pada{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:18px}
.pada b{font-family:var(--deva);font-size:15px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;color:var(--parchment);font-weight:400;text-align:center}
.pada b i{display:block;font-family:var(--sans);font-style:normal;font-size:10px;color:var(--muted);letter-spacing:.2px}
.sutra .foot{border-top:1px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--muted);text-align:center}
.sutra .foot b{color:var(--indigo)}

.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:6px 0 38px}
.proof div{background:#fff;padding:18px 16px;text-align:center}
.proof b{display:block;font-family:var(--serif);font-size:26px;color:var(--parchment);font-weight:600}
.proof span{font-size:11.5px;color:var(--muted)}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px;margin:8px 0 42px}
.why div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.why .ic{font-family:var(--deva);font-size:26px;color:var(--sindoor);margin-bottom:6px;line-height:1.2}
.why b{display:block;font-family:var(--serif);font-size:16px;color:var(--parchment);margin-bottom:5px}
.why p{font-size:13px;color:var(--muted);line-height:1.6}

/* the only dark surface left on the site — and it earns it */
.night{background:#141B3B;border-radius:16px;padding:38px;margin:16px 0 42px;
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.night h2{color:#fff;margin:0 0 10px;font-size:26px}
.night p{color:#B6B0C6;font-size:14.5px;max-width:46em}
.night .btn{background:var(--marigold);color:#3A2703}
.night .btn:hover{background:#F0AF2E}
@media(max-width:820px){.night{grid-template-columns:1fr;padding:26px}}

.sec-head{display:flex;align-items:baseline;gap:12px;margin:32px 0 14px}
.sec-head h2{margin:0}
.sec-head a{margin-left:auto;font-size:13px;color:var(--indigo);font-weight:600}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.filters select{width:auto;padding:8px 12px;font-size:13px}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER v2 — the gap against Coursera/Udemy was never the colour.
   It was that the header WHISPERED: 13px muted text links, no Explore menu,
   no sign-up button, categories in a thin grey strip you scroll past.
   Coursera's header shouts. This one now does too.
   ════════════════════════════════════════════════════════════════════════ */
header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:60;
  box-shadow:0 1px 0 rgba(20,27,59,.04)}
.hbar{display:flex;align-items:center;gap:14px;padding:14px 0}
.logo{font-size:24px;letter-spacing:-.02em}

.explore{display:flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--parchment);font-weight:700;font-size:13px;padding:9px 14px;border-radius:10px;cursor:pointer;white-space:nowrap}
.explore:hover{background:#fff;border-color:var(--indigo);color:var(--indigo)}
.explore .car{font-size:9px;transition:transform .16s ease}
.explore.open .car{transform:rotate(180deg)}

.hnav{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted);font-weight:600}
.hnav a{white-space:nowrap}
.hnav a:hover{color:var(--indigo)}
.teach{color:var(--indigo)!important}
.hnav .btn{font-size:13px;padding:9px 16px}
.hnav .btn-ghost{color:var(--parchment)}

/* the mega panel — 13 streams, with their own script, and a course count */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 24px 48px -24px rgba(20,27,59,.28);display:none;z-index:70}
.mega.open{display:block;animation:drop .18s ease}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega .wrap{padding:24px 20px 28px}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.mega-grid a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;border:1px solid transparent}
.mega-grid a:hover{background:var(--panel-3);border-color:var(--line)}
.mega-grid .gl{width:40px;height:40px;flex:none;border-radius:10px;background:var(--panel-2);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;font-family:var(--deva);font-size:19px}
.mega-grid a:hover .gl{background:var(--indigo);color:#fff}
.mega-grid b{display:block;font-size:13.5px;color:var(--parchment);font-weight:600;line-height:1.3}
.mega-grid span{font-size:11px;color:var(--faint)}

/* category strip — now tiles you can actually see */
.streams{border-bottom:1px solid var(--line);background:#fff;overflow-x:auto;scrollbar-width:none}
.streams::-webkit-scrollbar{display:none}
/* The last stream ("Ancient Indian Science", and the one after it) fell off the
   right edge with no scrollbar to reach them — invisible and unclickable. On a
   wide screen they now WRAP; on a phone they still scroll, where a swipe works. */
.streams .wrap{display:flex;gap:8px;padding:10px 20px;flex-wrap:wrap}
@media(max-width:760px){
  .streams .wrap{flex-wrap:nowrap;white-space:nowrap}
  .streams{-webkit-overflow-scrolling:touch}
}
.streams a{font-size:13px;color:var(--muted);font-weight:600;padding:7px 14px;border:1px solid var(--line);
  border-radius:20px;background:#fff;border-bottom:1px solid var(--line)}
.streams a:hover{border-color:var(--indigo);color:var(--indigo);background:var(--panel-3)}
.streams a.on{background:var(--indigo);border-color:var(--indigo);color:#fff}

.burger{display:none;background:none;border:1px solid var(--line);color:var(--parchment);padding:8px 11px;border-radius:9px;font-size:16px}
@media(max-width:900px){
  .search{display:none}
  .hnav a:not(.btn):not(.avatar){display:none}
  .burger{display:block}
  .explore{display:none}
}

/* ══════════════ HERO v2 — energy ══════════════ */
.hero{position:relative;overflow:hidden;border-radius:20px;margin-top:20px;padding:52px 44px;
  background:radial-gradient(1100px 480px at 88% -20%, #FFE9BE 0%, rgba(255,233,190,0) 62%),
             radial-gradient(760px 420px at -6% 118%, #E4E8FF 0%, rgba(228,232,255,0) 60%),
             #FFFDF8;
  border:1px solid var(--line);
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero h1{font-size:52px;margin:0 0 16px;letter-spacing:-.025em;line-height:1.08}
.hero h1 em{font-style:normal;color:var(--sindoor);position:relative;white-space:nowrap}
.hero h1 em:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;background:#FFD98A;z-index:-1;border-radius:3px}
.hero .lede{font-size:17.5px;color:#4C5468;max-width:34em;margin-bottom:24px;line-height:1.65}
.hero .cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero .note{font-size:12.5px;color:var(--muted);margin-top:14px}
.hero .note b{color:var(--leaf)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:28px;padding:32px 22px;border-radius:16px}.hero h1{font-size:34px}}

.rating-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:6px 14px 6px 8px;font-size:12.5px;color:var(--muted);margin-bottom:18px;font-weight:600}
.rating-pill .st{color:var(--marigold);letter-spacing:1px}
.rating-pill b{color:var(--parchment)}

/* trust bar — the four objections a stranger has, answered in one line */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:26px 0 8px}
.trust div{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px}
.trust .k{font-family:var(--deva);color:var(--sindoor);font-size:18px;line-height:1.4}
.trust b{display:block;font-size:13px;color:var(--parchment);font-weight:700}
.trust span{font-size:12px;color:var(--muted);line-height:1.5}

/* category tiles — Coursera has these; we had a grey text strip */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin-bottom:12px}
.cat{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;padding:18px;
  background:#fff;transition:transform .14s ease,box-shadow .14s ease,border-color .14s}
.cat:hover{transform:translateY(-3px);border-color:var(--indigo);box-shadow:0 14px 30px -18px rgba(20,27,59,.35)}
.cat .g{position:absolute;right:-6px;bottom:-18px;font-family:var(--deva);font-size:70px;color:var(--indigo);opacity:.07;line-height:1}
.cat b{display:block;font-family:var(--serif);font-size:15.5px;color:var(--parchment);font-weight:600;margin-bottom:3px}
.cat span{font-size:11.5px;color:var(--faint)}

/* ── CATEGORY CAROUSELS ─────────────────────────────────────────────────────
   The home page shows one rail per stream instead of one grid of everything.
   A grid is a design that only works while the catalogue is small: at a
   thousand courses it is a mile of scrolling and no sense of what is on offer.
   A rail per stream is a constant-height front door — the catalogue can grow
   for ever underneath it and the page stays the same size. */
.crail{margin:0 0 34px}
.crail-head{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.crail-head h3{font-family:var(--serif);font-size:20px;color:var(--parchment);font-weight:600;margin:0}
.crail-head .hi{font-family:var(--deva);font-size:15px;color:var(--gold);font-weight:400}
.crail-head .n{font-size:12.5px;color:var(--faint)}
.crail-head .all{margin-left:auto;font-size:13px;font-weight:600;color:var(--indigo);white-space:nowrap}
.crail-head .all:hover{color:var(--sindoor)}
.crail-sub{font-size:12px;color:var(--faint);margin:-6px 0 10px}

/* ── COVERFLOW ──────────────────────────────────────────────────────────────
   A flat scroll strip shows four cards, a scrollbar, and no opinion about
   which of the four you should look at; on a mouse it moves only if you find
   a 40-pixel arrow floating over a card. So the rails now fly instead: one
   course held at the front, its neighbours turned away into depth on either
   side, and the whole flow following the finger CONTINUOUSLY — the position
   is a float, not an index, so a drag moves the arrangement itself rather
   than waiting for release to jump one card.

   Every card sits absolutely over the same point and is separated only by a
   transform, which is the one thing a browser animates without touching
   layout: the compositor moves them, nothing reflows, and fifteen rails cost
   what one costs. The price of absolute positioning is that the parent has no
   height of its own, so the JS measures the tallest card once and publishes
   it as --cf-h; every card then takes that height, which also makes the price
   rows line up across a rail.
   ──────────────────────────────────────────────────────────────────────── */
/* The card scales with the window instead of sitting at one size for every
   screen. 24vw is the ratio the reference carousel holds; the floor keeps a
   narrow laptop legible and the ceiling stops a 4K monitor from serving a
   billboard. */
.cf{--cf-w:clamp(290px,24vw,455px);--cf-h:auto;position:relative}
/* The rail's heading belongs to the 1180px text column; the flow does not. On
   a wide screen a carousel pinned to that column is a strip stranded in a field
   of white, so the stage steps back OUT of the column — up to 240px each side —
   and the fan gets the page. The clamp is its own guard: the stage can never be
   wider than the window less 64px, so no width produces sideways scroll, and
   under about 1250px the term goes negative, clamps to zero, and the stage
   simply sits in the column again.

   Perspective is a fraction of the card, not a fixed 1400px. Depth read against
   a fixed eye distance flattens the moment the cards grow — a 430px card at
   1400px of perspective turns far less than a 300px one. Tying the two together
   makes the whole arrangement scale-invariant: bigger cards, identically shaped
   fan. */
.cf-stage{position:relative;
  margin-inline:calc(-1 * clamp(0px,(100vw - 64px - 100%) / 2,240px));
  perspective:calc(var(--cf-w) * 4.6);perspective-origin:50% 44%;
  padding:14px 0 32px;overflow:hidden;cursor:grab;
  touch-action:pan-y;                     /* sideways is ours, up and down is the page's */
  user-select:none;-webkit-user-select:none}
.cf-stage.dragging{cursor:grabbing}
.cf-track{position:relative;transform-style:preserve-3d}
.cf .cf-track > *{position:absolute;top:0;left:50%;width:var(--cf-w);height:var(--cf-h);
  margin-left:calc(var(--cf-w) / -2);
  transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .5s ease,filter .5s ease}
/* Promoting 240 cards to their own layer costs real memory on a phone, so
   they are promoted only while a finger is actually moving them. */
.cf.dragging .cf-track > *{transition:none;will-change:transform,opacity}   /* under a finger, nothing may lag behind it */

/* The card at the front, and the pane of light that crosses it as it arrives.
   Once, on arrival — a sheen that simply sits there is a smudge, not a gloss. */
.cf .cf-track > .cf-on{border-color:var(--line-2);
  box-shadow:0 30px 62px -30px rgba(20,27,59,.52),0 0 0 1px rgba(232,163,23,.30)}
.cf .cf-track > *::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 66%)}
.cf .cf-track > .cf-on::after{animation:cfSheen .95s cubic-bezier(.3,.86,.36,1) both}
.cf.dragging .cf-track > .cf-on::after{animation:none}   /* the front card changes under a finger; a sheen each time is a flicker */
@keyframes cfSheen{
  0%  {opacity:0;  transform:translateX(-58%)}
  30% {opacity:.85}
  100%{opacity:0;  transform:translateX(58%)}}

/* The controls sit under the stage, where they are not standing on a card. */
.cf-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px}
.cf-arrow{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line-2);background:#fff;
  color:var(--parchment);font-size:21px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -12px rgba(20,27,59,.55);
  transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s,opacity .2s}
.cf-arrow:hover:not(:disabled){background:var(--panel-2);transform:scale(1.09)}
.cf-arrow:active:not(:disabled){transform:scale(.95)}
.cf-arrow:disabled{opacity:.28;cursor:default;box-shadow:none}
.cf-dots{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;max-width:min(62%,330px)}
.cf-dot{width:7px;height:7px;flex:none;padding:0;border:none;border-radius:9px;background:var(--line-2);
  cursor:pointer;transition:width .4s cubic-bezier(.22,1,.36,1),background .3s}
.cf-dot:hover{background:var(--gold)}
.cf-dot[aria-selected="true"]{width:22px;background:var(--gold)}

/* the last card in a rail: the door to the whole category */
.cf-track .rail-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:22px;border:1px dashed var(--line-2);border-radius:14px;
  background:var(--panel-3);color:var(--indigo);font-weight:600}
.cf-track .rail-more:hover{border-color:var(--sindoor);color:var(--sindoor);background:#fff}
.cf-track .rail-more .g{font-family:var(--deva);font-size:40px;color:var(--indigo);opacity:.35;line-height:1}
.cf-track .rail-more small{display:block;font-weight:400;font-size:12px;color:var(--faint)}

@media(max-width:760px){
  .crail{margin-bottom:26px}
  .crail-head h3{font-size:18px}
  .cf{--cf-w:min(268px,72vw)}
  .cf-stage{perspective:calc(var(--cf-w) * 3.9);padding-bottom:24px}
  .cf-nav{gap:12px}
  .cf-dots{max-width:min(58%,210px);gap:6px}
}
/* Depth is worth having; being thrown about is not. Nothing more is needed here
   for that: the blanket rule at the top of this file already stops every
   animation and transition on the page under prefers-reduced-motion, so the
   flow still arranges itself in 3D — it simply arrives instead of travelling. */
/* "Load more" under the full category list */
.more-row{display:flex;justify-content:center;margin:22px 0 6px}

/* scroll reveal — motion, but respectful */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* sticky mobile CTA — the single highest-converting element on any course site */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;
    border-top:1px solid var(--line);padding:10px 16px;gap:10px;align-items:center;
    box-shadow:0 -10px 30px -20px rgba(20,27,59,.5)}
  .sticky-cta .btn{flex:1}
  footer{padding-bottom:78px}
}

/* "how a lesson works" — the platform's method, true of every course in every
   stream. It replaced a hard-coded Ṛgveda verse that only ever described one. */
.how{list-style:none;counter-reset:h;margin:0;padding:0}
.how li{counter-increment:h;position:relative;padding:0 0 16px 42px;margin-bottom:2px}
.how li:before{content:counter(h);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:9px;
  background:var(--indigo);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.how li:not(:last-child):after{content:"";position:absolute;left:13.5px;top:32px;bottom:4px;width:1px;background:var(--line)}
.how b{display:block;font-family:var(--serif);font-size:15px;color:var(--parchment);margin-bottom:3px;font-weight:600}
.how span{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ── top bar: IIVST's own channels, above everything ────────────────────────
   Named chips, not brand logos. Instagram's and Razorpay's marks are their
   trademarks; the official assets come from their press kits with usage rules
   attached, and it is not my place to ship someone else's logo into this repo. */
.topbar{background:#141B3B;color:#C9C2D6;font-size:12px}
.topbar .wrap{display:flex;align-items:center;gap:14px;padding:7px 20px;overflow-x:auto;scrollbar-width:none}
.topbar .wrap::-webkit-scrollbar{display:none}
.tb-l{color:#8F89A3;font-weight:600;white-space:nowrap}
.tb-a{color:#E9E4F2;white-space:nowrap;font-weight:600;border-bottom:1px solid transparent}
.tb-a:hover{color:var(--marigold);border-bottom-color:var(--marigold)}
.tb-r{margin-left:auto;color:var(--marigold)}
@media(max-width:640px){.tb-r{display:none}}

/* Pañcāṅga strip: sits between the social links and the greeting. Both it and
   .tb-r carry margin-left:auto, so the two autos split the free space and the
   almanac lands centred in the bar. */
.tb-panchang{margin-left:auto;display:flex;align-items:center;gap:8px;color:#B9B2C9;white-space:nowrap;font-size:12px;letter-spacing:.1px}
.tb-panchang .pc-u{display:inline-flex;align-items:center;gap:8px}
.tb-panchang b{color:#F0EAF7;font-weight:600}
.tb-panchang .pc-d{color:#5a5470}
.tb-panchang .pc-samvat{color:#9E97B0}
.tb-panchang .pc-nak b{color:var(--marigold)}
.tb-panchang .pc-moon{font-size:14px;line-height:1}
.tb-panchang .pc-phase{font-size:12px;color:#B9B2C9}
/* Shed detail as the bar narrows, most-optional first, so the essentials
   (māsa · pakṣa · tithi · moon) survive down to a phone. */
@media(max-width:1240px){.tb-panchang .pc-phase{display:none}}
@media(max-width:1080px){.tb-panchang .pc-samvat{display:none}}
@media(max-width:760px){.tb-panchang .pc-nak{display:none}}
/* the strip is a button that opens the full panel */
.tb-panchang{cursor:pointer;border-radius:6px;padding:2px 6px;transition:background .12s ease}
.tb-panchang:hover{background:rgba(232,163,23,.12)}
.tb-panchang .pc-more{color:#7d7690;font-size:10px;margin-left:1px}

/* ── full pañcāṅga panel ────────────────────────────────────────────────────── */
.pc-panel{position:absolute;z-index:60;width:340px;max-width:calc(100vw - 20px);
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 18px 48px -18px rgba(20,27,59,.45),0 2px 8px rgba(20,27,59,.12);
  overflow:hidden;font-size:13px;color:var(--text);animation:pcIn .14s ease}
@keyframes pcIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pcp-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:13px 15px;background:linear-gradient(135deg,#1b2450,#141B3B);color:#F0EAF7}
.pcp-hd b{font-family:var(--serif);font-size:16px;font-weight:600;display:block}
.pcp-hd span{font-size:11.5px;color:#B9B2C9}
.pcp-x{background:rgba(255,255,255,.1);border:0;color:#F0EAF7;width:24px;height:24px;
  border-radius:50%;cursor:pointer;font-size:12px;line-height:1;flex:none}
.pcp-x:hover{background:rgba(232,163,23,.35)}
.pcp-samvat{padding:9px 15px;background:var(--panel-2);border-bottom:1px solid var(--line);
  font-size:12px;color:var(--muted);text-align:center}
.pcp-samvat b{color:var(--gold);font-weight:700}
.pcp-grid{padding:6px 15px 10px}
.pcp-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--line)}
.pcp-row:last-child{border-bottom:0}
.pcp-k{color:var(--muted);font-size:12px;white-space:nowrap}
.pcp-v{font-weight:600;color:var(--parchment);text-align:right}
.pcp-v i{display:block;font-style:normal;font-weight:400;color:var(--faint);font-size:11px;margin-top:1px}
.pcp-v small{font-weight:400;color:var(--muted)}
.pcp-rahu{color:var(--sindoor);font-weight:700}
.pcp-ft{padding:10px 15px;background:var(--panel-3);border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);line-height:1.5}
.pcp-ft b{color:var(--parchment)}

/* ── footer ───────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);margin-top:60px;padding:0 0 26px;background:#fff;color:var(--muted);font-size:13px}
.frow{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px;padding:26px 0 18px}
.fcol h3{margin:0 0 8px}
.fcol a{display:block;font-size:13px;color:var(--muted);padding:3px 0}
.fcol a:hover{color:var(--indigo)}
.fbrand .byline-foot{margin:4px 0 12px}
.fsoc{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fsoc-l{font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--faint);font-weight:700;width:100%}
.chip{font-size:12px;font-weight:600;color:var(--parchment);background:var(--panel-2);border:1px solid var(--line);
  border-radius:20px;padding:6px 12px}
.chip:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.fbot{border-top:1px solid var(--line);padding-top:14px;font-size:12px;color:var(--faint)}
@media(max-width:820px){.frow{grid-template-columns:1fr 1fr;gap:20px}}

/* ── trust badges: the four things a stranger worries about before typing a
      card number. Facts about this platform — not borrowed logos. ─────────── */
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.badge{background:var(--panel-3);padding:16px 18px;display:flex;gap:11px;align-items:flex-start}
.badge .bt{display:block;font-size:12.5px;color:var(--parchment);font-weight:500}
.badge .bt b{font-weight:700}
.badge .bs{display:block;font-size:11.5px;color:var(--muted);line-height:1.5}
.bi{flex:none;width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid var(--line);
  position:relative}
.bi:after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.bi-lock:after{content:"₹";color:var(--indigo);font-size:15px}
.bi-ssl:after{content:"🔒";font-size:13px;filter:grayscale(1)}
.bi-cert:after{content:"✓";color:var(--leaf)}
.bi-back:after{content:"↺";color:var(--sindoor)}

/* ── social icons: round, tactile, and they are HIS icons ─────────────────── */
.topbar .wrap{gap:10px}
.tb-a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.07);color:#E9E4F2;border:0}
.tb-a:hover{background:var(--marigold);color:#241704;transform:translateY(-1px)}
.tb-a.tb-r{width:auto;border-radius:20px;padding:0 12px;background:transparent;color:var(--marigold);font-size:12px}
.tb-a.tb-r:hover{background:rgba(232,163,23,.14);color:var(--marigold);transform:none}
.chip{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  padding:0;background:var(--panel-2);border:1px solid var(--line);color:var(--indigo);transition:all .16s}
.chip:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;transform:translateY(-2px)}

/* trust badges — proper icons, no emoji */
.bi{flex:none;width:32px;height:32px;border-radius:10px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--indigo)}
.bi:after{content:none}
.badge:nth-child(2) .bi{color:var(--leaf)}
.badge:nth-child(3) .bi{color:var(--marigold)}
.badge:nth-child(4) .bi{color:var(--sindoor)}

/* ── Our Products: the wider VidyāSetu world — sibling tools & experiences ──── */
.products{background:var(--panel-2);border-top:1px solid var(--line)}
.products .wrap{padding:34px 22px 36px}
.phead{text-align:center;margin-bottom:22px}
.phead h3{font-family:var(--serif);font-size:23px;color:var(--parchment);margin:0;letter-spacing:-.01em}
/* The services heading links to /services. a{color:inherit} makes it look
   identical to plain text, so it needs a hover cue or nobody finds it. */
.phead h3 a:hover{color:var(--sindoor);text-decoration:underline;text-underline-offset:4px}
.phead p{color:var(--muted);font-size:13.5px;margin:7px auto 0;max-width:520px;line-height:1.55}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;max-width:1000px;margin:0 auto}
.product{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:15px;
  padding:16px;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.product:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,27,59,.10);border-color:var(--marigold)}
.product.soon{cursor:default}
.product.soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.plogo{flex:none;width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--panel-3);border:1px solid var(--line)}
.plogo svg{width:38px;height:38px;display:block}
.pbody{min-width:0}
.pname{font-family:var(--serif);font-size:16.5px;color:var(--parchment);font-weight:600;line-height:1.2;display:block}
.ptag{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4;display:block}
.pcta{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;color:var(--sindoor);letter-spacing:.3px;white-space:nowrap}
.product.soon .pcta{color:var(--faint);border:1px solid var(--line);padding:3px 9px;border-radius:999px;font-weight:600;letter-spacing:.4px}
@media(max-width:560px){.product{padding:14px} .plogo{width:50px;height:50px} .plogo svg{width:34px;height:34px}}

/* ── the hero shows the actual courses, rather than describing them ───────── */
.mosaic{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:52px 52px;gap:6px;margin-bottom:16px}
.mosaic span{border-radius:10px;background-size:cover;background-position:center;display:block}
.mosaic span:first-child{grid-row:1 / span 2}

/* ── depth. Coursera's cards sit ON the page; ours were drawn INTO it. ─────── */
.ccard{border-radius:14px;box-shadow:0 1px 2px rgba(20,27,59,.04)}
.ccard:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(20,27,59,.34)}
.thumb{height:158px;background:linear-gradient(135deg,#F7F0E3,#EFE3CE)}
.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,27,59,.32));opacity:0;transition:opacity .16s}
.ccard:hover .thumb:after{opacity:1}
.thumb .tag{z-index:2}
.ctitle{font-size:16.5px;line-height:1.28}

/* category tiles get their stream's colour, so 13 tiles are not 13 grey boxes */
.cat{background:linear-gradient(160deg,#fff 55%,var(--tint,#F7F0E3))}
.cat .g{opacity:.12;font-size:76px}
.cat:hover .g{opacity:.2;color:var(--sindoor)}

.hero h1{font-size:50px}
.sec-head h2{font-size:24px}

/* ── the course wizard ─────────────────────────────────────────────────────
   Four steps, one question at a time, for a teacher who has never met a CMS.
   Anything the assistant drafted is ORANGE and says so. Nothing it wrote can
   reach a learner without the teacher reading it first. */
.wsteps{display:flex;gap:8px;margin:18px 0 22px;flex-wrap:wrap}
.wstep{flex:1;min-width:140px;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px}
.wstep b{width:26px;height:26px;flex:none;border-radius:50%;background:var(--panel-2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:12px}
.wstep span{font-size:13px;color:var(--muted);font-weight:600}
.wstep.on{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(34,48,107,.08)}
.wstep.on b{background:var(--indigo);color:#fff}
.wstep.on span{color:var(--parchment)}
.wstep.done b{background:var(--leaf);color:#fff}

.modrow{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;background:#fff}
.modrow.ai{border-left:3px solid var(--marigold);background:#FFFCF4}
.modrow .sm{margin-top:6px;font-size:13px}
.modrow .lessons{margin-top:10px;padding-left:14px;border-left:2px solid var(--line)}
.modrow .lessons .row{margin-bottom:5px}

.lcard{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px;background:#fff}
.lcard.ai{border-left:3px solid var(--marigold);background:#FFFCF4}

/* an AI draft never looks like finished work */
.aidraft{border:1px dashed var(--marigold);background:#FFFBF1;border-radius:10px;padding:14px;margin-top:12px}
.aidraft b{color:#8A5E05;font-size:12px;text-transform:uppercase;letter-spacing:.8px}
.aidraft p{font-size:13.5px;color:var(--text);margin-top:6px}

/* ══════════════ THE COURSE ADVISOR ════════════════════════════════════════ */
.adv-fab{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:9px;
  background:var(--indigo);color:#fff;border-radius:30px;padding:13px 20px;box-shadow:0 12px 30px -10px rgba(20,27,59,.5)}
.adv-fab:hover{background:#1A2555;transform:translateY(-1px)}
/* The × did nothing: `hidden` is display:none in the browser's own stylesheet,
   but `.adv{display:flex}` below is more specific and quietly beat it. This one
   line is the fix, and it has to come first. */
.adv[hidden]{display:none!important}
.adv{position:fixed;right:20px;bottom:20px;width:376px;max-width:calc(100vw - 32px);z-index:75;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(20,27,59,.55);display:flex;flex-direction:column;max-height:74vh}
.adv-h{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--panel-3)}
.adv-h b{font-family:var(--serif);color:var(--parchment);font-size:15px}
.adv-x{margin-left:auto;background:none;color:var(--muted);padding:0 6px;font-size:20px;line-height:1}
.adv-x:hover{background:none;color:var(--parchment)}
.adv-b{padding:14px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:9px}
.adv-m{font-size:13.5px;line-height:1.6;padding:10px 13px;border-radius:12px;max-width:88%}
.adv-m.bot{background:var(--panel-2);color:var(--text);border-bottom-left-radius:3px}
.adv-m.me{background:var(--indigo);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.adv-c{display:block;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff}
.adv-c:hover{border-color:var(--indigo);background:var(--panel-3)}
.adv-c b{display:block;font-family:var(--serif);color:var(--parchment);font-size:14px}
.adv-c span{display:block;font-size:11.5px;color:var(--muted)}
.adv-c .go{color:var(--sindoor);font-weight:700;margin-top:5px}
.adv-f{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.adv-f input{flex:1}
@media(max-width:520px){.adv{right:8px;left:8px;bottom:8px;width:auto;max-height:80vh}.adv-fab span{display:none}
  .adv-fab{padding:14px;border-radius:50%}}

/* ══════════════ MESSAGES ══════════════════════════════════════════════════ */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover;
  background:var(--indigo);color:#fff;font-weight:700;vertical-align:middle}
.chat{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.chat-b{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:280px;max-height:56vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--panel-3),#fff)}
.bub{max-width:74%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.6;position:relative}
.bub.me{align-self:flex-end;background:#E7F0E9;border:1px solid #C6DFCE;border-bottom-right-radius:3px}
.bub.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px}
.bub .who{font-size:11px;color:var(--indigo);font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.bub .quote{border-left:3px solid var(--marigold);background:var(--panel-2);border-radius:6px;padding:6px 9px;
  font-size:12px;color:var(--muted);margin-bottom:6px}
.bub .bimg{max-width:100%;border-radius:9px;margin-bottom:6px;display:block}
.bub .meta{font-size:10.5px;color:var(--faint);margin-top:5px}
.bub .meta a{color:var(--indigo);font-weight:600;cursor:pointer}
.bub code{background:var(--panel-2);padding:1px 5px;border-radius:4px;font-size:13px}
.chat-bar{display:flex;gap:6px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);background:var(--panel-3)}
.fmtb{background:#fff;border:1px solid var(--line);color:var(--parchment);padding:5px 10px;border-radius:7px;font-size:12px;min-width:32px}
.fmtb:hover{background:var(--indigo);color:#fff}
.kindsel{width:auto;margin-left:auto;padding:5px 9px;font-size:12px}
.emoji{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px;border-top:1px solid var(--line);background:#fff}
.emoji button{background:none;border:1px solid transparent;font-size:19px;padding:3px 5px;border-radius:7px}
.emoji button:hover{background:var(--panel-2)}
.chat-f{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.chat-f textarea{flex:1;min-width:220px;min-height:44px}
.chat-f .imgin{flex:1;min-width:180px;font-size:12px}
.rep{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);background:var(--panel-2);
  border-left:3px solid var(--marigold);padding:8px 12px}

/* search results — a hit inside a lesson, with the words around it */
.hit{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:8px}
.hit:hover{border-color:var(--indigo);background:var(--panel-3)}
.hit b{font-family:var(--serif);color:var(--parchment);font-size:15px}
.hit p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6}
.hit.locked{background:var(--panel-3)}
.hit.locked b{color:var(--muted)}

/* show/hide password. A password you cannot see is a password you cannot fix. */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{padding-right:66px}
.pw-eye{position:absolute;right:6px;background:none;border:0;color:var(--indigo);font-size:12px;
  font-weight:700;padding:6px 8px;border-radius:6px}
.pw-eye:hover{background:var(--panel-2)}

/* ══════════════════════════════════════════════════════════════════════════
   SAFFRON GLASS RE-THEME (owner 2026-07-19) — appended so the cascade overrides
   the base: blue→saffron, subtle manuscript paper on every page, glass cards,
   smooth glass-finish interactions. Readability first.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --indigo:#B4671C;          /* was navy — saffron-amber: nav, links, accents, focus */
  --parchment:#3A2A18;       /* headings — deep manuscript brown, highly readable */
  --violet:#9A5B2A;
  /* High-quality glass tokens: translucent tinted fill + a diagonal sheen, strong
     blur/saturation, a bright highlight edge and layered ambient shadow. */
  --glass-fill:rgba(255,252,246,.58);
  --glass-sheen:linear-gradient(157deg,rgba(255,255,255,.55) 0%,rgba(255,252,245,.16) 52%,rgba(255,250,242,.30) 100%);
  --glass-blur:blur(20px) saturate(1.4);
  --glass-line:rgba(180,103,28,.16);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.14);
  --glass-shadow:0 12px 34px -14px rgba(58,42,24,.30),0 3px 10px -6px rgba(58,42,24,.14);
}

/* Subtle manuscript paper on ALL public pages (CSS-only, no image download). */
body{
  background:
    radial-gradient(1200px 720px at 80% -10%, rgba(232,163,23,.11), transparent 60%),
    radial-gradient(1000px 820px at -8% 10%, rgba(192,69,27,.06), transparent 55%),
    linear-gradient(180deg,#FCF7EF 0%,#F8F0E1 55%,#F3E7D2 100%) fixed;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='.04'/%3E%3C/svg%3E");
}
/* dark immersive surfaces (reciter/night) keep their own background */
.night body::before,body.night::before{display:none}

/* ── High-quality frosted glass (elevated per owner feedback). Real depth: a
   translucent tinted fill + diagonal sheen, strong blur/saturation, a bright
   highlight edge, a hairline border, and layered ambient shadow. Text stays dark. */
.card,.ccard,.mega,.fcard{
  background-color:var(--glass-fill)!important;
  background-image:var(--glass-sheen)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow),var(--glass-hi)!important;
}
header{
  background-color:rgba(255,252,246,.5)!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,251,242,.16))!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border-bottom:1px solid var(--glass-line)!important;
  box-shadow:0 8px 26px -16px rgba(58,42,24,.34),inset 0 1px 0 rgba(255,255,255,.85);
}
.hnav a{color:var(--parchment)}                 /* dark, readable nav links */
.hnav a:hover,.hnav a.on{color:var(--sindoor)}
.hnav a.teach{color:var(--sindoor);font-weight:600}
.streams{
  background-color:rgba(255,252,246,.42)!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,251,242,.12))!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.streams a{color:var(--muted)}
.streams a:hover{color:var(--parchment)}
.streams a.on{color:var(--sindoor)}
.mega{
  background-color:rgba(255,252,246,.74)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--glass-shadow),var(--glass-hi)!important;
}
.mega a{color:var(--parchment)}
.search input{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Smooth interactions — hover lift, soft press. */
.btn,button,.ccard,.mega a,.card,.cat,.fcard,.cshare,.hnav a,.streams a,.stream-more .more-btn{
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,background .2s ease,color .16s ease,border-color .2s ease,filter .16s ease;
}
.cat:hover{transform:translateY(-2px)}
.ccard:hover{transform:translateY(-4px);box-shadow:0 20px 40px -16px rgba(58,42,24,.32),var(--glass-hi)!important;border-color:var(--marigold)}
.ccard:active,.cat:active{transform:translateY(0) scale(.99)}
a:hover,.hnav a:hover,.streams a:hover,.streams a.on{color:var(--sindoor)}
@media(prefers-reduced-motion:reduce){body::before{display:none}}

/* ── Buttons — match the "Find your course" CTA: a SOLID saffron-terracotta pill
   with white bold text and gentle depth. (Translucent glass buttons read poorly,
   so buttons are deliberately solid; only ghost buttons are frosted.) */
.btn:not(.btn-ghost),button:not([class]):not(.pw-eye):not(.burger):not(.explore){
  border:0;color:#fff;font-weight:600;border-radius:12px;
  background:linear-gradient(180deg,#C94E20 0%,#B23E14 100%);
  box-shadow:0 6px 16px -6px rgba(178,62,21,.55),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn:not(.btn-ghost):hover,button:not([class]):not(.pw-eye):not(.burger):not(.explore):hover{
  filter:brightness(1.05);transform:translateY(-2px);
  box-shadow:0 12px 24px -8px rgba(178,62,21,.6),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn:not(.btn-ghost):active,button:not([class]):active{filter:brightness(.96);transform:translateY(0)}
.btn-lg{border-radius:14px}
.btn-ghost{
  background:rgba(255,255,255,.62)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--glass-line)!important;color:var(--parchment)!important;border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px -6px rgba(58,42,24,.2);
}
.btn-ghost:hover{background:rgba(255,255,255,.85)!important;border-color:var(--marigold)!important;color:var(--sindoor)!important;transform:translateY(-2px)}
/* the dark player keeps its marigold button */
.night .btn:not(.btn-ghost){background:linear-gradient(180deg,#EBB43E,#D8951A)!important;color:#3A2703!important}

/* ── Header refinements (owner): Explore → right side, larger brand, and warmer
   chip/nav colours (replace the muddy brown active-chip + red nav text). */
.hbar .explore{order:5}
.hbar .search{order:2}
.hbar .hnav{order:6}
.brand .logo{font-size:30px}
.brand .byline{font-size:12px;color:var(--muted);letter-spacing:.2px}
@media(max-width:760px){.brand .logo{font-size:23px}}

/* Explore: a clean frosted pill, dark readable label (not brown block). */
.explore{background:rgba(255,255,255,.72)!important;border:1px solid var(--glass-line)!important;color:var(--parchment)!important;font-weight:600;border-radius:12px}
.explore:hover{background:#fff!important;border-color:#D98A12!important;color:#C4611A!important}

/* Active category chip: a warm saffron-gold pill with dark, readable text —
   replaces the dark-brown (indigo) fill + red text. */
.streams a.on{
  background:linear-gradient(180deg,#EEA92B,#D98A12)!important;
  border-color:#D98A12!important;color:#3A2A18!important;font-weight:700;
  box-shadow:0 4px 12px -5px rgba(217,138,18,.55);
}
.streams a:hover{border-color:#E8A317;color:var(--parchment)}

/* Nav links: dark and readable; accents (Console / Teach) a warm saffron, NOT red. */
.hnav a{color:var(--parchment)}
.hnav a:hover,.hnav a.on{color:#C4611A}
.hnav a.teach,header .teach{color:#C4611A!important;font-weight:700}

/* View-password toggle (profile + anywhere): a plain text button inside the field. */
.pwrap{position:relative}
.pwrap input{padding-right:62px}
.pw-eye{position:absolute!important;right:8px;top:50%;transform:translateY(-50%);
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--sindoor)!important;font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px!important;border-radius:6px!important}
.pw-eye:hover{color:#A93A15!important;background:rgba(192,69,27,.08)!important}

/* ── Account avatar dropdown (main site) — matches the portal's menu so the profile
   click behaves the same everywhere: a small menu, not a jump to the full page. */
.avwrap{position:relative;display:inline-flex}
.usermenu{position:absolute;right:0;top:calc(100% + 12px);min-width:224px;display:none;flex-direction:column;
  background:rgba(255,253,248,.97);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--glass-line);border-radius:14px;
  box-shadow:0 20px 46px -14px rgba(58,42,24,.4),inset 0 1px 0 rgba(255,255,255,.7);padding:8px;z-index:120}
.usermenu.open{display:flex;animation:umIn .14s ease}
@keyframes umIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.usermenu .um-h{display:flex;flex-direction:column;padding:8px 12px 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.usermenu .um-h b{color:var(--parchment);font-size:14px;font-family:var(--serif)}
.usermenu .um-h span{color:var(--muted);font-size:12px}
.usermenu a{display:block;padding:9px 12px;border-radius:9px;color:var(--parchment)!important;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.usermenu a:hover{background:rgba(232,163,23,.16);color:var(--sindoor)!important}
.usermenu .um-out{border-top:1px solid var(--line);margin-top:6px;color:var(--sindoor)!important}