@layer components {

.pricing {
	--font-size-large: 1.2em
}

/* =========================
   Pricing cards – merged
   ========================= */

/* Grid of cards */
.pricing .passes{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;                    /* cards fill same track height */
}

/* One card: 4 rows = header / features / tiers-line / cta  */
.pricing .pass{
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  background: var(--panel-bg, var(--color-panel, #fff));
  border: var(--hairline, 1px solid rgba(0,0,0,.12));
  border-radius: var(--radius-3, 14px);
  padding: 16px;
  height: 100%;
}

/* ---------- Keep your existing list reset ---------- */
.pricing .pass ul{
  margin: 0;
  padding-inline-start: 0;
}
.pricing .pass li{
  list-style-type: none;
}

/* ---------- Header: title left, price right ---------- */
.pricing .pass .head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.pricing .pass .head .title{
  margin: 0;
}

/* Keep your token sizes for price; only scope alignment here */
.pricing .pass .head .price{
  text-align: right;                       /* do NOT change global .price */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  margin: 0;
}

.pricing .pass .head .price .js-price{
  font-size: var(--font-size-large);
  font-weight: var(--weight-medium);
}

/* Cut-off note on its own (smaller) line */
.pricing .pass .head .price .js-note{
  display: block;
  font-size: var(--font-size-small);
  opacity: .75;
  margin-top: .25rem;
}

/* ---------- Features block grows (2nd row) ---------- */
.pricing .pass > ul{ /* already list-reset above */ }

/* ---------- Tiers line (3rd row) – keep your size token ---------- */
.pricing .pass .tiers-line{
  margin: 0;
  font-size: var(--font-size-small);
  opacity: .9;
}

/* ---------- CTA (4th row) – use theme button styles ---------- */
.pricing .pass .js-link,
.pricing .pass .register-button,
.pricing .pass .cta{
  justify-self: stretch;                   /* full width in card */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                        /* touch target */
  text-decoration: none;
}

/* Optional: stronger vertical alignment on very tall lists */
@media (min-width: 700px){
  .pricing .pass .js-link,
  .pricing .pass .register-button,
  .pricing .pass .cta{
    align-self: end;                       /* sits on same baseline across cards */
  }
}

}