/* ============================================================
   PRICING — Three-tier pricing cards (consistent visual system)
   ============================================================ */

.pricing-bg {
  background: linear-gradient(180deg, var(--white) 0%, #f0f4ff 60%, #f5f0ff 100%);
}

.pricing-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.4rem;   /* room for the floating badges above featured/elite cards */
  align-items: start;
}

/* ─── BASE CARD ──────────────────────────────────────────── */
.price-card {
  background: var(--white);
  /* top border acts as the colour accent bar — naturally follows border-radius */
  border: 1.5px solid var(--border);
  border-top: 4px solid var(--border-strong);   /* Free Trial — neutral gray */
  border-radius: 20px;
  /* NO overflow:hidden — that was clipping the floating badges */
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow .25s, transform .25s;
}
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ─── MOST POPULAR (Standard) ────────────────────────────── */
.price-card.featured {
  border-color: #bfdbfe;
  border-top: 4px solid var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.07), var(--shadow-sm);
  animation: featGlow 3.5s ease-in-out infinite;
}
@keyframes featGlow {
  0%, 100% { outline: 2px solid rgba(37,99,235,0.0); outline-offset: 3px; }
  50%      { outline: 2px solid rgba(37,99,235,0.2); outline-offset: 3px; }
}

/* ─── ELITE ──────────────────────────────────────────────── */
.price-card.elite {
  border-color: #ddd6fe;
  border-top: 4px solid var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.07), var(--shadow-sm);
}

/* ─── FLOATING BADGES (::before) ────────────────────────── */
/* Shared positioning — overflow:hidden is gone so these are always visible */
.price-card.featured::before,
.price-card.elite::before {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  font-size: .64rem; font-weight: 800; letter-spacing: .14em;
  padding: .3rem 1.1rem; border-radius: 100px;
  white-space: nowrap; z-index: 1;
  line-height: 1;
}
.price-card.featured::before {
  content: 'MOST POPULAR';
  background: var(--blue); color: #fff;
}
.price-card.elite::before {
  content: 'ELITE';
  background: var(--violet); color: #fff;
}

/* ─── INNER PADDING ──────────────────────────────────────── */
.price-inner {
  padding: 1.8rem 2rem 2.2rem;
}

/* ─── TIER COLOUR ACCENTS ────────────────────────────────── */
.price-card.featured .price-num,
.price-card.featured .price-sym { color: var(--blue); }

.price-card.elite .price-num,
.price-card.elite .price-sym    { color: var(--violet); }
.price-card.elite .price-feats .ck { color: var(--violet); }

/* ─── PRICE TYPE LABEL ───────────────────────────────────── */
.price-type {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: .9rem; color: var(--ink-mute);
}
.price-card.featured .price-type { color: var(--blue); }
.price-card.elite    .price-type { color: var(--violet); }

/* ─── PRICE AMOUNT ───────────────────────────────────────── */
.price-amt  { display: flex; align-items: baseline; gap: .2rem; margin-bottom: .25rem; }
.price-sym  { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.price-num  {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 4.2rem; font-weight: 800; color: var(--ink);
  line-height: 1; letter-spacing: -0.04em;
}
.price-per  { font-size: .9rem; color: var(--ink-mute); }
.price-tag  { font-size: .8rem; color: var(--ink-soft); margin-bottom: 1.5rem; line-height: 1.5; }
.price-tag .save { color: var(--emerald); font-weight: 700; }

/* ─── FEATURE LIST ───────────────────────────────────────── */
.price-feats { list-style: none; margin-bottom: 1.8rem; }
.price-feats li {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .46rem 0; border-bottom: 1px solid var(--border);
  font-size: .87rem; color: var(--ink-mid); line-height: 1.45;
}
.price-feats li:last-child { border: none; }
.price-feats .ck   { color: var(--emerald); flex-shrink: 0; font-size: .85rem; margin-top: .1rem; }
.price-feats .x    { color: var(--ink-mute); flex-shrink: 0; }
.price-feats .bold { font-weight: 700; color: var(--ink); }

/* ─── CTA BUTTONS ────────────────────────────────────────── */
.btn-price-free {
  display: block; width: 100%; text-align: center;
  padding: .9rem; border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: transparent; color: var(--ink);
  font-family: 'Instrument Sans', sans-serif;
  font-size: .92rem; font-weight: 700; cursor: pointer;
  transition: all .18s;
}
.btn-price-free:hover { border-color: var(--ink); background: rgba(0,0,0,0.02); }

.btn-price-standard {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .9rem; border-radius: 10px; border: none;
  background: var(--blue); color: #fff;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .92rem; font-weight: 700; cursor: pointer;
  transition: all .18s; box-shadow: 0 4px 14px rgba(37,99,235,0.3);
  position: relative; overflow: hidden;
}
.btn-price-standard::after {
  content: ''; position: absolute;
  top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: shimmer 3.5s ease-in-out 1s infinite;
}
.btn-price-standard .arrow { transition: transform .2s; }
.btn-price-standard:hover  {
  background: var(--blue-vivid); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,99,235,0.38);
}
.btn-price-standard:hover .arrow { transform: translateX(3px); }

.btn-price-elite {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .9rem; border-radius: 10px; border: none;
  background: var(--violet); color: #fff;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .92rem; font-weight: 700; cursor: pointer;
  transition: all .18s; box-shadow: 0 4px 14px rgba(124,58,237,0.3);
}
.btn-price-elite .arrow { transition: transform .2s; }
.btn-price-elite:hover  {
  background: #6d28d9; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,58,237,0.38);
}
.btn-price-elite:hover .arrow { transform: translateX(3px); }

.price-sub-note { font-size: .74rem; color: var(--ink-mute); text-align: center; margin-top: .75rem; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1050px) {
  .pricing-wrap {
    grid-template-columns: 1fr;
    max-width: 460px;
    padding-top: 1.4rem;
  }
  .price-card.featured,
  .price-card.elite { margin-top: .6rem; }
}