/* ============================================================
   SNS — RTL overlay. Loaded only on the Arabic pages, after
   sns.css. It flips the handful of physical-direction rules the
   base sheet uses and swaps in an Arabic type stack.
   ============================================================ */

:root{ --ar-sans:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
       --ar-display:"Noto Kufi Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif; }

body{font-family:var(--ar-sans);font-size:17.5px;line-height:1.85}
h1,h2,h3,h4{font-family:var(--ar-display);letter-spacing:0;line-height:1.35}
.brand .wm{font-family:var(--ar-display);letter-spacing:0}
.hero h1{line-height:1.3}
.em{font-style:normal;font-weight:700}          /* italics do not exist in Arabic type */

/* Latin letter-spacing and uppercasing do not apply to Arabic script:
   they break the eye's word shapes and do nothing useful. Numbers and
   Latin fragments still need an LTR island so they read correctly. */
.frm label,.fieldset legend,.frm label .opt,.note,.cardfoot,.pull cite{
  letter-spacing:0;text-transform:none;font-family:var(--ar-sans)}
.frm label,.fieldset legend{font-size:13px}
.eyebrow,.strip span,.card .n,.card .more,.step .lbl,.logos .txt{
  letter-spacing:0;text-transform:none;font-family:var(--ar-sans)}
.eyebrow{font-size:12.5px}
.strip span{font-size:12.5px}
.card .n,.card .more{font-size:12.5px}
/* figures, prices and anything Latin keep their own direction */
.strip b,.mono,time,.num{direction:ltr;unicode-bidi:isolate}
/* the price is a block, not an inline number: forcing it LTR pushed the
   whole box to the left edge while everything around it stayed right. */
.pricebox .amt{direction:rtl;text-align:right}
.strip b{font-family:"Archivo",sans-serif;letter-spacing:-0.02em}

/* --- flipped physical properties --- */
.brand{margin-right:0;margin-left:auto}
.hero::after{right:auto;left:-190px}
.strip div{border-right:0;border-left:1px solid var(--line)}
.strip div:last-child{border-left:0}
.pull{border-left:0;border-right:3px solid var(--yellow);padding:4px 22px 4px 0}
.step .lbl{padding-right:0;padding-left:14px}
.logos{border-left:0;border-right:1px solid var(--line)}
.logos div{border-right:0;border-left:1px solid var(--line)}
.pricebox .cur{margin-left:0;margin-right:7px}
ol.principles li > span{grid-column:2}
.stg{border-right:0;border-left:1px solid var(--line)}
.stg:last-child{border-left:0}
.frm .hp{left:auto;right:-9999px}
.msg{border-left:0;border-right:3px solid var(--yellow);padding:13px 19px 13px 0}
.msg.bad{border-left-color:transparent;border-right-color:#B4443A}

/* arrows in "read more" links point the other way in RTL */
.card .more,.more{unicode-bidi:isolate}

@media (max-width:900px){
  .stg:nth-child(2n){border-left:0}
  .stages .stg{border-left:0}
  .strip div{border-left:0;border-bottom:1px solid var(--line)}
}