/* ─────────────────────────────────────────────────────────────
   App download modules — footer, hero, city pages.

   COMPLIANCE NOTES, read before editing:
   • The badge artwork is trademarked. Do not restyle, recolor,
     angle, crop, animate, or add hover transforms to it.
   • Apple requires the BLACK badge whenever a badge for another
     platform appears in the same layout. Google always sits
     beside it here, so black is the only correct variant.
   • Apple requires the App Store badge FIRST in the lineup.
   • Google requires its badge be no smaller than any other store
     badge in the layout. Both are set to equal height, and the
     Play badge's greater width follows from its aspect ratio.
     Do not shrink it to "balance" the widths.
   • Clear space is one quarter of badge height on every side.
     At 44px that is 11px. Nothing may cross it. The 12px gap
     below satisfies it.
   • google-play-black.png is the official artwork TRIMMED to its
     ink bounds. Google ships it with 41px of transparent padding
     baked in (646x250 file, 564x168 of actual badge), which made
     it render ~30px tall next to Apple's 44px. The pixels are
     untouched, only the empty margin is gone, and the clear space
     it represented is now enforced in CSS instead. The pristine
     download is kept alongside as google-play-black.source.png.
     Re-trim any replacement download the same way.
   • Minimum onscreen height is 40px.
   ───────────────────────────────────────────────────────────── */

.app-badges{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
.app-badges a{
  display:inline-block;
  line-height:0;
  border:0;
  text-decoration:none;
}
.app-badges img{
  height:44px;          /* clear space at this height = 11px */
  width:auto;
  display:block;
  max-width:100%;
}
@media (max-width:480px){
  .app-badges img{height:40px}   /* Apple/Google floor, do not go lower */
  .app-badges{gap:10px}
}

/* The footer block. Sits above the existing link row, set off by a
   hairline so it reads as a separate, quieter offer. */
.footer-app{
  margin:0 0 18px;
  padding:0 0 18px;
  border-bottom:1px solid rgba(128,128,128,.28);  /* legible on light and dark */
}
.app-eyebrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  opacity:.72;
  margin:0 0 11px;      /* one quarter of badge height */
  padding:0;
}
.app-line{
  font-size:14px;
  margin:0 0 11px;
  opacity:.85;
}
.footer-app--center .app-badges{justify-content:center}
.footer-app--center .app-eyebrow,
.footer-app--center .app-line{text-align:center}
.app-line{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:15px}

/* Required trademark credit. Apple's wording is mandated verbatim.
   Google's should be regenerated from their legal line generator
   (partnermarketinghub.withgoogle.com/tools/legal-line-generator)
   and pasted in verbatim if it differs from the line below. */
.app-legal{font-size:11px;line-height:1.55;opacity:.55;margin:16px 0 0;max-width:66ch}

/* /download only: the one page where the app is the primary action,
   so the lockups step up to 52px. Still floors at 40px on phones. */
.app-badges--lg img{height:52px}
@media (max-width:560px){ .app-badges--lg img{height:44px} }
@media (max-width:480px){ .app-badges--lg img{height:40px} }

/* Homepage hero. Solid paper background here, no photograph, so the badges
   need no plate. A hairline and the mono eyebrow keep them clearly secondary
   to Find your Circle. */
.hero-app{
  margin:26px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--line,#E8DFD0);
  max-width:420px;
}
.hero-app .app-eyebrow{margin:0 0 10px}
@media (max-width:480px){ .hero-app{margin-top:20px;padding-top:16px} }