/* Home page mobile-app promotion; all selectors are scoped to this section. */
.mobile-app-promo.fp-mobile-promo { padding: 40px 0 72px; }

.fp-mobile-promo .promo-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .85fr);
    grid-template-areas: "copy phone" "actions phone";
    align-items: center;
    gap: 24px 36px;
    padding: clamp(32px, 4.4vw, 60px);
    border: 1px solid var(--fp-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, var(--fp-bg) 42%, color-mix(in srgb, var(--primary) 5%, var(--fp-bg)));
    box-shadow: 0 10px 30px rgb(54 45 174 / 8%);
    overflow: hidden;
    text-align: left;
}

.fp-mobile-promo .promo-content-left { grid-area: copy; align-self: end; max-width: none; padding: 0; margin: 0; }
.fp-mobile-promo .promo-pill { color: var(--secondary); font-size: .8rem; letter-spacing: .13em; margin-bottom: 18px; }
.fp-mobile-promo .promo-heading { max-width: 680px; margin: 0 0 20px; color: var(--fp-dark); font-size: clamp(2rem, 3.3vw, 3.2rem); line-height: 1.12; letter-spacing: -.035em; }
.fp-mobile-promo .promo-heading span { color: var(--secondary); white-space: nowrap; }
.fp-mobile-promo .promo-subtext { max-width: 690px; margin: 0; color: var(--fp-text); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; }
.fp-mobile-promo-assurance { margin: 8px 0 24px; color: var(--fp-dark); font-weight: 700; line-height: 1.5; }
.fp-mobile-promo-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.fp-mobile-promo-benefits li { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 70px; padding: 12px; border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--fp-bg)); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 5%, var(--fp-bg)); color: var(--fp-dark); font-size: .83rem; font-weight: 700; line-height: 1.3; }
.fp-mobile-promo-benefits svg, .fp-mobile-promo-benefits i { flex: 0 0 30px; width: 30px; height: 30px; color: var(--primary); }
.fp-mobile-promo-benefits svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fp-mobile-promo-benefits i { font-size: 30px; line-height: 30px; text-align: center; }
.fp-mobile-promo .promo-content-right { grid-area: phone; align-self: center; min-width: 0; }
.fp-mobile-promo .promo-phone-img { display: block; width: auto; max-width: 90%; height: auto; max-height: 490px; object-fit: contain; transform: rotate(-5deg); }
.fp-mobile-promo-actions { grid-area: actions; align-self: start; }
.fp-mobile-promo .store-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 0; }
.fp-mobile-promo .btn-store-img { width: 150px; height: 48px; }
.fp-mobile-promo a:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

@media (max-width: 1024px) {
    .fp-mobile-promo .promo-card { gap: 24px; padding: 36px; }
    .fp-mobile-promo-benefits { grid-template-columns: 1fr; }
    .fp-mobile-promo-benefits li { min-height: 52px; }
}

@media (max-width: 900px) {
    .mobile-app-promo.fp-mobile-promo { padding: 28px 0 48px; }
    .fp-mobile-promo .promo-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "phone" "actions"; gap: 24px; padding: 26px 22px; text-align: left; }
    .fp-mobile-promo .promo-heading { font-size: clamp(2rem, 8vw, 2.6rem); }
    .fp-mobile-promo .promo-subtext { margin: 0; }
    .fp-mobile-promo-assurance { margin-bottom: 20px; }
    .fp-mobile-promo-benefits { grid-template-columns: 1fr; gap: 8px; }
    .fp-mobile-promo .promo-phone-img { max-width: 100%; max-height: 350px; transform: none; }
    .fp-mobile-promo .btn-store-img { width: 150px; max-width: 100%; }
}