/*!
 * Local Locker — responsive layer
 *
 * Every media query for the Local Locker design lives here; the desktop/base
 * rules live in style.css.
 *
 * Breakpoints
 *   Mobile   0    – 480px
 *   Tablet   481  – 768px
 *   Laptop   769  – 1024px
 *   Desktop  1025px and up   (style.css is authored against the 1920px frame)
 *
 * The first block below covers desktop viewports that are narrower than the
 * 1920px design frame, where the design's absolute pixel offsets stop fitting.
 */


/* =========================================================================
   DESKTOP — keep the 1600px container off the viewport edge
   ========================================================================= */

@media (max-width: 1660px) {

    /* :root {
        --ll-container-pad: 24px;
    } */

    /*
     * The subscribe pill is 398px wide inside a 274px column — it only fits
     * while the container is at its full 1600px. Below that the footer columns
     * need to shrink and wrap, otherwise the pill pushes the page sideways.
     */
    .ll-footer__cols {
        flex-wrap: wrap;
        gap: 48px;
    }

    .ll-footer__brand {
        flex: 1 1 340px;
    }

    .ll-footer__links {
        flex: 1 1 640px;
        gap: 60px;
    }

    .ll-footer__col {
        flex-shrink: 1;
        min-width: 0;
    }

    .ll-footer__col--subscribe {
        width: auto;
        flex: 1 1 300px;
    }

    .ll-subscribe {
        width: 100%;
        max-width: 398.17px;
    }
}


/* =========================================================================
   DESKTOP — narrower than the 1920px design frame (max 1620px)
   ========================================================================= */

@media (max-width: 1620px) {

    /* Download CTA: the phones move from design offsets to a fluid column. */
    .ll-download {
        min-height: 0;
        padding-bottom: 120px;
    }

    .ll-download__inner {
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }

    .ll-download__content {
        flex: 1 1 55%;
        width: auto;
        padding-top: 40px;
    }

    /*
     * The phone pair becomes proportional below the design width: its bounding
     * box is 593.25 x 686.72, so percentage offsets keep both phones inside the
     * column instead of overflowing the page.
     */
    .ll-download__phones {
        position: relative;
        flex: 1 1 45%;
        min-width: 0;
        width: 100%;
        max-width: 593.25px;
        height: auto;
        aspect-ratio: 593.25 / 686.72;
    }

    .ll-download__phone--front {
        top: 0;
        left: 0;
        width: 52.7%;
        height: auto;
        aspect-ratio: 312.63 / 647.69;
    }

    .ll-download__phone--back {
        top: 9.38%;
        left: 49.05%;
        width: 50.95%;
        height: auto;
        aspect-ratio: 302.25 / 622.32;
    }
}


/* =========================================================================
   Feature slider — the card gives back a little of its width as the slide
   narrows, same as the step card at these widths (see .ll-steps__card /
   .ll-steps__shot / .ll-steps__body in css/inner-responsive.css). It stays
   an overlay card down to 1180px and only stacks to a vertical layout at
   768px, in the ≤768px block below.
   ========================================================================= */

@media (max-width: 1400px) {

    .ll-feature {
        width: min(1062.92px, calc(100vw - 80px));
    }

    .ll-feature__card {
        aspect-ratio: 920 / 410;
    }

    .ll-feature__phone {
        width: 25.5%;
    }

    .ll-feature__content {
        left: 48%;
    }
}

@media (max-width: 1180px) {

    .ll-feature__card {
        aspect-ratio: 880 / 430;
    }

    .ll-feature__phone {
        width: 28%;
    }

    .ll-feature__content {
        left: 46.5%;
    }

    .ll-features__tabs {
        flex-wrap: wrap;
    }

    .ll-features__tab {
        width: auto;
        padding: 0 24px;
    }
}


