/* ==========================================================================
   BetStop — "bailrbet-betstop" (1440) / "bailrbet-betstop-mobile" (390)
   Desktop sections use 120px side padding → 1200px inner column.
   ========================================================================== */

.bs-wrap { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
@media (min-width: 1024px) { .bs-wrap { width: min(1200px, 100% - 2 * var(--gutter)); } }

/* Shared section header */
.bs-head { display: flex; flex-direction: column; gap: 8px; }
.bs-head__title { font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 43px; color: var(--navy); }
.bs-head__text { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.bs-head--dark .bs-head__title { font-size: 32px; line-height: 38px; color: var(--white); }
.bs-head--dark .bs-head__text { color: var(--ink-4); }
@media (min-width: 1024px) {
  .bs-head__title, .bs-head--dark .bs-head__title { font-size: 40px; line-height: 48px; }
  .bs-head__title { color: var(--navy-3); }
  .bs-head__text { font-size: 16px; line-height: 21px; }
}

/* Editorial intro ----------------------------------------------------------- */
.bs-intro { background: var(--navy); padding: 32px 0; }
.bs-intro__inner { display: flex; flex-direction: column; gap: 32px; }
.bs-intro__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bs-badge { align-self: flex-start; display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--blue); border-radius: 100px; background: rgba(0, 71, 255, .12); color: var(--white); font-size: 10px; line-height: 13px; font-weight: 700; white-space: nowrap; }
.bs-intro__heading { display: flex; flex-direction: column; gap: 6px; }
.bs-intro__title { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 67px; color: var(--white); }
.bs-intro__sub { font-size: 18px; line-height: 23px; font-weight: 700; color: var(--yellow); }
.bs-intro__text { font-size: 14px; line-height: 22px; color: var(--ink-4); }
.bs-intro__label { font-size: 10px; line-height: 13px; font-weight: 800; color: var(--ink-4); }
.bs-intro__action { display: flex; flex-direction: column; gap: 20px; }
.bs-intro__cta { width: 100%; height: 52px; padding: 0 23px; border-radius: 6px; font-size: 14px; line-height: 18px; font-weight: 800; }
.bs-intro__cta .icon { transition: transform var(--t); }
.bs-intro__cta:hover .icon { transform: translate(2px, -2px); }
.bs-intro__note { font-size: 11px; line-height: 16px; color: var(--ink-4); }

.bs-does { display: flex; flex-direction: column; gap: 20px; background: var(--navy-2); border: 1px solid var(--line); border-radius: 8px; padding: 19px; }
.bs-does__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 26px; color: var(--yellow); }
.bs-does__list { display: flex; flex-direction: column; gap: 16px; }
.bs-does__item { display: flex; flex-direction: column; gap: 4px; }
.bs-does__name { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 17px; font-weight: 700; color: var(--white); }
.bs-does__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.bs-does__desc { padding-left: 14px; font-size: 12px; line-height: 16px; color: var(--ink-4); }

@media (min-width: 1024px) {
  .bs-intro { background: var(--navy-3); border-bottom: 1px solid var(--line); padding: 80px 0 79px; }
  .bs-intro__inner { flex-direction: row; align-items: flex-start; gap: 64px; }
  .bs-intro__main { flex: 1 1 auto; gap: 28px; }
  .bs-badge { font-size: 11px; line-height: 14px; }
  .bs-intro__heading { gap: 8px; }
  .bs-intro__title { font-size: 72px; line-height: 86px; }
  .bs-intro__sub { font-size: 20px; line-height: 26px; }
  .bs-intro__text { font-size: 16px; line-height: 26px; }
  .bs-intro__label { font-size: 11px; line-height: 14px; }
  .bs-intro__action { gap: 16px; align-items: flex-start; }
  .bs-intro__cta { width: auto; height: auto; padding: 15px 31px; font-size: 14px; line-height: 18px; }
  .bs-intro__note { font-size: 13px; line-height: 20px; }

  .bs-does { flex: 0 0 440px; gap: 24px; background: var(--navy); border-radius: 12px; padding: 31px; }
  .bs-does__name { display: block; }
  .bs-does__dot { display: inline; width: auto; height: auto; border-radius: 0; background: none; }
  .bs-does__dot::before { content: '\2022\00a0'; }
  .bs-does__desc { padding-left: 0; }
}

