/* Compare page, side-by-side table: fit the phone screen, no sideways scroll.
   Each rule label sits on its own line, the firms sit side by side under it. */
@media(max-width:760px){
.ctable-wrap[aria-label^="Side-by-side"]{overflow-x:visible!important;padding-right:0!important}
.ctable-wrap[aria-label^="Side-by-side"] .ctable{display:block!important;min-width:0!important;width:100%!important;table-layout:auto}
.ctable-wrap[aria-label^="Side-by-side"] thead,.ctable-wrap[aria-label^="Side-by-side"] tbody{display:block!important}
.ctable-wrap[aria-label^="Side-by-side"] tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line)}
.ctable-wrap[aria-label^="Side-by-side"] tr:has(>:nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr))}
.ctable-wrap[aria-label^="Side-by-side"] thead th:first-child{display:none!important}
.ctable-wrap[aria-label^="Side-by-side"] thead th{font-size:15px!important;line-height:1.25;padding:12px 10px!important;overflow-wrap:break-word}
.ctable-wrap[aria-label^="Side-by-side"] tbody th[scope=row]{grid-column:1/-1;width:auto!important;white-space:normal!important;padding:12px 10px 0!important;border-bottom:0!important;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase}
.ctable-wrap[aria-label^="Side-by-side"] tbody td{padding:5px 10px 12px!important;border-bottom:0!important;font-size:14px!important;overflow-wrap:break-word;word-break:normal;min-width:0}
.ctable-wrap[aria-label^="Side-by-side"] tbody td,.ctable-wrap[aria-label^="Side-by-side"] tbody td *{white-space:normal!important;max-width:100%}
.ctable-wrap[aria-label^="Side-by-side"] tbody td .tpl{display:block!important;border-radius:0}
.ctable-wrap[aria-label^="Side-by-side"] td .btn{width:100%;justify-content:center}
}

/* rule: logos and firm names are always centred on comparisons */
#compare thead th{text-align:center!important}
#compare thead th>div{display:flex;justify-content:center}
#compare thead th a{display:block;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:none}
#compare thead th a+br+span,#compare thead th span{display:block;text-align:center}
@media(max-width:760px){
.ctable-wrap[aria-label^="Side-by-side"] thead th{padding:12px 4px!important}
.ctable-wrap[aria-label^="Side-by-side"] thead th a{font-size:13.5px!important;letter-spacing:-.01em}
#vsList .card{flex-direction:column!important;justify-content:center!important;text-align:center;gap:8px}
}