/* ============================================================
   CancelUPIAutoPay — design tokens + site styles

   Tokens upar, styles neeche — ek hi file me. Do files (@import ya
   doosra <link>) matlab ek aur network round-trip, jo mobile pe LCP
   seedha badha deta hai.

   Font: Inter (variable, Google Fonts se) — head me load hoti hai,
   display=swap ke saath, isliye text kabhi block nahi hota.

   Blue primary + red SIRF stop/cancel ke liye. Red ko bachaya hai
   taaki uska matlab bacha rahe: page pe jo laal hai, wo sach me
   rokne wali cheez hai.
   ============================================================ */

:root {
  /* --- brand --- */
  --primary:        #2563EB;
  --primary-hover:  #1D4ED8;
  --primary-active: #1E40AF;
  --primary-soft:   #EFF6FF;
  --primary-soft-2: #DBEAFE;
  --primary-border: #BFDBFE;
  --on-primary:     #FFFFFF;

  /* Gradient primary buttons + CTA band ke liye */
  --grad-a: #3B82F6;
  --grad-b: #2563EB;
  --grad-c: #1D4ED8;

  /* --- stop / danger — sirf cancel actions aur warnings --- */
  --stop:        #D92D20;
  --stop-soft:   #FEF3F2;
  --stop-border: #FECDCA;

  --success:      #067647;
  --success-soft: #ECFDF3;
  --success-border: #ABEFC6;

  --warning:        #B54708;
  --warning-soft:   #FFFAEB;
  --warning-border: #FEDF89;

  /* --- neutrals --- */
  --ink:       #0B1220;
  --body:      #475467;
  --muted:     #667085;
  --border:    #E4E7EC;
  --border-2:  #D0D5DD;
  --surface:   #F8FAFC;
  --surface-2: #F1F5F9;
  --bg:        #FFFFFF;

  /* --- footer hamesha dark navy — light aur dark dono scheme me.
         Premium look deta hai aur page ka end saaf dikhata hai. --- */
  --footer-bg:     #0A1428;
  --footer-ink:    #E8EDF6;
  --footer-body:   #93A2BE;
  --footer-muted:  #64748F;
  --footer-border: rgba(255, 255, 255, .09);

  /* --- layout --- */
  --w-text: 720px;
  --w-wide: 1140px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows me halka blue tint — pure black shadows dirty lagti hain */
  --shadow-xs: 0 1px 2px rgba(16, 30, 70, .06);
  --shadow:    0 2px 10px rgba(16, 30, 70, .07);
  --shadow-md: 0 10px 30px -6px rgba(16, 30, 70, .14);
  --shadow-lg: 0 24px 60px -12px rgba(16, 30, 70, .22);
  --shadow-btn: 0 1px 2px rgba(29, 78, 216, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
  --ring: 0 0 0 4px var(--primary-soft-2);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Noto Sans", "Noto Sans Devanagari", "Noto Sans Gujarati",
          "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Telugu",
          "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Oriya",
          "Noto Sans Gurmukhi", "Noto Nastaliq Urdu", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary:        #60A5FA;
    --primary-hover:  #93C5FD;
    --primary-active: #BFDBFE;
    --primary-soft:   #10203D;
    --primary-soft-2: #16294B;
    --primary-border: #1E3A5F;
    --on-primary:     #06152E;

    --grad-a: #7CB5FD;
    --grad-b: #60A5FA;
    --grad-c: #3B82F6;

    --stop:        #FF8A80;
    --stop-soft:   #2B1513;
    --stop-border: #5C2622;

    --success:      #4ADE80;
    --success-soft: #0D2318;
    --success-border: #1D4A2E;

    --warning:        #FDB022;
    --warning-soft:   #2B2010;
    --warning-border: #4A3712;

    --ink:       #EEF1F6;
    --body:      #B2BAC6;
    --muted:     #8A93A1;
    --border:    #222833;
    --border-2:  #313945;
    --surface:   #141922;
    --surface-2: #1A202A;
    --bg:        #0B0F16;

    --footer-bg:     #070B12;
    --footer-border: rgba(255, 255, 255, .07);

    --shadow-xs: none;
    --shadow:    none;
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, .12);
  }
}

