/* ==========================================================================
   How it works — "bailrbet-how-it-works" (1440) / "bailrbet-how-it-works-mobile" (390)
   ========================================================================== */

/* Hero + wager journey ----------------------------------------------------- */
.hiw-hero { background: var(--navy); padding: 32px 0 0; }
.hiw-hero__inner { display: flex; flex-direction: column; }
.hiw-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hiw-hero__kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 14px; font-weight: 800; color: var(--yellow); }
.hiw-hero__kicker-line { width: 16px; height: 1px; background: var(--yellow); }
.hiw-hero__title { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 48px; color: var(--white); }
.hiw-hero__lead { font-size: 16px; line-height: 24px; color: var(--ink-4); }
.hiw-feature { display: flex; flex-direction: column; gap: 8px; background: var(--navy-2); border: 1px solid var(--line); border-radius: 6px; padding: 15px; }
.hiw-feature__title { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--yellow-soft); }
.hiw-feature__text { font-size: 13px; line-height: 18px; color: var(--ink-4); }
.hiw-journey { display: flex; flex-direction: column; gap: 20px; margin: 32px calc(-1 * var(--gutter)) 0; padding: 23px var(--gutter) 31px; background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hiw-journey__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 24px; color: var(--white); }
.hiw-journey__list { display: flex; flex-direction: column; gap: 12px; }
.hiw-node { display: flex; align-items: center; gap: 16px; transition: opacity var(--t); }
.hiw-node:hover .hiw-node__title { color: var(--yellow); }
.hiw-node__circle { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); border: 1px solid var(--line); font-family: var(--font-display); font-weight: 900; font-size: 14px; line-height: 17px; color: var(--white); transition: background-color var(--t), border-color var(--t); }
.hiw-node.is-active .hiw-node__circle { background: var(--blue); border-color: var(--yellow); }
.hiw-node__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hiw-node__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 19px; color: var(--white); transition: color var(--t); }
.hiw-node__desc { font-size: 11px; line-height: 14px; color: var(--ink-4); }
@media (min-width: 1024px) {
  .hiw-hero { background: var(--navy-2); border-bottom: 1px solid var(--line); padding: 64px 0 63px; }
  .hiw-hero__inner { flex-direction: row; align-items: flex-start; gap: 64px; }
  .hiw-hero__copy { flex: 1 1 auto; min-width: 0; }
  .hiw-hero__kicker { font-size: 12px; line-height: 16px; }
  .hiw-hero__title { font-size: 64px; line-height: 60px; }
  .hiw-hero__lead { font-size: 18px; line-height: 26px; }
  .hiw-feature { gap: 12px; background: var(--navy); padding: 19px; }
  .hiw-feature__title { font-size: 14px; line-height: 18px; }
  .hiw-feature__text { font-size: 14px; line-height: 22px; }
  .hiw-journey { flex: 0 0 440px; gap: 16px; margin: 0; padding: 23px; background: var(--navy); border: 1px solid var(--blue); border-radius: 8px; }
  .hiw-node__circle { width: 36px; height: 36px; background: var(--navy-2); font-size: 16px; line-height: 19px; }
  .hiw-node__title { font-weight: 800; font-size: 14px; line-height: 17px; }
}

