/* The Google Play badge and the App Store placeholder.
   Shared by the React site and the static printable pages, which link the copy that
   build_web.py drops in website/public/printables/ — edit here, never there. */
.play-badge-link {
  display: inline-block;
  line-height: 0;
  transition: transform 160ms ease;
}
.play-badge {
  display: block;
  width: 215px;
  height: auto;
}
.play-badge-link:hover,
.play-badge-link:focus-visible {
  transform: translateY(-2px);
}
.play-badge-link:focus-visible {
  border-radius: 10px;
  outline: 3px solid var(--vermillion);
  outline-offset: 3px;
}
/* Placeholder for the unreleased iOS listing. Deliberately NOT a lookalike of a real
   store badge: same footprint as the Play badge so the two read as a pair, but an
   outlined, ribboned button so nobody expects a download behind it. */
.store-soon {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  width: 215px;
  min-height: 83px;
  padding: 14px 18px;
  border: 1.5px dashed rgba(63, 76, 138, 0.42);
  border-radius: 12px;
  background: transparent;
  color: var(--indigo-700);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease;
}
.store-soon:hover,
.store-soon:focus-visible {
  border-color: var(--vermillion);
  border-style: solid;
  transform: translateY(-2px);
}
.store-soon:focus-visible {
  outline: 3px solid var(--vermillion);
  outline-offset: 3px;
}
.store-soon-lead {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.store-soon-name {
  display: block;
  font-size: 1.08rem;
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.store-soon-hint {
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.72;
}
.store-soon-ribbon {
  position: absolute;
  top: -10px;
  right: -6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--vermillion);
  color: white;
  font-size: 0.6rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.store-soon-dark {
  border-color: rgba(255, 255, 255, 0.38);
  color: white;
}

@media (max-width: 720px) {
  .store-soon { width: 100%; max-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .play-badge-link,
  .store-soon { transition: none; }
}