/* ────────────────────────────────────────────────────────────
   HOUSELINE — DARK MINIMAL
   Near-black surfaces, hairlines, single muted-gold accent.
   Class names preserved from previous build.
   ──────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}

:root{
  --bg:        #0b0d11;
  --bg-elev:   #14171c;
  --bg-elev-2: #1a1e25;
  --bg-deep:   #07080a;

  --ink:       #e7e8ec;
  --ink-2:     #b9bcc4;
  --ink-3:     #8b909a;
  --ink-4:     #5a5f69;

  --rule:      #23272f;
  --rule-2:    #2f343d;

  --accent:    #c9a86a;       /* muted gold */
  --accent-2:  #b5915a;
  --accent-soft: #2a2418;

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container:     1180px;
  --container-pad: clamp(18px, 4vw, 48px);

  --r:    6px;     /* default radius */
  --r-sm: 4px;

  --rev-dur: .55s;
  --ease: cubic-bezier(.22,.61,.36,1);
}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.6;
  font-feature-settings: "cv11","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--container-pad)}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.022em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
  line-height:1.1;
}
h2{font-size:clamp(28px, 3.6vw, 44px)}
h3{font-size:clamp(20px, 2.2vw, 26px)}
p{margin:0 0 .85em; text-wrap:pretty; color:var(--ink-2)}
em{font-style:normal; color:var(--accent)}
strong{font-weight:600; color:var(--ink)}

/* ── MARKER LINE ────────────────────────────────────────────── */
.marker{
  display:block; height:1px;
  background: linear-gradient(to right, var(--accent) 0, var(--accent) 48px, var(--rule) 48px, var(--rule) 100%);
}

/* ── REVEAL ANIMATIONS — gated on js-on ─────────────────────── */
html.js-on .reveal{
  opacity:0; transform:translateY(10px);
  transition: opacity var(--rev-dur) var(--ease),
              transform var(--rev-dur) var(--ease);
}
html.js-on .reveal.reveal-in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
.reveal[data-d="4"]{transition-delay:.24s}
.reveal[data-d="5"]{transition-delay:.30s}
@media (prefers-reduced-motion: reduce){
  html.js-on .reveal{transition:none !important; transform:none !important; opacity:1 !important}
}

/* ── HEADER ─────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom:1px solid var(--rule);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:64px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
}
.brand-mark{
  width:28px; height:28px; border-radius:6px;
  background:var(--bg-elev); border:1px solid var(--rule);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--accent);
  line-height:1;
}
.brand-word{
  font-family:var(--font-display);
  font-size:17px; font-weight:600; letter-spacing:-.012em;
  display:inline-flex; align-items:baseline; gap:0;
  color:var(--ink);
}
.brand-word em{font-style:normal; color:var(--ink); font-weight:400}
.brand-word .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--accent); margin-left:6px; align-self:center;
  margin-bottom:1px;
}

.primary-nav{display:flex; gap:2px; align-items:center}
.primary-nav a{
  text-decoration:none; color:var(--ink-2);
  padding:8px 12px; font-size:14px; font-weight:500;
  border-radius:var(--r-sm);
  transition: color .15s, background .15s;
}
.primary-nav a:hover{color:var(--ink); background:var(--bg-elev)}
.primary-nav a[aria-current="page"]{color:var(--ink); background:var(--bg-elev)}

.burger{
  display:none; appearance:none; border:1px solid var(--rule); background:transparent;
  width:40px; height:40px; padding:0; position:relative; border-radius:var(--r-sm);
}
.burger span{
  position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink);
  transition: transform .2s, opacity .2s, top .2s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){top:19px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:19px; transform:rotate(-45deg)}

.mobile-menu{
  position:fixed; top:64px; left:0; right:0; z-index:49;
  background:var(--bg); border-bottom:1px solid var(--rule);
  transform:translateY(-110%); transition: transform .28s var(--ease);
  max-height:calc(100vh - 64px); overflow:auto;
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu-inner{
  display:flex; flex-direction:column;
  padding:14px var(--container-pad) 28px;
  max-width:var(--container); margin:0 auto;
}
.mobile-menu-inner a{
  text-decoration:none; color:var(--ink);
  padding:14px 4px; border-bottom:1px solid var(--rule);
  font-size:17px; font-weight:500;
}
.mobile-menu-inner a:last-of-type{border-bottom:0}
.mobile-menu-inner hr{border:0; border-top:1px solid var(--rule); margin:10px 0 0}
body.menu-open{overflow:hidden}

/* ── HERO ───────────────────────────────────────────────────── */
.hero{padding: clamp(56px, 7vw, 88px) 0 clamp(36px, 5vw, 64px)}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.04em; color:var(--ink-3);
  margin-bottom:28px;
  padding: 6px 12px;
  border:1px solid var(--rule); border-radius:999px;
  background:var(--bg-elev);
}
.hero-eyebrow .num{color:var(--accent); font-weight:500}
.hero-eyebrow .sep{display:none}

