/* ═══════════════════════════════════════════════════════════
   E-Rickshaw Yojana — Design System
   Layers: reset -> tokens -> base -> layout -> components -> ads -> utils
   @layer se specificity wars nahi hoti.
   ═══════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, components, ads, utils;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; }
  img, picture, video, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  ul, ol { list-style: none; padding: 0; }
  :target { scroll-margin-block: 5ex; }
}

@layer tokens {
  :root {
    /* ⚠ Site LIGHT-ONLY hai. Bina iske browser dark mode par form controls,
       scrollbar, aur link default colors UA dark theme se render karta hai —
       jabki hamara background #fff hi rehta hai. Nateeja: adha light, adha
       dark — user "dark mode mein dikh rahi hai" report karta hai.
       "light" (na ki "light dark") kehta hai: sirf light UA theme use karo. */
    color-scheme: light;

    /* Green + saffron. NOTE: Ashoka emblem / tricolour graphics NAHI — legal. */
    --green-900:#0d4a2d; --green-800:#135c38; --green-700:#1a7a4c;
    --green-600:#228a57; --green-500:#2e9e63; --green-200:#b9e2cb;
    --green-100:#e6f4ec; --green-50:#f2faf6;

    --saffron-600:#d97706; --saffron-500:#f59e0b; --saffron-100:#fef3c7;

    --ink-900:#111827; --ink-800:#1f2937; --ink-700:#374151;
    --ink-600:#4b5563; --ink-500:#6b7280; --ink-300:#d1d5db;
    --ink-200:#e5e7eb; --ink-100:#f3f4f6; --ink-50:#f9fafb;

    --success:#16a34a; --warning:#ea580c; --error:#dc2626; --info:#2563eb;

    --bg:#fff; --bg-subtle:var(--ink-50);
    --text:var(--ink-800); --text-muted:var(--ink-500); --text-strong:var(--ink-900);
    --border:var(--ink-200); --brand:var(--green-700); --brand-hover:var(--green-800);

    --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-head:'Poppins',var(--font-sans);

    --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem;
    --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:1.875rem; --fs-4xl:2.25rem;

    --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
    --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;

    --w-page:1200px; --w-read:680px; --w-sidebar:300px;
    --radius:8px; --radius-sm:6px; --radius-lg:12px;
    --shadow-sm:0 1px 2px rgba(17,24,39,.06);
    --shadow:0 1px 3px rgba(17,24,39,.08),0 1px 2px rgba(17,24,39,.04);
    --shadow-md:0 4px 12px rgba(17,24,39,.08);
    --header-h:60px;
  }
}

@layer base {
  html { font-family:var(--font-sans); scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  }

  body { background:var(--bg); color:var(--text); font-size:var(--fs-base); line-height:1.65; min-height:100vh; }

  h1,h2,h3,h4 { font-family:var(--font-head); color:var(--text-strong); line-height:1.25; text-wrap:balance; font-weight:700; }
  h1 { font-size:clamp(1.65rem,4.5vw,var(--fs-4xl)); letter-spacing:-.02em; }
  h2 { font-size:clamp(1.35rem,3.5vw,var(--fs-3xl)); letter-spacing:-.015em; }
  h3 { font-size:clamp(1.15rem,2.5vw,var(--fs-xl)); }
  h4 { font-size:var(--fs-lg); font-weight:600; }

  p { text-wrap:pretty; }
  a { color:var(--brand); text-decoration-thickness:1px; text-underline-offset:2px; }
  a:hover { color:var(--brand-hover); }
  :focus-visible { outline:3px solid var(--green-500); outline-offset:2px; border-radius:3px; }
  table,.tabular { font-variant-numeric:tabular-nums; }
  strong { color:var(--text-strong); font-weight:600; }

  .skip-link { position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff;
    padding:var(--sp-3) var(--sp-5); z-index:999; border-radius:0 0 var(--radius-sm) 0; }
  .skip-link:focus { left:0; color:#fff; }
}

@layer layout {
  .container { width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:var(--sp-4); }
  @media (min-width:768px){ .container{ padding-inline:var(--sp-6);} }

  /* minmax(0,1fr) — plain `1fr` NAHI.
     Grid track ka default `min-width: auto` hota hai, matlab woh apne
     content ke intrinsic minimum se chhota nahi ho sakta. Ek wide table
     (min-content ~473px) poore column ko stretch kar deti hai — chahe
     uske container pe `overflow-x: auto` ho. Mobile pe iski wajah se
     horizontal scroll aa jaati hai. minmax(0,1fr) us floor ko hata deta hai. */
  .layout-with-sidebar {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--sp-8);
    align-items:start;
  }
  @media (min-width:1024px){
    .layout-with-sidebar { grid-template-columns:minmax(0,1fr) var(--w-sidebar); gap:var(--sp-10); }
  }
  /* Har direct grid child bhi shrink kar sake */
  .layout-with-sidebar > * { min-width:0; }

  /* Same problem hero grid mein bhi */
  .hero-inner > * { min-width:0; }

  /* prose ka max-width upper bound hai, lower bound nahi — chhoti screen pe
     ye poori width le, par usse zyada kabhi nahi */
  .prose { max-width:min(var(--w-read), 100%); }

  /* Sticky sidebar = multi-viewport impression = high eCPM */
  .sidebar { display:none; position:sticky; top:calc(var(--header-h) + var(--sp-4)); }
  @media (min-width:1024px){ .sidebar{ display:block; } }

  .prose { max-width:var(--w-read); }
  .prose > * + * { margin-top:var(--sp-5); }
  .prose h2 { margin-top:var(--sp-10); }
  .prose h3 { margin-top:var(--sp-8); }
  .prose ul,.prose ol { padding-left:var(--sp-6); list-style:revert; }
  .prose li + li { margin-top:var(--sp-2); }

  .stack{display:flex;flex-direction:column;gap:var(--sp-4);}
  .stack-6{display:flex;flex-direction:column;gap:var(--sp-6);}
  .row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;}
  .section{padding-block:var(--sp-10);}
  @media (min-width:768px){ .section{padding-block:var(--sp-16);} }
}

/* ═══════════════════════════════════════════════════════════
   ADS — CLS ZERO + CROP ZERO
   Sabse important section. Rules todne se ya CLS aayegi ya ad crop hogi.
   ═══════════════════════════════════════════════════════════ */
@layer ads {
  .ad-slot {
    /* ✅ min-height = space RESERVE (CLS 0), par ad bada aaye to slot
          grow karta hai (crop nahi). `height` kabhi NAHI. */
    min-height: var(--ad-mh-m, 250px);

    width: 100%;
    max-width: none;      /* ✅ wide ad (970x250) crop nahi hoga */
    overflow: visible;    /* ✅ ad bahar nikal sakta hai */
    contain: none;        /* ✅ clip nahi hoga */

    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:var(--sp-1);
    margin-block:var(--sp-6);
    background:var(--ink-50);
    border-radius:var(--radius-sm);
    position:relative;
  }
  @media (min-width:1024px){ .ad-slot{ min-height:var(--ad-mh-d,250px); } }

  /* Ad iframe ko poori azaadi */
  .ad-inner { width:100%; max-width:none; overflow:visible; display:flex; justify-content:center; }
  .ad-inner > div, .ad-inner iframe { max-width:none !important; margin-inline:auto; }

  .ad-label { font-size:10px; line-height:1; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-300); font-weight:600; user-select:none; }

  /* Ad bhar gayi -> grey background hata do */
  .ad-slot[data-ad-state='filled'] { background:transparent; }
  /* Ad nahi bhari -> space rehne do (CLS 0), label chhupa do */
  .ad-slot[data-ad-state='empty'] .ad-label { visibility:hidden; }

  .ad-desktop-only { display:none; }
  @media (min-width:1024px){
    .ad-desktop-only { display:flex; }
    .ad-mobile-only  { display:none; }
  }
  .sidebar .ad-slot { margin-block:0 var(--sp-6); }
}

