/* Approved centered hero for the stacked phone and tablet layouts. */
@media (min-width: 801px) {
  [data-hero-theme="purple"] .hero-band {
    min-height: 760px;
    height: var(--hero-fit-height, auto);
  }

  [data-hero-theme="purple"] .bold-hero {
    --fit-hero-to-height: 1;
    /* Scale the complete composition, including its spacing and phone frame. */
    transform: scale(var(--hero-fit-scale, 1));
    transform-origin: center top;
  }
}

@media (min-width: 1001px) {
  [data-hero-theme="purple"] .bold-copy {
    container-type: inline-size;
    /* Fill the copy column sooner, while retaining the full-size 92px ceiling. */
    --hero-heading-size: min(92px, 16cqw);
  }

  [data-hero-theme="purple"] .bold-copy .intro {
    font-size: 22px;
  }

  [data-hero-theme="purple"] .bold-copy .store-buttons {
    gap: 14px;
  }

  [data-hero-theme="purple"] .bold-copy .store-button {
    min-width: 190px;
    min-height: 70px;
    padding: 14px 20px;
    gap: 14px;
  }

  [data-hero-theme="purple"] .bold-copy .store-button strong {
    font-size: 19px;
  }

  [data-hero-theme="purple"] .bold-copy .store-button small {
    font-size: 10px;
  }

  [data-hero-theme="purple"] .bold-copy .store-button svg {
    width: 25px;
  }
}

@media (min-width: 801px) and (max-width: 1000px) {
  [data-hero-theme="purple"] .hero-food {
    width: clamp(260px, calc(55vw - 180px), 360px);
    right: calc(50% + 60px);
    bottom: -40px;
  }
}

@media (max-width: 800px) {
  [data-hero-theme="purple"] .hero-header,
  [data-hero-theme="purple"] .hero-tagline {
    display: none;
  }

  [data-hero-theme="purple"] .bold-hero {
    padding-block: 40px 36px;
    gap: 32px;
  }

  [data-hero-theme="purple"] .bold-copy {
    container-type: inline-size;
    /* The longest headline line fills about 94% of the available copy width. */
    --hero-heading-size: 15.6cqw;
    text-align: center;
  }

  [data-hero-theme="purple"] .hero-wordmark {
    display: block;
    width: calc(var(--hero-heading-size) * 231 / 92 * .9);
    margin-top: 12px;
    margin-inline: auto;
    margin-bottom: 16px;
  }

  [data-hero-theme="purple"] .bold-copy h1 {
    font-size: var(--hero-heading-size);
  }

  [data-hero-theme="purple"] .bold-copy .intro {
    margin-inline: auto;
    text-wrap: balance;
  }

  [data-hero-theme="purple"] .bold-copy .store-buttons {
    /* Add another page gutter on each side of the heavier button row. */
    --hero-button-inset: 22px;
    width: min(calc(100% - 2 * var(--hero-button-inset)), 480px);
    margin-inline: auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  [data-hero-theme="purple"] .bold-copy .store-button {
    flex: 1 1 150px;
    min-width: 0;
    min-height: 68px;
    justify-content: center;
    padding: 14px clamp(10px, 3cqw, 18px);
    gap: clamp(8px, 2.2cqw, 12px);
    text-align: left;
  }

  [data-hero-theme="purple"] .bold-copy .store-button strong {
    font-size: clamp(16px, 4.2cqw, 19px);
    white-space: nowrap;
  }

  [data-hero-theme="purple"] .bold-copy .store-button small {
    font-size: clamp(8px, 2.1cqw, 10px);
  }

  [data-hero-theme="purple"] .bold-copy .store-button svg {
    width: clamp(20px, 5.5cqw, 26px);
  }

  [data-hero-theme="purple"] .bold-stage {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 12px 0;
    margin-inline: auto;
    justify-content: center;
  }

  [data-hero-theme="purple"] .bold-stage > .showcase-phone {
    width: min(320px, 100%);
    margin: 0;
  }

  [data-hero-theme="purple"] .hero-food {
    display: none;
  }
}

@media (max-width: 580px) {
  [data-hero-theme="purple"] .bold-copy .store-buttons {
    --hero-button-inset: 20px;
  }

  [data-hero-theme="purple"] .hero-wordmark {
    margin-bottom: 12px;
  }
}

@media (max-width: 360px) {
  [data-hero-theme="purple"] .bold-copy .store-buttons {
    --hero-button-inset: 16px;
  }
}