/* ==========================================================================
   Mr Fortune Casino NZ - Design System
   Single stylesheet. Mobile first. Dark casino theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts (self hosted, subset, woff2)
   -------------------------------------------------------------------------- */
@font-face{font-family:'Poppins';src:url('/assets/fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/poppins-500.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/poppins-700.woff2') format('woff2');font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('/assets/fonts/lora-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Surfaces */
  --bg:            #150F18;
  --bg-elev:       #1E1522;
  --bg-bar:        #221829;
  --bg-card:       #241A2B;
  --bg-card-hi:    #2E2136;
  --bg-pill:       #2A1E31;
  --bg-footer:     #0B080D;
  --bg-input:      #171021;

  /* Brand */
  --mauve:         #C9A0CD;
  --mauve-600:     #B583BA;
  --mauve-200:     #E5CFE8;
  --peri:          #8D90D8;
  --peri-600:      #7376CA;
  --peri-btn:      #6A6DC6;
  --peri-btn-h:    #5A5DBA;
  --pink:          #D57BBF;
  --gold:          #F0C36A;

  /* Text */
  --fg:            #FFFFFF;
  --fg-soft:       #D9CFDD;
  --fg-muted:      #B3A5B8;
  --fg-dim:        #948799;

  /* Lines */
  --line:          rgba(255,255,255,.09);
  --line-2:        rgba(255,255,255,.16);
  --focus:         #FFD166;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 88px; --s-10: 120px;

  /* Layout */
  --wrap: 1920px;
  --wrap-narrow: 1100px;
  --header-h: 68px;

  /* Effects */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.30);
  --shadow-md: 0 10px 30px rgba(0,0,0,.38);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.48);
  --glow-mauve: 0 8px 26px rgba(201,160,205,.28);
  --glow-peri:  0 8px 26px rgba(141,144,216,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg-soft);
  font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{padding-left:1.15rem}
li{margin:.35rem 0}

h1,h2,h3,h4,h5,h6{
  color:var(--fg);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 var(--s-4);
  text-wrap:balance;
}
h1{font-size:clamp(1.95rem,1.4rem + 2.4vw,3.05rem);letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,1.15rem + 1.55vw,2.3rem);letter-spacing:-.022em}
h3{font-size:clamp(1.15rem,1.03rem + .55vw,1.42rem)}
h4{font-size:1.05rem}
p{margin:0 0 var(--s-4)}
p:last-child{margin-bottom:0}
strong{color:var(--fg);font-weight:600}

a{color:var(--mauve);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--mauve-200);text-decoration:underline;text-underline-offset:3px}

/* Visible focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:9999;
  background:var(--mauve);color:#1a1020;font-weight:700;
  padding:12px 20px;border-radius:var(--r-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:var(--s-4);text-decoration:none}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(16px,2.6vw,56px);
}
.wrap--narrow{max-width:var(--wrap-narrow)}

.section{padding-block:var(--s-7)}
@media (min-width:768px){.section{padding-block:var(--s-9)}}
.section--tight{padding-block:var(--s-6)}
.section--alt{background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0))}

.section-head{max-width:880px;margin-bottom:var(--s-6)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{color:var(--fg-muted);font-size:1.03rem;margin-bottom:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mauve);margin-bottom:var(--s-3);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--mauve);border-radius:2px;flex:none}
.section-head--center .eyebrow::before{display:none}

.lede{font-size:1.1rem;color:var(--fg-soft)}

.grid{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:560px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:.97rem;line-height:1;
  padding:14px 26px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform .16s var(--ease),background-color .18s var(--ease),
             box-shadow .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  min-height:48px;text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primary{background:var(--mauve);color:#20142A;box-shadow:var(--glow-mauve)}
.btn--primary:hover{background:var(--mauve-200);color:#20142A;box-shadow:0 12px 32px rgba(201,160,205,.42)}

.btn--secondary{background:var(--peri-btn);color:#FFF;box-shadow:var(--glow-peri)}
.btn--secondary:hover{background:var(--peri-btn-h);color:#FFF;box-shadow:0 12px 32px rgba(106,109,198,.5)}

.btn--ghost{background:rgba(255,255,255,.05);color:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--fg);border-color:var(--mauve)}

.btn--quiet{background:transparent;color:var(--mauve);padding-inline:0;min-height:44px}
.btn--quiet:hover{color:var(--mauve-200);transform:none;text-decoration:underline;text-underline-offset:4px}

.btn--lg{padding:17px 34px;font-size:1.04rem;min-height:56px}
.btn--sm{padding:10px 18px;font-size:.87rem;min-height:40px}
.btn--block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
@media (max-width:479px){
  .btn-row .btn{width:100%}
  .btn--lg{padding:16px 24px}
}

.arrow{width:16px;height:16px;flex:none;transition:transform .18s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(34,24,41,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-bar{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:var(--header-h);
  padding-block:10px;
}

/* menu toggle */
.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  background:var(--bg-pill);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--fg);cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.menu-toggle:hover{background:var(--bg-card-hi);border-color:var(--line-2)}
.menu-toggle svg{width:20px;height:20px}
.menu-toggle .icon-close{display:none}
.menu-toggle[aria-expanded="true"] .icon-open{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:block}

