/* =====================================================================
   Casinowijs (werknaam) · design system
   Gebaseerd op het UKVC "B2" systeem: Bricolage Grotesque + Geist,
   OKLCH-neutralen getint naar navy (262), één diep-navy feature-vlak.
   Informatief: geen groene affiliate-knoppen in content. Groen (--go)
   is gereserveerd voor de casino-slots zodra die gevuld zijn.
   ===================================================================== */
:root{
  color-scheme: light;
  --bg:          oklch(0.968 0.007 255);
  --surface:     oklch(0.994 0.003 255);
  --surface-2:   oklch(0.952 0.010 256);
  --surface-3:   oklch(0.925 0.015 256);
  --ink:         oklch(0.235 0.050 262);
  --ink-2:       oklch(0.385 0.040 262);
  --muted:       oklch(0.490 0.028 260);
  --line:        oklch(0.900 0.012 258);
  --line-strong: oklch(0.800 0.020 258);
  --feature:     oklch(0.262 0.064 264);
  --feature-2:   oklch(0.320 0.064 264);
  --on-feature:  oklch(0.968 0.008 255);
  --on-feature-2:oklch(0.830 0.028 258);
  --feature-line:oklch(0.400 0.055 264);
  --brand:       oklch(0.560 0.150 45);   /* oranje-koper accent, NL */
  --brand-wash:  oklch(0.955 0.030 60);
  --data:        oklch(0.540 0.085 248);
  --data-wash:   oklch(0.955 0.020 248);
  --warn:        oklch(0.520 0.170 30);
  --warn-wash:   oklch(0.960 0.025 40);
  --ok:          oklch(0.500 0.120 152);
  --ok-wash:     oklch(0.960 0.030 152);
  --go:          oklch(0.500 0.135 152);
  --on-go:       oklch(0.988 0.006 152);
  --focus:       oklch(0.235 0.050 262);

  --shadow-1: 0 0 0 1px oklch(0.28 0.06 262 / 0.06), 0 1px 2px oklch(0.28 0.06 262 / 0.05), 0 6px 18px -8px oklch(0.28 0.06 262 / 0.16);
  --shadow-2: 0 0 0 1px oklch(0.28 0.06 262 / 0.07), 0 2px 4px oklch(0.28 0.06 262 / 0.06), 0 18px 40px -16px oklch(0.28 0.06 262 / 0.30);

  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-2xs: 0.6875rem; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem;
  --t-prose: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-h3: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  --t-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --t-h1: clamp(2rem, 1.3rem + 2.6vw, 3.375rem);

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem;
  --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --gutter: clamp(1rem, 0.55rem + 2vw, 2.5rem);
  --section: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  --measure: 68ch;
  --wrap: 76rem;
  --head-h: 3.75rem;
  --r-surface: 20px; --r-tile: 12px; --r-tile-sm: 8px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-ui: 200ms; --dur-press: 140ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + var(--s-4))}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-display);font-size:var(--t-base);line-height:1.5;
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.08;letter-spacing:-0.02em;text-wrap:balance}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-top:var(--section)}
.eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dek{font-family:var(--font-text);font-size:var(--t-prose);line-height:1.55;color:var(--ink-2);max-width:var(--measure)}
.meta{font-size:var(--t-xs);color:var(--muted)}
.surface{background:var(--surface);border-radius:var(--r-surface);box-shadow:var(--shadow-1)}
.feature{background:var(--feature);color:var(--on-feature);border-radius:var(--r-surface)}

/* Compliance strip + header */
.compliance{background:var(--feature);color:var(--on-feature-2);font-size:var(--t-xs)}
.compliance .wrap{display:flex;justify-content:space-between;gap:var(--s-4);padding-block:var(--s-2);flex-wrap:wrap}
.compliance strong{color:var(--on-feature);font-weight:750}
.compliance a{color:var(--on-feature);text-underline-offset:.18em}
.site-head{position:sticky;top:0;z-index:10;background:var(--surface);box-shadow:0 1px 0 var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);height:var(--head-h)}
.brand img{height:2.5rem;width:auto}
.brand{display:flex;align-items:center;gap:var(--s-2);text-decoration:none;font-weight:800;font-size:1.1875rem;letter-spacing:-.015em;white-space:nowrap}
.brand-mark{width:1.75rem;height:1.75rem;border-radius:8px;background:var(--feature);display:grid;place-items:center;color:var(--on-feature)}
.brand-mark svg{width:1.05rem;height:1.05rem}
.brand b{color:var(--brand)}
.nav{display:flex;align-items:center;gap:var(--s-1)}
.nav a{font-size:var(--t-sm);font-weight:600;text-decoration:none;white-space:nowrap;padding:.5rem .75rem;border-radius:var(--r-pill);transition:background-color var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .nav a:hover{background:var(--surface-2)} }
.nav a[aria-current="page"]{background:var(--surface-2)}
@media (max-width: 56rem){ .nav a:not(.nav-key){display:none} .nav a.nav-key{background:var(--surface-2)} }

