:root { --header-h: 72px; }
/* ─────────────────────────────────────────────────────────────────────────
   Static page layer — added with the generated rebuild (build.py).
   Dense, text-first layout: these pages are read and crawled, not scrolled
   for animation. Same palette as the rest of the site.
   ───────────────────────────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent-1);
    color: #fff;
    padding: 10px 16px;
    z-index: 200;
    border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nav-link.is-active { color: var(--text-primary); }
.nav-link.is-active::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 4px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
}

.section { padding: 56px 0; }
.section-top { padding-top: 40px; }
.section-lede {
    color: var(--text-secondary);
    font-size: 17px;
    max-width: 70ch;
    margin: 0 0 24px;
}

h1, h2, h3 { line-height: 1.2; }
.section h2, .prose h2 {
    font-family: var(--font-heading);
    font-size: 30px;
    margin: 40px 0 14px;
    letter-spacing: -0.01em;
}
.section h2:first-child, .prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; margin: 28px 0 10px; }

.prose { max-width: 78ch; }
.prose p, .prose li { color: var(--text-secondary); font-size: 17px; line-height: 1.65; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.prose a, .panel a, .data-table a { color: #c7c9ff; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text-primary); }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.lede { font-size: 19px; line-height: 1.6; color: var(--text-primary); max-width: 78ch; }
.small { font-size: 14px; }
.muted { color: var(--text-secondary); }

/* tables */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    background: var(--bg-surface);
    margin: 24px 0 8px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 720px;
}
.data-table caption {
    caption-side: top;
    text-align: left;
    padding: 14px 18px;
    color: var(--text-secondary);
    font-size: 13px;
    border-bottom: 1px solid var(--border-glass);
}
.data-table th, .data-table td {
    padding: 12px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border-glass);
    vertical-align: top;
}
.data-table thead th {
    font-family: var(--font-heading);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.data-table tbody th { color: var(--text-primary); font-weight: 600; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.data-table.compact { min-width: 0; font-size: 14px; }
.data-table.compact th, .data-table.compact td { padding: 9px 12px; }
/* N27: a fee cell can carry the firm's own list price under the amount its checkout charges. Block, so the
   second figure never widens the column and the table still fits a 390px phone. */
.price-list {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
    white-space: nowrap;
}
.table-footnote { color: var(--text-secondary); font-size: 13px; margin: 8px 0 24px; }

.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-glass);
}
.pill.ok { color: #6ee7b7; background: rgba(16, 185, 129, 0.12); }
.pill.warn { color: #fcd34d; background: rgba(245, 158, 11, 0.12); }

/* disclosure + breadcrumbs */
.disclosure {
    border-left: 3px solid var(--accent-2);
    background: rgba(168, 85, 247, 0.08);
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin: 0 0 24px;
}
.disclosure p { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

.breadcrumbs {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 18px;
}
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-primary); }

/* panels, grids, cards */
.glass-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    padding: 24px;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.panel h2, .panel h3 { margin-top: 0; font-size: 20px; }
.panel p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.firm-hero { padding: 32px; margin-bottom: 24px; }
.firm-hero h1 { font-size: 40px; font-family: var(--font-heading); margin-bottom: 14px; }

.card-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
}
.card-grid a {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 20px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.card-grid a:hover { transform: translateY(-2px); border-color: var(--accent-1); }
.card-grid strong { font-family: var(--font-heading); font-size: 18px; }
.card-grid span { color: var(--text-secondary); font-size: 14px; line-height: 1.5; }

.criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.criteria-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 20px;
}
.criteria-card h3 { font-family: var(--font-heading); font-size: 17px; margin: 0 0 8px; }
.criteria-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.55; margin: 0; }

.tick-list, .cross-list, .source-list, .link-list { list-style: none; margin: 0; padding: 0; }
.tick-list li, .cross-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); }
.cross-list li::before { content: "×"; position: absolute; left: 0; color: var(--danger); }
.source-list li, .link-list li { margin-bottom: 8px; font-size: 15px; }

.faq dt {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text-primary);
    margin: 22px 0 6px;
}
.faq dd { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cta-box { margin-top: 18px; }
.btn-ghost {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: border-color var(--transition-fast);
}
.btn-ghost:hover { border-color: var(--accent-1); }
a.btn-primary { display: inline-block; text-decoration: none; }
.cta-box .btn-primary, .cta-box .btn-ghost { margin-bottom: 10px; }

/* footer additions */
.footer-content { align-items: flex-start; gap: 32px; }
.footer-brand { max-width: 44ch; }
.footer-note { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin-top: 12px; }
.footer-nav ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(120px, auto)); gap: 8px 28px; }
.footer-nav a { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.footer-nav a:hover { color: var(--text-primary); }
.footer-legal {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border-glass);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}
.footer-legal p { margin: 0 0 8px; }
.footer-legal a { color: #c7c9ff; }

@media (max-width: 860px) {
    .grid-2 { grid-template-columns: 1fr; }
    .firm-hero { padding: 22px; }
    .firm-hero h1 { font-size: 30px; }
    .section h2, .prose h2 { font-size: 25px; }
    .main-nav { flex-wrap: wrap; gap: 10px 18px; }
    .nav-link { font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Homepage selection filters. Server-rendered, hidden until JS confirms it
   can filter, so a no-JS visitor gets the full table and no dead controls.
   ───────────────────────────────────────────────────────────────────────── */

.js-only { display: none; }
html.js .js-only { display: block; }

.section-filters { padding: 8px 0 0; }
.section-filters + .section-table { padding-top: 24px; }

.filter-bar {
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: var(--shadow-glass);
}
.filter-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.filter-bar-head h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    margin: 0;
}
.filter-bar .results-count {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
}
.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 20px;
    align-items: start;
}
.filter-bar .filter-group {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.filter-bar .filter-group legend,
.filter-bar .filter-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding: 0;
}
.filter-bar .checkbox-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}
.filter-bar .glass-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
}
.filter-bar .text-button {
    align-self: end;
    justify-self: start;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-glass);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.filter-bar .text-button:hover { color: var(--text-primary); border-color: var(--accent-1); }
.filter-empty {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}
[data-theme="light"] .filter-bar .glass-select { background: rgba(0, 0, 0, 0.03); }

