/* =============================================================================
   Typography component layer — maps scattered page CSS to central tokens.
   Import LAST (via site-unified.css or homepage link) so tokens win stale px.
   ============================================================================= */

/* ── Hero subtitle width (sitewide) ── */
.hero-desc,
.page-hero-banner-desc,
.about-hero-desc,
.contact-hero-desc,
p.lead.contact-hero-desc {
  max-width: var(--hero-desc-max) !important;
}

/* ── About page — module copy (wins stale px in about-premium) ── */
.about-page .sec-desc,
.about-overview-intro .sec-desc,
.about-industry-head .sec-desc,
.about-values-head .sec-desc,
.about-business-head .sec-desc,
.about-careers-teaser-body .sec-desc {
  font-size: var(--text-lead) !important;
  line-height: var(--lh-body) !important;
}

.about-page .values-item-body p,
.about-page .about-careers-mini-card span,
.about-page .about-careers-teaser-list li {
  font-size: var(--text-body-sm) !important;
  line-height: var(--lh-body) !important;
}

.about-page .values-item-body h3,
.about-page .business-line-body h3,
.about-page .about-careers-mini-card strong {
  font-size: var(--text-h4) !important;
  line-height: 1.35 !important;
}

.about-page .about-nav-btn {
  font-size: var(--text-body-sm) !important;
}

.about-page .journey-panel-list {
  font-size: var(--text-body) !important;
  line-height: var(--lh-body) !important;
}

.about-page .journey-year {
  font-size: var(--text-body-sm) !important;
}

.about-page .business-all-link {
  font-size: var(--text-link) !important;
}

/* ── Knowledge page — intro & pillar copy ── */
.ke-desc,
.ke-pillar-desc,
.ke-library-desc,
.ke-faq-desc,
.ke-paths-desc {
  font-size: var(--text-lead) !important;
  line-height: var(--lh-body) !important;
}

.ke-desc {
  max-width: min(680px, 52ch) !important;
}

.ke-pillar-desc {
  max-width: min(680px, 100%) !important;
}

.ke-pillar-subtitle {
  font-size: var(--text-body-sm) !important;
  line-height: 1.5 !important;
}

.impact-desc,
.global-section .global-desc,
.intro-desc,
.cat-desc,
.about-overview-desc,
.news-section-desc,
.sus-pillar-desc {
  font-size: var(--text-lead) !important;
  line-height: var(--lh-body) !important;
}

/* ── Card titles (was 16–17px) ── */
.sn-top-card__name,
.news-card-title,
.article-card-title,
.ke-card-title,
.pd-related-name,
.product-card-title {
  font-size: var(--text-h4) !important;
  line-height: 1.35 !important;
}

/* ── Card body copy (was 13–14px) ── */
.sn-top-card__desc,
.news-card-excerpt,
.ke-card-desc,
.cat-pv6-desc,
.pd-card-desc,
.scenario-content p,
.cert-card p,
.oem-step p,
.trust-text span {
  font-size: var(--text-body-sm) !important;
  line-height: var(--lh-body) !important;
}

/* ── Card / trust labels (was 11–13px) ── */
.trust-text strong,
.intro-stat-label,
.sn-top-stat__label,
.global-map-info-role {
  font-size: var(--text-body-sm) !important;
  line-height: 1.45 !important;
}

/* ── Eyebrow / category tags — floor at 13px (was 10–12px) ── */
.cat-index,
.cat-tag,
.cert-tag,
.oem-tag,
.scenarios-tag,
.sn-home-news-card__cat,
.knowledge-cat,
.news-card-cat,
.oem-step-tag,
.cat-explorer-panel-count,
.knowledge-other-cat,
.cat-pv6-meta,
.cat-filter-chip {
  font-size: var(--text-label) !important;
}

/* ── Secondary CTAs & links ── */
.pv6-btn,
.ke-card-link,
.cat-cta,
.sub-card-link,
.knowledge-link,
.sn-top-card__cta {
  font-size: var(--text-btn-sm) !important;
}

.hero-btn-primary,
.hero-btn-secondary,
.page-hero-banner-actions .hero-btn-primary,
.page-hero-banner-actions .hero-btn-secondary,
.contact-submit,
.global-inquiry-submit,
.cp-btn {
  font-size: var(--text-btn) !important;
}

/* ── Breadcrumb & footer meta ── */
.breadcrumb-bar .breadcrumb {
  font-size: var(--text-meta) !important;
}

.footer-col-heading {
  font-size: var(--text-body) !important;
}

.footer-col a {
  font-size: var(--text-body-sm) !important;
}

.footer-bottom p,
.footer-bottom-links a {
  font-size: var(--text-meta) !important;
}