@layer components {
  /* ── Header ── */
  .site-header { position:sticky; top:0; z-index:50; background:var(--bg);
    border-bottom:1px solid var(--border); height:var(--header-h); }
  .header-inner {
    display:flex; align-items:center; gap:var(--sp-3);
    height:var(--header-h);
    min-width:0;
  }
  /* Brand hi shrink kare, nav-toggle aur CTA apni size rakhein */
  .header-inner > * { flex-shrink:0; }
  .header-inner .brand {
    flex-shrink:1; min-width:0; overflow:hidden;
    min-height:44px;   /* touch target — logo 36px hai par tap area 44px chahiye */
  }

  .brand { display:flex; align-items:center; gap:var(--sp-2); text-decoration:none;
    color:var(--green-900); margin-right:auto; }
  .brand-mark { width:36px; height:36px; border-radius:var(--radius-sm); flex-shrink:0; }
  .brand-text { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
  /* nowrap — chhoti screen pe "E-Rickshaw" 2 lines mein toot ke header ki
     fixed 60px height se bahar nikal jaata tha */
  .brand-text strong { font-family:var(--font-head); font-size:var(--fs-lg);
    color:var(--green-900); white-space:nowrap; }
  .brand-text em { font-style:normal; font-size:10px; letter-spacing:.06em; white-space:nowrap;
    text-transform:uppercase; color:var(--text-muted); }

  /* <340px pe tagline hata do — brand naam hi kaafi hai */
  @media (max-width:339px){ .brand-text em { display:none; } }

  .main-nav { display:none; }
  @media (min-width:1024px){
    .main-nav { display:block; }
    .main-nav ul { display:flex; gap:var(--sp-5); }
    .main-nav a { color:var(--ink-700); text-decoration:none; font-size:var(--fs-sm);
      font-weight:500; padding-block:var(--sp-2); border-bottom:2px solid transparent; }
    .main-nav a:hover, .main-nav a[aria-current='page'] { color:var(--brand); border-bottom-color:var(--brand); }
  }

  /* `.site-header` prefix zaroori hai: `.btn { display:inline-flex }` isi
     layer mein AAGE aata hai. Same specificity pe baad wala jeetta hai,
     isliye bina prefix ke ye rule silently override ho jaata tha aur
     mobile pe CTA dikhta tha — header se bahar nikalta hua. */
  .site-header .header-cta { display:none; }
  @media (min-width:768px){
    .site-header .header-cta { display:inline-flex; padding:var(--sp-2) var(--sp-4);
      font-size:var(--fs-sm); min-height:38px; white-space:nowrap; }
  }

  .nav-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 10px; background:none; border:none; cursor:pointer; }
  .nav-toggle span { display:block; height:2px; background:var(--ink-800); border-radius:2px;
    transition:transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded='true'] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded='true'] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  @media (min-width:1024px){ .nav-toggle{ display:none; } }

  .mobile-nav { position:absolute; inset-inline:0; top:var(--header-h); background:var(--bg);
    border-bottom:1px solid var(--border); box-shadow:var(--shadow-md); z-index:49; }
  .mobile-nav ul { padding-block:var(--sp-2); }
  .mobile-nav a { display:block; padding:var(--sp-3) 0; color:var(--ink-700);
    text-decoration:none; font-weight:500; border-bottom:1px solid var(--ink-100); }
  .mobile-nav .mobile-cta { color:var(--brand); font-weight:700; border-bottom:none; }

  /* ── Buttons ── */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    padding:var(--sp-3) var(--sp-6); border-radius:var(--radius-sm); border:1px solid transparent;
    font-weight:600; font-size:var(--fs-base); text-decoration:none; cursor:pointer;
    transition:background-color .15s, border-color .15s; min-height:44px; }
  .btn-primary { background:var(--brand); color:#fff; }
  .btn-primary:hover { background:var(--brand-hover); color:#fff; }
  .btn-accent { background:var(--saffron-500); color:var(--ink-900); }
  .btn-accent:hover { background:var(--saffron-600); color:#fff; }
  .btn-outline { background:transparent; border-color:var(--border); color:var(--text); }
  .btn-outline:hover { border-color:var(--brand); color:var(--brand); }
  .btn-lg { padding:var(--sp-4) var(--sp-8); font-size:var(--fs-lg); min-height:52px; }
  .btn-block { width:100%; }

  /* ── Cards ── */
  .card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
    padding:var(--sp-5); box-shadow:var(--shadow-sm); }
  .card-link { text-decoration:none; color:inherit; display:block;
    transition:box-shadow .15s, border-color .15s; }
  .card-link:hover { box-shadow:var(--shadow-md); border-color:var(--green-200); color:inherit; }
  .grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-4); }

  .badge { display:inline-flex; align-items:center; gap:var(--sp-1); padding:.2em .6em;
    border-radius:999px; font-size:var(--fs-xs); font-weight:600;
    background:var(--green-100); color:var(--green-800); }
  .badge-accent { background:var(--saffron-100); color:var(--saffron-600); }

  .callout { border-left:4px solid var(--brand); background:var(--green-50);
    padding:var(--sp-4) var(--sp-5); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
  .callout-warn { border-left-color:var(--warning); background:#fff7ed; }

  /* ── Tables — wide content apne container mein scroll ho ── */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--border); border-radius:var(--radius); }
  table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
  th { background:var(--green-100); color:var(--green-900); font-weight:600;
    text-align:left; padding:var(--sp-3) var(--sp-4); white-space:nowrap; }
  td { padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border); vertical-align:top; }
  tbody tr:nth-child(even){ background:var(--ink-50); }

  /* ── Breadcrumbs ── */
  .breadcrumbs { padding-block:var(--sp-3); font-size:var(--fs-xs); }
  .breadcrumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
  .breadcrumbs li { display:flex; align-items:center; gap:var(--sp-2); }
  .breadcrumbs a { color:var(--ink-500); text-decoration:none; }
  .breadcrumbs a:hover { color:var(--brand); text-decoration:underline; }
  .breadcrumbs span[aria-hidden] { color:var(--ink-300); }
  .breadcrumbs [aria-current] { color:var(--ink-700); font-weight:500; }

  /* ── FAQ ── */
  .faq { border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); }
  .faq summary { padding:var(--sp-4) var(--sp-5); font-weight:600; cursor:pointer;
    list-style:none; display:flex; justify-content:space-between; gap:var(--sp-4); align-items:flex-start; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:'+'; font-size:var(--fs-xl); color:var(--brand); line-height:1; flex-shrink:0; }
  .faq[open] summary::after { content:'\2212'; }
  .faq p { padding:0 var(--sp-5) var(--sp-5); color:var(--ink-600); }

  /* ── Data verification (functions.php: verified_value) ──
     Unverified numbers ko fact ki tarah dikhane ke bajaye official
     source pe bhejta hai. */
  .data-unverified { display:inline-flex; align-items:center; gap:.3em;
    font-size:.92em; font-weight:600; color:var(--info); text-decoration:none;
    border-bottom:1px dashed currentColor; }
  .data-unverified:hover { color:var(--brand); }
  .data-asof { font-size:.75em; color:var(--text-muted); font-weight:400; margin-left:.35em; }

  /* ── Footer ── */
  .site-footer { margin-top:var(--sp-16); background:var(--ink-50); border-top:1px solid var(--border); }
  .disclaimer-bar { background:var(--saffron-100); border-bottom:1px solid #f3dfa8; padding-block:var(--sp-3); }
  .disclaimer-bar p { font-size:var(--fs-xs); line-height:1.55; color:#7c4a03; }

  .footer-main { display:grid; gap:var(--sp-8); padding-block:var(--sp-10); }
  @media (min-width:1024px){ .footer-main{ grid-template-columns:280px 1fr; gap:var(--sp-12); } }
  .footer-title { font-family:var(--font-head); font-weight:700; color:var(--green-900); font-size:var(--fs-lg); }
  .footer-official { margin-top:var(--sp-3); line-height:1.8; }
  .footer-official a { color:var(--ink-600); }

  .footer-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-6); }
  .col-title { font-size:var(--fs-sm); font-weight:700; color:var(--ink-900); margin-bottom:var(--sp-3); }
  .footer-cols ul { display:flex; flex-direction:column; gap:var(--sp-2); }
  .footer-cols a { font-size:var(--fs-sm); color:var(--ink-600); text-decoration:none; }
  .footer-cols a:hover { color:var(--brand); text-decoration:underline; }

  .footer-bottom { border-top:1px solid var(--border); padding-block:var(--sp-4); }
  .footer-bottom-inner { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; justify-content:space-between; }
  .legal-links { display:flex; flex-wrap:wrap; gap:var(--sp-4); }
  .legal-links a { font-size:var(--fs-xs); color:var(--ink-500); text-decoration:none; }
  .legal-links a:hover { color:var(--brand); }

  /* ── Hero ── */
  .hero { background:linear-gradient(180deg,var(--green-50) 0%,var(--bg) 100%);
    border-bottom:1px solid var(--green-100); padding-block:var(--sp-10) var(--sp-12); }
  .hero-inner { display:grid; gap:var(--sp-8); }
  @media (min-width:1024px){ .hero-inner{ grid-template-columns:1.15fr 1fr; gap:var(--sp-12); align-items:center; } }
  .hero-lead { font-size:var(--fs-lg); color:var(--ink-600); margin-top:var(--sp-4); max-width:56ch; }
  .hero-cta { margin-top:var(--sp-6); }

  .highlight-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
  .highlight { background:var(--bg); border:1px solid var(--green-100); border-radius:var(--radius);
    padding:var(--sp-4); display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow-sm); }
  .hl-value { font-family:var(--font-head); font-size:var(--fs-2xl); font-weight:700;
    color:var(--green-700); line-height:1.1; }
  .hl-label { font-size:var(--fs-sm); font-weight:600; color:var(--ink-800); }
  .hl-note { font-size:var(--fs-xs); color:var(--text-muted); }
}