/* Breadcrumbs */
.crumbs{padding-top:var(--s-5)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none;font-size:var(--t-xs);color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:var(--s-2);color:var(--line-strong)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* Article header */
.page-head{display:grid;gap:var(--s-4);padding-block:var(--s-5) var(--s-8);max-width:52rem}
.page-head h1{font-size:var(--t-h1)}
.byline{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--t-sm);color:var(--ink-2);align-items:center}
.byline strong{color:var(--ink)}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--line-strong)}

/* Article layout: prose + sticky TOC */
.article{display:grid;gap:var(--s-10);grid-template-columns:minmax(0,1fr);padding-bottom:var(--section)}
@media (min-width: 64rem){ .article{grid-template-columns:minmax(0,1fr) 16rem;align-items:start} }
.toc{position:sticky;top:calc(var(--head-h) + var(--s-6));display:grid;gap:var(--s-2);padding:var(--s-5);font-size:var(--t-sm)}
.toc summary{cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
@media (max-width: 63.99rem){ .toc summary::after{content:" +";} .toc[open] summary::after{content:" −";} }
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.toc a{display:block;padding:.35rem .6rem;border-radius:var(--r-tile-sm);text-decoration:none;color:var(--ink-2);font-weight:600;line-height:1.3}
.toc a:hover{background:var(--surface-2);color:var(--ink)}
@media (max-width: 63.99rem){ .toc{position:static;order:-1} }

/* Prose */
.prose{display:grid;gap:var(--s-5);max-width:var(--measure);min-width:0}
.prose > *{margin:0}
.prose h2{font-size:var(--t-h2);margin-top:var(--s-8)}
.prose h3{font-size:var(--t-h3);margin-top:var(--s-4)}
.prose p,.prose li{font-family:var(--font-text);font-size:var(--t-prose);line-height:1.68}
.prose ul,.prose ol:not(.steps){padding-left:1.25rem;display:grid;gap:var(--s-2)}
.prose ul li::marker{color:var(--brand)}
.prose a{text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--brand);font-weight:550}
.prose strong{font-weight:650}
.prose figure{display:grid;gap:var(--s-2)}
.prose figcaption{font-size:var(--t-xs);color:var(--muted)}

/* Quick answer (GEO / featured snippet) */
.qa{padding:var(--s-5) var(--s-6);border-radius:var(--r-tile);background:var(--brand-wash);box-shadow:inset 0 0 0 1px oklch(0.80 0.06 55 / .55)}
.qa p{font-size:var(--t-prose);line-height:1.6}
.qa strong:first-child{color:oklch(0.42 0.12 45)}

/* Callouts */
.note,.warn,.tip{padding:var(--s-4) var(--s-5);border-radius:var(--r-tile);display:grid;gap:var(--s-2)}
.note{background:var(--data-wash)}
.warn{background:var(--warn-wash)}
.tip{background:var(--ok-wash)}
.note p,.warn p,.tip p{font-size:1rem !important;line-height:1.6 !important}
.warn strong:first-child{color:var(--warn)}

/* Key facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--s-2);margin:0}
.facts div{padding:var(--s-3) var(--s-4);border-radius:var(--r-tile);background:var(--surface);box-shadow:var(--shadow-1);display:grid;gap:.15rem}
.facts dt{font-size:var(--t-xs);color:var(--muted);font-weight:600}
.facts dd{margin:0;font-weight:750;font-size:1.0625rem;line-height:1.3}

/* Tables */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-tile);box-shadow:var(--shadow-1);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-family:var(--font-text);font-size:.9375rem;min-width:32rem}
.tbl th{text-align:left;font-family:var(--font-display);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2);padding:.7rem .9rem}
.tbl td{padding:.75rem .9rem;border-top:1px solid var(--line);vertical-align:top;line-height:1.5}
.tbl td:first-child{font-weight:650}

