/* v22 · the comparison pages */
.cmp22-hero .container { display: grid; justify-items: start; gap: 10px; }
.cmp22-kicker { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FF8A9B; }
.cmp22-h { margin: 0; }
.cmp22-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; color: rgba(255, 255, 255, .7); font-size: 15px; }
.cmp22-big { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 18px; background: rgba(255, 255, 255, .08); font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700; color: #fff; }
.cmp22-big b { font-size: 40px; line-height: 1; letter-spacing: -.04em; }
.cmp22-big b:first-of-type { color: #FF6B81; }
.cmp22-big i { font-style: normal; font-size: 28px; opacity: .4; }
.cmp22-big small { font-size: 24px; }
.cmp22-content .vs20 { margin-bottom: 40px; }
a.vs20-btn { display: inline-flex; align-items: center; text-decoration: none; }
.cmp22-h2 { margin: 0 auto 16px; max-width: 1120px; font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; color: #0F1923; }
.cmp22-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1120px; margin: 0 auto 48px; }
.cmp22-card { position: relative; display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -24px rgba(15, 25, 35, .45); color: #0F1923; text-decoration: none; transition: translate .25s, box-shadow .25s; }
.cmp22-card:hover { translate: 0 -3px; box-shadow: 0 24px 40px -26px rgba(15, 25, 35, .5); }
.cmp22-card[aria-current] { box-shadow: 0 0 0 2px #E31837, 0 14px 30px -24px rgba(15, 25, 35, .45); }
.cmp22-flags { display: flex; align-items: center; gap: 8px; font-size: 26px; }
.cmp22-flags i { font-style: normal; font-size: 12px; font-weight: 700; color: #9CA3AF; }
.cmp22-card b { font-size: 16px; }
.cmp22-sc { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700; font-size: 20px; color: #E31837; }
.cmp22-card svg { position: absolute; right: 16px; bottom: 18px; width: 20px; height: 20px; color: #9CA3AF; transition: translate .25s, color .25s; }
.cmp22-card:hover svg { translate: 4px 0; color: #E31837; }
@media (max-width: 900px) {
    .cmp22-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cmp22-big b { font-size: 32px; }
}