/* /ios skin - App Store look (system SF font, blue "GET" pill, squircle icon, hairline separators,
   horizontally scrolling info strip). 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--appstore {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --accent: #0071e3;        /* iOS-style blue, white text 4.7:1 (#007aff is only 4.0:1) */
  --accent-text: #6e6e73;
  --on-accent: #ffffff;
  --radius-btn: 980px;
  --radius-card: 18px;
  --radius-icon: 22.4%;
  --radius-shot: 18px;
  --title-weight: 700;
  --heading-weight: 700;
  letter-spacing: -.01em;
}
.store--appstore .app-hero__icon { box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .12); }
.store--appstore .btn { padding: 8px 24px; min-width: 96px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.store--appstore .section__title { font-size: 22px; }

/* info strip: small caps label on top, bold grey value below, hairline dividers */
.store--appstore .stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 10px; padding-bottom: 10px; }
.store--appstore .stats li { min-width: 110px; }
.store--appstore .stats__label { order: -1; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.store--appstore .stats__value { font-size: 19px; font-weight: 700; color: var(--muted); }

/* sections separated by hairlines like the App Store product page */
.store--appstore .page__main > .section + .section { border-top: 1px solid var(--line); padding-top: 20px; }
.store--appstore .card { background: var(--surface-2); border-color: transparent; }
.store--appstore .steps li::before { background: var(--brand-ink); }

/* icon left; title, GET pill, then the info strip (App Store order) */
.store--appstore .app-hero { align-items: start; }
.store--appstore .app-hero__cta { grid-column: 2; grid-row: 2; justify-items: start; gap: 4px; }
.store--appstore .stats { grid-row: 3; }
@media (max-width: 767px) {
  .store--appstore .app-hero__icon { width: 108px; height: 108px; grid-row: 1 / span 2; }
  .store--appstore .app-hero__title { font-size: 22px; }
}
@media (min-width: 768px) {
  .store--appstore .stats { justify-content: flex-start; }
  .store--appstore .stats li { flex: 0 0 auto; min-width: 140px; }
}
@media (min-width: 1024px) {
  .store--appstore .app-hero__icon { width: 200px; height: 200px; }
  .store--appstore .app-hero__title { font-size: 40px; }
  .store--appstore .app-hero__tagline { font-size: 20px; }
}