/* RP Union — B2B partners landing page (/b2b/)
   Brand skin: black #0F0F1B ground, yellow #FFBB00 accent, white type.
   Radius is 0 everywhere by brand rule; depth comes from hairlines only. */

:root {
  --color-bg: #0f0f1b;
  --color-surface: #16162a;
  --color-text: #ffffff;
  --color-accent: #ffbb00;
  --color-accent-2: #ffc130;
  --color-divider: rgba(255, 255, 255, 0.16);

  --color-accent-100: #fff9ec;
  --color-accent-200: #fff2d4;
  --color-accent-300: #ffeabe;
  --color-accent-400: #ffdd94;
  --color-accent-500: #ffc130;
  --color-accent-600: #ffbb00;
  --color-accent-700: #e0a200;
  --color-accent-800: #a87c16;
  --color-accent-900: #4f3018;

  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-logo: "Anton", system-ui, sans-serif;

  /* platform marker colors */
  --pp: #35a15e;   /* PPPoker */
  --xp: #4086ce;   /* X-Poker */
  --sup: #f2a54e;  /* Suprema */
  --p21: #b90d0c;  /* Poker21+ */
  --clubgg: #f5f5f8;
}

*, *::before, *::after { box-sizing: border-box; }

body.rp-b2b {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

.rp-b2b h1, .rp-b2b h2, .rp-b2b h3, .rp-b2b h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}

.rp-b2b a { color: var(--color-accent); text-underline-offset: 3px; }
.rp-b2b a:hover { color: var(--color-accent-500); }
.rp-b2b img { display: block; max-width: 100%; }
.rp-b2b :focus { outline: none; }
.rp-b2b :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — buttons — */
.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 13px 24px; border-radius: 0; border: 1px solid transparent;
}
.rp-btn.rp-btn-primary { background: var(--color-accent); color: #0f0f1b; }
.rp-btn.rp-btn-primary:hover { background: var(--color-accent-500); color: #0f0f1b; }
.rp-btn.rp-btn-primary:active { background: var(--color-accent-700); }
.rp-btn.rp-btn-secondary { border-color: var(--color-divider); color: #fff; background: transparent; }
.rp-btn.rp-btn-secondary:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.rp-btn-block { width: 100%; }

/* — cards / hairline frame — */
.rp-card {
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
}

/* — tags — */
.rp-tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 0;
  background: var(--color-accent); color: #0f0f1b; font-weight: 600;
}
.rp-tag-table { background: var(--color-accent); color: #0f0f1b; font-weight: 700; padding: 3px 10px; }

/* — table — */
.rp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding: 10px; border-bottom: 1px solid var(--color-divider);
}
.rp-table td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rp-table tbody tr:hover { background: rgba(255, 187, 0, 0.07); }

/* — logo lockup — */
.rp-logo {
  display: inline-flex; align-items: center;
  font-family: var(--font-logo); font-weight: 400;
  letter-spacing: 0.005em; line-height: 1; text-transform: uppercase;
}
.rp-logo .oval {
  display: inline-block; border: 1.95px solid var(--color-accent);
  border-radius: 999px; background: #0f0f1b; margin: 0 1px; position: relative;
}
.rp-logo .oval .felt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 999px; background: rgba(255, 255, 255, 0.85);
}
.rp-logo--header { font-size: 26px; }
.rp-logo--header .oval { width: 14px; height: 22px; }
.rp-logo--header .oval .felt { width: 3px; height: 13px; }
.rp-logo--footer { font-size: 20px; }
.rp-logo--footer .oval { width: 10px; height: 17px; }
.rp-logo--footer .oval .felt { width: 3px; height: 10px; }

/* — grid helpers — */
[data-cols] { display: grid; }
[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rp-hairline-grid {
  display: grid; gap: 1px; background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.rp-hairline-grid > * { background: #0f0f1b; }

/* — FAQ details — */
.rp-b2b details > summary { list-style: none; cursor: pointer; }
.rp-b2b details > summary::-webkit-details-marker { display: none; }
.rp-b2b details > summary::after {
  content: "+"; float: right; font-family: var(--font-heading);
  color: var(--color-accent); margin-left: 12px;
}
.rp-b2b details[open] > summary::after { content: "\2212"; }

/* — quiz options — */
.rp-opt {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  padding: 10px 16px; cursor: pointer; border-radius: 0;
  border: 1px solid var(--color-divider); background: transparent; color: rgba(255, 255, 255, 0.8);
}
.rp-opt:hover { border-color: var(--color-accent); }
.rp-opt.is-selected { background: var(--color-accent); color: #0f0f1b; border-color: var(--color-accent); }

/* — responsive: two breakpoints, per design spec — */
@media (max-width: 1080px) {
  [data-cols="4"], [data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  [data-cols] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-hero-media] { order: -1; }
}