/* ==========================================================================
   RentOS — hero
   --------------------------------------------------------------------------
   Desktop 123:9943 · mobile 123:9968.

   Figma geometry, and how it maps to a fluid build:
     desktop  hero box 1417x510 at x=238 (container left edge), y=222.
              content column 753.812 wide; graphics 699 wide at x=718.
              718 < 753.812, so the columns OVERLAP by ~36px — the graphics is
              absolutely positioned over the content rather than flexed beside
              it. Only the title box reaches that far; the visible text does
              not, so nothing collides.
     mobile   content 390x371 then graphics 523x374.8 below it, centred and
              deliberately wider than the 390 viewport (it bleeds both sides).

   Per CLAUDE.MD this must also hold at 1440 and 1140, where there is no
   Figma frame — so the columns shrink proportionally rather than sitting at
   fixed px.
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
}

/* Mobile content is full-bleed 390 (only the lead is inset to 350), so the
   container takes no side padding here — the desktop gutters are applied in
   the min-width query instead. Applying them at 390 squeezed the lead to 310
   and wrapped the H1 onto a third line. */
.hero__inner {
    width: 100%;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ Mobile */
.hero__content {
    padding-top: 117px;                 /* hero top @ 123:9968 */
    text-align: center;
}

.hero__title {
    font-family: var(--font-screen-title);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h1-mobile);     /* 48px @ 123:7581 */
    line-height: var(--lh-h1-mobile);   /* 54px */
    color: var(--brand-dark-green);
}

.hero__lead {
    max-width: 350px;                   /* @ 226:5710 */
    /* Figma puts the lead at 132 and the H1 box is 110 tall, of which 2 lines
       at lh54 render 108 — so the gap under the rendered H1 is 24. */
    margin: 24px auto 0;
    font-size: 18px;                    /* @ 226:5710 — was 20/28, which wrapped
                                           the paragraph to 4 lines and pushed
                                           everything below it ~22px down */
    line-height: 26px;
    color: #787878;
}

.hero__lead p + p {
    margin-top: 10px;                   /* mb-[10px] between paragraphs */
}

.hero__lead-strong {
    font-weight: var(--fw-bold);
    color: var(--brand-dark-green);
}

.hero__ctas {
    display: flex;
    justify-content: center;
    gap: 10px;                          /* 152 - 142 @ 123:7583 */
    /* Figma puts the button at 297 in the content box; the lead now renders
       140 from its 132 start, so the gap is 25. */
    margin-top: 25px;
}

.hero__cta {
    height: 40px;                       /* @ 123:7584 */
    padding: 0 12px;
    border-radius: 30px;
    font-size: var(--fs-cta-mobile);    /* 14px */
    line-height: var(--lh-cta-mobile);  /* 17px */
    font-weight: var(--fw-semibold);
}

.hero__cta--download {
    gap: 6px;                           /* @ 123:7584 */
    padding: 0 10px;
}

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

.hero__signin {
    font-family: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    /* block + fit-content, not inline-block: an inline-block sits on the
       baseline, so its line box reserves ~3px of descender space below it and
       the hero measured 863 instead of its designed 860. */
    display: block;
    width: fit-content;
    /* auto side margins because a fit-content block is not centred by the
       parent's text-align the way the previous inline-block was */
    margin: 20px auto 0;                /* CTAs bottom 333 -> 353 */
    font-size: var(--fs-link-mobile);   /* 15px */
    line-height: var(--lh-link);        /* 18px */
    font-weight: var(--fw-medium);
    color: var(--primary-text);
    text-decoration: underline;
}

/* Figma draws this 523 wide inside a 390 frame, so it is meant to overflow and
   bleed off both edges. Keep that — but centre it on the viewport so the bleed
   is symmetrical rather than pulled to one side.

   margin:auto cannot centre a box wider than its container (it computes to 0),
   so the centring is done with left:50% + a -50% translate. aspect-ratio gives
   the definite height that container-type: size requires. */