/* Step sections (shared) --------------------------------------------------- */
.hiw-step { padding: 32px 0; }
.hiw-step--light { background: var(--cream); color: var(--ink); }
.hiw-step--dark { background: var(--navy); color: var(--white); }
.hiw-step--02, .hiw-step--04 { border-top: 1px solid var(--line); padding-top: 31px; }
.hiw-step--03 { border-top: 1px solid var(--line-light); padding-top: 31px; }
.hiw-step__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.hiw-step__label { display: flex; align-items: center; gap: 8px; }
.hiw-step__num { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 29px; color: var(--blue); }
.hiw-step--dark .hiw-step__num { color: var(--yellow); }
.hiw-step__rule { width: 16px; height: 2px; background: var(--yellow); }
.hiw-step__tag { font-size: 11px; line-height: 14px; font-weight: 800; text-transform: uppercase; color: var(--ink-2); }
.hiw-step--dark .hiw-step__tag { color: var(--ink-4); }
.hiw-step__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 34px; text-transform: uppercase; color: var(--navy); }
.hiw-step--dark .hiw-step__title { color: var(--white); }
.hiw-step__grid { display: flex; flex-direction: column; gap: 24px; }
.hiw-step__copy { display: flex; flex-direction: column; gap: 16px; }
.hiw-step__text { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.hiw-step--dark .hiw-step__text { color: var(--ink-4); }
@media (min-width: 1024px) {
  .hiw-step { padding: 80px 0; }
  .hiw-step--02, .hiw-step--04 { border-bottom: 1px solid var(--line); padding-top: 79px; padding-bottom: 79px; }
  .hiw-step--03 { border-top: 0; padding-top: 80px; }
  .hiw-step__head { gap: 8px; margin-bottom: 40px; }
  .hiw-step__label { gap: 12px; }
  .hiw-step__num { font-size: 32px; line-height: 38px; }
  .hiw-step__rule { width: 24px; }
  .hiw-step__tag { font-size: 12px; line-height: 16px; }
  .hiw-step__title { font-size: 40px; line-height: 48px; }
  .hiw-step__grid { flex-direction: row; align-items: flex-start; gap: 48px; }
  .hiw-step__grid--center { align-items: center; }
  .hiw-step__copy { flex: 0 0 360px; }
  .hiw-step__text { font-size: 14px; line-height: 22px; }
}

/* Step 01: preview ---------------------------------------------------------- */
.hiw-tip { display: flex; flex-direction: column; gap: 4px; background: var(--white); border: 1px solid var(--line-light); border-radius: 4px; padding: 15px; }
.hiw-tip__title { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--blue); text-transform: uppercase; }
.hiw-tip__text { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.hiw-preview { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-light); border-radius: 6px; overflow: hidden; }
.hiw-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--navy); padding: 11px 12px 12px; }
.hiw-preview__head-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hiw-preview__league { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 19px; color: var(--white); white-space: nowrap; }
.hiw-preview__meta { font-size: 9px; line-height: 14px; color: var(--ink-4); white-space: nowrap; }
.hiw-preview__view { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--yellow); white-space: nowrap; }
.hiw-preview__view:hover { text-decoration: underline; }
.hiw-preview__row { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.hiw-preview__teams { display: flex; flex-direction: column; gap: 4px; }
.hiw-preview__time { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--blue); }
.hiw-preview__team { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--navy); }
.hiw-preview__market { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hiw-preview__market-label { font-size: 11px; line-height: 14px; color: var(--ink-2); }
.hiw-preview__market-name { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--navy); }
.hiw-preview__odds { display: flex; gap: 8px; }
.hiw-odd { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1 1 0; min-width: 0; border: 1px solid var(--line-light); border-radius: 4px; padding: 11px; }
.hiw-odd__label { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.hiw-odd__price { font-size: 13px; line-height: 18px; font-weight: 800; color: var(--blue); }
.hiw-preview__more { align-self: flex-start; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.hiw-preview__more:hover { text-decoration: underline; }
.hiw-preview__note { display: flex; align-items: center; gap: 8px; background: var(--navy-2); padding: 12px 12px 11px; font-size: 11px; line-height: 14px; font-weight: 700; color: var(--yellow-soft); text-transform: uppercase; }
.hiw-preview__note .icon { color: var(--yellow); }
@media (min-width: 1024px) {
  .hiw-tip { flex-direction: row; gap: 0; }
  .hiw-tip__title { flex: 0 0 88px; font-size: 12px; line-height: 16px; }
  .hiw-tip__text { flex: 1 1 auto; font-size: 12px; line-height: 18px; }
  .hiw-preview { flex: 1 1 auto; min-width: 0; }
  .hiw-preview__head { padding: 13px 15px 14px; }
  .hiw-preview__head-left { flex-direction: row; align-items: center; gap: 8px; }
  .hiw-preview__league { font-size: 22px; line-height: 26px; }
  .hiw-preview__meta { font-size: 11px; }
  .hiw-preview__row { flex-direction: row; align-items: center; gap: 20px; padding: 20px 19px; }
  .hiw-preview__teams { flex: 0 0 200px; }
  .hiw-preview__time { color: var(--ink-3); }
  .hiw-preview__team { font-size: 15px; line-height: 20px; color: var(--ink); }
  .hiw-preview__market { flex: 0 0 120px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .hiw-preview__market-label { font-size: 10px; line-height: 13px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; }
  .hiw-preview__market-name { font-size: 13px; line-height: 17px; font-weight: 400; color: var(--ink-2); }
  .hiw-preview__odds { flex: 1 1 auto; min-width: 0; }
  .hiw-odd__price { line-height: 17px; }
  .hiw-preview__more { align-self: center; font-size: 12px; line-height: 16px; }
  .hiw-preview__note { padding: 12px 19px 11px; }
}

/* Step 02: outcome picker --------------------------------------------------- */
.hiw-process { display: flex; flex-direction: column; gap: 6px; background: var(--navy-2); border: 1px solid var(--line); border-radius: 4px; padding: 11px; }
.hiw-process__title { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--yellow); text-transform: uppercase; }
.hiw-process__map { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 14px; font-weight: 700; color: var(--white); }
.hiw-process__arrow { font-weight: 400; color: var(--ink-4); }
.hiw-process__to { color: var(--yellow); }
.hiw-picker { display: flex; flex-direction: column; gap: 12px; background: var(--navy-2); border: 1px solid var(--blue); border-radius: 6px; padding: 15px; }
.hiw-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hiw-picker__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 19px; color: var(--white); }
.hiw-picker__hint { font-size: 10px; line-height: 13px; font-weight: 800; color: var(--ink-4); white-space: nowrap; }
.hiw-picker__options { display: flex; flex-direction: column; gap: 8px; }
.hiw-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: var(--navy); border: 1px solid var(--line); border-radius: 4px; padding: 13px; color: var(--ink-4); transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t); }
.hiw-pick:hover { border-color: var(--blue); }
.hiw-pick:active { transform: scale(.985); }
.hiw-pick__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hiw-pick__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--line); transition: background-color var(--t), border-color var(--t); }
.hiw-pick__label { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 22px; white-space: nowrap; }
.hiw-pick__price { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 24px; white-space: nowrap; }
.hiw-pick.is-selected { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.hiw-pick.is-selected .hiw-pick__dot { background: var(--navy); border-color: var(--navy); }
@media (min-width: 1024px) {
  .hiw-step--02 .hiw-step__copy { flex-basis: 420px; }
  .hiw-process { gap: 8px; padding: 15px; }
  .hiw-process__map { gap: 8px; font-size: 12px; line-height: 16px; }
  .hiw-picker { flex: 1 1 auto; min-width: 0; gap: 16px; border-radius: 8px; padding: 31px; }
  .hiw-picker__title { font-weight: 800; font-size: 20px; line-height: 24px; }
  .hiw-picker__hint { font-size: 11px; line-height: 14px; font-weight: 400; }
  .hiw-picker__options { flex-direction: row; gap: 16px; }
  .hiw-pick { flex: 1 1 0; min-width: 0; border-radius: 6px; padding: 19px; }
  .hiw-pick__left { gap: 12px; }
  .hiw-pick__dot { width: 12px; height: 12px; }
  .hiw-pick__label { font-size: 24px; line-height: 29px; }
  .hiw-pick__price { font-size: 28px; line-height: 34px; }
}

/* Step 03: pointers, formula, slip ----------------------------------------- */
.hiw-pointers { display: flex; flex-direction: column; gap: 8px; }
.hiw-pointer { display: flex; align-items: center; gap: 8px; }
.hiw-pointer__key { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 4px; background: var(--navy); font-family: var(--font-display); font-weight: 900; font-size: 11px; line-height: 13px; color: var(--yellow); }
.hiw-pointer__text { flex: 1 1 auto; font-size: 11px; line-height: 14px; color: var(--ink-2); }
.hiw-pointer__text strong { color: var(--navy); }
.hiw-formula { display: flex; flex-direction: column; gap: 6px; order: 3; margin-top: -4px; background: var(--white); border: 1px solid var(--line-light); border-radius: 4px; padding: 11px; }
.hiw-formula__title { font-size: 10px; line-height: 13px; font-weight: 800; color: var(--ink-2); }
.hiw-formula__rule { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--ink-2); }
.hiw-formula__result { font-size: 13px; line-height: 18px; font-weight: 800; color: var(--green); }
.hiw-slip { display: flex; flex-direction: column; gap: 12px; order: 2; background: var(--navy-2); border: 2px solid var(--blue); border-radius: 6px; padding: 14px; color: var(--white); }
.hiw-slip__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hiw-slip__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 24px; }
.hiw-slip__badge { display: inline-flex; background: var(--yellow); color: var(--navy); border-radius: 3px; padding: 2px 6px; font-size: 10px; line-height: 13px; font-weight: 800; white-space: nowrap; }
.hiw-slip__card { display: flex; flex-direction: column; gap: 8px; background: var(--navy); border: 1px solid var(--line); border-radius: 4px; padding: 9px; }
.hiw-slip__card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hiw-slip__tagline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hiw-slip__tag { display: inline-flex; background: var(--blue); color: var(--white); border-radius: 2px; padding: 2px 4px; font-size: 10px; line-height: 13px; font-weight: 800; }
.hiw-slip__event { font-size: 11px; line-height: 14px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-slip__remove { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--yellow); white-space: nowrap; }
.hiw-slip__card-details { display: flex; flex-direction: column; gap: 2px; }
.hiw-slip__market { font-size: 11px; line-height: 14px; color: var(--ink-4); }
.hiw-slip__sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hiw-slip__sel-name { font-size: 13px; line-height: 18px; font-weight: 700; }
.hiw-slip__sel-odds { font-size: 13px; line-height: 18px; font-weight: 800; color: var(--yellow); }
.hiw-slip__stake { display: flex; flex-direction: column; gap: 6px; }
.hiw-slip__label { font-size: 10px; line-height: 13px; font-weight: 800; color: var(--ink-4); }
.hiw-slip__input { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 9px; background: var(--navy); border: 1px solid var(--line); border-radius: 4px; font-size: 13px; line-height: 18px; font-weight: 700; transition: border-color var(--t); }
.hiw-slip__input:focus-within { border-color: var(--blue); }
.hiw-slip__field { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: 0; padding: 0; text-align: right; font: inherit; color: var(--white); -moz-appearance: textfield; }
.hiw-slip__field::-webkit-outer-spin-button, .hiw-slip__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hiw-slip__line { height: 1px; margin-bottom: -1px; background: var(--line); }
.hiw-slip__return { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hiw-slip__return-label { font-size: 11px; line-height: 14px; color: var(--ink-4); }
.hiw-slip__return-value { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 26px; color: var(--green); }
.hiw-slip__place { padding: 11px; font-size: 13px; line-height: 18px; font-weight: 800; }
.hiw-slip__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 14px; }
.hiw-slip__foot-text { color: var(--ink-4); }
.hiw-slip__foot-link { font-weight: 600; color: var(--yellow); white-space: nowrap; }
.hiw-slip__foot-link:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .hiw-step__grid--slip { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; row-gap: 24px; align-items: start; }
  .hiw-step--03 .hiw-step__copy { grid-column: 1; grid-row: 1; flex-basis: auto; gap: 24px; }
  .hiw-pointers { gap: 12px; }
  .hiw-pointer { gap: 12px; }
  .hiw-pointer__key { width: 24px; height: 24px; font-size: 14px; line-height: 17px; }
  .hiw-pointer__text { font-size: 13px; line-height: 17px; }
  .hiw-formula { grid-column: 1; grid-row: 2; order: 0; margin-top: 0; gap: 8px; border-radius: 6px; padding: 15px; }
  .hiw-formula__title { font-size: 11px; line-height: 14px; color: var(--ink-3); }
  .hiw-formula__rule { font-size: 12px; line-height: 16px; }
  .hiw-formula__result { font-size: 14px; line-height: 18px; }
  .hiw-slip { grid-column: 2; grid-row: 1 / 3; order: 0; gap: 16px; padding: 18px; }
  .hiw-slip__title { font-size: 22px; line-height: 26px; }
  .hiw-slip__badge { border-radius: 4px; padding: 4px 8px; font-size: 11px; line-height: 14px; }
  .hiw-slip__card { gap: 10px; padding: 11px; }
  .hiw-slip__tag { border-radius: 3px; padding: 2px 6px; font-weight: 700; }
  .hiw-slip__card-details { gap: 4px; }
  .hiw-slip__market { font-size: 12px; line-height: 16px; }
  .hiw-slip__sel-name, .hiw-slip__sel-odds { font-size: 14px; line-height: 18px; }
  .hiw-slip__label { font-size: 11px; line-height: 14px; font-weight: 700; }
  .hiw-slip__input { height: 42px; padding: 0 11px; font-size: 14px; }
  .hiw-slip__return-label { font-size: 12px; line-height: 16px; }
  .hiw-slip__return-value { font-size: 24px; line-height: 29px; }
  .hiw-slip__place { padding: 13px; font-size: 14px; }
  .hiw-slip__foot { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Step 04: checks + confirmation ------------------------------------------- */
.hiw-checks { display: flex; flex-direction: column; gap: 12px; background: var(--navy-2); border: 1px solid var(--line); border-radius: 6px; padding: 15px; }
.hiw-checks__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 19px; color: var(--yellow); }
.hiw-checks__list { display: flex; flex-direction: column; gap: 8px; }
.hiw-check { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 18px; color: var(--white); }
.hiw-check__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hiw-check .icon { width: 12px; height: 12px; color: var(--green); }
.hiw-check__colon { display: none; }
.hiw-check__value { white-space: nowrap; }
.hiw-check--highlight .hiw-check__value { color: var(--green); }
.hiw-mock { display: flex; flex-direction: column; gap: 12px; margin-top: -4px; background: var(--navy-2); border: 2px solid var(--yellow); border-radius: 6px; padding: 14px; color: var(--white); }
.hiw-mock__info { display: flex; flex-direction: column; gap: 6px; }
.hiw-mock__label { font-size: 10px; line-height: 13px; font-weight: 800; color: var(--ink-4); }
.hiw-mock__stake { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 10px; background: var(--navy); border-radius: 4px; font-size: 13px; line-height: 18px; font-weight: 700; }
.hiw-mock__return { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hiw-mock__return-label { font-size: 11px; line-height: 14px; color: var(--ink-4); }
.hiw-mock__return-value { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 24px; color: var(--green); }
.hiw-mock__cta { padding: 13px; font-size: 14px; line-height: 18px; font-weight: 800; }
.hiw-mock__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 14px; }
.hiw-mock__foot-text { color: var(--ink-4); }
.hiw-mock__foot-link { font-weight: 600; color: var(--yellow); white-space: nowrap; }
.hiw-mock__foot-link:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .hiw-step__grid--confirm { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; row-gap: 24px; align-items: center; }
  .hiw-step--04 .hiw-step__copy { grid-column: 1; grid-row: 1; flex-basis: auto; }
  .hiw-checks { grid-column: 1; grid-row: 2; padding: 19px; }
  .hiw-checks__title { font-weight: 800; font-size: 18px; line-height: 22px; }
  .hiw-checks__list { gap: 12px; }
  .hiw-check { justify-content: flex-start; gap: 0; font-size: 13px; line-height: 17px; }
  .hiw-check__left { gap: 12px; }
  .hiw-check .icon { width: 14px; height: 14px; }
  .hiw-check__colon { display: inline; }
  .hiw-mock { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-top: 0; gap: 16px; padding: 22px; }
  .hiw-mock__label { font-size: 11px; line-height: 14px; font-weight: 700; }
  .hiw-mock__stake { height: 42px; padding: 0 12px; font-size: 14px; }
  .hiw-mock__return-label { font-size: 12px; line-height: 16px; }
  .hiw-mock__cta { padding: 15px; font-size: 16px; line-height: 21px; }
}