.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 64px);
  align-items:end;
  margin-top: 0;
}
.display{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(36px, 5.2vw, 72px);
  line-height:1.05; letter-spacing:-.028em;
  margin:0 0 24px; text-wrap:balance;
  color:var(--ink);
}
.display em{color:var(--accent); font-style:normal; font-weight:500}

.hero-lede{
  font-size:clamp(16px, 1.3vw, 19px);
  line-height:1.5; color:var(--ink-2);
  max-width:54ch; margin:0 0 24px; font-weight:400;
}

.hero-aside{
  padding: 22px 24px;
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--r);
  align-self:end;
}
.hero-aside .a-k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  color:var(--accent); font-weight:500;
  margin:0 0 12px;
}
.hero-aside h2{
  font-family:var(--font-display);
  font-size:clamp(18px, 1.6vw, 22px);
  font-weight:500; letter-spacing:-.018em;
  line-height:1.3; margin:0 0 12px; color:var(--ink);
}
.hero-aside p{font-size:14px; line-height:1.55; color:var(--ink-2); margin:0}
.hero-aside .sig{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--rule);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-3);
  display:flex; gap:14px; flex-wrap:wrap;
}
.hero-aside .sig span strong{color:var(--ink-2); font-weight:500}

.hero-promises{
  display:flex; flex-wrap:wrap; gap: 10px;
  padding-top:24px; margin-top:8px;
  border-top:1px solid var(--rule);
}
.hero-promises .p{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px;
  color:var(--ink-2); padding:6px 12px;
  border:1px solid var(--rule); border-radius:999px;
  background:var(--bg-elev);
}
.hero-promises .p .k{
  color:var(--accent); font-weight:500;
}

/* ── SECTION HEADS ──────────────────────────────────────────── */
.section-head{
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 28px; align-items:end;
  margin: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
}
.section-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.04em; color:var(--accent);
  font-weight:500; margin:0 0 14px;
}
.section-eyebrow::before{
  content:""; width:18px; height:1px; background:var(--accent);
}
.section-head h2{margin:0; font-size:clamp(28px, 3.8vw, 46px); line-height:1.05}
.section-note{
  font-size:14px; color:var(--ink-3); max-width:36ch; margin:0;
  padding-left:14px; border-left:1px solid var(--rule);
  align-self:end; line-height:1.5;
}

/* ── CASINO LIST ────────────────────────────────────────────── */
.list-section{padding: clamp(20px, 3vw, 48px) 0 clamp(48px, 6vw, 80px)}
.list-section .container > .marker{margin-bottom:32px}

.casino-list{
  list-style:none; margin:0; padding:0;
  counter-reset: casino;
  border-top:1px solid var(--rule);
}
.casino-card{
  counter-increment: casino;
  border-bottom:1px solid var(--rule);
  background:transparent;
  transition: background .2s var(--ease);
}
.casino-card:hover{background:var(--bg-elev)}

.card-main{
  display:grid;
  grid-template-columns: 36px 92px minmax(0, 1fr) 110px 88px 132px;
  align-items:center;
  gap: 22px;
  padding: 24px 0;
}
.card-num{
  font-family:var(--font-mono);
  font-size:14px; line-height:1; color:var(--ink-3);
  font-weight:500; letter-spacing:.04em;
  transition: color .2s var(--ease);
  align-self:center;
}
.card-num::before{content:counter(casino, decimal-leading-zero)}
.casino-card:hover .card-num{color:var(--accent)}

.card-logo{
  width:92px; height:60px;
  border-radius:var(--r-sm, 6px);
  background:#f6f4ef;
  border:1px solid var(--rule);
  display:grid; place-items:center;
  overflow:hidden;
  padding:8px 10px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card-logo img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain; display:block;
}
.casino-card:hover .card-logo{border-color:var(--accent)}

/* per-brand surfaces: let baked-in logo backgrounds breathe */
.card-logo[data-slug="midnite"]{background:#3aff5b; padding:6px 10px}
.card-logo[data-slug="betmgm"]{background:#000; padding:6px 10px}
.card-logo[data-slug="lottogo"]{background:#3d1d59; padding:6px 8px}
.card-logo[data-slug="lottomart"]{background:#d1f062; padding:6px 10px}
.card-logo[data-slug="32red"]{background:#fff}
.card-logo[data-slug="ladbrokes"]{background:#fff; padding:10px 12px}
.card-logo[data-slug="betfred"]{background:#fff; padding:8px 10px}
.card-logo[data-slug="nyspins"]{background:#101218; padding:6px 10px}
.card-logo[data-slug="mecca"]{background:#fff; padding:6px 10px}

.card-logo--mono{
  background:var(--bg-elev-2);
  font-family:var(--font-display);
  font-weight:600; letter-spacing:-.01em;
  color:var(--ink-2);
  font-size:18px;
}
.card-logo--mono span{display:block}

.card-id{display:flex; flex-direction:column; gap:6px; min-width:0}
.card-name{
  font-family:var(--font-display);
  font-size:clamp(20px, 2vw, 24px);
  font-weight:600; line-height:1.2; letter-spacing:-.018em;
  color:var(--ink); margin:0;
}
.card-name .tag-line{
  display:inline-block; margin-left:10px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.04em; color:var(--ink-3);
  vertical-align:middle; font-weight:400;
}
.card-desc{
  font-size:14.5px; color:var(--ink-2); line-height:1.55; margin:0;
  max-width:62ch; font-weight:400;
}
.card-bonus{
  display:none;
  font-size:12.5px; color:var(--accent); font-weight:500; margin-top:2px;
}
.casino-card[data-has-bonus] .card-bonus{display:block}

.card-rating{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.stars{
  display:inline-flex; gap:2px; color:var(--accent);
  line-height:1;
}
.stars .s{position:relative; width:14px; height:14px}
.stars .s svg{position:absolute; inset:0}
.stars .s.empty{color:var(--ink-4)}
.rating-label{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.03em; font-weight:400;
}

.card-score{
  width:64px; height:64px; border-radius:50%;
  background:var(--bg-elev);
  border:1px solid var(--rule);
  display:grid; place-items:center; justify-self:center;
  position:relative;
  font-family:var(--font-display);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.card-score .v{
  font-size:20px; line-height:1; font-weight:600;
  color:var(--accent); letter-spacing:-.02em;
}
.card-score .o{
  position:absolute; bottom:9px;
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:.04em; color:var(--ink-3); font-weight:400;
}
.casino-card:hover .card-score{
  border-color:var(--accent);
  background:var(--bg-elev-2);
}

.card-cta{display:flex; justify-content:flex-end}
.btn-visit{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--ink);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:11px 18px; font-weight:500; font-size:13.5px;
  text-decoration:none; letter-spacing:0;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.btn-visit svg{width:13px; height:13px; transition: transform .2s var(--ease)}
.btn-visit:hover{
  background:var(--accent); color:var(--bg);
  border-color:var(--accent);
}
.btn-visit:hover svg{transform: translate(2px, -2px)}

.card-disclaim{
  padding: 0 0 18px;
  font-family:var(--font-mono); font-size:10.5px;
  color:var(--ink-4); line-height:1.65;
  max-width: 90ch; font-weight:400;
}

/* mobile casino card */
@media (max-width: 880px){
  .card-main{
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "num   logo  id     score"
      "stars stars stars  stars"
      "cta   cta   cta    cta";
    gap: 12px 14px; padding: 20px 0 18px;
  }
  .card-num{grid-area:num; font-size:13px; padding-top:4px; align-self:start}
  .card-logo{grid-area:logo; width:64px; height:44px; padding:5px 7px; align-self:start}
  .card-logo[data-slug="ladbrokes"]{padding:7px 8px}
  .card-id{grid-area:id; min-width:0}
  .card-name{font-size:18px}
  .card-name .tag-line{display:block; margin-left:0; margin-top:4px}
  .card-desc{font-size:13.5px}
  .card-rating{grid-area:stars; flex-direction:row; gap:14px; align-items:center}
  .card-score{grid-area:score; width:52px; height:52px}
  .card-score .v{font-size:16px}
  .card-score .o{bottom:7px; font-size:8px}
  .card-cta{grid-area:cta; justify-content:stretch}
  .btn-visit{width:100%; justify-content:space-between; padding:13px 18px}
  .card-disclaim{padding-bottom:20px}
}

/* ── EDITORIAL LONGFORM ─────────────────────────────────────── */
.editorial{
  padding: clamp(48px, 7vw, 96px) 0;
  background:var(--bg-deep);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.editorial-grid{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
}
.toc{
  position:sticky; top:88px; align-self:start;
  font-size:13px;
  padding:18px; border-radius:var(--r);
  background:var(--bg-elev); border:1px solid var(--rule);
}
.toc-label{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.04em; color:var(--accent); font-weight:500;
  margin:0 0 14px;
}
.toc ol{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:2px;
  counter-reset: toc;
}
.toc ol li{counter-increment:toc}
.toc a{
  text-decoration:none; color:var(--ink-2);
  display:flex; gap:10px; padding:8px 10px; line-height:1.3;
  border-radius:var(--r-sm);
  transition: color .15s, background .15s, padding-left .2s var(--ease);
  font-size:13.5px;
}
.toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:var(--font-mono); font-size:10.5px;
  color:var(--ink-3); width:20px; flex-shrink:0;
}
.toc a:hover{color:var(--ink); background:var(--bg-elev-2)}

.editorial-body article{
  padding: 0 0 clamp(28px, 4vw, 44px);
  margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 20px;
}
.editorial-body article:last-child{border-bottom:0; margin-bottom:0}
.editorial-body article::before{
  content: attr(data-n);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--accent); padding-top:10px; font-weight:500;
}
.editorial-body h3{
  grid-column:2; margin:0 0 14px;
  font-size:clamp(20px, 2.2vw, 26px); line-height:1.2;
}
.editorial-body p{
  grid-column:2; font-size:15.5px; line-height:1.65;
  color:var(--ink-2); max-width:64ch;
}
.editorial-body .callout{
  grid-column:2; max-width:64ch;
  background:var(--bg-elev);
  border:1px solid var(--rule); border-left:3px solid var(--accent);
  padding:16px 20px; margin:8px 0 0; border-radius:var(--r);
}
.editorial-body .callout p{
  grid-column:auto; margin:0; color:var(--ink-2);
  font-size:14.5px; line-height:1.6; max-width:none;
}
.criteria{
  grid-column:2; margin:0; display:flex; flex-direction:column;
}
.criteria > div{
  display:grid; grid-template-columns: 180px 1fr;
  gap: 28px;
  padding:14px 0; border-top:1px solid var(--rule);
}
.criteria > div:first-child{border-top:0; padding-top:4px}
.criteria dt{
  font-family:var(--font-display); font-size:15px;
  color:var(--ink); margin:0; font-weight:600;
  letter-spacing:-.012em;
}
.criteria dd{margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.55}

@media (max-width: 920px){
  .editorial-grid{grid-template-columns:1fr}
  .toc{position:static}
  .toc ol{display:flex; flex-direction:row; flex-wrap:wrap; gap:6px}
  .toc ol li{border:1px solid var(--rule); border-radius:999px}
  .toc a{padding:6px 12px; font-size:12px}
  .toc a::before{display:none}
  .editorial-body article{grid-template-columns:1fr}
  .editorial-body article::before{margin-bottom:8px}
  .editorial-body h3, .editorial-body p, .criteria, .editorial-body .callout{grid-column:1}
  .criteria > div{grid-template-columns:1fr; gap:4px}
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{padding: clamp(48px, 7vw, 96px) 0}
.faq-list{
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--rule);
  counter-reset: faq;
}
.faq-list details{
  border-bottom:1px solid var(--rule);
  transition: background .2s var(--ease);
}
.faq-list details[open]{background:var(--bg-elev)}
.faq-list summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns: 48px 1fr 28px;
  gap: 18px; align-items:center;
  padding: 20px 0;
  font-family:var(--font-display); font-size:clamp(16px, 1.8vw, 19px);
  font-weight:500; color:var(--ink); line-height:1.35;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{
  counter-increment:faq;
  content:counter(faq, decimal-leading-zero);
  font-family:var(--font-mono); font-size:11px;
  color:var(--accent); font-weight:500;
  align-self:center;
}

.chev{
  width:24px; height:24px; flex-shrink:0; position:relative;
  align-self:center;
}
.chev::before, .chev::after{
  content:""; position:absolute; left:50%; top:50%;
  width:12px; height:1.5px; background:var(--ink-2);
  transition: transform .25s var(--ease), background .15s;
}
.chev::before{transform: translate(-50%,-50%)}
.chev::after{transform: translate(-50%,-50%) rotate(90deg)}
details[open] .chev::before, details[open] .chev::after{background:var(--accent)}
details[open] .chev::after{transform: translate(-50%,-50%) rotate(0deg)}

.faq-body{
  display:grid; grid-template-columns: 48px 1fr 28px;
  gap: 18px;
  padding: 0 0 20px;
}
.faq-body > p{
  grid-column:2;
  margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.65;
  max-width:64ch;
}
@media (max-width: 720px){
  .faq-list summary{grid-template-columns: 36px 1fr 24px; gap:14px}
  .faq-body{grid-template-columns: 36px 1fr 24px; gap:14px}
}

/* ── CONTACT ────────────────────────────────────────────────── */
.contact{padding: clamp(48px, 7vw, 96px) 0; border-top:1px solid var(--rule)}
.contact-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(28px, 5vw, 64px);
}
.contact-text h2{margin:14px 0 14px}
.contact-text p{font-size:15.5px; color:var(--ink-2); max-width:42ch; line-height:1.55}
.contact-email{
  margin-top:24px;
  display:flex; flex-direction:column; gap:6px;
  padding:18px 22px; border-radius:var(--r);
  background:var(--bg-elev); border:1px solid var(--rule);
}
.contact-email span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--accent); font-weight:500;
}
.contact-email a{
  font-family:var(--font-display); font-size:clamp(18px, 2vw, 22px);
  font-weight:500; letter-spacing:-.012em;
  color:var(--ink); text-decoration:none;
  transition: color .2s;
}
.contact-email a:hover{color:var(--accent)}

.contact-form{
  display:flex; flex-direction:column; gap:16px;
  background:var(--bg-elev);
  padding: clamp(22px, 3.2vw, 36px);
  border:1px solid var(--rule);
  border-radius:var(--r);
}
.contact-form .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contact-form label{
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.04em; font-weight:500;
}
.contact-form input, .contact-form textarea{
  font:inherit; font-family:var(--font-body);
  font-size:15px; letter-spacing:0; color:var(--ink); font-weight:400;
  padding:12px 14px; border-radius:var(--r-sm);
  background:var(--bg);
  border:1px solid var(--rule);
  width:100%;
  transition: border-color .15s;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--accent);
}
.contact-form textarea{resize:vertical; min-height:120px}
.contact-form .form-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px}
.contact-form button{
  background:var(--accent); color:var(--bg);
  border:1px solid var(--accent); border-radius:var(--r);
  padding:12px 22px; font-weight:600; font-size:14px;
  letter-spacing:0;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.contact-form button:hover{background:var(--accent-2); border-color:var(--accent-2)}
.thanks{font-family:var(--font-mono); font-size:12px; color:var(--accent); margin:0; letter-spacing:.02em}

@media (max-width: 820px){
  .contact-grid{grid-template-columns:1fr}
  .contact-form .form-row{grid-template-columns:1fr}
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer{
  padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px);
  background:var(--bg-deep);
  color:var(--ink);
  border-top:1px solid var(--rule);
}
.footer-top{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.5fr);
  gap: 36px;
  padding-bottom:32px; border-bottom:1px solid var(--rule);
}
.footer-top h3{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(22px, 2.6vw, 32px); letter-spacing:-.022em;
  line-height:1.2; color:var(--ink);
  margin:14px 0 0;
}
.footer-brand-block .footer-tagline{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--accent); font-weight:500;
  margin:14px 0 0;
}

.footer-nav{display:flex; flex-wrap:wrap; gap:4px; align-self:end}
.footer-nav a{
  text-decoration:none; color:var(--ink-2);
  padding:6px 12px 6px 0; font-size:13.5px;
  margin-right:8px;
  transition: color .15s;
}
.footer-nav a:hover{color:var(--accent)}

.footer-disclosure{padding: 28px 0; border-bottom:1px solid var(--rule)}
.footer-disclosure-grid{
  display:grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 36px;
}
.footer-disclosure-grid h3{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--accent); font-weight:500;
  margin:0;
}
.footer-disclosure p{
  font-size:13.5px; color:var(--ink-3); line-height:1.65; max-width:84ch;
  margin: 0 0 1em;
}
.footer-disclosure p:last-child{margin-bottom:0}
.footer-disclosure strong{color:var(--ink-2); font-weight:500}

.footer-partners{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding: 26px 0;
  border-bottom:1px solid var(--rule);
}
.footer-partner-logo{
  display:flex; align-items:center; justify-content:center;
  height:56px; min-width:96px;
  padding: 8px 18px; border-radius:var(--r);
  background:var(--bg-elev); border:1px solid var(--rule);
}
.footer-partner-logo img{max-height:36px; width:auto; display:block}
.footer-partner-logo a{display:inline-flex; align-items:center; height:100%}
.footer-partner-logo:has(img[src*="18plus"]){background:transparent; padding:0; min-width:60px; border:0}
.footer-partner-logo:has(img[src*="18plus"]) img{max-height:56px}

.footer-base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:20px; align-items:center;
}
.footer-base p{
  margin:0; font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-3); letter-spacing:.02em;
}
.footer-base p strong{color:var(--ink-2); font-weight:500}

@media (max-width: 820px){
  .footer-top{grid-template-columns:1fr; gap:20px; padding-bottom:24px}
  .footer-nav{flex-direction:column; gap:0; align-self:start}
  .footer-nav a{margin-right:0; padding:8px 0}
  .footer-disclosure-grid{grid-template-columns:1fr; gap:14px}
}

/* ── PAGE HERO (inner) ──────────────────────────────────────── */
.page-hero{
  padding: clamp(36px, 5vw, 64px) 0 clamp(24px, 3vw, 40px);
  border-bottom:1px solid var(--rule);
}
.crumbs{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);
  margin: 0 0 24px; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:8px;
}
.crumbs a{color:var(--ink-3); text-decoration:none; transition: color .15s}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--ink-4)}
.crumbs .cur{color:var(--ink)}

