/* ═══════════════════════════════════════════════════════════════════
   TAXATION360 ADVISORY
   ───────────────────────────────────────────────────────────────────
   A landing page for paid search in Gonda, U.P. Everything here answers
   one question: does a person who clicked an ad for "ITR filing near me"
   get what they came for, fast, on the phone they are holding?

   So: mobile first, one blue, one action, price visible without scrolling.
   No ornament that does not carry information.

   The firm's own disclaimer states it provides no legal advice,
   representation or advocacy. Nothing here claims otherwise, and the
   trust signals are ones a COMPLIANCE FIRM can actually stand behind.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* One blue, carrying the whole page. A second accent would only give the
     eye somewhere else to go, and there is only one thing to do here. */
  --blue:#0b5cff;
  --blue-d:#0a4ed6;
  --blue-l:#eaf1ff;
  --blue-xl:#f5f9ff;

  --ink:#0d1b2a;
  --ink-70:#3d4d5c;
  --ink-50:#5a6672;
  --ink-30:#8b97a3;
  --ink-15:#c3cbd3;

  --line:#e6e8eb;
  --line-2:#f0f2f4;
  --bg:#ffffff;
  --bg-2:#f7f9fb;

  --ok:#0f9d58;
  --ok-l:#e8f5ee;
  --warn:#d93025;
  --warn-l:#fdeceb;

  --wa:#25D366;
  --wa-d:#1da851;

  --r:10px;
  --r-sm:8px;
  --r-lg:14px;

  --sh:0 1px 2px rgba(13,27,42,.04),0 4px 12px rgba(13,27,42,.06);
  --sh-lg:0 2px 6px rgba(13,27,42,.05),0 12px 32px rgba(13,27,42,.1);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* One element that cannot fit drags a horizontal scrollbar across the whole
   page — and then every vertical swipe fights a sideways wobble. */
html,body{overflow-x:hidden;max-width:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-70);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  padding-bottom:74px;   /* clears the mobile dock */
}
h1,h2,h3,h4,p,li,span,a,label{overflow-wrap:break-word}
h1,h2,h3,h4{
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  color:var(--ink);
  line-height:1.22;
  letter-spacing:-.02em;
  font-weight:700;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}


/* ── Focus. There was none: a keyboard user could not see where they were,
   which is both the cheapest accessibility failure to fix and one Google's
   own Lighthouse flags on a landing page. :focus-visible so a mouse click
   does not leave a ring behind it. ── */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:4px;
}
.btn:focus-visible,.plan-btn:focus-visible,.lead-submit:focus-visible,
.dock a:focus-visible,.nav-call:focus-visible{outline-offset:3px}
.field input:focus-visible,.field select:focus-visible{outline:none}  /* the ring is the border */
.lead-alt a:focus-visible{outline-color:#fff}

/* ── Section shell ── */
.sec{padding:44px 0}
.sec--tint{background:var(--bg-2)}
.sec-head{margin-bottom:20px;max-width:640px}
.sec-head h2{font-size:24px;margin-bottom:7px}
.sec-head p{font-size:15px;color:var(--ink-50);line-height:1.65;max-width:600px}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:10px;
}
/* A rule before the eyebrow — it anchors the block without a heavier heading */
.eyebrow::before{
  content:'';width:16px;height:2px;border-radius:1px;
  background:var(--blue);flex-shrink:0;
}

/* ═══ NAV ═══ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:58px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
/* Mark ab ek mohar hai — ek gola. Gole ko neele rounded square ke andar
   rakhne se do akaar aapas mein ladte hain aur koi nahi jeetta. Container ab
   sirf size aur rang carry karta hai. */
/* Nav ka mark ab seal hai — neela bhara gola, andar safed T, sab ek SVG mein.
   Isliye yahan koi background ya rang nahi: gola khud SVG mein hai. Pehle jo
   neela chaukor tha wahi asli baat thi jo aap chahte the — seal wahi look deta
   hai, bas kinare gol, aur andar ka T pakka safed (currentColor se nahi
   uthata, isliye kabhi dark nahi hoga). */