/* Playbook summary ---------------------------------------------------------- */
.hiw-recap { background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hiw-recap__inner { display: flex; flex-direction: column; gap: 16px; padding: 23px 24px; }
.hiw-recap__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 24px; color: var(--white); }
.hiw-recap__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 16px; }
.hiw-recap-card { display: flex; flex-direction: column; gap: 4px; background: var(--navy); border: 1px solid var(--line); border-radius: 4px; padding: 11px; transition: border-color var(--t); }
.hiw-recap-card:hover { border-color: var(--blue); }
.hiw-recap-card__kicker { font-size: 10px; line-height: 13px; font-weight: 800; color: var(--yellow); }
.hiw-recap-card__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 19px; color: var(--white); }
.hiw-recap-card__text { font-size: 11px; line-height: 14px; color: var(--ink-4); }
@media (min-width: 1024px) {
  .hiw-recap { border-top: 0; }
  .hiw-recap__inner { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; gap: 24px; padding: 48px 0 47px; }
  .hiw-recap__title { font-weight: 900; font-size: 28px; line-height: 34px; }
  .hiw-recap__grid { grid-template-columns: repeat(4, 1fr); column-gap: 16px; }
  .hiw-recap-card { gap: 10px; padding: 19px; }
  .hiw-recap-card__title { font-weight: 900; font-size: 20px; line-height: 24px; }
}

