/* Glass finish for store buttons and article download links. */
:is(.store-buttons a.btn-ios, .store-buttons a.btn-android, a.play-button) {
  position: relative;
  isolation: isolate;
  color: #000;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 55%), transparent 65%),
    linear-gradient(170deg, rgb(255 255 255 / 72%), rgb(255 255 255 / 60%) 48%, rgb(255 255 255 / 76%));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  outline: 1px solid rgb(255 255 255 / 80%);
  outline-offset: -1px;
  transition: transform 180ms ease, background-color 180ms ease;
}

:is(.store-buttons a.btn-ios, .store-buttons a.btn-android, a.play-button)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 16% at 50% 0%, rgb(255 255 255 / 85%), transparent),
    radial-gradient(ellipse 60% 16% at 50% 100%, rgb(255 255 255 / 65%), transparent),
    linear-gradient(90deg, rgb(255 255 255 / 35%), transparent 12% 88%, rgb(255 255 255 / 35%));
}

:is(.store-buttons a.btn-ios, .store-buttons a.btn-android, a.play-button):hover { background-color: rgb(255 255 255 / 25%); }
:is(.store-buttons a.btn-ios, .store-buttons a.btn-android, a.play-button):active { transform: scale(0.98); }
:is(.store-buttons a.btn-ios, .store-buttons a.btn-android, a.play-button):focus-visible { outline: 2px solid white; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  :is(.store-buttons a.btn-ios, .store-buttons a.btn-android, a.play-button) { transition: none; }
}

/* Google Play retains its own green jelly tint. */
.store-buttons a.btn-android {
  background:
    radial-gradient(ellipse at 50% 0%, rgb(190 255 213 / 35%), transparent 65%),
    linear-gradient(170deg, rgb(71 255 154 / 72%), rgb(56 202 122 / 64%) 48%, rgb(40 173 102 / 76%));
  outline-color: rgb(207 255 227 / 80%);
}

.store-buttons a.btn-android:hover { background-color: rgb(123 255 173 / 25%); }

/* Flex avoids inline baseline space below the Bungee download label. */
a.play-button[href*="apps.apple.com"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a.play-button[href*="apps.apple.com"] span {
  top: 0;
  transform: translateY(-0.007em);
}