/* ==========================================================================
   Showdown page — "bailrbet-showdown" (1440) / "bailrbet-showdown-mobile" (390)
   ========================================================================== */

/* Section heading block ---------------------------------------------------- */
.sd-heading { display: flex; flex-direction: column; gap: 12px; }
.sd-heading--tight { gap: 8px; }
.sd-heading__kicker { font-family: var(--font-display); font-weight: 900; font-size: 14px; line-height: 17px; color: var(--yellow); }
.sd-heading__title { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 34px; color: var(--white); }
.sd-heading--hero .sd-heading__title { font-size: 36px; line-height: 38px; }
.sd-heading__lead { font-size: 14px; line-height: 20px; color: var(--ink-4); }
.sd-heading__lead--intro { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--white); }
.sd-heading--light .sd-heading__kicker { color: var(--blue); }
.sd-heading--light .sd-heading__title { color: var(--navy); }
.sd-heading--light .sd-heading__lead { color: var(--ink-2); }
@media (min-width: 1024px) {
  .sd-heading, .sd-heading--tight { gap: 12px; }
  .sd-heading__kicker { font-size: 16px; line-height: 19px; }
  .sd-heading__title, .sd-heading--hero .sd-heading__title { font-size: 48px; line-height: 50.4px; }
  .sd-heading__lead, .sd-heading__lead--intro { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink-4); }
  .sd-heading--light .sd-heading__title { color: var(--ink); }
  .sd-heading--light .sd-heading__lead { color: var(--ink-2); }
}

