/* ==================================================
       RESPONSIBLE GAMING GUIDE — DESIGN TOKENS
       ================================================== */
    :root {
      --rg-bg: #000000;
      --rg-bg-bar: #0e0e0e;
      --rg-bg-card: #131313;
      --rg-bg-panel: #2a2a2a;
      --rg-bg-support: #454747;
      --rg-bg-partners: #1c1b1b;
      --rg-accent: #ffd700;
      --rg-accent-text: #6f6600;
      --rg-text: #ffffff;
      --rg-text-soft: #fff;
      --rg-border: #2a2a2a;
      --rg-font-display: "Hanken Grotesk", "Inter", system-ui, sans-serif;
      --rg-font-body: "Hanken Grotesk", "Inter", system-ui, sans-serif;
      --rg-font-mono: "Hanken Grotesk", "Inter", system-ui, sans-serif;
      --rg-container: 1440px;
      --rg-gutter: 16px;
      --rg-header-h: 64px;
      --rg-radius-sm: 4px;
      --rg-radius-md: 8px;
      --rg-radius-lg: 12px;
      --rg-radius-full: 9999px;
      --rg-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      --rg-shadow-badge: 0 4px 6px -4px rgba(246, 229, 80, 0.2),
        0 10px 15px -3px rgba(246, 229, 80, 0.2);
    }

    /* ==================================================
       RESET & BASE
       ================================================== */
    *,
    *::before,
    *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body, h1, h2, h3, p, ul, ol { margin: 0; }

    ul, ol { list-style: none; padding: 0; }

    a, button {
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      font: inherit;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; height: auto; }

    .rg-guide {
      min-height: 100vh;
      padding-top: var(--rg-header-h);
      background: var(--rg-bg);
      color: var(--rg-text);
      font-family: var(--rg-font-body);
      font-size: 16px;
      line-height: 1.5;
    }
