/* Arabic typography scale for /ar/dashboard/* and /ar/mobile-app/* (IBM Plex Sans Arabic).
   Loaded last on those pages. Sizes, leading and wrapping only: colors stay with each
   section's theme (light and dark sections both exist), and Arabic gets no letter-spacing
   because tracking breaks the joins between letters.
   The hero H1 size is also set inline by product-hero-typography.js, which mirrors these values. */

/* Mockup screens use real headings and paragraphs for their fake UI; leave those alone. */

/* ---------- A. Eyebrows ---------- */
html[lang="ar"]:not(#ar) body:not(#ar) main :is(.eyebrow,.sx-eyebrow,[class$="-eyebrow"],[class$="-kicker"],.c9-hero-copy > .c9-label) {
  font-family:"IBM Plex Sans Arabic",sans-serif!important; font-size:.8125rem!important; line-height:1.5!important; font-weight:600!important;
  letter-spacing:0!important; text-transform:none!important;
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.75rem!important;
}

/* ---------- B. Hero H1 ---------- */
html[lang="ar"]:not(#ar) body:not(#ar) main h1 {
  font-size:clamp(34px,4.2vw,50px)!important; line-height:1.25!important;
  font-weight:700!important; letter-spacing:0!important;
  max-width:42rem!important; text-wrap:balance!important;
}
html[lang="ar"]:not(#ar) body:not(#ar) main h1 :is(span,em,strong) { font-size:inherit!important; line-height:inherit!important; letter-spacing:0!important; }

/* ---------- C. Hero lead paragraph ---------- */
html[lang="ar"]:not(#ar) body:not(#ar) main :is(h1 + p, h1 ~ p:not(:is(.hero-actions p))) {
  font-size:1rem!important; line-height:1.8!important; font-weight:400!important;
  max-width:42rem!important; margin-top:.75rem!important; margin-bottom:1.5rem!important;
  text-wrap:pretty;
}
@media (min-width:640px) {
  html[lang="ar"]:not(#ar) body:not(#ar) main :is(h1 + p, h1 ~ p:not(:is(.hero-actions p))) { font-size:1.125rem!important; }
}

/* Dashboard heroes stay centered (EN/AR/PL parity): center the width-capped blocks too. */
html[lang="ar"]:not(#ar) body:not(#ar) main :is(.product-story-copy,.hub-copy,.sx-hero-copy) > :is(h1,p) { margin-inline:auto!important; }

/* ---------- D. Section H2 ---------- */
html[lang="ar"]:not(#ar) body:not(#ar) main h2:not(:is([class*="screen"],[class*="mock"],[class*="phone"],[class*="device"],[class*="browser"],[class*="stage"],aside) h2) {
  font-size:1.5rem!important; line-height:1.3!important; font-weight:700!important;
  letter-spacing:0!important; margin-bottom:.75rem!important;
  max-width:42rem; text-wrap:balance!important;
}
@media (min-width:640px) {
  html[lang="ar"]:not(#ar) body:not(#ar) main h2:not(:is([class*="screen"],[class*="mock"],[class*="phone"],[class*="device"],[class*="browser"],[class*="stage"],aside) h2) { font-size:1.75rem!important; }
}
@media (min-width:1024px) {
  html[lang="ar"]:not(#ar) body:not(#ar) main h2:not(:is([class*="screen"],[class*="mock"],[class*="phone"],[class*="device"],[class*="browser"],[class*="stage"],aside) h2) { font-size:2.125rem!important; }
}
html[lang="ar"]:not(#ar) body:not(#ar) main h2 :is(span,em,strong,b) { font-size:inherit!important; line-height:inherit!important; letter-spacing:0!important; }

/* ---------- E. Section intro paragraphs ---------- */
html[lang="ar"]:not(#ar) body:not(#ar) main :is(h2 + p, .story-block-intro, :is(header,[class*="head"]) > p):not(:is([class*="screen"],[class*="mock"],[class*="phone"],[class*="device"],[class*="browser"]) p) {
  font-size:.875rem!important; line-height:1.75!important; font-weight:400!important;
  max-width:42rem; margin-bottom:1.5rem!important; text-wrap:pretty;
}
@media (min-width:640px) {
  html[lang="ar"]:not(#ar) body:not(#ar) main :is(h2 + p, .story-block-intro, :is(header,[class*="head"]) > p):not(:is([class*="screen"],[class*="mock"],[class*="phone"],[class*="device"],[class*="browser"]) p) { font-size:1rem!important; }
}

/* ---------- Anti-orphan: card titles balance too ---------- */
html[lang="ar"]:not(#ar) body:not(#ar) main h3 { text-wrap:balance!important; letter-spacing:0!important; }