/* ============================================================
   BASE — har page par. Tokens, reset, nav, footer, theme toggle.

   Pehle ye CSS teen legal page me HU-BA-HU teen baar likha tha
   (7499 char x 3) aur index me chautha roop. Ek rang badalna matlab
   chaar jagah badalna -- aur ek din chaaron alag ho jaate.

   Tokens ka superset yahan hai: jo variable kisi page par use nahi
   hota wo kuch kharcha nahi karta, par do alag token-list rakhna
   wahi drift wapas le aata.
   ============================================================ */

:root{
  color-scheme: light;

  --paper:#F7FAF9; --surface:#FFFFFF; --surface-2:#F0F6F4;
  --ink:#101817; --slate:#586663; --hairline:#DCE7E4;
  --jade:#0B7F6E; --jade-deep:#075E53; --mint:#DDF4EF; --fresh:#3FBBA2;
  --amber:#FFB23F; --amber-deep:#E08A1E; --on-amber:#101817; --cream:#FFF6E6;

  /* STAGE jaan-boojh ke theme ke saath NAHI badalta.
     Nav, hero aur footer hamesha gehre jade par baithte hain -- ye brand
     ka apna band hai, page ka background nahi. Isse light mode me bhi
     chrome wahi rehta hai jo aaj hai, aur dark mode me ek saaf patti. */
  --stage:#06382F; --stage-2:#0A4C40; --stage-ink:#ECF7F3; --stage-dim:#96BDB4;
  --stage-line:rgba(236,247,243,.14);

  --shadow-s:0 1px 2px rgba(6,56,47,.05), 0 4px 14px rgba(6,56,47,.05);
  --shadow-m:0 2px 4px rgba(6,56,47,.05), 0 18px 44px rgba(6,56,47,.10);
  --r-s:12px; --r-m:20px; --r-l:28px;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Gutter ab chhote phone par bhi saans leta hai.
     Pehle sirf `min(1160px,92vw)` tha -- 360px ke phone par wo 331px deta
     tha, yani dono taraf sirf 14px. Ab kam se kam 18px kinara pakka. */
  --shell:min(1160px, calc(100vw - 36px));
}

/* Teen haalat, teenon zaroori:
     1. :root                      -> light (default)
     2. system dark + koi chunav nahi -> dark
     3. :root[data-theme]          -> user ka saaf chunav, dono taraf jeetta hai
   Shart `:root:not([data-theme="light"])` isiliye hai: system dark ho par
   user ne LIGHT chuna ho, to user jeete. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#071411; --surface:#0D1F1B; --surface-2:#112923;
    --ink:#E8F4F0; --slate:#98B2AC; --hairline:#1B322C;
    --jade:#4CC9AE; --jade-deep:#2FA88C; --mint:#12312B; --fresh:#58D6C2; --cream:#2A2114;
    --shadow-s:0 1px 2px rgba(0,0,0,.4);
    --shadow-m:0 2px 6px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#071411; --surface:#0D1F1B; --surface-2:#112923;
  --ink:#E8F4F0; --slate:#98B2AC; --hairline:#1B322C;
  --jade:#4CC9AE; --jade-deep:#2FA88C; --mint:#12312B; --fresh:#58D6C2; --cream:#2A2114;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 2px 6px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
img,svg{max-width:100%}
img{height:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
a{color:inherit}
h1,h2,h3{text-wrap:balance;margin:0}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.shell{width:var(--shell);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
         color:var(--slate);margin:0 0 18px}
.stage .eyebrow{color:var(--stage-dim)}

/* ─────────────────────────────  NAV  ───────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--stage) 88%,transparent);
     backdrop-filter:blur(14px);border-bottom:1px solid var(--stage-line)}
.nav-in{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;
       color:var(--stage-ink);text-decoration:none;font-size:17px;flex:none}
.nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--stage-dim);text-decoration:none;font-size:14.5px;font-weight:500}
.nav-links a:hover{color:var(--stage-ink)}

/* Nav ka pill. `index` use karta tha `.btn.btn-primary`, legal pages `.pill` --
   dono ek hi dikhte the, isliye dono yahan ek saath. */
