/*  99Lease — design system  ·  "Paper & Ink"
    ===========================================================================
    ROOP KA FAISLA MAALIK KA HAI (10 Sep 2026)
    ------------------------------------------
    Kagaz aur syahi. Halka garam kagaz (bone), gehri van-syahi, aur ek
    mitti-rang (clay) jo sirf zaroori jagah bolta hai. Sona/gradient/glow
    nahi -- lakeer, jagah aur taaipografi se rutba banta hai.

      Fraunces        — sirf sheershak aur ank (kiraya). Ek purani-si,
                        garam serif; portal ko "listing dump" ke bajaye
                        ek patrika jaisa banati hai.
      Instrument Sans — baaki sab. Saaf, aaj ka, Inter jitna dekha hua
                        nahi.
      Font na aaye to Georgia + system-ui par gir jaata hai.

    ⚠️  PHONE PAR DONO KI JAGAH PHONE KA APNA FONT (11 Oct 2026).
        Maalik: "mobile mode mein ... mobile app ki feeling aaye aesa na
        lage ki web portal khola hai ... sunlight mein ... fonts easily
        pade ja sake." 640px tak `--f-sans` aur `--f-serif` dono
        system-ui hain -- iPhone par San Francisco, Android par Roboto,
        yaani wahi akshar jo phone ke har app me hain. 641px se upar
        Fraunces + Instrument Sans jyun ke tyun (10 Sep ka faisla desktop
        par bacha hai). Font ki CSS ka `<link>` bhi `media` ke saath hai,
        isliye phone ye font DOWNLOAD hi nahi karta. Wapas chahiye to
        neeche `:root` ke do token -- ek jagah.

    ⚠️  YEH ROOP EK BAAR CHHODA GAYA THA AUR WAPAS LAAYA GAYA HAI.
        10 Sep 2026 ko maalik ne pehle navy/blue/orange + Inter maanga
        aur wo poori site par lag bhi gaya tha. Usi din, dono roop saath
        dekhne ke baad, unhone yeh wala chuna. Isliye:

        - navy wale palette ka koi tukda yahan nahi bacha hai, warna
          agla padhne wala do adhoore faisle padhta.
        - us daur me pakde gaye CHHE ASLI BUG yahan BACHE hue hain. Wo
          rang ke bug nahi the -- wo tab bhi galat the jab yeh file
          Paper & Ink thi. Har ek ke paas apna comment hai.

    KAGAZ KE ROOP ME LIME KYUN
    --------------------------
    --cta (#c9f24c) is palette ka hissa nahi tha; wo Figma wale design ke
    saath aaya. Wo SIRF sticker, hero ki patti aur ek CTA par lagta hai.
    Ink (#14201c) uspar 13:1 par baithta hai -- yaani sabse chhote matn
    par bhi paas. Kabhi safed matn mat rakhna: lime halka rang hai.

    NAAP (dono roop me jaanche gaye):
        --ink    on --surface   15:1 se upar
        --ink-2  on --surface   11.21 (gehre roop me 10.22)
        --ink-3  on --surface   8.24  (gehre roop me 7.94) -- sabse halka matn, AAA
        --on-a1  on --a1        7.82 (bhare hue button ka matn)
        --on-cta on --cta       13   (stamp aur hero ki patti)
        --a1/--a2 on --surface  5:1 se upar

    ⚠️  11 Oct 2026 -- DHOOP ME PADHNA. Ink ke do halke darje GEHRE kiye
        gaye (gehre roop me HALKE) -- rang wahi, ek hi factor se. Pehle
        --ink-3 card par 5.06 aur --surface-2 par 4.41 tha (AA ke kinare),
        jo dhoop me phone ki chamak ghatne par dhul jaata hai. Ab:
                      --surface  --surface-2  --surface-3
          halka --ink-2   11.21       9.77         8.76    (#333c38, pehle #4c5a54)
          halka --ink-3    8.24       7.18         6.44    (#46504b, pehle #627169)
          gehra --ink-2   10.22       9.42         8.23    (#bbc8c0, pehle #a6b2ab)
          gehra --ink-3    7.94       7.32         6.40    (#a0b2a8, pehle #7d8b83)
        Teen darje teen hi rahe: --ink-2 / --ink-3 ke beech 1.36 (halka)
        aur 1.29 (gehra). Pehle ka niyam -- "--ink-3 rangeen chip par
        nahi, wahan --ink-2" -- bacha hai; ab wo kram ka faisla hai,
        majboori nahi. Ye ginti hai, andaaza nahi
        (`scripts/test/phone-type.test.js` har ank dobara ginta hai).

    LAKEER KE DO DARJE (matn ke liye nahi):
        --line          ~1.4   card/section ki sajawati lakeer
        --line-strong   ~3.25  input aur button ki lakeer -- 3:1 se
                               neeche nahi ja sakti (WCAG 1.4.11).

    ⚠️  BAND aur TICKER apna rang lete hain (--band-bg), --a1 nahi.
        Wajah gehre roop me dikhti hai: wahan --a1 palat kar HALKA pudina
        (#5ecfa4) ho jaata hai, aur poori chaudai ka band us rang me
        aankh me chubhta hai. Band dono roop me GEHRA rehta hai.

    MOTION
    ------
    Har animation `prefers-reduced-motion` ke peechhe hai. Chamak dikhane
    ke chakkar me kisi ko chakkar nahi aana chahiye.
=========================================================================== */

/* ── tokens: HALKA roop (default) ─────────────────────────────────────── */
:root {
  color-scheme: light;

  --shell:      1180px;
  --shell-form: 540px;

  /* kagaz */
  --bg:        #f6f3ec;
  --bg-2:      #efeae0;
  --surface:   #fffdf9;
  --surface-2: #f2ede4;
  --surface-3: #e8e1d4;

  /* lakeerein */
  --line:        #e0d8c9;
  --line-strong: #998c76;

  /* syahi */
  --ink:   #14201c;
  --ink-2: #333c38;
  --ink-3: #46504b;

  /* rang */
  --a1: #0f5c47;   /* van-hara — mukhya kaam ka rang            */
  --a2: #a34e22;   /* mitti     — dhyaan khinchne wala doosra   */
  --a3: #6d47d9;   /* violet    — SIRF AI ke liye (network bhar) */
  --cta: #c9f24c;  /* lime      — SIRF sticker/patti/ek CTA     */
  --on-cta: #14201c;

  /* band aur ticker — dono roop me gehra */
  --band-bg:    #0f5c47;
  --band-ink:   #fffdf9;
  --band-ink-2: #c2ddd1;

  --a1-rgb: 15,92,71;
  --a2-rgb: 163,78,34;
  --due-rgb: 176,58,43;
  --a3-rgb: 109,71,217;
  --bg-rgb: 246,243,236;
  --cta-rgb: 201,242,76;

  --on-a1: #fffdf9;   /* hare bharav par matn */
  --on-a2: #fffdf9;

  /* sanket */
  --ok:   #14795c;
  --warn: #9a6a12;
  --due:  #b03a2b;
  --warn-bg:  #fdf4e0;
  --warn-line:#e6cf9c;
  --warn-ink: #6b4a08;

  --heart: #b03a5e;   /* shortlist ka dil */

  /*  Neeche chipki hui patti ki oonchai. Patti aur footer ki khaali
      jagah DONO yahi padhte hain -- do jagah likhne par ek din wo alag
      ho jaate. */
  --tick-h: 48px;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(24,20,12,.06);
  --sh-2: 0 24px 48px -28px rgba(24,20,12,.45);
  --sh-3: 0 32px 64px -32px rgba(24,20,12,.55);

  /*  "Sticker" wali thos parchhai -- gradient/glow nahi, syahi ki ek
      seedhi lakeer. Yahi wo cheez hai jo lime ke stamp ko kagaz par
      chipka hua dikhati hai. */
  --ink-off:    3px 3px 0 var(--ink);
  --ink-off-lg: 6px 6px 0 var(--ink);

  --ease: cubic-bezier(.2,.7,.3,1);

  /*  Phone par (640px tak) dono PHONE KA APNA font -- sar par wajah.
      Badi screen ka font neeche `@media (min-width: 641px)` me. */
  --f-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --f-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

/* ── tokens: GEHRA roop ───────────────────────────────────────────────────
   Do baar likha hai: ek baar system ki pasand ke liye, ek baar toggle ke
   liye. Dono ki value HU-BA-HU ek honi chahiye. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:        #0b100e;
    --bg-2:      #0e1412;
    --surface:   #131a17;
    --surface-2: #19221e;
    --surface-3: #222d28;

    --line:        #26302b;
    --line-strong: #5d6c64;

    --ink:   #f3f4ef;
    --ink-2: #bbc8c0;
    --ink-3: #a0b2a8;

    --a1: #5ecfa4;
    --a2: #e08a5b;
    --a3: #a78bfa;
    --cta: #c9f24c;
    --on-cta: #14201c;

    /*  ⚠️ Band --a1 NAHI le sakta: yahan wo halka pudina hai. */
    --band-bg:    #0d3527;
    --band-ink:   #fffdf9;
    --band-ink-2: #c2ddd1;

    --a1-rgb: 94,207,164;
    --a2-rgb: 224,138,91;
    --due-rgb: 240,119,106;
    --a3-rgb: 167,139,250;
    --bg-rgb: 11,16,14;
    --cta-rgb: 201,242,76;

    --on-a1: #06120e;
    --on-a2: #1c0f06;

    --ok:   #5ecfa4;
    --warn: #e2b455;
    --due:  #f0776a;
    --warn-bg:  #241d0d;
    --warn-line:#5a4a1e;
    --warn-ink: #ecd9a4;

    --heart: #f472a0;

    --sh-1: 0 1px 2px rgba(0,0,0,.5);
    --sh-2: 0 18px 40px -26px rgba(0,0,0,.8);
    --sh-3: 0 28px 60px -30px rgba(0,0,0,.9);

    /*  ⚠️ Gehre roop me offset ki "syahi" var(--ink) NAHI ho sakti --
        wahan ink lagbhag safed hai, aur safed parchhai ek chamakti hui
        lakeer jaisi dikhti hai. */
    --ink-off:    3px 3px 0 #05100c;
    --ink-off-lg: 6px 6px 0 #05100c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0b100e;
  --bg-2:      #0e1412;
  --surface:   #131a17;
  --surface-2: #19221e;
  --surface-3: #222d28;

  --line:        #26302b;
  --line-strong: #5d6c64;

  --ink:   #f3f4ef;
  --ink-2: #bbc8c0;
  --ink-3: #a0b2a8;

  --a1: #5ecfa4;
  --a2: #e08a5b;
  --a3: #a78bfa;
  --cta: #c9f24c;
  --on-cta: #14201c;

  --band-bg:    #0d3527;
  --band-ink:   #fffdf9;
  --band-ink-2: #c2ddd1;

  --a1-rgb: 94,207,164;
  --a2-rgb: 224,138,91;
  --due-rgb: 240,119,106;
  --a3-rgb: 167,139,250;
  --bg-rgb: 11,16,14;
  --cta-rgb: 201,242,76;

  --on-a1: #06120e;
  --on-a2: #1c0f06;

  --ok:   #5ecfa4;
  --warn: #e2b455;
  --due:  #f0776a;
  --warn-bg:  #241d0d;
  --warn-line:#5a4a1e;
  --warn-ink: #ecd9a4;

  --heart: #f472a0;

  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 18px 40px -26px rgba(0,0,0,.8);
  --sh-3: 0 28px 60px -30px rgba(0,0,0,.9);

  --ink-off:    3px 3px 0 #05100c;
  --ink-off-lg: 6px 6px 0 #05100c;
}

/*  Badi screen par 10 Sep ka roop: Fraunces + Instrument Sans. (Phone ka
    font upar `:root` me -- mobile-first: base phone, yeh apwaad.) */
@media (min-width: 641px) {
  :root {
    --f-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", sans-serif;
    --f-serif: "Fraunces", Georgia, "Times New Roman", serif;
  }
}

/* ── reset ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; background: var(--bg); }
/*  Phone ko apne hisaab se akshar bada-chhota karne mat do (iPhone
    landscape me ise chupchaap badha deta hai). Naap CSS ka hai. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--f-sans);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
  /*  Footer ko neeche dhakelne ke liye. Sirf min-height se wo neeche
      nahi jaata -- chhote safhe par wo BEECH me tik jaata tha aur uske
      neeche kagaz khula reh jaata, jaise page adhoora load hua ho.
      Naapa gaya: khaali shortlist par 221px, khaali search par 127px.

      ⚠️ Yeh un teeno haalat me dikhta hai jahan aadmi pehle se nirash
         hai -- khaali shortlist, koi nateeja nahi, aur error. Wahi teen
         jagah page ka toota hua dikhna sabse mehnga hai.

      ⚠️ 100dvh JODA gaya hai, 100vh HATAYA nahi. Phone par 100vh
         address-bar ki oonchai bhi gin leta hai, isliye wahan wo khaali
         patti phir aa jaati. Purani line pehle rehti hai taaki jo
         browser dvh nahi jaanta wo bhi kaam kare. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /*  Kagaz ka ehsaas: do bahut halke garam gole, aur bas. Image nahi,
      isliye page halka rehta hai. */
  background-image:
    radial-gradient(1100px 620px at 8% -10%, rgba(var(--a2-rgb),.07), transparent 62%),
    radial-gradient(900px 520px at 96% 2%, rgba(var(--a1-rgb),.08), transparent 60%),
    linear-gradient(var(--bg), var(--bg-2));
  background-attachment: fixed;
}

/*  [hidden] ka bharosa
    -------------------
    HTML ka `hidden` browser ke default me `display:none` deta hai -- par wo
    default hai, aur koi bhi class use haraa deti hai. Yeh ek line usse
    bandh kar deti hai. `!important` yahan jaayaz hai: `hidden` ka matlab hi
    "mat dikhao", uspar bahas ki gunjaish nahi. */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: rgba(var(--a2-rgb),.22); color: var(--ink); }

/*  Ek hi jagah se focus ka ghera. Har control par alag likhne se ek din
    koi control bina ghere ke reh jaata hai -- aur keyboard wala aadmi
    kho jaata hai. */
:focus-visible {
  outline: 2px solid var(--a1);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--f-serif); font-weight: 600; font-optical-sizing: auto; letter-spacing: -.01em; }

/*  Ank hamesha ek chaudai ke -- kiraya badalte waqt sankhya hilti nahi. */
.num, .l-priceover, .l-stat b, .r-money-main b, .l-table td { font-variant-numeric: tabular-nums; }

.shell      { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 18px; }
.shell-form { width: 100%; max-width: var(--shell-form); margin: 0 auto; padding: 0 18px; }
@media (min-width: 561px) { .shell { padding: 0 28px; } }

/* ── entrance ─────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .55s var(--ease) both; }
.d1 { animation-delay: .06s } .d2 { animation-delay: .12s } .d3 { animation-delay: .18s }

/*  SCROLL-TRIGGERED REVEAL -- koi event listener nahi, koi JS scroll
    handler nahi. lease-theme.js (head me, blocking) <html> par turant
    .js-reveal lagata hai; EK IntersectionObserver phir [data-reveal] ko
    pehli nazar me .l-in deta hai.

    ⚠️ CHHUPAV SIRF .js-reveal KE ANDAR. Bina JS ke class lagti hi nahi --
       yaani bina-JS wale ko SAB KUCH dikhta hai, khaali section nahi.
       Observer na ban sake to lease-theme.js use hata deti hai. CSS akeli
       kabhi content nahi chhupati -- yahi is block ka pehla niyam hai. */
html.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.js-reveal [data-reveal].l-in { opacity: 1; transform: none; }
/*  Doosri suraksha -- observer ban nahi saka to class hata di jaati hai;
    ye line uske bhi ek kadam peeche ka bharosa hai. */
html.no-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }

/*  Sab animation ka pehra -- yeh block pehle entrance ke saath tha; reveal
    aate hi bhi wahi kaam karta hai. Har chamak iske peechhe hai. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /*  Reveal bhi -- koi fade/slide nahi, sab turant poora dikhe. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── eyebrow: chhoti lakeer + chhota matn ──────────────────────────────── */
/*  Har section ke upar ek hi tarah ka nishaan. Yahi wo dohraav hai jisse
    page "banaya hua" lagta hai, "joda hua" nahi. */
.l-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px;
}
.l-eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--a1); flex: 0 0 auto;
}

/* ── header ───────────────────────────────────────────────────────────── */
.l-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(var(--bg-rgb),.85);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.l-head-in { display: flex; align-items: center; gap: 8px; padding: 14px 10px; }
.l-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }

/*  Nishaan: gradient nahi, ek thos gehra dabba. Gradient wala logo har
    startup ka hai; thos rang chhapai me bhi utna hi accha aata hai. */
.l-mark {
  width: 28px; height: 28px; border-radius: 11px;
  background: var(--a1); color: var(--on-a1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-weight: 700; font-size: 13px; letter-spacing: -.5px;
  box-shadow: var(--sh-1);
}
/*  ⚠️ ★ TANG PHONE PAR SIRF GOL NISHAAN, SHABD NAHI -- aur yeh naap kar
    chuna gaya, pasand se nahi (3 Oct 2026).

    Phone ka menu (☰) aane se header me ek aur 38px ki cheez aa gayi aur
    375px par qataar 30px bahar nikalne lagi (naapa gaya: logo 99 + gap 12 +
    Shortlist 64 + menu 38 + theme 40 + CTA 122 + gaddi 24 = 405 banaam 375).
    Teen raaste the:

      1. sab kuch 2-4px chhota karo  -> 22px bachte, yaani 8px kam. Aur agle
         din CTA ka matn ek akshar lamba hua to phir toot jaata.
      2. "Shortlist" ko menu me daal do -> 64px bachte, par uski ginti wali
         chip bhi saath chali jaati, aur wahi ek cheez hai jo batati hai ki
         aapne kuch save kiya hua hai.
      3. 480px ke neeche logo ka SHABD chhupao -> 71px bachte. Gol "99"
         nishaan rehta hai (wo khud link hai aur ghar le jaata hai), poori
         baat `aria-label="99Lease home"` me rehti hai, aur 481px se shabd
         wapas aa jaata hai.

    Teesra chuna gaya: na koi matn badla, na koi kaam chhupa. Naap ke baad
    375px par qataar 310px ki hai -- 41px ki jagah bachi hui. */
.l-word { display: none; }
@media (min-width: 481px) {
  .l-word {
    display: block;
    font-family: var(--f-serif); font-weight: 600; font-size: 20px; letter-spacing: -.3px;
  }
}
.l-word em { font-style: italic; color: var(--a1); }

.l-nav { margin-left: auto; display: flex; align-items: center; gap: 0; }
.l-nav a {
  font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink-2);
  padding: 7px 7px; border-radius: var(--r-pill); position: relative;
  /*  ⚠️ Nav ka koi link DO LAKEER me nahi tootta. Phone ka menu (☰) aane se
      header me ek aur 38px ki cheez aa gayi, aur "List your property" turant
      do lakeer me toot gaya -- header 71 se 83px ka ho gaya (375px par naapa).
      Naap: logo 99 + Shortlist 64 + menu 38 + theme 40 + CTA 103 + gaddi 24
      = 368px, yaani 375 me aa jaata hai -- bas tootne nahi dena tha. */
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.l-nav a:hover { color: var(--ink); background: var(--surface-2); }
.l-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--surface-2); }
.l-nav a.cta {
  color: var(--on-a1); background: var(--a1); font-weight: 600;
  margin-left: 2px; padding: 7px 9px; font-size: 12.5px; border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}
.l-nav a.cta:hover { color: var(--on-a1); background: var(--a1); filter: brightness(1.08); }

/*  ⚠️ `.hide-sm` ab BASE me chhupa hai, aur 800px se upar dikhta hai.
    Pehle ulta likha tha. Dikhaawat wahi hai -- par us din tak "chhupana"
    ek apwaad tha; ab "dikhana" apwaad hai, aur yahi mobile-first ka poora
    matlab hai.

    `display: block` jaan-boojh kar: `.l-nav` flex hai, to uske bachche ka
    `display: inline` waise bhi `block` me badal jaata hai (blockification).
    Yaani computed value pehle bhi `block` thi -- browser me naapi gayi. */
.l-nav a.hide-sm { display: none; }
/*  ⚠️ 7 Oct 2026: 801px -> 880px, aur yeh NAAPA hua hai. Nav me ek
    chautha link aaya ("Paperwork help", /services ka darwaza) aur 801px
    par qataar 715px ki ho gayi -- shell se 64px BAHAR (820px par 45,
    840 par 25, 860 par 5; 880 se saaf). HEAD par wahi qataar in sab naap
    par 0 overflow deti thi; dono A/B chala kar naapi gayin.
    880px us soochi ka apna ank hai jo mobile-first me jyun ki tyun rakhi
    gayi thi -- naya paimana yahan nahi ghusaya ja raha. Neeche `.l-more`
    ka ank bhi WAHI hona chahiye, warna link ek pal DO jagah dikhte hain
    (mobile-first.test.js dono ko CSS se nikaal kar milaata hai).
    99Yard par theek yahi hua (wahan 701 -> 780).

    ⚠️ 12 Oct 2026: 880px -> 900px, aur yeh bhi NAAPA hua hai. Us din
    maalik ne nav ka lableel badla ("CP login" -> "Refer & Earn", taaki
    naya aadmi bhi samjhe ki darwaza kis liye hai), aur wo shabd 104px ka
    hai jahan purana 74px ka tha. Chromium me A/B chala kar naapa gaya:
    880px par purane lableel ke saath qataar THEEK shell ki lakeer par
    khatam hoti thi (overflow 0), aur naye ke saath 6px bahar nikal gayi --
    yaani wo ank hamesha se kinare par khada tha, is shabd ne sirf use
    paar kara diya. 900px par phir 0, aur 14px ki jagah bachi rehti hai.
    900 bhi usi purani soochi ka apna ank hai (§23) -- naya paimana
    yahan nahi ghusaya ja raha. */
