/* CasinoTrust — clean · flat · minimal. Mobile-first. Light + dark (auto). */
:root {
  --ink: #1e2329;
  --slate: #333b47;
  --white: #ffffff;
  --gold: #fcd535;
  --gold-ink: #1e2329;

  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --bg-card: #ffffff;
  --text: #1e2329;
  --text-2: #4b5563;
  /* 4.73:1 on the grey band (#f5f6f8) and 5.12:1 on white — #6b7280 measured
     4.47:1 on the band, just under the WCAG AA floor. */
  --text-3: #686e7b;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --accent: #fcd535;
  --accent-soft: rgba(252, 213, 53, .18);
  --accent-text: #8a6d00;
  /* Both carry meaning in the comparison tables ("yes"/"no", ICM +/−), so they
     have to clear 4.5:1 on white and on the grey band. #16a34a was 3.3:1 and
     #dc2626 was 4.47:1 on the band. */
  --green: #15803d;
  --red: #c81e1e;
  --shadow: 0 1px 2px rgba(30, 35, 41, .06), 0 8px 24px -12px rgba(30, 35, 41, .12);
  --radius: 14px;
  --radius-sm: 8px;
  /* Google Sans is published on Google Fonts as two families: Flex (display /
     variable) and Text (optimised for running copy). "Google Sans" stays in the
     stack so devices that have the real family installed use it directly. */
  --font: "Google Sans Text", "Google Sans", "Google Sans Flex", "Product Sans", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Google Sans Flex", "Google Sans", "Google Sans Text", "Product Sans", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 44px);
  --header-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1e2329; --bg-soft: #252b33; --bg-card: #2a313b;
    --text: #ffffff; --text-2: #c5cbd4; --text-3: #9aa3ae;
    --line: #333b47; --line-2: #3f4856;
    --accent-soft: rgba(252, 213, 53, .14); --accent-text: #fcd535;
    --green: #34d399; --red: #f87171;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --bg: #1e2329; --bg-soft: #252b33; --bg-card: #2a313b;
  --text: #ffffff; --text-2: #c5cbd4; --text-3: #9aa3ae;
  --line: #333b47; --line-2: #3f4856;
  --accent-soft: rgba(252, 213, 53, .14); --accent-text: #fcd535;
  --green: #34d399; --red: #f87171;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; overflow-wrap: break-word; font-family: var(--font); font-size: 16.5px; font-weight: 400; line-height: 1.78; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.article a:not(.btn):not(.card):not(.glossary__link):not(.vmark):not(.brand-card__link) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s; }
.article a:not(.btn):not(.card):hover { color: var(--text); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; letter-spacing: -.012em; font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 4.6vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.18; }
h2 { font-size: clamp(1.12rem, 2.4vw, 1.45rem); font-weight: 500; margin-top: 2.9rem; margin-bottom: 1rem; }
h3 { font-size: clamp(1.03rem, 2vw, 1.2rem); font-weight: 500; margin-top: 2rem; margin-bottom: .65rem; }
h4 { font-size: 1rem; font-weight: 500; margin-top: 1.4rem; margin-bottom: .4rem; }
p { margin: 0 0 1.3rem; }
strong, b { font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--bg-soft); padding: .1em .4em; border-radius: 6px; }
button { font: inherit; color: inherit; }
/* Gold alone is only ~1.6:1 on a white page, so the keyboard ring is two-tone:
   a dark inner band carries the contrast on light backgrounds, the gold band
   carries it on dark ones. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--accent); color: var(--gold-ink); padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100; font-weight: 500; transition: top .2s; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--text-3); }
.small { font-size: .875rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 500; color: var(--accent-text); margin-bottom: .8rem; }
.lead { font-size: 1.13rem; font-weight: 400; color: var(--text-2); line-height: 1.7; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 500; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s; white-space: nowrap; line-height: 1.2; }
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--gold-ink); }
.btn--primary:hover { background: #f7c600; }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); }
.btn--lg { padding: 14px 24px; font-size: 1.05rem; }
.btn--sm { padding: 7px 14px; font-size: .875rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; border: 1.5px solid transparent; background: transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn svg { width: 22px; height: 22px; }

/* ── header ── */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 12px; }
/* The header spans the window with a small gutter rather than sitting inside
   the 1180px column, so on a wide screen it frames the page instead of
   floating in the middle of it. Three tracks: logo, then the nav, then the
   tools — the middle track is centred on the window, not on what is beside it. */
.site-header .site-header__inner { max-width: none; padding-inline: clamp(14px, 2.6vw, 40px); }
@media (min-width: 960px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; }
  .site-header__inner > .logo { justify-self: start; }
  .site-header__inner > .main-nav { justify-self: center; }
  .site-header__inner > .site-header__tools { justify-self: end; }
}
.logo { font-family: var(--font-display); display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.logo-mark { width: 32px; height: 32px; color: var(--accent); flex: none; }
.logo-text b { color: var(--accent-text); font-weight: 700; }
.site-header__tools { display: flex; align-items: center; gap: 4px; }
.main-nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--bg); padding: 16px var(--gutter) 32px; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; overflow-y: auto; z-index: 40; }
.main-nav.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.main-nav a { display: block; padding: 14px 12px; border-radius: var(--radius-sm); font-weight: 500; font-size: 1.1rem; transition: background .2s; }
.main-nav a:hover, .main-nav a[aria-current] { background: var(--accent-soft); color: var(--text); }
.nav-toggle { position: relative; }
.burger, .burger::before, .burger::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; content: ""; }
/* The bar is a flex item, so it was being shrunk to 18px while its two absolutely
   positioned pseudo-elements kept their 20px — a hamburger with one short line. */
.burger { position: relative; flex: none; }
.burger::before { position: absolute; top: -6px; }
.burger::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }
.theme-toggle svg:last-child { display: none; }
:root[data-theme="dark"] .theme-toggle svg:first-child { display: none; }
:root[data-theme="dark"] .theme-toggle svg:last-child { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle svg:first-child { display: none; }
  :root:not([data-theme="light"]) .theme-toggle svg:last-child { display: block; }
}
.lang-switch { position: relative; }
.lang-switch__code { font-size: .8rem; font-weight: 500; }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 200px; max-height: 70vh; overflow: auto; z-index: 60; animation: pop .2s var(--ease); }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: .95rem; }
.lang-menu a:hover { background: var(--bg-soft); }
.lang-menu [aria-selected="true"] a { background: var(--accent-soft); font-weight: 500; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (min-width: 960px) {
  .main-nav { position: static; transform: none; visibility: visible; padding: 0; background: transparent; overflow: visible; inset: auto; }
  .main-nav ul { flex-direction: row; gap: 2px; }
  .main-nav a { padding: 8px 12px; font-size: .95rem; }
  .nav-toggle { display: none; }
}

.main-nav .caret { display: none; }
.submenu__icon { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--text-3); }
.submenu__icon svg { width: 20px; height: 20px; }
.submenu a:hover .submenu__icon { color: var(--accent-text); }
.submenu .brand-mark { flex: none; }
.submenu { display: none; }
@media (min-width: 960px) {
  .main-nav li { position: relative; }
  .main-nav .has-sub > a { display: inline-flex; align-items: center; gap: 4px; }
  .main-nav .caret { display: block; width: 15px; height: 15px; opacity: .55; transition: transform .2s var(--ease); }
  .main-nav .has-sub:hover > a .caret, .main-nav .has-sub:focus-within > a .caret { transform: rotate(180deg); }
  .submenu { display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 250px; padding-top: 10px;
    opacity: 0; visibility: hidden; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s .16s; }
  .main-nav .has-sub:hover > .submenu, .main-nav .has-sub:focus-within > .submenu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s; }
  .submenu ul { display: block; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto; }
  .submenu a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: .93rem; font-weight: 400; white-space: nowrap; }
  .submenu a:hover { background: var(--bg-soft); }
  .submenu__all { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
  .submenu__all a { display: flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 500; }
  .submenu__all svg { width: 15px; height: 15px; }
}
@media (max-width: 959px) {
  /* In the mobile panel the children are simply listed under their parent. */
  .submenu { display: block; }
  .submenu ul { padding-inline-start: 12px; border-inline-start: 2px solid var(--line); margin: 2px 0 8px; }
  .submenu a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; font-size: .98rem; font-weight: 400; color: var(--text-2); }
  .submenu__all { display: none; }
}

