/* Layout grid (mobile-first; breakpoints 576/768/992/1200/1400). */
:root {
  --gp-gutter-x: 1.5rem;
  --gp-gutter-y: 0;
}

/* ---------- Container ---------- */
.gp-container,
.gp-container-fluid,
.gp-container-sm,
.gp-container-md,
.gp-container-lg,
.gp-container-xl,
.gp-container-xxl {
  width: 100%;
  padding-right: calc(var(--gp-gutter-x) * .5);
  padding-left: calc(var(--gp-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .gp-container,
  .gp-container-sm { max-width: 540px; }
}
@media (min-width: 768px) {
  .gp-container,
  .gp-container-sm,
  .gp-container-md { max-width: 720px; }
}
@media (min-width: 992px) {
  .gp-container,
  .gp-container-sm,
  .gp-container-md,
  .gp-container-lg { max-width: 960px; }
}
@media (min-width: 1200px) {
  .gp-container,
  .gp-container-sm,
  .gp-container-md,
  .gp-container-lg,
  .gp-container-xl { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .gp-container,
  .gp-container-sm,
  .gp-container-md,
  .gp-container-lg,
  .gp-container-xl,
  .gp-container-xxl { max-width: 1320px; }
}

/* ---------- Row ---------- */
.gp-row {
  --gp-gutter-x: 1.5rem;
  --gp-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--gp-gutter-y) * -1);
  margin-right: calc(var(--gp-gutter-x) * -.5);
  margin-left: calc(var(--gp-gutter-x) * -.5);
}
.gp-row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gp-gutter-x) * .5);
  padding-left: calc(var(--gp-gutter-x) * .5);
  margin-top: var(--gp-gutter-y);
}

/* ---------- Cols (xs, mobile baseline) ---------- */
.gp-col       { flex: 1 0 0%; }
.gp-col-auto  { flex: 0 0 auto; width: auto; }
.gp-col-1  { flex: 0 0 auto; width: 8.33333333%; }
.gp-col-2  { flex: 0 0 auto; width: 16.66666667%; }
.gp-col-3  { flex: 0 0 auto; width: 25%; }
.gp-col-4  { flex: 0 0 auto; width: 33.33333333%; }
.gp-col-5  { flex: 0 0 auto; width: 41.66666667%; }
.gp-col-6  { flex: 0 0 auto; width: 50%; }
.gp-col-7  { flex: 0 0 auto; width: 58.33333333%; }
.gp-col-8  { flex: 0 0 auto; width: 66.66666667%; }
.gp-col-9  { flex: 0 0 auto; width: 75%; }
.gp-col-10 { flex: 0 0 auto; width: 83.33333333%; }
.gp-col-11 { flex: 0 0 auto; width: 91.66666667%; }
.gp-col-12 { flex: 0 0 auto; width: 100%; }

/* ---------- Offsets (xs) ---------- */
.gp-offset-1  { margin-left: 8.33333333%; }
.gp-offset-2  { margin-left: 16.66666667%; }
.gp-offset-3  { margin-left: 25%; }
.gp-offset-4  { margin-left: 33.33333333%; }
.gp-offset-5  { margin-left: 41.66666667%; }
.gp-offset-6  { margin-left: 50%; }
.gp-offset-7  { margin-left: 58.33333333%; }
.gp-offset-8  { margin-left: 66.66666667%; }
.gp-offset-9  { margin-left: 75%; }
.gp-offset-10 { margin-left: 83.33333333%; }
.gp-offset-11 { margin-left: 91.66666667%; }

/* ---------- Order (xs) ---------- */
.gp-order-first { order: -1; }
.gp-order-last  { order: 6; }
.gp-order-0 { order: 0; }
.gp-order-1 { order: 1; }
.gp-order-2 { order: 2; }
.gp-order-3 { order: 3; }
.gp-order-4 { order: 4; }
.gp-order-5 { order: 5; }

/* ---------- Gutters (xs) ---------- */
.gp-g-0,  .gp-gx-0 { --gp-gutter-x: 0; }
.gp-g-0,  .gp-gy-0 { --gp-gutter-y: 0; }
.gp-g-1,  .gp-gx-1 { --gp-gutter-x: .25rem; }
.gp-g-1,  .gp-gy-1 { --gp-gutter-y: .25rem; }
.gp-g-2,  .gp-gx-2 { --gp-gutter-x: .5rem; }
.gp-g-2,  .gp-gy-2 { --gp-gutter-y: .5rem; }
.gp-g-3,  .gp-gx-3 { --gp-gutter-x: 1rem; }
.gp-g-3,  .gp-gy-3 { --gp-gutter-y: 1rem; }
.gp-g-4,  .gp-gx-4 { --gp-gutter-x: 1.5rem; }
.gp-g-4,  .gp-gy-4 { --gp-gutter-y: 1.5rem; }
.gp-g-5,  .gp-gx-5 { --gp-gutter-x: 3rem; }
.gp-g-5,  .gp-gy-5 { --gp-gutter-y: 3rem; }

/* ============================================================
   sm (>= 576px)
   ============================================================ */
@media (min-width: 576px) {
  .gp-col-sm       { flex: 1 0 0%; }
  .gp-col-sm-auto  { flex: 0 0 auto; width: auto; }
  .gp-col-sm-1  { flex: 0 0 auto; width: 8.33333333%; }
  .gp-col-sm-2  { flex: 0 0 auto; width: 16.66666667%; }
  .gp-col-sm-3  { flex: 0 0 auto; width: 25%; }
  .gp-col-sm-4  { flex: 0 0 auto; width: 33.33333333%; }
  .gp-col-sm-5  { flex: 0 0 auto; width: 41.66666667%; }
  .gp-col-sm-6  { flex: 0 0 auto; width: 50%; }
  .gp-col-sm-7  { flex: 0 0 auto; width: 58.33333333%; }
  .gp-col-sm-8  { flex: 0 0 auto; width: 66.66666667%; }
  .gp-col-sm-9  { flex: 0 0 auto; width: 75%; }
  .gp-col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
  .gp-col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
  .gp-col-sm-12 { flex: 0 0 auto; width: 100%; }
  .gp-offset-sm-0  { margin-left: 0; }
  .gp-offset-sm-1  { margin-left: 8.33333333%; }
  .gp-offset-sm-2  { margin-left: 16.66666667%; }
  .gp-offset-sm-3  { margin-left: 25%; }
  .gp-offset-sm-4  { margin-left: 33.33333333%; }
  .gp-offset-sm-5  { margin-left: 41.66666667%; }
  .gp-offset-sm-6  { margin-left: 50%; }
  .gp-offset-sm-7  { margin-left: 58.33333333%; }
  .gp-offset-sm-8  { margin-left: 66.66666667%; }
  .gp-offset-sm-9  { margin-left: 75%; }
  .gp-offset-sm-10 { margin-left: 83.33333333%; }
  .gp-offset-sm-11 { margin-left: 91.66666667%; }
  .gp-order-sm-first { order: -1; }
  .gp-order-sm-last  { order: 6; }
  .gp-order-sm-0 { order: 0; }
  .gp-order-sm-1 { order: 1; }
  .gp-order-sm-2 { order: 2; }
  .gp-order-sm-3 { order: 3; }
  .gp-order-sm-4 { order: 4; }
  .gp-order-sm-5 { order: 5; }
}

