/*  styles/stamp-duty.css — /stamp-duty-in-<state> (9 Nov 2026).

    Rang sirf TOKEN se -- ek bhi naya hex nahi (`yard.css` ke `:root` se).
    Naap mobile-first: base phone ka, `min-width` uska apwaad, aur har
    override apne base rule ke BAAD (§23 ka wahi kram -- pehle likhne par
    wo chup-chaap marr jaata hai).

    Sabse chhota akshar 13px -- §30 ka 12px ka farsh kahin nahi tootta. */

/*  ★ SHARTEIN TABLE SE PEHLE, AUR DIKHNE LAAYAK. Yeh koi "fine print"
    nahi hai: rate ek input hai, daawa nahi, aur jo aadmi yahan apna kharch
    naapne aaya hai uske liye ye teen baatein ank se zyada zaroori hain.
    Isliye `--ink-2` (AAA), 13.5px, aur baayein ek lakeer jo nazar kheenche
    -- chhupane wala grey nahi. */
.sd-fine {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--a2);
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.sd-fine p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.sd-fine p + p { margin-top: 8px; }
.sd-fine a { color: var(--a1); font-weight: 700; }

/*  ★ Table apne DABBE ke andar khiskti hai, poora panna nahi -- wahi
    faisla jo card ke chip par §33 par liya gaya.

    ⚠️ Yeh wrapper pehli likhawat me CHHOOT gaya tha: tippani me likha tha
       ki table `overflow-x` ke andar khiskti hai, par rule likha hi nahi
       gaya. 320px par poora panna 61px side-scroll kar raha tha, aur wo
       BROWSER me pakda gaya -- kisi test ne nahi bataya. (Tippani likh
       dena aur rule likh dena do alag kaam hain.) */
.sd-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sd-tbl {
  width: 100%;
  min-width: 300px;
  margin: 20px 0 0;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.55;
}
.sd-tbl caption {
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 0 8px;
}
.sd-tbl th, .sd-tbl td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.sd-tbl thead th {
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sd-tbl tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.sd-tbl tbody td { color: var(--ink-2); }

.sd-eg, .sd-next { margin: 22px 0 0; }
.sd-eg h2, .sd-next h2 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sd-eg p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.sd-eg strong { color: var(--ink); font-weight: 800; }
.sd-note { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 8px 0 0; }
.sd-next .y-cities { margin-bottom: 10px; }
.sd-next a { color: var(--a1); font-weight: 700; }
.sd-next .y-city { color: var(--ink-2); font-weight: 600; }

/*  640px se upar table ko saans milti hai. Yeh rule apne base ke BAAD hai
    -- mobile-first ka kram. */
@media (min-width: 640px) {
  .sd-tbl { font-size: 14px; }
  .sd-tbl th, .sd-tbl td { padding: 12px 14px; }
}