/* Shared editorial scale. Loaded last so every section uses the same hierarchy.
   Compact labels within the 3D illustrations retain their own display scale. */
:root {
  --type-hero: 4.5rem;
  --type-section: 3.5rem;
  --type-step: 2.5rem;
  --type-card: 1.25rem;
  --type-body: 1rem;
  --type-label: .75rem;
  --leading-body: 1.75;
  --leading-heading: 1.2;
}

body {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
}

.hero h1 {
  max-width: 100%;
  font-size: var(--type-hero);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.045em;
  white-space: normal;
}

.journey .journey-title,
.audiences-section h2,
.benefits h2 {
  font-size: var(--type-section);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: -.035em;
}

.journey .chapter h3 {
  margin-bottom: 24px;
  font-size: var(--type-step);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: -.03em;
}

.journey .source-item summary,
.journey .action-flow h4,
.journey .mini-metrics strong,
.audience-card h3,
.benefit-item h3,
.closing-heading {
  font-size: var(--type-card);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.hero-description,
.journey .chapter > p,
.journey .source-item p,
.journey .source-copy p,
.journey .analysis-panel p,
.journey .action-flow p,
.journey .mini-metrics span:not(.metric-symbol),
.journey .quality-example,
.audience-context,
.benefit-item p,
.closing-description,
.closing-nav > a,
.closing-contact address a {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
}

/* Labels and supporting information share one size on every screen. */
.eyebrow,
.hero .eyebrow,
.journey .step-number,
.journey .step-name,
.journey .format-heading,
.journey .format-list span,
.journey .chapter > p.chapter-footnote,
.journey .chapter > p.choose-label,
.journey .quality-warning small,
.journey .action-flow li > span,
.audience-organizations,
.benefit-top span,
.footer .footer-meta {
  font-size: var(--type-label);
  line-height: 1.6;
}

.main-nav {
  font-size: var(--type-label);
  line-height: 1.5;
}

.hero .button,
.journey .chapter > .button,
.closing .button,
.journey .case-button,
.journey .text-link,
.hero-bottom .hero-process a {
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.5;
}

.header .button-header {
  font-size: var(--type-label);
  line-height: 1.5;
}

.hero-bottom .micro-label {
  max-width: 100%;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  white-space: normal;
}

/* Let larger text wrap naturally instead of compressing it to fit. */
.hero-copy,
.journey .chapters,
.journey .chapter {
  min-width: 0;
}

.hero-buttons {
  flex-wrap: wrap;
  gap: 16px;
}

.journey .chapter-heading { margin-bottom: 24px; }
.journey .source-copy p + p { margin-top: 16px; }
.journey .source-list .icon { flex-shrink: 0; }
.journey .action-flow,
.journey .mini-metrics { gap: 24px; }
.journey .action-flow p { margin-top: 8px; }
.journey .mini-metrics > div { align-items: start; row-gap: 8px; }
.journey .quality-example { max-width: 440px; }
.journey .quality-example > div { align-items: baseline; }
.journey .quality-dot { align-self: center; }
.journey .quality-example .icon { align-self: center; }
.journey .action-flow li > span { width: 28px; height: 28px; }
.audience-card h3 { min-height: 2.7em; }
.audience-organizations { min-height: 3.2em; }
.benefit-item p { margin-top: 16px; }
.journey .case-button { text-align: left; }

@media (max-width: 1150px) {
  .hero-bottom {
    height: auto;
    min-height: 100px;
    padding: 18px 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-bottom .micro-label,
  .hero-process { flex-basis: 100%; }
}

@media (min-width: 681px) and (max-width: 1150px) {
  :root {
    --type-hero: 3.5rem;
    --type-section: 3rem;
    --type-step: 2.25rem;
  }
}

@media (max-width: 680px) {
  :root {
    --type-hero: 3rem;
    --type-section: 2.375rem;
    --type-step: 2rem;
    --type-card: 1.125rem;
  }

  .main-nav { font-size: var(--type-body); }
  .hero-bottom .micro-label { font-size: var(--type-body); }
  .journey .chapter h3 { margin-bottom: 20px; }
  .journey .chapter-heading { margin-bottom: 20px; }
  .audience-card h3,
  .audience-organizations { min-height: 0; }
}

@media (max-width: 360px) {
  .header { gap: 10px; }
  .header .brand,
  .header .brand img { width: 108px; }
  .header .button-header { padding-inline: 8px; }
  .header .button-header .icon { display: none; }
}