/* ─────────────────────────────────────────────────────────────
   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}

/* Homepage footer only: the app row and the share row sit as a matched
   pair in the right column, divided by a hairline. Two small favours,
   neither one shouting. Stacks below 560px. */
.foot-pair{
  display:flex;
  align-items:flex-start;
  gap:26px;
  margin:0 0 22px;
  padding:0 0 22px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.foot-pair > div + div{
  padding-left:26px;
  border-left:1px solid rgba(255,255,255,.13);
}
.foot-pair .social{margin-top:0}
@media (max-width:560px){
  .foot-pair{flex-direction:column;gap:0}
  .foot-pair > div + div{
    padding-left:0;border-left:0;
    margin-top:20px;padding-top:20px;
    border-top:1px solid rgba(255,255,255,.13);
  }
}

/* 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: the app module sits in its own band directly under the trust
   strip. That is below the photographic hero, on solid paper, so no plate is
   needed, and the band edge supplies the separation from the primary CTA
   that the spacing rule asks for. */
.app-band{
  border-top:1px solid #E8DFD0;
  border-bottom:1px solid #E8DFD0;
  background:#F4EDE0;
  margin-top:40px;
  padding:22px 0;
}
.app-band .wrap{
  max-width:1080px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
}
.app-band .app-eyebrow{margin:0 0 6px;color:#5A6172}
.app-band-line{margin:0;font-size:.95rem;color:#5A6172;max-width:52ch}
.app-band .app-badges img{height:44px}
@media (max-width:640px){
  .app-band{margin-top:28px;padding:20px 0}
  .app-band .wrap{gap:16px}
  .app-band .app-badges img{height:40px}
}