/* Saathi landing page, in the app's day theme: a pale sky that fades to white, dark ink, white cards.
   Dark mode is the app's night sky. Two typefaces only (Bricolage for headings, Instrument Sans for text). */

@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --display:"Bricolage","Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --page-base:#f8fafd; --sky-soft:#dcecfb; --sky-mid:#eef5fb; --sky-glow:rgba(156,199,238,.55);
  --ink:#1d1d1f; --ink-mut:#596273; --accent:#2464b0;
  --glass:#ffffff; --glass-2:#ffffff; --glass-line:rgba(22,44,84,.09);
  --nav-bg:rgba(255,255,255,.97);
  --chip:#eef3f9; --solid:#1d1d1f; --on-solid:#ffffff;
  --safe:#067647; --on-safe:#ffffff; --danger:#b42318; --private:#1d4ed8;
  --scr:#f3f7fc; --scr-card:#ffffff;
  --shadow:0 1px 2px rgba(20,30,60,.05),0 12px 32px rgba(30,60,110,.08);
  /* one content width for the header, hero, sections and footer, so every edge lines up */
  --wrap:min(1120px,calc(100% - 32px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --page-base:#1d2a44; --sky-soft:#2a3c5e; --sky-mid:#243657; --sky-glow:rgba(61,95,148,.5);
    --ink:#f4f6fb; --ink-mut:#c3cde0; --accent:#9cc7ee;
    --glass:rgba(24,38,68,.94); --glass-2:rgba(24,38,68,.98); --glass-line:rgba(255,255,255,.12);
    --nav-bg:rgba(20,32,58,.97);
    --chip:rgba(255,255,255,.1); --solid:#f5f5f7; --on-solid:#1d1d1f;
    --safe:#9ff0c4; --on-safe:#0b1a12; --danger:#ffb4a8; --private:#c9d6f2;
    --scr:#16223b; --scr-card:rgba(255,255,255,.07);
    --shadow:0 14px 36px rgba(5,10,25,.4);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--page-base);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
html,body{overflow-x:clip}
body{
  margin:0;min-height:100%;color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(880px 560px at 92% -10%,var(--sky-glow),transparent 70%),
    linear-gradient(180deg,var(--sky-soft) 0,var(--sky-mid) 540px,var(--page-base) 1100px);
}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:30;background:var(--solid);color:var(--on-solid);padding:10px 14px;border-radius:999px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ext-link{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- header: sits on the sky, white once you scroll ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;padding:max(14px,env(safe-area-inset-top)) 0 12px;color:var(--ink);transition:background .3s,padding .3s,box-shadow .3s}
.nav.scrolled{background:var(--nav-bg);padding-bottom:10px;box-shadow:0 1px 0 var(--glass-line)}
.nav-in{width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.wm{font:700 26px/1 var(--display);letter-spacing:-.035em}
.navlinks{display:none;gap:28px;font-size:15px;color:var(--ink-mut)}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--ink)}
@media (min-width:900px){.navlinks{display:flex}}