.hero__graphics {
    position: relative;
    left: 50%;
    /* Holds the Figma size (523) so the artwork stays at its designed scale,
       and only shrinks below 390 — 134.1vw is 523 at exactly 390, so the cap
       never bites on a normal phone and narrow devices scale down instead of
       losing the composition off both edges.
       margin:auto cannot centre a box wider than its container, hence
       left:50% + a -50% translate. aspect-ratio supplies the definite height
       that container-type: size needs for the cards' cq units. */
    width: 523px;
    max-width: 134.1vw;
    aspect-ratio: 523 / 374.817;
    /* Sign-in ends at 492 and the frame starts at 512 @ 226:5716. The frame's
       last 24px fall outside the 864-tall mobile artboard, which clips them —
       so the section ends at 863 and .hero's overflow:hidden does the cut. */
    margin-top: 20px;
    margin-bottom: -24px;
    transform: translateX(-50%);
    container-type: size;
    /* overflow-clip @ 226:5716 — the screen is 2.18% taller than the frame and
       the design cuts it at the bottom edge. Without this it runs on into the
       Product section. Desktop must stay visible: there the screen sits ABOVE
       the frame (top -9.38%) and clipping would behead it. */
    overflow: hidden;
}

/* The blob does not fill its frame — it is inset. Desktop 123:6879 is
   inset 0/3.03%/4.93%/2.47% of 699x500.95 (= its natural 660.5x476.2);
   mobile 123:7587 is 6.14%/5.99%/4.75%/5.43% of 523x374.8 (= 463x334).

   Width is set explicitly rather than via left+right: this is a replaced
   element, so with width:auto the browser uses the image's intrinsic width
   and ignores `right` — which pushed it 21px past the container. */
.hero__graphic {
    display: none;
    position: absolute;
    height: auto;
}

.hero__graphic--mobile {
    display: block;
    left: 5.43%;
    top: 3.2%;                          /* @ 226:5717 */
    width: 88.13%;                      /* 100 - 5.43 - 6.44 */
}

/* App screen, mobile @ 226:6478 — 238.276x371 centred on (50%-27.5px,
   50%+10.09px) of the 523x374.817 frame, so it overhangs the frame top and
   bottom exactly as the design does. */
.hero__screen {
    position: absolute;
    left: 21.96%;
    top: 3.2%;
    width: 45.56%;
    /* 371 of the 374.817 frame. The desktop export is the taller 309.571x591
       crop, so at this width it would render 455 tall and spill ~92px into the
       Product section. Figma's mobile instance clips the same artwork to 371
       from the top, which is what cover + top reproduces. */
    height: 98.98%;
    object-fit: cover;
    object-position: top center;
}

.hero__qr {
    display: none;                      /* desktop only @ 123:6919 */
}

/* Hero BG @ 123:6220 — a 1920x860 SVG sitting at page origin (-1,-1), i.e.
   full-bleed behind the nav and hero, NOT clipped to the container. */