/* Steps */
.steps{list-style:none;padding:0;display:grid;gap:var(--s-3);counter-reset:st}
.steps li{counter-increment:st;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:var(--s-3);align-items:start;padding:var(--s-4);border-radius:var(--r-tile);background:var(--surface);box-shadow:var(--shadow-1)}
.steps li::before{content:counter(st);display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--feature);color:var(--on-feature);font-family:var(--font-display);font-weight:800}

/* Pros / cons */
.procon{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.procon > div{padding:var(--s-5);border-radius:var(--r-tile);display:grid;gap:var(--s-2);align-content:start}
.procon .pro{background:var(--ok-wash)} .procon .con{background:var(--warn-wash)}
.procon h3{font-size:1.0625rem;margin:0}
.procon ul{margin:0}

/* FAQ */
.faq{display:grid;border-radius:var(--r-tile);background:var(--surface);box-shadow:var(--shadow-1)}
.faq details + details{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--s-5);font-weight:750;font-size:1.0625rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);transition:transform var(--dur-ui) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > *:not(summary){padding:0 var(--s-5) var(--s-4)}
.faq p{font-family:var(--font-text);font-size:1rem;line-height:1.6;color:var(--ink-2)}

/* Casino slots (placeholders until casinos are added) */
.slots{display:grid;gap:var(--s-3)}
.slot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-4);align-items:center;padding:var(--s-4) var(--s-5);border-radius:var(--r-surface)}
.slot--empty{border:1.5px dashed var(--line-strong);background:transparent}
.slot .rank{font-weight:850;font-size:1.5rem;color:var(--muted);width:1.5ch;text-align:center}
.slot .logo{width:4.5rem;height:3.25rem;border-radius:var(--r-tile);background:var(--surface-2);display:grid;place-items:center;color:var(--muted);font-size:var(--t-2xs);text-align:center;line-height:1.2}
.slot .who{display:grid;gap:.2rem;min-width:0}
.slot .who b{font-size:1.0625rem}
.slot .who span{font-size:var(--t-sm);color:var(--muted)}
.slot .act{font-size:var(--t-xs);color:var(--muted);font-weight:650;text-align:right}
.slot--filled{background:var(--surface);box-shadow:var(--shadow-1)}
.btn-go{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.6rem 1.1rem;background:var(--go);color:var(--on-go);font-weight:750;text-decoration:none;border-radius:var(--r-tile);white-space:nowrap}
.btn-sec{display:inline-flex;align-items:center;min-height:2.75rem;padding:.6rem 1rem;border-radius:var(--r-tile);background:var(--surface-2);font-weight:700;text-decoration:none;white-space:nowrap}
.slots-foot{font-size:var(--t-xs);color:var(--muted)}
@media (max-width: 36rem){
  .slot{grid-template-columns:auto minmax(0,1fr)}
  .slot .act{grid-column:1 / -1;text-align:left}
}

/* Home */
.hero{display:grid;gap:var(--s-8);padding-block:var(--s-10) var(--s-6)}
@media (min-width: 64rem){ .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start} }
.hero h1{font-size:var(--t-h1)}
.hero-copy{display:grid;gap:var(--s-5);align-content:start}
.trust{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-1);font-size:var(--t-xs);font-weight:650;color:var(--ink-2)}
.chip svg{width:.9rem;height:.9rem;color:var(--ok)}
.hero-panel{padding:var(--s-6);display:grid;gap:var(--s-4)}
.hero-panel h2{font-size:1.25rem}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.checklist li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:var(--s-3);font-family:var(--font-text);line-height:1.5}
.checklist li::before{content:"";width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ok-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237a4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/0.85rem no-repeat}
.section-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-6);max-width:46rem}
.section-head h2{font-size:var(--t-h2)}
.grid-cards{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.card{display:grid;gap:var(--s-2);padding:var(--s-5);text-decoration:none;align-content:start;transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)} }
.card .k{font-size:var(--t-xs);font-weight:700;color:var(--brand);letter-spacing:.04em;text-transform:uppercase}
.card b{font-size:1.125rem;line-height:1.25}
.card span{font-family:var(--font-text);font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.method{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));counter-reset:m}
.method li{list-style:none;padding:var(--s-5);display:grid;gap:var(--s-2);counter-increment:m;align-content:start}
.method li::before{content:"0" counter(m);font-weight:850;font-size:1.75rem;color:var(--brand);line-height:1}
.method b{font-size:1.0625rem}
.method p{font-family:var(--font-text);font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);margin:0}
.home-prose{padding:var(--s-8) var(--s-6)}
@media (min-width: 48rem){ .home-prose{padding:var(--s-12)} }

