soulmate-mobile-metrics {
  --metrics-number-size: clamp(2.875rem, 13vw, 3.75rem);
  --metrics-column-gap: 16px;
  --metrics-row-gap: 40px;
  --metrics-gutter: 20px;
  --metrics-max-width: 460px;
  --metrics-cyan: 108 223 231;
  --metrics-pink: 233 139 187;
  --metrics-opacity: 1;
  display: block;
  padding: 18px max(var(--metrics-gutter), env(safe-area-inset-right, 0px)) 70px max(var(--metrics-gutter), env(safe-area-inset-left, 0px));
  background: var(--page-background, #100e16);
  color: #faf6fa;
  scroll-margin-top: calc(100px + env(safe-area-inset-top, 0px));
}
soulmate-mobile-metrics *, soulmate-mobile-metrics *::before { box-sizing: border-box; }
.sm-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--metrics-column-gap); row-gap: var(--metrics-row-gap); width: 100%; max-width: var(--metrics-max-width); margin: 0 auto; padding: 0; list-style: none; opacity: var(--metrics-opacity); }
.sm-metrics-item { min-width: 0; text-align: center; --metric-accent: var(--metrics-cyan); }
.sm-metrics-item[data-accent="pink"] { --metric-accent: var(--metrics-pink); }
.sm-metrics-number { display: block; margin-bottom: 14px; white-space: nowrap; font: 800 var(--metrics-number-size)/1.05 var(--font-primary); font-variant-numeric: tabular-nums; letter-spacing: -.055em; transition: text-shadow 550ms ease, color 550ms ease; }
.sm-metrics-suffix { display: inline-block; font-size: .6em; vertical-align: .12em; margin-left: .04em; visibility: hidden; }
soulmate-mobile-metrics[data-counted] .sm-metrics-suffix { visibility: visible; }
soulmate-mobile-metrics[data-counted] .sm-metrics-number { color: #fffafd; text-shadow: 0 0 20px rgb(var(--metric-accent) / .22); }
.sm-metrics-label { margin: 0; font: 650 clamp(.6875rem, 2.85vw, .8125rem)/1.5 var(--font-primary); letter-spacing: .035em; text-wrap: balance; overflow-wrap: anywhere; }
.sm-metrics-detail { margin: 8px 0 0; color: #bfb4c7; font: 400 .8125rem/1.55 var(--font-primary); text-wrap: balance; overflow-wrap: anywhere; }
.sm-metrics-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1024px) {
  soulmate-mobile-metrics {
    --metrics-number-size: clamp(3rem, 3.7vw, 3.75rem);
    --metrics-max-width: 1280px;
    --metrics-gutter: 32px;
    padding-block: 48px 64px;
  }
  .sm-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm-metrics-item { position: relative; padding-inline: clamp(12px, 2vw, 28px); }
  .sm-metrics-item + .sm-metrics-item::before {
    content: '';
    position: absolute;
    inset: 10% auto 10% 0;
    width: 1px;
    background: var(--page-border, #e9ddea24);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sm-metrics-grid { opacity: 1; }
  .sm-metrics-number { transition: none; text-shadow: none; }
  soulmate-mobile-metrics[data-counted] .sm-metrics-number { text-shadow: none; }
}