/* search */
.header-search{position:relative;flex:1 1 auto;min-width:0;max-width:520px;display:none}
@media (min-width:1024px){.header-search{display:block}}
.header-search svg{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--fg-dim);pointer-events:none;
}
.header-search input{
  width:100%;height:44px;
  background:var(--bg-input);border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:0 20px 0 46px;color:var(--fg);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.header-search input::placeholder{color:var(--fg-dim)}
.header-search input:hover{border-color:var(--line-2)}
.header-search input:focus{border-color:var(--mauve);background:#1D1427;outline-offset:1px}

/* logo */
.brand{
  display:inline-flex;flex-direction:column;align-items:center;
  gap:1px;flex:none;margin-inline:auto;
  text-decoration:none;line-height:1;padding:2px 4px;
}
.brand:hover{text-decoration:none}
@media (min-width:1024px){.brand{position:absolute;left:50%;transform:translateX(-50%)}}
.header-bar{position:relative}

.brand__mark{
  font-family:'Lora',Georgia,'Times New Roman',serif;
  font-size:1.42rem;font-weight:700;color:#fff;letter-spacing:.005em;
  white-space:nowrap;display:inline-flex;align-items:baseline;gap:1px;
}
.brand__mark .brand__f{position:relative;display:inline-block}
.brand__mark .brand__f::before{
  content:"";position:absolute;top:-.42em;left:50%;transform:translateX(-50%);
  width:11px;height:11px;
  background:conic-gradient(from 45deg,var(--gold),#fff,var(--gold),#fff,var(--gold));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.brand__sub{
  display:flex;align-items:center;gap:7px;
  font-size:.55rem;font-weight:600;letter-spacing:.42em;
  text-transform:uppercase;color:var(--fg-muted);padding-left:.42em;
}
.brand__sub::before,.brand__sub::after{
  content:"";width:16px;height:1px;background:var(--line-2);flex:none;
}
@media (max-width:479px){
  .brand__mark{font-size:1.14rem}
  .brand__sub{font-size:.47rem;letter-spacing:.32em}
}
@media (max-width:380px){
  .brand{margin-inline:2px}
  .brand__mark{font-size:.98rem}
  .brand__sub{font-size:.42rem;letter-spacing:.26em}
  .brand__sub::before,.brand__sub::after{width:10px}
}

/* auth actions */
.header-actions{display:flex;align-items:center;gap:var(--s-2);flex:none;margin-left:auto}
.header-actions .btn{padding:11px 22px;min-height:42px;font-size:.93rem;white-space:nowrap}
@media (max-width:479px){
  .header-actions{gap:6px}
  .header-actions .btn{padding:10px 14px;font-size:.84rem;min-height:42px}
}
@media (max-width:380px){
  .wrap{padding-inline:12px}
  .header-bar{gap:8px}
  .menu-toggle{width:40px;height:40px}
  .header-actions{gap:5px}
  .header-actions .btn{padding:9px 11px;font-size:.78rem;min-height:42px}
}

/* category rail */
.cat-rail{border-top:1px solid var(--line);background:rgba(21,15,24,.5)}
.cat-rail__inner{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding-block:10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.cat-rail__inner::-webkit-scrollbar{display:none}
@media (max-width:767px){.cat-rail__inner{justify-content:flex-start}}

.cat-pill{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:11px 18px;border-radius:var(--r-pill);
  background:var(--bg-pill);border:1px solid var(--line);
  color:var(--fg-soft);font-size:.9rem;font-weight:600;white-space:nowrap;
  transition:
    background-color .24s var(--ease),
    color .24s var(--ease),
    border-color .24s var(--ease),
    box-shadow .24s var(--ease),
    transform .24s var(--ease);
}
.cat-pill svg{width:16px;height:16px;flex:none;transition:color .24s var(--ease),transform .24s var(--ease)}
.cat-pill[aria-current="page"]{background:var(--mauve);color:#20142A;border-color:var(--mauve);box-shadow:var(--glow-mauve)}
.cat-pill--icon{padding:11px 13px}

/* soft glow that fades in behind the pill on hover */
.cat-pill::before{
  content:"";position:absolute;inset:-1px;z-index:-1;
  border-radius:inherit;
  background:radial-gradient(120% 160% at 50% 120%,rgba(201,160,205,.36),rgba(201,160,205,0) 70%);
  opacity:0;transition:opacity .24s var(--ease);
}

/* Hover styling is scoped to devices that actually have a pointer, so a tap
   on a phone does not leave a pill stuck in its hover state. */
@media (hover:hover) and (pointer:fine){
  .cat-pill:hover{
    background:rgba(201,160,205,.14);
    border-color:rgba(201,160,205,.55);
    color:#fff;
    text-decoration:none;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(201,160,205,.20);
  }
  .cat-pill:hover::before{opacity:1}
  .cat-pill:hover svg{color:var(--mauve);transform:scale(1.06)}
  .cat-pill[aria-current="page"]:hover{
    background:var(--mauve-200);
    border-color:var(--mauve-200);
    color:#20142A;
    box-shadow:0 10px 26px rgba(201,160,205,.42);
  }
  .cat-pill[aria-current="page"]:hover svg{color:#20142A}
}

/* Keyboard focus gets the same visual treatment as hover */
.cat-pill:focus-visible{
  background:rgba(201,160,205,.14);
  border-color:rgba(201,160,205,.55);
  color:#fff;
}
.cat-pill:focus-visible svg{color:var(--mauve)}
.cat-pill:active{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .cat-pill,.cat-pill svg,.cat-pill::before{transition-duration:.01ms}
  .cat-pill:hover{transform:none}
}

/* --------------------------------------------------------------------------
   6. Slide-out navigation
   -------------------------------------------------------------------------- */
.nav-backdrop{
  position:fixed;inset:0;z-index:940;
  background:rgba(8,5,10,.72);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .26s var(--ease),visibility .26s var(--ease);
}
.nav-backdrop.is-open{opacity:1;visibility:visible}

.site-nav{
  position:fixed;top:0;left:0;z-index:950;
  width:min(360px,88vw);height:100dvh;
  background:var(--bg-elev);border-right:1px solid var(--line);
  transform:translateX(-102%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
.site-nav.is-open{transform:translateX(0)}

.site-nav__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4);border-bottom:1px solid var(--line);flex:none;
}
.site-nav__title{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);margin:0}
.nav-close{
  width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-pill);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--fg);cursor:pointer;
}
.nav-close:hover{background:var(--bg-card-hi)}
.nav-close svg{width:18px;height:18px}

.site-nav__body{flex:1 1 auto;overflow-y:auto;padding:var(--s-4) var(--s-4) var(--s-6);overscroll-behavior:contain}
.nav-group + .nav-group{margin-top:var(--s-5)}
.nav-group__label{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mauve);margin:0 0 var(--s-2);padding-left:12px;
}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list li{margin:0}
.nav-list a{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:var(--r-sm);
  color:var(--fg-soft);font-weight:500;font-size:.97rem;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.nav-list a:hover{background:rgba(255,255,255,.06);color:var(--fg);text-decoration:none}
.nav-list a[aria-current="page"]{background:rgba(201,160,205,.14);color:var(--mauve-200);font-weight:600}
.nav-list svg{width:17px;height:17px;flex:none;color:var(--fg-dim)}
.nav-list a:hover svg,.nav-list a[aria-current="page"] svg{color:var(--mauve)}

.site-nav__foot{padding:var(--s-4);border-top:1px solid var(--line);flex:none;display:grid;gap:var(--s-2);grid-template-columns:minmax(0,1fr)}

.nav-search{position:relative;margin-bottom:var(--s-5)}
@media (min-width:1024px){.nav-search{display:none}}
.nav-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--fg-dim)}
.nav-search input{
  width:100%;height:44px;background:var(--bg-input);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:0 18px 0 44px;color:var(--fg);
}
.nav-search input:focus{border-color:var(--mauve)}

body.nav-open{overflow:hidden}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;padding-block:var(--s-6) var(--s-7);overflow:hidden}
@media (min-width:768px){.hero{padding-block:var(--s-7) var(--s-9)}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(900px 460px at 78% 8%,rgba(201,160,205,.20),transparent 62%),
    radial-gradient(760px 420px at 8% 90%,rgba(141,144,216,.18),transparent 64%),
    linear-gradient(180deg,#1B1320 0%,var(--bg) 74%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 80%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 80%);
}

.hero__grid{display:grid;gap:var(--s-6);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:var(--s-7)}}

