/* BetSuper gateway shell (.ga-*). White, black and magenta: a brand doorway rather than a game floor.
   Big type, a region picker, wide white space. Hand-written, static. */
:root{
  --ink:#0b0d12;--ink2:#1d2230;--mut:#656f82;--line:#e8ebf1;--soft:#f6f7fa;--wht:#fff;
  --mag:#e6007e;--mag2:#ff4fa3;--mag3:#ffe3f1;--gold:#c9a227;
  --mg:linear-gradient(135deg,#e6007e 0%,#ff4fa3 55%,#ff8ac4 100%);
  --r:16px
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wht);color:var(--ink);font:16px/1.65 "Helvetica Neue",Arial,sans-serif}
a{color:var(--mag)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.12;margin:0 0 12px;letter-spacing:-.025em}
.ga-shell{max-width:1180px;margin:0 auto;padding:0 20px}
.ga-block{padding:56px 0}
.ga-block.alt{background:var(--soft)}

/* header */
.ga-bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.ga-bar .in{max-width:1180px;margin:0 auto;padding:0 20px;height:72px;display:flex;align-items:center;gap:14px}
.ga-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.ga-brand svg{width:34px;height:34px}
.ga-brand b{font:italic 900 26px/34px "Arial Black",Arial;letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.ga-brand b i{font-style:italic;color:var(--mag)}
.ga-menu{margin-left:auto;display:flex;align-items:center;gap:4px}
.ga-menu>a{font:700 14px/1 Arial;color:var(--ink2);text-decoration:none;padding:13px 12px;border-radius:9px;white-space:nowrap}
.ga-menu>a:hover,.ga-menu>a.on{color:var(--mag);background:var(--mag3)}
.ga-lang{display:flex;gap:2px;margin:0 4px}
.ga-lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 9px;border-radius:8px;font:700 12px/1 Arial;
  color:var(--mut);text-decoration:none;white-space:nowrap}
