/* Checkout page — the app trial wall's target.
   One centred card, no nav, no distractions: the visitor has already decided and the
   Paddle overlay is opening over the top of this within 350ms. */

.buy-panel { display: flex; align-items: center; justify-content: center; min-height: 78vh; }
.buy-card { max-width: 42ch; text-align: center; }
.buy-card .hero-kicker { justify-content: center; margin-bottom: var(--ar-s-5); }
.buy-card h1 { font-size: clamp(24px, 3.2vw, 30px); margin-bottom: var(--ar-s-4); }
.buy-card .lede { font-size: 16px; margin-bottom: var(--ar-s-5); }
.buy-card .btn { min-width: 220px; }
.buy-reassure {
  margin: var(--ar-s-5) 0 var(--ar-s-3);
  font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--ar-text-3); line-height: 1.7;
}

/* The spinner is hidden and reshown by rest()/openCheckout() via style.display, so it
   must be display:block by default - a flex or grid default would be overwritten to
   the wrong value when the script restores it with an empty string. */
.spinner {
  display: block; width: 22px; height: 22px; margin: 0 auto var(--ar-s-5);
  border: 2px solid var(--ar-line);
  border-top-color: var(--ar-blue);
  border-radius: 50%;
  animation: ar-spin 800ms linear infinite;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--ar-line-2); }
}