.hero h1{margin-bottom:var(--s-4)}
.hero h1 .accent{
  background:linear-gradient(96deg,var(--mauve) 0%,var(--pink) 46%,var(--peri) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{font-size:clamp(1.02rem,.97rem + .3vw,1.16rem);color:var(--fg-soft);max-width:56ch;margin-bottom:var(--s-5)}

.hero-note{
  display:flex;align-items:flex-start;gap:10px;margin-top:var(--s-5);
  font-size:.86rem;color:var(--fg-muted);max-width:52ch;
}
.hero-note svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--mauve)}

/* hero visual */
.hero__visual{position:relative}
.hero-card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  background:var(--bg-card);
}
.hero-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-card__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--s-6) var(--s-4) var(--s-4);
  background:linear-gradient(180deg,transparent,rgba(11,8,13,.9) 62%);
}
.hero-card__caption strong{display:block;font-size:1.05rem;color:#fff;margin-bottom:2px}
.hero-card__caption span{font-size:.85rem;color:var(--fg-muted)}

.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-4)}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:.82rem;font-weight:500;color:var(--fg-soft);
}
.chip svg{width:14px;height:14px;color:var(--mauve)}

/* stat strip */
.stat-strip{
  display:grid;gap:var(--s-3);margin-top:var(--s-6);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:700px){.stat-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s-4);
}
.stat__v{display:block;font-size:1.28rem;font-weight:700;color:#fff;line-height:1.2}
.stat__l{display:block;font-size:.79rem;color:var(--fg-muted);margin-top:3px}


/* --------------------------------------------------------------------------
   7b. Hero carousel
   Slides are client-supplied banner images that already contain their own
   headline, CTA and disclaimer, so nothing is layered over the artwork.
   object-fit:contain guarantees no cropping or distortion; the three images
   have slightly different ratios, so the shortfall is letterboxed against a
   background matched to their own near-black edges.
   -------------------------------------------------------------------------- */
.hero--banner{padding-block:var(--s-5) var(--s-6)}
@media (min-width:768px){.hero--banner{padding-block:var(--s-6) var(--s-7)}}

.hero-carousel{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#060406;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);
  isolation:isolate;
}
@media (min-width:768px){.hero-carousel{border-radius:var(--r-xl)}}

.hero-carousel__viewport{overflow:hidden}
.hero-carousel__track{
  display:flex;
  margin:0;padding:0;list-style:none;
  transition:transform .62s var(--ease);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){.hero-carousel__track{transition:none}}

.hero-slide{
  position:relative;
  flex:0 0 100%;
  min-width:0;
  margin:0;
  background:#060406;
  /* ratio of the two widest supplied banners, so they sit flush */
  aspect-ratio:2.34/1;
}
@media (max-width:639px){.hero-slide{aspect-ratio:2/1}}
@media (max-width:419px){.hero-slide{aspect-ratio:1.75/1}}

.hero-slide__link{
  display:block;width:100%;height:100%;
  text-decoration:none;
}
.hero-slide__link:focus-visible{outline:3px solid var(--focus);outline-offset:-5px;border-radius:var(--r-md)}

.hero-slide__img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

/* Arrows.
   Every supplied banner already has an arrow drawn into the artwork at each
   edge, so these buttons are transparent hit areas placed over them: the
   picture supplies the visual, the button supplies the behaviour. A ring
   appears on hover and on keyboard focus so the control is never invisible
   to someone using it. */
.hero-nav{
  position:absolute;top:50%;z-index:4;
  transform:translateY(-50%);
  width:11%;max-width:130px;min-width:56px;
  height:44%;
  border-radius:var(--r-lg);
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:0;
  color:#fff;cursor:pointer;
  transition:background-color .22s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
/* The chevron is a ring that fades in on hover and focus. At rest the button
   is invisible so it does not sit on top of the arrow already drawn into the
   banner artwork; the wide hit area covers that arrow on every slide. */
.hero-nav svg{
  width:22px;height:22px;
  border-radius:50%;box-sizing:content-box;padding:13px;
  background:rgba(14,9,17,.0);
  opacity:0;
  transition:opacity .22s var(--ease),background-color .22s var(--ease),transform .22s var(--ease);
}
.hero-nav:hover svg{opacity:1;background:rgba(14,9,17,.62);transform:scale(1.04)}
.hero-nav:focus-visible{outline:none}
.hero-nav:focus-visible svg{opacity:1;background:rgba(14,9,17,.72);outline:3px solid var(--focus);outline-offset:2px}
.hero-nav--prev{left:0}
.hero-nav--next{right:0}
@media (max-width:639px){
  .hero-nav{width:18%;min-width:48px;height:52%}
  .hero-nav svg{width:18px;height:18px;padding:10px;opacity:1;background:rgba(14,9,17,.46)}
}

/* Dots sit below the banner so they never cover the supplied artwork. */
.hero-dots{
  display:flex;justify-content:center;align-items:center;gap:9px;
  margin-top:14px;
}
.hero-dot{
  position:relative;
  width:28px;height:4px;border-radius:99px;padding:0;
  border:0;cursor:pointer;
  background:rgba(255,255,255,.24);
  transition:background-color .2s var(--ease),width .2s var(--ease);
}
.hero-dot::before{content:"";position:absolute;inset:-12px}
.hero-dot:hover{background:rgba(255,255,255,.46)}
.hero-dot[aria-current="true"]{background:var(--mauve);width:40px}

/* intro block. It now sits inside the Casino section, above that section's
   heading, so it carries no top padding of its own and is already inside a
   .wrap: the surrounding section supplies the gutters and vertical rhythm. */
.hero__intro{max-width:920px;margin-inline:0}
.hero__intro h1{margin-bottom:var(--s-4)}
.hero__intro--inline{padding-top:0}
.stat-strip--inline{margin-bottom:var(--s-7)}
@media (min-width:768px){.stat-strip--inline{margin-bottom:var(--s-8)}}

/* --------------------------------------------------------------------------
   7c. Promo cards (three-up strip beneath the hero)
   -------------------------------------------------------------------------- */
.promo-strip{padding-block:var(--s-2) var(--s-6)}
@media (min-width:768px){.promo-strip{padding-block:var(--s-3) var(--s-7)}}

.promo-grid{
  display:grid;gap:var(--s-4);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:640px){
  .promo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-grid > :nth-child(3){grid-column:1 / -1}
}
@media (min-width:1000px){
  .promo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .promo-grid > :nth-child(3){grid-column:auto}
}

.promo{
  --promo-bg:#B286A7;
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  min-height:186px;
  padding:var(--s-5) var(--s-5) 52px;
  border-radius:var(--r-md);
  background:var(--promo-bg);
  overflow:hidden;
  isolation:isolate;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
@media (min-width:1000px){.promo{min-height:176px}}
.promo:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* shading under the copy: same hue, darker, so white text clears WCAG AA */
.promo::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.30) 34%,
    rgba(0,0,0,.14) 58%,
    rgba(0,0,0,0) 76%);
}

