/* The Monthly / Yearly switch above the pricing cards.
   It is a <fieldset> with two radio buttons, styled to look like the tabs. */
.billing {
  display: flex;
  gap: var(--space-1);
  width: fit-content;
  margin: 0 auto var(--space-7);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.billing-option {
  position: relative;
  cursor: pointer;
}

/* The real radio button is invisible but still there, so the keyboard
   (Tab, arrow keys) and screen readers keep working with no extra JavaScript. */
.billing-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.billing-option span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-weight: 600;
}

.billing-option input:checked + span {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

/* The input is invisible, so its focus ring is drawn on the label text. */
.billing-option input:focus-visible + span {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.billing-option em {
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-style: normal;
}