@media (min-width: 900px) { .l-nav a.hide-sm { display: block; } }

/*  ═══ PHONE KA MENU (maalik, 3 Oct 2026) ════════════════════════════════
    Maalik: "99lease and 99Yard koa mobile first banao … professional feel
    nahin aa raha".

    ⚠️ ★ 3 OCT SE PEHLE PHONE PAR YE LINK KAHIN SE BHI NAHI KHULTE THE ★
    `.hide-sm` 800px ke neeche "Browse rentals", "How it works" aur
    "CP login" ko chhupa deta tha, aur unke badle kuch aata hi nahi tha --
    poore repo me hamburger ka koi nishaan nahi mila (grep: 0). Yaani
    phone par CP ka darwaza sirf footer me tha, aur "Browse rentals"
    kahin bhi nahi. Wo chhupana adhoora tha, faisla nahi.

    ⚠️ `<details>` -- apna banaya hua toggle NAHI. Wo bina JS ke keyboard,
    screen reader aur "find in page" teenon sambhaalta hai; haath ka toggle
    teeno alag se likhwata hai aur ek hamesha chhoot jaata hai. Yahi faisla
    `/list-property` ki sach wali patti par bhi liya gaya tha (§7).

    ⚠️ Panel ke link upar wali `hide-sm` soochi se HU-BA-HU hain, aur
    `mobile-first.test.js` dono ko milaata hai -- warna ek jagah link jud
    jaayega aur doosri reh jaayegi.                                       */
/*  ═══ UNGLI KA NISHAANA 44px (maalik, 3 Oct 2026) ══════════════════════
    `.l-theme`, `.l-save` aur `.l-send` 34x34 ke hain -- dekhne me theek,
    chhoone me chhote (naapa gaya; 44px wahi hadd hai jo form ke apne design
    system me `--rds-touch` me likhi hai).

    ⚠️ NAAP NAHI BADHAYA, NISHAANA BADHAYA. Button ko 44px karne par header
    ki qataar phir bahar nikalti (upar `.l-word` wala naap dekhein) aur card
    par dil/share ek doosre se chipak jaate. Ek paardarshi `::after` us se
    bahar nikal kar 44x44 ka chhoone-laayak ilaaka banata hai -- ek bhi pixel
    ka layout nahi hilta (A/B me naapa gaya: shoonya farq).

    ⚠️ Sirf `(pointer: coarse)` par -- maus walon ke liye 34px theek hai, aur
    bina shart ke yeh nishaana padosi button ke upar chadh jaata. */
@media (pointer: coarse) {
  .l-theme, .l-save, .l-send, .l-more-btn { position: relative; }
  .l-theme::after, .l-save::after, .l-send::after, .l-more-btn::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

.l-more { position: relative; flex: 0 0 auto; }
.l-more-btn {
  list-style: none; width: 32px; height: 32px; margin-left: 2px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); font-size: 15px; line-height: 1;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
/*  Safari ka apna teer. `list-style: none` har jagah kaam nahi karta. */
.l-more-btn::-webkit-details-marker { display: none; }
.l-more-btn::marker { content: ""; }
.l-more-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.l-more[open] .l-more-btn { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.l-more-panel {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 60;
  min-width: 200px; display: flex; flex-direction: column; gap: 2px;
  padding: 7px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--sh-2);
}
/*  Panel ke link nav ke link se BADE hain -- yeh ungli se dabane ki jagah
    hai, maus se nahi. 44px wahi hadd hai jo form ke apne design system me
    likhi hai (`--rds-touch`). */
.l-more-panel a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 14px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.l-more-panel a:hover { color: var(--ink); background: var(--surface-2); }
@media (min-width: 900px) { .l-more { display: none; } }   /* ★ upar wale `hide-sm` ke ank se BANDHA hua -- dono ek saath badlo */
@media (prefers-reduced-motion: reduce) { .l-more-btn { transition: none; } }

/*  ⚠️ Header TEEN seedhiyon me badhta hai, aur sabse neechli seedhi ab BASE
    hai -- yaani sabse tang phone (305px asli chaudai par naapa gaya: 320px
    ka device jahan scrollbar jagah leta hai; wahan header 29px bahar nikal
    jaata tha). Koi cheez chhupti nahi, sirf chhoti hoti hai.

    Purana kram ulta tha: base me bada header, phir `max-width: 460px` aur
    `max-width: 400px` use ghatate the. Naap ek bhi nahi badla -- bas ab
    chhota pehle likha hai aur bada baad me. */
@media (min-width: 401px) {
  .l-head-in { gap: 12px; padding-left: 0; padding-right: 0; }
  .l-nav { gap: 2px; }
  .l-mark { width: 36px; height: 36px; font-size: 15px; }
  .l-nav a { padding: 9px 13px; font-size: 13.5px; }
  .l-nav a.cta { padding: 9px 13px; font-size: 13px; margin-left: 4px; }
  .l-more-btn { width: 34px; height: 34px; margin-left: 4px; }
  /*  ⚠️ `.l-theme` ka restore YAHAN NAHI HO SAKTA -- uska base rule is block
      ke BAAD aata hai (file me neeche), aur same specificity par baad wala
      jeet-ta hai. Pehli koshish yahin thi aur chup-chaap gir gayi: 1280px
      par theme button ka margin 6 ki jagah 2 reh gaya, aur poori nav 37px
      khisak gayi (A/B me pakda gaya). Uska restore uske apne rule ke theek
      neeche hai. Wahi galti `.l-sec` par bhi hui thi -- usi din. */
}
@media (min-width: 461px) {
  .l-nav a.cta { padding: 10px 18px; font-size: 13.5px; margin-left: 8px; }
}

/* Header par shortlist ki ginti */
.l-nav .count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: var(--a2); color: var(--on-a2);
  font-size: 12px; font-weight: 700; text-align: center; line-height: 18px;
}

/*  Roshni/andhera ka button. Hamesha dikhta hai -- gehre roop me aaya
    aadmi halke me ja sake aur ulta bhi. */
.l-theme {
  flex: 0 0 auto; width: 34px; height: 34px; margin-left: 2px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); transition: .18s var(--ease);
}
@media (min-width: 401px) { .l-theme { margin-left: 6px; } }
.l-theme:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
/*  Icon ABHI ka roop batata hai (halke me sooraj, gehre me chaand); button
    ka aria-label batata hai ki dabane par kya hoga. Default sooraj hai --
    jis browser me prefers-color-scheme hai hi nahi, wahan bhi ek hi icon
    dikhe, dono nahi. */
.l-theme .sun  { display: block; }
.l-theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .l-theme .sun  { display: none; }
  :root:not([data-theme="light"]) .l-theme .moon { display: block; }
}
:root[data-theme="dark"] .l-theme .sun  { display: none; }
:root[data-theme="dark"] .l-theme .moon { display: block; }
:root[data-theme="light"] .l-theme .sun  { display: block; }
:root[data-theme="light"] .l-theme .moon { display: none; }

/* ── buttons / inputs ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 600; font-size: 14px; line-height: 1;
  padding: 13px 22px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: .18s var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  border-color: transparent; color: var(--on-a1); background: var(--a1);
  box-shadow: var(--sh-1);
}
.btn-primary:hover { background: var(--a1); filter: brightness(1.1); border-color: transparent; }
.btn-clay { border-color: transparent; color: var(--on-a2); background: var(--a2); }
.btn-clay:hover { background: var(--a2); filter: brightness(1.08); }
.btn-sm { padding: 9px 15px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: transparent; border-color: var(--line-strong); }

/*  "Aage ka teer" wala link -- section ke kone me. Button jaisa dabba nahi:
    wo har jagah lagne par page shor karne lagta hai. */
.l-link {
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: .18s var(--ease); white-space: nowrap;
}
.l-link:hover { color: var(--a1); border-color: var(--a1); }

.inp, .sel {
  font: inherit; font-family: var(--f-sans); font-size: 15px; width: 100%; color: var(--ink);
  padding: 13px 15px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: .18s var(--ease);
}
.sel {
  appearance: none; padding-right: 34px; cursor: pointer; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23808f87' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.inp:focus, .sel:focus {
  outline: none; border-color: var(--a1);
  box-shadow: 0 0 0 3px rgba(var(--a1-rgb),.16);
}
.inp::placeholder { color: var(--ink-3); opacity: 1; }
.sel option { background: var(--surface); color: var(--ink); }

.chip {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; white-space: nowrap; transition: .18s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--a1); border-color: transparent; color: var(--on-a1); }

/* ── AI pill ──────────────────────────────────────────────────────────── */
/*  Violet SIRF yahan. Poore network me jo violet dikhe, wo AI hai --
    isliye ise kisi aam button par mat lagaiye. */
.ai-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--r-pill);
  color: var(--a3); background: rgba(var(--a3-rgb),.09);
  border: 1px solid rgba(var(--a3-rgb),.28);
}
.ai-pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--a3); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* ── hero ─────────────────────────────────────────────────────────────── */
.l-hero { position: relative; padding: 30px 0 18px; overflow: hidden; }
/*  Phone par hero CHHOTA hai -- aur ab wo BASE hai, apwaad nahi: maqsad
    yahi hai ki pehli listing scroll se pehle jhalke. Bada hero phone par
    poori screen kha jaata hai aur aadmi ko lagta hai site par kuch hai hi
    nahi. 620px se upar hi wo bada hota hai.

    ⚠️ 3 Oct 2026 se pehle yahan likha tha: "SIRF `.l-hero` ka padding
       yahan; h1/.sub/.l-sec ke overrides NEECHE hain, apne base niyamon ke
       BAAD". Wo h1 aur .sub ke liye sach tha, `.l-sec` ke liye NAHI -- uska
       base us override ke BAAD aata tha, to phone par wo kabhi laga hi
       nahi. Poori baat `.l-sec` ke apne block par likhi hai. */
@media (min-width: 621px) {
  .l-hero { padding: 72px 0 32px; }
}
/*  Kagaz par ek halki lakeerdaar patti -- jaal (grid) nahi. Jaal har tech
    site par hai; yeh ek register/khaata jaisa lagta hai, jo kiraye ki
    duniya se mel khaata hai. Neeche ek halki mitti ki garmi -- dono mil
    kar pehli screen ko aadhe page se zyada bhaari kiye bina gehra karte
    hain. */
.l-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, rgba(var(--a1-rgb),.06) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(80% 70% at 30% 0%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(80% 70% at 30% 0%, #000 5%, transparent 72%);
}
.l-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(720px 420px at 88% 8%, rgba(var(--a2-rgb),.09), transparent 65%);
}
.l-hero .shell { position: relative; }

.l-hero h1 {
  margin: 12px 0 10px;
  font-size: clamp(31px, 8.4vw, 42px); line-height: .98;
  letter-spacing: -.035em; max-width: 15ch;
}
/*  Ek shabd lime ki patti par. Gradient wala matn jaan-boojh kar
    hataya gaya -- wo har jagah hai, aur chhote screen par dhundhla padta
    hai. */
/*  Lime BHARAV hai, matn nahi -- wo halka rang hai aur kagaz par matn
    ki tarah kaam hi nahi karta. Patti ke upar matn --on-cta (syahi) hai:
    13:1. Patti baayein se khulti hai; reduced-motion par global block
    usse turant poori kar deta hai. */
.l-hero h1 .g {
  position: relative; display: inline-block; z-index: 0;
  font-style: italic; color: var(--on-cta); padding: 0 .1em;
}
.l-hero h1 .g::before {
  content: ""; position: absolute; left: 0; right: 0; top: .04em; bottom: -.11em;
  background: var(--cta); border-radius: 12px; z-index: -1;
  transform-origin: left; animation: l-gswipe .7s var(--ease) .45s both;
}
@keyframes l-gswipe {
  from { transform: rotate(-1deg) scaleX(0); }
  to   { transform: rotate(-1deg) scaleX(1); }
}
.l-hero .sub {
  margin: 0 0 20px; font-size: 15px; color: var(--ink-2);
  max-width: 54ch; line-height: 1.65;
}

/*  Hero ka bada naap 620px se upar. Phone wala naap base me hai (upar),
    isliye yahan sirf "bade par kya badalta hai" likha jaata hai.

    ⚠️ Yeh block apne base niyamon ke BAAD hi reh sakta hai -- same
    specificity par baad wala jeet-ta hai. Wahi cheez `.l-sec` par 3 Oct
    tak toot'ti rahi; uska comment poora kissa likhta hai. */
@media (min-width: 621px) {
  .l-hero h1 { margin: 20px 0 16px; font-size: clamp(40px, 6.6vw, 78px); }
  .l-hero .sub { margin-bottom: 30px; font-size: clamp(15px, 1.6vw, 18px); }
}

/*  Khoj ka takhta -- ek kagaz ka purza, SaaS ka kaanch nahi. */
.l-search {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 8px 8px 16px;
  box-shadow: var(--sh-2);
  max-width: 760px;
}
.l-searchrow { display: flex; gap: 10px; flex-direction: column; align-items: stretch; padding: 4px 10px 0; }
.l-searchrow .inp {
  flex: 1 1 auto; font-size: 17px; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0;
}
.l-searchrow .inp:focus { box-shadow: none; }
.l-searchrow .btn { flex: 0 0 auto; width: 100%; padding: 14px; margin-top: 10px; }
@media (min-width: 621px) {
  .l-searchrow { flex-direction: row; align-items: center; padding: 4px 8px 0 8px; }
  .l-searchrow .inp { padding: 12px 6px; border-bottom: 0; }
  .l-searchrow .btn { width: auto; padding: 13px 22px; margin-top: 0; }
}


/* jo samajh aaya wo chip ban kar dikhta hai */
.l-parsed { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 16px 0; }
.l-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(var(--a1-rgb),.10); border: 1px solid rgba(var(--a1-rgb),.28); color: var(--a1);
}




/* ── chalti patti (home ki pehli screen ke neeche) ───────────────────────
   Teen vaade jo poore portal ka farq hain, aur teenon AAJ sach hain.
   Isme koi ank ya daawa nahi hai jo badal sake -- isliye yeh patti kabhi
   jhoothi nahi ho sakti. Hover par ruk jaati hai taaki padhi ja sake. */
/*  ⚠️ Patti ab FIXED hai -- page ke bahaav se bahar. Iske do nateeje
    hain aur dono sambhale gaye hain:
      - footer ke neeche jagah chahiye  -> .has-tick .l-foot
      - bahut chhoti oonchai wali screen par (landscape phone) yeh
        padhne ki jagah kha jaati hai -> wahan chhup jaati hai
    Oonchai --tick-h se aati hai, yahan likhi hui nahi. */
.l-tick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: var(--tick-h); display: flex; align-items: center;
  background: var(--band-bg); color: var(--band-ink);
  overflow: hidden; padding: 0; margin-top: 0;
  border-top: 2px solid var(--ink);
  box-shadow: 0 -12px 30px -20px rgba(24,20,12,.55);
}
/*  Sirf us safhe par jahan patti hai. */
.has-tick .l-foot { padding-bottom: calc(30px + var(--tick-h)); }
/*  ⚠️ Landscape phone par 56px ki patti padhne ki jagah kha jaati hai.
    Wahan wo chhup jaati hai, aur footer ki fazool jagah bhi hat jaati
    hai -- warna neeche ek khaali patti reh jaati. */
@media (max-height: 520px) {
  .l-tick { display: none; }
  .has-tick .l-foot { padding-bottom: 30px; }
}
.l-tick-row { display: flex; width: max-content; animation: l-slide 38s linear infinite; }
.l-tick:hover .l-tick-row { animation-play-state: paused; }
.l-tick-set { display: flex; align-items: center; gap: 22px; padding-right: 22px; }
.l-tick-set b {
  font-family: var(--f-serif); font-weight: 600; font-size: 16px;
  letter-spacing: -.02em; white-space: nowrap;
}
.l-tick-set i { color: var(--cta); font-style: normal; font-size: 15px; }
@keyframes l-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 621px) {
  :root { --tick-h: 56px; }
  .l-tick-set b { font-size: 21px; }
  .l-tick-set { gap: 32px; padding-right: 32px; }
}

/* ── hero ki tasveer (asli listing se) ───────────────────────────────────
   Pehle home par ek bhi tasveer nahi thi -- naapa gaya tha: `<img` ki
   ginti poore index.html me ZERO. Isi wajah se safha bhara hua nahi
   lagta tha, listing kam hone ki wajah se nahi.

   Editorial Estate: panel thoda mota, photo thodi badi, parchai dono
   jagah -- chhape hue poster jaisa bhaari, kaanch ke card jaisa halka
   nahi.

   ⚠️ Yeh tasveer ASLI listing ki hai. Na listing ho, na us par photo ho
      -- panel chhupa rehta hai. Jagah-bharai tasveer yahan kabhi nahi. */
.l-hero-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.l-hero-grid > * { min-width: 0; }
.l-hero-art { position: relative; min-height: 280px; }
.l-hero-photo {
  position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden;
  border: 2px solid var(--ink); box-shadow: var(--ink-off-lg), var(--sh-2);
  background: var(--surface-3);
  display: block;
}
.l-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-hero-stat {
  position: absolute; right: 0; top: -10px; z-index: 2;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: 13px 18px; box-shadow: var(--ink-off); transform: rotate(-3deg);
}
.l-hero-stat b {
  display: block; font-family: var(--f-serif); font-size: 34px; font-weight: 600;
  line-height: 1; letter-spacing: -.03em; color: var(--a1); font-variant-numeric: tabular-nums;
}
.l-hero-stat span {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.l-hero-note {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: var(--cta); color: var(--on-cta);
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  box-shadow: var(--ink-off); transform: rotate(-1.5deg);
}
/*  ⚠️ Phone par tasveer CHHUPTI nahi -- wo base me hi hai, bas chhoti aur
    copy ke neeche. Sabse zyada log wahin se aate hain, isliye wo haalat
    ab APWAAD nahi, DEFAULT hai. 900px se upar do column khulte hain. */
@media (min-width: 901px) {
  .l-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 52px; }
  .l-hero-art { min-height: 460px; }
  .l-hero-stat { right: -10px; top: -14px; }
}

/* ── sections ─────────────────────────────────────────────────────────── */
.l-sec { padding: 34px 0 0; }
/*  ★ YEH LAKEER `.l-sec` KE BASE RULE KE BAAD HI REH SAKTI HAI ★
    Pehli koshish me ise upar hero ke media block me rakha tha, aur wahan se
    wo kabhi laagu hi nahi hui -- same specificity (0,1,0), aur base baad me
    aakar jeet jaata hai. Poora panna 42px khisak gaya tha; A/B me 175
    element laal hue.

    ⚠️ ★ AUR USI A/B NE EK PURANI KAMI PAKDI -- 3 Oct 2026 ★
    3 Oct se pehle bhi yahi galti FILE ME MAUJOOD THI, bas ulti disha me:
    `@media (max-width: 620px) { .l-sec { padding-top: 34px } }` line 602 par
    tha aur `.l-sec { padding: 76px 0 0 }` line 730 par. Yaani phone par wo
    34px kabhi laga hi NAHI -- har section ki chhat 76px hi rehti thi.

    Upar hero ke comment me likha hai "ab asal me chalte hain" -- wo `h1`
    aur `.sub` ke liye sach tha (unke base rule pehle aate hain), par
    `.l-sec` ke liye nahi, aur yeh farq kisi ne naapa nahi tha.

    Ab wo theek hai, aur yeh ek DIKHNE WALA badlaav hai: home par phone par
    panna 9848 -> 9680px (chaar section × 42px). Yahi wo jagah hai jo
    maalik ne 3 Oct ko maangi thi.

    Mobile-first likhte waqt yeh khatra BADH jaata hai, kyunki ab har bada
    naap ek override hai. `mobile-first.test.js` isi par pehra deta hai. */
@media (min-width: 621px) { .l-sec { padding-top: 76px; } }
.l-sec-head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.l-sec h2 {
  margin: 0 0 6px; font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -.03em; line-height: 1.08;
}
.l-sec .sub { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 58ch; }
.l-sec-head .more { margin-left: auto; padding-bottom: 4px; }

/* ── grid + rental card ───────────────────────────────────────────────── */
.l-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 621px) { .l-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } }

/*  Card ek "parcha" hai: photo upar, uske neeche saaf khaane. Poora card
    ek hi <a> hai (dil wala button uske andar click rok deta hai). */
.l-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.l-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--sh-3); }

/*  Micro-interaction: photo zoom + dil ka pop. Hover apne aap hota hai,
    dil sirf paint() ke class-toggle se -- koi naya listener nahi. Dil ka
    pop EK BAAR chale -- ek hi rochak kabhi nahi. */
@keyframes lmv-heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.l-save.on svg { animation: lmv-heart-pop .35s var(--ease); }

.l-photo {
  position: relative; aspect-ratio: 3/2; overflow: hidden;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.l-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.l-card:hover .l-photo img { transform: scale(1.045); }
/* Photo na ho to khaali dhabba nahi -- ek saaf nishaan. */
.l-noimg { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-3); }
.l-noimg svg { opacity: .5; }
.l-noimg span {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  /*  ⚠️ --ink-3 (jo .l-noimg se aata hai) rangeen dhabbe par 4.41 deta
      hai -- AA se neeche. Nishaan halka reh sakta hai, shabd nahi. */
  color: var(--ink-2);
}

