/* ==========================================================================
   RTL / ARABIC — the only exceptions logical properties don't cover

   Arabic is the sole RTL locale. styles.css uses logical properties
   throughout (margin-inline-start, inset-inline-end, etc.), so the layout
   mirrors itself for free — this file holds only the handful of rules that
   logical properties can't express: font stack, letter-spacing, bidi
   isolation for Latin runs inside RTL copy, and two element orientations
   that should NOT mirror. Loaded only for the ar build (see rtlStylesheetTag
   in _build/build.js), so the other 15 locales never fetch it.
   ========================================================================== */

/* Inter carries no Arabic either. */
[lang="ar"] body,
[lang="ar"] {
  /* System Arabic stack — Android: Noto Sans Arabic (system), iOS/macOS:
     Geeza Pro, Windows: Segoe UI. No web-font payload for Arabic. */
  font-family: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, 'Inter', sans-serif;
}

/* Arabic is cursive — letters join. letter-spacing pulls those joins apart and
   renders the text as disconnected glyphs, which is close to unreadable. Every
   tracking value in this stylesheet has to be neutralised for Arabic, hence the
   blanket override rather than per-rule edits. */
[lang="ar"] *,
[lang="ar"] *::before,
[lang="ar"] *::after {
  /* !important because "blanket" has to mean it: at (0,1,0) this lost to every
     two-class rule — `.hero .eyebrow`, `.landing .faq .eyebrow`, the pricing
     table head — and the 2026-09-18 redesign added several. Pseudo-elements
     are listed because `*` does not match them (legal tables label their
     cells through td::before). */
  letter-spacing: normal !important;
}

/* Arabic ascenders and descenders need more vertical room than Latin. */
[lang="ar"] body {
  line-height: 1.8;
}

/* Uppercasing does nothing in Arabic (no letter case) but does disable some
   ligatures in certain renderers. Turn it off where the design applies it. */
[lang="ar"] .eyebrow,
[lang="ar"] .nav__brand,
[lang="ar"] .btn {
  text-transform: none;
}

/* The layout mirrors automatically via logical properties and grid, but the
   phone frame reads better kept upright rather than flipped. */
[dir="rtl"] .phone__shot {
  transform: none;
}

/* Headline line-heights are set per component (0.92–1.05) and override the
   roomier body value above; stacked Arabic lines at 0.92 collide. */
[lang="ar"] .hero__title,
[lang="ar"] .moment__title,
[lang="ar"] .features__title,
[lang="ar"] .manifesto__title,
[lang="ar"] .pricing__title,
[lang="ar"] .faq__title,
[lang="ar"] .final-cta__title {
  line-height: 1.3;
}

/* The pricing tick is an L-shaped border rotated into a check. Its
   border-inline-start flips in RTL while the rotation did not, which turned
   the check into a ">" . */
[dir="rtl"] .plan__features li::before {
  transform: rotate(45deg);
}

/* Desktop hero and the manifesto: the grid mirrors (copy right, phone left)
   but the art, its mask and the darkening gradient were physical, so Arabic
   copy sat on the bright, undarkened part of the picture. Mirror the plate and
   the grade with the layout. The mask is in the image's own coordinate space
   and flips with it. */
@media (min-width: 881px) {
  [dir="rtl"] .hero__art img {
    right: auto;
    left: 0;
    transform: translateX(-20%) scaleX(-1);
  }
  [dir="rtl"] .hero::after {
    background:
      linear-gradient(270deg, #0A0A0A 0%, rgba(10, 10, 10, 0.92) 34%, rgba(10, 10, 10, 0.45) 56%, rgba(10, 10, 10, 0) 76%),
      linear-gradient(0deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0) 26%),
      linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0) 16%);
  }
  [dir="rtl"] .manifesto__art img {
    transform: scaleX(-1);
  }
  [dir="rtl"] .landing .manifesto::after {
    background: linear-gradient(270deg, rgba(244, 241, 234, 0.9) 0%, rgba(244, 241, 234, 0.84) 50%, rgba(244, 241, 234, 0.62) 80%, rgba(244, 241, 234, 0.1) 100%);
  }
}
@media (min-width: 881px) and (max-width: 1360px) {
  [dir="rtl"] .hero__art img { transform: translateX(-26%) scaleX(-1); }
}

/* Nav underline draws from the reading-start edge in both directions. */
[dir="rtl"] .nav__links a::after {
  transform-origin: right;
}

/* --------------------------------------------------------------------------
   Bidi isolation for Latin runs inside RTL copy
   --------------------------------------------------------------------------
   `.` `+` `=` `(` `)` are bidi-NEUTRAL characters: in an RTL paragraph they
   resolve to the paragraph direction and jump to the wrong end of the run.
   Untreated, the Arabic hero rendered as ". Lift / . Forever / .Anyway" and
   the footer line lost its final full stop to the left edge.

   Two mechanisms, and they are not interchangeable:
     - `<bdi>` in the copy, for a Latin run INSIDE an Arabic sentence
       (`من <bdi>Exile</bdi> إلى <bdi>Ascended</bdi>.`). Only markup can
       isolate a fragment of a text node — CSS cannot reach inside one.
     - the rules below, for whole elements that are Latin by design even in
       Arabic (the wordmark) and for any headline a locale
       chooses to keep as a brand asset.
   `text-align: start` is restated because isolation alone does not move the
   box — without it an isolated LTR run still sits flush to the RTL edge. */
[dir="rtl"] .hero__title,
[dir="rtl"] .final-cta__title,
[dir="rtl"] .manifesto__title--orange,
[dir="rtl"] .footer__brand span {
  unicode-bidi: isolate;
  text-align: start;
}

/* Latin by design in every locale: the wordmark. */
[dir="rtl"] .nav__brand span {
  unicode-bidi: isolate;
  direction: ltr;
}