/* Inline outbound CTA inside the comparison table */
.table-cta {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.table-cta:hover { transform: translateY(-1px); }
.table-cta.ghost {
    background: transparent;
    border: 1px solid var(--border-glass);
    color: var(--text-primary) !important;
}
.cta-cell { white-space: nowrap; }

/* Firm logos: official icons, normalised to a 128px square by the asset pipeline */
.firm-cell-name { display: inline-flex; align-items: center; gap: 8px; }
.row-logo {
    width: 24px; height: 24px;
    border-radius: 6px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px;
    flex: none;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.card-head h2 { margin: 0; font-size: 19px; font-family: var(--font-heading); }
.card-logo {
    width: 40px; height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px;
    flex: none;
}
.firm-title { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.firm-title h1 { margin: 0; }
.hero-logo {
    width: 56px; height: 56px;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.07);
    padding: 5px;
    flex: none;
}
.verify-line {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 10px 0 0;
}
.verify-line a { color: #c7c9ff; }
[data-theme="light"] .row-logo, [data-theme="light"] .card-logo, [data-theme="light"] .hero-logo {
    background: rgba(0, 0, 0, 0.05);
}

/* Blog */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 20px;
}
.post-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.post-card h2 { margin: 0; font-size: 21px; font-family: var(--font-heading); }
.post-card h2 a { color: var(--text-primary); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent-2); }
.post-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin: 0; }
.post-meta {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px !important;
    color: var(--text-secondary);
}
.post-link { color: #c7c9ff; font-size: 14px; font-weight: 600; text-decoration: none; margin-top: auto; }
.post-link:hover { text-decoration: underline; }

/* Card footer: price block + two actions, matching the original card rhythm */
.price-block { display: flex; flex-direction: column; gap: 2px; }
.card-actions { display: flex; gap: 8px; align-items: center; }
.card-actions .btn-primary,
.card-actions .btn-ghost {
    padding: 9px 14px;
    font-size: 13px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}
.firm-logo-image { object-fit: contain; padding: 4px; background-color: rgba(255, 255, 255, 0.06); }
.firm-name a { color: var(--text-primary); text-decoration: none; }
.firm-name a:hover { color: var(--accent-2); }
.tag-verified {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.table-title { font-family: var(--font-heading); font-size: 28px; margin: 0 0 8px; }







/* ── polish pass ───────────────────────────────────────────────────────────
   Small refinements only: rhythm, table readability, focus states. The palette
   and typography are unchanged.
   ─────────────────────────────────────────────────────────────────────── */



/* Focus ring that reads on both themes */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
    border-radius: 6px;
}



/* Table: sticky header while scrolling a long comparison, aligned numbers */
.data-table thead th {
    position: sticky;
    top: 0;
    background: #14141a;
    backdrop-filter: blur(8px);
    z-index: 2;
}
[data-theme="light"] .data-table thead th { background: #ffffff; }
.data-table tbody tr { transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: rgba(99, 102, 241, 0.07); }
.data-table td:nth-child(4),
.data-table td:nth-child(5) { font-variant-numeric: tabular-nums; }
.data-table td:last-child { text-align: right; }



/* CTA row on the hub reads as one block, not two floating buttons */
.cta-row { margin-top: 18px; }
.cta-row .btn-primary, .cta-row .btn-ghost { min-height: 44px; display: inline-flex; align-items: center; }

/* Card hover already exists; make the whole card feel clickable */
.card-grid a:focus-visible, .criteria-card a:focus-visible { outline-offset: 3px; }

@media (max-width: 640px) {
    .hero-section { padding: 44px 0 28px; }
    .data-table { min-width: 680px; font-size: 14px; }
    .data-table th, .data-table td { padding: 10px 12px; }
    .filter-row { grid-template-columns: 1fr 1fr; }
    .filter-bar { padding: 16px; }
    .filter-bar-head h2 { font-size: 18px; }
}





/* Homepage hero: keep the original look but stop it eating the whole first screen.
   The original hero was sized for three nav items and a two-line subtitle. */
.hero-section { padding: 64px 0 44px; }
.hero-title { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; text-wrap: balance; }
.hero-subtitle { font-size: 16.5px; line-height: 1.55; max-width: 62ch; margin-left: auto; margin-right: auto; }
.badge { font-size: 12.5px; }
@media (max-width: 900px) {
    .hero-section { padding: 40px 0 28px; }
    .main-nav { gap: 18px; }
    .nav-link { font-size: 14px; }
}

/* Filters on tablet/mobile: a compact row of groups above the cards instead of a tall column,
   which was pushing the first card a full screen down. */
@media (max-width: 1080px) {
    .grid-container { grid-template-columns: 1fr; gap: 20px; }
    html.js .filters-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px 18px;
        align-items: start;
    }
    .filters-sidebar .filter-header { grid-column: 1 / -1; margin-bottom: 4px; }
    .filters-sidebar .filter-group { margin-bottom: 0; }
    .filters-sidebar .filter-group h3 { margin-bottom: 6px; font-size: 12px; }
}

/* Native controls, themed instead of default white */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-2); width: 15px; height: 15px; }
.filters-sidebar .text-button {
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.04);
}
.filters-sidebar .text-button:hover { border-color: var(--accent-2); }

/* Final hero trim: the page is a comparison tool, not a landing page. Keep the proportions,
   lose the empty space. */
.hero-section { padding: 44px 0 28px; }
.hero-title { font-size: clamp(32px, 3.7vw, 48px); margin-bottom: 12px; }
.hero-subtitle { font-size: 16px; }
.hero-container { gap: 10px; }
.badge { margin-bottom: 14px; }

/* Wordmark colour: "Crypto" stays white, the rest keeps the gradient. The brand is not a link. */
.logo-text { color: var(--text-primary); }

/* KYC and verification values: no pills or ovals. A small square marker plus plain text,
   which reads as data rather than as a badge. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 1px;
    background: var(--text-secondary);
    flex: none;
}
.pill.ok { color: var(--text-primary); background: none; }
.pill.ok::before { background: #10b981; }
.pill.warn { color: var(--text-primary); background: none; }
.pill.warn::before { background: #eab308; }   /* yellow: verification before the first payout */
.pill.hot { color: var(--text-primary); background: none; }
.pill.hot::before { background: #f97316; }    /* orange: verification before the account activates */
.pill.muted { color: var(--text-secondary); background: none; }
.pill.muted::before { background: #6b7280; }  /* grey: the firm does not state its policy */
.tag-stale {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 0;
    color: #fcd34d;
    font-size: 12px;
    font-weight: 500;
}

/* Brand is clickable without looking like a link: an empty anchor stretched over the lockup,
   so no text is inside an <a> and nothing can inherit an underline. */
.logo { position: relative; }
.brand-hit {
    position: absolute;
    inset: -6px -10px;
    z-index: 2;
    border-radius: 10px;
    text-decoration: none;
}
.brand-hit:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Account size sitting next to a price, so a figure is never read as the firm's absolute floor */
.cell-note {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid var(--border-glass);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-secondary);
    vertical-align: 1px;
}

/* Collapsible filters: a native <details>, so it works with no JS at all. */
.filters-sidebar > summary.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0;
}
.filters-sidebar > summary::-webkit-details-marker { display: none; }
.filters-sidebar > summary::marker { content: ""; }
.filters-sidebar > summary span {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.filters-sidebar > summary span::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
    margin-left: 2px;
}
.filters-sidebar[open] > summary span::after { transform: rotate(-135deg); }
.filters-sidebar .filter-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 16px;
}
@media (max-width: 1080px) {
    .filters-sidebar .filter-body {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px 18px;
    }
}

/* Embedded explainer video: vertical, so cap the height and keep it centred */
.video-figure { margin: 24px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.video-figure video {
    width: auto;
    max-width: min(100%, 420px);
    max-height: 70vh;
    border-radius: 16px;
    border: 1px solid var(--border-glass);
    background: #000;
}
.video-figure figcaption { font-size: 13px; color: var(--text-secondary); text-align: center; }
.transcript { margin: 8px 0 24px; border: 1px solid var(--border-glass); border-radius: 12px; padding: 12px 16px; }
.transcript summary { cursor: pointer; font-weight: 600; color: var(--text-primary); }
.transcript p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* Asset focus tag: crypto-only and multi-asset are different products, so they read differently */
.tag-assets { opacity: 0.72; font-variant: small-caps; letter-spacing: 0.02em; }
.firm-card[data-assets="multi"] .tag-assets { color: var(--text-secondary); border-color: var(--border-glass); }

/* Tables with long prose cells: fit the page instead of scrolling sideways, and stack on a phone */
.table-fit { table-layout: fixed; width: 100%; }
.table-fit th, .table-fit td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; vertical-align: top; }
.table-fit th:nth-child(1), .table-fit td:nth-child(1) { width: 20%; }
.table-fit col, .table-fit td { hyphens: auto; }
/* A status word inside a fixed-layout cell has less width than its phrase needs, and the nowrap marker
   pushed the cheapest-guide table 39px past its wrapper at 1280px: the table scrolled sideways while the
   page did not, which reads as a clipped column. Wrap at the space inside table cells only - the cell rule
   above breaks anywhere, which chopped "activation" into three lines - and keep one line everywhere else. */