/* Safer gambling panel */
.rg{padding-block:var(--section)}
.rg-panel{display:grid;gap:var(--s-8);padding:clamp(1.5rem, .8rem + 3vw, 3.5rem)}
@media (min-width: 64rem){ .rg-panel{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:var(--s-16)} }
.rg h2{font-size:var(--t-h2);max-width:18ch}
.rg p{font-family:var(--font-text);font-size:var(--t-prose);line-height:1.55;color:var(--on-feature-2);max-width:48ch;margin:0}
.rg-intro{display:grid;gap:var(--s-4)}
.rg-intro .eyebrow{color:var(--on-feature-2)}
.rg-lines{display:grid;gap:var(--s-3)}
@media (min-width: 40rem){ .rg-lines{grid-template-columns:1fr 1fr} .rg-line--call{grid-column:1 / -1} }
.rg-line{display:grid;gap:var(--s-1);padding:var(--s-5);border-radius:var(--r-tile);background:var(--feature-2);text-decoration:none}
.rg-line .who{font-size:var(--t-sm);font-weight:650;color:var(--on-feature-2)}
.rg-line .what{font-size:1.0625rem;font-weight:750;color:var(--on-feature)}
.rg-line--call .what{font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);font-weight:800;line-height:1}
.rg-line .note{background:none;padding:0;font-size:var(--t-sm);color:var(--on-feature-2)}
.rg :focus-visible{outline-color:var(--on-feature)}

/* Related */
.related{display:grid;gap:var(--s-3)}
.related h2{font-size:var(--t-h3)}

/* Review template specifics */
.rv-head{display:grid;gap:var(--s-6);padding-block:var(--s-5) var(--s-8)}
@media (min-width: 64rem){ .rv-head{grid-template-columns:minmax(0,1fr) 22rem;align-items:start} }
.rv-card{padding:var(--s-6);display:grid;gap:var(--s-4)}
.rv-logo{height:5rem;border-radius:var(--r-tile);border:1.5px dashed var(--line-strong);display:grid;place-items:center;color:var(--muted);font-size:var(--t-sm)}
.score{display:flex;align-items:baseline;gap:var(--s-2)}
.score b{font-size:2.5rem;font-weight:850;line-height:1}
.ph{background:oklch(0.93 0.06 95);color:oklch(0.35 0.08 80);border-radius:4px;padding:0 .3em;font-weight:650;font-family:var(--font-display);font-size:.92em;white-space:nowrap}
.draft-banner{background:oklch(0.93 0.06 95);color:oklch(0.30 0.07 80);font-size:var(--t-sm);text-align:center;padding:var(--s-2) var(--gutter);font-weight:600}

