/* /compare · page scoped CSS (prefix pg-compare-). Spacing and the group rows only; every block is shared in css/components.css. */

.pg-compare-hero .cy-phero__lead + .pg-compare-jumps{margin-top:32px}

/* the three groups: the hub's line (kicker + H3) directly above its three comparisons, so each heading sits on its content */
.pg-compare-groups{display:grid;row-gap:84px}
.pg-compare-group{display:grid;row-gap:28px}
.pg-compare-group__head{display:grid;row-gap:16px}
.pg-compare-group__head .cy-h3{max-width:26em}
@media (max-width:899px){.pg-compare-groups{row-gap:56px}}
@media (min-width:768px){.pg-compare-list{--cy-cols:3}}
@media (max-width:767px){.pg-compare-list{--cy-cols:1}}
.pg-compare-callout{margin-top:72px}

/* before you buy: the answer card sits right, as the compare pages' figures */
.pg-compare-fig{max-width:560px}
@media (min-width:900px){.pg-compare-fig{justify-self:end;width:100%}}