.table-fit .pill { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* `.data-table thead th` sets nowrap and its specificity beats the cell rule above, so a header longer than
   its fixed column was clipped rather than wrapped: "CHEAPEST FI" and "FORMAT PRI" at 1280px. Wrap at the
   space only - the cell's anywhere rule would split "drawdown". */
.table-fit thead th { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Six columns at 118px each spend 36px of every column on the .data-table inset, which left 82px of text
   and split "Accelerated" (91px) mid-word. The 12px inset gives each column 94px and leaves the original
   component's padding alone. */
.table-fit th, .table-fit td { padding-left: 12px; padding-right: 12px; }

@media (max-width: 760px) {
    .table-wrap:has(.table-fit) { overflow-x: visible; }
    /* .data-table sets min-width:680px at <=640px; without this reset a stacked .table-fit keeps that
       minimum and the browser shrinks the whole page to fit it (55% zoom on a 390px phone). */
    .table-fit { display: block; table-layout: auto; min-width: 0; width: auto; }
    .table-fit thead { display: none; }
    /* A caption sits in a table-caption box, and inside the block-level table above it shrink-wraps to
       min-content: at 390px every caption rendered one word per line in a 101px column with the rest of
       the card empty (measured on /guides/payout-speed.html, 103px, and every other table-fit page). */
    .table-fit caption { display: block; width: auto; text-align: left; }
    .table-fit tbody, .table-fit tr { display: block; }
    .table-fit tr {
        border: 1px solid var(--border-glass);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
        background: rgba(255, 255, 255, 0.02);
    }
    .table-fit th[scope="row"] { display: block; width: auto; padding: 0 0 8px; border: 0; font-size: 16px; }
    /* Label above value, not beside it. The cell used to be a two-column grid (label track | value), and
       the value side was only a single track while the cell held one run of text: 4,256 cells here hold a
       value plus a badge ("$16 <span>5k</span> <span>code E8</span>"), and every element or bare text run
       after the first is its own grid item, so the badge landed in the 34% label column - under the label,
       reading as part of it. Neither column can be forced to hold arbitrary mixed content, so the cell is
       one block and the label takes its own line: no track to leave empty, nothing to misplace, and the
       value gets the whole 310px card instead of 194px, which is what a phone needs. */
    .table-fit td {
        display: block;
        padding: 6px 0;
        border: 0;
    }
    /* A stacked card is a list, not a column of a table: ".data-table td:last-child { text-align: right }"
       exists so prices line up in the desktop grid, and in a card it left one row's label and value hugging
       the right edge while the four above them sat left - measured on /countries/nepal.html, the "Your
       status" row was the only right-aligned line in every card. */
    .table-fit td,
    .table-fit td:last-child { text-align: left; }
    .table-fit td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--text-secondary);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    /* A cell with no label has no line to print: rows whose heading is a `th scope="row"` (every review's
       rule tables, which have no thead) already print their label above the card. */
    .table-fit td:not([data-label])::before { content: none; }
    /* A note inside a cell is evidence for the value above it ("3-5% | 3% on 1-Step, 5% on 2-Step"), and
       under the old two-column grid it became its own grid item in the 34% label column: on a 390px phone
       the daily-loss note for AquaFunded rendered 105px wide and 11 lines tall with half the card empty.
       It belongs under the value, across the whole card - which is now the cell's own width. */
    .table-fit td .rule-note { display: block; margin-top: 2px; text-align: left; }
}

/* What traders like / dislike: two columns that read as evidence, not as a score */
.sentiment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0 10px; }
.sentiment-col { border: 1px solid var(--border-glass); border-radius: 14px; padding: 16px 18px; }
.sentiment-col h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: 0.01em; }
.sentiment-col ul { margin: 0; padding-left: 18px; }
.sentiment-col li { margin-bottom: 8px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.sentiment-col.likes { border-left: 3px solid #10b981; }
.sentiment-col.dislikes { border-left: 3px solid #f97316; }
@media (max-width: 760px) { .sentiment-grid { grid-template-columns: 1fr; } }

/* Country picker */
.country-picker { margin: 20px 0 8px; padding: 16px 18px; border: 1px solid var(--border-glass); border-radius: 14px; }
.country-picker label { display: block; margin-bottom: 8px; }
.country-picker select { max-width: 320px; }
.country-summary { margin: 10px 0 0; font-size: 14px; color: var(--text-secondary); }


/* Inline links in body copy: ten audit runs flagged 28 anchors rendering in browser-default #0000EE at
   2.1:1 contrast, because only .btn/.card links carried a colour. This covers every plain <a> in the
   content area without touching the locked stylesheet. */
.content a:not([class]),
.prose a:not([class]),
main p a:not([class]),
main li a:not([class]) {
    color: var(--accent-2);
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 85, 247, 0.35);
    transition: border-color 0.18s ease, color 0.18s ease;
}

.content a:not([class]):hover,
.prose a:not([class]):hover,
main p a:not([class]):hover,
main li a:not([class]):hover {
    color: #ffffff;
    border-bottom-color: var(--accent-2);
}

.content a:not([class]):focus-visible,
main p a:not([class]):focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* The head-to-head verdict was sitting two screens down, below the table. The computed difference belongs
   directly under the H1: it is the answer, and the table is the evidence. */
.vs-verdict {
    border-left: 3px solid var(--accent-2);
    background: rgba(168, 85, 247, 0.06);
    padding: 14px 18px;
    margin: 18px 0 0;
    border-radius: 0 10px 10px 0;
    font-size: 15px;
    line-height: 1.6;
}

/* The one-line answer under the hero subtitle: computed from the dataset, not written by hand. */
.hero-answer {
    margin: 18px auto 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    border-left: 3px solid var(--success);
    padding-left: 14px;
    text-align: left;
}
.hero-answer strong { color: var(--text-primary); }
.hero-answer a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(168,85,247,0.35); }

/* The country hero sentence names the firm with the cheapest accepted challenge, so it carries the action
   itself. It sits outside .hero-answer on purpose: that rule styles every anchor as a dotted inline link,
   and the button has to look like a button. The box matches the paragraph's own measure so the two align. */
.hero-action { margin: 14px auto 0; max-width: 760px; }
.hero-action .btn-primary { color: #fff; }

/* Hub pages: /vs/ and /guides/ returned 403 until these existed, so 190 comparisons and 8 guides had no parent. */
.vs-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top: 28px; }
.vs-firm-block { padding: 18px 20px; }
.vs-firm-block .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vs-firm-block h2 { font-size: 17px; margin: 0; }
.vs-list { list-style: none; margin: 0; padding: 0; }
.vs-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--border-glass); font-size: 14px; }
.vs-list li:last-child { border-bottom: 0; }
.vs-list a { color: var(--text-primary); text-decoration: none; }
.vs-list a:hover { color: var(--accent-2); }
.vs-price { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Conversion: the verdict names the cheaper firm, so it carries the action. */
.vs-verdict .btn { margin-left: 10px; vertical-align: middle; }

/* The four numbers: the scan-a-buyer-does-before-clicking, with each number's provenance attached. */
.four-numbers { padding: 20px 24px; margin-top: 22px; }
.four-numbers h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary); }
.four-numbers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.four-numbers li { display: grid; grid-template-columns: 168px 1fr; gap: 4px 14px; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-glass); }
.four-numbers li:last-child { border-bottom: 0; padding-bottom: 0; }
.four-numbers strong { color: var(--text-secondary); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; }
.four-numbers span { color: var(--text-primary); font-size: 16px; }
.four-numbers em { grid-column: 2; color: var(--text-secondary); font-style: normal; font-size: 13px; }
@media (max-width: 640px) {
  .four-numbers li { grid-template-columns: 1fr; }
  .four-numbers em { grid-column: 1; }
}

/* The code behind the fee the panel quotes. It sits inside the four numbers rather than under the ladder
   because the figure it changes is quoted at the top of the page: a reader who crosses to the firm without
   it pays the list price. Only a ladder whose rows carry a list figure renders it. */
.four-numbers .promo-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-glass);
  font-size: 14px; color: var(--text-primary); }