/* Footer */
.site-foot{padding-block:var(--s-12) var(--s-16);font-size:var(--t-sm);color:var(--ink-2);border-top:1px solid var(--line);background:var(--surface)}
.foot-grid{display:grid;gap:var(--s-8);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.foot-col{display:grid;gap:var(--s-2);align-content:start}
.foot-col b{font-size:var(--t-sm);color:var(--ink)}
.foot-col a{text-decoration:none;color:var(--ink-2)}
.foot-col a:hover{text-decoration:underline}
.foot-legal{margin-top:var(--s-10);display:grid;gap:var(--s-2);font-size:var(--t-xs);color:var(--muted);max-width:90ch}
.foot-legal strong{color:var(--ink)}

/* =====================================================================
   UK-model content layout (same order as ukverifiedcasinos.uk guides)
   ===================================================================== */
.uk-flow{display:grid;gap:var(--s-6);max-width:52rem;padding-bottom:var(--section)}
.uk-flow .toc{position:static}
.uk-flow .prose{max-width:none}
.topbox{padding:var(--s-5) var(--s-6);display:grid;gap:var(--s-3)}
.tb-title{margin:0;font-weight:800;font-size:1.0625rem}
.tb-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.tb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-radius:var(--r-tile);background:var(--surface-2)}
.tb-row--empty{background:transparent;border:1.5px dashed var(--line-strong)}
.tb-rank{font-weight:850;font-size:1.25rem;color:var(--muted);width:1.25ch;text-align:center}
.tb-name{display:grid;gap:.1rem;min-width:0}
.tb-name small{font-size:var(--t-xs);color:var(--muted)}
.tb-wait{font-size:var(--t-xs);color:var(--muted);font-weight:650}
.tb-terms{margin:0;font-size:var(--t-xs);color:var(--muted)}
@media (max-width: 30rem){ .tb-row{grid-template-columns:auto minmax(0,1fr)} .tb-row .btn-go,.tb-wait{grid-column:1 / -1} }
.verdict{border-radius:var(--r-tile);background:var(--feature);color:var(--on-feature);padding:var(--s-5) var(--s-6);display:grid;gap:0}
.vd-title{margin:0 0 var(--s-2);font-weight:800;font-size:1.0625rem}
.vd-row{display:grid;grid-template-columns:minmax(8rem,.8fr) minmax(0,1.2fr);gap:var(--s-4);padding:var(--s-3) 0;border-top:1px solid var(--feature-line);font-family:var(--font-text);font-size:.9375rem;line-height:1.45}
.vd-label{color:var(--on-feature-2)}
.vd-val{font-weight:650}
@media (max-width: 30rem){ .vd-row{grid-template-columns:1fr;gap:.15rem} }
.cta-strip{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.related-reviews{display:grid;gap:var(--s-4)}
.rr-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.rr{display:grid;gap:.2rem;padding:var(--s-4) var(--s-5);border-radius:var(--r-tile);text-decoration:none}
.rr span{font-size:var(--t-sm);color:var(--muted);font-family:var(--font-text)}
.rr--empty{border:1.5px dashed var(--line-strong)}
.prose .refs{font-size:.9375rem}
.prose .refs li{font-size:.9375rem;line-height:1.5}
.ph-cell{color:var(--muted);font-style:italic}
.prose figure.ig{margin:var(--s-2) 0}
.prose figure.ig img{width:100%;height:auto;border-radius:var(--r-tile);box-shadow:var(--shadow-1)}

/* ===== UK-site header: light "Updated" strip + flat menu with dropdowns (copied from ukvc B2 skin) ===== */
.topstrip{background:var(--bg);border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-2)}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding-block:.45rem;flex-wrap:wrap}
.topstrip .pill{display:inline-block;background:var(--surface-2);color:var(--ink);font-weight:750;border-radius:var(--r-pill);padding:.15rem .6rem;margin-right:.35rem}
.topstrip a{color:var(--ink);text-underline-offset:.18em;text-decoration-color:var(--line-strong)}
.nav .menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav .menu > li{position:relative}
.nav .menu > li > a{display:flex;align-items:center;gap:3px;font-size:var(--t-sm);font-weight:600;text-decoration:none;white-space:nowrap;padding:.5rem .7rem;border-radius:var(--r-pill);transition:background-color var(--dur-ui) var(--ease-out)}
.nav .menu > li > a:hover,.nav .menu > li > a[aria-current]{background:var(--surface-2)}
.nav .caret{font-size:.65rem;color:var(--muted)}
.nav .sub{position:absolute;top:calc(100% + 4px);left:0;min-width:15rem;list-style:none;margin:0;padding:.375rem;background:var(--surface);border-radius:var(--r-tile);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),visibility 0s linear var(--dur-ui);z-index:20}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .sub a{display:block;padding:.5rem .75rem;border-radius:var(--r-tile-sm);font-family:var(--font-text);font-size:var(--t-sm);font-weight:500;text-decoration:none;color:var(--ink)}
.nav .sub a:hover{background:var(--surface-2)}
@media (max-width: 68rem){ .nav .menu > li:not(:last-child){display:none} }
/* featured image directly under the byline, like the UK guides */
.uk-flow > figure.ig{margin:0}
.uk-flow > figure.ig img{width:100%;height:auto;border-radius:var(--r-surface);box-shadow:var(--shadow-1)}

