:root{color-scheme:dark;--ink:#f8f6ff;--muted:#c5bde4;--paper:#141025;--line:#3a3056;--indigo:#c4aaff;--lavender:#211938}
body{background:radial-gradient(ellipse at 70% -10%,#4e2c8d,transparent 50%),#100c20}
.app-shell{width:min(1440px,100%);min-height:100vh;margin:auto;display:grid;grid-template-columns:196px minmax(0,1fr);background:#110d23}
.sidebar{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;padding:23px 14px;background:#1b1432;border-right:1px solid var(--line)}
.sidebar .brand{padding:0 10px 15px}
.brand span{color:#d7c4ff}
.nav-label{margin:13px 10px 7px;color:#a99bc9;font-size:13px}
.sidebar nav,.mobile-nav nav{display:grid;gap:5px}
.sidebar nav a,.mobile-nav nav a{padding:9px 10px;background:#251c42;border:1px solid transparent;border-radius:8px}
nav a[aria-current=page]{background:#47337b;color:white;text-decoration:none}
.sidebar nav a:hover,.mobile-nav nav a:hover{background:#413167}
.side-note{margin:auto 10px 0;color:var(--muted);font-size:13px}
.main-shell{min-width:0}
.show-top{min-height:64px;padding:0 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:#1b1432}
.show-label{font-size:14px;color:var(--muted);font-weight:750}
.top-cta{margin-left:auto;padding:6px 12px;border-radius:8px;background:#bdf574;color:#181b15;font-size:14px;font-weight:800;white-space:nowrap}
.mobile-brand,.mobile-nav{display:none}
.wrap{width:calc(100% - 48px)}
.show-hero{margin-top:22px;padding:clamp(23px,4vw,54px);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:20px;background:radial-gradient(ellipse at 98% 12%,#a96cf7,transparent 63%),linear-gradient(125deg,#4725b0,#613bd7 66%,#854ade)}
.show-hero .label,.show-hero .lead{color:#f6edff}
.show-hero h1{font-size:clamp(39px,4.5vw,68px)}
.show-hero .lead{font-size:17px;margin:14px 0 20px}
.hero-screen{display:block;background:#140f27;padding:8px;border:1px solid #d6baff70;border-radius:14px;box-shadow:0 18px 32px #18063980;transform:rotate(-2deg)}
.hero-screen img{width:100%;height:auto;display:block;border-radius:8px}
.hero-screen span{display:block;padding:6px 4px 0;font-size:13px;color:#eee1ff}
.button{background:#bdf574;color:#182314;border-color:#bdf574;border-radius:8px}
.button:hover{background:#d2ff9e}
.button.secondary{background:#231745;color:#f1e5ff;border-color:#ab8ce2}
.button.secondary:hover{background:#392662}
.shelf{padding-top:25px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.shelf h2{font-size:clamp(23px,2.5vw,34px)}
.shelf-head span,.shelf-head a{color:var(--muted);font-size:14px}
.duo{gap:13px}
.show-card{position:relative;display:block;border-radius:17px;overflow:hidden;border:1px solid #ffffff26;background:#312168}
.show-card:hover{border-color:#dcc3ff}
.card-media{height:clamp(125px,14vw,205px);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block}
.card-copy{padding:13px 17px;position:relative}
.card-copy small{font-weight:750;color:#eee1ff;font-size:11px;letter-spacing:.08em}
.card-copy h3{font-size:clamp(22px,2.5vw,32px);margin:3px 0 5px}
.card-copy p{margin:0;color:#eee3ff;font-size:14px}
.sport-card{background:linear-gradient(115deg,#392690,#49277d)}
.live-card{background:linear-gradient(115deg,#552044,#7d2c64)}
.card-arrow{position:absolute;right:14px;top:15px;color:#efe0ff}
.compact{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
.compact img{width:100%;height:124px;object-fit:cover;object-position:top}
.up-card{background:linear-gradient(115deg,#173a68,#242954)}
.prediction-card{background:linear-gradient(115deg,#6a294b,#482058)}
.show-end{margin-top:25px;margin-bottom:28px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#211735;border-radius:14px}
.show-end p{margin:7px 0 0;color:var(--muted)}
.tile,.plan,.fee-table,form{background:#211735}
.plan.featured,.fee-table thead,.casino-tile{background:#30214b}
.band p{color:var(--muted)}
.inner-hero{padding-block:45px 35px}
.footer{color:var(--muted)}
@media(max-width:850px){
.app-shell{display:block}.sidebar,.show-label{display:none}.show-top{padding:0 14px;position:relative;z-index:2}.mobile-brand,.mobile-nav{display:block}.mobile-nav summary{font-size:14px;cursor:pointer}.mobile-nav nav{position:absolute;top:59px;left:14px;right:14px;background:#201737;padding:10px;border:1px solid var(--line);border-radius:10px}.wrap{width:calc(100% - 28px)}
}
@media(max-width:650px){
.show-hero{grid-template-columns:1fr;margin-top:14px;gap:14px}.hero-screen{transform:none}.hero-screen img{max-height:240px;object-fit:contain}.show-hero h1{font-size:clamp(34px,9vw,53px)}.duo{grid-template-columns:1fr}.card-media{height:160px}.show-end{align-items:flex-start;flex-direction:column}
}

/* Showroom artwork frames. The product captures remain unchanged. */
.show-hero {
  position:relative;
  isolation:isolate;
  min-height:clamp(340px,34vw,450px);
  padding:clamp(22px,3.5vw,46px);
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  border:1px solid #c5a1ff80;
  background:
    radial-gradient(ellipse at 85% 30%,#c487ff 0,transparent 42%),
    radial-gradient(ellipse at 44% 110%,#5832eb 0,transparent 58%),
    linear-gradient(118deg,#381796 8%,#6539e4 56%,#962ee0);
  box-shadow:inset 0 1px 0 #f4dfff50,0 13px 44px #39157c55;
}
.hero-orbit { position:absolute; inset:0 0 0 34%; z-index:-1; pointer-events:none; }
.hero-orbit svg { width:100%; height:100%; display:block; }
.show-hero .label {
  display:inline-flex;
  padding:5px 10px;
  border:1px solid #ffffff75;
  border-radius:999px;
  background:#24105760;
}
.hero-screen { width:min(100%,505px); justify-self:center; background:#160e2f; }
.hero-screen img { max-height:clamp(230px,24vw,310px); object-fit:contain; background:#0c0c0c; }
.hero-screen .screen-chrome { display:flex; align-items:center; gap:7px; padding:4px 4px 7px; font:700 11px/1.2 ui-monospace,monospace; letter-spacing:.1em; }
.screen-chrome i { width:7px; height:7px; border-radius:50%; background:#bdf574; box-shadow:0 0 10px #bdf57490; }
.shelf-head h2 { display:flex; align-items:center; gap:9px; }
.shelf-head h2::before { content:""; width:4px; height:.8em; border-radius:4px; background:#bb8eff; box-shadow:0 0 12px #ae73ff99; }
.show-card { --glow:#7860ff; border-color:color-mix(in srgb,var(--glow) 54%,#332046); box-shadow:0 8px 23px #06041066; }
.live-card { --glow:#fa62b6; }
.up-card { --glow:#54c9ff; }
.prediction-card { --glow:#f975ac; }
.card-media { position:relative; height:clamp(138px,15vw,215px); padding:16px 16px 0; background:radial-gradient(ellipse at 70% 25%,var(--glow),transparent 72%); }
.card-media img { border:1px solid #ffffff42; border-radius:11px 11px 0 0; box-shadow:0 0 20px #0007; }
.media-tag { position:absolute; z-index:1; top:9px; right:10px; padding:4px 8px; color:white; background:#100922e8; border:1px solid #ffffff60; border-radius:999px; font-size:11px; font-weight:750; }
.card-copy { border-top:1px solid #ffffff22; background:linear-gradient(105deg,#190e3545,transparent 95%); }
.card-arrow { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#ffffff22; }
.compact img { border-left:1px solid #ffffff29; }
@media(max-width:650px){
  .show-hero { min-height:0; grid-template-columns:1fr; }
  .hero-orbit { inset:30% -14% 0 0; }
  .hero-screen img { max-height:215px; }
  .card-media { height:148px; }
}

.buyer-guide { margin-top:22px; }
.buyer-guide h2 { font-size:clamp(25px,3vw,38px); line-height:1.25; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.guide-grid article { border-top:2px solid #8b60db; padding:16px 0 0; }
.guide-grid h3 { font-size:clamp(20px,2vw,25px); line-height:1.3; margin-bottom:9px; }
.guide-grid p,.guide-next { color:var(--muted); }
.buyer-guide a { color:#d7bcff; text-decoration:underline; text-underline-offset:4px; }
.guide-next { margin-top:18px; }
@media(max-width:650px){ .guide-grid { grid-template-columns:1fr; gap:13px; } }

.market-support > p { color:var(--muted); max-width:72ch; }
.market-table { table-layout:fixed; }
.market-table th:first-child { width:28%; }
.market-table td,.market-table th { vertical-align:middle; overflow-wrap:normal; word-break:keep-all; }
.market-table .pending { display:inline-block; padding:2px 7px; border:1px solid #977552; border-radius:6px; background:#392844; color:#ffdaa3; font-size:13px; line-height:1.5; }
.market-help { margin:12px 0 0; font-size:14px; }
@media(max-width:420px){ .market-table th,.market-table td { padding:7px 4px; }.market-table .pending { padding-inline:4px; } }

/* Share row heights across plans so corresponding dividers line up. */
@media (min-width:851px) {
  .plans { grid-template-rows:repeat(7,auto); row-gap:0; }
  .plan { display:grid; grid-template-rows:subgrid; grid-row:span 7; align-items:start; }
  .plan dl { display:grid; grid-template-rows:subgrid; grid-row:span 3; align-self:stretch; margin:0 0 18px; }
  .plan dl div { align-content:start; }
  .plan > .button { justify-self:start; align-self:end; }
}

/* Align the media frames and give tall and wide captures room to breathe. */
.show-hero {
  min-height:0;
  background:linear-gradient(120deg,#35207e,#4b2caa 58%,#653abb);
  box-shadow:none;
  border-color:#7959be;
}
.hero-screen { transform:none; box-shadow:none; border-color:#a584db; }
.hero-screen img { max-height:285px; }
.show-card { box-shadow:none; }
.card-media {
  height:clamp(145px,19vw,230px);
  padding:12px;
  background:#171128;
}
.card-media img {
  object-fit:contain;
  object-position:center;
  border:1px solid #ffffff24;
  border-radius:8px;
  box-shadow:none;
  background:#0c0c10;
}
.card-copy { background:none; }
.compact { min-height:142px; padding:10px; gap:10px; }
.compact .card-copy { border:0; padding:5px 8px; }
.compact img {
  height:120px;
  object-fit:contain;
  object-position:center;
  border:1px solid #ffffff24;
  border-radius:8px;
  background:#0c0c10;
}
@media(max-width:650px) {
  .hero-screen img { max-height:215px; }
  .card-media { height:175px; }
  .compact img { height:112px; }
}

.sidebar nav a.nav-sub,.mobile-nav nav a.nav-sub {
  margin-inline-start:12px;
  padding-block:7px;
  background:transparent;
  color:#d4c5f7;
  font-size:14px;
}
.sidebar nav a.nav-sub::before,.mobile-nav nav a.nav-sub::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-inline-end:8px;
  vertical-align:2px;
  border-inline-start:1px solid #a987df;
  border-block-end:1px solid #a987df;
}
.sidebar nav a.nav-sub:hover,.mobile-nav nav a.nav-sub:hover,
nav a.nav-sub[aria-current=page],nav a.nav-sub[data-section-active] { background:#36265e; color:#fff; }
#provider-field[hidden] { display:none; }
.showroom-explore { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:13px; }
.showroom-explore a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:13px 17px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#201632;
}
.showroom-explore a:hover { border-color:#aa84e5; }
.showroom-explore strong,.showroom-explore small { display:block; }
.showroom-explore small { color:var(--muted); font-size:14px; }
.showroom-explore a > span:last-child { color:#d6b8ff; }
@media(max-width:650px) { .showroom-explore { grid-template-columns:1fr; } }
@media(max-width:850px) { .mobile-nav nav { max-height:calc(100dvh - 75px); overflow-y:auto; } }

.sidebar { overflow-y:auto; }
.sidebar nav a.nav-sub[aria-current=page],.mobile-nav nav a.nav-sub[aria-current=page],
.sidebar nav a.nav-sub[data-section-active],.mobile-nav nav a.nav-sub[data-section-active] {
  background:#36265e;
  color:#fff;
}
.provider-hero .lead { max-width:66ch; }
.provider-catalog .shelf-head { flex-wrap:wrap; row-gap:5px; }
.provider-catalog .shelf-head span { word-break:keep-all; }
.provider-grid { align-items:stretch; }
.provider-filters {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 18px;
  margin-bottom:16px;
}
.provider-filter-options { display:flex; flex-wrap:wrap; gap:6px; }
.provider-filter-options button {
  min-height:44px;
  padding:8px clamp(12px,2vw,18px);
  border:1px solid #614984;
  border-radius:9px;
  background:#241a39;
  color:inherit;
  font:inherit;
  font-weight:750;
  cursor:pointer;
}
.provider-filter-options button:hover { border-color:#bc9bef; }
.provider-filter-options button[aria-pressed="true"] {
  border-color:#c7f78a;
  background:#c7f78a;
  color:#19280f;
}
.provider-filter-options button:focus-visible { outline:2px solid #e0c9ff; outline-offset:3px; }
.provider-filter-count { margin:0; color:var(--muted); font-size:14px; }
.provider-search { flex:0 0 100%; min-width:0; margin-bottom:2px; }
.provider-search label { display:block; margin-bottom:7px; color:#e8dcfb; font-size:14px; font-weight:700; }
.provider-search-field { position:relative; }
.provider-search-field svg {
  position:absolute;
  top:50%;
  left:13px;
  width:20px;
  height:20px;
  transform:translateY(-50%);
  color:#d8bdf9;
  pointer-events:none;
}
.provider-search-field input[type=search] {
  min-height:48px;
  padding:9px 75px 9px 43px;
  border:1px solid #735997;
  border-radius:9px;
  background:#201632;
  color:#fbf8ff;
}
.provider-search-field input::placeholder { color:#bdaed2; }
.provider-search-field input::-webkit-search-cancel-button { display:none; }
.provider-search-clear {
  position:absolute;
  inset:2px 3px 2px auto;
  padding:0 12px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#e0c9ff;
  font:inherit;
  font-size:14px;
  cursor:pointer;
}
.provider-search-clear:hover { background:#362655; }
.provider-search-field :focus-visible { outline:2px solid #e0c9ff; outline-offset:2px; }
.provider-search-empty {
  margin:0;
  padding:18px;
  border:1px solid #594077;
  border-radius:12px;
  background:#201632;
  color:var(--muted);
  word-break:keep-all;
}
.provider-filters[hidden],.provider-grid .provider-card[hidden] { display:none; }
.provider-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  border:1px solid #594077;
  border-radius:14px;
  padding:clamp(17px,3vw,30px);
  background:linear-gradient(130deg,#24193d,#1b142f 72%);
}
.provider-card h3,.provider-card p { margin:0; }
.provider-card p,.provider-meta { color:var(--muted); }
.provider-card .button { margin-top:auto; }
.provider-kicker,.provider-type { color:#d8bdff; }
.provider-status { color:#ffdaa3; }
.provider-sources { color:var(--muted); }
.provider-sources a { color:#d8bdff; text-decoration:underline; text-underline-offset:4px; }
.provider-evolution.provider-card { border-color:#7952a2; }
.provider-pragmatic-play.provider-card { border-color:#914470; background:linear-gradient(130deg,#382039,#21152d 72%); }
.provider-meta { width:100%; display:grid; gap:4px; margin:3px 0 7px; }
.provider-meta dt { font-size:13px; color:#ded0f4; font-weight:700; }
.provider-meta dd { margin:0 0 7px; }
.provider-game-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,226px),1fr));
  gap:16px;
}
.provider-games .shelf-head { margin:8px 0 18px; }
.provider-game { min-width:0; }
.game-preview-link {
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border:1px solid #604a83;
  border-radius:15px;
  background:#211735;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.game-preview-art {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#120d21;
}
.game-preview-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .28s ease;
}
.game-preview-icon {
  position:absolute;
  right:12px;
  bottom:12px;
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid #decaff;
  border-radius:9px;
  background:#1b1228eb;
  color:#fff;
  font-size:22px;
  line-height:1;
}
.game-preview-copy {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:9px;
  padding:clamp(14px,2.1vw,23px);
}
.game-preview-copy h3,.game-preview-copy p { margin:0; }
.game-preview-description { color:var(--muted); font-size:15px; }
.game-preview-action {
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-top:auto;
  padding-top:8px;
  color:#e5d4ff;
  font-size:14px;
  font-weight:750;
}
.game-preview-link:focus-visible {
  outline:2px solid #e0c9ff;
  outline-offset:3px;
}
@media (hover:hover) and (pointer:fine) {
  .game-preview-link:hover {
    border-color:#cf9eff;
    box-shadow:0 8px 20px #0005;
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .game-preview-link:hover { transform:translateY(-3px); }
  .game-preview-link:hover img { transform:scale(1.045); }
}
@media (prefers-reduced-motion:reduce) {
  .game-preview-link,.game-preview-art img { transition:none; }
}
.provider-sources ul { margin-bottom:0; }

.page-faq {
  display:grid;
  grid-template-columns:minmax(210px,1fr) minmax(0,2fr);
  gap:clamp(20px,4vw,58px);
  align-items:start;
}
.page-faq-intro h2 { margin:6px 0 12px; }
.page-faq-intro > p:last-child { color:var(--muted); margin:0; }
.page-faq-list { display:grid; gap:8px; }
.page-faq-intro,.page-faq-list { word-break:keep-all; overflow-wrap:anywhere; }
.page-faq-list details {
  padding:0;
  border:1px solid #4a375f;
  border-radius:10px;
  background:#201731;
}
.page-faq-list details[open] { border-color:#8864ba; background:#271a3c; }
.page-faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 15px;
  min-height:48px;
  list-style:none;
  cursor:pointer;
}
.page-faq-list summary::-webkit-details-marker { display:none; }
.faq-toggle {
  flex:0 0 20px;
  text-align:center;
  color:#d8b6ff;
  font-size:19px;
  line-height:1;
}
.faq-toggle::after { content:"+"; }
.page-faq-list details[open] .faq-toggle::after { content:"−"; }
.page-faq-list summary:focus-visible {
  outline:2px solid #e0c9ff;
  outline-offset:-3px;
  border-radius:9px;
}
.page-faq-list details p { padding:0 15px 14px; margin:0; color:#e1d7ef; }
.page-faq-list a { color:#dfc5ff; text-decoration:underline; text-underline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
  .page-faq-list details:hover { border-color:#8864ba; }
}
@media (max-width:700px) {
  .page-faq { grid-template-columns:minmax(0,1fr); }
}