.subscription-page {
  width: min(100%, 42rem);
  min-height: calc(100vh - 8rem);
  margin: 0 auto;
  padding: 1.5rem 1rem 6rem;
  animation: subscription-enter 220ms ease-out;
}

.subscription-page--loading,
.subscription-result {
  display: grid;
  place-items: center;
}

.subscription-trial {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid;
  border-radius: 0.75rem;
  text-align: center;
}

.subscription-trial--active { border-color: #bbf7d0; color: #15803d; background: #f0fdf4; }
.subscription-trial--expired { border-color: #fde68a; color: #b45309; background: #fffbeb; }
.subscription-trial strong { display: block; font-size: 1.5rem; }
.subscription-trial span { color: #57534e; font-size: 0.875rem; }
.subscription-trial p { margin: 0.75rem 0 0; font-size: 0.875rem; }

.subscription-card,
.subscription-plan {
  border: 1px solid var(--ps-border);
  border-radius: 0.75rem;
  background: var(--ps-bg-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.subscription-subscribed { padding: 1.5rem; text-align: center; }
.subscription-subscribed h1 { margin: 0 0 0.5rem; color: var(--ps-success); font-size: 1.25rem; }
.subscription-subscribed p { margin: 0 0 0.5rem; color: var(--ps-text-secondary); }
.subscription-subscribed p strong { color: var(--ps-text-primary); }

.subscription-success-icon,
.subscription-result-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.subscription-success-icon { color: var(--ps-success); background: color-mix(in srgb, var(--ps-success) 20%, transparent); }
.subscription-success-icon svg,
.subscription-result-icon svg { width: 2rem; height: 2rem; }

.subscription-actions { margin-top: 1rem; display: flex; justify-content: center; gap: 0.75rem; }
.subscription-button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  font-weight: 700;
}
.subscription-button svg { width: 1.1rem; height: 1.1rem; }
.subscription-button--primary { color: #fff; background: var(--ps-primary-dark, #15803d); }
.subscription-button--primary:hover:not(:disabled) { background: var(--ps-primary-hover, #16a34a); }
.subscription-button--outline { border-color: var(--ps-border); color: var(--ps-text-primary); background: transparent; }
.subscription-button--outline:hover:not(:disabled) { background: var(--ps-bg-hover); }
.subscription-button:disabled { opacity: 0.6; }

.subscription-plans { margin-bottom: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.subscription-plan {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  color: var(--ps-text-primary);
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.subscription-plan:hover { border-color: var(--ps-border-light); }
.subscription-plan.is-selected { border-color: #16a34a; box-shadow: 0 0 0 2px #16a34a; }
.subscription-plan__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.subscription-plan__heading i { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #16a34a; }
.subscription-plan__heading svg { width: 0.75rem; height: 0.75rem; }
.subscription-plan__price { display: flex; align-items: baseline; gap: 0.25rem; }
.subscription-plan__price b { font-size: 1.875rem; }
.subscription-plan__price small,
.subscription-plan__copy { color: var(--ps-text-muted); }
.subscription-plan__copy { display: block; margin-top: 0.5rem; font-size: 0.875rem; }
.subscription-best-value { position: absolute; top: 0; right: 0; padding: 0.25rem 0.75rem; border-radius: 0 0 0 0.5rem; color: #fff; background: #2563eb; font-size: 0.7rem; font-style: normal; font-weight: 800; }

.subscription-features { margin-bottom: 1.5rem; padding: 1.25rem; }
.subscription-features h2 { margin: 0 0 1rem; font-size: 1.125rem; }
.subscription-features ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; list-style: none; }
.subscription-features li { display: flex; align-items: center; gap: 0.5rem; color: var(--ps-text-secondary); font-size: 0.875rem; }
.subscription-features li span { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #16a34a; background: #dcfce7; }
.subscription-features li svg { width: 0.75rem; height: 0.75rem; }

.subscription-checkout { width: 100%; min-height: 3rem; }
.subscription-continue { margin-top: 0.75rem; display: block; color: #16a34a; font-weight: 600; text-align: center; }
.subscription-secure { margin: 1rem 0 0; color: var(--ps-text-muted); font-size: 0.75rem; text-align: center; }

.subscription-spinner {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: subscription-spin 650ms linear infinite;
}

.subscription-result {
  width: min(100% - 2rem, 28rem);
  min-height: calc(100vh - 8rem);
  margin: 0 auto;
  align-content: center;
  padding: 3rem 1rem 7rem;
  color: var(--ps-text-primary);
  text-align: center;
}
.subscription-result h1 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.subscription-result p { margin: 0 0 1rem; color: var(--ps-text-secondary); }
.subscription-result-icon--success { color: #16a34a; background: #dcfce7; }
.subscription-result-icon--failed { color: #dc2626; background: #fee2e2; }

@keyframes subscription-spin { to { transform: rotate(360deg); } }
@keyframes subscription-enter { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
  .subscription-plans,
  .subscription-features ul { grid-template-columns: 1fr; }
  .subscription-actions { align-items: stretch; flex-direction: column; }
}