/* ============================================================
   Responsible Gambling — betpinnacle-responsible-gambling-redesign (1440)
   / betpinnacle-responsible-gambling-mobile (390)
   ============================================================ */

html { scroll-behavior: smooth; }

/* ---------- editorial masthead ---------- */
.rg-hero { background: var(--paper); overflow: hidden; }
.rg-hero-wrap { position: relative; padding: 40px 0; }
.rg-bgword {
  position: absolute; left: 0; top: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 64px;
  line-height: 1; color: #111318; opacity: 0.04;
  white-space: nowrap; pointer-events: none; user-select: none;
}
.rg-hero-grid { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
.rg-hero-left { display: flex; flex-direction: column; gap: 12px; }
.rg-hero-title { display: flex; flex-direction: column; gap: 2px; }
.rg-hero-title span {
  font-family: var(--font-display); font-weight: 700; font-size: 40px;
  line-height: 1; letter-spacing: -1px;
}
.rg-hero-title .rg-ht-top { color: #111318; }
.rg-hero-title .rg-ht-bottom { color: var(--brown); }
.rg-hero-p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.rg-panel {
  background: #101d38; border: 1px solid var(--accent); border-radius: 8px;
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.rg-panel-age { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.35; color: #ffffff; }
.rg-panel-statement {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  line-height: 1.3; color: #ffffff;
}
.rg-panel-divider { height: 1px; background: var(--line); }
.rg-panel-support { display: flex; flex-direction: column; gap: 4px; }
.rg-support-label { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; }
.rg-support-phone { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.35; color: var(--accent); }
.rg-support-note { font-size: 12px; color: #94a3b8; }

@media (min-width: 992px) {
  .rg-hero-wrap { padding: 96px 0; }
  .rg-bgword { top: 120px; font-size: 220px; line-height: 0.85; letter-spacing: -8px; color: var(--ink); opacity: 0.06; }
  .rg-hero-grid { flex-direction: row; justify-content: space-between; align-items: center; gap: 48px; }
  .rg-hero-left { width: 720px; flex: none; gap: 16px; }
  .rg-hero-title { gap: 16px; }
  .rg-hero-title span { font-size: 96px; letter-spacing: -2px; }
  .rg-hero-title .rg-ht-top { color: var(--ink); }
  .rg-hero-p { font-size: 16px; }
  .rg-panel { width: 312px; flex: none; border-radius: 0; padding: 24px; }
  .rg-panel-age { font-size: 44px; }
  .rg-panel-statement { font-size: 24px; line-height: calc(32 / 24); letter-spacing: -0.5px; }
  .rg-panel-divider { background: var(--accent); opacity: 0.15; }
  .rg-support-label { font-weight: 400; font-size: 12px; }
}

/* ---------- on this page ---------- */
.rg-toc { background: #f5f3ef; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.rg-toc-wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.rg-toc-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1px; color: #101d38; margin-bottom: 16px; }
.rg-toc-list li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #101d38;
}
.rg-toc-list svg { width: 12px; height: 12px; flex: none; }
.rg-toc-row { display: flex; padding: 16px 0; }
.rg-toc-row:not(:last-child) { border-bottom: 1px solid #d9d4cc; }
.rg-toc-row a {
  flex: 1 1 0;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  line-height: 1.34; color: #111c35; text-decoration: underline;
}
@media (min-width: 992px) {
  .rg-toc { padding: 32px 0; }
  .rg-toc-title { font-size: 14px; color: #111c35; margin-bottom: 20px; }
}

/* ---------- numbered sections ---------- */
.rg-sec { background: var(--paper); padding: 20px 0; }
.rg-sec + .rg-sec { border-top: 1px solid var(--line); }
.rg-sec--alt { background: var(--card); }
.rg-sec-wrap {
  width: min(1280px, 100% - 40px); margin-inline: auto;
  display: flex; flex-direction: column; gap: 20px;
}
.rg-sec--tight .rg-sec-wrap { gap: 16px; }
.rg-sec-head { display: flex; flex-direction: column; gap: 8px; }
.rg-sec-num { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1.34; color: var(--brown); }
.rg-sec-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.34; color: #111318; text-transform: uppercase; }
.rg-sec-body { display: flex; flex-direction: column; gap: 20px; }
.rg-sec--tight .rg-sec-body { gap: 16px; }

.rg-div { height: 1px; background: var(--line); }

.rg-h18 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.34; color: #111318; }
.rg-body-14 { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.rg-body-16 { font-size: 14px; line-height: 1.2; color: var(--ink-2); }
.rg-lead { font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--ink-2); }
.rg-toollink { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.34; color: var(--brown); align-self: flex-start; }
.rg-note-block { display: flex; flex-direction: column; gap: 8px; }

@media (min-width: 992px) {
  .rg-sec { padding: 80px 0; }
  .rg-sec + .rg-sec { border-top: 0; }
  .rg-sec--alt { background: var(--paper); }
  .rg-sec-wrap { flex-direction: row; gap: 64px; }
  .rg-sec--tight .rg-sec-wrap { gap: 64px; }
  .rg-sec-head { width: 340px; flex: none; gap: 16px; }
  .rg-sec-num { font-size: 64px; }
  .rg-sec-title { font-size: 28px; line-height: calc(34 / 28); color: var(--ink-2); }
  .rg-sec-body { flex: 1 1 0; min-width: 0; gap: 24px; }
  .rg-sec--tight .rg-sec-body { gap: 24px; }
  .rg-div { opacity: 0.15; }
  .rg-h18 { color: var(--ink-2); }
  .rg-body-14 { font-size: 14px; line-height: 1.5; }
  .rg-body-16 { font-size: 16px; }
  .rg-lead { font-size: 18px; }
  .rg-toollink { font-size: 14px; }
}

/* ---------- 01 staying in control ---------- */
.rg-bullets { display: flex; flex-direction: column; gap: 12px; }
.rg-bullets li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; line-height: 1.2; color: var(--ink-2);
}
.rg-square { width: 6px; height: 6px; flex: none; background: var(--accent); }

.rg-callout {
  background: var(--accent); border-radius: 4px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.rg-callout-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.34; color: #111318; }
.rg-callout-text { font-size: 13px; line-height: 1.4; color: #111318; }
@media (min-width: 992px) {
  .rg-bullets li { gap: 12px; font-size: 15px; }
  .rg-callout { width: 360px; border-radius: 0; padding: 24px; gap: 12px; }
  .rg-callout-title { font-size: 18px; color: var(--ink); }
  .rg-callout-text { font-size: 14px; line-height: 1.5; color: var(--ink); }
  .rg-callout--big .rg-callout-title { font-size: 24px; line-height: calc(32 / 24); }
}

/* ---------- 02 tools ---------- */
.rg-tools { display: flex; flex-direction: column; gap: 24px; }
.rg-tool { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 03 self-exclusion / betstop ---------- */
.rg-split { display: flex; flex-direction: column; gap: 20px; }
.rg-split-left { display: flex; flex-direction: column; gap: 20px; }
.rg-split-left p { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.rg-betstop {
  background: #101d38; border-radius: 8px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.rg-betstop-kicker { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1px; color: var(--accent); }
.rg-betstop-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; color: #ffffff; }
.rg-betstop-text { font-size: 12px; line-height: 1.4; color: #94a3b8; }
.rg-betstop-call { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: #ffffff; }
.rg-betstop-btn {
  align-self: flex-start; display: inline-flex;
  background: var(--accent); border-radius: 4px; padding: 10px 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.34; color: #111318;
}
@media (min-width: 992px) {
  .rg-split { flex-direction: row; gap: 32px; }
  .rg-split-left { flex: 1 1 0; gap: 16px; }
  .rg-split-left p { font-size: 15px; line-height: 1.5; }
  .rg-betstop { width: 420px; flex: none; border-radius: 0; padding: 32px; gap: 16px; }
  .rg-betstop-kicker { font-size: 14px; }
  .rg-betstop-title { font-size: 22px; line-height: calc(28 / 22); }
  .rg-betstop-text { font-size: 13px; line-height: 1.5; }
  .rg-betstop-btn { border-radius: 0; color: var(--ink); }
}

/* ---------- 04 recognising harm ---------- */
.rg-check { display: flex; flex-direction: column; gap: 20px; }
.rg-check-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.34; color: #111318; }
.rg-check-lead { font-size: 13px; color: var(--ink-2); }
.rg-questions { display: flex; flex-direction: column; gap: 12px; }
.rg-questions li {
  display: flex; gap: 10px;
  font-weight: 500; font-size: 13px; line-height: 1.25; color: var(--ink-2);
}
.rg-qnum { font-family: var(--font-mono); font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--brown); flex: none; }
.rg-check-outro { font-weight: 600; font-size: 13px; line-height: 1.25; color: #111318; }
@media (min-width: 992px) {
  .rg-check { gap: 16px; }
  .rg-check-title { font-size: 20px; color: var(--ink-2); }
  .rg-check-lead { font-size: 14px; }
  .rg-questions li { gap: 12px; font-size: 14px; }
  .rg-check-outro { font-size: 14px; color: var(--ink-2); }
}

/* ---------- 05 keeping track ---------- */
.rg-track-p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 992px) {
  .rg-track-p { font-size: 15px; line-height: 1.6; }
}

/* ---------- 06 age & payment ---------- */
.rg-cols { display: flex; flex-direction: column; gap: 20px; }
.rg-col { display: flex; flex-direction: column; }
.rg-col--under18 { gap: 8px; }
.rg-col--payments { gap: 12px; }
.rg-debit {
  background: var(--paper); border-radius: 4px; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.rg-debit-badge {
  align-self: flex-start; display: inline-flex;
  background: var(--accent); border-radius: 2px; padding: 2px 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; line-height: 1.34; color: #111318;
}
.rg-debit-note { font-size: 12px; color: var(--ink-2); }
@media (min-width: 992px) {
  .rg-cols { flex-direction: row; gap: 32px; }
  .rg-col { flex: 1 1 0; }
  .rg-debit {
    background: none; border-radius: 0; padding: 8px 0 0;
    flex-direction: row; align-items: center; gap: 16px;
  }
  .rg-debit-badge { align-self: auto; border-radius: 0; padding: 4px 10px; color: var(--ink); }
  .rg-debit-note { font-size: 13px; }
}

/* ---------- 07 getting help ---------- */
.rg-dir { display: flex; flex-direction: column; gap: 16px; }
.rg-dir-primary {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.rg-dir-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; color: var(--brown); }
.rg-dir-phone { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.34; color: #111318; }
.rg-dir-note { font-size: 13px; color: var(--ink-2); }
.rg-dir-rest {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.rg-dirdiv { height: 1px; background: var(--line); }
.rg-dirrow { display: flex; justify-content: space-between; align-items: center; }
.rg-dirrow-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.34; color: #111318; }
.rg-dirrow-phone { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.rg-dir-state { display: flex; flex-direction: column; gap: 4px; }
.rg-dir-state-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.34; color: #111318; }
.rg-dir-state-text { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
@media (min-width: 992px) {
  .rg-dir { gap: 20px; }
  .rg-dir-primary { background: none; border: 0; border-radius: 0; padding: 0; gap: 4px; }
  .rg-dir-label { font-size: 14px; }
  .rg-dir-phone { font-size: 36px; color: var(--ink-2); }
  .rg-dir-note { font-size: 14px; }
  .rg-dir-rest { display: contents; }
  .rg-dirdiv { opacity: 0.15; }
  .rg-dirrow-name { font-size: 16px; color: var(--ink-2); }
  .rg-dirrow-phone { font-size: 16px; }
  .rg-dir-state { gap: 6px; }
  .rg-dir-state-title { font-size: 16px; color: var(--ink-2); }
  .rg-dir-state-text { font-size: 14px; }
}

/* ---------- 08 our responsibilities ---------- */
.rg-resp-cols { display: flex; flex-direction: column; gap: 20px; }
.rg-resp { display: flex; flex-direction: column; gap: 8px; }
.rg-resp-head { display: flex; align-items: center; gap: 8px; }
.rg-chip {
  width: 24px; height: 24px; flex: none; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  font-family: var(--font-mono); font-weight: 900; font-size: 12px; color: #111318;
}
.rg-resp-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.34; color: #111318; }
@media (min-width: 992px) {
  .rg-resp-cols { flex-direction: row; gap: 32px; }
  .rg-resp { flex: 1 1 0; gap: 12px; }
  .rg-resp-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rg-chip { width: 28px; height: 28px; border-radius: 0; font-size: 14px; color: var(--ink); }
  .rg-resp-title { font-size: 18px; color: var(--ink-2); }
}

/* ---------- 09 regulation & complaints ---------- */
.rg-reg { display: flex; flex-direction: column; gap: 6px; }
.rg-reg-lead { font-weight: 600; font-size: 14px; color: #111318; }
.rg-reg-line { font-size: 13px; color: var(--ink-2); }
@media (min-width: 992px) {
  .rg-reg { gap: 8px; }
  .rg-reg-lead { font-size: 15px; color: var(--ink-2); }
  .rg-reg-line { font-size: 14px; }
}

/* ---------- loss warning ---------- */
.rg-loss-warning { background: var(--accent); padding: 20px 0; }
.rg-lw-wrap {
  width: min(1200px, 100% - 40px); margin-inline: auto;
  display: flex; flex-direction: column; gap: 24px;
}
.rg-lw-left { display: flex; flex-direction: column; gap: 12px; }
.rg-lw-kicker { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #111318; }
.rg-lw-title {
  font-family: var(--font-display); font-weight: 700; font-size: 32px;
  line-height: 1.05; color: #111318; text-transform: uppercase;
}
.rg-lw-line1 { font-size: 13px; line-height: 1.4; color: #111318; }
.rg-lw-line2 { font-weight: 700; font-size: 13px; color: #111318; }
.rg-betstop-module {
  background: #111318; border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.rg-bm-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #ffffff; }
.rg-bm-text { font-size: 13px; line-height: 1.4; color: #ffffff; opacity: 0.9; }
.rg-bm-link { font-family: var(--font-ui); font-weight: 800; font-size: 13px; color: var(--accent); }
@media (min-width: 992px) {
  .rg-loss-warning { padding: 96px 0; }
  .rg-lw-wrap { flex-direction: row; gap: 24px; }
  .rg-lw-left { flex: 1 1 0; gap: 16px; }
  .rg-lw-kicker { color: var(--ink); }
  .rg-lw-title { font-size: 64px; color: var(--ink); }
  .rg-lw-line1 { font-size: 14px; line-height: 1; color: var(--ink); }
  .rg-lw-line2 { font-size: 14px; color: var(--ink); }
  .rg-betstop-module { width: 360px; flex: none; background: var(--ink); border-radius: 24px; padding: 24px; gap: 12px; }
  .rg-bm-title { font-size: 44px; letter-spacing: -1px; }
  .rg-bm-text { font-size: 14px; line-height: 1.2; opacity: 1; }
  .rg-bm-link { font-size: 13px; color: #ffffff; }
}

/* --- interaction polish --- */
.rg-toollink:hover { text-decoration: underline; text-underline-offset: 3px; }
.rg-betstop-btn:hover { background: #eaba0b; }
.rg-betstop-btn:active { transform: translateY(1px); }
.rg-bm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .rg-betstop-btn { transition: background-color 0.15s cubic-bezier(0.2, 0, 0, 1), transform 0.12s cubic-bezier(0.2, 0, 0, 1); }
}