/* Shared billing-modal card. The composer banner is the only large yellow
   surface. Here the pill is the one yellow element. */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.bm{
  width:min(26rem,calc(100vw - 2rem));
  background:#fff;
  border-radius:1.25rem;
  box-shadow:0 1.5rem 3rem rgba(22,21,28,.18);
  overflow:hidden;
  color:#16151C;
}
.bm-body{
  padding:1.75rem 1.75rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.bm-intro{display:flex;flex-direction:column;gap:0.625rem}
.bm-pill{
  align-self:flex-start;
  height:1.625rem;
  padding:0 0.625rem;
  border-radius:0.8125rem;
  background:#F7D65A;
  color:#16151C;
  font-size:0.8125rem;
  font-weight:650;
  display:inline-flex;
  align-items:center;
}
.bm-title{
  margin:0;
  font-size:1.375rem;
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.01em;
  color:#16151C;
}
.bm-lead{margin:0;font-size:0.9375rem;line-height:1.45;color:#5E5C6B}
.bm-quota{display:flex;flex-direction:column;gap:0.5rem}
.bm-caption{font-size:0.8125rem;color:#5E5C6B}
.bm-tile{
  background:#EFECFE;
  border-radius:0.875rem;
  padding:1rem 1.125rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0.75rem;
}
.bm-stat{display:flex;flex-direction:column;gap:0.125rem}
.bm-num{
  font-size:1.625rem;
  line-height:1.1;
  font-weight:800;
  color:#4A2FD6;
  letter-spacing:-.02em;
}
.bm-label{font-size:0.875rem;color:#5E5C6B}
.bm-price{
  border-top:1px solid #ECEBF0;
  padding-top:1rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.bm-price-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.375rem;
}
.bm-price-label{font-size:0.8125rem;color:#5E5C6B}
.bm-discount-line{
  margin:0;
  font-size:0.8125rem;
  font-weight:650;
  color:#2F6B45;
}
.bm-amount{display:flex;align-items:baseline;gap:0.5rem}
.bm-was{font-size:0.9375rem;color:#8A8896;text-decoration:line-through}
.bm-now{
  font-size:1.5rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
  color:#16151C;
}
.bm-now.is-discount{color:#2F7A55}
.bm-per{font-size:0.8125rem;font-weight:600;color:#5E5C6B}
.bm-promo-applied{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  font-size:0.8125rem;
  color:#2F6B45;
}
.bm-promo-applied > span{display:flex;align-items:center;gap:0.375rem}
.bm-promo-applied strong{font-weight:650}
.bm-promo-remove{
  border:0;
  background:transparent;
  padding:0.375rem 0;
  color:#2F6B45;
  font-size:0.8125rem;
  font-weight:600;
  text-decoration:underline;
  cursor:pointer;
}
.bm-promo-toggle{
  align-self:flex-start;
  border:0;
  background:transparent;
  padding:0.375rem 0;
  color:#4A2FD6;
  font-size:0.875rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:0.375rem;
  cursor:pointer;
}
.bm-promo-field{
  display:flex;
  align-items:center;
  height:2.75rem;
  box-sizing:border-box;
  border:1px solid #DCDBE3;
  border-radius:0.625rem;
  padding:0 0.25rem 0 0.75rem;
  gap:0.5rem;
  background:#fff;
}
.bm-promo-field:focus-within{border-color:#6244F2;box-shadow:0 0 0 0.1875rem #EFECFE}
.bm-promo-field input{
  flex:1;
  min-width:0;
  border:0;
  outline:none;
  font:inherit;
  font-size:0.9375rem;
  background:transparent;
  color:#16151C;
}
.bm-promo-field input::placeholder{color:#8A8896}
.bm-promo-apply{
  height:2.25rem;
  padding:0 0.75rem;
  border:0;
  border-radius:0.5rem;
  background:#EFECFE;
  color:#4A2FD6;
  font-size:0.875rem;
  font-weight:650;
  cursor:pointer;
}
.bm-promo-apply:disabled{opacity:.5;cursor:not-allowed}
.bm-promo-error{margin:0;font-size:0.8125rem;line-height:1.4;color:var(--error-text)}
.bm-assure{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}
.bm-assure li{
  display:flex;
  gap:0.5rem;
  align-items:flex-start;
  font-size:0.8125rem;
  line-height:1.45;
  color:#4A4857;
}
.bm-assure svg{flex-shrink:0;margin-top:0.125rem}
.bm-assure strong{color:#16151C;font-weight:650}
.bm-actions{display:flex;flex-direction:column;gap:0.375rem;margin-top:0.25rem}
.bm-primary{
  height:3.25rem;
  border:0;
  border-radius:0.75rem;
  background:#6244F2;
  color:#fff;
  font-size:1.0625rem;
  font-weight:650;
  cursor:pointer;
}
.bm-primary:hover{background:#5236E0}
.bm-primary:disabled{opacity:.7;cursor:progress}
.bm-secondary{
  height:2.75rem;
  border:0;
  background:transparent;
  color:#6E6C7A;
  font-size:0.9375rem;
  font-weight:500;
  cursor:pointer;
}
.bm-primary:focus-visible,
.bm-secondary:focus-visible,
.bm-promo-toggle:focus-visible,
.bm-promo-remove:focus-visible,
.bm-promo-apply:focus-visible{
  outline:2px solid #6244F2;
  outline-offset:2px;
}
@media (max-width:480px){
  .bm-body{padding:1.5rem 1.25rem 1rem}
  .bm-title{font-size:1.25rem}
}