@media (max-width: 359px) {
  :root { --gutter: 14px; }
  .logo { font-size: 1.05rem; gap: 8px; }
  .logo-mark { width: 28px; height: 28px; }
  .icon-btn { min-width: 36px; height: 36px; }
  .site-header__inner { gap: 8px; }
  .btn { white-space: normal; }
  .btn--lg { padding: 12px 18px; font-size: 1rem; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── hero ── */
.hero--compact { padding-top: clamp(14px, 2.5vw, 24px); padding-bottom: clamp(14px, 2.5vw, 24px); }
.hero--compact h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); }
.hero--compact .hero__actions { margin-bottom: 0; }
.layout > .article > .lead:first-of-type { margin-top: 1.6rem; }
.article > .page-meta { margin-bottom: 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.article > #ranking, .article > #comparison, .article > #explore, .article > .tool { margin-top: .4rem; }
/* Equal air above the breadcrumbs and below the H1: the top band was carrying
   64px over and 40px under, which read as the heading sagging in its own
   section. */
.hero { padding: clamp(20px, 4vw, 40px) 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.hero h1 { margin-top: .4rem; }
.hero__lead { font-size: clamp(1.03rem, 2vw, 1.18rem); font-weight: 400; color: var(--text-2); max-width: 64ch; margin-top: 1.1rem; line-height: 1.7; }
/* The home lead is one sentence and should read as one line where there is
   room for it; below that it wraps normally. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6rem 0 .4rem; }
.hero--home { padding-top: clamp(24px, 3.4vw, 40px); padding-bottom: clamp(22px, 3vw, 36px); }
.hero__stack { text-align: center; }
/* The H1 gets the whole container so it can hold one line on desktop; the
   supporting copy and the search box stay at a comfortable reading width. */
/* The home H1 holds one line at every width: above 1000px the type is at its
   full size, below that it scales with the viewport so even the longest of the
   launched languages fits without wrapping. */
.hero__stack > h1 { white-space: nowrap; }
@media (max-width: 999px) { .hero__stack > h1 { font-size: clamp(1rem, 5.1vw, 2.2rem); letter-spacing: -.02em; } }
.hero__stack > .eyebrow { max-width: 62ch; margin-inline: auto; }
/* One sentence, one line wherever the window allows it. */
.hero__stack > .hero__lead { max-width: min(100%, 62rem); margin-inline: auto; }
.hero__stack > .hero-search, .hero__stack > .hero__or, .hero__stack > .hero__actions { max-width: 700px; margin-inline: auto; }
.hero__stack .eyebrow { margin-bottom: 1rem; }
.hero__stack h1 { margin: 0; }
.hero__stack .hero__lead { margin: 1.2rem auto 0; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* intent search */
.hero-search { margin: 1.5rem 0 0; position: relative; text-align: start; }
.hero-search[hidden] { display: none; }
.hero-search__box { display: flex; align-items: center; gap: 10px; padding: 5px; padding-inline-start: 16px; background: var(--bg-card); border: 1.5px solid var(--line-2); border-radius: 999px; transition: border-color .2s, box-shadow .2s; }
.hero-search__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hero-search__box > svg { width: 22px; height: 22px; flex: none; color: var(--text-3); }
.hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.02rem; padding: 9px 0; outline: 0; color: var(--text); }
.hero-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* The pill already shows focus with its border and halo; the global ring would
   draw a second, square outline inside it. */
.hero-search input:focus-visible, .glossary__search input:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 0; box-shadow: none;
}
.hero-search .btn { flex: none; }
.hero-search__label[hidden] { display: none; }
.hero-search__label { margin: 12px 0 0; font-size: .88rem; color: var(--text-3); text-align: center; }
.hero-search__empty { margin: 12px 0 0; font-size: .9rem; color: var(--text-3); text-align: center; }
.hero-search__empty[hidden] { display: none; }
.hero-search__results { list-style: none; margin: 10px 0 0; padding: 6px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: start; max-height: 340px; overflow-y: auto; }
.hero-search__results[hidden] { display: none; }
.hero-search__results a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); }
.hero-search__results a:hover, .hero-search__results .is-active a { background: var(--accent-soft); }
.hero-search__results b { display: block; font-weight: 500; font-size: .97rem; }
.hero-search__results small { display: block; color: var(--text-3); font-size: .78rem; }
.hero-search__results .hs__body { min-width: 0; flex: 1; }
.hs__icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; color: var(--text-3); }
.hs__icon svg { width: 22px; height: 22px; }
.hero-search__results .brand-mark { flex: none; }

/* "or" divider */
.hero__or { display: flex; align-items: center; gap: 14px; margin: 1.8rem 0 1.2rem; color: var(--text-3); font-size: .85rem; }
.hero__or::before, .hero__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hero__actions--center { justify-content: center; margin: 0; }
.hero__actions--center .btn { gap: 10px; }
.hero__actions--center .hs__icon { color: inherit; opacity: .75; }
@media (max-width: 620px) {
  .btn { white-space: normal; }
  .btn--lg { padding: 13px 20px; }
}
@media (max-width: 559px) {
  .hero-search__box { flex-wrap: wrap; border-radius: var(--radius); padding: 8px 12px; }
  .hero-search input { font-size: 1rem; padding: 7px 0; }
  .hero-search .btn { padding: 9px 18px; }
  .hero-search .btn { flex: 1 1 100%; justify-content: center; }
  .hero__actions--center { flex-direction: column; }
  .hero__actions--center .btn { width: 100%; justify-content: center; }
}

.trust-badges { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: .9rem; color: var(--text-2); }
.trust-badges li { display: inline-flex; align-items: center; gap: 6px; }
.trust-badges svg { width: 18px; height: 18px; color: var(--accent-text); }

.breadcrumbs ol { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .85rem; color: var(--text-3); }
.breadcrumbs li + li::before { content: "/"; margin: 0 6px; color: var(--line-2); }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }

.page-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .85rem; color: var(--text-3); margin: 1rem 0 0; }
.page-meta a { color: var(--text-2); }
.page-meta a:hover { text-decoration: underline; }
.page-meta__check { display: inline-flex; align-items: center; gap: 6px; }
.page-meta__check svg { width: 16px; height: 16px; color: var(--green); }

/* ── layout ── */
.layout { display: grid; gap: 60px; padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(40px, 6vw, 80px); }
.hero--compact + .layout { padding-top: clamp(16px, 2.5vw, 28px); }
.hero--compact + .layout .article > h2:first-child, .hero--compact + .layout .article > section:first-child > h2:first-child { margin-top: .6rem; }
.article { min-width: 0; max-width: 78ch; }
.article--home { max-width: none; }
.article--home > section:first-child > h2:first-child, .article--home > h2:first-child { margin-top: 1.2rem; }
.hero--home + .container > .article--home { padding-top: clamp(14px, 2vw, 24px); }
/* The paragraph under a section heading is a subtitle, not body copy — in the
   heading's own colour the two read as one dense block. It takes the same
   secondary tone the hero lead uses. */
