/* BetStop — numbers from fig-spec of robwaterhause-betstop (1:1533) and
 * betstop-mobile (14:4). The page container is 1200 (pad 120), like the docs. */

.bs-hero { position: relative; height: 514px; overflow: hidden; background: var(--color-bg); }
.bs-hero__glow { position: absolute; left: 320px; top: 50px; width: 800px; height: 600px; border-radius: 50%; background: var(--grad-glow); pointer-events: none; }
.bs-hero__inner { position: relative; display: flex; align-items: flex-start; height: 100%; padding-top: 100px; }
.bs-hero__content { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.bs-hero__title {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 80px; line-height: 72px; letter-spacing: -.04em;
  text-transform: uppercase; color: var(--color-text);
}
.bs-hero__title-accent { color: var(--color-brand); }
.bs-hero__paragraphs { display: flex; flex-direction: column; gap: 24px; }
.bs-hero__lead { font-size: var(--fs-lead); line-height: 26px; color: var(--color-text); }
.bs-hero__note { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }

.bs-how { background: var(--color-bg-strip); }
.bs-how__inner { display: flex; flex-direction: column; gap: 56px; padding-block: 120px; }
.bs-how__head { display: flex; flex-direction: column; gap: 12px; }
.bs-how__title { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 59px; letter-spacing: -.03em; text-transform: uppercase; color: var(--color-text); }
.bs-how__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.bs-step { display: flex; flex-direction: column; gap: 32px; padding: 32px; background: rgba(18, 16, 18, .831); }
.bs-step__num { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-h2-sm); line-height: 51px; color: var(--color-brand); }
.bs-step__body { display: flex; flex-direction: column; gap: 12px; }
.bs-step__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 22px; text-transform: uppercase; color: var(--color-text); }
.bs-step__text { font-size: var(--fs-ui); line-height: 22px; color: var(--color-muted); }

@media (max-width: 1199px) {
  .bs-hero { height: auto; }
  .bs-hero__glow { left: 35px; top: 20px; width: 320px; height: 320px; }
  .bs-hero__inner { padding-block: 48px; }
  .bs-hero__content { gap: 24px; }
  .bs-hero__title { font-size: 42px; line-height: 40px; }
  .bs-hero__title span { min-height: 80px; }
  .bs-hero__paragraphs { gap: 16px; }
  .bs-hero__lead { font-size: var(--fs-body); line-height: 24px; }   /* 14:28 — 15/24, 4 строки = 96 */
  .bs-hero__note { font-size: var(--fs-ui); line-height: 22px; }   /* 14:29 — 14/22, 3 строки = 66 */

  .bs-how__inner { gap: 32px; padding-block: 48px; }
  .bs-how__head { gap: 8px; }
  .bs-how__title { font-size: var(--fs-h4); line-height: 32px; }   /* 14:35 — 28/32, две строки */
  .bs-how__track { grid-template-columns: 1fr; gap: 16px; }
  .bs-step { gap: 24px; padding: 24px; }
  .bs-step__num { font-size: 32px; line-height: 41px; }
  .bs-step__body { gap: 8px; }
  .bs-step__title { font-size: var(--fs-lead); line-height: 20px; }   /* 14:40 — 16/20 */
  .bs-step__text { font-size: var(--fs-ui); line-height: 21px; }   /* 14:41 — 14/21 */
}