.billing-opening{
  padding-bottom:var(--space-5);
}
.billing-heading{
  max-width:840px;
}
.billing-heading h1{
  margin-top:var(--space-3);
}
.billing-summary{
  max-width:720px;
  margin-top:var(--space-3);
  font-size:18px;
  color:var(--muted);
}
.billing-entry{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-3);
}
.billing-entry .muted{
  font-size:14px;
  min-width:0;
}
.billing-note{
  max-width:840px;
  margin-top:var(--space-4);
}
.billing-selector{
  padding-top:var(--space-2);
  padding-bottom:var(--space-4);
}
.billing-period{
  padding-top:var(--space-3);
}
.billing-period + .billing-period{
  margin-top:var(--space-8);
}
.billing-selector:has(#monthly[hidden]) #packs{
  margin-top:0;
}
.billing-fit{
  margin-bottom:var(--space-3);
  font-size:15px;
  color:var(--muted);
}
.billing-explanation{
  max-width:840px;
  margin-top:var(--space-4);
}
.billing-explanation p{
  margin-top:var(--space-2);
  color:var(--muted);
}
.billing-explanation a{
  color:var(--accent);
}
.billing-payment-labels{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1);
}
.billing-process{
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(0,4fr);
  gap:var(--space-3);
  align-items:start;
}
.billing-process > *{
  min-width:0;
}
.billing-process .callout h3{
  font-size:25px;
}
.billing-refund{
  max-width:960px;
}
.billing-refund .btn{
  align-self:start;
}
@media(max-width:768px){
  .billing-process{
    grid-template-columns:minmax(0,1fr);
  }
  .billing-summary{
    font-size:var(--body-size);
  }
}