/* Self-hosted fonts (latin subset), replacing Google Fonts. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src:url(/assets/fonts/cormorant-garamond-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src:url(/assets/fonts/cormorant-garamond-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src:url(/assets/fonts/cormorant-garamond-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src:url(/assets/fonts/inter-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src:url(/assets/fonts/inter-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src:url(/assets/fonts/inter-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src:url(/assets/fonts/inter-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* TuffPuff Ledger. Bohemian Crystal, after the CZ build: deep sapphire chrome
   around a cool crystal-white page, one cyan signature accent, Cormorant display
   against Inter body. Crystalline transparency reads as honest review. */

:root{
  --bg:#18143B; --panel:#2B2749; --panel2:#1a3057; --panel3:#234072;
  --line:#2c477e; --line-soft:rgba(44,71,126,.34);
  --paper:#18143B; --paper2:#221D50; --card:#2B2749;
  --text:#FFFFFF; --muted:#ABA7C4; --muted2:#ABA7C4;
  --cyan:#2fb8d4; --cyan-ink:#5FE0F0; --cyan2:#5fe0f0; --cyan3:#9af0fb; --platinum:#cdd7e8;
  --ink-on-dark:#eaf1fb; --muted-on-dark:#a9bbdd;
  --ok:#59FF8B; --ok-bg:rgba(89,255,139,.12); --stop:#FF8A7A; --stop-bg:rgba(255,138,122,.12);
  --grad-go:linear-gradient(112.61deg,#7AFFA2 20.52%,#FAF77E 102.59%);

  --font:'Inter',system-ui,'Segoe UI',Arial,sans-serif;
  --disp:'Cormorant Garamond',Cormorant,Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  /* One type scale for every page. Headings are set once, globally, below. */
  --h1:clamp(2.25rem,1.5rem + 2.8vw,3.6rem); --h1-lh:1.1;
  --h2:clamp(1.6rem,1.25rem + 1.3vw,2.25rem); --h2-lh:1.18;
  --h3:clamp(1.125rem,1.05rem + .3vw,1.25rem); --h3-lh:1.3;
  --fs-body:1rem; --fs-prose:1.0625rem; --fs-small:.875rem; --fs-xs:.78rem;
  --small:.875rem; --tiny:.78rem; --ink2:#ABA7C4; --ink3:#ABA7C4;
  --amber:#FFC46B; --blue2:#9af0fb; --measure:60ch;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --radius:14px; --radius-sm:10px; --wrap:1180px; --col:100%;
  --shadow:0 22px 55px -26px rgba(6,14,32,.65);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-ink);text-underline-offset:3px}
a:hover{color:var(--text)}

/* ---- global headings: the only place their size and leading are set ---- */
h1,h2,h3{margin:0;color:var(--text);text-wrap:balance}
h1{font-family:var(--disp);font-weight:600;font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:.004em}
h2{font-family:var(--disp);font-weight:600;font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:.003em}
h3{font-family:var(--font);font-weight:700;font-size:var(--h3);line-height:var(--h3-lh);letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--s5)}

/* ---- dark chrome: masthead and nav ---- */
.mast{background:var(--bg);border-bottom:1px solid var(--line)}
.mast__in{max-width:var(--wrap);margin:0 auto;padding:var(--s4) var(--s5);
  display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap}
.mast__name{font-family:var(--disp);font-size:1.6rem;font-weight:600;
  color:var(--ink-on-dark);text-decoration:none;letter-spacing:.005em}
.mast__name span{color:var(--cyan2);font-style:italic}
.mast__meta{margin-left:auto;font-family:var(--mono);font-size:.7rem;
  color:var(--muted-on-dark);letter-spacing:.12em;text-transform:uppercase}

.nav{background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.nav__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5);
  display:flex;align-items:center;gap:var(--s5)}
.nav a:not(.btn){display:block;padding:var(--s3) 0;color:var(--muted-on-dark);
  text-decoration:none;font-size:.92rem;font-weight:500;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.nav a:not(.btn):hover{color:var(--ink-on-dark)}
.nav a:not(.btn)[aria-current]{color:var(--cyan2);border-bottom-color:var(--cyan)}
.nav__cta{margin-left:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-go);color:#0E2A17;padding:14px 28px;border-radius:var(--radius-sm);
  text-decoration:none;font-weight:700;font-size:.95rem;min-height:48px;border:0;
  box-shadow:0 10px 26px -8px rgba(47,184,212,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.btn:hover{filter:brightness(1.06);color:#0b1730}
.btn--sm{padding:8px 18px;min-height:0;font-size:.84rem}

/* ---- hero: sapphire chrome slab, the offer set in crystal ---- */
.hero{background:
  radial-gradient(760px 420px at 78% 10%, rgba(47,184,212,.16), transparent 62%),
  var(--bg);
  border-bottom:1px solid var(--line);color:var(--ink-on-dark)}
.hero__in{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5) var(--s8);
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);align-items:center}
.hero__kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan2);margin:0 0 var(--s3)}
.hero h1{margin:0 0 var(--s4)}
.hero__stand{font-size:1.12rem;color:var(--muted-on-dark);max-width:52ch;margin:0 0 var(--s6)}
.hero__note{font-size:.78rem;color:var(--muted-on-dark);opacity:.8;margin:var(--s3) 0 0}
.hero__art{display:grid;place-items:center}
.hero__art img{width:280px;filter:drop-shadow(0 26px 44px rgba(47,184,212,.38))}

/* the offer, cut like a crystal panel */
.spec{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  background:rgba(19,37,73,.72);
  border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:var(--radius);padding:var(--s5) var(--s6);margin-bottom:var(--s5)}
.spec__fig{font-family:var(--disp);font-weight:600;
  font-size:clamp(3rem,2rem + 4.4vw,4.8rem);line-height:.92;color:var(--cyan2);
  letter-spacing:-.01em;text-shadow:0 0 40px rgba(95,224,240,.35)}
.spec__terms{font-family:var(--mono);font-size:.86rem;line-height:1.5;
  color:var(--ink-on-dark)}

/* ---- the page body ---- */
main.wrap{padding-top:var(--s8);padding-bottom:var(--s8)}
article{max-width:100%}
article > h1{margin:0 0 var(--s6);max-width:22ch}
article > p{color:var(--muted);font-size:var(--fs-prose)}

/* every section is a crystal card */
article > section{background:var(--card);border:1px solid var(--paper2);
  border-radius:var(--radius);padding:var(--s7) var(--s7) var(--s6);
  margin:0 0 var(--s5);box-shadow:var(--shadow);counter-increment:sec}
article{counter-reset:sec}

article > section > h2:first-child{
  margin:0 0 var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--paper2)}
article > section > h2:first-child::before{content:counter(sec,decimal-leading-zero);
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--cyan);margin-bottom:var(--s2)}
article h3{margin:var(--s6) 0 var(--s2)}
article p{margin:0 0 var(--s4);color:var(--muted);font-size:var(--fs-prose)}
article p:last-child{margin-bottom:0}
article p strong{color:var(--text);font-weight:600}

