@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/young-serif-400-latin.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:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/public-sans-var-latin.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:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-mono-400-latin.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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-mono-500-latin.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}
:root{color-scheme:light;--paper:#ffffff;--ink:#24211e;--muted:#6a655e;--link:#3771b3;--rule:#e2dfd9;--surface:#ffffff;--tint:#f6f5f2;--head-bg:#ffffff;--head-ink:#24211e;--head-mark:#c2186f;--foot-bg:#24211e;--foot-ink:#ffffff;--accent:#24211e;--accent-ink:#ffffff;--badge-bg:#3771b3;--badge-ink:#ffffff;--head-rule:#e2dfd9;--foot-rule:#6a655e;--tile-bg:#f6f5f2;--tile-ink:#24211e;--focus:#3771b3;--tint-rule:#e2dfd9;--status-bg:#24211e;--status-ink:#ffffff;--warn-bg:#f6f5f2;--warn-ink:#24211e;--ok-bg:#f6f5f2;--ok-ink:#24211e;--claim-bg:#f6f5f2;--claim-ink:#24211e;--display:"Young Serif", "Iowan Old Style", Georgia, serif;--body:"Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;--ui:"Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;--mono:"DM Mono", ui-monospace, Menlo, Consolas, monospace;--radius:4px;--display-weight:400}
/* Shared base for every content site. Every colour is a role variable from the site's own tokens (theme.mjs);
   nothing here is a brand value. Owner defaults (29 and 30 September 2026): one full-width rectangular header,
   fixed at the top while the page scrolls, every page reachable from it, no pill or circle shapes around the logo
   or links; a calm hero; on phones the at-a-glance grid first, one card per row, card contents centred, wagering
   and first deposit on one line, the rating badge top right of the card; the comparison table kept under the grid;
   running paragraphs justified with hyphens at every width (owner, 2 October); all text visible at load, so nothing
   waits for a scroll or a timer (the questions fold, the first open, with every answer in the HTML: owner, 2 October). */
:root{--max:1180px;--read:42rem;--gutter:clamp(16px,4vw,40px);--head-h:64px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--body);overflow-wrap:break-word;font-variant-numeric:lining-nums}
img,svg{max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:var(--display-weight);color:var(--ink);line-height:1.12;letter-spacing:-.012em;text-wrap:balance;overflow-wrap:normal}
h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.02em}
h2{font-size:clamp(24px,2.5vw,32px);margin:0 0 .6em}
h3{font-size:clamp(19px,1.5vw,21px);line-height:1.25;margin:0 0 .4em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
li{margin:0 0 .35em}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.label,.kicker{display:block;font:600 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.meta{font:500 13.5px/1.5 var(--mono);color:var(--muted)}

/* Header: one straight band, fixed at the top on every page and screen size (D1's r7 header for sistersite.nz,
   30 September, with the site's own colours). The logo links home; the main pages sit in the bar and every other
   page opens from "More"; below 1024px a Menu button opens every link. Both menus are details/summary, so they work
   without JavaScript and every link is in the HTML. The current page and the one under the pointer carry a rule on
   the band's bottom edge; nothing is drawn as a pill or a circle. */
.site-head{position:sticky;top:0;z-index:40;background:var(--head-bg);color:var(--head-ink);border-bottom:1px solid var(--head-rule)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:calc(var(--max) + 2 * var(--gutter));height:var(--head-h);margin:0 auto;padding:0 var(--gutter)}
.head-logo{flex:none;display:flex;align-items:center;gap:.4em;min-height:44px;color:var(--head-ink);text-decoration:none;font:var(--display-weight) 25px/1 var(--display);letter-spacing:-.02em}
.wm-svg{display:block;width:auto;height:30px}.wm-mark{display:block;flex:none;width:auto;height:1.15em}
.head-nav>ul{display:flex;align-items:stretch;margin:0 calc(-1 * clamp(9px,1vw,14px)) 0 0;padding:0;list-style:none}
.head-nav li{margin:0}
.head-nav>ul>li>a,.nav-more>details>summary{position:relative;display:block;height:var(--head-h);padding:0 clamp(9px,1vw,14px);color:var(--head-ink);font:600 15px/var(--head-h) var(--ui);text-decoration:none;white-space:nowrap;cursor:pointer}
.head-nav>ul>li>a::after,.nav-more>details>summary::after{content:"";position:absolute;left:clamp(9px,1vw,14px);right:clamp(9px,1vw,14px);bottom:0;height:3px;background:var(--head-mark);scale:0 1;transition:scale .18s ease-out}
.head-nav>ul>li>a:hover::after,.nav-more>details>summary:hover::after,.head-nav>ul>li>a[aria-current]::after,.nav-more>details>summary[data-current]::after,.nav-more>details[open]>summary::after{scale:1 1}
.menu>summary{list-style:none}.menu>summary::-webkit-details-marker{display:none}
.head-nav :focus-visible,.head-menu :focus-visible{outline-offset:-3px}
.chev{display:inline-block;vertical-align:middle;margin:-2px 0 0 6px;transition:rotate .18s ease-out}
.menu[open] .chev{rotate:180deg}
.nav-more{position:relative}
.nav-more ul{position:absolute;top:100%;right:clamp(9px,1vw,14px);min-width:260px;max-width:360px;max-height:calc(100vh - var(--head-h) - 16px);overflow:auto;margin:0;padding:6px 0;list-style:none;background:var(--head-bg);border:1px solid var(--head-rule);border-top:0}
.nav-more ul li+li{border-top:1px solid var(--head-rule)}
.nav-more ul a{display:block;padding:11px 18px;color:var(--head-ink);font:500 15px/1.35 var(--ui);text-decoration:none}
.nav-more ul a:hover,.nav-more ul a[aria-current],.head-menu a[aria-current]{text-decoration:underline;text-decoration-color:var(--head-mark);text-decoration-thickness:3px;text-underline-offset:5px}
.head-menu{display:none}
.head-menu>summary{display:flex;align-items:center;gap:12px;height:44px;cursor:pointer;color:var(--head-ink);font:600 15px/1 var(--ui)}
.menu-i{position:relative;display:inline-block;width:44px;height:44px;background:var(--accent)}
.menu-i i,.menu-i::before,.menu-i::after{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--accent-ink);transition:rotate .18s ease-out,translate .18s ease-out,opacity .15s}
.menu-i::before{top:15px}.menu-i i{top:21px}.menu-i::after{top:27px}
.head-menu[open] .menu-i::before{translate:0 6px;rotate:45deg}.head-menu[open] .menu-i::after{translate:0 -6px;rotate:-45deg}.head-menu[open] .menu-i i{opacity:0}
.head-menu>nav{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--head-h));max-height:calc(100dvh - var(--head-h));overflow:auto;overscroll-behavior:contain;background:var(--head-bg);border-bottom:1px solid var(--head-rule)}
.head-menu ul{margin:0;padding:4px 0 12px;list-style:none}
.head-menu li{margin:0}
.head-menu li+li{border-top:1px solid var(--head-rule)}
.head-menu li a{display:block;padding:14px var(--gutter);color:var(--head-ink);font:600 17px/1.3 var(--ui);text-decoration:none}
.head-menu li.minor a{padding-top:11px;padding-bottom:11px;font-size:15.5px;font-weight:500}
.head-menu li:not(.minor)+li.minor{border-top-width:3px}

