/* ragna-bet.nl: plum ground, violet from the Free Money ticket, lime buttons from Log in and Join Now, orange for small highlights.
   Flat sections divided by rules in a 1180 px column, with a sticky page index on the left. Prefix rl-. Fonts: Red Hat Display and Spline Sans. */
:root {
  --rl-bg: #16101f; --rl-bg-2: #110c18; --rl-s1: #211932; --rl-s2: #2c2244; --rl-line: #3a2e55; --rl-line-2: #4c3d6e;
  --rl-ink: #f3effa; --rl-mut: #cfc6e0; --rl-faint: #a497bd;
  --rl-vio: #b18cff; --rl-vio-l: #c6a8ff; --rl-vio-d: #8a63e0; --rl-lime: #8fe05a; --rl-lime-l: #a6ec76; --rl-or: #ff9a4a; --rl-dark: #14101c;
  --rl-w: 1180px;
  --font-display: 'Red Hat Display', 'Segoe UI', sans-serif;
  --font-body: 'Spline Sans', Arial, sans-serif;
}
html { scroll-padding-top: 80px; }
body.rl-site { background: var(--rl-bg); color: var(--rl-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; }
.rl-site h1, .rl-site h2, .rl-site h3, .rl-site h5 { font-family: var(--font-display); color: var(--rl-ink); letter-spacing: -0.01em; text-transform: none; }
.rl-site a { color: var(--rl-vio-l); }
.rl-site p, .rl-site li { max-width: none; }
.rl-in { max-width: var(--rl-w); margin: 0 auto; padding: 0 1.5rem; }

/* Buttons */
.rl-site .btn { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; border-radius: 10px; padding: 0.62rem 1.3rem; text-decoration: none; letter-spacing: 0; }
.rl-site .btn--primary { background: var(--rl-lime); color: var(--rl-dark); }
.rl-site .btn--primary:hover { background: var(--rl-lime-l); color: var(--rl-dark); }
.rl-site .btn--ghost { background: rgba(177, 140, 255, 0.1); color: var(--rl-vio-l); border: 1.5px solid var(--rl-vio-d); }
.rl-site .btn--ghost:hover { background: rgba(177, 140, 255, 0.2); color: #fff; }
.rl-site .btn--line { background: transparent; color: var(--rl-ink); border: 1.5px solid var(--rl-line-2); }
.rl-site .btn--line:hover { border-color: var(--rl-vio); color: #fff; }

/* Header: logo left, menu and buttons grouped on the right */
.rl-site .site-header.rl-bar { position: sticky; top: 0; z-index: 120; background: rgba(17, 12, 24, 0.96); border-bottom: 2px solid var(--rl-vio-d); height: auto; }
.rl-bar__row { display: flex; align-items: center; gap: 1rem; height: 66px; }
.rl-bar__logo { margin-right: auto; }
.rl-bar__logo img { width: auto; height: 40px; display: block; }
.rl-nav { display: flex; gap: 0.15rem; }
.rl-nav a { color: var(--rl-mut); text-decoration: none; font-weight: 600; font-size: 0.96rem; padding: 0.45rem 0.8rem; border-bottom: 2px solid transparent; }
.rl-nav a:hover { color: #fff; }
.rl-nav a.active { color: #fff; border-bottom-color: var(--rl-lime); }
.rl-bar__actions { display: flex; gap: 0.45rem; padding-left: 0.8rem; border-left: 1px solid var(--rl-line); }
.rl-bar__actions .btn { padding: 0.42rem 0.95rem; font-size: 0.92rem; }
.rl-site .nav-toggle { display: none; background: var(--rl-s1); border: 1px solid var(--rl-line-2); border-radius: 10px; width: 44px; height: 40px; padding: 0 11px; flex-direction: column; justify-content: center; gap: 5px; }
.rl-site .nav-toggle span { display: block; height: 2px; background: var(--rl-vio-l); border-radius: 2px; }
.rl-site .nav-mobile { display: none; }

/* Hero: text block on the left, facts card on the right */
.rl-site .rl-hero { background: linear-gradient(160deg, #2a1d44 0%, var(--rl-bg) 70%); padding: 2.8rem 0 2.4rem; text-align: left; border-bottom: 1px solid var(--rl-line); }
.rl-hero .rl-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.4rem; align-items: center; }
.rl-hero .rl-in:not(:has(.rl-hero__facts)) { grid-template-columns: minmax(0, 1fr); }
.rl-hero__box { max-width: 820px; }
.rl-site .rl-hero .rl-kicker { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--rl-lime); font-family: var(--font-display); font-weight: 800; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.7rem; }
.rl-site .rl-hero .rl-kicker::before { content: ''; width: 22px; height: 3px; background: var(--rl-lime); border-radius: 2px; }
.rl-site .rl-hero h1 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.15; margin: 0 0 0.9rem; font-weight: 800; }
.rl-site .rl-hero .rl-hero__lead { color: var(--rl-mut); font-size: 1.05rem; margin: 0 0 1.4rem; }
.rl-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rl-hero__facts { margin: 0; min-width: 270px; background: var(--rl-s1); border: 1px solid var(--rl-line-2); border-radius: 16px; padding: 0.5rem 1.2rem; }
.rl-hero__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--rl-line-2); }
.rl-hero__facts div:last-child { border-bottom: 0; }
.rl-hero__facts dt { font-family: var(--font-display); color: var(--rl-vio-l); font-weight: 800; font-size: 1.3rem; white-space: nowrap; order: 2; }
.rl-hero__facts dd { margin: 0; color: var(--rl-mut); font-size: 0.9rem; }

/* Index on the left, flat sections on the right */
.rl-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.6rem; padding-top: 2rem; padding-bottom: 1.6rem; align-items: start; }
.rl-toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; border-left: 2px solid var(--rl-line); padding-left: 0.9rem; }
.rl-site .rl-toc .rl-toc__t { font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rl-faint); margin: 0 0 0.5rem; }
.rl-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
.rl-site .rl-toc a { display: block; color: var(--rl-mut); text-decoration: none; font-size: 0.9rem; padding: 0.22rem 0; line-height: 1.35; }
.rl-site .rl-toc a:hover { color: var(--rl-lime); }
.rl-flow { min-width: 0; }
.rl-sec { padding: 0 0 1.9rem; margin: 0 0 1.9rem; border-bottom: 1px solid var(--rl-line); }
.rl-flow > .rl-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.rl-sec__head { margin: 0 0 1rem; padding: 0; }
.rl-site .rl-sec__head .rl-tag { display: inline-block; margin: 0 0 0.5rem; color: var(--rl-dark); background: var(--rl-vio); font-family: var(--font-display); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 6px; padding: 0.12rem 0.6rem; }
.rl-sec h2 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.22; margin: 0; font-weight: 800; }
.rl-split { display: grid; gap: 2rem; align-items: start; }
.rl-split--right { grid-template-columns: minmax(0, 1fr) 330px; }
.rl-split--right .rl-fig { order: 2; }
.rl-split--left { grid-template-columns: 330px minmax(0, 1fr); }
.rl-fig { margin: 0; position: sticky; top: 88px; background: radial-gradient(circle at 50% 40%, rgba(177, 140, 255, 0.22), transparent 68%); border-radius: 16px; }
.rl-fig img { width: 100%; height: auto; display: block; }
.rl-text { display: flow-root; min-width: 0; }
.rl-site .rl-text p { color: var(--rl-mut); margin: 0 0 1rem; }
.rl-site .rl-box { background: rgba(255, 154, 74, 0.09); border: 1px solid rgba(255, 154, 74, 0.45); border-radius: 10px; padding: 0.75rem 1rem; color: var(--rl-ink); }