/* ---- lists ---- */
article ul{list-style:none;padding:0;margin:var(--s4) 0;max-width:var(--col)}
article ul li{position:relative;padding:10px 0 10px var(--s6);
  border-bottom:1px solid var(--paper2);color:var(--muted)}
article ul li:last-child{border-bottom:0}
article ul li::before{content:"";position:absolute;left:8px;top:1.05em;width:10px;height:2px;
  background:var(--cyan);border-radius:2px}
article ol{counter-reset:d;list-style:none;padding:0;margin:var(--s4) 0;max-width:var(--col)}
article ol li{position:relative;padding:10px 0 10px var(--s7);
  border-bottom:1px solid var(--paper2);color:var(--muted)}
article ol li:last-child{border-bottom:0}
article ol li::before{content:counter(d,decimal-leading-zero);counter-increment:d;
  position:absolute;left:0;top:11px;font-family:var(--mono);font-size:.7rem;
  color:var(--cyan);letter-spacing:.06em}

/* ---- tables: crystal ruled, head in sapphire ---- */
.tw{overflow-x:auto;margin:var(--s5) 0}
article table{width:100%;min-width:0;border-collapse:collapse;font-size:.92rem;
  margin:var(--s5) 0;display:block;overflow-x:auto}
article table thead,article table tbody,article table tr{width:max-content;min-width:100%}
article table caption{text-align:left;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);
  padding-bottom:var(--s3);white-space:normal}
article table th[scope=col]{text-align:left;background:var(--bg);color:var(--cyan2);
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:var(--s3) var(--s4);white-space:nowrap}
article table th[scope=col]:first-child{border-radius:var(--radius-sm) 0 0 0}
article table th[scope=col]:last-child{border-radius:0 var(--radius-sm) 0 0}
article table th[scope=row]{text-align:left;font-weight:600;color:var(--text);
  padding:13px var(--s4);border-bottom:1px solid var(--paper2);white-space:normal}
article table td{padding:13px var(--s4);border-bottom:1px solid var(--paper2);
  color:var(--muted);vertical-align:top;white-space:normal;min-width:110px;
  font-variant-numeric:tabular-nums}
article table tbody tr:nth-child(even){background:var(--paper)}
article table tbody tr:hover{background:rgba(47,184,212,.08)}

/* ---- callouts ---- */
.note{border-left:3px solid var(--cyan);background:rgba(47,184,212,.08);
  padding:var(--s4) var(--s5);margin:var(--s6) 0;max-width:var(--col);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.note p{margin:0;color:var(--text);font-size:.96rem}
.note strong{color:var(--cyan-ink)}
.note--stop{border-left-color:var(--stop);background:var(--stop-bg)}
.note--stop p{color:var(--text)}
.note--stop strong{color:var(--stop)}


/* ---- game plates ---- */
/* 8 plates: 4 across divides evenly, auto-fill gave 6+2 with a hole. */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4);margin:var(--s7) 0}
.fig{margin:0}
.fig img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--paper2);background:var(--paper2)}
.fig__c{font-size:.78rem;color:var(--muted2);margin-top:var(--s2);line-height:1.4}
.fig__c b{display:block;color:var(--text);font-weight:600;font-size:.84rem}

/* ---- closing CTA: sapphire slab ---- */
.cta{background:radial-gradient(520px 260px at 80% 20%, rgba(47,184,212,.2), transparent 64%),var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s7) var(--s6);margin:var(--s8) 0 0;display:flex;gap:var(--s5);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta__t{font-family:var(--disp);font-weight:600;font-size:1.5rem;line-height:1.2;
  margin:0 0 var(--s2);color:#fff;max-width:34ch}
.cta__s{margin:0;font-family:var(--mono);font-size:.72rem;color:var(--muted-on-dark);
  letter-spacing:.05em}

/* ---- footer ---- */
.ftr{background:var(--bg);border-top:1px solid var(--line);margin-top:0;
  color:var(--muted-on-dark)}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:var(--s8) var(--s5) var(--s6)}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s7);
  padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.ftr h4,.ftr .ftr__h{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan2);margin:0 0 var(--s3);font-weight:500}
.ftr__nav{display:flex;flex-direction:column;gap:var(--s2)}
.ftr__nav a{color:var(--muted-on-dark);text-decoration:none;font-size:.92rem}
.ftr__nav a:hover{color:var(--cyan2)}
@media (max-width:860px){
  .ftr__nav{gap:0}
  .ftr__nav a{display:flex;align-items:center;min-height:44px}
}
.ftr__legal p{font-size:.82rem;line-height:1.65;color:var(--muted-on-dark);margin:0 0 var(--s3)}
.ftr__legal strong{color:var(--ink-on-dark)}
.ftr__badges{display:flex;align-items:center;gap:var(--s3);padding-top:var(--s5);flex-wrap:wrap}
.age{font-family:var(--mono);font-size:.7rem;font-weight:700;border:1.5px solid var(--cyan2);
  color:var(--cyan2);border-radius:50%;width:34px;height:34px;display:inline-flex;
  align-items:center;justify-content:center;flex:none}

/* ---- unfilled slot ---- */
.slot{border:1px dashed var(--platinum);background:var(--paper);border-radius:var(--radius-sm);
  padding:var(--s4);margin:var(--s4) 0;max-width:var(--col);font-family:var(--mono);
  font-size:.84rem;color:var(--muted2);line-height:1.5}
.slot__tag{display:inline-block;background:rgba(47,184,212,.16);color:var(--cyan2);
  font-size:.66rem;padding:2px 8px;border-radius:4px;margin-right:var(--s2);
  letter-spacing:.08em;text-transform:uppercase}

/* =========================================================
   MOBILE: the chrome folds, the mascot moves above the
   headline, the offer panel stacks and every CTA goes wide.
   ========================================================= */
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:var(--s5);padding:var(--s7) var(--s5) var(--s6)}
  .hero__art{order:-1;justify-items:start}
  .hero__art img{width:160px}
  .hero__stand{margin-bottom:var(--s5)}
  .spec{padding:var(--s4) var(--s5);gap:var(--s3)}
  .hero .btn{width:100%}
  article > section{padding:var(--s5) 20px var(--s5)}
  article p,article li{max-width:100%}
  .cta{flex-direction:column;align-items:flex-start;padding:var(--s6) var(--s5)}
  .cta .btn{width:100%}
  .ftr__grid{grid-template-columns:1fr;gap:var(--s6)}
  main.wrap{padding-top:var(--s6)}
}

