/* ==========================================================================
   RentOS — Ask RentOS
   --------------------------------------------------------------------------
   Desktop 123:6483 (1432x400 at 244,3160) · mobile 123:9959 (390x556).

   The four bubbles overhang the blue card on both sides (desktop lefts 25 and
   122 against a card starting at 216, and 985/1012 against it ending at 1216),
   so they are positioned against the SECTION box, not the card. Their offsets
   come in as CSS vars from the markup, in % of that box.
   ========================================================================== */

.ask {
    background-color: #edefec;          /* continues the Product/Features band */
    /* Figma mobile: Features ends 2899.34, this section starts 2973 -> 73.7,
       then the card sits 25 further in (2998). */
    padding-top: 73.7px;
}

/* flow-root: the card's 25px top margin would otherwise collapse out of this
   box, which both moved the card to y=0 and shortened the box that the
   bubbles' top percentages resolve against. padding-bottom completes the
   556 section height (25 + 511 + 20). */
.ask__inner {
    position: relative;
    display: flow-root;
    container-type: inline-size;
    width: 100%;
    padding-bottom: 20px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ Mobile */
.ask__card {
    position: relative;
    margin-top: 25px;                   /* BG top 25 @ 123:9960 */
    /* content top 150 (section) = 125 into the card; content 184 -> ends 309;
       CTAs at 330 + 40 -> end 370; card is 511 -> 141 below.
       125 + 184 + 21 + 40 + 141 = 511, so padding reproduces the height. */
    padding: 125px 20px 141px;
    background-color: #d1f7ff;          /* @ 123:7884 */
    border-radius: 20px;
    overflow: hidden;
}

.ask__pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ask__content {
    position: relative;
    text-align: center;
}

.ask__title {
    font-size: 38px;                    /* @ 123:7890 */
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--brand-dark-green);
}

.ask__sub {
    margin-top: 18px;                   /* title -> 56 */
    font-size: 20px;                    /* @ 123:7891 */
    line-height: 30px;
    font-weight: var(--fw-semibold);
    color: var(--brand-dark-green);
}

.ask__body {
    margin-top: 12px;                   /* sub 56(+60) -> body 128 */
    font-size: 18px;                    /* @ 123:7892 */
    line-height: 28px;
    color: #787878;
}

.ask__ctas {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;                          /* 152 - 142 @ 123:7905 */
    margin-top: 21px;                   /* content ends 309, CTAs 330 @ 123:7905 */
}

.ask__cta {
    height: 40px;
    padding: 0 12px;
    border-radius: 30px;
    font-size: var(--fs-cta-mobile);
    line-height: var(--lh-cta-mobile);
    font-weight: var(--fw-semibold);
}

.ask__cta--download {
    gap: 6px;
    padding: 0 10px;
}

.ask__cta-icon {
    width: 10.588px;
    height: 15px;
}

/* Bubbles — white pills, Urbanist, floating over/around the card.

   Sized by CONTENT, not by the Figma percentage width. The pills are drawn to
   hug a single line, so a fixed % width with nowrap only held at exactly 390
   and 1432 — everywhere else the text ran past the pill (106px at 1140, 144px
   at 992, and even 7px at 1920). width:max-content reproduces the Figma size
   at the design widths and stays correct at every other one; the max-width
   guard keeps a pill inside the section, letting it wrap to a second line and
   grow instead of overflowing. */
.ask__bubble {
    position: absolute;
    left: var(--ml);
    top: var(--mt);
    display: flex;
    align-items: center;
    gap: 8px;
    /* Proportional width, like everything else in this section. Content-sized
       pills kept their physical size while the card scaled down, so by 1140
       they had grown relative to the composition and crowded the heading.
       The text scales to the SECTION (cqw) rather than the viewport, because
       the pill's width tracks the section — and wraps to a second line rather
       than overflowing if it still cannot fit. */
    width: max-content;
    min-width: var(--mw);
    max-width: calc(100% - var(--ml) - 10px);
    min-height: 50px;                   /* @ 123:7893 */
    padding: 6px 12px;
    background-color: var(--white);
    border-radius: 36.233px;
    font-family: var(--font-ui);
    box-shadow: 0 4px 14px rgba(30, 27, 24, .06);
}

.ask__emoji {
    flex: none;
    font-size: 18.116px;                /* @ 123:7894 */
    line-height: 1;
}

.ask__q {
    /* 14px at the 390 design width (14/390 = 3.59vw), scaling down on narrower
       phones so the pill still fits beside the card. */
    font-size: clamp(10px, 3.59cqw, 14px);  /* 14 at the 390 box @ 123:7895 */
    line-height: 1.2;
    color: var(--text);
}

