/* NARROW SCREENS
   Multi-column grids and the bleeding images are what forced the old
   `#frame { min-width: 720px }`. With that floor gone they collapse to a
   single column here so the page never scrolls sideways.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .cargo-two,
    .cards-3,
    .guar,
    .tech-wrap,
    .gps-two {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #hero {
        height: auto;
        min-height: calc(100vh - var(--h-nav) - var(--h-strip));
        min-height: calc(100svh - var(--h-nav) - var(--h-strip));
        max-height: none;
        padding-bottom: 60px;
    }

    #hero h1 {
        padding-top: 100px;
    }

    #hero .lead,
    #hero ul {
        margin-top: 40px;
    }

    #hero ul {
        margin-bottom: 40px;
    }

    #hero .lead,
    #hero ul li {
        font-size: 22px;
    }

    .hero-cta {
        gap: 20px;
    }

    #cargo {
        padding-top: 80px;
    }

    /* the fixed 730px height would stretch the map once max-width kicks in */
    .map-img {
        height: auto;
        width: 100%;
        margin-block: 40px 80px;
    }

    .media img,
    .tech-img,
    .gps-img {
        margin-right: 0;
        width: 100%;
        height: auto;
    }

    .tech-note {
        margin-top: 40px;
    }

    .feat {
        gap: 40px;
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }

        .steps::before {
            display: none;
        }

    #gps .sec-sub {
        padding-bottom: 60px;
    }

    .tbl {
        font-size: 17px;
    }

        .tbl thead th {
            font-size: 19px;
            padding: 12px 14px;
        }

        .tbl td {
            padding: 14px;
        }

    .prow {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .plabel,
    .pfill {
        font-size: 19px;
    }
}

@media (max-width: 767px) {
    :root {
        --gutter: 20px;
    }

    .card {
        padding: 28px;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .tbl {
        min-width: 560px;
    }

    /* full-width here, so the label may wrap — let the box grow instead of
       clipping, but keep the 60px design height when it stays on one line */
    .hero-cta .btn {
        width: 100%;
        height: auto;
        min-height: 60px;
        padding-block: 16px;
    }
}