/* ==========================================================================
   app-band.css — "Download the My Laurus App" band, placed above the footer
   site-wide. Light/white background to break up the run of navy sections
   (CTA banner → app band → footer) at the bottom of the page. Brand-led, with
   Leo the lion, store badges, and QR codes.
   ========================================================================== */
.app-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
/* Thin orange top rule — the sanctioned accent, and it separates the white band
   from whatever sits above it (a navy CTA banner or white page content). */
.app-band::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--color-orange), #ffbf66);
}
.app-band__inner {
  display: grid;
  gap: var(--space-3);
  align-items: center;
  padding-block: clamp(var(--space-5), 4vw, var(--space-8));
  text-align: center;
}
@media (min-width: 760px) {
  .app-band__inner { grid-template-columns: auto 1fr; gap: var(--space-6); text-align: left; }
}

.app-band__leo {
  width: clamp(120px, 20vw, 220px);
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 14px 26px rgb(8 33 65 / 0.18));
}

.app-band__content h2 { color: var(--color-primary); font-size: var(--text-3xl); margin-bottom: var(--space-1); }
.app-band__content p { color: var(--color-text-muted); max-width: 54ch; margin: 0 auto var(--space-3); }
/* Keep the eyebrow on brand-accent blue (the paragraph rule above would
   otherwise win on specificity and mute it). */
.app-band .eyebrow { color: var(--color-accent); }
@media (min-width: 760px) { .app-band__content p { margin-inline: 0; } }

.app-band__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
@media (min-width: 760px) { .app-band__cta { justify-content: flex-start; } }

/* Store badges — official-style black badges read well on white. */
.app-store-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.store-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 54px; padding: 0.5rem 1.1rem;
  background: #000000;
  border-radius: 11px;
  color: #ffffff; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store-badge:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.store-badge__logo { width: 26px; height: 26px; flex-shrink: 0; }
.store-badge__text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.store-badge__text small { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }
.store-badge__text strong { font-size: 1.05rem; font-weight: var(--weight-semibold); }

/* QR codes — for desktop visitors to scan; hidden on small screens (tap badges). */
.app-qr { display: none; gap: var(--space-3); }
@media (min-width: 1024px) { .app-qr { display: flex; } }
.app-qr figure { margin: 0; text-align: center; }
.app-qr img {
  width: 92px; height: 92px; display: block;
  background: #ffffff; padding: 7px; border-radius: 10px;
  border: 1px solid var(--color-border);
}
.app-qr figcaption { margin-top: 0.35rem; font-size: var(--text-xs); color: var(--color-text-muted); }