@font-face{font-family:'Arimo';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/arimo-variable-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:'Tinos';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/tinos-400-italic-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:'Tinos';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/tinos-400-normal-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:'Tinos';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/tinos-700-normal-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:#f1eadf;--ink:#231d18;--muted:#5a4d40;--link:#a33f00;--rule:#c7aa88;--surface:#f1eadf;--tint:#c7aa88;--head-bg:#231d18;--head-ink:#c7aa88;--head-mark:#ff6a00;--foot-bg:#231d18;--foot-ink:#c7aa88;--accent:#231d18;--accent-ink:#c7aa88;--badge-bg:#231d18;--badge-ink:#c7aa88;--head-rule:#3a3129;--foot-rule:#3a3129;--tint-rule:#4a3f34;--tile-bg:#c7aa88;--tile-ink:#231d18;--status-bg:#ff6a00;--status-ink:#231d18;--ok-bg:#f1eadf;--ok-ink:#231d18;--claim-bg:#c7aa88;--claim-ink:#231d18;--focus:#a33f00;--warn-bg:#c7aa88;--warn-ink:#231d18;--display:"Arimo", Arial, "Liberation Sans", Helvetica, sans-serif;--body:"Tinos", "Times New Roman", Times, "Liberation Serif", serif;--ui:"Arimo", Arial, "Liberation Sans", Helvetica, sans-serif;--mono:"Arimo", Arial, "Liberation Sans", Helvetica, sans-serif;--radius:0px;--display-weight:700}
/* 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}}

/* site */
/* Parrowby, the register in print (brand/tokens.json, brand book approved 30 September 2026; design pass 2 October 2026).
   Structure after a company profile directory (companiesmarketcap.com: name and key figures first, then the record);
   the look is Parrowby's own: press-black bands, kraft record panels, signal orange only where something needs
   attention, Arimo for headings, labels and figures, Tinos for reading. Square corners, no shadows, no gradients.
   Every colour is a role variable or a token hex. */

/* Wordmark: bold capitals with the orange square as its full stop */
.wm-text{font-weight:700;text-transform:uppercase;letter-spacing:-.045em}
.wm-text::after{content:"";display:inline-block;width:.2em;height:.2em;margin-left:.04em;background:#FF6A00;vertical-align:baseline}

/* The page sits on press-black's deeper edge beyond the content width on wide screens (token "deep") */
@media (min-width:1300px){
  html{background:#100E0B}
  body{max-width:1300px;margin:0 auto;box-shadow:none}
}

/* Reading type: Tinos 19 on paper */
body{font-size:19px;line-height:1.55}
.label,.kicker{font:700 12px/1.2 var(--ui);letter-spacing:.06em}

/* Header: Arimo capitals, the signal rule under the current page */
.head-logo{font-size:26px}
.head-nav>ul>li>a,.nav-more>details>summary{font:700 13px/var(--head-h) var(--ui);letter-spacing:.07em;text-transform:uppercase}
.nav-more ul a{font:700 14px/1.35 var(--ui)}
.head-menu li a{font-family:var(--ui);font-weight:700}

/* Headings: H2 in capitals under a heavy press-black rule, like a register section */
h1,h2{text-transform:uppercase}
h2{font-size:clamp(24px,3vw,32px);line-height:1;letter-spacing:-.02em;padding-top:14px;border-top:4px solid var(--ink)}
h3{font-size:20px;line-height:1.2;letter-spacing:-.01em;text-transform:none}
.card h3,.faq-item h3{text-transform:none}

/* Hero: a press-black band with a thin record frame and two kraft corners; the title huge in kraft capitals */
.page-hero{position:relative;background:var(--head-bg);color:var(--head-ink);border-bottom:0;padding:clamp(52px,7vw,96px) 0 clamp(44px,6vw,80px)}
.page-hero>.wrap{position:relative}
.page-hero>.wrap::before,.page-hero>.wrap::after{content:"";position:absolute;inset:calc(-1 * clamp(22px,3vw,40px)) calc(var(--gutter) - clamp(10px,1.6vw,22px));pointer-events:none}
.page-hero>.wrap::before{border:1px solid var(--head-rule)}
.page-hero>.wrap::after{border:2px solid var(--head-ink);-webkit-mask:conic-gradient(at 18px 18px,transparent 75%,var(--ink) 0) 0 0/calc(100% - 18px) calc(100% - 18px);mask:conic-gradient(at 18px 18px,transparent 75%,var(--ink) 0) 0 0/calc(100% - 18px) calc(100% - 18px)}
.page-hero h1{max-width:min(100%,27ch);color:var(--head-ink);font-size:clamp(34px,5.6vw,76px);line-height:.92;letter-spacing:-.03em}
.page-hero .kicker,.page-hero .meta,.page-hero .byline,.page-hero .testing{color:var(--head-ink)}
.page-hero .kicker{display:inline-block;margin:0 0 20px;padding:4px 8px;border:1px solid var(--head-ink)}
.page-hero .meta{margin-top:22px;font:700 12px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase}
.page-hero .lead{color:var(--head-ink)}
.page-hero a{color:var(--head-ink)}
.status-bar p{font:700 13px/1.3 var(--ui);letter-spacing:.08em;padding:13px 0}

/* No figures strip under the hero (owner, 5 October 2026); the opening paragraph after the company record reads as a standfirst */
.md .md-body{padding-top:0}
.md-body>.fact-box+p,.md-post>p:first-child{font-size:clamp(20px,1.8vw,23px);line-height:1.5}

/* Company record: the kraft fact box beside the text on wide screens, under the figures on narrow ones */
.md-body>.fact-box{padding:16px 22px 6px;background:var(--tint)}
.md-body>.fact-box::before{content:"Company record";display:block;padding:0 0 10px;border-bottom:2px solid var(--ink);font:700 12px/1.2 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.fact-box>div{grid-template-columns:1fr;gap:3px;padding:11px 0}
.fact-box dt{font:700 11.5px/1.3 var(--ui);letter-spacing:.06em;color:var(--tint-rule)}
.fact-box dd{font:400 15.5px/1.45 var(--ui)}

/* Panels: the fine on press-black under a signal bar; the licence timeline on paper; a claim on kraft */
.md .panel{margin:0 0 1.6em;padding:18px 22px 20px;border:0;border-radius:0}
.md .panel-label{font:700 12px/1.3 var(--ui);letter-spacing:.08em}
.md .panel-warning{background:var(--ink);color:var(--paper);border-top:6px solid #FF6A00}
.md .panel-warning .panel-label{color:var(--tint)}
.panel-warning p{font:700 clamp(20px,2vw,25px)/1.3 var(--display);letter-spacing:-.01em}
.panel-warning li{font-family:var(--body)}
.panel-warning a{color:var(--paper)}
.md .panel-confirmed{border:1px solid var(--ink)}
.panel-confirmed ul{position:relative;margin:4px 0 0;padding:0 0 0 30px;list-style:none}
.panel-confirmed ul::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--tint)}
.panel-confirmed li{position:relative;margin:0;padding:0 0 14px}
.panel-confirmed li:last-child{padding-bottom:0}
.panel-confirmed li::before{content:"";position:absolute;left:-30px;top:5px;width:12px;height:12px;background:var(--ink)}
.panel-confirmed li strong{display:block;font:700 12.5px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.panel-claim{background:var(--tint)}
/* the licence timeline runs across the text column on wider screens, dates left to right */
@media (min-width:701px){
  .md-body>.panel-confirmed ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 24px;padding:22px 0 0}
  .md-body>.panel-confirmed ul::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:2px}
  .md-body>.panel-confirmed li{padding:0}
  .md-body>.panel-confirmed li::before{left:0;top:-22px}
}

/* The register's active domains as a dense logo grid: hairline cells, logo on paper, name and domain under it */
.md-operator .md-cards .cards{grid-auto-flow:dense;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.md-operator .md-cards .cards>li{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.md-operator .md-cards .card{gap:6px;padding:12px 10px 14px;border:0}
.md-operator .md-cards .tile{min-height:62px;padding:8px 10px;background:var(--paper);font-size:16px}
.md-operator .md-cards .tile.on-dark{background:var(--ink)}
.md-operator .md-cards .tile img{height:48px}
.md-operator .md-cards .card h3{font-size:15px;line-height:1.25}
.md-operator .md-cards .card .domain{margin:0;font-size:12.5px}
.md-cards .block-label{color:var(--ink)}
/* a site our team read in full: its card takes two cells by two, with its offer, rating and source, so no card in the
   register grid stands empty and the brand appears once on the page */
.md-operator .md-cards .cards>li:has(dl){grid-column:span 2;grid-row:span 2;background:var(--surface)}
.md-operator .md-cards .cards>li:has(dl) .card{gap:10px;padding:18px 18px 16px}
.md-operator .md-cards .cards>li:has(dl) .tile{min-height:74px}
.md-operator .md-cards .cards>li:has(dl) .tile img{height:56px}
.md-operator .md-cards .cards>li:has(dl) .card h3{font-size:19px}
.md-operator .md-cards .cards>li:has(dl) .card dl{text-align:left}
/* a rated card without an offer line takes two cells across, so its badge clears the logo */
.md-operator .md-cards .cards>li:has(.badge):not(:has(dl)){grid-column:span 2}
/* logos sit on paper inside a thin kraft edge; a white logo keeps its press-black ground */
.card .tile{background:var(--paper);outline:1px solid var(--rule);outline-offset:-1px}
.card .tile.on-dark{background:var(--ink);outline:0}
/* the cards a page writes up (offers and sources): a quiet kraft edge, square */
.card{border-color:var(--tint)}
.card dt{font-family:var(--ui);font-weight:700}
.badge b{font-variant-numeric:tabular-nums}

/* Operators A to Z: the table is the page; a fined operator's last cell is a signal block */
.md-body>.tablewrap{border:0;border-top:4px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper)}
.tablewrap table{font-size:15.5px}
thead th{font:700 11.5px/1.3 var(--ui);letter-spacing:.06em}
tbody th{font:700 17px/1.25 var(--ui);background:var(--paper)}
tbody th a{color:var(--ink);text-decoration-color:var(--tint)}
tbody td{font-variant-numeric:tabular-nums}
td:has(>strong){background:#FF6A00;color:var(--ink)}
/* the A to Z keeps short rows when it scrolls sideways on a phone: the wide cells get room instead of wrapping tall */
.md-body>.tablewrap td:last-child{min-width:230px}
.md-body>.tablewrap td:nth-last-child(2){min-width:190px}
.row-logo{display:none}

/* Lists from the register and questions */
ol.register li::marker{font:700 14px var(--ui)}
.faq-item h3{font-size:19px}
.md-body>h2{margin-top:clamp(40px,4.6vw,60px)}

/* Sources: compact, small, under a rule */
.sources{font:400 14.5px/1.45 var(--ui)}

/* Site pages: the contents list as a kraft rail beside the reading column */
.doc-toc{border-top:4px solid var(--ink)}
.doc-toc ol{font-family:var(--ui);font-weight:700}
.doc-sec h2{font-size:clamp(22px,2.6vw,28px)}

/* Footer: press-black, the 18+ mark as a signal square */
.foot-h{font-family:var(--ui);letter-spacing:.08em}
.foot-group ul{font-family:var(--ui)}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.age{background:#FF6A00;color:var(--ink);border-color:#FF6A00;font-family:var(--ui)}

/* Pros and cons of a site our team read: two panels side by side, the points against under a signal edge */
.md-operator>.panel-claim{padding:16px 20px 14px;background:var(--surface);border:1px solid var(--tint);border-top:4px solid var(--ink)}
.md-operator>.panel-claim+.panel-claim{border-top-color:#FF6A00}
.md-operator>.panel-claim .panel-label{color:var(--ink)}
.md-operator>.panel-claim ul{margin:0;padding-left:1.1em;font:400 16px/1.45 var(--ui)}
.md-operator>.panel-claim li{margin:0 0 6px}
.md-operator>h3{margin-top:1.6em;padding-top:12px;border-top:1px solid var(--tint)}
/* Home: the contents list */
.md-post>.panel-claim{padding:16px 20px;background:var(--tint);border:0;border-top:4px solid var(--ink)}
.md-post>.panel-claim .panel-label{color:var(--ink)}
.md-post>.panel-claim ul{margin:0;padding:0;list-style:none;font:700 15px/1.35 var(--ui)}
.md-post>.panel-claim li{margin:0;padding:8px 0;border-top:1px solid var(--tint-rule)}
.md-post>.panel-claim li:first-child{border-top:0}
.md-post>.panel-claim a{color:var(--ink)}

/* Wide screens: the page uses the width. The figures run across the top; the text column is wider; the company record
   (operator pages) or the contents list (home) stays in view in a side column while the page scrolls; wide tables and
   the figures span both. Pros and cons sit side by side in the text column. */
@media (min-width:1000px){
  .md-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(260px,340px);column-gap:28px;align-items:start}
  .md-body>*{grid-column:1/3;max-width:none;min-width:0}
  .md-body>.tablewrap,.md-body>h2:has(+.tablewrap){grid-column:1/-1}
  .md-body>.fact-box,.md-post>.panel-claim{grid-column:3;position:sticky;top:calc(var(--head-h) + 24px);margin:0 0 0 28px}
  .md-operator>.fact-box{grid-row:1/span 400}
  .md-post>.panel-claim{grid-row:8/span 400}
  .md-operator>.panel-claim:has(+.panel-claim){grid-column:1}
  .md-operator>.panel-claim+.panel-claim{grid-column:2}
  .md-operator>.panel-claim{align-self:stretch;margin-bottom:1.4em}
}

@media (max-width:700px){
  body{font-size:17px}
  /* the A to Z as one block per operator, so the fine shows beside the name instead of off-screen */
  .md-post>.tablewrap{overflow:visible}
  .md-post>.tablewrap table{min-width:0}
  .md-post>.tablewrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .md-post>.tablewrap tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:14px 0;border-bottom:1px solid var(--rule)}
  .md-post>.tablewrap tbody tr:last-child{border-bottom:0}
  .md-post>.tablewrap tbody th{grid-column:1/-1;position:static;min-width:0;padding:0;border:0;font-size:18px}
  .md-post>.tablewrap tbody td{display:block;min-width:0!important;padding:0;border:0;font-size:15px}
  .md-post>.tablewrap tbody td::before{display:block;margin:0 0 2px;font:700 10.5px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .md-post>.tablewrap tbody td:nth-of-type(1)::before{content:"Commission account"}
  .md-post>.tablewrap tbody td:nth-of-type(2)::before{content:"Licence"}
  .md-post>.tablewrap tbody td:nth-of-type(3)::before{content:"Active domains"}
  .md-post>.tablewrap tbody td:nth-of-type(4)::before{content:"Company registered in"}
  .md-post>.tablewrap tbody td:nth-of-type(5)::before{content:"Regulatory actions"}
  .md-post>.tablewrap tbody td:nth-of-type(5){grid-column:1/-1}
  .md-post>.tablewrap tbody td:has(>strong){padding:8px 10px}
  .md-post>.tablewrap tbody td:has(>strong)::before{color:var(--ink)}
  .page-hero h1{font-size:clamp(30px,9vw,44px)}
}

/* ---- 5 October 2026 round (owner: "Visually it seems still drained, the whole website") ---- */

/* The register grid again: the shared builder's balanced rows (.cards.bal, a centred flex row) would otherwise beat the
   dense grid above, leave an empty strip at the left and collapse the two-by-two cards to one column */
.md-operator .md-cards .cards.bal{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));justify-content:stretch;gap:0}
.md-operator .md-cards .cards.bal>li{flex:none;min-width:0}
/* the rating badge never sits on a logo: the tile keeps clear of the badge's corner */
.card:has(>.badge)>.tile{padding-right:64px;padding-left:64px}
.md-operator .md-cards .tile{min-height:70px}
.md-operator .md-cards .cards>li:has(dl) .tile{min-height:86px}

/* Section numbers: each H2 of a Markdown page carries its place in the record as a small press-black tag with a kraft
   numeral, like the reference's corner labels (signal stays for what needs attention) */
.md-body{counter-reset:sec}
.md-body>h2:not(#sources){counter-increment:sec}
.md-body>h2:not(#sources)::before{content:counter(sec,decimal-leading-zero);display:inline-block;margin:0 14px 0 0;padding:5px 7px 4px;background:var(--ink);color:var(--tint);font:700 13px/1 var(--ui);letter-spacing:.04em;vertical-align:.3em}

/* The licence timeline: a kraft block, dates as black squares on a press-black rule */
.md .panel-confirmed{background:var(--tint);border:0;border-top:4px solid var(--ink)}
.md .panel-confirmed .panel-label{color:var(--ink)}
.panel-confirmed ul::before{background:var(--ink)}
.panel-confirmed li strong{color:var(--ink)}

/* A review our team wrote: the logo, the name and the rating in one header row on a kraft rule */
.md-operator>.md-review-head{display:flex;align-items:center;gap:16px;margin:2em 0 .8em;padding:14px 0 0;border-top:4px solid var(--tint)}
.md-review-head .tile{flex:none;width:168px;min-height:64px;padding:8px 12px;background:var(--paper);outline:1px solid var(--rule);outline-offset:-1px}
.md-review-head .tile.on-dark{background:var(--ink);outline:0}
.md-review-head .tile img{height:44px}
.md-review-head h3{flex:1;margin:0;font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-.015em}
.md-review-head .badge{position:static;flex:none;min-width:62px;min-height:62px}
.md-review-head .badge b{font-size:24px}
.md-operator>h3{font-size:22px;border-top:4px solid var(--tint)}

/* Home: the casinos our team rated, a press-black band with kraft cards, each linked to the operator that runs it */
.md-post>#casinos-you-may-know-and-who-runs-them,.md-post>#casinos-you-may-know-and-who-runs-them+p,.md-post>.md-cards{background:var(--ink);color:var(--tint)}
.md-post>#casinos-you-may-know-and-who-runs-them{margin-bottom:0;padding:22px clamp(16px,2.4vw,28px) 0;border-top:4px solid #FF6A00}
.md-body.md-post>h2#casinos-you-may-know-and-who-runs-them::before{background:var(--tint);color:var(--ink)}
.md-post>#casinos-you-may-know-and-who-runs-them+p{margin:0;padding:12px clamp(16px,2.4vw,28px) 4px;font-size:17px}
.md-post>.md-cards{margin:0 0 1.6em;padding:12px clamp(16px,2.4vw,28px) clamp(18px,2.4vw,28px)}
.md-post>.md-cards .block-label{color:var(--tint);margin:0 0 12px}
.md-post>.md-cards .cards.bal{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px}
.md-post>.md-cards .cards.bal>li{flex:none;min-width:0}
.md-post>.md-cards .card{gap:6px;padding:10px 10px 12px;background:var(--tint);border:0;color:var(--ink)}
.md-post>.md-cards .card .tile{min-height:64px;padding:8px 66px 8px 10px;outline:0}
.md-post>.md-cards .card .tile img{height:40px}
.md-post>.md-cards .card h3{font-size:16px;line-height:1.2}
.md-post>.md-cards .card h3 a{color:var(--ink);text-decoration-color:var(--ink)}
.md-post>.md-cards .card .domain{margin:0;font-size:12.5px;color:var(--tint-rule)}
.md-post>.md-cards .card .card-source{display:none}
.md-post>.md-cards .badge{top:6px;right:6px;min-width:50px;min-height:50px}

/* on wide screens the band runs the full width, so the rated brands sit six across under the A to Z */
@media (min-width:1000px){
  .md-post>#casinos-you-may-know-and-who-runs-them,.md-post>#casinos-you-may-know-and-who-runs-them+p,.md-post>.md-cards{grid-column:1/-1}
  .md-post>#casinos-you-may-know-and-who-runs-them+p{max-width:none;padding-right:40%}
}
/* Site pages on wide screens: the contents rail and a reading column, centred, so no third of the screen stands empty;
   about and method number their sections like the operator pages (the legal pages carry their own numbers) */
@media (min-width:1000px){
  .doc-grid{grid-template-columns:260px minmax(0,72ch);justify-content:center}
  .doc-body{max-width:none}
}
.doc-grid:not(:has(.own-numbers)) .doc-body{counter-reset:sec}
.doc-grid:not(:has(.own-numbers)) .doc-sec{counter-increment:sec}
.doc-grid:not(:has(.own-numbers)) .doc-sec>h2::before{content:counter(sec,decimal-leading-zero);display:inline-block;margin:0 12px 0 0;padding:5px 7px 4px;background:var(--ink);color:var(--tint);font:700 12px/1 var(--ui);letter-spacing:.04em;vertical-align:.25em}
.doc-sec h2{padding-top:12px;border-top:4px solid var(--ink)}

@media (max-width:700px){
  /* Phones: a plain register entry is one compact row (logo left, name and domain right), one per row as the owner
     asked, at about half the height of a full card; a site our team read keeps its full card */
  .md-operator .md-cards .cards.bal{grid-template-columns:minmax(0,1fr)}
  .md-operator .md-cards .cards>li:has(dl),.md-operator .md-cards .cards>li:has(.badge):not(:has(dl)){grid-column:auto;grid-row:auto}
  .md-operator .md-cards .cards>li:not(:has(dl)):not(:has(.badge)) .card{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:14px;row-gap:2px;padding:8px 10px;text-align:left}
  .md-operator .md-cards .cards>li:not(:has(dl)):not(:has(.badge)) .tile{grid-row:1/3;min-height:48px;padding:4px 8px}
  .md-operator .md-cards .cards>li:not(:has(dl)):not(:has(.badge)) .tile img{height:34px}
  .md-operator .md-cards .cards>li:not(:has(dl)):not(:has(.badge)) h3.tile{font-size:13px}
  .md-operator .md-cards .cards>li:not(:has(dl)):not(:has(.badge)) .card>h3:not(.tile){align-self:end}
  .md-operator .md-cards .cards>li:not(:has(dl)):not(:has(.badge)) .domain{align-self:start}
  .md-operator .md-cards .cards>li:not(:has(dl)):not(:has(.badge)) h3.tile+.domain{grid-row:1/3}
  .md-review-head .tile{width:118px;min-height:52px}
  .md-review-head .tile img{height:34px}
  /* the rated brands as compact rows: logo, name and domain, the rating at the right */
  .md-post>.md-cards .cards.bal{grid-template-columns:minmax(0,1fr);gap:8px}
  .md-post>.md-cards .card{display:grid;grid-template-columns:104px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:2px;padding:8px;text-align:left}
  .md-post>.md-cards .card .tile{grid-column:1;grid-row:1/3;min-height:50px;padding:4px 8px}
  .md-post>.md-cards .card .tile img{height:34px}
  .md-post>.md-cards .card h3{grid-column:2;align-self:end}
  .md-post>.md-cards .card .domain{grid-column:2;align-self:start}
  .md-post>.md-cards .card .badge{position:static;grid-column:3;grid-row:1/3;min-width:52px;min-height:52px}
  /* a read-in-full card keeps its facts with a shorter logo band */
  .md-operator .md-cards .cards>li:has(dl) .tile{min-height:64px}
  .md-operator .md-cards .cards>li:has(dl) .tile img{height:42px}
  .md-operator .md-cards .cards>li:has(dl) .card{padding:14px 14px 12px;gap:6px}
}