.facts {
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing); /* matches the gap the section above leaves */
}
@media (max-width: 988px) {
  .facts { padding-inline: var(--section-padding-x-mobile); }
}

/* serious.business's facts row at its 1440 sizes (PROPOSED, her "как у
   них"), the column scaled ×1.1 as one piece (her call): a 240 column
   of facts on the left, the statement on the right 144 away; below 900
   the statement goes first and the facts under it. */
.facts {
  display: flex;
  align-items: flex-start;
  gap: min(10vw, 144px); /* the reference's 144 at 1440, scaled with the viewport */
  --facts-scale: 1.1;
}
.facts__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
  width: calc(240px * var(--facts-scale));
}
.facts__statement {
  flex: 1 1 auto;
  min-width: 0;
}
.facts__headline {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  /* PROPOSED: a notch under the shared section size, 44 at 1440 instead
     of its 50 (her call). The phone keeps the token's own 28. */
  font-size: clamp(28px, calc(22.057px + 1.5238vw), 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 18em; /* her call: narrower from the right, no hanging last lines; em, so it scales with the size */
}
@media (max-width: 699.98px) {
  .facts__headline {
    line-height: 1.2;
    letter-spacing: 0;
  }
}
.facts__accent { font-weight: 500; }
/* PROPOSED: the frame has no such button. 40 at 390 → 60 at 1440, her
   range. The shared CTA fills its container, so the container hugs the
   label. */
.facts__cta {
  width: fit-content;
}
.facts__cta,
.facts__body {
  margin-top: clamp(40px, calc(32.571px + 1.9048vw), 60px);
}
.facts__body {
  margin-bottom: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-hero); /* her 20 at 1440 */
  line-height: 1.35;
}
@media (max-width: 899.98px) {
  .facts {
    flex-direction: column;
    gap: 72px; /* her call: between the 36 that read as stuck and the 120 that read as too much */
  }
  .facts__block {
    order: 1; /* statement first when stacked */
    width: min(100%, calc(240px * var(--facts-scale)));
  }
}

.facts__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  /* The reference's spacings (12 / 15 / 9 / 15), flat like its sizes. */
  padding-bottom: calc(12px * var(--facts-scale));
  margin-bottom: calc(15px * var(--facts-scale));
  border-bottom: 1px solid rgba(0, 0, 0, 0.7); /* FAQ's rule */
}
.facts__title,
.facts__paging {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: calc(15px * var(--facts-scale)); /* the reference's; no token this small at 1440 */
  line-height: 1.3;
}
.facts__title { font-weight: 400; }
.facts__paging { font-variant-numeric: tabular-nums; }

.facts__number {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: calc(72px * var(--facts-scale)); /* the reference's, flat: the column is fixed too */
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* All four captions stay in one grid cell, so the column reserves the
   tallest one and the page never jumps as the facts advance. Do not
   render only the active caption. */
.facts__texts {
  display: grid;
  width: 100%;
  margin-top: calc(9px * var(--facts-scale));
}
.facts__text {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: calc(14px * var(--facts-scale)); /* the reference's 13.5 */
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0s 0.15s;
}
/* Must stay after the base rule: the active caption fades in only once
   the outgoing one is gone. */
.facts__text.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0.15s, visibility 0s;
}

/* The scroll strips' arrows, without .scroll-nav: that class is wired
   to a .scroll-track by scroll-track.js and hidden below 700. */
.facts__nav {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--facts-scale));
  margin-top: calc(15px * var(--facts-scale));
}
.facts__nav .nav-arrow {
  position: relative;
  width: calc(33px * var(--facts-scale)); /* the reference's, flat — not the arrows' ramp */
  height: calc(33px * var(--facts-scale));
  border-radius: 50%;
  --button-flair-color: var(--color-accent);
}
/* Progress ring on the next arrow: facts.js runs the dash offset from
   the full circumference (102.1) to 0 over each fact's 3.5s. */
.facts__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.facts__ring circle {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.5;
  stroke-dasharray: 102.1;
  stroke-dashoffset: 102.1;
}
.facts__nav .button-flair__fill {
  z-index: 1;
  mix-blend-mode: multiply;
}

/* Phone: the title row and its rule run the full width (same 20 gutter on
   both sides); the number, caption and arrows keep the 264 column. Must
   stay last: after the 899 block and the base rules it overrides. */
@media (max-width: 699.98px) {
  .facts__block { width: 100%; }
  .facts__texts { width: min(100%, calc(240px * var(--facts-scale))); }
  .facts__cta,
  .facts__body { margin-top: 20px; } /* PROPOSED: closer to the text than the 40 at 390 */
}