/* Refined editorial treatment for the NUMBERS section. */
.numbers {
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 8%, rgba(141, 84, 239, .055), transparent 28%),
    var(--paper);
}

.numbers-head {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--ink);
}

.numbers-head h2 {
  position: relative;
  width: fit-content;
}

.numbers-head h2::after {
  content: "PRICE / SCALE / RESULT";
  position: absolute;
  right: .04em;
  bottom: -.95em;
  font: 800 10px/1 ui-monospace, monospace;
  letter-spacing: .18em;
  color: #66635e;
}

.numbers-head p {
  max-width: 430px;
  justify-self: end;
  font-weight: 600;
}

.numbers-grid {
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  background: rgba(255, 255, 255, .12);
}

.number-card,
.number-card:nth-child(1),
.number-card:nth-child(2),
.number-card:nth-child(3),
.number-card:nth-child(4),
.number-card.black-card {
  min-height: 310px;
  padding: 31px 30px 29px;
  border: 0;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background-color .3s ease;
}

.number-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--pink), var(--purple) 52%, var(--blue));
  transform: scaleX(.13);
  transform-origin: left center;
  transition: transform .35s ease;
}

.number-card::after {
  position: absolute;
  top: 31px;
  right: 30px;
  font: 800 10px/1 ui-monospace, monospace;
  letter-spacing: .16em;
  color: #77736d;
}

.number-card:nth-child(1)::after { content: "01"; }
.number-card:nth-child(2)::after { content: "02"; }
.number-card:nth-child(3)::after { content: "03"; }
.number-card:nth-child(4)::after { content: "04"; }

.number-card:hover {
  background: rgba(255, 255, 255, .42);
}

.number-card:hover::before {
  transform: scaleX(1);
}

.number-kicker {
  padding-right: 48px;
  color: #5f5c57;
}

.number-card strong {
  width: fit-content;
  margin: 52px 0 32px;
  font-size: clamp(60px, 7vw, 104px);
  color: var(--ink);
}

.number-card strong small,
.number-card strong em {
  color: #65615c;
}

.number-card h3 {
  margin: auto 0 9px;
  padding-top: 21px;
  border-top: 1px solid rgba(10, 10, 11, .28);
  font-size: clamp(20px, 2vw, 30px);
}

.number-card p {
  max-width: 580px;
  color: #494641;
  font-weight: 600;
}

.quality-strip {
  position: relative;
  margin-top: 0;
  padding: 30px 32px 30px 56px;
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--ink);
}

.quality-strip::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple), var(--blue));
  transform: translateY(-50%);
}

.quality-strip b {
  font-size: clamp(18px, 2.15vw, 31px);
  letter-spacing: -.02em;
}

.quality-strip p {
  color: rgba(243, 240, 233, .78);
}

.numbers-note {
  max-width: 850px;
  margin-top: 18px;
  color: #6b6761;
}

@media (max-width: 800px) {
  .numbers-head {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-bottom: 27px;
  }

  .numbers-head h2::after {
    right: 0;
    bottom: -1.15em;
  }

  .numbers-head p {
    justify-self: start;
    margin: 0;
  }

  .numbers-grid {
    margin-top: 30px;
    gap: 0;
  }

  .number-card,
  .number-card:nth-child(1),
  .number-card:nth-child(2),
  .number-card:nth-child(3),
  .number-card:nth-child(4),
  .number-card.black-card {
    min-height: 255px;
    padding: 24px 21px 23px;
  }

  .number-card::before {
    transform: scaleX(.2);
  }

  .number-card::after {
    top: 24px;
    right: 21px;
  }

  .number-card strong {
    margin: 37px 0 25px;
    font-size: clamp(57px, 17vw, 74px);
  }

  .number-card h3 {
    padding-top: 17px;
    font-size: 21px;
  }

  .quality-strip {
    gap: 15px;
    padding: 25px 21px 25px 47px;
  }

  .quality-strip::before {
    left: 21px;
    top: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .number-card,
  .number-card::before {
    transition: none;
  }
}