/* Intro + status panel ----------------------------------------------------- */
.sd-intro { background: var(--navy); }
.sd-intro__inner { display: flex; flex-direction: column; }
.sd-intro__copy { display: flex; flex-direction: column; gap: 24px; padding: 40px 0 32px; }
.sd-intro__paragraphs { display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 22px; color: var(--ink-4); }
.sd-status { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; background: var(--navy); border: 1px solid var(--blue); border-radius: 6px; padding: 19px; }
.sd-status__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-status__title { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 24px; color: var(--white); }
.sd-status__badge { display: inline-flex; background: var(--line); color: var(--yellow); border-radius: 12px; padding: 4px 10px; font-size: 9px; line-height: 12px; font-weight: 900; white-space: nowrap; transition: color var(--t); }
.sd-status__badge.is-active { color: var(--green); }
.sd-status__divider { height: 1px; background: var(--line); }
.sd-status__rows { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.sd-status__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-status__row dt { font-size: 10px; line-height: 13px; font-weight: 700; color: var(--yellow); }
.sd-status__row dd { margin: 0; font-size: 11px; line-height: 14px; font-weight: 700; color: var(--white); text-align: right; }
.sd-status__text { font-size: 13px; line-height: 20px; color: var(--ink-4); }
.sd-status__form { display: flex; }
.sd-status__cta { padding: 15px; font-size: 13px; line-height: 17px; font-weight: 900; }
.sd-status__disclaimer { display: flex; flex-direction: column; gap: 4px; font-size: 10px; line-height: 13px; color: var(--ink-4); }
.sd-status__warn { font-weight: 700; color: #d92626; }
@media (min-width: 1024px) {
  .sd-intro { background: var(--navy-3); border-bottom: 1px solid var(--line); padding: 80px 0 79px; }
  .sd-intro__inner { flex-direction: row; align-items: flex-start; gap: 64px; }
  .sd-intro__copy { flex: 1 1 auto; min-width: 0; gap: 32px; padding: 0; }
  .sd-intro__paragraphs { gap: 20px; font-size: 15px; line-height: 24px; }
  .sd-status { flex: 0 0 440px; gap: 24px; margin: 0; border-radius: 8px; padding: 31px; }
  .sd-status__title { font-size: 22px; line-height: 26px; }
  .sd-status__badge { font-size: 10px; line-height: 13px; font-weight: 800; }
  .sd-status__row dt { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-4); }
  .sd-status__row dd { font-size: 12px; line-height: 16px; }
  .sd-status__cta { font-size: 14px; line-height: 18px; font-weight: 800; }
  .sd-status__disclaimer { gap: 6px; font-size: 11px; line-height: 14px; }
}

/* Account separation ------------------------------------------------------- */
.sd-sep { background: var(--navy); padding: 40px 0 48px; }
.sd-sep .sd-heading { margin-bottom: 24px; }
.sd-compare { display: flex; flex-direction: column; align-items: center; }
.sd-card { display: flex; flex-direction: column; gap: 16px; width: 100%; background: var(--navy-3); border: 1px solid var(--line); border-radius: 6px; padding: 19px; }
.sd-card--showdown { border-color: var(--blue); }
.sd-card__header { display: flex; align-items: center; gap: 10px; }
.sd-card__badge { display: inline-flex; background: var(--white); color: var(--navy); border-radius: 3px; padding: 3px 8px; font-family: var(--font-display); font-weight: 900; font-size: 12px; line-height: 14px; }
.sd-card--showdown .sd-card__badge { background: var(--blue); color: var(--white); }
.sd-card__title { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 24px; color: var(--white); }
.sd-card__divider { height: 1px; background: var(--line); }
.sd-card__rows { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.sd-card__row { display: flex; flex-direction: column; gap: 2px; }
.sd-card__row dt { font-size: 9px; line-height: 12px; font-weight: 700; color: var(--yellow); text-transform: uppercase; }
.sd-card__row dd { margin: 0; font-size: 13px; line-height: 17px; color: var(--white); }
.sd-connector { display: flex; flex-direction: column; align-items: center; color: var(--blue); }
.sd-connector__line { width: 2px; height: 32px; background: var(--blue); }
.sd-connector__line--short { height: 16px; }
.sd-connector__arrow { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.sd-neq { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; background: var(--navy-3); border: 1px solid var(--blue); border-radius: 6px; padding: 15px; text-align: center; }
.sd-neq__symbol { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 38px; color: var(--yellow); }
.sd-neq__title { font-family: var(--font-display); font-weight: 900; font-size: 16px; line-height: 19px; color: var(--white); }
.sd-neq__divider { width: 80px; height: 1px; background: var(--line); }
.sd-neq__text { font-size: 11px; line-height: 16px; color: var(--ink-4); }
.sd-neq__text strong { color: var(--yellow); }
@media (min-width: 1024px) {
  .sd-sep { border-bottom: 1px solid var(--line); padding: 80px 0 79px; }
  .sd-sep .sd-heading { margin-bottom: 48px; }
  .sd-compare { flex-direction: row; align-items: flex-start; gap: 32px; }
  .sd-card { flex: 1 1 0; min-width: 0; gap: 24px; border-radius: 8px; padding: 31px; }
  .sd-card__header { gap: 12px; }
  .sd-card__badge { padding: 4px 10px; font-size: 14px; line-height: 17px; }
  .sd-card__title { font-size: 24px; line-height: 29px; }
  .sd-card__rows { gap: 16px; }
  .sd-card__row { gap: 4px; }
  .sd-card__row dt { font-size: 11px; line-height: 14px; }
  .sd-card__row dd { font-size: 14px; line-height: 18px; }
  .sd-connector { display: none; }
  .sd-neq { flex: 0 0 240px; gap: 16px; border-radius: 8px; padding: 23px; }
  .sd-neq__symbol { font-size: 40px; line-height: 48px; }
  .sd-neq__title { font-size: 18px; line-height: 22px; }
  .sd-neq__divider { width: 192px; }
  .sd-neq__text strong { font-weight: 400; color: inherit; }
}

/* How Showdown works ------------------------------------------------------- */
.sd-steps { background: var(--cream); padding: 48px 0; }
.sd-steps .sd-heading { margin-bottom: 24px; }
.sd-steps__flow { display: flex; flex-direction: column; align-items: center; }
.sd-step { display: flex; flex-direction: column; gap: 12px; width: 100%; background: var(--white); border: 1px solid var(--line-light); border-radius: 6px; padding: 19px; }
.sd-step__num { font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 43px; color: var(--blue); }
.sd-step__body { display: flex; flex-direction: column; gap: 4px; }
.sd-step__title { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 22px; color: var(--navy); }
.sd-step__text { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.sd-steps__arrow { display: flex; align-items: center; justify-content: center; padding: 12px; color: var(--blue); }
.sd-steps__arrow-glyph { display: none; }
.sd-steps__arrow-icon { display: flex; }
@media (min-width: 1024px) {
  .sd-steps { border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); padding: 79px 0; }
  .sd-steps .sd-heading { margin-bottom: 48px; }
  .sd-steps__flow { flex-direction: row; align-items: center; gap: 32px; }
  .sd-step { flex: 1 1 0; min-width: 0; gap: 20px; padding: 31px; }
  .sd-step__num { font-size: 48px; line-height: 57px; }
  .sd-step__body { gap: 8px; }
  .sd-step__title { font-size: 20px; line-height: 24px; color: var(--ink); }
  .sd-step__text { font-size: 14px; line-height: 20px; }
  .sd-steps__arrow { flex: 0 0 40px; padding: 0; font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 29px; }
  .sd-steps__arrow-glyph { display: inline; }
  .sd-steps__arrow-icon { display: none; }
}

/* Compact CTA bar ---------------------------------------------------------- */
.sd-cta { background: var(--navy-3); border-bottom: 1px solid var(--line); }
.sd-cta__inner { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 19px; }
.sd-cta__left { display: flex; align-items: center; gap: 12px; }
.sd-cta__title { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 24px; color: var(--white); }
.sd-cta__badge { display: inline-flex; background: #d92626; color: var(--white); border-radius: 4px; padding: 4px 10px; font-size: 10px; line-height: 13px; font-weight: 900; white-space: nowrap; transition: background-color var(--t); }
.sd-cta__badge.is-active { background: var(--green); }
.sd-cta__right { display: flex; flex-direction: column; gap: 16px; }
.sd-cta__text { font-size: 13px; line-height: 17px; color: var(--ink-4); }
.sd-cta__form { display: flex; }
.sd-cta__btn { width: 100%; padding: 15px; font-size: 13px; line-height: 17px; font-weight: 900; }
@media (min-width: 1024px) {
  .sd-cta__inner { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0 31px; }
  .sd-cta__left { gap: 24px; }
  .sd-cta__title { font-size: 24px; line-height: 29px; }
  .sd-cta__badge { font-size: 11px; line-height: 14px; font-weight: 800; }
  .sd-cta__right { flex-direction: row; align-items: center; gap: 24px; }
  .sd-cta__text { font-size: 14px; line-height: 18px; }
  .sd-cta__btn { width: auto; padding: 11px 23px; font-weight: 800; }
}

/* Responsible gambling (Showdown variant) ---------------------------------- */
.sd-rg { background: var(--navy); padding: 48px 0; }
.sd-rg__inner { display: flex; flex-direction: column; gap: 24px; }
.sd-rg__editorial { display: flex; flex-direction: column; gap: 8px; }
.sd-rg__title { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 34px; color: var(--white); }
.sd-rg__text { font-size: 14px; line-height: 20px; color: var(--ink-4); }
.sd-rg__list { display: flex; flex-direction: column; gap: 12px; }
.sd-rg-item { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 10px; align-items: center; background: var(--navy-3); border: 1px solid var(--line); border-radius: 4px; padding: 15px; transition: border-color var(--t); }
.sd-rg-item:hover { border-color: var(--blue); }
.sd-rg-item__num { grid-row: 1; grid-column: 1; font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 24px; color: var(--yellow); }
.sd-rg-item__title { grid-row: 1; grid-column: 2; font-size: 13px; line-height: 17px; font-weight: 700; color: var(--white); }
.sd-rg-item__desc { grid-row: 2; grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: var(--ink-4); }
.sd-rg-item__link { grid-row: 3; grid-column: 1 / -1; justify-self: start; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--yellow); white-space: nowrap; transition: transform var(--t); }
.sd-rg-item__link:hover { transform: translateX(2px); text-decoration: underline; }
@media (min-width: 1024px) {
  .sd-rg { border-bottom: 1px solid var(--line); padding: 80px 0 79px; }
  .sd-rg__inner { flex-direction: row; align-items: flex-start; gap: 64px; }
  .sd-rg__editorial { flex: 0 0 500px; gap: 24px; }
  .sd-rg__title { font-size: 48px; line-height: 50.4px; }
  .sd-rg__text { font-size: 15px; line-height: 22px; }
  .sd-rg__list { flex: 1 1 auto; min-width: 0; }
  .sd-rg-item { grid-template-columns: auto 1fr auto; column-gap: 16px; row-gap: 2px; }
  .sd-rg-item__num { grid-row: 1 / 3; font-size: 22px; line-height: 26px; }
  .sd-rg-item__desc { grid-row: 2; grid-column: 2; font-size: 13px; line-height: 17px; }
  .sd-rg-item__link { grid-row: 1 / 3; grid-column: 3; align-self: center; font-size: 13px; line-height: 17px; }
}