.promo--rose{--promo-bg:#B286A7}
.promo--peri{--promo-bg:#8686B2}
.promo--mint{--promo-bg:#73BF8C}

.promo__art{
  position:absolute;z-index:1;
  right:-3%;top:50%;transform:translateY(-50%);
  width:auto;height:132%;
  max-width:52%;
  object-fit:contain;object-position:right center;
  pointer-events:none;
}
@media (max-width:479px){.promo__art{height:118%;max-width:46%;right:-5%}}

.promo__body{position:relative;z-index:2;max-width:60%}
@media (max-width:479px){.promo__body{max-width:58%}}

.promo__title{
  margin:0 0 6px;
  font-size:clamp(1.08rem,1rem + .42vw,1.32rem);
  font-weight:600;color:#fff;line-height:1.25;letter-spacing:-.012em;
}
.promo__title a{
  color:inherit;text-decoration:none;
}
.promo__title a::after{content:"";position:absolute;inset:0;z-index:3}
.promo__title a:hover{text-decoration:underline;text-underline-offset:3px;color:#fff}

.promo__sub{
  margin:0;
  font-size:clamp(.92rem,.88rem + .18vw,1.02rem);
  color:#fff;line-height:1.5;font-weight:400;
}

.promo__note{
  position:absolute;z-index:4;
  left:var(--s-5);bottom:14px;
  margin:0;
  display:inline-flex;align-items:center;
  max-width:calc(100% - var(--s-5) * 2);
  padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.58);
  font-size:.7rem;line-height:1.45;color:#EDE7EF;
}
.promo__note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.promo__note a:hover{color:#fff;opacity:.85}
@media (max-width:379px){.promo__note{font-size:.66rem;padding:4px 10px}}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-5);
  transition:transform .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
  height:100%;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--bg-card-hi);box-shadow:var(--shadow-md)}
.card h3{margin-bottom:var(--s-2)}
.card p{color:var(--fg-muted);font-size:.95rem}
.card__foot{margin-top:auto;padding-top:var(--s-4)}

.card-icon{
  width:46px;height:46px;border-radius:14px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(201,160,205,.22),rgba(141,144,216,.18));
  border:1px solid var(--line-2);color:var(--mauve);margin-bottom:var(--s-4);
}
.card-icon svg{width:22px;height:22px}

/* linked card */
a.card{color:inherit}
a.card:hover{text-decoration:none}
a.card h3{color:var(--fg);transition:color .18s var(--ease)}
a.card:hover h3{color:var(--mauve-200)}

/* game tile */
.tile{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-card);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
  display:block;
}
.tile:hover{transform:translateY(-4px);border-color:var(--mauve);box-shadow:var(--shadow-md);text-decoration:none}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tile__body{padding:var(--s-3) var(--s-4) var(--s-4)}
.tile__body strong{display:block;color:var(--fg);font-size:.98rem;line-height:1.3}
.tile__body span{display:block;font-size:.81rem;color:var(--fg-muted);margin-top:3px}
.tile__tag{
  position:absolute;top:10px;left:10px;
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(11,8,13,.82);backdrop-filter:blur(6px);
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mauve-200);
  border:1px solid var(--line-2);
}

/* feature row (image + text) */
.feature{display:grid;gap:var(--s-5);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7)}
  .feature--flip .feature__media{order:2}
}
.feature__media img{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-md);width:100%}
.feature + .feature{margin-top:var(--s-7)}

