/* Telugu, Hindi and English: three phones side by side, the same screen in each language; the shop words as a
   three-column glossary; how packs download; switching. Telugu/Hindi text on this page uses its own subsets of Noto
   Sans Telugu/Devanagari holding just this page's characters (tools/make_glyph_fonts.py builds them from
   content/en/features/languages.yaml; the full files are ~120 KB each and pushed mobile LCP past 2.5 s). */
@font-face { font-family: "Bisro Telugu"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../../fonts/lang-te.d3f6a58353.woff2) format("woff2") }
@font-face { font-family: "Bisro Hindi"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../../fonts/lang-hi.f5a7415186.woff2) format("woff2") }
[lang="te"] { font-family: "Outfit", "Bisro Telugu", "Bisro Glyphs", "Noto Sans Telugu", system-ui, sans-serif }
[lang="hi"] { font-family: "Outfit", "Bisro Hindi", "Bisro Glyphs", "Noto Sans Devanagari", system-ui, sans-serif }

.lg-hero { padding-top: 124px; padding-bottom: clamp(50px, 8vh, 90px) }
.lg-head { max-width: 860px; margin: 0 auto 40px; text-align: center }
.lg-head .crumbs ol, .lg-head .cta-row, .lg-head .kick { justify-content: center } .lg-head .lead { margin-left: auto; margin-right: auto }
.lg-head .h-xl { font-size: clamp(38px, 4.6vw, 68px) }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 44px); max-width: 1060px; margin: 0 auto; align-items: end }
.tr-col { margin: 0; display: grid; justify-items: center; gap: 14px }
.tr-col:nth-child(2) { transform: translateY(-22px) }
.tr-col figcaption { font-weight: 800; font-size: 19px; color: var(--ink); padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border) }
.lgph { width: min(270px, 100%) }
.hs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 34px 14px 16px; background: #F6F9FD; font-size: 13px }
.hs-top { display: flex; justify-content: space-between; align-items: baseline } .hs-top b { font-size: 14px } .hs-top span { color: var(--faint); font-size: 12.5px }
.hs-sales { padding: 14px; border-radius: 12px; background: var(--ink); color: #fff } .hs-sales small { display: block; color: #A3ACB7; font-size: 12.5px } .hs-sales b { font: 800 24px/1.2 var(--font) }
.hs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .hs-two div { padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--border) }
.hs-two small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; min-height: 30px } .hs-two b { font-size: 15.5px }
.hs-alert { padding: 9px 10px; border-radius: 9px; background: #FFF4E5; color: #6B3E00; font-weight: 700; font-size: 12.5px }
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .hs-grid span { display: grid; place-items: center; min-height: 54px; padding: 6px; text-align: center; border-radius: 10px; background: #fff; border: 1px solid var(--border); font-weight: 600; font-size: 12.5px; line-height: 1.25 }
.hs-btn { margin-top: auto; padding: 11px; border-radius: 10px; background: var(--teal); color: #00281D; font-weight: 700; text-align: center; font-size: 13.5px }
[data-k] { transition: box-shadow .15s, background .15s; cursor: default }
[data-k].hl { box-shadow: 0 0 0 3px #FFD54F; border-radius: 6px }
.hs-sales small.hl { box-shadow: 0 0 0 3px #FFD54F }
.lg-eg { text-align: center; margin-top: 18px }
.lg-swipe { display: none }

/* words */
.wd-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: end; margin-bottom: 30px } .wd-head .lead { margin: 0 }
.wd-t { width: 100%; max-width: 1000px; border-collapse: collapse; font-size: 18px }
.wd-t th, .wd-t td { text-align: left; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--border); font-weight: 500 }
.wd-t thead th { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--link); border-bottom: 2px solid var(--ink) }
.wd-t tbody th { font-weight: 700; width: 30% }
.lg-words .eg { margin-top: 12px }

/* packs */
.lg-packs { background: linear-gradient(180deg, var(--bg), #EEF4FB 25%, #EEF4FB 75%, var(--bg)) }
.pk-flow { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative }
.pk-flow li { position: relative; padding: 0 30px 0 0 } .pk-flow li + li { padding-left: 30px }
.pk-flow li + li::before { content: ""; position: absolute; left: -9px; top: 26px; border: 9px solid transparent; border-left: 12px solid #9CCBF5 }
.pk-ic { display: block; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 14px; background: #fff; border: 1px solid var(--border); position: relative }
.pk-ic::after { position: absolute; inset: 0; display: grid; place-items: center; font: 800 18px/1 var(--font); color: var(--ink) }
.pk-app::after { content: "B" } .pk-pick::after { content: "Aa" } .pk-pack::after { content: "↓"; color: var(--link) }
.pk-flow b { font-size: 19px } .pk-flow p { margin: 6px 0 0; color: var(--muted) }

/* switch */
.lg-switch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: center }
.sw-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink) }
.sw-list li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--border) } .sw-list b { font-size: 19px } .sw-list span { color: var(--muted) }
.sw-list a { color: var(--link); font-weight: 700; text-decoration: none } .sw-list a:hover { text-decoration: underline }

@media (max-width: 980px) {
  .lg-hero { padding-top: 104px } .lg-head { margin-bottom: 26px } .lg-swipe { display: block; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--link); margin: 0 0 10px }
  .trio { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gl)); padding: 0 var(--gl) 10px; align-items: start }
  .tr-col { flex: 0 0 78%; scroll-snap-align: center } .tr-col:nth-child(2) { transform: none }
  .lgph { aspect-ratio: auto; height: 520px; width: 100% }
  .wd-head, .lg-switch { grid-template-columns: minmax(0, 1fr); gap: 14px } .wd-t { font-size: 15.5px } .wd-t th, .wd-t td { padding-right: 10px }
  .pk-flow { grid-template-columns: minmax(0, 1fr); gap: 24px } .pk-flow li, .pk-flow li + li { padding: 0 } .pk-flow li + li::before { display: none }
}
@media (prefers-reduced-motion: reduce) { [data-k] { transition: none } }