/*  Photo ke neeche halka andhera -- taaki daam ki patti har photo par
    padhi ja sake, chahe photo kitni bhi safed ho. Photo hi na ho to yeh
    parat nahi lagti (`is-empty`, lease-cards.js se): khaali dhabbe par wo
    sirf ek dhundhla daag dikhti hai. */
.l-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,14,12,.55) 0%, rgba(10,14,12,0) 45%);
}
.l-photo.is-empty::after { display: none; }

/*  ⚠️ Yahan pehle khaali photo ke liye daam ka rang badla jaata tha
    (`color: var(--ink)`). Wo tab theek tha jab stamp ke peeche bharav
    nahi tha. Ab hai -- aur gehre roop me --ink lagbhag SAFED hai, yaani
    safed matn lime par: padha hi nahi jaata. Stamp ka rang ab har jagah
    --on-cta hai, isliye yahan koi override nahi. */

.l-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.l-badge.rent { color: var(--a1); }
.l-badge.sale { color: var(--a2); }

/*  "Available now" — lease par badge ki asli jagah yahi hai.
    Yard par badge "For Rent / For Sale" batata tha. Yahan sab kiraye ka
    hai, to wo lableel bekaar thi. Kirayedaar ke liye asli khabar yeh hai
    ki abhi shift ho sakta hun ya do mahine rukna hoga -- isliye wahi upar
    aata hai, aur SIRF tab jab sach me abhi khaali ho. */
.l-badge.now {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--a1); border-color: rgba(var(--a1-rgb),.38);
  background: var(--surface);
  font-weight: 700;
  box-shadow: var(--sh-1);
}
.l-badge.now svg { opacity: .9; }

.l-count {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-sm);
  background: rgba(10,14,12,.72); color: #fff;   /* 11 Oct 2026: .55 se -- dhoop me photo par "4 photos" dhul jaata tha */
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/*  Daam photo par -- ab lime ka stamp, khula safed matn nahi.
    -------------------------------------------------------------------
    Pehle yeh safed serif thi jiske neeche sirf ek text-shadow tha. Wo
    saaf photo par sundar lagti hai aur ASLI listing ki photo par kho
    jaati hai -- broker ki photo aksar tez khidki, safed deewar ya buri
    roshni wali hoti hai. Stamp apna bharav saath laata hai, isliye wo
    har photo par ek jaisa padha jaata hai.

    ⚠️ Matn --on-cta (syahi) hai, safed NAHI: lime halka rang hai. */
.l-priceover {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--f-serif); font-size: 21px; font-weight: 600; letter-spacing: -.03em;
  color: var(--on-cta); background: var(--cta);
  padding: 6px 12px; border-radius: var(--r);
  border: 2px solid var(--ink); box-shadow: var(--ink-off);
}
.l-priceover small {
  font-family: var(--f-sans); font-size: 13px; font-weight: 600; color: var(--on-cta);
  letter-spacing: 0;
}
/*  Saal ka kiraya (9 Oct 2026): stamp me doosri, chhoti lakeer -- mahine ka
    kitna banta hai. Wahi syahi (--on-cta) jo "/year" ki hai, isliye lime
    par utna hi padha jaata hai.
    ⚠️ Saal wala stamp `inline-block` hai, inline-flex NAHI: wrap hone wala
       inline-flex apni chaudai BINA-wrap wali lakeer se naapta hai, aur stamp
       card ki aadhi chaudai tak khinch jaata tha (browser me naapa). Block
       me chaudai do lakeeron me se lambi wali jitni. */
.l-priceover.is-yearly { display: inline-block; line-height: 1.15; }
.l-priceover .l-permo {
  display: block; margin-top: 2px; font-family: var(--f-sans); font-size: 12.5px; font-weight: 600;
  font-style: normal; letter-spacing: 0; color: var(--on-cta); line-height: 1.3;
}

.l-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.l-title {
  font-family: var(--f-serif); font-size: 18px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.l-loc { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.l-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.l-fact {
  font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
}

/*  Kiraya + deposit ek saath. Deposit card par isliye hai ki pehle din
    jeb se dono jaate hain -- chhupane se pehli call par hi baat toot ti
    hai, aur wo call broker ka waqt khaati hai. Lakeer upar isliye ki yeh
    "shart" hai, "khoobi" nahi. */
/*  9 Oct 2026 -- maalik: "khaskar text section koa ... yeh chaar columns
    bhi". Ek lakeer ki jagah 2 x 2 ka jaal: har khaane me upar chhota naam
    (form wala hi), neeche ank. Kirayedaar chaaron ek nazar me milata hai --
    ek bahti lakeer me "deposit" kahan khatam hua aur "maintenance" kahan
    shuru, wo khud dhoondhta tha.
      * Khaane ke beech patli lakeer (gap par `--line` ka bharav), dabbe nahi
        -- chaar dabbe card par chaar alag chizein lagte, jabki yeh ek hi
        sawaal ke chaar jawab hain.
      * Rang sirf "Now" par (--a1) -- wahi ek khabar jispar kirayedaar rukta
        hai. Baaki syahi; "Not declared" tirchha aur --ink-2 (AA).
      * Naam `text-transform` se bade akshar -- markup me saaf matn, taaki
        screen reader "SECURITY DEPOSIT" ko akshar-akshar na padhe.
      * `min-width: 0` + `overflow-wrap`: lamba kiraydaar (server 40 akshar
        par kaat-ta hai) khaane se bahar nahi nikalta. */
.l-terms {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin: 10px 0 0; padding: 0;
  background: var(--line);
  border-top: 1px solid var(--line);
}
/*  Neeche apni lakeer NAHI: uske baad ya to "Pay to move in" ka dabba aata
    hai (apni kinari ke saath) ya footer (apni upar ki lakeer ke saath) --
    yahan bhi lakeer hoti to footer ke upar do lakeerein chipak jaatin
    (browser me dikha). */
.l-terms > div {
  min-width: 0; background: var(--surface);
  padding: 8px 10px 8px 0;
}
.l-terms > div:nth-child(2n) { padding: 8px 0 8px 12px; }
/*  Akela bacha khaana poori chaudai le -- purane server par (patch 639 se
    pehle) sirf deposit ka, ya deposit + taareekh + ek. Bina iske khaali
    aadhe hisse me jaal ka --line wala bharav ek dhabba ban kar dikhta. */
.l-terms > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
/*  Naam --ink-2 par, --ink-3 NAHI: 10px ke bade akshar --ink-3 par dark me
    4.96:1 naape gaye -- AA ki seema ke paas; panne ke `.r-money-stats dt`
    isi wajah se --ink-2 par hain. Ank (--ink, 600) se farq wazan aur naap
    se aata hai. */
.l-terms dt {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); line-height: 1.3;
}
.l-terms dd {
  margin: 3px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.3; overflow-wrap: anywhere;
}
.l-terms dd small { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.l-terms dd.none { font-weight: 500; color: var(--ink-2); }
.l-terms dd .now { display: inline-flex; align-items: center; gap: 4px; color: var(--a1); font-weight: 700; }
.l-terms dd .now svg { flex: none; }

/*  Jo darj hi nahi hua -- matn poora, kyunki khaali chhodne se dekhne
    wala "kuch nahi lagega" padh leta hai. Uska roop neeche
    `.l-row-dep.none` ke saath ek hi jagah tay hota hai. */

/*  PEHLE DIN KA KHARCH -- card ki sabse kaam ki line.
    Mitti-rang (--a2) isliye ki poore portal me wahi "yahan dekho" wala
    doosra rang hai; hara (--a1) kaam ke button ka hai aur use yahan
    lagane par card par do hare dhabbe ho jaate.
    ⚠️  Yeh line lease-cards.js tabhi banata hai jab kiraya AUR deposit
        dono darj hon. Yahan koi aisa roop mat jodna jo "0" ya khaali par
        bhi kuch dikha de. */
/*  9 Oct 2026: panne wala hi roop -- upar naam ("Pay to move in"), daayen
    jod, neeche uski raseed. Pehle ek bahti lakeer thi ("₹5,49,999 to move
    in · first month + deposit") jo tang card par beech se tootti thi. */
.l-firstday {
  margin-top: 10px; padding: 9px 12px;
  border-radius: var(--r);
  background: rgba(var(--a2-rgb), .07);
  border: 1px solid rgba(var(--a2-rgb), .22);
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1px 10px;
  color: var(--ink);
}
.l-firstday .l-fd-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
/*  11 Oct 2026 (maalik: "ek row mein adjust karoa rent amount koa chahe
    chota karoa mobile mode mein"): raseed ab "1st month's rent + 2 months'
    deposit" hai, aur jod ke BAGAL me baithi to 375px par do lakeer me tootti
    thi. Naapa gaya: raseed ~187px, ₹5,49,999 (17px) ~79px, aur dabbe me jagah
    320 / 360 / 375px par 220 / 260 / 275px. Bagal me ek lakeer ke liye 360px
    par raqam 13px tak chhoti karni padti (₹12,50,000 par aur bhi), aur 320px
    par wo bhi kaafi nahi. Isliye jod naam ke saath UPAR wali qataar me, aur
    raseed neeche POORI chaudai me -- 320px tak ek lakeer, raqam chhoti kiye
    bina. (Pehle: `grid-row: span 2; align-self: center` -- jod do qataar me
    beech me.) */
.l-firstday b {
  justify-self: end;
  font-family: var(--f-serif); font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  color: var(--a2); white-space: nowrap;
}
.l-firstday .l-fd-sub { grid-column: 1 / -1; color: var(--ink-2); font-size: 13px; }

.l-foot-row {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ink-3);
}
.l-ava {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--a1); color: var(--on-a1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-size: 12px; font-weight: 600;
}
.l-foot-row .ago { margin-left: auto; }
/*  CP ki listing: naam ke BAGAL me uska referral code (2 Oct 2026, Brokers99
    patch 603). Maalik ke shabd: "small fonts mein slightly highlighted".
    Card aur kataar dono par naam, CP ID aur taareekh EK qataar me -- maalik,
    usi din, card ka screenshot bhej kar: "Name , CP ID , Listed ek row mein
    rakho". (Pehle code naam ke neeche apni qataar me tha.)
      * Code kabhi nahi kat-ta (`nowrap`): wo aadmi ki pehchan hai.
      * Dono samaa hi na sakein to `wrap`: taareekh agli lakeer par utarti
        hai, ID gaayab NAHI hoti. Kataar me "Availability confirmed ..."
        jaisi lambi taareekh bhi hoti hai.
    Rang wahi jo `.l-tag` ka hai (--a1, dono roop me token se).
    Naap: maalik, usi din -- "CP ID thoda chota rakho". 10.5 -> 9.5px
    (panne par 11 -> 10px), gaddi aur letter-spacing bhi kam. 9px se neeche
    nahi (test ki hadd).

    ⚠️ 13 Oct 2026 -- TEEN CHEEZEIN GAYIN, AUR EK CHUP-CHAAP ID KAAT RAHI
       THI. Avatar ki goli hat gayi (maalik: "hata doa"), aur uske saath:
         1. `.l-foot-row.has-cp > .l-ava + span` -- uska matn "naam ki basis
            4em, lamba naam `...` me" tha, aur wo 2 Oct ka sach tha jab
            avatar ke BAAD naam aata tha. 6 Oct ko card se naam hata, yaani
            `has-cp` par avatar ke baad SIRF ID ka chip bachta tha -- aur us
            din se wo rule CHIP par lag raha tha: `flex: 1 1 4em` +
            `overflow: hidden`, yaani lambi ID kinare par kat jaati thi.
            Specificity (0,3,1) neeche wale `flex: none` (0,3,0) se jeet-ti
            hai, isliye wo chup tha.
         2. `@container lcp` ke dono block -- unka poora kaam "code neeche,
            NAAM KI SEEDH me" tha (`margin-left: 34px` = avatar 26 + gap 9).
            Na naam bacha, na avatar; wo khiskaav ab kisi seedh ka nahi hai.
         3. `container: lcp / inline-size` -- use ab koi rule padhta hi nahi.
       Ab tang jagah par wahi saada `wrap`: chip apni lakeer, taareekh agli.
       Browser me naapa gaya (360px ki kataar aur 390px ka card). */
.l-foot-row.has-cp, .l-row-meta.has-cp { flex-wrap: wrap; row-gap: 3px; }
.l-foot-row.has-cp > .l-cp, .l-row-meta.has-cp > .l-cp,
.l-foot-row.has-cp > .ago, .l-row-meta.has-cp > .ago { flex: none; white-space: nowrap; }
.l-cp {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 0 6px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px; line-height: 1.6;
  background: rgba(var(--a1-rgb),.10); border: 1px solid rgba(var(--a1-rgb),.28); color: var(--a1);
}
.l-cp-l { font-size: inherit; font-weight: 600; color: var(--ink-2); }

/* shortlist ka dil (card par) */
.l-save {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: .18s var(--ease);
}
/*  Bina bhara hua dil = "abhi saved nahi". Bhara hua = saved. Sirf rang
    badalne se colour-blind ko farq nahi dikhta, isliye bharav bhi badalta. */
.l-save svg { fill: none; stroke: var(--ink-2); stroke-width: 1.7; }
.l-save:hover { border-color: var(--heart); }
.l-save:hover svg { stroke: var(--heart); }
.l-save.on { border-color: var(--heart); }
.l-save.on svg { fill: var(--heart); stroke: var(--heart); }

/*  Share -- dil ke theek bagal me, bilkul usi naap ka.
    ⚠️ Naam `.l-share` NAHI hai, aur wo jaan-boojh kar: `.l-share` search
       ke nateeje wali pill hai (`.l-viewrow` ke andar). Do alag shakl ek
       naam par rakhne se ek din ek doosre ka CSS kha jaata hai. */
.l-send {
  position: absolute; top: 10px; right: 52px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: .18s var(--ease);
}
.l-send svg { fill: none; stroke: var(--ink-2); stroke-width: 1.7; }
.l-send:hover { border-color: var(--a1); }
.l-send:hover svg { stroke: var(--a1); }
/*  "Link copied" -- gol button me shabd ki jagah hai hi nahi, isliye
    nishaan rang se jaata hai. `aria-label` bhi usi pal badalta hai
    (lease-share.js), taaki screen-reader ko bhi pata chale -- akela rang
    ek khabar nahi hoti. */
.l-send.is-copied { border-color: var(--a1); background: var(--surface-2); }
.l-send.is-copied svg { stroke: var(--a1); }

/* ── "aisa kyun" wale khaane ────────────────────────────────────────────── */
/*  Pehle ye teen khaane sirf hairline se bante the -- na bharav, na
    card. Kagaz par wo lagbhag gayab the. Ab teen card hain, aur TEESRA
    bhara hua (lime) taaki nazar kahin tike. Wahi teesra Figma wale
    design me bhi bhara hua tha. */
.l-feat { display: grid; gap: 14px; grid-template-columns: 1fr; }
/*  Teeno card ka matn NEECHE se lagta hai. Bina iske photo wale card ka
    matn neeche baithta tha aur lime wale ka upar -- teen khaane ek set
    ki tarah nahi, teen alag cheezon ki tarah dikhte the. */
.l-featcard {
  padding: 22px 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/*  Jis card par photo UPAR ki patti me hai, wahan patti upar aur matn
    neeche -- isliye space-between, flex-end nahi. */
.l-featcard.is-photo-top { justify-content: space-between; }
.l-featcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.l-featcard:nth-child(3) {
  background: var(--cta); border: 2px solid var(--ink); box-shadow: var(--ink-off);
}
/*  Lime par har matn --on-cta -- --ink-2/--a2 uspar padha nahi jaata. */
.l-featcard:nth-child(3) h3,
.l-featcard:nth-child(3) p,
.l-featcard:nth-child(3) .n { color: var(--on-cta); }
.l-featcard .n {
  font-family: var(--f-serif); font-size: 13px; font-weight: 600; color: var(--a2);
  display: block; margin-bottom: 14px;
}
.l-featcard h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.02em; line-height: 1.25; }
.l-featcard p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.65; }
/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 861px) {
  .l-feat { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .l-featcard { padding: 28px 26px 30px; }
}

/* ── kaam kaise hota hai (teen kadam, home par) ────────────────────────────
   ⚠️ Naam `.l-how` hai, `.l-steps` NAHI. `.l-steps` lead form wale page
      (/list-property, /requirements) ka hai aur wo ek bordered box + <ol>
      hai -- ek hi naam do matlab me rakhne par home ka teen-khaano wala
      grid us box ke niyam se toot jaata tha. */
.l-how { display: grid; gap: 14px; grid-template-columns: 1fr; }
.l-how-step {
  padding: 26px 24px 28px; border-radius: var(--r-lg);
  border: 1px solid var(--line); border-top: 3px solid var(--ink);
  background: var(--surface); box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.l-how-step:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
/*  ⚠️ Pehle in ank ka rang --line-strong tha. Wo LAKEER ka token hai,
    matn ka nahi -- 3.25 par baithta hai, aur isi wajah se poora section
    dhula hua dikhta tha. Ab lime ki goli par syahi: 13:1. */
.l-how-step b {
  display: inline-block; font-family: var(--f-serif); font-size: 14px; font-weight: 600;
  letter-spacing: .04em; line-height: 1; color: var(--on-cta); background: var(--cta);
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  padding: 5px 12px; margin-bottom: 14px;
}
.l-how-step h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.02em; }
.l-how-step p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
@media (min-width: 861px) { .l-how { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ── cities ───────────────────────────────────────────────────────────── */
/*  Pehle ye choti pill thin. Ek shehar hone par wo ek akela chhota
    dabba reh jaata tha aur section khaali lagta tha. Ab tile hai --
    shehar ka naam serif me, neeche ginti. */
.l-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.l-city {
  position: relative; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 24px 22px 22px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1);
  font-family: var(--f-serif); font-size: 25px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink);
  transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.l-city:hover { transform: translateY(-4px); background: var(--a1); color: var(--on-a1); border-color: var(--ink); }
.l-city span {
  font-family: var(--f-sans); font-size: 13px; font-weight: 600; letter-spacing: .03em;
  color: var(--ink-2); margin-left: 0; font-variant-numeric: tabular-nums;
}
.l-city:hover span { color: color-mix(in srgb, var(--on-a1) 78%, transparent); }
.l-city::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 4px;
  background: var(--cta); border-radius: 4px 4px 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.l-city:hover::after { transform: scaleX(1); }

/*  Khaano me tasveer -- do shakl me.
    -----------------------------------------------------------------------
    Pehla card: photo POORE card ke peeche, upar gehra scrim, matn safed.
    Doosra card: photo sirf UPAR ki patti me, matn neeche kagaz par.

    ⚠️ Doosre card par photo peeche isliye nahi ja sakti ki usme "Drafted
       with AI" wali violet pill hai -- wo halke bharav par bani hai aur
       gehre scrim par padhi nahi jaati. Isliye us card par photo alag
       patti me rehti hai aur pill apne hi kagaz par.

    ⚠️ Scrim gehra hai (neeche .94 tak) -- jaan-boojh kar. Neeche ki photo
       BADALTI rahegi (jo bhi nayi listing aayegi), aur tez roshni wali
       photo par halka scrim safed matn ko gayab kar deta hai. Scrim photo
       par nahi, MATN par tikta hai. */
.l-featcard.is-photo {
  position: relative; overflow: hidden;
  border: 2px solid var(--ink); min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.l-featcard.is-photo > img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform .8s var(--ease);
}
.l-featcard.is-photo:hover > img { transform: scale(1.06); }
.l-featcard.is-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10,14,12,.94) 0%, rgba(10,14,12,.74) 46%, rgba(10,14,12,.10) 100%);
}
.l-featcard.is-photo > :not(img) { position: relative; z-index: 2; }
.l-featcard.is-photo h3 { color: #fff; }
.l-featcard.is-photo p  { color: rgba(255,255,255,.92); }
.l-featcard.is-photo .n { color: rgba(255,255,255,.86); }

.l-featcard.is-photo-top { padding: 0; overflow: hidden; }
.l-feat-img {
  position: relative; height: 152px; overflow: hidden; flex: none;
  border-bottom: 1px solid var(--line); background: var(--surface-3);
}
.l-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.l-featcard.is-photo-top:hover .l-feat-img img { transform: scale(1.06); }
.l-feat-body { padding: 22px 24px 26px; }

/*  Photo wala khaana us ghar par le jaata hai jiski photo hai (1 Oct 2026,
    home-page.js `featLink` -- wajah wahan). "Stretched link": dikhne wala
    link ek, aur uska ::after poore khaane ko dhakta hai.

    ⚠️ ::after KHAANE ke naap ka tabhi banta hai jab link khud `static`
       ho aur khaana `relative`. `.is-photo > :not(img)` har seedhe bachche
       ko `relative` deta hai -- link bhi usme aata, aur tab ::after sirf
       link jitna chhota rehta. Isliye link par `static` naam lekar, aur
       matn ka span `relative; z-index: 2` taaki scrim (1) ke upar dikhe.
    ⚠️ Rang: photo par wahi safed jo usi khaane ka h3 leta hai (scrim
       hamesha gehra hai, upar wajah); kagaz wale khaane par --a1. */
.l-featcard.is-photo-top { position: relative; }
.l-featcard.is-photo > .l-feat-go,
.l-feat-go { position: static; }
.l-feat-go {
  display: inline-block; margin-top: 14px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--a1); text-decoration: underline; text-underline-offset: 3px;
}
.l-feat-go > span { position: relative; z-index: 2; }
.l-feat-go::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.l-featcard.is-photo .l-feat-go { color: #fff; }
.l-feat-go:focus-visible { outline: none; }
.l-feat-go:focus-visible > span { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.l-featcard:has(.l-feat-go:focus-visible) { outline: 3px solid var(--a1); outline-offset: 3px; }

/*  Listing kam hon to grid ka do-tihai hissa khaali reh jaata hai. Us
    jagah par ek kaam ka card -- kyunki aaj asli zaroorat yahi hai ki aur
    property aayein. Ye card TABHI aata hai jab teen se kam listing hon
    (home-page.js). */
.l-listcta {
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  min-height: 240px; padding: 26px 24px; border-radius: var(--r-lg);
  border: 2px dashed var(--line-strong); background: var(--surface-2);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.l-listcta:hover { border-color: var(--a1); background: var(--surface); }
.l-listcta b { font-family: var(--f-serif); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.l-listcta span { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.l-listcta i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--a1); }

/* ── CTA band ─────────────────────────────────────────────────────────── */
/*  Band ab bhara hua hai. Kagaz par ek halka dabba band nahi lagta --
    wo bas ek aur card lagta hai. Yahi ek jagah hai jahan poora bharav
    aata hai, aur uska button lime hai.
    ⚠️ --band-bg, --a1 NAHI: gehre roop me --a1 halka pudina ho jaata hai. */
.l-band {
  margin-top: 56px; border: 0; border-radius: var(--r-xl);
  background: var(--band-bg);
  padding: 30px 22px;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  box-shadow: var(--sh-2);
  position: relative; overflow: hidden;
}
/*  Band me ek halki buniyaad ki lakeer -- poore bharev par sirf ek nishaan,
    taaki wo "rangeen dabba" na lage, "tay ki hui zameen" lage. */
.l-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to right, rgba(255,255,255,.035) 0 1px, transparent 1px 56px);
  mask-image: radial-gradient(90% 120% at 50% 0%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(90% 120% at 50% 0%, #000 20%, transparent 80%);
}
/*  Andar ke button apne token nahi le sakte: --ink bhare hue band par
    gayab hai. */
.l-band .btn { border-color: rgba(255,255,255,.42); color: var(--band-ink); }
.l-band .btn:hover { background: rgba(255,255,255,.12); }
.l-band .btn-primary {
  background: var(--cta); color: var(--on-cta);
  border: 2px solid var(--ink); box-shadow: var(--ink-off);
}
.l-band .btn-primary:hover { background: var(--cta); filter: brightness(1.04); }
.l-band h2 {
  margin: 0 0 8px; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.03em;
  color: var(--band-ink); position: relative;
}
/*  ⚠️ --ink-2 NAHI. Band ab bhara hua hai aur --ink-2 uspar padha nahi
    jaata. --band-ink-2 dono roop me band ke apne rang par baithta hai. */
.l-band p { margin: 0; color: var(--band-ink-2); font-size: 14.5px; max-width: 52ch; position: relative; }
.l-band .acts { margin-left: 0; width: 100%; display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.l-band .acts .btn { flex: 1; }
/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 781px) {
  .l-band { padding: 54px 46px; margin-top: 84px; }
  .l-band .acts { margin-left: auto; width: auto; }
  .l-band .acts .btn { flex: 0 1 auto; }
}

/*  Sentinel ek pixel ooncha hai -- sirf observer ke liye. Dikhna nahi
    chahiye, jagah nahi leta. */
#filterSentinel { height: 1px; }

/* ── filters (search page) ────────────────────────────────────────────── */
/*  Chhoti screen par yeh patti sticky NAHI hai: header ke saath milkar wo
    aadhi screen kha jaati thi, aur nateeje ke liye jagah hi nahi bachti. */
.l-filters {
  position: static; top: 65px; z-index: 30;
  background: rgba(var(--bg-rgb),.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); padding: 18px 0 14px;
  box-shadow: 0 10px 30px -24px rgba(24,20,12,.5);
  transition: padding .3s var(--ease), box-shadow .3s var(--ease);
}
/*  Scroll par filter patti PATLI hoti hai -- class lease-theme.js ke
    IntersectionObserver se aati hai (sentinel + rootMargin, koi scroll
    handler nahi). sirf padding aur parchai badalti hai; height ka jhatka
    nahi. Wajah: results scroll karte waqt filters screen ka ghanta na
    khaayein. */
.l-filters.is-stuck {
  padding: 10px 0 8px;
  box-shadow: 0 12px 28px -22px rgba(24,20,12,.55);
}
/*  Search ka filter box wahi yantra hai jo home par hai -- ek hi shakl,
    do jagah. Pehle yahan gol-kone wala kaanch-jaisa dabba tha aur home par
    seedhi lakeer ka dabba; do alag shaklein ek hi kaam ki. */
.l-filters .l-console { max-width: none; box-shadow: var(--sh-1); }
/*  ═══ FILTER KI QATAAR — PHONE PAR LIPAT-TI HAI, KAT-TI NAHI ═══════════
    (maalik, 3 Oct 2026: "kutch - kutch pages mein mobile mode mein text ki
    alignment out … properly aligned nahin hai")

    ⚠️ ★ YAHAN SACH ME EK CHEEZ KAT RAHI THI, aur wo chhupi hui thi.
    Pehle yeh qataar har naap par `overflow-x: auto` + `scrollbar-width:
    none` thi. Chromium me 375px par naapa gaya: andar ka maal 689px tak
    jaata tha, yaani "Any rent", "Newest first" aur "Clear all" screen se
    BAHAR the -- aur scrollbar chhupi hui hone ki wajah se koi nishaan bhi
    nahi tha ki aage kuch hai. Aadmi ke liye wo "kata hua matn" dikhta tha,
    "khisakne wali patti" nahi.

    Ab phone par qataar LIPAT-TI hai -- do khaane ek lakeer me (`.sel` ki
    apni hadd 132px hai, do = 264px, aur 320px ke phone me 284px ki jagah
    hai). 620px se upar wahi purani ek-lakeer wali khisakne wali patti,
    jahan wo poori dikhti bhi hai.                                        */
.l-filterrow {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--line);
}
.l-filterrow::-webkit-scrollbar { display: none; }
.l-filterrow > * { flex: 1 1 50%; min-width: 0; }
/*  "Clear all" poori lakeer par -- wo filter nahi, unhe HATANE ka kaam hai,
    aur usse chip jaisi jodi me rakhna use filter jaisa dikhata hai. */
.l-filterrow > .btn { flex: 1 1 100%; }
/*  Har doosre khaane ki daayein lakeer hat-ti hai -- lipatne par wo kinare
    par latak jaati hai aur ek aadhi khinchi hui lakeer dikhti hai. */
.l-filterrow .sel:nth-child(2n) { border-right: 0; }
@media (min-width: 621px) {
  .l-filterrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .l-filterrow > *, .l-filterrow > .btn { flex: 0 0 auto; }
  .l-filterrow .sel:nth-child(2n) { border-right: 1px solid var(--line); }
}
.l-filterrow .sel {
  width: auto; min-width: 132px; font-size: 13.5px;
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  padding: 12px 32px 12px 15px; background-color: transparent;
}
.l-filterrow .sel:focus { box-shadow: none; background-color: var(--surface-2); }
.l-filterrow .btn {
  border: 0; border-radius: 0; padding: 12px 18px;
  color: var(--ink-2); font-weight: 500;
}
.l-filterrow .btn:hover { background: var(--surface-2); color: var(--a1); }
/*  Chhoti screen par yeh patti sticky NAHI hai (wajah upar) -- isliye wahi
    base hai, aur sticky 700px se upar ka apwaad. */
@media (min-width: 701px) { .l-filters { position: sticky; } }

/* ── states ───────────────────────────────────────────────────────────── */
/*  Khaali haalat ka dabba -- khaali shortlist, koi nateeja nahi, notice.
    Yahi teen jagah hain jahan aadmi pehle se nirash hai; dabba shaant aur
    pakka lagna chahiye, khaali kagaz jaisa nahi. */
.l-note {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--sh-1);
  padding: 40px 30px; text-align: center;
  color: var(--ink-2); font-size: 14.5px;
}
.l-note strong {
  display: block; color: var(--ink); font-family: var(--f-serif);
  font-size: 21px; margin-bottom: 8px; font-weight: 600; letter-spacing: -.02em;
}
.l-warn {
  text-align: left; padding: 14px 16px; font-size: 13.5px; border-radius: var(--r);
  border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink);
  display: flex; gap: 11px; align-items: flex-start;
}
.l-warn::before {
  content: "!"; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--warn); color: var(--surface); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

