/* =====================================================================
   अनुभवी हाथ, नई सोच — DP यादव जी · RPD · UP 2027  —  v2 "Tiranga Light"
   Tricolour-inspired LIGHT theme (guardrail-safe: a marigold-amber band stands
   in for the flag's warm band; navy = Ashoka-chakra blue). No forbidden hues.
   ===================================================================== */

:root{
  /* tricolour-inspired palette */
  --amber:#E0921F;          /* marigold-amber — the warm tiranga band (guardrail-safe) */
  --amber-soft:#F4BE5E;
  --amber-deep:#B26E12;
  --amber-text:#96590E;      /* AA-safe amber for TEXT on light bg (amber-deep fails at ~4.1:1) */
  --gold:#D99A1C; --gold-soft:#F1CB6B; --gold-deep:#A9770F;
  --green:#1F7A47; --green-soft:#35A66E; --green-deep:#14552F;
  --navy:#1B2A5C;           /* Ashoka-chakra blue / ink */
  --navy-700:#152044; --navy-900:#0C1430;

  /* surfaces (light) */
  --bg:#FBF9F3;             /* warm near-white page */
  --surface:#FFFFFF;
  --cream:#FBF2DF;          /* warm tint band */
  --blush:#FCEFD8;          /* amber tint */
  --mist:#EDF5EF;           /* green tint */
  --line:rgba(27,42,92,.10);

  --ink:#1E2647;
  --text:#2a3150;
  --muted:#5f6884;

  /* type */
  /* Leading is a property of the FACE, not of the size. Each number below is that face's own
     designed line box — (hhea.ascent - hhea.descent + lineGap) / unitsPerEm — read directly from
     the shipped woff2 with fontTools. Setting line-height below a face's box makes the ink of
     consecutive lines physically overlap; in Devanagari the upper matras of one line land on the
     descenders of the line above. The hero was at 0.98 against a required 1.478 — a 16px overlap
     at 32px, which is exactly the "line through नई सोच" that was visible on screen. */
  /* Brand colours used as TEXT need a dark-theme counterpart; the same hexes used as BACKGROUNDS
     must not move. --navy stayed navy in dark mode, so ~99 text declarations were painting
     #1B2A5C on a #15224a surface — about 1.1:1, i.e. invisible. These two tokens carry the text
     role only; --navy/--green keep their fill role untouched. */
  --ink-brand: #1B2A5C;
  --ink-green: #14552F;

  --lh-yatra: 1.48;   /* Yatra One             (991 + 487)/1000 = 1.478 */
  --lh-tiro:  1.60;   /* Tiro Devanagari Hindi (755 + 245 + 330 gap)/1000 = 1.330, rounded up for comfort */
  --lh-mukta: 1.72;   /* Mukta                 (1130 + 532)/1000 = 1.662 */

  --lh-display: var(--lh-yatra);
  --lh-head:    var(--lh-yatra);
  --lh-sub:     var(--lh-tiro);
  --lh-body:    var(--lh-mukta);
  --dv-head:"Yatra One", system-ui, serif;
  --dv-body:"Mukta", system-ui, sans-serif;
  --dv-sub:"Tiro Devanagari Hindi", serif;
  --en-serif:"Fraunces", Georgia, serif;
  --en-ui:"Inter", system-ui, sans-serif;

  --wrap:1180px; --r:20px;
  --shadow:0 24px 60px -28px rgba(27,42,92,.32);
  --shadow-sm:0 12px 30px -18px rgba(27,42,92,.30);
  --glow-amber:0 14px 36px -14px rgba(224,146,31,.6);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--dv-body);font-size:clamp(1rem,1.05vw,1.125rem);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Honest Devanagari metrics (audit W1.6): Latin negative tracking crowds the shirorekha and squeezes
   conjuncts; zero-track Devanagari, re-apply tight tracking only for Latin headings. */
h1,h2,h3{margin:0;line-height:var(--lh-head);letter-spacing:0}
h1[lang="en"],h2[lang="en"],h3[lang="en"],html[data-lang="en"] h1,html[data-lang="en"] h2,html[data-lang="en"] h3{letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px);position:relative;z-index:2}

/* gradient accent text — surface-split for contrast (audit W1.6):
   light surfaces get deep, AA-safe stops (no more 1.6:1 washout of the emphasized half of headlines)
   and NO infinite animation (stops perpetual repaint of the LCP headline);
   dark/inverted surfaces keep the bright stops + the slow shimmer, where contrast is safe. */
/* WAVE U1: this used to paint headline words with a 100deg dark→bright→dark gradient across a
   220% background. On a short word ("नई सोच") the bright mid-stop swept through the glyphs and read
   as a stripe through the text, and the bright middle failed contrast on cream. A headline the user
   must READ is the wrong place for decorative gradient text — solid, AA-safe gold instead. Gold
   gradients stay where they belong: buttons and large surfaces. */
.gold,.grad{color:var(--amber-text);background:none;-webkit-text-fill-color:currentColor}
.section--night .gold,.section--indigo .gold,.sec-head--invert .gold,
.section--night .grad,.section--indigo .grad{
  background-image:linear-gradient(100deg,var(--amber),var(--gold-soft) 40%,var(--amber-deep));
  animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:220% center}}
@media (prefers-reduced-motion:reduce){.section--night .gold,.section--indigo .gold,.sec-head--invert .gold{animation:none}}
.indigo{color:var(--ink-brand)}
.hash{color:var(--amber-text);font-weight:700;font-family:var(--en-ui)}

:focus-visible{outline:3px solid var(--amber-deep);outline-offset:3px;border-radius:6px}
.skip-link{position:fixed;left:12px;top:-60px;z-index:300;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;transition:top .2s}
.skip-link:focus{top:12px}

/* tricolour scroll progress */
.scrollbar{position:fixed;top:0;left:0;height:4px;width:100%;z-index:250;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber),var(--gold-soft) 50%,var(--green));box-shadow:0 1px 8px rgba(224,146,31,.5)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5em;font-family:var(--dv-body);font-weight:700;
  padding:.72em 1.4em;border-radius:999px;border:1.5px solid transparent;cursor:pointer;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;font-size:.98rem;line-height:1}
.btn--lg{padding:.98em 1.8em;font-size:1.05rem}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn:hover::after{left:140%}
.btn--gold{background:linear-gradient(120deg,var(--amber-soft),var(--amber));color:var(--navy-900);box-shadow:var(--glow-amber)}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(224,146,31,.85)}
.btn--indigo{background:var(--navy);color:#fff}
.btn--indigo:hover{transform:translateY(-3px);background:var(--navy-700);box-shadow:var(--shadow)}
.btn--ghost{background:rgba(27,42,92,.04);border-color:rgba(27,42,92,.28);color:var(--ink-brand)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber-text);transform:translateY(-3px)}

/* =====================================================================
   NAV (glass)
   ===================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s var(--ease),box-shadow .35s,backdrop-filter .35s}
.nav__inner{max-width:1300px;margin:0 auto;padding:13px clamp(16px,4vw,40px);display:flex;align-items:center;gap:18px}
.nav.is-stuck{background:rgba(251,249,243,.82);backdrop-filter:saturate(150%) blur(16px);box-shadow:0 1px 0 var(--line),0 16px 34px -28px rgba(27,42,92,.5)}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand__mark{width:46px;height:46px;filter:drop-shadow(0 6px 14px rgba(27,42,92,.3))}
.brand__lock{display:flex;flex-direction:column;line-height:1}
.brand__rpd{font-family:var(--en-serif);font-weight:700;letter-spacing:.12em;color:var(--ink-brand);font-size:1.15rem}
.brand__name{font-family:var(--dv-sub);font-size:.74rem;color:var(--amber-text);margin-top:2px}
.nav.is-light .brand__rpd{color:#fff}.nav.is-light .brand__name{color:var(--gold-soft)}
.nav__links{display:flex;gap:clamp(8px,1.4vw,22px);align-items:center}
.nav__links a{font-weight:600;font-size:.96rem;color:var(--ink-brand);position:relative;padding:6px 2px;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:linear-gradient(90deg,var(--amber),var(--green));transition:right .3s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-current::after{right:0}
.nav.is-light .nav__links a{color:#f3eeda}
.nav__actions{display:flex;align-items:center;gap:12px}
.lang-toggle{display:inline-flex;align-items:center;gap:5px;background:rgba(27,42,92,.06);border:1.5px solid rgba(27,42,92,.16);border-radius:999px;padding:6px 12px;cursor:pointer;font-family:var(--en-ui);font-weight:600;font-size:.82rem;color:var(--ink-brand)}
.lang-toggle__opt{opacity:.5;transition:opacity .2s}.lang-toggle__opt.is-on{opacity:1;color:var(--amber-text)}
.lang-toggle__sep{opacity:.4}
.nav.is-light .lang-toggle{color:#fff;border-color:rgba(244,236,216,.3);background:rgba(244,236,216,.1)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.3s var(--ease)}
.nav.is-light .nav__burger span{background:#fff}

/* =====================================================================
   HERO (light · aurora · chakra)
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.hero__sky{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__aurora{position:absolute;inset:-25%;background:
  radial-gradient(38% 48% at 18% 28%,rgba(224,146,31,.22),transparent 60%),
  radial-gradient(42% 52% at 84% 22%,rgba(31,122,71,.16),transparent 60%),
  radial-gradient(46% 58% at 62% 92%,rgba(27,42,92,.13),transparent 60%),
  radial-gradient(40% 50% at 92% 78%,rgba(241,203,107,.24),transparent 60%);
  animation:aurora 20s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(2.5%,-2%,0) scale(1.06)}}
.hero__chakra{position:absolute;top:-10%;right:-7%;width:min(48vw,580px);aspect-ratio:1;color:var(--ink-brand);opacity:.07;animation:spin 90s linear infinite}
.hero__chakra svg{width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__sun{position:absolute;left:58%;top:30%;width:min(34vw,400px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(244,190,94,.55),rgba(224,146,31,.18) 45%,transparent 68%);border-radius:50%;
  animation:sunrise 2s var(--ease) both}
@keyframes sunrise{from{opacity:0;transform:translate(-50%,-32%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.hero__rays{position:absolute;left:58%;top:30%;width:120vw;height:120vw;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(224,146,31,.05) 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 58%);mask:radial-gradient(circle,#000 0,transparent 58%);animation:spin 120s linear infinite}
.hero__grid{position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(31,122,71,.07) 55%,rgba(224,146,31,.08));
  -webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%)}
.hero__leaves{position:absolute;inset:0;overflow:hidden}
.hero__leaves .lf{position:absolute;color:var(--ink-green);opacity:0;width:22px}
@keyframes drift{0%{opacity:0;transform:translateY(-10vh) rotate(0)}10%{opacity:.4}100%{opacity:0;transform:translateY(110vh) rotate(220deg)}}

.hero__inner{position:relative;z-index:3;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,5vw,64px);align-items:center;width:100%;max-width:1260px;margin:0 auto;padding:120px clamp(20px,5vw,48px) 90px}
.eyebrow{font-family:var(--dv-sub);letter-spacing:.05em;color:var(--amber-text);font-size:.92rem;margin-bottom:18px;display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(224,146,31,.35);padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,122,71,.18)}
.hero__title{font-family:var(--dv-head);color:var(--ink);font-size:clamp(3.1rem,8.6vw,6.6rem);line-height:var(--lh-display);text-shadow:0 2px 0 rgba(255,255,255,.5)}
.hero__prop{font-family:var(--dv-sub);color:var(--ink-brand);font-size:clamp(1.15rem,2.3vw,1.6rem);margin-top:22px;max-width:30ch}
.hero__sub{font-family:var(--en-serif);font-style:italic;color:var(--muted);margin-top:14px;font-size:1.02rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__tag{margin-top:26px;color:var(--muted);font-size:.92rem;letter-spacing:.02em}
.hero__portrait{display:flex;justify-content:center}
.hero__scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.78rem;font-family:var(--en-ui);letter-spacing:.14em;text-transform:uppercase}
.hero__scroll-line{width:1px;height:42px;background:linear-gradient(var(--amber),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--amber);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{to{top:100%}}

/* ---------- photo frames (IMMERSIVE — feathered into the page) ---------- */
.frame{margin:0;position:relative}
.frame__media{position:relative;background:transparent;display:block;overflow:visible;transition:transform .5s var(--ease)}
.frame--hero .frame__media{aspect-ratio:4/5;min-height:380px}
.frame--pillar .frame__media{aspect-ratio:4/5;min-height:300px}
.frame--portraitwide .frame__media{aspect-ratio:5/4;min-height:320px}
/* warm tricolour glow halo behind the photo */
.frame__media::before{content:"";position:absolute;inset:-10% -8%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,146,31,.24),rgba(31,122,71,.08) 58%,transparent 78%);filter:blur(30px)}
/* the photo: edges feather to transparent so the section bg shows through */
.frame__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;border-radius:14px;
  -webkit-mask-image:radial-gradient(ellipse 66% 64% at 50% 45%,#000 64%,rgba(0,0,0,.38) 87%,transparent 100%);
  mask-image:radial-gradient(ellipse 66% 64% at 50% 45%,#000 64%,rgba(0,0,0,.38) 87%,transparent 100%);
  filter:drop-shadow(0 30px 46px rgba(27,42,92,.28)) drop-shadow(0 4px 12px rgba(27,42,92,.16))}
.frame__crest{width:84px;height:84px;opacity:.92}
.frame__ic{width:64px;height:64px;color:var(--gold-soft)}
/* caption sits BELOW the feathered photo, in the page (not a hard strip) */
.frame__cap{position:absolute;top:100%;left:5%;right:5%;margin-top:10px;z-index:2;text-align:center;
  font-family:var(--dv-sub);color:var(--muted);font-size:.82rem;line-height:1.35;background:none}
.frame__cap em{font-family:var(--en-serif);color:var(--amber-text)}
.frame--hero .frame__cap{display:none}
.section--indigo .frame__cap{color:rgba(243,238,218,.72)}
.section--indigo .frame__cap em{color:var(--gold-soft)}
.frame__name{margin-top:18px;text-align:center;font-family:var(--dv-sub);color:var(--ink-brand);font-size:1.06rem;font-weight:600}
.section--indigo .frame__name{color:var(--gold-soft)}

/* =====================================================================
   MARQUEE (navy accent)
   ===================================================================== */
.marquee{background:linear-gradient(90deg,var(--navy-900),var(--navy));color:#fff;overflow:hidden;padding:15px 0;border-top:3px solid var(--amber);border-bottom:3px solid var(--green)}
.marquee__track{display:inline-flex;align-items:center;gap:26px;white-space:nowrap;font-family:var(--dv-head);font-size:1.12rem;animation:marq 40s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track i{color:var(--gold-soft);font-style:normal}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =====================================================================
   SECTIONS
   ===================================================================== */
.section{position:relative;padding:clamp(70px,10vw,128px) 0}
.section--light{background:var(--surface)}
.section--cream{background:var(--cream)}
.section--mist{background:var(--mist)}
.section--indigo{background:radial-gradient(120% 90% at 80% 0%,var(--navy),var(--navy-900));color:#f3eeda}
.section--night{background:radial-gradient(120% 100% at 80% 0%,#1b2a5c,#0a1124 72%);color:#f3eeda}
.section--gold-band{background:linear-gradient(125deg,var(--amber-soft),var(--amber) 55%,#cf8a1c)}
.section--indigo::before,.section--night::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--gold-soft),var(--green))}

.sec-head{max-width:760px;margin:0 auto clamp(38px,5vw,62px);text-align:center}
.sec-head__eyebrow{font-family:var(--dv-sub);letter-spacing:.05em;color:var(--amber-text);font-size:.96rem;margin-bottom:16px;position:relative;display:inline-block;padding-bottom:12px}
.sec-head__eyebrow::after{content:"";position:absolute;left:50%;bottom:0;width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--green));transform:translateX(-50%)}
.sec-head--invert .sec-head__eyebrow{color:var(--gold-soft)}
.sec-head__title{font-family:var(--dv-head);font-size:clamp(2rem,5vw,3.5rem);color:var(--ink)}
.sec-head--invert .sec-head__title{color:#fff}
.sec-head__title--left{text-align:left}
.sec-head__lede{font-family:var(--dv-sub);color:var(--muted);font-size:clamp(1.05rem,1.7vw,1.26rem);margin-top:20px;line-height:1.65}
.sec-head__lede--invert{color:rgba(243,238,218,.85)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}.reveal[data-d="4"]{transition-delay:.28s}.reveal[data-d="5"]{transition-delay:.35s}

/* =====================================================================
   STATS + TRAITS
   ===================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 auto clamp(40px,6vw,70px);max-width:900px}
.stat{text-align:center;padding:24px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--green))}
.stat__num{font-family:var(--en-serif);font-weight:600;font-size:clamp(2.2rem,5vw,3.3rem);color:var(--amber-text);line-height:1}
.stat__suf{font-family:var(--en-serif);color:var(--amber-text);font-size:1.6rem;vertical-align:top}
.stat__lbl{display:block;font-family:var(--dv-sub);color:var(--ink-brand);margin-top:6px;font-size:.92rem}
.traits{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.trait{background:var(--surface);border-radius:var(--r);padding:28px 24px;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;position:relative;overflow:hidden}
.trait::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--amber),var(--green));transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.trait:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(224,146,31,.4)}
.trait:hover::before{transform:scaleY(1)}
.trait h3{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.5rem;margin-bottom:8px}
.trait p{color:var(--muted);font-size:.98rem}

/* =====================================================================
   TIMELINE (light)
   ===================================================================== */
.timeline{list-style:none;margin:0 auto;padding:0;position:relative;max-width:900px}
.timeline::before{content:"";position:absolute;left:24px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(var(--amber),var(--green))}
.tl{position:relative;padding:0 0 34px 70px}
.tl__dot{position:absolute;left:14px;top:6px;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--amber);box-shadow:0 0 0 5px rgba(224,146,31,.14)}
.tl__card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 26px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s}
.tl__card:hover{transform:translateX(8px);box-shadow:var(--shadow)}
.tl__no{font-family:var(--dv-head);color:var(--amber-text);font-size:1.1rem;letter-spacing:.1em}
.tl__card h3{font-family:var(--dv-head);color:var(--ink-brand);font-size:clamp(1.3rem,2.6vw,1.7rem);margin:4px 0 10px}
.tl__card p{color:var(--muted);font-size:1rem}
.tl__card--gold{background:linear-gradient(135deg,var(--blush),#fff);border-color:rgba(224,146,31,.4)}
.tl__card--gold strong{color:var(--amber-text)}

/* =====================================================================
   PILLARS
   ===================================================================== */
.pillars__tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:38px}
.ptab{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:11px 20px;cursor:pointer;font-family:var(--dv-body);font-weight:700;font-size:1rem;color:var(--ink-brand);transition:.3s var(--ease);box-shadow:var(--shadow-sm)}
.ptab svg{width:24px;height:24px;color:var(--amber-text);transition:transform .3s}
.ptab:hover{border-color:var(--amber);transform:translateY(-3px)}
.ptab.is-active{background:linear-gradient(120deg,var(--navy),var(--navy-700));color:#fff;border-color:var(--navy)}
.ptab.is-active svg{color:var(--gold-soft);transform:scale(1.12)}
.panel{display:none;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,54px);align-items:center}
.panel.is-active{display:grid;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel__hash{font-family:var(--en-ui);font-weight:700;color:var(--ink-green);font-size:.86rem;letter-spacing:.02em}
.panel__anthem{font-family:var(--dv-head);color:var(--ink-brand);font-size:clamp(1.8rem,4vw,2.8rem);margin:10px 0 16px}
.panel__anthem .resp{position:relative;white-space:nowrap;background:linear-gradient(100deg,var(--amber),var(--amber-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.panel__anthem .resp::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--amber),var(--gold-soft));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .15s}
.panel.is-active .panel__anthem .resp::after{transform:scaleX(1)}
.panel__lede{font-family:var(--dv-sub);color:var(--text);font-size:1.1rem;margin-bottom:18px;line-height:1.6}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.checks li{position:relative;padding-left:34px;color:var(--text);font-size:1.02rem}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-soft),var(--amber));box-shadow:0 4px 10px -4px var(--amber)}
.checks li::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:14px}
.gtile{position:relative;overflow:hidden;border-radius:18px;margin:0;box-shadow:0 20px 46px -24px rgba(27,42,92,.5)}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);background:linear-gradient(160deg,#26356b,#16224a)}
.gtile:hover img{transform:scale(1.07)}
.gtile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 16px 13px;font-family:var(--dv-sub);color:#fff;font-size:.9rem;background:linear-gradient(180deg,transparent,rgba(12,20,48,.82))}
.gtile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 70px rgba(12,20,48,.30);border:0 solid var(--amber);transition:border-width .3s}
.gtile:hover::after{border-width:3px}
.gtile--big{grid-column:span 2;grid-row:span 2}
.gtile--big figcaption{font-size:1.15rem;font-family:var(--dv-head);padding:44px 22px 18px}
@media (max-width:720px){.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.gtile--big{grid-column:span 2;grid-row:span 2}}
@media (max-width:460px){.gallery{grid-template-columns:1fr;grid-auto-rows:240px}.gtile--big{grid-row:span 1}}

/* =====================================================================
   ISSUES & SOLUTIONS (accordion)
   ===================================================================== */
.accordion{max-width:940px;margin:0 auto;display:grid;gap:14px}
.acc{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:16px;
  box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .3s,border-color .3s}
