/* BetStop — frame betstop[40:4] / betstop-mobile[81:182]. */

/* hero-ctas[40:38] holds the button and the note in one 12-gap group, so the
   note sits 12 below the button, not the hero column's 28. */
.hero__note { font-size: var(--fs-2xs); line-height: 15.12px; color: var(--color-muted); }
.hero__title .hero__line,
.hero__title .hero__mark { letter-spacing: normal; }
.hero__lead { opacity: .8; }

/* ── three outcomes (betstop[40:52]) ──────────────────────────────────── */
/* the whole band is sand, 80 in from every edge, groups 48 apart */
.outcomes { background: var(--color-sand); }
.outcomes__inner { display: flex; flex-direction: column; gap: var(--space-48); }
/* section-header[40:53]: kicker 14/18 violet with 1.12 tracking, two headline
   sizes side by side (48/60.48 and 40/50.4) */
.outcomes .section-head__stack { gap: var(--space-16); }
.outcomes .section-head__kicker {
  font-size: var(--fs-small); line-height: 18px; letter-spacing: 1.12px;
  color: var(--color-violet);
}
.outcomes__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-16);
  font-size: 48px; line-height: 60.48px; letter-spacing: normal;
}
.outcomes__title-b { font-size: var(--fs-h4); line-height: 50.4px; }

