/* Category hubs (site redesign): ranked hubs with data-backed filters (#384) + listing hubs.
   Builds on review.css (tokens, type, light/dark, .rv-btn, .rv-sbar, .rv-related, crumbs). Everything here is
   scoped to .rv.fc-hub (set on <body> by the hub templates) and uses the review tokens only.
   Data: view_utils/hub_summary.py. Behaviour: hub.js. Git-tracked like the rest of static/banksite/review/. */

.rv.fc-hub :is(.hub-logo, .hub-vs-side) img { background: var(--logo-plate); padding: var(--logo-plate-pad); border-radius: 6px; box-sizing: content-box; }

.rv.fc-hub ::selection { background: var(--accent-soft); color: var(--ink); }
.rv.fc-hub .sr-only:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rv.fc-hub :is([data-hub-only], [data-hub-clear], [data-hub-filters], .hub-item, .hub-card, .hub-vs, .hub-list)[hidden] { display: none; }
/* #384: no monospace on hubs: figures in the grotesk, proportional (its tabular figures set the decimal point as wide
   as a digit, which reads as monospace) */
.rv.fc-hub main :is(.num, .ref, .rv-sbar .num) {
  font-family: var(--sans); font-variant-numeric: normal; font-feature-settings: normal; letter-spacing: 0;
}

/* ---------- title block (#384: the H1 on its own row; the dek and "Updated" share the second) ---------- */
.rv.fc-hub .hub-head { padding: 10px 0 22px; }
.rv.fc-hub .hub-head h1 { margin: 8px 0 14px; text-align: left; text-wrap: balance; }
.rv.fc-hub .hub-head h1 .y { color: var(--muted); font-weight: 500; }
.rv.fc-hub .hub-head h1.rv-long { font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -.04em; }
.rv.fc-hub .hub-head-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; }
.rv.fc-hub .hub-head .rv-dek { max-width: 60ch; margin: 0; }
.rv.fc-hub .hub-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.rv.fc-hub .hub-meta div { display: flex; align-items: baseline; gap: 8px; }
.rv.fc-hub .hub-meta dt { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--muted); }
.rv.fc-hub .hub-meta dd { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--ink); }

/* ---------- filter strip (#384) ----------
   Replaces the "Who are you?" segment pills. One ruled row under an ink rule, like the key facts strip: "Show only",
   then a checkbox per data-backed filter in cells split by hairlines (each with how many entries it would leave),
   and at the end the count, "Clear filters" and the methodology link. hub.js shows the filters and applies them. */
.rv.fc-hub .hub-bar {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0 24px;
  margin: 0 0 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.rv.fc-hub .hub-only { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; }
.rv.fc-hub .hub-only-l { display: flex; align-items: center; padding: 14px 18px 14px 0; font: 600 14px/1.3 var(--sans); color: var(--muted); }
.rv.fc-hub .hub-filter {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border-left: 1px solid var(--line);
  font: 500 15px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; user-select: none; transition: background .15s, color .15s;
}
.rv.fc-hub .hub-filter:hover { background: var(--card); color: var(--ink); }
.rv.fc-hub .hub-filter input {
  appearance: none; flex: none; display: grid; place-content: center; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--ctl); border-radius: 5px; background: var(--card); cursor: pointer;
}
.rv.fc-hub .hub-filter input::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid var(--paper); border-width: 0 0 2px 2px;
  transform: rotate(-45deg); opacity: 0;
}
.rv.fc-hub .hub-filter input:checked { background: var(--ink); border-color: var(--ink); }
.rv.fc-hub .hub-filter input:checked::after { opacity: 1; }
.rv.fc-hub .hub-filter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv.fc-hub .hub-filter:has(input:checked) { color: var(--ink); font-weight: 600; }
.rv.fc-hub .hub-filter-n { font-size: 13px; font-weight: 500; color: var(--muted); }
.rv.fc-hub .hub-filter:has(input:disabled) { opacity: .45; cursor: not-allowed; background: none; }
.rv.fc-hub .hub-filter input:disabled { cursor: not-allowed; }
.rv.fc-hub .hub-bar-end { display: flex; align-items: center; gap: 18px; margin-left: auto; padding: 12px 0; }
.rv.fc-hub .hub-count { margin: 0; font-size: 14px; color: var(--muted); white-space: nowrap; }
.rv.fc-hub .hub-count .num { font-weight: 600; color: var(--ink); }
.rv.fc-hub .hub-clear {
  background: none; border: 0; padding: 0; font: 600 14px/1 var(--sans); color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
}
.rv.fc-hub .hub-clear:hover { color: var(--accent); text-decoration-color: currentColor; }
.rv.fc-hub .hub-bar .rv-method { font-size: 14px; white-space: nowrap; }
.rv.fc-hub .hub-risk {
  display: flex; align-items: center; gap: 12px; margin: -4px 0 18px; font-size: 14px; color: var(--ink-2);
}
.rv.fc-hub .hub-risk .tag, .rv.fc-hub .hub-prose .hub-risk .tag {
  flex: none; font: 700 12px/1 var(--sans); padding: 6px 8px; border-radius: 6px; background: var(--neg-soft); color: var(--neg);
}

