/* /ios page-only styles (MSW-348). Device frames live in devices.css. */

/* The App Store badge, larger, as the hero's primary action. */
.app-badge-lg { padding: 10px 22px; border-radius: 16px; gap: 12px; min-height: 60px; }
.app-badge-lg svg { width: 28px; height: 28px; }
.app-badge-lg small { font-size: 0.76rem; }
.app-badge-lg b { font-size: 1.25rem; }

@media (max-width: 900px) { .page-ios .trust-row { justify-content: center; } }

/* The two-app comparison. */
.app-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.app-card {
  display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius-lg); padding: 32px 28px;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.app-kicker { font-weight: 900; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grape); margin: 0 0 10px; }
.app-card h3 { margin-bottom: 8px; }
.app-rating { margin: 0 0 6px; color: var(--muted); font-size: 0.95rem; }
.app-rating strong { color: var(--ink); }
.app-card .check-list { flex: 1; margin-block: 20px 26px; }
.app-card .app-badge { align-self: flex-start; }
@media (max-width: 760px) { .app-pair { grid-template-columns: 1fr; } }

.page-ios .ios-need { margin-top: 36px; max-width: 760px; margin-inline: auto; }
.page-ios .ios-need .ph { white-space: nowrap; }