/*
 * Shared typography system
 *
 * Text sizes follow roles rather than individual sections:
 * display -> page title -> section title -> subsection -> card title
 * lead -> body -> compact copy -> metadata.
 *
 * Small labels inside charts and interface mockups intentionally keep their
 * compact scale so that the illustrations still read as illustrations.
 */
:root {
  --type-display: clamp(40px, 4.05vw, 60px);
  --type-page-title: clamp(40px, 4.05vw, 60px);
  --type-case-title: clamp(38px, 3.65vw, 52px);
  --type-long-title: clamp(34px, 3.2vw, 46px);
  --type-section-title: clamp(30px, 2.8vw, 44px);
  --type-subsection-title: clamp(24px, 2vw, 32px);
  --type-card-title: clamp(19px, 1.45vw, 23px);
  --type-lead: clamp(17px, 1.2vw, 19px);
  --type-body: 16px;
  --type-card: 15px;
  --type-compact: 14px;
  --type-meta: 12.5px;
  --type-button: 16px;

  --leading-display: 1.02;
  --leading-title: 1.08;
  --leading-section: 1.15;
  --leading-card: 1.28;
  --leading-lead: 1.58;
  --leading-body: 1.65;

  /* Keep legacy variables connected to the same scale. */
  --type-h1: var(--type-page-title);
  --type-h2: var(--type-section-title);
  --type-h3: var(--type-card-title);
  --type-h4: clamp(18px, 1.15vw, 21px);
  --site-h1: var(--type-h1);
  --site-h2: var(--type-h2);
  --site-h3: var(--type-h3);
  --site-body: var(--type-body);
  --site-small: var(--type-compact);
  --site-button-font-size: var(--type-button);
}

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

/* Editorial and informational page titles. */
html body main > :is(
  .hero:not(#top),
  .about-hero,
  .articles-hero,
  .insights-hero,
  .policy-hero
) h1,
html body.case-index-page .case-index-title,
html body [data-thank-title] {
  font-size: var(--type-page-title) !important;
  line-height: var(--leading-title) !important;
  letter-spacing: -0.025em !important;
}

html body.audit-page .audit-hero h1 {
  font-size: var(--type-case-title) !important;
  line-height: var(--leading-title) !important;
  letter-spacing: -0.025em !important;
}

/* Homepage display title uses two deliberate levels. */
html body .hero#top #hero-title .headline-main {
  font-size: var(--type-display) !important;
  line-height: var(--leading-display) !important;
  letter-spacing: -0.03em !important;
}

html body .hero#top #hero-title .headline-support {
  font-size: clamp(26px, 2.65vw, 38px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
}

/* Case-study titles share one scale; the unusually long event title is the
   only smaller variant and still follows the same page-title hierarchy. */
html body.case-detail-page.campaign-reach-page .reach-intro.cs-hero h1,
html body.case-detail-page.conversion-data-page .case-hero.cs-hero h1,
html body.case-detail-page.attribution-case-page .attribution-hero.cs-hero h1,
html body.case-detail-page.smart-bidding-page .campaign-reach-hero.cs-hero h1,
html body.case-detail-page.migration-showcase-page .migration-showcase-hero.cs-hero h1 {
  font-size: var(--type-case-title) !important;
  line-height: var(--leading-title) !important;
  letter-spacing: -0.025em !important;
}

html body.case-detail-page.launch-case-page.airport-case-page .airport-case-hero.cs-hero h1 {
  font-size: var(--type-long-title) !important;
}

/* Shared section and card-heading rhythm on the main marketing pages. */
html body :is(
  .about-section,
  .articles-page,
  .insights-page,
  .article-content,
  .policy-content,
  .audit-page
) .section-head h2,
html body :is(.about-hero, .articles-hero, .insights-hero) + section h2 {
  font-size: var(--type-section-title) !important;
  line-height: var(--leading-section) !important;
}

html body .hero#top .hero-lead,
html body :is(.about-hero, .articles-hero, .insights-hero, .audit-hero) :is(.hero-lead, .lead),
html body.case-index-page .case-index-lead,
html body.case-detail-page :is(.reach-lead, .case-lead, .campaign-reach-copy > p:not(.campaign-kicker), .attribution-hero-copy > p, .migration-showcase-copy > p) {
  font-size: var(--type-lead) !important;
  line-height: var(--leading-lead) !important;
}

/* Cards may be compact, but their explanatory copy should never feel like
   metadata. */
html body .common-problems#common-problems .problem-card h3,
html body #services .service-package-card h3,
html body .lead-approach#approach .journey-step h3,
html body .process-section .process-card h3 {
  font-size: var(--type-card-title) !important;
  line-height: var(--leading-card) !important;
}

html body .common-problems#common-problems .problem-card p,
html body #services .service-package-card .service-body p,
html body .lead-approach#approach .journey-step p,
html body .process-section .process-card p {
  font-size: var(--type-card) !important;
  line-height: 1.58 !important;
}

html body #services .service-package-card .service-list,
html body #services .service-package-card .service-list li {
  font-size: var(--type-compact) !important;
  line-height: 1.55 !important;
}

html body #services .service-package-card .button {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

html body .testimonial-card .testimonial-read {
  font-size: var(--type-compact) !important;
  line-height: 1.2 !important;
}

/* Case-study reading text stays distinct from small status labels. */
html body.case-index-page .case-index-card-copy p {
  font-size: var(--type-compact) !important;
  line-height: 1.55 !important;
}

html body.case-index-page .case-index-step-card p,
html body.case-detail-page.migration-showcase-page .migration-benefit-row p {
  font-size: var(--type-compact) !important;
  line-height: 1.55 !important;
}

html body.case-detail-page.smart-bidding-page .smart-manual-band li,
html body.case-detail-page.smart-bidding-page .campaign-issue-list li,
html body.case-detail-page.smart-bidding-page .campaign-context-list dd {
  font-size: var(--type-compact) !important;
  line-height: 1.55 !important;
}

html body.case-detail-page.smart-bidding-page :is(
  .smart-finding-cards p,
  .smart-strategy-flow span,
  .smart-action-list p,
  .smart-table-row,
  .smart-results-grid span,
  .smart-results-grid small
) {
  font-size: var(--type-compact) !important;
  line-height: 1.5 !important;
}

html body.case-detail-page.smart-bidding-page .smart-readiness-strip span {
  font-size: 12px !important;
}

/* Actions use one readable size. Compact chips and carousel controls are
   intentionally excluded. */
html body :is(
  a.button,
  button.button,
  .button-primary,
  .button-secondary,
  .btn-primary,
  .btn-secondary,
  button[type="submit"]
) {
  font-size: var(--type-button) !important;
  line-height: 1.2 !important;
}

@media (max-width: 700px) {
  :root {
    --type-display: clamp(34px, 9.4vw, 46px);
    --type-page-title: clamp(36px, 11vw, 44px);
    --type-case-title: clamp(34px, 10vw, 42px);
    --type-long-title: clamp(32px, 9.2vw, 38px);
    --type-section-title: clamp(28px, 8vw, 34px);
    --type-subsection-title: clamp(22px, 6.4vw, 28px);
    --type-card-title: clamp(19px, 5vw, 22px);
    --type-lead: 17px;
    --type-body: 16px;
    --type-card: 15px;
    --type-compact: 14px;
    --type-button: 15.5px;
  }

  html body .hero#top #hero-title .headline-support {
    font-size: clamp(20px, 5.8vw, 26px) !important;
  }
}