/* Calm hero: title, one sentence and the facts line on the page ground; no art, no motion */
.page-hero{padding:clamp(34px,5vw,64px) 0 clamp(26px,3.4vw,40px);border-bottom:1px solid var(--rule)}
.page-hero .kicker{margin:0 0 14px}
.page-hero h1{max-width:24ch}
.page-hero .lead{max-width:40em;margin:18px 0 0;font-size:clamp(18px,1.5vw,20px);line-height:1.55}
.page-hero .meta{margin:16px 0 0}
.page-hero .byline{margin:18px 0 0;font:600 15px/1.45 var(--ui)}
.page-hero .testing{max-width:44em;margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.sec{padding:clamp(34px,4.4vw,56px) 0}
.sec+.sec,.sec+.review-list{border-top:1px solid var(--rule)}
.prose{max-width:var(--read)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* Running paragraphs justified with hyphens at every width (owner, 29 September: "Not everywhere but mostly";
   2 October: "Wherever possible make the pharagraphs in justify format if it not in a casino box or somewhere where
   it needs to be in middle or on the right. Check on all pages"): the reading text, the leads, the review notes, the
   picks and the questions. Headings, cards, tables, lists, captions, buttons, centred heroes and the footer keep
   their own alignment. */
.justify :is(.prose,.doc-sec,.review-body,.md-body,.panel,.lead-text,.faq-item,.author-box div,.home-copy,.hub-hero .wrap,.doc-hero .wrap,.review-side,.pick,.sources-sec .wrap)>p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 2}
@media (min-width:861px){.justify .case-hero p.testing{text-align:justify;-webkit-hyphens:auto;hyphens:auto}}

/* Buttons: rectangular, the accent colour */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);font:600 15px/1.2 var(--ui);text-decoration:none}
.btn:hover{text-decoration:underline;text-decoration-thickness:1px}
.btn svg{flex:none}
.page-links{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:1.2em 0 0;padding:0}
.page-links li{margin:0}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 0}
.cta .small{font-size:13px;color:var(--muted)}

/* Casino name tiles (no logo file yet) and logo tiles (a logo the site binds by checksum) */
.tile{display:flex;align-items:center;justify-content:center;width:100%;min-height:84px;padding:12px 16px;background:var(--tile-bg);color:var(--tile-ink);border-radius:var(--radius);font:var(--display-weight) 21px/1.1 var(--display);letter-spacing:-.01em;text-align:center;text-wrap:balance}
.tile img{display:block;width:100%;height:60px;max-width:var(--nat,100%);object-fit:contain}

/* The at-a-glance grid: one card per casino, contents centred, the rating badge in the top right corner,
   the offer across the card, wagering and first deposit side by side, payment methods as text */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,218px),1fr));gap:18px;margin:0;padding:0;list-style:none}
/* one to three casinos: cards keep a readable width instead of stretching across the row */
.cards:not(:has(>li:nth-child(4))){grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),340px))}
.cards>li{margin:0}
/* Balanced rows (owner, 2 October: symmetrical grids): the builder sets how many cards a row holds (kinds/parts.mjs
   balancedCols), the rows are centred, so a short last row sits in the middle instead of trailing on the left */
.cards.bal{--cols:4;--gap:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.cards.bal>li{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
.cards.bal.lg-1{--cols:1}.cards.bal.lg-2{--cols:2}.cards.bal.lg-3{--cols:3}.cards.bal.lg-4{--cols:4}
.card{position:relative;font-family:var(--ui);display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;padding:16px 16px 20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);text-align:center}
.card.current{border:2px solid var(--ink);padding:15px 15px 19px}
.card .badge+.tile{padding-left:50px;padding-right:50px}
.card h3{margin:0;font-size:20px}
.card h3 a{color:inherit}
.card .blurb{margin:0;font-size:15.5px;line-height:1.5}
.card .note{margin:0;font-size:14px;color:var(--muted)}
.card dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;width:100%;margin:0}
.card dl>div{min-width:0}
.card .f-wide{grid-column:1/-1}
.card dt{font:600 11.5px/1.3 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.card dd{margin:3px 0 0;font:600 15.5px/1.35 var(--ui)}
.badge{position:absolute;top:10px;right:10px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;min-height:54px;padding:6px 8px;background:var(--badge-bg);color:var(--badge-ink);border-radius:var(--radius);text-align:center}
.badge small{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.badge b{display:block;margin-top:3px;font:var(--display-weight) 21px/1 var(--display);font-variant-numeric:tabular-nums}
.pay{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:4px 0 0;padding:0;list-style:none}
.pay li{margin:0;padding:3px 8px;background:var(--tint);border-radius:var(--radius);font:600 12.5px/1.35 var(--ui);color:var(--ink)}
.pay li.more-n{flex-basis:100%;padding:2px 0 0;background:none;color:var(--muted)}
.after-cards{max-width:var(--read);margin:22px 0}

/* Tables: horizontal scroll inside their box on small screens, the casino column stays in view */
.tablewrap{overflow-x:auto;margin:0 0 1.4em;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--ui);overflow-wrap:normal}
.tablewrap table{min-width:720px}
.tablewrap.narrow table{min-width:0}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
thead th{background:var(--tint);color:var(--ink);font:600 12px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase}
tbody th{font-weight:700;background:var(--surface)}
tbody tr:last-child>*{border-bottom:0}
.tablewrap tbody th{position:sticky;left:0}
.tablewrap thead th:first-child{position:sticky;left:0;z-index:1}
td .btn{min-height:38px;padding:8px 12px;font-size:14px;white-space:nowrap}

/* On this page */
.toc{padding:18px 22px;background:var(--tint);border-radius:var(--radius)}
.toc ol{margin:10px 0 0;padding-left:1.3em;columns:2 17em;column-gap:36px;font:500 15px/1.4 var(--ui)}
.toc li{break-inside:avoid;margin:0 0 7px}
.toc li::marker,.doc-toc li::marker{font-variant-numeric:normal}
.toc ol.own-numbers{list-style:none;padding-left:0}

/* Sister reviews */
.review{padding:clamp(26px,3vw,38px) 0 0}
.review+.review{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--rule)}
.review-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;margin:0 0 16px}
.review-head .tile{width:150px;min-height:64px;padding:8px 10px;font-size:18px}
.review-head h3{margin:0;font-size:clamp(22px,2vw,26px)}
.review-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.review-body{max-width:var(--read)}
.rating{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.rating .badge{position:static;flex:none}
.rating .val{margin:0;font:600 16px/1.35 var(--ui)}
.why{margin:0 0 12px;font:400 15px/1.5 var(--ui);color:var(--muted)}
.tags-h{margin:14px 0 6px;font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tags{margin:0;padding-left:1.1em;font-size:15.5px;line-height:1.45}
.suits{margin:1em 0 0;padding-left:14px;border-left:3px solid var(--accent);font-weight:600}
.entries{margin:0;padding:0;list-style:none}
.entries li{margin:0;padding:12px 0;border-top:1px solid var(--rule)}
.entries li b{display:block}

/* Help services */
.help-links{display:grid;gap:10px;max-width:34em;margin:1em 0 0;padding:0;list-style:none}
.help-links li{margin:0}
.help-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink);font:600 17px/1.3 var(--ui);text-decoration:none}
.help-links a:hover{text-decoration:underline}