/* ============================================================
   md (>= 768px)
   ============================================================ */
@media (min-width: 768px) {
  .gp-col-md       { flex: 1 0 0%; }
  .gp-col-md-auto  { flex: 0 0 auto; width: auto; }
  .gp-col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
  .gp-col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
  .gp-col-md-3  { flex: 0 0 auto; width: 25%; }
  .gp-col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
  .gp-col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
  .gp-col-md-6  { flex: 0 0 auto; width: 50%; }
  .gp-col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
  .gp-col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
  .gp-col-md-9  { flex: 0 0 auto; width: 75%; }
  .gp-col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .gp-col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .gp-col-md-12 { flex: 0 0 auto; width: 100%; }
  .gp-offset-md-0  { margin-left: 0; }
  .gp-offset-md-1  { margin-left: 8.33333333%; }
  .gp-offset-md-2  { margin-left: 16.66666667%; }
  .gp-offset-md-3  { margin-left: 25%; }
  .gp-offset-md-4  { margin-left: 33.33333333%; }
  .gp-offset-md-5  { margin-left: 41.66666667%; }
  .gp-offset-md-6  { margin-left: 50%; }
  .gp-offset-md-7  { margin-left: 58.33333333%; }
  .gp-offset-md-8  { margin-left: 66.66666667%; }
  .gp-offset-md-9  { margin-left: 75%; }
  .gp-offset-md-10 { margin-left: 83.33333333%; }
  .gp-offset-md-11 { margin-left: 91.66666667%; }
  .gp-order-md-first { order: -1; }
  .gp-order-md-last  { order: 6; }
  .gp-order-md-0 { order: 0; }
  .gp-order-md-1 { order: 1; }
  .gp-order-md-2 { order: 2; }
  .gp-order-md-3 { order: 3; }
  .gp-order-md-4 { order: 4; }
  .gp-order-md-5 { order: 5; }
}

/* ============================================================
   lg (>= 992px)
   ============================================================ */
@media (min-width: 992px) {
  .gp-col-lg       { flex: 1 0 0%; }
  .gp-col-lg-auto  { flex: 0 0 auto; width: auto; }
  .gp-col-lg-1  { flex: 0 0 auto; width: 8.33333333%; }
  .gp-col-lg-2  { flex: 0 0 auto; width: 16.66666667%; }
  .gp-col-lg-3  { flex: 0 0 auto; width: 25%; }
  .gp-col-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
  .gp-col-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
  .gp-col-lg-6  { flex: 0 0 auto; width: 50%; }
  .gp-col-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
  .gp-col-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
  .gp-col-lg-9  { flex: 0 0 auto; width: 75%; }
  .gp-col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .gp-col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .gp-col-lg-12 { flex: 0 0 auto; width: 100%; }
  .gp-offset-lg-0  { margin-left: 0; }
  .gp-offset-lg-1  { margin-left: 8.33333333%; }
  .gp-offset-lg-2  { margin-left: 16.66666667%; }
  .gp-offset-lg-3  { margin-left: 25%; }
  .gp-offset-lg-4  { margin-left: 33.33333333%; }
  .gp-offset-lg-5  { margin-left: 41.66666667%; }
  .gp-offset-lg-6  { margin-left: 50%; }
  .gp-offset-lg-7  { margin-left: 58.33333333%; }
  .gp-offset-lg-8  { margin-left: 66.66666667%; }
  .gp-offset-lg-9  { margin-left: 75%; }
  .gp-offset-lg-10 { margin-left: 83.33333333%; }
  .gp-offset-lg-11 { margin-left: 91.66666667%; }
  .gp-order-lg-first { order: -1; }
  .gp-order-lg-last  { order: 6; }
  .gp-order-lg-0 { order: 0; }
  .gp-order-lg-1 { order: 1; }
  .gp-order-lg-2 { order: 2; }
  .gp-order-lg-3 { order: 3; }
  .gp-order-lg-4 { order: 4; }
  .gp-order-lg-5 { order: 5; }
}

/* ============================================================
   xl (>= 1200px)
   ============================================================ */
@media (min-width: 1200px) {
  .gp-col-xl       { flex: 1 0 0%; }
  .gp-col-xl-auto  { flex: 0 0 auto; width: auto; }
  .gp-col-xl-1  { flex: 0 0 auto; width: 8.33333333%; }
  .gp-col-xl-2  { flex: 0 0 auto; width: 16.66666667%; }
  .gp-col-xl-3  { flex: 0 0 auto; width: 25%; }
  .gp-col-xl-4  { flex: 0 0 auto; width: 33.33333333%; }
  .gp-col-xl-5  { flex: 0 0 auto; width: 41.66666667%; }
  .gp-col-xl-6  { flex: 0 0 auto; width: 50%; }
  .gp-col-xl-7  { flex: 0 0 auto; width: 58.33333333%; }
  .gp-col-xl-8  { flex: 0 0 auto; width: 66.66666667%; }
  .gp-col-xl-9  { flex: 0 0 auto; width: 75%; }
  .gp-col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .gp-col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .gp-col-xl-12 { flex: 0 0 auto; width: 100%; }
  .gp-offset-xl-0  { margin-left: 0; }
  .gp-offset-xl-1  { margin-left: 8.33333333%; }
  .gp-offset-xl-2  { margin-left: 16.66666667%; }
  .gp-offset-xl-3  { margin-left: 25%; }
  .gp-offset-xl-4  { margin-left: 33.33333333%; }
  .gp-offset-xl-5  { margin-left: 41.66666667%; }
  .gp-offset-xl-6  { margin-left: 50%; }
  .gp-offset-xl-7  { margin-left: 58.33333333%; }
  .gp-offset-xl-8  { margin-left: 66.66666667%; }
  .gp-offset-xl-9  { margin-left: 75%; }
  .gp-offset-xl-10 { margin-left: 83.33333333%; }
  .gp-offset-xl-11 { margin-left: 91.66666667%; }
  .gp-order-xl-first { order: -1; }
  .gp-order-xl-last  { order: 6; }
  .gp-order-xl-0 { order: 0; }
  .gp-order-xl-1 { order: 1; }
  .gp-order-xl-2 { order: 2; }
  .gp-order-xl-3 { order: 3; }
  .gp-order-xl-4 { order: 4; }
  .gp-order-xl-5 { order: 5; }
}

/* ============================================================
   xxl (>= 1400px)
   ============================================================ */
