/* === Main Card === */
.hcs-wrapper {
  display: flex;
  gap: 18px;
  padding: 18px;
  margin: 24px 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  align-items: center;
  max-width: 100%;
}

/* === Circular Meter === */
.hcs-meter {
  --value: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    conic-gradient(
      #2563eb calc(var(--value) * 1%),
      #e5e7eb 0
    );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hcs-meter span {
  width: 70%;
  height: 70%;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

/* === Content Area === */
.hcs-content {
  flex: 1;
}

.hcs-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}

/* === Feature List === */
.hcs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.hcs-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Icons */
.hcs-list li.yes {
  color: #166534;
}

.hcs-list li.yes::before {
  content: "✔";
  background: #dcfce7;
  color: #166534;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.hcs-list li.no {
  color: #92400e;
}

.hcs-list li.no::before {
  content: "!";
  background: #fef3c7;
  color: #92400e;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* === Footer Note === */
.hcs-note {
  font-size: 12px;
  color: #64748b;
}

/* === Mobile Friendly === */
@media (max-width: 640px) {
  .hcs-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .hcs-content {
    text-align: center;
  }

  .hcs-list li {
    justify-content: center;
  }
}