.article--home > section > h2 + p,
.article--home > h2 + p { color: var(--text-2); font-size: 1.02rem; max-width: 78ch; }
/* Air between sections: the home page is a stack of separate answers, and they
   should not run into one another. */
.article--home > section + section,
.article--home > section:not(:first-child) { margin-top: clamp(2.6rem, 5vw, 4.4rem); }
.article--home > section > h2:first-child { margin-top: 0; }
.layout--wide .article { max-width: none; }
.layout--full { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
.layout--full .article { max-width: none; }
.layout--full .toc { margin-bottom: 28px; }
.sidebar--inline { position: static !important; max-height: none !important; overflow: visible !important; margin-top: 2.6rem; }
.sidebar--inline .related { padding: 24px 26px; }
.sidebar--inline .related ul { display: grid; gap: 0 32px; }
@media (min-width: 700px) { .sidebar--inline .related ul { grid-template-columns: 1fr 1fr; } }
.sidebar--inline .related li:nth-child(-n+2) a { border-top: 0; }
@media (max-width: 699px) { .sidebar--inline .related li:nth-child(2) a { border-top: 1px solid var(--line); } }
.sidebar { min-width: 0; }
@media (min-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; }
  /* The side column scrolls on its own when it is taller than the viewport,
     but its scrollbar is chrome the reader never asked for — hide the bar and
     keep the scrolling. */
  .sidebar { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
  .sidebar::-webkit-scrollbar { width: 0; height: 0; }
}
.toc { background: var(--bg-soft); border-radius: var(--radius); padding: 6px 18px; margin-bottom: 24px; font-size: .92rem; }
.toc summary { cursor: pointer; font-weight: 500; padding: 10px 0; list-style: none; display: flex; justify-content: space-between; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; color: var(--text-3); }
.toc details[open] summary::after { content: "–"; }
.toc ol { margin: 0 0 14px; padding-inline-start: 20px; display: grid; gap: 7px; }
.toc a { color: var(--text-2); }
.toc a:hover, .toc a.is-active { color: var(--accent-text); }
.related { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.related h2 { font-size: .95rem; font-weight: 500; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.related ul { list-style: none; margin: 0; padding: 0; }
.related a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); font-weight: 500; font-size: .95rem; }
.related li:first-child a { border-top: 0; }
.related svg { width: 16px; height: 16px; flex: none; color: var(--text-3); transition: transform .2s; }
.related a:hover svg { transform: translateX(3px); color: var(--accent-text); }

/* ── content blocks ── */
.list { padding-inline-start: 1.3rem; margin: 0 0 1.6rem; }
.list li { margin: .6rem 0; }
.list li::marker { color: var(--accent-text); }
.list--check { list-style: none; padding: 0; }
.list--check li, .pros li, .cons li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.65; }
.list--check svg, .pros svg, .cons svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.list--check svg, .pros svg { color: var(--green); }
.cons svg { color: var(--red); }
/* Tables never scroll sideways: wide ones re-flow into stacked cards. */
.table-wrap { margin: 1.5rem 0 2.2rem; border: 1px solid var(--line); border-radius: var(--radius); }
/* The head row and the caption are filled, so without this they paint square
   corners over the rounded border of the box they sit in. */
.table-wrap > table > caption:first-child { border-start-start-radius: calc(var(--radius) - 1px); border-start-end-radius: calc(var(--radius) - 1px); }
.table-wrap > table > thead > tr > th:first-child { border-start-start-radius: calc(var(--radius) - 1px); }
.table-wrap > table > thead > tr > th:last-child { border-start-end-radius: calc(var(--radius) - 1px); }
.table-wrap > table > tbody > tr:last-child > td, .table-wrap > table > tbody > tr:last-child > th { border-bottom: 0; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
caption { text-align: start; padding: 12px 16px; font-weight: 600; background: var(--bg-soft); }
/* `break-word` breaks a token only when it genuinely cannot fit, so a long URL
   in a cell still wraps instead of pushing the page sideways. What must never
   break is a short token that had simply been given too narrow a column — a
   brand name or a percentage — so those are held whole below and their columns
   were widened instead. */
th, td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
th, td { hyphens: none; }
/* On the narrowest phones the cell padding alone can push a small table past
   its box, so it tightens rather than the table scrolling. */
@media (max-width: 379px) { th, td { padding: 12px 9px; } }
/* figures and short codes stay on one line */
td b, .score-pill, .yes, .no { overflow-wrap: normal; word-break: keep-all; }
thead th { background: var(--bg-soft); font-weight: 500; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
tbody th { font-weight: 500; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.compare-table__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }

/* Stacked-card fallback — one card per row, every cell keeps its column
   header via data-label, so nothing is lost and nothing overflows.
   Comparison tables are wide (9 columns) so they stack until the page can
   give them the full container; content tables only stack on phones. */
@media (max-width: 1079px) {
  .table-wrap--sticky { border: 0; }
  .table-wrap--sticky table { display: block; font-size: .95rem; }
  .table-wrap--sticky caption { display: block; padding: 0 0 12px; background: none; }
  .table-wrap--sticky thead { display: none; }
  .table-wrap--sticky tbody, .table-wrap--sticky tr { display: block; }
  .table-wrap--sticky tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; background: var(--bg-card); overflow: hidden; }
  .table-wrap--sticky tr:last-child { margin-bottom: 0; }
  .table-wrap--sticky tr:hover { background: var(--bg-card); }
  .table-wrap--sticky tbody th { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); font-weight: 600; }
  .table-wrap--sticky td { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border: 0; padding: 11px 16px; text-align: end; }
  .table-wrap--sticky td + td { border-top: 1px solid var(--line); }
  .table-wrap--sticky td::before { content: attr(data-label); flex: none; max-width: 46%; text-align: start; color: var(--text-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.6; }
  .table-wrap--sticky td:not([data-label])::before { display: none; }
  .table-wrap--sticky td > * { text-align: end; }
}
@media (max-width: 899px) {
  .table-wrap--stack { border: 0; }
  .table-wrap--stack table { display: block; font-size: .95rem; }
  .table-wrap--stack caption { display: block; padding: 0 0 12px; background: none; }
  .table-wrap--stack thead { display: none; }
  .table-wrap--stack tbody, .table-wrap--stack tr { display: block; }
  .table-wrap--stack tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; background: var(--bg-card); overflow: hidden; }
  .table-wrap--stack tr:last-child { margin-bottom: 0; }
  .table-wrap--stack tr:hover { background: var(--bg-card); }
  .table-wrap--stack tbody th { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); font-weight: 600; }
  .table-wrap--stack td { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border: 0; padding: 11px 16px; text-align: end; }
  .table-wrap--stack td + td { border-top: 1px solid var(--line); }
  .table-wrap--stack td::before { content: attr(data-label); flex: none; max-width: 46%; text-align: start; color: var(--text-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.6; }
  .table-wrap--stack td:not([data-label])::before { display: none; }
  .table-wrap--stack td > * { text-align: end; }
}
.score-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--gold-ink); font-weight: 600; }
.yes, .no { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.yes { color: var(--green); } .no { color: var(--red); }
.yes svg, .no svg { width: 16px; height: 16px; }
.callout { display: flex; gap: 16px; padding: 18px 20px; border-radius: var(--radius); margin: 1.8rem 0; background: var(--bg-soft); border-inline-start: 4px solid var(--line-2); }
.callout svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.callout p:last-child { margin: 0; }
.callout__title { display: block; margin-bottom: 6px; }
.callout--info { border-color: var(--slate); }
.callout--tip { border-color: var(--accent); background: var(--accent-soft); }
.callout--tip svg { color: var(--accent-text); }
.callout--warning { border-color: var(--red); }
.callout--warning svg { color: var(--red); }
.quote { margin: 2rem 0; padding-block: 6px; padding-inline-start: 22px; border-inline-start: 3px solid var(--accent); font-size: 1.1rem; color: var(--text-2); }
.quote cite { display: block; font-size: .85rem; font-style: normal; color: var(--text-3); margin-top: 4px; }
.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 2rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.step { display: flex; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); min-width: 0; }
.step__num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--gold-ink); display: grid; place-items: center; font-weight: 500; }
.step__title { margin: 2px 0 8px; font-size: 1.08rem; font-weight: 500; }
.step p { margin: 0; }
/* A long unbreakable token (an email address, a cookie name in <code>) would
   otherwise set the grid column's min-content width and push the whole page
   wider than a 320px screen. */
