/* BetStop — frames pumt123-betstop (1440) and -mobile (390). */


/* ── hero: 1440×398, text column 1255 (pad 64), hairline gutter ────────── */
.bs-hero { display: flex; min-height: 398px; }
.bs-hero__left { width: 1255px; flex: none; padding: var(--space-64); background: var(--color-surface-2); }
.bs-hero__intro { display: flex; flex-direction: column; gap: var(--space-24); width: 1127px; }
.bs-hero__intro .eyebrow { font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .18em; text-transform: uppercase; }
.bs-hero__intro .eyebrow--rule::before { width: 20px; }
.bs-hero__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: 36px; line-height: 40px; letter-spacing: -.02em;
}
.bs-hero__lead { color: var(--color-muted); font-size: 15px; line-height: 24px; }
.bs-hero__divider { flex: 1; display: flex; align-items: flex-end; }
.bs-hero__divider::before { content: ""; width: 100%; height: 1px; background: var(--color-border); }

/* ── process: 1440×521, pad 80/48/96, gap 48 ─────────────────────────── */
.bs-process { padding: var(--space-80) 0 96px; }
.bs-process__head { display: flex; flex-direction: column; gap: var(--space-12); }
.bs-process__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: 40px;
}
.bs-track {
  display: grid; grid-template-columns: 389px 40px 389px 40px 389px;
  align-items: center; gap: var(--space-24);
  margin-top: var(--space-48); min-height: 230px;
}
/* The connector lines between the cards are grid cells of their own. */
.bs-step { position: relative; }
.bs-step:nth-child(2), .bs-step:nth-child(3) { grid-column: span 1; }
.bs-track::before, .bs-track::after { content: ""; height: 1px; background: var(--color-border-2); }
.bs-track::before { grid-column: 2; grid-row: 1; }
.bs-track::after { grid-column: 4; grid-row: 1; }
.bs-step:nth-child(1) { grid-column: 1; }
.bs-step:nth-child(2) { grid-column: 3; }
.bs-step:nth-child(3) { grid-column: 5; }

.bs-step {
  display: flex; flex-direction: column; gap: var(--space-32);
  min-height: 210px; padding: var(--space-32);
  background: var(--color-surface-3);
  transition: background var(--dur-fast) var(--ease);
}
.bs-step.is-on { min-height: 210px; }
.bs-step:nth-child(2) { min-height: 230px; }
.bs-step:hover { background: var(--color-surface-4); }
.bs-step__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.bs-step__no {
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 900;
  font-size: 36px; line-height: 45px;
}
.bs-step.is-on .bs-step__no { color: var(--color-brand-2); }
.bs-step__icon { width: 20px; height: 20px; flex: none; color: var(--color-muted); }
.bs-step.is-on .bs-step__icon { color: var(--color-brand-2); }
.bs-step__content { display: flex; flex-direction: column; gap: var(--space-12); }
.bs-step__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-base); line-height: 17px;
}
.bs-step.is-on .bs-step__title { color: var(--color-brand-2); }
.bs-step__text { color: var(--color-muted); font-size: var(--fs-sm); line-height: 20px; }

/* ── official service: 1440×404, left 404 / gutter / right 760 ────────── */
.bs-official { display: flex; min-height: 404px; }
.bs-official__left {
  display: flex; flex-direction: column; gap: var(--space-24);
  width: 404px; flex: none; padding: var(--space-64);
  background: var(--color-surface-3);
}
.bs-official__eyebrow {
  color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-2xs); line-height: 14px;
}
/* Five drawn lines in a 276 column: the breaks are in the markup. */
.bs-official__title {
  width: 276px; white-space: nowrap;
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: 42px; letter-spacing: -.01em;
}
.bs-official__deco { display: flex; flex-direction: column; gap: var(--space-4); }
.bs-official__deco span { display: block; height: 1px; background: var(--color-border-2); }
.bs-official__deco span:first-child { width: 120px; }
.bs-official__deco span:last-child { width: 60px; }
.bs-official__divider { flex: 1; display: flex; align-items: flex-end; }
.bs-official__divider::before { content: ""; width: 100%; height: 1px; background: var(--color-border); }
.bs-official__right {
  display: flex; flex-direction: column; gap: var(--space-40);
  width: 760px; flex: none; min-height: 392px; padding: var(--space-64);
  background: var(--color-surface-3);
}
.bs-official__copy { display: flex; flex-direction: column; gap: var(--space-20); width: 632px; }
.bs-official__lead { color: var(--color-text-alt); font-size: var(--fs-body); line-height: 26px; }
.bs-official__text { color: var(--color-muted); font-size: var(--fs-base); line-height: 22px; }
.bs-official__actions { display: flex; align-items: center; gap: var(--space-24); }
.bs-official__btn { min-height: 38px; padding: 12px 24px; background: var(--color-brand-2); font-weight: 800; }
.bs-official__note {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-4xs); line-height: 11px;
}
.bs-official__note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-2); flex: none; }

