/* ADRAA, Arabic layer.
   Loaded only on /ar pages, on top of adraa.css. Two jobs, in this order of
   importance:

   1. TYPOGRAPHY. The Latin design leans on tight negative letterspacing,
      uppercase labels and a 1.06 display line height. All three are wrong for
      Arabic. Letterspacing in particular does not "space out" Arabic, it
      severs the cursive joins between letters and renders words as debris.
      Uppercase does nothing at all, since Arabic is unicameral.
   2. DIRECTION. adraa.css was converted to logical properties, so the layout
      mirrors on its own. What stays here is the handful of things logical
      properties cannot express: background positions, transform origins,
      rotations and the arrow glyph.

   Deliberately NOT mirrored: the custom cursor, which is positioned in
   viewport pixels by script, and the safe area insets, which follow the
   physical notch. Both are correct as physical values. */

/* ---------- 1. Type ------------------------------------------------------ */
/* Amiri carries the editorial, calligraphic weight that Young Serif carries in
   Latin. IBM Plex Sans Arabic is the workhorse: it holds up at small sizes and
   has the weight range the interface needs. */
:root{
  --serif:"Amiri","Noto Naskh Arabic",Georgia,serif;
  --sans:"IBM Plex Sans Arabic","Noto Sans Arabic",ui-sans-serif,-apple-system,sans-serif;
  /* Arabic sets more words into the same ch count, so the Latin measure reads
     as an over long line. */
  --measure:60ch;
}

/* Both Arabic faces run optically smaller than the Latin pair at the same
   size. A small root bump keeps the two versions feeling like one brand
   instead of one looking shrunken. */
html[lang="ar"]{font-size:104%}

/* ---------- 2. Letterspacing and case ------------------------------------ */
/* The single most important rule in this file. Every letterspaced selector in
   adraa.css, positive or negative, neutralised in one place so a new one
   cannot be added later and quietly break the script. */
[dir="rtl"],
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after{
  letter-spacing:normal;
  text-transform:none;
}
/* The wordmark stays Latin, so it keeps its Latin treatment. */
[dir="rtl"] .brand__word{letter-spacing:.3em;text-transform:uppercase}

/* ---------- 3. Leading --------------------------------------------------- */
/* Arabic stacks diacritics above and descends below the baseline far more than
   Latin. The Latin display leading clips both. */
[dir="rtl"] body{line-height:1.85}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{line-height:1.5}
/* 1.34 looked right until the reveal ran. Each split line is its own
   overflow:hidden box, so Amiri's long descenders were both colliding with the
   line below and being clipped by their own box. Leading is what prevents
   both. */
[dir="rtl"] .display{line-height:1.58}
[dir="rtl"] .h-work{line-height:1.55}
[dir="rtl"] .lede{line-height:1.8}
[dir="rtl"] .promise{line-height:1.5}
/* These carry numerals rather than Arabic words, so they keep tight leading
   but need room for the taller Arabic fallback metrics. */
[dir="rtl"] .tier__price,[dir="rtl"] .rung__price,
[dir="rtl"] .week__n,[dir="rtl"] .freq li{line-height:1.25}

/* Amiri has 400 and 700 only, IBM Plex Sans Arabic has 300 to 700. The Latin
   design asks for 340 and 380, which round unpredictably across engines. */
[dir="rtl"] body{font-weight:400}
[dir="rtl"] .lede{font-weight:300}

/* ---------- 4. Numerals and Latin fragments ------------------------------ */
/* Prices, the brand name and email addresses stay left to right inside Arabic
   sentences. isolate stops a trailing digit or symbol from being dragged to
   the wrong end of the line by the bidi algorithm. */
[dir="rtl"] .tier__price,[dir="rtl"] .rung__price,
[dir="rtl"] .big-number,[dir="rtl"] .week__n,
[dir="rtl"] [dir="ltr"]{
  direction:ltr;
  unicode-bidi:isolate;
}
[dir="rtl"] .rung__price{text-align:end}

/* ---------- 5. Direction fixes logical properties cannot reach ----------- */
/* The select chevron is a background image, which has no logical position. */
[dir="rtl"] .select{background-position:left 1rem center}

/* The arrow glyph points at the reading direction, so it has to turn around.
   Mirroring the glyph keeps one character doing the job in both languages.
   The hover nudge needs no override: scale is applied before transform, so the
   base translateX(4px) is mirrored with the glyph and already travels left. */
[dir="rtl"] .btn__arrow{display:inline-block;scale:-1 1}

/* Bars, sweeps and reveals all grow from the start edge, which is now right. */
[dir="rtl"] .progress{transform-origin:right}
[dir="rtl"] .steps__fill{transform-origin:right}
[dir="rtl"] .band--start{transform-origin:right}
[dir="rtl"] .band::before{--band-o:left}
[dir="rtl"] .band::after{--band-o:right}
[dir="rtl"] .nav a:not(.btn)::after{transform-origin:left}
[dir="rtl"] .nav a:not(.btn):hover::after,
[dir="rtl"] .nav a:not(.btn)[aria-current]::after{transform-origin:right}

/* The masked line reveal tilts from its start corner.
   The initial transform is scoped to :not([data-in]) ON PURPOSE. Writing it as
   a plain [dir="rtl"] .split .ln>span gives specificity 0,3,0, which outranks
   the reveal's finished state .split[data-in] .ln>span at 0,2,0, so every
   split heading stays parked 110% below its clipping box and the page renders
   with no headlines at all. Scoping it means the rule stops matching the
   moment the reveal lands. */
[dir="rtl"] .split .ln>span{transform-origin:right top}
[dir="rtl"] .split:not([data-in]) .ln>span{
  transform:translate3d(0,110%,0) rotate(-1.6deg);
}

/* The row hover sweep enters from the start edge. */
@media (hover:hover) and (pointer:fine){
  [dir="rtl"] .obstacle::after,[dir="rtl"] .week::after,
  [dir="rtl"] .stack-row::after,[dir="rtl"] .row2::after,
  [dir="rtl"] .rung::after,[dir="rtl"] .recog li::after{
    background:linear-gradient(270deg,
      oklch(82.2% .088 82.6 / .09), oklch(82.2% .088 82.6 / .02) 62%, transparent);
    transform-origin:right;
  }
}

/* The skip link is positioned physically in the Latin sheet. */
[dir="rtl"] .skip{left:auto;right:var(--gutter)}