/* The card form on /join, /members and /agentic-agency/order/ — checkout.js mounts Stripe's iframe in
   .checkout-frame. Page chrome is site.css; this file styles only the mount.
   Colour is the surface, never an edge: the iframe sits on a warm tint. */

.checkout {
  width: 100%;
  max-width: 560px;
  margin-top: 1.3em;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--tint-warm);
}

.checkout-frame { border-radius: var(--radius); overflow: hidden; }
.checkout-frame:empty { display: none; }

.checkout-status {
  margin: 0;
  padding: 28px 16px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.checkout.is-ready .checkout-status { display: none; }
.checkout.is-failed .checkout-status { color: #eab0ae; } /* the .gap ink, Skyline --danger-ink */

/* On a v3 page every beat is centred, so the mount is centred with it. */
body.v3 .checkout { margin: clamp(32px, 4vw, 48px) auto 0; }