/* Mobile App page styles */
.mobile-app__title {
    color: var(--ink);
}

.mobile-app__pill {
    border-color: var(--border);
    background: var(--surface-raised);
    color: var(--ink-muted);
}

.mobile-app__meta {
    color: var(--ink-faint);
}

.app-device-frame {
    max-height: 580px;
    border-radius: 2.5rem;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.app-gradient-bg {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* The glow is sized for the screenshot, which shrinks with the viewport: at
   460px it would hang out of a phone-width page and force a horizontal scroll
   on the one page a phone user is most likely to open. */
@media (max-width: 575.98px) {
    .app-gradient-bg {
        width: 260px;
        height: 260px;
    }
}