/*  Bikri wali soochna -- violet (AI nahi, par yeh "raasta" hai, "galti"
    nahi). Isliye peele warning se saaf alag dikhta hai. */
.l-lease {
  border-color: rgba(var(--a3-rgb),.32);
  background: rgba(var(--a3-rgb),.05);
}
.l-lease span { display: block; margin-top: 2px; }
.l-lease b { color: var(--a3); }
.l-lease .soon { display: block; margin-top: 13px; font-size: 13px; font-weight: 600; color: var(--a3); }

@keyframes shim { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
.l-sk {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shim 1.6s ease infinite; border-radius: var(--r-sm);
}

/* ── footer ───────────────────────────────────────────────────────────── */
.l-foot {
  /*  margin-top:auto hi wo cheez hai jo footer ko neeche dhakelti hai
      jab page chhota ho. Wo jagah BANATA nahi -- sirf bachi hui jagah
      kha jaata hai. Bhare hue page par ye 90px jitna hi dikhta hai,
      kyunki tab bachi hui jagah hoti hi nahi. */
  margin-top: 64px; border-top: 1px solid var(--line);
  background: var(--surface); padding: 40px 0 32px; font-size: 13.5px; color: var(--ink-3);
}
.l-foot-grid {
  display: grid; gap: 26px;
  grid-template-columns: 1fr;
  padding-bottom: 34px; border-bottom: 1px solid var(--line);
}
.l-foot-brand .l-logo { margin-bottom: 14px; }
.l-foot-brand p { margin: 0; max-width: 34ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.l-foot h4 {
  margin: 0 0 12px; font-family: var(--f-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.l-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.l-foot a { color: var(--ink-2); text-decoration: none; }
.l-foot a:hover { color: var(--a1); }
.l-foot-in {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  padding-top: 22px; font-size: 13px;
}
.l-foot .sp { margin-left: 0; display: flex; gap: 20px; flex-wrap: wrap; }

/*  footer ki RBN99 lakeer (27 Sep 2026) -- 99Yard ke `.foot-rbn` ki
    jodidaar. Har rang token se: light aur dark dono apne aap chalte hain,
    aur is panne ka apna koi naya hex nahi banta (#earn ke `.ce-*` par wahi
    niyam hai). */
/*  ⚠️ `justify-content: space-between` hai, `margin-left: auto` NAHI -- aur
    is farq ki apni wajah hai. `auto` wali shakl me jis pal matn aur link
    alag lakeeron me wrap hote hain, link daayein kinare chipke rehte hain
    aur matn baayein: ek hi patti ke do alag kinare. space-between me
    akeli lakeer apne start se shuru hoti hai, isliye har chaudai par
    theek dikhta hai aur koi media query nahi chahiye. Matn ka `flex`
    isliye ki wo pehle SIKUDE, link toote nahi. */
.l-foot .foot-rbn {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.l-foot .foot-rbn-t { flex: 1 1 360px; max-width: 64ch; color: var(--ink-2); }
.l-foot .foot-rbn-a { display: flex; gap: 18px; flex-wrap: wrap; }
.l-foot .foot-rbn-go { color: var(--a1); font-weight: 700; }
/*  FOOTER KI PEHCHAN KI LAKEER (28 Sep 2026). Maalik, Brokers99 ke naye footer
    ke baad: "99yard and 99lease par bhi same footer" -- aur usi din, use dekh
    kar: "Brokers99 ...a Unit of RBN (Rudra Business Network), ispe rbn99.com
    site ka link hoa ... baaki koi address display nahin karna."

    ⚠️ PEHLI LIKHAWAT ME YAHAN PATA AUR DO NUMBER THE, AUR MAALIK NE HATWA
    DIYE. Wo wapas mat laana: footer par sirf pehchan ki ek lakeer hai, aur
    uska kaam RBN99 ka darwaza khola hai. `footer-id.test.js` ab ULTI disha
    me khada hai -- wo naap kar dekhta hai ki footer par koi number ya pata
    LAUT na aaye.

    ⚠️ Block HAR panne par hai, sirf home par nahi. `.foot-rbn` sirf home par
    isliye hai ki uska link `#earn` par jaata hai, jo baaki panno par hai hi
    nahi; is lakeer par aisi koi shart nahi.

    ⚠️ Har copy (aur doosre portal ki) ko drift se `footer-id.test.js` bachata
    hai: wo har panne ka block hu-ba-hu milaata hai aur TWIN_SHA se doosre
    portal se bhi. Rang sirf token se: ek bhi naya hex nahi. */
.l-foot .foot-id { padding: 20px 0; border-bottom: 1px solid var(--line); }
.l-foot .foot-id-name { font-size: 14px; font-weight: 800; letter-spacing: .14em; color: var(--ink); }
.l-foot .foot-id-unit { margin-top: 5px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/*  Link ka rang naam lekar: `.l-foot a` har footer-link ko --ink-2 deta hai,
    aur wo is ek lakeer par galat hai -- yeh RBN99 ka darwaza hai, aam link
    nahi. Hover par rekha, kyunki rang pehle se accent hai. */
.l-foot .foot-id-unit a { color: var(--a1); text-decoration: none; }
.l-foot .foot-id-unit a:hover { text-decoration: underline; }

/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 521px) {
  /*  ⚠️ `margin-top: auto` sirf badi screen par. Wahi cheez footer ko neeche
      dhakelti hai jab page chhota ho -- wajah `.l-foot` ke base par likhi
      hai. Phone par wo 64px ka pakka faasla hai, kyunki wahan page kabhi
      itna chhota hota hi nahi. */
  .l-foot { margin-top: auto; padding-top: 64px; }
  .l-foot-grid { grid-template-columns: 1fr 1fr; }
  .l-foot .sp { margin-left: auto; }
}
@media (min-width: 861px) { .l-foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; } }

/* ── compare table (shortlist) ────────────────────────────────────────── */
/*  Chaudi table mobile par page ko todti hai. Isliye wo APNE andar scroll
    karti hai -- page kabhi baayen-daayen nahi khiskta. */
.l-tablewrap {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-1);
}
.l-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13.5px; }
.l-table th, .l-table td {
  text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.l-table thead th {
  font-family: var(--f-serif); font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: var(--surface-2); position: sticky; top: 0;
}
.l-table thead th a { color: var(--ink); text-decoration: none; }
.l-table thead th a:hover { color: var(--a1); }
.l-table tbody th {
  font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; width: 1%;
}
.l-table tbody td { color: var(--ink); font-weight: 500; }
.l-table tbody tr { transition: background .16s var(--ease); }
.l-table tbody tr:hover td { background: var(--surface-2); }
.l-table tr:last-child th, .l-table tr:last-child td { border-bottom: 0; }

/* Header/detail ka Save button jab saved ho */
.btn.on { border-color: var(--heart); color: var(--heart); background: transparent; }
.btn.on:hover { border-color: var(--heart); background: rgba(176,58,94,.08); }

/* ── breadcrumb ───────────────────────────────────────────────────────── */
.l-crumb { padding: 24px 0 8px; font-size: 13px; color: var(--ink-3); }
.l-crumb a {
  color: var(--ink-2); text-decoration: none;
  /*  Breadcrumb ka link akshar jitna patla hota hai (15px) -- ungli uspar
      nahi baithti. Padding se chhota area badhaya, negative margin se
      dikhawa wahi -- layout nahi hilta, par tap 35px ka ho jaata hai. */
  display: inline-block; padding: 10px 8px; margin: -10px -8px;
}
.l-crumb a:hover { color: var(--a1); }
.l-crumb span { margin: 0 7px; }
.l-crumb span:last-child { margin: 0; color: var(--ink); font-weight: 500; }

/* ═══ rental.html — ek ghar ka poora page ═══════════════════════════════════
   Prefix `.r-` isliye ki `.l-` wale poore portal ke hain -- yahan kuch
   badalne se baaki page na hilein. */

.r-hero {
  position: relative; margin: 16px 0 12px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
  aspect-ratio: 4/3;
  box-shadow: var(--sh-1);
}
.r-hero img { width: 100%; height: 100%; object-fit: cover; }
/*  Official download (11 Oct 2026) -- dekhte waqt photo saaf, watermark
    sirf download ki copy par (99Lease.in). Photo ke upar neeche daayen. */
.r-dl {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800;
  color: #fff; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .28);
}
.r-dl:hover { background: rgba(0, 0, 0, .78); }
/*  Photo na ho to dabba CHHOTA. Ek khaali dabbe ko poora 16:9 dena galat
    hai: dekhne wale ko wahi dikhta hai jo hai hi nahi, aur kiraya/deposit
    scroll ke neeche chala jaata hai. */
.r-hero.r-noimg {
  aspect-ratio: auto; min-height: 124px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(var(--a1-rgb),.05) 12px 24px),
    var(--surface-2);
}

.r-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.r-thumb {
  flex: 0 0 88px; height: 62px; padding: 0; cursor: pointer;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  transition: .18s var(--ease);
}
.r-thumb img { width: 100%; height: 100%; object-fit: cover; }
/*  Kaunsa photo khula hai -- lakeer se, dhundhlepan se nahi. Dhundhla
    karne par lagta hai photo hi kharab hai. */
.r-thumb.on { border-color: var(--a1); box-shadow: 0 0 0 2px rgba(var(--a1-rgb),.2); }

/*  10 Oct 2026, maalik (phone ka screenshot): "Just Updated Now koa Location
    wali row mein right align karke dikhao. Title koa single row mein adjust
    karoa (Wrap Nahin Karna). share and save kae buttons koa neatly design
    karke ... location se next row mein right aligned."

    PHONE (base, mobile-first): title ki poori chaudai aur EK lakeer; uske
    neeche jagah + "Updated" ek qataar me (taareekh daayen); phir Share/Save
    apni qataar me daayen. Pehle button title ke bagal me baithte the aur
    title ko do lakeer me tod dete the.
    BADA SCREEN (621px+): purana roop -- title-block baayen, button daayen. */
.r-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0 4px; }
.r-head > div:first-child { min-width: 0; }
/*  Title EK lakeer me. Lamba ho to "…" aur poora naam `title` attribute me
    (rental-page.js) -- tootne ke bajaye. Phone par aakaar thoda chhota taaki
    aam naam poora aaye ("Running 12 Room Homestay" 375px par poora). */
.r-title {
  margin: 0 0 8px; font-size: clamp(21px, 6.2vw, 26px); letter-spacing: -.03em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/*  Jagah aur "Updated" ek qataar: jagah baayen (lambi ho to tootti hai),
    taareekh daayen aur kabhi nahi tootti. */
.r-loc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.r-loc-row .l-loc { min-width: 0; }
/*  "Availability confirmed 3d ago" -- khabar hai, sirshak nahi: dikhni
    chahiye, par title aur kiraye se aage nahi nikalni chahiye. Taareekh na
    pata ho to rental-page.js yeh div banata hi nahi. */
.r-fresh { margin: 0; flex-shrink: 0; white-space: nowrap; font-size: 13px; color: var(--ink-3); }
/*  Share + Save -- apni qataar, daayen; do saaf pill, nishaan ke saath. */
.r-head-act { display: flex; justify-content: flex-end; gap: 8px; }
.r-act {
  padding: 8px 14px 8px 12px; gap: 7px; font-size: 13px;
  background: var(--surface); border-color: var(--line-strong);
  box-shadow: var(--sh-1);
}
.r-act svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/*  Save ho chuka -- rang site ka APNA "saved" rang (`.btn.on`, --heart), naya
    nahi; yahan sirf dil bharta hai. */
.r-act.on svg { fill: currentColor; }
@media (min-width: 621px) {
  .r-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; }
  .r-title { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.1; white-space: normal; overflow: visible; }
  .r-head-act { justify-content: flex-start; }
}

/*  Kiraya + deposit + kab se khaali -- teeno ek saath, sabse upar.
    Kirayedaar ka faisla inhi teen par hota hai; alag-alag jagah rakhne se
    use page bhar me dhoondhna padta hai. */
/*  10 Oct 2026 -- naya roop (maalik: "isae bhi thoda elegantly design karoa").
    Pehle teeno cheezein ek flex qataar me tairti thin: deposit beech me,
    mahine ka ank kiraye ke neeche dabba hua, aur jod ka dabba alag-thalag.
    Ab do hisse: BAAYEN kiraya, phir patli lakeer, phir naam-wale khaane
    (Per month / Deposit / Available) -- har ek ka lableel upar, ank neeche,
    ek hi seedh me. DAAYEN "Pay to move in": jod, aur uske neeche RASEED
    (1st month's rent + deposit) -- jod khud batata hai ki wo kya hai.
    Phone par raseed khaano ke neeche poori chaudai le leti hai.
    ⚠️ Har rang token se -- koi pakka hex nahi (paanchon theme). */
.r-money {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  margin: 18px 0 6px; padding: 18px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  border-left: 3px solid var(--a1);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
@media (min-width: 621px) {
  .r-money.has-total { grid-template-columns: minmax(0, 1fr) minmax(220px, 264px); gap: 24px; align-items: stretch; }
}
.r-money-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.r-money-main b {
  font-family: var(--f-serif); font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
}
.r-money-fig span { font-size: 14px; color: var(--ink-2); }
.r-money .r-lbl {
  display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
/*  Naam-wale khaane. Lableel `--ink-2` par, `--ink-3` par NAHI: 10.5px ke
    matn par wo AA se neeche jaata (kataar me yahi galti ek baar ho chuki
    hai -- `.l-row-dep.none` ka note). Farq SHAKL se: chhota, upper-case. */
.r-money-stats {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
}
.r-money-stats div { min-width: 0; }
.r-money-stats dt {
  margin: 0 0 3px; font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2);
}
.r-money-stats dd {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.r-money-stats dd em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--ink-2); margin-left: 3px; }
/*  "Not declared" -- tirchha, halka nahi (rang par tika farq colour-blind
    ko nahi dikhta; kataar ka wahi niyam). */
.r-money-stats dd .none { font-style: normal; font-weight: 500; color: var(--ink-2); }

/*  "Pay to move in" -- jod aur uski raseed. */
/*  Iska lableel `--ink-2` par: `--ink-3` par wo halke bharav ke upar 4.50:1
    (dark) / 4.59:1 (light) tha -- AA ki seema par. Yahi wo shabd hai jispar
    maalik ne saaf-saaf poochha tha, to use haashiya chahiye. */
.r-money .r-money-total .r-lbl { color: var(--ink-2); }
.r-money-total {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 16px; border-radius: var(--r);
  background: rgba(var(--a2-rgb), .07);
  border: 1px solid rgba(var(--a2-rgb), .24);
}
.r-money-total b {
  display: block; margin: 0 0 10px; font-family: var(--f-serif);
  font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
  color: var(--a2); font-variant-numeric: tabular-nums;
}
.r-money-split {
  display: grid; gap: 5px; margin: 0; padding: 9px 0 0;
  border-top: 1px dashed rgba(var(--a2-rgb), .32);
}
.r-money-split div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.r-money-split dt { margin: 0; font-size: 13px; color: var(--ink-2); }
.r-money-split dd {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/*  Jod me kya NAHI hai. Iske bina aadmi ise "poora kharcha" samajh kar
    aata hai aur brokerage saamne aakar use chaunka deti hai. */
.r-money-note {
  margin: 8px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.55;
  max-width: 62ch;
}

/*  Toota hua photo -- rental page ka bada dabba (lease-cards.js ka
    `onImgError` yeh class lagata hai). */
.r-noimg-txt {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2);
}

/*  Compare table me paise wali kataar ka khaali khaana. */
.l-table .none { color: var(--ink-3); }

/*  Jaal ki lakeerein `gap: 1px` se banti hain, har khaane ki apni border
    se nahi. Wajah: khaane apne aap lipatate hain (auto-fill), aur border
    wale tareeke me aakhri kataar ki lakeer beech me hi katt jaati thi --
    dabba toota hua lagta tha. */
.r-facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px; margin: 22px 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
/*  Lakeer har khaane ke apne box-shadow se banti hai, container ke rang se
    nahi. Container ka rang bharne par aakhri adhoori kataar ek bhari
    patti ban jaati thi -- 9 khaane hon to daayen ek bada khaali dhabba. */
.r-fact { background: var(--surface); padding: 13px 14px; box-shadow: 0 0 0 1px var(--line); }
.r-fact span {
  display: block; font-size: 12px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600; margin-bottom: 3px;
}
.r-fact b { font-size: 15px; font-weight: 600; }

/* ── property page: do khaane ────────────────────────────────────────────
   Baayein poora vivaran, daayein CHIPKI HUI visit wali patti.

   ⚠️ Pehle visit ka form sabse aakhir me tha -- gallery, daam, trust
      panel, DNA, rent-intel, naksha, amenities aur vivaran ke NEECHE.
      Yaani ghar pasand aa jaane par bhi aadmi ko poora page scroll karke
      wapas neeche jaana padta tha. Ab wo hamesha saamne rehta hai.

   ⚠️ `top` header ki oonchai se thoda zyada hai -- header khud sticky hai
      (z-index 60), aur patti uske neeche se nikalni nahi chahiye. */
.r-layout { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; }
.r-col { min-width: 0; }
.r-side { position: static; margin-top: 34px; top: 86px; }
.r-actioncard {
  padding: 26px 24px 24px; border-radius: var(--r-lg);
  border: 1px solid var(--line); border-top: 3px solid var(--a1);
  background: var(--surface); box-shadow: none;
}
.r-actioncard h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.02em; }
/*  360px ki patti me do khaane wala row tang padta hai. */
.r-side .r-visit-row { display: block; }

