/* ==========================================================================
   RentOS — Features
   --------------------------------------------------------------------------
   Desktop 123:6231 (1437x999 at 239,2051) · mobile 123:9958 (355x1025 at 15).

   Desktop layout: Flip Through 720 wide at x0, Benefits 590 wide at x779.
   779 + 590 = 1369 inside a 1437 box, so the two columns are a 720/590 pair
   with the benefits column right-aligned.
   ========================================================================== */

.features {
    background-color: #edefec;          /* continues the Product band */
    overflow: hidden;
    /* Figma mobile: Product ends 1743, this section starts 1874 -> 131 total.
       Product's own bottom padding covers 89 of that, so 42 remains here. */
    padding-top: 42px;
}

.features__inner {
    width: 100%;
    /* Figma's mobile section box is 355 wide at left 15 (so 20 on the right),
       and the benefit cards sit 4px further in at 351 @ 123:7869. */
    padding: 0 20px 0 15px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ Mobile */
.features__title {
    font-size: 38px;
    line-height: 44px;
    font-weight: var(--fw-semibold);
    color: var(--brand-dark-green);
}

.features__lead {
    /* Figma's title box is 84 but 2 lines at lh44 render 88, so the gap is
       4, not 8 — the box is shorter than its own line boxes. */
    margin-top: 4px;
    font-size: 18px;
    line-height: 28px;
    color: #787878;
}

.features__cta {
    height: 40px;                       /* @ mobile CTA w153 h40 top 189 */
    margin-top: 13px;                   /* lands the CTA at 189 */
    padding: 0 12px;
    border-radius: 30px;
    font-size: var(--fs-cta-mobile);
    line-height: var(--lh-cta-mobile);
    font-weight: var(--fw-semibold);
}

/* Flip Through — 354.425 x 342.837 @ 123:7637 */
.features__flip {
    /* Swiper's stylesheet sets margin-left/right:auto on .swiper. Left alone
       that centres it in a flex row and pushed the carousel 63px inside the
       container's left edge. */
    margin: 33px 0 0;                   /* CTA bottom 229 -> flip 282.58 */
    border-radius: 19.619px;
    overflow: hidden;
}

.features__screen img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 19.619px;
}

/* Benefit cards — 351 x 111.682 at y 652 / 783 / 913.65 @ 123:7869 etc */
.features__benefits {
    margin: 44px 0 0;
    padding-left: 4px;                  /* cards at x19, w351 @ 123:7869 */
}

/* Measured from the mobile card @ 123:7869-7873, not scaled off desktop —
   the radius, icon and type all differ, they are not a uniform 0.638x. */
.benefit {
    position: relative;
    min-height: 111.682px;
    padding: 24.57px 13.4px 24.57px 49.14px;
    background-color: var(--white);
    border-radius: 9.573px;             /* @ 123:7870 */
}

.benefit + .benefit {
    margin-top: 19px;                   /* 783 - 652 - 111.682 */
}

.benefit__icon {
    position: absolute;
    left: 13.4px;                       /* @ 123:7871 */
    top: 19.15px;
    display: block;
    width: 21.698px;
    height: 21.698px;
}

.benefit__circle {
    display: block;
    width: 100%;
    height: 100%;
}

.benefit__glyph {
    position: absolute;
    left: 4.34px;                       /* @ I123:7871;2293:3372 */
    top: 4.34px;
    width: 13.019px;
    height: 13.019px;
}

.benefit__title {
    font-family: var(--font-screen-title);
    font-weight: var(--fw-medium);
    font-size: 16.593px;                /* @ 123:7872 */
    line-height: 1.2;
    color: var(--brand-dark-green);
}

.benefit__body {
    margin-top: 3.4px;                  /* title 24.57 -> body 47.86 */
    font-size: 14px;                    /* @ 123:7873 */
    line-height: 20px;
    color: #787878;
}

/* Scroll reveal — annotation 123:7870: "i would like these 3 benefits to
   appear one after another as the user scrolls down to this section". */
.js-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s var(--ease-out-quint), transform .5s var(--ease-out-quint);
    transition-delay: calc(var(--i) * 120ms);
}

.js-reveal.is-visible {
    opacity: 1;
    transform: none;
}

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

/* ----------------------------------------------------------------- Desktop */
@media screen and (min-width: 992px) {
    /* Figma: Product ends 1819, Features starts 2051 -> 232 total; Product's
       bottom padding covers 122, leaving 110 here. */
    .features {
        padding-top: 110px;
    }

    .features__inner {
        width: min(var(--content-width), calc(100% - 80px));
        padding: 0;
    }

    .features__head {
        position: relative;
        min-height: 247px;              /* Content @ 123:9947 */
    }

    .features__title {
        max-width: 900px;
        font-size: 68px;                /* @ 123:6248 */
        line-height: 80px;
    }

    .features__lead {
        max-width: 787px;
        /* Figma title box 149, lead at 179 -> a 30 gap on paper, but 2 lines
           at lh80 render 160, so the real gap is 19. Using 30 made the head
           258 instead of 247 and pushed every later section down 11px. */
        margin-top: 19px;
        font-size: 24px;                /* @ 123:6249 */
        line-height: 34px;
    }

    .features__cta {
        position: absolute;
        right: 0;
        top: 0;
        height: 60px;
        margin: 0;
        padding: 13px 40px;
        border-radius: 65px;
        font-size: var(--fs-cta);
        line-height: normal;
        font-weight: var(--fw-bold);
    }

    /* Flip 720 at x0, Benefits 590 at x779 inside a 1437 box @ 123:6232 —
       so the benefits column ends at 1608, NOT flush with the container's
       right edge (1676). space-between would have pushed it 68px too far
       right; a fixed 4.1% gap keeps the designed trailing space. */
    .features__body {
        display: flex;
        align-items: flex-start;
        gap: 4.1%;                      /* (779 - 720) / 1437 */
        margin-top: 42px;               /* head 247 -> flip 289 */
        /* Figma's Features section ends at 999 with its flip ending at
           985.46 — only 13.5 below. The larger gap before Ask RentOS
           belongs to that section's top padding, not here. */
        padding-bottom: 13.5px;
    }

    .features__flip {
        flex: 0 1 50.1%;                /* 720 / 1437 */
        margin: 0;
    }

    .features__benefits {
        flex: 0 1 41.1%;                /* 590 / 1437 */
        margin: 91px 0 0;               /* flip 289 -> first card 380 */
        padding-left: 0;
    }

    .benefit {
        width: 93.2%;                   /* cards are 550 in a 590 column */
        min-height: 175px;              /* @ 123:6233 */
        padding: 30px 21px 30px 77px;   /* title/body start at x77 */
        border-radius: 15px;            /* @ 123:6234 */
    }

    .benefit__icon {
        left: 21px;                     /* @ 123:6235 */
        top: 30px;
        width: 34px;
        height: 34px;
    }

    .benefit__glyph {
        left: 6.8px;                    /* @ I123:6235;2293:3372 */
        top: 6.8px;
        width: 20.4px;
        height: 20.4px;
    }

    .benefit + .benefit {
        margin-top: 30px;               /* 176 - (-29) - 175 */
    }

    .benefit__title {
        font-size: 26px;                /* @ 123:6236 */
    }

    .benefit__body {
        margin-top: 11px;               /* title 38.5 -> body 75 */
        font-size: 20px;                /* @ 123:6237 */
        line-height: 30px;
    }
}