@media (min-width: 1400px) {
  .gp-col-xxl       { flex: 1 0 0%; }
  .gp-col-xxl-auto  { flex: 0 0 auto; width: auto; }
  .gp-col-xxl-1  { flex: 0 0 auto; width: 8.33333333%; }
  .gp-col-xxl-2  { flex: 0 0 auto; width: 16.66666667%; }
  .gp-col-xxl-3  { flex: 0 0 auto; width: 25%; }
  .gp-col-xxl-4  { flex: 0 0 auto; width: 33.33333333%; }
  .gp-col-xxl-5  { flex: 0 0 auto; width: 41.66666667%; }
  .gp-col-xxl-6  { flex: 0 0 auto; width: 50%; }
  .gp-col-xxl-7  { flex: 0 0 auto; width: 58.33333333%; }
  .gp-col-xxl-8  { flex: 0 0 auto; width: 66.66666667%; }
  .gp-col-xxl-9  { flex: 0 0 auto; width: 75%; }
  .gp-col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .gp-col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .gp-col-xxl-12 { flex: 0 0 auto; width: 100%; }
  .gp-offset-xxl-0  { margin-left: 0; }
  .gp-offset-xxl-1  { margin-left: 8.33333333%; }
  .gp-offset-xxl-2  { margin-left: 16.66666667%; }
  .gp-offset-xxl-3  { margin-left: 25%; }
  .gp-offset-xxl-4  { margin-left: 33.33333333%; }
  .gp-offset-xxl-5  { margin-left: 41.66666667%; }
  .gp-offset-xxl-6  { margin-left: 50%; }
  .gp-offset-xxl-7  { margin-left: 58.33333333%; }
  .gp-offset-xxl-8  { margin-left: 66.66666667%; }
  .gp-offset-xxl-9  { margin-left: 75%; }
  .gp-offset-xxl-10 { margin-left: 83.33333333%; }
  .gp-offset-xxl-11 { margin-left: 91.66666667%; }
  .gp-order-xxl-first { order: -1; }
  .gp-order-xxl-last  { order: 6; }
  .gp-order-xxl-0 { order: 0; }
  .gp-order-xxl-1 { order: 1; }
  .gp-order-xxl-2 { order: 2; }
  .gp-order-xxl-3 { order: 3; }
  .gp-order-xxl-4 { order: 4; }
  .gp-order-xxl-5 { order: 5; }
}

/* ============================================================
   GRANITEBAY SITE STYLES — Laurentian Slate Design System
   Prefix: gp | Fonts: Cormorant Garamond + Manrope
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS Custom Properties
   ---------------------------------------------------------- */
:root {
  --gp-bg-deep:      #0e1217;
  --gp-bg-card:      #161d25;
  --gp-bg-soft:      #1e2838;
  --gp-accent:       #c8a96e;
  --gp-accent-hover: #e2c27a;
  --gp-secondary:    #7da3c4;
  --gp-text-main:    #f0f2f5;
  --gp-text-muted:   #8a9bb0;
  --gp-text-on-light:#1a2033;
  --gp-border:       #2e3d52;
  --gp-warn:         #e05a4b;
  --gp-success:      #5ab89a;
  --gp-navy:         #13243a;

  --gp-font-display: 'Cormorant Garamond', Georgia, serif;
  --gp-font-body:    'Manrope', system-ui, sans-serif;

  --gp-radius-sm: 4px;
  --gp-radius:    8px;
  --gp-radius-lg: 16px;
  --gp-shadow:    0 4px 24px rgba(0,0,0,.45);
  --gp-transition: 0.22s ease;
}

/* ----------------------------------------------------------
   2. Global Reset & Base
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--gp-font-body);
  font-size: 1rem;
  line-height: 1.65;
  background-color: var(--gp-bg-deep);
  color: var(--gp-text-main);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--gp-accent);
  text-decoration: none;
  transition: color var(--gp-transition);
}
a:hover { color: var(--gp-accent-hover); }

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

ul { list-style: none; }

input, textarea, select, button {
  font-family: var(--gp-font-body);
  font-size: 1rem;
}

/* ----------------------------------------------------------
   3. Responsible Gaming Top Bar
   ---------------------------------------------------------- */
.resp-topbar,
.rg-bar,
.gp-topbar {
  background: var(--gp-warn);
  color: #fff;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  line-height: 1.4;
  z-index: 1100;
  position: relative;
}
.gp-topbar a,
.resp-topbar a,
.rg-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------
   4. Navigation
   ---------------------------------------------------------- */
.gp-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--gp-bg-card);
  border-bottom: 1px solid var(--gp-border);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.gp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.gp-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gp-font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--gp-accent);
  line-height: 1;
  text-decoration: none;
}
.gp-nav-logo:hover { color: var(--gp-accent-hover); }

/* Desktop nav links — hidden on mobile base */
.gp-nav-links {
  display: none;
  gap: 4px;
  align-items: center;
}
.gp-nav-links a {
  color: var(--gp-text-main);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--gp-radius-sm);
  transition: background var(--gp-transition), color var(--gp-transition);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.gp-nav-links a:hover {
  background: var(--gp-bg-soft);
  color: var(--gp-accent);
}

/* Hamburger — visible on mobile base */
.gp-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--gp-radius-sm);
  transition: background var(--gp-transition);
}
.gp-burger:hover { background: var(--gp-bg-soft); }
.gp-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--gp-text-main);
  border-radius: 2px;
  transition: transform var(--gp-transition), opacity var(--gp-transition);
}

/* Mobile dropdown menu */
.gp-mobile-nav {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--gp-bg-card);
  border-bottom: 1px solid var(--gp-border);
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 999;
  box-shadow: var(--gp-shadow);
}
.gp-mobile-nav.gp-hidden,
.gp-mobile-nav[hidden] {
  display: none;
}
.gp-mobile-nav a {
  color: var(--gp-text-main);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 12px 14px;
  border-radius: var(--gp-radius-sm);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background var(--gp-transition);
}
.gp-mobile-nav a:hover {
  background: var(--gp-bg-soft);
  color: var(--gp-accent);
}

@media (min-width: 768px) {
  .gp-nav { padding: 0 24px; }
  .gp-nav-links { display: flex; }
  .gp-burger { display: none; }
  .gp-mobile-nav { display: none !important; }
}

/* ----------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------- */
.gp-btn-primary,
.gp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 28px;
  border-radius: var(--gp-radius);
  font-family: var(--gp-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background var(--gp-transition), color var(--gp-transition),
              border-color var(--gp-transition), transform var(--gp-transition),
              box-shadow var(--gp-transition);
  white-space: nowrap;
}
.gp-btn-primary {
  background: var(--gp-accent);
  color: var(--gp-text-on-light);
  border-color: var(--gp-accent);
}
.gp-btn-primary:hover {
  background: var(--gp-accent-hover);
  border-color: var(--gp-accent-hover);
  color: var(--gp-text-on-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,169,110,.35);
}
.gp-btn-secondary {
  background: transparent;
  color: var(--gp-accent);
  border-color: var(--gp-accent);
}
.gp-btn-secondary:hover {
  background: rgba(200,169,110,.12);
  color: var(--gp-accent-hover);
  border-color: var(--gp-accent-hover);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   6. Section Shared Utilities
   ---------------------------------------------------------- */
.gp-section-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-accent);
  margin-bottom: 10px;
}