/* Transition band ------------------------------------------------------------ */
.hiw-band { background: var(--blue); color: var(--white); padding: 20px 0; }
.hiw-band__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hiw-band__title { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 24px; }
.hiw-band__text { font-size: 11px; line-height: 14px; font-weight: 700; color: var(--yellow-soft); }
@media (min-width: 1024px) {
  .hiw-band__inner { flex-direction: row; justify-content: space-between; gap: 24px; text-align: left; }
  .hiw-band__title { font-size: 24px; line-height: 29px; }
  .hiw-band__text { font-size: 12px; line-height: 16px; }
}

/* Responsible gambling centre — page-specific mobile layout ----------------- */
.rg-centre--hiw { border: 0; padding: 24px 0; }
.rg-centre--hiw .rg-centre__inner { width: min(var(--content), 100% - 48px); }
.rg-centre--hiw .rg-centre__editorial { max-width: 250px; }
.rg-centre--hiw .rg-centre__title { font-size: 28px; line-height: 34px; }
.rg-centre--hiw .rg-centre__list { gap: 10px; }
.rg-centre--hiw .rg-item { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 8px; align-items: center; padding: 11px; }
.rg-centre--hiw .rg-item__info, .rg-centre--hiw .rg-item__labels { display: contents; }
.rg-centre--hiw .rg-item__num { grid-row: 1; grid-column: 1; font-size: 20px; line-height: 24px; }
.rg-centre--hiw .rg-item__title { grid-row: 1; grid-column: 2; font-size: 13px; line-height: 18px; }
.rg-centre--hiw .rg-item__desc { grid-row: 2; grid-column: 1 / -1; font-size: 11px; line-height: 14px; }
.rg-centre--hiw .rg-item__link { grid-row: 3; grid-column: 1 / -1; justify-self: start; font-size: 11px; line-height: 14px; }
.rg-centre--hiw .rg-item .d-only { display: inline; }
.rg-centre--hiw .rg-item .m-only { display: none; }
@media (min-width: 1024px) {
  .rg-centre--hiw { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 63px 0; }
  .rg-centre--hiw .rg-centre__inner { width: min(var(--content), 100% - 2 * var(--gutter)); }
  .rg-centre--hiw .rg-centre__editorial { max-width: none; }
  .rg-centre--hiw .rg-centre__title { font-size: 40px; line-height: 48px; }
  .rg-centre--hiw .rg-centre__kicker { font-size: 13px; line-height: 17px; }
  .rg-centre--hiw .rg-centre__list { gap: 12px; }
  .rg-centre--hiw .rg-item { display: flex; padding: 15px; }
  .rg-centre--hiw .rg-item__info, .rg-centre--hiw .rg-item__labels { display: flex; }
  .rg-centre--hiw .rg-item__num { font-size: 22px; line-height: 26px; }
  .rg-centre--hiw .rg-item__title { font-size: 13px; line-height: 17px; }
  .rg-centre--hiw .rg-item__desc { font-size: 13px; line-height: 17px; }
  .rg-centre--hiw .rg-item__link { font-size: 13px; line-height: 17px; }
}

/* Long selection names must not push prices out of their boxes on narrower desktops. */
.hiw-odd__label, .hiw-pick__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .hiw-preview__teams { flex-basis: 160px; }
  .hiw-preview__market { display: none; }
  .hiw-odd { padding-inline: 8px; }
  .hiw-odd__label { display: none; }
  .hiw-odd__price { margin-inline: auto; }
  .hiw-journey { flex-basis: 360px; }
  .hiw-step__copy { flex-basis: 300px; }
  .hiw-step__grid--slip, .hiw-step__grid--confirm { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; }
}