/* Our Plans: four white plan cards on a tint band. Each card ends with a black strip holding the
   white BizGPT logo and its sentence (the logo is made for dark backgrounds). */

/* Room above the plan names for the ribbons (names line up across a row whether or not a card
   has a ribbon). The card's bottom padding is taken by the black strip. */
.our-plans .price-card { padding: 60px 30px 0; overflow: hidden; }

/* Billing period on its own line under the amount, as on the live page. */
.our-plans .price-card__price { flex-wrap: wrap; }
.our-plans .price-card__period { flex-basis: 100%; align-self: auto; margin: 10px 0 0; }

/* Register, note and Add Personal Support sit together at the foot of the white area. */
.our-plans .plan-cta { margin-top: auto; display: flex; flex-direction: column; }
.our-plans .price-card .btn { margin-top: 0; padding: 16px 14px; letter-spacing: .12em; line-height: 1.3; white-space: normal; text-align: center; isolation: isolate; }
.our-plans .plan-cta .btn--dark { margin-top: 18px; }
/* The solid button's white hover fill needs an outline on a white card. */
.our-plans .price-card .btn--solid:hover { border-color: var(--black); }

/* BizGPT logo + sentence on a black strip, flush with the card's edges and rounded corners. */
.our-plans .plan-suite { margin: 28px -30px 0; padding: 24px 22px 26px; background: var(--black); color: var(--white); text-align: center; }
.our-plans .plan-suite__logo { display: inline-block; }
.our-plans .plan-suite__logo img { display: block; width: 150px; height: auto; }
.our-plans .plan-suite p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .8); text-wrap: balance; }

/* Four across (1281px and up): tighter cards so names, feature lines and buttons stay on one line. */
@media (min-width: 1281px) {
  .our-plans .price-card { padding-left: 22px; padding-right: 22px; }
  .our-plans .price-card__name { font-size: 22px; }
  .our-plans .price-card .btn { font-size: 12px; letter-spacing: .08em; padding-left: 10px; padding-right: 10px; }
  .our-plans .plan-suite { margin-left: -22px; margin-right: -22px; padding-left: 14px; padding-right: 14px; }
}
/* Below that, four columns get too narrow: two across until the cards stack. */
@media (min-width: 961px) and (max-width: 1280px) {
  .our-plans .pricing--4 { grid-template-columns: repeat(2, 1fr); }
}
/* Stacked: no need to reserve ribbon room on a card without a ribbon. */
@media (max-width: 960px) {
  .our-plans .price-card:not(.price-card--featured) { padding-top: 36px; }
}
@media (max-width: 640px) {
  .our-plans .price-card { padding-left: 24px; padding-right: 24px; }
  .our-plans .price-card:not(.price-card--featured) { padding-top: 30px; }
  .our-plans .plan-suite { margin-left: -24px; margin-right: -24px; padding-left: 18px; padding-right: 18px; }
}