/* FR Music V16 — mobile composition pass
   Breaks the long vertical rhythm into compact editorial groupings. */

@media (max-width: 620px) {
  /* Header: compact controls, no oversized brand footprint */
  .site-header {
    height: 64px !important;
    padding: 0 14px !important;
  }
  .brand.brand-minimal.brand-saturn.brand-saturn-v14 {
    width: 72px !important;
    height: 38px !important;
    gap: 16px !important;
  }
  .brand-saturn-v14 .saturn-brand-mark {
    width: 38px !important;
    height: 34px !important;
    flex-basis: 38px !important;
  }
  .brand-saturn-v14 .saturn-home-arrow {
    display: none !important;
  }
  .header-actions { gap: 8px !important; }
  .theme-toggle,
  .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  /* Hero becomes a compact editorial composition instead of image > copy > buttons */
  .hero {
    min-height: 0 !important;
    padding: 82px 16px 34px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(118px, .95fr) !important;
    grid-template-areas:
      "eyebrow visual"
      "spotify visual"
      "title title"
      "copy copy"
      "actions actions" !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-items: end !important;
    gap: 8px 14px !important;
    overflow: hidden !important;
  }
  .hero-content { display: contents !important; }
  .hero .eyebrow {
    grid-area: eyebrow !important;
    align-self: end !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: .16em !important;
    max-width: 170px !important;
  }
  .hero .spotify-mark {
    grid-area: spotify !important;
    width: 28px !important;
    height: 28px !important;
    margin: 7px 0 0 !important;
  }
  .hero h1 {
    grid-area: title !important;
    font-size: clamp(43px, 13.3vw, 58px) !important;
    line-height: .89 !important;
    letter-spacing: -.065em !important;
    margin: 9px 0 0 !important;
    max-width: 100% !important;
  }
  .hero p {
    grid-area: copy !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
    margin: 7px 0 0 !important;
    max-width: 96% !important;
  }
  .hero-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin-top: 9px !important;
  }
  .hero-actions .button {
    width: auto !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .hero-visual.hero-photo-composition {
    grid-area: visual !important;
    width: 100% !important;
    min-height: 186px !important;
    height: 186px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
  .hero-phone-photo {
    inset: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.22) !important;
  }
  .hero-phone-photo img {
    object-position: 50% 50% !important;
  }
  .hero-planet {
    width: 58px !important;
    height: 58px !important;
    right: 8px !important;
    bottom: 8px !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.25) !important;
  }
  .hero-note { display: none !important; }

  /* Keep the reassurance strip short */
  .stats-strip { padding: 11px 0 !important; }
  .marquee { gap: 28px !important; }
  .marquee span { font-size: 11px !important; }

  /* General mobile rhythm */
  .section { padding: 42px 0 !important; }
  .wrapper { width: calc(100% - 28px) !important; }
  .section-grid { gap: 15px !important; }
  .section-copy { max-width: 100% !important; }
  .section h2 {
    font-size: clamp(36px, 10.6vw, 48px) !important;
    line-height: .93 !important;
    letter-spacing: -.055em !important;
  }
  .section p { line-height: 1.5 !important; }

  /* About: image and cards form one compact visual unit */
  .about-photo,
  .audience-photo {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 20px !important;
  }
  .story-panels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin-top: 10px !important;
  }
  .story-panel {
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .story-panel h3 { font-size: 18px !important; line-height: 1.02 !important; }
  .story-panel p { font-size: 12px !important; line-height: 1.42 !important; }

  /* Journey: two-column map instead of five cards in a long line */
  .process-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  .process-card {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .process-card:nth-child(5) { grid-column: 1 / -1 !important; }
  .process-card h3 { font-size: 17px !important; }
  .process-card p { font-size: 12px !important; line-height: 1.4 !important; }

  /* Audience stats and supporting proof sit in a compact 2x2 grid */
  .reach-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin-top: 10px !important;
  }
  .reach-card,
  .mini-panel,
  .value-card {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .reach-card strong { font-size: clamp(36px, 11vw, 50px) !important; }

  /* Campaign choices: denser cards, no full-width repetition */
  .pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  .pricing-card,
  .pricing-card.wide {
    grid-column: auto !important;
    padding: 17px !important;
    border-radius: 19px !important;
  }
  .pricing-card h3 { font-size: 19px !important; }
  .pricing-card p { font-size: 12px !important; }

  /* FAQ and final CTA stay concise */
  .faq-section { padding-block: 38px !important; }
  .faq-list { gap: 7px !important; }
  .faq-list details { padding: 0 !important; border-radius: 14px !important; }
  .faq-list summary { min-height: 43px !important; padding: 11px 14px !important; font-size: 12px !important; }
  .faq-list details p { padding: 0 14px 12px !important; font-size: 12px !important; }
  .faq-more { margin-top: 12px !important; }

  .final-art-grid { grid-template-columns: 1fr 128px !important; }
  .final-art-grid > div:first-child { padding: 30px 14px !important; }
  .final-art-grid h2 { font-size: clamp(31px, 8.9vw, 42px) !important; }
  .final-art-grid p { font-size: 13px !important; }
  .final-band-photo { min-height: 100% !important; height: auto !important; }
  .final-band-photo img { object-position: 56% center !important; }
}

@media (max-width: 390px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 112px !important;
    gap: 7px 10px !important;
  }
  .hero-visual.hero-photo-composition { height: 170px !important; min-height: 170px !important; }
  .hero h1 { font-size: clamp(40px, 12.6vw, 50px) !important; }
  .hero-actions { grid-template-columns: 1fr !important; }
  .hero-actions .button { width: 100% !important; }
  .final-art-grid { grid-template-columns: 1fr 105px !important; }
}