/* Questions, sources, author */
.faq-item{padding:16px 0;border-top:1px solid var(--rule)}
.faq-item h3{margin:0 0 6px;font-size:19px}
.faq-item p{margin:0}
/* A question folds: the whole question line is the control, a plus that turns to a minus when open */
.faq-item>summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:44px;cursor:pointer;list-style:none}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary h3{margin:0}
.faq-item>summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.4em;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:background-size .2s cubic-bezier(.25,1,.5,1)}
.faq-item[open]>summary::after{background-size:100% 2px,2px 0}
.faq-item>summary:hover h3{text-decoration:underline;text-underline-offset:3px}
.faq-item>summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.faq-item>summary::after{transition:none}}
.sources{margin:0;padding-left:1.4em;font-size:15px;line-height:1.5}
.sources li{margin:0 0 7px}
/* Sources by home domain: the domain, then what its pages were used for, how many and when */
ul.sources:has(.src-domain){padding-left:0;list-style:none}
ul.sources:has(.src-domain) li{margin:0 0 14px}
.src-domain{display:block;font:600 16px/1.35 var(--ui);color:var(--ink)}
a.src-domain{color:var(--link)}
.src-uses{display:block;color:var(--muted)}
.read{font:400 12.5px/1.4 var(--mono);color:var(--muted);white-space:nowrap}
.author-box{display:flex;gap:18px;align-items:flex-start;max-width:var(--read);padding:20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.author-box .mark{flex:none;display:grid;place-items:center;width:54px;height:54px;background:var(--tile-bg);color:var(--tile-ink);border-radius:var(--radius);font:var(--display-weight) 19px/1 var(--display)}
.author-box p{margin:.4em 0 0;font-size:16px}
/* The author box at the bottom of the home page and the articles (owner, 2 October): the site's mark in a round
   seal, the builder's label, the name and role, the bio and the about, method and contact links */
.author-box.ab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:start;max-width:none;padding:clamp(20px,3vw,34px);border-left:4px solid var(--accent)}
.author-box .ab-mark{width:76px;height:76px;border-radius:50%;background:var(--tint);border:1px solid var(--rule);font-size:24px}
.author-box .ab-mark svg{display:block;width:44px;height:44px}
.author-box .ab-label{margin:0;font:500 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.author-box.ab .author-h{margin:.25em 0 0;font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.author-box.ab .author-h a{color:inherit}
/* a name written mid-sentence ("the Octomark research team") opens the heading with a capital, in the CSS only */
.author-box.ab .author-h::first-letter{text-transform:uppercase}
.author-box .ab-role{margin:.2em 0 0;font:500 14px/1.4 var(--ui);color:var(--muted)}
.author-box .ab-bio p{font-size:17px;line-height:1.6}
.author-box .ab-links,.author-box .page-links-plain{margin-top:14px}

/* Article: the short answer, then the grid. On phones the grid comes straight after the title block and the short
   answer follows it (owner, 29 September: "Grid first"); the order is CSS only, the HTML keeps the brief's order. */
.art{display:flex;flex-direction:column}
.lead-text{max-width:var(--read)}
.lead-text .lede{display:block;margin:0 0 .5em;text-align:left;font:var(--display-weight) clamp(21px,2vw,27px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.quick h2{margin-bottom:.8em}
.toc-strip{padding:0 0 clamp(26px,3vw,40px)}

/* Doc pages: one reading column beside an open contents list */
.doc-grid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-top:clamp(32px,4.4vw,56px);padding-bottom:clamp(32px,4.4vw,56px)}
.doc-toc{position:sticky;top:calc(var(--head-h) + 24px);max-height:calc(100vh - var(--head-h) - 48px);overflow:auto;padding:18px 20px;background:var(--tint);border-radius:var(--radius)}
.doc-toc ol{margin:10px 0 0;padding-left:1.2em;font:500 14.5px/1.4 var(--ui)}
.doc-toc li{margin:0 0 8px}
.doc-toc ol.own-numbers{list-style:none;padding-left:0}
.doc-body{min-width:0;max-width:var(--read)}
.doc-sec+.doc-sec{margin-top:clamp(34px,3.8vw,50px)}

/* Markdown pages: operator fact box and status bar, post key grid, panels, quotes, register lists */
.status-bar{background:var(--status-bg);color:var(--status-ink)}
.status-bar p{margin:0;padding:11px 0;font:700 13px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.md-body{padding:clamp(30px,4vw,48px) 0 0}
.md-body>*{max-width:var(--read)}
.md-body>h2{margin-top:clamp(30px,3.6vw,46px)}
.md-body>h3{margin-top:1.2em}
/* a wide table uses the full content width; text, the fact box and the key grid keep the reading measure */
.md-body>.tablewrap{max-width:none}
.fact-box{margin:0 0 1.6em;padding:4px 20px;background:var(--tint);border-radius:var(--radius)}
.fact-box>div{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:4px 20px;padding:12px 0;border-bottom:1px solid var(--tint-rule)}
.fact-box>div:last-child{border-bottom:0}
.fact-box dt{font:700 12px/1.45 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.fact-box dd{margin:0;font:400 16px/1.5 var(--ui)}
.key-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;margin:0 0 1.6em;background:var(--tint-rule);border:1px solid var(--tint-rule);border-radius:var(--radius);overflow:hidden}
.key-grid>div{min-width:0;padding:12px 14px;background:var(--tint)}
.key-grid dt{font:600 11.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.key-grid dd{margin:3px 0 0;font:400 16px/1.45 var(--ui)}
.panel{margin:0 0 1.4em;padding:16px 20px;background:var(--p-bg);border-left:4px solid var(--p-ink);border-radius:var(--radius)}
.panel>:last-child{margin-bottom:0}
.panel-label{margin:0 0 8px;font:700 12.5px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--p-ink)}
.panel-warning{--p-bg:var(--warn-bg);--p-ink:var(--warn-ink)}
.panel-confirmed{--p-bg:var(--ok-bg);--p-ink:var(--ok-ink)}
.panel-claim{--p-bg:var(--claim-bg);--p-ink:var(--claim-ink)}
.quote{margin:0 0 1.4em;padding:14px 18px;background:var(--tint);border-left:3px solid var(--ink);border-radius:var(--radius)}
.quote blockquote{margin:0;font-style:italic}
.quote blockquote p:last-child{margin:0}
.quote figcaption{margin:8px 0 0;font:400 13px/1.45 var(--mono);color:var(--ink)}
ol.long{columns:2 16em;column-gap:32px}
ol.long li{break-inside:avoid}
ol.register{font-variant-numeric:tabular-nums}

/* Markdown blocks (owner, 1 October: the casinos' own logos and the good general elements of our other sites).
   Logo cards use the grid's card rules (contents centred, the rating badge top right, the offer across the card,
   wagering and first deposit on one line, one card per row on phones) at the full content width, with the domain
   under the name and the source at the card's foot. The key facts box reads like the NZ "at a glance" facts: a small
   label over a strong figure (the figures of a row on one line), a longer value across the box, and its source line. Questions are headings with every
   answer shown at load. A table row may carry its page's logo, small, above the name (the A to Z). */
.block-label{margin:0 0 12px}
.md-body>.md-cards{max-width:none;margin:0 0 1.6em}
.card .domain{margin:-6px 0 0;font:500 14px/1.4 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.card .card-source{margin:auto 0 0;font:400 12.5px/1.45 var(--ui);color:var(--muted);text-wrap:balance}
.facts{margin:0 0 1.6em;padding:14px 20px 12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.facts>.block-label{margin:2px 0 2px}
.facts dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));column-gap:20px;margin:0}
.facts dl>div{display:flex;flex-direction:column;min-width:0;padding:10px 0;border-bottom:1px solid var(--rule)}
.facts .f-wide{grid-column:1/-1}
.facts dt{font:600 11.5px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:auto 0 0;padding-top:4px;font:var(--display-weight) clamp(18px,12px + 1.6vw,22px)/1.2 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.facts .f-wide dd{font:600 16px/1.45 var(--ui);letter-spacing:0}
.facts-source{margin:10px 0 0;font:400 13px/1.45 var(--mono);color:var(--muted)}
.md-body>.faq-list{margin:0 0 1.6em}
.faq-list>.block-label{margin-bottom:8px}
.faq-item>:not(h3)+*{margin-top:.6em}
.faq-item>:last-child{margin-bottom:0}
.row-logo{display:block;width:fit-content;margin:0 0 6px;padding:3px 6px;background:var(--tile-bg);border-radius:var(--radius)}
.row-logo img{display:block;width:auto;height:22px;max-width:110px;object-fit:contain}
/* A logo drawn in white for a dark page (its manifest says background: dark) sits on the site's ink colour; only the
   image is on that ground, so the card's own text keeps its colours. */
.tile.on-dark,.row-logo.on-dark{background:var(--ink)}
/* the rating badge keeps its own edge where it overlaps a dark tile */
.card:has(>.tile.on-dark)>.badge{outline:2px solid var(--surface)}

/* 404 */
.nf{padding:clamp(56px,9vw,120px) 0}
.nf h1{max-width:18ch}
.nf p{max-width:36em;margin:18px 0 26px}

/* Footer: groups of links, the help services, the 18+ line with the site's disclaimer, the short affiliate label
   (owner, 30 September: in the footer only, not at each button) and the copyright */
.site-foot{margin-top:clamp(48px,6vw,88px);background:var(--foot-bg);color:var(--foot-ink)}
.site-foot a{color:var(--foot-ink)}
.foot-in{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(36px,5vw,60px) var(--gutter) 26px}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px 48px}
.foot-logo{display:inline-flex;align-items:center;gap:.4em;font:var(--display-weight) 26px/1 var(--display);letter-spacing:-.02em;text-decoration:none}
.foot-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px 36px}
.foot-h{margin:0 0 12px;font:700 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.foot-group ul{display:grid;gap:9px;margin:0;padding:0;list-style:none;font:500 15px/1.4 var(--ui)}
.foot-group li{margin:0}
.foot-help li{display:flex;flex-direction:column}
.foot-help .tel{font-weight:700;white-space:nowrap}
.foot-help .area{font-size:13.5px}
.foot-age{display:flex;align-items:flex-start;gap:12px;max-width:52em;margin:36px 0 0;font:500 14.5px/1.5 var(--ui)}
.age{flex:none;display:inline-grid;place-items:center;min-width:42px;height:28px;padding:0 6px;border:1.5px solid currentColor;border-radius:var(--radius);font:700 13px/1 var(--mono)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:22px;padding-top:18px;border-top:1px solid var(--foot-rule);font:500 14px/1.5 var(--ui)}
.aff{font:700 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* Motion is only hover and focus feedback; text never waits for it */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

@media (max-width:1023px){
.head-nav{display:none}.head-menu{display:block}
.review-grid{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr}
}
@media (max-width:1023px){.cards.bal.md-1{--cols:1}.cards.bal.md-2{--cols:2}}
@media (max-width:900px){
.doc-grid{grid-template-columns:1fr}.doc-toc{position:static;max-height:none}
}
@media (max-width:860px){
.art>.art-hero,.art>.quick{order:-1}
.art>.art-hero{border-bottom:0}
}
@media (max-width:700px){
:root{--head-h:58px}
body{font-size:17px}
.head-logo{font-size:22px}.wm-svg{height:26px}
.cards,.cards:not(:has(>li:nth-child(4))){grid-template-columns:minmax(0,1fr)}
.cards.bal[class]{--cols:1}
.author-box.ab{grid-template-columns:minmax(0,1fr)}
.author-box .ab-mark{width:60px;height:60px}
.fact-box>div{grid-template-columns:1fr}
.key-grid{grid-template-columns:1fr}
.toc ol{columns:1}
.review-head{grid-template-columns:1fr;gap:12px}
.review-head .tile{width:100%}
.foot-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
ol.long{columns:1}
}
@media (max-width:420px){.foot-groups{grid-template-columns:1fr}}

/* astro parts */
/* The Astro parts' shared layout (decision 0034), appended after base.css for sites on the Astro stack only, so the
   HTML stack's stylesheet keeps its bytes. Colour roles only (the build refuses a hex here); a site's own look goes in
   its site.css. Owner defaults kept from base.css: the header bar, the calm hero, the grid first on phones with one
   card per row and centred contents, the rating badge top right of a card, wagering and first deposit on one line,
   paragraphs justified on wide screens and left on phones, every word visible at load. */

/* Casino hero: the title block beside the art; the casino's logo large with its rating on the logo's bottom-left and
   the checked date above it; the other casinos of the page placed around it. */
.case-hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4.5vw,72px);align-items:center}
.case-hero h1{max-width:15ch}
.hero-copy .byline{margin:20px 0 0}
.evidence{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.evidence>div{display:flex;align-items:baseline;gap:8px;min-width:0;padding:6px 10px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.evidence dt{font:500 10.5px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.evidence dd{margin:0;font:500 13px/1.3 var(--mono);color:var(--ink)}
.hero-terms{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.hero-terms>div{padding:9px 14px 10px;background:var(--tint);border-radius:var(--radius)}
.hero-terms dt{font:500 10.5px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hero-terms dd{margin:3px 0 0;font:var(--display-weight) 19px/1.15 var(--display);color:var(--ink)}
.constellation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);grid-template-rows:auto auto;gap:14px 22px;align-items:center}
.checked-note{grid-column:1/-1;margin:0;font:500 13px/1.4 var(--mono);color:var(--muted)}
.constellation.n-0{grid-template-columns:minmax(0,1fr)}
.hero-main{position:relative;margin:0 0 16px 16px}
.hero-main .tile{min-height:clamp(150px,15vw,210px);padding:22px 28px;background:var(--surface);border:1px solid var(--rule)}
.hero-main .tile.on-dark{border-color:var(--ink)}
.hero-main .tile img{height:clamp(64px,7vw,104px)}
.hero-main .badge.hero-badge{top:auto;right:auto;left:-16px;bottom:-16px;min-width:64px;min-height:64px}
.hero-main .badge.hero-badge b{font-size:25px}
.hero-others{min-width:0}
.others-label{margin:0 0 10px;font:500 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hero-others ul{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.hero-others li{margin:0}
.hero-others a{display:block;text-decoration:none}
.hero-others .tile{min-height:76px;padding:10px 14px;background:var(--surface);border:1px solid var(--rule)}
.hero-others .tile img{height:40px}
.hero-others .o-2{margin-left:clamp(0px,3vw,36px)}
.hero-others .o-3{margin-left:clamp(0px,1.5vw,18px)}


/* Running text in two columns when it is long */
.prose.cols{max-width:none;columns:2 24em;column-gap:clamp(28px,4vw,56px)}
.prose.cols>p{break-inside:avoid}

/* Picks: each paragraph with the logos of the casinos it names */
.picks{display:grid;gap:18px;max-width:58rem}
.pick{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:22px;align-items:center}
.pick.no-logos{grid-template-columns:minmax(0,1fr)}
.pick>p{margin:0}
.pick-logos{display:grid;gap:8px}
.pick-logos .tile{min-height:58px;padding:8px 10px;background:var(--surface);border:1px solid var(--rule)}
.pick-logos .tile img{height:34px}

/* Numbered steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;margin:6px 0 18px;padding:0;list-style:none}
.step{margin:0;padding:16px 18px 18px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.step p{margin:0;font-size:16px;line-height:1.55}
.step-n{display:block;margin:0 0 10px;font:var(--display-weight) 30px/1 var(--display);color:var(--ink)}

/* The verdict beside the casino's logo and rating */
.verdict-grid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:start}
.verdict-side{position:relative;margin:0 0 16px 16px}
.verdict-side .tile{min-height:120px;background:var(--surface);border:1px solid var(--rule)}
.verdict-side .tile img{height:60px}
.verdict-side .badge{top:auto;right:auto;left:-16px;bottom:-16px}
.statement>p{font-size:clamp(18px,1.4vw,20px);line-height:1.55}

/* The rating side's logo */
.review-side .side-tile{margin:0 0 16px;min-height:96px;background:var(--surface);border:1px solid var(--rule)}
.review-side .side-tile img{height:52px}

/* Payment marks on a card */
.pay li.pay-logo{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 9px;background:var(--surface);border:1px solid var(--rule)}
.pay li.pay-logo img{display:block;width:auto;height:16px;max-width:64px}

/* Table rows with the casino's logo */
.row-name{display:flex;align-items:center;gap:10px}
.row-name .row-logo{flex:none;margin:0;padding:4px 7px}
.row-name .row-logo img{height:20px;max-width:70px}

/* A compact, nearly square logo (PlayOJO's mark) is drawn larger than a wide wordmark so it reads at the same weight */
.tile.sq img{height:84px}
.card .tile.sq img{height:80px}
.hero-main .tile.sq img{height:clamp(84px,9vw,128px)}
.hero-others .tile.sq img,.review-side .side-tile.sq img,.verdict-side .tile.sq img{height:64px}
.pick-logos .tile.sq img{height:48px}
.row-name .row-logo.sq img{height:30px}

/* Informational entries with their brand's logo: a register of the other brands on the licence */
.entries.with-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px}
.entries.with-logos li{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;align-items:start;margin:0;padding:10px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);font-size:14.5px;line-height:1.4}
.entries.with-logos li b{grid-column:2;margin:0 0 2px}
.entries.with-logos li:not(.has-logo){grid-template-columns:minmax(0,1fr)}
.entries.with-logos li:not(.has-logo) b{grid-column:1}
.entry-logo{grid-row:1/3;display:flex;align-items:center;justify-content:center;height:56px;padding:5px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.entry-logo.on-dark{background:var(--ink)}
.entry-logo img{display:block;max-width:100%;height:30px;object-fit:contain}
.entry-logo.sq img{height:44px}

/* An alternative casino on a page about a casino without sisters: a small label on the card's top border */
.card.alt{margin-top:10px}
.card-flag{position:absolute;top:0;left:50%;translate:-50% -50%;z-index:2;margin:0;padding:3px 10px;background:var(--surface);border:1px solid var(--ink);border-radius:var(--radius);font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}

/* Cards: a name tile as the heading */
.card h3.name-tile{margin:0;font-size:21px}
.card .f-pay{margin-top:2px}

/* The hub: cards grouped by the operator each names; the groups sit side by side, each as wide as its cards */
/* Groups in centred rows (owner, 2 October: symmetrical grids): a group is as wide as its cards on a four column
   measure, so a row of three single groups sits in the middle instead of leaving a gap on the right */
.op-groups{--g:4;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:30px 18px}
.op-group{--s:1;min-width:0;flex:0 0 calc(var(--s) * (100% - (var(--g) - 1) * 18px) / var(--g) + (var(--s) - 1) * 18px)}
.op-group.span-2{--s:2}
.op-group.span-3{--s:3}
.op-group .cards,.op-group .cards:not(:has(>li:nth-child(4))){grid-template-columns:minmax(0,1fr)}
.op-group.span-2 .cards,.op-group.span-2 .cards:not(:has(>li:nth-child(4))){grid-template-columns:repeat(2,minmax(0,1fr))}
.op-group.span-3 .cards,.op-group.span-3 .cards:not(:has(>li:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}
.faq-list{max-width:52rem}
/* The home page's author box: the site's own words on who writes it, at the bottom of the page */
.author-box .author-h{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.1}
.author-box .page-links-plain{margin-top:10px}
.op-label{margin:0 0 12px;font:500 13px/1.4 var(--mono);color:var(--ink)}
.op-label span{margin-right:6px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* Margin notes: the builder's labels, set as labels unless the site draws them by hand */
.margin-note{margin:0 0 10px;font:500 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* The home page art (a site's own part) sits beside the title block, under it on narrower screens */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.home-art{min-width:0}

@media (max-width:1023px){
.case-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.op-groups{--g:2}
.op-group.span-3{--s:2}
.op-group.span-3 .cards,.op-group.span-3 .cards:not(:has(>li:nth-child(4))){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
.op-groups{--g:1}
.op-group.span-2,.op-group.span-3{--s:1}
.op-group .cards,.op-group.span-2 .cards,.op-group.span-3 .cards,.op-group .cards:not(:has(>li:nth-child(4))),.op-group.span-2 .cards:not(:has(>li:nth-child(4))),.op-group.span-3 .cards:not(:has(>li:nth-child(4))){grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
.home-grid{grid-template-columns:minmax(0,1fr)}
/* Phones and small tablets: the checked date and the casino's logo with its rating first, then the title block (the
   New Zealand phone hero the owner chose); the other casinos are in the grid straight below, so they are not repeated. */
.case-hero .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:18px}
.case-hero .hero-art{order:-1}
.constellation{display:block}
.hero-others{display:none}
.checked-note{margin:0 0 12px}
.hero-main{margin:0 auto 14px;max-width:340px}
.verdict-grid{grid-template-columns:1fr}
.verdict-side{max-width:260px}
.pick{grid-template-columns:minmax(0,1fr)}
.pick-logos{grid-template-columns:repeat(auto-fit,minmax(110px,150px))}
}

/* Round 4 (audit, 1 October) */
/* One to three cards fill the row instead of leaving two thirds of it empty; a single card is centred */
.cards:not(:has(>li:nth-child(4))){grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cards:has(>li:only-child){max-width:620px;margin-left:auto;margin-right:auto}
/* Tables scroll inside their box with a visible edge shadow and scrollbar, so a cut-off column is plain to see */
.tablewrap{background:linear-gradient(90deg,var(--surface) 30%,transparent) left center/40px 100% no-repeat local,linear-gradient(270deg,var(--surface) 30%,transparent) right center/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 28%,transparent),transparent) left center/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 28%,transparent),transparent) right center/14px 100% no-repeat scroll,var(--surface);scrollbar-width:thin;scrollbar-color:var(--ink) var(--tint)}
.tablewrap table{background:transparent}
.tablewrap tbody th{background:var(--surface)}
/* Casino rows: logos large enough to read */
.row-name .row-logo img{height:26px;max-width:88px}
.row-name .row-logo.sq img{height:38px}
/* Links to site pages that follow a row of casino buttons are plain links, not buttons */
.page-links-plain{gap:8px 22px}
.page-links-plain a{display:inline-flex;align-items:center;gap:6px;font:600 15px/1.3 var(--ui)}
/* The header's casino list under the hub */
.nav-hub ul{min-width:280px}
.nav-hub .hub-all a{font-weight:700}
.head-menu li.sub a{padding-top:9px;padding-bottom:9px;padding-left:calc(var(--gutter) + 18px);font-size:15px;font-weight:500}
/* The 404 page's second way on */
.nf-alt{margin-left:18px;font:600 16px/1.3 var(--ui)}
/* A home or hub section's subsections (the families on the home page): a heading each, its paragraphs and links */
.hub-sub{margin-top:clamp(28px,3vw,40px);max-width:var(--read)}
.hub-sub h3{font-size:clamp(21px,1.8vw,24px)}
main.hub .tablewrap{margin:1.2em 0}

/* hub directory */
/* The hub as a directory (presentation.json hub_directory): appended after parts.css only for a site that sets it.
   Colour roles only. Chips under the lead; the explainer at reading width; one even grid of identical cards, four
   across on a wide screen, three on a laptop, two on a phone; each card one link with its logo banner, title, company
   lines, rating badge in the top right corner and its link words. */
.dir-chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.dir-chips li{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border:1px solid color-mix(in srgb,currentColor 34%,transparent);border-radius:999px;font:600 14px/1.25 var(--ui)}
.dir-chips li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--badge-bg)}
.hub-dir .hub-hero .lead{max-width:40em}
.hub-dir .sec>.wrap>.prose,.hub-dir .hub-sub{max-width:48rem}
.hub-dir .hub-sub .prose{max-width:none}
.dir-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:0 0 6px}
.dir-head h2{margin:0}
.dir-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--rule);border-radius:999px}
.dir-tabs[hidden],.dir-pager[hidden],.dir-grid>li[hidden]{display:none}
.dir-tabs button,.dir-pager button{min-height:40px;padding:8px 18px;background:transparent;color:var(--ink);border:0;border-radius:999px;font:600 15px/1.2 var(--ui);cursor:pointer}
.dir-tabs button[aria-selected="true"],.dir-pager button[aria-current]{background:var(--accent);color:var(--accent-ink)}
.dir-tabs button:focus-visible,.dir-pager button:focus-visible,.dir-card:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.dir-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:24px 0 0;padding:0;list-style:none}
.dir-grid>li{min-width:0;margin:0}
.dir-card{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 14px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius);font-family:var(--ui);text-align:left;text-decoration:none}
.dir-card:hover .dir-title{text-decoration:underline;text-decoration-thickness:1px}
.dir-card .tile{aspect-ratio:16/9;min-height:0;margin:0 0 12px;padding:10% 16%;border:1px solid var(--rule)}
.dir-card .tile.on-dark{border-color:var(--ink)}
.dir-card .tile img{width:100%;height:100%;max-height:64px}
.dir-card .tile.name-tile{font-size:clamp(19px,1.7vw,24px);text-align:center}
.dir-card>.badge{top:-1px;right:-1px}
.dir-title{margin:0;font:700 17px/1.3 var(--ui);letter-spacing:0;text-wrap:balance}
.dir-co{display:block;font:400 13.5px/1.45 var(--ui);color:var(--muted);overflow-wrap:anywhere}
.dir-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;font:600 15px/1.2 var(--ui);color:var(--link)}
.dir-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px 0 0}
.dir-pager button{min-width:44px;padding:8px 12px;border:1px solid var(--rule)}
.hub-dir .sources-sec h2{font-size:clamp(20px,1.8vw,24px)}
.hub-dir ul.sources:has(.src-domain) li{margin:0 0 8px;font-size:14px}
@media (max-width:1199px){.dir-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
.dir-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dir-card{padding:50px 10px 14px}
.dir-card .tile{margin:0 0 10px;padding:12% 12%}
.dir-card .tile img{max-height:44px}
.dir-card>.badge{min-width:46px;min-height:44px;padding:4px 6px}
.dir-card>.badge small{font-size:8px}
.dir-card>.badge b{font-size:17px}
.dir-title{font-size:15px}
.dir-co{font-size:12.5px}
.dir-go{font-size:14px}
.dir-tabs{width:100%}
.dir-tabs button{flex:1 1 0;padding:8px 10px}
}

