/* Homepage music banner (EN + FR homepages only). Builds on the shell's .collab-hook strip
   (teal top rule, soft-teal wash, serif navy title, flex row); no new colour token. */
.music-hook { padding: 24px 0; background: linear-gradient(100deg, var(--accent-soft) 0%, #ffffff 72%); }
.music-hook-grid { gap: 18px 32px; }
.music-hook-copy { display: flex; align-items: center; gap: 18px; flex: 1 1 440px; min-width: 0; }
.music-hook-icon { display: block; flex: 0 0 auto; width: 52px; height: 52px; }
.music-hook .collab-hook-title { margin: 0 0 4px; letter-spacing: 0; }
.music-hook .collab-hook-sub { max-width: 62ch; }
.music-hook .btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 999px; }

/* Stack below the width where the button would otherwise drop under the copy at its natural size. */
@media (max-width: 780px) {
  .music-hook { padding: 22px 0; }
  .music-hook-copy { align-items: flex-start; gap: 14px; flex-basis: 100%; }
  .music-hook-icon { width: 42px; height: 42px; margin-top: 2px; }
  .music-hook .btn { display: block; width: 100%; text-align: center; }
}