/* ==========================================================================
   pages/app.css: /app/ coming-soon page (art-src/comps/app.png).
   Values come from tokens.css; breakpoints mirror base.css section 16.
   ========================================================================== */

.app-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
}
.app-hero__text { container-type: inline-size; min-width: 0; }
.app-hero h1 { margin: 0 0 var(--space-4); font-size: clamp(var(--fs-h3), 9cqi, var(--fs-h1)); }
.app-hero .t-lead { margin: 0 0 var(--space-5); color: var(--_ink); }
.app-hero__art { position: relative; padding-left: var(--space-8); }
.app-hero__art .phone-outline { width: 11rem; }
.app-hero__sporo {
    position: absolute;
    left: calc(-1 * var(--space-4));
    bottom: calc(-1 * var(--space-3));
    z-index: var(--z-base);
    width: 9rem;
    height: auto;
}

.app-planned h2,
.app-web h2 { margin: 0 0 var(--space-5); }
.app-feature { align-items: center; text-align: center; }
.app-feature__icon { margin-top: var(--space-5); }
.app-feature .t-muted { font-size: var(--fs-small); line-height: var(--lh-title); }
.app-planned__note { margin: var(--space-5) 0 0; text-align: center; font-size: var(--fs-caption); }
.app-web .card .t-muted { font-size: var(--fs-small); line-height: var(--lh-title); }

/* phone */
@media (max-width: 767px) {
    .app-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .app-hero__art { justify-self: center; padding-left: var(--space-7); }
    .app-hero__art .phone-outline { width: 8.5rem; }
    .app-hero__sporo { width: 7rem; }
    .app-planned .grid--3,
    .app-web .grid--3 { --_cols: 1; }
}