/* Arabic (RTL) overrides for ar/index.html. Loaded after every shared stylesheet.
   Mirrors direction-specific positioning only; colours, sizes and spacing follow the English page.
   Brand floor (BRAND-GUIDELINES.md): no text below 14px desktop / 13px mobile. */

html[dir=rtl] body{direction:rtl;font-family:CX,"IBM Plex Sans Arabic",Arial,sans-serif}
html[dir=rtl] button,html[dir=rtl] input,html[dir=rtl] select,html[dir=rtl] textarea{font-family:inherit}

/* Arabic is a joined script: tracking breaks the letterforms. Latin-only runs keep their tracking. */
html[dir=rtl] body *{letter-spacing:0}
html[dir=rtl] .brand,html[dir=rtl] .proof-strip dd span[dir=ltr],html[dir=rtl] .product-count{letter-spacing:-.035em}
html[dir=rtl] h1,html[dir=rtl] h2{line-height:1.25}
html[dir=rtl] h3,html[dir=rtl] .family-title{line-height:1.35}
html[dir=rtl] .eyebrow{font-size:14px}

/* Language switch (English link; base .lang-switch styles come from styles.css) */
html[dir=rtl] body>header .lang-switch{font-family:CX,Arial,sans-serif;font-size:15px;white-space:nowrap}

/* Header */
html[dir=rtl] header nav{margin-left:0;margin-right:auto}
html[dir=rtl] .skip{left:auto;right:10px}
html[dir=rtl] .reading-progress{transform-origin:right}

/* Hero: photo on the left, rounded corner facing the copy. The shared script animates the
   top-left radius on scroll; here the top-right corner carries that radius instead, driven by a
   CSS scroll timeline where supported (static radius elsewhere). */
html[dir=rtl] .hero-visual{right:auto;left:0;--ar-hero-r:210px;border-top-left-radius:0!important;border-top-right-radius:var(--ar-hero-r)}
@media(max-width:1000px){html[dir=rtl] .hero-visual{--ar-hero-r:160px}}
@media(max-width:700px){html[dir=rtl] .hero-visual{--ar-hero-r:120px}}
@keyframes ar-hero-radius{from{border-top-right-radius:var(--ar-hero-r)}to{border-top-right-radius:90px}}
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:scroll()){
  html[dir=rtl] body:not(.reduced-motion) .hero-visual{animation:ar-hero-radius linear both;animation-timeline:scroll(root);animation-range:90px 900px}
  @media(max-width:700px){html[dir=rtl] body:not(.reduced-motion) .hero-visual{animation-range:600px 1400px}}
}}
@media(min-width:701px){html[dir=rtl] .hero-copy{padding:44px 5% 44px 3.5%}}

/* Proof strip */
html[dir=rtl] .proof-strip dl>div{padding:26px 0 24px 24px}
html[dir=rtl] .proof-strip dl>div+div{padding-left:24px;padding-right:24px;border-left:0;border-right:1px solid #dcd7e0}
html[dir=rtl] .proof-strip dd{letter-spacing:0;white-space:nowrap}
@media(max-width:1000px){html[dir=rtl] .proof-strip dl>div:nth-child(4){border-right:0;padding-right:0}}

/* Ecosystem film */
html[dir=rtl] .economy-wordmark{left:auto;right:24px}
html[dir=rtl] #economy-play{right:auto;left:20px}

/* Platform tabs and product frame */
html[dir=rtl] .platform-tabs button{text-align:right}
html[dir=rtl] .frame-steps i:after{transform-origin:right}

/* Lending products */
html[dir=rtl] .product-count{margin:0 0 0 15px}
html[dir=rtl] .lending-models .section-heading>p{margin-left:0;margin-right:auto}
html[dir=rtl] .family-number{right:auto;left:25px}
html[dir=rtl] .model-details-band>strong{margin-right:0;margin-left:auto}
/* The receivables flow reads right to left: mirror its diagram so the steps line up with the key. */
html[dir=rtl] .family-graphic:has(.chart-key.steps) .family-chart{transform:scaleX(-1)}
html[dir=rtl] .chart-key.steps span:last-child{text-align:left}

/* Shariah: the decorative Arabic word would duplicate the Arabic heading. */
html[dir=rtl] .shariah-ar{display:none}

/* Founder portrait: rounded corner mirrored */
html[dir=rtl] .founder-portrait img{border-radius:24px 130px 24px 24px}

/* Contact and lead form */
html[dir=rtl] .contact-list a[href^="tel:"],html[dir=rtl] .contact-list a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .lead-field input[type=email]{direction:ltr;text-align:right}
html[dir=rtl] .lead-hp{left:auto;right:-9999px}

/* Film band chapters */
html[dir=rtl] .film-chapters button{text-align:right}
html[dir=rtl] .film-chapters button:hover{padding-left:0;padding-right:6px}

/* Film dialog (if present) */
html[dir=rtl] .film-close{right:auto;left:14px}

/* Footer */
html[dir=rtl] footer>span{margin-right:0;margin-left:auto}
html[dir=rtl] footer small{direction:ltr;unicode-bidi:isolate;text-align:right}

/* Consent banner (styles injected by analytics.js) */
html[dir=rtl] .cx-consent{font-family:CX,"IBM Plex Sans Arabic",Arial,sans-serif}

@media(max-width:700px){
  html[dir=rtl] .economy-wordmark{left:auto;right:13px}
  html[dir=rtl] #economy-play{right:auto;left:12px}
  html[dir=rtl] .family-number{right:auto;left:20px}
  html[dir=rtl] .proof-strip dl>div,html[dir=rtl] .proof-strip dl>div+div{padding:20px 0 18px 12px;border-left:0;border-right:0}
  html[dir=rtl] .proof-strip dl>div:nth-child(even){padding-right:16px;border-right:1px solid #dcd7e0}
  html[dir=rtl] .proof-strip dl>div:last-child{padding-right:0;border-right:0}
  html[dir=rtl] header>.button{margin-left:0;margin-right:0}
  html[dir=rtl] .lang-switch{margin-right:auto}
}
/* The Arabic CTA label is longer than the English one: drop the arrow on narrow phones so
   the brand, CTA and menu still share one row. */
@media(max-width:430px){
  html[dir=rtl] header>.button{padding:12px 14px;gap:0}
  html[dir=rtl] header>.button span{display:none}
}