/*
* Forex Broker — single + archive shared styles.
*
* Keeps the page coherent without invoking the existing Tailwind build (which
* would require touching tailwind.src.css for every iteration). Tokens chosen
* to match the theme's existing dark glass aesthetic; refactor into Tailwind
* utilities later if desired.
*/
:root {
--fc-broker-accent: #6366f1;
--fc-broker-card-bg: rgba(20, 24, 38, 0.65);
--fc-broker-card-border: rgba(255, 255, 255, 0.08);
--fc-broker-text-dim: rgba(255, 255, 255, 0.62);
--fc-broker-text-faint: rgba(255, 255, 255, 0.42);
--fc-broker-radar-shape: var(--fc-broker-accent);
}
.fc-broker-page main {
color: rgba(255, 255, 255, 0.92);
}
/* ── Section heading + rating chip ─────────────────────────────────── */
.fc-broker-section {
margin: 48px 0;
}
.fc-broker-section__head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 18px;
border-bottom: 1px solid var(--fc-broker-card-border);
padding-bottom: 10px;
}
.fc-broker-section__title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
flex: 1 1 auto;
}
.fc-broker-chip {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--fc-broker-card-border);
}
.fc-broker-chip--high { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); }
.fc-broker-chip--mid { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.32); }
.fc-broker-chip--low { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.35); }
.fc-broker-chip__label { font-weight: 600; }
.fc-broker-chip__value { font-weight: 700; }
.fc-broker-chip__max { color: var(--fc-broker-text-faint); font-size: 11px; }
/* ── Hero ──────────────────────────────────────────────────────────── */
.fc-broker-hero {
display: grid;
grid-template-columns: 1fr 420px;
gap: 32px;
padding: 32px;
background: var(--fc-broker-card-bg);
border: 1px solid var(--fc-broker-card-border);
border-radius: 16px;
margin: 24px 0 48px;
position: relative;
overflow: hidden;
}
.fc-broker-hero::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--fc-broker-accent);
opacity: 0.6;
}
@media (max-width: 900px) {
.fc-broker-hero { grid-template-columns: 1fr; padding: 20px; }
.fc-broker-hero__panel { order: -1; }
}
.fc-broker-hero__main { display: flex; flex-direction: column; gap: 14px; }
.fc-broker-hero__logo { display: flex; align-items: center; gap: 12px; }
.fc-broker-hero__logo-name { font-size: 1.4rem; font-weight: 700; }
.fc-broker-hero__title { font-size: 2rem; font-weight: 800; margin: 0; line-height: 1.15; }
.fc-broker-hero__byline { color: var(--fc-broker-text-dim); margin: 0; font-size: 14px; }
.fc-broker-hero__byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fc-broker-hero__tagline { color: var(--fc-broker-text-dim); font-size: 1.05rem; margin: 0; }
.fc-broker-hero__cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.fc-broker-hero__website {
color: var(--fc-broker-text-dim);
text-decoration: underline;
text-underline-offset: 3px;
font-size: 14px;
}
.fc-broker-hero__panel { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fc-broker-hero__radar-wrap { width: 100%; max-width: 360px; }
.fc-broker-hero__overall {
display: inline-flex; align-items: baseline; gap: 4px;
background: rgba(255,255,255,0.04); padding: 8px 16px; border-radius: 999px;
}
.fc-broker-hero__overall-label { color: var(--fc-broker-text-dim); font-size: 13px; }
.fc-broker-hero__overall-value { font-size: 1.6rem; font-weight: 800; }
.fc-broker-hero__overall-max { color: var(--fc-broker-text-faint); font-size: 13px; }
/* ── Logos (§4.9 spec'd class names) ───────────────────────────────── */
.fc-broker-logo-icon { aspect-ratio: 1/1; object-fit: contain; width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,0.04); padding: 6px; }
.fc-broker-logo-full { aspect-ratio: 3/1; object-fit: contain; max-height: 64px; max-width: 240px; }
.fc-broker-logo-letterbox {
aspect-ratio: 1/1; object-fit: contain;
background: var(--logo-bg, rgba(255,255,255,0.08));
padding: 8%; border-radius: 12px;
display: inline-grid; place-items: center;
width: 56px; height: 56px;
}
.fc-broker-logo-letterbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fc-broker-logo-textbadge {
background: var(--logo-bg, #1e40af);
color: white; font-weight: 700;
aspect-ratio: 1/1; display: grid; place-items: center;
width: 56px; height: 56px;
border-radius: 12px; font-size: 1.25rem;
letter-spacing: 0.02em;
}
/* ── Radar ─────────────────────────────────────────────────────────── */
.fc-broker-radar { width: 100%; height: auto; display: block; }
.fc-broker-radar__grid polygon, .fc-broker-radar__grid line { stroke: rgba(255,255,255,0.10); fill: none; }
.fc-broker-radar__shape {
fill: var(--fc-broker-radar-shape); fill-opacity: 0.22;
stroke: var(--fc-broker-radar-shape); stroke-width: 2; stroke-linejoin: round;
transition: all 200ms ease-out;
}
.fc-broker-radar__label-name { font-size: 11px; font-weight: 600; fill: rgba(255,255,255,0.86); }
.fc-broker-radar__label-value { font-size: 12px; font-weight: 700; fill: var(--fc-broker-radar-shape); }
/* ── View switcher + customise modal ───────────────────────────────── */
.fc-broker-view-switcher { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.fc-broker-view-switcher__label { font-size: 12px; color: var(--fc-broker-text-dim); }
.fc-broker-view-switcher__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-broker-view-chip {
padding: 5px 12px; font-size: 12px; font-weight: 600;
background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.78);
border: 1px solid var(--fc-broker-card-border); border-radius: 999px;
cursor: pointer;
}
.fc-broker-view-chip:hover { background: rgba(255,255,255,0.08); }
.fc-broker-view-chip.is-active { background: var(--fc-broker-accent); color: white; border-color: var(--fc-broker-accent); }
.fc-broker-view-chip--custom { font-style: italic; }
.fc-broker-customise-modal {
border: 1px solid var(--fc-broker-card-border); border-radius: 12px;
background: #14182a; color: white; padding: 24px; max-width: 520px;
}
.fc-broker-customise-modal::backdrop { background: rgba(0,0,0,0.55); }
.fc-broker-customise-modal h3 { margin: 0 0 6px; }
.fc-broker-customise-hint { color: var(--fc-broker-text-dim); margin: 0 0 16px; font-size: 13px; }
.fc-broker-customise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.fc-broker-customise-grid label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.fc-broker-customise-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* ── CTA ───────────────────────────────────────────────────────────── */
.fc-broker-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 12px 22px; font-weight: 700;
background: var(--fc-broker-accent); color: white;
border-radius: 10px; text-decoration: none;
transition: filter 120ms ease;
}
.fc-broker-cta:hover, .fc-broker-cta:focus { filter: brightness(1.08); color: white; }
.fc-broker-cta--full-width { width: 100%; padding: 16px 22px; font-size: 1.05rem; }
/* ── Country badge ─────────────────────────────────────────────────── */
.fc-broker-country-badge {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 16px; border-radius: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--fc-broker-card-border);
}
.fc-broker-country-badge--supported { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.fc-broker-country-badge--accepts_with_warning { border-color: rgba(234, 179, 8, 0.45); background: rgba(234, 179, 8, 0.08); }
.fc-broker-country-badge--restricted { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
.fc-broker-country-badge__icon { font-size: 1.4rem; line-height: 1; }
.fc-broker-country-badge__body { display: flex; flex-direction: column; gap: 4px; }
.fc-broker-country-badge__entity, .fc-broker-country-badge__terms { font-size: 13px; color: var(--fc-broker-text-dim); }
.fc-broker-country-badge__alt { color: inherit; text-decoration: underline; font-size: 14px; }
/* ── Quick facts strip ─────────────────────────────────────────────── */
.fc-broker-quickfacts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1px; background: var(--fc-broker-card-border);
border: 1px solid var(--fc-broker-card-border); border-radius: 12px; overflow: hidden;
margin: 0 0 24px;
}
.fc-broker-quickfacts > div {
background: var(--fc-broker-card-bg);
padding: 14px 16px;
display: flex; flex-direction: column; gap: 4px;
}
.fc-broker-quickfacts dt { color: var(--fc-broker-text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.fc-broker-quickfacts dd { margin: 0; font-size: 1.15rem; font-weight: 700; }
/* ── Tables ────────────────────────────────────────────────────────── */
.fc-broker-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fc-broker-table th, .fc-broker-table td {
padding: 10px 12px; text-align: left;
border-bottom: 1px solid var(--fc-broker-card-border);
}
.fc-broker-table th { font-weight: 700; color: var(--fc-broker-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.fc-broker-table tr:hover td { background: rgba(255,255,255,0.02); }
/* ── Pros / cons ───────────────────────────────────────────────────── */
.fc-broker-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .fc-broker-proscons { grid-template-columns: 1fr; } }
.fc-broker-proscons > div {
padding: 18px; border-radius: 12px;
border: 1px solid var(--fc-broker-card-border);
background: var(--fc-broker-card-bg);
}
.fc-broker-proscons h4 { margin: 0 0 10px; font-size: 1.05rem; }
.fc-broker-proscons ul { margin: 0; padding-left: 1.1em; }
.fc-broker-proscons li { margin: 4px 0; }
.fc-broker-proscons--pros { border-color: rgba(34, 197, 94, 0.35); }
.fc-broker-proscons--cons { border-color: rgba(239, 68, 68, 0.35); }
/* ── Regulation cards ──────────────────────────────────────────────── */
.fc-broker-reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.fc-broker-reg-card {
padding: 18px; border-radius: 12px;
border: 1px solid var(--fc-broker-card-border);
background: var(--fc-broker-card-bg);
display: flex; flex-direction: column; gap: 6px;
}
.fc-broker-reg-card__regulator { font-size: 0.95rem; font-weight: 700; }
.fc-broker-reg-card__license { color: var(--fc-broker-text-dim); font-family: monospace; font-size: 13px; }
.fc-broker-reg-card__entity { color: var(--fc-broker-text-dim); font-size: 13px; }
.fc-broker-reg-card__source a { color: inherit; text-decoration: underline; font-size: 12px; }
.fc-broker-reg-card__status {
display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
background: rgba(34,197,94,0.18); color: rgba(34,197,94,0.95);
}
.fc-broker-reg-card__status--revoked { background: rgba(239,68,68,0.18); color: rgba(239,68,68,0.95); }
.fc-broker-reg-card__status--warning { background: rgba(234,179,8,0.18); color: rgba(234,179,8,0.95); }
.fc-broker-reg-card__status--expired { background: rgba(150,150,150,0.18); color: rgba(150,150,150,0.95); }
/* ── Asset universe bars ───────────────────────────────────────────── */
.fc-broker-bars { display: flex; flex-direction: column; gap: 8px; }
.fc-broker-bars__row { display: grid; grid-template-columns: 140px 1fr 60px; align-items: center; gap: 10px; font-size: 14px; }
.fc-broker-bars__name { color: var(--fc-broker-text-dim); }
.fc-broker-bars__bar { height: 10px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.fc-broker-bars__fill { height: 100%; background: var(--fc-broker-accent); border-radius: 999px; }
.fc-broker-bars__count { font-weight: 700; text-align: right; }
/* ── Adjacent products (cards) ─────────────────────────────────────── */
.fc-broker-adjacent { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fc-broker-adjacent__card {
padding: 14px; border-radius: 10px;
border: 1px solid var(--fc-broker-card-border);
background: var(--fc-broker-card-bg);
}
.fc-broker-adjacent__icon { font-size: 1.4rem; line-height: 1; margin-bottom: 6px; }
.fc-broker-adjacent__name { font-weight: 700; margin: 0 0 4px; }
.fc-broker-adjacent__detail { color: var(--fc-broker-text-dim); font-size: 13px; margin: 0; }
/* ── Events timeline ───────────────────────────────────────────────── */
.fc-broker-timeline { display: flex; flex-direction: column; gap: 14px; padding-left: 24px; border-left: 2px solid var(--fc-broker-card-border); }
.fc-broker-timeline__entry { position: relative; }
.fc-broker-timeline__entry::before {
content: ''; position: absolute; left: -30px; top: 6px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--fc-broker-accent);
}
.fc-broker-timeline__date { color: var(--fc-broker-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.fc-broker-timeline__headline { font-weight: 600; margin: 4px 0; }
.fc-broker-timeline__source { font-size: 12px; }
.fc-broker-timeline__source a { color: var(--fc-broker-text-dim); text-decoration: underline; }
.fc-broker-timeline__entry--severe { --fc-broker-accent: #ef4444; }
.fc-broker-timeline__entry--warning { --fc-broker-accent: #eab308; }
.fc-broker-timeline__entry--notable { --fc-broker-accent: #6366f1; }
/* ── FAQ ───────────────────────────────────────────────────────────── */
.fc-broker-faq__entry {
padding: 14px 16px;
border: 1px solid var(--fc-broker-card-border);
border-radius: 10px;
background: var(--fc-broker-card-bg);
margin-bottom: 10px;
}
.fc-broker-faq__entry > summary { cursor: pointer; font-weight: 600; }
.fc-broker-faq__answer { margin: 10px 0 0; color: var(--fc-broker-text-dim); }
/* ── Related rail (cards / mini cards) ─────────────────────────────── */
.fc-broker-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fc-broker-card {
padding: 16px;
border: 1px solid var(--fc-broker-card-border);
border-radius: 12px;
background: var(--fc-broker-card-bg);
transition: transform 120ms ease, border-color 120ms ease;
}
.fc-broker-card:hover { transform: translateY(-2px); border-color: var(--fc-broker-accent); }
.fc-broker-card__link { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.fc-broker-card__name { margin: 0; font-size: 1.05rem; }
.fc-broker-card__score { font-size: 13px; color: var(--fc-broker-text-dim); }
.fc-broker-card__facts { display: flex; gap: 14px; margin: 0; padding: 0; }
.fc-broker-card__facts > div { display: flex; gap: 4px; font-size: 12px; }
.fc-broker-card__facts dt { color: var(--fc-broker-text-faint); margin: 0; }
.fc-broker-card__facts dd { margin: 0; font-weight: 600; }
.fc-broker-card-mini {
display: flex; gap: 10px; align-items: center;
padding: 10px 12px; border-radius: 10px;
background: var(--fc-broker-card-bg);
border: 1px solid var(--fc-broker-card-border);
color: inherit; text-decoration: none;
}
.fc-broker-card-mini:hover { border-color: var(--fc-broker-accent); }
.fc-broker-card-mini__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-broker-card-mini__name { font-weight: 600; }
.fc-broker-card-mini__score { font-size: 12px; color: var(--fc-broker-text-dim); }
/* ── Provenance badge ──────────────────────────────────────────────── */
.fc-broker-provenance {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 999px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--fc-broker-card-border);
font-size: 13px;
}
/* ── Editorial verdict footer signals (E-E-A-T §13.4) ──────────────── */
.fc-broker-eeat-footer {
margin-top: 32px; padding: 18px;
border: 1px dashed var(--fc-broker-card-border);
border-radius: 12px;
color: var(--fc-broker-text-dim);
font-size: 14px;
}
.fc-broker-eeat-footer a { color: inherit; text-decoration: underline; }
.fc-broker-eeat-footer ul { margin: 8px 0 0; padding-left: 1.1em; }
/* ── Inline citations on regulation source URLs (E-E-A-T) ──────────── */
.fc-broker-cite { font-size: 11px; color: var(--fc-broker-text-faint); margin-left: 4px; }
.fc-broker-cite a { color: inherit; text-decoration: underline; }
/* =============================================================================
ARCHIVE — filter sidebar + sort bar + grid + pagination
============================================================================= */
.fc-broker-archive {
display: grid;
grid-template-columns: 260px 1fr;
gap: 28px;
margin: 24px 0;
}
@media (max-width: 900px) { .fc-broker-archive { grid-template-columns: 1fr; } }
.fc-broker-archive__head {
margin-bottom: 8px;
}
.fc-broker-archive__title {
font-size: 2rem;
font-weight: 800;
margin: 0 0 6px;
}
.fc-broker-archive__intro {
color: var(--fc-broker-text-dim);
margin: 0;
}
/* ── Filter sidebar ────────────────────────────────────────────────── */
.fc-broker-filter-form {
background: var(--fc-broker-card-bg);
border: 1px solid var(--fc-broker-card-border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 4px;
position: sticky;
top: 80px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.fc-broker-filter-form__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.fc-broker-filter-form__clear {
font-size: 12px;
color: var(--fc-broker-text-dim);
text-decoration: underline;
}
.fc-broker-filter-form__apply {
margin-top: 14px;
width: 100%;
}
.fc-broker-filter-group {
border-bottom: 1px solid var(--fc-broker-card-border);
padding: 8px 0;
}
.fc-broker-filter-group:last-of-type { border-bottom: none; }
.fc-broker-filter-group > summary {
cursor: pointer;
font-weight: 600;
font-size: 13px;
padding: 4px 0;
list-style: none;
display: flex; align-items: center; justify-content: space-between;
}
.fc-broker-filter-group > summary::after { content: '+'; color: var(--fc-broker-text-faint); }
.fc-broker-filter-group[open] > summary::after { content: '–'; }
.fc-broker-filter-group__hint { font-weight: 400; font-size: 11px; color: var(--fc-broker-text-faint); }
.fc-broker-filter-group__body {
padding: 8px 0 4px;
display: flex; flex-direction: column; gap: 6px;
}
.fc-broker-filter-group__body label {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: rgba(255,255,255,0.86);
cursor: pointer;
}
.fc-broker-filter-group__body select {
width: 100%; padding: 6px 8px;
background: rgba(255,255,255,0.04); color: white;
border: 1px solid var(--fc-broker-card-border); border-radius: 6px;
}
/* ── Sort bar ───────────────────────────────────────────────────────── */
.fc-broker-sort-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0 16px;
gap: 12px; flex-wrap: wrap;
}
.fc-broker-sort-bar__count { color: var(--fc-broker-text-dim); font-size: 14px; }
.fc-broker-sort-bar__form { display: flex; align-items: center; gap: 8px; }
.fc-broker-sort-bar__label { font-size: 13px; color: var(--fc-broker-text-dim); }
.fc-broker-sort-bar select.fc-select,
.fc-broker-sort-bar__form select {
padding: 6px 10px;
background: rgba(255,255,255,0.04); color: white;
border: 1px solid var(--fc-broker-card-border); border-radius: 6px;
font-size: 13px;
}
/* ── Grid + cards (compare button) ─────────────────────────────────── */
.fc-broker-archive__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.fc-broker-card { position: relative; }
.fc-broker-card__compare {
position: absolute; top: 10px; right: 10px;
background: rgba(255,255,255,0.08);
border: 1px solid var(--fc-broker-card-border);
color: white; font-size: 11px; font-weight: 600;
padding: 4px 8px; border-radius: 999px;
cursor: pointer;
transition: background 120ms ease;
}
.fc-broker-card__compare:hover { background: rgba(255,255,255,0.16); }
.fc-broker-card__compare.is-added {
background: var(--fc-broker-accent);
border-color: var(--fc-broker-accent);
}
/* ── Pagination ─────────────────────────────────────────────────────── */
.fc-broker-pagination {
display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
margin: 32px 0 16px;
}
.fc-broker-pagination a, .fc-broker-pagination span, .fc-broker-pagination button {
padding: 6px 12px; font-size: 13px; font-weight: 600;
background: rgba(255,255,255,0.06); color: white;
border: 1px solid var(--fc-broker-card-border); border-radius: 8px;
text-decoration: none;
}
.fc-broker-pagination a:hover { background: rgba(255,255,255,0.12); }
.fc-broker-pagination .is-current {
background: var(--fc-broker-accent); border-color: var(--fc-broker-accent);
}
.fc-broker-pagination form { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.fc-broker-pagination input[type=number] {
width: 56px; padding: 6px 8px; text-align: center;
background: rgba(255,255,255,0.04); color: white;
border: 1px solid var(--fc-broker-card-border); border-radius: 6px;
}
/* ── Empty state ────────────────────────────────────────────────────── */
.fc-broker-archive__empty {
padding: 40px 20px;
text-align: center;
color: var(--fc-broker-text-dim);
border: 1px dashed var(--fc-broker-card-border);
border-radius: 12px;
}
/* =============================================================================
COMPARE CART (floating drawer)
============================================================================= */
.fc-broker-compare-cart {
position: fixed;
/* Lifted off the bottom edge so it clears the sticky footer ad slot.
Tunable via --fc-cart-bottom-offset if a per-page override is needed. */
bottom: var(--fc-cart-bottom-offset, 96px); right: 16px;
width: 320px; max-width: calc(100vw - 32px);
background: #14182a;
border: 1px solid var(--fc-broker-card-border);
border-radius: 14px;
padding: 14px;
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
z-index: 50;
display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 700px) {
.fc-broker-compare-cart {
left: 8px; right: 8px; bottom: var(--fc-cart-bottom-offset, 80px); width: auto;
}
}
.fc-broker-compare-cart[hidden] { display: none; }
.fc-broker-compare-cart__head {
display: flex; align-items: center; justify-content: space-between;
}
.fc-broker-compare-cart__title { font-size: 14px; }
.fc-broker-compare-cart__clear {
background: transparent; border: 0; color: var(--fc-broker-text-faint);
font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer;
}
.fc-broker-compare-cart__items {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.fc-broker-compare-cart__item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
font-size: 13px;
}
.fc-broker-compare-cart__icon {
width: 22px; height: 22px; border-radius: 4px; object-fit: contain;
background: rgba(255,255,255,0.08);
}
.fc-broker-compare-cart__name { flex: 1 1 auto; }
.fc-broker-compare-cart__remove {
background: transparent; border: 0; color: var(--fc-broker-text-faint);
font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.fc-broker-compare-cart__actions { margin-top: 4px; }
.fc-broker-cta.is-disabled {
opacity: 0.5; cursor: not-allowed; pointer-events: auto;
}
/* =============================================================================
COMPARE PAGE — side-by-side spec table
============================================================================= */
.fc-broker-compare-page {
padding: 24px 0;
}
.fc-broker-compare-page__head {
margin-bottom: 24px;
}
.fc-broker-compare-page__title {
font-size: 1.85rem; font-weight: 800; margin: 0 0 6px;
}
.fc-broker-compare-page__sub {
color: var(--fc-broker-text-dim); margin: 0;
}
.fc-broker-compare-table {
width: 100%; border-collapse: collapse;
background: var(--fc-broker-card-bg);
border: 1px solid var(--fc-broker-card-border);
border-radius: 12px;
overflow: hidden;
font-size: 14px;
}
.fc-broker-compare-table th, .fc-broker-compare-table td {
padding: 12px 14px;
text-align: center;
border-bottom: 1px solid var(--fc-broker-card-border);
vertical-align: middle;
}
.fc-broker-compare-table__row-label {
text-align: left;
font-weight: 600;
color: var(--fc-broker-text-dim);
width: 200px;
}
.fc-broker-compare-table__group th {
background: rgba(255,255,255,0.04);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
color: var(--fc-broker-text-faint);
text-align: left;
padding: 10px 14px;
}
.fc-broker-compare-table__broker-cell { width: 22%; padding: 18px 14px; vertical-align: top; }
.fc-broker-compare-table__broker-head {
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.fc-broker-compare-table__broker-name {
font-weight: 700; color: white; text-decoration: none;
}
.fc-broker-compare-table__broker-name:hover { text-decoration: underline; }
.fc-broker-compare-table__overall {
display: inline-flex; align-items: baseline; gap: 4px;
background: rgba(255,255,255,0.06); padding: 4px 10px; border-radius: 999px;
font-size: 13px;
}
.fc-broker-compare-table__overall.is-winner {
background: rgba(34,197,94,0.18);
border: 1px solid rgba(34,197,94,0.45);
}
.fc-broker-compare-table td.is-winner {
background: rgba(34,197,94,0.10);
font-weight: 700;
}
.fc-broker-compare-table__sub { color: var(--fc-broker-text-faint); font-size: 11px; }
.fc-broker-compare-table__summary {
text-align: left;
font-size: 13px;
line-height: 1.5;
color: var(--fc-broker-text-dim);
max-width: 280px;
vertical-align: top;
}
/* "Add another to compare" picker */
.fc-broker-compare-add-picker {
display: flex; align-items: center; gap: 10px;
padding: 16px;
margin-top: 16px;
border: 1px dashed var(--fc-broker-card-border);
border-radius: 12px;
color: var(--fc-broker-text-dim);
font-size: 14px;
}
.fc-broker-compare-add-picker select {
padding: 6px 10px;
background: rgba(255,255,255,0.04); color: white;
border: 1px solid var(--fc-broker-card-border); border-radius: 6px;
}
/* ════════════════════════════════════════════════════════════════════
* Hand-crafted broker reviews — minimal CSS for inline helpers only.
*
* The fc_broker_prose() shell uses pure Tailwind utility classes that
* mirror fc_v2_render_summary / fc_v2_render_verdict (rounded-2xl,
* bg-fc-card, border-fc-line, text-fc-tealsoft eyebrow, font-heading h2).
* That keeps prose blocks visually identical to the surrounding v2
* sections — same teal accent, same card depth, same eyebrow pattern.
*
* Only inline cells and the admin-error placeholder need custom CSS.
* ══════════════════════════════════════════════════════════════════ */
/* Inline comparison cell (fc_broker_compare_inline output).
Teal-tinted pill, matches the fc-tealsoft accent used elsewhere. */
.fc-broker-compare-cell {
display: inline-block;
padding: 1px 7px;
margin: 0 1px;
background: rgba(94, 234, 212, 0.12);
border: 1px solid rgba(94, 234, 212, 0.30);
border-radius: 6px;
font-weight: 600;
font-size: 0.92em;
color: rgba(255, 255, 255, 0.92);
}
.fc-broker-compare-cell--missing {
background: rgba(255, 255, 255, 0.04);
border-color: var(--fc-broker-card-border);
color: var(--fc-broker-text-faint);
font-weight: 500;
}
.fc-broker-compare-cell__broker {
font-size: 0.85em;
color: var(--fc-broker-text-faint);
margin-left: 2px;
}
/* Admin-only error placeholder when a per-broker include throws. */
.fc-broker-prose--error {
border: 1px solid rgba(239, 68, 68, 0.45);
background: rgba(239, 68, 68, 0.10);
color: rgba(254, 226, 226, 0.95);
padding: 16px 20px;
border-radius: 10px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85rem;
}
/* ════════════════════════════════════════════════════════════════════════
* HAND-CRAFTED BROKER REVIEW SYSTEM (fcb-* prefix)
*
* Used by per-broker files at theme/breek-child/brokers/{slug}.php via the
* fc_broker_section_* helpers in inc/broker-loader.php. Visual reference:
* docs/mockup/broker-xm-full.html.
*
* All classes prefixed with `fcb-` to avoid collision with the v1/v2 broker
* styles above. Body element gets class .fcb-page on hand-crafted broker
* pages (single-forex_broker.php applies it when a custom file is detected).
*
* Design tokens defined as CSS custom properties on .fcb-page — change a
* variable to re-theme every hand-crafted review on the site.
* ══════════════════════════════════════════════════════════════════════ */
/* --fcb-* design tokens moved to assets/css/design-tokens.css — loaded first
on every page. Extend that file, not this one. See docs/design-system/tokens.md. */
/* The site-wide ambient bg (4-radial gradient) is already applied to body in
portal.css — we don't override it here. Page chrome is the parent theme's
header + footer. */
/* Matches site-wide .fc-max-w (portal.css:7) so the breadcrumb, hero,
body, and sidebar all share the same outer edges. */
.fcb-container { max-width: 1160px; margin: 0 auto; padding: 0 10px; }
@media (min-width: 1200px) { .fcb-container { padding: 0; } }
/* Full-width intro zone above the body+sidebar grid. Holds hero + best-for. */
.fcb-intro { padding-top: 24px; padding-bottom: 24px; }
.fcb-intro > .fcb-hero { margin-bottom: 24px; }
/* ─── Pills (used in hero + tables + cards) ───────────────────────────── */
.fcb-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 11px; font-weight: 600; }
.fcb-pill--good { background: rgba(52,211,153,0.12); color: var(--fcb-good); border: 1px solid rgba(52,211,153,0.30); }
.fcb-pill--warn { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.30); }
.fcb-pill--bad { background: rgba(244,63,94,0.12); color: #fb7185; border: 1px solid rgba(244,63,94,0.30); }
.fcb-pill--teal { background: rgba(94,234,212,0.10); color: var(--fcb-accent-text); border: 1px solid rgba(94,234,212,0.30); }
.fcb-pill--purple { background: rgba(168,85,247,0.12); color: #c4b5fd; border: 1px solid rgba(168,85,247,0.30); }
.fcb-pill--orange { background: rgba(249,115,22,0.12); color: #fb923c; border: 1px solid rgba(249,115,22,0.30); }
.fcb-pill--neut { background: rgba(148,163,184,0.10); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.20); }
/* ─── Hero ───────────────────────────────────────────────────────────── */
.fcb-hero {
position: relative; overflow: hidden; margin: 1.5rem 0 1.25rem;
border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius-lg);
padding: clamp(1.5rem, 4vw, 2.5rem);
background: var(--fcb-card); backdrop-filter: blur(8px);
}
.fcb-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at top right, rgba(94,234,212,0.10), transparent 60%); }
.fcb-hero__top { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; position: relative; }
@media (max-width: 900px) { .fcb-hero__top { grid-template-columns: 1fr; } }
.fcb-hero__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.fcb-hero__title { font-family: var(--fcb-font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0; color: white; overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
.fcb-hero__title-grad { background: var(--fcb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fcb-hero__year { color: var(--fcb-text-faint); font-weight: 400; }
.fcb-hero__tagline { color: var(--fcb-text-soft); margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.65; max-width: 60ch; }
/* Hero CTA — logo + primary affiliate button + value-prop hint, all
flex siblings. Wraps inline when the column has the room; collapses
to stacked rows on narrow viewports. */
.fcb-hero__cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin-top: 1rem; }
.fcb-hero__cta-logo { display: flex; align-items: center; justify-content: center; min-height: 38px; min-width: 38px; padding: 0.2rem 0.55rem; background: white; border-radius: 8px; box-shadow: 0 4px 12px -6px rgba(0,0,0,0.45); flex: 0 0 auto; }
.fcb-hero__cta-logo img { display: block; max-height: 100%; max-width: 140px; width: auto; height: auto; object-fit: contain; }
.fcb-hero__cta-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 1rem; border-radius: 8px; background: var(--fcb-grad); color: white; text-decoration: none; box-shadow: 0 6px 18px -8px rgba(168,85,247,0.55), inset 0 1px 0 rgba(255,255,255,0.2); transition: transform 150ms, box-shadow 150ms, filter 150ms; flex: 0 0 auto; }
.fcb-hero__cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(168,85,247,0.7), inset 0 1px 0 rgba(255,255,255,0.25); filter: brightness(1.04); color: white; text-decoration: none; }
.fcb-hero__cta-btn-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.02; gap: 0; }
.fcb-hero__cta-btn-eyebrow { font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.fcb-hero__cta-btn-text { font-family: var(--fcb-font-display); font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em; }
.fcb-hero__cta-btn i { font-size: 0.85em; transition: transform 150ms; }
.fcb-hero__cta-btn:hover i { transform: translateX(3px); }
/* Hint takes the remaining inline space when there's room; once it
wraps to its own line it expands full-width. min-width prevents it
from squeezing into nothing on borderline widths. */
.fcb-hero__cta-hint { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 220px; min-width: 220px; color: var(--fcb-text-soft); font-size: 11.5px; line-height: 1.35; padding: 0.3rem 0.65rem; border-radius: 7px; background: rgba(255,255,255,0.03); border: 1px solid var(--fcb-border); }
.fcb-hero__cta-hint i { color: var(--fcb-accent-text); font-size: 0.95em; flex-shrink: 0; }
.fcb-hero__divider { height: 1px; background: var(--fcb-border); margin: 1.5rem 0; }
.fcb-hero__footer-strip { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--fcb-border); display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 12px; color: var(--fcb-text-faint); }
.fcb-hero__footer-strip a { color: var(--fcb-text-mute); text-decoration: none; }
.fcb-hero__footer-strip a:hover { color: var(--fcb-accent-text); }
/* ─── Score panel (hero) ─────────────────────────────────────────────── */
.fcb-scoremap { background: var(--fcb-card-raised); border: 1px solid var(--fcb-border-strong); border-radius: var(--fcb-radius); padding: 0.95rem 1rem; }
.fcb-scoremap__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.55rem; }
.fcb-scoremap__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fcb-text-mute); font-weight: 700; }
.fcb-scoremap__total { font-family: var(--fcb-font-mono); font-weight: 700; font-size: 1.4rem; }
.fcb-scoremap__total-grad { background: var(--fcb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fcb-scoremap__total small { color: var(--fcb-text-faint); font-size: 0.7em; -webkit-text-fill-color: initial; background: none; color: var(--fcb-text-faint); margin-left: 2px; font-weight: 600; }
.fcb-scoremap__list { display: flex; flex-direction: column; gap: 0.05rem; }
.fcb-scoremap__foot { font-size: 10px; color: var(--fcb-text-faint); margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px solid var(--fcb-border); line-height: 1.4; }
.fcb-axis-btn { display: grid; grid-template-columns: 86px 1fr 32px 16px; gap: 0.5rem; align-items: center; font-size: 12px; width: 100%; padding: 0.25rem 0.5rem; border-radius: 6px; cursor: pointer; transition: background 150ms; background: transparent; border: 0; text-align: left; color: inherit; font-family: inherit; }
.fcb-axis-btn:hover { background: rgba(255,255,255,0.04); }
.fcb-axis-btn.is-active { background: rgba(94,234,212,0.10); }
.fcb-axis-btn__name { color: var(--fcb-text-mute); font-weight: 600; }
.fcb-axis-btn.is-active .fcb-axis-btn__name { color: var(--fcb-accent-text); }
.fcb-axis-btn__bar { height: 5px; background: var(--fcb-card-sunk); border-radius: 999px; overflow: hidden; }
.fcb-axis-btn__bar > span { display: block; height: 100%; background: var(--fcb-grad); border-radius: 999px; }
.fcb-axis-btn__score { font-family: var(--fcb-font-mono); color: white; font-weight: 700; text-align: right; }
.fcb-axis-btn__chevron { color: var(--fcb-text-faint); font-size: 10px; transition: transform 200ms; text-align: center; }
.fcb-axis-btn.is-active .fcb-axis-btn__chevron { transform: rotate(180deg); color: var(--fcb-accent-text); }
/* ─── Stat ribbon (hero) ─────────────────────────────────────────────── */
.fcb-stat-ribbon { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; background: var(--fcb-card-sunk); border-radius: var(--fcb-radius); border: 1px solid var(--fcb-border); overflow: hidden; }
.fcb-stat-ribbon__cell { flex: 1 1 140px; padding: 0.75rem 1rem; border-right: 1px solid var(--fcb-border); min-width: 130px; }
.fcb-stat-ribbon__cell:last-child { border-right: 0; }
.fcb-stat-ribbon__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fcb-text-mute); font-weight: 700; }
.fcb-stat-ribbon__value { font-family: var(--fcb-font-mono); font-weight: 700; font-size: 1.05rem; color: white; margin-top: 2px; }
.fcb-stat-ribbon__value--good { color: var(--fcb-good); }
.fcb-stat-ribbon__value--bad { color: var(--fcb-danger); }
.fcb-stat-ribbon__value--teal { color: var(--fcb-accent-text); }
/* ─── Author byline (hero) ───────────────────────────────────────────── */
.fcb-author { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--fcb-border); }
.fcb-author__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--fcb-grad); display: flex; align-items: center; justify-content: center; font-weight: 800; color: white; font-family: var(--fcb-font-display); font-size: 1.2rem; flex-shrink: 0; overflow: hidden; }
.fcb-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fcb-author__main { flex: 1 1 0; min-width: 0; }
.fcb-author__name { color: white; font-weight: 700; font-family: var(--fcb-font-display); }
.fcb-author__meta { color: var(--fcb-text-mute); font-size: 13px; font-weight: 400; }
.fcb-author__bio { color: var(--fcb-text-soft); font-size: 13px; margin-top: 4px; }
.fcb-author__socials { display: flex; gap: 0.4rem; flex-shrink: 0; }
.fcb-author__socials a { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); color: var(--fcb-text-mute); transition: all 150ms; }
.fcb-author__socials a:hover { color: var(--fcb-accent-text); border-color: rgba(94,234,212,0.40); }
/* ─── Best-for decision cards ────────────────────────────────────────── */
.fcb-bestfor { margin-bottom: 2.5rem; }
.fcb-bestfor__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fcb-text-mute); font-weight: 700; }
.fcb-bestfor__head::before, .fcb-bestfor__head::after { content: ""; height: 1px; flex: 1; background: var(--fcb-border); }
.fcb-bestfor__grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .fcb-bestfor__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fcb-bestfor__grid { grid-template-columns: repeat(4, 1fr); } }
.fcb-bestfor__card { background: var(--fcb-card); border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius); padding: 1.1rem 1.15rem; position: relative; transition: all 150ms; }
.fcb-bestfor__card:hover { transform: translateY(-2px); border-color: var(--fcb-border-strong); }
.fcb-bestfor__card--yes { border-top: 3px solid var(--fcb-good); }
.fcb-bestfor__card--maybe { border-top: 3px solid var(--fcb-warn); }
.fcb-bestfor__card--no { border-top: 3px solid var(--fcb-danger); opacity: 0.85; }
.fcb-bestfor__icon { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.6rem; font-size: 14px; }
.fcb-bestfor__card--yes .fcb-bestfor__icon { background: rgba(52,211,153,0.12); color: var(--fcb-good); border: 1px solid rgba(52,211,153,0.30); }
.fcb-bestfor__card--maybe .fcb-bestfor__icon { background: rgba(245,158,11,0.12); color: var(--fcb-warn); border: 1px solid rgba(245,158,11,0.30); }
.fcb-bestfor__card--no .fcb-bestfor__icon { background: rgba(244,63,94,0.10); color: var(--fcb-danger); border: 1px solid rgba(244,63,94,0.30); }
.fcb-bestfor__title { font-family: var(--fcb-font-display); font-weight: 700; font-size: 1rem; color: white; margin: 0 0 0.35rem; }
.fcb-bestfor__verdict { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.fcb-bestfor__card--yes .fcb-bestfor__verdict { color: var(--fcb-good); }
.fcb-bestfor__card--maybe .fcb-bestfor__verdict { color: var(--fcb-warn); }
.fcb-bestfor__card--no .fcb-bestfor__verdict { color: var(--fcb-danger); }
.fcb-bestfor__why { font-size: 12px; color: var(--fcb-text-soft); line-height: 1.5; margin-top: 0.4rem; }
/* ─── Layout: main + bottom-sticky sidebar ───────────────────────────── */
.fcb-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 1.25rem; align-items: start; position: relative; }
@media (max-width: 1100px) { .fcb-layout { grid-template-columns: 1fr; } }
.fcb-main { min-width: 0; background: var(--fcb-card); border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius-lg); padding: clamp(1.25rem, 3vw, 2rem); backdrop-filter: blur(8px); }
/* Dual-anchor sticky: the sidebar's natural position is at the bottom of
its grid cell (align-self: end). When the natural-bottom is below the
viewport bottom (i.e. on a long page) it sticks at bottom:1.5rem. As
you scroll up, natural-bottom moves up, sticky releases, and the sidebar
scrolls with the content. When the natural-top would scroll above 96px
from viewport top, it sticks at top:96px instead. Same element, no JS,
no jumps — sticky picks whichever boundary the element is crossing. */
.fcb-sidebar { position: sticky; top: 96px; bottom: 1.5rem; align-self: end; display: flex; flex-direction: column; gap: 1.1rem; grid-column: 2; }
@media (max-width: 1100px) {
.fcb-sidebar { position: static; grid-column: auto; }
}
/* ─── Module shell ───────────────────────────────────────────────────── */
.fcb-module { margin: 0 0 var(--fcb-section-gap); scroll-margin-top: 6rem; position: relative; }
.fcb-module + .fcb-module { padding-top: var(--fcb-section-gap); border-top: 1px solid var(--fcb-border); }
.fcb-module__header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; padding-right: 90px; flex-wrap: wrap; }
.fcb-module__num { font-family: var(--fcb-font-display); font-weight: 800; color: var(--fcb-accent-text); font-size: clamp(1.4rem, 2.5vw, 1.7rem); line-height: 1; min-width: 2ch; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fcb-module__icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--fcb-accent-text); background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); flex-shrink: 0; }
.fcb-module--editorial .fcb-module__icon { background: rgba(168,85,247,0.10); border-color: rgba(168,85,247,0.30); color: #c4b5fd; }
.fcb-module--editorial .fcb-module__num { color: #c4b5fd; }
.fcb-module__title { margin: 0; font-family: var(--fcb-font-display); font-weight: 700; color: white; font-size: clamp(1.35rem, 2.5vw, 1.65rem); line-height: 1.2; letter-spacing: -0.01em; flex: 1 1 auto; min-width: 0; }
.fcb-module__tag { position: absolute; top: 0; right: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 999px; font-weight: 700; background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); color: var(--fcb-text-mute); }
.fcb-module__tag--data { color: var(--fcb-accent-text); background: rgba(94,234,212,0.08); border-color: rgba(94,234,212,0.25); }
.fcb-module__body { color: var(--fcb-text-soft); }
.fcb-module__body p { margin: 0 0 1rem; line-height: 1.7; }
.fcb-module__body p:last-child { margin-bottom: 0; }
.fcb-module__body strong { color: white; }
/* Main axis section */
.fcb-module--axis .fcb-module__header { padding-right: 0; }
.fcb-module--axis .fcb-module__icon { background: var(--fcb-grad-soft); border-color: rgba(94,234,212,0.30); width: 42px; height: 42px; }
.fcb-score-pill {
margin-left: auto;
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 7px 14px;
background: var(--fcb-grad);
border: 0; border-radius: 999px;
font-family: var(--fcb-font-mono); font-weight: 800; font-size: 1rem;
color: white;
cursor: pointer; transition: filter 150ms, transform 150ms;
box-shadow: 0 4px 16px rgba(20,184,166,0.20);
flex-shrink: 0;
}
.fcb-score-pill:hover { filter: brightness(1.10); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20,184,166,0.30); }
.fcb-score-pill__max { font-size: 0.7em; opacity: 0.85; font-weight: 600; margin-left: -2px; }
.fcb-score-pill i { font-size: 11px; opacity: 0.85; }
.fcb-axis-intro { font-size: 1.02rem; color: var(--fcb-text-soft); line-height: 1.7; margin: 0 0 1.5rem; }
.fcb-axis-intro p { margin: 0 0 0.9rem; }
.fcb-axis-intro p:last-child { margin-bottom: 0; }
.fcb-axis-intro__lead { display: inline-block; font-weight: 700; color: white; padding: 2px 10px; margin-right: 6px; background: rgba(94,234,212,0.10); border: 1px solid rgba(94,234,212,0.30); border-radius: 6px; font-size: 0.92em; }
.fcb-axis-inline { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 600px) { .fcb-axis-inline { grid-template-columns: repeat(4, 1fr); } }
.fcb-axis-inline__card { background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); border-radius: 10px; padding: 0.7rem 0.85rem; }
.fcb-axis-inline__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fcb-text-mute); font-weight: 700; }
.fcb-axis-inline__value { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 4px; }
.fcb-axis-inline__value-text { color: white; font-family: var(--fcb-font-mono); font-weight: 700; }
.fcb-axis-inline__rating { font-family: var(--fcb-font-mono); font-weight: 700; color: var(--fcb-accent-text); font-size: 0.85rem; margin-left: auto; }
.fcb-axis-inline__rating--low { color: #fbbf24; }
.fcb-axis-inline__hint { font-size: 11px; color: var(--fcb-text-faint); margin-top: 2px; }
/* Sub-section */
.fcb-module--sub { margin-bottom: 0; }
.fcb-module--sub .fcb-module__header { padding-right: 0; }
.fcb-module--sub .fcb-module__num { font-size: 1.05rem; opacity: 0.85; }
.fcb-module--sub .fcb-module__icon { width: 30px; height: 30px; font-size: 13px; }
.fcb-module--sub .fcb-module__title { font-size: clamp(1.1rem, 1.8vw, 1.25rem); }
.fcb-sub-rating {
margin-left: auto;
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 4px 11px;
background: rgba(94,234,212,0.08); border: 1px solid rgba(94,234,212,0.30);
border-radius: 999px;
font-family: var(--fcb-font-mono); font-weight: 700; font-size: 0.85rem;
color: var(--fcb-accent-text);
cursor: pointer; transition: all 150ms;
flex-shrink: 0;
}
.fcb-sub-rating:hover { background: rgba(94,234,212,0.18); border-color: rgba(94,234,212,0.50); color: white; }
.fcb-sub-rating__max { color: var(--fcb-text-faint); font-size: 0.85em; font-weight: 500; }
.fcb-sub-rating--low { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.30); color: #fbbf24; }
/* ─── Expander button + collapsible sub-section group ────────────────── */
.fcb-expander-wrap { display: flex; justify-content: center; margin-top: 1.5rem; }
.fcb-expander {
display: inline-flex; align-items: center; gap: 0.6rem;
padding: 0.7rem 1.4rem;
background: rgba(94,234,212,0.06);
border: 1px dashed rgba(94,234,212,0.45);
border-radius: 999px;
color: var(--fcb-accent-text);
font-family: inherit; font-size: 12px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
cursor: pointer; transition: all 200ms;
}
.fcb-expander:hover { border-style: solid; background: rgba(94,234,212,0.12); color: white; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,184,166,0.20); }
.fcb-expander__chevron { font-size: 11px; transition: transform 220ms; }
.fcb-expander.is-expanded .fcb-expander__chevron { transform: rotate(180deg); }
.fcb-expander .fcb-expander__hide { display: none; }
.fcb-expander.is-expanded .fcb-expander__show { display: none; }
.fcb-expander.is-expanded .fcb-expander__hide { display: inline; }
.fcb-axis-group { display: block; margin: 2rem 0 var(--fcb-section-gap); position: relative; }
.fcb-axis-group[hidden] { display: none; }
.fcb-axis-group__inner {
position: relative;
padding: 2.25rem 1.5rem 1rem 2rem;
background:
linear-gradient(to right, rgba(94,234,212,0.05), transparent 70%),
rgba(255,255,255,0.015);
border: 1px solid rgba(94,234,212,0.20);
border-left: 3px solid rgba(94,234,212,0.55);
border-radius: 0 14px 14px 0;
}
.fcb-axis-group__label {
position: absolute; top: -11px; left: 1.5rem;
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 3px 12px;
background: var(--fcb-bg);
border: 1px solid rgba(94,234,212,0.40);
border-radius: 999px;
font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
color: var(--fcb-accent-text); text-transform: uppercase;
}
.fcb-axis-group__label i { font-size: 9px; }
.fcb-axis-group .fcb-module--sub + .fcb-module--sub {
padding-top: var(--fcb-subsection-gap);
border-top: 1px solid rgba(94,234,212,0.15);
margin-top: var(--fcb-subsection-gap);
}
.fcb-collapse-end {
display: flex; align-items: center; gap: 0.5rem;
margin: 2rem auto 0; padding: 0.5rem 1.2rem;
background: transparent;
border: 1px dashed rgba(94,234,212,0.30); border-radius: 999px;
color: var(--fcb-accent-text);
font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
cursor: pointer; transition: all 150ms;
}
.fcb-collapse-end:hover { background: rgba(94,234,212,0.08); border-style: solid; color: white; }
/* ─── Inline breakdown panel (popover content as inline) ─────────────── */
.fcb-breakdown { background: var(--fcb-card); border: 1px solid var(--fcb-border); border-radius: 12px; padding: 1.4rem 1.5rem; margin-bottom: 2rem; }
.fcb-breakdown__explain { font-size: 13.5px; color: var(--fcb-text-soft); line-height: 1.6; padding: 0.7rem 0.95rem; background: var(--fcb-card-sunk); border-radius: 8px; border-left: 2px solid var(--fcb-accent-text); margin: 0 0 1.1rem; }
.fcb-breakdown__subs-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fcb-text-mute); font-weight: 700; margin-bottom: 0.7rem; }
.fcb-breakdown__subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.fcb-breakdown__sub { display: flex; align-items: center; gap: 0.8rem; font-size: 13px; padding: 0.55rem 0.25rem; border-bottom: 1px solid var(--fcb-border); }
.fcb-breakdown__sub:last-child { border-bottom: 0; }
.fcb-breakdown__sub-name { flex: 1; min-width: 0; color: var(--fcb-text-soft); }
.fcb-breakdown__sub-bar { width: 110px; height: 5px; background: var(--fcb-card-sunk); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.fcb-breakdown__sub-bar > span { display: block; height: 100%; background: rgba(94,234,212,0.7); border-radius: 999px; }
.fcb-breakdown__sub-score { width: 36px; font-family: var(--fcb-font-mono); color: white; font-weight: 700; text-align: right; flex-shrink: 0; }
.fcb-breakdown__sub-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 5px 10px; background: rgba(94,234,212,0.10); border: 1px solid rgba(94,234,212,0.30); border-radius: 999px; color: var(--fcb-accent-text); text-decoration: none; font-size: 11px; font-weight: 700; transition: all 150ms; }
.fcb-breakdown__sub-link:hover { background: rgba(94,234,212,0.20); border-color: var(--fcb-accent-text); color: white; }
.fcb-breakdown__sub-link__placeholder { width: 56px; flex-shrink: 0; }
.fcb-breakdown__sub--low .fcb-breakdown__sub-bar > span { background: rgba(245,158,11,0.75); }
.fcb-breakdown__sub--low .fcb-breakdown__sub-score { color: #fbbf24; }
/* ─── Fact grid + tile grid + table + pros/cons ──────────────────────── */
.fcb-fact-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .fcb-fact-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.fcb-fact { background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius); padding: 0.9rem 1rem; }
.fcb-fact__label { font-size: 11px; color: var(--fcb-text-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.fcb-fact__value { font-family: var(--fcb-font-mono); font-size: 1.25rem; font-weight: 700; margin-top: 4px; color: white; }
.fcb-fact__value--good { color: var(--fcb-good); }
.fcb-fact__value--warn { color: #fbbf24; }
.fcb-fact__value--bad { color: #fb7185; }
.fcb-fact__value--teal { color: var(--fcb-accent-text); }
.fcb-fact__hint { font-size: 11px; color: var(--fcb-text-faint); margin-top: 2px; }
.fcb-proscons { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .fcb-proscons { grid-template-columns: 1fr 1fr; } }
.fcb-proscons__col { background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius); padding: 1.25rem; }
.fcb-proscons__col--good { border-top: 3px solid var(--fcb-good); }
.fcb-proscons__col--bad { border-top: 3px solid var(--fcb-danger); }
.fcb-proscons__title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--fcb-font-display); font-weight: 700; margin: 0 0 0.8rem; font-size: 1.05rem; }
.fcb-proscons__title--good { color: var(--fcb-good); }
.fcb-proscons__title--bad { color: #fb7185; }
.fcb-proscons__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-size: 14px; line-height: 1.55; }
.fcb-proscons__list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--fcb-text-soft); }
.fcb-proscons__list li::before { content: "●"; flex-shrink: 0; margin-top: 1px; }
.fcb-proscons__col--good li::before { color: var(--fcb-good); }
.fcb-proscons__col--bad li::before { color: var(--fcb-danger); }
.fcb-table-wrap { border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius); overflow-x: auto; background: var(--fcb-card); }
.fcb-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.fcb-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fcb-text-mute); padding: 0.7rem 1rem; background: var(--fcb-card-raised); border-bottom: 1px solid var(--fcb-border); font-weight: 700; }
.fcb-table tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--fcb-border); vertical-align: top; }
.fcb-table tbody tr:last-child td { border-bottom: 0; }
.fcb-table .cell--strong { color: white; font-weight: 700; }
.fcb-table .cell--mono { font-family: var(--fcb-font-mono); }
.fcb-table .cell--accent { color: var(--fcb-accent-text); font-family: var(--fcb-font-mono); font-weight: 700; }
.fcb-table .cell--lead { background: rgba(94,234,212,0.06); position: relative; }
.fcb-table .cell--lead::after { content: "★"; color: var(--fcb-accent-text); margin-left: 6px; }
/* ─── Editorial callout + pull-quote breakout + verdict ──────────────── */
.fcb-callout { background: rgba(168,85,247,0.06); border-left: 3px solid #c4b5fd; border-radius: var(--fcb-radius); padding: 1.25rem 1.5rem; }
.fcb-callout p { font-size: 1.02rem; line-height: 1.75; }
.fcb-callout em { color: #c4b5fd; font-style: italic; }
.fcb-module--breakout { margin: 1rem -1rem; padding: 1.5rem 1rem; background: linear-gradient(135deg, rgba(94,234,212,0.05), rgba(168,85,247,0.05)); border-top: 1px solid rgba(94,234,212,0.20); border-bottom: 1px solid rgba(168,85,247,0.20); }
.fcb-pull-quote { font-family: var(--fcb-font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; max-width: 28ch; margin: 0 auto; text-align: center; background: var(--fcb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fcb-pull-quote__attrib { display: block; text-align: center; margin-top: 0.85rem; font-size: 11px; color: var(--fcb-text-faint); font-weight: 500; -webkit-text-fill-color: initial; background: none; color: var(--fcb-text-faint); text-transform: uppercase; letter-spacing: 0.12em; }
.fcb-verdict { background: linear-gradient(135deg, rgba(94,234,212,0.05), rgba(168,85,247,0.05)); border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius-lg); padding: 1.5rem 1.75rem; position: relative; overflow: hidden; }
.fcb-verdict::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fcb-grad); }
.fcb-verdict p { font-size: 1.05rem; line-height: 1.7; }
.fcb-verdict__signoff { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--fcb-border); font-size: 12px; color: var(--fcb-text-faint); }
/* ─── FAQ + Methodology ──────────────────────────────────────────────── */
.fcb-faq details { background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 0.6rem; }
.fcb-faq summary { font-family: var(--fcb-font-display); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fcb-faq summary::-webkit-details-marker { display: none; }
.fcb-faq summary::after { content: "+"; font-size: 1.25rem; color: var(--fcb-accent-text); }
.fcb-faq details[open] summary::after { content: "−"; }
.fcb-faq__body { color: var(--fcb-text-soft); margin-top: 0.65rem; line-height: 1.65; font-size: 14px; }
.fcb-method { background: rgba(255,255,255,0.02); border: 1px dashed var(--fcb-border); border-radius: 12px; padding: 1.1rem 1.25rem; font-size: 13px; color: var(--fcb-text-mute); line-height: 1.7; }
/* ─── Sidebar widgets ────────────────────────────────────────────────── */
.fcb-sb-card { background: var(--fcb-card); border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius); padding: 1.1rem 1.2rem; backdrop-filter: blur(8px); flex-shrink: 0; }
.fcb-sb-card__eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fcb-text-mute); margin-bottom: 0.6rem; font-weight: 700; }
.fcb-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.fcb-toc__list li a { display: flex; gap: 0.55rem; align-items: baseline; font-size: 13px; color: var(--fcb-text-mute); padding: 4px 0; text-decoration: none; transition: color 150ms; flex: 1; min-width: 0; }
.fcb-toc__list li a:hover { color: var(--fcb-accent-text); }
.fcb-toc__num { font-family: var(--fcb-font-mono); font-weight: 700; color: var(--fcb-accent-text); min-width: 1.6em; text-align: right; font-size: 11.5px; }
.fcb-toc__list li a.is-active { color: white; }
.fcb-toc__main { display: flex; align-items: center; gap: 0.4rem; }
.fcb-toc__main a { font-weight: 600; color: var(--fcb-text-soft); }
.fcb-toc__main a .fcb-toc__num { color: var(--fcb-accent-text); }
.fcb-toc__main a .fcb-toc__star { color: var(--fcb-accent-text); margin-left: auto; font-size: 11px; padding-right: 0.4rem; }
.fcb-toc__chevron { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: var(--fcb-text-faint); font-size: 10px; cursor: pointer; transition: all 150ms; }
.fcb-toc__chevron:hover { background: rgba(94,234,212,0.10); color: var(--fcb-accent-text); }
.fcb-toc__chevron i { transition: transform 220ms; }
.fcb-toc__chevron.is-expanded i { transform: rotate(180deg); color: var(--fcb-accent-text); }
.fcb-toc__subs { list-style: none; margin: 0.15rem 0 0.25rem; padding: 0; display: none; flex-direction: column; gap: 0.25rem; }
.fcb-toc__subs.is-expanded { display: flex; }
.fcb-toc__subs li { padding-left: 1.4rem; position: relative; }
.fcb-toc__subs li::before { content: ""; position: absolute; left: 0.4rem; top: 50%; width: 8px; height: 1px; background: var(--fcb-border-strong); }
.fcb-toc__subs li a .fcb-toc__num { font-size: 10.5px; min-width: 2.2em; }
.fcb-toc__subs li a .fcb-toc__rate { color: var(--fcb-text-faint); margin-left: auto; font-family: var(--fcb-font-mono); font-size: 10px; }
.fcb-toc__subs li a:hover .fcb-toc__rate { color: var(--fcb-accent-text); }
.fcb-cta-card { background: var(--fcb-grad); border: 0; border-radius: var(--fcb-radius); padding: 1.1rem 1.2rem; color: white; flex-shrink: 0; }
.fcb-cta-card__eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.85; font-weight: 700; }
.fcb-cta-card__title { font-family: var(--fcb-font-display); font-weight: 800; font-size: 1.1rem; margin: 0.3rem 0 0.4rem; }
.fcb-cta-card__hint { font-size: 12px; opacity: 0.92; margin-bottom: 0.8rem; line-height: 1.4; }
.fcb-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 8px; background: rgba(0,0,0,0.30); color: white; font-weight: 700; font-size: 14px; text-decoration: none; transition: background 150ms; }
.fcb-cta-btn:hover { background: rgba(0,0,0,0.45); }
.fcb-cta-disclaimer { font-size: 10px; opacity: 0.75; margin-top: 0.6rem; line-height: 1.4; }
.fcb-compare-list { display: flex; flex-direction: column; gap: 0.5rem; }
.fcb-compare-list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); border-radius: 8px; color: var(--fcb-text-soft); font-size: 13px; text-decoration: none; }
.fcb-compare-list a:hover { border-color: rgba(94,234,212,0.40); color: white; }
.fcb-compare-list__avatar { width: 24px; height: 24px; border-radius: 6px; background: white; color: var(--fcb-bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex-shrink: 0; }
.fcb-compare-list__delta { margin-left: auto; font-size: 11px; color: var(--fcb-text-faint); }
.fcb-status-card { display: flex; align-items: center; gap: 0.7rem; }
.fcb-status-card__icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.30); color: var(--fcb-good); display: inline-flex; align-items: center; justify-content: center; }
.fcb-status-card__title { font-size: 14px; font-weight: 700; color: white; }
.fcb-status-card__sub { font-size: 11px; color: var(--fcb-text-mute); }
/* ─── Bottom dock ────────────────────────────────────────────────────── */
.fcb-dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: rgba(10, 15, 26, 0.92); backdrop-filter: blur(16px); border-top: 1px solid var(--fcb-border-strong); padding: 12px 0; transform: translateY(100%); transition: transform 220ms ease; }
.fcb-dock.is-visible { transform: translateY(0); }
.fcb-dock__inner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; }
.fcb-dock__toc-btn, .fcb-dock__compare-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); border-radius: 10px; color: var(--fcb-text-soft); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 150ms; white-space: nowrap; }
.fcb-dock__toc-btn:hover, .fcb-dock__compare-btn:hover { border-color: rgba(94,234,212,0.40); color: white; }
.fcb-dock__current strong { color: var(--fcb-accent-text); }
.fcb-dock__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.4rem; background: var(--fcb-grad); color: white; border-radius: 10px; font-weight: 800; font-size: 14px; text-decoration: none; transition: filter 150ms, transform 150ms; white-space: nowrap; box-shadow: 0 4px 16px rgba(20,184,166,0.20); }
.fcb-dock__cta:hover { filter: brightness(1.10); transform: translateY(-1px); }
/* ─── Axis popover ───────────────────────────────────────────────────── */
.fcb-popover-backdrop { position: fixed; inset: 0; z-index: 65; display: none; background: rgba(7,11,20,0.55); backdrop-filter: blur(2px); }
.fcb-popover-backdrop.is-open { display: block; }
/* Centered-modal layout. Always renders mid-viewport so the score
panel popover never gets clipped by the sticky site header. */
.fcb-popover { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 70; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; background: var(--fcb-card); backdrop-filter: blur(16px); border: 1px solid var(--fcb-border-strong); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 24px 56px rgba(0,0,0,0.55); display: none; animation: fcbPopIn 160ms ease-out; }
.fcb-popover.is-open { display: block; }
@keyframes fcbPopIn { from { opacity: 0; transform: translate(-50%, calc(-50% - 6px)) scale(0.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.fcb-popover::before { display: none; }
.fcb-popover__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; gap: 0.6rem; }
.fcb-popover__name { font-family: var(--fcb-font-display); font-weight: 700; font-size: 1rem; color: white; display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.fcb-popover__name i { color: var(--fcb-accent-text); width: 18px; }
.fcb-popover__score { font-family: var(--fcb-font-mono); font-weight: 800; font-size: 1.4rem; }
.fcb-popover__score-grad { background: var(--fcb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fcb-popover__score small { color: var(--fcb-text-faint); font-size: 0.65em; -webkit-text-fill-color: initial; background: none; color: var(--fcb-text-faint); margin-left: 2px; font-weight: 600; }
.fcb-popover__close { background: transparent; border: 0; color: var(--fcb-text-faint); font-size: 1.3rem; cursor: pointer; padding: 0; margin-left: 0.4rem; line-height: 1; }
.fcb-popover__close:hover { color: white; }
.fcb-popover__explain { font-size: 12px; color: var(--fcb-text-soft); line-height: 1.55; padding: 0.6rem 0.75rem; background: var(--fcb-card-sunk); border-radius: 8px; border-left: 2px solid var(--fcb-accent-text); margin: 0 0 0.85rem; }
.fcb-popover__subs-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fcb-text-mute); font-weight: 700; margin-bottom: 0.5rem; }
.fcb-popover__subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fcb-popover__sub { display: grid; grid-template-columns: 1fr 70px 32px; gap: 0.5rem; align-items: center; font-size: 11.5px; }
.fcb-popover__sub-name { color: var(--fcb-text-mute); }
.fcb-popover__sub-bar { height: 4px; background: var(--fcb-card-sunk); border-radius: 999px; overflow: hidden; }
.fcb-popover__sub-bar > span { display: block; height: 100%; background: rgba(94,234,212,0.7); border-radius: 999px; }
.fcb-popover__sub-score { font-family: var(--fcb-font-mono); color: var(--fcb-text-soft); font-weight: 600; text-align: right; }
.fcb-popover__sub--low .fcb-popover__sub-bar > span { background: rgba(245,158,11,0.75); }
.fcb-popover__sub--low .fcb-popover__sub-score { color: #fbbf24; }
.fcb-popover__foot { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--fcb-border); display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--fcb-text-faint); }
.fcb-popover__jump { color: var(--fcb-accent-text); text-decoration: none; font-weight: 600; }
.fcb-popover__jump:hover { color: white; }
/* TOC overlay (from dock) */
.fcb-toc-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); display: none; align-items: flex-end; justify-content: center; padding: 24px; }
.fcb-toc-overlay.is-open { display: flex; }
.fcb-toc-overlay__panel { background: var(--fcb-card); border: 1px solid var(--fcb-border-strong); border-radius: var(--fcb-radius-lg); padding: 1.25rem 1.5rem; max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; backdrop-filter: blur(8px); }
.fcb-toc-overlay__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.fcb-toc-overlay__close { background: none; border: 0; color: var(--fcb-text-mute); font-size: 1.5rem; cursor: pointer; }
/* ─── User reviews + discussion ──────────────────────────────────────── */
.fcb-uvr { display: flex; flex-direction: column; gap: 1.5rem; }
/* Header — has-reviews variant: big number on the left, CTA on the right */
.fcb-uvr__head--has-reviews { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; background: linear-gradient(135deg, rgba(94,234,212,0.06), rgba(168,85,247,0.06)); border: 1px solid var(--fcb-border-strong); border-radius: 14px; }
@media (max-width: 640px) { .fcb-uvr__head--has-reviews { grid-template-columns: 1fr; text-align: center; } }
.fcb-uvr__score { display: flex; flex-direction: column; gap: 0.4rem; }
.fcb-uvr__score-num { font-family: var(--fcb-font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; background: var(--fcb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fcb-uvr__score-num small { font-size: 0.45em; -webkit-text-fill-color: initial; background: none; color: var(--fcb-text-faint); margin-left: 4px; font-weight: 600; }
.fcb-uvr__score-stars { color: #fbbf24; font-size: 1.15rem; line-height: 1; }
.fcb-uvr__score-meta { color: var(--fcb-text-mute); font-size: 13px; }
.fcb-uvr__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; }
@media (max-width: 640px) { .fcb-uvr__cta { align-items: center; } }
.fcb-uvr__cta-line { color: var(--fcb-text-soft); font-size: 13px; margin: 0; }
.fcb-uvr__write-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.3rem; border-radius: 10px; background: var(--fcb-grad); color: white; border: 0; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(168,85,247,0.55), inset 0 1px 0 rgba(255,255,255,0.2); transition: transform 150ms, box-shadow 150ms, filter 150ms; text-decoration: none; }
.fcb-uvr__write-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(168,85,247,0.7), inset 0 1px 0 rgba(255,255,255,0.25); filter: brightness(1.04); color: white; text-decoration: none; }
.fcb-uvr__write-btn--big { padding: 0.85rem 1.6rem; font-size: 15px; }
/* Empty state — magazine-style invitation */
.fcb-uvr__head--empty { padding: 2.5rem 1.75rem; background: linear-gradient(135deg, rgba(94,234,212,0.04), rgba(168,85,247,0.04)); border: 1px dashed var(--fcb-border-strong); border-radius: 14px; }
.fcb-uvr__empty-visual { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; max-width: 520px; margin: 0 auto; text-align: center; }
.fcb-uvr__empty-stars { font-size: 2rem; color: var(--fcb-text-faint); display: flex; gap: 0.25rem; }
.fcb-uvr__empty-title { font-family: var(--fcb-font-display); font-size: 1.55rem; font-weight: 800; color: white; margin: 0; }
.fcb-uvr__empty-sub { color: var(--fcb-text-soft); font-size: 14px; line-height: 1.5; margin: 0; }
/* Sort filter chips */
.fcb-uvr__sort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.25rem 0; }
.fcb-uvr__sort-label { color: var(--fcb-text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-right: 0.4rem; }
.fcb-uvr__sort-btn { background: transparent; border: 1px solid var(--fcb-border); color: var(--fcb-text-mute); padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 150ms; }
.fcb-uvr__sort-btn:hover { color: white; border-color: var(--fcb-border-strong); }
.fcb-uvr__sort-btn.is-active { color: var(--fcb-accent-text); border-color: rgba(94,234,212,0.45); background: rgba(94,234,212,0.10); }
.fcb-uvr__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
/* Review form */
.fcb-uvr-form { padding: 1.1rem 1.25rem; background: var(--fcb-card); border: 1px solid var(--fcb-border-strong); border-radius: 12px; display: flex; flex-direction: column; gap: 0.85rem; }
.fcb-uvr-form[hidden] { display: none; }
.fcb-uvr-form--reply { padding: 0.85rem 1rem; margin-top: 0.85rem; background: var(--fcb-card-sunk); }
.fcb-uvr-form__row { display: flex; flex-direction: column; gap: 0.35rem; }
.fcb-uvr-form__row label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fcb-text-mute); }
.fcb-uvr-form input[type="text"],
.fcb-uvr-form input[type="email"],
.fcb-uvr-form textarea,
.fcb-uvr-form select { width: 100%; background: var(--fcb-card-sunk); border: 1px solid var(--fcb-border); border-radius: 8px; padding: 0.65rem 0.85rem; color: var(--fcb-text); font: inherit; font-size: 14px; }
.fcb-uvr-form input:focus,
.fcb-uvr-form textarea:focus,
.fcb-uvr-form select:focus { outline: none; border-color: var(--fcb-accent-text); box-shadow: 0 0 0 3px rgba(94,234,212,0.12); }
.fcb-uvr-form textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.fcb-uvr-form__row--id { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 600px) { .fcb-uvr-form__row--id { grid-template-columns: 1fr; } }
.fcb-uvr-form__row--actions { flex-direction: row; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.fcb-uvr-form__submit { padding: 0.6rem 1.2rem; border-radius: 8px; background: var(--fcb-grad); color: white; border: 0; font-weight: 700; cursor: pointer; }
.fcb-uvr-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.fcb-uvr-form__cancel { padding: 0.55rem 1rem; border-radius: 8px; background: transparent; color: var(--fcb-text-mute); border: 1px solid var(--fcb-border); font-weight: 600; cursor: pointer; }
.fcb-uvr-form__status { color: var(--fcb-text-mute); font-size: 13px; }
.fcb-uvr-form__status.is-error { color: var(--fcb-danger); }
.fcb-uvr-form__status.is-ok { color: var(--fcb-good); }
.fcb-uvr-form__note { font-size: 11px; color: var(--fcb-text-faint); margin: 0; }
/* Optional / required label tags */
.fcb-uvr-form__opt,
.fcb-uvr-form__req { display: inline-block; margin-left: 0.45rem; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 4px; vertical-align: middle; }
.fcb-uvr-form__opt { color: var(--fcb-text-faint); background: var(--fcb-card-sunk); border: 1px solid var(--fcb-border); }
.fcb-uvr-form__req { color: var(--fcb-accent-text); background: rgba(94,234,212,0.10); border: 1px solid rgba(94,234,212,0.35); }
/* Inline per-axis star pickers (replaces the dropdown) */
.fcb-axis-pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem 0.85rem; padding: 0.7rem 0.95rem; background: var(--fcb-card-sunk); border: 1px solid var(--fcb-border); border-radius: 10px; }
.fcb-axis-picker { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; }
.fcb-axis-picker__label { color: var(--fcb-text-soft); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.fcb-axis-picker__stars { display: inline-flex; align-items: center; gap: 0.15rem; }
.fcb-axis-picker__star { background: none; border: 0; padding: 0.18rem; font-size: 14px; color: var(--fcb-text-faint); cursor: pointer; transition: color 100ms, transform 100ms; }
.fcb-axis-picker__star:hover { transform: scale(1.15); }
.fcb-axis-picker__star.is-on { color: #fbbf24; }
.fcb-axis-picker__clear { background: none; border: 0; color: var(--fcb-text-faint); cursor: pointer; padding: 0 0.3rem; font-size: 14px; line-height: 1; opacity: 0.5; transition: opacity 120ms; }
.fcb-axis-picker[data-has-value] .fcb-axis-picker__clear { opacity: 1; }
.fcb-axis-picker__clear:hover { color: var(--fcb-danger); }
/* Star picker */
.fcb-uvr-form__row--rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.fcb-uvr-form__row--rating > label { width: 100%; }
.fcb-star-picker { display: inline-flex; gap: 0.25rem; }
.fcb-star-picker__star { background: none; border: 0; padding: 0.3rem; font-size: 1.85rem; color: var(--fcb-text-faint); cursor: pointer; transition: color 120ms, transform 120ms; }
.fcb-star-picker__star:hover { transform: scale(1.12); }
.fcb-star-picker__star.is-on { color: #fbbf24; }
.fcb-star-picker__readout { color: var(--fcb-text-soft); font-size: 13px; font-weight: 600; min-width: 110px; }
.fcb-star-picker__readout.is-set { color: #fbbf24; }
/* Star display */
.fcb-stars { color: #fbbf24; display: inline-flex; gap: 1px; font-size: 14px; }
.fcb-stars--empty { color: var(--fcb-text-faint); }
/* Review card */
.fcb-review { list-style: none; padding: 1.25rem 1.4rem; background: var(--fcb-card-raised); border: 1px solid var(--fcb-border); border-radius: 14px; transition: border-color 200ms, box-shadow 200ms; }
.fcb-review:hover { border-color: var(--fcb-border-strong); }
.fcb-review--pinned { border-color: rgba(245,158,11,0.35); background: linear-gradient(180deg, rgba(245,158,11,0.04), var(--fcb-card-raised) 60%); }
.fcb-review__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.75rem; }
.fcb-review__avatar { width: var(--fcb-av-size, 40px); height: var(--fcb-av-size, 40px); border-radius: 50%; background: var(--fcb-grad); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-family: var(--fcb-font-display); flex-shrink: 0; overflow: hidden; }
.fcb-review__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcb-review__avatar--sm { background: var(--fcb-card-sunk); border: 1px solid var(--fcb-border); color: var(--fcb-text-mute); font-size: 12px; }
.fcb-review__avatar-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.fcb-review__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fcb-review__name { color: white; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; line-height: 1.2; }
.fcb-review__name-text { font-family: var(--fcb-font-display); font-size: 0.98rem; }
.fcb-review__meta { color: var(--fcb-text-mute); font-size: 12.5px; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.fcb-review__meta .fcb-stars { font-size: 13px; }
.fcb-review__meta-rating { color: white; font-family: var(--fcb-font-mono); font-weight: 700; }
.fcb-review__meta-dot { color: var(--fcb-text-faint); }
.fcb-review__title { font-family: var(--fcb-font-display); font-weight: 700; font-size: 1.18rem; color: white; margin: 0 0 0.45rem; line-height: 1.3; letter-spacing: -0.01em; }
.fcb-review__body { color: var(--fcb-text-soft); line-height: 1.65; font-size: 14.5px; }
.fcb-review__axes { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.85rem; }
.fcb-review__axis { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 7px; background: var(--fcb-card-sunk); border: 1px solid var(--fcb-border); font-size: 11.5px; }
.fcb-review__axis-label { color: var(--fcb-text-mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.fcb-review__axis strong { color: white; font-family: var(--fcb-font-mono); }
.fcb-review__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--fcb-border); }
.fcb-review__votes { display: flex; gap: 0.4rem; }
.fcb-review__vote { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: transparent; border: 1px solid var(--fcb-border); color: var(--fcb-text-mute); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 120ms; }
.fcb-review__vote:hover { color: white; border-color: var(--fcb-border-strong); background: var(--fcb-card-sunk); }
.fcb-review__vote.is-active { color: var(--fcb-accent-text); border-color: rgba(94,234,212,0.45); background: rgba(94,234,212,0.12); }
.fcb-review__vote.is-active i { color: var(--fcb-accent-text); }
.fcb-review__vote-label { display: none; }
@media (min-width: 480px) { .fcb-review__vote-label { display: inline; } }
.fcb-review__vote--small { padding: 0.2rem 0.6rem; font-size: 11.5px; }
.fcb-review__reply-toggle { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border-radius: 999px; background: transparent; border: 1px solid var(--fcb-border); color: var(--fcb-text-mute); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 120ms; }
.fcb-review__reply-toggle:hover { color: white; border-color: var(--fcb-border-strong); background: var(--fcb-card-sunk); }
.fcb-review__reply-count { color: var(--fcb-accent-text); }
/* Badges */
.fcb-review__badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.fcb-review__badge--pinned { background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }
.fcb-review__badge--verified { background: rgba(52,211,153,0.15); color: var(--fcb-good); border: 1px solid rgba(52,211,153,0.35); }
.fcb-review__badge--rep { background: rgba(168,85,247,0.18); color: #c4b5fd; border: 1px solid rgba(168,85,247,0.40); }
/* Reply thread */
.fcb-review__replies { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0 1rem; border-top: 1px dashed var(--fcb-border); display: flex; flex-direction: column; gap: 0.65rem; position: relative; }
.fcb-review__replies::before { content: ""; position: absolute; left: 0; top: 1rem; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(94,234,212,0.35), rgba(168,85,247,0.15)); border-radius: 1px; }
.fcb-review__replies-more { list-style: none; }
.fcb-review__expand-replies { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0; color: var(--fcb-accent-text); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0.4rem 0; }
.fcb-review__expand-replies:hover { text-decoration: underline; }
.fcb-reply { list-style: none; display: flex; gap: 0.7rem; padding: 0.7rem 0.95rem; background: var(--fcb-card-sunk); border: 1px solid var(--fcb-border); border-radius: 10px; transition: border-color 150ms; }
.fcb-reply:hover { border-color: var(--fcb-border-strong); }
.fcb-reply__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.fcb-reply__head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 12.5px; }
.fcb-reply__head strong { color: white; font-family: var(--fcb-font-display); }
.fcb-reply__date { color: var(--fcb-text-mute); margin-left: auto; }
.fcb-reply__body { color: var(--fcb-text-soft); font-size: 13.5px; line-height: 1.55; }
.fcb-reply__foot { display: flex; gap: 0.4rem; }
/* ============================================================================
ARCHIVE — fcb-archive-* + fcb-card (v3)
----------------------------------------------------------------------------
Hybrid expandable cards + sticky horizontal filter bar. Mockup reference:
docs/mockup/broker-archive-main.html. Partial: partials/broker/card-v3.php.
Template: archive-forex_broker.php.
============================================================================ */
/* Local supplements — orange gradient used for the featured/pinned variant. */
.fcb-page,
.fc-homepage-strip-zone { --fcb-grad-orange: linear-gradient(135deg, #f97316, #fbbf24); }
/* ─── Archive shell ─────────────────────────────────────────────────── */
.fcb-archive { padding-bottom: 80px; }
.fcb-archive__breadcrumb { padding: 0 0 0.5rem; font-size: 13px; color: var(--fcb-text-mute); }
.fcb-archive__head { padding: 0 0 0.5rem; }
.fcb-archive__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fcb-accent-text); margin-bottom: 0.85rem; }
.fcb-archive__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--fcb-grad); border-radius: 2px; }
.fcb-archive__title { font-family: var(--fcb-font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 0.85rem; color: var(--fcb-text); }
.fcb-archive__title-grad { background: var(--fcb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fcb-archive__intro { color: var(--fcb-text-soft); font-size: 1.02rem; line-height: 1.65; max-width: 70ch; margin: 0; }
.fcb-archive__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--fcb-border); font-size: 12px; color: var(--fcb-text-mute); }
.fcb-archive__meta strong { color: var(--fcb-text-soft); font-weight: 600; }
/* ─── Archive intro zone — white card matching single-broker hero ─────
Mirrors .fcb-hero structurally: bg + border + radius + clamp padding so
the card has visible inset on mobile and breathing room on desktop.
Side gap on mobile: the element inherits .fcb-container's `margin: 0 auto`
which collapses to 0 on screens narrower than max-width, leaving the
card edge-to-edge. We override to real side margins so the visible card
actually inset from the screen, then restore auto centering at the
container's centering breakpoint (1200px+). */
/* 3-class selector — needed to beat `.fcb-intro.light-surface { margin: 1rem auto }`
defined later in this file (specificity 0,2,0). With auto on the right side,
the box collapses against the screen edge on mobile. */
.fcb-intro.light-surface.fcb-archive-intro {
max-width: 1160px;
background: var(--fcb-card);
border: 1px solid var(--fcb-border);
border-radius: var(--fcb-radius-lg);
padding: clamp(1rem, 3.5vw, 1.75rem) clamp(1rem, 4vw, 2.25rem);
margin: 1.5rem 10px 0;
}
@media (min-width: 1200px) {
.fcb-intro.light-surface.fcb-archive-intro { margin: 1.5rem auto 0; }
}
.fcb-archive-intro .fcb-archive__breadcrumb { padding-top: 0; }
/* The filter bar lives at the top of .fcb-archive (Zone B) so its sticky
positioning has the full broker-grid height to scroll within. We just
give it some breathing room above. */
.fcb-archive > .fcb-archive__filterbar { margin-top: 0.5rem; }
/* ─── Sticky filter panel: chips · active · count+sort ──────────────── */
.fcb-archive__filterbar {
position: sticky; top: 0; z-index: 20;
background: rgba(10, 15, 26, 0.88); backdrop-filter: blur(14px);
border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius);
overflow: hidden;
}
.fcb-filterbar__row {
display: flex; flex-wrap: wrap; align-items: center;
gap: 0.5rem 0.85rem;
padding: 0.7rem 1rem;
}
.fcb-filterbar__row + .fcb-filterbar__row { border-top: 1px solid var(--fcb-border); }
.fcb-filterbar__row--active { background: rgba(94,234,212,0.04); gap: 0.45rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.fcb-filterbar__row--meta {
background: rgba(15, 23, 42, 0.35);
gap: 0.75rem;
padding-top: 0.55rem;
padding-bottom: 0.55rem;
flex-wrap: nowrap;
align-items: center;
}
/* Every meta-row item shares the same min-height so the All-filters pill,
the count text, and the sort dropdown all sit on the same midline. */
.fcb-filterbar__row--meta > * {
display: inline-flex;
align-items: center;
min-height: 32px;
}
.fcb-filterbar__row--meta .fcb-archive__count { flex: 1 1 auto; min-width: 0; gap: 0.3rem; }
.fcb-filterbar__row--meta .fcb-archive__sort-form { flex: 0 0 auto; }
.fcb-filterbar__row--meta .fcb-select {
/* Match the All-filters button's 32px target so the select doesn't sit a
couple of pixels high inside the row. */
padding-top: 0.42rem;
padding-bottom: 0.42rem;
}
.fcb-filterbar__group {
display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
padding-right: 0.55rem; position: relative;
}
.fcb-filterbar__group:not(:last-of-type)::after {
content: ""; position: absolute; right: 0; top: 25%; bottom: 25%;
width: 1px; background: var(--fcb-border);
}
.fcb-filterbar__label {
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
color: var(--fcb-text-mute); padding-right: 0.2rem;
}
.fcb-filterbar__chip {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.3rem 0.7rem; border-radius: 999px;
background: var(--fcb-card-raised); border: 1px solid var(--fcb-border);
color: var(--fcb-text-soft); font-size: 12px; font-weight: 500;
cursor: pointer; transition: all 150ms;
font-family: inherit; text-decoration: none;
}
.fcb-filterbar__chip:hover { border-color: rgba(94,234,212,0.40); color: white; }
.fcb-filterbar__chip.is-active { background: var(--fcb-grad-soft); border-color: rgba(94,234,212,0.55); color: white; }
.fcb-filterbar__chip i { font-size: 10px; opacity: 0.7; }
.fcb-filterbar__more {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.4rem 0.95rem; border-radius: 999px;
background: var(--fcb-grad-soft);
border: 1px solid rgba(94,234,212,0.45);
color: white; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
transition: all 150ms; flex: 0 0 auto;
}
.fcb-filterbar__more:hover { color: white; border-color: rgba(94,234,212,0.40); background: rgba(94,234,212,0.06); }
/* Active-filter chips (Row 2) */
.fcb-active-filters__label { color: var(--fcb-text-mute); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.fcb-active-filter {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.22rem 0.6rem; border-radius: 999px;
background: rgba(94,234,212,0.10); border: 1px solid rgba(94,234,212,0.30);
color: var(--fcb-accent-text); font-weight: 600; font-size: 12px; text-decoration: none;
transition: all 150ms;
}
.fcb-active-filter:hover { color: white; border-color: rgba(94,234,212,0.55); background: rgba(94,234,212,0.18); }
.fcb-active-filters__clear { margin-left: auto; color: var(--fcb-text-mute); text-decoration: underline; cursor: pointer; background: transparent; border: 0; font-family: inherit; font-size: 12px; padding: 0; }
.fcb-active-filters__clear:hover { color: white; }
/* Count + sort (Row 3) */
.fcb-archive__count { font-size: 13px; color: var(--fcb-text-soft); }
.fcb-archive__count strong { color: white; font-weight: 700; font-family: var(--fcb-font-mono); }
.fcb-archive__count-featured { color: var(--fcb-orange); }
.fcb-archive__sort-form { display: inline-flex; align-items: center; gap: 0.55rem; line-height: 1; margin: 0; }
.fcb-archive__sort-label { font-size: 11.5px; color: var(--fcb-text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; }
/* Reset parent Breek theme's generic `select { margin-bottom: 15px }` rule,
which makes the select sit visibly low inside the inline-flex sort form. */
.fcb-archive__sort-form .fcb-select { line-height: 1; margin: 0; }
@media (max-width: 640px) {
.fcb-filterbar__row { padding: 0.55rem 0.8rem; }
.fcb-filterbar__group { padding-right: 0; }
.fcb-filterbar__group:not(:last-of-type)::after { display: none; }
.fcb-filterbar__row--meta { gap: 0.5rem; }
.fcb-filterbar__row--meta .fcb-archive__count { font-size: 12px; }
.fcb-archive__sort-label { display: none; }
.fcb-filterbar__more span { display: none; }
.fcb-filterbar__more { padding: 0.4rem 0.7rem; }
}
.fcb-select {
background: var(--fcb-card-raised); border: 1px solid var(--fcb-border);
color: white; padding: 0.35rem 2rem 0.35rem 0.8rem; border-radius: 8px;
font-family: inherit; font-size: 13px; font-weight: 500;
cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 0.6rem center;
}
.fcb-select:hover { border-color: var(--fcb-border-strong); }
/* ─── All-filters drawer (opened by .fcb-filterbar__more) ──────────── */
.fcb-filter-drawer {
padding: 0;
border: 1px solid var(--fcb-border);
border-radius: var(--fcb-radius);
background: var(--fcb-card);
color: var(--fcb-text);
max-width: 720px;
width: calc(100% - 2rem);
max-height: min(90vh, 760px);
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
/* When open, the dialog is the flex column so the form fills it and the
body grows to take the remaining height. `height: 100%` on the form
alone resolved against the block dialog as 0 and collapsed the body. */
.fcb-filter-drawer[open] {
display: flex;
flex-direction: column;
overflow: hidden;
}
.fcb-filter-drawer::backdrop {
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(4px);
}
.fcb-filter-drawer__form {
display: flex; flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.fcb-filter-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.25rem; border-bottom: 1px solid var(--fcb-border);
}
.fcb-filter-drawer__head h3 {
font-family: var(--fcb-font-display);
font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--fcb-text);
}
.fcb-filter-drawer__close {
background: none; border: 0; cursor: pointer;
font-size: 1.6rem; line-height: 1; color: var(--fcb-text-mute);
padding: 0 0.35rem;
}
.fcb-filter-drawer__close:hover { color: var(--fcb-text); }
.fcb-filter-drawer__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 1rem 1.25rem;
display: flex; flex-direction: column; gap: 1rem;
}
.fcb-filter-drawer__group {
border: 0; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 0.45rem;
}
.fcb-filter-drawer__group legend {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
font-weight: 700; color: var(--fcb-text-mute); padding: 0; margin-bottom: 0.25rem;
}
.fcb-filter-drawer__sub {
font-size: 11.5px; color: var(--fcb-text-mute); font-weight: 600;
margin-top: 0.15rem;
}
.fcb-filter-drawer__chips {
display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.fcb-filter-drawer__chip {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.32rem 0.75rem; border-radius: 999px;
background: var(--fcb-card-raised); border: 1px solid var(--fcb-border);
color: var(--fcb-text-soft); font-size: 12.5px; font-weight: 500;
cursor: pointer; transition: all 150ms;
user-select: none;
}
.fcb-filter-drawer__chip input { position: absolute; opacity: 0; pointer-events: none; }
.fcb-filter-drawer__chip:hover { border-color: rgba(94,234,212,0.40); color: white; }
.fcb-filter-drawer__chip:has(input:checked) {
background: var(--fcb-grad-soft);
border-color: rgba(94,234,212,0.55);
color: white;
}
.fcb-filter-drawer__chip--strong { font-weight: 600; }
.fcb-filter-drawer__foot {
display: flex; justify-content: space-between; gap: 0.5rem;
padding: 0.85rem 1.25rem;
border-top: 1px solid var(--fcb-border);
}
.fcb-filter-drawer__btn {
border-radius: 8px;
padding: 0.5rem 1.1rem;
font-size: 0.92rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
font-family: inherit;
text-decoration: none;
display: inline-flex; align-items: center; gap: 0.4rem;
}
.fcb-filter-drawer__btn--ghost {
background: transparent;
border-color: var(--fcb-border);
color: var(--fcb-text-mute);
}
.fcb-filter-drawer__btn--ghost:hover {
color: var(--fcb-text); border-color: var(--fcb-border-strong);
}
.fcb-filter-drawer__btn--primary {
background: var(--fcb-grad);
color: #fff;
box-shadow: 0 6px 18px -8px rgba(168,85,247,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.fcb-filter-drawer__btn--primary:hover { filter: brightness(1.05); }
@media (max-width: 600px) {
.fcb-filter-drawer {
max-width: 100vw; width: 100vw;
max-height: 100vh; height: 100vh;
border-radius: 0;
}
}
/* ─── Grid + section labels ─────────────────────────────────────────── */
.fcb-archive__grid { display: flex; flex-direction: column; gap: 1rem; }
.fcb-archive__section-label {
display: flex; align-items: center; gap: 0.7rem;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
color: var(--fcb-text-mute); margin: 0.5rem 0 -0.15rem;
}
.fcb-archive__section-label::after { content: ""; flex: 1; height: 1px; background: var(--fcb-border); }
.fcb-archive__section-label--featured { color: var(--fcb-orange); }
.fcb-archive__section-label--featured i { color: var(--fcb-orange); }
/* Tiny inline note next to a section label — only shown when filters are
active to flag that the featured section ignores them. Plain text, no
pill background, low-contrast so it doesn't compete with the label. */
.fcb-archive__section-note {
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--fcb-text-faint);
font-style: italic;
white-space: nowrap;
}
/* ─── The big card ───────────────────────────────────────────────────── */
.fcb-card {
position: relative;
border: 1px solid var(--fcb-border); border-radius: var(--fcb-radius-lg);
background: var(--fcb-card); backdrop-filter: blur(8px);
overflow: hidden; transition: border-color 200ms;
}
.fcb-card:hover { border-color: var(--fcb-border-strong); }
.fcb-card.is-expanded { border-color: rgba(94,234,212,0.35); }
.fcb-card.is-expanded::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--fcb-grad); }
.fcb-card.is-featured { border-color: rgba(249,115,22,0.30); background: linear-gradient(135deg, rgba(249,115,22,0.05), rgba(168,85,247,0.04)), var(--fcb-card); }
.fcb-card.is-featured::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--fcb-grad-orange); }
.fcb-card.is-featured.is-expanded { border-color: rgba(249,115,22,0.55); }
/* Top-left rank or featured badge */
.fcb-card__rank {
position: absolute; top: 0.75rem; left: -0.35rem;
min-width: 26px; height: 26px; padding: 0 0.5rem; border-radius: 999px;
background: var(--fcb-card-raised); border: 1px solid var(--fcb-border);
display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
font-family: var(--fcb-font-mono); font-weight: 700; font-size: 11px; color: var(--fcb-text-mute);
box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 2;
}
.fcb-card__rank--top { background: var(--fcb-grad); border-color: transparent; color: white; }
.fcb-card__rank--featured { background: var(--fcb-grad-orange); border-color: transparent; color: #1a0f00; font-family: var(--fcb-font-display); font-weight: 800; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; padding: 0 0.6rem; }
.fcb-card__rank--featured i { font-size: 9.5px; }
/* Right-edge column — stacks the labeled compare chip above the labeled
expand pill in a single grid cell at the topbar's rightmost slot. Both
pills size to fit their text + icon; align-items:stretch keeps their
widths equal so they read as a paired control group. */
.fcb-card__rightcol {
display: flex; flex-direction: column; align-items: stretch; gap: 6px;
min-width: 86px;
}
/* Compare-cart chip + expand pill share the same pill shape so they read
as a paired control set. Text label is always visible (no
icon-only/tooltip pattern); the chevron pill carries a "Details" label
on the left and the rotating arrow on the right. */
.fcb-card__compare-chip,
.fcb-card__expand {
height: 30px;
padding: 0 0.6rem;
border-radius: 999px;
background: var(--fcb-card-raised);
border: 1px solid var(--fcb-border);
color: var(--fcb-text-soft);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
gap: 0.4rem; white-space: nowrap;
font-family: var(--fcb-font-display);
font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
transition: color 150ms, border-color 150ms, background 150ms;
}
.fcb-card__compare-chip i,
.fcb-card__expand i { font-size: 10px; transition: transform 250ms; }
.fcb-card__compare-chip:hover,
.fcb-card__expand:hover {
color: var(--fcb-accent-text);
border-color: rgba(94,234,212,0.40);
background: rgba(20,184,166,0.06);
}
.fcb-card__compare-chip.is-added {
background: rgba(20,184,166,0.12);
border-color: rgba(20,184,166,0.45);
color: var(--fcb-accent-text);
}
/* Light-surface variants — same pill shape, lighter token palette. */
.light-surface .fcb-card__compare-chip,
.light-surface .fcb-card__expand {
background: rgba(255,255,255,0.92);
border-color: rgba(15,23,42,0.12);
color: var(--fcb-text-soft);
}
.light-surface .fcb-card__compare-chip:hover,
.light-surface .fcb-card__expand:hover {
color: var(--fcb-accent-text);
border-color: rgba(20,184,166,0.40);
background: rgba(20,184,166,0.06);
}
.light-surface .fcb-card__compare-chip.is-added {
background: rgba(20,184,166,0.08);
border-color: rgba(20,184,166,0.35);
color: var(--fcb-accent-text);
}
/* Topbar (always visible) — 5 cols: logo | title block | score | action stack | chevron */
.fcb-card__topbar {
display: grid; gap: 1.1rem; align-items: center;
padding: 1rem 1.25rem;
grid-template-columns: auto minmax(220px, 1fr) auto auto auto;
}
@media (max-width: 900px) {
.fcb-card__topbar { grid-template-columns: auto 1fr auto auto; gap: 0.85rem; }
.fcb-card__topbar > .fcb-card__score { display: none; }
.fcb-card__cta--secondary { display: none; }
}
/* Logo container: fixed height (56px), flexible width — lets rectangular
broker wordmarks render at their natural aspect ratio. Square logos still
fit; text-only fallback keeps a min-width so initials don't look tiny. */
.fcb-card__logo {
height: 56px; min-width: 56px; max-width: 160px;
padding: 0 10px;
border-radius: 12px; background: white;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,0.35);
flex-shrink: 0; overflow: hidden;
}
.fcb-card__logo img {
display: block;
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
}
.fcb-card__logo--text { font-family: var(--fcb-font-display); font-weight: 800; font-size: 1.2rem; color: white; }
.fcb-card__title { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.fcb-card__name-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; min-width: 0; }
.fcb-card__name { font-family: var(--fcb-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; color: var(--fcb-text); margin: 0; letter-spacing: -0.01em; }
.fcb-card__name a { color: inherit; text-decoration: none; }
.fcb-card__name a:hover { color: var(--fcb-accent-text); }
.fcb-card__tagline { color: var(--fcb-text-mute); font-size: 13px; line-height: 1.4; max-width: 60ch; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcb-card__regline { margin: 0.25rem 0 0; font-size: 12px; color: var(--fcb-text-mute); line-height: 1.4; }
.fcb-card__regline strong { color: var(--fcb-good); font-weight: 600; font-family: var(--fcb-font-display); margin-right: 0.4rem; }
.fcb-card__regline-more { color: var(--fcb-text-faint); }
/* Tier-aware tone for the regulation label — applied via the same palette
as fcb-pill so the colour story matches the hero pill on each row. */
.fcb-card__regline--good strong { color: var(--fcb-good); }
.fcb-card__regline--teal strong { color: var(--fcb-accent-text); }
.fcb-card__regline--warn strong { color: #fbbf24; }
.light-surface .fcb-card__regline--warn strong { color: var(--fcb-warn); }
.fcb-card__regline--bad strong { color: #fb7185; }
.light-surface .fcb-card__regline--bad strong { color: var(--fcb-danger); }
.fcb-card__score { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; min-height: 78px; padding: 0.65rem 1rem; border-radius: 12px; background: var(--fcb-card-raised); border: 1px solid var(--fcb-border-strong); }
.fcb-card__score-num { font-family: var(--fcb-font-mono); font-weight: 700; font-size: 1.85rem; line-height: 1; background: var(--fcb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fcb-card__score-num small { font-size: 0.55em; -webkit-text-fill-color: initial; color: var(--fcb-text-faint); margin-left: 1px; font-weight: 600; }
.fcb-card__score-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fcb-text-mute); font-weight: 700; margin-top: 0.2rem; }
.fcb-card__score-stars { display: inline-block; margin-top: 0.25rem; }
/* Partial-fill 5-star bar — gray track + clipped gold overlay. */
.fcb-stars {
position: relative; display: inline-block; line-height: 1;
font-size: 12px; color: rgba(255,255,255,0.18); letter-spacing: 1.5px;
}
.fcb-stars::before { content: '\2605\2605\2605\2605\2605'; }
.fcb-stars__fg {
position: absolute; top: 0; left: 0;
overflow: hidden; white-space: nowrap;
color: var(--fcb-accent-text);
}
.fcb-stars__fg::before { content: '\2605\2605\2605\2605\2605'; letter-spacing: 1.5px; }
.fcb-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; min-width: 140px; }
.fcb-card__cta {
display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
padding: 0.55rem 1rem; border-radius: 9px;
background: var(--fcb-grad); color: white; text-decoration: none;
font-family: var(--fcb-font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: -0.01em;
box-shadow: 0 6px 18px -8px rgba(168,85,247,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
transition: transform 150ms, box-shadow 150ms, filter 150ms;
white-space: nowrap;
}
.fcb-card__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(168,85,247,0.7); filter: brightness(1.05); color: white; }
.fcb-card__cta i { transition: transform 150ms; }
.fcb-card__cta:hover i { transform: translateX(3px); }
.fcb-card.is-featured .fcb-card__cta { background: var(--fcb-grad-orange); box-shadow: 0 6px 18px -8px rgba(249,115,22,0.55), inset 0 1px 0 rgba(255,255,255,0.25); color: #1a0f00; }
.fcb-card.is-featured .fcb-card__cta:hover { box-shadow: 0 10px 24px -10px rgba(249,115,22,0.7); color: #1a0f00; }
.fcb-card__cta--secondary {
background: transparent;
border: 1px solid var(--fcb-border-strong);
color: var(--fcb-text-soft);
box-shadow: none;
padding: 0.55rem 0.9rem;
}
.fcb-card__cta--secondary:hover { background: rgba(94,234,212,0.06); border-color: rgba(94,234,212,0.40); color: var(--fcb-text); transform: translateY(-1px); box-shadow: none; filter: none; }
.fcb-card.is-featured .fcb-card__cta--secondary { background: transparent; box-shadow: none; color: var(--fcb-text-soft); }
/* Expand pill — base styles consolidated up by .fcb-card__compare-chip rule
(shared pill shape). Only the expanded-state tweaks live here. */
.fcb-card.is-expanded .fcb-card__expand i { transform: rotate(180deg); }
.fcb-card.is-expanded .fcb-card__expand {
color: var(--fcb-accent-text);
border-color: rgba(94,234,212,0.40);
background: rgba(20,184,166,0.06);
}
/* ─── Phone-stacked card (≤640px) ──────────────────────────────────────
Restructures the topbar grid into a stacked layout using CSS-only
grid areas. .fcb-card__title flips to display:contents so its children
(name-row, regline, tagline) participate directly in the parent grid
and can be placed in named areas. No PHP markup change required.
Layout:
┌─────────────────────────────────────┐
│ [logo] Name [score chip] [▾] │
│ [logo] FCA · CySEC · +N more │
│ Tagline two lines max… │
│ [ Visit broker ] [ Read review ] │
└─────────────────────────────────────┘ */
@media (max-width: 640px) {
.fcb-card__topbar {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"logo name score"
"logo ctry ctry"
"regs regs regs"
"tag tag tag"
"cta cta cta";
gap: 0.4rem 0.65rem;
padding: 0.85rem 0.95rem;
align-items: center;
}
/* Surface both .fcb-card__title and .fcb-card__name-row into the parent
grid so name and country chip can sit in separate areas. */
.fcb-card__topbar > .fcb-card__title { display: contents; }
.fcb-card__title > .fcb-card__name-row { display: contents; }
.fcb-card__topbar > .fcb-card__logo { grid-area: logo; align-self: start; height: 44px; min-width: 44px; max-width: 100px; padding: 0 8px; border-radius: 10px; }
.fcb-card__name-row > .fcb-card__name { grid-area: name; min-width: 0; }
.fcb-card__name-row > .fcb-card__country { grid-area: ctry; justify-self: start; }
.fcb-card__title > .fcb-card__regline { grid-area: regs; margin: 0.15rem 0 0; }
.fcb-card__title > .fcb-card__tagline { grid-area: tag; margin: 0; font-size: 12.5px; }
.fcb-card__name { font-size: 1.05rem; }
/* Score chip: number only — no /5 suffix, no OVERALL label, no stars. */
.fcb-card__topbar > .fcb-card__score {
display: inline-flex; align-items: center; justify-self: end;
grid-area: score;
min-width: 0; min-height: 0;
padding: 0.25rem 0.6rem; border-radius: 999px;
background: var(--fcb-card-raised);
border: 1px solid var(--fcb-border-strong);
}
.fcb-card__score-num { font-size: 1.05rem; }
.fcb-card__score-num small { display: none; }
.fcb-card__score-label { display: none; }
.fcb-card__score-stars { display: none; }
/* Expand chevron + compare chip not useful on phone — tap the card name
to navigate, use the floating cart drawer to add to compare. Hide the
whole rightcol so the topbar has clean horizontal room. */
.fcb-card__topbar > .fcb-card__expand,
.fcb-card__rightcol > .fcb-card__expand,
.fcb-card__topbar > .fcb-card__rightcol { display: none; }
/* Rank / Featured badge gets covered by the logo at this breakpoint
because the logo column is now flush with the card's left padding.
Lift the badge to sit as a small sticker above the card's top edge
so it clears the logo entirely. */
.fcb-card__rank {
top: -10px;
left: 0.6rem;
height: 22px;
font-size: 10.5px;
box-shadow: 0 6px 14px rgba(0,0,0,0.32);
}
.fcb-card__rank--featured { font-size: 9px; padding: 0 0.55rem; }
/* Actions: two equal-width side-by-side buttons. Re-show the
secondary CTA that's hidden at the ≤900px breakpoint above. */
.fcb-card__topbar > .fcb-card__actions {
grid-area: cta;
flex-direction: row;
min-width: 0;
gap: 0.5rem;
margin-top: 0.25rem;
}
.fcb-card__cta--secondary { display: inline-flex; }
.fcb-card__actions > .fcb-card__cta {
flex: 1 1 0;
min-height: 44px;
padding: 0.65rem 0.5rem;
font-size: 0.85rem;
}
/* Best-for chips on phone: single row, content-sized so chips aren't
forced to fill grid cells (which left big empty side gutters around
short labels). Flip parent from grid → flex with nowrap; pills get
width: auto + min-width: 0 so the longest can truncate if needed. */
.fcb-card__strip-bestfor {
display: flex; flex-wrap: nowrap; gap: 0.3rem;
grid-template-columns: none;
}
.fcb-bestfor-pill {
width: auto; flex: 0 1 auto; min-width: 0;
justify-content: flex-start;
font-size: 9.5px; padding: 0.18rem 0.5rem; gap: 0.25rem;
}
.fcb-bestfor-pill i { font-size: 8.5px; }
/* Propfirm-only: the discount chip sits in .fcb-card__name-row with no
grid-area assigned by the phone topbar grid above, so auto-placement
would drop it below the CTAs. Hide it on phones — the same code +
amount surface in the detail panel and on the firm's review page. */
.fcb-card--propfirm .fcb-card__name-row > .fcb-pill { display: none; }
}
/* Style B strip — 4 equal-width specs (left) + 3 equal-width best-for cells (right). */
.fcb-card__strip {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 1.25rem;
padding: 0.65rem 1.25rem;
border-top: 1px solid var(--fcb-border);
background: var(--fcb-card-sunk);
align-items: center;
}
@media (max-width: 900px) {
.fcb-card__strip { grid-template-columns: 1fr; }
}
.fcb-card__strip-specs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
}
@media (max-width: 700px) {
.fcb-card__strip-specs { grid-template-columns: repeat(2, 1fr); }
}
.fcb-card__strip-spec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcb-card__strip-spec-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fcb-text-mute); font-weight: 700; }
.fcb-card__strip-spec-value { font-family: var(--fcb-font-mono); font-weight: 700; color: var(--fcb-text); font-size: 13px; line-height: 1.15; }
.fcb-card__strip-spec-value.is-good { color: var(--fcb-good); }
.fcb-card__strip-spec-value small { color: var(--fcb-text-faint); font-weight: 500; font-size: 0.78em; margin-left: 2px; }
.fcb-card__strip-bestfor {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.35rem;
}
@media (max-width: 700px) {
.fcb-card__strip-bestfor { grid-template-columns: repeat(2, 1fr); }
}
.fcb-bestfor-pill {
display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
padding: 0.22rem 0.5rem; border-radius: 999px;
background: rgba(94,234,212,0.08); border: 1px solid rgba(94,234,212,0.25);
color: var(--fcb-accent-text); font-size: 10.5px; font-weight: 600;
width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fcb-bestfor-pill i { font-size: 9.5px; flex-shrink: 0; }
/* Card detail (expanded) */
.fcb-card__detail { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--fcb-border); }
.fcb-card.is-expanded .fcb-card__detail { display: block; }
.fcb-card__detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 1.25rem;
padding-top: 1rem;
align-items: start; /* don't stretch columns — kills empty space below shorter side */
}
@media (max-width: 900px) { .fcb-card__detail-grid { grid-template-columns: 1fr; gap: 0.85rem; } }
.fcb-card__detail-left, .fcb-card__detail-right { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.fcb-card__axes { background: var(--fcb-card-raised); border: 1px solid var(--fcb-border-strong); border-radius: var(--fcb-radius); padding: 0.85rem 1rem; }
.fcb-card__axes-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.55rem; }
.fcb-card__axes-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fcb-text-mute); font-weight: 700; }
.fcb-card__axes-meta { font-size: 11px; color: var(--fcb-text-faint); }
.fcb-card__axes-list { display: flex; flex-direction: column; gap: 0.3rem; }
.fcb-axis-row { display: grid; grid-template-columns: 106px 1fr 36px; gap: 0.65rem; align-items: center; font-size: 12px; }
.fcb-axis-row__name { color: var(--fcb-text-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.fcb-axis-row__name i { color: var(--fcb-text-mute); margin-right: 0.4rem; width: 14px; text-align: center; flex-shrink: 0; }
.fcb-axis-row__bar { height: 5px; background: var(--fcb-card-sunk); border-radius: 999px; overflow: hidden; display: block; }
.fcb-axis-row__bar > span { display: block; height: 100%; background: var(--fcb-grad); border-radius: 999px; }
.fcb-axis-row__score { font-family: var(--fcb-font-mono); color: var(--fcb-text); font-weight: 700; text-align: right; font-size: 12px; }
/* Card-grid axis rows are