/* Download-the-app call to action, shared by the Alicante landing pages.
   Pairs with the block in each page's markup (see pages/alicante/README.md).

   BADGE SIZING — the two files are not comparable as delivered. Apple's artwork
   fills its canvas (1284 of 1284px); Google bakes its mandated clear space into
   the PNG (168 of 250px, 41px of transparency a side). At an equal CSS height
   Google's pill renders a third smaller, which also breaks Google's own rule
   that its badge not be smaller than the badges beside it. Each is therefore
   scaled by its own artwork-to-canvas ratio, exactly as
   communication/reels/src/components/StoreBadges.tsx does. Re-measure if an
   asset is replaced:
     python3 -c "from PIL import Image; im=Image.open('play-store.png'); \
                 print(im.size, im.getbbox())"
   Both are trademarked artwork: scale proportionally, never redraw, recolour,
   crop or rotate. */

.app-cta {
  --app-cta-pill: 48px;
  background: var(--white, #fff);
  border: 1px solid rgba(11, 77, 181, 0.14);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(4, 20, 55, 0.06);
  padding: 24px 22px;
  margin: 34px 0 8px;
  text-align: center;
}

.app-cta h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  color: var(--blue-700, #0b4db5);
  text-wrap: balance;
}

.legal .app-cta p {
  margin: 0 auto 20px;
  max-width: 32rem;
  line-height: 1.65;
  color: rgba(10, 42, 102, 0.85);
  text-wrap: balance;
}

.app-cta__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.app-cta__badges a {
  display: inline-flex;
  border-radius: 10px;
}

.app-cta__badges a:focus-visible {
  outline: 3px solid var(--blue-700, #0b4db5);
  outline-offset: 4px;
}

.app-cta__badges img {
  display: block;
  width: auto;
}

/* 1284 of 1284 — Apple's file has no padding. */
.app-cta__badge--apple img { height: var(--app-cta-pill); }

/* 250 of 168 — Google's clear space, baked in. */
.app-cta__badge--play img { height: calc(var(--app-cta-pill) * 250 / 168); }

@media (max-width: 420px) {
  .app-cta { --app-cta-pill: 42px; padding: 20px 16px; }
}