/* ===========================================================================
   styles/services.css — /services (kiraye ke kaagaz ka darwaza)
   ---------------------------------------------------------------------------
   Sirf DHAANCHA. Rang ek bhi naya nahi -- har keemat lease.css ke token se,
   isliye yeh halke aur gehre dono roop me apne aap theek baithta hai
   (`cp.css` wala hi niyam). Panne ka baaki sab kuch `.l-form*`, `.l-field`,
   `.l-lbl`, `.inp`, `.sel`, `.chip` ki wahi lugaai pehenta hai jo /join aur
   /requirements pehente hain.

   ⚠️ MOBILE-FIRST: base PHONE ka hai, har bada naap ek `min-width` ka
   apwaad -- aur har apwaad apne base rule ke BAAD. Isse ulta karne par
   same specificity par base baad me aakar jeet jaata hai aur override
   CHUP-CHAAP marta hai. `mobile-first.test.js` dono baatein (max-width
   zero, aur kram) har stylesheet par naapta hai.

   ⚠️ 99Yard ki `styles/services.css` iski jodidaar hai -- DHAANCHA wahi
   (`.sv-money` / `.sv-picks` / `.sv-consent`), par wahan ke token aur naap
   apne hain, aur soochi bhi alag hai (bikri ke kaagaz vs kiraye ke).
   =========================================================================== */

/*  ── Paisa wala dabba ──────────────────────────────────────────────────
    `<details>`, apna banaya hua toggle NAHI -- keyboard, screen reader aur
    "find in page", teenon bina JS ke.

    ⚠️ Pehla vaakya `<summary>` par hai aur HAMESHA dikhta hai. Poora dabba
    band karke "Pricing" jaisa sirlekh de dena aasan tha, aur wahi §4 ka
    ullanghan hota: "is panne par daam likha hi nahi hai" wo baat hai jo
    aadmi ko kuch bharne se PEHLE pata honi chahiye. */
.sv-money {
  margin: 0 0 20px; padding: 13px 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
}
.sv-money > summary {
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; line-height: 1.55; color: var(--ink);
}
.sv-money > summary::-webkit-details-marker { display: none; }
.sv-money > summary::after { content: " \25BE"; color: var(--a1); font-weight: 800; }
.sv-money[open] > summary::after { content: " \25B4"; }
.sv-money ul {
  margin: 11px 0 0; padding: 0; list-style: none;
  /*  `--ink-2`, `--ink-3` NAHI -- yeh wahi chhoti lakeerein hain jo batati
      hain ki aap kis cheez ke paise de rahe hain aur kis ke nahi. Jo padhi
      na ja sake uska likhna aur na likhna barabar hai. */
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.sv-money li { position: relative; padding-left: 15px; }
.sv-money li + li { margin-top: 8px; }
.sv-money li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 2px; border-radius: 1px; background: var(--a1);
}
.sv-money b { color: var(--ink); font-weight: 800; }

/*  ── Seva chunne ki soochi ─────────────────────────────────────────────
    ⚠️ `.chip` par `white-space: nowrap` hai (lease.css:639) aur yahan ke
    naam lambe hain -- "Electricity and water connection, name transfer or
    sub-meter" ek phone par chip ko screen se bahar le jaata hai. Isliye
    yahan chip apni poori chaudai leti hai aur matn lipat-ta hai; gol pill
    ki jagah seedha-saada kona, kyunki ab wo pill hai hi nahi -- ek qataar
    hai. Rang aur chuna-hua roop (`aria-pressed`) `.chip` ke apne hi hain. */
.sv-picks { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sv-picks .chip {
  white-space: normal; text-align: left; line-height: 1.45;
  border-radius: var(--r-sm); padding: 11px 13px; min-width: 0;
}
.sv-hint { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/*  ── Haan wali lakeer ──────────────────────────────────────────────────
    Checkbox apne aap ko sikudne nahi deta (`flex: none`), warna lamba matn
    use ek patli lakeer bana deta hai aur dabane ka nishaana gayab ho jaata
    hai. */
.sv-consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 0;
  font-size: 13px; line-height: 1.6; color: var(--ink-2); cursor: pointer;
}
.sv-consent input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--a1); }

/*  ── 640px se upar: soochi do column me ────────────────────────────────
    Phone par do column har naam ko teen lakeer me tod deta hai; 640px se
    upar jagah hai aur gyarah naam ek nazar me aa jaate hain. Yeh rule apne
    base (`.sv-picks`) ke BAAD hai -- upar wali wajah. */
@media (min-width: 640px) {
  .sv-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}