/* Shared locale normalization. Keep this file last in the cascade. */
html[lang="ar"] {
  direction: rtl !important;
  overflow-x: clip;
}

html[lang="ar"],
html[lang="ar"] body,
[dir="rtl"] {
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: normal;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] :is(h1, h2, h3, h4, h5, h6),
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
  letter-spacing: 0 !important;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
  white-space: normal !important;
}

html[lang="ar"] h1,
[dir="rtl"] h1 {
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin-block-end: 1rem;
}

html[lang="ar"] :is(h2, h3, h4),
[dir="rtl"] :is(h2, h3, h4) {
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-block-end: .75rem;
}

html[lang="ar"] :is(p, li),
[dir="rtl"] :is(p, li) {
  font-weight: 400;
  line-height: 1.7;
}

html[lang="ar"] :is(button, .button, .btn, nav a),
[dir="rtl"] :is(button, .button, .btn, nav a) {
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0 !important;
}

/* Product headings must wrap at every viewport; legacy page CSS forced nowrap. */
.c9-page :is(h1, h2),
.community-page :is(.product-story-copy h1, .product-story-copy h1 span) {
  white-space: normal !important;
}

/* Only repeatable card titles are clamped. Page and article headings remain complete. */
:is(.blog-card-copy h3, .story-card-grid h3, .module-card h3) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

html[lang="ar"] :is(.site-header, .section-shell, .blog-shell, .case-studies-shell) {
  min-inline-size: 0;
}

html[lang="ar"] :is(.article-deck, .article-body, .blog-brief-copy, .product-story-copy) {
  text-align: start;
}