/* checklist */
.checklist{list-style:none;padding:0;margin:0 0 var(--s-5);display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr)}
.checklist li{display:flex;gap:12px;align-items:flex-start;margin:0;color:var(--fg-soft);font-size:.97rem}
.checklist svg{width:19px;height:19px;flex:none;margin-top:4px;color:var(--mauve)}

/* numbered steps */
.steps{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
.steps li{
  counter-increment:step;position:relative;margin:0;
  padding:var(--s-4) var(--s-4) var(--s-4) 64px;
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-md);
  /* accent edge and hover, matching .card's motion and easing */
  border-left:3px solid var(--mauve);
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.steps li:hover{
  background:var(--bg-card-hi);
  border-color:var(--line-2);
  border-left-color:var(--mauve-200,var(--mauve));
}
@media (prefers-reduced-motion:reduce){.steps li{transition:none}}
.steps li::before{
  content:counter(step);position:absolute;left:18px;top:18px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--mauve),var(--peri));
  color:#20142A;font-weight:700;font-size:.92rem;
}
.steps li strong{display:block;color:var(--fg);margin-bottom:3px}
.steps li p{margin:0;font-size:.94rem;color:var(--fg-muted)}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md);border:1px solid var(--line);margin-bottom:var(--s-5)}
table{width:100%;border-collapse:collapse;min-width:520px;font-size:.94rem;background:var(--bg-card)}
caption{text-align:left;padding:var(--s-3) var(--s-4);color:var(--fg-muted);font-size:.86rem;caption-side:bottom}
th,td{padding:13px var(--s-4);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:rgba(255,255,255,.05);color:var(--fg);font-weight:600;
  font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.028)}

/* --------------------------------------------------------------------------
   10. Testimonials / voices
   -------------------------------------------------------------------------- */
.voice{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-4);height:100%;
  transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.voice:hover{transform:translateY(-3px);border-color:var(--line-2)}
.voice__quote{margin:0;color:var(--fg-soft);font-size:.99rem;line-height:1.72}
.voice__quote::before{
  content:"";display:block;width:30px;height:22px;margin-bottom:var(--s-3);
  background:var(--mauve);opacity:.5;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M0 22V11C0 4.9 4.9 0 11 0v5.5C7.9 5.5 5.5 7.9 5.5 11H11v11H0zm19 0V11C19 4.9 23.9 0 30 0v5.5c-3.1 0-5.5 2.4-5.5 5.5H30v11H19z'/%3E%3C/svg%3E") no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M0 22V11C0 4.9 4.9 0 11 0v5.5C7.9 5.5 5.5 7.9 5.5 11H11v11H0zm19 0V11C19 4.9 23.9 0 30 0v5.5c-3.1 0-5.5 2.4-5.5 5.5H30v11H19z'/%3E%3C/svg%3E") no-repeat;
}
.voice__meta{display:flex;align-items:center;gap:12px;margin-top:auto}
.voice__avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(201,160,205,.3),rgba(141,144,216,.28));
  border:1px solid var(--line-2);color:#fff;font-weight:700;font-size:.9rem;
}
.voice__who{font-size:.9rem;line-height:1.4}
.voice__who strong{display:block;color:var(--fg)}
.voice__who span{color:var(--fg-dim);font-size:.82rem}

/* --------------------------------------------------------------------------
   11. Responsible gambling band
   -------------------------------------------------------------------------- */
.rg-band{
  background:linear-gradient(150deg,rgba(141,144,216,.16),rgba(201,160,205,.09));
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:var(--s-5);
}
@media (min-width:768px){.rg-band{padding:var(--s-7)}}
.rg-band h2{margin-bottom:var(--s-3)}

.helpline-grid{display:grid;gap:var(--s-3);margin:var(--s-5) 0;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.helpline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.helpline-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.helpline{
  background:rgba(11,8,13,.44);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s-4);
}
.helpline strong{display:block;color:#fff;font-size:.97rem;margin-bottom:5px}
.helpline p{margin:0;font-size:.88rem;color:var(--fg-muted)}
.helpline a{font-weight:600;white-space:nowrap}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq{display:grid;gap:var(--s-3)}
.faq details{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color .18s var(--ease);
}
.faq details[open]{border-color:var(--line-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s-4) 52px var(--s-4) var(--s-4);
  font-weight:600;color:var(--fg);position:relative;font-size:1rem;line-height:1.5;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mauve-200)}
.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--mauve);border-bottom:2px solid var(--mauve);
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq__body{padding:0 var(--s-4) var(--s-4);color:var(--fg-muted);font-size:.96rem}
.faq__body p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2A1C33 0%,#1E1729 55%,#231C3A 100%);
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:var(--s-6) var(--s-5);text-align:center;
}
@media (min-width:768px){.cta-band{padding:var(--s-8) var(--s-7)}}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 260px at 50% 0%,rgba(201,160,205,.24),transparent 70%);
  pointer-events:none;
}
.cta-band > *{position:relative}
.cta-band h2{margin-bottom:var(--s-3)}
.cta-band p{color:var(--fg-soft);max-width:60ch;margin-inline:auto;margin-bottom:var(--s-5)}
.cta-band .btn-row{justify-content:center}
.cta-fine{font-size:.83rem;color:var(--fg-dim);margin-top:var(--s-4);margin-bottom:0}