/* ---- buttons: a solid ink pill, and a white pill with a hairline ---- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:600 16px/1 var(--display);text-decoration:none;white-space:nowrap;cursor:pointer;transition:opacity .2s,transform .15s}
.pill:active{transform:scale(.98)}
.pill.light{background:var(--solid);color:var(--on-solid);box-shadow:0 8px 22px rgba(20,30,60,.18)}
.pill.light:hover{opacity:.9}
.pill.ghost{background:var(--glass);color:var(--ink);border-color:var(--glass-line);box-shadow:var(--shadow)}
.pill.ghost:hover{background:var(--glass-2)}
.pill.sm{min-height:40px;padding:0 16px;font-size:14px}
.wide{display:flex;width:100%;align-items:center;justify-content:center;min-height:56px;padding:0 22px;border:0;border-radius:999px;background:var(--solid);color:var(--on-solid);font:600 16px/1 var(--display);cursor:pointer;transition:opacity .2s}
.wide:disabled{opacity:.42;cursor:default}

/* ---- hero: the promise on the left, an example conversation on the right ---- */
.hero{width:var(--wrap);margin:0 auto;padding:116px 0 48px;display:grid;gap:56px;align-items:center;justify-items:center;text-align:center}
.hero>*{animation:rise .6s cubic-bezier(.22,.9,.28,1) both}
.hero-art{animation-delay:.12s}
.hero-copy{display:flex;flex-direction:column;align-items:center;max-width:620px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);font:600 13px/1 var(--sans);color:var(--ink-mut)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--safe)}
h1{margin-top:24px;font:600 clamp(46px,6vw,84px)/.98 var(--display);letter-spacing:-.045em;text-wrap:balance}
h1 span{display:block}
h1 em{display:block;font-style:normal;font-weight:300;letter-spacing:-.035em;color:var(--accent)}
.lede{margin-top:24px;font-size:clamp(18px,2vw,20px);line-height:1.5;max-width:40ch;color:var(--ink-mut);text-wrap:balance}
.cta{display:flex;flex-direction:column;gap:10px;margin-top:32px;width:100%;max-width:360px}
.cta .pill{width:100%}
@media (min-width:560px){.cta{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:none;width:auto}.cta .pill{width:auto}}
.fine{margin-top:18px;font-size:14px;color:var(--ink-mut)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the example conversation: a white phone with a chat inside */
.hero-art{position:relative;isolation:isolate;width:100%;max-width:360px;display:flex;justify-content:center}
.hero-art::before{content:"";position:absolute;inset:-6% -4% -4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--sky-glow),transparent)}
.phone{width:100%;max-width:320px;padding:12px;border-radius:44px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 30px 60px rgba(30,60,110,.16),0 2px 6px rgba(20,30,60,.06);transform:rotate(-2deg)}
.scr{display:grid;gap:12px;padding:14px 14px 18px;border-radius:34px;background:var(--scr);text-align:left}
.chat-top{display:flex;align-items:center;gap:10px;padding:4px 4px 12px;border-bottom:1px solid var(--glass-line);font:600 15px/1 var(--display)}
.chat-top em{margin-left:auto;font:600 11px/1 var(--sans);font-style:normal;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mut)}
.av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--solid);color:var(--on-solid);font:700 14px/1 var(--display)}
.bub{max-width:86%;padding:12px 14px;border-radius:18px;font-size:14.5px;line-height:1.45}
.bub.me{justify-self:end;background:var(--solid);color:var(--on-solid);border-bottom-right-radius:6px}
.bub.them{justify-self:start;width:100%;display:grid;gap:10px;background:var(--scr-card);box-shadow:0 1px 2px rgba(20,30,60,.05);border-bottom-left-radius:6px;color:var(--ink-mut)}
.bub-h{font:600 18px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.tk{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--safe);color:var(--on-safe);font:700 12px/1 var(--sans)}
.scr-list{display:grid;gap:7px}
.scr-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--scr);font-size:14.5px;font-weight:500;color:var(--ink)}
.scr-box{display:grid;gap:3px;padding:12px 14px;border-radius:14px;background:var(--scr);font-size:13px;color:var(--ink-mut)}
.scr-box b{font:600 15px/1.2 var(--sans);color:var(--ink)}
.scr-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 10px;border-radius:999px;background:var(--solid);color:var(--on-solid);font:600 14px/1.2 var(--display);text-align:center;white-space:nowrap}

@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;justify-items:start;text-align:left;padding:156px 0 88px}
  .hero-copy{align-items:flex-start}
  .hero-copy .cta{justify-content:flex-start}
  .hero-art{justify-content:flex-end}
}

/* ---- promises: three facts in one row ---- */
.trust{width:var(--wrap);margin:0 auto 0;display:grid;border-radius:26px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);overflow:hidden}
.trust li{display:flex;flex-direction:column;gap:4px;padding:22px 24px}
.trust li+li{border-top:1px solid var(--glass-line)}
.trust b{font:600 17px/1.25 var(--display);letter-spacing:-.01em}
.trust span{font-size:15px;color:var(--ink-mut)}
@media (min-width:900px){
  .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust li{padding:26px 28px}
  .trust li+li{border-top:0;border-left:1px solid var(--glass-line)}
}

/* ---- sections ---- */
.sec{width:var(--wrap);margin:0 auto;padding:96px 0}
@media (min-width:760px){.sec{padding:124px 0}}
h2{font:600 clamp(32px,4.4vw,52px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.sub{margin-top:14px;max-width:46ch;font-size:17px;color:var(--ink-mut)}
.note{font-size:15px}
.head{display:grid;gap:14px;margin-bottom:44px}
.head .sub{margin-top:0}
@media (min-width:900px){
  .head{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:64px;margin-bottom:52px}
}
.hint{margin-top:14px;font-size:14px;color:var(--ink-mut);text-align:center}
.card{margin-top:28px;padding:26px;border-radius:28px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
@media (min-width:760px){.card{padding:40px}}

/* two columns on a PC: a heading on the left, the thing it is about on the right */
.split{display:grid;gap:36px;align-items:start}
.split-r .rc,.split-r .field-i{margin-top:0}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px}
}

/* ---- three steps: a line that joins the numbers ---- */
.steps{display:grid;gap:36px}
.step{position:relative;display:grid;align-content:start}
.num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--solid);color:var(--on-solid);font:700 16px/1 var(--display);position:relative;z-index:1}
.step h3{margin-top:22px;font:600 22px/1.2 var(--display);letter-spacing:-.02em}
.step p{margin-top:10px;max-width:34ch;color:var(--ink-mut);font-size:16px}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .step:not(:last-child)::after{content:"";position:absolute;top:19px;left:60px;right:-40px;height:2px;background:var(--glass-line)}
}

