@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/hanken-grotesk-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:'Figtree';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/figtree-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:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/geist-mono-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:'Architects Daughter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/architects-daughter-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}
:root{color-scheme:light;--paper:#eadfc9;--ink:#373737;--muted:#5b5b5b;--link:#2f52b0;--rule:#d6c7aa;--surface:#fdf8f0;--tint:#e0d3ba;--head-bg:#fdf8f0;--head-ink:#373737;--head-mark:#ec633d;--foot-bg:#283f7d;--foot-ink:#fdf8f0;--accent:#283f7d;--accent-ink:#fdf8f0;--badge-bg:#283f7d;--badge-ink:#fdf8f0;--focus:#2f52b0;--head-rule:#d6c7aa;--foot-rule:#0249b2;--tint-rule:#d6c7aa;--tile-bg:#e0d3ba;--tile-ink:#373737;--status-bg:#283f7d;--status-ink:#fdf8f0;--warn-bg:#e0d3ba;--warn-ink:#373737;--ok-bg:#e0d3ba;--ok-ink:#373737;--claim-bg:#e0d3ba;--claim-ink:#373737;--display:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;--body:Figtree, "Helvetica Neue", Arial, sans-serif;--ui:Figtree, "Helvetica Neue", Arial, sans-serif;--mono:"Geist Mono", ui-monospace, Menlo, monospace;--radius:3px;--display-weight:500}
/* 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}

/* site */
/* Octomark: the approved brand book (30 Sep 2026, logo A, warm paper) after the illoca reference: drafting-paper grid
   under every page, a floating bordered bar, huge tight Hanken Grotesk headings, Architects Daughter margin notes,
   Geist Mono for the machinery (labels, records, evidence), cobalt and stone for the art, navy for actions, the signal
   orange only as a small square. Token colours only. Every word visible at load: no scroll or timed motion. */
body{background-color:#EADFC9;background-image:linear-gradient(#E0D3BA 1px,transparent 1px),linear-gradient(90deg,#E0D3BA 1px,transparent 1px);background-size:16px 16px}
:root{--hand:'Architects Daughter',cursive;--head-h:60px}
h1,h2,h3{font-weight:500;color:#373737}
h1{font-size:clamp(46px,7.4vw,104px);line-height:.9;letter-spacing:-.03em}
h2{font-size:clamp(32px,3.4vw,48px);line-height:1;letter-spacing:-.02em;margin-bottom:.55em}
h3{font-size:clamp(21px,1.7vw,24px);line-height:1.15;letter-spacing:-.01em}
p,li{text-wrap:pretty}

/* The bar: a bordered paper card floating on the grid, fixed while the page scrolls (a rectangle, no pills) */
.site-head{background:transparent;border:0;padding:10px 0 0;pointer-events:none}
.head-in{pointer-events:auto;height:var(--head-h);max-width:calc(var(--max) + 2 * var(--gutter));padding:0 8px 0 14px;background:#FDF8F0;border:1px solid #D6C7AA;margin:0 auto;width:calc(100% - 2 * var(--gutter) + 28px)}
.head-logo{font-size:23px}
.head-nav>ul>li>a,.nav-more>details>summary{height:var(--head-h);font:500 13.5px/var(--head-h) var(--mono);letter-spacing:-.01em}
.head-nav>ul>li>a::after,.nav-more>details>summary::after{height:2px;bottom:10px}
.nav-more ul{top:calc(100% + 1px);border:1px solid #D6C7AA}
.nav-more ul a,.head-menu li a{font-family:var(--mono);font-size:14px}
.head-menu>summary{font:500 14px/1 var(--mono)}
.menu-i{background:#283F7D}
.menu-i::after{background:#FDF8F0}
.head-menu>nav{top:calc(100% + 1px);border:1px solid #D6C7AA}

/* Buttons: navy, the small signal square holding the arrow (the brand book's one hot accent) */
.btn{gap:12px;padding:6px 6px 6px 16px;background:#283F7D;color:#FDF8F0;font:500 14px/1.2 var(--mono)}
.btn svg{box-sizing:content-box;width:16px;height:16px;padding:7px;background:#EC633D;color:#373737;border-radius:2px}
.help-links a{border-color:#D6C7AA;background:#FDF8F0}
.help-links a svg{color:#283F7D}

/* Margin notes: a technical-pen hand, small capitals, set at a slight angle with a pen rule under it */
.margin-note{display:inline-block;margin:0 0 14px;padding:0 4px 2px;font:400 19px/1.1 var(--hand);letter-spacing:.02em;text-transform:uppercase;color:#5B5B5B;rotate:-3deg;border-bottom:1.5px solid #5B5B5B}
.label,.kicker,.others-label,.op-label span,.tags-h,.card dt,.evidence dt,.hero-terms dt{font-family:var(--mono)}

/* Heroes on the grid paper */
.page-hero{border-bottom:0;padding:clamp(40px,6vw,86px) 0 clamp(30px,4vw,56px)}
.page-hero .lead{max-width:36em;font-size:clamp(18px,1.6vw,21px);color:#5B5B5B}
.home-hero.has-art{padding-top:clamp(28px,3.6vw,48px)}
.home-hero h1{max-width:15ch;font-size:clamp(42px,4.8vw,70px)}
.home-hero .lead{margin:22px 0 0;max-width:34em}
.hub-hero h1,.doc-hero h1{max-width:18ch}

/* The casino hero */
.case-hero{padding-top:clamp(34px,4.6vw,64px)}
.case-hero h1{font-size:clamp(44px,5.6vw,86px);max-width:12ch}
.case-hero .byline{font:600 15px/1.45 var(--body)}
.case-hero .testing{color:#5B5B5B}
.evidence>div{background:#FDF8F0;border-color:#D6C7AA;border-radius:2px}
.hero-terms>div{background:transparent;border:1px solid #373737;border-radius:2px}
.hero-terms dd{font-size:21px}
.checked-note{font:400 21px/1.15 var(--hand);color:#373737;text-transform:none;rotate:-2deg;margin:0 0 8px 6px}
.hero-main .tile{background:#FDF8F0;border:1px solid #373737;box-shadow:6px 6px 0 #C0BAAE;padding-left:52px}
.hero-main .tile.on-dark{background:#283F7D;border-color:#283F7D}
.badge{border-radius:50%;background:#283F7D;color:#FDF8F0;min-width:58px;min-height:58px}
.badge small{font-size:8.5px}
.hero-main .badge.hero-badge{min-width:76px;min-height:76px;outline:3px solid #EADFC9}
.hero-others .tile,.pick-logos .tile,.family .tile,.review-side .side-tile,.verdict-side .tile{background:#FDF8F0;border:1px solid #D6C7AA}
.tile.on-dark,.row-logo.on-dark{background:#283F7D}
.hero-others .tile.on-dark,.pick-logos .tile.on-dark,.family .tile.on-dark,.review-side .side-tile.on-dark,.verdict-side .tile.on-dark{background:#283F7D;border-color:#283F7D}
.constellation .hero-others li{position:relative}
.constellation .hero-others li::before{content:"";position:absolute;right:100%;top:50%;width:22px;border-top:1.5px dashed #0249B2}
/* Alternatives are not family: no register line to them, and a dashed edge that keeps them apart */
.constellation.rel-alternatives .hero-others li::before{display:none}
.constellation.rel-alternatives .hero-others .tile{border-style:dashed;border-color:#5B5B5B}


/* The octopus: a supporting brand mark that holds a card. On a casino page the card is the casino's own logo with its
   rating on the logo's bottom-left; on the home page it is a real family from the research packs. */
.om-art,.om-family{margin:0;position:relative}
.om-stage{position:relative}
.om-draw{display:block;width:100%;height:auto}
.om-own,.om-held{position:absolute;left:var(--l);top:var(--t);width:var(--w);min-height:var(--h)}
.om-own .tile{height:100%;min-height:clamp(110px,11vw,170px);padding:16px 20px 16px 50px;background:#FDF8F0;border:1px solid #373737;box-shadow:6px 6px 0 #003084}
.om-own .tile.on-dark{background:#283F7D;border-color:#283F7D}
.om-own .tile img{height:clamp(50px,5.4vw,80px)}
.om-own .tile.sq img{height:clamp(76px,8vw,116px)}
.om-own .badge.hero-badge{top:auto;right:auto;left:-20px;bottom:-20px;min-width:68px;min-height:68px;outline:3px solid #EADFC9}
.om-own .badge.hero-badge b{font-size:24px}
.om-family .checked-note{margin-left:18%}
.om-family,.om-home{max-width:540px;margin-left:auto}
.om-held{display:grid;align-content:center;gap:10px;padding:14px 16px 16px;background:#FDF8F0;border:1px solid #373737;box-shadow:6px 6px 0 #003084}
.om-held-h{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;font:500 11.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#373737}
.om-members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.om-members li{margin:0}
.om-members a{display:grid;gap:6px;justify-items:center;color:#373737;text-decoration:none;text-align:center}
.om-members .tile{width:100%;min-height:58px;padding:6px;background:#FDF8F0;border:1px solid #D6C7AA}
.om-members .tile.on-dark{background:#283F7D;border-color:#283F7D}
.om-members .tile img{height:34px}
.om-members .tile.sq img{height:46px}
.om-name{font:500 15px/1.15 var(--display)}
.om-members a:hover .om-name{text-decoration:underline}

/* The short answer: a margin note over a large first sentence */
.lead-sec{padding-top:clamp(10px,2vw,24px)}
.lead-text .lede{font-size:clamp(23px,2.3vw,31px);line-height:1.22;letter-spacing:-.015em}

/* At a glance: paper cards with a hairline, the navy round badge top right, marks for payment methods */
.card{background:#FDF8F0;border-color:#D6C7AA;border-radius:3px;padding:18px 16px 20px}
.card.current{border:2px solid #373737;padding:17px 15px 19px;box-shadow:6px 6px 0 #C0BAAE}
.card .tile{background:transparent;min-height:78px}
.card .tile.on-dark{background:#283F7D}
.card dd{font-family:var(--body)}
.card .f-offer dd{font:500 17px/1.3 var(--display)}
.pay li{border-radius:2px;background:#EADFC9;font-family:var(--mono);font-size:11.5px}
.pay li.pay-logo{background:#FDF8F0;border-color:#D6C7AA}
.after-cards{color:#5B5B5B}

/* Tables: paper, mono heads, logos beside the names */
.tablewrap{border-color:#373737;border-radius:2px}
thead th{background:#E0D3BA;font-family:var(--mono);font-weight:500}
th,td{border-bottom-color:#D6C7AA}
.row-name .row-logo{background:#FDF8F0;border:1px solid #D6C7AA}
.row-name .row-logo.on-dark{background:#283F7D;border-color:#283F7D}

/* On this page: a drafting-sheet list with mono numbers */
.toc{background:#FDF8F0;border:1px solid #D6C7AA;border-radius:2px}
.toc li::marker,.doc-toc li::marker{font-family:var(--mono);color:#5B5B5B}
.doc-toc{background:#FDF8F0;border:1px solid #D6C7AA;border-radius:2px}

/* Sections: generous space, a hairline between them */
.sec+.sec{border-top:1px solid #D6C7AA}
.room-what-carries-over,.room-how-we-checked{background:#E0D3BA}
.room-how-we-checked h2{font-size:clamp(28px,2.6vw,36px)}
.room-verdict{background:#0249B2;color:#FDF8F0}
.room-verdict h2,.room-verdict .margin-note{color:#FDF8F0;border-color:#FDF8F0}
.room-verdict .statement>p{color:#FDF8F0}
.room-verdict .verdict-side .tile{border-color:#FDF8F0;box-shadow:6px 6px 0 #003084}
.room-verdict .badge{outline:3px solid #0249B2}
.room-verdict a{color:#FDF8F0}

/* Reviews: each sister on its own sheet */
.room-sister-review .review{margin-top:28px;padding:clamp(20px,2.6vw,32px);background:#FDF8F0;border:1px solid #D6C7AA;border-radius:3px}
.room-sister-review .review+.review{border-top:1px solid #D6C7AA}
.review-head .tile{background:#FDF8F0;border:1px solid #D6C7AA}
.review-head .tile.on-dark{background:#283F7D;border-color:#283F7D}
.tags{list-style:none;padding:0}
.tags li{position:relative;padding-left:16px}
.tags li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:#0249B2}
/* Cons carry the signal square, so a drawback reads apart from a strength at a glance */
.tags-con li::before{background:#EC633D}
.suits{border-left:0;padding:10px 14px;background:#E0D3BA;font-weight:600}

/* The other brands on the licence: a register list in two columns */
.room-other-brands .entries:not(.with-logos){columns:2 22em;column-gap:40px}
.room-other-brands .entries:not(.with-logos) li{break-inside:avoid;padding:9px 0;font-size:15px}
.room-other-brands .entries b{font:500 17px/1.25 var(--display)}
.room-other-brands .entries.with-logos li{border-color:#D6C7AA;background:#FDF8F0}
.entry-logo{border-color:#D6C7AA;background:#FDF8F0}
.entry-logo.on-dark{background:#283F7D;border-color:#283F7D}

/* Questions as paper sheets, folded, the first open; the plus is the navy of the actions */
.faq-list{display:grid;gap:12px;max-width:54rem}
.faq-item{padding:0;background:#FDF8F0;border:1px solid #D6C7AA;border-top:1px solid #D6C7AA;border-radius:3px}
.faq-item h3{font-size:clamp(19px,1.5vw,21px);margin:0 0 8px}
.faq-item>summary{padding:18px 22px;align-items:center}
.faq-item>summary h3{font-size:clamp(19px,1.5vw,21px);margin:0}
.faq-item>summary::after{margin-top:0;color:#283F7D}
.faq-item>summary~*{margin:0;padding:0 22px}
.faq-item>summary~:last-child{padding-bottom:20px}
.faq-item[open]>summary{padding-bottom:10px}
.faq-item[open]{border-color:#373737}

/* Steps and picks on paper sheets */
.step{background:#FDF8F0;border-color:#373737;border-radius:2px}
.step-n{font:400 34px/1 var(--hand);color:#0249B2}
.pick{padding:14px 16px;background:#FDF8F0;border:1px solid #D6C7AA;border-radius:2px}

/* Questions and sources */
.faq-item{border-top-color:#D6C7AA}
.read{color:#5B5B5B}
.src-domain{font:500 15px/1.35 var(--mono);letter-spacing:-.01em}
a.src-domain{color:#2F52B0}
.src-uses{font-size:15px;line-height:1.5;color:#5B5B5B}
/* The team's own testing leads the list, on its own paper sheet */
.sources .src-team{padding:12px 16px;background:#FDF8F0;border:1px solid #373737;border-radius:2px}
.src-team .src-domain{color:#373737}
.src-team .src-uses{color:#373737}
.author-box{background:#FDF8F0;border-color:#D6C7AA}

/* The hub's operator groups */
.op-label{font-size:14px}
.hub-card .blurb{color:#5B5B5B}

/* Footer: navy, the wordmark in paper */
.site-foot{margin-top:0}
.site-foot .wm-mark *{fill:#FDF8F0;stroke:#FDF8F0}

@media (max-width:1180px){
.case-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
}
@media (max-width:1023px){
.head-in{width:calc(100% - 2 * var(--gutter) + 16px);padding:0 6px 0 12px}
}
@media (max-width:860px){
.case-hero{text-align:center}
.case-hero h1{margin:0 auto}
.evidence,.hero-terms{justify-content:center}
.checked-note{text-align:center;margin:0 0 10px}
.room-verdict .verdict-side{margin-left:16px}
/* Phones keep the logo, the rating and the date first (New Zealand's option C); the octopus stays on the home page */
.om-family .om-draw{display:none}
.om-family .checked-note{margin-left:0}
.om-own{position:relative;left:auto;top:auto;width:auto;max-width:330px;min-height:0;margin:0 auto 18px}
.home-grid{grid-template-columns:minmax(0,1fr);gap:0}
/* Half the space between the lead and the octopus (owner, 2 October): the drawing's head starts a sixth of its width
   below the top of its canvas (y 100 of a 600 wide box), so the art moves up by that strip, leaving 42px of air. */
.home-art{margin-top:calc(42px - min(100%, 540px) / 6)}
}
@media (max-width:700px){
:root{--head-h:54px}
h2{font-size:32px}
.case-hero h1{font-size:clamp(40px,11vw,50px)}
.home-hero h1{font-size:clamp(42px,12.4vw,52px)}
.margin-note{font-size:17px}
.om-home .om-held{left:3%;width:94%}
.om-members .tile{min-height:46px}
.om-members .tile img{height:26px}
.om-name{font-size:13.5px}
.room-other-brands .entries:not(.with-logos){columns:1}
}

/* Round 3 (owner, 1 October): "the reference website had a good contrast with the blue color" -> illoca's cobalt
   and navy as full-width bands with paper text and paper cards on them; and the reading text runs to the site's right
   content edge on every page ("that invincible border to match the actual border of the website"), in two columns
   where a block has several paragraphs so lines stay readable. */
.toc-strip,.room-cross-sister-comparison,.room-extras,.sec-sister-sites-we-have-checked,.hub-hero{background:#283F7D;color:#FDF8F0}
.room-what-carries-over,.sec-how-we-decide-two-casinos-are-sisters,.doc-hero{background:#0249B2;color:#FDF8F0}
.toc-strip{padding:clamp(28px,3.4vw,44px) 0}
.toc{background:transparent;border:1px solid #FDF8F0}
.toc .label{color:#FDF8F0}
.toc a,.toc li::marker{color:#FDF8F0}
:is(.toc-strip,.room-cross-sister-comparison,.room-extras,.sec-sister-sites-we-have-checked,.hub-hero,.room-what-carries-over,.sec-how-we-decide-two-casinos-are-sisters,.doc-hero) :is(h1,h2,p,.lead,.label,.op-label,.op-label span,.margin-note){color:#FDF8F0}
:is(.room-cross-sister-comparison,.room-extras,.sec-sister-sites-we-have-checked,.room-what-carries-over,.sec-how-we-decide-two-casinos-are-sisters,.doc-hero,.hub-hero) a:not(.btn):not(.card a){color:#FDF8F0}
:is(.room-cross-sister-comparison,.room-extras,.sec-sister-sites-we-have-checked) .card,:is(.room-cross-sister-comparison,.room-extras) .step{color:#373737}
:is(.sec-sister-sites-we-have-checked) .card :is(p,h3,dt,dd),.room-extras .step p{color:#373737}
.sec-sister-sites-we-have-checked .card{border-color:#FDF8F0;box-shadow:6px 6px 0 #003084}
.room-extras .step{border-color:#FDF8F0;box-shadow:5px 5px 0 #003084}
.room-cross-sister-comparison .tablewrap{border-color:#FDF8F0;box-shadow:6px 6px 0 #003084}
.room-what-carries-over{background:#0249B2}
.room-what-carries-over .prose>p,.sec-how-we-decide-two-casinos-are-sisters .prose>p{color:#FDF8F0}
.sec-how-we-decide-two-casinos-are-sisters .btn,.sec-sister-sites-we-have-checked .btn{background:#FDF8F0;color:#283F7D}
.doc-hero .lead,.hub-hero .lead{color:#FDF8F0}
.sec+.sec{border-top-color:transparent}

/* The reading text uses the full content width */
.prose,.lead-text,.after-cards,.review-body,.doc-body,.picks,.author-box,.statement,.prose.cols{max-width:none}
.prose:has(>p:nth-child(2)),.prose.cols{columns:2 24em;column-gap:clamp(32px,4vw,64px)}
.prose:has(>p:nth-child(2))>p,.prose.cols>p{break-inside:auto}
.lead-text .lede{max-width:none}
.faq-list{display:grid;grid-template-columns:minmax(0,1fr);max-width:none;align-items:start}
.help-links{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));max-width:none}
.sources{columns:2 26em;column-gap:48px}
.sources li{break-inside:avoid}
.doc-body .doc-sec>p{max-width:none}
.doc-hero .lead,.hub-hero .lead{max-width:60em}

/* Round 4 (audit, 1 October) */
/* Tables keep ink text on their paper ground, also inside the navy and cobalt bands */
.tablewrap{color:#373737}
.tablewrap a:not(.btn){color:#2F52B0}
/* Labels on ratings and chips at least 11px */
.badge small{font-size:11px}
.evidence dt,.hero-terms dt,.others-label,.om-acct{font-size:11px}
/* Site pages: the contents box across the top, the text below it at full width, so no empty column */
.doc-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.doc-toc{position:static;max-height:none}
.doc-toc ol{columns:3 15em;column-gap:32px}
.doc-toc li{break-inside:avoid}
/* Owner, 5 Oct 2026 (launch changes): the rating number and its label in white on the navy circle (on_navy, the
   brand's white for text on navy), whatever the section around the card sets for its text: inside the navy cards
   section the card text rule made them ink grey */
.badge b,.badge small{color:#FDF8F0}
/* Each casino card's button to its article, at the foot of the card; navy on the cream card even inside the navy
   cards section (whose own buttons are cream) */
.card .card-go{margin:auto 0 0;padding-top:4px}
.card .card-go .btn{background:#283F7D;color:#FDF8F0}
/* Family by family: the paragraphs across the full width, links on the casino names in the text */
.sec-family-by-family .prose,.sec-family-by-family .hub-sub{max-width:none}