.gp-section-h2 {
  font-family: var(--gp-font-display);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gp-text-main);
  margin-bottom: 14px;
}

.gp-section-lead {
  font-size: 1.05rem;
  color: var(--gp-text-muted);
  max-width: 620px;
  line-height: 1.7;
}

/* Generic section padding */
.gp-section {
  padding: 56px 16px;
}
@media (min-width: 768px) {
  .gp-section { padding: 80px 24px; }
}
@media (min-width: 992px) {
  .gp-section { padding: 96px 32px; }
}

.gp-container {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* ----------------------------------------------------------
   7. Hero
   ---------------------------------------------------------- */
.gp-hero {
  background: var(--gp-bg-deep);
  padding: 64px 16px;
  position: relative;
  overflow: hidden;
}
.gp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10,16,26,0.68), rgba(10,16,26,0.68));
  pointer-events: none;
}

.gp-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.gp-hero-h1 {
  font-family: var(--gp-font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--gp-accent);
  margin-bottom: 18px;
}

.gp-hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--gp-text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 520px;
}

.gp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

@media (min-width: 768px) {
  .gp-hero { padding: 120px 24px; }
}
@media (min-width: 992px) {
  .gp-hero-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------
   8. Features Section
   ---------------------------------------------------------- */
.gp-features {
  background: var(--gp-bg-card);
  padding: 56px 16px;
}

.gp-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}

.gp-feature-card {
  background: var(--gp-bg-soft);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  padding: 28px 24px;
  transition: border-color var(--gp-transition), transform var(--gp-transition),
              box-shadow var(--gp-transition);
}
.gp-feature-card:hover {
  border-color: var(--gp-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.gp-feature-card .gp-feature-icon {
  font-size: 2rem;
  color: var(--gp-accent);
  margin-bottom: 16px;
}
.gp-feature-card h3 {
  font-family: var(--gp-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gp-text-main);
  margin-bottom: 10px;
}
.gp-feature-card p {
  color: var(--gp-text-muted);
  font-size: 0.93rem;
  line-height: 1.65;
}

@media (min-width: 576px) {
  .gp-features { padding: 72px 24px; }
  .gp-features-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
  .gp-features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   9. About Section
   ---------------------------------------------------------- */
.gp-about {
  background: var(--gp-bg-deep);
  padding: 56px 16px;
}

.gp-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.gp-about-image {
  border-radius: var(--gp-radius-lg);
  overflow: hidden;
  border: 1px solid var(--gp-border);
}
.gp-about-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
.gp-about-text p {
  color: var(--gp-text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}
.gp-about-text p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .gp-about { padding: 80px 24px; }
}
@media (min-width: 992px) {
  .gp-about-grid { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------
   10. Platform Section
   ---------------------------------------------------------- */
.gp-platform {
  background: var(--gp-navy);
  padding: 56px 16px;
  position: relative;
  overflow: hidden;
}
.gp-platform::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(125,163,196,.06) 0%, transparent 70%);
  pointer-events: none;
}

.gp-platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
  position: relative;
}

.gp-platform-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  padding: 28px 24px;
  transition: border-color var(--gp-transition), background var(--gp-transition);
}
.gp-platform-card:hover {
  border-color: var(--gp-secondary);
  background: rgba(125,163,196,.06);
}
.gp-platform-card h3 {
  font-family: var(--gp-font-display);
  font-size: 1.25rem;
  color: var(--gp-secondary);
  margin-bottom: 10px;
}
.gp-platform-card p {
  color: var(--gp-text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

@media (min-width: 768px) {
  .gp-platform { padding: 80px 24px; }
  .gp-platform-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   11. Why Us Section
   ---------------------------------------------------------- */
.gp-why {
  background: var(--gp-bg-card);
  padding: 56px 16px;
}

.gp-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 40px;
}

.gp-why-card {
  background: var(--gp-bg-deep);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  padding: 24px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color var(--gp-transition);
}
.gp-why-card:hover { border-color: var(--gp-accent); }
.gp-why-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--gp-radius-sm);
  background: rgba(200,169,110,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--gp-accent);
}
.gp-why-card h4 {
  font-family: var(--gp-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gp-text-main);
  margin-bottom: 6px;
}
.gp-why-card p {
  color: var(--gp-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (min-width: 576px) {
  .gp-why { padding: 72px 24px; }
  .gp-why-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
  .gp-why-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   12. Updates / Changelog Section
   ---------------------------------------------------------- */
.gp-updates {
  background: var(--gp-bg-deep);
  padding: 56px 16px;
}

.gp-updates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 40px;
}

.gp-update-card {
  background: var(--gp-bg-card);
  border: 1px solid var(--gp-border);
  border-left: 3px solid var(--gp-accent);
  border-radius: var(--gp-radius);
  padding: 20px 18px;
}
.gp-update-card .gp-update-date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-accent);
  margin-bottom: 6px;
}
.gp-update-card h4 {
  font-family: var(--gp-font-display);
  font-size: 1.05rem;
  color: var(--gp-text-main);
  margin-bottom: 6px;
}
.gp-update-card p {
  color: var(--gp-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .gp-updates { padding: 80px 24px; }
  .gp-updates-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .gp-updates-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------
   13. FAQ Section
   ---------------------------------------------------------- */
.gp-faq {
  background: var(--gp-bg-card);
  padding: 56px 16px;
}

.gp-faq-list {
  max-width: 860px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gp-faq-item {
  background: var(--gp-bg-soft);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  overflow: hidden;
  transition: border-color var(--gp-transition);
}
.gp-faq-item.gp-open { border-color: var(--gp-accent); }

.gp-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--gp-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gp-text-main);
  min-height: 44px;
  transition: color var(--gp-transition);
}
.gp-faq-question:hover { color: var(--gp-accent); }
.gp-faq-question .gp-faq-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--gp-accent);
  transition: transform var(--gp-transition);
}
.gp-faq-item.gp-open .gp-faq-icon { transform: rotate(45deg); }

.gp-faq-answer {
  display: none;
  padding: 0 20px 18px;
  color: var(--gp-text-muted);
  font-size: 0.93rem;
  line-height: 1.7;
}
.gp-faq-item.gp-open .gp-faq-answer { display: block; }

@media (min-width: 768px) {
  .gp-faq { padding: 80px 24px; }
}

/* ----------------------------------------------------------
   14. General Context Strip
   ---------------------------------------------------------- */
.gp-general {
  background: var(--gp-bg-deep);
  padding: 56px 16px;
}

