/* Comparison pages (/compare and /vs-*). Builds on the design tokens and
   shared classes in custom.css (.section, .sm-container, .btn, .eyebrow,
   .faq-item). Everything here is prefixed .cmp- so it can't leak.
   Design rule: Support.Monster is always the visual hero (gradient, larger,
   first); the other vendor is always the muted counterpart. */

.cmp-hero .h1 { font-size: clamp(2rem, 5vw, 3.25rem); max-width: 18ch; margin: 0 auto; }
.cmp-hero .hero-sub { max-width: 640px; font-size: var(--fs-17); line-height: 1.5; color: var(--fg-2); }
.cmp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.cmp-btn-secondary { background: var(--surface); color: var(--fg-1); border: 1.5px solid var(--border-strong); }

.cmp-section-head { max-width: 680px; margin-bottom: 28px; }
.cmp-section-head p { margin-top: 8px; }

/* Why Support.Monster: highlight strip */
.cmp-highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cmp-hl { position: relative; padding: 28px 24px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); overflow: hidden; }
.cmp-hl::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-primary); }
.cmp-hl-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: var(--grad-primary); color: var(--fg-on-primary); font-size: 15px; font-weight: 800; }
.cmp-hl h3 { margin-bottom: 8px; }
.cmp-hl p { font-size: var(--fs-14); line-height: 1.5; color: var(--fg-2); margin: 0; }

/* Who each is for: Support.Monster leads */
.cmp-fit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.cmp-fit-card { padding: 28px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.cmp-fit-card h3 { margin-bottom: 14px; color: var(--fg-1); }
.cmp-fit-card.is-us { padding: 36px; background: var(--grad-primary); border: 0; box-shadow: var(--shadow-fab); color: var(--fg-on-primary); }
.cmp-fit-card.is-us h3 { color: var(--fg-on-primary); font-size: var(--fs-24); }
.cmp-badge { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.2); color: var(--fg-on-primary); font-size: var(--fs-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cmp-list li { position: relative; padding-left: 26px; font-size: var(--fs-15); line-height: 1.5; color: var(--fg-2); }
.cmp-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-3); }
.cmp-fit-card.is-us .cmp-list li { color: var(--fg-on-primary); font-size: var(--fs-16, 16px); }
.cmp-fit-card.is-us .cmp-list li::before { background: var(--fg-on-primary); }

/* Feature table: Support.Monster column is the hero */
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.cmp-table { width: 100%; min-width: 680px; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--fs-14); }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--divider); line-height: 1.45; }
.cmp-table thead th { background: var(--surface-2); font-size: var(--fs-15); font-weight: 700; color: var(--fg-2); border-bottom: 2px solid var(--border-strong); }
.cmp-table thead th.is-us { background: var(--grad-primary); color: var(--fg-on-primary); font-size: var(--fs-17); font-weight: 800; border-bottom: 0; }
.cmp-table tbody th { width: 24%; font-weight: 600; color: var(--fg-1); }
.cmp-table td { width: 38%; color: var(--fg-3); }
.cmp-table td.is-us { background: var(--primary-soft); color: var(--fg-1); font-weight: 600; border-left: 2px solid var(--primary); border-right: 2px solid var(--primary); }
.cmp-table tr.cmp-group th { background: var(--surface-2); font-size: var(--fs-13); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-1); }
.cmp-table tr.cmp-group + tr td.is-us { border-top: 0; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:last-child td.is-us { border-bottom: 2px solid var(--primary); }
.cmp-cell { display: flex; align-items: flex-start; gap: 10px; }
.cmp-mark { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1; }
.cmp-mark.is-yes { background: var(--positive-soft); color: var(--positive); }
.cmp-mark.is-no { background: var(--negative-soft); color: var(--negative); }
.cmp-mark.is-partly { background: var(--primary-soft); color: var(--primary); }
.cmp-note { margin-top: 12px; }

/* Where the approaches differ: our line is the highlighted one */
.cmp-diff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cmp-diff-card { padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.cmp-diff-card h3 { margin-bottom: 14px; }
.cmp-diff-row { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-md); }
.cmp-diff-row.is-us { background: var(--primary-soft); border-left: 3px solid var(--primary); }
.cmp-diff-row.is-them { background: transparent; padding-top: 4px; padding-bottom: 0; }
.cmp-diff-label { display: block; font-size: var(--fs-12); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); margin-bottom: 4px; }
.cmp-diff-row.is-them .cmp-diff-label { color: var(--fg-3); }
.cmp-diff-row p { font-size: var(--fs-15); line-height: 1.5; color: var(--fg-1); margin: 0; }
.cmp-diff-row.is-them p { color: var(--fg-2); }

/* Pricing: Support.Monster card leads and is larger */
.cmp-price-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cmp-price-card { padding: 28px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.cmp-price-card.is-us { position: relative; padding: 36px 32px 32px; background: var(--surface); border: 2px solid var(--primary); box-shadow: var(--shadow-lifted); overflow: hidden; }
.cmp-price-card.is-us::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--grad-primary); }
.cmp-price-card.is-us .cmp-badge { background: var(--primary-soft); color: var(--primary); }
.cmp-price-rows { list-style: none; margin: 14px 0 0; padding: 0; }
.cmp-price-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--divider); font-size: var(--fs-15); color: var(--fg-2); }
.cmp-price-rows li strong { color: var(--fg-1); font-weight: 700; white-space: nowrap; }
.cmp-price-card.is-us .cmp-price-rows li strong { color: var(--primary); font-size: var(--fs-17); }
.cmp-price-rows li.is-feature { margin-top: 4px; padding: 14px 14px; border: 0; border-radius: var(--r-md); background: var(--primary-soft); }
.cmp-price-rows li span.cmp-price-sub { display: block; font-size: var(--fs-13); color: var(--fg-3); }
.cmp-price-notes { margin-top: 16px; }

/* Switching steps */
.cmp-steps { list-style: none; counter-reset: cmp-step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cmp-steps li { counter-increment: cmp-step; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.cmp-steps li::before { content: counter(cmp-step); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: var(--grad-primary); color: var(--fg-on-primary); font-weight: 700; font-size: var(--fs-14); }
.cmp-steps h3 { margin-bottom: 8px; }

/* More comparisons / hub cards */
.cmp-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cmp-hub-card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.cmp-hub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lifted); }
.cmp-hub-card .eyebrow { margin-bottom: 6px; }
.cmp-hub-card p { margin: 10px 0 18px; font-size: var(--fs-15); line-height: 1.5; color: var(--fg-2); flex: 1; }
.cmp-hub-link { font-weight: 700; color: var(--primary); font-size: var(--fs-14); }

.cmp-cta { text-align: center; }
.cmp-cta .body { margin: 8px auto 24px; max-width: 520px; }

/* Disclaimer: last thing on the page, deliberately low-key */
.cmp-disclaimer { padding: 20px 0 36px; border-top: 1px solid var(--divider); }
.cmp-disclaimer p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.55; color: var(--fg-3); }
.cmp-disclaimer a { color: var(--fg-3); text-decoration: underline; text-underline-offset: 2px; }
.cmp-disclaimer a:hover { color: var(--fg-2); }

@media (max-width: 1000px) {
  .cmp-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cmp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cmp-fit, .cmp-diff-grid, .cmp-price-grid, .cmp-hub-grid, .cmp-steps, .cmp-highlights { grid-template-columns: 1fr; }
  .cmp-fit-card.is-us { padding: 28px; }
  .cmp-table th, .cmp-table td { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .cmp-hub-card { transition: none; } }