/* ============================================================
   UNERBIT DESIGN SYSTEM — shared stylesheet (dark, editorial)
   Extracted from the per-page inline styles so pages can scale.
   ============================================================ */
:root{
  --bg:#0d0d0d;--surface:#141414;--border:#222;--text:#f0ece4;--muted:#666;
  --accent:#c8a96e;--warn:#3a2a1a;--warn-border:#5a4326;
  --serif:'DM Serif Display',Georgia,serif;--mono:'DM Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.7}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:64px 32px}

nav.breadcrumb{font-size:11px;color:var(--muted);margin-bottom:32px}
nav.breadcrumb a{color:var(--muted);text-decoration:none}
nav.breadcrumb a:hover{color:var(--accent)}
nav.breadcrumb span{margin:0 8px}

/* 18+ / responsible-gambling top strip — visible on every page */
.rg-strip{font-size:11px;color:var(--muted);border:1px solid var(--warn-border);background:var(--warn);
  border-radius:4px;padding:10px 14px;margin-bottom:40px;line-height:1.6}
.rg-strip b{color:var(--accent)}
.rg-strip a{color:var(--accent);text-decoration:none}
.rg-strip a:hover{text-decoration:underline}

h1{font-family:var(--serif);font-size:clamp(32px,5vw,54px);font-weight:400;line-height:1.1;letter-spacing:-0.02em;margin-bottom:24px}
h1 em{font-style:italic;color:var(--accent)}
.lead{font-size:15px;color:var(--muted);max-width:560px;margin-bottom:48px;line-height:1.8}
.divider{width:40px;height:1px;background:var(--border);margin:48px 0}
h2{font-family:var(--serif);font-size:26px;font-weight:400;margin:0 0 20px}
h3{font-family:var(--serif);font-size:19px;font-weight:400;margin:28px 0 12px;color:var(--text)}
p{color:#aaa;margin-bottom:16px;max-width:600px}
ul,ol{color:#aaa;margin:0 0 20px;padding-left:22px;max-width:600px}
li{margin-bottom:10px}
b,strong{color:var(--text)}
a.inline{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--border)}
a.inline:hover{border-color:var(--accent)}

/* Comparison table */
table.cmp{width:100%;border-collapse:collapse;margin:24px 0;font-size:13px}
table.cmp th,table.cmp td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border)}
table.cmp th{color:var(--muted);font-weight:400}
table.cmp td{color:#bbb}
table.cmp .hl{color:var(--accent)}

/* Key takeaway / note box */
.note{border-left:2px solid var(--accent);padding:4px 0 4px 18px;margin:24px 0;color:#bbb;font-size:13px}

/* FAQ */
dl.faq{margin:8px 0 0}
dl.faq dt{color:var(--text);font-family:var(--serif);font-size:17px;margin:24px 0 8px}
dl.faq dd{color:#aaa;margin:0 0 8px}

.back-link{display:inline-block;margin-top:48px;color:var(--muted);text-decoration:none;font-size:12px;border-bottom:1px solid var(--border);padding-bottom:4px}
.back-link:hover{color:var(--accent);border-color:var(--accent)}

/* Related / cluster links — one consistent component everywhere */
.related{margin-top:48px}
.related-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.related-links{display:flex;flex-direction:column;gap:8px}
.related-links a{color:var(--muted);text-decoration:none;font-size:13px;border-left:1px solid var(--border);padding-left:16px;max-width:none;transition:color .15s,border-color .15s}
.related-links a:hover{color:var(--text);border-color:var(--accent)}

.disclosure{font-size:11px;color:#555;border-top:1px solid var(--border);padding-top:24px;margin-top:64px;line-height:1.8}
.disclosure strong{color:var(--muted)}
.disclosure a{color:#666;text-decoration:none;border-bottom:1px solid var(--border)}
.disclosure a:hover{color:var(--accent)}

footer{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);font-size:11px;color:#444;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:#555;text-decoration:none}
footer a:hover{color:var(--accent)}
