/* Language choice, right-to-left layout and the Arabic/Urdu fonts. Only changes anything when a language other than English is on. */
.lang-pick{display:inline-flex;gap:2px;align-items:center;padding:2px;border-radius:999px;background:rgba(100,110,160,.1);font-size:12.5px;line-height:1}
.lang-pick a{padding:6px 11px;border-radius:999px;color:inherit;text-decoration:none;font-weight:600;opacity:.75}
.lang-pick a:hover{opacity:1}
.lang-pick a.on{background:#4338ca;color:#fff;opacity:1}
.lang-menu{display:flex;margin:4px 8px;justify-content:center}
.lang-dark{background:rgba(255,255,255,.12)}
.lg-foot .lang-dd{margin-bottom:8px}
.lp-header-cta .lang-dd{margin-inline-end:10px}
.lp-footer-base .lang-dd{margin-inline-end:auto}

html[lang="ar"] body, html[lang="ar"] .mud-typography, html[lang="ar"] input, html[lang="ar"] button, html[lang="ar"] select, html[lang="ar"] textarea{font-family:"Inter","Noto Naskh Arabic",system-ui,sans-serif}
html[lang="ur"] body, html[lang="ur"] .mud-typography, html[lang="ur"] input, html[lang="ur"] button, html[lang="ur"] select, html[lang="ur"] textarea{font-family:"Inter","Noto Nastaliq Urdu","Noto Naskh Arabic",system-ui,sans-serif}
html[lang="ur"] .nx-topbar-title, html[lang="ur"] .nx-topbar-title span{line-height:2.4;overflow:visible}
html[lang="ur"] .nx-nav-section{line-height:2}
html[lang="ur"] .sc-foot{line-height:1.9}
/* Nastaliq is tall: give single-line controls room so the text is not cut off. */
html[lang="ur"] .mud-nav-link, html[lang="ur"] .nx-user-pop-item, html[lang="ur"] button, html[lang="ur"] .lp-btn, html[lang="ur"] .lg-submit{line-height:2.1}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .lg-hero h2, html[dir="rtl"] .lp-hero h1{letter-spacing:0}
/* Latin words and numbers inside a right-to-left line (emails, Kaam360, amounts) keep their own direction. */
html[dir="rtl"] input[type=email], html[dir="rtl"] input[type=password], html[dir="rtl"] input[type=url], html[dir="rtl"] [dir=ltr]{direction:ltr;text-align:start}
/* The hidden "skip to content" link is parked off-screen on the left; right-to-left pages would scroll sideways to reach it. */
html[dir="rtl"] .lp-skip{left:auto;right:-999px}
html[dir="rtl"] .lp-skip:focus{left:auto;right:12px}
/* Urdu (Nastaliq) is tall and slanted: the tight headline spacing of the English page makes lines collide, so give it room. */
html[lang="ur"] :is(.h-hero,.h-section,.h-final,.h-strip,.lp-header,.lp-footer) :is(h1,h2,h3,h4,p,li,small,b,span,a,summary,label,button){line-height:1.95 !important}
/* The text pages (Security, Privacy, Terms, Data processing, Accessibility, Status, the questionnaire, the sign-up and stop-email cards) need the same room. */
html[lang="ur"] :is(.lp-legal,.lp-auth) :is(h1,h2,h3,p,li,small,b,strong,a,label,dt,dd){line-height:1.95 !important}
html[lang="ur"] .h-hero h1{font-size:clamp(30px,4.2vw,52px) !important}
html[lang="ur"] .h-head h2, html[lang="ur"] .h-final h2{font-size:clamp(26px,3.4vw,40px) !important}
html[lang="ur"] .h-grad{background:none !important;-webkit-text-fill-color:currentColor !important;color:#6d28d9 !important}
html[lang="ur"] .h-pill{line-height:2.1 !important}
html[lang="ur"] .m-chip, html[lang="ur"] .h-float small, html[lang="ur"] .m-list small{line-height:1.6 !important}
html[dir="rtl"] em, html[dir="rtl"] i.em{font-style:normal}

/* Arrows, chevrons, back/forward and undo/redo point the other way in right-to-left languages (found by the icon's shape, so every use is covered). */
html[dir="rtl"] svg:has(> path[d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"]),
html[dir="rtl"] svg:has(> path[d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"]),
html[dir="rtl"] svg:has(> path[d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"]),
html[dir="rtl"] svg:has(> path[d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"]),
html[dir="rtl"] svg:has(> path[d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"]),
html[dir="rtl"] svg:has(> path[d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"]),
html[dir="rtl"] svg:has(> path[d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"]),
html[dir="rtl"] svg:has(> path[d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"]),
html[dir="rtl"] svg:has(> path[d="M17,8l-1.41,1.41L17.17,11H9v2h8.17l-1.58,1.58L17,16l4-4L17,8z M5,5h7V3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h7v-2H5V5z"]),
html[dir="rtl"] svg:has(> path[d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z"]),
html[dir="rtl"] svg:has(> path[d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"]),
html[dir="rtl"] svg:has(> path[d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"]),
html[dir="rtl"] svg:has(> path[d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"]),
html[dir="rtl"] svg:has(> path[d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"]),
html[dir="rtl"] svg:has(> path[d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"]),
html[dir="rtl"] svg:has(> path[d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"]),
html[dir="rtl"] svg:has(> path[d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"]),
html[dir="rtl"] svg:has(> path[d="M4.01 6.03l7.51 3.22-7.52-1 .01-2.22m7.5 8.72L4 17.97v-2.22l7.51-1M2.01 3L2 10l15 2-15 2 .01 7L23 12 2.01 3z"]),
html[dir="rtl"] svg:has(> path[d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"]),
html[dir="rtl"] .h-flip{transform:scaleX(-1)}

/* Latin words, dates and numbers inside a right-to-left table cell or caption keep their own reading order ("8 Oct 2026", not "Oct 2026 8").
   :where() keeps this at the lowest priority, so any column that is deliberately centred or aligned still wins. */
:where(html[dir="rtl"]) :where(td, th, .nx-page-sub, .nx-stat-context, .nx-stat-label, .nx-card-sub){unicode-bidi:plaintext;text-align:match-parent}

/* ---- The language drop-down (page headers and footers) and the list inside the user menu ---- */
.lang-dd{position:relative;display:inline-block;font-size:13px}
.lang-dd>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(100,110,160,.12);color:inherit;cursor:pointer;font-weight:600;line-height:1;user-select:none}
.lang-dd>summary::-webkit-details-marker{display:none}
.lang-dd>summary:hover{background:rgba(100,110,160,.2)}
.lang-dd .lang-caret{transition:transform .15s}
.lang-dd[open] .lang-caret{transform:rotate(180deg)}
.lang-list{position:absolute;z-index:60;inset-inline-end:0;top:calc(100% + 6px);min-width:190px;padding:6px;border-radius:14px;background:#fff;color:#14162e;box-shadow:0 18px 40px -12px rgba(20,22,46,.35),0 0 0 1px rgba(20,22,46,.08);display:grid;gap:2px}
.lang-footer .lang-list,.lang-up .lang-list{top:auto;bottom:calc(100% + 6px)}
.lang-list a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 12px;border-radius:9px;color:inherit;text-decoration:none;font-weight:600;white-space:nowrap}
.lang-list a small{font-weight:500;opacity:.55;font-size:11.5px}
.lang-list a:hover{background:rgba(67,56,202,.08)}
.lang-list a.on{background:#4338ca;color:#fff}.lang-list a.on small{opacity:.8}
.lang-menu{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:4px 8px;background:none;border-radius:0}
.lang-menu a{text-align:center;padding:8px 6px;border-radius:9px;background:rgba(100,110,160,.1);font-size:12.5px}
.lang-menu a.on{background:#4338ca;color:#fff}
.lp-footer .lang-dd>summary{background:rgba(255,255,255,.1);color:#cdd3ee}
[data-theme="dark"] .lang-list{background:#1c1f3a;color:#e6e8f8}
@media (max-width:640px){.lp-header-cta .lang-dd>summary span{display:none}.lp-header-cta .lang-dd>summary{padding:8px}}

/* ---- Chinese, Spanish and German ---- */
html[lang="zh"] body, html[lang="zh"] .mud-typography, html[lang="zh"] input, html[lang="zh"] button, html[lang="zh"] select, html[lang="zh"] textarea{font-family:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif}
html[lang="zh"] :is(h1,h2,h3,.lp-hero h1){letter-spacing:0;line-break:strict;word-break:normal}
/* Long German and Spanish words may break with a hyphen instead of pushing a layout wider. */
html[lang="de"] :is(h1,h2,h3,h4,p,li,td,.nx-page-sub,.lp-wrap p,.h-lead){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
html[lang="de"] .nx-nav-section, html[lang="es"] .nx-nav-section{letter-spacing:.04em}
