.ui-language-switch{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px;max-inline-size:100%;font-family:inherit}
.ui-language-switch>button{appearance:none;border:1px solid #d8d0ff;border-radius:9px;background:#fff;color:#5132c9;padding:6px 9px;font:600 .75rem/1.5 Cairo,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.ui-language-switch>button[aria-pressed="true"]{background:#f0ebff;border-color:#7650ea;color:#362076}
.ui-language-switch>button:focus-visible{outline:2px solid #5e35e8;outline-offset:2px}
.ui-language-switch>button:disabled{cursor:wait;opacity:.6}
.ui-language-feedback{font-size:.75rem;line-height:1.5;color:#604b88;max-inline-size:22rem}
.ui-language-feedback:empty{display:none}
.ui-language-dialog{margin-block:0 12px;padding-block-end:8px;border-block-end:1px solid #eee8ff;justify-content:flex-end;position:relative;z-index:1}
html[dir="ltr"] body{text-align:start}
html[dir="ltr"] .header-controls{direction:ltr}
html[dir="ltr"] .hero h1{letter-spacing:normal}
html[dir="ltr"] .hero .marked{white-space:normal;overflow-wrap:anywhere}
html[dir="ltr"] .sidebar-group-title,html[dir="ltr"] .sidebar-link{text-align:start}
@media(max-width:760px){.header-controls>.ui-language-switch{flex:0 0 auto}.ui-language-switch>button{padding:5px 7px}.ui-language-feedback{flex-basis:100%}}
@media print{.ui-language-switch{display:none!important}}

/* Mirror directional navigation chrome, while media/logo canvas coordinates stay fixed. */
html[dir="ltr"] .site-sidebar{transform:translateX(-100%);box-shadow:14px 0 45px rgba(25,34,77,.16)}
html[dir="ltr"] .site-sidebar.is-open{transform:translateX(0)}
html[dir="ltr"] .ads-progress-stages,html[dir="ltr"] .ads-report-table th,html[dir="ltr"] .ads-report-table td,html[dir="ltr"] .connections-progress-steps li{text-align:start}

.hero-title-en{display:none}
html[lang="en"] .hero-title-ar{display:none}
html[lang="en"] .hero-title-en{display:inline}

/* Explicit package translations are display content, separate from UI keys. */
.ui-bilingual-en{display:none}
html[lang="en"] .ui-bilingual-ar{display:none}
html[lang="en"] .ui-bilingual-en{display:inline}

/* English copy needs its own type scale in the shared two-column hero. */
html[lang="en"] .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,66px)}
html[lang="en"] .hero-copy{min-inline-size:0}
html[lang="en"] .hero h1{font-size:clamp(2rem,3.4vw,3.25rem);line-height:1.2;letter-spacing:-.02em;overflow-wrap:break-word;word-break:normal;text-wrap:balance}
html[lang="en"] .hero .marked{overflow-wrap:break-word;background:linear-gradient(#cceeff,#cceeff) left calc(100% - .14em)/100% .12em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html[lang="en"] .hero .marked::after{content:none}
@media(max-width:760px){html[lang="en"] .hero{grid-template-columns:minmax(0,1fr);gap:25px}html[lang="en"] .hero h1{font-size:clamp(2rem,7vw,2.85rem)}}

@media(max-width:600px){.site-header .header-controls>.ui-language-switch{grid-column:1 / -1;grid-row:3;justify-self:end;flex-direction:row;flex-wrap:wrap;gap:6px}.site-header .header-controls>.ui-language-switch>.ui-language-feedback{flex-basis:auto;max-inline-size:100%}}
