.pricing-hero { text-align:center; padding:32px 28px 12px; }
.pricing-hero h1 { font-size:clamp(1.6rem,3.8vw,2.4rem); line-height:1.15; margin:0 auto 12px; max-width:700px; }
.pricing-hero .lead { max-width:620px; margin:0 auto; }

.pricing-grid {
  margin-top:22px;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.tier {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.tier.featured { border-color: var(--accent); border-width:2px; box-shadow: 0 18px 40px -22px var(--glow); }
.tier h2 { margin:0 0 6px; font-size:1.08rem; }
.tier .price { color: var(--accent-2); font-size:1.55rem; font-weight:700; margin:2px 0 8px; }
.tier .for { color: var(--muted); font-size:.9rem; margin-bottom:14px; }
.tier ul { margin:0 0 18px; padding-left:18px; }
.tier li { color:var(--muted); font-size:.9rem; padding:3px 0; }
.actions { margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }

.notes {
  margin-top:22px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
.notes p { margin:0; color:var(--muted); }

/* Replacement for former inline style= on price unit labels (CSP-strict) */
.price-unit { font-size: .85rem; font-weight: 400; }