/* --------------------------------------------------------------------------
   14. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head{
  position:relative;padding-block:var(--s-6) var(--s-6);
  background:
    radial-gradient(760px 320px at 20% 0%,rgba(201,160,205,.16),transparent 66%),
    linear-gradient(180deg,#1C1421,var(--bg));
  border-bottom:1px solid var(--line);
}
@media (min-width:768px){.page-head{padding-block:var(--s-7)}}
.page-head h1{margin-bottom:var(--s-3)}
.page-head p{color:var(--fg-muted);max-width:68ch;font-size:1.05rem;margin-bottom:0}

.breadcrumb{margin-bottom:var(--s-4)}
.breadcrumb ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:0;font-size:.85rem;color:var(--fg-dim);
}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:8px}
.breadcrumb li + li::before{content:"/";color:var(--fg-dim);opacity:.6}
.breadcrumb a{color:var(--fg-muted)}
.breadcrumb a:hover{color:var(--mauve)}
.breadcrumb [aria-current="page"]{color:var(--fg-soft)}


.page-head--media{padding-block:var(--s-6)}
@media (min-width:768px){.page-head--media{padding-block:var(--s-7)}}
.page-head__grid{display:grid;gap:var(--s-5);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .page-head__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-7)}
}
.page-head__media{margin:0}
.page-head__media img{
  width:100%;border-radius:var(--r-lg);
  border:1px solid var(--line-2);box-shadow:var(--shadow-md);
  aspect-ratio:3/2;object-fit:cover;
}
@media (max-width:899px){.page-head__media img{aspect-ratio:16/7}}

/* --------------------------------------------------------------------------
   15. Prose (legal / long-form)
   -------------------------------------------------------------------------- */
.prose h2{margin-top:var(--s-7);padding-top:var(--s-2)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s-5)}
.prose ul,.prose ol{margin:0 0 var(--s-4);color:var(--fg-soft)}
.prose li{margin:.45rem 0}
.prose > p,.prose > ul,.prose > ol{max-width:86ch}

.callout{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-left:3px solid var(--mauve);
  border-radius:var(--r-sm);padding:var(--s-4);margin:var(--s-5) 0;
}
.callout p{margin-bottom:var(--s-3);font-size:.96rem}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--fg)}
.callout--peri{border-left-color:var(--peri)}

.updated{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.83rem;color:var(--fg-dim);margin-bottom:var(--s-5);
}
.updated svg{width:15px;height:15px;color:var(--mauve)}

/* table of contents */
.toc{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-6);
}
.toc h2{font-size:.78rem!important;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted);margin:0 0 var(--s-3)!important;padding:0!important}
.toc ol{margin:0;padding-left:1.2rem;columns:1;font-size:.94rem}
@media (min-width:700px){.toc ol{columns:2;column-gap:var(--s-6)}}
.toc li{margin:.3rem 0;break-inside:avoid}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
.field{display:grid;gap:7px}
.field label{font-size:.9rem;font-weight:600;color:var(--fg)}
.field .hint{font-size:.82rem;color:var(--fg-dim)}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg-input);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 15px;color:var(--fg);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
  min-height:48px;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.65}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-dim)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mauve);background:#1D1427}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A697AC' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field-row{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.field-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.check{display:flex;gap:11px;align-items:flex-start}
.check input{width:19px;height:19px;min-height:auto;flex:none;margin-top:3px;accent-color:var(--mauve)}
.check label{font-weight:400;font-size:.9rem;color:var(--fg-muted)}
.form-note{font-size:.85rem;color:var(--fg-dim);margin:0}

/* contact detail list */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr)}
.contact-list li{display:flex;gap:13px;align-items:flex-start;margin:0}
.contact-list svg{width:19px;height:19px;flex:none;margin-top:4px;color:var(--mauve)}
.contact-list strong{display:block;color:var(--fg);font-size:.94rem}
.contact-list span{font-size:.9rem;color:var(--fg-muted)}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--bg-footer);border-top:1px solid var(--line);margin-top:var(--s-8)}
.footer-top{padding-block:var(--s-7) var(--s-6)}
.footer-cols{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.footer-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}}

.footer-col h2,.footer-col h3,.footer-col__title{
  color:var(--pink);font-size:1.04rem;font-weight:600;
  margin:0 0 var(--s-4);letter-spacing:-.005em;
}
.footer-col__title{margin:0 0 var(--s-3)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0}
.footer-col li a{
  display:block;padding:7px 0;color:var(--fg-soft);font-size:.94rem;font-weight:400;
  transition:color .16s var(--ease),padding-left .16s var(--ease);
}
.footer-col li a:hover{color:#fff;text-decoration:none;padding-left:5px}
.footer-col li a[aria-current="page"]{color:var(--mauve-200);font-weight:600}

.footer-legal{
  border-top:1px solid var(--line);padding-block:var(--s-6);
  text-align:center;
}
.footer-legal p{
  color:var(--mauve);font-size:.88rem;line-height:1.75;
  max-width:88ch;margin-inline:auto;margin-bottom:var(--s-4);
}
.footer-legal p.footer-muted{color:var(--fg-dim)}
.footer-legal a{color:var(--mauve-200);text-decoration:underline;text-underline-offset:3px}
.footer-legal a:hover{color:#fff}

.footer-pay{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s-4) var(--s-5);padding-block:var(--s-5);
  border-top:1px solid var(--line);
}
.footer-pay span{
  font-size:.9rem;font-weight:600;color:var(--fg-dim);
  letter-spacing:.04em;opacity:.75;transition:opacity .18s var(--ease),color .18s var(--ease);
}
.footer-pay span:hover{opacity:1;color:var(--fg-muted)}

.footer-bottom{
  border-top:1px solid var(--line);padding-block:var(--s-5);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
  align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--fg-dim);
}
.footer-bottom p{margin:0}
.footer-bottom nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0;padding:0}
.footer-bottom nav li{margin:0}
.footer-bottom nav a{color:var(--fg-muted);font-size:.85rem}
.footer-bottom nav a:hover{color:var(--mauve)}

.lang-select{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--mauve);color:#20142A;font-weight:600;font-size:.9rem;
  padding:9px 20px;border-radius:var(--r-pill);border:0;
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.text-center{text-align:center}
.mb-0{margin-bottom:0}
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.muted{color:var(--fg-muted)}
.small{font-size:.88rem}

.divider{height:1px;background:var(--line);border:0;margin-block:var(--s-6)}

.pill-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;border-radius:var(--r-pill);
  background:rgba(201,160,205,.14);border:1px solid rgba(201,160,205,.3);
  color:var(--mauve-200);font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}

