.comparison-comparison {
  background-color: #f0f0f0;
  min-height: 50px;
  padding: 80px 60px;
  position: relative;
}

.comparison-heading {
  text-align: left;
  font-size: 36px;
  font-weight: 700;
  color: #14101e;
  margin-bottom: 48px;
}

.comparison-highlight {
  color: #701ab5;
}

.comparison-cardsRow {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  max-width: 1200px;
  flex-wrap: nowrap; /* forces all 3 cards onto one row on desktop */
  position: relative;
  padding-right: 400px;
}

.comparison-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 28px 0;
  width: 430px;
  height: 430px;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(20, 16, 30, 0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* CARD 3 - separate size, independent from cards 1 & 2 */
.comparison-cardSmall {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 0 0;
  width: 355px;
  height: 561px;
  position: absolute;
  top: 45px; /* aligns with the section's top padding */
  right: 124px; /* aligns with the section's right padding */
  box-shadow: 0 10px 30px rgba(20, 16, 30, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

.comparison-cardTitle {
  font-size: 24px;
  font-weight: 700;
  color: #14101e;
  text-align: left;
  margin-bottom: 18px;
}

.comparison-cardTitle--left {
  text-align: left;
  padding: 0 24px;
}

.comparison-cardTitle--big {
  font-size: 30px;
}

.comparison-cardTitle--ai {
  color: #701ab5;
}

.comparison-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  max-width: 200px;
}

.comparison-listItem {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #3a3447;
}

.comparison-listItem--bad svg {
  color: #d93535;
  background: #ffdede;
  border-radius: 50%;
  padding: 4px;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
}

.comparison-listItem--good svg {
  color: #31c842;
  background: #d7ffdc;
  border-radius: 50%;
  padding: 4px;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
}

.comparison-cardImage {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 210px;
  height: auto;
  object-fit: contain;
}

/* nudge each image individually to compensate for different
   amounts of built-in transparent padding in the source PNGs */
.comparison-cardImage--human {
  max-width: 300px;
  transform: translate(
    6px,
    18px
  ); /* pulls the visible figure flush into the corner */
}

.comparison-cardImage--sia {
  max-width: 225px;
  transform: translate(2px, 4px);
}
/* VS badge floating between card 1 and card 2 */
.comparison-vsBadge {
  position: absolute;
  left: 37%;
  top: 165px;
  transform: translateX(-50%);
  background: rgba(112, 26, 181, 0.8);
  color: #ffffff;
  font-size: 29px;
  font-weight: 500;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(139, 61, 255, 0.4);
}

/* Card 3 - opportunity list */
.comparison-opportunityList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0 24px;
}

.comparison-opportunityItem {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #14101e;
}

.comparison-ctaBox {
  background: #f3f0fa;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 18px 24px 16px;
  margin-top: 45px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative; /* lets the graph image overlap above this box's content */
  overflow: visible;
}

.comparison-opportunityIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

.comparison-opportunityIcon--blue {
  background: #2bb6e3;
  color: #ffffff;
}

.comparison-opportunityIcon--purple {
  background: #8b3dff;
  color: #ffffff;
}

.comparison-opportunityIcon--green {
  background: #34c777;
  color: #ffffff;
}

.comparison-opportunityIcon--red {
  background: #ff5b5b;
  color: #ffffff;
}

.comparison-cta {
  font-size: 18px;
  font-weight: 500;
  color: #701ab5;
  line-height: 1.3;
  max-width: 100%;
  position: relative;
  z-index: 2; /* keeps text readable above the overlapping image */
}

.comparison-graphImage {
  align-self: flex-end;
  margin-top: -30px; /* pulls the image up so it overlaps the text above it */
  margin-bottom: 0px;
  width: 100%;
  max-width: 135px;
  height: 145px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .comparison-cardsRow {
    flex-wrap: wrap;
    gap: 40px;
    padding-right: 0;
  }

  .comparison-cardSmall {
    position: static;
    width: 100%;
    max-width: 425px;
    height: auto;
    align-self: center;
    /* margin-top: 24px; */
    order: 3;
  }

  .comparison-vsBadge {
    position: static;
    transform: none;
    order: 2;
    align-self: center;
    margin-top: -8px;
  }

  .comparison-card {
    order: 1;
    width: 100%;
    max-width: 430px;
    height: auto;
  }
}

@media (max-width: 600px) {
  .comparison-comparison {
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
  }

  .comparison-heading {
    font-size: 24px;
  }

  .comparison-card,
  .comparison-cardSmall {
    width: 100%;
    max-width: 350px;
  }
}

/* ---------- MOBILE LAYOUT ---------- */
@media (max-width: 600px) {
  .comparison-comparison {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
  }

  .comparison-heading {
    font-size: 24px;
    margin-bottom: 28px;
  }

  .comparison-cardsRow {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-right: 0;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .comparison-card {
    order: 1;
    width: 100%;
    max-width: 340px;
    height: auto;
    padding: 24px 24px 94px; /* extra bottom space reserved for the corner image */
    margin-bottom: 36px;
  }

  /* card 2 (CatchMyCall AI) should render after the VS badge,
     but stays second in DOM order — flex order handles the visual stack */
  .comparison-card:nth-of-type(3) {
    order: 3;
  }

  .comparison-vsBadge {
    position: relative;
    order: 2;
    left: 0;
    top: auto;
    transform: none;
    align-self: flex-start;
    margin: -50px 0 -15px 30px; /* pulls it to overlap the card above/below by half its own height */
    width: 56px;
    height: 56px;
    font-size: 22px;
    z-index: 5;
  }

  .comparison-cardImage--human {
    max-width: 265px;
    transform: translate(4px, 10px);
  }

  .comparison-cardImage--sia {
    max-width: 200px;
    transform: translate(10px, 4px);
  }

  .comparison-cardSmall {
    order: 4;
    width: 100%;
    max-width: 340px;
    height: auto;
    /* margin-top: 24px; */
    padding: 20px 0 0;
  }

  .comparison-cardTitle--big {
    font-size: 22px;
  }

  .comparison-cta {
    font-size: 15px;
  }

  .comparison-graphImage {
    max-width: 100px;
    height: 110px;
  }
}