.ga-lang a.on{background:var(--ink);color:#fff}
.ga-act{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;
  font:800 15px/1 Arial;letter-spacing:.04em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  text-transform:uppercase}
.ga-act.m{background:var(--mg);color:#fff;box-shadow:0 8px 22px rgba(230,0,126,.3)}
.ga-act.d{background:var(--ink);color:#fff}
.ga-act.o{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.ga-act.lg{min-height:58px;padding:0 34px;font-size:17px}
.ga-toggle{width:44px;height:44px;display:none;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.ga-toggle span,.ga-toggle span:before,.ga-toggle span:after{display:block;width:26px;height:3px;border-radius:3px;
  background:var(--ink);position:relative;content:""}
.ga-toggle span:before{position:absolute;top:-8px}.ga-toggle span:after{position:absolute;top:8px}
.ga-drawer{position:fixed;inset:0;z-index:80;background:rgba(11,13,18,.55);display:none}
html.ga-menuopen .ga-drawer{display:block}
.ga-drawer div{position:absolute;right:0;top:0;bottom:0;width:min(320px,88vw);background:#fff;padding:20px;overflow:auto}
.ga-drawer a{display:block;padding:14px 8px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;
  font-weight:700}

/* hero: light, because the brand art is shot on white and a dark scrim just greys it out */
.ga-stage{position:relative;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.ga-stage>img{position:absolute;right:0;top:0;width:56%;height:100%;object-fit:cover;object-position:52% 50%}
.ga-stage:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,#fff 42%,rgba(255,255,255,.85) 54%,rgba(255,255,255,0) 76%)}
.ga-stage .in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:84px 20px 88px;color:var(--ink)}
.ga-stage .eb{display:inline-flex;align-items:center;gap:9px;background:var(--mg);color:#fff;border-radius:999px;
  padding:9px 18px;font:800 12px/1 Arial;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px}
.ga-stage h1{font:900 clamp(34px,5.6vw,66px)/1.02 "Helvetica Neue",Arial;margin:0 0 16px;max-width:17ch}
.ga-stage h1{max-width:15ch}
.ga-stage p{margin:0 0 24px;max-width:46ch;font-size:clamp(15px,1.5vw,19px);color:var(--mut)}
.ga-stage .go{display:flex;gap:12px;flex-wrap:wrap}
.ga-metrics{display:flex;flex-wrap:wrap;gap:28px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.ga-metrics div b{display:block;font:900 clamp(22px,2.6vw,32px)/1.1 "Helvetica Neue",Arial;color:var(--ink)}
.ga-metrics div span{font:700 11.5px/1.3 Arial;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

/* section heads */
.ga-heading{max-width:720px;margin:0 0 34px}
.ga-heading.mid{margin:0 auto 38px;text-align:center}
.ga-heading span{display:block;font:800 12px/1 Arial;letter-spacing:.16em;text-transform:uppercase;color:var(--mag);
  margin-bottom:12px}
.ga-heading h2{font:900 clamp(26px,3.3vw,40px)/1.1 "Helvetica Neue",Arial;margin:0 0 10px}
.ga-heading p{margin:0;color:var(--mut);font-size:16.5px}

/* region picker */
.ga-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ga-picker a{position:relative;display:block;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;
  border:1px solid var(--line)}
.ga-picker img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto}
.ga-picker .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,9,13,.9) 0%,rgba(8,9,13,.25) 55%,
  rgba(8,9,13,.05) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.ga-picker b{font:900 clamp(22px,2.4vw,30px)/1.1 "Helvetica Neue",Arial;display:block}
.ga-picker small{display:block;color:#dfe3ea;font:600 14px/1.5 Arial;margin:6px 0 14px;max-width:34ch}
.ga-picker em{font-style:normal;align-self:flex-start;background:#fff;color:var(--ink);border-radius:999px;
  padding:12px 22px;font:800 13px/1 Arial;letter-spacing:.06em;text-transform:uppercase}

/* cards */
.ga-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ga-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;
  flex-direction:column;gap:10px}
.ga-tile i{width:48px;height:48px;border-radius:14px;background:var(--mag3);display:grid;place-items:center}
.ga-tile svg{width:24px;height:24px;stroke:var(--mag);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ga-tile b{font:800 18px/1.25 "Helvetica Neue",Arial}
.ga-tile p{margin:0;color:var(--mut);font-size:14.5px;flex:1}
/* the card's own link is the tap target for the whole card, so it gets a thumb-sized box */
.ga-tile a{font:800 13px/1 Arial;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  color:var(--mag);display:inline-flex;align-items:center;min-height:44px;margin:-10px 0 -10px}

/* split blocks */
.ga-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;align-items:center}
.ga-duo img{border-radius:22px;width:100%;aspect-ratio:4/3;object-fit:cover;height:auto}
.ga-duo.flip .tx{order:2}
.ga-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.ga-points li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;color:var(--ink2);font-size:15.5px}
.ga-points li:before{content:"";width:22px;height:22px;border-radius:50%;background:var(--mag3);
  box-shadow:inset 0 0 0 2px var(--mag);margin-top:3px}

/* steps */
.ga-path{counter-reset:g;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;
  list-style:none}
.ga-path li{counter-increment:g;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.ga-path li:before{content:counter(g);display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--ink);color:#fff;font:900 19px/1 Arial;margin-bottom:14px}
.ga-path b{display:block;font:800 17px/1.3 "Helvetica Neue",Arial;margin-bottom:6px}
.ga-path span{color:var(--mut);font-size:14.5px}

/* band */
.ga-callout{background:var(--ink);color:#fff;border-radius:24px;padding:42px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.ga-callout h2{font:900 clamp(24px,3vw,34px)/1.12 "Helvetica Neue",Arial;margin:0 0 8px;max-width:22ch}
.ga-callout p{margin:0;color:#c4cbd6;max-width:54ch}

/* tables, faq, article */
.ga-scrollx{overflow-x:auto}
.ga-grid{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.ga-grid th{background:var(--ink);color:#fff;text-align:left;padding:13px;font-weight:700;white-space:nowrap}
.ga-grid td{border-bottom:1px solid var(--line);padding:13px;vertical-align:top}
.ga-questions details{border-bottom:1px solid var(--line)}
.ga-questions summary{list-style:none;cursor:pointer;padding:20px 48px 20px 0;font:800 17px/1.4 "Helvetica Neue",Arial;
  position:relative}
.ga-questions summary::-webkit-details-marker{display:none}
.ga-questions summary:after{content:"+";position:absolute;right:8px;top:16px;font:400 28px/1 Arial;color:var(--mag)}
.ga-questions details[open] summary:after{content:"\2212"}
.ga-questions p{margin:0;padding:0 0 20px;color:var(--mut);font-size:15.5px;max-width:78ch}
.ga-prose{max-width:860px}
.ga-prose h2{font:900 clamp(22px,2.6vw,30px)/1.18 "Helvetica Neue",Arial;margin:34px 0 12px}
.ga-prose h2:first-child{margin-top:0}
.ga-prose h3{font:800 18px/1.3 Arial;margin:22px 0 8px}
.ga-prose p{margin:0 0 15px;color:#333b49;font-size:16.5px;line-height:1.8}
.ga-prose ul{margin:0 0 15px;padding-left:22px}
.ga-prose li{margin-bottom:8px;color:#333b49}
.ga-standfirst{font-size:19px;line-height:1.6;color:var(--ink2)}

/* page head (inner) */
.ga-masthead{padding:52px 0 10px}
.ga-masthead .eb{display:inline-block;font:800 12px/1 Arial;letter-spacing:.16em;text-transform:uppercase;color:var(--mag);
  margin-bottom:14px}
.ga-masthead h1{font:900 clamp(30px,4.4vw,52px)/1.06 "Helvetica Neue",Arial;margin:0 0 14px;max-width:18ch}
.ga-masthead p{margin:0;max-width:60ch;font-size:18px;color:var(--mut)}
.ga-masthead .go{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.ga-masthead img{margin-top:34px;border-radius:22px;width:100%;aspect-ratio:21/9;object-fit:cover;height:auto}
.ga-trail{color:var(--mut);font-size:13px;padding-top:18px}
/* the crumb is the only way back to the casino on a phone, so it gets a 44px tap box
   without changing how tall the line looks */
.ga-trail a{color:var(--mut);display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
.ga-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
.ga-stats div{border-left:3px solid var(--mag);padding-left:16px}
.ga-stats b{display:block;font:900 26px/1.1 "Helvetica Neue",Arial}
.ga-stats span{font:700 11.5px/1.3 Arial;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* footer */
.ga-base{background:var(--ink);color:#9aa4b4;padding:52px 0 28px;margin-top:20px}
.ga-base a{color:#9aa4b4;text-decoration:none}
.ga-basecols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:28px}
.ga-basecols h4{font:700 12px/1.2 Arial;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.ga-basecols a{display:block;padding:7px 0;font-size:14px}
.ga-basecols p{margin:0;font-size:14px;line-height:1.75}
.ga-basecols .ga-brand b{color:#fff}
.ga-methods{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ga-methods img{height:26px;width:auto;background:#fff;border-radius:6px;padding:3px 7px}
.ga-seals{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:16px}
.ga-seals img{height:24px;width:auto}
.ga-seals img.chip{background:#fff;border-radius:5px;padding:3px 7px}
.ga-fine{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:18px;display:flex;flex-wrap:wrap;
  gap:10px 18px;align-items:center;justify-content:space-between;font-size:13px}
.ga-adult{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid #ff6ea8;
  color:#ff6ea8;font:800 11px/1 Arial;margin-right:10px}
.ga-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.ga-stickybar a{display:flex;width:100%}

@media (max-width:980px){
  .ga-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ga-path{grid-template-columns:minmax(0,1fr)}
  .ga-basecols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ga-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:840px){
  .ga-menu>a{display:none}
  .ga-toggle{display:grid}
  .ga-stage>img{position:relative;width:100%;height:auto;aspect-ratio:16/9}
  .ga-stage:after{display:none}
  .ga-stage .in{padding:28px 20px 40px}
  .ga-picker{grid-template-columns:minmax(0,1fr)}
  .ga-duo{grid-template-columns:minmax(0,1fr);gap:26px}
  .ga-duo.flip .tx{order:0}
  .ga-callout{grid-template-columns:minmax(0,1fr);padding:28px}
  .ga-block{padding:40px 0}
  .ga-stickybar{display:block}
  body{padding-bottom:78px}
}
@media (max-width:460px){
  .ga-tiles{grid-template-columns:minmax(0,1fr)}
  .ga-brand b{font-size:21px}
  .ga-metrics{gap:18px}
  /* wordmark, three language chips and the burger came to 371px on a 360px Android */
  .ga-lang{margin:0 2px}
  .ga-lang a{padding:0 7px}
  .ga-menu{gap:2px}
  /* a 16/9 hero shot plus the full text block pushed PLAY NOW off a 667px screen: tighten
     both so the main CTA is reachable without scrolling on an iPhone SE */
  .ga-stage>img{aspect-ratio:2/1}
  .ga-stage .in{padding:18px 20px 32px}
  .ga-stage .eb{margin-bottom:12px;padding:8px 14px}
  .ga-stage h1{margin:0 0 10px}
  .ga-stage p{margin:0 0 16px}
}

/* Small phones. The bar is a nowrap wordmark plus three language pills plus the toggle, and at 320
   it measured 353px and dragged the document sideways. Narrow the bar's own gutter, the wordmark
   and the pill padding; the toggle keeps its 44px. */
@media (max-width:400px){
  .ga-bar .in{padding:0 14px;gap:8px}
  .ga-brand{gap:7px}
  .ga-brand b{font-size:17px}
  .ga-lang a{padding:0 4px}
}

/* === image focal points === */
/* The part of the picture that must survive the crop is pinned to the same
   point of the box. */
img[src$="/assets/img/ga-live.jpg"]{object-position:45.1% 25.8%}
img[src$="/assets/img/support-desk.jpg"]{object-position:78.5% 35.3%}
/* === end image focal points === */

/* === hero rhythm on a phone === */
/* The hero kept its desktop padding and headline size on a 375x667 screen, which pushed the
   Join button past the fold and under the sticky bar. Same content, set tighter. */
@media(max-width:560px){
  .ga-stage .in{padding:30px 20px 36px}
  .ga-stage h1{font-size:29px;margin-bottom:12px}
  .ga-stage p{font-size:15px;margin-bottom:18px}
}
/* === end hero rhythm === */