.logo-mark{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
/* Nav ka wordmark do line ka hai, footer ka ek — isliye yahan mark nav se
   chhota hona chahiye, bada nahi. 36px par wo ek-line ke naam se teen guna
   ho jaata tha. Gap bhi ek pixel bada: gol akaar ke bagal ki khaali jagah
   chaukor ke muqable optically kam dikhti hai. */
.foot-brand .logo-mark{width:30px;height:30px;color:#fff}
.logo-360{color:var(--blue)}

/* On the dark footer the brand blue sits at about 3:1 against #0d1b2a — under
   the 4.5:1 body text needs. The 360 is part of the name, not decoration, so
   it lifts to a lighter step rather than staying "on brand" and unreadable. */
.foot .logo-360{color:#7aa9ff}
.logo-sub{display:block;font-size:9.5px;font-weight:600;color:var(--ink-30);letter-spacing:.1em;text-transform:uppercase;margin-top:-2px}
.nav-links{display:none}
.nav-call{
  display:inline-flex;align-items:center;gap:7px;
  min-height:42px;                 /* a miss-tap on the only number is a lost call */
  font-size:14px;font-weight:600;color:var(--blue);
  padding:0 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);
  white-space:nowrap;
  transition:background .18s,border-color .18s;
}
.nav-call:active{background:var(--blue-l)}
.nav-call:hover{background:var(--blue-l);border-color:var(--blue)}

/* ═══ HERO — the ad click lands here ═══ */
.hero{background:var(--bg);padding:0 0 26px}

/* The strip that answers "am I in the right place?" before anything else.
   Pehle ye dark navy tha — jiska matlab tha page par do dark band (ye aur
   footer) beech mein halke page ke saath. Upar wala dark band footer jaisa
   dikhta tha jabki page abhi shuru hua tha. Ab ye halka blue tint hai: poore
   page mein ek hi dark zone bachta hai — footer — jo apna "yahan khatam" wala
   kaam saaf karta hai. Neeche ek hairline se ye page se alag rehta hai. */
.hero-strip{
  background:var(--blue-xl);
  border-bottom:1px solid #dbe7fb;
  padding:8px 0;
}
.hero-strip-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-strip-l{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--blue);text-transform:uppercase;
}

/* Deadline paas aane par strip ka rang khud badalta hai. 'normal' blue rehta
   hai (upar). 7 din se kam par dot aur text warn-rang mein — countdown ab
   "info" nahi, "abhi karo" bolta hai. Yahi wo lever hai jo ads ke aakhri
   dinon mein conversion uthata hai. Background halka tint rehta hai taaki
   header/footer wali light-dark ryhthm na tootے. */
.hero-strip--soon{background:#fff8ec;border-bottom-color:#f5e2be}
.hero-strip--soon .hero-strip-l{color:#b26a00}
.hero-strip--soon .hero-dot{background:#e8890c}
.hero-strip--urgent{background:var(--warn-l);border-bottom-color:#f6c9c5}
.hero-strip--urgent .hero-strip-l{color:var(--warn)}
.hero-strip--urgent .hero-dot{background:var(--warn)}
.hero-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero-strip-r{font-size:11px;font-weight:600;color:var(--ink-50);white-space:nowrap}
/* Chhote phone par ye do cheezein ek line mein nahi aatin, aur strip do line
   ka ho jaata hai. Locality yahan se hatna sabse sasta hai — wo "Why us" card,
   footer, page title aur schema, chaaron jagah pehle se hai. Countdown kahin
   aur nahi hai. */
@media(max-width:430px){
  .hero-strip-r{display:none}
}

.hero-in{padding-top:28px}
.hero h1{font-size:30px;font-weight:700;margin-bottom:11px;letter-spacing:-.008em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:15.5px;color:var(--ink-50);line-height:1.65;margin-bottom:18px;max-width:520px}

/* Price, above the fold. An ad click that has to hunt for the price leaves.
   Tint akela kaafi hai — tint + border + radius milkar input field jaisa
   dikhta tha, aur ye is column ka teesra bordered rectangle tha. */
.hero-price{
  display:inline-flex;align-items:baseline;gap:9px;
  margin-bottom:16px;flex-wrap:wrap;
  padding:9px 14px;
  background:var(--blue-xl);
  border-radius:var(--r-lg);
}
.hero-price-amt{font-family:'Source Serif 4',Georgia,serif;font-size:32px;font-weight:700;color:var(--blue);letter-spacing:-.01em;line-height:1}
.hero-price-note{font-size:13.5px;color:var(--ink-50)}

.hero-acts{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}

.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 18px;border-radius:var(--r);
  font-size:14.5px;font-weight:600;line-height:1.25;
  transition:background .18s var(--ease),border-color .18s,color .18s;
  text-align:center;
  /* Do line ka button hi wo "mota" wala tha — 74px jabki bagal wala 50px. Ab
     wrap hi nahi hoga, jo label chhota rakhne ki majboori bhi banata hai. CTA
     ek saans mein padha jaana chahiye. */
  white-space:nowrap;
}
.btn:active{transform:scale(.985)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-d);color:#fff}
.btn-wa:active{background:var(--wa-d)}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}
.btn-line:active{background:var(--blue-xl);border-color:var(--blue)}
.btn svg{flex-shrink:0}

/* Two facts a compliance firm can actually stand behind.
   Sach hain, par CTA jitna zor nahi maangti — isliye pill se nikaal kar plain
   text kar diye, column ke do rectangles kam ho gaye.
   Hairline pehle yahan thi. Usne ulta kaam kiya: rule ek block shuru karta hai,
   aur uske neeche column khatam ho jaata tha — to lagta tha kuch adhoora chhoot
   gaya. Bina rule ke column bas khatam hota hai, aur wo theek hai. */
.hero-trust{
  display:flex;gap:8px 20px;flex-wrap:wrap;
  padding-top:18px;
}
.hero-trust span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:var(--ink-50);
  background:none;
  border:none;
  padding:0;
  border-radius:0;
}
.hero-trust svg{color:var(--ok);flex-shrink:0}


/* ═══ STEPS ═══ */
/* ── Filing process: connected timeline ──
   Pehle steps ek bordered grid mein the — chaar alag boxes. Ab ek juda hua
   timeline: numbered nodes ek line se jude, jo process ka "flow" dikhata hai.
   Log dekhte hain kaam kaise hota hai — trust banta hai, aur page bhaari nahi
   hota kyunki content wahi hai.
   Mobile: vertical. Desktop (neeche): horizontal. */
.steps{
  display:flex;flex-direction:column;gap:0;
  position:relative;
  border:none;border-radius:0;overflow:visible;background:none;
}
.step{
  display:flex;gap:16px;align-items:flex-start;
  padding:0 0 26px 0;border:none;
  position:relative;
  transition:none;
}
.step:last-child{padding-bottom:0}
/* vertical connector — har node se agle node tak. Aakhri node ke baad nahi. */
.step:not(:last-child)::before{
  content:'';position:absolute;
  left:15px;top:32px;bottom:-6px;width:2px;
  background:#cfe0ff;
}
.step:hover{background:none}
.step-n{
  width:32px;height:32px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;
  position:relative;z-index:1;
  box-shadow:0 0 0 4px var(--blue-xl);
}
.step h3{font-size:15.5px;margin-bottom:4px;font-weight:700;padding-top:5px}
.step p{font-size:14px;color:var(--ink-50);line-height:1.6}

/* ═══ PRICING ═══ */
.plans{display:grid;gap:12px}
.plan{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 18px;
  /* Mobile par teeno safed the, ek ke neeche ek — flat scroll. Saade card ab
     halka tint lete hain, "most common" (.plan--pick) akela safed rehta hai,
     to wo khud ubharta hai. ≥900px par sab safed wapas (neeche), jahan
     side-by-side hone se depth pehle se hai. */
  background:var(--bg-2);
  display:flex;flex-direction:column;
  position:relative;
  transition:border-color .18s;
}
.plan--pick{background:#fff}
.plan:hover{border-color:var(--ink-15)}
.plan--pick{
  border:2px solid var(--blue);
  box-shadow:0 4px 20px rgba(11,92,255,.12);
  background:linear-gradient(180deg,var(--blue-xl) 0%,#fff 90px);
}
.plan-tag{
  position:absolute;top:-10px;left:18px;
  background:var(--blue);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:4px 10px;border-radius:5px;text-transform:uppercase;
}
.plan-name{font-family:'Source Serif 4',Georgia,serif;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:3px}
.plan-for{font-size:13.5px;color:var(--ink-50);margin-bottom:12px;line-height:1.5}
.plan-price{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:28px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:14px;
  display:flex;align-items:baseline;gap:6px;
}
.plan--pick .plan-price{color:var(--blue)}
.plan-price small{font-size:13px;font-weight:500;color:var(--ink-30);letter-spacing:0}
.plan-feats{list-style:none;margin-bottom:16px;flex:1}
.plan-feats li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink-70);padding:5px 0;line-height:1.5}
.plan-feats svg{color:var(--ok);flex-shrink:0;margin-top:3px}
.plan-cta{display:flex;flex-direction:column;gap:7px}
.plan-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;
  transition:background .18s,border-color .18s,color .18s;
}
.plan-btn:active{transform:scale(.985)}
.plan-btn.wa{background:var(--wa);color:#fff}
.plan-btn.wa:hover{background:var(--wa-d);color:#fff}
.plan-btn.ghost{background:#fff;color:var(--ink-50);border:1px solid var(--line);font-weight:500;font-size:13.5px;padding:10px}
.plan-btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
.plans-note{font-size:13.5px;color:var(--ink-50);margin-top:14px;text-align:center;line-height:1.6}

/* ═══ WHY ═══ */
.whys{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.why{display:flex;gap:12px;align-items:flex-start;padding:17px 16px;border-bottom:1px solid var(--line);transition:background .15s}
.why:hover{background:var(--blue-xl)}
.why:last-child{border-bottom:none}
.why-ic{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:var(--blue-l);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.why h3{font-size:15px;margin-bottom:3px;font-weight:700}
.why p{font-size:13.5px;color:var(--ink-50);line-height:1.6}

/* ═══ FAQ ═══ */
.faqs{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.faq{border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:none}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;                 /* a whole row is the tap target, not the words */
  padding:14px 16px;cursor:pointer;
  font-family:'Source Serif 4',Georgia,serif;
  font-size:14.5px;font-weight:600;color:var(--ink);
  list-style:none;transition:background .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--bg-2)}
.faq summary::after{
  content:'';width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--ink-30);
  border-bottom:2px solid var(--ink-30);
  transform:rotate(45deg);
  transition:transform .2s var(--ease);
  margin-top:-3px;
}
.faq[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.faq[open] summary{color:var(--blue)}
.faq-a{padding:0 16px 16px;font-size:14px;color:var(--ink-50);line-height:1.7}

/* ═══ LEAD ═══ */
.lead{
  background:
    radial-gradient(900px 300px at 15% 0%, rgba(255,255,255,.09), transparent 60%),
    var(--blue);
  color:#fff;padding:40px 0;
  /* Blue CTA seedhe navy footer se tikra raha tha — do gehre rang bina saans
     ke. Neeche ek gehri lakeer dono ke beech ek halka sa "seam" de deti hai,
     taaki footer achanak shuru na ho. */
  border-bottom:3px solid var(--blue-d);
}
.lead-in{display:grid;gap:24px}
.lead-say h2{color:#fff;font-size:24px;margin-bottom:8px}
.lead-say p{font-size:15px;color:#c7dbff;line-height:1.65;margin-bottom:16px}
.lead-alt{display:flex;flex-direction:column;gap:8px}
.lead-alt a{
  display:flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;color:#fff;
  padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  transition:background .18s;
}
.lead-alt a:hover{background:rgba(255,255,255,.18);color:#fff}
.lead-alt svg{flex-shrink:0}

.lead-form{
  background:#fff;
  border-radius:var(--r-lg);
  padding:22px 20px;
  box-shadow:var(--sh-lg);
  border:1px solid var(--line);
}
.lead .lead-form{border-color:transparent}
.lead-form h3{font-size:18px;margin-bottom:4px}
.lead-form-sub{font-size:13.5px;color:var(--ink-50);margin-bottom:16px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-70);margin-bottom:5px}
.field input,.field select{
  width:100%;padding:12px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  /* 16px is not a style choice: below it, iOS Safari zooms the whole page in
     when the field is tapped, and the person has to pinch back out to see the
     form they were filling. Many just leave. */
  font-size:16px;
  color:var(--ink);background:#fff;outline:none;
  min-height:46px;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.field input::placeholder{color:var(--ink-30)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lead-submit{
  width:100%;background:var(--blue);color:#fff;
  padding:15px 18px;border-radius:var(--r);
  font-size:15px;font-weight:600;
  transition:background .18s var(--ease),transform .18s var(--ease);margin-top:4px;
  /* Icon aur text ek group ke roop mein saath, center mein. Pehle display:flex
     nahi tha — icon left kinare par chipak jaata aur text alag center mein, ek
     bada gap ke saath. Ab dono ek unit. */
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.lead-submit svg{flex-shrink:0}
.lead-submit:hover{background:var(--blue-d)}
.lead-submit:active{background:var(--blue-d);transform:scale(.99)}
.lead-fine{font-size:12px;color:var(--ink-30);text-align:center;margin-top:10px;line-height:1.5}

.lead-done{
  background:var(--ok-l);border:1px solid #b7e0c8;border-radius:var(--r);
  padding:16px;display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;
  flex-wrap:wrap;
}
.lead-done svg{color:var(--ok);flex-shrink:0;margin-top:1px}
.lead-done p{font-size:14px;color:#1a6b41;line-height:1.6;flex:1;min-width:180px}
/* WhatsApp handoff button — auto-open block ho jaaye to bhi ye hamesha chalta
   hai (direct tap). Full width taaki miss na ho. */
.lead-wa-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:4px;padding:13px 18px;
  background:var(--wa);color:#fff;border-radius:var(--r-sm);
  font-size:15px;font-weight:600;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.lead-wa-btn:hover{background:var(--wa-d)}
.lead-wa-btn:active{transform:scale(.99)}
@keyframes waPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
  50%{box-shadow:0 0 0 6px rgba(37,211,102,.25)}
}
.lead-err{
  background:var(--warn-l);border:1px solid #f5c6c3;border-radius:var(--r);
  padding:13px 15px;font-size:14px;color:#a52318;margin-bottom:14px;
}

/* ═══ FOOTER ═══ */
.foot{background:var(--ink);color:#8b97a3;padding:34px 0 22px}
.foot-grid{display:grid;gap:24px;margin-bottom:24px}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.foot-desc{font-size:13.5px;line-height:1.65;color:#7a8794;max-width:340px}
.foot h4{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.07em;margin-bottom:11px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot ul a,.foot ul span{
  font-size:14px;color:#8b97a3;transition:color .15s;
  overflow-wrap:anywhere;      /* the email is 28 unbroken characters */
}
.foot ul a:hover{color:#fff}
.foot-note{font-size:12px;line-height:1.7;color:#5a6672;padding-top:18px;border-top:1px solid #1e2a36;margin-bottom:14px}
/* GSTIN + address — invoice jaisa, halka par saaf. GSTIN monospace mein taaki
   ek-ek character padha jaa sake (koi verify karega). */
.foot-reg{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#5a6672;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #1e2a36}
.foot-reg strong{color:#8b97a3;font-weight:600;font-family:'Inter',ui-monospace,monospace;letter-spacing:.02em}
.foot-bottom{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#5a6672}

/* ═══ STICKY MOBILE DOCK ═══
   On a phone the reader is one thumb away from leaving. The action follows
   them down the page. This is the highest-value element on a paid landing
   page and it costs one bar of screen. */
.dock{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:#fff;border-top:1px solid var(--line);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  box-shadow:0 -2px 16px rgba(13,27,42,.08);
}
.dock a{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:var(--r-sm);font-size:14px;font-weight:600}

/* On iOS the dock rides up with the keyboard and covers the very field being
   typed into — at the exact moment of conversion. When any field on the page
   has focus, the dock stands down. No JS needed. */
body:has(input:focus, select:focus, textarea:focus) .dock{
  transform:translateY(110%);
  pointer-events:none;
}
.dock{transition:transform .2s var(--ease)}

/* Hero mein WhatsApp aur Call ke buttons pehle se dikh rahe hote hain. Unke
   theek neeche wahi do buttons dobara dikhana sirf dohrana hai — dock ka kaam
   tab shuru hota hai jab hero scroll hokar upar chala jaaye.
   Default visible hai: JS na chale to kuch nahi tootta, bas purana behaviour
   wapas aa jaata hai. */
.dock--idle{transform:translateY(110%);pointer-events:none}
.dock a:active{transform:scale(.97)}
.dock .d-wa{background:var(--wa);color:#fff}
.dock .d-call{background:var(--blue-l);color:var(--blue)}
.dock svg{flex-shrink:0}

/* ═══════════════════ ≤ 380px ═══════════════════
   Small Androids are still common in a district town — which is exactly where
   the ads run. Two inputs side by side at this width is not a form, it is a
   puzzle. ═══════════════════ */
@media(max-width:380px){
  .wrap{padding:0 14px}
  .field-row{grid-template-columns:1fr}
  .hero h1{font-size:27px}
  .hero-price-amt{font-size:29px}
  .dock{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .dock a{font-size:13.5px;padding:11px 8px}
  .nav-call span{display:none}     /* the icon still calls */
  .nav-call{padding:0 11px}
  .plan-price{font-size:25px}
  .sec-head h2{font-size:22px}
}

/* ═══════════════════ ≥ 640px ═══════════════════ */
@media(min-width:640px){
  .wrap{padding:0 24px}
  .sec{padding:56px 0}
  .sec-head h2{font-size:28px}
  .hero h1{font-size:40px}
  .hero-sub{font-size:16.5px}
  /* 38px par ye headline se ladta tha — aur headline hi wo cheez hai jo click
     ko rok kar padhwati hai. */
  .hero-price-amt{font-size:34px}
  .hero-acts{flex-direction:row}
  /* Barabar chaude buttons ka matlab tha ki page ne khud tay nahi kiya ki
     primary kaunsa hai. Call button apne number jitna chaura ho; jo bachta hai
     wo WhatsApp le le. Isse 900-1050px viewport par overflow bhi nahi hota,
     jahan flex:1 ke saath call button tight ho jaata tha. */
  .hero-acts .btn-wa{flex:1 1 auto}
  .hero-acts .btn-line{flex:0 0 auto}
  /* timeline 640px par bhi vertical rehta hai — horizontal 900px par (neeche) */
  .plans{grid-template-columns:1fr 1fr}
  .plan{background:#fff}   /* desktop par side-by-side depth deता hai, tint nahi chahiye */
  .whys{grid-template-columns:1fr 1fr}
  .why{border-right:1px solid var(--line)}
  .why:nth-child(2n){border-right:none}
  .why:nth-last-child(-n+2){border-bottom:none}
  .lead-form{padding:24px}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .foot-bottom{flex-direction:row;justify-content:space-between}
  .foot-reg{flex-direction:row;justify-content:space-between;gap:16px}
}

/* ═══════════════════ ≥ 900px — the dock retires ═══════════════════ */
@media(min-width:900px){
  body{padding-bottom:0}
  .sec{padding:64px 0}
  /* Rhythm content ke weight se, ek metronome se nahi. Bhaari section (steps,
     pricing) poora saans le; tint waale (jo pehle se background se alag hain)
     thode kase — unhe apni gehrai background deti hai, padding nahi. */
  .sec--tint{padding:52px 0}
  .sec-head h2{font-size:31px}

  .nav-links{display:flex;gap:22px}
  .nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-50);transition:color .15s}
  .nav-links a:hover{color:var(--blue)}

  .hero-in{
    display:grid;grid-template-columns:1.1fr 1fr;gap:44px;
    align-items:start;      /* the wizard grows; the headline must not drift with it */
    padding-top:40px;padding-bottom:16px;
  }
  /* The left column has less to say than the right has to ask. Let it settle
     against the wizard's first screen rather than stretch to its last.

     Card ke muqable ye column chhota hai — ek chhoti headline ke bagal mein
     ek poora interactive widget hai. Ye is layout ki fitrat hai, bug nahi, aur
     ise content se bharna galat hai (do baar koshish karke dekh liya: dono
     baar wahi baat nikli jo neeche kisi section mein pehle se thi).
     Thoda neeche sarka dene se column latakta hua nahi, baithaya hua lagta
     hai — aur wo kaafi hai. */
  .hero-say{padding-top:36px}
  .hero h1{font-size:44px;line-height:1.14}

  /* Desktop: timeline horizontal — nodes ek line par, content neeche.
     Connector ko har step ke andar rakhne ke bajaye .steps par ek hi line —
     zyada reliable, kyunki step ke transform/stacking se nahi tootti. Line
     nodes ke peeche (z-index) rehti hai, pehle aur aakhri node se aage nahi
     nikalti. */
  .steps{flex-direction:row;gap:0;position:relative}
  .steps::before{
    content:'';position:absolute;
    top:16px;height:2px;background:#cfe0ff;
    left:calc(12.5% );right:calc(12.5%);
    transform:translateY(-1px);z-index:0;
  }
  .step{
    flex:1;flex-direction:column;gap:14px;
    padding:0 18px 0 0;
  }
  .step:last-child{padding-right:0}
  .step:not(:last-child)::before{display:none}   /* vertical line hataao */
  .step h3{padding-top:0}
  .step > div{padding-right:8px}

  .plans{grid-template-columns:repeat(3,1fr)}
  .whys{grid-template-columns:repeat(4,1fr)}
  .why{border-bottom:none}
  .why:nth-child(2n){border-right:1px solid var(--line)}
  .why:last-child{border-right:none}

  .lead-in{grid-template-columns:1fr 1fr;gap:44px;align-items:center}

  .dock{display:none}
}

/* ═══════════════════ MOTION — polish, not spectacle ═══════════════════
   Ek tax firm par log paisa aur PAN bhej rahe hain. Animation aisi honi
   chahiye jo "finish/polish" dikhaye, "tamasha" nahi. Sab kuch tez (0.5s se
   kam), subtle (chhoti doori), aur ek maqsad ke saath. Sabse neeche
   prefers-reduced-motion sab kuch band kar deta hai. */

/* 1. Scroll reveal — section screen mein aate hi halka upar khiskta hai.
   Sabse bada "modern/lively" farak, bina bachkana lage. .is-in JS lagata hai;
   JS na chale to sab kuch pehle se visible (opacity:1 default niche). */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
/* staggered children — steps, plans, whys ek ke baad ek aate hain */
.reveal-stagger > *{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal-stagger.is-in > *{opacity:1;transform:none}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:.07s}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:.14s}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:.21s}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:.28s}

/* 2. Buttons — hover par halka lift + gehri shadow. "Alive" lagta hai, uchhalta
   nahi. Sirf pointer devices par, taaki mobile par tap ajeeb na lage. */
@media(hover:hover){
  .btn-wa,.wz-next,.plan-cta a,.lead-form button{
    transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
  .plan-cta a:hover,.lead-form button:hover{
    transform:translateY(-1px);box-shadow:0 6px 18px rgba(11,92,255,.22)}
  .btn-wa:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,211,102,.28)}
  .btn-wa:active,.plan-cta a:active,.lead-form button:active{transform:translateY(0)}
}

/* 3. Nav scroll state — scroll par nav thoda kasta hai aur ek halki shadow
   leta hai, taaki wo page se "alag" tairta lage. JS .nav--scrolled lagata hai. */
.nav{transition:box-shadow .25s var(--ease),background .25s}
.nav--scrolled{box-shadow:0 1px 0 var(--line),0 6px 20px rgba(13,27,42,.06);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px)}

/* 4. Count-up — JS numbers ko 0 se chadhata hai. Yahan sirf itna ki jab tak
   count na ho, layout na hile (tabular figures se width fix). */
.countup{font-variant-numeric:tabular-nums}

/* ── The pulse is decoration, and decoration is optional ── */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* reveal ki initial hidden state ko bhi neutralise karo, warna content
     gayab reh jaata hai jab transition band ho */
  .reveal,.reveal-stagger > *{opacity:1!important;transform:none!important}
}



/* ═══════════════════════════════════════════════════════════════════
   THE WIZARD — in the hero's right column
   ───────────────────────────────────────────────────────────────────
   It used to show every question at once, which is a form, and a form
   is a thing you have to summon the will to fill in. One question at a
   time is a conversation. The person is never looking at more than they
   have been asked.

   The person who is already ready has WhatsApp and a phone number in the
   left column and never touches this. The person who is NOT ready — most
   of them — needs their case, their fee and their documents before they
   scroll past. That is what this column is for.
   ═══════════════════════════════════════════════════════════════════ */
.hero-finder-stage{width:100%;min-width:0}

.wz{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);     /* it is the interactive thing — let it lift */
  overflow:hidden;
}

/* Progress. It says "this is short" before the first question is read —
   which is most of the battle. */
.wz-top{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.wz-bar{
  flex:1;height:4px;border-radius:2px;
  background:var(--line);overflow:hidden;
}
.wz-bar-fill{
  display:block;height:100%;width:33%;
  background:var(--blue);border-radius:2px;
  transition:width .3s var(--ease);
}
.wz-count{
  font-size:11.5px;font-weight:700;
  color:var(--ink-30);white-space:nowrap;
  letter-spacing:.03em;
}

/* One step visible at a time. Hidden steps are display:none rather than
   opacity — an invisible-but-present step still takes tab focus, and a
   keyboard user would tab into a question they cannot see. */
.wz-step{display:none;padding:18px 16px}
.wz-step--on{display:block;animation:wzIn .22s var(--ease)}
@keyframes wzIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wz-tag{
  display:inline-block;
  font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-l);
  padding:3px 8px;border-radius:4px;margin-bottom:10px;
}
.wz-q{font-size:17px;font-weight:700;margin-bottom:3px;line-height:1.35}
.wz-hint{font-size:13px;color:var(--ink-30);margin-bottom:14px}

.wz-opts{
  display:grid;gap:0;margin-bottom:14px;
  /* Pehle har option apne bordered box mein tha — ek card ke andar paanch aur
     border, "boxes inside a box". Ab options ek hairline se alag hote hain,
     poora set ek halke frame mein baithta hai. Card turant halka lagta hai,
     aur ye page ka sabse zyada dekha jaane wala hissa hai. */
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.wz-opts--row{grid-template-columns:1fr 1fr}
.wz-opts--row .wz-box{border-right:1px solid var(--line-2)}
.wz-opts--row .wz-opt:nth-child(2n) .wz-box{border-right:none}

/* The native input stays — hidden, but present. Styling the label instead of
   replacing the control is the difference between a control and a picture of
   one: the keyboard, the screen reader and the tab order all keep working. */
.wz-opt{display:block;cursor:pointer}
.wz-opt input{position:absolute;opacity:0;width:0;height:0}
.wz-box{
  display:flex;flex-direction:column;gap:2px;
  justify-content:center;
  min-height:52px;                    /* thumb-sized */
  padding:12px 14px 12px 42px;
  border-bottom:1px solid var(--line-2);
  background:#fff;
  position:relative;
  transition:background .15s,box-shadow .15s;
}
.wz-opt:last-child .wz-box{border-bottom:none}
.wz-box::before{
  content:'';
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;
  border:1.5px solid var(--ink-15);
  border-radius:5px;background:#fff;
  transition:border-color .15s,background .15s;
}
.wz-opt input[type=radio] + .wz-box::before{border-radius:50%}
.wz-box::after{
  content:'';
  position:absolute;left:20px;top:50%;
  width:5px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:translateY(-60%) rotate(45deg) scale(0);
  transition:transform .15s var(--ease);
}
.wz-opt:hover .wz-box{background:var(--bg-2)}
/* Selected ab tint se dikhta hai, box se nahi — hairline layout ke saath yahi
   saaf lagta hai. Left par ek blue keel chuni hui row ko bina border ke
   ubhaar deti hai. */
.wz-opt input:checked + .wz-box{
  background:var(--blue-xl);
  box-shadow:inset 3px 0 0 var(--blue);
}
.wz-opt input:checked + .wz-box::before{background:var(--blue);border-color:var(--blue)}
.wz-opt input:checked + .wz-box::after{transform:translateY(-60%) rotate(45deg) scale(1)}
.wz-opt input:focus-visible + .wz-box{outline:2px solid var(--blue);outline-offset:-2px}
.wz-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.wz-s{font-size:12px;color:var(--ink-30);line-height:1.45}

/* ── Navigation ── */
.wz-next{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:46px;
  background:var(--blue);color:#fff;
  border-radius:var(--r-sm);
  font-size:14.5px;font-weight:600;
  transition:background .18s,opacity .18s;
}
.wz-next:hover:not(:disabled){background:var(--blue-d)}
.wz-next:active:not(:disabled){transform:scale(.99)}
/* A "next" that does nothing is worse than one that is visibly not ready */
.wz-next:disabled{background:var(--line);color:var(--ink-30);cursor:not-allowed}

.wz-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--ink-30);
  padding:6px 2px;margin-bottom:10px;
  transition:color .15s;
}
.wz-back:hover{color:var(--blue)}

/* ── The answer ── */
.wz-step--out.wz-step--on{background:var(--blue-xl)}

.wz-res-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid #d9e6ff;
  flex-wrap:wrap;
}
.wz-res-lbl{
  display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue);margin-bottom:3px;
}
.wz-res-plan{font-size:21px;font-weight:700;color:var(--ink);line-height:1.2}
.wz-res-fee{text-align:right;flex-shrink:0}
.wz-res-amt{
  display:block;
  font-family:'Source Serif 4',Georgia,serif;
  font-size:27px;font-weight:700;color:var(--blue);
  letter-spacing:-.01em;line-height:1;
}
.wz-res-from{font-size:12px;color:var(--ink-50)}
.wz-res-why{font-size:13px;color:var(--ink-50);line-height:1.65;margin-bottom:14px}

/* This is the part that removes the fear — "what will you ask me for?" */
.wz-docs{margin-bottom:14px}
.wz-docs h4{
  font-size:11px;font-weight:700;color:var(--ink-50);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;
}
/* Each document is one line. Seven of them with a sentence of help each was a
   wall — and it made this column nearly twice the height of the hero beside it.
   The help is still there; it opens on the one they are unsure about. */
.wz-docs ul{
  list-style:none;
  background:#fff;
  border:1px solid #d9e6ff;
  border-radius:var(--r-sm);
  overflow:hidden;
}
.wz-docs li{border-bottom:1px solid #eaf1ff}
.wz-docs li:last-child{border-bottom:none}

.wz-docs summary{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px 9px 30px;
  font-size:13.5px;font-weight:600;color:var(--ink);
  line-height:1.4;cursor:pointer;
  list-style:none;position:relative;
  min-height:38px;
  transition:background .15s;
}
.wz-docs summary::-webkit-details-marker{display:none}
.wz-docs summary:hover{background:var(--blue-xl)}
/* The tick */
.wz-docs summary::before{
  content:'';
  position:absolute;left:11px;top:50%;
  width:10px;height:5px;
  border-left:2px solid var(--ok);
  border-bottom:2px solid var(--ok);
  transform:translateY(-70%) rotate(-45deg);
}
/* The affordance — a hairline chevron, so it is clear there is more */
.wz-docs summary::after{
  content:'';
  margin-left:auto;flex-shrink:0;
  width:6px;height:6px;
  border-right:1.5px solid var(--ink-15);
  border-bottom:1.5px solid var(--ink-15);
  transform:rotate(45deg);
  transition:transform .18s var(--ease);
}
.wz-docs details[open] summary::after{transform:rotate(-135deg)}
.wz-docs details[open] summary{color:var(--blue)}

.wz-doc-s{
  display:block;
  padding:0 11px 10px 30px;
  font-size:12px;color:var(--ink-50);line-height:1.55;
}

.wz-go{width:100%}
.wz-fine{
  font-size:11.5px;color:var(--ink-30);
  line-height:1.6;margin-top:9px;text-align:center;
}

/* Once it wraps, the fee is no longer beside anything — right-aligning it just
   strands the number against the edge. */
@media(max-width:400px){
  .wz-res-fee{
    text-align:left;width:100%;
    display:flex;align-items:baseline;gap:7px;
    padding-top:10px;border-top:1px dashed #c9dcff;
  }
  .wz-res-amt{display:inline}
  .wz-opts--row{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   THE HERO'S TWO STATES
   ───────────────────────────────────────────────────────────────────
   Before the wizard is used, the hero makes a general promise at a
   starting price. After it, that promise is theirs: their case, their
   reason, their fee, and a WhatsApp message already written.

   Leaving it on "₹499 onwards" while the wizard beside it says "₹999"
   is the page arguing with itself — in front of somebody deciding
   whether to trust it with their Form 16.

   The two states are stacked in the same grid cell rather than
   swapped, so the column keeps the height of the taller one and
   nothing below it jumps when they change. A layout that lurches
   feels broken even when it is not.
   ═══════════════════════════════════════════════════════════════════ */
.hero-say{display:grid}
.hs-state{
  grid-area:1/1;                /* both states occupy the same cell */
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  pointer-events:none;
}
.hs-state--on{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

/* The badge that says this is now an answer, not an offer */
.hs-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ok);
  background:var(--ok-l);
  border:1px solid #b7e0c8;
  padding:5px 10px;border-radius:20px;
  margin-bottom:12px;
}
.hs-badge svg{flex-shrink:0}

/* The trust row belongs to neither state — it is true either way, and it
   anchors the column while the rest of it changes. */
.hero-say > .hero-trust{grid-area:2/1;margin-top:18px}

/* On a phone the two states stack in a single-column grid, so the cell trick
   still holds — but the wizard is below the buttons, and a person who fills it
   in has scrolled past the hero. Scroll them back to see their own answer. */
@media(prefers-reduced-motion:reduce){
  .hs-state{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════
   THE WIZARD'S HEIGHT
   ───────────────────────────────────────────────────────────────────
   The result grows with the number of documents. Somebody who ticks
   every income source gets seven of them, and the column runs to twice
   the height of the hero — which leaves the hero floating in a hole,
   and pushes the fold down past everything that matters.

   Collapsing the help text did most of it. This does the rest: the
   result scrolls inside the card rather than stretching it.

   Only on desktop. On a phone the two are stacked, there is no column
   to match, and an inner scroll area inside a page that already
   scrolls is a trap — you swipe, and the wrong thing moves.
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:900px){
  .wz-step--out.wz-step--on{
    display:flex;flex-direction:column;
    max-height:480px;
  }
  /* The document list is the part that grows, so it is the part that scrolls.
     The case, the fee and the WhatsApp button stay pinned in view — a person
     should never have to scroll to find the thing they came to press. */
  .wz-docs{
    flex:1;min-height:0;
    display:flex;flex-direction:column;
    margin-bottom:12px;
  }
  .wz-docs ul{
    overflow-y:auto;
    scrollbar-width:thin;
  }
  .wz-docs ul::-webkit-scrollbar{width:5px}
  .wz-docs ul::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .wz-docs ul::-webkit-scrollbar-track{background:transparent}

  .wz-go{flex-shrink:0}
}