/* listing hubs (articles, comparisons): category filter pills */
.rv.fc-hub .hub-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.rv.fc-hub .hub-tools-l { font: 600 14px/1.3 var(--sans); color: var(--muted); }
.rv.fc-hub .hub-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.rv.fc-hub .hub-segs button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 600 14px/1 var(--sans);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.rv.fc-hub .hub-segs button .num { font-size: 12px; font-weight: 500; color: var(--muted); }
.rv.fc-hub .hub-segs button:hover { border-color: var(--ink); }
.rv.fc-hub .hub-segs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rv.fc-hub .hub-segs button[aria-pressed="true"] .num { color: color-mix(in srgb, var(--paper) 72%, transparent); }

/* ---------- ranked entries (#341): one data card per provider, in the podium (top 3) and the list alike ----------
   Score, structured facts and folded sub-ratings first; "Read review" is the main action, the referral link a quiet
   ghost button (the page states the disclosure once, review/disclosure.html). Cards stand apart, not as a dense table.
   #384: the partner's short description under its name, logos centred in a box tall enough for square marks,
   expanded ratings one full-width row each with the two CTAs stacked beside them. */
.rv.fc-hub .hub-podium, .rv.fc-hub .hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.rv.fc-hub .hub-list { margin-top: 20px; }
.rv.fc-hub .hub-item {
  min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "pos head score" "pos facts facts" "pos more cta";
  gap: 18px 28px; padding: 24px 28px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.rv.fc-hub .hub-podium .hub-item:first-child { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rv.fc-hub .hub-pos { grid-area: pos; font: 800 28px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); padding-top: 6px; }
.rv.fc-hub .hub-ident { grid-area: head; display: flex; align-items: center; gap: 22px; min-width: 0; }
.rv.fc-hub .hub-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 128px; height: 72px; }
.rv.fc-hub .hub-logo img { display: block; width: auto; height: auto; max-width: 120px; max-height: 44px; object-fit: contain; }
/* optical normalising (hub.js sets the class from the image's aspect): wordmarks shorter, square marks a full square */
.rv.fc-hub .hub-logo img.is-wide { max-width: 128px; max-height: 36px; }
.rv.fc-hub .hub-logo img.is-square { max-width: 72px; max-height: 72px; }
.rv.fc-hub .hub-id { min-width: 0; }
.rv.fc-hub main .hub-name { margin: 0 0 4px; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.rv.fc-hub main .hub-name a { color: var(--ink); text-decoration: none; }
.rv.fc-hub main .hub-name a:hover { color: var(--accent); text-decoration: underline; }
.rv.fc-hub .hub-desc { margin: 0; max-width: 78ch; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.rv.fc-hub .hub-score { grid-area: score; align-self: center; justify-self: end; width: 220px; max-width: 100%; }
.rv.fc-hub .hub-facts {
  grid-area: facts; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 24px;
  margin: 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.rv.fc-hub .hub-facts div { min-width: 0; }
.rv.fc-hub .hub-facts dt { margin: 0 0 5px; font: 600 13px/1.25 var(--sans); color: var(--muted); }
.rv.fc-hub .hub-facts dd { margin: 0; font: 600 15px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.rv.fc-hub .hub-ratings { grid-area: more; align-self: center; min-width: 0; }
.rv.fc-hub .hub-ratings summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; list-style: none;
  font: 600 14px/1 var(--sans); color: var(--ink-2);
}
.rv.fc-hub .hub-ratings summary::-webkit-details-marker { display: none; }
.rv.fc-hub .hub-ratings summary::before { content: "+"; width: 1em; font: 600 17px/1 var(--sans); color: var(--muted); }
.rv.fc-hub .hub-ratings[open] summary::before { content: "−"; }
.rv.fc-hub .hub-ratings summary:hover { color: var(--ink); }
.rv.fc-hub .hub-ratings summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.rv.fc-hub .hub-ratings-n { font-weight: 500; color: var(--muted); }
/* one full-width row per sub-rating: label (one line), bar, score */
.rv.fc-hub .hub-ratings ul { list-style: none; margin: 12px 0 2px; padding: 0; display: grid; gap: 10px; }
.rv.fc-hub .hub-ratings li { display: grid; grid-template-columns: 12em minmax(0, 1fr); align-items: center; gap: 16px; font-size: 14px; color: var(--ink-2); }
.rv.fc-hub .hub-ratings li > span:first-child { white-space: nowrap; }
.rv.fc-hub .hub-ratings .rv-sbar { grid-template-columns: minmax(0, 1fr) 2.4em; align-items: center; gap: 14px; }
.rv.fc-hub .hub-ratings .rv-sbar i { order: -1; }
.rv.fc-hub main .hub-ratings .rv-sbar .num { font-size: 15px; text-align: right; }
.rv.fc-hub .hub-cta { grid-area: cta; display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-end; align-self: center; }
.rv.fc-hub main .hub-cta .rv-btn { justify-content: center; text-decoration: none; white-space: nowrap; padding: .7em 1.1em; font-size: 14px; }
.rv.fc-hub main .hub-cta .rv-btn-primary, .rv.fc-hub main .hub-cta .rv-btn-primary:hover { color: var(--accent-ink); }
/* ratings open: the two actions stack in the score's column, beside the rows */
.rv.fc-hub .hub-item:has(.hub-ratings[open]) .hub-cta { flex-direction: column; align-self: start; }
.rv.fc-hub .hub-noreview { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); white-space: nowrap; }
.rv.fc-hub .hub-empty { margin: 8px 0 24px; padding: 20px 22px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-2); }
/* the referral disclosure (#384): the short line under the list, the end note closing the page; full width */
.rv.fc-hub .rv-disc-top { max-width: none; margin: 18px 0 0; }
.rv.fc-hub .rv-disc-end, .rv.fc-hub .rv-disc-end p { max-width: none; }
.rv.fc-hub .rv-disc-end { margin-top: 56px; }

@media (max-width: 760px) {
  .rv.fc-hub .hub-podium, .rv.fc-hub .hub-list { gap: 16px; }
  .rv.fc-hub .hub-list { margin-top: 16px; }
  .rv.fc-hub .hub-item {
    grid-template-columns: 28px minmax(0, 1fr); gap: 14px 12px; padding: 18px 16px 16px;
    grid-template-areas: "pos head" "score score" "facts facts" "more more" "cta cta";
  }
  .rv.fc-hub .hub-pos { font-size: 22px; padding-top: 4px; }
  .rv.fc-hub .hub-ident { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rv.fc-hub .hub-logo { height: 56px; }
  .rv.fc-hub main .hub-name { font-size: 19px; }
  .rv.fc-hub .hub-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding-top: 14px; }
  .rv.fc-hub .hub-ratings li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rv.fc-hub .hub-score { justify-self: stretch; width: auto; }
  .rv.fc-hub .hub-cta, .rv.fc-hub .hub-item:has(.hub-ratings[open]) .hub-cta { flex-direction: row; justify-content: stretch; flex-wrap: wrap; }
  .rv.fc-hub main .hub-cta .rv-btn, .rv.fc-hub .hub-noreview { flex: 1 1 0; }
  .rv.fc-hub .hub-filter { border-left: 0; padding-inline: 0 18px; }
  .rv.fc-hub .hub-bar-end { margin-left: 0; }
  .rv.fc-hub .hub-risk { align-items: flex-start; }
}
@media (pointer: coarse) {
  .rv.fc-hub .hub-ratings summary { min-height: 44px; }
  .rv.fc-hub main .hub-cta .rv-btn, .rv.fc-hub .hub-filter { min-height: 44px; }
}

/* ---------- after the list ---------- */
.rv.fc-hub .hub-h2h, .rv.fc-hub .hub-prose { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.rv.fc-hub main .hub-h2h h2, .rv.fc-hub main .hub-prose h2, .rv.fc-hub main .hub-also h2, .rv.fc-hub main .hub-group h2 {
  margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.03em; text-wrap: balance;
}
.rv.fc-hub .hub-sub { margin: 0 0 16px; font-size: 15px; color: var(--muted); }
/* head-to-head (#384): the intro left, the tags right, centred against it however many lines they take */
.rv.fc-hub .hub-h2h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px; align-items: center; }
.rv.fc-hub .hub-h2h .hub-sub { margin: 0; }
.rv.fc-hub .hub-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rv.fc-hub main .hub-chips a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink); font-size: 14px; text-decoration: none;
}
.rv.fc-hub main .hub-chips a:hover { border-color: var(--ink); color: var(--ink); }
.rv.fc-hub .hub-prose { color: var(--ink-2); }  /* full width (#384): nothing sits beside it */
.rv.fc-hub .hub-prose p, .rv.fc-hub .hub-prose li { font-size: 16px; line-height: 1.6; }  /* #384: was 17px */
.rv.fc-hub main .hub-prose h3 { margin: 28px 0 8px; }
.rv.fc-hub .hub-prose .hub-risk { margin-top: 24px; }
/* the financial-services hub keeps its editor-built stream blocks (legacy markup) */
.rv.fc-hub .hub-stream { max-width: none; }
.rv.fc-hub .hub-stream > :not(.w-pages-deck):not(.row) { max-width: 72ch; }
.rv.fc-hub .hub-also { margin-top: 56px; }