/* Tables */
.rl-tbl { margin: 1rem 0 1.2rem; }
.rl-tbl__scroll { overflow-x: auto; border: 1px solid var(--rl-line-2); border-radius: 12px; background: var(--rl-s1); }
.rl-tbl table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.rl-tbl caption { caption-side: top; text-align: left; padding: 0.65rem 1rem; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff; border-bottom: 1px solid var(--rl-line-2); }
.rl-tbl th { text-align: left; color: var(--rl-vio-l); background: var(--rl-s2); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem 1rem; }
.rl-tbl td { padding: 0.55rem 1rem; border-top: 1px solid var(--rl-line); color: var(--rl-ink); vertical-align: top; }
.rl-site .rl-tbl .rl-tbl__note { margin: 0.45rem 0 0; font-size: 0.84rem; color: var(--rl-faint); }

/* Lists, steps, tiles */
.rl-site .rl-list, .rl-site .rl-steps { margin-left: 0; padding-left: 0; }
.rl-list { list-style: none; margin: 0 0 1rem; display: grid; gap: 0.45rem; }
.rl-list li { position: relative; padding: 0.1rem 0 0.1rem 1.5rem; color: var(--rl-mut); }
.rl-list li::before { content: ''; position: absolute; left: 0.15rem; top: 0.68rem; width: 10px; height: 3px; border-radius: 2px; background: var(--rl-lime); }
.rl-steps { counter-reset: s; list-style: none; margin: 0.3rem 0 1.2rem; display: grid; gap: 0.5rem; }
.rl-steps li { counter-increment: s; position: relative; padding: 0.6rem 0.9rem 0.6rem 3.1rem; color: var(--rl-ink); background: var(--rl-s1); border-radius: 10px; }
.rl-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0.8rem; top: 0.6rem; font-family: var(--font-display); font-weight: 800; color: var(--rl-vio); }
.rl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; margin: 0.3rem 0 1.1rem; }
.rl-tile { background: var(--rl-s1); border: 1px solid var(--rl-line); border-radius: 12px; padding: 0.75rem 0.95rem; }
.rl-tile b { display: block; font-family: var(--font-display); font-size: 1.04rem; color: var(--rl-vio-l); }
.rl-tile span { color: var(--rl-mut); font-size: 0.87rem; }