.step > div { min-width: 0; }
.step p, .step__title, .step code { overflow-wrap: anywhere; }
@media (max-width: 379px) {
  .step { gap: 12px; padding: 16px 14px; }
  .step__num { width: 30px; height: 30px; font-size: .9rem; }
}
.card-grid { display: grid; gap: 20px; margin: 1.5rem 0 2.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.card__title { margin: 0; font-size: 1.08rem; }
.card p { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 1.65; flex: 1; }
.card__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: .9rem; color: var(--accent-text); margin-top: 6px; }
.card__cta svg { width: 16px; height: 16px; transition: transform .2s; }
.card:hover .card__cta svg { transform: translateX(4px); }
.card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent-text); margin-bottom: 6px; }
.card__icon svg { width: 24px; height: 24px; }
.card--static a { color: var(--accent-text); font-weight: 500; word-break: break-all; }
.stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.8rem 0; }
.stat { padding: 22px 18px; border-radius: var(--radius); background: var(--bg-soft); text-align: center; }
.stat dd { font-family: var(--font-display); margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; color: var(--accent-text); letter-spacing: -.02em; }
.stat dt { font-size: .85rem; color: var(--text-2); hyphens: auto; }
.pros-cons { display: grid; gap: 20px; margin: 1.8rem 0; }
@media (min-width: 700px) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros, .cons { padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); }
.pros { border-top: 4px solid var(--green); } .cons { border-top: 4px solid var(--red); }
.pros h3, .cons h3 { margin: 0 0 14px; font-size: 1rem; }
.pros ul, .cons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.verdict { margin: 2.4rem 0; padding: 28px; border-radius: var(--radius); background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.verdict h2 { margin: 0 0 12px; color: var(--gold); font-size: 1.3rem; font-weight: 600; }
.verdict p { margin: 0; font-size: 1.05rem; position: relative; }
/* The panel is always dark, in both themes — the light-theme link colour
   (#8a6d00) only reaches 3.2:1 on it, so links here take the bright gold. */
.verdict a, .article .verdict a:not(.btn):not(.card):not(.glossary__link):not(.vmark):not(.brand-card__link) { color: var(--gold); }
.faq { margin-top: 2rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; padding-block: 19px; padding-inline: 0 36px; list-style: none; position: relative; font-weight: 500; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: 1.05rem; display: inline; }
.faq__item summary::after { content: ""; position: absolute; inset-inline-end: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__answer { padding: 0 0 20px; color: var(--text-2); animation: fade .3s var(--ease); }
.faq__answer p:last-child { margin: 0; }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 2.6rem 0; padding: 30px 32px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.cta-box h2 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 600; }
.cta-box p { margin: 0; color: var(--text-2); }

/* ── brand components ── */
.brand-mark { display: inline-block; flex: none; line-height: 0; }
.brand-mark svg { border-radius: 22%; }
.badge { display: inline-block; max-width: 100%; padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .72rem; font-weight: 500; letter-spacing: .01em; line-height: 1.35; }
.score-ring { position: relative; width: 96px; height: 96px; flex: none; }
.score-ring--md { width: 80px; height: 80px; }
.score-ring--sm { width: 50px; height: 50px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: var(--pct) 100; transition: stroke-dasharray 1.2s var(--ease); }
.score-ring:not(.in-view) .ring-fg { stroke-dasharray: 0 100; }
.score-ring__value { font-family: var(--font-display); position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; line-height: 1; }
.score-ring__value b { font-size: 1.45rem; }
.score-ring--sm .score-ring__value b { font-size: .95rem; }
.score-ring--md .score-ring__value b { font-size: 1.25rem; }
.score-ring__value small { font-size: .6rem; color: var(--text-3); font-weight: 500; }
.score-ring--sm .score-ring__value small { display: none; }
.score-bars { display: grid; gap: 16px; margin: 1.4rem 0 2.2rem; }
.score-bar { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 560px) { .score-bar { grid-template-columns: 170px 1fr; align-items: center; } }
.score-bar dt { font-size: .9rem; color: var(--text-2); }
.score-bar dd { margin: 0; display: flex; align-items: center; gap: 12px; }
.score-bar__track { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.score-bar__fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--accent); transform-origin: left; transition: transform 1s var(--ease); }
.score-bar:not(.in-view) .score-bar__fill { transform: scaleX(0); }
.score-bar b { min-width: 30px; text-align: end; }
.brand-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 1.5rem; }
.brand-hero__meta { flex: 1; min-width: 200px; }
.brand-hero__tag { margin: 8px 0 0; color: var(--text-2); }
.facts { margin-bottom: 2rem; }
.facts h2 { margin-top: 0; }
.facts__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin: 0; }
.facts__grid div { padding: 14px 16px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.facts__grid dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.facts__grid dd { margin: 4px 0 0; font-weight: 500; font-size: .95rem; overflow-wrap: anywhere; }
.xlinks { display: grid; gap: 26px; margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .xlinks { grid-template-columns: 1fr 1fr; } }
.xlinks h2 { font-size: 1rem; font-weight: 500; margin: 0 0 12px; }
.xlinks ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 8px; }
/* Top pick — the answer, stated before the table that proves it. One line, so
   it never reads as a repeat of the card or row directly beneath it. */
.toppick { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between;
  margin: 1.4rem 0 0; padding: 14px 18px; border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent); border-radius: var(--radius); background: var(--bg-card); }
.toppick__body { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 320px; }
.toppick__body > div { min-width: 0; }
.toppick__label { display: block; font-size: .68rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 2px; }
.toppick__why { margin: 0; font-size: .95rem; color: var(--text-2); }
.toppick__why a { font-weight: 500; color: var(--text); }
.toppick__cta { flex: none; white-space: nowrap; }
@media (max-width: 599px) { .toppick__cta { flex: 1 1 100%; justify-content: center; } }
.brand-list { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: grid; gap: 22px; }
/* Compact enough to scan a ranking without scrolling: the row is tight, the
   facts sit in ruled cells like a small table, and nothing is spaced out for
   the sake of it. */