/* modules-row[40:59]: three cards 24 apart, a 24px arrow in each gap */
.outcomes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; }
.outcome {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}
.outcome:not(:last-child)::after {
  content: ""; position: absolute; right: -40px; top: 7px;
  width: 10px; height: 10px; margin-right: -5px;
  border-top: 2px solid var(--color-ink); border-right: 2px solid var(--color-ink);
  transform: rotate(45deg);
}
.outcome__no { font-size: 48px; line-height: 60.48px; font-weight: 800; }
.outcome__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-12); }
.outcome__title { font-size: var(--fs-lg); line-height: 23px; font-weight: 800; text-transform: uppercase; }
.outcome__text { font-size: var(--fs-small); line-height: 22px; opacity: .9; }
.outcome__link {
  align-self: flex-start; color: inherit;
  font-size: var(--fs-small); line-height: 18px; font-weight: 800;
  text-decoration: underline; text-underline-offset: 3px;
}
.outcome__link:hover { text-decoration-thickness: 2px; }
.outcome--lime { background: var(--color-lime); color: var(--color-ink); }
.outcome--violet { background: var(--color-violet); color: #fff; }
.outcome--dark { background: var(--color-ink); color: #fff; }
.outcome--dark .outcome__text { opacity: .8; }

/* ── self-exclusion detail (betstop[40:89]) ───────────────────────────── */
/* the band is ink: a 405 column on the left, a white card on the right */
.break { background: var(--color-ink); color: #fff; }
.break__inner { display: grid; grid-template-columns: 405px 1fr; gap: var(--space-32); align-items: start; }
.break__left { display: flex; flex-direction: column; gap: var(--space-32); }
.break .section-head__stack { gap: var(--space-12); }
.break .section-head__kicker {
  font-size: var(--fs-small); line-height: 18px; letter-spacing: 1.12px;
  color: var(--color-violet-on-dark);
}
.break .section-title--sm { font-size: 48px; line-height: 53px; letter-spacing: normal; color: #fff; }
/* lime-highlight-block[40:94]: pad 24, gap 16, everything ink on lime */
.break__lead {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); border-radius: var(--radius-sm);
  background: var(--color-lime); color: var(--color-ink);
}
.break__no { font-size: var(--fs-h5); line-height: 40.32px; font-weight: 800; }
.break__title { font-size: var(--fs-body); line-height: 20.16px; font-weight: 800; text-transform: uppercase; }
.break__text { font-size: var(--fs-xs); line-height: 20px; }
.break__cta { display: flex; }
/* visit-btn[40:98]: 137×36, ink on lime with a lime label */
.break__btn {
  background: var(--color-ink); color: var(--color-lime);
  padding: 10px 20px; font-size: var(--fs-xs); line-height: 16.38px;
}
.break__btn:hover { background: var(--color-violet); color: #fff; }

/* exclusion-right[40:100]: one white card, pad 40, blocks 32 apart */
.break__panels {
  display: flex; flex-direction: column; gap: var(--space-32);
  padding: var(--space-40); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.break__panel { display: flex; flex-direction: column; gap: var(--space-12); }
/* the kicker is followed by a rule across the block (40:103 / 40:107) */
.break__panel-title {
  font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800;
  letter-spacing: 0.96px; text-transform: uppercase;
  padding-bottom: var(--space-12); border-bottom: 1px solid var(--color-border);
}
.break__panel-title--violet { color: var(--color-violet); }
.break__panel-text { font-size: var(--fs-small); line-height: 22px; }
/* support-box[40:109]: sand strip, label left, lime phone pill right */
.break__support {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  flex-wrap: wrap;
  min-height: 84px; padding: var(--space-24); border-radius: var(--radius-sm);
  background: var(--color-sand);
}
.break__support-label { font-size: var(--fs-body-sm); line-height: 19px; font-weight: 700; }
.break__phone {
  padding: 8px var(--space-16); border-radius: 100px;
  background: var(--color-lime); color: var(--color-ink);
  font-size: var(--fs-body); line-height: 20.16px; font-weight: 800; text-decoration: none;
}
.break__phone:hover { background: var(--color-ink); color: var(--color-lime); }

@media (max-width: 1199px) {
  /* betstop-mobile utility-strip[81:183] is the 51 profile: gap 6, warning
     11/15.4, links 11/14 — the shared block is drawn for the 44 frames. */
  .u-strip { font-size: var(--fs-3xs); line-height: 15.4px; }
  .u-strip__inner { gap: var(--space-6); }
  .u-strip__links { font-size: var(--fs-3xs); line-height: 14px; gap: var(--space-12); }

  /* betstop-hero[81:197]: pad 40/48, gap 20 */
  .hero { padding-block: var(--space-40) var(--space-48); }
  /* title-stack[81:201]: «BETSTOP.» 44/41.8, gap 8, purple-badge 20/25.2 + 6/12 */
  .hero__title { gap: var(--space-8); }
  .hero__line { font-size: 44px; line-height: 41.8px; }
  .hero__mark { font-size: var(--fs-subtitle); line-height: 25.2px; padding: 6px 12px; }
  /* cta-button[81:207] is 358x48 */
  .hero__ctas .btn--primary { padding-block: 15px; }
  /* note [81:209] 11/15, 10 below the button (hero-cta-group[81:206] gap 10) */
  .hero__note { font-size: var(--fs-3xs); line-height: 15px; margin-top: calc(var(--space-10) - var(--space-20)); }

  /* how-it-works-section[81:210]: pad 48, gap 28; header gap 8 */
  .outcomes { padding-block: var(--space-48); }
  .outcomes__inner { gap: 28px; }
  .outcomes .section-head__stack { gap: var(--space-8); }
  .outcomes .section-head__kicker { font-size: var(--fs-3xs); line-height: 14px; letter-spacing: 0.88px; }
  /* 81:213: на мобильном это ОДИН текстовый узел 28/31 — обе половины должны течь
     одним абзацем. display:contents убирает их собственные боксы: текст идёт как
     сплошной, а инлайновые прямоугольники двух спанов больше не накладываются. */
  .outcomes__title { display: block; font-size: var(--fs-h6); line-height: 31px; }
  .outcomes__title-a, .outcomes__title-b { display: contents; font-size: inherit; line-height: inherit; }
  /* cards-stack[81:214]: 12 gap + a 24 arrow between cards */
  .outcomes__grid { grid-template-columns: 1fr; gap: 48px; }
  .outcome { padding: var(--space-24); gap: var(--space-16); }
  .outcome:not(:last-child)::after {
    right: auto; left: 50%; top: auto; bottom: -29px; margin-right: 0; margin-left: -5px;
    border-top: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    color: var(--color-ink);
  }
  .outcome__no { font-size: var(--fs-h5); line-height: 40.32px; }
  .outcome__title { font-size: var(--fs-body); line-height: 20.16px; }
  .outcome__text { font-size: var(--fs-xs); line-height: 21px; }

  /* self-exclusion-detail[81:246] + betstop-info-panel[81:256] */
  .break { padding-block: var(--space-48); }
  .break__inner { grid-template-columns: 1fr; gap: var(--space-24); }
  .break__left { gap: var(--space-24); }
  .break .section-head__stack { gap: var(--space-8); }
  .break .section-head__kicker { font-size: var(--fs-3xs); line-height: 14px; letter-spacing: 0.88px; }
  .break .section-title--sm { font-size: var(--fs-h6); line-height: 31px; }
  .break__lead { padding: var(--space-20); }
  .break__no { font-size: var(--fs-lead); line-height: 30px; }
  .break__title { font-size: var(--fs-body-sm); line-height: 19px; }
  .break__text { opacity: .9; }
  .break__btn { width: 100%; justify-content: center; padding: 12px var(--space-16); }
  .break__panels { padding: var(--space-24) var(--space-20); gap: var(--space-24); }
  .break__panel-text { font-size: var(--fs-xs); line-height: 21px; }
  /* support-box[81:265] stacks its label over the pill and centres both */
  .break__support {
    flex-direction: column; justify-content: center; gap: var(--space-12);
    min-height: 0; padding: var(--space-20); text-align: center;
  }
  .break__support-label { font-size: var(--fs-small); line-height: 18px; }
  .break__phone { padding: 10px var(--space-24); }
}

/* Desktop hero numbers from betstop[40:28] — unscoped they would beat the
   mobile branch purely by file order. */
@media (min-width: 1200px) {
  .hero { padding-block: 72px; }
  /* purple-accent-block[40:35]: 40/50.4 with 6/12 padding, not the 72px hero size */
  .hero__mark { font-size: var(--fs-h4); line-height: 50.4px; padding: 6px 12px; }
  /* cta-primary[40:39]: 176x51 — 15/19 with 16/32 padding */
  .hero__ctas .btn--primary { font-size: var(--fs-body-sm); line-height: 19px; padding: 16px 32px; }
  .hero__note { margin-top: calc(var(--space-12) - var(--space-28)); }
  /* the two lower bands sit 80 in from the frame edge, not the shared 40 */
  .outcomes .container, .break .container { padding-inline: var(--space-80); }
}