/* Extracted repeated page-family styles: xroad-consumers-overview.css */

/* xroad-consumers-overview */
 .wrap{max-width:1060px;margin:0 auto;padding:60px 28px 80px;}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:700;color:var(--purple-vivid);}
h1{font-size:38px;line-height:1.1;margin:10px 0 14px;font-weight:800;letter-spacing:-.02em;}
.sub{font-size:15px;color:var(--text-mid);max-width:800px;}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:32px 0 28px;}
.card{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.card .k{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-weight:600;}
.card .v{font-size:26px;font-weight:800;margin-top:6px;color:var(--purple);font-variant-numeric:tabular-nums;}
table#t{width:100%;border-collapse:collapse;font-size:13.5px;}
#t thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-weight:700;padding:10px 12px;border-bottom:2px solid var(--line);cursor:pointer;white-space:nowrap;}
#t thead th.r{text-align:right;} #t thead th:hover{color:var(--purple);} #t thead .arr{opacity:.4;font-size:9px;margin-left:3px;}
#t tbody tr{border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;}
#t tbody tr:hover{background:var(--purple-tint);}
#t td{padding:11px 12px;vertical-align:middle;font-variant-numeric:tabular-nums;} #t td.r{text-align:right;}
.rank{color:var(--text-dim);font-weight:600;} .cname{font-weight:700;color:var(--purple);} .ex{color:var(--text-mid);font-size:12.5px;}
.barwrap{display:flex;align-items:center;gap:9px;justify-content:flex-end;} .bar{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--purple),var(--purple-vivid));} .barnum{font-weight:700;white-space:nowrap;}
.lowsucc{color:var(--sunset);font-weight:700;}
.note{margin-top:24px;font-size:12px;color:var(--text-dim);line-height:1.6;max-width:880px;}
.back{display:inline-block;margin-top:34px;font-size:13px;color:var(--purple-vivid);text-decoration:none;font-weight:600;} .back:hover{text-decoration:underline;}
#xr-lang a{padding:6px 10px;border-radius:4px;color:var(--purple);text-decoration:none;} #xr-lang .xr-on{padding:6px 10px;border-radius:4px;background:var(--purple);color:#fff;}
@media(max-width:760px){.cards{grid-template-columns:repeat(2,1fr);}h1{font-size:30px;}.ex{display:none;}}