/* =============================================================================
   compare.css — Compare hub + comparison pages. Loaded async. Tokens only.
   ============================================================================= */

/* (.pd-breadcrumb lives in components.css — shared with solution pages) */
.pd-compare-hero__intro { max-width: 70ch; margin: var(--pd-space-6) auto 0; color: var(--pd-on-dark-muted); }
.pd-compare-hero .pd-btn-row { margin-top: var(--pd-space-8); }

/* ---- Fair comparison + better-for cards ---- */
.pd-compare-fair .pd-card h2,
.pd-compare-betterfor .pd-card h2 { font-size: var(--pd-h3); margin-bottom: var(--pd-space-4); }
.pd-compare-fair .pd-card .pd-checklist { margin-top: var(--pd-space-4); }
.pd-compare-fair__us { border-color: rgba(194,97,252,0.40); }

/* (.pd-compare-table__note lives in components.css — shared with the homepage comparison) */

/* ---- Pricing math ---- */
.pd-pricemath__row { margin-bottom: var(--pd-space-8); }
.pd-pricemath__years { font-weight: 600; margin-bottom: var(--pd-space-3); }
.pd-pricemath__bar { position: relative; height: 46px; border-radius: var(--pd-radius-sm); overflow: hidden; display: flex; align-items: center; margin-bottom: var(--pd-space-2); background: var(--pd-surface-1); }
.pd-pricemath__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); }
.pd-pricemath__bar--them .pd-pricemath__fill { background: rgba(248,113,113,0.28); }
.pd-pricemath__bar--us .pd-pricemath__fill { background: var(--pd-grad-brand); }
.pd-pricemath__label { position: relative; z-index: 1; padding-inline: var(--pd-space-4); font-size: var(--pd-text-sm); }
.pd-pricemath__label b { font-family: var(--pd-font-display); font-size: var(--pd-text-lg); margin-right: .4rem; }
.pd-pricemath__save { text-align: right; color: var(--pd-success); font-weight: 600; }
.pd-pricemath__note { margin-top: var(--pd-space-6); font-size: var(--pd-text-sm); text-align: center; }

/* ---- Migration steps ---- */
.pd-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pd-steps li { display: flex; align-items: flex-start; gap: var(--pd-space-4); margin-bottom: var(--pd-space-6); }
.pd-steps__num { flex: none; width: 34px; height: 34px; border-radius: var(--pd-radius-pill); background: var(--pd-grad-brand); color: var(--pd-white); display: grid; place-items: center; font-family: var(--pd-font-display); font-weight: 700; }

.pd-compare-faq__cta { margin-top: var(--pd-space-12); }

/* ---- Hub cards ---- */
.pd-compare-index__card { display: block; }
.pd-compare-index__card h2 { font-size: var(--pd-h3); margin-bottom: var(--pd-space-3); }
.pd-compare-index__card:hover { text-decoration: none; }
.pd-compare-index__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--pd-space-4); color: var(--pd-violet); font-weight: 600; }
.pd-compare-index__card:hover .pd-compare-index__more { gap: .7rem; }