.pricing-main{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 18px 36px;
}

.pricing-hero{
  padding: 18px 0 10px;
}

.pricing-title{
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--text, #e8e8e8);
}

.pricing-subtitle{
  margin: 10px 0 0;
  max-width: 760px;
  color: var(--muted, #a9a9a9);
  font-size: 14px;
  line-height: 1.55;
}


.pricing-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1100px){
  .pricing-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 560px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.plan{
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--panel2, rgba(255,255,255,0.04));
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.plan--featured .plan__top{
  background: radial-gradient(120% 160% at 10% 10%, rgba(120,180,255,0.35) 0%, rgba(255,110,110,0.24) 40%, rgba(0,0,0,0) 70%);
}

.plan__top{
  padding: 16px 16px 12px;
}

.plan__name{
  font-size: 22px;
  font-weight: 800;
  color: var(--text, #e8e8e8);
}

.plan__badge{
  display: inline-block;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border, rgba(255,255,255,0.16));
  color: var(--text, #e8e8e8);
  background: rgba(0,0,0,0.14);
}

.plan__free{
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #e8e8e8);
}

.plan__cta{
  padding: 0 16px 12px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.plan__cta .btn{
  flex: 1;
}

.plan__cta .btn{
  width: 100%;
  text-align: center;
}
.plan__cta .btn[data-disabled="true"]{
  opacity: 0.6;
  pointer-events: none;
}

.plan__body{
  padding: 12px 16px 16px;
  flex: 1;
}

.plan__list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted, #a9a9a9);
  font-size: 13px;
  line-height: 1.5;
}

.plan__list li{ margin: 6px 0; }

.pricing-footnote{
  margin-top: 14px;
}

.note{
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--panel2, rgba(255,255,255,0.04));
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--muted, #a9a9a9);
  font-size: 12px;
}