/* Reading rhythm: preserve deliberate heading, card and navigation alignment. */
/* Content uses its containing column, rather than a second character-based cap.
   Controls, navigation, media and the columns themselves keep their sizing. */
html body main :is(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote) {
  max-width: none !important;
  max-inline-size: none !important;
  text-wrap: wrap !important;
  overflow-wrap: break-word;
}
html body main p { text-wrap: pretty; }
html body main.co-page { --spark-copy-size: inherit; --spark-intro-size: var(--spark-copy-size); }
html body main :is(.journey-diagonal-copy, .cx-prose, .co-story-copy, .dry-port-intro-copy, .why-scroll-item) p {
  text-align: start;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
html body main .spark-journey-panel p:not(.spark-journey-period) {
  line-height: 1.6 !important;
  margin-block: 0 1em;
}
@media (min-width: 1440px) {
  html body main :is(.journey-diagonal-copy, .cx-prose, .co-story-copy, .dry-port-intro-copy) p:not(.spark-journey-period):not(.eyebrow) {
    text-align: justify;
    text-align-last: start;
    hyphens: manual;
  }
}
/* Public-site copy scale. Keep controls, metrics and map annotations independent. */
:root {
  --spark-copy-size: 1.3125rem;
  --spark-intro-size: var(--spark-copy-size);
}

html body main p:not(:where(
  .eyebrow, .hero-tag, .cx-kicker, .fact-label, .spark-journey-period,
  .master-plan-kicker, .master-plan-legend, .error-msg, .toast,
  .placeholder-note, .copyright,
  [data-master-plan] p, .connectivity-map p, .spark-journey-stat p,
  nav p, button p, [role="tooltip"] p, .why-scroll-item p
)) {
  /* Override legacy page-ID typography without changing its colors or spacing. */
  font-size: var(--spark-copy-size) !important;
  line-height: 1.5 !important;
}

/* Introductory paragraphs beneath page and section headings. */
html body main :is(
  .page-hero-desc, .hero-desc,
  .section-head .section-desc, .section-desc, .section-intro,
  .cx-prose > p:first-child,
  .spark-journey-intro p:not(.eyebrow):not(.spark-journey-period)
) {
  font-size: var(--spark-intro-size) !important;
  line-height: 1.5 !important;
}

/* Prominent descriptions in the animated commercial-advantage slides. */
html body main .why-scroll-item p {
  font-size: var(--spark-copy-size);
  line-height: 1.5;
}

/* Narrative bullet points use the same reading scale as paragraphs. */
html body main :is(.spark-journey-panel, .feature-card, .mvv-card) li {
  font-size: var(--spark-copy-size) !important;
  line-height: 1.5 !important;
}

/* Keep enlarged journey copy reachable inside the existing pinned panels. */
@media (min-width: 901px) {
  html body .journey-diagonal-trial .journey-diagonal-copy {
    min-height: 0;
    justify-content: flex-start;
    justify-content: safe center;
    overflow-y: auto;
  }
  html body .journey-diagonal-copy > * { flex-shrink: 0; }
}

@media (min-width: 801px) and (max-width: 1100px) {
  :root { --spark-copy-size: 1.3125rem; }
}

@media (max-width: 800px) {
  :root { --spark-copy-size: 1.0625rem; }
}

/* Journey has bounded timeline slides: keep its narrative below the site-wide scale. */
.spark-journey-intro {
  --spark-copy-size: 1.3125rem;
  --spark-intro-size: var(--spark-copy-size);
}
.spark-journey-panel { --spark-copy-size: clamp(1.1875rem, calc(1.7vw - 1px), 1.4375rem); }
.spark-journey-panel:has(li:nth-child(4)) {
  --spark-copy-size: clamp(1.1875rem, calc(1.55vw - 1px), 1.3125rem);
}
html body main .spark-journey-panel li {
  font-size: clamp(1.0625rem, calc(1.4vw - 1px), 1.1875rem) !important;
  line-height: 1.5 !important;
}
@media (max-width: 800px) {
  .spark-journey-intro { --spark-copy-size: 1.0625rem; }
  .spark-journey-panel { --spark-copy-size: 1.0625rem; }
  .spark-journey-panel:has(li:nth-child(4)) { --spark-copy-size: 1.0625rem; }
}

/* Shared editorial hierarchy. UI labels, metrics, news cards and map headings
   retain their compact component scales. Applies equally to Arabic and English. */
:root {
  --spark-title-page: 3rem;
  --spark-title-home: 3.5rem;
  --spark-title-section: 2.25rem;
  --spark-title-card: 1.625rem;
}
html body main h1 {
  font-size: var(--spark-title-page) !important;
  line-height: 1.2 !important;
}
html body main #home-intro h1 {
  font-size: var(--spark-title-home) !important;
}
html body main h2:not(:where(
  .spark-news-card h2, [data-master-plan] h2, .connectivity-map h2,
  [role="dialog"] h2, [role="tooltip"] h2, .why-scroll-flow > h2
)) {
  font-size: var(--spark-title-section) !important;
  line-height: 1.25 !important;
}
html body main .why-scroll-item h3 {
  font-size: var(--spark-title-section) !important;
  line-height: 1.25 !important;
}
html[dir="rtl"] body main :is(h1,h2,h3) { line-height: 1.45 !important; }
html body main :is(.mvv-card, .feature-card, .bz-service-body, .bz-benefit-card) h3 {
  font-size: var(--spark-title-card) !important;
  line-height: 1.3 !important;
}
@media (min-width: 801px) and (max-width: 1100px) {
  :root { --spark-title-page: 2.875rem; --spark-title-home: 3.25rem; --spark-title-section: 2rem; }
}
@media (max-width: 800px) {
  :root {
    --spark-title-page: 2rem;
    --spark-title-home: 2.25rem;
    --spark-title-section: 1.75rem;
    --spark-title-card: 1.375rem;
  }
}