/* ============================================================
   Arabic locale — RTL overrides on top of styles.css
   Loaded only by /ar/. Never mixed with the English page.
   ============================================================ */

@font-face{
  font-family:"PlexAr";
  src:url("fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight:400;font-display:swap;
}

:root{
  --sans:"PlexAr","Plex",system-ui,sans-serif;
  --display:"PlexAr","Plex",system-ui,sans-serif;
}

body{font-weight:400;letter-spacing:0;line-height:1.78}

/* the spine moves to the right edge */
.spine{left:auto;right:max(14px,2.4vw)}
.spine__dot{left:auto;right:-2.5px}

/* Michroma has no Arabic, so the name sets in Plex Arabic, one colour.
   The A/H accent device does not survive Arabic letterforms — do not try. */
h1.name{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(30px,7.4vw,92px);line-height:1.34;letter-spacing:0;
}
h1.name .ln{display:block}

.sechead h2{font-family:var(--sans);letter-spacing:0;line-height:1.5}
.ct__big{font-family:var(--sans);letter-spacing:0;line-height:1.5}
.top__mark{font-family:var(--sans);letter-spacing:0}

/* labels keep the Latin mono face only where they are Latin */
.eyebrow,.secnote,.facts h4,.sys h3,.xp__role,.proof__i,.foot p{
  font-family:var(--sans);letter-spacing:0;text-transform:none;
}
.eyebrow{font-size:13px}
.secnote{font-size:13.5px}
.facts h4{font-size:12.5px;letter-spacing:0}
.sys h3{font-size:13px}
.xp__role{font-size:13.5px}
.xp__tag{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none}
.proof__i{font-family:var(--mono)}
.top__nav a{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none}
.cta{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none}
.lk{font-family:var(--sans);letter-spacing:0;text-transform:none}

/* logical properties so the flip is automatic */
.facts__in > div{border-left:0;border-inline-start:1px solid var(--line)}
.facts__in > div:first-child{border-inline-start:0;padding-inline-start:0}
.facts__in > div:last-child{padding-inline-end:0}

.xp{padding-left:0;padding-inline-end:clamp(20px,3vw,40px)}
.xp::before{left:auto;right:0}
.xp__item::before{
  left:auto;right:calc(-1 * clamp(20px,3vw,40px) - 2px);
}

.proof__t b{font-weight:400}

/* the arrow points the way the language reads */
.cta i::after{
  right:auto;left:0;
  border-top:1px solid var(--muted);border-right:0;
  border-left:1px solid var(--muted);
  transform:rotate(-45deg);
}
.cta:hover i::after{border-color:var(--bone)}

@media (max-width:900px){
  .facts__in > div:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .facts__in > div:last-child{padding-inline-end:clamp(16px,2vw,30px)}
}
@media (max-width:540px){
  .facts__in > div{border-inline-start:0;padding-inline:0}
}


/* mobile menu numbers in Arabic-Indic digits */
@media (max-width:760px){
  .top__nav > a:not(.lang)::before{content:counter(n,arabic-indic);font-size:12px}
  .top__nav > a{font-size:clamp(20px,5.8vw,28px);line-height:1.5}
  .top__nav a.lang{font-size:12px}
  .langs{align-self:flex-start}
}