/* ── mobile: frame pumt123-betstop-mobile (390) ───────────────────────── */
@media (max-width: 1199px) {
  .page--betstop { background: var(--color-bg); }
  /* hero 390×344: pad 40/16, gap 20 */
  .bs-hero { flex-direction: column; min-height: 0; background: var(--color-bg); }
  .bs-hero__left { width: 100%; padding: var(--space-40) var(--container-pad-m); background: var(--color-bg); }
  .bs-hero__intro { width: 100%; gap: var(--space-20); }
  .bs-hero__intro .eyebrow { font-size: var(--fs-3xs); line-height: 12px; letter-spacing: .1em; }
  .bs-hero__intro .eyebrow--rule::before { width: 12px; }
  .bs-hero__title { color: var(--color-text); font-size: var(--fs-h3); line-height: 31px; letter-spacing: 0; }
  .bs-hero__lead { font-size: var(--fs-base); line-height: 22px; }
  .bs-hero__divider { display: none; }

  /* process 390×771: pad 48/16, gap 32; cards stacked with a 20px connector */
  .bs-process { padding: var(--space-48) 0; background: var(--color-bg); }
  .bs-process__head { gap: var(--space-12); }
  .bs-process__head .eyebrow { font-size: var(--fs-3xs); line-height: 12px; }
  .bs-process__title { color: var(--color-text); font-size: var(--fs-h5); line-height: 24px; }
  .bs-track { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-32); min-height: 0; }
  .bs-track::before, .bs-track::after { display: none; }
  .bs-step, .bs-step:nth-child(2), .bs-step.is-on { min-height: 149px; padding: var(--space-20); gap: var(--space-16); background: #161b18; }
  .bs-step:nth-child(2) { min-height: 169px; }
  .bs-step:not(:last-child)::after {
    content: ""; position: absolute; left: 50%; bottom: -18px;
    width: 20px; height: 1px; translate: -50% 0; background: var(--color-border-2);
  }
  /* card, 16 gap, 20 connector row, 16 gap, card — as the frame stacks them */
  .bs-step:not(:last-child) { margin-bottom: 36px; }
  .bs-step:not(:last-child)::after { bottom: -26px; }
  .bs-step__no { font-size: var(--fs-h4); line-height: 30px; }
  .bs-step__content { gap: var(--space-8); }
  .bs-step__title { font-size: var(--fs-sm); line-height: 16px; }
  .bs-step__text { font-size: var(--fs-xs); line-height: 18px; }

  /* official 390×638: pad 48/16, gap 24, single column */
  .bs-official { flex-direction: column; min-height: 0; gap: var(--space-24); padding: var(--space-48) var(--container-pad-m); background: #161b18; }
  .bs-official__left, .bs-official__right { width: 100%; min-height: 0; padding: 0; background: none; }
  .bs-official__left { gap: var(--space-24); }
  .bs-official__eyebrow { font-size: var(--fs-3xs); line-height: 12px; }
  .bs-official__title { width: 100%; white-space: normal; color: var(--color-text); font-size: var(--fs-h2-m); line-height: 26px; }
  .bs-official__deco span:first-child { width: 80px; }
  .bs-official__deco span:last-child { width: 40px; }
  .bs-official__divider { display: none; }
  .bs-official__right { gap: var(--space-24); }
  .bs-official__copy { width: 100%; gap: var(--space-16); }
  .bs-official__lead { color: var(--color-text); font-size: var(--fs-base); line-height: 22px; }
  .bs-official__text { font-size: var(--fs-sm); line-height: 21px; }
  .bs-official__actions { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .bs-official__btn { min-height: 48px; padding: 14px 24px; font-size: var(--fs-xs); line-height: 15px; font-weight: 900; background: var(--color-brand); }
  .bs-official__note { font-size: 8px; line-height: 10px; }
}