/* ===========================================================================
   styles/services.css — /services (paperwork aur permission ka darwaza)
   ---------------------------------------------------------------------------
   Sirf DHAANCHA. Rang ek bhi naya nahi -- har keemat yard.css ke token se
   (`cp.css` wala hi niyam). Panne ka baaki sab kuch `.f-*` ki wahi lugaai
   pehenta hai jo /join aur /requirements pehente hain.

   ⚠️ MOBILE-FIRST (CLAUDE.md §23): base PHONE ka hai, har bada naap ek
   `min-width` ka apwaad -- aur har apwaad apne base rule ke BAAD likha
   hai. Isse ulta karne par same specificity par base baad me aakar jeet
   jaata hai aur override CHUP-CHAAP marta hai: na error, na kuch. Us din
   wo teen baar ho chuka hai (`.y-*`, `.y-stats`, `.y-word`).
   `mobile-first.test.js` dono baatein (max-width zero, aur kram) har
   stylesheet par naapta hai -- ab ye file bhi usi soochi me hai.
   =========================================================================== */

/*  ── Paisa wala dabba ──────────────────────────────────────────────────
    `<details>`, apna banaya hua toggle NAHI -- keyboard, screen reader aur
    "find in page", teenon bina JS ke (wahi faisla jo §7 aur §23 me liya
    gaya tha).

    ⚠️ 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, kisi toggle ke
    peechhe nahi. */
.sv-money {
  margin-top: 16px; 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(--a2); 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 chhoti lakeerein wahi 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 (§15/§16 ka wahi
      faisla, aur wahi wajah). */
  font-size: 12.5px; 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(--a2);
}
.sv-money b { color: var(--ink); font-weight: 800; }

/*  ── Seva chunne ki soochi ─────────────────────────────────────────────
    ⚠️ `.chip` par `white-space: nowrap` hai (yard.css:339) aur yahan ke
    naam lambe hain -- "Copies of land records (jamabandi, fard, khasra,
    khatauni)" 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,
    yahan dobara nahi likhe gaye. */
.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;
}

/*  ── 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-top: 18px;
  font-size: 12.5px; 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); }
.sv-consent a { color: var(--a1); font-weight: 800; text-decoration: none; }
.sv-consent a:hover { text-decoration: underline; }

/*  ── 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 solah 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)); }
}