/* ==========================================================================
   RentOS — Download CTA card
   --------------------------------------------------------------------------
   Desktop 123:6562 (920x350 at 5715) · mobile 123:9965 (355x225 at 15).

   Note the asymmetric radius: 50 on three corners and 20 on the bottom-right
   (@ 123:6563 / 123:7566) — it is not a uniform rounding.
   ========================================================================== */

.download {
    background-color: #edefec;          /* continues the band */
    /* Figma mobile: FAQs ends 4996, this starts 5066 -> 70. */
    padding-top: 70px;
}

/* ------------------------------------------------------------------ Mobile */
.download__card {
    position: relative;
    width: calc(100% - 30px);           /* 355 in a 390 frame, at left 15 */
    max-width: 355px;
    margin: 0 auto;
    /* Figma: title is bottom-anchored at 113 so 2 lines at lh28 start at 57;
       CTAs run 133..173; card is 225 -> 52 below.
       57 + 56 + 20 + 40 + 52 = 225. */
    padding: 57px 20px 52px;
    background-color: var(--brand-dark-green);
    border-radius: 50px 50px 20px 50px; /* tl tr br bl @ 123:7566 */
}

.download__title {
    max-width: 312px;                   /* @ 123:7579 */
    font-family: var(--font-screen-title);
    font-weight: var(--fw-medium);
    font-size: 26px;
    line-height: 28px;
    color: #e2f6d5;
}

/* White pills on the dark card @ 123:8003 / 123:8004 */
.download__ctas {
    display: flex;
    gap: 10px;                          /* 152 - 142 */
    margin-top: 20px;                   /* title bottom 113 -> CTAs 133 */
}

.download__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 12px;
    background-color: var(--white);
    border: 0;
    border-radius: 30px;
    font-size: 14px;
    line-height: 17px;
    font-weight: var(--fw-semibold);
    color: var(--brand-dark-green);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .2s ease;
}

.download__cta:hover {
    opacity: .88;
}

.download__cta--app {
    gap: 6px;
    padding: 0 10px;
}

.download__cta--app img {
    width: 10.588px;
    height: 15px;
}

/* ----------------------------------------------------------------- Desktop */
@media screen and (min-width: 992px) {
    /* Figma: FAQs ends 5655, this starts 5715 -> 60. */
    .download {
        padding-top: 60px;
    }

    .download__card {
        width: min(var(--content-width-cta), calc(100% - 80px));
        max-width: none;
        min-height: 350px;              /* @ 123:6562 */
        padding: 0;
    }

    /* Headline is bottom-anchored at 221 in Figma (justify-end + -translate-y)
       with lh 56.607, so two lines start at ~108. */
    .download__title {
        position: absolute;
        left: 4.67%;                    /* 43 / 920 */
        top: 108px;
        max-width: 61.7%;               /* 568 / 920 */
        font-size: 51px;                /* @ 123:6759 */
        line-height: 56.607px;
    }

    .download__link {
        position: absolute;
        left: 4.67%;                    /* 43 @ 123:6757 */
        top: 234px;
        padding: 0;
        background: none;
        border: 0;
        font-size: 17px;                /* @ 123:6757 */
        line-height: 20px;
        font-weight: var(--fw-medium);
        color: #e2f6d5;
        text-decoration: underline;
        cursor: pointer;
    }

    .download__link:hover {
        opacity: .85;
    }

    /* QR 204x204 at inset 18.86%/9.46%/22.86%/68.37% @ 123:6564 */
    .download__qr {
        position: absolute;
        left: 68.37%;
        top: 18.86%;
        width: 22.17%;
        text-align: center;
    }

    .download__qr img {
        width: 100%;
        height: auto;
    }

    .download__qr-caption {
        margin-top: 14px;               /* QR ends 270, caption bottom 327 */
        font-family: var(--font-screen-title);
        font-weight: var(--fw-semibold);
        font-size: 19px;                /* @ 123:6758 */
        line-height: 1.2;
        color: #e2f6d5;
    }

}

/* ==========================================================================
   Floating Download pop-up — 123:9744
   --------------------------------------------------------------------------
   160x215, right-anchored, accent background, same asymmetric radius as the
   Download card. Scroll-triggered past the hero and dismissible (see the
   annotation on I123:9744;123:9547). Desktop only.
   ========================================================================== */

.dl-pop {
    position: fixed;
    right: 26px;                        /* 186 - 160 @ 123:9744 */
    bottom: 26px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    height: 215px;
    padding: 14px 28px 20px;            /* QR inset 17.5% / 16.88% */
    background-color: var(--brand-accent);
    border-radius: 50px 50px 20px 50px;
    box-shadow: 0 8px 28px rgba(30, 27, 24, .16);
    /* Hidden until the scroll trigger fires */
    opacity: 0;
    transform: translateY(12px) scale(.96);
    transition: opacity .35s var(--ease-out-quint),
                transform .35s var(--ease-overshoot);
    pointer-events: none;
}

.dl-pop[hidden] {
    display: none;
}

.dl-pop.is-shown {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.dl-pop__title {
    font-family: var(--font-screen-title);
    font-weight: var(--fw-semibold);
    font-size: 18px;                    /* @ I123:9744;123:9742 */
    line-height: 1.2;
    color: var(--brand-dark-green);
    text-align: center;
}

.dl-pop__qr {
    width: 105.8px;                     /* inset 25.58% of 215 */
    height: auto;
    margin-top: 10px;
}

.dl-pop__close {
    margin-top: 8px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;                    /* @ I123:9744;123:9741 */
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: var(--brand-dark-green);
    text-decoration: underline;
    cursor: pointer;
}

.dl-pop__close:hover {
    opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
    .dl-pop {
        transition: none;
        transform: none;
    }
}