/* =========================================================================
   TRUST & SAFETY — the two-up grid, once the badge stops leaving the copy a
   column to live in.

   The card is a 252px badge beside a text column, authored against the
   design's wide rail where the copy still gets ~500px of it. As the rail
   steps down the badge does not, so the copy column is the only part that
   gives: at 1180px the two-up grid left it 128px, and "Know who you're
   renting from—or lending to" wrapped to four lines of two words each. That
   is the "abnormal on iPad" report, and it is the copy measure, not the type
   size (which is already the shared clamped scale).

   Two steps, both of them the same measurement — give the copy back a
   readable column:
     - to 1399.98px, the badge drops to the tablet's 190px (the figures the
       1024px block used to carry), which leaves the copy ~294px;
     - to 1199.98px, the grid goes one card per row, so the copy gets the
       whole rail instead of half of it (~700px).

   Nothing here touches the type, the card's own composition, or the wide
   layout above 1400px, where the design's 252px badge and its copy column
   both still fit.
   ========================================================================= */

@media (max-width: 1399.98px) {

    /* The badge scales with the type it sits beside. */
    .ll-trust-card__badge {
        width: 190px;
        height: 190px;
    }

    .ll-trust-card__badge-inner {
        top: 37px;
        left: 17.7px;
        width: 154.5px;
        height: 116px;
        gap: 15px;
    }

    .ll-trust-card__icon {
        height: 89px;
        max-width: 89px;
    }
}

@media (max-width: 1199.98px) {

    .ll-trust__item {
        flex: 1 1 100%;
    }

    /*
     * One card per row means the copy is short and wide, so the design's fixed
     * 395px card — authored for a tall two-column card — would leave half of
     * it empty. The card takes the height of what is in it from here down.
     */
    .ll-trust-card {
        min-height: 0;
        padding: 32px 28px;
        gap: 24px;
    }
}


/* =========================================================================
   LAPTOP — 769px to 1024px
   ========================================================================= */

