/* /android skin - Material 3 store look (system Roboto, green filled Install, 8px buttons, outlined cards).
   Store-neutral colours only: none of these hex values may equal a role in the theme manifest "colors"
   (this file is NOT in cssFiles; brand accents live in store-base.css). */
.store--play {
  --font: Roboto, system-ui, "Segoe UI", Arial, sans-serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --text: #1f1f1f;
  --muted: #5f6368;
  --line: #dadce0;
  --accent: #01875f;        /* Play-style install green, white text 4.5:1 */
  --accent-text: #01875f;
  --on-accent: #ffffff;
  --radius-btn: 8px;
  --radius-card: 16px;
  --radius-icon: 20%;
  --radius-shot: 8px;
  --title-weight: 500;
  --heading-weight: 500;
}
.store--play .btn { letter-spacing: .01em; }
.store--play .app-hero__cta .btn { width: 100%; }
.store--play .section__title { font-size: 22px; }
.store--play .feature__icon { border-radius: 14px; }
.store--play .card { background: var(--bg); }
.store--play .steps li::before { border-radius: 10px; }

@media (min-width: 768px) {
  .store--play .app-hero__cta .btn { width: auto; }
}
/* Play desktop: big title left, large icon on the right */
@media (min-width: 1024px) {
  .store--play .app-hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text icon" "cta icon" "stats stats"; column-gap: 48px; }
  .store--play .app-hero__icon { grid-area: icon; width: 200px; height: 200px; align-self: start; }
  .store--play .app-hero__text { grid-area: text; }
  .store--play .app-hero__cta { grid-area: cta; grid-column: auto; }
  .store--play .stats { grid-area: stats; grid-column: auto; justify-content: flex-start; }
  .store--play .stats li { flex: 0 0 auto; padding: 4px 28px; }
  .store--play .stats li:first-child { padding-left: 0; }
  .store--play .app-hero__title { font-size: 52px; line-height: 1.1; }
  .store--play .app-hero__tagline { font-size: 18px; margin-top: 8px; }
}