/* BetStop — mockup frames betfans-betstop-page [1:1850] / betfans-betstop-mobile [74:998].
 *
 * The hero is full-bleed gradient across the whole 1440 frame with the copy inset
 * 120 from the left, so it does not sit on the 1280 container grid: the inset is
 * written as max(120px, gutter) and collapses to the container padding below 1440.
 */

/* ── hero-row [50:10] / hero-left [1:1889] — 386 tall ──────────────────── */
.bs-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 386px;
  padding: 56px 40px 56px max(120px, calc((100vw - var(--container)) / 2 + 40px));
  background: var(--grad-hero);
  color: var(--color-on-dark);
}
.bs-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.bs-hero__eyebrow {
  font-size: var(--fs-2xs); font-weight: 700; line-height: 15.03px;
  letter-spacing: var(--ls-wide); color: var(--color-on-dark-70);
}
.bs-hero__headline { font-family: var(--font-display); font-weight: 700; font-size: 110px; line-height: 99px; color: var(--color-on-dark); }
.bs-hero__lead { font-size: var(--fs-md); line-height: 27px; color: var(--color-on-dark-70); }
.bs-hero__note { font-size: var(--fs-base); line-height: 21px; color: var(--color-on-dark-60); }
/* [1:1896] is one text node "VISIT BETSTOP →" 117 wide, so the arrow is only a
   word space away, not the 8px .btn gap — flex trims the literal space. */
.bs-hero__cta { padding-inline: 18px; gap: var(--space-4); }

/* Decoration [74:1020] — the disc drawn on the mobile frame; the mockup line
   [74:1019] is dropped, it reads as a rendering seam across the headline. */
.bs-hero__disc {
  position: absolute; z-index: 1; pointer-events: none;
  background: var(--color-on-dark); opacity: .06;
}
.bs-hero__disc { width: 260px; height: 260px; right: 8%; top: -40px; border-radius: var(--radius-pill); }

/* ── intro-transition [50:23] ──────────────────────────────────────────── */
.bs-intro { padding-block: 56px; background: var(--color-bg); }
.bs-intro .container { display: flex; flex-direction: column; gap: var(--space-16); }
.bs-intro__headline {
  display: flex; flex-direction: column; gap: var(--space-16);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 48px; color: var(--color-ink);
}
.bs-intro__accent { color: var(--color-brand); }
/* [50:24] / [74:1028] — 11/15 in both frames; the shared .eyebrow drops to 9px
   below 768, which shortens the section by 2.7px. */
.bs-intro .eyebrow { font-size: var(--fs-2xs); line-height: 15px; }

/* ── three-step-process [1:1912] — 3 columns, 1px hairlines between ────── */
.bs-steps { padding-block: 56px; background: var(--color-bg); }
.bs-steps__row { display: flex; gap: var(--space-24); align-items: stretch; }
.bs-step { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.bs-steps__rule { flex: 0 0 1px; background: var(--color-border); }

.bs-step__head { display: flex; align-items: center; gap: var(--space-12); min-height: 86px; }
.bs-step__icon {
  flex: 0 0 40px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-xl);
  background: var(--color-tint); color: var(--color-brand);
}
.bs-step__icon svg { width: 20px; height: 20px; }
.bs-step__no { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 86.4px; color: var(--color-on-brand-dim); }
.bs-step__title { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: var(--color-ink); }
.bs-step__body { font-size: var(--fs-base); line-height: 22px; color: var(--color-muted); }
.bs-step__link { align-self: flex-start; line-height: 19.12px; }

/* ── tablet: no mockup frame, derived from the constraints ─────────────── */
@media (max-width: 1199px) {
  .bs-hero { padding-inline: var(--container-pad); }
  .bs-hero__headline { font-size: 88px; line-height: 80px; }
  .bs-steps__row { flex-direction: column; gap: var(--space-32); }
  .bs-steps__rule { flex: 0 0 1px; width: 100%; height: 1px; }
}

/* ── mobile frame [74:998]: hero 374, steps stacked with rules ─────────── */
@media (max-width: 767px) {
  .bs-hero { min-height: 374px; padding: 48px var(--container-pad); justify-content: flex-start; }
  .bs-hero__inner { gap: var(--space-20); }
  .bs-hero__headline { font-size: var(--fs-h1); line-height: 65px; }
  .bs-hero__lead { line-height: 25px; }
  .bs-hero__cta { width: 100%; min-height: 47px; }
  .bs-hero__disc { width: 200px; height: 200px; right: -30px; top: 40px; }

  .bs-intro { padding: 48px 0 var(--space-32); }
  .bs-intro .container { gap: var(--space-12); }
  .bs-intro__headline { font-size: 42px; line-height: 44px; gap: var(--space-12); }

  .bs-steps { padding-block: 0 48px; }
  /* [74:1040] / [74:1048] are LINE nodes: they paint a rule but take no height
     in the 40px stack, so the rule is drawn with a shadow, not a box. */
  .bs-steps__row { gap: 40px; }
  .bs-steps__rule { flex: 0 0 0; height: 0; background: none; box-shadow: 0 0 0 .5px var(--color-border); }
  .bs-step { gap: var(--space-12); }
  .bs-step__head { min-height: 67px; }
  .bs-step__no { font-size: 56px; line-height: 67px; }
}

/* [1:1921] the mockup underlines this step link. */
.bs-step__link { text-decoration: underline; text-underline-offset: 2px; }