@media (max-width: 1024px) {

    :root {
        --ll-container-pad: 24px;
    }

    /*
     * Typography ----------------------------------------------------------
     *
     * No font sizes here any more. Every heading and text role on the home
     * page is a clamp on the shared scale in style.css (--ll-fs-*), which is
     * the inner pages' scale, so one declaration covers 300px to 3200px. The
     * per-breakpoint sizes this file used to carry were the 1920px Figma
     * figures stepped down by hand — and they were what made the home page
     * read a size larger than every other page.
     */

    .ll-heading {
        gap: 10px;
    }

    /* Header -------------------------------------------------------------- */

    .ll-header__nav {
        display: none;
    }

    .ll-nav-toggle {
        display: flex;
        order: 3;
    }

    .ll-header__actions {
        order: 2;
        margin-left: auto;
        margin-right: 16px;
    }

    .ll-mobile-nav {
        display: block;
    }

    .ll-mobile-nav[hidden] {
        display: none;
    }

    /* Hero ---------------------------------------------------------------- */

    .ll-hero {
        min-height: 0;
        padding-bottom: 80px;
    }

    .ll-hero__inner {
        padding-top: 160px;
    }

    .ll-hero__title {
        max-width: 720px;
    }

    .ll-hero__subtitle {
        margin-top: 20px;
    }


    /* Hero search: three fields keep their row, the button drops below. */
    .ll-search {
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        padding: 12px 16px;
        border-radius: 24px;
    }

    .ll-search__field {
        flex: 1 1 30%;
        padding: 12px 16px;
    }

    .ll-search__field:nth-child(3) {
        border-right: 0;
    }

    .ll-search__action {
        flex: 1 1 100%;
        width: 100%;
        padding: 12px 16px 0;
    }

    /* Browse by category -------------------------------------------------- */

    .ll-browse__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    /* Two rows of three: a fixed height replaces the desktop aspect ratio. */
    .ll-categories {
        aspect-ratio: auto;
        height: 600px;
        margin-top: 40px;
    }

    .ll-categories__list {
        flex-wrap: wrap;
    }

    .ll-category {
        flex: 1 1 33.333%;
        min-width: 33.333%;
        max-width: 33.333%;
        height: 50%;
    }

    /* Row/column rules replace the single-row dividers. */
    .ll-category+.ll-category {
        border-left: 0;
    }

    .ll-category {
        border-left: 1px solid var(--ll-divider);
        border-top: 1px solid var(--ll-divider);
    }

    .ll-category:nth-child(3n + 1) {
        border-left: 0;
    }

    .ll-category:nth-child(-n + 3) {
        border-top: 0;
    }


    /* Featured products --------------------------------------------------- */

    .ll-featured,
    .ll-hresults {
        padding-top: 100px;
    }

    .ll-products {
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .ll-products__item {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }

    /* Two across, as the featured row is here. */
    .ll-hresults .ll-products__item {
        flex: 0 1 calc(50% - 10px);
    }

    .ll-hresults__empty {
        padding: 64px 24px;
    }

    /* Trust & safety ------------------------------------------------------ */

    .ll-trust {
        padding-top: 100px;
    }

    .ll-trust__grid {
        margin-top: 40px;
    }

    /*
     * Nothing about the trust card is specific to this width any more: one
     * card per row, the 190px badge and the card's own padding all start
     * higher up — see the TRUST & SAFETY block above 1024px.
     */

    /* Powerful features --------------------------------------------------- */

    .ll-features {
        padding-top: 100px;
    }

    .ll-features__slider {
        margin-top: 40px;
    }

    .ll-features__viewport {
        margin-top: 40px;
    }


    /* Testimonials -------------------------------------------------------- */

    .ll-testimonials {
        padding-top: 120px;
    }


    /*
     * The slider is 1406px wide by design and simply takes the whole container
     * below that, so on a tablet it runs from gutter to gutter: the quote sets
     * 90-character lines and the counter and progress rail sit hard against the
     * screen edges while the heading above them is a centred block. That edge-
     * to-edge rail against centred copy is what reads as the section being
     * left-aligned and out of its container.
     *
     * Given a measure of its own and centred, so the quote, the counter and the
     * rail all line up on the same column as the heading.
     */
    .ll-testimonials__slider {
        width: 100%;
        max-width: 760px;
        margin: 40px auto 0;
    }

    .ll-testimonial {
        gap: 32px;
    }


    .ll-testimonials__nav {
        margin-top: 56px;
    }

    /* FAQ ----------------------------------------------------------------- */

    .ll-faq {
        padding-top: 100px;
    }

    .ll-faq__list {
        margin-top: 40px;
    }

    /* Download CTA -------------------------------------------------------- */

    .ll-download {
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .ll-download__inner {
        flex-direction: column;
        gap: 48px;
    }

    .ll-download__content {
        flex: 0 0 auto;
        width: 100%;
        padding-top: 0;
        gap: 20px;
    }


    .ll-download__phones {
        flex: 0 0 auto;
        max-width: 480px;
    }


    /* Footer -------------------------------------------------------------- */

    .ll-footer__inner {
        gap: 48px;
        padding: 64px var(--ll-container-pad);
    }

    .ll-footer__cols {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
        width: 100%;
    }

    .ll-footer__brand,
    .ll-footer__links {
        flex: 0 0 auto;
        width: 100%;
    }

    .ll-footer__links {
        flex-wrap: wrap;
        gap: 48px;
    }

    .ll-subscribe {
        width: 100%;
        max-width: 398.17px;
    }
}


/* =========================================================================
   TABLET — 481px to 768px
   ========================================================================= */

@media (max-width: 768px) {

    :root {
        --ll-container-pad: 20px;
    }

    /* Typography ---------------------------------------------------------- */


    /* Header -------------------------------------------------------------- */

    /* The action buttons live in the drawer from here down. */
    .ll-header__actions {
        display: none;
    }

    /* Hero ---------------------------------------------------------------- */

    .ll-hero__inner {
        padding-top: 130px;
    }

    .ll-hero__title {
        max-width: 100%;
    }


    /* Hero search stacks completely. */
    .ll-search {
        flex-direction: column;
        gap: 4px;
        padding: 16px;
        border-radius: 20px;
    }

    .ll-search__field {
        flex: 0 0 auto;
        width: 100%;
        padding: 12px 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .ll-search__field:nth-child(3) {
        border-bottom: 0;
    }

    .ll-search__action {
        width: 100%;
        padding: 8px 0 0;
    }

    /* Browse by category — two columns, three rows. */
    .ll-categories {
        aspect-ratio: auto;
        height: 640px;
        margin-top: 32px;
    }

    .ll-category {
        flex: 1 1 50%;
        min-width: 50%;
        max-width: 50%;
        height: 33.333%;
    }

    .ll-category:nth-child(3n + 1) {
        border-left: 1px solid var(--ll-divider);
    }

    .ll-category:nth-child(-n + 3) {
        border-top: 1px solid var(--ll-divider);
    }

    .ll-category:nth-child(odd) {
        border-left: 0;
    }

    .ll-category:nth-child(-n + 2) {
        border-top: 0;
    }

    .ll-category__link {
        gap: 10px;
        padding: 0 10px 20px;
    }

    .ll-category__icon {
        width: 40px;
        height: 40px;
    }


    /*
     * Featured products — two columns.
     *
     * Sections carry no bottom padding, so this figure IS the seam between
     * one section and the next. 80px read as the two of them touching on a
     * phone-sized column (the "chipkey huay sections" report), so the rhythm
     * steps up rather than the sections gaining a second edge to maintain.
     */
    .ll-featured,
    .ll-hresults,
    .ll-trust,
    .ll-features,
    .ll-faq {
        padding-top: 96px;
    }

    /*
     * The heading and "Clear search" stack: side by side the button squeezed
     * the count line to a couple of words per row.
     */
    .ll-hresults__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /*
     * The card itself is unchanged down the breakpoints: the design system's
     * listing card carries one media height, one body padding and one title
     * size at every width, and only the grid around it reflows.
     */

    /* Trust & safety — badge stacks above the copy. */
    .ll-trust-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 32px 24px;
    }

    .ll-trust-card__badge {
        align-self: center;
    }


    /* Powerful features --------------------------------------------------- */

    .ll-features__tab {
        height: 44px;
        padding: 0 18px;
        font-size: 16px;
    }

    /*
     * The reference stops placing the card's contents once the frame is too
     * narrow to hold a phone beside them, same as the step card at this
     * width (see .ll-steps__card in css/inner-responsive.css): the card
     * takes its own height, the phone centres above the copy, and both come
     * back into normal flow.
     */
    .ll-feature__card {
        aspect-ratio: auto;
        padding: 24px 24px 0;
    }

    .ll-feature__phone {
        position: relative;
        left: auto;
        top: auto;
        width: 210px;
        max-width: 100%;
        margin: 0 auto;
    }

    .ll-feature__content {
        position: static;
        left: auto;
        right: auto;
        transform: none;
        margin: 20px 0 24px;
    }


    /* Testimonials -------------------------------------------------------- */

    .ll-testimonials {
        padding-top: 106px;
    }


    .ll-testimonials__nav {
        gap: 16px;
        margin-top: 40px;
    }

    .ll-testimonials__bars {
        gap: 16px;
    }

    /* FAQ ----------------------------------------------------------------- */

    .ll-faq__question {
        gap: 12px;
        padding: 16px;
        min-height: 0;
    }

    .ll-faq__question-text {
        font-size: 16px;
    }

    /* Download CTA -------------------------------------------------------- */

    .ll-download {
        padding-top: 96px;
        padding-bottom: 64px;
    }


    .ll-download__phones {
        max-width: 400px;
    }


    /* Footer -------------------------------------------------------------- */

    .ll-footer__inner {
        gap: 40px;
        padding: 56px var(--ll-container-pad);
    }

    .ll-footer__links {
        gap: 32px 48px;
    }

    .ll-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 20px 0;
    }
}


/* =========================================================================
   MOBILE — 0 to 480px
   ========================================================================= */

@media (max-width: 480px) {

    :root {
        --ll-container-pad: 16px;
    }

    /* Typography ---------------------------------------------------------- */

    .ll-heading {
        gap: 16px;
    }


    /* Header -------------------------------------------------------------- */

    .ll-header__logo img {
        width: 120px;
        height: 56px;
    }

    /* Hero ---------------------------------------------------------------- */

    .ll-hero__inner {
        padding-top: 110px;
    }


    .ll-search {
        margin-top: 32px;
    }

    .ll-search__input {
        font-size: 16px;
    }

    /*
     * "View All Categories" belongs under the tiles on a phone, not above them:
     * at the top of the section it is the first thing thumbed past and it
     * invites the visitor away before they have seen a single category.
     *
     * The button lives in .ll-browse__head next to the heading, and the tiles
     * are in a sibling container, so reordering means the two have to become
     * items of the same flex box. display:contents on the head does that —
     * heading, button and strip all become children of .ll-browse and can be
     * ordered. The heading then needs the container padding the head was
     * carrying for it.
     */
    .ll-browse {
        display: flex;
        flex-direction: column;
    }

    .ll-browse__head {
        display: contents;
    }

    .ll-browse__head .ll-heading {
        order: 1;
        padding-left: var(--ll-container-pad);
        padding-right: var(--ll-container-pad);
    }

    .ll-browse>.ll-container:not(.ll-browse__head) {
        order: 2;
    }

    /*
     * Proportionate to a phone: the desktop pill is sized for a 1600px row and
     * came out at 215px of a 358px column, which reads as oversized next to
     * 16px body copy. Centred under the tiles at a size that matches them.
     */
    .ll-browse__cta {
        order: 3;
        align-self: center;
        margin-top: 24px;
        height: 44px;
        padding: 0 22px;
        font-size: 14px;
    }

    /* Browse by category — one column; the stacked rows set the height. */
    .ll-categories {
        aspect-ratio: auto;
        height: auto;
        margin-top: 24px;
    }

    /*
     * With a stacked list the background image no longer sits behind six
     * columns, so each row carries its own gradient and fixed height.
     */
    .ll-categories__list {
        position: relative;
        flex-direction: column;
    }

    /*
     * The shared cross-fade layer is a desktop device: one photo behind a row of
     * six columns, each column showing a different slice of it. Stacked, all six
     * rows show the same slice — which is the "every slide shows the same
     * cropped image" report. It is switched off here and each row paints the
     * photo it was given (--ll-category-bg, set per row in browse-category.php).
     */
    .ll-categories__bgs,
    .ll-categories__scrim {
        display: none;
    }

    .ll-category {
        background-image: var(--ll-category-bg);
        background-size: cover;
        background-position: center;
    }

    /*
     * A full overlay, not just the foot gradient the desktop strip uses: the
     * label and logo sit over the middle of a photo here, and on a light frame
     * (the lawn and beach shots especially) neither was legible. Darkest at the
     * bottom, where the text is.
     */
    .ll-category::before {
        background-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.35) 45%,
                rgba(0, 0, 0, 0.85) 100%);
    }

    /*
     * Logos were revealed on hover, and a phone has no hover: only the one row
     * the auto-cycle happened to mark active ever showed its icon. All of them
     * are shown here — on touch the icon is part of the tile, not a hover
     * reward.
     */
    .ll-category__icon {
        opacity: 1;
    }

    /* One per row: reset the grid borders from the wider breakpoints. */
    .ll-category,
    .ll-category:nth-child(3n + 1),
    .ll-category:nth-child(odd),
    .ll-category+.ll-category {
        flex: 0 0 auto;
        min-width: 100%;
        max-width: 100%;
        height: 160px;
        border-left: 0;
        border-top: 1px solid var(--ll-divider);
    }

    .ll-category:first-child {
        border-top: 0;
    }

    .ll-category__link {
        justify-content: center;
        padding: 16px;
    }

    /*
     * Featured products — single column.
     *
     * The seam between two sections, as in the 768px block: sections have no
     * bottom padding, so this is the whole gap. 64px was too tight to read as
     * one section ending and the next beginning.
     */
    .ll-featured,
    .ll-trust,
    .ll-features,
    .ll-faq {
        padding-top: 84px;
    }

    .ll-products {
        gap: 16px;
        margin-top: 32px;
    }

    .ll-products__item {
        flex: 0 0 100%;
        min-width: 100%;
    }

    /* One across, as the featured row is here. */
    .ll-hresults .ll-products__item {
        flex: 0 1 100%;
    }

    .ll-hresults__empty {
        margin-top: 32px;
        padding: 48px 20px;
    }

    .ll-hresults__glow {
        top: -90px;
        right: -80px;
        width: 320px;
        height: 220px;
    }

    .ll-hresults__clear {
        width: 100%;
        justify-content: center;
    }

    /* Trust & safety ------------------------------------------------------ */

    .ll-trust__grid {
        gap: 16px;
        margin-top: 32px;
    }

    .ll-trust-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    /*
     * The badge is a fixed square holding an absolutely positioned icon+label
     * that is much shorter than the box: 200px of badge around 122px of
     * content, so every card carried ~78px of empty black — 39px above the icon
     * and 39px between the label and the title — and four cards stacked that
     * into the run of dead vertical space reported here.
     *
     * On a phone the square only exists to frame the glow ring, and the ring is
     * inset:0 so it is happy to take whatever size the content gives it. The
     * badge sizes to its content instead, and the inner block comes out of
     * absolute positioning so it occupies the space rather than floating in it.
     */
    .ll-trust-card__badge {
        width: auto;
        height: auto;
    }

    .ll-trust-card__badge-inner {
        position: static;
        width: auto;
        height: auto;
        gap: 14px;
    }

    .ll-trust-card__icon {
        width: 94px;
        height: 94px;
    }


    /* Powerful features --------------------------------------------------- */

    .ll-features__tabs {
        gap: 8px;
    }

    .ll-features__tab {
        height: 40px;
        padding: 0 14px;
        font-size: 14px;
    }

    /* A 40px gap eats too much of the peek at this width. */
    .ll-features__viewport {
        --ll-features-gap: 20px;
    }

    .ll-feature {
        width: calc(100vw - 32px);
    }

    .ll-feature__card {
        padding: 20px 20px 0;
    }

    .ll-feature__phone {
        width: 100%;
        max-width: 220px;
    }


    /* Testimonials -------------------------------------------------------- */

    .ll-testimonials {
        padding-top: 72px;
        margin-top: 60px;
    }


    .ll-testimonial__author {
        width: 100%;
    }

    .ll-testimonials__nav {
        gap: 12px;
    }

    .ll-testimonials__bars {
        gap: 8px;
    }

    /* FAQ ----------------------------------------------------------------- */

    .ll-faq__list {
        gap: 12px;
        margin-top: 32px;
    }

    .ll-faq__question {
        padding: 14px;
    }

    .ll-faq__question-text {
        font-size: 15px;
    }

    .ll-faq__toggle {
        width: 26px;
        height: 26px;
    }

    /* Download CTA -------------------------------------------------------- */

    .ll-download {
        padding-top: 84px;
        padding-bottom: 48px;
    }

    .ll-download__inner {
        gap: 32px;
    }


    /*
     * Everything in this section is one centred column on a phone. The copy and
     * the store badges were left-aligned against the container and the phone
     * mockups sat in a 320px box with no auto margins inside a 358px column, so
     * the artwork hung ~19px left of centre against centred text above it.
     */
    /* align-items is flex-start at every wider size, which is what left the
     * store badge row sitting against the column's left edge under centred
     * copy. */
    .ll-download__content {
        align-items: center;
        text-align: center;
    }

    .ll-download__stores {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .ll-store-badge {
        width: 165px;
        height: 54px;
        padding: 12px 16px;
    }

    .ll-store-badge img {
        max-height: 28px;
    }

    .ll-download__phones {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }


    /* Footer -------------------------------------------------------------- */

    /*
     * The desktop footer is a row of columns, each left-aligned against its own
     * edge. Stacked into one narrow column that reading order survives, but the
     * alignment does not: every block ends up ragged against the left margin
     * with the rest of the width empty, which is what reads as "not centred".
     * Below, the whole footer is centred as one column.
     *
     * Spacing goes with it. The bottom padding was 48px on top of the bottom
     * bar's own 20px — 68px of empty black under a single line of copyright —
     * and the gap between the subscribe block and that bar was a full 32px
     * section gap. Both are tightened to something proportionate to a phone.
     */
    .ll-footer__inner {
        gap: 24px;
        padding: 40px var(--ll-container-pad) 20px;
        text-align: center;
    }

    .ll-footer__logo img {
        width: 120px;
        height: 56px;
    }

    .ll-footer__brand {
        align-items: center;
    }

    .ll-footer__about {
        margin-left: auto;
        margin-right: auto;
    }

    .ll-footer__links {
        flex-direction: column;
        gap: 28px;
    }

    .ll-footer__col--explore,
    .ll-footer__col--subscribe {
        width: 100%;
    }

    .ll-footer__col--subscribe {
        flex: 1 1 150px;
    }

    .ll-social {
        justify-content: center;
        gap: 14px;
    }

    /* Only the badge shrinks; the glyph inside keeps its designed size. */
    .ll-social__link {
        width: 48px;
        height: 48px;
    }

    .ll-footer__subscribe-text {
        margin-left: auto;
        margin-right: auto;
    }

    .ll-subscribe {
        margin-left: auto;
        margin-right: auto;
    }

    .ll-subscribe__field {
        height: 48px;
        padding: 0 8px 0 18px;
    }

    /* Centred under the centred pill, like the rest of the column. */
    .ll-subscribe .ll-recaptcha [data-ll-recaptcha-widget] {
        display: flex;
        justify-content: center;
        transform-origin: 50% 0;
    }

    .ll-subscribe__submit,
    .ll-subscribe__submit img {
        width: 36px;
        height: 36px;
    }

    .ll-subscribe__message {
        text-align: center;
    }

    .ll-footer__bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 0 0;
    }

    .ll-footer__legal {
        justify-content: center;
    }
}


