/* =========================================================
   WEB COMPARISON COMPONENT
========================================================= */

.web-compare{
  padding:96px 0;
  background:#fbfbfc;
}

.web-compare__header{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}

.web-compare__eyebrow{
  display:inline-block;
  padding:8px 14px;
  margin-bottom:14px;
  border-radius:999px;
  background:#ecfdf5;
  color:#047857;
  font-size:13px;
  font-weight:700;
}

.web-compare__title{
  margin:0 0 14px;
  font-size:36px;
  line-height:1.2;
}

.web-compare__text{
  margin:0;
  font-size:18px;
  color:#6b7280;
}

.web-compare__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  max-width:1100px;
  margin:0 auto;
}

.web-compare__card{
  padding:34px;
  border-radius:20px;
  background:#fff;
  border:1px solid #e5e7eb;
}

.web-compare__card h3{
  margin-top:10px;
  font-size:24px;
}

.web-compare__badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.web-compare__badge--current{
  background:#fee2e2;
  color:#b91c1c;
}

.web-compare__badge--optimized{
  background:#d1fae5;
  color:#047857;
}

.web-compare__list{
  list-style:none;
  padding:0;
  margin-top:20px;
}

.web-compare__list li{
  position:relative;
  padding-left:28px;
  margin-bottom:14px;
  line-height:1.6;
}

.web-compare__card--current li::before{
  content:"✕";
  position:absolute;
  left:0;
  color:#dc2626;
  font-weight:bold;
}

.web-compare__card--optimized li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#059669;
  font-weight:bold;
}

.web-compare__footer{
  text-align:center;
  margin-top:40px;
  font-size:18px;
}

@media (max-width:768px){

  .web-compare__grid{
    grid-template-columns:1fr;
  }

}