/* Two-column shell shared by the single-page Prime checkout and the no-JS confirm
   fallback: payment on the wide side, plan/seat summary on the rail.

   Not built from lg:grid-cols-5 / lg:order-* / lg:sticky — layout.css is
   precompiled and ships none of the order or sticky variants, so those silently
   no-op. Owning the rules here also puts the split at 900px instead of Tailwind's
   1024px, which is what left both sections stacked just under 1024px. */
.prime-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* Stacked, the rail leads: price and seat count on screen without scrolling
   past the card form. */
.prime-checkout-main { order: 2; }
.prime-checkout-rail { order: 1; }

@media (min-width: 900px) {
  /* 60/40 — a thirds split squeezed the seat stepper and wrapped the
     à-la-carte savings line. */
  .prime-checkout-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .prime-checkout-main { order: 1; }
  .prime-checkout-rail { order: 2; position: sticky; top: 1rem; }
}