/* Unified typographic scale for Dashboard and Mobile App pages (EN + PL).
   Sizes, weights, leading and tracking follow the master scale. Colors and font
   families deliberately stay on the existing Tawasol palette and typefaces:
   the page ground is light, so the dark-theme color tokens are not applied here.

   Breakpoints match the scale's sm/lg stops: 640px and 1024px.

   About `:not(#_):not(#__)`: the per-module stylesheets set sizes with !important from
   class-based selectors, which outrank plain type selectors no matter how many
   are chained. `:not(#_):not(#__)` adds ID-level weight without matching anything, so these rules win. Doubled because organization-usecases.css uses an ID selector. */

html body main {
  --pt-tight: -0.025em;
  --pt-relaxed: 1.625;
  --pt-measure: 672px;
}

/* ---- A. Section eyebrow / tag ------------------------------------------- */
html body main :is(.eyebrow, .sx-eyebrow, .cv-eyebrow, .sv-eyebrow, .ms-eyebrow,
                   .c9-eyebrow, .lb-eyebrow, .ep-eyebrow, .fr-eyebrow,
                   .ai-journey-eyebrow, [class$="-eyebrow"], [class$="-kicker"], .c9-hero-copy > .c9-label):not(#_):not(#__) {
  font-size: 12px !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* ---- G. Card body / paragraph text (base for every paragraph) ----------- */
html body main p:not(#_):not(#__) {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: var(--pt-relaxed) !important;
  overflow-wrap: break-word !important;
}

/* ---- D. Section H2 ------------------------------------------------------- */
html body main h2:not(#_):not(#__) {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: var(--pt-tight) !important;
  margin-bottom: 16px !important;
  overflow-wrap: break-word !important;
}

/* ---- F. Card / component H3 --------------------------------------------- */
html body main h3:not(#_):not(#__) {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: var(--pt-tight) !important;
  margin-bottom: 8px !important;
  overflow-wrap: break-word !important;
}

/* ---- E. Section subtitles / descriptions --------------------------------- */
html body main :is(.story-block-head, .sx-use-head, .sx-target-copy, .sx-reveal,
                   .mi-head) > p:not(#_):not(#__) {
  font-size: 14px !important;
  line-height: var(--pt-relaxed) !important;
  max-width: var(--pt-measure) !important;
  margin-bottom: 32px !important;
}

/* Hero H1 (B) and hero lead (C) are driven by product-hero-typography.js, which
   also enforces the line ceiling and the copy/visual grid. Kept there so a
   single place owns hero measurement. */

@media (min-width: 640px) {
  html body main h2:not(#_):not(#__) { font-size: 34px !important; }
  html body main h3:not(#_):not(#__) { font-size: 20px !important; }
  html body main p:not(#_):not(#__) { font-size: 16px !important; }
  html body main :is(.story-block-head, .sx-use-head, .sx-target-copy, .sx-reveal,
                     .mi-head) > p:not(#_):not(#__) { font-size: 16px !important; }
}

@media (min-width: 1024px) {
  html body main h2:not(#_):not(#__) { font-size: 40px !important; }
}

/* Long Library section headings must wrap at the larger shared size. */
html body main.lb-page h2 :is(span,em):not(#_):not(#__) {
  white-space: normal !important;
  max-width: 100%;
}