/* FAQ */
.rl-qa__list { border-top: 1px solid var(--rl-line); }
.rl-qa { border-bottom: 1px solid var(--rl-line); }
.rl-qa summary { cursor: pointer; padding: 0.85rem 2.6rem 0.85rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; color: var(--rl-ink); list-style: none; position: relative; }
.rl-qa summary::-webkit-details-marker { display: none; }
.rl-qa summary::after { content: '+'; position: absolute; right: 0.4rem; top: 0.6rem; font-size: 1.5rem; line-height: 1; color: var(--rl-lime); }
.rl-qa[open] summary::after { content: '\2212'; }
.rl-qa__a { padding: 0 0 0.95rem; }
.rl-site .rl-qa__a p { color: var(--rl-mut); margin: 0; }

/* Cards and strip */
.rl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.rl-site .rl-card { display: flex; flex-direction: column; gap: 0.3rem; background: var(--rl-s1); border: 1px solid var(--rl-line-2); border-radius: 14px; padding: 1rem 1.1rem; text-decoration: none; }
.rl-site .rl-card b { font-family: var(--font-display); color: #fff; font-size: 1.15rem; }
.rl-site .rl-card span { color: var(--rl-mut); font-size: 0.9rem; }
.rl-site .rl-card:hover { border-color: var(--rl-lime); }
.rl-strip { padding: 0.6rem 0 2.8rem; }
.rl-strip__box { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: linear-gradient(100deg, #3a2466, #24183c); border: 1px solid var(--rl-vio-d); border-radius: 16px; padding: 1.3rem 1.7rem; }
.rl-site .rl-strip .rl-strip__t { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.4rem; margin: 0; }
.rl-site .rl-strip .rl-strip__d { color: var(--rl-mut); margin: 0.15rem 0 0; }
.rl-404 { padding: 4rem 0; }
.rl-site .rl-404 p { color: var(--rl-mut); }

/* Footer */
.rl-site .site-footer.rl-foot { background: var(--rl-bg-2); border-top: 1px solid var(--rl-line); padding: 2.4rem 0 6rem; color: var(--rl-mut); margin-top: 0; }
.rl-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.rl-foot__brand img { width: auto; height: 38px; }
.rl-site .rl-foot__brand p { font-size: 0.9rem; margin: 0.7rem 0; color: var(--rl-mut); }
.rl-site .rl-foot h5 { font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rl-vio-l); margin: 0 0 0.6rem; }
.rl-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.rl-site .rl-foot ul a { color: var(--rl-mut); text-decoration: none; font-size: 0.92rem; }
.rl-site .rl-foot ul a:hover { color: var(--rl-lime); }
.rl-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rl-site .rl-badges span, .rl-site .rl-badges a { font-size: 0.78rem; font-weight: 600; border: 1px solid var(--rl-line-2); border-radius: 6px; padding: 0.15rem 0.6rem; color: var(--rl-ink); text-decoration: none; }
.rl-site .rl-badges .rl-b-age { border-color: var(--rl-or); color: var(--rl-or); }
.rl-foot__pay { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.8rem 0 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rl-line); }
.rl-foot__pay span { background: var(--rl-s1); border-radius: 6px; padding: 0.2rem 0.7rem; font-size: 0.82rem; color: var(--rl-ink); }
.rl-foot__bottom { font-size: 0.84rem; color: var(--rl-faint); display: flex; justify-content: space-between; gap: 1.5rem; }
.rl-foot__bottom p { margin: 0; }
.rl-foot__bottom p:last-child { white-space: nowrap; }

/* Sticky CTA */
.rl-site .sticky-cta { background: rgba(17, 12, 24, 0.97); border-top: 2px solid var(--rl-vio-d); }
.rl-site .sticky-cta__text span { color: #fff; font-family: var(--font-display); font-weight: 800; }
.rl-site .sticky-cta__bonus { color: var(--rl-vio-l) !important; text-transform: none; }

@media (max-width: 1120px) {
  .rl-bar__actions .btn--line { display: none; }
  .rl-grid { grid-template-columns: 180px minmax(0, 1fr); gap: 1.8rem; }
  .rl-split--right { grid-template-columns: minmax(0, 1fr) 280px; }
  .rl-split--left { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .rl-nav, .rl-bar__actions { display: none; }
  .rl-site .nav-toggle { display: flex; }
  .rl-bar__row { height: 58px; }
  .rl-bar__logo img { height: 34px; }
  .rl-site .nav-mobile { display: flex; position: fixed; top: 60px; left: 0; bottom: 0; width: min(84vw, 330px); background: var(--rl-bg-2); border-right: 2px solid var(--rl-vio-d); padding: 0.8rem 1.2rem 1.4rem; z-index: 119; flex-direction: column; gap: 0.1rem; box-shadow: 18px 0 30px rgba(0, 0, 0, 0.5); overflow-y: auto; transform: translateX(-105%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s; }
  .rl-site .nav-mobile.open { transform: translateX(0); visibility: visible; }
  .rl-site .nav-mobile > a { color: var(--rl-ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; padding: 0.7rem 0.3rem; border-bottom: 1px solid var(--rl-line); }
  .rl-site .nav-mobile > a.active { color: var(--rl-lime); }
  .rl-site .nav-mobile .mobile-actions { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 1rem; }
  .rl-hero .rl-in { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .rl-hero__facts { min-width: 0; }
  .rl-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-top: 1.4rem; }
  .rl-toc { position: static; max-height: none; border-left: 0; padding: 0.8rem 1rem; background: var(--rl-s1); border-radius: 12px; }
  .rl-toc ol { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .rl-split, .rl-split--left, .rl-split--right { grid-template-columns: 1fr; gap: 1rem; }
  .rl-split .rl-fig, .rl-split--left .rl-fig, .rl-split--right .rl-fig { order: 2; position: static; max-width: 320px; width: 100%; margin: 0 auto 0.6rem; }
  .rl-cards { grid-template-columns: 1fr; }
  .rl-foot__grid { grid-template-columns: 1fr 1fr; }
  .rl-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .rl-in { padding: 0 1rem; }
  .rl-hero { padding: 1.8rem 0 1.6rem; }
  .rl-strip__box { flex-direction: column; align-items: flex-start; padding: 1.2rem; }
  .rl-foot__bottom { flex-direction: column; gap: 0.5rem; }
  .rl-tbl th, .rl-tbl td { padding: 0.5rem 0.7rem; }
}