/* App download pages: /download/, /live-music-app/, /live-music-near-me/,
   /app-for-musicians/ and /how-to-get-gigs-in-perth/ (2026-10-05).

   Loaded NEXT TO site.css, nav.css and stage.css, never instead of them. It
   adds only what those pages need and the rest of the site does not: the
   store button row, the phone frame a screenshot sits in, and the two-column
   split that puts copy beside a phone. Everything else (hero, trust, cards,
   steps, prose, faq, cta-band) is the site's own component set, so these pages
   read as the same system as every other tab page. */

/* The store row sits where a hero's .btn-row sits. A device that matches one
   of the stores gets that button lit by /assets/app-downloads.js, which never
   navigates on its own; the links are real links whether or not it runs. */
.store-row { align-items: center; }
.btn.is-preferred {
  background: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(255, 216, 43, 0.28), 0 0 34px rgba(255, 216, 43, 0.45);
}
.btn.ghost.is-preferred { background: transparent; color: var(--gold-bright); border-color: var(--gold-bright); }
.store-note {
  margin: 18px auto 0;
  max-width: 44em;
  font-size: 0.86rem;
  color: var(--muted);
  text-align: center;
}
.store-note a, .phone-cap a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.25s ease, text-shadow 0.25s ease; }
.store-note a:hover, .phone-cap a:hover { color: var(--gold-bright); text-shadow: 0 0 14px rgba(255, 216, 43, 0.45); }
.store-note a:focus-visible, .phone-cap a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; }

/* Copy beside a phone. The phone takes the narrower column and centres in it,
   and below 760px the two stack with the phone underneath the words, so the
   claim is read before the picture is looked at. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 44px;
  align-items: center;
}
.split > .prose { margin-bottom: 0; }
.split.flip > .phone-col { order: -1; }
.phone-col { display: flex; flex-direction: column; align-items: center; margin: 0; }
.phones { display: flex; justify-content: center; align-items: flex-start; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
.phones .phone-col { flex: 0 1 260px; }

/* The frame is drawn, not photographed: a dark slab with a rounded edge and a
   hairline, so the screenshot reads as a screen and not as a sticker. */
.phone {
  width: min(300px, 82%);
  padding: 8px;
  background: #0B0D12;
  border: 1px solid var(--line-soft);
  border-radius: 38px;
  box-shadow:
    0 34px 70px -34px rgba(240, 166, 33, 0.42),
    0 20px 40px -24px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}
.phone:hover {
  border-color: rgba(240, 166, 33, 0.7);
  box-shadow:
    0 40px 80px -34px rgba(240, 166, 33, 0.62),
    0 20px 40px -24px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 30px; background: #F6F3EE; }
.phone-cap {
  margin: 14px auto 0;
  max-width: 34ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* A short strip of facts under a heading, for the things a store listing says
   in its sidebar: platform, price, minimum OS. */
.facts { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 6px 0 26px; padding: 0; list-style: none; }
.facts li {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 7px 12px 5px;
  transition: color 0.25s ease, border-color 0.25s ease, text-shadow 0.25s ease;
}
.facts li:hover { color: var(--gold-bright); border-color: var(--gold); text-shadow: 0 0 12px rgba(255, 216, 43, 0.5); }

/* The split beats the stage layer's prose timing on narrow screens if the
   phone comes first, hence the order rule above and this collapse. */
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split.flip > .phone-col { order: 0; }
  .phone { width: min(280px, 86%); }
  .phones { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .phone, .phone:hover { transition: none; transform: none; }
}