/* How It Works (34:32 / 104:*) — page-specific pieces on top of content.css. */
.hiw { display: flex; flex-direction: column; gap: 48px; padding: 48px var(--page-pad) 64px; }
.hiw .block { gap: 20px; }
.hiw .block--24 { gap: 24px; }

/* hero (34:33) */
.hiw-hero { display: flex; align-items: center; gap: 32px; padding: 48px; }
.hiw-hero__text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hiw-hero__title { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 44px; color: var(--color-text-strong); }
.hiw-hero__lead { font-size: var(--fs-lead); line-height: 24px; color: var(--color-muted); }
.guideline { display: flex; flex-direction: column; gap: 12px; width: 380px; flex: none; padding: 20px; border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.guideline__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; box-shadow: inset 0 -1px 0 var(--color-border); }
.guideline__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); line-height: 15.12px; color: var(--color-text); }
.guideline__tag { font-size: var(--fs-micro); line-height: 13px; color: var(--color-brand); }
.guideline__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guideline__cell { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--radius-sm); background: var(--color-surface); }
.guideline__label { font-size: 9px; line-height: 12px; color: var(--color-muted); }
.guideline__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16.38px; color: var(--color-text-strong); }
.guideline__value--odds { color: var(--color-brand); }

/* numbered cards (34:54): 32px number */
.hiw .num-card { gap: 16px; padding: 24px; }
.hiw .num-card__num { font-size: 32px; line-height: 40.32px; }
.hiw .num-card__title { font-size: 18px; line-height: 23px; }

/* steps (34:69) */
.steps { display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; align-items: center; gap: 24px; padding: 16px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 32px; flex: none; border-radius: var(--radius-sm); background: var(--color-brand-tint); color: var(--color-brand); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); line-height: 15.12px; }
.step__text { display: flex; flex-direction: column; gap: 4px; }
.step__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 19px; color: var(--color-text); }
.step__desc { font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }

/* bet slip explainer (34:93) */
.explainer { display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.explainer__head { display: flex; flex-direction: column; gap: 8px; }
.explainer__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 23px; color: var(--color-text-strong); }
.explainer__lead { font-size: var(--fs-body); line-height: 21px; color: var(--color-muted); }
.explainer__row { display: flex; gap: 32px; align-items: flex-start; }
.sample-slip { display: flex; flex-direction: column; gap: 16px; width: 340px; flex: none; padding: 20px; border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.sample-slip__head { display: flex; justify-content: space-between; align-items: center; }
.sample-slip__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-body); line-height: 18px; color: var(--color-text-strong); }
.sample-slip__title .betslip__count { width: 18px; height: 18px; font-size: var(--fs-micro); }
.sample-slip__tag { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); }
.sample-slip__card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.sample-slip__sel { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 16.38px; color: var(--color-text); }
.sample-slip__market { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); }
.sample-slip__stake { display: flex; align-items: flex-end; justify-content: space-between; }
.sample-slip .stake { cursor: default; }
.sample-slip .stake__input { display: inline; }
.bet-card__odds { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bet-card__odds-label { font-size: var(--fs-micro); line-height: 13px; color: var(--color-muted); }
.bet-card__odds-value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-ui); line-height: 16.38px; color: var(--color-brand); }
.stake { display: inline-flex; align-items: center; gap: 8px; width: 120px; height: 32px; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-border); }
.stake__cur { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-dim); }
.stake__input { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); line-height: 15px; color: var(--color-text); }
.betslip__count { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 10px; background: var(--color-brand); color: var(--color-on-brand); font-size: var(--fs-micro); line-height: 13px; font-weight: 800; }
/* 34:202: the badge is its own row between the title and the text (Geist 10/13 in a 2/6 plate); the mobile frame (104:192) puts it beside the title */
.info-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.info-card__badge { padding: 2px 6px; font-size: 10px; line-height: 13px; }
/* 34:106: selection and market sit 2px apart; 34:116: the two sums 8px apart; 34:123: a 36px button */
.sample-slip__sel + .sample-slip__market { margin-top: -10px; }
.sample-slip__sum + .sample-slip__sum { margin-top: -8px; }
.sample-slip__btn { padding-block: 10px; }
.sample-slip__sum { display: flex; justify-content: space-between; font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); }
.sample-slip__sum strong { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); line-height: 15.12px; color: var(--color-text); }
.sample-slip__ret { color: var(--color-brand) !important; }
.sample-slip__btn { width: 100%; cursor: default; }
.sample-slip__note { font-size: var(--fs-micro); line-height: 14px; color: #737880; text-align: center; }   /* #737880: the one colour the mockup uses only here */
.explainer__list { display: flex; flex-direction: column; gap: 16px; flex: 1; padding-top: 24px; }
.explainer__list li { display: flex; gap: 12px; }
.explainer__n { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-body); line-height: 18px; color: var(--color-brand); }
.explainer__list h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.explainer__list p { margin-top: 4px; font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }

