@layer components {
  /* A promise said as plainly and as large as the page allows, on the deep stage, over the
     brand's mark drawn faint and far larger than the screen expects. */
  .site-statement {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-9);
    padding: var(--space-13) var(--gutter-fluid);
    background-color: var(--color-stage);
    color: var(--color-stage-ink);
    text-align: center;
    isolation: isolate;
    overflow: clip;
  }

  .site-statement__mark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: calc(-1 * var(--z-raised));
    inline-size: var(--site-mark-size);
    block-size: var(--site-mark-size);
    color: var(--color-stage-mark);
    translate: -50% -50%;
  }

  .site-statement__lines {
    display: flex;
    flex-direction: column;
    font: var(--type-site-statement);
    letter-spacing: var(--tracking-display);
  }

  .site-statement__text {
    max-inline-size: var(--measure-site-lead);
    font: var(--type-site-lead);
    color: var(--color-stage-muted);
    text-wrap: pretty;
  }

  /* A button drawn for the deep stage: a hairline pill in the stage's ink, lit faintly on hover. */
  .site-statement .button {
    gap: var(--space-2);
    padding-inline: var(--space-8) var(--space-6);
    border-color: var(--color-stage-muted);
    background-color: transparent;
    color: var(--color-stage-ink);
  }

  @media (any-hover: hover) {
    .site-statement .button:hover {
      border-color: var(--color-stage-ink);
      background-color: var(--color-stage-hover);
    }
  }

  @media (width >= 900px) {
    .site-statement {
      gap: var(--space-10);
      padding-block: calc(2 * var(--space-13));
    }

    .site-statement__mark {
      inline-size: calc(2 * var(--site-mark-size));
      block-size: calc(2 * var(--site-mark-size));
    }

    .site-statement__lines {
      font: var(--type-site-statement-lg);
    }

    .site-statement__text {
      font: var(--type-site-lead-lg);
    }
  }
}