/* web/themes/techprosolutions/css/components/svc-compare.css */
/**
 * "Say NO / Say YES" comparison cards. Left = navy with X bullets, right =
 * AA teal #17835F (brand green #3CB944 / green-2 #1D9E75 both fail WCAG AA
 * under white body text — precedent: the Speed Compare component) with check
 * bullets. Bullet icons are CSS mask-images so editors just write normal
 * bullet lists. Radii = --et-radius-lg (the "rounded-2xl" ask).
 */

.svc-compare__grid {
  display: grid;
  grid-template-columns: 1fr;      /* grid-cols-1 */
  gap: var(--et-space-6);
  align-items: stretch;
}
@media (min-width: 48rem) {
  .svc-compare__grid { grid-template-columns: repeat(2, 1fr); }  /* md:grid-cols-2 */
}

.svc-compare__card {
  border-radius: var(--et-radius-lg);
  padding: var(--et-space-10);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
}
.svc-compare__card--no  { background: var(--et-navy); }
.svc-compare__card--yes { background: #17835F; }

/* First element of the card body = its title. */
.svc-compare__card > :first-child {
  font-family: 'Manrope', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none !important;
  color: #fff;
  margin: 0 0 var(--et-space-6);
}

.svc-compare__card p { margin: 0 0 var(--et-space-4); }

.svc-compare__card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--et-space-4);
}
.svc-compare__card li {
  position: relative;
  padding-left: var(--et-space-8);
}
.svc-compare__card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--et-space-1);
  width: var(--et-space-5);
  height: var(--et-space-5);
  background-color: #fff;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.svc-compare__card--no li::before {
  /* X icon */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.svc-compare__card--yes li::before {
  /* Check icon */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}