<fieldset class="cbgp-mercury" role="group" aria-label="Billing period">
  <legend class="cbgp-sr">Billing period</legend>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-1" checked />
  <label for="cbgp-mercury-1">Monthly</label>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-2" />
  <label for="cbgp-mercury-2">Yearly</label>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-3" />
  <label for="cbgp-mercury-3">Forever</label>
  <span class="cbgp-mercury-thumb" aria-hidden="true"></span>
</fieldset>

.cbgp-sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cbgp-mercury {
  display: inline-flex; position: relative; padding: 4px;
  background: radial-gradient(ellipse at 30% 30%, #1a1a2a 0%, #0a0a14 100%);
  border: 1px solid rgba(220,225,230,0.08);
  border-radius: 999px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.04);
}
.cbgp-mercury input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-mercury label {
  flex: 1 1 0; min-width: 88px;
  position: relative; z-index: 1;
  padding: 9px 18px; text-align: center;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(220,225,230,0.5);
  cursor: pointer; transition: color 0.4s;
  border-radius: 999px;
}
.cbgp-mercury input:checked + label { color: #0a0a14; }
.cbgp-mercury-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(33.333% - 2.667px);
  background:
    radial-gradient(ellipse at 30% 30%, #f5f5fa 0%, #cad3da 50%, #6a7480 100%);
  border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
  z-index: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 2px 8px rgba(220,225,230,0.18);
  transition:
    transform 0.55s cubic-bezier(.68,-0.4,.32,1.4),
    border-radius 0.6s cubic-bezier(.65,0,.35,1);
}
#cbgp-mercury-2:checked ~ .cbgp-mercury-thumb {
  transform: translateX(100%);
  border-radius: 50% 60% 50% 50% / 60% 40% 60% 40%;
}
#cbgp-mercury-3:checked ~ .cbgp-mercury-thumb {
  transform: translateX(200%);
  border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
}