/* =========================================================================
   HOME — the shared content rail, stepped
   Base values live in style.css (body.home). These are the reference's own
   container steps: 1320 / 1140 / 960 / 720 / 540 of content, each inside two
   12px gutters, fluid below 576px — the same rail the inner pages use, so a
   section edge lines up whether a visitor is on the home page or two clicks in.
   ========================================================================= */

@media (max-width: 1399.98px) {
    body.home {
        --ll-container: 1164px; /* 1140 + gutters */
    }
}

@media (max-width: 1199.98px) {
    body.home {
        --ll-container: 984px; /* 960 + gutters */
    }
}

@media (max-width: 991.98px) {
    body.home {
        --ll-container: 744px; /* 720 + gutters */
    }
}

@media (max-width: 767.98px) {
    body.home {
        --ll-container: 564px; /* 540 + gutters */
    }
}

@media (max-width: 575.98px) {
    body.home {
        --ll-container: 100%;
    }
}

/* =========================================================================
   The phone's gutter
   Above 576px the rail is narrower than the screen, so the space either side
   of it is (viewport - rail) / 2 and the gutter figure barely shows. Below it
   the rail goes fluid and this figure IS the whole margin — and at the 12px
   the rail carries (Bootstrap's half-gutter, which is what the reference kit
   uses) the copy sat hard against the edge of the screen on every page.

   20px instead, for the page, the header and the footer at once. Both halves
   of the site are named because both override the variable at a specificity
   :root cannot reach: body.home in style.css and .page-template-page_templates
   in inner-pages.css. Anything else on the site takes it from :root.
   ========================================================================= */