/* casino-factory: author avatar + brand mascot tip */
.avatar{border-radius:50%;object-fit:cover;flex:none}
.avatar--initials{display:inline-grid;place-items:center;background:var(--navy,#1d2550);color:#fff;font-weight:800;font-size:1.6rem;letter-spacing:.02em}
.author-card{display:flex;gap:1rem;align-items:flex-start}.author-card p{margin:0}
.mascot-tip{display:flex;gap:.9rem;align-items:flex-start;border:1px solid rgba(0,0,0,.08);border-left:4px solid var(--orange,#e07a3c);border-radius:12px;padding:.9rem 1rem;margin:1.4rem 0;background:rgba(224,122,60,.06)}
.mascot-tip img{flex:none;border-radius:10px}.mascot-tip b{display:block;margin-bottom:.2rem}.mascot-tip p{margin:0}

/* homepage hero photo (<!--HERO_PHOTO-->): keep the grid column and the image inside the viewport */
.hero > * { min-width: 0; }
.hero figure.ig { margin: 0; }
.hero figure.ig img { display: block; width: 100%; height: auto; border-radius: var(--r-surface, 14px); box-shadow: var(--shadow-1, none); }
figure.ig img { max-width: 100%; height: auto; }

/* Empty spots = "payout test in progress" (animated): deposit -> play -> withdrawal, live pill, rotating timer.
   Each spot runs the same 6s loop with its own phase (--d), so the list looks like several tests at different stages. */
.slot--empty{position:relative;overflow:hidden;background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow-1)}
.slot--empty::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in oklch,var(--brand) 9%,transparent) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;pointer-events:none}
.slot--empty .who{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-3);align-items:center}
.slot--empty .who .tst-ico{grid-row:span 2}
.slot--empty .who .ts{grid-column:1 / -1}
.tst-ico{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:color-mix(in oklch,var(--brand) 12%,var(--surface));color:var(--brand)}
.tst-ico svg{display:block}
.tst-arc{transform-origin:24px 24px}
.ts{list-style:none;margin:.55rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,auto) minmax(0,1fr);align-items:center;gap:.35rem .9rem;font-size:var(--t-2xs);font-weight:700;color:var(--muted);letter-spacing:.02em}
.ts-step{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.ts-step i{width:.6rem;height:.6rem;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);flex:none}
.ts-bar{grid-column:1 / -1;height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.ts-bar span{display:block;height:100%;width:100%;border-radius:inherit;transform-origin:left;transform:scaleX(.66);
  background:repeating-linear-gradient(45deg,var(--brand) 0 8px,color-mix(in oklch,var(--brand) 70%,white) 8px 16px);background-size:22.6px 22.6px}
.live-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border-radius:999px;background:var(--ok-wash);color:var(--ok);font-size:var(--t-2xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.live-pill i{position:relative;width:.5rem;height:.5rem;border-radius:50%;background:var(--ok)}
.live-pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);opacity:0}
.tb-row--empty{background:var(--surface);border:1.5px solid var(--line)}
.tb-row--empty .ts{margin-top:.3rem}
.ts-step--2 i{border-color:var(--line-strong)}
@media (prefers-reduced-motion: no-preference){
  .slot--empty::before{animation:ts-sheen 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
  .tst-arc{animation:ts-spin 1.6s linear infinite}
  .ts-bar span{animation:ts-fill 6s cubic-bezier(.6,0,.3,1) infinite,ts-stripes .8s linear infinite;animation-delay:var(--d,0s),0s}
  .ts-step--0 i{animation:ts-dot0 6s infinite;animation-delay:var(--d,0s)}
  .ts-step--1 i{animation:ts-dot1 6s infinite;animation-delay:var(--d,0s)}
  .ts-step--2 i{animation:ts-dot2 6s infinite;animation-delay:var(--d,0s)}
  .live-pill i::after{animation:ts-ping 1.6s ease-out infinite}
}
@media (prefers-reduced-motion: reduce){ .ts-step--0 i,.ts-step--1 i{background:var(--brand);border-color:var(--brand)} }
@keyframes ts-sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
@keyframes ts-spin{to{transform:rotate(360deg)}}
@keyframes ts-stripes{to{background-position:22.6px 0}}
@keyframes ts-fill{0%{transform:scaleX(.04)}30%{transform:scaleX(.34)}60%{transform:scaleX(.67)}88%,100%{transform:scaleX(1)}}
@keyframes ts-dot0{0%,4%{background:var(--surface);border-color:var(--line-strong)}10%,100%{background:var(--brand);border-color:var(--brand)}}
@keyframes ts-dot1{0%,34%{background:var(--surface);border-color:var(--line-strong)}40%,100%{background:var(--brand);border-color:var(--brand)}}
@keyframes ts-dot2{0%,64%{background:var(--surface);border-color:var(--line-strong);box-shadow:none}70%{box-shadow:0 0 0 0 color-mix(in oklch,var(--ok) 50%,transparent)}88%,100%{background:var(--ok);border-color:var(--ok);box-shadow:0 0 0 6px transparent}}
@keyframes ts-ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}}
@media (max-width: 36rem){ .slot--empty .act{text-align:left} .ts{grid-template-columns:repeat(3,auto)} }