@layer utils {
  .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; }
  .text-muted{color:var(--text-muted);} .text-sm{font-size:var(--fs-sm);}
  .text-xs{font-size:var(--fs-xs);} .text-center{text-align:center;}
  .mt-0{margin-top:0;} .mt-2{margin-top:var(--sp-2);} .mt-4{margin-top:var(--sp-4);}
  .mt-6{margin-top:var(--sp-6);} .bg-subtle{background:var(--bg-subtle);}
}

/* ═══════════ IMAGES (Phase 2B) ═══════════
   Har image ka container aspect-ratio se space reserve karta hai — width/height
   attributes ke saath milkar CLS 0 rehti hai. */
@layer components {
  /* ── Hero media ── */
  .hero-media { display: none; }
  @media (min-width: 1024px) {
    .hero-media { display: block; }
  }
  .hero-picture { display: block; }
  .hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 900;   /* space reserve -> no CLS */
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  @media (max-width: 1023px) {
    .hero-img { aspect-ratio: 4 / 5; }
  }

  /* ── Trust badges ── */
  .trust-row {
    display: flex; flex-wrap: wrap; gap: var(--sp-5);
    margin-top: var(--sp-6); padding-top: var(--sp-5);
    border-top: 1px solid var(--green-100);
  }
  .trust-item { display: flex; align-items: center; gap: var(--sp-2); }
  .trust-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .trust-item span { display: flex; flex-direction: column; line-height: 1.3; }
  .trust-item strong { font-size: var(--fs-sm); color: var(--ink-800); }
  .trust-item em { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); }

  /* ── Topic cards (3D icons) ── */
  .topic-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .topic-card { display: flex; align-items: flex-start; gap: var(--sp-4); }
  .topic-card .icon { width: 44px; height: 44px; flex-shrink: 0; }
  .topic-title { font-size: var(--fs-base); font-weight: 600; margin-bottom: 2px; }

  /* ── Model cards ── */
  .model-card { display: flex; flex-direction: column; }
  .model-img {
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;        /* reserve -> no CLS */
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--ink-100);
    margin-bottom: var(--sp-3);
  }
  .model-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; }

  /* ── CTA band ──
     Background image absolutely positioned hai taaki text overlay ho sake.
     Container ki fixed min-height se image load pe shift nahi hoti. */
  .cta-band {
    position: relative;
    margin-top: var(--sp-16);
    min-height: 260px;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: var(--green-900);
  }
  .cta-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.28;
  }
  .cta-inner {
    position: relative;
    text-align: center;
    padding-block: var(--sp-10);
    color: #fff;
  }
  .cta-inner h2 { color: #fff; }
  .cta-inner p {
    color: rgba(255,255,255,.85);
    margin: var(--sp-3) auto var(--sp-6);
    max-width: 48ch;
  }
}

@layer components {
  /* ── Footer help block ── */
  .footer-help {
    display: grid; gap: var(--sp-4);
    padding-block: var(--sp-6);
    border-top: 1px solid var(--border);
  }
  @media (min-width: 640px) { .footer-help { grid-template-columns: 1fr 1fr; } }
  .help-card {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s;
  }
  .help-card:hover { border-color: var(--green-200); box-shadow: var(--shadow-sm); color: inherit; }
  .help-card .icon { width: 40px; height: 40px; flex-shrink: 0; }
  .help-card span { display: flex; flex-direction: column; line-height: 1.35; }
  .help-card strong { font-size: var(--fs-sm); color: var(--ink-900); }
  .help-card em { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); }

  /* ── Patterned section ──
     Tileable pattern bahut halka rakha hai taaki text readable rahe.
     Pseudo-element pe isliye ki content ka stacking context na bigde. */
  .section-patterned { position: relative; }
  .section-patterned::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image: var(--pattern);
    background-size: 340px auto;
    background-repeat: repeat;
    opacity: .35;
    pointer-events: none;
  }
  .section-patterned > * { position: relative; }
}

/* ═══════════ MOBILE POLISH ═══════════ */
@layer components {
  @media (max-width: 639px) {
    /* Hero CTAs full-width — stacked buttons ki alag-alag width
       thumb-reach ke liye kharab hai aur visually bhi uneven lagti hai */
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }

    /* Trust row single column — 3 items side-by-side 375px pe squeeze hote hain */
    .trust-row { flex-direction: column; gap: var(--sp-3); }

    /* Section spacing thodi kam — mobile pe scroll length matter karti hai */
    .section { padding-block: var(--sp-8); }

    /* Table cells mein padding kam, taaki zyada content dikhe */
    th, td { padding: var(--sp-2) var(--sp-3); }

    /* FAQ summary ka gap kam */
    .faq summary { padding: var(--sp-3) var(--sp-4); }
  }

  /* Landscape phone (kam height) — hero ka vertical padding kam */
  @media (max-height: 480px) and (orientation: landscape) {
    .hero { padding-block: var(--sp-6); }
  }
}