/* browse cards (34:144) */
.browse { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
.browse__text { display: flex; flex-direction: column; gap: 8px; }
.browse__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 23px; color: var(--color-text-strong); }
.browse__desc { font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }
.browse__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.browse__tags li { padding: 6px 12px; border-radius: var(--radius-sm); background: var(--color-surface-2); font-weight: 600; font-size: var(--fs-small); line-height: 16px; color: var(--color-text); }

/* understanding odds (34:178) */
.odds-box { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.odds-box__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 25.2px; color: var(--color-text-strong); }
.odds-box__lead { font-size: var(--fs-body); line-height: 21px; color: var(--color-muted); }
.odds-formula { display: flex; align-items: center; gap: 24px; padding: 16px; border-radius: var(--radius-md); background: var(--color-bg); }
.odds-formula__cell { display: flex; flex-direction: column; gap: 4px; }
.odds-formula__label { font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); }
.odds-formula__value { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 23px; color: var(--color-text-strong); }
.odds-formula__value--brand { color: var(--color-brand); }
.odds-formula__op { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 25px; color: var(--color-muted); }
.odds-formula__op--brand { color: var(--color-brand); }

/* info cards (34:196) */
.grid-3--start { align-items: start; }
.info-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.info-card__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); line-height: 20.16px; color: var(--color-text); }
.info-card__text { font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }
.hiw__cta { align-self: flex-start; padding: 12px 24px; }

/* RG band (34:223) */
.rg-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; }
.rg-band__betstop { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: var(--fs-body); line-height: 18.2px; color: var(--color-muted); }
.rg-band__betstop img { width: 137px; height: 45px; }
.rg-band__betstop:hover { color: var(--color-text); }
.rg-band .help-pill__phone { font-size: var(--fs-ui); line-height: 17px; }

@media (max-width: 1199px) {
  .hiw { gap: 32px; padding: 24px var(--page-pad-m) 32px; }
  .hiw .block { gap: 16px; }
  .hiw .block__title { font-size: 20px; line-height: 25px; }
  .hiw-hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 24px; }   /* 104:30 */
  .hiw-hero__text { gap: 16px; }
  .hiw-hero .eyebrow { padding: 4px 8px; font-size: 10px; line-height: 13px; }   /* 104:31 */
  .hiw-hero__title { font-size: 28px; line-height: 35px; }
  .hiw-hero__lead { font-size: var(--fs-body); line-height: 21px; }
  .guideline { width: auto; padding: 16px; }   /* 104:35 */
  .hiw .num-card { gap: 16px; padding: 20px; }
  .steps { gap: 16px; }
  .step { flex-direction: column; align-items: flex-start; gap: 12px; }
  .explainer { padding: 20px; gap: 20px; }
  .explainer__row { flex-direction: column; gap: 20px; }
  .sample-slip { width: auto; }
  .explainer__list { padding-top: 0; }
  .browse, .odds-box, .info-card { padding: 20px; }
  .hiw .grid-2, .hiw .grid-3 { gap: 16px; }   /* 104:131, 104:47 */
  .hiw__cta { width: 100%; }   /* 104:211 */
  .browse__text { gap: 20px; }   /* 104:134→104:135 */
  .odds-box__title { font-size: 18px; line-height: 23px; }   /* 104:167 */
  .info-card__head { flex-direction: row; align-items: center; gap: 8px; }
  .info-card__badge { padding: 1px 6px; }
  .odds-box__lead { font-size: var(--fs-ui); line-height: 18px; }
  .odds-formula { gap: 12px; height: 70px; }   /* 104:169: one line, 72px cells */
  .odds-formula__cell { width: 72px; flex: none; }
  .rg-band { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .rg-band__betstop { flex-wrap: wrap; }
}
@media (max-width: 1199px) {
  .hiw { gap: 0; padding: 0; }
  .hiw > .hiw-hero { margin: 24px var(--page-pad-m); }
  .hiw > .block { padding: 0 var(--page-pad-m) 32px; }
  .hiw > .card { margin: 0 var(--page-pad-m) 32px; }
}
@media (max-width: 1199px) {
  .hiw .num-card__num { font-size: 28px; line-height: 35.28px; }
  .hiw .num-card__title { font-size: var(--fs-lead); line-height: 20.16px; }
  .hiw .num-card__text, .info-card__text { line-height: 18px; }
  .step__num { font-size: var(--fs-tiny); line-height: 14px; }
  .step__desc { line-height: 18px; }
  .explainer__lead { font-size: var(--fs-ui); line-height: 18px; }
  .explainer__list p { line-height: 17px; }
  .odds-formula__op { font-size: 18px; line-height: 23px; }
  .odds-formula__value { font-size: var(--fs-lead); line-height: 20.16px; }
  .hiw-hero__lead { line-height: 20px; }
}