@media (max-width:640px){
  .nav__in{gap:var(--s4);overflow-x:auto;scrollbar-width:none}
  .nav__in::-webkit-scrollbar{display:none}
  .nav a:not(.btn){white-space:nowrap;font-size:.88rem}
  .nav__cta{display:none}
  .mast__meta{margin-left:0;width:100%}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------
   One measure inside a card. Before this, a section was
   1132px wide while its paragraphs ran to 714px and its
   headings stopped at 481px: three different right edges on
   the same block, which is what reads as text wandering.
   Now every line of prose shares the same column.
   --------------------------------------------------------- */
article > section > h2:first-child,
article > section h3{max-width:none}

/* Nameplate carries the real mark; the word beside it stays in the display face. */
.mast__name{display:inline-flex;align-items:center;gap:var(--s3)}
.mast__name img{height:42px;width:auto;flex:none}
.mast__name span{font-family:var(--disp);font-size:1.5rem;font-style:italic;
  color:var(--cyan2);line-height:1}

/* =========================================================
   MASTHEAD, rebuilt as one bar. Two stacked dark strips of
   almost the same blue read as a smudge 131px tall, and the
   18+ badge sat low on its own line instead of on the
   baseline with everything else. One row now, sticky, with
   every item centred on the same line.
   ========================================================= */
.mast{position:sticky;top:0;z-index:40;
  background:rgba(14,27,58,.92);backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line);box-shadow:0 10px 30px -22px rgba(0,0,0,.9)}
.mast__in{max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s5);
  display:flex;align-items:center;gap:var(--s5);flex-wrap:nowrap;min-height:68px}

/* the mark and the word it belongs to, locked together */
.mast__name{display:inline-flex;align-items:center;gap:10px;flex:none;
  text-decoration:none;padding-right:var(--s5);
  border-right:1px solid var(--line)}
.mast__name img{height:38px;width:auto;display:block}
.mast__name span{font-family:var(--disp);font-size:1.32rem;font-style:italic;
  font-weight:600;color:var(--cyan2);line-height:1;letter-spacing:.01em}

/* nav sits inside the bar, no second strip */
.mast .nav{position:static;background:transparent;border:0;display:flex;
  align-items:center;gap:var(--s5);min-width:0}
.mast .nav a{display:inline-flex;align-items:center;height:68px;
  padding:0;color:var(--muted-on-dark);text-decoration:none;
  font-size:.93rem;font-weight:500;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.mast .nav a:hover{color:var(--ink-on-dark)}
.mast .nav a[aria-current]{color:var(--cyan2);border-bottom-color:var(--cyan)}

.mast__badge{margin-left:auto;font-family:var(--mono);font-size:.68rem;
  color:var(--muted-on-dark);letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;flex:none;opacity:.85}
.mast__cta{flex:none}

/* Phone: the one-row bar cannot hold four items, so it folds. The mark stays on
   the top line with the button; the nav drops to its own scrollable row. The
   badge is dropped rather than wrapped: it repeats in the footer. */
@media (max-width:860px){
  .mast__in{flex-wrap:wrap;min-height:0;gap:var(--s3) var(--s4);
    padding:var(--s3) var(--s5)}
  .mast__name{border-right:0;padding-right:0}
  .mast__name img{height:32px}
  .mast__name span{font-size:1.12rem}
  .mast__badge{display:none}
  .mast__cta{margin-left:auto}
  .mast .nav{order:3;flex-basis:100%;gap:var(--s4);
    overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);
    margin:0 calc(var(--s5) * -1);padding:0 var(--s5)}
  .mast .nav::-webkit-scrollbar{display:none}
  .mast .nav a{height:44px;font-size:.88rem}
}

/* =========================================================
   KEY FIGURES. The page used to open on six identical white
   boxes of prose: nothing to look at, nothing to scan. This
   strip puts the numbers that decide the offer directly under
   the hero, before a reader commits to reading anything.
   ========================================================= */
.keys{background:var(--paper2);border-bottom:1px solid var(--paper2)}
.keys__in{max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s5);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5)}
.key{display:flex;flex-direction:column;gap:var(--s1);
  padding-left:var(--s4);border-left:2px solid var(--cyan)}
.key b{font-family:var(--disp);font-weight:600;font-size:2.1rem;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.key span{font-size:.8rem;line-height:1.35;color:var(--muted)}

/* panels sit inside a section, so they need the card's rhythm, not the page's */
article > section .figs{margin:var(--s5) 0 0}
article > section .tw{margin:var(--s5) 0 0}
article > section .tw + .tw{margin-top:var(--s4)}

/* yes/no cells carry meaning, so they carry colour */
.yn{font-family:var(--mono);font-size:.78rem;padding:2px 9px;border-radius:4px;
  display:inline-block;white-space:nowrap;font-weight:500}
.yn--y{background:var(--ok-bg);color:var(--ok)}
.yn--n{background:var(--stop-bg);color:var(--stop)}
.yn--p{background:rgba(47,184,212,.12);color:var(--cyan2)}

@media (max-width:1040px){
  .keys__in{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
}
@media (max-width:640px){
  .keys__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);
    padding:var(--s5) var(--s5)}
  .key b{font-size:1.7rem}
}

/* A table that fits does not need to be a scroll box: display:block stops the
   columns sharing the width, so they bunch to the left and leave the rest of
   the row empty. Table layout is restored, and only a genuinely wide table
   scrolls, inside its .tw wrapper. */
article table{display:table;width:100%;table-layout:auto;overflow:visible}
article table thead,article table tbody,article table tr{width:auto;min-width:0}
article .tw{overflow-x:auto}
article table th[scope="row"]{width:34%}

/* The scroll hint is injected by script and toggled with .is-on when a table
   genuinely overflows. Without a rule here it was a plain div and showed on
   every table, including ones that fit. */
.tw-hint{display:none;font-family:var(--mono);font-size:.7rem;color:var(--muted2);
  letter-spacing:.06em;margin:var(--s2) 0 0}
.tw-hint.is-on{display:block}

/* =========================================================
   HERO, rebuilt. The old one ran 690px tall: the headline
   stopped at 831, the mascot sat alone in the right third,
   and a 143px figure was stretched across a 764px panel.
   Now the offer is a real card carrying the four numbers
   that govern it, and the mascot is large enough to be part
   of the composition rather than decoration beside it.
   ========================================================= */
.hero__in{padding:var(--s7) var(--s5) var(--s8);
  grid-template-columns:minmax(0,1fr) 400px;gap:var(--s6);align-items:center}
.hero__copy{min-width:0}
.hero h1{max-width:16ch;margin-bottom:var(--s4)}
.hero__stand{max-width:50ch;margin-bottom:var(--s6);font-size:1.06rem}

/* the offer card: figure, terms and the call, in one object */
/* Flex, not grid: a ::before used as a grid divider claimed its own row and
   pushed the terms under the figure instead of beside it. */
.offer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s6);
  background:rgba(19,37,73,.78);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s5) var(--s6)}
.offer__main{display:flex;flex-direction:column;gap:2px;flex:none;
  padding-right:var(--s6);border-right:1px solid var(--line)}
.offer__fig{font-family:var(--disp);font-weight:600;
  font-size:clamp(3rem,2.2rem + 2.6vw,4.2rem);line-height:.88;
  color:var(--cyan2);letter-spacing:-.02em}