/* How BetStop works --------------------------------------------------------- */
.bs-how { background: var(--cream); color: var(--ink); padding: 40px 0; }
.bs-how__inner { display: flex; flex-direction: column; gap: 28px; }
.bs-steps { display: flex; flex-direction: column; gap: 40px; }
.bs-step { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bs-step__badge { display: flex; align-items: center; gap: 12px; }
.bs-step__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--yellow); }
.bs-step__num { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 34px; color: var(--blue); }
.bs-step__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 52px; }
.bs-step__title { font-size: 14px; line-height: 18px; font-weight: 800; color: var(--navy); }
.bs-step__desc { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.bs-step__link { font-size: 13px; line-height: 17px; font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.bs-step__link:hover { opacity: .8; }

.bs-summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--white); border: 1px solid var(--line-light); border-radius: 8px; padding: 15px; text-align: center; font-family: var(--font-display); font-weight: 800; }
.bs-summary__a { font-size: 20px; line-height: 24px; color: var(--blue); }
.bs-summary__arrow { display: flex; color: var(--navy); }
.bs-summary__b { font-size: 18px; line-height: 22px; color: var(--navy); }

@media (min-width: 1024px) {
  .bs-how { padding: 80px 0; }
  .bs-how__inner { gap: 48px; }
  .bs-steps { flex-direction: row; gap: 88px; }
  .bs-step { flex: 1 1 0; gap: 16px; }
  .bs-step__icon { width: 48px; height: 48px; background: var(--navy-3); }
  .bs-step__num { font-size: 32px; line-height: 38px; }
  .bs-step__body { gap: 8px; padding-left: 0; }
  .bs-step__title { color: var(--navy-3); }
  .bs-step__desc { font-size: 14px; line-height: 22px; }
  .bs-step__link { margin-top: 8px; text-decoration: none; }
  .bs-step__link:hover { opacity: 1; text-decoration: underline; }
  .bs-summary { flex-direction: row; gap: 16px; padding: 23px; }
  .bs-summary__arrow { color: var(--navy-3); }
  .bs-summary__b { font-size: 20px; line-height: 24px; color: var(--navy-3); }
}

/* Account impact ------------------------------------------------------------ */
.bs-impact { background: var(--navy); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 39px 0; }
.bs-impact__inner { display: flex; flex-direction: column; gap: 24px; }
.bs-impact__board { display: flex; flex-direction: column; gap: 12px; }
.bs-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 12px; background: var(--navy-2); border: 1px solid var(--line); border-radius: 6px; padding: 15px; }
.bs-row__num { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 29px; color: var(--yellow); }
.bs-row__title { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 17px; font-weight: 800; color: var(--white); }
.bs-row__desc { grid-column: 1 / -1; grid-row: 2; font-size: 13px; line-height: 18px; color: var(--ink-4); }
.bs-row__icon { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: var(--navy); color: var(--blue); }

@media (min-width: 1024px) {
  .bs-impact { border: 0; padding: 80px 0; }
  .bs-impact__inner { gap: 48px; }
  .bs-impact__board { gap: 0; }
  .bs-row { grid-template-columns: 40px 240px minmax(0, 1fr) 44px; column-gap: 32px; row-gap: 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 24px 0 23px; }
  .bs-row:first-child { border-top: 1px solid var(--line); padding-top: 23px; }
  .bs-row__num { font-size: 28px; line-height: 34px; }
  .bs-row__title { font-size: 14px; line-height: 18px; }
  .bs-row__desc { grid-column: 3; grid-row: 1; font-size: 14px; line-height: 22px; }
  .bs-row__icon { grid-column: 4; width: 44px; height: 44px; border-radius: 6px; background: var(--navy-3); transition: box-shadow var(--t); }
  .bs-row:hover .bs-row__icon { box-shadow: inset 0 0 0 1px var(--blue); }
}

/* Support transition -------------------------------------------------------- */
.bs-support { background: var(--navy-2); padding: 32px 0 24px; }
.bs-support__inner { display: flex; flex-direction: column; gap: 8px; }
.bs-support__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 34px; color: var(--white); }
.bs-support__text { font-size: 14px; line-height: 20px; color: var(--ink-4); }
@media (min-width: 1024px) {
  .bs-support { background: var(--navy-3); padding: 48px 0; }
  .bs-support__inner { gap: 12px; }
  .bs-support__text { font-size: 15px; line-height: 20px; }
}