/* qr.css — hover QR code on Play Store buttons (pointer devices only)
 *
 * The panel is moved to <body> and positioned with position:fixed by qr.js, so
 * ancestor overflow (e.g. .hero's hidden, which contains the floating doodles)
 * can never clip it. Visibility is JS-driven; this file is styling only.
 */
.qr-cta { display: inline-flex; }

.qr-cta__pop {
  position: fixed; left: 0; top: 0;
  transform: translate(-50%, 6px);
  z-index: 400; pointer-events: none;
  width: 172px; padding: 12px 12px 10px;
  background: #fff; border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--ink);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.qr-cta__pop.is-open {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}
.qr-cta__pop img {
  display: block; width: 100%; height: auto;
  background: #fff;
}
.qr-cta__pop span {
  display: block; margin-top: 8px;
  font-size: 0.7rem; font-weight: 800; line-height: 1.35; color: var(--ink);
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .qr-cta__pop { transition: none; }
}