.four-numbers .promo-note code { font-size: 13px; padding: 2px 7px; border-radius: 4px;
  background: rgba(168, 85, 247, 0.18); color: var(--text-primary); }

/* The action beside the four numbers: a review's only other button is at the foot of the page, and
   the reader has already decided by the fourth line. Only firms with a code render it. */
.review-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 18px 24px;
  margin-top: 12px; }
.review-cta p { margin: 0; flex: 1 1 320px; font-size: 15px; color: var(--text-secondary); }
.review-cta strong { color: var(--text-primary); }
.review-cta .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .review-cta { padding: 16px 18px; }
  .review-cta .btn { width: 100%; text-align: center; }
}

/* A regulator warning has to be seen before the affiliate button and read as a fact rather than an alarm:
   one ledger line in the site's own type, an amber rule, no badge and no red. */
.regulator-notice { margin-top: 12px; padding: 18px 24px; border-left: 2px solid #fbbf24; }
.regulator-notice h2 { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fbbf24; }
.regulator-notice p { margin: 0 0 10px; font-size: 15px; color: var(--text-secondary); }
.regulator-notice p:last-child { margin-bottom: 0; }
.regulator-notice strong { color: var(--text-primary); }
.regulator-notice a { color: #fbbf24; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .regulator-notice { padding: 16px 18px; } }

/* Verified discount codes: a chip that reads as something you copy, not as prose. */
.code-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: 0.06em;
  background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.35); color: #ffffff;
  padding: 3px 9px; border-radius: 7px; white-space: nowrap; }

/* A code the firm calls limited time is not its standing offer, so the row says which it is (N91). Plain
   uppercase text with no pill: the same rule the status values follow, and the column beside it already
   carries the percentage the row is read for. */