/* ═══════════ MODEL CARDS & PAGES ═══════════ */
@layer components {
  .model-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }
  @media (min-width: 560px)  { .model-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1000px) { .model-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

  .mcard {
    display: flex; flex-direction: column;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
  }
  .mcard:hover { box-shadow: var(--shadow-md); border-color: var(--green-200); }

  .mcard-media { display: block; position: relative; background: var(--ink-100); }
  .mcard-media .model-img {
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;      /* space reserve -> CLS 0 */
    object-fit: cover;
  }
  /* "Specs aa rahi hain" flag — user ko pehle hi pata chal jaaye */
  .mcard-flag {
    position: absolute; left: var(--sp-2); top: var(--sp-2);
    background: rgba(31,41,55,.86); color: #fff;
    font-size: 10px; font-weight: 600; letter-spacing: .03em;
    padding: .2em .5em; border-radius: 4px;
  }

  .mcard-body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: var(--sp-1); }
  .mcard-brand {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); font-weight: 600;
  }
  .mcard-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; }
  .mcard-name a { color: var(--ink-900); text-decoration: none; }
  .mcard-name a:hover { color: var(--brand); }

  .mcard-price { font-weight: 700; color: var(--green-700); font-variant-numeric: tabular-nums; }
  .mcard-price-note {
    font-size: 10px; font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-left: .3em;
  }

  .mcard-specs {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px solid var(--ink-100);
  }
  .mcard-specs dt { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
  .mcard-specs dd { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800); margin: 0; line-height: 1.3; }

  .mcard-nospec {
    font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
    margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px solid var(--ink-100);
  }

  .mcard-actions { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); }
  .mcard-apply { flex: 1 1 auto; min-height: 42px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
  .mcard-more  { flex: 0 0 auto; min-height: 42px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }

  /* ── Listing filters ── */
  .list-head { padding-block: var(--sp-4) var(--sp-2); }
  .list-filters {
    display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
    padding: var(--sp-4); background: var(--ink-50);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: var(--sp-4);
  }
  .fltr { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 160px; min-width: 0; }
  .fltr span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-600); }
  .fltr select {
    padding: var(--sp-2) var(--sp-3); min-height: 44px;
    border: 1px solid var(--ink-300); border-radius: var(--radius-sm);
    background: var(--bg); font-size: 16px;   /* iOS zoom guard */
    width: 100%;
  }
  .fltr-clear { align-self: center; font-size: var(--fs-sm); color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }

  .empty-state { text-align: center; padding: var(--sp-10) var(--sp-4); }
  .empty-state img { margin: 0 auto var(--sp-4); width: 100%; max-width: 300px; height: auto; aspect-ratio: 3/2; }
  .empty-state p { color: var(--text-muted); margin-bottom: var(--sp-4); }

  /* ── Model detail ── */
  .model-hero { display: grid; gap: var(--sp-6); padding-block: var(--sp-6); }
  @media (min-width: 800px) { .model-hero { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: center; } }
  .model-hero > * { min-width: 0; }
  .model-hero-media .model-img {
    width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--radius-lg); background: var(--ink-100);
  }
  .model-price { font-size: var(--fs-2xl); font-weight: 700; color: var(--green-700); margin-top: var(--sp-2); }
  .model-highlights { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
  .model-highlights li {
    font-size: var(--fs-sm); padding-left: 1.4em; position: relative; color: var(--ink-700);
  }
  .model-highlights li::before {
    content: "\2713"; position: absolute; left: 0; color: var(--green-600); font-weight: 700;
  }
  .model-cta { margin-top: var(--sp-6); }
  @media (max-width: 559px) {
    .model-cta { flex-direction: column; align-items: stretch; }
    .model-cta .btn { width: 100%; }
  }

  .spec-table th {
    background: var(--ink-50); color: var(--ink-600); font-weight: 600;
    width: 42%; white-space: normal; font-size: var(--fs-sm);
  }
  .spec-table td { font-weight: 500; }

  .feature-list {
    display: grid; gap: var(--sp-2); margin-top: var(--sp-4);
    grid-template-columns: 1fr;
  }
  @media (min-width: 600px) { .feature-list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .feature-list li {
    font-size: var(--fs-sm); padding-left: 1.4em; position: relative; color: var(--ink-700);
  }
  .feature-list li::before { content: "\2022"; position: absolute; left: .35em; color: var(--green-600); font-weight: 700; }

  /* ── Apply page ── */
  .apply-hero {
    background: linear-gradient(180deg, var(--green-50), var(--bg));
    padding-block: var(--sp-8);
    border-bottom: 1px solid var(--green-100);
  }
  .apply-picked {
    display: flex; gap: var(--sp-4); align-items: center;
    margin-top: var(--sp-6); padding: var(--sp-3);
    background: var(--bg); border: 1px solid var(--green-200); border-radius: var(--radius);
    max-width: 460px;
  }
  .apply-picked .model-img { width: 90px; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
  .apply-picked > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .apply-picked-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
  .apply-picked strong { font-size: var(--fs-base); color: var(--ink-900); }
  .apply-picked em { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); }
  .apply-change { font-size: var(--fs-xs); margin-top: .2rem; }

  .apply-steps { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-6); list-style: none; padding: 0; }
  .apply-steps li { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--ink-100); }
  .apply-steps li:last-child { border-bottom: none; }
  .step-n {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--ink-100); color: var(--ink-600);
    display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
  }
  .apply-steps li.current .step-n { background: var(--green-700); color: #fff; }
  .step-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .step-t strong { font-size: var(--fs-sm); color: var(--ink-900); }
  .step-t em { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); }
  .apply-soon { display: inline-block; font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }
}

/* ═══════════ APPLY FORM ═══════════
   Mobile-first. Inputs 16px font (iOS focus par zoom nahi karega) aur
   46px+ height (touch target). */
@layer components {
  .af {
    background: var(--bg);
    border: 1px solid var(--green-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-4);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-h) + var(--sp-4));
  }
  @media (min-width: 560px) { .af { padding: var(--sp-6); } }

  .af-head h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
  .af-head p  { font-size: var(--fs-sm); color: var(--text-muted); }

  .af-msg {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
    font-size: var(--fs-sm); line-height: 1.5; margin-top: var(--sp-4);
  }
  .af-msg-error { background: #fee2e2; color: #b91c1c; }

  /* Chuna hua model — user ko confirm ho ki sahi model ke liye poochh raha hai */
  .af-model {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-top: var(--sp-4); padding: var(--sp-2);
    background: var(--green-50); border-radius: var(--radius-sm);
  }
  .af-model .model-img {
    width: 64px; height: auto; aspect-ratio: 4/3; object-fit: cover;
    border-radius: 4px; flex-shrink: 0;
  }
  .af-model span { display: flex; flex-direction: column; min-width: 0; }
  .af-model em {
    font-style: normal; font-size: 10px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted); font-weight: 600;
  }
  .af-model strong { font-size: var(--fs-sm); color: var(--ink-900); }

  .af-form { margin-top: var(--sp-5); }

  /* Honeypot — screen readers aur browsers dono se chhupa,
     par autofill trigger na ho isliye off-screen (display:none nahi). */
  .af-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
  }

  .af-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
  @media (min-width: 560px) { .af-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

  .af-fld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
  .af-fld > span { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
  .af-fld > span b { color: var(--error); font-weight: 600; }
  .af-fld input, .af-fld select {
    width: 100%;
    padding: var(--sp-3);
    min-height: 46px;
    font-size: 16px;                 /* iOS zoom guard */
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-sm);
    background: var(--bg);
  }
  .af-fld input:focus, .af-fld select:focus {
    border-color: var(--brand);
    outline: 2px solid rgba(26,122,76,.22);
    outline-offset: 0;
  }
  .af-fld em {
    font-style: normal; font-size: var(--fs-xs); color: var(--error); font-weight: 500;
  }
  .fld-error input, .fld-error select { border-color: var(--error); }

  /* Consent — DPDP requirement. Pre-ticked NAHI, aur text poora dikhna chahiye. */
  .af-consent {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3);
    background: var(--ink-50); border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
    cursor: pointer;
  }
  .af-consent input[type=checkbox] {
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; cursor: pointer;
    accent-color: var(--green-700);
  }
  .af-consent span { font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-600); }
  .af-consent.fld-error { border: 1px solid var(--error); background: #fef2f2; }
  .af-consent-err { font-size: var(--fs-xs); color: var(--error); margin: calc(var(--sp-4) * -1 + 2px) 0 var(--sp-4); }

  .af-submit { width: 100%; min-height: 50px; font-size: var(--fs-base); }

  .af-note {
    margin-top: var(--sp-4); font-size: var(--fs-xs);
    color: var(--text-muted); line-height: 1.55;
  }

  /* ── Success state ── */
  .af-done { text-align: center; border-color: var(--green-500); }
  .af-done-icon {
    width: 52px; height: 52px; margin: 0 auto var(--sp-4);
    border-radius: 50%; background: var(--green-100); color: var(--green-700);
    display: grid; place-items: center; font-size: 1.6rem; font-weight: 700;
  }
  .af-done h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
  .af-done p { font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.6; }
  .af-ref {
    display: inline-block; margin-top: var(--sp-1);
    font-family: ui-monospace, monospace; font-size: var(--fs-base);
    background: var(--green-50); color: var(--green-800);
    padding: .2em .6em; border-radius: 4px; letter-spacing: .04em;
  }
  .af-next { margin-top: var(--sp-4); }
  .af-official {
    margin-top: var(--sp-4); padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs) !important; color: var(--text-muted) !important;
  }

  /* Sidebar mein compact version */
  .sidebar .af { padding: var(--sp-4); }
  .sidebar .af-row { grid-template-columns: 1fr; }
}

