/* Paid plans: the monthly/annual switch, a four-card grid and one status region.
   Only applied once billing.js has decided a purchase path may be shown. */
#pricing.bl-live .bl-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pricing.bl-live .mkplan { display: flex; flex-direction: column; }
#pricing.bl-live .mkplan .foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 10px; }
#pricing.bl-live .mkplan .foot { text-align: left; align-self: stretch; }
#pricing.bl-live .mkplan .foot .mkcta { display: flex; align-self: stretch; width: 100%; max-width: none; margin: 0; justify-content: center; text-align: center; white-space: normal; }
#pricing.bl-live .pp { white-space: nowrap; font-size: clamp(2rem, 3.2vw, 3.25rem); }
#pricing.bl-live .pp small { white-space: nowrap; }
.bl-note { margin: 12px 0 0; font-size: 0.875rem; color: var(--c-mute); }
.bl-fine { margin: 0; font-size: 0.8125rem; color: var(--c-mute); }

.bl-toggle { display: inline-flex; margin: clamp(24px, 3vw, 32px) auto 0; padding: 4px; gap: 4px;
  border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-card); }
.bl-toggle button { appearance: none; border: 0; background: transparent; color: var(--c-body); font: inherit;
  padding: 8px 16px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.bl-toggle button[aria-pressed="true"] { background: var(--v); color: #fff; }
.bl-toggle button:focus-visible { outline: 2px solid var(--v); outline-offset: 2px; }
.bl-save { font-size: 0.75rem; opacity: 0.85; }

.bl-notice { margin: 24px auto 0; max-width: 60ch; padding: 16px 20px; text-align: left;
  border: 1px solid var(--c-line); border-radius: var(--ui-panel, 12px); background: var(--c-card); }
.bl-notice[data-kind="error"] { border-color: var(--c-danger, #C4271D); }
.bl-notice[data-kind="done"] { border-color: var(--v); }
.bl-notice strong { display: block; color: var(--c-ink); margin-bottom: 4px; }
.bl-notice p { margin: 0; color: var(--c-body); }
.bl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; align-items: center; }
.bl-actions .authbtn { flex: 1 1 200px; }

@media (max-width: 900px) {
  #pricing.bl-live .bl-plans { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
}
@media (max-width: 640px) {
  #pricing.bl-live .bl-plans { grid-template-columns: 1fr; row-gap: 24px; }
  .bl-toggle { display: flex; width: 100%; }
  .bl-toggle button { flex: 1 1 0; justify-content: center; padding: 8px 10px; }
  .bl-save { display: block; }
  .bl-actions { flex-direction: column; align-items: stretch; }
}
.bl-notice p.signin-ack { margin-top: 12px; font-size: 0.875rem; color: var(--c-mute, var(--c-body)); } .bl-notice p.signin-ack a { color: inherit; }