.promo-dated { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #fbbf24; white-space: nowrap; }

/* ------------------------------------------------------------------ type palette
   Pure white at every level flattens the page: heading, label and body all shout equally. This is a
   four-step ramp - white for the thing you came for, a cool off-white for section headings, a muted
   lavender-grey for labels, and a soft grey-white for reading text - plus two accents that carry meaning:
   purple for structure (eyebrows, table headers), green for money. */
html:not([data-theme="light"]) {
    --text-primary: #ededf5;
    --text-secondary: #9b9bad;
}
html:not([data-theme="light"]) body { color: #c6c6d6; }
html:not([data-theme="light"]) h1 { color: #ffffff; }
html:not([data-theme="light"]) h2 { color: #e8e6f6; }
html:not([data-theme="light"]) h3,
html:not([data-theme="light"]) h4 { color: #bdb7d6; }
html:not([data-theme="light"]) h5,
html:not([data-theme="light"]) h6 { color: #a8a2c2; }
html:not([data-theme="light"]) .lede { color: #d3d3e4; }
html:not([data-theme="light"]) p,
html:not([data-theme="light"]) li { color: #c6c6d6; }
html:not([data-theme="light"]) strong,
html:not([data-theme="light"]) b { color: #f2f2fa; }
html:not([data-theme="light"]) .muted,
html:not([data-theme="light"]) .small { color: #9393a6; }
html:not([data-theme="light"]) a { color: #c3a6ff; }
html:not([data-theme="light"]) a:hover { color: #dcc9ff; }

/* Table headers read as structure, not as content, so they take the accent and the smaller size. */
html:not([data-theme="light"]) .data-table thead th {
    color: #a99bd6; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
html:not([data-theme="light"]) .data-table tbody th { color: #b3b3c6; font-weight: 500; }
html:not([data-theme="light"]) .data-table td { color: #d2d2e2; }

/* Money is the one thing on a comparison page worth its own colour. */
html:not([data-theme="light"]) .price,
html:not([data-theme="light"]) .card-price { color: #34d399; }

/* Eyebrows and kickers: short, purple, spaced out - they orient without competing with the H1. */
html:not([data-theme="light"]) .eyebrow,
html:not([data-theme="light"]) .kicker {
    color: #a855f7; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}

/* Small labels were the one thing still too dim: at 12-13px a muted lavender on the hero's purple
   wash fell below comfortable contrast. These are short strings, so they can carry more brightness
   without competing with the H1. */
html:not([data-theme="light"]) .badge { color: #bfb4e0; }
/* Eyebrows stay purple - they are structural, and purple is what marks structure on this site - but a
   brighter purple than #a855f7, which was sinking into the hero's wash at 12px. */
html:not([data-theme="light"]) .eyebrow,
html:not([data-theme="light"]) .kicker { color: #c08bff; }


/* ------------------------------------------------------------------ tinted tags
   Four facts sit on every card and each one is a different kind of decision: what the challenge is, what it
   pays, what you can trade, and what it asks for before you get paid. One grey for all four wasted that.
   The colours are semantic and repeat elsewhere on the site - green money, gold KYC-on-payout, orange
   KYC-before-activation - so a reader learns them once. Tint only, no pill: a 4px corner and a 10% wash, not a
   bubble. */
html:not([data-theme="light"]) .tag {
    border-radius: 4px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07); color: #b9b3cf;
}
html:not([data-theme="light"]) .tag-type {
    color: #a5a3ff; background: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.26);
}
html:not([data-theme="light"]) .tag-split {
    color: #34d399; background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.26);
}
html:not([data-theme="light"]) .tag-assets {
    color: #7fd3f7; background: rgba(56, 189, 248, 0.09); border-color: rgba(56, 189, 248, 0.24);
}
html:not([data-theme="light"]) .firm-card[data-assets="multi"] .tag-assets {
    color: #9b9bad; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08);
}
/* KYC keeps the site-wide mapping: green none, gold before payout, orange before activation, grey unpublished. */
html:not([data-theme="light"]) .tag-kyc-ok {
    color: #34d399; background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.26);
}
html:not([data-theme="light"]) .tag-kyc-warn {
    color: #fbbf24; background: rgba(234, 179, 8, 0.10); border-color: rgba(234, 179, 8, 0.26);
}
html:not([data-theme="light"]) .tag-kyc-hot {
    color: #fb923c; background: rgba(249, 115, 22, 0.10); border-color: rgba(249, 115, 22, 0.26);
}
html:not([data-theme="light"]) .tag-kyc-muted {
    color: #9b9bad; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------------ country bar
   Sits between the hero and the grid because it decides whether the grid is worth reading. One row on a
   desktop, stacked on a phone, and it never moves the price column. */
.country-bar-wrap { margin-bottom: 18px; }
.country-bar { padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 12px 22px;
  align-items: center; justify-content: space-between; }
.country-bar-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.country-bar-label { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #bdb7d6; }
.country-input { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff; font: inherit; font-size: 15px; padding: 9px 13px; border-radius: 8px; min-width: 220px; }
.country-input::placeholder { color: #86869a; }
.country-input:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18); }
.country-bar-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.filter-note { font-size: 13px; color: #9393a6; margin: 0; }
.filter-note.is-ok { color: #34d399; }
.filter-note.is-warn { color: #fbbf24; }
.country-note { font-size: 12px; color: #fbbf24; margin: 8px 0 0; }
.firm-card[hidden] { display: none; }
@media (max-width: 720px) {
  .country-bar { flex-direction: column; align-items: stretch; }
  .country-input { min-width: 100%; }
}

/* Filter counts: the number is what makes a filter decision-ready, so it sits right after the label in a
   tabular figure that does not shift the lines as the count changes. */
.f-count { color: #767690; font-size: 12px; font-variant-numeric: tabular-nums; margin-left: 4px; }
.f-shown { color: #a855f7; font-size: 12px; font-variant-numeric: tabular-nums; margin-left: 6px; }
.f-shown.is-narrowed { color: #34d399; }
.f-shown.is-empty { color: #f87171; }
.filters-sidebar .filter-group h3 { font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
  color: #a99bd6; margin-bottom: 8px; }
.filters-sidebar .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.filters-sidebar .checkbox-label .f-count { margin-left: auto; }
/* A facet state no listed firm holds is stated in words, not offered as a dead radio: the reader
   searching for it needs the answer, and a control that filters nothing is not an answer (N189). */
.facet-note { font-size: 12px; color: #9393a6; margin: 6px 0 0; line-height: 1.45; }
.facet-note a { color: #c4b5fd; text-decoration: underline; }

/* The country verdict goes above the tags on each card, because "is this firm open to me?" outranks the
   fee that follows it. Green accepted, amber accepted with the firm's own qualifier, grey unpublished. */
.country-verdict { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px; letter-spacing: 0.02em; }
.country-verdict.is-ok { color: #34d399; background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3); }
.country-verdict.is-cond { color: #fbbf24; background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.3); }
.country-verdict.is-unknown { color: #9b9bad; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1); }

/* Country sits inside the filter panel with the other facets: one place to narrow, not two. */
.country-filter .country-input { width: 100%; min-width: 0; margin: 4px 0 8px; font-size: 14px; padding: 8px 11px; }
.country-filter .filter-note { margin: 6px 0 4px; line-height: 1.45; }
.country-filter .country-unknown-toggle { margin-top: 6px; font-size: 12px; }
.country-reset { font-size: 12px; color: #a99bd6; background: none; border: 0; padding: 2px 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.country-reset:hover { color: #c08bff; }

/* Two chevrons appeared on the filter summary: the browser's own <details> marker plus the styled one. The
   native marker goes, the styled arrow stays. */
.filters-sidebar > summary { list-style: none; }
.filters-sidebar > summary::-webkit-details-marker { display: none; }
.filters-sidebar > summary::marker { content: ""; }

/* Below 900px the grid is one column, so an open filter panel sits between the hero and the first card.
   With ten groups that is two thousand pixels of filters before any firm - so on a narrow screen the panel
   opens no higher than 72vh and scrolls inside itself, keeping the first card on the same screen. */
@media (max-width: 720px) {
  .filters-sidebar[open] { max-height: 72vh; overflow-y: auto; }
  .filters-sidebar > summary { position: sticky; top: 0; z-index: 2;
    background: rgba(20, 20, 25, 0.95); backdrop-filter: blur(8px); }
}

/* The sidebar was collapsing to full width at 900px, which is a common laptop window with the browser at less
   than full screen - at that point a "sidebar" that spans the page is just a wall of filters. The two-column
   layout now holds down to 720px with a narrower rail, and only stacks below that, where a phone actually needs
   it to. */
/* An earlier rule stacked the grid below 1080px, which is most laptop windows - the filter rail then spanned the
   page and the cards started underneath it. The rail now holds from 721px up, narrowing as space runs out, and
   the card grid is told to wrap on its own rather than overflow a narrow main column. */
@media (min-width: 721px) and (max-width: 1080px) {
  .grid-container { grid-template-columns: 224px 1fr; gap: 18px; }
  .filters-sidebar .checkbox-label { font-size: 12.5px; }
  .filters-sidebar > summary { position: static; }
}
.firms-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Country combobox: a real listbox so it can be filtered, keyboard-driven and styled like the rest of the rail.
   The datalist it replaced behaved differently in every browser and could not be styled at all. */
.country-combo { position: relative; }
.country-caret { position: absolute; right: 11px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid #9b9bad; border-bottom: 1.5px solid #9b9bad; transform: rotate(45deg);
  pointer-events: none; }
.country-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 240px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: #14141a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.country-list li { padding: 7px 9px; border-radius: 5px; font-size: 13px; color: #c6c6d6; cursor: pointer; }
.country-list li:hover, .country-list li.is-active { background: rgba(168, 85, 247, 0.18); color: #ffffff; }
.country-list li[hidden] { display: none; }

/* Header: the count kept wrapping away from the word 'Filter' in a narrow rail. */
.filter-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-header > span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
#shown-count, .f-shown { white-space: nowrap; }
/* A light native scrollbar inside a dark dropdown looked like a rendering bug. */
.country-list { scrollbar-width: thin; scrollbar-color: #3a3a4a transparent; }
.country-list::-webkit-scrollbar { width: 8px; }
.country-list::-webkit-scrollbar-track { background: transparent; }
.country-list::-webkit-scrollbar-thumb { background: #3a3a4a; border-radius: 4px; }

/* Says out loud what the filter can and cannot prove, right under the count. */
.filter-caveat { font-size: 11.5px; line-height: 1.5; color: #8b8b9e; margin: 8px 0 0; }

/* The caveat moved to a footnote: an asterisk in the rail, the sentence under the grid. */
.country-summary-row { margin: 6px 0 4px; display: flex; gap: 4px; align-items: baseline; }
.country-summary-row .filter-note { margin: 0; }
.filter-star { font-size: 13px; line-height: 1; color: #c08bff; text-decoration: none; cursor: pointer; }
.filter-star:hover { color: #dcc9ff; }
.filter-footnote { font-size: 11.5px; line-height: 1.6; color: #8b8b9e; margin: 18px 0 0; max-width: 68ch; }
.filter-star-mark { color: #c08bff; }

/* Compare tick on each card: small, top-right of the header, and only there when JS can act on it. */
/* The tick sits at the bottom right of the card, in the flow rather than floating over the price row, and in
   the page's own greys so it reads as a utility rather than another call to action. */
.compare-row { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.compare-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: 0.02em;
  color: #7d7d8f; cursor: pointer; user-select: none; padding: 3px 6px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); }
.compare-pick:hover { color: #c6c6d6; border-color: rgba(255,255,255,0.16); }
.compare-pick input { accent-color: #6b7280; width: 14px; height: 14px; cursor: pointer; margin: 0; }
.compare-pick:has(input:checked) { color: #d2d2e2; border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06); }
.firm-card { position: relative; }

/* N89: the comparison matrix's last row is where a reader has already finished comparing, so it carries
   the outbound action beside the internal "Read" link. The matrix keeps its own horizontal scroll, so the
   button is sized for a table column rather than the full-bleed hero size, and it keeps the primary
   gradient so it still reads as the action in the row. */
.cell-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.cell-actions > a:not(.btn-primary) { font-size: 13px; }
.cell-actions .btn-primary.cell-cta { padding: 6px 11px; font-size: 12.5px; line-height: 1.3;
  white-space: nowrap; box-shadow: none; border-radius: 8px; }
.cell-actions .btn-primary.cell-cta:hover { transform: none; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.32); }
/* The global rule right-aligns the last column of every .data-table, so the actions follow it there. */
.data-table td:last-child .cell-actions { align-items: flex-end; }

/* N92: every /countries/ page answered "can I trade here" and then routed nobody - 63 pages carrying the
   affiliate disclosure with no outbound link at all, on the one question where the reader has already
   decided. The button sits under the firm's name inside its own row, so the claim and the action are the
   same line, and it is sized for a table cell rather than the hero's full-bleed button. */
.data-table th[scope="row"] .row-cta { display: block; margin-top: 8px; }
.data-table .row-cta .btn-primary { color: #fff; padding: 5px 11px; font-size: 12px; line-height: 1.35;
  white-space: nowrap; box-shadow: none; border-radius: 8px; display: inline-block; }
.data-table .row-cta .btn-primary:hover { transform: none; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.32); }

/* Compare bar: a small floating chip in the corner, not a band across the page. It only exists while something
   is ticked, so it costs nothing the rest of the time. */
.compare-tray { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: flex; align-items: center;
  gap: 10px; padding: 8px 10px 8px 14px; border-radius: 10px; max-width: min(420px, calc(100vw - 40px));
  background: rgba(20, 20, 26, 0.96); border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); }
.compare-tray span { font-size: 12.5px; color: #c6c6d6; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.compare-tray .btn { padding: 6px 11px; font-size: 12px; white-space: nowrap; }
.compare-tray .text-button { font-size: 15px; line-height: 1; color: #9b9bad; background: none; border: 0;
  cursor: pointer; padding: 2px 4px; }
@media (max-width: 640px) {
  .compare-tray { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
}

/* Share: a quiet outline button beside the sort control, and a confirmation that does not move the layout. */
.share-btn { font-size: 12px; padding: 7px 12px; border-radius: 8px;
  /* A <button> gets the browser's own light background, and .btn-ghost sets light text without setting a
     background - so the label was white on white. Dark ground, light text, explicit. */
  background: #17171f; color: #e8e8f2; border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; }
.share-btn:hover { background: #20202b; color: #ffffff;
  border-color: color-mix(in srgb, var(--sec, #a855f7) 55%, transparent); }
.sort-control { display: flex; align-items: center; gap: 10px; }

/* The controls row above the cards does not fit a phone. The results count, the sort select (min-content
   258px, because a select's options set `white-space: pre`) and Share sit on one nowrap flex line, so the
   row's min-content is 402px and the hub's grid track stayed 402px at every width up to 428px: measured
   clipping of 13px at 428, 41px at 400, 51px at 390 and 81px at 360. `body { overflow-x: hidden }` made
   that invisible instead of scrollable, and the filter panel's Reset button rendered as "Res" - on the
   page the whole comparison is read from. Wrapping is what the row means to do when it runs out of room;
   measured identical at 480px and wider, so desktop and tablet are untouched. */
@media (max-width: 460px) {
    .controls-bar, .sort-control { flex-wrap: wrap; row-gap: 8px; }
}

.share-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); z-index: 60;
  padding: 10px 16px; border-radius: 8px; font-size: 13px; color: #ffffff;
  background: rgba(24, 24, 32, 0.96); border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.share-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* The rules block: a term table plus the firm's own sentence, which is the evidence for the row above it. */
/* A note is prose under a datum, so it takes its own line at every width: inline after the value it
   wrapped mid-phrase against the right edge of a 590px cell. The value keeps the row's alignment. */
.rule-note { color: #8b8b9e; font-size: 12.5px; display: block; text-align: left; margin-top: 2px; }
.rule-quote { margin: 18px 0 8px; padding: 12px 16px; border-left: 2px solid rgba(168, 85, 247, 0.5);
  background: rgba(255, 255, 255, 0.02); font-size: 14px; line-height: 1.6; color: #c6c6d6; }
.rule-quote cite { display: block; margin-top: 8px; font-size: 11.5px; color: #8b8b9e; font-style: normal;
  word-break: break-all; }

/* A source listed as the address itself. An address has no spaces in it, so it cannot wrap at a word
   boundary: at a 390px viewport one anchored evidence URL measured 424px inside a 277px paragraph and
   was clipped by `body { overflow-x: hidden }`, on the pages whose whole claim is that the source can be
   followed and checked. Break inside the address instead, and only when the line needs it.
   `anywhere` rather than `break-word` alone: it also lowers the element's min-content width, so a link
   inside a flex or grid track shrinks the container instead of pushing it past the viewport. */
.src-link { overflow-wrap: anywhere; word-break: break-word; }

/* Multi-firm comparison: a full-screen dialog with a table that scrolls in both directions, because six firms
   x sixteen rows does not fit any phone. The first column stays put so the row label never leaves the screen. */
.compare-dialog { width: min(1180px, 96vw); max-height: 88vh; padding: 0; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; background: #101016; color: #c6c6d6; }
.compare-dialog::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px); }
.compare-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0;
  background: #101016; z-index: 2; }
.compare-dialog-head h2 { margin: 0; font-size: 16px; color: #ffffff; }
.compare-dialog-actions { display: flex; align-items: center; gap: 10px; }
.compare-dialog-actions .text-button { font-size: 20px; line-height: 1; background: none; border: 0;
  color: #9b9bad; cursor: pointer; padding: 2px 6px; }
.compare-dialog-body { padding: 8px 18px 20px; overflow: auto; max-height: calc(88vh - 60px); }
.compare-many-table { font-size: 13px; min-width: 640px; }
.compare-many-table th[scope="row"] { font-weight: 500; color: #b3b3c6; white-space: nowrap; }
.compare-many-table thead th { position: sticky; top: 0; background: #101016; z-index: 2; }
.compare-many-table thead th:first-child { z-index: 3; }

/* The row-label column used to stick to the left edge. On a narrow dialog it sat on top of the first firm's
   numbers, which is the one thing the table exists to show. The labels now scroll with the table: to read the
   firms you scroll horizontally, to read the labels you scroll back. */
.compare-many-table td { color: #d2d2e2; }

/* Dialog fixes from looking at it: the Share button inherited a white-on-white ghost style, columns were
   uneven, and the page behind kept its own scrollbar so two scrollbars competed. */
.compare-dialog-actions .share-btn { color: #c6c6d6; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04); border-radius: 6px; }
.compare-dialog-actions .share-btn:hover { color: #ffffff; border-color: rgba(168,85,247,0.5); }
.compare-many-table { table-layout: auto; border-collapse: collapse; }
.compare-many-table th, .compare-many-table td { min-width: 150px; padding: 9px 12px; text-align: left;
  vertical-align: top; border-bottom: 1px solid rgba(255,255,255,0.06); }
.compare-many-table thead th { white-space: nowrap; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #a99bd6; }
.compare-many-table th[scope="row"] { min-width: 170px; }
.compare-many-table td { font-size: 13px; line-height: 1.45; }
.compare-dialog-body::-webkit-scrollbar { width: 10px; height: 10px; }
.compare-dialog-body::-webkit-scrollbar-thumb { background: #3a3a4a; border-radius: 5px; }
.compare-dialog-body::-webkit-scrollbar-track { background: transparent; }
body.compare-open { overflow: hidden; }

/* The sticky row label only sticks against the real scroll container. .table-wrap has its own overflow, which
   made the label scroll away inside it, so inside the dialog the wrapper stops scrolling and the body does. */
.compare-dialog-body .table-wrap { overflow: visible; }
.compare-dialog-body .compare-many-table th[scope="row"] { box-shadow: none; }

/* Per-firm colour. Twenty reviews in one purple made twenty companies look like one product; each page now
   takes the dominant colour out of that firm's own logo (make_brands.py) and uses it for the page's accents,
   leaving the site purple for everything shared. */
.brand-strip { height: 3px; background: linear-gradient(90deg, var(--brand, #a855f7), var(--brand-2, #6366f1)); }
main[style*="--brand"] h2 { color: #ffffff; }
main[style*="--brand"] h2::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 10px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 2px; }
main[style*="--brand"] .eyebrow { color: var(--brand); }
main[style*="--brand"] .price, main[style*="--brand"] .card-price { color: var(--brand); }
main[style*="--brand"] .btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: #0b0b10;
  font-weight: 700; }
main[style*="--brand"] .btn-primary:hover { filter: brightness(1.08); }
main[style*="--brand"] .tag-type { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, transparent); }
main[style*="--brand"] .firm-name a:hover, main[style*="--brand"] .link-list a:hover { color: var(--brand); }

/* ------------------------------------------------------------------ colour system
   One accent per section, so a reader knows where they are before reading the heading, and each firm's own
   logo colour on its card and review page. Everything stays on the dark base; contrast is measured, not assumed. */
html[data-section] { --sec: #a855f7; --sec-2: #6366f1; }
html[data-section="firms"]        { --sec: #a855f7; --sec-2: #6366f1; }
html[data-section="reviews"]      { --sec: #38bdf8; --sec-2: #6366f1; }
html[data-section="versus"]       { --sec: #818cf8; --sec-2: #a855f7; }
html[data-section="guides"]       { --sec: #34d399; --sec-2: #10b981; }
html[data-section="prices"]       { --sec: #2dd4bf; --sec-2: #34d399; }
html[data-section="changes"]      { --sec: #fbbf24; --sec-2: #f97316; }
html[data-section="evidence"]     { --sec: #fb7185; --sec-2: #f43f5e; }
html[data-section="offers"]       { --sec: #facc15; --sec-2: #f59e0b; }
html[data-section="blog"]         { --sec: #f472b6; --sec-2: #a855f7; }

/* A hairline of the section colour at the very top of the page, and the eyebrow in the same hue. */
body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70;
  background: linear-gradient(90deg, var(--sec), var(--sec-2)); }
html[data-section] .eyebrow, html[data-section] .kicker { color: var(--sec); }
html[data-section] h2::after { background: linear-gradient(90deg, var(--sec), var(--sec-2)); }
html[data-section] .badge { color: var(--sec); border-color: color-mix(in srgb, var(--sec) 35%, transparent); }
html[data-section] a:hover { color: var(--sec); }
html[data-section] .data-table thead th { color: color-mix(in srgb, var(--sec) 70%, #ffffff); }

/* Cards: the firm's own colour down the top edge, which turns a wall of identical panels into a grid you can
   navigate by eye. The bar is the only thing tinted - the card body keeps its neutral glass. */
.firm-card { overflow: hidden; }
.card-brand { position: absolute; top: 0; left: 0; right: 0; height: 3px; display: block;
  background: linear-gradient(90deg, var(--brand, #a855f7), var(--brand-2, #6366f1)); }
.firm-card:hover { border-color: color-mix(in srgb, var(--brand, #a855f7) 45%, transparent); }
.firm-card:hover .firm-logo-image { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #a855f7) 55%, transparent); }
.firm-card .firm-name a:hover { color: var(--brand, #a855f7); }
.firm-card .price { color: #34d399; }

/* The tray was visible with nothing selected: display:flex in its own rule beat the [hidden] attribute. */
.compare-tray[hidden] { display: none !important; }   /* html.js .js-only { display:block } outranks a plain [hidden] */

/* A wash of the section colour behind the page, so the hue is felt before a word is read - and the same colour
   on the section headings' underline, tables' headers and links. */
body { background-image: radial-gradient(900px 420px at 50% -120px,
  color-mix(in srgb, var(--sec, #a855f7) 9%, transparent), transparent 70%); background-repeat: no-repeat; }

/* Restraint: the brand colour belongs on the card's edge and on hover, not on the text. Colourful names and
   cyan payout values turned a comparison into a paint chart, and the words carry the meaning anyway. */
.firm-card .firm-name a { color: #f2f2fa; }
.firm-card .stat-value { color: #d2d2e2; }

/* The global rule ".data-table td:last-child { text-align: right }" exists for price columns and was also
   hitting the multi-firm comparison, so the last firm's column sat right-aligned against everything else. */
.compare-many-table th,
.compare-many-table td,
.compare-many-table thead th:last-child,
.compare-many-table tbody td:last-child,
.compare-many-table tbody th:last-child { text-align: left; }

/* With table-layout auto the last firm column absorbed all the leftover width and looked detached from the
   others. Fixed layout gives the term column a set width and splits the rest equally. */
.compare-many-table { table-layout: fixed; width: 100%; }
.compare-many-table th[scope="row"] { width: 168px; }
.compare-many-table thead th:first-child { width: 168px; }

/* 'crypto only' is on every card, so painting it aqua meant twenty aqua chips repeating the same default. The
   exception is what deserves colour: a multi-asset firm is the one worth noticing. */
html:not([data-theme="light"]) .tag-assets {
  color: #9b9bad; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }
html:not([data-theme="light"]) .firm-card[data-assets="multi"] .tag-assets {
  color: #7fd3f7; background: rgba(56, 189, 248, 0.09); border-color: rgba(56, 189, 248, 0.24); }

/* Blue is back, but only where it marks something: the one card that is actually cheapest, the instant format
   (the exception among formats), and a payout speed that is genuinely fast. Elsewhere the page stays neutral. */
.card-flag { position: absolute; top: 3px; right: 0; padding: 2px 9px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #0b0b10; background: #7fd3f7;
  border-bottom-left-radius: 6px; }
.firm-card[data-cheapest="1"] { border-color: rgba(127, 211, 247, 0.38); }
/* Only 'on demand' earns the blue. 'Within 24 hours' turned twelve of twenty cards blue, which is decoration,
   not a highlight - and 13 firms sell an instant format, so that chip stays neutral too. */
html:not([data-theme="light"]) .firm-card[data-speed="ondemand"] .stat-item:nth-child(3) .stat-value {
  color: #7fd3f7; font-weight: 600; }

/* Country index on the guide: a plain list of links, three columns on desktop. */
.country-index { columns: 3; column-gap: 24px; margin: 14px 0 0; padding-left: 18px; }
.country-index li { margin: 0 0 6px; font-size: 13.5px; break-inside: avoid; }
.country-state { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.country-state.is-ok { color: #34d399; background: rgba(16,185,129,.10); }
.country-state.is-cond { color: #fbbf24; background: rgba(234,179,8,.10); }
.country-state.is-unknown { color: #9b9bad; background: rgba(255,255,255,.05); }
@media (max-width: 720px) { .country-index { columns: 1; } }

/* Country hub: three count columns. The global ".data-table td:last-child { text-align: right }" exists
   for price columns, and applied here it right-aligns the last count against a left-aligned header. */
.data-table.country-table td { text-align: left; }

/* Sticky offer on the reviews we can be paid for. It appears after the verdict, not on arrival: a bar that
   covers the page from the first second reads as an advert, and adverts get closed. */
.sticky-offer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none;
  align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px;
  background: rgba(16, 16, 22, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px); }
.sticky-offer span { font-size: 13px; color: #c6c6d6; }
.sticky-offer .btn-primary { padding: 9px 16px; font-size: 13px; }
html.js .sticky-offer.is-visible { display: flex; }
@media (max-width: 640px) { .sticky-offer span { font-size: 12px; } }

/* Third time this rule has bitten: html.js .js-only { display: block } outranks a plain class selector, so any
   js-only element that needs flex must say so with the same specificity. */
html.js .compare-row { display: flex; justify-content: flex-end; }
html.js .compare-row .compare-pick { display: inline-flex; }

/* Warnings sit above the numbers, because a regulator's name on a firm outranks its fee. Amber, not red: the
   claim is 'listed as operating without authorisation', which is not the same as 'did not pay'. */
.warning-box { margin: 18px 0 8px; padding: 16px 18px; border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.42); background: rgba(251, 191, 36, 0.07); }
.warning-box h2 { margin: 4px 0 8px; font-size: 17px; color: #fbbf24; }
.warning-box h2::after { display: none; }
.warning-kicker { margin: 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fbbf24; opacity: 0.85; }
.warning-box p { font-size: 13.5px; color: #d6d0bf; margin: 0 0 8px; }
.warning-box blockquote { margin: 10px 0 6px; padding-left: 12px; border-left: 2px solid rgba(251,191,36,.5);
  font-size: 13px; color: #cfc7b2; }
.warning-box cite { display: block; margin-top: 6px; font-size: 11px; font-style: normal; color: #9b9bad;
  word-break: break-all; }
.warning-tp { font-size: 12.5px; color: #b3b3c6; margin-top: 10px; }
.card-warn { position: absolute; top: 3px; left: 0; padding: 2px 9px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #0b0b10; background: #fbbf24;
  border-bottom-right-radius: 6px; }

/* A way out, offered inside the warning itself: the reader should not have to scroll past a warning to reach
   an alternative, and the site should not hide the fact that the warned firm still has a working link. */
.warning-alt { margin: 10px 0 0; font-size: 13px; }
.warning-alt a { color: #fbbf24; text-decoration: underline; text-underline-offset: 2px; }

/* Parity with the other firms: no flag on the card, and the notice is a normal section with a quieter frame
   rather than a banner that takes over the top of the page. The content stands; the emphasis does not shout. */
.warning-box { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }
.warning-box h2 { color: #e8e6f6; font-size: 16px; }
.warning-kicker { color: #fbbf24; }

/* The code a card's headline fee needs, under the size it applies to. The card is the first price a reader
   meets, and on a promo ladder that figure is the one the code produces - a card that prints it without
   naming the code sends the reader to a checkout quoting the list price. */
.price-code { margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--text-secondary); }
.price-code code { padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary); font-size: 11px; }

/* The same code, inside a table cell that quotes a promo ladder's fee. Guides and the comparison matrix
   print the fee as the firm's price; without the code beside it the reader pays the list price. Muted and
   inline rather than a chip, so a column of fees still reads as a column of fees. */
.fee-code { display: inline-block; margin-left: 6px; font-size: 11px; line-height: 1.3;
  color: var(--text-secondary); white-space: nowrap; }
.fee-code code { padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary); font-size: 11px; }

/* The support study: four counted facts at the top, then a table whose cells hold sentences rather than numbers.
   Without these the stat row rendered as run-together text ("6CONTRADICT THEMSELVES") because the classes had no
   styles at all. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px; margin: 22px 0 26px; }
.stat { padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03); }
.stat-num { display: block; font-family: var(--font-display, "Outfit", sans-serif); font-size: 30px; font-weight: 800;
  line-height: 1.05; color: #34d399; }
.stat-label { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #9b9bad; }
.sup-ch { display: block; font-size: 12.5px; line-height: 1.5; color: #c6c6d6; }
.sup-flag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #0b0b10; background: #fbbf24;
  cursor: help; vertical-align: middle; }
.plain-list { margin: 10px 0 14px; padding-left: 20px; }
.plain-list li { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #c6c6d6; }
/* the table's own cells wrap at word boundaries, not inside an email address */
.data-table td, .data-table th { overflow-wrap: normal; word-break: normal; }

/* Scope labels in the crypto-vs-multi-asset table: two words that carry the page's whole argument, so they read as
   labels rather than as prose. */
.scope-only, .scope-mixed { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.scope-only { color: #0b0b10; background: #34d399; }
.scope-mixed { color: #d6d0bf; background: rgba(251, 191, 36, 0.16); border: 1px solid rgba(251, 191, 36, 0.4); }

/* Computed superlatives on the firm cards. Each is a claim about the data, so they sit in a row above the firm
   name, stay short, and carry the reason in the tooltip rather than as extra words on the card. */
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.badge-row .card-flag { position: static; top: auto; right: auto; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  color: #0b0b10; background: #c4b5fd; cursor: help; }
.badge-row .card-flag:nth-child(2) { background: rgba(255,255,255,0.16); color: #e8e6f6; }
.badge-row .card-flag:nth-child(3) { background: rgba(255,255,255,0.09); color: #c6c6d6; }

.badge-legend { max-width: 70ch; margin: 4px 0 18px; }

/* Mobile header: the wordmark stays, the links fold into a hamburger.
   The original theme stacked the brand above a full-width nav at 600px, which pushed everything down and left the
   logo sharing the top of the page with five links; the brand is the one thing that must never leave the screen. */
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .glass-header { position: sticky; top: 0; z-index: 50; }
  .header-container { position: relative; flex-direction: row; align-items: center; gap: 10px; }
  .header-brand { width: auto; flex: 1 1 auto; min-width: 0; }
  .header-container .logo { gap: 8px; }
  .header-container .site-logo { width: 34px; height: 34px; }
  .header-container .logo-text { font-size: 17px; letter-spacing: -0.4px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    margin-left: auto; width: 44px; height: 44px; padding: 0 10px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); }
  .nav-toggle-bar { display: block; height: 2px; width: 100%; background: #e8e6f6; border-radius: 1px;
    transition: transform 0.18s ease, opacity 0.18s ease; }
  body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .header-container .main-nav { display: none; }
  body.nav-open .header-container .main-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; margin: 6px 0 0; padding: 6px 12px 10px;
    background: #0b0b10; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55); z-index: 60; }
  body.nav-open .header-container .main-nav .nav-link {
    padding: 12px 6px; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  body.nav-open .header-container .main-nav .nav-link:last-child { border-bottom: 0; }
}

/* A screenshot of the firm's own site, captioned with the URL and the date. Constrained height so one picture does
   not push the numbers a reader came for off the first two screens. */
.firm-shot { margin: 18px 0 22px; }
.firm-shot a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
  background: #0b0b10; }
.firm-shot img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover;
  object-position: top center; }
.firm-shot figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: #9b9bad; }

/* One disclosure line, in the footer, small enough to be read when looked for and quiet enough not to be the first
   thing a reader meets. The bounded aside it replaces appeared on every page that carried a link. */
.affiliate-note { max-width: 78ch; margin: 14px auto 0; padding: 0 16px; font-size: 12px; line-height: 1.55;
  color: #8b8b9e; text-align: center; }
.affiliate-note a { color: #a99bd6; text-decoration: underline; text-underline-offset: 2px; }

/* The filter header, made into something a reader notices rather than a line of small print. On a phone this is
   the only way into the panel, so it has to look like a control. */
.filters-sidebar > summary.filter-header { gap: 10px; padding: 12px 14px; border-radius: 10px;
  background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.35); }
.filters-sidebar > summary.filter-header:hover { background: rgba(168, 85, 247, 0.16); }
.filter-title { font-family: var(--font-display, "Outfit", sans-serif); font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em; color: #f0eaff; }
.filters-sidebar .f-shown { margin-left: 2px; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.03em; color: #0b0b10; background: #a855f7; }
.filters-sidebar .f-shown[hidden] { display: none; }

/* 'Clear all' wrapped onto two lines in the 224px rail, which read as a layout fault rather than a button. */
.filters-sidebar #reset-filters { white-space: nowrap; font-size: 12px; padding: 4px 8px; }

/* The KYC sentence a classification rests on. Shown on every review, because a colour chip with no quote is an
   assertion, and a quote with a link is evidence. Scoped to the dark theme like the rest of pages.css. */
html:not([data-theme="light"]) .kyc-quote {
  margin: 1.1rem 0 .5rem;
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--sec, #a855f7);
  background: rgba(255, 255, 255, .04);
  border-radius: 0 8px 8px 0;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--text-secondary, #9b9bad);
}
html:not([data-theme="light"]) .kyc-source {
  font-size: .86rem;
  color: var(--text-muted, #7a7a8c);
  margin: 0 0 1.2rem;
}
html:not([data-theme="light"]) .kyc-source a { color: var(--sec-2, #6366f1); text-decoration: underline; text-underline-offset: 2px; }

/* A callout that says "this firm contradicts itself". Amber, never red: a contradiction in a firm's own pages is a
   fact to show the reader, not an accusation. Written because the block shipped with no styles at all the first time,
   the same way .stat-row rendered "6CONTRADICT THEMSELVES" on the support study. */
html:not([data-theme="light"]) .callout {
  margin: 1.2rem 0;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(234, 179, 8, .35);
  background: rgba(234, 179, 8, .07);
  font-size: .95rem;
  line-height: 1.62;
  color: var(--text-secondary, #9b9bad);
}
html:not([data-theme="light"]) .callout p { margin: 0; }
html:not([data-theme="light"]) .callout strong { color: var(--text-primary, #ededf5); }
html:not([data-theme="light"]) .callout a { color: #eab308; text-decoration: underline; text-underline-offset: 2px; }

html:not([data-theme="light"]) .kyc-products { margin: 1.2rem 0 1.6rem; }
html:not([data-theme="light"]) .kyc-products caption {
  text-align: left; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted, #7a7a8c); padding-bottom: .5rem;
}
html:not([data-theme="light"]) .kyc-products th,
html:not([data-theme="light"]) .kyc-products td { font-size: .92rem; padding: .5rem .6rem; }