/* Balak brand guide: LTR mirror for the English pages (en/*.html only).
   Generated from style.css, editorial-v2.css, brain-language.css, responsive-v3.css.
   Every rule that uses physical left/right is mirrored under :where(html[dir="ltr"]),
   which adds no specificity, so the cascade matches the RTL original. Arabic pages never load this file. */
:where(html[dir="ltr"]) .mist{background:linear-gradient(220deg,#ebf5f3,#d1eaea 50%,#b3d7e0)}
:where(html[dir="ltr"]) .skip{left:20px;right:auto}
:where(html[dir="ltr"]) .menu-toggle{text-align:left}
:where(html[dir="ltr"]) .menu-toggle i{right:0;left:auto}
:where(html[dir="ltr"]) .home-hero{background:linear-gradient(225deg,#a4dcda 0%,#53b0af 65%,#87b8cc 100%)}
:where(html[dir="ltr"]) .hero-mascots{right:4%;left:auto}
:where(html[dir="ltr"]) .hero-scroll{left:var(--space);right:auto}
:where(html[dir="ltr"]) .chapter-hero{background:linear-gradient(225deg,#ebf5f3,#c1e5e1 68%,#b3d7e0)}
:where(html[dir="ltr"]) .hero-color{background:linear-gradient(245deg,#b3d7e0 0,#53b0af 48%,#7bb2cc 100%)}
:where(html[dir="ltr"]) .hero-cairo{right:var(--space);left:auto}
:where(html[dir="ltr"]) .tile-color{background:linear-gradient(250deg,#315d90 0%,#315d90 50%,#53b0af 50%,#53b0af 100%)}
:where(html[dir="ltr"]) .gradient-demo{background:linear-gradient(205deg,#ebf5f3 0%,#d1eaea 48%,#b3d7e0 100%)}
:where(html[dir="ltr"]) .gradient-values{text-align:left}
:where(html[dir="ltr"]) .mini-screen{background:linear-gradient(205deg,#f3f8f4,#d1eaea,#b3d7e0)}
:where(html[dir="ltr"]) .ledge-person{margin-left:15%;margin-right:0}
:where(html[dir="ltr"]) .ledge-copy{margin-right:25%;margin-left:0}
:where(html[dir="ltr"]) .poster>.mascot{right:35px;left:auto}
:where(html[dir="ltr"]) .application-wall .poster .mascot{right:10%;left:auto}
:where(html[dir="ltr"]) .footer-bottom>span{margin-left:auto;margin-right:0}
:where(html[dir="ltr"]) dialog nav>a b{margin-left:auto;margin-right:0}
@media(min-width:1500px){:where(html[dir="ltr"]) .hero-mascots{right:3%;left:auto}}
@media(max-width:900px){:where(html[dir="ltr"]) .hero-mascots{right:2%;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .menu-toggle{margin-left:auto;margin-right:0}}
@media(max-width:600px){:where(html[dir="ltr"]) .hero-mascots{right:6%;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .hero-scroll{left:24px;right:24px}}
@media(max-width:600px){:where(html[dir="ltr"]) .ledge-person{margin-left:12%;margin-right:0}}
@media(max-width:600px){:where(html[dir="ltr"]) .ledge-copy{margin-right:8%;margin-left:0}}
@media(max-width:600px){:where(html[dir="ltr"]) .application-wall .poster .mascot{right:18%;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .footer-bottom>a:last-child{text-align:right}}
:where(html[dir="ltr"]) .opening-ground{right:-18%;left:auto;border-radius:55% 50% 0 0 / 100% 70% 0 0;transform:rotate(5deg)}
:where(html[dir="ltr"]) .friend-one{right:15%;left:auto;transform:rotate(7deg)}
:where(html[dir="ltr"]) .friend-two{right:calc(50% - 110px);left:auto;transform:rotate(-6deg)}
:where(html[dir="ltr"]) .friend-three{left:11%;right:auto;transform:rotate(-5deg)}
:where(html[dir="ltr"]) .little-note{right:6.5%;left:auto;transform:rotate(8deg)}
:where(html[dir="ltr"]) .home-opening>.down-link{left:5%;right:auto}
:where(html[dir="ltr"]) .art-scene{border-radius:10% 34% 12% 28% / 24% 15% 28% 13%}
:where(html[dir="ltr"]) .scene-copy{text-align:left}
:where(html[dir="ltr"]) .art-scene>.buddy{right:25px;left:auto}
:where(html[dir="ltr"]) .scene-sign{left:35px;right:auto}
:where(html[dir="ltr"]) .scene-curve{right:-15%;left:auto;border-radius:45% 55% 0 0 / 95% 75% 0 0;transform:rotate(10deg)}
:where(html[dir="ltr"]) .scene-hello .scene-curve{transform:rotate(-9deg)}
:where(html[dir="ltr"]) .scene-hello>.buddy{right:45px;left:auto}
:where(html[dir="ltr"]) .scene-voice{border-radius:34% 12% 32% 12% / 20% 18% 18% 22%}
:where(html[dir="ltr"]) .scene-voice>.buddy{right:20px;left:auto}
:where(html[dir="ltr"]) .scene-wait{border-radius:150px 40px 55px 45px}
:where(html[dir="ltr"]) .scene-together{border-radius:180px 25px 90px 25px}
:where(html[dir="ltr"]) .scene-together>.buddy{right:42px;left:auto}
:where(html[dir="ltr"]) .scene-ledge{border-radius:24px 150px 30px 36px}
:where(html[dir="ltr"]) .scene-ledge .scene-curve{transform:rotate(-7deg)}
:where(html[dir="ltr"]) .scene-ledge>.buddy{right:28px;left:auto}
:where(html[dir="ltr"]) .scene-peek{border-radius:50px 30px 30px 160px}
:where(html[dir="ltr"]) .scene-peek>.buddy{right:25px;left:auto}
:where(html[dir="ltr"]) .scene-peek .scene-curve{transform:rotate(-5deg)}
:where(html[dir="ltr"]) .scene-clear>.buddy{right:20px;left:auto}
:where(html[dir="ltr"]) .soft-band,:where(html[dir="ltr"]) .feelings-band{border-radius:12% 50% 0 0 / 65px 45px 0 0}
:where(html[dir="ltr"]) .soft-band>div:first-child{margin-left:4%;margin-right:0}
:where(html[dir="ltr"]) .world-art .buddy{right:25px;left:auto}
:where(html[dir="ltr"]) .human-moment>.photo-companion{left:1%;right:auto;transform:rotate(-5deg)}
:where(html[dir="ltr"]) .organic-photo img{border-radius:14% 38% 12% 25% / 20% 28% 24% 20%}
:where(html[dir="ltr"]) .round-photo img{border-radius:45% 50% 38% 43%}
:where(html[dir="ltr"]) .cover-art>.brand-poster{transform:rotate(5deg)}
:where(html[dir="ltr"]) .word-cloud span{transform:rotate(8deg)}
:where(html[dir="ltr"]) .word-cloud b{transform:rotate(-5deg)}
:where(html[dir="ltr"]) .word-cloud strong{transform:rotate(5deg)}
:where(html[dir="ltr"]) .voice-samples article{border-radius:65px 25px 22px 22px}
:where(html[dir="ltr"]) .logo-hero-art{border-radius:45% 50% 25% 20%}
:where(html[dir="ltr"]) .logo-main{border-radius:140px 28px 28px 28px}
:where(html[dir="ltr"]) .logo-main .buddy{right:25px;left:auto}
:where(html[dir="ltr"]) .logo-small>div{border-radius:25px 70px 25px 25px}
:where(html[dir="ltr"]) .logo-small>div:last-child{border-radius:25px 25px 25px 80px}
:where(html[dir="ltr"]) .swatch-ribbons article{border-radius:20px 60px 20px 45px}
:where(html[dir="ltr"]) .swatch-ribbons article:nth-child(even){border-radius:50px 20px 55px 20px;margin-right:6%;margin-left:0}
:where(html[dir="ltr"]) .swatch-ribbons article:nth-child(odd){margin-left:6%;margin-right:0}
:where(html[dir="ltr"]) .swatch-ribbons code{margin-left:auto;margin-right:0}
:where(html[dir="ltr"]) .gradient-demo{border-radius:35px 120px 35px 35px}
:where(html[dir="ltr"]) .letter-art{border-radius:30px 80px 30px 90px}
:where(html[dir="ltr"]) .letter-art span{left:25px;right:auto;transform:rotate(-7deg)}
:where(html[dir="ltr"]) .letter-art b{right:25px;left:auto;transform:rotate(12deg)}
:where(html[dir="ltr"]) .letter-art i{left:90px;right:auto;transform:rotate(10deg)}
:where(html[dir="ltr"]) .letter-art small{right:20px;left:auto}
:where(html[dir="ltr"]) .alphabet{border-radius:5% 40% 5% 30%}
:where(html[dir="ltr"]) .type-world .buddy{margin-left:auto;margin-right:0}
:where(html[dir="ltr"]) .brand-poster>.buddy{right:28px;left:auto}
:where(html[dir="ltr"]) .poster-ground{right:-15%;left:auto;border-radius:50% 55% 0 0 / 80% 95% 0 0;transform:rotate(8deg)}
:where(html[dir="ltr"]) .poster-pair>.brand-poster:nth-child(1){transform:rotate(-3deg)}
:where(html[dir="ltr"]) .poster-pair>.brand-poster:nth-child(2){transform:rotate(4deg)}
:where(html[dir="ltr"]) .ui-display{border-radius:30px 100px 30px 100px;background:linear-gradient(210deg,#cbe7e2,#b3d7e0)}
:where(html[dir="ltr"]) .duo-art{border-radius:35px 130px 35px 100px}
:where(html[dir="ltr"]) .duo-art .buddy:first-child{transform:rotate(-6deg)}
:where(html[dir="ltr"]) .photo-story .sitting-edge{left:-30px;right:auto}
:where(html[dir="ltr"]) .photo-story.reverse{direction:rtl}
:where(html[dir="ltr"]) .photo-story.reverse>div{direction:ltr}
:where(html[dir="ltr"]) .motion-stage{border-radius:150px 45px 90px 45px}
:where(html[dir="ltr"]) .access-demo{border-radius:25px 100px 25px 25px}
:where(html[dir="ltr"]) .applications-gallery .brand-poster:nth-child(1){transform:rotate(-4deg)}
:where(html[dir="ltr"]) .applications-gallery .brand-poster:nth-child(2){transform:rotate(3deg)}
:where(html[dir="ltr"]) .applications-gallery .brand-poster:nth-child(3){transform:rotate(-2deg)}
:where(html[dir="ltr"]) .applications-gallery .buddy{right:15px;left:auto}
:where(html[dir="ltr"]) .campaign-banner{border-radius:180px 40px 70px 40px}
:where(html[dir="ltr"]) .campaign-banner:before{right:-7%;left:auto;transform:rotate(-8deg)}
:where(html[dir="ltr"]) .campaign-banner .buddy{right:10%;left:auto}
:where(html[dir="ltr"]) .next-chapter{border-radius:10% 55% 0 0 / 30px 30px 0 0}
@media(max-width:900px){:where(html[dir="ltr"]) .friend-one{right:9%;left:auto}}
@media(max-width:900px){:where(html[dir="ltr"]) .friend-two{right:calc(50% - 98px);left:auto}}
@media(max-width:900px){:where(html[dir="ltr"]) .friend-three{left:7%;right:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .opening-ground{right:-26%;left:auto;transform:rotate(8deg)}}
@media(max-width:600px){:where(html[dir="ltr"]) .opening-friends .friend-one{right:5%;left:auto;transform:rotate(5deg)}}
@media(max-width:600px){:where(html[dir="ltr"]) .opening-friends .friend-two{right:calc(50% - 71px);left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .opening-friends .friend-three{left:1%;right:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .little-note{right:6%;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .home-opening>.down-link{left:6%;right:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .art-scene>.buddy{right:22px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .scene-sign{left:27px;right:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .scene-together>.buddy{right:30px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .world-art .buddy{right:10px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .world-art .brand-poster .buddy{right:13px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .world-art .letter-art span{left:12px;right:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .world-art .letter-art b{right:8px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .world-art .letter-art i{left:35px;right:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .world-art .letter-art small{right:10px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .human-moment .photo-companion{left:auto;right:10px}}
@media(max-width:600px){:where(html[dir="ltr"]) .cover-art>.brand-poster{transform:rotate(3deg)}}
@media(max-width:600px){:where(html[dir="ltr"]) .logo-main{border-radius:90px 25px 25px 25px}}
@media(max-width:600px){:where(html[dir="ltr"]) .logo-main .buddy{right:18px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .swatch-ribbons code{margin-left:auto;margin-right:0}}
@media(max-width:600px){:where(html[dir="ltr"]) .gradient-demo{border-radius:25px 65px 25px 25px}}
@media(max-width:600px){:where(html[dir="ltr"]) .ui-display{border-radius:25px 50px 25px 50px}}
@media(max-width:600px){:where(html[dir="ltr"]) .duo-art{border-radius:25px 90px 25px 65px}}
@media(max-width:600px){:where(html[dir="ltr"]) .photo-story .sitting-edge{left:-10px;right:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .motion-stage{border-radius:95px 50px 50px 30px}}
@media(max-width:600px){:where(html[dir="ltr"]) .access-demo{border-radius:25px 65px 25px 25px}}
@media(max-width:600px){:where(html[dir="ltr"]) .applications-gallery .buddy{right:20px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .campaign-banner{border-radius:85px 25px 40px 25px}}
@media(max-width:600px){:where(html[dir="ltr"]) .campaign-banner .buddy{right:20px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .campaign-banner:before{right:-20%;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .next-chapter{border-radius:10% 40% 0 0 / 20px 20px 0 0}}
:where(html[dir="ltr"]) .scene-together{border-top-left-radius:70px}
:where(html[dir="ltr"]) .scene-wait{border-top-left-radius:65px}
:where(html[dir="ltr"]) .opening-ground{right:calc(50% - 520px);left:auto;transform:rotate(12deg)}
:where(html[dir="ltr"]) .home-opening:before{right:-160px;left:auto;transform:rotate(-24deg)}
:where(html[dir="ltr"]) .home-opening:after{left:-78px;right:auto;transform:rotate(17deg)}
:where(html[dir="ltr"]) .scene-curve{right:-160px;left:auto;transform:rotate(18deg)}
:where(html[dir="ltr"]) .scene-hello .scene-curve,:where(html[dir="ltr"]) .scene-voice .scene-curve,:where(html[dir="ltr"]) .scene-wait .scene-curve,:where(html[dir="ltr"]) .scene-step .scene-curve,:where(html[dir="ltr"]) .scene-together .scene-curve,:where(html[dir="ltr"]) .scene-ledge .scene-curve,:where(html[dir="ltr"]) .scene-peek .scene-curve,:where(html[dir="ltr"]) .scene-clear .scene-curve{transform:rotate(18deg)}
:where(html[dir="ltr"]) .art-scene:after{left:-68px;right:auto;transform:rotate(-17deg)}
:where(html[dir="ltr"]) .photo-story .sitting-edge{left:-10px;right:auto}
:where(html[dir="ltr"]) .soft-band:before,:where(html[dir="ltr"]) .feelings-band:before,:where(html[dir="ltr"]) .asset-download:before,:where(html[dir="ltr"]) .next-chapter:before{right:-170px;left:auto;transform:rotate(-15deg)}
:where(html[dir="ltr"]) .world-art .scene-curve{right:-130px;left:auto}
:where(html[dir="ltr"]) .world-art .art-scene:after{left:-45px;right:auto}
:where(html[dir="ltr"]) .letter-art:before,:where(html[dir="ltr"]) .duo-art:before,:where(html[dir="ltr"]) .gradient-demo:before,:where(html[dir="ltr"]) .ui-display:before,:where(html[dir="ltr"]) .motion-stage:before,:where(html[dir="ltr"]) .access-demo:before,:where(html[dir="ltr"]) .voice-samples article:before{right:-120px;left:auto;transform:rotate(20deg)}
:where(html[dir="ltr"]) .poster-ground{right:-145px;left:auto;transform:rotate(-20deg)}
:where(html[dir="ltr"]) .campaign-banner:before{right:-180px;left:auto;transform:rotate(-12deg)}
:where(html[dir="ltr"]) .swatch-ribbons article:before{right:20%;left:auto}
:where(html[dir="ltr"]) .shape-large:before{right:-160px;left:auto;transform:rotate(-30deg)}
:where(html[dir="ltr"]) .shape-small:before{right:-36px;left:auto;transform:rotate(20deg)}
:where(html[dir="ltr"]) .loader-studies article:nth-child(2) .loader-art img{right:-25px;left:auto}
:where(html[dir="ltr"]) .page-loader:before{right:-400px;left:auto;transform:rotate(-18deg)}
@media(max-width:600px){:where(html[dir="ltr"]) .opening-ground{right:calc(50% - 355px);left:auto;transform:rotate(12deg)}}
@media(max-width:600px){:where(html[dir="ltr"]) .home-opening:before{right:-125px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .home-opening:after{left:-90px;right:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .scene-curve,:where(html[dir="ltr"]) .scene-step .scene-curve{right:-150px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .world-art .scene-curve{right:-90px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .world-art .poster-ground{right:-65px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .poster-ground{right:-160px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .campaign-banner:before{right:-210px;left:auto}}
:where(html[dir="ltr"]) .peace-banner:before{right:-280px;left:auto;transform:rotate(-25deg)}
:where(html[dir="ltr"]) .peace-banner>img{right:10%;left:auto}
:where(html[dir="ltr"]) .word-posters article:before{right:-160px;left:auto;transform:rotate(20deg)}
:where(html[dir="ltr"]) .word-posters img{right:25px;left:auto}
:where(html[dir="ltr"]) .quote-pair small{text-align:left}
@media(max-width:900px){:where(html[dir="ltr"]) .peace-banner>img{right:0;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .peace-banner>img{right:15px;left:auto}}
:where(html[dir="ltr"]) .art-scene:after{left:-75px;right:auto}
:where(html[dir="ltr"]) .scene-copy{padding-left:24px;padding-right:40px}
:where(html[dir="ltr"]) .letter-art:before{right:-110px;left:auto}
:where(html[dir="ltr"]) .duo-art:before{right:-100px;left:auto}
:where(html[dir="ltr"]) .word-posters article{padding-left:8px;padding-right:8px}
:where(html[dir="ltr"]) .word-posters article:before{right:-10px;left:auto}
:where(html[dir="ltr"]) .word-posters article:nth-child(3n+2):before{transform:rotate(-28deg)}
:where(html[dir="ltr"]) .word-posters article:nth-child(3n+3):before{right:0;left:auto}
:where(html[dir="ltr"]) .word-posters img{right:20px;left:auto}
:where(html[dir="ltr"]) .voice-samples article{padding-left:0;padding-right:0}
:where(html[dir="ltr"]) .voice-samples article:before{right:0;left:auto}
:where(html[dir="ltr"]) .loader-studies article:before{right:-30px;left:auto;transform:rotate(17deg)}
:where(html[dir="ltr"]) .loader-studies article:nth-child(2):before{right:auto;left:-20px}
:where(html[dir="ltr"]) .loader-studies article:nth-child(3):before{right:0;left:auto}
:where(html[dir="ltr"]) .ui-display:before{right:-45px;left:auto;background:linear-gradient(230deg,#d1eaea,#b3d7e0)}
:where(html[dir="ltr"]) .motion-stage:before{right:calc(50% - 175px);left:auto}
:where(html[dir="ltr"]) .gradient-demo:before{right:-50px;left:auto;background:linear-gradient(220deg,#ebf5f3,#b3d7e0)}
:where(html[dir="ltr"]) .access-demo:before{right:-50px;left:auto}
:where(html[dir="ltr"]) .readability-pair>div{padding-left:0;padding-right:30px}
:where(html[dir="ltr"]) .readability-pair>div:last-child{border-left:3px solid #53b0af;border-right:none}
:where(html[dir="ltr"]) .alphabet:before{right:0;left:auto}
:where(html[dir="ltr"]) .shape-examples>div{padding-left:0;padding-right:35px}
@media(max-width:600px){:where(html[dir="ltr"]) .word-posters article{padding-left:0;padding-right:0}}
@media(max-width:600px){:where(html[dir="ltr"]) .gradient-demo:before{right:-35px;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .scene-copy{padding-left:15px;padding-right:28px}}
@media(max-width:600px){:where(html[dir="ltr"]) .ui-display:before{right:0;left:auto}}
@media(max-width:600px){:where(html[dir="ltr"]) .motion-stage:before{right:calc(50% - 142px);left:auto}}
:where(html[dir="ltr"]) .home-opening{direction:ltr;background:linear-gradient(230deg,#e8f4f1 2%,#c1e4e2 53%,#8fc6d0 100%)}
:where(html[dir="ltr"]) .opening-character{transform:rotate(5deg)}

/* ---- Hand-written: English pages only ---- */
/* Arabic specimens kept inside English pages (brand phrases, quotes). */
.ar-specimen{display:block;font-family:Cairo,sans-serif;font-weight:700;color:var(--blue);text-align:left;unicode-bidi:isolate}
.word-posters .ar-specimen{font-size:22px;margin-top:6px;line-height:1.6}
.voice-samples .ar-specimen{font-size:20px;margin:-8px 0 14px;line-height:1.6}
.quote-pair small.ar-specimen{font-size:16px;font-weight:600;color:inherit}
/* Typography weights: Arabic specimen with an English gloss. */
.weights p[lang="ar"]{text-align:left}
.weights .en-gloss{display:block;font-size:15px;font-weight:400;opacity:.75;margin-top:4px}
/* Latin headlines run wider than Arabic: keep tight posters and scenes from overflowing. */
html[dir="ltr"] .brand-poster h3,html[dir="ltr"] .scene-copy{overflow-wrap:normal;hyphens:manual}