/* ═══════════════════════════════════════════════════════════════════════════
   site-hi.css — the Hindi pages (/hi/…). Loaded after site.css; written by
   tools/seo/gen_b.py's pages only. tokens.css already swaps in a Devanagari
   font STACK for html[lang^="hi"] (Kohinoor on Apple, Nirmala on Windows,
   Noto on Android) — this file only fixes what the Latin rhythm gets wrong.

   · Devanagari letters hang from one continuous headline, the shirorekha.
     ANY tracking breaks it: positive spacing cuts it into dashes, the
     negative display tracking the Latin headings use runs the matras into
     each other. Every heading, eyebrow and label goes to letter-spacing 0.
   · Its matras sit above the headline and below the baseline, so the tight
     1.06 display leading clips them on a two-line h1. Headings get room.
   · text-transform: uppercase does nothing to Devanagari and only shouts the
     Latin words inside a Hindi line (NIVASIK, POS), so labels drop it.
   ═══════════════════════════════════════════════════════════════════════════ */
html[lang^="hi"] body { line-height: 1.75; }
html[lang^="hi"] h1, html[lang^="hi"] h2, html[lang^="hi"] h3 { letter-spacing: 0; }
html[lang^="hi"] h1 { line-height: 1.3; }
html[lang^="hi"] h2, html[lang^="hi"] h3 { line-height: 1.4; }
html[lang^="hi"] .lede, html[lang^="hi"] .answer p, html[lang^="hi"] .sec-h p { line-height: 1.8; }
html[lang^="hi"] .eyebrow, html[lang^="hi"] .foot-cols h2, html[lang^="hi"] .tbl thead th,
html[lang^="hi"] .tag, html[lang^="hi"] .toc h2 { letter-spacing: 0; text-transform: none; }
html[lang^="hi"] .card p, html[lang^="hi"] .card li, html[lang^="hi"] .limits li,
html[lang^="hi"] details p, html[lang^="hi"] .ticks li, html[lang^="hi"] .steps li { line-height: 1.75; }

/* The one line that says the page is also in English — quiet, under the CTA. */
.hi-en { margin-top: 6px; font-size: var(--fs-caption); }
.hi-en a { color: var(--text-soft); }

/* A note under a card or a list: the caveat travels with the claim. */
.hi-note { margin-top: 12px; font-size: var(--fs-caption); color: var(--muted); max-width: 72ch; text-wrap: pretty; }
.card .hi-note { margin-top: auto; padding-top: 8px; }

/* Prices: neither the plan's name nor its price breaks across lines while
   there is room; on a phone the table scrolls sideways instead (.tbl.wide). */
@media (min-width: 641px) {
  html[lang^="hi"] .tbl tbody th, html[lang^="hi"] .tbl td:first-of-type { white-space: nowrap; }
}