/* ================================ base ================================ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 16.5px/1.7 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Safety net: koi bhi element side se bahar jhaanke to page horizontally
     scroll na ho. Asli causes bhi neeche fix hain — ye aakhri deewar hai. */
  overflow-x: clip;
}

/* CLS rokne ke liye: har image pe width/height attribute bhi do */
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

/* Lambe words/URLs chhoti screen pe layout na todein */
p, li, h1, h2, h3, h4, summary { overflow-wrap: break-word; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; margin: 0; letter-spacing: -0.028em; font-weight: 750; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.45rem, 3.4vw, 2rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.014em; font-weight: 700; }

p { margin: 0 0 1rem; }

/* Sticky header ke neeche anchors chhup na jayein */
[id] { scroll-margin-top: 92px; }

.wrap      { max-width: var(--w-wide); margin: 0 auto; padding: 0 22px; }
.wrap-text { max-width: var(--w-text); margin: 0 auto; padding: 0 22px; }

.muted  { color: var(--muted); }
.small  { font-size: .875rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 10px; left: 10px; width: auto; height: auto;
  clip: auto; z-index: 200; padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--on-primary); font-weight: 600;
}

/* Keyboard users ko focus ring dikhe, mouse users ko nahi */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ================================ buttons ============================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.008em;
  text-decoration: none; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .16s ease, transform .1s ease, filter .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; width: 17px; height: 17px; }

.btn-primary {
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  color: var(--on-primary);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--grad-b), var(--grad-c));
  color: var(--on-primary);
  box-shadow: var(--shadow-btn), 0 6px 16px -4px rgba(29, 78, 216, .45);
  transform: translateY(-1px);
}
.btn-primary:focus-visible { box-shadow: var(--ring); outline: none; }

