/* ===== BETSTOP ===== */
.bs-hero { border-bottom: 1px solid var(--line); }
.bs-hero__in { display: flex; align-items: flex-start; gap: 0; padding-top: 64px; padding-bottom: 64px; }
.bs-hero__left { flex: none; width: 800px; display: flex; flex-direction: column; gap: 28px; }
.bs-hero__text { display: flex; flex-direction: column; gap: 12px; }
.bs-hero__over { display: flex; align-items: center; gap: 8px; }
.bs-hero__over span:first-child { font: 700 11px var(--f-mono); color: var(--red); }
.bs-hero__over span:last-child:not(:first-child) { font: 700 11px var(--f-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--gray); }
.bs-hero__text h1 { font: 700 64px var(--f-narrow); letter-spacing: -1px; color: #fff; }
.bs-hero__text h2 { font: 700 22px var(--f-narrow); letter-spacing: .5px; color: var(--gray); }
.bs-hero__text p { font: 400 15px/24px var(--f-sans); color: var(--gray); }
.bs-hero__gov { font: 700 11px var(--f-mono); letter-spacing: .5px; color: var(--gray-2); }
.bs-hero__actions { display: flex; flex-direction: column; gap: 12px; max-width: 600px; }
.bs-hero__actions p { font: 400 13px/17px var(--f-sans); color: var(--gray-2); }
.bs-btn { align-self: flex-start; }
.bs-system { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.bs-system__top { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.bs-system__badge { padding: 8px 16px; background: var(--red-13); border: 1px solid var(--red); border-radius: 2px; font: 700 16px var(--f-narrow); color: #fff; }
.bs-system__top > i { width: 24px; height: 2px; background: var(--red); }
.bs-system__rows { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.bs-system__rows span { display: flex; justify-content: center; align-items: center; height: 28px; background: var(--ink); border: 1px solid var(--line); font: 400 12px var(--f-sans); color: var(--cream); }
.bs-system__foot { font: 700 10px var(--f-mono); color: var(--gray-2); }

.bs-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 40px; }
.bs-head .bs-hero__over span:first-child { font-size: 12px; }
.bs-head h2 { font: 700 32px var(--f-narrow); color: #fff; }
.bs-head p { font: 400 15px var(--f-sans); color: var(--gray); }
.bs-how { padding: 64px 0; border-bottom: 1px solid var(--line); }
.bs-steps { display: flex; align-items: flex-start; gap: 48px; }
.bs-step { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.bs-step > span { font: 700 32px var(--f-narrow); color: var(--red); }
.bs-step h3 { font: 700 14px var(--f-sans); letter-spacing: .5px; color: var(--cream); }
.bs-step p { font: 400 14px/22px var(--f-sans); color: var(--gray); }
.bs-step a { font: 700 13px var(--f-sans); color: var(--red); }
.bs-steps__div { flex: none; width: 120px; height: 1px; margin-top: 0; background: var(--line); }
.bs-directory { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; padding-top: 24px; }
.bs-directory__node { padding: 8px 16px; background: var(--bg-2); border: 1px solid var(--line); font: 700 14px var(--f-narrow); color: #fff; }
.bs-directory__providers { display: flex; gap: 64px; }
.bs-directory__providers span { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 400 11px var(--f-sans); color: var(--gray); }
.bs-directory__providers i { width: 16px; height: 1px; background: var(--red); }

.bs-impact { padding: 64px 0; border-bottom: 1px solid var(--line); }
.bs-impact .bs-head { margin-bottom: 32px; }
.bs-rule { display: flex; align-items: center; gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.bs-rule__head { flex: none; width: 280px; display: flex; align-items: center; gap: 16px; }
.bs-rule__head span { font: 400 12px var(--f-mono); color: var(--red); }
.bs-rule__head h3 { font: 700 14px var(--f-sans); color: var(--cream); }
.bs-rule p { flex: 1; font: 400 14px/20px var(--f-sans); color: var(--gray); }

.bs-clar { padding: 80px 0; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.bs-clar__box { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; border-top: 2px solid var(--red); margin-bottom: 32px; }
.bs-clar__box h2 { font: 700 28px var(--f-narrow); color: #fff; }
.bs-clar__box p { font: 400 15px/24px var(--f-sans); color: var(--gray); }
.bs-clar__cta { display: flex; flex-direction: column; gap: 16px; }
.bs-clar__cta > span { font: 700 11px var(--f-mono); letter-spacing: 1px; color: var(--gray); }
.bs-clar__btns { display: flex; gap: 16px; }

@media (max-width: 1180px) {
  .bs-hero__left { width: 60%; }
  .bs-hero__text h1 { font-size: 52px; }
}
@media (max-width: 1023px) {
  .bs-hero__in { flex-direction: column; gap: 32px; }
  .bs-hero__left { width: auto; }
  .bs-system { width: 100%; }
  .bs-steps { flex-direction: column; gap: 24px; }
  .bs-steps__div { width: 100%; }
  .bs-rule { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bs-rule__head { width: auto; }
}
@media (max-width: 767px) {
  .bs-hero__in { gap: 32px; padding-top: 40px; padding-bottom: 40px; }
  .bs-hero__left { gap: 24px; }
  .bs-hero__text { gap: 12px; }
  .bs-hero__over { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bs-hero__over span:first-child { font-size: 10px; letter-spacing: 1px; }
  .bs-hero__over span:last-child:not(:first-child) { font: 700 10px var(--f-mono); letter-spacing: .5px; }
  .bs-hero__text h1 { font-size: 44px; line-height: 48px; letter-spacing: 0; }
  .bs-hero__text h2 { font-size: 18px; }
  .bs-hero__text p { font-size: 14px; line-height: 22px; }
  .bs-hero__actions { gap: 12px; }
  .bs-hero__actions p { font-size: 12px; line-height: 18px; }
  .bs-btn { width: 100%; height: 45px; }
  .bs-system { gap: 20px; padding: 24px; }
  .bs-system__badge { background: none; border: 0; padding: 0; font-size: 14px; letter-spacing: 1px; }
  .bs-system__top > i { width: 100%; }
  .bs-system__rows { gap: 12px; }
  .bs-system__rows span { height: 36px; }
  .bs-how { padding: 40px 0; }
  .bs-head { gap: 12px; margin-bottom: 24px; }
  .bs-head .bs-hero__over span:first-child { font-size: 10px; }
  .bs-head h2 { font-size: 28px; }
  .bs-head p { font-size: 14px; line-height: 22px; }
  .bs-steps { gap: 0; }
  .bs-step { gap: 12px; padding: 24px 0; border-top: 1px solid var(--line); }
  .bs-step:first-child { border-top: 0; padding-top: 0; }
  .bs-step > span { font-size: 28px; }
  .bs-step h3 { font: 700 15px var(--f-narrow); letter-spacing: .5px; color: #fff; }
  .bs-step p { font-size: 13px; line-height: 20px; }
  .bs-steps__div { display: none; }
  .bs-directory { margin: 32px calc(-1 * var(--gutter)) 0; padding: 32px var(--gutter); border-top: 1px solid var(--line); }
  .bs-directory > * { width: 100%; }
  .bs-directory__node { text-align: center; font-size: 13px; letter-spacing: 1px; }
  .bs-directory__providers { flex-direction: column; align-items: center; gap: 8px; }
  .bs-impact { padding: 40px 0; }
  .bs-impact .bs-head h2 { font-size: 26px; }
  .bs-rule { gap: 10px; }
  .bs-rule__head { gap: 12px; }
  .bs-rule__head span { font: 700 11px var(--f-mono); }
  .bs-rule__head h3 { font: 700 14px var(--f-narrow); letter-spacing: .5px; color: #fff; }
  .bs-rule p { font-size: 13px; line-height: 20px; }
  .bs-clar { padding: 32px 0 40px; }
  .bs-clar__box { gap: 14px; margin-bottom: 40px; }
  .bs-clar__box h2 { font-size: 24px; line-height: 30px; }
  .bs-clar__box p { font-size: 13px; line-height: 22px; }
  .bs-clar__cta { align-items: center; gap: 20px; }
  .bs-clar__cta > span { font-size: 10px; text-align: center; }
  .bs-clar__btns { flex-direction: column; width: 100%; gap: 12px; }
  .bs-clar__btns .btn { width: 100%; height: 45px; }
}