/* W-876 — Saarthi's front page and sign-in page (the locked v25 mock-up).
   Only the two pages before sign-in load this file; the office site never
   does, so nothing here can reach a signed-in screen. Fonts come from
   static/saarthi/css/fonts.css (kept inside Saarthi, brief D2). */
:root{--ink:#1F1F2E;--ink-2:#55566B;--muted:#8A8CA3;--line:#E6E7EF;--bg:#FFFFFF;--soft:#F6F7FB;
--pur:#6161FF;--pur-d:#4B4BE0;--pur-l:#EEEEFF;--pink:#D5317A;--pink-l:#FDEAF3;--green:#00C875;--orange:#FDAB3D;--blue:#0073EA;--red:#E2445C}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Figtree,system-ui,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
h1,h2,h3,h4{font-family:Poppins,system-ui,sans-serif;letter-spacing:-.02em;line-height:1.12;margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.c-green{--c:var(--green)}.c-orange{--c:var(--orange)}.c-pur{--c:var(--pur)}.c-blue{--c:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border-radius:40px;font:600 16px Figtree,system-ui,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:.15s}
.btn.pri{background:var(--pur);color:#fff}.btn.pri:hover{background:var(--pur-d)}
.btn.big{height:56px;padding:0 34px;font-size:17px}
.btn.sm{height:40px;padding:0 18px;font-size:15px}
.btn .ar{transition:transform .15s}.btn:hover .ar{transform:translateX(3px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--pur);outline-offset:3px}
.link{color:var(--pur);font-weight:600;text-decoration:none;font-size:15px}.link:hover{text-decoration:underline}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:.2s}
.topbar.sc{border-bottom-color:var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:42px;width:auto}
.topbar .sp{flex:1}

/* hero */
.hero{padding:56px 0 40px;text-align:center}
.hero .imgs{display:flex;justify-content:center;align-items:flex-end;margin:0 auto 34px;height:150px}
.hero .imgs img{width:130px;height:150px;object-fit:cover;border-radius:22px;border:5px solid #fff;box-shadow:0 12px 30px rgba(31,31,46,.16);background:var(--soft)}
.hero .imgs img:nth-child(1){transform:rotate(-8deg) translateX(18px)}
.hero .imgs img:nth-child(2){width:150px;height:170px;z-index:2;transform:translateY(-10px)}
.hero .imgs img:nth-child(3){transform:rotate(8deg) translateX(-18px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--pink-l);color:var(--pink);font-weight:700;font-size:13.5px;border-radius:30px;padding:6px 14px;margin-bottom:18px}
.hero h1{font-size:clamp(40px,6.4vw,76px);font-weight:800;max-width:900px;margin:0 auto}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--pur),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(18px,2vw,21px);color:var(--ink-2);max-width:680px;margin:18px auto 30px}
.signcard{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px 20px;box-shadow:0 20px 50px rgba(97,97,255,.10)}
.signcard b{display:block;font-family:Poppins,system-ui,sans-serif;font-size:17px;margin-bottom:12px}
.signcard .ms{margin-top:12px}
.signcard small{display:block;color:var(--muted);font-size:13.5px;margin-top:10px}

/* partner logos */
.trust{padding:46px 0 30px;text-align:center}
.trust p{color:var(--ink-2);font-weight:600;margin:0 0 22px}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq .row{display:flex;gap:56px;width:max-content;animation:mq 40s linear infinite;align-items:center}
.mq img{height:42px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.mq img:hover{filter:none;opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
section{padding:80px 0}
.sh{text-align:center;max-width:760px;margin:0 auto 46px}
.sh h2{font-size:clamp(32px,4.4vw,52px);font-weight:700}
.sh p{color:var(--ink-2);font-size:19px;margin:14px 0 0}

/* programme cards */
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fc{background:var(--soft);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:.2s}
.fc:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(31,31,46,.08)}
.fc .tag{align-self:flex-start;font-size:12.5px;font-weight:700;border-radius:20px;padding:4px 11px;color:#fff;background:var(--c)}
.fc h3{font-size:21px}.fc p{margin:0;color:var(--ink-2);font-size:15.5px}
.fc img{width:100%;height:170px;object-fit:cover;border-radius:16px;margin-top:auto;background:#fff}

/* chapter cards that pile up */
.pile-sec{background:linear-gradient(180deg,#fff,var(--soft) 12%,var(--soft) 88%,#fff);padding-bottom:40px}
.pile{position:relative;max-width:1100px;margin:0 auto}
.pc{position:sticky;top:calc(96px + var(--i) * 18px);height:min(560px,calc(100vh - 140px));margin-bottom:46px;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;background:var(--cb);color:var(--cf,#fff);box-shadow:0 -10px 40px rgba(31,31,46,.12);transform-origin:center top;will-change:transform}
.pc .tx{padding:44px 46px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.pc .yr{font:800 15px Poppins,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.pc h3{font-size:clamp(28px,3.4vw,42px);font-weight:700}
.pc p{margin:0;font-size:18px;opacity:.94;max-width:470px}
.pc .num{display:flex;align-items:baseline;gap:10px;margin-top:6px;flex-wrap:wrap}
.pc .num b{font:800 clamp(34px,4vw,50px) Poppins,system-ui,sans-serif;letter-spacing:-.02em}
.pc .num span{font-size:15px;opacity:.9}
.pc .ph{position:relative;min-height:0}
.pc .ph img{position:absolute;inset:14px 14px 14px 0;width:calc(100% - 14px);height:calc(100% - 28px);object-fit:cover;border-radius:24px;background:rgba(255,255,255,.12)}
.pc .step{position:absolute;top:22px;right:28px;font:700 13px Poppins,system-ui,sans-serif;background:rgba(255,255,255,.9);color:var(--ink);border-radius:20px;padding:5px 12px;z-index:2}

/* numbers */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.st{border-radius:24px;padding:28px 24px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.st::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.st b{display:block;font:800 clamp(34px,3.6vw,46px) Poppins,system-ui,sans-serif;letter-spacing:-.02em;color:var(--c)}
.st.c-orange b{color:#B86E00}
.st span{color:var(--ink-2);font-size:16px}
.source{text-align:center;color:var(--muted);font-size:13.5px;margin:18px 0 0}

/* path tabs */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.tabs[hidden]{display:none}
.tabs button{border:1.5px solid var(--line);background:#fff;border-radius:30px;padding:11px 22px;font:600 15.5px Figtree,system-ui,sans-serif;cursor:pointer;display:flex;gap:8px;align-items:center;color:var(--ink)}
.tabs button i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-size:13px}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabs button[aria-selected="true"] i{background:var(--pur);color:#fff}
.tp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--soft);border-radius:32px;padding:36px;margin-bottom:18px}
.tp[hidden]{display:none}
.tp img{width:100%;height:380px;object-fit:cover;border-radius:24px;background:#fff}
.tp h3{font-size:clamp(26px,3vw,36px);margin-bottom:12px}.tp p{color:var(--ink-2);margin:0 0 18px}
.tp ul{margin:0;padding:0;list-style:none}.tp li{padding:6px 0 6px 30px;position:relative}
.tp li::before{content:"✓";position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;display:grid;place-items:center}

/* vision */
.quote{background:var(--ink);color:#fff;border-radius:36px;padding:60px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.quote .q{font:600 clamp(24px,3vw,36px)/1.25 Poppins,system-ui,sans-serif;letter-spacing:-.01em;margin:0}
.quote .q::before{content:"\201C";display:block;font-size:90px;line-height:.6;color:var(--pink);margin-bottom:14px}
.quote .by{margin-top:20px;color:#B9BAD0;font-size:16px}
.quote img{width:100%;height:340px;object-fit:cover;border-radius:24px}
.vals{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.vals span{border:1px solid #44465C;border-radius:20px;padding:5px 12px;font-size:14px;color:#D7D8E6}

/* questions */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font:600 19px Poppins,system-ui,sans-serif;position:relative;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:28px;font-weight:400;color:var(--pur);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 0 22px;color:var(--ink-2)}

/* footer */
footer{background:var(--soft);padding:60px 0 30px;margin-top:40px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:30px}
footer h4{font-size:15px;font-weight:700;margin:0 0 12px}
footer a{display:block;text-decoration:none;color:var(--ink-2);font-size:15px;padding:3px 0}footer a:hover{color:var(--pur)}
footer .about{color:var(--ink-2);font-size:15px;max-width:300px}
footer .addr{display:block;color:var(--ink-2);font-size:15px;padding-top:4px}
footer .fine{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;font-size:13.5px;color:var(--muted)}
footer .fine a{display:inline;font-size:13.5px}
.soc{display:flex;gap:10px;margin-top:12px}
.soc a{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:0;font-weight:700}

/* fade-in — only when scripts run (the html tag gets class "js"), so with
   scripts off nothing stays hidden (brief E5). */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}.js .rv.in{opacity:1;transform:none}

@media (max-width:980px){
 .feat,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.tp,.quote{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr}
 .pc{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:min(640px,calc(100vh - 120px))}.pc .tx{padding:28px}
 .pc .ph img{inset:0 14px 14px 14px;width:calc(100% - 28px);height:calc(100% - 14px)}.quote{padding:36px}}
@media (max-width:600px){
 body{font-size:16px}.wrap{padding:0 16px}.feat,.stats{grid-template-columns:1fr}
 .hero{padding-top:36px}.hero .imgs img{width:96px;height:112px}.hero .imgs img:nth-child(2){width:112px;height:128px}.hero .imgs{height:120px}
 section{padding:56px 0}.pc{top:calc(84px + var(--i) * 10px);height:auto;min-height:min(600px,calc(100vh - 110px))}.pc .tx{padding:22px}.pc p{font-size:16px}
 .pc .ph{min-height:200px}.tp{padding:20px}.tp img{height:240px}.quote{padding:28px 22px}.quote img{height:240px}.fg{grid-template-columns:1fr}
 .signcard .btn.big{width:100%;padding:0 18px}.topbar .wrap{height:64px}.logo img{height:36px}}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.mq .row{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.mq .row [aria-hidden]{display:none}
 .js .rv{opacity:1;transform:none;transition:none}.fc,.fc:hover{transition:none;transform:none}.pc{transform:none!important;filter:none!important}}

/* ---------- the sign-in page (brief D1) ---------- */
.signin-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,var(--soft))}
.signin-page main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px}
.signin-box{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px 28px;box-shadow:0 20px 50px rgba(97,97,255,.10)}
.signin-box h1{font-size:26px;font-weight:700;text-align:center;margin:0 0 20px}
.signin-box label{display:block;font-weight:600;font-size:15px;margin:0 0 6px}
.signin-box input[type=text],.signin-box input[type=password]{width:100%;height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:400 16px Figtree,system-ui,sans-serif;color:var(--ink);background:#fff}
.signin-box input:focus{outline:none;border-color:var(--pur);box-shadow:0 0 0 3px var(--pur-l)}
.signin-box .field{margin-bottom:16px}
.signin-box .btn{width:100%}
.signin-box .or{text-align:center;color:var(--muted);font-size:14px;margin:14px 0}
.signin-box .btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}.signin-box .btn.ghost:hover{border-color:var(--pur);color:var(--pur)}
.signin-box .forgot{text-align:center;margin-top:18px}
.signin-box .alert{background:#FDECEF;border:1px solid #F5C2CB;color:#A1182F;border-radius:12px;padding:10px 14px;font-size:15px;margin-bottom:16px}
.signin-box .alert-success{background:#E6F9F0;border-color:#A8E6C9;color:#00703F}
.signin-box .alert-info,.signin-box .alert-warning{background:var(--pur-l);border-color:#C9C9FF;color:#3A3AB8}