<fieldset class="radio-group">
  <legend class="input-label">Plan</legend>

  <label class="radio-item">
    <input type="radio" name="plan" class="radio-input" value="free" checked />
    <span class="radio-circle"></span>
    <div class="radio-content">
      <span class="radio-label">Free</span>
      <span class="radio-desc">Up to 3 projects</span>
    </div>
  </label>

  <label class="radio-item">
    <input type="radio" name="plan" class="radio-input" value="pro" />
    <span class="radio-circle"></span>
    <div class="radio-content">
      <span class="radio-label">Pro — $12/mo</span>
      <span class="radio-desc">Unlimited projects, priority support</span>
    </div>
  </label>

  <label class="radio-item">
    <input type="radio" name="plan" class="radio-input" value="team" />
    <span class="radio-circle"></span>
    <div class="radio-content">
      <span class="radio-label">Team — $49/mo</span>
      <span class="radio-desc">Everything in Pro, plus team management</span>
    </div>
  </label>
</fieldset>

<style>
.radio-group { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.radio-item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem; border: 1px solid var(--border);
  border-radius: 0.625rem; cursor: pointer; transition: border-color 0.15s;
}
.radio-item:has(.radio-input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.radio-input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-circle {
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  border: 1.5px solid var(--border); flex-shrink: 0; margin-top: 2px;
  position: relative; transition: all 0.15s;
}
.radio-item:has(.radio-input:checked) .radio-circle { border-color: var(--accent); }
.radio-item:has(.radio-input:checked) .radio-circle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.radio-content { display: flex; flex-direction: column; gap: 0.125rem; }
.radio-label { font-size: 0.875rem; font-weight: 500; }
.radio-desc { font-size: 0.8125rem; color: var(--muted); }
</style>