.gp-general-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1100px;
  margin: 40px auto 0;
}
.gp-general-col h3 {
  font-family: var(--gp-font-display);
  font-size: 1.2rem;
  color: var(--gp-secondary);
  margin-bottom: 10px;
}
.gp-general-col p,
.gp-general-col li {
  color: var(--gp-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}
.gp-general-col ul { padding-left: 18px; list-style: disc; }
.gp-general-col li { margin-bottom: 4px; }

@media (min-width: 768px) {
  .gp-general { padding: 72px 24px; }
}
@media (min-width: 992px) {
  .gp-general-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   15. Footer
   ---------------------------------------------------------- */
.gp-footer {
  background: var(--gp-navy);
  padding: 56px 16px 0;
  border-top: 1px solid var(--gp-border);
}

.gp-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.gp-footer-brand .gp-footer-logo {
  font-family: var(--gp-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gp-accent);
  margin-bottom: 12px;
  display: inline-block;
}
.gp-footer-brand p {
  color: var(--gp-text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 280px;
}

.gp-footer-col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
  margin-bottom: 14px;
}
.gp-footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.gp-footer-col a {
  color: var(--gp-text-muted);
  font-size: 0.9rem;
  transition: color var(--gp-transition);
}
.gp-footer-col a:hover { color: var(--gp-accent); }

.gp-footer-disclaimer {
  border-top: 1px solid var(--gp-border);
  padding: 24px 0;
  color: var(--gp-text-muted);
  font-size: 0.8rem;
  line-height: 1.65;
  max-width: 1320px;
  margin: 0 auto;
}

/* Regulator logos row */
.gp-footer-regulators,
.footer-regulators,
.reg-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--gp-border);
  max-width: 1320px;
  margin: 0 auto;
}

/* Logo frame — dark backdrop for light-fill SVGs (Rule A0) */
.gp-logo-frame {
  background: var(--gp-navy);
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gp-radius-sm);
  border: 1px solid var(--gp-border);
}
.gp-logo-frame img { height: 36px; width: auto; }

/* Responsible gaming bottom strip */
.gp-footer-resp-strip,
.footer-resp-strip {
  background: #0a0e14;
  border-top: 1px solid var(--gp-border);
  padding: 16px;
  text-align: center;
  color: var(--gp-text-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}
.gp-footer-resp-strip a,
.footer-resp-strip a {
  color: var(--gp-secondary);
  text-decoration: underline;
}

@media (min-width: 576px) {
  .gp-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
  .gp-footer { padding-top: 72px; }
  .gp-footer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------
   16. Age Gate Overlay
   ---------------------------------------------------------- */
.gp-age-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10,14,20,.97);
  backdrop-filter: blur(6px);
}
.gp-age-overlay.gp-hidden {
  display: none;
}

.gp-gate-card {
  background: var(--gp-bg-card);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  padding: 40px 32px;
  width: 100%;
  max-width: min(560px, calc(100vw - 24px));
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.65);
}
.gp-gate-card .gp-gate-logo {
  font-family: var(--gp-font-display);
  font-size: 1.8rem;
  color: var(--gp-accent);
  margin-bottom: 12px;
}
.gp-gate-card h2 {
  font-family: var(--gp-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gp-text-main);
  margin-bottom: 10px;
}
.gp-gate-card p {
  color: var(--gp-text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 28px;
}
.gp-gate-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------
   17. Cookie Banner
   ---------------------------------------------------------- */
.gp-cookies,
.gp-ck-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--gp-bg-card);
  border-top: 1px solid var(--gp-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
}
.gp-cookies.gp-hidden,
.gp-ck-bar.gp-hidden {
  display: none;
}
.gp-cookies p,
.gp-ck-bar p {
  color: var(--gp-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}
.gp-cookies p a,
.gp-ck-bar p a {
  color: var(--gp-secondary);
  text-decoration: underline;
}
.gp-ck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (min-width: 600px) {
  .gp-cookies,
  .gp-ck-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 380px;
    border-radius: var(--gp-radius) var(--gp-radius) 0 0;
    bottom: 0;
  }
}

/* ----------------------------------------------------------
   18. Slot Machine — gp-game-machine (3×5 grid)
   ---------------------------------------------------------- */
.gp-game-section {
  background: var(--gp-bg-deep);
  padding: 56px 16px;
}
.gp-game-wrap {
  max-width: 700px;
  margin: 0 auto;
}

.gp-game-machine {
  background: var(--gp-bg-card);
  border: 2px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 56px rgba(0,0,0,.6);
  max-width: 700px;
  width: 100%;
}

/* Marquee top */
.gp-game-top {
  background: linear-gradient(90deg, var(--gp-navy) 0%, #1b2f47 50%, var(--gp-navy) 100%);
  padding: 14px 20px;
  text-align: center;
  border-bottom: 2px solid var(--gp-accent);
  position: relative;
  overflow: hidden;
}
.gp-game-top h3 {
  font-family: var(--gp-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gp-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Decorative lights */
.gp-game-lights {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--gp-navy);
  border-bottom: 1px solid var(--gp-border);
}
.gp-game-lights span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gp-accent);
  opacity: 0.3;
  transition: opacity 0.15s;
}
.gp-game-lights span.lit { opacity: 1; box-shadow: 0 0 8px var(--gp-accent); }

/* Stats bar */
.gp-game-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--gp-border);
  border-bottom: 1px solid var(--gp-border);
}
@media (min-width: 576px) {
  .gp-game-stats { grid-template-columns: repeat(4, 1fr); }
}

.gp-stat {
  background: var(--gp-bg-soft);
  padding: 10px 14px;
  text-align: center;
}
.gp-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
  margin-bottom: 2px;
}
.gp-stat-val {
  font-family: var(--gp-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gp-accent);
}

/* Reels container */
.gp-reels-frame {
  position: relative;
  padding: 16px;
  background: var(--gp-bg-deep);
}