/* ── Form fields (iOS zoom-safe 16px) ── */
.contact-field label,
.global-inquiry-field label,
.cp-field label,
.form-field label {
  font-size: var(--text-body-sm) !important;
}

.contact-field input,
.contact-field select,
.contact-field textarea,
.global-inquiry-field input,
.global-inquiry-field select,
.global-inquiry-field textarea,
.cp-field input,
.cp-field select,
.cp-field textarea,
.search-form .search-input,
.news-search input {
  font-size: var(--text-input) !important;
}

/* Header pill search — smaller than form inputs */
.header .search-input {
  font-size: 15px !important;
}

/* ── Showcase / video band subhead ── */
.who-subhead {
  font-size: var(--text-hero-desc) !important;
  line-height: var(--lh-hero-desc) !important;
  max-width: var(--hero-desc-max) !important;
}

/* ── Dropdown menu ── */
.dd-title {
  font-size: var(--text-label) !important;
}

.dd-link,
.nav-dropdown a {
  font-size: var(--text-body-sm) !important;
}

@media (max-width: 768px) {
  .breadcrumb-bar .breadcrumb {
    font-size: var(--text-meta) !important;
  }
}

/* =============================================================================
   v2.1 — Sitewide font upgrade (balanced): floor extreme small sizes to 14px
   and pull remaining hardcoded px in news-premium / home inline into tokens.
   ============================================================================= */

/* ── News sidebar card heading (was 11px) ── */
.article-sidebar-card h4 {
  font-size: var(--text-label) !important;
}

/* ── News category badges (were 9px) — floor to 14px ── */
.news-page .news-featured-main-content .news-cat-badge,
.news-page .news-card-meta .news-cat-badge,
.article-page .article-related .news-cat-badge {
  font-size: var(--text-label) !important;
  letter-spacing: 0.08em !important;
}

/* ── Home inline decorative labels (were 11–12px) — floor to 14px ── */
.mega-note,
.hero-scroll,
.stat-sublabel,
.global-map-info-hint,
.global-map-info-note,
.global-map-info-type,
.global-map-marker-label {
  font-size: var(--text-label) !important;
}

/* ── Home section eyebrow labels (were 12px) — floor to 14px ── */
.products-head .sec-tag,
.impact-label,
.global-label {
  font-size: var(--text-label) !important;
}

/* Logical alignment: short section titles follow writing direction (LTR left / RTL right) */
.sn-top-products__title,
.global-head,
.global-foot,
.who-showcase-content,
.contact-phones-head,
.contact-location-list span,
.business-foot,
.article-page .article-title,
.article-page .article-lead,
.article-page .article-body-inner p,
.article-page .article-body-inner h2,
.ke-audience-card,
.search-scope-menu button,
.cat-explorer-area-card,
.cat-explorer-strip-footer,
.cat-sidebar-link,
.products-hub-pv6 .pv6-link,
.sus-achievement-item-head,
.sus-standards .sus-iso-head,
.sus-office-actions-table th,
.sus-office-actions-table td,
.sus-pillar-topic figcaption,
.industry-site-tab,
.pd-spec-table th,
.pd-spec-table td,
.pd-order-table th,
.pd-order-table td {
  text-align: start;
}

.article-page .article-lead {
  border-left: none;
  padding-left: 0;
  border-inline-start: 3px solid var(--zd-rose, #C8106A);
  padding-inline-start: 20px;
}

html[dir="rtl"] .who-showcase-overlay {
  background: linear-gradient(270deg,
    rgba(0, 16, 40, .55) 0%,
    rgba(0, 16, 40, .28) 36%,
    rgba(0, 16, 40, .06) 58%,
    transparent 72%);
}

html[dir="rtl"] .global-map-bg::before {
  background: linear-gradient(270deg,
    rgba(246, 248, 251, .97) 0%,
    rgba(246, 248, 251, .9) 16%,
    rgba(246, 248, 251, .42) 30%,
    rgba(246, 248, 251, .08) 44%,
    transparent 54%);
}

@media (max-width: 1024px) {
  html[dir="rtl"] .global-map-bg::before {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .72) 36%,
      rgba(255, 255, 255, .15) 52%,
      transparent 68%);
  }
}

html[dir="rtl"] .business-all-link::after {
  content: "←";
}

html[dir="rtl"] .sn-top-card__cta svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .cat-sidebar-link::before {
  left: auto;
  right: 0;
}

.impact-text {
  padding-left: 0;
  padding-right: 0;
  padding-inline-end: 40px;
}
@media (max-width: 1024px) {
  .impact-text {
    padding-inline-end: 0;
  }
}