@media (max-width: 575.98px) {

    :root,
    body.home,
    body.page-template-page_templates {
        --ll-container-pad: 20px;
    }
}


/* =========================================================================
   HERO on a SHORT viewport — reclaim the first view
   On a phone under ~740px tall the copy plus the stacked search form is taller
   than the screen on its own, so the product conveyor started below the fold
   however well it was fitted. Height-conditional, so nothing here touches a
   normal-height phone: the type tightens and the form's rows come in to ~50px
   (still a comfortable touch target) to hand the conveyor back its share of
   the first view.
   ========================================================================= */

@media (max-width: 767.98px) and (max-height: 740px) {

    /* Clear of the header, which sits over the hero rather than above it. */
    .ll-hero__inner {
        padding-top: 96px;
    }

    .ll-hero__subtitle {
        margin-top: 14px;
        font-size: 15px;
        line-height: 22px;
    }

    .ll-search {
        margin-top: 20px;
        gap: 2px;
        padding: 10px 14px;
    }

    .ll-search__field {
        padding: 9px 8px;
    }

    .ll-search__label {
        font-size: 12.5px;
    }

    .ll-search__input {
        font-size: 15px;
    }

    .ll-search__action {
        padding: 8px 0 0;
    }

    /* 12px, not 10: the row has to stay a 44px touch target. */
    .ll-search__submit {
        padding: 12px 24px;
        font-size: 16px;
    }
}


