/* Account page: plan purchase and billing. */

.billing-interval { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.plan-options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.plan-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start;
  padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg);
  color: var(--text); cursor: pointer; font: inherit; transition: border-color 0.15s, background-color 0.15s;
}
.plan-option:hover { border-color: var(--green-dim); background: var(--green-wash); }
.plan-option:disabled { opacity: 0.6; cursor: progress; }
.plan-option strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.plan-option span { font: 600 14px/1.3 var(--mono); color: var(--green); }
.plan-option small { color: var(--faint); font-size: 0.85rem; }
#plans-test-note { margin-bottom: 14px; }