/* site */
/* Sister Sites Bingo (design round, 2 October 2026). Structure studied from the owner's reference
   (online-casino-spielautomaten.de): a light ground with every section in its own white panel, a dark hero band,
   numbered top-list cards, an ink-headed striped table, jump chips for the contents, tinted pros and cons boxes.
   Everything else is Sister Sites Bingo's approved brand (tokens.json, 30 September): Young Serif headings, Public Sans text,
   DM Mono labels, the dabber inks as flat family blocks (one colour per Gambling Commission account), no shadows.
   Light palette only (the builder has no dark theme). Token colours only. */

/* One dabber ink per casino family, keyed by licence account (tokens.json family_blocks.assignment). Every element
   that names a casino carries data-casino, so tiles, cards, discs, dots, table rows and reviews all take it. */
:root{--fam:#24211e;--fam-ink:#ffffff;--panel-r:12px;--card-r:8px}
[data-casino="heart-bingo"],[data-casino="lottoland"]{--fam:#c2186f;--fam-ink:#ffffff}
[data-casino="jackpotjoy"],[data-casino="double-bubble-bingo"],[data-casino="virgin-games"],[data-casino="monopoly-casino"],[data-casino="bally-casino"]{--fam:#f4c542;--fam-ink:#24211e}
[data-casino="gala-bingo"],[data-casino="foxy-bingo"]{--fam:#e5832f;--fam-ink:#24211e}
[data-casino="tombola"],[data-casino="lottomart"]{--fam:#3771b3;--fam-ink:#ffffff}
[data-casino="lucky-vip-bingo"],[data-casino="kitty-bingo"],[data-casino="lucky-pants-bingo"],[data-casino="mecca-bingo"]{--fam:#377d47;--fam-ink:#ffffff}

/* Page ground and panels */
body{background:#f6f5f2;font-size:17px}
main{padding-bottom:8px}
.site-foot{margin-top:clamp(28px,4vw,56px)}
.wrap{max-width:calc(1120px + 2 * var(--gutter))}
.head-in,.foot-in{max-width:calc(1120px + 2 * var(--gutter))}
main :is(.sec,.toc-strip){padding:0;margin:14px 0 0}
main .sec+.sec,main .sec+.review-list{border-top:0}
main :is(.sec,.toc-strip)>.wrap{width:calc(100% - 2 * var(--gutter));max-width:1120px;padding:clamp(20px,3vw,40px) clamp(18px,3.2vw,44px);background:#ffffff;border:1px solid #e2dfd9;border-radius:var(--panel-r)}
main h2{font-size:clamp(25px,2.6vw,34px);margin-bottom:.7em}
main h3{font-size:clamp(19px,1.6vw,22px)}
.prose{max-width:66ch}
/* Justified text: Chromium's "pretty" wrapping evens out the lines of a short paragraph, so a two-line intro no longer
   leaves one line stretched with wide gaps (home, "Sister sites we have checked"). */
.justify main p{text-wrap:pretty}
.label,.margin-note,.others-label,.checked-note,.tags-h,.card dt,.op-label span{font:500 .78rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* Header: paper, the magenta current-page rule (unchanged); the wordmark a touch larger */
.head-logo{font-size:27px}

/* Hero band: ink, paper text (the reference's navy band, in Sister Sites Bingo's own ink) */
.page-hero{background:#24211e;color:#ffffff;border-bottom:0;padding:clamp(36px,5vw,72px) 0 clamp(36px,5vw,64px)}
.page-hero h1{color:#ffffff;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08}
.page-hero .lead{color:color-mix(in srgb,#ffffff 86%,#24211e);max-width:36em}
.page-hero a{color:#ffffff}
.page-hero .byline{color:#ffffff}
.page-hero .testing,.page-hero .checked-note{color:color-mix(in srgb,#ffffff 72%,#24211e)}
.doc-hero,.hub-hero{padding-bottom:clamp(30px,4vw,52px)}

/* Evidence chips: outlined mono pills on the ink band */
.page-hero .evidence>div{background:transparent;border:1.5px solid color-mix(in srgb,#ffffff 36%,#24211e);border-radius:999px;padding:6px 14px}
.page-hero .evidence dt{color:color-mix(in srgb,#ffffff 70%,#24211e)}
.page-hero .evidence dd{color:#ffffff}
/* The casino's own terms: one white panel of figures under the title, like the reference's overview table */
.page-hero .hero-terms{gap:0;margin-top:18px;background:#ffffff;border-radius:var(--card-r);overflow:hidden;width:fit-content;max-width:100%}
.page-hero .hero-terms>div{background:#ffffff;border-radius:0;padding:12px 18px 13px;border-right:1px solid #e2dfd9}
.page-hero .hero-terms>div:last-child{border-right:0}
.page-hero .hero-terms dd{font-size:20px}

/* FamilyHero (site part): the casino as a logo disc (the "Our take" treatment, owner 2 Oct), rating at its foot, the
   others as small logo discs with their names */
.case-hero .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.case-hero h1{max-width:17ch}
.sis-hero .checked-note{margin:0 0 16px;color:color-mix(in srgb,#ffffff 72%,#24211e)}
.sis-stage{display:flex;align-items:center;gap:clamp(18px,3vw,36px)}
.sis-disc{position:relative;flex:none;width:clamp(180px,19vw,250px);aspect-ratio:1}
.sis-disc .tile{width:100%;height:100%;min-height:0;padding:16% 16% 26%;background:var(--fam);color:var(--fam-ink);border:0;border-radius:50%;font:400 clamp(24px,2.4vw,32px)/1.1 var(--display);letter-spacing:-.01em}
.sis-disc .tile:not(.name-tile){padding:14% 14% 22%;background:#ffffff;border:10px solid var(--fam)}
.sis-disc .tile.on-dark:not(.name-tile){background:#24211e}
.sis-disc .tile:not(.name-tile) img{height:auto;max-height:76px;max-width:100%;object-fit:contain}
.sis-disc .badge.hero-badge{top:auto;right:auto;left:50%;bottom:-6%;translate:-50% 0;min-width:66px;min-height:66px;border-radius:50%;outline:4px solid #24211e}
.sis-disc .badge.hero-badge b{font-size:24px}
.sis-others{min-width:0}
.sis-others .others-label{margin:0 0 10px;color:color-mix(in srgb,#ffffff 72%,#24211e)}
.sis-others ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.sis-others li{margin:0}
.sis-others a,.sis-other{display:flex;align-items:center;gap:12px;color:#ffffff;font:600 16px/1.3 var(--ui);text-decoration:none}
.sis-others a:hover span:last-child{text-decoration:underline}
.sis-dot{flex:none;display:grid;place-items:center;width:64px;height:64px;overflow:hidden;background:#ffffff;border:3px solid var(--fam);border-radius:50%}
.sis-dot:has(.on-dark){background:#24211e}
.sis-dot .tile{width:100%;height:100%;min-height:0;padding:0 6px;background:transparent;border:0;border-radius:0}
.sis-dot .tile img{height:auto;max-height:30px;max-width:100%;object-fit:contain}
.sis-dot.no-logo{background:var(--fam);color:var(--fam-ink);font:400 20px/1 var(--display)}

/* HomeArt (site part): overlapping logo discs, one per family, in the "Our take" treatment (owner 2 Oct) */
@media (min-width:861px){.home-hero .home-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.home-hero h1{max-width:16ch}
.sis-art{margin:0}
.sis-dabs{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 0 0 auto;padding:0;list-style:none}
.sis-dabs li{position:absolute;width:54%;aspect-ratio:1;margin:0}
.sis-dabs .dab-1{top:0;left:0}.sis-dabs .dab-2{top:0;right:0}.sis-dabs .dab-3{bottom:0;left:0}.sis-dabs .dab-4{bottom:0;right:0}
.sis-dabs.n-1 li,.sis-dabs.n-2 li{position:relative;display:inline-block}
.sis-dabs a,.sis-dabs .dab-in{display:block;width:100%;height:100%;border-radius:50%;text-decoration:none;box-shadow:0 0 0 4px #24211e}
.sis-dabs .tile{width:100%;height:100%;min-height:0;padding:16%;background:var(--fam);color:var(--fam-ink);border:0;border-radius:50%;font:400 clamp(19px,1.9vw,26px)/1.1 var(--display)}
.sis-dabs .tile:not(.name-tile){padding:18% 15%;background:#ffffff;border:10px solid var(--fam)}
.sis-dabs .tile.on-dark:not(.name-tile){background:#24211e}
.sis-dabs .tile:not(.name-tile) img{height:auto;max-height:64px;max-width:100%;object-fit:contain}
.sis-dabs a:hover .tile{text-decoration:underline;text-decoration-thickness:2px}
.sis-dabs a:hover .tile:not(.name-tile){border-color:color-mix(in srgb,var(--fam) 80%,#24211e)}

/* The short answer */
.lead-sec .margin-note{display:inline-block;margin:0 0 14px;padding:5px 12px;background:#c2186f;color:#ffffff;border-radius:999px}
.lead-text{max-width:66ch}
.lead-text .lede{font-size:clamp(22px,2.2vw,28px)}

/* At a glance: the reference's top-list grid in the family inks. Numbered cards (the comparison order), the rating
   badge top right, the name on the family block, the offer as a tinted chip, wagering and first deposit on one line.
   Every card list counts its own cards from 1: the reset sits on the list, not on a section id, because a section id
   follows its heading (the home grid showed 1 on every card after its heading changed on 5 October 2026). */
.cards{gap:14px;counter-reset:rank}
.card{counter-increment:rank;gap:12px;padding:44px 16px 18px;border:1px solid #e2dfd9;border-radius:var(--panel-r);background:#ffffff}
.card::before{content:counter(rank);position:absolute;top:12px;left:12px;display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;background:#24211e;color:#ffffff;border-radius:999px;font:500 13px/1 var(--mono)}
.card.current{border:2px solid #24211e;padding:43px 15px 17px}
.card .tile,.card h3.name-tile{min-height:96px;border-radius:var(--card-r);background:var(--fam);color:var(--fam-ink);font-size:24px}
/* A casino with its own logo (brand/casinos/manifest.json): the logo on a white tile, a dark logo on an ink tile, and
   the family's ink as a band along the foot, so the family reading of the name blocks survives the logos. */
.card .tile:not(.name-tile){background:#ffffff;border:1px solid #e2dfd9;box-shadow:inset 0 -8px 0 var(--fam);padding:14px 18px 22px}
.card .tile.on-dark:not(.name-tile){background:#24211e;border-color:#24211e}
.card .tile:not(.name-tile) img{height:52px;max-width:100%;object-fit:contain}
.card .tile.sq:not(.name-tile) img{height:64px}
.card .tile:not(.name-tile)+h3{margin:2px 0 0;font:400 21px/1.2 var(--display)}
.card .tile:not(.name-tile)+h3 a{color:#24211e;text-decoration:none}
.card .tile:not(.name-tile)+h3 a:hover{text-decoration:underline}
.pay li.pay-logo{background:#ffffff;border-radius:999px;padding:5px 12px}
.card h3.name-tile a{color:inherit;text-decoration:none}
.card h3.name-tile a:hover{text-decoration:underline}
.card .badge+.tile,.card .badge+h3.name-tile{padding-left:16px;padding-right:16px}
.badge{border-radius:var(--card-r)}
.card>.badge{top:-1px;right:-1px;border-radius:0 var(--panel-r) 0 var(--card-r);min-width:58px;min-height:58px}
.badge b::after{content:"/5";margin-left:1px;font:500 10px/1 var(--mono);letter-spacing:0;vertical-align:1px}
.card dl{gap:8px}
.card .f-offer{padding:10px 12px;background:#f6f5f2;border-radius:var(--card-r)}
.card .f-term{padding:4px 0 0}
.card dd{font-variant-numeric:tabular-nums}
.pay li{background:#f6f5f2;border:1px solid #e2dfd9;border-radius:999px;padding:3px 10px}
.pay li.more-n{border:0}
.card-flag{border-radius:999px}

/* Tables: an ink header row, ground stripes, figures that line up */
.tablewrap{border-radius:var(--card-r);border-color:#e2dfd9}
thead th{background:#24211e;color:#ffffff;border-bottom:0}
.tablewrap thead th:first-child{background:#24211e}
tbody tr:nth-child(even)>*{background:#f6f5f2}
.tablewrap tbody tr:nth-child(even) th{background:#f6f5f2}
tbody td{font-variant-numeric:tabular-nums}
tbody tr[data-casino] th .row-name>span:last-child::before{content:"";display:inline-block;width:12px;height:12px;margin:0 8px 0 0;background:var(--fam);border-radius:50%;vertical-align:-1px}

/* On this page: the reference's quick menu, a row of jump chips, all visible at load */
.toc-strip>.wrap{padding-top:18px;padding-bottom:18px}
.toc{padding:0;background:none}
.toc ol{display:flex;flex-wrap:wrap;gap:8px;columns:auto;margin:10px 0 0;padding:0;list-style:none}
.toc li{margin:0}
.toc a{display:inline-block;padding:7px 14px;border:1.5px solid #24211e;border-radius:999px;color:#24211e;font:500 14px/1.25 var(--ui);text-decoration:none}
.toc a:hover{background:#24211e;color:#ffffff}

/* "Which sites are X's sister sites?": the at-a-glance cards already show the family, so the second row of tiles is
   not repeated (owner, 2 October); the section keeps its words. Stopgap until the shared view drops it. */
.room-why-sisters .family{display:none}
.room-why-sisters .prose.cols{columns:auto;max-width:66ch}

/* Reviews: a family dot by each name, pros and cons as tinted boxes, the "suits" line as a tinted note */
.review+.review{border-top:1px solid #e2dfd9}
.review-head{grid-template-columns:auto minmax(0,1fr)}
.review[data-casino] .review-head::before{content:"";width:34px;height:34px;background:var(--fam);border-radius:50%}
/* A review with the casino's logo: the logo tile takes the dot's place, beside the name on one row */
.review[data-casino] .review-head:has(.tile:not(.name-tile))::before{content:none}
.review-head .tile:not(.name-tile){width:150px;min-height:60px;padding:8px 12px 14px;background:#ffffff;border:1px solid #e2dfd9;border-radius:var(--card-r);box-shadow:inset 0 -6px 0 var(--fam)}
.review-head .tile.on-dark:not(.name-tile){background:#24211e;border-color:#24211e}
.review-head .tile:not(.name-tile) img{height:34px;max-width:100%;object-fit:contain}
/* Table rows with a logo do not need the family dot as well */
tbody tr[data-casino] th .row-name:has(.row-logo)>span:last-child::before{content:none}
.review-grid{grid-template-columns:minmax(0,290px) minmax(0,1fr)}
.review-side{padding:18px;background:#f6f5f2;border-radius:var(--panel-r)}
.rating .badge{border-radius:50%;min-width:62px;min-height:62px}
.review-side .side-tile:not(.name-tile){background:#ffffff;border:1px solid #e2dfd9;border-radius:var(--card-r);box-shadow:inset 0 -6px 0 var(--fam);padding:12px 14px 18px}
.review-side .side-tile.on-dark:not(.name-tile){background:#24211e;border-color:#24211e}
.review-side .tags-h{margin:16px 0 0;padding:9px 14px 4px;border:1.5px solid #2f6b3a;border-bottom:0;border-radius:var(--card-r) var(--card-r) 0 0;background:color-mix(in srgb,#2f6b3a 9%,#ffffff);color:#2f6b3a}
.review-side ul.tags{margin:0;padding:2px 14px 12px;list-style:none;border:1.5px solid #2f6b3a;border-top:0;border-radius:0 0 var(--card-r) var(--card-r);background:color-mix(in srgb,#2f6b3a 9%,#ffffff);font-size:15px}
.review-side ul.tags li{position:relative;margin:0;padding:5px 0 5px 24px}
.review-side ul.tags li::before{content:"\2713";position:absolute;left:0;top:5px;font-weight:700;color:#2f6b3a}
.review-side ul.tags~.tags-h{border-color:#a3262e;background:color-mix(in srgb,#a3262e 8%,#ffffff);color:#a3262e}
.review-side ul.tags~ul.tags{border-color:#a3262e;background:color-mix(in srgb,#a3262e 8%,#ffffff)}
.review-side ul.tags~ul.tags li::before{content:"\2715";color:#a3262e}
.suits{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-left:0;background:#f6f5f2;border-radius:var(--card-r);font-weight:600}
.review[data-casino] .suits::before{content:"";flex:none;width:14px;height:14px;margin-top:6px;background:var(--fam);border-radius:50%}

/* The verdict: the casino's disc beside the statement */
.verdict-side .tile{aspect-ratio:1;width:100%;max-width:210px;border-radius:50%;border:0;background:var(--fam);color:var(--fam-ink);font-size:26px}
.verdict-side .tile:not(.name-tile){background:#ffffff;border:10px solid var(--fam);padding:16%}
.verdict-side .tile.on-dark:not(.name-tile){background:#24211e}
.verdict-side .tile:not(.name-tile) img{height:auto;max-height:64px;max-width:100%;object-fit:contain}
.verdict-side .badge{left:auto;right:0;bottom:0;border-radius:50%;outline:4px solid #ffffff}
.room-verdict .margin-note{display:inline-block;padding:5px 12px;background:#24211e;color:#ffffff;border-radius:999px}

/* The picks: each family's name as a small block */
.pick-logos .tile{min-height:0;padding:10px 14px;background:var(--fam);color:var(--fam-ink);border:0;border-radius:999px;font-size:18px}
.pick-logos .tile:not(.name-tile){min-height:52px;padding:8px 14px;background:#ffffff;border:1px solid #e2dfd9;border-radius:var(--card-r);box-shadow:inset 5px 0 0 var(--fam)}
.pick-logos .tile.on-dark:not(.name-tile){background:#24211e;border-color:#24211e}
.pick-logos .tile:not(.name-tile) img{height:30px;max-width:100%;object-fit:contain}
.pick{padding:14px 0;border-top:1px solid #e2dfd9}
.pick:first-child{border-top:0;padding-top:0}

/* Other brands on the licence: a compact two-column list on the ground */
.room-other-brands .entries{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 28px;padding:6px 20px;background:#f6f5f2;border-radius:var(--card-r)}
.room-other-brands .entries li{padding:10px 0;border-top:1px solid #e2dfd9;font-size:15.5px}

/* Questions: each one a bordered item, every answer shown */
.faq-list{display:grid;gap:10px;max-width:none}
.faq-item{padding:16px 20px;border:1px solid #e2dfd9;border-radius:var(--card-r);background:#ffffff}
.faq-item h3{font-size:19px}

/* Sources: one quiet panel. The shared Sources part lists one line per home domain (the domain, then what it was
   used for), so each source is its own block line; the old run-on dotted paragraph left a stray dot under each line. */
.sources-sec>.wrap{background:#f6f5f2}
.sources-sec h2{font-size:22px}
.sources{columns:auto;margin:0;padding:0;list-style:none;font:400 14px/1.55 var(--ui);color:#6a655e;text-align:left}
.sources li{margin:0 0 12px}
.sources li:last-child{margin-bottom:0}
.sources a{color:#24211e}
.sources .read{font:400 11px/1 var(--mono);letter-spacing:0;white-space:nowrap}

/* The author */
.author-box{border:0;background:#f6f5f2;border-radius:var(--panel-r)}
.author-box .mark{border-radius:50%;background:#c2186f;color:#ffffff}

/* Help links and buttons */
.help-links a{border-radius:var(--card-r)}
.btn{border-radius:999px;padding-left:20px;padding-right:20px}
/* The home page's casino buttons and every card's button to its sister-sites article: each in its family's ink */
:is(.page-links,.card-go) a.btn[href="/sister-sites/jackpotjoy/"]{background:#f4c542;color:#24211e}
:is(.page-links,.card-go) a.btn:is([href="/sister-sites/gala-bingo/"],[href="/sister-sites/foxy-bingo/"]){background:#e5832f;color:#24211e}
:is(.page-links,.card-go) a.btn[href="/sister-sites/lottomart/"]{background:#3771b3;color:#ffffff}
:is(.page-links,.card-go) a.btn:is([href="/sister-sites/kitty-bingo/"],[href="/sister-sites/lucky-vip-bingo/"],[href="/sister-sites/lucky-pants-bingo/"],[href="/sister-sites/mecca-bingo/"]){background:#377d47;color:#ffffff}
/* The card button (owner, 5 October 2026: every casino box gets a button to its sister-sites article) sits at the foot of
   the card; a long casino name wraps inside it rather than widening the card */
.card-go{margin:auto 0 0;padding-top:4px;max-width:100%}
.card-go .btn{white-space:normal;text-align:left;max-width:100%}
/* The featured grid's one-sentence intro runs the full width on desktop (owner, 5 October 2026) */
.sec-featured-bingo-sister-sites .prose{max-width:none}

/* Home and hub cards: the family block on top, the number pill, the rating */
.hub-card h3{font-size:20px}
.hub-card h3 a{color:#24211e;text-decoration:none}
.hub-card h3 a:hover{text-decoration:underline}
.hub-card .blurb{font-size:15px}
.op-label{padding:7px 12px;background:#f6f5f2;border-radius:var(--card-r)}
/* The hub groups cards by operator, so a rank number would restart in every group: no numbers there */
.op-group .card::before{content:none}

/* Doc pages: the reading column in one white panel, the contents as a sticky side card */
.doc-grid{width:calc(100% - 2 * var(--gutter));max-width:1120px;padding:0;margin:14px auto 0;gap:14px;grid-template-columns:minmax(0,260px) minmax(0,1fr)}
.doc-toc{background:#ffffff;border:1px solid #e2dfd9;border-radius:var(--panel-r)}
.doc-body{max-width:none;padding:clamp(20px,3vw,44px);background:#ffffff;border:1px solid #e2dfd9;border-radius:var(--panel-r)}
.doc-body>*{max-width:66ch}
.doc-body .help-links{max-width:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}

@media (max-width:1023px){
.case-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}
@media (max-width:860px){
.sis-stage{justify-content:center}
.sis-disc{width:min(62vw,210px)}
.sis-others{display:none}
.sis-hero .checked-note{text-align:center}
.sis-dabs{max-width:300px;margin:8px auto 0}
.sis-dabs .tile:not(.name-tile){border-width:7px}
.sis-dabs .tile:not(.name-tile) img{max-height:44px}
.sis-disc .tile:not(.name-tile){border-width:8px}
.doc-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
body{font-size:16.5px}
/* The wordmark "sister sites bingo" is twice the length of the old name: at 27px it pushed the Menu button 22px past
   a 390px phone window (browser check, 3 October 2026), so phones take a smaller size. */
.head-logo{font-size:20px}
main :is(.sec,.toc-strip){margin-top:10px}
.review-grid{grid-template-columns:1fr}
.review-head:has(.tile:not(.name-tile)){grid-template-columns:auto minmax(0,1fr)}
.review-head .tile:not(.name-tile){width:120px}
.page-hero .hero-terms{width:100%}
.page-hero .hero-terms>div{flex:1 1 0;padding:10px 12px}
}

/* Phones (owner, 5 October 2026): the casino boxes show on the first 390 by 844 screen, so the home hero is tighter
   and its art (the four dabber discs) is drawn small */
@media (max-width:700px){
.home-hero{padding:18px 0 16px}
.home-hero .home-grid{position:relative;display:block}
.home-hero h1{font-size:1.85rem;max-width:calc(100% - 92px)}
.home-hero .lead{font-size:16px;line-height:1.45;margin-bottom:0}
.home-hero .home-art{position:absolute;top:0;right:6px;width:76px}
.home-hero .sis-dabs{max-width:76px;margin:0}
}

/* The hub as a directory (presentation.json hub_directory; owner, 5 October 2026, with the wagerpals hub as the
   reference): white cards on the white panel, each logo on a white banner (a dark logo on ink) with its family ink as
   the bottom band, the title in the display face, the rating badge in the card's top right corner. */
.dir-card{border-color:#e2dfd9;border-radius:var(--panel-r);background:#ffffff}
.dir-card:hover{border-color:#24211e}
.dir-card .tile{border-radius:var(--card-r);background:#ffffff;border:1px solid #e2dfd9;box-shadow:inset 0 -8px 0 var(--fam);padding-bottom:calc(10% + 8px)}
.dir-card .tile.on-dark{background:#24211e;border-color:#24211e}
.dir-card .tile.name-tile{background:var(--fam);color:var(--fam-ink);border-color:var(--fam);box-shadow:none;padding-bottom:10%}
.dir-card>.badge{border-radius:0 var(--panel-r) 0 var(--card-r);min-width:58px;min-height:58px}
.dir-title{margin-top:2px;font:400 20px/1.22 var(--display)}
.dir-chips li::before{background:#f4c542}
@media (max-width:760px){.dir-title{font-size:16.5px}.dir-card>.badge{min-width:48px;min-height:44px}}