@font-face{font-family:HGM-CJK;src:url(/assets/fonts/NotoSansCJKsc-Regular.otf) format("opentype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:HGM-Devanagari;src:url(/assets/fonts/NotoSansDevanagari-Regular.ttf) format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:HGM-Bengali;src:url(/assets/fonts/NotoSansBengali-Regular.ttf) format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:HGM-Arabic;src:url(/assets/fonts/NotoSansArabic-Regular.ttf) format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:HGM-Cyrillic;src:url(/assets/fonts/NotoSans-Regular.ttf) format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
html[lang="zh-Hans"] body{font-family:HGM-CJK,Inter,"Noto Sans SC",sans-serif}html[lang="hi"] body{font-family:HGM-Devanagari,Inter,sans-serif}html[lang="bn"] body{font-family:HGM-Bengali,Inter,sans-serif}html[lang="ar"] body{font-family:HGM-Arabic,Inter,sans-serif}html[lang="ru"] body{font-family:HGM-Cyrillic,Inter,sans-serif}
.language-switch{position:relative;z-index:40;font-size:11px;flex:0 0 auto}.language-switch summary{list-style:none;cursor:pointer;border:1px solid var(--line,#d8ded7);border-radius:4px;padding:9px 10px;white-space:nowrap;color:inherit}.language-switch summary::-webkit-details-marker{display:none}.language-options{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;max-height:65vh;overflow:auto;background:#fff;border:1px solid var(--line,#d8ded7);box-shadow:0 12px 34px #13251b22;border-radius:6px;padding:6px;display:grid;z-index:100}.language-option{display:block;padding:9px 10px;border-radius:4px;color:#152027;text-decoration:none}.language-option:hover,.language-option:focus-visible,.language-option[aria-current="page"]{background:#edf2f8;color:#12203b}.skip+*{}html[dir="rtl"] body{direction:rtl;text-align:right}html[dir="rtl"] .site-header,html[dir="rtl"] .header-actions,html[dir="rtl"] .hero-actions{direction:rtl}html[dir="rtl"] .site-header{flex-direction:row-reverse}html[dir="rtl"] .language-options{right:auto;left:0}html[dir="rtl"] input,html[dir="rtl"] textarea{direction:rtl;text-align:right}html[dir="rtl"] pre,html[dir="rtl"] code,html[dir="rtl"] a[href^="http"],html[dir="rtl"] [dir="ltr"]{direction:ltr;unicode-bidi:isolate;text-align:left}html[dir="rtl"] svg.lucide-arrow-up-right{transform:scaleX(-1)}html[dir="rtl"] .breadcrumbs{direction:rtl}
@media(max-width:760px){.site-header{gap:10px}.language-switch{margin-inline-start:auto}.language-options{position:fixed;right:12px;top:75px;left:auto;min-width:180px}html[dir="rtl"] .language-options{left:12px;right:auto}.language-switch summary{padding:8px}.site-header nav{gap:12px}}

@media(max-width:430px){.desktop-cta{display:none!important}.language-switch summary{font-size:0;min-width:30px;text-align:center;padding:8px 5px}.language-switch summary:before{content:attr(data-code);font-size:10px}}

/* --- Language switcher fix + enrichment (2026-10-29) ---
   The sticky preference bar (z-index 45) painted over the open language
   panel because the header stacking context is capped at z-index 30 in
   styles.css. Raising the header context to 60 (header.site-header beats
   the .site-header rule on specificity) puts the panel above the bar.
   Panel is wider; each option gains a flag and a one-line country note. */
header.site-header{position:relative;z-index:60}
.language-options{width:min(352px,calc(100vw - 24px));min-width:272px;max-height:min(74vh,580px);padding:10px;gap:4px;border-radius:10px}
.language-option{display:flex;flex-wrap:wrap;align-items:center;column-gap:11px;padding:10px 11px;border-radius:7px;font-size:13.5px}
.language-option::before{font-size:21px;line-height:1;flex:0 0 auto}
.language-option[lang="en"]::before{content:"\1F1FA\1F1F8"}
.language-option[lang="zh-Hans"]::before{content:"\1F1E8\1F1F3"}
.language-option[lang="hi"]::before{content:"\1F1EE\1F1F3"}
.language-option[lang="es"]::before{content:"\1F1EA\1F1F8"}
.language-option[lang="ar"]::before{content:"\1F1EA\1F1EC"}
.language-option[lang="fr"]::before{content:"\1F1EB\1F1F7"}
.language-option[lang="bn"]::before{content:"\1F1E7\1F1E9"}
.language-option[lang="pt"]::before{content:"\1F1E7\1F1F7"}
.language-option[lang="id"]::before{content:"\1F1EE\1F1E9"}
.language-option[lang="ru"]::before{content:"\1F1F7\1F1FA"}
.language-option::after{flex:1 1 100%;padding-inline-start:32px;font-size:11px;line-height:1.45;color:#5c6d62}
.language-option[lang="en"]::after{content:"United States \00B7  \2248  1.5B speakers worldwide"}
.language-option[lang="zh-Hans"]::after{content:"China \00B7  \2248  1.1B speakers"}
.language-option[lang="hi"]::after{content:"India \00B7  \2248  600M speakers"}
.language-option[lang="es"]::after{content:"Spain & Latin America \00B7  \2248  560M speakers"}
.language-option[lang="ar"]::after{content:"Egypt & the Arab world \00B7  \2248  380M speakers"}
.language-option[lang="fr"]::after{content:"France \00B7  \2248  310M speakers"}
.language-option[lang="bn"]::after{content:"Bangladesh \00B7  \2248  270M speakers"}
.language-option[lang="pt"]::after{content:"Brazil \00B7  \2248  260M speakers"}
.language-option[lang="id"]::after{content:"Indonesia \00B7  \2248  200M speakers"}
.language-option[lang="ru"]::after{content:"Russia \00B7  \2248  255M speakers"}
@media(max-width:760px){.language-options{width:min(352px,calc(100vw - 24px));min-width:0}}

/* --- Language switcher theme + RTL correction (2026-10-30) ---
   1) Panel and options follow the active theme (light / dark / agentic)
      through the site variables instead of hardcoded light colors.
   2) Every option row keeps one LTR layout: the Arabic label's own
      dir="rtl" no longer flips its row, so flag, name, and note align
      like every other language.
   3) On RTL pages the desktop panel anchors to the switcher's right
      edge like every other page; the old left:0 rule pushed it off
      the right side of the screen (mobile keeps its fixed placement).
   4) The switcher is normalized to block layout on every page,
      overriding the stray inline display:flex on the homepage. */
.language-switch{display:block!important}
.language-options{background:var(--paper);border-color:var(--line);box-shadow:0 12px 34px #00000030;color:var(--ink)}
.language-option{color:var(--ink);direction:ltr;text-align:left}
.language-option:hover,.language-option:focus-visible,.language-option[aria-current="page"]{background:var(--soft);color:var(--ink)}
.language-option::after{color:var(--muted)}
@media(min-width:431px){.language-switch summary{font-size:12px;font-weight:600}}
@media(min-width:761px){html[dir="rtl"] .language-options{left:auto;right:0}}