.offer__to{font-family:var(--mono);font-size:.82rem;color:var(--ink-on-dark);
  white-space:nowrap}
.offer__terms{flex:1 1 300px;min-width:0;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3) var(--s5)}
.offer__terms li{font-size:.84rem;color:var(--muted-on-dark);line-height:1.35}
.offer__terms b{display:block;font-family:var(--mono);font-size:.98rem;
  color:var(--ink-on-dark);font-weight:500}
.offer__act{flex:1 1 100%;display:flex;align-items:center;gap:var(--s5);
  flex-wrap:wrap;padding-top:var(--s5);margin-top:var(--s2);
  border-top:1px solid var(--line)}
.offer__act .hero__note{margin:0;max-width:44ch}

/* the mascot earns its space */
.hero__art img{width:360px;max-width:100%;
  filter:drop-shadow(0 30px 50px rgba(47,184,212,.42))}

@media (max-width:1040px){
  .hero__in{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5)}
  .hero__art img{width:280px}
}
@media (max-width:860px){
  .hero__in{grid-template-columns:1fr;padding:var(--s6) var(--s5)}
  .hero__art{order:-1;justify-items:start}
  .hero__art img{width:170px}
  .hero h1{max-width:none}
  .offer{gap:var(--s4);padding:var(--s5)}
  .offer__main{border-right:0;padding-right:0}
  .offer__terms{flex-basis:100%;gap:var(--s3) var(--s4)}
  .offer__act{flex-direction:column;align-items:stretch}
  .offer__act .btn{width:100%}
}

/* =========================================================
   THE THREE DEPOSITS. The pack is the subject of the site,
   so it gets a stepped list rather than a sentence: the
   reader can see at a glance that 240% is three payments.
   ========================================================= */
.steps{border-top:2px solid var(--text);margin:var(--s6) 0 0}
.step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--paper2);align-items:baseline}
.step:last-child{border-bottom:0}
.step__n{font-family:var(--mono);font-size:.82rem;color:var(--cyan-ink);
  letter-spacing:.06em;font-variant-numeric:tabular-nums}
.step__t{font-family:var(--disp);font-size:1.22rem;font-weight:600;
  color:var(--text);margin:0 0 2px;line-height:1.24}
.step__t b{font-weight:600;color:var(--blue2)}
.step__d{font-family:var(--mono);font-size:.78rem;color:var(--muted2);margin:0}

/* =========================================================
   THE VERDICT. Two columns, green and red, so the trade-off
   is visible without reading a paragraph. This is the block
   a reader looks for before deciding anything.
   ========================================================= */
.verdict{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);margin:var(--s6) 0 0}
.vbox{background:var(--paper);border:1px solid var(--paper2);
  border-top:3px solid var(--ok);border-radius:var(--radius);padding:var(--s5)}
.vbox--against{border-top-color:var(--stop)}
.vbox h3{margin:0 0 var(--s4);color:var(--ok)}
.vbox--against h3{color:var(--stop)}
.vbox ul{margin:0;padding:0;list-style:none;max-width:none}
.vbox li{position:relative;padding:0 0 var(--s3) var(--s5);margin:0;border:0;
  font-size:.9rem;line-height:1.5;color:var(--muted)}
.vbox li:last-child{padding-bottom:0}
.vbox li::before{content:"";position:absolute;left:0;top:.6em;
  width:9px;height:9px;border-radius:50%;background:var(--ok);opacity:.85}
.vbox--against li::before{background:var(--stop)}

@media (max-width:860px){
  .verdict{grid-template-columns:1fr;gap:var(--s4)}
  .step{grid-template-columns:40px minmax(0,1fr);gap:var(--s3)}
}

/* =========================================================
   FAQ. Four headings and four paragraphs in a row read as
   more prose. Ruled rows with the question in the display
   face turn them into something a reader can scan.
   ========================================================= */
article > section:last-of-type h3{
  margin:0;padding:var(--s5) 0 var(--s2);border-top:1px solid var(--paper2)}
article > section:last-of-type h3:first-of-type{border-top:0;padding-top:0}
article > section:last-of-type h3 + p{margin:0 0 var(--s2)}

/* The closing section carries the operator's licence, so it earns a tint
   that separates it from the review sections above. */
article > section:last-of-type{background:var(--paper);
  border-color:var(--paper2)}

/* The KYC list is a register of what to prepare, so it is numbered and ruled
   rather than bulleted: a reader ticks these off one by one. */
.docs{counter-reset:d;list-style:none;margin:var(--s5) 0 0;padding:0;max-width:none}
.docs li{position:relative;counter-increment:d;
  padding:13px 0 13px var(--s7);border-bottom:1px solid var(--paper2);
  color:var(--muted);font-size:.95rem}
.docs li:last-child{border-bottom:0}
.docs li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;top:14px;
  font-family:var(--mono);font-size:.72rem;color:var(--cyan);letter-spacing:.06em}

/* =========================================================
   THE WORKED EXAMPLE. A EUR 100 deposit followed line by
   line, so the reader sees where the money goes without
   doing the arithmetic themselves. The last row is the one
   that matters: the ceiling.
   ========================================================= */
.calc{margin:var(--s6) 0 0;border-top:2px solid var(--text)}
.calc__row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);
  gap:var(--s4);align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--paper2)}
.calc__k{font-size:.95rem;color:var(--text);font-weight:500}
.calc__v{font-family:var(--disp);font-size:1.32rem;font-weight:600;
  color:var(--blue2);font-variant-numeric:tabular-nums;text-align:right;
  min-width:5ch}
.calc__n{font-family:var(--mono);font-size:.76rem;color:var(--muted2);line-height:1.4}
.calc__row--end{border-bottom:0;background:rgba(47,184,212,.07);
  margin:0 calc(var(--s4) * -1);padding-inline:var(--s4);
  border-radius:var(--radius-sm)}
.calc__row--end .calc__v{color:var(--cyan-ink)}
.calc__row--end .calc__k{font-weight:600}

@media (max-width:640px){
  .calc__row{grid-template-columns:minmax(0,1fr) auto;gap:var(--s3)}
  .calc__n{grid-column:1 / -1;margin-top:-6px}
}

/* =========================================================
   PAYOUT SPEED. The four routes and the cards, ranked, with
   the colour carrying the verdict: this is the fact the page
   exists to deliver.
   ========================================================= */
.speed{margin:var(--s6) 0 0;border-top:2px solid var(--text)}
.speed__row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--s4);align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--paper2);border-left:3px solid transparent;
  padding-left:var(--s4);margin-left:calc(var(--s4) * -1)}
.speed__row:last-child{border-bottom:0}
.speed__row{padding-right:var(--s3)}
.speed__row--fast{border-left-color:var(--ok)}
.speed__row--slow{border-left-color:var(--amber)}
.speed__row--none{border-left-color:var(--stop);background:var(--stop-bg)}
.speed__m{font-weight:600;color:var(--text);font-size:.95rem}
.speed__t{font-family:var(--disp);font-size:1.16rem;font-weight:600;
  color:var(--text);white-space:nowrap}
