.mobile-app-promo {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    padding: 0 0 72px;
}
.mobile-app-copy { min-width: 0; align-self: start; }
.mobile-app-platform {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 12px 18px;
    border-radius: 100px;
    background: rgba(157, 240, 174, .1);
    color: var(--green);
    font-size: .8rem;
    line-height: 1.4;
    font-weight: 750;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.mobile-app-android { flex: none; }
.mobile-app-promo h2 {
    max-width: 850px;
    margin: 30px 0 24px;
    font-size: clamp(1.4rem, 2.45vw, 2.45rem);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -.035em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.mobile-app-description {
    max-width: 670px;
    margin: 0 0 36px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.75;
}
.mobile-app-qr {
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    max-width: 510px;
    margin: 0 0 18px;
    padding: 16px 22px 16px 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
}
.mobile-app-qr a { display: block; flex: none; border-radius: 8px; background: #fff; overflow: hidden; }
.mobile-app-qr img { display: block; width: 147px; height: 147px; }
.mobile-app-qr figcaption { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.mobile-app-store { display: inline-block; max-width: 100%; border-radius: 10px; }
.mobile-app-store img { display: block; width: 236px; max-width: 100%; height: auto; }
.mobile-app-promo a:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.mobile-app-store:hover { opacity: .85; }
.mobile-app-showcase {
    position: relative;
    width: 70%;
    justify-self: center;
    aspect-ratio: 1 / 1.18;
    max-height: 476px;
    border-radius: 32px;
    background: radial-gradient(ellipse at 55% 45%, rgba(157, 240, 174, .17), transparent 68%), var(--panel);
    isolation: isolate;
}
.mobile-app-phone {
    position: absolute;
    width: 44%;
    padding: 6px;
    border: 2px solid #59616a;
    border-radius: 34px;
    background: linear-gradient(110deg, #1b232b, #07090c 45%, #424a52);
    box-shadow: 5px 6px 0 #20262d, 12px 24px 30px rgba(7, 18, 34, .24);
}
.mobile-app-phone::before {
    content: "";
    position: absolute;
    top: 20%;
    right: -5px;
    width: 3px;
    height: 42px;
    border-radius: 3px;
    background: #59616a;
}
.mobile-app-phone-back { top: 8%; left: 11%; transform: rotate(-11deg); }
.mobile-app-phone-front { top: 22%; right: 9%; transform: rotate(10deg); z-index: 1; }
.mobile-app-phone-screen { position: relative; overflow: hidden; border-radius: 26px; background: #fff; }
.mobile-app-phone-back .mobile-app-phone-screen { background: #f8f7fc; }
.mobile-app-phone-status { display: flex; justify-content: space-between; padding: 10px 15px 6px; color: #19252b; font: 600 9px/1 system-ui, sans-serif; }
.mobile-app-phone-status::after { content: ""; position: absolute; top: 9px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #12171c; box-shadow: inset 0 0 0 2px #29343e; }
.mobile-app-phone img { display: block; width: 100%; height: auto; }
.mobile-app-phone-screen::after { content: ""; display: block; width: 28%; height: 3px; margin: 9px auto; border-radius: 3px; background: #27323b; }
body.public-appearance-light .mobile-app-platform { background: #e8f4ed; }
body.public-appearance-light .mobile-app-showcase { background: radial-gradient(ellipse at 55% 45%, #dcefe4, transparent 70%), #f3f6f8; }
@media (max-width: 1000px) {
    .mobile-app-promo { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 0 0 48px; }
    .mobile-app-promo h2 { max-width: 800px; font-size: clamp(1.4rem, 3.85vw, 2.38rem); }
    .mobile-app-showcase { max-width: 392px; justify-self: center; }
}
@media (max-width: 480px) {
    .mobile-app-platform { padding: 10px 14px; font-size: .7rem; }
    .mobile-app-promo h2 { margin: 24px 0 20px; }
    .mobile-app-description { font-size: 1rem; margin-bottom: 28px; }
    .mobile-app-qr { flex-direction: column; width: 100%; max-width: 100%; padding: 18px; gap: 12px; text-align: center; }
    .mobile-app-phone { padding: 4px; border-radius: 24px; }
    .mobile-app-phone-screen { border-radius: 18px; }
    .mobile-app-phone-status { padding: 9px 10px 5px; font-size: 7px; }
    .mobile-app-phone-status::after { top: 7px; }
    .mobile-app-phone-screen::after { margin: 6px auto; }
}