/* Page shell for the reviewer network: header, footer, grid, skip link.
   The content vocabulary (rv-plate, rv-table, rv-stats, rv-bars...) lives in base.css and is
   shared with the design kit; only the chrome is here. Logical properties throughout, because
   seven of the twenty sites are right-to-left and a physical padding breaks them silently. */
.rv-skip{position:absolute;inset-inline-start:-9999px}
.rv-skip:focus{inset-inline-start:8px;top:8px;background:var(--rv-surface);padding:8px;z-index:9}
.rv-head{border-block-end:1px solid var(--rv-line);background:var(--rv-surface);
  position:sticky;top:0;z-index:5}
.rv-headrow{display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding-block:10px;flex-wrap:wrap}
.rv-brand{font-weight:700;font-size:17px;text-decoration:none;color:var(--rv-ink);
  letter-spacing:-.01em}
.rv-nav{display:flex;gap:14px;flex-wrap:wrap}
.rv-nav a{font-size:14px;color:var(--rv-ink2);text-decoration:none}
.rv-nav a:hover{text-decoration:underline}
.rv-foot{border-block-start:1px solid var(--rv-line);margin-block-start:28px;
  padding-block:18px;background:var(--rv-sunk)}
.rv-foot nav{display:flex;gap:12px;flex-wrap:wrap;margin-block:8px}
.rv-byline{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;font-size:14px;
  padding-block:6px;border-block-end:1px solid var(--rv-line);margin-block-end:10px}
.rv-byline-p{white-space:nowrap}
h1{font-size:clamp(24px,3.2vw,34px);line-height:1.2;margin-block:12px 10px;letter-spacing:-.01em}
h2{font-size:21px;line-height:1.25;margin-block:18px 8px}
h3{font-size:17px;margin-block:14px 6px}
main{padding-block-end:10px}
/* The table is the one element allowed the full width; prose stays in the readable column. */
.rv-tablewrap{max-width:1240px}
@media (max-width:720px){.rv-headrow{gap:8px}.rv-nav{gap:10px}}
/* Density pass. 🚨 Measured, not guessed: with the kit's own rhythm the first screen of a
   broker card carried 15 numbers against a contract of 30, because the heading, the evidence
   strip and the byline together ate 300px before the first figure. The contract is the product
   here - a reader who has to scroll to see a number is reading an ordinary review site. */
body{font-size:16px}
.rv-prose,.rv-sect>p,.rv-sect>ul,.rv-sect>ol,.rv-prose p,.rv-prose li{font-size:16px}
.rv-sm{font-size:16px}
.rv-byline .rv-dim,.rv-evid{font-size:13px}
.rv h1{font-size:clamp(23px,2.2vw,30px);line-height:1.15;margin-block:8px 6px}
.rv h2{font-size:20px;line-height:1.2;margin-block:14px 6px}
.rv h3{font-size:16px;margin-block:10px 4px}
.rv-sect{margin-block:0 14px}
.rv-head{position:static}
.rv-headrow{padding-block:7px}
.rv-byline{padding-block:3px;margin-block-end:6px;font-size:13px;gap:10px}
.rv-evid{font-size:13px;padding-block:4px}
/* The facts plate and the stat row are the densest things on the page: give them more columns
   so eight fields fit in two rows instead of four. */