.speed__row--fast .speed__t{color:var(--ok)}
.speed__row--none .speed__t{color:var(--stop)}
.speed__n{font-family:var(--mono);font-size:.76rem;color:var(--muted2)}

/* Coins and currencies: a set of chips, not a sentence full of commas. */
.coins{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;
  padding:0;margin:var(--s5) 0 0;max-width:none}
.coins li{font-family:var(--mono);font-size:.78rem;color:var(--text);
  background:var(--paper);border:1px solid var(--paper2);
  border-radius:99px;padding:6px 14px;margin:0}
.coins__more{color:var(--muted2);border-style:dashed}
.coins li::before{content:none}
/* .docs counts on the li itself; the generic ordered-list marker must not
   count a second time, or the register reads 02, 04, 06. */
.docs li::before{counter-increment:none}

@media (max-width:640px){
  .speed__row{grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3)}
  .speed__n{grid-column:1 / -1;margin-top:-4px}
}

/* A table written inside the copy has no .tw wrapper, so it must carry its own
   scroll container on narrow screens. Without this it pushed the viewport from
   390 to 747px on the bonuses page. display:block is confined to the phone
   breakpoint so the desktop keeps proper column distribution. */
@media (max-width:860px){
  article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%}
  article table thead,article table tbody,article table tr{width:max-content;min-width:100%}
  article .tw{overflow-x:auto;max-width:100%}
}


/* The four terms as a strip directly under the band: they belong to the offer
   above, so they sit on a darker ground than the page and read as its footnote
   rather than as a separate feature. */
.terms{background:#0A1428;border-bottom:1px solid rgba(120,160,210,.16)}
.terms__in{max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--s5);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.term{display:flex;align-items:baseline;gap:var(--s3);min-width:0}
.term b{font-family:var(--disp);font-weight:600;font-size:1.72rem;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums;flex:none}
.term span{font-size:.8rem;line-height:1.35;color:#93AAC9}
.term--warn b{color:#FF8A7A}
.term--warn span{color:#E0A79E}

@media (max-width:1040px){
  .band__in{padding:var(--s8) var(--s5)}
  .band__art{right:-4%;width:clamp(260px,38vw,420px)}
  .band__stand{max-width:34ch}
  .terms__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
}
@media (max-width:760px){
  /* The band is a flex row on desktop so the banner centres vertically. On a
     phone the mascot becomes a normal block above the copy, so the row has to
     become a column: left as flex it squeezed the text to 243px. */
  .band{min-height:0;display:block}
  .band__in{padding:var(--s7) var(--s5) var(--s6);width:100%}
  /* On a phone the mascot is a normal block, so it needs the page gutter and a
     size that fills the width rather than hugging the left edge with a hole
     beside it. */
  .band__art{position:relative;right:auto;bottom:auto;display:block;
    width:min(62vw,260px);margin:0 auto calc(var(--s5) * -1);
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))
           drop-shadow(0 0 40px rgba(47,184,212,.32))}
  .band__h1{max-width:none}
  .band__stand{max-width:none;margin-bottom:var(--s5)}
  .band__deal{flex-direction:column;align-items:stretch;gap:var(--s4)}
  .band__cta{width:100%}
  .terms__in{grid-template-columns:1fr;gap:var(--s3);padding:var(--s5)}
}

/* =========================================================
   MOBILE, to the mobile-optimize rules.
   A table set to overflow:auto still needs a width it cannot
   exceed, otherwise its rows report past the viewport even
   though the box itself scrolls. Caption wraps rather than
   stretching the box.
   ========================================================= */
@media (max-width:860px){
  article table{max-width:100%;width:100%}
  article table caption{white-space:normal;max-width:100%}
  article .tw{max-width:100%;width:100%}
  /* The header link sits beside the brand as a compact pill. The hero holds
     the primary call, so a full-width button here only doubled it and pushed
     the page down. Height still clears the 40px touch target. */
  .mast__cta{width:auto;min-height:40px;padding:0 16px;font-size:.84rem;
    display:inline-flex;align-items:center}
  .mast__name{min-height:40px;display:inline-flex;align-items:center}
  /* The four terms read as a column: one number width for all of them, so the
     descriptions start on a single left edge instead of four. */
  .terms__in{grid-template-columns:1fr;gap:var(--s3)}
  .term b{flex:0 0 3.4ch;text-align:left}
}

/* Trail back to the review. A chevron separates the steps, matching the
   masthead's own type rather than the body text. */
.trail{margin:var(--s5) 0 var(--s4);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase}
.trail ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0}
.trail li+li::before{content:"\203A";margin-right:var(--s2);color:var(--muted2)}
.trail a{color:var(--cyan-ink);text-decoration:none}
.trail a:hover{text-decoration:underline}
.trail li[aria-current]{color:var(--muted)}

/* Phone: the trail link is a tap target, so it carries the same 40px minimum
   as the navigation. The separator stays aligned to the text. */
@media (max-width:860px){
  .trail li{display:flex;align-items:center;min-height:40px}
  .trail a{display:inline-flex;align-items:center;min-height:40px}
}

/* Operator surfaces mapped onto this site's palette. The band keeps the
   operator's violet; the figure and chips take this site's own accent. */
:root{
  --op-rail:#18143B; --op-panel:#2B2749; --op-line:#373454;
  --op-ink:#FFFFFF; --op-dim:#9894B3;
  --op-band:radial-gradient(120% 140% at 78% 10%, rgba(136,68,255,.55) 0%, rgba(136,68,255,0) 55%),
            radial-gradient(90% 120% at 12% 90%, rgba(89,255,139,.16) 0%, rgba(89,255,139,0) 60%),
            linear-gradient(105deg,#4b2bb5 0%,#6b34d6 42%,#8a3fe0 100%);
  --op-kick:#EADFFF; --op-pct:#59FF8B; --op-bandink:#FFFFFF;
  --op-chip:#FFFFFF; --op-chipink:#2A2560; --op-bandnote:#D9CFF5;
  --op-page:#18143B;
}
/* =========================================================
   OPERATOR LAYOUT. The lobby's composition: a rail of section
   icons on the left, a promo band, a row of category tiles.
   Colours come from this site's own tokens, so the structure
   is shared but the look is not.
   ========================================================= */
.shell{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start}
.rail{position:sticky;top:0;align-self:start;height:100vh;background:var(--op-rail);
  border-right:1px solid var(--op-line);padding:16px 0;display:flex;
  flex-direction:column;gap:8px;z-index:5}
.rail__i{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;margin:0 8px;border-radius:11px;color:var(--op-dim);
  text-decoration:none;font-size:.66rem;text-align:center;line-height:1.2;
  min-height:64px;justify-content:center}
.rail__i img{width:22px;height:22px;opacity:.8}
.rail__i:hover{background:var(--op-panel);color:var(--op-ink)}
.rail__i[aria-current]{background:var(--op-panel);color:var(--op-ink)}
.rail__i[aria-current] img{opacity:1}

.band{position:relative;overflow:hidden;border-radius:16px;
  background:var(--op-band);padding:32px;margin:24px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  min-height:300px}
.band__in{position:relative;z-index:2;min-width:0}
.band__kick{font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:.8rem;color:var(--op-kick);margin:0 0 8px}
.band__pct{font-weight:900;line-height:.92;font-size:clamp(3rem,2rem + 5vw,4.8rem);
  color:var(--op-pct);margin:0}
.band__upto{font-size:1.15rem;font-weight:700;margin:8px 0 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--op-bandink)}
.band__spins{background:var(--op-chip);color:var(--op-chipink);border-radius:99px;
  padding:5px 14px;font-size:.88rem;font-weight:700}
.band__art{position:relative;z-index:2;width:clamp(180px,26vw,300px);height:auto;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.45))}
.band__note{margin:16px 0 0;font-size:.82rem;color:var(--op-bandnote);max-width:52ch}
.band h1{margin:0 0 16px;color:var(--op-bandink)}

