.ess-wrap{ margin-bottom:32px; font-family:inherit; }
.ess-header{ text-align:center; margin-bottom:20px; }
.ess-headline{ font-size:clamp(22px,3.4vw,32px); font-weight:800; margin:0 0 8px; }
.ess-sub{ color:rgba(0,0,0,0.6); margin:0; }

.ess-compare{
  position:relative;
  max-width:560px;
  margin:0 auto;
  aspect-ratio:4/5;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.08);
  cursor:ew-resize;
  touch-action:pan-y;
}
.ess-layer{ position:absolute; inset:0; }
.ess-layer img{ width:100%; height:100%; object-fit:cover; display:block; }
.ess-layer-after{ clip-path: inset(0 100% 0 0); }
.ess-tag{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:12px; background:rgba(0,0,0,0.55); color:#fff;
  padding:6px 14px; border-radius:20px; pointer-events:none;
}

.ess-features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:14px;
  max-width:720px;
  margin:26px auto 0;
}
.ess-feature-card{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:16px;
  opacity:0;
  transform:translateY(10px);
}
.ess-num{ font-size:11px; letter-spacing:.1em; opacity:.5; display:block; margin-bottom:6px; }
.ess-fname{ font-weight:700; margin-bottom:4px; }
.ess-fdesc{ font-size:13px; opacity:.7; }

@media (prefers-reduced-motion: reduce){
  .ess-feature-card{ opacity:1; transform:none; }
}