/* checkout.css — on-page Stripe embedded Checkout modal.
   Uses the site tokens from app.css. Light card on a dark scrim so the Stripe
   form reads clearly in both site themes. No em dashes in copy. */

.mmco-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147480000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px 24px;
  overflow-y: auto;
}
.mmco-overlay.open { display: flex; }

.mmco-scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 27, 20, .58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mmco-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: auto 0;
  background: #FFFFFF;
  border: 1px solid var(--line, #E3E8E1);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(14, 27, 20, .4);
  padding: 20px 20px 22px;
  font-family: var(--font-ui, system-ui, sans-serif);
  animation: mmco-in .28s cubic-bezier(.22, .9, .3, 1);
}
@keyframes mmco-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mmco-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line, #E3E8E1);
  background: #fff;
  color: var(--ink, #0E1B14);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mmco-close:hover { background: var(--paper-tint, #F3F6F2); }

.mmco-head { margin: 2px 4px 14px; padding-right: 34px; }
.mmco-title {
  font-family: var(--font-display, sans-serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink, #0E1B14);
  margin: 0;
}
.mmco-sub { margin: 4px 0 0; font-size: .82rem; color: var(--muted, #5B6B60); }

.mmco-body { min-height: 120px; }

.mmco-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 4px;
  color: var(--muted, #5B6B60);
  font-size: .92rem;
}
/* Attribute [hidden] must beat display:flex above, otherwise the author class
   rule wins over the UA [hidden]{display:none} and the spinner never clears. */
.mmco-loading[hidden] { display: none; }
.mmco-error[hidden] { display: none; }
.mmco-spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(14, 27, 20, .18);
  border-top-color: var(--pine, #0E1B14);
  animation: mmco-rot .7s linear infinite;
}
@keyframes mmco-rot { to { transform: rotate(360deg); } }

.mmco-error {
  padding: 18px 4px;
  color: var(--ink, #0E1B14);
  font-size: .92rem;
}
.mmco-error p { margin: 0 0 12px; }
.mmco-fallback {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--pine, #0E1B14);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
}

/* Stripe mounts its own iframe here; give it room to breathe. */
#mmcoMount { min-height: 0; }

@media (max-width: 520px) {
  .mmco-card { max-width: 100%; border-radius: 16px; }
}

/* ---- Plan picker ---------------------------------------------------------
   Shown before Stripe mounts, so someone paying for their second proposal sees
   the Desk at the one moment they are thinking about price (Adam 2026-07-28).
   Two cards, Desk preselected. No shadows on the cards: the modal already sits
   on a scrim and stacked shadows muddy it. */
.mmco-plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0 14px;
}
.mmco-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 14px 15px;
  border-radius: 14px;
  border: 1.5px solid var(--line, #E3E8E1);
  background: #FFFFFF;
  cursor: pointer;
  font-family: var(--font-ui, system-ui, sans-serif);
  transition: border-color .14s ease, background .14s ease;
}
.mmco-plan:hover { border-color: rgba(14, 27, 20, .34); }
.mmco-plan.sel {
  border-color: var(--pine, #25543B);
  background: var(--paper-tint, #F3F6F2);
  box-shadow: inset 0 0 0 1px var(--pine, #25543B);
}
.mmco-plan-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mmco-plan-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink, #0E1B14);
}
.mmco-plan-price {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink, #0E1B14);
  white-space: nowrap;
}
.mmco-plan-price small {
  display: block;
  font-weight: 500;
  font-size: .7rem;
  text-align: right;
  color: var(--muted, #5B6B60);
}
.mmco-plan-blurb {
  font-size: .84rem;
  line-height: 1.4;
  color: var(--muted, #5B6B60);
  padding-right: 66px;
}
.mmco-plan-flag {
  position: absolute;
  top: -8px;
  right: 12px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pine, #25543B);
  color: #fff;
}
.mmco-go {
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink, #0E1B14);
  color: #fff;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}
.mmco-go:hover { background: var(--pine, #25543B); }

@media (max-width: 520px) {
  .mmco-plan-blurb { padding-right: 0; }
}