.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 48px}
.tile{background:var(--op-panel);border:1px solid var(--op-line);border-radius:11px;
  padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--op-ink);font-size:.82rem;font-weight:600;text-align:center;
  min-height:92px;justify-content:center}
.tile img{width:30px;height:30px}

.pays{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:24px 0;border-top:1px solid var(--op-line);margin-top:24px}
.pays img{height:26px;width:auto;opacity:.7}
.pays img:hover{opacity:1}

@media (max-width:1040px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:861px){ .hdr .nav,.hdr .burger,.mast__nav{display:none} }
@media (max-width:860px){
  /* A grid track sizes to its content, so on a phone the rail is pinned to the
     viewport width and scrolls inside itself instead of widening the page. */
  .shell{display:block}
  .rail{position:static;height:auto;flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--op-line);padding:8px;
    width:100%;max-width:100%;min-width:0}
  .rail__i{min-height:44px;flex:0 0 auto;flex-direction:row;gap:8px;
    padding:8px 12px;font-size:.76rem}
  .band{grid-template-columns:minmax(0,1fr);text-align:center;padding:24px 16px;min-height:0}
  .band__art{margin:0 auto;width:min(60vw,220px)}
  .band__upto{justify-content:center}
  .band__note{margin-left:auto;margin-right:auto}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}


/* The rail becomes a scrolling strip on a phone and carries the sections there
   too, so the masthead's own menu would repeat it. */


/* Ten tiles: two columns divide evenly, three leave one orphan on the last row. */
@media (max-width:860px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* =========================================================
   GAME SHELVES. The operator's lobby puts each category in a
   horizontal row: cover, title, studio. The row scrolls on
   its own rather than wrapping, so the page never widens.
   ========================================================= */
.shelf{margin:0 0 var(--s7)}
/* Home lobby: section headings get more air above than below. */
.shelves > h2{margin:var(--s8) 0 var(--s4)}
.shelves > h2:first-child{margin-top:0}
.shelves > p{color:var(--muted);font-size:var(--fs-prose);margin:0 0 var(--s5)}
.shelf__h{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin:0 0 var(--s4)}
.shelf__t{margin:0}
.shelf__n{font-size:.78rem;color:var(--op-dim);white-space:nowrap}
.shelf__row{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(150px,1fr);gap:var(--s3);
  overflow-x:auto;overflow-y:hidden;padding-bottom:var(--s3);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.shelf__row::-webkit-scrollbar{height:6px}
.shelf__row::-webkit-scrollbar-thumb{background:var(--op-line);border-radius:99px}
.gcard{scroll-snap-align:start;min-width:0}
.gcard__img{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:var(--op-panel);display:block}
.gcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.gcard__tag{position:absolute;left:0;top:0;z-index:2;
  background:#FFE251;color:#2A2000;font-size:.58rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;
  border-radius:12px 0 10px 0}
/* Titles get two lines rather than an ellipsis; the reserved height keeps the
   studio line level across a shelf. */
.gcard__n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;margin:var(--s2) 0 2px;font-size:.875rem;font-weight:600;
  line-height:1.3;min-height:2.6em;color:var(--op-ink)}
.gcard__p{display:block;font-size:var(--fs-xs);line-height:1.35;color:var(--op-dim)}

@media (max-width:860px){
  .shelf__row{grid-auto-columns:minmax(132px,1fr);gap:var(--s2)}
}


/* Banner proportion matched to the operator's own: their band runs about 3.1:1
   at desktop width, ours was 2.8:1 and sat too tall. */
@media (min-width:861px){
  .band{min-height:0;padding:var(--s5) var(--s6);
    aspect-ratio:auto;align-items:center}
  .band__in{padding-block:var(--s2)}
}

@media (min-width:861px){
  /* The operator keeps its banner to four short lines. Ours carries one more,
     so the supporting lines are set smaller and tighter rather than pulled out
     of the flow, which would let them sit on top of the button. */
  .band .hero__h1{font-size:1.4rem;line-height:1.22;margin:var(--s2) 0 var(--s3)}
  .band__note{font-size:.73rem;opacity:.75;margin-top:var(--s2);max-width:60ch}
  .band__upto{margin:var(--s1) 0 var(--s2)}
  .band__pct{line-height:.86}
  .band .btn{padding-block:11px;min-height:42px}
}

/* =========================================================
   TOURNAMENTS. The operator gives each one a card: state and
   studio as chips, the name, the prize pool set large, then a
   footer strip of duration, minimum bet and closing date.
   ========================================================= */
.tours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);
  margin:0 0 var(--s7)}
.tour{position:relative;overflow:hidden;border-radius:16px;
  background:var(--op-panel);border:1px solid var(--op-line);
  display:flex;flex-direction:column;min-width:0}
.tour__top{display:flex;gap:var(--s4);padding:var(--s5) var(--s5) var(--s4);
  align-items:flex-start;flex:1}
.tour__txt{min-width:0;flex:1}
.tour__chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3)}
.tour__st{font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;
  background:#FFE251;color:#2A2000}
.tour__st--up{background:var(--op-line);color:var(--op-ink)}
.tour__by{font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;
  background:rgba(255,255,255,.07);color:var(--op-dim)}
.tour__n{font-size:1.02rem;font-weight:700;line-height:1.25;margin:0 0 var(--s3);
  color:var(--op-ink)}
.tour__k{font-size:.72rem;color:var(--op-dim);margin:0 0 2px}
.tour__v{font-size:1.5rem;font-weight:800;line-height:1;margin:0;color:var(--op-ink)}
.tour__art{width:92px;height:92px;object-fit:contain;flex:none}
.tour__foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--op-line)}
.tour__cell{padding:var(--s3) var(--s4);min-width:0}
.tour__cell+.tour__cell{border-left:1px solid var(--op-line)}
.tour__cl{display:block;font-size:.72rem;color:var(--op-dim);margin-bottom:2px}
.tour__cv{display:block;font-size:.875rem;font-weight:600;color:var(--op-ink);
  line-height:1.3;font-variant-numeric:tabular-nums}
