/* The Arabic home page: the English page's layout and motion, read from the right. Alexandria for display, IBM Plex Sans Arabic for everything else, no tracking. */
:root { --font-display: "Alexandria", "IBM Plex Sans Arabic", sans-serif; --font-text: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif; --font-ui: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif; }
html[dir="rtl"] body, html[dir="rtl"] * { letter-spacing: 0 !important; }
html[dir="rtl"] .display, html[dir="rtl"] .head { line-height: 1.22; }
/* the rail runs right to left: the whole rail mirrors, its labels do not */
html[dir="rtl"] .rail { transform: scaleX(-1); }
html[dir="rtl"] .rail-stops { direction: ltr; }
html[dir="rtl"] .rail-stop span, html[dir="rtl"] .rail-count { transform: scaleX(-1); direction: rtl; text-align: start; }
html[dir="rtl"] .rail-stop span { padding-right: 8px; }
/* price line: low to high reads from the right */
html[dir="rtl"] .priceline-track { transform: scaleX(-1); }
html[dir="rtl"] .priceline-ceiling span { transform: translateX(-50%) scaleX(-1); }
/* product panels scale from their own start edge, and read from the right */
html[dir="rtl"] .psheet { text-align: start; }
html.js[dir="rtl"] .scene.is-live .psheet { transform-origin: 100% 0; }
html[dir="rtl"] .tile .psheet, html.js[dir="rtl"] .scene.is-live .tile .psheet { left: auto; right: 14px; transform-origin: 100% 0; }
/* figures and their currency stay one left-to-right run */
html[dir="rtl"] .roller { direction: ltr; }
/* sections laid out with the bleed on the inline end */
html[dir="rtl"] .hero-copy { padding-left: 0; padding-right: var(--m); }
html[dir="rtl"] .ai { padding-left: 0; padding-right: var(--m); }
html[dir="rtl"] .ai-prompt { text-align: start; }
html[dir="rtl"] .strip-track { left: auto; right: 0; padding-left: 0; padding-right: var(--m); }
@media (max-width: 900px) { html[dir="rtl"] .ai { padding-right: 0; padding-left: 0; } html[dir="rtl"] .ai-copy { padding-right: var(--m); padding-left: var(--m); } }
/* the logo is the same wordmark in both languages */
html[dir="rtl"] .brand, html[dir="rtl"] .brand span { font-family: "Albert Sans", "Helvetica Neue", Arial, sans-serif; }
html[dir="rtl"] .brand span { letter-spacing: -0.03em !important; }
/* room for hamzas and dots above the line: each headline line is a clipped mask for its entrance */
html[dir="rtl"] .lines .line { padding-top: 0.24em; margin-top: -0.24em; padding-bottom: 0.26em; margin-bottom: -0.26em; }
@media (max-width: 767px) { html[dir="rtl"] .hero-copy { padding-left: var(--m); } html[dir="rtl"] .brand span { font-size: inherit; } }
/* grid keeps the masks' margins from collapsing, so line spacing stays as designed */
html[dir="rtl"] .display.lines { display: grid; }
/* the hero strip drifts the other way, so stages arrive in reading order */
@keyframes strip-ar { from { transform: translateX(0); } to { transform: translateX(var(--strip-w)); } }
html[dir="rtl"] .strip-track { animation-name: strip-ar; }