.page-hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(32px, 4.8vw, 64px); line-height:1.05; letter-spacing:-.028em;
  margin:0 0 20px; max-width:20ch;
  color:var(--ink);
}
.page-hero h1 em{color:var(--accent); font-style:normal; font-weight:500}
.page-hero .lede{
  font-size:clamp(15.5px, 1.3vw, 18px); color:var(--ink-2);
  max-width:60ch; margin: 18px 0 24px; line-height:1.55;
}
.page-hero .meta{
  display:flex; gap: 0;
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  letter-spacing:.02em;
  padding-top:16px; margin-top:26px;
  border-top:1px solid var(--rule); flex-wrap:wrap;
}
.page-hero .meta span{padding: 4px 22px 4px 0; border-right:1px solid var(--rule); margin-right:22px}
.page-hero .meta span:last-child{border-right:0; margin-right:0}
.page-hero .meta span strong{color:var(--accent); font-weight:500; margin-right:6px}

/* ── INFO PAGE / PROSE ──────────────────────────────────────── */
.info-page{padding: clamp(36px, 5vw, 72px) 0}
.info-grid{
  display:grid;
  grid-template-columns: 220px minmax(0,1fr);
  gap: clamp(28px, 5vw, 80px);
}
.info-prose h2{
  font-size:clamp(22px, 2.6vw, 32px); margin: clamp(28px, 4vw, 44px) 0 12px;
  scroll-margin-top: 88px;
}
.info-prose h2:first-child{margin-top:0}
.info-prose h3{font-size:17px; margin: 22px 0 8px}
.info-prose p, .info-prose li{
  font-size:15.5px; line-height:1.7; color:var(--ink-2); max-width:66ch;
}
.info-prose ul, .info-prose ol{padding-left:1.1em; margin: 0 0 1em}
.info-prose li{margin-bottom:.4em}
.info-prose li::marker{color:var(--accent)}
.info-prose strong{color:var(--ink)}
.info-prose code{
  font-family:var(--font-mono); font-size:.88em;
  background:var(--bg-elev); color:var(--accent);
  padding:2px 6px; border-radius:var(--r-sm);
}
.info-prose a{
  color:var(--ink); text-decoration:underline;
  text-decoration-color: var(--accent); text-decoration-thickness: 1.5px;
  text-underline-offset:3px;
}
.info-prose a:hover{color:var(--accent)}
.info-prose hr{border:0; border-top:1px solid var(--rule); margin:32px 0}
.info-prose .callout{
  background:var(--bg-elev);
  border:1px solid var(--rule); border-left:3px solid var(--accent);
  padding:16px 20px; margin: 20px 0; border-radius:var(--r);
}
.info-prose .callout p{margin:0; color:var(--ink-2); font-size:14.5px; max-width:none}

