/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --ink:        #12182B;   /* primary text / header bg */
  --ink-soft:   #2B3350;   /* secondary text on light */
  --paper:      #F5F6F3;   /* page background, cool stone-white */
  --paper-raise:#FFFFFF;   /* card surfaces */
  --line:       #DEE1DA;   /* hairline borders */
  --gold:       #B8924A;   /* verification / trust accent */
  --gold-deep:  #8C6B31;   /* hover state for gold */
  --teal:       #2F6D5C;   /* "pro" / positive signal */
  --rust:       #A14B3C;   /* "con" / caution signal */
  --shadow:     0 1px 2px rgba(18,24,43,.06), 0 8px 24px rgba(18,24,43,.06);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --radius: 3px;
  --max: 1120px;
}

@font-face{
  font-family:"Fraunces";
  src: local("Fraunces");
  font-display: swap;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--ink); }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.1rem, 4vw, 3.4rem); }
h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin-top:2.6em; }
h3{ font-size:1.2rem; margin-top:1.8em; }
p{ margin:0 0 1.1em; color:var(--ink-soft); max-width:68ch; }
.lede{ font-size:1.15rem; color:var(--ink); }

/* ---------------- top bar / disclosure strip ---------------- */
.disclosure-bar{
  background:var(--ink);
  color:#C9CCD8;
  font-size:.78rem;
  letter-spacing:.02em;
  text-align:center;
  padding:7px 16px;
}
.disclosure-bar a{ color:#E7D9B8; text-decoration:underline; }

header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper-raise);
}
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.brand{
  font-family:var(--font-display);
  font-weight:600; font-size:1.3rem;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
}
.brand .dot{ color:var(--gold); }
.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:.92rem;}
.nav-links a{ text-decoration:none; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.lang-switch{ display:flex; gap:6px; font-size:.82rem; }
.lang-switch a{
  text-decoration:none; padding:3px 8px; border:1px solid var(--line);
  border-radius:var(--radius); color:var(--ink-soft);
}
.lang-switch a.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------------- hero ---------------- */
.hero{
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(1100px 400px at 85% -10%, rgba(184,146,74,.14), transparent 60%),
    var(--paper);
}
.hero-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:56px; align-items:start; }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:14px; display:block;
}
.hero-cta{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; align-items:center; }

/* seal / signature verification stamp */
.seal{
  width:150px; height:150px; border-radius:50%;
  border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  position:relative; flex:none;
  transform:rotate(-8deg);
}
.seal::before{
  content:""; position:absolute; inset:7px; border:1px dashed var(--gold);
  border-radius:50%;
}
.seal-inner{
  text-align:center; font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.06em; font-size:.62rem; line-height:1.4;
}
.seal-inner strong{
  display:block; font-family:var(--font-display); font-size:1.9rem;
  letter-spacing:0; font-weight:600; color:var(--gold-deep);
}

.rating-card{
  background:var(--paper-raise); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px; display:flex; gap:20px; align-items:center;
}

.btn{
  display:inline-block; padding:13px 26px; font-weight:600; font-size:.92rem;
  text-decoration:none; border-radius:var(--radius); border:1px solid transparent;
  transition:transform .12s ease, background .12s ease;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--gold-deep); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-fine{ font-size:.72rem; color:var(--ink-soft); margin-left:2px; }

/* ---------------- key facts strip ---------------- */
.facts{
  display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:34px 0; background:var(--paper-raise);
}
.fact{ padding:20px 22px; border-right:1px solid var(--line); }
.fact:last-child{ border-right:none; }
.fact .label{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); display:block; margin-bottom:6px;}
.fact .value{ font-family:var(--font-display); font-size:1.15rem; }

/* ---------------- sections ---------------- */
main{ padding:56px 0 30px; }
section{ margin-bottom:8px; }
.toc{
  columns:2; gap:32px; list-style:none; padding:0; margin:0 0 2em;
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; background:var(--paper-raise);
}
.toc li{ break-inside:avoid; margin-bottom:8px; font-size:.9rem; }
.toc a{ text-decoration:none; color:var(--ink-soft); }
.toc a:hover{ color:var(--gold-deep); }

/* pros/cons */
.pc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0 8px; }
.pc{ border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; background:var(--paper-raise); }
.pc h4{ margin:0 0 12px; font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.pc.pro h4{ color:var(--teal); }
.pc.con h4{ color:var(--rust); }
.pc ul{ margin:0; padding-left:1.1em; color:var(--ink-soft); font-size:.94rem; }
.pc li{ margin-bottom:7px; }

/* table */
table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:.92rem; }
th,td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
th{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }

/* callouts */
.callout{
  border-left:3px solid var(--gold); background:var(--paper-raise); border:1px solid var(--line);
  border-left:3px solid var(--gold); padding:18px 22px; border-radius:0 var(--radius) var(--radius) 0; margin:22px 0;
}
.callout p{ margin:0; }
.callout.warn{ border-left-color:var(--rust); }

.steps{ counter-reset:step; list-style:none; padding:0; margin:20px 0; }
.steps li{
  counter-increment:step; position:relative; padding-left:44px; margin-bottom:16px; color:var(--ink-soft);
}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border:1px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink);
}

.tiers{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:22px 0; }
.tier{ border:1px solid var(--line); background:var(--paper-raise); padding:14px 12px; border-radius:var(--radius); text-align:center; }
.tier .n{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft); }
.tier .name{ font-family:var(--font-display); font-size:1.02rem; margin:4px 0; }

.faq details{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq summary{ cursor:pointer; font-weight:600; font-family:var(--font-display); font-size:1.05rem; }
.faq summary::marker{ color:var(--gold-deep); }
.faq p{ margin-top:10px; }

/* responsible gambling / help box */
.rg-box{
  background:var(--ink); color:#E7E8EE; border-radius:var(--radius); padding:30px 32px; margin:44px 0;
}
.rg-box h3{ color:#fff; margin-top:0; }
.rg-box a{ color:#E7D9B8; }
.rg-box .links{ display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; font-size:.9rem;}

/* footer */
footer.site{ border-top:1px solid var(--line); padding:40px 0 60px; margin-top:40px; }
footer.site .cols{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; font-size:.86rem; color:var(--ink-soft);}
footer.site h5{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--ink); margin:0 0 10px;}
footer.site ul{ list-style:none; padding:0; margin:0; }
footer.site li{ margin-bottom:7px; }
footer.site a{ text-decoration:none; color:var(--ink-soft); }
footer.site a:hover{ color:var(--gold-deep); }
.age-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1.5px solid var(--ink); border-radius:50%;
  font-family:var(--font-mono); font-weight:700; font-size:.78rem; margin-right:10px;
}
.legal-note{ font-size:.78rem; color:var(--ink-soft); margin-top:22px; line-height:1.7; }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .pc-grid{ grid-template-columns:1fr; }
  .toc{ columns:1; }
  .tiers{ grid-template-columns:repeat(2,1fr); }
  footer.site .cols{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
}