/* to-top */
.to-top{
  position:fixed;right:16px;bottom:16px;z-index:800;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--mauve);color:#20142A;border:0;cursor:pointer;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .24s var(--ease),visibility .24s var(--ease),transform .24s var(--ease),background-color .18s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--mauve-200)}
.to-top svg{width:20px;height:20px}

/* 404 */
.err{text-align:center;padding-block:var(--s-9)}
.err__code{
  font-size:clamp(4.5rem,3rem + 9vw,9rem);font-weight:800;line-height:1;
  background:linear-gradient(96deg,var(--mauve),var(--pink) 50%,var(--peri));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:var(--s-3);letter-spacing:-.04em;
}
.err p{max-width:56ch;margin-inline:auto;color:var(--fg-muted)}
.err .btn-row{justify-content:center;margin-top:var(--s-5)}

/* print */
@media print{
  .site-header,.site-footer,.to-top,.cta-band,.site-nav,.nav-backdrop{display:none!important}
  body{background:#fff;color:#000}
  h1,h2,h3{color:#000}
  a{color:#000;text-decoration:underline}
}

/* Value awaiting confirmation against a primary source. */
.tbd{color:var(--fg-dim);font-style:italic;font-size:.92em}

/* Provider game tiles are portrait artwork, not the 4:3 promo crop. */
.tile--game img{aspect-ratio:3/4}
.game-grid{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
@media (max-width:520px){
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
}

/* Live dealer room photography: two wide 16:9 frames above the table tiles. */
.live-rooms{
  display:grid;gap:var(--s-4);margin-bottom:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
}
.live-room{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.live-room img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}


/* A dedicated illustration under a body heading.  The artwork carries no
   words, so the <h2> above it stays visible at every width.  Intrinsic
   width/height are on the <img>, and the height is left to scale, so nothing
   is cropped on a narrow screen and no layout shift occurs while it loads. */
/* Editorial two column content section inside .prose: copy one side,
   its illustration the other.  Used only on the sections that have art,
   so the page keeps a mix of full width and split blocks rather than
   becoming a grid of identical rows. Nothing outside .prose is affected. */
.prose .split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s-5);
  align-items:start;
  margin:var(--s-7) 0 0;
}
.prose .split:first-child{margin-top:0}
@media (min-width:900px){
  .prose .split{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--s-7)}
  /* Sections vary in length; a five step list is far taller than its
     illustration. Centring the art in its column keeps the pairing
     balanced instead of leaving a long gap under a top aligned image.
     (position:sticky is not an option here: body has overflow-x:hidden,
     which makes body a scroll container and disables sticky.) */
  .prose .split{align-items:center}
  /* alternate side; the body stays first in the markup either way */
  .prose .split--rev{grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
  .prose .split--rev .split__body{order:2}
  .prose .split--rev .split__media{order:1}
}
.prose .split__body{min-width:0}
.prose .split__body > h2{margin-top:0;padding-top:0}
.prose .split__body > p,
.prose .split__body > ul,
.prose .split__body > ol{max-width:62ch}
.prose .split__body > :last-child{margin-bottom:0}

.prose .split__media{margin:0;min-width:0}
.prose .split__media img{
  display:block;width:100%;height:auto;
  border-radius:18px;border:1px solid var(--line);
}
/* A portrait illustration beside short copy renders far taller than the text
   and drags the section out. Capping the height and letting width follow it
   keeps the whole image visible at its own ratio: no crop, no distortion,
   and landscape art is unaffected because it never reaches the cap. */
@media (min-width:900px){
  .prose .split__media img{
    width:auto;max-width:100%;max-height:620px;
    margin-inline:auto;object-fit:contain;
  }
}
@media (min-width:640px) and (max-width:899px){
  .prose .split__media img{
    width:auto;max-width:100%;max-height:520px;
    margin-inline:auto;object-fit:contain;
  }
}
/* Cut out artwork on a transparent background: no frame, since a border
   and radius would draw a box around empty pixels. A soft drop shadow
   follows the artwork's own edge instead. */
.prose .split__media--bare img{
  border:0;border-radius:0;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
}
@media (max-width:899px){
  .prose .split__media img{border-radius:14px}
  .prose .split__media--bare img{border-radius:0}
}

.prose .section-fig{margin:var(--s-5) 0 var(--s-6);max-width:86ch}
.prose .section-fig img{
  display:block;width:100%;height:auto;
  border-radius:18px;border:1px solid var(--line);
}
@media (max-width:640px){
  .prose .section-fig{margin:var(--s-4) 0 var(--s-5)}
  .prose .section-fig img{border-radius:14px}
}

/* Sample visitor feedback cards.  Layout and hover come from .card, so these
   rules only cover the attribution row and the initial badge. */
.testimonial{margin:0;gap:var(--s-3)}
.testimonial blockquote{margin:0}
.testimonial blockquote p{color:var(--fg-soft);font-size:.98rem;margin-bottom:0}
.testimonial__by{
  display:flex;align-items:center;gap:var(--s-3);
  margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line);
}
.testimonial__avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(201,160,205,.22),rgba(141,144,216,.18));
  border:1px solid var(--line-2);color:var(--mauve);font-weight:700;
}
.testimonial__name{display:block;font-weight:600;color:var(--fg)}
.testimonial__city{display:block;color:var(--fg-muted);font-size:.88rem}
/* Quiet one line disclosure under the sample feedback grid. Muted caption
   styling, no box and no icon, so it reads as a footnote rather than a
   warning while still telling the visitor what the entries are. */
.sample-note{
  margin:var(--s-5) 0 0;text-align:center;
  color:var(--fg-dim);font-size:.82rem;line-height:1.5;
}

/* --------------------------------------------------------------------------
   Wide figure inside .prose
   A banner whose artwork already carries the heading in type. It runs the full
   width of the prose column rather than sitting in a .split column, because a
   2:1 banner shrunk into a 45% column renders its own type too small to read.
   -------------------------------------------------------------------------- */