/* ---------- listing hubs ---------- */
.rv.fc-hub .hub-listing { padding-top: 14px; border-top: 1px solid var(--ink); }
.rv.fc-hub .hub-listing > .hub-tools { margin-bottom: 22px; }
.rv.fc-hub .hub-grid, .rv.fc-hub .hub-feed, .rv.fc-hub .hub-vs-list, .rv.fc-hub .hub-loc { list-style: none; margin: 0; padding: 0; }
.rv.fc-hub .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 32px 20px; padding-top: 8px; }
.rv.fc-hub main .hub-card a { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
.rv.fc-hub .hub-card img { width: 100%; height: auto; aspect-ratio: 340 / 220; object-fit: cover; border-radius: 10px; background: var(--sunk); }
.rv.fc-hub .hub-card b { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.rv.fc-hub main .hub-card a:hover b { color: var(--accent); }
.rv.fc-hub .hub-card-text {
  font-size: 14.5px; line-height: 1.45; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* news: a dated feed */
.rv.fc-hub .hub-feed .hub-card + .hub-card { border-top: 1px solid var(--line); }
.rv.fc-hub main .hub-feed .hub-card a {
  grid-template-columns: 120px minmax(0, 1fr) 200px; grid-template-areas: "date title img" "date text img";
  gap: 6px 28px; padding: 22px 0; align-items: start;
}
.rv.fc-hub .hub-feed .hub-card .ref { grid-area: date; padding-top: 6px; font-size: 12px; }
.rv.fc-hub .hub-feed .hub-card b { grid-area: title; font-size: 21px; letter-spacing: -.015em; }
.rv.fc-hub .hub-feed .hub-card .hub-card-text { grid-area: text; max-width: 68ch; }
.rv.fc-hub .hub-feed .hub-card img { grid-area: img; grid-row: 1 / span 2; }
.rv.fc-hub .hub-listing > .hub-sub { margin-top: 24px; }
@media (max-width: 760px) {
  .rv.fc-hub main .hub-feed .hub-card a { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "date img" "title img" "text text"; column-gap: 16px; }
  .rv.fc-hub .hub-feed .hub-card img { grid-row: auto; aspect-ratio: 1; border-radius: 10px; }
  .rv.fc-hub .hub-feed .hub-card b { font-size: 18px; }
}

/* comparisons: "A vs B" rows with plan prices */
.rv.fc-hub .hub-vs-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.rv.fc-hub .hub-vs + .hub-vs { border-top: 1px solid var(--line); }
.rv.fc-hub main .hub-vs > a {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px 32px; align-items: center;
  padding: 18px 22px; color: var(--ink); text-decoration: none;
}
.rv.fc-hub main .hub-vs > a:hover b { color: var(--accent); }
.rv.fc-hub .hub-vs-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.rv.fc-hub .hub-vs-side { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.rv.fc-hub .hub-vs-side img { width: auto; height: auto; max-width: 96px; max-height: 32px; object-fit: contain; }
.rv.fc-hub .hub-vs-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.rv.fc-hub .hub-vs-side .num { font: 600 18px/1 var(--sans); }
.rv.fc-hub .hub-vs-x { font: 600 13px/1 var(--sans); color: var(--muted); }
.rv.fc-hub .hub-vs-body { display: grid; gap: 6px; }
.rv.fc-hub .hub-vs-body b { font-size: 18px; line-height: 1.25; }
@media (max-width: 760px) {
  .rv.fc-hub main .hub-vs > a { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
}
@media (max-width: 900px) {
  .rv.fc-hub .hub-h2h { grid-template-columns: minmax(0, 1fr); }
}

/* localized landing: reviews grouped by section */
.rv.fc-hub .hub-group + .hub-group { margin-top: 40px; }
.rv.fc-hub main .hub-group h2 a { color: var(--ink); text-decoration: none; }
.rv.fc-hub main .hub-group h2 a:hover { color: var(--accent); }
.rv.fc-hub .hub-loc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.rv.fc-hub .hub-loc li + li { border-top: 1px solid var(--line); }
.rv.fc-hub main .hub-loc a {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 180px; gap: 18px; align-items: center; padding: 16px 20px;
  color: var(--ink); text-decoration: none;
}
.rv.fc-hub .hub-loc-body { display: grid; gap: 4px; }
.rv.fc-hub .hub-loc-body b { font-size: 18px; }
.rv.fc-hub main .hub-loc a:hover b { color: var(--accent); }
@media (max-width: 640px) {
  .rv.fc-hub main .hub-loc a { grid-template-columns: 72px minmax(0, 1fr); }
  .rv.fc-hub .hub-loc .hub-score { grid-column: 1 / -1; max-width: none; }
}

/* ---------- motion, touch ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv.fc-hub .hub-segs button { transition: none; }
}
@media (pointer: coarse) {
  .rv.fc-hub .hub-segs button, .rv.fc-hub main .hub-chips a, .rv.fc-hub .hub-cta .rv-btn { min-height: 44px; }
}

/* page-card decks inside hub prose keep their Label-sized heading (#269; the hub h2 rule above is more specific) */
.rv.fc-hub main .hub-prose .rv-deck h2 { font: 600 14px/1.3 var(--sans); letter-spacing: -.005em; color: var(--muted); margin: 0; }