/*
 * Comparison hub and detail pages (compare.php, template-parts/compare/).
 * Kept in step with assets/scss/compare.scss by hand: edit both identically.
 *
 * Every value is the house value from the home, product and pricing pages:
 * Inter; h1 64px, h2 52px (typography.css tokens); lead 20px/18px in #475467;
 * uppercase pill eyebrow; .vs-cta gradient button; white cards with a 1rem radius;
 * sections 96px apart on desktop. The FAQ uses the pricing page's FAQ and pricing.css.
 */

.vs-compare {
    --vsc-primary: #6366f1;
    --vsc-primary-ink: #4f46e5;
    --vsc-ink: #0f172a;
    --vsc-text: #475467;
    --vsc-muted: #6b7280;
    --vsc-line: #e5e7eb;
    --vsc-line-soft: #eef0f4;
    --vsc-soft: #f9fafb;
    --vsc-tint: #eef2ff;
    --vsc-gradient: linear-gradient(90deg, #4f46e5, #7c3aed);
    overflow-x: clip;
    background: #fff;
    color: var(--vsc-ink);
    font-family: 'Inter', sans-serif;
}
.vs-compare *, .vs-compare *::before, .vs-compare *::after { box-sizing: border-box; }
:where(.vs-compare) :is(h1, h2, h3, p, figure) { margin-top: 0; }
.vs-compare img { max-width: 100%; }

/* Same width and side padding as the navbar row, so content starts under the logo. */
.vs-compare__inner { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .vs-compare__inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .vs-compare__inner { padding-inline: 2rem; } }

/* ---------- Sections ---------- */

.vs-compare-band { padding: 4rem 0; background: #fff; }
.vs-compare-band--soft { border-top: 1px solid var(--vsc-line-soft); border-bottom: 1px solid var(--vsc-line-soft); background: var(--vsc-soft); }
@media (min-width: 640px) { .vs-compare-band { padding: 5rem 0; } }
@media (min-width: 1024px) { .vs-compare-band { padding: 6rem 0; } }

.vs-compare__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 1.25rem; padding: .5rem 1rem; border: 1px solid #e0e7ff; border-radius: 999px; background: var(--vsc-tint); color: var(--vsc-primary-ink); font-size: .75rem; font-weight: 700; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; }

.vs-compare__section-heading { max-width: 56rem; margin: 0 auto 3rem; text-align: center; }
.vs-compare__section-heading h2 { margin: 0 auto 1rem; color: var(--vsc-ink); font-size: var(--vs-type-section, clamp(2rem, 4vw, 3.25rem)); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.vs-compare__section-heading > p:last-child { max-width: 48rem; margin: 0 auto; color: var(--vsc-text); font-size: 1.125rem; font-weight: 400; line-height: 1.6; }
@media (min-width: 640px) { .vs-compare__section-heading > p:last-child { font-size: 1.25rem; } }

.vs-compare-link { display: inline-flex; align-items: center; gap: .375rem; color: var(--vsc-primary-ink); font-weight: 600; text-decoration: none; }
.vs-compare-link span { transition: transform .15s; }
.vs-compare-link:hover span { transform: translateX(3px); }
.vs-compare-link:focus-visible, .vs-compare-inline-link:focus-visible { border-radius: 4px; outline: 3px solid #a5b4fc; outline-offset: 3px; }
.vs-compare-inline-link { color: var(--vsc-primary); font-weight: 600; text-decoration: none; }
.vs-compare-inline-link:hover { text-decoration: underline; }
.vs-compare-center { margin: 2.5rem 0 0; text-align: center; }
.vs-compare-note { margin: 2.5rem 0 0; color: var(--vsc-muted); font-size: .875rem; line-height: 1.6; text-align: center; }

/* ---------- Buttons (the site's .vs-cta) ---------- */

.vs-compare .vs-cta { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: 12px; background: var(--vsc-gradient); color: #fff; font-size: 1rem; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .45); transition: transform .3s, box-shadow .3s; }
.vs-compare .vs-cta:hover { background: linear-gradient(90deg, #4338ca, #6d28d9); color: #fff; box-shadow: 0 14px 24px -10px rgba(79, 70, 229, .55); transform: translateY(-2px); }
.vs-compare .vs-cta:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.vs-compare .vs-cta--outline { border-color: #c7d2fe; background: #fff; color: #4338ca; box-shadow: none; }
.vs-compare .vs-cta--outline:hover { border-color: #a5b4fc; background: var(--vsc-tint); color: #3730a3; box-shadow: none; }

/* ---------- Hero (product page hero: centred copy, framed product image) ---------- */

.vs-compare-hero { position: relative; overflow: hidden; padding: 7.5rem 0 5.5rem; background: linear-gradient(135deg, #f4f3ff 0%, #fff 42%, #eef2ff 100%); }
.vs-compare-hero::before, .vs-compare-hero::after { position: absolute; border-radius: 50%; content: ""; filter: blur(10px); pointer-events: none; }
.vs-compare-hero::before { top: 6rem; left: -8rem; width: 24rem; height: 24rem; background: rgba(167, 139, 250, .13); }
.vs-compare-hero::after { right: -8rem; bottom: 2rem; width: 28rem; height: 28rem; background: rgba(99, 102, 241, .12); }
.vs-compare-hero__inner { position: relative; z-index: 1; text-align: center; }
.vs-compare-hero__title { margin: 0; }
.vs-compare-hero__title .vs-compare__eyebrow { letter-spacing: .12em; }
.vs-compare-hero__headline { display: block; max-width: 56rem; margin: 0 auto; color: var(--vsc-ink); font-size: var(--vs-type-hero, clamp(2.5rem, 5vw, 4rem)); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.vs-compare-hero__lead { max-width: 48rem; margin: 1.5rem auto 0; color: var(--vsc-text); font-size: 1.125rem; font-weight: 400; line-height: 1.6; text-wrap: pretty; }
@media (min-width: 640px) { .vs-compare-hero__lead { font-size: 1.25rem; } }
.vs-compare-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.vs-compare-hero__note { margin: 1rem 0 0; color: var(--vsc-muted); font-size: .875rem; line-height: 1.5; }
.vs-compare-frame { margin: 0; padding: 10px; border: 1px solid rgba(99, 102, 241, .18); border-radius: 1.25rem; background: rgba(255, 255, 255, .75); box-shadow: 0 28px 70px rgba(54, 47, 120, .16); }
.vs-compare-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: .9rem; object-fit: cover; object-position: center top; }
/* After the frame base: the frame's margin: 0 must not reset the hero's centring. */
.vs-compare-hero__visual { width: min(100%, 64rem); margin: 3.25rem auto 0; }

@media (max-width: 639px) {
    .vs-compare-hero { padding: 6.5rem 0 4rem; }
    .vs-compare-hero__actions { flex-direction: column; }
    .vs-compare-hero__actions .vs-cta { width: 100%; }
    .vs-compare-hero__visual { margin-top: 2.5rem; }
    .vs-compare-frame { padding: 5px; border-radius: 1rem; }
    .vs-compare-frame img { border-radius: .7rem; }
}

/* ---------- Cards (verdict, workday steps, switching steps) ---------- */

.vs-compare-cards { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .vs-compare-cards--four, .vs-compare-cards--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .vs-compare-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vs-compare-cards--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vs-compare-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vs-compare-cards--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.vs-compare-card { display: flex; min-width: 0; flex-direction: column; padding: 1.75rem 1.5rem; border: 1px solid #e5e4f5; border-radius: 1rem; background: linear-gradient(145deg, #fff, #fbfaff); box-shadow: 0 12px 35px rgba(69, 58, 130, .06); }
.vs-compare-card__index { display: grid; width: 44px; height: 44px; flex: none; place-items: center; margin-bottom: 1.25rem; border-radius: .75rem; background: var(--vsc-tint); color: var(--vsc-primary-ink); font-size: .875rem; font-weight: 700; }
.vs-compare-card h3 { margin: 0 0 .5rem; color: var(--vsc-ink); font-size: 1.125rem; font-weight: 700; line-height: 1.35; letter-spacing: normal; }
.vs-compare-card p { margin: 0; color: var(--vsc-text); font-size: 1rem; line-height: 1.6; }

/* ---------- Stories (copy beside a framed product image) ---------- */

.vs-compare-stories { display: grid; gap: 3.5rem; }
.vs-compare-story { display: grid; align-items: center; gap: 2rem; }
.vs-compare-story__copy { min-width: 0; }
.vs-compare-story__label { margin: 0 0 .75rem; color: var(--vsc-primary-ink); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.vs-compare-story h3 { margin: 0 0 1rem; color: var(--vsc-ink); font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: normal; }
.vs-compare-story__copy > p:not(.vs-compare-story__label) { margin: 0 0 1.25rem; color: var(--vsc-text); font-size: 1rem; line-height: 1.7; }
.vs-compare-story__visual img { aspect-ratio: 16 / 10; }
@media (min-width: 640px) { .vs-compare-story h3 { font-size: 1.5rem; } .vs-compare-story__copy > p:not(.vs-compare-story__label) { font-size: 1.125rem; } }
@media (min-width: 1024px) {
    .vs-compare-stories { gap: 5rem; }
    .vs-compare-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; }
    .vs-compare-story--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .vs-compare-story--reverse .vs-compare-story__copy { order: 2; }
}

/* ---------- Fit and pricing (two cards side by side) ---------- */

.vs-compare-fit { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .vs-compare-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs-compare-fit .vs-compare-card { padding: 2rem; }
.vs-compare-fit__card--vs { border-color: #c7d2fe; background: linear-gradient(145deg, #f5f3ff, #fff 60%); }
.vs-compare-fit .vs-compare-card h3 { margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.3; }
.vs-compare-fit .vs-cta, .vs-compare-fit .vs-compare-link { align-self: flex-start; margin-top: auto; }
.vs-compare-mark { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 1.25rem; border-radius: .75rem; background: var(--vsc-gradient); color: #fff; font-size: .8125rem; font-weight: 700; }
.vs-compare-mark--muted { background: #f3f4f6; color: var(--vsc-text); }
.vs-compare-checks { display: grid; gap: .75rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.vs-compare-checks li { position: relative; padding-left: 1.75rem; color: var(--vsc-text); font-size: 1rem; line-height: 1.6; }
.vs-compare-checks li::before { position: absolute; top: .5em; left: .125rem; width: 11px; height: 6px; border-bottom: 2px solid var(--vsc-primary); border-left: 2px solid var(--vsc-primary); content: ""; transform: rotate(-45deg); }
.vs-compare-checks--muted li::before { border-color: #9ca3af; }
.vs-compare-price__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 1rem !important; }
.vs-compare-price__amount strong { color: var(--vsc-ink); font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.vs-compare-price__amount span { color: var(--vsc-text); font-size: .9375rem; }
.vs-compare-price > p:not(.vs-compare-story__label):not(.vs-compare-price__amount) { margin-bottom: 1.5rem; }

/* ---------- Switching ---------- */

.vs-compare-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.vs-compare-chips li { position: relative; padding: .5rem 1rem .5rem 2.25rem; border: 1px solid #e0e7ff; border-radius: 999px; background: #fff; color: var(--vsc-ink); font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.vs-compare-chips li::before { position: absolute; top: 50%; left: 1rem; width: 10px; height: 6px; margin-top: -5px; border-bottom: 2px solid var(--vsc-primary); border-left: 2px solid var(--vsc-primary); content: ""; transform: rotate(-45deg); }

/* ---------- More comparisons ---------- */

.vs-compare-band.vs-compare-more { padding: 2.5rem 0; }
.vs-compare-more__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.vs-compare-more__title { margin: 0; color: var(--vsc-ink); font-size: 1rem; font-weight: 700; }
.vs-compare-more__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.vs-compare-more__list a { display: inline-flex; padding: .5rem 1rem; border: 1px solid var(--vsc-line); border-radius: 999px; background: #fff; color: #374151; font-size: .9375rem; font-weight: 500; line-height: 1.4; text-decoration: none; transition: border-color .2s, color .2s; }
.vs-compare-more__list a:hover { border-color: #c7d2fe; color: #4338ca; }
.vs-compare-more__list a:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

/* ---------- Feature table ---------- */

.vs-compare-table-shell { position: relative; border: 1px solid var(--vsc-line); border-radius: 1.25rem; background: #fff; box-shadow: 0 20px 40px -30px rgba(49, 46, 129, .25); }
.vs-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vs-compare-table th, .vs-compare-table td { padding: 1rem; border-bottom: 1px solid var(--vsc-line-soft); color: var(--vsc-text); font-size: .875rem; font-weight: 500; line-height: 1.4; text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.vs-compare-table tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.vs-compare-table thead th { position: sticky; z-index: 4; top: 4rem; border-bottom-color: var(--vsc-line); background: rgba(255, 255, 255, .97); color: var(--vsc-ink); backdrop-filter: blur(10px); }
.vs-compare-table thead th:first-child { border-top-left-radius: 1.25rem; }
.vs-compare-table thead th:last-child { border-top-right-radius: 1.25rem; }
.vs-compare-table thead strong { display: block; margin-top: .375rem; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.vs-compare-table th[hidden], .vs-compare-table td[hidden], .vs-compare-table tbody[hidden] { display: none; }
.vs-compare-table__feature { width: 34%; text-align: left !important; }
.vs-compare-table tbody .vs-compare-table__feature { color: var(--vsc-ink); font-weight: 600; }
.vs-compare-table__core { width: 22%; border-right: 1px solid #e0e7ff; border-left: 1px solid #e0e7ff; background: rgba(238, 242, 255, .45); }
.vs-compare-table thead .vs-compare-table__core { background: #f5f6ff; color: var(--vsc-primary-ink); }
.vs-compare-table__mark { display: grid; width: 1.75rem; height: 1.75rem; margin: 0 auto; place-items: center; border-radius: .5rem; background: var(--vsc-gradient); color: #fff; font-size: .6875rem; font-weight: 700; }
.vs-compare-table__mark--muted { background: #f3f4f6; color: var(--vsc-text); }
.vs-compare-table .vs-compare-table__section > * { padding: .75rem 1rem; background: var(--vsc-soft); color: var(--vsc-primary-ink); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.vs-compare-table .vs-compare-table__section > .vs-compare-table__core { background: #f2f3ff; }
.vs-compare-features__research-note { max-width: 56rem; margin: 1rem auto 0; color: var(--vsc-muted); font-size: .8125rem; line-height: 1.6; text-align: center; }

.vs-compare-status { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; line-height: 1.25; }
.vs-compare-status i { display: grid; width: 1.125rem; height: 1.125rem; flex: none; place-items: center; border-radius: 50%; font-size: .625rem; font-style: normal; font-weight: 700; }
.vs-compare-status--yes { color: #047857; }
.vs-compare-status--yes i { background: #d1fae5; color: #047857; }
.vs-compare-status--limited { color: #92400e; }
.vs-compare-status--limited i { background: #fef3c7; color: #92400e; }
.vs-compare-status--unknown { color: var(--vsc-muted); }
.vs-compare-status--unknown i { background: #f3f4f6; color: var(--vsc-muted); }
.vs-compare-status--notlisted { color: #9ca3af; }
.vs-compare-status--notlisted i { background: #f3f4f6; color: #9ca3af; }
.vs-compare-status--integration { color: #1d4ed8; }
.vs-compare-status--integration i { background: #dbeafe; color: #1d4ed8; }
.vs-compare-status--addon { color: #7e22ce; }
.vs-compare-status--addon i { background: #f3e8ff; color: #7e22ce; }
.vs-compare-status--enterprise { color: #9a3412; }
.vs-compare-status--enterprise i { background: #ffedd5; color: #9a3412; font-size: .5625rem; }

@media (max-width: 767px) {
    .vs-compare-table th, .vs-compare-table td { padding: .75rem .5rem; font-size: .8125rem; }
    .vs-compare-table__feature { width: 42%; }
    .vs-compare-table__core { width: 29%; }
    .vs-compare-table thead strong { font-size: .75rem; }
    .vs-compare-status span { display: none; }
    .vs-compare-status i { width: 1.375rem; height: 1.375rem; font-size: .75rem; }
}

/* Hub: category tabs and paging arrows above the table. */
.vs-compare-features__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.vs-compare-tabs { display: inline-flex; max-width: 100%; gap: .25rem; overflow-x: auto; padding: .25rem; border: 1px solid var(--vsc-line); border-radius: 12px; background: var(--vsc-soft); scrollbar-width: none; }
.vs-compare-tabs::-webkit-scrollbar { display: none; }
.vs-compare-tabs button { flex: none; min-height: 40px; padding: .5rem 1rem; border: 0; border-radius: 10px; background: transparent; color: var(--vsc-text); font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.vs-compare-tabs button:hover { color: var(--vsc-ink); }
.vs-compare-tabs button[aria-selected="true"] { background: var(--vsc-gradient); color: #fff; box-shadow: 0 8px 18px -9px rgba(79, 70, 229, .7); }
.vs-compare-controls { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.vs-compare-features__status { margin: 0 .5rem 0 0; color: var(--vsc-muted); font-size: .8125rem; white-space: nowrap; }
.vs-compare-controls button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--vsc-line); border-radius: 50%; background: #fff; color: var(--vsc-text); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.vs-compare-controls button:hover:not(:disabled) { border-color: #a5b4fc; background: var(--vsc-tint); color: var(--vsc-primary-ink); }
.vs-compare-controls button:disabled { opacity: .4; cursor: not-allowed; }
.vs-compare-controls svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vs-compare-tabs button:focus-visible, .vs-compare-controls button:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

/* ---------- Hub: all comparisons ---------- */

.vs-compare-library { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .vs-compare-library { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vs-compare-library { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vs-compare-library__card h3 { margin-bottom: 1rem; }
.vs-compare-library__card ul { margin: 0; padding: 0; list-style: none; }
.vs-compare-library__card li + li { border-top: 1px solid var(--vsc-line-soft); }
.vs-compare-library__card a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 0; color: #374151; font-size: .9375rem; line-height: 1.4; text-decoration: none; transition: color .2s; }
.vs-compare-library__card a:hover { color: var(--vsc-primary-ink); }
.vs-compare-library__card a i { color: var(--vsc-primary); font-style: normal; transition: transform .2s; }
.vs-compare-library__card a:hover i { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .vs-compare *, .vs-compare *::before, .vs-compare *::after { transition: none !important; }
    .vs-compare .vs-cta:hover { transform: none; }
}

.vs-compare-fit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }