/* 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;
  --up: #7e57c2;   /* Upoker */
}

*, *::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); }

/* — header nav / mobile menu — */
/* desktop order: logo, then links, then the primary CTA on the far right
   (matches the original design) — the header's HTML source order puts the
   CTA button before the links div so the mobile layout below is simpler,
   so these two order values are what restore the correct desktop order. */
.rp-navlinks {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
  flex-wrap: wrap;
  order: 1;
}
header .rp-btn-primary {
  order: 2;
}
.rp-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  flex: none;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
}
.rp-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.rp-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rp-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.rp-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* — 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; }

  .rp-nav-toggle { display: flex; }
  header .rp-btn-primary { width: 100%; justify-content: center; order: 2; margin-top: 10px; }
  .rp-navlinks {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--color-divider);
  }
  .rp-navlinks.is-open { display: flex; }
  .rp-navlinks a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--color-divider);
  }
}