/* ═══════════ APPLY FLOW (13 steps) ═══════════ */
@layer components {
  .flow-wrap { padding-block: var(--sp-4) 0; }

  /* ── Progress ── */
  .flow-prog { margin-bottom: var(--sp-4); }
  .flow-prog-bar {
    height: 6px; background: var(--ink-100);
    border-radius: 999px; overflow: hidden;
  }
  .flow-prog-bar span {
    display: block; height: 100%;
    background: var(--green-600);
    border-radius: 999px;
    transition: width .3s ease;
  }
  @media (prefers-reduced-motion: reduce) { .flow-prog-bar span { transition: none; } }

  .flow-prog-text {
    font-size: var(--fs-xs); color: var(--text-muted);
    margin-top: var(--sp-2);
  }
  .flow-prog-text strong { color: var(--green-700); }

  /* Dots — chhoti screen par hide, warna 13 dots squeeze hote hain */
  .flow-dots { display: none; }
  @media (min-width: 600px) {
    .flow-dots {
      display: flex; gap: 4px; margin-top: var(--sp-2); padding: 0;
    }
    .flow-dots li {
      flex: 1; height: 4px; background: var(--ink-200); border-radius: 2px;
    }
    .flow-dots li.done { background: var(--green-200); }
    .flow-dots li.now  { background: var(--green-600); }
  }

  /* ── Step body ── */
  .flow-step {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-4);
  }
  @media (min-width: 560px) { .flow-step { padding: var(--sp-6); } }

  .flow-step h1 { font-size: clamp(1.35rem, 4vw, var(--fs-2xl)); }
  .flow-why { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }
  .flow-model { margin-top: var(--sp-4); }

  .flow-fields {
    display: flex; flex-direction: column; gap: var(--sp-4);
    margin-top: var(--sp-5);
  }
  .flow-fields fieldset { border: none; padding: 0; margin: 0; }
  .flow-fields legend {
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700);
    padding: 0; margin-bottom: var(--sp-2);
  }
  .flow-fields legend b { color: var(--error); }

  /* ── Radio pills ── */
  .flow-radios { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .flow-radio {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4); min-height: 44px;
    border: 1px solid var(--ink-300); border-radius: 999px;
    background: var(--bg); cursor: pointer; font-size: var(--fs-sm);
    transition: border-color .12s, background-color .12s;
  }
  .flow-radio input { accent-color: var(--green-700); width: 16px; height: 16px; }
  .flow-radio:has(input:checked) { border-color: var(--green-600); background: var(--green-50); font-weight: 600; }
  .flow-radio:hover { border-color: var(--green-500); }

  /* ── Option cards ── */
  .flow-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
  @media (min-width: 620px) { .flow-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  .flow-card {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-4); min-height: 60px;
    border: 1px solid var(--ink-300); border-radius: var(--radius);
    cursor: pointer; background: var(--bg);
    transition: border-color .12s, background-color .12s;
  }
  .flow-card input { accent-color: var(--green-700); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
  .flow-card span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .flow-card strong { font-size: var(--fs-sm); color: var(--ink-900); }
  .flow-card em { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
  .flow-card:has(input:checked) { border-color: var(--green-600); background: var(--green-50); }
  .flow-card:hover { border-color: var(--green-500); }

  /* ── Model picker ── */
  .flow-modelpick {
    display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
    max-height: 420px; overflow-y: auto; padding: var(--sp-1);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  @media (min-width: 620px) { .flow-modelpick { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .flow-modelopt {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2); min-height: 56px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer; background: var(--bg);
  }
  .flow-modelopt input { accent-color: var(--green-700); width: 16px; height: 16px; flex-shrink: 0; }
  .flow-modelopt .model-img {
    width: 52px; height: auto; aspect-ratio: 4/3; object-fit: cover;
    border-radius: 4px; flex-shrink: 0;
  }
  .flow-modelopt span { display: flex; flex-direction: column; min-width: 0; }
  .flow-modelopt strong { font-size: var(--fs-sm); color: var(--ink-900); line-height: 1.25; }
  .flow-modelopt em { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); }
  .flow-modelopt:has(input:checked) { border-color: var(--green-600); background: var(--green-50); }
  .flow-modelopt-none { padding-left: var(--sp-2); }

  /* ── Step content (policy: har step par asli jaankari) ── */
  .flow-content {
    margin-top: var(--sp-6); padding-top: var(--sp-5);
    border-top: 1px solid var(--ink-100);
    max-width: var(--w-read);
  }
  .flow-content h2 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
  .flow-content h2:first-child { margin-top: 0; }
  .flow-content h3 { font-size: var(--fs-base); margin-top: var(--sp-4); }
  .flow-content p { font-size: var(--fs-sm); color: var(--ink-600); margin-top: var(--sp-2); line-height: 1.65; }
  .flow-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
  .flow-list li { font-size: var(--fs-sm); color: var(--ink-600); padding-left: 1.3em; position: relative; }
  .flow-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--green-600); font-weight: 700; }

  .flow-details { margin-top: var(--sp-4); }
  .flow-details summary {
    cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
    color: var(--brand); min-height: 44px; display: flex; align-items: center;
  }
  .flow-steplist { margin-top: var(--sp-3); padding-left: var(--sp-5); list-style: decimal; }
  .flow-steplist li { font-size: var(--fs-sm); color: var(--ink-600); margin-bottom: var(--sp-2); }

  /* ── Documents grid ── */
  .doc-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
  @media (min-width: 620px) { .doc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .doc-item {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3); background: var(--green-50); border-radius: var(--radius-sm);
  }
  .doc-item .icon { width: 40px; height: 40px; flex-shrink: 0; }
  .doc-item strong { font-size: var(--fs-sm); color: var(--ink-900); display: block; }
  .doc-item p { font-size: var(--fs-xs); color: var(--ink-600); margin-top: 2px; line-height: 1.5; }

  /* ── Review table ── */
  .review-box { margin-top: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .review-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  .review-table th {
    text-align: left; padding: var(--sp-3); width: 38%;
    background: var(--ink-50); color: var(--ink-600); font-weight: 600;
    border-bottom: 1px solid var(--border); white-space: normal;
  }
  .review-table td { padding: var(--sp-3); border-bottom: 1px solid var(--ink-100); }
  .review-table tr:last-child th, .review-table tr:last-child td { border-bottom: none; }
  .review-edit { width: 1%; white-space: nowrap; }
  .review-edit a { font-size: var(--fs-xs); }

  /* ── Navigation ── */
  .flow-nav {
    display: flex; gap: var(--sp-3); margin-top: var(--sp-6);
    padding-top: var(--sp-5); border-top: 1px solid var(--ink-100);
  }
  .flow-back { flex: 0 0 auto; min-height: 48px; }
  .flow-next { flex: 1 1 auto; min-height: 48px; font-size: var(--fs-base); }

  /* ── Success ── */
  .success-hero { text-align: center; }
  .success-img { margin: 0 auto var(--sp-4); width: 100%; max-width: 260px; height: auto; aspect-ratio: 3/2; }
  .success-hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }

  .next-steps { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
  .next-steps li { display: flex; gap: var(--sp-4); }
  .next-steps .step-n {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: var(--green-100); color: var(--green-800);
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  }
  .next-steps .step-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .next-steps strong { font-size: var(--fs-base); color: var(--ink-900); }
  .next-steps em { font-style: normal; font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.55; }

  .portal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
  .portal-links a {
    display: inline-flex; align-items: center; gap: .3em;
    padding: var(--sp-2) var(--sp-4); min-height: 44px;
    background: var(--bg); border: 1px solid var(--green-200);
    border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  }
  .portal-links a:hover { border-color: var(--green-600); background: var(--green-50); }
}

@layer components {
  /* Model page par do raaste — poora flow (recommended) ya quick enquiry */
  .apply-choice { margin-bottom: var(--sp-5); }
  .apply-choice-full {
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-4);
    background: linear-gradient(135deg, var(--green-50), var(--bg));
    border: 2px solid var(--green-600); border-radius: var(--radius-lg);
    text-decoration: none; color: inherit; position: relative;
    transition: box-shadow .15s;
  }
  .apply-choice-full:hover { box-shadow: var(--shadow-md); color: inherit; }
  .apply-choice-badge {
    align-self: flex-start;
    background: var(--green-700); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: .2em .6em; border-radius: 4px; margin-bottom: var(--sp-2);
  }
  .apply-choice-full strong { font-size: var(--fs-lg); color: var(--green-900); }
  .apply-choice-full em {
    font-style: normal; font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.55;
  }
  .apply-choice-go {
    margin-top: var(--sp-3); font-weight: 600; color: var(--brand); font-size: var(--fs-sm);
  }
  .apply-choice-or {
    text-align: center; margin: var(--sp-4) 0 0;
    position: relative; color: var(--text-muted); font-size: var(--fs-xs);
  }
  .apply-choice-or::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: var(--border);
  }
  .apply-choice-or span {
    position: relative; background: var(--bg); padding: 0 var(--sp-3);
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 2E — Content pages (guide / scheme / state / legal + hubs)
   ═══════════════════════════════════════════════════════════ */
@layer components {

  /* ─────────── Layout ───────────
     Mobile: ek column. Desktop: content + sticky sidebar.
     minmax(0,1fr) zaroori hai — bina iske grid item ka min-width auto rehta
     hai aur ek chaudi table poore column ko faila kar horizontal scroll
     bana deti hai (ye bug pehle aa chuka hai). */
  .content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
    padding-block: var(--sp-6) var(--sp-10);
  }
  @media (min-width: 1024px) {
    .content-layout {
      grid-template-columns: minmax(0, 1fr) var(--w-sidebar);
      gap: var(--sp-10);
      align-items: start;
    }
  }
  .content-main { min-width: 0; }        /* grid overflow guard */

  /* Legal pages: koi sidebar nahi, padhne layak width */
  .content-legal .content-main { max-width: var(--w-read); margin-inline: auto; }

  .content-sidebar { display: none; }
  @media (min-width: 1024px) {
    .content-sidebar { display: block; min-width: 0; }
    .sidebar-sticky { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  }

  /* ─────────── Header ─────────── */
  .content-header { margin-bottom: var(--sp-6); }
  .content-kicker {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brand); margin-bottom: var(--sp-2);
  }
  .content-header h1 {
    font-size: clamp(1.5rem, 5vw, var(--fs-4xl));
    line-height: 1.2; margin: 0;
  }
  .content-lede {
    font-size: var(--fs-lg); color: var(--ink-600);
    margin-top: var(--sp-3); max-width: var(--w-read);
  }
  .content-meta {
    font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-3);
  }
  .content-meta .meta-sep { color: var(--ink-300); }

  .content-hero { margin: var(--sp-6) 0 0; }
  /* width/height attributes HTML mein hain -> aspect-ratio wahi se aata hai,
     isliye CLS 0. Yahan sirf scale karte hain. */
  .content-hero-img {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius-lg); background: var(--ink-100);
  }

  /* ─────────── In-content ads ───────────
     Problem: `.prose` ki max-width 680px hai (padhne layak measure), to uske
     andar ka ad bhi 680 par ruk jaata hai — jabki desktop column 812px hai.
     Abhi in-content creatives max 336px hain, par GAM mein 728x90 add hote hi
     (desktop eCPM ke liye recommended) ad box se bahar nikal jaata.

     Isliye measure ab `.prose` par nahi, uske TEXT children par lagti hai.
     Text utna hi chaura rehta hai, aur ad ko poora column milta hai —
     crop kabhi nahi, aur min-height se CLS phir bhi 0. */
  .content-main .prose { max-width: none; }
  .content-main .prose > :where(p, h2, h3, h4, h5, ul, ol, dl, blockquote) {
    max-width: var(--w-read);
  }
  .content-main .prose > .ad-slot { max-width: none; width: 100%; }
  /* Table aur figure ko bhi poori chaudai — chhoti jagah mein scroll karein */
  .content-main .prose > figure { max-width: none; }
  .content-main .prose > table,
  .content-main .prose > .table-wrap { max-width: none; display: block; overflow-x: auto; }

  /* ─────────── Data points box ─────────── */
  .dp-box {
    background: var(--green-50);
    border: 1px solid var(--green-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin: var(--sp-6) 0;
  }
  .dp-box-title {
    font-size: var(--fs-lg); margin: 0 0 var(--sp-4);
    color: var(--green-900);
  }
  .dp-grid {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3); margin: 0;
  }
  @media (min-width: 560px) {
    .dp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  }
  .dp-item {
    background: var(--bg); border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4); min-width: 0;
  }
  .dp-item dt {
    font-size: var(--fs-xs); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-1);
  }
  .dp-item dd {
    margin: 0; font-size: var(--fs-lg); font-weight: 700;
    color: var(--text-strong); overflow-wrap: anywhere;
  }
  .dp-note {
    font-size: var(--fs-xs); color: var(--ink-600);
    margin: var(--sp-4) 0 0; line-height: 1.5;
  }
  /* Verified value ke saath "Aug 2026" chip */
  .data-asof {
    display: inline-block; margin-left: var(--sp-2);
    font-size: var(--fs-xs); font-weight: 500;
    color: var(--green-800); background: var(--green-100);
    padding: 2px var(--sp-2); border-radius: 999px; vertical-align: middle;
  }
  /* Unverified -> number ki jagah portal link */
  .data-unverified {
    font-size: var(--fs-sm); font-weight: 600; color: var(--saffron-600);
    text-decoration: none; border-bottom: 1px dashed currentColor;
  }
  .data-unverified:hover { color: var(--ink-900); }

  /* ─────────── Table of contents ─────────── */
  .toc {
    background: var(--ink-50); border-left: 3px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--sp-4) var(--sp-5); margin: var(--sp-6) 0;
  }
  .toc-title {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--sp-3);
  }
  .toc ol { margin: 0; padding-left: var(--sp-5); list-style: decimal; }
  .toc a {
    /* Vertical nav list hai — inline link ka 19px thumb ke liye chhota hai.
       block + padding se ~44px tap target milta hai (WCAG 2.5.8). */
    display: flex; align-items: center; min-height: 44px;
    padding-block: var(--sp-2);
    color: var(--ink-700); text-decoration: none; line-height: 1.4;
  }
  .toc a:hover { color: var(--brand); text-decoration: underline; }

  /* Anchor jump par heading header ke neeche na chhup jaye */
  .prose h2[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

  /* ─────────── FAQ ─────────── */
  .faq-section { margin-top: var(--sp-10); }
  .faq-section > h2 { margin-bottom: var(--sp-4); }
  .faq-item {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: var(--sp-3); background: var(--bg);
  }
  .faq-item summary {
    /* 44px+ tap target — mobile accessibility */
    padding: var(--sp-4); font-weight: 600; cursor: pointer;
    list-style: none; position: relative; padding-right: var(--sp-10);
    min-height: 44px; display: flex; align-items: center;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+'; position: absolute; right: var(--sp-4);
    font-size: var(--fs-xl); font-weight: 400; color: var(--brand);
    line-height: 1;
  }
  .faq-item[open] summary::after { content: '−'; }
  .faq-item[open] summary { border-bottom: 1px solid var(--border); }
  .faq-answer { padding: var(--sp-4); color: var(--ink-700); }
  .faq-answer > * + * { margin-top: var(--sp-3); }

  /* ─────────── CTA band ─────────── */
  .content-layout .cta-band {
    background: linear-gradient(135deg, var(--green-800), var(--green-600));
    color: #fff; border-radius: var(--radius-lg);
    padding: var(--sp-6); margin-top: var(--sp-10); text-align: center;
  }
  .content-layout .cta-band h2 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); }
  .content-layout .cta-band p { color: rgba(255,255,255,.9); margin: 0 0 var(--sp-5); }

  /* ─────────── Related ─────────── */
  .related-section { margin-top: var(--sp-10); }
  .related-section > h2 { margin-bottom: var(--sp-4); }
  .related-grid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3);
  }
  @media (min-width: 560px) {
    .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .related-card {
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-4); min-width: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .related-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
  .related-type {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--brand);
  }
  .related-title { font-weight: 600; color: var(--text-strong); line-height: 1.35; }
  .related-excerpt { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; }

  .content-disclaimer {
    font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6;
    margin-top: var(--sp-8); padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
  }

  /* ═══════════ HUB / LISTING ═══════════ */
  .hub-header { padding-block: var(--sp-6) var(--sp-4); }
  .hub-header h1 { font-size: clamp(1.5rem, 5vw, var(--fs-4xl)); line-height: 1.2; margin: 0; }
  .hub-lede {
    font-size: var(--fs-lg); color: var(--ink-600);
    margin-top: var(--sp-3); max-width: 62ch;
  }

  .hub-grid {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5); padding-block: var(--sp-4) var(--sp-8);
  }
  @media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .hub-card {
    display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg); overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
  }
  .hub-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
  .hub-card-media { display: block; line-height: 0; background: var(--ink-100); }
  .hub-card-img { width: 100%; height: auto; display: block; }
  .hub-card-body {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-4); flex: 1;
  }
  .hub-card-body h2 { font-size: var(--fs-lg); line-height: 1.3; margin: 0; }
  .hub-card-body h2 a { color: var(--text-strong); text-decoration: none; }
  .hub-card-body h2 a:hover { color: var(--brand); }
  .hub-card-excerpt { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; line-height: 1.5; }
  .hub-sublist {
    margin: var(--sp-1) 0 0; padding-left: var(--sp-5);
    list-style: disc; font-size: var(--fs-sm);
  }
  .hub-sublist li + li { margin-top: var(--sp-1); }
  .hub-sublist a { color: var(--ink-600); text-decoration: none; }
  .hub-sublist a:hover { color: var(--brand); text-decoration: underline; }
  .hub-card-meta {
    font-size: var(--fs-xs); color: var(--ink-500);
    margin: auto 0 0; padding-top: var(--sp-2);
  }
}