/*  Chhoti screen par dono ek ke neeche ek -- aur wahi BASE hai. Visit tak
    pahunchne ka rasta wahan neeche wali CTA patti deti hai. Do column 1000px
    se upar hi khulte hain. */
@media (min-width: 1000px) {
  .r-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; }
  .r-side { position: sticky; margin-top: 0; }
  .r-actioncard { box-shadow: var(--sh-2); }
}

/* ── panel ke tab ───────────────────────────────────────────────────────
   Chaar lambe panel (verified / match / rent / naksha) ek saath ek ke
   neeche ek the aur page bahut lamba kar dete the. Ab ek waqt me ek.
   Jaankari poori rehti hai -- sirf ek saath nahi dikhti.

   ⚠️ Patti SIRF tab banti hai jab do ya zyada panel bhare hon. Ek panel
      par tab dikhana sirf shor hai (rental-page.js). */
.r-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 32px 0 18px; border-bottom: 2px solid var(--line);
}
.r-tab {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 14px; border: 0; background: none; color: var(--ink-2);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.r-tab:hover { color: var(--ink); }
.r-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--a1); }

/* ── phone par visit ka rasta ───────────────────────────────────────────
   ⚠️ Yeh patti SIRF property page par hai. Home wali chalti patti bhi
      neeche chipki hai, par wo sirf index.html par -- dono ek saath kabhi
      nahi aatin. */
/*  16 Oct 2026: patti ab DO qataar (khamba) -- upar `.r-cta-row` (kiraya +
    "Request a site visit", pehle jaisi; `align-items` aur `gap` wahi jo
    pehle patti par the), neeche Refer · List ke do tile (maalik: "Phone |
    Site Visit buttons kae neeche"). */
.r-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex;
  flex-direction: column; gap: 8px; padding: 10px 16px;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -20px rgba(24,20,12,.55);
}
.r-cta-row { display: flex; align-items: center; gap: 12px; }
.r-cta-bar .rent {
  font-family: var(--f-serif); font-size: 19px; font-weight: 600; letter-spacing: -.02em;
}
.r-cta-bar .rent span {
  font-family: var(--f-sans); font-size: 13px; font-weight: 500; color: var(--ink-2); margin-left: 3px;
}
.r-cta-bar .btn { margin-left: auto; flex: none; }
/*  Tile -- Brokers99 ke Property.html wala hi dhaancha (nishaan, sirlekh,
    chhoti lakeer), par rang SIRF is panne ke token se (`rgba(var(--x-rgb))`
    wala tareeka, naya hex ek bhi nahi). Refer mitti (`--a2`) ki jhalak,
    List van-hara (`--a1`) ki. Naap 12px se neeche nahi (phone-type).
    ⚠️ Matn KATTA nahi, agli lakeer par jaata hai -- Brokers99 ka tile
    `nowrap` + "…" par hai, aur 99Yard me naapa gaya ki 360px par wo "Sell
    your pro…" ban jaata. Nishaan (🎁 / 🏠) 360px se NEECHE nahi banta
    (base phone ka, badi screen `min-width` -- mobile-first): wahan uske
    bina bhi har lakeer EK lakeer me rehti hai. */
.r-cta-tiles { display: flex; gap: 8px; }
.r-tile {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  padding: 8px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.r-tile:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.r-tile-ico {
  width: 26px; height: 26px; flex-shrink: 0; display: none; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 15px; line-height: 1;
  background: var(--surface); border: 1px solid var(--line);
}
@media (min-width: 360px) {
  .r-tile-ico { display: flex; }
}
.r-tile-txt { flex: 1; min-width: 0; }
.r-tile b, .r-tile small { display: block; }
.r-tile b { font-family: var(--f-sans); font-size: 13px; font-weight: 700; line-height: 1.25; }
.r-tile small { font-size: 12px; font-weight: 600; line-height: 1.3; margin-top: 1px; color: var(--ink-2); }
/*  Chhoti lakeer DONO tile par `--ink-2` (default upar), rangeen nahi --
    aur yeh naapa hua faisla hai: halke roop me `--a1` tile ki jhalak par
    6.9:1 deta tha, `--a2` aur kam -- yaani dhoop wala 7:1 (phone-type)
    toot-ta. Rang tile ki jhalak, kinare aur nishaan se aata hai. */
.r-tile-refer { background: rgba(var(--a2-rgb), .08); border-color: rgba(var(--a2-rgb), .40); }
.r-tile-list  { background: rgba(var(--a1-rgb), .08); border-color: rgba(var(--a1-rgb), .40); }
/*  Footer ki aakhri line patti ke peechhe na chhupe -- patti base me hai,
    isliye yeh jagah bhi base me hai.
    16 Oct 2026: 64 -> 116px. Patti me tile ki doosri qataar aayi, aur wo
    ~64 se 113px ki ho gayi (Chromium, 320 / 360 / 375 / 412px par naapi);
    30px ki saans wahi. */
.has-rcta .l-foot { padding-bottom: calc(30px + 116px); }
@media (min-width: 1000px) {
  .r-cta-bar { display: none; }
  .has-rcta .l-foot { padding-bottom: 32px; }
}
/*  Landscape phone par ye patti padhne ki jagah kha jaati hai. */
@media (max-height: 520px) {
  .r-cta-bar { display: none; }
  .has-rcta .l-foot { padding-bottom: 30px; }
}

.r-block { margin: 34px 0; }
.r-block h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; }
.r-block p { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; max-width: 70ch; line-height: 1.7; }
/*  🎬 Listing ka video (Brokers99 patch 662). Poori chaudai, gallery jaisa
    kinara, aur oonchai ki hadd taaki khada (portrait) video poora panna na
    ghere. Sirf token -- light aur dark dono apne aap. */
.r-video {
  display: block; width: 100%; max-height: 360px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2);
}
.r-video + .r-video { margin-top: 10px; }

.r-broker { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.r-by { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.r-by .l-ava { width: 40px; height: 40px; font-size: 16px; }
.r-by b { display: block; font-size: 15.5px; font-weight: 600; }
.r-by span:last-child { font-size: 13px; color: var(--ink-3); }
/*  Panne par code naam aur us line ke beech -- block, taaki line apni
    jagah neeche rahe. */
.r-by .l-cp { display: flex; width: max-content; margin: 4px 0; font-size: 12px; }
.r-note { margin: 14px 0 0 !important; font-size: 13px; color: var(--ink-3); }

/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 561px) {
  .r-hero { aspect-ratio: 16/9; }
  .r-money { padding: 24px 26px; }
  .r-money-main b { font-size: 36px; }
  .r-fact { padding: 17px 20px; }
}

/* ═══ lead form — /list-property aur /requirements ══════════════════════════
   Dono page ek hi form module par chalte hain (app/lease-lead.js), isliye
   style bhi ek hi jagah.

   ⚠️ Khaane ka font 16px JAAN-BOOJH KAR, jabki `.inp` poore portal me
      14.5px hai. iOS 16px se chhote input par focus karte hi page ko zoom
      kar deta hai -- filter ki ek patti me wo chalta hai, par 11 khaane
      wale form me har khaane par page kood-ta hai aur aadha aadmi chhod
      kar chala jaata hai. Yahi baat join-page.js me bhi likhi hai. */

/*  /login ka lapet. `.l-crumb` waale page ko upar ki jagah crumb se milti
    hai; login par crumb hai hi nahi, isliye `.l-form` ke upar seedha sticky
    header aa baithta hai.

    ⚠️ `padding:` (shorthand) YAHAN MAT LIKHNA. Yeh class `.shell-form` ke
       SAATH ek hi element par lagti hai, aur `.shell-form` apne 16px ke
       bagal ke padding se hi card ko screen ke kinare se door rakhta hai.
       Shorthand wo do value bhi dobara likh deta hai (0 kar deta hai) aur
       mobile par card kinare se chipak jaata hai. 99Yard par theek yahi
       hua tha (`.f-wrap`, 9 Sep 2026) aur wo kisi test me nahi, screenshot
       me pakda gaya. Isliye longhand, aur uspar ek jaanch bhi hai. */
.l-formwrap { padding-top: 22px; padding-bottom: 56px; }

/*  Editorial Estate: login aur my-listings ka form ab EK CARD hai --
    wahi kagaz, wahi kona, wahi parchai jo poore portal ke card ka hai.
    Pehle khaane kagaz par tairte the; andar jaane wala raasta bhi wahi
    izzat banta hai. `.l-form` sirf in do page ke JS (login-page.js,
    my-listings-page.js) aur unke bina-JS dhaanche se aata hai -- baaki
    portal par nahi, isliye yahan card banana surakshit hai. */
.l-form {
  padding: 24px 18px 24px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--sh-2);
}
.l-form .inp, .l-form .sel { font-size: 16px; }
.l-form textarea.inp { resize: vertical; min-height: 84px; line-height: 1.5; }
/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 431px) {
  .l-formwrap { padding-top: 32px; }
  .l-form { padding: 30px 26px 30px; }
}

.l-form-h { margin: 6px 0 6px; font-family: var(--f-serif); font-size: clamp(26px, 4vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.l-form-sub { margin: 0 0 18px; color: var(--ink-2); font-size: 14.5px; }

/*  Sirlekh ke THEEK NEECHE form -- sirf `/list-property` par (29 Sep 2026).
    `.l-form-h` ka apna `margin-bottom` 6px hai, kyunki har doosre panne par
    uske baad `.l-form-sub` ya sach wali patti aati hai aur wahi jagah deti
    hai. Us panne se dono cheezein hat gayin (patti ki wajah
    list-property-page.js me), aur bina is rule ke sirlekh form ke slab se
    chipak jaata hai -- Chromium me naapa: 6px. `.l-form-h` ka apna margin
    badalna galat hota: wo class chhah panne par hai. */
.l-form-h + .rudra-pf { margin-top: 22px; }

/*  Sach wali patti. `.l-warn` ka amber rang JAAN-BOOJH KAR -- yeh koi
    "tip" nahi hai, yeh wahi cheez hai jise na padhne par aadmi hafton
    apni listing dhoondhta rahega.

    ⚠️ 29 Sep 2026: `/list-property` se yeh patti HAT gayi (posting ab admin
    ki haan par live hoti hai -- list-property-page.js ke CFG par poori
    wajah). Rule zinda hai kyunki `requirement-page.js` aur `lease-lead.js`
    dono ise abhi chalate hain -- wahan wo ek saada `<div>` hai. Uske saath
    ka poora `details.l-form-truth` block HATA diya gaya: us shakl me ab
    koi element hai hi nahi, aur bina lage hue rule is repo me galti maane
    jaate hain (mara hua CSS wapas aane ka raasta hota hai). Patti wapas
    aaye to wo block bhi wapas -- git me pada hai. */
.l-form-truth { margin: 0 0 22px; }

/*  ── Form ki heading wali row: "➕ Add Landlord" + doosre portal ka button ──
    (maalik, 29 Sep 2026). Heading bani hui file se aati hai aur uska apna
    `margin-bottom: 10px` inline hai, isliye row ki oonchai wahi rehti hai.

    ⚠️ ★ HEADING KABHI SIKUDTI NAHI -- jagah kam pade to BUTTON neeche jaata
    hai. Pehli likhawat me ulta tha (`nowrap` + heading par `min-width: 0`)
    aur 360px par usne "➕ Add Landlord" ko DO LAKEER me tod diya (naapa gaya:
    heading 160 -> 143px, do line box). Maalik ne theek wahi mana kiya tha --
    "wrap na hoa text or button". Ek button ka apni lakeer par chale jaana
    matn ke beech se tootne se behtar hai, aur horizontal scroll dono se bura.

    Naapa gaya (Chromium): heading 160px + button 171px + 10px gap = 341px.
    Card ke andar itni jagah 390px ke phone par hai (354px), 360px par nahi
    (324px) -- isliye 390px se upar ek lakeer, uske neeche button apni lakeer
    par. 99Yard par heading chhoti hai (129px), to wahan 360px par bhi ek hi
    lakeer rehti hai. */
.l-pf-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.l-pf-head > :first-child { flex: 0 0 auto; }

/*  ⚠️ RANG YAHAN LEASE KE NAHI, FORM KE APNE TOKEN SE HAIN -- aur wo naap
    kar tay hua. Button form ki heading wali row me baithta hai, isliye uska
    rang form ke saath badalna chahiye, panne ke saath nahi.

    ⚠️ 3 OCT 2026: "form HAMESHA GEHRA hai" ab SACH NAHI HAI -- form panne ka
    theme follow karta hai (neeche "FORM KA RANG" wala block). Us din tak
    yahan likha tha ki lease ke token par yeh pill KAALE slab par gir gaya
    sa dikhta tha; ab slab kaala hai hi nahi. Phir bhi selector `.rudra-pf`
    ke andar hi rehta hai, aur ab wajah ek nahi, do hain: (1) form ke token
    ab portal ke token se aate hain, to rang wahi hai jo panne ka -- do
    jagah likhne ki zaroorat hi nahi; (2) wo CSS na chadhe to heading ka
    hissa bhi nahi banta, yaani button hota hi nahi, aur ek na-dikhne wala
    button ek galat dikhne wale button se behtar hai (§79). */
.rudra-pf .l-pf-alt {
  flex-shrink: 0; margin-left: auto; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--bg-button-gray); border: 1px solid var(--border-control);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.rudra-pf .l-pf-alt:hover, .rudra-pf .l-pf-alt:focus-visible {
  border-color: var(--accent-text); background: var(--bg-input);
}
/*  ⚠️ `--text-dim` (= --ink-3) NAHI, aur yeh browser me naapa gaya: pill ka
    bharav `--bg-button-gray` (= --surface-3) hai, aur --ink-3 uspar 3.95 par
    baithta hai -- AA se neeche. lease.css ke sar par wahi lakeer pehle se
    likhi hai ("--ink-3 RANGEEN chip par nahi chalta"). --ink-2 par 5.57.
    Form gehra tha tab yeh dikhta nahi tha: tab --text-dim form ka apna
    #9aa7bd tha, panne ka --ink-3 nahi. */
.rudra-pf .l-pf-alt .t { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.rudra-pf .l-pf-alt .d { font-size: 13px; font-weight: 800; color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .rudra-pf .l-pf-alt { transition: none; } }

/*  ═══ POSTING FORM AB PANNE KA THEME PEHENTA HAI (maalik, 3 Oct 2026) ═════
    Maalik, is panne ka screenshot bhej kar: "99lease & 99Yard ka joa
    background color hai kya property posting wale form ki background bhi
    wohi hoa sakti hai … abhi sab jagha black color hai".

    ⚠️ ★ EK PURANA FAISLA PALTA HAI, CHUP-CHAAP NAHI ★ CLAUDE.md §7 me likha
    tha: "Form hamesha GEHRA hai (`<html class="dark">`) … CRM ka form gehre
    roop ke liye bana hai". Wo 25 Sep ko sach tha. Ab nahi: `.dark` teeno
    panne se (aur `lease-form-host.js` ke `darkOnly()` se) HAT gaya hai, aur
    form ke saare token neeche wale block me portal ke token se aate hain.

    ⚠️ ★ LIGHT PALETTE PEHLE SE MAUJOOD THI -- yeh naya kaam NAHI tha ★
    `property-form.js` apni CSS me `html:not(.dark) .rudra-pf` ka poora light
    set khud leke chalta hai. Use rokne wali ek hi cheez thi: `.dark` class.
    Isliye asli kaam do hisson ka raha -- (1) wo class hatana, (2) un thode
    rangon ko sambhalna jo form me AAJ BHI pakke likhe hain (React ke inline
    style me, aur uski apni CSS me). Doosra hissa BANAYA JAATA hai.

    ⚠️ Form ki apni `[style*="586379"]` wali lakeerein is kaam me kaam nahi
    aayin: browser me naapa gaya, wo 0 element par lagti hain. React style
    CSSOM se lagata hai aur CSSOM `#586379` ko `rgb(88, 99, 121)` likh deta
    hai -- hex par match karne wala selector kabhi lagta hi nahi.

    ⚠️ AI CONSOLE (`.rudra-lc`) ka apna block iske BAAD hai -- wo file
    (`lead-capture.js`) ek bhi CSS var nahi padhti, isliye uska raasta alag
    hai aur usi ke sar par likha hai.                                      */

/*  ═══ 320px PAR FORM PANNE SE BAHAR NIKAL RAHA THA (3 Oct 2026) ════════
    ⚠️ ★ YEH KAMI PEHLE SE THI -- HEAD par bhi naapi gayi: `/list-property`
    320px par 357px chauda tha (37px bahar) aur `/requirement` 342px. 375px
    aur usse upar kuch nahi nikalta. CLAUDE.md §7 me "320px par panna ab bhi
    4px chauda hai" likha tha; aaj wo 37px hai, yaani us din ke baad form me
    aur khaane jude.

    Jad: form ke andar ek inline grid hai (`grid-template-columns: 1fr 1fr`),
    aur `1fr` ki apni sabse chhoti chaudai `auto` hoti hai -- yaani andar ke
    khaane ki min-content. 256px ke dabbe me wo do column 163 + 154 = 317px
    maang lete hain aur bahar nikal jaate hain (Chromium me naapa gaya).

    Ilaaj wahi jo form ki APNI CSS `.ag2` / `.ag3` par pehle se lagati hai --
    khaane ko sikudne do. Yahan wo har inline grid ke bachchon par lagta hai,
    kyunki wo grid class se nahi, inline style se bante hain.

    ⚠️ `!important` nahi chahiye: `min-width` inline style me likha hi nahi
    jaata, isliye koi takraav hi nahi hai.                                */
.rudra-pf [style*="grid-template-columns"] > * { min-width: 0; }

/* ══ FORM KA RANG — BANAYA HUA BLOCK, HAATH SE MAT BADLO ══ */
/*  app/property-form.js + app/client-form.js se BANAYA GAYA · 43 matn-rang, 29 bharav-rang.
    In rangon ko badalna ho to Brokers99 ke crm-core.js me badlo, form
    dobara banao, phir `npm run build:form-theme`. */

/*  1. Form ke token portal ke token se -- yahi EK block kaale slab ko
    panne ka kagaz bana deta hai, kyunki form apne zyaadaatar rang
    inhi se padhta hai.

    ⚠️ TEEN BAAR `.rudra-pf` -- aur wo majboori hai, sajawat nahi.
    Form apni CSS ko <style> me CHALTE WAQT daalta hai, yaani is file
    ke BAAD. Kram se nahi jeeta ja sakta, sirf specificity se. Uski
    sabse bhaari lakeer `html:not(.dark) .rudra-pf` hai -- (0,2,1). */
.rudra-pf.rudra-pf.rudra-pf {
  /*  Form `color-scheme: dark` likhta hai. Wo panne se aana chahiye,
      warna native scrollbar aur dropdown gehre hi rehte hain. */
  color-scheme: inherit;
  --bg-app: var(--bg);
  --bg-card: var(--surface);
  --bg-input: var(--surface-2);
  --bg-subtle: var(--bg-2);
  --bg-button-gray: var(--surface-3);
  --text-main: var(--ink);
  --text-muted: var(--ink-2);
  /*  ⚠️ placeholder --ink-3 NAHI. Khaane ka bharav --surface-2 hai, aur
      --ink-3 uspar 4.41 par baithta hai (naap lease.css ke sar par). */
  --text-placeholder: var(--ink-2);
  /*  ⚠️ --text-dim bhi --ink-2 par, --ink-3 par NAHI, aur do wajah se.
      (1) Aaj ise koi padhta hi nahi: form me `--text-dim` sirf `--pf-sub`
      me jaata hai aur `--pf-sub` kahin use hi nahi hota (dono form file
      me gina gaya: 0). (2) Kal koi padhne lage to --ink-3 khaane ke
      bharav (--surface-2) par 4.41 par baithta hai -- AA se neeche. Jo
      token aaj mara hua hai, use kal ke liye SAHI chhodna chahiye.
      99Yard ka `ink-contrast.test.js` isi par pehra deta hai: wahan
      --ink-3 sirf `color:` me aa sakta hai, kisi aur token me nahi. */
  --text-dim: var(--ink-2);
  --border-input: var(--line-strong);
  --border-main: var(--line-strong);
  --border-soft: var(--line);
  --border-control: var(--line-strong);
  --shadow-card: var(--sh-1);
  --accent: var(--a1);
  --accent-strong: var(--a1);
  --accent-soft: rgba(var(--a1-rgb), .12);
  --accent-text: var(--a1);
  --status-good: var(--ok);
  --status-good-bg: rgba(var(--a1-rgb), .10);
  --status-good-bd: rgba(var(--a1-rgb), .30);
  --status-warn: var(--warn);
  --status-warn-bg: var(--warn-bg);
  --status-warn-bd: var(--warn-line);
  --status-bad: var(--due);
  --status-bad-bg: rgba(var(--due-rgb), .10);
  --status-bad-bd: rgba(var(--due-rgb), .30);
  --status-info: var(--a1);
  --status-info-bg: rgba(var(--a1-rgb), .10);
  --status-info-bd: rgba(var(--a1-rgb), .30);
}

/*  2. Form ki APNI CSS ke pakke rang. Ye inline style me hain hi nahi,
    isliye neeche wali attribute-wali lakeerein inhe chhooti nahi. */
.rudra-pf.rudra-pf.rudra-pf .bg,
.rudra-pf.rudra-pf.rudra-pf .rb-btn--neutral {
  background: var(--surface-3);
  border-color: var(--line-strong);
  color: var(--ink);
}
.rudra-pf.rudra-pf.rudra-pf .rb-btn--ghost { color: var(--ink-2); }
.rudra-pf.rudra-pf.rudra-pf .rb-skel { background: var(--surface-2); }
.rudra-pf.rudra-pf.rudra-pf .rb-skel-card {
  background: var(--surface);
  border-color: var(--line);
  border-left-color: var(--line-strong);
}
/*  Badge: bharav halka tint, matn sanket ka apna rang. Pehle matn khud
    halka tha (#f87171 / #4ade80 / #facc15) -- kagaz par wo apne hi halke
    tint par baith kar lagbhag gayab ho jaata. */
.rudra-pf.rudra-pf.rudra-pf .bdg-hot {
  background: rgba(var(--due-rgb), .12);
  color: var(--due);
  border-color: rgba(var(--due-rgb), .34);
}
.rudra-pf.rudra-pf.rudra-pf .bdg-new {
  background: rgba(var(--a1-rgb), .12);
  color: var(--ok);
  border-color: rgba(var(--a1-rgb), .34);
}
.rudra-pf.rudra-pf.rudra-pf .bdg-fu {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn-line);
}

/*  3. Inline style ke pakke rang -- parivaar ke hisaab se, taaki hara
    hara rahe aur laal laal. `rgb(r, g, b)` ki shakl CSSOM spec ki hai
    (React hex ko wahi bana deta hai), isliye har browser me ek si --
    aur yahi wajah hai ki form ki apni `[style*="586379"]` wali
    lakeerein aaj 0 element par lagti hain (browser me naapa gaya). */

/*  matn · neutral */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(143, 185, 164)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(187, 213, 200)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(191, 209, 198)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(192, 198, 208)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(200, 212, 234)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(203, 213, 225)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(219, 233, 255)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(226, 232, 240)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(227, 247, 236)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(228, 228, 231)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(229, 231, 235)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(245, 231, 200)"]:not([style*="gradient"]) {
  color: var(--ink) !important;
}

/*  matn · quiet */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(113, 129, 152)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(129, 149, 171)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(148, 163, 184)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(154, 164, 178)"]:not([style*="gradient"]) {
  color: var(--ink-2) !important;
}

