/* Category hubs (site redesign): "Who are you?" segment-first ranking + 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/. */

/* hub tokens: --hub-plate sits behind third-party logos. Most logos are dark artwork on transparency, so in the
   dark theme they get the light paper plate (#f2f0e9 = light --paper) instead of vanishing on --card. */
.rv.fc-hub { --hub-plate: transparent; --hub-plate-pad: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rv.fc-hub { --hub-plate: #f2f0e9; --hub-plate-pad: 4px 8px; } }
:root[data-theme="dark"] .rv.fc-hub { --hub-plate: #f2f0e9; --hub-plate-pad: 4px 8px; }
.rv.fc-hub :is(.hub-logo, .hub-vs-side) img { background: var(--hub-plate); padding: var(--hub-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-tools], [data-hub-filters], .hub-item, .hub-card, .hub-vs, .hub-list, .hub-rule p)[hidden] { display: none; }

/* ---------- title block ---------- */
.rv.fc-hub .hub-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end;
  padding: 26px 0 28px;
}
.rv.fc-hub .hub-head h1 { margin: 14px 0 16px; 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 .rv-dek { max-width: 60ch; }
.rv.fc-hub .hub-meta { display: flex; gap: 28px; margin: 0 0 6px; }
.rv.fc-hub .hub-meta dt { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rv.fc-hub .hub-meta dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); text-align: right; }
.rv.fc-hub .hub-meta div:first-child dd { text-align: left; }

/* ---------- segment / 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 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; 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); }

/* ranking rule: one line, always stated */
.rv.fc-hub .hub-rule {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  padding: 12px 0 14px; margin-bottom: 18px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
.rv.fc-hub .hub-rule p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rv.fc-hub .hub-rule-n { color: var(--muted); }
.rv.fc-hub .hub-rule .rv-method { font-size: 14px; }
.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: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px;
  background: var(--neg-soft); color: var(--neg);
}

/* ---------- 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. */
.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: 600 28px/1 var(--mono); letter-spacing: -.05em; color: var(--ink); padding-top: 6px; }
.rv.fc-hub .hub-head { grid-area: head; display: flex; align-items: center; gap: 18px; min-width: 0; }
.rv.fc-hub .hub-logo { flex: none; display: flex; align-items: center; width: 120px; height: 44px; }
.rv.fc-hub .hub-logo img { display: block; width: auto; height: auto; max-width: 104px; max-height: 32px; object-fit: contain; }
/* optical normalising (hub.js sets the class from the image's aspect): wordmarks shorter, square marks fuller */
.rv.fc-hub .hub-logo img.is-wide { max-width: 120px; max-height: 28px; }
.rv.fc-hub .hub-logo img.is-square { max-height: 40px; }
.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-why { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.rv.fc-hub .hub-why .num { font-size: .95em; font-weight: 600; color: var(--ink); }
.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 { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.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-facts dd.num { font-family: var(--mono); letter-spacing: -.02em; }
.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: "+"; font: 600 15px/1 var(--mono); width: 1em; 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 ul {
  list-style: none; margin: 10px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 28px;
}
.rv.fc-hub .hub-ratings li { display: grid; grid-template-columns: minmax(0, 1fr) 130px; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.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); }
.rv.fc-hub .hub-noreview { display: inline-flex; align-items: center; justify-content: center; 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); }

@media (max-width: 900px) {
  .rv.fc-hub .hub-head { grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; }
  .rv.fc-hub .hub-meta dd, .rv.fc-hub .hub-meta div:first-child dd { text-align: left; }
}
@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-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rv.fc-hub .hub-logo { width: auto; height: 36px; }
  .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) 110px; }
  .rv.fc-hub .hub-score { justify-self: stretch; width: auto; }
  .rv.fc-hub .hub-cta { 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-rule { flex-direction: column; }
  .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 { 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); }
.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 { max-width: 72ch; color: var(--ink-2); }
.rv.fc-hub .hub-prose p, .rv.fc-hub .hub-prose li { font-size: 17px; line-height: 1.6; }
.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(--mono); letter-spacing: -.03em; }
.rv.fc-hub .hub-vs-x { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; 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; }
}

/* 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; }
}