@layer components {
  /* Footer ke column links vertical list hain, inline links nahi — inhe bhi
     thumb-size tap target chahiye. Sirf mobile par, kyunki desktop pe mouse
     se 17px theek hai aur padding se footer bewajah lamba ho jaata hai. */
  @media (max-width: 767px) {
    .footer-cols a { display: flex; align-items: center; min-height: 44px; }
  }
}

@layer components {
  /* Breadcrumb aur footer-bottom horizontal nav rows hain, inline-in-sentence
     links nahi — isliye WCAG 2.5.8 ka inline exception in par nahi lagta.
     24px minimum tak le aate hain. Padding vertical hai, isliye horizontal
     strip ka layout waisa hi rehta hai. */
  .breadcrumbs a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: var(--sp-1);
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 2F — Search · Auto-links · Smart 404
   ═══════════════════════════════════════════════════════════ */
@layer components {

  /* ─────────── Search form ─────────── */
  .search-head { padding-block: var(--sp-6) var(--sp-4); }
  .search-head h1 { font-size: clamp(1.4rem, 5vw, var(--fs-3xl)); line-height: 1.2; margin: 0; }

  .search-form {
    display: flex; gap: var(--sp-2); margin-top: var(--sp-4);
    max-width: 560px;
  }
  .search-form input[type="search"] {
    flex: 1; min-width: 0;
    /* 16px se chhota font iOS par page zoom kar deta hai */
    font-size: 16px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text);
    min-height: 48px;
  }
  .search-form input[type="search"]:focus {
    outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
  }
  .search-form .btn { white-space: nowrap; min-height: 48px; }

  .search-count { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-3); }

  /* ─────────── Results ─────────── */
  .search-results { padding-block: var(--sp-4) var(--sp-8); }

  .search-item {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
  }
  .search-item:last-of-type { border-bottom: 0; }
  .search-kind {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--brand); margin: 0 0 var(--sp-1);
  }
  .search-item h2 { font-size: var(--fs-lg); line-height: 1.35; margin: 0 0 var(--sp-2); }
  .search-item h2 a { color: var(--text-strong); text-decoration: none; }
  .search-item h2 a:hover { color: var(--brand); text-decoration: underline; }
  .search-snippet {
    font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.55;
    margin: 0 0 var(--sp-2); overflow-wrap: anywhere;
  }
  .search-snippet mark {
    background: var(--saffron-100); color: inherit;
    padding: 0 2px; border-radius: 2px; font-weight: 600;
  }
  .search-url {
    font-size: var(--fs-xs); color: var(--green-700);
    margin: 0; overflow-wrap: anywhere;
  }

  .search-section-title {
    font-size: var(--fs-lg); margin: var(--sp-8) 0 var(--sp-3);
    padding-top: var(--sp-4); border-top: 1px solid var(--border);
  }

  /* ─────────── Model results ─────────── */
  .search-models {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3);
  }
  @media (min-width: 560px) { .search-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .search-models { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .search-model {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); text-decoration: none;
    transition: border-color .15s;
  }
  .search-model:hover { border-color: var(--brand); }
  .search-model-brand {
    font-size: var(--fs-xs); text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted);
  }
  .search-model-name { font-weight: 600; color: var(--text-strong); line-height: 1.3; }
  .search-model-price { font-size: var(--fs-sm); color: var(--green-700); }

  /* ─────────── Zero results / empty ─────────── */
  .search-empty { padding-block: var(--sp-4) var(--sp-10); max-width: 62ch; }
  .search-empty-lead { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
  .search-tips { padding-left: var(--sp-6); list-style: disc; color: var(--ink-600); }
  .search-tips li + li { margin-top: var(--sp-2); }

  .search-suggest {
    display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4);
  }
  .search-suggest-link {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg); color: var(--ink-700);
    font-size: var(--fs-sm); text-decoration: none;
    transition: border-color .15s, color .15s;
  }
  .search-suggest-link:hover { border-color: var(--brand); color: var(--brand); }

  /* ─────────── Auto internal links ───────────
     Baaki prose links jaise hi dikhein — user ko farq pata nahi chalna
     chahiye ki ye apne aap laga hai. Bas ek halka dotted underline. */
  .prose .auto-link {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
  }
  .prose .auto-link:hover { text-decoration-style: solid; }

  /* ─────────── Smart 404 ─────────── */
  .error-suggest { max-width: 640px; margin: var(--sp-8) auto 0; }
  .error-suggest h2 { font-size: var(--fs-lg); text-align: center; margin-bottom: var(--sp-4); }
  .error-suggest-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
  .error-suggest-list a {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--sp-3) var(--sp-4); min-width: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); text-decoration: none;
  }
  .error-suggest-list a:hover { border-color: var(--brand); }
  .error-suggest-title { font-weight: 600; color: var(--text-strong); }
  .error-suggest-desc { font-size: var(--fs-sm); color: var(--text-muted); }

  .error-search { max-width: 480px; margin: var(--sp-6) auto 0; }
}

