/* Layout shared by internal pages. The home page intentionally does not load this file. */
@media (min-width: 769px) {
  .page {
    width: min(100%, 1672px);
    max-width: none;
    padding: 0 clamp(32px, 5.7vw, 88px) 32px;
  }

  .page > main > .hero {
    min-height: 0;
    padding: 76px 0 52px;
    gap: clamp(36px, 4vw, 72px);
    align-items: start;
  }

  .page > main > .hero > * {
    min-width: 0;
  }

  .page > main > .hero h1,
  .hero:has(.hero-inner) h1 {
    font-size: clamp(42px, 5.2vw, 68px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
  }

  .hero:has(.hero-inner) {
    padding-top: 0 !important;
  }

  .hero:has(.hero-inner) .hero-inner {
    padding-top: 75px !important;
  }
}

@media (max-width: 768px) {
  .page {
    width: 100%;
    padding: 0 16px 24px;
  }

  .page > main > .hero {
    min-height: 0;
    padding: 42px 0 40px;
    gap: 24px;
    align-items: start;
  }

  .page > main > .hero > * {
    min-width: 0;
  }

  .page > main > .hero h1,
  .hero:has(.hero-inner) h1 {
    font-size: clamp(42px, 5.2vw, 68px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
  }

  .hero:has(.hero-inner) {
    padding-top: 0 !important;
  }

  .hero:has(.hero-inner) .hero-inner {
    padding-top: 34px !important;
  }
}

/* Match the home page's own horizontal gutters and headline breakpoints. */
@media (min-width: 1101px) {
  .page {
    padding-inline: 88px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .page {
    padding-inline: 24px;
  }

  .page > main > .hero {
    grid-template-columns: 1fr;
    padding-top: 30px;
  }

  .hero:has(.hero-inner) .hero-inner {
    padding-top: 29px !important;
  }
}

@media (min-width: 561px) and (max-width: 768px) {
  .page {
    padding-inline: 24px;
  }

  .page > main > .hero {
    padding-top: 30px;
  }

  .hero:has(.hero-inner) .hero-inner {
    padding-top: 29px !important;
  }
}

@media (max-width: 560px) {
  .page > main > .hero h1,
  .hero:has(.hero-inner) h1 {
    font-size: clamp(38px, 9.5vw, 47px) !important;
  }

  .page > main > .hero {
    padding-top: 35px;
  }

  .hero:has(.hero-inner) .hero-inner {
    padding-top: 34px !important;
  }
}