/* Shared patterns of the inner pages: page intro, section heads, numbered
 * steps, definition rows. Each page's own numbers live in pages/<page>.css. */

.container--wide { max-width: 1440px; padding-inline: 120px; }        /* betstop, deposit-limits, about: 1200 content */
.container--narrow { max-width: 1440px; padding-inline: 280px; }      /* legal: 880 content */

.section-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--color-text); }
.section-title--sm { font-size: 20px; line-height: 27px; letter-spacing: .03em; }
.section-lead { font-size: 14px; line-height: 18px; color: var(--color-muted); }
.section-lead--lg { font-size: 15px; line-height: 20px; }
.section-head { display: flex; flex-direction: column; gap: 8px; }

/* ── page intro (57:35 betstop; other pages override sizes) ───────────── */
.intro { background: var(--color-surface-2); }
.intro__inner { display: flex; flex-direction: column; gap: 20px; padding-block: 56px; }
.intro__heading { display: flex; flex-direction: column; gap: 8px; }
.intro__title { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 59px; color: var(--color-text); }
.intro__sub { font-weight: 700; font-size: 20px; line-height: 26px; color: var(--color-muted); }
.intro__lead { max-width: 720px; font-size: 15px; line-height: 24px; color: var(--color-muted); }
.intro__eyebrow { font-weight: 700; font-size: 11px; line-height: 14px; color: var(--color-muted-3); letter-spacing: var(--ls-label); }
.intro__cta { display: flex; flex-direction: column; gap: 12px; max-width: 600px; height: 100px; padding: 8px 0; }   /* 57:42 is a fixed 100px frame */
.intro__btn { align-self: flex-start; padding: 14px 28px; }
.intro__note { font-size: 13px; line-height: 17px; color: var(--color-muted-3); }

/* ── numbered steps (57:50) ───────────────────────────────────────────── */
.steps-section { padding: 80px 0; background: #fff; }
.steps-section .section-head { margin-bottom: 40px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; counter-reset: step; }
.step { display: flex; flex-direction: column; gap: 12px; position: relative; }
.step__num { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 43px; color: var(--color-brand); }
.step__title { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-text); letter-spacing: .04em; }
.step__text { font-size: 14px; line-height: 22px; color: var(--color-muted); }
.step__link { font-weight: 600; font-size: 13px; line-height: 17px; color: var(--color-brand); text-decoration: none; }
.step__link:hover { text-decoration: underline; }
/* the 120px connector line between steps (57:56) */
.steps--lined { gap: 48px; }
.steps--lined .step__title { white-space: nowrap; }   /* single-line in the mockup; 3px of tracking spill into the 48px gap */
.steps--lined .step + .step::before { content: ""; position: absolute; top: 0; left: -48px; width: 48px; height: 1px; background: var(--color-border); }

/* ── definition rows (57:70) ──────────────────────────────────────────── */
.rows-section { padding: 80px 0; background: var(--color-surface-3); }
.rows-section .section-head { margin-bottom: 40px; }
.info-rows { display: flex; flex-direction: column; }
.info-row { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: center; padding: 20px 0; box-shadow: inset 0 -1px 0 var(--color-border); }
.info-row:first-child { box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
.info-row__title { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-text); }
.info-row__text { font-size: 14px; line-height: 20px; color: var(--color-muted); }

@media (max-width: 1199px) {
  .container--wide, .container--narrow { padding-inline: var(--container-pad-mobile); }
  .section-title { font-size: 20px; line-height: 27px; }
  .section-lead, .section-lead--lg { font-size: 13px; line-height: 17px; }
  .section-head { gap: 6px; }

  .intro__inner { gap: 16px; padding-block: 32px; }
  .intro__heading { gap: 4px; }
  .intro__title { font-size: 32px; line-height: 43px; }
  .intro__sub { font-size: 16px; line-height: 21px; }
  .intro__lead { font-size: 14px; line-height: 20px; }
  .intro__eyebrow { font-size: 10px; line-height: 13px; }
  .intro__cta { padding: 0; max-width: none; height: auto; }
  .intro__btn { align-self: stretch; padding: 12px 24px; font-size: 13px; line-height: 17px; }
  .intro__note { font-size: 12px; line-height: 16px; }

  .steps-section { padding: 40px 0; }
  .steps-section .section-head { margin-bottom: 24px; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .step { gap: 8px; }
  .step__title { font-size: 13px; line-height: 17px; }
  .steps--lined { gap: 48px; }                       /* 24 + rule + 24 (90:318) */
  .steps--lined .step + .step::before { left: 0; right: 0; top: -24px; width: auto; }
  .steps--lined .step__title { white-space: normal; }
  .step__link { font-weight: 700; font-size: 12px; line-height: 16px; }
  .step__text { font-size: 13px; line-height: 18px; }

  .rows-section { padding: 40px 0; background: var(--color-surface-2); box-shadow: none; }
  .rows-section .section-head { margin-bottom: 24px; }
  .info-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .info-row__title { font-size: 12px; line-height: 16px; }
  .info-row__text { font-size: 13px; line-height: 18px; }
}