/* BetStop page — numbers from gen.js on betstop (19:466) and betstop-mobile (52:5). */

/* ── hero ─────────────────────────────────────────────────────────────── */
.bhero { display: flex; padding: 64px; background: var(--color-dark); color: var(--color-dark); }
.bhero__panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 480px; padding: 48px; border-radius: 8px; background: var(--color-brand); overflow: hidden; }
.bhero__wm { position: absolute; right: 48px; top: -11px; font-family: var(--font-display); font-size: 360px; line-height: 542px; opacity: .04; }
.bhero__top { display: flex; flex-direction: column; gap: 20px; }
.bhero__heading { display: flex; flex-direction: column; gap: 4px; }
.bhero__eyebrow { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bhero__title { font-family: var(--font-display); font-size: 96px; line-height: 86px; text-transform: uppercase; }
.bhero__copy { display: flex; flex-direction: column; gap: 12px; width: 540px; }
.bhero__lead { font-size: 16px; line-height: 22px; font-weight: 700; }
.bhero__text { font-size: 14px; line-height: 21px; color: var(--color-ink); opacity: .8; }
.bhero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bhero__btn { padding: 16px 32px; border-radius: 4px; font-size: 15px; line-height: 20px; letter-spacing: 0; }
.bhero__note { font-size: 12px; line-height: 16px; opacity: .65; }   /* .6 = 4.45:1 */

/* ── how it works ─────────────────────────────────────────────────────── */
.bhow { display: flex; flex-direction: column; gap: 48px; padding: 80px 64px; background: var(--color-bg); color: var(--color-dark); }
.bhow__head { display: flex; flex-direction: column; gap: 16px; }
.bhow__eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.bhow__title { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 56px; line-height: 84px; text-transform: uppercase; }
.bhow__plate { padding: 8px 16px; background: var(--color-brand); border: 2px solid var(--color-dark); font-size: 48px; line-height: 72px; }
.steps { display: flex; gap: 24px; align-items: flex-start; }
.bstep { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; padding: 32px; border-radius: 8px; }
.bstep--dark { background: var(--color-dark); color: var(--color-bg); }
.bstep--dark .bstep__num, .bstep--dark .bstep__title, .bstep--dark .bstep__link { color: var(--color-brand); }
.bstep--dark .bstep__text { opacity: .8; }
.bstep--dark .bstep__icon { background: var(--color-dark-2); color: var(--color-brand); }
.bstep--brand { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-dark); }
.bstep--cream { background: var(--color-cream); box-shadow: inset 0 0 0 3px var(--color-dark); }
.bstep--brand .bstep__icon, .bstep--cream .bstep__icon { background: var(--color-dark); color: var(--color-brand); }
.bstep--cream .bstep__icon { color: var(--color-cream); }
.bstep__top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.bstep__num { font-family: var(--font-display); font-size: 48px; line-height: 72px; }
.bstep__icon { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border-radius: 4px; }
.bstep__svg { width: 20px; height: 20px; }
.bstep__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bstep__link { align-self: flex-start; }
.bstep__title { font-size: 18px; line-height: 23px; font-weight: 700; text-transform: uppercase; }
.bstep__text { font-size: 14px; line-height: 22px; color: var(--color-ink); }
.bstep--dark .bstep__text { color: var(--color-bg); }
.bstep__link { font-size: 14px; line-height: 18px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.bstep__arrow { display: grid; place-items: center; width: 32px; flex: none; padding-top: 32px; }
.bstep__arrow-svg { width: 24px; height: 24px; }

/* ── explanation ──────────────────────────────────────────────────────── */
.bexpl { display: flex; flex-direction: column; gap: 40px; padding: 80px 64px; background: var(--color-dark-2); color: var(--color-bg); }
.bexpl__head { display: flex; flex-direction: column; gap: 12px; }
.bexpl__eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand); }
.bexpl__title { font-family: var(--font-display); font-size: 56px; line-height: 84px; text-transform: uppercase; }
.bexpl__body { display: flex; gap: 32px; align-items: flex-start; }
.bexpl__left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 416px; flex: none; padding: 32px; border-radius: 8px; background: var(--color-brand); color: var(--color-dark); }
.bexpl__num { font-family: var(--font-display); font-size: 48px; line-height: 72px; }
.bexpl__sub { font-size: 18px; line-height: 23px; font-weight: 800; text-transform: uppercase; }
.bexpl__text { font-size: 14px; line-height: 22px; color: var(--color-ink); }
.bexpl__text a { font-weight: 700; }
.bexpl__group { display: flex; flex-direction: column; gap: 12px; }
.bexpl__btn { padding: 13px 24px; border-radius: 4px; letter-spacing: 0; }
.bexpl__right { display: flex; flex-direction: column; gap: 32px; flex: 1; min-width: 0; padding: 40px; border-radius: 8px; background: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-gold); color: var(--color-dark); }
.bexpl__block { display: flex; flex-direction: column; gap: 12px; }
.bexpl__label { padding-bottom: 12px; border-bottom: 1px solid rgba(23, 21, 16, .1); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .bhero { padding: 0; }
  .bhero__panel { gap: 24px; min-height: 0; padding: 40px 16px; border-radius: 0; }
  .bhero__wm { right: -20px; top: 10px; font-size: 160px; line-height: 241px; }
  .bhero__top { gap: 24px; }
  .bhero__heading { gap: 6px; }
  .bhero__eyebrow { font-size: 11px; line-height: 14px; letter-spacing: .08em; color: var(--color-dark-2); }
  .bhero__title { font-size: 60px; line-height: 54px; }
  .bhero__copy { width: auto; }
  .bhero__lead { font-size: 15px; line-height: 21px; color: var(--color-dark-2); }
  .bhero__text { font-size: 13px; line-height: 20px; color: var(--color-dark-2); }
  .bhero__cta { align-items: stretch; }
  .bhero__btn { min-height: 46px; padding: 14px 24px; border-radius: 8px; font-size: 14px; line-height: 18px; }
  .bhero__note { font-size: 11px; line-height: 14px; color: var(--color-dark-2); }

  .bhow { gap: 32px; padding: 48px 16px; }
  .bhow__head { gap: 8px; }
  .bhow__eyebrow { font-size: 11px; line-height: 14px; }
  .bhow__title { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 38px; line-height: 38px; }
  .bhow__plate { padding: 6px 12px; border-radius: 4px; font-size: 22px; line-height: 33px; }
  .steps { flex-direction: column; gap: 16px; align-items: stretch; }
  .bstep { gap: 16px; padding: 24px; }
  .bstep__top { min-height: 54px; }
  .bstep__num { font-size: 36px; line-height: 54px; }
  .bstep__icon { width: 30px; height: 30px; padding: 6px; }
  .bstep__svg { width: 18px; height: 18px; }
  .bstep__body { gap: 8px; }
  .bstep__title { font-size: 16px; line-height: 21px; }
  .bstep__text { font-size: 13px; line-height: 20px; }
  .bstep__link { font-size: 13px; line-height: 17px; }
  .bstep--cream { box-shadow: inset 0 0 0 2px var(--color-dark); }
  .bstep__arrow { width: auto; padding: 0; min-height: 20px; }
  .bstep__arrow-svg { width: 20px; height: 20px; transform: rotate(90deg); }

  .bexpl { gap: 24px; padding: 48px 16px; }
  .bexpl__head { gap: 8px; }
  .bexpl__eyebrow { font-size: 11px; line-height: 14px; }
  .bexpl__title { font-size: 40px; line-height: 40px; }
  .bexpl__body { flex-direction: column; gap: 24px; }
  .bexpl__left { width: auto; gap: 16px; padding: 24px; }
  .bexpl__num { font-size: 36px; line-height: 54px; }
  .bexpl__sub { font-size: 16px; line-height: 21px; }
  .bexpl__text { font-size: 13px; line-height: 20px; color: var(--color-dark-2); }
  .bexpl__btn { width: 100%; min-height: 46px; padding-block: 0; border-radius: 8px; }
  .bexpl__right { gap: 24px; padding: 24px; box-shadow: none; }
}