.rv-plate{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.rv-stats{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.rv-bars{margin-block:6px}
.rv-bar{padding-block:2px}
.rv-grid2{gap:14px}
.rv-card{padding:12px 14px}
/* 🚨 Caught by a screenshot, not by a metric: the evidence strip stacked into a 170px box and
   pushed the first figure of a broker card below the fold, while every number the contract
   counts stayed technically present. One line, one row. */
.rv-evid{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:5px 0;
  border:0;border-block-end:1px solid var(--rv-line);border-radius:0;background:none;
  font-size:13px;line-height:1.35}
.rv-evid>*{display:inline}
.rv-evid-meta{color:var(--rv-dim);margin-inline-start:auto}
/* An empty grid cell of the facts plate showed as a grey block, which reads as a broken tile. */
.rv-plate>div:empty{display:none}
.rv-sect{margin-block:0 10px}
.rv-sect>h2:first-child{margin-block-start:4px}
.rv-tablewrap{margin-block:4px 0}
.rv-tcontract{max-width:none}
.rv-tcontract-line{display:inline-block;margin-inline-end:18px}
.rv-plate{margin-block:4px 0}
/* Eight fields in four columns fill two whole rows. At six columns the second row was two
   fields and four empty cells, and the plate's own background made them read as broken tiles. */
@media (min-width:900px){.rv-plate{grid-template-columns:repeat(4,1fr)}}
.rv-badge-score{font-size:28px;padding:6px 12px;line-height:1.1}
.rv-sect>p{margin-block:4px}
.rv-pill{vertical-align:middle}
.rv-face{width:24px;height:24px;border-radius:50%;object-fit:cover;vertical-align:-6px;
  margin-inline-end:5px;border:1px solid var(--rv-line)}
.rv-person{display:flex;align-items:center;gap:14px}
.rv-portrait{width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:1px solid var(--rv-line)}

.rv-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 10px}
.rv-facetrow{display:flex;flex-wrap:wrap;gap:6px}
.rv-facet{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--rv-dim)}
.rv-facet select{font:inherit;font-size:.84rem;padding:5px 9px;border-radius:8px;
  border:1px solid var(--rv-line);background:var(--rv-sunk);color:var(--rv-ink)}
.rv-facet-search input{font:inherit;font-size:.84rem;padding:6px 11px;border-radius:8px;
  border:1px solid var(--rv-line);background:var(--rv-sunk);color:var(--rv-ink);min-width:150px}
.rv .rv-count{margin:0 0 14px;font-size:.8rem;color:var(--rv-dim);
  font-family:var(--rv-ff-m);font-variant-numeric:tabular-nums}
.rv-table th[data-sort]{cursor:pointer;user-select:none}
.rv-table th[data-sort]:hover,.rv-table th[data-sort]:focus-visible{color:var(--rv-ink)}
.rv-sortmark{display:inline-block;width:0;height:0;margin-inline-start:5px;vertical-align:middle;
  border-inline:4px solid transparent;border-top:5px solid currentColor;opacity:.35}
th[aria-sort="ascending"] .rv-sortmark{transform:rotate(180deg);opacity:.9}
th[aria-sort="descending"] .rv-sortmark{opacity:.9}
.rv-cellname{display:inline-flex;align-items:center;gap:8px;min-width:0}
.rv-logo{flex:0 0 auto;width:28px;height:28px;border-radius:7px;object-fit:contain;
  background:var(--rv-sunk)}
.rv-cellbar{display:block;height:4px;margin-top:5px;border-radius:999px;background:var(--rv-sunk);
  overflow:hidden;max-width:120px}
.rv-cellbar>i{display:block;height:100%;background:var(--rv-accent)}
.rv-cellsub{display:block;margin-top:3px;font-size:.72rem;color:var(--rv-dim);line-height:1.3}
.rv-chip-s{display:inline-block;margin:1px 4px 1px 0;padding:1px 7px;border-radius:999px;
  border:1px solid var(--rv-line);font-size:.72rem;font-family:var(--rv-ff-m);
  white-space:nowrap;background:var(--rv-bg)}
.rv-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv-table tr[hidden]{display:none}
.rv .rv-more{display:flex;justify-content:center;margin:22px 0 0}
.rv-more button{appearance:none;font:inherit;font-weight:600;cursor:pointer;padding:9px 18px;
  border-radius:var(--rv-radius-sm);border:1px solid var(--rv-line2);background:var(--rv-surface);
  color:var(--rv-ink)}
.rv-more button:hover{border-color:var(--rv-accent);color:var(--rv-accent)}

/* A data table is wider than a line of prose, so on a wide screen it leaves the text column
   instead of growing a scrollbar. Measured first: the table wants 1218px while the column is
   capped at 1186px, so the bar appeared over 32px. Below 1180px of viewport the column is the
   limit and horizontal scrolling inside the wrapper is the honest answer. */
/* 🚨 The break-out used to be done with negative margins (width:100vw + margin:calc(50% - 50vw)).
   It measured fine and looked wrong: inside the tab panel the 50% resolved against a different
   box, so the table sat left of everything else on the page. The page container is widened
   instead — the kit already keeps prose in its own 880px column, so nothing else stretches. */
