/* Responsible Gambling (38:5 / 105:5): full-width bands with 80px padding. */
.rg { display: flex; flex-direction: column; }
.rg-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 64px var(--page-pad-wide); }   /* 38:34: the inner column gap is 16 */
.rg-hero__tags { display: flex; gap: 8px; align-items: center; }
.rg-hero__title { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 50px; color: var(--color-text-strong); }
.rg-hero__lead { max-width: 800px; font-size: var(--fs-lead); line-height: 24px; color: var(--color-muted); }

.rg-band { display: flex; flex-direction: column; gap: 24px; padding: 48px var(--page-pad-wide); }
.rg-band--surface { gap: 32px; padding: 56px var(--page-pad-wide); background: var(--color-surface); }
.rg-band--last { padding-bottom: 64px; }
.rg-band__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }   /* 38:43 */
.rg-band__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h4); line-height: 28px; color: var(--color-text-strong); }
.rg-band__lead { font-size: var(--fs-body); line-height: 18.2px; color: var(--color-muted); }
.rg-band--surface .rg-band__head { gap: 16px; }   /* 152:53 */
.rg-band--surface .rg-band__lead { line-height: 24px; }
.rg-band__foot { display: none; font-size: var(--fs-body); line-height: 18px; color: var(--color-muted); }   /* 161:31: only the mobile frame has this line */
.rg .grid-3 { align-items: start; }
.rg .num-card { gap: 16px; padding: 24px; text-decoration: none; }
.rg-tools .num-card:nth-child(3) { gap: 10px; padding-bottom: 16px; }   /* 38:59: the two-line card is drawn at the 163 row height (gap 10, text ends 16 above the edge) */
.rg .num-card__num { font-size: 32px; line-height: 40px; }
.rg .num-card__title { font-size: 18px; line-height: 23px; }
.num-card--link { transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.num-card--link:hover { box-shadow: inset 0 0 0 1px var(--color-border-2); transform: translateY(-2px); }

.rg-split { display: flex; gap: 48px; align-items: center; padding: 48px var(--page-pad-wide); }
.rg-split--rev .rg-split__text { order: 2; }
.rg-split--surface { background: var(--color-surface); align-items: flex-start; }
.rg-split__text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.rg-split__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 35px; color: var(--color-text-strong); }
.rg-split__lead { font-size: 15px; line-height: 22px; color: var(--color-muted); }
.rg-split--surface .rg-split__lead { max-width: 700px; font-size: var(--fs-body); line-height: 24px; }   /* 152:18 */
.rg-split__note { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: var(--fs-ui); line-height: 17px; color: var(--color-text); }
.rg-panel { display: flex; flex-direction: column; gap: 16px; width: 420px; flex: none; padding: 24px; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.rg-panel--deep { background: var(--color-surface-3); }
.rg-panel--wide { width: 520px; }
.rg-panel__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--color-border); }
.rg-panel__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lead); line-height: 20.16px; color: var(--color-text); padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--color-border); }
.rg-panel__head .rg-panel__title { padding-bottom: 0; box-shadow: none; }
.rg-panel__rows { display: flex; flex-direction: column; gap: 12px; }
.rg-panel__rows--lined { padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--color-border); }
.rg-panel__row { display: flex; justify-content: space-between; font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }
.rg-panel__row strong { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 19px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.rg-panel--deep .rg-panel__row { font-size: var(--fs-body); line-height: 18.2px; }
.rg-panel--deep .rg-panel__row strong { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); line-height: 18px; }
.rg-panel--deep .rg-panel__rows { gap: 16px; }   /* 152:34→152:37 */
.rg-panel--deep .btn--ghost { color: var(--color-muted); padding-block: 13px; }   /* 152:43: 42px with its 1px border */
.rg-panel__brand { color: var(--color-brand) !important; }
.rg-panel__danger { color: var(--color-danger-text) !important; }
.rg-panel__hint { align-self: flex-start; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-surface-2); font-size: var(--fs-tiny); line-height: 14.3px; color: var(--color-muted); }
.rg-panel__opts { display: flex; flex-direction: column; gap: 8px; }
.rg-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-border); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.rg-opt:hover { background: var(--color-surface-2-hover); }
.rg-opt__label { font-weight: 600; font-size: var(--fs-ui); line-height: 17px; color: var(--color-text); }
.rg-opt__state { font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); }
.rg-opt.is-active { background: var(--color-brand-tint); box-shadow: inset 0 0 0 1px var(--color-brand); }
.rg-opt.is-active .rg-opt__label, .rg-opt.is-active .rg-opt__state { color: var(--color-brand); }
.rg-opt.is-active .rg-opt__state { font-weight: 700; }
.rg-opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.rg-items { display: flex; flex-direction: column; gap: 16px; }
.rg-items div { display: flex; flex-direction: column; gap: 4px; }
.rg-items dt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18px; color: var(--color-text); }
.rg-items dd { font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }
.rg-se .rg-items dt { font-size: 15px; line-height: 19px; }
.rg-se .rg-items dd { line-height: 21px; }