.brand-card { position: relative; padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); display: grid; gap: 14px; transition: box-shadow .3s, border-color .3s; }
.brand-card:hover { box-shadow: var(--shadow); border-color: var(--brand, var(--accent)); }
.brand-card__rank { flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--bg-soft); color: var(--text-3); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; border-radius: 999px; }
.brand-card:first-child .brand-card__rank { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.brand-card__head { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
@media (max-width: 419px) { .brand-card__head { gap: 10px; } }
/* The name must never be squeezed narrower than the name itself. It cannot
   break (it is a proper noun), so a box smaller than the word does not clip the
   word — it paints it over whatever sits to the right, which is how "Polymarket"
   ended up on top of its own score. min-content is exactly the width of the
   longest unbreakable token, so the score ring wraps below instead. */
.brand-card__head > div { flex: 1 1 auto; min-width: 0; }
/* The score ring is also a div, so the rule above was stretching it: a circle
   drawn into a 146x50 box is an ellipse. It keeps its own square size. */
.brand-card__head > .score-ring { flex: none; min-width: 0; }
/* The name is the link to the review — it does not need prose underlining to
   say so, and a gold rule under every brand in a ranking is noise. It reads as
   a heading and behaves as a link on hover. */
.brand-card__link { color: var(--text); text-decoration: none; }
.article .brand-card__name .brand-card__link:hover { color: var(--brand, var(--accent-text));
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.brand-card__name { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
/* The status pill and the award chip sit on their own line under the name, both
   flush to its left edge — the pill's inline margin exists for when it trails a
   heading mid-sentence, and here it would push the row 10px out of alignment. */
.brand-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; }
.brand-card__meta > .vmark, .brand-card__meta > .badge { margin-inline-start: 0; flex: none; }
/* On a phone the identity block keeps only what is left after the rank, the
   logo and the ring — about 175px. Two chips do not fit side by side there, so
   they take a row each at a smaller size rather than each breaking in half. */
@media (max-width: 619px) {
  .brand-card__meta { flex-direction: column; align-items: flex-start; gap: 5px; }
  .brand-card__meta > .vmark, .brand-card__meta > .badge { font-size: .68rem; padding: 3px 9px; }
  /* With the chips stacked, the identity block is taller than the logo, and a
     centred row then lifts the name clear above it — the name has to stay level
     with the logo it belongs to, so the row hangs from the top instead. The
     score keeps its own centring against the whole block. */
  .brand-card__head { align-items: flex-start; }
  .brand-card__head > .score-ring { align-self: center; }
}
/* A brand name is a proper noun. "BC.Game" split over two lines reads as a
   layout bug, because it is one — so the name never breaks, and the column it
   sits in is wide enough to hold the longest of them. */
.brand-card__name, .brand-card__name a, .compare-table__brand span { overflow-wrap: normal; word-break: keep-all; }
/* Forbidding the break is only half of it. A flex item may still be squeezed
   narrower than a word it is not allowed to break, and the name is then painted
   over the cell beside it — "Polymarket" needed 133px and was given 113px. Asking
   for max-content raises the cell's own minimum, so the column widens instead. */
.compare-table__brand span { min-width: max-content; }
/* The facts read as a small table: equal cells, a hairline between each, the
   label in caps above the value. The rule is on the start edge so the first
   cell has none and the row cannot end on a stray line. */
.brand-card__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); font-size: .85rem; line-height: 1.45; }
.brand-card__facts li { padding-inline: 18px; border-inline-start: 1px solid var(--line); }
.brand-card__facts li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.brand-card__facts > li > span { display: block; margin-bottom: 2px; color: var(--text-3); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.brand-card__facts > li > b { font-weight: 500; overflow-wrap: anywhere; }
.brand-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-card__actions .btn { flex: 1 1 100%; justify-content: center; }
@container (min-width: 880px) {
  .brand-card__actions { flex-direction: row; align-items: center; }
  .brand-card__actions .btn { flex: 0 0 auto; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1000px) { .brand-card__actions .btn { flex: 0 0 auto; } }
}
.brand-card__facts li { min-width: 0; }
/* The card must lay itself out by the width of the COLUMN it is in, not the
   width of the window. On a page with a sidebar the article column stops at
   785px however wide the screen gets, so a viewport media query put the card
   into its three-column form inside a box too narrow to hold it — the facts
   were squeezed to 200px and stacked into a tall ladder beside the buttons. */
.brand-list { container-type: inline-size; }
/* One layout above the phone, not three.
   The card used to switch into a three-column grid — identity | facts | buttons
   — and every column then fought the others for width. Adding a fourth fact was
   enough to push the score ring onto its own line on the longer brand names.
   It now reads as three horizontal bands instead: who it is and what to do about
   it on one line, the facts spread across the full width underneath, the note
   last. Every band has the whole card to work with, so nothing has to wrap and
   adding another fact later costs nothing. */
@container (min-width: 620px) {
  .brand-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: 28px; row-gap: 18px; }
  .brand-card__head    { order: 1; flex-wrap: nowrap; }
  .brand-card__actions { order: 2; flex-direction: column; align-items: stretch; }
  .brand-card__facts   { order: 3; grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 0;
    padding-top: 13px; border-top: 1px solid var(--line); }
  /* Two anchors on the top line and nothing between them: the name's box takes
     the slack so the score is pushed against the far edge, beside the button. */
  .brand-card__head > div { flex: 1 1 auto; }
}
/* Browsers without container queries keep the stacked card, which is correct at
   any width — it is the layout every phone already gets. */
@supports not (container-type: inline-size) {
  @media (min-width: 1000px) {
    .brand-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; row-gap: 18px; }
    .brand-card__head    { order: 1; flex-wrap: nowrap; }
    .brand-card__actions { order: 2; flex-direction: column; align-items: stretch; }
    .brand-card__facts   { order: 3; grid-column: 1 / -1;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 0;
      padding-top: 13px; border-top: 1px solid var(--line); }
    }
}

/* ── dispute intake ── */
.dispute-file { margin: 2rem 0; padding: 24px 26px; border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent); border-radius: var(--radius); background: var(--bg-card); }
.dispute-file h2 { margin-top: 0; }
.dispute-file__lead { font-size: 1.05rem; margin: 1rem 0; }
.dispute-file__mail { font-family: inherit; font-weight: 600; color: var(--accent-text);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  overflow-wrap: anywhere; }
.dispute-file ul { margin-bottom: 1rem; }
@media (max-width: 599px) { .dispute-file { padding: 20px 18px; } }

/* ── glossary ── */
.glossary__search { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--bg-card); margin: 1rem 0; position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; }
.glossary__search svg { width: 20px; height: 20px; color: var(--text-3); }
.glossary__search input { flex: 1; border: 0; background: transparent; font: inherit; padding: 8px 0; outline: 0; min-width: 0; }
.glossary__count { font-size: .8rem; color: var(--text-3); white-space: nowrap; }
.glossary__letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 1rem 0 1.8rem; }
.glossary__letters a { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--bg-soft); font-weight: 600; font-size: .85rem; }
.glossary__letters a:hover { background: var(--accent-soft); }
.glossary__list { margin: 0; }
.glossary__letter { font-weight: 600; margin: 2rem 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--accent); display: inline-block; }
.glossary__term { padding: 18px 0; border-bottom: 1px solid var(--line); }
.glossary__term[hidden] { display: none; }
.glossary__term dt h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 500; }
.glossary__term dd { margin: 0; color: var(--text-2); }
.glossary__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--accent-text); font-size: .9rem; margin-inline-start: 4px; }
.glossary__link svg { width: 14px; height: 14px; }