.prose .wide-figure{margin:var(--s-5) 0 var(--s-6)}
.prose .wide-figure img{
  display:block;width:100%;height:auto;
  border-radius:18px;border:1px solid var(--line);
}
/* Cut out artwork on a transparent background: no frame to box in empty space */
.prose .wide-figure--bare img{
  border:0;border-radius:0;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
}

/* --------------------------------------------------------------------------
   Panel: a section set on its own darkened, blurred backdrop
   -------------------------------------------------------------------------- */
.prose .panel{
  position:relative;isolation:isolate;overflow:hidden;
  margin:var(--s-7) 0;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--bg-elev);
}
.prose .panel__media{position:absolute;inset:0;z-index:0}
.prose .panel__media img{
  width:100%;height:100%;object-fit:cover;
  /* Heavily blurred and dimmed: this is a backdrop for body copy, so legibility
     of the text on top matters more than the detail in the picture. The scale
     hides the soft edge the blur leaves against the panel border. */
  filter:blur(18px) saturate(.75);
  transform:scale(1.12);
}
/* Contrast floor for the copy, independent of how light the image behind is */
.prose .panel::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(21,15,24,.86) 0%,rgba(21,15,24,.93) 100%);
}
.prose .panel__body{
  position:relative;z-index:2;
  padding:var(--s-6) var(--s-5);
}
@media (min-width:700px){
  .prose .panel__body{padding:var(--s-7)}
}
.prose .panel__body > :first-child{margin-top:0}
.prose .panel__body > :last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .prose .panel__media img{transform:none}
}

/* --------------------------------------------------------------------------
   Check grid: subsections as cards with a coloured icon header
   -------------------------------------------------------------------------- */
.prose .check-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--s-4);margin:var(--s-5) 0 var(--s-6);
}
@media (min-width:720px){
  .prose .check-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
}
.prose .check-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-card);overflow:hidden;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.prose .check-card:hover{background:var(--bg-card-hi);border-color:var(--line-2)}
.prose .check-card__top{
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-6) var(--s-5);
}
.prose .check-card__icon{display:block;width:34px;height:34px;color:#fff}
.prose .check-card__icon svg{width:100%;height:100%;display:block}
.prose .check-card__body{padding:var(--s-5);flex:1}
.prose .check-card__body h3{margin:0 0 var(--s-3);font-size:1.05rem}
.prose .check-card__body p{margin:0 0 var(--s-3);color:var(--fg-muted)}
.prose .check-card__body > :last-child{margin-bottom:0}
/* One gradient per card, all drawn from the site's own brand tokens rather
   than the reference screenshot's palette. */
.prose .check-card--1 .check-card__top{background:linear-gradient(135deg,#6A4770,#3E2A47)}
.prose .check-card--2 .check-card__top{background:linear-gradient(135deg,#4E5AA8,#2C3268)}
.prose .check-card--3 .check-card__top{background:linear-gradient(135deg,#8D5F8F,#4A2F55)}
.prose .check-card--4 .check-card__top{background:linear-gradient(135deg,#A06C4A,#553522)}
.prose .check-card--5 .check-card__top{background:linear-gradient(135deg,#9C4E77,#4F2440)}
/* An odd card count leaves a gap; let the last one run the full width. */
@media (min-width:720px){
  .prose .check-card:last-child:nth-child(odd){grid-column:1 / -1}
  .prose .check-card:last-child:nth-child(odd) .check-card__top{padding:var(--s-5)}
}

/* --------------------------------------------------------------------------
   Explanation beside its procedure
   A long section and its short numbered list read better side by side than
   stacked, so the list moves into a narrower second column.  It is one column
   below 1000px, where two would squeeze both, and the copy stays first in the
   markup so a phone reads explanation then steps by document order.
   -------------------------------------------------------------------------- */
.prose .split-aside{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s-5);
  align-items:start;
  margin:var(--s-7) 0 0;
}
.prose .split-aside:first-child{margin-top:0}
@media (min-width:1000px){
  .prose .split-aside{grid-template-columns:minmax(0,1fr) minmax(0,.66fr);gap:var(--s-7)}
}
.prose .split-aside__body{min-width:0}
.prose .split-aside__body > h2{margin-top:0;padding-top:0}
.prose .split-aside__body > :last-child{margin-bottom:0}
.prose .split-aside__panel{min-width:0}
.prose .split-aside__panel > :first-child{margin-top:0}
.prose .split-aside__panel > :last-child{margin-bottom:0}
/* the column is narrower than full measure, so the step cards tighten to match */
.prose .split-aside__panel .steps li{padding:var(--s-3) var(--s-4) var(--s-3) 56px}
.prose .split-aside__panel .steps li::before{left:15px;top:14px;width:28px;height:28px;font-size:.85rem}

/* --------------------------------------------------------------------------
   Two sections side by side
   Equal columns, so a pair of related sections reads as one spread rather
   than as two more blocks in a long stack.  One column below 1000px, where
   two would leave neither enough measure.
   -------------------------------------------------------------------------- */
.prose .split-pair{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s-5);
  align-items:start;
  margin:var(--s-7) 0 0;
}
.prose .split-pair:first-child{margin-top:0}
@media (min-width:1000px){
  .prose .split-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7)}
}
.prose .split-pair__col{min-width:0}
.prose .split-pair__col > h2{margin-top:0;padding-top:0}
.prose .split-pair__col > :last-child{margin-bottom:0}
/* the second column starts a new section, so on a phone it needs the spacing
   an H2 would normally carry above it */
@media (max-width:999px){
  .prose .split-pair__col + .split-pair__col{margin-top:var(--s-5)}
}

/* --------------------------------------------------------------------------
   Whole sections drawn as cards
   The card title is the section's own H2, so the page keeps its heading
   structure while the sections read as a set rather than as a stack.  These
   cards carry several paragraphs, unlike the short ones above, so paragraph
   spacing comes back inside them.
   -------------------------------------------------------------------------- */
.prose .check-grid--sections .check-card__body h2{
  margin:0 0 var(--s-3);
  font-size:1.16rem;
  line-height:1.3;
  padding-top:0;
}