.support-link .icon {
  color: var(--color-heart);
}

/* On a phone the top bar has room for the heart alone; its aria-label still names it. */
@media (max-width: 37.5rem) {
  .support-link {
    inline-size: var(--size-glass-button);
    padding: 0;
  }

  .support-link .glass-button__label {
    display: none;
  }
}

.support-callout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background:
    radial-gradient(
      ellipse 40rem 12rem at 0 0,
      var(--color-supporters-glow),
      var(--color-clear) 70%
    ),
    var(--color-launcher-surface);
  border: var(--border-width-hairline) solid var(--color-launcher-separator);
  border-radius: var(--radius-card);
}

.support-callout__badge {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--size-glass-button-large);
  block-size: var(--size-glass-button-large);
  color: var(--color-white);
  background: linear-gradient(
    to bottom,
    var(--color-heart-badge-top),
    var(--color-heart-badge-bottom)
  );
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-heart-badge);
}

.support-callout__text {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: var(--space-1);
}

.support-callout__title,
.support-callout__body {
  margin: 0;
}

.support-callout__title {
  font-size: var(--font-size-apple-title-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-apple-title);
  letter-spacing: var(--tracking-tight);
}

.support-callout__body {
  font-size: var(--font-size-apple-subheadline);
  line-height: var(--leading-apple-subheadline);
  color: var(--color-label-muted);
}

.support-callout__link {
  flex: none;
  padding-inline: var(--space-6);
}

/* The support banner floats where the install banner does (install.css), with the heart in place of
   the app icon. While the install banner is up it waits, so only one asks at a time. */
.support-badge {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--size-install-icon);
  block-size: var(--size-install-icon);
  color: var(--color-white);
  background: linear-gradient(
    to bottom,
    var(--color-heart-badge-top),
    var(--color-heart-badge-bottom)
  );
  border-radius: var(--radius-pill);
}

.support-badge .icon {
  inline-size: 50%;
  block-size: 50%;
}

:root.has-install-banner .install--support {
  display: none;
}