/* MoodPick pages on renoa.tr: the site's own stylesheet (/css/site.css) with MoodPick's purple as the one accent,
   plus a row of real screenshots. Light and dark follow prefers-color-scheme, like the rest of the site. */

:root {
  --accent: #6d3ee8;
  --accent-pressed: #5a2fd0;
  --accent-text: #6d3ee8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8b5cf6;
    --accent-pressed: #7c4ef0;
    --accent-text: #a78bfa;
  }
}

.brand img { border-radius: 7px; }
.cta .app-icon, .nf .app-icon { border-radius: 16px; }

/* Four real screens in a row (two per row on phones) */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin: 0; padding: 0; list-style: none; }
.shots .phone { width: 100%; max-width: 250px; padding: 7px; border-radius: 38px; }
.shots .phone img { border-radius: 31px; }
.shots figcaption { margin-top: 12px; }
@media (min-width: 900px) {
  .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
}

/* Data sources line under the FAQ */
.sources { margin-top: 28px; color: var(--text-2); font-size: 14px; max-width: 46rem; }