/* Saathi marketing site: Van Gogh "Starry Night" theme (from mobile/theme.ts)
   Mobile-first and fluid: type, spacing, and grids scale continuously with
   the viewport via clamp(), so there are no breakpoint "jumps". */
:root{
  --night:#0A2A36; --night2:#061A22; --night3:#0E3A42;
  --turq:#1FB6A6; --turqDeep:#0B7C74; --turqSoft:#3FA79C;
  --gold:#F2B441; --goldSoft:#E9CD86;
  --cream:#F4EDDC; --card:#FBF6EA; --border:#E0D6BF;
  --ink:#10312E; --muted:#61756D;
  --maxw:1080px;
  /* fluid scales: min on a 320px phone, max on desktop */
  --space-section:clamp(44px,8vw,84px);
  --space-gutter:clamp(16px,4.5vw,24px);
  --gap:clamp(14px,2.5vw,22px);
  --text-body:clamp(15px,1.5vw,16px);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--text-body); line-height:1.6; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic}
a{color:var(--turqDeep);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%;height:auto}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-gutter)}

/* nav: single row that wraps gracefully; every link is a 44px touch target */
.nav{position:sticky;top:0;z-index:20;background:rgba(6,26,34,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0 16px;min-height:60px;padding-top:4px;padding-bottom:4px}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream);font-family:Georgia,serif;
  font-style:italic;font-size:clamp(19px,4vw,22px);text-decoration:none;padding:8px 0;min-height:44px}
.brand img{width:30px;height:30px;border-radius:7px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.nav-links a{color:var(--goldSoft);font-size:clamp(13px,1.6vw,14px);
  padding:12px 10px;display:inline-flex;align-items:center;min-height:44px}
.nav-links a:hover{color:var(--cream);text-decoration:none}

/* hero */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--night3),var(--night) 55%,var(--night2));
  color:var(--cream);text-align:center;
  padding:clamp(52px,10vw,96px) var(--space-gutter) clamp(60px,11vw,110px)}
.hero h1{font-size:clamp(40px,10vw,76px);margin:0 0 12px;color:var(--cream);line-height:1.05}
.hero .tag{color:var(--goldSoft);font-size:clamp(15px,3.6vw,21px);
  margin:0 auto clamp(24px,5vw,34px);max-width:620px}
.hero .swirl{position:absolute;opacity:.5;pointer-events:none;
  width:clamp(110px,24vw,240px);height:auto}
.badges{display:flex;gap:clamp(10px,2.5vw,14px);justify-content:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);
  border:1px solid rgba(242,180,65,.35);color:var(--cream);
  padding:clamp(10px,2vw,12px) clamp(14px,3.5vw,20px);border-radius:14px;
  font-size:14px;text-align:left;min-height:52px}
.badge small{display:block;color:var(--goldSoft);font-size:11px}
.badge strong{font-size:15px}
@media (max-width:420px){
  .badges{flex-direction:column;align-items:stretch}
  .badge{justify-content:center}
}

/* sections */
section{padding:var(--space-section) 0}
.section-title{text-align:center;font-size:clamp(27px,6vw,40px);margin:0 0 10px;color:var(--night)}
.section-sub{text-align:center;color:var(--muted);max-width:620px;
  margin:0 auto clamp(26px,5vw,44px);padding:0 var(--space-gutter)}

/* grids: columns flow 1 -> 2 -> 3 with the available width, no cliffs */
.grid{display:grid;gap:var(--gap)}
.grid-3,.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(18px,3.5vw,26px)}
.card .num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--gold);
  color:#2A1C00;align-items:center;justify-content:center;font-weight:700;margin-bottom:12px}
.card h3{margin:0 0 8px;font-size:clamp(18px,2.4vw,21px);color:var(--night)}
.card p{margin:0;color:var(--muted);font-size:clamp(14px,1.6vw,15px)}

/* alt band */
.band{background:var(--night);color:var(--cream)}
.band .section-title{color:var(--cream)}
.band .section-sub{color:var(--goldSoft)}
.band .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.band .card h3{color:var(--cream)}
.band .card p{color:#B9C9C5}
.feature-img{display:block;width:100%;max-width:760px;border-radius:var(--radius);
  margin:clamp(24px,5vw,36px) auto 0;box-shadow:0 18px 50px rgba(6,26,34,.5)}

/* trust list */
.checks{list-style:none;padding:0 var(--space-gutter);margin:0 auto;max-width:640px;
  display:grid;gap:clamp(10px,2.5vw,14px)}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(15px,1.8vw,16px)}
.checks .tick{flex:none;width:24px;height:24px;border-radius:50%;background:var(--turq);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:2px}

/* footer */
footer{background:var(--night2);color:var(--goldSoft);
  padding:clamp(30px,6vw,44px) var(--space-gutter);font-size:14px}
footer .container{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
footer a{color:var(--goldSoft)}
footer a:hover{color:var(--cream)}
.footer-links{display:flex;flex-wrap:wrap;gap:0 8px}
.footer-links a{padding:10px 8px 10px 0;display:inline-flex;align-items:center;min-height:44px}
.foot-note{color:#6f8f8a;font-size:12px;margin-top:4px;overflow-wrap:anywhere}

/* legal document pages */
.doc{max-width:800px;margin:0 auto;
  padding:clamp(30px,6vw,56px) var(--space-gutter) clamp(56px,10vw,90px)}
.doc h1{color:var(--night);font-size:clamp(28px,6.5vw,38px);margin:0 0 6px}
.doc .meta{color:var(--muted);font-family:Inter,sans-serif;font-style:normal;
  font-size:clamp(13px,1.6vw,14px);border-bottom:3px solid var(--gold);
  padding-bottom:16px;margin-bottom:26px}
.doc h2{color:var(--night);font-size:clamp(18px,3vw,22px);margin-top:32px}
.doc table{border-collapse:collapse;width:100%;margin:14px 0;
  font-size:clamp(13px,1.6vw,14px);display:block;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.doc th,.doc td{border:1px solid var(--border);padding:9px 11px;text-align:left;vertical-align:top;
  min-width:110px}
.doc th{background:var(--card)}
.doc .note{background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:clamp(13px,2.5vw,16px) clamp(14px,3vw,18px)}
.back{display:inline-flex;align-items:center;margin-bottom:12px;font-size:14px;
  padding:8px 8px 8px 0;min-height:44px}

/* long emails and links wrap instead of widening the page */
.doc td,.doc a,footer a{overflow-wrap:anywhere}