/* =========================================================================
   WordPress admin bar — the bar is 46px below 783px
   The home page's header is absolutely positioned (see body.home.admin-bar in
   style.css), so it clears the bar by hand rather than through the html margin
   every static header rides on.
   ========================================================================= */

/* =========================================================================
   HOME — the Figma frame's own type, on desktop only
   Source: Figma "Local Locker" › Homepage (node 11:3), authored at 1920px.
   Font family is already the design's (Jost, --ll-font); these are its sizes.

   Everything on the page otherwise reads at the shared clamped --ll-fs-* scale,
   which is what the inner pages use and what phones and tablets keep — the
   brief is explicit that only desktop takes the Figma figures. The gate is
   1400px, above every iPad width (12.9" landscape is 1366px) and the width at
   which the 1344px rail stops shrinking, so a tablet never sees a 70px title.

   Values, straight off the frame:
     hero title      80/90 Bold uppercase      (14:71)
     hero lead       24/36 Regular, 70% opacity (61:62)
     section eyebrow 30 Regular uppercase, 50% opacity, tracking -0.2 (62:52)
     section title   70/90 SemiBold            (62:53)
     category label  32.06/40.08 Bold          (I65:290;35:235)
     card title      22/22.8 Bold              (129:371)
     card meta       16 Regular                (243:1832)
     trust title     36/55 SemiBold            (330:1418)
     trust text      20/36 Regular             (330:1419)
     trust badge     25.21 SemiBold            (330:1415)
     feature title   40/51.71 SemiBold         (278:2709)
     feature text    20/32.18 Regular          (278:2710)
   ========================================================================= */