/* ── tools ── */
.tool { margin: 1.4rem 0 2.4rem; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
.tool h2 { margin-top: 0; font-size: 1.3rem; }
.tool__grid { display: grid; gap: 28px; }
.tool__grid > * { min-width: 0; }
.tool__rows, .tool__row, .tool__kpis, .bar-row { min-width: 0; }
@media (min-width: 860px) { .tool__grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: .875rem; font-weight: 500; color: var(--text-2); }
.field input, .field select { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); width: 100%; }
.field input:focus, .field select:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.field--row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field__hint { font-size: .8rem; color: var(--text-3); }
.tool__rows { display: grid; gap: 10px; }
.tool__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.tool__row input { font: inherit; padding: 9px 10px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); min-width: 0; width: 100%; }
.tool__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tool__results { padding: 22px; border-radius: var(--radius); background: var(--bg-soft); }
.tool__results h3 { margin: 0 0 12px; font-size: .95rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.tool__results table { font-size: .92rem; table-layout: fixed; }
.tool__results th, .tool__results td { padding: 12px 10px; overflow-wrap: anywhere; }
/* The results tables are generated with fixed columns, so on a 320px phone the
   padding alone is what pushes them past their box. */
@media (max-width: 379px) {
  .tool__results { padding: 16px 10px; }
  .tool__results th, .tool__results td { padding: 10px 5px; font-size: .84rem; }
  /* the figures still never break — the table is made to fit around them */
  .tool__results td b { font-size: .84rem; }
  /* fixed columns cannot rebalance around a figure that must stay whole, so on
     the narrowest phones the browser distributes the width by content instead */
  .tool__results table { table-layout: auto; }
  .tool__results th { font-size: .78rem; }
}
@media (max-width: 560px) { .tool__results th, .tool__results td { padding: 10px 6px; font-size: .85rem; } }
.tool__big { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 600; color: var(--accent-text); letter-spacing: -.02em; line-height: 1.1; }
.tool__kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); margin-bottom: 18px; }
.tool__kpi { padding: 14px 16px; background: var(--bg-card); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.tool__kpi span { display: block; font-size: .75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.tool__kpi b { font-size: 1.3rem; }
.bar-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 56px; gap: 10px; align-items: center; font-size: .9rem; margin: 6px 0; }
.bar-row .bar { height: 10px; border-radius: 999px; background: var(--bg-card); overflow: hidden; border: 1px solid var(--line); }
.bar-row .bar i { display: block; height: 100%; width: var(--w); background: var(--accent); transition: width .6s var(--ease); }
.bar-row .bar i.bust { background: var(--red); }
.cards-visual { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.hands { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 6px; }
.hands__label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.field label.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.field label.check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.pcard { width: 54px; height: 76px; border-radius: 8px; background: #fff; color: #1e2329; border: 1px solid #d1d5db; display: grid; place-items: center; font-weight: 600; font-size: 1.4rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); animation: deal .4s var(--ease) both; }
.pcard.red { color: #dc2626; }
.pcard.back { background: var(--slate); border-color: #1e2329; }
@keyframes deal { from { opacity: 0; transform: translateY(-12px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.choice-grid .btn { justify-content: center; }
.feedback { margin-top: 12px; font-weight: 500; min-height: 1.5em; }
.feedback.ok { color: var(--green); } .feedback.bad { color: var(--red); }
.wheel { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 12px; background: conic-gradient(#16a34a 0 2.7%, #1e2329 2.7% 5.4%, #dc2626 5.4% 8.1%, #1e2329 8.1% 10.8%, #dc2626 10.8% 13.5%, #1e2329 13.5% 16.2%, #dc2626 16.2% 18.9%, #1e2329 18.9% 21.6%, #dc2626 21.6% 24.3%, #1e2329 24.3% 27%, #dc2626 27% 29.7%, #1e2329 29.7% 32.4%, #dc2626 32.4% 35.1%, #1e2329 35.1% 37.8%, #dc2626 37.8% 40.5%, #1e2329 40.5% 43.2%, #dc2626 43.2% 45.9%, #1e2329 45.9% 48.6%, #dc2626 48.6% 51.3%, #1e2329 51.3% 54%, #dc2626 54% 56.7%, #1e2329 56.7% 59.4%, #dc2626 59.4% 62.1%, #1e2329 62.1% 64.8%, #dc2626 64.8% 67.5%, #1e2329 67.5% 70.2%, #dc2626 70.2% 72.9%, #1e2329 72.9% 75.6%, #dc2626 75.6% 78.3%, #1e2329 78.3% 81%, #dc2626 81% 83.7%, #1e2329 83.7% 86.4%, #dc2626 86.4% 89.1%, #1e2329 89.1% 91.8%, #dc2626 91.8% 94.5%, #1e2329 94.5% 97.2%, #dc2626 97.2% 100%); border: 6px solid var(--gold); box-shadow: inset 0 0 0 4px var(--ink); transition: transform 2.4s cubic-bezier(.15, .85, .25, 1); }
.wheel__result { text-align: center; font-size: 2rem; font-weight: 600; min-height: 1.3em; }

/* ── authors ── */
.authors { display: grid; gap: 20px; }
.author { display: flex; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
.author__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--gold); display: grid; place-items: center; font-weight: 500; }
.author__name { margin: 0; font-size: 1.2rem; font-weight: 600; }
.author__role { margin: 0 0 8px; color: var(--accent-text); font-weight: 500; font-size: .9rem; }
.author__expertise { margin: 0; font-size: .9rem; color: var(--text-2); }

/* ── helplines ── */
.helplines { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.helplines a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .2s; }
.helplines a:hover { border-color: var(--accent); }
.helplines span { font-size: .8rem; color: var(--text-3); }

/* ── sitemap tree ── */
.sitemap-tree ul { list-style: none; padding-inline-start: 0; margin: 0; }
.sitemap-tree ul ul { padding-inline-start: 18px; border-inline-start: 2px solid var(--line); margin-block: 4px 8px; margin-inline-start: 6px; }
.sitemap-tree li { margin: 6px 0; }
.sitemap-tree a { display: inline-block; padding: 4px 8px; border-radius: 6px; }
.sitemap-tree a:hover { background: var(--accent-soft); }

/* ── pager ── */
.pager { display: grid; gap: 14px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 40px; }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 500; transition: border-color .2s, background .2s; }
.pager a:hover { border-color: var(--accent); background: var(--accent-soft); }
.pager small { color: var(--text-3); font-weight: 400; }
.pager__up { align-items: center; justify-content: center; text-align: center; background: var(--bg-soft); border: 0 !important; }
.pager__next { text-align: end; align-items: flex-end; }
@media (min-width: 760px) { .pager { grid-template-columns: 1fr auto 1fr; } }

/* ── footer ── */
.site-footer { background: var(--ink); color: #c5cbd4; padding: clamp(36px, 6vw, 64px) 0 28px; margin-top: 24px; }
.site-footer .logo { color: #fff; }
.site-footer .logo-text b { color: var(--gold); }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr; } }
.footer__about p { font-size: .92rem; margin-top: 14px; }
.footer__18 { display: flex; gap: 10px; align-items: center; }
.age-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-size: .72rem; font-weight: 500; }
.footer__col h2 { font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 14px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .93rem; }
.footer__col a { transition: color .2s; }
.footer__col a:hover { color: var(--gold); }
.footer__col span { display: block; font-size: .75rem; color: #9aa3ae; }
.footer__disclosure { font-size: .8rem; color: #9aa3ae; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--slate); }
.footer__disclosure a { color: #c5cbd4; text-decoration: underline; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem; margin-top: 16px; }
.footer__bottom p { margin: 0; }
.footer__langs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.footer__langs a:hover, .footer__langs [aria-current] { color: var(--gold); }

/* ── cookie bar ── */
.cookie-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: .9rem; animation: rise .5s var(--ease); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; }
.cookie-bar a { text-decoration: underline; }
.cookie-bar div { display: flex; gap: 8px; }
@media (min-width: 720px) { .cookie-bar { inset-inline-start: auto; max-width: 520px; } }

/* ── reveal animations ── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .score-ring:not(.in-view) .ring-fg { stroke-dasharray: var(--pct) 100; }
  .score-bar:not(.in-view) .score-bar__fill { transform: none; }
}
@media print { .site-header, .site-footer, .cookie-bar, .sidebar, .pager, .hero__actions, .brand-card__actions { display: none !important; } .layout { display: block; } }

/* ── right-to-left (Arabic) ───────────────────────────────────────────────
   Everything directional above uses logical properties, so only the pieces
   that are genuinely physical — a panel that slides in, an arrow that points
   somewhere — need flipping here. */
[dir="rtl"] {
  --font: "Noto Sans Arabic", "Google Sans Text", "Google Sans", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: "Noto Sans Arabic", "Google Sans Flex", "Google Sans", "Segoe UI", Tahoma, system-ui, sans-serif;
}
[dir="rtl"] body { line-height: 1.9; letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.4; }
[dir="rtl"] h1 { line-height: 1.35; }
[dir="rtl"] .eyebrow, [dir="rtl"] thead th, [dir="rtl"] .related h2, [dir="rtl"] .footer__col h2,
[dir="rtl"] .tool__results h3, [dir="rtl"] .brand-card__facts span, [dir="rtl"] .facts__grid dt,
[dir="rtl"] .table-wrap--sticky td::before, [dir="rtl"] .table-wrap--stack td::before { letter-spacing: 0; }

/* the off-canvas menu comes in from the other side */
@media (max-width: 959px) {
  [dir="rtl"] .main-nav { transform: translateX(-100%); }
  [dir="rtl"] .main-nav.is-open { transform: none; }
}
/* arrows point the way the text runs */
[dir="rtl"] .btn svg, [dir="rtl"] .card__cta svg, [dir="rtl"] .related svg,
[dir="rtl"] .submenu__all svg, [dir="rtl"] .pager a svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .card:hover .card__cta svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .related a:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .main-nav .caret, [dir="rtl"] .faq__item summary::after,
[dir="rtl"] .toc summary::after, [dir="rtl"] .score-ring svg { transform: none; }
[dir="rtl"] .main-nav .has-sub:hover > a .caret,
[dir="rtl"] .main-nav .has-sub:focus-within > a .caret { transform: rotate(180deg); }
[dir="rtl"] .faq__item summary::after { transform: translateY(-70%) rotate(45deg); }
[dir="rtl"] .faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
[dir="rtl"] .score-ring svg { transform: rotate(-90deg) scaleX(-1); }
/* numbers, scores and code stay left-to-right inside RTL prose */
[dir="rtl"] .score-ring__value, [dir="rtl"] .score-pill, [dir="rtl"] .tool__big,
[dir="rtl"] .stat dd, [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }

/* ── category strip ("what are you looking for?") ── */
.cstrip { border-bottom: 1px solid var(--line); background: var(--bg); }
.cstrip .container { display: flex; align-items: center; gap: 20px; }
.cstrip__label { flex: none; margin: 0; font-size: .88rem; color: var(--text-3); }
.cstrip__rail { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.cstrip ul { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 36px; }
/* arrows: the only cue on a touch screen that the row keeps going */
.cstrip__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-card); color: var(--text-2); cursor: pointer; box-shadow: var(--shadow); transition: opacity .2s, color .2s, border-color .2s; }
.cstrip__nav[hidden] { display: none; }
.cstrip__nav:disabled { opacity: 0; pointer-events: none; }
.cstrip__nav:hover:not(:disabled) { color: var(--accent-text); border-color: var(--accent); }
.cstrip__nav svg { width: 18px; height: 18px; }
.cstrip__nav--prev { inset-inline-start: -4px; }
.cstrip__nav--next { inset-inline-end: -4px; }
[dir="rtl"] .cstrip__nav svg { transform: scaleX(-1); }
/* the row fades out under each arrow instead of being cut mid-word */
.cstrip__rail::before, .cstrip__rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .2s; }
.cstrip__rail::before { inset-inline-start: 0; background: linear-gradient(to right, var(--bg), transparent); }
.cstrip__rail::after { inset-inline-end: 0; background: linear-gradient(to left, var(--bg), transparent); }
.cstrip__rail:has(.cstrip__nav--prev:not([hidden]):not(:disabled))::before,
.cstrip__rail:has(.cstrip__nav--next:not([hidden]):not(:disabled))::after { opacity: 1; }
[dir="rtl"] .cstrip__rail::before { background: linear-gradient(to left, var(--bg), transparent); }
[dir="rtl"] .cstrip__rail::after { background: linear-gradient(to right, var(--bg), transparent); }
.cstrip ul::-webkit-scrollbar { display: none; }
.cstrip li { flex: none; scroll-snap-align: start; }
.cstrip a { display: grid; justify-items: center; gap: 7px; padding: 14px 14px 16px; border-radius: var(--radius-sm); font-size: .78rem; line-height: 1.35; text-align: center; white-space: nowrap; color: var(--text-2); transition: background .2s, color .2s; }
.cstrip a:hover { background: var(--bg-soft); color: var(--text); }
.cstrip__icon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--text-3); }
.cstrip__icon svg { width: 26px; height: 26px; }
.cstrip a:hover .cstrip__icon { color: var(--accent-text); }
@media (max-width: 899px) {
  .cstrip .container { display: block; padding-block: 14px 4px; }
  .cstrip__label { margin-bottom: 8px; }
  .cstrip ul { padding-inline: 30px 34px; }
  .cstrip--hero ul { padding-inline: 30px 34px; }
  .cstrip__nav { width: 30px; height: 30px; }
  .cstrip__rail::before, .cstrip__rail::after { width: 30px; }
}

/* ── supplied wordmark ── */
.logo-img { height: 27.6px; width: auto; }
.logo-img--dark { display: none; }
:root[data-theme="dark"] .logo-img--light { display: none; }
:root[data-theme="dark"] .logo-img--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img--light { display: none; }
  :root:not([data-theme="light"]) .logo-img--dark { display: block; }
}

/* ── footer profiles + Telegram desk ── */
.footer__col h2.footer__follow { font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 24px 0 12px; }
.footer__col ul.footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--slate); color: #c5cbd4; transition: color .2s, border-color .2s, background .2s; }
.footer__social a:hover { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.footer__social svg { width: 19px; height: 19px; }
.footer__telegram { margin: 14px 0 0; font-size: .86rem; }
.footer__telegram a { display: inline-flex; align-items: flex-start; gap: 8px; color: #c5cbd4; }
.footer__telegram a:hover { color: var(--gold); }
.footer__telegram svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--gold); }

/* ── dispute intake form ── */
.dispute__form .field textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); width: 100%; resize: vertical; }
.dispute__form .field textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.dispute .field__hint { margin: 4px 0 0; }

/* ── language suggestion (offered, never forced) ── */
.lang-suggest { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 71; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: .92rem; animation: rise .5s var(--ease); }
.lang-suggest[hidden] { display: none; }
.lang-suggest p { margin: 0; }
.lang-suggest div { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 720px) { .lang-suggest { inset-inline-start: auto; max-width: 520px; } }
/* the two bars are stacked by main.js, which measures the cookie notice */


/* the category strip when it sits inside the hero, under the search box */
.cstrip--hero { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); border-bottom: 0; background: transparent; }
.cstrip--hero .cstrip__label { margin: 0 0 8px; text-align: center; }
.cstrip--hero ul { justify-content: center; }
.cstrip--hero .cstrip__nav--prev { inset-inline-start: 0; }
.cstrip--hero .cstrip__nav--next { inset-inline-end: 0; }
@media (max-width: 899px) {
  .cstrip--hero { margin-top: 1.8rem; }
  .cstrip--hero ul { justify-content: flex-start; }
}