/* Narrow cards: dates and studio names are shown in full, so the footer sizes
   its first two columns to their content and the studio takes the rest. */
@media (max-width:640px){
  .tour__foot{grid-template-columns:auto auto minmax(0,1fr)}
  .tour__cell{padding:var(--s3)}
  .tour__cell:first-child .tour__cv{white-space:nowrap}
}

/* =========================================================
   PROVIDERS. A dense grid of studio marks, the way the
   operator closes its lobby.
   ========================================================= */
.provs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s3);
  margin:0 0 var(--s7)}
.prov{background:var(--op-panel);border:1px solid var(--op-line);border-radius:12px;
  padding:var(--s4) var(--s2);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s2);min-height:78px;min-width:0}
.prov img{height:24px;width:auto;max-width:82%;object-fit:contain;opacity:.9}
.prov span{font-size:.75rem;line-height:1.25;color:var(--op-dim);text-align:center;max-width:100%}

/* =========================================================
   BIG WINS. A ticker of recent payouts: player, amount, game.
   ========================================================= */
.wins{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
  gap:var(--s3);overflow-x:auto;padding-bottom:var(--s3);margin:0 0 var(--s7)}
.win{background:var(--op-panel);border:1px solid var(--op-line);border-radius:12px;
  padding:var(--s4);min-width:0}
.win__p{display:block;font-size:var(--fs-xs);color:var(--op-dim);margin-bottom:4px;
  overflow-wrap:anywhere}
.win__a{display:block;font-size:1.12rem;font-weight:800;color:var(--op-pct);
  margin-bottom:4px}
.win__g{display:block;font-size:var(--fs-small);line-height:1.35;color:var(--op-ink)}