@media (min-width:1180px){
  /* The page container opens up only where a big table lives; prose keeps its own column. */
  body[data-wide="1"]{--rv-wrap:1560px}
  /* 🚨 SITE_CSS pins .rv-tablewrap to 1240px, so the widened container had a table that stopped
     short of the page's right edge while every other block reached it. Found by walking the
     parent chain, not by reading the stylesheet. */
  .rv-tablewrap-wide{max-width:none}
  /* 🚨 The big table carries its own density. Checked across all twenty sites: five of them
     use an airier typography, and inheriting it left 20–160px of overflow at 1440px — visible
     only when every site is measured, not just the pilot. */
  .rv-tablewrap-wide .rv-table{font-size:.86rem}
  .rv-tablewrap-wide .rv-table th,
  .rv-tablewrap-wide .rv-table td{padding:8px 10px}
  .rv-tablewrap-wide .rv-cellsub{font-size:.7rem}
  /* A long heading wraps instead of widening the column — Malay headings needed 16px more
     than the screen while nowrap was in force. */
  .rv-tablewrap-wide .rv-table th{white-space:normal;line-height:1.25}
}
/* Columns declare the width from which they are worth showing. Below it they are dropped
   rather than scrolled: at 768px nine columns need 1116px and no layout can fix that, while
   the figures they carry stay on the broker's own card. */
@media (max-width:1179px){.rv-table [data-from="1180"]{display:none}}
@media (max-width:1023px){.rv-table [data-from="1024"]{display:none}}
@media (max-width:899px){.rv-table [data-from="900"]{display:none}}
/* Between the phone stack and the wide break-out the column is the limit, so the table tightens
   itself. Spanish headings on MX and CO still ran 23–39px over at 1024px without this. */
@media (min-width:561px) and (max-width:1179px){
  .rv-table{font-size:.82rem}
  .rv-table th,.rv-table td{padding:7px 9px;white-space:normal}
  .rv-cellsub{font-size:.68rem}
}

/* Long verdicts must wrap inside their cell rather than push the table wider. */
.rv-table td .rv-pill{white-space:normal}
.rv-table td{overflow-wrap:anywhere}
/* Below 560px no layout fits nine columns, whichever density the site was given, so every
   table becomes a stack of labelled rows. Measured: the Arabic site still needed 282px more
   than the screen while this depended on the site's density setting rather than on the width. */
@media (max-width:560px){
  /* 🚨 overflow-x:visible here pushed the whole PAGE into horizontal scrolling — worse than a
     scrollbar inside the table. The container keeps its own overflow; the cells are made to
     fit instead. */
  .rv-tablewrap{overflow-x:auto;border-inline:0;border-radius:0}
  .rv-table{min-width:0}
  .rv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rv-table tr{display:block;border:1px solid var(--rv-line);border-radius:var(--rv-radius);
    margin:0 0 9px;padding:3px 0}
  .rv-table td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border-bottom:0;padding:5px 11px;min-width:0}
  .rv-table td>*{min-width:0}
  .rv-table td .rv-cellname{flex-wrap:wrap;row-gap:2px}
  .rv-table td .rv-chip-s{white-space:normal}
  .rv-table td:empty{display:none}
  .rv-table td::before{content:attr(data-label);color:var(--rv-dim);font-size:.72rem;
    font-family:var(--rv-ff-m);text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto}
  .rv-table .rv-cellbar{max-width:90px}
  .rv-table .rv-cellname{justify-content:flex-end;text-align:end}
}

/* Measured with scripts/check_spacing.py: the lead, its chips and the fact tiles were running
   into each other at -2 and -3px. The first screen now has a declared rhythm instead of the
   default margins of whatever sits next to it. */
.rv .rv-lead{font-size:1.06rem;line-height:1.55;margin:18px 0 26px;max-width:62ch}
.rv .rv-leadlinks{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;font-size:.84rem;
  color:var(--rv-dim)}
.rv .rv-eyebrow{margin:0 0 18px;font-family:var(--rv-ff-m);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rv-dim)}
.rv-choice{border:1px solid var(--rv-accent);border-radius:var(--rv-radius);
  padding:18px 20px;margin:0 0 26px;background:var(--rv-sunk)}
