<fieldset class="crb-tier">
  <legend class="crb-sr">Plan tier</legend>
  <label>
    <input type="radio" name="crb-tier" />
    <span class="crb-tier-card">
      <strong>Basic</strong>
      <em>$5/mo</em>
      <span class="crb-tier-ribbon">Best value</span>
    </span>
  </label>
  <label>
    <input type="radio" name="crb-tier" checked />
    <span class="crb-tier-card">
      <strong>Plus</strong>
      <em>$15/mo</em>
      <span class="crb-tier-ribbon">Best value</span>
    </span>
  </label>
</fieldset>

.crb-tier { display: flex; gap: 10px; border: 0; padding: 14px 0 0; }
.crb-tier input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-tier label { flex: 1; cursor: pointer; }
.crb-tier-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  position: relative;
  padding: 12px;
  background: #1a1a28; border: 1.5px solid rgba(255,255,255,0.06); border-radius: 10px;
  transition: border-color 0.3s, background 0.3s;
}
.crb-tier-card strong { font: 700 14px/1 system-ui, sans-serif; color: #fff; }
.crb-tier-card em { font: 600 12px/1 monospace; color: #a78bfa; font-style: normal; }
.crb-tier-ribbon {
  position: absolute;
  top: 0; left: 50%;
  padding: 4px 12px;
  border-radius: 999px;
  font: 700 9px/1 system-ui, sans-serif;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a); color: #fff;
  box-shadow: 0 2px 8px rgba(124,108,255,0.4);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
.crb-tier input:checked + .crb-tier-card {
  border-color: #7c6cff;
  background: linear-gradient(135deg, rgba(124,108,255,0.15), rgba(255,108,138,0.05));
}
.crb-tier input:checked + .crb-tier-card .crb-tier-ribbon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.crb-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;
}