/* /pay only — rides on holding.css (blackout) and is harmless beside the
   full styles.css after the restore. */

.plans {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}

.plan {
  font-family: var(--mono);
  color: var(--fg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  padding: 0.9rem 1.6rem;
  min-width: 11rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  transition: border-color 140ms ease, background 140ms ease;
}

.plan:hover:enabled { border-color: var(--accent); background: rgba(64, 209, 127, 0.07); }
.plan:disabled { opacity: 0.45; cursor: default; }

.plan-name {
  color: var(--dim);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-price { font-size: 1.35rem; font-weight: 600; }
.plan-price .per { color: var(--dim); font-size: 0.85rem; font-weight: 400; }

.foot a { color: var(--faint); }

.agree {
  margin-top: 0.9rem;
  color: var(--dim);
  font-size: 0.85rem;
}
.agree a { color: var(--dim); }