/* market theme */
/* AU · Aussie Casino Verdict — eucalyptus + wattle gold, editorial serif (not the NL/UK navy+orange Bricolage look) */
:root{
  --bg:          oklch(0.972 0.008 150);
  --surface:     oklch(0.995 0.004 120);
  --surface-2:   oklch(0.950 0.014 160);
  --surface-3:   oklch(0.920 0.020 165);
  --ink:         oklch(0.255 0.040 180);
  --ink-2:       oklch(0.395 0.030 180);
  --muted:       oklch(0.500 0.022 175);
  --line:        oklch(0.900 0.014 165);
  --line-strong: oklch(0.800 0.022 170);
  --feature:     oklch(0.285 0.052 178);
  --feature-2:   oklch(0.345 0.056 178);
  --on-feature:  oklch(0.975 0.010 120);
  --on-feature-2:oklch(0.850 0.030 160);
  --feature-line:oklch(0.420 0.050 178);
  --brand:       oklch(0.470 0.090 172);
  --brand-wash:  oklch(0.955 0.040 92);
  --go:          oklch(0.780 0.150 80);
  --on-go:       oklch(0.250 0.050 70);
  --focus:       oklch(0.470 0.090 172);
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-surface: 14px; --r-tile: 10px;
}
body{font-family:var(--font-text)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-0.012em;line-height:1.12}
.page-head h1,.hero h1{font-weight:750}
.brand img{height:2.6rem}
.qa{box-shadow:inset 4px 0 0 var(--go), inset 0 0 0 1px oklch(0.85 0.06 85 / .6)}
.qa strong:first-child{color:oklch(0.42 0.09 172)}
.btn-go{box-shadow:0 1px 0 oklch(0.62 0.13 75) inset, 0 -2px 0 oklch(0.66 0.14 72) inset;font-family:var(--font-text);letter-spacing:.01em}
.btn-go:hover{filter:brightness(1.04)}
.facts div{border-top:3px solid var(--go)}
.verdict{background:linear-gradient(160deg,var(--feature),oklch(0.24 0.045 182))}
.vd-title{color:oklch(0.85 0.13 85)}
.toc a{font-family:var(--font-text)}
.method li::before{font-family:var(--font-display);color:var(--brand)}
.topstrip{background:var(--feature);color:var(--on-feature-2);border-bottom:0}
.topstrip .pill{background:var(--go);color:var(--on-go)}
.topstrip a{color:var(--on-feature)}
.card .k{color:oklch(0.50 0.10 75)}
.card b{font-family:var(--font-display)}
.avatar--initials{background:var(--feature)}
.tbl th{font-family:var(--font-text)}
/* mobile: keep the whole menu reachable as a swipeable row instead of hiding it */
@media (max-width: 68rem){
  .site-head .wrap{height:auto;flex-wrap:wrap;gap:var(--s-2);padding-block:var(--s-2)}
  .nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav .menu > li:not(:last-child){display:block}
  .nav .menu > li > a{background:var(--surface-2)}
  .nav .caret,.nav .sub{display:none}
}