.hero__bg {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1920px;
    height: 860px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.hero__inner {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------------- Desktop */
@media screen and (min-width: 992px) {
    /* The two columns OVERLAP in Figma: content spans 0-753.8 while graphics
       starts at 718. A flex pair cannot express that (it forced both to shrink
       to fit), so the graphics is absolutely positioned over the content
       instead. All offsets are % of the container so they hold at 1440/1140. */
    .hero__inner {
        position: relative;
        width: min(var(--content-width), calc(100% - 80px));
        padding-top: 222px;             /* hero top @ 123:9943 */
        /* Content column ends at 691; the hero's designed extent is 860 (Hero
           BG @ 123:6220 is 1920x860 from y=-1, and the Product band @ 123:6219
           starts at 861). Hence 169px below the content.

           Expressed as padding, not min-height: padding states the spacing and
           lets the section grow if the copy ever gets taller, where a fixed
           860 total would just swallow the gap. The absolutely-positioned
           graphic ends at 732, so it stays inside this box either way. */
        padding-bottom: 169px;
    }

    .hero__content {
        position: relative;
        z-index: 1;
        max-width: 52.35%;              /* 753.812 / 1440 */
        padding-top: 0;
        text-align: left;
    }

    /* 80px is exact at 1920 and 1440. Below that the content column narrows
       faster than the type, and "Turning Insight" would overflow ~555px at
       1140 — there is no Figma frame for that width, so it is derived:
       5.56vw == 80px at 1440, capped at 80 above it. lh stays 1:1 with the
       size (Figma is 80/80). */
    /* Figma hangs the H1 box 20px above the Content box (223:3919 top -20),
       so the headline sits higher than the column it belongs to. */
    .hero__title {
        margin-top: -20px;
        font-size: clamp(52px, 5.56vw, var(--fs-h1));
        line-height: 1;
    }

    .hero__lead {
        /* 594 of 753.812 @ 223:3918. At the old 84.6% (638) the paragraph broke
           "rent-to-" / "own" across lines, which the design does not. */
        max-width: 78.8%;
        /* Figma's H1 box is 178 tall but 2 lines at lh80 render 160 — the 18px
           difference is text-box slack, not spacing. Gap = 197 - 160 = 37. */
        margin: 37px 0 0;
        font-size: var(--fs-lead);      /* 26px */
        line-height: var(--lh-lead);    /* 36px */
    }

    .hero__ctas {
        justify-content: flex-start;
        gap: 15px;                      /* derived from the 439px CTA row */
        margin-top: 31px;               /* button lands at 584 @ 223:3923 */
    }

    .hero__cta {
        height: 60px;                   /* @ 123:6227 */
        padding: 13px 40px;
        border-radius: 65px;
        font-size: var(--fs-cta);       /* 20px */
        line-height: normal;
        font-weight: var(--fw-bold);
    }

    .hero__cta--download {
        gap: 10px;
        padding: 13px 40px;
    }

    .hero__cta-icon {
        display: none;                  /* desktop CTA is label-only */
    }

    .hero__signin {
    font-family: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
        margin: 30px auto 0 0;          /* CTAs bottom 421 -> 451; left-aligned */
        font-size: var(--fs-link);      /* 18px */
    }

    .hero__graphics {
        overflow: visible;
        position: absolute;
        left: 49.86%;                   /* 718 / 1440 @ 123:6878 */
        top: 231px;                     /* hero top 222 + 9.02 */
        width: 48.54%;                  /* 699 / 1440 */
        /* Every child is absolutely positioned, so without this the box
           collapses to zero height — which also zeroes the cq units the
           floating cards are sized in. 699 x 500.95 @ 123:6878. */
        aspect-ratio: 699 / 500.95;
        height: auto;
        max-width: none;
        margin: 0;
        transform: none;
    }

    .hero__graphic {
        display: block;
        left: 2.47%;                    /* @ 123:6879 */
        top: 0;
        width: 94.5%;                   /* 100 - 2.47 - 3.03 */
    }

    .hero__graphic--mobile {
        display: none;
    }

    /* @ 223:4907 — (1076.85, 184) 309.571x591 in the hero, measured against
       this 699x500.95 frame at (958, 231). The negative top is real: the
       screen rises above the blob's box. */
    .hero__screen {
        left: 17%;                      /* (1076.85 - 958) / 699 */
        top: -9.38%;                    /* (184 - 231) / 500.95 */
        width: 44.29%;                  /* 309.571 / 699 */
        /* The export is exactly this frame, so no crop is needed here. */
        height: auto;
        object-fit: fill;
    }

    /* QR card — 227.705 x 301.841 at inset 39.53%/53.94%/0.21%/13.48%
       @ 123:6919. Sized in cqw so it scales with the graphic. */
    /* Children are absolutely positioned rather than padded: percentage
       padding resolves against WIDTH on every side, so a 7.02% top padding
       computed 16px off the 227.7 width instead of 21px off the 301.8 height.
       With top/bottom on an absolute child, each axis uses its own dimension. */
    .hero__qr {
        display: block;
        position: absolute;
        left: 13.48%;
        top: 39.53%;
        width: 32.58cqw;                /* 227.705 / 699 */
        height: 60.26cqh;               /* 301.841 / 500.95 */
        background-color: var(--white);
        border-radius: 4.394cqw;        /* 30.714 */
    }

    .hero__qr-code {                    /* inset @ 123:6921 */
        position: absolute;
        left: 11.22%;
        top: 7.02%;
        width: 77.21%;                  /* 175.809 / 227.705 */
        height: auto;
    }

    .hero__qr-text {                    /* @ 123:7114 */
        position: absolute;
        left: 50%;
        top: 71.58%;                    /* 216.05 / 301.841 */
        width: 74.42%;                  /* 169.455 / 227.705 */
        transform: translateX(-50%);
        font-size: 2.273cqw;            /* 15.886 */
        line-height: 3.03cqw;           /* 21.182 */
        font-weight: var(--fw-medium);
        color: var(--brand-dark-green);
        text-align: center;
    }
}