/* =================================================================== FOOTER section css ===================================================================

   Measured off `faq + footer .pdf` (1920 x 1145 artboard):

     band          --ink, full bleed, y1045 -> 1145  = 100px tall
     stair above   two 40px steps at BOTH corners, flush to the edges:
                     x0   -> 40   ink from y965
                     x40  -> 80   ink from y1005
                     x80  ->      ink from y1045
                   which is exactly .band-stair with its --stair of 40px, so
                   the global class is reused rather than a new clip-path.
     marks         wliq x100 -> 319 at 40px tall, managedcoder x399 -> 542 at
                   36px — the same two files and sizes as the header, 80px
                   apart, so the divider lands at x359 with --sp40 either side
     meta          right-aligned, ends x1818 (the container edge), 20px
                   Archivo 400, white @ .8  -> --body-invert
     row           marks sit y1075 -> 1114 in the 100px band: 30px of padding
                   top and bottom, which is what sets the band height here
                   rather than a hard-coded 100px.
   =================================================================== */
.footer {
    /* .band-stair pulls the band up by its full 80px depth so the ink corners
       climb into the FAQ band above; this buys those 80px back, leaving the
       row itself the measured 100px tall. */
    padding-block-start: var(--stair2);
    background: var(--ink);

    & .footer__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp40);
        padding-block: var(--sp60);
    }

    /* measured 80px between the two marks, so the 1px divider sits centred
       with --sp40 on each side (the header runs the same row at --sp30) */
    & .footer__brands {
        display: flex;
        align-items: center;
        gap: var(--sp40);
    }

    & .footer__brand {
        display: flex;
        align-items: center;
        transition: var(--transition);

        &:hover { opacity: .7; }
    }

    & .footer__logo {
        display: block;
        width: auto;
        height: 40px;
    }

    & .footer__logo--partner { height: 36px; }

    & .footer__divider {
        flex: 0 0 auto;
        width: 1px;
        height: 40px;
        background: var(--line-invert-strong);
    }

    & .footer__meta {
        font-size: var(--f20);
        font-weight: 400;      /* measured, same as the FAQ answer copy */
        color: var(--white);
        text-align: right;
    }
}

/* =================================================================== responsive =================================================================== */
/* Ordered largest -> smallest (CLAUDE.md 7.2). The 1440 and 992 blocks were the
   other way round in the file; they set different properties so nothing was
   actually losing, but the order is part of the convention. */

/* Below 1440 the 20px meta line stops fitting beside the marks on one line — it
   wraps and pushes the band to twice its measured height. One step down the
   scale buys it back and keeps the designed row all the way to the tablet
   breakpoint, where the two stack instead. */
@media (max-width: 1439.98px) {
    .footer {
        & .footer__meta { font-size: var(--f18); }
    }
}

@media (max-width: 1199.98px) {
    .footer {
        & .footer__inner {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--sp25);
        }

        & .footer__meta { text-align: left; }
    }
}

@media (max-width: 991.98px) {
    .footer {
        & .footer__brands { gap: var(--sp30); }
        & .footer__logo { height: 34px; }
        & .footer__logo--partner { height: 30px; }
        & .footer__divider { height: 34px; }
    }
}

@media (max-width: 575.98px) {
    .footer {
        & .footer__brands { gap: var(--sp15); }
        & .footer__logo { height: 26px; }
        & .footer__logo--partner { height: 23px; }
        & .footer__divider { height: 24px; }
    }
}