/* Canonical product-page heading template. Content remains product-specific. */
:root {
  --product-heading-h1: clamp(40px, 3.2vw, 44px);
  --product-heading-h2: clamp(36px, 3.4vw, 42px);
  --product-heading-feature: clamp(30px, 2.6vw, 36px);
  --product-heading-h1-line: 1.24;
  --product-heading-h2-line: 1.28;
  --product-heading-feature-line: 1.25;
}

.product-architecture [data-shared-component="product-hero"] h1,
.product-architecture .arch-hero h1,
main > .hero h1 {
  max-width: 720px;
  font-size: var(--product-heading-h1) !important;
  font-weight: 700;
  line-height: var(--product-heading-h1-line);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.product-architecture [data-shared-component="product-hero"][data-product="ltc"] h1 {
  font-size: clamp(38px, 3.1vw, 44px);
}

.product-architecture .arch-heading h2,
.product-architecture .arch-final-cta h2,
.product-architecture .copy-updated-head h2,
main > section .section-heading,
main > section .section-title,
main > .cta-section .cta-box h2 {
  font-size: var(--product-heading-h2);
  font-weight: 700;
  line-height: var(--product-heading-h2-line);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.product-architecture .arch-heading h2,
main > section .section-heading,
main > section .section-title {
  max-width: 860px;
}

.product-architecture .arch-feature-copy h2 {
  font-size: var(--product-heading-feature);
  font-weight: 700;
  line-height: var(--product-heading-feature-line);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (max-width: 767px) {
  :root {
    --product-heading-h1: 32px;
    --product-heading-h2: 28px;
    --product-heading-feature: 29px;
    --product-heading-h1-line: 1.28;
    --product-heading-h2-line: 1.38;
    --product-heading-feature-line: 1.3;
  }

  .product-architecture [data-shared-component="product-hero"] h1,
  .product-architecture .arch-hero h1,
  main > .hero h1 {
    max-width: none;
    letter-spacing: -0.025em;
  }

  .product-architecture [data-shared-component="product-hero"][data-product="ltc"] h1 {
    font-size: var(--product-heading-h1) !important;
  }

  .product-architecture .arch-heading h2,
  .product-architecture .arch-final-cta h2,
  .product-architecture .copy-updated-head h2,
  main > section .section-heading,
  main > section .section-title,
  main > .cta-section .cta-box h2 {
    letter-spacing: -0.015em;
  }
}