/* Responsible gambling page — numbers from gen.js on responsible-gambling (13:621) and -mobile (44:472). */

/* ── hero ─────────────────────────────────────────────────────────────── */
.rhero2 { display: flex; gap: 32px; padding: 80px 64px; background: var(--color-dark); color: var(--color-ink); }
.rhero2__plaque { display: flex; flex-direction: column; gap: 32px; width: 752px; flex: none; padding: 48px; border-radius: 30px; background: var(--color-brand); }
.rhero2__title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-family: var(--font-display); text-transform: uppercase; }
.rhero2__l1 { font-size: 72px; line-height: 65px; }
.rhero2__l2 { font-size: 64px; line-height: 58px; padding: 8px 16px; background: var(--color-dark); color: var(--color-brand); }
.rhero2__text { font-size: 16px; line-height: 26px; }
.supportbar { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; background: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-gold); }
.supportbar__label { font-size: 14px; line-height: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.supportbar__row { display: flex; align-items: center; gap: 32px; }
.supportbar__phone { font-family: var(--font-display); font-size: 36px; line-height: 54px; text-decoration: none; color: inherit; }
.supportbar__phone:hover { color: var(--color-muted-ink); }
.supportbar__link { font-size: 16px; line-height: 21px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rhero2__media { position: relative; flex: 1; min-width: 0; height: 599px; border-radius: 30px; overflow: hidden; }
.rhero2__img { width: 100%; height: 599px; object-fit: cover; }
.rhero2__badge { position: absolute; left: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; width: 300px; padding: 24px; border-radius: 20px; background: var(--color-cream); }
.rhero2__badge-age { font-family: var(--font-display); font-size: 32px; line-height: 48px; }
.rhero2__badge-text { font-size: 14px; line-height: 18px; font-weight: 700; text-transform: uppercase; }

/* ── section rhythm shared by the page ────────────────────────────────── */
.control, .tools, .harm, .track, .resp { display: flex; flex-direction: column; gap: 56px; padding: 96px 64px; }
.control { background: var(--color-bg); color: var(--color-ink); }
.control__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.control__heading { display: flex; flex-direction: column; gap: 12px; width: 864px; }
.control__num { font-family: var(--font-display); font-size: 48px; line-height: 72px; color: var(--color-gold); opacity: .5; }
.control__eyebrow { color: var(--color-muted-ink); }
.control__title { font-family: var(--font-display); font-size: 64px; line-height: 96px; text-transform: uppercase; }
.control__plaque { padding: 12px 24px; background: var(--color-dark); color: var(--color-brand); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.control__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 24px; }
.control__item { position: relative; padding-left: 28px; font-size: 16px; line-height: 26px; }
.control__item::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; background: var(--color-dark); }

.tools { background: var(--color-dark); color: var(--color-bg); }
.tools__head { display: flex; flex-direction: column; gap: 12px; }
.tools__title { font-family: var(--font-display); font-size: 64px; line-height: 96px; text-transform: uppercase; }
.tools__text { font-size: 16px; line-height: 21px; color: #a6a095; }
.tools__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }   /* the frame: 864+416, 416+864, 1312 → 2:1, 1:2, 3 of 3 columns; fractions fill the row whatever the scrollbar takes */
.tool { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 320px; padding: 32px; border-radius: 30px; box-shadow: inset 0 0 0 1px var(--color-gold); color: var(--color-ink); }
.tool--brand { background: var(--color-brand); }
.tool--cream { background: var(--color-cream); }
.tool--dark { background: var(--color-dark-2); box-shadow: inset 0 0 0 1px #2f2b20; color: var(--color-bg); }
.tool--dark .tool__num, .tool--dark .tool__title { color: var(--color-brand); }
.tool--full { flex-direction: row; align-items: center; gap: 32px; min-height: 162px; border-radius: 20px; }
.tool__left { display: flex; flex-direction: column; gap: 8px; width: 200px; flex: none; }
.tool__num { font-family: var(--font-display); font-size: 32px; line-height: 48px; opacity: .3; }
.tool__title { font-family: var(--font-display); font-size: 32px; line-height: 48px; text-transform: uppercase; }
.tool__title--sm { font-size: 28px; line-height: 42px; }
.tool__text { font-size: 15px; line-height: 24px; }
.tool__text--sm { font-size: 14px; line-height: 22px; }
.tool__text a { font-weight: 700; }
.tool__link { font-size: 14px; line-height: 18px; font-weight: 800; color: inherit; text-decoration: none; }
.tool__link:hover { text-decoration: underline; }
.tool--wide { grid-column: span 2; }
.tool--full { grid-column: 1 / -1; }

.exclusion { display: flex; gap: 32px; padding: 96px 64px; background: var(--color-brand); color: var(--color-ink); }
.exclusion__left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 528px; flex: none; }
.exclusion__title { font-family: var(--font-display); font-size: 64px; line-height: 58px; text-transform: uppercase; }
.exclusion__stop { display: grid; place-items: center; width: 80px; height: 140px; padding: 20px 0;   /* the word is 59px wide: the frame centres it past its own 20px side padding */ background: var(--color-dark); color: var(--color-brand); font-family: var(--font-display); font-size: 32px; line-height: 48px; text-transform: uppercase; }
.exclusion__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 1; min-width: 0; padding: 40px; background: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-gold); }
.exclusion__text { font-size: 16px; line-height: 26px; }
.exclusion__text--sm { font-size: 15px; line-height: 24px; }
.exclusion__rule { width: 100%; border: 0; height: 1px; margin: 0; background: var(--color-gold); opacity: .5; }
.exclusion__sub { font-family: var(--font-display); font-size: 24px; line-height: 36px; text-transform: uppercase; }
.exclusion__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.exclusion__label { font-size: 15px; line-height: 20px; font-weight: 700; }
.exclusion__phone { font-family: var(--font-display); font-size: 28px; line-height: 42px; text-decoration: none; color: inherit; }
.exclusion__link { font-size: 14px; line-height: 18px; font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.harm { background: var(--color-bg); color: var(--color-ink); }
.harm__head { display: flex; gap: 32px; align-items: flex-start; }
.harm__heading { display: flex; flex-direction: column; gap: 12px; width: 528px; flex: none; }
.harm__title { font-family: var(--font-display); font-size: 64px; line-height: 58px; text-transform: uppercase; }
.harm__intro { max-width: 752px; font-size: 16px; line-height: 26px; color: var(--color-muted-ink); }
.harm__body { display: flex; gap: 32px; align-items: flex-start; }
.signs { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.signs__title { font-family: var(--font-display); font-size: 24px; line-height: 36px; text-transform: uppercase; }
.signs__rule { border: 0; height: 1px; margin: 0; background: var(--color-gold); }
.signs__list { display: flex; flex-direction: column; gap: 16px; }
.signs__item { position: relative; padding-left: 20px; font-size: 15px; line-height: 20px; }
.signs__item::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: var(--color-dark); }
.reflect { display: flex; flex-direction: column; gap: 20px; width: 673px; flex: none; padding: 32px; background: var(--color-cream); box-shadow: inset 0 0 0 1px var(--color-gold); }
.reflect__lead { font-size: 14px; line-height: 18px; color: var(--color-muted-ink); }
.reflect__list { display: flex; flex-direction: column; gap: 20px; font-size: 14px; line-height: 18px; font-weight: 500; }
.reflect__rule { border: 0; height: 1px; margin: 0; background: var(--color-gold); opacity: .5; }
.reflect__note { font-size: 14px; line-height: 18px; font-weight: 700; }
.reflect__note a { color: inherit; }

.track { gap: 48px; background: var(--color-dark); color: var(--color-bg); }
.track__head { display: flex; gap: 32px; }
.track__heading { display: flex; flex-direction: column; gap: 12px; width: 528px; flex: none; }
.track__num { font-family: var(--font-display); font-size: 48px; line-height: 72px; color: var(--color-gold); opacity: .3; }
.track__title { font-family: var(--font-display); font-size: 64px; line-height: 58px; text-transform: uppercase; }
.track__text { display: flex; flex-direction: column; gap: 20px; flex: 1; font-size: 16px; line-height: 26px; }
.track__muted { font-size: 15px; line-height: 24px; color: #a6a095; }
.track__plaques { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tplaque { display: flex; flex-direction: column; gap: 12px; min-height: 116px; padding: 24px; background: var(--color-dark-2); box-shadow: inset 0 0 0 1px #2f2b20; }
.tplaque__label { font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand); }
.tplaque__text { font-size: 14px; line-height: 21px; }

.resp { background: var(--color-dark); color: var(--color-bg); border-top: 1px solid #2f2b20; }
.resp__head { display: flex; flex-direction: column; gap: 12px; }
.resp__title { font-family: var(--font-display); font-size: 64px; line-height: 96px; text-transform: uppercase; }
.resp__grid { display: grid; grid-template-columns: 528px 416px 1fr; gap: 24px; }
.rblock { display: flex; flex-direction: column; gap: 16px; min-height: 360px; padding: 32px; border-radius: 30px; color: var(--color-ink); }
.rblock--cream { background: var(--color-cream); }
.rblock--brand { background: var(--color-brand); }
.rblock--dark { background: var(--color-dark); box-shadow: inset 0 0 0 1px var(--color-gold); color: var(--color-bg); }
.rblock--dark .rblock__num, .rblock--dark .rblock__title { color: var(--color-brand); }
.rblock__num { font-family: var(--font-display); font-size: 32px; line-height: 48px; opacity: .3; }
.rblock__title { font-family: var(--font-display); font-size: 24px; line-height: 36px; text-transform: uppercase; }
.rblock__text { font-size: 14px; line-height: 22px; }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .rhero2 { flex-direction: column; gap: 24px; padding: 24px; background: var(--color-brand); border-bottom: 2px solid var(--color-dark-2); }
  .rhero2__plaque { width: auto; gap: 24px; padding: 0; border-radius: 0; background: none; }
  .rhero2 .eyebrow { font-size: 11px; line-height: 14px; }
  .rhero2__title { gap: 8px; }
  .rhero2__l1 { font-size: 44px; line-height: 40px; }
  .rhero2__l2 { font-size: 38px; line-height: 34px; padding: 6px 12px; }
  .rhero2__text { font-size: 14px; line-height: 21px; }
  .supportbar { gap: 12px; padding: 16px; border-radius: 16px; }
  .supportbar__label { font-size: 12px; line-height: 16px; }
  .supportbar__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .supportbar__phone { font-size: 32px; line-height: 48px; }
  .supportbar__link { font-size: 14px; line-height: 18px; }
  .rhero2__media { height: 240px; border-radius: 20px; }
  .rhero2__img { height: 240px; }
  .rhero2__badge { left: 16px; bottom: 16px; gap: 4px; width: 240px; padding: 16px; border-radius: 12px; }
  .rhero2__badge-age { font-size: 24px; line-height: 36px; }
  .rhero2__badge-text { font-size: 11px; line-height: 14px; }

  .control, .tools, .harm, .track, .resp, .exclusion { gap: 24px; padding: 56px 16px; }
  .tools { gap: 32px; }
  .control__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .control__heading { gap: 8px; width: auto; }
  .control__num { font-size: 32px; line-height: 48px; }
  .control__title { font-size: 38px; line-height: 38px; }
  .control__plaque { padding: 8px 16px; border-radius: 4px; }
  .control__cols { grid-template-columns: 1fr; gap: 16px; }
  .control__item { padding-left: 20px; font-size: 14px; line-height: 21px; }
  .control__item::before { width: 8px; height: 8px; border-radius: 2px; }

  .tools__head { gap: 8px; }
  .tools__head .eyebrow { color: var(--color-gold); }
  .tools__title { font-size: 38px; line-height: 40px; }
  .tools__text { font-size: 14px; line-height: 21px; color: var(--color-muted-ink); }
  .tools__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tool, .tool--wide, .tool--full { grid-column: auto; gap: 12px; min-height: 0; padding: 20px; border-radius: 16px; }
  .tool--brand { background: var(--color-cream); }
  .tool--dark { background: var(--color-dark); box-shadow: inset 0 0 0 1px var(--color-dark-2); }
  .tool--full { flex-direction: column; align-items: flex-start; gap: 12px; background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-dark-2); }
  .tool__left { width: auto; gap: 12px; }
  .tool__num { font-size: 24px; line-height: 36px; }
  .tool__title { font-size: 22px; line-height: 33px; }
  .tool__title--sm { font-size: 20px; line-height: 30px; }
  .tool__text, .tool__text--sm { font-size: 14px; line-height: 21px; }
  .tool__link { font-size: 13px; line-height: 17px; text-decoration: underline; }

  .exclusion { flex-direction: column; }
  .exclusion__left { width: auto; gap: 24px; }
  .exclusion__title { font-size: 38px; line-height: 38px; }
  .exclusion__stop { width: 72px; height: 110px; padding: 16px 0; border-radius: 8px; background: var(--color-dark-2); font-size: 28px; line-height: 42px; }
  .exclusion__panel { gap: 16px; padding: 20px; border-radius: 16px; }
  .exclusion__text { font-size: 14px; line-height: 21px; }
  .exclusion__sub { font-size: 18px; line-height: 27px; }
  .exclusion__contact { gap: 6px; }
  .exclusion__label { font-size: 13px; line-height: 17px; }
  .exclusion__phone { font-size: 24px; line-height: 36px; }
  .exclusion__link { font-size: 13px; line-height: 17px; }

  .harm__head { flex-direction: column; gap: 8px; }
  .harm__heading { width: auto; gap: 8px; }
  .harm__title { font-size: 38px; line-height: 38px; }
  .harm__intro { font-size: 14px; line-height: 21px; }
  .harm__body { flex-direction: column; gap: 24px; }
  .signs { gap: 12px; }
  .signs__title { font-size: 20px; line-height: 30px; }
  .signs__list { gap: 12px; }
  .signs__item { min-height: 36px; display: flex; align-items: center; padding-left: 18px; font-size: 14px; line-height: 18px; }
  .signs__item::before { top: 15px; width: 6px; height: 6px; border-radius: 1px; }
  .reflect { width: auto; gap: 16px; padding: 20px; border-radius: 16px; }
  .reflect__lead { font-size: 13px; line-height: 17px; }
  .reflect__list { gap: 10px; font-size: 13px; line-height: 17px; }
  .reflect__note { font-size: 13px; line-height: 17px; }

  .track__head { flex-direction: column; gap: 8px; }
  .track__heading { width: auto; gap: 8px; }
  .track__num { font-size: 32px; line-height: 48px; }
  .track__heading .eyebrow { color: var(--color-muted-ink); }
  .track__title { font-size: 38px; line-height: 38px; color: var(--color-white); }
  .track__text { gap: 8px; font-size: 14px; line-height: 21px; color: var(--color-white); }
  .track__muted { font-size: 13px; line-height: 20px; color: #7e7e7e; }
  .track__plaques { grid-template-columns: 1fr; gap: 12px; }
  .tplaque { gap: 8px; min-height: 0; padding: 16px; border-radius: 8px; }
  .tplaque__text { font-size: 13px; line-height: 18px; }

  .resp__head { gap: 8px; }
  .resp__head .eyebrow { color: var(--color-gold); }
  .resp__title { font-size: 38px; line-height: 38px; }
  .resp__grid { grid-template-columns: 1fr; gap: 12px; }
  .rblock { gap: 8px; min-height: 0; padding: 20px; border-radius: 16px; }
  .rblock--cream { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-gold); }
  .rblock--dark { box-shadow: inset 0 0 0 1px var(--color-brand); }
  .rblock__num { font-size: 24px; line-height: 36px; }
  .rblock__title { font-size: 18px; line-height: 27px; }
  .rblock__text { font-size: 13px; line-height: 20px; }
}