/* Pop-in — the Figma timeline scales 0 -> 1.08 -> 1 on an overshoot curve,
   450ms each, staggered 120ms. Fired on scroll-in by ask.js. */
.js-pop {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
}

.js-pop.is-popped {
    animation: bubble-pop var(--motion-chip-pop) var(--ease-overshoot) forwards;
    animation-delay: calc(var(--i) * var(--motion-chip-stagger));
}

@keyframes bubble-pop {
    0%   { opacity: 0; transform: scale(0); }
    10%  { opacity: 1; }
    65%  { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .js-pop {
        opacity: 1;
        transform: none;
    }

    .js-pop.is-popped {
        animation: none;
    }
}

/* ----------------------------------------------------------------- Desktop */
@media screen and (min-width: 992px) {
    /* The section box is 1432, not the full 1440 container (it sits at x244 in
       a 240-gutter grid). Sizing this to 1440 made every % offset inside it
       ~0.6% wide — the card came out 1006 instead of 1000. */
    /* Figma desktop: Features ends 3050 (content 3036.5), this section starts
       3160 -> 110 of top space; Features contributes the other 13.5. */
    .ask {
        padding-top: 110px;
    }

    .ask__inner {
        width: min(1432px, calc(100% - 96px));
        padding-bottom: 0;
    }

    /* Normal flow, height from padding + content — no fixed height. As a
       locked 1432:400 aspect box the card shrank with the viewport (292px at
       1140) while the fixed-size buttons did not, so the gap above them
       collapsed and the copy sat on top of them.
       Figma: content top 74 + content 174 + 21 + CTA 60 + bottom 71 = 400, so
       the padding alone reproduces the designed height at the design width
       and the card simply follows its content below that. */
    .ask__card {
        position: relative;
        left: auto;
        top: auto;
        width: 69.83%;                  /* 1000 / 1432 @ 123:9955 */
        height: auto;
        margin: 0 auto;
        padding: 74px 15.35% 71px;      /* sides = (1000-693)/2 = 153.5 */
    }

    /* The 693-wide content box sits at 370 in a 1000 card whose centre is 716
       — i.e. dead centre (370 + 346.5 = 716.5). Same for the CTAs at 497+219.5.
       Centring expresses that, and the text inside is centre-aligned too. */
    .ask__content {
        position: static;
        width: auto;
        transform: none;
        text-align: center;
    }

    /* The card is a fixed 1432:400 box, so its height shrinks with the
       viewport while text would not — at 992 the copy ran past the card.
       Each size is exact at the 1432 design width and scales below it:
       58/1432 = 4.05vw, 24 = 1.676vw, 20 = 1.397vw. */
    .ask__title {
        font-size: clamp(34px, 4.05vw, 58px);       /* @ 123:6490 */
    }

    .ask__sub {
        margin-top: 12px;               /* title -> 60 */
        font-size: clamp(16px, 1.676vw, 24px);      /* @ 123:6491 */
        line-height: 1.42;
    }

    .ask__body {
        margin-top: 12px;               /* sub 60 -> body 114 */
        font-size: clamp(14px, 1.397vw, 20px);      /* @ 123:6492 */
        line-height: 1.5;
    }

    /* CTAs 439 wide at x497 top 269, section-relative @ 123:9949 */
    /* content ends at 248, CTAs at 269 -> a real 21px gap that survives */
    .ask__ctas {
        position: static;
        justify-content: center;
        gap: 15px;
        margin-top: 21px;
        transform: none;
    }

    /* Exact at the 1432 design width (60/1432 = 4.19cqw, 40 = 2.79cqw,
       20 = 1.397cqw) and scaled below it, with floors that keep them a
       comfortable tap/click target. */
    .ask__cta {
        height: clamp(46px, 4.19cqw, 60px);
        padding: 0 clamp(24px, 2.79cqw, 40px);
        border-radius: 65px;
        font-size: clamp(15px, 1.397cqw, 20px);
        line-height: normal;
        font-weight: var(--fw-bold);
    }

    .ask__cta--download {
        gap: 10px;
        padding: 0 clamp(24px, 2.79cqw, 40px);
    }

    .ask__cta-icon {
        display: none;
    }

    .ask__bubble {
        left: var(--dl);
        top: var(--dt);
        width: max-content;
        min-width: var(--dw);
        max-width: calc(100% - var(--dl) - 10px);
        min-height: 59.525px;           /* @ 123:6493 */
        padding: 6px 15px;
        gap: 10px;
        border-radius: 42.858px;
    }

    .ask__emoji {
        font-size: 21.429px;            /* @ 123:6494 */
    }

    .ask__q {
        /* 17px at the 1432 design width (17/1432 = 1.187vw) */
        font-size: clamp(10px, 1.187cqw, 17px); /* 17 at the 1432 box @ 123:6495 */
    }
}