@layer components {
  .page-hero {
    position: relative;
    margin-block-start: calc(-1 * var(--header-height));
    padding-block-start: calc(var(--header-height) + var(--section-spacing-compact));
    padding-block-end: var(--section-spacing-compact);
    background-color: var(--color-canvas);
  }
  .page-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }
  .page-hero__title {
    margin: 0;
    font-size: var(--hero-title-size);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tighter);
  }
  .page-hero__subtitle {
    max-width: var(--text-measure);
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--line-height-snug);
    color: var(--color-ink-muted);
  }
  @media (min-width: 768px) {
    .page-hero {
      padding-block-start: calc(var(--header-height) + var(--section-spacing-default));
      padding-block-end: var(--section-spacing-default);
    }
    .page-hero__title {
      font-size: var(--hero-title-size-lg);
    }
    .page-hero__subtitle {
      font-size: var(--text-lg);
    }
  }
}