.rg-se { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.rg-se__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 700px; }
.rg-se__side { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 320px; flex: none; }
.rg-se__side img { width: 180px; height: 59px; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
.metric { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.metric + .metric { box-shadow: inset 1px 0 0 var(--color-border); }
.metric dt { font-size: var(--fs-small); line-height: 16px; color: var(--color-muted); text-transform: uppercase; }
.metric dd { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: 28px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.metric__neg { color: var(--color-danger) !important; }

.rg-callout { padding: 16px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); font-size: var(--fs-ui); line-height: 19.5px; color: var(--color-muted); }
.rg-split--signs .rg-split__text { max-width: 712px; }
.rg-signs { display: flex; flex-direction: column; gap: 12px; }
.rg-signs li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
.rg-signs__mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--color-brand-tint); color: var(--color-brand); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-micro); line-height: 13px; }

.rg-info-list { display: flex; flex-direction: column; gap: 40px; padding: 56px var(--page-pad-wide) 48px; }
.rg-info-list__eyebrow { align-self: flex-start; }
.rg-topic { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; scroll-margin-top: 80px; }   /* 155:4: full-width block, 800px text */
.rg-topic > * { max-width: 800px; }
/* 155:9: a hairline between topics with 40px of air on both sides (the list gap gives the first 40) */
.rg-topic + .rg-topic { padding-top: 41px; background: linear-gradient(var(--color-border), var(--color-border)) 0 0 / 100% 1px no-repeat; }
.rg-topic__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h4); line-height: 28px; color: var(--color-text-strong); }
.rg-topic__p { font-size: 15px; line-height: 24px; color: var(--color-muted); }
.rg-topic__link { position: relative; font-weight: 700; font-size: var(--fs-ui); line-height: 17px; color: var(--color-brand); text-decoration: none; }
.rg-topic__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.rg-topic__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.reminder { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.reminder__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 19px; color: var(--color-brand); }
.reminder__text { font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }

@media (max-width: 1199px) {
  .rg-hero { gap: 16px; padding: 32px var(--page-pad-m); }
  .rg-hero__title { font-size: 32px; line-height: 40px; }
  .rg-hero__lead { font-size: var(--fs-body); line-height: 22px; }
  .rg-band { gap: 24px; padding: 32px var(--page-pad-m); }   /* 105:35 */
  .rg-band__title { font-size: 20px; line-height: 25.2px; }
  .rg-band__lead { line-height: 20px; }
  .rg-band--se { gap: 24px; padding: 48px var(--page-pad-m); }   /* 105:133 */
  .rg-band--surface { gap: 32px; padding: 56px var(--page-pad-m); }   /* 161:23 */
  .rg-band--surface .rg-band__lead { line-height: 24px; }
  .rg-band--last { gap: 24px; padding: 32px var(--page-pad-m) 64px; }   /* 161:141 */
  .rg-band--last .rg-band__title { font-size: 22px; line-height: 28px; }   /* 161:142 */
  .rg-split { flex-direction: column; align-items: stretch; gap: 24px; padding: 32px var(--page-pad-m); }
  .rg-split--rev .rg-split__text { order: -1; }   /* 105:83: text above the panel */
  .rg-split__title { font-size: 24px; line-height: 30px; }
  .rg-split__lead { font-size: var(--fs-body); line-height: 22px; }
  /* 105:59 / 105:84: title→lead 12, then 24 between the lead, the note and the button */
  .rg-split:not(.rg-split--surface):not(.rg-split--signs) .rg-split__text { gap: 24px; }
  .rg-split:not(.rg-split--surface):not(.rg-split--signs) .rg-split__title { margin-bottom: -12px; }
  .rg-split__text > .btn--md { width: 100%; padding-block: 13px; font-size: var(--fs-body); line-height: 18px; }   /* 105:66: 44px, full width */
  .rg-split--signs .rg-split__lead { font-size: 15px; line-height: 22px; }   /* 105:173 */
  .rg-panel, .rg-panel--wide { width: auto; padding: 20px; }
  .rg-panel--deep { padding: 24px; }   /* 105:119 */
  .rg-se { flex-direction: column; align-items: stretch; gap: 24px; }
  .rg-se__side { width: auto; align-items: center; }   /* 161:22: the logo is centred, the button full width */
  .rg-se__side .btn { width: 100%; }
  /* 105:152: four separate cards, two per row */
  .metrics { grid-template-columns: 1fr 1fr; gap: 12px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .metric { gap: 6px; padding: 16px; border-radius: var(--radius-lg); background: var(--color-surface); }
  .metric + .metric, .metric:nth-child(n) { box-shadow: inset 0 0 0 1px var(--color-border); }
  .metric dd { font-size: 18px; line-height: 23px; }
  .rg-band__foot { display: block; }
  .rg-info-list { padding: 56px var(--page-pad-m) 48px; }   /* 161:62: same rhythm as desktop */
  .rg .need-support { gap: 24px; padding: 48px var(--page-pad-m); }   /* 161:110 */
  .rg .need-support__head { gap: 6px; }
  .rg .need-support__cards { gap: 24px; }
  .rg-topic__title { font-size: 20px; line-height: 25px; }
  .rg-topic__p { font-size: var(--fs-body); line-height: 22px; }
  .grid-4 { grid-template-columns: 1fr; gap: 12px; }
}
@media (min-width: 640px) and (max-width: 1199px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1199px) {
  .rg-tools { grid-template-columns: 1fr 1fr; gap: 12px; }   /* 105:39: two cards per row on mobile */
  .rg-tools .num-card, .rg-tools .num-card:nth-child(3) { gap: 8px; padding: 16px; }
  .rg .num-card__num { font-size: 24px; line-height: 30.24px; }
  .rg .num-card__title { font-size: var(--fs-body); line-height: 18px; }
  .rg .num-card__text { font-size: var(--fs-small); line-height: 16px; }
  .rg-topic__title { font-size: var(--fs-h4); line-height: 28px; }
  .rg-topic__p { font-size: 15px; line-height: 24px; }
  .rg-panel__title { font-size: 15px; line-height: 19px; }
  .rg-split__lead { line-height: 20px; }
  .metric dt { font-size: var(--fs-tiny); line-height: 14.3px; }
  .metric dd { font-size: 18px; line-height: 23px; }
}
/* 38:153 on this page ends with a hairline (152:130) 48px above its edge instead of the bottom border */
.rg .need-support { box-shadow: inset 0 1px 0 var(--color-border); }
.rg .need-support::after { content: ""; height: 1px; background: var(--color-border); }