/* Arabic (RTL) layer for /ar/. Loaded after styles.css, only by Arabic pages.
 * Most layout is flex/grid and mirrors on its own under dir="rtl"; this file
 * covers typography plus the physical left/right rules that do not. */

:root[lang="ar"] {
  --font-body: "IBM Plex Sans Arabic", "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-display: "Noto Naskh Arabic", "Cormorant Garamond", Georgia, serif;
}

/* Arabic letters join; tracking and case transforms break or do nothing. */
[lang="ar"] body,
[lang="ar"] body *:not([lang="en"]) {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Arabic has no italic; keep emphasis upright. */
[lang="ar"] em,
[lang="ar"] blockquote {
  font-style: normal;
}

/* Naskh needs more vertical room than the Latin display face. */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3 {
  line-height: 1.35;
}

[lang="ar"] p,
[lang="ar"] li,
[lang="ar"] summary {
  line-height: 1.85;
}

/* Latin runs inside Arabic copy keep their Latin faces. */
[lang="ar"] [lang="en"] {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

[lang="ar"] h1 [lang="en"],
[lang="ar"] h2 [lang="en"],
[lang="ar"] h3 [lang="en"] {
  font-family: "Cormorant Garamond", Georgia, serif;
}

/* FAQ questions are set in the body face, so their Latin runs stay sans. */
[lang="ar"] .faq-item summary h3 [lang="en"] {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

/* The gradient headline paints text through its background; at line-height 1
   Naskh marks (shadda, hamza) fall outside the box and vanish. */
[lang="ar"] .hero-line.grad {
  line-height: 1.45;
  padding-block: 0.08em;
}

/* Off-screen parking must go past the RTL start edge (right); parking to the
   left widens the scrollable page in RTL. */
[dir="rtl"] .skip-link {
  left: auto;
  right: -999px;
  border-radius: 0 0 0 8px;
}

[dir="rtl"] .skip-link:focus {
  right: 0;
}

[dir="rtl"] .hp-field {
  left: auto;
  right: -100vw;
}

/* Calendar arrows are drawn for LTR; mirror them. */
[dir="rtl"] .cal-nav svg {
  transform: scaleX(-1);
}

/* Hero scroll cue sits off-centre, away from the walking figure. */
[dir="rtl"] .scroll-cue {
  right: auto;
  left: 34px;
}

/* Engine room: signals now enter on the right, so the flow lines and their
   pulses run right-to-left toward the "next move" card. */
[dir="rtl"] .horizon-path {
  transform: scaleX(-1);
}

[dir="rtl"] .console-features > div + div {
  border-left: 0;
  border-right: 1px solid rgb(255 255 255 / 0.06);
}

[dir="rtl"] .pattern-reader small {
  text-align: left;
}

[dir="rtl"] .move-window b {
  background: linear-gradient(270deg, rgb(47 184 230 / 0.18), rgb(216 179 94 / 0.5));
}

[dir="rtl"] .move-window b i {
  left: auto;
  right: 15%;
  transform: translate(50%, -50%);
  animation-name: window-lead-rtl;
}

@keyframes window-lead-rtl {
  0%, 48% { right: 15%; }
  72%, 100% { right: 76%; }
}

[dir="rtl"] .reader-confidence i {
  transform-origin: right;
  background: linear-gradient(270deg, var(--blue), var(--gold));
}

/* Scroll progress and nav hover underline grow from the right. */
[dir="rtl"] .scroll-progress {
  transform-origin: right;
  background: linear-gradient(270deg, var(--gold), var(--blue));
}

[dir="rtl"] .nav a:not(.nav-cta)::after {
  left: auto;
  right: 0;
  transform-origin: right;
}

/* Founder portrait offset card and consultation image fade, mirrored. */
[dir="rtl"] .founder-portrait::after {
  inset: 14px 14px -14px -14px;
}

[dir="rtl"] .consultation-bg::after {
  background: linear-gradient(270deg, transparent 72%, oklch(0.99 0.005 85 / 0.4));
}

/* Founder quote bar on the reading-start side. */
[dir="rtl"] .founder-bio blockquote {
  padding-left: 0;
  padding-right: 18px;
  border-left: 0;
  border-right: 3px solid var(--gold);
}

/* Timeline draws from the right. */
[dir="rtl"] .timeline::before {
  background: linear-gradient(270deg, var(--gold), var(--blue));
  transform-origin: right;
}

[dir="rtl"] .timeline li::before {
  left: auto;
  right: 0;
}

/* Consultation card. */
[dir="rtl"] .consultation,
[dir="rtl"] .consultation-inner,
[dir="rtl"] .invite-card {
  text-align: right;
}

[dir="rtl"] .invite-facts li {
  border-left: 0;
  border-right: 1px solid var(--line);
}

[dir="rtl"] .invite-facts li:first-child {
  padding-left: 16px;
  padding-right: 0;
  border-right: 0;
}

[dir="rtl"] .bm-close {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .site-foot p {
  text-align: left;
}

@media (max-width: 960px) {
  [dir="rtl"] .timeline {
    padding-left: 0;
    padding-right: 8px;
  }

  [dir="rtl"] .timeline::before {
    left: auto;
    right: 7px;
    background: linear-gradient(180deg, var(--gold), var(--blue));
    transform-origin: top;
  }

  [dir="rtl"] .timeline li {
    padding-left: 0;
    padding-right: 34px;
  }
}

@media (max-width: 900px) {
  [dir="rtl"] .console-features > div:nth-child(odd) {
    border-right: 0;
  }

  [dir="rtl"] .founder-portrait::after {
    inset: 12px 12px -10px -10px;
  }
}

@media (max-width: 860px) {
  [dir="rtl"] .invite-facts li,
  [dir="rtl"] .invite-facts li:first-child {
    padding: 0;
    border-right: 0;
  }
}

@media (max-width: 720px) {
  [dir="rtl"] .site-foot p {
    text-align: right;
  }
}

@media (max-width: 560px) {
  [dir="rtl"] .console-features > div + div {
    border-right: 0;
  }
}