/* Arabic home and pricing (/ar/, /ar/pricing/): RTL fixes for the landing.css home sections, and the Arabic font
   stack the /ar/ article pages get from article.css. Loaded only on Arabic pages; English pages never load it.
   Plan: company/work/2026-11-08-ar-home-pricing/PLAN.md. */
:lang(ar) { --font-sans: 'thmanyah sans', 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
[dir="rtl"] pre, [dir="rtl"] code, [dir="rtl"] .demo-term { direction: ltr; text-align: left; }

/* Arrow icons in buttons point the reading direction. */
[dir="rtl"] .btn .icon { transform: scaleX(-1); }
[dir="rtl"] .btn .icon-fill { transform: none; }

/* Hero: the rotating subject is the first words of the sentence, so its items hug the left edge (next to the rest of the sentence). */
[dir="rtl"] .rot { text-align: left; }
[dir="rtl"] .rot-item { right: auto; left: 0; }
[dir="rtl"] .hero::before {
  background:
    radial-gradient(600px 300px at 50% 30%, var(--halo), transparent 70%),
    radial-gradient(400px 240px at 25% 20%, rgba(14, 199, 222, 0.12), transparent 70%);
}
[dir="rtl"] .hero-lead q { font-style: normal; }

/* Hero heading: widen from English 14ch, increase line-height for Arabic ascenders/descenders/dots */
[dir="rtl"] .hero h1 {
  max-width: 22ch;
  line-height: 1.25;
}
/* Prevent text-gradient clipping bottom dots of Arabic descenders (e.g. yaa in Thmanyah) */
[dir="rtl"] .hero h1 .text-gradient {
  display: inline-block;
  padding-bottom: 0.25em;
  margin-bottom: -0.25em;
}

/* Demo: the mock app reads RTL; the terminal stays LTR. */
[dir="rtl"] .demo { text-align: right; }
[dir="rtl"] .demo-term .demo-bar > span:last-child { margin-inline-start: auto; }
[dir="rtl"] .demo-bubble-send { text-align: left; }
[dir="rtl"] .demo-toast { right: auto; left: 16px; }
[dir="rtl"] .demo-bubble-text::after { content: ""; }
[dir="rtl"] .demo-url { direction: ltr; unicode-bidi: isolate; }

/* Roles card hover bar grows from the start edge. */
[dir="rtl"] .role::before { transform-origin: right; }
[dir="rtl"] .role-tag { letter-spacing: 0; }

/* Why PinSay panel glow sits in the mirrored corner. */
[dir="rtl"] .vs::before { right: auto; left: -120px; }

/* Install code block: padding mirrors; code itself stays LTR. */
[dir="rtl"] .code { padding: 14px 18px 14px 14px; }
[dir="rtl"] .video-dialog-head { padding: 8px 20px 8px 8px; }

/* Pricing cards bullet dash. */
[dir="rtl"] .plan-features li::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .pricing-grid--all .plan-features li::before { margin: 0; }

/* Arabic quotation marks for <q> (the hero's «الزر في الأعلى… لا، الآخر.») */
:lang(ar) q { quotes: "«" "»" "“" "”"; }

/* English fallback lines on Arabic cards: LTR text, aligned with the Arabic lines */
:lang(ar) .plan-features li > span[dir="ltr"] { text-align: right; }
/* English fallback labels in the Arabic compare table: LTR text, aligned with the Arabic rows */
:lang(ar) .compare-toggle[dir="ltr"], :lang(ar) th[dir="ltr"] { text-align: right; }