/* --- Available products (1028:1539) -------------------------------------- */
.products {
    background: #F6F6F6;
}

/* This wrapper ships without the `container` class, so it had no cap: the Figma
   row over-specifies (82 + 406 + 93 + 1261 + 120 = 1962 in a 1920 frame), which
   forced horizontal scroll between 1920 and 1962 and left the whole block stuck
   at the left edge with dead space beyond it. Cap it at the 1920 content width
   and centre it — the tracks are minmax(0, …) so they absorb the 42px. */
.products-inner {
    display: grid;
    grid-template-columns: minmax(0, 406px) minmax(0, 1261px);
    align-items: center;
    gap: clamp(40px, 4.8vw, 93px);
    min-height: 774px;
    max-width: 1920px;
    margin-inline: auto;
    padding: 120px 120px 120px 82px;
}

.products .text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.products h2 {
    margin: 0;
    font-size: clamp(32px, 3.33vw, 64px);
    font-weight: 600;
    line-height: 1.125; /* 72/64 */
    color: var(--brand, #008AF7);
}

.products .text p {
    max-width: 361px;
    margin: 0;
    font-size: 18px;
    line-height: 1.4444;
    color: var(--ink, #212529);
}

.products .cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.products .card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
}

.products .card img {
    width: 100%;
    height: auto;
    aspect-ratio: 306 / 475;
    object-fit: cover;
}

@media (max-width: 991px) {
    /* One column on small screens. `flex-direction` alone stopped working once the
       1919 rule turned this into a grid, which left phones with two ~170px columns
       (client round 17). */
    .materials .columns {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .statement-band {
        min-height: 0;
        padding-block: 64px;
    }

    .statement-band-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .statement-band .mark {
        width: 160px;
    }

    .process-steps-inner {
        min-height: 0;
        gap: 40px;
    }

    .process-steps .steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        border-radius: 24px;
    }

    .process-steps .steps li {
        flex-basis: auto;
        padding-top: 0;
    }

    /* Both sections carry big Figma insets (125/115 and 120/82) that were never
       released on small screens, so their copy sat in a ~170px column while every
       About section starts at the 24px gutter. Match that standard (round 17). */
    .materials {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-block: 64px;
        padding-inline: var(--gutter);
    }

    .products-inner {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 64px var(--gutter);
    }

    .products .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The product shot is portrait (306/475), so below the four-up row it grew to
       543px at 390 and 1119px at 767 — a 5111px section. Cap it (client round 18). */
    .products .card img {
        aspect-ratio: auto;
        height: clamp(180px, 30vw, 260px);
    }

    .seo-copy {
        min-height: 0;
        padding-block: 64px;
    }

    /* Same collapse the static pages already do at this width. */
    .seo-copy .columns {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 24px;
    }
}

/* --- Mobile gutter parity ------------------------------------------------
 * The `.container` primitive swaps to --gutter-mobile below 576px. Sections that
 * set their own inline padding have to follow or they sit 4px tighter than every
 * other section on the page (caught in review, client round 22). This lives at
 * the END of the file on purpose: the <=991 rules above re-declare
 * padding-inline, and a same-specificity rule placed earlier would lose to them.
 * ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .materials,
    .products-inner {
        padding-inline: var(--gutter-mobile, 24px);
    }
}