:root {
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-divider: #C5D0D6;
  --color-featured-bg: #dbeafe;
  --color-featured-bg-soft: #e8f0ff;
  --color-check: #22c55e;
  --color-check-dark: #16a34a;
  --color-cross-bg: #d1d5db;
  --color-cross-fg: #ffffff;
  --color-star: #FFA601;
  --color-star-empty: #989898;

  --radius-card: 16px;
  --row-gap-y: 22px;
  --row-pad-y: 18px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* * {
  box-sizing: border-box;
} */

html, body {
  /* margin: 0;
  padding: 0; */
  /* -webkit-font-smoothing: antialiased; */
}

.comparison {
  max-width: 1112px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* --- Table grid -------------------------------------------------------- */
.comparison__table {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) repeat(3, 1fr);
  align-items: stretch;
  position: relative;
}

.comparison__table .row {
  display: contents;
}

.comparison__table .cell {
  padding: var(--row-pad-y) 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--color-divider);
  font-size: 16px;
  min-height: 64px;
}

.comparison__table .cell--label {
  justify-content: flex-start;
  color: var(--color-text);
  font-weight: 500;
  padding-left: 4px;
  padding-right: 16px;
  text-align: left;
  font-family: Barlow, sans-serif;
}

/* --- Featured column (Pest Defence Pro) -------------------------------- */
/* Use a tinted background that runs through every cell in that column,
   rounded at the top and bottom. */
.comparison__table .cell--featured {
  background: var(--color-featured-bg-soft);
  position: relative;
}

.comparison__table .row--header .cell--featured {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
  background: var(--color-featured-bg);
}

.comparison__table .row--last .cell--featured {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
  border-bottom: 1px solid var(--color-divider);
}

/* Remove bottom divider from the very last row */
.comparison__table .row--last .cell {
  border-bottom: none;
}

/* The header row needs more vertical room for the product image */
.row--header .cell {
  border-bottom: 1px solid var(--color-divider);
  padding-top: 8px;
  padding-bottom: 20px;
  align-items: flex-end;
}

/* --- Product header card ---------------------------------------------- */
.comparison__table .product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.comparison__table .product__image {
  width: 110px;
  height: 110px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* SVG product illustrations as data URIs so the demo is self-contained */
.comparison__table .product__image--device {
  background-image: url("/assets/offer/1/app/desktop/images/index-v1/pestdefencepro-lp-comparison-image-1.png");
}

.comparison__table .product__image--trap {
  background-image: url('/assets/offer/1/app/desktop/images/index-v1/pestdefencepro-lp-comparison-image-2.png');
}

.comparison__table .product__image--bait {
  background-image: url('/assets/offer/1/app/desktop/images/index-v1/pestdefencepro-lp-comparison-image-3.png');
}

.comparison__table .product__stars {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.comparison__table .star {
  width: 20px;
  height: 20px;
  background-color: var(--color-star-empty);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center / contain no-repeat;
}

.comparison__table .star--filled {
  background-color: var(--color-star);
}

.comparison__table .product__name {
  font-weight: 400;
  font-size: 17px;
  text-align: center;
  line-height: 1.2;
  font-family: Barlow, sans-serif;
}
.comparison__table .product__name.bold {
    font-weight: 600;
}

/* --- Icons (check / cross) -------------------------------------------- */
.comparison__table .icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.comparison__table .icon--check {
  background-image: url("/assets/offer/1/app/desktop/images/index-v1/check-icon-.png");
}

.comparison__table .icon--check-outline {
  background-image: url("/assets/offer/1/app/desktop/images/index-v1/check-comp.png");
}

.comparison__table .icon--cross {
  background-image: url("/assets/offer/1/app/desktop/images/index-v1/cross-icon.png");
}

/* --- Responsive: hide Competitor B on smaller screens ----------------- */
@media (max-width: 720px) {
  .comparison {
    padding: 24px 16px;
  }

  .comparison__table {
    grid-template-columns: minmax(120px, 1.3fr) 1fr 1fr;
  }

  .cell--hide-mobile {
    display: none !important;
  }

  .comparison__table .cell {
    font-size: 14px;
    padding: 14px 8px;
    min-height: 56px;
  }

  .comparison__table .cell--label {
    padding-left: 2px;
    padding-right: 10px;
  }

  .comparison__table .product__image {
    width: 78px;
    height: 78px;
  }

  .comparison__table .product__name {
    font-size: 14px;
  }

  .comparison__table .star {
    width: 13px;
    height: 13px;
  }

  .comparison__table .icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 380px) {
  .comparison__table {
    grid-template-columns: minmax(100px, 1.2fr) 1fr 1fr;
  }

  .comparison__table .product__image {
    width: 64px;
    height: 64px;
  }

  .comparison__table .cell {
    padding: 12px 6px;
  }
}