/* /compare overview, laid out as Figma 877:16960. Prefix: cmpx- */
.cmpx-tile{display:inline-flex;flex:none;align-items:center;justify-content:center;width:3.75rem;height:3.75rem;border-radius:10px;background:#f2faf6}
.cmpx-tile img{display:block}

/* Hero: navy, copy left, B2Bware vs the four logos right */
.cmpx-hero{background:var(--seg-navy);padding:6.5rem 0 7rem}
.cmpx-hero_grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:center}
.cmpx-hero_h{margin:0;font-family:var(--seg-head);font-size:clamp(2.25rem,3.6vw,3.375rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.cmpx-hero_sub{margin:.5rem 0 0;font-family:var(--seg-head);font-size:clamp(1.25rem,1.8vw,1.625rem);font-weight:600;line-height:1.3;color:#30cf94}
.cmpx-hero_lead{margin:1.25rem 0 0;max-width:42rem;font-size:1.125rem;line-height:1.6;color:#c9d1e0}
.cmpx-hero_ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.cmpx-hero_vis{display:flex;align-items:center;justify-content:flex-end;gap:1.75rem}
.cmpx-hero_mark{width:12.125rem;height:auto}
.cmpx-hero_vs{font-size:1.125rem;color:#fff}
.cmpx-hero_logos{display:grid;grid-template-columns:repeat(2,auto);gap:.75rem;margin:0;padding:0;list-style:none}
.cmpx-tile.is-lg{width:4.4rem;height:4.4rem}
.cmpx-tile.is-lg img{transform:scale(1.18)}

/* Shared light background across the list and How to choose */
.cmpx-light+.cmpx-light{padding-top:0}

/* Comparison cards */
.cmpx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;margin:0;padding:0;list-style:none}
.cmpx-card{display:flex;flex-direction:column;padding:1.8rem;background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(24,30,53,.08)}
.cmpx-card_logos{display:flex;align-items:center;gap:.6rem;margin-bottom:1.25rem;font-size:1.125rem;color:var(--seg-navy)}
.cmpx-card_logos>img{width:3.75rem;height:3.75rem}
.cmpx-card_t{margin:0;font-family:var(--seg-head);font-size:1.4375rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--seg-navy)}
.cmpx-card_x{margin:.75rem 0 0;font-size:1.0625rem;line-height:1.6;color:var(--seg-navy)}
.cmpx-ticks{flex:1;display:flex;flex-direction:column;gap:.6rem;margin:1.5rem 0 1.75rem;padding:0;list-style:none}
.cmpx-ticks li{display:flex;align-items:flex-start;gap:.625rem;font-size:1.0625rem;line-height:1.5;color:#191a15}
.cmpx-ticks img{flex:none;width:1.375rem;height:1.375rem;margin-top:.05rem}
.cmpx-card_link{align-self:flex-start;font-weight:600;font-size:1.0625rem;color:var(--seg-green);text-decoration:none}
.cmpx-card_link>span:first-child{text-decoration:underline;text-underline-offset:3px}
.cmpx-card_link:hover{color:var(--seg-green-ink)}
.cmpx-card_link:focus-visible{outline:2px solid var(--seg-green);outline-offset:3px;border-radius:3px}

/* Numbered cards: How to choose, What to ask */
.cmpx-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;margin:0;padding:0;list-style:none}
.cmpx-num{display:flex;flex-direction:column;align-items:flex-start;padding:1.875rem 3.125rem;background:#fff;border-radius:10px}
.cmpx-num .cmpx-tile{margin-bottom:1.0625rem}
.cmpx-num .cmpx-card_x{margin-top:1.0625rem}
.cmpx-num_n{font-family:var(--seg-head);font-size:1.875rem;font-weight:700;color:#30cf94}
.cmpx-ask .cmpx-nums{display:flex;flex-wrap:wrap;justify-content:center}
.cmpx-ask .cmpx-num{flex:0 1 calc((100% - 5rem)/3)}
.cmpx-ask .cmpx-num{border:1px solid var(--seg-line-soft);box-shadow:0 2px 6px rgba(24,30,53,.06)}

@media (max-width:1199px){
  .cmpx-num{padding:1.75rem 2rem}
}
@media (max-width:991px){
  .cmpx-hero{padding:4.5rem 0 5rem}
  .cmpx-hero_grid{grid-template-columns:minmax(0,1fr)}
  .cmpx-hero_vis{justify-content:flex-start}
  .cmpx-grid{gap:1.5rem}
  .cmpx-nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .cmpx-ask .cmpx-num{flex-basis:calc((100% - 1.5rem)/2)}
}
@media (max-width:767px){
  .cmpx-hero{padding:3.5rem 0 4rem}
  .cmpx-hero_ctas{flex-direction:column;align-items:stretch}
  .cmpx-hero_ctas .button{justify-content:center;text-align:center}
  .cmpx-hero_vis{gap:1rem}
  .cmpx-hero_mark{width:7.5rem}
  .cmpx-tile.is-lg{width:3.5rem;height:3.5rem}
  .cmpx-tile.is-lg img{transform:none}
  .cmpx-grid,.cmpx-nums{grid-template-columns:minmax(0,1fr);gap:1rem}
  .cmpx-card{padding:1.5rem 1.25rem}
  .cmpx-num{padding:1.5rem 1.25rem}
  .cmpx-ask .cmpx-num{flex-basis:100%}
  .cmpx-card_t{font-size:1.25rem}
  .cmpx-card_x,.cmpx-ticks li{font-size:1rem}
}