/*  matn · good */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(16, 185, 129)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(34, 197, 94)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(74, 222, 128)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(125, 211, 160)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(134, 239, 172)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(143, 224, 189)"]:not([style*="gradient"]) {
  color: var(--ok) !important;
}

/*  matn · warn */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(240, 180, 41)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(243, 209, 143)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(245, 158, 11)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(251, 191, 36)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(252, 211, 77)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(253, 186, 116)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(253, 224, 71)"]:not([style*="gradient"]) {
  color: var(--warn) !important;
}

/*  matn · bad */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(239, 68, 68)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(248, 113, 113)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(252, 165, 165)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(253, 164, 175)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(254, 202, 202)"]:not([style*="gradient"]) {
  color: var(--due) !important;
}

/*  matn · info */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(34, 211, 238)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(56, 189, 248)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(59, 130, 246)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(125, 211, 252)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(147, 197, 253)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(165, 180, 252)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(186, 230, 253)"]:not([style*="gradient"]),
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(199, 210, 254)"]:not([style*="gradient"]) {
  color: var(--a1) !important;
}

/*  matn · ai */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(196, 181, 253)"]:not([style*="gradient"]) {
  color: var(--a3) !important;
}

/*  matn · safed. Safed us waqt jaayaz hai jab element apna bharav KHUD
    likhta hai (bhara hua button). Jo safed bina bharav ke likha hai, wo
    CRM ke gehre card ke bharose tha -- kagaz par wo gayab ho jaata hai. */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(255, 255, 255)"]:not([style*="gradient"]):not([style*="background"]) {
  color: var(--ink) !important;
}

/*  bharav · neutral */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(10, 12, 18)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(11, 10, 16)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(17, 20, 29)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(26, 26, 38)"] {
  background-color: var(--surface-2) !important;
  background-image: none !important;
}

/*  bharav · info */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(8, 47, 73)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(10, 10, 20)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(11, 14, 20)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(12, 25, 41)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(12, 28, 52)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(14, 19, 34)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(15, 23, 42)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(16, 23, 36)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(16, 24, 39)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(20, 25, 37)"] {
  background-color: var(--surface-2) !important;
  background-image: none !important;
}

/*  bharav · ai */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(26, 16, 48)"] {
  background-color: var(--surface-2) !important;
  background-image: none !important;
}

/*  bharav · picked */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(17, 19, 48)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(30, 27, 75)"] {
  background-color: rgba(var(--a1-rgb), .14) !important;
  background-image: none !important;
}

/*  bharav · good */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(13, 40, 24)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(15, 36, 23)"] {
  background-color: rgba(var(--a1-rgb), .08) !important;
  background-image: none !important;
}

/*  bharav · warn */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(20, 18, 10)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(26, 18, 7)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(42, 22, 5)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(42, 28, 5)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(42, 30, 18)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(42, 31, 8)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(42, 32, 8)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(66, 32, 6)"] {
  background-color: var(--warn-bg) !important;
  background-image: none !important;
}

/*  bharav · bad */
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(42, 18, 18)"],
.rudra-pf.rudra-pf.rudra-pf [style*="rgb(59, 10, 10)"] {
  background-color: rgba(var(--due-rgb), .08) !important;
  background-image: none !important;
}

/*  bharav · aadha-paardarshi (aath-ank wala hex) */
.rudra-pf.rudra-pf.rudra-pf [style*="rgba(12, 16, 26"] {
  background-color: var(--surface-2) !important;
  background-image: none !important;
}
.rudra-pf.rudra-pf.rudra-pf [style*="rgba(13, 40, 24"] {
  background-color: rgba(var(--a1-rgb), .08) !important;
  background-image: none !important;
}

/* ══ /FORM KA RANG ══ */

/*  ══ CHHOTE INLINE AKSHAR KA FARSH (11 Oct 2026) ══
    Maalik: "mobile mode mein choti screen par bhi visibility clear hoa ...
    sunlight mein visibility clear hoa fonts easily pade ja sake".

    Is portal ki apni CSS ab 12px se neeche kuch nahi likhti (ek jaan-boojh
    wala apwaad: card ka CP ID chip, 11.5px -- maalik ne use naam se chhota
    maanga tha, aur naam ab 13px hai). Par saajhi file (ghar Brokers99:
    property-form, client-form, landlord-desk -- kirayedaar aur maalik ka
    poora dashboard) apna naap INLINE style me likhti hain -- 8.5 se 11.5px
    tak, gina gaya -- aur wo hash-locked copy hain, yahan badli nahi ja
    sakti. Isliye wahi tareeka jo upar ka FORM KA RANG block rangon ke liye
    leta hai: rendered `style` attribute ko naam lekar pakdo.

    ⚠️ Browser inline `fontSize: 9.5` ko `font-size: 9.5px` likhta hai --
       colon ke baad EK space (Chromium me naapa, 11 Oct 2026).
    ⚠️ "font-size: 10px" kabhi "font-size: 110px" ya "10.5px" me nahi milta.
    ⚠️ `!important` majboori hai: inline style har author rule se jeetta hai.
    ⚠️ Yeh block FORM KA RANG ke BAHAR hai -- wo banaya hua aur 99Yard se
       twin hai; yeh hissa haath se likha hai. */
[style*="font-size: 8px"], [style*="font-size: 8.5px"],
[style*="font-size: 9px"], [style*="font-size: 9.5px"],
[style*="font-size: 10px"], [style*="font-size: 10.5px"],
[style*="font-size: 11px"], [style*="font-size: 11.5px"] { font-size: 12px !important; }

/*  ⚠️ NAAP BADHNE SE `nowrap` WALI LAKEER BAHAR NA NIKLE. Brokers99 CRM me
    naapa gaya (320px): ek `nowrap` lakeer 11px -> 12px hote hi apne dabbe se
    25px bahar gayi aur poora panna side me khiskne laga. Yahan wahi saajhe
    form chalte hain, isliye wahi pehra: jis `nowrap` dabbe ko upar wala farsh
    bada karta hai, wahan "…" -- panna side me nahi khisakta. */
[style*="white-space: nowrap"]:is(
  [style*="font-size: 8px"], [style*="font-size: 8.5px"],
  [style*="font-size: 9px"], [style*="font-size: 9.5px"],
  [style*="font-size: 10px"], [style*="font-size: 10.5px"],
  [style*="font-size: 11px"], [style*="font-size: 11.5px"]
) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/*  AI console (`app/lead-capture.js`, saajhi file -- apna CSS <style> me
    daalti hai, inline nahi): "⚡ AI", Hinglish / English, "🎤 Add by voice",
    "✨ AI Details", "or type it" -- 9.4 se 10.1px tha. 12px par 375 aur 320px
    dono par koi button nahi kata (Brokers99 CRM me naapa: scrollWidth =
    clientWidth). */
html .rudra-lc .lc-chip, html .rudra-lc .lc-seg-btn, html .rudra-lc .lc-voice,
html .rudra-lc .lc-ai--row, html .rudra-lc .lc-or { font-size: 12px !important; }

/*  ── AI console (`.rudra-lc`) — "Rental Property / Add by voice / AI Details"
    ─────────────────────────────────────────────────────────────────────────
    Yeh upar wale BANAYE HUE block me kyun nahi hai: us block ka saara kaam
    inline style aur token par hai, aur yeh console dono me se kuch bhi
    istemaal nahi karta. `app/lead-capture.js` (saajhi file, ghar Brokers99)
    apni poori CSS ek array me rakhti hai aur usme **ek bhi `var(--…)` nahi**
    -- gina gaya: 0. Isliye har lakeer yahan naam lekar likhni padti hai.

    ⚠️ ★ CONSOLE AI KA RANG RAKHTA HAI, PANNE KA NAHI -- aur wo `--a3` hai.
    lease.css ke sar par likha hai: "--a3: violet -- SIRF AI ke liye (network
    bhar)". Console ko saada kagaz bana dena uska matlab kha jaata: wo panne
    ka ek aur khaana ban jaata, jabki wo ek alag cheez hai. Isliye bharav
    panne ka, aur uske upar sab kuch violet ka.

    ⚠️ DO BAAR `.rudra-lc` -- wahi wajah jo upar wale block ki hai: console
    apni CSS <style> me chalte waqt daalta hai, is file ke BAAD. Uski har
    lakeer (0,2,0) hai, isliye yahan (0,3,0) chahiye.

    ⚠️ JO JAAN-BOOJH KAR NAHI BADLA: `.lc-console` ka chalta hua indigo border,
    `.lc-badge`, `.lc-seg-btn.on`, `.lc-voice.idle/.rec` aur `.lc-primary`.
    Un sab par matn SAFED hai aur bharav apna gehra gradient -- wo kagaz par
    waise hi padhe jaate hain jaise gehre roop me (naapa gaya). Unhe chhedna
    sirf shakl badalna hota, kami theek karna nahi.                        */
.rudra-lc.rudra-lc .lc-console__in {
  background: var(--surface);
}
.rudra-lc.rudra-lc .lc-title { color: var(--ink); }
.rudra-lc.rudra-lc .lc-chip {
  color: var(--a3);
  background: rgba(var(--a3-rgb), .12);
  border-color: rgba(var(--a3-rgb), .45);
}
.rudra-lc.rudra-lc .lc-langtog {
  background: var(--surface-2);
  border-color: var(--line);
}
.rudra-lc.rudra-lc .lc-seg-btn { color: var(--ink-2); }
.rudra-lc.rudra-lc .lc-seg-btn:hover { color: var(--ink); }
.rudra-lc.rudra-lc .lc-or { color: var(--ink-3); }
.rudra-lc.rudra-lc .lc-or::before { background: linear-gradient(90deg, transparent, var(--line)); }
.rudra-lc.rudra-lc .lc-or::after { background: linear-gradient(90deg, var(--line), transparent); }
.rudra-lc.rudra-lc .lc-ta::placeholder { color: var(--ink-2); }
/*  `!important` yahan isliye ki console ki apni lakeer par bhi wahi hai
    (`background:#0e1220!important`) -- bina iske wo jeet jaati hai. */
.rudra-lc.rudra-lc .lc-ta:focus {
  background: var(--surface-2) !important;
  border-color: var(--a3) !important;
}
.rudra-lc.rudra-lc .lc-voice.busy { background: var(--surface-3); color: var(--ink-2); }
.rudra-lc.rudra-lc .lc-voice.off {
  background: var(--surface-2);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.l-field { margin-bottom: 16px; }
.l-lbl { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.l-lbl b { color: var(--due); font-weight: 700; }
.l-lbl span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); }

/*  ⚠️ `color` yahan pehle HARDCODED `#ffc2cb` tha -- ek halka gulaabi jo
    DARK background ke liye chuna gaya tha, aur is portal ka default LIGHT
    hai. Cream par wo ~1.4:1 par baithta tha: yani jo ek line batati hai ki
    aap andar kyun nahi aa paaye, wahi screen par sabse mushkil se padhi
    jaati thi. Screenshot me pakda gaya, kisi test me nahi.

    `--due` file me pehle se maujood hai aur theme ke saath khud badalta hai
    (light #b03a2b, dark #f0776a). Border/background rgba par rehne diye --
    wo .09 aur .42 alpha par dono theme me theek baithte hain; kharabi sirf
    matn ke rang me thi. Wahi ek cheez badli hai. */
.l-err {
  margin: 4px 0 14px; padding: 11px 13px; border-radius: var(--r);
  border: 1px solid rgba(var(--due-rgb),.42); background: rgba(var(--due-rgb),.09);
  color: var(--due); font-size: 13.5px; font-weight: 600;
}

.l-form-go { width: 100%; margin-top: 6px; padding: 14px 18px; font-size: 15px; }
.l-form-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ── bhej diya ─────────────────────────────────────────────────────────── */
/*  Safalta ka parde -- ab ek card hai, khaali kagaz par teer nahi.
    Jo abhi-abhi bhej chuka hai use ek pakka chehra chahiye. */
.l-done {
  margin-top: 18px; padding: 48px 28px 44px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--sh-1);
}
.l-done-tick {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: var(--on-a1); background: var(--ok);
  box-shadow: 0 14px 36px -14px rgba(var(--a1-rgb),.9);
}
.l-done h1 { margin: 0 0 8px; font-family: var(--f-serif); font-size: clamp(24px, 3.4vw, 30px); font-weight: 600; letter-spacing: -.03em; }
.l-done p { margin: 0 auto; max-width: 46ch; color: var(--ink-2); font-size: 14.5px; }
.l-done-go { margin-top: 26px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/*  "Aage kya hoga" -- kram, feature ki soochi nahi. Ginti bade aur teal
    isliye ki aankh unhi par jaaye: teen kadam hain, aur teeno me ek insaan
    hai. Dhaancha home ke how-it-steps jaisa -- upar ki moti syahi wali
    lakeer, wahi kagaz, wahi parchai. */
.l-steps {
  margin: 8px 0 44px; padding: 26px 26px 28px;
  border: 1px solid var(--line); border-top: 3px solid var(--ink);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1);
}
.l-steps h2 { margin: 0 0 12px; font-family: var(--f-serif); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.l-steps ol { margin: 0; padding-left: 22px; }
.l-steps li { margin-bottom: 10px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.l-steps li::marker { color: var(--a1); font-weight: 600; }
.l-steps li b { color: var(--ink); font-weight: 700; }
.l-steps-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); }
.l-steps-note a { color: var(--a2); }

/* ═══ /rent-in-:city ════════════════════════════════════════════════════════
   h1 aur uske neeche ki line JS bharta hai (app/city-page.js) -- shehar ka
   naam URL ke raaste me hota hai. Isliye yahan jagah pehle se bani rehni
   chahiye, warna list aate hi poora page ek jhatke me neeche khisakta hai. */