.btn-outline { background: var(--bg); color: var(--ink); border-color: var(--border-2); box-shadow: var(--shadow-xs); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.btn-ghost { background: transparent; color: var(--body); font-weight: 500; }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

/* CTA band ke andar — white button on blue */
.btn-inverse { background: #fff; color: #1D4ED8; box-shadow: 0 2px 10px rgba(4, 16, 48, .3); }
.btn-inverse:hover { background: #EFF6FF; color: #1E40AF; transform: translateY(-1px); }

/* Sirf asli "cancel / stop" actions ke liye. Download CTA pe kabhi nahi. */
.btn-stop { background: var(--stop); color: #fff; }

.btn-sm { padding: 8px 15px; font-size: .87rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; border-radius: var(--radius); }

/* ================================= header ============================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(1.8) blur(12px);
  -webkit-backdrop-filter: saturate(1.8) blur(12px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } }

.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 68px; flex-wrap: wrap;
}

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.04rem; color: var(--ink);
  text-decoration: none; letter-spacing: -0.04em;
}
.logo:hover { color: var(--ink); }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-c));
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-xs);
}
.logo-mark svg { width: 16px; height: 16px; }
/* Asli app-icon image wala mark — apna hi rounded blue square hai,
   isliye humara gradient background double-frame bana deta */
.logo-mark--img { background: none; box-shadow: none; }
.logo-mark--img img { width: 100%; height: 100%; border-radius: 8px; }
.logo em { font-style: normal; color: var(--primary); }

.site-nav { display: flex; gap: 2px; margin-left: auto; }
.site-nav a {
  padding: 8px 13px; border-radius: var(--radius-sm); font-size: .92rem;
  font-weight: 500; color: var(--body); text-decoration: none;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--primary); font-weight: 600; background: var(--primary-soft); }

.header-actions { display: flex; align-items: center; gap: 10px; }

@media (max-width: 860px) {
  .header-inner { min-height: 58px; gap: 12px; }
  .logo { font-size: .95rem; }
  .site-nav { order: 3; width: 100%; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: 7px 11px; font-size: .88rem; white-space: nowrap; }
  .header-actions { margin-left: auto; }
  /* Nav neeche wrap hota hai to sticky header lamba ho jaata hai —
     anchors ko usse zyada margin chahiye warna heading chhup jaati hai */
  [id] { scroll-margin-top: 120px; }
}

@media (max-width: 420px) {
  .logo { font-size: .86rem; gap: 8px; }
  .logo-mark { width: 28px; height: 28px; border-radius: 8px; }
  .logo-mark svg { width: 14px; height: 14px; }
  .header-actions .btn { padding: 7px 11px; font-size: .78rem; gap: 6px; }
  .header-actions .btn svg { width: 14px; height: 14px; }
}

/* ================================== hero ==============================
   Do column: baayein copy, daayein phone mockup. Mockup me wahi dikhta
   hai jo product karta hai — mandates ki list aur ek cancel hota hua.
   ===================================================================== */
.hero {
  position: relative;
  padding: 72px 0 64px;
  overflow: hidden;
  background:
    radial-gradient(46% 60% at 78% 12%, var(--primary-soft) 0%, transparent 70%),
    radial-gradient(38% 52% at 8% 88%, var(--primary-soft) 0%, transparent 72%);
}
/* Halki dot-grid — texture deti hai, dhyan nahi kheenchti */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--primary) 16%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(60% 55% at 70% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 55% at 70% 30%, #000 0%, transparent 75%);
}

.hero-grid {
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 48px;
}

.hero-copy { max-width: 560px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px; padding: 7px 15px; border-radius: 999px;
  background: var(--bg); color: var(--primary);
  border: 1px solid var(--primary-border);
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: var(--shadow-xs);
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none;
  box-shadow: 0 0 0 3px var(--success-soft); }

.hero h1 { margin-bottom: 18px; }
.hero-sub { font-size: 1.13rem; line-height: 1.65; color: var(--body); margin: 0 0 30px; max-width: 520px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-checks {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 24px 0 0; padding: 0; font-size: .88rem; color: var(--muted);
}
.hero-checks li { display: inline-flex; align-items: center; gap: 7px; }
.hero-checks svg { width: 15px; height: 15px; color: var(--success); flex: none; }

/* ------------------------------ phone mockup ------------------------- */
.hero-visual { position: relative; justify-self: center; width: min(360px, 100%); }

.phone {
  position: relative; z-index: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
}
.phone-screen {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.phone-top {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 17px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: .9rem; font-weight: 700; color: var(--ink);
}
.phone-top .logo-mark { width: 26px; height: 26px; border-radius: 8px; }
.phone-top .logo-mark svg { width: 13px; height: 13px; }
.phone-count {
  margin-left: auto;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--primary-border);
  padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}

.mandates { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; }
.mandate {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 13px;
}
/* Soft-tinted circle — solid clipart square se zyada asli app jaisa */
.m-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: .9rem; font-weight: 800;
  color: var(--a, var(--primary));
  background: color-mix(in srgb, var(--a, var(--primary)) 13%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--a, var(--primary)) 28%, var(--bg));
}
.m-info { min-width: 0; display: flex; flex-direction: column; }
.m-info strong { font-size: .88rem; color: var(--ink); font-weight: 650; letter-spacing: -0.01em; }
.m-info small { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.m-amt { margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.m-chip {
  margin-left: auto; flex: none;
  font-size: .7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--stop-soft); color: var(--stop);
  border: 1px solid var(--stop-border);
}
.mandate.is-cancelled { opacity: .92; border-style: dashed; }
.mandate.is-cancelled .m-info strong { text-decoration: line-through; color: var(--muted); }
.mandate.is-cancelled .m-avatar { filter: grayscale(1); opacity: .55; }

.phone-toast {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 10px 12px; padding: 10px 13px;
  background: var(--success-soft); border: 1px solid var(--success-border);
  border-radius: var(--radius);
  font-size: .8rem; font-weight: 650; color: var(--success);
}
.phone-toast svg { width: 16px; height: 16px; flex: none; }

/* Floating cards — mockup ke aage-peeche depth */
.float-card {
  position: absolute; z-index: 2;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: floaty 6s ease-in-out infinite alternate;
}
/* Alert phone ke BAHAR corner pe baithta hai — content ke upar nahi.
   Pehle ye title aur amounts dhak deta tha, tabhi mockup toota lagta tha. */
.float-alert {
  top: -34px; right: -54px; width: 192px;
  padding: 11px 13px;
  animation-delay: -2s;
}
.float-alert .fa-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.fa-icon {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: var(--stop-soft); color: var(--stop);
  display: grid; place-items: center;
}
.fa-icon svg { width: 14px; height: 14px; }
.fa-title { font-size: .76rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.fa-time { font-size: .68rem; color: var(--muted); }
/* Do line ke baad kaat do — asli notification bhi truncate hoti hai,
   aur chhota card content ke upar nahi chadhta */
.fa-body {
  margin: 0; font-size: .74rem; line-height: 1.45; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fa-amt { color: var(--stop); font-weight: 750; }

/* Haath se likha margin note + arrow — cancelled row ki taraf.
   Mobile pe phone ke neeche seedha aa jaata hai (arrow chhup jaata hai). */
.hand-note {
  margin: 14px auto 0; text-align: center;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  color: var(--ink);
}
.hn-amt { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.hand-note small {
  font-size: .85rem; color: var(--muted); font-weight: 400; margin-left: 6px;
}
.hn-arrow { display: none; }

@media (min-width: 1100px) {
  .hand-note {
    position: absolute; z-index: 2;
    left: -128px; bottom: 108px; width: 112px;
    margin: 0; text-align: right;
  }
  .hn-amt { display: block; font-size: 1.2rem; }
  .hand-note small { display: block; margin: 2px 0 0; }
  .hn-arrow {
    display: block; position: absolute;
    right: -66px; top: 30px; width: 62px;
    color: var(--primary); opacity: .55;
  }
}

@keyframes floaty {
  from { transform: translateY(-4px); }
  to   { transform: translateY(5px); }
}

@media (max-width: 960px) {
  .hero { padding: 52px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { max-width: 620px; margin: 0 auto; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-actions, .hero-checks { justify-content: center; }
  .hero-visual { width: min(330px, calc(100% - 30px)); }
  /* Stack hone pe side me jagah nahi — alert ko frame ke corner pe tucked
     rakho, bas thoda sa bahar */
  .float-alert { top: -22px; right: -12px; width: 176px; }
}

/* ------------------------------- trust bar --------------------------- */
.trust {
  position: relative;
  margin-top: 58px; padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  justify-content: center;
}
.trust-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  width: 100%; text-align: center; margin-bottom: 2px;
}
.trust-chip {
  padding: 7px 16px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 600; color: var(--body);
  box-shadow: var(--shadow-xs);
}

/* =============================== sections ============================= */
.section { padding: 72px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }

.eyebrow {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary);
  background: var(--primary-soft); border: 1px solid var(--primary-border);
  padding: 5px 13px; border-radius: 999px;
  margin-bottom: 14px;
}

.section-head { max-width: 680px; margin: 0 auto 42px; text-align: center; }
.section-head p { margin: 13px auto 0; color: var(--muted); font-size: 1.05rem; max-width: 560px; }

.grid { display: grid; gap: 18px; }
/* min(Npx, 100%) zaroori hai: bina iske 320px phone pe (container ~276px)
   column ka minimum 310px container se bada ho jaata hai aur poora page
   horizontally scroll hone lagta hai. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }

/* ================================= cards ============================== */
.card {
  position: relative;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px;
  /* overflow zaroori hai: hover wali accent line seedhi hai, corners
     nahi jaanti — card ka apna radius use clip karta hai. Bina iske
     line rounded corners ke bahar jhaankti thi. */
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card::after {
  /* hover pe upar ek patli accent line */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-c));
  opacity: 0; transition: opacity .18s ease;
}
.card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card:hover::after { opacity: 1; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .95rem; margin-bottom: 0; }

.card-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 17px;
  background: linear-gradient(135deg, var(--primary-soft), var(--primary-soft-2));
  border: 1px solid var(--primary-border);
  color: var(--primary);
  display: grid; place-items: center;
}
.card-icon svg { width: 22px; height: 22px; }
.card-icon.is-stop {
  background: linear-gradient(135deg, var(--stop-soft), var(--stop-soft));
  border-color: var(--stop-border); color: var(--stop);
}
.card-icon.is-warn {
  background: linear-gradient(135deg, var(--warning-soft), var(--warning-soft));
  border-color: var(--warning-border); color: var(--warning);
}

/* ================================= steps ==============================
   Desktop pe teeno steps ke beech ek connector line chalti hai —
   numbers us line ke upar baithte hain.
   ===================================================================== */
.steps-grid { position: relative; }

.step {
  position: relative;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.step:hover { border-color: var(--primary-border); box-shadow: var(--shadow); }
.step-num {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-c));
  color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
  box-shadow: var(--shadow-btn);
}
.step h3 { margin-bottom: 9px; }
.step p { font-size: .93rem; margin-bottom: 0; }

@media (min-width: 900px) {
  .steps-grid::before {
    content: ""; position: absolute; top: 45px; left: 8%; right: 8%;
    border-top: 2px dashed var(--primary-border);
  }
  .steps-grid .step { z-index: 1; }
}

/* =============================== stat strip =========================== */
.stats {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 30px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl); background: var(--bg);
  box-shadow: var(--shadow);
  margin-top: -34px;              /* hero ke upar halka overlap */
  position: relative; z-index: 2;
}
.stat { text-align: center; position: relative; }
/* columns ke beech patli divider — sirf jab side by side hon */
@media (min-width: 700px) {
  .stat + .stat::before {
    content: ""; position: absolute; left: -11px; top: 12%; bottom: 12%;
    border-left: 1px solid var(--border);
  }
}
.stat-value {
  display: block; font-size: 1.9rem; font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.12;
  background: linear-gradient(135deg, var(--ink) 40%, var(--primary));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat-label { display: block; font-size: .84rem; color: var(--muted); margin-top: 6px; }

/* ============================== link panel ============================ */
.link-panel {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 4px 22px 10px; background: var(--bg);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.link-panel:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.link-panel > h3 {
  display: flex; align-items: center; gap: 9px;
  padding: 18px 0 14px; margin: 0;
  border-bottom: 1px solid var(--border); font-size: 1rem;
}
.link-panel > h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-c));
}
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-bottom: 1px solid var(--border); }
.link-list li:last-child { border-bottom: 0; }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 4px; margin: 0 -4px; border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: .96rem;
  transition: color .15s ease;
}
.link-list a:hover { color: var(--primary); }
.link-list a::after {
  content: "→"; color: var(--muted); font-weight: 400; flex: none;
  transition: transform .16s ease, color .16s ease;
}
.link-list a:hover::after { color: var(--primary); transform: translateX(4px); }
.link-list .lt { display: flex; flex-direction: column; min-width: 0; }
.link-list .ls { color: var(--muted); font-size: .85rem; font-weight: 400; margin-top: 2px; }

