/* ServAI Arabic premium typography layer — loaded last on /ar/ pages */
:root {
  --ar-body: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --ar-display: "SF Arabic", "Geeza Pro", "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

html[lang="ar"], html[dir="rtl"],
html[lang="ar"] body, html[dir="rtl"] body {
  font-family: var(--ar-body) !important;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  --sans: var(--ar-body);
  --display: var(--ar-display);
  --mono: var(--ar-body);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-family: var(--ar-display) !important;
  letter-spacing: 0 !important;
  line-height: 1.22;
}

html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] label,
html[lang="ar"] span,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] a,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] label,
html[dir="rtl"] span {
  letter-spacing: 0 !important;
}

/* Keep technical material technical. */
html[lang="ar"] code,
html[lang="ar"] pre,
html[lang="ar"] kbd,
html[lang="ar"] samp,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] kbd,
html[dir="rtl"] samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: normal !important;
}

/* Premium Arabic hero treatment. */
html[lang="ar"] #heroV2,
html[dir="rtl"] #heroV2 {
  font-family: var(--ar-body) !important;
}
html[lang="ar"] #heroV2 .verse,
html[dir="rtl"] #heroV2 .verse {
  font-family: var(--ar-display) !important;
  font-weight: 750;
  letter-spacing: 0 !important;
  line-height: 1.16;
  max-width: 16ch;
  text-wrap: balance;
}
html[lang="ar"] #heroV2 .verse .accent,
html[dir="rtl"] #heroV2 .verse .accent {
  font-weight: 760;
}
html[lang="ar"] #heroV2 .sub,
html[dir="rtl"] #heroV2 .sub {
  font-family: var(--ar-body) !important;
  line-height: 1.9;
  font-weight: 430;
  max-width: 63ch;
}
html[lang="ar"] #heroV2 .eyebrow,
html[lang="ar"] #heroV2 .pill,
html[lang="ar"] #heroV2 .lang,
html[dir="rtl"] #heroV2 .eyebrow,
html[dir="rtl"] #heroV2 .pill,
html[dir="rtl"] #heroV2 .lang {
  font-family: var(--ar-body) !important;
  letter-spacing: 0 !important;
}

/* Navigation/footer: Arabic-first hierarchy and comfortable touch reading. */
html[lang="ar"] .nav-group-title,
html[lang="ar"] .footer-nav-title,
html[lang="ar"] .mobile-nav-group > button,
html[dir="rtl"] .nav-group-title,
html[dir="rtl"] .footer-nav-title,
html[dir="rtl"] .mobile-nav-group > button {
  font-family: var(--ar-display) !important;
  font-weight: 700;
  letter-spacing: 0 !important;
}
html[lang="ar"] .mega-link strong,
html[lang="ar"] .mega-link span,
html[lang="ar"] .footer-nav a,
html[dir="rtl"] .mega-link strong,
html[dir="rtl"] .mega-link span,
html[dir="rtl"] .footer-nav a {
  font-family: var(--ar-body) !important;
  letter-spacing: 0 !important;
}

/* Cards, metrics, chips and buttons should not fall back to Latin mono/display faces. */
html[lang="ar"] .btn,
html[lang="ar"] .industry-chip,
html[lang="ar"] .strategy-badge,
html[lang="ar"] .strategy-metric,
html[lang="ar"] .mode-number,
html[lang="ar"] .path-label,
html[lang="ar"] .device-label,
html[lang="ar"] .device-status,
html[lang="ar"] .price-row .metric,
html[lang="ar"] .price-card .tag,
html[lang="ar"] .footer-bottom,
html[dir="rtl"] .btn,
html[dir="rtl"] .industry-chip,
html[dir="rtl"] .strategy-badge,
html[dir="rtl"] .strategy-metric,
html[dir="rtl"] .mode-number,
html[dir="rtl"] .path-label,
html[dir="rtl"] .device-label,
html[dir="rtl"] .device-status,
html[dir="rtl"] .price-row .metric,
html[dir="rtl"] .price-card .tag,
html[dir="rtl"] .footer-bottom {
  font-family: var(--ar-body) !important;
  letter-spacing: 0 !important;
}

/* Arabic-Indic numerals look best without Latin tracking/transforms. */
html[lang="ar"] [data-arabic-digits],
html[dir="rtl"] [data-arabic-digits] {
  font-family: var(--ar-body) !important;
  font-variant-numeric: proportional-nums;
  letter-spacing: 0 !important;
}

@media (max-width: 720px) {
  html[lang="ar"] #heroV2 .verse,
  html[dir="rtl"] #heroV2 .verse {
    font-size: clamp(39px, 11.7vw, 58px);
    line-height: 1.18;
    max-width: 12.8ch;
  }
  html[lang="ar"] #heroV2 .sub,
  html[dir="rtl"] #heroV2 .sub {
    font-size: 16px;
    line-height: 1.88;
  }
}