@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}
body{background:var(--ink);color:var(--text);font-family:var(--sans);line-height:1.65;min-height:100vh;-webkit-font-smoothing:antialiased}
: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)}
.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{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)}
.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)}

/* horizontal course rail, like every marketplace */
.rail{display:flex;gap:18px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail .ccard{min-width:270px;max-width:270px;scroll-snap-align:start}

/* 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}}

/* ── 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)}

/* ── 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)}