/* =====================================================================
   Arabic pages (/ar/…): what every right-to-left page shares, on top of
   its own stylesheet (styles.css, counter.css, stitchai.css or Reden
   Mail's inline styles). Loaded after the page CSS, only by pages with
   <html lang="ar" dir="rtl"> (and book.html?lang=ar in the chat popup).
   Mirroring that belongs to one page's layout lives in that page's own
   stylesheet under html[dir="rtl"], next to the rule it mirrors.

   Arabic is set in IBM Plex Sans Arabic and is never letter-spaced,
   capitalised or italic. Cormorant stays for the wordmarks and JetBrains
   Mono for code. No gradients on these pages.
===================================================================== */

/* ---------- type ---------- */
html[lang="ar"] {
  --serif: "IBM Plex Sans Arabic", "Cormorant Garamond", serif;
  --sans:  "IBM Plex Sans Arabic", "DM Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Sans Arabic", "JetBrains Mono", ui-monospace, monospace;
}
html[lang="ar"] :is(.mark-word, .foot-mark, .nav-mark, .cl-name) { font-family: "Cormorant Garamond", "Times New Roman", serif; }
html[lang="ar"] :is(pre, code, .mini-code, .term, .scene-bar .addr, .mini-row .k, .mini-row .v) { font-family: "JetBrains Mono", ui-monospace, monospace; }
html[lang="ar"] body,
html[lang="ar"] body *,
html[lang="ar"] body *::before,
html[lang="ar"] body *::after { letter-spacing: 0 !important; text-transform: none !important; }
html[lang="ar"] :is(em, i, .card-num, .marquee-track) { font-style: normal; }

/* Display type: Plex Arabic runs larger than Cormorant at the same size and
   needs room above and below for its marks. */
html[lang="ar"] :is(h1, h2, h3, h4, .hero-title, .sec-title, .final-title, .card-title, .proof-n, .proof-line, .faq-q, .lp-title) { line-height: 1.4; }
html[lang="ar"] :is(.hero-title, .sec-title, .final-title) { font-weight: 500; }
html[lang="ar"] .hero-title { font-size: clamp(30px, 4.4vw, 60px); line-height: 1.3; }
html[lang="ar"] .sec-title { font-size: clamp(26px, 3.6vw, 44px); }
html[lang="ar"] .final-title { font-size: clamp(28px, 3.8vw, 48px); }
html[lang="ar"] .card-title { font-size: clamp(19px, 1.8vw, 22px); font-weight: 500; }
html[lang="ar"] .hero-sub { font-size: 17px; line-height: 1.8; }
html[lang="ar"] :is(.sec-lede, .card-desc, .final-sub, .faq-item p, .legal-wrap p, .legal-wrap li) { line-height: 1.85; }

/* Small mono labels (11px caps in English) read at 12.5–13px in Arabic. */
html[lang="ar"] :is(.sec-name, .card-tag, .stat-k, .meta-row, .proof-p, .hero-kicker, .hero-call, .price-tag, .price-blurb,
  .price-badge, .li-head, .foot-col h6, .foot-bottom, .bk-step, .reassure-row, .pc-k, .persona-cue, .mark-by, .scroll-label,
  .legal-eyebrow, .legal-updated, .legal-back, .cap-line, .dash-caption, .demo-step, .demo-sample, .proof-label, .cost-title,
  .cost-row .nm, .cost-foot, .price-note, .thread-head span, .img-bar, .stack-k, .stack-note, .card-link, .closer-link) { font-size: 13px; }
html[lang="ar"] .stat-n { font-weight: 500; }
html[lang="ar"] .stat-n span { font-size: 0.45em; }

/* Phone numbers, emails and other Latin runs keep reading left to right. */
html[lang="ar"] :is(a[href^="tel:"], a[href^="mailto:"]) { unicode-bidi: isolate; direction: ltr; }
html[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }
html[dir="rtl"] input[type="email"]::placeholder { text-align: right; }

/* Roman numerals stay "IV." / "ii." rather than ".IV". */
html[dir="rtl"] :is(.sec-num, .card-num, .step-num) { direction: ltr; unicode-bidi: isolate; }

/* ---------- nav ---------- */
html[dir="rtl"] .nav-links a::after { left: 100%; right: 0; transition: left .25s ease; }
html[dir="rtl"] .nav-links a:hover::after { left: 0; }
html[dir="rtl"] .nav-burger { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .mark-by { margin-left: 0; margin-right: 4px; }
html[lang="ar"] .nav-links { font-size: 14.5px; }
@media (max-width: 880px) { html[lang="ar"] .nav-links a { font-size: 18px; } }
@media (max-width: 360px) { html[dir="rtl"] .nav-burger { margin-right: 2px; } }

/* ---------- arrows ---------- */
/* Markup keeps "→" inside these spans; on Arabic pages they point left. */
html[dir="rtl"] :is(.btn-arrow, .nav-cta-arrow, .pc-arrow) { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .btn-arrow,
html[dir="rtl"] .nav-cta:hover .nav-cta-arrow { transform: scaleX(-1) translateX(3px); }
/* Small phones drop the nav CTA's arrow (counter.css, stitchai.css); keep it
   dropped. !important: counter.css flips arrows with an id-weight selector
   (:is(.nav, #hero, #cta)[dir="rtl"]). */
@media (max-width: 420px) { html[dir="rtl"] .nav-cta .nav-cta-arrow { display: none !important; } }

/* ---------- site chat launcher (chat.js) ---------- */
/* Phones: bottom-left, where right-aligned Arabic lines end ragged, so it
   covers less text than in the bottom-right corner. */
@media (max-width: 720px) {
  html[dir="rtl"] .rc-launch,
  html[dir="rtl"] .rc-launch.rc-right { right: auto; left: 16px; }
}

/* ---------- marquee strips ---------- */
/* The strip keeps its leftward motion; each item reads right to left. */
html[dir="rtl"] :is(.marquee-strip, .marquee) { direction: ltr; }
html[dir="rtl"] .marquee-track > span { direction: rtl; unicode-bidi: isolate; }
html[lang="ar"] .marquee-track { font-weight: 400; font-size: 19px; }

/* ---------- no gradients ---------- */
html[lang="ar"] .hero-grain,
html[lang="ar"] .marquee::before,
html[lang="ar"] .marquee::after { display: none; }
html[lang="ar"] .scroll-line { background: var(--ink-mute); opacity: .5; }

/* ---------- lists with ✦ / ✓ markers ---------- */
html[dir="rtl"] .price-list li { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .price-list li::before { left: auto; right: 0; }
html[dir="rtl"] .price-list li.li-head { padding-right: 0; }
html[dir="rtl"] .card-list li { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .card-list li::before { left: auto; right: 0; }

/* ---------- booking calendar (home #contact, and /book in the chat) ---------- */
html[lang="ar"] :is(.bk-cell, .bk-day, .slot, .mo-title, .wl-label, .bk-back, .bk-status, .bk-confirmed) { font-family: var(--sans); }
html[lang="ar"] .mo-weekdays span { font-size: 13px; }
html[lang="ar"] .mo-title { font-style: normal; }
html[lang="ar"] .slot-tz { direction: ltr; }

/* ---------- footer ---------- */
html[lang="ar"] .foot-col a { font-size: 14.5px; }
html[lang="ar"] .foot-brand p { line-height: 1.8; }

/* ---------- footer line (reden-tagline.js) ---------- */
html[lang="ar"] .reden-tagline bdi { font-family: "Cormorant Garamond", "Times New Roman", serif; font-size: 18px; }
html[lang="ar"] .reden-tagline em { margin-inline-start: 6px; }