.acc.is-open{box-shadow:var(--shadow);border-left-color:var(--green)}
.acc__head{width:100%;display:flex;align-items:center;gap:16px;padding:20px 22px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.acc__ic{width:32px;height:32px;color:var(--amber-text);flex:none;transition:color .3s}
.acc.is-open .acc__ic{color:var(--ink-green)}
.acc__t{display:flex;flex-direction:column;gap:3px;margin-right:auto}
.acc__t strong{font-family:var(--dv-head);color:var(--ink-brand);font-size:clamp(1.15rem,2.3vw,1.4rem);font-weight:400;line-height:var(--lh-head)}
.acc__t em{font-style:normal;color:var(--muted);font-size:.9rem;font-family:var(--dv-sub);line-height:1.4}
.acc__plus{position:relative;width:22px;height:22px;flex:none}
.acc__plus::before,.acc__plus::after{content:"";position:absolute;background:var(--amber-deep);border-radius:2px;transition:transform .35s var(--ease),background .3s}
.acc__plus::before{top:10px;left:0;width:22px;height:2px}
.acc__plus::after{top:0;left:10px;width:2px;height:22px}
.acc.is-open .acc__plus::before,.acc.is-open .acc__plus::after{background:var(--green)}
.acc.is-open .acc__plus::after{transform:scaleY(0)}
.acc__body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc.is-open .acc__body{max-height:680px}
.acc__body ul{padding:2px 26px 26px 26px}
.acc__body .checks{gap:12px}
.acc__body .checks li{font-size:1rem}

/* =====================================================================
   AI SHOWCASE (dark feature)
   ===================================================================== */
.section--night .ai-stars{position:absolute;inset:0;overflow:hidden;z-index:0;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(244,236,216,.7),transparent),radial-gradient(1.5px 1.5px at 70% 20%,rgba(241,203,107,.7),transparent),radial-gradient(1px 1px at 40% 70%,rgba(244,236,216,.5),transparent),radial-gradient(1.5px 1.5px at 85% 60%,rgba(241,203,107,.6),transparent),radial-gradient(1px 1px at 55% 45%,rgba(244,236,216,.5),transparent),radial-gradient(1px 1px at 12% 80%,rgba(244,236,216,.5),transparent)}
.saathi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.saathi__card{background:linear-gradient(160deg,rgba(244,236,216,.09),rgba(244,236,216,.03));border:1px solid rgba(241,203,107,.25);border-radius:var(--r);padding:26px 22px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;position:relative;overflow:hidden}
.saathi__card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 0% 0%,rgba(224,146,31,.18),transparent 55%);opacity:0;transition:opacity .35s}
.saathi__card:hover{transform:translateY(-8px);border-color:var(--amber);box-shadow:0 28px 52px -28px rgba(0,0,0,.7)}
.saathi__card:hover::after{opacity:1}
.saathi__card--wide{grid-column:span 2;background:linear-gradient(135deg,rgba(224,146,31,.18),rgba(244,236,216,.04));border-color:rgba(224,146,31,.4)}
.saathi__n{font-family:var(--dv-head);color:var(--gold-soft);font-size:1rem;letter-spacing:.12em}
.saathi__card h3{font-family:var(--dv-head);color:#fff;font-size:1.45rem;margin:8px 0 10px}
.saathi__card p{color:rgba(243,238,218,.82);font-size:.98rem}
.ai-quote{margin:clamp(36px,5vw,56px) auto 0;max-width:760px;text-align:center;border:0;font-family:var(--dv-head);font-size:clamp(1.4rem,3vw,2.1rem);color:#fff;line-height:1.4;padding:0 16px}

/* =====================================================================
   SANKALP
   ===================================================================== */
.sankalp-filter{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px}
.chip{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:8px 18px;cursor:pointer;font-family:var(--dv-body);font-weight:600;color:var(--ink-brand);transition:.25s var(--ease)}
.chip:hover{border-color:var(--amber)}
.chip.is-active{background:linear-gradient(120deg,var(--amber),var(--amber-deep));border-color:var(--amber);color:var(--navy-900);font-weight:700}
.sankalp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.sk{background:var(--surface);border-radius:18px;padding:24px 24px 26px;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;border-top:3px solid var(--amber)}
.sk[data-cat="shiksha"]{border-top-color:var(--green)}.sk[data-cat="ai"]{border-top-color:var(--navy)}
.sk[data-cat="mahila"]{border-top-color:var(--amber-text)}.sk[data-cat="khel"]{border-top-color:var(--green-soft)}.sk[data-cat="sewa"]{border-top-color:var(--gold-deep)}
.sk:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(224,146,31,.4)}
.sk.is-hide{display:none}
.sk__tag{font-family:var(--dv-sub);font-size:.8rem;color:#fff;background:var(--green);padding:3px 12px;border-radius:999px;display:inline-block;margin-bottom:12px}
.sk h3{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.32rem;margin-bottom:9px;line-height:var(--lh-head)}
.sk p{color:var(--muted);font-size:.97rem}
.sankalp-seal{text-align:center;font-family:var(--dv-head);font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--ink-brand);margin-top:clamp(36px,5vw,56px)}

/* =====================================================================
   PARIVAR (dark feature)
   ===================================================================== */
.parivar{display:grid;grid-template-columns:1fr .85fr;gap:clamp(28px,5vw,60px);align-items:center}
.parivar__lede{font-family:var(--dv-sub);color:rgba(243,238,218,.86);font-size:1.12rem;margin:20px 0 22px;line-height:1.65}
.parivar__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.parivar__list li{padding-left:22px;position:relative;color:rgba(243,238,218,.8)}
.parivar__list li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:50%;background:var(--gold-soft)}
.parivar__list strong{color:#fff}

/* =====================================================================
   MAP
   ===================================================================== */
.map-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:center}
/* real UP districts map */
.upmap{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 24px 50px -28px rgba(27,42,92,.5))}
.upmap .d{stroke:#fff;stroke-width:.8;stroke-linejoin:round;transition:fill .25s var(--ease),filter .25s;cursor:pointer}
.upmap .d--other{fill:#E7E0CD}
.upmap .d--west{fill:var(--amber-soft)}
.upmap .d--core{fill:var(--amber)}
.upmap .d--core{stroke:#fff;stroke-width:1.1}
.upmap .d:hover{fill:var(--green-soft);filter:drop-shadow(0 4px 8px rgba(20,85,47,.4))}
.upmap .lbl{font-family:var(--dv-sub);font-size:13px;fill:var(--navy);text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.upmap .lbl--core{font-weight:700;font-size:16px;fill:var(--navy-900)}
.upmap__pin .pin{fill:var(--green-deep);stroke:#fff;stroke-width:1.4}
.upmap__pin .pin-halo{fill:rgba(31,122,71,.32);transform-box:fill-box;transform-origin:center;animation:pinpulse 2.4s ease-out infinite}
@keyframes pinpulse{0%{transform:scale(.4);opacity:.75}100%{transform:scale(2.6);opacity:0}}
.map-tip{position:fixed;z-index:120;pointer-events:none;background:var(--navy-900);color:#f3eeda;
  font-family:var(--dv-sub);font-size:.84rem;padding:5px 12px;border-radius:8px;opacity:0;
  transform:translate(-50%,calc(-100% - 12px));transition:opacity .16s;box-shadow:0 8px 24px -10px rgba(0,0,0,.5);white-space:nowrap}
.map-tip.show{opacity:1}
.map-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--navy-900)}
.upmap__call line{stroke:var(--navy);stroke-width:1.2;stroke-dasharray:3 3;opacity:.6}
.upmap__call .call-t{font-family:var(--dv-head);fill:var(--navy-900);font-size:19px;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.upmap__call .call-s{font-family:var(--dv-sub);fill:var(--amber-deep);font-size:14px;paint-order:stroke;stroke:#fff;stroke-width:3px}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.map-legend .lg{display:inline-flex;align-items:center;gap:7px;font-family:var(--dv-sub);font-size:.86rem;color:var(--ink-brand)}
.map-legend .sw{width:15px;height:15px;border-radius:4px;display:inline-grid;place-items:center;font-size:11px;line-height:1}
.sw--core{background:var(--amber)}.sw--west{background:var(--amber-soft)}.sw--other{background:#E7E0CD}
.sw--star{background:none;color:var(--ink-green);width:auto}
.doab{width:100%;height:auto;filter:drop-shadow(0 18px 40px -24px rgba(27,42,92,.5))}
.doab__land{fill:rgba(224,146,31,.1);stroke:rgba(224,146,31,.5);stroke-width:1.2;stroke-dasharray:6 5;animation:dash 40s linear infinite}
@keyframes dash{to{stroke-dashoffset:-220}}
.river{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;opacity:.4}
.river--ganga{stroke:var(--green);opacity:.6;stroke-width:3.4}
.nodes text{font-family:var(--dv-sub);font-size:11px;fill:var(--navy)}
.node circle{fill:var(--navy);transition:.3s var(--ease)}
.node--core circle{fill:var(--amber)}
.node:hover circle{fill:var(--amber-deep);r:9}
.map-aside{display:grid;gap:14px}
.map-stat{background:var(--surface);border-left:3px solid var(--amber);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow-sm)}
.map-stat__k{font-family:var(--dv-sub);color:var(--amber-text);font-size:.84rem;display:block;font-weight:600}
.map-stat__v{font-family:var(--dv-body);color:var(--text);font-size:1rem}
.map-note{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.05rem;margin-top:6px}

/* =====================================================================
   JOIN (gold band)
   ===================================================================== */
.join{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
.join .sec-head__eyebrow{color:var(--navy-900)}.join .sec-head__eyebrow::after{background:var(--navy)}
.join__title{font-family:var(--dv-head);font-size:clamp(2rem,4.6vw,3.2rem);color:var(--navy-900)}
.join__title .indigo{color:#fff;text-shadow:0 2px 18px rgba(27,42,92,.3)}
.join__lede{color:var(--navy-900);font-family:var(--dv-sub);font-size:1.12rem;margin:18px 0 24px;max-width:46ch}
.join__channels{display:flex;flex-wrap:wrap;gap:12px}
.ch{background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;transition:transform .25s var(--ease),background .25s;font-size:.96rem}
.ch:hover{transform:translateY(-3px);background:var(--navy-900)}
.ch--wa{background:var(--green)}
.join__form{background:var(--surface);border-radius:24px;padding:clamp(24px,4vw,38px);box-shadow:0 36px 70px -30px rgba(27,42,92,.6)}
.join__form h3{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.6rem;margin-bottom:18px}
.join__form label{display:block;font-family:var(--dv-sub);color:var(--text);font-size:.92rem;margin-bottom:14px}
.join__form input,.join__form select{width:100%;margin-top:6px;padding:13px 15px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-family:var(--dv-body);font-size:1rem;color:var(--text);transition:border-color .2s}
.join__form input:focus,.join__form select:focus{border-color:var(--amber);outline:none}
.join__form .btn{width:100%;justify-content:center;margin-top:6px}
.join__ok{margin-top:14px;color:var(--ink-green);font-weight:700;font-family:var(--dv-sub)}
.join__hint{margin-top:12px;color:var(--muted);font-size:.82rem;font-family:var(--en-ui)}

/* =====================================================================
   FOOTER (navy)
   ===================================================================== */
.footer{background:linear-gradient(180deg,var(--navy-900),#070c1f);color:rgba(243,238,218,.78);padding:54px 0 26px;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;top:-40%;right:-6%;width:340px;height:340px;color:#fff;opacity:.04;
  background:url("../img/chakra.svg") center/contain no-repeat;animation:spin 100s linear infinite}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;align-items:start;position:relative;z-index:1}
.footer__brand{display:flex;gap:14px;align-items:center}
.footer__mark{width:58px;height:58px}
.footer__rpd{font-family:var(--dv-head);color:#fff;font-size:1.2rem}
.footer__tag{font-family:var(--dv-sub);color:var(--gold-soft);font-size:.92rem;margin-top:4px}
.footer__nav{display:flex;flex-wrap:wrap;gap:12px 22px;align-content:start}
.footer__nav a{font-weight:600;transition:color .2s}.footer__nav a:hover{color:var(--gold-soft)}
.footer__social span{font-family:var(--dv-sub);color:var(--gold-soft);display:block;margin-bottom:10px}
.footer__handles{display:flex;gap:10px;flex-wrap:wrap}
.footer__handles a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(241,203,107,.35);font-family:var(--en-ui);font-weight:700;font-size:.82rem;color:var(--gold-soft);transition:.25s var(--ease)}
.footer__handles a:hover{background:var(--amber);color:var(--navy-900);transform:translateY(-3px)}
.footer__hash{margin-top:14px;font-family:var(--en-ui);font-size:.82rem;color:rgba(243,238,218,.6)}
.footer__legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(241,203,107,.18);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.84rem;color:rgba(243,238,218,.55);position:relative;z-index:1}
.footer__live{font-family:var(--dv-sub);color:var(--gold-soft)}

html[data-lang="en"] .t{font-family:var(--en-ui)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  /* Audit W1.1: slogan + primary CTA must sit above the fold on 360×640 — the portrait stays as the
     recognition/trust cue but capped hard; it must not own the whole first screen. */
  .hero__inner{grid-template-columns:1fr;text-align:center;padding-top:96px}
  .hero__copy{order:2}.hero__portrait{order:1;max-width:min(56vw,230px);margin:0 auto}
  .frame--hero .frame__media{min-height:0}
  .hero__title{font-size:clamp(2.1rem,9.5vw,3.2rem)}
  .hero__cta{margin-top:20px}
  .hero__prop,.eyebrow{margin-left:auto;margin-right:auto}.hero__cta{justify-content:center}
  .panel{grid-template-columns:1fr}.panel .frame{max-width:420px;margin:0 auto}
  .parivar,.map-wrap,.join{grid-template-columns:1fr}
  .sec-head__title--left{text-align:center}
  .saathi{grid-template-columns:repeat(2,1fr)}.saathi__card--wide{grid-column:span 2}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav__links{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:var(--navy-900);flex-direction:column;justify-content:center;gap:22px;padding:40px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.4)}
  .nav__links.is-open{transform:none}.nav__links a{color:#fff;font-size:1.25rem}
  .nav__burger{display:flex}.nav.is-light .nav__burger span{background:var(--navy)}
  body.menu-open .nav__burger span{background:#fff!important}
  body.menu-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .nav__burger span:nth-child(2){opacity:0}
  body.menu-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .saathi{grid-template-columns:1fr}.saathi__card--wide{grid-column:span 1}
  .footer__grid{grid-template-columns:1fr}.footer__legal{flex-direction:column}
  .timeline::before{left:18px}.tl{padding-left:56px}.tl__dot{left:8px}
}
@media (max-width:420px){.brand__name{display:none}.stats{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero__sun,.hero__chakra,.hero__aurora,.marquee__track,.footer::before{animation:none}
  .gold,.grad{animation:none;background-position:0 center}
}

/* =====================================================================
   AI शिक्षा केंद्र — HUB PAGE (ai-kendra.html)
   ===================================================================== */
.hub-top{position:sticky;top:0;z-index:100;background:rgba(251,249,243,.88);backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid var(--line)}
.hub-top__in{max-width:1200px;margin:0 auto;padding:12px clamp(16px,4vw,40px);display:flex;align-items:center;gap:14px}
.hub-top .brand{margin-right:auto}
.hub-back{font-weight:600;color:var(--ink-brand);display:inline-flex;align-items:center;gap:7px;font-size:.96rem}
.hub-back:hover{color:var(--amber-text)}
.hub-hero{position:relative;overflow:hidden;background:var(--bg);padding:clamp(54px,8vw,96px) 0 clamp(34px,5vw,56px);text-align:center}
.hub-hero__chakra{position:absolute;top:-30%;right:-8%;width:min(46vw,520px);aspect-ratio:1;color:var(--ink-brand);opacity:.06;animation:spin 90s linear infinite}
.hub-hero__chakra svg{width:100%;height:100%}
.hub-hero__aura{position:absolute;inset:-30%;z-index:0;background:radial-gradient(38% 46% at 22% 26%,rgba(224,146,31,.20),transparent 70%),radial-gradient(42% 50% at 82% 30%,rgba(31,122,71,.15),transparent 70%)}
.hub-hero .wrap{position:relative;z-index:2}
.hub-eyebrow{font-family:var(--dv-sub);color:var(--amber-text);letter-spacing:.04em;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(224,146,31,.35);background:rgba(255,255,255,.5);padding:6px 16px;border-radius:999px;margin-bottom:16px}
.hub-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.hub-hero h1{font-family:var(--dv-head);font-size:clamp(2.4rem,6.4vw,4.4rem);color:var(--ink);line-height:var(--lh-display)}
.hub-hero p{font-family:var(--dv-sub);color:var(--ink-brand);font-size:clamp(1.05rem,2vw,1.35rem);max-width:42ch;margin:18px auto 0}
.hub-stats{display:flex;gap:clamp(18px,4vw,42px);justify-content:center;flex-wrap:wrap;margin-top:26px}
.hub-stat{display:flex;flex-direction:column}
.hub-stat b{font-family:var(--en-serif);color:var(--amber-text);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1}
.hub-stat span{font-family:var(--dv-sub);color:var(--ink-brand);font-size:.88rem;margin-top:3px}
.cat{padding:clamp(40px,6vw,72px) 0}
.cat:nth-of-type(even){background:var(--cream)}
.cat__head{max-width:760px;margin:0 auto clamp(28px,4vw,42px);text-align:center}
.cat__eyebrow{font-family:var(--dv-sub);color:var(--amber-text);font-size:.95rem;display:inline-block;padding-bottom:10px;position:relative;margin-bottom:10px}
.cat__eyebrow::after{content:"";position:absolute;left:50%;bottom:0;width:48px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--green));transform:translateX(-50%)}
.cat__title{font-family:var(--dv-head);color:var(--ink-brand);font-size:clamp(1.7rem,4vw,2.6rem)}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:24px 24px 22px;display:flex;flex-direction:column;gap:9px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;border-top:3px solid var(--amber)}
.gcard:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(224,146,31,.45)}
.gcard__ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:1.7rem;background:linear-gradient(150deg,var(--blush),#fff);border:1px solid rgba(224,146,31,.25)}
.gcard h3{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.28rem;line-height:var(--lh-head);margin-top:4px}
.gcard__sub{color:var(--muted);font-size:.94rem;flex-grow:1}
.gcard__who{align-self:flex-start;font-family:var(--dv-sub);font-size:.78rem;color:#fff;background:var(--green);padding:3px 11px;border-radius:999px}
.gcard__btns{display:flex;gap:9px;margin-top:8px}
.gcard .dl,.gcard .rd{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.62em 1em;border-radius:999px;font-weight:700;font-size:.9rem;transition:transform .2s var(--ease),background .2s,color .2s}
.gcard .dl{background:linear-gradient(120deg,var(--amber-soft),var(--amber));color:var(--navy-900);box-shadow:var(--glow-amber)}
.gcard .dl:hover{transform:translateY(-2px)}
.gcard .rd{background:rgba(27,42,92,.05);border:1.5px solid rgba(27,42,92,.2);color:var(--ink-brand)}
.gcard .rd:hover{border-color:var(--amber);color:var(--amber-text)}
.hub-howto{max-width:880px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:clamp(24px,4vw,38px)}
.hub-howto h3{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.5rem;margin-bottom:12px}
.hub-howto ol{padding-left:22px;display:grid;gap:8px}.hub-howto li{color:var(--text)}
.hub-cta{background:linear-gradient(125deg,var(--amber-soft),var(--amber) 60%,#cf8a1c);text-align:center;padding:clamp(40px,6vw,70px) 0}
.hub-cta h2{font-family:var(--dv-head);color:var(--navy-900);font-size:clamp(1.6rem,3.6vw,2.6rem)}
.hub-cta p{color:var(--navy-900);font-family:var(--dv-sub);margin:12px auto 22px;max-width:46ch}
/* highlighted AI-hub nav link + AI section CTA */
.nav__links a.nav-hub{color:var(--amber-text);font-weight:700}
.nav__links a.nav-hub::after{background:linear-gradient(90deg,var(--amber),var(--amber-deep))}
.nav.is-light .nav__links a.nav-hub{color:var(--gold-soft)}
.ai-hub-cta{text-align:center;margin-top:clamp(30px,5vw,48px)}
.ai-hub-cta p{color:rgba(243,238,218,.82);font-family:var(--dv-sub);margin:14px auto 0;max-width:52ch;font-size:.98rem}

/* =====================================================================
   INTERACTIVE LIBRARY (ai-kendra.html · W3Schools-style)
   ===================================================================== */
:root{--topbar:62px}
.lib-page{background:var(--bg)}
.lib-page .hub-top__in{max-width:1500px}
.lib-page .brand{margin-right:0}
.side-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;font-size:1.1rem;width:40px;height:40px;cursor:pointer;color:var(--ink-brand)}
.lib-search{flex:1;max-width:420px;margin:0 8px 0 auto;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-family:var(--dv-body);font-size:.96rem;color:var(--text)}
.lib-search:focus{outline:none;border-color:var(--amber)}

.lib{display:grid;grid-template-columns:288px minmax(0,1fr);align-items:start;max-width:1500px;margin:0 auto}
.lib__backdrop{display:none}
/* UX audit #11: explicit ✕ close on the mobile off-canvas drawer (backdrop-tap isn't discoverable) */
.side-close{display:none}
/* UX audit #15: exam "answered" counter above the submit button */
.testbar{display:flex;flex-direction:column;align-items:center;gap:8px}
.testprog{font-family:var(--dv-sub);color:var(--muted);font-size:.98rem;font-weight:700}
.lib__side{position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));overflow-y:auto;padding:18px 14px 60px;
  border-right:1px solid var(--line);background:linear-gradient(180deg,var(--cream),var(--bg))}
.lib__progress{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.lib__pbar{height:7px;border-radius:7px;background:rgba(27,42,92,.1);overflow:hidden;margin-bottom:6px}
.lib__pbar i{display:block;height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,var(--amber),var(--green));transition:width .5s var(--ease)}
.lib__progress span{font-family:var(--dv-sub);font-size:.78rem;color:var(--ink-brand)}
.side-home{display:block;padding:9px 12px;border-radius:10px;font-weight:600;color:var(--ink-brand);margin-bottom:6px}
.side-home:hover,.side-home.is-active{background:rgba(224,146,31,.12);color:var(--amber-text)}
.side-group{margin-top:10px}
.side-group__t{font-family:var(--dv-sub);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-text);padding:6px 12px 4px;font-weight:700}
.side-link{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;color:var(--text);font-size:.95rem;line-height:var(--lh-head);transition:background .2s,color .2s}
.side-link:hover{background:rgba(27,42,92,.06)}
.side-link.is-active{background:var(--navy);color:#fff}
.side-link.is-active .side-ic{filter:none}
.side-ic{font-size:1.05rem;flex:none}
.side-tick{margin-left:auto;color:var(--ink-green);font-weight:800;font-size:.9rem}
.side-link.is-active .side-tick{color:var(--gold-soft)}

.lib__main{padding:clamp(22px,4vw,46px) clamp(20px,5vw,70px);min-height:calc(100vh - var(--topbar));max-width:900px}

/* lesson view */
.crumb{font-family:var(--dv-sub);font-size:.88rem;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--amber-text);font-weight:600}
.lhead{display:flex;gap:16px;align-items:flex-start;border-bottom:2px solid var(--line);padding-bottom:18px;margin-bottom:8px}
.lhead__ic{width:62px;height:62px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:2rem;background:linear-gradient(150deg,var(--blush),#fff);border:1px solid rgba(224,146,31,.25)}
.lhead h1{font-family:var(--dv-head);color:var(--ink);font-size:clamp(1.7rem,4vw,2.5rem);line-height:var(--lh-display)}
.lhead p{color:var(--muted);font-family:var(--dv-sub);margin-top:4px}
.lwho{display:inline-block;margin-top:8px;font-family:var(--dv-sub);font-size:.78rem;color:#fff;background:var(--green);padding:3px 12px;border-radius:999px}
.lbody h2,.sec-label{font-family:var(--dv-head);color:var(--ink-brand);font-size:clamp(1.25rem,2.6vw,1.6rem);margin:26px 0 8px;display:flex;align-items:baseline;gap:12px;border-left:0;padding-left:0}
.lbody h2::before,.sec-label::before{content:"";flex:none;width:6px;height:1.05em;border-radius:3px;background:linear-gradient(180deg,var(--amber),var(--green));align-self:center}
.sec-label{color:var(--ink-brand);border-left-color:var(--green)}
.lbody p{margin:8px 0;color:var(--text);font-size:1.04rem}
.lbody ul,.lbody ol{margin:8px 0 12px;padding-left:24px;display:grid;gap:6px}
.lbody li{font-size:1.04rem}
/* Reading measure — cap running text to a comfortable line length (~72-78 Devanagari
   chars) so the eye tracks the return sweep easily; low-literacy readers benefit most.
   Text elements only, so diagrams / prompt-boxes / quizzes keep the full content width. */
.lbody p,.lbody ul,.lbody ol{max-width:42rem}
.tipbox{background:var(--mist);border-left:4px solid var(--green);border-radius:10px;padding:12px 16px;margin:16px 0;font-family:var(--dv-sub);color:var(--ink-green);font-size:1.02rem}
.exwrap{display:grid;gap:8px;margin:10px 0}
.exrow{background:var(--cream);border:1px solid #e7ddc4;border-radius:10px;padding:10px 14px}
.exrow b{display:block;color:var(--ink-brand)}.exrow span{display:block;color:var(--muted);font-size:.96rem;margin-top:2px}
.muted{color:var(--muted);font-family:var(--dv-sub);font-size:.96rem;margin:4px 0 12px}

/* Try-It box */
.tryit{border:1.5px solid rgba(224,146,31,.4);border-radius:14px;overflow:hidden;margin:12px 0;background:#fffdf8;box-shadow:var(--shadow-sm)}
.tryit__bar{background:linear-gradient(90deg,var(--amber),#cf8a1c);color:var(--navy-900);font-family:var(--dv-sub);font-weight:700;font-size:.86rem;padding:8px 16px}
.tryit__in{width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;padding:14px 16px;font-family:var(--dv-body);font-size:1.02rem;color:var(--text);resize:vertical;line-height:1.5}
.tryit__in:focus{outline:none;background:#fffef9}
.tryit__act{display:flex;gap:9px;padding:12px 16px;flex-wrap:wrap}
.tryit__act .btn{font-size:.9rem;padding:.55em 1.1em}
.tryit__out{padding:0 16px 14px;font-family:var(--dv-sub);color:var(--ink-brand);font-size:1rem;line-height:1.55}
.tryit__out b{color:var(--ink-green)}

/* Quiz */
.quiz{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;margin:12px 0;box-shadow:var(--shadow-sm)}
.quiz__q{font-family:var(--dv-sub);color:var(--ink-brand);font-weight:600;font-size:1.06rem;margin-bottom:12px}
.quiz__opts{display:grid;gap:8px}
.quiz__opt{text-align:left;padding:11px 16px;border-radius:10px;border:1.5px solid var(--line);background:var(--offwhite,#fff);cursor:pointer;font-family:var(--dv-body);font-size:1rem;color:var(--text);transition:.2s var(--ease)}
.quiz__opt:hover{border-color:var(--amber)}
.quiz.answered .quiz__opt{cursor:default}
/* UX audit #9: quiz right/wrong must not rely on colour alone (WCAG 1.4.1) — prefix a script-neutral symbol */
.quiz__opt.is-correct::before{content:"✓ ";font-weight:800}
.quiz__opt.is-wrong::before{content:"✗ ";font-weight:800}
.quiz__opt.is-soft::before{content:"↻ "}
/* UX audit #2: disabled buttons must READ as inert — the base .btn keeps its gradient / lift / shine otherwise */
.btn:disabled,.btn[disabled]{opacity:.5;filter:grayscale(.4);cursor:not-allowed}
.btn:disabled,.btn[disabled],.btn:disabled:hover,.btn[disabled]:hover{box-shadow:none;transform:none}
.btn:disabled::after,.btn[disabled]::after{opacity:0}
.quiz__opt.is-correct{background:#e9f6ee;border-color:var(--green);color:var(--ink-green);font-weight:600}
.quiz__opt.is-wrong{background:#fdecec;border-color:#d9534f;color:#a33}
.quiz__fb{margin-top:12px;padding:10px 14px;border-radius:10px;font-family:var(--dv-sub);font-size:.98rem}
.quiz__fb.ok{background:#e9f6ee;color:var(--ink-green)}
.quiz__fb.no{background:#fdf0e6;color:var(--amber-text)}

.ldl{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 6px;padding-top:18px;border-top:1px solid var(--line)}
.lnav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.lnav__b{flex:1;max-width:48%;padding:12px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-family:var(--dv-sub);font-weight:600;color:var(--ink-brand);transition:.25s var(--ease)}
.lnav__b:hover{border-color:var(--amber);transform:translateY(-2px)}
.lnav__b--n{text-align:right}

/* home */
.home{max-width:820px}
.home h1{font-family:var(--dv-head);color:var(--ink);font-size:clamp(2.2rem,5.5vw,3.6rem);margin:4px 0}
.home__lede{font-family:var(--dv-sub);color:var(--ink-brand);font-size:clamp(1.05rem,2vw,1.3rem);margin:14px 0 0;max-width:60ch}
.home__stats{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,34px);margin:26px 0 8px}
.home__stats b{font-family:var(--en-serif);color:var(--amber-text);font-size:1.7rem;display:block;line-height:1}
.home__stats span{font-family:var(--dv-sub);color:var(--ink-brand);font-size:.86rem}
.home__cat{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.5rem;margin:32px 0 12px;border-left:4px solid var(--amber);padding-left:12px}
.home__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.hcard{display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:16px;padding:18px;box-shadow:var(--shadow-sm);transition:.3s var(--ease)}
.hcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(224,146,31,.4)}
.hcard__ic{font-size:1.7rem}
.hcard b{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.1rem;line-height:var(--lh-head)}
.hcard__sub{color:var(--muted);font-size:.88rem;flex-grow:1}
.hcard__done{color:var(--ink-green);font-weight:700;font-size:.82rem;font-family:var(--dv-sub)}
.howbox{margin-top:34px;background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:24px 26px}
.howbox h3{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.4rem;margin-bottom:10px}
.howbox ol{padding-left:22px;display:grid;gap:7px}.howbox li{color:var(--text)}

@media (max-width:900px){
  .lib{grid-template-columns:1fr}
  .side-toggle{display:grid;place-items:center}
  .lib-search{order:3;flex-basis:100%;max-width:none;margin:8px 0 0}
  .lib-page .hub-top__in{flex-wrap:wrap}
  .lib__side{position:fixed;top:0;left:0;bottom:0;width:min(84vw,320px);height:100vh;z-index:160;transform:translateX(-100%);
    transition:transform .35s var(--ease);box-shadow:18px 0 50px rgba(0,0,0,.25);padding-top:74px}
  body.side-open .lib__side{transform:none}
  .lib__backdrop{display:block;position:fixed;inset:0;background:rgba(12,20,48,.4);opacity:0;pointer-events:none;transition:opacity .3s;z-index:150}
  body.side-open .lib__backdrop{opacity:1;pointer-events:auto}
  body.side-open .side-close{display:flex;position:fixed;top:10px;left:calc(min(84vw,320px) - 46px);z-index:170;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-brand);font-size:1.05rem;line-height:1;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
  .lnav__b{max-width:none}
}

/* =====================================================================
   SKILL TRACKS + CERTIFICATE
   ===================================================================== */
.side-tracks{color:var(--amber-text);font-weight:700;background:rgba(224,146,31,.08);margin-bottom:8px}
.home__cat2{font-family:var(--dv-head);color:var(--amber-text);font-size:1.18rem;margin:20px 0 10px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tcard{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow-sm);transition:.3s var(--ease);border-left:4px solid var(--amber)}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(224,146,31,.45)}
.tcard.is-full{border-left-color:var(--green);background:linear-gradient(160deg,#f0f8f2,#fff)}
.tcard__top{display:flex;align-items:center;justify-content:space-between}
.tcard__ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;flex:none;
  background:linear-gradient(150deg,rgba(224,146,31,.18),rgba(224,146,31,.05));color:var(--amber-text);font-size:1.55rem}
.tcard__ic .ic{width:25px;height:25px;stroke-width:1.7}
.tcard.is-full .tcard__ic{background:linear-gradient(150deg,rgba(31,122,71,.2),rgba(31,122,71,.06));color:var(--ink-green)}
html[data-theme="dark"] .tcard__ic{background:linear-gradient(150deg,rgba(224,146,31,.26),rgba(224,146,31,.09));color:#f2b24a}
html[data-theme="dark"] .tcard.is-full .tcard__ic{color:#5fcf94}
.tcard__lvl{font-family:var(--dv-sub);font-size:.72rem;color:var(--ink-brand);background:var(--blush);border:1px solid rgba(224,146,31,.3);padding:2px 10px;border-radius:999px;font-weight:700}
.tcard b{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.22rem;line-height:var(--lh-head);margin-top:4px}
.tcard__out{color:var(--muted);font-size:.9rem;flex-grow:1}
.tcard__bar{height:7px;border-radius:7px;background:rgba(27,42,92,.1);overflow:hidden;margin-top:6px}
.tcard__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--green));border-radius:7px;transition:width .5s var(--ease)}
.tcard__pc{font-family:var(--dv-sub);font-size:.82rem;color:var(--ink-brand);font-weight:600}
.tcard.is-full .tcard__pc{color:var(--ink-green)}

.thead{display:flex;align-items:center;gap:18px;border-bottom:2px solid var(--line);padding-bottom:20px;margin-bottom:18px;flex-wrap:wrap}
.thead__ic{width:64px;height:64px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:2rem;background:linear-gradient(150deg,var(--blush),#fff);border:1px solid rgba(224,146,31,.25)}
.thead__b{flex:1;min-width:200px}
.thead__b h1{font-family:var(--dv-head);color:var(--ink);font-size:clamp(1.6rem,3.6vw,2.3rem)}
.thead__b p{color:var(--muted);font-family:var(--dv-sub);margin-top:4px}
.tring{width:78px;height:78px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--amber) calc(var(--p)*1%),rgba(27,42,92,.1) 0);position:relative}
.tring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--bg)}
.tring span{position:relative;font-family:var(--en-serif);font-weight:700;color:var(--amber-text)}
.troad{display:grid;gap:10px;position:relative;margin-left:6px}
.tstep{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.25s var(--ease);position:relative}
.tstep:hover{transform:translateX(5px);border-color:var(--amber)}
.tstep__n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-family:var(--en-serif);background:rgba(27,42,92,.08);color:var(--ink-brand)}
.tstep.is-done .tstep__n{background:var(--green);color:#fff}
.tstep.is-cur{border-color:var(--amber);box-shadow:0 0 0 3px rgba(224,146,31,.18),var(--shadow-sm)}
.tstep.is-cur .tstep__n{background:var(--amber);color:var(--navy-900)}
.tstep__ic{font-size:1.3rem;flex:none}
.tstep__t{display:flex;flex-direction:column;margin-right:auto}
.tstep__t b{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.06rem;font-weight:400;line-height:var(--lh-head)}
.tstep__t i{font-style:normal;color:var(--muted);font-size:.84rem}
.tstep__cur{font-family:var(--dv-sub);font-size:.78rem;color:var(--amber-text);font-weight:700;flex:none}
.tcert{margin-top:24px;text-align:center;background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:26px}
.tcert__msg{font-family:var(--dv-sub);color:var(--ink-brand);font-size:1.08rem;margin-bottom:14px}

/* certificate */
.certwrap{max-width:840px;margin:0 auto}
.certctrl{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:18px;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:14px}
.certctrl label{font-family:var(--dv-sub);color:var(--ink-brand);font-weight:600}
.certctrl input{margin-left:8px;padding:9px 14px;border-radius:10px;border:1.5px solid var(--line);font-family:var(--dv-body);font-size:1rem;min-width:200px}
.certctrl input:focus{outline:none;border-color:var(--amber)}
.cert{background:#fff;border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.cert__bd{position:relative;border:3px solid var(--amber);outline:1px solid var(--amber);outline-offset:6px;margin:10px;border-radius:6px;padding:38px 30px 30px;text-align:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(224,146,31,.06),transparent 60%),#fffdf8}
.cert__chakra{position:absolute;width:340px;height:340px;left:50%;top:54%;transform:translate(-50%,-50%);opacity:.05;pointer-events:none}
.cert__mark{width:64px;height:64px;margin:0 auto 8px;position:relative}
.cert__top{font-family:var(--dv-sub);color:var(--amber-text);letter-spacing:.06em;font-size:.92rem;position:relative}
.cert__title{font-family:var(--dv-head);color:var(--ink-brand);font-size:clamp(2rem,5vw,2.8rem);margin-top:6px;position:relative}
.cert__sub{font-family:var(--en-serif);font-style:italic;color:var(--muted);letter-spacing:.12em;font-size:.86rem;position:relative}
.cert__line{font-family:var(--dv-sub);color:var(--text);font-size:1.04rem;margin-top:16px;position:relative;line-height:1.6}
.cert__name{font-family:var(--dv-head);color:var(--amber-text);font-size:clamp(1.8rem,4.5vw,2.6rem);margin:10px 0;position:relative;border-bottom:2px dashed rgba(224,146,31,.4);display:inline-block;padding:0 20px 6px}
.cert__out{font-family:var(--dv-sub);color:var(--ink-green);font-size:.98rem;margin-top:12px;position:relative;max-width:46ch;margin-left:auto;margin-right:auto}
.cert__foot{display:flex;justify-content:space-between;gap:20px;margin-top:30px;position:relative}
.cert__sig{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.2rem;border-top:1.5px solid var(--navy);padding-top:4px;min-width:130px}
.cert__sigl{font-family:var(--dv-sub);color:var(--muted);font-size:.8rem}
.cert__tag{font-family:var(--dv-sub);color:var(--amber-text);font-size:.84rem;margin-top:22px;position:relative}
.cert__note{font-family:var(--dv-sub);color:var(--muted);font-size:.72rem;line-height:1.5;margin-top:14px;position:relative;max-width:52ch;margin-left:auto;margin-right:auto;opacity:.9}
/* UX #30: "what next?" on-ramp after Copy (prompt builder + CV AI help) */
.nextstep{margin-top:16px;padding:16px 18px;border-radius:14px;background:rgba(31,122,71,.08);border:1.5px solid rgba(31,122,71,.3);animation:nextIn .3s ease}
@keyframes nextIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nextstep__h{font-family:var(--dv-head);color:var(--ink-green);font-size:1.1rem;margin-bottom:10px}
.nextstep__steps{margin:0 0 12px;padding-left:1.4em;display:flex;flex-direction:column;gap:7px}
.nextstep__steps li{font-family:var(--dv-sub);color:var(--text);font-size:.98rem;line-height:1.5}
.nextstep__warn{font-family:var(--dv-sub);color:var(--ink-brand);background:rgba(224,146,31,.14);border-radius:8px;padding:9px 12px;font-size:.86rem;line-height:1.45}
:root[data-theme="dark"] .nextstep{background:rgba(31,122,71,.16);border-color:rgba(31,122,71,.45)}
:root[data-theme="dark"] .nextstep__h{color:#5cc98a}
:root[data-theme="dark"] .nextstep__warn{color:var(--text);background:rgba(224,146,31,.2)}
@media (prefers-reduced-motion:reduce){.nextstep{animation:none}}
/* 🎯 AI अभ्यास — interactive offline prompt-coach */
.practice__note{display:flex;gap:8px;align-items:flex-start;background:rgba(27,42,92,.06);border:1px solid rgba(27,42,92,.16);border-radius:12px;padding:11px 14px;font-family:var(--dv-sub);color:var(--ink-brand);font-size:.9rem;line-height:1.5;margin:6px 0 16px}
.practice{display:flex;flex-direction:column;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 6px 22px rgba(27,42,92,.06)}
.practice__lbl{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.05rem}
.practice__starters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--dv-sub);color:var(--muted);font-size:.86rem}
.prstart{font-family:var(--dv-sub);font-size:.85rem;color:var(--ink-brand);background:rgba(224,146,31,.1);border:1px solid rgba(224,146,31,.35);border-radius:999px;padding:6px 12px;cursor:pointer;transition:transform .06s}
.prstart:active{transform:scale(.97)}
.practice textarea{width:100%;font-family:var(--dv-body);font-size:1.02rem;line-height:1.6;color:var(--text);background:var(--cream,#FAF7F0);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;resize:vertical}
.practice textarea:focus{outline:none;border-color:var(--amber)}
.practice__meter{height:10px;border-radius:999px;background:rgba(27,42,92,.1);overflow:hidden}
.practice__fill{height:100%;width:0;border-radius:999px;transition:width .35s ease,background .35s}
.practice__fill.is-1{background:#e0921f}.practice__fill.is-2{background:#e0a21f}.practice__fill.is-3{background:#4a9d5f}.practice__fill.is-4{background:#1F7A47}
.practice__grade{font-family:var(--dv-head);font-size:1rem;min-height:1.2em}
.practice__grade.is-1,.practice__grade.is-2{color:var(--amber-text)}.practice__grade.is-3,.practice__grade.is-4{color:var(--ink-green)}
.prcheck{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prcheck__item{display:flex;gap:8px;align-items:center;font-family:var(--dv-sub);font-size:.92rem;color:var(--muted);padding:8px 10px;border:1px solid var(--line);border-radius:10px;transition:.2s}
.prcheck__item.is-on{color:var(--ink-green);border-color:rgba(31,122,71,.4);background:rgba(31,122,71,.06)}
.prcheck__ic{font-weight:700;font-size:1.05rem;flex:none;width:1.2em;text-align:center}
.prtips{display:flex;flex-direction:column;gap:8px}
.prtips__h{font-family:var(--dv-sub);color:var(--muted);font-size:.86rem}
.prtip{display:flex;align-items:center;gap:8px;text-align:left;font-family:var(--dv-sub);font-size:.92rem;color:var(--text);background:rgba(224,146,31,.08);border:1px dashed rgba(224,146,31,.5);border-radius:10px;padding:9px 12px;cursor:pointer;transition:transform .06s}
.prtip:active{transform:scale(.98)}
.prtip__add{margin-left:auto;color:var(--amber-text);font-weight:700;font-size:.82rem;flex:none}
.prtips__done{font-family:var(--dv-sub);color:var(--ink-green);font-size:.95rem}
.practice__out{display:flex;flex-direction:column;gap:8px}
.practice__outh{font-family:var(--dv-head);color:var(--ink-green);font-size:1rem}
html[data-theme="dark"] .practice{background:#101a3c;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .practice__note{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--ink)}
html[data-theme="dark"] .practice textarea{background:#0b1330;color:var(--ink);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .prcheck__item{border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .practice__lbl{color:var(--ink)}
@media(max-width:560px){.prcheck{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.practice__fill{transition:none}}
/* 🌐 Teacher / Centre mode + live AI answer */
.tm-warn{border-radius:12px;padding:11px 14px;font-family:var(--dv-sub);font-size:.9rem;line-height:1.55;margin:6px 0}
.tm-warn--data{background:rgba(224,146,31,.12);border:1px solid rgba(224,146,31,.4);color:var(--amber-text)}
.tm-warn--scam{background:rgba(27,42,92,.06);border:1px solid rgba(27,42,92,.18);color:var(--ink-brand)}
.tm{display:flex;flex-direction:column;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 6px 22px rgba(27,42,92,.06);margin-top:8px}
.tm__lbl{font-family:var(--dv-head);color:var(--ink-brand);font-size:.98rem;margin-top:6px}
.tm__in{width:100%;font-family:var(--dv-body);font-size:1rem;color:var(--text);background:var(--cream,#FAF7F0);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px}
.tm__in:focus{outline:none;border-color:var(--amber)}
.tm__hint{font-family:var(--dv-sub);color:var(--muted);font-size:.8rem}
.tm__row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tm__status{font-family:var(--dv-head);font-size:.95rem;margin-top:8px}
.tm__status.is-on{color:var(--ink-green)} .tm__status.is-off{color:var(--muted)}
.tm__back{margin-top:16px}
.tm__link{font-family:var(--dv-sub);color:var(--muted);text-decoration:underline;font-size:.86rem}
.tm__link:hover{color:var(--amber-text)}
.practice__live{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.practice__livenote{font-family:var(--dv-sub);color:var(--muted);font-size:.8rem}
.liveans{border-radius:12px;padding:12px 14px;font-family:var(--dv-body);font-size:1rem;line-height:1.6;background:rgba(43,58,103,.05);border:1px solid rgba(43,58,103,.18)}
.liveans.is-load{color:var(--muted);font-style:italic}
.liveans.is-err{background:rgba(200,60,40,.06);border-color:rgba(200,60,40,.3);color:#a33}
.liveans__b{color:var(--text)}
.liveans__note{font-family:var(--dv-sub);color:var(--muted);font-size:.78rem;margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
html[data-theme="dark"] .tm{background:#101a3c;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .tm__in{background:#0b1330;color:var(--ink);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .tm__lbl{color:var(--ink)}
html[data-theme="dark"] .tm-warn--scam{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--ink)}
html[data-theme="dark"] .liveans{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
/* 📚 पूरा पाठ्यक्रम — structured course + capstone (backward-design layer) */
.course-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#1B2A5C,#2E5D3A);color:#fff;border-radius:16px;padding:16px 20px;margin:14px 0;box-shadow:0 6px 20px rgba(27,42,92,.18)}
.course-cta .mission-cta__l b{color:#fff;font-family:var(--dv-head);font-size:1.05rem}
.course-cta .mission-cta__l span{display:block;color:rgba(255,255,255,.85);font-family:var(--dv-sub);font-size:.86rem;margin-top:2px}
.course-cta .mission-cta__go{flex:none;font-family:var(--dv-head);color:#FCE9C8;font-size:.95rem}
.course__prog{display:flex;align-items:center;gap:12px;margin:10px 0 16px}
.course__pbar{flex:1;height:10px;border-radius:999px;background:rgba(27,42,92,.1);overflow:hidden}
.course__pbar>i{display:block;height:100%;background:var(--green-deep);border-radius:999px;transition:width .5s ease}
.course__prog>span{font-family:var(--dv-head);color:var(--ink-brand);font-size:.92rem;flex:none}
.course{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.course__m{display:flex;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 4px 16px rgba(27,42,92,.05)}
.course__m.is-done{border-color:rgba(31,122,71,.4);background:rgba(31,122,71,.05)}
.course__m.is-next{border-color:rgba(224,146,31,.5);box-shadow:0 6px 20px rgba(224,146,31,.14)}
.course__n{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(27,42,92,.08);color:var(--ink-brand);font-family:var(--dv-head);font-size:1.15rem;display:grid;place-items:center}
.course__m.is-done .course__n{background:var(--green-deep);color:#fff}
.course__m.is-next .course__n{background:var(--amber);color:#fff}
.course__body{flex:1;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.course__t{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.08rem}
.course__time{font-family:var(--dv-sub);color:var(--muted);font-size:.78rem;font-weight:400;margin-left:6px}
.course__o{font-family:var(--dv-sub);color:var(--text);font-size:.92rem;line-height:1.5}
.course__o b{color:var(--ink-green)}
.capstone{margin-top:18px;border-radius:18px;padding:18px 20px;border:2px dashed rgba(224,146,31,.5);background:rgba(224,146,31,.06)}
.capstone.is-ready{border-style:solid;border-color:var(--green-deep);background:rgba(31,122,71,.06)}
.capstone__h{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.15rem;margin-bottom:8px}
.capstone p{font-family:var(--dv-sub);color:var(--text);font-size:.96rem;line-height:1.55}
.capstone__list{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:6px;font-family:var(--dv-sub);color:var(--text);font-size:.95rem}
.capstone__list a{color:var(--amber-text);text-decoration:underline}
.capstone__note{font-family:var(--dv-sub);color:var(--muted);font-size:.8rem;line-height:1.5;margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.capstone__lock{color:var(--muted)!important}
html[data-theme="dark"] .course__m{background:#101a3c;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .course__t,html[data-theme="dark"] .course__prog>span,html[data-theme="dark"] .capstone__h{color:var(--ink)}
html[data-theme="dark"] .capstone{background:rgba(255,255,255,.04)}
@media (prefers-reduced-motion:reduce){.course__pbar>i{transition:none}}

@media print{
  .hub-top,.lib__side,.footer,.certctrl,.lib__backdrop{display:none!important}
  .lib{display:block}.lib__main{padding:0;max-width:none}
  body,.lib-page{background:#fff}
  .cert{box-shadow:none}.cert__bd{margin:0}
  @page{size:A4 landscape;margin:10mm}
}
@media (max-width:560px){.thead{gap:12px}.tring{width:64px;height:64px}.cert__foot{flex-direction:column;gap:14px}}

/* =====================================================================
   ENGAGEMENT LAYER — XP · streaks · badges · toasts · confetti · onboarding · dashboard · prompt builder
   ===================================================================== */
.xpstrip{display:block;background:linear-gradient(135deg,var(--navy),var(--navy-700));color:#fff;border-radius:14px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:transform .2s}
.xpstrip:hover{transform:translateY(-2px)}
.xpstrip__row{display:flex;justify-content:space-between;align-items:center;font-family:var(--dv-sub);font-size:.78rem;color:rgba(243,238,218,.82)}
.xpstrip__rk{font-weight:700;color:#fff;font-size:.92rem}
.xpstrip__fl{color:var(--gold-soft);font-weight:700}
.xpstrip__bar{height:8px;border-radius:8px;background:rgba(255,255,255,.18);overflow:hidden;margin:7px 0}
.xpstrip__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--gold-soft));border-radius:8px;transition:width .6s var(--ease)}

.toastbox{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:310;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--navy-900);color:#fff;padding:11px 18px;border-radius:999px;font-family:var(--dv-sub);font-size:.95rem;box-shadow:0 14px 32px -10px rgba(0,0,0,.55);opacity:0;transform:translateY(12px);transition:opacity .32s,transform .32s;max-width:90vw}
.toast.show{opacity:1;transform:none}
.toast.warm{background:linear-gradient(120deg,var(--amber),#cf8a1c);color:var(--navy-900);font-weight:700}
.t-xp{font-weight:800;color:var(--gold-soft)}.toast.warm .t-xp{color:var(--navy-900)}
.t-badge{font-size:1.2rem}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti i{position:absolute;top:-22px;width:9px;height:15px;border-radius:2px;animation-name:cfall;animation-timing-function:cubic-bezier(.3,.6,.5,1);animation-fill-mode:forwards}
@keyframes cfall{0%{opacity:1}100%{transform:translateY(108vh) rotate(720deg);opacity:0}}

.onbo{position:fixed;inset:0;z-index:320;background:rgba(12,20,48,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .3s;overflow-y:auto}
.onbo.show{opacity:1}
/* UX audit #16: branded in-app dialog — replaces native prompt()/confirm() that read as phishing pop-ups */
.uimodal{position:fixed;inset:0;z-index:340;background:rgba(12,20,48,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .2s;overflow-y:auto}
.uimodal.show{opacity:1}
.uimodal__card{background:var(--surface);border-radius:20px;max-width:440px;width:100%;padding:26px 24px;text-align:center;box-shadow:0 30px 70px -25px rgba(0,0,0,.55);transform:translateY(12px) scale(.98);transition:transform .22s var(--ease)}
.uimodal.show .uimodal__card{transform:none}
.uimodal__mark{width:44px;height:44px;margin:0 auto 12px;color:var(--ink-green)}
.uimodal__mark .ic{width:100%;height:100%;stroke-width:1.8}
.uimodal__b{color:var(--text);font-family:var(--dv-sub);font-size:1.05rem;margin-bottom:16px;line-height:1.5}
.uimodal__in{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--dv-body);font-size:1.02rem;margin-bottom:16px;color:var(--text);background:var(--cream);box-sizing:border-box}
.uimodal__in:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.uimodal__act{display:flex;gap:10px;flex-direction:column}
.uimodal__act .btn{width:100%;justify-content:center}
html[data-theme="dark"] .uimodal__card{background:#14214a}
html[data-theme="dark"] .uimodal__b{color:var(--text)}
html[data-theme="dark"] .uimodal__in{background:#101a3c;border-color:rgba(255,255,255,.14);color:var(--text)}
@media(prefers-reduced-motion:reduce){.uimodal,.uimodal__card{transition:none}}
/* UX audit #6: branded first-paint / boot state — no blank column on cold boot, and a splash during reload */
.boot{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.boot__mark{width:56px;height:56px;display:block;filter:drop-shadow(0 10px 22px rgba(27,42,92,.22));animation:bootpulse 1.5s ease-in-out infinite}
.boot__mark svg{width:100%;height:100%;display:block}
.boot__bar{width:120px;height:5px;border-radius:3px;background:rgba(27,42,92,.1);overflow:hidden;position:relative}
.boot__bar i{position:absolute;top:0;height:100%;width:42%;border-radius:3px;background:var(--amber,#E0921F);animation:bootslide 1.1s ease-in-out infinite}
@keyframes bootpulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}
@keyframes bootslide{0%{left:-42%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){.boot__mark,.boot__bar i{animation:none}.boot__bar i{left:30%}}
.bootsplash{position:fixed;inset:0;z-index:9999;background:var(--bg,#F4ECD8);display:flex;align-items:center;justify-content:center}
html[data-theme="dark"] .bootsplash{background:#0f1830}
/* UX audit #12: honest, findable "why is this free?" collapsible on the home */
.whyfree{margin:14px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 15px}
.whyfree summary{cursor:pointer;padding:13px 0;font-family:var(--dv-sub);font-weight:700;color:var(--amber-text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.whyfree summary::-webkit-details-marker{display:none}
.whyfree summary::after{content:"⌄";font-size:1.1rem;transition:transform .2s var(--ease)}
.whyfree[open] summary::after{transform:rotate(180deg)}
.whyfree p{color:var(--text);font-family:var(--dv-sub);font-size:.95rem;line-height:1.65;margin:0 0 14px}
@media(prefers-reduced-motion:reduce){.whyfree summary::after{transition:none}}
.onbo__card{background:var(--surface);border-radius:24px;max-width:560px;width:100%;padding:clamp(24px,4vw,40px);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);text-align:center;transform:translateY(16px) scale(.98);transition:transform .35s var(--ease)}
.onbo.show .onbo__card{transform:none}
.onbo__hi{font-family:var(--dv-sub);color:var(--amber-text);font-size:1rem;margin-bottom:8px}
.onbo__card h2{font-family:var(--dv-head);color:var(--ink-brand);font-size:clamp(1.3rem,3vw,1.7rem)}
.onbo__card p{color:var(--muted);font-family:var(--dv-sub);margin:10px 0 18px}
.onbo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.onbo__p{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 8px;border-radius:16px;border:1.5px solid var(--line);background:var(--cream);cursor:pointer;font-family:var(--dv-body);font-weight:600;color:var(--ink-brand);transition:.25s var(--ease);font-size:.9rem}
.onbo__p span{font-size:1.9rem}
.onbo__p:hover{border-color:var(--amber);transform:translateY(-4px);background:var(--blush);box-shadow:var(--shadow-sm)}
.onbo__skip{margin-top:16px;background:none;border:0;color:var(--muted);cursor:pointer;font-family:var(--dv-sub);text-decoration:underline}
@media(max-width:480px){.onbo__grid{grid-template-columns:repeat(2,1fr)}}
/* language-first onboarding step: 8 languages in a clean 4×2 grid (2×4 on phones).
   Buttons are more compact than persona buttons (there are 8) so the whole picker fits a
   low-end ~720px phone without scrolling; .onbo scrolls as a safety net on shorter screens. */
.onbo__grid--lang{grid-template-columns:repeat(4,1fr)}
.onbo__grid--lang .onbo__p{padding:11px 6px;gap:2px}
.onbo__grid--lang .onbo__p span{font-size:1.5rem}
.onbo__beta{display:block;font-family:var(--dv-sub);font-size:.6rem;font-weight:700;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-text);opacity:.85;margin-top:2px}
@media(max-width:480px){.onbo__grid--lang{grid-template-columns:repeat(2,1fr)}}

.tipcard{background:linear-gradient(135deg,var(--blush),#fff);border:1px solid rgba(224,146,31,.3);border-radius:18px;overflow:hidden;margin:18px 0;box-shadow:var(--shadow-sm)}
.tipcard__h{background:linear-gradient(90deg,var(--amber),#cf8a1c);color:var(--navy-900);font-family:var(--dv-sub);font-weight:700;padding:7px 18px;font-size:.9rem}
.tipcard__b{display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
.tipcard__e{font-size:2rem;flex:none}
.tipcard__b b{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.12rem;display:block;margin-bottom:2px}
.tipcard__b span{color:var(--muted);font-size:.96rem}

.resume{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;font-family:var(--dv-sub);font-weight:600;margin:4px 0 14px;transition:.25s var(--ease)}
.resume:hover{background:var(--navy-900);transform:translateY(-2px)}
.resume b{color:var(--gold-soft)}

.dcard--rank{background:linear-gradient(135deg,var(--navy),var(--navy-700));color:#fff;border-radius:18px;padding:20px 22px;margin-bottom:16px}
.dcard--rank .dcard__k{font-family:var(--dv-sub);color:rgba(243,238,218,.8);font-size:.84rem}
.dcard__rk{font-family:var(--dv-head);font-size:1.5rem;margin:4px 0 10px}
.dcard--rank .xpstrip__bar{background:rgba(255,255,255,.18);margin:0}
.dcard__sub{font-family:var(--dv-sub);font-size:.84rem;color:rgba(243,238,218,.85);margin-top:8px}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.dcard__ic{font-size:1.7rem}
.dcard__v{font-family:var(--en-serif);font-weight:700;color:var(--amber-text);font-size:1.8rem;line-height:1}
.dcard__l{font-family:var(--dv-sub);color:var(--ink-brand);font-size:.82rem;margin-top:3px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.badge{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 8px;border-radius:16px;border:1px solid var(--line);background:#fff;text-align:center;opacity:.4;filter:grayscale(.75);transition:.3s var(--ease)}
.badge.got{opacity:1;filter:none;background:linear-gradient(150deg,var(--blush),#fff);border-color:rgba(224,146,31,.4);box-shadow:var(--shadow-sm)}
.badge__ic{font-size:2rem}
.badge__nm{font-family:var(--dv-sub);font-size:.8rem;color:var(--ink-brand);font-weight:600;line-height:var(--lh-head)}
.dash__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
@media(max-width:560px){.dgrid{grid-template-columns:repeat(2,1fr)}}

.pb{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,4vw,32px);box-shadow:var(--shadow-sm);margin-top:8px}
.pb__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pb label{display:flex;flex-direction:column;gap:6px;font-family:var(--dv-sub);color:var(--ink-brand);font-weight:600;font-size:.92rem;margin-bottom:14px}
.pb select,.pb input{padding:11px 14px;border-radius:11px;border:1.5px solid var(--line);background:#fff;font-family:var(--dv-body);font-size:1rem;color:var(--text)}
.pb select:focus,.pb input:focus{outline:none;border-color:var(--amber)}
.pb__topic{grid-column:1/-1}
.pb__out{margin-top:8px;background:var(--cream);border:1.5px solid rgba(224,146,31,.35);border-radius:14px;padding:14px}
.pb__outh{font-family:var(--dv-sub);color:var(--amber-text);font-weight:700;margin-bottom:8px}
.pb__out textarea{width:100%;border:0;background:#fff;border-radius:10px;padding:12px;font-family:var(--dv-body);font-size:1.06rem;color:var(--ink-brand);resize:vertical;line-height:1.5;margin-bottom:10px}
@media(max-width:560px){.pb__row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}.xpstrip__bar i{transition:none}}

/* language selector + content note */
.langsel{padding:8px 10px 8px 32px;border-radius:10px;border:1.5px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A5C' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E") no-repeat 9px center;background-size:16px 16px;font-family:var(--dv-body);font-size:.88rem;color:var(--ink-brand);cursor:pointer;max-width:150px}
.langsel:focus{outline:none;border-color:var(--amber)}
.langnote{background:var(--mist);border:1px solid rgba(31,122,71,.3);border-radius:12px;padding:10px 14px;font-family:var(--dv-sub);color:var(--ink-green);font-size:.9rem;margin-bottom:14px}
html[dir="rtl"] .lib__main{direction:rtl;text-align:right}
@media(max-width:720px){.langsel{order:4;flex-basis:100%;max-width:none;margin-top:6px}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- adaptive recommendation card ---- */
.reco{display:grid;grid-template-columns:1fr auto;gap:3px 16px;align-items:center;text-decoration:none;margin:20px 0;padding:18px 22px;border-radius:18px;background:linear-gradient(135deg,var(--navy,#1B2A5C),#2a3e7e);color:#fff;box-shadow:0 12px 32px rgba(27,42,92,.24);transition:transform .2s,box-shadow .2s}
.reco:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(27,42,92,.32)}
.reco:focus-visible{outline:3px solid var(--gold,#E0921F);outline-offset:3px}
.reco__k{grid-column:1;font-size:.74rem;font-weight:800;letter-spacing:.05em;color:#ffd98a;text-transform:uppercase}
.reco__t{grid-column:1;font-size:1.18rem;font-weight:800;line-height:var(--lh-head);margin-top:2px}
.reco__r{grid-column:1;font-size:.92rem;opacity:.86;margin-top:2px}
.reco__go{grid-column:2;grid-row:1 / 4;align-self:center;background:var(--gold,#E0921F);color:#1B2A5C;font-weight:800;padding:11px 20px;border-radius:999px;white-space:nowrap}
@media(max-width:560px){.reco{grid-template-columns:1fr}.reco__go{grid-column:1;grid-row:auto;justify-self:start;margin-top:10px}}

/* ============================================================
   PREMIUM v3 — elevated academy aesthetic (appended; cascades over base)
   ============================================================ */

/* ambient page — soft tricolour glows + depth */
body.lib-page{
  background:
    radial-gradient(60% 48% at 88% -6%, rgba(224,146,31,.13), transparent 60%),
    radial-gradient(52% 46% at -8% 102%, rgba(31,122,71,.11), transparent 58%),
    radial-gradient(46% 40% at 50% 118%, rgba(27,42,92,.05), transparent 60%),
    linear-gradient(180deg,#FCFAF4,#F6F1E7);
  background-attachment:fixed;
}

/* frosted header with depth */
.hub-top{background:rgba(252,250,244,.80);backdrop-filter:saturate(165%) blur(20px);-webkit-backdrop-filter:saturate(165%) blur(20px);box-shadow:0 1px 0 var(--line),0 14px 32px -26px rgba(27,42,92,.5)}

/* premium sidebar */
.lib__side{background:linear-gradient(180deg,#FCF4E2,#FAF6EF 38%,var(--bg));border-right:1px solid rgba(27,42,92,.07)}
.lib__side::-webkit-scrollbar{width:9px}
.lib__side::-webkit-scrollbar-thumb{background:rgba(27,42,92,.16);border-radius:9px;border:3px solid transparent;background-clip:content-box}
.side-link{border-radius:12px;transition:background .2s var(--ease),color .2s,transform .2s,box-shadow .2s}
.side-link:hover{background:rgba(27,42,92,.05);transform:translateX(3px)}
.side-link.is-active{background:linear-gradient(120deg,var(--navy),var(--navy-700));box-shadow:0 12px 26px -14px rgba(27,42,92,.6)}
.side-home{border-radius:12px;transition:.2s var(--ease)}
.side-home.is-active,.side-home:hover{background:linear-gradient(120deg,rgba(224,146,31,.18),rgba(224,146,31,.05));color:var(--amber-text)}
.side-tracks.is-active{background:linear-gradient(120deg,var(--navy),var(--navy-700));color:#fff}

/* glowing rank / XP card */
.xpstrip{border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(140deg,#1f3068,#0C1430);box-shadow:0 18px 40px -20px rgba(12,20,48,.7),inset 0 1px 0 rgba(255,255,255,.07);padding:14px 16px}
.xpstrip::before{content:"";position:absolute;inset:0;background:radial-gradient(78% 60% at 102% -10%,rgba(224,146,31,.26),transparent 55%);pointer-events:none}
.xpstrip>*{position:relative}
.xpstrip__rk{font-size:.98rem}
.xpstrip__bar{height:9px;background:rgba(255,255,255,.16)}
.xpstrip__bar i{background:linear-gradient(90deg,var(--amber-soft),var(--amber),var(--gold-soft));box-shadow:0 0 14px rgba(241,203,107,.6)}

/* hero — confident, refined */
.home{max-width:900px}
.hub-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.62);backdrop-filter:blur(8px);border:1px solid rgba(224,146,31,.4);box-shadow:0 8px 22px -14px rgba(224,146,31,.6);border-radius:999px}
.home h1{font-size:clamp(2.6rem,6.2vw,4.2rem);letter-spacing:0;line-height:var(--lh-display);
  background:linear-gradient(116deg,#13224e 0%,#2a3e7e 58%,#1c6e44 128%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 10px 24px rgba(27,42,92,.16))}
.home__lede{font-size:clamp(1.08rem,2vw,1.34rem);line-height:1.55;color:#33406a}

/* stats become premium glass chips */
.home__stats{gap:14px;margin-top:30px}
.home__stats>div{display:flex;flex-direction:column;justify-content:center;min-width:130px;padding:15px 20px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.66));backdrop-filter:blur(10px);
  border:1px solid rgba(27,42,92,.08);box-shadow:0 16px 38px -24px rgba(27,42,92,.45),inset 0 1px 0 rgba(255,255,255,.75);transition:.32s var(--ease)}
.home__stats>div{position:relative;overflow:hidden}
.home__stats>div:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(27,42,92,.5)}
.home__stats>div b{font-family:var(--en-serif);font-size:2.2rem;
  background:linear-gradient(135deg,var(--amber),var(--amber-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.home__stats span{margin-top:5px;font-size:.82rem;color:var(--ink-brand);font-weight:600}
/* subtle per-metric icon watermark — a designed-dashboard accent (Linear/Vercel-tier) */
.stat__ic{position:absolute;top:11px;right:12px;line-height:0;color:var(--ink-brand);opacity:.16;pointer-events:none}
.stat__ic .ic{width:26px;height:26px;stroke-width:1.7}
html[data-theme="dark"] .stat__ic{color:#dbe6ff;opacity:.22}
/* UX audit #5: newcomer "warm" stat tiles show an emoji hero (🌱/🎯) instead of a gradient-clipped "0%/0" */
.stat--warm b{-webkit-text-fill-color:initial;background:none;color:initial;font-size:2rem}
.stat--warm span{color:var(--amber-text);font-weight:600}

/* section headers */
.home__cat{font-size:clamp(1.5rem,3vw,1.95rem);letter-spacing:-.01em;border-left:0;padding-left:0;display:flex;align-items:center;gap:12px;margin-top:42px}
.home__cat::before{content:"";width:6px;height:1.05em;border-radius:6px;background:linear-gradient(180deg,var(--amber),var(--green));flex:none}
.home__cat2{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.2rem;margin:28px 0 12px}

/* elevated cards — tracks, grids, tips */
.tcard,.hcard,.tipcard{border-radius:22px;border:1px solid rgba(27,42,92,.07);box-shadow:0 20px 46px -28px rgba(27,42,92,.42),inset 0 1px 0 rgba(255,255,255,.6);transition:.34s var(--ease)}
.tcard{border-left:4px solid var(--amber)}
.tcard:hover,.hcard:hover{transform:translateY(-8px);box-shadow:0 32px 60px -26px rgba(27,42,92,.5);border-color:rgba(224,146,31,.4)}
.tcard__ic{font-size:2.25rem;filter:drop-shadow(0 6px 12px rgba(27,42,92,.18))}
.tcard b{font-size:1.3rem}
.tcard__lvl{background:linear-gradient(135deg,#fff,var(--blush));box-shadow:0 4px 12px -6px rgba(224,146,31,.5)}

/* tip card glow */
.tipcard{background:linear-gradient(150deg,#FFF6E4,#fff)}
.tipcard__h{background:linear-gradient(90deg,var(--amber),var(--amber-deep))}

/* recommendation card — sheen + decorative ring */
.reco{border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#22336e,#16224d 72%);
  box-shadow:0 26px 56px -26px rgba(20,32,72,.7),inset 0 1px 0 rgba(255,255,255,.09)}
.reco::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 100% 0,rgba(255,217,138,.2),transparent 52%);pointer-events:none}
.reco::after{content:"";position:absolute;right:-34px;bottom:-50px;width:176px;height:176px;border-radius:50%;border:15px solid rgba(255,255,255,.05);pointer-events:none}
.reco>*{position:relative}
.reco__go{box-shadow:0 12px 24px -10px rgba(224,146,31,.7);transition:.25s var(--ease)}
.reco:hover .reco__go{transform:translateX(3px)}

/* premium buttons */
.btn--gold{background:linear-gradient(135deg,var(--amber-soft),var(--amber) 52%,var(--amber-deep));box-shadow:0 14px 30px -12px rgba(224,146,31,.7),inset 0 1px 0 rgba(255,255,255,.35);transition:.25s var(--ease)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(224,146,31,.82)}
.btn--indigo{background:linear-gradient(135deg,#26376e,var(--navy));box-shadow:0 14px 30px -14px rgba(27,42,92,.7);transition:.25s var(--ease)}
.btn--indigo:hover{transform:translateY(-2px)}
.resume{box-shadow:0 16px 36px -20px rgba(27,42,92,.6)}

/* search field */
.lib-search{box-shadow:0 12px 30px -20px rgba(27,42,92,.4);transition:box-shadow .25s var(--ease),border-color .2s}
.lib-search:focus{box-shadow:0 16px 36px -18px rgba(224,146,31,.55)}

/* lesson view refinement */
.lhead h1{letter-spacing:-.01em}
.lbody{font-size:1.09rem;line-height:1.72} /* ~18px Mukta — the low-literacy reading floor (matches major Hindi news apps) */
.lbody p{margin:12px 0}

/* app-like page transition on every render */
@media (prefers-reduced-motion:no-preference){
  .home,.lhead,.crumb,.cert{animation:premIn .42s var(--ease) both}
  @keyframes premIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  /* View Transitions API drives navigation where supported: the VT root cross-fade
     IS the entrance, so suppress premIn (else content is snapshot mid-fade → blank flash). */
  html.has-vt .home,html.has-vt .lhead,html.has-vt .crumb,html.has-vt .cert{animation:none}
}

/* View Transitions — fast, GPU-composited cross-fade on every route change.
   Fires only where supported AND motion is allowed (route() feature-detects + rm-guards),
   so no separate reduced-motion handling is needed here. Keeps the UA's opacity cross-fade
   keyframes (old fades out / new fades in) but snappier than the 250ms default. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:cubic-bezier(.2,.6,.2,1)}
}

/* ---- PREMIUM v3 — lesson view ---- */
.tryit{border-radius:18px;box-shadow:0 18px 40px -26px rgba(27,42,92,.42);border:1.5px solid rgba(224,146,31,.35)}
.tryit__bar{background:linear-gradient(90deg,var(--amber),var(--amber-deep));letter-spacing:.01em}
.quiz{border-radius:18px;box-shadow:0 18px 40px -26px rgba(27,42,92,.42);border:1px solid rgba(27,42,92,.07)}
.quiz__opt{border-radius:12px;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.quiz__opt:hover{border-color:var(--amber);background:rgba(224,146,31,.06);transform:translateX(3px);box-shadow:0 8px 20px -12px rgba(224,146,31,.5)}
.quiz__opt.is-correct{background:linear-gradient(120deg,#e9f6ee,#f4fbf6);box-shadow:0 8px 20px -12px rgba(31,122,71,.4)}
.quiz__opt.is-wrong{background:linear-gradient(120deg,#fdeced,#fff5f5)}
.sec-label{border-left:0;padding-left:0;display:flex;align-items:center;gap:12px}
.sec-label::before{content:"";width:6px;height:.95em;border-radius:6px;background:linear-gradient(180deg,var(--amber),var(--green));flex:none}
.lhead{border-bottom:0;position:relative;padding-bottom:20px}
.lhead::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--amber),rgba(224,146,31,0) 62%)}
.lhead__ic{font-size:2.6rem;filter:drop-shadow(0 6px 14px rgba(27,42,92,.2))}
.lhead h1{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.cert{box-shadow:0 30px 70px -30px rgba(27,42,92,.5)}
.pb,.dash{border-radius:20px}
.dcard{border-radius:16px;box-shadow:0 16px 38px -26px rgba(27,42,92,.4)!important;transition:.3s var(--ease)}
.dcard:hover{transform:translateY(-4px)}
.badge{border-radius:14px;transition:.25s var(--ease)}
.badge.got{box-shadow:0 12px 26px -14px rgba(224,146,31,.55)}
.reco__t{font-size:1.22rem}

/* ============================================================
   PREMIUM v4 — cinematic (ambient motion + tactile interactions)
   ============================================================ */
/* slowly-rotating Ashoka chakra watermark behind content */
.lib__main{position:relative}
.lib__main::before{content:"";position:absolute;top:44px;right:22px;width:min(27vw,360px);aspect-ratio:1;
  background:url(../img/chakra.svg) center/contain no-repeat;opacity:.05;pointer-events:none;z-index:0;animation:premSpin 140s linear infinite}
.lib__main>*{position:relative;z-index:1}
@keyframes premSpin{to{transform:rotate(360deg)}}
@media (max-width:760px){.lib__main::before{display:none}}
/* mobile ergonomics: bump primary-nav tap targets to ~44px (comfort for imprecise taps on budget phones) */
@media (max-width:760px){
  .side-link{padding:12px 13px}
  .side-home{padding:13px 13px}
  .hub-back{padding:8px 4px}
}

/* hero — gentle shimmer sweep across the gradient text */
.home h1{background-image:linear-gradient(110deg,#16244f 0%,#26356b 34%,#4c66b0 50%,#26356b 66%,#1b6e45 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:premShine 7.5s ease-in-out infinite}
@keyframes premShine{0%,100%{background-position:14% 50%}50%{background-position:86% 50%}}

/* live pulse on the eyebrow status dot */
.hub-eyebrow::before{animation:premPulse 2.6s ease-out infinite}
@keyframes premPulse{0%{box-shadow:0 0 0 0 rgba(31,122,71,.5)}70%{box-shadow:0 0 0 9px rgba(31,122,71,0)}100%{box-shadow:0 0 0 0 rgba(31,122,71,0)}}

/* rank bar — continuous subtle sheen; track bars — sheen on hover only */
.xpstrip__bar i{position:relative;overflow:hidden}
.xpstrip__bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-110%);animation:premBar 3s ease-in-out infinite}
.tcard__bar i{position:relative;overflow:hidden}
.tcard:hover .tcard__bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-110%);animation:premBar 1.2s ease-out}
@keyframes premBar{0%{transform:translateX(-110%)}60%,100%{transform:translateX(240%)}}

/* recommendation CTA — shine sweep to draw the eye */
.reco__go{position:relative;overflow:hidden}
.reco__go::after{content:"";position:absolute;top:0;left:0;width:38%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-180%) skewX(-18deg);animation:premBtn 3.6s ease-in-out infinite}
@keyframes premBtn{0%{transform:translateX(-180%) skewX(-18deg)}55%,100%{transform:translateX(430%) skewX(-18deg)}}

/* tactile card hover — glow ring on top of the lift, smooth for JS tilt */
.tcard:hover{box-shadow:0 34px 64px -26px rgba(27,42,92,.52),0 0 0 1px rgba(224,146,31,.3)}
.hcard:hover{box-shadow:0 30px 60px -26px rgba(27,42,92,.5),0 0 0 1px rgba(224,146,31,.24)}
.tcard,.hcard,.reco{will-change:transform;transform-style:preserve-3d}

/* refined text selection */
::selection{background:rgba(224,146,31,.26);color:var(--ink-brand)}

/* respect reduced-motion — calm all ambient animation */
@media (prefers-reduced-motion:reduce){
  .lib__main::before,.home h1,.hub-eyebrow::before,.xpstrip__bar i::after,.reco__go::after{animation:none!important}
  .home h1{background-position:0 50%}
}

/* ============================================================
   DARK "NIGHT" MODE — premium dark theme (toggle in header)
   ============================================================ */
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.55);
  font-size:1.1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:.25s var(--ease)}
.theme-toggle:hover{transform:translateY(-2px) rotate(-14deg);box-shadow:0 12px 26px -12px rgba(27,42,92,.5)}

html[data-theme="dark"]{--ink-brand:#e8edff;--ink-green:#7fd3a5;--bg:#0a1124;--surface:#15224a;--cream:#13204a;--blush:#1a2752;--mist:#122238;
  --line:rgba(255,255,255,.10);--ink:#eef2ff;--text:#d6def6;--muted:#9aa6cf;--amber-text:#eba63f}
html[data-theme="dark"] body.lib-page{
  background:
    radial-gradient(60% 48% at 88% -6%,rgba(224,146,31,.17),transparent 60%),
    radial-gradient(52% 46% at -8% 102%,rgba(31,122,71,.15),transparent 58%),
    radial-gradient(46% 40% at 50% 118%,rgba(80,110,200,.12),transparent 60%),
    linear-gradient(180deg,#0a1124,#070d1e) !important}
html[data-theme="dark"] .hub-top{background:rgba(11,18,42,.74);border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .brand__rpd,html[data-theme="dark"] .hub-back{color:var(--ink)}
html[data-theme="dark"] .brand__name{color:var(--muted)}
html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .lib-search,html[data-theme="dark"] .langsel{background:#101a3c;border-color:rgba(255,255,255,.14);color:var(--ink)}
html[data-theme="dark"] .langsel{background:#101a3c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9C4E0' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E") no-repeat 9px center;background-size:16px 16px}
html[data-theme="dark"] .lib-search::placeholder{color:#8d99c4}
html[data-theme="dark"] .lib__side{background:linear-gradient(180deg,#0f1838,#0a1124);border-right-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .side-link{color:var(--text)}
html[data-theme="dark"] .side-link:hover{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .side-home{color:var(--text)}
html[data-theme="dark"] .lib__progress{background:#101a3c;border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .home h1{background-image:linear-gradient(110deg,#ffe1a0 0%,#f1cb6b 42%,#4cd08e 100%)}
html[data-theme="dark"] .home__lede{color:#c2ccec}
html[data-theme="dark"] .hub-eyebrow{background:rgba(28,40,82,.6);border-color:rgba(224,146,31,.45);color:var(--gold-soft)}
html[data-theme="dark"] .home__stats>div{background:linear-gradient(160deg,rgba(28,40,82,.94),rgba(18,28,60,.72));border-color:rgba(255,255,255,.09);box-shadow:0 16px 38px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="dark"] .home__stats span{color:#c2ccec}
html[data-theme="dark"] .home__cat,html[data-theme="dark"] .home__cat2{color:var(--ink)}
html[data-theme="dark"] .tcard,html[data-theme="dark"] .hcard,html[data-theme="dark"] .quiz,html[data-theme="dark"] .pb,html[data-theme="dark"] .dcard,html[data-theme="dark"] .cert{background:#14214a;border-color:rgba(255,255,255,.09);box-shadow:0 20px 46px -26px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .tcard b,html[data-theme="dark"] .tipcard__b b,html[data-theme="dark"] .hcard b{color:var(--ink)}
html[data-theme="dark"] .tcard__out,html[data-theme="dark"] .hcard p,html[data-theme="dark"] .hcard span{color:var(--muted)}
html[data-theme="dark"] .tcard__lvl{background:linear-gradient(135deg,#22305c,#1a2750);color:var(--gold-soft);border-color:rgba(224,146,31,.4)}
html[data-theme="dark"] .tipcard{background:linear-gradient(150deg,#1d2950,#14214a);border-color:rgba(224,146,31,.32)}
html[data-theme="dark"] .tipcard__b span{color:var(--muted)}
html[data-theme="dark"] .quiz__opt{background:#101a3c;border-color:rgba(255,255,255,.14);color:var(--text)}
html[data-theme="dark"] .quiz__opt:hover{background:rgba(224,146,31,.12)}
html[data-theme="dark"] .quiz__opt.is-correct{background:linear-gradient(120deg,#16382a,#13301f);color:#7fe0a8;border-color:var(--green)}
html[data-theme="dark"] .quiz__opt.is-wrong{background:linear-gradient(120deg,#3a1d22,#2c1418);color:#f3b4ba}
html[data-theme="dark"] .quiz p{color:var(--ink)}
html[data-theme="dark"] .lbody,html[data-theme="dark"] .lbody li,html[data-theme="dark"] .lbody p{color:var(--text)}
html[data-theme="dark"] .lbody h3,html[data-theme="dark"] .lbody h2{color:var(--ink)}
html[data-theme="dark"] .lhead h1{color:var(--ink)}
html[data-theme="dark"] .lhead p{color:var(--muted)}
html[data-theme="dark"] .crumb,html[data-theme="dark"] .crumb a,html[data-theme="dark"] .muted{color:var(--muted)}
html[data-theme="dark"] .tipbox,html[data-theme="dark"] .tip{background:linear-gradient(150deg,#15321f,#11281a);border-color:rgba(53,166,110,.4);color:#cfeede}
html[data-theme="dark"] .tryit{background:#101a3c;border-color:rgba(224,146,31,.35)}
html[data-theme="dark"] .tryit__in{background:#0d1530;color:var(--ink);border-bottom-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .tryit__out{color:#c2ccec}
html[data-theme="dark"] .btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--ink)}
html[data-theme="dark"] .lib__main::before{opacity:.08}
html[data-theme="dark"] #pbOut,html[data-theme="dark"] .pb textarea{background:#0d1530;color:var(--ink);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .pb select,html[data-theme="dark"] .pb input{background:#101a3c;color:var(--ink);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .pb label{color:var(--text)}
html[data-theme="dark"] .dcard__l,html[data-theme="dark"] .dcard__k,html[data-theme="dark"] .dcard__sub{color:var(--muted)}
html[data-theme="dark"] .dcard__v,html[data-theme="dark"] .dcard__rk{color:var(--ink)}
html[data-theme="dark"] .badge{background:#101a3c;border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .badge__nm{color:var(--text)}
html[data-theme="dark"] .footer{background:#070d1e;color:var(--muted);border-color:rgba(255,255,255,.06)}
html[data-theme="dark"] .footer p{color:var(--muted)}
html[data-theme="dark"] .onbo__card{background:#14214a}
html[data-theme="dark"] .onbo__card h2,html[data-theme="dark"] .onbo__hi{color:var(--ink)}
html[data-theme="dark"] .onbo__card p{color:var(--muted)}
html[data-theme="dark"] .onbo__p{background:#101a3c;border-color:rgba(255,255,255,.12);color:var(--text)}
html[data-theme="dark"] .langnote{background:rgba(28,40,82,.6);color:#c2ccec;border-color:rgba(255,255,255,.1)}

/* ============================================================
   PREMIUM v5 — animated aurora ambient layer
   ============================================================ */
body.lib-page::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 40% at 18% 28%, rgba(224,146,31,.11), transparent 62%),
    radial-gradient(34% 38% at 82% 22%, rgba(31,122,71,.11), transparent 62%),
    radial-gradient(32% 36% at 62% 82%, rgba(80,110,200,.09), transparent 62%);
  animation:premAurora 26s ease-in-out infinite alternate}
@keyframes premAurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.09)}100%{transform:translate3d(3%,-2%,0) scale(1.05)}}
html[data-theme="dark"] body.lib-page::before{
  background:
    radial-gradient(38% 40% at 18% 28%, rgba(224,146,31,.18), transparent 62%),
    radial-gradient(34% 38% at 82% 22%, rgba(31,122,71,.17), transparent 62%),
    radial-gradient(32% 36% at 62% 82%, rgba(90,120,210,.16), transparent 62%)}
@media (prefers-reduced-motion:reduce){body.lib-page::before{animation:none}}

/* count-up reveal hint (numbers animate via premium.js) */
.home__stats b{transition:none}

/* ============================================================
   PREMIUM v6 — scroll-reveal · animated border · splash
   ============================================================ */
/* scroll-reveal */
@media (prefers-reduced-motion:no-preference){
  .prem-rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .prem-rv.prem-vis{opacity:1;transform:none}
}

/* animated conic-gradient border on the recommendation card */
@property --premang{syntax:"<angle>";initial-value:0deg;inherits:false}
.reco{--premang:0deg;border:2px solid transparent;
  background:linear-gradient(135deg,#22336e,#16224d 72%) padding-box,
            conic-gradient(from var(--premang),rgba(224,146,31,.95),rgba(31,122,71,.9),rgba(241,203,107,.95),rgba(31,122,71,.9),rgba(224,146,31,.95)) border-box;
  animation:premBorder 7s linear infinite}
@keyframes premBorder{to{--premang:360deg}}
html[data-theme="dark"] .reco{background:linear-gradient(135deg,#24366e,#16224d 72%) padding-box,
            conic-gradient(from var(--premang),rgba(224,146,31,1),rgba(53,166,110,.95),rgba(241,203,107,1),rgba(53,166,110,.95),rgba(224,146,31,1)) border-box}
@media (prefers-reduced-motion:reduce){.reco{animation:none}}

/* first-visit splash */
.splash{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  background:radial-gradient(60% 50% at 50% 35%,#1d2c5e,#0a1124 75%);overflow:hidden}
.splash::before{content:"";position:absolute;inset:0;
  background:radial-gradient(40% 40% at 20% 30%,rgba(224,146,31,.18),transparent 60%),radial-gradient(40% 40% at 80% 70%,rgba(31,122,71,.16),transparent 60%)}
.splash__in{position:relative;text-align:center;animation:splashIn .9s var(--ease) both}
.splash__chakra{width:120px;height:120px;margin:0 auto 20px;
  background:linear-gradient(120deg,#ffe1a0,#f1cb6b 45%,#4cd08e);
  -webkit-mask:url(../img/chakra.svg) center/contain no-repeat;mask:url(../img/chakra.svg) center/contain no-repeat;
  animation:premSpin 4s linear infinite}
.splash__name{font-family:var(--dv-head);font-size:clamp(2rem,7vw,2.8rem);line-height:1;
  background:linear-gradient(110deg,#ffe1a0,#f1cb6b 45%,#4cd08e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.splash__sub{font-family:var(--dv-sub);color:rgba(231,238,255,.72);margin-top:8px;letter-spacing:.14em;font-size:.95rem}
.splash--out{animation:splashOut .55s var(--ease) forwards}
@keyframes splashIn{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes splashOut{to{opacity:0;transform:scale(1.05)}}
.splash--noanim,.splash--noanim .splash__chakra,.splash--noanim .splash__in{animation:none}

/* ============================================================
   UX v7 — reading progress · back-to-top · search states
   ============================================================ */
.read-prog{position:fixed;top:0;left:0;width:100%;height:3px;z-index:200;opacity:0;transition:opacity .3s;pointer-events:none}
.read-prog.on{opacity:1}
.read-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--green));box-shadow:0 0 8px rgba(224,146,31,.55);transition:width .08s linear}
.totop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:0;z-index:150;
  background:linear-gradient(135deg,#26376e,var(--navy));color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;
  box-shadow:0 16px 32px -12px rgba(27,42,92,.6);opacity:0;transform:translateY(12px) scale(.92);pointer-events:none;transition:.3s var(--ease)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px) scale(1.04)}
.side-count{font-family:var(--dv-sub);font-size:.76rem;color:var(--muted);padding:8px 12px 2px;font-weight:700;letter-spacing:.02em}
.side-empty{margin:10px 8px;padding:16px 14px;border-radius:12px;background:rgba(27,42,92,.04);border:1px dashed var(--line);color:var(--muted);font-size:.92rem;line-height:1.5;text-align:center}
html[data-theme="dark"] .totop{background:linear-gradient(135deg,#2a3e7e,var(--navy))}
html[data-theme="dark"] .side-empty{background:rgba(255,255,255,.04)}
/* UX audit #18: escape from a no-results screen */
.side-clear{display:inline-block;margin-top:12px;background:var(--amber);color:var(--navy-900,#0d1836);border:0;border-radius:999px;padding:8px 16px;font-family:var(--dv-sub);font-weight:700;font-size:.9rem;cursor:pointer}
.side-clear:active{transform:scale(.97)}
/* UX audit #26/#71: honest offline-awareness bar (slides up from the bottom only while the connection is down) */
.offline-bar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--navy);color:#fff;font-family:var(--dv-sub);font-size:.88rem;line-height:1.4;padding:11px 16px;text-align:center;transform:translateY(110%);transition:transform .3s var(--ease);box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.offline-bar.show{transform:none}
@media(prefers-reduced-motion:reduce){.offline-bar{transition:none}}
/* UX audit #44: rank-up celebration — a real moment, not a fleeting toast */
.rankup{position:fixed;inset:0;z-index:340;background:rgba(12,20,48,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .3s}
.rankup.show{opacity:1}
.rankup__card{background:var(--surface);border-radius:22px;max-width:340px;width:100%;padding:30px 26px;text-align:center;box-shadow:0 30px 70px -25px rgba(0,0,0,.55);transform:translateY(14px) scale(.96);transition:transform .35s var(--ease)}
.rankup.show .rankup__card{transform:none}
.rankup__ic{font-size:3.4rem;line-height:1;animation:rankPop .5s var(--ease) both}
.rankup__k{font-family:var(--dv-sub);color:var(--amber-text);font-weight:700;font-size:1.05rem;margin-top:10px}
.rankup__nm{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.7rem;margin:2px 0 18px}
.rankup__ok{width:100%;max-width:220px}
@keyframes rankPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
html[data-theme="dark"] .rankup__card{background:#14214a}
html[data-theme="dark"] .rankup__nm{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.rankup,.rankup__card{transition:none}.rankup__ic{animation:none}}
@media (prefers-reduced-motion:reduce){.read-prog i{transition:none}}

/* ---- read-aloud button ---- */
.lact{margin:2px 0 12px}
.lspeak.is-speaking{background:linear-gradient(135deg,var(--green-soft),var(--green));color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(31,122,71,.6)}

/* ============================================================
   National AI Literacy Test + mission CTA
   ============================================================ */
.mission-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;margin:18px 0;padding:16px 22px;border-radius:18px;
  background:linear-gradient(120deg,#1F7A47,#14552F);color:#fff;box-shadow:0 18px 40px -22px rgba(20,85,47,.6);transition:.25s var(--ease);position:relative;overflow:hidden}
.mission-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 0 0,rgba(255,255,255,.13),transparent 50%);pointer-events:none}
.mission-cta:hover{transform:translateY(-3px);box-shadow:0 26px 52px -22px rgba(20,85,47,.7)}
.mission-cta>*{position:relative}
.mission-cta__l b{display:block;font-family:var(--dv-head);font-size:1.12rem;line-height:var(--lh-head)}
.mission-cta__l span{font-size:.9rem;opacity:.92}
.mission-cta__go{flex:none;background:var(--gold);color:var(--navy-900);font-weight:800;padding:10px 18px;border-radius:999px;white-space:nowrap}
@media(max-width:560px){.mission-cta{flex-direction:column;align-items:flex-start}}
.testwrap{margin:18px 0}
.tq{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:12px 0;box-shadow:var(--shadow-sm)}
.tq__q{font-family:var(--dv-sub);font-weight:700;color:var(--ink-brand);font-size:1.05rem;margin:0 0 10px}
.tq__opts{display:grid;gap:8px}
.tq__opt{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;border:1.5px solid var(--line);cursor:pointer;transition:.18s var(--ease)}
.tq__opt:hover{border-color:var(--amber);background:rgba(224,146,31,.05)}
.tq__opt input{accent-color:var(--amber);width:18px;height:18px;flex:none}
.tq__opt.ok{background:linear-gradient(120deg,#e9f6ee,#f4fbf6);border-color:var(--green)}
.tq__opt.no{background:linear-gradient(120deg,#fdeced,#fff5f5);border-color:#d98a8a}
.testbar{margin:18px 0;display:flex;align-items:center;gap:12px}
.testbar .btn--gold{font-size:1.05rem;padding:13px 26px}
.testsubmit.is-done{opacity:.55;pointer-events:none}
.testresult{margin:10px 0 34px}
.trcard{text-align:center;background:linear-gradient(160deg,var(--surface),#fff);border:1px solid var(--line);border-radius:22px;padding:28px 24px;box-shadow:var(--shadow)}
.trcard.is-pass{background:linear-gradient(160deg,#f0f8f2,#fff);border-color:rgba(31,122,71,.3)}
.tr__badge{font-size:3.4rem;line-height:1}
.tr__score{font-family:var(--en-serif);font-size:2rem;color:var(--amber-text);margin:6px 0}
.tr__lvl{font-size:1.15rem;color:var(--ink-brand);margin-bottom:16px}
.tr__lvl b{color:var(--ink-green)}
.tr__act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.side-test.is-active{background:linear-gradient(120deg,var(--green),var(--green-deep));color:#fff}
html[data-theme="dark"] .tq{background:#14214a;border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .tq__q{color:var(--ink)}
html[data-theme="dark"] .tq__opt{background:#101a3c;border-color:rgba(255,255,255,.12);color:var(--text)}
html[data-theme="dark"] .tq__opt.ok{background:linear-gradient(120deg,#16382a,#13301f);border-color:var(--green)}
html[data-theme="dark"] .tq__opt.no{background:linear-gradient(120deg,#3a1d22,#2c1418)}
html[data-theme="dark"] .trcard{background:#14214a;border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .trcard.is-pass{background:linear-gradient(160deg,#13301f,#14214a)}
html[data-theme="dark"] .tr__lvl{color:var(--ink)}

/* ---- AI Encyclopedia ---- */
.encysearch{width:100%;margin:6px 0 4px}
.encycount{font-size:.8rem;margin:2px 0 14px;font-weight:600}
.encylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.encard{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm);transition:.3s var(--ease)}
.encard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-left-color:var(--amber)}
.encard__t{font-family:var(--dv-sub);font-weight:800;color:var(--ink-brand);font-size:1.08rem;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.encard__cat{font-family:var(--dv-sub);font-size:.66rem;font-weight:700;color:var(--ink-green);background:var(--mist);border-radius:999px;padding:2px 9px;white-space:nowrap;flex:none}
.encard__d{color:var(--text);font-size:.95rem;line-height:1.5;margin-top:7px}
.encard__e{color:var(--muted);font-size:.86rem;font-style:italic;margin-top:6px;border-top:1px dashed var(--line);padding-top:6px}
.side-ency.is-active{background:linear-gradient(120deg,var(--green),var(--green-deep));color:#fff}
html[data-theme="dark"] .encard{background:#14214a;border-color:rgba(255,255,255,.09);border-left-color:var(--green)}
html[data-theme="dark"] .encard__t{color:var(--ink)}
html[data-theme="dark"] .encard__cat{background:rgba(53,166,110,.16);color:#7fe0a8}
html[data-theme="dark"] .encard__d{color:var(--text)}

/* ---- Tamil script fonts (lang=ta) ---- */
html[lang="ta"] body,html[lang="ta"] .lbody,html[lang="ta"] .lbody li,html[lang="ta"] .lbody p,html[lang="ta"] .home__lede,
html[lang="ta"] .side-link,html[lang="ta"] .side-home,html[lang="ta"] .tq,html[lang="ta"] .tq__opt,html[lang="ta"] .encard__d,
html[lang="ta"] .encard__e,html[lang="ta"] .tcard__out,html[lang="ta"] .quiz,html[lang="ta"] .quiz__opt,html[lang="ta"] .tipcard,
html[lang="ta"] .lwho,html[lang="ta"] .hub-eyebrow,html[lang="ta"] .home__stats span,html[lang="ta"] .lhead p,html[lang="ta"] .muted,
html[lang="ta"] .reco,html[lang="ta"] .tipcard__b,html[lang="ta"] .crumb{font-family:"Noto Sans Tamil","Mukta",system-ui,sans-serif}
html[lang="ta"] .home h1,html[lang="ta"] .lhead h1,html[lang="ta"] .sec-label,html[lang="ta"] .home__cat,html[lang="ta"] .home__cat2,
html[lang="ta"] .tcard b,html[lang="ta"] .encard__t,html[lang="ta"] .side-group__t,html[lang="ta"] .tipcard__b b,html[lang="ta"] .tq__q{font-family:"Catamaran","Noto Sans Tamil",sans-serif}

/* ---- Bengali script fonts (lang=bn) ---- */
html[lang="bn"] body,html[lang="bn"] .lbody,html[lang="bn"] .lbody li,html[lang="bn"] .lbody p,html[lang="bn"] .home__lede,
html[lang="bn"] .side-link,html[lang="bn"] .side-home,html[lang="bn"] .tq,html[lang="bn"] .tq__opt,html[lang="bn"] .encard__d,
html[lang="bn"] .encard__e,html[lang="bn"] .tcard__out,html[lang="bn"] .quiz,html[lang="bn"] .quiz__opt,html[lang="bn"] .tipcard,
html[lang="bn"] .lwho,html[lang="bn"] .hub-eyebrow,html[lang="bn"] .home__stats span,html[lang="bn"] .lhead p,html[lang="bn"] .muted,
html[lang="bn"] .reco,html[lang="bn"] .tipcard__b,html[lang="bn"] .crumb{font-family:"Noto Sans Bengali","Mukta",system-ui,sans-serif}
html[lang="bn"] .home h1,html[lang="bn"] .lhead h1,html[lang="bn"] .sec-label,html[lang="bn"] .home__cat,html[lang="bn"] .home__cat2,
html[lang="bn"] .tcard b,html[lang="bn"] .encard__t,html[lang="bn"] .side-group__t,html[lang="bn"] .tipcard__b b,html[lang="bn"] .tq__q{font-family:"Noto Sans Bengali",sans-serif;font-weight:700}

/* ---- Telugu script fonts (lang=te) ---- */
html[lang="te"] body,html[lang="te"] .lbody,html[lang="te"] .lbody li,html[lang="te"] .lbody p,html[lang="te"] .home__lede,
html[lang="te"] .side-link,html[lang="te"] .side-home,html[lang="te"] .tq,html[lang="te"] .tq__opt,html[lang="te"] .encard__d,
html[lang="te"] .encard__e,html[lang="te"] .tcard__out,html[lang="te"] .quiz,html[lang="te"] .quiz__opt,html[lang="te"] .tipcard,
html[lang="te"] .lwho,html[lang="te"] .hub-eyebrow,html[lang="te"] .home__stats span,html[lang="te"] .lhead p,html[lang="te"] .muted,
html[lang="te"] .reco,html[lang="te"] .tipcard__b,html[lang="te"] .crumb{font-family:"Noto Sans Telugu","Mukta",system-ui,sans-serif}
html[lang="te"] .home h1,html[lang="te"] .lhead h1,html[lang="te"] .sec-label,html[lang="te"] .home__cat,html[lang="te"] .home__cat2,
html[lang="te"] .tcard b,html[lang="te"] .encard__t,html[lang="te"] .side-group__t,html[lang="te"] .tipcard__b b,html[lang="te"] .tq__q{font-family:"Noto Sans Telugu",sans-serif;font-weight:700}

/* ---- Gujarati script fonts (lang=gu) ---- */
html[lang="gu"] body,html[lang="gu"] .lbody,html[lang="gu"] .lbody li,html[lang="gu"] .lbody p,html[lang="gu"] .home__lede,
html[lang="gu"] .side-link,html[lang="gu"] .side-home,html[lang="gu"] .tq,html[lang="gu"] .tq__opt,html[lang="gu"] .encard__d,
html[lang="gu"] .encard__e,html[lang="gu"] .tcard__out,html[lang="gu"] .quiz,html[lang="gu"] .quiz__opt,html[lang="gu"] .tipcard,
html[lang="gu"] .lwho,html[lang="gu"] .hub-eyebrow,html[lang="gu"] .home__stats span,html[lang="gu"] .lhead p,html[lang="gu"] .muted,
html[lang="gu"] .reco,html[lang="gu"] .tipcard__b,html[lang="gu"] .crumb{font-family:"Noto Sans Gujarati","Mukta",system-ui,sans-serif}
html[lang="gu"] .home h1,html[lang="gu"] .lhead h1,html[lang="gu"] .sec-label,html[lang="gu"] .home__cat,html[lang="gu"] .home__cat2,
html[lang="gu"] .tcard b,html[lang="gu"] .encard__t,html[lang="gu"] .side-group__t,html[lang="gu"] .tipcard__b b,html[lang="gu"] .tq__q{font-family:"Noto Sans Gujarati",sans-serif;font-weight:700}

/* ===== Human-centered design layer (psychology + neuroscience + Vedic pedagogy) ===== */
/* Onboarding: fear-naming step-0 dignity chips */
.onbo__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 6px}
.onbo__chips span{background:var(--mist,#EDF5EF);color:var(--green-deep,#14552F);border:1px solid var(--green,#1F7A47);border-radius:999px;padding:5px 13px;font-size:.84rem;font-weight:600;font-family:var(--dv-sub)}
.onbo__next{margin-top:14px;width:100%;max-width:320px}
.onbo__slide h2{margin-top:6px}
.onbo__mark{width:58px;height:58px;margin:0 auto 8px;filter:drop-shadow(0 10px 22px rgba(27,42,92,.28));animation:onboMarkIn .55s var(--ease) both}
.onbo__mark svg{width:100%;height:100%;display:block}
@keyframes onboMarkIn{from{opacity:0;transform:translateY(-10px) scale(.82)}to{opacity:1;transform:none}}
.onbo__chips span{display:inline-flex;align-items:center;gap:6px}
.onbo__chips .ic{width:15px;height:15px;stroke-width:1.9}
@media(prefers-reduced-motion:reduce){.onbo__mark{animation:none}}
/* ===== PWA install banner (Add to Home Screen) ===== */
.pwa-banner{position:fixed;left:50%;bottom:16px;transform:translate(-50%,150%);z-index:340;display:flex;align-items:center;gap:12px;
  max-width:440px;width:calc(100% - 28px);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;
  box-shadow:0 22px 54px -18px rgba(12,20,48,.5);transition:transform .34s var(--ease)}
.pwa-banner.show{transform:translate(-50%,0)}
.pwa-banner__ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;flex:none;
  background:linear-gradient(150deg,rgba(27,42,92,.13),rgba(27,42,92,.04));color:var(--ink-brand)}
.pwa-banner__ic .ic{width:22px;height:22px}
.pwa-banner__tx{flex:1;min-width:0}
.pwa-banner__tx b{display:block;font-size:.96rem;color:var(--ink-brand);line-height:var(--lh-head)}
.pwa-banner__tx span{display:block;font-size:.79rem;color:var(--muted);line-height:1.35;margin-top:2px}
.pwa-banner__go{flex:none;padding:9px 16px;font-size:.9rem}
.pwa-banner__x{flex:none;width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:8px}
.pwa-banner__x:hover{background:rgba(0,0,0,.06);color:var(--ink-brand)}
html[data-theme="dark"] .pwa-banner__ic{background:linear-gradient(150deg,rgba(224,146,31,.22),rgba(224,146,31,.07));color:var(--amber-text)}
html[data-theme="dark"] .pwa-banner__tx b{color:var(--ink)}
html[data-theme="dark"] .pwa-banner__x:hover{background:rgba(255,255,255,.08);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.pwa-banner{transition:none}}
/* ===== QR: invite-card button + scan modal (offline peer-to-peer sharing) ===== */
.invitecard__qr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--cream);border:1px solid var(--line);color:var(--ink-brand);cursor:pointer;transition:transform .25s var(--ease),border-color .25s,color .25s}
.invitecard__qr:hover{border-color:var(--amber);color:var(--amber-text);transform:translateY(-2px)}
.invitecard__qr .ic{width:24px;height:24px}
.qr-ov{position:fixed;inset:0;z-index:360;background:rgba(12,20,48,.6);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .3s}
.qr-ov.show{opacity:1}
.qr-card{position:relative;background:var(--surface);border-radius:22px;padding:26px;max-width:340px;width:100%;text-align:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.55);transform:translateY(14px) scale(.97);transition:transform .32s var(--ease)}
.qr-ov.show .qr-card{transform:none}
.qr-card h3{font-family:var(--dv-head);color:var(--ink-brand);font-size:1.24rem;margin:0 0 14px}
.qr-card__code{width:230px;height:230px;max-width:78vw;margin:0 auto;background:#fff;border-radius:14px;padding:12px;box-shadow:0 8px 26px -12px rgba(27,42,92,.35)}
.qr-card__code svg{display:block;border-radius:6px}
.qr-card p{color:var(--muted);font-size:.86rem;line-height:1.5;margin:14px 4px 0}
.qr-card__x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;background:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:8px}
.qr-card__x:hover{background:rgba(0,0,0,.06);color:var(--ink-brand)}
html[data-theme="dark"] .qr-card h3{color:var(--ink)}
html[data-theme="dark"] .qr-card__x:hover{background:rgba(255,255,255,.08);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.qr-ov,.qr-card{transition:none}}

/* First-win (#1): the guaranteed first success */
.firstwin{max-width:640px;margin:0 auto;text-align:center;padding:8px 2px}
.fw__ic{font-size:2.6rem;line-height:1;margin-bottom:6px}
.firstwin h1{font-family:var(--dv-head,inherit);color:var(--navy,#1B2A5C);font-size:clamp(1.4rem,4.4vw,2rem);line-height:var(--lh-head);margin:6px 0}
.fw__sub{color:var(--muted,#5f6884);font-family:var(--dv-sub);margin:0 0 16px}
.fw__prompt{position:relative;text-align:left;background:var(--surface,#fff);border:2px dashed var(--amber,#E0921F);border-radius:14px;padding:30px 16px 16px;margin:0 auto 16px;max-width:520px;font-size:1.06rem;color:var(--ink,#1E2647);font-weight:600;font-family:var(--dv-body)}
.fw__lbl{position:absolute;top:-12px;left:14px;background:var(--amber,#E0921F);color:#3a2400;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.fw__go{font-size:1.1rem;padding:13px 26px}
.fw__think{font-size:1.1rem;color:var(--amber-text,#96590E);font-family:var(--dv-sub);padding:24px;animation:fwpulse 1s ease-in-out infinite}
.fw__dots{display:inline-block;animation:fwpulse .8s ease-in-out infinite}
@keyframes fwpulse{0%,100%{opacity:.5}50%{opacity:1}}
.fw__answer{position:relative;text-align:left;background:var(--mist,#EDF5EF);border:1px solid var(--green,#1F7A47);border-radius:14px;padding:30px 16px 16px;margin:0 auto 18px;max-width:520px;color:var(--green-deep,#14552F);line-height:1.6;font-family:var(--dv-sub)}
.fw__answer .fw__lbl{background:var(--green,#1F7A47);color:#fff}
.fw__win{background:linear-gradient(160deg,#FFFDF8,#FCEFD8);border:1px solid var(--amber-soft,#F4BE5E);border-radius:18px;padding:22px 18px;max-width:520px;margin:0 auto}
.fw__win h2{color:var(--navy,#1B2A5C);margin:4px 0 6px}
.fw__win .btn{margin-top:12px}
.fw__honest{font-size:.82rem;color:var(--muted,#5f6884);font-style:italic;margin:8px 0 2px}

/* Kinder quiz (#2): no red verdict — a soft amber first miss + gentle nudge + review note */
.quiz-reassure{font-size:.9rem;color:var(--muted,#5f6884);font-family:var(--dv-sub);background:var(--mist,#EDF5EF);border-radius:10px;padding:8px 13px;margin:0 0 12px}
.quiz__opt.is-soft{background:#FCEFD8;border-color:var(--amber,#E0921F);color:var(--amber-text,#96590E);opacity:.85}
.quiz__opt:disabled{cursor:default}
.quiz__fb.soft{background:#FCEFD8;color:var(--amber-text,#96590E)}
.quiz__rev{display:block;margin-top:6px;font-size:.82rem;color:var(--green-deep,#14552F);opacity:.9}

/* Peak-end (#15): a sincere closing card with one forward step */
.lpeak{margin:16px 0 4px;background:linear-gradient(160deg,#F4FBF6,#EDF5EF);border:1px solid var(--green,#1F7A47);border-radius:16px;padding:18px 18px 20px;text-align:center;animation:fwpop .4s var(--ease,ease)}
.lpeak__ic{font-size:1.8rem}
.lpeak__t{color:var(--green-deep,#14552F);font-family:var(--dv-sub);font-size:1.06rem;margin:4px 0 12px}
@keyframes fwpop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* Generation try-it (#6): write-your-own then reveal + compare */
.tryit__bar2{margin-top:14px;color:var(--green-deep,#14552F)}
.tryit__mine{width:100%;box-sizing:border-box;padding:9px 12px;border:1.5px solid var(--green,#1F7A47);border-radius:10px;background:var(--surface,#fff);font:inherit;color:var(--text);min-height:46px;resize:vertical}
.tryit__mine:focus{outline:2px solid var(--green-soft,#35A66E);outline-offset:1px}
.tryit__out.is-loading{color:var(--amber-text,#96590E);font-family:var(--dv-sub);padding:10px 14px}
.tryit__cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.tryit__cmp{grid-template-columns:1fr}}
.tryit__cmpcol{background:var(--surface,#fff);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.tryit__cmpcol b{display:block;font-size:.8rem;color:var(--muted,#5f6884);margin-bottom:3px}
.tryit__cmpcol p{margin:0;font-size:.95rem;color:var(--text);line-height:1.5;font-family:var(--dv-sub)}
.tryit__cmpsample{background:var(--mist,#EDF5EF);border-color:var(--green,#1F7A47)}
.tryit__cmpsample p{color:var(--green-deep,#14552F)}
.tryit__honest{font-size:.8rem;color:var(--muted,#5f6884);font-style:italic;margin:8px 0 0}

/* Daily review (#5): due badge + home card */
.side-due{display:inline-block;min-width:18px;text-align:center;background:var(--green,#1F7A47);color:#fff;border-radius:999px;font-size:.74rem;font-weight:700;padding:0 6px;margin-left:4px}
.reviewcard{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#EDF5EF,#F4FBF6);border:1px solid var(--green,#1F7A47);border-radius:16px;padding:16px 18px;margin:0 0 16px;text-decoration:none;color:var(--green-deep,#14552F);transition:.2s var(--ease,ease)}
.reviewcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(31,122,71,.6)}
.reviewcard__ic{font-size:1.8rem}
.reviewcard b{display:block;color:var(--navy,#1B2A5C);font-size:1.05rem}
.reviewcard span{font-size:.9rem;color:var(--muted,#5f6884)}
.reviewcard__go{margin-left:auto;font-weight:700;color:var(--green,#1F7A47)}

/* Wave-3 retention: greeting + daily goal (#8/#11), welcome-back (#9), recall (#10) */
.greet{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:2px 0 14px}
.greet__hi{font-family:var(--dv-sub);font-size:1.1rem;color:var(--navy,#1B2A5C);font-weight:600}
.greet__goal{font-size:.9rem;color:var(--amber-text,#96590E);background:#FCEFD8;border:1px solid #ecd9b0;border-radius:999px;padding:4px 13px;font-weight:600}
.wbcard{display:flex;align-items:center;gap:13px;background:linear-gradient(120deg,#FFF6EE,#FCEFD8);border:1px solid var(--amber-soft,#F4BE5E);border-radius:16px;padding:14px 18px;margin:0 0 14px;animation:fwpop .4s var(--ease,ease)}
.wbcard__ic{font-size:1.7rem}
.wbcard b{display:block;color:var(--navy,#1B2A5C);font-size:1.03rem}
.wbcard span span,.wbcard>span>span{font-size:.9rem;color:var(--muted,#5f6884);font-family:var(--dv-sub)}
.recallcard{display:flex;align-items:center;gap:13px;background:linear-gradient(120deg,#EDF5EF,#F4FBF6);border:1px solid rgba(27,42,92,.18);border-radius:16px;padding:13px 18px;margin:0 0 14px;text-decoration:none;color:var(--navy,#1B2A5C);transition:.2s var(--ease,ease)}
.recallcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(27,42,92,.4)}
.recallcard__ic{font-size:1.6rem}
.recallcard b{display:block;font-size:1rem}
.recallcard span span,.recallcard>span>span{font-size:.88rem;color:var(--muted,#5f6884);font-family:var(--dv-sub)}
.recallcard__go{margin-left:auto;font-weight:700;color:var(--ink-green);white-space:nowrap}

/* Wins log (#17): "things I can now do" — dignity + self-efficacy */
.wins__n{color:var(--green,#1F7A47)}
.wins__aff{font-family:var(--dv-sub);color:var(--green-deep,#14552F);background:var(--mist,#EDF5EF);border-radius:10px;padding:8px 13px;margin:0 0 12px;font-size:.92rem}
.wins{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.wins__chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface,#fff);border:1px solid var(--green,#1F7A47);color:var(--green-deep,#14552F);border-radius:999px;padding:6px 13px;font-size:.9rem;text-decoration:none;transition:.15s var(--ease,ease)}
.wins__chip:hover{background:var(--mist,#EDF5EF);transform:translateY(-1px)}
.wins__chip span{font-size:.85rem}
.wins__cv{margin-bottom:6px}
.lspeak-note{display:inline-block;margin-left:10px;font-size:.86rem;color:var(--amber-text,#96590E);font-family:var(--dv-sub);vertical-align:middle}
/* dual-coding diagram (#13) */
.ldia{width:100%;box-sizing:border-box;margin:18px 0;padding:14px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:16px;text-align:center;box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.05))}
.ldia svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.ldia figcaption{margin-top:8px;font-family:var(--dv-sub);color:var(--ink,#1E2647);font-size:.95rem;line-height:1.5}

/* People-like-you journeys (#16) — honest, illustrative */
.jdisc{background:#FCEFD8;border:1px solid #ecd9b0;color:var(--amber-text,#96590E);border-radius:10px;font-size:.9rem}
.jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:14px 0}
.jcard{display:flex;gap:12px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.05))}
.jcard__ic{font-size:1.9rem;flex:none}
.jcard__lbl{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.03em;color:var(--amber-text,#96590E);background:#FCEFD8;border-radius:999px;padding:2px 8px;margin-bottom:4px}
.jcard__b b{display:block;color:var(--navy,#1B2A5C);font-size:1.02rem;margin-bottom:3px}
.jcard__was{font-size:.88rem;color:var(--muted,#5f6884);margin:0 0 3px;font-family:var(--dv-sub)}
.jcard__learn{font-size:.9rem;color:var(--ink,#1E2647);margin:0 0 3px;font-family:var(--dv-sub)}
.jcard__now{font-size:.92rem;color:var(--green-deep,#14552F);font-weight:600;margin:0;font-family:var(--dv-sub)}
.jteaser{display:flex;align-items:center;gap:13px;background:linear-gradient(120deg,#FFFBF3,#FCEFD8);border:1px solid var(--amber-soft,#F4BE5E);border-radius:16px;padding:13px 18px;margin:0 0 14px;text-decoration:none;color:var(--navy,#1B2A5C);transition:.2s var(--ease,ease)}
.jteaser:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(224,146,31,.6)}
.jteaser__ic{font-size:1.8rem}
.jteaser__tx{display:flex;flex-direction:column}
.jteaser__lbl{font-size:.72rem;font-weight:700;color:var(--amber-text,#96590E)}
.jteaser__tx b{font-size:1rem}
.jteaser__tx span:last-child{font-size:.85rem;color:var(--muted,#5f6884);font-family:var(--dv-sub)}
.jteaser__go{margin-left:auto;font-weight:700;color:var(--amber-text,#96590E)}

/* ============================================================
   PREMIUM POLISH — WAVE 1 (world-class benchmark)
   Design tokens + numeral rhythm + accessible focus + quiz-explanation +
   softer depth on stat tiles. Additive; existing rules untouched.
   ============================================================ */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-8:48px;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --e-1:0 1px 2px rgba(27,42,92,.05);--e-2:0 3px 10px rgba(27,42,92,.07);
  --e-3:0 8px 24px rgba(27,42,92,.10);--e-4:0 18px 48px rgba(27,42,92,.14);
}
/* Tabular + lining numerals so stats / XP / scores never jitter width */
.home__stats,.home__stats *,.tr__score,.xpstrip,.xpstrip *,.pbar,.rank,.side-due,.tq__q,.quiz__q{font-variant-numeric:tabular-nums lining-nums}
/* Crisp, accessible focus ring (replaces the low-contrast amber outline) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--amber-deep,#B26E12);outline-offset:2px;border-radius:8px}
/* Quiz/test/review explanation — the corrective half of the testing effect, now shown after every answer */
.tq__exp{margin-top:8px;padding:9px 13px;border-radius:var(--r-sm,10px);background:var(--surface,#fff);border:1px solid var(--line,#e7ddc4);color:var(--ink,#3a4666);font-size:.92rem;line-height:1.55;font-family:var(--dv-sub,inherit);animation:tqExpIn .3s ease both}
.tq__exp.is-ok{background:#EDF5EF;border-color:#bfe0cb;color:#14552F}
@keyframes tqExpIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
html[data-theme="dark"] .tq__exp{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11);color:var(--text,#dfe6ff)}
html[data-theme="dark"] .tq__exp.is-ok{background:rgba(53,166,110,.14);border-color:rgba(53,166,110,.32);color:#7fe0a8}
/* Stat tiles: flat white → soft engineered depth + gentle lift on hover */
.home__stats>*{box-shadow:var(--e-2,0 3px 10px rgba(27,42,92,.07));border:1px solid rgba(27,42,92,.05);transition:transform .18s ease,box-shadow .18s ease}
.home__stats>*:hover{transform:translateY(-3px);box-shadow:var(--e-3,0 8px 24px rgba(27,42,92,.10))}
@media (prefers-reduced-motion:reduce){.home__stats>*{transition:none}.home__stats>*:hover{transform:none}}
/* UX audit #19: instant "pressed" feedback on every tap target, and NO sticky hover-lift on touch devices
   (on Android :hover latches after a tap and leaves cards stuck in their lifted state). */
.btn:not(:disabled):active,.quiz__opt:active,.tq__opt:active,.side-link:active,.hcard:active,.tcard:active,.earn-card:active,.onbo__p:active,.home__stats>*:active,.reco:active,.mission-cta:active,.journeycard:active{transform:scale(.975);transition:transform .07s ease}
@media (hover:none){
  .home__stats>*:hover,.tcard:hover,.earn-card:hover,.onbo__p:hover,.reco:hover,.hcard:hover,.stat--warm:hover{transform:none}
}

/* ============================================================
   PREMIUM WAVE 2 — the signature "living" wow
   Circadian ambient theme (the app's light matches the sky) + art-directed
   hero glow + premium motion. Zero assets, offline, reduced-motion-safe.
   ============================================================ */
/* Circadian accent glow (all themes) — drives the hero + ambient warmth */
html[data-time="dawn"]{--amb-glow:rgba(255,144,84,.34);--amb-glow2:rgba(255,192,116,.26)}
html[data-time="day"] {--amb-glow:rgba(224,146,31,.26);--amb-glow2:rgba(31,122,71,.17)}
html[data-time="dusk"]{--amb-glow:rgba(233,120,44,.36);--amb-glow2:rgba(206,88,54,.24)}
html[data-time="night"]{--amb-glow:rgba(104,124,224,.28);--amb-glow2:rgba(31,122,71,.18)}
/* Circadian base-warmth shift (LIGHT theme only — dark keeps its own --bg) */
html:not([data-theme="dark"])[data-time="dawn"]{--bg:#fdf4ea}
html:not([data-theme="dark"])[data-time="dusk"]{--bg:#fdf1e1}
html:not([data-theme="dark"])[data-time="night"]{--bg:#f3f1ec}
/* A soft fixed aurora on the page background (behind ALL content; no z-index games) that fills
   the dead-space and shifts through the day. Transparent content areas reveal it. */
.lib-page{background-color:var(--bg);
  background-image:radial-gradient(46% 40% at 100% 2%,var(--amb-glow,rgba(224,146,31,.15)),transparent 58%),
                   radial-gradient(40% 44% at 0% 100%,var(--amb-glow2,rgba(31,122,71,.10)),transparent 60%);
  background-attachment:fixed;background-repeat:no-repeat;transition:background-color 1s ease}
/* Art-directed hero: a warm glow behind the masthead (behind text, no z-index games) + tighter rhythm */
.home{position:relative;background:radial-gradient(480px 400px at 99% -10%,var(--amb-glow,rgba(224,146,31,.15)),transparent 60%);background-repeat:no-repeat}
.home h1{margin-top:6px}
.hub-eyebrow{box-shadow:0 2px 14px rgba(224,146,31,.14);backdrop-filter:saturate(140%) blur(6px)}
/* Premium motion: a unified, gentle hover-lift + crisper shadow on the key cards */
.wbcard,.recallcard,.jcard,.jteaser,.reviewcard,.tcard,.encard,.trcard,.greet{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.wbcard:hover,.recallcard:hover,.jteaser:hover,.tcard:hover,.encard:hover{transform:translateY(-3px);box-shadow:var(--e-3,0 8px 24px rgba(27,42,92,.10))}
/* Buttons: satisfying press + a soft sheen on the gold CTA */
.btn{transition:transform .14s ease,box-shadow .2s ease,filter .2s ease}
.btn--gold:hover{filter:brightness(1.04) saturate(1.05)}
.btn:active{transform:translateY(1px) scale(.985)}
@media (prefers-reduced-motion:reduce){
  .lib-page,.lib-page::after,.home,.wbcard,.recallcard,.jcard,.jteaser,.reviewcard,.tcard,.encard,.trcard,.greet,.btn{transition:none}
  .wbcard:hover,.recallcard:hover,.jteaser:hover,.tcard:hover,.encard:hover,.btn:active{transform:none}
}


/* ===== Inline-SVG icon system (Wave 3) — replaces emoji chrome, inherits brand color ===== */
.ic{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;width:1.2em;height:1.2em;flex:none;overflow:visible}
.side-home .ic{width:20px;height:20px;vertical-align:-5px;margin-right:11px;opacity:.78;transition:opacity .18s ease,transform .18s ease}
.side-home:hover .ic,.side-home.is-active .ic{opacity:1}
.side-home.is-active .ic{transform:scale(1.06)}
.side-toggle .ic{width:22px;height:22px;vertical-align:-5px}
.hub-back .ic{width:19px;height:19px;vertical-align:-4px;margin-right:2px}
.theme-toggle .ic{width:20px;height:20px}
.lib-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B26E12' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:18px 50%;background-size:19px;padding-left:46px!important}

/* WhatsApp / green CTA (certificate share, growth loop) */
.btn--green{background:linear-gradient(122deg,var(--green,#1F7A47),var(--green-deep,#14552F));color:#fff;box-shadow:0 10px 24px -12px rgba(31,122,71,.7)}
.btn--green:hover{filter:brightness(1.05) saturate(1.05)}
.cert__verify{margin-top:14px;font-family:var(--dv-sub);font-size:.82rem;color:var(--muted,#6a5b45);letter-spacing:.02em}
.cert__verify b{color:var(--navy,#1B2A5C);font-variant-numeric:tabular-nums}

/* ===== Ways to Earn (#/earn) — the honest skill→income bridge ===== */
.earn-page{max-width:920px}
.earn-page .earn-h1{font-family:var(--dv-head);font-size:clamp(2rem,5vw,3rem);line-height:var(--lh-display);margin:6px 0;
  background:linear-gradient(116deg,#13224e,#2a3e7e 55%,#1c6e44);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.earn-page .lsub{font-size:clamp(1.02rem,1.8vw,1.2rem);color:#33406a;line-height:1.55;margin-bottom:6px;max-width:62ch}
.earn-honest{background:linear-gradient(135deg,rgba(224,146,31,.15),rgba(224,146,31,.05));border:1px solid rgba(224,146,31,.42);border-left:5px solid var(--amber-deep);border-radius:14px;padding:14px 18px;margin:20px 0;color:#5b4412;line-height:1.55;font-size:.98rem}
.earn-honest b{color:var(--amber-text)}
.earn-prep{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 24px;font-weight:600;color:var(--ink-brand)}
.btn--sm{padding:9px 15px;font-size:.9rem}
.btn--sm .ic{width:17px;height:17px}
.earn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.earn-card{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.earn-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(27,42,92,.5)}
.earn-card__ic{font-size:1.85rem;line-height:1;flex:none}
.earn-card__bd{min-width:0}
.earn-card__bd b{display:block;font-weight:700;color:var(--ink-brand);font-size:1.12rem;line-height:1.3;margin-bottom:5px}
.earn-card__bd p{color:var(--muted);font-size:.95rem;line-height:1.5;margin:0 0 9px}
.earn-step{font-size:.92rem;color:var(--ink-green);font-weight:600;line-height:1.45;margin-bottom:7px}
.earn-where{font-size:.88rem;color:var(--muted);line-height:1.45}
.earn-foot{margin:24px 0 8px;padding:15px 18px;background:rgba(31,122,71,.09);border:1px solid rgba(31,122,71,.26);border-radius:14px;color:#1f5b3a;line-height:1.55;font-weight:500}
html[data-theme="dark"] .earn-page .lsub{color:#aab6dd}
html[data-theme="dark"] .earn-honest{background:linear-gradient(135deg,rgba(224,146,31,.17),rgba(224,146,31,.05));color:#f1dcaa;border-color:rgba(224,146,31,.5)}
html[data-theme="dark"] .earn-foot{background:rgba(31,122,71,.17);color:#c3e8d2;border-color:rgba(31,122,71,.4)}
html[data-theme="dark"] .earn-card__bd b{color:#eaf0ff}
html[data-theme="dark"] .earn-step{color:#5fcf94}
@media (prefers-reduced-motion:reduce){.earn-card{transition:none}.earn-card:hover{transform:none}}
.earn-next{margin:22px 0 4px;text-align:center}
.earn-next .ic{width:19px;height:19px}
.earn-learn{display:inline-flex;align-items:center;gap:6px;margin-top:11px;max-width:100%;padding:7px 13px;border-radius:999px;background:rgba(31,122,71,.1);border:1px solid rgba(31,122,71,.3);color:var(--ink-green);font-weight:600;font-size:.85rem;text-decoration:none;transition:background .25s var(--ease),transform .25s var(--ease)}
.earn-learn:hover{background:rgba(31,122,71,.17);transform:translateX(3px)}
.earn-learn .ic{width:15px;height:15px;flex:none}
.earn-learn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme="dark"] .earn-learn{background:rgba(31,122,71,.22);color:#5fcf94;border-color:rgba(95,207,148,.35)}
@media (prefers-reduced-motion:reduce){.earn-learn{transition:none}.earn-learn:hover{transform:none}}
/* ===== invite / share growth loop ===== */
.invitecard{display:flex;align-items:center;gap:14px;margin:30px 0 8px;padding:16px 20px;border-radius:18px;
  background:linear-gradient(135deg,rgba(31,122,71,.1),rgba(224,146,31,.08));border:1px solid rgba(31,122,71,.28);box-shadow:var(--shadow-sm)}
.invitecard__ic{font-size:1.9rem;line-height:1;flex:none}
.invitecard__tx{flex:1;min-width:0}
.invitecard__tx b{display:block;font-weight:700;color:var(--ink-brand);font-size:1.1rem;line-height:var(--lh-head)}
.invitecard__tx span{display:block;color:var(--muted);font-size:.9rem;line-height:1.45;margin-top:3px}
.invitecard__btn{flex:none;white-space:nowrap}
.earn-share{margin:22px 0 6px;text-align:center}
@media(max-width:640px){.invitecard{flex-wrap:wrap}.invitecard__btn{width:100%;justify-content:center}}
html[data-theme="dark"] .invitecard{background:linear-gradient(135deg,rgba(31,122,71,.2),rgba(224,146,31,.1));border-color:rgba(95,207,148,.3)}
html[data-theme="dark"] .invitecard__tx b{color:#eaf0ff}

/* ===================================================================
   REVAMP WAVE 1 — the first five seconds (audit-driven)
   =================================================================== */
/* hero trust line — the anti-scam promise right under the first ask */
.hero__trust{margin-top:12px;font-family:var(--dv-sub);font-size:.88rem;color:var(--ink-green)}

/* join section: gift line, privacy note, share row, intent chips-as-buttons */
.join__gift{margin:10px 0 18px;font-family:var(--dv-sub);font-size:.95rem;color:var(--ink-brand)}
.join__gift a{color:var(--amber-text);font-weight:700;text-decoration:underline}
.join__privacy{display:block;margin-top:6px;font-family:var(--dv-sub);font-size:.78rem;color:var(--muted);line-height:1.5;font-weight:400}
.join__share{margin-top:18px;text-align:center}
.join__share .ic{width:16px;height:16px;vertical-align:-2px;margin-right:6px}
button.ch{appearance:none;font:inherit;cursor:pointer}
.ch.is-on{outline:2px solid var(--amber);outline-offset:2px}
/* dead placeholder links stay hidden until the campaign fills them */
.footer__handles a[href="#"]{display:none}

/* academy onboarding: language-picker heading descenders were overpainted at 360-375px */
.onbo__card h2{line-height:1.3;margin-bottom:10px}

/* ---------- AI शिक्षा केंद्र showcase band (proof, not promise) ---------- */
.section--kendra{border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--amber),#fff 45%,var(--green)) 1}
.kendra-band{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:center}
.kendra-band__lede{font-size:1.08rem;line-height:1.75;color:var(--text);max-width:56ch;margin:18px 0 22px}
.kendra-band__lede strong{color:var(--ink-green)}
.kendra-band__stats{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0 0 24px}
.kendra-band__stats li{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--dv-sub);font-size:.92rem;color:var(--text)}
.kendra-band__stats b{font-family:var(--dv-head);color:var(--ink-green);font-size:1.05rem}
.kendra-band__cta .ic{width:22px;height:22px;vertical-align:-4px;margin-right:8px}
.kendra-band__trust{margin-top:14px;font-family:var(--dv-sub);font-size:.85rem;color:var(--ink-green);line-height:1.6;max-width:52ch}

/* pure-CSS phone — flat surfaces + borders only (₹6k-GPU budget: no shadows/filters/animation) */
.kendra-band__phone{display:flex;justify-content:center}
.kphone{width:min(230px,60vw);aspect-ratio:9/19;background:var(--navy);border-radius:28px;border:6px solid var(--navy-700);padding:18px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.kphone__notch{width:64px;height:5px;border-radius:999px;background:var(--navy-700);margin:0 auto 4px}
.kphone__head{font-family:var(--dv-head);color:#F4ECD8;font-size:.95rem;text-align:center}
.kphone__lede{font-family:var(--dv-sub);color:#F4BE5E;font-size:.78rem;line-height:1.5;text-align:center;margin-bottom:2px}
.kphone__card{display:flex;gap:8px;align-items:center;background:#FBF9F3;border-radius:12px;padding:10px}
.kphone__ic{font-size:1.2rem;flex:none}
.kphone__card b{display:block;font-family:var(--dv-sub);font-weight:700;color:var(--ink-brand);font-size:.8rem;line-height:1.3}
.kphone__card i{display:block;font-style:normal;font-family:var(--dv-sub);color:var(--muted);font-size:.7rem}
.kphone__bar{margin-top:auto;height:8px;border-radius:999px;background:rgba(244,236,216,.25)}
.kphone__bar i{display:block;width:36%;height:100%;border-radius:999px;background:var(--amber)}

@media (max-width:980px){
  .kendra-band{grid-template-columns:1fr}
  .kendra-band__phone{order:-1}
  .kphone{width:min(190px,52vw)}
}
@media (max-width:480px){
  /* tiny screens: everything serves one goal — title + prop + primary CTA above the 640px fold */
  .hero__sub{display:none}
  .hero__inner{padding-top:80px}
  /* explicit width chain: with the figcaption hidden the frame has no intrinsic width,
     so width must be set, not just capped */
  .hero__portrait{width:min(44vw,175px);max-width:none}
  .hero__portrait .frame,.frame--hero .frame__media{width:100%}
  .frame--hero .frame__name{display:none} /* identity carried by eyebrow + title; photo stays as trust cue */
  .eyebrow{margin-bottom:10px;font-size:.84rem}
  .hero__title{font-size:clamp(2rem,8.8vw,2.6rem)}
  .hero__prop{font-size:1rem;margin-top:10px}
  .hero__cta{margin-top:16px}
}

/* ===================================================================
   REVAMP WAVE 2 — dark-mode coherence + course spine (audit-driven)
   =================================================================== */
/* W2.5: night users auto-persist dark mode — these were ~1.1-1.4:1 navy-on-navy */
html[data-theme="dark"] .sec-label,html[data-theme="dark"] .howbox h3,
html[data-theme="dark"] .tcert__msg,html[data-theme="dark"] .certctrl label,
html[data-theme="dark"] .greet__hi,html[data-theme="dark"] .lnav__b,
html[data-theme="dark"] .exrow b{color:var(--ink)}
html[data-theme="dark"] .exrow{background:#101a3c;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .lhead__ic,html[data-theme="dark"] .thead__ic{
  background:linear-gradient(135deg,#152044,#0C1430);border:1.5px solid rgba(224,146,31,.5)}
html[data-theme="dark"] .reviewcard,html[data-theme="dark"] .lpeak{
  background:rgba(31,122,71,.14);border-color:rgba(53,166,110,.35)}
html[data-theme="dark"] .wbcard,html[data-theme="dark"] .jteaser{
  background:rgba(224,146,31,.12);border-color:rgba(224,146,31,.35)}
html[data-theme="dark"] .jcard{background:#14214a;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .reviewcard b,html[data-theme="dark"] .wbcard b,
html[data-theme="dark"] .jteaser b,html[data-theme="dark"] .jcard b,
html[data-theme="dark"] .recallcard b{color:var(--ink)}
html[data-theme="dark"] .recallcard{background:rgba(53,166,110,.1);border-color:rgba(53,166,110,.3)}

/* W2.7: the course arc reads as one journey — rail segments + a dominant frontier */
.course{position:relative}
.course__m{position:relative}
.course__m::before{content:"";position:absolute;left:34px;top:-12px;width:3px;height:12px;background:rgba(27,42,92,.12)}
.course__m:first-child::before{display:none}
.course__m.is-done::before{background:var(--green-deep)}
.course__m.is-next{transform:scale(1.015);border-width:2px;box-shadow:0 14px 34px -18px rgba(224,146,31,.55)}
.course__m.is-next .course__n{box-shadow:0 0 0 6px rgba(224,146,31,.22)}
html[data-theme="dark"] .course__m::before{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .course__m.is-done::before{background:var(--green-soft)}
@media (prefers-reduced-motion:reduce){.course__m.is-next{transform:none}}
/* W2.1 boot diet: calm pack-loading state */
.packwait{display:flex;align-items:center;gap:12px;justify-content:center;padding:64px 0;font-family:var(--dv-sub);color:var(--muted);font-size:1rem}
.packwait__dot{width:12px;height:12px;border-radius:50%;background:var(--amber);animation:packpulse 1s ease-in-out infinite}
@keyframes packpulse{50%{transform:scale(1.5);opacity:.5}}
@media (prefers-reduced-motion:reduce){.packwait__dot{animation:none}}
/* W2.3/W2.4: home restructure + collapsible sidebar groups */
.trustline{font-family:var(--dv-sub);font-size:.85rem;color:var(--ink-green);margin:10px 0 4px}
.firstwin-cta{display:inline-block;margin:6px 0 14px;font-size:1.05rem}
.hero-ctas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0 6px}
.hero-ctas .course-cta,.hero-ctas .mission-cta{margin:0}
@media (max-width:680px){.hero-ctas{grid-template-columns:1fr}}
.side-group{margin-top:6px}
.side-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px}
.side-group>summary::-webkit-details-marker{display:none}
.side-group>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-left:auto;transition:transform .18s var(--ease)}
.side-group[open]>summary::after{transform:rotate(45deg)}
.side-group>summary:hover{background:rgba(224,146,31,.08)}
.side-group__n{color:var(--muted);font-weight:600;font-size:.72rem;letter-spacing:0;background:rgba(27,42,92,.06);border-radius:999px;padding:2px 8px}
html[data-theme="dark"] .side-group__n{background:rgba(255,255,255,.08)}
.hcard--more{appearance:none;font:inherit;text-align:left;cursor:pointer;background:rgba(27,42,92,.04);border:1.5px dashed var(--line)}
.hcard--more:hover{border-color:var(--amber)}
html[data-theme="dark"] .hcard--more{background:rgba(255,255,255,.04)}
.greet__goal{text-decoration:none;color:inherit}
.greet__goal:hover{color:var(--amber-text)}
/* ECI imprint line — quiet but legible, never hidden */
.footer__imprint{margin-top:6px;font-family:var(--dv-sub);font-size:.8rem;color:var(--muted);line-height:1.5}

/* ===================================================================
   REVAMP WAVE 4 — ambience, rhythm, premium discipline
   =================================================================== */
/* W4.3: tiranga stitch — the 3px thread becomes the site's signature on every surface change */
.section--cream,.section--mist,.section--gold-band,.footer{position:relative}
.section--cream::before,.section--mist::before,.section--gold-band::before,.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--amber),#F4ECD8 45%,var(--green))}
/* W4.1: budget-phone diet — kill decorative layers on small screens, pause ambience off-screen,
   and skip layout for below-fold sections entirely */
@media (max-width:900px){.hero__rays,.hero__leaves{display:none}}
.hero.is-off .hero__aurora,.hero.is-off .hero__chakra svg,.hero.is-off .hero__rays{animation-play-state:paused}
#parichay,#yatra,#stambh,#maidan,#mudde,#ai,#kendra-live,#sankalp,#parivar,#paschim,#judein{content-visibility:auto;contain-intrinsic-size:auto 900px}
#yatra,#maidan{contain-intrinsic-size:auto 1400px}
/* W3.2: anchors never tuck under the fixed bar; drawers leave the tab order when closed */
section[id]{scroll-margin-top:84px}
@media (max-width:860px){
  .nav__links{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:var(--navy-900);flex-direction:column;justify-content:center;gap:22px;padding:40px;transform:translateX(100%);transition:transform .4s var(--ease),visibility .4s;box-shadow:-20px 0 60px rgba(0,0,0,.4);visibility:hidden}
  .nav__links.is-open{visibility:visible}
  .nav__burger{display:flex}
}
/* per-surface focus rings (base ring is amber-deep; these keep it visible on colored bands) */
.section--gold-band :focus-visible,.hub-cta :focus-visible{outline-color:var(--navy-900)}
.section--indigo :focus-visible,.section--night :focus-visible,.footer :focus-visible,.marquee :focus-visible{outline-color:var(--gold-soft)}
/* W3.3: micro-text floor for low-literacy readers */
.onbo__beta,.encard__cat,.jcard__lbl{font-size:.74rem}
/* W3.3: अ+ root text scaling (persisted via html[data-fs]) */
html[data-fs="lg"]{font-size:112.5%}
html[data-fs="xl"]{font-size:125%}

/* ══════════ WAVE P — projects & capstones ══════════
   Learn-by-doing layer: gallery cards, milestone stepper, dataset cards, rubric, README.
   Same tokens, same warmth; the stepper is the one new instrument — big tap targets,
   progress you can feel, and a completion moment that hands you the README. */
.pjgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:14px 0 26px}
.pjcard{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:16px;text-decoration:none;color:var(--text);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.pjcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--amber)}
.pjcard.is-done{background:var(--mist);border-color:rgba(31,122,71,.35)}
.pjcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pjcard__ic{font-size:1.9rem;line-height:1}
.pjcard__chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.pjcard b{font-family:var(--dv-head);font-weight:400;font-size:1.06rem;line-height:1.4;color:var(--ink-brand)}
.pjcard__out{font-size:.9rem;color:var(--muted);line-height:1.55}
.pjcard__bar{height:6px;border-radius:99px;background:var(--cream);overflow:hidden;margin-top:auto}
.pjcard__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--gold));transition:width .3s var(--ease)}
.pjcard.is-done .pjcard__bar i{background:var(--green)}
.pjcard__start,.pjcard__cont{font-size:.88rem;font-weight:600;color:var(--amber-text)}
.pjcard__done{font-size:.88rem;font-weight:600;color:var(--ink-green)}
.pjchip{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--cream);color:var(--ink);border:1px solid var(--line)}
.pjchip .ic{width:13px;height:13px}
.pjchip--lvl{background:var(--mist);color:var(--ink-green)}
.pjchip--data{background:var(--blush);color:var(--amber-text)}
.pjchip--cap{background:var(--navy);color:#F1CB6B;border-color:var(--navy)}
.pjcount{font-size:.72em;color:var(--muted)}
.pjcap-lede,.pjband-lede{color:var(--muted);max-width:60ch;margin:-4px 0 4px;font-size:.95rem}
.pjband-more{margin:-8px 0 22px}
/* detail */
.pjhead{display:flex;gap:16px;align-items:flex-start;margin:10px 0 14px}
.pjhead__ic{font-size:2.6rem;line-height:1;background:var(--cream);border:1.5px solid var(--line);border-radius:18px;padding:12px}
.pjhead__b h1{margin:6px 0 4px}
.pjhead__b p{color:var(--muted);margin:0 0 8px;max-width:46rem}
.pjtrack{display:block;background:var(--cream);border:1.5px dashed var(--gold);border-radius:14px;padding:11px 15px;margin:0 0 14px;text-decoration:none;color:var(--ink);font-size:.94rem}
.pjtrack b{color:var(--ink-brand)}
.pjoutcome{background:linear-gradient(180deg,var(--mist),var(--surface));border:1.5px solid rgba(31,122,71,.25);border-radius:16px;padding:14px 16px;margin:0 0 14px}
.pjoutcome__k{display:block;font-weight:700;color:var(--ink-green);font-size:.86rem;margin-bottom:4px}
.pjoutcome p{margin:0;max-width:42rem}
.pjtools{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 16px}
.pjtools__k{font-size:.88rem;font-weight:600;color:var(--muted)}
.pjdata{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:15px 16px;margin:0 0 14px}
.pjdata__h{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.pjdata__h .ic{width:26px;height:26px;color:var(--amber-text);flex:0 0 auto}
.pjdata__h b{color:var(--ink-brand)}
.pjdata__file{display:block;font-size:.8rem;color:var(--muted);font-family:ui-monospace,monospace}
.pjdata__dl{margin-left:auto}
.pjdata__note{font-size:.85rem;color:var(--amber-text);background:var(--blush);border-radius:10px;padding:7px 11px;margin:10px 0}
.pjdata__cols{overflow-x:auto}
.pjdata__cols table{border-collapse:collapse;width:100%;font-size:.88rem}
.pjdata__cols th,.pjdata__cols td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line)}
.pjdata__cols th{color:var(--muted);font-weight:600;font-size:.78rem}
.pjdata__cols code{background:var(--cream);border-radius:6px;padding:1px 6px}
.pjdata__hint{font-size:.85rem;color:var(--muted);margin:9px 0 0}
/* stepper */
.pjprog{display:flex;align-items:center;gap:12px;position:sticky;top:64px;z-index:5;background:var(--bg);padding:9px 2px;border-bottom:1px solid var(--line);margin:0 0 6px}
.pjprog__bar{flex:1;height:9px;border-radius:99px;background:var(--cream);overflow:hidden}
.pjprog__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--gold));transition:width .35s var(--ease)}
.pjprog__t{font-size:.9rem;color:var(--muted);white-space:nowrap}
.pjprog__t b{color:var(--ink-brand)}
.pjsteps{display:flex;flex-direction:column;gap:12px;margin:12px 0 20px;position:relative}
.pjsteps::before{content:"";position:absolute;left:21px;top:16px;bottom:16px;width:2px;background:var(--line)}
.pjstep{display:flex;gap:14px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:14px;position:relative;transition:border-color .18s var(--ease),background .18s var(--ease)}
.pjstep.is-on{background:var(--mist);border-color:rgba(31,122,71,.35)}
.pjstep__chk{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:2px solid var(--amber);background:var(--surface);color:var(--amber-text);font-size:1.05rem;font-weight:700;cursor:pointer;transition:background .18s var(--ease),transform .12s var(--ease);position:relative;z-index:1}
.pjstep__chk:active{transform:scale(.92)}
.pjstep.is-on .pjstep__chk{background:var(--green);border-color:var(--green);color:#fff}
.pjstep__b{flex:1;min-width:0}
.pjstep__b b{display:block;color:var(--ink-brand);margin-bottom:3px}
.pjstep__b p{margin:0 0 8px;font-size:.94rem;line-height:1.65;max-width:42rem}
.pjp{background:var(--navy);border-radius:13px;overflow:hidden;margin:4px 0 2px}
.pjp__bar{font-size:.78rem;color:#c9d0e4;padding:7px 12px 0}
.pjp__txt{margin:0;padding:9px 12px 11px;color:#f3f5fb;font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;font-family:var(--dv-body)}
.pjp__copy{margin:0 10px 10px;color:#F1CB6B !important;border-color:rgba(241,203,107,.4) !important}
.pjdone{background:linear-gradient(135deg,var(--mist),var(--cream));border:1.5px solid var(--gold);border-radius:16px;padding:15px 18px;margin:0 0 18px;font-size:1rem;line-height:1.7}
.pjrubric{list-style:none;margin:10px 0 22px;padding:0;display:flex;flex-direction:column;gap:8px}
.pjrubric li{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:11px 14px 11px 40px;position:relative;font-size:.94rem;max-width:46rem}
.pjrubric li::before{content:"☐";position:absolute;left:14px;color:var(--amber-text);font-size:1.05rem}
.pjreadme{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;overflow:hidden;margin:10px 0 20px}
.pjreadme__txt{margin:0;padding:16px;font-size:.88rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;max-height:430px;overflow-y:auto;font-family:ui-monospace,SFMono-Regular,monospace;background:var(--cream)}
.pjreadme__act{display:flex;gap:10px;flex-wrap:wrap;padding:12px 14px}
.pjfoot{margin:6px 0 30px}
.pjtracktop{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--cream),var(--blush));border:1.5px solid var(--gold);border-radius:18px;padding:15px 17px;margin:18px 0 6px;text-decoration:none;color:var(--text);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.pjtracktop:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.pjtracktop.is-done{background:var(--mist);border-color:rgba(31,122,71,.4)}
.pjtracktop__ic{font-size:2rem}
.pjtracktop__b{flex:1;min-width:0}
.pjtracktop__b i{display:block;font-style:normal;font-size:.78rem;font-weight:700;color:var(--amber-text)}
.pjtracktop__b b{display:block;font-family:var(--dv-head);font-weight:400;color:var(--ink-brand);font-size:1.05rem}
.pjtracktop__b span{display:block;font-size:.86rem;color:var(--muted)}
.pjtracktop__go{font-weight:700;color:var(--amber-text);white-space:nowrap}
.side-due--green{background:var(--green)}
@media(max-width:520px){
  .pjhead{flex-direction:column;gap:10px}
  .pjdata__dl{margin-left:0}
  .pjprog{top:56px}
}
/* dark mode */
html[data-theme="dark"] .pjcard,html[data-theme="dark"] .pjstep,html[data-theme="dark"] .pjdata,html[data-theme="dark"] .pjrubric li,html[data-theme="dark"] .pjreadme{background:#161f38;border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .pjcard b,html[data-theme="dark"] .pjstep__b b,html[data-theme="dark"] .pjdata__h b,html[data-theme="dark"] .pjtracktop__b b,html[data-theme="dark"] .pjtrack b,html[data-theme="dark"] .pjdone b{color:#f0d79a}
html[data-theme="dark"] .pjcard.is-done,html[data-theme="dark"] .pjstep.is-on{background:rgba(31,122,71,.16)}
html[data-theme="dark"] .pjcard__bar,html[data-theme="dark"] .pjprog__bar{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .pjchip{background:rgba(255,255,255,.08);color:#dde2f0;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .pjchip--lvl{background:rgba(53,166,110,.18);color:#7fd3a5}
html[data-theme="dark"] .pjchip--data{background:rgba(224,146,31,.16);color:#eba63f}
html[data-theme="dark"] .pjoutcome{background:rgba(31,122,71,.12);border-color:rgba(53,166,110,.3)}
html[data-theme="dark"] .pjreadme__txt{background:#0E1526;color:#dde2f0}
html[data-theme="dark"] .pjdata__note{background:rgba(224,146,31,.13);color:#eba63f}
html[data-theme="dark"] .pjtrack,html[data-theme="dark"] .pjtracktop,html[data-theme="dark"] .pjdone{background:#1d2740;color:#dde2f0;border-color:rgba(241,203,107,.35)}
html[data-theme="dark"] .pjdata__cols code{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .pjprog{background:#0E1526}


/* ══════════ WAVE U1 — script-aware leading ══════════
   Tamil/Bengali/Telugu/Gujarati set taller than Devanagari at the same font-size (long descenders,
   stacked vowel signs), so the same ratio that is comfortable in Hindi feels cramped in Tamil.
   Nudge the two heading tokens per script rather than restyling every component. */
/* Per-script boxes, same method — measured from each shipped face.
   Tamil headings are set in Catamaran (box 1.640), Tamil body in Noto Sans Tamil (1.240). */
html[lang="ta"]{ --lh-display:1.66; --lh-head:1.66; --lh-body:1.80 }
html[lang="bn"]{ --lh-display:1.44; --lh-head:1.44; --lh-body:1.80 }
html[lang="te"]{ --lh-display:1.50; --lh-head:1.50; --lh-body:1.85 }
html[lang="gu"]{ --lh-display:1.50; --lh-head:1.50; --lh-body:1.85 }
/* Devanagari must never be letter-spaced — tracking breaks conjuncts and matra placement. */
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
html[lang="mr"] h1, html[lang="mr"] h2, html[lang="mr"] h3{letter-spacing:0}


/* ══════════ WAVE U1 — gold headline words on dark surfaces ══════════ */
.section--night .gold, .section--indigo .gold, .sec-head--invert .gold,
html[data-theme="dark"] .gold, html[data-theme="dark"] .grad{color:#F1CB6B}

/* ══════════ WAVE U2 — mobile header: 261px → one row ══════════
   MEASURED BEFORE: on a 360x720 phone the sticky header was 261px — 36% of the screen, permanently.
   Cause: .hub-top__in is a flex row that WRAPPED into four rows, because .lib-search and .langsel
   each claimed flex-basis:100% and there were nine children competing for one line.

   AFTER: one row ≈60px — [menu] [brand] [search]. Everything that is a SETTING rather than
   navigation (language, text size, theme, sound) moves into the drawer, which is where a
   first-time user looks for them anyway, and where they get a real label instead of a bare icon. */
@media (max-width:900px){
  .lib-page .hub-top__in{flex-wrap:nowrap;gap:10px;padding-top:9px;padding-bottom:9px}
  /* search stays in the header — it is navigation, and it is how you find 141 lessons */
  .lib-page .lib-search{order:0;flex:1 1 auto;flex-basis:auto;max-width:none;margin:0;min-width:0}
  /* settings + secondary actions live in the drawer on mobile */
  .lib-page .hub-top .langsel,
  .lib-page .hub-top .theme-toggle,
  .lib-page .hub-top .hub-back,
  .lib-page .hub-top .btn--gold{display:none}
  .lib-page .brand__name{display:none}      /* keep the lockup to one compact line */
  .lib-page .brand{margin-right:0;flex:0 0 auto}
  .lib-page .brand__rpd{font-size:1rem}
}
/* the drawer's settings block (built by renderSidebar) — mobile only */
.side-settings{display:none}
@media (max-width:900px){
  .side-settings{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
  .side-settings__t{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:none;margin:0 0 9px;padding:0 4px}
  .side-settings .langsel{display:block;width:100%;max-width:none;margin:0 0 10px;padding:11px 12px 11px 34px;font-size:.98rem;min-height:46px}
  .side-set__row{display:flex;gap:8px;margin-bottom:10px}
  .side-set__row .theme-toggle{display:grid;place-items:center;flex:1;width:auto;height:46px;border-radius:12px;background:var(--surface)}
  .side-settings .btn{display:block;text-align:center;width:100%}
  .side-set__home{display:block;text-align:center;padding:11px;margin-top:8px;color:var(--ink-brand);font-weight:600;border-radius:12px;border:1.5px solid var(--line)}
}
html[data-theme="dark"] .side-set__row .theme-toggle,
html[data-theme="dark"] .side-set__home{background:#161f38;border-color:rgba(255,255,255,.10);color:#dde2f0}

/* ══════════ WAVE U1b — stop faking bold on single-weight Devanagari faces ══════════
   VERIFIED with fontTools against the shipped woff2 files:
     · Yatra One ships ONE weight (400). assets/fonts contains yatra-one-400-* and nothing else.
     · Tiro Devanagari Hindi ships 400 (+400 italic) only.
     · Mukta ships 300/400/500/600/700/800 — it is the ONLY Devanagari face here with real bold.
   h1–h3 inherit the UA default font-weight:bold, so every heading asks a 400-only face for 700 and
   the rasteriser answers by dilating the outline. In Latin faux-bold is just ugly; in Devanagari it
   thickens the shirorekha down into the matras and closes the counters of फ म भ ब घ — on a 1.5x-DPR
   ₹6,000 screen that is the difference between a decodable word and a smear. */
html{font-synthesis-weight:none;font-synthesis-small-caps:none}

/* (a) headings stay in Yatra One — just stop the browser bolding a face that has no bold */
h1,h2,h3,h4,
.hero__title,.sec-head__title,.home h1,.hub-hero h1,.lhead h1,.splash__name,
.trait h3,.tl__card h3,.sk h3,.howbox h3,.hub-howto h3,
.onbo__card h2,.hub-cta h2,.join__title,.panel__anthem,
.cert__title,.cert__name,.earn-page .earn-h1,.firstwin h1,.home__cat,
.lbody h2,.sec-label,.pjcard b,.pjhead__b h1,.pjtracktop__b b{font-weight:400}

/* (b) small UI that genuinely needs weight moves to Mukta, which HAS real bold at the same size */
.testprog,.side-group__t,.tryit__bar,.quiz__q,.tcard__lvl,.tcard__pc,.tstep__cur,
.whyfree summary,.tipcard__h,.badge__nm,.pb__outh,.side-count,.side-clear,
.tq__q,.encard__t,.encard__cat,.onbo__chips span,.greet__hi,
.pjchip,.pjcard__start,.pjcard__cont,.pjcard__done,.pjoutcome__k,.pjprog__t{font-family:var(--dv-body)}

/* ══════════ WAVE U1c — card titles get a TEXT face, not a poster face ══════════
   Yatra One is a display face: heavy shirorekha, small closed counters, no text cut, drawn for
   40px+. It was setting the title of every one of the 141 lesson cards at 17.6px and every track
   card at 19.5px — the exact strings a learner scans to decide what to tap — and asking that
   400-only face for weight 700 on top, so the counters of फ म भ घ ब filled in.
   Mukta is self-hosted with real 300–800 weights and is drawn for text. Display face stays where
   it belongs: the big headings. */
.hcard b,.tcard b,.gcard h3,.tstep__t b,.pjcard b,.pjtracktop__b b,.jcard b,.encard__t{
  font-family:var(--dv-body);font-weight:700;letter-spacing:0}
.hcard b,.tcard b{font-size:1.06rem;line-height:var(--lh-mukta)}
.tcard b{font-size:1.14rem}

/* ══════════ WAVE U4 — home category disclosure ══════════
   Home was 22,759px / 35.6 screens, of which 15,000px was 13 permanently-open category grids.
   Closed by default they become a 13-row menu the eye can actually scan. The affordance has to be
   obvious to a first-time web user, so the summary is a full-width 56px row with a real chevron and
   a count — not a bare triangle. */
.catlist{margin-top:14px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.catsec{border-bottom:1px solid var(--line);background:var(--card)}
.catsec:last-child{border-bottom:0}
.catsec__sum{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;cursor:pointer;
  list-style:none;font-family:var(--dv-body);font-weight:700;font-size:1rem;color:var(--ink-brand);
  line-height:var(--lh-mukta);-webkit-tap-highlight-color:transparent}
.catsec__sum::-webkit-details-marker{display:none}
.catsec__t{flex:1 1 auto;min-width:0}
.catsec__n{flex:0 0 auto;font-weight:600;font-size:.82rem;color:var(--muted);
  background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.catsec__chev{flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--amber-text);
  border-bottom:2.5px solid var(--amber-text);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease}
.catsec[open]>.catsec__sum{background:var(--mist);border-bottom:1px solid var(--line)}
.catsec[open]>.catsec__sum .catsec__chev{transform:rotate(-135deg) translate(-2px,-2px)}
.catsec__sum:hover{background:var(--mist)}
.catsec__sum:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.catsec .home__grid{padding:14px 16px 18px;margin:0}
@media (prefers-reduced-motion:reduce){.catsec__chev{transition:none}}

/* ══════════ WAVE U4 — the single primary action ══════════
   Replaces the greet__goal + firstwin-cta + course-cta + resume stack (four full-width invitations,
   two of them to the same href). One button, 56px tall, stated in two lines: what happens, and why
   it is safe/small. The secondary is a text link — present, but never competing for the same glance. */
.primary-cta{display:flex;flex-direction:column;gap:3px;padding:14px 18px;margin:4px 0 8px;
  border-radius:var(--r-lg);background:linear-gradient(180deg,var(--amber) 0%,var(--gold) 100%);
  color:#2B1B02;text-decoration:none;box-shadow:0 2px 0 rgba(120,80,10,.28),0 6px 18px rgba(224,146,31,.24);
  min-height:56px;justify-content:center;border:1px solid rgba(120,80,10,.22)}
.primary-cta__k{font-family:var(--dv-body);font-weight:800;font-size:1.06rem;line-height:1.35}
.primary-cta__s{font-family:var(--dv-body);font-weight:500;font-size:.88rem;line-height:1.45;opacity:.82}
.primary-cta:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(120,80,10,.28)}
.primary-cta:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.secondary-cta{display:inline-block;margin:0 0 14px;font-family:var(--dv-body);font-weight:600;
  font-size:.92rem;color:var(--ink-brand);text-decoration:underline;text-underline-offset:3px;
  min-height:44px;line-height:44px}
html[data-theme="dark"] .primary-cta{color:#1a1204;box-shadow:0 2px 0 rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.5)}
html[data-theme="dark"] .secondary-cta{color:var(--ink-brand)}
/* newcomers get 2 real tiles, not 4 (2 of which were decorative) — let the grid follow the count */
.home__stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
@media (prefers-reduced-motion:reduce){.primary-cta:active{transform:none}}

/* ══════════ WAVE U4b — inside a disclosure, lessons are a LIST, not a card wall ══════════
   Measured: .hcard is 148px tall and its biggest element is a 47px emoji — larger than the title it
   decorates. Six of them made an opened category 1,140px. In a browse-a-long-list context a row
   scans far better: one left-aligned column of titles, icon as a small fixed anchor. 148px → ~68px.
   Cards are kept at ≥720px where 2–3 columns make the card shape earn its space. */
@media (max-width:719px){
  .catsec .home__grid{grid-template-columns:1fr;gap:0;padding:2px 14px 10px}
  .catsec .hcard{display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-rows:auto auto;
    column-gap:12px;align-items:center;min-height:64px;padding:10px 2px;text-align:left;
    background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
  .catsec .hcard:last-child{border-bottom:0}
  .catsec .hcard:active{background:var(--mist)}
  .catsec .hcard__ic{grid-column:1;grid-row:1/3;width:38px;height:38px;margin:0;font-size:1.28rem;
    display:grid;place-items:center;background:var(--mist);border-radius:10px}
  .catsec .hcard b{grid-column:2;grid-row:1;font-size:.97rem;line-height:1.45;margin:0}
  .catsec .hcard__sub{grid-column:2;grid-row:2;font-size:.82rem;line-height:1.4;margin:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .catsec .hcard__done{grid-column:3;grid-row:1/3;position:static;margin:0;font-size:.72rem}
}

/* ══════════ WAVE U5 — landing page: honest intrinsic sizes, denser vows, pillar rhythm ══════════

   U5a. contain-intrinsic-size was a flat `auto 900px` for eleven sections whose real heights at
   360px run 1,034px–4,440px. The browser therefore believed the page was 13,932px when it is
   20,838px — a 6,906px lie that resolves progressively as you scroll, so the scrollbar and the
   content shift under the reader's thumb. `auto <len>` only supplies the FIRST estimate (after one
   render the real size is remembered), so these measured per-section values fix precisely the case
   that matters: a first-time visitor's first scroll, on a slow phone. */
#parichay{contain-intrinsic-size:auto 1650px}
#yatra{contain-intrinsic-size:auto 2360px}
#stambh{contain-intrinsic-size:auto 1350px}
#maidan{contain-intrinsic-size:auto 1450px}
#mudde{contain-intrinsic-size:auto 1560px}
#ai{contain-intrinsic-size:auto 1640px}
#kendra-live{contain-intrinsic-size:auto 1230px}
#sankalp{contain-intrinsic-size:auto 3980px}
#parivar{contain-intrinsic-size:auto 1040px}
#paschim{contain-intrinsic-size:auto 1280px}
#judein{contain-intrinsic-size:auto 1370px}

/* U5b. Each vow card was 189px tall to carry 112px of content — 38% padding and internal margin,
   ×17 cards. Tightened, not truncated: all 17 vows stay fully visible, because a manifesto that
   hides its own promises behind a "show more" is not a manifesto. */
.sk{padding:18px 18px 20px}
.sk__tag{margin-bottom:8px}
.sk h3{margin-bottom:6px}
.sankalp-grid,#sankalp .grid{gap:14px}

/* U5c. All 17 cards carried an identical amber top-rule and an identical green tag, so a reader
   scrolling 17 near-identical blocks had no landmark to navigate by. The tag now takes its pillar's
   colour — strictly the four brand hues and their approved deep/text tones. The colour is rhythm
   only: every chip still spells its category out, so nothing is encoded in hue alone. The face
   changes too — this was Tiro Devanagari (a reading face) at 12.8px, below the 13px floor. */
.sk__tag{font-family:var(--dv-body);font-weight:600;font-size:.85rem;color:var(--ink-green);
  background:rgba(31,122,71,.13);padding:4px 12px;line-height:1.5}
.sk[data-cat="kisan"]{border-top-color:var(--green)}
.sk[data-cat="shiksha"]{border-top-color:var(--navy)}
.sk[data-cat="shiksha"] .sk__tag{color:var(--navy);background:rgba(27,42,92,.10)}
.sk[data-cat="ai"]{border-top-color:var(--amber)}
.sk[data-cat="ai"] .sk__tag{color:var(--amber-text);background:rgba(224,146,31,.16)}
.sk[data-cat="mahila"]{border-top-color:var(--gold)}
.sk[data-cat="mahila"] .sk__tag{color:var(--gold-deep);background:rgba(217,154,28,.17)}
.sk[data-cat="khel"]{border-top-color:var(--green-soft)}
.sk[data-cat="khel"] .sk__tag{color:var(--green-deep);background:rgba(53,166,110,.16)}
.sk[data-cat="sewa"]{border-top-color:var(--navy-700)}
.sk[data-cat="sewa"] .sk__tag{color:var(--navy-700);background:rgba(21,32,68,.09)}

/* U5c fix: --gold-deep (#A9770F) measured 3.42:1 as text on its own gold tint — below the 4.5:1
   floor. --gold-ink is the same brand gold hue taken darker (5.88:1 measured), not a new colour. */
:root{--gold-ink:#7A5408}
.sk[data-cat="mahila"] .sk__tag{color:var(--gold-ink)}
html[data-theme="dark"] .sk__tag{background:rgba(255,255,255,.09);color:var(--ink-brand)}
html[data-theme="dark"] .sk[data-cat="ai"] .sk__tag{color:#f0c07a}
html[data-theme="dark"] .sk[data-cat="mahila"] .sk__tag{color:#f1cb6b}
html[data-theme="dark"] .sk[data-cat="kisan"] .sk__tag,
html[data-theme="dark"] .sk[data-cat="khel"] .sk__tag{color:var(--ink-green)}

/* U5c dark-mode fix — a specificity bug, caught only by measuring both themes.
   `.sk[data-cat="shiksha"] .sk__tag` scores (0,3,0); the generic dark override
   `html[data-theme="dark"] .sk__tag` scores (0,2,1) and therefore LOST. The light navy survived
   into dark mode and measured 1.34:1 (shiksha) and 1.17:1 (sewa) — invisible text, not merely low
   contrast. Matching the per-category specificity is what actually fixes it. */
html[data-theme="dark"] .sk[data-cat="shiksha"] .sk__tag{color:#c9d6ff}
html[data-theme="dark"] .sk[data-cat="sewa"] .sk__tag{color:#e8edff}

/* ══════════ WAVE U5d — kill the 92px horizontal page scroll ══════════
   Measured: documentElement.scrollWidth = 452px inside a 360px viewport, so the ENTIRE landing page
   slid sideways under the thumb — the single most disorienting thing a page can do on a phone, and
   it made the header's "साथ जुड़ें" button sit off-screen (the sticky header stretches to the scroll
   width, which is why the nav merely looked like the culprit; hiding the nav changed nothing,
   hiding this figure dropped scrollWidth straight back to 360).
   Cause: `.frame--portraitwide .frame__media` pairs `aspect-ratio:5/4` with `min-height:320px`. A
   definite height makes aspect-ratio derive the WIDTH — 320 x 1.25 = 400px — so the box refuses to
   fit its 360px parent. `.frame--hero` already had a `min-height:0` phone override; --portraitwide
   and --pillar never got one. Let width lead and height follow, which is the correct direction for
   a fluid layout. */
.frame__media{max-width:100%}
@media (max-width:719px){
  .frame--portraitwide .frame__media,.frame--pillar .frame__media{min-height:0}
}
/* Belt-and-braces for the decorative ::before glows (inset:-10% -8%), which sit outside their frame
   by design and would otherwise re-introduce scrollable overflow. `clip` rather than `hidden`:
   overflow-x:hidden on the body silently kills position:sticky, which this page's header needs. */
body{overflow-x:clip}

/* U5e — header fits one line at 360px. The CTA was wrapping "साथ जुड़ें" onto two lines because the
   row had 410px of content to place in 360px. Trimmed from the gaps and the chrome rather than the
   words: the wordmark, the language toggle and the join CTA all stay — this is a campaign header and
   none of the three is optional. */
@media (max-width:400px){
  .nav__inner{gap:8px;padding-left:12px;padding-right:12px}
  .nav__actions{gap:8px}
  .nav__actions .btn{white-space:nowrap;font-size:.87rem;padding:9px 13px}
  .lang-toggle{padding:6px 9px;font-size:.78rem}
  .nav__burger{padding:8px 4px}
}

/* ══════════ WAVE U7a — 44px touch targets on every header control ══════════
   Measured at 360px: lang-toggle 34px, join CTA 35px, burger 32x32 — all below the 44px minimum,
   on a site whose users are largely on low-cost phones with imprecise touch and, often, limited
   experience aiming at small controls. Height is added to the HIT area, not the visual weight:
   the burger keeps its drawn size and gains an invisible inset overlay, so nothing looks chunkier.  */
.nav__actions .btn,.lang-toggle{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.nav__burger{position:relative;min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}
.nav__burger::after{content:"";position:absolute;inset:-2px;min-width:44px;min-height:44px}
/* same floor for the academy shell's controls */
.theme-toggle,.side-toggle,.hub-back{min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}

/* WAVE U7b — the visible half of the non-colour answer marking */
.tq__mark{margin-left:auto;flex:none;font-family:var(--dv-body);font-weight:700;font-size:.78rem;
  padding:3px 9px;border-radius:999px;line-height:1.5;white-space:nowrap}
.tq__mark--ok{color:var(--ink-green);background:rgba(31,122,71,.14)}
.tq__mark--no{color:#8E2F2B;background:rgba(217,83,79,.14)}
html[data-theme="dark"] .tq__mark--ok{color:#7fe0a8;background:rgba(31,122,71,.26)}
html[data-theme="dark"] .tq__mark--no{color:#f3b4ba;background:rgba(217,83,79,.24)}

/* ══════════ WAVE U7c — restore focus rings ══════════
   Eight rules did `outline:none` and offered only a 1px border-colour swap in exchange. A keyboard
   or switch user tabbing through the join form, the search box or the certificate name field had
   almost nothing to follow — and amber-on-cream at 1px is far below the 3:1 / 2px that WCAG 2.4.11
   asks of a focus indicator. The border colour stays (it reads nicely for mouse users); the ring
   comes back for :focus-visible only, so clicking a field does not paint a ring around it. */
.join__form input:focus-visible,.join__form select:focus-visible,
.lib-search:focus-visible,.tryit__in:focus-visible,.certctrl input:focus-visible,
.practice textarea:focus-visible,.tm__in:focus-visible,
.pb select:focus-visible,.pb input:focus-visible,.langsel:focus-visible,
.tq__opt:focus-within,.quiz__opt:focus-within{
  outline:3px solid var(--amber);outline-offset:2px;border-radius:8px}
html[data-theme="dark"] .join__form input:focus-visible,
html[data-theme="dark"] .lib-search:focus-visible,
html[data-theme="dark"] .tryit__in:focus-visible,
html[data-theme="dark"] .certctrl input:focus-visible,
html[data-theme="dark"] .practice textarea:focus-visible,
html[data-theme="dark"] .tm__in:focus-visible,
html[data-theme="dark"] .langsel:focus-visible{outline-color:var(--gold-soft)}

/* U1c completion — the last faux-bold heading in the app. .mission-cta / .course-cta set their
   title in Yatra One at weight 700; the face ships weight 400 only, so the browser was smearing it.
   Verified by sweeping seven routes for (font-family: Yatra One AND font-weight > 400) — this was
   the only selector left. */
.mission-cta__l b,.course-cta b,.mission-cta b{font-family:var(--dv-body);font-weight:700}

/* WAVE U7d — remaining sub-44px touch targets, found by sweeping every a/button/select/input/summary
   on the rendered page rather than by eye: 13 sidebar group headers, 4 buttons, 2 footer links and
   the back-to-top. The drawer headers are the ones that matter most — they are how a learner opens
   a category on a phone, and they were the smallest things on the screen. */
.side-group__t{min-height:44px;display:flex;align-items:center;gap:8px}
.totop{min-width:44px;min-height:44px}
.tm__link{display:inline-flex;align-items:center;min-height:44px}
.footer__legal .tm__link{min-height:44px}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* WAVE H1 — honesty disclaimers that travel INSIDE the certificate image, because the image is
   what gets forwarded. Small-print at the foot of the page does not survive a WhatsApp share. */
.cert__unver{font-family:var(--dv-body);font-size:.78rem;color:#8E2F2B;background:rgba(217,83,79,.10);
  border:1px solid rgba(217,83,79,.30);border-radius:8px;padding:5px 12px;margin:10px auto 4px;
  display:inline-block;line-height:1.5}
html[data-theme="dark"] .cert__unver{color:#f3b4ba;background:rgba(217,83,79,.18)}