.l-cityhead { padding: 20px 0 8px; }
.l-cityhead h1 { margin: 0 0 6px; font-family: var(--f-serif); font-size: clamp(26px, 3.8vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.l-cityhead p { margin: 0 0 16px; color: var(--ink-2); font-size: 14.5px; min-height: 22px; }

.l-pager {
  margin: 30px 0 8px; display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3);
}
.l-pager .btn { text-decoration: none; }

/* ═══ /rental — site visit ka form ══════════════════════════════════════════
   Pehle yahan ek button tha jo /join par bhejta tha. Ab form yahin hai
   (app/lease-visit.js), kyunki ghar dekhne ke liye account banwana ek
   bekaar deewar thi.

   Do khaane ek line me (naam + phone, phir din + samay) -- 4 khaano ka form
   4 line lamba dikhe to aadha aadmi chhod deta hai. 430px se neeche ye khud
   ek ke neeche ek ho jaate hain. */

.r-visit { margin-top: 16px; }
.r-visit h3 { margin: 0 0 6px; font-family: var(--f-serif); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }

/*  Sach wali line. `--warn` ka amber JAAN-BOOJH KAR nahi -- yeh chetavani
    nahi hai, seedhi baat hai ki aage kya hoga. Amber patti yahan lagane par
    aadmi ko lagta hai kuch galat hai. */
.r-visit-truth { margin: 0 0 14px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }

.r-visit-row { display: block; gap: 10px; }
.r-visit-row .l-field { flex: 1; min-width: 0; }
@media (min-width: 431px) { .r-visit-row { display: flex; } }

/*  16px se chhota mat karna -- iOS input par focus karte hi page zoom kar
    deta hai. Wahi baat jo .l-form aur join-page me likhi hai. */
.r-visit .inp { font-size: 16px; }
/*  date/time ke native control iOS par thode chhote baithte hain; height
    baraabar rakhne se dono line ek jaisi dikhti hain. */
.r-visit input[type="date"], .r-visit input[type="time"] { min-height: 46px; }

.r-visit-go { width: 100%; margin-top: 4px; padding: 13px 18px; font-size: 15px; }
.r-visit-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ── bhej diya ─────────────────────────────────────────────────────────── */
.r-visit-done { margin-top: 16px; text-align: center; padding: 8px 0 4px; }
.r-visit-tick {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: var(--on-a1); background: var(--ok);
  box-shadow: 0 10px 28px -14px rgba(var(--a1-rgb),.9);
}
.r-visit-done h3 { margin: 0 0 6px; font-family: var(--f-serif); font-size: 18px; font-weight: 600; }
.r-visit-done p { margin: 0 auto 16px; max-width: 42ch; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.r-visit-done p b { color: var(--ink); }


/* ═══ 3 Sep 2026 (shaam) — DHAANCHA BADLA, SIRF RANG NAHI ═══════════════════
   Maalik ki baat: "same page ka colour badal kar bhej diya." Sach thi.
   Pehla daur sirf rang/font/lableel tha -- kram wahi purana: bada hero,
   neeche card ka jaal, phir patti-patti section. Wahi kram har portal ka
   hai.

   Ab teen cheezein DHAANCHE me badli hain:

   1. PEHLI SCREEN PAR ASLI MAAL. Hero ab poster nahi, ek yantra hai
      (.l-console) aur uske theek neeche asli listing shuru ho jaati hai.
      Kirayedaar poster dekhne nahi aata.
   2. CARD KA JAAL GAYA, KATAAR AAYI (.l-row). Ek kataar me photo, ghar ki
      baat, aur paisa -- teen khaane. Isse do listing ka daam aankh se
      seedha milaya ja sakta hai; jaal me har daam alag jagah hota hai.
   3. PEHLA KHARCHA EK ANK ME (.l-row-first). Kiraya + deposit dono pehle
      din jaate hain. Har portal sirf kiraya dikhata hai; asli sawaal
      "shift hone me kitna lagega" ka jawab yahi hai.
========================================================================== */

/* ── khoj ka yantra (home ki pehli screen) ───────────────────────────────
   Yahan pehle 3px ka seedha kona tha, is soch ke saath ki "yeh aujaar hai,
   sajawat nahi". Wo soch aaj bhi wahi hai -- bas ab wo MOTI SYAHI KI
   LAKEER aur thos parchhai se aati hai, kone se nahi. Baaki portal ki
   parchhai mulaayam hai; sirf yeh takhta chipke hue purze jaisa dikhta
   hai, aur wahi farq batata hai ki isse kaam hota hai.
   `overflow:hidden` andar wale button ke seedhe kone gol shakl me kaat
   deta hai, isliye joined search-bar ki shakl bani rehti hai. */
.l-console {
  border: 2px solid var(--ink); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--ink-off-lg);
  max-width: 720px; overflow: hidden;
}
.l-console-lbl {
  display: block; padding: 13px 18px 0;
  font-family: var(--f-mono, var(--f-sans));
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.l-console-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.l-console-row .inp {
  flex: 1 1 auto; border: 0; background: transparent; border-radius: 0;
  font-size: 17px; padding: 8px 16px 14px;
}
.l-console-row .inp:focus { box-shadow: none; }
.l-console-row .btn {
  flex: 0 0 auto; border-radius: 0; border: 0; align-self: stretch;
  padding: 15px; margin: 0; font-size: 14.5px;
}
/*  Chhoti screen par button neeche poori chaudai me -- aadha button dabane
    ki koshish me log daayein-baayein scroll karte hain. */
/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 621px) {
  .l-console-row { flex-direction: row; }
  .l-console-row .inp { padding: 10px 18px 16px; font-size: 19px; }
  .l-console-row .btn { padding: 0 26px; }
}

/*  Ek nazar me kiraya chunna -- likhne se pehle. Sabse aam pehla sawaal
    "mere budget me kya hai" hota hai, aur wo type karne layak bhi nahi. */
.l-quick { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
.l-quick > span {
  flex: 0 0 auto; width: 100%; padding: 11px 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-right: 0; border-bottom: 1px solid var(--line);
}
.l-quick button {
  flex: 1 0 33%; font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 11px 14px; cursor: pointer; white-space: nowrap;
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink);
  transition: .16s var(--ease);
}
.l-quick button:last-child { border-right: 0; }
.l-quick button:hover { background: var(--surface-2); color: var(--a1); }
/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 621px) {
  .l-quick > span { width: auto; border-right: 1px solid var(--line); border-bottom: 0; }
  .l-quick button { flex: 1 1 auto; border-bottom: 0; }
}

/* ── listing ki kataar ───────────────────────────────────────────────────
   Teen khaane, teeno ek hi lakeer par: photo | ghar ki baat | paisa.
   Paisa hamesha DAAYEN kinare par ek hi jagah -- isliye upar-neeche do
   listing ka daam seedha aankh se milta hai. Jaal (grid) me wo har card ke
   andar alag jagah hota hai, aur milaan ke liye aadmi ko scroll karna
   padta hai. */
.l-rows {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  /*  Poori list EK slab hai. Bina iske page ka apna halka gradient beech
      ki kataaron me se jhalakta hai aur ek-do kataar rangi hui lagti hain
      -- dekhne wala samajhta hai unme kuch khaas hai. */
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.l-row {
  display: grid; grid-template-columns: 220px 1fr 232px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; position: relative;
  transition: background .18s var(--ease);
}
.l-rows .l-row:last-child { border-bottom: 0; }
.l-row:hover { background: var(--surface-2); }
/*  Hover par baayen kinare par ek lakeer -- poora dabba uthane se list ki
    seedhi lakeerein toot ti hain. */
.l-row::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px;
  background: var(--a1); opacity: 0; transition: opacity .18s var(--ease);
}
.l-row:hover::before { opacity: 1; }

/*  Photo khaana poori kataar jitna ooncha. `aspect-ratio` yahan galat tha:
    wo khaane ki unchai 4:3 par baandh deta tha, aur jab baayen ka matn
    lamba hota (facts ki do line) to photo ke neeche ek safed patti bach
    jaati thi -- kataar toot ti hui lagti thi. */