.nav .btn-primary,.nav .pill{display:inline-flex;align-items:center;font-family:var(--sans);
  font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:999px;text-decoration:none;
  white-space:nowrap;color:var(--stage-ink);background:transparent;
  border:1px solid rgba(236,247,243,.34);box-shadow:none;transition:.18s}
.nav .btn-primary:hover,.nav .pill:hover{background:rgba(236,247,243,.10);
  border-color:rgba(236,247,243,.5);transform:none;box-shadow:none}

/* ── Theme toggle ──────────────────────────────────────────────
   Ek hi button, teen roop: system / light / dark. Sirf do rakhte to
   "system ke saath chalo" wala raasta hamesha ke liye band ho jaata --
   aur wahi default hai. Icon CSS se badalta hai, JS sirf attribute
   set karti hai. */
.theme-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;padding:0;
  border-radius:999px;cursor:pointer;background:transparent;
  border:1px solid rgba(236,247,243,.28);color:var(--stage-ink);transition:.18s}
.theme-btn:hover{background:rgba(236,247,243,.10);border-color:rgba(236,247,243,.5)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-sun,.theme-btn .i-moon{display:none}
:root[data-theme="light"] .theme-btn .i-auto{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"]  .theme-btn .i-auto{display:none}
:root[data-theme="dark"]  .theme-btn .i-moon{display:block}

/* ── Mobile menu ───────────────────────────────────────────────
   🔴 Pehle yahan sirf ye tha:  @media(max-width:760px){.nav-links a{display:none}}
   Yani phone par nav ke saare link GAYAB ho jaate the aur unki jagah kuch
   nahi aata tha -- Privacy, Terms, Pricing, FAQ tak nav se pahuncha hi
   nahi ja sakta tha. Google mobile-first index karta hai, to jo version
   wo dekhta hai usme internal link the hi nahi.
   Ab wahi link ek panel me chale jaate hain. */
.nav-toggle{display:none;width:38px;height:38px;flex:none;place-items:center;padding:0;
  border-radius:999px;cursor:pointer;background:transparent;
  border:1px solid rgba(236,247,243,.28);color:var(--stage-ink)}
.nav-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}

@media(max-width:760px){
  .nav-in{gap:10px;height:60px}
  .nav-toggle{display:grid}
  .nav-links{position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--stage);border-bottom:1px solid var(--stage-line);
    padding:6px 0 10px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 18px;font-size:16px;width:var(--shell);margin-inline:auto;
    border-radius:10px;min-height:44px;display:flex;align-items:center}
  .nav-links a:hover,.nav-links a:focus-visible{background:rgba(236,247,243,.08)}
  /* Pill chhote phone par sirf icon jitna reh jaata tha -- ab text chhota,
     par button pura. */
  .nav .theme-btn{margin-left:auto}
  .nav .btn-primary,.nav .pill{padding:9px 14px;font-size:13.5px}
}
@media(max-width:380px){
  .brand{font-size:15.5px;gap:8px}
  .nav .btn-primary,.nav .pill{padding:8px 12px;font-size:12.5px}
}

/* ─────────────────────────────  FOOTER  ───────────────────────────── */
footer{background:var(--stage);color:var(--stage-dim);border-top:1px solid var(--stage-line)}
.foot{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;padding:34px 0;font-size:14px}
.foot a{color:var(--stage-dim);text-decoration:none}
.foot a:hover{color:var(--stage-ink)}
.foot .sep{margin-left:auto}
.legal{border-top:1px solid var(--stage-line);padding:20px 0 40px;font-size:12.5px;
  line-height:1.7;color:#7FA9A0}
@media(max-width:640px){
  .foot{gap:14px 22px;padding:28px 0;font-size:14.5px}
  .foot .sep{margin-left:0;flex-basis:100%}
  .foot a{min-height:32px;display:inline-flex;align-items:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}