/* ============================= app CTA banner =========================
   Yahi block har article ke Markdown me bhi aata hai (2 baar per post),
   isliye ise theme ke saath match karna zaroori hai.
   ===================================================================== */
.app-cta {
  background: linear-gradient(135deg, var(--primary-soft), var(--bg) 65%);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-lg); padding: 26px; margin: 36px 0;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.app-cta-text { flex: 1 1 260px; min-width: 0; }
.app-cta p { margin: 0; }
.app-cta p:first-child { color: var(--ink); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.015em; }
.app-cta p + p { margin-top: 6px; color: var(--body); font-size: .93rem; }
.app-cta .btn { flex: none; }

/* ================================ notices ============================= */
.notice {
  border: 1px solid var(--warning-border); border-left: 3px solid var(--warning);
  background: var(--warning-soft); color: var(--ink);
  border-radius: var(--radius-sm); padding: 17px 19px; margin: 26px 0;
  font-size: .94rem;
}
.notice strong { display: block; margin-bottom: 5px; }
.notice.is-danger { border-color: var(--stop-border); border-left-color: var(--stop); background: var(--stop-soft); }
.notice.is-info   { border-color: var(--primary-border); border-left-color: var(--primary); background: var(--primary-soft); }

/* =============================== CTA band =============================
   Aakhri section — deep blue gradient, white button. Page ka sabse
   zyada convert karne wala block, isliye sabse zyada contrast yahin.
   ===================================================================== */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 120% at 15% 0%, rgba(255, 255, 255, .14) 0%, transparent 55%),
    linear-gradient(135deg, #1E40AF, #1D4ED8 45%, #2563EB);
  border-radius: var(--radius-xl);
  padding: 60px 30px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 90% at 50% 0%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000 0%, transparent 80%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .85); font-size: 1.05rem; margin: 13px auto 26px; max-width: 480px; }
