/* Billing checkout card flow v123.
 * Legacy styles.css uses .recommended as an absolutely positioned badge.
 * Billing cards reuse that class as a state marker, so scope the reset to the
 * checkout-first card itself and keep the card in normal CSS Grid flow.
 *
 * admin-plans-v2.css v121 also hard-coded a 660px desktop grid/card height and
 * fixed row tracks. The current checkout-first renderer has fewer products, so
 * those historical tracks clip feature lists and leave large empty areas. Keep
 * desktop comparison cards aligned, but let their height follow real content.
 */
.pricing-page.billing-checkout-first .billing-buy-card.recommended {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin-top: 0 !important;
}

@media (min-width: 901px) {
  .pricing-page.billing-checkout-first .billing-primary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 860px !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    margin: 0 auto !important;
  }

  .pricing-page.billing-checkout-first .billing-primary-grid[data-audience="coach"],
  .pricing-page.billing-checkout-first .billing-primary-grid[data-audience="organization"] {
    grid-template-columns: minmax(0, 620px) !important;
    max-width: 620px !important;
    justify-content: center !important;
  }

  /* v121 positioned current products into a six-column grid with selectors
   * more specific than the generic card reset below. Match those selectors so
   * the now-single coach/organization cards cannot retain grid-column:2/span 2.
   */
  .pricing-page.billing-checkout-first .billing-primary-grid[data-audience="participant"] > .billing-buy-card:first-child,
  .pricing-page.billing-checkout-first .billing-primary-grid[data-audience="participant"] > .billing-buy-card:nth-child(2),
  .pricing-page.billing-checkout-first .billing-primary-grid[data-audience="coach"] > .billing-buy-card:first-child,
  .pricing-page.billing-checkout-first .billing-primary-grid[data-audience="organization"] > .billing-buy-card:first-child {
    grid-column: auto !important;
  }

  .pricing-page.billing-checkout-first .billing-primary-grid > .billing-buy-card {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    align-content: normal !important;
    overflow: visible !important;
  }

  .pricing-page.billing-checkout-first .billing-buy-card > .eyebrow {
    margin: 0 0 9px !important;
  }

  .pricing-page.billing-checkout-first .billing-buy-card > h2 {
    margin: 0 0 4px !important;
  }

  .pricing-page.billing-checkout-first .billing-buy-price {
    margin: 2px 0 8px !important;
  }

  .pricing-page.billing-checkout-first .billing-price-note {
    margin: 0 0 12px !important;
    overflow: visible !important;
  }

  .pricing-page.billing-checkout-first .billing-buy-card > p:not(.billing-price-note) {
    overflow: visible !important;
  }

  .pricing-page.billing-checkout-first .billing-buy-features {
    align-content: normal !important;
    margin: 0 0 16px !important;
    overflow: visible !important;
  }

  .pricing-page.billing-checkout-first .billing-buy-limits {
    margin-top: auto !important;
    padding: 13px 0 !important;
    overflow: visible !important;
  }

  .pricing-page.billing-checkout-first .billing-buy-actions {
    display: grid !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 0 !important;
    justify-content: normal !important;
    align-self: auto !important;
  }
}