/* Home-page language controls. English keeps the original site's type and layout. */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;flex:none;height:42px;min-width:64px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink-2);font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;transition:background .18s,color .18s}
.lang-switch[data-lang="en"]{font-family:"Geist",system-ui,sans-serif}
.lang-switch[data-lang="ar"]{font-family:"Noto Sans Arabic",Tahoma,sans-serif;letter-spacing:0}
.lang-switch:hover{color:var(--ink);background:var(--line)}
.lang-switch:focus-visible{outline:2px solid var(--ind);outline-offset:3px}
.i18n-status{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sdial{grid-template-columns:minmax(0,1fr)}
.sdial__strip,.sdial__panel{min-width:0}

/* Both wordmarks share the same icon; the preview can override the language match. */
.brand__word{unicode-bidi:isolate}
.brand__word--ar{display:none;font-family:"Changa",Tahoma,sans-serif;font-size:1.4em;font-weight:500;letter-spacing:0;line-height:1.2}
html[lang="ar"]:not([data-v-wordmark="a"]) .brand__word--en,html[data-v-wordmark="b"] .brand__word--en{display:none}
html[lang="ar"]:not([data-v-wordmark="a"]) .brand__word--ar,html[data-v-wordmark="b"] .brand__word--ar{display:inline}

/* Give the English logo more presence in the header and footer. */
html[lang="en"] .brand{font-size:20px}
html[lang="en"] .brand__mark{width:36px;height:36px}
html[lang="en"] .foot__brand .brand__mark{width:38px;height:38px}

/* Arabic uses joined script, a readable line height and natural RTL flow. */
html[lang="ar"]{--sans:"Noto Sans Arabic",Tahoma,Arial,sans-serif;--mono:"Noto Sans Arabic",Tahoma,Arial,sans-serif}
html[lang="ar"] body{line-height:1.8}
html[lang="ar"] :is(h1,h2,h3,h4,h5,p,blockquote,.lab,.chip,.tag,.cap,.btn,.filter,.sdial__b .t,.hwwf__k,.hwwf__t b,.wg__g,.wg__n,.wg__s,.wg__kp b,.wg__kp i,.studio-facts span,.foot__base,.foot h5,.lb__n,.lb__cap,.mem__tag){letter-spacing:0;text-transform:none}
html[lang="ar"] :is(h2,h3,h4){line-height:1.5}
html[lang="ar"] :is(.hero__b p,.b p,.sec__head p,.studio-panel p,.modal__lede,.modal__cols p,.modal__cols li,.modal__quote,.prod p,.prod__list li,.cta p,.foot__brand p,.tq blockquote){line-height:1.85}
html[lang="ar"] .hero h1{max-width:none;font-size:clamp(28px,5.8vw,74px);line-height:1.5;letter-spacing:0}
html[lang="ar"] .hero h1 .ln:first-child{white-space:normal}
html[lang="ar"] .rot{text-align:right;vertical-align:top}
html[lang="ar"] .rot__m{left:auto;right:0}
html[lang="ar"] .sec__head h2{max-width:22ch}
html[lang="ar"] .founder-card__note h4{max-width:24ch;line-height:1.5}
html[lang="ar"] .cta h2{max-width:18ch;line-height:1.5}
html[lang="ar"] .tq--big blockquote{max-width:30ch;line-height:1.7}
html[lang="ar"] .hwwf .hwwf__p p{max-width:26ch;font-size:clamp(22px,2.3vw,32px);line-height:1.65;letter-spacing:0}
html[lang="ar"] :is(.lab,.chip,.tag,.cap,.hwwf__k,.foot h5,.modal__cols h4){line-height:1.8}
html[lang="ar"] :is(.proof__txt,.kpis strong,.modal__meta strong,.wg__kp b){line-height:1.6}
html[lang="ar"] .proof__lab{line-height:1.8}
html[lang="ar"] .nav{padding:8px 20px 8px 8px}
html[lang="ar"] .brand{direction:rtl;unicode-bidi:isolate}
html[lang="ar"] :is(a[href^="mailto:"],#emailBtn){direction:ltr;unicode-bidi:isolate}
html[lang="ar"] #mq{direction:ltr;font-family:"Geist",system-ui,sans-serif}
html[lang="ar"] .proof{padding:8px 10px 8px 18px}
html[lang="ar"] .proof__stack i{margin-right:0;margin-left:-7px}
html[lang="ar"] :is(.sdial__b,.wg__i,.hwwf__t){text-align:right}
html[lang="ar"] .sdial__b .t{line-height:1.8}
html[lang="ar"] .tq__link{margin-left:0;margin-right:auto}
html[lang="ar"] .btn__a{display:inline-block;transform:scaleX(-1)}
html[lang="ar"] .btn:hover .btn__a{transform:translateX(-3px) scaleX(-1)}
html[lang="ar"] :is(.proof__go svg,.wg__go svg,.wg__ar svg,.tq__link>span,#lbPrev svg,#lbNext svg){transform:scaleX(-1)}
html[lang="ar"] .proof:hover .proof__go{transform:translateX(-2px)}
html[lang="ar"] .tq__link:hover>span{transform:translateX(-4px) scaleX(-1)}

/* Collage captions mirror around their screenshots, which retain their original orientation. */
html[lang="ar"] .wg-sh{margin-left:0;margin-right:auto;padding:0 12px 0 15px}
html[lang="ar"] .wg__yr{right:auto;left:10px;direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .wg__i[data-shape="F"] .wg__ft{left:auto;right:12px}
html[lang="ar"] .wg__ft h3{line-height:1.55}
html[lang="ar"] .wg__kp i{line-height:1.65}
html[lang="ar"] .wg__n{line-height:1.65}
html[lang="ar"] .wg__cap{left:auto;right:10px}
html[lang="ar"] .wg__i[data-shape="S"] .wg__v{left:auto;right:10px;bottom:10px;width:max-content;max-width:240px;max-height:none;writing-mode:horizontal-tb;transform:rotate(-90deg) translateX(100%);transform-origin:bottom right;padding:5px 11px;line-height:1.8;letter-spacing:0}
html[lang="ar"] .wg__ct{right:auto;left:10px;writing-mode:horizontal-tb;transform:none;padding:4px 8px;letter-spacing:0;line-height:1.8}
html[lang="ar"] .wg__i[data-shape="B"] .wg__bt{left:auto;right:12px}
html[lang="ar"] .wg__bti{padding-left:0;padding-right:16px;border-left:0;border-right:1px solid rgba(255,255,255,.2)}
html[lang="ar"] .wg__i[data-shape="B"] .wg__ar{right:auto;left:16px}
html[lang="ar"] .wg__i[data-shape="B"]:is(:hover,:focus-visible) .wg__ar{transform:translateX(-3px)}

/* Image panning uses physical coordinates; galleries and tabs follow native RTL scrolling. */
html[lang="ar"] .lb__stage{direction:ltr}
html[lang="ar"] :is(.mgal__s,.hwwf__t){direction:rtl}
html[lang="ar"] .hwwf__t{transition:color .2s,padding-right .3s cubic-bezier(.2,.8,.2,1)}
html[lang="ar"] .hwwf__t.on{padding-left:12px;padding-right:20px}
html[lang="ar"] .hwwf__t i{left:auto;right:0}
html[lang="ar"] .modal__x{right:auto;left:16px}
html[lang="ar"] .mbar{right:auto;left:6px}
html[lang="ar"] .visbar{padding-right:0;padding-left:54px}
html[lang="ar"] .spot__rail{padding:2px 10px 2px 6px;margin-left:0;margin-right:-10px}
html[lang="ar"] .spot__rail button:hover{transform:translateX(3px)}
html[lang="ar"] .zbadge{right:auto;left:10px}
html[lang="ar"] :is(.mgal__n,.lb__n){direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .lb__bar{padding-left:14px;padding-right:20px}
html[lang="ar"] .lb__cap{line-height:1.8}


@media(max-width:900px){
html[lang="ar"] .founder-card__who{text-align:right}
html[lang="ar"] .hwwf__t.on{padding-left:14px;padding-right:14px}
}
@media(max-width:640px){
html[lang="ar"] .hero__proof .proof{padding:12px}
html[lang="ar"] .hero__proof .proof__stack i{margin:0}
html[lang="ar"] .hero__proof .proof__stack i:nth-child(n+4){transform:translateX(-9px)}
html[lang="ar"] .modal__x{left:14px}
html[lang="ar"] .visbar{padding:0 16px 0 64px}
}
@media(max-width:639.98px){
html[lang="ar"] #filters{margin-right:0;margin-left:calc(var(--pad,20px)*-1);padding-right:0;padding-left:var(--pad,20px)}
html[lang="ar"] .wg-sh{right:auto;left:0;margin-left:0;margin-right:14px;padding:0;box-shadow:8px 0 0 2px var(--bg),30px 0 14px 0 var(--bg),-26px 0 0 2px var(--bg)}
html[lang="ar"] .wg__i[data-shape="B"] .wg__ar{left:12px}
}
@media(max-width:480px){
.nav{gap:8px;padding:6px 6px 6px 10px}
.nav .brand{gap:5px;font-size:12px;flex:none}
.nav .brand__mark{width:22px;height:22px}
.nav__cta{gap:5px}
.nav__cta>.btn{height:38px;padding:0 9px;font-size:11px}
.lang-switch{height:38px;min-width:52px;padding:0 8px;font-size:11px}
html[lang="ar"] .nav{padding:6px 10px 6px 6px}
html[lang="en"] .nav .brand{font-size:16px}
html[lang="en"] .nav .brand__mark{width:28px;height:28px}
}
@media(max-width:360px){
html[lang="en"] .nav .brand{font-size:14px}
html[lang="en"] .nav .brand__mark{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){
.lang-switch,html[lang="ar"] .hwwf__t{transition:none}
html[lang="ar"] .wg__i[data-shape="B"]:is(:hover,:focus-visible) .wg__ar{transform:none}
}