@media (max-width: 760px) {
  html[lang="ar"],
  html[lang="ar"] body,
  html[lang="ar"] #app {
    inline-size: 100vw;
    max-inline-size: 100vw;
    min-inline-size: 0;
    overflow-x: hidden !important;
    position: relative;
  }

  html[lang="ar"] body.home-page :is(.site-header, main, main > section, footer) {
    inline-size: 100%;
    max-inline-size: 100vw;
    overflow-x: hidden !important;
  }

  html[lang="ar"] body.home-page main > section {
    overflow-x: clip;
  }

  html[lang="ar"] :is(.home-hero-v2-grid, .home-hero-v2-copy, .product-story-copy, .article-hero-grid) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[lang="ar"] .home-hero-v2-grid {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[lang="ar"] .nav-shell {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  html[lang="ar"] :is(.home-hero-v2-copy, .home-hero-v2-copy > p, .home-hero-v2-copy .hero-actions, .home-hero-proof, .home-product-stage) {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  html[lang="ar"] .home-product-stage {
    overflow: hidden;
  }

  html[lang="ar"] .home-hero-v2 h1 {
    font-size: clamp(2.35rem, 11vw, 3.5rem) !important;
  }

}

/* The same mobile component serves all three locales. Keep the visual
   direction logical while retaining LTR order inside product screenshots. */
html[lang="ar"] .ms-page,
html[lang="ar"] .ms-page :is(h1, h2, h3, p, li, button, a) {
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
  letter-spacing: 0 !important;
}

html[lang="ar"] .ms-page :is(p, li) {
  font-weight: 400;
  line-height: 1.7;
}

html[lang="ar"] .ms-page h1 {
  font-weight: 600 !important;
}

html[lang="ar"] .ms-page :is(h2, h3) {
  font-weight: 500 !important;
}

html[dir="rtl"] .ms-dashboard { left: auto; right: 0; }
html[dir="rtl"] .ms-phone { right: auto; left: 0; }
html[dir="rtl"] .ms-browser span { margin-inline-start: auto; margin-inline-end: 0; }
html[dir="rtl"] .ms-card li,
html[dir="rtl"] .ms-split-grid li { padding-inline-start: 21px; padding-inline-end: 0; }
html[dir="rtl"] .ms-card li::before,
html[dir="rtl"] .ms-split-grid li::before { left: auto; right: 0; }
html[dir="rtl"] .ms-faq-item button { text-align: start; }
html[dir="rtl"] .ms-faq-item p { padding-inline-end: 48px; padding-inline-start: 0; }

html[lang="pl"] .ms-page :is(.ms-hero-copy, .ms-card, .ms-split-grid article),
html[lang="ar"] .ms-page :is(.ms-hero-copy, .ms-card, .ms-split-grid article) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
html[lang="ar"] .article-body h2 {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }
}

/* App suite typography parity with the eight dashboard module pages. */
:is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) :is(h1,h2,h3,h4) {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (min-width:681px) {
  html[lang="en"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(39px,3vw,44px) !important;
    line-height: 1 !important;
    letter-spacing: -.055em !important;
  }
  html[lang="pl"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(31px,2.4vw,36px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
  }
  html[lang="ar"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(38px,2.9vw,42px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) section h2 {
    font-size: clamp(42px,4.8vw,65px) !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;
  }
  html[lang="ar"] :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) section h2 {
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) :is([class*="faq"],[class*="objection"]) h2 {
    font-size: clamp(42px,4.5vw,60px) !important;
    line-height: .98 !important;
  }
  :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) :is([class*="closing"],[class*="close"]) h2 {
    font-size: clamp(48px,6vw,76px) !important;
    line-height: .96 !important;
  }

  :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) section h3 {
    font-size: clamp(22px,2.2vw,30px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
  }
  html[lang="ar"] :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) section h3 {
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width:680px) {
  html:is([lang="en"],[lang="pl"]) :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: 34px !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
  }
  html[lang="ar"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: 25px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
  :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) section h2 {
    font-size: 30px !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
  }
  :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) :is([class*="closing"],[class*="close"]) h2 {
    font-size: 34px !important;
    line-height: 1.06 !important;
  }
  :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) section h3 {
    font-size: clamp(20px,6.4vw,25px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }
  html[lang="ar"] :is(.sv-app-page,.c9-page,.cv-page,.ep-page,.lb-page,.fr-page,.ms-page) :is(h2,h3) {
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
}

/* Correct app-page hierarchy: hero H1 must remain the largest display type. */
@media (min-width:681px) {
  html[lang="en"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(66px,5.8vw,82px) !important;
    line-height: .92 !important;
    letter-spacing: -.06em !important;
  }
  html[lang="pl"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(58px,5.1vw,74px) !important;
    line-height: .94 !important;
    letter-spacing: -.052em !important;
  }
  html[lang="ar"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(54px,4.9vw,70px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width:680px) {
  html[lang="en"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(40px,11vw,48px) !important;
    line-height: .98 !important;
  }
  html[lang="pl"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(38px,10vw,44px) !important;
    line-height: 1 !important;
  }
  html[lang="ar"] :is(.sv-app-hero,.c9-hero,.cv-hero,.ep-hero,.lb-hero,.fr-hero,.ms-hero) h1 {
    font-size: clamp(36px,9.5vw,42px) !important;
    line-height: 1.28 !important;
  }
}
/* Arabic copy fit and logical alignment for shared component overrides. */
html[lang="ar"] .blog-brief h2{font-size:43px!important;line-height:1.3!important}
html[lang="ar"] body main h1{font-family:"IBM Plex Sans Arabic",sans-serif!important;letter-spacing:0!important}
@media(max-width:680px){html[lang="ar"] body .cv-gap .cv-head h2{font-size:34px!important}}
html[lang="ar"] body.product-story-page .product-story.story-design-structure :is(.story-block-head,.story-objections header,.story-faq header){text-align:right!important}
html[lang="ar"] .ep-event-content h2{font-size:38px!important;line-height:1.3!important}
html[lang="ar"] .c9-faq header h2{font-size:46px!important;line-height:1.25!important}
html[lang="ar"] .cv-gap .cv-head h2{font-size:48px!important;line-height:1.3!important}
@media(max-width:680px){html[lang="ar"] .article-next h2{font-size:27px!important;line-height:1.4!important}}