/* Right-to-left overrides, loaded only for Arabic and Urdu.
   Translating the words is half the job: a left-aligned Arabic page with
   left-anchored icons and left-growing bars reads as broken to anyone who
   reads right to left. `dir="rtl"` on <html> flips text and inline flow for
   free; everything below fixes what direction alone does not. */

/* Anything anchored with a physical property needs the logical one. */
.section-head:not(.center) { text-align: right; }
.hero-compact .hero-inner, .hero-compact .lede { margin-right: 0; margin-left: auto; }

/* Left-edge accents become right-edge accents. */
.choose-card::before { left: auto; right: 0; }

/* The mockup is a picture of a left-to-right product, so it stays LTR --
   mirroring a screenshot of an English UI would misrepresent the software. */
.mockup, .mockup * { direction: ltr; }
.mockup-bar { flex-direction: row; }

/* Numerals stay left-to-right even inside RTL text: a currency figure or a
   time reads the same in both scripts and reversing it changes its meaning. */
.mk-pay, .stat-fig, .fx-chip, .fx-all span, .mk-st { direction: ltr; unicode-bidi: embed; }

/* The marquee slides the other way, or it appears to run backwards. */
@keyframes slide-rtl { to { transform: translateX(50%); } }
.marquee-track { animation-name: slide-rtl; }

/* Chevrons and arrows point the other way. */
.btn svg, .fx-more svg { transform: scaleX(-1); }
.fx-more[aria-expanded="true"] svg { transform: scaleX(-1) rotate(180deg); }

/* Lists and quotes indent from the correct side. */
blockquote { border-left: 0; border-right: 3px solid var(--brand); padding-left: 0; padding-right: 18px; }