/* RTL overrides for Arabic pages */
[dir="rtl"], [dir="rtl"] body { font-family: "Noto Kufi Arabic", var(--body); }

/* Arabic (Noto Kufi) is taller and cursive: the Latin display settings
   (line-height 1.02, negative tracking) cramp marks and distort joins.
   Give headings vertical room and reset tracking — RTL only. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .chat__title, [dir="rtl"] .wizard__title { line-height: 1.3; letter-spacing: 0; }
[dir="rtl"] .hero h1 { line-height: 1.32; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .brand__name, [dir="rtl"] .eyebrow,
[dir="rtl"] .wizard__title, [dir="rtl"] .multiplier__head span, [dir="rtl"] .chat__title { font-family: "Noto Kufi Arabic", var(--display); }
/* Display-stack elements that hold Arabic copy */
[dir="rtl"] h4, [dir="rtl"] .field label, [dir="rtl"] .hero h1 .thin,
[dir="rtl"] .course-mini__body h4 { font-family: "Noto Kufi Arabic", var(--display); }

/* Mono-stack elements that hold Arabic copy (JetBrains Mono has no Arabic glyphs) */
[dir="rtl"] .btn, [dir="rtl"] .trust__label, [dir="rtl"] .svc__no, [dir="rtl"] .svc__cta,
[dir="rtl"] .tpl-card__tag, [dir="rtl"] .tpl-card a, [dir="rtl"] .course-mini__cta,
[dir="rtl"] .intent label, [dir="rtl"] .pill, [dir="rtl"] .wizard__count,
[dir="rtl"] .portrait__tag, [dir="rtl"] .multiplier__amt small, [dir="rtl"] .multiplier__foot,
[dir="rtl"] .proof__note, [dir="rtl"] .footer__bottom,
[dir="rtl"] .tok-card__meta .t { font-family: "Noto Kufi Arabic", var(--mono); }

[dir="rtl"] .nav__book-tag { margin-left: 0; margin-right: 0.55em; }
[dir="rtl"] .story__glow--a { left: auto; right: -12%; }
[dir="rtl"] .story__glow--b { right: auto; left: -10%; }

/* Story chat: titles and the bubble "tail" corner must follow RTL.
   text-align was hard-coded left; the flat tail corner was bottom-left. */
[dir="rtl"] .chat__title { text-align: right; }
[dir="rtl"] .bubble { border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; }

/* TikTok "Pinned" badge sits on the start (right) edge in RTL. */
[dir="rtl"] .tok-card__pin { left: auto; right: 0.5rem; }

/* Multiplier flow reads right-to-left: arrowhead points left, gradient flips. */
[dir="rtl"] .multiplier__arrow { background: linear-gradient(270deg, var(--on-dark-dim), var(--amber)); }
[dir="rtl"] .multiplier__arrow::after { content: "\25C0"; right: auto; left: -2px; }
.nav__lang { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-mut); border: 1px solid var(--ink-line); border-radius: 999px; padding: 0.35em 0.85em; transition: color 0.25s, border-color 0.25s; }
.nav__lang:hover { color: var(--amber); border-color: rgba(245,166,35,0.4); }