/* BetStop — mockup pumtl23-betstop-desktop [75:15]. */

.hero__headline--tight { font-size: var(--fs-h3); line-height: 51px; }
.hero__visual { width: 480px; height: 400px; flex: none; align-self: flex-end; }
/* Свечение в герое — общий .hero-blob (assets/css/components.css). */


.stages {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24);
  margin-top: var(--space-48);
}
.stage {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-24); border-radius: var(--radius-xl);
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
  transition: box-shadow var(--dur-base) var(--ease);
}
.stage:hover { box-shadow: inset 0 0 0 1px var(--color-border-brand-strong); }
.stage__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h4); line-height: 41px; color: var(--color-brand);
}
.stage__title {
  margin: 0; font-size: var(--fs-body); font-weight: 700; line-height: 20.42px;
  text-transform: uppercase; color: var(--color-white);
}
.stage__text { margin: 0; font-size: var(--fs-small); line-height: 20px; color: var(--color-muted); }
.stage .link-accent { margin-top: auto; }

.betstop-explain { background: var(--color-bg); }
.betstop-explain__split { display: flex; gap: var(--space-48); align-items: flex-start; }
.betstop-explain__left { width: 380px; flex: none; display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; }
.betstop-explain__right { flex: 1; display: flex; flex-direction: column; gap: var(--space-24); }
.betstop-explain__right p { margin: 0; font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-muted); }
.betstop-explain__right a { color: var(--color-brand-light); }

@media (max-width: 1199px) {
  .stages { grid-template-columns: 1fr; }
  .betstop-explain__split { flex-direction: column; }
  .betstop-explain__left { width: 100%; }
  .hero__visual { width: 100%; height: 240px; }
}

@media (max-width: 767px) {
  .hero__headline--tight { font-size: var(--fs-h5); line-height: 36px; }
}

/* ── мобильный фрейм [121:4] ──────────────────────────────────────────────
   Числа из мобильного фрейма: герой pad 48/20 gap 24, заголовок 44/56,
   секции pad 48/20, карточки этапов pad 20 gap 12, панель текста pad 20. */
@media (max-width: 767px) {
  .hero--doc { padding: var(--space-48) var(--space-20); }
  .hero__headline--tight { gap: var(--space-4); font-size: 44px; line-height: 56.14px; }
  .hero__headline--tight .hero__headline-accent { font-size: 22px; line-height: 26px; }
  .hero--doc .hero__lead { font-size: var(--fs-ui); line-height: 20px; }
  .hero--doc .btn { width: 100%; min-height: 50px; }
  .betstop-mark { display: none; }

  .betstop-process,
  .betstop-explain { padding: var(--space-48) var(--space-20); }
  .betstop-process .section__title,
  .betstop-explain .section__title { font-size: var(--fs-h4); line-height: 41px; }
  .stages { gap: var(--space-16); margin-top: var(--space-32); }
  .stage { padding: var(--space-20); gap: var(--space-12); }
  .stage__num { font-size: 36px; line-height: 46px; }
  .stage__title { font-size: var(--fs-body-sm); line-height: 19.14px; }
  .stage__text { font-size: var(--fs-ui); line-height: 20px; }

  .betstop-explain__split { gap: var(--space-24); }
  .betstop-explain__left { gap: var(--space-8); }
  .betstop-explain__left .section__title { font-size: 34px; line-height: 43.38px; }
  .betstop-explain__left .rg__lead { font-size: var(--fs-ui); line-height: 20px; }
  .betstop-explain__left .btn { width: 100%; min-height: 50px; }
  .betstop-explain__right {
    gap: var(--space-16); padding: var(--space-20);
    border-radius: var(--radius-xl); background: var(--fill-glass-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  }
  .betstop-explain__right p { font-size: var(--fs-body-sm); line-height: 23px; }
}