/* ---- services: each card opens the app on that service and names the official site ---- */
.svc{display:grid;gap:12px}
.svc>li{display:flex}
@media (min-width:640px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.svc{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.svc a{flex:1;display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);text-decoration:none;transition:transform .2s,box-shadow .2s}
.svc a:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,30,60,.06),0 18px 40px rgba(30,60,110,.12)}
.svc b{font:600 19px/1.25 var(--display)}
.svc span{font-size:15px;color:var(--ink-mut)}
.svc small{margin-top:auto;padding-top:14px;font-size:13px;color:var(--ink-mut);border-top:1px solid var(--glass-line)}

/* ---- safety: does / never ---- */
.dn{display:grid;gap:16px}
@media (min-width:900px){.dn{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.dn-c{margin-top:0;padding:32px}
@media (min-width:760px){.dn-c{padding:36px}}
.dn-c h3{font:600 24px/1.2 var(--display);letter-spacing:-.02em}
.ticks{display:grid;gap:16px;margin-top:22px}
.ticks li{position:relative;padding-left:36px;font-size:16px;line-height:1.5;color:var(--ink-mut)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--safe);color:var(--on-safe);font:700 13px/1 var(--sans)}
.ticks.no li::before{content:"✕";background:var(--chip);color:var(--danger)}

/* ---- prices: each action is its own light-blue row, always light, in either theme; the pack is the light-orange one ---- */
.rc{display:grid;gap:12px;margin-top:28px}
.rrow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 24px;border-radius:999px;background:#d6e8fa;color:#10294a;border:0;box-shadow:0 1px 2px rgba(20,30,60,.08)}
.rrow.pk{background:#ffe0bd;color:#4a2300}
.rt{min-width:0;font:600 16px/1.3 var(--display)}
.rt small{display:block;margin-top:3px;font:400 13.5px/1.4 var(--sans);opacity:.85}
.rv{flex:none;font:700 17px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- scam check ---- */
#check .card{margin-top:0}
.field-i{display:block;width:100%;min-height:112px;margin-top:22px;padding:16px 18px;border-radius:22px;border:1px solid var(--glass-line);background:var(--scr);color:var(--ink);font:400 16px/1.5 var(--sans);resize:vertical}
.field-i:focus{outline:none;border-color:var(--accent)}
.field-i::placeholder{color:var(--ink-mut)}
.try{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{padding:10px 15px;border-radius:999px;border:0;background:var(--chip);color:var(--ink);font-size:14px;cursor:pointer;transition:opacity .2s}
.chip:hover{opacity:.85}
.card .wide{margin-top:18px}
.verdict{margin-top:20px;padding:22px 24px;border-radius:22px;background:var(--scr)}
.verdict .vt{font:600 22px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
.verdict ul{margin-top:12px;padding-left:20px;list-style:disc;color:var(--ink-mut)}
.verdict li{margin-top:4px}
.verdict .adv{margin-top:12px;color:var(--ink-mut)}
.verdict b{font-weight:600}
.verdict[data-l="danger"] .vt{color:var(--danger)}
.verdict[data-l="safe"] .vt{color:var(--safe)}
.verdict[data-l="private"] .vt{color:var(--private)}

/* ---- questions ---- */
.faq{margin-top:32px;border-top:1px solid var(--glass-line)}
.faq details{border-bottom:1px solid var(--glass-line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;list-style:none;cursor:pointer;font:600 clamp(18px,2.2vw,21px)/1.3 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--chip);font:400 22px/1 var(--sans);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{max-width:66ch;padding:0 0 22px;color:var(--ink-mut)}
.faq a{color:var(--accent)}

/* ---- closing call: a white card with a sky wash, so the page ends where it began ---- */
.final{width:var(--wrap);margin:0 auto 88px;padding:76px 24px;border-radius:36px;text-align:center;background:linear-gradient(180deg,var(--glass) 0,var(--scr) 100%);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.final h2{margin:0 auto;max-width:18ch}
.final p{margin-top:16px;font-size:17px;color:var(--ink-mut)}
.final .cta{margin-top:28px;justify-content:center}

/* ---- footer ---- */
.foot{width:var(--wrap);margin:0 auto;display:grid;gap:28px;padding:40px 0 56px;border-top:1px solid var(--glass-line);color:var(--ink-mut);font-size:15px}
.foot .wm{color:var(--ink)}
.disc{margin-top:12px;max-width:60ch}
.foot-r{display:grid;gap:14px;align-content:start}
.flinks{display:flex;flex-wrap:wrap;gap:10px 24px}
.flinks a,.help a{color:var(--ink);text-decoration:none}
.flinks a:hover,.help a:hover{text-decoration:underline}
.help a{color:var(--accent)}
@media (min-width:900px){
  .foot{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px}
  .foot-r{justify-items:end;text-align:right}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero>*{animation:none}
  .svc a{transition:none}
}