@media (max-width: 920px){
  .info-grid{grid-template-columns:1fr}
  .info-prose h2{scroll-margin-top: 72px}
}

/* ── CATEGORY POINTS ────────────────────────────────────────── */
.category-points{
  padding: clamp(28px, 4vw, 56px) 0;
  border-bottom:1px solid var(--rule);
}
.points-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top:1px solid var(--rule);
}
.point{
  padding: 24px 24px 28px;
  border-right:1px solid var(--rule);
  background:transparent;
  transition: background .2s;
}
.point:hover{background:var(--bg-elev)}
.point:last-child{border-right:0}
.point .point-k{
  font-family:var(--font-mono); font-size:11px; color:var(--accent);
  letter-spacing:.04em; font-weight:500; margin: 0 0 14px;
}
.point h3{
  font-family:var(--font-display); font-weight:600;
  font-size:20px; line-height:1.2; letter-spacing:-.018em;
  margin: 0 0 8px; color:var(--ink);
}
.point p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.55}

@media (max-width: 780px){
  .points-grid{grid-template-columns:1fr}
  .point{border-right:0; border-bottom:1px solid var(--rule); padding:18px 0}
  .point:last-child{border-bottom:0}
}

/* ── EMAIL CARD (contact page) ──────────────────────────────── */
.email-card{
  display:grid; grid-template-columns: 1fr auto;
  align-items:center; gap: 28px;
  padding: 22px 24px; margin-bottom: 28px;
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--bg-elev);
}
.email-card .k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--accent); font-weight:500; margin: 0 0 6px;
}
.email-card a{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.012em;
  font-size:clamp(20px, 2.2vw, 26px); color:var(--ink);
  text-decoration:none; word-break:break-all;
}
.email-card a:hover{color:var(--accent)}
.email-card .copy-btn{
  appearance:none;
  border:1px solid var(--rule); border-radius:var(--r);
  background:transparent; color:var(--ink);
  padding:10px 16px; font-size:13px; cursor:pointer;
  font-family:var(--font-body); letter-spacing:0; font-weight:500;
  transition: background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.email-card .copy-btn:hover{background:var(--accent); color:var(--bg); border-color:var(--accent)}
@media (max-width: 600px){
  .email-card{grid-template-columns:1fr; gap:16px}
  .email-card .copy-btn{justify-self:start}
}

/* ── RESPONSIVE TOP-LEVEL ───────────────────────────────────── */
@media (max-width: 1000px){
  .hero-grid{grid-template-columns:1fr; gap: 28px}
  .hero-aside{align-self:stretch}
}
@media (max-width: 780px){
  .primary-nav{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
  .section-head{grid-template-columns:1fr; gap:14px}
  .section-note{max-width:none}

  /* COMPACT MOBILE HERO — keep casino list above-the-fold-ish */
  .hero{padding: 22px 0 22px}
  .hero-eyebrow{
    margin-bottom: 16px;
    font-size:10.5px; padding:5px 10px;
  }
  .display{
    font-size: clamp(26px, 7vw, 34px);
    margin: 0 0 14px;
    line-height: 1.1;
  }
  .hero-lede{
    font-size: 14px; line-height:1.5;
    margin: 0 0 16px;
  }
  .hero-aside, .hero-promises{display:none}
  .hero .marker{display:none}
  .list-section{padding-top: 8px}
  .list-section .container > .marker{margin-bottom: 18px}
  .list-section .section-head{margin-top: 8px; margin-bottom: 18px}

  /* Compact inner page heros too */
  .page-hero{padding: 24px 0 22px}
  .page-hero h1{font-size: clamp(28px, 7.5vw, 36px); margin: 0 0 14px}
  .page-hero .lede{margin: 14px 0 16px; font-size: 14.5px}
  .page-hero .meta{margin-top: 18px; padding-top: 12px; font-size:10.5px}
  .page-hero .meta span{padding-right: 14px; margin-right: 14px}
}
@media (max-width: 480px){
  .header-inner{min-height:56px}
  .mobile-menu{top:56px; max-height: calc(100vh - 56px)}
  .brand-word{font-size:16px}
  .brand-mark{width:26px; height:26px; font-size:13px}
}