/* ── quiet scrollbars ─────────────────────────────────────────────────────
   Panels that scroll inside themselves — the side column, the dropdowns, the
   search results — keep their scrolling but lose the bar. The page's own
   scrollbar is left alone: that one tells the reader where they are. */
.sidebar, .lang-menu, .submenu ul, .hero-search__results, .main-nav, .glossary__list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar, .lang-menu::-webkit-scrollbar, .submenu ul::-webkit-scrollbar,
.hero-search__results::-webkit-scrollbar, .main-nav::-webkit-scrollbar,
.glossary__list::-webkit-scrollbar { width: 0; height: 0; }

/* ── phone ergonomics ─────────────────────────────────────────────────────
   Footer links are 18px of text with an 11px gap on a phone, which is a
   coin-toss to tap. Give each its own row of padding so the target is finger
   sized without changing how the column looks. */
@media (max-width: 719px) {
  .footer__col ul { gap: 0; }
  .footer__col li > a { display: block; padding: 11px 0; }
  .footer__col h2 { margin-bottom: 4px; }
  .footer__langs { gap: 2px 14px; }
  .footer__langs a { display: inline-block; padding: 8px 0; }
  .site-footer { padding-bottom: 20px; }
}

/* ── head-to-head ── */
.versus { margin: 1.4rem 0 2.4rem; }
.versus__heads { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 1.4rem; }
.versus__head { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
.versus__head > div { flex: 1; min-width: 0; }
.versus__name { margin: 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.versus__v { font-family: var(--font-display); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.versus__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.2rem; }
.versus__actions .btn { flex: 1; justify-content: center; }
@media (max-width: 639px) {
  .versus__heads { grid-template-columns: 1fr; }
  .versus__v { text-align: center; }
  .versus__head { padding: 14px 16px; gap: 12px; }
  .versus__actions .btn { flex: 1 1 100%; }
}

/* ── CasinoTrust Verified ──
   The seal is a raster served to other people's sites, so on our own pages it
   is shown at its exact CSS size and never scaled up. Everything else here is
   status colour: one token per state, so a refusal never reads like a grant. */
/* One visual for "verified" across the site: the same pill the certificate
   shows in its status line, used inline next to a brand name. */
.vmark { margin-inline-start: 10px; vertical-align: .1em; text-decoration: none; }
.vmark--compact { font-size: .72rem; padding: 2px 8px; margin-inline-start: 8px; }
a.vmark:hover { text-decoration: underline; }
.brand-hero__meta .vmark { margin-inline-start: 0; margin-bottom: 8px; align-self: flex-start; }
.vstate { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.vstate--verified { background: rgba(21, 128, 61, .12); color: var(--green); }
.vstate--not-verified, .vstate--withdrawn { background: rgba(200, 30, 30, .1); color: var(--red); }
.vstate--pending { background: var(--bg-soft); color: var(--text-3); }

.vres { font-weight: 500; white-space: nowrap; }
.vres--pass { color: var(--green); }
.vres--fail { color: var(--red); }
.vres--unrecorded { color: var(--text-3); }

.vreg__brand { display: inline-flex; align-items: center; gap: 10px; }
.vreg__brand > span { min-width: max-content; }
.vreg td, .vreg th { vertical-align: middle; }

.vsample { margin: 0 0 1.6rem; padding: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vsample img { display: block; width: 240px; height: 64px; }
.vsample figcaption { color: var(--text-2); font-size: .92rem; flex: 1 1 260px; }

.vcert__head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 1.1rem; }
.vcert__seal { display: block; width: 240px; height: 64px; flex: none; }
.vcert__meta { display: flex; gap: 26px; flex-wrap: wrap; margin: 0; }
.vcert__meta dt { color: var(--text-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.vcert__meta dd { margin: 0; font-weight: 500; }
.vcert__reason { margin-top: 1rem; padding: 12px 16px; border-inline-start: 3px solid var(--red); background: var(--bg-soft); border-radius: var(--radius-sm); }
.vcert__back { margin-top: 1.4rem; }
.vcert__legal { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--text-3); font-size: .88rem; }

.vsteps th { width: 46%; font-weight: 400; }
.vembed { margin: 0; padding: 16px 18px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; }
.vembed code { font-size: .82rem; line-height: 1.7; white-space: pre; }

.vlog { list-style: none; margin: 1rem 0 0; padding: 0; }
.vlog li { padding: 14px 0; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vlog time { color: var(--text-3); font-size: .84rem; min-width: max-content; }
.vlog p { flex: 1 1 100%; margin: 4px 0 0; color: var(--text-2); font-size: .92rem; }
@media (max-width: 599px) {
  .vcert__seal, .vsample img { width: 180px; height: 48px; }
}

/* ── edition flags ──
   A hairline keeps the white bands of the Nigerian and Indian flags from
   bleeding into a light page, and the whole flag from disappearing into a dark
   one. The globe inherits the text colour instead, since it is a glyph rather
   than a flag. */
.flag { flex: none; width: 20px; height: auto; aspect-ratio: 3 / 2; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(30, 35, 41, .16); }
.flag--globe { aspect-ratio: 1; width: 17px; box-shadow: none; color: var(--text-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
}
:root[data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.lang-menu a > span, .footer__langs a > span { white-space: nowrap; }
.footer__langs a { display: inline-flex; align-items: center; gap: 8px; }
.footer__langs .flag { width: 18px; }

/* The ranking's footer: the method note and the way into the full list share one
   row, the note on the start side and the button on the end side. On a phone the
   row wraps and the button goes full width rather than squeezing the sentence. */
.brand-list__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap; margin-top: 6px; }
.brand-list__foot > p { margin: 0; flex: 1 1 260px; }
.brand-list__all { flex: none; white-space: nowrap; }
@media (max-width: 599px) {
  .brand-list__all { flex: 1 1 100%; justify-content: center; }
}

/* Two-up on a phone: the vertical rule only makes sense on the second cell of
   each pair, so it is redrawn per row rather than per cell. */
@media (max-width: 619px) {
  .brand-card__facts li { padding-inline: 14px; }
  .brand-card__facts li:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
}
/* Below 320px of card the facts collapse to a single column, and a rule drawn
   on the start edge of every cell then reads as a stray indent down the card
   rather than as a divider between columns. */
@container (max-width: 319px) {
  .brand-card__facts li { padding-inline: 0; border-inline-start: 0; }
}

/* The score is the first cell of the data row: the number the ranking is sorted
   by, set larger and in the accent so the eye lands on it first, with the scale
   beside it so "9.6" is never read as a percentage. */
/* The score sits at the far end of the identity row, against the one button, so
   the card has exactly two anchors: who it is on the left, how it scored and
   what to do about it on the right. A hairline — the same one that rules the
   data row — marks the join, which is what the eye was missing when the ring
   simply floated between the name and the edge. */
.brand-card__head > .score-ring { flex: none; width: 52px; height: 52px;
  margin-inline-start: 24px; margin-inline-end: 0; position: relative; }
.brand-card__head > .score-ring::before { content: ""; position: absolute;
  inset-block: -12px; inset-inline-start: -24px; width: 1px; background: var(--line); }
.brand-card__head > .score-ring .score-ring__value b { font-size: .95rem; }
.brand-card__facts li { align-self: start; }

/* At 320px the identity row runs out of room and the longest brand names get
   squeezed under their own width. The pieces shrink instead: a smaller logo and
   ring buy back about 60px, which is more than the longest name needs. */
@media (max-width: 379px) {
  .brand-card__head { gap: 8px; }
  .brand-card__head > .brand-mark, .brand-card__head > .brand-mark svg,
  .brand-card__head > .brand-mark img { width: 40px; height: 40px; }
  .brand-card__rank { width: 22px; height: 22px; font-size: .74rem; }
  .brand-card__head > .score-ring { width: 42px; height: 42px; margin-inline-start: 12px; }
  .brand-card__head > .score-ring::before { inset-inline-start: -12px; }
  .brand-card__head > .score-ring .score-ring__value b { font-size: .85rem; }
  .brand-card__name { font-size: 1rem; }
}