*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins','Noto Sans Malayalam',sans-serif;color:#12211a;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700}
.muted{color:#5c6b64}
.tiny{font-size:.78rem;color:#7c8a83}
.sub{margin:6px 0 26px;max-width:62ch}
.center{text-align:center}
.sec{padding:58px 20px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:12px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid #e8efea}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.06rem}
.mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:#2C6E49;color:#fff;font-size:.8rem;font-weight:800}
.nav nav{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.nav nav a{padding:7px 12px;border-radius:8px;font-size:.9rem;font-weight:500;color:#3d4c45}
.nav nav a:hover{background:#f1f7f3}
.nav nav a.on{background:#e8f3ec;color:#2C6E49;font-weight:600}

/* buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:11px;font-weight:600;
  font-size:.93rem;transition:transform .15s ease,box-shadow .15s ease;border:0;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:8px 15px;font-size:.85rem;background:#eef5f0;color:#2C6E49}
.btn-buy{background:#2C6E49;color:#fff;box-shadow:0 4px 14px rgba(44,110,73,.28);width:100%;text-align:center}
.btn-buy:hover{box-shadow:0 7px 20px rgba(44,110,73,.34)}
.btn-ask{background:#f4f8f5;color:#2C6E49;border:1.5px solid #cfe3d7;width:100%;text-align:center}
.btn-ghost{background:#fff;color:#12211a;border:1.5px solid #d6e2da}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.cta-row .btn{width:auto}

/* hero */
.hero{background:linear-gradient(160deg,#0e2a1d 0%,#164430 55%,#1d5a3f 100%);
  color:#fff;padding:76px 0 66px}
.eyebrow{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:#8fd3ab;font-weight:600}
.hero h1{font-size:clamp(2.1rem,6vw,3.5rem);font-weight:800;margin:14px 0 16px}
.hero .ml{display:block;font-size:.52em;font-weight:600;color:#9fe0ba;margin-bottom:6px}
.lede{font-size:1.05rem;max-width:60ch;color:#d6e8dd}
.hero .tiny{color:#8aa898}

/* the decision box - "what is your qualification?" in the hero */
.picker{background:#fff;border:1px solid #e3ebe6;border-radius:18px;
  padding:16px 16px 14px;box-shadow:0 18px 46px rgba(18,33,26,.13)}
.picker .eyebrow{color:#2C6E49}
.picker h2{font-size:1.02rem;margin:3px 0 11px}
.pick-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick{min-height:52px;border:1.5px solid #dfe7e2;border-radius:12px;background:#fff;
  font-family:inherit;font-size:.88rem;font-weight:700;color:#12211a;cursor:pointer;
  padding:8px 11px;text-align:left;transition:border-color .15s,background .15s}
.pick small{display:block;font-weight:600;color:#7c8a83;font-size:.67rem;margin-top:1px}
.pick:hover{border-color:#aecbbb}
.pick[aria-pressed="true"]{border-color:#2C6E49;background:#eaf4ee;color:#2C6E49}
.pick[aria-pressed="true"] small{color:#4a7a61}
.mpanel{margin-top:12px;border-top:1px solid #eef3f0;padding-top:11px}
.mpanel[hidden]{display:none}
.m-posts{font-size:.81rem;color:#33463d;margin-bottom:9px}
.m-posts span{display:block;font-size:.65rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#7c8a83;margin-bottom:1px}
.m-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:8px 0;border-top:1px dashed #eef3f0}
.m-item b{display:block;font-size:.87rem;color:#12211a;line-height:1.35}
.m-any{display:inline-block;font-size:.61rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:#eef5f0;color:#2C6E49;border-radius:4px;
  padding:1px 6px;margin-left:6px;vertical-align:2px}
.m-counts{display:block;font-size:.75rem;color:#5c6b64}
.m-price{text-align:right;white-space:nowrap}
.m-price b{font-size:.95rem;color:#12211a}
.m-price .per{font-size:.7rem;font-weight:600}
.m-price em{display:block;font-style:normal;font-size:.69rem;color:#7c8a83}
.m-note{font-size:.74rem;color:#5c6b64;background:#f4f8f5;border-radius:8px;
  padding:7px 10px;margin-top:8px;line-height:1.5}
.m-cta{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.m-cta .btn{flex:1 1 46%;justify-content:center;text-align:center}
@media(max-width:430px){
  .pick-btns{grid-template-columns:1fr}
  .m-item{flex-direction:column;gap:2px}
  .m-price{text-align:left}
  .m-cta .btn{flex:1 1 100%}
}

/* e-book level filter */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.flabel{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#7c8a83;margin-right:2px}
.fchip{display:inline-flex;align-items:center;gap:7px;font-family:inherit;
  font-size:.86rem;font-weight:700;color:#12211a;background:#fff;cursor:pointer;
  border:1.5px solid #dfe7e2;border-radius:999px;padding:7px 13px;
  transition:border-color .15s,background .15s,color .15s}
.fchip:hover{border-color:#aecbbb}
.fchip .fcount{font-size:.72rem;font-weight:800;color:#5c6b64;background:#f1f6f3;
  border-radius:999px;padding:1px 7px;min-width:22px;text-align:center}
.fchip[aria-pressed="true"]{border-color:#2C6E49;background:#2C6E49;color:#fff}
.fchip[aria-pressed="true"] .fcount{background:rgba(255,255,255,.22);color:#fff}
/* Belt and braces. A card carrying the hidden attribute once stayed on screen
   because another rule set display on it and won - the attribute was set, the
   test read the attribute, and the card was visible to everyone but the test.
   Never rely on the browser default alone for something a visitor can trigger. */
.grid .card[hidden]{display:none !important}
.filter-none{font-size:.92rem;color:#5c6b64;background:#f4f8f5;border-radius:12px;
  padding:14px 16px;margin-top:4px}
.filter-none a{color:#2C6E49;font-weight:700;text-decoration:underline}
.filter-none[hidden]{display:none !important}
@media(max-width:560px){
  .filterbar{gap:6px}
  .flabel{width:100%;margin-bottom:2px}
  .fchip{font-size:.8rem;padding:6px 11px}
}

/* Returning students. Deliberately quiet - it must be findable without
   competing with the pitch written for someone who has never heard of us. */
.already{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;background:#f4f8f5;border:1px solid #e3ebe6;border-radius:14px;
  padding:12px 16px;margin-top:18px}
.already p{font-size:.88rem;color:#33463d;margin:0;max-width:60ch}
.already .btn{white-space:nowrap}

/* trust band */
.band{background:#f6faf7;border-block:1px solid #e8efea}
.tstat em .est-tag{display:inline-block;font-style:normal;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:#4f6058;border:1px solid #b9c7bf;border-radius:20px;padding:0 6px;margin-left:5px;vertical-align:1px}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:34px 20px}
.tstat{text-align:center;padding:12px}
.tstat b{display:block;font-size:1.9rem;font-weight:800;color:#2C6E49}
.tstat span{display:block;font-weight:600;font-size:.92rem}
.tstat em{display:block;font-style:normal;font-size:.78rem;color:#5f6f68;margin-top:2px}

/* big numbers */
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.bignums div{background:#f6faf7;border:1px solid #e3ede7;border-radius:16px;padding:26px 16px;text-align:center}
.bignums b{display:block;font-size:2.3rem;font-weight:800;color:#2C6E49;letter-spacing:-.03em}
.bignums span{font-size:.86rem;color:#5c6b64;font-weight:500}

/* courses */
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.course{display:block;padding:24px;border:1px solid #e3ede7;border-radius:16px;transition:.18s}
.course:hover{border-color:#2C6E49;box-shadow:0 8px 26px rgba(20,50,35,.08);transform:translateY(-2px)}
.course h3{font-size:1.12rem;font-weight:700}
.exam{color:#2C6E49;font-weight:600;font-size:.85rem;margin:3px 0 8px}
.more{display:inline-block;margin-top:12px;font-size:.85rem;font-weight:600;color:#2C6E49}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:18px}
.card{position:relative;display:flex;flex-direction:column;padding:24px;
  border:1px solid #e3ede7;border-radius:18px;background:#fff;transition:.18s}
.card:hover{box-shadow:0 12px 34px rgba(20,50,35,.1);transform:translateY(-3px);border-color:#cfe3d7}
.card h3{font-size:1.16rem;font-weight:700}
.card .btn{margin-top:auto}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.lvl{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#5c6b64;background:#f1f5f2;padding:4px 9px;border-radius:6px}
.off{font-size:.72rem;font-weight:800;color:#fff;background:#e0642f;padding:4px 9px;border-radius:6px}
.ribbon{position:absolute;top:-10px;right:16px;background:#2C6E49;color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px}
.note{font-size:.83rem;color:#5c6b64;margin:2px 0 4px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0;
  padding:13px 0;border-block:1px solid #eef3f0}
.stats div{text-align:center}
.stats b{display:block;font-size:1.16rem;font-weight:800;color:#12211a}
.stats span{font-size:.7rem;color:#7c8a83;text-transform:uppercase;letter-spacing:.05em}
.price{display:flex;align-items:baseline;gap:9px}
.now{font-size:1.85rem;font-weight:800;color:#2C6E49;letter-spacing:-.02em}
.was{text-decoration:line-through;color:#9aa8a1;font-size:1rem}
.save{font-size:.83rem;color:#5c6b64;margin:2px 0 13px}
.coupon{display:flex;align-items:center;gap:8px;background:#f6faf7;border:1px dashed #b9d4c4;
  border-radius:10px;padding:8px 11px;margin-bottom:14px;font-size:.8rem}
.coupon span{color:#7c8a83}
.coupon b{font-weight:800;letter-spacing:.06em;color:#2C6E49}
.coupon button{margin-left:auto;background:#2C6E49;color:#fff;border:0;border-radius:6px;
  padding:4px 11px;font-size:.74rem;font-weight:600;cursor:pointer;font-family:inherit}

.club-strip{text-align:center}
.club-strip .sub{max-width:62ch;margin:10px auto 0}
.club-strip .cta-row{justify-content:center;margin-top:18px}
.club-strip .tiny{margin-top:12px}

/* toppers */
.toppers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.topper{background:#fff;border:1px solid #e3ede7;border-radius:14px;padding:17px}
.topper b{display:block;font-size:1rem}
.topper .rank{display:inline-block;background:#fef3c7;color:#92500e;font-size:.72rem;
  font-weight:700;padding:2px 8px;border-radius:5px;margin:5px 0}
.topper span{display:block;font-size:.86rem;font-weight:500}
.topper em{display:block;font-style:normal;font-size:.78rem;color:#7c8a83;margin-top:2px}

/* page head */
.page-head{background:#f6faf7;border-bottom:1px solid #e8efea;padding:52px 0 44px}
.page-head h1{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:800}
.page-head .lede{color:#4a5b52;margin-top:10px}
.closer{background:#f6faf7;border-radius:22px;margin:0 20px 58px;padding:52px 26px}
.closer .btn{width:auto;margin-top:18px}

/* footer */
.foot{background:#12211a;color:#c3d4ca;padding:46px 0 26px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;padding-bottom:26px}
.foot h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:11px}
.foot a{display:block;font-size:.89rem;padding:3px 0;color:#c3d4ca}
.foot a:hover{color:#fff}
.foot .muted{color:#8fa398;font-size:.86rem}
.foot-brand{color:#fff;margin-bottom:9px}
.foot .tiny{border-top:1px solid #24382d;padding-top:18px;color:#7d8f85}

@media(max-width:940px){
  /* Keep the nav usable on phones instead of hiding it: brand + login on the
     top row, links on a full-width second row.

     Breakpoint is 940px, not 640: the desktop bar needs ~918px for brand +
     nine links + Login, so below that the Login button gets pushed past the
     right edge and the whole page scrolls sideways.

     It was 820px when the bar carried EIGHT links. Adding Blog as the ninth
     (10-09-2026) re-created the very bug the previous note describes - the
     Login button clipped in a dead band, this time 820-918px instead of
     640-790px. Measured, not estimated: if a tenth item is ever added, measure
     the header's scrollWidth again and move this number with it.

     The links WRAP rather than sharing one row. They used flex:1, and a flex
     item floors at its min-content width - seven labels plus padding cannot fit
     in 360px, so every page scrolled sideways on every phone. flex-wrap plus
     flex:0 1 auto lets them fall onto a second line instead of forcing the
     document wider than the screen. */
  .nav{flex-wrap:wrap;gap:10px;padding:10px 16px}
  .nav nav{order:3;width:100%;margin-left:0;flex-wrap:wrap;
    justify-content:center;gap:2px 6px;
    border-top:1px solid #eef3f0;padding-top:8px}
  .nav nav a{flex:0 1 auto;text-align:center;padding:7px 10px}
  .btn-sm{margin-left:auto}
  .sec{padding:42px 20px}
  .hero{padding:56px 0 48px}
  .closer{margin:0 16px 44px;padding:38px 20px}
}

.tw{overflow-x:auto;margin-top:12px}
.ptable{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
.ptable th{background:#12211a;color:#fff;text-align:left;padding:10px 12px;font-weight:600}
.ptable th.num,.ptable td.num{text-align:right;white-space:nowrap}
.ptable td{padding:10px 12px;border-bottom:1px solid #e7ede9}
.ptable tr:nth-child(even) td{background:#f6faf7}
.ptable td.nm{font-weight:600}
.ptable td.ex{color:#5c6b64}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:720px){.two{grid-template-columns:1fr}}
.pane{border:1px solid #e7ede9;border-radius:14px;padding:18px 20px;background:#fff}
.pane-h{font-size:1.05rem;margin-bottom:8px;color:#2C6E49}
.pane p{color:#3d4a44;margin-bottom:8px}
.pane .tag{font-weight:700;color:#12211a;margin:0}
.note-line{margin-top:14px;font-size:.92rem}
.topper.big{padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.topper.big .rank{color:#2C6E49;font-weight:700}
.topper.big .post{font-weight:600}
.topper.big .dept{color:#5c6b64;font-size:.9rem}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:14px}
.feat{border:1px solid #e7ede9;border-radius:14px;padding:16px 18px;background:#fff}
.feat .ico{font-size:1.5rem;display:block;margin-bottom:6px}
.feat b{display:block;margin-bottom:4px}
.feat p{color:#5c6b64;font-size:.92rem;margin:0}

.cprice{margin-top:10px;font-weight:800;font-size:1.15rem;color:#12211a}
.cprice span{font-weight:500;font-size:.85rem;color:#5c6b64}
.cprice em{display:block;font-style:normal;font-weight:500;font-size:.85rem;color:#5c6b64}
.course .note{font-size:.85rem;color:#2C6E49;background:#eef6f1;border-radius:8px;
  padding:6px 10px;margin-top:8px}

.steps{display:grid;gap:12px;margin-top:14px}
.step{display:flex;gap:14px;align-items:flex-start;border:1px solid #e7ede9;border-radius:14px;
  padding:16px 18px;background:#fff}
.step .n{flex:0 0 30px;height:30px;border-radius:50%;background:#2C6E49;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.step b{display:block;margin-bottom:3px}
.step p{color:#5c6b64;font-size:.93rem;margin:0}
.callout{margin-top:16px;border-left:4px solid #2C6E49;background:#f2f8f4;border-radius:10px;
  padding:14px 18px;font-size:.94rem;color:#28352f}
.callout.amber{border-left-color:#B8860B;background:#fdf7ea}
.callout b{display:block;margin-bottom:3px}
.sub-h{margin-top:22px;font-size:1.02rem;color:#2C6E49}

.ptable td.code{font-variant-numeric:tabular-nums;color:#5c6b64;font-size:.88rem}
.ptable a.renew{color:#2C6E49;font-weight:700;white-space:nowrap}
.ptable tr.gone td{opacity:.5}

.brand img{height:34px;width:auto;display:block}
.foot-brand img{height:30px;width:auto;filter:brightness(1.06)}
.addr-pane{margin-top:14px}
.addr-pane p{line-height:1.7}
.foot-addr{font-size:.82rem;line-height:1.65;margin-top:12px;max-width:26ch}
.foot-addr a{display:inline;text-decoration:underline}
/* Floating WhatsApp button. Bottom-LEFT on purpose: bottom-right is where the
   browser puts its own download bubble and where most chat widgets sit, and on
   a phone the right thumb rests over it while scrolling.
   Height is set explicitly rather than left to padding, so the pill cannot
   grow when the font or icon changes. */
.wa-float{position:fixed;left:18px;bottom:18px;z-index:60;display:inline-flex;
  align-items:center;gap:7px;background:#25D366;color:#fff;text-decoration:none;
  height:38px;padding:0 14px 0 11px;border-radius:999px;font-weight:600;
  font-size:.78rem;box-shadow:0 4px 14px rgba(0,0,0,.20);
  transition:transform .15s,box-shadow .15s}
.wa-float svg{width:17px;height:17px;flex:none}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.26)}
.wa-float:focus-visible{outline:3px solid #12211a;outline-offset:3px}
@media (max-width:560px){
  /* Icon only on a phone, but never below 44px - that is the minimum tap
     target a thumb can hit reliably. */
  .wa-float{left:14px;bottom:14px;width:46px;height:46px;padding:0;
    justify-content:center;border-radius:50%}
  .wa-float svg{width:22px;height:22px}
  .wa-float-t{display:none}
}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}
.cover{margin:-24px -24px 14px;border-radius:16px 16px 0 0;overflow:hidden;background:#eef3f0;
  aspect-ratio:16/9}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover.plate{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;background:linear-gradient(135deg,#2C6E49,#1a4a30);color:#fff;text-align:center;padding:0 18px}
.cover.plate span{font-weight:800;font-size:1.02rem;line-height:1.25}
.cover.plate em{font-style:normal;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:.75}
.cthumb{margin:-24px -24px 14px;border-radius:16px 16px 0 0;overflow:hidden;aspect-ratio:16/9;
  background:#eef3f0}
.cthumb img{width:100%;height:100%;object-fit:cover;display:block}
.card,.course{overflow:hidden}
.card{box-shadow:0 1px 2px rgba(20,50,35,.04)}
.card:hover,.course:hover{box-shadow:0 10px 30px rgba(20,50,35,.10)}

.ml-h{font-size:1.05rem;color:#2C6E49;margin:-2px 0 12px;font-weight:600;line-height:1.55}
.card,.course{border-top:4px solid var(--trk,#2C6E49)}
.card .lvl,.course .exam{color:var(--trk,#2C6E49)}
.card .lvl{background:var(--trk,#2C6E49);color:#fff;padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cover.plate{background:linear-gradient(135deg,var(--trk,#2C6E49),rgba(0,0,0,.35))}
.card .btn-buy{background:var(--trk,#2C6E49)}
.article{max-width:70ch}
.article h2{margin:26px 0 8px;font-size:1.22rem}
.article p{line-height:1.75;margin:0 0 12px}
.tscroll{overflow-x:auto;margin:14px 0}
.cmp{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.cmp th{background:#12211a;color:#fff;text-align:left;padding:9px 11px;font-weight:600}
.cmp td{padding:9px 11px;border-bottom:1px solid #e7ede9;vertical-align:top}
.cmp tbody tr:nth-child(odd){background:#f6faf7}
.post-card h3{margin:4px 0 6px;font-size:1.06rem;line-height:1.35}
.post-card h3 a{color:inherit}
/* Home-page notes strip and the related-posts block share one card. */
.ngrid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:16px}
@media(min-width:720px){.ngrid{grid-template-columns:repeat(3,1fr)}}
.ncard{display:block;padding:18px;border:1px solid #e3ede7;border-radius:14px;
  background:#fff;transition:.18s}
.ncard:hover{border-color:#bcd8c8;box-shadow:0 4px 16px rgba(20,50,35,.07)}
.ncard b{display:block;margin:6px 0 6px;font-size:.99rem;line-height:1.38;color:#12211a}
.ncard em{display:block;font-style:normal;font-size:.86rem;line-height:1.55;color:#5c6b64}
.related{margin-top:34px;padding-top:24px;border-top:1px solid #e7ede9}
.related h2{font-size:1.1rem;margin-bottom:2px}
.pb0{padding-bottom:0}
.lead-post{display:block;padding:26px;border:1px solid #cfe6d8;border-radius:16px;
  background:#f2f9f5;transition:.18s}
.lead-post:hover{border-color:#9fd0b5;box-shadow:0 6px 22px rgba(20,50,35,.08)}
.lead-post h2{margin:6px 0 8px;font-size:1.38rem;line-height:1.3;color:#12211a}
.lead-post .muted{max-width:68ch}
.ptags{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.ptag{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#4f6058;background:#fff;border:1px solid #cfe0d6;border-radius:20px;padding:2px 9px}
.post-card .ptag{background:#f6faf7}
/* Article blocks. These live in the GLOBAL stylesheet on purpose. The
   membership pages have the same captioned-screenshot treatment, but its rules
   are scoped ".vm .vm-shot" and written inside the membership HTML block - so
   the blog could not reuse a line of it. Styling that lives inside a content
   block looks like shared code and is actually a private copy. */
.article h3{margin:20px 0 6px;font-size:1.04rem;color:#2C6E49}
.article .alist{margin:0 0 14px;padding-left:22px;line-height:1.75}
.article .alist li{margin-bottom:6px}
/* Prose links are underlined; the buttons and the video card are not links in
   that sense. Excluded by selector rather than by overriding afterwards, because
   text-decoration propagates to descendants and a child element CANNOT remove
   an ancestor's underline - ".ytcard b{text-decoration:none}" would have looked
   like the fix and changed nothing on screen. */
.article a:not(.btn):not(.ytcard){color:#2C6E49;font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.apull{margin:18px 0;padding:2px 0 2px 18px;border-left:3px solid #2C6E49;
  font-size:1.06rem;line-height:1.65;color:#12211a;font-weight:500}
.apull cite{display:block;margin-top:6px;font-size:.84rem;font-style:normal;
  font-weight:600;color:#7c8a83}
.shot{margin:20px 0;border:1px solid #e7ede9;border-radius:14px;overflow:hidden;
  background:#fff;box-shadow:0 2px 10px rgba(20,50,35,.06)}
.shot img{width:100%;height:auto;display:block;border-bottom:1px solid #e7ede9}
.shot figcaption{padding:12px 15px;font-size:.85rem;line-height:1.55;color:#5c6b64}
.shot figcaption a{font-size:.85rem}
/* A screenshot is unreadable at 70ch, so the wide variant breaks out of the
   text column. It grows EVENLY on both sides, because the article element
   carries .wrap as well as .article and so keeps margin:0 auto - it is
   centred, not left-aligned, and widening in one direction only reads as a
   misalignment rather than as a deliberate break-out.
   Only above 1040px, where the surrounding slack is known to exist. */
.shot-wide{width:100%}
@media(min-width:1040px){
  .shot-wide{width:128%;max-width:900px;position:relative;left:50%;
    transform:translateX(-50%)}
}
.offer{margin:22px 0;padding:16px 18px;border:1px solid #cfe6d8;border-radius:14px;
  background:#f2f9f5}
.offer b{display:block;margin-bottom:5px;font-size:1rem;color:#12211a}
.offer p{margin:0 0 12px;font-size:.92rem;line-height:1.65;color:#3d4c45}
.offer .btn{padding:10px 18px;font-size:.9rem}
.acta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.ytcard{display:flex;align-items:center;gap:14px;margin:20px 0;padding:14px 16px;
  border:1px solid #e7ede9;border-radius:14px;background:#fff;text-decoration:none}
.ytcard:hover{background:#f6faf7}
.ytplay{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#e53935;
  color:#fff;display:grid;place-items:center;font-size:.9rem}
.ytcard b{display:block;font-size:.95rem;color:#12211a;text-decoration:none}
.ytcard em{display:block;font-style:normal;font-size:.85rem;color:#5c6b64;margin-top:2px}
.rstrip{display:grid;grid-auto-flow:column;grid-auto-columns:min(88%,620px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.rslide{scroll-snap-align:center;margin:0;border-radius:14px;overflow:hidden;
  border:1px solid #e7ede9;background:#eef3f0;box-shadow:0 2px 10px rgba(20,50,35,.06)}
.rslide img{width:100%;height:auto;display:block}
.topper .cat{display:block;font-size:.74rem;color:#7c8a83;margin-top:3px}
.est-pane{margin:6px 0 16px;border-left:3px solid var(--accent-g,#2C6E49)}
.tstat em.est{opacity:.85}

.band .rslide{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.band .rstrip{padding-bottom:14px}
.band .rstrip::-webkit-scrollbar{height:8px}
.band .rstrip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:8px}
.cmore{display:block;text-align:center;margin-top:9px;font-size:.85rem;
  font-weight:600;color:var(--trk,#2C6E49)}
.cmore:hover{text-decoration:underline}
.syl{list-style:none;counter-reset:m;padding:0;margin:14px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.syl li{counter-increment:m;background:#f6faf7;border:1px solid #e7ede9;border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.syl li::before{content:"M" counter(m,decimal-leading-zero);font-size:.7rem;font-weight:800;
  letter-spacing:.08em;color:var(--trk,#2C6E49)}
.syl b{font-size:.95rem;line-height:1.4}
.mch{font-size:.8rem;color:#5c6b64}
/* The bare .lede is near-white (#d6e8dd) because it sits on the dark hero;
   only .page-head .lede is dark. A section intro on a white background needs
   its own colour or it renders invisible. */
.sec-intro{font-size:1.05rem;max-width:60ch;color:#3d4a44;margin-top:6px}
.chero{margin:0 0 18px;border-radius:16px;overflow:hidden;border:1px solid #e7ede9}
.chero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.syl-c li::before{content:"COURSE " counter(m,decimal-leading-zero)}
.sylimg{margin:-12px -14px 10px;border-bottom:1px solid #e7ede9;overflow:hidden}
.sylimg img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.tryfree{margin-top:6px;align-self:flex-start;font-size:.78rem;font-weight:700;
  color:#0f5132;background:#dff3e6;border:1px solid #b7e0c6;border-radius:999px;
  padding:5px 12px;text-decoration:none}
.tryfree:hover{background:#cfeeda}
.course .more{color:var(--trk,#2C6E49)}
.ribbon{background:var(--trk,#2C6E49)}
/* Secondary on purpose. The preview is the low-commitment path, so it sits
   under the buy button in a quieter weight - it should be easy to find and
   never compete with Get Access. Border picks up the track colour so the two
   buttons still read as one pair. */
.btn-preview{display:block;background:#fff;color:var(--trk,#2C6E49);
  border:1.5px solid var(--trk,#cfe3d7);width:100%;text-align:center;
  margin-top:8px;box-shadow:none;font-size:.88rem}
.btn-preview:hover{background:#f4f9f6}
.btn-preview::after{content:" ↗";font-weight:700;opacity:.55}

/* Three columns: the words, Sir, and the decision box. The picker is the
   reason someone stops scrolling, so it sits in the hero rather than below it. */
.hero-grid{display:grid;grid-template-columns:1.04fr .66fr 1.04fr;gap:22px;align-items:end}
.hero-copy{padding:14px 0 34px}
.hero h1{font-size:clamp(1.9rem,4.4vw,3.05rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.12;margin-bottom:8px}
.ml-hero{font-size:clamp(1.1rem,2.2vw,1.4rem);color:#fff;font-weight:600;margin-bottom:14px;line-height:1.55}
.hero .lede{max-width:34em}
.proof{list-style:none;margin:16px 0 4px;padding:0;display:grid;gap:6px}
.proof li{position:relative;padding-left:20px;font-size:.95rem;color:#e7f3ec}
.proof li:before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:#9ed8b6}
.proof b{font-weight:800;color:#fff}
.hero-photo{display:flex;justify-content:flex-end;align-items:flex-end}
.hero-photo img{width:100%;max-width:340px;height:auto;display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.30))}
@media(max-width:1040px){
  /* Three columns stop fitting long before the phone breakpoint. Copy first,
     then the decision box, then the photo: someone on a laptop should meet the
     "what is your qualification?" question without scrolling past a portrait. */
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-copy{grid-column:1 / -1}
  .picker{grid-column:1 / -1;order:2}
  .hero-photo{grid-column:1 / -1;order:3}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  /* On a phone the generic "Browse E-Books / See Courses" pair asks the visitor
     to make the same choice the decision box makes for them, one screen apart.
     Two answers to one question is worse than one. The box wins on a phone:
     it is specific, it names the price, and it is the reason this hero exists.
     The buttons stay on wider screens, where both fit without a scroll. */
  .hero .cta-row, .hero-copy .tiny{display:none}
  .hero-copy{padding:10px 0 18px}
  .proof{margin:12px 0 0}
  /* Do NOT hide the photo here. Santhosh Sir is the face of the business and
     most visitors arrive on a phone, so hiding him below 860px removed him for
     the majority of the audience - and an element that disappears at one width
     is invisible to every check that looks at the markup. It stays, centred and
     smaller, so the buttons above it still land near the top of the screen. */
  .hero-photo{justify-content:center;margin-top:6px}
  .hero-photo img{max-width:230px}
}
@media(max-width:560px){
  .hero-photo img{max-width:180px}
}

.notice{background:#12211a;color:#fff;font-size:.92rem}
.notice .wrap{padding:10px 20px}
.notice a{color:#9ed8b6;font-weight:700;text-decoration:underline}
.dates{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.dates li{border:1px solid #e7ede9;border-left:4px solid #E65100;border-radius:12px;
  padding:14px 18px;background:#fff}
.dates b{display:block}
.dates .when{display:block;font-size:.86rem;font-weight:700;color:#E65100;margin:2px 0 4px}
.dates em{font-style:normal;color:#5c6b64;font-size:.92rem}
.center-row{justify-content:center}
.foot h4.mt{margin-top:14px}

.ml-title{font-size:clamp(1.5rem,3.6vw,2.5rem);font-weight:700;line-height:1.45;
  letter-spacing:0}
.ml-title.sm{font-size:clamp(1.15rem,2.4vw,1.6rem);margin-bottom:6px}
.ml-sub{color:#fff;font-weight:600;margin:8px 0 12px;line-height:1.55;font-size:1.02rem}
/* .page-head is built for a light background: its h1 inherits near-black and
   its lede is dark grey. A dark variant must restate BOTH, not just the
   background - otherwise the heading disappears into it. */
.live-head{background:linear-gradient(135deg,#12211a,#2C6E49);border-bottom:0;color:#fff}
.live-head h1,.live-head .ml-title{color:#fff}
.live-head .lede{color:#e2f1e8}
.live-head .eyebrow{color:#9ed8b6}
.segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;
  margin-top:14px}
.seg{border:1px solid #e7ede9;border-left:4px solid #E53935;border-radius:14px;
  padding:16px 18px;background:#fff}
.seg h3{font-size:1.12rem;line-height:1.55;font-weight:700}
.seg-en{color:#E53935;font-weight:700;font-size:.8rem;letter-spacing:.04em;margin:2px 0 6px}
.seg p{color:#5c6b64;font-size:.92rem;margin:0}
.live-card{display:flex;gap:18px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;border:1px solid #e7ede9;border-left:5px solid #E53935;border-radius:16px;
  padding:20px 24px;background:#fff}
.live-card .muted{max-width:52ch}

/* Malayalam needs a little more room and weight than Latin at the same size */
.tiny{line-height:1.6}
.hero .tiny,.live-head .tiny{color:#dcefe3}
.dates b,.seg h3,.ml-h,.ml-hero,.ml-sub,.ml-title{letter-spacing:0}

.biz{margin-top:18px;color:#8a968f;font-size:.82rem}