.l-row-photo {
  position: relative; min-height: 156px; height: 100%; overflow: hidden;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.l-row-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.l-row:hover .l-row-photo img { transform: scale(1.04); }

.l-row-main { padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.l-row-title {
  font-family: var(--f-serif); font-size: 21px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.22;
}
.l-row-meta { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; }
.l-row-meta .ago { margin-left: auto; }

/*  Paisa ka khaana. Kiraya bada, uske neeche wo ank jo asli sawaal ka
    jawab hai: pehle din kitna dena hoga. */
.l-row-money {
  padding: 24px 28px 24px 24px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 3px;
}
.l-row-rent {
  font-family: var(--f-serif); font-size: 29px; font-weight: 600; letter-spacing: -.03em;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.l-row-rent small { font-family: var(--f-sans); font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
/*  Saal ke kiraye ke neeche mahine ka -- `.l-row-dep` wala hi rang (--ink-2),
    jo kataar ke bharav par AA paar karta hai. */
.l-row-permo { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/*  Saal ka ank 9 ank ka hota hai (₹27,00,000). Kataar ka paise wala khaana
    232px ka hai (matn ke liye 180px) -- 29px par "/year" agli lakeer par gir
    jaata tha (browser me naapa). 25px par ank aur ikaai ek lakeer me. */
.l-row-rent.is-yearly { font-size: 25px; }
.l-row-dep { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/*  Kiraya + deposit ek saath. SIRF tab jab dono sach me maujood hon --
    aadha jod kar dikhana jhooth hai. */
.l-row-first {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3); line-height: 1.4;
}
.l-row-first b { display: inline; font-size: 13px; color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums; }
/*  Jo darj hi nahi hua.
    ⚠️  Rang HALKA nahi kiya jaata. Pehli koshish me yahan `--ink-3` tha
        aur wo kataar ke bharav par sirf 4.09:1 dete tha -- 12.5px ke matn
        ke liye AA se neeche (main ka apna `.l-row-dep` `--ink-2` par hai,
        yaani yeh kami maine hi banai thi). Ab farq TIRCHHE harf se aata
        hai: wo rang par tikka nahi hai, isliye halki roshni me aur
        colour-blind dono ko dikhta hai. */
/*  11 Oct 2026: tirchha NAHI -- dhoop me patle, jhuke akshar sabse pehle
    dhulte hain. "Not declared" ab seedha, halki syahi (--ink-2) aur 500
    wazan se alag dikhta hai. */
.l-row-dep.none, .l-terms .none { font-style: normal; }

.l-row-now {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--a1);
}

.l-row-save {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface);
  transition: .18s var(--ease);
}
.l-row-save svg { fill: none; stroke: var(--ink-2); stroke-width: 1.7; }
.l-row-save:hover { border-color: var(--heart); }
.l-row-save:hover svg { stroke: var(--heart); }
.l-row-save.on { border-color: var(--heart); }
.l-row-save.on svg { fill: var(--heart); stroke: var(--heart); }

/*  Kataar me dil BAAYEIN hai, isliye share uske bagal me -- aur `right`
    saaf karna padta hai, warna upar wala `.l-send` (right: 52px) dono
    kinaron par kheench leta hai. */
.l-row-send {
  top: 12px; left: 50px; right: auto;
  width: 32px; height: 32px;
}

/*  KATAAR TEEN SEEDHIYON ME BADHTI HAI, aur sabse neechli ab BASE hai:
    photo 108px, paisa apni poori-chaudai wali qataar me, naap chhote.
    561px se photo 150px, aur 901px se poora teen-column wala desktop roop
    jisme paisa daayein apne khaane me baithta hai.

    (!) 901px wala block har wo cheez WAPAS likhta hai jo base me badli gayi
    hai -- grid-column, border, flex-direction, align, justify, text-align,
    gap, wrap. Ek bhi chhoot jaaye to desktop par qataar aadhi phone jaisi
    reh jaati hai. Yahi wo jagah hai jahan mobile-first sabse zyada
    likhwata hai, isliye yahan naam lekar likha hai. */
@media (min-width: 561px) {
  .l-row { grid-template-columns: 150px 1fr; }
  .l-row-photo { min-height: 156px; }
  .l-row-main { padding: 16px 20px; gap: 8px; }
  .l-row-money { padding: 14px 20px; }
}
@media (min-width: 901px) {
  .l-row { grid-template-columns: 220px 1fr 232px; }
  .l-row-money {
    grid-column: auto; border-left: 1px solid var(--line); border-top: 0;
    flex-direction: column; align-items: flex-end; justify-content: flex-start;
    gap: 3px; text-align: right; padding: 24px 28px 24px 24px; flex-wrap: nowrap;
  }
  .l-row-first {
    margin: 7px 0 0; padding-top: 7px; border-top: 1px solid var(--line);
    text-align: left;
  }
  .l-row-first b { display: block; font-size: 14px; }
  .l-row-main { padding: 24px 28px; }
  .l-row-title { font-size: 21px; }
  .l-row-rent { font-size: 29px; }
}

/* ── kiraya sach me kya chal raha hai (shehar ke band) ───────────────────
   Har portal "starting from ₹5,000" likhta hai -- wo sabse sasti listing
   hoti hai aur kisi kaam ki nahi. Yahan BEECH ka daam (median) hai, uske
   saath ginti ki kitni listing par nikla. Ginti ke bina koi ank sach nahi
   hota (§79), isliye 5 se kam listing wala shehar yahan aata hi nahi. */
.l-bandgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--ink); }
.l-bandcell {
  padding: 20px 0; border-bottom: 1px solid var(--line);
  border-left: 0;
}
.l-bandcell:first-child { border-left: 0; padding-left: 0; }
.l-bandcell .city {
  font-family: var(--f-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.l-bandcell .mid {
  font-family: var(--f-serif); font-size: 26px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.l-bandcell .rng { font-size: 13px; color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.l-bandcell .n { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.l-bandcell a { color: var(--a1); text-decoration: none; font-weight: 500; }
.l-bandcell a:hover { text-decoration: underline; }
/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 561px) {
  .l-bandcell { border-left: 1px solid var(--line); padding-left: 22px; padding-right: 22px; }
}

/*  Section ke beech ki lakeer -- "yahan se agla hissa" ka nishaan, bina
    khaali jagah ke pahaad banaye. */
.l-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/*  ── 99Rental DNA + Smart Matching ───────────────────────────────────────
    Rang wahi token se jo poori site chalate hain -- --ok / --warn / --due --
    taaki dark aur light dono me apne aap theek baithe. Naya rang nahi banaya:
    ek hi baat kehne ke do rang do jagah rakh dena hi drift ki shuruaat hai. */
.l-dna-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.l-dna-btn {
  padding: 10px 16px; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.l-dna-btn:hover { border-color: var(--line-strong); }
.l-dna-sum, .l-dna-sum-wrap { font-size: 13px; color: var(--ink-2); }   /* 11 Oct 2026: `opacity .72` ki jagah token -- opacity ka rang naapa hi nahi jaata */

.l-dna-box {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 18px;
}
.l-dna-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.l-dna-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.l-dna-grid input, .l-dna-grid select {
  padding: 9px 10px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 400;
}
.l-dna-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.l-dna-check input { width: auto; }
.l-dna-actions { display: flex; gap: 10px; margin-top: 14px; }
.l-dna-save {
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--ink);
  background: var(--ink); color: var(--surface); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.l-dna-clear {
  padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
/*  Yeh line chhoti hai par zaroori: aadmi apna budget tabhi likhta hai jab
    use pata ho ki wo kahin nahi ja raha. */
.l-dna-priv { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }   /* 11 Oct 2026: `opacity .65` ki jagah token */

.l-dna-chip {
  display: inline-block; margin-bottom: 5px; padding: 3px 9px; border-radius: var(--r-xl);
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--line); color: var(--ink); background: var(--bg);
}
.l-dna-hi  { color: var(--ok);   border-color: var(--ok); }
.l-dna-ok  { color: var(--ok);   border-color: var(--line); }
.l-dna-mid { color: var(--warn); border-color: var(--warn-line); }
/*  "Weak match" halka dikhta hai par padha jaana chahiye. Pehle yahan
    `opacity: .8` tha -- wo chip ke matn AUR uske kinare dono ko dhundhla
    karta tha, aur opacity ka gunanfal kisi ko dikhta nahi. Ab rang se. */
.l-dna-lo  { color: var(--ink-2); }
.l-dna-no  { color: var(--due);  border-color: var(--due); }

/*  ══ PATTI KE PEECHHE KE CHAAR PANEL ═════════════════════════════════════
    Verified · Your match · Rent here · Location -- ek waqt me ek dikhta
    hai (`.r-tabs`, rental-page.js). Isliye inka roop EK hona chahiye: tab
    badalte hi gaddi, sheershak ka naap aur lakeer badal jaaye to patti ek
    hi cheez ke chaar roop dikhane lagti hai, aur aadmi ko lagta hai ki wo
    kisi aur page par chala gaya.

    28 Sep 2026 tak Verified ke alawa koi bhi is roop me nahi tha, aur
    naap liya gaya tha (Chromium, asli dhaanche par):

      sheershak      Verified 17px  ·  baaki teen 23px (browser ka default)
      andar ki gaddi Verified 22px  ·  baaki teen SIFAR -- matn card ki
                                       lakeer se chipka hua, aur "Your
                                       match" ka aakhri vaakya kinare se
                                       bahar nikalta hua
      dabba          "Rent here" card tha hi NAHI -- wo ek khula
                     `.r-block` tha, yaani patti ke peechhe se panel hi
                     gayab
      hover          chaaron par card wali uthne-chipakne wali harkat

    Maalik: "baaki teen panel bhi same rhytam par le aao."

    Har panel ka apna block neeche hai; unme SIRF wo cheez hai jo us panel
    ki apni hai (band ki patti, naksha ka dabba, nishaan). Jo sab me ek
    hai wo yahan, ek hi baar.

    ⚠️  GADDI EK JAGAH SE -- `--pan-pad` / `--pan-pad-b`. Jo hissa poori
        chaudai ka hai (Verified ka lipta hua aakhri hissa) usi naap ki
        ULTI margin se bahar nikalta hai. Do jagah ank likhne par ek din
        wo alag ho jaate hain aur us patti ka kinara card se aadha andar
        reh jaata hai.

    ⚠️  HOVER KI HARKAT YAHAN BAND HOTI HAI. `.l-card` par uthne-chipakne
        wali harkat isliye hai ki wo ek LINK hai. Panel khulta hi nahi;
        us harkat ka matlab "main dabaya ja sakta hoon" hota hai, aur wo
        ek jhooth hai (§79). */
.r-pan { --pan-pad: 16px; --pan-pad-b: 18px; padding: 17px var(--pan-pad) var(--pan-pad-b); }
@media (min-width: 561px) { .r-pan { --pan-pad: 22px; padding-top: 20px; } }
.r-pan:hover { transform: none; border-color: var(--line); box-shadow: none; }
.r-pan .l-h2 {
  margin: 0 0 15px; font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3;
}
.r-pan > :last-child { margin-bottom: 0; }

/*  Sar ki lakeer: ank/chip baayein, uska aadhaar daayein -- teeno panel
    par ek hi shakl, isliye neeche ke teeno block isi ko padhte hain. */
.r-pan-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
/*  Sar ke neeche ka matn: kis aadhaar par yeh ank bana (§79 -- ank akela
    kabhi nahi jaata). */
.r-pan-basis { font-size: 13px; font-weight: 400; color: var(--ink-3); }
/*  Panel ke aakhir me ek chhoti si sach wali line. Teeno panel me ek hi
    naap, kyunki wo ek hi kism ki baat hai. */
.r-pan-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.55; }
/*  Jo hisse apne aap lipat kar do column ban jaate hain. 280px se patla
    khaana nahi banta, isliye tang jagah par column apne aap EK ho jaata
    hai -- koi media query nahi, kyunki sawaal viewport ka nahi, is dabbe
    ki chaudai ka hai (panel kabhi poori chaudai par hota hai aur kabhi
    360px ki patti ke bagal).

    ⚠️  GRID NAHI, MULTICOL -- 28 Sep ko Verified par dekh kar chuna gaya:
        grid me har kataar apne sabse lambe khaane jitni oonchi hoti hai,
        to lipti hui lakeer apne padosi ke neeche ek khaali dhabba chhod
        deti thi. */
.r-pan-flow { columns: 280px 2; column-gap: 26px; }
.r-pan-flow > * { break-inside: avoid; -webkit-column-break-inside: avoid; }

/*  ── "Your match" panel (99Rental DNA) ───────────────────────────────────
    Dhaancha Verified ka hu-ba-hu: sar ki lakeer, phir behte hue khaane,
    phir ek sach wali line.

    ⚠️  NISHAAN GROUP KE SIR PAR HAI, HAR LAKEER PAR NAHI. Ek group ki har
        baat ek hi haalat ki hai, to har line par wahi ✓ dohraana sirf
        shor hai -- aur shor hi wo cheez thi jise hatane ko kaha gaya.
        Verified me nishaan har lakeer par isliye hai ki wahan har jaanch
        ki apni alag haalat hoti hai.

    ⚠️  NISHAAN KI ZUBAAN VERIFIED WALI HI HAI -- ✓ / ◐ / ✕, aur "pata
        nahi chala" par KOI NISHAAN NAHI. Nishaan ek faisla hai; jahan
        faisla hua hi nahi wahan wo nahi lagta. Do panel ek patti ke
        peechhe hain; do alag zubaan rakhna unhe do alag system bana
        deta hai.

    ⚠️  Sirlekh ka rang ab NEUTRAL hai (--ink-2), tone sirf nishaan par --
        wahi jo `.l-tr-t` karta hai. Pehle sirlekh khud hara/amber/laal
        tha; nishaan ke saath wo do baar ek hi baat kehna ho jaata. */
.l-dna-blocks { padding-top: 14px; }
.l-dna-block { margin: 0 0 14px; }
.l-dna-t {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2);
}
.l-dna-m { font-weight: 700; font-size: 13px; line-height: 1; }
.l-dna-good .l-dna-m { color: var(--ok); }
.l-dna-warn .l-dna-m { color: var(--warn); }
.l-dna-bad  .l-dna-m { color: var(--due); }
.l-dna-block ul { margin: 5px 0 0; padding-left: 19px; font-size: 13px; line-height: 1.5; }
.l-dna-block li { padding: 2px 0; }
/*  "Pata nahi chala" halka rehta hai -- wo listing ka aib NAHI hai, aur
    score me uska koi hissa nahi. Halka rang se, `opacity` se nahi. */
.l-dna-unk ul { color: var(--ink-3); }

/*  ── "Rent here" panel (r-intel) ─────────────────────────────────────────
    Band ki patti hi asli baat hai: kirayedaar ek nazar me dekh leta hai ki
    yeh listing sasti taraf hai ya mehngi. Ginti ke ank uske neeche hain --
    pehle tasveer, phir tafseel.

    ⚠️  28 Sep 2026 tak yeh panel CARD HI NAHI THA (`.r-block`), aur uska
        apna `<h2>` module ke andar likha tha. Patti ke peechhe wo ek
        gayab hua panel jaisa dikhta tha. Ab shell rental-page.js deta
        hai, baaki teeno ki tarah -- module sirf andar ka hissa lautata
        hai. */
.r-intel-tag {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); white-space: nowrap;
}
/*  Rang sirf ishaara hai, faisla nahi -- "mehnga" ka matlab bura nahi hota
    (badi property, achhi manzil). Isliye laal ki jagah amber.
    ⚠️ Yeh teeno pehle pakke hex the (gehre roop ke hare/amber/neele). Naye
       halke kagaz par wo teeno gayab ho jaate the, isliye ab token se --
       dono roop me apne aap sahi baithte hain. */
.r-intel-tag.ok { color: var(--ok);   border-color: currentColor; background: rgba(var(--a1-rgb),.08); }
.r-intel-tag.hi { color: var(--warn); border-color: currentColor; background: rgba(154,106,18,.08); }
.r-intel-tag.lo { color: var(--a3);   border-color: currentColor; background: rgba(var(--a3-rgb),.08); }

.r-intel-band { margin: 15px 0 0; }
.r-intel-scale {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--ink-3); margin-bottom: 6px;
}
.r-intel-bar {
  position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--line);
}
.r-intel-bar > i {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 999px;
  background: var(--a1); border: 2px solid var(--bg);
  transform: translate(-50%, -50%);
}
.r-intel-me { margin-top: 9px; font-size: 13.5px; color: var(--ink-2); }
.r-intel-me b { color: var(--ink); }
.r-intel-facts { margin-top: 12px; }
/*  Jab band bana hi na ho (3 se kam listing) -- tab sirf ek saaf line, koi
    patti nahi. Khaali dhaancha dikhana andaaza dikhane jaisa hi bura hai. */
.r-intel-thin { margin: 0; font-size: 13px; }

/*  ── 99Trust Score panel ─────────────────────────────────────────────────
    Maalik (28 Sep 2026), is panel ka screenshot bhej kar: "page ka space
    kam le, cluttery bhi na dikhe, modern & classy bhi lage aur single
    glance mein information mil jaye."

    Naapa gaya tha: 1280px par panel 670px lamba tha, phone par 707px --
    aur uska poora matn 8 chhoti lakeeron ka hai. Lambai teen jagah se
    aati thi, aur teenon yahan band hui hain:

      1. har jaanch TEEN lakeer leti thi (naam / saboot / source), ek ke
         neeche ek. Ab do: naam, aur uske neeche saboot + source ek hi
         lakeer par (`·` neeche `.l-tr-s::before` se lagta hai).
      2. jaanchein ek hi column me thin. Ab wo khud behti hain -- chaudi
         jagah par do column, patli par ek. Ginti kahin likhi nahi hai:
         panel kabhi poori chaudai par hota hai aur kabhi 360px ki patti
         ke bagal, aur us farq ka jawab sirf container ki chaudai ke paas
         hai.
      3. har kataar par ek lakeer thi -- aath lakeerein ek dabbe me. Ab
         sirf do: sar ke neeche, aur lipte hue hisse ke upar. Baaki jagah
         se alag hota hai, lakeer se nahi. ("Lakeer, jagah aur
         taaipografi" -- is file ka apna niyam, sar par likha hai.)

    ⚠️  MATN EK SHABD BHI NAHI GHATA. Har jaanch, uska saboot, uska source,
        dono ginti, "pata nahi chala" aur "publicly verifiable nahi" ke
        dono block aur §79 wali line -- sab jyun ke tyun hain. Sirf unki
        laiout badli hai. Kam jagah lene ka matlab kam batana nahi hai;
        agli baar jab yeh panel chhota karna ho to bhi yahi shart hai.

    ⚠️  28 Sep ki shaam yeh panel akela tha; usi din baaki teen bhi isi
        rhythm par aaye, aur jo cheez sab me ek hai wo upar `.r-pan` me
        chali gayi -- gaddi (`--pan-pad`), sheershak ka naap, sar ki
        lakeer, behta hua hissa, aakhri note, aur hover ka band hona.
        Yahan sirf wo bacha hai jo SIRF Verified ka hai. Ek shakl do jagah
        rakhne par ek din chaar tab chaar alag dabbe dikhane lagte hain.

    Rang wahi token se: --ok verified, --warn adhoora, --due jo hai hi
    nahi. "Pata nahi chala" aur "publicly verifiable nahi" dono HALKE
    rakhe jaate hain -- wo listing ke aib nahi hain, aur score me unka koi
    hissa nahi. Unhe laal karna hi wo jhooth hota jise yeh poora panel
    rokta hai.

    ⚠️  IS POORE BLOCK ME `opacity` SE KOI MATN HALKA NAHI HOTA -- halka
        matn --ink-2 / --ink-3 se banta hai. Wajah naapi hui hai: purane
        roop me `.l-tr-blk` par .68 aur uske `p` par .6 dono lagte the
        (yaani asli .41), aur `/100` par tone ki .88 ke upar apni .5 --
        us shakl me wo lakeerein 2.2 aur 2.9 par thin, yaani AA se
        neeche. Token wala rang dono roop me naapa gaya hai; `opacity`
        ka gunanfal kisi ko dikhta nahi aur chup-chaap neeche le jaata
        hai.

    ⚠️  ISI WAJAH SE `.l-tr-hi` AUR `.l-tr-ok` AB EK HI HARE ME HAIN.
        Pehle farq sirf .88 opacity ka tha, aur wahi opacity `/100` ko
        2.9 par le jaati thi. Farq ab shabd karta hai -- "Highly trusted"
        banaam "Trusted" -- jo ek rang ke shade se padha bhi zyada jaata
        hai. */
/*  Panel ki gaddi `.r-pan` deti hai. Yahan sirf uska apwaad: lipta hua
    aakhri hissa poori chaudai ka hai aur apni gaddi khud rakhta hai,
    isliye panel neeche se khula rehta hai. */
.l-tr-panel { padding-bottom: 0; }
.l-tr-score {
  font-family: var(--f-serif); font-size: 31px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1;
}
.l-tr-score span {
  font-family: var(--f-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0; color: var(--ink-3);
}
.l-tr-hi  { color: var(--ok); }
.l-tr-ok  { color: var(--ok); }
.l-tr-mid { color: var(--warn); }
.l-tr-lo  { color: var(--due); }
.l-tr-band { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; font-weight: 700; }

/*  Jaanchein do column me behti hain -- wo `.r-pan-flow` se aata hai,
    jo chaaron panel ka saanjha hai (upar uski poori wajah likhi hai).
    Yahan sirf list ka apna roop. */
.l-tr-list {
  list-style: none; margin: 0; padding: 13px 0 1px;
}
.l-tr-list li { display: flex; gap: 9px; padding: 0 0 12px; font-size: 13px; }
.l-tr-list li > span:last-child { min-width: 0; }
.l-tr-list strong { display: block; font-weight: 600; line-height: 1.35; }
.l-tr-m { flex: 0 0 15px; text-align: center; font-weight: 700; font-size: 13px; line-height: 1.45; }
.l-tr-y .l-tr-m { color: var(--ok); }
.l-tr-p .l-tr-m { color: var(--warn); }
.l-tr-n .l-tr-m { color: var(--due); }
/*  Saboot aur wo kahan se aaya -- ek hi lakeer par. `·` CSS lagata hai,
    taaki source na hone par wo akela nishaan na reh jaaye. */
.l-tr-e { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.l-tr-s::before { content: "·"; margin: 0 5px; }

/*  Lipta hua aakhri hissa. Dhakkan par GINTI likhi hoti hai, isliye band
    halat me bhi pata chalta hai ki kitni cheezein jaanchi nahi ja sakin --
    chhupaya nahi gaya, lapeta gaya hai. Poori chaudai ka hai, isliye
    panel ki gaddi se ulta bahar nikalta hai. */
.l-tr-more { margin: 14px calc(var(--pan-pad) * -1) 0; border-top: 1px solid var(--line); }
.l-tr-more > summary {
  cursor: pointer; list-style: none; padding: 13px var(--pan-pad);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
.l-tr-more > summary::-webkit-details-marker { display: none; }
.l-tr-more > summary::after { content: "+"; margin-left: auto; font-size: 16px; line-height: 1; color: var(--ink-3); }
.l-tr-more[open] > summary::after { content: "–"; }
.l-tr-more > summary:hover { color: var(--ink); background: var(--surface-2); }
.l-tr-body { padding: 0 var(--pan-pad) var(--pan-pad-b); }

.l-tr-blk + .l-tr-blk { margin-top: 14px; }
.l-tr-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.l-tr-blk ul { margin: 5px 0 0; padding-left: 17px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.l-tr-blk p { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }

/*  ── "Location" panel (naksha) ───────────────────────────────────────────
    iframe ki apni koi unchai nahi hoti, isliye aspect-ratio se baandha hai
    -- warna wo 150px ka patla feeta ban kar reh jaata hai. Border-radius
    iframe par seedha nahi lagta (andar ka document bahar nikal aata hai),
    isliye wrap par overflow:hidden.

    ⚠️  `max-height` isliye ki 16/10 chaudi screen par 465px ka dabba bana
        deta tha -- ek tab me baaki teen panel se dugna. Naksha ko unchai
        chahiye, itni nahi. Phone par yeh hadd lagti hi nahi (wahan dabba
        224px ka hai).

    Aakhri wali sach-line ab `.r-pan-note` hai -- wahi jo baaki teen panel
    ke aakhir me hai. */
.l-map-wrap {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  aspect-ratio: 16 / 10; max-height: 420px; background: var(--surface);
}
@supports not (aspect-ratio: 1) { .l-map-wrap { height: 260px; } }
.l-map-frame { display: block; width: 100%; height: 100%; border: 0; }
.l-map-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 13px; }

/* ═══ search ka LIST <-> MAP — toggle, split, pin ═══════════════════════
   Toggle filter NAHI hai -- nateeje wahi rehte hain, sirf dabba palalta
   hai. Isliye iska roop bhi filter-row se halka rakha gaya hai: chhota
   segmented button, koi bada dabba nahi. Rang wahi token: bharav --a1
   (hara), koi naya rang nahi. */
/*  Toggle + share ki patti. JS na chale to dono chhupe rahte hain
    (button par hidden attribute hai) -- bina JS ke jo control dikhe aur
    kaam na kare, wahi toota hua vaada hai. */
.l-viewrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 0;
}
.l-viewbar {
  display: inline-flex; gap: 0; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); overflow: hidden;
}
.l-share {
  font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  transition: .16s var(--ease);
}
.l-share:hover { color: var(--ink); background: var(--surface-2); }
.l-share svg { opacity: .75; display: none; }
/*  Phone par dono dabbe ek patti me sate hain -- text hi kaafi hai, isliye
    icon BASE me chhupa hai aur 520px se upar hi aata hai. */
@media (min-width: 521px) {
  .l-share svg { display: block; }
  .l-share { padding: 11px 16px; }
}
.l-viewbar button {
  font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px; border: 0; background: transparent; color: var(--ink-2);
  cursor: pointer;  transition: .16s var(--ease);
}
.l-viewbar button + button { border-left: 1px solid var(--line); }
.l-viewbar button:hover { color: var(--ink); background: var(--surface-2); }
.l-viewbar button[aria-pressed="true"] { background: var(--a1); color: var(--on-a1); }

/*  Split: baayein list, daayein chipki hui naksha. Chaudi screen par hi
    do khaane -- phone par pehle list, phir naksha (koi overlay nahi jo
    list ko daba de). */
.l-split { display: flex; flex-direction: column; }
.l-split .l-mappane { order: -1; margin: 0 0 18px; }
@media (min-width: 1000px) {
  .l-split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
  /*  ⚠️ Phone wala kram (naksha PEHLE) base me hai, isliye yahan use WAPAS
      lena padta hai. Pehli koshish me yeh reset ek ALAG 1000px block me
      neeche likha tha, aur wahan se usne is block ka `display: grid` bhi
      haraa diya -- 1024px par split do khaane ki jagah ek lamba column ban
      gaya tha (A/B me 147 element laal). Reset wahin rehna chahiye jahan
      badi screen ka asli roop banta hai. */
  .l-split .l-mappane { order: 0; margin: 0; }
  .l-mappane { position: sticky; top: 128px; }
  /*  Map view me list ke cards ko thoda chauda karna theek hai -- ek
      khaane me 3-col grid bikhra lagta hai. */
  .l-split .l-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
.l-mappane-sticky { display: flex; flex-direction: column; gap: 0; }

/*  Naksha ka dabba -- kagaz ke card jaisa hi, same kona, same lakeer. */
.lmv-map {
  height: 340px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-1); background: var(--surface-2);
}
/*  Leaflet ke apne kone ko bhi yahi kona -- iframe/map background kagaz ka. */
.lmv-map .leaflet-container { height: 100%; width: 100%; background: var(--surface-2); font: inherit; }

/*  Pin na hone ka saaf haalat -- khaali naksha jhooth nahi bolta. */
.lmv-empty {
  padding: 40px 24px; border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong); background: var(--surface);
  color: var(--ink-2); font-size: 13.5px; line-height: 1.6; text-align: center;
}

/*  Pin -- ek thos rang ka nishaan, gradient nahi. Rang JS deta hai
    (roop ke saath badalta hai); yahan sirf shakl. */
.lmv-pinwrap { background: transparent; border: 0; }
.lmv-pin { display: flex; filter: drop-shadow(0 2px 2px rgba(24,20,12,.35)); }

/*  Popup -- kagaz ka chhota card, bade card ki bhasha me. */
.lmv-pop { font-family: var(--f-sans); min-width: 180px; }
.lmv-pop b {
  display: block; font-family: var(--f-serif); font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3; color: var(--ink); margin-bottom: 2px;
}
.lmv-pop span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.lmv-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lmv-pop-row i { font-style: normal; font-family: var(--f-serif); font-weight: 600; color: var(--a1); font-variant-numeric: tabular-nums; }
.lmv-pop-row .l-save { position: static; width: 30px; height: 30px; }
.lmv-pop-link {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 1px;
}
.lmv-pop-link:hover { color: var(--a1); border-color: var(--a1); }
/*  Leaflet ka popup kachcha hai -- uska kona, lakeer aur parchai yahin. */
.lmv-map .leaflet-popup-content-wrapper { border-radius: var(--r); box-shadow: var(--sh-2); }
.lmv-map .leaflet-popup-content { margin: 14px 16px; }

/*  Pin se card, card se pin -- dono disha me ishara rang se, uchal kar
    nahi. Do second me shaant. */
.lmv-hl { outline: 2px solid var(--a1); outline-offset: 2px; border-radius: var(--r-lg); }

/*  Phone: map/list ek ke neeche ek, PAR MAP PEHLE -- toggle dabate hi
    naksha nazar aata hai, list ke neeche 2000px door nahi. DOM ka kram
    wahin hai (list pehle, taaki bina-JS wale ko pehle list mile); order
    sirf dikhta hai. Map khulta hi tab hai jab user ne manga, isliye uska
    upar hona list ko chhupata nahi -- niche scroll karke cards milte
    hain. */
/*  mobile-first: base phone ka, badi screen apwaad. */
@media (min-width: 1000px) { .lmv-map { height: 460px; } }

/*  Form ke chips ki pankti (9 Sep 2026)
    ---------------------------------------------------------------------
    `.chip` pehle se is file me hai aur wahi istemaal hota hai -- yahan
    sirf unki PANKTI ka naap hai. Naya chip-style banane se ye form baaki
    site se alag dikhne lagta, aur wahi bimari 99Yard par naapi gayi thi
    (wahan chaar form apna-apna theme rakhte the).  */
.l-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.l-chips .chip { padding: 9px 14px; }

/* ===========================================================================
   EARN WITH RBN99 (index.html #earn) -- 26 Sep 2026, badla 27 Sep 2026
   ---------------------------------------------------------------------------
   ⚠️ 27 Sep 2026: calculator ka poora CSS HATA DIYA GAYA -- .ce-grid,
   .ce-card, .ce-bar, .ce-seg*, .ce-legend, .ce-table*, .ce-num, .ce-ins,
   .ce-in*, .ce-total, .ce-warn, .ce-muted, .ce-asof, .ce-hide-sm. Wo hisaab
   ab rbn99.com par hai (maalik, 27 Sep). Yahan sirf do cheez bachi hai:
   highlight wala hero, aur paanch raaste ke card.

   ⚠️ HERO BHARA HUA NAHI HAI, AUR YEH SOCH KAR HAI. Poora bharav is site
   par SIRF `.l-band` ka haq hai ("yahi ek jagah hai jahan poora bharav
   aata hai") -- doosra bhara hua dabba us ek jagah ka matlab kha jaata.
   Isliye highlight kagaz ke tareeke se: surface, ek hairline, baayein
   `--a1` ki rail, aur wahi ruled texture jo band me hai -- bas syahi ki
   jagah hare rang me aur bahut halka.

   99Yard ke .ce-* ki jodidaar. Yahan SIRF lease.css ke token -- ek bhi hex
   nahi, kyunki yeh safha light aur dark dono me chalta hai (login-gate
   test isi kism ki galti pakadta hai).
   =========================================================================== */
.ce-hero {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line); border-left: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 26px 20px 24px;
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start;
}
/*  Baayein ki rail. `overflow: hidden` use gol kone me kaat deta hai,
    isliye border-left hataya gaya -- warna do lakeerein ek upar ek. */
.ce-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--a1);
}
.ce-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to right, rgba(var(--a1-rgb),.07) 0 1px, transparent 1px 48px);
  mask-image: radial-gradient(72% 150% at 100% 0%, #000 6%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 150% at 100% 0%, #000 6%, transparent 78%);
}
.ce-hero > * { position: relative; }
.ce-hero .l-eyebrow { grid-column: 1 / -1; margin: 0; }
.ce-hero h2 { margin: 0; }
.ce-hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ce-lede { margin: 0; font-size: 15px; line-height: 1.68; color: var(--ink-2); }
.ce-acts { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.ce-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/*  "Five ways" ka sirlekh: eyebrow ki lakeer ka ulta -- matn ke BAAD ek
    hairline jo chaudai bhar jaati hai. Wahi ek nishaan, doosri shakl me. */
.ce-h3 {
  display: flex; align-items: center; gap: 16px;
  margin: 36px 0 18px; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em;
}
.ce-h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.ce-ways { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: stretch; }
/*  Doosri pankti `start` par: uske do card ki lambai bahut alag hai (ek
    me gyarah naam, doosre me chhah). `stretch` par chhota card apne andar
    khaali pada dikhta hai -- khaali dabba galti lagta hai, chhota dabba
    nahi. */
.ce-ways + .ce-ways {
  margin-top: 18px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
}
.ce-way {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 18px 20px;
}
.ce-way-top {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.ce-no {
  font-family: var(--f-serif); font-size: 24px; font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--a1); font-variant-numeric: tabular-nums;
}
.ce-way-top .ce-chip { margin-left: auto; }
.ce-way h4 {
  margin: 0 0 8px; font-family: var(--f-serif); font-weight: 600;
  font-size: 17.5px; letter-spacing: -.02em;
}
.ce-way p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.65; }
/*  Lambi soochi do column me -- warna card apne padosi se dugna lamba ho
    jaata hai aur "paanch raaste" ek set ki tarah nahi padhe jaate. */
.ce-list {
  margin: 14px 0 0; padding: 0; list-style: none;
  columns: 1; column-gap: 28px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
}
.ce-list li { break-inside: avoid; position: relative; padding-left: 16px; margin-bottom: 7px; }
.ce-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 2px; border-radius: 1px; background: var(--a1);
}
/*  Chhoti soochi ek column me. Do column me wo aadhi oonchai leti hai aur
    card apne padosi ke andar khaali pada dikhta hai -- paanch raaste tab
    ek set ki tarah nahi padhe jaate. Ye naap ka faisla hai, isliye markup
    me likha hai: CSS gin nahi sakti ki soochi me kitne naam hain. */
.ce-list-1 { columns: 1; }
.ce-chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid currentColor;
}
.ce-live { color: var(--ok); }
.ce-own  { color: var(--a2); }
/*  ⚠️ 7 Oct 2026 -- `.ce-soon` (amber "Coming soon") aur `.ce-plan`
    ("Planned") YAHIN par the aur HATA diye gaye. Maalik: "sab live karoa
    nothing is coming soon and planned in both portals". Card 02 aur 03
    dono `ce-live` par aa gaye, aur jo hissa aaj bhi baaki hai uska naam
    ab card ke MATN me likha hai (cp-earn.test.js use naam lekar maangta
    hai) -- chip ki jagah lakeer, kyunki lakeer bata sakti hai ki kaunsa
    hissa baaki hai aur chip nahi.

    Bina lage hue rule yahan galti maane jaate hain -- `cp-earn.test.js`
    dono disha jaanchta hai. Koi chip wapas aaye to rule bhi wapas; git me
    pada hai. Rang the: ce-soon `--warn`, ce-plan `--ink-2`.
    99Yard par theek yahi hataya gaya hai. */
.ce-fine { margin: 24px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; max-width: 90ch; }

/*  mobile-first: base phone ka (ek column, chhoti gaddi, poori chaudai ke
    button), aur teen seedhiyan upar ki taraf. */
.ce-hero .btn, .ce-acts { width: 100%; }
@media (min-width: 481px) {
  .ce-hero { padding: 32px 26px 30px; border-radius: var(--r-xl); }
  .ce-hero .btn, .ce-acts { width: auto; }
  .ce-way { padding: 22px 24px 24px; }
  .ce-h3 { margin-top: 46px; }
}
/*  ⚠️ `:not(.ce-list-1)` -- aur yeh ek ASLI toot ke baad likha ja raha hai.
    `.ce-list-1` (chhoti soochi, ek column) ki apni lakeer neeche hai, aur
    uski specificity isi jitni (0,1,0) hai. Max-width ke zamane me yeh rule
    sirf CHHOTI screen par chalta tha, to takraav kabhi hua hi nahi. Ulta
    karte hi wo badi screen par chalne laga aur `.ce-list-1` ko haraa diya --
    raasta 05 ki soochi do column me chali gayi (1024px par naapa: LI 418 ->
    195px). Order badal kar bhi theek hota, par wo agle sampaadan me phir
    toot jaata; `:not()` kram par nirbhar nahi hai. */
@media (min-width: 561px) { .ce-list:not(.ce-list-1) { columns: 2; } }
@media (min-width: 881px) {
  .ce-hero { grid-template-columns: 1.08fr .92fr; gap: 24px 48px; align-items: end; padding: 40px 44px 38px; }
}