.cta-band .cta-note { font-size: .82rem; color: rgba(255, 255, 255, .6); }

/* ============================== page hero =============================
   Chhota hero andar ke pages (blog index waghera) ke liye.
   ===================================================================== */
.page-hero {
  padding: 56px 0 44px; text-align: center;
  background: radial-gradient(60% 100% at 50% 0%, var(--primary-soft) 0%, transparent 72%);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.page-hero p { margin: 12px auto 0; color: var(--muted); font-size: 1.05rem; max-width: 520px; }

/* ======================== blog language selector ====================== */
.blog-langs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 32px;
}
.blog-lang {
  padding: 7px 16px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: .86rem; font-weight: 600; color: var(--body);
  text-decoration: none; box-shadow: var(--shadow-xs);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.blog-lang:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.blog-lang.is-current {
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  border-color: transparent; color: var(--on-primary);
  box-shadow: var(--shadow-btn);
}
.blog-lang.is-current:hover { color: var(--on-primary); }

@media (max-width: 640px) {
  .blog-langs { gap: 6px; margin-bottom: 26px; }
  .blog-lang { padding: 6px 13px; font-size: .8rem; }
}

/* =============================== blog cards =========================== */
/* auto-fill (auto-fit nahi): 2 hi posts hon to bhi wo poori width pe
   khich ke ajeeb chaude nahi hote — grid 3 tracks rakhta hai aur cards
   apni sahi width pe rehte hain. min() guard chhote phones ke liye. */
.post-grid {
  align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.post-card {
  display: flex; flex-direction: column;
  min-width: 0;
  text-decoration: none; color: inherit;
}
.post-card h2 {
  font-size: 1.18rem; line-height: 1.35; margin: 0 0 10px;
  transition: color .15s ease;
}
.post-card:hover h2 { color: var(--primary); }
.post-card > p { font-size: .93rem; color: var(--body); margin: 0 0 18px; }

.post-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 13px;
}
.post-cat {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--primary);
  background: var(--primary-soft); border: 1px solid var(--primary-border);
  padding: 4px 11px; border-radius: 999px;
  /* Chip hamesha ek line — lambi category card se bahar na jaye,
     ellipsis lag jaye */
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.post-date { font-size: .8rem; color: var(--muted); white-space: nowrap; }

.post-more {
  margin-top: auto;
  font-size: .9rem; font-weight: 650; color: var(--primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.post-more span { transition: transform .16s ease; }
.post-card:hover .post-more span { transform: translateX(4px); }

/* ================================ article ============================= */
.article { padding: 42px 0 64px; }

.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.article-meta {
  color: var(--muted); font-size: .85rem;
  margin: 14px 0 32px; padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.prose h2 { margin: 44px 0 15px; }
.prose h3 { margin: 30px 0 10px; }
.prose ul, .prose ol { margin: 0 0 17px; padding-left: 24px; }
.prose li { margin: 7px 0; }
.prose li::marker { color: var(--primary); font-weight: 600; }
.prose strong { color: var(--ink); font-weight: 650; }

.prose blockquote {
  margin: 26px 0; padding: 18px 22px;
  border: 1px solid var(--primary-border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm); background: var(--primary-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Wide content apne container me scroll kare — page ka body kabhi
   horizontally scroll nahi hona chahiye */
.table-scroll { overflow-x: auto; margin: 22px 0; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
th { background: var(--surface); color: var(--ink); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }

/* =============================== accordion ============================ */
details {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin: 10px 0; background: var(--bg);
  transition: border-color .16s ease, box-shadow .16s ease;
}
details:hover { border-color: var(--border-2); }
details[open] { border-color: var(--primary-border); box-shadow: var(--shadow-xs); }

summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
  padding: 17px 20px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; flex: none;
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600; line-height: 1;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
details[open] summary::after {
  content: "−"; background: var(--primary-soft); color: var(--primary);
  transform: rotate(180deg);
}
details p { margin: 0; padding: 0 20px 18px; font-size: .95rem; }

/* ================================= RTL ================================
   Urdu/Sindhi pages dir="rtl" ke saath aate hain. Browser text khud
   palat deta hai — yahan sirf wo cheezein jo physical left/right use
   karti hain.
   ===================================================================== */
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding: 0 24px 0 0; }
[dir="rtl"] .prose blockquote {
  border-left-width: 1px; border-right: 3px solid var(--primary);
}
[dir="rtl"] .notice { border-left-width: 1px; border-right: 3px solid var(--warning); }
[dir="rtl"] .notice.is-danger { border-right-color: var(--stop); }
[dir="rtl"] .notice.is-info { border-right-color: var(--primary); }

/* ============================== legal pages =========================== */
.legal { padding: 44px 0 72px; }
.legal h1 { margin-bottom: 10px; }
.legal .updated {
  color: var(--muted); font-size: .875rem;
  padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--border);
}
.legal h2 { margin: 40px 0 13px; font-size: 1.28rem; }
.legal h3 { margin: 26px 0 9px; font-size: 1.05rem; }
.legal ul { padding-left: 24px; margin: 0 0 17px; }
.legal li { margin: 8px 0; }

/* ================================ footer ==============================
   Dark navy — light aur dark dono scheme me. Tokens upar :root me hain.
   ===================================================================== */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-body);
  margin-top: 80px; padding: 58px 0 32px;
}
.site-footer .logo { color: #fff; }
.site-footer .logo:hover { color: #fff; }
.site-footer .logo em { color: #7CB5FD; }
.site-footer .logo-mark { box-shadow: none; }

.footer-grid {
  display: grid; gap: 36px;
  grid-template-columns: minmax(230px, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 40px;
}
/* Upar wali template ka minimum 230+140+gap = 404px hai — har phone se
   zyada. Isliye mobile pe explicit 2-column layout, about full width. */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer-about { grid-column: 1 / -1; }
}
.footer-about p { font-size: .9rem; color: var(--footer-body); margin: 15px 0 20px; max-width: 320px; line-height: 1.65; }

.site-footer .btn-outline {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
}
.site-footer .btn-outline:hover { border-color: #7CB5FD; color: #7CB5FD; background: rgba(96, 165, 250, .08); }

.footer-col h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--footer-muted); margin-bottom: 14px; font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 10px 0; }
.footer-col a { color: var(--footer-body); text-decoration: none; font-size: .9rem; transition: color .15s ease; }
.footer-col a:hover { color: #fff; }

.footer-langs { border-top: 1px solid var(--footer-border); padding-top: 24px; margin-bottom: 24px; }
.footer-langs h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--footer-muted); margin-bottom: 12px; font-weight: 700;
}
.lang-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lang-links a { font-size: .87rem; color: var(--footer-body); text-decoration: none; }
.lang-links a:hover { color: #fff; }
.lang-links a[aria-current="true"] { color: #7CB5FD; font-weight: 600; }

.footer-disclaimer {
  font-size: .79rem; color: var(--footer-muted); line-height: 1.7;
  margin-bottom: 22px; max-width: 780px;
  border-top: 1px solid var(--footer-border); padding-top: 24px;
}

.footer-bottom {
  border-top: 1px solid var(--footer-border); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .83rem; color: var(--footer-muted);
}

/* ============================== responsive ============================ */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap, .wrap-text { padding: 0 18px; }
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head p { font-size: .97rem; }
  .grid { gap: 14px; }
  .card, .step { padding: 20px; }
  .app-cta { padding: 20px; gap: 16px; }
  .stats { margin-top: 0; padding: 22px 18px; gap: 18px; }
  .stat-value { font-size: 1.55rem; }
  .cta-band { padding: 44px 20px; border-radius: var(--radius-lg); }
  .page-hero { padding: 42px 0 34px; }
  .site-footer { padding: 44px 0 26px; margin-top: 56px; }
  .trust { margin-top: 42px; padding-top: 22px; }
  .trust-chip { padding: 6px 13px; font-size: .8rem; }
  .article { padding: 32px 0 52px; }
  .prose h2 { margin: 36px 0 13px; }
  .hero-sub { font-size: 1.03rem; }
  .link-panel { padding: 2px 17px 6px; }

  /* Blog cards phone pe */
  .post-card h2 { font-size: 1.08rem; }
  .post-card > p { font-size: .9rem; margin-bottom: 14px; }
  .post-meta { gap: 8px; margin-bottom: 10px; }
  .post-cat { font-size: .68rem; padding: 3px 9px; }
}

/* Chhote phones: buttons full-width — angutha kahin bhi lage, dab jaye.
   Mockup ke floating cards ko andar kheencho taaki kate nahi. */
@media (max-width: 520px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .app-cta .btn { width: 100%; }

  .hero-visual { width: min(300px, 100%); }
  .float-alert { width: 168px; top: -16px; right: -4px; padding: 10px 12px; }
  .float-alert .fa-body { font-size: .71rem; }

  .footer-bottom { flex-direction: column; gap: 6px; }
}

/* ======================= home — human touches ========================
   Sirf home page. Template-perfect symmetry ko jaan bujh ke toda hai:
   hand-drawn underline, tilted cards, editorial split, ghost numbers.
   Baaki pages ke shared classes yahan touch nahi hote.
   ===================================================================== */

/* Pill-badge ki jagah seedha chhota label — kam "template" lagta hai */
.kicker {
  display: block;
  font-size: .76rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: 12px;
}

/* h1 ke aakhri words: serif italic + haath se khinchi squiggle underline */
.hl {
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -0.01em;
  padding-bottom: .16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q 18 2 36 6 T 72 6 T 108 4' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
    0 100% / 100% .4em no-repeat;
}
@media (prefers-color-scheme: dark) {
  .hl {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 Q 18 2 36 6 T 72 6 T 108 4' fill='none' stroke='%2360A5FA' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* Copy se phone ki taraf dotted haath-wala arrow — sirf desktop pe */
.hero-copy { position: relative; }
.hero-arrow { display: none; }
@media (min-width: 1020px) {
  .hero-arrow {
    display: block; position: absolute;
    right: -84px; bottom: 6px; width: 108px;
    color: var(--primary); opacity: .45;
    pointer-events: none;
  }
}

/* Halka tilt — haath se rakhe hue lagte hain */
.float-alert { rotate: 3deg; }
.phone { rotate: -1.4deg; }

/* Stats: dashboard-tile box hata ke seedhi editorial line */
.stats-row {
  display: flex; flex-wrap: wrap; gap: 16px 48px;
  justify-content: space-between;
  padding: 24px 4px;
  border-top: 1px dashed var(--border-2);
  border-bottom: 1px dashed var(--border-2);
}
.stat-h { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.stat-v {
  font-size: 1.65rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--primary);
}
.stat-l { font-size: .88rem; color: var(--muted); }
@media (max-width: 700px) {
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .stat-v { font-size: 1.35rem; }
}

/* Problem section: heading baayein, list daayein — cards ka grid nahi */
.prob-split {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 24px 72px;
}
.prob-intro h2 { margin-bottom: 12px; }
.prob-intro p { color: var(--muted); font-size: 1.02rem; margin: 0; max-width: 380px; }

.prob-list { list-style: none; margin: 0; padding: 0; }
.prob-list li { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px dashed var(--border-2); }
.prob-list li:first-child { padding-top: 4px; }
.prob-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.prob-list h3 { margin-bottom: 6px; }
.prob-list p { margin: 0; font-size: .95rem; }

.pl-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none; margin-top: 2px;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--primary-border);
  display: grid; place-items: center;
}
.pl-icon svg { width: 21px; height: 21px; }
.pl-icon.is-stop { background: var(--stop-soft); border-color: var(--stop-border); color: var(--stop); }
.pl-icon.is-warn { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }

@media (max-width: 900px) {
  .prob-split { grid-template-columns: 1fr; gap: 10px; }
  .prob-intro p { max-width: none; }
}

/* Steps: boxed cards ki jagah ghost serif numbers + left rule */
.steps-human.steps-grid::before { content: none; }
.steps-human .step {
  background: transparent; border: 0; border-radius: 0;
  border-left: 2px solid var(--primary-border);
  padding: 4px 8px 4px 20px;
}
.steps-human .step:hover { box-shadow: none; border-left-color: var(--primary); }
.steps-human .step-num {
  width: auto; height: auto; display: block;
  background: none; box-shadow: none;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: var(--primary); opacity: .85;
  margin-bottom: 10px;
}

/* Kuch headings left — har section ka center-center hona hi template hai */
.section-head.is-left { text-align: left; margin-left: 0; }
.section-head.is-left p { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}