/* Utility classes the comparator JSX expects, scoped to .cmp so they cannot
   leak into the rest of the site. Only the 26 utilities actually used are
   defined here — this is not a Tailwind subset, it is the exact set. */

.cmp .flex{display:flex}
.cmp .grid{display:grid}
.cmp .flex-wrap{flex-wrap:wrap}
.cmp .items-center{align-items:center}
.cmp .items-start{align-items:flex-start}
.cmp .justify-between{justify-content:space-between}
.cmp .justify-center{justify-content:center}
.cmp .w-full{width:100%}
.cmp .mx-auto{margin-left:auto;margin-right:auto}
.cmp .max-w-6xl{max-width:100%}

.cmp .gap-1{gap:4px}
.cmp .gap-1\.5{gap:6px}
.cmp .gap-2{gap:8px}
.cmp .gap-2\.5{gap:10px}
.cmp .gap-5{gap:20px}
.cmp .gap-x-3{column-gap:12px}
.cmp .gap-y-1{row-gap:4px}

.cmp .mt-1{margin-top:4px}
.cmp .mt-2\.5{margin-top:10px}
.cmp .mt-4{margin-top:16px}
.cmp .mb-1{margin-bottom:4px}
.cmp .mb-1\.5{margin-bottom:6px}
.cmp .mb-2\.5{margin-bottom:10px}
.cmp .mb-3{margin-bottom:12px}

.cmp .space-y-4>*+*{margin-top:16px}
.cmp .space-y-5>*+*{margin-top:20px}

/* The comparator draws its own panels and controls, so it opts out of the
   article link styling that applies everywhere else. */
.cmp button{font-family:inherit}
.cmp input{font-family:inherit}

/* The tool is wider than the 760px article measure; let it use the viewport. */
.cmp-wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}