:root {
  --bg: #fff;
  --highlight: #6b46ff;
  --highlight-light: #f0ebff;
  --border: #e5e7eb;
  --muted: #6b7280;
}

body {
  font-family: "Inter", Arial, sans-serif;
}

.pricing-section {
  padding: 60px 20px;
  background: var(--bg);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: start;
}

.pricing-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
}

/* .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
} */

/* card */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.card-highlight {
  border: 2px solid var(--highlight);
  /* background: #faf9ff; */
  position: relative;
}

.badge {
  position: absolute;
  top: -38px;
  left: 50%;
  width: 100%;
  height: 40px;
  transform: translateX(-50%);
  background: var(--highlight);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 18px 18px 0px 0px;
}

.plan-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.plan-subtitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.plan-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px;
}

.plan-desc .note {
  color: var(--highlight);
  font-size: 12px;
  font-weight: 600;
}

.plan-price {
  font-size: 16px;
  margin: 16px 0;
  line-height: 1.4;
}

.plan-price strong {
  font-size: 18px;
}

.btn {
  display: inline-block;
  margin: 12px auto 20px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  min-width: 140px;
}

.btn-primary {
  background: var(--highlight);
  color: #fff;
  border: none;
}

.btn-outline {
  border: 1px solid var(--highlight);
  color: var(--highlight);
  background: transparent;
}

.features {
  text-align: left;
  font-size: 14px;
  color: #333;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li {
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
}

.features li::before {
  content: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cmask%20id%3D%22mask0_34375_14602%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23D9D9D9%22/%3E%3C/mask%3E%3Cg%20mask%3D%22url(%23mask0_34375_14602)%22%3E%3Cpath%20d%3D%22M8.00065%2014.6668C7.07843%2014.6668%206.21176%2014.4918%205.40065%2014.1418C4.58954%2013.7918%203.88398%2013.3168%203.28398%2012.7168C2.68398%2012.1168%202.20898%2011.4113%201.85898%2010.6002C1.50898%209.78905%201.33398%208.92239%201.33398%208.00016C1.33398%207.07794%201.50898%206.21127%201.85898%205.40016C2.20898%204.58905%202.68398%203.8835%203.28398%203.2835C3.88398%202.6835%204.58954%202.2085%205.40065%201.8585C6.21176%201.5085%207.07843%201.3335%208.00065%201.3335C8.72287%201.3335%209.40621%201.43905%2010.0507%201.65016C10.6951%201.86127%2011.2895%202.15572%2011.834%202.5335L10.8673%203.51683C10.4451%203.25016%209.9951%203.04183%209.51732%202.89183C9.03954%202.74183%208.53398%202.66683%208.00065%202.66683C6.52287%202.66683%205.26454%203.18627%204.22565%204.22516C3.18676%205.26405%202.66732%206.52239%202.66732%208.00016C2.66732%209.47794%203.18676%2010.7363%204.22565%2011.7752C5.26454%2012.8141%206.52287%2013.3335%208.00065%2013.3335C9.47843%2013.3335%2010.7368%2012.8141%2011.7757%2011.7752C12.8145%2010.7363%2013.334%209.47794%2013.334%208.00016C13.334%207.80016%2013.3229%207.60016%2013.3007%207.40016C13.2784%207.20016%2013.2451%207.00572%2013.2007%206.81683L14.284%205.7335C14.4062%206.08905%2014.5007%206.45572%2014.5673%206.8335C14.634%207.21127%2014.6673%207.60016%2014.6673%208.00016C14.6673%208.92239%2014.4923%209.78905%2014.1423%2010.6002C13.7923%2011.4113%2013.3173%2012.1168%2012.7173%2012.7168C12.1173%2013.3168%2011.4118%2013.7918%2010.6007%2014.1418C9.78954%2014.4918%208.92287%2014.6668%208.00065%2014.6668ZM7.06732%2011.0668L4.23398%208.2335L5.16732%207.30016L7.06732%209.20016L13.734%202.51683L14.6673%203.45016L7.06732%2011.0668Z%22%20fill%3D%22url(%23paint0_linear_34375_14602)%22/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_34375_14602%22%20x1%3D%221.33398%22%20y1%3D%228.00016%22%20x2%3D%2214.6673%22%20y2%3D%228.00016%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23E92BC3%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF7614%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  position: absolute;
  left: 0;
  color: #ef4444;
  font-size: 12px;
}

.disclaimer {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}