.rv-choice-h{margin:0 0 16px;font-size:.95rem;letter-spacing:.01em}
.rv-choice-grid{display:grid;gap:16px 26px;align-items:center}
.rv-choice-who{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rv-choice-n{font-size:1.1rem;font-weight:700;font-family:var(--rv-ff-d)}
.rv-choice-calc{white-space:nowrap}
.rv-logo-lg{width:40px;height:40px;border-radius:9px}
.rv-choice-l{margin:0;padding-inline-start:16px;font-size:.85rem;line-height:1.45;
  columns:2;column-gap:20px}
.rv-choice-l li{margin:1px 0;break-inside:avoid}
.rv-choice-cta{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.rv .rv-choice-note{max-width:86ch;margin:16px 0 0;font-size:.74rem;line-height:1.4}
@media (min-width:900px){
  .rv-choice-grid{grid-template-columns:auto minmax(0,1fr) auto}
  .rv-choice-l{columns:1}
  .rv-choice-cta{justify-content:end}
}
.rv-badge-sm{font-size:1rem;padding:1px 8px}
.rv-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--rv-line);margin:0 0 12px}
.rv-tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:8px 12px;font:inherit;font-weight:600;color:var(--rv-dim);cursor:pointer}
.rv-tabs button[aria-selected="true"]{color:var(--rv-ink);border-bottom-color:var(--rv-accent)}
.rv-tabn{font-family:var(--rv-ff-m);font-size:.76rem;font-weight:400}
.rv-needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:18px;
  margin:0 0 22px}
.rv-need{border:1px solid var(--rv-line);border-radius:var(--rv-radius);padding:11px 13px}
.rv-need-n{display:flex;align-items:center;gap:7px;margin:0 0 3px;font-weight:600}
.rv-need p{margin:0}
.rv-verdicts{display:grid;gap:7px;margin:10px 0}
.rv-verdict{margin:0;padding:9px 12px;border-inline-start:3px solid var(--rv-line);
  background:var(--rv-sunk);border-radius:0 var(--rv-radius) var(--rv-radius) 0;font-size:.92rem}
.rv-verdict-ok{border-inline-start-color:var(--rv-ok,#1f9d55)}
.rv-verdict-no{border-inline-start-color:var(--rv-warn,#c2410c)}
.rv .rv-changed{margin:.4rem 0 .9rem;font-size:.86rem;color:var(--rv-dim);max-width:74ch}
.rv-log{margin:0;padding-inline-start:18px}
.rv-side{display:grid;gap:12px;align-content:start}
.rv-side-box{border:1px solid var(--rv-line);border-radius:var(--rv-radius);padding:12px 14px}
.rv-side-k{margin:0 0 7px;font-family:var(--rv-ff-m);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rv-dim)}
.rv-side-box ul{margin:0;padding-inline-start:16px;font-size:.88rem;line-height:1.75}
.rv-side-dl div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid var(--rv-line);font-size:.86rem}
.rv-side-dl div:last-child{border-bottom:0}
.rv-side-dl dt{color:var(--rv-dim)}
.rv-side-dl dd{margin:0;font-family:var(--rv-ff-m);text-align:end}
.rv-side-cta{display:block;text-align:center}
@media (min-width:1000px){
  .rv-withside{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:26px;align-items:start}
  .rv-side{position:sticky;top:76px}
}

/* The evidence strip, the byline and the eyebrow are three separate statements, not one block. */
.rv .rv-evid{margin-bottom:18px}
.rv .rv-byline{margin-bottom:26px}
.rv .rv-tabs{margin-bottom:20px}
.rv .rv-sect>.rv-tablewrap,.rv .rv-sect .rv-panes{margin-top:20px}
.rv .rv-sm.rv-dim+.rv-tablewrap{margin-top:22px}
.rv .rv-cols+p.rv-sm,.rv .rv-needs+p.rv-sm{margin-top:20px}
/* A header that leaves the screen takes the brand and the navigation with it. */
.rv-head{position:sticky;top:0;z-index:40;background:var(--rv-bg);
  border-bottom:1px solid var(--rv-line);backdrop-filter:saturate(180%) blur(6px)}
@supports not (backdrop-filter:blur(6px)){.rv-head{background:var(--rv-surface)}}