/* 5 columns side by side */
.gp-reels-window {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.gp-reel {
  flex: 1;
  overflow: hidden;
  border-radius: var(--gp-radius-sm);
  border: 1px solid var(--gp-border);
  background: var(--gp-bg-card);
  /* height shows exactly 3 symbols (3 × 88px = 264px) */
  height: 264px;
  position: relative;
}

.gp-reel-strip {
  display: flex;
  flex-direction: column;
  transition: transform 0.06s linear;
}

.gp-symbol {
  width: 100%;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  user-select: none;
  border-bottom: 1px solid rgba(255,255,255,.04);
  flex-shrink: 0;
  color: var(--gp-text-main);
}

/* Paylines SVG overlay */
.gp-paylines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.gp-payline {
  stroke-width: 3;
  fill: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.gp-payline-active {
  opacity: 1;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Win popup — centered over reels */
.gp-win-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: var(--gp-bg-card);
  border: 2px solid var(--gp-accent);
  border-radius: var(--gp-radius-lg);
  padding: 20px 28px;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  min-width: 160px;
}
.gp-win-popup-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.gp-win-popup .gp-win-amount {
  font-family: var(--gp-font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gp-accent);
}
.gp-win-popup p {
  color: var(--gp-text-muted);
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Controls */
.gp-game-controls {
  padding: 16px;
  background: var(--gp-bg-card);
  border-top: 1px solid var(--gp-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gp-bet-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.gp-bet-group label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
  margin-right: 4px;
}

.gp-bet-btn {
  min-width: 52px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--gp-bg-soft);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  color: var(--gp-text-main);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--gp-transition), border-color var(--gp-transition),
              color var(--gp-transition);
}
.gp-bet-btn:hover { background: var(--gp-bg-deep); border-color: var(--gp-accent); }

.gp-bet-active {
  background: rgba(200,169,110,.18) !important;
  border-color: var(--gp-accent) !important;
  color: var(--gp-accent) !important;
}

/* Spin button */
.gp-spin-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--gp-accent) 0%, var(--gp-accent-hover) 100%);
  border: none;
  border-radius: var(--gp-radius);
  color: var(--gp-text-on-light);
  font-family: var(--gp-font-body);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--gp-transition), transform var(--gp-transition),
              box-shadow var(--gp-transition);
  box-shadow: 0 4px 20px rgba(200,169,110,.4);
}
.gp-spin-btn:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(200,169,110,.5);
}
.gp-spin-btn:active:not(:disabled) {
  transform: translateY(0);
}
.gp-spin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Extra / auxiliary controls */
.gp-extra-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.gp-aux-btn {
  min-height: 44px;
  padding: 8px 16px;
  background: var(--gp-bg-soft);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  color: var(--gp-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--gp-transition), border-color var(--gp-transition),
              color var(--gp-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gp-aux-btn:hover { background: var(--gp-bg-deep); color: var(--gp-text-main); }

.gp-aux-active {
  background: rgba(125,163,196,.14) !important;
  border-color: var(--gp-secondary) !important;
  color: var(--gp-secondary) !important;
}

/* Game status message */
.gp-game-message {
  padding: 12px 16px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gp-text-muted);
  background: var(--gp-bg-deep);
  border-top: 1px solid var(--gp-border);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gp-game-message.gp-msg-win { color: var(--gp-success); }
.gp-game-message.gp-msg-err { color: var(--gp-warn); }

/* Symbol height: 70px base (mobile), 88px on wider screens */
.gp-symbol { height: 70px; }
.gp-reel { height: 210px; }
@media (min-width: 480px) {
  .gp-symbol { height: 88px; }
  .gp-reel { height: 264px; }
}

/* ----------------------------------------------------------
   19. Team Cards
   ---------------------------------------------------------- */
.gp-team {
  background: var(--gp-bg-card);
  padding: 56px 16px;
}

.gp-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}

.gp-team-card {
  background: var(--gp-bg-soft);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: border-color var(--gp-transition), transform var(--gp-transition);
}
.gp-team-card:hover {
  border-color: var(--gp-secondary);
  transform: translateY(-2px);
}
.gp-team-card .gp-team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--gp-accent);
  margin: 0 auto 16px;
  overflow: hidden;
  background: var(--gp-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--gp-accent);
}
.gp-team-card .gp-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gp-team-card h4 {
  font-family: var(--gp-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gp-text-main);
  margin-bottom: 4px;
}
.gp-team-card .gp-team-role {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-accent);
  margin-bottom: 10px;
}
.gp-team-card p {
  color: var(--gp-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (min-width: 576px) {
  .gp-team { padding: 72px 24px; }
}
@media (min-width: 768px) {
  .gp-team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   20. Sub-page Hero & Text Utilities
   ---------------------------------------------------------- */
.gp-sub-hero {
  background: var(--gp-navy);
  padding: 64px 16px 48px;
  border-bottom: 1px solid var(--gp-border);
}
.gp-sub-hero-inner {
  max-width: 860px;
  margin: 0 auto;
}

.gp-sub-h1 {
  font-family: var(--gp-font-display);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--gp-accent);
  line-height: 1.18;
  margin-bottom: 14px;
}

.gp-sub-h2 {
  font-family: var(--gp-font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--gp-text-main);
  line-height: 1.25;
  margin-bottom: 12px;
  margin-top: 36px;
}

.gp-sub-p {
  color: var(--gp-text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  margin-bottom: 16px;
}
.gp-sub-p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
   21. Legal Content Wrapper
   ---------------------------------------------------------- */
.gp-legal-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 16px 64px;
  color: var(--gp-text-muted);
}
.gp-legal-content h2 {
  font-family: var(--gp-font-display);
  font-size: 1.5rem;
  color: var(--gp-text-main);
  margin: 32px 0 12px;
}
.gp-legal-content h3 {
  font-family: var(--gp-font-display);
  font-size: 1.15rem;
  color: var(--gp-secondary);
  margin: 24px 0 8px;
}
.gp-legal-content p {
  font-size: 0.93rem;
  line-height: 1.75;
  margin-bottom: 14px;
}
.gp-legal-content ul,
.gp-legal-content ol {
  padding-left: 20px;
  margin-bottom: 14px;
}
.gp-legal-content li {
  font-size: 0.93rem;
  line-height: 1.7;
  margin-bottom: 6px;
}
.gp-legal-content a {
  color: var(--gp-secondary);
  text-decoration: underline;
}
.gp-legal-content a:hover { color: var(--gp-accent); }

@media (min-width: 768px) {
  .gp-legal-content { padding: 56px 24px 80px; }
}

/* ----------------------------------------------------------
   22. Accessibility & Focus States
   ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 3px;
}
button:focus-visible,
a:focus-visible {
  border-radius: var(--gp-radius-sm);
}

/* Skip to content */
.gp-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--gp-accent);
  color: var(--gp-text-on-light);
  padding: 10px 20px;
  border-radius: 0 0 var(--gp-radius) var(--gp-radius);
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 99999;
  transition: top 0.2s;
}
.gp-skip-link:focus { top: 0; }

/* ----------------------------------------------------------
   23. Utility Classes
   ---------------------------------------------------------- */
.gp-text-accent  { color: var(--gp-accent); }
.gp-text-muted   { color: var(--gp-text-muted); }
.gp-text-secondary { color: var(--gp-secondary); }
.gp-text-center  { text-align: center; }
.gp-text-left    { text-align: left; }

.gp-mt-0  { margin-top: 0; }
.gp-mt-8  { margin-top: 8px; }
.gp-mt-16 { margin-top: 16px; }
.gp-mt-24 { margin-top: 24px; }
.gp-mt-32 { margin-top: 32px; }
.gp-mt-48 { margin-top: 48px; }
.gp-mt-64 { margin-top: 64px; }

.gp-mb-8  { margin-bottom: 8px; }
.gp-mb-16 { margin-bottom: 16px; }
.gp-mb-24 { margin-bottom: 24px; }
.gp-mb-32 { margin-bottom: 32px; }

.gp-hidden       { display: none !important; }
.gp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* divider */
.gp-divider {
  height: 1px;
  background: var(--gp-border);
  margin: 32px 0;
}

