/* Right-to-left + Arabic type overrides for the static industries pages.
   Loaded only by pages with <html dir="rtl"> (first user: fnb-ar.html).
   The shared CSS is written with physical left/right, so this file
   mirrors the handful of rules that do not flip on their own. The page
   must also load IBM Plex Sans Arabic from Google Fonts. */
:root[dir="rtl"]{
  --serif:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif;
  --sans:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif;
}
[dir="rtl"] .wh-scope{--font-sans:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif}
[dir="rtl"] .wh-scope,[dir="rtl"] .wh-scope h1,[dir="rtl"] .wh-scope h2,[dir="rtl"] .wh-scope h3,[dir="rtl"] .wh-scope p,[dir="rtl"] .wh-scope li,[dir="rtl"] .wh-scope button,[dir="rtl"] .wh-scope a,[dir="rtl"] .wh-scope input{font-family:var(--sans)}

/* Arabic is a connected script: no negative tracking, more leading, and
   emphasis by colour instead of a slanted face */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .wh-scope .wh-hero__h1,[dir="rtl"] .faq-section h2,[dir="rtl"] .item .head,[dir="rtl"] .bento .t,[dir="rtl"] .pstep h3,[dir="rtl"] .solutions-aside b{letter-spacing:0!important;font-weight:600}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] .wh-scope .wh-hero__h1{line-height:1.3!important}
[dir="rtl"] h2 em{font-style:normal;color:var(--accent)}
[dir="rtl"] .close h2 em{color:#b7d9c0}
[dir="rtl"] .wh-scope .uh-demo__kicker,[dir="rtl"] .wh-scope .wh-hero__backed b,[dir="rtl"] .wh-scope .wh-hero__trusted-label,[dir="rtl"] .wh-scope .uh-tcard__k{letter-spacing:0}
[dir="rtl"] .wh-scope .uh-tcard__h{font-family:var(--sans);letter-spacing:0;line-height:1.35;font-weight:600}

/* Latin brand marks keep their own direction so the accent dot stays
   at the end of the word */
[dir="rtl"] .wordmark,[dir="rtl"] .sf-word{direction:ltr;unicode-bidi:isolate;font-family:"Fraunces",Georgia,serif;letter-spacing:-.05em}

/* header */
[dir="rtl"] .nav-vine{transform-origin:right center}
@media(min-width:701px){
  [dir="rtl"] .site-nav .solutions-panel{right:auto;left:0;padding:14px 16px 14px 14px}
  [dir="rtl"] .site-nav .solutions-panel .solutions-aside{margin-left:0;margin-right:6px;padding:8px 20px 8px 0;border-left:0;border-right:1px solid var(--line)}
}
[dir="rtl"] .solutions-panel a{align-items:flex-start}

/* both marquees carry dir="ltr" in the markup (logos and chips scroll the
   same way in every language), so they need no mirroring here */

/* demo card bullets: tick on the right */
[dir="rtl"] .wh-scope .uh-demo__list li{padding-left:0;padding-right:30px}
[dir="rtl"] .wh-scope .uh-demo__list li::before{left:auto;right:0}
[dir="rtl"] .wh-scope .uh-demo__list li::after{left:auto;right:5px}

/* accordion */
[dir="rtl"] .item .head{text-align:right}

/* the product frame and every mock stay English, left to right */
[dir="rtl"] .frame{direction:ltr}
[dir="rtl"] .frame,[dir="rtl"] .frame h1,[dir="rtl"] .frame p,[dir="rtl"] .frame b,[dir="rtl"] .frame span,[dir="rtl"] .frame button,[dir="rtl"] .vid.mk{font-family:"Schibsted Grotesk",sans-serif}
[dir="rtl"] .frame .rh,[dir="rtl"] .frame .quote{font-family:"Fraunces",Georgia,serif}

/* FAQ: marker on the left, text clear of it */
[dir="rtl"] .faq-item summary{padding:20px 22px 20px 52px}
[dir="rtl"] .faq-item summary::after{right:auto;left:16px}
[dir="rtl"] .faq-item p{padding:0 22px 21px 52px}
@media(max-width:700px){
  [dir="rtl"] .faq-item summary{padding:18px 18px 18px 48px}
  [dir="rtl"] .faq-item p{padding:0 18px 19px 26px}
  [dir="rtl"] .faq-item summary::after{right:auto;left:14px}
}

/* body copy a touch larger: Arabic reads small at Latin sizes */
[dir="rtl"] .wh-scope .wh-hero__p,[dir="rtl"] .lede{line-height:1.75}
[dir="rtl"] .item .body p,[dir="rtl"] .pstep p,[dir="rtl"] .faq-item p{line-height:1.8}
[dir="rtl"] .item.on .body{max-height:120px}

/* header: chevron gap sits on the other side, underline grows from the right */
[dir="rtl"] .solutions-menu summary svg{margin-left:0;margin-right:7px}
[dir="rtl"] .solutions-menu summary:after{transform-origin:right}

/* the guest table card is the one translated mock interior: Arabic is a
   connected script, so it needs the Arabic face and no letter-spacing (the
   Latin uppercase tracking pulls the letters apart) */
[dir="rtl"] .mk-table[lang="ar"],[dir="rtl"] .mk-table[lang="ar"] .h,[dir="rtl"] .mk-table[lang="ar"] .k,[dir="rtl"] .mk-table[lang="ar"] .s{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif;letter-spacing:0}
[dir="rtl"] .mk-table[lang="ar"] .h{font-weight:600;line-height:1.35}
[dir="rtl"] .mk-table[lang="ar"] .k{font-size:11.5px}