@media (max-width:1040px){
  .tours{grid-template-columns:repeat(2,minmax(0,1fr))}
  .provs{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:860px){
  .tours{grid-template-columns:minmax(0,1fr)}
  .provs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tour__art{width:64px;height:64px}
  .tour__v{font-size:1.28rem}
}


/* =========================================================
   TOP NAVIGATION. This site carries its sections in a strip
   under the masthead rather than a left rail, so the network
   does not repeat one layout twice.
   ========================================================= */
@media (min-width:861px){
  .shell{display:block}
  .rail{position:static;height:auto;width:100%;max-width:100%;
    flex-direction:row;align-items:stretch;gap:var(--s2);
    border-right:0;border-bottom:1px solid var(--op-line);
    padding:var(--s2) var(--s5);overflow-x:auto;
    background:var(--op-rail);margin:0 0 var(--s5)}
  .rail__i{flex:0 0 auto;flex-direction:row;gap:var(--s2);
    min-height:44px;padding:var(--s2) var(--s4);font-size:.82rem}
  .rail__i img{width:18px;height:18px}
}

@media (min-width:861px){
  /* With the menu above the content, main no longer needs the top padding that
     balanced it against a left rail, and the band starts right under the strip. */
  .shell > main.wrap{padding-top:0}
  .rail{margin-bottom:0}
  .band{margin-top:var(--s5)}
}


/* The tournament artwork sits in a tall column; centring it and letting it use
   the height stops the card reading as half empty on the right. */
.tour__top{align-items:center}
.tour__art{width:104px;height:104px;align-self:center}
@media (max-width:860px){
  .tour__art{width:72px;height:72px}
}





/* =========================================================
   ARTWORK BANNER. The offer lives in the image; the heading
   stays in the markup for search and screen readers.
   ========================================================= */
.banner{margin:var(--s5) 0 var(--s6)}
.banner__go{display:block;border-radius:16px;overflow:hidden;line-height:0}
.banner__go img{width:100%;height:auto;display:block}
.banner__go:focus-visible{outline:3px solid var(--op-pct);outline-offset:3px}
.banner__btn{display:none}
@media (max-width:860px){
  /* Phone: a real, full-width call under the artwork, inside the thumb zone. */
  .banner__btn{display:flex;width:100%;margin-top:var(--s3);font-size:1rem}
}
.banner__h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cta--art{margin:var(--s7) 0}
.cta--art a{display:block;border-radius:16px;overflow:hidden;line-height:0}
.cta--art img{width:100%;height:auto;display:block}
.cta__fine{font-size:.78rem;color:var(--op-dim);margin:var(--s3) 0 0}


/* Prose keeps a readable measure (about 72 characters); tables, cards and
   panels around it still run the full width of the card. */
article p, article ul, article ol, .shelves > p{max-width:var(--measure)}
article .vbox ul, article .coins, article .docs, article .mmap__list,
article .mmap__note, article .tw-hint{max-width:none}


/* One header. The menu lives in the masthead; the second strip is gone, and the
   masthead sits on the same ground as the page instead of a separate navy. */
.rail{display:none!important}
.mast{background:rgba(24,20,59,.94);border-bottom:1px solid #373454;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mast .nav a[aria-current]{color:#FFFFFF;border-bottom-color:#59FF8B}
.mast .nav a:hover{color:#FFFFFF}
.shell > main.wrap{padding-top:0}


/* =========================================================
   NO VISIBLE SCROLLBARS. Shelves page with arrow buttons the
   way the operator's lobby does; on a phone they swipe. The
   wins ticker has eight entries, so it simply sits as a grid.
   ========================================================= */
.shelf__row,.lane__row,.rail,.tw,.mast .nav{scrollbar-width:none;-ms-overflow-style:none}
.shelf__row::-webkit-scrollbar,.lane__row::-webkit-scrollbar,.rail::-webkit-scrollbar,
.tw::-webkit-scrollbar,.mast .nav::-webkit-scrollbar{display:none}
.shelf__row,.lane__row{padding-bottom:0;scroll-behavior:smooth}

.wins{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-columns:auto;overflow:visible;padding-bottom:0}
@media (max-width:860px){ .wins{grid-template-columns:repeat(2,minmax(0,1fr))} }

.arr{display:flex;gap:8px;margin-left:var(--s3)}
.arr button{width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:#2B2749;border:1px solid #373454;color:#FFFFFF;
  font-size:1.1rem;line-height:1;padding:0;transition:background .15s,opacity .15s}
.arr button:hover{background:#373454}
.arr button:focus-visible{outline:2px solid #59FF8B;outline-offset:2px}
.arr button:disabled{opacity:.35;cursor:default;background:#2B2749}
.shelf__h,.lane__h{align-items:center}
.shelf__n,.lane__n{margin-left:auto}
@media (max-width:860px){ .arr{display:none} }

@media (min-width:861px){
  /* Header at the same height as the others: the menu fills it, no extra padding. */
  .mast__in{padding-top:0;padding-bottom:0;height:72px;align-items:stretch}
  .mast__in > *{align-self:center}
  .mast .nav{align-self:stretch}
  .mast .nav a{height:72px}
}


/* =========================================================
   MONEY MAP. Payout routes on the left with their timing,
   deposit-only methods on the right grouped by type.
   ========================================================= */
.mmap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4);
  margin:var(--s5) 0 var(--s6)}
.mmap > section{background:#221D50;border:1px solid #373454;border-radius:16px;
  padding:var(--s5)}
.mmap__out{border-color:rgba(89,255,139,.35)!important;
  background:linear-gradient(180deg,rgba(89,255,139,.07),rgba(89,255,139,0) 60%),#221D50!important}
.mmap__h{display:flex;align-items:baseline;gap:var(--s3);margin:0 0 var(--s4);
  color:#FFFFFF;max-width:none}
.mmap__h::after{display:none}
.mmap__n{margin-left:auto;font-size:.72rem;font-weight:600;color:#ABA7C4;
  letter-spacing:.04em;text-transform:uppercase}
.mmap__out .mmap__n{color:#59FF8B}
.mmap__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:none}
.mmap__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:12px;padding:12px 14px;border-radius:12px;background:#2B2749}
.mmap__row::before{display:none}
.mmap__dot{width:10px;height:10px;border-radius:50%;background:#59FF8B;
  box-shadow:0 0 0 4px rgba(89,255,139,.15)}
.mmap__m{display:flex;flex-direction:column;min-width:0}
.mmap__m b{color:#FFFFFF;font-size:.95rem}
.mmap__m span{color:#ABA7C4;font-size:.76rem}
.mmap__t{font-size:.78rem;color:#FFFFFF;text-align:right;max-width:15ch;line-height:1.3}
.mmap__grp{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:start;
  padding:10px 0;border-top:1px solid #373454}
.mmap__grp:first-of-type{border-top:0;padding-top:0}
.mmap__type{font-size:.72rem;font-weight:700;color:#ABA7C4;letter-spacing:.04em;
  text-transform:uppercase;padding-top:5px}
.mmap__chips{display:flex;flex-wrap:wrap;gap:6px}
.mmap__chip{font-size:.8rem;color:#FFFFFF;background:#2B2749;border:1px solid #373454;
  border-radius:99px;padding:4px 11px}
.mmap__note{margin:var(--s4) 0 0;font-size:.8rem;color:#ABA7C4;max-width:none}
@media (max-width:860px){
  .mmap{grid-template-columns:minmax(0,1fr)}
  .mmap > section{padding:var(--s4)}
  .mmap__grp{grid-template-columns:minmax(0,1fr);gap:6px}
  .mmap__type{padding-top:0}
  .mmap__t{max-width:14ch;font-size:.78rem}
}

/* Both columns end on the same line: the payout card's note sits at its foot. */
.mmap__out{display:flex;flex-direction:column}
.mmap__note--out{margin-top:auto;padding-top:var(--s4);border-top:1px solid rgba(89,255,139,.2)}
.mmap__list + .mmap__note--out{margin-top:auto}
.mmap__list{margin-bottom:var(--s4)}

/* =========================================================
   PHONE TABLES. Script labels every cell with its column, and
   each row becomes a small card: the row heading on top, then
   label and value pairs. Without script the table keeps its
   sideways scroll inside .tw.
   ========================================================= */
@media (max-width:860px){
  article table.tbl-stack{display:block;width:100%;max-width:100%;overflow:visible;margin:var(--s5) 0 0}
  article table.tbl-stack caption{display:block;padding-bottom:var(--s3);line-height:1.5}
  article table.tbl-stack thead{display:none}
  article table.tbl-stack tbody,
  article table.tbl-stack tr{display:block;width:auto;min-width:0}
  article table.tbl-stack tr,
  article table.tbl-stack tbody tr:nth-child(even){background:var(--paper);
    border:1px solid var(--paper2);border-radius:var(--radius-sm);
    padding:var(--s2) var(--s4);margin:0 0 var(--s3)}
  article table.tbl-stack tr:last-child{margin-bottom:0}
  article table.tbl-stack th[scope=row]{display:block;width:auto;padding:var(--s2) 0;
    font-size:1rem;line-height:1.35;border-bottom:1px solid var(--paper2)}
  article table.tbl-stack td{display:grid;grid-template-columns:38% minmax(0,1fr);align-items:baseline;
    gap:var(--s4);min-width:0;padding:var(--s2) 0;text-align:left;
    font-size:.94rem;line-height:1.45;color:var(--text)}
  article table.tbl-stack td:last-child{border-bottom:0}
  article table.tbl-stack td::before{content:attr(data-label);
    font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
  article .tw{overflow:visible}
}

/* Prose that follows a table or a panel keeps the section rhythm. */
article table + p, article .tw + p, article .tw-hint + p{margin-top:var(--s5)}

/* ===== ALIGNMENT LAYER =====
   One column for the whole page: header, banner, cards, tables and running text
   all share the same left AND right edge, so nothing hangs short of the blocks
   around it. The column itself is narrow enough that prose stays readable. */
:root{--wrap:960px;--measure:none;--col:none}
/* highlighted rows sit inside the column instead of bleeding past its edges */
.calc__row--end{margin-inline:0}
.speed__row{margin-left:0}
/* studio wall on phones: four across so every row is full (40 and 32 logos) */
@media (max-width:560px){ .provs{grid-template-columns:repeat(4,minmax(0,1fr))} }


/* =========================================================
   PAGE HERO. The page's one visible H1 with a short answer
   paragraph, the main action and four quick facts. It sits
   above the promo artwork, so the heading is the first thing
   read on every page instead of a hidden line in the banner.
   ========================================================= */
.hero{margin:var(--s6) 0 var(--s5)}
.hero__kicker{margin:0 0 var(--s3);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink)}
.hero h1{max-width:30ch;margin:0 0 var(--s4)}
.hero__lead{max-width:64ch;margin:0 0 var(--s5);color:var(--muted);font-size:var(--fs-prose);line-height:1.65}
.hero__act{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0 0 var(--s5)}
.btn--line{background:transparent;color:var(--text);box-shadow:none;
  border:1px solid var(--line)}
.btn--line:hover{color:var(--text);border-color:var(--cyan);filter:none}
.hero__facts{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.hero__facts li{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);
  background:var(--card);border:1px solid var(--paper2);border-radius:var(--radius-sm);min-width:0}
.hero__facts b{font-weight:700;font-size:.95rem;color:var(--text)}
.hero__facts span{font-size:var(--fs-small);color:var(--muted)}
.hero + .banner{margin-top:0}

@media (max-width:860px){
  .hero{margin:var(--s5) 0 var(--s4)}
  .hero__lead{margin-bottom:var(--s4)}
  .hero__act{flex-direction:column;margin-bottom:var(--s4)}
  .hero__act .btn{width:100%}
  .hero__facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .hero__facts li{padding:var(--s2) var(--s3)}
  /* the hero already carries the call to action, so the banner needs no second button */
  .hero ~ .banner .banner__btn{display:none}
}