/* SongShrink pages only: the app's own violet and lime on top of site.css.
   Loaded after site.css on /songshrink/ and its subpages; every rule is scoped
   to body.songshrink so no other page changes. Contrast (WCAG): white on
   #4a2ef0 7.1, lime #b4e64a on #4a2ef0 4.9 and on #3e0e96 8.4, ink on lime
   11.4, #4a2ef0 on paper 6.5, #2a14a8 on #ece8ff 10.0. */
.songshrink {
  --ss-violet: #4a2ef0;
  --ss-violet-deep: #3e0e96;
  --ss-lime: #b4e64a;
  --ss-chip: #ece8ff;
  --ss-chip-ink: #2a14a8;
}

.songshrink h1 span { color: var(--ss-violet); }

/* Hero: the real iPhone screen in the site's phone frame, on violet and lime. */
.songshrink .product-scene::before { background: linear-gradient(145deg, rgba(79,54,255,0.38), rgba(180,230,74,0.45)); }
.songshrink .sun-orbit { border-color: rgba(74,46,240,0.22); }
.songshrink .sun-orbit::before { background: var(--ss-lime); }
.songshrink .sun-orbit::after { background: var(--ss-violet); }

/* Feature chips: violet for fitting the song, lime for finishing it. */
.songshrink .feature-fit .feature-chip { background: var(--ss-violet); }
.songshrink .feature-finish .feature-chip { background: var(--ss-lime); }
.songshrink .feature-finish .feature-chip svg { stroke: var(--ink); }

/* "Who it's for": the store graphics' scoreboard chip as each sport's label. */
.songshrink .score-chip {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ss-chip-ink);
  background: var(--ss-chip);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Three App Store screenshots. */
.songshrink .shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-bottom: 110px;
}
.songshrink .shots-heading { grid-column: 1 / -1; margin-bottom: 14px; }
.songshrink .shots-heading h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.045em; }

/* Contact card in the app's violet, eyebrow in lime (as on the store graphics). */
.songshrink .contact-card {
  background: linear-gradient(135deg, var(--ss-violet), var(--ss-violet-deep));
  box-shadow: 0 28px 70px rgba(62,14,150,0.24);
}
.songshrink .contact-card .eyebrow { color: var(--ss-lime); }

/* Header and footer links: a 44px tap target without moving the layout. */
.songshrink nav a,
.songshrink footer div a { padding: 11px 2px; margin: -11px -2px; }

/* Links between the SongShrink pages, under each subpage's eyebrow. */
.songshrink .sub-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 28px; }
.songshrink .sub-nav a { padding: 10px 0; color: var(--grape-deep); font-size: 14px; font-weight: 750; text-decoration: none; }
.songshrink .sub-nav a:hover { text-decoration: underline; }
.songshrink .sub-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

@media (max-width: 900px) {
  .songshrink .shots { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (max-width: 640px) {
  .songshrink h1 { font-size: clamp(44px, 12.5vw, 70px); }
  .songshrink .product-scene { padding-right: 0; padding-block: 18px 6px; }
  .songshrink .studio-strip { gap: 4px 16px; }
  .songshrink .studio-strip span { display: none; }
  .songshrink .shots { grid-template-columns: 1fr; gap: 28px; padding-bottom: 80px; }
  .songshrink .shots .product-shot { max-width: 320px; margin-inline: auto; }
}