/* Plan card price row: one shared layout for every page that shows plan
   prices (home page, pricing page, Archive page; the pricing page cards are
   built by fcRenderPlanCards() in assets/js/plan-config.js).

   Layout:  [ A$290      ]  [ Save A$58 ]
            [ per year   ]
   The "per month / per year" line sits straight under the big price, and the
   yearly saving badge sits beside them. On a card too narrow for both, the
   badge drops underneath, after "per year", so it still reads in order.
   Change the look here, not in each page. */
.fc-price-row {
  display: flex;
  align-items: baseline;    /* badge lines up with the bottom of the price figures */
  flex-wrap: wrap;
  gap: 8px 14px;
}
/* Cards with a "per month / per year" line keep their old space below it. */
.fc-price-row:has(.plan-period) {
  margin-bottom: 22px;
}
.fc-price-row .plan-price {
  line-height: 1;
  margin-bottom: 0;
}
.fc-price-row .plan-period {
  margin: 4px 0 0;
}
.fc-price-row .annual-badge {
  margin: 0;
  white-space: nowrap;
}
/* Set by fcBalancePriceRows() in plan-config.js when any card in a row is too
   narrow for the badge: every card in that row then puts its badge below. */
.fc-price-row.fc-price-stacked {
  flex-direction: column;
  align-items: flex-start;
}