@media (min-width: 1400px) {

    body.home .ll-hero__title {
        font-size: 80px;
        line-height: 90px;
    }

    body.home .ll-hero__subtitle {
        font-size: 24px;
        line-height: 36px;
    }

    /*
     * The eyebrow is a 30px regular word in the design, not a small tracked
     * kicker — so the weight and the tracking are reset with the size, or it
     * would read as a 30px letter-spaced banner.
     */
    body.home .ll-heading__eyebrow,
    body.home .ll-download__eyebrow {
        font-weight: 400;
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: -0.2px;
    }

    body.home .ll-heading__title,
    body.home .ll-download__title {
        font-size: 70px;
        line-height: 90px;
    }

    body.home .ll-download__text,
    body.home .ll-testimonial__quote {
        font-size: 24px;
        line-height: 36px;
    }

    body.home .ll-category__label {
        font-size: 32.06px;
        line-height: 40.08px;
    }

    /* The listing card, at the size the frame's own card carries. */
    body.home .ll-product__title {
        font-size: 22px;
        line-height: 22.8px;
    }

    body.home .ll-product__place,
    body.home .ll-product__deposit,
    body.home .ll-product__trust {
        font-size: 16px;
    }

    body.home .ll-trust-card__title {
        font-size: 36px;
        line-height: 55px;
    }

    body.home .ll-trust-card__text {
        font-size: 20px;
        line-height: 36px;
    }

    body.home .ll-trust-card__label {
        font-size: 25.21px;
    }

    /*
     * ll-feature__title / ll-feature__text intentionally excluded here: that
     * card's type now matches the Lend Gear "How Lending Works" step card
     * (see .ll-feature__title / .ll-feature__text in style.css) at every
     * width, not just the Figma frame's own desktop figures.
     */
}

/*
 * The trust cards' headings on a desktop narrower than the Figma frame.
 *
 * The block above gives them the frame's 36px from 1400px up; below it the
 * shared --ll-fs-h3 step took over and resolved to 20px on a 1280 laptop, in a
 * card 395px tall — reported twice as too small to read. A ramp of their own
 * across the desktop range, landing just under the frame's figure so the step
 * up at 1400px is not a jump.
 *
 * From 1025px, so an iPad in landscape (exactly 1024) keeps the size it has:
 * the standing rule on this site is that the Figma type scale is a desktop
 * change and nothing about phone or tablet type moves.
 */
@media (min-width: 1025px) and (max-width: 1399.98px) {

    body.home .ll-trust-card__title {
        font-size: clamp(24px, 2.5vw, 34px);
        line-height: 1.3;
    }
}


@media screen and (max-width: 782px) {

    body.home.admin-bar .ll-header {
        top: 46px;
    }

    /*
     * Same story for the drawer, which is position: fixed and so misses the
     * html margin as well — see body.admin-bar .ll-mobile-nav in style.css.
     */
    body.admin-bar .ll-mobile-nav {
        padding-top: 178px;
    }
}