/* ==========================================================================
   Key figures — Webflow Component
   Self-contained: does not need base.css. Tokens are used with fallbacks.
   Three-line stack per column: kicker, figure (icon + number), caption.
   One gap value sits above the figure and below it, so the rhythm cannot drift.
   Icon is a sibling of the number, not a child — it shares color with the
   kicker and never inherits the number's black.
   ========================================================================== */

.bd-stats,
.bd-stats *,
.bd-stats *::before,
.bd-stats *::after {
  box-sizing: border-box;
}

.bd-stats {
  --bd-stats-gap: var(--bd-space-4, 16px);
  --bd-stats-col: calc(var(--bd-space-8, 32px) * 1.25);
  --bd-stats-plus: #17b26a;
  --bd-stats-rule: #d5d7da;
  --bd-stats-figure: 72px;
  --bd-stats-muted: var(--bd-text-2, #252B37);
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  contain: paint;
  padding: var(--bd-space-8, 32px) 0;
  font-family: var(--bd-font, InterVariable, sans-serif);
  font-feature-settings: "liga" 1, "calt" 1, "cv02", "cv03", "cv04", "cv11";
  font-optical-sizing: auto;
}

.bd-stats .bd-wrap {
  width: 100%;
  max-width: var(--bd-content, 1440px);
  margin-inline: auto;
}

.bd-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--bd-stats-col);
}

.bd-stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  width: min-content;
  gap: var(--bd-stats-gap);
}

.bd-stats__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--bd-stats-col) / -2);
  width: 1px;
  transform: translateX(50%);
  background: var(--bd-stats-rule);
  pointer-events: none;
}

.bd-stats__kicker,
.bd-stats__value,
.bd-stats__caption {
  margin: 0;
}

.bd-stats__kicker,
.bd-stats__icon {
  color: var(--bd-stats-muted);
}

.bd-stats__kicker {
  font-size: var(--bd-text-sm, 14px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.bd-stats__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bd-space-3, 12px);
  font-size: var(--bd-stats-figure);
}

.bd-stats__icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  display: block;
}

.bd-stats__icon,
.bd-stats__icon * {
  vector-effect: non-scaling-stroke;
}

.bd-stats__value {
  font-weight: var(--bd-weight-value, 200);
  font-variation-settings: "wght" var(--bd-weight-value, 200);
  font-variant-numeric: proportional-nums lining-nums;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  line-height: 1;
  color: var(--bd-text, #000);
  white-space: nowrap;
}

.bd-stats__plus {
  color: var(--bd-stats-plus);
}

.bd-stats__caption {
  font-size: var(--bd-text-base, 16px);
  font-weight: 400;
  line-height: 1;
  color: var(--bd-text, #000);
}

@media (max-width: 1023px) {
  .bd-stats {
    --bd-stats-figure: 56px;
    --bd-stats-col: calc(var(--bd-space-6, 24px) * 1.25);
  }

  .bd-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: var(--bd-stats-col);
    row-gap: var(--bd-stats-col);
  }

  .bd-stats__item:not(:last-child)::after {
    content: none;
  }

  .bd-stats__item:not(:nth-child(2n))::after {
    content: "";
  }
}

@media (max-width: 767px) {
  .bd-stats {
    --bd-stats-figure: 48px;
    --bd-stats-gap: var(--bd-space-3, 12px);
    --bd-stats-col: calc(var(--bd-space-4, 16px) * 1.25);
    padding: var(--bd-space-6, 24px) 0;
  }
}