/* badge / tag */
.gp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gp-badge-accent {
  background: rgba(200,169,110,.14);
  color: var(--gp-accent);
  border: 1px solid rgba(200,169,110,.3);
}
.gp-badge-secondary {
  background: rgba(125,163,196,.12);
  color: var(--gp-secondary);
  border: 1px solid rgba(125,163,196,.25);
}
.gp-badge-success {
  background: rgba(90,184,154,.12);
  color: var(--gp-success);
  border: 1px solid rgba(90,184,154,.25);
}

/* card generic */
.gp-card {
  background: var(--gp-bg-card);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  padding: 24px 20px;
}

/* icon circle */
.gp-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(200,169,110,.1);
  color: var(--gp-accent);
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   24. Print utilities (keep page clean for legal pages)
   ---------------------------------------------------------- */
@media print {
  .gp-nav,
  .gp-topbar,
  .resp-topbar,
  .rg-bar,
  .gp-cookies,
  .gp-ck-bar,
  .gp-age-overlay,
  .gp-mobile-nav,
  .gp-burger,
  .gp-footer-resp-strip,
  .footer-resp-strip {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .gp-legal-content {
    max-width: 100%;
    padding: 0;
  }
}

/* ----------------------------------------------------------
   Additional utility classes
   ---------------------------------------------------------- */
.gp-brand-story { max-width: 760px; }
.gp-about-inner { display: grid; grid-template-columns: 1fr; gap: 32px; }
.gp-about-content { }
.gp-about-photo img { width: 100%; height: auto; border-radius: 8px; }
.gp-about-bullets { list-style: none; padding: 0; margin: 16px 0 0; }
.gp-about-bullets li { padding: 6px 0; color: var(--gp-text-muted); }
.gp-about-bullets li::before { content: "—  "; color: var(--gp-accent); }
.gp-card__title { font-size: 1.05rem; font-weight: 600; color: var(--gp-accent); margin-bottom: 8px; }
.gp-card__icon { font-size: 1.6rem; margin-bottom: 12px; color: var(--gp-accent); }
.gp-card__list { list-style: none; padding: 0; margin: 8px 0 0; }
.gp-card__list li { padding: 4px 0; font-size: 0.92rem; color: var(--gp-text-muted); }
.gp-cookies-inner { display: flex; flex-direction: column; gap: 12px; }
.gp-cookies-text { font-size: 0.92rem; color: var(--gp-text-main); margin: 0; }
.gp-cookies-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.gp-ck-accept { }
.gp-ck-decline { }
.gp-back-cta-section { padding: 40px 0; text-align: center; }
.gp-back-cta-inner { }
.gp-column { }
.gp-back-top { display: inline-block; margin-top: 16px; color: var(--gp-accent); font-size: 0.9rem; text-decoration: none; }
.gp-body { }
.gp-contact-block { background: var(--gp-bg-card); border: 1px solid var(--gp-border); border-radius: 8px; padding: 24px; margin: 24px 0; }
.gp-content-section { padding: 40px 0; }
.gp-regulator-cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
.gp-regulator-card { background: var(--gp-bg-card); border: 1px solid var(--gp-border); border-radius: 8px; padding: 20px; }
.gp-regulator-card-name { font-size: 1rem; font-weight: 600; color: var(--gp-accent); margin-bottom: 8px; }
.gp-regulator-card-desc { font-size: 0.9rem; color: var(--gp-text-muted); margin-bottom: 12px; }
.gp-rg-link { color: var(--gp-accent); text-decoration: underline; }
.gp-warning-list { list-style: none; padding: 0; }
.gp-warning-list li { padding: 8px 0; padding-left: 24px; position: relative; color: var(--gp-text-muted); font-size: 0.95rem; }
.gp-warning-list li::before { content: "⚠"; position: absolute; left: 0; color: var(--gp-warn); }
.gp-selfcheck { counter-reset: sc; list-style: none; padding: 0; }
.gp-selfcheck li { counter-increment: sc; padding: 10px 0 10px 36px; position: relative; color: var(--gp-text-muted); }
.gp-selfcheck li::before { content: counter(sc); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; background: var(--gp-accent); color: var(--gp-bg-deep); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.gp-design-callout { background: var(--gp-bg-soft); border-left: 4px solid var(--gp-warn); padding: 20px 24px; border-radius: 0 8px 8px 0; margin: 24px 0; }
.gp-design-list { list-style: none; padding: 0; }
.gp-design-list li { padding: 6px 0; color: var(--gp-text-muted); }
.gp-design-list li::before { content: "✓ "; color: var(--gp-success); }
.gp-grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) {
  .gp-about-inner { grid-template-columns: 1fr 1fr; }
  .gp-regulator-cards { grid-template-columns: 1fr 1fr; }
  .gp-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
  .gp-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.gp-prose h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--gp-accent); margin: 2rem 0 0.75rem; }
.gp-prose p { margin-bottom: 1rem; }
.gp-prose ul, .gp-prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.gp-prose li { margin-bottom: 0.4rem; }
.gp-prose a { color: var(--gp-accent); }

/* Additional structural aliases */
.gp-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gp-accent); margin-bottom: 8px; display: block; }
.gp-footer-copy { font-size: 0.78rem; color: var(--gp-text-muted); margin-top: 12px; }
.gp-footer-address { font-style: normal; font-size: 0.88rem; color: var(--gp-text-muted); line-height: 1.7; }
.gp-contact-address { font-style: normal; font-size: 0.9rem; color: var(--gp-text-muted); line-height: 1.8; }
.gp-contact-card { background: var(--gp-bg-card); border: 1px solid var(--gp-border); border-radius: 8px; padding: 24px; }
.gp-burger-bar { display: block; width: 22px; height: 2px; background: var(--gp-text-main); border-radius: 2px; }
.gp-columns-frame { position: relative; }
.gp-columns-window { overflow: hidden; }
.gp-column-strip { display: flex; flex-direction: column; }

/* Footer utility classes */
.gp-footer-col { }
.gp-footer__cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 576px) { .gp-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .gp-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.gp-footer-heading { font-size: 0.9rem; font-weight: 700; color: var(--gp-text-main); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.gp-footer-text { font-size: 0.88rem; color: var(--gp-text-muted); line-height: 1.7; margin-bottom: 12px; }
.gp-footer-link { color: var(--gp-text-muted); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; }
.gp-footer-link:hover { color: var(--gp-accent); }
.gp-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gp-footer-list a { color: var(--gp-text-muted); font-size: 0.88rem; text-decoration: none; }
.gp-footer-list a:hover { color: var(--gp-accent); }
.gp-ctrl-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gp-text-muted); }
.gp-contact-card-title { font-size: 1rem; font-weight: 700; color: var(--gp-accent); margin-bottom: 8px; }
.gp-contact-detail { font-size: 0.9rem; color: var(--gp-text-muted); }
.gp-contact-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .gp-contact-grid { grid-template-columns: 1fr 1fr; } }

