/* ============================== USP / ADVANTAGES ==============================
   Desktop (Figma node 98:4950): band 1440x864 on #f5f5f5 =
     96 pad + 80 title block + 48 + 544 list + 96 pad.
   List 1280x544 = two 1280x256 rows, 32 gap; each row two 624x256 cards, 32 gap.
   A card is a CENTRED COLUMN: 48 icon, 16, then a 298-wide text wrapper
   (title 22/28 700 + 8 + body 16/24 600 #5a5a5a), the whole stack centred
   vertically in the 256 — not an icon-beside-text row.
   Mobile (375, 892): #fafaf8, one column, dotted rule under every card,
   order 1,3,4,2, cards 192/164/164/164 with 8 gaps. */
.usp {
    background: var(--usp-bg);
    padding: 5vw 0; /* 96 */
}

/* 80 tall with the 36/36 title optically centred in it, as in the Figma */
.usp__head {
    height: 4.1667vw; /* 80 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.usp__title {
    font-family: var(--f-bold);
    font-weight: 700;
    font-size: 1.875vw; /* 36 */
    line-height: 1;
    color: var(--ink);
    margin: 0;
}

/* ---- grid ---- */
.usp__grid {
    direction: ltr; /* DOM 1,2 -> visual left,right, as in the Figma */
    width: 66.6667vw; /* 1280 */
    margin: 2.5vw auto 0; /* 48 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6667vw; /* 32 */
}

.usp__card {
    direction: rtl;
    background: #ffffff;
    border: 1px dashed var(--hairline);
    border-radius: 1.0417vw; /* 20 */
    box-sizing: border-box;
    padding: 2.0833vw 1.6667vw; /* 40 / 32 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.8333vw; /* 16 — icon to text wrapper */
    min-height: 13.3333vw; /* 256 */
}

.usp__icon {
    flex: 0 0 auto;
    width: 2.5vw; /* 48 */
    height: 2.5vw;
    display: block;
}

/* the Figma text wrapper is 298 wide inside the 624 card, so the copy wraps
   where the design wraps it instead of running the full card width */
.usp__body {
    flex: 0 0 auto;
    width: 15.5208vw; /* 298 */
    max-width: 100%;
}

.usp__card-title {
    font-family: var(--f-bold);
    font-weight: 700;
    font-size: 1.1458vw; /* 22 */
    line-height: 1.2727; /* 28 */
    color: var(--ink);
    margin: 0;
}

.usp__card-text {
    font-family: var(--f-semibold);
    font-weight: 600;
    font-size: 0.8333vw; /* 16 */
    line-height: 1.5; /* 24 */
    color: #5a5a5a;
    margin: 0.4167vw 0 0; /* 8 */
}


/* ============================================================================
   MOBILE (Figma 375 frame) — stacked, dotted separators, re-ordered
   ========================================================================== */
@media (max-width: 768px) {

    .usp,
    .mobile .usp {
        background: #fafaf8;
        padding: 10.6667vw 0; /* 40 */
    }

    .usp__head,
    .mobile .usp__head {
        height: 21.3333vw; /* 80 */
    }

    .usp__title,
    .mobile .usp__title {
        font-size: 8.5333vw; /* 32 */
        line-height: 1.25; /* 40 */
        padding: 0 var(--gutter);
    }

    /* Figma mobile: the card column is 359 wide inside an 8px gutter */
    .usp__grid,
    .mobile .usp__grid {
        direction: rtl;
        width: auto;
        margin: 6.4vw 2.1333vw 0; /* 24 / 8 */
        display: flex;
        flex-direction: column;
        gap: 2.1333vw; /* 8 */
    }

    /* Figma mobile card (node 8:458) is 359x164 =
         16 pad + 48 icon + 8 + [28 title + 0 + 48 desc] + 16 pad.
       Card 1 is 192 because its title runs two lines (56 instead of 28).
       Note the gaps are tighter than desktop: 8 under the icon, 0 under the
       title — the 28px line box supplies that breathing room on its own.
       The dotted rule sits UNDER every card, including the last. */
    /* The side padding is 8, not the gutter's 16: our NouvelR renders a hair
       wider than the Figma's, and at 16 the card-3 body spills onto a third
       line that the Figma does not have — which is what pushed the block 27
       past its 892. The content is centred, so the extra measure is invisible
       and only restores the design's line breaks. The dotted rule is the
       card's own border, so it does not move with the padding. */
    .usp__card,
    .mobile .usp__card {
        background: transparent;
        border: 0;
        border-bottom: 1px dashed var(--hairline);
        border-radius: 0;
        padding: 4.2667vw 2.1333vw; /* 16 / 8 */
        min-height: 43.7333vw; /* 164 */
        gap: 2.1333vw; /* 8 — icon to text wrapper */
    }

    .usp__card--1,
    .mobile .usp__card--1 {
        min-height: 51.2vw; /* 192 */
    }

    .usp__body,
    .mobile .usp__body {
        width: auto;
    }

    /* Figma mobile order: 1, 3, 4, 2 */
    .usp__card--1, .mobile .usp__card--1 { order: 1; }
    .usp__card--3, .mobile .usp__card--3 { order: 2; }
    .usp__card--4, .mobile .usp__card--4 { order: 3; }
    .usp__card--2, .mobile .usp__card--2 { order: 4; }

    .usp__icon,
    .mobile .usp__icon {
        width: 12.8vw; /* 48 */
        height: 12.8vw;
    }

    /* same 22/28 as desktop — the card component is not resized on mobile */
    .usp__card-title,
    .mobile .usp__card-title {
        font-size: 5.8667vw; /* 22 */
        line-height: 1.2727; /* 28 */
    }

    /* The <br> stays on mobile too: card 1 is 192 against the others' 164, and
       that 28 difference is exactly one 28px title line. */

    .usp__card-text,
    .mobile .usp__card-text {
        font-size: 4.2667vw; /* 16 */
        line-height: 1.5; /* 24 */
        margin-top: 0;
    }
}