/* SECTION / USP
   Desktop (px / 19.2): "Section — USP — Desktop" 1440x324 on #fafaf8 — header
   at y=64, then a 1312-wide row of four cards with 1px hairlines between them.
   Each card is [text block][48px icon], laid out so the icon sits to the LEFT
   of its right-aligned text (RTL: the icon ends the card).
   Mobile (px / 3.75): the same four stacked, 370 wide, hairline between rows. */

.usp {
  background: #fafaf8;
  color: var(--page-ink);
  padding: 3.3333vw 3.3333vw 3.3333vw; /* 64 */
}

.usp__head {
  text-align: center;
}

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

/* Figma uses a different wording per breakpoint — see usp.php */
.usp__title-m {
  display: none;
}

.usp__rule {
  display: block;
  width: 11.4583vw; /* 220 */
  height: 0.2083vw; /* 4 */
  margin: 0.8333vw auto 0; /* 16 */
  background: var(--brand-accent);
  border-radius: 999px;
}

.usp__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5vw; /* 48 => cards start at y=168 */
}

.usp__card {
  display: flex;
  align-items: center;
  gap: 0.8333vw; /* 16 */
  padding: 0.8333vw 0.8333vw 0.8333vw 1.6667vw;
  flex: 1 1 auto;
  justify-content: flex-start;
}

/* Figma "Line 2/3/4" — hairlines between the cards, not after the last */
.usp__card + .usp__card {
  border-right: 1px solid var(--hairline);
}

.usp__body {
  text-align: right;
}

.usp__card-title {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 1.4583vw; /* 28 */
  line-height: 1.25; /* 35 */
  margin: 0;
  white-space: nowrap;
}

.usp__card-text {
  font-family: var(--f-regular);
  font-weight: 400;
  font-size: 0.8333vw; /* 16 */
  line-height: 1.5; /* 24 */
  color: var(--muted-ink);
  margin: 0;
  white-space: nowrap;
}

/* the fourth card's description is a link with a yellow rule + glyph */
.usp__link {
  display: inline-flex;
  align-items: center;
  gap: 0.2604vw; /* 5 */
  text-decoration: none;
  color: var(--page-ink);
  font-family: var(--f-regular);
  font-size: 0.8333vw; /* 16 */
  line-height: 1.5;
}

.usp__link-txt {
  box-shadow: inset 0 -0.1042vw 0 var(--brand-accent);
  transition: box-shadow 0.2s ease;
}

.usp__link:hover .usp__link-txt {
  box-shadow: inset 0 -0.2083vw 0 var(--brand-accent);
}

.usp__link img {
  width: 0.7292vw; /* 14 */
  height: 0.7292vw;
  display: block;
}

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


/* ============================== MOBILE ============================== */
@media (max-width: 768px) {

  .usp,
  .mobile .usp {
    padding: 12.8vw var(--gutter) 8.5333vw; /* 48 / 16 / 32 */
  }

  .usp__title,
  .mobile .usp__title {
    font-size: 7.4667vw; /* 28 */
    line-height: 1.2857; /* 36 */
  }

  .usp__title-d,
  .mobile .usp__title-d {
    display: none;
  }

  .usp__title-m,
  .mobile .usp__title-m {
    display: inline;
  }

  .usp__rule,
  .mobile .usp__rule {
    width: 29.3333vw; /* 110 */
    height: 1.0667vw; /* 4 */
    margin-top: 4.2667vw;
  }

  .usp__row,
  .mobile .usp__row {
    display: block;
    margin-top: 8.5333vw; /* 32 */
  }

  /* Figma mobile rows: 370x92 with 16 between => a hairline separator and the
     icon pinned to the right of the right-aligned text block */
  .usp__card,
  .mobile .usp__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4.2667vw;
    padding: 4.2667vw 4.2667vw 4.2667vw 0; /* 16 */
  }

  .usp__card + .usp__card,
  .mobile .usp__card + .usp__card {
    border-right: 0;
    border-top: 1px solid var(--hairline);
  }

  .usp__body,
  .mobile .usp__body {
    flex: 1 1 auto;
  }

  .usp__card-title,
  .mobile .usp__card-title {
    font-size: 7.4667vw; /* 28 */
    line-height: 1.2857; /* 36 */
  }

  .usp__card-text,
  .mobile .usp__card-text {
    font-family: var(--f-semibold);
    font-weight: 600;
    font-size: 4.2667vw; /* 16 */
    line-height: 1.5; /* 24 */
  }

  .usp__link,
  .mobile .usp__link {
    font-family: var(--f-semibold);
    font-weight: 600;
    font-size: 4.2667vw;
    gap: 1.3333vw;
  }

  .usp__link-txt,
  .mobile .usp__link-txt {
    box-shadow: inset 0 -0.5333vw 0 var(--brand-accent);
  }

  .usp__link img,
  .mobile .usp__link img {
    width: 3.7333vw; /* 14 */
    height: 3.7333vw;
  }

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