/* Pricing / paywall view — the gate a verified-but-unsubscribed user sees. */
.pricing-view { flex: 1; min-height: 0; overflow: auto; }

.pricing {
  max-width: 760px; margin: 0 auto; padding: 40px 16px 56px;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}

.pricing-head { text-align: center; max-width: 560px; }
.pricing-title { font-size: 28px; font-weight: 800; margin: 0 0 10px; letter-spacing: 0.2px; }
.pricing-sub { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }

.pricing-msg { font-size: 13px; margin-top: 14px; }
.pricing-msg:empty { display: none; }
.pricing-msg.err {
  color: #ff9aa5; background: #2a1d22; border: 1px solid #4a2a32;
  border-radius: 8px; padding: 9px 12px;
}

.pricing-plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; width: 100%;
}

.plan-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 22px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center;
}
.plan-card.plan-best { border-color: var(--gold-soft); box-shadow: var(--shadow); }

.plan-badge {
  position: absolute; top: -11px; right: 16px;
  font-size: 11px; font-weight: 800; color: #1a1205; background: var(--gold);
  border-radius: 999px; padding: 3px 10px; letter-spacing: 0.02em;
}

.plan-name { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-amt { font-size: 40px; font-weight: 800; line-height: 1; }
.plan-per { font-size: 14px; color: var(--muted); }
.plan-note { font-size: 12px; color: var(--muted); min-height: 16px; }
.plan-cta { width: 100%; margin-top: 8px; padding: 11px 14px; font-size: 14px; }

.pricing-fine { font-size: 12px; color: var(--muted); text-align: center; margin: 0; }

@media (max-width: 640px) {
  .pricing { padding: 28px 12px 40px; gap: 22px; }
  .pricing-title { font-size: 23px; }
  .pricing-plans { grid-template-columns: 1fr; gap: 14px; }
  .plan-card { padding: 22px 18px; }
  .plan-amt { font-size: 34px; }
}