.rg-guide-partners-row img {
	width: 24px;
	height: 24px;
}
  /* ==================================================
     LAYOUT
     ================================================== */
    .rg-guide-wrap {
      width: 100%;
      max-width: var(--rg-container);
      margin-inline: auto;
      padding-inline: var(--rg-gutter);
    }

  /* ==================================================
     BUTTONS
     ================================================== */
    .rg-guide-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 24px;
      border-radius: var(--rg-radius-sm);
      font-family: var(--rg-font-mono);
      font-size: 16px;
      line-height: 24px;
      transition: opacity 0.2s;
    }

    .rg-guide-btn:hover { opacity: 0.88; }

    .rg-guide-btn-primary {
      background: var(--rg-accent);
      color: var(--rg-accent-text);
      box-shadow: var(--rg-shadow);
    }

    .rg-guide-btn-ghost { color: var(--rg-text-soft); }

    .rg-guide-btn-full {
      width: 100%;
      padding-block: 12px;
    }
    
  /* ==================================================
     HERO
     ================================================== */
    .rg-guide-hero {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 360px;
      border-bottom: 1px solid var(--rg-border);
      overflow: hidden;
    }

    .rg-guide-hero-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
      background-image: url('http://skyexchbooks.com/wp-content/uploads/2026/05/Responsible-Gaming-banner-1.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
    }

    .rg-guide-hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .rg-guide-hero-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 50%, transparent 100%);
    }

    .rg-guide-hero-inner {
      position: relative;
      z-index: 1;
      padding-block: 40px;
    }

    .rg-guide-hero-copy {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 768px;
    }

    .rg-guide-tag {
      align-self: flex-start;
      padding: 6px 16px;
      border-radius: var(--rg-radius-full);
      background: var(--rg-accent);
      color: var(--rg-accent-text);
      font-family: var(--rg-font-mono);
      font-size: 12px;
      letter-spacing: 1.2px;
      box-shadow: var(--rg-shadow-badge);
    }

    .rg-guide-hero-heading {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-family: var(--rg-font-display);
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: -1px;
      font-weight: 700;
    }

    .rg-guide-hero-heading em {
      font-style: normal;
      color: var(--rg-accent);
    }

    .rg-guide-hero-desc {
      max-width: 672px;
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.8);
    }

    .rg-guide-hero-tips {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 8px;
    }

    .rg-guide-hero-tip {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--rg-radius-md);
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(2px);
    }

    .rg-guide-hero-tip img {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    .rg-guide-hero-tip span {
      font-family: var(--rg-font-mono);
      font-size: 14px;
    }

  /* ==================================================
     MAIN LAYOUT
     ================================================== */
    .rg-guide-body {
      padding-block: 40px;
    }

    .rg-guide-layout {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .rg-guide-aside { width: 100%; }

    .rg-guide-aside-stack {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .rg-guide-panel {
      padding: 20px;
      border: 1px solid var(--rg-border);
      border-radius: var(--rg-radius-lg);
      box-shadow: var(--rg-shadow);
    }

    .rg-guide-panel-nav { background: var(--rg-bg-card); }

    .rg-guide-panel-support { background: var(--rg-bg-support); }

    .rg-guide-panel-partners { background: var(--rg-bg-partners); }

    .rg-guide-toc-title {
      padding-bottom: 8px;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--rg-border);
      font-family: var(--rg-font-mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--rg-text-soft);
    }

    .rg-guide-toc-list { display: flex; flex-direction: column; gap: 4px; }

    .rg-guide-toc-link {
      display: block;
      padding: 8px 12px;
      border-radius: var(--rg-radius-md);
      font-size: 16px;
      color: var(--rg-text-soft);
      transition: background 0.2s;
    }

    .rg-guide-toc-link:hover { background: rgba(255, 255, 255, 0.05); }

    .rg-guide-toc-link-current {
      background: var(--rg-accent);
      font-weight: 700;
    }

    .rg-guide-toc-link-faq {
      background: var(--rg-accent);
      color: var(--rg-accent-text);
      font-family: var(--rg-font-mono);
      text-align: center;
    }

    .rg-guide-widget-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 0;
      font-family: var(--rg-font-mono);
      font-size: 16px;
    }

    .rg-guide-widget-head img {
      width: 24px;
      height: 24px;
    }

    .rg-guide-widget-text {
      margin-block: 16px;
      color: var(--rg-text-soft);
      line-height: 24px;
    }

    .rg-guide-partners-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      padding: 12px;
      border-radius: var(--rg-radius-md);
      background: rgba(255, 255, 255, 0.4);
      opacity: 0.6;
    }

    .rg-guide-article {
      display: flex;
      flex-direction: column;
      gap: 24px;
      min-width: 0;
    }

  /* ==================================================
     GUIDE SECTIONS
     ================================================== */
    .rg-guide-section {
      padding: 24px;
      background: var(--rg-bg-card);
      border: 1px solid var(--rg-border);
      border-radius: var(--rg-radius-lg);
      box-shadow: var(--rg-shadow);
      scroll-margin-top: calc(var(--rg-header-h) + 24px);
    }

    .rg-guide-section-head {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 20px;
    }

    .rg-guide-section-num {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--rg-radius-sm);
      background: var(--rg-accent);
      color: var(--rg-accent-text);
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
    }

    .rg-guide-section-title {
      padding-top: 4px;
      font-size: 20px;
      line-height: 1.3;
      font-weight: 700;
    }

    .rg-guide-section-text {
      color: var(--rg-text-soft);
      font-size: 16px;
      line-height: 24px;
    }

    .rg-guide-bullet-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 16px;
    }

    .rg-guide-bullet-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      color: var(--rg-text-soft);
      line-height: 24px;
    }

    .rg-guide-bullet-item img {
      width: 20px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .rg-guide-warning-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .rg-guide-warning-card {
      padding: 16px;
      border: 1px solid var(--rg-border);
      border-radius: var(--rg-radius-md);
      background: var(--rg-bg-panel);
    }

    .rg-guide-warning-card h3 {
      margin-bottom: 8px;
      font-family: var(--rg-font-mono);
      font-size: 16px;
      font-weight: 400;
    }

    .rg-guide-warning-card p {
      color: var(--rg-text-soft);
      line-height: 24px;
    }

    .rg-guide-limits { display: flex; flex-direction: column; gap: 16px; }

    .rg-guide-limit-item h3 {
      margin-bottom: 8px;
      font-family: var(--rg-font-mono);
      font-size: 16px;
      color: var(--rg-accent);
      font-weight: 400;
    }

    .rg-guide-limit-item p {
      color: var(--rg-text-soft);
      line-height: 24px;
    }

    .rg-guide-steps {
      padding-left: 24px;
      list-style: decimal;
      color: var(--rg-text-soft);
      line-height: 24px;
    }

    .rg-guide-steps li { margin-bottom: 12px; }

    .rg-guide-steps li:last-child { margin-bottom: 0; }

  /* ==================================================
     FAQ
     ================================================== */
    .rg-guide-faq {
      padding-top: 32px;
      border-top: 1px solid var(--rg-border);
      scroll-margin-top: calc(var(--rg-header-h) + 24px);
    }

    .rg-guide-faq-title {
      margin-bottom: 24px;
      font-family: var(--rg-font-display);
      font-size: 28px;
      letter-spacing: 0.64px;
    }

    .rg-guide-faq-list { display: flex; flex-direction: column; gap: 16px; }

    .rg-guide-faq-item {
      background: var(--rg-bg-card);
      border: 1px solid var(--rg-border);
      border-radius: var(--rg-radius-lg);
      overflow: hidden;
    }

    .rg-guide-faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      font-family: var(--rg-font-mono);
      font-size: 16px;
      line-height: 1.5;
      list-style: none;
      cursor: pointer;
    }

    .rg-guide-faq-question::-webkit-details-marker { display: none; }

    .rg-guide-faq-question img {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
  /* ==================================================
     MOBILE — max-width: 767px
     ================================================== */
    @media (max-width: 767px) {
      :root { --rg-gutter: 16px; }

      .rg-guide-header-end .rg-guide-btn-primary {
        padding-inline: 16px;
        font-size: 14px;
      }

      .rg-guide-hero { min-height: 320px; }

      .rg-guide-hero-heading { font-size: 24px; }

      .rg-guide-section { padding: 20px; }

      .rg-guide-section-title { font-size: 18px; }

      .rg-guide-faq-question {
        padding: 16px 20px;
        font-size: 15px;
      }
    }

  /* ==================================================
     TABLET — 768px to 1023px
     ================================================== */
    @media (min-width: 768px) and (max-width: 1023px) {
      :root { --rg-gutter: 24px; }

      .rg-guide-topnav { display: flex; }

      .rg-guide-header-end .rg-guide-btn-ghost { display: inline-flex; }

      .rg-guide-hero { min-height: 420px; }

      .rg-guide-hero-heading { font-size: 34px; }

      .rg-guide-hero-tips {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .rg-guide-warning-grid { grid-template-columns: repeat(2, 1fr); }

      .rg-guide-footer-cols { grid-template-columns: repeat(3, 1fr); }

      .rg-guide-footer-grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }

  /* ==================================================
     DESKTOP — min-width: 1024px
     ================================================== */
    @media (min-width: 1024px) {
      :root { --rg-gutter: 40px; }

      .rg-guide-logo { font-size: 24px; }

      .rg-guide-topnav { display: flex; gap: 24px; }

      .rg-guide-header-end .rg-guide-btn-ghost { display: inline-flex; }

      .rg-guide-hero { min-height: 500px; }

      .rg-guide-hero-inner { padding-block: 64px; }

      .rg-guide-hero-copy { gap: 24px; }

      .rg-guide-hero-heading {
        font-size: 40px;
        line-height: 50px;
        letter-spacing: -2px;
      }

      .rg-guide-hero-desc {
        font-size: 18px;
        line-height: 29px;
      }

      .rg-guide-hero-tips {
        flex-direction: row;
        gap: 24px;
        padding-top: 16px;
      }

      .rg-guide-body { padding-block: 64px; }

      .rg-guide-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
      }

      .rg-guide-aside {
        flex: 0 0 288px;
        position: sticky;
        top: calc(var(--rg-header-h) + 24px);
      }

      .rg-guide-article {
        flex: 1;
        max-width:100%;
      }

      .rg-guide-section { padding: 48px; }

      .rg-guide-section-title {
        font-size: 24px;
        line-height: 31px;
      }

      .rg-guide-warning-grid { grid-template-columns: repeat(2, 1fr); }

      .rg-guide-faq-title {
        font-size: 32px;
        line-height: 38px;
      }

      .rg-guide-faq-question {
        font-size: 18px;
        line-height: 28px;
      }

      .rg-guide-footer-grid {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
      }

      .rg-guide-footer-cols {
        flex: 1;
        max-width: 640px;
        grid-template-columns: repeat(3, 1fr);
      }
    }

  /* ==================================================
     LARGE — min-width: 1920px
     ================================================== */
    @media (min-width: 1920px) {
      :root { --rg-gutter: 48px; }

      .rg-guide-hero-heading {
        font-size: 48px;
        line-height: 58px;
      }

      .rg-guide-hero-desc {
        font-size: 20px;
        line-height: 32px;
      }

      .rg-guide-article { max-width: 880px; }

      .rg-guide-section-title {
        font-size: 28px;
        line-height: 36px;
      }

      .rg-guide-faq-title {
        font-size: 40px;
        line-height: 48px;
      }
    }