@layer components {
  /* Header ka search icon — 44px tap target, desktop par hi dikhta hai
     (mobile menu mein alag "Search" link hai). */
  .site-header .header-search {
    display: none;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: var(--ink-600); border-radius: var(--radius-sm);
  }
  .site-header .header-search:hover { color: var(--brand); background: var(--ink-50); }
  @media (min-width: 1024px) { .site-header .header-search { display: inline-flex; } }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 4 — Calculators
   ═══════════════════════════════════════════════════════════ */
@layer components {

  /* ─────────── Head ─────────── */
  .calc-head { padding-block: var(--sp-6) var(--sp-4); }
  .calc-head h1 { font-size: clamp(1.4rem, 5vw, var(--fs-3xl)); line-height: 1.2; margin: 0; }
  .calc-lede {
    font-size: var(--fs-lg); color: var(--ink-600);
    margin-top: var(--sp-3); max-width: 62ch;
  }
  .calc-from-model, .calc-honest {
    margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: var(--green-50); border-left: 3px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: var(--fs-sm); color: var(--ink-700); max-width: 68ch;
  }
  .calc-honest { background: var(--saffron-100); border-left-color: var(--saffron-600); }

  /* ─────────── Layout ───────────
     Mobile: form upar, result neeche. Desktop: saath-saath, result sticky
     taaki input badalte waqt woh nazar se bahar na jaaye. */
  .calc-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6); padding-block: var(--sp-2) var(--sp-8);
  }
  @media (min-width: 900px) {
    .calc-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .calc-wrap-wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .calc-results { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  }

  /* ─────────── Form ─────────── */
  .calc-form {
    display: flex; flex-direction: column; gap: var(--sp-4);
    min-width: 0;
  }
  .calc-form-grid { gap: var(--sp-5); }

  .calc-group {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--sp-4); margin: 0; min-width: 0;
    display: flex; flex-direction: column; gap: var(--sp-4);
  }
  .calc-group legend {
    font-size: var(--fs-sm); font-weight: 700; padding-inline: var(--sp-2);
    color: var(--text-strong);
  }
  .calc-legend-note {
    font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs);
  }

  .calc-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
  .calc-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
  .calc-hint {
    display: block; font-style: normal; font-weight: 400;
    font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px;
  }

  .calc-input-wrap { display: flex; align-items: stretch; min-width: 0; }
  .calc-field input[type="number"],
  .calc-select {
    flex: 1; min-width: 0; width: 100%;
    /* 16px se chhota font iOS par page zoom kar deta hai */
    font-size: 16px; min-height: 48px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .calc-field input:focus, .calc-select:focus {
    outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
  }
  .calc-affix {
    display: flex; align-items: center; padding-inline: var(--sp-3);
    background: var(--ink-50); border: 1px solid var(--border);
    color: var(--ink-600); font-size: var(--fs-sm); white-space: nowrap;
  }
  .calc-input-wrap > .calc-affix:first-child {
    border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  }
  .calc-input-wrap > .calc-affix:first-child + input { border-radius: 0 var(--radius) var(--radius) 0; }
  .calc-affix-r { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
  .calc-input-wrap > input:has(+ .calc-affix-r) { border-radius: var(--radius) 0 0 var(--radius); }
  .calc-note { font-size: var(--fs-xs); color: var(--text-muted); }

  /* Bina JS ke ye button dikhta hai; JS ho to woh use chhupa deta hai */
  .calc-submit { align-self: flex-start; }

  /* ─────────── Results ─────────── */
  .calc-results { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }

  .calc-hero-result {
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-5);
    background: linear-gradient(135deg, var(--green-800), var(--green-600));
    color: #fff; border-radius: var(--radius-lg);
  }
  .calc-hero-label { font-size: var(--fs-sm); color: rgba(255,255,255,.85); }
  .calc-hero-value {
    font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .calc-hero-sub { font-size: var(--fs-sm); color: rgba(255,255,255,.85); }

  .calc-cards {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3);
  }
  @media (min-width: 480px) { .calc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .calc-cards { grid-template-columns: minmax(0, 1fr); } }
  @media (min-width: 1100px) { .calc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .calc-card {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg);
  }
  .calc-card-warn { border-left: 3px solid var(--saffron-600); background: #fffdf7; }
  .calc-card-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
  .calc-card-value {
    font-size: var(--fs-xl); font-weight: 700; color: var(--text-strong);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .calc-card-sub { font-size: var(--fs-xs); color: var(--text-muted); }

  .calc-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }

  /* ─────────── "Bura mahina" safety check ─────────── */
  .calc-safety {
    padding: var(--sp-4); border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--ink-50);
  }
  .calc-safety-ok  { border-left: 4px solid var(--success); background: var(--green-50); }
  .calc-safety-bad { border-left: 4px solid var(--error); background: #fff5f5; }
  .calc-safety-title { font-weight: 700; margin: 0 0 var(--sp-2); color: var(--text-strong); }
  .calc-safety-ok  .calc-safety-title { color: var(--green-800); }
  .calc-safety-bad .calc-safety-title { color: var(--error); }
  .calc-safety-body { font-size: var(--fs-sm); color: var(--ink-700); margin: 0; line-height: 1.6; }

  /* ─────────── Eligibility verdict ─────────── */
  .calc-verdict { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); }
  .calc-verdict-ok   { background: var(--green-50); border: 1px solid var(--green-200); }
  .calc-verdict-warn { background: #fffbf3; border: 1px solid var(--saffron-500); }
  .calc-verdict-title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--sp-1); }
  .calc-verdict-ok .calc-verdict-title { color: var(--green-800); }
  .calc-verdict-warn .calc-verdict-title { color: var(--saffron-600); }
  .calc-verdict-sub { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; }

  .calc-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
  .calc-check {
    display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
  }
  .calc-check-mark {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  }
  .calc-check-ok .calc-check-mark { background: var(--green-100); color: var(--green-800); }
  .calc-check-no .calc-check-mark { background: #fee; color: var(--error); }
  .calc-check-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .calc-check-why { font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.5; }

  .calc-placeholder {
    padding: var(--sp-6); text-align: center; color: var(--text-muted);
    border: 1px dashed var(--border); border-radius: var(--radius-lg);
  }

  .calc-state-box {
    padding: var(--sp-4); border: 1px solid var(--border);
    border-radius: var(--radius-lg); background: var(--bg);
  }
  .calc-state-title { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
  .calc-state-note { font-size: var(--fs-sm); color: var(--ink-600); margin-top: var(--sp-3); line-height: 1.6; }
  .calc-state-portals { font-size: var(--fs-sm); margin-top: var(--sp-3); }

  /* ─────────── Tables ─────────── */
  .calc-compare, .calc-schedule, .calc-breakdown { padding-block: var(--sp-4); }
  .calc-section-lede { color: var(--ink-600); max-width: 66ch; margin-bottom: var(--sp-4); }

  /* Chaudi table apne container mein scroll kare — page kabhi na kare */
  .calc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calc-table {
    width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .calc-table th, .calc-table td {
    padding: var(--sp-2) var(--sp-3); text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--border);
  }
  .calc-table th {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 600; background: var(--ink-50);
    position: sticky; top: 0;
  }
  .calc-row-current { background: var(--green-50); }
  .calc-row-current em { font-style: normal; color: var(--green-700); font-size: var(--fs-xs); }
  .calc-row-total td { border-top: 2px solid var(--border); border-bottom: 0; }
  .calc-extra { color: var(--error); font-weight: 600; }
  .calc-int  { color: var(--saffron-600); }
  .calc-prin { color: var(--green-700); }

  .calc-details { margin-top: var(--sp-2); }
  .calc-details summary {
    cursor: pointer; padding: var(--sp-3) 0; font-weight: 600;
    color: var(--brand); min-height: 44px; display: flex; align-items: center;
  }
  .calc-details[open] summary { margin-bottom: var(--sp-2); }
  /* Lambi table ko itni hi oonchai mein rakho ki page na bhare */
  .calc-details .calc-table-wrap { max-height: 60vh; overflow-y: auto; }

  /* ─────────── Tools hub ─────────── */
  .tools-grid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5);
    padding-block: var(--sp-4) var(--sp-8);
  }
  @media (min-width: 640px)  { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .tool-card {
    display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg); overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
  }
  .tool-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
  .tool-card-media { display: block; line-height: 0; background: var(--ink-100); }
  .tool-card-img { width: 100%; height: auto; display: block; }
  .tool-card-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1; }
  .tool-card-body h2 { font-size: var(--fs-lg); line-height: 1.3; margin: 0; }
  .tool-card-body h2 a { color: var(--text-strong); text-decoration: none; }
  .tool-card-body h2 a:hover { color: var(--brand); }
  .tool-card-desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; line-height: 1.5; }
  .tool-card-point {
    font-size: var(--fs-xs); color: var(--green-700); margin: auto 0 0;
    padding-top: var(--sp-2); line-height: 1.5;
  }
}