/* Billing (#/billing). Tokens only. */
.billing-banner { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.billing-banner.info { background: var(--info-soft); border-color: transparent; }
.billing-banner.info > svg { color: var(--info); }
.billing-banner.warning { background: var(--warning-soft); border-color: transparent; }
.billing-banner.warning > svg { color: var(--warning); }
.billing-banner.danger { background: var(--danger-soft); border-color: transparent; }
.billing-banner.danger > svg { color: var(--danger); }
.billing-banner .btn { margin-top: var(--s2); }

.billing-plans { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: stretch; }
.billing-plan { display: flex; flex-direction: column; gap: var(--s2); }
.billing-plan.current { border-color: var(--accent-fill); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-card); }
.billing-plan h3 { margin: 0; }
.billing-plan p { margin: 0; }
.billing-price { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.billing-price small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.billing-users { font-size: var(--fs-xs); font-weight: 600; }
.billing-feats { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.billing-feats li { display: flex; gap: 6px; align-items: flex-start; }
.billing-feats svg { color: var(--success); flex: none; margin-top: 3px; }
.billing-action { margin-top: auto; padding-top: var(--s3); }
.billing-action .btn { width: 100%; }
.billing-fine { font-size: var(--fs-xs); margin: 0; }

/* Free-trial banner at the top of each screen (app.js trialBanner, lib/trial.js). */
.trial-banner { display: flex; gap: var(--s2); align-items: center; margin: var(--s3) var(--s5) 0; padding: var(--s2) var(--s2) var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--info-soft); color: var(--info); font-weight: 600; font-size: var(--fs-sm); }
.trial-banner .grow { flex: 1; min-width: 0; }
.trial-banner a { color: var(--info); }
.trial-banner-x { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; cursor: pointer; }
.trial-banner-x:hover { background: var(--surface); }
@media (max-width: 760px) { .trial-banner { margin: var(--s2) var(--s3) 0; } }