/* Tamvya: Plan & billing (design/billing/, 18 Oct 2026; redesign 29 Oct 2026, the owner-approved mockup). On top of
   design/design.css: its colours, type and buttons; only this page's layout is here. design.css is light only
   (color-scheme: light), so this page is too. */
.bz-body{height:auto;min-height:100%;background:var(--paper)}
.bz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--gutter);background:var(--label);border-bottom:1px solid var(--line)}
.bz-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:-.01em}
.bz-brand img{display:block;border-radius:8px}
.bz-back{color:var(--signal);font-weight:500;font-size:13.5px;text-decoration:none}
.bz-back:hover{text-decoration:underline}
.bz-main{max-width:1120px;margin:0 auto;padding:clamp(16px,3vh,28px) var(--gutter) 48px}
.bz-main .dz-page-head{margin-top:0}
.bz-live{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--signal-soft);color:var(--signal-deep);font-size:13.5px;line-height:1.45}
.bz-live:empty{display:none}
.bz-live.ok{background:#E5F4EC;color:var(--ok)}
.bz-live.bad{background:#FDECEA;color:var(--bad)}
.bz-card{background:var(--label);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,2.4vw,22px);margin-bottom:14px}
.bz-card h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.bz-card p{margin:0}
.bz-card p:empty{display:none}
.bz-gate{display:grid;gap:12px;justify-items:start}
.dz-secondary:disabled,.dz-primary:disabled{opacity:.6;cursor:not-allowed}

/* 0. alert strips: payment failed, stopped retrying, being confirmed, being checked */
.bz-alerts{display:grid;gap:10px;margin-bottom:14px}
.bz-alerts:not(:has(> :not([hidden]))){display:none}
.bz-alert{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0;padding:12px 16px 12px 42px;border-radius:12px;border:1px solid;font-size:13.5px;line-height:1.45}
.bz-alert::before{content:"";position:absolute;left:16px;top:14px;width:16px;height:16px;border-radius:50%;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm-.9 3.6h1.8v5.6H7.1zm0 7h1.8v1.8H7.1z'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm-.9 3.6h1.8v5.6H7.1zm0 7h1.8v1.8H7.1z'/%3E%3C/svg%3E") center/16px no-repeat}
.bz-alert.bad{background:#FDECEA;border-color:#F5C6C1;color:var(--bad)}
.bz-alert.info{background:var(--signal-soft);border-color:#C9DFF7;color:var(--signal-deep)}
.bz-alert-body{flex:1 1 320px;min-width:0}
.bz-alert-title{margin:0;font-weight:600}
.bz-alert-body p:not(.bz-alert-title){margin:2px 0 0;color:var(--ink)}
.bz-alert .dz-secondary{background:var(--label)}

/* 1. the current plan, one compact row */
.bz-now{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px}
.bz-now-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bz-now-line{margin-top:4px!important;font-size:14px;color:var(--muted)}
.bz-now-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end}
.bz-now-acts:not(:has(> :not([hidden]))){display:none}
.bz-now-acts .dz-note{margin:0}
.bz-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--liner);color:var(--ink)}
.bz-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bz-chip.trial{background:var(--signal-soft);color:var(--signal-deep)}
.bz-chip.ok{background:#E5F4EC;color:var(--ok)}
.bz-chip.warn{background:#FFF4E0;color:var(--warn)}
.bz-chip.bad{background:#FDECEA;color:var(--bad)}
.bz-more{grid-column:1/-1;margin-top:2px;font-size:13px;color:var(--muted)}
.bz-more summary{cursor:pointer;color:var(--signal);font-weight:500;width:max-content;max-width:100%}
.bz-more p{margin-top:6px!important;max-width:70ch;line-height:1.5}

/* 2. plans: the heading and Monthly / Yearly on one row, right above the cards */
.bz-choose{margin:26px 0 14px}
.bz-plans-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 16px}
.bz-plans-head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.bz-plans-head .dz-muted{font-size:13px;margin:2px 0 0}
.bz-choose-note{margin:0 0 12px;font-size:13.5px}
/* Monthly / Yearly: two real radio buttons drawn as one switch */
.bz-seg{display:inline-flex;gap:2px;margin:0;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--label);min-width:0}
.bz-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bz-seg label{position:relative;cursor:pointer}
.bz-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.bz-seg span{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--muted)}
.bz-seg label:hover span{color:var(--ink)}
.bz-seg input:checked + span{background:var(--ink);color:#fff}
.bz-seg input:focus-visible + span{box-shadow:var(--ring)}
.bz-seg input:disabled + span{opacity:.6;cursor:not-allowed}
.bz-save{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:#E5F4EC;color:var(--ok);white-space:nowrap}
.bz-seg input:checked + span .bz-save{background:rgba(255,255,255,.18);color:#fff}

.bz-soon{margin:0 0 12px!important;padding:10px 14px;border-radius:10px;background:var(--liner);font-size:13.5px}
.bz-plans{--n:3;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;align-items:stretch}
.bz-plans:empty{display:none}
.bz-plans[data-count="1"]{max-width:380px}
.bz-plan{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start;background:var(--label);border:1px solid var(--line);border-radius:16px;padding:20px}
.bz-plan.is-current{border:2px solid var(--signal);padding:19px;box-shadow:0 10px 30px -18px rgba(11,116,223,.45)}
.bz-plan h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.bz-badge{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--signal-soft);color:var(--signal-deep);font-size:11.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
/* "Your plan": a tag on the card's top edge (still inside the heading, for screen readers) */
.bz-badge-now{position:absolute;top:-11px;left:18px;background:var(--signal);color:#fff;padding:2px 10px}
.bz-plan-desc{margin:4px 0 0!important;color:var(--muted);font-size:13px;line-height:1.45}
.bz-plan-price{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.bz-price{margin:0!important;font-size:14px;color:var(--muted)}
.bz-price strong{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.bz-unpriced{margin-top:6px!important;font-size:13.5px!important}
.bz-charge{margin:0!important;font-size:12.5px;color:var(--muted)}
.bz-saving{margin:0!important;font-size:12.5px;font-weight:500;color:var(--ok)}
.bz-plan-actions{margin-top:14px;display:grid;gap:8px;align-content:start}
.bz-plan-actions .dz-primary,.bz-plan-actions .dz-secondary{width:100%}
.bz-here{display:flex;align-items:center;justify-content:center;min-height:38px;margin:0!important;border-radius:999px;background:var(--liner);font-size:13.5px;font-weight:500;color:var(--ink)}
.bz-freenote{margin:0!important;font-size:12.5px;color:var(--muted)}
.bz-trial{margin:0!important;font-size:12.5px;font-weight:500;color:var(--signal-deep);text-align:center}
.bz-feat{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bz-plus{margin:0 0 8px!important;font-size:12.5px;font-weight:500;color:var(--muted)}
.bz-features{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13.5px;line-height:1.4}
.bz-features + .bz-features{margin-top:7px}
.bz-features li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:start}
.bz-features li::before{content:"";width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--signal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230A5FB8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.bz-features li b{font-weight:600}
.bz-features li.off{color:var(--muted)}
.bz-features li.off::before{background:var(--liner) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' stroke='%238A94A3' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
#bzRenewNote{margin:12px 0 0;font-size:12.5px;max-width:90ch}

/* 3. Manage: quiet, grouped, at the end */
.bz-manage{margin-top:28px}
.bz-manage h2{font-size:17px!important;margin-bottom:4px!important}
.bz-rows{display:grid}
.bz-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:14px 0}
.bz-row:not([hidden]) ~ .bz-row{border-top:1px solid var(--line)}  /* a line between rows, none above the first shown */
.bz-row h3{margin:0;font-size:14px;font-weight:500}
.bz-row p{margin:2px 0 0!important;font-size:13px;color:var(--muted)}
.bz-link-danger{background:none;border:0;padding:6px 0;font:inherit;font-size:13.5px;font-weight:500;color:var(--bad);cursor:pointer;white-space:nowrap}
.bz-link-danger:hover{text-decoration:underline}
.bz-link-danger:disabled{opacity:.6;cursor:not-allowed;text-decoration:none}
.bz-hist{grid-column:1/-1}
.bz-hist summary{cursor:pointer;color:var(--signal);font-weight:500;font-size:13.5px;width:max-content;max-width:100%}
.bz-table-wrap{overflow-x:auto;margin-top:8px;max-width:460px}
.bz-table{width:100%;border-collapse:collapse;font-size:13.5px}
.bz-table th{text-align:left;font-size:12px;font-weight:500;color:var(--muted);padding:6px 10px 6px 0;border-bottom:1px solid var(--line)}
.bz-table td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.bz-table tr:last-child td{border-bottom:0}
.bz-table td:last-child,.bz-table th:last-child{padding-right:0}
.bz-table .bad{color:var(--bad)}
.bz-table .ok{color:var(--ok)}

.bz-legal{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:13px}
.bz-legal a{color:var(--muted)}
.bz-legal a:hover{color:var(--ink)}

.bz-danger{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:9px 16px;font-weight:500;font-size:13.5px;line-height:1.2;cursor:pointer;border:1px solid var(--bad);background:var(--bad);color:#fff;white-space:nowrap}
.bz-danger:hover{background:#912018}
.bz-danger:disabled{opacity:.6;cursor:not-allowed}
.bz-dialog-actions{justify-content:flex-end;gap:8px;padding-top:4px}
/* Upgrade credit (23 Oct 2026): the upgrade dialog's start line */
#bzUpgradeNote{font-size:13px}
/* (entry links, 25 Oct 2026) the website's "Try Business free for 14 days", after sign-in: the card's own button, marked */
.bz-trial-asked{outline:2px solid var(--signal);outline-offset:3px}

/* below ~940 px a card would be under ~280 px wide: one column (never 2 + 1), the workspace's own plan first */
@media (max-width:939px){
  .bz-plans{grid-template-columns:minmax(0,1fr);gap:20px}
  .bz-plans[data-count="1"]{max-width:none}
  .bz-plan{display:block;grid-row:auto}
  .bz-plan.is-current{order:-1}
  .bz-saving:empty{display:none}
}
@media (max-width:560px){
  .bz-top{padding:10px 16px}
  .bz-main{padding:16px 16px 40px}
  .bz-now{grid-template-columns:minmax(0,1fr)}
  .bz-now-acts{justify-content:stretch}
  .bz-now-acts > *{flex:1 1 100%}
  .bz-plans-head{display:grid;grid-template-columns:minmax(0,1fr)}
  .bz-seg{display:grid;grid-template-columns:1fr 1fr}
  .bz-seg span{justify-content:center}
  .bz-row{grid-template-columns:minmax(0,1fr)}
  .bz-row .dz-secondary,.bz-row .bz-link-danger{justify-self:start}
  .bz-alert .dz-secondary{flex:1 1 100%}
  .bz-dialog-actions{flex-direction:column-reverse;align-items:stretch}
  /* tap targets of at least 40 px on phones */
  .bz-back{display:inline-flex;align-items:center;min-height:40px}
  .bz-body .dz-primary,.bz-body .dz-secondary{min-height:44px}
  .bz-seg span{min-height:40px}
  .bz-more summary,.bz-hist summary{line-height:40px} /* (a list item still: keeps its triangle) */
  .bz-link-danger{min-height:40px}
}