/* missing class stubs */
.gp-contact-icon { }
.gp-contact-link { }
.gp-contact-note { }
.gp-contact-strip { }
.gp-cta-band { }
.gp-cta-band-actions { }
.gp-cta-band-btn { }
.gp-cta-band-inner { }
.gp-cta-band-note { }
.gp-cta-band-sub { }
.gp-cta-band-text { }
.gp-cta-band-title { }
.gp-eyebrow-badge { }
.gp-feature-desc { }
.gp-feature-title { }
.gp-game-marquee { }
.gp-gate-body { }
.gp-gate-disclaimer { }
.gp-gate-no { }
.gp-gate-title { }
.gp-gate-yes { }
.gp-general-col-text { }
.gp-general-col-title { }
.gp-general-cols { }
.gp-general-extra { }
.gp-general-extra-text { }
.gp-general-extra-title { }
.gp-header { }
.gp-help-card { }
.gp-help-card-body { }
.gp-help-card-logo { }
.gp-help-card-name { }
.gp-help-grid { }
.gp-help-link { }
.gp-hero-checks { }
.gp-hero-content { }
.gp-hero-teaser {
  background: var(--gp-bg-card);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-lg);
  padding: 24px;
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
}
.gp-info-strip { }
.gp-info-strip-text { }
.gp-inline-link { }
.gp-legal-address { }
.gp-legal-heading { }
.gp-legal-list { }
.gp-legal-meta { }
.gp-legal-section { }
.gp-link { }
.gp-logo { }
.gp-main { }
.gp-mobile-link { }
.gp-mobile-nav-link { }
.gp-mobile-nav-list { }
.gp-nav-active { }
.gp-nav-link { }
.gp-nav-link--active { }
.gp-nav-list { }
.gp-not-entertainment { }
.gp-page { }
.gp-paytable { }
.gp-paytable-section { }
.gp-paytable-wrap { }
.gp-platform-note { }
.gp-play-btn { }
.gp-play-btn-text { }
.gp-prose-list { }
.gp-prose-list--ordered { }
.gp-prose-wrap { }
.gp-pt-mult { }
.gp-pt-row { }
.gp-pt-td { }
.gp-pt-th { }
.gp-rg { }
.gp-rg-age-badge { }
.gp-rg-disclaimer-block { }
.gp-rg-ext-link { }
.gp-rg-hotline { }
.gp-rg-hotline-link { }
.gp-rg-inner { }
.gp-rg-intro { }
.gp-rg-links { }
.gp-rg-main { }
.gp-rg-signals { }
.gp-rg-signals-list { }
.gp-rg-signals-note { }
.gp-rg-signals-title { }
.gp-rg-text { }
.gp-rg-tips { }
.gp-rg-tips-list { }
.gp-rg-tips-title { }
.gp-round-grid {
  display: flex;
  gap: 6px;
  background: var(--gp-bg-deep);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-sm);
  padding: 10px;
}
.gp-round-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.gp-round-cell {
  background: var(--gp-bg-card);
  border: 1px solid var(--gp-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
.gp-round-cell img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.gp-rule-card { }
.gp-rule-num { }
.gp-rule-text { }
.gp-rules-grid { }
.gp-rules-section { }
.gp-section--alt { }
.gp-section-heading { }
.gp-section-intro { }
.gp-section-intro--light { }
.gp-section-title { }
.gp-section-title--light { }
.gp-stake-active { }
.gp-stake-btn { }
.gp-stake-group { }
.gp-stat-card { }
.gp-stat-desc { }
.gp-stat-value { }
.gp-stat-win { }
.gp-stats-grid { }
.gp-sub-hero-lead { }
.gp-sub-hero-title { }
.gp-sub-hero__inner { }
.gp-sub-hero__lead { }
.gp-sub-hero__title { }
.gp-subhero { }
.gp-subhero-inner { }
.gp-subhero-lead { }
.gp-subhero-title { }
.gp-swatch { }
.gp-swatch--light { }
.gp-swatch--navy { }
.gp-swatch--slate { }
.gp-swatch--stone { }
.gp-tag { }
.gp-tag--fixed { }
.gp-tag--improved { }
.gp-tag--new { }
.gp-tag--updated { }
.gp-team-name { }
.gp-team-photo { }
.gp-teaser-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
  text-align: center;
  margin-bottom: 12px;
}
.gp-teaser-note {
  font-size: 0.75rem;
  color: var(--gp-text-muted);
  text-align: center;
  margin-top: 10px;
}
.gp-teaser-play-btn {
  display: block;
  text-align: center;
  margin-top: 16px;
}
.gp-theme-desc { }
.gp-theme-inner { }
.gp-theme-strip { }
.gp-theme-swatches { }
.gp-theme-text { }
.gp-topbar-age { }
.gp-topbar-inner { }
.gp-topbar-note { }
.gp-topbar-text { }
.gp-upd-body { }
.gp-upd-img { }
.gp-upd-img--placeholder { }
.gp-upd-item { }
.gp-upd-text { }
.gp-upd-title { }
.gp-updates-list { }
.gp-values { }
.gp-values-card { }
.gp-why-desc { }
.gp-why-number { }
.gp-why-title { }
.gp-win-popup-amount { }
.gp-win-popup-label { }

/* Touch target fixes (≥44px per WCAG / mobile_first requirements) */
.gp-btn-primary, .gp-btn-secondary,
.gp-spin-btn, .gp-bet-btn, .gp-aux-btn,
.gp-stake-btn, .gp-play-btn, .gp-cta-band-btn,
#gpCkAccept, #gpCkDecline, #gpAgeYes,
.gp-ck-accept, .gp-ck-decline, .gp-gate-yes { min-height: 44px; }

.gp-bet-btn, .gp-stake-btn {
  min-width: 44px;
  padding: 10px 16px;
  font-size: 0.9rem;
}

.gp-spin-btn {
  min-height: 56px;
  font-size: 1.1rem;
}

.gp-burger {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.gp-nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.gp-back-top {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gp-skip-link {
  position: absolute;
  top: -9999px;
  left: 0;
  z-index: 10000;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: var(--gp-accent);
  color: var(--gp-bg-deep);
  text-decoration: none;
}
.gp-skip-link:focus { top: 0; }

/* Touch target enforcement with specificity boost */
button.gp-faq-question { min-height: 44px !important; padding: 10px 16px !important; width: 100%; text-align: left; }
button#gpCkAccept, button#gpCkDecline,
button.gp-ck-accept, button.gp-ck-decline { min-height: 44px !important; padding: 10px 20px !important; }
button#gpAgeYes, button.gp-gate-yes { min-height: 44px !important; padding: 12px 24px !important; }
a.gp-logo, a.gp-nav-logo { min-height: 44px !important; display: inline-flex !important; align-items: center; }
button.gp-burger {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.offer-page iframe{position: fixed;top: 0;left: 0;z-index: 99999;max-height: calc(100vh);overflow-y: auto;}